/* ===========================================================================
   Settings (#/settings/<tab>) — js/view-settings.js. Every class here is st-.
   Shared components (.card, .btn, .seg, .switch-row, .chk…) are used as they
   are; the few places that size one down do it only under an st- ancestor.

   Colour: each tab and tile carries a hue (the .hued scope from console.css
   gives --h-c/--h-strong/--h-tint/--h-ink), and status tones are hues too —
   ok 150, warn 62, err 22, off = a near-grey — so white-on-strong and
   ink-on-tint keep their contrast in both themes without a second dark block.
   =========================================================================== */

/* ------------------------------------------------------------ layout ------ */
.st-wrap { container: st / inline-size; min-width: 0; }
.st-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.st-panel { min-width: 0; }
.st-panel.is-in { animation: stIn .24s var(--ease-out); }
@keyframes stIn { from { opacity: 0; transform: translateY(6px); } }

/* The rail: a strip of pills by default (phones, narrow views, and any browser
   without container queries), a sticky sidebar when the view has room. */
.st-rail { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -2px -16px 0; padding: 2px 16px 4px; scroll-padding-inline: 16px; }
.st-rail::-webkit-scrollbar { display: none; }
.st-rail-link {
  position: relative; display: flex; align-items: center; gap: 9px; flex: none; min-height: 40px; padding: 4px 14px 4px 5px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink2); text-decoration: none;
  font-family: var(--font-display); font-weight: 500; font-size: 14px; white-space: nowrap;
  transition: background var(--dur), border-color var(--dur), color var(--dur), box-shadow var(--dur);
}
.st-rail-link:hover { color: var(--ink); border-color: var(--line-strong); }
.st-rail-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--h-tint); color: var(--h-ink); transition: background var(--dur), color var(--dur); }
.st-rail-ic .material-symbols-rounded { font-size: 18px; }
.st-rail-text { display: flex; flex-direction: column; min-width: 0; }
.st-rail-sub { display: none; }
.st-rail-link.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.st-rail-link.is-on .st-rail-ic { background: var(--h-strong); color: #fff; }
.st-rail-link.is-on .st-rail-ic .material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

@container st (min-width: 860px) {
  .st-layout { grid-template-columns: 224px minmax(0, 1fr); gap: 26px; }
  .st-rail { position: sticky; top: calc(var(--topbar-h) + 18px); flex-direction: column; gap: 3px; overflow: visible; margin: 0; padding: 0; }
  .st-rail-link { gap: 11px; min-height: 0; padding: 9px 10px; border-radius: 14px; border-color: transparent; background: none; white-space: normal; }
  .st-rail-link:hover { background: color-mix(in srgb, var(--panel2) 80%, transparent); border-color: transparent; }
  .st-rail-ic { width: 38px; height: 38px; border-radius: 12px; }
  .st-rail-ic .material-symbols-rounded { font-size: 20px; }
  .st-rail-label { color: var(--ink); font-size: 14.5px; line-height: 1.25; }
  .st-rail-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-family: var(--font-body); font-weight: 400; font-size: 12.5px; line-height: 1.35; color: var(--ink2); }
  .st-rail-link.is-on { background: var(--panel); border-color: var(--line); color: var(--ink); box-shadow: var(--e1); }
  .st-rail-link.is-on::before { content: ""; position: absolute; left: -9px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--h-c); }
}

/* ------------------------------------------------------------ hero -------- */
/* The coloured band at the top of a tab. Tone classes pick a hue; is-accent
   follows Settings → accent instead. */
.st-hero {
  --st-c: var(--h-c); --st-fill: var(--h-strong); --st-ink: var(--h-ink); --st-tint: var(--h-tint); --st-on: #fff;
  overflow: hidden; isolation: isolate; padding: calc(var(--pad) + 6px);
  background: radial-gradient(130% 160% at 0% 0%, var(--st-tint) 0%, color-mix(in srgb, var(--st-tint) 45%, var(--panel)) 38%, var(--panel) 72%);
  border-color: color-mix(in srgb, var(--st-c) 24%, var(--line));
}
.st-hero::after {
  content: ""; position: absolute; z-index: -1; right: -90px; top: -130px; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--st-c) 20%, transparent), transparent 68%); pointer-events: none;
}
.st-hero.is-accent { --st-c: var(--accent); --st-fill: var(--accent-fill); --st-ink: var(--accent-ink); --st-tint: var(--accent-tint-strong); --st-on: var(--on-accent); }
.st-hero.is-ok { --hue: 150; }
.st-hero.is-warn { --hue: 62; }
.st-hero.is-err { --hue: 22; }
.st-hero.is-closed { --hue: 240; --cs: .28; }
.st-hero-main { display: flex; align-items: flex-start; gap: 18px 22px; flex-wrap: wrap; min-width: 0; }
.st-hero-ic {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; flex: none;
  background: var(--st-fill); color: var(--st-on); box-shadow: 0 10px 22px -12px var(--st-c), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.st-hero-ic .material-symbols-rounded { font-size: 32px; }
.st-hero-text { flex: 1 1 300px; min-width: 0; }
.st-hero-eyebrow { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--st-ink); }
.st-hero-title { margin-top: 3px; font-size: clamp(21px, .9vw + 15px, 27px); line-height: 1.2; letter-spacing: -.018em; overflow-wrap: anywhere; }
.st-hero-lede { margin-top: 6px; max-width: 64ch; color: var(--ink2); font-size: 14.5px; line-height: 1.5; }
.st-hero-side { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; }
.st-hero-chips { margin-top: 14px; }
.st-hero-foot { position: relative; margin-top: 20px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--st-c) 16%, var(--line)); }
.st-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* -------------------------------------------------------- appearance ------ */
.st-appear-hero .st-hero-foot { border-top: 0; padding-top: 0; }
.st-appear-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: center; }
.st-mock-wrap { min-width: 0; }
.st-choices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.st-choices li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 7px 10px;
  border-radius: 12px; background: color-mix(in srgb, var(--panel) 82%, transparent); border: 1px solid var(--line);
}
.st-choices li .material-symbols-rounded { grid-row: span 2; font-size: 18px; color: var(--st-ink); }
.st-choices li span { font-size: 11.5px; color: var(--ink2); }
.st-choices li b { font-family: var(--font-display); font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The miniature console (decorative; inert + aria-hidden). */
.st-mock { overflow: hidden; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--bg); box-shadow: var(--e3); font-size: 11px; user-select: none; }
.st-mock-bar { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; background: var(--panel); border-bottom: 1px solid var(--line); }
.st-mock-bar > i { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; }
.st-mock-bar > i:nth-child(2) { background: #febc2e; }
.st-mock-bar > i:nth-child(3) { background: #28c840; }
.st-mock-search { display: flex; align-items: center; gap: 4px; flex: 1; height: 18px; margin-left: 10px; padding: 0 8px; border-radius: 6px; background: var(--panel2); color: var(--ink2); font-size: 10px; }
.st-mock-search .material-symbols-rounded { font-size: 12px; }
.st-mock-body { display: grid; grid-template-columns: 94px minmax(0, 1fr); }
.st-mock-side { display: flex; flex-direction: column; gap: 3px; padding: 9px 6px; background: var(--panel); border-right: 1px solid var(--line); }
.st-mock-nav { display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 7px; color: var(--ink2); font-size: 10.5px; white-space: nowrap; overflow: hidden; }
.st-mock-nav .material-symbols-rounded { font-size: 13px; }
.st-mock-nav.is-on { background: var(--accent-tint); color: var(--accent-ink); font-weight: 500; }
.st-mock-main { display: flex; flex-direction: column; gap: calc(var(--gap) * .5); min-width: 0; padding: calc(var(--pad) * .5); }
.st-mock-head strong { display: block; font-family: var(--font-display); font-size: 13px; font-weight: 500; }
.st-mock-head span { color: var(--ink2); font-size: 10px; }
.st-mock-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.st-mock-kpi { display: flex; flex-direction: column; overflow: hidden; padding: calc(var(--pad) * .32) 8px 0; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); }
.st-mock-kpi > span { color: var(--ink2); font-size: 9.5px; }
.st-mock-kpi > b { font-family: var(--font-display); font-weight: 500; font-size: 16px; letter-spacing: -.02em; }
.st-mock-kpi .chart { margin: 2px -8px 0; }
.st-mock-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.st-mock-row .btn { min-height: 22px; padding: 0 8px; gap: 3px; border-radius: 7px; font-size: 10px; box-shadow: none; }
.st-mock-row .btn .material-symbols-rounded { font-size: 12px; margin: 0; }
.st-mock-row .chip { min-height: 18px; padding: 1px 7px; font-size: 9.5px; }
.st-mock-switch { position: relative; width: 26px; height: 15px; margin-left: auto; border-radius: 999px; background: var(--accent-fill); }
.st-mock-switch::before { content: ""; position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }

/* Theme tiles. The pictures use fixed light/dark paper so each tile shows its
   own theme whatever the console is in right now; the accent strip is live. */
.st-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.st-theme {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 8px 8px 12px;
  border-radius: 16px; border: 1px solid var(--line); background: var(--panel); color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--dur), box-shadow var(--dur), transform .08s;
}
.st-theme:hover { border-color: var(--line-strong); }
.st-theme:active { transform: translateY(1px); }
.st-theme.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 10px 22px -16px var(--accent); }
.st-theme-text { display: flex; flex-direction: column; gap: 1px; padding: 0 4px; min-width: 0; }
.st-theme-text strong { font-family: var(--font-display); font-weight: 500; font-size: 14px; }
.st-theme-text span { color: var(--ink2); font-size: 12.5px; line-height: 1.35; }
.st-tick { position: absolute; top: 14px; right: 14px; color: var(--accent); background: var(--panel); border-radius: 50%; opacity: 0; transform: scale(.6); transition: opacity var(--dur), transform var(--dur) var(--ease-out); }
.st-theme.is-on .st-tick { opacity: 1; transform: none; }
.st-theme-art { position: relative; display: block; height: 88px; overflow: hidden; border-radius: 11px; background: var(--panel2); }
.st-ta-win { position: absolute; inset: 12px 12px -8px 12px; display: flex; overflow: hidden; border-radius: 8px 8px 0 0; background: var(--ta-bg); box-shadow: 0 6px 16px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .06); }
.st-ta-win.is-light { --ta-bg: #f5f3ee; --ta-panel: #ffffff; --ta-ink: #17181c; --ta-line: #e4e0d6; }
.st-ta-win.is-dark { --ta-bg: #0d0f13; --ta-panel: #15181e; --ta-ink: #eceef2; --ta-line: #2c313b; }
.st-ta-side { display: flex; flex-direction: column; gap: 5px; width: 28%; padding: 8px 6px; background: var(--ta-panel); border-right: 1px solid var(--ta-line); }
.st-ta-side i { display: block; height: 5px; border-radius: 3px; background: var(--ta-line); }
.st-ta-side i:first-child { background: var(--accent); opacity: .85; }
.st-ta-main { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 9px 8px; }
.st-ta-line { display: block; width: 72%; height: 6px; border-radius: 3px; background: var(--ta-ink); opacity: .78; }
.st-ta-line.is-short { width: 46%; opacity: .32; }
.st-ta-acc { display: block; width: 44%; height: 12px; margin-top: auto; margin-bottom: 12px; border-radius: 4px; background: var(--accent); }
.st-theme-art.is-auto .st-ta-win.is-light { inset: 10px 36% -8px 10px; }
.st-theme-art.is-auto .st-ta-win.is-dark { inset: 26px 10px -8px 32%; }

/* Accent swatches. */
.st-swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.st-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; padding: 12px 4px 10px;
  border-radius: 16px; border: 1px solid transparent; background: var(--panel2); color: var(--ink2); font: inherit; cursor: pointer;
  transition: background var(--dur), border-color var(--dur), box-shadow var(--dur), color var(--dur);
}
.st-swatch:hover { border-color: var(--line-strong); color: var(--ink); }
.st-swatch.is-on { background: var(--panel); border-color: var(--line-strong); color: var(--ink); box-shadow: var(--e1); }
.st-sw-dot {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 4px 10px -4px rgba(0, 0, 0, .4); transition: box-shadow var(--dur);
}
.st-sw-dot.is-mono { background: var(--ink); color: var(--bg); }
.st-sw-dot .material-symbols-rounded { font-size: 22px; opacity: 0; transform: scale(.4); transition: opacity var(--dur), transform var(--dur) var(--ease-out); }
.st-swatch.is-on .st-sw-dot { box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--ink2); }
.st-swatch.is-on .st-sw-dot .material-symbols-rounded { opacity: 1; transform: none; }
.st-sw-name { font-family: var(--font-display); font-weight: 500; font-size: 12.5px; }

/* A labelled setting line. */
.st-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 14px 0; min-width: 0; }
.st-row:first-child { padding-top: 0; }
.st-row:last-child { padding-bottom: 0; }
.st-row + .st-row { border-top: 1px solid var(--line); }
.st-row-text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-row-label { font-family: var(--font-display); font-weight: 500; font-size: 14.5px; }
.st-row-sub { color: var(--ink2); font-size: 13px; line-height: 1.4; }
.st-row-ctl { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.st-row.is-stack { flex-direction: column; align-items: stretch; gap: 10px; }
.st-row.is-stack .st-row-text { flex: none; }
.st-row.is-stack .st-row-note { flex-basis: auto; }
.st-row-note { flex-basis: 100%; display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--ink2); font-size: 12.5px; line-height: 1.45; }
.st-row-note .material-symbols-rounded { font-size: 16px; margin-top: 1px; }
.st-row-note.is-warn { color: var(--warn); margin: 2px 0 8px; }
.st-row-note a { color: inherit; font-weight: 500; margin-left: 4px; }

/* ----------------------------------------------------------- account ------ */
.st-me .st-hero-main { align-items: center; }
.st-me-av { flex: none; display: grid; }
.st-me-av .avatar { box-shadow: 0 0 0 4px var(--panel), 0 12px 26px -12px rgba(0, 0, 0, .45); }
.st-me-facts .facts { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.st-me .st-hero-foot .note { margin: 16px 0 0; }
.st-form-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.st-changes { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--accent-tint); color: var(--accent-ink); font-size: 13px; line-height: 1.45; }
.st-changes .material-symbols-rounded { font-size: 18px; }
.st-form .note { margin: 12px 0 0; }
/* The (usually hidden) clear-email note sits between the two field rows, so
   console.css's .field-row + .field-row spacing never matches there. */
.st-form > .field-row ~ .field-row { margin-top: 16px; }
.st-pw-tools { display: flex; align-items: center; gap: 12px; min-height: 32px; margin-top: 8px; }
.st-pw-tools > .btn { margin-left: auto; }
.st-meter { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.st-meter-track { flex: 1; max-width: 220px; height: 6px; overflow: hidden; border-radius: 999px; background: var(--panel2); }
.st-meter-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ink3); transition: width .3s var(--ease-out), background var(--dur); }
.st-meter[data-tone="err"] .st-meter-fill { background: var(--danger); }
.st-meter[data-tone="warn"] .st-meter-fill { background: var(--warn); }
.st-meter[data-tone="ok"] .st-meter-fill { background: var(--ok); }
.st-meter-word { color: var(--ink2); font-size: 12.5px; white-space: nowrap; }

/* ---------------------------------------------------------- security ------ */
.st-posture .st-hero-main { align-items: center; }
.st-posture-ring { flex: none; }
/* The four checks sit two abreast at most (a 3 + 1 grid squeezed each text
   to ~105 px), and one to a row when two 280 px cards don't fit.
   5px = half the 10px gap. */
.st-checks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(280px, calc(50% - 5px))), 1fr)); gap: 10px; }
.st-check { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px 12px 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--panel) 88%, transparent); border: 1px solid var(--line); }
.st-check-ic { display: grid; color: var(--ink3); }
.st-check.is-ok .st-check-ic { color: var(--ok); }
.st-check.is-warn .st-check-ic { color: var(--warn); }
.st-check.is-warn { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.st-check.is-wait .st-check-ic .material-symbols-rounded { animation: stPulse 1.2s ease-in-out infinite; }
@keyframes stPulse { 50% { opacity: .35; } }
.st-check-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--ink2); font-size: 13px; line-height: 1.4; }
.st-check-text strong { color: var(--ink); font-family: var(--font-display); font-weight: 500; font-size: 14px; }
.st-check > .btn { flex: none; align-self: center; }

/* The passkey card's message line. Keyed on its place, not a class: HC.say
   REWRITES className ("msg" / "msg msg-err"), so a class here would be gone
   after the first message and the line would sit on the card's edges. */
.st-pk-card .card-body > .msg { padding: 0 var(--pad); }
.st-pk-card .card-body > .msg:not(:empty) { margin: 6px 0 12px; }
.st-pk-card .card-body.is-flush { padding-bottom: 0; }
.st-pk-card .note { margin: 6px var(--pad) 8px; }
.st-pk-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--h-tint); color: var(--h-ink); }
.st-pk-ic .material-symbols-rounded { font-size: 21px; }
.st-pk-ic.is-warn { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.st-foot-note { display: flex; align-items: flex-start; gap: 8px; margin: 6px var(--pad) 14px; color: var(--ink2); font-size: 12.5px; line-height: 1.45; }
.st-foot-note .material-symbols-rounded { font-size: 17px; color: var(--ink3); }
.st-foot-note.is-flat { margin: 16px 0 0; }

.st-state { display: flex; align-items: flex-start; gap: 12px; padding: 14px; margin-bottom: 4px; border-radius: 14px; background: var(--h-tint); }
.st-state.is-ok { --hue: 150; }
.st-state.is-warn { --hue: 62; }
.st-state.is-off { --hue: 240; --cs: .22; }
.st-state-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none; background: var(--h-strong); color: #fff; }
.st-state-ic .material-symbols-rounded { font-size: 22px; }
.st-state-text { min-width: 0; }
.st-state-text strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 16px; color: var(--h-ink); }
.st-state-text span { display: block; margin-top: 3px; color: var(--ink2); font-size: 13px; line-height: 1.45; }
.st-state + .switch-row { margin-top: 6px; }

/* Sign-in history. */
.st-history .card-body.is-flush { padding-bottom: 0; }
.st-hs-top { display: flex; flex-direction: column; gap: 14px; padding: 4px var(--pad) 16px; border-bottom: 1px solid var(--line); }
.st-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-filter { position: relative; display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.st-filter > .material-symbols-rounded { position: absolute; left: 10px; z-index: 1; font-size: 18px; color: var(--ink2); pointer-events: none; }
.st-filter select.input { width: auto; max-width: 260px; min-height: 36px; padding-top: 6px; padding-bottom: 6px; padding-left: 34px; font-size: 13.5px; border-radius: 10px; }
.st-minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.st-mini { display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 11px 12px; border-radius: 14px; background: var(--h-tint); }
.st-mini-label { font-family: var(--font-display); font-weight: 500; font-size: 12.5px; color: var(--h-ink); }
.st-mini-value { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.st-mini-sub { color: var(--ink2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-mini .chart { margin: 6px -12px -11px; }
.st-evlist { min-width: 0; padding-bottom: 6px; }
.st-day { padding: 16px var(--pad) 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink2); }
.st-evgroup { list-style: none; margin: 0; padding: 0; }
.st-ev {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px var(--pad); color: inherit; text-decoration: none; border-top: 1px solid var(--line); transition: background var(--dur);
}
.st-evgroup > li:first-child > .st-ev { border-top: 0; }
a.st-ev:hover { background: color-mix(in srgb, var(--panel2) 70%, transparent); }
.st-ev.is-err { background: color-mix(in srgb, var(--danger) 4%, transparent); }
.st-ev-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; }
.st-ev-ic .material-symbols-rounded { font-size: 20px; }
.st-ev.is-ok .st-ev-ic { background: color-mix(in srgb, var(--ok) 13%, transparent); color: var(--ok); }
.st-ev.is-err .st-ev-ic { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.st-ev.is-warn .st-ev-ic { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.st-ev-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-ev-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; font-family: var(--font-display); font-weight: 500; font-size: 14.5px; }
.st-ev-who { min-width: 0; overflow-wrap: anywhere; }
.st-ev-anon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--panel3); color: var(--ink2); }
.st-ev-anon .material-symbols-rounded { font-size: 14px; }
.st-ev-facts { display: flex; flex-wrap: wrap; gap: 3px 14px; color: var(--ink2); font-size: 12.5px; }
.st-ev-time { align-self: start; padding-top: 3px; color: var(--ink2); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-fact { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.st-fact > span:last-child { overflow-wrap: anywhere; }
.st-fact .material-symbols-rounded { font-size: 15px; color: var(--ink3); }
.st-fact.is-mono > span:last-child { font-family: var(--font-mono); font-size: 12px; }
.st-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px var(--pad); border-top: 1px solid var(--line); }
.st-pager:empty { display: none; }
.st-pager-text { color: var(--ink2); font-size: 13px; font-variant-numeric: tabular-nums; }
.st-pager-btns { display: flex; gap: 6px; }
.st-history .st-coverage { margin: 12px var(--pad) 16px; }

/* Sessions. */
.st-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; }
.st-act { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; padding: 16px; border-radius: 16px; background: var(--panel2); }
.st-act-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--h-strong); color: #fff; }
.st-act.is-danger .st-act-ic { background: var(--danger); color: var(--on-danger); }
.st-act-text { display: flex; flex-direction: column; gap: 3px; }
.st-act-text strong { font-family: var(--font-display); font-weight: 500; font-size: 15px; }
.st-act-text span { color: var(--ink2); font-size: 13px; line-height: 1.45; }
.st-act > .btn { margin-top: auto; }

/* ----------------------------------------------------------- sign-ups ----- */
.st-gate.is-ok { --hue: 150; }
.st-gate .st-hero-main { align-items: center; }
.st-gate .st-hero-text { flex-basis: 260px; }
.st-gate-switch { flex: 0 1 250px; padding: 4px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--e1); }
.st-gate-switch .switch-row { flex: 1; }
.st-linkrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 14px; color: var(--ink2); }
.st-linkrow > .material-symbols-rounded { font-size: 18px; }
.st-link { padding: 4px 9px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); font-size: 12.5px; overflow-wrap: anywhere; }
.st-linkrow > span:last-child { margin-left: 6px; }
.st-grant-mode { margin-bottom: 16px; }
.st-grants .note { margin-bottom: 14px; }
.st-grant-lede { margin-bottom: 14px; color: var(--ink2); font-size: 14px; }
.st-group + .st-group { margin-top: 18px; }
.st-group-head { display: flex; align-items: center; gap: 8px; min-height: 32px; margin: 0 0 8px 2px; font-family: var(--font-display); font-weight: 500; font-size: 13.5px; color: var(--ink); }
.st-group-n { padding: 1px 8px; border-radius: 999px; background: var(--panel2); color: var(--ink2); font-family: var(--font-mono); font-size: 11px; font-weight: 400; }
.st-group-btns { display: flex; gap: 2px; margin-left: auto; }
.st-apps { display: flex; flex-wrap: wrap; gap: 6px; }
.st-app { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 12px 3px 3px; border-radius: 999px; background: var(--panel2); font-family: var(--font-display); font-weight: 500; font-size: 13px; }
.st-app .app-icon { border-radius: 50%; }
.st-grants .chk .app-icon { border-radius: 8px; }
.st-grant-left { display: flex; align-items: flex-start; gap: 6px; margin-top: 16px; color: var(--ink2); font-size: 13px; }
.st-grant-left .material-symbols-rounded { font-size: 17px; }
.st-grant-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.st-grant-count { margin-right: auto; color: var(--ink2); font-size: 13px; }
.st-grant-count.is-warn { color: var(--warn); }
.st-grant-more { display: flex; align-items: flex-start; gap: 6px; margin-top: 14px; color: var(--ink2); font-size: 13px; }
.st-grant-more .material-symbols-rounded { font-size: 17px; }
.st-grant-more a { color: var(--accent-ink); }

.st-pends { list-style: none; margin: 0; padding: 0; }
.st-pends > li + li { border-top: 1px solid var(--line); }
.st-pend { display: flex; align-items: flex-start; gap: 14px; padding: 14px var(--pad); }
.st-pend-main { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.st-pend-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--font-display); font-size: 15px; }
.st-pend-name strong { font-weight: 500; }
.st-pend-mail { color: var(--ink2); font-family: var(--font-mono); font-size: 12.5px; overflow-wrap: anywhere; }
.st-pend-rel { display: block; margin: 4px 0; padding-left: 10px; border-left: 3px solid var(--h-c); color: var(--ink); font-size: 13.5px; font-style: italic; overflow-wrap: anywhere; quotes: "“" "”"; }
.st-pend-facts { display: flex; flex-wrap: wrap; gap: 3px 14px; color: var(--ink2); font-size: 12.5px; }
.st-pend .progress-wrap { max-width: 360px; margin-top: 6px; font-size: 12.5px; }
.st-pend > .btn { flex: none; }

/* ----------------------------------------------------------- privacy ------ */
.st-promise-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.st-promise-col { padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--panel) 90%, transparent); border: 1px solid var(--line); }
.st-promise-col h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14.5px; }
.st-promise-col.is-yes h3 .material-symbols-rounded { color: var(--ok); }
.st-promise-col.is-no h3 .material-symbols-rounded { color: var(--danger); }
.st-promise-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.st-promise-col li { display: flex; align-items: flex-start; gap: 8px; color: var(--ink2); font-size: 13.5px; line-height: 1.4; }
.st-promise-col li .material-symbols-rounded { font-size: 17px; margin-top: 1px; }
.st-promise-col.is-yes li .material-symbols-rounded { color: var(--ok); }
.st-promise-col.is-no li .material-symbols-rounded { color: var(--danger); }

.st-master { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 14px; padding: 2px 16px; border-radius: 16px; background: var(--panel2); }
.st-master .switch-row { flex: 1 1 320px; }
.st-readers-sum { font-family: var(--font-display); font-weight: 500; font-size: 13.5px; color: var(--ink2); padding: 6px 0; }
.st-readers-card .note { margin-bottom: 14px; }
.st-readers { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.st-reader {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; cursor: pointer;
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--h-c) 18%, var(--line));
  background: linear-gradient(160deg, var(--h-tint), var(--panel) 68%);
  transition: border-color var(--dur), background var(--dur), opacity var(--dur), box-shadow var(--dur);
}
.st-reader:hover { box-shadow: var(--e1); border-color: color-mix(in srgb, var(--h-c) 35%, var(--line)); }
.st-reader:focus-within { border-color: var(--accent); }
.st-reader-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-reader-name { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.st-reader-name strong { font-family: var(--font-display); font-weight: 500; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-reader-name span { color: var(--ink2); font-size: 12px; }
.st-reader-health { display: flex; flex-direction: column; gap: 2px; min-height: 36px; font-size: 12.5px; }
.st-reader-state { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 500; color: var(--ink); }
.st-reader-state.is-error { color: var(--danger); }
.st-reader-state.is-missing { color: var(--warn); }
.st-reader-state.is-disabled { color: var(--ink2); }
.st-reader-detail { color: var(--ink2); overflow-wrap: anywhere; }
.st-reader.is-off { background: var(--panel); border-color: var(--line); }
.st-reader.is-off .app-icon { filter: grayscale(1); opacity: .55; }
.st-readers.is-paused .st-reader { opacity: .72; }
.st-health-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; color: var(--ink2); font-size: 12.5px; }
.st-health-line:empty { display: none; }
.st-health-line .material-symbols-rounded { font-size: 17px; }
.st-health-line a { color: var(--accent-ink); font-weight: 500; }

.st-example { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--panel2); }
.st-example-label { color: var(--ink2); font-family: var(--font-display); font-weight: 500; font-size: 12px; }
.st-example-card { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-size: 14px; }
.st-example-card strong { font-family: var(--font-display); font-weight: 500; font-size: 20px; }
.st-example-extra { display: inline-flex; align-items: center; gap: 6px; color: var(--h-ink); animation: stIn .24s var(--ease-out); }

.st-dls { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.st-dl {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px;
  border-radius: 16px; border: 1px solid var(--line); background: var(--panel); color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
.st-dl:hover:not(:disabled) { border-color: var(--line-strong); box-shadow: var(--e2); transform: translateY(-1px); }
.st-dl:disabled { cursor: progress; }
.st-dl-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; flex: none; background: var(--h-strong); color: #fff; }
.st-dl-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.st-dl-text strong { font-family: var(--font-mono); font-weight: 500; font-size: 14px; }
.st-dl-text span { color: var(--ink2); font-size: 12.5px; }
.st-dl-go { color: var(--ink3); }
.st-dl.is-busy .st-dl-go { animation: stPulse 1s ease-in-out infinite; color: var(--accent); }
.st-inside { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.st-inside li { display: flex; align-items: flex-start; gap: 8px; color: var(--ink2); font-size: 13px; line-height: 1.4; }
.st-inside li .material-symbols-rounded { font-size: 17px; color: var(--ok); }
.st-inside li.is-no .material-symbols-rounded { color: var(--danger); }

/* ------------------------------------------------------------ system ------ */
.st-stamp { color: var(--ink2); font-size: 13px; white-space: nowrap; }
.st-sys-hero .chip { font-family: var(--font-mono); font-size: 12px; }
.st-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--gap); }
.st-stat {
  display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 14px 16px 16px; color: inherit; text-decoration: none;
  border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--h-c) 20%, var(--line)); box-shadow: var(--e1);
  background: linear-gradient(170deg, var(--h-tint), var(--panel) 72%);
  transition: box-shadow var(--dur), transform var(--dur), border-color var(--dur);
}
a.st-stat:hover { box-shadow: var(--e2); transform: translateY(-1px); }
.st-stat.is-ok { --hue: 150; }
.st-stat.is-warn { --hue: 62; }
.st-stat.is-err { --hue: 22; border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.st-stat.is-off { --hue: 240; --cs: .18; }
.st-stat-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 11px; row-gap: 3px; min-width: 0; }
.st-stat-ic { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--h-strong); color: #fff; }
.st-stat-ic .material-symbols-rounded { font-size: 19px; }
.st-stat-name { min-width: 0; font-family: var(--font-display); font-weight: 500; font-size: 14.5px; line-height: 1.25; }
.st-stat-state {
  display: inline-flex; align-items: center; justify-self: start; gap: 6px; padding: 2px 9px; border-radius: 999px;
  background: var(--panel); color: var(--h-ink); font-size: 12px; font-weight: 500; white-space: nowrap;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h-c) 28%, transparent);
}
.st-stat-detail { color: var(--ink2); font-size: 13px; line-height: 1.45; }

.st-rtable { display: flex; flex-direction: column; min-width: 0; }
.st-rrow {
  display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) 56px;
  align-items: center; gap: 12px; padding: 9px var(--pad); border-top: 1px solid var(--line);
}
.st-rrow.is-head { border-top: 0; padding-top: 4px; padding-bottom: 8px; color: var(--ink2); font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.st-rcell-app { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-rcell-app > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.st-rcell-app strong { font-family: var(--font-display); font-weight: 500; font-size: 14px; }
.st-rcell-app small { color: var(--ink2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-rcell-read, .st-rcell-files { color: var(--ink2); font-size: 13px; font-variant-numeric: tabular-nums; }
.st-rcell-ms { display: flex; align-items: center; gap: 8px; color: var(--ink2); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-ms { flex: 1; max-width: 80px; height: 6px; overflow: hidden; border-radius: 999px; background: var(--panel2); }
.st-ms i { display: block; height: 100%; border-radius: inherit; }

/* -------------------------------------------------------- responsive ----- */
@media (max-width: 720px) {
  .st-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-hero { padding: var(--pad); }
  .st-hero-ic { width: 52px; height: 52px; border-radius: 16px; }
  .st-hero-ic .material-symbols-rounded { font-size: 28px; }
  .st-gate-switch { flex: 1 1 100%; }
  .st-ev { grid-template-columns: auto minmax(0, 1fr); }
  .st-ev-time { grid-column: 2; grid-row: 1; justify-self: end; }
  .st-ev-main { grid-column: 2; grid-row: 1 / span 2; padding-right: 48px; }
  .st-ev-ic { grid-row: 1 / span 2; align-self: start; }
  .st-rrow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .st-rrow.is-head { display: none; }
  .st-rcell-read { grid-column: 1; padding-left: 40px; font-size: 12.5px; }
  .st-rcell-read::before { content: "Read "; }
  .st-rcell-ms { grid-column: 2; justify-self: end; }
  .st-rcell-files { display: none; }
  .st-pend { flex-wrap: wrap; }
  .st-pend > .btn { margin-left: 58px; }
}
@media (max-width: 560px) {
  .st-themes { grid-template-columns: minmax(0, 1fr); }
  .st-theme { flex-direction: row; align-items: center; padding: 8px; }
  .st-theme-art { flex: none; width: 118px; height: 72px; }
  .st-tick { top: 50%; right: 12px; margin-top: -11px; }
  .st-theme-text { padding-right: 30px; }
  .st-filter, .st-filter select.input { width: 100%; max-width: none; }
  .st-filters > .seg { width: 100%; }
  .st-mock-body { grid-template-columns: 38px minmax(0, 1fr); }
  .st-mock-nav { justify-content: center; }
  .st-mock-nav span:last-child { display: none; }
  .st-row-ctl { flex-basis: 100%; }
  .st-posture .st-hero-main { flex-wrap: nowrap; }
  .st-posture .st-hero-lede { display: none; }
}