:root{
  --brand:#d97706;--brand-ink:#78350f;--brand-soft:#fef3c7;
  --ink:#1c1917;--muted:#57534e;--subtle:#78716c;
  --bg:#f5f5f4;--card:#ffffff;--line:#e7e5e4;--line-strong:#d6d3d1;
  --green:#15803d;--red:#b91c1c;--red-soft:#fef2f2;
  --radius:10px;--radius-sm:8px;
  --shadow:0 1px 2px rgb(28 25 23 / .06);
  --ring:0 0 0 3px rgb(217 119 6 / .35);
  --dark:var(--ink)
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
p{text-wrap:pretty}
.hidden{display:none!important}
.muted{color:var(--muted)}
.error{color:var(--red);min-height:20px;margin:0;font-size:14px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:var(--bg);border:1px solid var(--line);padding:1px 6px;border-radius:6px}
:focus-visible{outline:none;box-shadow:var(--ring)}

/* Login */
.login-screen{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--ink)}
.login-card{width:min(400px,100%);background:var(--card);border-radius:16px;padding:32px;box-shadow:0 24px 60px rgb(0 0 0 / .35)}
.brand-mark{width:48px;height:48px;border-radius:12px;background:var(--brand);color:var(--card);display:grid;place-items:center;font-weight:800;margin-bottom:16px}
.login-card h1{margin:0;font-size:24px}
.login-card form{display:grid;gap:14px;margin-top:24px}
.login-card small{display:block;margin-top:16px;color:var(--subtle);font-size:13px}

/* Form controls */
label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
input,select{width:100%;min-height:40px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--card);color:var(--ink);font:inherit;font-size:15px;outline:none;transition:border-color .15s,box-shadow .15s}
input:hover,select:hover{border-color:var(--subtle)}
input:focus,select:focus{border-color:var(--brand);box-shadow:var(--ring)}
input[type=number]{font-variant-numeric:tabular-nums}
input[type=file]{padding:7px;margin-bottom:12px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--card);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--bg)}
.btn-light{background:var(--card)}
.btn-primary{background:var(--ink);color:var(--card);border-color:var(--ink)}
.btn-primary:hover{background:#292524}
.btn-danger{background:var(--card);color:var(--red);border-color:#fecaca}
.btn-danger:hover{background:var(--red-soft);border-color:var(--red)}
.btn:disabled,.btn:disabled:hover{opacity:.45;cursor:not-allowed;background:var(--card)}
.btn-primary:disabled:hover{background:var(--ink)}
.full{width:100%}

/* App shell */
.topbar{background:var(--ink);color:var(--card);padding:14px max(20px,calc((100% - 1400px)/2));display:flex;justify-content:space-between;align-items:center;gap:16px}
.brand{font-size:20px;font-weight:800;letter-spacing:-.01em}
.brand span{color:var(--brand)}
.subtitle{font-size:13px;color:#a8a29e}
.top-actions{display:flex;align-items:center;gap:12px}
.top-actions .btn{background:transparent;color:var(--card);border-color:#44403c}
.top-actions .btn:hover{background:#292524}
.user-pill{font-size:13px;color:#d6d3d1}
.nav{position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--line);padding:0 max(20px,calc((100% - 1400px)/2));display:flex;overflow-x:auto;scrollbar-width:none}
.nav-btn{border:0;background:transparent;padding:14px 16px;font:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.nav-btn:hover{color:var(--ink)}
.nav-btn.active{color:var(--ink);border-bottom-color:var(--brand)}
.container{max-width:1400px;margin:auto;padding:28px 20px 56px}
.tab-section{display:none}
.tab-section.active{display:block}

/* Page header & toolbar */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;margin-bottom:20px;flex-wrap:wrap}
.page-head h2{margin:0 0 4px;font-size:24px}
.page-head p{margin:0}
.actions{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.toolbar{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.btn-group{display:flex;gap:8px;flex-wrap:wrap}
.toolbar-divider{width:1px;align-self:stretch;background:var(--line);margin:4px 2px}
.date-field{min-width:170px}
.save-status{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);white-space:nowrap}
.save-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}
.save-status[data-state="saving"]::before{background:var(--brand)}
.save-status[data-state="error"]{color:var(--red)}
.save-status[data-state="error"]::before{background:var(--red)}
.lock-notice{display:flex;align-items:center;gap:8px;margin:0 0 16px;padding:10px 14px;border:1px solid #fde68a;background:var(--brand-soft);border-radius:var(--radius);font-size:14px;color:var(--brand-ink)}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.metric,.summary-box,.category-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.metric span,.summary-box span{display:block;font-size:13px;font-weight:500;color:var(--muted)}
.metric strong{display:block;font-size:26px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.category-card span{font-size:13px}
.category-card strong{display:block;font-size:20px;margin-top:2px;font-variant-numeric:tabular-nums}
.category-card small{color:var(--subtle);font-size:13px}
.report-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.summary-box strong{display:block;font-size:22px;margin-top:4px;font-variant-numeric:tabular-nums}

/* Panels */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:16px;box-shadow:var(--shadow)}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.panel h3{margin:0 0 12px;font-size:16px}
.panel-head h3{margin:0}
.table-panel{padding:0;overflow:hidden}
.table-panel .panel-head{padding:16px 18px;margin:0;border-bottom:1px solid var(--line)}
.search{max-width:280px}

/* Tables */
.table-wrap{overflow:auto;max-height:70vh}
table{width:100%;border-collapse:separate;border-spacing:0;min-width:960px}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:14px;vertical-align:middle}
th{background:#fafaf9;color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0;z-index:1}
tbody tr:hover td{background:#fafaf9}
tbody tr:last-child td{border-bottom:0}
td input,td select{min-width:84px;min-height:36px;padding:6px 10px;font-size:14px}
td small{display:block;font-size:12px}
.av,.rev{font-variant-numeric:tabular-nums;white-space:nowrap}
.rev{text-align:right}
th:last-child{text-align:left}
#salesBody input:disabled,#salesBody button:disabled{background:var(--bg);color:var(--subtle);border-color:var(--line);cursor:not-allowed}
.add-sale{display:flex;gap:6px;align-items:center}
.add-sale input{min-width:72px;width:72px}
.add-sale .btn{min-height:36px;padding:6px 12px}
.reports-actions{display:flex;gap:6px}
.reports-actions .btn{min-height:34px;padding:5px 10px;font-size:13px}

/* Reports & analytics */
.report-tools{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.report-tools label{min-width:170px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chart{height:280px;display:flex;align-items:flex-end;gap:8px;overflow-x:auto;padding:16px 4px 0}
.bar-wrap{height:100%;min-width:36px;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
.bar{width:100%;max-width:32px;background:var(--brand);border-radius:4px 4px 0 0;min-height:2px;transition:background .15s}
.bar-wrap:hover .bar{background:var(--brand-ink)}
.bar-label{font-size:11px;color:var(--subtle);font-variant-numeric:tabular-nums}
.list-row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.list-row:last-child{border-bottom:0}
.list-row b{font-variant-numeric:tabular-nums}
.notice{margin-top:12px;color:var(--green);min-height:20px;font-size:14px}
.settings-panel{max-width:560px;display:grid;gap:14px}
.danger-panel{max-width:560px;border-color:#fecaca}

/* Dialog & toast */
.dialog{border:1px solid var(--line);border-radius:14px;padding:24px;width:min(400px,92vw);color:var(--ink);box-shadow:0 24px 60px rgb(0 0 0 / .2)}
.dialog::backdrop{background:rgb(28 25 23 / .5)}
.dialog form{display:grid;gap:14px}
.dialog h3,.dialog p{margin:0}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
.toast{position:fixed;right:20px;bottom:20px;max-width:calc(100vw - 40px);background:var(--ink);color:var(--card);padding:12px 16px;border-radius:var(--radius);font-size:14px;box-shadow:0 10px 30px rgb(0 0 0 / .2);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .2s;z-index:20}
.toast.show{opacity:1;transform:none}

/* dd/mm/yyyy overlay for native date inputs */
.dmy{position:relative;display:block}
.dmy input{color:transparent}
.dmy input::-webkit-datetime-edit{opacity:0}
.dmy-text{position:absolute;left:13px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ink);font-size:15px;font-weight:400;font-variant-numeric:tabular-nums}
.dmy-text.empty{color:var(--subtle)}

@media(max-width:900px){
  .cards,.report-summary{grid-template-columns:repeat(2,1fr)}
  .category-grid,.two-col{grid-template-columns:1fr}
  .page-head{align-items:stretch;flex-direction:column}
  .toolbar-divider{display:none}
}
@media(max-width:600px){
  .container{padding:20px 12px 40px}
  .topbar{padding:12px 16px}
  .subtitle,.user-pill{display:none}
  .nav{padding:0 4px}
  .nav-btn{padding:12px}
  .metric{padding:14px}
  .metric strong{font-size:20px}
  .panel{padding:14px}
  .panel-head{align-items:stretch;flex-direction:column}
  .search{max-width:100%}
  .toolbar,.actions{align-items:stretch;flex-direction:column}
  .btn-group{display:grid;grid-template-columns:1fr 1fr}
  .btn-group .btn{width:100%}
  .date-field,.report-tools label{min-width:0;width:100%}
  .report-tools .btn{width:100%}
  .btn{min-height:44px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.history-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.history-tools select{width:auto;min-width:200px}
.pad{padding:16px 20px}
.price-change{display:block;font-size:12px;color:var(--subtle)}