/* PULSE showtime: the app's page layer for My shop and Plan.
   Tokens, faces, LED digits and buttons come from pulse.css; drawings come
   from showtime.js. Light is the base; dark is written both ways in, as in
   pulse.css. The stage pieces (the wall behind the name, the scoreboards, the
   LED windows) stay dark in both themes. Every class is st- so nothing here
   meets the older dashboard rules. */

:root { --st-size-hi: #E0A400; --st-size-lo: #B07800; --st-size-peer: rgba(40,20,70,.2); --st-track: #F3E4D6;
  --st-dow: #7C3AED; --st-rail-shadow: drop-shadow(0 12px 18px rgba(60,30,10,.22)); --st-ring: #F3E4D6; }
:root[data-theme="dark"] { --st-size-hi: #FFD25E; --st-size-lo: #C08600; --st-size-peer: rgba(255,255,255,.22); --st-track: var(--tile);
  --st-dow: #6D3FE0; --st-rail-shadow: drop-shadow(0 14px 22px rgba(0,0,0,.5)); --st-ring: #2A2533; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --st-size-hi: #FFD25E; --st-size-lo: #C08600; --st-size-peer: rgba(255,255,255,.22); --st-track: var(--tile);
    --st-dow: #6D3FE0; --st-rail-shadow: drop-shadow(0 14px 22px rgba(0,0,0,.5)); --st-ring: #2A2533; }
}

/* section colours: one hue each, marks in --sm, words in --sc */
.st-shows { --sc: var(--t-shows); --sm: var(--c-shows); }
.st-cat { --sc: var(--t-cat); --sm: var(--c-cat); }
.st-win { --sc: var(--t-win); --sm: var(--c-win); }
.st-time { --sc: var(--t-time); --sm: var(--c-time); }
.st-rival { --sc: var(--t-rival); --sm: var(--c-rival); }

.st-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* words that differ by theme: .st-lt shows in light, .st-dk in dark */
.st-dk { display: none; }
:root[data-theme="dark"] .st-dk { display: inline; }
:root[data-theme="dark"] .st-lt { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .st-dk { display: inline; }
  :root:not([data-theme="light"]) .st-lt { display: none; }
}
:where(.st) :where(p, h2, h3) { margin: 0; text-wrap: pretty; }
.st .ic { flex: none; }
.st i[data-i] { display: inline-block; flex: none; width: var(--is, 22px); height: var(--is, 22px); }

/* full bleed out of the page column; .app clips what passes the edge */
.st-bleed { margin-inline: calc(50% - 50vw); }
.st-in { padding-inline: max(32px, calc((100% - 1136px) / 2)); }
@media (max-width: 900px) { .st-in { padding-inline: max(16px, env(safe-area-inset-left)); } }

/* ------------------------------------------------------------ section heads */
.st-sec { padding-top: 64px; }
.st-sec.tight { padding-top: 32px; }
@media (max-width: 699px) { .st-sec { padding-top: 44px; } .st-sec.tight { padding-top: 24px; } }
.st-sh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.st-sh h2 { font: 800 var(--t-section)/1.1 var(--f-display); font-stretch: 92%; letter-spacing: -.005em; color: var(--ink); flex: 1 1 0; min-width: 8ch; margin: 0; }
.st-sh .ic { color: var(--sc, var(--t-shows)); }
/* a button in a head keeps its own text colour on its icon */
.st-sh .ps-btn .ic { color: currentColor; }
.st-sh .st-aside { margin-left: auto; }
.st-axis { color: var(--ink-2); font: 600 var(--t-label)/1.35 var(--f-body); margin: -8px 0 16px; }
.st-cap { color: var(--muted); font: 500 var(--t-caption)/1.45 var(--f-body); }
.st-cap + .st-cap { margin-top: 6px; }
.st-cap a, .st-more { color: var(--link); font-weight: 700; }
.st-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 700 15.5px/1.2 var(--f-body); text-decoration: none; }
.st-more:hover { text-decoration: underline; }
.st-panel { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 26px; min-width: 0; }
@media (max-width: 699px) { .st-panel { padding: 20px 18px; border-radius: 16px; } }
.st-duo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; }
.st-duo.rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.st-duo.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.st-duo > * { min-width: 0; }
/* one panel left in a pair takes the whole row */
.st-duo:has(> [hidden]) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 899px) { .st-duo, .st-duo.rev, .st-duo.even { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
.st-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.st .ps-btn { text-decoration: none; }
.st button.ps-btn { font-family: var(--f-body); }
.st-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px currentColor;
  color: var(--t-win); font: 700 13px/1 var(--f-body); }

/* ------------------------------------------------------------ the wall (name in lights) */
.st-wall { position: relative; overflow: hidden; color: var(--stage-ink); background-color: #0C0A11;
  /* slatwall: the grooved panel card shops hang packs on */
  background-image:
    radial-gradient(70% 90% at 38% 34%, rgba(255, 46, 147, .20), rgba(139, 44, 255, .07) 45%, transparent 72%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 26px, #030205 26px 30px, rgba(255,255,255,.07) 30px 31px, rgba(255,255,255,.018) 31px 32px);
  border-bottom: 1px solid #000; }
.st-wall::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.55), transparent 18%, transparent 82%, rgba(0,0,0,.55)); }
.st-wall > .st-in { position: relative; z-index: 1; padding-top: 34px; padding-bottom: 30px; }
.st-sign { position: relative; margin: 0 -8px; min-height: 60px; }
.st-sign svg { display: block; max-width: 100%; height: auto; }
.st-sign .st-sign-t { display: block; padding: 8px; font: 900 clamp(34px, 5vw, 64px)/1.05 var(--f-display); color: #FFFFFF; overflow-wrap: anywhere;
  text-shadow: 0 0 4px rgba(255,255,255,.6), 0 0 18px rgba(255,79,160,.8); }
.st-ident { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-items: center; margin-top: 18px; }
.st-av { position: relative; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: #2A2333; flex: none; grid-row: span 3;
  box-shadow: 0 0 0 3px #0C0A11, 0 0 0 5px #D8D2E6, 0 8px 22px rgba(0,0,0,.7); }
.st-av img, .st-av .ltr { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-av img { object-fit: cover; }
.st-av .ltr { display: grid; place-items: center; font: 900 40px/1 var(--f-display); color: #FFFFFF; }
@media (max-width: 699px) { .st-av .ltr { font-size: 26px; } }
.st-ident .st-cat { font: 800 21px/1.15 var(--f-display); font-stretch: 96%; color: var(--stage-ink); display: flex; align-items: center; gap: 9px; margin: 0; }
.st-ident .st-cat .ic { color: #8FE3FF; }
.st-facts { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 0; list-style: none; color: var(--stage-2); font: 600 15.5px/1.4 var(--f-body); }
.st-facts li { display: flex; align-items: center; gap: 7px; min-height: 28px; }
.st-facts .ic { color: var(--stage-muted); }
.st-shopacts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.st-wall .shop-act { color: #FFB27A; font-size: 14px; }
.st-wall .shop-act:focus-visible { outline-color: #FFB27A; }
.st-pins { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 22px; }
.st-pin { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px 0 11px; border-radius: 999px;
  background: #17110B; color: #FFFFFF; font: 700 15.5px/1.1 var(--f-body);
  box-shadow: inset 0 0 0 2px var(--edge), inset 0 0 0 4px #17110B, inset 0 0 0 5px rgba(255,255,255,.08), 0 3px 10px rgba(0,0,0,.6); }
.st-pin .ic { color: var(--edge); }
.st-pin.ember { --edge: #FF8A1C; }
.st-pin.violet { --edge: #A78BFA; background: #120E1E; box-shadow: inset 0 0 0 2px var(--edge), inset 0 0 0 4px #120E1E, inset 0 0 0 5px rgba(255,255,255,.08), 0 3px 10px rgba(0,0,0,.6); }
.st-pin.live { --edge: #FF5C7A; background: #1E0A10; box-shadow: inset 0 0 0 2px var(--edge), inset 0 0 0 4px #1E0A10, 0 3px 10px rgba(0,0,0,.6); }
.st-pin.live .dot { width: 9px; height: 9px; border-radius: 50%; background: #FF5C7A; box-shadow: 0 0 8px #FF5C7A; margin: 0 2px 0 5px; }
.st-tix { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; max-width: 100%; }
.st-tix .k { font: 700 14.5px/1.1 var(--f-body); color: var(--stage-2); white-space: nowrap; }
.st-tix .t { display: inline-flex; align-items: center; min-height: 44px; min-width: 0; font: 800 17px/1.1 var(--f-display); color: #FFD25E; }
.st-tix svg { display: block; max-width: 100%; height: auto; filter: drop-shadow(0 3px 8px rgba(0,0,0,.55)); }
/* a chip too wide to sit beside its label goes under it (showtime.js tickets) */
.st-tix.st-tix-col { flex-direction: column; align-items: flex-start; gap: 6px; }
.st-wall .shop-note { color: var(--stage-2); margin: 14px 0 0; font-size: 14px; }
.st-wall .shop-note b { color: #FFFFFF; }
@media (min-width: 900px) {
  .st-wall > .st-in { padding-top: 44px; padding-bottom: 40px; }
  .st-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; }
  .st-pins.stack { flex-direction: column; align-items: flex-end; margin-top: 0; gap: 12px; }
  .st-av { width: 104px; height: 104px; }
  .st-ident .st-cat { font-size: 24px; }
}
@media (max-width: 699px) {
  .st-av { width: 64px; height: 64px; }
  .st-ident { gap: 4px 14px; margin-top: 14px; }
  .st-ident .st-cat { font-size: 18.5px; }
  .st-facts { font-size: 14.5px; gap: 2px 16px; }
  .st-pins { gap: 10px; margin-top: 18px; }
  .st-pin { font-size: 14.5px; padding: 0 14px 0 10px; }
}
/* the smallest phones: the pins share one row that scrolls, so the answer
   below the wall keeps the first screen */
@media (max-width: 359px) {
  .st-pins { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    margin-inline: -16px; padding: 4px 16px 8px; scroll-padding-inline: 16px; }
  .st-pins::-webkit-scrollbar { display: none; }
  .st-pins > * { flex: none; scroll-snap-align: start; }
}
/* the wall sits flush under the top bar */
main:has(> .view.active[data-view="myshows"] #shop-main:not([hidden]) .st-wall) { padding-top: 0; }

/* ------------------------------------------------------------ next show */
.st-kick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--sc, var(--t-shows)); font: 700 15px/1.2 var(--f-body); margin: 0 0 10px; }
.st-kick .st-tag { color: var(--t-win); }
.st-answer { font: 900 var(--t-answer)/1.0 var(--f-display); letter-spacing: -.012em; color: var(--ink); text-wrap: balance; margin: 0; }
.st-answer-date { margin-top: 8px; color: var(--ink-2); font: 700 17px/1.3 var(--f-body); }
.st-change { margin-top: 14px; color: var(--ink-2); max-width: 48ch; font: 400 var(--t-body)/1.5 var(--f-body); }
.st-expect { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 22px; }
.st-expect .sb-panel { font-size: 76px; padding: .1em .22em .08em; }
.st-expect p { font: 700 16.5px/1.3 var(--f-body); color: var(--ink); max-width: 24ch; text-wrap: balance; }
/* on a phone a long number steps down to the card's width (its panel's pads stay) */
@media (max-width: 699px) { .st-next .st-expect .sb { font-size: min(1em, calc((100vw - 104px) / (var(--n, 2) * .7))); } }
.st-next .st-btns { margin-top: 22px; }
.st-why { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--tile); color: var(--ink-2); display: grid; gap: 8px; font: 400 15.5px/1.5 var(--f-body); }
.st-why[hidden] { display: none; }
.st-why p { margin: 0; }
.st-why a { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); font-weight: 700; }
.st-why .pv-usual { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--muted); }
.st-why .pv-usual b { color: var(--ink); font-weight: 700; }
.st-sched { margin-top: 26px; padding-top: 20px; border-top: 1px dashed var(--line-2); }
.st-sched[hidden] { display: none; }
.st-sched h3 { font: 700 15px/1.2 var(--f-body); color: var(--ink-2); display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.st-sched h3 .ic { color: var(--t-time); }
.st-cals { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.st-cal { width: 96px; border-radius: 12px; overflow: hidden; background: var(--tile); text-align: center; box-shadow: inset 0 0 0 1px var(--line); }
.st-cal a { display: block; color: inherit; text-decoration: none; }
.st-cal .dow { display: block; background: var(--st-dow); color: #FFFFFF; font: 800 13.5px/1 var(--f-display); font-stretch: 100%; letter-spacing: .06em; padding: 6px 0 5px; text-transform: uppercase; }
.st-cal .dd { display: block; font: 900 30px/1 var(--f-display); font-stretch: 88%; color: var(--ink); padding-top: 8px; }
.st-cal .mm { display: block; font: 700 13.5px/1.2 var(--f-body); color: var(--ink-2); }
.st-cal .tt { display: block; font: 700 13.5px/1.2 var(--f-body); color: var(--ink); padding: 3px 0 9px; }
.st-sched .st-cap { margin-top: 0; }
@media (max-width: 699px) { .st-cals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .st-cal { width: auto; } }
@media (min-width: 1100px) {
  .st-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: start; }
  .st-next > * { grid-column: 1 / -1; }
  .st-next > .st-answer, .st-next > .st-answer-date, .st-next > .st-change { grid-column: 1; }
  .st-next > .st-expect { grid-column: 2; grid-row: 2 / span 3; flex-direction: column; align-items: center; text-align: center; margin-top: 4px; gap: 10px; }
  .st-next > .st-expect p { max-width: 14ch; font-size: 15px; }
  /* beside the answer a long number steps down so the answer keeps its width */
  .st-next > .st-expect .sb { font-size: clamp(40px, calc(160px / var(--n, 2)), 76px); }
}

/* ------------------------------------------------------------ last show */
.st-last .st-meta { color: var(--ink-2); font: 600 15px/1.4 var(--f-body); }
.st-last .st-title { margin-top: 2px; color: var(--muted); font: 700 14px/1.4 var(--f-body); letter-spacing: .01em; overflow-wrap: break-word; }
.st-last .st-title a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.st-last .st-title a:hover { text-decoration: underline; }
.st-verdict { display: flex; align-items: center; gap: 12px; margin: 18px 0 16px; padding: 12px 16px; border-radius: 14px; background: var(--tile); }
.st-verdict .ic { color: var(--t-time); }
.st-verdict b { display: block; font: 800 21px/1.15 var(--f-display); font-stretch: 94%; color: var(--ink); }
.st-verdict span { display: block; font: 500 15px/1.4 var(--f-body); color: var(--ink-2); margin-top: 3px; }
.st-ticket { display: block; }
.st-ticket svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.st-ticket .st-tk-plain { font: 800 22px/1.2 var(--f-display); color: var(--ink); }
.st-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.st-pair.one { grid-template-columns: minmax(0, 1fr); }
.st-led { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: #07060B; min-width: 0; container-type: inline-size;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 4px 14px rgba(0,0,0,.9); }
.st-led .sb { font-size: clamp(26px, calc((100cqw - 4px) / (var(--n, 3) * .7)), 46px); }
.st-led .l { font: 700 14.5px/1.25 var(--f-body); color: #EEEAF8; }
.st-led .st-none { font: 800 26px/1.1 var(--f-display); color: #CFC8E6; }
.st-meters { margin-top: 18px; display: grid; gap: 10px; }
.st-meter { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) 2.6em; gap: 12px; align-items: center; }
.st-meter .l { font: 600 14.5px/1.25 var(--f-body); color: var(--ink-2); }
.st-meter .tr { display: block; height: 12px; border-radius: 6px; background: var(--st-track); overflow: hidden; }
.st-meter .fl { display: block; height: 100%; border-radius: 6px; }
.st-meter .v { font: 800 19px/1 var(--f-display); font-stretch: 92%; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.st-meter.wide { grid-template-columns: minmax(0, 11em) minmax(0, 1fr) 4em; }
@media (max-width: 699px) {
  .st-meter, .st-meter.wide { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .st-meter .l { grid-column: 1 / -1; }
}
.st-fl-shows { background: var(--c-shows); } .st-fl-time { background: var(--c-time); } .st-fl-muted { background: var(--muted); opacity: .75; }
.st-trend { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; color: var(--ink-2); font: 500 15px/1.45 var(--f-body); }
.st-trend .ic { margin-top: 2px; }
.st .ic.up { color: var(--up); } .st .ic.down { color: var(--down); }
.st-last .st-btns { margin-top: 18px; }
.st-last .st-cap { margin-top: 14px; }

/* ------------------------------------------------------------ trophies */
.st-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.st-rail > li { min-width: 0; }
.st-rail svg { display: block; width: 100%; height: auto; filter: var(--st-rail-shadow); }
.st-rail-note { margin-top: 16px; }
/* the plain card a drawing replaces */
.st-tc { aspect-ratio: 63 / 88; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  background: var(--tile); box-shadow: inset 0 0 0 2px var(--sm, var(--c-win)); }
.st-tc b { font: 900 italic 56px/1 var(--f-display); color: var(--ink); }
.st-tc span { font: 800 17px/1.2 var(--f-display); color: var(--ink); text-transform: uppercase; }
.st-tc small { font: 600 14.5px/1.3 var(--f-body); color: var(--ink-2); }
@media (max-width: 899px) {
  .st-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 4px 16px 22px; margin: 0 -16px; scrollbar-width: none; }
  .st-rail::-webkit-scrollbar { display: none; }
  .st-rail > li { flex: 0 0 min(62%, 250px); scroll-snap-align: start; scroll-margin-left: 16px; }
  /* More cards to the right: the edge fades until the rail reaches its end. */
  .st-rail:not(.at-end) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); }
  .st-rail-dots { display: flex; justify-content: center; gap: 10px; margin: -6px 0 0; }
  .st-rail-dots[hidden] { display: none; }
  .st-rail-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); opacity: .45; transition: opacity .2s, transform .2s; }
  .st-rail-dots i.on { background: var(--ink); opacity: 1; transform: scale(1.3); }
}
@media (min-width: 900px) { .st-rail-dots { display: none; } }
@media (prefers-reduced-motion: reduce) { .st-rail-dots i { transition: none; } }
@media (min-width: 700px) and (max-width: 899px) { .st-rail > li { flex-basis: 230px; } }

/* ------------------------------------------------------------ charts */
.st-chart { min-width: 0; }
.st-chart-wide { border-top: 1px solid var(--line); padding-top: 18px; }
.st-chart:not(.drawn) .st-plain { display: block; }
.st-plain { display: none; }

/* ------------------------------------------------------------ the week board */
.st-board { background: #0E0C14; color: #FFFFFF; position: relative;
  border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(0,0,0,.9);
  background-image: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px); }
.st-board > .st-in { padding-top: 26px; padding-bottom: 30px; position: relative; }
.st-bolt { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8C8698, #2A2631 70%); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.st-bolt.tl { left: 12px; top: 12px; } .st-bolt.tr { right: 12px; top: 12px; } .st-bolt.bl { left: 12px; bottom: 12px; } .st-bolt.br { right: 12px; bottom: 12px; }
.st-board h2 { font: 800 18px/1.1 var(--f-display); font-stretch: 100%; letter-spacing: .08em; text-transform: uppercase; color: #CFC8E6; display: flex; align-items: center; gap: 10px; margin: 0; }
.st-board h2 .ic { color: #FFB21C; }
.st-board h2 .when { font: 600 14.5px/1.2 var(--f-body); letter-spacing: 0; text-transform: none; color: #CFC8E6; }
.st-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px 0; margin-top: 20px; }
.st-cell { padding: 4px 22px 2px; border-left: 1px solid rgba(255,255,255,.09); min-width: 0; display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.st-cell:first-child { border-left: 0; padding-left: 0; }
.st-cell .win { align-self: flex-start; max-width: 100%; background: #050408; border-radius: 10px; padding: 8px 12px 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 4px 12px rgba(0,0,0,.95); }
.st-cell .sb { font-size: clamp(26px, calc((100cqw - 30px) / (var(--n, 3) * .7)), 64px); }
.st-cell .st-none { display: block; font: 800 30px/1.1 var(--f-display); color: #CFC8E6; padding: 6px 2px; }
.st-cell .l { font: 700 16px/1.25 var(--f-body); color: #FFFFFF; }
.st-cell .vs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 600 14.5px/1.3 var(--f-body); color: #CFC8E6; }
.st-cell .pct { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; }
.st-cell .pct.down { color: #FF7A90; } .st-cell .pct.up { color: #3BE08B; }
.st-cell .pct .ic { width: 18px; height: 18px; }
.st-ringcell { flex-direction: row; align-items: center; gap: 16px; }
.st-ringcell .l { max-width: 14ch; }
.st-ringcell svg { display: block; flex: none; }
.st-board .st-notes { margin-top: 18px; display: grid; gap: 6px; max-width: 80ch; }
.st-board .st-notes p { font: 500 14.5px/1.45 var(--f-body); color: #CFC8E6; }
.st-board .st-notes .fine { font-size: 13.5px; color: #B6B0CC; }
.st-board .st-notes a { color: #FFB27A; font-weight: 700; }
@media (max-width: 899px) {
  .st-cells { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 0; }
  .st-cell { padding: 2px 12px; }
  .st-ringcell { grid-column: 1 / -1; padding-left: 0; }
  .st-ringcell + .st-cell, .st-cells > .st-cell:nth-child(3n + 2) { border-left: 0; padding-left: 0; }
}
@media (max-width: 699px) {
  .st-board > .st-in { padding-top: 22px; padding-bottom: 24px; }
  .st-bolt { display: none; }
  .st-board h2 { font-size: 16px; }
  .st-cell .win { padding: 6px 8px 4px; }
  .st-cell .sb { font-size: clamp(22px, calc((100cqw - 18px) / (var(--n, 3) * .7)), 34px); }
  .st-cell .l { font-size: 14.5px; }
  .st-cell .vs { font-size: 13.5px; }
}
@media (max-width: 359px) { .st-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } .st-cells > .st-cell:nth-child(3n + 2) { border-left: 1px solid rgba(255,255,255,.09); padding-left: 12px; } .st-cells > .st-cell:nth-child(2n) { border-left: 0; padding-left: 0; } }

/* ------------------------------------------------------------ sellers your size */
.st-size .st-pin { margin-bottom: 4px; }
.st-size .st-pin.violet { color: #FFFFFF; }
.st-pin.st-plainpin { --edge: var(--line-2); background: var(--tile); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line-2); }
.st-pin.st-plainpin .ic { color: var(--t-time); }
:root[data-theme="light"] .st-size .st-pin.violet { background: #FFFFFF; color: #1B1036; box-shadow: inset 0 0 0 2px #7C3AED; }
:root[data-theme="light"] .st-size .st-pin.violet .ic { color: #6D28D9; }
@media not all and (prefers-color-scheme: dark) {
  :root:not([data-theme="dark"]) .st-size .st-pin.violet { background: #FFFFFF; color: #1B1036; box-shadow: inset 0 0 0 2px #7C3AED; }
  :root:not([data-theme="dark"]) .st-size .st-pin.violet .ic { color: #6D28D9; }
}
.st-sizechart { margin-top: 14px; min-height: 120px; }
.st-sizechart svg { display: block; max-width: 100%; height: auto; }
.st-sizechart:not(.drawn) .shop-num { display: inline-block; margin-right: 24px; }
.st-size .st-axis { margin: 10px 0 6px; }

/* rivals */
.st-rivals .st-sh .shop-act { min-height: 44px; }
.st-rivals .shop-row { font-size: 15px; }
.st-rivals .shop-row .c { font-size: 14px; }

/* ------------------------------------------------------------ category now */
.st-catnow { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 26px; align-items: start; }
.st-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.st-tile { background: var(--tile); border-radius: 14px; padding: 14px 16px 15px; min-width: 0; display: flex; flex-direction: row; align-items: baseline; gap: 12px; }
.st-tile .n { font: 900 40px/1 var(--f-display); font-stretch: 86%; color: var(--sc, var(--ink)); font-variant-numeric: tabular-nums; min-width: 1.4em; }
.st-tile .t { font: 600 14.5px/1.3 var(--f-body); color: var(--ink-2); }
.st-catnow h3 { font: 800 19px/1.2 var(--f-display); font-stretch: 94%; display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--ink); }
.st-catnow h3 .ic { color: var(--t-win); }
.st-catnow .st-cap { margin-top: 12px; }
@media (max-width: 899px) { .st-catnow { grid-template-columns: minmax(0, 1fr); } }
/* the three tiles share one row wherever the section is one column; a
   phone puts each number over its words */
@media (max-width: 899px) { .st-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699px) {
  .st-tiles { gap: 8px; }
  .st-tile { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; }
  .st-tile .n { font-size: 32px; }
  .st-tile .t { font-size: 13.5px; }
}

/* sales */
.st-sales .shop-num b { font: 900 40px/1 var(--f-display); font-stretch: 86%; color: var(--t-shows); }

/* ------------------------------------------------------------ plan */
.st-pagehead { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 0 0 18px; }
.st-pagehead h1 { font: 900 40px/1 var(--f-display); font-stretch: 90%; letter-spacing: -.01em; margin: 0; }
@media (max-width: 699px) { .st-pagehead h1 { font-size: 32px; } }
.st-planpanel { padding: 32px; }
.st-planhero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "ans side" "why side"; gap: 0 32px; align-items: start; }
.st-planhero > .st-ans { grid-area: ans; } .st-planhero > .st-planside { grid-area: side; } .st-planhero > .st-whybox { grid-area: why; }
.st-planhero.no-side { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ans" "why"; }
.st-planside { display: grid; gap: 4px; }
.st-mini { border-radius: 18px; padding: 22px 24px; background: #0E0C14; color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  background-image: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px); }
.st-mini .st-expect { margin: 0; }
.st-mini .st-expect .sb-panel { font-size: 92px; }
.st-mini .st-expect p { color: #FFFFFF; font-size: 18px; max-width: 24ch; }
.st-planside .st-sched { border-top: 0; margin-top: 14px; padding-top: 6px; }
.st-whybox { margin-top: 20px; }
.st-whybtn { appearance: none; border: 0; background: none; padding: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer;
  font: 800 16px/1.3 var(--f-display); font-stretch: 96%; color: var(--ink); }
.st-whybtn .ic { color: var(--t-time); }
.st-whybtn::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 4px; }
.st-whybtn[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-1px); }
.st-whybox .st-why { margin-top: 4px; }
.st-whybox { padding: 6px 16px 10px; border-radius: 14px; background: var(--tile); }
.st-whybox .st-why { background: none; padding: 0 0 6px; }
@media (max-width: 899px) { .st-planhero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ans" "side" "why"; gap: 0; } }
@media (max-width: 699px) {
  .st-planpanel { padding: 22px 18px; }
  .st-mini { padding: 16px; margin-top: 20px; }
  .st-mini .st-expect .sb-panel { font-size: 64px; }
  .st-mini .st-expect p { font-size: 16px; }
}
.st-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 16px; }
.st-picker:empty { display: none; }
.st-gridnote { margin-top: 12px; }
.st-picks { display: grid; gap: 14px; }
.st-scope { margin: 0 0 12px; }
.st-pick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 16px; align-items: center; padding: 18px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.st-pick > .ic, .st-pick > i[data-i] { grid-row: span 3; color: var(--sc); }
.st-pick h3 { font: 700 15px/1.3 var(--f-body); color: var(--ink-2); margin: 0; }
.st-pick .slot { font: 900 30px/1.05 var(--f-display); font-stretch: 90%; color: var(--ink); }
.st-pick p { font: 500 15px/1.4 var(--f-body); color: var(--ink-2); }
.st-detail { margin-top: 14px; border-top: 1px solid var(--line); }
.st-detail > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 48px; font: 700 15.5px/1.3 var(--f-body); color: var(--link); }
.st-detail > summary::-webkit-details-marker { display: none; }
.st-detail > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 4px; }
.st-detail[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }

/* the history list and the search keep their rows; they sit in the new frame */
.st .shop-hist { border-top: 0; padding-top: 0; }
.st-lists { display: grid; gap: 8px; }

/* reduced motion: the neon switches on without the flicker */
@media (prefers-reduced-motion: reduce) { .st *, .st *::before, .st *::after { animation: none !important; transition: none !important; } }

/* hidden means gone, whatever display a part asks for; an empty row of
   panels takes no room */
.st [hidden] { display: none !important; }
.st-duo:not(:has(> :not([hidden]))) { display: none; }
.st .shop-fit { margin: 24px 0 0; }

/* ============================================================ market */
/* the page head and its five tabs, shared by the Market views */
.st-mhead { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 0 0 18px; }
.st-mhead h1 { font: 900 40px/1 var(--f-display); font-stretch: 90%; letter-spacing: -.01em; margin: 0; }
.st-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 4px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.st-tabs button { appearance: none; border: 0; background: none; display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: 10px;
  color: var(--ink-2); font: 700 15px/1 var(--f-body); cursor: pointer; white-space: nowrap; }
.st-tabs button:hover { color: var(--ink); }
.st-tabs .ic, .st-tabs i[data-i] { color: var(--muted); flex: none; }
.st-tabs button.on { background: var(--ink); color: var(--bg); }
.st-tabs button.on .ic { color: var(--bg); }
@media (max-width: 699px) {
  .st-mhead h1 { font-size: 32px; }
  /* a column is never narrower than its word and icon: "Opportunities"
     takes what it needs, the other two share the rest */
  .st-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(min-content, 1fr)); }
  .st-tabs button { justify-content: center; padding: 0 6px; font-size: 14px; gap: 5px; }
}
@media (max-width: 359px) { .st-tabs button { font-size: 13px; } .st-tabs .ic { display: none; } }

/* Whatnot right now: the arena board, flush under the head */
.st-live > .st-in { padding-top: 30px; padding-bottom: 34px; }
.st-heroled { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 44px; margin-top: 14px; }
.st-lampcol { min-width: 0; line-height: 1; }
.st-lamp .sb { font-size: clamp(56px, 10vw, 112px); }
.st-lamp .skline { display: inline-block; width: min(320px, 60vw); height: 64px; margin: 0; opacity: .5; }
.st-lamp .sb.st-word { font: 900 clamp(34px, 5vw, 56px)/1 var(--f-display); letter-spacing: 0; color: #CFC8E6; filter: none; }
.st-delta { margin: 12px 0 0; font: 700 15.5px/1.35 var(--f-body); color: #CFC8E6; max-width: 46ch; }
.st-delta:empty { display: none; }
.st-delta .up { color: #3BE08B; } .st-delta .down { color: #FF7A90; }
.st-delta .hint { color: #CFC8E6; font-weight: 600; }
.st-sidecol { display: grid; gap: 14px; min-width: 0; }
.st-sidestats { display: grid; grid-template-columns: repeat(3, auto); gap: 6px 34px; padding: 4px 0 4px 34px; border-left: 1px solid rgba(255,255,255,.1); }
.st-sidestats:empty { display: none; }
.st-stat { min-width: 0; }
.st-stat .n { display: block; font: 800 30px/1.05 var(--f-display); font-stretch: 90%; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.st-stat .n.cat { font-size: 22px; line-height: 1.15; overflow-wrap: normal; hyphens: none; }
.st-stat .t { display: block; font: 600 14.5px/1.3 var(--f-body); color: #CFC8E6; }
.st-spark { padding-left: 34px; min-width: 0; }
.st-spark:empty { display: none; }
.st-spark svg { display: block; width: 100%; max-width: 420px; height: 46px; overflow: hidden; }
.st-spark .k { display: block; margin-top: 6px; font: 600 13px/1.3 var(--f-body); color: #CFC8E6; }
.st-live .srcline { color: #CFC8E6; margin-top: 12px; }
@media (max-width: 899px) {
  .st-heroled { gap: 18px; }
  .st-sidecol { width: 100%; }
  .st-sidestats { border-left: 0; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.1); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
  .st-sidestats .bus { grid-column: 1 / -1; }
  .st-spark { padding-left: 0; }
}
@media (max-width: 699px) {
  .st-live > .st-in { padding-top: 22px; padding-bottom: 24px; }
  .st-stat .n { font-size: 26px; }
  .st-stat .n.cat { font-size: 20px; }
}
/* the market's standout moves, as chips under the board */
.st-alerts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.st-alerts:empty { display: none; }
.st-alerts .insight { display: inline-flex; align-items: flex-start; gap: 9px; padding: 11px 15px; border-radius: 12px; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line); border: 0; font: 600 15px/1.35 var(--f-body); color: var(--ink); max-width: 100%; }
.st-alerts .insight .ic { margin-top: 1px; color: var(--muted); }
.st-alerts .insight.hot .ic, .st-alerts .insight.up .ic { color: var(--up); }
.st-alerts .insight.cool .ic { color: var(--down); }
.st-alerts .insight.peak .ic { color: var(--t-win); }
.st-alerts .insight.locked { color: var(--ink-2); }
.st-alerts .insight a { color: var(--link); font-weight: 700; }

/* your category: four numbers, the split, the formats */
.st-catpanel .st-sh { margin-bottom: 22px; }
.st-catpanel .st-sh h2 { flex: 0 1 auto; }
.st-pickrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-left: auto; }
.st-pickrow.guess { margin-left: 0; flex-basis: 100%; }
.st-pickrow .hint { color: var(--ink-2); font: 500 15px/1.45 var(--f-body); }
.st-pickrow .hint a { color: var(--link); font-weight: 700; }
.st-pickrow .plan-chip { appearance: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); font: 700 15px/1 var(--f-body); cursor: pointer; text-transform: none; }
.st-pickrow .plan-chip.on { box-shadow: inset 0 0 0 2px var(--c-cat); background: transparent; color: var(--ink); padding-left: 10px; }
.st-pickrow .plan-chip.on .ic { color: var(--t-cat); }
.st-pickrow .plan-chip.plan-all { box-shadow: none; padding: 0 4px; color: var(--link); outline: 0; border: 0; }
.st-pickrow .plan-chip.plan-all .ic { color: var(--link); }
.st-pickrow .plan-chip.plan-all:hover { text-decoration: underline; }
.st-catgrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.st-catgrid.one { grid-template-columns: minmax(0, 1fr); }
.st-tiles4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* the figure is sized to its tile, so "29,152" (or a 7-character count) fits
   a half-width tile on the smallest phone */
.st-tile4 { background: var(--tile); border-radius: 14px; padding: 14px 16px 15px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; container-type: inline-size; }
.st-tile4 .n { font: 900 46px/1 var(--f-display); font-size: clamp(18px, 23cqi, 46px); font-stretch: 86%; color: var(--t-cat); font-variant-numeric: tabular-nums; }
.st-tile4 .n.w { font-size: 30px; line-height: 1.1; }
.st-tile4 .t { font: 600 14.5px/1.3 var(--f-body); color: var(--ink-2); }
.st-tile4 .lane-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 7px; background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink-2); font: 700 13px/1 var(--f-body); text-transform: none; letter-spacing: 0; }
.st-tile4 .lane-tag.lane-open { color: var(--up); box-shadow: inset 0 0 0 1.5px currentColor; }
.st-tile4 .lane-tag.lane-crowded { color: var(--down); box-shadow: inset 0 0 0 1.5px currentColor; }
.st-tile4.wide { grid-column: 1 / -1; }
/* the top-3 split ("st-split" is My shop's wall layout, so this is st-top3) */
.st-top3 p { font: 700 16px/1.35 var(--f-body); color: var(--ink); }
.st-top3 .bar { display: flex; height: 22px; border-radius: 8px; overflow: hidden; margin: 10px 0 8px; background: var(--tile); }
.st-top3 .bar i { display: block; height: 100%; }
.st-top3 .bar i.a { background: var(--c-cat); }
.st-top3 .bar i.b { flex: 1; background: repeating-linear-gradient(135deg, var(--line-2) 0 2px, transparent 2px 7px); }
.st-top3 .lg { display: flex; flex-wrap: wrap; gap: 4px 18px; font: 600 14px/1.3 var(--f-body); color: var(--ink-2); }
.st-top3 .lg span { display: inline-flex; align-items: center; gap: 7px; }
.st-top3 .lg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.st-top3 .lg i.a { background: var(--c-cat); }
.st-top3 .lg i.b { background: repeating-linear-gradient(135deg, var(--muted) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--line-2); }
.st-formats { container-type: inline-size; }
.st-formats h3 { font: 700 15.5px/1.3 var(--f-body); color: var(--ink-2); margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.st-formats h3 .ic { color: var(--t-cat); }
.st-top3 + .st-formats h3 { margin-top: 26px; }
.st-formats:first-child h3 { margin-top: 0; }
/* a format row: its name, a bar on one scale for every row, and the figure in
   ink beside the bar, never inside it. Narrow: the name and the figure share
   a line (the figure drops under a long name) and the bar runs the full width. */
.st-frow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
/* Labels wrap at spaces; only handles break anywhere. */
.st-frow .l { flex: 1 1 auto; min-width: 0; font: 800 16px/1.2 var(--f-display); font-stretch: 94%; color: var(--ink); overflow-wrap: normal; hyphens: none; }
.st-frow .v { flex: none; order: 1; font: 700 14px/1.25 var(--f-body); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-frow .bar { flex: 1 0 100%; order: 2; display: block; height: 12px; border-radius: 6px; background: var(--st-track, var(--tile)); overflow: hidden; }
.st-frow .bar i { display: block; height: 100%; border-radius: 6px; background: #0B6E8A; }
:root[data-theme="dark"] .st-frow .bar i { background: var(--c-cat); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .st-frow .bar i { background: var(--c-cat); }
}
@container (min-width: 460px) {
  /* one row each: name | bar | figure, the figure column as wide as the widest */
  .st-frows { display: grid; grid-template-columns: minmax(min-content, 8em) minmax(0, 1fr) max-content; column-gap: 14px; }
  .st-frow { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(min-content, 8em) minmax(0, 1fr) max-content; grid-template-columns: subgrid; gap: 4px 14px; align-items: center; padding: 8px 0; }
  .st-frow .v, .st-frow .bar { order: 0; }
  .st-frow .bar { height: 26px; border-radius: 7px; }
  .st-frow .bar i { border-radius: 7px; }
}
.st-catside .st-more { margin-top: 10px; }
.st-catside .st-cap { margin-top: 6px; }
.st-catpanel .lock { margin: 0; }
@media (max-width: 899px) { .st-catgrid { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
@media (max-width: 359px) { .st-tile4 { padding: 12px 12px 13px; } }
@media (max-width: 699px) {
  .st-tile4 .n { font-size: clamp(18px, 23cqi, 36px); }
  .st-pickrow { margin-left: 0; flex-basis: 100%; }
}

/* climbing fastest: a ticker board of gains */
.st-climb { margin: 0; padding: 0; list-style: none; }
.st-climb li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.st-climb li:first-child { border-top: 0; padding-top: 4px; }
.st-climb .gain { order: 3; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--up); font: 900 28px/1 var(--f-display); font-stretch: 86%; font-variant-numeric: tabular-nums; }
.st-climb .gain .ic { width: 22px; height: 22px; }
.st-climb .av, .st-show .av, .st-srow .av, .st-fol .av, .st-up .av, .st-chips .av { position: relative; display: block; flex: none; border-radius: 50%; overflow: hidden; background: var(--tile); }
.st-climb .av { width: 44px; height: 44px; }
:is(.st-climb, .st-show, .st-srow, .st-fol, .st-up, .st-chips) .av img, :is(.st-climb, .st-show, .st-srow, .st-fol, .st-up, .st-chips) .av .ltr { position: absolute; inset: 0; width: 100%; height: 100%; }
:is(.st-climb, .st-show, .st-srow, .st-fol, .st-up, .st-chips) .av img { object-fit: cover; }
:is(.st-climb, .st-show, .st-srow, .st-fol, .st-up, .st-chips) .av .ltr { display: grid; place-items: center; font: 900 18px/1 var(--f-display); color: #FFFFFF; }
.st-climb .who { min-width: 0; }
.st-climb .h { display: block; font: 800 16.5px/1.2 var(--f-display); font-stretch: 94%; color: var(--ink); overflow-wrap: anywhere; text-decoration: none; }
.st-climb .h::after { content: ""; position: absolute; inset: 0; }
.st-climb .h:hover { text-decoration: underline; }
.st-climb .d { display: block; font: 500 14px/1.3 var(--f-body); color: var(--ink-2); }
@media (max-width: 699px) {
  .st-climb li { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "a g" "a w"; gap: 2px 14px; }
  .st-climb .av { grid-area: a; } .st-climb .who { grid-area: w; } .st-climb .gain { grid-area: g; justify-content: flex-start; font-size: 26px; }
}
@media (max-width: 359px) { .st-climb .h { font-size: 14.5px; } }

/* biggest shows: a rail of three show cards, the rest behind a toggle */
.st-showrail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.st-show { position: relative; background: var(--card); border-radius: 18px; padding: 18px; box-shadow: inset 0 0 0 1px var(--line);
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 12px 14px; min-width: 0;
  --medal: var(--line-2); --medal-ink: var(--ink-2); }
.st-show .place { position: absolute; top: 14px; right: 16px; font: italic 900 34px/1 var(--f-display); color: var(--medal-ink); }
.st-show .av { width: 56px; height: 56px; box-shadow: 0 0 0 2.5px var(--medal); }
.st-show .who { align-self: center; min-width: 0; padding-right: 34px; }
.st-show .h { position: relative; z-index: 1; display: inline-block; padding: 12px 0; margin: -12px 0; font: 800 17px/1.2 var(--f-display); font-stretch: 94%; color: var(--ink); overflow-wrap: anywhere; text-decoration: none; }
.st-show .h:hover { text-decoration: underline; }
.st-show .ttl { grid-column: 1 / -1; display: block; max-width: none; white-space: normal; overflow: visible; font: 700 14px/1.4 var(--f-body); color: var(--ink-2); letter-spacing: .01em; min-height: 2.8em; overflow-wrap: break-word; }
.st-show .ttl a { color: inherit; text-decoration: none; }
.st-show .ttl a::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.st-show .ttl a:focus-visible { outline: none; }
.st-show .ttl a:focus-visible::after { outline: 2px solid var(--focus); outline-offset: -2px; }
.st-show .foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.st-show .sb-panel { font-size: 36px; border-radius: 10px; }
.st-show .foot > span:not(.sb-panel) { font: 600 14.5px/1.2 var(--f-body); color: var(--ink-2); }
.st-show .cat { display: block; margin-top: 3px; font: 600 13.5px/1.3 var(--f-body); color: var(--muted); }
.st-show.m1 { --medal: #E0A400; --medal-ink: #8C5A00; } .st-show.m2 { --medal: #A3AAB6; --medal-ink: #4C535C; } .st-show.m3 { --medal: #C27A45; --medal-ink: #74320A; }
:root[data-theme="dark"] .st-show.m1 { --medal-ink: #FFD25E; } :root[data-theme="dark"] .st-show.m2 { --medal-ink: #C9CED8; } :root[data-theme="dark"] .st-show.m3 { --medal-ink: #E8A673; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .st-show.m1 { --medal-ink: #FFD25E; } :root:not([data-theme="light"]) .st-show.m2 { --medal-ink: #C9CED8; } :root:not([data-theme="light"]) .st-show.m3 { --medal-ink: #E8A673; }
}
.st-watch1 { margin-left: auto; }
.st-phone-only { display: none !important; }
.st-showmore { margin-top: 18px; }
.st-showmore .st-detail { margin-top: 0; }
/* the rest of the biggest shows: rank, photo, handle over the plain title,
   the facts, a bar of the room against #1, and the count */
.st-srows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 2.2ch 44px minmax(0, 1fr) max-content; column-gap: 14px; }
/* one count column for every row, so the bars share one scale */
.st-srow { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: 2.2ch 44px minmax(0, 1fr) max-content; grid-template-columns: subgrid;
  gap: 4px 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.st-srow:first-child { border-top: 0; }
.st-srow .rk { font: 900 20px/1 var(--f-display); font-stretch: 86%; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.st-srow .av { width: 44px; height: 44px; }
.st-srow .who { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.st-srow .h { position: relative; z-index: 1; justify-self: start; max-width: 100%; padding: 12px 0; margin: -12px 0; font: 800 16.5px/1.2 var(--f-display); font-stretch: 94%; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.st-srow .h:hover { text-decoration: underline; }
.st-srow .ttl { display: block; max-width: 100%; font: 600 14px/1.35 var(--f-body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-srow .ttl a { display: block; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
.st-srow .ttl a::after { content: ""; position: absolute; inset: 0; }
.st-srow .ttl a:focus-visible { outline: none; }
.st-srow .ttl a:focus-visible::after { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 10px; }
.st-srow .d { font: 600 13.5px/1.3 var(--f-body); color: var(--muted); overflow-wrap: break-word; }
.st-srow .d span { white-space: nowrap; }
.st-srow .d .playbtn { position: relative; z-index: 1; inset: auto; display: inline; width: auto; height: auto; margin: -14px 0 -14px 10px; padding: 14px 0; border: 0; border-radius: 0;
  background: none; color: var(--link); font: 700 13.5px/1.3 var(--f-body); cursor: pointer; }
.st-srow .d .playbtn:hover { background: none; text-decoration: underline; }
.st-srow .bar { display: block; height: 7px; border-radius: 4px; background: var(--st-track); margin-top: 5px; overflow: hidden; }
.st-srow .bar i { display: block; height: 100%; border-radius: 4px; background: var(--c-shows); }
.st-srow .v { text-align: right; display: grid; justify-items: end; }
.st-srow .v b { font: 900 26px/1 var(--f-display); font-stretch: 86%; color: var(--ink); font-variant-numeric: tabular-nums; }
.st-srow .v span { font: 600 13px/1.3 var(--f-body); color: var(--muted); }
@media (max-width: 399px) {
  .st-srows { grid-template-columns: 2.2ch 36px minmax(0, 1fr) max-content; column-gap: 10px; }
  .st-srow { grid-template-columns: 2.2ch 36px minmax(0, 1fr) max-content; grid-template-columns: subgrid; gap: 4px 10px; }
  .st-srow .av { width: 36px; height: 36px; }
  .st-srow .v b { font-size: 22px; }
}
@media (max-width: 899px) {
  .st-showrail { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .st-show { grid-template-columns: 1.1em auto minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "p a w" "p a t" "p a f"; padding: 14px 16px 16px 12px; gap: 4px 12px; align-items: start; }
  .st-show .place { position: static; grid-area: p; font-size: 26px; text-align: center; padding-top: 10px; padding-right: .12em; }
  .st-show .av { grid-area: a; width: 48px; height: 48px; }
  .st-show .who { grid-area: w; padding-right: 0; align-self: start; padding-top: 2px; }
  .st-show .ttl { grid-area: t; min-height: 0; font-size: 13.5px; }
  .st-show .foot { grid-area: f; margin-top: 6px; }
  .st-show .sb-panel { font-size: 30px; }
  .st-phone-only { display: flex !important; }
  .st-watch1 { display: none !important; }
}
@media (max-width: 359px) {
  .st-show { grid-template-columns: 1.25em auto minmax(0, 1fr); grid-template-areas: "p a w" "t t t" "f f f"; }
  .st-show .place { padding-top: 12px; }
  .st-show .who { align-self: center; padding-top: 0; }
}
/* charts in a panel, with their caption under them */
.st-chartpanel .st-cap { margin-top: 12px; }
.st-cap .st-more, .st-cap a { font-size: inherit; min-height: 0; }
.st-chartpanel .st-more { margin-top: 8px; }
.st-moreall { appearance: none; border: 0; background: none; padding: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 6px;
  color: var(--link); font: 700 15.5px/1.2 var(--f-body); cursor: pointer; }
.st-moreall:hover { text-decoration: underline; }
.st-catfoot { align-items: center; gap: 0 22px; margin-top: 8px; }
.st-catfoot > .st-moreall, .st-catfoot > .st-more { margin-top: 0; }

/* trends: rows of a category with its day and week arrows and a bar */
.st-trows { margin: 0; padding: 0; list-style: none; container-type: inline-size; }
.st-trow { border-top: 1px solid var(--line); }
.st-trow:first-child { border-top: 0; }
.st-trow > button { appearance: none; width: 100%; border: 0; background: none; padding: 12px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px;
  align-items: center; text-align: left; color: inherit; font: inherit; cursor: pointer; min-height: 44px; }
.st-trow .nm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 800 16.5px/1.2 var(--f-display); font-stretch: 94%; color: var(--ink); min-width: 0; overflow-wrap: normal; hyphens: none; }
.st-trow .nm small { font: 700 13px/1 var(--f-body); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line-2); border-radius: 7px; padding: 5px 8px; }
.st-trow .chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.st-chip { display: inline-flex; align-items: center; gap: 3px; min-height: 28px; padding: 0 9px; border-radius: 999px; font: 800 14px/1 var(--f-display); font-stretch: 92%;
  background: var(--tile); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-chip i { font: 600 13px/1 var(--f-body); font-style: normal; color: var(--muted); margin-right: 3px; }
.st-chip.up { color: var(--up); } .st-chip.down { color: var(--down); }
.st-chip .ic { width: 16px; height: 16px; }
/* every row's bar track is the same length: the bar on its own line in a
   narrow list, else beside a value column of one fixed width */
.st-trow .tb { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 10px; align-items: center; font-size: 14px; }
@container (min-width: 420px) {
  .st-trow .tb { grid-template-columns: minmax(0, 1fr) 18em; }
  .st-trow .tv { text-align: right; }
}
.st-trow .tr { display: block; height: 10px; border-radius: 5px; background: var(--st-track); overflow: hidden; }
.st-trow .tr i { display: block; height: 100%; border-radius: 5px; background: var(--c-cat); }
.st-trow .tv { font: 600 14px/1.3 var(--f-body); color: var(--ink-2); }
.st-trow .tv b { font: 800 16px/1 var(--f-display); font-stretch: 92%; color: var(--ink); }
.st-trow .sub { grid-column: 1 / -1; font: 500 14px/1.4 var(--f-body); color: var(--muted); }
.st-trow .hot { color: var(--up); font-weight: 700; }
.st-trow .spark { padding: 0 0 14px; }
.st-trow .spark svg { display: block; width: 100%; height: 56px; }
.st-trow .spark .lbl { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font: 600 13px/1.3 var(--f-body); color: var(--muted); }
.st-boom li { grid-template-columns: auto minmax(0, 1fr); }
.st-boom .gain { order: 0; justify-content: flex-start; min-width: 4.2em; font-size: 24px; }
@media (max-width: 699px) { .st-trow > button { grid-template-columns: minmax(0, 1fr); } .st-trow .chips { justify-content: flex-start; } }

/* browse: the category tree as rows with a search on top */
.st-search { position: relative; max-width: 560px; margin: 0 0 16px; }
.st-search input { width: 100%; min-height: 52px; padding: 0 16px 0 46px; border-radius: 14px; border: 0; background: var(--card); color: var(--ink);
  font: 600 17px/1 var(--f-body); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.st-search input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.st-search .ic, .st-search i[data-i] { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }

/* compare: the set as chips, a bar per category, then a column each */
.st-cmpset { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.st-cmpnote { margin-top: 12px; }
.st-cmpcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.st-cmpcol { background: var(--card); border-radius: 18px; padding: 18px; box-shadow: inset 0 0 0 1px var(--line); min-width: 0; display: grid; gap: 12px; align-content: start; }
.st-cmpcol h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 19px/1.2 var(--f-display); font-stretch: 94%; color: var(--ink); overflow-wrap: normal; hyphens: none; }
.st-cmpcol h3 .ic { color: var(--t-cat); }
.st-cmpcol h3 span { flex: 1 1 auto; min-width: 0; }
.st-cmpcol .cc-x { appearance: none; flex: none; width: 44px; height: 44px; margin: -10px -10px -10px 0; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 700 22px/1 var(--f-body); cursor: pointer; }
.st-cmpcol .cc-x:hover { color: var(--ink); background: var(--hover); }
.st-cmpcol .st-tiles4 { gap: 8px; }
.st-cmpcol .st-tile4 { padding: 10px 12px; }
.st-cmpcol .st-tile4 .n { font-size: clamp(20px, 23cqi, 30px); }
.st-cmpcol .st-tile4 .t { font-size: 13.5px; }
.st-cmpcol .cc-sl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 36px; border-top: 1px solid var(--line); font: 600 15px/1.3 var(--f-body); }
.st-cmpcol .cc-sl a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; display: inline-flex; align-items: center; min-height: 44px; }
.st-cmpcol .cc-sl a:hover { text-decoration: underline; }
.st-cmpcol .cc-sl b { font: 800 17px/1 var(--f-display); font-stretch: 92%; color: var(--ink); }
.st-cmpcol .cc-h { margin: 4px 0 0; font: 700 14.5px/1.3 var(--f-body); color: var(--ink-2); }

/* ============================================================ account */
.st-accttop { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; }
.st-accttop > * { min-width: 0; }
.st-accttop:has(> [hidden]) { grid-template-columns: minmax(0, 1fr); }
.st-shopcard { position: relative; overflow: hidden; border-radius: 20px; padding: 26px 26px 22px; color: #FFFFFF; background-color: #0C0A11; display: flex; flex-direction: column; gap: 16px; min-width: 0;
  background-image:
    radial-gradient(80% 90% at 40% 30%, rgba(255, 46, 147, .20), rgba(139, 44, 255, .07) 45%, transparent 72%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 22px, #030205 22px 26px, rgba(255,255,255,.07) 26px 27px, rgba(255,255,255,.018) 27px 28px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.st-shopcard .st-sign { margin: 0 -6px; min-height: 50px; }
.st-shopcard .st-sign .st-sign-t { font-size: clamp(30px, 4vw, 48px); }
.st-scrow { display: flex; align-items: center; gap: 14px; }
.st-scrow .st-av { width: 56px; height: 56px; grid-row: auto; box-shadow: 0 0 0 2px #0C0A11, 0 0 0 3.5px #D8D2E6; }
.st-scrow .st-av .ltr { font-size: 24px; }
.st-scrow p { min-width: 0; overflow-wrap: break-word; font: 600 16.5px/1.4 var(--f-body); color: #EEEAF8; }
.st-shopcard .st-btns { align-items: center; gap: 6px 18px; margin-top: auto; }
.st .ps-btn.onstage { background: #FFFFFF; color: #1B1036; }
.st .ps-btn.onstage .ic { color: #C0156A; }
.st-shopcard .st-more, .st-shopcard .shop-act { color: #FF9B5E; }
.st-shopcard .shop-act { appearance: none; border: 0; background: none; padding: 0; min-height: 44px; font: 700 15.5px/1.2 var(--f-body); cursor: pointer; }
.st-member { display: flex; flex-direction: column; align-items: flex-start; }
.st-member .since { margin-top: 18px; font: 800 24px/1.15 var(--f-display); font-stretch: 94%; color: var(--ink); text-wrap: balance; }
.st-member .renews { margin-top: 6px; color: var(--ink-2); font: 400 var(--t-body)/1.5 var(--f-body); }
.st-member .st-btns { margin-top: 20px; }
.st-member .st-cap { margin-top: 12px; max-width: 46ch; }
.st-freechip { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 10px; box-shadow: inset 0 0 0 2px var(--line-2); font: 900 19px/1 var(--f-display); color: var(--ink); }
.prochip { display: inline-block; line-height: 0; }
.prochip svg { display: block; max-width: 100%; height: auto; filter: drop-shadow(0 2px 0 rgba(122, 78, 0, .3)) drop-shadow(0 5px 10px rgba(176, 120, 0, .22)); }
:root[data-theme="dark"] .prochip svg { filter: drop-shadow(0 2px 0 rgba(122, 78, 0, .35)) drop-shadow(0 6px 14px rgba(224, 150, 0, .28)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prochip svg { filter: drop-shadow(0 2px 0 rgba(122, 78, 0, .35)) drop-shadow(0 6px 14px rgba(224, 150, 0, .28)); } }
.prochip .st-plainpro { display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border-radius: 9px; background: #FFC531; color: #3A2500; font: 900 19px/1 var(--f-display); line-height: 1; }

.st-fols { list-style: none; margin: 0; padding: 6px 22px; }
.st-fol { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.st-fol:first-child { border-top: 0; }
.st-avl { position: relative; width: 56px; height: 62px; }
.st-avl .av { width: 52px; height: 52px; margin: 2px; box-shadow: 0 0 0 2px var(--card), 0 0 0 4.5px #F0244B; }
.st-livetag { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); padding: 3px 6px 2px; border-radius: 6px; background: #D7193C; color: #FFFFFF;
  font: 800 13px/1 var(--f-display); font-stretch: 100%; letter-spacing: .06em; box-shadow: 0 0 0 2px var(--card); }
.st-fol .who { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.st-fol .h { font: 800 17px/1.2 var(--f-display); font-stretch: 94%; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.st-fol .h::after { content: ""; position: absolute; inset: 0; }
.st-fol .h:hover { text-decoration: underline; }
.st-fol .ttl { display: block; max-width: 100%; font: 600 13.5px/1.35 var(--f-body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-fol .bar { display: block; height: 7px; border-radius: 4px; background: var(--st-track); margin-top: 6px; overflow: hidden; }
.st-fol .bar i { display: block; height: 100%; border-radius: 4px; background: var(--c-rival); }
.st-fol .v { text-align: right; display: grid; justify-items: end; }
.st-fol .v b { font: 900 30px/1 var(--f-display); font-stretch: 86%; color: var(--ink); font-variant-numeric: tabular-nums; }
.st-fol .v span { font: 600 13px/1.3 var(--f-body); color: var(--muted); }
.st-fols-note { padding: 18px 22px; }

.st-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.st-chips li { min-width: 0; max-width: 100%; }
.st-chips .pk, .st-chips .addpick { display: inline-flex; align-items: center; min-height: 48px; max-width: 100%; border-radius: 999px; }
.st-chips .pk { background: var(--tile); box-shadow: inset 0 0 0 1.5px var(--line-2); padding-right: 2px; }
.st-chips .pk > a { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; min-width: 0; padding: 0 2px 0 6px; color: var(--ink);
  font: 700 15.5px/1.2 var(--f-body); text-decoration: none; overflow-wrap: break-word; }
.st-chips .pk > a:hover span { text-decoration: underline; }
.st-chips .pk.catpick { background: transparent; box-shadow: inset 0 0 0 2px var(--c-cat); }
.st-chips .pk.catpick > a { padding-left: 14px; }
.st-chips .pk.catpick .ic { color: var(--t-cat); }
.st-chips .pk .star { flex: none; width: 46px; height: 46px; display: inline-grid; place-items: center; border-radius: 50%; padding: 0; }
.st-chips .av { width: 36px; height: 36px; }
.st-chips .av .ltr { font-size: 15px; }
.st-chips em { font-style: normal; display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 999px; background: #0B6E8A; color: #FFFFFF; font: 800 14px/1 var(--f-body); white-space: nowrap; }
:root[data-theme="dark"] .st-chips em { background: var(--c-cat); color: #04161C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .st-chips em { background: var(--c-cat); color: #04161C; } }
.st-chips .addpick { appearance: none; border: 0; gap: 9px; padding: 0 16px 0 13px; background: transparent; color: var(--ink-2); outline: 2px dashed var(--line-2); outline-offset: -2px;
  font: 700 15.5px/1.2 var(--f-body); cursor: pointer; }
.st-chips .addpick .ic { color: var(--muted); }
.st-chips .addpick:hover { color: var(--ink); }
.st-pinform { display: flex; flex-wrap: wrap; gap: 10px; margin: -4px 0 16px; }
.st-pinform input { flex: 1 1 200px; min-width: 0; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 0; background: var(--card); color: var(--ink);
  font: 600 16px/1 var(--f-body); box-shadow: inset 0 0 0 1.5px var(--line-2); }

.st-next24 { padding: 8px 26px 12px; }
.st-rail24 { list-style: none; margin: 0; padding: 0; }
.st-stop { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 0 18px; }
.st-node { margin: 0; padding-top: 16px; text-align: right; }
.st-node b { display: block; font: 900 28px/1 var(--f-display); font-stretch: 86%; color: var(--ink); white-space: nowrap; }
.st-node span { display: block; margin-top: 5px; font: 800 13.5px/1.2 var(--f-display); font-stretch: 100%; color: var(--t-time); text-transform: uppercase; letter-spacing: .08em; }
.st-ups { list-style: none; margin: 0; padding: 0 0 0 24px; position: relative; border-left: 3px solid var(--line-2); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 30px; }
.st-ups::before { content: ""; position: absolute; left: -10px; top: 22px; width: 17px; height: 17px; border-radius: 50%; background: var(--c-time); box-shadow: 0 0 0 4px var(--card); }
.st-up { position: relative; display: grid; grid-template-columns: 70px 40px minmax(0, 1fr); grid-template-areas: "tm av who" "tm av cc"; gap: 4px 12px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); min-width: 0; }
.st-ups > .st-up:nth-child(-n+2) { border-top: 0; }
.st-up .tm { grid-area: tm; align-self: start; padding-top: 3px; font: 800 15px/1.2 var(--f-display); font-stretch: 92%; color: var(--t-time); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-up .av { grid-area: av; width: 40px; height: 40px; }
.st-up .who { grid-area: who; min-width: 0; display: flex; flex-direction: column; }
.st-up .h { font: 800 16px/1.25 var(--f-display); font-stretch: 94%; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.st-up .h::after { content: ""; position: absolute; inset: 0; }
.st-up .h:hover { text-decoration: underline; }
.st-up .ttl { display: block; max-width: 100%; font: 500 14px/1.35 var(--f-body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-up .cc { grid-area: cc; justify-self: start; display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 10px 0 7px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--line-2); font: 700 13px/1 var(--f-body); color: var(--ink-2); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.st-up .cc .ic { color: var(--t-cat); }

.st-mailintro { color: var(--ink-2); font-size: 15.5px; margin-bottom: 8px; }
.st-mails { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.st-mail { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); cursor: pointer; }
.st-mails > li:nth-child(-n+2) > .st-mail { border-top: 0; }
.st-mail .mi { display: flex; } .st-mail .mi .ic { color: var(--t-shows); }
.st-mail .mt { display: grid; gap: 2px; min-width: 0; }
.st-mail .mt b { font: 700 16.5px/1.25 var(--f-body); color: var(--ink); }
.st-mail .mt span { font: 500 14.5px/1.35 var(--f-body); color: var(--ink-2); }
.st-sw { position: relative; display: inline-block; width: 54px; height: 32px; flex: none; }
.st-sw input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.st-sw i { position: absolute; inset: 0; border-radius: 999px; background: var(--raise); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.st-sw i::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(40,20,70,.22), 0 1px 3px rgba(40,20,70,.3); }
.st-sw input:checked + i { background: var(--c-shows); box-shadow: none; }
.st-sw input:checked + i::after { left: 26px; }
.st-sw input:focus-visible + i { outline: 2px solid var(--focus); outline-offset: 2px; }
.st-sw input:disabled + i { opacity: .55; }
.st-mailmsg { margin-top: 10px; }
.st-mailmsg:empty { display: none; }

.st-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.st-seg button { appearance: none; border: 0; background: none; min-height: 44px; padding: 0 16px; border-radius: 10px; color: var(--ink-2); font: 700 15px/1 var(--f-body); cursor: pointer; }
.st-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.st-signin { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.st-signin .who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.st-signin .who .ic { color: var(--t-shows); flex: none; }
.st-signin .who p { font: 700 16.5px/1.35 var(--f-body); color: var(--ink); overflow-wrap: anywhere; }
.st-signin .who p span { display: block; font: 500 14.5px/1.4 var(--f-body); color: var(--ink-2); }
.st-linkbtn { appearance: none; border: 0; background: none; padding: 12px 0; margin: -12px 0; display: inline-block; color: var(--link); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.st-signin .st-btns { justify-content: flex-start; }
.st-danger { appearance: none; border: 0; background: none; padding: 0; display: inline-flex; align-items: center; min-height: 44px; color: var(--down); font: 700 15.5px/1.2 var(--f-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.st-acctmsg { margin-top: 10px; }
.st-acctmsg:empty { display: none; }
@media (max-width: 1099px) {
  .st-signin { grid-template-columns: minmax(0, 1fr) auto; } .st-signin .who { grid-column: 1 / -1; }
  .st-ups { grid-template-columns: minmax(0, 1fr); } .st-ups > .st-up:nth-child(2) { border-top: 1px solid var(--line); }
}
@media (max-width: 899px) { .st-accttop { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 699px) {
  .st-shopcard { padding: 20px 16px 18px; border-radius: 16px; }
  .st-fols { padding: 4px 16px; }
  .st-fol { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "a w" "a v"; gap: 2px 14px; align-items: start; }
  .st-avl { grid-area: a; } .st-fol .who { grid-area: w; } .st-fol .v { grid-area: v; justify-items: start; display: flex; align-items: baseline; gap: 6px; }
  .st-fol .v b { font-size: 24px; }
  .st-next24 { padding: 4px 14px 8px; }
  .st-stop { grid-template-columns: minmax(0, 1fr); }
  .st-node { text-align: left; padding: 16px 0 6px 26px; display: flex; align-items: baseline; gap: 10px; position: relative; }
  .st-node span { margin: 0; }
  .st-ups { border-left: 0; padding-left: 0; }
  .st-ups::before { left: 0; top: -27px; width: 15px; height: 15px; }
  .st-up { grid-template-columns: 40px auto minmax(0, 1fr); grid-template-areas: "av who who" "av tm cc"; gap: 4px 10px; }
  .st-up .tm { align-self: center; padding-top: 0; font-size: 14px; }
  .st-ups > .st-up:nth-child(2) { border-top: 1px solid var(--line); }
  .st-mails { grid-template-columns: minmax(0, 1fr); }
  .st-mails > li:nth-child(2) > .st-mail { border-top: 1px solid var(--line); }
  .st-signin { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 359px) {
  .st-up { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "av who" "av tm" "av cc"; }
}

/* browse: the tree as rows, each category with its live line and actions */
.st-tree { padding: 10px 14px; }
.st-tree .tree-empty { color: var(--ink-2); padding: 12px 8px; font: 500 15px/1.45 var(--f-body); font-style: normal; }
.st-treeh { margin: 14px 8px 6px; font: 800 17px/1.2 var(--f-display); font-stretch: 94%; color: var(--ink); }
.tree-parent { appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 8px; border: 0; border-top: 1px solid var(--line); background: none;
  color: var(--ink); text-align: left; cursor: pointer; }
.st-tree > .tree-parent:first-child { border-top: 0; }
.tree-parent::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); margin-right: 4px; }
.tree-parent[aria-expanded="true"]::before { transform: rotate(45deg); }
.tree-parent .pl { font: 800 17px/1.2 var(--f-display); font-stretch: 94%; }
.tree-parent .pc { margin-left: auto; font: 600 14px/1.2 var(--f-body); color: var(--muted); }
.tree-parent:hover .pl { text-decoration: underline; }
.tree-children { margin: 0 0 8px 12px; padding-left: 12px; border-left: 2px solid var(--line); }
.leaf-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 8px; border-top: 1px solid var(--line); }
.tree-children > .leaf-row:first-child { border-top: 0; }
.leaf-row .ll { display: grid; gap: 2px; min-width: 0; }
.leaf-row .ll b { font: 700 16px/1.3 var(--f-body); color: var(--ink); overflow-wrap: normal; hyphens: none; }
.leaf-row .ll small { font: 600 14px/1.3 var(--f-body); color: var(--ink-2); }
.leaf-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: flex-end; }
.leaf-acts button:not(.star) { appearance: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-2); font: 700 14.5px/1 var(--f-body); cursor: pointer; }
.leaf-acts button:not(.star):hover { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.leaf-acts button.added { background: var(--cta); color: var(--cta-ink); box-shadow: none; }
.leaf-acts .star { width: 44px; height: 44px; display: inline-grid; place-items: center; }
.leaf-detail { grid-column: 1 / -1; margin-top: 6px; }
.cat-mini { display: grid; gap: 12px; padding: 14px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.cat-mini .cm-sellers { display: grid; }
.st .cc-sl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 44px; border-top: 1px solid var(--line); font: 600 15px/1.3 var(--f-body); }
.st .cc-sl a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; display: inline-flex; align-items: center; min-height: 44px; }
.st .cc-sl a:hover { text-decoration: underline; }
.st .cc-sl b { font: 800 17px/1 var(--f-display); font-stretch: 92%; color: var(--ink); }
@media (max-width: 699px) { .leaf-row { grid-template-columns: minmax(0, 1fr); } .leaf-acts { justify-content: flex-start; } }

/* compare's add box and its set */
.st-cmpbox .cmp-add { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.st-cmpbox .cmp-add input { flex: 1 1 220px; min-width: 0; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 0; background: var(--bg); color: var(--ink);
  font: 600 16px/1 var(--f-body); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.cmp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cmp-chips:empty { display: none; }
.cmp-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 2px 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--c-cat);
  color: var(--ink); font: 700 15px/1 var(--f-body); }
.cmp-chip button { appearance: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--muted); font: 700 20px/1 var(--f-body); cursor: pointer; }
.cmp-chip button:hover { color: var(--ink); background: var(--hover); }
.st-cmpbox .tree-empty { color: var(--ink-2); font: 500 15px/1.4 var(--f-body); font-style: normal; padding: 0; }
.st-cmpbox #cmp-note { margin-top: 12px; }
#compare-cols .tree-empty { color: var(--ink-2); font: 500 15px/1.4 var(--f-body); font-style: normal; }
.st-boom .gain small { font: 700 14px/1 var(--f-body); margin-left: 2px; color: var(--up); }
.st-boom .who .h { font-family: var(--f-body); font-weight: 700; font-size: 15.5px; }
.st-member .st-plainpro { font-size: 19px; }
.st-mhead[hidden] { display: none; }
.st-trows.capped12 > li:nth-child(n+13) { display: none; }
.st .empty { font-style: normal; font-size: 15px; line-height: 1.45; color: var(--ink-2); padding: 14px 4px; }