/* SteamPunk. Sizes and colors follow the redesign canvas (docs/redesign.md): near-black ink, frosted glass over
   artwork, Archivo at 62% width for game names, Geist Mono for stickers and numbers. theme.js overwrites the tokens. */
:root {
  --bg: #0a0a0b; --s1: #141416; --s2: #1d1d20; --s3: #29292d; --line: #2b2b30;
  --fg: #f5f4f0; --mut: #a3a2a9; --acc: #ff2d7a; --acc-ink: #0a0a0b; --hi: #f6e21c; --good: #4ade80;
  --glass-bg: rgba(30, 30, 34, .62); --glass-line: rgba(255, 255, 255, .12); --glass-shadow: 0 0 #0000; --glass-fg: #fff;
  --tab-fg: rgba(245, 244, 240, .88); --tab-on: rgba(255, 255, 255, .13); --body2: #d6d5d0; --menu-bg: rgba(22, 22, 26, .84);
  /* Safe areas and chrome sizes (docs/pwa.md). --safe-t becomes the title bar height in window-controls-overlay mode. */
  --safe-t: env(safe-area-inset-top, 0px);
  --top: max(var(--safe-t), 20px);
  --page-gl: max(14px, env(safe-area-inset-left, 0px)); --page-gr: max(14px, env(safe-area-inset-right, 0px));
  --tabbar-h: 55px; --tabbar-gap: max(18px, calc(env(safe-area-inset-bottom, 0px) - 8px));
  --tabbar-offset: calc(var(--tabbar-h) + var(--tabbar-gap));
  /* How far iOS 26 home screen apps end fixed layers short of the screen bottom; pwa.js measures it. */
  --vp-gap: 0px;
  --mono: "Geist Mono", ui-monospace, monospace;
  --sans: Archivo, system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --glass-bg: rgba(255, 255, 255, .74); --glass-line: rgba(0, 0, 0, .07); --glass-shadow: 0 8px 30px rgba(0, 0, 0, .10); --glass-fg: #111113;
  --tab-fg: #2a2a2e; --tab-on: rgba(0, 0, 0, .07); --body2: #3a3940; --menu-bg: rgba(255, 255, 255, .92);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { font-family: var(--sans); color: var(--fg); -webkit-font-smoothing: antialiased; overflow: hidden; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
button:disabled { cursor: default; opacity: .5; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin: 0; }
input { font: inherit; color: inherit; }
img { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 10px; top: -49px; z-index: 100; padding: 8px 12px; border-radius: 10px; background: var(--acc); color: var(--acc-ink); font-weight: 700; }
.skip-link:focus { top: 10px; }

/* ---------- shared pieces ---------- */
.i { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.disp { font-stretch: 62%; font-weight: 900; text-transform: uppercase; line-height: .88; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.glass { background: var(--glass-bg); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); box-shadow: inset 0 0 0 1px var(--glass-line), var(--glass-shadow); color: var(--glass-fg); }
.stk { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 5px; background: var(--hi); color: #0a0a0b; font: 700 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; transform: rotate(-3deg); white-space: nowrap; }
.stk.sm { height: 19px; padding: 0 6px; font-size: 10px; }
.stk.off { background: var(--acc); color: var(--acc-ink); letter-spacing: 0; }
.stk.yel { background: var(--hi); color: #0a0a0b; height: 17px; padding: 0 5px; letter-spacing: 0; }
.pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--s2); font: 600 12px/1 var(--sans); white-space: nowrap; }
.pill .i { width: 13px; height: 13px; }
.pill .m { color: var(--mut); font-weight: 500; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }
.dot.mid { background: #e5c34b; } .dot.low { background: #f08a4b; }
.lbl { font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.meta { display: flex; align-items: center; gap: 5px; font: 500 12px/1 var(--sans); color: var(--mut); min-width: 0; }
.meta > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.price { font: 600 13px/1 var(--sans); }
.price s { font-weight: 500; color: var(--mut); margin-left: 4px; }
.cb { width: 38px; height: 38px; border-radius: 50%; background: var(--s2); display: grid; place-items: center; flex: none; }
.sw { width: 44px; height: 26px; border-radius: 13px; background: var(--s3); position: relative; flex: none; transition: background .2s; }
.sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: left .2s; }
.sw.on { background: var(--acc); }
.sw.on::after { left: 20px; }
.chips-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.chips-row::-webkit-scrollbar, .car::-webkit-scrollbar, .tagg::-webkit-scrollbar { display: none; }
.chip { flex: none; display: flex; align-items: center; gap: 5px; height: 31px; padding: 0 10px; border-radius: 999px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); font: 600 13px/1 var(--sans); white-space: nowrap; }
.chip .i { width: 13px; height: 13px; color: var(--acc); }
.chip .more { width: 24px; height: 24px; margin-right: -6px; display: grid; place-items: center; border-radius: 50%; color: var(--mut); }
.chip .more .i { color: var(--mut); }
.btn { height: 34px; padding: 0 10px; border-radius: 10px; background: var(--s2); display: inline-flex; align-items: center; justify-content: center; gap: 5px; font: 600 13px/1 var(--sans); white-space: nowrap; flex: none; }
.btn .i { width: 15px; height: 15px; }
.btn.pri { background: var(--acc); color: var(--acc-ink); }
.btn.on { background: color-mix(in srgb, var(--acc) 16%, transparent); box-shadow: inset 0 0 0 1.5px var(--acc); }
.btn .n { min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--acc); color: var(--acc-ink); font: 700 10px/17px var(--mono); text-align: center; }
.sh { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.sh h2 { font: 800 18px/1.05 var(--sans); font-stretch: 85%; }
.sh p { font: 500 12px/1.3 var(--sans); color: var(--mut); margin-top: 4px; }
.sh > a, .sh > button.link { font: 600 13px/1 var(--sans); color: var(--acc); white-space: nowrap; padding-bottom: 2px; }
.empty { padding: 22px 4px; color: var(--mut); font: 500 13px/1.5 var(--sans); }
.empty h3 { color: var(--fg); font: 800 18px/1.1 var(--sans); font-stretch: 85%; margin-bottom: 6px; }
.empty .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.art-wrap { position: relative; display: block; overflow: hidden; background: var(--s2); }
.art-wrap canvas, .art-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art-wrap img { opacity: 0; transition: opacity .25s; }
.art-wrap img.on { opacity: 1; }
.abox { position: relative; }
.abox > button:first-child { display: block; width: 100%; }
.txt { display: flex; flex-direction: column; gap: 6px; text-align: left; min-width: 0; }
.c .txt { gap: 5px; }

/* Sideways scrollers bleed into the page gutters by exactly the gutter on each side, so a notched landscape phone
   (different left and right insets) never ends up wider than the viewport. Never hand-roll -14px margins. */
.bleed-x, .chips-row, .car, .tagg, .ctl, .drail, .tabs, .stags { margin-inline: calc(-1 * var(--page-gl)) calc(-1 * var(--page-gr)); padding-inline: var(--page-gl) var(--page-gr); }

/* ---------- app shell ---------- */
.app { position: fixed; inset: 0 0 calc(0px - var(--vp-gap)); }
#mainContent { position: absolute; inset: 0; }
.view { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; scroll-padding-top: var(--top); scroll-padding-bottom: var(--tabbar-offset); }
.page { padding: calc(var(--top) + 9px) var(--page-gr) calc(var(--tabbar-offset) + 39px) var(--page-gl); display: flex; flex-direction: column; gap: 24px; max-width: 1180px; margin: 0 auto; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.head h1, .navrow h1 { font: 900 30px/1 var(--sans); font-stretch: 75%; letter-spacing: -.01em; }
.head .grow { flex: 1; min-width: 0; }
.head p { font: 500 13px/1 var(--sans); color: var(--mut); margin-top: 5px; }
.navrow { display: flex; align-items: center; gap: 8px; }
.ib { width: 38px; height: 38px; border-radius: 50%; background: var(--s2); display: grid; place-items: center; flex: none; position: relative; }
.ib .i { width: 17px; height: 17px; }
.av { width: 34px; height: 34px; border-radius: 50%; background: var(--s2); display: grid; place-items: center; color: var(--mut); flex: none; position: relative; overflow: hidden; }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av .badge, .ib .badge { position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 2px var(--bg); }
.fade { position: fixed; left: 0; right: 0; bottom: calc(0px - var(--vp-gap)); height: calc(var(--tabbar-offset) + 39px); background: linear-gradient(color-mix(in srgb, var(--bg) 0%, transparent), color-mix(in srgb, var(--bg) 92%, transparent) 60%); z-index: 19; pointer-events: none; }
.app[data-v="feed"] .fade, .app[data-v="search"] .fade { display: none; }

/* bottom tab bar (phone) */
.tb { position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(var(--tabbar-gap) - var(--vp-gap)); height: var(--tabbar-h); display: flex; gap: 8px; z-index: 20; }
.tb nav { flex: 1; display: flex; align-items: center; padding: 4px; border-radius: 999px; position: relative; }
.tb nav a { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 999px; font: 600 10px/1 var(--sans); color: var(--tab-fg); position: relative; z-index: 1; }
.tb nav a .i { width: 22px; height: 22px; }
.tb nav a[aria-current="page"] { color: var(--acc); }
.tb nav a[aria-current="page"] .tlabel { color: var(--glass-fg, var(--fg)); }
.tb nav a[aria-current="page"] .i, .topbar .tabs2 a[aria-current="page"] .i { stroke-width: 2.4; }
.tb .sb { width: var(--tabbar-h); height: var(--tabbar-h); border-radius: 50%; display: grid; place-items: center; flex: none; }
.tb .sb .i { width: 22px; height: 22px; }
/* One pill per bar; app.js placePills() sets --pill-x and --pill-w from the current tab. */
.tpill { position: absolute; left: 0; top: 4px; bottom: 4px; width: var(--pill-w, 0px); transform: translateX(var(--pill-x, 0px)); border-radius: 999px; background: var(--tab-on); pointer-events: none; }
/* Header and tab bar are app chrome: no text selection or callouts. Content stays selectable. */
.app-chrome { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.cnt { position: absolute; top: 4px; left: 50%; margin-left: 5px; min-width: 15px; height: 14px; padding: 0 4px; border-radius: 7px; background: var(--acc); color: var(--acc-ink); font: 700 10px/14px var(--mono); text-align: center; }
.app[data-v="feed"] .tb, #v-feed, .feed-dark { --glass-bg: rgba(30, 30, 34, .56); --glass-line: rgba(255, 255, 255, .13); --glass-shadow: 0 0 #0000; --glass-fg: #fff; --tab-fg: rgba(245, 244, 240, .88); --tab-on: rgba(255, 255, 255, .13); }
.app[data-v="search"] .tb { display: none; }
/* top floating tabs (iPad and wider) */
.topbar { display: none; }

/* ---------- feed (phone) ---------- */
#v-feed { overflow: hidden; background: #0a0a0b; color: #fff; }
.feed { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior-y: contain; }
.feed::-webkit-scrollbar { display: none; }
.slide { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #0a0a0b; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.slide .poster { position: absolute; inset: 0; }
.slide .poster canvas, .slide .poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide .poster img { opacity: 0; transition: opacity .3s; }
.slide .poster img.on { opacity: 1; }
.slide .amb { position: absolute; left: -80px; top: -80px; width: calc(100% + 160px); height: calc(100% + 160px); object-fit: cover; filter: blur(44px) saturate(1.6) brightness(.5); }
.slide .shot { position: absolute; left: 0; top: calc(var(--top) + 106px); width: 100%; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: 0 30px 70px rgba(0, 0, 0, .55); background: #000; }
.slide video.shot { opacity: 0; transition: opacity .5s; }
.slide video.shot.on { opacity: 1; }
.slide[data-kind="art"] .amb, .slide[data-kind="art"] .shot, .slide:not([data-kind="art"]) .poster { display: none; }
.slide[data-kind="trailer"] img.shot.hide { visibility: hidden; }
.scrim-t { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--top) + 114px); background: linear-gradient(rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)); pointer-events: none; }
.scrim-b { position: absolute; left: 0; right: 0; bottom: 0; height: 540px; background: linear-gradient(rgba(10, 10, 11, 0), rgba(10, 10, 11, .7) 36%, rgba(10, 10, 11, .96) 80%); pointer-events: none; }
.tz { position: absolute; top: calc(var(--top) + 63px); bottom: 0; z-index: 2; }
.tz-l { left: 0; width: 50%; }
.tz-r { right: 0; width: 50%; }
.segs { position: absolute; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); top: calc(var(--top) + 4px); display: flex; gap: 4px; z-index: 5; pointer-events: none; }
.seg { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.seg.on { background: #fff; }
.trl { position: absolute; left: calc(10px + env(safe-area-inset-left, 0px)); top: calc(var(--top) + 116px); z-index: 4; height: 28px; padding: 0 10px 0 8px; gap: 5px; border-radius: 999px; display: inline-flex; align-items: center; font: 600 12px/1 var(--sans); }
.trl .i { width: 14px; height: 14px; }
/* Autoplay countdown: a bar along the trailer button's bottom edge fills over the delay (docs/autoplay.md). */
.trl, .wfeed .mute { overflow: hidden; }
.trl[data-state="wait"]::after, .wfeed .mute[data-state="wait"]::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--acc); transform-origin: left; animation: trailer-wait var(--wait, 2s) linear both; }
@keyframes trailer-wait { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.scrub { position: absolute; left: 0; width: 100%; top: calc(var(--top) + 106px + 100vw * 9 / 16 - 3px); height: 3px; background: rgba(255, 255, 255, .22); z-index: 4; pointer-events: none; }
.scrub span { display: block; width: 0; height: 3px; background: var(--acc); }
.rail { position: absolute; right: calc(8px + env(safe-area-inset-right, 0px)); bottom: calc(var(--tabbar-offset) + 22px); display: flex; flex-direction: column; gap: 10px; z-index: 6; }
.rb { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 48px; font: 600 10px/1 var(--sans); color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.rc { width: 43px; height: 43px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.rc.on { background: var(--acc); color: var(--acc-ink); box-shadow: none; }
.rc .i { width: 21px; height: 21px; }
.rc.on .i, .qs[aria-pressed="true"] .i, .rm .i { fill: currentColor; }
.info { position: absolute; left: var(--page-gl); right: calc(64px + env(safe-area-inset-right, 0px)); bottom: calc(var(--tabbar-offset) + 17px); z-index: 6; display: flex; flex-direction: column; gap: 9px; }
.info .row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.info .pill { color: #fff; }
.info .pill .m { color: rgba(255, 255, 255, .74); }
.info .sale { background: var(--acc); color: var(--acc-ink); }
.info .sale s { font-weight: 500; opacity: .75; }
.info .name { font-size: 52px; color: #fff; overflow-wrap: anywhere; }
.info .name.l { font-size: 43px; } .info .name.xl { font-size: 34px; }
.info .by { font: 500 13px/1.3 var(--sans); color: rgba(255, 255, 255, .82); margin-top: 7px; }
.info .title { text-align: left; display: block; }
.slide .info { pointer-events: none; }
.slide .info button, .slide .info a { pointer-events: auto; }
.why { display: flex; align-items: center; gap: 6px; font: 500 13px/1.3 var(--sans); color: #fff; }
.why .i { width: 14px; height: 14px; color: var(--acc); }
.info .about { font: 400 13px/1.4 var(--sans); color: rgba(255, 255, 255, .82); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.info .about[hidden] { display: none; }
/* Short phones: one line keeps the info block clear of the 16:9 media above it. */
@media (max-height: 700px) { .info .about { -webkit-line-clamp: 1; line-clamp: 1; } }
.info .tags { display: flex; gap: 5px; flex-wrap: wrap; }
.tg { display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 9px; border-radius: 999px; font: 600 12px/1 var(--sans); color: #fff; }
.tg .i { width: 14px; height: 14px; }
.tg.det { background: #fff; color: #0a0a0b; padding: 0 6px 0 10px; }
.ftop { position: absolute; left: calc(5px + env(safe-area-inset-left, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); top: calc(var(--top) + 12px); height: 45px; display: flex; align-items: center; justify-content: space-between; z-index: 8; pointer-events: none; }
.ftop > * { pointer-events: auto; }
.sel { display: flex; align-items: center; gap: 4px; height: 38px; padding: 0 6px 0 8px; font: 800 16px/1 var(--sans); color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.sel .i { width: 17px; height: 17px; }
.sel [data-feed-name] { max-width: min(50vw, 260px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftop .ib { color: #fff; background: var(--glass-bg); }
.ftop .badge { top: 7px; right: 7px; width: 8px; height: 8px; box-shadow: none; }
.like-pill { position: absolute; left: var(--page-gl); top: calc(var(--top) + 57px); z-index: 7; display: inline-flex; align-items: center; gap: 5px; height: 29px; padding: 0 4px 0 10px; border-radius: 999px; font: 600 12px/1 var(--sans); }
.like-pill b { max-width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.like-pill button { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.like-pill .i { width: 14px; height: 14px; }
.fmenu { position: absolute; left: calc(10px + env(safe-area-inset-left, 0px)); top: calc(var(--top) + 57px); width: min(300px, calc(100vw - 32px)); max-height: calc(100dvh - var(--top) - 150px); overflow-y: auto; overscroll-behavior-y: contain; padding: 5px; border-radius: 19px; z-index: 40; display: flex; flex-direction: column; background: rgba(22, 22, 26, .84); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), 0 20px 50px rgba(0, 0, 0, .4); color: #fff; }
.fmenu > .md, .fm-custom { flex-shrink: 0; }
.fm-label { margin: 8px 10px 4px; font: 600 11px/1.3 var(--sans); color: rgba(255, 255, 255, .6); }
.fm-custom { display: flex; align-items: center; }
.fm-custom .md { min-width: 0; flex: 1; }
.fm-custom .md > span { min-width: 0; }
.fm-custom b, .fm-custom small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-options { display: grid; place-items: center; width: 40px; min-height: 44px; flex-shrink: 0; border-radius: 12px; }
.fm-options:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.md { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 10px; border-radius: 14px; text-align: left; color: inherit; width: 100%; }
.md > span { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.md b { font: 700 13px/1.1 var(--sans); }
.md small { font: 500 11px/1.25 var(--sans); color: rgba(255, 255, 255, .7); }
.md.on, .md:focus-visible { background: rgba(255, 255, 255, .12); outline: none; }
.md .i { width: 15px; height: 15px; color: var(--acc); }
.end { height: 100%; scroll-snap-align: start; display: grid; place-items: center; padding: 19px; text-align: center; }
.end h2 { font: 900 36px/.9 var(--sans); font-stretch: 62%; text-transform: uppercase; margin-bottom: 8px; }
.end p { color: rgba(255, 255, 255, .7); margin-bottom: 14px; }
.feed-empty { position: absolute; inset: 0; display: grid; place-items: center; }

/* wide feed (iPad landscape, desktop) */
/* Always dark ink like the phone feed: the blurred artwork behind it is dark in every theme. Accent colors still come from the theme. */
.wfeed { position: absolute; inset: 0; display: none; --s1: #141416; --s2: rgba(255, 255, 255, .09); --s3: rgba(255, 255, 255, .16); --line: rgba(255, 255, 255, .12); --fg: #f5f4f0; --mut: #a8a7ae; --body2: #d6d5d0; --bg: #0a0a0b; --good: #4ade80; color: var(--fg);
  --panel-w: clamp(300px, 24vw, 420px);
  /* The player column takes everything the panel leaves. Percentages resolve against .wfeed, since .left and .panel are its direct children. */
  --pw: calc(100% - var(--panel-w) - 78px);
  --gut: 26px; }
.wfeed .amb { position: absolute; left: -100px; top: -100px; width: calc(100% + 200px); height: calc(100% + 200px); object-fit: cover; filter: blur(70px) saturate(1.5) brightness(.35); }
.wfeed .left { position: absolute; left: var(--gut); top: 75px; bottom: 20px; width: var(--pw); display: flex; flex-direction: column; gap: 14px; z-index: 5; }
/* The player fills the height the name and action row leave, so its aspect follows the window. Media show whole over a blurred copy. */
.wfeed .player { position: relative; flex: 1; min-height: 180px; border-radius: 17px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.wfeed .player > img, .wfeed .player > video, .wfeed .player > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.wfeed .player > canvas { object-fit: cover; }
.wfeed .player > .pbg { object-fit: cover; filter: blur(28px) saturate(1.3) brightness(.55); transform: scale(1.12); }
.wfeed .player:has(video.on) > img:not(.pbg) { visibility: hidden; }
.wfeed .player video { opacity: 0; transition: opacity .5s; } .wfeed .player video.on { opacity: 1; }
.wfeed .player .segs { top: 10px; gap: 4px; }
.wfeed .mute { position: absolute; left: 12px; bottom: 12px; height: 29px; padding: 0 10px; border-radius: 999px; display: flex; align-items: center; gap: 5px; font: 600 12px/1 var(--sans); z-index: 2; }
.wfeed .mute .i { width: 14px; height: 14px; }
.wfeed .pager { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; pointer-events: none; }
.wfeed .pager button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; pointer-events: auto; transition: opacity .15s; }
@media (hover: hover) {
  .wfeed .pager button { opacity: 0; }
  .wfeed .player:hover .pager button, .wfeed .pager button:focus-visible { opacity: 1; }
}
.wfeed .row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wfeed .pill { background: var(--s2); color: var(--fg); }
.wfeed .wname { font-size: 51px; margin-top: 8px; overflow-wrap: anywhere; }
.wfeed .wname.l { font-size: 41px; } .wfeed .wname.xl { font-size: 33px; }
.wfeed .by { font: 500 13px/1.3 var(--sans); color: var(--mut); margin-top: 6px; }
.wfeed .acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wfeed .acts > * { flex: none; }
.ab { height: 41px; padding: 0 14px; border-radius: 12px; background: var(--s2); display: flex; align-items: center; gap: 6px; font: 700 13px/1 var(--sans); color: var(--fg); }
.ab .i { width: 16px; height: 16px; }
.ab kbd { font: 500 11px/1 var(--mono); color: var(--mut); }
.ab.pri { background: var(--acc); color: var(--acc-ink); }
.ab.pri kbd { color: inherit; opacity: .7; }
.ab.pri.on { background: var(--s2); color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--acc); }
.ab.pri.on .i, .dbtn.pri.on .i { fill: var(--acc); stroke: var(--acc); }
.wfeed .acts > .next { flex: 0 1 auto; min-width: 0; }
.wfeed .next { display: flex; align-items: center; gap: 8px; height: 41px; padding: 0 10px 0 4px; border-radius: 12px; background: var(--s2); margin-left: auto; font: 500 11px/1.2 var(--sans); color: var(--mut); text-align: left; }
.wfeed .next .art-wrap { width: 23px; height: 34px; border-radius: 5px; flex: none; }
.wfeed .next > span { min-width: 0; }
.wfeed .next b { color: var(--fg); font: 700 13px/1.2 var(--sans); display: block; max-width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfeed .next .i { width: 15px; height: 15px; }
.wfeed .panel { position: absolute; left: calc(var(--gut) + var(--pw) + 26px); width: var(--panel-w); top: 75px; bottom: 20px; border-radius: 21px; background: rgba(18, 18, 20, .82); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding: 18px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; z-index: 5; scrollbar-width: thin; overscroll-behavior: contain; }
.wfeed .panel .big .disp { font-size: 43px; }
.wfeed .panel .p { font: 400 13px/1.5 var(--sans); color: var(--body2); }
.wfeed .panel .tile { background: var(--s2); padding: 10px; gap: 5px; }
.wfeed .panel .tile b { font-size: 14px; }
.wfeed .panel .wabout .p { margin-top: 6px; }
.wfeed .panel .ptags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.wfeed .panel .ptag { height: 28px; padding: 0 9px; border-radius: 9px; background: var(--s2); display: flex; align-items: center; font: 600 12px/1 var(--sans); }
.sims { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.simr { display: flex; align-items: center; gap: 8px; text-align: left; width: 100%; }
.simr .art-wrap { width: 83px; height: 39px; border-radius: 7px; flex: none; }
.simr div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.simr b { font: 700 13px/1.1 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.simr small { display: flex; align-items: center; gap: 4px; font: 500 11px/1 var(--sans); color: var(--mut); }
.simr em { font: 700 10px/1 var(--mono); font-style: normal; color: var(--mut); }

/* ---------- detail sheet ---------- */
.overlay { position: fixed; inset: 0 0 calc(0px - var(--vp-gap)); z-index: 30; }
.overlay.dim { background: rgba(0, 0, 0, .55); }
#dOverlay { background: #000; }
.peek { position: absolute; left: 14px; right: 14px; top: 14px; height: 120px; border-radius: 30px 30px 0 0; overflow: hidden; opacity: .5; }
.peek canvas, .peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dsheet { position: absolute; left: 0; right: 0; top: calc(var(--safe-t) + 38px); bottom: 0; background: var(--bg); color: var(--fg); border-radius: 24px 24px 0 0; overflow-y: auto; overscroll-behavior: contain; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.dsheet.drag { transition: none; }
.dsheet { --page-gl: max(14px, env(safe-area-inset-left, 0px)); --page-gr: max(14px, env(safe-area-inset-right, 0px)); }
.dbody { padding: 6px var(--page-gr) calc(32px + env(safe-area-inset-bottom, 0px)) var(--page-gl); display: flex; flex-direction: column; gap: 18px; max-width: 640px; margin: 0 auto; }
.grab { width: 33px; height: 5px; border-radius: 3px; background: #46464c; margin: 0 auto; flex: none; }
.dhdr { display: flex; align-items: center; gap: 6px; margin-top: -8px; }
.dsheet:focus { outline: none; }
.dhdr .sp { flex: 1; }
.player { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.player > img, .player > canvas, .player > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player > img { opacity: 0; transition: opacity .2s; } .player > img.on { opacity: 1; }
.play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -24px 0 0 -24px; border-radius: 50%; display: grid; place-items: center; background: rgba(30, 30, 34, .56); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); color: #fff; }
.play .i { width: 22px; height: 22px; fill: #fff; stroke: none; }
.plab { position: absolute; left: 8px; bottom: 8px; height: 22px; padding: 0 8px; border-radius: 999px; background: rgba(0, 0, 0, .6); font: 600 11px/22px var(--sans); color: #fff; }
.thumbs { display: flex; gap: 6px; margin-top: -10px; overflow-x: auto; scrollbar-width: none; padding: 4px; margin-left: -4px; margin-right: -4px; }
.th { width: calc((100% - 18px) / 4); min-width: 65px; aspect-ratio: 83 / 47; border-radius: 8px; overflow: hidden; opacity: .6; flex: none; position: relative; background: var(--s2); }
.th img { width: 100%; height: 100%; object-fit: cover; }
.th.on { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--acc); }
.dname { font-size: 48px; overflow-wrap: anywhere; }
.dname.l { font-size: 38px; } .dname.xl { font-size: 31px; }
.dby { font: 500 13px/1.4 var(--sans); color: var(--mut); margin-top: 8px; }
.dby a, .dby button { color: var(--fg); text-decoration: underline; text-decoration-color: #55555b; text-underline-offset: 3px; font: inherit; }
.drow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: -6px; }
.dacts { display: flex; gap: 8px; }
.dbtn { height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; font: 700 14px/1 var(--sans); flex: 1; background: var(--s2); padding: 0 10px; }
.dbtn.pri { background: var(--acc); color: var(--acc-ink); }
.dbtn.pri.on { background: var(--s2); color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--acc); }
.minis { display: flex; gap: 6px; margin-top: -10px; }
.mini { flex: 1; height: 38px; border-radius: 10px; background: var(--s1); display: flex; align-items: center; justify-content: center; gap: 5px; font: 600 12px/1 var(--sans); color: var(--fg); }
.mini .i { width: 15px; height: 15px; }
.card { background: var(--s1); border-radius: 19px; padding: 14px; }
.big { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.big .disp { font-size: 52px; color: var(--good); line-height: .9; }
.big p { font: 500 13px/1.35 var(--sans); color: var(--mut); }
.big b { color: var(--fg); font-weight: 700; }
.scale { position: relative; margin-top: 18px; height: 50px; }
.scale .track { position: absolute; left: 0; right: 0; top: 20px; height: 9px; border-radius: 5px; background: var(--s3); }
.scale .fill { position: absolute; left: 0; top: 20px; height: 9px; border-radius: 5px; background: var(--good); }
.scale .mark { position: absolute; top: 14px; width: 2px; height: 22px; background: var(--fg); }
.scale .mlab { position: absolute; top: 0; transform: translateX(-50%); font: 600 11px/1 var(--sans); color: var(--fg); white-space: nowrap; }
.scale .ends { position: absolute; left: 0; right: 0; top: 36px; display: flex; justify-content: space-between; font: 500 10px/1 var(--mono); color: var(--mut); }
.scale.sm { height: 43px; margin-top: 5px; }
.scale.sm .track, .scale.sm .fill { top: 18px; height: 8px; border-radius: 4px; }
.scale.sm .mark { top: 12px; height: 19px; }
.expl { font: 400 13px/1.5 var(--sans); color: var(--body2); margin-top: 12px; }
.expl button { color: var(--acc); font-weight: 600; }
.about { font: 400 14px/1.55 var(--sans); color: var(--body2); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tile { background: var(--s1); border-radius: 14px; padding: 12px 12px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tile b { font: 700 16px/1.15 var(--sans); }
.tile small { font: 500 11px/1.2 var(--sans); color: var(--mut); }
.ok { color: var(--good); }
.dsh { display: flex; align-items: baseline; justify-content: space-between; }
.dsh h2 { font: 800 17px/1 var(--sans); font-stretch: 85%; }
.dsh span { font: 500 12px/1 var(--sans); color: var(--mut); }
.dsh button { font: 600 13px/1 var(--sans); color: var(--acc); }
.dtags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.dtag { height: 34px; padding: 0 10px; border-radius: 10px; background: var(--s1); display: flex; flex-direction: column; justify-content: center; gap: 4px; font: 600 13px/1 var(--sans); }
.dtag i { display: block; height: 3px; border-radius: 2px; background: var(--acc); }
.car { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin-top: 12px; overscroll-behavior-x: contain; }
.dcar { margin-top: 10px; }
.sim { flex: none; width: 184px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.sim .art-wrap { width: 184px; height: 86px; border-radius: 12px; }
.sim .mt { position: absolute; left: 7px; top: 7px; z-index: 1; height: 19px; padding: 0 6px; border-radius: 5px; background: rgba(10, 10, 11, .78); font: 700 10px/19px var(--mono); color: #fff; }
.sim b { font: 700 13px/1.2 var(--sans); }
.sim p { display: flex; align-items: center; gap: 5px; font: 500 12px/1 var(--sans); color: var(--mut); }
.list { background: var(--s1); border-radius: 15px; overflow: hidden; margin-top: 10px; }
.li { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px; font: 600 13px/1.2 var(--sans); border-top: 1px solid var(--line); }
.li:first-child { border-top: 0; }
.li span { flex: 1; }
.li small { font: 500 12px/1 var(--sans); color: var(--mut); }
.li .i { width: 15px; height: 15px; color: var(--mut); }
.foot { font: 400 12px/1.5 var(--sans); color: var(--mut); }

/* ---------- explore ---------- */
.srch { display: flex; gap: 6px; margin-top: -14px; }
.field { flex: 1; min-width: 0; height: 43px; border-radius: 14px; background: var(--s2); display: flex; align-items: center; gap: 8px; padding: 0 12px; font: 500 14px/1 var(--sans); color: var(--mut); text-align: left; }
.fb { width: 43px; height: 43px; border-radius: 14px; background: var(--s2); display: grid; place-items: center; flex: none; position: relative; gap: 6px; font: 600 13px/1 var(--sans); }
.fb .fl { display: none; }
.fb .n { position: absolute; top: 5px; right: 5px; min-width: 15px; height: 15px; border-radius: 8px; background: var(--acc); color: var(--acc-ink); font: 700 10px/15px var(--mono); text-align: center; }
#v-explore .chips-row { margin-top: -14px; }
.cap { flex: none; width: 108px; display: flex; flex-direction: column; gap: 6px; position: relative; min-width: 0; }
.cap .art-wrap { width: 100%; aspect-ratio: 2 / 3; border-radius: 12px; }
.cap .tl { position: absolute; left: 7px; top: 7px; z-index: 1; }
.qs { position: absolute; right: 5px; bottom: 5px; z-index: 2; width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; color: #fff; --glass-bg: rgba(30, 30, 34, .62); --glass-line: rgba(255, 255, 255, .12); --glass-shadow: 0 0 #0000; }
.qs .i { width: 15px; height: 15px; }
.qs[aria-pressed="true"] { background: var(--acc); color: var(--acc-ink); box-shadow: none; }
.cap b, .card2 b { font: 700 13px/1.2 var(--sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tagg { display: grid; grid-template-rows: repeat(2, 55px); grid-auto-flow: column; grid-auto-columns: 129px; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 12px; overscroll-behavior-x: contain; }
.tt { border-radius: 14px; background: var(--s1); padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; height: 55px; }
.tt b { font: 700 14px/1 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt small { font: 500 11px/1 var(--mono); color: var(--mut); }
.rlist { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.rrow { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 14px; background: var(--s1); text-align: left; width: 100%; }
.rrow .rk { width: 38px; font: 900 21px/1 var(--sans); font-stretch: 62%; color: var(--mut); text-align: center; flex: none; }
.rrow .art-wrap { width: 41px; height: 62px; border-radius: 7px; flex: none; }
.rrow > div:last-child { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rrow b { font: 700 14px/1.15 var(--sans); }
.wide { flex: none; width: 241px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.wide .art-wrap { width: 241px; height: 113px; border-radius: 12px; }
.wide b { font: 700 13px/1.2 var(--sans); }
.wk { border-radius: 19px; background: var(--s1); padding: 14px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.wk .sh span { font: 600 13px/1 var(--sans); color: var(--acc); }
.wk .wthumbs { display: flex; gap: 5px; }
.wk .wthumbs .art-wrap { flex: 1; min-width: 0; height: 45px; border-radius: 8px; }
.wk > p { font: 500 13px/1.4 var(--sans); color: var(--mut); }
.wk > p b { color: var(--fg); }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 38px; }
.bars span { flex: 1; border-radius: 3px 3px 0 0; background: var(--s3); min-height: 2px; }
.bars span.on { background: var(--acc); }
.days { display: flex; gap: 4px; margin-top: -6px; }
.days span { flex: 1; text-align: center; font: 500 10px/1 var(--mono); color: var(--mut); }
.mapcard { position: relative; height: 129px; border-radius: 19px; overflow: hidden; background: #111114; display: flex; align-items: flex-end; padding: 14px; text-align: left; color: #f5f4f0; }
.mapcard .pts { position: absolute; inset: 0; background-image: radial-gradient(circle, #5b8def 1.6px, transparent 2px), radial-gradient(circle, #f59e42 1.6px, transparent 2px), radial-gradient(circle, #3fc1b0 1.6px, transparent 2px), radial-gradient(circle, #4a4a50 1.4px, transparent 1.8px); background-size: 13px 11px, 11px 13px, 15px 12px, 7px 7px; background-position: 0 0, 40px 30px, 120px 60px, 0 0; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 25%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 40%, #000 25%, transparent 70%); }
.mapcard div { position: relative; }
.mapcard b { font: 800 16px/1.1 var(--sans); font-stretch: 85%; }
.mapcard p { font: 500 12px/1.3 var(--sans); color: #a3a2a9; margin-top: 4px; }
.maplive { display: none; position: relative; height: 284px; border-radius: 21px; background: #101013; overflow: hidden; margin-top: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.g5 { display: none; }

/* ---------- search ---------- */
#v-search .page { gap: 14px; padding-bottom: 96px; }
#v-search h1 { font: 900 30px/1 var(--sans); font-stretch: 75%; }
.scopes { display: flex; gap: 6px; flex-wrap: wrap; }
.sc { height: 31px; padding: 0 12px; border-radius: 999px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); font: 600 13px/1 var(--sans); color: var(--mut); }
.sc[aria-selected="true"] { background: var(--fg); color: var(--bg); box-shadow: none; }
.ent { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--s1); text-align: left; width: 100%; }
.ent .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--s3); display: grid; place-items: center; font: 800 16px/1 var(--sans); color: var(--acc); flex: none; }
.ent div { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ent b { font: 700 14px/1.1 var(--sans); }
.ent small { font: 500 12px/1 var(--sans); color: var(--mut); }
.ent em { font: 600 12px/1 var(--sans); font-style: normal; color: var(--acc); }
.ents { display: flex; flex-direction: column; gap: 6px; }
.res { display: flex; flex-direction: column; gap: 2px; margin-top: -6px; }
.gr { display: flex; align-items: center; gap: 10px; min-height: 55px; }
.gr > button:first-child { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-align: left; }
.gr .art-wrap { width: 89px; height: 42px; border-radius: 8px; flex: none; }
.gr div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.gr b { font: 700 13px/1.15 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr .qs2 { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--mut); flex: none; }
.gr .qs2 .i { width: 17px; height: 17px; }
.gr .qs2[aria-pressed="true"] { color: var(--acc); }
.gr .qs2[aria-pressed="true"] .i { fill: color-mix(in srgb, var(--acc) 25%, transparent); }
.recent { display: flex; flex-direction: column; }
.rc2 { display: flex; align-items: center; gap: 10px; min-height: 41px; font: 500 14px/1 var(--sans); border-bottom: 1px solid var(--line); text-align: left; width: 100%; }
.rc2 .i { width: 15px; height: 15px; color: var(--mut); }
.wchips { display: flex; gap: 6px; flex-wrap: wrap; }
.sbar { position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(var(--tabbar-gap) - var(--vp-gap)); height: 52px; display: flex; gap: 8px; z-index: 20; max-width: 640px; margin: 0 auto; }
.home { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.sfield { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0 6px 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--acc), var(--glass-shadow) !important; }
.sfield input { flex: 1; min-width: 0; height: 48px; border: 0; outline: 0; background: none; color: var(--fg); font: 500 16px/1 var(--sans); }
.sfield input::placeholder { color: var(--mut); }
.sfield input::-webkit-search-cancel-button { display: none; }
.search-key { flex: none; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--s2); color: var(--mut); font: 500 11px/1 var(--mono); white-space: nowrap; }
.sfield .search-key { display: none; margin-right: 6px; }
.clr { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--mut); flex: none; }
.clr .i { width: 15px; height: 15px; }
.sfade { position: fixed; left: 0; right: 0; bottom: calc(0px - var(--vp-gap)); height: 120px; background: linear-gradient(color-mix(in srgb, var(--bg) 0%, transparent), color-mix(in srgb, var(--bg) 94%, transparent) 55%); z-index: 19; pointer-events: none; }

/* ---------- results ---------- */
#v-results { padding: 0; }
.rtop { position: sticky; top: 0; z-index: 10; padding: calc(var(--top) + 6px) var(--page-gr) 10px var(--page-gl); background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line); }
.rtop .nav { display: flex; align-items: center; gap: 8px; }
.ttl { flex: 1; min-width: 0; }
.ttl h1 { font: 900 21px/1 var(--sans); font-stretch: 75%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttl p { font: 500 12px/1 var(--sans); color: var(--mut); margin-top: 4px; }
.segc { display: flex; padding: 3px; border-radius: 10px; background: var(--s2); flex: none; }
.segc button { width: 34px; height: 33px; border-radius: 8px; display: grid; place-items: center; color: var(--mut); }
.segc button[aria-checked="true"] { background: var(--s3); color: var(--fg); }
.segc .i { width: 16px; height: 16px; }
.ctl { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ctl::-webkit-scrollbar { display: none; }
.fchip { flex: none; white-space: nowrap; display: flex; align-items: center; gap: 4px; height: 29px; padding: 0 5px 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 50%, transparent); font: 600 12px/1 var(--sans); }
.fchip.ex { text-decoration: line-through; }
.fchip .x { width: 22px; height: 22px; display: grid; place-items: center; }
.fchip .i { width: 13px; height: 13px; }
.rbody { padding: 14px var(--page-gr) calc(var(--tabbar-offset) + 39px) var(--page-gl); max-width: 1180px; margin: 0 auto; }
.rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; }
.card2 { display: flex; flex-direction: column; gap: 6px; min-width: 0; text-align: left; position: relative; }
.card2 .art-wrap { aspect-ratio: 2 / 3; border-radius: 12px; }
.card2 .tl { position: absolute; left: 7px; top: 7px; z-index: 1; }
.card2 .qs { width: 30px; height: 30px; }
.card2 .qs .i { width: 15px; height: 15px; }
.card2 .open { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.rlistv { display: flex; flex-direction: column; gap: 6px; }
.lr { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 14px; background: var(--s1); }
.lr > button:first-child { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-align: left; }
.lr .art-wrap { width: 48px; height: 72px; border-radius: 8px; flex: none; }
.lr div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.lr b { font: 700 14px/1.15 var(--sans); }
.lr .qs { position: static; width: 34px; height: 34px; flex: none; }
.more { display: flex; justify-content: center; padding: 19px 0; }
.graph-host { position: relative; height: calc(100svh - 215px); min-height: 361px; border-radius: 19px; background: #101013; overflow: hidden; overscroll-behavior: contain; box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- filters sheet ---------- */
.behind { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.fsheet { position: absolute; left: 0; right: 0; top: calc(var(--safe-t) + 48px); bottom: 0; background: var(--bg); color: var(--fg); border-radius: 24px 24px 0 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, .6); display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; }
.fsheet .grab { margin-top: 6px; }
.fsheet .hd { display: flex; align-items: center; gap: 6px; padding: 5px 14px 4px; }
.fsheet .hd h1, .fsheet .hd h2 { flex: 1; font: 900 23px/1 var(--sans); font-stretch: 75%; }
.rst { height: 38px; padding: 0 8px; font: 600 13px/1 var(--sans); color: var(--acc); }
/* Sheets are centered at 640px or less; only the part of a landscape inset that reaches into the sheet pads it. */
.fsheet, .ssheet { --page-gl: max(14px, calc(env(safe-area-inset-left, 0px) - max(0px, (100vw - 640px) / 2))); --page-gr: max(14px, calc(env(safe-area-inset-right, 0px) - max(0px, (100vw - 640px) / 2))); }
.fsheet .body { padding: 8px var(--page-gr) 96px var(--page-gl); display: flex; flex-direction: column; gap: 14px; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.flbl { font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); margin-bottom: 7px; display: flex; justify-content: space-between; }
.flbl span { letter-spacing: 0; text-transform: none; font-family: var(--sans); font-weight: 500; }
.opts { display: flex; gap: 5px; flex-wrap: wrap; }
.opt { height: 34px; padding: 0 10px; border-radius: 10px; background: var(--s2); font: 600 13px/1 var(--sans); color: var(--fg); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.opt[aria-checked="true"], .opt[aria-pressed="true"]:not(.inc):not(.exc) { background: var(--fg); color: var(--bg); }
.opt .i { width: 14px; height: 14px; }
.opt.inc { background: color-mix(in srgb, var(--acc) 16%, transparent); box-shadow: inset 0 0 0 1.5px var(--acc); }
.opt.exc { background: var(--s2); color: var(--mut); text-decoration: line-through; }
.opt.add { background: none; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--mut); }
.tog { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 38px; margin-top: 5px; font: 500 13px/1 var(--sans); text-align: left; gap: 10px; }
.fmore { display: flex; align-items: center; gap: 5px; height: 34px; font: 600 13px/1 var(--sans); color: var(--mut); }
.fmore .i { width: 14px; height: 14px; transition: transform .2s; }
.fmore[aria-expanded="true"] .i { transform: rotate(180deg); }
.tagfind { display: flex; align-items: center; gap: 6px; height: 38px; border-radius: 10px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); padding: 0 10px; margin-top: 8px; color: var(--mut); }
.tagfind input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; height: 36px; font: 500 13px/1 var(--sans); color: var(--fg); }
.tagfind .i { width: 15px; height: 15px; }
.tagsugg { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.ffoot { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px var(--page-gr) calc(env(safe-area-inset-bottom) + 18px) var(--page-gl); display: flex; gap: 8px; background: linear-gradient(color-mix(in srgb, var(--bg) 0%, transparent), var(--bg) 24%); border-radius: 0 0 0 0; }
.b2 { height: 46px; padding: 0 14px; border-radius: 14px; background: var(--s2); display: flex; align-items: center; gap: 6px; font: 700 13px/1 var(--sans); flex: none; }
.b2 .i { width: 15px; height: 15px; }
.b1 { flex: 1; height: 46px; border-radius: 14px; background: var(--acc); color: var(--acc-ink); font: 800 14px/1 var(--sans); display: flex; align-items: center; justify-content: center; }

/* ---------- small sheets (save search, help, gems) and menus ---------- */
.ssheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86dvh; overflow-y: auto; background: var(--bg); color: var(--fg); border-radius: 24px 24px 0 0; padding: 6px var(--page-gr) calc(env(safe-area-inset-bottom) + 19px) var(--page-gl); display: flex; flex-direction: column; gap: 14px; max-width: 560px; margin: 0 auto; box-shadow: 0 -20px 60px rgba(0, 0, 0, .5); }
.ssheet .hd { display: flex; align-items: center; gap: 6px; }
.ssheet .hd h2 { flex: 1; font: 900 23px/1 var(--sans); font-stretch: 75%; }
.ssheet p { font: 400 13px/1.5 var(--sans); color: var(--body2); }
.ssheet .help { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: baseline; font: 500 13px/1.35 var(--sans); }
.ssheet .help kbd { font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--mut); white-space: nowrap; }
.tfield { height: 43px; border-radius: 14px; background: var(--s2); display: flex; align-items: center; padding: 0 12px; }
.tfield input { flex: 1; border: 0; outline: 0; background: none; height: 41px; font: 500 16px/1 var(--sans); color: var(--fg); min-width: 0; }
.ssheet .acts { display: flex; gap: 8px; }
.ssheet .acts .b1 { flex: 1; }
.menu { position: fixed; z-index: 60; min-width: 172px; max-width: calc(100vw - 14px); max-height: 60dvh; overflow-y: auto; padding: 5px; border-radius: 15px; background: var(--menu-bg); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); box-shadow: inset 0 0 0 1px var(--glass-line), 0 20px 50px rgba(0, 0, 0, .35); color: var(--fg); display: flex; flex-direction: column; }
.menu button { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px; border-radius: 10px; text-align: left; font: 600 13px/1.2 var(--sans); }
.menu button:hover, .menu button:focus-visible { background: color-mix(in srgb, var(--fg) 10%, transparent); outline: none; }
.menu button .i { width: 15px; height: 15px; }
.menu .ck { color: var(--acc); visibility: hidden; }
.menu [aria-selected="true"] .ck { visibility: visible; }
.menu .danger { color: #ff6b6b; }
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-offset) + 9px - var(--vp-gap)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 14px; border-radius: 999px; z-index: 70; font: 600 13px/1 var(--sans); white-space: nowrap; max-width: calc(100vw - 21px); }
.toast span { overflow: hidden; text-overflow: ellipsis; }
.toast .i { width: 15px; height: 15px; color: var(--good); margin-left: -2px; }
.toast button { height: 28px; padding: 0 10px; border-radius: 999px; background: var(--fg); color: var(--bg); font-weight: 700; flex: none; }
.toast.top { top: calc(var(--top) + 61px); bottom: auto; padding-left: 12px; --glass-bg: rgba(30, 30, 34, .56); --glass-line: rgba(255, 255, 255, .13); --glass-fg: #fff; --glass-shadow: 0 0 #0000; }
.toast.top button { background: #fff; color: #0a0a0b; }
.toast:not(.undo) { padding-right: 14px; }

/* ---------- upcoming ---------- */
#v-upcoming .page { gap: 14px; }
.mon { display: flex; align-items: center; gap: 5px; }
.mon b { flex: 1; font: 700 15px/1 var(--sans); }
.smb { width: 34px; height: 34px; border-radius: 10px; background: var(--s2); display: grid; place-items: center; flex: none; }
.smb .i { width: 15px; height: 15px; }
.today { height: 34px; padding: 0 10px; border-radius: 10px; background: var(--s2); font: 600 13px/1 var(--sans); flex: none; }
.drail { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.drail::-webkit-scrollbar { display: none; }
.day { flex: none; width: 40px; height: 83px; border-radius: 12px; background: var(--s1); display: flex; flex-direction: column; align-items: center; padding: 7px 0 6px; gap: 4px; position: relative; }
.day small { font: 600 10px/1 var(--mono); color: var(--mut); }
.day b { font: 800 16px/1 var(--sans); }
.day .bw { flex: 1; width: 15px; display: flex; align-items: flex-end; }
.day .bw i { display: block; width: 100%; border-radius: 3px; background: var(--s3); }
.day[aria-selected="true"] { background: var(--fg); color: var(--bg); }
.day[aria-selected="true"] small { color: color-mix(in srgb, var(--bg) 60%, var(--fg)); }
.day[aria-selected="true"] .bw i { background: var(--acc); }
.day .w { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.day:disabled { opacity: .45; }
.dh { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; gap: 6px; }
.dh h2 { font: 800 18px/1 var(--sans); font-stretch: 85%; }
.dh > span { font: 500 13px/1 var(--sans); color: var(--mut); white-space: nowrap; }
.dh .sticker { margin-left: 6px; vertical-align: 3px; }
.flt { height: 38px; border-radius: 10px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: center; gap: 6px; padding: 0 10px; font: 500 13px/1 var(--sans); color: var(--mut); }
.flt input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; height: 36px; font: inherit; color: var(--fg); }
.flt input::placeholder { color: var(--mut); }
.flt .i { width: 15px; height: 15px; }
.rows { display: flex; flex-direction: column; gap: 4px; }
.rel { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.rel > button:first-child { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-align: left; }
.rel .art-wrap { flex: none; width: 110px; height: 52px; border-radius: 9px; }
.demo { position: absolute; left: 4px; bottom: 4px; z-index: 1; height: 15px; padding: 0 5px; border-radius: 4px; background: var(--hi); color: #0a0a0b; font: 700 10px/15px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tx b { font: 700 13px/1.15 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx .y { font: 600 11px/1.2 var(--sans); color: var(--acc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx .t { font: 500 11px/1.2 var(--sans); color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bell { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--mut); flex: none; }
.bell .i { width: 17px; height: 17px; }
.bell[aria-pressed="true"] { color: var(--acc); }
.bell[aria-pressed="true"] .i { fill: var(--acc); }
.all { height: 41px; border-radius: 12px; background: var(--s1); font: 600 13px/1 var(--sans); display: flex; align-items: center; justify-content: center; width: 100%; }
.upsplit { display: flex; flex-direction: column; gap: 14px; }
.cal { border-radius: 21px; background: var(--s1); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.cal .ch { display: flex; align-items: center; gap: 6px; }
.cal .ch h2 { flex: 1; font: 900 26px/1 var(--sans); font-stretch: 75%; }
.segt { display: flex; padding: 3px; border-radius: 10px; background: var(--s2); }
.segt button { height: 29px; padding: 0 12px; border-radius: 8px; display: flex; align-items: center; font: 600 13px/1 var(--sans); color: var(--mut); }
.segt button[aria-pressed="true"] { background: var(--s3); color: var(--fg); }
.wkh { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; font: 600 10px/1 var(--mono); color: var(--mut); text-align: center; letter-spacing: .06em; }
.mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(46px, 1fr); gap: 5px; }
.dc { position: relative; border-radius: 10px; padding: 6px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; background: var(--s2); min-width: 0; }
.dc b { font: 700 13px/1 var(--sans); }
.dc small { font: 500 11px/1 var(--mono); align-self: flex-end; color: var(--fg); opacity: .9; }
.dc.past b, .dc.past small { color: var(--mut); }
.dc[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--s1), 0 0 0 4px var(--fg); }
.dc.tod b { background: var(--fg); color: var(--bg); border-radius: 5px; padding: 3px 4px; margin: -3px -4px; align-self: flex-start; }
.dc .w { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--hi); }
.dc.blank { background: none; }
.leg { display: flex; align-items: center; gap: 6px; font: 500 11px/1 var(--sans); color: var(--mut); flex-wrap: wrap; }
.leg i { display: block; width: 103px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 10%, transparent), color-mix(in srgb, var(--acc) 70%, transparent)); }
.leg em { margin-left: auto; display: flex; align-items: center; gap: 5px; font-style: normal; }
.leg em b { width: 6px; height: 6px; border-radius: 50%; background: var(--hi); }
.upfoot { font: 400 12px/1.5 var(--sans); color: var(--mut); }
.up-tba-link { margin: 12px 0; }
.up-tba { margin-top: 24px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--s1); }
.up-tba .foot, .up-tba .flt, .up-tba .rows { margin-top: 12px; }
.review-status { margin-top: 10px; }
.review-status > b { font: 700 20px/1.2 var(--sans); }
.review-status .foot { margin-top: 6px; }

/* ---------- saved ---------- */
#v-saved .page { gap: 14px; }
#v-saved .head .ib, #v-you .card, .st { box-shadow: inset 0 0 0 1px var(--line); }
#v-saved .head .ib { background: var(--s1); }
.sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.st { border-radius: 15px; background: var(--s1); padding: 12px; display: flex; flex-direction: column; gap: 5px; text-align: left; min-width: 0; }
.st small { font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.st b { font: 900 25px/1 var(--sans); font-stretch: 62%; }
.st p { font: 500 12px/1.3 var(--sans); color: var(--mut); }
.st p em { font-style: normal; color: var(--fg); font-weight: 700; }
.tabs { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; height: 33px; padding: 0 10px; border-radius: 999px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); font: 600 13px/1 var(--sans); display: flex; align-items: center; gap: 5px; }
.tab em { font: 600 11px/1 var(--mono); font-style: normal; color: var(--mut); }
.tab[aria-selected="true"] { background: var(--fg); color: var(--bg); box-shadow: none; }
.tab[aria-selected="true"] em { color: color-mix(in srgb, var(--bg) 70%, var(--fg)); }
.tools { display: flex; gap: 6px; }
.fld { flex: 1; min-width: 0; height: 38px; border-radius: 10px; background: var(--s2); display: flex; align-items: center; gap: 6px; padding: 0 10px; font: 500 13px/1 var(--sans); color: var(--mut); }
.fld input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; height: 36px; font: inherit; color: var(--fg); }
.fld input::placeholder { color: var(--mut); }
.fld .i { width: 15px; height: 15px; }
.tools .btn { height: 38px; }
.stags { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; margin-top: -4px; }
.stags::-webkit-scrollbar { display: none; }
.stg { flex: none; height: 28px; padding: 0 9px; border-radius: 999px; font: 600 12px/1 var(--sans); color: var(--mut); display: flex; align-items: center; gap: 4px; box-shadow: inset 0 0 0 1px var(--line); }
.stg b { font: 600 10px/1 var(--mono); }
.stg[aria-pressed="true"] { background: var(--fg); color: var(--bg); box-shadow: none; }
#v-saved .sh { margin-top: 6px; align-items: baseline; }
#v-saved .sh span { font: 500 12px/1.2 var(--sans); color: var(--mut); text-align: right; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
.c { display: flex; flex-direction: column; gap: 5px; min-width: 0; position: relative; }
.c .art-wrap { aspect-ratio: 2 / 3; border-radius: 10px; }
.c .stk { position: absolute; left: 5px; top: 5px; z-index: 1; }
.rm { position: absolute; right: 4px; bottom: 4px; z-index: 2; width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: #fff; }
.rm .i { width: 15px; height: 15px; }
.c .open { display: flex; flex-direction: column; gap: 5px; text-align: left; min-width: 0; }
.c b { font: 700 12px/1.2 var(--sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pr { font: 700 12px/1 var(--sans); }
.pr s { font-weight: 500; color: var(--mut); margin-left: 3px; }
.pr.m { color: var(--mut); font-weight: 500; }
.srows { display: flex; flex-direction: column; gap: 5px; }
.r { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 14px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); text-align: left; width: 100%; }
.r .art-wrap { width: 96px; height: 45px; border-radius: 8px; flex: none; }
.r div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.r b { font: 700 13px/1.15 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.date { font: 600 11px/1 var(--mono); color: var(--acc); text-transform: uppercase; }
.r small { font: 500 11px/1 var(--sans); color: var(--mut); }
.ex { height: 38px; border-radius: 10px; background: var(--s2); display: flex; align-items: center; justify-content: center; gap: 6px; font: 600 13px/1 var(--sans); width: 100%; }
.ex .i { width: 15px; height: 15px; }

/* ---------- you ---------- */
#v-you .page { gap: 18px; padding-top: calc(var(--top) + 6px); }
#v-you .lbl { margin-bottom: 8px; }
#v-you .segw + .foot { margin-top: 8px; }
#v-you .card { padding: 0; overflow: hidden; border-radius: 19px; }
#v-you .card.taste { padding: 14px; }
.acct { display: flex; align-items: center; gap: 12px; padding: 14px; }
.acct .avb { width: 48px; height: 48px; border-radius: 50%; background: var(--s3); display: grid; place-items: center; color: var(--mut); flex: none; overflow: hidden; }
.acct .avb img { width: 100%; height: 100%; object-fit: cover; }
.acct > div { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.acct b { font: 700 15px/1.1 var(--sans); overflow-wrap: anywhere; }
.acct small { font: 500 12px/1.3 var(--sans); color: var(--mut); }
.sync { display: flex; align-items: center; gap: 5px; font: 500 12px/1 var(--sans); color: var(--mut); }
.sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.sync[data-status="error"] i, .sync[data-status="offline"] i { background: #f08a4b; }
.sync[data-status="pending"] i, .sync[data-status="checking"] i { background: var(--hi); }
.btns { display: flex; gap: 6px; padding: 0 14px 14px; }
.btns .btn { flex: 1; height: 38px; }
.yrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 14px; border-top: 1px solid var(--line); text-align: left; }
.yrow:first-child { border-top: 0; }
.yrow > div { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.yrow b { font: 600 13px/1.2 var(--sans); }
.yrow small { font: 500 12px/1.3 var(--sans); color: var(--mut); }
.yrow > .i { width: 15px; height: 15px; color: var(--mut); }
.yrow .cnt2 { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 9px; background: var(--acc); color: var(--acc-ink); font: 700 10px/19px var(--mono); text-align: center; }
.yrow:disabled { opacity: .5; }
.yrow .err { color: #f08a4b; }

/* ---------- about ---------- */
#v-about .page { gap: 18px; }
#v-about .lbl { margin-bottom: 8px; }
#v-about .card { padding: 0; overflow: hidden; }
#v-about .yrow small { line-height: 1.45; }
.ab-lead { font: 500 15px/1.5 var(--sans); color: var(--body2); max-width: 68ch; margin-top: -6px; }
.ab-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ab-grid { display: flex; flex-direction: column; gap: 18px; }
#v-about .foot a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
.taste { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.bar { display: grid; grid-template-columns: 83px 1fr 24px; align-items: center; gap: 8px; font: 600 13px/1 var(--sans); }
.bar b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar > span { height: 8px; border-radius: 4px; background: var(--s3); overflow: hidden; }
.bar > span i { display: block; height: 8px; border-radius: 4px; background: var(--acc); }
.bar em { font: 500 11px/1 var(--mono); font-style: normal; color: var(--mut); text-align: right; }
.taste p { font: 500 12px/1.4 var(--sans); color: var(--mut); margin-top: 4px; }
.segw { display: flex; padding: 3px; border-radius: 12px; background: var(--s2); }
.segw button { flex: 1; height: 34px; border-radius: 9px; font: 600 13px/1 var(--sans); color: var(--mut); }
.segw button[aria-checked="true"] { background: var(--s3); color: var(--fg); }
.pals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.pal { display: flex; flex-direction: column; gap: 5px; font: 600 11px/1.15 var(--sans); text-align: left; min-width: 0; }
.sv { height: 53px; border-radius: 12px; padding: 6px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.sv span { display: flex; gap: 4px; }
.sv i { display: block; width: 12px; height: 12px; border-radius: 50%; }
.sv b { display: block; width: 70%; height: 6px; border-radius: 3px; }
.pal[aria-checked="true"] .sv { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--fg); }
.ynote { padding: 0 14px 12px; font: 500 12px/1.45 var(--sans); color: var(--mut); }

/* ---------- alerts ---------- */
#v-alerts .page { gap: 14px; padding-top: calc(var(--top) + 6px); }
.al-tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.al-group { display: flex; flex-direction: column; gap: 12px; }
.al-group + .al-group { margin-top: 14px; }
.al-group-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.al-group-head h2 { font: 800 18px/1 var(--sans); font-stretch: 85%; }
.al-group-head p { flex: 1; font: 500 12px/1.3 var(--sans); color: var(--mut); }
.al-rule-group h3 { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; font: 600 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.al-rule-group h3 b { color: var(--fg); }
.al-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: 6px; }
.al-row { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 14px; background: var(--s1); min-width: 0; }
.al-row[data-fresh="true"] { box-shadow: inset 0 0 0 1.5px var(--acc); }
.al-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; }
.al-main .art-wrap { width: 89px; height: 42px; border-radius: 8px; flex: none; }
.al-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.al-text strong { font: 700 13px/1.2 var(--sans); overflow-wrap: anywhere; }
.al-reason { font: 500 12px/1.35 var(--sans); color: var(--mut); }
.al-new { align-self: flex-start; }
.al-acts { display: flex; gap: 2px; flex: none; }
.al-acts .bell, .al-rule .bell { color: var(--mut); }
.al-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 8px; }
.al-rule { border-radius: 19px; background: var(--s1); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.al-rule[data-enabled="false"] { opacity: .7; }
.al-rule-top { display: flex; align-items: center; gap: 10px; }
.al-rule h3 { flex: 1; font: 800 17px/1.1 var(--sans); font-stretch: 85%; overflow-wrap: anywhere; }
.al-rule p { font: 500 12px/1.45 var(--sans); color: var(--mut); }
.al-rule-foot { display: flex; align-items: center; gap: 6px; }
.al-stat { flex: 1; font: 600 11px/1.3 var(--mono); color: var(--mut); }
.al-delivery { display: flex; flex-direction: column; gap: 10px; }
.acard { border-radius: 19px; background: var(--s1); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.acard h2 { font: 800 17px/1.1 var(--sans); font-stretch: 85%; }
.acard p { font: 500 13px/1.45 var(--sans); color: var(--mut); }
.acard .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.acard .yrow { padding: 6px 0; }
.al-sheet .body { padding-bottom: 96px; }
.al-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(189px, 1fr)); gap: 6px; }
.al-preset { display: flex; flex-direction: column; gap: 5px; padding: 12px; border-radius: 14px; background: var(--s1); text-align: left; }
.al-preset b { font: 700 13px/1.25 var(--sans); }
.al-preset span { font: 500 12px/1.4 var(--sans); color: var(--mut); }
.al-match { font: 500 13px/1.3 var(--sans); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.al-conds { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.al-cond { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 38px; gap: 5px; align-items: center; }
.al-cond .dd-btn, .al-match .dd-btn { width: 100%; }
.al-cond .tfield { height: 34px; border-radius: 10px; padding: 0 8px; }
.al-cond .tfield input { height: 33px; font-size: 13px; }
.al-cond .tfield[data-hide="true"] { visibility: hidden; }
.al-unit { color: var(--mut); font: 600 12px var(--mono); }
.al-trigs { display: flex; flex-direction: column; }
.al-trig { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 5px 0; border-top: 1px solid var(--line); }
.al-trig label:first-child { display: flex; align-items: center; gap: 8px; min-height: 34px; font: 600 13px/1.2 var(--sans); flex: 1; cursor: pointer; }
.al-trig .tfield { width: 95px; height: 34px; border-radius: 10px; padding: 0 8px; }
.al-trig .tfield input { width: 52px; height: 33px; font-size: 13px; }
.al-trig small { flex-basis: 100%; padding-left: 22px; color: var(--mut); font: 500 11.5px/1.4 var(--sans); }
.al-check { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; cursor: pointer; }
.al-check small { display: block; color: var(--mut); font: 500 11.5px/1.4 var(--sans); margin-top: 2px; }
.al-trig input[type="checkbox"], .al-check input { width: 15px; height: 15px; accent-color: var(--acc); flex: none; }
.al-preview { border-radius: 14px; background: var(--s1); padding: 12px; font: 500 13px/1.5 var(--sans); }
.al-preview h3 { font: 600 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); margin-bottom: 6px; }
.al-preview ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.al-preview li span { color: var(--mut); }
.al-picked { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.al-results { display: flex; flex-direction: column; margin-top: 5px; }
.al-results button { display: flex; justify-content: space-between; gap: 8px; min-height: 34px; padding: 6px 8px; border-radius: 9px; text-align: left; font-size: 13px; }
.al-results button:hover { background: var(--s2); }
.al-results small { color: var(--mut); }
.al-error { color: #f08a4b; font-size: 12px; }
.dd-btn { height: 34px; padding: 0 8px 0 10px; border-radius: 10px; background: var(--s2); display: inline-flex; align-items: center; justify-content: space-between; gap: 5px; font: 600 13px/1 var(--sans); white-space: nowrap; min-width: 0; }
.dd-btn span { overflow: hidden; text-overflow: ellipsis; }
.dd-btn .i { width: 14px; height: 14px; }

/* ---------- theme editor ---------- */
#v-themes .page { gap: 18px; padding-top: calc(var(--top) + 6px); }
.theme-appearance { display: flex; padding: 3px; border-radius: 12px; background: var(--s2); }
.theme-appearance button { flex: 1; height: 34px; border-radius: 9px; font: 600 13px/1 var(--sans); color: var(--mut); }
.theme-appearance button[aria-pressed="true"] { background: var(--s3); color: var(--fg); }
.theme-topbar { display: flex; align-items: center; gap: 10px; }
.theme-topbar .theme-appearance { flex: 1; max-width: 361px; }
.theme-save { font: 600 11px/1 var(--mono); color: var(--mut); }
.theme-layout { display: grid; gap: 18px; }
.theme-section-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; gap: 6px; }
.theme-section-title h2 { font: 800 18px/1 var(--sans); font-stretch: 85%; }
.theme-section-title span { font: 500 12px/1 var(--sans); color: var(--mut); }
.theme-palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(129px, 1fr)); gap: 8px; }
.theme-palette { display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 6px; border-radius: 14px; background: var(--s1); }
.theme-palette[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--fg); }
.theme-swatch { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; height: 38px; border-radius: 9px; overflow: hidden; }
.theme-palette-name { display: flex; align-items: center; justify-content: space-between; font: 700 13px/1.2 var(--sans); }
.theme-check { width: 14px; height: 14px; visibility: hidden; color: var(--acc); }
.theme-palette[aria-pressed="true"] .theme-check { visibility: visible; }
.theme-palette-note { font: 500 11px/1.3 var(--sans); color: var(--mut); }
.theme-preview { border-radius: 19px; background: var(--s1); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.theme-preview-brand { font: 900 18px/.9 var(--sans); font-stretch: 62%; text-transform: uppercase; }
.theme-preview-brand span { background: var(--acc); color: var(--acc-ink); padding: 1px 4px; margin-left: 2px; display: inline-block; transform: rotate(-4deg); }
.theme-preview h3 { font: 900 36px/.88 var(--sans); font-stretch: 62%; text-transform: uppercase; }
.theme-preview p { color: var(--mut); }
.theme-preview-tags { display: flex; gap: 5px; }
.theme-preview-tags span { height: 22px; padding: 0 7px; border-radius: 5px; background: var(--hi); color: #0a0a0b; font: 700 11px/22px var(--mono); transform: rotate(-3deg); }
.theme-preview-buttons { display: flex; gap: 6px; }
.theme-preview-buttons .btn.primary { background: var(--acc); color: var(--acc-ink); }
.theme-preview-note { display: flex; align-items: center; gap: 5px; font: 500 12px/1 var(--sans); color: var(--mut); }
.theme-preview-note span { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.theme-custom { margin-top: 18px; }
.theme-help { font: 500 12px/1.4 var(--sans); color: var(--mut); margin-bottom: 10px; }
.theme-color-fields { display: flex; flex-direction: column; border-radius: 15px; background: var(--s1); overflow: hidden; }
.theme-color-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); font: 600 13px/1.2 var(--sans); }
.theme-color-row:first-child { border-top: 0; }
.theme-color-inputs { display: flex; align-items: center; gap: 6px; }
.theme-color-inputs input[type="color"] { width: 31px; height: 31px; border: 0; border-radius: 9px; padding: 0; background: none; cursor: pointer; }
.theme-color-inputs input[type="text"] { width: 83px; height: 31px; border: 0; border-radius: 9px; background: var(--s2); padding: 0 8px; font: 600 12px/1 var(--mono); color: var(--fg); }
.theme-field-error { display: block; font-size: 11px; color: #f08a4b; margin-top: 4px; text-align: right; }
.theme-contrast { font: 500 12px/1.4 var(--sans); color: var(--mut); margin-top: 8px; }
.theme-contrast[data-low="true"] { color: #f08a4b; }
.theme-text-btn { font: 600 13px/1 var(--sans); color: var(--acc); }
.theme-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.theme-file-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.theme-feedback { font: 500 12px/1.4 var(--sans); color: var(--mut); min-height: 15px; }
.theme-feedback[data-error="true"] { color: #f08a4b; }

/* ---------- graph ---------- */
.graph { position: absolute; inset: 0; color: #f5f4f0; --s2: #1d1d20; --mut: #a3a2a9; }
.graph canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.graph canvas:active { cursor: grabbing; }
.graph canvas:focus { outline: none; }
.graph canvas:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.graph-legend { position: absolute; left: 10px; bottom: 10px; right: 115px; display: flex; flex-wrap: wrap; gap: 5px; pointer-events: none; }
.graph-legend button { pointer-events: auto; height: 28px; padding: 0 8px; border-radius: 999px; display: flex; align-items: center; gap: 5px; font: 600 11px/1 var(--sans); color: #fff; background: rgba(30, 30, 34, .62); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.graph-legend i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.graph-legend b { font: 500 10px/1 var(--mono); color: #a3a2a9; }
.graph-tools { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 5px; }
.graph-tools button { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: rgba(30, 30, 34, .62); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.graph-tools svg { width: 15px; height: 15px; }
.graph-hint, .graph-note { position: absolute; left: 12px; margin: 0; font: 500 11px/1.4 var(--sans); color: #a3a2a9; pointer-events: none; }
.graph-hint { top: 10px; } .graph-note { top: 25px; color: #f5f4f0; }
.graph-tip { position: absolute; top: 0; left: 0; z-index: 2; max-width: 206px; padding: 6px 8px; border-radius: 12px; pointer-events: none; color: #fff; background: rgba(30, 30, 34, .78); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.graph-tip strong { display: block; font: 700 12px/1.15 var(--sans); }
.graph-tip span { display: block; margin-top: 3px; font: 500 11px/1.2 var(--sans); color: #a3a2a9; }
.graph-missing { padding: 19px; color: var(--mut); }

/* ---------- loading ---------- */
.loading { position: fixed; inset: 0 0 calc(0px - var(--vp-gap)); z-index: 90; display: grid; place-items: center; background: var(--bg); text-align: center; padding: 19px; }
.loading .brand { font: 900 36px/.9 var(--sans); font-stretch: 62%; text-transform: uppercase; display: inline-flex; flex-direction: column; align-items: flex-start; }
.brand span, .loading .brand span { background: var(--acc); color: var(--acc-ink); padding: 1px 4px; transform: rotate(-4deg); margin-top: 2px; }
.loading p { margin-top: 14px; color: var(--mut); font: 500 13px/1.4 var(--sans); }
.loading .b1 { margin: 14px auto 0; width: 172px; flex: none; }

/* ---------- iPad and wider ---------- */
@media (min-width: 768px) and (not ((max-height: 500px) and (pointer: coarse))) {
  .sfield .search-key { display: block; }
  :root { --page-gl: 26px; --page-gr: 26px; --tabbar-offset: 0px; }
  .tb, .fade { display: none !important; }
  .topbar .tabs2 { position: relative; }
  .topbar .tabs2 a { z-index: 1; }
  /* Side columns share what the tabs leave, so the tabs stay centered until the left group needs more room. */
  .topbar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; position: fixed; left: 20px; right: 20px; top: calc(var(--safe-t) + 15px); height: 48px; align-items: center; z-index: 20; pointer-events: none; }
  .topbar > * { pointer-events: auto; }
  .topbar .tl { justify-self: start; display: flex; align-items: center; gap: 16px; }
  .topbar .brand { font: 900 18px/.9 var(--sans); font-stretch: 62%; text-transform: uppercase; display: none; flex-direction: column; align-items: flex-start; }
  .topbar .tfeed { display: none; align-items: center; gap: 6px; position: relative; }
  .app[data-v="feed"] .topbar .tfeed { display: flex; }
  .tfeed .sel { height: 40px; padding: 0 4px 0 6px; font-size: 18px; white-space: nowrap; }
  .tfeed .sel [data-feed-name] { max-width: clamp(95px, calc(100vw - 690px), 260px); }
  .tfeed .ib { width: 40px; height: 40px; color: #fff; background: var(--glass-bg); }
  .tfeed .badge { top: 7px; right: 7px; width: 8px; height: 8px; box-shadow: none; }
  .tfeed .fmenu { left: 0; top: 46px; }
  #v-feed > .ftop { display: none; }
  #v-feed > .like-pill { top: calc(var(--top) + 12px); }
  .topbar .tabs2 { display: flex; padding: 4px; border-radius: 999px; }
  .topbar .tabs2 a { height: 40px; padding: 0 14px; border-radius: 999px; display: flex; align-items: center; gap: 6px; font: 600 13px/1 var(--sans); color: var(--tab-fg); position: relative; }
  .topbar .tabs2 a .i { width: 17px; height: 17px; }
  .topbar .tabs2 a[aria-current="page"] { color: var(--acc); }
  .topbar .tabs2 .cnt { position: static; margin-left: 2px; }
  .topbar .right { justify-self: end; display: flex; gap: 8px; }
  .topbar .tsrch { width: 148px; height: 40px; border-radius: 999px; display: none; align-items: center; gap: 6px; padding: 0 12px; font: 500 13px/1 var(--sans); color: var(--mut); }
  .topbar .tsrch .i { width: 15px; height: 15px; }
  .topbar .tsrch .search-key { margin-left: auto; }
  .topbar .tav { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; position: relative; overflow: hidden; }
  .topbar .tav .i { width: 17px; height: 17px; }
  .topbar .tav img { width: 100%; height: 100%; object-fit: cover; }
  .topbar .tav .badge { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
  /* The phone feed keys its overlays off --top; start them below the floating tabs. */
  #v-feed { --top: calc(var(--safe-t) + 72px); }
  .slide .info { bottom: 33px; } .slide .rail { bottom: 38px; }
  .app[data-v="feed"] .topbar { --glass-bg: rgba(30, 30, 34, .58); --glass-line: rgba(255, 255, 255, .13); --glass-fg: #fff; --tab-fg: rgba(245, 244, 240, .88); --tab-on: rgba(255, 255, 255, .13); --glass-shadow: 0 0 #0000; color: #fff; }
  .app[data-v="results"] .topbar { display: none; }
  /* Search: the field moves to the top of the page under the top bar, which stays for the tabs. */
  .app[data-v="search"] .topbar .tsrch { visibility: hidden; }
  #v-search .page { padding-bottom: 32px; }
  #v-search .sbar { position: static; height: auto; max-width: none; margin: 0; }
  #v-search .sbar .home, #v-search .sfade { display: none; }
  .ab-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page { padding: calc(var(--safe-t) + 77px) var(--page-gr) 32px var(--page-gl); gap: 19px; }
  .view { scroll-padding-top: calc(var(--safe-t) + 77px); }
  .head h1, .navrow h1 { font-size: 36px; }
  #v-explore .head .av { display: none; }
  .srch { margin-top: -6px; gap: 8px; }
  .field { height: 45px; font-size: 15px; padding: 0 14px; }
  .fb { width: auto; height: 45px; padding: 0 14px; display: flex; align-items: center; }
  .fb .fl { display: inline; }
  .fb .n { position: static; }
  #v-explore .chips-row { margin: -8px 0 0; padding: 0; flex-wrap: wrap; overflow: visible; }
  #v-explore .chip { height: 33px; padding: 0 12px; }
  .sh h2 { font-size: 20px; } .sh p { font-size: 13px; } .sh > a, .sh > button.link { font-size: 13px; }
  .exsec { display: flex; flex-direction: column; }
  #v-explore .page { display: flex; }
  .ex-gems { order: 1; } .ex-map { order: 2; } .ex-tags { order: 3; } .ex-deals { order: 4; } .ex-top { order: 5; } .ex-new { order: 6; } .ex-week { order: 7; }
  .exsec .car.g { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 12px 0 0; padding: 0; overflow: visible; }
  .exsec .car.g .cap { width: auto; }
  .exsec .car.g .cap:nth-child(n+7) { display: none; }
  .exsec .car.g .cap b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .tagg { grid-template-rows: none; grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; gap: 8px; margin: 12px 0 0; padding: 0; overflow: visible; }
  .tagg .tt { height: 58px; }
  .tagg .tt:nth-child(n+9) { display: none; }
  .rlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .exsec .car.w { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 0 0; padding: 0; overflow: visible; }
  .exsec .car.w .wide { width: auto; } .exsec .car.w .wide .art-wrap { width: 100%; height: auto; aspect-ratio: 280 / 131; }
  .mapcard { display: none; }
  .maplive { display: block; }
  .rtop { padding: calc(var(--safe-t) + 14px) var(--page-gr) 10px var(--page-gl); }
  .rbody { padding: 14px var(--page-gr) 48px var(--page-gl); }
  .rgrid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 18px 12px; }
  .rlistv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toast { bottom: calc(26px + env(safe-area-inset-bottom, 0px) - var(--vp-gap)); }
  .g3 { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .srows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex { max-width: 310px; }
  #v-you .page, #v-alerts .page, #v-themes .page { max-width: 720px; }
  .pals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dsheet { left: 50%; width: min(680px, 100%); transform: translateX(-50%); top: calc(var(--safe-t) + 33px); border-radius: 24px 24px 0 0; }
  .dsheet.drag { transform: translateX(-50%); }
  .peek { left: calc(50% - 326px); right: calc(50% - 326px); top: 8px; height: 60px; }
  .fsheet { top: calc(var(--safe-t) + 49px); }
  .theme-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
}
@media (min-width: 768px) and (max-width: 999px) and (not ((max-height: 500px) and (pointer: coarse))) {
  /* Five tabs, the feed picker and the avatar share 728px here. */
  .topbar .tabs2 a { padding: 0 10px; gap: 5px; }
}
@media (min-width: 1000px) and (not ((max-height: 500px) and (pointer: coarse))) {
  .topbar .brand, .topbar .tsrch { display: flex; }
  #v-search .res, #v-search .ents { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); column-gap: 18px; }
  #v-search .res > .all, #v-search .res > .empty { grid-column: 1 / -1; }
  .ab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
/* iPad landscape and desktop: split Upcoming, side-by-side feed */
@media (min-width: 1024px) and (not ((max-height: 500px) and (pointer: coarse))) {
  #v-upcoming .page { --page-gl: 19px; --page-gr: 19px; max-width: none; padding: calc(var(--safe-t) + 74px) var(--page-gr) 19px var(--page-gl); }
  #v-upcoming .uphead, #v-upcoming .upnav-phone { display: none; }
  .upsplit { flex-direction: row; align-items: flex-start; gap: 16px; }
  .upsplit .cal { width: 560px; flex: none; position: sticky; top: 0; }
  .upsplit .daycol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
  .upsplit .daycol .dh { margin-top: 0; align-items: flex-end; }
  .upsplit .daycol .dh h2 { font-size: 21px; }
  .upsplit .daycol .rel .art-wrap { width: 120px; height: 56px; }
  .upsplit .daycol .rel { padding: 5px 0; }
}
@media (min-width: 1024px) and (min-aspect-ratio: 5/4) and (not ((max-height: 500px) and (pointer: coarse))) {
  .feed, #v-feed > .ftop, #v-feed > .like-pill, #v-feed > .fmenu { display: none !important; }
  .wfeed { display: block; }
}
@media (max-width: 1023px) {
  .cal .segt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}
/* An installed app has no browser history to swipe through, so its own scroll edges can stay still. A browser tab keeps
   overscroll on html and body, because that's where back and forward swipes live. pwa.js sets data-standalone. */
@media (display-mode: standalone) {
  .view, .feed { overscroll-behavior: none; }
}
html[data-standalone] { overscroll-behavior: none; }
/* iOS 26 home screen apps with black-translucent resolve 100% (and svh/dvh) to the screen minus the top inset, so the
   document ends short and anything below it isn't painted. lvh is the full screen there (docs/pwa.md, "Bottom gap"). */
html[data-standalone] { height: 100lvh; }

/* ---------- PWA: touch, short screens, motion (docs/pwa.md) ---------- */
a, button, input, select, textarea, label, summary, [role="button"], [tabindex] { touch-action: manipulation; }
@media (pointer: coarse) {
  /* No pinch or double-tap zoom on phones and tablets; iOS ignores user-scalable=no. Panning still works. */
  html { touch-action: pan-x pan-y; }
  /* iOS zooms into any focused field under 16px. */
  input, select, textarea { font-size: max(16px, 1em); }
}
/* Landscape phones: 44px tab bar with labels beside the icons, and a smaller top margin (the status bar is hidden). */
@media (max-height: 500px) and (pointer: coarse) {
  :root { --tabbar-h: 44px; --tabbar-gap: max(8px, env(safe-area-inset-bottom, 0px)); --top: max(var(--safe-t), 10px); }
  .tb, .sbar { max-width: 600px; margin-inline: auto; }
  .tb nav { padding: 3px; }
  .tb nav a { flex-direction: row; gap: 6px; font-size: 12px; }
  .tb nav a .i { width: 19px; height: 19px; }
  .tb nav .cnt { top: 2px; left: auto; right: 6px; margin: 0; }
  .sbar { height: 44px; }
  .sbar .home { width: 44px; height: 44px; }
  .sfield input { height: 40px; }
}
/* Installed on desktop with the title bar folded into the window: keep the controls clear and let the strip drag. */
@media (display-mode: window-controls-overlay) {
  :root { --safe-t: env(titlebar-area-height, 0px); }
  .app::before { content: ""; position: fixed; z-index: 25; left: env(titlebar-area-x, 0px); top: env(titlebar-area-y, 0px); width: env(titlebar-area-width, 100%); height: env(titlebar-area-height, 0px); app-region: drag; -webkit-app-region: drag; }
}

/* Route changes: app.js adds .vt to <html> for the length of a view transition. Content fades and rises; the top bar,
   tab bar and fade get their own names so they swap in place instead of sitting under the content snapshot. */
.vt #mainContent { view-transition-name: page; view-transition-class: page; }
.vt .topbar { view-transition-name: topbar; }
.vt .tb { view-transition-name: tabbar; }
.vt .fade { view-transition-name: fade; }
.vt #toast { view-transition-name: toast; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(topbar), ::view-transition-old(tabbar), ::view-transition-old(fade), ::view-transition-old(toast) { display: none; }
::view-transition-new(topbar), ::view-transition-new(tabbar), ::view-transition-new(fade), ::view-transition-new(toast) { animation: none; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-rise-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(.page) { animation: vt-fade-out 120ms ease-out both; }
  ::view-transition-new(.page) { animation: vt-rise-in 220ms cubic-bezier(.2, .8, .2, 1) 40ms both; }
  [data-pill] > .tpill { transition: transform .32s cubic-bezier(.3, .8, .2, 1), width .32s cubic-bezier(.3, .8, .2, 1); }
  /* Press feedback. `scale` composes with any transform a button already has. */
  :where(button, .pressable) { transition: scale 120ms ease-out; }
  :where(button:not(:disabled), .pressable):active { scale: .96; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}
.maplive .graph-hint { display: none; } .maplive .graph-note { top: 10px; }
#themeEditor { display: flex; flex-direction: column; gap: 18px; }