/* Clear-fee — premium interaction layer */
:root{--cf-bg:#efe9df;--cf-bg-2:#e5ddd0;--cf-ink:#181511;--cf-line:rgba(24,21,17,.12);--cf-accent:#b84512;--cf-accent-2:#8f310a;--cf-green:#2f7354;--cf-shadow:0 22px 70px rgba(38,28,19,.13),0 4px 18px rgba(38,28,19,.07);--cf-fast:140ms cubic-bezier(.2,.8,.2,1)}
html{scroll-behavior:smooth}body{background:var(--cf-bg);color:var(--cf-ink)}button{touch-action:manipulation}
.app{grid-template-columns:minmax(365px,460px) minmax(0,1fr);background:var(--cf-bg)}
.panel{background:linear-gradient(165deg,#f3eee6 0%,var(--cf-bg-2) 100%);border-right:1px solid var(--cf-line)}
.panel-body{scrollbar-width:thin;scrollbar-color:rgba(24,21,17,.22) transparent}.panel-body::-webkit-scrollbar,.preview-wrap::-webkit-scrollbar{width:9px}.panel-body::-webkit-scrollbar-thumb,.preview-wrap::-webkit-scrollbar-thumb{background:rgba(24,21,17,.16);border:3px solid transparent;background-clip:padding-box;border-radius:999px}
.brand{position:sticky;top:0;z-index:8;margin:-24px -24px 22px;padding:22px 24px 18px;background:rgba(243,238,230,.88);backdrop-filter:blur(16px) saturate(135%);-webkit-backdrop-filter:blur(16px) saturate(135%);box-shadow:0 10px 28px -22px rgba(24,21,17,.35)}
.brand h1{font-size:34px}.brand small{opacity:.72}.brand:after{content:'LIVE PREVIEW';display:block;position:absolute;right:24px;bottom:5px;font:600 8px/1 'JetBrains Mono',monospace;letter-spacing:.16em;color:var(--cf-green);opacity:.9}
.section{background:rgba(255,253,249,.7);border-color:rgba(24,21,17,.11);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 10px 25px -22px rgba(24,21,17,.45);transition:transform var(--cf-fast),box-shadow var(--cf-fast),border-color var(--cf-fast)}
.section:focus-within{border-color:rgba(184,69,18,.33);box-shadow:0 0 0 3px rgba(184,69,18,.06),0 14px 30px -22px rgba(24,21,17,.35)}.section-label{letter-spacing:.2em;color:#656057}
input,select,textarea{min-height:40px;border-radius:9px;border-color:rgba(24,21,17,.13);background:rgba(255,255,255,.72);box-shadow:0 1px 2px rgba(24,21,17,.02) inset;transition:border-color var(--cf-fast),box-shadow var(--cf-fast),background var(--cf-fast),transform var(--cf-fast)}
input:hover,select:hover,textarea:hover{border-color:rgba(24,21,17,.23);background:#fff}input:focus,select:focus,textarea:focus{border-color:var(--cf-accent);box-shadow:0 0 0 4px rgba(184,69,18,.10),0 1px 2px rgba(24,21,17,.02) inset;transform:translateY(-1px)}label{color:#6d675e}
.logo-drop{min-height:104px;border-color:rgba(24,21,17,.22);border-radius:10px;position:relative;overflow:hidden}.logo-drop:after{content:'⌘  K';position:absolute;right:10px;bottom:8px;font:600 8px 'JetBrains Mono',monospace;color:#8a8379;opacity:.55}.logo-drop:hover{border-color:var(--cf-accent);box-shadow:0 0 0 4px rgba(184,69,18,.08)}
.item{border-radius:11px;padding:15px 15px 13px;background:rgba(255,255,255,.68);transition:transform var(--cf-fast),box-shadow var(--cf-fast),border-color var(--cf-fast)}.item:hover{transform:translateY(-1px);box-shadow:0 10px 24px -18px rgba(24,21,17,.45);border-color:rgba(24,21,17,.20)}.item-index{font-size:18px}.item-type{background:rgba(184,69,18,.08);border-color:rgba(184,69,18,.12)}.item-remove{width:32px;height:30px;padding:0;display:inline-grid;place-items:center;color:#777068}.item-remove:hover{background:#fff5f0}.add-btn{border-radius:10px;min-height:44px;font-weight:600}
.actions{padding:12px 24px max(14px,env(safe-area-inset-bottom,0px));gap:8px}.actions button{min-height:46px;border-radius:10px;font-size:10px;font-weight:700;box-shadow:0 7px 18px -14px rgba(24,21,17,.7)}.btn-primary{background:linear-gradient(135deg,#1b1712,#332921);box-shadow:0 10px 24px -14px rgba(24,21,17,.9)}.btn-primary:hover{background:linear-gradient(135deg,var(--cf-accent-2),var(--cf-accent));transform:translateY(-1px)}.btn-ghost{background:rgba(255,255,255,.62)}.btn-ghost:hover{transform:translateY(-1px)}
.preview-wrap{position:relative;padding:56px clamp(24px,5vw,72px);background:radial-gradient(circle at 10% 4%,rgba(184,69,18,.10),transparent 30%),radial-gradient(circle at 90% 95%,rgba(24,21,17,.06),transparent 32%),var(--cf-bg)}.preview-wrap:before{content:'PREVIEW';position:fixed;right:34px;top:26px;z-index:4;font:600 9px 'JetBrains Mono',monospace;letter-spacing:.2em;color:#756e65;opacity:.55;pointer-events:none}
.paper{max-width:840px;padding:58px 60px 62px;border-radius:12px;box-shadow:var(--cf-shadow);border:1px solid rgba(24,21,17,.07);transition:box-shadow 180ms ease,transform 180ms ease}.paper:hover{box-shadow:0 28px 80px rgba(38,28,19,.15),0 5px 22px rgba(38,28,19,.08)}.paper:after{content:'Generated locally · ready to print';position:absolute;right:24px;top:17px;font:500 8px 'JetBrains Mono',monospace;letter-spacing:.11em;color:#918b83;opacity:.5}
.inv-head{gap:34px;padding-bottom:30px;margin-bottom:28px}.inv-invoice-box{background:linear-gradient(145deg,rgba(184,69,18,.055),rgba(24,21,17,.02));border-color:rgba(24,21,17,.13);box-shadow:0 8px 24px -22px rgba(24,21,17,.5)}.inv-invoice-box h2{font-size:30px}.meta-card,.notes,.totals-box{border-radius:10px;background:rgba(24,21,17,.018);border-color:rgba(24,21,17,.11)}.meta-card{padding:16px 17px}.meta-card h3,.notes h4,.inv-footer-col h4{color:#756e65}.meta-card .name{font-size:17px}.table-wrap{border-radius:10px;box-shadow:0 7px 28px -28px rgba(24,21,17,.7)}.inv-table thead th{background:#f4f0e8;padding-top:12px;padding-bottom:12px}.inv-table tbody td{padding-top:15px;padding-bottom:15px}.inv-table tbody tr{transition:background .15s ease}.inv-table tbody tr:hover td{background:rgba(184,69,18,.035)}.inv-table .item-title{font-size:15.5px}.item-mode{font-weight:600}.totals-box{box-shadow:0 12px 24px -28px rgba(24,21,17,.9)}.totals-row.grand{font-size:21px;padding-top:14px}.totals-row.grand span:last-child{font-size:23px}.inv-footer{padding-top:25px}.thank{font-size:17px}
.section-label:before{content:'◆';font-size:6px;color:var(--cf-accent);opacity:.8;margin-right:2px}
.cf-shortcut{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(12px);z-index:30;opacity:0;pointer-events:none;padding:9px 13px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(24,21,17,.92);color:#fff;font:500 9px 'JetBrains Mono',monospace;letter-spacing:.06em;transition:opacity 160ms ease,transform 160ms ease}.cf-shortcut.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:1100px){.app{grid-template-columns:390px minmax(0,1fr)}.paper{padding:46px 46px 52px}.brand{margin:-24px -24px 20px}}
@media (max-width:1000px){.app{grid-template-columns:1fr}.panel{min-height:0}.panel-body{max-height:none;overflow:visible}.brand{position:relative;margin:0 0 22px;padding:0 0 18px;background:none;backdrop-filter:none;box-shadow:none}.brand:after{right:0;bottom:4px}.actions{position:sticky;bottom:0}.preview-wrap{padding:28px 20px 40px}.preview-wrap:before{position:absolute}.paper{max-width:900px}}
@media (max-width:640px){.preview-wrap{padding:16px 10px 28px}.paper{padding:34px 22px 38px;border-radius:9px}.paper:after{display:none}.inv-head{gap:18px}.inv-invoice-box{padding:15px}.meta-card{padding:14px}.actions{padding-left:14px;padding-right:14px}.panel-body{padding:16px}.brand{margin-bottom:16px}.section{padding:16px 15px 14px}.brand h1{font-size:30px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}