:root{
  --p:#1e40af;--p-lt:#eff6ff;--p-dk:#1e3a8a;
  --g1:#16a34a;--g1-lt:#f0fdf4;--g1-b:#86efac;
  --g2:#2563eb;--g2-lt:#eff6ff;--g2-b:#93c5fd;
  --g3:#d97706;--g3-lt:#fffbeb;--g3-b:#fcd34d;
  --g4:#dc2626;--g4-lt:#fff1f2;--g4-b:#fca5a5;
  --s50:#f8fafc;--s100:#f1f5f9;--s200:#e2e8f0;--s300:#cbd5e1;
  --s400:#94a3b8;--s500:#64748b;--s600:#475569;--s700:#334155;--s800:#1e293b;--s900:#0f172a;
  --white:#fff;--r:12px;--r-sm:8px;
  --sh:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --shm:0 4px 20px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04);
  --t:.2s ease;
}

html[data-theme="dark"] {
  --p:#3d8ef8; --p-lt:rgba(61,142,248,0.15); --p-dk:#2563eb;
  --g1:#00e87a; --g1-lt:rgba(0,232,122,0.15); --g1-b:#16a34a;
  --g2:#3d8ef8; --g2-lt:rgba(61,142,248,0.15); --g2-b:#2563eb;
  --g3:#f5a623; --g3-lt:rgba(245,166,35,0.15); --g3-b:#d97706;
  --g4:#ff4757; --g4-lt:rgba(255,71,87,0.15); --g4-b:#dc2626;
  --s50:#060c18; --s100:#0b1220; --s200:#1e2d4a; --s300:#253551;
  --s400:#4d6484; --s500:#8fa3c0; --s600:#a0b4d0; --s700:#dce6f5; --s800:#f1f5f9; --s900:#ffffff;
  --white:#0f1929;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{font-family:'Be Vietnam Pro',sans-serif;background:var(--s100);color:var(--s700);min-height:100vh;line-height:1.6}

/* ─── SETUP ──────────────────────────────── */
#setup{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 50%,#1e40af 100%)}
.setup-logo{font-family:'Playfair Display',serif;font-size:28px;color:#fff;text-align:center;margin-bottom:6px;letter-spacing:-0.5px}
.setup-sub{font-size:12px;color:rgba(255,255,255,.6);letter-spacing:2px;text-transform:uppercase;text-align:center;margin-bottom:40px}
.setup-card{background:var(--white);border-radius:20px;padding:36px;width:100%;max-width:880px;box-shadow:0 24px 80px rgba(0,0,0,.25)}
.setup-step{display:none}.setup-step.active{display:block}
.setup-h{font-size:18px;font-weight:700;color:var(--s900);margin-bottom:4px}
.setup-p{font-size:13px;color:var(--s400);margin-bottom:28px}
.group-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:24px}
.grp-card{border:2px solid var(--s200);border-radius:var(--r);padding:20px 16px;cursor:pointer;transition:all var(--t);position:relative;text-align:center}
.grp-card:hover,.grp-card.sel{border-color:var(--pc);background:var(--plt)}
.grp-card.sel{box-shadow:0 0 0 3px var(--pb)}
.grp-icon{font-size:32px;margin-bottom:8px}
.grp-name{font-size:14px;font-weight:700;color:var(--s800);margin-bottom:4px}
.grp-dt{font-size:11.5px;font-weight:600;border-radius:100px;padding:2px 10px;display:inline-block;margin-bottom:6px}
.grp-desc{font-size:11.5px;color:var(--s500);line-height:1.5}
.grp-books{margin-top:8px;font-size:10.5px;color:var(--s400);font-style:italic}
.grp-chk{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--pc);color:#fff;font-size:12px;display:none;align-items:center;justify-content:center}
.grp-card.sel .grp-chk{display:flex}
.addg4{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--g4-lt);border:1px solid var(--g4-b);border-radius:var(--r-sm);margin-bottom:20px;font-size:12.5px;color:var(--s700);cursor:pointer}
.addg4 input[type=checkbox]{width:16px;height:16px;accent-color:var(--g4);cursor:pointer}

/* Form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
@media(max-width:480px){.form-grid{grid-template-columns:1fr}}
.fg{display:flex;flex-direction:column;gap:5px}
.fg label{font-size:11.5px;font-weight:600;color:var(--s600)}
.fg input,.fg select{padding:9px 12px;border:1.5px solid var(--s200);border-radius:var(--r-sm);font-family:'Be Vietnam Pro',sans-serif;font-size:13.5px;color:var(--s800);background:var(--s50);outline:none;transition:border-color var(--t)}
.fg input:focus,.fg select:focus{border-color:var(--p);background:var(--white);box-shadow:0 0 0 3px var(--p-lt)}
.fg.full{grid-column:1/-1}
.btn-primary{padding:11px 28px;background:var(--p);color:#fff;border:none;border-radius:var(--r-sm);font-family:'Be Vietnam Pro',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:background var(--t),transform var(--t)}
.btn-primary:hover{background:var(--p-dk);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{padding:9px 18px;background:var(--s100);border:1.5px solid var(--s200);border-radius:var(--r-sm);font-family:'Be Vietnam Pro',sans-serif;font-size:13px;font-weight:600;color:var(--s600);cursor:pointer;transition:all var(--t)}
.btn-ghost:hover{background:var(--s200)}

/* ─── APP SHELL ──────────────────────────── */
#app{display:none;min-height:100vh;flex-direction:column}
.app-topbar{background:var(--white);border-bottom:1px solid var(--s200);padding:0 20px;height:52px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:100;box-shadow:var(--sh)}
.app-topbar .brand{font-family:'Playfair Display',serif;font-size:17px;color:var(--s900);font-weight:700;white-space:nowrap}
.app-topbar .biz-name{font-size:12.5px;font-weight:600;color:var(--s500);padding-left:12px;border-left:1px solid var(--s200)}
.topbar-spacer{flex:1}
.period-sel{padding:6px 10px;border:1.5px solid var(--s200);border-radius:6px;font-family:'Be Vietnam Pro',sans-serif;font-size:12.5px;font-weight:600;color:var(--s700);background:var(--white);cursor:pointer;outline:none}
.period-sel:focus{border-color:var(--p)}
.tb-btn{padding:6px 12px;border-radius:6px;font-family:'Be Vietnam Pro',sans-serif;font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid;display:flex;align-items:center;gap:5px;white-space:nowrap;transition:all var(--t)}
.tb-add{background:var(--p);color:#fff;border-color:var(--p)}
.tb-add:hover{background:var(--p-dk)}
.tb-export{background:var(--white);color:var(--g1);border-color:var(--g1)}
.tb-export:hover{background:var(--g1-lt)}
.tb-import{background:var(--white);color:var(--g3);border-color:var(--g3-b)}
.tb-import:hover{background:var(--g3-lt)}
.tb-print{background:var(--white);color:var(--s500);border-color:var(--s300)}
.tb-print:hover{background:var(--s100)}
#file-input{display:none}

/* ─── MAIN LAYOUT ────────────────────────── */
.app-body{display:flex;flex:1;min-height:calc(100vh - 52px)}
.sidebar{width:200px;min-width:200px;background:var(--white);border-right:1px solid var(--s200);padding:16px 0;overflow-y:auto;flex-shrink:0}
.sb-section{padding:0 12px;margin-bottom:4px}
.sb-label{font-size:9.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--s400);padding:6px 8px 4px}
.sb-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:var(--s600);transition:all var(--t)}
.sb-item:hover{background:var(--s50);color:var(--s800)}
.sb-item.active{background:var(--p-lt);color:var(--p);font-weight:600}
.sb-item .si-ico{font-size:15px;width:20px;text-align:center}
.sb-item .si-code{font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px;background:var(--s100);color:var(--s500);margin-left:auto}
.sb-item.active .si-code{background:rgba(30,64,175,.12);color:var(--p)}
.sb-divider{height:1px;background:var(--s200);margin:8px 12px}
.sb-info{padding:12px;margin:8px 12px;background:var(--s50);border-radius:8px;border:1px solid var(--s200)}
.sb-info-lbl{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--s400);margin-bottom:3px}
.sb-info-val{font-size:12px;font-weight:600;color:var(--s700)}
.sb-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:100px;margin-top:4px}

/* ─── CONTENT ────────────────────────────── */
.content{flex:1;overflow-y:auto;padding:20px;min-width:0}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.page-title{font-size:17px;font-weight:700;color:var(--s900)}
.page-title small{font-size:12px;font-weight:500;color:var(--s400);margin-left:8px}
.page-legal{font-size:11px;color:var(--s400)}

/* Dashboard */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px}
.stat-card{background:var(--white);border-radius:var(--r);padding:16px;box-shadow:var(--sh);border-left:4px solid transparent}
.stat-card.c-rev{border-left-color:var(--g2)}
.stat-card.c-vat{border-left-color:var(--g4)}
.stat-card.c-pit{border-left-color:var(--g3)}
.stat-card.c-bal{border-left-color:var(--g1)}
.stat-lbl{font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--s400);margin-bottom:5px}
.stat-val{font-size:20px;font-weight:800;color:var(--s900)}
.stat-sub{font-size:11px;color:var(--s400);margin-top:2px}
.thresh-bar{margin-top:20px;background:var(--white);border-radius:var(--r);padding:16px;box-shadow:var(--sh)}
.thresh-label{font-size:12px;font-weight:600;color:var(--s700);margin-bottom:8px;display:flex;justify-content:space-between}
.thresh-track{background:var(--s200);border-radius:100px;height:8px;position:relative;overflow:hidden}
.thresh-fill{height:100%;border-radius:100px;transition:width .8s cubic-bezier(.4,0,.2,1)}

/* Table */
.tbl-wrap{background:var(--white);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin-bottom:16px}
.tbl-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--s100)}
.tbl-title{font-size:13.5px;font-weight:700;color:var(--s800);display:flex;align-items:center;gap:8px}
.tbl-title .book-badge{font-size:10px;font-weight:800;padding:2px 8px;border-radius:5px;background:var(--p-lt);color:var(--p)}
.tbl-actions{display:flex;gap:8px}
table{width:100%;border-collapse:collapse}
thead th{padding:10px 12px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--s400);background:var(--s50);border-bottom:1px solid var(--s200);text-align:left;white-space:nowrap}
tbody td{padding:10px 12px;font-size:13px;color:var(--s700);border-bottom:1px solid var(--s100);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--s50)}
.td-num{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.td-rev{color:var(--g2);font-weight:700}
.td-vat{color:var(--g4);font-weight:600}
.td-pit{color:var(--g3);font-weight:600}
.td-actions{display:flex;gap:6px;justify-content:flex-end}
.btn-edit{padding:3px 8px;border:none;background:var(--p-lt);color:var(--p);border-radius:5px;font-size:11px;font-weight:600;cursor:pointer;transition:background var(--t)}
.btn-edit:hover{background:#dbeafe}
.btn-del{padding:3px 8px;border:none;background:var(--g4-lt);color:var(--g4);border-radius:5px;font-size:11px;font-weight:600;cursor:pointer;transition:background var(--t)}
.btn-del:hover{background:#fee2e2}
.tbl-empty{padding:40px;text-align:center;color:var(--s400);font-size:13px}
.tbl-foot{background:var(--s50);border-top:2px solid var(--s200)}
.tbl-foot td{font-weight:700;color:var(--s800);padding:11px 12px}
.tbl-foot .total-lbl{font-size:11.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--s500)}

/* Tax summary */
.tax-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:16px}
.ts-item{background:var(--white);border-radius:var(--r-sm);padding:14px;box-shadow:var(--sh);border-top:3px solid transparent}
.ts-item.ts-vat{border-top-color:var(--g4)}
.ts-item.ts-pit{border-top-color:var(--g3)}
.ts-item.ts-inc{border-top-color:var(--g2)}
.ts-item.ts-ok{border-top-color:var(--g1)}
.ts-lbl{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--s400);margin-bottom:4px}
.ts-val{font-size:18px;font-weight:800}
.ts-sub{font-size:10.5px;color:var(--s400);margin-top:2px;line-height:1.4}

/* ─── MODAL ──────────────────────────────── */
#overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:500;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px)}
#overlay.show{display:flex}
.modal{background:var(--white);border-radius:16px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 25px 60px rgba(0,0,0,.2);animation:mUp .2s ease}
@keyframes mUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.modal-hdr{padding:20px 24px 0;display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:15px;font-weight:700;color:var(--s900)}
.modal-close{background:none;border:none;font-size:20px;color:var(--s400);cursor:pointer;padding:4px;border-radius:6px;transition:color var(--t)}
.modal-close:hover{color:var(--s700);background:var(--s100)}
.modal-body{padding:20px 24px}
.modal-ftr{padding:0 24px 20px;display:flex;justify-content:flex-end;gap:10px}
.modal-fg{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.modal-fg label{font-size:11.5px;font-weight:600;color:var(--s600)}
.modal-fg input,.modal-fg select,.modal-fg textarea{padding:9px 12px;border:1.5px solid var(--s200);border-radius:var(--r-sm);font-family:'Be Vietnam Pro',sans-serif;font-size:13.5px;color:var(--s800);background:var(--s50);outline:none;transition:border-color var(--t);width:100%}
.modal-fg input:focus,.modal-fg select:focus,.modal-fg textarea:focus{border-color:var(--p);background:var(--white);box-shadow:0 0 0 3px var(--p-lt)}
.modal-fg textarea{resize:vertical;min-height:60px}
.modal-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tax-preview{background:var(--s50);border:1px solid var(--s200);border-radius:var(--r-sm);padding:12px;margin-top:4px;font-size:12.5px;line-height:1.8;color:var(--s700)}
.tax-preview strong{color:var(--s900)}
.tax-preview .tp-vat{color:var(--g4);font-weight:700}
.tax-preview .tp-pit{color:var(--g3);font-weight:700}
.type-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.type-chip{padding:4px 10px;border-radius:100px;font-size:11.5px;font-weight:600;cursor:pointer;border:1.5px solid var(--s200);color:var(--s600);background:var(--white);transition:all var(--t)}
.type-chip.sel{border-color:var(--p);color:var(--p);background:var(--p-lt)}

/* Toast */
#toast{position:fixed;bottom:24px;right:24px;padding:12px 20px;border-radius:10px;font-size:13px;font-weight:600;color:#fff;z-index:1000;transform:translateY(80px);opacity:0;transition:all .3s ease;pointer-events:none}
#toast.show{transform:translateY(0);opacity:1}
#toast.t-ok{background:#16a34a}
#toast.t-err{background:#dc2626}
#toast.t-info{background:#2563eb}

/* Print */
@media print{
  .app-topbar,.sidebar,#toast,#overlay{display:none!important}
  .content{padding:0}
  .tbl-actions,.btn-add,.td-actions{display:none!important}
  table{font-size:11px}
  .page-header .btn-primary{display:none}
}

/* Responsive */
@media(max-width:640px){
  .sidebar{width:160px;min-width:160px}
  .form-grid,.modal-2col{grid-template-columns:1fr}
}
@media(max-width:480px){
  .sidebar{display:none}
  .topbar-period,.topbar-extra{display:none}
}

/* ─── EXCEL EXPORT ───────────────────────── */
.tb-excel{background:#fff;color:#15803d;border-color:#86efac;font-weight:700}
.tb-excel:hover{background:#f0fdf4;border-color:#4ade80}
.xl-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:4px}
.xl-check{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;border:1.5px solid var(--s200);cursor:pointer;transition:all var(--t);font-size:12.5px;font-weight:500;color:var(--s700)}
.xl-check:hover{border-color:var(--g1);background:var(--g1-lt)}
.xl-check.checked{border-color:var(--g1);background:var(--g1-lt);color:#15803d}
.xl-check input[type=checkbox]{width:15px;height:15px;accent-color:var(--g1);cursor:pointer;flex-shrink:0}
.xl-check .xc-badge{font-size:10px;font-weight:800;padding:1px 6px;border-radius:4px;background:rgba(22,163,74,.12);color:var(--g1);margin-left:auto}
.xl-period-grid{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:4px}
.xl-period-tag{padding:5px 12px;border-radius:100px;border:1.5px solid var(--s200);font-size:12px;font-weight:600;cursor:pointer;transition:all var(--t);color:var(--s600);user-select:none}
.xl-period-tag:hover{border-color:var(--p);color:var(--p)}
.xl-period-tag.checked{border-color:var(--p);background:var(--p-lt);color:var(--p)}
.xl-preview{background:var(--s50);border:1px solid var(--s200);border-radius:8px;padding:11px 14px;font-size:12px;color:var(--s600);line-height:1.8;margin-top:12px}
.xl-preview strong{color:#15803d}
.xl-section-lbl{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--s500);margin-bottom:8px;margin-top:14px}
.btn-excel{padding:11px 26px;background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;border:none;border-radius:var(--r-sm);font-family:'Be Vietnam Pro',sans-serif;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(22,163,74,.28);transition:all var(--t);display:inline-flex;align-items:center;gap:7px}
.btn-excel:hover{background:linear-gradient(135deg,#15803d,#166534);transform:translateY(-1px)}
.btn-excel:active{transform:translateY(0)}
.xl-prog{height:5px;border-radius:100px;background:var(--s200);overflow:hidden;display:none;margin-top:10px}
.xl-prog-fill{height:100%;background:linear-gradient(90deg,#16a34a,#4ade80);width:0;border-radius:100px;transition:width .35s ease}

/* Theme toggle */
.theme-float {
  position: fixed; top: 20px; right: 24px; z-index: 9999;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 20px; cursor: pointer;
  border: 1.5px solid var(--s200, #253551); background: var(--s50, #141f33);
  color: var(--s500, #8fa3c0); font-size: 11px; font-weight: 700;
  transition: all 0.2s ease; user-select: none; font-family: var(--sans, sans-serif);
}
.theme-float:hover { border-color: var(--gold, #f5a623); color: var(--gold, #f5a623); background: rgba(245,166,35,0.06); }
.theme-track { width: 32px; height: 18px; border-radius: 9px; background: var(--s200, #253551); position: relative; transition: background 0.3s ease; }
html[data-theme="light"] .theme-track { background: var(--gold, #f5a623); }
.theme-thumb {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--s300, #8fa3c0); transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), background 0.3s;
}
html[data-theme="light"] .theme-thumb { transform: translateX(14px); background: #fff; }

/* Float Home Button */
.float-home-btn {
  position: fixed; top: 20px; left: 24px; z-index: 9999; 
  display: inline-flex; align-items: center; gap: 8px; 
  padding: 7px 13px; border-radius: 20px; cursor: pointer; 
  border: 1.5px solid var(--border2, #253551); background: var(--card2, #141f33); 
  color: var(--text2, #8fa3c0); font-size: 11px; font-weight: 700; 
  font-family: var(--sans, sans-serif); text-decoration: none; 
  transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.float-home-btn:hover {
  border-color: var(--gold, #f5a623); color: var(--gold, #f5a623); background: rgba(245,166,35,0.06);
}

/* Footer */
.site-footer {
  width: 100%; margin-top: 60px; padding: 30px 20px;
  border-top: 1px solid var(--s200); background: var(--s50);
  text-align: center; color: var(--s500); font-size: 12px; line-height: 1.6;
}
.site-footer .footer-content { max-width: 800px; margin: 0 auto; }
.site-footer strong { color: var(--s700); font-weight: 700; }
.site-footer p { margin-bottom: 8px; }
.site-footer .footer-copyright { margin-top: 16px; opacity: 0.7; }