/* Brand faces, self-hosted: the cabinet is served from its own origin under a
   default-src 'self' policy, so no external font host is reachable. Same files
   the marketing site uses, so the two read as one product. */
@font-face { font-family:"Work Sans"; src:url("/assets/cabinet/fonts/WorkSans-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"REM"; src:url("/assets/cabinet/fonts/REM-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"REM"; src:url("/assets/cabinet/fonts/REM-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }

:root { color-scheme: light dark;
  /* advertrek.com palette: blue #1f3281, pink #ff3b77, light blue #e6eaf9, ink #0a1029 */
  --bg:#f3f5fc; --surface:#ffffff; --soft:#e6eaf9; --line:#dde3f5; --line-strong:#c3cbe8;
  --text:#0a1029; --muted:#4d5680; --faint:#8a93b5;
  --accent:#1f3281; --accent-soft:#e6eaf9; --accent-ink:#ffffff;
  --cta:#ff3b77; --cta-ink:#ffffff; --cta-soft:#ffe7ef;
  --green:#15803d; --green-soft:#e7f6ec; --yellow:#a16207; --yellow-soft:#fdf5df; --red:#d81e5b; --red-soft:#ffe7ef; --blue:#1f3281; --blue-soft:#e6eaf9;
  --shadow:0 1px 2px rgba(31,50,129,.06), 0 10px 28px -14px rgba(31,50,129,.30); --radius:14px;
  --font-body:"Work Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-title:"REM", "Work Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#0a1029; --surface:#121a3d; --soft:#182247; --line:#24305c; --line-strong:#35447a;
  --text:#eef0f8; --muted:#a7b0d4; --faint:#7580a8;
  --accent:#9db0ff; --accent-soft:#1d2a5c; --accent-ink:#0a1029;
  --cta:#ff3b77; --cta-ink:#ffffff; --cta-soft:#3d1430;
  --green:#4ade80; --green-soft:#12301d; --yellow:#fbbf24; --yellow-soft:#3a2e0d; --red:#ff7096; --red-soft:#3d1430; --blue:#9db0ff; --blue-soft:#1d2a5c;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.7); } }
:root[data-theme="dark"] {
  --bg:#0a1029; --surface:#121a3d; --soft:#182247; --line:#24305c; --line-strong:#35447a;
  --text:#eef0f8; --muted:#a7b0d4; --faint:#7580a8;
  --accent:#9db0ff; --accent-soft:#1d2a5c; --accent-ink:#0a1029;
  --cta:#ff3b77; --cta-ink:#ffffff; --cta-soft:#3d1430;
  --green:#4ade80; --green-soft:#12301d; --yellow:#fbbf24; --yellow-soft:#3a2e0d; --red:#ff7096; --red-soft:#3d1430; --blue:#9db0ff; --blue-soft:#1d2a5c;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.7); }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font:14px/1.55 var(--font-body); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
button, input, select, textarea { font:inherit; color:inherit; }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:6px; }
.num { font-variant-numeric:tabular-nums; }
.muted { color:var(--muted); } .small { font-size:12px; } .faint { color:var(--faint); }
.pos { color:var(--green); } .neg { color:var(--red); }
h1,h2,h3 { margin:0; text-wrap:balance; letter-spacing:-.01em; font-family:var(--font-title); font-weight:500; }
h1 { font-size:27px; } h2 { font-size:18px; } h3 { font-size:14.5px; }
p { margin:0; }
[hidden] { display:none !important; }

/* landing */
.landing { min-height:100vh; display:grid; grid-template-rows:auto 1fr auto; }
.landing header, .landing footer { display:flex; align-items:center; justify-content:space-between; padding:20px 32px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; }
.brand { font-family:var(--font-title); font-weight:500; }
.brand i { width:28px; height:28px; border-radius:9px; background:linear-gradient(135deg, var(--accent), var(--cta)); display:inline-block; }
.hero { display:grid; place-items:center; padding:40px 20px; }
.hero-inner { max-width:880px; width:100%; display:grid; gap:28px; }
.eyebrow { text-transform:uppercase; letter-spacing:.12em; font-size:11px; color:var(--muted); font-weight:650; }
.hero h1 { font-size:40px; line-height:1.1; }
.roles { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px; }
.role { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; display:grid; gap:10px; box-shadow:var(--shadow); text-align:left; cursor:pointer; transition:transform .12s, border-color .12s; }
.role:hover { transform:translateY(-2px); border-color:var(--line-strong); }
.role[disabled] { opacity:.55; cursor:not-allowed; }
.role .tag { justify-self:start; }
.facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:12px; }
.fact { background:var(--soft); border-radius:12px; padding:14px 16px; }
.fact b { display:block; font-size:20px; font-weight:700; }

/* auth card */
.auth { min-height:100vh; display:grid; place-items:center; padding:24px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px; width:100%; max-width:440px; display:grid; gap:14px; }
.card.wide { max-width:640px; }

/* app shell */
.shell { display:grid; grid-template-columns:232px minmax(0,1fr); min-height:100vh; }
.side { background:var(--surface); border-right:1px solid var(--line); padding:18px 14px; display:flex; flex-direction:column; gap:6px; position:sticky; top:0; height:100vh; }
.side .brand { padding:6px 10px 16px; }
.side nav a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; color:var(--text); font-weight:500; }
/* The icons are glyphs of different widths, so every label started at its own
   x. A fixed, centred box puts them back on one line. */
.side nav a > span:first-child { flex:none; width:18px; display:inline-flex; align-items:center; justify-content:center; font-size:15px; line-height:1; }
.side nav a:hover { background:var(--soft); text-decoration:none; }
.side nav a.on { background:var(--accent-soft); color:var(--accent); font-weight:650; }
.side .spacer { flex:1; }
.side .who { padding:10px 12px; border-top:1px solid var(--line); display:grid; gap:4px; }
.main { padding:24px 28px 60px; display:grid; gap:20px; align-content:start; }
.topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.topbar .sub { color:var(--muted); margin-top:4px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; display:grid; gap:14px; box-shadow:var(--shadow); }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.panel-head p { color:var(--muted); margin-top:2px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:16px; align-items:start; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:12px; }
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; display:grid; gap:2px; }
.kpi .k { font-size:12px; color:var(--muted); } .kpi .v { font-size:22px; font-weight:700; letter-spacing:-.01em; } .kpi .d { font-size:12px; color:var(--faint); }

.btn { border:1px solid var(--line-strong); background:var(--surface); border-radius:999px; padding:8px 16px; cursor:pointer; font-family:var(--font-title); font-weight:500; display:inline-flex; align-items:center; gap:6px; transition:filter .2s ease-out, background .2s ease-out; }
.btn:hover { background:var(--soft); } .btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.primary { background:var(--cta); border-color:var(--cta); color:var(--cta-ink); } .btn.primary:hover { filter:brightness(1.06); background:var(--cta); }
.btn.danger { color:var(--red); } .btn.sm { padding:5px 12px; font-size:12px; }
.btn.ghost { border-color:transparent; }
.tag { display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; background:var(--soft); color:var(--muted); white-space:nowrap; }
.tag.good { background:var(--green-soft); color:var(--green); } .tag.warn { background:var(--yellow-soft); color:var(--yellow); } .tag.bad { background:var(--red-soft); color:var(--red); } .tag.info { background:var(--blue-soft); color:var(--blue); } .tag.accent { background:var(--accent-soft); color:var(--accent); }

.tablewrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:10px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
th { font-size:12px; color:var(--muted); font-weight:600; white-space:nowrap; }
td.r, th.r { text-align:right; } td .sub { display:block; font-size:12px; color:var(--muted); }
tr:last-child td { border-bottom:0; }
.empty { padding:28px; text-align:center; color:var(--muted); border:1px dashed var(--line-strong); border-radius:12px; }

/* forms */
.form { display:grid; gap:14px; }
.field { display:grid; gap:6px; align-content:start; }
.field label { font-size:12px; font-weight:600; color:var(--muted); }
.field .hint { font-size:12px; color:var(--faint); }
input::placeholder, textarea::placeholder { color:var(--faint); opacity:1; }
.field input, .field select, .field textarea { border:1px solid var(--line-strong); background:var(--surface); border-radius:10px; padding:9px 11px; width:100%; }
.field textarea { min-height:84px; resize:vertical; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; }
/* Without align-items the taller column stretches its neighbour, which
   stretched the chip buttons themselves into tall ovals floating below
   their label. */
.row { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; align-items:start; }
.check { display:flex; align-items:flex-start; gap:9px; font-size:13px; line-height:1.45; }
.check input { margin:3px 0 0; flex:none; accent-color:var(--cta); }
.checks { padding:12px 14px; background:var(--soft); border-radius:12px; }
.chips { display:flex; flex-wrap:wrap; align-items:flex-start; align-content:flex-start; gap:6px; }
.chip { border:1px solid var(--line-strong); border-radius:999px; padding:5px 12px; line-height:1.35; cursor:pointer; background:var(--surface); font-size:12.5px; }
.chip.on { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600; }
.error { color:var(--red); font-size:13px; } .ok { color:var(--green); font-size:13px; }
.steps { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start; }
.summary { position:sticky; top:20px; }
.summary dl { display:grid; grid-template-columns:1fr auto; gap:6px 12px; margin:0; } .summary dt { color:var(--muted); } .summary dd { margin:0; text-align:right; font-weight:600; }
.macros code { background:var(--soft); padding:2px 6px; border-radius:6px; cursor:pointer; font-size:12px; }
/* A bid suggestion is clickable like a macro, and says so the same way. */
.hint code[data-bid] { background:var(--soft); padding:2px 6px; border-radius:6px; cursor:pointer; font-size:12px; font-variant-numeric:tabular-nums; }
.hint code[data-bid]:hover { background:var(--accent-soft); color:var(--accent); }
.macros { display:flex; flex-wrap:wrap; gap:6px; }

/* countries */
.countries { display:grid; gap:8px; }
.country-list { max-height:220px; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:6px; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:2px; }
/* Checkbox, name, code — three columns, so a two-line country name cannot
   push its code out of line with the rest. */
.country-list label { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:6px; align-items:center; padding:4px 6px; border-radius:6px; font-size:12.5px; cursor:pointer; }
.country-list .country-name { min-width:0; overflow-wrap:anywhere; }
.country-list .faint { font-variant-numeric:tabular-nums; }
.country-list label:hover { background:var(--soft); }
.country-list label.on { background:var(--accent-soft); color:var(--accent); }

/* schedule */
.sched { display:grid; grid-template-columns:40px repeat(24, minmax(0,1fr)); gap:2px; user-select:none; max-width:560px; }
.fold > summary { cursor:pointer; font-size:12px; font-weight:600; color:var(--muted); padding:6px 0; list-style:none; }
.fold > summary::-webkit-details-marker { display:none; }
.fold > summary::before { content:"▸ "; color:var(--faint); }
.fold[open] > summary::before { content:"▾ "; }
.fold-body { display:grid; gap:10px; padding-top:4px; }
.sched .h { font-size:10px; color:var(--faint); text-align:center; }
.sched .d { font-size:11px; color:var(--muted); align-self:center; }
.sched .c { aspect-ratio:1; border-radius:3px; background:var(--soft); cursor:pointer; border:1px solid transparent; }
.sched .c.on { background:var(--accent); }
.sched .c:hover { border-color:var(--line-strong); }

.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--text); color:var(--bg); padding:10px 16px; border-radius:10px; box-shadow:var(--shadow); font-weight:550; z-index:20; max-width:90vw; }
.toast.bad { background:var(--red); color:#fff; }
.copy { cursor:pointer; }
.wallet { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; word-break:break-all; background:var(--soft); padding:10px 12px; border-radius:10px; }
.steplist { display:grid; gap:10px; counter-reset:s; }
.steplist div { display:grid; grid-template-columns:26px 1fr; gap:10px; align-items:start; }
.steplist div::before { counter-increment:s; content:counter(s); width:24px; height:24px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-size:12px; font-weight:700; }
.theme { border:0; background:transparent; cursor:pointer; color:var(--muted); }
@media (max-width: 860px) { .shell { grid-template-columns:1fr; } .side { position:static; height:auto; flex-direction:row; flex-wrap:wrap; } .side nav { display:flex; flex-wrap:wrap; gap:4px; } .steps { grid-template-columns:1fr; } .summary { position:static; } .hero h1 { font-size:30px; } }
@media (prefers-reduced-motion: reduce) { .role { transition:none; } }

/* registration */
.auth-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; width:100%; max-width:440px; align-items:stretch; }
.auth-wide .auth-grid { max-width:920px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.auth-side { background:linear-gradient(160deg, var(--accent), #2a409b); color:#ffffff; border-color:transparent; border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:grid; gap:14px; align-content:start; }
.auth-side h2 { font-size:25px; }
.auth-side .eyebrow, .auth-side .muted, .auth-side .small { color:rgba(255,255,255,.78); }
.auth-side .perks li { color:rgba(255,255,255,.82); }
.auth-side .perks li::before { color:var(--cta); }
.auth-side .perks b { color:#ffffff; }
.auth-side b { font-weight:500; font-family:var(--font-title); }
.auth-side a { color:#ffffff; text-decoration:underline; }
.perks { margin:0; padding:0; list-style:none; display:grid; gap:10px; } .perks li { padding-left:22px; position:relative; color:var(--muted); } .perks li::before { content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; }
.perks b { color:var(--text); }
.auth-card { max-width:none; }
.seg { display:grid; grid-template-columns:1fr 1fr; background:var(--soft); border-radius:12px; padding:4px; gap:4px; }
.seg-btn { border:0; background:transparent; border-radius:9px; padding:9px 12px; cursor:pointer; font-weight:600; color:var(--muted); }
.seg-btn.on { background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm, 0 1px 2px rgba(0,0,0,.08)); }
.row-tight { display:grid; grid-template-columns:170px minmax(0,1fr); gap:8px; }
.btn.big { padding:12px 16px; font-size:15px; justify-content:center; }
.payblock { display:grid; gap:10px; }
.payamount { display:grid; gap:2px; padding:14px 16px; border-radius:12px; background:var(--accent-soft); border:1px dashed var(--accent); cursor:pointer; }
.payamount b { font-size:26px; letter-spacing:-.01em; color:var(--accent); } .payamount .k { font-size:12px; color:var(--muted); }
@media (max-width: 860px) { .auth-wide .auth-grid { grid-template-columns:1fr; } .auth-side { order:2; } .row-tight { grid-template-columns:1fr; } }

/* A deposit waiting to be recognised: the advertiser has nothing to do, so the
   card has to say that rather than show them an empty field. */
.waiting{display:flex;gap:.6rem;align-items:flex-start;margin:.9rem 0 .2rem;padding:.75rem .9rem;border-radius:.6rem;background:var(--soft);color:var(--text);font-size:.92rem;line-height:1.45}
.waiting .dot{flex:0 0 auto;width:.62rem;height:.62rem;margin-top:.42rem;border-radius:50%;background:var(--accent);animation:waitpulse 1.8s ease-in-out infinite}
@keyframes waitpulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.waiting .dot{animation:none;opacity:.9}}
details.fallback{margin:.5rem 0 .2rem}
details.fallback>summary{cursor:pointer;font-size:.9rem;color:var(--muted);padding:.25rem 0}
details.fallback>summary:hover{color:var(--text)}

/* Version bounds sit under the operating-system chips and appear only for a
   selected Android or iOS, so the control is next to what it qualifies. */
.osver{display:flex;flex-direction:column;gap:.45rem;margin-top:.6rem}
.osver-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.osver-os{font-size:.88rem;color:var(--muted);min-width:7.5rem}
.osver-row select{padding:.35rem .5rem;font-size:.9rem}
.osver .hint{margin-top:.1rem}

/* A standing condition the advertiser has to act on, not an error: shown once
   at the top of every page rather than as a refusal when they try to spend. */
.notice{margin:0 0 14px;padding:.8rem 1rem;border-radius:.7rem;background:var(--soft);border:1px solid var(--line-strong);color:var(--text);font-size:.93rem;line-height:1.5}
.notice.warn{background:var(--yellow-soft);border-color:#e6cf8a;color:var(--text)}
.notice .btn{margin-left:.5rem}

/* Shown until the script renders; see the comment in index.html. */
.boot { display:grid; gap:6px; max-width:52ch; margin:48px auto; padding:16px 18px; border-radius:10px; background:#7f1d1d; color:#fff; font-size:14px; line-height:1.5; }
.boot a { color:#fff; }

/* Narrow screens (#1081). The page never scrolls sideways: the menu is one row
   of tabs that scrolls in its own strip, a wide table scrolls in its own frame
   (its first column is capped, not frozen: a frozen column hides the front of
   the number sliding under it, #965), and inputs are 16px so a phone does not
   zoom into them. Scoped to .shell so the operator console, which imports this
   file, keeps its own menu. */
@media (max-width: 860px) {
  .shell { grid-template-columns:minmax(0,1fr); }
  .shell > *, .main > * { min-width:0; }
  .shell .side { position:sticky; top:0; z-index:15; flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:8px 14px 0; border-right:0; border-bottom:1px solid var(--line); }
  .shell .side .brand { padding:0; margin-right:auto; }
  .shell .side .spacer { display:none; }
  .shell .side .who { order:2; display:flex; align-items:center; gap:8px; min-width:0; padding:0; border-top:0; }
  .shell .side .who > b { max-width:38vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .shell .side .who > span { display:none; }
  .shell .side nav { order:3; flex:1 0 100%; display:flex; flex-wrap:nowrap; gap:4px; overflow-x:auto; margin:0 -14px; padding:2px 14px 6px; scroll-snap-type:x proximity; scrollbar-width:none; }
  .shell .side nav::-webkit-scrollbar { display:none; }
  .shell .side nav a { flex:none; min-height:44px; scroll-snap-align:start; }
  .main { padding:18px 16px 48px; }
}
@media (max-width: 640px) {
  .main { gap:16px; padding:14px 12px 48px; }
  /* On a phone the bar scrolls away with the page: two rows kept on screen
     would take an eighth of it. The account's name is in Settings. */
  .shell .side { position:static; padding:8px 12px 0; }
  .shell .side .who > b { display:none; }
  .shell .side nav { margin:0 -12px; padding:2px 12px 6px; }
  /* The week grid keeps cells a finger can hit and scrolls in its own strip,
     the day names staying in view. */
  .sched { grid-template-columns:34px repeat(24, 26px); max-width:100%; overflow-x:auto; padding-bottom:4px; }
  .sched .d { position:sticky; left:0; background:var(--surface); }
  .topbar { flex-direction:column; align-items:stretch; }
  .panel { padding:14px; }
  .card { padding:20px 18px; }
  .auth { padding:16px 12px; }
  .grid2 { grid-template-columns:minmax(0,1fr); }
  .panel-head { flex-wrap:wrap; }
  .field input, .field select, .field textarea, .osver-row select { font-size:16px; min-height:44px; }
  .btn, .btn.sm { min-height:40px; }
  .btn.sm { padding:8px 14px; font-size:13px; }
  .chip { min-height:40px; padding:8px 14px; }
  .seg-btn { min-height:44px; }
  .tablewrap td:first-child { max-width:46vw; overflow-wrap:anywhere; }
  .landing header, .landing footer { padding:14px 16px; flex-wrap:wrap; gap:10px; }
  .hero { padding:24px 16px; }
  .hero h1 { font-size:28px; }
  .roles { grid-template-columns:minmax(0,1fr); }
  .country-list label { min-height:36px; }
  .toast { bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
}