:root{
  --bg:#eef2f7;
  --panel:#ffffff;
  --ink:#121826;
  --muted:#6b7280;
  --line:#dfe5ee;
  --primary:#2563eb;
  --primary-2:#1d4ed8;
  --dark:#0b1220;
  --success:#0f9f6e;
  --danger:#d92d20;
  --radius:18px;
  --shadow:0 18px 45px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:linear-gradient(180deg,#f8fafc 0,#edf2f7 35%,#e7edf5 100%);min-height:100vh}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit}
.hidden{display:none!important}
.app-shell{min-height:100vh}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(16px,3vw,34px);background:rgba(11,18,32,.94);backdrop-filter:blur(15px);color:#fff;box-shadow:0 10px 30px rgba(11,18,32,.16)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-icon{width:42px;height:42px;border-radius:12px;box-shadow:0 8px 22px rgba(37,99,235,.35)}
.brand strong{display:block;font-size:1.06rem}.brand span{display:block;color:#9fb0ca;font-size:.78rem;margin-top:2px}
.top-actions{display:flex;gap:8px}.btn{border:0;border-radius:12px;padding:11px 16px;font-weight:800;transition:.18s ease;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none}.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--primary);color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.2)}.btn.primary:hover{background:var(--primary-2)}
.btn.secondary{background:#e8eef9;color:#1f3b68}.btn.dark{background:var(--dark);color:#fff}.btn.ghost{background:rgba(255,255,255,.1);color:inherit;border:1px solid rgba(255,255,255,.17)}
.card .btn.ghost{background:#f6f8fb;color:#344258;border-color:#dfe5ee}.btn.danger{background:#fee4e2;color:#b42318}.btn.full{width:100%}.btn.small{padding:8px 11px;font-size:.84rem}.btn.big{padding:14px 17px;font-size:.98rem}
.privacy-strip{display:flex;gap:8px;align-items:center;justify-content:center;padding:9px 16px;background:#e8fff5;border-bottom:1px solid #b7f0d8;color:#176b50;font-size:.88rem}.privacy-dot{width:9px;height:9px;background:#18a875;border-radius:50%;box-shadow:0 0 0 5px rgba(24,168,117,.12)}
.tabs{display:flex;gap:5px;justify-content:center;padding:11px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.82);backdrop-filter:blur(10px)}.tab{border:0;background:transparent;color:#64748b;padding:10px 18px;border-radius:999px;font-weight:800}.tab.active{background:var(--dark);color:#fff}
.tab-panel{display:none}.tab-panel.active{display:block}.workspace{display:grid;grid-template-columns:minmax(390px,480px) minmax(560px,1fr);gap:26px;max-width:1600px;margin:0 auto;padding:24px}
.editor-panel{display:flex;flex-direction:column;gap:14px}.card{background:rgba(255,255,255,.95);border:1px solid rgba(221,229,239,.95);border-radius:var(--radius);box-shadow:var(--shadow)}.hero-card{padding:16px}
details.card{overflow:hidden}details summary{list-style:none;cursor:pointer;font-weight:900;padding:17px 20px;border-bottom:1px solid transparent}details[open] summary{border-bottom-color:var(--line);background:#fbfcfe}details summary::-webkit-details-marker{display:none}details summary:after{content:"+";float:right;color:#7d8ba3}details[open] summary:after{content:"−"}.details-content{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.field-grid{display:grid;gap:12px}.field-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.field-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.field.span-2{grid-column:span 2}.field{display:flex;flex-direction:column;gap:6px}.field>span{font-size:.78rem;font-weight:800;color:#526077}.field input,.field select,.field textarea,.history-tools input{width:100%;border:1px solid #d9e0ea;background:#fff;border-radius:11px;padding:11px 12px;outline:none;color:#172033;transition:.15s}.field input:focus,.field select:focus,.field textarea:focus,.history-tools input:focus{border-color:#7aa6ff;box-shadow:0 0 0 3px rgba(37,99,235,.09)}.field textarea{resize:vertical}.hint{margin:0;color:var(--muted);font-size:.83rem;line-height:1.4}.check-line{font-size:.88rem;color:#42516a;display:flex;align-items:center;gap:8px}.check-line input{width:17px;height:17px}.business-logo-row{display:flex;align-items:center;gap:16px}.logo-upload{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.logo-thumb{width:76px;height:76px;border-radius:16px;background:#f3f6fb;border:1px dashed #bdc8d8;display:grid;place-items:center;overflow:hidden;color:#93a2b8;font-size:.72rem;font-weight:900}.logo-thumb img{width:100%;height:100%;object-fit:contain}.text-btn{border:0;background:transparent;color:#667892;font-weight:700;padding:7px}
.items-editor{display:flex;flex-direction:column;gap:10px}.item-row{display:grid;grid-template-columns:minmax(0,1fr) 78px 108px 36px;gap:8px;align-items:end;padding:11px;border:1px solid var(--line);border-radius:14px;background:#fbfcfe}.item-row .field>span{font-size:.7rem}.item-row input{padding:9px}.icon-btn{width:36px;height:38px;border:0;border-radius:10px;background:#f0f3f8;color:#6b7280;font-size:1.05rem}.icon-btn:hover{background:#fee4e2;color:#b42318}.item-extra{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end}.save-product-btn{border:0;background:transparent;color:#3264af;font-size:.78rem;font-weight:800;padding:2px 4px}
.sticky-actions{position:sticky;bottom:12px;z-index:10;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:16px;box-shadow:0 15px 35px rgba(15,23,42,.14)}
.preview-wrap{position:relative}.invoice-paper{position:sticky;top:128px;max-width:900px;min-height:1120px;margin:0 auto;background:#fff;box-shadow:0 22px 60px rgba(15,23,42,.12);padding:60px 62px 38px;overflow:hidden}.paper-topline{height:7px;background:linear-gradient(90deg,#0b1220 0 60%,#2563eb 60%);position:absolute;top:0;left:0;right:0}.invoice-header{display:flex;justify-content:space-between;gap:30px;align-items:flex-start;padding-bottom:36px;border-bottom:1px solid #e2e8f0}.invoice-brand{min-width:240px}.invoice-logo{max-width:180px;max-height:80px;object-fit:contain;display:block;margin-bottom:10px}.fallback-brand{font-size:1.8rem;font-weight:950;letter-spacing:-.03em;max-width:340px}.invoice-title-block{text-align:right}.invoice-type{font-size:2rem;font-weight:950;letter-spacing:.06em}.invoice-number{color:#5f6b7d;font-weight:800;margin-top:7px}.invoice-meta-grid{display:grid;grid-template-columns:1fr 1fr 180px;gap:28px;padding:34px 0}.label-sm{font-size:.66rem;font-weight:950;letter-spacing:.12em;color:#8491a4;display:block;margin-bottom:8px}.party-block{font-size:.88rem;line-height:1.6;color:#4d5a6e}.party-block strong{font-size:1rem;color:#111827}.dates-block{display:flex;flex-direction:column;gap:13px}.dates-block>div{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #edf0f4;padding-bottom:7px}.dates-block span{font-size:.78rem;color:#7b8799}.dates-block strong{font-size:.8rem}.table-scroll{overflow-x:auto}.invoice-table{width:100%;border-collapse:collapse}.invoice-table th{font-size:.69rem;letter-spacing:.08em;text-transform:uppercase;color:#6b7789;text-align:left;padding:11px 9px;border-bottom:2px solid #152033}.invoice-table td{padding:14px 9px;border-bottom:1px solid #e7ebf0;font-size:.87rem;vertical-align:top}.invoice-table .num{text-align:right;white-space:nowrap}.item-description strong{display:block;color:#172033}.item-description small{color:#7d8999}.totals-area{display:grid;grid-template-columns:1fr 330px;gap:35px;margin-top:30px}.payment-notes{font-size:.82rem;color:#536076;line-height:1.5}.payment-notes p{margin:0 0 18px;white-space:pre-wrap}.totals-box{background:#f7f9fc;border:1px solid #e4e9f1;border-radius:14px;padding:18px}.totals-box>div{display:flex;justify-content:space-between;gap:18px;padding:7px 0;font-size:.88rem}.totals-box span{color:#607089}.totals-box .grand-total{margin:10px -18px -18px;padding:16px 18px;background:#0b1220;color:white;border-radius:0 0 14px 14px;font-size:1.08rem}.totals-box .grand-total span{color:#fff}.invoice-footer{position:absolute;left:62px;right:62px;bottom:34px;display:flex;justify-content:space-between;gap:20px;border-top:1px solid #e4e8ee;padding-top:14px;color:#7c899b;font-size:.73rem}.invoice-footer small{color:#9ba6b5}
.mobile-view-switch{display:none}.page-section{max-width:1300px;margin:0 auto;padding:30px 24px 60px}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:20px}.section-head h2,.settings-card h2{margin:0 0 5px}.section-head p,.settings-card p{margin:0;color:#6b7280}.history-tools{display:flex;gap:10px;align-items:center}.history-tools input{min-width:260px}.history-list{display:flex;flex-direction:column;gap:10px}.history-empty{padding:50px 20px;text-align:center;color:#748094;background:#fff;border:1px dashed #cfd7e3;border-radius:18px}.history-item{display:grid;grid-template-columns:1fr 180px 140px auto;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:0 8px 22px rgba(15,23,42,.04)}.history-item strong{display:block}.history-item small{color:#738095}.status-pill{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:.72rem;font-weight:850;background:#fff4d6;color:#8b6412}.status-pill.paid{background:#dcfaec;color:#11704e}.history-amount{text-align:right;font-weight:950}.row-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.row-actions button{border:0;border-radius:9px;padding:8px 10px;background:#f1f4f8;font-weight:800;font-size:.78rem;color:#53627a}.row-actions button:hover{background:#e7edf5}.row-actions .delete{color:#b42318;background:#fff0ef}.data-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.settings-card{padding:22px}.settings-card .btn{margin-top:12px}.mini-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}.mini-item{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:10px 12px;background:#fbfcfe}.mini-item strong{font-size:.88rem}.mini-item small{color:#7d899a}.mini-item button{border:0;background:#feeceb;color:#b42318;border-radius:8px;padding:6px 8px;font-size:.75rem;font-weight:800}.warning-card{border-color:#fed7aa;background:#fffbeb}.small-note{font-size:.83rem;line-height:1.5;margin-top:10px!important}.site-footer{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px clamp(18px,4vw,50px);background:#0b1220;color:#9cabc1;font-size:.82rem}.site-footer a{color:#fff;text-decoration:none}.toast{position:fixed;left:50%;bottom:28px;z-index:200;transform:translate(-50%,20px);opacity:0;background:#0b1220;color:#fff;padding:11px 16px;border-radius:999px;box-shadow:0 12px 30px rgba(0,0,0,.2);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1100px){.workspace{grid-template-columns:1fr;padding:16px}.invoice-paper{position:relative;top:0;min-height:1020px}.mobile-view-switch{display:flex;gap:6px;padding:12px 16px 0}.view-toggle{flex:1;border:1px solid var(--line);background:#fff;padding:10px;border-radius:11px;font-weight:850}.view-toggle.active{background:#0b1220;color:#fff}.workspace.mobile-form .preview-wrap{display:none}.workspace.mobile-preview .editor-panel{display:none}.invoice-footer{position:static;margin-top:80px}.invoice-paper{padding-bottom:28px}.privacy-strip{font-size:.78rem}.history-item{grid-template-columns:1fr 130px auto}.history-item .history-status{display:none}}
@media(max-width:700px){.topbar{padding:10px 12px}.brand span{display:none}.brand-icon{width:38px;height:38px}.top-actions .btn{padding:9px 11px;font-size:.78rem}.privacy-strip{justify-content:flex-start;overflow:auto;white-space:nowrap}.tabs{justify-content:stretch}.tab{flex:1;padding:9px 5px;font-size:.78rem}.workspace{padding:10px}.field-grid.cols-2,.field-grid.cols-3{grid-template-columns:1fr}.field.span-2{grid-column:auto}.business-logo-row{align-items:flex-start;flex-direction:column}.item-row{grid-template-columns:1fr 72px 96px 34px}.sticky-actions{grid-template-columns:1fr;bottom:8px}.invoice-paper{min-height:0;padding:38px 22px 24px}.invoice-header{gap:18px;padding-bottom:24px}.invoice-brand{min-width:0}.fallback-brand{font-size:1.35rem}.invoice-type{font-size:1.35rem}.invoice-meta-grid{grid-template-columns:1fr 1fr;gap:20px;padding:24px 0}.dates-block{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.totals-area{grid-template-columns:1fr}.invoice-footer{left:22px;right:22px;flex-direction:column;gap:6px;margin-top:50px}.page-section{padding:20px 12px 40px}.section-head{align-items:stretch;flex-direction:column}.history-tools{flex-direction:column;align-items:stretch}.history-tools input{min-width:0}.history-item{grid-template-columns:1fr auto;gap:10px}.history-amount{align-self:start}.row-actions{grid-column:1/-1;justify-content:flex-start}.data-grid{grid-template-columns:1fr}.site-footer{flex-direction:column;align-items:flex-start}.invoice-table{min-width:560px}}
@media print{
  @page{size:A4;margin:10mm}
  html,body{background:#fff!important;margin:0!important;padding:0!important;min-height:0!important;height:auto!important}
  .app-shell{min-height:0!important;height:auto!important}
  .no-print{display:none!important}
  .tab-panel{display:block!important}
  .tab-panel:not(#editorTab){display:none!important}
  .workspace{display:block!important;margin:0!important;padding:0!important;max-width:none!important}
  .preview-wrap{display:block!important;margin:0!important;padding:0!important}
  .invoice-paper{
    position:static!important;
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:none!important;
    min-height:276mm!important;
    height:auto!important;
    padding:14mm 14mm 10mm!important;
    margin:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  .paper-topline{left:0;right:0}
  .invoice-footer{
    position:static!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    margin-top:auto!important;
    padding-top:5mm!important;
    break-inside:avoid;
    page-break-inside:avoid;
  }
  .table-scroll{overflow:visible!important}
  .invoice-table{min-width:0!important}
  .invoice-table tr{break-inside:avoid;page-break-inside:avoid}
  .totals-area{break-inside:avoid;page-break-inside:avoid}
}