:root{
  --y:#ffcb05;--y-press:#e8b800;--on-y:#111111;
  --bg:#f6f6f3;--surface:#fff;--surface2:#f9f9f6;--text:#111111;--mut:#5c5b55;--line:#e6e5df;--line2:#d6d5ce;--field:#fff;
  --danger:#c62828;--ok:#111111;--shadow:0 1px 0 rgba(17,17,17,.04),0 1px 3px rgba(17,17,17,.05);--r:12px;
}
[data-theme=dark]{
  --bg:#0e0e0d;--surface:#171715;--surface2:#1e1e1b;--text:#f3f2ea;--mut:#9d9b90;--line:#2c2b27;--field:#11110f;
  --danger:#ff7a70;--ok:#ffcb05;--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{color-scheme:light}[data-theme=dark]{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 "AdTallyCustom",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.2}h1{font-size:24px;letter-spacing:-.02em}h2{font-size:17px}h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:600}
a{color:inherit}
.mut{color:var(--mut)}.sm{font-size:13px}.right{text-align:right}.hidden{display:none!important}

/* ---------- primitives ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.card+.card{margin-top:16px}
.pagehead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.pagehead p{margin:4px 0 0;color:var(--mut)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;border-radius:11px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-weight:700;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--surface2)}
.btn.primary{background:var(--y);border-color:var(--y);color:var(--on-y)}.btn.primary:hover{background:var(--y-press)}
.btn.danger{color:var(--danger)}.btn.sm{min-height:34px;padding:0 12px;font-size:13px}
.btn[disabled]{opacity:.55;cursor:wait}
.btn svg{width:17px;height:17px}
label.f{display:block;font-size:12px;font-weight:700;color:var(--mut);margin-bottom:6px}
input,select,textarea{width:100%;min-height:42px;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--field);outline:none}
textarea{resize:vertical;min-height:72px}
input:focus,select:focus,textarea:focus{border-color:var(--y);box-shadow:0 0 0 3px color-mix(in srgb,var(--y) 35%,transparent)}
input[readonly]{background:var(--surface2);color:var(--mut)}
.grid{display:grid;gap:14px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
[data-mode=mobile] .g2,[data-mode=mobile] .g3,[data-mode=mobile] .g4{grid-template-columns:1fr}
@media(max-width:800px){[data-mode=web] .g2,[data-mode=web] .g3,[data-mode=web] .g4{grid-template-columns:1fr}}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row.sp{justify-content:space-between}
.err{color:var(--danger);font-size:13px;min-height:18px;margin:8px 0 0}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;background:var(--surface2);border:1px solid var(--line)}
.pill.y{background:var(--y);border-color:var(--y);color:var(--on-y)}.pill.off{color:var(--mut)}
#toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:100;display:grid;gap:8px;width:max-content;max-width:92vw}
[data-mode=mobile] #toasts{bottom:92px}
.toast{background:var(--text);color:var(--bg);padding:11px 16px;border-radius:11px;font-weight:600;box-shadow:var(--shadow)}
.toast.bad{background:var(--danger);color:#fff}

/* ---------- invoices list ---------- */
.filters{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:12px;align-items:end}
[data-mode=mobile] .filters{grid-template-columns:1fr 1fr}[data-mode=mobile] .filters>:first-child,[data-mode=mobile] .filters>:nth-child(2){grid-column:1/-1}
.stats{display:flex;gap:28px;margin:18px 2px 10px;flex-wrap:wrap}.stats b{display:block;font-size:22px;letter-spacing:-.02em}
.list{margin-top:6px}
.lrow{display:grid;grid-template-columns:130px 130px 1fr 150px 190px;gap:12px;align-items:center;padding:13px 4px;border-top:1px solid var(--line)}
.lrow.head{border-top:0;font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;padding-top:4px}
.lrow .num{font-weight:800}.lrow .amt{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}.lrow .act{display:flex;gap:6px;justify-content:flex-end}
[data-mode=mobile] .lrow.head{display:none}
[data-mode=mobile] .lrow{grid-template-columns:1fr auto;gap:4px 10px;padding:14px 2px}
[data-mode=mobile] .lrow .date{grid-column:1;order:3;color:var(--mut);font-size:13px}
[data-mode=mobile] .lrow .num{grid-column:1;order:1}[data-mode=mobile] .lrow .client{grid-column:1;order:2}
[data-mode=mobile] .lrow .amt{grid-column:2;grid-row:1;order:0}
[data-mode=mobile] .lrow .act{grid-column:1/-1;order:4;justify-content:flex-start;margin-top:6px}
.empty{padding:36px 10px;text-align:center;color:var(--mut)}

/* ---------- invoice form ---------- */
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}.formgrid>.card,.formgrid>.card+.card{margin:0}
[data-mode=mobile] .formgrid{grid-template-columns:1fr}
@media(max-width:800px){[data-mode=web] .formgrid{grid-template-columns:1fr}}
.card h3{margin-bottom:14px}
.item{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--surface2);position:relative}
.item+.item{margin-top:12px}
.item .top2{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.item .unit{font-size:12px;color:var(--mut);margin-top:4px}
.item .ig{display:grid;gap:12px;grid-template-columns:1fr 1fr}.item .ig .wide{grid-column:1/-1}
.item .nums{display:grid;gap:12px;grid-template-columns:repeat(3,1fr);grid-column:1/-1}
[data-mode=mobile] .item .ig,[data-mode=mobile] .item .nums{grid-template-columns:1fr}
@media(max-width:800px){[data-mode=web] .item .ig,[data-mode=web] .item .nums{grid-template-columns:1fr}}
.totals{margin-left:auto;max-width:360px;margin-top:18px;display:grid;gap:8px}
.totals div{display:flex;justify-content:space-between;align-items:center}
.totals .grand{background:var(--y);color:var(--on-y);padding:12px 14px;border-radius:11px;font-weight:800;font-size:18px}
.totals input{width:76px;min-height:34px;text-align:right}
.sticky{position:sticky;bottom:0;margin:20px -24px -64px;padding:14px 24px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;z-index:10}
[data-mode=mobile] .sticky{position:fixed;left:50%;transform:translateX(-50%);width:100%;max-width:480px;bottom:63px;margin:0;padding:10px 14px}
[data-mode=mobile] .sticky .btn{flex:1}

/* ---------- admin ---------- */
.tabs{display:flex;gap:6px;margin-bottom:18px;overflow-x:auto}
.tabs button{border:1px solid var(--line);background:var(--surface);padding:8px 16px;border-radius:99px;cursor:pointer;font-weight:700;white-space:nowrap}
.tabs button.on{background:var(--y);border-color:var(--y);color:var(--on-y)}
.urow{display:grid;grid-template-columns:1.2fr 1.6fr 90px 110px auto;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
[data-mode=mobile] .urow{grid-template-columns:1fr auto}[data-mode=mobile] .urow>:nth-child(2){grid-column:1/-1;order:3}[data-mode=mobile] .urow>:last-child{grid-column:1/-1;order:5}
.urow .act{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.vrow{display:grid;grid-template-columns:2fr 130px 150px 40px;gap:8px;margin-top:8px}
[data-mode=mobile] .vrow{grid-template-columns:1fr 1fr;padding:10px;border:1px solid var(--line);border-radius:10px}[data-mode=mobile] .vrow>:first-child{grid-column:1/-1}
.notice{background:color-mix(in srgb,var(--y) 22%,var(--surface));border:1px solid var(--y);border-radius:12px;padding:14px;margin-bottom:16px}
.notice code{display:block;word-break:break-all;margin-top:6px;font-size:12px;user-select:all}
dialog{border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--text);padding:22px;width:min(440px,92vw);box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(0,0,0,.5)}
dialog form{display:grid;gap:14px}
.secret{font:600 15px ui-monospace,Menlo,monospace;background:var(--surface2);border:1px dashed var(--line);padding:12px;border-radius:10px;word-break:break-all;user-select:all}
[data-mode=mobile] .sticky .btn{padding:0 10px;min-width:0}[data-mode=mobile] .sticky a.btn{display:none}
[data-mode=mobile] .sticky .btn.primary{flex:2}

/* hamburger menu */
.menuwrap{position:relative}
.pop{position:absolute;right:0;top:46px;min-width:250px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;z-index:50;display:grid;gap:2px}
.who2{display:flex;flex-direction:column;padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px;word-break:break-all}
.mitem{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;cursor:pointer;font-weight:600;text-align:left;width:100%}
.mitem:hover,.mitem:focus-visible{background:var(--surface2)}.mitem.on{background:var(--y);color:var(--on-y)}.mitem.danger{color:var(--danger)}.mitem svg{width:18px;height:18px}
.formerr{margin-top:16px;padding:14px 16px;border-radius:12px;border:1px solid var(--danger);color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--surface));font-weight:600}
.auth .mark svg{width:24px;height:24px}

.arow{display:grid;grid-template-columns:150px 170px 140px 1fr;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
[data-mode=mobile] .arow{grid-template-columns:1fr 1fr}

/* booking + reports */
.lrow.bo{grid-template-columns:110px 150px 1fr 160px 90px 150px}
[data-mode=mobile] .lrow.bo{grid-template-columns:1fr auto}
.span2{grid-column:1/-1}
.sigprev{border:1px dashed var(--line);border-radius:12px;min-height:110px;display:grid;place-items:center;background:#fff;padding:10px}
.sigprev img{max-width:100%;max-height:140px}
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface);max-height:70vh}
table.rep{border-collapse:separate;border-spacing:0;font-size:13px;min-width:100%}
table.rep th,table.rep td{padding:7px 10px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);white-space:nowrap;text-align:left}
table.rep thead th{background:var(--y);color:var(--on-y);font-weight:700;position:sticky;top:0;z-index:2}
table.rep thead tr:nth-child(2) th{top:33px}table.rep thead tr:nth-child(3) th{top:66px}
table.rep th.mo{text-align:center;border-left:2px solid var(--on-y)}
table.rep th.dt{font-weight:600}
table.rep .stick{position:sticky;left:0;z-index:3;background:var(--surface);font-weight:600;min-width:170px}
table.rep thead .stick{background:var(--y);z-index:4}
table.rep td.num{text-align:right;font-variant-numeric:tabular-nums;min-width:120px}
table.rep .cur{background:color-mix(in srgb,var(--y) 28%,var(--surface))}table.rep thead th.cur{background:var(--on-y);color:var(--y)}
table.rep th.ytd,table.rep td.ytd{border-left:2px solid var(--on-y);font-weight:700}
table.rep tr.tot td{font-weight:800;background:var(--surface2);border-top:2px solid var(--on-y)}
table.rep tr.sel td{background:color-mix(in srgb,var(--y) 22%,var(--surface))}table.rep tbody tr{cursor:default}
table.mini{width:100%;border-collapse:collapse;font-size:14px}table.mini td{padding:7px 4px;border-top:1px solid var(--line)}table.mini td.num{text-align:right;font-variant-numeric:tabular-nums}table.mini tr.tot td{font-weight:800}
details.card summary{cursor:pointer;display:flex;gap:6px;align-items:baseline}details.card[open] summary{margin-bottom:12px}
.vrow.inv{grid-template-columns:1.3fr 1fr 1fr 90px 100px;align-items:center}.vrow.map{grid-template-columns:1.6fr 1fr;align-items:center}
[data-mode=mobile] .vrow.inv,[data-mode=mobile] .vrow.map{grid-template-columns:1fr}
.row.sp .btn{white-space:normal}
.lrow.bo{grid-template-columns:100px 140px minmax(0,1fr) 150px 80px auto}.lrow.bo .client{word-break:break-word}
@media(max-width:980px){
  [data-mode=web] .lrow.head{display:none}
  [data-mode=web] .lrow,[data-mode=web] .lrow.bo{grid-template-columns:1fr auto;gap:4px 10px;padding:14px 2px}
  [data-mode=web] .lrow .date{grid-column:1;order:3;color:var(--mut);font-size:13px}[data-mode=web] .lrow .num{grid-column:1;order:1}[data-mode=web] .lrow .client{grid-column:1;order:2}
  [data-mode=web] .lrow .amt{grid-column:2;grid-row:1;order:0}[data-mode=web] .lrow .act{grid-column:1/-1;order:4;justify-content:flex-start;margin-top:6px}
}
[data-mode=mobile] .lrow.bo>span:nth-child(5){grid-column:2;grid-row:2;justify-self:end;order:3}
@media(max-width:980px){[data-mode=web] .lrow.bo>span:nth-child(5){grid-column:2;grid-row:2;justify-self:end;order:3}}

.notice.info{background:color-mix(in srgb,var(--ok) 12%,var(--surface));border-color:var(--ok)}
.notice.warn{background:color-mix(in srgb,var(--y) 22%,var(--surface));border-color:var(--y)}

.card+.card,.card+.formgrid,.formgrid+.card,.formgrid+.formgrid{margin-top:16px}

:root{--grayrow:#e4e4e0;--grayrow-ink:#222}
[data-theme=dark]{--grayrow:#34342f;--grayrow-ink:#f0efe8}
table.rep thead tr:nth-child(3) th{background:var(--grayrow);color:var(--grayrow-ink)}
table.rep thead tr:nth-child(3) th.cur{background:var(--on-y);color:var(--y)}

/* insights */
.seg.wrap{flex-wrap:wrap;gap:2px}
.filters4{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
[data-mode=mobile] .filters4{grid-template-columns:1fr 1fr}
@media(max-width:900px){[data-mode=web] .filters4{grid-template-columns:1fr 1fr}}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow)}
.kpi b{font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.chip{font-size:12px;font-weight:700;padding:1px 7px;border-radius:99px}
.chip.up{color:var(--on-y);background:var(--y)}.chip.down{color:var(--text);background:transparent;box-shadow:inset 0 0 0 1px var(--line2)}
.chartbox{position:relative;width:100%}
ul.say{margin:0;padding-left:20px;display:grid;gap:8px}ul.say li{line-height:1.45}
table.heat td.num{min-width:66px;text-align:center;font-size:12px}

.vrow.inv2{grid-template-columns:1.6fr 110px 1fr;align-items:center}
[data-mode=mobile] .vrow.inv2{grid-template-columns:1fr}

/* brand mark (light/dark variants) */
.brandmark{display:inline-grid;width:34px;height:34px;place-items:center;flex:none}
.brandmark img{width:100%;height:100%;object-fit:contain;display:block}
.brandmark.big{width:56px;height:56px;margin-bottom:16px}
.brandmark .lm-dark{display:none}[data-theme=dark] .brandmark .lm-light{display:none}[data-theme=dark] .brandmark .lm-dark{display:block}

/* =====================================================================
   AdTally 2 — MTN brand (yellow #FFCB05, MTN Brighter Sans) with the Jovilex finish:
   8px grid, hairline structure, generous space, one accent, numbers that line up.
   ===================================================================== */
:root{--side:252px;--ink-2:#2a2a28;--focus:color-mix(in srgb,var(--y) 45%,transparent)}
[data-theme=dark]{--line2:#3a3934;--mut:#a9a79c;--shadow:0 1px 0 rgba(0,0,0,.4)}
body{font-feature-settings:"tnum" 1,"lnum" 1}
h1{font-size:28px;font-weight:800;letter-spacing:-.025em}h2{font-weight:700;letter-spacing:-.01em}
h3{font-size:11.5px;letter-spacing:.09em;font-weight:700}
.eyebrow{margin:0 0 4px!important;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
a{text-underline-offset:3px}
:focus-visible{outline:2px solid var(--on-y);outline-offset:2px;border-radius:6px}
[data-theme=dark] :focus-visible{outline-color:var(--y)}
.card{border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.btn{border-radius:10px;font-weight:700;min-height:40px}
.btn.primary{box-shadow:inset 0 -1px 0 rgba(0,0,0,.08)}
input,select,textarea{border-radius:9px;border-color:var(--line2)}
.pill{font-weight:700;background:var(--surface2)}
.cfn{display:block;font-size:11.5px;font-weight:700;color:var(--mut);letter-spacing:.02em;margin-top:2px}
.cfn.big{display:inline-block;font-size:12px;margin:0 6px 0 0;padding:2px 8px;border:1px solid var(--line2);border-radius:99px;color:var(--text);text-decoration:none}
.lrow{grid-template-columns:150px 130px 1fr 150px 190px}

/* ---- frame: sidebar + column ---- */
#shell{min-height:100vh}
.frame{display:flex;min-height:100vh}
.side{position:sticky;top:0;height:100vh;width:var(--side);flex:none;display:flex;flex-direction:column;gap:8px;padding:20px 14px;background:var(--surface);border-right:1px solid var(--line);overflow-y:auto}
.side.admin{background:#111111;color:#f4f3ee;border-right-color:#111}
.side.admin .hubtitle,.side.admin .who small{color:#9c9a90}.side.admin .navl{color:#d9d8d0}.side.admin .navl:hover{background:#1f1f1d}
.side.admin .navl.on{background:var(--y);color:var(--on-y)}.side.admin .brandmark .lm-light{display:none}.side.admin .brandmark .lm-dark{display:block}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.02em;text-decoration:none;padding:4px 8px 12px}
.admintag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin:0 8px 6px;padding:3px 10px;border-radius:99px;background:var(--y);color:var(--on-y);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.admintag svg{width:13px;height:13px}
.hubs{display:grid;gap:18px;margin-top:6px}
.hubtitle{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);padding:0 10px 6px}
.navl{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 10px;border-radius:9px;text-decoration:none;color:var(--ink-2);font-weight:600}
[data-theme=dark] .navl{color:#dcdbd3}
.navl svg{width:19px;height:19px;flex:none;opacity:.85}
.navl:hover{background:var(--surface2)}
.navl.on{background:var(--y);color:var(--on-y)}.navl.on svg{opacity:1}
.sidefoot{margin-top:auto;display:grid;gap:6px;border-top:1px solid var(--line);padding-top:12px}
.side.admin .sidefoot{border-top-color:#2a2a28}
.who{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;text-decoration:none;min-width:0}
.who:hover{background:var(--surface2)}.side.admin .who:hover{background:#1f1f1d}
.who b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who small{display:block;font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.avatar{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--y);color:var(--on-y);font-weight:800;font-size:13px}
.col{flex:1;min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px 32px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .logo.m,.top .admintag.m{display:none}.grow{flex:1}
.tools{display:flex;align-items:center;gap:8px}
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:2px}
.seg button{border:0;background:none;padding:6px 12px;border-radius:8px;cursor:pointer;color:var(--mut);font-weight:700;font-size:13px;min-height:32px;display:inline-flex;align-items:center;gap:6px}
.seg button svg{width:16px;height:16px}
.seg button.on{background:var(--y);color:var(--on-y)}
.seg.full{display:flex;width:100%}.seg.full button{flex:1;justify-content:center}
.iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);cursor:pointer;display:grid;place-items:center;color:inherit}
.iconbtn svg{width:18px;height:18px}
.avatarbtn{border-radius:50%;background:var(--y);color:var(--on-y);border-color:var(--y);font-weight:800;font-size:13px}
main{width:100%;max-width:1240px;margin:0 auto;padding:32px 32px 72px;flex:1}
.pagehead{margin-bottom:24px;align-items:flex-end}
.tabbar{display:none}

/* mobile mode */
[data-mode=mobile] body{background:var(--surface2)}
[data-mode=mobile] #shell{max-width:480px;margin:0 auto;background:var(--bg);box-shadow:0 0 0 1px var(--line);position:relative}
[data-mode=mobile] .side{display:none}
[data-mode=mobile] .top{padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top))}
[data-mode=mobile] .top .logo.m{display:flex;padding:0}[data-mode=mobile] .top .admintag.m{display:inline-flex;margin:0}
[data-mode=mobile] .seg button{padding:6px 8px}
[data-mode=mobile] main{padding:20px 14px 110px}
[data-mode=mobile] h1{font-size:24px}
[data-mode=mobile] .tabbar{display:flex;position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:var(--surface);border-top:1px solid var(--line);z-index:30;padding:6px 6px max(6px,env(safe-area-inset-bottom))}
[data-mode=mobile] .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;text-decoration:none;color:var(--mut);font-size:11px;font-weight:700;border-radius:10px}
[data-mode=mobile] .tabbar a svg{width:22px;height:22px}
[data-mode=mobile] .tabbar a.on{color:var(--text)}[data-mode=mobile] .tabbar a.on span{background:var(--y);color:var(--on-y);padding:0 8px;border-radius:99px}
@media(max-width:900px){[data-mode=web] .side{display:none}[data-mode=web] .top .logo.m{display:flex;padding:0}[data-mode=web] main{padding:24px 16px 96px}
  [data-mode=web] .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--line);z-index:30;padding:6px 6px max(6px,env(safe-area-inset-bottom))}
  [data-mode=web] .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;text-decoration:none;color:var(--mut);font-size:11px;font-weight:700}
  [data-mode=web] .tabbar a svg{width:22px;height:22px}[data-mode=web] .tabbar a.on span{background:var(--y);color:var(--on-y);padding:0 8px;border-radius:99px}
  [data-mode=web] .top{padding:10px 16px}[data-mode=web] .tools .seg{display:none}}

/* ---- sign-in ---- */
.authwrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:72px 16px 32px;position:relative;
  background:radial-gradient(1200px 500px at 50% -10%,color-mix(in srgb,var(--y) 18%,transparent),transparent 70%),var(--bg)}
.authwrap.admin{background:radial-gradient(1200px 500px at 50% -10%,rgba(255,203,5,.10),transparent 70%),#0f0f0e;color:#f4f3ee}
.authwrap.admin .authcard{background:#181816;border-color:#2a2a27;color:#f4f3ee}.authwrap.admin .mut,.authwrap.admin .authfoot{color:#a8a69b}
.authwrap.admin input{background:#111110;border-color:#34332f;color:#f4f3ee}.authwrap.admin .seg{background:#111110;border-color:#34332f}
.authwrap.admin .brandmark .lm-light{display:none}.authwrap.admin .brandmark .lm-dark{display:block}
.authtools{position:absolute;top:16px;right:16px;display:flex;gap:8px}
.authcard{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:32px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 40px rgba(17,17,17,.06)}
.authhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.authhead .brandmark.big{margin:0}.authhead .admintag{margin:0}
.authcard h1{font-size:28px;margin:16px 0 4px}.authcard .lead{margin:0 0 20px}
.authbody{display:grid;gap:16px}.authbody form{display:grid;gap:14px}
.authcard .links{display:flex;justify-content:space-between;gap:12px;margin-top:20px;font-size:14px}
.authcard .links a{color:var(--mut);font-weight:700;display:inline-flex;align-items:center;gap:6px;text-decoration:none}.authcard .links a:hover{color:var(--text)}
.authcard .links svg{width:15px;height:15px}
.authfoot{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mut);margin:0}.authfoot svg{width:15px;height:15px}
.step{margin:0;font-size:13px;color:var(--mut)}
input.code{font-size:22px;letter-spacing:.35em;text-align:center;font-weight:700}
form{display:grid;gap:14px}

/* ---- dashboard ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:24px}
.tiles:has(.lead){grid-template-columns:repeat(4,minmax(0,1fr))}.tile.lead{grid-row:span 2;justify-content:center}.tile.lead .tval{font-size:40px}
@media(max-width:1100px){.tiles:has(.lead){grid-template-columns:repeat(2,minmax(0,1fr))}.tile.lead{grid-row:auto;grid-column:1/-1}}
[data-mode=mobile] .tiles:has(.lead){grid-template-columns:1fr 1fr}[data-mode=mobile] .tile.lead{grid-column:1/-1;grid-row:auto}[data-mode=mobile] .tval{font-size:24px}
.tile{display:flex;flex-direction:column;gap:4px;padding:20px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);text-decoration:none;box-shadow:var(--shadow);min-height:132px;transition:border-color .15s}
.tile:hover{border-color:var(--line2)}
.tile.lead{background:#111111;color:#f6f5ef;border-color:#111}.tile.lead .tlabel,.tile.lead .tsub{color:#b4b2a8}.tile.lead .tval{color:var(--y)}
[data-theme=dark] .tile.lead{background:var(--y);color:var(--on-y)}[data-theme=dark] .tile.lead .tval{color:var(--on-y)}[data-theme=dark] .tile.lead .tlabel,[data-theme=dark] .tile.lead .tsub{color:#3a3a36}
.tlabel{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.tval{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.tsub{font-size:13px;color:var(--mut)}
.tile .chip{align-self:flex-start;margin-top:auto}
.cardhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}.cardhead h3,.cardhead h2{margin:0}
.cardhead a{font-weight:700;text-decoration:none;color:var(--mut)}.cardhead a:hover{color:var(--text)}
.rows{display:grid}
.rowlink{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:12px 4px;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.rows>.rowlink:first-child{border-top:0}
a.rowlink:hover{background:var(--surface2)}
.rowlink b{display:block;font-size:14.5px}.rowlink small{display:block;color:var(--mut);font-size:12.5px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rowlink .amt{font-weight:700;font-variant-numeric:tabular-nums}
.rowlink .go{display:inline-flex;gap:4px;align-items:center;font-weight:700;font-size:13px;color:var(--mut)}.rowlink .go svg{width:15px;height:15px}
.rows.scroll{max-height:55vh;overflow:auto}
.attn{margin-bottom:16px}.h3n{display:flex;align-items:center;gap:8px;font-size:15px;letter-spacing:0;text-transform:none;color:var(--text)}.h3n svg{width:18px;height:18px}
.yoy{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:12px}
.yoyk{display:grid;gap:2px;padding:12px;border:1px solid var(--line);border-radius:10px}.yoyk span{font-size:12px;color:var(--mut);font-weight:700}.yoyk b{font-size:20px;letter-spacing:-.02em}
.yoyk.cur{border-color:var(--y);background:color-mix(in srgb,var(--y) 10%,var(--surface))}
.chain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:c}
.chain li{position:relative;padding:28px 12px 0 0;display:grid;gap:4px;counter-increment:c}
.chain li::before{content:counter(c);position:absolute;top:0;left:0;width:22px;height:22px;border-radius:50%;border:2px solid var(--line2);background:var(--surface);display:grid;place-items:center;font-size:11px;font-weight:800;z-index:1}
.chain li::after{content:'';position:absolute;top:10px;left:22px;right:0;height:2px;background:var(--line)}.chain li:last-child::after{display:none}
.chain li.done::before{background:var(--y);border-color:var(--y);color:var(--on-y)}.chain li.skip::before{content:'–'}
.chain li span{font-size:12.5px;color:var(--mut)}
[data-mode=mobile] .chain{grid-template-columns:1fr;gap:12px}[data-mode=mobile] .chain li::after{display:none}
@media(max-width:900px){[data-mode=web] .chain{grid-template-columns:1fr;gap:12px}[data-mode=web] .chain li::after{display:none}}

/* ---- account ---- */
.tabs .tab{border:1px solid var(--line);background:var(--surface);padding:8px 16px;border-radius:99px;font-weight:700;white-space:nowrap;text-decoration:none}
.tabs .tab.on{background:var(--y);border-color:var(--y);color:var(--on-y)}
dl.kv{display:grid;grid-template-columns:120px 1fr;gap:10px 16px;margin:0 0 12px}dl.kv dt{color:var(--mut);font-size:13px;font-weight:700}dl.kv dd{margin:0}
.okline{display:flex;align-items:center;gap:8px;color:var(--ok);font-weight:700}.okline svg{width:18px;height:18px}
.qr{width:188px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:10px;margin:8px 0}.qr svg{display:block;width:100%;height:auto}
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.way{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:10px;opacity:.7}
.way svg{width:18px;height:18px;grid-row:span 2}.way small{color:var(--mut)}.way.on{opacity:1;border-color:var(--y)}.way.on small{color:var(--ok);font-weight:700}

/* ---- admin ---- */
dialog.wide{width:min(640px,94vw)}dialog.xl{width:min(980px,96vw)}
dialog{max-height:92vh;overflow:auto;padding:24px}
.dlghead{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.dlghead .iconbtn{font-size:22px;line-height:1}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.check{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:9px;cursor:pointer;font-weight:600;font-size:14px}
.check input{width:18px;height:18px;min-height:0;margin:1px 0 0;flex:none;accent-color:#111}
.check:has(input:checked){border-color:var(--y);background:color-mix(in srgb,var(--y) 12%,var(--surface))}
.check small{display:block;color:var(--mut);font-weight:500;font-size:11.5px}
.permgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.permg{border:1px solid var(--line);border-radius:12px;padding:12px;margin:0;display:grid;gap:8px}
.permg legend{font-weight:800;font-size:13px;padding:0 6px;display:flex;gap:10px;align-items:center}
.linkbtn{border:0;background:none;color:var(--mut);font-weight:700;font-size:12px;cursor:pointer;text-decoration:underline}
.rolegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.rolegrid .card{margin:0}
.role h2{font-size:18px}
.meter{height:6px;border-radius:99px;background:var(--surface2);border:1px solid var(--line);overflow:hidden;margin:12px 0 6px}.meter span{display:block;height:100%;background:var(--y)}
.ptable{display:grid;margin-top:8px}
.prow{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.9fr) minmax(0,1.3fr) 96px 330px;gap:12px;align-items:center;padding:12px 4px;border-top:1px solid var(--line)}
.prow.head{border-top:0;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.prow.off{opacity:.6}.pwho{display:flex;gap:10px;align-items:center;min-width:0}.pwho b{display:block}.pwho small{display:block;color:var(--mut);font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
.chips{display:flex;flex-wrap:wrap;gap:4px}.prow .act{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:1100px){.prow{grid-template-columns:1fr auto}.prow.head{display:none}.prow>:nth-child(2),.prow>:nth-child(3),.prow>:nth-child(4){grid-column:1}.prow .act{grid-column:1/-1;justify-content:flex-start}}
[data-mode=mobile] .prow{grid-template-columns:1fr}[data-mode=mobile] .prow.head{display:none}[data-mode=mobile] .prow .act{justify-content:flex-start}
details.more{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}details.more summary{cursor:pointer;font-weight:700;margin-bottom:12px}
.kpis .kpi{box-shadow:var(--shadow)}

.cardhead .row{flex-wrap:nowrap}.cardhead .row input[type=search]{width:min(340px,60vw)}.cardhead .row select{width:auto}
[data-mode=mobile] .cardhead .row{flex-wrap:wrap}[data-mode=mobile] .cardhead .row input[type=search]{width:100%}
[data-mode=mobile] .top{gap:8px}.top:has(.admintag.m) .logo.m>span:last-child{display:none}
[data-mode=mobile] .tools{gap:6px}
.authwrap.admin .iconbtn{background:#181816;border-color:#34332f;color:#f4f3ee}.authwrap.admin .seg button{color:#a8a69b}.authwrap.admin .seg button.on{color:var(--on-y)}
.authbody>div{display:grid;gap:12px}
.tile.lead .chip.up{color:var(--on-y);background:var(--y)}.tile.lead .chip.down{color:#f6f5ef;box-shadow:inset 0 0 0 1px #3a3a36}[data-theme=dark] .tile.lead .chip,[data-theme=dark] .tile.lead .chip.up,[data-theme=dark] .tile.lead .chip.down{background:#111111;color:var(--y);box-shadow:none}
.formgrid>*{min-width:0}table.mini td{word-break:break-word}.tabs{max-width:100%}
/* ---- payments, partners (AdTally 2.1) ---- */
.pill.k{background:#111111;border-color:#111111;color:var(--y)}
.pill.o{background:transparent;border-color:var(--text);color:var(--text)}
[data-theme=dark] .pill.k{border-color:#3a3a36}
.chain.chain6{grid-template-columns:repeat(6,1fr)}
.filters.filters5{grid-template-columns:1.3fr 1.2fr 1fr 1fr 1fr}
@media(max-width:1100px){[data-mode=web] .filters.filters5{grid-template-columns:1fr 1fr}[data-mode=web] .filters.filters5>:first-child{grid-column:1/-1}}
[data-mode=mobile] .filters.filters5{grid-template-columns:1fr 1fr}
.paycard{margin-bottom:16px}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 18px;margin-top:10px;font-size:14px}
.kv>*{min-width:0;overflow-wrap:anywhere}
.payacts{display:grid;gap:12px;margin-top:14px;justify-items:start}
.payacts p{margin:0}
.confirmbox{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--surface2)}
.confirmbox h4{margin:0 0 10px;font-size:14px}
.confirmbox label.row{align-items:flex-start}.confirmbox input[type=checkbox]{width:auto;min-height:0;margin-top:2px}
.linkbtn{background:none;border:0;padding:0;color:inherit;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
@media(max-width:600px){.kv{grid-template-columns:1fr;gap:2px}.kv>.mut{margin-top:8px}}
[data-mode=mobile] .chain.chain6{grid-template-columns:1fr}
@media(max-width:1100px){[data-mode=web] .chain.chain6{grid-template-columns:repeat(3,1fr);row-gap:18px}[data-mode=web] .chain.chain6 li:nth-child(3)::after{display:none}}
@media(max-width:900px){[data-mode=web] .chain.chain6{grid-template-columns:1fr}}
input:disabled,select:disabled,textarea:disabled{background:var(--surface2);color:var(--text);opacity:.8;cursor:not-allowed}
.notice.info{background:color-mix(in srgb,var(--y) 12%,var(--surface));border-color:var(--line2)}
/* no coloured border lines on boxes (Build rule): notices and selected cards use a neutral edge and a soft tint */
.notice,.notice.warn{border-color:var(--line2)}
.yoyk.cur{border-color:var(--line2)}
.way.on{border-color:var(--line2)}
.check:has(input:checked){border-color:var(--line2)}
.secretrow{flex-wrap:nowrap;align-items:stretch;gap:8px;margin:8px 0 6px}.secretrow .secret{flex:1;min-width:0;margin:0}
.fullrows small{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}.fullrows .rowlink>span:first-child{min-width:0}
