/* Quiet, professional, number-first. Palette from the customer's theme: navy ink, blue for data and the one
   primary action, pale blue surfaces, magenta only when something is wrong. Line icons with labels, 8px grid,
   12px radii, 1px borders, no decoration. Numbers: tabular figures, clamp() sizing, min-width:0 everywhere. */
:root {
  --bg:#F4F6F9; --panel:#FFFFFF; --panel-2:#EDF1F6; --line:#DCE2EA; --ink:#172A45; --muted:#5A6880;
  --accent:#2F6FD0; --accent-ink:#FFFFFF; --navy:#1E3556; --navy-ink:#FFFFFF; --soft:#E3ECF8; --band:#C3D2E6; --track:#EEF0F4; --blue-surface:#2F6FD0; --up:#9BE3C1; --down:#FFB3D3;
  --ok:#2F6FD0; --warn:#B26AA3; --bad:#C6006A; --r:12px; --tap:48px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#0F1826; --panel:#172336; --panel-2:#1F2E45; --line:#2A3A55; --ink:#EEF3FA; --muted:#98A6BD;
    --accent:#5B93E6; --navy:#EEF3FA; --navy-ink:#0F1826; --soft:#1F3A5F; --band:#33486A; --track:#243449; --blue-surface:#2457A8; --up:#0F6B3F; --down:#B3004F; --ok:#5B93E6; --warn:#C989BA; --bad:#FF4D9A; }
}
* { box-sizing:border-box; min-width:0; }
html { background:var(--bg); }
body { margin:0; font:15px/1.4 -apple-system, "Segoe UI", Inter, Roboto, sans-serif; color:var(--ink); background:var(--bg);
       -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum","lnum"; }
svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.mono { font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing:.08em; }
.num { font-variant-numeric:tabular-nums; white-space:nowrap; }
header { position:sticky; top:0; z-index:5; background:var(--bg); padding:14px 16px 6px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
header #site-name { font-weight:700; font-size:15px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:.02em; text-transform:uppercase; }
.pill { font-size:10px; padding:3px 8px; border-radius:20px; background:var(--bad); color:#fff; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.view { padding:4px 16px 100px; max-width:560px; margin:0 auto; }
.hidden { display:none !important; }
h1 { font-size:24px; margin:4px 0 8px; letter-spacing:-.02em; font-weight:700; }
h2 { font-size:11px; margin:20px 0 6px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
h3 { margin:0 0 4px; font-size:15px; font-weight:700; }
p { margin:6px 0; }
.muted { color:var(--muted); font-size:13px; } .err { color:var(--bad); font-size:13px; min-height:1em; }
.tips { font-size:12px; }
.note { background:var(--soft); border-left:3px solid var(--accent); padding:8px 12px; border-radius:8px; font-size:13px; }
.titlebar { display:flex; justify-content:space-between; align-items:center; gap:10px; } .titlebar h1 { flex:1; }
select.inline { width:auto; margin:0; padding:8px 30px 8px 12px; font-size:14px; min-height:40px; }

/* controls */
input, select, button, label.big { width:100%; font-size:16px; border-radius:var(--r); font-family:inherit; color:var(--ink); min-height:var(--tap); }
input, select { padding:11px 12px; border:1px solid var(--line); background:var(--panel); margin:6px 0; }
input:focus, select:focus { outline:2px solid var(--accent); outline-offset:-1px; }
input:disabled { opacity:.7; }
input.big-input { font-size:24px; text-align:center; text-transform:uppercase; }
input.n, input.num { width:100%; text-align:right; margin:0; padding:10px; font-size:16px; }
button, label.big { padding:12px 14px; border:1px solid var(--line); background:var(--panel); font-weight:600; margin:6px 0; text-align:left; cursor:pointer; display:flex; align-items:center; gap:10px; }
button.primary, label.big.primary { background:var(--navy); color:var(--navy-ink); border-color:var(--navy); justify-content:center; }
button.accent { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); justify-content:center; }
button.danger { background:transparent; color:var(--bad); }
button.icon { width:var(--tap); padding:0; margin:0; }
label.big.center { justify-content:center; }
button.big { font-size:15px; padding:13px 14px; }
button.big > span { flex:1; overflow:hidden; }
button.big small { display:block; font-size:12px; font-weight:400; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
button.back { background:none; border:0; padding:6px 0; color:var(--muted); font-weight:600; width:auto; min-height:40px; gap:2px; font-size:14px; }
button.back svg { width:18px; height:18px; }
button.link { background:none; border:0; color:var(--muted); justify-content:center; font-weight:500; font-size:14px; }
button.small { width:auto; padding:8px 12px; font-size:13px; margin:4px 4px 4px 0; border-radius:8px; min-height:40px; }
button.small.on { background:var(--navy); color:var(--navy-ink); border-color:var(--navy); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .grid2 > * { margin:6px 0; }
.actions { margin-top:12px; }

/* hero: one big number, small supporting facts, optional mini bars */
.hero { background:var(--navy); color:var(--navy-ink); border-radius:var(--r); padding:16px; margin:6px 0 10px; }
.hero .label { font-size:12px; opacity:.8; display:flex; justify-content:space-between; gap:8px; text-transform:uppercase; letter-spacing:.06em; }
.hero .label b { font-weight:700; opacity:1; text-transform:none; letter-spacing:0; }
.hero .big { font-size:clamp(34px, 12vw, 54px); font-weight:700; letter-spacing:-.03em; line-height:1.05; margin:6px 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hero .big small { font-size:.4em; font-weight:600; opacity:.8; }
.hero .delta { font-size:13px; opacity:.95; } .hero .delta.up { color:var(--up); } .hero .delta.down { color:var(--down); }
.hero .facts { display:flex; margin-top:12px; border-top:1px solid color-mix(in srgb, currentColor 22%, transparent); padding-top:10px; }
.hero .facts > div { flex:1; } .hero .facts small { display:block; font-size:11px; opacity:.75; } .hero .facts b { display:block; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hero .mini { display:flex; gap:4px; align-items:flex-end; height:44px; margin-top:12px; }
.hero .mini span { flex:1; background:color-mix(in srgb, currentColor 32%, transparent); border-radius:3px 3px 0 0; } .hero .mini span.top { background:currentColor; }
.hero .mini-lbl { display:flex; gap:4px; margin-top:4px; } .hero .mini-lbl span { flex:1; text-align:center; font-size:10px; opacity:.7; }

/* bullet bars: actual vs target */
.bullet { display:grid; grid-template-columns:78px 1fr 44px; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); }
.bullet .lbl { font-size:13px; } .bullet .lbl small { display:block; color:var(--muted); font-size:11px; }
.bullet .track { position:relative; height:10px; background:var(--track); border-radius:5px; }
.bullet .fill { position:absolute; left:0; top:0; bottom:0; border-radius:5px; background:var(--accent); }
.bullet.bad .fill { background:var(--bad); } .bullet.warn .fill { background:var(--warn); }
.bullet .tgt { position:absolute; top:-4px; width:2px; height:18px; background:var(--ink); border-radius:1px; }
.bullet .val { text-align:right; font-weight:700; font-size:15px; } .bullet.bad .val { color:var(--bad); }

/* stat tiles */
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0; }
.tile { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; min-height:64px; }
.tile small { display:block; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile b { display:block; font-size:clamp(18px, 6vw, 24px); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile.bad b { color:var(--bad); } .tile[data-go] { cursor:pointer; }

/* task rows with a direct action */
.task { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); min-height:56px; }
.task svg { color:var(--muted); } .task .t { flex:1; overflow:hidden; } .task .t small { display:block; color:var(--muted); font-size:12px; }
.task .n { font-weight:700; font-size:18px; min-width:28px; text-align:right; }
.task button.small { margin:0; }

/* lists, rows, cards */
.list { list-style:none; padding:0; margin:0; }
.list li { padding:11px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:8px; align-items:baseline; min-height:var(--tap); }
.list li > span:first-child { flex:1; overflow:hidden; text-overflow:ellipsis; }
.list li[data-inv] { cursor:pointer; }
.list li span:last-child { color:var(--muted); font-size:12px; white-space:nowrap; }
.list li.hot span:last-child { color:var(--bad); font-weight:700; }
.list li small { display:block; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:12px; margin:8px 0; }
.card.code { text-align:center; border-color:var(--accent); }
.who-card b { display:block; } .who-card small { display:block; }
.the-code { font-size:clamp(26px, 9vw, 36px); font-weight:700; margin:6px 0; color:var(--accent); }
.row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); min-height:var(--tap); }
.row .name { flex:1; overflow:hidden; } .row .name small { display:block; color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; }
.row .ctl { display:flex; gap:6px; align-items:center; flex-shrink:0; max-width:60%; } .row .ctl input.n { width:84px; }
.row[data-go] { cursor:pointer; }
.mt { margin-top:12px; }
.var-pos { color:var(--ok); } .var-neg { color:var(--bad); font-weight:700; }
.photo { width:100%; border-radius:var(--r); border:1px solid var(--line); margin:6px 0; max-height:50vh; object-fit:contain; background:#000; }
.fields label { display:block; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; }
.fields input { margin:2px 0 4px; width:100%; text-align:left; }
.line { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:8px 10px; margin:6px 0; }
.line.hot { border-color:var(--warn); }
.line input.desc { margin:0 0 4px; padding:8px; font-size:14px; }
.ln-row { display:flex; gap:6px; align-items:center; margin:4px 0; } .ln-row > * { flex:1; }
.ln-row .unit { flex:0 0 auto; color:var(--muted); font-size:12px; } .ln-row input.ing { margin:0; padding:8px; font-size:14px; } .ln-row small { white-space:nowrap; flex:0 0 auto; }
.thumbs { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0; } .thumbs img { width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.toast { position:fixed; bottom:92px; left:50%; transform:translateX(-50%); background:var(--navy); color:var(--navy-ink); padding:10px 16px; border-radius:8px; font-size:13px; max-width:90%; z-index:20; text-align:center; }
.item { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:10px; margin:6px 0; }
.item-head b { font-size:15px; } .item-head small { display:block; margin-top:1px; }
.guide-line { font-size:12px; color:var(--muted); margin:4px 0; }
.item button.photo-btn { margin:0; flex:0 0 auto; min-width:80px; justify-content:center; }
.item input.comment { margin:6px 0 0; padding:8px; font-size:13px; }
.ai-line { font-size:12px; min-height:1em; margin-top:4px; } .ai-line.ok { color:var(--ok); } .ai-line.warn { color:var(--warn); font-weight:700; }
.tag { font-size:10px; padding:2px 6px; border-radius:4px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; vertical-align:middle; }
.tag.ok { background:var(--soft); color:var(--accent); } .tag.warn { background:var(--warn); color:#fff; } .tag.bad { background:var(--bad); color:#fff; }
.num.ok { color:var(--ok); } .num.warn { color:var(--warn); } .num.bad { color:var(--bad); font-weight:700; }
.exc p { margin:4px 0; font-size:14px; } .exc select { margin:4px 0; font-size:14px; padding:9px; } .exc input.note { font-size:13px; padding:9px; margin:4px 0; }
.exc .ln-row button { margin:0; }
.ask { display:flex; gap:8px; align-items:center; margin:4px 0 8px; } .ask input { margin:0; flex:1; }
.msg { padding:10px 12px; border-radius:var(--r); margin:6px 0; font-size:14px; max-width:94%; }
.msg.user { background:var(--soft); margin-left:auto; } .msg.assistant { background:var(--panel); border:1px solid var(--line); }
.msg details { margin-top:6px; font-size:12px; color:var(--muted); } .msg summary { cursor:pointer; }
.trace { margin:6px 0; } .trace code { display:block; white-space:pre-wrap; font-size:11px; background:var(--panel-2); padding:6px; border-radius:6px; margin:2px 0; overflow-wrap:anywhere; }
.ins { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:12px; margin:8px 0; display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:start; }
.ins .k { grid-column:1; } .ins .v { grid-column:2; font-weight:700; font-size:17px; white-space:nowrap; color:var(--accent); text-align:right; }
.ins .cat { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.ins p { margin:4px 0 0; font-size:13px; color:var(--muted); grid-column:1 / -1; }
.narr { font-size:14px; line-height:1.5; }
.edit label { display:block; font-size:11px; color:var(--muted); margin-top:4px; flex:1; } .edit input, .edit select { margin:2px 0 4px; width:100%; } .edit input.num { text-align:left; }
.item-row { cursor:pointer; }
details.group { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:0 12px; margin:6px 0; }
details.group summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 0; cursor:pointer; font-weight:600; min-height:var(--tap); }
details.group summary::-webkit-details-marker { display:none; } details.group summary .num { color:var(--muted); font-weight:600; }
details.group[open] summary { border-bottom:1px solid var(--line); }
.bars { display:flex; align-items:flex-end; gap:6px; height:100px; padding:6px 2px 0; }
.bars .day { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; justify-content:flex-end; }
.bars .col { display:flex; gap:2px; align-items:flex-end; height:76px; width:100%; justify-content:center; }
.bars .bar { width:9px; border-radius:3px 3px 0 0; background:var(--band); } .bars .bar.now { background:var(--accent); } .bars .day.top .bar.now { background:var(--navy); }
.bars .lbl { font-size:10px; color:var(--muted); } .bars .day.top .lbl { color:var(--ink); font-weight:700; }

/* bottom bar: labels under icons, centre = the role's main action, one tap */
.nav { position:fixed; left:0; right:0; bottom:0; z-index:15; background:var(--panel); border-top:1px solid var(--line); display:flex; justify-content:space-around; align-items:flex-end;
       padding:6px 8px calc(8px + env(safe-area-inset-bottom)); }
.nav button { width:auto; min-width:60px; background:none; border:0; color:var(--muted); font-size:11px; font-weight:600; margin:0; padding:4px 2px; display:flex; flex-direction:column; align-items:center; gap:3px; border-radius:8px; min-height:44px; }
.nav button.on { color:var(--accent); }
.nav .fab { color:var(--navy-ink); background:var(--navy); border-radius:var(--r); padding:8px 14px 6px; margin-top:-14px; min-width:76px; }
.nav .fab svg { width:24px; height:24px; }
.demo-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .demo-grid button.big { margin:0; padding:10px 12px; font-size:14px; } .demo-grid button.big small { font-size:11px; }
.brand { display:flex; align-items:center; gap:10px; margin:14px 0 18px; } .brand .mark { width:40px; height:40px; stroke:none; } .brand .word { font-size:26px; font-weight:800; letter-spacing:-.03em; color:var(--navy); } .brand .word b { color:var(--accent); font-weight:800; }
.nav .fab { width:58px; height:58px; min-width:58px; padding:0; border-radius:50%; margin-top:-22px; justify-content:center; box-shadow:0 6px 16px rgba(30,53,86,.35); }
.nav .fab svg { width:26px; height:26px; }
.sheet { position:fixed; left:12px; right:12px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:25; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:8px; box-shadow:0 10px 30px rgba(21,34,56,.25); }
.sheet button.big { margin:4px 0; }
.scrim { position:fixed; inset:0; background:rgba(21,34,56,.35); z-index:24; }
/* home chart: blue card, white bars */
.hero.blue { background:var(--blue-surface); color:#fff; } .hero.blue .delta, .hero.blue .delta.up, .hero.blue .delta.down { color:#fff; }
.hero.blue .mini span { background:rgba(255,255,255,.55); } .hero.blue .mini span.top { background:#fff; }
.hero.blue .delta.up, .hero.blue .delta.down { color:#fff; }
.hero.blue .facts { border-top-color:rgba(255,255,255,.3); }
/* P&L: stacked bar of where the rand went, share bars per group and line */
.stack { display:flex; height:22px; border-radius:6px; overflow:hidden; background:var(--track); }
.stack span { display:block; height:100%; min-width:0; }
.s1 { background:var(--navy); } .s2 { background:var(--accent); } .s3 { background:#7FA8E8; } .s4 { background:#A3BDE4; }
.legend { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin-top:10px; font-size:12px; color:var(--muted); }
.legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px; } .legend b { color:var(--ink); }
.share { height:8px; background:var(--track); border-radius:4px; margin:4px 0 8px; overflow:hidden; }
.share i { display:block; height:100%; background:var(--accent); border-radius:4px; }
.share.tiny { height:4px; margin:4px 0 0; max-width:70%; } .share.bad i { background:var(--bad); }
/* trends */
.card:empty, .hidden-if-empty:empty { display:none; }
.months { display:flex; gap:6px; align-items:flex-end; }
.months .m { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; }
.months .col { display:flex; gap:2px; align-items:flex-end; height:90px; }
.months .bar { width:10px; border-radius:3px 3px 0 0; } .months .bar.rev { background:var(--accent); } .months .bar.prof { background:var(--navy); }
.months .m.partial .bar { opacity:.3; } .months small { font-size:10px; color:var(--muted); } .months b { font-size:11px; }
.months .m.on small { color:var(--ink); font-weight:700; }
.trend .label { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.trend .label b { color:var(--ink); text-transform:none; letter-spacing:0; }
.wk { display:flex; gap:5px; align-items:flex-end; height:44px; }
.wk span { flex:1; background:var(--band); border-radius:3px 3px 0 0; } .wk span.now { background:var(--accent); }

/* brand in the header, everywhere */
header .brand.small { margin:0; gap:8px; } header .brand.small .mark { width:28px; height:28px; } header .brand.small .word { font-size:18px; }
header #site-name { text-transform:none; letter-spacing:0; font-size:13px; }
.brand.hero-brand { justify-content:center; margin:26px 0 22px; } .brand.hero-brand .mark { width:56px; height:56px; } .brand.hero-brand .word { font-size:32px; }
/* auth */
.tabs { display:flex; background:var(--panel-2); border-radius:var(--r); padding:4px; margin:6px 0 10px; }
.tabs .tab { flex:1; margin:0; border:0; background:none; justify-content:center; min-height:40px; color:var(--muted); font-weight:700; }
.tabs .tab.on { background:var(--panel); color:var(--ink); box-shadow:0 1px 3px rgba(21,34,56,.12); }
.authform input { margin:5px 0; }
details.alt { margin:14px 0 4px; } details.alt summary { color:var(--muted); font-size:13px; cursor:pointer; padding:8px 0; }
details.alt .ln-row input { margin:0; } details.alt .ln-row button { flex:0 0 auto; width:auto; margin:0; padding:0 18px; }
/* staff home: action cards */
.actions-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:8px 0; }
.action { flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; padding:14px 8px; min-height:108px; margin:0; border-radius:var(--r); background:var(--panel); min-width:0; }
.action svg { width:32px; height:32px; color:var(--accent); flex-shrink:0; } .action b { font-size:13px; font-weight:600; line-height:1.2; overflow-wrap:anywhere; max-width:100%; }
.action .pill { text-transform:none; letter-spacing:0; font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; background:var(--panel-2); color:var(--ink); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.action.accent .pill { background:color-mix(in srgb, currentColor 16%, transparent); color:var(--navy-ink); } .action.hot .pill { background:rgba(198,0,106,.12); color:var(--bad); }
.action.accent { background:var(--navy); color:var(--navy-ink); border-color:var(--navy); } .action.accent svg { color:var(--navy-ink); }
.action.hot { border-color:var(--bad); } .action.hot .num { color:var(--bad); }
.center { text-align:center; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; } .chips button.small { margin:0; }
.exc .ln-row button.small { flex:1; justify-content:center; min-height:44px; }
#pnl-export { margin-top:8px; } #pnl-export button, #btn-bank-export { justify-content:center; }
.pend select { margin:8px 0 4px; } .pend .grid2 button { justify-content:center; }
.note-card p { font-size:14px; line-height:1.5; margin:6px 0 0; } .note-card .label { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; } .note-card .label b { color:var(--ink); text-transform:none; letter-spacing:0; }
.sup { padding:8px 0; border-bottom:1px solid var(--line); } .sup-head { display:flex; justify-content:space-between; gap:8px; font-size:14px; } .sup-head small.bad { color:var(--bad); font-weight:700; }
.dual { position:relative; height:10px; margin-top:6px; } .dual i { position:absolute; left:0; top:0; height:100%; border-radius:5px; display:block; } .dual .prev { background:var(--band); height:100%; } .dual .now { background:var(--accent); height:6px; top:2px; }
.dish { padding:8px 0; border-bottom:1px solid var(--line); } .dish-head { display:flex; justify-content:space-between; gap:8px; font-size:14px; }
.dish.dog .dish-head b { color:var(--muted); }
#menu-filter { margin:8px 0; }
.bl { border-bottom:1px solid var(--line); padding-bottom:6px; } .bl.hot .name b { color:var(--bad); } .bl details { margin:0 0 4px; } .bl select { margin:4px 0; font-size:14px; padding:9px; }
#targets-form .ctl input.n { width:80px; }
label.fl { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:14px; padding:4px 0; } label.fl input.n { width:140px; }

/* set-up checklist, till mapping, outbox (2026-09-19) */
.progress { height:8px; border-radius:4px; background:var(--panel-2); overflow:hidden; margin:6px 0 4px; } .progress i { display:block; height:100%; background:var(--accent); border-radius:4px; }
.card.setup .row:last-child { border-bottom:0; } .card.setup .row svg { width:18px; height:18px; color:var(--muted); }
.mapgrid { display:grid; grid-template-columns:1fr; gap:6px; margin:8px 0; } .mapgrid label { font-size:12px; color:var(--muted); } .mapgrid label.req { color:var(--ink); font-weight:700; }
.mapgrid select, .mapgrid input { width:100%; margin-top:2px; font-weight:400; }
.chip { display:inline-block; padding:4px 8px; border-radius:999px; background:var(--panel-2); font-size:12px; font-variant-numeric:tabular-nums; } .chip.bad { background:rgba(198,0,106,.12); color:var(--bad); }
.hero.warn { background:var(--panel); border:1px solid var(--bad); color:var(--ink); } .hero.warn .label span, .hero.warn .delta { color:var(--bad); }
.mail .mailbody { white-space:pre-wrap; font:13px/1.4 inherit; margin:6px 0; max-height:160px; overflow:auto; color:var(--muted); }
.legal { margin:18px 0 6px; font-size:12px; } .legal a { color:var(--muted); text-decoration:underline; }

/* group view + account (2026-09-21) */
.siterow { display:flex; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--muted); margin-top:6px; font-variant-numeric:tabular-nums; } .siterow .ok { color:var(--ok); } .siterow .bad { color:var(--bad); }
.card.site { cursor:pointer; } .card.site .progress { margin:6px 0 2px; }
button.link.danger { color:var(--bad); }

/* compact insights (2026-09-22) */
.ins2 { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:12px; margin:8px 0; }
.ins2 .cat { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.ins2 > b { display:block; font-size:16px; line-height:1.25; margin:2px 0 8px; }
.ins2 .nums { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; } .ins2 .nums span { flex:1 1 30%; min-width:0; background:var(--panel-2); border-radius:8px; padding:6px 8px; }
.ins2 .nums b { display:block; font-size:clamp(15px, 4.6vw, 20px); color:var(--accent); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ins2 .nums small { display:block; font-size:10px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ins2 p { margin:0 0 8px; font-size:13px; color:var(--muted); } .ins2 button.small { margin:0; }
.narr details summary { color:var(--accent); font-size:13px; cursor:pointer; margin-top:4px; } .narr p { margin:6px 0 0; font-size:14px; line-height:1.5; }

/* samples, unexpected deliveries (2026-09-22) */
.samples { display:grid; grid-template-columns:1fr 1fr; gap:6px; } .samples a { display:block; padding:9px 10px; background:var(--panel); border:1px solid var(--line); border-radius:8px; font-size:13px; text-decoration:none; color:var(--ink); }
label.btn { display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); font-size:13px; font-weight:700; cursor:pointer; min-height:36px; }
button.small.danger { color:var(--bad); }

/* where the money went (2026-09-22) */
.flow { margin:6px 0; } .flow .progress { height:10px; } .flow.out .progress i { background:var(--bad); } .flow.in .progress i { background:var(--ok); }
.card.money { cursor:pointer; } .card.money .siterow b { color:var(--ink); }
.rcp select { width:100%; margin:6px 0; } label.btn.primary { background:var(--navy); color:var(--navy-ink); border-color:var(--navy); } label.btn svg { width:16px; height:16px; margin-right:6px; }

/* plan the week (2026-09-22) */
.card.plan { cursor:pointer; } .card.plan .wk { display:flex; align-items:flex-end; gap:4px; height:44px; margin:6px 0 2px; } .card.plan .wk span { flex:1; background:var(--band); border-radius:3px 3px 0 0; } .card.plan .wk span.now { background:var(--accent); }

.note-list { margin:6px 0 0; padding-left:18px; font-size:14px; line-height:1.45; } .note-list li { margin:3px 0; }

/* every card heading: name left, figure right, never run together (2026-09-24) */
.card .label { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.card .label span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .card .label b { color:var(--ink); text-transform:none; letter-spacing:0; flex-shrink:0; }
.flow .label { display:flex; justify-content:space-between; gap:10px; font-size:13px; margin-bottom:2px; }
.demo-grid button.big { flex-direction:column; align-items:center; text-align:center; gap:4px; padding:12px 8px; } .demo-grid button.big > span { text-align:center; } .demo-grid button.big svg { width:26px; height:26px; }

/* links and small print must clear the background in both themes (2026-09-25) */
a { color:var(--accent); } .muted a { color:var(--accent); }

/* plain-English intros, tap cues, average lines, weekly information dots, access ticks (2026-09-29) */
.intro { color:var(--muted); font-size:13px; line-height:1.45; margin:0 0 10px; }
.tile[data-go], .card[data-go], .task[data-go], .row[data-go], .status[data-go] { cursor:pointer; }
.tile[data-go] { position:relative; padding-right:26px; } .tile[data-go]::after { content:"›"; position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:22px; color:var(--muted); line-height:1; }
.card[data-go] { position:relative; } .card[data-go] > .label { padding-right:18px; } .card[data-go]::after { content:"›"; position:absolute; right:12px; top:10px; font-size:22px; color:var(--muted); line-height:1; }
.tap-hint { font-size:11px; color:var(--muted); margin:-2px 0 8px; text-align:right; }
.wk, .hero .mini { position:relative; } .avg { position:absolute; left:0; right:0; height:0; border-top:2px dashed var(--bad); pointer-events:none; }
.hero .mini .avg { border-top-color:color-mix(in srgb, currentColor 85%, transparent); } .hero.blue .mini .avg { border-top-color:#fff; }
.avg small { position:absolute; right:0; top:-14px; font-size:10px; font-weight:700; color:inherit; background:transparent; }
.card.trend .avg small { color:var(--bad); }
.inp { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); min-height:44px; }
.inp .dot, .key .dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; background:var(--track); border:1px solid var(--line); }
.dot.ok { background:#2E9E5B; border-color:#2E9E5B; } .dot.part { background:#E8A23A; border-color:#E8A23A; } .dot.missing { background:var(--bad); border-color:var(--bad); } .dot.na { background:var(--track); }
.inp .name { flex:1; overflow:hidden; } .inp .name small { display:block; color:var(--muted); font-size:12px; }
.key { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; color:var(--muted); margin:8px 0; } .key span { display:inline-flex; align-items:center; gap:6px; }
.card.inputs .dots { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 2px; } .card.inputs .dots .dot { width:12px; height:12px; }
.permgrid { display:grid; grid-template-columns:1fr; gap:2px; margin:6px 0; }
.permgrid label { display:flex; align-items:center; gap:10px; font-size:14px; min-height:40px; padding:2px 0; text-transform:none; letter-spacing:0; color:var(--ink); }
.permgrid input[type=checkbox] { width:22px; height:22px; min-height:0; margin:0; accent-color:var(--accent); flex-shrink:0; }
.permgrid label.locked { color:var(--muted); }
.exc .prog { background:var(--soft); border-left:3px solid var(--accent); padding:6px 10px; border-radius:8px; font-size:13px; margin:6px 0; }
.exc .todo { font-size:13px; margin:4px 0 6px; } .exc .todo b { color:var(--accent); }
a.howto-btn { text-decoration:none; color:var(--ink); } a.howto-link { color:var(--accent); font-weight:600; font-size:14px; }

/* weekly view, months, orders (2026-09-30) */
.wk-pnl .row { padding:8px 0; } .wk-pnl .row .name b { display:block; } .wk-pnl .row .name small { display:block; }
.wk-pnl .row.total { border-top:2px solid var(--ink); border-bottom:0; } .wk-pnl .row.total .num { font-size:20px; font-weight:800; }
.wk-pnl .sub { display:flex; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin:-2px 0 6px; }
.wk-pnl .bar { height:6px; background:var(--track); border-radius:3px; margin-top:4px; max-width:60%; } .wk-pnl .bar i { display:block; height:100%; border-radius:3px; background:var(--accent); } .wk-pnl .bar i.over { background:var(--bad); }
.wk-pnl .num.pct { font-size:12px; color:var(--muted); font-weight:400; display:block; }
.odd .row .num { color:var(--bad); font-weight:700; } .odd .row[data-go], .miss .row[data-go] { cursor:pointer; }
.miss .row .name b { display:block; font-size:14px; }
.months-chart { display:flex; gap:4px; align-items:flex-end; height:110px; margin:8px 0 2px; }
.months-chart .m { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:3px; min-width:0; }
.months-chart .m .b { width:100%; border-radius:3px 3px 0 0; background:var(--accent); position:relative; }
.months-chart .m.fc .b { background:repeating-linear-gradient(45deg, var(--band), var(--band) 3px, transparent 3px, transparent 6px); border:1px solid var(--band); }
.months-chart .m .b .band { position:absolute; left:35%; right:35%; border-left:2px solid var(--muted); }
.months-chart .m small { font-size:9px; color:var(--muted); white-space:nowrap; }
.months-chart .m .p { width:100%; height:0; border-top:2px solid var(--navy); }
.mrow { display:grid; grid-template-columns:52px 1fr 1fr 1fr; gap:6px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; }
.mrow.head { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); border-bottom:1px solid var(--line); }
.mrow .num { text-align:right; } .mrow.fc { color:var(--muted); } .mrow.fc .num { font-style:italic; } .mrow[data-period] { cursor:pointer; } .mrow b { font-weight:700; color:var(--ink); }
.mrow small { display:block; font-size:10px; color:var(--muted); font-style:normal; }
.order-card .lines { font-size:13px; color:var(--muted); margin:4px 0; } .order-card.late { border-color:var(--bad); } .order-card .late-tag { color:var(--bad); font-weight:700; }
textarea { width:100%; font:inherit; font-size:15px; border:1px solid var(--line); border-radius:var(--r); padding:10px; background:var(--panel); color:var(--ink); margin:2px 0 4px; }
.min-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); } .min-row .name { flex:1; font-size:14px; } .min-row .name small { display:block; color:var(--muted); font-size:11px; } .min-row input { width:90px; margin:0; text-align:right; }

/* target tick on the weekly bars; findings (2026-09-30) */
.wk-pnl .bar { position:relative; overflow:visible; } .wk-pnl .bar .tgt { position:absolute; top:-4px; width:2px; height:14px; background:var(--ink); border-radius:1px; }
.wk-pnl .bar .tgt::after { content:"aim"; position:absolute; top:-13px; left:-9px; font-size:9px; color:var(--muted); }
.find { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:0 12px; margin:6px 0; }
.find summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 0; cursor:pointer; min-height:var(--tap); }
.find summary::-webkit-details-marker { display:none; } .find summary b { display:block; font-size:15px; line-height:1.25; } .find summary small { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.find summary .num { color:var(--bad); font-weight:700; } .find[open] summary { border-bottom:1px solid var(--line); }
.find p { font-size:13px; color:var(--muted); margin:8px 0; } .find ul { margin:4px 0 8px; padding-left:18px; font-size:13px; } .find ul li { margin:2px 0; } .find button.small { margin:0 0 10px; }

/* install banner (2026-10-06) */
.card.install { border-color:var(--accent); } .card.install > b { display:block; font-size:16px; margin-bottom:2px; } .card.install button.primary { margin:8px 0 2px; }
.steps-sm { padding-left:20px; margin:8px 0 4px; font-size:14px; line-height:1.45; } .steps-sm li { margin:4px 0; }

/* close the day, rota, send the order (2026-10-07) */
.dc .row .num.ok { color:var(--ok); } .dc .tile.todo { border-color:var(--warn); } .dc .tile.todo b { color:var(--warn); }
.rota-day { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; margin:6px 0; }
.rota-day .top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; } .rota-day .top b { font-size:15px; } .rota-day .top small { color:var(--muted); font-size:12px; }
.rota-day .hrs { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin:6px 0 4px; } .rota-day .hrs label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; } .rota-day .hrs input { margin:2px 0 0; text-align:right; }
.rota-day .imp { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); } .rota-day .imp b { color:var(--ink); } .rota-day.over .imp b.pct { color:var(--bad); } .rota-day.ok .imp b.pct { color:var(--ok); }
.order-card .send { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; } .order-card .send a, .order-card .send button { flex:1; justify-content:center; text-decoration:none; }
.order-card .contact { display:grid; grid-template-columns:1fr 1fr auto; gap:6px; margin-top:6px; } .order-card .contact input { margin:0; font-size:14px; padding:8px; } .order-card .contact button { margin:0; }

label.chk{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line)}label.chk input[type=checkbox],label.chk input[type=radio]{width:20px;height:20px;min-width:20px;flex:none;margin:3px 0 0;padding:0;accent-color:var(--accent)}label.chk span{display:flex;flex-direction:column}label.chk small{color:var(--muted)}

.tablewrap{overflow-x:auto;margin:8px 0}table.sf{border-collapse:collapse;width:100%;font-size:13px}table.sf th,table.sf td{padding:6px 4px;text-align:center;border-bottom:1px solid var(--line)}table.sf td.nm{text-align:left;white-space:nowrap}table.sf td.nm small{display:block;color:var(--muted)}table.sf td.sf-cell{cursor:pointer;min-width:30px;border-radius:6px}table.sf td.sf-cell.on{background:var(--accent);color:#fff}table.sf td.sf-cell.half{background:var(--accent);opacity:.55;color:#fff}table.sf input.n{width:58px;padding:4px;font-size:12px}table.sf tr.tips td{background:rgba(255,255,255,.03)}

input.proposed{border-color:var(--accent);box-shadow:0 0 0 2px rgba(47,111,208,.25)}

.pdot{width:10px;height:10px;border-radius:5px;flex:none;margin-right:8px;background:var(--warn)}.pdot.bad{background:var(--bad)}

table.rd input,table.rd select{padding:4px 6px;font-size:12px}table.rd td{text-align:left}

input[type=checkbox],input[type=radio]{width:20px !important;height:20px !important;min-height:0 !important;min-width:20px;padding:0 !important;margin:3px 8px 0 0;flex:none;accent-color:var(--accent);vertical-align:middle}
#busy-box{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}#busy-box .card{max-width:420px;width:100%}#busy-box .spin{width:28px;height:28px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 12px}@keyframes spin{to{transform:rotate(360deg)}}

#remote-bar{position:sticky;top:0;z-index:900;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 16px;background:var(--accent);color:#fff;font-size:14px}#remote-bar button{width:auto;min-height:0;padding:6px 10px;background:#fff;color:var(--accent);border:0}