/* App components. Loads after site.css, whose tokens (--bg, --fg, --accent, --font…) it builds on.
   The data colours below (grid, sun, day, evening) are the app's own and stay the same everywhere. */
:root{
  --page:var(--alt); --surface:#ffffff; --sunk:#f5f5f7; --ink:var(--fg); --ink-2:var(--fg2); --muted:var(--fg3);
  --line:#e5e5ea; --line-2:#d2d2d7;
  --grid-c:#2a78d6; --grid-soft:#dbe9fb;      /* electricity from the grid */
  --sun-c:#1baf7a;  --sun-soft:#d4f3e6;       /* solar sent to the grid */
  --day:#eda100;    --day-soft:#fdf0cf; --day-ink:#8a5d00;
  --eve:#4a3aa7;    --eve-soft:#e3dff8; --eve-ink:#4a3aa7;
  --good:#0ca30c; --good-ink:#006a2e; --bad:#d03b3b; --bad-ink:#b12c2c; --warn:#fab219; --warn-ink:#8a5a00;
  --sky1:#dff0fb; --sky2:#f8fbfc; --ground:#d7e6d9; --house:#ffffff; --house-line:#9fb2bc; --roof:#c8d4da; --panel:#26446b;
  --axis:#b7c5cc; --gridline:#e8ecee;
  --shadow:0 1px 2px rgba(0,0,0,.04);
  --sans:var(--font); --mono:var(--code);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --surface:#1c1c1e; --sunk:#2c2c2e; --line:#38383a; --line-2:#48484a;
  --grid-c:#3987e5; --grid-soft:#15304f; --sun-c:#199e70; --sun-soft:#12352a;
  --day:#c98500; --day-soft:#3a2c0c; --day-ink:#f0bd4f; --eve:#9085e9; --eve-soft:#262048; --eve-ink:#b3aaf2;
  --good-ink:#3ecf6a; --bad-ink:#ef7474; --warn-ink:#f2b640;
  --sky1:#0f2536; --sky2:#1c1c1e; --ground:#1b2b24; --house:#2c2c2e; --house-line:#5a5a60; --roof:#3a3a3e; --panel:#3c6aa3;
  --axis:#48484a; --gridline:#2c2c2e; --shadow:none;
}}
:root[data-theme="dark"]{
  --surface:#1c1c1e; --sunk:#2c2c2e; --line:#38383a; --line-2:#48484a;
  --grid-c:#3987e5; --grid-soft:#15304f; --sun-c:#199e70; --sun-soft:#12352a;
  --day:#c98500; --day-soft:#3a2c0c; --day-ink:#f0bd4f; --eve:#9085e9; --eve-soft:#262048; --eve-ink:#b3aaf2;
  --good-ink:#3ecf6a; --bad-ink:#ef7474; --warn-ink:#f2b640;
  --sky1:#0f2536; --sky2:#1c1c1e; --ground:#1b2b24; --house:#2c2c2e; --house-line:#5a5a60; --roof:#3a3a3e; --panel:#3c6aa3;
  --axis:#48484a; --gridline:#2c2c2e; --shadow:none;
}
body.tinted{font-size:16px;line-height:1.5}
.page{width:100%;max-width:1068px;margin:0 auto;padding:32px max(22px,env(safe-area-inset-left)) 72px;display:flex;flex-direction:column;gap:22px}
h1,h2,h3{margin:0;line-height:1.15;text-wrap:balance}
p{margin:0}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .ink2{color:var(--ink-2)}
.eyebrow{font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--muted)}

.btn{border:1px solid var(--line-2);background:var(--surface);border-radius:980px;padding:8px 16px;cursor:pointer;font-weight:500;font-size:.9rem;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;transition:border-color .15s,color .15s,background .15s}
.btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:5px 6px 5px 13px;font-size:.86rem;font-weight:600;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--grid-c);color:#fff;border-color:var(--grid-c)}
.chip .x{border:0;background:transparent;cursor:pointer;width:22px;height:22px;border-radius:50%;color:inherit;opacity:.65;display:grid;place-items:center}
.chip .x:hover{opacity:1;background:rgba(127,127,127,.25)}
.tag{font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:1px 7px;border-radius:999px;background:var(--day-soft);color:var(--day-ink)}
.status{font-size:.88rem;color:var(--ink-2);min-height:0}
.status:empty{display:none}
.status.err{color:var(--bad-ink)}
.dropveil[hidden]{display:none}
.dropveil{position:fixed;inset:0;z-index:30;background:color-mix(in srgb,var(--grid-c) 18%,transparent);border:3px dashed var(--grid-c);display:grid;place-items:center;font-size:1.4rem;font-weight:600;color:var(--ink);pointer-events:none}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow);min-width:0}
@media (max-width:560px){.card{padding:18px;border-radius:18px}}
.card > h2{font-size:1.35rem;font-weight:600;letter-spacing:-.02em}
.card > .lede{color:var(--ink-2);margin-top:4px;max-width:62ch}
.card > .body{margin-top:18px}

/* hero */
.hero{padding:0;overflow:hidden}
.hero .head{padding:24px 24px 0;display:flex;flex-direction:column;gap:6px}
.hero h1{font-size:clamp(1.6rem,4.2vw,2.5rem);font-weight:700;letter-spacing:-.035em;max-width:24ch}
.hero h1 .ok{color:var(--good-ink)} .hero h1 .due{color:var(--bad-ink)}
.hero .sub{color:var(--ink-2);font-size:1.02rem;max-width:60ch}
.meta{display:flex;flex-wrap:wrap;gap:6px}
.meta span{font-size:.78rem;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--sunk);color:var(--ink-2);border:1px solid var(--line)}
.flow{display:block;width:100%;height:auto;margin-top:6px}
.flow text{font-family:var(--sans)}
@media (max-width:620px){.flow .fb{font-size:40px}.flow .fs{font-size:23px}.flow .fx{font-size:21px}}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.trio > div{padding:16px 20px;display:flex;flex-direction:column;gap:2px;min-width:0}
.trio > div + div{border-left:1px solid var(--line)}
@media (max-width:620px){.trio{grid-template-columns:minmax(0,1fr)}.trio > div + div{border-left:0;border-top:1px solid var(--line)}}
.trio .k{font-size:.8rem;font-weight:700;display:flex;align-items:center;gap:7px}
.trio .v{font-size:1.7rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:normal}
.trio .v small{font-size:.85rem;font-weight:600;color:var(--muted);margin-left:3px}
.trio .s{font-size:.82rem;color:var(--ink-2)}
.dot{width:11px;height:11px;border-radius:50%;display:inline-block;flex:none}
.split{display:flex;height:8px;border-radius:99px;overflow:hidden;gap:2px;margin-top:6px}
.split span{display:block;height:100%}

/* day / evening */
.de{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:680px){.de{grid-template-columns:minmax(0,1fr)}}
.band{border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:14px;border:1px solid var(--line);min-width:0}
.band.day{background:linear-gradient(180deg,var(--day-soft),transparent 75%)}
.band.eve{background:linear-gradient(180deg,var(--eve-soft),transparent 75%)}
.band .t{display:flex;align-items:center;gap:12px}
.band .t svg{flex:none}
.band .t h3{font-size:1.1rem;font-weight:600}
.band .t small{display:block;color:var(--ink-2);font-size:.82rem;font-weight:500}
.band .rate{margin-left:auto;text-align:right;font-weight:600;font-size:1.05rem;white-space:nowrap}
.band .rate small{display:block;font-size:.72rem;font-weight:600;color:var(--muted)}
.bars{display:flex;flex-direction:column;gap:8px}
.bar-row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;align-items:center;font-size:.85rem}
.bar-row .lbl{color:var(--ink-2);font-weight:600}
.track{height:26px;background:var(--sunk);border-radius:8px;position:relative;overflow:hidden}
.fill{height:100%;border-radius:8px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:#fff;font-weight:700;font-size:.82rem;min-width:fit-content;padding-left:8px;transition:width .5s ease}
.fill.out{justify-content:flex-start}
.fill.in{background:var(--grid-c)} .fill.sent{background:var(--sun-c)}
.fill.tiny{background:transparent;color:var(--ink-2);padding-left:6px}
.verdict{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:.92rem}
.verdict b{font-size:1.05rem}
.verdict .ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:700;color:#fff}

/* trap */
.trap{margin-top:18px;border-radius:18px;padding:18px;background:var(--sunk);border:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px;align-items:center}
@media (max-width:760px){.trap{grid-template-columns:minmax(0,1fr)}}
.eq{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tok{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--ink-2)}
.tokrow{display:flex;gap:4px;align-items:flex-end}
.cell{width:34px;height:34px;border-radius:9px;display:grid;place-items:center}
.cell.eve{background:var(--eve)} .cell.day{background:var(--day)}
.eq .sym{font-size:1.6rem;font-weight:600;color:var(--muted)}
.trap h3{font-size:1.05rem;font-weight:600;margin-bottom:4px}
.trap p{color:var(--ink-2);font-size:.92rem}
.whatif label{font-weight:600;font-size:.92rem;display:block}
.whatif .big{font-size:2rem;font-weight:700;letter-spacing:-.03em;color:var(--good-ink);line-height:1.1;margin-top:6px}
.whatif .big small{font-size:.9rem;font-weight:600;color:var(--ink-2)}
input[type=range]{width:100%;accent-color:var(--eve);margin-top:6px}
.cycle{margin-top:18px;border-top:1px dashed var(--line-2);padding-top:16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:20px;align-items:center}
@media (max-width:760px){.cycle{grid-template-columns:minmax(0,1fr)}}
.cycle h3{font-size:1rem;font-weight:600;margin-bottom:4px}
.cycle p{color:var(--ink-2);font-size:.9rem}

/* money */
.money{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
@media (max-width:720px){.money{grid-template-columns:minmax(0,1fr)}}
.panel{border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.donutwrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.donutwrap svg{flex:none}
.leg{display:flex;flex-direction:column;gap:8px;font-size:.9rem;min-width:150px;flex:1}
.leg div{display:flex;align-items:center;gap:8px}
.leg b{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.wallet .amt{font-size:2.2rem;font-weight:700;letter-spacing:-.03em;color:var(--good-ink);line-height:1}
.months{display:flex;flex-wrap:wrap;gap:6px}
.months i{width:30px;height:38px;border-radius:6px;background:var(--sun-soft);border:1.5px solid var(--sun-c);position:relative;overflow:hidden}
.months i::after{content:"";position:absolute;inset:auto 0 0 0;height:var(--f,100%);background:var(--sun-c)}
.compare{display:flex;flex-direction:column;gap:12px}
.cmp .row1{display:flex;justify-content:space-between;font-size:.88rem;font-weight:600;margin-bottom:4px}
.cmp .trk{height:34px;background:var(--sunk);border-radius:10px;overflow:hidden}
.cmp .fl{height:100%;border-radius:10px}
.save-big{font-size:2.2rem;font-weight:700;letter-spacing:-.03em;color:var(--good-ink);line-height:1.05}
.inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:4px}
@media (max-width:620px){.inputs{grid-template-columns:minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:.8rem;font-weight:700}
.field input{border:1px solid var(--line-2);background:var(--sunk);border-radius:10px;padding:8px 11px;width:100%;font-variant-numeric:tabular-nums}
.field input:focus{border-color:var(--grid-c);outline:none;box-shadow:0 0 0 3px var(--grid-soft)}
.field small{font-size:.74rem;color:var(--muted)}
.solarsplit{display:flex;flex-direction:column;gap:8px}
.stack{display:flex;height:34px;border-radius:10px;overflow:hidden;gap:2px}
.stack span{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.8rem;min-width:0;overflow:hidden;white-space:nowrap}

/* takeaways */
.takes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:680px){.takes{grid-template-columns:minmax(0,1fr)}}
.takes li{display:flex;gap:12px;padding:14px;border-radius:14px;background:var(--sunk);border:1px solid var(--line)}
.takes .ti{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none}
.takes p{font-size:.92rem;color:var(--ink-2)} .takes b{color:var(--ink)}

/* charts */
.chart{position:relative;width:100%}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart text{fill:var(--muted);font-family:var(--sans);font-size:11.5px}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.82rem;color:var(--ink-2);margin:4px 0 10px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sub + .sub{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.sub h3{font-size:1rem;font-weight:600}
.tip{position:fixed;z-index:40;pointer-events:none;background:var(--ink);color:var(--page);font-size:.8rem;line-height:1.4;padding:7px 10px;border-radius:9px;max-width:240px;box-shadow:0 6px 20px rgba(0,0,0,.2);opacity:0;transition:opacity .08s}
.tip.on{opacity:1}
.empty{padding:16px;border:1px dashed var(--line-2);border-radius:12px;color:var(--ink-2);font-size:.9rem}

/* experts */
details.expert{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
details.expert > summary{list-style:none;cursor:pointer;padding:18px 24px;display:flex;align-items:center;gap:12px;font-weight:600;font-size:1.05rem}
details.expert > summary::-webkit-details-marker{display:none}
details.expert > summary .chev{margin-left:auto;transition:transform .2s;color:var(--muted)}
details.expert[open] > summary .chev{transform:rotate(180deg)}
details.expert > summary small{font-weight:500;color:var(--ink-2);font-size:.85rem}
.xbody{padding:0 24px 24px;display:flex;flex-direction:column;gap:26px}
@media (max-width:560px){.xbody{padding:0 16px 18px} details.expert > summary{padding:16px}}
.xbody h3{font-size:.95rem;font-weight:600;margin-bottom:10px}
.checks{list-style:none;margin:0;padding:0}
.checks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.checks li:first-child{border-top:0}
.checks .ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:600;color:#fff;margin-top:1px}
.checks .ic.pass{background:var(--good)} .checks .ic.warn{background:var(--warn);color:#3a2800} .checks .ic.fail{background:var(--bad)}
.checks b{font-weight:600;font-size:.92rem} .checks small{display:block;color:var(--ink-2);font-size:.78rem;font-family:var(--mono);overflow-wrap:anywhere}
.regs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:560px){.regs{grid-template-columns:minmax(0,1fr)}}
.reg{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--sunk);font-size:.82rem;display:flex;flex-direction:column;gap:6px;min-width:0}
.reg .h{display:flex;justify-content:space-between;gap:8px;color:var(--ink-2)} .reg .h b{color:var(--ink)}
.digits{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-family:var(--mono);color:var(--muted)}
.dg{display:inline-flex;gap:2px} .dg i{font-style:normal;background:var(--surface);border:1px solid var(--line-2);border-radius:3px;min-width:1.2em;text-align:center;color:var(--ink)}
.digits .u{margin-left:auto;font-weight:600;color:var(--ink)}
.qrgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:760px){.qrgrid{grid-template-columns:minmax(0,1fr)}}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:.8rem}
th,td{text-align:left;padding:5px 10px;border-top:1px solid var(--line);vertical-align:top}
tr:first-child td,tr:first-child th{border-top:0}
th{font-weight:700;color:var(--ink-2);background:var(--sunk);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase}
td.m{font-family:var(--mono);overflow-wrap:anywhere} td.sub{padding-left:22px;color:var(--ink-2)}
tr.sec td{background:var(--sunk);font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
pre.raw{font-family:var(--mono);font-size:.74rem;background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:10px;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;max-height:240px;overflow:auto}
textarea{width:100%;min-height:100px;border:1px solid var(--line-2);background:var(--sunk);border-radius:10px;padding:8px 10px;font-family:var(--mono);font-size:.78rem;color:var(--ink)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.note{font-size:.8rem;color:var(--muted);max-width:75ch}

@keyframes flow{to{stroke-dashoffset:-32}}
.flowdots{animation:flow 1.1s linear infinite}
.flowdots.slow{animation-duration:1.8s}
@keyframes spin{to{transform:rotate(360deg)}}
.rays{transform-origin:96px 78px;animation:spin 40s linear infinite}
@media (prefers-reduced-motion:reduce){.flowdots,.rays{animation:none}.fill{transition:none}}

/* ---------- site additions ---------- */
.btn{text-decoration:none;color:var(--ink)}
.btn:disabled{opacity:.6;cursor:progress}
.btn.big{padding:12px 22px;font-size:1rem}
.btn.danger{border-color:var(--bad);color:var(--bad-ink)}
.btn.danger:hover{background:var(--bad);color:#fff}
.avatar{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--day),var(--sun-c));color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:600}
.chips{flex-direction:column;align-items:stretch;gap:10px}
.chips:empty{display:none}
.chips-row{display:flex;flex-wrap:wrap;gap:8px}
.meters{display:flex;flex-wrap:wrap;gap:6px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:14px;width:max-content;max-width:100%}
.mchip{border:0;background:transparent;border-radius:10px;padding:7px 14px;font-weight:700;font-size:.88rem;cursor:pointer;color:var(--ink-2)}
.mchip[aria-pressed="true"]{background:var(--ink);color:var(--page)}
.stackmain{display:flex;flex-direction:column;gap:22px}
.savebar{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.savebar[hidden]{display:none}
.savebar > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.savebar span:not(.save-ic){font-size:.88rem;color:var(--ink-2)}
.save-ic{width:42px;height:42px;border-radius:12px;background:var(--sun-c);display:grid;place-items:center;flex:none}
@media (max-width:560px){.savebar{flex-wrap:wrap}.savebar .btn{width:100%;justify-content:center}}

/* sign-in dialog */
.modal{border:1px solid var(--line);border-radius:18px;padding:28px;max-width:440px;width:calc(100% - 32px);background:var(--surface);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal::backdrop{background:rgba(10,20,26,.45);backdrop-filter:blur(2px)}
.modal .si-body{display:flex;flex-direction:column;gap:14px}
.keep[hidden]{display:none}
.gbtn{justify-content:center;gap:12px;background:#fff;color:#1f1f1f;border-color:#747775;font-family:Roboto,var(--sans);font-weight:500}
.gbtn:hover{background:#f7f8f8;color:#1f1f1f;border-color:#747775}
.gbtn[aria-disabled="true"]{opacity:.7;pointer-events:none}
.modal h2{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.modal-x{position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:1.5rem;cursor:pointer;color:var(--muted);width:34px;height:34px;border-radius:50%}
.modal-x:hover{background:var(--sunk)}
.modal .field input{font-size:1rem;padding:11px 13px}
.err{color:var(--bad-ink);font-size:.88rem;min-height:0}
.err:empty{display:none}
.keep{font-size:.86rem;padding:10px 12px;border-radius:12px;background:var(--sun-soft);color:var(--ink)}

/* simple server pages (sign-in confirm, unsubscribe) */
body.plain .page{min-height:calc(100dvh - 240px);display:grid;place-items:center;padding-block:56px}
.plain-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:32px;max-width:420px;width:100%;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.plain-card h1{font-size:1.6rem;font-weight:700;letter-spacing:-.02em}
.plain-card p{color:var(--ink-2)}
.plain-card form{display:flex}
.plain-card .btn{justify-content:center}
.plain-logo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:1.02rem;letter-spacing:-.02em}

/* account + admin pages */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.page-head h1{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:700;letter-spacing:-.03em}
.list{display:flex;flex-direction:column}
.item{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:0}
.item .grow{flex:1;min-width:180px}
.item b{font-weight:700}
.item small{display:block;color:var(--muted);font-size:.8rem}
.item .acts{display:flex;gap:6px;flex-wrap:wrap}
.btn.sm{padding:5px 11px;font-size:.8rem}
.inline-input{border:1px solid var(--line-2);background:var(--sunk);border-radius:8px;padding:6px 10px;font-weight:600;min-width:0;width:220px;max-width:100%}
.switch{display:flex;align-items:center;gap:12px;cursor:pointer}
.switch input{width:44px;height:24px;appearance:none;background:var(--line-2);border-radius:99px;position:relative;cursor:pointer;transition:background .15s;flex:none}
.switch input::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}
.switch input:checked{background:var(--sun-c)}
.switch input:checked::after{transform:translateX(20px)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:var(--surface);display:flex;flex-direction:column;gap:2px}
.kpi .v{font-size:1.8rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .s{font-size:.8rem;color:var(--ink-2)}
.dz{border:1px solid var(--bad);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}
.prose .body{display:flex;flex-direction:column;gap:10px;max-width:68ch}
.prose h3{font-size:1rem;font-weight:600;margin-top:8px}
.prose p{color:var(--ink-2)}