*{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0f1729;--navy2:#1a2540;--navy3:#243354;--navy4:#0a1020;
  --gold:#c9a84c;--gold2:#e8c97a;--gold3:#f5e0a0;
  --white:#ffffff;--gray:#f4f5f7;--gray2:#e8eaed;--gray3:#9aa0ab;
  --text:#1a2540;--text2:#4a5568;
  --danger:#e53e3e;--success:#38a169;--warn:#d69e2e;
  --sidebar-w:390px;
}
html{font-size:15px}
body{font-family:'Outfit',sans-serif;background:#eef0f4;color:var(--text);min-height:100vh;display:flex;flex-direction:column}

/* ── HEADER ── */
header{background:var(--navy4);padding:0 1.25rem;height:50px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:200;box-shadow:0 2px 12px rgba(0,0,0,.4);flex-shrink:0}
.hd-left{display:flex;align-items:center;gap:.6rem}
header h1{color:var(--white);font-size:.95rem;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:.4rem;cursor:pointer;user-select:none}
header h1:hover{opacity:.8}
header h1 .logo-icon{color:var(--gold);font-size:1rem}
.hd-badge{background:rgba(201,168,76,.15);color:var(--gold2);font-size:.6rem;font-weight:700;padding:.18rem .5rem;border-radius:999px;border:1px solid rgba(201,168,76,.25);letter-spacing:.08em;text-transform:uppercase}
.hd-right{display:flex;align-items:center;gap:.5rem}
.btn-sm{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.65);border-radius:6px;padding:.28rem .65rem;font-size:.7rem;font-weight:600;font-family:'Outfit',sans-serif;cursor:pointer;transition:all .15s;letter-spacing:.03em;display:flex;align-items:center;gap:.3rem}
.btn-sm:hover{background:rgba(255,255,255,.14);color:white}
.btn-sm.gold{background:rgba(201,168,76,.15);border-color:rgba(201,168,76,.3);color:var(--gold2)}
.btn-sm.gold:hover{background:rgba(201,168,76,.25)}

/* ══ LIST VIEW ══ */
#view-list{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.list-hero{background:var(--navy2);padding:1.75rem 1.75rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.06)}
.list-hero-inner{max-width:1060px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.list-hero-txt h2{color:white;font-size:1.25rem;font-weight:700;margin-bottom:.25rem}
.list-hero-txt p{color:rgba(255,255,255,.35);font-size:.76rem;max-width:400px;line-height:1.55}
.btn-new-tmpl{background:linear-gradient(135deg,var(--gold),#b8922e);color:var(--navy4);border:none;border-radius:8px;padding:.6rem 1.25rem;font-size:.82rem;font-weight:800;font-family:'Outfit',sans-serif;cursor:pointer;transition:all .18s;letter-spacing:.03em;display:flex;align-items:center;gap:.45rem;box-shadow:0 4px 14px rgba(201,168,76,.28);white-space:nowrap;flex-shrink:0}
.btn-new-tmpl:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 6px 20px rgba(201,168,76,.38)}
.list-content{padding:1.5rem 1.75rem 4rem;flex:1}
.list-content-inner{max-width:1060px;margin:0 auto}
.list-section-hdr{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.list-section-hdr h3{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#6b7280}
.list-count-badge{background:var(--navy2);color:var(--gold2);font-size:.6rem;font-weight:700;padding:.15rem .5rem;border-radius:999px;border:1px solid rgba(201,168,76,.2)}
.tmpl-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.85rem}

/* Template Card */
.tlc{background:white;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.07),0 1px 3px rgba(0,0,0,.04);transition:all .22s;border:1.5px solid transparent}
.tlc:hover{box-shadow:0 6px 24px rgba(0,0,0,.11);transform:translateY(-2px);border-color:rgba(201,168,76,.2)}
.tlc-stripe{height:80px;display:flex;align-items:flex-end;justify-content:space-between;padding:.8rem 1rem;position:relative;overflow:hidden}
.tlc-stripe.s-modern{background:var(--navy);background-image:radial-gradient(ellipse at 80% 20%,rgba(201,168,76,.1) 0%,transparent 60%)}
.tlc-stripe.s-classic{background:linear-gradient(135deg,#f5f0e6,#e8e0cc);border-bottom:2px solid #1a2540}
.tlc-stripe.s-minimal{background:white;border-bottom:1px solid #e0e0e0}
.tlc-deco{position:absolute;right:-18px;top:-18px;width:65px;height:65px;border-radius:50%;opacity:.07}
.s-modern .tlc-deco{background:var(--gold)}
.s-classic .tlc-deco{background:#1a2540}
.s-minimal .tlc-deco{background:#000}
.tlc-style-badge{font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:.18rem .6rem;border-radius:999px}
.s-modern .tlc-style-badge{background:rgba(201,168,76,.18);color:var(--gold2);border:1px solid rgba(201,168,76,.3)}
.s-classic .tlc-style-badge{background:rgba(26,37,64,.1);color:#1a2540;border:1px solid rgba(26,37,64,.2)}
.s-minimal .tlc-style-badge{background:#111;color:white}
.tlc-mini-lines{display:flex;flex-direction:column;gap:3px;position:relative;z-index:1}
.tlc-mini-lines span{height:2px;border-radius:1px;display:block}
.s-modern .tlc-mini-lines span{background:rgba(255,255,255,.15)}
.s-modern .tlc-mini-lines span:first-child{width:55px}
.s-modern .tlc-mini-lines span:nth-child(2){width:38px;background:rgba(201,168,76,.4)}
.s-modern .tlc-mini-lines span:nth-child(3){width:48px}
.s-classic .tlc-mini-lines span{background:rgba(26,37,64,.2)}
.s-classic .tlc-mini-lines span:first-child{width:50px}
.s-classic .tlc-mini-lines span:nth-child(2){width:35px;background:rgba(200,180,100,.5)}
.s-classic .tlc-mini-lines span:nth-child(3){width:45px}
.s-minimal .tlc-mini-lines span{background:rgba(0,0,0,.1)}
.s-minimal .tlc-mini-lines span:first-child{width:45px;background:rgba(0,0,0,.3)}
.s-minimal .tlc-mini-lines span:nth-child(2){width:32px}
.s-minimal .tlc-mini-lines span:nth-child(3){width:52px}
.tlc-body{padding:.9rem 1rem .85rem}
.tlc-name{font-size:.95rem;font-weight:700;color:var(--navy);margin-bottom:.28rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlc-from{font-size:.72rem;color:#6b7280;margin-bottom:.18rem;display:flex;align-items:center;gap:.3rem;overflow:hidden}
.tlc-from-dot{width:4px;height:4px;background:var(--gold);border-radius:50%;flex-shrink:0}
.tlc-from span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlc-meta{display:flex;align-items:center;gap:.45rem;margin-bottom:.75rem;flex-wrap:wrap}
.tlc-currency{font-size:.6rem;background:#f3f4f6;color:#6b7280;padding:.1rem .45rem;border-radius:4px;font-family:'IBM Plex Mono',monospace;font-weight:500}
.tlc-tax{font-size:.6rem;background:#fffbeb;color:#92400e;padding:.1rem .45rem;border-radius:4px}
.tlc-date{font-size:.6rem;color:#9ca3af;margin-left:auto}
.tlc-actions{display:grid;grid-template-columns:1fr auto auto;gap:.35rem}
.btn-generate{background:linear-gradient(135deg,var(--gold),#b8922e);color:var(--navy4);border:none;border-radius:7px;padding:.48rem .7rem;font-size:.73rem;font-weight:800;font-family:'Outfit',sans-serif;cursor:pointer;transition:all .18s;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;gap:.3rem}
.btn-generate:hover{filter:brightness(1.1)}
.btn-edit-card{background:#f3f4f6;border:1px solid #e5e7eb;color:#374151;border-radius:7px;padding:.48rem .6rem;font-size:.7rem;font-weight:600;font-family:'Outfit',sans-serif;cursor:pointer;transition:all .15s;min-width:34px;text-align:center}
.btn-edit-card:hover{background:#e5e7eb}
.btn-del-card{background:#fef2f2;border:1px solid #fecaca;color:#ef4444;border-radius:7px;padding:.48rem .6rem;font-size:.72rem;cursor:pointer;transition:all .15s;font-family:'Outfit',sans-serif;min-width:34px;text-align:center}
.btn-del-card:hover{background:#fee2e2}
.list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center}
.empty-icon{font-size:3rem;margin-bottom:1rem;opacity:.25;line-height:1}
.empty-title{font-size:1.05rem;font-weight:700;color:#374151;margin-bottom:.4rem}
.empty-sub{font-size:.8rem;color:#9aa0ab;margin-bottom:1.5rem;max-width:300px;line-height:1.65}

/* ══ EDITOR VIEW ══ */
#view-editor{flex:1;display:none;flex-direction:column;overflow:hidden;height:calc(100vh - 50px)}
.editor-bar{background:var(--navy3);padding:.45rem 1.1rem;display:flex;align-items:center;gap:.65rem;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0}
.editor-bar-title{color:rgba(255,255,255,.5);font-size:.73rem;flex:1}
.editor-bar-title strong{color:white;font-weight:600}
.editor-main{display:flex;flex:1;overflow:hidden}
.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--navy);overflow-y:auto;display:flex;flex-direction:column}
.sidebar::-webkit-scrollbar{width:3px}.sidebar::-webkit-scrollbar-thumb{background:var(--navy3);border-radius:2px}
.s-section{padding:.9rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.055)}
.s-section:last-child{border-bottom:none}
.s-title{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:.75rem;display:flex;align-items:center;justify-content:space-between}
.s-title-left{display:flex;align-items:center;gap:.4rem}
.s-title-left::before{content:'';width:2px;height:11px;background:var(--gold);border-radius:2px;display:inline-block;flex-shrink:0}
.s-title-hint{font-size:.56rem;font-weight:500;color:rgba(255,255,255,.22);text-transform:none;letter-spacing:.02em}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.field{display:flex;flex-direction:column;gap:.22rem;margin-bottom:.45rem}
.field:last-child{margin-bottom:0}
label{font-size:.62rem;font-weight:600;color:rgba(255,255,255,.38);letter-spacing:.06em;text-transform:uppercase}

/* ── FIXED: Dark sidebar inputs/selects ── */
input,textarea{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);color:var(--white);font-family:'Outfit',sans-serif;font-size:.8rem;padding:.42rem .6rem;border-radius:6px;outline:none;transition:border-color .18s,background .18s;width:100%}
select{background:#1c2e4e;border:1px solid rgba(255,255,255,.18);color:var(--white);font-family:'Outfit',sans-serif;font-size:.8rem;padding:.42rem .6rem;border-radius:6px;outline:none;transition:border-color .18s;width:100%;-webkit-appearance:auto;appearance:auto}
select option{background:#1c2e4e;color:#ffffff}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.22)}
input:focus,textarea:focus,select:focus{border-color:var(--gold);background:rgba(255,255,255,.1)}
input[type="date"]{color-scheme:dark}
textarea{resize:none;min-height:54px;line-height:1.55}
.s-collapse{background:none;border:none;color:rgba(255,255,255,.3);cursor:pointer;font-size:.85rem;padding:0;line-height:1;transition:transform .2s,color .15s}
.s-collapse:hover{color:var(--gold)}
.s-collapse.open{transform:rotate(180deg)}
.s-body{overflow:hidden}
.status-wrap{display:flex;gap:.25rem}
.status-btn{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.35);border-radius:5px;padding:.38rem .2rem;font-size:.65rem;font-weight:700;font-family:'Outfit',sans-serif;cursor:pointer;transition:all .15s;text-transform:uppercase;letter-spacing:.05em}
.status-btn.active-unpaid{background:rgba(229,62,62,.15);border-color:rgba(229,62,62,.35);color:#fc8181}
.status-btn.active-paid{background:rgba(56,161,105,.15);border-color:rgba(56,161,105,.35);color:#68d391}
.status-btn.active-pending{background:rgba(214,158,46,.15);border-color:rgba(214,158,46,.35);color:#ecc94b}
.currency-row{display:grid;grid-template-columns:115px 1fr;gap:.45rem}
.tmpl-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.45rem}
.tmpl-card{background:rgba(255,255,255,.04);border:2px solid transparent;border-radius:7px;padding:.5rem;cursor:pointer;transition:all .18s;text-align:center}
.tmpl-card:hover{background:rgba(255,255,255,.08)}
.tmpl-card.active{border-color:var(--gold);background:rgba(201,168,76,.08)}
.tmpl-thumb{width:100%;aspect-ratio:3/4;border-radius:3px;margin-bottom:.3rem;overflow:hidden}
.tmpl-name-badge{font-size:.62rem;font-weight:700;color:rgba(255,255,255,.55);letter-spacing:.05em;text-transform:uppercase}
.tmpl-card.active .tmpl-name-badge{color:var(--gold)}
.tmpl-name-section{background:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.16);border-radius:7px;padding:.75rem .9rem;margin-bottom:0}
.tmpl-name-section label{color:var(--gold2) !important}
.tmpl-name-section input{background:rgba(255,255,255,.09);border-color:rgba(201,168,76,.22)}
.tmpl-name-section input:focus{border-color:var(--gold)}
.btn-actions{padding:.8rem 1.1rem;background:var(--navy4);border-top:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:.45rem;position:sticky;bottom:0;flex-shrink:0}
.btn-save-tmpl{background:linear-gradient(135deg,var(--gold),#b8922e);color:var(--navy4);border:none;border-radius:8px;padding:.65rem 1.1rem;font-size:.82rem;font-weight:800;font-family:'Outfit',sans-serif;cursor:pointer;width:100%;transition:all .18s;letter-spacing:.03em;display:flex;align-items:center;justify-content:center;gap:.45rem;box-shadow:0 4px 14px rgba(201,168,76,.22)}
.btn-save-tmpl:hover{filter:brightness(1.1);box-shadow:0 6px 18px rgba(201,168,76,.32);transform:translateY(-1px)}
.btn-cancel-edit{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.45);border-radius:7px;padding:.46rem;font-size:.73rem;font-weight:600;font-family:'Outfit',sans-serif;cursor:pointer;width:100%;transition:all .15s}
.btn-cancel-edit:hover{background:rgba(255,255,255,.1);color:white}

/* Preview */
.preview-panel{flex:1;overflow-y:auto;background:#cdd1da;display:flex;flex-direction:column;align-items:center;padding:1.25rem 1.25rem 3rem}
.preview-panel::-webkit-scrollbar{width:5px}.preview-panel::-webkit-scrollbar-thumb{background:#a0a8b8;border-radius:3px}
.preview-label{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#7a8499;margin-bottom:.65rem;display:flex;align-items:center;gap:.5rem;width:794px;max-width:100%}
.preview-label::before,.preview-label::after{content:'';flex:1;height:1px;background:rgba(0,0,0,.1)}
.preview-note{background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.22);border-radius:6px;padding:.45rem .85rem;font-size:.68rem;color:#7a5c1e;margin-bottom:.75rem;width:794px;max-width:100%;text-align:center;font-weight:500}
#invoice-pages{display:flex;flex-direction:column;gap:12px;align-items:center}
.invoice-page{width:794px;min-height:1123px;background:white;box-shadow:0 8px 36px rgba(0,0,0,.2);border-radius:3px;position:relative;overflow:hidden;display:flex;flex-direction:column}

/* ══════════════════════════════════════
   GENERATE MODAL — REDESIGNED
   Focus: Items only. Everything else from template.
══════════════════════════════════════ */
.modal-overlay{position:fixed;inset:0;background:rgba(8,13,28,.9);backdrop-filter:blur(6px);z-index:500;display:none;align-items:center;justify-content:center;padding:1rem}
.modal-overlay.show{display:flex}
.modal-box{background:#f8f9fb;border-radius:16px;width:100%;max-width:600px;max-height:94vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 28px 80px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08)}

/* Modal Header */
.modal-hd{background:var(--navy);padding:1.1rem 1.35rem;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:.75rem}
.modal-hd-left{flex:1;min-width:0}
.modal-hd-left h2{color:white;font-size:.92rem;font-weight:700;margin-bottom:.18rem}
.modal-hd-left p{color:rgba(255,255,255,.35);font-size:.68rem}
.modal-hd-left p strong{color:var(--gold2);font-weight:600}
.modal-close{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.5);border-radius:7px;width:30px;height:30px;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
.modal-close:hover{background:rgba(255,255,255,.16);color:white}

/* Template summary banner */
.tmpl-summary{background:var(--navy2);padding:.75rem 1.35rem;display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.06)}
.tmpl-sum-chip{display:flex;align-items:center;gap:.3rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:.22rem .6rem}
.tmpl-sum-chip .chip-label{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.35)}
.tmpl-sum-chip .chip-val{font-size:.72rem;font-weight:600;color:rgba(255,255,255,.75)}
.tmpl-sum-chip .chip-val.gold{color:var(--gold2)}

/* Invoice meta bar */
.modal-meta-bar{background:white;padding:.75rem 1.35rem;border-bottom:1px solid #e5e7eb;flex-shrink:0}
.meta-bar-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:.6rem}
.mb-field{display:flex;flex-direction:column;gap:.18rem}
.mb-field label{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#9ca3af}
.mb-field input,.mb-field select{background:white;border:1.5px solid #e5e7eb;color:var(--text);font-family:'Outfit',sans-serif;font-size:.78rem;padding:.38rem .55rem;border-radius:6px;outline:none;transition:border-color .18s;width:100%}
.mb-field input:focus,.mb-field select:focus{border-color:var(--gold)}
/* ── FIXED: Light modal dropdowns ── */
.mb-field select{background:#fff;color:#1a2540;-webkit-appearance:auto;appearance:auto}
.mb-field select option{background:#fff;color:#1a2540}

/* Modal status row */
.meta-status-row{display:flex;align-items:center;gap:.5rem;margin-top:.55rem}
.meta-status-label{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#9ca3af;flex-shrink:0}
.m-status-wrap{display:flex;gap:.3rem}
.m-status-btn{background:#f9fafb;border:1.5px solid #e5e7eb;color:#9ca3af;border-radius:6px;padding:.3rem .65rem;font-size:.65rem;font-weight:700;font-family:'Outfit',sans-serif;cursor:pointer;transition:all .15s;text-transform:uppercase;letter-spacing:.05em}
.m-status-btn.active-unpaid{background:#fef2f2;border-color:#fca5a5;color:#ef4444}
.m-status-btn.active-paid{background:#f0fdf4;border-color:#86efac;color:#16a34a}
.m-status-btn.active-pending{background:#fefce8;border-color:#fde047;color:#ca8a04}

/* Modal body scroll area */
.modal-body{flex:1;overflow-y:auto;padding:1rem 1.35rem;display:flex;flex-direction:column;gap:.75rem}
.modal-body::-webkit-scrollbar{width:4px}.modal-body::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:2px}

/* Items section */
.items-section-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:.55rem}
.items-section-hdr h3{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);display:flex;align-items:center;gap:.4rem}
.items-section-hdr h3::before{content:'';width:2px;height:10px;background:var(--gold);border-radius:2px;flex-shrink:0}
.items-count{font-size:.62rem;color:#9ca3af;background:#f3f4f6;padding:.12rem .5rem;border-radius:999px}
.m-items-hdr{display:grid;grid-template-columns:2.6fr .75fr 1.1fr 32px;gap:.35rem;margin-bottom:.35rem;padding:0 .08rem}
.m-items-hdr span{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#9ca3af}
.m-items-hdr span:nth-child(2),.m-items-hdr span:nth-child(3){text-align:right}
.m-item-row{display:grid;grid-template-columns:2.6fr .75fr 1.1fr 32px;gap:.35rem;align-items:center;margin-bottom:.32rem}
.m-item-row input{padding:.4rem .48rem;font-size:.78rem;background:white;border:1.5px solid #e5e7eb;color:var(--text);border-radius:6px;outline:none;font-family:'Outfit',sans-serif;width:100%;transition:border-color .18s}
.m-item-row input:focus{border-color:var(--gold)}
.m-item-row input:nth-child(2),.m-item-row input:nth-child(3){text-align:right}
.m-btn-del{background:#fef2f2;border:1.5px solid #fecaca;color:#ef4444;border-radius:6px;width:32px;height:36px;cursor:pointer;font-size:.75rem;display:flex;align-items:center;justify-content:center;transition:background .15s;flex-shrink:0}
.m-btn-del:hover{background:#fee2e2}
.m-btn-add{background:#fffbeb;border:1.5px dashed #fcd34d;color:#92400e;border-radius:7px;padding:.48rem;cursor:pointer;font-size:.75rem;font-family:'Outfit',sans-serif;font-weight:600;width:100%;transition:all .18s;margin-top:.3rem;display:flex;align-items:center;justify-content:center;gap:.35rem}
.m-btn-add:hover{background:#fef3c7;border-color:var(--gold)}

/* Override collapsible */
.override-section{background:white;border-radius:10px;border:1px solid #e5e7eb;overflow:hidden}
.override-toggle{width:100%;background:none;border:none;padding:.7rem 1rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-family:'Outfit',sans-serif;transition:background .15s}
.override-toggle:hover{background:#f9fafb}
.override-toggle-left{display:flex;align-items:center;gap:.5rem}
.override-toggle-left span:first-child{font-size:.72rem;font-weight:700;color:#374151}
.override-toggle-hint{font-size:.65rem;color:#9ca3af;font-weight:400}
.override-arrow{font-size:.7rem;color:#9ca3af;transition:transform .2s}
.override-arrow.open{transform:rotate(180deg)}
.override-body{padding:0 1rem;max-height:0;overflow:hidden;transition:max-height .25s ease,padding .25s ease}
.override-body.open{max-height:600px;padding:.25rem 1rem 1rem}
.o-field{display:flex;flex-direction:column;gap:.2rem;margin-bottom:.45rem}
.o-field:last-child{margin-bottom:0}
.o-field label{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#9ca3af}
.o-field input,.o-field textarea,.o-field select{background:white;border:1.5px solid #e5e7eb;color:var(--text);font-family:'Outfit',sans-serif;font-size:.8rem;padding:.4rem .6rem;border-radius:7px;outline:none;transition:border-color .18s;width:100%}
.o-field input:focus,.o-field textarea:focus,.o-field select:focus{border-color:var(--gold)}
.o-field textarea{resize:none;min-height:52px;line-height:1.55}
.o-field select{background:#fff;color:#1a2540;-webkit-appearance:auto;appearance:auto}
.o-field select option{background:#fff;color:#1a2540}
.o-row2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}

/* Total preview in modal */
.modal-total-bar{background:linear-gradient(135deg,var(--navy),var(--navy2));border-radius:9px;padding:.75rem 1rem;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-total-bar .mtb-label{font-size:.65rem;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.modal-total-bar .mtb-amount{font-size:1.1rem;font-weight:800;color:var(--gold2);font-family:'IBM Plex Mono',monospace}
.modal-total-bar .mtb-sub{font-size:.62rem;color:rgba(255,255,255,.28);margin-top:.08rem}

/* Modal footer */
.modal-ft{padding:.9rem 1.35rem;background:white;border-top:1px solid #e5e7eb;display:flex;gap:.5rem;justify-content:flex-end;flex-shrink:0;flex-wrap:wrap}
.btn-modal-cancel{background:#f3f4f6;border:1.5px solid #e5e7eb;color:#374151;border-radius:8px;padding:.55rem 1rem;font-size:.78rem;font-weight:600;font-family:'Outfit',sans-serif;cursor:pointer;transition:all .15s}
.btn-modal-cancel:hover{background:#e5e7eb}
.btn-modal-generate{background:linear-gradient(135deg,var(--gold),#b8922e);color:var(--navy4);border:none;border-radius:8px;padding:.55rem 1.25rem;font-size:.8rem;font-weight:800;font-family:'Outfit',sans-serif;cursor:pointer;transition:all .18s;display:flex;align-items:center;gap:.4rem;box-shadow:0 4px 12px rgba(201,168,76,.28)}
.btn-modal-generate:hover{filter:brightness(1.1)}
.btn-modal-generate:disabled{opacity:.5;cursor:not-allowed;filter:none}
.btn-modal-share{background:linear-gradient(135deg,#25D366,#128C7E);color:white;border:none;border-radius:8px;padding:.55rem 1.25rem;font-size:.8rem;font-weight:800;font-family:'Outfit',sans-serif;cursor:pointer;transition:all .18s;display:flex;align-items:center;gap:.4rem;box-shadow:0 4px 12px rgba(37,211,102,.28)}
.btn-modal-share:hover{filter:brightness(1.1)}
.btn-modal-share:disabled{opacity:.5;cursor:not-allowed;filter:none}

/* ── LOADING ── */
.loading-overlay{position:fixed;inset:0;background:rgba(10,16,32,.9);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:999;backdrop-filter:blur(5px)}
.loading-overlay.show{display:flex}
.spinner{width:40px;height:40px;border:3px solid rgba(201,168,76,.15);border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:.9rem}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{color:var(--gold2);font-size:.85rem;font-weight:500}
.loading-sub{color:rgba(255,255,255,.28);font-size:.7rem;margin-top:.25rem}

/* ── TOAST ── */
.toast{position:fixed;bottom:1.25rem;left:50%;transform:translateX(-50%) translateY(16px);background:var(--navy2);color:white;border:1px solid rgba(201,168,76,.28);border-radius:8px;padding:.55rem 1.1rem;font-size:.76rem;font-weight:500;opacity:0;transition:all .3s;z-index:1000;white-space:nowrap;box-shadow:0 4px 18px rgba(0,0,0,.4);pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast-icon{color:var(--gold2);margin-right:.35rem}

/* ══ INVOICE TEMPLATES — MODERN ══ */
.tmpl-modern .inv-header{background:var(--navy);padding:2rem 2.5rem 1.6rem;display:flex;justify-content:space-between;align-items:flex-start;position:relative;overflow:hidden}
.tmpl-modern .inv-header::after{content:'';position:absolute;right:-60px;top:-60px;width:200px;height:200px;background:rgba(201,168,76,.06);border-radius:50%}
.tmpl-modern .inv-header::before{content:'';position:absolute;right:80px;bottom:-40px;width:120px;height:120px;background:rgba(201,168,76,.04);border-radius:50%}
.tmpl-modern .inv-logo{color:white;font-size:1.45rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;position:relative;z-index:1}
.tmpl-modern .inv-logo small{display:block;font-size:.68rem;font-weight:400;color:rgba(255,255,255,.4);margin-top:.28rem;letter-spacing:.06em}
.tmpl-modern .inv-title-block{text-align:right;position:relative;z-index:1}
.tmpl-modern .word{font-size:2.7rem;font-weight:800;color:var(--gold);letter-spacing:.05em;text-transform:uppercase;line-height:1}
.tmpl-modern .inv-num{color:rgba(255,255,255,.45);font-size:.72rem;margin-top:.28rem;font-family:'IBM Plex Mono',monospace;letter-spacing:.04em}
.tmpl-modern .inv-body{padding:1.6rem 2.5rem;flex:1;display:flex;flex-direction:column}
.tmpl-modern .inv-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-bottom:1.6rem;background:#f7f8fa;border-radius:8px;padding:1rem 1.1rem;border:1px solid #eef0f4}
.tmpl-modern .meta-item label{display:block;font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#9aa0ab;margin-bottom:.22rem}
.tmpl-modern .meta-item p{font-size:.83rem;font-weight:600;color:#1a2540}
.tmpl-modern .inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-bottom:1.6rem}
.tmpl-modern .party-label{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin-bottom:.45rem;padding-bottom:.38rem;border-bottom:1px solid #eef0f4}
.tmpl-modern .party-name{font-size:.92rem;font-weight:700;color:#0f1729;margin-bottom:.18rem}
.tmpl-modern .party-addr{font-size:.76rem;color:#4a5568;line-height:1.65;white-space:pre-wrap}
.tmpl-modern .items-table{width:100%;border-collapse:collapse;margin-bottom:1.4rem}
.tmpl-modern .items-table thead tr{background:var(--navy)}
.tmpl-modern .items-table thead th{padding:.58rem .85rem;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.6)}
.tmpl-modern .items-table thead th:first-child{text-align:left}
.tmpl-modern .items-table thead th:not(:first-child){text-align:right}
.tmpl-modern .items-table tbody tr{border-bottom:1px solid #f0f2f5}
.tmpl-modern .items-table tbody tr:nth-child(even){background:#fafbfc}
.tmpl-modern .items-table tbody td{padding:.65rem .85rem;font-size:.81rem;color:#2d3748}
.tmpl-modern .items-table tbody td:not(:first-child){text-align:right;font-family:'IBM Plex Mono',monospace;font-size:.76rem}
.tmpl-modern .inv-summary{display:flex;justify-content:flex-end;margin-bottom:1.4rem}
.tmpl-modern .summary-box{width:260px}
.tmpl-modern .summary-row{display:flex;justify-content:space-between;padding:.36rem 0;font-size:.8rem;color:#4a5568;border-bottom:1px solid #f0f2f5}
.tmpl-modern .summary-row.total{border-bottom:none;border-top:2px solid var(--navy);padding-top:.6rem;margin-top:.2rem}
.tmpl-modern .summary-row.total span{font-weight:800;font-size:.92rem;color:var(--navy)}
.tmpl-modern .summary-row span:last-child{font-family:'IBM Plex Mono',monospace}
.tmpl-modern .inv-notes{border-top:1px solid #eef0f4;padding-top:1.1rem;margin-bottom:1.1rem}
.tmpl-modern .notes-label{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin-bottom:.38rem}
.tmpl-modern .inv-notes p{font-size:.76rem;color:#4a5568;line-height:1.65;white-space:pre-wrap}
.tmpl-modern .inv-footer{background:var(--navy);padding:.85rem 2.5rem;display:flex;justify-content:space-between;align-items:center;margin-top:auto}
.tmpl-modern .inv-footer p{font-size:.66rem;color:rgba(255,255,255,.38)}
.tmpl-modern .status-badge{background:var(--gold);color:var(--navy);font-size:.63rem;font-weight:800;padding:.2rem .65rem;border-radius:999px;text-transform:uppercase;letter-spacing:.07em}
.tmpl-modern .status-badge.paid{background:#38a169;color:white}
.tmpl-modern .status-badge.pending{background:var(--warn);color:white}

/* ══ INVOICE TEMPLATES — CLASSIC ══ */
.tmpl-classic{padding:2.8rem 3rem;display:flex;flex-direction:column}
.tmpl-classic .inv-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.8rem;padding-bottom:1.6rem;border-bottom:3px double #1a2540}
.tmpl-classic .inv-logo{font-family:'Crimson Pro',serif;font-size:1.85rem;font-weight:600;color:#1a2540;line-height:1}
.tmpl-classic .inv-logo small{display:block;font-size:.68rem;font-family:'Outfit',sans-serif;font-weight:400;color:#9aa0ab;margin-top:.28rem;letter-spacing:.05em}
.tmpl-classic .word{font-family:'Crimson Pro',serif;font-size:2.7rem;font-weight:600;color:#1a2540;text-transform:uppercase;letter-spacing:.08em;line-height:1;text-align:right}
.tmpl-classic .inv-num{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:#9aa0ab;margin-top:.32rem;text-align:right}
.tmpl-classic .inv-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;background:#f8f5ee;padding:1rem;border-radius:4px;margin-bottom:1.6rem}
.tmpl-classic .meta-item label{display:block;font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#9aa0ab;margin-bottom:.22rem}
.tmpl-classic .meta-item p{font-size:.83rem;font-weight:600;color:#1a2540;font-family:'Crimson Pro',serif}
.tmpl-classic .inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;margin-bottom:2rem}
.tmpl-classic .party-label{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#9aa0ab;margin-bottom:.42rem}
.tmpl-classic .party-name{font-family:'Crimson Pro',serif;font-size:1rem;font-weight:600;color:#1a2540;margin-bottom:.18rem}
.tmpl-classic .party-addr{font-size:.76rem;color:#4a5568;line-height:1.7;white-space:pre-wrap}
.tmpl-classic .items-table{width:100%;border-collapse:collapse;margin-bottom:1.6rem}
.tmpl-classic .items-table thead th{padding:.5rem 0;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#1a2540;border-bottom:2px solid #1a2540}
.tmpl-classic .items-table thead th:first-child{text-align:left}
.tmpl-classic .items-table thead th:not(:first-child){text-align:right}
.tmpl-classic .items-table tbody td{padding:.62rem 0;font-size:.8rem;color:#2d3748;border-bottom:1px solid #e8e3d9}
.tmpl-classic .items-table tbody td:not(:first-child){text-align:right;font-family:'IBM Plex Mono',monospace;font-size:.76rem}
.tmpl-classic .inv-summary{display:flex;justify-content:flex-end;margin-bottom:1.8rem}
.tmpl-classic .summary-box{width:245px}
.tmpl-classic .summary-row{display:flex;justify-content:space-between;padding:.36rem 0;font-size:.8rem;color:#4a5568;border-bottom:1px solid #e8e3d9}
.tmpl-classic .summary-row.total{border-bottom:none;border-top:2px solid #1a2540;padding-top:.6rem;margin-top:.2rem}
.tmpl-classic .summary-row.total span{font-weight:700;font-family:'Crimson Pro',serif;font-size:1rem;color:#1a2540}
.tmpl-classic .inv-notes{border-top:1px solid #e8e3d9;padding-top:1.1rem;margin-bottom:1.6rem}
.tmpl-classic .notes-label{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#9aa0ab;margin-bottom:.38rem}
.tmpl-classic .inv-notes p{font-size:.78rem;color:#4a5568;line-height:1.65;font-family:'Crimson Pro',serif;white-space:pre-wrap}
.tmpl-classic .inv-footer{border-top:3px double #1a2540;padding-top:1.3rem;display:flex;justify-content:space-between;align-items:center;margin-top:auto}
.tmpl-classic .inv-footer p{font-family:'Crimson Pro',serif;font-size:.82rem;color:#9aa0ab;font-style:italic}
.tmpl-classic .status-badge{border:1.5px solid #1a2540;color:#1a2540;font-size:.63rem;font-weight:700;padding:.2rem .75rem;text-transform:uppercase;letter-spacing:.1em;font-family:'Outfit',sans-serif}
.tmpl-classic .status-badge.paid{border-color:#38a169;color:#38a169}
.tmpl-classic .status-badge.pending{border-color:var(--warn);color:var(--warn)}

/* ══ INVOICE TEMPLATES — MINIMAL ══ */
.tmpl-minimal{padding:3rem 3.5rem;display:flex;flex-direction:column}
.tmpl-minimal .inv-header{margin-bottom:2.6rem;display:flex;justify-content:space-between;align-items:flex-start}
.tmpl-minimal .inv-logo{font-size:1.3rem;font-weight:800;color:#111;letter-spacing:-.03em}
.tmpl-minimal .inv-logo small{display:block;font-size:.66rem;font-weight:400;color:#aaa;margin-top:.18rem;letter-spacing:.04em}
.tmpl-minimal .word{font-size:3.4rem;font-weight:200;color:#111;letter-spacing:-.05em;line-height:1;text-align:right}
.tmpl-minimal .inv-num{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:#bbb;text-align:right;margin-top:.28rem}
.tmpl-minimal .inv-meta{display:flex;gap:2.2rem;margin-bottom:2.6rem;padding-bottom:1.6rem;border-bottom:1px solid #e5e5e5}
.tmpl-minimal .meta-item label{display:block;font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#bbb;margin-bottom:.22rem}
.tmpl-minimal .meta-item p{font-size:.83rem;color:#111;font-weight:600}
.tmpl-minimal .inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:2.8rem;margin-bottom:2.6rem}
.tmpl-minimal .party-label{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#bbb;margin-bottom:.42rem}
.tmpl-minimal .party-name{font-size:.9rem;font-weight:800;color:#111;margin-bottom:.18rem}
.tmpl-minimal .party-addr{font-size:.76rem;color:#555;line-height:1.7;white-space:pre-wrap}
.tmpl-minimal .items-table{width:100%;border-collapse:collapse;margin-bottom:1.8rem}
.tmpl-minimal .items-table thead th{padding:.48rem 0;font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#bbb;border-bottom:1px solid #e0e0e0}
.tmpl-minimal .items-table thead th:first-child{text-align:left}
.tmpl-minimal .items-table thead th:not(:first-child){text-align:right}
.tmpl-minimal .items-table tbody td{padding:.68rem 0;font-size:.81rem;color:#333;border-bottom:1px solid #f0f0f0}
.tmpl-minimal .items-table tbody td:not(:first-child){text-align:right;font-family:'IBM Plex Mono',monospace;font-size:.76rem}
.tmpl-minimal .inv-summary{display:flex;justify-content:flex-end;margin-bottom:2.2rem}
.tmpl-minimal .summary-box{width:225px}
.tmpl-minimal .summary-row{display:flex;justify-content:space-between;padding:.36rem 0;font-size:.8rem;color:#777;border-bottom:1px solid #f0f0f0}
.tmpl-minimal .summary-row.total{border-bottom:none;padding-top:.7rem;margin-top:.35rem}
.tmpl-minimal .summary-row.total span{font-weight:800;font-size:.92rem;color:#111}
.tmpl-minimal .inv-notes{padding-top:1.3rem;border-top:1px solid #e5e5e5;margin-bottom:1.8rem}
.tmpl-minimal .notes-label{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#bbb;margin-bottom:.38rem}
.tmpl-minimal .inv-notes p{font-size:.76rem;color:#555;line-height:1.65;white-space:pre-wrap}
.tmpl-minimal .inv-footer{display:flex;justify-content:space-between;align-items:center;padding-top:1.4rem;border-top:1px solid #e5e5e5;margin-top:auto}
.tmpl-minimal .inv-footer p{font-size:.7rem;color:#bbb}
.tmpl-minimal .status-badge{background:#111;color:white;font-size:.58rem;font-weight:800;padding:.2rem .7rem;border-radius:2px;text-transform:uppercase;letter-spacing:.1em}
.tmpl-minimal .status-badge.paid{background:#38a169}
.tmpl-minimal .status-badge.pending{background:var(--warn)}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  :root{--sidebar-w:100%}
  .editor-main{flex-direction:column}
  .sidebar{min-width:0;width:100%;height:auto}
  .preview-panel{display:none}
  .list-content{padding:1.1rem .9rem 4rem}
  .list-hero{padding:1.35rem 1rem 1.1rem}
  .tmpl-cards-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}

@media(max-width:640px){
  header{padding:0 .9rem}
  .hd-badge{display:none}
  .list-hero-inner{flex-direction:column;align-items:flex-start;gap:.75rem}
  .btn-new-tmpl{width:100%;justify-content:center}
  .s-section{padding:.8rem .9rem}
  .row2{grid-template-columns:1fr}
  .currency-row{grid-template-columns:95px 1fr}
  .btn-actions{padding:.7rem .9rem}
  /* Modal mobile */
  .modal-overlay{padding:0;align-items:flex-end}
  .modal-box{max-width:100%;max-height:96vh;border-radius:16px 16px 0 0}
  .meta-bar-grid{grid-template-columns:1fr 1fr}
  .m-items-hdr,.m-item-row{grid-template-columns:2fr .7fr 1fr 32px}
  .o-row2{grid-template-columns:1fr}
  .modal-ft{padding:.75rem 1rem}
  .tmpl-cards-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:400px){
  .tmpl-cards-grid{grid-template-columns:1fr}
  .meta-bar-grid{grid-template-columns:1fr}
  .m-items-hdr,.m-item-row{grid-template-columns:1.8fr .6fr .95fr 30px}
}