/* ============================================================================
   ADVERTONE · КОНТРОЛЬ — "TERMINAL LEDGER" design system
   Ranked instrument ledger. Numbers are heroes. Elevation by lightness, not
   shadow. One rationed accent. Grade = a lit status spine, never a pill.
   Font: Martian Grotesk VF (self-hosted, Cyrillic, OFL) — the engineered face.
   ========================================================================= */

@font-face{
  font-family:'Martian Grotesk';
  src:url('/static/MartianGrotesk-VF.woff2') format('woff2-variations');
  font-weight:100 1000;
  font-display:swap;
}

:root{
  /* ── SURFACES — elevation by lightness, never darker ── */
  --bg:#0A0C10; --surface-1:#0E1117; --surface-2:#131720; --surface-3:#191E29;
  --surface-inset:#070A0D;

  /* ── HAIRLINES — white-at-opacity ── */
  --line:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.11);
  --line-faint:rgba(255,255,255,.04);

  /* ── TEXT — 4 tiers ── */
  --txt:rgba(255,255,255,.92); --txt-2:rgba(255,255,255,.58);
  --txt-3:rgba(255,255,255,.34); --txt-num:#F2F5F8;

  /* ── ACCENT — one signal, rationed ── */
  --accent:#34E0A1; --accent-neon:#00FFA1; --accent-ink:#04130d; --accent-hi:#3df0ad;
  --accent-dim:rgba(52,224,161,.14); --accent-line:rgba(52,224,161,.45);

  /* ── GRADE RAMP — instrument temperature arc (no Tailwind defaults) ── */
  --g-excellent:#34E0A1; --g-good:#6FD0C4; --g-average:#C9B458;
  --g-poor:#D98A52; --g-critical:#E06A6A; --g-none:rgba(255,255,255,.22);
  --g-excellent-wash:rgba(52,224,161,.12); --g-good-wash:rgba(111,208,196,.12);
  --g-average-wash:rgba(201,180,88,.12); --g-poor-wash:rgba(217,138,82,.12);
  --g-critical-wash:rgba(224,106,106,.12);

  --scrim:rgba(7,10,13,.62);

  /* ── SCALES — quantized ── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-chip:5px; --r-panel:10px;

  /* ── EASES ── */
  --ease-snap:cubic-bezier(.2,0,0,1);
  --ease-data:cubic-bezier(.33,1,.68,1);
  --ease-exit:cubic-bezier(.4,0,1,1);
  --t-draw:.7s; --t-reveal:.5s; --t-fast:.16s; --t-micro:.12s;

  --font-ui:'Martian Grotesk',ui-sans-serif,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-num:'Martian Grotesk',ui-monospace,'SF Mono','Cascadia Mono',Menlo,monospace;
  font-synthesis:none;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--txt);
  font-family:var(--font-ui); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"case" 1}
.muted{color:var(--txt-2)}
.eyebrow{font:600 11px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}

/* ── TOPBAR ───────────────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:10;height:52px;display:flex;align-items:center;gap:var(--s4);
  padding:0 22px;background:var(--surface-3);border-bottom:1px solid var(--line-strong);
}
.topbar .spacer{flex:1}
.brand{display:flex;align-items:center;gap:10px;font:560 15px var(--font-ui);letter-spacing:-.01em}
.brand-mark{width:22px;height:22px;border-radius:var(--r-chip);background:var(--accent-dim);
  color:var(--accent);display:grid;place-items:center;font:700 13px var(--font-num)}
.fresh{font:400 12px var(--font-num);color:var(--txt-2);font-variant-numeric:tabular-nums}
.fresh b{color:var(--accent);font-weight:500}
.ghost{background:transparent;border:1px solid var(--line-strong);color:var(--txt-2);
  border-radius:var(--r-chip);padding:8px 12px;font:480 12px var(--font-ui);cursor:pointer;
  transition:background .12s linear,color .12s linear}
.ghost:hover{background:var(--surface-2);color:var(--txt)}
.ghost:focus-visible,.back:focus-visible,.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-dim)}

/* ── PAGE ─────────────────────────────────────────────────────────────── */
.wrap{max-width:1080px;margin:0 auto;padding:var(--s6) var(--s6) var(--s7)}
.section-h{display:flex;align-items:baseline;gap:12px;margin:0 0 var(--s4)}
.section-h .eyebrow{margin:0}

/* ── TEAM LEDGER ──────────────────────────────────────────────────────── */
.team-wrap{position:relative}
.team-panel{border:1px solid var(--line-strong);border-radius:var(--r-panel);overflow:hidden;
  background:var(--surface-1)}
.rep{
  display:grid;
  grid-template-columns:36px 3px 1fr 104px 96px 144px 144px 16px;
  align-items:center;gap:var(--s4);
  padding:16px 24px;background:var(--surface-1);border-bottom:1px solid var(--line);
  cursor:pointer;transition:background .12s linear;position:relative;
}
.rep:last-child{border-bottom:0}
.rep:hover{background:var(--surface-2)}
.rep:hover .chev{color:var(--txt-2);transform:translateX(2px)}
.rep:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--accent-line)}
.rep.lead{background:linear-gradient(90deg,var(--accent-dim),transparent 22%)}
.rep.lead:hover{background:linear-gradient(90deg,var(--accent-dim),var(--surface-2) 22%)}
.rep .rank{font:500 13px var(--font-num);color:var(--txt-2);font-variant-numeric:tabular-nums;text-align:center}
.rep.lead .rank{color:var(--accent)}

.spine{width:3px;height:38px;border-radius:0;justify-self:center}
.spine.excellent{background:var(--g-excellent);box-shadow:0 0 10px var(--g-excellent-wash)}
.spine.good{background:var(--g-good);box-shadow:0 0 10px var(--g-good-wash)}
.spine.average{background:var(--g-average);box-shadow:0 0 10px var(--g-average-wash)}
.spine.poor{background:var(--g-poor);box-shadow:0 0 10px var(--g-poor-wash)}
.spine.critical{background:var(--g-critical);box-shadow:0 0 10px var(--g-critical-wash);
  animation:alarm 4s ease-in-out infinite}
.spine.none{background:var(--g-none);box-shadow:none}
@keyframes alarm{0%,90%,100%{box-shadow:0 0 10px var(--g-critical-wash)}95%{box-shadow:0 0 16px var(--g-critical)}}

.rep .id{min-width:0}
.rep .name{font:560 15px var(--font-ui);letter-spacing:-.01em;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep .grade-word{font:600 10px/1 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;margin-top:5px}
.gw-excellent{color:var(--g-excellent)} .gw-good{color:var(--g-good)} .gw-average{color:var(--g-average)}
.gw-poor{color:var(--g-poor)} .gw-critical{color:var(--g-critical)} .gw-none{color:var(--txt-3)}

.score{font:500 40px/1 var(--font-num);letter-spacing:-.02em;color:var(--txt-num);
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.score .n{display:inline-block;min-width:1.7ch;text-align:right}
.score .u{font-size:12px;color:var(--txt-2);margin-left:2px}
.score.none{color:var(--txt-3);font-size:26px}

svg.spark-row{width:88px;height:20px;display:block}
.spark-na{color:var(--txt-2);font-size:11px}
.rep .money{font:500 14px var(--font-num);color:var(--txt);font-variant-numeric:tabular-nums;text-align:right}
.rep .money .x{display:block;font:400 11px var(--font-ui);color:var(--txt-2);letter-spacing:.02em;
  text-transform:none;margin-top:3px}
.chev{color:var(--txt-3);font-size:15px;transition:color .14s var(--ease-snap),transform .14s var(--ease-snap);justify-self:center}

/* ── TEAM AGGREGATE BAND (composes the lower view + carries the accent) ── */
.agg{margin-top:var(--s4);border:1px solid var(--line-strong);border-radius:var(--r-panel);
  background:var(--surface-1);padding:var(--s5) var(--s5) var(--s4)}
.agg .aeyebrow{font:600 11px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);margin-bottom:var(--s4)}
.agg .arow{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s4)}
.agg .astat{display:flex;flex-direction:column;gap:6px}
.agg .al{font:480 11px var(--font-ui);color:var(--txt-2)}
.agg .av{font:540 22px/1 var(--font-num);color:var(--txt-num);font-variant-numeric:tabular-nums;white-space:nowrap}
.agg .av.accent{color:var(--accent)}

/* ── FUNNEL (team on overview + per-manager in detail) ── */
.funnel-card{margin-top:var(--s4);border:1px solid var(--line-strong);border-radius:var(--r-panel);
  background:var(--surface-1);padding:var(--s5)}
.funnel-card .eyebrow{display:block;margin-bottom:var(--s4)}
.fstages{display:flex;flex-direction:column;gap:7px}
.fstage{display:grid;grid-template-columns:150px 1fr 72px 48px;align-items:center;gap:var(--s4)}
.fstage .fl{font:480 13px var(--font-ui);color:var(--txt-2)}
.fstage .fl[data-tip]{text-decoration:underline dotted var(--txt-3);text-underline-offset:3px;text-decoration-thickness:1px;cursor:help}
.fconv{font:480 12px var(--font-num);color:var(--txt-3);text-align:right;font-variant-numeric:tabular-nums}
.fstage:hover .fconv{color:var(--txt-2)}
.fstage:hover .ffill{filter:brightness(1.12)}
.fstage .ftrack{height:8px;background:var(--surface-inset);box-shadow:inset 0 0 0 1px var(--line-faint);
  border-radius:2px;overflow:hidden}
.fstage .ffill{height:100%;background:var(--accent-line);border-radius:2px;transition:width .7s var(--ease-data)}
.fstage .ffill.paid{background:var(--accent)}
.fstage .fv{font:500 14px var(--font-num);color:var(--txt);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:640px){.fstage{grid-template-columns:84px 1fr 44px 34px;gap:var(--s3)}.fstage .fl{font-size:12px}}

.empty,.loading{color:var(--txt-2);padding:var(--s6);text-align:center;font-size:13px}
.split-none{padding:9px 20px;font:600 10px var(--font-ui);letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-3);background:var(--surface-inset);border-bottom:1px solid var(--line)}

/* ── SLIDE-OVER ───────────────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;background:var(--scrim);display:none;z-index:50;opacity:0;
  transition:opacity .2s var(--ease-snap)}
.overlay.open{display:block;opacity:1}
.panel{position:fixed;top:0;right:0;height:100%;width:min(720px,94vw);background:var(--bg);
  border-left:1px solid var(--line-strong);overflow:auto;transform:translateX(100%);
  transition:transform .28s var(--ease-snap);z-index:51}
.panel.open{transform:translateX(0)}
.panel-h{position:sticky;top:0;height:64px;background:var(--surface-3);
  border-bottom:1px solid var(--line-strong);display:flex;align-items:center;gap:var(--s3);padding:0 28px;z-index:2}
.panel-h .back{background:none;border:0;color:var(--txt-2);font-size:20px;cursor:pointer;line-height:1;
  min-width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-chip);margin-left:-8px;
  transition:background .12s linear,color .12s linear}
.panel-h .back:hover{background:var(--surface-2);color:var(--txt)}
.panel-h .pspine{width:3px;height:30px}
.panel-h .pname{font:600 17px var(--font-ui);letter-spacing:-.01em}
.panel-h .pmeta{font:400 12px var(--font-num);color:var(--txt-2)}
.panel-h .spacer{flex:1}

.panel-b{padding:0}
.blk{padding:var(--s5) 28px;border-top:1px solid var(--line)}
.blk:first-child{border-top:0}
.blk>.eyebrow{display:block;margin-bottom:var(--s4)}

.stat-strip{display:grid;grid-template-columns:repeat(6,1fr);padding:0!important;border-top:0}
.stat{padding:16px 14px;border-right:1px solid var(--line);border-top:1px solid var(--line)}
.stat:nth-child(-n+6){border-top:0}
.stat:last-child{border-right:0}
.stat .l{font:480 10px var(--font-ui);color:var(--txt-2);letter-spacing:.01em}
.stat .v{font:540 26px/1 var(--font-num);color:var(--txt-num);font-variant-numeric:tabular-nums;margin-top:7px}
.stat .v.sm{font-size:18px}

.chart-mount{position:relative}
svg.chart{display:block;width:100%}
.eqbig{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:end}
.eqbig .col{display:flex;flex-direction:column;align-items:center;gap:8px}
.eqbig .bar{width:100%;max-width:48px;background:var(--surface-inset);box-shadow:inset 0 0 0 1px var(--line);
  height:90px;display:flex;align-items:flex-end;border-radius:2px;overflow:hidden;margin:0 auto}
.eqbig .bar i{width:100%;background:var(--accent-line);transition:height .6s var(--ease-data)}
.eqbig .bar.empty{background-image:repeating-linear-gradient(45deg,var(--line-faint) 0 4px,transparent 4px 9px)}
.eqbig .cap{font:480 11px var(--font-ui);color:var(--txt-2)}
.eqbig .val{font:540 16px var(--font-num);color:var(--txt);font-variant-numeric:tabular-nums}

.sergey{padding:20px 22px;background:var(--surface-1);border-left:2px solid var(--accent-line);border-radius:0 var(--r-chip) var(--r-chip) 0}
.sergey .hdr{font:600 11px var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.sergey .body{font:400 14px/1.55 var(--font-ui);color:var(--txt);white-space:pre-wrap;max-width:62ch}

.calls-dist{font:400 12px var(--font-num);color:var(--txt-2);margin-bottom:12px;font-variant-numeric:tabular-nums}
.calls{background:var(--surface-inset);border:1px solid var(--line);border-radius:var(--r-panel);
  max-height:360px;overflow:auto}
.call{display:grid;grid-template-columns:30px 60px 1fr;gap:var(--s3);align-items:center;
  padding:9px 14px;border-bottom:1px solid var(--line-faint)}
.call:last-child{border-bottom:0}
.call .chip{width:28px;height:28px;border-radius:var(--r-chip);text-align:center;
  font:600 13px/28px var(--font-num);font-variant-numeric:tabular-nums}
.chip.hi{color:var(--g-excellent);background:var(--g-excellent-wash)}
.chip.mid{color:var(--g-average);background:var(--g-average-wash)}
.chip.lo{color:var(--g-critical);background:var(--g-critical-wash)}
.call .date{font:400 12px var(--font-num);color:var(--txt-2)}
.call .sum{color:var(--txt-2);font-size:13px;line-height:1.4}

/* ── INTERACTIVE CHART (createChart) ─────────────────────────────────────── */
.c-ytick{fill:var(--txt-3);font:400 10px var(--font-num)}
.c-xtick{fill:var(--txt-3);font:400 9px var(--font-num)}
.c-line{animation:c-draw var(--t-draw) var(--ease-data) forwards}
.c-area{opacity:0;animation:c-fade .5s var(--ease-data) .25s forwards}
@keyframes c-draw{to{stroke-dashoffset:0}}
@keyframes c-fade{to{opacity:1}}
.c-hover{transition:opacity .12s linear;pointer-events:none}
.c-focus{filter:drop-shadow(0 0 4px var(--accent-dim))}
.c-bub-bg{fill:var(--surface-3);stroke:var(--line-strong);stroke-width:1}
.c-bub-v{fill:var(--txt-num);font:540 13px var(--font-num);font-variant-numeric:tabular-nums;text-anchor:middle}
.c-bub-d{fill:var(--txt-3);font:400 10px var(--font-num);text-anchor:middle}
.chart-empty{color:var(--txt-3);font-size:12px;padding:30px 0;text-align:center}
.chart:hover ~ * .spark,.rep:hover .spark-row path{filter:brightness(1.18)}
/* forecast overlay (money chart) */
.fc-now-l{font:9px var(--font-num);fill:var(--txt-3)}
.fc-now,.fc-plan,.fc-dot,.fc-line{opacity:0;animation:c-fade .4s var(--ease-data) .95s forwards}
.fc-line{opacity:.7;animation-name:c-fade}
.fc-readout{display:flex;align-items:baseline;gap:10px;margin-top:10px;font:480 13px var(--font-ui);
  opacity:0;animation:c-fade .4s var(--ease-data) 1.15s forwards}
.fc-readout[data-tip]{cursor:help}
.fc-arrow{font-size:15px;line-height:1}
.fc-arrow.up{color:var(--g-excellent)} .fc-arrow.flat{color:var(--txt-2);transform:rotate(45deg);display:inline-block}
.fc-proj{color:var(--txt-2);font-family:var(--font-num);font-variant-numeric:tabular-nums}
.fc-proj b{color:var(--txt-num);font-weight:540}
.fc-pct{font-family:var(--font-num);font-weight:540}
.fc-pct.ok{color:var(--accent)} .fc-pct.warn{color:var(--g-poor)} .fc-pct.bad{color:var(--g-critical)}

/* ── LOGIN ────────────────────────────────────────────────────────────── */
.login-page{display:grid;place-items:center;min-height:100vh;background:var(--bg);
  background-image:radial-gradient(900px 500px at 50% -10%,rgba(52,224,161,.05),transparent 70%)}
.login-card{background:var(--surface-1);border:1px solid var(--line-strong);border-radius:var(--r-panel);
  padding:var(--s6);width:340px;display:flex;flex-direction:column;gap:14px}
.login-card .brand{margin-bottom:2px}
.login-sub{color:var(--txt-2);margin:-4px 0 8px;font-size:13px}
.login-card label{display:flex;flex-direction:column;gap:6px;font:480 12px var(--font-ui);color:var(--txt-2)}
.login-card input{background:var(--surface-inset);border:1px solid var(--line);border-radius:var(--r-chip);
  padding:11px 12px;color:var(--txt);font:400 15px var(--font-ui)}
.login-card input:focus-visible{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-dim)}
.btn{background:var(--accent);color:var(--accent-ink);font:600 15px var(--font-ui);border:0;border-radius:var(--r-chip);
  padding:12px;cursor:pointer;transition:background .12s linear}
.btn:hover{background:var(--accent-hi)}
.login-error{color:var(--g-critical);font-size:13px;min-height:16px}

/* ── MOTION GUARDS ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .section-h,.team-panel,.agg,.funnel-card,.blk{transform:none!important;opacity:1!important}
  .c-line{stroke-dashoffset:0!important;animation:none!important}
  .c-area,.fc-now,.fc-plan,.fc-dot,.fc-line,.fc-readout{opacity:1!important;animation:none!important}
  .skel::after{animation:none!important;display:none}
  .panel{transition:opacity .15s linear!important}
  .spine.critical{animation:none!important;box-shadow:0 0 16px var(--g-critical)!important}
  #tip{transition:opacity .12s linear!important;transform:none!important}
  .rep:hover .chev{transform:none!important}
}

/* ── RESPONSIVE (≤640px) ──────────────────────────────────────────────── */
@media (max-width:640px){
  .wrap{padding:var(--s5) var(--s4) var(--s6)}
  .topbar{padding:0 14px;gap:var(--s3)}
  .topbar .fresh{display:none}
  .rep{grid-template-columns:26px 3px 1fr auto 14px;grid-auto-rows:auto;gap:8px 12px;
    padding:14px;min-height:56px}
  .rep .spark-row-wrap{grid-column:3/5;order:5}
  .rep .money{grid-column:3;order:6;text-align:left}
  .rep .money:last-of-type{grid-column:4;text-align:right}
  .rep .score{font-size:32px;grid-column:4;order:3}
  .rep .chev{grid-row:1;grid-column:5}
  .agg .arow{grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s5)}
  .stat-strip{grid-template-columns:repeat(3,1fr)}
  .stat:nth-child(3){border-right:0}
  .stat:nth-child(n+4){border-top:1px solid var(--line)}
  .stat:nth-child(6){border-right:0}
  .panel-h{padding:0 16px}
  .blk{padding:var(--s4) 16px}
}

/* ── TOOLTIP (shared floater for [data-tip]) ──────────────────────────────── */
[data-tip]:not(.fl):not(.rep):not(.fc-readout):not(.spark-row){border-radius:2px}
.score .u[data-tip],.grade-word[data-tip],.money span[data-tip],.stat .l[data-tip],.eqbig .cap[data-tip],.agg .al[data-tip]{
  cursor:help}
[data-tip]:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-dim);border-radius:3px}
#tip{position:fixed;z-index:80;max-width:248px;pointer-events:none;
  background:var(--surface-3);color:var(--txt);border:1px solid var(--line-strong);
  border-radius:var(--r-chip);padding:9px 11px;font:480 12px/1.45 var(--font-ui);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  opacity:0;transform:translateY(2px);
  transition:opacity .14s var(--ease-snap),transform .14s var(--ease-snap)}
#tip.show{opacity:1;transform:none}
#tip.hide{transition:opacity 60ms var(--ease-exit)}

/* ── SKELETON LOADERS ─────────────────────────────────────────────────────── */
.skel{position:relative;overflow:hidden;background:var(--surface-2);border-radius:3px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent);
  animation:shimmer 1.4s var(--ease-data) infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.skel-rep{cursor:default;pointer-events:none}
.skel-rep:nth-child(2) .skel::after{animation-delay:.12s}
.skel-rep:nth-child(3) .skel::after{animation-delay:.24s}
.skel-rep:nth-child(4) .skel::after{animation-delay:.36s}

/* ── EMPTY / ERROR STATES ─────────────────────────────────────────────────── */
.state-empty,.state-err{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:48px var(--s5);text-align:center}
.state-t{font:540 14px var(--font-ui);color:var(--txt-2)}
.state-s{font:400 12px var(--font-ui);color:var(--txt-3)}
.state-err .state-glyph{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  color:var(--g-poor);border:1px solid var(--g-poor);font:600 16px var(--font-num);margin-bottom:4px}
.state-err .ghost{margin-top:6px}

/* ── LOAD CHOREOGRAPHY (one quiet fade, no stagger-cascade) ───────────────── */
.section-h,.team-panel,.agg,.funnel-card{opacity:0;transform:translateY(8px)}
.lit{opacity:1;transform:none;
  transition:opacity var(--t-reveal) var(--ease-data),transform var(--t-reveal) var(--ease-data)}

/* ── EXIT (faster than enter) ─────────────────────────────────────────────── */
.panel.closing{transition:transform .2s var(--ease-exit)}
.overlay.closing{transition:opacity .16s var(--ease-exit)}

/* ── HOVER MICRO-DETAILS ──────────────────────────────────────────────────── */
.rep:hover .spark-row path{filter:brightness(1.18);transition:filter var(--t-fast) var(--ease-data)}
.ghost:active,.btn:active,.back:active{transform:scale(.97);transition:transform .08s var(--ease-snap)}