/* DM Checker — стиль «Telegram+»: цвета из темы Telegram (светлая/тёмная подстраиваются сами),
   стеклянные секции, один акцент — цвет кнопки Telegram. 8pt-ритм, радиус 16. */
@font-face{font-family:"Onest";src:url("/assets/fonts/onest-var-cyrillic.woff2") format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";src:url("/assets/fonts/onest-var-latin.woff2") format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Telegram theme → tokens (фолбэк — тёмная тема Telegram) */
  --bg:var(--tg-theme-secondary-bg-color,#0e1621);
  --card-solid:var(--tg-theme-section-bg-color,var(--tg-theme-bg-color,#17212b));
  --ink:var(--tg-theme-text-color,#f5f5f5);
  --muted:var(--tg-theme-hint-color,#7d8b99);
  --link:var(--tg-theme-link-color,#6ab3f3);
  --accent:var(--tg-theme-button-color,#5288c1);
  --accent-ink:var(--tg-theme-button-text-color,#ffffff);
  --accent-text:var(--tg-theme-accent-text-color,var(--link));
  --line:var(--tg-theme-section-separator-color,rgba(255,255,255,.08));
  --sub:var(--tg-theme-subtitle-text-color,var(--muted));

  /* производные: материал секций, дорожки, обводки */
  --card:linear-gradient(180deg,color-mix(in srgb,var(--card-solid) 94%,#fff 6%),var(--card-solid));
  --surface:color-mix(in srgb,var(--card-solid) 70%,var(--bg));
  --track:color-mix(in srgb,var(--ink) 8%,transparent);
  --hair:color-mix(in srgb,var(--ink) 8%,transparent);
  --hi:color-mix(in srgb,#fff 7%,transparent);
  --glow:radial-gradient(90% 320px at 15% -60px,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%);
  --shadow:0 1px 0 var(--hi) inset,0 10px 28px -18px rgba(0,0,0,.55);

  /* статусы (не акцент): только с иконкой и подписью */
  --good:#6fd394; --good-wash:rgba(79,191,122,.14);
  --bad:#f07f73;  --bad-wash:rgba(240,127,115,.13);

  --f:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:16px; --r-sm:12px;
  --tabs-h:64px;
  color-scheme:dark;
}
html[data-scheme="light"]{
  --good:#1a8f50; --good-wash:rgba(26,143,80,.10);
  --bad:#cc3d2f;  --bad-wash:rgba(204,61,47,.09);
  --hi:rgba(255,255,255,.8);
  --card:var(--card-solid);
  --shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px -18px rgba(16,24,40,.25);
  --glow:radial-gradient(90% 320px at 15% -60px,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%);
  color-scheme:light;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased}
body{min-height:100vh;background:var(--glow),var(--bg);background-repeat:no-repeat}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.app{padding:12px 16px calc(var(--tabs-h) + 24px + env(safe-area-inset-bottom,0px));display:grid;gap:16px;max-width:640px;margin:0 auto}

/* ---------- top bar ---------- */
.top{display:grid;gap:10px}
.toprow{display:flex;gap:8px;align-items:center;justify-content:space-between;min-width:0}
.chip{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;max-width:100%;font-size:13.5px;font-weight:600;padding:8px 10px 8px 12px;border-radius:999px;background:var(--card);border:1px solid var(--hair);box-shadow:var(--shadow)}
.chip span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.chip .chev{flex:none;width:12px;height:12px;color:var(--muted)}
.chip.single .chev{display:none}
.chip:focus-visible,.iconbtn:focus-visible,.lnk:focus-visible,.lcard:focus-visible,.seg button:focus-visible,.tabs button:focus-visible,.btn:focus-visible,.row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.seg{display:flex;padding:3px;border-radius:12px;background:var(--surface);border:1px solid var(--hair)}
.top .seg{justify-self:stretch}
.top .seg button{flex:1;text-align:center;padding:7px 0;font-size:13px}
.seg button{all:unset;cursor:pointer;font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:9px;color:var(--muted);transition:background .18s,color .18s}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.seg.small button{padding:4px 9px;font-size:12px}

/* ---------- building blocks ---------- */
.label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.card{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);padding:14px;display:grid;gap:12px;box-shadow:var(--shadow)}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:24px}
.card-h h3{margin:0;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.more{all:unset;cursor:pointer;font-size:13px;font-weight:600;color:var(--accent-text);white-space:nowrap}

.hero{position:relative;overflow:hidden;padding:16px 16px 14px;border-radius:20px}
.hero::after{content:"";position:absolute;right:-40px;top:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 65%);pointer-events:none}
.hero .num{font-size:88px;font-weight:800;line-height:.9;letter-spacing:-.045em;margin:6px 0 2px}
.hero .sub{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.hero .sub b{color:var(--ink);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:12.5px;padding:3px 8px;border-radius:999px;background:var(--track);color:var(--ink)}
.pill.up{background:var(--good-wash);color:var(--good)}
.pill.down{background:var(--bad-wash);color:var(--bad)}

.strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--hair);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.strip div{padding:12px 10px;display:grid;gap:4px;border-left:1px solid var(--hair);min-width:0}
.strip div:first-child{border-left:0}
.strip b{font-size:19px;font-weight:700;letter-spacing:-.01em}
.strip span{font-size:11px;color:var(--muted);line-height:1.2}

/* chart */
.chart{position:relative;touch-action:pan-y}
.chart svg{display:block;width:100%;overflow:visible}
.chart text{font-family:var(--f);font-variant-numeric:tabular-nums}
.chart .b{transform-box:fill-box;transform-origin:50% 100%}
.chart .hit{cursor:pointer}
.tip{position:absolute;pointer-events:none;font-size:12px;line-height:1.3;padding:6px 9px;border-radius:9px;background:var(--ink);color:var(--card-solid);white-space:nowrap;transform:translate(-50%,calc(-100% - 8px));opacity:0;transition:opacity .12s;font-variant-numeric:tabular-nums;z-index:2}
.tip b{font-weight:700}
.tip.on{opacity:1}

/* link rank */
.links{display:grid;gap:4px}
.lnk{all:unset;cursor:pointer;display:grid;gap:6px;padding:6px 0}
.lnk-t{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px;min-width:0}
.lnk-t .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.lnk-t em{font-style:normal;font-size:12.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.lnk-t em b{color:var(--ink);font-weight:700}
.bar{display:block;height:8px;border-radius:4px;background:var(--track);overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;background:var(--accent);transform-origin:left}

/* leads */
.leads{display:grid}
.row{all:unset;cursor:pointer;display:grid;grid-template-columns:40px 1fr auto;gap:10px;padding:12px 0;border-top:1px solid var(--hair);align-items:start}
.leads .row:first-child{border-top:0;padding-top:4px}
.ava{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;background:linear-gradient(135deg,var(--a1,#6ab3f3),var(--a2,#4f7fc0));flex:none}
.who{font-weight:600;font-size:14.5px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:0}
.who .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.src{font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:6px;background:color-mix(in srgb,var(--link) 14%,transparent);color:var(--link);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.src.muted{background:var(--track);color:var(--muted)}
.msg{font-size:13px;color:var(--sub);margin-top:3px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.meta{font-size:11.5px;color:var(--muted);margin-top:5px;display:flex;gap:4px 10px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.st{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.st svg{width:11px;height:11px;flex:none}
.st.in{color:var(--good)} .st.left{color:var(--bad)} .st.none{color:var(--muted)}
.time{font-size:11.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;padding-top:2px}

/* filters */
.search{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--r-sm);background:var(--card);border:1px solid var(--hair)}
.search svg{width:16px;height:16px;color:var(--muted);flex:none}
.search input{all:unset;flex:1;font-size:14.5px;min-width:0}
.search input::placeholder{color:var(--muted)}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.chips::-webkit-scrollbar{display:none}
.fchip{all:unset;cursor:pointer;flex:none;font-size:12.5px;font-weight:600;padding:7px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--hair);color:var(--muted);white-space:nowrap}
.fchip[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 18%,transparent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--ink)}
.count{font-size:13px;color:var(--muted);padding:0 2px}
.btn{all:unset;cursor:pointer;text-align:center;font-weight:600;font-size:14.5px;padding:12px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--hair);color:var(--accent-text)}
.btn.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#fff 12%),var(--accent));color:var(--accent-ink);border:0;box-shadow:0 1px 0 rgba(255,255,255,.2) inset}
.btn[disabled]{opacity:.5;pointer-events:none}

/* links tab */
.lcard{all:unset;cursor:pointer;display:grid;gap:12px;background:var(--card);border:1px solid var(--hair);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.lcard-h{display:flex;align-items:center;gap:8px;min-width:0}
.lcard-h>b{font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.lcard-h .big{font-size:20px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.lcard-h .big small{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:3px}
.url{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:-8px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border-radius:var(--r-sm);overflow:hidden}
.grid3 .c{background:var(--card-solid);padding:9px 10px;display:grid;gap:2px}
.grid3 b{font-size:16px;font-weight:700}
.grid3 .c>span{font-size:11px;color:var(--muted)}
.note{font-size:12.5px;color:var(--muted);line-height:1.45;padding:0 2px}

/* states */
.empty{display:grid;justify-items:center;text-align:center;gap:8px;padding:28px 12px;color:var(--muted);font-size:14px}
.empty svg{width:44px;height:44px;color:var(--accent);opacity:.8}
.empty b{color:var(--ink);font-size:16px}
.skel{border-radius:var(--r);background:linear-gradient(90deg,var(--track) 25%,color-mix(in srgb,var(--ink) 13%,transparent) 50%,var(--track) 75%);background-size:200% 100%;animation:sh 1.3s linear infinite}
@keyframes sh{to{background-position:-200% 0}}
.fatal{display:grid;justify-items:center;text-align:center;gap:12px;padding:64px 24px;min-height:70vh;align-content:center}
.fatal b{font-size:20px}
.fatal p{margin:0;color:var(--muted);max-width:300px}

/* tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:repeat(3,1fr);padding:6px 8px calc(8px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--tg-theme-bottom-bar-bg-color,var(--card-solid)) 86%,transparent);border-top:1px solid var(--hair);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.tabs button{all:unset;cursor:pointer;display:grid;justify-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--muted);padding:4px 0}
.tabs svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabs button[aria-current]{color:var(--accent-text)}

/* sheet */
.scrim{position:fixed;inset:0;z-index:9;background:rgba(0,0,0,.45);opacity:0;transition:opacity .22s}
.scrim.on{opacity:1}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:10;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--tg-theme-bg-color,var(--card-solid));border-radius:22px 22px 0 0;border-top:1px solid var(--hair);
  padding:10px 16px calc(20px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);max-width:640px;margin:0 auto}
.sheet.on{transform:none}
.grab{width:36px;height:4px;border-radius:2px;background:var(--hair);margin:0 auto 12px}
#sheetBody{display:grid;gap:14px}
.sh-h{display:flex;gap:12px;align-items:center}
.sh-h .ava{width:52px;height:52px;font-size:18px}
.sh-h b{display:block;font-size:18px;letter-spacing:-.01em}
.sh-h small{font-size:12.5px;color:var(--muted)}
.copy{all:unset;cursor:pointer;color:var(--muted);border-bottom:1px dashed currentColor}
.journey{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:start;gap:6px;font-size:11.5px;color:var(--muted)}
.journey i{height:2px;background:var(--hair);border-radius:1px;margin-top:4px}
.journey i.hot{background:var(--accent)}
.journey span{display:grid;justify-items:center;gap:4px;text-align:center;font-variant-numeric:tabular-nums}
.journey span::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--tg-theme-bg-color,var(--card-solid))}
.journey span.in::before{background:var(--good)} .journey span.left::before{background:var(--bad)} .journey span.none::before{background:var(--muted)}
.kv{display:grid;border:1px solid var(--hair);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.kv div{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-top:1px solid var(--hair);font-size:13.5px}
.kv div:first-child{border-top:0}
.kv span{color:var(--muted);flex:none}
.kv b{font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}
.kv b small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.quote{font-size:14.5px;line-height:1.45;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--hair);white-space:pre-wrap;overflow-wrap:anywhere}
.picker{display:grid}
.picker button{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:14px 4px;border-top:1px solid var(--hair);font-weight:600}
.picker button:first-child{border-top:0}
.picker button[aria-pressed="true"]::after{content:"✓";color:var(--accent-text)}

.toast{position:fixed;left:50%;bottom:calc(var(--tabs-h) + 24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;z-index:20;
  font-size:13.5px;font-weight:600;padding:10px 14px;border-radius:12px;background:var(--ink);color:var(--card-solid);transition:opacity .2s,transform .2s;pointer-events:none;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* motion: рост столбиков/полос, появление ленты; без анимаций при reduce */
/* ---------- v2 ---------- */
.view.stack{display:grid;gap:16px}
.view.stack.tight{gap:12px}
.iconbtn{all:unset;cursor:pointer;flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--card);border:1px solid var(--hair);box-shadow:var(--shadow);color:var(--muted)}
.iconbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card.list{padding-top:10px;padding-bottom:6px}
.card.flat{box-shadow:none;background:var(--surface)}
.card-h small{font-size:12px;color:var(--muted)}
.seg.full{display:flex}
.seg.full button{flex:1;text-align:center;white-space:nowrap;padding-left:4px;padding-right:4px}
.btn.withicon{display:flex;justify-content:center;align-items:center;gap:8px}
.btn.withicon svg{width:18px;height:18px}
.btn.ghost{background:transparent;border-style:dashed;color:var(--muted)}
.btn.grow{flex:1}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.tag.src{background:color-mix(in srgb,var(--link) 14%,transparent);color:var(--link)}
.tag{font-size:11px;font-weight:600;padding:2px 6px;border-radius:6px;background:var(--track);color:var(--muted)}

/* уровни депа: high — золото, mid — акцент, low — нейтральный; всегда с подписью */
.tier{font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:6px;white-space:nowrap}
.tier.high{background:rgba(242,180,65,.16);color:#e8a92a}
.tier.mid{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent-text)}
.tier.low{background:var(--track);color:var(--sub)}
html[data-scheme="light"] .tier.high{color:#a86a00;background:rgba(242,180,65,.2)}
.depbar{display:flex;gap:2px;height:10px;border-radius:5px;overflow:hidden;background:var(--track)}
.depbar i{display:block;height:100%}
.depbar .high,.deplegend i.high{background:#e8a92a}
.depbar .mid,.deplegend i.mid{background:var(--accent)}
.depbar .low,.deplegend i.low{background:color-mix(in srgb,var(--ink) 30%,transparent)}
.deplegend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.deplegend span{display:inline-flex;align-items:center;gap:5px}
.deplegend i{width:8px;height:8px;border-radius:2px;display:inline-block}

/* оценка ссылки: буква всегда видна, цвет — дублирующий канал */
.grade{flex:none;width:24px;height:24px;border-radius:7px;display:inline-grid;place-items:center;font-weight:800;font-size:13px;color:#fff}
.grade.big{width:52px;height:52px;border-radius:14px;font-size:26px}
.grade.gA{background:#2f9e5b}.grade.gB{background:var(--accent)}.grade.gC{background:#d39a22}.grade.gD{background:#d0483b}
.grade.none{background:var(--track);color:var(--muted)}

.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border-radius:var(--r-sm);overflow:hidden}
.mgrid div{background:var(--card-solid);padding:10px;display:grid;gap:2px;min-width:0}
.mgrid div.wide{grid-column:span 2}
.mgrid b{font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mgrid span{font-size:11px;color:var(--muted)}
.mrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mrow>div,.waitbox{display:grid;gap:2px;padding:10px 12px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--hair)}
.mrow b{font-size:20px;font-weight:800}
.mrow span{font-size:11.5px;color:var(--muted)}
.waitbox{all:unset;cursor:pointer;display:grid;gap:2px;padding:10px 12px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--hair)}
.waitbox.hot{background:var(--bad-wash);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.waitbox.hot b,.waitbox.hot span{color:var(--bad)}
.st.wait{color:var(--bad)}
.ranks{display:grid;gap:2px}
.mline{font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.mline.muted{color:var(--muted)}
.lcard.archived{opacity:.6}
.grid3 .c.warn b{color:var(--bad)}
.sortrow{display:grid}

.backlink{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--accent-text);font-size:14px}
.backlink svg{width:18px;height:18px}
.dh-top{display:flex;gap:12px;align-items:center}
.dh-top h2{margin:0;font-size:20px;letter-spacing:-.01em;overflow-wrap:anywhere}
.dh-top small{font-size:12.5px;color:var(--muted)}
.urlrow{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--hair);min-width:0}
.urlrow .url{margin:0;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.urlrow.big .url{white-space:normal;overflow-wrap:anywhere;font-size:15px}
.score{font-size:13.5px;color:var(--muted)}
.score b{color:var(--ink)}
.score{display:grid;gap:6px}
.sp{display:grid;grid-template-columns:minmax(0,1fr) 80px 40px;gap:8px;align-items:center;font-size:12.5px}
.sp em{font-style:normal;text-align:right;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.spbar{display:block;height:6px;border-radius:3px;background:var(--track);overflow:hidden}
.spbar i{display:block;height:100%;background:var(--accent);border-radius:3px}
.score .scale{font-size:11.5px;color:var(--muted)}
.score ul{margin:6px 0 0;padding-left:18px;display:grid;gap:3px;color:var(--sub)}
.funnel{display:grid;gap:10px}
.fr{display:grid;gap:5px}
.fr-t{display:flex;justify-content:space-between;font-size:13.5px}
.fr-t b{font-weight:700}
.fr-t em{font-style:normal;font-weight:500;color:var(--muted);font-size:12px;margin-left:4px}
.qbars{display:grid;gap:9px;margin-bottom:6px}
.qb{display:grid;gap:4px}
.qb-t{display:flex;justify-content:space-between;font-size:13px}
.qb-t b{font-weight:700}
.qb-t b.badtxt{color:var(--bad)}
.qb-bar{position:relative;display:block;height:6px;border-radius:3px;background:var(--track)}
.qb-bar i{display:block;height:100%;border-radius:3px;background:var(--accent);transform-origin:left}
.qb-bar i.bad{background:var(--bad)}
.qb-bar em{position:absolute;top:-3px;width:2px;height:12px;border-radius:1px;background:var(--ink);opacity:.55;transform:translateX(-1px)}
.speed{display:flex;gap:2px;height:10px;border-radius:5px;overflow:hidden;background:var(--track);margin-bottom:6px}
.speed i,.deplegend i.s0,.deplegend i.s1,.deplegend i.s2,.deplegend i.s3{display:block;height:100%}
.s0{background:var(--accent)}.s1{background:color-mix(in srgb,var(--accent) 70%,transparent)}.s2{background:color-mix(in srgb,var(--accent) 45%,transparent)}.s3{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.costs{display:grid}
.cost{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--hair);font-size:13.5px}
.cost:first-child{border-top:0}
.cost span{flex:1;color:var(--sub);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cost .x{all:unset;cursor:pointer;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;color:var(--muted);background:var(--track);font-size:16px}
.inrow{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.inrow .btn{padding:11px 14px}
.field{display:grid;gap:5px;flex:1 1 120px;min-width:0}
.field.grow{flex:3 1 160px}
.field>span{font-size:12px;color:var(--muted)}
.field input{all:unset;box-sizing:border-box;width:100%;font-size:15.5px;padding:10px 12px;border-radius:var(--r-sm);background:var(--card-solid);border:1px solid var(--hair);color:var(--ink);font-variant-numeric:tabular-nums}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.field input[type=date]{min-height:20px}
.field.money{position:relative}
.toggle{display:flex;gap:10px;align-items:flex-start;font-size:14px;cursor:pointer}
.toggle input{width:20px;height:20px;accent-color:var(--accent);flex:none;margin:1px 0 0}
.balbox{display:grid;gap:10px;padding:12px;border-radius:var(--r);background:var(--surface);border:1px solid var(--hair)}
.bal-h{display:flex;justify-content:space-between;align-items:center;min-height:22px}
.balro{font-size:22px;font-weight:800}
.hist{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.hist b{color:var(--sub);font-weight:600}
.done{display:grid;gap:12px}
.done h2{margin:0;font-size:20px}
.quote .label{display:block;margin-bottom:4px}

@media (prefers-reduced-motion:no-preference){
  .grow .qb-bar i{animation:hbar .7s cubic-bezier(.2,.75,.2,1) both}
  .grow .b{animation:bar .6s cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(var(--i,0) * 18ms)}
  .grow .bar i{animation:hbar .7s cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(var(--i,0) * 60ms)}
  @keyframes bar{from{transform:scaleY(0)}to{transform:none}}
  @keyframes hbar{from{transform:scaleX(0)}to{transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .sheet,.scrim,.toast,.seg button{transition:none}
  .skel{animation:none}
}
@media (max-width:360px){
  .hero .num{font-size:72px}
  .strip b{font-size:16px}
  .chip{max-width:100%}
}