/* ============================================================
   REACH — design system  (reach-ui.css)
   Whop-style: near-black surfaces, low contrast, blue accent.
   Theme-aware from the start: light = :root default, dark =
   [data-theme="dark"] (genuine near-black). Reusable component
   layer: tokens · card · tile · toggle-row · switch · tabs.
   Keeps the legacy class vocabulary (.glass/.btn/.row/.avatar/
   .popover/.sheet/#toast/.rc-*) so app.js-injected chrome works.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap');

/* ----------------------- TOKENS · LIGHT (default) ----------------------- */
:root{
  /* surfaces — soft grey app bg, white cards a hair above it */
  --bg:#f4f5f7; --bg-soft:#ecedf1;
  --surface:#ffffff; --surface-2:#f6f7f9; --surface-3:#eceef2;
  --border:#e5e8ee; --border-strong:#d6dae2;
  --flat:#f1f3f6;
  /* text */
  --ink:#0d0f14; --text:#0d0f14; --ink-soft:#39414f;
  --muted:#697282; --faint:#9aa2af;
  /* blue accent (the Whop highlight) */
  --accent:#2f6bff; --accent-press:#1f5af0; --accent-bright:#5b8cff;
  --accent-soft:rgba(47,107,255,.10); --accent-line:rgba(47,107,255,.34);
  --accent-ring:rgba(47,107,255,.40);
  /* semantic */
  --good:#15b86b; --bad:#e2473f; --warn:#e08a16; --live:#f0384b; --violet:#8b5cf6;
  --track:#d8dce4;                 /* switch off-track */
  /* shadows — soft & low on light */
  --shadow:0 1px 2px rgba(13,15,20,.04), 0 4px 16px rgba(13,15,20,.06);
  --shadow-pop:0 18px 50px -16px rgba(13,15,20,.24);
  /* radii / spacing / type */
  --r-card:18px; --r-pill:999px; --r-btn:12px; --r-row:12px;
  --pad:16px;
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* ---- legacy aliases so existing page CSS keeps resolving ---- */
  --glass:var(--surface); --glass2:var(--surface-2); --glass-rim:var(--border);
  --stroke:var(--border); --stroke-soft:var(--bg-soft); --line:var(--border);
  --blue:var(--accent); --blue-2:var(--accent-bright); --blue-hover:var(--accent-press);
  --blue-soft:var(--accent-soft); --blue-border:var(--accent-line);
  --approve:var(--good); --reject:var(--bad); --green:var(--good); --pearl:var(--ink-soft);
  --blur:saturate(1);
}

/* ----------------------- TOKENS · DARK (near-black) ----------------------- */
[data-theme="dark"]{
  --bg:#08080a; --bg-soft:#0e0f12;          /* genuinely near-black, not charcoal */
  --surface:#121317; --surface-2:#171922; --surface-3:#1d2029;  /* cards barely lighter */
  --border:#23252d; --border-strong:#30333d;                    /* very subtle borders */
  --flat:#0f1013;
  --ink:#f3f4f6; --text:#f3f4f6; --ink-soft:#c4c8d2;
  --muted:#8a90a0; --faint:#5d6373;
  --accent:#3d7bff; --accent-press:#5a90ff; --accent-bright:#6f9bff;
  --accent-soft:rgba(61,123,255,.15); --accent-line:rgba(61,123,255,.42);
  --accent-ring:rgba(61,123,255,.55);
  --good:#2ecc8f; --bad:#ff5f57; --warn:#f0b429; --live:#ff4d5e; --violet:#a78bfa;
  --track:#2a2d36;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.55);
  --shadow-pop:0 24px 60px -16px rgba(0,0,0,.75);
}

/* ----------------------- BASE ----------------------- */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--bg);min-height:100dvh;color:var(--text);
  font-family:var(--sans);font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  padding-top:env(safe-area-inset-top);
  transition:background .25s ease,color .25s ease}
/* near-black gets the faintest top glow for depth; light stays flat-clean */
[data-theme="dark"] body{background:
  radial-gradient(120% 60% at 50% -10%, rgba(61,123,255,.06), transparent 60%), var(--bg);}
button{font-family:inherit;border:0;background:none;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3{letter-spacing:-.02em}
::-webkit-scrollbar{width:0;height:0}
input,select,textarea{font-family:inherit;font-size:15px;width:100%;outline:none;
  background:var(--surface-2);color:var(--text);
  border:1px solid var(--border);border-radius:var(--r-btn);padding:12px 14px;
  transition:border-color .15s,box-shadow .15s}
input::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}

/* ----------------------- APP FRAME ----------------------- */
.ric{display:inline-flex;align-items:center;justify-content:center;vertical-align:-0.15em;flex:none}
/* Logo: the mark is BLACK (great on light surfaces) but would vanish on the near-black dark theme
   (--bg:#08080a). In dark mode, swap every logo <img> to the white/inverted variant. `content:` on
   an <img> replaces the rendered raster, so no per-page markup change is needed. */
[data-theme="dark"] img[src^="/logo.png"],
[data-theme="dark"] img[src^="logo.png"]{content:url(/logo-white.png?v=lg1)}
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad) 12px;max-width:1180px;margin:0 auto}
.topbar h1{font-size:25px;font-weight:800}
.topbar .sub{font-family:var(--mono);font-size:12px;color:var(--faint);margin-left:10px}
.topbar-right{display:flex;gap:10px;align-items:center}
main{max-width:1180px;margin:0 auto;padding:0 var(--pad) 90px}

/* pill nav with active-blue tab */
.nav{display:flex;gap:4px;padding:5px;margin:0 auto 20px;max-width:fit-content;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
.nav a{padding:9px 18px;border-radius:10px;font-size:14px;font-weight:600;color:var(--muted);
  transition:color .12s,background .12s}
.nav a:hover{color:var(--text)}
.nav a.active{background:var(--accent);color:#fff}

/* generic pill surface (chips, etc.) */
.glass-pill{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-pill);box-shadow:var(--shadow)}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;font-size:13px;font-weight:700}
.dot{width:8px;height:8px;border-radius:50%;background:var(--live);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--surface-2);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;color:var(--accent);cursor:pointer;overflow:hidden}

/* ----------------------- SURFACES ----------------------- */
.glass,.ui-card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);box-shadow:var(--shadow)}
.flat{background:var(--flat);border:1px solid var(--border);border-radius:var(--r-card)}
.ui-card.pad{padding:18px}
.ui-card.flush{overflow:hidden}                  /* for row lists flush to the edge */
/* selected card → blue ring */
.ui-card.is-selected{border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft)}

/* section grouping (Account / Notifications / …) */
.ui-section{margin-bottom:24px}
.ui-section>.sec-h{display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin:0 4px 10px}
.ui-section>.sec-h .sec-ic{color:var(--faint)}
.kicker{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}

/* ----------------------- STAT TILE ----------------------- */
/* small muted UPPERCASE label above, BIG bold number below */
.ui-tile,.tile{display:flex;flex-direction:column;gap:9px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.ui-tile .lab,.tile .lab{font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.ui-tile .num,.tile .num{font-size:32px;font-weight:800;letter-spacing:-.025em;line-height:1;
  font-variant-numeric:tabular-nums}
.ui-tile .num.accent{color:var(--accent)} .ui-tile .num.good{color:var(--good)} .ui-tile .num.bad{color:var(--bad)}
.ui-tile .sub,.tile .sub{font-size:12.5px;color:var(--faint)}
.ui-tile a,.tile a{color:var(--accent);font-weight:700}
/* legacy tile inner structure (.v big number / .l label) — used by analytics & older pages */
.tile .v{font-size:30px;font-weight:800;letter-spacing:-.025em;line-height:1.05;font-variant-numeric:tabular-nums}
.tile .v.good{color:var(--good)} .tile .v.warn{color:var(--ink-soft)} .tile .v.bad{color:var(--bad)} .tile .v.accent{color:var(--accent)}
.tile .l{font-size:12.5px;color:var(--muted);margin-top:4px}

/* ----------------------- TOGGLE ROW ----------------------- */
/* icon left · bold title + muted description · control right */
.ui-rows{display:flex;flex-direction:column}
.ui-row{display:flex;align-items:center;gap:14px;padding:16px 18px;
  border-bottom:1px solid var(--border);width:100%;text-align:left;color:inherit}
.ui-row:last-child{border-bottom:0}
.ui-row .ic{width:38px;height:38px;border-radius:11px;flex:none;
  background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:18px}
.ui-row .ic.neutral{background:var(--surface-3);color:var(--ink-soft)}
.ui-row .txt{flex:1;min-width:0}
.ui-row .txt b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
.ui-row .txt span{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.4}
.ui-row .ctl{flex:none;display:flex;align-items:center;gap:10px}
.ui-row .val{font-size:13px;font-weight:600;color:var(--muted)}
.ui-row .chev{color:var(--faint);font-size:18px;font-weight:600}
a.ui-row,.ui-row.is-link{cursor:pointer;transition:background .12s}
a.ui-row:hover,.ui-row.is-link:hover{background:var(--surface-2)}

/* iOS-style switch, blue when on */
.ui-switch{position:relative;display:inline-block;width:46px;height:27px;flex:none}
.ui-switch input{position:absolute;opacity:0;width:0;height:0}
.ui-switch .slider{position:absolute;inset:0;background:var(--track);border-radius:999px;
  cursor:pointer;transition:background .2s}
.ui-switch .slider::before{content:"";position:absolute;height:21px;width:21px;left:3px;top:3px;
  background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s}
.ui-switch input:checked+.slider{background:var(--accent)}
.ui-switch input:checked+.slider::before{transform:translateX(19px)}
.ui-switch input:focus-visible+.slider{box-shadow:0 0 0 3px var(--accent-ring)}

/* small inline radio-pill segmented control (e.g. theme choice) */
.ui-seg{display:inline-flex;gap:4px;padding:4px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:11px}
.ui-seg button{padding:7px 14px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--muted)}
.ui-seg button.active{background:var(--accent);color:#fff}

/* ----------------------- TABS w/ COUNT BADGES ----------------------- */
.ui-tabs{display:flex;gap:4px;padding:5px;width:fit-content;max-width:100%;overflow-x:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow);margin-bottom:20px}
.ui-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;
  font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap;transition:color .12s,background .12s}
.ui-tab:hover{color:var(--text)}
.ui-tab.active{background:var(--accent);color:#fff}
.ui-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:999px;font-size:11px;font-weight:800;
  background:var(--surface-3);color:var(--muted);font-variant-numeric:tabular-nums}
.ui-tab.active .ui-badge{background:rgba(255,255,255,.24);color:#fff}

/* ----------------------- BUTTONS ----------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:var(--r-btn);font-size:14.5px;font-weight:700;color:var(--text);
  background:var(--surface-2);border:1px solid var(--border);transition:transform .08s,background .12s,border-color .12s}
.btn:hover{border-color:var(--border-strong)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:#fff;border:0}
.btn-primary:hover{background:var(--accent-press)}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--muted)}
.btn-ghost:hover{color:var(--text)}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:10px}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ----------------------- LIST ROWS (recent clips etc.) ----------------------- */
.rows{overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:13px 16px;width:100%;text-align:left;
  border-bottom:1px solid var(--border);font-size:15px;color:inherit;transition:background .12s}
.row:last-child{border-bottom:0}
.row:hover{background:var(--surface-2)}
.row .thumb{width:46px;height:60px;border-radius:10px;object-fit:cover;background:var(--surface-3);flex:none}
.row .ttl{flex:1;min-width:0}
.row .ttl b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .ttl span{font-size:12px;color:var(--muted);font-family:var(--mono)}
.status{font-size:10.5px;font-weight:800;letter-spacing:.06em;padding:4px 10px;
  border-radius:var(--r-pill);text-transform:uppercase;flex:none}
.status.pending{background:var(--surface-3);color:var(--muted)}
.status.approved{background:rgba(21,184,107,.14);color:var(--good)}
.status.rejected{background:rgba(226,71,63,.14);color:var(--bad)}
.score{font-family:var(--mono);font-weight:700;font-size:13px}
.score.hi{color:var(--good)} .score.mid{color:var(--ink-soft)} .score.lo{color:var(--bad)}

/* ----------------------- GRIDS ----------------------- */
.grid{display:grid;gap:12px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.cols-3,.cols-2{grid-template-columns:1fr}}

/* ----------------------- TOAST / SHEET / POPOVER / MODAL ----------------------- */
/* toast inverts against the theme (dark pill on light, light pill on dark) */
#toast{position:fixed;top:calc(16px + env(safe-area-inset-top));left:50%;
  transform:translate(-50%,-180%);z-index:60;transition:transform .25s;
  background:var(--text);color:var(--bg);border-radius:var(--r-pill);
  padding:11px 22px;font-size:14px;font-weight:700;box-shadow:var(--shadow-pop)}
#toast.show{transform:translate(-50%,0)}
.veil{position:fixed;inset:0;background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
.veil.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:50%;transform:translate(-50%,108%);bottom:10px;z-index:41;
  width:calc(100% - 20px);max-width:560px;background:var(--surface);
  border:1px solid var(--border);border-radius:24px;
  padding:10px var(--pad) calc(18px + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-pop);transition:transform .28s cubic-bezier(.32,.72,.27,1);
  max-height:84dvh;overflow-y:auto}
.sheet.open{transform:translate(-50%,0)}
.sheet .grab{width:38px;height:5px;border-radius:3px;background:var(--border-strong);margin:2px auto 14px}
.sheet h3{font-size:20px;font-weight:800;margin-bottom:4px}
.sheet .sub{font-size:13px;color:var(--muted);margin-bottom:14px}
.popover{position:absolute;top:calc(100% + 8px);right:0;z-index:45;min-width:230px;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow-pop);padding:6px;display:none}
.popover.open{display:block}
.popover a,.popover button{display:flex;width:100%;align-items:center;gap:11px;
  padding:12px 13px;border-radius:10px;font-size:14.5px;font-weight:600;text-align:left;color:var(--text)}
.popover a:hover,.popover button:hover{background:var(--surface-2)}
.popover .sep{height:1px;background:var(--border);margin:5px 8px}

/* ----------------------- EMPTY STATE ----------------------- */
.empty{margin:12vh auto 0;max-width:320px;text-align:center}
.empty .glyph{font-size:50px;margin-bottom:12px}
.empty h2{font-size:20px;font-weight:800;margin-bottom:7px}
.empty p{font-size:14px;color:var(--muted);line-height:1.5}

/* ----------------------- PROFILE / SETTINGS MODAL & FIELDS (rc-*) ----------------------- */
.rc-danger{color:var(--bad)!important}
.rc-modal-bg{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:20px}
.rc-modal{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);box-shadow:var(--shadow-pop);padding:22px 22px 18px;color:var(--text)}
.rc-modal h3{margin:0 0 4px;font-size:19px}
.rc-modal .rc-sub{margin:0 0 16px;color:var(--muted);font-size:14px}
.rc-field{margin-bottom:14px}
.rc-field>label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-bottom:6px}
.rc-hint{font-size:12px;color:var(--faint);margin-top:5px}
.rc-msg{font-size:13px;color:var(--good);min-height:16px;margin-top:8px;text-align:right}
.rc-row{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.rc-btn{padding:11px 18px;border-radius:var(--r-btn);border:0;background:var(--accent);color:#fff;font-weight:700;font-size:14px;cursor:pointer}
.rc-btn:hover{background:var(--accent-press)}
.rc-btn-ghost{padding:11px 16px;border-radius:var(--r-btn);border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:600;font-size:14px;cursor:pointer}
.rc-btn-ghost:hover{background:var(--surface-2)}
.rc-btn-danger{padding:11px 18px;border-radius:var(--r-btn);border:0;background:var(--bad);color:#fff;font-weight:700;font-size:14px;cursor:pointer}
.rc-btn-danger:hover{filter:brightness(.94)}
.rc-avrow{display:flex;align-items:center;gap:14px}
.rc-avbig{width:56px;height:56px;font-size:22px;flex:0 0 auto}
.rc-switch{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-soft);cursor:pointer}
.rc-switch input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}

/* page-load reveal — one calm staggered fade (respImotion-safe) */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.reveal{animation:rise .4s cubic-bezier(.22,.61,.36,1) both}
@media(prefers-reduced-motion:reduce){.reveal{animation:none}}
.back{display:inline-block;margin-bottom:16px;color:var(--accent);font-size:13px;font-weight:600}
.back:hover{text-decoration:underline}

/* ----------------------- ACCOUNT DROPDOWN (Whop-style) ----------------------- */
.popover.acct{min-width:268px;padding:8px}
/* profile header: avatar + name + "View profile" + gear */
.popover.acct .acct-head{display:flex;align-items:center;gap:11px;padding:9px;border-radius:11px;width:100%;color:var(--text)}
.popover.acct .acct-head:hover{background:var(--surface-2)}
.popover.acct .acct-av{width:40px;height:40px;font-size:16px;flex:none}
.popover.acct .acct-id{flex:1;min-width:0}
.popover.acct .acct-id b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.popover.acct .acct-id span{font-size:12.5px;color:var(--muted)}
.popover.acct .acct-gear{width:32px;height:32px;border-radius:9px;flex:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--muted)}
.popover.acct .acct-gear:hover{background:var(--surface-3);color:var(--text)}
/* line-icon menu items + BLUE hover */
.popover.acct>button{gap:12px;color:var(--text)}
.popover.acct svg{width:18px;height:18px;flex:none}
.popover.acct>button svg{color:var(--muted);transition:color .12s}
.popover.acct>button:hover{background:var(--accent-soft)}
.popover.acct>button:hover svg{color:var(--accent)}
.popover.acct .rc-danger svg,.popover.acct .rc-danger:hover svg{color:var(--bad)}
.popover.acct .rc-danger:hover{background:rgba(255,95,87,.12)}
/* theme switcher — System / Light / Dark */
.theme-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;margin:2px 4px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:11px}
.theme-switch button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;
  border-radius:8px;font-size:11px;font-weight:600;color:var(--muted);transition:background .12s,color .12s}
.theme-switch button svg{width:17px;height:17px}
.theme-switch button:hover{color:var(--text);background:var(--surface-3)}
.theme-switch button.active{background:var(--accent);color:#fff}

/* ----------------------- SETTINGS SHELL (left rail + content) ----------------------- */
.set-shell{display:grid;grid-template-columns:236px 1fr;gap:26px;max-width:1080px;
  margin:6px auto 80px;padding:0 var(--pad);align-items:start}
.set-rail{position:sticky;top:8px;display:flex;flex-direction:column;gap:2px}
.set-navi{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  font-size:14px;font-weight:600;color:var(--muted);transition:background .12s,color .12s}
.set-navi svg{width:18px;height:18px;flex:none;color:var(--faint);transition:color .12s}
.set-navi:hover{background:var(--surface-2);color:var(--text)}
.set-navi:hover svg{color:var(--muted)}
.set-navi.active{background:var(--accent-soft);color:var(--accent)}
.set-navi.active svg{color:var(--accent)}
.set-content{min-width:0;animation:rise .35s cubic-bezier(.22,.61,.36,1) both}
.set-content .set-h{font-size:21px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.set-content .set-d{font-size:13.5px;color:var(--muted);margin-bottom:18px}
@media(max-width:760px){
  .set-shell{grid-template-columns:1fr;gap:14px}
  .set-rail{position:static;flex-direction:row;gap:6px;overflow-x:auto;padding-bottom:4px;
    margin:0 calc(-1 * var(--pad));padding-left:var(--pad);padding-right:var(--pad)}
  .set-navi{flex:none;background:var(--surface);border:1px solid var(--border)}
  .set-navi span{white-space:nowrap}
  .set-navi.active{border-color:var(--accent-line)}
}