/*
 * Voodoo Community — style 1 "Voodoo" (the default).
 * Obsidian glass over a drifting aurora, a glowing orb as the signature, and two
 * accent colours (--a, --a2) that the owner controls from Branding via /theme.css.
 */
:root {
  --a: #a35cff;
  --a2: #ff4fd8;
  --bg: #07060d;
  --bg2: #0d0a18;
  --fg: #f3f0ff;
  --mfg: #a39cc0;
  --dim: #6f6890;
  --surface: rgba(22, 17, 38, 0.62);
  --surface-2: rgba(30, 24, 52, 0.72);
  --solid: #141024;
  --line: rgba(var(--tint),0.08);
  --line-2: rgba(var(--tint),0.14);
  --input: rgba(8, 6, 16, 0.72);
  --ok: #3ddc97;
  --warn: #ffc15e;
  --bad: #ff5d7a;
  --owner: #ffc15e;
  --staff: #5cc8ff;
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --r-2xl: 28px;
  --display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --a-6: color-mix(in oklab, var(--a) 6%, transparent);
  --a-12: color-mix(in oklab, var(--a) 12%, transparent);
  --a-20: color-mix(in oklab, var(--a) 20%, transparent);
  --a-30: color-mix(in oklab, var(--a) 30%, transparent);
  --a-45: color-mix(in oklab, var(--a) 45%, transparent);
  --a-60: color-mix(in oklab, var(--a) 60%, transparent);
  --a2-20: color-mix(in oklab, var(--a2) 20%, transparent);
  --a2-45: color-mix(in oklab, var(--a2) 45%, transparent);
  --grad: linear-gradient(135deg, var(--a), var(--a2));
  --grad-text: linear-gradient(100deg, #fff 0%, color-mix(in oklab, var(--a) 55%, var(--hi)) 35%, var(--a2) 100%);
  --edge: linear-gradient(145deg, color-mix(in oklab, var(--a) 55%, transparent), rgba(var(--tint),0.06) 38%, rgba(var(--tint),0.03) 62%, color-mix(in oklab, var(--a2) 35%, transparent));
  --shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.8);
  --glow: 0 10px 40px -12px var(--a-60);
  --dock-h: 74px;
  --tint: 255,255,255;
  --panel: 7,6,13;
  --hi: #fff;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; background: var(--bg); overflow-x: clip; }
body { margin: 0; min-height: 100dvh; font: 15px/1.55 var(--body); color: var(--fg); background: transparent; overflow-x: clip; }
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.backdrop::before, .backdrop::after {
  content: ""; position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; opacity: .55; will-change: transform;
}
.backdrop::before { top: -45vmax; left: -30vmax; background: radial-gradient(closest-side, var(--a-45), transparent 70%); animation: drift1 26s ease-in-out infinite alternate; }
.backdrop::after { bottom: -50vmax; right: -35vmax; background: radial-gradient(closest-side, var(--a2-45), transparent 70%); opacity: .35; animation: drift2 32s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(18vmax, 12vmax) scale(1.1); } }
@keyframes drift2 { to { transform: translate(-16vmax, -10vmax) scale(1.15); } }
.grain {
  position: absolute; inset: 0; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .backdrop::before, .backdrop::after, .orb .halo, .marquee .mq-track { animation: none !important; } }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
p { margin: 0; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
code { font-family: var(--mono); font-size: .88em; padding: 1px 6px; border-radius: 6px; background: rgba(var(--tint),.06); border: 1px solid var(--line); }
:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--a-45); }
@supports (-webkit-touch-callout: none) { input, select, textarea { font-size: 16px !important; } }
[hidden] { display: none !important; }

.i { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.i.sm { width: 16px; height: 16px; } .i.xs { width: 13px; height: 13px; } .i.lg { width: 24px; height: 24px; }

.muted { color: var(--mfg); } .dim { color: var(--dim); }
.tiny { font-size: 11px; } .xs { font-size: 12px; } .sm { font-size: 13px; }
.b { font-weight: 700; } .accent { color: var(--a); }
.gtext { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.label { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--mfg); font-weight: 600; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; } .row.between { justify-content: space-between; } .row.top { align-items: flex-start; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 12px; } .stack-sm > * + * { margin-top: 8px; } .stack-lg > * + * { margin-top: 20px; }
.mt { margin-top: 12px; } .mt-sm { margin-top: 6px; } .mt-lg { margin-top: 20px; }

/* ---------- the orb ---------- */
.orb { position: relative; display: grid; place-items: center; flex: none; width: var(--s, 56px); height: var(--s, 56px); }
.orb .ball {
  position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  color: #fff; font: 800 calc(var(--s, 56px) * .38)/1 var(--display);
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.75), transparent 26%), radial-gradient(circle at 50% 60%, var(--a), var(--a2) 115%);
  box-shadow: 0 0 calc(var(--s, 56px) * .5) var(--a-60), inset 0 calc(var(--s, 56px) * -.12) calc(var(--s, 56px) * .22) rgba(0,0,0,.35);
}
.orb .ball img { width: 100%; height: 100%; object-fit: cover; }
.orb .halo {
  position: absolute; inset: calc(var(--s, 56px) * -.12); border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, var(--a), transparent 35%, var(--a2), transparent 70%);
  -webkit-mask: radial-gradient(closest-side, transparent 86%, #000 88%, #000 100%); mask: radial-gradient(closest-side, transparent 86%, #000 88%, #000 100%);
  animation: spin 9s linear infinite; opacity: .9;
}
@keyframes spin { to { transform: rotate(360deg); } }
.orb.s32 { --s: 32px; } .orb.s40 { --s: 40px; } .orb.s48 { --s: 48px; } .orb.s64 { --s: 64px; } .orb.s84 { --s: 84px; } .orb.s104 { --s: 104px; } .orb.s128 { --s: 128px; }

/* ---------- glass surfaces ---------- */
.glass, .card {
  position: relative; border-radius: var(--r-xl); border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--edge) border-box;
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(var(--tint),.06);
  overflow: clip;
}
.card { padding: 18px; }
.card.lg { padding: 22px; border-radius: var(--r-2xl); }
.card.flat { background: linear-gradient(rgba(var(--tint),.025), rgba(var(--tint),.025)) padding-box, linear-gradient(var(--line), var(--line)) border-box; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.card.dashed { border: 1px dashed var(--a-45); background: var(--a-6); }
.card h2 { font-size: 16px; } .card h3 { font-size: 15px; }
.bloom { position: absolute; pointer-events: none; border-radius: 50%; width: 220px; height: 220px; right: -80px; top: -90px; background: radial-gradient(closest-side, var(--a-45), transparent); opacity: .7; }
.bloom.b2 { left: -90px; right: auto; top: auto; bottom: -110px; background: radial-gradient(closest-side, var(--a2-20), transparent); }
.clip { overflow: hidden; }

/* section heading with a fading rule */
.sec { display: flex; align-items: center; gap: 12px; margin: 6px 2px -4px; }
.sec h2 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--mfg); font-weight: 600; font-family: var(--body); }
.sec::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.sec a { font-size: 12px; color: var(--a); order: 3; }

/* ---------- app shell ---------- */
.shell { display: flex; min-height: 100dvh; }
.side {
  display: none; width: 264px; flex: none; position: sticky; top: 0; height: 100dvh; overflow-y: auto; padding: 18px 14px;
  flex-direction: column; gap: 4px; border-right: 1px solid var(--line); background: rgba(var(--panel),.55);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.side-brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 18px; font: 700 16px var(--display); }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side-item {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md);
  font-size: 14px; color: var(--mfg); transition: color .15s, background .15s;
}
.side-item:hover { color: var(--fg); background: rgba(var(--tint),.04); }
.side-item.on { color: var(--fg); background: linear-gradient(90deg, var(--a-20), transparent); }
.side-item.on::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad); box-shadow: 0 0 12px var(--a); }
.side-item.on .i { color: var(--a); }
.side-item .count { margin-left: auto; }
.side-item.soon { opacity: .42; }
.side-sec { padding: 18px 12px 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.side-note { padding: 2px 12px; font-size: 12px; color: var(--dim); }
.side-foot { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); }
.side-btn { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; }
.main { flex: 1; min-width: 0; }
.page { max-width: 680px; margin: 0 auto; padding: 18px 16px calc(var(--dock-h) + 44px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 18px; }
.page.wide { max-width: 820px; } .page.full { max-width: 1060px; }

/* floating dock (phones) */
.dock {
  position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
  height: 64px; display: flex; align-items: center; justify-content: space-around; padding: 0 6px; border-radius: 26px;
  border: 1px solid transparent;
  background: linear-gradient(rgba(var(--panel),.82), rgba(var(--panel),.82)) padding-box, var(--edge) border-box;
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.3);
}
.dock a {
  position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10.5px; font-weight: 500; color: var(--dim); transition: color .2s;
}
.dock a .i { width: 22px; height: 22px; }
.dock a.on { color: var(--fg); }
.dock a.on .i { color: var(--a); filter: drop-shadow(0 0 8px var(--a-60)); }
.dock a.on::after { content: ""; position: absolute; bottom: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--a); box-shadow: 0 0 8px var(--a); }
.dock .centre { flex: 1.1; }
.dock .centre .orb { margin-top: -30px; }
.dock .centre span.l { margin-top: 2px; }
.dock .centre.on::after { display: none; }
.dock .count { position: absolute; top: 8px; left: calc(50% + 4px); }
@media (min-width: 900px) {
  .side { display: flex; }
  .dock { display: none; }
  .page { padding: 34px 32px 56px; }
}
@media (min-width: 1100px) {
  .page:not(.wide):not(.full) { max-width: 900px; }
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .portal .who { font-size: 52px; }
}

/* ---------- counts / pills / chips ---------- */
.count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 99px; font: 700 10.5px var(--body); color: #fff; background: var(--grad); box-shadow: 0 0 12px var(--a-45); }
.count.red { background: linear-gradient(135deg, #ff4d6d, #ff2e63); box-shadow: 0 0 12px rgba(255, 60, 100, .5); }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 1px solid var(--line-2); background: rgba(var(--tint),.04); color: var(--mfg); }
.pill.ok { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 35%, transparent); background: color-mix(in oklab, var(--ok) 10%, transparent); }
.pill.warn { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 35%, transparent); background: color-mix(in oklab, var(--warn) 10%, transparent); }
.pill.bad { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 35%, transparent); background: color-mix(in oklab, var(--bad) 10%, transparent); }
.pill.acc { color: color-mix(in oklab, var(--a) 60%, var(--hi)); border-color: var(--a-45); background: var(--a-12); }
.pill.owner { color: var(--owner); border-color: color-mix(in oklab, var(--owner) 40%, transparent); background: color-mix(in oklab, var(--owner) 12%, transparent); }
.pill.staff { color: var(--staff); border-color: color-mix(in oklab, var(--staff) 40%, transparent); background: color-mix(in oklab, var(--staff) 12%, transparent); }
.pill .dotl { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--fg);
  border: 1px solid color-mix(in oklab, var(--c, var(--a)) 50%, transparent); background: color-mix(in oklab, var(--c, var(--a)) 16%, transparent); }
.chip .sw { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--a)); box-shadow: 0 0 8px var(--c, var(--a)); }
.chip button { background: none; border: 0; padding: 0; margin-left: 2px; cursor: pointer; color: var(--mfg); display: inline-flex; }
.chip button:hover { color: var(--bad); }

/* ---------- page header (inner pages) ---------- */
.phead { position: relative; overflow: hidden; padding: 18px; }
.phead .top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.phead .back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--mfg); border: 1px solid var(--line-2); background: rgba(var(--tint),.03); transition: color .15s, border-color .15s; }
.phead .back:hover { color: var(--fg); border-color: var(--a-45); }
.phead .body { position: relative; margin-top: 16px; display: flex; gap: 14px; align-items: center; }
.glyph { width: 48px; height: 48px; flex: none; border-radius: 16px; display: grid; place-items: center; color: var(--glyph-fg, #fff); background: var(--glyph-bg, linear-gradient(160deg, var(--a2), var(--a))); box-shadow: 0 10px 26px -10px var(--a), inset 0 1px 0 rgba(255,255,255,.35); }
.glyph.soft { background: var(--a-20); color: color-mix(in oklab, var(--a) 65%, var(--hi)); box-shadow: inset 0 0 0 1px var(--a-30); }
.phead h1 { font-size: 22px; }
.phead p { font-size: 13px; color: var(--mfg); margin-top: 3px; }

/* ---------- home: portal hero ---------- */
.portal { position: relative; overflow: hidden; padding: 0; border-radius: var(--r-2xl); }
.portal .bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .55; }
.portal .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--panel),.25), rgba(var(--panel),.92)); }
.portal-in { position: relative; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.portal .toprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.portal .kicker { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--mfg); }
.portal .mid { display: flex; align-items: center; gap: 18px; }
.portal .who { font: 800 clamp(30px, 9vw, 46px)/1.02 var(--name-font, var(--display)); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.portal .who.gtext { filter: drop-shadow(0 0 22px var(--a-45)); }
.portal .who.nfx { -webkit-text-stroke: var(--name-stroke, 0) var(--name-stroke-c, transparent); text-shadow: 0 0 var(--name-glow, 0) var(--name-glow-c, transparent); }
.portal .welcome { font-size: 14px; color: color-mix(in oklab, var(--fg) 78%, transparent); margin-top: 8px; max-width: 30rem; }
.portal .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; border: 1px solid var(--line-2); background: rgba(var(--panel),.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.status .dotl { width: 8px; height: 8px; border-radius: 50%; }
.status.ok .dotl { background: var(--ok); box-shadow: 0 0 10px var(--ok); } .status.ok b { color: var(--ok); }
.status.bad .dotl { background: var(--bad); box-shadow: 0 0 10px var(--bad); } .status.bad b { color: var(--bad); }
.status span { color: var(--mfg); font-weight: 500; }
.iconbtn { position: relative; width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; color: var(--fg); border: 1px solid var(--line-2); background: rgba(var(--panel),.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; transition: border-color .15s; }
.iconbtn:hover { border-color: var(--a-45); }
.iconbtn .count { position: absolute; top: -6px; right: -6px; }
@media (min-width: 640px) { .portal-in { padding: 28px; } .portal .mid { gap: 26px; } }

/* staff strip */
.staffbar { padding: 14px; }
.staffbar .head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.staffbar .head a.go { display: inline-flex; align-items: center; gap: 8px; font: 700 14px var(--display); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stat { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 11px 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(var(--tint),.03); transition: border-color .15s, background .15s; min-width: 0; }
a.stat:hover { border-color: var(--a-45); background: var(--a-6); }
.stat .n { font: 800 22px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.stat .n.hot { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .l { font-size: 11px; color: var(--mfg); display: flex; align-items: center; gap: 5px; }
.stat .l .i { width: 13px; height: 13px; color: var(--a); }
.stat.off { opacity: .45; }

/* ---------- bento tiles ---------- */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; min-height: 142px; padding: 16px; text-align: left; cursor: pointer; width: 100%;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.tile::after { content: ""; position: absolute; width: 160px; height: 160px; right: -60px; top: -70px; border-radius: 50%; background: radial-gradient(closest-side, var(--a-30), transparent); transition: opacity .25s, transform .25s; opacity: .6; pointer-events: none; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow), var(--glow); }
.tile:hover::after { opacity: 1; transform: scale(1.15); }
.tile:active { transform: scale(.985); }
.tile .glyph { width: 44px; height: 44px; border-radius: 14px; }
.tile .tt { margin-top: auto; }
.tile .tl { font: 700 16px/1.2 var(--display); letter-spacing: -0.01em; }
.tile .ts { font-size: 12px; color: var(--mfg); margin-top: 3px; }
.tile .arrow { position: absolute; top: 16px; right: 16px; color: var(--dim); transition: transform .25s, color .25s; }
.tile:hover .arrow { transform: translate(3px, -3px); color: var(--fg); }
.tile .count { position: absolute; top: 14px; right: 14px; }
.tile.wide { grid-column: span 2; min-height: 0; flex-direction: row; align-items: center; }
.tile.wide .tt { margin-top: 0; flex: 1; }
.tile.wide .arrow { position: static; }
.tile.off { cursor: default; opacity: .55; }
.tile.off:hover { transform: none; box-shadow: var(--shadow); }
.tile.off .glyph { background: rgba(var(--tint),.06); color: var(--mfg); box-shadow: none; }
.tile.hue2 .glyph { background: linear-gradient(135deg, #ff5d7a, #ff9a5c); box-shadow: 0 10px 26px -10px #ff5d7a, inset 0 1px 0 rgba(255,255,255,.35); }
.tile.hue2::after { background: radial-gradient(closest-side, rgba(255, 93, 122, .3), transparent); }
.soonpill { position: absolute; top: 14px; right: 14px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; color: var(--mfg); border: 1px solid var(--line-2); }

/* announcement card */
.ann { padding: 18px; }
.ann .hd { display: flex; align-items: center; gap: 12px; }
.ann .glyph { width: 40px; height: 40px; border-radius: 13px; }
.ann .new { font-size: 10px; font-weight: 800; letter-spacing: .1em; padding: 3px 8px; border-radius: 99px; color: #fff; background: var(--grad); box-shadow: 0 0 14px var(--a-60); }
.marquee { position: relative; display: flex; align-items: center; overflow: hidden; white-space: nowrap; font-size: 13.5px; font-weight: 500; height: 42px; border-radius: 99px; border: 1px solid var(--a-30); background: linear-gradient(90deg, var(--a-12), var(--a2-20), var(--a-12)); }
.marquee .mq-ico { position: relative; z-index: 2; flex: none; height: 100%; display: grid; place-items: center; padding: 0 12px 0 14px; color: var(--fg); background: linear-gradient(90deg, rgba(var(--panel),1) 70%, transparent); }
.marquee .mq-track { display: flex; width: max-content; animation: mq 40s linear infinite; }
.marquee .mq-track span { padding-right: 48px; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- buttons & forms ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; white-space: nowrap;
  padding: 11px 18px; border-radius: var(--r-md); font: 600 14px var(--body); color: #fff; background: var(--grad);
  box-shadow: 0 10px 26px -12px var(--a), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .12s, filter .15s, box-shadow .2s;
}
.btn:hover { filter: brightness(1.08); box-shadow: 0 14px 34px -12px var(--a), inset 0 1px 0 rgba(255,255,255,.3); }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.ghost { color: var(--fg); background: rgba(var(--tint),.04); border: 1px solid var(--line-2); box-shadow: none; }
.btn.ghost:hover { border-color: var(--a-45); background: var(--a-6); }
.btn.soft { color: color-mix(in oklab, var(--a) 60%, var(--hi)); background: var(--a-12); border: 1px solid var(--a-30); box-shadow: none; }
.btn.danger { color: var(--bad); background: color-mix(in oklab, var(--bad) 10%, transparent); border: 1px solid color-mix(in oklab, var(--bad) 35%, transparent); box-shadow: none; }
.btn.ok { background: linear-gradient(135deg, #22c58b, #14a37a); box-shadow: 0 10px 26px -12px #22c58b, inset 0 1px 0 rgba(255,255,255,.3); }
.btn.sm { padding: 7px 13px; font-size: 13px; border-radius: 12px; }
.btn.xs { padding: 5px 9px; font-size: 12px; border-radius: 10px; gap: 5px; }
.btn.block { width: 100%; }
.btn.lg { padding: 14px 20px; font-size: 15px; border-radius: var(--r-lg); }
.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--mfg); font-size: 12px; }
.linkbtn:hover { color: var(--fg); }
form { margin: 0; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span, label.l { font-size: 12.5px; font-weight: 600; color: color-mix(in oklab, var(--fg) 88%, transparent); }
.hint, .field > span.hint, .field > span > .hint { font-size: 12px; color: var(--mfg); font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=url], input[type=search], select, textarea {
  width: 100%; font: 15px var(--body); color: var(--fg); background: var(--input); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 12px 14px; outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder, textarea::placeholder { color: var(--dim); }
input:focus, select:focus, textarea:focus { border-color: var(--a); box-shadow: 0 0 0 4px var(--a-20); background: rgba(var(--panel),.9); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23a39cc0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }
select option { background: var(--solid); }
textarea { min-height: 96px; resize: vertical; }
input[type=color] { width: 48px; height: 44px; padding: 3px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--input); cursor: pointer; }
input[type=file] { font-size: 13px; color: var(--mfg); max-width: 100%; }
input[type=file]::file-selector-button { font: 600 12px var(--body); color: var(--fg); border: 1px solid var(--line-2); background: rgba(var(--tint),.05); padding: 7px 12px; border-radius: 10px; margin-right: 10px; cursor: pointer; }
input[type=checkbox], input[type=radio] { accent-color: var(--a); width: 17px; height: 17px; margin: 1px 0 0; flex: none; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.check .hint { display: block; }
.search { position: relative; }
.search .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--dim); width: 17px; height: 17px; }
.search input { padding-left: 42px; border-radius: 99px; }
.grid2 { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.alert { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--r-md); padding: 12px 14px; font-size: 13.5px; border: 1px solid var(--line-2); background: rgba(var(--panel),.9); }
.alert.ok { border-color: color-mix(in oklab, var(--ok) 40%, transparent); color: color-mix(in oklab, var(--ok) 80%, var(--hi)); background: color-mix(in oklab, var(--ok) 9%, var(--bg2)); }
.alert.err { border-color: color-mix(in oklab, var(--bad) 40%, transparent); color: color-mix(in oklab, var(--bad) 75%, var(--hi)); background: color-mix(in oklab, var(--bad) 9%, var(--bg2)); }
.alert.warn { border-color: color-mix(in oklab, var(--warn) 40%, transparent); color: color-mix(in oklab, var(--warn) 80%, var(--hi)); background: color-mix(in oklab, var(--warn) 8%, var(--bg2)); }
.toast { position: fixed; z-index: 70; left: 50%; bottom: calc(var(--dock-h) + 24px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 32px); box-shadow: 0 20px 44px -12px rgba(0,0,0,.9); animation: toast 5s forwards; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.97); } 5%, 88% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, 6px); visibility: hidden; } }
@media (min-width: 900px) { .toast { bottom: 28px; } }
.copybox { display: flex; gap: 8px; align-items: center; padding: 8px 8px 8px 14px; border-radius: var(--r-md); background: var(--input); border: 1px solid var(--line-2); }
.copybox code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; border: 0; background: none; padding: 0; font-size: 12.5px; }

/* ---------- lists ---------- */
.list { display: flex; flex-direction: column; gap: 8px; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(var(--tint),.025); transition: border-color .15s, background .15s; }
a.item:hover, .item.click:hover { border-color: var(--a-30); background: var(--a-6); }
.av { width: 38px; height: 38px; border-radius: 50%; flex: none; object-fit: cover; }
.av.lg { width: 104px; height: 104px; }
.av.fallback { display: grid; place-items: center; font: 800 15px var(--display); color: #fff; background: var(--grad); }
.av.lg.fallback { font-size: 38px; }
.ring { padding: 3px; border-radius: 50%; background: conic-gradient(var(--a), var(--a2), var(--a)); box-shadow: 0 0 30px var(--a-45); }
.ring > * { border: 3px solid var(--bg); }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kv > div { border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(var(--tint),.025); padding: 11px 13px; min-width: 0; }
.kv .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); font-weight: 600; }
.kv .v { font-size: 14.5px; font-weight: 600; margin-top: 3px; overflow-wrap: anywhere; }
.empty { text-align: center; padding: 30px 16px; color: var(--mfg); font-size: 13.5px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.empty .glyph { margin: 0 auto 12px; }
details.fold > summary { list-style: none; cursor: pointer; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold[open] > summary .chev { transform: rotate(180deg); }
.chev { transition: transform .2s; color: var(--dim); }
hr.sep { border: 0; height: 1px; background: var(--line); margin: 16px 0; }

/* ---------- dashboard ---------- */
.dhead { position: relative; overflow: hidden; padding: 20px; }
.dhead-in { position: relative; display: flex; align-items: center; gap: 16px; }
.dhead .kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .22em; color: var(--mfg); font-weight: 600; }
.dhead h1 { margin-top: 4px; font-size: clamp(22px, 6.4vw, 26px); font-weight: 800; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dhead .sub { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mfg); }
@media (min-width: 640px) { .dhead { padding: 26px; } .dhead h1 { font-size: 32px; } }
.tabs {
  position: sticky; top: 10px; z-index: 30; display: flex; gap: 4px; overflow-x: auto; padding: 5px; border-radius: 18px; scrollbar-width: none;
  border: 1px solid transparent; background: linear-gradient(rgba(var(--panel),.88), rgba(var(--panel),.88)) padding-box, var(--edge) border-box;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 14px 30px -18px rgba(0,0,0,.9);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 13px; font-size: 13.5px; font-weight: 600; color: var(--mfg); transition: color .15s, background .15s; }
.tabs a:hover { color: var(--fg); background: rgba(var(--tint),.04); }
.tabs a.on { color: #fff; background: var(--grad); box-shadow: 0 8px 20px -8px var(--a), inset 0 1px 0 rgba(255,255,255,.3); }
.tabs .tb { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; font-size: 10.5px; font-weight: 700; background: var(--a-30); color: #fff; }
.tabs a.on .tb { background: rgba(255,255,255,.28); }
.subtabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.subtabs::-webkit-scrollbar { display: none; }
.subtabs a { flex: none; padding: 7px 13px; border-radius: 99px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line-2); color: var(--mfg); }
.subtabs a.on { color: var(--fg); border-color: var(--a-45); background: var(--a-20); }
.subtabs a .tb { margin-left: 5px; font-size: 10.5px; padding: 0 6px; border-radius: 99px; background: var(--grad); color: #fff; }
.subtabs a .tb.warn { background: var(--warn); color: #1a1206; }
.inactive-flag { border-color: color-mix(in oklab, var(--warn) 35%, transparent); }
.danger-zone { border-color: color-mix(in oklab, var(--bad) 40%, transparent); }
.statgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .statgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.perm-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 560px) { .perm-grid { grid-template-columns: 1fr 1fr; } }
.perm-grid .check { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--tint),.02); }
.perm-grid .check:has(input:checked) { border-color: var(--a-45); background: var(--a-6); }
.role-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--c); box-shadow: 0 0 10px var(--c); }
.qa { border-left: 2px solid var(--a-45); padding: 2px 0 2px 12px; }
.qa .q { font-size: 11.5px; color: var(--mfg); font-weight: 600; }
.qa .a { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pchat { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; padding: 4px 2px; }
.bub { max-width: 84%; padding: 9px 13px; border-radius: 18px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bub.them { align-self: flex-start; background: rgba(var(--tint),.05); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.bub.me { align-self: flex-end; background: linear-gradient(135deg, color-mix(in oklab, var(--a) 70%, #000), color-mix(in oklab, var(--a2) 55%, #000)); border-bottom-right-radius: 6px; }
.bub.staff { align-self: flex-start; background: color-mix(in oklab, var(--staff) 10%, transparent); border: 1px solid color-mix(in oklab, var(--staff) 30%, transparent); border-bottom-left-radius: 6px; }
.bub .meta { font-size: 10.5px; opacity: .65; margin-top: 3px; }
.chatform { display: flex; gap: 8px; align-items: flex-end; }
.chatform textarea { min-height: 46px; height: 46px; max-height: 50vh; border-radius: 16px; resize: none; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches label { position: relative; cursor: pointer; }
.swatches input { position: absolute; opacity: 0; }
.swatches span { display: block; width: 34px; height: 34px; border-radius: 12px; background: var(--c); box-shadow: inset 0 0 0 2px rgba(var(--tint),.12); transition: transform .15s; }
.swatches input:checked + span { transform: scale(1.1); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--c), 0 0 18px var(--c); }

/* ---------- signed-out pages ---------- */
.gate { min-height: 100dvh; display: grid; place-items: center; padding: 28px 16px 40px; position: relative; }
.gate .bgimg { position: fixed; inset: 0; z-index: -1; background-size: cover; background-position: center; opacity: .5; }
.gate .bgimg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(var(--panel),.35), rgba(var(--panel),.95)); }
.gatecard { width: 100%; max-width: 420px; padding: 28px 22px 24px; border-radius: var(--r-2xl); }
.gatecard.wide-card { max-width: 520px; }
.gatecard .brand { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.btn.icon { padding: 12px; }
.gatecard h1 { margin-top: 18px; font-size: 28px; font-weight: 800; }
.gatecard .welcome { color: var(--mfg); font-size: 14px; margin-top: 8px; }
.seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 16px; background: var(--input); border: 1px solid var(--line-2); margin-top: 22px; }
.seg a { text-align: center; padding: 9px 6px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--mfg); transition: color .15s; }
.seg a:hover { color: var(--fg); }
.seg a.on { color: #fff; background: var(--grad); box-shadow: 0 8px 20px -10px var(--a), inset 0 1px 0 rgba(255,255,255,.3); }
.foot { text-align: center; font-size: 11.5px; color: var(--dim); margin-top: 18px; }
.foot a { color: var(--mfg); }
.steps { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.steps span { width: 28px; height: 4px; border-radius: 99px; background: var(--line-2); }
.steps span.on { background: var(--grad); box-shadow: 0 0 10px var(--a-60); }

/* sheets */
.sheet-bg { position: fixed; inset: 0; z-index: 60; background: rgba(var(--panel),.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: grid; place-items: end center; padding: 12px 12px calc(var(--dock-h) + 20px + env(safe-area-inset-bottom)); }
.sheet { width: 100%; max-width: 460px; max-height: 70dvh; overflow: hidden; display: flex; flex-direction: column; border-radius: var(--r-2xl); }
.sheet .sh { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 12px; }
.sheet .sb { overflow-y: auto; padding: 0 20px 20px; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 900px) { .sheet-bg { place-items: center; padding: 16px; } }

.swatches .sw-1 { --c: #a35cff; } .swatches .sw-2 { --c: #7c5cff; } .swatches .sw-3 { --c: #ff4fd8; } .swatches .sw-4 { --c: #ff5d7a; } .swatches .sw-5 { --c: #ff8a3d; }
.swatches .sw-6 { --c: #ffc15e; } .swatches .sw-7 { --c: #3ddc97; } .swatches .sw-8 { --c: #22d3ee; } .swatches .sw-9 { --c: #3b82f6; } .swatches .sw-10 { --c: #e5e7eb; }
.preview-name { padding: 16px 18px; border-radius: var(--r-lg); }
.who-preview { font: 800 34px/1.1 var(--name-font, var(--display)); letter-spacing: -0.03em; margin-top: 4px; overflow-wrap: anywhere; }
.who-preview.nfx { -webkit-text-stroke: var(--name-stroke, 0) var(--name-stroke-c, transparent); text-shadow: 0 0 var(--name-glow, 0) var(--name-glow-c, transparent); }
.brand-img { border-radius: var(--r-md); border: 1px solid var(--line-2); max-height: 180px; object-fit: cover; width: 100%; }
.brand-logo { width: 96px; height: 96px; }
.pickchip { cursor: pointer; padding: 6px 12px; }
.pickchip input { width: 14px; height: 14px; }
.pickchip:has(input:checked) { box-shadow: 0 0 0 1px var(--c, var(--a)), 0 0 16px -4px var(--c, var(--a)); }
.seen-select { width: auto; }
.card.dead { opacity: .6; }
.ustages { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ustages li { padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); font-size: 13.5px; color: var(--dim); transition: all .3s; }
.ustages li.active { color: var(--fg); border-color: var(--a-45); background: var(--a-12); box-shadow: 0 0 20px -8px var(--a); }
.ustages li.done { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 30%, transparent); }
.ustages li.done::before { content: "✓  "; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.profile-name { font-size: 26px; margin-top: 4px; overflow-wrap: anywhere; }

/* waiting pulse */
.pulse { position: relative; }
.pulse::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid var(--a-45); animation: ping 2.4s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 0% { transform: scale(.8); opacity: .9; } 80%, 100% { transform: scale(1.35); opacity: 0; } }

/* ---------- shared bits for phase 2 ---------- */
.count.zero { display: none; }
.av.sm { width: 28px; height: 28px; font-size: 12px; }
.xs-pill { font-size: 10px; padding: 1px 7px; gap: 3px; }
.sm-glyph { width: 40px; height: 40px; border-radius: 13px; }
.item .count { flex: none; }
.ann { display: block; }
.ann .ann-body { margin-top: 12px; font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ann-img { border-radius: 14px; margin-top: 12px; max-height: 220px; width: 100%; object-fit: cover; }
a.ann:hover { box-shadow: var(--shadow), var(--glow); }

/* ---------- chat ---------- */
.chatmode .dock { display: none; }
.page.chatpage { max-width: 820px; gap: 10px; padding-bottom: 12px; min-height: 100dvh; }
.chathead { position: sticky; top: calc(8px + env(safe-area-inset-top)); z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 20px; }
.chathead h1 { font-size: 17px; }
.chathead p { font-size: 12px; color: var(--mfg); }
.chatlog { flex: 1; display: flex; flex-direction: column; }
.msgs { display: flex; flex-direction: column; padding: 4px 2px 8px; }
.loadmore { align-self: center; margin: 6px 0 10px; }
.msg { display: flex; flex-direction: column; align-items: flex-start; margin-top: 12px; scroll-margin-top: 140px; }
.msg.grouped { margin-top: 3px; }
.msg.mine { align-items: flex-end; }
.msg-head { display: flex; align-items: center; gap: 8px; margin: 0 4px 5px; font-size: 13px; }
.msg.mine .msg-head { flex-direction: row-reverse; }
.msg.mine .msg-head .av, .msg.mine .msg-name { display: none; }
.msg-name { color: var(--c, var(--fg)); font-weight: 700; }
.msg-head time { font-size: 11px; color: var(--dim); }
.bubble { position: relative; max-width: min(86%, 580px); padding: 9px 13px; border-radius: 18px; border-top-left-radius: 6px; background: rgba(var(--tint),.055); border: 1px solid var(--line); overflow-wrap: anywhere; }
.grouped .bubble { border-top-left-radius: 18px; }
.msg.mine .bubble { border-radius: 18px; border-top-right-radius: 6px; border-color: transparent;
  background: linear-gradient(135deg, color-mix(in oklab, var(--a) 72%, #120d22), color-mix(in oklab, var(--a2) 58%, #120d22)); box-shadow: 0 8px 22px -14px var(--a); }
.msg.mine.grouped .bubble { border-top-right-radius: 18px; }
.staffmsg .bubble { border-left: 3px solid var(--staff); background: color-mix(in oklab, var(--staff) 8%, rgba(var(--tint),.04)); }
.bubble .body { font-size: 14.5px; line-height: 1.5; }
.bubble .body a { color: color-mix(in oklab, var(--a) 60%, var(--hi)); text-decoration: underline; text-underline-offset: 2px; }
.mention { color: color-mix(in oklab, var(--a) 55%, var(--hi)); background: var(--a-20); padding: 0 4px; border-radius: 6px; font-weight: 600; }
.mention.me { color: #fff; background: var(--a-45); }
.quote { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mfg); padding: 5px 9px; margin-bottom: 6px; border-radius: 10px; border-left: 3px solid var(--a); background: rgba(0,0,0,.22); min-width: 0; }
.quote b { color: var(--fg); flex: none; }
.aud { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: color-mix(in oklab, var(--a) 60%, var(--hi)); margin-bottom: 6px; }
.edited { font-size: 10.5px; color: var(--dim); margin-left: 6px; }
.msg.mine .edited { color: rgba(255,255,255,.6); }
.shots { display: grid; gap: 4px; margin-top: 6px; border-radius: 12px; overflow: hidden; }
.shots.n1 { grid-template-columns: 1fr; } .shots.n2, .shots.n3, .shots.n4 { grid-template-columns: 1fr 1fr; }
.shots:not(.n1):not(.n2):not(.n3):not(.n4) { grid-template-columns: repeat(3, 1fr); }
.shots img { width: 100%; height: 100%; max-height: 300px; object-fit: cover; aspect-ratio: auto; }
.shots:not(.n1) img { aspect-ratio: 1; }
.msg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 2px 0; }
.msg.mine .msg-foot { flex-direction: row-reverse; }
.react { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 13px; cursor: pointer; border: 1px solid var(--line-2); background: rgba(var(--tint),.04); }
.react span { font-size: 11.5px; font-weight: 700; color: var(--mfg); }
.react.on { border-color: var(--a-60); background: var(--a-20); }
.react.on span { color: var(--fg); }
.msg-tools { display: inline-flex; gap: 2px; opacity: .0; transition: opacity .15s; }
.msg:hover .msg-tools, .msg:focus-within .msg-tools, .msg.tapped .msg-tools { opacity: 1; }
@media (hover: none) { .msg-tools { opacity: .55; } }
.tool { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; border: 0; background: none; color: var(--mfg); cursor: pointer; }
.tool:hover { background: rgba(var(--tint),.06); color: var(--fg); }
.tool.danger:hover { color: var(--bad); }
.ann-msg { align-items: stretch !important; }
.ann-msg .bubble { max-width: 100%; padding: 16px; border-radius: 20px !important; border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--edge) border-box; box-shadow: var(--shadow); }
.ann-msg .msg-head { flex-direction: row !important; }
.ann-msg .msg-head .av, .ann-msg .msg-name { display: inline-flex !important; }
.ann-msg .msg-foot { flex-direction: row !important; }
.ann-msg .bubble .body { font-size: 15px; }
.newpill { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px; border: 0; color: #fff; font: 600 13px var(--body); background: var(--grad); box-shadow: 0 10px 26px -8px var(--a); cursor: pointer; }
.composer { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 20; padding: 8px; border-radius: 22px; }
.crow { display: flex; align-items: flex-end; gap: 8px; }
.crow textarea { min-height: 44px; height: 44px; max-height: 50vh; resize: none; border-radius: 15px; padding: 11px 14px; }
.sendbtn { padding: 12px; border-radius: 15px; }
.attach { flex: none; width: 44px; height: 44px; border-radius: 15px; cursor: pointer; }
.previews { display: flex; gap: 6px; padding: 2px 2px 8px; overflow-x: auto; }
.previews img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line-2); }
.replying { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-bottom: 8px; border-radius: 12px; font-size: 12.5px; color: var(--mfg); border-left: 3px solid var(--a); background: rgba(0,0,0,.25); }
.audpick { margin: 0 2px 8px; font-size: 12.5px; }
.audpick summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--mfg); font-weight: 600; list-style: none; }
.audpick summary::-webkit-details-marker { display: none; }
.audpick[open] summary .chev { transform: rotate(180deg); }
.readonly { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: 18px; font-size: 13px; color: var(--mfg); border: 1px dashed var(--line-2); background: rgba(var(--panel),.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.reactpop { position: fixed; z-index: 80; display: flex; gap: 2px; padding: 6px; border-radius: 16px; }
.reactpop button { width: 38px; height: 38px; border: 0; border-radius: 11px; background: none; font-size: 20px; cursor: pointer; transition: transform .12s, background .12s; }
.reactpop button:hover { background: rgba(var(--tint),.08); transform: scale(1.15); }
.editbox { display: flex; flex-direction: column; gap: 6px; min-width: min(70vw, 420px); }
.editbox textarea { min-height: 70px; font-size: 14px; }
.msg.flash .bubble { animation: flashmsg 1.6s ease-out; }
@keyframes flashmsg { 0% { box-shadow: 0 0 0 2px var(--a), 0 0 30px var(--a); } 100% { box-shadow: none; } }

/* channel access grid */
.agrid { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ahead, .arow { display: grid; grid-template-columns: minmax(0, 1fr) 56px 56px; align-items: center; gap: 6px; padding: 9px 12px; }
.ahead { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); font-weight: 600; background: rgba(var(--tint),.03); }
.ahead span:not(:first-child), .arow > :not(:first-child) { justify-self: center; }
.arow { border-top: 1px solid var(--line); font-size: 14px; cursor: pointer; }
.arow:hover { background: rgba(var(--tint),.02); }
.arow.owner-row { cursor: default; color: var(--owner); }
.arow input[disabled] { opacity: .3; }
a.card.row { display: flex; }

/* ---------- phase 3: tickets, messages, FAQ & Info, report / request ---------- */
form.inline { display: inline; }
.clamp2, .clamp3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp3 { -webkit-line-clamp: 3; line-clamp: 3; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.55; }
.sysmsg { align-self: center; display: flex; gap: 8px; align-items: center; margin: 10px auto; padding: 6px 12px; border-radius: 99px; font-size: 12px; color: var(--mfg); border: 1px dashed var(--line-2); background: rgba(var(--tint),.02); text-align: center; }
.sysmsg time { color: var(--dim); font-size: 11px; }
.seen { align-self: flex-end; display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--dim); padding: 2px 6px; }
.tk-actions { gap: 6px; }
.tk-actions .btn { flex: none; }
.allowrep { padding: 0 6px 6px; color: var(--mfg); }
.iconbtn { position: relative; }
.iconbtn .count { position: absolute; top: -4px; right: -4px; }
.item.notif.unread { border-color: var(--a-30); background: var(--a-6); }
.dot-new { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10px var(--a-45); }
.item > a.grow { min-width: 0; color: inherit; }
.doc-item .hint { margin-top: 2px; }
.folder > summary .glyph { flex: none; }
.pdfcard { gap: 12px; }
.prose { font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.prose > * + * { margin-top: .8em; }
.prose h2 { font-size: 20px; margin-top: 1.3em; }
.prose h3 { font-size: 17px; margin-top: 1.2em; }
.prose h4 { font-size: 15px; margin-top: 1.1em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .3em; }
.prose a { color: var(--a); text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: var(--r-md); border: 1px solid var(--line); max-width: 100%; height: auto; }
.prose blockquote { border-left: 3px solid var(--a-45); padding: 6px 0 6px 14px; color: var(--mfg); background: var(--a-6); border-radius: 0 10px 10px 0; }
.prose pre { overflow-x: auto; padding: 12px 14px; border-radius: var(--r-md); background: rgba(0,0,0,.35); border: 1px solid var(--line); font-size: 13px; }
.prose code { font-size: .92em; }
.prose :not(pre) > code { padding: 1px 6px; border-radius: 6px; background: rgba(var(--tint),.07); }
.prose hr { border: 0; border-top: 1px solid var(--line-2); }
.sub .top { align-items: flex-start; }
.sub.done { opacity: .78; }
.sub-title { display: block; font-size: 15.5px; margin-top: 2px; overflow-wrap: anywhere; }
.sub .links { gap: 10px; margin-top: 4px; font-size: 12.5px; }
.sub .links a { color: var(--a); font-weight: 600; }
.poster { flex: none; width: 62px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: rgba(var(--tint),.04); }
.pill.st-new { color: #fde68a; border-color: rgba(253,230,138,.35); background: rgba(253,230,138,.08); }
.pill.st-working, .pill.st-accepted { color: #93c5fd; border-color: rgba(147,197,253,.35); background: rgba(147,197,253,.08); }
.pill.st-fixed, .pill.st-added { color: #86efac; border-color: rgba(134,239,172,.35); background: rgba(134,239,172,.08); }
.pill.st-closed, .pill.st-declined { color: var(--mfg); }
.note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); background: var(--a-6); border: 1px solid var(--a-20); font-size: 13.5px; }
.note .i { margin-top: 3px; flex: none; }
.posters { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.poster-card { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: clip; padding: 0; }
.poster-card img, .poster-card .noposter { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; background: rgba(var(--tint),.04); }
.poster-card .noposter { display: grid; place-items: center; color: var(--dim); }
.pc-body { display: flex; flex-direction: column; gap: 4px; padding: 10px; flex: 1; }
.pc-body .btn { margin-top: auto; }
.picks .tile .ts { white-space: normal; }
.wide-empty { grid-column: 1 / -1; }
@media (max-width: 420px) { .posters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.item > .grow { min-width: 0; }

/* =====================================================================
 * Phase 4: styles. Colours, fonts and corners come from /styles.css
 * ([data-style]); the rules below switch on the style's surface,
 * background and home layout, set as attributes on <html>.
 * ===================================================================== */

/* ---------- surfaces ---------- */
[data-surface="solid"] .glass, [data-surface="solid"] .card {
  background: linear-gradient(var(--solid), var(--solid)) padding-box, linear-gradient(var(--line-2), var(--line-2)) border-box;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
[data-surface="outline"] .glass, [data-surface="outline"] .card {
  background: rgba(var(--tint),.02); border: 1px solid var(--line-2);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
[data-surface="outline"] .bloom, [data-surface="outline"] .tile::after { display: none; }
[data-surface="outline"] .tile:hover { box-shadow: none; border-color: var(--a-45); }
[data-surface="outline"] .glyph { box-shadow: none; }
[data-surface="neon"] .glass, [data-surface="neon"] .card {
  background: linear-gradient(var(--solid), var(--solid)) padding-box, linear-gradient(135deg, var(--a-60), var(--a2-45) 50%, var(--a-30)) border-box;
  box-shadow: 0 0 0 1px var(--a-12), 0 0 26px -10px var(--a-60), var(--shadow);
}
[data-surface="neon"] .glyph { box-shadow: 0 0 18px -2px var(--a-60); }
[data-surface="neon"] h1, [data-surface="neon"] .tile .tl { text-shadow: 0 0 18px var(--a-45); }
[data-surface="soft"] .glass, [data-surface="soft"] .card {
  background: linear-gradient(var(--solid), var(--solid)) padding-box, linear-gradient(var(--solid), var(--solid)) border-box;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 10px 12px 28px -12px rgba(20,16,40,.22), -8px -8px 22px -12px rgba(255,255,255,.95);
}
[data-mode="dark"][data-surface="soft"] .glass, [data-mode="dark"][data-surface="soft"] .card { box-shadow: 10px 12px 28px -12px rgba(0,0,0,.8), -6px -6px 18px -12px rgba(255,255,255,.08); }
[data-surface="soft"] .card.flat { box-shadow: inset 2px 2px 6px rgba(20,16,40,.06); background: rgba(var(--tint),.03); }
[data-surface="soft"] .bloom { opacity: .35; }

/* ---------- backgrounds ---------- */
[data-bg="plain"] .backdrop::before, [data-bg="plain"] .backdrop::after { display: none; }
[data-bg="plain"] .grain { opacity: .04; }
[data-bg="glow"] .backdrop::before { top: -60vmax; left: 50%; margin-left: -45vmax; animation: none; opacity: .5; }
[data-bg="glow"] .backdrop::after { display: none; }
[data-bg="grid"] .backdrop {
  background-image: linear-gradient(var(--a-12) 1px, transparent 1px), linear-gradient(90deg, var(--a-12) 1px, transparent 1px);
  background-size: 34px 34px; background-position: center top;
}
[data-bg="grid"] .backdrop::before, [data-bg="grid"] .backdrop::after { opacity: .3; }
[data-bg="stars"] .backdrop {
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 70% 12%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 42% 72%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 88% 58%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.6px 1.6px at 8% 86%, var(--a), transparent 60%),
    radial-gradient(1px 1px at 55% 40%, rgba(255,255,255,.6), transparent 60%);
  background-size: 260px 260px, 340px 340px, 300px 300px, 220px 220px, 420px 420px, 180px 180px;
}
[data-bg="stars"] .backdrop::before { opacity: .35; } [data-bg="stars"] .backdrop::after { opacity: .25; }
[data-bg="sunset"] .backdrop::before { top: auto; bottom: -55vmax; left: 50%; margin-left: -45vmax; animation: none; opacity: .7;
  background: radial-gradient(closest-side, var(--a2-45), var(--a-20) 55%, transparent 72%); }
[data-bg="sunset"] .backdrop::after { inset: auto 0 0 0; width: auto; height: 38vh; border-radius: 0; opacity: .45; animation: none;
  background: linear-gradient(transparent, var(--a-12)), repeating-linear-gradient(0deg, var(--a2-45) 0 1px, transparent 1px 22px); }
[data-bg="mesh"] .backdrop::before { animation-duration: 40s; opacity: .45; }
[data-bg="mesh"] .backdrop::after { animation-duration: 48s; opacity: .45; }
[data-bg="mesh"] .backdrop { background: radial-gradient(60vmax 40vmax at 100% 0%, var(--a2-20), transparent 70%), radial-gradient(50vmax 40vmax at 0% 100%, var(--a-20), transparent 70%); }
[data-mode="light"] .backdrop::before, [data-mode="light"] .backdrop::after { opacity: .35; }
[data-mode="light"] .grain { opacity: .05; mix-blend-mode: multiply; }
[data-mode="light"][data-bg="stars"] .backdrop { background-image: none; }

/* ---------- light mode touch-ups ---------- */
[data-mode="light"] .pill.st-new { color: #a16207; border-color: rgba(161,98,7,.3); background: rgba(250,204,21,.14); }
[data-mode="light"] .pill.st-working, [data-mode="light"] .pill.st-accepted { color: #1d4ed8; border-color: rgba(29,78,216,.28); background: rgba(59,130,246,.1); }
[data-mode="light"] .pill.st-fixed, [data-mode="light"] .pill.st-added { color: #15803d; border-color: rgba(21,128,61,.28); background: rgba(34,197,94,.12); }
[data-mode="light"] .pill.ok, [data-mode="light"] .status.ok { color: #15803d; }
[data-mode="light"] .pill.owner { color: #a16207; }
[data-mode="light"] .pill.staff { color: #0369a1; }
[data-mode="light"] .alert.ok { color: #166534; } [data-mode="light"] .alert.err { color: #b91c1c; } [data-mode="light"] .alert.warn { color: #92400e; }
[data-mode="light"] .portal .who.gtext { filter: none; }
[data-mode="light"] .dock { box-shadow: 0 16px 36px -14px rgba(20,16,40,.35), 0 0 0 1px rgba(20,16,40,.06); }
[data-mode="light"] .toast { box-shadow: 0 16px 36px -14px rgba(20,16,40,.4); }
[data-mode="light"] input:focus, [data-mode="light"] select:focus, [data-mode="light"] textarea:focus { background: #fff; }
[data-mode="light"] .msg:not(.mine) .bubble { color: var(--fg); }
[data-mode="light"] .msg.mine .bubble { color: #fff; }
[data-mode="light"] .prose pre { background: rgba(20,16,40,.05); }
[data-mode="light"] .tile.off .glyph { color: var(--mfg); }
[data-mode="light"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235d566e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }

/* ---------- layouts (home screen) ---------- */
/* list */
[data-layout="list"] .bento { grid-template-columns: 1fr; gap: 8px; }
[data-layout="list"] .tile { min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 13px 16px; }
[data-layout="list"] .tile.wide { grid-column: auto; }
[data-layout="list"] .tile .glyph { width: 40px; height: 40px; border-radius: calc(var(--r-md) - 2px); }
[data-layout="list"] .tile .tt { margin-top: 0; flex: 1; min-width: 0; }
[data-layout="list"] .tile .arrow { position: static; order: 4; }
[data-layout="list"] .tile .count { position: static; order: 3; }
[data-layout="list"] .tile .soonpill { position: static; order: 3; }
[data-layout="list"] .tile::after { display: none; }
[data-layout="list"] .portal .orb.s104 { --s: 72px; }
[data-layout="list"] .portal .who { font-size: clamp(26px, 7.5vw, 38px); }
/* cards */
[data-layout="cards"] .bento { grid-template-columns: 1fr; gap: 14px; }
[data-layout="cards"] .tile { min-height: 112px; flex-direction: row; align-items: center; gap: 18px; padding: 20px; }
[data-layout="cards"] .tile.wide { grid-column: auto; }
[data-layout="cards"] .tile .glyph { width: 60px; height: 60px; border-radius: var(--r-lg); }
[data-layout="cards"] .tile .glyph .i { width: 26px; height: 26px; }
[data-layout="cards"] .tile .tt { margin-top: 0; flex: 1; min-width: 0; }
[data-layout="cards"] .tile .tl { font-size: 19px; }
[data-layout="cards"] .tile .ts { font-size: 13px; }
[data-layout="cards"] .tile .arrow { position: static; }
[data-layout="cards"] .portal .mid { flex-direction: column; text-align: center; gap: 14px; }
[data-layout="cards"] .portal .welcome { margin-left: auto; margin-right: auto; }
[data-layout="cards"] .portal .chips, [data-layout="cards"] .portal .toprow { justify-content: center; }
[data-layout="cards"] .portal .toprow { position: relative; }
[data-layout="cards"] .portal .toprow .iconbtn { position: absolute; right: 0; }
[data-layout="cards"] .portal-in { padding-top: 26px; padding-bottom: 26px; }
/* compact */
[data-layout="compact"] .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
[data-layout="compact"] .tile { min-height: 100px; padding: 12px 8px; gap: 8px; align-items: center; justify-content: center; text-align: center; }
[data-layout="compact"] .tile.wide { grid-column: auto; flex-direction: column; }
[data-layout="compact"] .tile .glyph { width: 40px; height: 40px; }
[data-layout="compact"] .tile .tt { margin-top: 0; flex: none; }
[data-layout="compact"] .tile .tl { font-size: 13px; }
[data-layout="compact"] .tile .ts, [data-layout="compact"] .tile .arrow, [data-layout="compact"] .tile::after { display: none; }
[data-layout="compact"] .tile .count { top: 8px; right: 8px; }
[data-layout="compact"] .portal .orb.s104 { --s: 64px; }
[data-layout="compact"] .portal .who { font-size: clamp(24px, 7vw, 34px); }
[data-layout="compact"] .portal-in { gap: 12px; padding: 16px; }
@media (min-width: 900px) { [data-layout="compact"] .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* magazine */
[data-layout="magazine"] .portal-in { min-height: 330px; justify-content: space-between; }
[data-layout="magazine"] .portal .mid { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: auto; }
[data-layout="magazine"] .portal .orb.s104 { --s: 64px; }
[data-layout="magazine"] .portal .who { font-size: clamp(36px, 11vw, 60px); }
[data-layout="magazine"] .portal .bg { opacity: .85; }
[data-layout="magazine"] .bento > .tile:first-child { grid-column: span 2; min-height: 150px; }
[data-layout="magazine"] .bento > .tile:first-child .tl { font-size: 21px; }
[data-layout="magazine"] .sec h2 { font-family: var(--display); font-size: 15px; letter-spacing: .04em; text-transform: none; color: var(--fg); }

/* ---------- style picker ---------- */
.stylegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .stylegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stylecard { position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: clip; cursor: pointer;
  border: 2px solid var(--line-2); background: var(--bg); color: var(--fg); font-family: var(--body); transition: transform .15s, border-color .15s; }
.stylecard:hover { transform: translateY(-2px); }
.stylecard input { position: absolute; opacity: 0; pointer-events: none; }
.stylecard:has(input:checked) { border-color: var(--a); box-shadow: 0 0 0 3px var(--a-30); }
.stylecard .sc-prev { position: relative; height: 104px; padding: 10px; display: flex; flex-direction: column; gap: 6px; overflow: hidden;
  background: radial-gradient(120px 80px at 90% 0%, var(--a-30), transparent 70%), radial-gradient(120px 80px at 0% 100%, var(--a2-20), transparent 70%), var(--bg); }
.stylecard .sc-bar { display: flex; align-items: center; gap: 6px; }
.stylecard .sc-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 12px var(--a-45); flex: none; }
.stylecard .sc-name { font: 800 14px/1.1 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stylecard .sc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: auto; }
.stylecard .sc-tile { height: 30px; border-radius: calc(var(--r-sm) - 2px); background: var(--surface); border: 1px solid var(--line-2); display: flex; align-items: center; gap: 5px; padding: 0 6px; }
.stylecard .sc-tile i { width: 12px; height: 12px; border-radius: 4px; background: var(--grad); flex: none; }
.stylecard .sc-tile b { height: 5px; flex: 1; border-radius: 3px; background: var(--dim); opacity: .6; }
.stylecard[data-layout="list"] .sc-tiles, .stylecard[data-layout="cards"] .sc-tiles { grid-template-columns: 1fr; }
.stylecard[data-layout="list"] .sc-tile { height: 16px; }
.stylecard[data-layout="compact"] .sc-tiles { grid-template-columns: repeat(3, 1fr); }
.stylecard .sc-meta { padding: 8px 10px 10px; border-top: 1px solid var(--line); background: var(--bg2); }
.stylecard .sc-meta b { display: block; font-size: 13px; font-family: var(--body); }
.stylecard .sc-meta span { display: block; font-size: 11px; color: var(--mfg); line-height: 1.35; margin-top: 2px; }
.stylecard .sc-on { position: absolute; top: 8px; right: 8px; display: none; width: 22px; height: 22px; border-radius: 50%; place-items: center; background: var(--grad); color: #fff; }
.stylecard:has(input:checked) .sc-on { display: grid; }
.stylefilter { display: flex; gap: 6px; flex-wrap: wrap; }
[data-surface="outline"] .card.dashed { border-style: dashed; border-color: var(--a-45); background: var(--a-6); }

/* ---------- phase 5: Community Store ---------- */
.storecard.owned { box-shadow: 0 0 0 1px color-mix(in oklab, var(--ok) 40%, transparent), var(--shadow); }
.prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .prices { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.price { position: relative; cursor: pointer; }
.price input { position: absolute; opacity: 0; pointer-events: none; }
.price span { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: rgba(var(--tint),.03); transition: border-color .15s, background .15s; }
.price b { font-size: 13px; }
.price em { font: 800 20px/1.1 var(--display); font-style: normal; }
.price small { font-size: 11px; color: var(--mfg); }
.price input:checked + span { border-color: var(--a); background: var(--a-12); box-shadow: 0 0 0 3px var(--a-20); }
.price input:focus-visible + span { outline: 2px solid var(--a); outline-offset: 2px; }
.sportev { align-items: flex-start; }
.sportev.live { border-color: color-mix(in oklab, var(--bad) 45%, transparent); background: color-mix(in oklab, var(--bad) 7%, transparent); }
.sp-emoji { font-size: 26px; line-height: 1; flex: none; width: 36px; text-align: center; padding-top: 2px; }
.sp-title { display: block; font-size: 15px; overflow-wrap: anywhere; }
.sp-ch { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 12.5px; font-weight: 600; color: color-mix(in oklab, var(--a) 70%, var(--hi)); }
input[type=datetime-local] { width: 100%; font: 15px var(--body); color: var(--fg); background: var(--input); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 11px 14px; color-scheme: inherit; }
.tile.sporttile .glyph { background: linear-gradient(135deg, #22c55e, #0ea5e9); box-shadow: 0 10px 26px -10px #22c55e, inset 0 1px 0 rgba(255,255,255,.35); }

/* ---------- phase 6: reactions in threads, typing, GIFs ---------- */
.reactmenu { position: relative; display: inline-block; }
.reactmenu > summary { list-style: none; cursor: pointer; }
.reactmenu > summary::-webkit-details-marker { display: none; }
.reactpick { position: absolute; z-index: 25; bottom: calc(100% + 6px); right: 0; display: flex; gap: 2px; padding: 5px; border-radius: 99px;
  background: var(--solid); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.msg:not(.mine) .reactpick { right: auto; left: 0; }
.reactpick.down { bottom: auto; top: calc(100% + 6px); }
.reactpick button { border: 0; background: none; font-size: 20px; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.reactpick button:hover { background: var(--a-20); }
.msg:has(.reactmenu[open]) .msg-tools { opacity: 1; }
.typing { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mfg); padding: 0 10px 4px; }
.typing .dots { display: inline-flex; gap: 3px; }
.typing .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--a); animation: tdot 1.2s infinite ease-in-out; }
.typing .dots i:nth-child(2) { animation-delay: .15s; } .typing .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.gifbtn { font: 800 11px var(--body); letter-spacing: .04em; }
.gifmsg { display: block; max-width: min(260px, 100%); border-radius: 12px; margin-top: 4px; }
.gifsheet .sb { display: flex; flex-direction: column; gap: 10px; }
.gifgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 124px; gap: 6px; max-height: 55vh; overflow-y: auto; flex: 0 1 auto; min-height: 140px; align-content: start; }
@media (min-width: 560px) { .gifgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gifpick { display: block; width: 100%; height: 100%; border: 0; padding: 0; background: rgba(var(--tint),.05); border-radius: 10px; overflow: hidden; cursor: pointer; }
.gifpick img { display: block; width: 100%; height: 100%; object-fit: cover; }
.howto summary { list-style: none; cursor: pointer; }
.paywith { gap: 14px; }
.bubble:has(> .gifmsg:only-child) { background: none; border: 0; padding: 0; box-shadow: none; }


/* =====================================================================
 * Styles 31-50: holiday backgrounds and the mosaic / carousel layouts
 * ===================================================================== */
:root { --snow: rgba(255,255,255,.85); }
[data-mode="light"] { --snow: rgba(2,132,199,.45); }
[data-bg="snow"] .backdrop {
  background-image: radial-gradient(3.5px 3.5px at 20px 30px, var(--snow), transparent), radial-gradient(2.5px 2.5px at 90px 120px, var(--snow), transparent),
    radial-gradient(4.5px 4.5px at 150px 60px, var(--snow), transparent), radial-gradient(2px 2px at 60px 170px, var(--snow), transparent),
    radial-gradient(3px 3px at 175px 185px, var(--snow), transparent);
  background-size: 200px 200px, 230px 230px, 260px 260px, 200px 200px, 290px 290px;
  animation: snowfall 26s linear infinite; }
@keyframes snowfall { to { background-position: 40px 600px, -30px 690px, 20px 780px, -40px 600px, 30px 870px; } }
[data-bg="snow"] .backdrop::after { opacity: .25; }
[data-bg="hearts"] .backdrop { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23f43f5e' fill-opacity='.22'%3E%3Cpath d='M30 44c-6-8-20-4-18 7 1 7 18 18 18 18s17-11 18-18c2-11-12-15-18-7z'/%3E%3Cpath transform='translate(92 92) scale(.7)' d='M30 44c-6-8-20-4-18 7 1 7 18 18 18 18s17-11 18-18c2-11-12-15-18-7z'/%3E%3C/g%3E%3Cg fill='%23ec4899' fill-opacity='.16'%3E%3Cpath transform='translate(100 8) scale(.5)' d='M30 44c-6-8-20-4-18 7 1 7 18 18 18 18s17-11 18-18c2-11-12-15-18-7z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 160px 160px; animation: floatup 30s linear infinite; }
@keyframes floatup { to { background-position: 0 -640px; } }
[data-bg="bats"] .backdrop { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='180'%3E%3Cg fill='%238b5cf6' fill-opacity='.35'%3E%3Cpath d='M40 40c6-6 12-6 16 0 2-4 5-5 6-2 1-3 4-2 6 2 4-6 10-6 16 0-6 0-9 4-10 9-3-3-7-2-9 1-2-2-4-2-6 0-2-3-6-4-9-1-1-5-4-9-10-9z'/%3E%3Cpath transform='translate(120 110) scale(.7)' d='M40 40c6-6 12-6 16 0 2-4 5-5 6-2 1-3 4-2 6 2 4-6 10-6 16 0-6 0-9 4-10 9-3-3-7-2-9 1-2-2-4-2-6 0-2-3-6-4-9-1-1-5-4-9-10-9z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 220px 180px; animation: batfly 40s linear infinite; }
@keyframes batfly { to { background-position: -880px -360px; } }
[data-bg="bats"] .backdrop::before { top: auto; bottom: -55vmax; left: 50%; margin-left: -45vmax; animation: none; opacity: .5; }
[data-bg="eggs"] .backdrop { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cellipse cx='30' cy='36' rx='9' ry='12' fill='%23c4b5fd' fill-opacity='.45'/%3E%3Cellipse cx='120' cy='60' rx='8' ry='11' fill='%23fde68a' fill-opacity='.6'/%3E%3Cellipse cx='70' cy='130' rx='9' ry='12' fill='%2386efac' fill-opacity='.45'/%3E%3Cellipse cx='160' cy='150' rx='7' ry='10' fill='%23f9a8d4' fill-opacity='.5'/%3E%3Cellipse cx='150' cy='20' rx='6' ry='8' fill='%2393c5fd' fill-opacity='.5'/%3E%3C/svg%3E"); background-size: 180px 180px; }
[data-bg="fireworks"] .backdrop {
  background-image: radial-gradient(circle at 18% 22%, var(--a) 0 1.5px, transparent 2px), radial-gradient(circle at 78% 14%, var(--a2) 0 1.5px, transparent 2px),
    radial-gradient(circle at 64% 58%, var(--a) 0 1.5px, transparent 2px), radial-gradient(circle at 30% 76%, var(--a2) 0 1.5px, transparent 2px),
    radial-gradient(circle at 88% 84%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 46% 36%, #fff 0 1px, transparent 1.5px);
  background-size: 140px 140px, 190px 190px, 170px 170px, 210px 210px, 120px 120px, 230px 230px; animation: twinkle 3.2s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }
[data-bg="fireworks"] .backdrop::before { background: radial-gradient(closest-side, var(--a-30), transparent 70%), repeating-conic-gradient(from 0deg, var(--a-20) 0 4deg, transparent 4deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 40%, transparent 72%); mask: radial-gradient(closest-side, #000 40%, transparent 72%); width: 70vmax; height: 70vmax; top: -30vmax; left: -20vmax; opacity: .5; }
@media (prefers-reduced-motion: reduce) { [data-bg] .backdrop { animation: none !important; } }

/* mosaic: two big feature tiles, then three to a row */
[data-layout="mosaic"] .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
[data-layout="mosaic"] .bento > .tile { grid-column: span 2; min-height: 108px; padding: 12px; gap: 8px; }
[data-layout="mosaic"] .bento > .tile .ts, [data-layout="mosaic"] .bento > .tile .arrow { display: none; }
[data-layout="mosaic"] .bento > .tile .tl { font-size: 13.5px; }
[data-layout="mosaic"] .bento > .tile .glyph { width: 38px; height: 38px; }
[data-layout="mosaic"] .bento > .tile:nth-child(-n+2) { grid-column: span 3; min-height: 168px; padding: 16px; }
[data-layout="mosaic"] .bento > .tile:nth-child(-n+2) .ts { display: block; }
[data-layout="mosaic"] .bento > .tile:nth-child(-n+2) .tl { font-size: 17px; }
[data-layout="mosaic"] .bento > .tile:nth-child(-n+2) .glyph { width: 50px; height: 50px; }
[data-layout="mosaic"] .bento > .tile.wide { grid-column: span 6; min-height: 0; flex-direction: row; align-items: center; }
[data-layout="mosaic"] .bento > .tile.wide .ts, [data-layout="mosaic"] .bento > .tile.wide .arrow { display: block; }
[data-layout="mosaic"] .portal .mid { gap: 14px; }
/* carousel: swipe through big tiles */
[data-layout="carousel"] .bento { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 -16px; padding: 4px 16px 10px; scroll-padding: 0 16px; }
[data-layout="carousel"] .bento::-webkit-scrollbar { display: none; }
[data-layout="carousel"] .bento > .tile, [data-layout="carousel"] .bento > .tile.wide { flex: 0 0 72%; min-height: 188px; scroll-snap-align: start;
  flex-direction: column; align-items: stretch; }
[data-layout="carousel"] .bento > .tile .glyph { width: 54px; height: 54px; border-radius: var(--r-lg); }
[data-layout="carousel"] .bento > .tile .tl { font-size: 20px; }
[data-layout="carousel"] .bento > .tile .tt { margin-top: auto; }
[data-layout="carousel"] .bento > .tile.wide .arrow { position: absolute; }
[data-layout="carousel"] .bento > .empty { flex: 0 0 100%; }
@media (min-width: 640px) { [data-layout="carousel"] .bento > .tile, [data-layout="carousel"] .bento > .tile.wide { flex-basis: 40%; } }
@media (min-width: 1100px) { [data-layout="carousel"] .bento > .tile, [data-layout="carousel"] .bento > .tile.wide { flex-basis: 30%; } }
[data-layout="carousel"] .sec h2::after { content: "  ⟶ swipe"; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--dim); }

/* fonts that need a little help */
[data-style="retro-arcade"] h1, [data-style="retro-arcade"] h2, [data-style="retro-arcade"] .tile .tl, [data-style="retro-arcade"] .portal .who { letter-spacing: 0; line-height: 1.35; }
[data-style="retro-arcade"] .portal .who { font-size: clamp(18px, 6vw, 28px); }
[data-style="retro-arcade"] .tile .tl { font-size: 10px; }
[data-style="retro-arcade"] .phead h1, [data-style="retro-arcade"] .dhead h1 { font-size: 16px; }
[data-style="noir"] h1, [data-style="noir"] h2, [data-style="noir"] .tile .tl { letter-spacing: .03em; font-weight: 400; }
[data-style="noir"] .portal .who { font-weight: 400; letter-spacing: .02em; }
[data-style="christmas"] .portal .who, [data-style="halloween"] .portal .who, [data-style="valentines"] .portal .who, [data-style="love-letter"] .portal .who { font-weight: 400; letter-spacing: 0; }
/* style picker page */
.stylebar { position: sticky; bottom: calc(var(--dock-h) + 8px + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 20px; }
@media (min-width: 900px) { .stylebar { bottom: 16px; } }
.stylebar .check { margin-top: 2px; }
.stylecard .sc-now { position: absolute; top: 76px; left: 8px; z-index: 2; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 99px; background: rgba(0,0,0,.55); color: #fff; }
.stylecard[data-layout="carousel"] .sc-tiles { grid-template-columns: 1.4fr 1fr; }
.stylecard[data-layout="mosaic"] .sc-tiles { grid-template-columns: repeat(3, 1fr); }
.stylecard[data-layout="mosaic"] .sc-tile:first-child { grid-column: span 2; }
.curstyle { display: flex; align-items: center; gap: 14px; }
.stylecard.mini { width: 132px; flex: none; cursor: default; }
.stylecard.mini .sc-prev { height: 88px; }
.stylecard.mini:hover { transform: none; }

/* ---------- 2.7: Sport guide, results, news ---------- */
.center { text-align: center; }
.seg.sg-days { grid-template-columns: 1fr 1fr; margin-top: 0; }
.seg.sg-days small { display: block; font-size: 11px; font-weight: 500; opacity: .75; }
.subtabs.sm a { padding: 5px 11px; font-size: 11.5px; }
.sg-fx { align-items: flex-start; }
.sg-fx.live { border-color: color-mix(in oklab, var(--bad) 45%, transparent); background: color-mix(in oklab, var(--bad) 7%, transparent); }
.sg-fx.done { opacity: .62; }
.sg-time { flex: none; width: 52px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding-top: 1px; }
.sg-time b { font: 700 15px/1.1 var(--display); font-variant-numeric: tabular-nums; color: var(--hi); }
.sg-chans { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.sg-ch { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 8px 3px 4px; border-radius: 8px; font-size: 11.5px; font-weight: 600;
  color: color-mix(in oklab, var(--a) 60%, var(--hi)); background: var(--a-6); border: 1px solid var(--a-20); overflow-wrap: anywhere; }
.sg-ch img { width: 30px; height: 18px; object-fit: contain; border-radius: 4px; background: #fff; padding: 1px 2px; flex: none; }
.sg-more { display: contents; }
.sg-more summary { list-style: none; cursor: pointer; padding: 3px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 700; border: 1px dashed var(--line-2); color: var(--mfg); }
.sg-more summary::-webkit-details-marker { display: none; }
.sg-more[open] summary { display: none; }
.sg-score { align-items: center; }
.sg-score.in { border-color: color-mix(in oklab, var(--bad) 45%, transparent); background: color-mix(in oklab, var(--bad) 6%, transparent); }
.sg-team { display: flex; align-items: center; gap: 9px; margin-top: 6px; font-size: 14px; font-weight: 600; min-width: 0; }
.sg-team img, .sg-nologo { width: 22px; height: 22px; object-fit: contain; flex: none; border-radius: 50%; }
.sg-nologo { background: rgba(var(--tint),.08); }
.sg-n { font: 800 17px/1 var(--display); font-variant-numeric: tabular-nums; min-width: 22px; text-align: right; color: var(--hi); }
.sg-st { flex: none; max-width: 38%; text-align: right; }
.sg-lead { display: block; overflow: hidden; border-radius: var(--r-xl); color: inherit; }
.sg-lead img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: rgba(var(--tint),.06); }
.sg-lead-t { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.sg-lead-t b { font: 700 18px/1.25 var(--display); color: var(--hi); overflow-wrap: anywhere; }
.sg-lead-t p { margin: 0; font-size: 13.5px; color: var(--mfg); }
.sg-news { align-items: flex-start; color: inherit; }
.sg-news .sg-thumb { width: 92px; aspect-ratio: 16 / 10; }
.sg-thumb { position: relative; flex: none; border-radius: 10px; overflow: hidden; background: rgba(var(--tint),.06); }
.sg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-nt { display: block; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.sg-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.sg-vid { display: flex; flex-direction: column; gap: 8px; color: inherit; min-width: 0; }
.sg-vid .sg-thumb { width: 100%; aspect-ratio: 16 / 9; }
.sg-play { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.6); color: #fff; z-index: 1; }
[data-mode="light"] .sg-time b, [data-mode="light"] .sg-n, [data-mode="light"] .sg-lead-t b { color: var(--fg); }
.gaterow { padding: 12px 0; border-top: 1px solid var(--line); }
.gaterow:first-child { border-top: 0; padding-top: 0; }
[data-noimages] .attach { display: none !important; }
.chatform .iconbtn { flex: none; }
.bub .shots { margin-top: 6px; }
.bub .gifmsg { display: block; max-width: 220px; border-radius: 12px; margin-top: 6px; }
.preacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; position: relative; }
.preacts .react { font-size: 12px; padding: 2px 7px; }
.preacts .addr { opacity: .55; }
.bub:hover .preacts .addr, .preacts .addr:focus { opacity: 1; }
.ppick { display: flex; flex-basis: 100%; gap: 2px; padding: 4px; border-radius: 12px; z-index: 5; }
.ppick button { font-size: 18px; padding: 4px 6px; border-radius: 8px; background: none; border: 0; cursor: pointer; }
.ppick button:hover { background: rgba(var(--tint),.08); }
.appbanner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.appbanner[hidden] { display: none; }
.appbanner .grow { min-width: 0; }
.appbanner .t-inapp { display: none; }
.appbanner.inapp .t-inapp { display: block; }
.appbanner.inapp .t-web { display: none; }
.appbanner .ab-actions { display: flex; gap: 6px; flex: none; }
.appbanner .ab-x { flex: none; }
@media (max-width: 380px) { .appbanner { flex-wrap: wrap; } .appbanner .ab-actions { order: 3; width: 100%; } }
.hoursbar { display: flex; align-items: center; gap: 8px; margin: 6px 0; padding: 7px 12px; border-radius: 99px; font-size: 12.5px; border: 1px solid var(--line-2); background: rgba(var(--panel),.7); }
.hoursbar.open { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 35%, transparent); }
.hoursbar.closed { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 35%, transparent); }
.hoursbar span { color: var(--mfg); }
.closedmsg { margin: 4px 0 8px; }
.hourspill { display: inline-flex; align-items: center; gap: 6px; }
.hgrid { display: flex; flex-direction: column; gap: 8px; }
.hrow { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.hrow input[type=time] { width: 100%; min-width: 0; font: 15px var(--body); color: var(--fg); background: var(--input); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 9px 10px; color-scheme: inherit; }
.hrow:has(input[type=checkbox]:not(:checked)) input[type=time] { opacity: .4; }
.check.off { opacity: .55; }
/* ---------- 2.8: Shop ---------- */
.shopgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .shopgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.shopgrid > .empty { grid-column: 1 / -1; }
.shopcard { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--r-lg); color: inherit; min-width: 0; }
.shopcard.off { opacity: .6; }
.shop-img { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: rgba(var(--tint),.05); color: var(--mfg); }
.shop-img img { width: 100%; height: 100%; object-fit: cover; }
.shop-img .i { width: 34px; height: 34px; }
.trunc2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.3; }
.shop-price { font: 800 16px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.shop-hero { width: 100%; max-height: 360px; object-fit: contain; border-radius: var(--r-md); background: rgba(var(--tint),.04); }
.shop-desc, .shop-delivery { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.field.qty { width: 110px; flex: none; }
.tile.shoptile .glyph { background: linear-gradient(135deg, #f59e0b, #ec4899); }

/* ---------- 2.8: home tiles always fill their rows (no half-empty rows in any layout) ---------- */
.bento { display: flex; flex-wrap: wrap; align-items: stretch; }
.bento > .tile { flex: 1 1 calc(50% - 7px); min-width: 0; width: auto; }  /* 3.1.37: a hair under half, so Safari's rounding never pushes the second tile onto its own row (flex-grow fills the rest) */
.bento > .tile.wide { flex-basis: 100%; }
.bento > .empty { flex: 1 1 100%; }
@media (min-width: 1100px) {
  .bento > .tile { flex-basis: calc(25% - 10px); }
  .bento > .tile.wide { flex-basis: calc(50% - 7px); }
}
[data-layout="list"] .bento > .tile, [data-layout="cards"] .bento > .tile, [data-layout="list"] .bento > .tile.wide, [data-layout="cards"] .bento > .tile.wide { flex-basis: 100%; }
[data-layout="compact"] .bento > .tile, [data-layout="compact"] .bento > .tile.wide { flex-basis: calc(33.333% - 10px); }
@media (min-width: 900px) { [data-layout="compact"] .bento > .tile, [data-layout="compact"] .bento > .tile.wide { flex-basis: calc(16.666% - 7px); } }
[data-layout="magazine"] .bento > .tile:first-child { flex-basis: 100%; }
/* 2.8.44: carousel styles swipe sideways (the fill-the-row rule above made them wrap into a column) */
[data-layout="carousel"] .bento { flex-wrap: nowrap; align-items: stretch; padding-bottom: 4px; }
[data-layout="carousel"] .bento > .empty { flex: 0 0 100%; }
[data-layout="mosaic"] .bento > .tile { flex-basis: calc(33.333% - 8px); }
[data-layout="mosaic"] .bento > .tile:nth-child(-n+2) { flex-basis: calc(50% - 6px); }
[data-layout="mosaic"] .bento > .tile.wide { flex-basis: 100%; }
b.trunc, strong.trunc, h1.trunc, h2.trunc, h3.trunc { display: block; }
.ntitle { display: block; overflow-wrap: anywhere; line-height: 1.3; }
.item.notif { align-items: flex-start; }
.item.notif .dot-new { margin-top: 6px; flex: none; }

/* 2.8.6: locked premium option with an Activate link */
.lockbox { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: var(--r-md); background: var(--a-6); border: 1px dashed var(--a-20); min-width: 0; }
.lockbox .grow { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.lockbox .hint { display: block; }

/* 2.8.6: install + notifications pop-up */
.appsheet-bg { z-index: 70; place-items: center; padding: 16px; }
.appsheet { max-height: 88dvh; }
.appsheet .sh .row { gap: 12px; min-width: 0; }
.appsheet .sh h2 { font-size: 18px; line-height: 1.25; }
.appsheet .sb { gap: 12px; }
.as-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.as-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; }
.as-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; background: var(--a-20); }
.as-ico { width: 18px; height: 18px; vertical-align: -3px; }
.note.ok { border-color: rgba(52, 211, 153, .35); }
.as-foot { justify-content: space-between; align-items: center; margin-top: 4px; }
@media (max-width: 560px) { .appsheet-bg { place-items: end center; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); } }

/* 2.8.6: more reactions */
.reactpop, .reactpick, .ppick { flex-wrap: wrap; max-width: min(360px, calc(100vw - 24px)); }
.reactpick { border-radius: 18px; }
.reactpop button, .reactpick button { width: 36px; height: 36px; }
.emoji-more { font-weight: 700; font-size: 18px !important; color: var(--a); background: var(--a-6) !important; }
.emojisheet { max-height: 72dvh; }
.emojisheet .label { margin-top: 6px; }
.emojigrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 2px; }
.emojigrid button { height: 42px; border: 0; border-radius: 12px; background: none; font-size: 24px; cursor: pointer; transition: transform .12s, background .12s; }
.emojigrid button:hover, .emojigrid button:focus-visible { background: rgba(var(--tint),.08); transform: scale(1.12); }

/* 2.8.7: notification settings */
.nset { display: flex; flex-direction: column; border: 1px solid rgba(var(--tint),.08); border-radius: var(--r-md); overflow: hidden; }
.nset-h, .nset-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.nset-h { background: rgba(var(--tint),.04); }
.nset-h .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nset-c { width: 48px; flex: none; text-align: center; font-size: 11px; font-weight: 600; color: var(--mfg); }
.nset-row + .nset-row { border-top: 1px solid rgba(var(--tint),.06); }
.nset-row .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nset-row .grow b { font-size: 14.5px; }
.switch { position: relative; width: 48px; height: 28px; flex: none; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span { width: 42px; height: 24px; border-radius: 99px; background: rgba(var(--tint),.16); position: relative; transition: background .15s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.switch input:checked + span { background: var(--grad); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--a); outline-offset: 2px; }

/* ================= 2.8.9: Sport, new layout ================= */
.sg-hero { position: relative; overflow: hidden; border-radius: var(--r-2xl); padding: 16px 18px 20px; border: 1px solid var(--line-2);
  background: linear-gradient(160deg, color-mix(in oklab, #16a34a 30%, var(--solid)) 0%, var(--solid) 60%, color-mix(in oklab, var(--a) 22%, var(--solid)) 100%); }
.sg-hero-bg { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(circle at 100% 50%, transparent 58px, rgba(255,255,255,.10) 59px, rgba(255,255,255,.10) 61px, transparent 62px),
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(255,255,255,.10) calc(100% - 1px)) right / 1px 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 34px, transparent 34px 68px); }
.sg-hero > * { position: relative; }
.sg-hero-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sg-hero .back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--mfg); border: 1px solid var(--line-2); background: rgba(var(--tint),.04); }
.sg-hero h1 { margin: 14px 0 0; font: 800 30px/1.05 var(--display); letter-spacing: -.02em; color: var(--hi); }
.sg-hero p { margin: 6px 0 0; font-size: 13.5px; color: var(--mfg); max-width: 34ch; }
.sg-livepill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; color: #fff;
  background: color-mix(in oklab, var(--bad) 80%, transparent); box-shadow: 0 6px 20px -6px var(--bad); }
.sg-livepill .dotl, .sg-state.live .dotl { background: #fff; }

.sg-tabs { position: sticky; top: calc(env(safe-area-inset-top) + 8px); z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
  padding: 4px; border-radius: 18px; border: 1px solid var(--line-2); background: color-mix(in oklab, var(--solid) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.sg-tabs a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 7px; border-radius: 14px;
  font-size: 11px; font-weight: 600; color: var(--mfg); min-width: 0; transition: background .15s, color .15s; }
.sg-tabs a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-tabs a .i { width: 19px; height: 19px; }
.sg-tabs a.on { color: #fff; background: var(--grad); box-shadow: var(--glow); }
.sg-dot { position: absolute; top: 7px; right: calc(50% - 16px); width: 7px; height: 7px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--solid); }

.sg-tools { display: flex; flex-direction: column; gap: 10px; }
.sg-tools .seg.sg-days { margin: 0; }

.sg-group { padding: 4px 0; border-radius: var(--r-xl); overflow: hidden; }
.sg-group.live { border-color: color-mix(in oklab, var(--bad) 40%, transparent); }
.sg-gh { display: flex; align-items: center; gap: 9px; padding: 12px 16px 8px; }
.sg-gh h2 { margin: 0; font: 700 14px/1.2 var(--display); letter-spacing: .01em; color: var(--hi); flex: 1; min-width: 0; }
.sg-ge { font-size: 18px; line-height: 1; }
.sg-gc { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: rgba(var(--tint),.08); color: var(--mfg); }

.sg-fx, .sg-score { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-top: 1px solid var(--line); background: none; border-radius: 0; }
.sg-gh + .sg-fx, .sg-gh + .sg-score { border-top-color: transparent; }
.sg-fx.live, .sg-score.in { background: color-mix(in oklab, var(--bad) 7%, transparent); border-color: var(--line); }
.sg-fx.done { opacity: .55; }
.sg-time { width: 50px; flex: none; display: flex; flex-direction: column; gap: 5px; padding-top: 1px; }
.sg-time b { font: 700 16px/1.1 var(--display); font-variant-numeric: tabular-nums; color: var(--hi); }
.sg-body { flex: 1; min-width: 0; }
.sg-title { display: block; font-size: 15px; line-height: 1.3; color: var(--fg); overflow-wrap: anywhere; }
.sg-league { font-size: 12px; color: var(--mfg); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-state { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; background: rgba(var(--tint),.1); color: var(--mfg); white-space: nowrap; }
.sg-state.live { background: var(--bad); color: #fff; }
.sg-chans { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.sg-ch { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 9px 3px 3px; border-radius: 9px; font-size: 11.5px; font-weight: 600;
  background: rgba(var(--tint),.06); border: 1px solid var(--line); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-ch:not(:has(img)) { padding-left: 9px; }
.sg-ch img { width: 34px; height: 20px; object-fit: contain; border-radius: 5px; background: #fff; padding: 2px 3px; flex: none; }
.sg-more summary { padding: 3px 10px; border-radius: 9px; font-size: 11.5px; }

.sg-score { align-items: center; }
.sg-team { margin-top: 7px; font-size: 14.5px; }
.sg-team img, .sg-nologo { width: 24px; height: 24px; }
.sg-nologo { display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--mfg); }
.sg-st { flex: none; text-align: right; }
.sg-when { font-size: 12px; font-weight: 600; color: var(--mfg); white-space: nowrap; }

/* news */
.sg-srchead { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.sg-bbc { display: inline-block; padding: 4px 9px; border-radius: 6px; background: #fff; color: #000; font: 800 12px/1 var(--body); letter-spacing: .02em; }
.sg-pic { position: relative; display: block; overflow: hidden; background: linear-gradient(135deg, color-mix(in oklab, var(--a) 35%, var(--solid)), color-mix(in oklab, var(--a2) 25%, var(--solid))); }
.sg-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sg-pic.noimg img { display: none; }
.sg-pic.noimg::after { content: attr(data-label); position: absolute; left: 10px; bottom: 8px; right: 10px; text-align: left;
  font: 800 12px/1.2 var(--display); color: rgba(255,255,255,.9); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-pic.noimg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.18), transparent 55%); }
.sg-lead .sg-pic.noimg::after { display: none; }
.sg-pic.sm.noimg::after { font-size: 9px; }
.sg-lead { position: relative; display: block; border-radius: var(--r-xl); overflow: hidden; color: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.sg-lead .sg-pic { aspect-ratio: 16 / 10; }
.sg-lead-t { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 60px 16px 16px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55) 35%, rgba(0,0,0,.88)); }
.sg-lead-t b { font: 800 20px/1.22 var(--display); color: #fff; overflow-wrap: anywhere; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.sg-lead .sg-meta { color: rgba(255,255,255,.8); }
.sg-sum { font-size: 13px; color: rgba(255,255,255,.82); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-meta { font-size: 11.5px; font-weight: 600; color: var(--mfg); }
.sg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sg-card { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; color: inherit; padding: 0; }
.sg-card .sg-pic { aspect-ratio: 16 / 10; }
.sg-card-t { display: flex; flex-direction: column; gap: 6px; padding: 10px 11px 12px; flex: 1; }
.sg-card-t b { font-size: 13.5px; line-height: 1.3; color: var(--fg); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sg-card-t .sg-meta { margin-top: auto; }
.sg-row { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); color: inherit; }
.sg-row:first-child { border-top: 0; }
.sg-row .grow { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sg-row b { font-size: 14px; line-height: 1.32; color: var(--fg); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sg-pic.sm { width: 84px; aspect-ratio: 4 / 3; border-radius: 10px; flex: none; }
.sg-row:hover b, .sg-card:hover b { color: var(--hi); }

/* highlights */
.sg-lead.vid .sg-pic { aspect-ratio: 16 / 9; }
.sg-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 10px; }
.sg-vid { display: flex; flex-direction: column; gap: 6px; color: inherit; min-width: 0; }
.sg-vid .sg-pic { aspect-ratio: 16 / 9; border-radius: 12px; }
.sg-vid b { font-size: 13px; line-height: 1.3; color: var(--fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-play { position: absolute; inset: 0; margin: auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.62);
  color: #fff; z-index: 1; border: 1.5px solid rgba(255,255,255,.7); }
.sg-play.lg { width: 58px; height: 58px; top: -30%; }
.sg-play .i { margin-left: 2px; }

@media (min-width: 760px) {
  .sg-cards { grid-template-columns: repeat(4, 1fr); }
  .sg-lead .sg-pic { aspect-ratio: 21 / 9; }
  .sg-tools { flex-direction: row; align-items: center; }
  .sg-tools .seg.sg-days { flex: none; width: 320px; }
  .sg-tools .search { flex: 1; }
}
[data-mode="light"] .sg-hero { background: linear-gradient(160deg, #dcfce7 0%, #fff 60%, color-mix(in oklab, var(--a) 12%, #fff) 100%); }
[data-mode="light"] .sg-hero-bg { filter: invert(1); opacity: .25; }
[data-mode="light"] .sg-tabs { background: rgba(255,255,255,.88); }
[data-mode="light"] .sg-time b, [data-mode="light"] .sg-gh h2, [data-mode="light"] .sg-hero h1 { color: var(--fg); }
.grow-full { flex: 1 1 100%; min-width: 0; }

/* ================= 2.8.10: messages — avatar, name and time on every message ================= */
.msg { flex-direction: row; align-items: flex-start; gap: 10px; margin-top: 16px; }
.msg.grouped { margin-top: 10px; }
.msg.mine { flex-direction: row-reverse; align-items: flex-start; }
.msg-av { flex: none; padding-top: 2px; }
.msg-av .av { width: 36px; height: 36px; font-size: 14px; box-shadow: 0 0 0 2px rgba(var(--tint),.08); }
.msg.staffmsg .msg-av .av { box-shadow: 0 0 0 2px color-mix(in oklab, var(--staff) 60%, transparent); }
.msg-main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: min(calc(100% - 50px), 620px); }
.msg.mine .msg-main { align-items: flex-end; }
.msg-head { margin: 0 2px 5px; gap: 7px; flex-wrap: wrap; font-size: 13px; line-height: 1.2; }
.msg.mine .msg-head { flex-direction: row-reverse; }
.msg.mine .msg-head .msg-name { display: inline; }
.msg-name { font-weight: 800; letter-spacing: .01em; }
.msg-head time { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.bubble { max-width: 100%; border-radius: 4px 18px 18px 18px; padding: 10px 14px; }
.grouped .bubble { border-top-left-radius: 4px; }
.msg.mine .bubble, .msg.mine.grouped .bubble { border-radius: 18px 4px 18px 18px; }
.bubble .body { font-size: 15px; line-height: 1.5; white-space: pre-wrap; }
.msg-foot { margin: 5px 2px 0; min-height: 0; }
.ann-msg .msg-main { max-width: none; flex: 1; align-items: stretch; }
.ann-msg.mine { flex-direction: row; }
.ann-msg.mine .msg-head { flex-direction: row; }
.ann-msg .bubble { border-radius: 4px 20px 20px 20px !important; }
.vidmsg { display: block; width: 100%; max-width: 420px; max-height: 360px; border-radius: 12px; background: #000; margin-top: 6px; }
.shots .vidmsg { margin-top: 0; max-height: 300px; }
.shots:not(.n1) .vidmsg { aspect-ratio: 1; object-fit: cover; }
.previews video { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line-2); background: #000; }
.bub .vidmsg { max-width: 240px; }
.chathead { box-shadow: var(--shadow); }
.chathead .glyph { box-shadow: var(--glow); }
.composer { box-shadow: 0 -10px 30px -18px rgba(0,0,0,.6), var(--shadow); }
.crow textarea { font-size: 15px; background: rgba(var(--tint),.04); }
.typing { padding: 2px 12px 6px; font-weight: 600; }
.sysmsg { margin: 14px auto; }
@media (min-width: 900px) { .msg-main { max-width: min(calc(100% - 50px), 720px); } }
.msg.ann-msg .msg-main { align-items: stretch; }
.msg.ann-msg.mine .msg-head { flex-direction: row; }
.msg.ann-msg.mine .bubble { color: var(--fg); }
.chathead { background: color-mix(in oklab, var(--solid) 90%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.msg.ann-msg.mine .bubble { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--edge) border-box; border: 1px solid transparent; box-shadow: var(--shadow); border-radius: 4px 20px 20px 20px !important; }
.msg.ann-msg.mine .msg-foot { flex-direction: row; }

/* 2.8.10: channels grouped by section in the dashboard */
.chjump { display: flex; flex-wrap: wrap; gap: 6px; }
.chjump a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; font-size: 12px; font-weight: 700; border: 1px solid var(--line-2); color: var(--mfg); }
.chjump a:hover { color: var(--fg); border-color: var(--a-45); }
.chjump .tb, .chsec-h .tb { font-size: 10.5px; padding: 1px 7px; border-radius: 99px; background: rgba(var(--tint),.08); color: var(--mfg); font-weight: 700; vertical-align: middle; }
.chsec { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 80px; }
.chsec-h { display: flex; gap: 12px; align-items: center; }
.chsec-h h2 { font-size: 17px; }
.chlist { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.chlist > .chcard { border-radius: 0; margin: 0; padding: 12px 14px; background: rgba(var(--tint),.02); }
.chlist > .chcard + .chcard { border-top: 1px solid var(--line); }
.chlist > .chcard[open] { background: rgba(var(--tint),.04); }
.chempty { padding: 14px; text-align: center; }
.chnew { border: 1px dashed var(--line-2); border-radius: var(--r-lg); padding: 10px 14px; }
.chnew summary { color: var(--mfg); }
.chnew[open] summary { color: var(--fg); }
.sheet-tk { display: flex; gap: 8px; margin-bottom: 6px; }
.sheet-tkbtn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 10px; border-radius: 12px; font-size: 12.5px; font-weight: 700; border: 1px solid var(--line-2); background: rgba(var(--tint),.04); color: var(--fg); }
.sheet-tkbtn.new { border-color: var(--a-45); background: var(--a-12); }
.sheet-tkbtn .count { position: static; margin-left: 2px; }

/* 2.8.10: latest announcement you haven't read yet */
.ann.unread { position: relative; overflow: hidden; border-color: transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; border: 1.5px solid transparent;
  animation: ann-glow 2.4s ease-in-out infinite; }
.ann.unread::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.10) 45%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.10) 55%, transparent 70%);
  transform: translateX(-100%); animation: ann-sweep 3.2s ease-in-out infinite; }
.ann.unread .glyph { animation: ann-ring 2.4s ease-out infinite; }
.ann.unread .new { animation: ann-pop 1.2s ease-in-out infinite; }
@keyframes ann-glow { 0%, 100% { box-shadow: var(--shadow), 0 0 0 0 var(--a-45); } 50% { box-shadow: var(--shadow), 0 0 28px 2px var(--a-45); } }
@keyframes ann-sweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@keyframes ann-ring { 0% { box-shadow: 0 0 0 0 var(--a-60); } 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes ann-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .ann.unread, .ann.unread::after, .ann.unread .glyph, .ann.unread .new { animation: none; } }
.notice { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; background: rgba(var(--tint),.02); }
.notice.off summary .grow { opacity: .55; }
.notice summary { gap: 8px; }

/* 2.8.10: font picker with live preview */
.fontgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 6px; }
.fontopt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(var(--tint),.03); cursor: pointer; text-align: center; }
.fontopt input { position: absolute; opacity: 0; pointer-events: none; }
.fontopt .ff { font-size: 26px; line-height: 1.1; color: var(--hi); }
.fontopt small { font-size: 11px; color: var(--mfg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.fontopt:has(input:checked) { border-color: var(--a); background: var(--a-12); box-shadow: 0 0 0 2px var(--a-45); }
.fontopt:has(input:focus-visible) { outline: 2px solid var(--a); outline-offset: 2px; }
.ff-sora { font-family: "Sora", var(--display); }
.ff-poppins { font-family: "Poppins", var(--display); }
.ff-montserrat { font-family: "Montserrat", var(--display); }
.ff-bebas-neue { font-family: "Bebas Neue", var(--display); }
.ff-orbitron { font-family: "Orbitron", var(--display); }
.ff-righteous { font-family: "Righteous", var(--display); }
.ff-russo-one { font-family: "Russo One", var(--display); }
.ff-audiowide { font-family: "Audiowide", var(--display); }
.ff-bungee { font-family: "Bungee", var(--display); }
.ff-pacifico { font-family: "Pacifico", var(--display); }
.ff-permanent-marker { font-family: "Permanent Marker", var(--display); }
.ff-oswald { font-family: "Oswald", var(--display); }
.sg-live-score { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 8px; font: 800 13px/1.5 var(--display); font-variant-numeric: tabular-nums; color: #fff; background: var(--bad); vertical-align: 1px; }
.sg-live-score.ft { background: rgba(var(--tint),.14); color: var(--fg); }
.sg-live-min { font-size: 11.5px; font-weight: 800; color: var(--bad); vertical-align: 1px; }
.subtabs a.livechip { display: inline-flex; align-items: center; gap: 6px; border-color: color-mix(in oklab, var(--bad) 50%, transparent); color: var(--fg); }
.subtabs a.livechip .dotl { background: var(--bad); }
.subtabs a.livechip.on { background: var(--bad); border-color: var(--bad); color: #fff; }
.subtabs a.livechip.on .dotl { background: #fff; }
.sg-scoreline { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .sg-live-score { margin-left: 0; }
.kv-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.copyme { padding: 3px 9px; border-radius: 8px; background: rgba(var(--tint),.08); font-size: 13px; cursor: pointer; }

.subtabs a svg { margin-right: 4px; vertical-align: -2px; }

.msg-btn { display: inline-flex; margin-top: 8px; align-self: flex-start; }

.list.scroll5 { max-height: 430px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }

.kvs { display: grid; gap: 10px; }
.kvs .copybox { margin-top: 4px; }

.order-link { min-width: 0; color: inherit; text-decoration: none; }
.del-order { margin: 0; }
.del-order .iconbtn { width: 32px; height: 32px; border-radius: 10px; color: var(--bad, #f87171); }

.ann-list { display: grid; gap: 4px; padding: 10px; margin-top: -4px; }
.ann-row { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 12px; color: inherit; text-decoration: none; min-width: 0; }
.ann-row:hover { background: rgba(var(--tint), .05); }
.ann-row .dotl { width: 8px; height: 8px; border-radius: 99px; background: var(--line-2); flex: none; }
.ann-row.unread .dotl { background: var(--accent, #a35cff); box-shadow: 0 0 8px var(--a-60); }
.ann-row.unread .trunc { font-weight: 700; }
.ann-list .btn.block { margin-top: 6px; }

.secure-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px auto 8px; padding: 4px 12px; line-height: 1.35; width: fit-content; max-width: 100%; border-radius: 99px; font-size: 12px; color: var(--muted, #a7a3b8); background: rgba(var(--tint), .05); border: 1px solid var(--line); text-align: center; }
.secure-note .i { flex: none; opacity: .8; }

.ann-all { display: flex; align-items: center; gap: 8px; margin: -6px 4px 4px; padding: 10px 14px; border-radius: 14px; color: var(--accent, #c9a6ff); text-decoration: none; font-weight: 700; font-size: 14px; background: rgba(var(--tint), .04); border: 1px solid var(--line); }
.ann-all:hover { background: rgba(var(--tint), .08); }

.vc-foot { margin-top: auto; padding: 14px 8px 2px; text-align: center; font-size: 11.5px; color: var(--dim); letter-spacing: .01em; }
.vc-foot span { color: var(--mfg); font-weight: 600; }
.vc-foot a { color: var(--mfg); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.bare-foot { position: relative; z-index: 1; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.chatpage .vc-foot { padding-top: 4px; }

/* 2.8.27: photo-style backgrounds for the Sport and Lifestyle tiles, and the Lifestyle page */
.tile.phototile { min-height: 96px; border-color: rgba(255,255,255,.14); color: #fff; }
.tile.phototile .tilebg { position: absolute; inset: 0; background-size: cover; background-position: center; pointer-events: none; }
.tile.phototile .tilebg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,4,12,.72) 0%, rgba(5,4,12,.35) 55%, rgba(5,4,12,.1) 100%); }
.tile.phototile > :not(.tilebg, .count, .arrow) { position: relative; z-index: 1; }
.tile.phototile > :is(.count, .arrow) { z-index: 2; }
.tile.phototile .tl { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.tile.phototile .ts { color: rgba(255,255,255,.82); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.tile.phototile .arrow { color: rgba(255,255,255,.8); }
.tile.phototile::after { display: none; }
.tile.phototile:hover .tilebg { transform: scale(1.04); }
.tile.phototile .tilebg { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.tile.sporttile .tilebg { background-image: url("/static/img/tile-sport.svg"); }
.tile.lifestyletile .tilebg { background-image: url("/static/img/tile-lifestyle.svg"); }
.tile.lifestyletile .glyph { background: linear-gradient(135deg, #ff4fd8, #f59e0b); box-shadow: 0 10px 26px -10px #ff4fd8, inset 0 1px 0 rgba(255,255,255,.35); }

.lf-hero { background: linear-gradient(160deg, color-mix(in oklab, var(--a2) 32%, var(--solid)) 0%, var(--solid) 60%, color-mix(in oklab, var(--a) 26%, var(--solid)) 100%); }
.lf-hero-bg { position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background: radial-gradient(38% 60% at 88% 30%, var(--a-45), transparent 70%), radial-gradient(30% 50% at 70% 85%, var(--a2-45), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(var(--tint), .05) 22px 23px);
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 80%); mask-image: linear-gradient(90deg, transparent 20%, #000 80%); }
.lf-tabs { grid-auto-columns: minmax(68px, 1fr); overflow-x: auto; scrollbar-width: none; }
.lf-tabs::-webkit-scrollbar { display: none; }
.lf-jokes, .lf-signs { display: grid; gap: 10px; }
.lf-joke { display: block; padding: 16px 18px; border-radius: var(--r-xl); }
.lf-joke summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.lf-joke summary::-webkit-details-marker { display: none; }
.lf-jq { font: 600 15.5px/1.45 var(--body, inherit); color: var(--hi, var(--fg)); overflow-wrap: anywhere; }
.lf-joke .pill { align-self: flex-start; margin-top: 6px; }
.lf-tap { font-size: 12px; color: var(--a2, var(--mfg)); font-weight: 600; }
.lf-joke[open] .lf-tap { display: none; }
.lf-punch { margin: 10px 0 0; font: 700 16px/1.4 var(--display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; animation: lf-pop .35s cubic-bezier(.2,.8,.2,1); }
@keyframes lf-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.lf-signs { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.lf-sign { border-radius: var(--r-xl); padding: 12px 14px; }
.lf-sign summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.lf-sign summary::-webkit-details-marker { display: none; }
.lf-sign summary .hint { display: block; font-size: 12px; }
.lf-sign[open] .chev { transform: rotate(180deg); }
.lf-sign p { margin: 12px 0 2px; font-size: 14.5px; line-height: 1.6; color: var(--fg); }
.lf-zod { width: 42px; height: 42px; flex: none; display: grid; place-items: center; font-size: 22px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, #7c3aed, #db2777); box-shadow: 0 8px 22px -10px #db2777; }
.lf-quiz { display: grid; gap: 10px; }
.lf-score { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lf-score b { flex: 1; }
.lf-scoreval { font: 800 18px var(--display); padding: 4px 12px; border-radius: 99px; background: var(--grad); color: #fff; }
.lf-qmeta { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mfg); }
.lf-qt { display: block; margin: 6px 0 12px; font: 700 16px/1.4 var(--display); }
.lf-opts { display: grid; gap: 8px; }
.lf-opt { text-align: left; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(var(--tint),.04); color: var(--fg); font: 600 14px/1.35 inherit; cursor: pointer; }
.lf-opt:hover:not([disabled]) { border-color: var(--a-45); }
.lf-opt.right { border-color: var(--ok); background: color-mix(in oklab, var(--ok) 18%, transparent); }
.lf-opt.wrong { border-color: var(--bad); background: color-mix(in oklab, var(--bad) 16%, transparent); }
.lf-opt[disabled] { cursor: default; }
.lf-h { font: 800 22px var(--display); margin: 4px 0 0; }
.lf-otd { align-items: flex-start; }
.lf-year { flex: none; min-width: 48px; font: 800 15px var(--display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lf-shelf { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.lf-shelf::-webkit-scrollbar { display: none; }
.lf-poster { flex: none; width: 128px; display: flex; flex-direction: column; gap: 4px; color: inherit; scroll-snap-align: start; }
.lf-poster b { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lf-poster .hint { font-size: 11.5px; }
.lf-pic { aspect-ratio: 2 / 3; border-radius: 14px; border: 1px solid var(--line-2); }
.lf-rate { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,.6); }
/* names always on one line: the text shrinks to fit (app.js [data-fit]); a little room so gradient letters aren't clipped */
.portal .mid .grow { min-width: 0; }
.portal .who, .profile-name { white-space: nowrap; overflow: hidden; overflow-wrap: normal; padding: .06em .12em .1em; margin: -.06em -.12em -.1em; }
.portal .chips { justify-content: flex-end; }
.rh-state { display: block; margin-top: 4px; font-size: 12px; }

/* 2.8.27: games (Chat & Games) */
.gm-emoji { font-size: 20px; }
.gm-lb { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: rgba(var(--tint),.04); color: inherit; }
.gm-lb.me { background: var(--a-20); border: 1px solid var(--a-45); }
.gm-rank { width: 22px; text-align: center; font-weight: 800; color: var(--mfg); }
.gm-word { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.wd-grid { display: grid; gap: 6px; }
.wd-row { display: grid; grid-template-columns: repeat(5, 54px); gap: 6px; }
.wd-cell { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 10px; font: 800 26px var(--display); border: 2px solid var(--line-2); background: rgba(var(--tint),.03); text-transform: uppercase; }
.wd-row.now .wd-cell { border-color: var(--a-45); }
.wd-cell.g, .wd-cell.y, .wd-cell.b { border-color: transparent; color: #fff; animation: wd-flip .5s ease both; }
.wd-cell.g { background: #22a55b; } .wd-cell.y { background: #d4a017; } .wd-cell.b { background: #3b3650; }
.wd-row .wd-cell:nth-child(2) { animation-delay: .08s; } .wd-row .wd-cell:nth-child(3) { animation-delay: .16s; }
.wd-row .wd-cell:nth-child(4) { animation-delay: .24s; } .wd-row .wd-cell:nth-child(5) { animation-delay: .32s; }
@keyframes wd-flip { 0% { transform: rotateX(90deg); } 100% { transform: none; } }
.wd-form { display: flex; gap: 8px; width: 100%; max-width: 320px; }
.wd-form input { flex: 1; text-transform: uppercase; letter-spacing: .3em; font-weight: 800; text-align: center; }
.wd-keys { display: grid; gap: 6px; width: 100%; max-width: 480px; }
.wd-krow { display: flex; gap: 4px; justify-content: center; }
.wd-key { flex: 1; min-width: 0; max-width: 42px; height: 46px; border-radius: 8px; border: 0; font: 700 14px var(--body); color: var(--fg); background: rgba(var(--tint),.12); cursor: pointer; }
.wd-key.wide { max-width: 64px; flex: 1.5; font-size: 12px; }
.wd-key.g { background: #22a55b; color: #fff; } .wd-key.y { background: #d4a017; color: #fff; } .wd-key.b { background: rgba(var(--tint),.04); color: var(--dim); }
.wd-result { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.wd-result b { font: 800 22px var(--display); }
.wd-result.won b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 360px) { .wd-row { grid-template-columns: repeat(5, 46px); } .wd-cell { width: 46px; height: 46px; font-size: 22px; } }

.gm-2048 { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.g2-top { display: flex; gap: 8px; align-items: center; width: 100%; max-width: 360px; }
.g2-box { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px 8px; border-radius: 12px; background: rgba(var(--tint),.06); }
.g2-box span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--mfg); font-weight: 700; }
.g2-box b { font: 800 20px var(--display); }
.g2-board { position: relative; width: min(100%, 360px); aspect-ratio: 1; padding: 8px; border-radius: 16px; background: rgba(var(--tint),.08); display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 8px; touch-action: none; user-select: none; outline: none; }
.g2-cell { border-radius: 10px; background: rgba(var(--tint),.06); display: grid; place-items: center; font: 800 clamp(18px, 7vw, 30px) var(--display); color: #fff; transition: background .12s; }
.g2-cell.pop { animation: g2-pop .18s ease; }
@keyframes g2-pop { 50% { transform: scale(1.12); } }
.g2-cell[data-v="2"] { background: #3d3563; } .g2-cell[data-v="4"] { background: #4b3a7a; }
.g2-cell[data-v="8"] { background: #6d3bb0; } .g2-cell[data-v="16"] { background: #8b3fd1; }
.g2-cell[data-v="32"] { background: #a34be0; } .g2-cell[data-v="64"] { background: #c14fd8; }
.g2-cell[data-v="128"] { background: #db4fc0; font-size: clamp(16px, 6vw, 26px); } .g2-cell[data-v="256"] { background: #ec4f9c; font-size: clamp(16px, 6vw, 26px); }
.g2-cell[data-v="512"] { background: #f5607a; font-size: clamp(16px, 6vw, 26px); } .g2-cell[data-v="1024"] { background: #f78a4f; font-size: clamp(13px, 5vw, 22px); }
.g2-cell[data-v="2048"] { background: #fbbf24; color: #1a1206; font-size: clamp(13px, 5vw, 22px); box-shadow: 0 0 24px #fbbf24aa; }
.g2-cell.big { background: #22d3ee; color: #062029; font-size: clamp(12px, 4.4vw, 20px); }

.gm-four { gap: 12px; display: flex; flex-direction: column; }
.c4 { width: min(100%, 380px); margin: 0 auto; }
.c4-cols { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.c4-drop { height: 34px; border: 0; border-radius: 10px; background: var(--a-20); color: var(--fg); font-size: 14px; cursor: pointer; }
.c4-drop:disabled { opacity: .25; cursor: default; }
.c4-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 6px; border-radius: 16px; background: linear-gradient(160deg, #2b3aa8, #1d2575); box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 12px 30px -12px #1d2575; }
.c4-cell { aspect-ratio: 1; border-radius: 50%; background: #0b0a1a; display: grid; place-items: center; }
.c4-dot { display: inline-block; width: 86%; height: 86%; border-radius: 50%; }
.c4-dot.p1 { background: radial-gradient(circle at 35% 30%, #ff9aa8, #ef233c 60%); box-shadow: inset 0 -3px 6px rgba(0,0,0,.35); }
.c4-dot.p2 { background: radial-gradient(circle at 35% 30%, #fff1a8, #f5b700 60%); box-shadow: inset 0 -3px 6px rgba(0,0,0,.35); }
.c4-dot.p0 { background: transparent; }
.hint .c4-dot { width: 14px; height: 14px; vertical-align: -2px; }
.readonly.closed { color: var(--fg); border-style: solid; border-color: color-mix(in oklab, var(--warn) 40%, transparent); text-align: left; }
.readonly.closed b { color: var(--warn); }
.closednote { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 8px; border-radius: 14px; font-size: 13px; color: var(--fg); border: 1px solid color-mix(in oklab, var(--warn) 40%, transparent); background: color-mix(in oklab, var(--warn) 8%, transparent); }

/* 2.8.27: more name fonts */
.ff-anton { font-family: "Anton", var(--display); }
.ff-bangers { font-family: "Bangers", var(--display); }
.ff-lobster { font-family: "Lobster", var(--display); }
.ff-luckiest-guy { font-family: "Luckiest Guy", var(--display); }
.ff-titan-one { font-family: "Titan One", var(--display); }
.ff-black-ops-one { font-family: "Black Ops One", var(--display); }
.ff-monoton { font-family: "Monoton", var(--display); }
.ff-staatliches { font-family: "Staatliches", var(--display); }
.ff-rubik-mono-one { font-family: "Rubik Mono One", var(--display); }
.ff-press-start-2p { font-family: "Press Start 2P", var(--display); }
.ff-creepster { font-family: "Creepster", var(--display); }
.ff-metal-mania { font-family: "Metal Mania", var(--display); }
.ff-nosifer { font-family: "Nosifer", var(--display); }
.ff-rye { font-family: "Rye", var(--display); }
.ff-unifrakturmaguntia { font-family: "UnifrakturMaguntia", var(--display); }
.ff-shrikhand { font-family: "Shrikhand", var(--display); }
.ff-abril-fatface { font-family: "Abril Fatface", var(--display); }
.ff-playfair-display { font-family: "Playfair Display", var(--display); }
.ff-cinzel { font-family: "Cinzel", var(--display); }
.ff-great-vibes { font-family: "Great Vibes", var(--display); }
.ff-dancing-script { font-family: "Dancing Script", var(--display); }
.ff-satisfy { font-family: "Satisfy", var(--display); }
.ff-kaushan-script { font-family: "Kaushan Script", var(--display); }
.ff-rock-salt { font-family: "Rock Salt", var(--display); }
.ff-caveat { font-family: "Caveat", var(--display); }
.ff-raleway { font-family: "Raleway", var(--display); }
.ff-exo-2 { font-family: "Exo 2", var(--display); }
.ff-teko { font-family: "Teko", var(--display); }
.ff-syne { font-family: "Syne", var(--display); }
.ff-unbounded { font-family: "Unbounded", var(--display); }
.ff-kanit { font-family: "Kanit", var(--display); }
.ff-josefin-sans { font-family: "Josefin Sans", var(--display); }
.ff-comfortaa { font-family: "Comfortaa", var(--display); }
.ff-chakra-petch { font-family: "Chakra Petch", var(--display); }
/* name outline & glow keep the gradient colour: the glow is a drop-shadow of the letters (a text-shadow
   shows through see-through gradient text as a dark block) */
.portal .who.nfx, .who-preview.nfx { text-shadow: none; -webkit-text-stroke: var(--name-stroke, 0) var(--name-stroke-c, transparent);
  filter: drop-shadow(0 0 calc(var(--name-glow, 0px) / 2) var(--name-glow-c, transparent)) drop-shadow(0 0 var(--name-glow, 0px) var(--name-glow-c, transparent)); }
.portal .who, .profile-name { overflow: visible; }
/* 2.8.27: the name sits on its own line under the greeting, above the logo */
.portal .toprow .kicker { white-space: nowrap; flex: none; }
.portal .toprow .hourspill { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: auto; }
.portal .toprow .iconbtn { flex: none; }
.portal-in > .who { margin-top: -6px; margin-bottom: -4px; }
.portal .mid .welcome { margin-top: 0; }
[data-layout="cards"] .portal-in > .who { text-align: center; }
/* waiting list: the email in full, big and easy to read */
.pend-email { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px; border-radius: 14px; background: rgba(var(--tint),.05); border: 1px solid var(--line-2); }
.pend-email .pe-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mfg); }
.pend-email .pe-addr { flex: 1 1 100%; font: 700 16px/1.35 var(--body); color: var(--hi); overflow-wrap: anywhere; user-select: all; }
/* 2.8.29: small status and role chips right under the name */
.portal .chips.mini { justify-content: flex-start; gap: 5px; margin-top: -8px; }
.portal .chips.mini .status, .portal .chips.mini .pill, .portal .chips.mini .chip { font-size: 11px; padding: 3px 9px 3px 7px; gap: 5px; min-height: 0; line-height: 1.4; }
.portal .chips.mini .status .dotl { width: 6px; height: 6px; }
.portal .chips.mini .status span { font-weight: 500; }
.portal .chips.mini .i.xs { width: 11px; height: 11px; }
[data-layout="cards"] .portal .chips.mini { justify-content: center; }
/* 2.8.29: word hints, letters used, 2048 screen lock */
.wd-cell.hinted { color: var(--a2, #ff4fd8); opacity: .75; border-style: dashed; border-color: var(--a-45); }
.wd-cell.typed { border-color: var(--a-60); }
.wd-hints { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.wd-hint { padding: 6px 12px; border-radius: 99px; font-size: 13px; background: var(--a-20); border: 1px solid var(--a-45); }
.wd-hint b { font-size: 15px; }
.wd-letters { display: grid; gap: 8px; width: 100%; max-width: 360px; }
.wd-letters > div { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.wd-lab { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mfg); margin-right: 4px; }
.wd-l { width: 26px; height: 28px; display: grid; place-items: center; border-radius: 7px; font: 800 13px var(--display); }
.wd-l.in { background: #d4a017; color: #fff; }
.wd-l.out { background: rgba(var(--tint),.06); color: var(--dim); text-decoration: line-through; }
html.g2-locked, html.g2-locked body { overflow: hidden; overscroll-behavior: none; touch-action: none; }
html.g2-locked .gm-2048 { touch-action: none; }
.g2-lockbtn { align-self: center; }
.g2-board, .g2-board * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* 2.8.29: name font picker pops up as one big list; tap one to see it and Save or Cancel */
.fontnow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(var(--tint),.04); }
.fontnow-name { flex: 1 1 100%; font-size: 28px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fontpop { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.fontpop[hidden], .fontask[hidden] { display: none; }
.fontpop-box { width: min(560px, 100%); max-height: 86dvh; display: flex; flex-direction: column; border-radius: 24px 24px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); animation: fp-up .25s cubic-bezier(.2,.8,.2,1); }
@media (min-width: 640px) { .fontpop { align-items: center; } .fontpop-box { border-radius: 24px; } }
@keyframes fp-up { from { transform: translateY(30px); opacity: 0; } }
.fontpop-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; }
.fontpop-list { overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 6px; padding-bottom: 4px; }
.fontrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(var(--tint),.04); color: var(--fg); text-align: left; cursor: pointer; }
.fontrow.on { border-color: var(--a-45); background: var(--a-20); }
.fontrow-name { font-size: 24px; line-height: 1.2; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fontrow small { flex: none; color: var(--mfg); font-size: 11.5px; }
.fontask { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.5); }
.fontask-box { width: min(420px, 100%); display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 22px; text-align: center; animation: fp-up .2s ease; }
.fontask-name { font-size: 40px; margin: 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: .1em .15em; }
html.sheet-lock, html.sheet-lock body { overflow: hidden; }
.fontpop-box, .fontask-box { background: var(--solid); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ================= 2.8.30: home card layouts (Branding -> Home card), 12 to pick from ================= */
.portal .hero { display: grid; gap: 10px 16px; align-items: center; }
.portal .hero > .toprow { grid-area: top; }
.portal .hero > .h-logo { grid-area: logo; display: flex; }
.portal .hero > .who { grid-area: name; margin: 0; min-width: 0; }
.portal .hero > .chips { grid-area: chips; margin: 0; justify-content: flex-start; }
.portal .hero > .h-line { grid-area: line; display: none; font-size: 12.5px; color: var(--mfg); }
.portal .hero > .h-line b.ok { color: var(--ok); } .portal .hero > .h-line b.bad { color: var(--bad); } .portal .hero > .h-line i { font-style: normal; color: var(--warn); }
.portal .hero > .welcome { grid-area: text; margin: 0; }
.portal .hero > .h-stats { grid-area: stats; display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.h-st { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: rgba(var(--panel),.45); border: 1px solid var(--line-2); color: inherit; min-width: 0; }
.h-st b { font: 800 19px/1.1 var(--display); } .h-st b.ok { color: var(--ok); } .h-st b.warn { color: var(--warn); }
.h-st span { font-size: 11px; color: var(--mfg); }
.portal .hero-cover, .portal .hero-wm { display: none; }
.portal .hero-wm { position: absolute; pointer-events: none; }
.portal .hero-wm.letter { display: none !important; }
.portal .who { font-size: clamp(30px, 9vw, 46px); }

/* A: centred profile (default) */
.hero-a .hero { grid-template-columns: 1fr; grid-template-areas: "top" "logo" "name" "chips" "text"; justify-items: center; text-align: center; }
.hero-a .hero > .toprow { justify-self: stretch; }
.hero-a .hero > .chips { justify-content: center; }
.hero-a .hero > .who { max-width: 100%; }
.hero-a .orb.s104 { --s: 112px; }

/* B: compact app header */
.hero-b .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "logo name" "logo chips" "text text"; }
.hero-b .orb.s104 { --s: 64px; }
.hero-b .hero > .who { font-size: clamp(24px, 7vw, 34px); align-self: end; }
.hero-b .hero > .chips { align-self: start; }
.hero-b .hero > .welcome { padding-top: 12px; border-top: 1px solid var(--line-2); }

/* C: big name, logo watermark */
.hero-c .hero { grid-template-columns: 1fr; grid-template-areas: "top" "name" "text" "chips"; }
.hero-c .hero > .h-logo { display: none; }
.hero-c .hero > .who { font-size: clamp(38px, 12vw, 64px); }
.hero-c .hero > .welcome { max-width: 70%; }
.hero-c .hero-wm { display: block; right: -70px; top: 30px; width: 250px; height: 250px; border-radius: 50%; object-fit: cover; opacity: .22; filter: saturate(1.2); }

/* D: cover strip + overlapping logo */
.hero-d .hero-cover { display: block; position: absolute; left: 0; right: 0; top: 0; height: 104px; background: var(--grad); }
.hero-d .hero-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.25)); }
.hero-d .hero { grid-template-columns: 1fr; grid-template-areas: "top" "logo" "name" "chips" "text"; }
.hero-d .hero > .toprow .kicker { color: #fff; }
.hero-d .hero > .h-logo { margin-top: 6px; }
.hero-d .orb.s104 { --s: 92px; }
.hero-d .orb .ball { box-shadow: 0 0 0 4px var(--solid), var(--glow); }

/* E: minimal */
.hero-e .hero { grid-template-columns: 1fr auto; grid-template-areas: "top top" "name logo" "line line" "text text"; }
.hero-e .hero > .toprow .iconbtn { display: none; }
.hero-e .orb.s104 { --s: 58px; }
.hero-e .orb .halo { display: none; }
.hero-e .hero > .chips { display: none; } .hero-e .hero > .h-line { display: block; }

/* F: header + quick stats */
.hero-f .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "logo name" "logo chips" "stats stats"; }
.hero-f .orb.s104 { --s: 70px; }
.hero-f .hero > .who { font-size: clamp(24px, 7vw, 34px); align-self: end; }
.hero-f .hero > .chips { align-self: start; }
.hero-f .hero > .welcome { display: none; } .hero-f .hero > .h-stats { display: grid; }

/* G: classic split (logo left, words right) */
.hero-g .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "name name" "chips chips" "logo text"; }

/* H: giant name, small logo corner */
.hero-h .hero { grid-template-columns: 1fr auto; grid-template-areas: "top top" "name name" "text logo" "chips logo"; }
.hero-h .hero > .who { font-size: clamp(40px, 13vw, 70px); line-height: .95; }
.hero-h .orb.s104 { --s: 70px; }

/* I: spotlight (rays behind the logo) */
.hero-i .hero { grid-template-columns: 1fr; grid-template-areas: "top" "logo" "name" "chips"; justify-items: center; text-align: center; }
.hero-i .hero > .toprow { justify-self: stretch; }
.hero-i .hero > .chips { justify-content: center; }
.hero-i .hero > .welcome { display: none; }
.hero-i .orb.s104 { --s: 128px; }
.hero-i .hero-cover { display: block; position: absolute; left: 50%; top: 120px; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; opacity: .5;
  background: repeating-conic-gradient(from 0deg, var(--a-30) 0 6deg, transparent 6deg 18deg); -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 75%); mask-image: radial-gradient(closest-side, #000 20%, transparent 75%); animation: hero-spin 60s linear infinite; }
@keyframes hero-spin { to { transform: rotate(360deg); } }

/* J: magazine cover (words at the bottom) */
.hero-j { min-height: 300px; display: flex; }
.hero-j .hero { width: 100%; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto auto auto; grid-template-areas: "logo top" ". ." "name name" "chips chips" "text text"; }
.hero-j .orb.s104 { --s: 48px; } .hero-j .orb .halo { display: none; }
.hero-j .hero-cover { display: block; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.45)); }
.hero-j .hero > .who { font-size: clamp(40px, 12vw, 64px); }

/* K: side stripe */
.hero-k .hero { grid-template-columns: 92px 1fr; grid-template-areas: "logo top" "logo name" "logo chips" "logo text"; column-gap: 18px; }
.hero-k .hero > .h-logo { align-self: stretch; align-items: center; justify-content: center; margin: -20px 0 -20px -20px; padding-left: 12px; border-radius: 0; background: linear-gradient(180deg, var(--a-45), transparent 90%); }
.hero-k .orb.s104 { --s: 64px; }
.hero-k .hero > .who { font-size: clamp(26px, 8vw, 40px); }

/* L: name + stats + welcome */
.hero-l .hero { grid-template-columns: 1fr auto; grid-template-areas: "top top" "name logo" "chips logo" "stats stats" "text text"; }
.hero-l .orb.s104 { --s: 66px; }
.hero-l .hero > .h-stats { display: grid; }
.hero-l .hero > .who { font-size: clamp(26px, 8vw, 40px); }

/* Branding: pick a home card */
.hero-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.hero-pick { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 18px; border: 2px solid var(--line-2); background: rgba(var(--tint),.03); cursor: pointer; text-align: left; color: inherit; font: inherit; }
.hero-pick.on { border-color: var(--a); box-shadow: var(--glow); }
.hero-pick .hp-view { pointer-events: none; zoom: .56; }
.hero-pick .hp-name { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 4px; font-weight: 700; font-size: 13px; }
.hero-pick .hp-name .pill { font-size: 10px; }
.hero-picks form { display: block; min-width: 0; }
.hero-pick { width: 100%; }
.hero-pick .hp-view { display: block; }
.hero-pick .hp-view .portal { width: 100%; }
.curhero .hp-view { display: block; zoom: .62; pointer-events: none; }
.curhero .hp-view .portal { width: 100%; }

/* ================= 2.8.31: 13 animated home cards (M to Y) ================= */
.portal .hero-fx { display: none; position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.portal .hero-fx i { position: absolute; display: block; }
.portal .hero-fx i:nth-child(1) { left: 6%; top: 18%; } .portal .hero-fx i:nth-child(2) { left: 18%; top: 62%; }
.portal .hero-fx i:nth-child(3) { left: 29%; top: 30%; } .portal .hero-fx i:nth-child(4) { left: 41%; top: 80%; }
.portal .hero-fx i:nth-child(5) { left: 52%; top: 12%; } .portal .hero-fx i:nth-child(6) { left: 63%; top: 55%; }
.portal .hero-fx i:nth-child(7) { left: 74%; top: 26%; } .portal .hero-fx i:nth-child(8) { left: 85%; top: 70%; }
.portal .hero-fx i:nth-child(9) { left: 93%; top: 40%; } .portal .hero-fx i:nth-child(10) { left: 12%; top: 88%; }
.portal .hero-fx i:nth-child(11) { left: 36%; top: 50%; } .portal .hero-fx i:nth-child(12) { left: 58%; top: 92%; }
.portal .hero-fx i:nth-child(13) { left: 80%; top: 8%; } .portal .hero-fx i:nth-child(14) { left: 68%; top: 84%; }
.portal .hero-fx i:nth-child(2n) { animation-delay: -1.3s !important; } .portal .hero-fx i:nth-child(3n) { animation-delay: -2.6s !important; }
.portal .hero-fx i:nth-child(5n) { animation-delay: -3.9s !important; }

/* shared shapes: centred (A-like) and split (B-like) */
.hero-m .hero, .hero-n .hero, .hero-s .hero, .hero-w .hero { grid-template-columns: 1fr; grid-template-areas: "top" "logo" "name" "chips" "text"; justify-items: center; text-align: center; }
.hero-m .hero > .toprow, .hero-n .hero > .toprow, .hero-s .hero > .toprow, .hero-w .hero > .toprow { justify-self: stretch; }
.hero-m .hero > .chips, .hero-n .hero > .chips, .hero-s .hero > .chips, .hero-w .hero > .chips { justify-content: center; }
.hero-o .hero, .hero-p .hero, .hero-t .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "logo name" "logo chips" "text text"; }
.hero-o .orb.s104, .hero-p .orb.s104, .hero-t .orb.s104 { --s: 72px; }
.hero-o .hero > .who, .hero-p .hero > .who, .hero-t .hero > .who { font-size: clamp(24px, 7vw, 36px); align-self: end; }
.hero-o .hero > .chips, .hero-p .hero > .chips, .hero-t .hero > .chips { align-self: start; }
.hero-q .hero, .hero-x .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "name name" "chips chips" "logo text"; }
.hero-r .hero, .hero-u .hero, .hero-v .hero { grid-template-columns: 1fr auto; grid-template-areas: "top top" "name name" "text logo" "chips logo"; }
.hero-r .hero > .who, .hero-u .hero > .who, .hero-v .hero > .who { font-size: clamp(38px, 12vw, 64px); line-height: 1; }
.hero-r .orb.s104, .hero-u .orb.s104, .hero-v .orb.s104 { --s: 64px; }
.hero-y .hero { grid-template-columns: 1fr auto; grid-template-areas: "top top" "name logo" "chips logo" "stats stats" "text text"; }
.hero-y .orb.s104 { --s: 66px; } .hero-y .hero > .h-stats { display: grid; }
.hero-w .hero { grid-template-areas: "top" "logo" "name" "chips" "stats"; } .hero-w .hero > .welcome { display: none; } .hero-w .hero > .h-stats { display: grid; justify-self: stretch; }

/* M aurora */
.hero-m .hero-cover { display: block; position: absolute; inset: -40% -20% 30% -20%; filter: blur(28px); opacity: .75;
  background: linear-gradient(100deg, transparent 10%, #22d3ee88 25%, transparent 38%, var(--a-60) 52%, transparent 66%, #3ddc9788 80%, transparent 92%);
  background-size: 200% 100%; animation: hx-aurora 12s ease-in-out infinite alternate; }
@keyframes hx-aurora { 0% { background-position: 0% 0; transform: skewY(-4deg); } 100% { background-position: 100% 0; transform: skewY(4deg) translateY(10px); } }
/* N starry night */
.hero-n { background: radial-gradient(120% 90% at 50% 0%, #1b1742, #0a0918 70%); }
.hero-n .hero-fx { display: block; }
.hero-n .hero-fx i { width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: hx-twinkle 3.2s ease-in-out infinite; }
.hero-n .hero-fx i:nth-child(odd) { width: 3px; height: 3px; }
.hero-n .hero-cover { display: block; position: absolute; right: 18px; top: 58px; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset -8px -4px 0 1px #ffe9a8; opacity: .9; filter: drop-shadow(0 0 10px #ffe9a888); }
@keyframes hx-twinkle { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.2); } }
/* O neon */
.hero-o { border-color: transparent; box-shadow: 0 0 0 2px var(--a), 0 0 22px var(--a-60), inset 0 0 22px var(--a-30); animation: hx-neon 2.6s ease-in-out infinite; }
.hero-o .who { text-shadow: none; filter: drop-shadow(0 0 8px var(--a)) drop-shadow(0 0 18px var(--a2, var(--a))); animation: hx-flicker 5s linear infinite; }
@keyframes hx-neon { 50% { box-shadow: 0 0 0 2px var(--a2, var(--a)), 0 0 34px var(--a-60), inset 0 0 30px var(--a-30); } }
@keyframes hx-flicker { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .55; } }
/* P floating bubbles */
.hero-p .hero-fx { display: block; }
.hero-p .hero-fx i { top: auto !important; bottom: -40px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffffaa, var(--a-30) 60%, transparent 70%); border: 1px solid #ffffff33; animation: hx-rise 9s linear infinite; }
.hero-p .hero-fx i:nth-child(3n) { width: 28px; height: 28px; } .hero-p .hero-fx i:nth-child(4n) { width: 10px; height: 10px; }
@keyframes hx-rise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: .9; } 100% { transform: translateY(-420px) translateX(20px); opacity: 0; } }
/* Q waves: real rolling waves (2.8.40), drawn by the shared .fx layers */
.portal.hero-q > .f1 { height: 78px; } .portal.hero-q > .f2 { height: 56px; }
/* R shimmer name */
.hero-r .who.gtext { background-image: linear-gradient(100deg, var(--fg) 20%, var(--a2, #ff4fd8) 40%, #fff 50%, var(--a) 60%, var(--fg) 80%); background-size: 250% 100%; animation: hx-shine 4s linear infinite; }
@keyframes hx-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
/* S orbit */
.hero-s .hero-fx { display: block; }
.hero-s .hero-fx i { left: 50% !important; top: 120px !important; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--a2, #ff4fd8); box-shadow: 0 0 10px var(--a2, #ff4fd8); animation: hx-orbit 6s linear infinite; }
.hero-s .hero-fx i:nth-child(n+5) { display: none; }
.hero-s .hero-fx i:nth-child(2) { animation-duration: 9s; background: #22d3ee; box-shadow: 0 0 10px #22d3ee; } .hero-s .hero-fx i:nth-child(3) { animation-duration: 12s; animation-direction: reverse; background: #ffc15e; box-shadow: 0 0 10px #ffc15e; }
.hero-s .hero-fx i:nth-child(4) { animation-duration: 7.5s; animation-direction: reverse; width: 5px; height: 5px; }
@keyframes hx-orbit { from { transform: rotate(0deg) translateX(84px) rotate(0deg); } to { transform: rotate(360deg) translateX(84px) rotate(-360deg); } }
/* T colour flow */
.hero-t { background: linear-gradient(120deg, color-mix(in oklab, var(--a) 45%, var(--solid)), color-mix(in oklab, var(--a2, #ff4fd8) 35%, var(--solid)), color-mix(in oklab, #22d3ee 30%, var(--solid)), color-mix(in oklab, var(--a) 45%, var(--solid)));
  background-size: 300% 300%; animation: hx-flow 14s ease infinite; }
@keyframes hx-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
/* U glitch */
.hero-u .who { position: relative; }
.hero-u .who::before, .hero-u .who::after { content: attr(data-text); position: absolute; inset: 0; padding: inherit; -webkit-text-fill-color: currentColor; background: none; pointer-events: none; }
.hero-u .who::before { color: #22d3ee; clip-path: inset(0 0 55% 0); animation: hx-glitch 3s steps(1) infinite; }
.hero-u .who::after { color: #ff4fd8; clip-path: inset(55% 0 0 0); animation: hx-glitch 3s steps(1) infinite reverse; }
@keyframes hx-glitch { 0%, 88%, 100% { transform: none; opacity: 0; } 90% { transform: translate(-3px, 1px); opacity: .8; } 93% { transform: translate(3px, -1px); opacity: .8; } 96% { transform: translate(-1px, 0); opacity: .6; } }
/* V shooting stars */
.hero-v .hero-fx { display: block; }
.hero-v .hero-fx i { top: -10px !important; width: 90px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff, transparent); transform: rotate(-35deg); opacity: 0; animation: hx-shoot 5s ease-in infinite; }
.hero-v .hero-fx i:nth-child(n+7) { display: none; }
@keyframes hx-shoot { 0% { opacity: 0; transform: rotate(-35deg) translateX(0); } 5% { opacity: 1; } 25% { opacity: 0; transform: rotate(-35deg) translateX(-360px); } 100% { opacity: 0; transform: rotate(-35deg) translateX(-360px); } }
/* W heartbeat (ripples from the logo) */
.hero-w .h-logo { position: relative; }
.hero-w .h-logo::before, .hero-w .h-logo::after { content: ""; position: absolute; inset: 0; margin: auto; width: 104px; height: 104px; border-radius: 50%; border: 2px solid var(--a); animation: hx-ripple 2.4s ease-out infinite; }
.hero-w .h-logo::after { animation-delay: 1.2s; }
.hero-w .orb { animation: hx-beat 2.4s ease-in-out infinite; }
@keyframes hx-ripple { from { transform: scale(.9); opacity: .8; } to { transform: scale(1.8); opacity: 0; } }
@keyframes hx-beat { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.06); } 20% { transform: scale(1); } 30% { transform: scale(1.04); } }
/* X reveal */
.hero-x .hero > .who { animation: hx-rise-in .9s cubic-bezier(.2,.8,.2,1) both; }
.hero-x .hero > .chips { animation: hx-rise-in .9s .25s cubic-bezier(.2,.8,.2,1) both; }
.hero-x .hero > .welcome { animation: hx-type 2.4s .5s steps(40) both; }
.hero-x .hero > .h-logo { animation: hx-pop .7s .2s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes hx-rise-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes hx-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hx-pop { from { opacity: 0; transform: scale(.4) rotate(-20deg); } }
/* Y hologram */
.hero-y::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  background: linear-gradient(115deg, transparent 30%, #ff4fd855 42%, #22d3ee55 50%, #ffe28a44 58%, transparent 70%); background-size: 250% 100%; animation: hx-holo 5s ease-in-out infinite; }
@keyframes hx-holo { 0% { background-position: 120% 0; } 60%, 100% { background-position: -80% 0; } }
.hero-y .h-st { background: rgba(255,255,255,.06); }

/* preview tag for moving cards, and calm for people who ask for less motion */
.hp-name .pill.anim { color: var(--a2, #ff4fd8); border-color: var(--a-45); }
@media (prefers-reduced-motion: reduce) { .portal[class*="hero-"] *, .portal[class*="hero-"]::after, .portal[class*="hero-"] { animation: none !important; } }
.sizehint { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 12px; font-size: 12.5px; color: var(--mfg); background: var(--a-12); border: 1px solid var(--a-30); }
.sizehint b { color: var(--fg); }

/* 2.8.31: opening screen for the app (home-screen app and Android app): a night sky, the logo and the name */
.vsplash { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(120% 80% at 50% 0%, #241a4d 0%, #0d0a22 55%, #05040c 100%); transition: opacity .6s ease, transform .6s ease; }
.vsplash.out { opacity: 0; transform: scale(1.06); pointer-events: none; }
.vs-sky { position: absolute; inset: 0; }
.vs-sky i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: hx-twinkle 2.6s ease-in-out infinite; }
.vs-sky i:nth-child(3n) { width: 3px; height: 3px; animation-duration: 3.4s; } .vs-sky i:nth-child(4n) { animation-delay: -1.2s; } .vs-sky i:nth-child(5n) { animation-delay: -2s; }
.vs-sky i:nth-child(1){left:6%;top:8%}.vs-sky i:nth-child(2){left:18%;top:22%}.vs-sky i:nth-child(3){left:31%;top:6%}.vs-sky i:nth-child(4){left:44%;top:17%}
.vs-sky i:nth-child(5){left:57%;top:4%}.vs-sky i:nth-child(6){left:71%;top:14%}.vs-sky i:nth-child(7){left:86%;top:9%}.vs-sky i:nth-child(8){left:94%;top:27%}
.vs-sky i:nth-child(9){left:9%;top:38%}.vs-sky i:nth-child(10){left:24%;top:47%}.vs-sky i:nth-child(11){left:78%;top:40%}.vs-sky i:nth-child(12){left:90%;top:52%}
.vs-sky i:nth-child(13){left:4%;top:63%}.vs-sky i:nth-child(14){left:15%;top:78%}.vs-sky i:nth-child(15){left:28%;top:90%}.vs-sky i:nth-child(16){left:40%;top:72%}
.vs-sky i:nth-child(17){left:62%;top:86%}.vs-sky i:nth-child(18){left:74%;top:70%}.vs-sky i:nth-child(19){left:88%;top:82%}.vs-sky i:nth-child(20){left:96%;top:93%}
.vs-sky i:nth-child(21){left:50%;top:33%}.vs-sky i:nth-child(22){left:36%;top:30%}.vs-sky i:nth-child(23){left:66%;top:28%}.vs-sky i:nth-child(24){left:12%;top:95%}
.vs-sky i:nth-child(25){left:53%;top:96%}.vs-sky i:nth-child(26){left:82%;top:62%}.vs-sky i:nth-child(27){left:20%;top:60%}.vs-sky i:nth-child(28){left:60%;top:58%}
.vs-moon { position: absolute; right: 12%; top: 10%; width: 56px; height: 56px; border-radius: 50%; box-shadow: inset -14px -6px 0 2px #ffe9a8; filter: drop-shadow(0 0 18px #ffe9a877); animation: vs-float 6s ease-in-out infinite; }
.vs-shoot i { position: absolute; top: 12%; left: 70%; width: 120px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff, transparent); transform: rotate(-30deg); opacity: 0; animation: vs-shoot 3.2s .6s ease-in infinite; }
.vs-shoot i + i { top: 30%; left: 95%; animation-delay: 1.8s; }
.vs-mid { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 0 24px; text-align: center; }
.vs-mid .orb { --s: 132px; animation: vs-pop .9s cubic-bezier(.2,1.3,.4,1) both, vs-glow 2.4s 1s ease-in-out infinite; }
.vs-name { font: 800 clamp(26px, 8vw, 40px)/1.1 var(--name-font, var(--display)); letter-spacing: -.01em; color: #fff; max-width: 90vw;
  background: linear-gradient(100deg, #fff 20%, var(--a2, #ff4fd8) 45%, #fff 70%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: vs-up .8s .35s cubic-bezier(.2,.8,.2,1) both, hx-shine 3s 1.2s linear infinite; }
.vs-bar { width: 120px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; animation: vs-up .6s .6s both; }
.vs-bar i { display: block; height: 100%; width: 40%; border-radius: 3px; background: var(--grad); animation: vs-load 1.1s ease-in-out infinite; }
@keyframes vs-pop { from { opacity: 0; transform: scale(.3) rotate(-25deg); } }
@keyframes vs-glow { 50% { filter: drop-shadow(0 0 26px var(--a)); } }
@keyframes vs-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes vs-load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes vs-float { 50% { transform: translateY(-8px); } }
@keyframes vs-shoot { 0% { opacity: 0; transform: rotate(-30deg) translateX(0); } 8% { opacity: 1; } 35%, 100% { opacity: 0; transform: rotate(-30deg) translateX(-340px); } }
@media (prefers-reduced-motion: reduce) { .vsplash *, .vsplash { animation: none !important; } }
.vs-shoot { position: absolute; inset: 0; pointer-events: none; }

/* 2.8.34 tags: @member, @role, #channel, #ticket, #page */
.refpop { position: fixed; z-index: 85; max-height: 300px; overflow-y: auto;
  padding: 6px; border-radius: 18px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 18px 40px #0008; background: var(--solid); border: 1px solid var(--line-2); }
.refpop[hidden] { display: none; }
.refitem { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent;
  color: var(--fg); text-align: left; font: inherit; cursor: pointer; }
.refitem.on, .refitem:hover { background: var(--a-20); }
.refav { width: 30px; height: 30px; border-radius: 50%; flex: none; object-fit: cover; }
.refav.letter { display: grid; place-items: center; background: var(--a-20); font-weight: 800; font-size: 14px; color: var(--hi, #fff); }
.refitem.role .refav.letter { background: color-mix(in oklab, var(--c, var(--a)) 35%, transparent); color: var(--c, var(--hi)); }
.reftx { display: flex; flex-direction: column; min-width: 0; }
.reftx b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reftx span { font-size: 11px; color: var(--mfg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.mention, .msg .body a.mention, .bubble a.mention { text-decoration: none; }
a.mention:hover, .msg .body a.mention:hover { text-decoration: underline; }
.mention.ref { display: inline; }
.mention.role { color: var(--c, var(--hi)); background: color-mix(in oklab, var(--c, var(--a)) 22%, transparent); }
.mention.role.me { color: #fff; background: color-mix(in oklab, var(--c, var(--a)) 50%, transparent); }
.mention.locked, .mention.gone { opacity: .7; font-weight: 500; }

/* 2.8.35 account security */
.codein { font: 700 22px/1.2 var(--mono); letter-spacing: .3em; text-align: center; }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.codes code, .keytext { font: 600 15px var(--mono); padding: 10px; border-radius: 12px; background: var(--input); border: 1px solid var(--line); text-align: center; word-break: break-all; }
.qrbox { display: grid; place-items: center; padding: 8px; }
.qrbox svg { width: min(220px, 70vw); height: auto; border-radius: 14px; }
.devrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.devrow:first-of-type { border-top: 0; }
.devrow .hint { display: block; }
.audit { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.audit:first-child { border-top: 0; }
.audit .when { flex: none; width: 74px; color: var(--mfg); font-size: 12px; }
.audit .area { font-size: 11px; color: var(--mfg); text-transform: uppercase; letter-spacing: .06em; }

/* 2.8.36 voice notes */
.micbtn { flex: none; }
.voicebar { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; }
.voicebar[hidden] { display: none; }
.recdot { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 10px var(--bad); animation: recblink 1s infinite; }
.rectime { font: 700 14px var(--mono); }
@keyframes recblink { 50% { opacity: .3; } }
.composer.recording .crow textarea, .composer.recording .attach { opacity: .4; pointer-events: none; }
.voicemsg { display: flex; align-items: center; gap: 8px; padding: 4px 0; max-width: 100%; }
.voicemsg audio { height: 38px; max-width: 240px; width: 100%; }

/* 2.8.36 polls, pins, scheduling */
.poll { display: flex; flex-direction: column; gap: 8px; min-width: min(280px, 70vw); }
.poll-q { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.poll-opt { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(var(--tint), .04); overflow: hidden; cursor: pointer; }
.poll-opt input { position: relative; z-index: 1; accent-color: var(--a); }
.poll-bar { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--a-20); transition: width .5s ease; }
.poll-opt.mine .poll-bar { background: var(--a-30); }
.poll-opt.top .poll-bar { background: color-mix(in oklab, var(--ok) 30%, transparent); }
.poll-t { position: relative; flex: 1; font-weight: 600; }
.poll-n { position: relative; font-weight: 800; font-size: 13px; }
.poll.closed .poll-opt { cursor: default; }
.poll-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.poll-foot .hint { flex: 1; }
.pinned-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--warn); margin-bottom: 4px; }
.msg.flash .bubble { box-shadow: 0 0 0 2px var(--a), var(--glow); transition: box-shadow .4s; }
.msg.pinview { margin-top: 10px; }
.pingo { margin-top: 6px; align-self: flex-start; }
.cm-toggle { flex: none; transition: transform .2s; }
.cm-toggle.on { transform: rotate(45deg); }
.cm-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 4px 8px; }
.cm-row[hidden] { display: none; }
.schedrow { display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px; font-size: 13px; flex-wrap: wrap; }
.schedrow[hidden] { display: none; }
.schedrow input { flex: 1; min-width: 180px; }
.sched-list { margin-bottom: 8px; }
.sched-row { padding: 8px 0; border-top: 1px solid var(--line); }
.sched-row .hint { display: block; }
.chathead .iconbtn .count { position: absolute; top: -4px; right: -4px; }
.chathead .iconbtn { position: relative; }
.searchbar input[type=search] { min-width: 0; }
.sresult { display: block; color: inherit; text-decoration: none; }
.sresult .snip { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--fg); }
.sresult mark { background: var(--a-45); color: #fff; border-radius: 4px; padding: 0 2px; }
.composer.has-text .crow .attach, .composer.has-text .crow .gifbtn, .composer.has-text .crow .micbtn, .composer.has-text .crow .cm-toggle { display: none; }

/* 2.8.37 ticket tools */
.rated { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.stars { color: var(--warn); letter-spacing: 2px; }
.starpick { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.starpick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.starpick label { font-size: 34px; line-height: 1; color: var(--dim); cursor: pointer; transition: color .15s, transform .15s; }
.starpick label:hover, .starpick label:hover ~ label, .starpick input:checked ~ label { color: var(--warn); }
.starpick input:focus-visible + label { outline: 2px solid var(--a); border-radius: 6px; }
.savedbar { display: flex; justify-content: flex-end; padding: 0 4px 6px; }
.saved-item { text-align: left; width: 100%; border: 0; font: inherit; color: inherit; cursor: pointer; }

/* 2.8.37 insights */
.itiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 760px) { .itiles { grid-template-columns: repeat(4, 1fr); } }
.itile { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 16px; background: rgba(var(--tint), .04); border: 1px solid var(--line); min-width: 0; }
.itile .l { font-size: 12px; color: var(--mfg); font-weight: 600; }
.itile b { font: 800 26px/1.2 var(--display); color: var(--fg); }
.itile b.sm { font-size: 18px; }
.itile .s { font-size: 11px; color: var(--mfg); }
.ichart { margin: 0; }
.isvg { width: 100%; height: auto; overflow: visible; }
.ibar { fill: var(--a); }
.ibase { stroke: var(--line-2); stroke-width: 1; }
.ihitbox { fill: transparent; }
.ihit:hover .ibar { fill: var(--a2); }
.ihit:hover .ihitbox { fill: rgba(var(--tint), .04); }
.ilab { fill: var(--mfg); font: 18px var(--body); text-anchor: middle; }
.ilab.start { text-anchor: start; }
.irank { display: flex; flex-direction: column; gap: 8px; }
.irow { display: grid; grid-template-columns: minmax(70px, 34%) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.itrack { height: 8px; border-radius: 99px; background: rgba(var(--tint), .06); overflow: hidden; }
.ifill { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--a); transition: width .6s ease; }
.ifill.warn { background: var(--warn); }

/* 2.8.38 levels */
.lvl { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 6px; border-radius: 99px; font: 700 10px var(--body); color: var(--a); background: var(--a-12); text-decoration: none; }
.lvcard .lvbig { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font: 800 28px var(--display); color: #fff; background: var(--grad); box-shadow: var(--glow); flex: none; }
.lvcard b { display: block; font-size: 18px; }
.lvtrack { height: 10px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.badge { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); opacity: .45; filter: grayscale(1); }
.badge.got { opacity: 1; filter: none; border-color: var(--a-30); background: var(--a-6); }
.badge .be { font-size: 26px; }
.badge b { font-size: 13px; }
.badge .hint { font-size: 11px; }
.lbrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.lbrow:first-child { border-top: 0; }
.lbrow.me { background: var(--a-6); border-radius: 12px; padding: 8px; }
.lbrow .hint { display: block; font-size: 11px; }
.lvmini { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.lvmini .lvbig { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font: 800 20px var(--display); color: #fff; background: var(--grad); flex: none; }
.lvmini .grow { display: flex; flex-direction: column; gap: 4px; }

/* 2.8.38 score predictor */
.pr-list { display: flex; flex-direction: column; padding: 4px 14px; }
.pr-row { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.pr-row:first-child { border-top: 0; }
.pr-when { font-size: 11px; text-align: center; }
.pr-match { display: grid; grid-template-columns: minmax(0, 1fr) 52px 10px 52px minmax(0, 1fr); align-items: center; gap: 8px; }
.pr-row.past .pr-match { grid-template-columns: 1fr auto 1fr; }
.pr-team { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.pr-team.home { justify-content: flex-end; text-align: right; }
.pr-team img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.pr-match input.pr-in { width: 52px; min-width: 0; height: 44px; text-align: center; font: 800 18px var(--display); padding: 0; -moz-appearance: textfield; }
.pr-in::-webkit-outer-spin-button, .pr-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pr-dash { color: var(--mfg); font-weight: 800; }
.pr-res { font: 800 18px var(--display); padding: 0 6px; }
.pr-saved { align-self: center; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ok); }
.pr-mine { align-self: center; font-size: 12px; color: var(--mfg); }
.pts.p3 { color: var(--ok); } .pts.p1 { color: var(--warn); } .pts.p0 { color: var(--mfg); }
.pr-save { position: sticky; bottom: calc(var(--dock-h) + 16px + env(safe-area-inset-bottom)); z-index: 5; }

/* 2.8.39 in-app reader and video player */
body.noscroll { overflow: hidden; }
.reader .sheet, .vplayer .sheet { max-width: 640px; max-height: 88dvh; }
.rd-body { gap: 12px; }
.rd-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; background: rgba(var(--tint), .05); }
.rd-title { font: 800 22px/1.25 var(--display); margin: 0; }
.rd-sum { margin: 0; font-size: 16px; line-height: 1.6; color: var(--fg); }
.rd-src { margin: 0; font-size: 11px; color: var(--dim); text-align: center; }
.vplayer .sheet { width: min(960px, 100%); max-width: 960px; }
.vwrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 0 0 var(--r-2xl) var(--r-2xl); overflow: hidden; }
.vwrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sg-meta { font-size: 11px; opacity: .75; }

/* 2.8.38: the top bar and the "encrypted" note stay put at the top while you scroll */
.chattop { position: sticky; top: calc(8px + env(safe-area-inset-top)); z-index: 25; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 6px; }
.chattop > .chathead { position: relative; top: auto; width: 100%; }
.chattop > .secure-note { margin: 0; background: color-mix(in oklab, var(--solid) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .7); }

/* 2.8.39 home tiles: a faint background in the community's own colours, and the shop picture */
.tile.fxtile { isolation: isolate; }
.tile.fxtile::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 100% 110%, color-mix(in oklab, var(--a) 18%, transparent), transparent 62%),
              radial-gradient(90% 70% at 0% 0%, color-mix(in oklab, var(--a2) 9%, transparent), transparent 60%); }
.tile .tilefx { position: absolute; z-index: -1; right: -16px; bottom: -22px; width: 104px; height: 104px; color: var(--a); opacity: .13; transform: rotate(-14deg); pointer-events: none; }
.tile .tilefx .i { width: 100%; height: 100%; stroke-width: 1.6; }
.tile.wide .tilefx { width: 84px; height: 84px; bottom: -18px; right: 40px; }
[data-layout="compact"] .tile .tilefx { width: 70px; height: 70px; }
.tile.shoptile .tilebg { background-image: url("/static/img/tile-shop.svg"); }

/* 2.8.41 shop: coupon, points, tip and the price breakdown */
.shop-extras { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-md); background: rgba(var(--tint),.03); border: 1px solid var(--line); }
.shop-extras .field .row { gap: 8px; } .shop-extras .field .row input { flex: 1; min-width: 0; }
.q-msg.ok { color: var(--ok); } .q-msg.bad { color: var(--bad); }
.shop-bd { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--r-md); background: var(--a-6); border: 1px solid var(--a-20); }
.bd-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.bd-row span { color: var(--mfg); } .bd-row.off b { color: var(--ok); }
.bd-row.total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line-2); font-size: 16px; }
.bd-row.total span { color: var(--fg); font-weight: 700; }
.bd-row[hidden], .shop-bd[hidden], .shop-extras [hidden] { display: none; }
.pts-big { display: flex; flex-direction: column; gap: 2px; }
.pts-big b { font: 800 44px/1 var(--display); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pts-big span { color: var(--mfg); font-size: 14px; }
.ref-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); border: 1px dashed var(--a-45); background: var(--a-6); }
.ref-code b { font-size: 24px; letter-spacing: .12em; }
.section-h { margin: 6px 2px 0; font-size: 14px; color: var(--mfg); }

.msg .body code, .bubble code { font-family: var(--mono); font-size: .92em; padding: 1px 6px; border-radius: 6px; background: rgba(var(--tint),.08); border: 1px solid var(--line-2); }

/* 2.8.42: 20 more name fonts */
.ff-lilita-one { font-family: "Lilita One", var(--display); }
.ff-archivo-black { font-family: "Archivo Black", var(--display); }
.ff-alfa-slab-one { font-family: "Alfa Slab One", var(--display); }
.ff-bungee-shade { font-family: "Bungee Shade", var(--display); }
.ff-bungee-inline { font-family: "Bungee Inline", var(--display); }
.ff-fugaz-one { font-family: "Fugaz One", var(--display); }
.ff-racing-sans-one { font-family: "Racing Sans One", var(--display); }
.ff-zen-dots { font-family: "Zen Dots", var(--display); }
.ff-silkscreen { font-family: "Silkscreen", var(--display); }
.ff-special-elite { font-family: "Special Elite", var(--display); }
.ff-chewy { font-family: "Chewy", var(--display); }
.ff-carter-one { font-family: "Carter One", var(--display); }
.ff-knewave { font-family: "Knewave", var(--display); }
.ff-yellowtail { font-family: "Yellowtail", var(--display); }
.ff-sacramento { font-family: "Sacramento", var(--display); }
.ff-parisienne { font-family: "Parisienne", var(--display); }
.ff-urbanist { font-family: "Urbanist", var(--display); }
.ff-barlow-condensed { font-family: "Barlow Condensed", var(--display); }
.ff-fredoka { font-family: "Fredoka", var(--display); }
.ff-cherry-bomb-one { font-family: "Cherry Bomb One", var(--display); }


/* ---------- 2.8.46: conversations are one fixed screen ----------
   The header and the message box never move; only the messages scroll between them. The body itself
   can't scroll, so mobile browsers (Firefox, DuckDuckGo, Samsung Internet...) have nothing to bounce,
   and the height follows the visible screen when the keyboard opens (--app-h, set by app.js). */
body.chatmode { position: fixed; inset: 0; height: var(--app-h, 100dvh); min-height: 0; overflow: hidden; overscroll-behavior: none; }
body.chatmode .shell { height: 100%; min-height: 0; }
body.chatmode .main { height: 100%; min-height: 0; overflow: hidden; }
body.chatmode .page.chatpage { height: 100%; min-height: 0; box-sizing: border-box; gap: 8px; position: relative;
  padding: calc(8px + env(safe-area-inset-top)) 12px calc(6px + env(safe-area-inset-bottom)); }
body.chatmode .page.chatpage > * { flex: none; }
body.chatmode .chattop { position: relative; top: auto; margin: 0; }
body.chatmode .page.chatpage > .chatlog { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch; padding: 2px 2px 10px; scroll-padding-top: 8px; }
body.chatmode .chatlog > * { flex: none; }
body.chatmode .page.chatpage > .chatlog { position: relative; }
body.chatmode .composer, body.chatmode .readonly { position: relative; bottom: auto; }
body.chatmode .hoursbar, body.chatmode .closedmsg { margin: 0; }
body.chatmode .vc-foot { margin: 0; padding: 0 8px; font-size: 10.5px; line-height: 1.4; }
body.chatmode .sched-list { max-height: 30vh; overflow: auto; }
@media (max-height: 520px) { body.chatmode .chattop > .secure-note, body.chatmode .vc-foot { display: none; } }

/* where you stopped reading, and the arrow down to the newest */
.unreadline { display: flex; align-items: center; gap: 10px; margin: 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--a); }
.unreadline::before, .unreadline::after { content: ""; flex: 1; height: 1px; background: color-mix(in oklab, var(--a) 55%, transparent); }
.jumpdown { position: absolute; right: 18px; z-index: 30; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: #fff; background: var(--grad); box-shadow: 0 8px 24px -8px rgba(0,0,0,.7), var(--glow); cursor: pointer;
  transition: opacity .18s, transform .18s; opacity: 0; transform: translateY(10px) scale(.9); pointer-events: none; }
.jumpdown.show { opacity: 1; transform: none; pointer-events: auto; }
.jumpdown .i { width: 20px; height: 20px; }
.jumpdown .jd-n { position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center;
  font: 800 11px/1 var(--body); color: #fff; background: var(--bad, #ef4444); border: 2px solid var(--solid, #111); }
.jumpdown .jd-n:empty { display: none; }

/* the + menu: photos, GIFs, emoji (and polls / scheduling for the team) */
.plusbtn { flex: none; width: 44px; height: 44px; border-radius: 15px; transition: background .2s; }
.plusbtn .i { transition: transform .2s; }
.plusbtn.on { background: rgba(var(--tint), .1); }
.plusbtn.on .i { transform: rotate(45deg); }
.pm-item.attach { width: auto; height: auto; }
.plusmenu { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; padding: 2px 2px 8px; }
.plusmenu[hidden] { display: none; }
.pm-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; padding: 7px 4px; border-radius: 14px;
  border: 1px solid var(--line-2); background: rgba(var(--tint), .04); color: var(--fg); font: 600 11.5px/1.2 var(--body); text-align: center; cursor: pointer; }
.pm-item:hover, .pm-item:focus-visible { background: rgba(var(--tint), .09); border-color: color-mix(in oklab, var(--a) 45%, var(--line-2)); }
.pm-item .i { width: 22px; height: 22px; color: var(--a); }
.pm-gif { font: 800 12px/1 var(--body); letter-spacing: .04em; padding: 4px 6px; border-radius: 7px; color: var(--a); border: 1.5px solid currentColor; }
.crow textarea { flex: 1 1 auto; min-width: 0; }

/* emoji in messages */
.aemoji { width: 1.45em; height: 1.45em; vertical-align: -0.35em; object-fit: contain; display: inline-block; }
.jumbo { font-size: 2.3em; line-height: 1.2; letter-spacing: .02em; }
.jumbo .aemoji { width: 64px; height: 64px; vertical-align: middle; }
.bubble .jumbo { display: inline-block; padding: 2px 0; }
.msg .bubble:has(> .body > .jumbo:only-child):not(:has(.shots, .gifmsg, .quote)) { background: none; border-color: transparent; box-shadow: none; padding-left: 0; padding-right: 0; }

/* emoji pickers */
.emojisheet { max-height: min(78dvh, 640px); }
.emojisheet .sb { padding-top: 0; }
.ej-top { position: sticky; top: 0; z-index: 2; background: var(--solid, #111); padding: 8px 0 6px; display: flex; flex-direction: column; gap: 8px; }
.ej-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.ej-tabs::-webkit-scrollbar { display: none; }
.ej-tabs button { flex: none; min-width: 40px; height: 36px; padding: 0 8px; border: 0; border-radius: 10px; background: none; font-size: 19px; cursor: pointer; color: var(--mfg); font-weight: 700; }
.ej-tabs button.on { background: rgba(var(--tint), .1); box-shadow: inset 0 -2px 0 var(--a); }
.ej-tabs button .i { width: 18px; height: 18px; }
.ej-sec { scroll-margin-top: 96px; }
.ej-note { font-size: 11px; color: var(--dim); padding: 8px 2px 2px; text-align: center; }
.aegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 4px; }
.aegrid button { height: 58px; border: 0; border-radius: 14px; background: none; cursor: pointer; display: grid; place-items: center; font-size: 26px; }
.aegrid button:hover, .aegrid button:focus-visible { background: rgba(var(--tint), .08); }
.aegrid img { width: 46px; height: 46px; object-fit: contain; }


/* ---------- 2.8.46: steadier in mobile browsers (Firefox, DuckDuckGo, Samsung Internet, Safari) ----------
   Browser toolbars slide in and out while you scroll, which changes 100dvh on every frame. Heights that only
   need to fill the screen now use the small viewport (stable), and the background is sized to the large one,
   so nothing jumps or repaints as the toolbar moves. */
body, .shell { min-height: 100vh; min-height: 100svh; }
.gate { min-height: 100vh; min-height: 100svh; }
.backdrop { inset: 0 0 auto 0; height: 100vh; height: 100lvh; contain: strict; transform: translateZ(0); }
.dock { transform: translateZ(0); }
@media (hover: none) {
  .emojigrid button:hover, .aegrid button:hover { transform: none; background: none; }
}
@media (display-mode: browser) and (max-width: 899px) {
  html { scrollbar-gutter: auto; }
  .dock { bottom: calc(8px + env(safe-area-inset-bottom)); }
}
/* Firefox on phones struggles with lots of blurred glass over a moving background: same look, no live blur */
@supports (-moz-appearance: none) {
  @media (max-width: 899px) {
    .glass, .card { -webkit-backdrop-filter: none; backdrop-filter: none;
      background: linear-gradient(color-mix(in oklab, var(--solid) 82%, transparent), color-mix(in oklab, var(--solid) 82%, transparent)) padding-box, var(--edge) border-box; }
    .sheet-bg { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, .6); }
    .dock { -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
}

/* 2.8.48: names the team can tap to change someone's details */
[data-quickedit] .msg-name[data-uid] { cursor: pointer; text-decoration: underline dotted color-mix(in oklab, currentColor 45%, transparent); text-underline-offset: 3px; }
.quickedit .sb { padding-bottom: 14px; }
.bad-text { color: var(--bad, #ef4444); }
/* ===== 2.8.40 moving backgrounds (generated): styles, home cards and opening screens share these ===== */
.fx { display: none; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.fx::before, .fx::after { position: absolute; pointer-events: none; }
/* rain */
[data-bg="rain"] .backdrop > .fx, .stylecard[data-bgfx="rain"] .sc-prev > .fx, .portal.hero-am > .fx, .vsplash[data-sfx="rain"] > .fx { display: block; }
[data-bg="rain"] .backdrop > .f1, .stylecard[data-bgfx="rain"] .sc-prev > .f1, .portal.hero-am > .f1, .vsplash[data-sfx="rain"] > .f1 { inset:-160px 0 0 0;background:linear-gradient(var(--a2),var(--a));opacity:.45;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='160' viewBox='0 0 140 160'%3E%3Cline x1='12' y1='10' x2='9' y2='34' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='48' y1='70' x2='45' y2='94' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='80' y1='20' x2='77' y2='44' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='110' y1='100' x2='107' y2='124' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='30' y1='120' x2='27' y2='144' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='128' y1='50' x2='125' y2='74' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='64' y1='130' x2='61' y2='154' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='96' y1='150' x2='94' y2='160' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/140px 160px repeat;animation:fx-rain1 .9s linear infinite; }
[data-bg="rain"] .backdrop > .f2, .stylecard[data-bgfx="rain"] .sc-prev > .f2, .portal.hero-am > .f2, .vsplash[data-sfx="rain"] > .f2 { inset:-220px 0 0 0;background:var(--a2);opacity:.25;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='220' viewBox='0 0 200 220'%3E%3Cline x1='20' y1='30' x2='16' y2='70' stroke='%23fff' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='70' y1='120' x2='66' y2='160' stroke='%23fff' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='120' y1='10' x2='116' y2='50' stroke='%23fff' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='170' y1='90' x2='166' y2='130' stroke='%23fff' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='40' y1='170' x2='36' y2='210' stroke='%23fff' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='150' y1='170' x2='147' y2='200' stroke='%23fff' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/200px 220px repeat;animation:fx-rain2 1.5s linear infinite; }
/* bubbles */
[data-bg="bubbles"] .backdrop > .fx, .stylecard[data-bgfx="bubbles"] .sc-prev > .fx, .portal.hero-bn > .fx, .vsplash[data-sfx="bubbles"] > .fx { display: block; }
[data-bg="bubbles"] .backdrop > .f1, .stylecard[data-bgfx="bubbles"] .sc-prev > .f1, .portal.hero-bn > .f1, .vsplash[data-sfx="bubbles"] > .f1 { inset:0 0 -240px 0;background:linear-gradient(var(--a),var(--a2));opacity:.4;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Ccircle cx='30' cy='40' r='10' fill='%23fff' fill-opacity='.25' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='150' cy='20' r='6' fill='%23fff' fill-opacity='.25' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='90' cy='120' r='14' fill='%23fff' fill-opacity='.25' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='200' cy='160' r='8' fill='%23fff' fill-opacity='.25' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='40' cy='200' r='5' fill='%23fff' fill-opacity='.25' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='170' cy='90' r='4' fill='%23fff' fill-opacity='.25' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='120' cy='220' r='7' fill='%23fff' fill-opacity='.25' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 0 0/240px 240px repeat;animation:fx-bub1 14s linear infinite; }
[data-bg="bubbles"] .backdrop > .f2, .stylecard[data-bgfx="bubbles"] .sc-prev > .f2, .portal.hero-bn > .f2, .vsplash[data-sfx="bubbles"] > .f2 { inset:0 0 -360px 0;background:var(--a2);opacity:.25;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Ccircle cx='60' cy='80' r='22' fill='%23fff' fill-opacity='.18' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='250' cy='40' r='12' fill='%23fff' fill-opacity='.18' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='300' cy='220' r='18' fill='%23fff' fill-opacity='.18' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='140' cy='290' r='9' fill='%23fff' fill-opacity='.18' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='200' cy='160' r='6' fill='%23fff' fill-opacity='.18' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 0 0/360px 360px repeat;animation:fx-bub2 22s linear infinite; }
/* fireflies */
[data-bg="fireflies"] .backdrop > .fx, .stylecard[data-bgfx="fireflies"] .sc-prev > .fx, .portal.hero-an > .fx, .vsplash[data-sfx="fireflies"] > .fx { display: block; }
[data-bg="fireflies"] .backdrop > .f1, .stylecard[data-bgfx="fireflies"] .sc-prev > .f1, .portal.hero-an > .f1, .vsplash[data-sfx="fireflies"] > .f1 { inset:-10%;background:radial-gradient(circle at 12% 22%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a) 70%, transparent) 2.5px, transparent 7px),radial-gradient(circle at 38% 64%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a) 70%, transparent) 2.5px, transparent 7px),radial-gradient(circle at 66% 18%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a) 70%, transparent) 2.5px, transparent 7px),radial-gradient(circle at 84% 58%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a) 70%, transparent) 2.5px, transparent 7px),radial-gradient(circle at 24% 86%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a) 70%, transparent) 2.5px, transparent 7px),radial-gradient(circle at 54% 42%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a) 70%, transparent) 2.5px, transparent 7px),radial-gradient(circle at 92% 90%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a) 70%, transparent) 2.5px, transparent 7px);background-size:260px 260px;animation:fx-wander 16s ease-in-out infinite alternate, fx-blink 2.6s ease-in-out infinite alternate; }
[data-bg="fireflies"] .backdrop > .f2, .stylecard[data-bgfx="fireflies"] .sc-prev > .f2, .portal.hero-an > .f2, .vsplash[data-sfx="fireflies"] > .f2 { inset:-10%;background:radial-gradient(circle at 8% 50%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a2) 70%, transparent) 2.5px, transparent 7px),radial-gradient(circle at 46% 12%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a2) 70%, transparent) 2.5px, transparent 7px),radial-gradient(circle at 70% 80%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a2) 70%, transparent) 2.5px, transparent 7px),radial-gradient(circle at 30% 34%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a2) 70%, transparent) 2.5px, transparent 7px),radial-gradient(circle at 88% 30%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a2) 70%, transparent) 2.5px, transparent 7px);background-size:340px 340px;animation:fx-wander 22s ease-in-out -6s infinite alternate-reverse, fx-blink 3.8s ease-in-out -1s infinite alternate; }
/* waves */
[data-bg="waves"] .backdrop > .fx, .stylecard[data-bgfx="waves"] .sc-prev > .fx, .portal.hero-q > .fx, .vsplash[data-sfx="waves"] > .fx { display: block; }
[data-bg="waves"] .backdrop > .f1, .stylecard[data-bgfx="waves"] .sc-prev > .f1, .portal.hero-q > .f1, .vsplash[data-sfx="waves"] > .f1 { top:auto;bottom:0;left:0;right:-400px;height:120px;background:var(--a);opacity:.28;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='120' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 44 C 100.0 18, 100.0 18, 200.0 44 S 300.0 70, 400 44 V120 H0Z'/%3E%3C/svg%3E") 0 0/400px 100% repeat-x;animation:fx-wave1 9s linear infinite; }
[data-bg="waves"] .backdrop > .f2, .stylecard[data-bgfx="waves"] .sc-prev > .f2, .portal.hero-q > .f2, .vsplash[data-sfx="waves"] > .f2 { top:auto;bottom:0;left:-300px;right:0;height:84px;background:var(--a2);opacity:.26;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='100' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 40 C 75.0 20, 75.0 20, 150.0 40 S 225.0 60, 300 40 V100 H0Z'/%3E%3C/svg%3E") 0 0/300px 100% repeat-x;animation:fx-wave2 7s linear infinite; }
[data-bg="waves"] .backdrop > .f2::before, .stylecard[data-bgfx="waves"] .sc-prev > .f2::before, .portal.hero-q > .f2::before, .vsplash[data-sfx="waves"] > .f2::before { content:'';left:0;right:0;bottom:0;height:62%;background:var(--a);opacity:.9;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='110' viewBox='0 0 520 110' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 50 C 130.0 34, 130.0 34, 260.0 50 S 390.0 66, 520 50 V110 H0Z'/%3E%3C/svg%3E") 130px 0/520px 100% repeat-x; }
/* matrix */
[data-bg="matrix"] .backdrop > .fx, .stylecard[data-bgfx="matrix"] .sc-prev > .fx, .portal.hero-ap > .fx, .vsplash[data-sfx="matrix"] > .fx { display: block; }
[data-bg="matrix"] .backdrop > .f1, .stylecard[data-bgfx="matrix"] .sc-prev > .f1, .portal.hero-ap > .f1, .vsplash[data-sfx="matrix"] > .f1 { inset:-320px 0 0 0;background:var(--a);opacity:.5;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='320' viewBox='0 0 96 320'%3E%3Cdefs%3E%3ClinearGradient id='g0' gradientUnits='userSpaceOnUse' x1='0' y1='10' x2='0' y2='100'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='g1' gradientUnits='userSpaceOnUse' x1='0' y1='150' x2='0' y2='270'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' gradientUnits='userSpaceOnUse' x1='0' y1='60' x2='0' y2='130'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='g3' gradientUnits='userSpaceOnUse' x1='0' y1='200' x2='0' y2='300'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cline x1='8' y1='10' x2='8' y2='100' stroke='url(%23g0)' stroke-width='3' stroke-dasharray='5 3'/%3E%3Cline x1='32' y1='150' x2='32' y2='270' stroke='url(%23g1)' stroke-width='3' stroke-dasharray='5 3'/%3E%3Cline x1='56' y1='60' x2='56' y2='130' stroke='url(%23g2)' stroke-width='3' stroke-dasharray='5 3'/%3E%3Cline x1='80' y1='200' x2='80' y2='300' stroke='url(%23g3)' stroke-width='3' stroke-dasharray='5 3'/%3E%3C/svg%3E") 0 0/96px 320px repeat;animation:fx-mat1 3.2s linear infinite; }
[data-bg="matrix"] .backdrop > .f2, .stylecard[data-bgfx="matrix"] .sc-prev > .f2, .portal.hero-ap > .f2, .vsplash[data-sfx="matrix"] > .f2 { inset:-460px 0 0 0;background:var(--a2);opacity:.28;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='460' viewBox='0 0 140 460'%3E%3Cdefs%3E%3ClinearGradient id='g0' gradientUnits='userSpaceOnUse' x1='0' y1='40' x2='0' y2='180'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='g1' gradientUnits='userSpaceOnUse' x1='0' y1='250' x2='0' y2='410'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' gradientUnits='userSpaceOnUse' x1='0' y1='120' x2='0' y2='210'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='g3' gradientUnits='userSpaceOnUse' x1='0' y1='330' x2='0' y2='440'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cline x1='14' y1='40' x2='14' y2='180' stroke='url(%23g0)' stroke-width='3' stroke-dasharray='5 3'/%3E%3Cline x1='54' y1='250' x2='54' y2='410' stroke='url(%23g1)' stroke-width='3' stroke-dasharray='5 3'/%3E%3Cline x1='94' y1='120' x2='94' y2='210' stroke='url(%23g2)' stroke-width='3' stroke-dasharray='5 3'/%3E%3Cline x1='126' y1='330' x2='126' y2='440' stroke='url(%23g3)' stroke-width='3' stroke-dasharray='5 3'/%3E%3C/svg%3E") 40px 0/140px 460px repeat;animation:fx-mat2 5.5s linear infinite; }
/* lava */
[data-bg="lava"] .backdrop > .fx, .stylecard[data-bgfx="lava"] .sc-prev > .fx, .portal.hero-ao > .fx, .vsplash[data-sfx="lava"] > .fx { display: block; }
[data-bg="lava"] .backdrop > .f1, .stylecard[data-bgfx="lava"] .sc-prev > .f1, .portal.hero-ao > .f1, .vsplash[data-sfx="lava"] > .f1 { inset:auto;left:4%;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--a),transparent);opacity:.55;animation:fx-lava1 19s ease-in-out infinite alternate; }
[data-bg="lava"] .backdrop > .f1::before, .stylecard[data-bgfx="lava"] .sc-prev > .f1::before, .portal.hero-ao > .f1::before, .vsplash[data-sfx="lava"] > .f1::before { content:'';left:60%;top:55%;width:45%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--a2),transparent); }
[data-bg="lava"] .backdrop > .f2, .stylecard[data-bgfx="lava"] .sc-prev > .f2, .portal.hero-ao > .f2, .vsplash[data-sfx="lava"] > .f2 { inset:auto;right:-6%;width:56%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--a2),transparent);opacity:.5;animation:fx-lava2 23s ease-in-out infinite alternate; }
[data-bg="lava"] .backdrop > .f2::before, .stylecard[data-bgfx="lava"] .sc-prev > .f2::before, .portal.hero-ao > .f2::before, .vsplash[data-sfx="lava"] > .f2::before { content:'';left:-20%;top:-15%;width:40%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--a),transparent); }
/* warp */
[data-bg="warp"] .backdrop > .fx, .stylecard[data-bgfx="warp"] .sc-prev > .fx, .portal.hero-aw > .fx, .vsplash[data-sfx="warp"] > .fx { display: block; }
[data-bg="warp"] .backdrop > .f1, .stylecard[data-bgfx="warp"] .sc-prev > .f1, .portal.hero-aw > .f1, .vsplash[data-sfx="warp"] > .f1 { inset:-50%;background:radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent),radial-gradient(1px 1px at 35% 70%, #fff, transparent),radial-gradient(1.3px 1.3px at 60% 15%, #fff, transparent),radial-gradient(1px 1px at 80% 55%, #fff, transparent),radial-gradient(1px 1px at 25% 45%, #fff, transparent),radial-gradient(1.6px 1.6px at 90% 85%, #fff, transparent),radial-gradient(1px 1px at 50% 90%, #fff, transparent),radial-gradient(1.2px 1.2px at 70% 35%, #fff, transparent);background-size:200px 200px;animation:fx-warp 3s linear infinite; }
[data-bg="warp"] .backdrop > .f2, .stylecard[data-bgfx="warp"] .sc-prev > .f2, .portal.hero-aw > .f2, .vsplash[data-sfx="warp"] > .f2 { inset:-50%;background:radial-gradient(1.2px 1.2px at 15% 80%, color-mix(in oklab, var(--a2) 60%, #fff), transparent),radial-gradient(1.6px 1.6px at 45% 30%, color-mix(in oklab, var(--a2) 60%, #fff), transparent),radial-gradient(1px 1px at 75% 75%, color-mix(in oklab, var(--a2) 60%, #fff), transparent),radial-gradient(1.3px 1.3px at 95% 10%, color-mix(in oklab, var(--a2) 60%, #fff), transparent),radial-gradient(1px 1px at 5% 55%, color-mix(in oklab, var(--a2) 60%, #fff), transparent),radial-gradient(1.4px 1.4px at 60% 60%, color-mix(in oklab, var(--a2) 60%, #fff), transparent);background-size:260px 260px;animation:fx-warp 3s linear -1.5s infinite; }
/* confetti */
[data-bg="confetti"] .backdrop > .fx, .stylecard[data-bgfx="confetti"] .sc-prev > .fx, .portal.hero-aq > .fx, .vsplash[data-sfx="confetti"] > .fx { display: block; }
[data-bg="confetti"] .backdrop > .f1, .stylecard[data-bgfx="confetti"] .sc-prev > .f1, .portal.hero-aq > .f1, .vsplash[data-sfx="confetti"] > .f1 { inset:-240px 0 0 0;background:linear-gradient(135deg,#f43f5e,#facc15 25%,#22d3ee 50%,#a3e635 75%,var(--a));opacity:.8;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Crect x='20' y='20' width='6' height='11' rx='1' fill='%23fff' transform='rotate(20 23 25)'/%3E%3Crect x='90' y='50' width='6' height='11' rx='1' fill='%23fff' transform='rotate(-30 93 55)'/%3E%3Ccircle cx='170' cy='30' r='3.5' fill='%23fff'/%3E%3Crect x='210' y='100' width='6' height='11' rx='1' fill='%23fff' transform='rotate(15 213 105)'/%3E%3Ccircle cx='60' cy='120' r='3.5' fill='%23fff'/%3E%3Crect x='130' y='150' width='6' height='11' rx='1' fill='%23fff' transform='rotate(-50 133 155)'/%3E%3Crect x='30' y='200' width='6' height='11' rx='1' fill='%23fff' transform='rotate(35 33 205)'/%3E%3Ccircle cx='190' cy='200' r='3.5' fill='%23fff'/%3E%3Crect x='110' y='220' width='6' height='11' rx='1' fill='%23fff' transform='rotate(70 113 225)'/%3E%3Ccircle cx='150' cy='90' r='3.5' fill='%23fff'/%3E%3C/svg%3E") 0 0/240px 240px repeat;animation:fx-conf1 8s linear infinite; }
[data-bg="confetti"] .backdrop > .f2, .stylecard[data-bgfx="confetti"] .sc-prev > .f2, .portal.hero-aq > .f2, .vsplash[data-sfx="confetti"] > .f2 { inset:-320px 0 0 -320px;background:linear-gradient(45deg,var(--a2),#fb923c,#22d3ee,#f472b6);opacity:.55;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Crect x='40' y='60' width='6' height='11' rx='1' fill='%23fff' transform='rotate(45 43 65)'/%3E%3Ccircle cx='200' cy='30' r='3.5' fill='%23fff'/%3E%3Crect x='280' y='140' width='6' height='11' rx='1' fill='%23fff' transform='rotate(70 283 145)'/%3E%3Crect x='120' y='200' width='6' height='11' rx='1' fill='%23fff' transform='rotate(10 123 205)'/%3E%3Ccircle cx='60' cy='280' r='3.5' fill='%23fff'/%3E%3Crect x='250' y='270' width='6' height='11' rx='1' fill='%23fff' transform='rotate(-60 253 275)'/%3E%3C/svg%3E") 0 0/320px 320px repeat;animation:fx-conf2 13s linear infinite; }
/* petals */
[data-bg="petals"] .backdrop > .fx, .stylecard[data-bgfx="petals"] .sc-prev > .fx, .portal.hero-ar > .fx, .vsplash[data-sfx="petals"] > .fx { display: block; }
[data-bg="petals"] .backdrop > .f1, .stylecard[data-bgfx="petals"] .sc-prev > .f1, .portal.hero-ar > .f1, .vsplash[data-sfx="petals"] > .f1 { inset:-260px -260px 0 0;background:linear-gradient(135deg,#fbcfe8,#f9a8d4,var(--a2));opacity:.8;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cpath d='M0 0 C7 -9 18 -7 16 4 C12 13 3 11 0 0Z' fill='%23fff' transform='translate(30 40) rotate(20) scale(1)'/%3E%3Cpath d='M0 0 C7 -9 18 -7 16 4 C12 13 3 11 0 0Z' fill='%23fff' transform='translate(150 20) rotate(110) scale(0.8)'/%3E%3Cpath d='M0 0 C7 -9 18 -7 16 4 C12 13 3 11 0 0Z' fill='%23fff' transform='translate(220 120) rotate(200) scale(1.1)'/%3E%3Cpath d='M0 0 C7 -9 18 -7 16 4 C12 13 3 11 0 0Z' fill='%23fff' transform='translate(90 150) rotate(300) scale(0.9)'/%3E%3Cpath d='M0 0 C7 -9 18 -7 16 4 C12 13 3 11 0 0Z' fill='%23fff' transform='translate(40 230) rotate(60) scale(0.7)'/%3E%3Cpath d='M0 0 C7 -9 18 -7 16 4 C12 13 3 11 0 0Z' fill='%23fff' transform='translate(180 220) rotate(150) scale(1)'/%3E%3C/svg%3E") 0 0/260px 260px repeat;animation:fx-pet1 16s linear infinite; }
[data-bg="petals"] .backdrop > .f2, .stylecard[data-bgfx="petals"] .sc-prev > .f2, .portal.hero-ar > .f2, .vsplash[data-sfx="petals"] > .f2 { inset:-360px -360px 0 0;background:linear-gradient(135deg,#fce7f3,var(--a));opacity:.45;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cpath d='M0 0 C7 -9 18 -7 16 4 C12 13 3 11 0 0Z' fill='%23fff' transform='translate(60 80) rotate(70) scale(1.4)'/%3E%3Cpath d='M0 0 C7 -9 18 -7 16 4 C12 13 3 11 0 0Z' fill='%23fff' transform='translate(260 60) rotate(190) scale(1.2)'/%3E%3Cpath d='M0 0 C7 -9 18 -7 16 4 C12 13 3 11 0 0Z' fill='%23fff' transform='translate(160 260) rotate(20) scale(1.5)'/%3E%3Cpath d='M0 0 C7 -9 18 -7 16 4 C12 13 3 11 0 0Z' fill='%23fff' transform='translate(320 300) rotate(260) scale(1)'/%3E%3C/svg%3E") 0 0/360px 360px repeat;animation:fx-pet2 24s linear infinite; }
/* leaves */
[data-bg="leaves"] .backdrop > .fx, .stylecard[data-bgfx="leaves"] .sc-prev > .fx, .portal.hero-bm > .fx, .vsplash[data-sfx="leaves"] > .fx { display: block; }
[data-bg="leaves"] .backdrop > .f1, .stylecard[data-bgfx="leaves"] .sc-prev > .f1, .portal.hero-bm > .f1, .vsplash[data-sfx="leaves"] > .f1 { inset:-300px -300px 0 0;background:linear-gradient(135deg,#f97316,#eab308,#b91c1c);opacity:.6;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M0 0 C8 -12 22 -10 24 0 C22 10 8 12 0 0Z M0 0 L-6 3' fill='%23fff' transform='translate(40 50) rotate(30) scale(1)'/%3E%3Cpath d='M0 0 C8 -12 22 -10 24 0 C22 10 8 12 0 0Z M0 0 L-6 3' fill='%23fff' transform='translate(180 30) rotate(150) scale(0.9)'/%3E%3Cpath d='M0 0 C8 -12 22 -10 24 0 C22 10 8 12 0 0Z M0 0 L-6 3' fill='%23fff' transform='translate(250 160) rotate(80) scale(1.1)'/%3E%3Cpath d='M0 0 C8 -12 22 -10 24 0 C22 10 8 12 0 0Z M0 0 L-6 3' fill='%23fff' transform='translate(110 190) rotate(250) scale(1)'/%3E%3Cpath d='M0 0 C8 -12 22 -10 24 0 C22 10 8 12 0 0Z M0 0 L-6 3' fill='%23fff' transform='translate(40 260) rotate(200) scale(0.8)'/%3E%3C/svg%3E") 0 0/300px 300px repeat;animation:fx-leaf1 18s linear infinite; }
[data-bg="leaves"] .backdrop > .f2, .stylecard[data-bgfx="leaves"] .sc-prev > .f2, .portal.hero-bm > .f2, .vsplash[data-sfx="leaves"] > .f2 { inset:-420px -420px 0 0;background:linear-gradient(45deg,#ea580c,#facc15);opacity:.35;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cpath d='M0 0 C8 -12 22 -10 24 0 C22 10 8 12 0 0Z M0 0 L-6 3' fill='%23fff' transform='translate(80 100) rotate(60) scale(1.5)'/%3E%3Cpath d='M0 0 C8 -12 22 -10 24 0 C22 10 8 12 0 0Z M0 0 L-6 3' fill='%23fff' transform='translate(320 80) rotate(210) scale(1.3)'/%3E%3Cpath d='M0 0 C8 -12 22 -10 24 0 C22 10 8 12 0 0Z M0 0 L-6 3' fill='%23fff' transform='translate(220 320) rotate(330) scale(1.6)'/%3E%3C/svg%3E") 0 0/420px 420px repeat;animation:fx-leaf2 27s linear infinite; }
/* nebula */
[data-bg="nebula"] .backdrop > .fx, .stylecard[data-bgfx="nebula"] .sc-prev > .fx, .portal.hero-bb > .fx, .vsplash[data-sfx="nebula"] > .fx { display: block; }
[data-bg="nebula"] .backdrop > .f1, .stylecard[data-bgfx="nebula"] .sc-prev > .f1, .portal.hero-bb > .f1, .vsplash[data-sfx="nebula"] > .f1 { inset:-40%;background:radial-gradient(28% 22% at 30% 40%,var(--a-45),transparent 70%),radial-gradient(26% 30% at 70% 62%,var(--a2-45),transparent 70%),radial-gradient(18% 18% at 55% 25%,#22d3ee40,transparent 70%);animation:fx-spin 90s linear infinite; }
[data-bg="nebula"] .backdrop > .f2, .stylecard[data-bgfx="nebula"] .sc-prev > .f2, .portal.hero-bb > .f2, .vsplash[data-sfx="nebula"] > .f2 { inset:-40%;opacity:.8;background:radial-gradient(22% 18% at 40% 70%,var(--a2-45),transparent 70%),radial-gradient(20% 26% at 65% 30%,var(--a-45),transparent 70%),radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent),radial-gradient(1px 1px at 35% 70%, #fff, transparent),radial-gradient(1.3px 1.3px at 60% 15%, #fff, transparent),radial-gradient(1px 1px at 80% 55%, #fff, transparent),radial-gradient(1px 1px at 25% 45%, #fff, transparent),radial-gradient(1.6px 1.6px at 90% 85%, #fff, transparent),radial-gradient(1px 1px at 50% 90%, #fff, transparent),radial-gradient(1.2px 1.2px at 70% 35%, #fff, transparent);background-size:auto,auto,220px 220px;animation:fx-spin 130s linear infinite reverse; }
/* rings */
[data-bg="rings"] .backdrop > .fx, .stylecard[data-bgfx="rings"] .sc-prev > .fx, .portal.hero-be > .fx, .vsplash[data-sfx="rings"] > .fx { display: block; }
[data-bg="rings"] .backdrop > .f1, .stylecard[data-bgfx="rings"] .sc-prev > .f1, .portal.hero-be > .f1, .vsplash[data-sfx="rings"] > .f1 { inset:auto;left:50%;top:45%;width:130%;aspect-ratio:1;margin-left:-65%;translate:0 -50%;border-radius:50%;border:2px solid var(--a);opacity:0;animation:fx-ring 6s ease-out infinite; }
[data-bg="rings"] .backdrop > .f1::before, .stylecard[data-bgfx="rings"] .sc-prev > .f1::before, .portal.hero-be > .f1::before, .vsplash[data-sfx="rings"] > .f1::before { content:'';inset:22%;border-radius:50%;border:1.5px solid var(--a2); }
[data-bg="rings"] .backdrop > .f2, .stylecard[data-bgfx="rings"] .sc-prev > .f2, .portal.hero-be > .f2, .vsplash[data-sfx="rings"] > .f2 { inset:auto;left:50%;top:45%;width:130%;aspect-ratio:1;margin-left:-65%;translate:0 -50%;border-radius:50%;border:2px solid var(--a2);opacity:0;animation:fx-ring 6s ease-out -3s infinite; }
[data-bg="rings"] .backdrop > .f2::before, .stylecard[data-bgfx="rings"] .sc-prev > .f2::before, .portal.hero-be > .f2::before, .vsplash[data-sfx="rings"] > .f2::before { content:'';inset:22%;border-radius:50%;border:1.5px solid var(--a); }
/* retro */
[data-bg="retro"] .backdrop > .fx, .stylecard[data-bgfx="retro"] .sc-prev > .fx, .portal.hero-bf > .fx, .vsplash[data-sfx="retro"] > .fx { display: block; }
[data-bg="retro"] .backdrop > .f1, .stylecard[data-bgfx="retro"] .sc-prev > .f1, .portal.hero-bf > .f1, .vsplash[data-sfx="retro"] > .f1 { inset:auto -50% 0 -50%;height:46%;background-image:linear-gradient(var(--a) 2px,transparent 2px),linear-gradient(90deg,var(--a) 2px,transparent 2px);background-size:48px 48px;transform:perspective(260px) rotateX(62deg);transform-origin:50% 100%;opacity:.45;-webkit-mask:linear-gradient(to top,#000 25%,transparent);mask:linear-gradient(to top,#000 25%,transparent);animation:fx-retro 1.4s linear infinite; }
[data-bg="retro"] .backdrop > .f2, .stylecard[data-bgfx="retro"] .sc-prev > .f2, .portal.hero-bf > .f2, .vsplash[data-sfx="retro"] > .f2 { inset:auto;left:25%;width:50%;aspect-ratio:1;bottom:40%;border-radius:50%;background:linear-gradient(var(--a2),var(--a));opacity:.6;-webkit-mask:linear-gradient(#000 52%,transparent 52% 57%,#000 57% 66%,transparent 66% 71%,#000 71% 79%,transparent 79% 85%,#000 85%);mask:linear-gradient(#000 52%,transparent 52% 57%,#000 57% 66%,transparent 66% 71%,#000 71% 79%,transparent 79% 85%,#000 85%);animation:fx-sun 5s ease-in-out infinite alternate; }
/* clouds */
[data-bg="clouds"] .backdrop > .fx, .stylecard[data-bgfx="clouds"] .sc-prev > .fx, .portal.hero-ay > .fx, .vsplash[data-sfx="clouds"] > .fx { display: block; }
[data-bg="clouds"] .backdrop > .f1, .stylecard[data-bgfx="clouds"] .sc-prev > .f1, .portal.hero-ay > .f1, .vsplash[data-sfx="clouds"] > .f1 { inset:0 -600px 0 0;background:var(--fxc,var(--a));opacity:var(--fxo,.16);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='260' viewBox='0 0 600 260'%3E%3Cg transform='translate(20 30) scale(1.2)' fill='%23fff'%3E%3Ccircle cx='40' cy='40' r='24'/%3E%3Ccircle cx='72' cy='30' r='32'/%3E%3Ccircle cx='106' cy='44' r='22'/%3E%3Crect x='20' y='40' width='110' height='26' rx='13'/%3E%3C/g%3E%3Cg transform='translate(340 120) scale(0.9)' fill='%23fff'%3E%3Ccircle cx='40' cy='40' r='24'/%3E%3Ccircle cx='72' cy='30' r='32'/%3E%3Ccircle cx='106' cy='44' r='22'/%3E%3Crect x='20' y='40' width='110' height='26' rx='13'/%3E%3C/g%3E%3C/svg%3E") 0 0/600px 260px repeat;animation:fx-cloud1 70s linear infinite; }
[data-bg="clouds"] .backdrop > .f2, .stylecard[data-bgfx="clouds"] .sc-prev > .f2, .portal.hero-ay > .f2, .vsplash[data-sfx="clouds"] > .f2 { inset:12% -420px 0 0;background:var(--fxc,var(--a));opacity:calc(var(--fxo,.16) * .7);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='240' viewBox='0 0 420 240'%3E%3Cg transform='translate(60 110) scale(0.7)' fill='%23fff'%3E%3Ccircle cx='40' cy='40' r='24'/%3E%3Ccircle cx='72' cy='30' r='32'/%3E%3Ccircle cx='106' cy='44' r='22'/%3E%3Crect x='20' y='40' width='110' height='26' rx='13'/%3E%3C/g%3E%3Cg transform='translate(280 20) scale(0.55)' fill='%23fff'%3E%3Ccircle cx='40' cy='40' r='24'/%3E%3Ccircle cx='72' cy='30' r='32'/%3E%3Ccircle cx='106' cy='44' r='22'/%3E%3Crect x='20' y='40' width='110' height='26' rx='13'/%3E%3C/g%3E%3C/svg%3E") 0 0/420px 240px repeat;animation:fx-cloud2 45s linear infinite; }
/* prism */
[data-bg="prism"] .backdrop > .fx, .stylecard[data-bgfx="prism"] .sc-prev > .fx, .portal.hero-bj > .fx, .vsplash[data-sfx="prism"] > .fx { display: block; }
[data-bg="prism"] .backdrop > .f1, .stylecard[data-bgfx="prism"] .sc-prev > .f1, .portal.hero-bj > .f1, .vsplash[data-sfx="prism"] > .f1 { inset:0 -100% 0 0;background:linear-gradient(90deg,#f472b650,#facc1550,#22d3ee50,#a78bfa50,#f472b650,#facc1550,#22d3ee50,#a78bfa50,#f472b650);opacity:.9;animation:fx-slide 16s linear infinite; }
[data-bg="prism"] .backdrop > .f2, .stylecard[data-bgfx="prism"] .sc-prev > .f2, .portal.hero-bj > .f2, .vsplash[data-sfx="prism"] > .f2 { inset:-20% -60% -20% 0;background:repeating-linear-gradient(115deg,transparent 0 60px,#ffffff66 60px 64px,transparent 64px 140px);animation:fx-glide 12s ease-in-out infinite alternate; }
/* plasma */
[data-bg="plasma"] .backdrop > .fx, .stylecard[data-bgfx="plasma"] .sc-prev > .fx, .portal.hero-bd > .fx, .vsplash[data-sfx="plasma"] > .fx { display: block; }
[data-bg="plasma"] .backdrop > .f1, .stylecard[data-bgfx="plasma"] .sc-prev > .f1, .portal.hero-bd > .f1, .vsplash[data-sfx="plasma"] > .f1 { inset:-50%;background:conic-gradient(from 0deg,var(--a-45),transparent 20%,var(--a2-45) 40%,transparent 60%,#22d3ee55 80%,var(--a-45));-webkit-mask:radial-gradient(closest-side,#000,transparent);mask:radial-gradient(closest-side,#000,transparent);animation:fx-spin 14s linear infinite; }
[data-bg="plasma"] .backdrop > .f2, .stylecard[data-bgfx="plasma"] .sc-prev > .f2, .portal.hero-bd > .f2, .vsplash[data-sfx="plasma"] > .f2 { inset:-50%;opacity:.7;background:conic-gradient(from 90deg,transparent,var(--a2-45) 25%,transparent 50%,var(--a-45) 75%,transparent);-webkit-mask:radial-gradient(closest-side,#000,transparent 80%);mask:radial-gradient(closest-side,#000,transparent 80%);animation:fx-spin 20s linear infinite reverse; }
/* beams */
[data-bg="beams"] .backdrop > .fx, .stylecard[data-bgfx="beams"] .sc-prev > .fx, .portal.hero-bh > .fx, .vsplash[data-sfx="beams"] > .fx { display: block; }
[data-bg="beams"] .backdrop > .f1, .stylecard[data-bgfx="beams"] .sc-prev > .f1, .portal.hero-bh > .f1, .vsplash[data-sfx="beams"] > .f1 { inset:auto;bottom:-10%;width:70%;height:170%;clip-path:polygon(46% 100%,54% 100%,100% 0,0 0);transform-origin:50% 100%;opacity:.4;left:-8%;background:linear-gradient(to top,var(--a),transparent 85%);animation:fx-beam 7s ease-in-out infinite alternate; }
[data-bg="beams"] .backdrop > .f2, .stylecard[data-bgfx="beams"] .sc-prev > .f2, .portal.hero-bh > .f2, .vsplash[data-sfx="beams"] > .f2 { inset:auto;bottom:-10%;width:70%;height:170%;clip-path:polygon(46% 100%,54% 100%,100% 0,0 0);transform-origin:50% 100%;opacity:.4;right:-8%;background:linear-gradient(to top,var(--a2),transparent 85%);animation:fx-beam 7s ease-in-out -3.5s infinite alternate-reverse; }
/* embers */
[data-bg="embers"] .backdrop > .fx, .stylecard[data-bgfx="embers"] .sc-prev > .fx, .portal.hero-av > .fx, .vsplash[data-sfx="embers"] > .fx { display: block; }
[data-bg="embers"] .backdrop > .f1, .stylecard[data-bgfx="embers"] .sc-prev > .f1, .portal.hero-av > .f1, .vsplash[data-sfx="embers"] > .f1 { inset:0 0 -180px 0;background:linear-gradient(#fde68a,#fb923c,#ef4444);opacity:.85;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Ccircle cx='20' cy='30' r='1.6' fill='%23fff'/%3E%3Ccircle cx='70' cy='110' r='2.2' fill='%23fff'/%3E%3Ccircle cx='120' cy='50' r='1.4' fill='%23fff'/%3E%3Ccircle cx='160' cy='150' r='2' fill='%23fff'/%3E%3Ccircle cx='40' cy='160' r='1.2' fill='%23fff'/%3E%3Ccircle cx='140' cy='100' r='1.1' fill='%23fff'/%3E%3Ccircle cx='95' cy='170' r='1.7' fill='%23fff'/%3E%3C/svg%3E") 0 0/180px 180px repeat;animation:fx-emb1 6s linear infinite; }
[data-bg="embers"] .backdrop > .f2, .stylecard[data-bgfx="embers"] .sc-prev > .f2, .portal.hero-av > .f2, .vsplash[data-sfx="embers"] > .f2 { inset:0 0 -260px -260px;background:linear-gradient(#fef3c7,var(--a));opacity:.5;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Ccircle cx='40' cy='60' r='2.6' fill='%23fff'/%3E%3Ccircle cx='180' cy='30' r='1.8' fill='%23fff'/%3E%3Ccircle cx='220' cy='190' r='3' fill='%23fff'/%3E%3Ccircle cx='100' cy='210' r='2' fill='%23fff'/%3E%3Ccircle cx='140' cy='120' r='1.5' fill='%23fff'/%3E%3C/svg%3E") 0 0/260px 260px repeat;animation:fx-emb2 10s linear infinite; }
[data-bg="embers"] .backdrop > .f2::before, .stylecard[data-bgfx="embers"] .sc-prev > .f2::before, .portal.hero-av > .f2::before, .vsplash[data-sfx="embers"] > .f2::before { content:'';inset:auto 0 0 0;height:40%;background:radial-gradient(60% 100% at 50% 100%,#fb923c55,transparent); }
/* caustics */
[data-bg="caustics"] .backdrop > .fx, .stylecard[data-bgfx="caustics"] .sc-prev > .fx, .portal.hero-bk > .fx, .vsplash[data-sfx="caustics"] > .fx { display: block; }
[data-bg="caustics"] .backdrop > .f1, .stylecard[data-bgfx="caustics"] .sc-prev > .f1, .portal.hero-bk > .f1, .vsplash[data-sfx="caustics"] > .f1 { inset:-240px 0 0 -240px;background:var(--fxc,#fff);opacity:var(--fxo,.16);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cpath d='M0 60 Q60 20 120 60 T240 60 M0 180 Q60 140 120 180 T240 180 M60 0 Q20 60 60 120 T60 240 M180 0 Q140 60 180 120 T180 240' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/240px 240px repeat;animation:fx-caus1 20s linear infinite; }
[data-bg="caustics"] .backdrop > .f2, .stylecard[data-bgfx="caustics"] .sc-prev > .f2, .portal.hero-bk > .f2, .vsplash[data-sfx="caustics"] > .f2 { inset:0 -300px -300px 0;background:var(--a2);opacity:.18;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cpath d='M0 60 Q60 20 120 60 T240 60 M0 180 Q60 140 120 180 T240 180 M60 0 Q20 60 60 120 T60 240 M180 0 Q140 60 180 120 T180 240' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/300px 300px repeat;animation:fx-caus2 26s linear infinite; }
/* meteors */
[data-bg="meteors"] .backdrop > .fx, .stylecard[data-bgfx="meteors"] .sc-prev > .fx, .portal.hero-bc > .fx, .vsplash[data-sfx="meteors"] > .fx { display: block; }
[data-bg="meteors"] .backdrop > .f1, .stylecard[data-bgfx="meteors"] .sc-prev > .f1, .portal.hero-bc > .f1, .vsplash[data-sfx="meteors"] > .f1 { inset:-420px -420px 0 0;background:#fff;opacity:.75;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cdefs%3E%3ClinearGradient id='m0' gradientUnits='userSpaceOnUse' x1='300' y1='40' x2='230' y2='110'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='m1' gradientUnits='userSpaceOnUse' x1='140' y1='200' x2='90' y2='250'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='m2' gradientUnits='userSpaceOnUse' x1='400' y1='260' x2='340' y2='320'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cline x1='300' y1='40' x2='230' y2='110' stroke='url(%23m0)' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='140' y1='200' x2='90' y2='250' stroke='url(%23m1)' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='400' y1='260' x2='340' y2='320' stroke='url(%23m2)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/420px 420px repeat;animation:fx-met1 3.5s linear infinite; }
[data-bg="meteors"] .backdrop > .f2, .stylecard[data-bgfx="meteors"] .sc-prev > .f2, .portal.hero-bc > .f2, .vsplash[data-sfx="meteors"] > .f2 { inset:-560px -560px 0 0;background:var(--a2);opacity:.5;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cdefs%3E%3ClinearGradient id='m0' gradientUnits='userSpaceOnUse' x1='200' y1='80' x2='110' y2='170'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='m1' gradientUnits='userSpaceOnUse' x1='500' y1='330' x2='430' y2='400'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cline x1='200' y1='80' x2='110' y2='170' stroke='url(%23m0)' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='500' y1='330' x2='430' y2='400' stroke='url(%23m1)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/560px 560px repeat;animation:fx-met2 5.5s linear infinite; }
/* hexpulse */
[data-bg="hexpulse"] .backdrop > .fx, .stylecard[data-bgfx="hexpulse"] .sc-prev > .fx, .portal.hero-bg > .fx, .vsplash[data-sfx="hexpulse"] > .fx { display: block; }
[data-bg="hexpulse"] .backdrop > .f1, .stylecard[data-bgfx="hexpulse"] .sc-prev > .f1, .portal.hero-bg > .f1, .vsplash[data-sfx="hexpulse"] > .f1 { background:var(--a);opacity:.14;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34.64' viewBox='0 0 60 34.64'%3E%3Cpolygon points='40.00,17.32 30.00,34.64 10.00,34.64 0.00,17.32 10.00,0.00 30.00,0.00' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cpolygon points='70.00,0.00 60.00,17.32 40.00,17.32 30.00,0.00 40.00,-17.32 60.00,-17.32' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cpolygon points='70.00,34.64 60.00,51.96 40.00,51.96 30.00,34.64 40.00,17.32 60.00,17.32' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cpolygon points='10.00,0.00 0.00,17.32 -20.00,17.32 -30.00,0.00 -20.00,-17.32 0.00,-17.32' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cpolygon points='10.00,34.64 0.00,51.96 -20.00,51.96 -30.00,34.64 -20.00,17.32 0.00,17.32' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 0 0/60px 34.64px repeat; }
[data-bg="hexpulse"] .backdrop > .f2, .stylecard[data-bgfx="hexpulse"] .sc-prev > .f2, .portal.hero-bg > .f2, .vsplash[data-sfx="hexpulse"] > .f2 { background:radial-gradient(closest-side,var(--a),transparent) no-repeat;background-size:55% 55%;opacity:.8;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34.64' viewBox='0 0 60 34.64'%3E%3Cpolygon points='40.00,17.32 30.00,34.64 10.00,34.64 0.00,17.32 10.00,0.00 30.00,0.00' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cpolygon points='70.00,0.00 60.00,17.32 40.00,17.32 30.00,0.00 40.00,-17.32 60.00,-17.32' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cpolygon points='70.00,34.64 60.00,51.96 40.00,51.96 30.00,34.64 40.00,17.32 60.00,17.32' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cpolygon points='10.00,0.00 0.00,17.32 -20.00,17.32 -30.00,0.00 -20.00,-17.32 0.00,-17.32' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cpolygon points='10.00,34.64 0.00,51.96 -20.00,51.96 -30.00,34.64 -20.00,17.32 0.00,17.32' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 0 0/60px 34.64px repeat;animation:fx-hex 9s ease-in-out infinite alternate; }
/* twinkle */
[data-bg="twinkle"] .backdrop > .fx, .stylecard[data-bgfx="twinkle"] .sc-prev > .fx, .portal.hero-bl > .fx, .vsplash[data-sfx="twinkle"] > .fx { display: block; }
[data-bg="twinkle"] .backdrop > .f1, .stylecard[data-bgfx="twinkle"] .sc-prev > .f1, .portal.hero-bl > .f1, .vsplash[data-sfx="twinkle"] > .f1 { background:radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent),radial-gradient(1px 1px at 35% 70%, #fff, transparent),radial-gradient(1.3px 1.3px at 60% 15%, #fff, transparent),radial-gradient(1px 1px at 80% 55%, #fff, transparent),radial-gradient(1px 1px at 25% 45%, #fff, transparent),radial-gradient(1.6px 1.6px at 90% 85%, #fff, transparent),radial-gradient(1px 1px at 50% 90%, #fff, transparent),radial-gradient(1.2px 1.2px at 70% 35%, #fff, transparent);background-size:240px 240px;animation:fx-blink 2.4s ease-in-out infinite alternate; }
[data-bg="twinkle"] .backdrop > .f2, .stylecard[data-bgfx="twinkle"] .sc-prev > .f2, .portal.hero-bl > .f2, .vsplash[data-sfx="twinkle"] > .f2 { background:radial-gradient(1.2px 1.2px at 15% 80%, #fff, transparent),radial-gradient(1.6px 1.6px at 45% 30%, #fff, transparent),radial-gradient(1px 1px at 75% 75%, #fff, transparent),radial-gradient(1.3px 1.3px at 95% 10%, #fff, transparent),radial-gradient(1px 1px at 5% 55%, #fff, transparent),radial-gradient(1.4px 1.4px at 60% 60%, #fff, transparent);background-size:320px 320px;animation:fx-blink 3.6s ease-in-out -1.2s infinite alternate; }
[data-bg="twinkle"] .backdrop > .f2::before, .stylecard[data-bgfx="twinkle"] .sc-prev > .f2::before, .portal.hero-bl > .f2::before, .vsplash[data-sfx="twinkle"] > .f2::before { content:'';inset:0;background:radial-gradient(2.2px 2.2px at 20% 30%, var(--a2), transparent),radial-gradient(2.6px 2.6px at 70% 70%, var(--a2), transparent),radial-gradient(2px 2px at 85% 20%, var(--a2), transparent);background-size:420px 420px;animation:fx-blink 5s ease-in-out -2s infinite alternate-reverse; }
/* curtains */
[data-bg="curtains"] .backdrop > .fx, .stylecard[data-bgfx="curtains"] .sc-prev > .fx, .portal.hero-ba > .fx, .vsplash[data-sfx="curtains"] > .fx { display: block; }
[data-bg="curtains"] .backdrop > .f1, .stylecard[data-bgfx="curtains"] .sc-prev > .f1, .portal.hero-ba > .f1, .vsplash[data-sfx="curtains"] > .f1 { inset:0 -100% 25% 0;background:repeating-linear-gradient(90deg,transparent 0,var(--a-45) 8%,transparent 16%,var(--a2-45) 28%,transparent 40%,transparent 50%);-webkit-mask:linear-gradient(to bottom,transparent,#000 22%,#000 42%,transparent 92%);mask:linear-gradient(to bottom,transparent,#000 22%,#000 42%,transparent 92%);animation:fx-slide 30s linear infinite; }
[data-bg="curtains"] .backdrop > .f2, .stylecard[data-bgfx="curtains"] .sc-prev > .f2, .portal.hero-ba > .f2, .vsplash[data-sfx="curtains"] > .f2 { inset:-10% -30% 35% -30%;opacity:.6;background:repeating-linear-gradient(90deg,transparent 0,var(--a2-45) 6%,transparent 13%,var(--a-30) 20%,transparent 30%);-webkit-mask:linear-gradient(to bottom,transparent,#000 30%,transparent 90%);mask:linear-gradient(to bottom,transparent,#000 30%,transparent 90%);animation:fx-sway 9s ease-in-out infinite alternate; }
/* circuit */
[data-bg="circuit"] .backdrop > .fx, .stylecard[data-bgfx="circuit"] .sc-prev > .fx, .portal.hero-az > .fx, .vsplash[data-sfx="circuit"] > .fx { display: block; }
[data-bg="circuit"] .backdrop > .f1, .stylecard[data-bgfx="circuit"] .sc-prev > .f1, .portal.hero-az > .f1, .vsplash[data-sfx="circuit"] > .f1 { background:var(--a);opacity:.2;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M0 40 H50 L70 60 H110 V120 H160 M40 160 V110 L60 90 H90 M130 0 V30 L150 50 H160 M0 130 H20 L30 120'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='110' cy='60' r='3.5'/%3E%3Ccircle cx='90' cy='90' r='3.5'/%3E%3Ccircle cx='30' cy='120' r='3'/%3E%3Ccircle cx='150' cy='50' r='3'/%3E%3C/g%3E%3C/svg%3E") 0 0/160px 160px repeat; }
[data-bg="circuit"] .backdrop > .f2, .stylecard[data-bgfx="circuit"] .sc-prev > .f2, .portal.hero-az > .f2, .vsplash[data-sfx="circuit"] > .f2 { background:linear-gradient(to bottom,transparent 0 42%,var(--a2) 48%,#fff 50%,var(--a2) 52%,transparent 58% 100%);background-size:100% 300%;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M0 40 H50 L70 60 H110 V120 H160 M40 160 V110 L60 90 H90 M130 0 V30 L150 50 H160 M0 130 H20 L30 120'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='110' cy='60' r='3.5'/%3E%3Ccircle cx='90' cy='90' r='3.5'/%3E%3Ccircle cx='30' cy='120' r='3'/%3E%3Ccircle cx='150' cy='50' r='3'/%3E%3C/g%3E%3C/svg%3E") 0 0/160px 160px repeat;animation:fx-circ 4s linear infinite; }
/* silk */
[data-bg="silk"] .backdrop > .fx, .stylecard[data-bgfx="silk"] .sc-prev > .fx, .portal.hero-bi > .fx, .vsplash[data-sfx="silk"] > .fx { display: block; }
[data-bg="silk"] .backdrop > .f1, .stylecard[data-bgfx="silk"] .sc-prev > .f1, .portal.hero-bi > .f1, .vsplash[data-sfx="silk"] > .f1 { inset:-60%;background:linear-gradient(115deg,transparent 36%,var(--a-30) 45%,var(--a2-20) 52%,transparent 62%);animation:fx-silk1 14s ease-in-out infinite alternate; }
[data-bg="silk"] .backdrop > .f2, .stylecard[data-bgfx="silk"] .sc-prev > .f2, .portal.hero-bi > .f2, .vsplash[data-sfx="silk"] > .f2 { inset:-60%;background:linear-gradient(70deg,transparent 40%,var(--a2-20) 48%,var(--a-20) 54%,transparent 64%);animation:fx-silk2 18s ease-in-out infinite alternate; }
/* snow */
.portal.hero-au > .fx, .vsplash[data-sfx="snow"] > .fx { display: block; }
.portal.hero-au > .f1, .vsplash[data-sfx="snow"] > .f1 { inset:-200px 0 0 0;background:var(--snow);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Ccircle cx='20' cy='30' r='2.2' fill='%23fff'/%3E%3Ccircle cx='90' cy='120' r='1.6' fill='%23fff'/%3E%3Ccircle cx='150' cy='60' r='2.8' fill='%23fff'/%3E%3Ccircle cx='60' cy='170' r='1.3' fill='%23fff'/%3E%3Ccircle cx='175' cy='185' r='2' fill='%23fff'/%3E%3Ccircle cx='120' cy='10' r='1.2' fill='%23fff'/%3E%3C/svg%3E") 0 0/200px 200px repeat;animation:fx-snow1 10s linear infinite; }
.portal.hero-au > .f2, .vsplash[data-sfx="snow"] > .f2 { inset:-300px 0 0 0;background:var(--snow);opacity:.6;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Ccircle cx='40' cy='60' r='3.4' fill='%23fff'/%3E%3Ccircle cx='200' cy='30' r='2.6' fill='%23fff'/%3E%3Ccircle cx='260' cy='200' r='3.8' fill='%23fff'/%3E%3Ccircle cx='120' cy='240' r='2.4' fill='%23fff'/%3E%3C/svg%3E") 90px 0/300px 300px repeat;animation:fx-snow2 16s linear infinite; }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-blink { from { opacity: .25; } to { opacity: 1; } }
@keyframes fx-rain1 { to { transform: translateY(160px); } }
@keyframes fx-rain2 { to { transform: translateY(220px); } }
@keyframes fx-bub1 { to { transform: translateY(-240px); } }
@keyframes fx-bub2 { to { transform: translateY(-360px); } }
@keyframes fx-wander { 0% { transform: translate(0,0); } 33% { transform: translate(24px,-30px); } 66% { transform: translate(-18px,-12px); } 100% { transform: translate(10px,-40px); } }
@keyframes fx-wave1 { to { transform: translateX(-400px); } }
@keyframes fx-wave2 { to { transform: translateX(300px); } }
@keyframes fx-mat1 { to { transform: translateY(320px); } }
@keyframes fx-mat2 { to { transform: translateY(460px); } }
@keyframes fx-lava1 { 0% { top: 85%; transform: scale(1); } 50% { transform: scale(.8,1.1); } 100% { top: -30%; transform: scale(1.1); } }
@keyframes fx-lava2 { 0% { top: -25%; transform: scale(1); } 50% { transform: scale(1.15,.9); } 100% { top: 80%; transform: scale(.9); } }
@keyframes fx-warp { 0% { transform: scale(.35); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes fx-conf1 { to { transform: translateY(240px); } }
@keyframes fx-conf2 { to { transform: translate(320px,320px); } }
@keyframes fx-pet1 { to { transform: translate(-260px,260px); } }
@keyframes fx-pet2 { to { transform: translate(-360px,360px); } }
@keyframes fx-leaf1 { to { transform: translate(-300px,300px); } }
@keyframes fx-leaf2 { to { transform: translate(-420px,420px); } }
@keyframes fx-ring { 0% { transform: scale(.08); opacity: .9; } 100% { transform: scale(1.1); opacity: 0; } }
@keyframes fx-retro { to { background-position: 0 48px, 0 48px; } }
@keyframes fx-sun { to { opacity: .8; transform: translateY(-4%); } }
@keyframes fx-cloud1 { to { transform: translateX(-600px); } }
@keyframes fx-cloud2 { to { transform: translateX(-420px); } }
@keyframes fx-slide { to { transform: translateX(-50%); } }
@keyframes fx-glide { to { transform: translateX(-30%); } }
@keyframes fx-beam { from { transform: rotate(-26deg); } to { transform: rotate(22deg); } }
@keyframes fx-emb1 { to { transform: translateY(-180px); } }
@keyframes fx-emb2 { to { transform: translate(260px,-260px); } }
@keyframes fx-caus1 { to { transform: translate(240px,240px); } }
@keyframes fx-caus2 { to { transform: translate(-300px,-300px); } }
@keyframes fx-met1 { to { transform: translate(-420px,420px); } }
@keyframes fx-met2 { to { transform: translate(-560px,560px); } }
@keyframes fx-hex { 0% { background-position: 0% 0%; } 50% { background-position: 100% 40%; } 100% { background-position: 20% 100%; } }
@keyframes fx-sway { from { transform: skewX(-10deg) translateX(0); } to { transform: skewX(10deg) translateX(-12%); } }
@keyframes fx-circ { from { background-position: 0 100%; } to { background-position: 0 0%; } }
@keyframes fx-silk1 { from { transform: rotate(-6deg) translate(-8%,0); } to { transform: rotate(6deg) translate(8%,4%); } }
@keyframes fx-silk2 { from { transform: rotate(5deg) translate(6%,-3%); } to { transform: rotate(-7deg) translate(-8%,3%); } }
@keyframes fx-snow1 { to { transform: translateY(200px); } }
@keyframes fx-snow2 { to { transform: translateY(300px); } }
@media (prefers-reduced-motion: reduce) { .fx, .fx::before, .fx::after { animation: none !important; } }

/* ===== 2.8.40: style previews, colours per place ===== */
.stylecard .sc-prev > :not(.fx) { position: relative; z-index: 1; }
.pill.movetag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 1px 7px; vertical-align: middle;
  color: var(--a2, #ff4fd8); border: 1px solid var(--a-45); background: var(--a-12); border-radius: 999px; letter-spacing: .02em; }
.pill.movetag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: mv-dot 1.4s ease-in-out infinite; }
@keyframes mv-dot { 50% { opacity: .25; transform: scale(.6); } }
.stylecard .sc-meta .movetag { display: inline-flex; margin-left: 4px; font-size: 9.5px; }
[data-bg="clouds"] .backdrop, .stylecard[data-bgfx="clouds"] .sc-prev, .vsplash[data-sfx="clouds"] { --fxc: #fff; --fxo: .85; }
[data-bg="caustics"] .backdrop, .stylecard[data-bgfx="caustics"] .sc-prev { --fxc: #fff; --fxo: .8; }
[data-bg="clouds"] .backdrop { background: linear-gradient(#bcd8ff, transparent 70%); }
[data-bg="retro"] .backdrop::after, [data-bg="beams"] .backdrop::after, [data-bg="matrix"] .backdrop::before, [data-bg="matrix"] .backdrop::after { display: none; }
[data-bg="rain"] .backdrop::before, [data-bg="meteors"] .backdrop::before { opacity: .3; }
.stylecard .sc-prev > .fx.f1, .stylecard .sc-prev > .fx.f2 { zoom: .6; }
[data-bg="waves"] .backdrop > .f1 { height: 24vh; } [data-bg="waves"] .backdrop > .f2 { height: 17vh; }
[data-bg="beams"] .backdrop > .fx { opacity: .55; }
.vsplash[data-sfx="retro"] > .f1 { height: 32%; } .vsplash[data-sfx="retro"] > .f2 { bottom: 9%; left: 22%; width: 56%; }
.vsplash[data-sfx="waves"] > .f1 { height: 180px; } .vsplash[data-sfx="waves"] > .f2 { height: 130px; }
.hero-al .chips.mini .status, .hero-al .chips.mini .pill { background: #0000002e; border-color: #ffffff40; color: #fff; }

/* ===== 2.8.40: 25 more home cards (12 still, 13 moving) ===== */
.portal > .fx { border-radius: inherit; }
/* shapes shared by several */
.hero-an .hero, .hero-aq .hero, .hero-as .hero, .hero-au .hero, .hero-aw .hero, .hero-ag .hero, .hero-ak .hero {
  grid-template-columns: 1fr; grid-template-areas: "top" "logo" "name" "chips" "text"; justify-items: center; text-align: center; }
.hero-an .hero > .toprow, .hero-aq .hero > .toprow, .hero-as .hero > .toprow, .hero-au .hero > .toprow, .hero-aw .hero > .toprow, .hero-ag .hero > .toprow, .hero-ak .hero > .toprow { justify-self: stretch; }
.hero-an .hero > .chips, .hero-aq .hero > .chips, .hero-as .hero > .chips, .hero-au .hero > .chips, .hero-aw .hero > .chips, .hero-ag .hero > .chips, .hero-ak .hero > .chips { justify-content: center; }
.hero-am .hero, .hero-ao .hero, .hero-ax .hero, .hero-ah .hero, .hero-ae .hero, .hero-ac .hero {
  grid-template-columns: auto 1fr; grid-template-areas: "top top" "logo name" "logo chips" "text text"; }
.hero-am .orb.s104, .hero-ao .orb.s104, .hero-ax .orb.s104, .hero-ah .orb.s104, .hero-ae .orb.s104 { --s: 72px; }
.hero-am .hero > .who, .hero-ao .hero > .who, .hero-ax .hero > .who, .hero-ah .hero > .who, .hero-ae .hero > .who, .hero-ac .hero > .who { font-size: clamp(24px, 7vw, 36px); align-self: end; }
.hero-am .hero > .chips, .hero-ao .hero > .chips, .hero-ax .hero > .chips, .hero-ah .hero > .chips, .hero-ae .hero > .chips, .hero-ac .hero > .chips { align-self: start; }

/* AA ticket stub: perforated line with notches, quick stats underneath */
.hero-aa .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "logo name" "logo chips" "stats stats"; }
.hero-aa .orb.s104 { --s: 70px; }
.hero-aa .hero > .who { font-size: clamp(24px, 7vw, 36px); align-self: end; } .hero-aa .hero > .chips { align-self: start; }
.hero-aa .hero > .welcome { display: none; }
.hero-aa .hero > .h-stats { display: grid; position: relative; margin-top: 6px; padding-top: 16px; border-top: 2px dashed var(--line-2); }
.hero-aa .hero > .h-stats::before, .hero-aa .hero > .h-stats::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); }
.hero-aa .hero > .h-stats::before { left: -33px; } .hero-aa .hero > .h-stats::after { right: -33px; }
@media (min-width: 640px) { .hero-aa .hero > .h-stats::before { left: -41px; } .hero-aa .hero > .h-stats::after { right: -41px; } }

/* AB split colour: a coloured panel down the left holding the logo */
.hero-ab .hero-cover { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 128px; background: var(--grad); }
.hero-ab .hero-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, #ffffff40, transparent 60%); }
.hero-ab .hero { grid-template-columns: 92px 1fr; grid-template-areas: "logo top" "logo name" "logo chips" "logo text"; column-gap: 32px; }
.hero-ab .hero > .h-logo { align-self: center; justify-content: center; }
.hero-ab .orb.s104 { --s: 80px; } .hero-ab .orb .halo { display: none; }
.hero-ab .orb .ball { box-shadow: 0 0 0 4px #ffffff55, 0 12px 28px #0006; }
.hero-ab .hero > .who { font-size: clamp(24px, 7vw, 36px); }

/* AC polaroid: logo in a white photo frame, slightly tilted */
.hero-ac .h-logo { padding: 8px 8px 24px; background: #fff; border-radius: 4px; transform: rotate(-5deg); box-shadow: 0 14px 30px -8px #000a; }
.hero-ac .orb.s104 { --s: 70px; } .hero-ac .orb .halo { display: none; }
.hero-ac .orb .ball { border-radius: 2px; }

/* AD ID badge: coloured band on top, square logo and a barcode */
.hero-ad .hero-cover { display: block; position: absolute; left: 0; right: 0; top: 0; height: 58px; background: var(--grad); }
.hero-ad::after { content: ""; position: absolute; right: 20px; bottom: 18px; width: 86px; height: 26px; opacity: .35; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--fg) 0 2px, transparent 2px 4px, var(--fg) 4px 5px, transparent 5px 8px, var(--fg) 8px 11px, transparent 11px 13px); }
.hero-ad .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "logo name" "logo chips" "logo line"; row-gap: 8px; }
.hero-ad .hero > .toprow .kicker { color: #fff; }
.hero-ad .hero > .h-logo { margin-top: 8px; }
.hero-ad .orb.s104 { --s: 84px; } .hero-ad .orb .halo { display: none; }
.hero-ad .orb .ball { border-radius: 18px; box-shadow: 0 0 0 4px var(--solid), var(--glow); }
.hero-ad .hero > .who { font-size: clamp(22px, 6.5vw, 32px); align-self: end; }
.hero-ad .hero > .chips { align-self: start; }
.hero-ad .hero > .welcome { display: none; } .hero-ad .hero > .h-line { display: block; padding-right: 96px; }

/* AE frosted banner: soft colour clouds across the top */
.hero-ae .hero-cover { display: block; position: absolute; left: -10%; right: -10%; top: -40px; height: 150px; filter: blur(22px); opacity: .85;
  background: radial-gradient(40% 60% at 20% 50%, var(--a-60), transparent 70%), radial-gradient(40% 60% at 70% 40%, var(--a2-45), transparent 70%), radial-gradient(30% 50% at 95% 70%, #22d3ee44, transparent 70%); }

/* AF corner logo: huge name at the bottom, small logo top right, stripes */
.hero-af { min-height: 270px; display: flex; }
.hero-af .hero-cover { display: block; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, var(--a-6) 0 14px, transparent 14px 28px); }
.hero-af .hero { width: 100%; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr auto auto; grid-template-areas: "top top" "text logo" ". ." "name name" "chips chips"; }
.hero-af .orb.s104 { --s: 56px; } .hero-af .hero > .h-logo { align-self: start; }
.hero-af .hero > .who { font-size: clamp(40px, 13vw, 68px); line-height: .95; }
.hero-af .hero > .welcome { font-size: 13px; }

/* AG outline: just a bold accent border */
.portal.hero-ag { background: transparent; border: 2px solid var(--a); box-shadow: 0 0 0 5px var(--a-12); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero-ag .bloom { display: none; }
.hero-ag .orb.s104 { --s: 84px; }

/* AH dotted: a dot grid fading out to the right */
.hero-ah .hero-cover { display: block; position: absolute; inset: 0; background: radial-gradient(var(--a-45) 1.3px, transparent 1.8px) 0 0 / 16px 16px;
  -webkit-mask: linear-gradient(100deg, #000 10%, transparent 75%); mask: linear-gradient(100deg, #000 10%, transparent 75%); }

/* AI diagonal slice of colour behind the logo */
.hero-ai .hero-cover { display: block; position: absolute; inset: 0; background: var(--grad); opacity: .5; clip-path: polygon(0 0, 58% 0, 30% 100%, 0 100%); }
.hero-ai .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "logo name" "logo chips" "text text"; }
.hero-ai .orb.s104 { --s: 80px; }
.hero-ai .hero > .who { font-size: clamp(24px, 7vw, 36px); align-self: end; } .hero-ai .hero > .chips { align-self: start; }

/* AJ stats first */
.hero-aj .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "stats stats" "logo name" "logo chips"; }
.hero-aj .hero > .h-stats { display: grid; margin-bottom: 4px; }
.hero-aj .hero > .welcome { display: none; }
.hero-aj .orb.s104 { --s: 60px; }
.hero-aj .hero > .who { font-size: clamp(22px, 6.5vw, 32px); align-self: end; } .hero-aj .hero > .chips { align-self: start; }

/* AK target rings around the logo */
.hero-ak .hero-cover { display: block; position: absolute; left: 50%; top: 118px; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 30px, var(--a-30) 31px 32px, transparent 33px 44px);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent); }
.hero-ak .orb.s104 { --s: 96px; }

/* AL bold colour: the whole card in the accent colour */
.portal.hero-al { background: var(--grad); border-color: transparent; }
.hero-al .bloom { opacity: .5; background: radial-gradient(closest-side, #ffffff55, transparent); }
.hero-al .hero { grid-template-columns: 1fr auto; grid-template-areas: "top top" "name logo" "chips logo" "text text"; }
.hero-al .orb.s104 { --s: 70px; }
.hero-al .who.gtext { background: none; color: #fff; -webkit-text-fill-color: #fff; filter: drop-shadow(0 2px 10px #0004); }
.hero-al .kicker, .hero-al .welcome { color: #ffffffd9; }
.hero-al .h-st { background: #ffffff22; border-color: #ffffff33; }

/* AM rain / AN fireflies / AO lava / AP code / AQ confetti / AR blossom / AU snow / AV embers / AW warp / AY clouds: backgrounds from .fx */
.hero-am .hero-cover, .hero-ap .hero-cover { display: block; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(var(--panel), .5)); }
.hero-ap .hero { grid-template-columns: 1fr auto; grid-template-areas: "top top" "name logo" "chips logo" "text text"; }
.hero-ap .orb.s104 { --s: 66px; }
.hero-ap .hero > .who { font-family: "JetBrains Mono", var(--mono); letter-spacing: -.02em; font-size: clamp(24px, 7vw, 36px); }
.hero-an .orb.s104, .hero-aq .orb.s104, .hero-au .orb.s104, .hero-aw .orb.s104 { --s: 96px; }
.hero-ar .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "name name" "chips chips" "logo text"; }
.hero-ar .orb.s104 { --s: 72px; }
.hero-av .hero { grid-template-columns: 1fr auto; grid-template-areas: "top top" "name name" "text logo" "chips logo"; }
.hero-av .hero > .who { font-size: clamp(38px, 12vw, 64px); line-height: 1; }
.hero-av .orb.s104 { --s: 64px; }
.hero-ay .hero { grid-template-columns: 1fr auto; grid-template-areas: "top top" "name logo" "chips logo" "stats stats" "text text"; }
.hero-ay .orb.s104 { --s: 66px; } .hero-ay .hero > .h-stats { display: grid; }
.hero-ay .hero > .who { font-size: clamp(26px, 8vw, 40px); }
.portal.hero-ay > .fx.f1 { top: 10px; } .portal.hero-ay > .fx.f2 { top: 40%; }
.portal.hero-au > .fx { opacity: .9; }
.portal.hero-av > .fx.f2::before { height: 55%; }

/* AS radar: a sweep turning around the logo */
.hero-as .hero-cover { display: block; position: absolute; left: 50%; top: 122px; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--a-60), transparent 22%, transparent); animation: fx-spin 4s linear infinite;
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent); }
.hero-as .hero-cover::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 44px, var(--a-30) 45px 46px, transparent 47px 60px); animation: fx-spin 4s linear infinite reverse; }
.hero-as .orb.s104 { --s: 92px; }

/* AT equaliser: bars bouncing along the bottom */
.hero-at .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "logo name" "logo chips" "stats stats"; }
.hero-at .orb.s104 { --s: 70px; }
.hero-at .hero > .who { font-size: clamp(24px, 7vw, 34px); align-self: end; } .hero-at .hero > .chips { align-self: start; }
.hero-at .hero > .welcome { display: none; } .hero-at .hero > .h-stats { display: grid; }
.hero-at .hero-fx { display: block; }
.hero-at .hero-fx i { top: auto !important; bottom: 0; width: 5.2%; height: 64%; border-radius: 6px 6px 0 0; transform-origin: 50% 100%; opacity: .3;
  background: linear-gradient(to top, var(--a), var(--a2, var(--a))); animation: hx-eq 1.1s ease-in-out infinite alternate; }
.hero-at .hero-fx i:nth-child(1) { left: 1% !important; } .hero-at .hero-fx i:nth-child(2) { left: 8% !important; animation-duration: .8s; }
.hero-at .hero-fx i:nth-child(3) { left: 15% !important; animation-duration: 1.3s; } .hero-at .hero-fx i:nth-child(4) { left: 22% !important; animation-duration: .9s; }
.hero-at .hero-fx i:nth-child(5) { left: 29% !important; animation-duration: 1.2s; } .hero-at .hero-fx i:nth-child(6) { left: 36% !important; animation-duration: .7s; }
.hero-at .hero-fx i:nth-child(7) { left: 43% !important; animation-duration: 1s; } .hero-at .hero-fx i:nth-child(8) { left: 50% !important; animation-duration: 1.4s; }
.hero-at .hero-fx i:nth-child(9) { left: 57% !important; animation-duration: .85s; } .hero-at .hero-fx i:nth-child(10) { left: 64% !important; animation-duration: 1.15s; }
.hero-at .hero-fx i:nth-child(11) { left: 71% !important; animation-duration: .75s; } .hero-at .hero-fx i:nth-child(12) { left: 78% !important; animation-duration: 1.25s; }
.hero-at .hero-fx i:nth-child(13) { left: 85% !important; animation-duration: .95s; } .hero-at .hero-fx i:nth-child(14) { left: 92% !important; animation-duration: 1.05s; }
@keyframes hx-eq { from { transform: scaleY(.12); } to { transform: scaleY(1); } }

/* AX spinning border: colour chasing round the edge */
@property --hx-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.portal.hero-ax { border-color: transparent; }
.hero-ax::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 3px; pointer-events: none;
  background: conic-gradient(from var(--hx-ang), var(--a), var(--a2, #ff4fd8), #22d3ee, var(--a));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: hx-ang 4s linear infinite; }
@keyframes hx-ang { to { --hx-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .hero-at .hero-fx i, .hero-as .hero-cover, .hero-as .hero-cover::after, .hero-ax::before { animation: none !important; } }

/* ===== 2.8.40: 25 app opening screens ===== */
.vsplash > .fx { z-index: 0; }
.vsplash.light .vs-name { background-image: linear-gradient(100deg, #15121f 20%, var(--a) 45%, #15121f 70%); }
.vsplash.light .vs-bar { background: rgba(0,0,0,.1); }
/* backgrounds */
.sp-aurora { background: radial-gradient(120% 80% at 50% 0%, #0a2a30, #031012 60%, #010607); }
.sp-rain { background: linear-gradient(#0c1830, #03060c); }
.sp-underwater { background: radial-gradient(120% 90% at 50% 0%, #0b4a6e, #04253a 55%, #021019); }
.sp-fireflies { background: radial-gradient(120% 90% at 50% 100%, #0f2412, #040a05 70%); }
.sp-ocean { background: linear-gradient(#0c1a4a, #0b3a63 70%, #0e5a86); }
.sp-code { background: #000; }
.sp-lava { background: radial-gradient(100% 70% at 50% 50%, #2a0a12, #0a0204); }
.sp-hyperspace { background: radial-gradient(circle at 50% 50%, #0d0d2e, #02020a 70%); }
.sp-party { background: #fff7fb; }
.sp-blossom { background: linear-gradient(#fff1f6, #ffe4ef); }
.sp-campfire { background: radial-gradient(120% 70% at 50% 110%, #5a1f08, #1a0904 55%, #0b0503); }
.sp-nebula { background: #07041a; }
.sp-sonar { background: radial-gradient(circle at 50% 45%, #06302e, #021414 60%); }
.sp-synthwave { background: linear-gradient(#12031f, #3b0a4a 55%, #1a0633); }
.sp-sky { background: linear-gradient(#93c5fd, #dbeafe 70%, #eff6ff); }
.sp-meteors { background: radial-gradient(120% 80% at 70% 0%, #111836, #03040f 65%); }
.sp-circuit { background: radial-gradient(circle at 50% 45%, #06202a, #02080c 70%); }
.sp-brand { background: var(--grad); }
.sp-brand::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, #ffffff40, transparent 50%), radial-gradient(circle at 80% 90%, #0003, transparent 60%); }
.sp-brand .vs-name { background-image: linear-gradient(100deg, #fff 30%, #ffffffaa 50%, #fff 70%); }
.sp-brand .vs-bar i { background: #fff; }
.sp-midnight { background: radial-gradient(60% 40% at 50% 45%, var(--a-30), transparent 70%), #07060d; }
.sp-daylight { background: radial-gradient(70% 50% at 50% 40%, var(--a-12), transparent 70%), #fff; }
.sp-sunset { background: linear-gradient(#1e0b3a, #6b1d5c 55%, #e0602a 100%); }
.sp-sunset .vs-art { position: absolute; left: 50%; bottom: -18%; width: 90%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, #ffd27a, #fb923c 60%, transparent 72%); opacity: .9; }
.sp-spotlight { background: #050505; }
.sp-spotlight .vs-art { position: absolute; left: 50%; top: -10%; width: 90%; height: 75%; translate: -50% 0;
  background: linear-gradient(#ffffff38, #ffffff08 85%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); filter: blur(6px); }
.sp-spotlight .vs-art::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -8%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, #ffffff2a, transparent); }
.sp-paper { background: #f7f3ea; }
.sp-paper .vs-mid .orb .halo { display: none; }
.sp-frosted { background: radial-gradient(40% 30% at 22% 25%, var(--a-60), transparent 70%), radial-gradient(45% 35% at 80% 75%, var(--a2-45), transparent 70%), #0a0814; }
.sp-frosted .vs-mid { padding: 34px 30px; border-radius: 30px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 20px 50px -20px #000c; }
/* how the logo arrives */
.vsplash.in-rise .vs-mid .orb { animation: vs-rise 1s cubic-bezier(.2,.8,.2,1) both, vs-glow 2.4s 1s ease-in-out infinite; }
.vsplash.in-fade .vs-mid .orb { animation: vs-fadein 1.1s ease both, vs-glow 2.4s 1s ease-in-out infinite; }
.vsplash.in-drop .vs-mid .orb { animation: vs-drop 1s cubic-bezier(.3,1.5,.5,1) both, vs-glow 2.4s 1s ease-in-out infinite; }
.vsplash.in-zoom .vs-mid .orb { animation: vs-zoom .9s cubic-bezier(.2,.8,.2,1) both, vs-glow 2.4s 1s ease-in-out infinite; }
.vsplash.in-spin .vs-mid .orb { animation: vs-spin 1.1s cubic-bezier(.2,.8,.2,1) both, vs-glow 2.4s 1s ease-in-out infinite; }
.vsplash.in-flip .vs-mid .orb { animation: vs-flip 1s cubic-bezier(.2,.8,.2,1) both, vs-glow 2.4s 1s ease-in-out infinite; }
@keyframes vs-rise { from { opacity: 0; transform: translateY(60px) scale(.8); } }
@keyframes vs-fadein { from { opacity: 0; transform: scale(.94); } }
@keyframes vs-drop { from { opacity: 0; transform: translateY(-180px); } 60% { opacity: 1; } }
@keyframes vs-zoom { from { opacity: 0; transform: scale(2.4); filter: blur(10px); } }
@keyframes vs-spin { from { opacity: 0; transform: rotate(-360deg) scale(.2); } }
@keyframes vs-flip { from { opacity: 0; transform: perspective(500px) rotateY(100deg); } }
/* small copies for the picker and Branding */
.vsplash.mini { position: absolute; inset: 0; z-index: auto; cursor: inherit; transition: none; }
.sp-frame { position: relative; display: block; width: 360px; height: 640px; overflow: hidden; border-radius: 40px; zoom: .42; pointer-events: none;
  box-shadow: 0 0 0 6px rgba(var(--tint),.12); isolation: isolate; }
.splash-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.splash-pick { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 18px; border: 2px solid var(--line-2); background: rgba(var(--tint),.03); }
.splash-pick.on { border-color: var(--a); box-shadow: var(--glow); }
.splash-pick form { display: block; }
.sp-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.sp-btn .hp-name { align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 6px; padding: 2px 4px; font-weight: 700; font-size: 12.5px; }
.cursplash { display: flex; align-items: center; gap: 14px; }
.cursplash .sp-frame { zoom: .3; flex: none; }

/* ===== 2.8.42: 25 more home cards (18 moving, 7 still) ===== */
/* shared shapes */
.hero-bb .hero, .hero-be .hero, .hero-bl .hero, .hero-bn .hero, .hero-bp .hero, .hero-bq .hero, .hero-bw .hero, .hero-bh .hero, .hero-bo .hero, .hero-bt .hero {
  grid-template-columns: 1fr; grid-template-areas: "top" "logo" "name" "chips" "text"; justify-items: center; text-align: center; }
.hero-bb .hero > .toprow, .hero-be .hero > .toprow, .hero-bl .hero > .toprow, .hero-bn .hero > .toprow, .hero-bp .hero > .toprow, .hero-bq .hero > .toprow,
.hero-bw .hero > .toprow, .hero-bh .hero > .toprow, .hero-bo .hero > .toprow, .hero-bt .hero > .toprow { justify-self: stretch; }
.hero-bb .hero > .chips, .hero-be .hero > .chips, .hero-bl .hero > .chips, .hero-bn .hero > .chips, .hero-bp .hero > .chips, .hero-bq .hero > .chips,
.hero-bw .hero > .chips, .hero-bh .hero > .chips, .hero-bo .hero > .chips, .hero-bt .hero > .chips { justify-content: center; }
.hero-bb .orb.s104, .hero-be .orb.s104, .hero-bl .orb.s104, .hero-bn .orb.s104, .hero-bp .orb.s104, .hero-bq .orb.s104, .hero-bw .orb.s104, .hero-bh .orb.s104, .hero-bo .orb.s104 { --s: 96px; }

.hero-az .hero, .hero-bd .hero, .hero-bg .hero, .hero-bk .hero, .hero-bu .hero, .hero-bv .hero {
  grid-template-columns: auto 1fr; grid-template-areas: "top top" "logo name" "logo chips" "text text"; }
.hero-az .orb.s104, .hero-bd .orb.s104, .hero-bg .orb.s104, .hero-bk .orb.s104, .hero-bu .orb.s104, .hero-bv .orb.s104 { --s: 72px; }
.hero-az .hero > .who, .hero-bd .hero > .who, .hero-bg .hero > .who, .hero-bk .hero > .who, .hero-bu .hero > .who, .hero-bv .hero > .who { font-size: clamp(24px, 7vw, 36px); align-self: end; }
.hero-az .hero > .chips, .hero-bd .hero > .chips, .hero-bg .hero > .chips, .hero-bk .hero > .chips, .hero-bu .hero > .chips, .hero-bv .hero > .chips { align-self: start; }

.hero-ba .hero, .hero-bi .hero, .hero-bm .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "name name" "chips chips" "logo text"; }
.hero-ba .orb.s104, .hero-bi .orb.s104, .hero-bm .orb.s104 { --s: 70px; }

.hero-bc .hero, .hero-bf .hero, .hero-bx .hero { grid-template-columns: 1fr auto; grid-template-areas: "top top" "name name" "text logo" "chips logo"; }
.hero-bc .hero > .who, .hero-bf .hero > .who, .hero-bx .hero > .who { font-size: clamp(38px, 12vw, 64px); line-height: 1; }
.hero-bc .orb.s104, .hero-bf .orb.s104, .hero-bx .orb.s104 { --s: 64px; }

.hero-bj .hero, .hero-br .hero { grid-template-columns: 1fr auto; grid-template-areas: "top top" "name logo" "chips logo" "stats stats" "text text"; }
.hero-bj .orb.s104, .hero-br .orb.s104 { --s: 66px; }
.hero-bj .hero > .h-stats, .hero-br .hero > .h-stats { display: grid; }
.hero-bj .hero > .who, .hero-br .hero > .who { font-size: clamp(26px, 8vw, 40px); }

/* moving backgrounds (shared .fx) placed for a card */
.portal.hero-az > .fx.f1 { opacity: .32; }
.hero-az .hero-cover { display: block; position: absolute; inset: 0; background: radial-gradient(60% 80% at 15% 40%, rgba(var(--panel), .7), transparent 70%); }
.portal.hero-bf > .f1 { height: 46%; opacity: .6; } .portal.hero-bf > .f2 { width: 24%; left: 44%; bottom: 26%; opacity: .45; }
.portal.hero-be > .fx { top: 38%; }
.portal.hero-bk > .fx.f1 { --fxo: .22; }

/* BO typing bubble: three dots bouncing in a chat bubble next to the logo */
.hero-bo .hero-cover { display: block; position: absolute; left: 50%; top: 58px; margin-left: 38px; width: 62px; height: 38px; border-radius: 19px 19px 19px 6px;
  background: var(--a-20); border: 1px solid var(--a-45); box-shadow: 0 8px 22px -8px var(--a-60); animation: hx-bob 3s ease-in-out infinite; }
.hero-bo .hero-fx { display: block; }
.hero-bo .hero-fx i { display: none; }
.hero-bo .hero-fx i:nth-child(-n+3) { display: block; top: 75px !important; width: 8px; height: 8px; border-radius: 50%; background: var(--hi, #fff); animation: hx-dot 1.2s ease-in-out infinite; }
.hero-bo .hero-fx i:nth-child(1) { left: calc(50% + 53px) !important; }
.hero-bo .hero-fx i:nth-child(2) { left: calc(50% + 65px) !important; animation-delay: .15s !important; }
.hero-bo .hero-fx i:nth-child(3) { left: calc(50% + 77px) !important; animation-delay: .3s !important; }
@keyframes hx-dot { 0%, 70%, 100% { transform: translateY(0); opacity: .45; } 35% { transform: translateY(-5px); opacity: 1; } }
@keyframes hx-bob { 50% { transform: translateY(-4px); } }

/* BP breathing glow behind the logo */
.hero-bp .hero-cover { display: block; position: absolute; left: 50%; top: 116px; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--a-60), var(--a2-20) 55%, transparent 72%); animation: hx-breathe 4.5s ease-in-out infinite; }
@keyframes hx-breathe { 0%, 100% { transform: scale(.75); opacity: .55; } 50% { transform: scale(1.1); opacity: 1; } }

/* BQ sparkles twinkling round the card */
.hero-bq .hero-fx { display: block; }
.hero-bq .hero-fx i { width: 14px; height: 14px; background: var(--a2, #ff4fd8); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: hx-sparkle 2.8s ease-in-out infinite; }
.hero-bq .hero-fx i:nth-child(odd) { background: #fff; width: 10px; height: 10px; }
.hero-bq .hero-fx i:nth-child(3n) { background: var(--a); width: 18px; height: 18px; animation-duration: 3.6s; }
@keyframes hx-sparkle { 0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } }

/* BR underline: a thick colour bar under the name */
.hero-br .hero > .who { padding-bottom: 8px; border-bottom: 4px solid transparent; border-image: var(--grad) 1; }

/* BS big logo bleeding off the left edge */
.hero-bs .hero { grid-template-columns: 120px 1fr; grid-template-areas: "logo top" "logo name" "logo chips" "logo text"; column-gap: 18px; }
.hero-bs .hero > .h-logo { margin-left: -78px; align-self: center; }
.hero-bs .orb.s104 { --s: 190px; } .hero-bs .orb .halo { display: none; }
.hero-bs .hero > .who { font-size: clamp(24px, 7vw, 36px); }

/* BT two-tone: colour on top, logo sitting on the edge */
.hero-bt .hero-cover { display: block; position: absolute; left: 0; right: 0; top: 0; height: 118px; background: var(--grad); border-radius: 0 0 50% 50% / 0 0 26px 26px; }
.hero-bt .hero > .toprow .kicker { color: #fff; }
.hero-bt .hero > .h-logo { margin-top: 18px; }
.hero-bt .orb.s104 { --s: 100px; } .hero-bt .orb .ball { box-shadow: 0 0 0 5px var(--solid), var(--glow); } .hero-bt .orb .halo { display: none; }

/* BU speech bubble drawn inside the card */
.hero-bu .hero-cover { display: block; position: absolute; inset: 10px 10px 24px 10px; border-radius: 24px; border: 2px solid var(--a-45); background: var(--a-6); }
.hero-bu .hero-cover::after { content: ""; position: absolute; left: 36px; bottom: -17px; width: 26px; height: 16px; background: var(--a-45); clip-path: polygon(0 0, 100% 0, 0 100%); }
.hero-bu .portal-in { padding-bottom: 42px; }

/* BV gradient frame (still) */
.portal.hero-bv { border-color: transparent; }
.hero-bv::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 3px; pointer-events: none;
  background: linear-gradient(135deg, var(--a), var(--a2, #ff4fd8), #22d3ee);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* BW grid paper */
.hero-bw .hero-cover { display: block; position: absolute; inset: 0;
  background-image: linear-gradient(var(--a-12) 1px, transparent 1px), linear-gradient(90deg, var(--a-12) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask: radial-gradient(90% 80% at 50% 40%, #000 40%, transparent); mask: radial-gradient(90% 80% at 50% 40%, #000 40%, transparent); }

/* BX neon outline name (still) */
.hero-bx .who.gtext { background: none; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.6px var(--a);
  filter: drop-shadow(0 0 6px var(--a)) drop-shadow(0 0 16px var(--a-60)); }
.hero-bx .hero-cover { display: block; position: absolute; inset: 0; background: radial-gradient(80% 60% at 20% 30%, var(--a-12), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .hero-bo .hero-cover, .hero-bo .hero-fx i, .hero-bp .hero-cover, .hero-bq .hero-fx i { animation: none !important; } }

/* ===== 2.8.42: 25 more opening screens ===== */
.vs-art i { display: none; }
.sp-autumn { background: radial-gradient(120% 80% at 50% 0%, #3a1c08, #150904 55%, #0c0704); }
.sp-prism { background: #fbfaff; }
.sp-plasma { background: #05030c; }
.sp-premiere { background: radial-gradient(90% 40% at 50% 100%, #3a1020, transparent 70%), #070507; }
.sp-reef { background: linear-gradient(#0e7490, #0b4f5f 55%, #062a33); }
.sp-hive { background: radial-gradient(circle at 50% 45%, #241806, #0a0703 70%); }
.sp-stardust { background: radial-gradient(120% 90% at 50% 0%, #1b1b4a, #04040e 70%); }
.sp-silk { background: #fbf7fc; }
.sp-snowfall { --snow: rgba(255,255,255,.85); background: linear-gradient(#0b1a33, #030814); }
.sp-neon-rain { background: linear-gradient(#1a0322, #05010a); }
.sp-neon-rain > .fx { --a: #ff2d95; --a2: #f0abfc; }
.sp-lightspeed { background: radial-gradient(circle at 50% 50%, #2a0b4a, #07020f 70%); }
.sp-lightspeed > .fx { --a2: #c084fc; }
.sp-sakura-night { background: linear-gradient(#0b1030, #1e1036); }
.sp-mono { background: #000; }
.sp-mono .vs-mid .orb { filter: grayscale(1); }
.sp-mono .vs-name { background-image: linear-gradient(#fff, #fff); }
.sp-mono .vs-bar i { background: #fff; }
.sp-deep-sea { background: linear-gradient(#0c4a6e, #062540 40%, #020617 75%); }
.sp-candy { background: linear-gradient(135deg, #fbcfe8, #ddd6fe 50%, #bfdbfe); }
.sp-gradient { background: linear-gradient(120deg, var(--a), var(--a2), #22d3ee, var(--a)); background-size: 300% 300%; animation: hx-flow 8s ease infinite; }
.sp-gradient .vs-name { background-image: linear-gradient(100deg, #fff 30%, #ffffffaa 50%, #fff 70%); }
.sp-gradient .vs-bar i { background: #fff; }
/* where the logo sits (the middle of .vs-mid is a little below it) */
.vsplash { --logo-y: calc(50% - 42px); }
/* heartbeat: a pulse racing along a heart-monitor line */
.sp-heartbeat { background: radial-gradient(60% 40% at 50% 45%, var(--a-20), transparent 70%), #05070d; }
.sp-heartbeat .vs-art { position: absolute; left: 0; right: 0; top: 74%; height: 120px; translate: 0 -50%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='120' viewBox='0 0 360 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 H120 L134 60 L144 34 L156 96 L170 12 L182 104 L192 60 H360' fill='none' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/360px 120px repeat-x;
  background: linear-gradient(90deg, transparent 0 30%, var(--a) 44%, #fff 48%, transparent 50%) 0 0/200% 100%; animation: vs-ecg 1.8s linear infinite; }
.sp-heartbeat .vs-art::before { content: ""; position: absolute; inset: 0; background: var(--a-60); z-index: -1; }
.sp-heartbeat .vs-art { filter: drop-shadow(0 0 6px var(--a)); }
@keyframes vs-ecg { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* loading ring round the logo */
.sp-loading { background: radial-gradient(60% 40% at 50% 45%, var(--a-20), transparent 70%), #07060d; }
.sp-loading .vs-art { position: absolute; left: 50%; top: var(--logo-y); width: 184px; height: 184px; translate: -50% -50%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 25%, var(--a2) 60%, var(--a) 100%);
  -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 89% 97%, transparent 98%); animation: fx-spin 1.1s linear infinite; }
/* chat bubbles floating up */
.sp-chat { background: linear-gradient(#1a1033, #07060d); }
.sp-chat .vs-art { position: absolute; inset: 0; overflow: hidden; }
.sp-chat .vs-art i { display: block; position: absolute; bottom: -50px; width: 54px; height: 34px; border-radius: 17px 17px 17px 5px; opacity: 0;
  background: radial-gradient(circle at 30% 50%, #fffc 0 3px, transparent 3.5px), radial-gradient(circle at 50% 50%, #fffc 0 3px, transparent 3.5px),
    radial-gradient(circle at 70% 50%, #fffc 0 3px, transparent 3.5px), var(--a-30);
  border: 1px solid var(--a-45); animation: vs-chatup 8s linear infinite; }
.sp-chat .vs-art i:nth-child(even) { border-radius: 17px 17px 5px 17px; background-color: transparent; background-image: radial-gradient(circle at 30% 50%, #fffc 0 3px, transparent 3.5px), radial-gradient(circle at 50% 50%, #fffc 0 3px, transparent 3.5px), radial-gradient(circle at 70% 50%, #fffc 0 3px, transparent 3.5px), linear-gradient(var(--a2-45), var(--a2-45)); }
.sp-chat .vs-art i:nth-child(1) { left: 8%; animation-delay: 0s; } .sp-chat .vs-art i:nth-child(2) { left: 70%; animation-delay: -1.3s; }
.sp-chat .vs-art i:nth-child(3) { left: 30%; animation-delay: -2.6s; } .sp-chat .vs-art i:nth-child(4) { left: 82%; animation-delay: -3.9s; }
.sp-chat .vs-art i:nth-child(5) { left: 16%; animation-delay: -5.2s; } .sp-chat .vs-art i:nth-child(6) { left: 58%; animation-delay: -6.5s; }
.sp-chat .vs-art i:nth-child(7) { left: 44%; animation-delay: -4.5s; animation-duration: 11s; } .sp-chat .vs-art i:nth-child(8) { left: 4%; animation-delay: -8s; animation-duration: 10s; }
@keyframes vs-chatup { 0% { transform: translateY(0) scale(.8); opacity: 0; } 10% { opacity: .9; } 80% { opacity: .7; } 100% { transform: translateY(-720px) scale(1); opacity: 0; } }
/* orbit: little lights circling the logo */
.sp-orbit { background: radial-gradient(60% 40% at 50% 45%, var(--a-20), transparent 70%), #06050c; }
.sp-orbit .vs-art { position: absolute; left: 50%; top: var(--logo-y); width: 0; height: 0; }
.sp-orbit .vs-art i:nth-child(-n+5) { display: block; position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--a2); box-shadow: 0 0 12px var(--a2);
  animation: vs-orbit 4s linear infinite; }
.sp-orbit .vs-art i:nth-child(2) { background: #22d3ee; box-shadow: 0 0 12px #22d3ee; animation-duration: 6s; --r: 118px; }
.sp-orbit .vs-art i:nth-child(3) { background: #ffc15e; box-shadow: 0 0 12px #ffc15e; animation-duration: 8s; animation-direction: reverse; --r: 136px; }
.sp-orbit .vs-art i:nth-child(4) { width: 6px; height: 6px; margin: -3px; animation-duration: 5s; animation-direction: reverse; --r: 104px; }
.sp-orbit .vs-art i:nth-child(5) { width: 6px; height: 6px; margin: -3px; background: #fff; animation-duration: 9s; --r: 150px; }
@keyframes vs-orbit { from { transform: rotate(0deg) translateX(var(--r, 96px)); } to { transform: rotate(360deg) translateX(var(--r, 96px)); } }
/* equaliser bars */
.sp-equaliser { background: linear-gradient(#0d0820, #050309); }
.sp-equaliser .vs-art { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; }
.sp-equaliser .vs-art i { display: block; position: absolute; bottom: 0; width: 6.4%; height: 100%; border-radius: 6px 6px 0 0; transform-origin: 50% 100%; opacity: .55;
  background: linear-gradient(to top, var(--a), var(--a2)); animation: hx-eq 1s ease-in-out infinite alternate; }
.sp-equaliser .vs-art i:nth-child(1) { left: 1.5%; animation-duration: .8s; } .sp-equaliser .vs-art i:nth-child(2) { left: 9.7%; animation-duration: 1.2s; }
.sp-equaliser .vs-art i:nth-child(3) { left: 17.9%; animation-duration: .9s; } .sp-equaliser .vs-art i:nth-child(4) { left: 26.1%; animation-duration: 1.35s; }
.sp-equaliser .vs-art i:nth-child(5) { left: 34.3%; animation-duration: .7s; } .sp-equaliser .vs-art i:nth-child(6) { left: 42.5%; animation-duration: 1.1s; }
.sp-equaliser .vs-art i:nth-child(7) { left: 50.7%; animation-duration: .85s; } .sp-equaliser .vs-art i:nth-child(8) { left: 58.9%; animation-duration: 1.25s; }
.sp-equaliser .vs-art i:nth-child(9) { left: 67.1%; animation-duration: .95s; } .sp-equaliser .vs-art i:nth-child(10) { left: 75.3%; animation-duration: 1.15s; }
.sp-equaliser .vs-art i:nth-child(11) { left: 83.5%; animation-duration: .75s; } .sp-equaliser .vs-art i:nth-child(12) { left: 91.7%; animation-duration: 1.05s; }
/* glitch: scanlines and a jittery name */
.sp-glitch { background: #050508; }
.sp-glitch .vs-art { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px); }
.sp-glitch .vs-art::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px; background: linear-gradient(transparent, var(--a-20), transparent); animation: vs-scan 3s linear infinite; }
.sp-glitch .vs-name { text-shadow: 2px 0 #22d3ee, -2px 0 #ff4fd8; animation: vs-up .8s .35s both, vs-glitch 2.4s 1s steps(1) infinite; }
@keyframes vs-scan { from { transform: translateY(-100px); } to { transform: translateY(700px); } }
@keyframes vs-glitch { 0%, 86%, 100% { transform: none; } 88% { transform: translate(-3px, 1px) skewX(-8deg); } 91% { transform: translate(3px, -1px); } 94% { transform: translate(-1px, 0) skewX(6deg); } }
/* radar sweep behind the logo */
.sp-radar { background: radial-gradient(circle at 50% 45%, #04201a, #010604 70%); }
.sp-radar .vs-art { position: absolute; left: 50%; top: var(--logo-y); width: 320px; height: 320px; translate: -50% -50%; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--a-60), transparent 22%); -webkit-mask: radial-gradient(closest-side, #000 96%, transparent); animation: fx-spin 3s linear infinite; }
.sp-radar .vs-art::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 38px, var(--a-30) 39px 40px, transparent 41px 54px); }
/* forest: layered hills (still) */
.sp-forest { background: linear-gradient(#1b2b4a, #45506b 42%, #7a5a4a 58%, #0d1f16 60%); }
.sp-forest .vs-art { position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: radial-gradient(140% 50% at 50% 100%, #052e16 0 50%, transparent 50.5%), radial-gradient(90% 60% at 85% 100%, #14532d 0 50%, transparent 50.5%),
    radial-gradient(110% 70% at 15% 100%, #166534 0 50%, transparent 50.5%), radial-gradient(90% 80% at 60% 100%, #1f6f3f 0 50%, transparent 50.5%); }
/* mountains under a purple sky (still) */
.sp-mountains { background: linear-gradient(#150a2e, #4a1f63 55%, #d9467a 80%, #f59e0b); }
.sp-mountains .vs-art { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(#3b1f5c, #170b2a);
  clip-path: polygon(0 55%, 16% 22%, 30% 48%, 48% 6%, 64% 42%, 80% 18%, 100% 50%, 100% 100%, 0 100%); }
.sp-mountains .vs-art::before { content: ""; position: absolute; inset: 0; background: #0b0616; clip-path: polygon(0 82%, 20% 55%, 38% 78%, 58% 48%, 76% 76%, 100% 58%, 100% 100%, 0 100%); }

/* 2.8.51: touching the app's own screens (cards, tiles, menus, headings) no longer starts a text selection or the
   Copy / Web search popup. Message text, order details, emails, answers and everything you type in stay selectable. */
body[data-app] :is(.portal, .hero, .bento, .tile, .marquee, .staffbar, .appbanner, .dock, .sg-tabs, .subtabs, .lf-tabs,
                   .sg-hero, .sg-lead, .sg-card, .sec, .stat, .stats, .pill, .btn, .iconbtn, .toprow, .kicker, .chips,
                   .head, .msg-head, .msg-av, .msg-name, .lvl, summary.btn, nav, header, h1, h2, h3, label.chip, .check.chip),
body[data-app] :is(.portal, .hero, .bento, .tile, .marquee, .staffbar, .appbanner, .dock, .sg-tabs, .subtabs, .lf-tabs,
                   .sg-hero, .sg-lead, .sg-card, .sec, .stat, .stats, .pill, .btn, .iconbtn, .toprow, .kicker, .chips,
                   .head, .msg-head, .nav, nav, header) * {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
body[data-app] :is(input, textarea, select, [contenteditable], [contenteditable] *, .body, .body *, .sel, .sel *,
                   .kvs, .kvs *, .kv, .kv *, .copybox, .copybox *, .shop-delivery, .shop-delivery *, .note, .note *,
                   pre, code, .pe-addr, .alert, .alert *, .bubble .body, .doc, .doc *, .info-doc, .info-doc *) {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}
.rb-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
/* 2.8.68: reviews */
.rv-stars { display: inline-flex; gap: 1px; font-size: 16px; line-height: 1; color: color-mix(in oklab, var(--fg) 22%, transparent); }
.rv-stars i { font-style: normal; }
.rv-stars i.on { color: #FFC94D; text-shadow: 0 0 8px rgba(255, 201, 77, .35); }
.rv-stars.sm { font-size: 13px; }
.rv-sum { gap: 8px; align-items: center; }
.rv-sum > b, .rv-score > b { font-size: 26px; font-weight: 800; line-height: 1; }
.rv-list { display: grid; gap: 10px; }
.rv-item { display: grid; gap: 6px; padding: 12px; border-radius: var(--r-md); background: color-mix(in oklab, var(--fg) 4%, transparent); border: 1px solid var(--line); }
.rv-item .row { align-items: center; gap: 10px; min-width: 0; }
.rv-meta { gap: 8px; }
.rv-body { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 14px; }
.rv-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.rv-score { display: grid; justify-items: center; gap: 4px; }
.rv-score > b { font-size: 40px; }
.rv-bars { display: grid; gap: 4px; }
.rv-bars .row { gap: 8px; align-items: center; }
.rv-bars .itrack { flex: 1; }
.rv-bars .hint { min-width: 22px; font-variant-numeric: tabular-nums; }
.rv-pick { border: 0; margin: 0; padding: 0; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rv-pick legend { width: 100%; margin-bottom: 4px; float: left; }
.rv-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rv-pick label { font-size: 32px; line-height: 1; cursor: pointer; color: color-mix(in oklab, var(--fg) 22%, transparent); transition: color .15s, transform .15s; }
.rv-pick input:checked ~ label, .rv-pick label:hover, .rv-pick label:hover ~ label { color: #FFC94D; }
.rv-pick input:focus-visible + label { outline: 2px solid var(--a); outline-offset: 2px; border-radius: 6px; }
.rv-pick label:active { transform: scale(.9); }
/* 3.0: suggestion box */
.idea-list { display: grid; gap: 10px; }
.idea { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; }
.idea-vote button { display: grid; justify-items: center; gap: 2px; min-width: 48px; padding: 8px 6px; border-radius: var(--r-md); border: 1px solid var(--line-2);
  background: color-mix(in oklab, var(--fg) 4%, transparent); color: var(--fg); font: inherit; cursor: pointer; }
.idea-vote button b { font-size: 15px; font-variant-numeric: tabular-nums; }
.idea-vote button.on { background: color-mix(in oklab, var(--a) 22%, transparent); border-color: var(--a); color: var(--a); }
.idea-vote button:disabled { opacity: .6; cursor: default; }
.idea-main { display: grid; gap: 6px; min-width: 0; }
.idea-head { gap: 8px; align-items: center; }
.idea-title { font-size: 15px; overflow-wrap: anywhere; }
.idea-body, .idea-reply p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 14px; color: var(--mfg); }
.idea-meta { gap: 6px; align-items: center; }
.av.xs { width: 20px; height: 20px; font-size: 10px; }
.idea-reply { padding: 8px 10px; border-left: 3px solid var(--a); border-radius: 6px; background: color-mix(in oklab, var(--a) 8%, transparent); }
.idea-reply p { color: var(--fg); }
.idea-tools { gap: 8px; align-items: center; }
.st-planned .idea-st { background: color-mix(in oklab, #FFC94D 22%, transparent); color: #FFC94D; }
.st-done .idea-st { background: color-mix(in oklab, #4DFFB0 20%, transparent); color: #4DFFB0; }
.st-declined .idea-st { background: color-mix(in oklab, var(--fg) 10%, transparent); color: var(--mfg); }
.idea-new summary { list-style: none; cursor: pointer; gap: 10px; align-items: center; }
.idea-new summary::-webkit-details-marker { display: none; }
/* 3.0: skill questions on prizes */
.pz-skillset { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 12px 14px 14px; margin: 0; }
.pz-skillset legend { gap: 6px; align-items: center; padding: 0 6px; }
.pz-skill { display: grid; gap: 6px; justify-items: start; }
.pz-skill p { margin: 0; font-size: 15px; }
.pz-choices { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.pz-choices legend { margin-bottom: 6px; font-size: 13px; color: var(--mfg); }
.pz-choice { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line-2); cursor: pointer; }
.pz-choice:has(input:checked) { border-color: var(--a); background: color-mix(in oklab, var(--a) 14%, transparent); }
.pz-choice input { accent-color: var(--a); }
.pz-qedit { width: 100%; }
.pz-row { flex-wrap: wrap; }
/* 3.0: branding colour extras */
#intensity input[type=range] { width: 100%; accent-color: var(--a); }
#intensity .tag { margin-left: 6px; font-variant-numeric: tabular-nums; color: var(--a); }
#gradient .check { align-items: flex-start; }
#gradient input[type=color] { width: 46px; height: 32px; padding: 2px; }
.grad-preview { margin-top: 10px; height: 64px; border-radius: var(--r-md); background: var(--grad); display: grid; place-items: center; border: 1px solid var(--line-2); }
.grad-preview .btn { pointer-events: none; }
/* 3.0: hex code box next to colour pickers */
.hexin { width: 104px !important; flex: none; padding: 8px 10px !important; font: 600 13.5px ui-monospace, Menlo, monospace !important; letter-spacing: .04em; text-transform: uppercase; }
.hexin.bad { border-color: var(--bad, #ff5d7a) !important; }
.grad-preview { grid-auto-flow: column; gap: 14px; }
/* 3.0: home tile sizes (Branding -> Home tiles) */
html .bento > .tile[data-size="wide"] { grid-column: 1 / -1; }
html .bento > .tile[data-size="half"] { grid-column: auto / span 1; }
.tile-swipe { grid-column: 1 / -1; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tile-swipe::-webkit-scrollbar { display: none; }
.tile-swipe > .tile { flex: 0 0 min(78%, 320px); scroll-snap-align: start; min-width: 0; }
.tsz { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tsz-b { font: 600 12px var(--body); padding: 6px 10px; border-radius: 99px; border: 1px solid var(--line-2); background: rgba(var(--tint), .04); color: var(--mfg); cursor: pointer; }
.tsz-b.on { background: var(--a-20); border-color: var(--a); color: var(--fg); }
.tsz-item { align-items: flex-start; }
.tile-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: inherit; width: 100%; }
.tile-pair > .tile { min-width: 0; width: auto !important; margin: 0 !important; }
html .bento > .tile[data-size="half"] .tileart, .tile-pair > .tile .tileart { opacity: .5; }
html .bento > .tile[data-size="half"] { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; text-align: left; }
html .bento > .tile[data-size="half"] .tt { min-width: 0; width: 100%; }
html .bento > .tile[data-size="half"] .tl { font-size: 16px; overflow-wrap: anywhere; }
html .bento > .tile[data-size="half"] .ts { font-size: 12.5px; }
html .bento > .tile[data-size="half"] .arrow { display: none; }
html .bento > .tile[data-size="half"] .lockpill { font-size: 10.5px; white-space: normal; }
/* 3.0: FAQ folders show which roles they're for */
.for-roles { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.for-roles .chip { font-size: 11px; padding: 2px 8px 2px 6px; }
/* 3.0: the Dashboard's four counters (moved from the home screen) */
.statgrid.stat4 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.statgrid.stat4 .l { white-space: nowrap; }
@media (max-width: 440px) { .statgrid.stat4 .l .i { display: none; } .statgrid.stat4 .stat { padding: 11px 9px; } }
/* 3.0: "Your quick widgets" uses the same heading as the other home sections */
.whead > .wtitle { flex: 1; margin: 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--mfg); font-weight: 600; font-family: var(--body); line-height: 1.2; }
[data-layout="magazine"] .whead > .wtitle { font-family: var(--display); font-size: 15px; letter-spacing: .04em; text-transform: none; color: var(--fg); }
.tile.gamingtile .tilebg { background-image: url("/static/img/tile-gaming.svg"); }

/* ---------------- 3.1.27 text size (Profile -> Text size): chats, tickets, messages, stage and watch chats */
html[data-textsize="90"] { --ts: .9; }
html[data-textsize="115"] { --ts: 1.15; }
html[data-textsize="130"] { --ts: 1.3; }
html[data-textsize="150"] { --ts: 1.5; }
html[data-textsize="175"] { --ts: 1.75; }
html[data-textsize] .msg .bubble .body { font-size: calc(15px * var(--ts, 1)) !important; line-height: 1.45 !important; }
html[data-textsize] .msg.ann-msg .bubble .body { font-size: calc(15px * var(--ts, 1)) !important; }
html[data-textsize] .msg-head { font-size: calc(13px * var(--ts, 1)); }
html[data-textsize] .msg-head time { font-size: calc(11px * var(--ts, 1)); }
html[data-textsize] .msg .quote { font-size: calc(12px * var(--ts, 1)); }
html[data-textsize] .msg .react { font-size: calc(13px * var(--ts, 1)); }
html[data-textsize] .crow textarea { font-size: calc(15px * var(--ts, 1)) !important; min-height: calc(44px * max(1, var(--ts, 1))); }
html[data-textsize] .tr-chat li { font-size: calc(13.5px * var(--ts, 1)); }
html[data-textsize] .tr-chat li b { font-size: calc(11.5px * var(--ts, 1)); }
html[data-textsize] .tr-chat li.sys { font-size: calc(12.5px * var(--ts, 1)); }
html[data-textsize="150"] .bubble, html[data-textsize="175"] .bubble { max-width: 100%; }

/* the picker on the profile page, with a live preview */
.ts-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ts-pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; border: 2px solid var(--line); cursor: pointer; text-align: center; }
.ts-pick input { position: absolute; opacity: 0; pointer-events: none; }
.ts-pick b { font-size: 12px; }
.ts-pick:has(input:checked) { border-color: var(--a); background: var(--a-6); }
.ts-pick:has(input:focus-visible) { outline: 2px solid var(--a); outline-offset: 2px; }
.ts-aa { font-weight: 800; line-height: 1.1; }
.ts-aa[data-ts="90"] { font-size: 13px; } .ts-aa[data-ts="100"] { font-size: 15px; } .ts-aa[data-ts="115"] { font-size: 17px; }
.ts-aa[data-ts="130"] { font-size: 19.5px; } .ts-aa[data-ts="150"] { font-size: 22.5px; } .ts-aa[data-ts="175"] { font-size: 26px; }
.ts-preview { padding: 12px; border-radius: 16px; background: rgba(var(--tint), .04); }
.ts-bubble { --p: 1; display: inline-block; max-width: 100%; padding: 10px 14px; border-radius: 4px 18px 18px 18px; background: rgba(var(--tint), .07); border: 1px solid var(--line); }
.ts-name { font-size: calc(13px * var(--p)); margin-right: 6px; }
.ts-time { font-size: calc(11px * var(--p)); color: var(--dim); }
.ts-body { font-size: calc(15px * var(--p)); line-height: 1.45; margin-top: 3px; }
.ts-form:has(input[value="90"]:checked) .ts-bubble { --p: .9; }
.ts-form:has(input[value="115"]:checked) .ts-bubble { --p: 1.15; }
.ts-form:has(input[value="130"]:checked) .ts-bubble { --p: 1.3; }
.ts-form:has(input[value="150"]:checked) .ts-bubble { --p: 1.5; }
.ts-form:has(input[value="175"]:checked) .ts-bubble { --p: 1.75; }
/* 3.1.31 backups: restore button and guide */
.bk-restore-btn { list-style: none; display: inline-flex; cursor: pointer; }
.bk-restore-btn::-webkit-details-marker { display: none; }
.bk-guide h3 { font-size: 14.5px; margin: 6px 0 0; }
.bk-undo .row input { flex: 1 1 140px; min-width: 0; }
.alert.ok { border-color: color-mix(in oklab, var(--ok, #22c55e) 45%, transparent); }
/* 3.1.32 Live stage home tile */
.tile.stagetile .tile-live { position: absolute; top: 10px; right: 10px; z-index: 3; }
.tile.stagetile.live { box-shadow: 0 0 0 1.5px color-mix(in oklab, #ef4444 55%, transparent), var(--shadow); }
/* 3.1.36: things waiting to go with the message, each with an x */
.previews .pv { position: relative; flex: none; display: inline-flex; }
.previews .pv img, .previews .pv video { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line-2); background: rgba(var(--tint), .05); }
.previews .pv-l { position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; border-radius: 6px; background: rgba(0,0,0,.65); color: #fff; font: 700 9.5px var(--body); }
.previews .pv-x { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bg, #000);
  background: #e11d2e; color: #fff; font: 700 15px/1 var(--body); display: grid; place-items: center; padding: 0; cursor: pointer; }
.previews { padding-top: 8px; }
.rolechecks { display: flex; flex-wrap: wrap; gap: 6px; }
.rolechecks .has { opacity: .6; }
.em-change > summary { list-style: none; width: max-content; }
.em-change > summary::-webkit-details-marker { display: none; }
.em-change[open] > summary { margin-bottom: 4px; }
/* 3.1.53: payment providers */
.pp-left { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--a) 10%, transparent); border: 1px solid color-mix(in srgb, var(--a) 30%, transparent); }
.pp-left span { color: var(--mfg); font-size: 13px; }
.pp-left b { font-size: 20px; }
.pp-left.low { background: color-mix(in srgb, #ff5c7a 10%, transparent); border-color: color-mix(in srgb, #ff5c7a 35%, transparent); }
.paychoice { display: grid; gap: 10px; }
.paychoice form { margin: 0; }
.paychoice .btn { justify-content: center; width: 100%; max-width: 100%; box-sizing: border-box; white-space: normal; text-align: center; }
.paychoice .or { text-align: center; font-size: 12px; color: var(--mfg); }
/* 4.0: profiles */
.vtick { display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; border-radius: 50%; vertical-align: .05em;
  background: #2f9bff; color: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, #2f9bff 30%, transparent); }
.vtick .i { width: .62em; height: .62em; }
.vtick.lg { font-size: .7em; }
.msg-name .vtick, .vtick.sm { font-size: 13px; margin-left: 3px; }
.pv-bio { margin: 14px 0 0; white-space: pre-line; line-height: 1.5; }
.pv-socials { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pv-socials .chip { text-decoration: none; font-weight: 500; }
.pv-socials .chip b { color: var(--mfg); font-weight: 600; margin-right: 2px; }
.pv-acts { display: grid; gap: 10px; }
.pv-note { white-space: pre-line; }
a.msg-name, .msg-name[data-uid] { cursor: pointer; }
.pv-verified { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; color: #7cc4ff; font-weight: 600; }
/* 4.0: tickets */
.tk-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.tk-stats > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--s1, rgba(255,255,255,.04)); border: 1px solid var(--line, rgba(255,255,255,.08)); }
.tk-stats span { font-size: 12px; color: var(--mfg); }
.tk-stats b { font-size: 20px; }
.tk-stats small { font-size: 11px; color: var(--mfg); }
.tk-meta { gap: 6px; margin-top: 4px; }
.prio-urgent { background: rgba(255, 70, 90, .18) !important; color: #ff7b8d !important; }
.prio-high { background: rgba(255, 170, 60, .18) !important; color: #ffbb66 !important; }
.tk-assign { flex: none; margin: 0 0 4px; padding: 8px 12px; border-radius: 14px; background: var(--s1, rgba(255,255,255,.04)); border: 1px solid var(--line, rgba(255,255,255,.08)); }
.tk-assign > summary { list-style: none; cursor: pointer; gap: 8px; font-size: 13px; }
.tk-assign > summary::-webkit-details-marker { display: none; }
.tk-assign form { margin-top: 8px; gap: 8px; }
.tk-assign select { flex: 1; min-width: 0; }
/* 4.0: team to-do and rota */
.task { align-items: flex-start; }
.task.doing { border-color: color-mix(in srgb, var(--a) 45%, transparent); }
.task.late b { color: #ff9aa8; }
.task-notes { white-space: pre-line; margin: 4px 0 0; }
.task-btns { flex: none; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 46%; }
.done-t { text-decoration: line-through; opacity: .7; }
a.chip.on { background: var(--a); color: #fff; border-color: transparent; }
.rota-nav { align-items: center; gap: 8px; }
.rota { display: grid; gap: 8px; }
.rota.month { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.rday { padding: 10px 12px; border-radius: 14px; background: var(--s1, rgba(255,255,255,.04)); border: 1px solid var(--line, rgba(255,255,255,.08)); display: grid; gap: 6px; }
.rday > b { font-size: 13px; }
.rday.today { border-color: var(--a); }
.rday.empty { opacity: .65; }
.shift { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 8px; border-radius: 10px; background: color-mix(in srgb, var(--a) 12%, transparent); }
/* 4.0: memberships */
.ms-plan.hl { box-shadow: 0 0 0 2px var(--a); }
.ms-desc { white-space: pre-line; }
.ms-cancel { margin: -4px 0 6px 52px; }
details.ms-log { display: block; }
details.ms-log > summary { list-style: none; cursor: pointer; gap: 10px; }
details.ms-log > summary::-webkit-details-marker { display: none; }
details.ms-log.act { border-left: 3px solid #ffb74d; }
details.ms-log.pay { border-left: 3px solid var(--a); }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 420px) { .grid4 { grid-template-columns: repeat(2, 1fr); } }

/* 4.0.0 product drops */
.drop-cd { display: grid; gap: 4px; padding: 14px; border-radius: 16px; background: var(--glass2, rgba(255,255,255,.06)); border: 1px solid var(--line, rgba(255,255,255,.12)); text-align: center; }
.drop-cd .label { display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.drop-cd b[data-cdtext] { font-size: 1.9rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.shopcard.soon .shop-img { filter: saturate(.6); }
.shopcard .pill[data-dropcd] { font-variant-numeric: tabular-nums; }
.rolepicks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.drop-row summary { cursor: pointer; }
.drops-home { display: grid; gap: 8px; }
.drops-home a.item { text-decoration: none; color: inherit; }
.drops-home .pill { font-variant-numeric: tabular-nums; }

/* 4.0.0 view as a role */
.viewas-bar { position: sticky; top: 8px; z-index: 30; display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px;
  background: var(--warn, #f5a524); color: #1a1205; font-size: .92rem; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.viewas-bar .btn { background: #1a1205; color: #fff; }

/* 4.0.0 the User & Setup Guide, one tap away on every Dashboard tab */
.dhead .guide-pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 12px; border-radius: 99px; font-size: .8rem; font-weight: 600;
  color: inherit; text-decoration: none; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.dhead .guide-pill:hover { background: rgba(255,255,255,.14); }
.subtabs a .tb.soft { background: rgba(var(--tint, 255,255,255), .12); color: inherit; opacity: .85; font-variant-numeric: tabular-nums; }
.subtabs a.on .tb.soft { background: rgba(255,255,255,.25); opacity: 1; }

/* 4.0.2: Store features not switched on yet - only the owner sees them, with "Set up now" */
.tile.locked.setup { outline: 2px dashed rgba(255,255,255,.28); outline-offset: -2px; }
.tile .setup-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 800;
  background: linear-gradient(135deg, #ffd76a, #ff9f43); color: #2a1600; box-shadow: 0 6px 18px -6px rgba(255,170,60,.8); }
.tile .setup-pill .i { width: 12px; height: 12px; }
.tile .setup-only { display: block; font-size: 11px; opacity: .72; margin-top: 4px; }
/* the Store, one tap away in the Dashboard header (owner) */
.dhead .dhead-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dhead .dhead-pills .guide-pill { margin-top: 0; }
.dhead .store-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 99px; font-size: .8rem; font-weight: 800; text-decoration: none;
  background: linear-gradient(135deg, #ffd76a, #ff9f43); color: #2a1600; box-shadow: 0 6px 20px -8px rgba(255,170,60,.85); }
.dhead .store-pill:hover { filter: brightness(1.06); }

/* 4.0.4 the User & Setup Guide, read in the app */
.guide-acts { justify-content: flex-end; }
.guide-toc nav a { color: inherit; text-decoration: none; }
.guide-tp { font-weight: 700; display: block; padding: 4px 0; }
.guide-ts { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.guide-ts a { font-size: .82rem; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); opacity: .9; }
.guide-part { line-height: 1.6; scroll-margin-top: 12px; }
.guide-part .guide-h1 { font-size: 1.35rem; margin: 0 0 6px; }
.guide-sec { scroll-margin-top: 12px; }
.guide-sec h3 { font-size: 1.05rem; margin: 18px 0 6px; }
.guide-sec p { margin: 6px 0; }
.guide-sec ul, .guide-sec ol { margin: 6px 0; padding-left: 20px; display: grid; gap: 5px; }
.guide-sec code, .guide-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
.guide-code { white-space: pre-wrap; word-break: break-all; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1); }
.guide-note { margin: 8px 0; padding: 10px 12px; border-radius: 12px; border-left: 3px solid var(--a, #a35cff); background: rgba(255,255,255,.05); }
.guide-note.warn { border-left-color: var(--warn, #f5a524); }
.guide-tw { overflow-x: auto; margin: 8px 0; }
.guide-t { width: 100%; border-collapse: collapse; font-size: .9rem; }
.guide-t th, .guide-t td { text-align: left; vertical-align: top; padding: 7px 9px; border-bottom: 1px solid rgba(255,255,255,.08); }
.guide-t th { font-weight: 700; opacity: .85; }
.guide-top { display: inline-flex; gap: 4px; align-items: center; margin-top: 12px; }

/* ============ 4.2.0 Events, Crypto & Markets, Food & Drink, Book Club, Music Hub ============ */
.freepill { margin-bottom: 4px; }
.ev-row { text-decoration: none; color: inherit; }
.ev-row.cancelled { opacity: .6; }
.ev-date { width: 48px; flex: none; border-radius: 12px; text-align: center; padding: 6px 0; background: var(--grad); color: #fff; line-height: 1.05; }
.ev-date small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.ev-date b { font-size: 19px; }
.ev-date.big { width: 60px; } .ev-date.big b { font-size: 24px; }
.ev-left { color: var(--warn, #f5a524); font-weight: 700; }
.ev-desc { white-space: pre-wrap; line-height: 1.55; }
.ev-seg { display: flex; gap: 6px; }
.ev-seg > a, .ev-seg > button { flex: 1; text-align: center; padding: 10px 4px; border-radius: 12px; font-weight: 700; font-size: 13px; color: inherit; text-decoration: none;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); cursor: pointer; font-family: inherit; }
.ev-seg > .on { background: var(--grad); color: #fff; border-color: transparent; }
.ev-price { font-size: 1.5rem; }
.ev-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; }
.ev-person { display: grid; justify-items: center; gap: 4px; font-size: 12px; color: inherit; text-decoration: none; text-align: center; min-width: 0; }
.ev-person span { max-width: 100%; }
.ev-msg { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.06); }
.ev-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.ev-day { padding: 8px 0; border-radius: 10px; font-variant-numeric: tabular-nums; position: relative; font-size: 13px; }
.ev-day.out { opacity: .35; } .ev-day.today { outline: 2px solid var(--a); }
.ev-day.has { background: rgba(255,255,255,.07); font-weight: 800; }
.ev-day i { position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--a); }

.cx-curs { margin: 2px 0; }
.cx-row { text-decoration: none; color: inherit; padding: 6px 0; }
.cx-logo { width: 34px; height: 34px; border-radius: 50%; flex: none; object-fit: cover; background: rgba(255,255,255,.08); }
.cx-logo.letter { display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.cx-logo.big { width: 52px; height: 52px; }
.cx-spark { width: 70px; height: 26px; flex: none; }
.cx-spark path { fill: none; stroke-width: 2; } .cx-spark .up { stroke: #34d399; } .cx-spark .down { stroke: #f87171; }
.cx-price { text-align: right; min-width: 78px; } .cx-price b { display: block; font-variant-numeric: tabular-nums; }
.up { color: #34d399; } .down { color: #f87171; }
.cx-price span, .cx-chg { font-size: 12px; font-weight: 700; }
.cx-big { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cx-chart { width: 100%; height: 130px; }
.cx-chart .line { fill: none; stroke-width: 2.5; } .cx-chart .line.up { stroke: #34d399; } .cx-chart .line.down { stroke: #f87171; }
.cx-chart .area.up { fill: rgba(52,211,153,.16); } .cx-chart .area.down { fill: rgba(248,113,113,.14); }
.mk-stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mk-stat div { padding: 10px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); min-width: 0; }
.mk-stat b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; } .mk-stat span { font-size: 11px; opacity: .7; }
.cx-news { text-decoration: none; color: inherit; padding: 4px 0; }
.cx-note { text-align: center; }

.fd-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; padding: 16px; border-radius: 22px; overflow: hidden; color: #fff; text-decoration: none; background: #222; }
.fd-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fd-hero:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.75)); }
.fd-hero > * { position: relative; z-index: 1; } .fd-hero .pill { position: absolute; top: 12px; left: 12px; }
.fd-hero h2 { margin: 0 0 2px; }
.fd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.fd-tile { display: grid; gap: 6px; color: inherit; text-decoration: none; font-size: 13px; }
.fd-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: rgba(255,255,255,.06); }
.fd-dthumb { width: 76px; height: 76px; border-radius: 14px; object-fit: cover; flex: none; }
.fd-ing { padding: 0; margin: 0; list-style: none; }
.fd-ing li { padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.fd-ing label { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.fd-ing input:checked + span { text-decoration: line-through; opacity: .55; }
.fd-steps { padding-left: 20px; margin: 0; display: grid; gap: 10px; line-height: 1.55; }
.fd-photo { width: 100%; border-radius: 22px; max-height: 320px; object-fit: cover; }
.fd-serves select { width: auto; padding: 4px 8px; }
.fd-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fd-wall img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.fd-posts { display: grid; gap: 12px; }
.fd-post img { width: 100%; border-radius: 14px; max-height: 420px; object-fit: cover; margin-bottom: 8px; }


.mu-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.mu-cover { flex: 0 0 120px; display: grid; gap: 4px; color: inherit; text-decoration: none; scroll-snap-align: start; min-width: 0; font-size: 12.5px; }
.mu-cover img { width: 120px; height: 120px; border-radius: 14px; object-fit: cover; background: rgba(255,255,255,.06); }
.mu-cover span { opacity: .7; font-size: 11.5px; }
.mu-station, .mu-track { padding: 4px 0; }
.mu-playbtn { width: 42px; height: 42px; border-radius: 50%; border: 0; flex: none; display: grid; place-items: center; background: var(--grad); color: #fff; cursor: pointer; box-shadow: 0 8px 20px -8px var(--a); }
.mu-playbtn.sm { width: 34px; height: 34px; } .mu-playbtn.on { outline: 3px solid rgba(255,255,255,.35); }
.mu-slogo { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex: none; background: rgba(255,255,255,.06); }
.mu-rank { width: 20px; text-align: center; opacity: .7; }
.mu-now .mu-station { margin: 6px 0; }
.mu-player { position: sticky; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 20px; margin-top: 12px; }
.mu-eq { display: flex; gap: 3px; align-items: flex-end; height: 18px; }
.mu-eq i { width: 4px; height: 30%; border-radius: 2px; background: var(--a); }
.mu-player.playing .mu-eq i { animation: mu-eq 1s ease-in-out infinite alternate; }
.mu-player.playing .mu-eq i:nth-child(2) { animation-delay: -.3s; } .mu-player.playing .mu-eq i:nth-child(3) { animation-delay: -.6s; } .mu-player.playing .mu-eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes mu-eq { from { height: 20%; } to { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .mu-player.playing .mu-eq i { animation: none; height: 70%; } }
.mu-chat { max-height: 50vh; overflow-y: auto; display: grid; gap: 6px; }
.mu-msg { padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.05); word-break: break-word; }
.mu-ours { align-items: flex-start; }

/* 4.2.0 home screen editor: how the tiles under a heading are laid out */
html .bento.lay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible; }
html .bento.lay-list { display: grid; grid-template-columns: 1fr !important; overflow: visible; }
html .bento.lay-compact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; overflow: visible; }
html .bento.lay-list > .tile, html .bento.lay-grid > .tile, html .bento.lay-compact > .tile { grid-column: auto !important; width: auto !important; }
html .bento.lay-list > .tile { flex-direction: row; align-items: center; min-height: 0; }
html .bento.lay-compact > .tile { padding: 12px; min-height: 108px; flex-direction: column; align-items: flex-start; gap: 8px; }
html .bento.lay-compact > .tile .ts, html .bento.lay-compact > .tile .arrow { display: none; }
html .bento.lay-compact > .tile .tileart { opacity: .55; }  /* 4.2.8: tile pictures show in every layout (just softer here) */
html .bento.lay-compact > .tile .tl { font-size: 13.5px; }
html .bento.lay-compact > .tile .glyph { width: 38px; height: 38px; }
html .bento.lay-swipe { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; }
html .bento.lay-swipe::-webkit-scrollbar { display: none; }
html .bento.lay-swipe > .tile { flex: 0 0 78% !important; width: 78% !important; max-width: none !important; grid-column: auto !important; scroll-snap-align: start; }
.hl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hl-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.hl-item.hl-head { background: rgba(255,255,255,.1); border-color: var(--a); }
.hl-item.hl-sec { border-style: dashed; }
.hl-item.off { opacity: .45; } .hl-item.off .hl-main b, .hl-item.off .hl-main input { text-decoration: line-through; }
.hl-item.dragging { box-shadow: 0 12px 30px -10px rgba(0,0,0,.8); outline: 2px solid var(--a); position: relative; z-index: 2; }
.hl-grip { touch-action: none; cursor: grab; padding: 6px 2px; opacity: .8; }
.hl-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; flex: 1 1 180px; }
.hl-main input, .hl-main select { width: auto; flex: 1 1 140px; padding: 6px 8px; min-width: 0; }
.hl-kind { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; width: 100%; }
.hl-btns { display: flex; gap: 2px; flex: none; margin-left: auto; }
.hl-save { padding: 10px; border-radius: 18px; background: var(--card, rgba(20,16,32,.92)); backdrop-filter: blur(10px); position: sticky; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 5; }

/* 4.2.1 home screen: Big square tiles and the two "feature" layouts (a big tile with two stacked beside it) */
html .bento.lay-grid { grid-auto-flow: row dense; grid-auto-rows: minmax(96px, auto); }
html .bento.lay-feature-l, html .bento.lay-feature-r { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-flow: row dense;
  grid-auto-rows: minmax(96px, auto); gap: 12px; overflow: visible; }
html .bento.lay-feature-l > .tile, html .bento.lay-feature-r > .tile { grid-column: auto !important; width: auto !important; min-height: 96px; padding: 12px;
  flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; }
html .bento.lay-feature-l > .tile .ts, html .bento.lay-feature-r > .tile .ts,
html .bento.lay-feature-l > .tile .arrow, html .bento.lay-feature-r > .tile .arrow { display: none; }
html .bento.lay-feature-l > .tile .tl, html .bento.lay-feature-r > .tile .tl { font-size: 14.5px; overflow-wrap: anywhere; }
html .bento.lay-feature-l > .tile .glyph, html .bento.lay-feature-r > .tile .glyph { width: 38px; height: 38px; }
html .bento.lay-feature-l > .tile .tileart, html .bento.lay-feature-r > .tile .tileart { opacity: .45; }
html .bento.lay-feature-l > .tile:nth-child(3n+1), html .bento.lay-feature-r > .tile:nth-child(3n+1) { grid-row: span 2; min-height: 204px; justify-content: flex-end; }
html .bento.lay-feature-r > .tile:nth-child(3n+1) { grid-column: 2 !important; }
html .bento.lay-feature-l > .tile:nth-child(3n+1) .ts, html .bento.lay-feature-r > .tile:nth-child(3n+1) .ts { display: block; }
html .bento.lay-feature-l > .tile:nth-child(3n+1) .tl, html .bento.lay-feature-r > .tile:nth-child(3n+1) .tl { font-size: 19px; }
html .bento.lay-feature-l > .tile:nth-child(3n+1) .glyph, html .bento.lay-feature-r > .tile:nth-child(3n+1) .glyph { width: 52px; height: 52px; }
html .bento.lay-feature-l > .tile:nth-child(3n+1) .tileart, html .bento.lay-feature-r > .tile:nth-child(3n+1) .tileart { opacity: .9; }

/* the editor's live preview */
.hl-preview { position: sticky; top: 8px; z-index: 4; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: var(--bg, #0b0a14);
  box-shadow: 0 16px 40px -18px rgba(0,0,0,.9); }
.hl-preview iframe { display: block; width: 100%; height: 38vh; min-height: 260px; border: 0; background: transparent; }
.hl-preview .hl-pbar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12px; opacity: .8; }
.hl-preview.loading .hl-pbar::after { content: "Updating…"; margin-left: auto; }
.hl-preview.small iframe { height: 0; min-height: 0; }
@media (min-width: 900px) { .hl-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: start; } .hl-preview iframe { height: 78vh; } }

body.hl-dragging .hl-preview iframe { pointer-events: none; }  /* the drag keeps going when the finger passes over the preview */
body.hl-dragging { user-select: none; -webkit-user-select: none; }
/* 4.2.1: home editor preview: no dock, menus or prompts inside the frame */
body[data-hlprev] .dock, body[data-hlprev] .side, body[data-hlprev] .pvbar, body[data-hlprev] .viewas-bar, body[data-hlprev] .vc-foot { display: none !important; }
body[data-hlprev] .main { padding-bottom: 16px !important; margin-left: 0 !important; }
body[data-hlprev] .shell { display: block; }

/* 4.2.2: a Big square with the next two tiles stacked beside it (its own little block, lay-trio-l / lay-trio-r) */
html .bento.lay-trio-l, html .bento.lay-trio-r { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: minmax(100px, auto) minmax(100px, auto); grid-auto-flow: row; }
html .bento:is(.lay-trio-l, .lay-trio-r) > .tile { width: auto !important; min-height: 100px; padding: 12px; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px; }
html .bento:is(.lay-trio-l, .lay-trio-r) > .tile:first-child { grid-row: 1 / span 2; min-height: 214px; gap: 10px; }
html .bento.lay-trio-l > .tile:first-child, html .bento.lay-trio-r > .tile:not(:first-child) { grid-column: 1 !important; }
html .bento.lay-trio-r > .tile:first-child, html .bento.lay-trio-l > .tile:not(:first-child) { grid-column: 2 !important; }
html .bento:is(.lay-trio-l, .lay-trio-r) > .tile:nth-child(2) { grid-row: 1; }
html .bento:is(.lay-trio-l, .lay-trio-r) > .tile:nth-child(3) { grid-row: 2; }
html .bento:is(.lay-trio-l, .lay-trio-r) > .tile:nth-child(2):last-child { grid-row: 1 / span 2; }
html .bento:is(.lay-trio-l, .lay-trio-r) > .tile:only-child { grid-column: 1 / -1 !important; }
html .bento:is(.lay-trio-l, .lay-trio-r) > .tile:first-child .tl { font-size: 19px; overflow-wrap: anywhere; }
html .bento:is(.lay-trio-l, .lay-trio-r) > .tile:first-child .glyph { width: 52px; height: 52px; }
html .bento:is(.lay-trio-l, .lay-trio-r) > .tile .arrow, html .bento:is(.lay-trio-l, .lay-trio-r) > .tile:not(:first-child) .ts { display: none; }
html .bento:is(.lay-trio-l, .lay-trio-r) > .tile:not(:first-child) .tl { font-size: 14.5px; overflow-wrap: anywhere; }
html .bento:is(.lay-trio-l, .lay-trio-r) > .tile:not(:first-child) .glyph { width: 36px; height: 36px; }
html .bento:is(.lay-trio-l, .lay-trio-r) > .tile:not(:first-child) .tileart { opacity: .45; }

/* 4.2.2: the home screen editor, "On the screen" */
.hl-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); width: max-content; max-width: 100%; margin-bottom: 12px; }
.hl-tabs button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: inherit; font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: 999px; opacity: .7; cursor: pointer; }
.hl-tabs button.on { background: rgba(255,255,255,.14); box-shadow: 0 0 0 1.5px var(--a) inset; opacity: 1; }
.hl-wrap[data-mode="screen"] { display: block; }
.hl-wrap[data-mode="screen"] .hl-listcard, .hl-wrap[data-mode="screen"] [data-hlshrink], .hl-wrap[data-mode="screen"] .hl-listnote { display: none; }
.hl-wrap[data-mode="list"] .hl-howto { display: none; }
.hl-wrap[data-mode="screen"] .hl-pbar { font-size: 13px; opacity: 1; padding: 10px 14px; line-height: 1.4; }
.hl-wrap[data-mode="screen"] .hl-preview.loading .hl-pbar::after { content: none; }
.hl-preview.loading iframe { opacity: .85; transition: opacity .15s; }
.hl-hidden { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 440px; margin: 10px auto 0; }
.hl-hidden[hidden] { display: none; }
.hl-hidden .chip { border: 1px dashed rgba(255,255,255,.3); background: rgba(255,255,255,.05); color: inherit; font: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.hl-sheet { position: fixed; left: 8px; right: 8px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 60; max-width: 520px; margin: 0 auto; padding: 14px; border-radius: 22px;
  background: var(--card, rgba(20,16,32,.96)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 -10px 40px -10px rgba(0,0,0,.7); display: grid; gap: 10px; max-height: 46dvh; overflow: auto; }
.hl-sheet[hidden] { display: none; }
.hl-sheet .hl-sname { display: block; font-size: 16px; }
.hl-sheet { gap: 8px; padding: 12px; }
.hl-slabel { margin: 0; font-size: 12px; opacity: .7; }
.hl-opts { display: grid; grid-auto-flow: column; grid-auto-columns: 92px; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.hl-opts > .hl-opt { scroll-snap-align: start; }
.hl-opt { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 5px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
  color: inherit; font: inherit; font-size: 11.5px; line-height: 1.25; text-align: center; cursor: pointer; }
.hl-opt.on { border-color: var(--a); background: rgba(255,255,255,.1); box-shadow: 0 0 0 1px var(--a) inset; }
.hl-pic { width: 38px; height: 38px; }
.hl-pic rect.m { fill: var(--a); }
.hl-pic rect.o { fill: currentColor; opacity: .28; }
.hl-sact { display: flex; flex-wrap: wrap; gap: 6px; }
body.hl-sheeton .hl-save { visibility: hidden; }
/* inside the screen */
body[data-hlprev] [data-ak] { cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
body[data-hlprev] .arr-blk { display: block; position: relative; border-radius: 18px; }
body[data-hlprev] .arr-blk:not(:has(*))::before { content: attr(data-al) " · shows when there is one"; display: block; padding: 12px 14px; margin: 6px 0; border: 1px dashed rgba(255,255,255,.25); border-radius: 14px; font-size: 13px; opacity: .65; }
body[data-hlprev] .arr-sel { outline: 3px solid var(--a) !important; outline-offset: 3px; }
body[data-hlprev] .arr-lift { opacity: .3; }
body[data-hlprev] .arr-ghost { position: fixed !important; z-index: 9999; pointer-events: none; margin: 0 !important; transform: scale(.94) rotate(-1.5deg); box-shadow: 0 24px 50px -12px rgba(0,0,0,.9); opacity: .95; }
body[data-hlprev] .arr-to-top { box-shadow: 0 -6px 0 0 var(--a) !important; }
body[data-hlprev] .arr-to-bottom { box-shadow: 0 6px 0 0 var(--a) !important; }
body[data-hlprev] .arr-to-left { box-shadow: -6px 0 0 0 var(--a) !important; }
body[data-hlprev] .arr-to-right { box-shadow: 6px 0 0 0 var(--a) !important; }
body.arr-dragging { overscroll-behavior: none; }

/* 4.2.3: "On the screen" fills the whole screen and the page never scrolls (no more jumping about) */
.hl-top { display: none; }
body.hl-full { overflow: hidden; overscroll-behavior: none; }
body.hl-full .dock, body.hl-full .side { display: none !important; }
.hl-wrap[data-mode="screen"] { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; gap: 8px; margin: 0;
  padding: calc(8px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom)); background: var(--bg, #0b0a14); }
.hl-wrap[data-mode="screen"] > * { width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; }
.hl-wrap[data-mode="screen"] .hl-top { display: flex; align-items: center; gap: 8px; flex: none; font-size: 16px; }
.hl-wrap[data-mode="screen"] .hl-preview { position: relative; top: auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.hl-wrap[data-mode="screen"] .hl-pbar { flex: none; padding: 8px 12px; font-size: 12.5px; }
.hl-preview.loading::after { content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 40%; background: var(--a); animation: hlload 1s linear infinite; }
@keyframes hlload { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.hl-wrap[data-mode="screen"] .hl-preview.loading iframe { opacity: 1; }
.hl-wrap[data-mode="screen"] .hl-hidden { flex: none; flex-wrap: nowrap; overflow-x: auto; margin-top: 0; padding-bottom: 2px; }
.hl-wrap[data-mode="screen"] .hl-hidden .hint, .hl-wrap[data-mode="screen"] .hl-hidden .chip { flex: none; white-space: nowrap; }
.hl-wrap[data-mode="screen"] > form { flex: none; gap: 0; }
.hl-wrap[data-mode="screen"] .hl-save { position: static; padding: 0; background: none; backdrop-filter: none; flex-wrap: nowrap; }
.hl-wrap[data-mode="screen"] .hl-save .btn { flex: 1 1 0; padding-left: 8px; padding-right: 8px; }
body.hl-full .hl-sheet { bottom: calc(66px + env(safe-area-inset-bottom)); }
.hl-stage { position: relative; height: 38vh; min-height: 260px; }
.hl-preview.small .hl-stage { height: 0; min-height: 0; overflow: hidden; }
@media (min-width: 900px) { .hl-stage { height: 78vh; } }
.hl-wrap[data-mode="screen"] .hl-stage { flex: 1 1 auto; height: auto; min-height: 0; }
.hl-stage > iframe { position: absolute; inset: 0; width: 100%; height: 100% !important; min-height: 0 !important; z-index: 1; }
.hl-stage > iframe.hl-next { opacity: 0; pointer-events: none; z-index: 0; }
body[data-hlprev] [data-appbanner], body[data-hlprev] .appbanner, body[data-hlprev] [data-pushask] { display: none !important; }
/* 4.2.4: the editor sizes the screen itself (see fit() in app.js), so a look's own CSS can't squash it */
.hl-wrap[data-mode="screen"] .hl-preview { flex: none !important; display: block !important; height: auto !important; }
.hl-wrap[data-mode="screen"] .hl-stage { flex: none !important; min-height: 240px !important; }
.hl-stage { position: relative !important; overflow: hidden; }
.hl-stage > iframe { display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-height: none !important; border: 0 !important; transform: none !important; }
/* 4.2.6: the home screen editor's plain drawing (no colours, glass or animation, so it's smooth on any phone) */
.hl-howto { margin: 0; font-size: 13px; line-height: 1.4; opacity: .85; }
.hl-wrap[data-mode="list"] .hl-howto, .hl-wrap[data-mode="list"] .hl-canvas, .hl-wrap[data-mode="list"] .hl-hidden { display: none !important; }
.hl-canvas { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border-radius: 18px; padding: 10px;
  background: #121018; border: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 8px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; color: #eceaf4; }
.hl-wrap[data-mode="screen"] .hl-canvas { flex: none; }
.cv-card { flex: none; height: 54px; border-radius: 12px; display: grid; place-items: center; font-size: 12px; color: rgba(255,255,255,.45); border: 1px dashed rgba(255,255,255,.18); }
.cv-head { flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 8px 4px 2px; color: rgba(255,255,255,.7); border-radius: 8px; cursor: pointer; }
.cv-sec { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; font-size: 13px; color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.22); cursor: pointer; }
.cv-sec .i { width: 14px; height: 14px; opacity: .6; }
.cv-grid { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; grid-auto-flow: row dense; }
.cv-grid.cv-list { grid-template-columns: minmax(0, 1fr); }
.cv-grid.cv-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cv-grid.cv-swipe { grid-auto-flow: column; grid-auto-columns: 40%; grid-template-columns: none; overflow-x: auto; }
.cv-tile { position: relative; min-height: 58px; padding: 10px; border-radius: 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; cursor: pointer;
  background: #221d30; border: 1px solid rgba(255,255,255,.14); font-size: 13px; font-weight: 600; line-height: 1.2; min-width: 0; }
.cv-tile .i { width: 20px; height: 20px; color: var(--a, #b06cff); flex: none; }
.cv-tile .cv-name { overflow-wrap: anywhere; }
.cv-grid.cv-auto > .cv-tile[data-long], .cv-grid > .cv-tile[data-size="wide"] { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; min-height: 50px; }
.cv-grid.cv-list > .cv-tile { flex-direction: row; align-items: center; justify-content: flex-start; min-height: 50px; }
.cv-grid > .cv-tile[data-size="half"] { grid-column: auto / span 1; }
.cv-grid.cv-feature-l > .cv-tile:nth-child(3n+1), .cv-grid.cv-feature-r > .cv-tile:nth-child(3n+1) { grid-row: span 2; min-height: 124px; }
.cv-grid.cv-feature-r > .cv-tile:nth-child(3n+1) { grid-column: 2; }
.cv-grid.cv-trio-l, .cv-grid.cv-trio-r { grid-auto-flow: row; grid-template-rows: minmax(58px, auto) minmax(58px, auto); }
.cv-grid:is(.cv-trio-l, .cv-trio-r) > .cv-tile:first-child { grid-row: 1 / span 2; min-height: 124px; font-size: 15px; }
.cv-grid:is(.cv-trio-l, .cv-trio-r) > .cv-tile:first-child .i { width: 28px; height: 28px; }
.cv-grid.cv-trio-l > .cv-tile:first-child, .cv-grid.cv-trio-r > .cv-tile:not(:first-child) { grid-column: 1; }
.cv-grid.cv-trio-r > .cv-tile:first-child, .cv-grid.cv-trio-l > .cv-tile:not(:first-child) { grid-column: 2; }
.cv-grid:is(.cv-trio-l, .cv-trio-r) > .cv-tile:nth-child(2) { grid-row: 1; }
.cv-grid:is(.cv-trio-l, .cv-trio-r) > .cv-tile:nth-child(3) { grid-row: 2; }
.cv-grid:is(.cv-trio-l, .cv-trio-r) > .cv-tile:nth-child(2):last-child { grid-row: 1 / span 2; }
.cv-grid:is(.cv-trio-l, .cv-trio-r) > .cv-tile:only-child { grid-column: 1 / -1; }
.cv-tile.cv-off { opacity: .5; border-style: dashed; }
.cv-badge { position: absolute; top: 6px; right: 6px; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.12); }
.hl-canvas .cv-sel { outline: 2.5px solid var(--a, #b06cff); outline-offset: 2px; }
.hl-canvas .cv-lift { opacity: .25; }
.cv-ghost { position: fixed; z-index: 9999; pointer-events: none; margin: 0; opacity: .95; transform: scale(1.04); box-shadow: 0 16px 34px -8px rgba(0,0,0,.85); color: #eceaf4; }
.hl-canvas .cv-to-top { box-shadow: 0 -4px 0 0 var(--a, #b06cff); }
.hl-canvas .cv-to-bottom { box-shadow: 0 4px 0 0 var(--a, #b06cff); }
.hl-canvas .cv-to-left { box-shadow: -4px 0 0 0 var(--a, #b06cff); }
.hl-canvas .cv-to-right { box-shadow: 4px 0 0 0 var(--a, #b06cff); }
body.cv-dragging, body.cv-dragging * { cursor: grabbing !important; }
/* 4.2.9: rename a tile from the home screen editor */
.hl-tname { display: grid; gap: 4px; font-size: 12px; opacity: .9; }
.hl-tname[hidden] { display: none; }
.hl-tname input { width: 100%; }
.hl-main [data-tname] { flex: 1 1 140px; }
/* 4.2.10: menu tiles (a panel of tiles) and the top card's menu */
.menusheet .sb { padding-top: 4px; }
.menusheet .menu-bento { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; margin: 0; overflow: visible; }
.menusheet .menu-bento.lay-list { grid-template-columns: minmax(0, 1fr) !important; }
.menusheet .menu-bento > .tile { grid-column: auto !important; grid-row: auto !important; width: auto !important; min-height: 96px; padding: 12px; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px; }
.menusheet .menu-bento.lay-list > .tile { min-height: 58px; flex-direction: row; align-items: center; justify-content: flex-start; }
.menusheet .menu-bento > .tile .tl { font-size: 13.5px; overflow-wrap: anywhere; }
.menusheet .menu-bento:not(.lay-list) > .tile :is(.ts, .arrow) { display: none; }
.menusheet .menu-bento > .tile .glyph { width: 38px; height: 38px; }
.menusheet .menu-bento > .tile .tileart { opacity: .5; }
.sheet-bg.menuside { place-items: stretch end; padding: 0; }
.sheet-bg.menuside .sheet { width: min(340px, 84vw); max-width: none; max-height: none; height: 100%; border-radius: var(--r-2xl) 0 0 var(--r-2xl); padding-bottom: env(safe-area-inset-bottom); }
.portal .toprow .hero-menubtn { margin-left: auto; }
.portal .toprow .hero-menubtn + .iconbtn { margin-left: 8px; }
.tile.menutile .tilefx .i { opacity: .9; }
/* 4.2.10: the top card's menu button stays on the card design that hides its corner buttons */
.hero-e .hero > .toprow .iconbtn.hero-menubtn { display: inline-grid; }
/* 4.2.10: menus in the home screen editor */
.hl-inrow { display: grid; gap: 6px; }
.hl-inrow[hidden] { display: none; }
.hl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hl-chips .chip { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: inherit; font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 11px; border-radius: 999px; cursor: pointer; }
.hl-chips .chip.on { border-color: var(--a); background: rgba(255,255,255,.14); box-shadow: 0 0 0 1px var(--a) inset; }
.hl-chips .hl-iconchip { padding: 7px; display: grid; place-items: center; }
.hl-chips .hl-iconchip .i { width: 18px; height: 18px; }
.hl-inside { display: grid; gap: 6px; }
.hl-inrowitem { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.05); font-size: 13.5px; font-weight: 600; }
.hl-inrowitem .chip { border: 1px solid rgba(255,255,255,.18); background: none; color: inherit; font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.hl-sheet .hint { margin: 0; font-size: 12px; }
.cv-card { height: auto !important; min-height: 54px; display: flex !important; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; cursor: pointer; }
.cv-cardmenu { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--a, #b06cff); color: #eceaf4; font-size: 11.5px; font-weight: 700; }
.cv-cardmenu .i { width: 14px; height: 14px; }
.cv-cardhint { font-size: 11px; opacity: .7; }
.cv-tile.cv-menu { border-style: dashed; border-color: var(--a, #b06cff); }
.cv-inbadge { background: rgba(255,255,255,.16); }
.hl-canvas .cv-into { outline: 3px dashed var(--a, #b06cff); outline-offset: 2px; background: #2f2545; }
/* 4.2.10: smaller quick widgets (Edit home screen -> Quick widgets) */
html .wbox.wsz-small .wrow { grid-auto-columns: calc(33.333% - 6px); gap: 8px; }
html .wbox.wsz-small .wgt { min-height: 0; padding: 9px 10px; gap: 3px; }
html .wbox.wsz-small .wgt :is(.wrows, .sub, .wtext, .wpill, .wbar) { display: none; }
html .wbox.wsz-small .wgt .big { font-size: 15px; line-height: 1.15; }
html .wbox.wsz-small .wgt .wh { font-size: 10px; }
html .wbox:is(.wsz-small, .wsz-slim) .whead { margin-bottom: 6px; }
html .wbox:is(.wsz-small, .wsz-slim) .wtitle { font-size: 11px; }
html .wbox.wsz-slim .wrow { grid-auto-columns: max-content; gap: 8px; }
html .wbox.wsz-slim .wgt { flex-direction: row; align-items: center; min-height: 0; padding: 7px 12px; gap: 8px; border-radius: 999px; }
html .wbox.wsz-slim .wgt :is(.wrows, .sub, .wtext, .wpill, .wbar) { display: none; }
html .wbox.wsz-slim .wgt .wh { font-size: 11px; gap: 6px; }
html .wbox.wsz-slim .wgt .big { font-size: 13px; line-height: 1; white-space: nowrap; }
html .wbox.wsz-slim .wgt .wdot { position: static; }
.cv-sec[data-wsize="small"] { padding: 9px 12px; }
.cv-sec[data-wsize="slim"] { padding: 6px 12px; border-radius: 999px; }
html .wbox.wsz-small .wgt .wtext { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.25; }
/* 4.2.11: tiles inside a menu panel always sit in its grid, whatever size they have on the home screen */
html .sheet .bento.menu-bento > .tile, html .sheet .bento.menu-bento > .tile[data-size], html .sheet .bento.menu-bento > .tile.wide { grid-column: auto !important; grid-row: auto !important; width: auto !important; max-width: none !important; flex: none !important; }
html .sheet .bento.menu-bento:not(.lay-list) > .tile { flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; min-height: 104px !important; }
html .sheet .bento.menu-bento:not(.lay-list) > .tile .tt { width: 100%; }
.hl-inrowitem .hl-iconchip { border: 1px solid rgba(255,255,255,.18); background: none; color: inherit; border-radius: 999px; padding: 5px; display: grid; place-items: center; cursor: pointer; }
.hl-inrowitem .hl-iconchip[disabled] { opacity: .3; }
.hl-inrowitem .hl-iconchip .i { width: 14px; height: 14px; }
.hl-inside > .hl-slabel { margin-top: 6px; }
.hl-inside .hl-chips .chip { font-size: 12px; padding: 6px 10px; }
.hl-onhome { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; opacity: .9; }
.hl-onhome input { width: auto; }
/* 4.2.12: a menu's panel is a list of long rows, like a menu */
html .sheet .bento.menu-bento.lay-list { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px; }
html .sheet .bento.menu-bento.lay-list > .tile, html .sheet .bento.menu-bento.lay-list > .tile[data-size], html .sheet .bento.menu-bento.lay-list > .tile.wide {
  grid-column: 1 / -1 !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important;
  min-height: 62px !important; height: auto !important; aspect-ratio: auto !important; padding: 10px 14px !important; gap: 12px; }
html .sheet .bento.menu-bento.lay-list > .tile .glyph { width: 40px; height: 40px; flex: none; }
html .sheet .bento.menu-bento.lay-list > .tile .tt { flex: 1; min-width: 0; margin: 0; }
html .sheet .bento.menu-bento.lay-list > .tile .tl { font-size: 15px; }
html .sheet .bento.menu-bento.lay-list > .tile .ts { display: block !important; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .sheet .bento.menu-bento.lay-list > .tile .arrow { display: inline-flex !important; position: static !important; margin-left: auto; }
html .sheet .bento.menu-bento.lay-list > .tile .tileart { opacity: .35; }
html .sheet .bento.menu-bento.lay-list > .tile :is(.tilebg) { opacity: .5; }
html .sheet .bento.menu-bento > .tile { margin: 0 !important; transform: none !important; translate: none !important; rotate: none !important; }
/* 4.2.13: gig listings */
.mu-gig { align-items: flex-start; gap: 12px; }
.mu-gigimg { width: 84px; height: 56px; object-fit: cover; border-radius: 12px; flex: none; }
/* 4.2.14: the team's ticket inbox */
.tkx-top { display: flex; align-items: center; gap: 8px; margin: 4px 2px 12px; }
.tkx-top h1 { font-size: 26px; margin: 0; }
.tkx-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); margin-bottom: 10px; }
.tkx-search input { flex: 1; border: 0 !important; background: none !important; padding: 11px 0 !important; box-shadow: none !important; min-width: 0; }
.tkx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tkx-chips a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.tkx-chips a.on { border-color: var(--a); box-shadow: 0 0 0 1px var(--a) inset; background: rgba(255,255,255,.1); }
.tkx-chips .n { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.14); }
.tkx-chips .n.hot { background: var(--bad, #ff4f6d); color: #fff; }
.tkx-stat { font-size: 12px; opacity: .85; margin: 2px 2px 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tkx-stat form.inline { margin-left: auto; }
.tkx-push { margin-bottom: 10px; padding: 12px; gap: 8px; }
.tkx-list { display: grid; gap: 8px; }
/* 4.2.16: ticket types */
.tkx-types { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin-bottom: 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.tkx-types a { flex: 0 0 auto; min-width: 128px; max-width: 170px; display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: inherit; scroll-snap-align: start; }
.tkx-types a.on { border-color: var(--a); box-shadow: 0 0 0 1px var(--a) inset; background: rgba(255,255,255,.1); }
.tkx-types b { font-size: 14px; }
.tkx-tn { font-size: 12px; opacity: .85; }
.tkx-tn i { font-style: normal; font-weight: 800; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--bad, #ff4f6d); color: #fff; }
.tkx-group { margin: 4px 0 14px; }
.tkx-gh { display: flex; align-items: center; gap: 8px; padding: 6px 4px 8px; color: inherit; font-size: 15px; }
.tkx-more { display: block; text-align: center; font-size: 13px; font-weight: 700; padding: 10px; opacity: .85; }
.tkx { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px 12px 12px 14px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: inherit; }
.tkx.unread { background: rgba(255,255,255,.09); border-color: var(--a); }
.tkx.unread::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--a); }
.tkx.closed { opacity: .7; }
.tkx-m { flex: 1; min-width: 0; display: grid; gap: 3px; }
.tkx-l1 { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.tkx-l1 b { font-size: 14.5px; flex: none; max-width: 45%; }
.tkx-sub { font-size: 12.5px; opacity: .75; min-width: 0; flex: 1; }
.tkx-t { font-size: 11px; opacity: .65; flex: none; margin-left: auto; white-space: nowrap; }
.tkx-pv { font-size: 13px; opacity: .85; }
.tkx.unread .tkx-pv { opacity: 1; font-weight: 600; }
.tkx-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tkx-tags .tg { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.09); }
.tkx-tags .tg.w { background: rgba(255,180,60,.16); color: #ffc46b; }
.tkx-tags .tg.me { background: rgba(160,240,90,.14); color: #b7f26b; }
.tkx-tags .tg.prio-urgent { background: rgba(255,79,109,.18); color: #ff8aa4; }
.tkx-tags .tg.prio-high { background: rgba(255,150,60,.16); color: #ffb06b; }
.tkx-tags .i { width: 11px; height: 11px; }
.tkx-n { flex: none; align-self: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--bad, #ff4f6d); color: #fff; font-size: 11.5px; font-weight: 800; display: grid; place-items: center; }
.tkx-next { display: flex; align-items: center; gap: 6px; margin: 8px 0; padding: 10px 12px; border-radius: 14px; border: 1.5px dashed var(--a); font-size: 13px; color: inherit; }
.tkx-next b { font-weight: 800; }
.item.tk.tk-unread { border-color: var(--a); }
.check.tk-al { align-items: flex-start; gap: 10px; }
.check.tk-al > span { display: grid; gap: 2px; }
.check.tk-al input { margin-top: 3px; flex: none; }

/* 4.2.20: shop price options */
.shop-opts { display: grid; gap: 8px; }
.shop-opt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: inherit; }
.shop-opt .radio { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); }
.shop-opt.on { border-color: var(--a); box-shadow: 0 0 0 1px var(--a) inset; background: rgba(255,255,255,.1); }
.shop-opt.on .radio { border-color: var(--a); background: radial-gradient(circle, var(--a) 45%, transparent 50%); }
.shop-opt.off { opacity: .6; }
.shop-opt .shop-price { font-weight: 800; }

/* 4.2.21: shop order */
.so-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.so-item { border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); padding: 4px 8px; }
.so-sub { margin: 6px 0 4px; }
.so-sub > .so-item { background: rgba(255,255,255,.03); }
.so-opts { margin: 4px 0 4px 12px; gap: 4px; }
.so-opts .so-item { padding: 2px 8px; font-size: 13px; }
.so-row { gap: 8px; align-items: center; min-height: 40px; }
.so-mv { display: inline-flex; gap: 2px; flex: none; }
.so-moved { animation: soflash .5s ease; }
@keyframes soflash { from { box-shadow: 0 0 0 2px var(--a); } to { box-shadow: none; } }

/* 4.2.23: orders waiting to be fulfilled (owner and order staff) */
.ordersbar { position: sticky; top: 8px; z-index: 29; display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(90deg, #f59e0b, #f97316); color: #1a1205; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.ordersbar[hidden] { display: none; }
.ordersbar .ob-go { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.18); }
body[data-hlprev] .ordersbar { display: none !important; }

/* 4.2.25: music news */
.mu-news { gap: 12px; align-items: center; padding: 6px 0; color: inherit; }
.mu-news + .mu-news { border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }
.mu-newsimg { width: 64px; height: 64px; flex: none; border-radius: 12px; object-fit: cover; background: rgba(255,255,255,.06); }

/* 4.2.28: music keeps playing around the app (the shell: the app in a frame, the player in a bar underneath) */
html.vc-shellhtml, html.vc-shellhtml body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
html.vc-shellhtml body { padding: 0 !important; }
.vc-shellframe { position: fixed; inset: 0 0 auto 0; width: 100%; height: calc(100dvh - 64px - env(safe-area-inset-bottom)); border: 0; display: block; background: var(--bg, #0b0b12); }
.vc-shellbar { position: fixed; left: 0; right: 0; bottom: 0; height: calc(64px + env(safe-area-inset-bottom)); padding: 0 12px env(safe-area-inset-bottom);
  display: flex; align-items: center; gap: 12px; background: rgba(14,12,24,.97); border-top: 1px solid rgba(255,255,255,.12); color: #fff; z-index: 50; }
.vc-shellbar .vc-sbt { min-width: 0; }
.vc-shellbar .mu-playbtn { font-size: 13px; letter-spacing: -2px; }
.vc-shellbar.playing .mu-eq i { animation: mu-eq 1s ease-in-out infinite alternate; }
.vc-shellbar.playing .mu-eq i:nth-child(2) { animation-delay: -.3s; } .vc-shellbar.playing .mu-eq i:nth-child(3) { animation-delay: -.6s; }
.vc-sx { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: transparent; color: inherit; font-size: 15px; cursor: pointer; flex: none; }

/* 4.2.31: long links in the home announcement card wrap instead of running off the screen */
.ann .ann-body { overflow-wrap: anywhere; word-break: break-word; }

/* 4.2.33: writing a reply in a ticket or message: fold away the top extras so the whole reply is visible */
body.chatmode.composing .tk-actions, body.chatmode.composing .tk-assign, body.chatmode.composing .chattop .secure-note,
body.chatmode.composing .rate-card { display: none !important; }

/* 4.2.33: the reaction picker is a row (it was squeezed into one narrow column, so it opened downwards) */
.reactpick { width: max-content; }

/* 4.2.35: opening hours live with the status pills; cards that show the stats row already show them there */
.portal .chips .hourspill { white-space: nowrap; }
:is(.hero-f, .hero-l, .hero-y, .hero-w, .hero-aa, .hero-aj, .hero-ay, .hero-at, .hero-bj, .hero-br, .hero-by) .chips .hourspill { display: none; }