:root {
  --bg: #0b0d12;
  --bg2: #13161d;
  --panel: #171a22;
  --line: #262a35;
  --text: #f2f3f5;
  --muted: #9599a8;
  --accent: #c8f53a;       /* VEWD lime */
  --accent-soft: #e4ff8f;
  --accent-rgb: 200,245,58;
  --accent-ink: #0b0d12;
  --purple: #7b5cff;
  --red: #ff5d5d;
  --green: #5fd68b;
  --dim: #343846;
  --radius: 14px;
  --serif: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; /* display font (kept var name) */
  --sans: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); max-width: 100%; overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } } /* clip keeps the sticky header working */
main, .page, .panel, .card, .card-body, .who, .who > div { min-width: 0; overflow-wrap: anywhere; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
img { display: block; max-width: 100%; }
code { background: var(--bg2); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.ok { color: var(--green); }
.center { min-height: 70vh; display: grid; place-items: center; padding: 16px; }
[hidden] { display: none !important; }

/* ---------- top & bottom nav ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  padding: 10px 24px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; line-height: 0; flex: none; }
.brand svg { height: 26px; width: auto; display: block; }
.brand.big svg { height: 54px; }
.nav { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav a { white-space: nowrap; }
@media (max-width: 960px) { .topbar { gap: 12px; } .topbar-right .ghost.small { padding: 5px 9px; } }
.nav a { padding: 6px 12px; border-radius: 999px; color: var(--muted); font-weight: 500; }
.nav a.active { color: var(--text); background: var(--panel); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.bell { position: relative; font-size: 18px; padding: 4px 6px; line-height: 1; }
.bell-badge { position: absolute; top: -4px; right: -6px; background: var(--red); color: #fff; font: 700 10px var(--sans); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center; }
.notif-head { display: flex; align-items: center; justify-content: space-between; }
.notif { display: flex; gap: 12px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.notif.unread { border-color: var(--accent); }
.notif .t { color: var(--accent); }
.avatar-btn { border: 0; background: none; padding: 0; cursor: pointer; }

.bottomnav { display: none; }

@media (max-width: 720px) {
  .topbar { padding: 10px 16px; gap: 12px; }
  .brand svg { height: 22px; }
  .nav { display: none; }
  .bottomnav {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
    background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottomnav a { display: flex; flex-direction: column; align-items: center; padding: 8px 0; font-size: 11px; color: var(--muted); }
  .bottomnav a span { font-size: 18px; }
  .bottomnav a.active { color: var(--accent); }
  body { padding-bottom: 70px; }
}

/* ---------- buttons & inputs ---------- */
.btn {
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  padding: 9px 16px; border-radius: 999px; font: 600 14px var(--sans); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { border-color: var(--accent); color: var(--text); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost, .ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.ghost.small { padding: 5px 12px; border-radius: 999px; font-size: 13px; }
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: default; }
.linkish { background: none; border: 0; color: var(--muted); cursor: pointer; text-decoration: underline; padding: 0 4px; }

input, select, textarea {
  width: 100%; background: var(--bg2); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; font: 14px var(--sans);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
input[type=checkbox] { width: auto; accent-color: var(--accent); }
input[type=file] { padding: 10px; }
.field { display: block; margin: 12px 0; }
.field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .06em; }
.check { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--muted); margin: 6px 0 10px; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.row2 > * { min-width: 0; }
input[type=date] { min-width: 0; -webkit-appearance: none; appearance: none; min-height: 40px; }
.row-actions { display: flex; gap: 8px; margin-top: 14px; }
.inline-form { display: flex; gap: 8px; }

.search-input { font-size: 18px; padding: 14px 18px; border-radius: 999px; margin-bottom: 8px; }

/* ---------- layout ---------- */
.page { max-width: 1100px; margin: 0 auto; padding: 24px; }
@media (max-width: 720px) { .page { padding: 16px; } }
.page-title { font-family: var(--serif); font-weight: 800; font-size: 30px; margin: 4px 0 18px; letter-spacing: -.01em; }
.section-title { font-family: var(--serif); font-weight: 800; font-size: 20px; margin: 28px 0 12px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; }
.panel h3 { margin: 0 0 8px; font-family: var(--serif); }
.panel.narrow { max-width: 420px; width: 100%; text-align: center; }
.panel.empty { text-align: center; color: var(--muted); }
.panel.empty a { color: var(--accent); }
.hero-signin .btn { margin-top: 14px; }

/* ---------- avatars ---------- */
.av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.av.sm { width: 24px; height: 24px; font-size: 11px; }
.av.xl { width: 84px; height: 84px; font-size: 32px; }
.av-fallback { display: inline-grid; place-items: center; background: var(--dim); color: var(--text); font-weight: 600; }

/* ---------- poster grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 18px 14px; }
.grid > * { min-width: 0; }
@media (max-width: 720px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; } }
.tile-img { position: relative; aspect-ratio: 2/3; border-radius: 8px; overflow: hidden; background: var(--bg2); box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: transform .15s; }
.tile:hover .tile-img { transform: translateY(-3px); }
.tile-img img { width: 100%; height: 100%; object-fit: cover; }
.noimg { width: 100%; height: 100%; display: grid; place-items: center; padding: 8px; text-align: center; color: var(--muted); font-size: 12px; background: var(--bg2); }
.badge { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.75); color: var(--accent); font-size: 11px; padding: 2px 7px; border-radius: 999px; font-weight: 600; }
.tile-title { margin-top: 7px; font-weight: 600; font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-sub { color: var(--muted); font-size: 12px; }

/* ---------- feed cards ---------- */
.feed { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.card { display: flex; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.card-poster { flex: none; width: 72px; }
.card-poster img { width: 72px; border-radius: 6px; aspect-ratio: 2/3; object-fit: cover; }
.card-body { flex: 1; min-width: 0; }
.who { display: flex; gap: 10px; align-items: flex-start; }
.who .t { font-weight: 600; color: var(--accent); }
.stars { color: var(--accent); font-size: 17px; letter-spacing: 1px; margin: 6px 0 2px; }
.review { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.review.spoiler { filter: blur(6px); cursor: pointer; user-select: none; }
.chips, .genres { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); color: var(--muted); }
.chip.ghosty { background: transparent; }
.actions { display: flex; gap: 6px; margin-top: 4px; }
.act { background: none; border: 1px solid transparent; color: var(--muted); padding: 4px 10px; border-radius: 999px; cursor: pointer; font-size: 14px; }
.act:hover { border-color: var(--line); }
.act.on { color: var(--red); }
.comments { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.comment { display: flex; gap: 8px; margin-bottom: 8px; font-size: 14px; }
.comment-form { display: flex; gap: 8px; margin-top: 6px; }

/* ---------- title page ---------- */
.title-hero { position: relative; background: var(--bg2); overflow: hidden; }
.title-hero::before {
  content: ""; position: absolute; inset: 0; background-image: var(--bg); background-size: cover; background-position: center top;
  opacity: .32; filter: blur(2px); transform: scale(1.03);
}
.title-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,17,21,.2), var(--bg) 96%); }
.title-hero-inner { position: relative; z-index: 1; display: flex; gap: 28px; align-items: flex-end; padding-top: 48px; }
.title-poster { width: 200px; border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.6); flex: none; }
.title-info h1 { font-family: var(--serif); font-weight: 800; font-size: 42px; line-height: 1.05; margin: 0 0 8px; letter-spacing: -.02em; }
.tagline { font-style: italic; color: var(--muted); margin: 8px 0; }
.scores { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.score { padding: 4px 11px; border-radius: 8px; background: rgba(0,0,0,.45); border: 1px solid var(--line); font-size: 13px; }
.score b { margin-left: 3px; }
.score.imdb b { color: #f5c518; }
.score.rt b { color: #fa6141; }
.score.mc b { color: #66cc33; }
.score.tmdb b { color: #01b4e4; }
.title-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.title-grid > * { min-width: 0; }
.title-info { min-width: 0; }
.cast { max-width: 100%; }
.title-grid aside { position: sticky; top: 72px; }
.overview { font-size: 16px; line-height: 1.6; margin-top: 0; }
.prov { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.prov .muted { width: 52px; }
.prov img { width: 38px; height: 38px; border-radius: 9px; }
.friends-avg { margin: 0 0 8px; }
.friends-avg b { color: var(--accent); }
.cast { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.castm { flex: none; width: 92px; font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; }
.castm img, .castm .noimg { width: 92px; height: 120px; object-fit: cover; border-radius: 8px; }
@media (max-width: 860px) {
  .title-grid { grid-template-columns: minmax(0, 1fr); }
  .title-grid aside { position: static; order: -1; }
  .title-hero-inner { gap: 16px; padding-top: 28px; }
  .title-poster { width: 110px; }
  .title-info h1 { font-size: 28px; }
}

/* segmented control & stars */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--bg2); border-radius: 999px; padding: 3px; border: 1px solid var(--line); }
.seg button { border: 0; background: none; color: var(--muted); padding: 8px 6px; border-radius: 999px; font: 600 13px var(--sans); cursor: pointer; }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.prog-row { display: flex; align-items: center; gap: 8px; }
.prog-row select { width: auto; flex: none; }
.prog-row input { width: 70px; flex: none; }
.prog-row .btn { margin-left: auto; white-space: nowrap; }
.star-input { display: flex; align-items: center; gap: 2px; user-select: none; }
.star-input .s { font-size: 30px; line-height: 1; cursor: pointer; color: var(--dim); }
.star-input .s.full { color: var(--accent); }
.star-input .s.half { background: linear-gradient(90deg, var(--accent) 50%, var(--dim) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.star-input .clear { margin-left: 8px; }

/* ---------- profile ---------- */
.profile-head { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }
.profile-head .page-title { margin: 0 0 4px; }
.stats { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); }
.stats b { color: var(--text); }
.stats .match b { color: var(--accent); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: 10px 14px; font: 600 14px var(--sans); cursor: pointer; }
.tabs button.on { color: var(--text); border-color: var(--accent); }

/* ---------- discover ---------- */
.matches { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.matchrow { display: grid; grid-template-columns: auto minmax(0, 1fr) 100px auto auto; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
.bar { height: 6px; background: var(--bg2); border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--accent); }
@media (max-width: 560px) { .matchrow { grid-template-columns: auto 1fr auto; } .matchrow .bar, .matchrow .small { display: none; } }

/* ---------- import ---------- */
.steps { margin: 0 0 14px; padding-left: 20px; }
.steps li { margin-bottom: 4px; }
.import-bar { position: sticky; top: 58px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: var(--bg); padding: 10px 0; }
.import-bar > span { margin-right: auto; color: var(--muted); }
.import-bar b { color: var(--text); }
.import-list { display: flex; flex-direction: column; gap: 6px; }
.irow { display: grid; grid-template-columns: auto 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.irow.imported { opacity: .55; }
.irow .ithumb img { width: 40px; border-radius: 4px; }
.irow .pick { margin: 4px 0; padding: 5px 8px; font-size: 13px; max-width: 420px; }
.irow .star-input .s { font-size: 22px; }
.irow .star-input .clear { display: none; }
@media (max-width: 640px) { .irow { grid-template-columns: auto 40px minmax(0, 1fr); } .irow .istars { grid-column: 3; } }

/* ---------- invites ---------- */
.invrow { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.invrow:last-child { border: 0; }
.invrow span:first-child { flex: 1; }

/* ---------- misc ---------- */
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-weight: 600; z-index: 50; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.credits { max-width: 1100px; margin: 40px auto 20px; padding: 0 24px; color: var(--muted); font-size: 11.5px; display: flex; gap: 10px; align-items: center; }
@media (max-width: 720px) { .credits { margin-bottom: 90px; flex-wrap: wrap; } }

/* =================== social layer =================== */

.grow { flex: 1; min-width: 0; }
.hide-sm { }
.show-sm { display: none; }
@media (max-width: 720px) {
  .hide-sm { display: none !important; }
  .show-sm { display: inline; }
  .show-sm a { color: var(--accent); }
}

/* avatars with online dot */
.av-wrap { position: relative; display: inline-block; flex: none; line-height: 0; }
.av-wrap .dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); border: 2px solid var(--panel); }
.av-stack { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.av-stack > * { margin-left: -6px; border: 2px solid var(--panel); }
.av-stack > *:first-child { margin-left: 0; }

/* watching now stories */
.now-strip:empty { display: none; }
.strip-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.stories { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 8px; scrollbar-width: none; }
.story { flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.story-ring { position: relative; width: 66px; height: 66px; border-radius: 50%; padding: 3px;
  background: conic-gradient(var(--accent), var(--purple), var(--accent)); }
.story-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); }
.story-av { position: absolute; right: -4px; bottom: -4px; }
.story-av .av { border: 2px solid var(--bg); }
.story-name { font-size: 12px; font-weight: 600; margin-top: 6px; }
.story-title { font-size: 11px; color: var(--muted); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* composer */
.composer { max-width: 720px; }
.composer-top { display: flex; gap: 12px; align-items: flex-start; }
.composer textarea { resize: vertical; min-height: 48px; }
.composer-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.composer-actions .btn { margin-left: auto; }
.chipbtn { background: var(--bg2); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 6px 12px; font: 500 13px var(--sans); cursor: pointer; }
.chipbtn:hover { border-color: var(--accent); }
.tag-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 5px 8px; margin: 8px 8px 0 0; font-size: 13px; max-width: 100%; }
.tag-chip img { width: 24px; border-radius: 3px; }
.poll-build { margin-top: 8px; }

/* title picker */
.picker { margin-top: 10px; position: relative; }
.picker-results { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.picker-results button { display: flex; gap: 10px; align-items: center; text-align: left; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; color: var(--text); cursor: pointer; font: 14px var(--sans); }
.picker-results button:hover { border-color: var(--accent); }
.picker-results img, .picker-results .noimg { width: 30px; height: 45px; object-fit: cover; border-radius: 4px; flex: none; }

/* mentions */
.mention-host { position: relative; flex: 1; min-width: 0; }
.mention { color: var(--accent); font-weight: 600; }
.mention-box { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin-top: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.4); overflow: hidden; }
.mention-box button { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; color: var(--text); padding: 8px 10px; cursor: pointer; font: 14px var(--sans); text-align: left; }
.mention-box button:hover { background: var(--bg2); }

/* feed head, highlights, pill, pull */
.feed-head { max-width: 720px; margin: 6px 0 12px; }
.tabs.slim { margin-bottom: 0; }
.highlights { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin-bottom: 12px; }
.highlights:empty { display: none; }
.highlight { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.14), rgba(123,92,255,.08)); border: 1px solid rgba(var(--accent-rgb),.35); }
.highlight img { width: 44px; border-radius: 5px; flex: none; }
.hl-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); font-weight: 600; margin-bottom: 2px; }
.stars-inline { color: var(--accent); letter-spacing: 1px; }
.new-pill { position: sticky; top: 66px; z-index: 15; display: block; margin: 0 auto 10px; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px; padding: 7px 16px; font: 600 13px var(--sans); cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.pull-hint { text-align: center; color: var(--muted); font-size: 13px; padding: 6px 0 10px; }

/* cards: posts */
.post-text { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tag-row { display: flex; gap: 10px; align-items: center; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 8px; margin: 8px 0; }
.tag-row img { width: 36px; border-radius: 4px; }
.card.kind-rec { border-color: rgba(var(--accent-rgb),.4); }
.card.kind-party { border-color: rgba(123,92,255,.45); background: linear-gradient(160deg, rgba(123,92,255,.08), var(--panel) 60%); }
.party-when { font-weight: 600; margin: 8px 0 4px; }
.party-people { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0; }
.seg.rsvp { max-width: 300px; margin: 8px 0; }
.ok-chip { color: var(--green); border-color: rgba(95,196,139,.4); }
.act.subtle { margin-left: auto; opacity: .55; }
.act.subtle:hover { opacity: 1; }
.single { margin-top: 12px; }

/* polls */
.poll { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 6px; }
.poll-opt { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; text-align: left; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px 6px 6px; color: var(--text); cursor: pointer; font: 14px var(--sans); }
.poll-opt:hover { border-color: var(--accent); }
.poll-opt.mine { border-color: var(--accent); }
.poll-fill { position: absolute; inset: 0 auto 0 0; background: rgba(var(--accent-rgb),.16); transition: width .3s; }
.poll-opt.lead .poll-fill { background: rgba(var(--accent-rgb),.28); }
.poll-opt img { position: relative; width: 28px; height: 42px; object-fit: cover; border-radius: 4px; }
.poll-label { position: relative; flex: 1; min-width: 0; }
.poll-pct { position: relative; font-weight: 700; }

/* reactions */
.react-wrap { position: relative; }
.react-picker { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 25; display: flex; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.react-picker button { background: none; border: 0; font-size: 22px; padding: 2px 4px; cursor: pointer; border-radius: 999px; transition: transform .12s; }
.react-picker button:hover { transform: scale(1.25); }
.react-picker button.on { background: var(--bg2); }
.react-summary { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); margin-right: 4px; }
.act.on { color: var(--text); border-color: var(--line); background: var(--bg2); }

/* comments threads */
.comment.reply { margin-left: 32px; }
.replying { font-size: 12.5px; color: var(--muted); margin: 4px 0; }

/* title page actions */
.title-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; padding-bottom: 0; }
.title-actions .btn.on { color: var(--accent); border-color: var(--accent); }

/* modal */
.modal-wrap { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 16px; }
.modal { width: 100%; max-width: 440px; max-height: 90vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.modal-head h3 { margin: 0; font-family: var(--serif); }
.modal .close { font-size: 18px; text-decoration: none; }
.friend-pick { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow: auto; }
.friend-pick .check { color: var(--text); }

/* profiles */
.profile-banner { height: 180px; background: var(--bg2); position: relative; overflow: hidden; }
.profile-banner::before { content: ""; position: absolute; inset: 0; background-image: var(--bg); background-size: cover; background-position: center 30%; opacity: .55; }
.profile-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, var(--bg)); }
.profile-page { margin-top: -70px; position: relative; }
.profile-head { align-items: flex-end; }
.profile-head .av.xl { border: 4px solid var(--bg); }
.profile-name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bio { margin: 4px 0 6px; max-width: 600px; }
.now-line { margin: 2px 0 6px; color: var(--muted); }
.now-line b { color: var(--accent); }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.badge-pill { font-size: 13px; padding: 5px 12px; border-radius: 999px; background: rgba(var(--accent-rgb),.1); border: 1px solid rgba(var(--accent-rgb),.35); }
.top4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; max-width: 640px; margin-bottom: 8px; }
.add-tile .noimg { border: 1px dashed var(--line); font-size: 12px; line-height: 1.4; }
@media (max-width: 720px) {
  .profile-banner { height: 130px; }
  .profile-page { margin-top: -50px; }
  .profile-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .stats { gap: 10px 14px; font-size: 14px; }
}

/* leaderboard */
.leaderboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.lb h3 { font-size: 16px; margin-bottom: 10px; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.medal { font-size: 18px; width: 22px; }

/* notifications */
.notif-icon { font-size: 26px; width: 34px; text-align: center; flex: none; }


/* =================== VEWD brand =================== */
body { background:
  radial-gradient(900px 500px at 85% -10%, rgba(123,92,255,.10), transparent 60%),
  radial-gradient(700px 400px at -10% 10%, rgba(var(--accent-rgb),.06), transparent 60%),
  var(--bg); background-attachment: fixed; }
h1, h2, h3, .panel h3 { font-family: var(--serif); font-weight: 800; letter-spacing: -.02em; }
.btn { border-radius: 999px; }
.btn.primary { box-shadow: 0 6px 22px rgba(var(--accent-rgb),.25); }
.btn.primary:hover { filter: brightness(1.05); box-shadow: 0 8px 28px rgba(var(--accent-rgb),.35); }
.nav a.active { color: var(--accent-ink); background: var(--accent); }
.nav a { font-weight: 600; }
.tabs button.on { color: var(--accent); }
.bell { display: inline-flex; color: var(--text); }
.ico { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bottomnav a span { display: grid; place-items: center; height: 24px; }
.bottomnav a.active .ico { stroke: var(--accent); }
.stars, .star-input .s.full, .stars-inline { text-shadow: 0 0 12px rgba(var(--accent-rgb),.25); }
.card.kind-party { border-color: rgba(123,92,255,.5); }
.story-ring { box-shadow: 0 0 18px rgba(var(--accent-rgb),.25); }

/* sign-in hero */
.signin { min-height: 82vh; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 40px; align-items: center; max-width: 1100px; margin: 0 auto; padding: 32px 24px; }
.signin h1 { font-size: clamp(38px, 6vw, 64px); line-height: 1.02; margin: 18px 0 14px; }
.signin h1 em { font-style: normal; color: var(--accent); }
.signin p { color: var(--muted); font-size: 17px; max-width: 460px; }
.signin .btn.primary { font-size: 16px; padding: 13px 26px; margin-top: 10px; }
.signin-art { position: relative; aspect-ratio: 1/1; max-width: 440px; justify-self: center; width: 100%; }
.signin-art .tri { position: absolute; inset: 12% 8% 12% 18%; clip-path: polygon(0 0, 100% 50%, 0 100%); border-radius: 30px;
  background: linear-gradient(135deg, var(--accent) 0%, rgba(var(--accent-rgb),.25) 55%, rgba(123,92,255,.55) 100%); filter: drop-shadow(0 0 40px rgba(var(--accent-rgb),.35)); }
.signin-art .tri.ghost { inset: 4% 20% 30% 0; opacity: .25; background: linear-gradient(135deg, var(--purple), transparent); filter: none; }
.signin-feats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; max-width: 1100px; margin: 0 auto 40px; padding: 0 24px; }
.signin-feats div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; text-align: center; font-size: 13px; color: var(--muted); }
.signin-feats .ico { width: 30px; height: 30px; stroke: var(--accent); margin: 0 auto 8px; display: block; }
.signin-feats b { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; }
@media (max-width: 760px) {
  .signin { grid-template-columns: 1fr; text-align: left; padding-top: 24px; gap: 10px; }
  .signin-art { display: none; }
  .signin-feats { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* =================== tonight, calendar, wrapped =================== */
.quick-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 720px; margin-bottom: 14px; }
.page:not(.feed-page) .quick-row { max-width: none; }
.quick { display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 10px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.quick:hover { border-color: var(--accent); color: var(--text); }
.quick span { grid-row: span 2; font-size: 24px; }
.quick b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .quick-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .quick { grid-template-columns: 1fr; text-align: center; padding: 10px 6px; }
  .quick span { grid-row: auto; font-size: 22px; }
  .quick b { font-size: 12px; white-space: normal; }
  .quick small { display: none; }
}
.wrapped-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: var(--radius); margin-bottom: 14px;
  background: linear-gradient(120deg, rgba(var(--accent-rgb),.18), rgba(123,92,255,.22)); border: 1px solid rgba(var(--accent-rgb),.4); }
.wb-emoji { font-size: 34px; }

/* services */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; max-height: 55vh; overflow: auto; margin: 8px 0; }
.svc { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 6px; color: var(--text); cursor: pointer; font: 12.5px var(--sans); text-align: left; }
.svc img { width: 28px; height: 28px; border-radius: 7px; flex: none; }
.svc.on { border-color: var(--accent); background: rgba(var(--accent-rgb),.12); }
.svc-row { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.svc-row img { width: 24px; height: 24px; border-radius: 6px; }
.svc-row .muted { margin-right: 4px; }
.svc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 14px; }
.svc-line .check { margin: 0; color: var(--text); }

/* tonight */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chipbtn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.chipbtn.who { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; }
.tonight-form .seg { overflow-x: auto; }
.tonight-form .seg button { white-space: nowrap; }
.hero-pick { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid rgba(var(--accent-rgb),.35); margin: 18px 0 6px; background: var(--panel); }
.hero-pick::before { content: ""; position: absolute; inset: 0; background-image: var(--bg); background-size: cover; background-position: center; opacity: .3; }
.hero-pick::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--panel) 25%, rgba(23,26,34,.6)); }
.hero-pick-inner { position: relative; z-index: 1; display: flex; gap: 22px; padding: 22px; align-items: center; }
.hp-poster { width: 150px; border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.5); flex: none; }
.hero-pick h2 { font-size: 30px; margin: 4px 0; }
.hp-overview { color: var(--text); opacity: .85; max-width: 560px; }
@media (max-width: 640px) { .hero-pick-inner { flex-direction: column; align-items: flex-start; } .hp-poster { width: 110px; } .hero-pick h2 { font-size: 24px; } }

/* calendar */
.cal-list { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.cal-row { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.cal-row img, .cal-row .noimg { width: 44px; height: 66px; object-fit: cover; border-radius: 6px; flex: none; display: block; }

/* wrapped */
.wrapped-loading { min-height: 60vh; display: grid; place-items: center; text-align: center; align-content: center; gap: 10px; }
.wrapped { position: fixed; inset: 0; z-index: 70; background: var(--bg); display: grid; place-items: center; overflow: hidden; }
.wr-bars { position: absolute; top: 12px; left: 12px; right: 56px; display: flex; gap: 4px; z-index: 3; }
.wr-bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.2); }
.wr-bars span.done { background: var(--accent); }
.wr-close { position: absolute; top: 4px; right: 14px; z-index: 4; font-size: 22px; padding: 4px 8px; }
.wr-nav { position: absolute; inset: 40px 0 0 0; display: grid; grid-template-columns: 1fr 2fr; z-index: 2; }
.wr-nav button { background: none; border: 0; cursor: pointer; }
.wr-slide { position: relative; z-index: 1; width: min(520px, 92vw); max-height: 86vh; overflow: auto; text-align: center; padding: 30px 22px; border-radius: 28px; animation: wrIn .45s ease; }
.wr-slide.summary { z-index: 3; }
@keyframes wrIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.wr-slide h1 { font-size: clamp(44px, 10vw, 72px); line-height: 1; margin: 10px 0; }
.wr-slide h1 em { font-style: normal; color: var(--accent); }
.wr-slide h2 { margin: 6px 0; font-size: 26px; }
.wr-kicker { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--accent); font-weight: 700; }
.wr-big { font-family: var(--serif); font-weight: 800; font-size: clamp(72px, 20vw, 130px); line-height: 1; color: var(--accent); text-shadow: 0 0 40px rgba(var(--accent-rgb),.35); }
.wr-headline { font-size: clamp(34px, 8vw, 50px) !important; line-height: 1.05; }
.wr-duo { display: flex; justify-content: center; gap: 40px; margin: 10px 0; }
.wr-list { list-style: none; padding: 0; margin: 16px auto 0; max-width: 360px; text-align: left; }
.wr-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.wr-list b { color: var(--accent); }
.wr-top { display: flex; gap: 16px; align-items: center; justify-content: center; text-align: left; margin: 12px 0; }
.wr-poster { width: 110px; border-radius: 10px; box-shadow: 0 14px 30px rgba(0,0,0,.5); }
.wr-stars { color: var(--accent); font-size: 26px; letter-spacing: 2px; }
.wr-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; align-items: end; height: 140px; margin: 18px 0 8px; }
.wr-m { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.wr-m span { width: 100%; min-height: 3px; border-radius: 5px 5px 2px 2px; background: rgba(255,255,255,.18); }
.wr-m.hi span { background: var(--accent); box-shadow: 0 0 16px rgba(var(--accent-rgb),.5); }
.wr-m small { font-size: 10px; color: var(--muted); }
.wr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.wr-grid div { background: rgba(255,255,255,.06); border-radius: 14px; padding: 12px 6px; }
.wr-grid b { display: block; font-family: var(--serif); font-size: 20px; overflow-wrap: anywhere; }
.wr-grid small { color: var(--muted); font-size: 11px; }
.center-badges, .center-actions { justify-content: center; }
.wr-slide.s1 { background: radial-gradient(circle at 70% 20%, rgba(var(--accent-rgb),.25), transparent 55%), radial-gradient(circle at 20% 90%, rgba(123,92,255,.35), transparent 60%), var(--panel); }
.wr-slide.s2, .wr-slide.s6 { background: radial-gradient(circle at 50% 30%, rgba(var(--accent-rgb),.16), transparent 60%), var(--panel); }
.wr-slide.s3, .wr-slide.s7 { background: linear-gradient(160deg, rgba(123,92,255,.28), var(--panel) 70%); }
.wr-slide.s4, .wr-slide.s9 { background: linear-gradient(200deg, rgba(var(--accent-rgb),.2), var(--panel) 65%); }
.wr-slide.s5, .wr-slide.s8 { background: radial-gradient(circle at 80% 0%, rgba(255,93,93,.22), transparent 55%), var(--panel); }
.wr-slide.s10 { background: radial-gradient(circle at 80% 10%, rgba(var(--accent-rgb),.22), transparent 55%), linear-gradient(180deg, var(--panel), #1b1636); }
.wr-slide .av.xl { margin: 10px auto; display: inline-grid; }
#tonightResults { scroll-margin-top: 80px; }

/* Avatars never squash next to long titles */
.who > a:first-child, .comment > .av, .comment > .av-wrap, .notif > .av, .composer-top > .av, .matchrow > .av, .lb-row > .av { flex: none; }
.av { flex-shrink: 0; aspect-ratio: 1 / 1; min-width: 34px; }
.av.sm { min-width: 24px; }
.av.xl { min-width: 84px; }
.av-wrap { flex: none; }

/* =================== profiles v2 =================== */
.av-emoji { background: color-mix(in srgb, var(--avc, #7b5cff) 28%, var(--bg2)); font-size: 1.1em; }
.av.xl.av-emoji { font-size: 44px; }
.av.sm.av-emoji { font-size: 13px; }
.av-tint { background: var(--avc); color: #0b0d12; }
.profile-banner.no-img { background: radial-gradient(120% 140% at 85% 0%, color-mix(in srgb, var(--pc) 55%, transparent), transparent 60%),
  radial-gradient(90% 120% at 0% 100%, rgba(123,92,255,.35), transparent 60%), var(--bg2); }
.profile-av .av.xl { box-shadow: 0 0 0 3px var(--pc, var(--accent)), 0 10px 30px rgba(0,0,0,.5); border: 4px solid var(--bg); }
.profile-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 13.5px; margin: 2px 0 4px; }
.fav-genres .chip { border-color: color-mix(in srgb, var(--pc, var(--accent)) 50%, transparent); color: var(--text); }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; margin: 14px 0 10px; }
.stat-cards > div { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.stat-cards b { display: block; font-family: var(--serif); font-size: 22px; }
.stat-cards small { color: var(--muted); font-size: 12px; }
.stat-cards .hl { border-color: color-mix(in srgb, var(--pc, var(--accent)) 60%, transparent); }
.stat-cards .hl b { color: var(--accent); }
.stat-cards .hist-card { grid-column: span 2; display: flex; align-items: stretch; }
.hist { position: relative; display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; align-items: end; width: 100%; height: 52px; padding-bottom: 14px; }
.hist-col { height: 100%; display: flex; align-items: flex-end; }
.hist-col span { width: 100%; border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--pc, var(--accent)) 80%, transparent); }
.hist-labels { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }
.compare h3 { font-size: 15px; margin: 16px 0 8px; }
.compare h3:first-of-type { margin-top: 6px; }
.mini-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; }
@media (max-width: 720px) { .mini-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .stat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* settings */
.settings { max-width: 760px; }
.settings .panel h3 { margin-bottom: 12px; }
.photo-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.photo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-actions label { cursor: pointer; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.emoji-grid button { font-size: 22px; height: 42px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); cursor: pointer; }
.emoji-grid button.on, .emoji-grid button:hover { border-color: var(--accent); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatches button { width: 34px; height: 34px; border-radius: 50%; background: var(--c); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.swatches button.on { box-shadow: 0 0 0 2px var(--text); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.setting-row:last-child { border-bottom: 0; }
.settings-save { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 30%); padding: 18px 0 10px; }
@media (max-width: 720px) { .settings-save { bottom: 64px; } }
.tabs { scrollbar-width: none; } .tabs button { white-space: nowrap; flex: none; }

/* email sign-in */
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 22px 0 12px; max-width: 420px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.email-auth { max-width: 420px; }
.email-auth .seg { margin-bottom: 10px; }
.email-auth form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.email-auth input[type=email], .email-auth input[type=password] { width: 100%; }
.email-auth #pwFields { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.email-auth #pwFields[hidden] { display: none; }
.email-auth .check { margin: 0; }
.signin .auth-msg, .auth-msg { font-size: 13.5px; color: var(--red); min-height: 1em; margin: 8px 0 0; }
.signin .auth-msg.ok, .auth-msg.ok { color: var(--green); }

/* Centre the home feed column */
.page.feed-page { max-width: 768px; }
.page.feed-page .quick-row, .page.feed-page .composer, .page.feed-page .feed-head,
.page.feed-page .highlights, .page.feed-page .feed { max-width: none; }

/* =================== UI polish =================== */

/* skeletons */
.skel { background: linear-gradient(90deg, var(--bg2) 0%, var(--skel-hi, #1f2330) 40%, var(--bg2) 80%); background-size: 300% 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: 8px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.skel-line { height: 12px; margin: 8px 0; width: 90%; }
.skel-line.short { width: 40%; } .skel-line.mid { width: 65%; } .skel-line.xl { height: 34px; width: 60%; margin-bottom: 14px; }
.skel-tile .tile-img { box-shadow: none; }
.skel-card { pointer-events: none; }
.skel-poster { width: 72px; aspect-ratio: 2/3; }
.skel-poster.sm { width: 44px; height: 66px; flex: none; }
.skel-who { display: flex; gap: 10px; align-items: center; }
.skel-who .skel-line { width: 55%; }
.skel-av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: inline-block; }
.skel-av.xl { width: 84px; height: 84px; }
.skel-bigposter { height: 300px; }
.skel-panel { height: 260px; }
.skel-stat { height: 64px; border-radius: 12px; }
@media (max-width: 860px) { .skel-bigposter { height: 165px; } }

/* micro-animations */
.burst { position: fixed; z-index: 90; pointer-events: none; font-size: 22px; transform: translate(-50%, 0); animation: burst .9s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes burst { 0% { opacity: 0; transform: translate(-50%, 0) scale(.4); } 15% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), var(--dy)) rotate(var(--rot)) scale(1.1); } }
.act.pop { animation: pop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.star-input .s.pop { animation: starpop .4s cubic-bezier(.3,1.7,.5,1) both; }
@keyframes starpop { 0% { transform: scale(1); } 45% { transform: scale(1.4) rotate(-8deg); } 100% { transform: scale(1); } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 95; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--drift), 105vh) rotate(var(--spin)); opacity: .9; } }
.card, .tile-img, .btn, .chipbtn, .act { transition: transform .15s ease, border-color .2s, background-color .2s, box-shadow .2s; }
.btn:active, .chipbtn:active, .act:active { transform: scale(.94); }
#app > * { animation: pageIn .25s ease; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* poster tints */
.card.tinted { background: linear-gradient(135deg, color-mix(in srgb, var(--tint) 13%, var(--panel)) 0%, var(--panel) 55%);
  border-color: color-mix(in srgb, var(--tint) 28%, var(--line)); }
.card.tinted .card-poster img { box-shadow: 0 8px 26px color-mix(in srgb, var(--tint) 35%, transparent); }
#app[style*="--tint"] .title-hero::after { background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 30%, transparent) 0%, rgba(11,13,18,.4) 50%, var(--bg) 97%); }
#app[style*="--tint"] .title-poster { box-shadow: 0 16px 50px color-mix(in srgb, var(--tint) 45%, transparent), 0 16px 40px rgba(0,0,0,.6); }
#app[style*="--tint"] .score { border-color: color-mix(in srgb, var(--tint) 45%, var(--line)); }
#app[style*="--tint"] #logPanel { border-color: color-mix(in srgb, var(--tint) 45%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 10%, var(--panel)), var(--panel) 60%); }
#app[style*="--tint"] .title-grid .section-title { border-left: 3px solid var(--tint); padding-left: 10px; }
#app[style*="--tint"] .genres .chip { border-color: color-mix(in srgb, var(--tint) 40%, var(--line)); }

/* desktop right rail */
.rail { display: none; }
@media (min-width: 1180px) {
  .page.feed-page { max-width: 1140px; }
  .feed-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
  .rail { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 76px; max-height: calc(100vh - 90px); overflow-y: auto; scrollbar-width: none; }
  .feed-page .now-strip { display: none; }
}
.rail-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.rail-box h4 { margin: 0 0 10px; font-family: var(--serif); font-weight: 800; font-size: 14px; display: flex; justify-content: space-between; align-items: baseline; }
.rail-box h4 a { color: var(--accent); font-family: var(--sans); font-weight: 600; }
.rail-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 10px; }
.rail-row:hover { background: var(--bg2); color: var(--text); }
.rail-row b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-row small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-thumb { width: 30px; height: 45px; object-fit: cover; border-radius: 5px; flex: none; }
.rank { width: 16px; text-align: center; font-weight: 800; color: var(--accent); font-family: var(--serif); flex: none; }
.rail-party { display: flex; gap: 12px; align-items: center; }
.rail-party img { width: 48px; border-radius: 6px; flex: none; }
.rail-party b { display: block; }
.rail-party small { display: block; color: var(--muted); font-size: 12px; }
.rail-party .count { display: inline-block; margin: 4px 0; padding: 3px 10px; border-radius: 999px; background: rgba(var(--accent-rgb),.14); color: var(--accent); font-weight: 700; font-size: 13px; }
.accent { color: var(--accent) !important; }
.rail-foot { padding: 0 4px; }

/* floating + button (phones) */
.fab { display: none; }
@media (max-width: 720px) {
  .fab { display: grid; place-items: center; position: fixed; right: 18px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 40;
    width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); cursor: pointer;
    box-shadow: 0 10px 30px rgba(var(--accent-rgb),.35), 0 6px 16px rgba(0,0,0,.5); }
  .fab svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; fill: none; }
  body[data-view="settings"] .fab, body[data-view="wrapped"] .fab, body[data-view="import"] .fab { display: none; }
  .credits { margin-bottom: 150px; }
}
.qa-list { display: flex; flex-direction: column; gap: 6px; }
.qa-list[hidden] { display: none; }
.qa-list button { display: flex; gap: 12px; align-items: center; text-align: left; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; color: var(--text); cursor: pointer; font: 14px var(--sans); }
.qa-list button:hover { border-color: var(--accent); }
.qa-list b { display: block; }
.qa-list small { color: var(--muted); font-size: 12.5px; }
.qa-ico { font-size: 22px; width: 32px; text-align: center; flex: none; }

/* bottom sheets on phones */
@media (max-width: 720px) {
  .modal-wrap { place-items: end center; padding: 0; animation: fadeIn .2s ease; }
  .modal { max-width: none; border-radius: 22px 22px 0 0; border-bottom: 0; max-height: 88vh; padding-bottom: calc(20px + env(safe-area-inset-bottom));
    animation: sheetUp .28s cubic-bezier(.2,.9,.3,1); transition: transform .15s ease; }
  .modal-head { position: relative; padding-top: 10px; }
  .modal-head::before { content: ""; position: absolute; top: -6px; left: 50%; width: 42px; height: 5px; margin-left: -21px; border-radius: 3px; background: var(--dim); }
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn { from { background: rgba(0,0,0,0); } to { background: rgba(0,0,0,.6); } }

/* =================== header instant search =================== */
.hs-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 7px 12px; cursor: pointer; font: 13.5px var(--sans); min-width: 260px; }
.hs-btn:hover { border-color: var(--accent); color: var(--text); }
.hs-btn .ico { width: 18px; height: 18px; }
.hs-btn .hs-ph { flex: 1; text-align: left; }
.hs-btn kbd { font: 600 11px var(--sans); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--muted); }
@media (max-width: 1100px) { .hs-btn { min-width: 0; } .hs-btn .hs-ph, .hs-btn kbd { display: none; } .hs-btn { padding: 7px; border-radius: 50%; } }
@media (max-width: 720px) { .hs-btn { background: none; border: 0; color: var(--text); } }

.hs-wrap { position: fixed; inset: 0; z-index: 80; background: rgba(5,6,10,.6); backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; animation: fadeIn .15s ease; }
.hs-panel { width: 100%; max-width: 640px; max-height: 75vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow: hidden; animation: hsIn .18s ease; }
@keyframes hsIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.hs-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.hs-input .ico { color: var(--muted); flex: none; }
.hs-input input { border: 0; background: none; padding: 4px 0; font-size: 17px; }
.hs-input input:focus { border: 0; }
.hs-input input::-webkit-search-cancel-button { display: none; }
.hs-close { text-decoration: none; font-size: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; }
.hs-filters { display: flex; gap: 6px; padding: 10px 16px 0; }
.hs-filters button { background: var(--bg2); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 4px 12px; font: 600 12.5px var(--sans); cursor: pointer; }
.hs-filters button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.hs-body { overflow-y: auto; padding: 6px 8px 12px; }
.hs-sec { padding: 6px 8px; }
.hs-label { display: flex; justify-content: space-between; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 6px 0; }
.hs-row { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 10px; }
.hs-row:hover, .hs-row.active { background: var(--bg2); color: var(--text); }
.hs-row.active { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.5); }
.hs-row img, .hs-row .noimg { width: 34px; height: 51px; object-fit: cover; border-radius: 5px; flex: none; }
.hs-row b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-row small { color: var(--muted); font-size: 12px; }
.hs-badge { font-size: 11.5px; color: var(--accent); white-space: nowrap; }
.hs-all { display: block; padding: 10px 16px; color: var(--accent); font-weight: 600; font-size: 14px; }
.hs-tip { padding: 8px; }
body.hs-open { overflow: hidden; }
@media (max-width: 720px) {
  .hs-wrap { padding: 0; align-items: stretch; }
  .hs-panel { max-width: none; max-height: none; border-radius: 0; border: 0; }
  .hs-input { padding-top: calc(14px + env(safe-area-inset-top)); }
}

/* =================== VEWD scores, Top 50, episodes, people, Home =================== */
.quick-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .quick-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .quick { padding: 10px 4px; } .quick b { font-size: 11.5px; } }

/* tile badges */
.vscore { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 3px; background: rgba(11,13,18,.85); color: var(--text);
  font: 700 11.5px var(--sans); padding: 2px 7px 2px 3px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb),.45); }
.vscore i { font-style: normal; background: var(--accent); color: var(--accent-ink); border-radius: 50%; width: 15px; height: 15px; display: grid; place-items: center; font-size: 9.5px; font-weight: 800; }
.fav-ribbon { position: absolute; left: 0; top: 8px; background: var(--accent); color: var(--accent-ink); font: 800 10px var(--sans); letter-spacing: .02em; padding: 3px 8px 3px 6px; border-radius: 0 999px 999px 0; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.fav-big { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--accent-ink); font: 800 12.5px var(--sans); padding: 5px 12px; border-radius: 999px; margin: 6px 0; box-shadow: 0 6px 20px rgba(var(--accent-rgb),.3); }
.fav-mini { font-size: 11px; color: var(--accent); font-weight: 700; }
.score.vewd { border-color: rgba(var(--accent-rgb),.6); background: rgba(var(--accent-rgb),.12); }
.score.vewd b { color: var(--accent); }
.score small { color: var(--muted); }
.awards { margin: 8px 0; font-size: 13.5px; color: var(--text); opacity: .9; }
.people-line a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); }
a.castm:hover b { color: var(--accent); }

/* rating breakdown */
.breakdown { display: flex; flex-direction: column; gap: 6px; }
.bd-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 10px; flex-wrap: wrap; }
.bd-score { font-family: var(--serif); font-weight: 800; font-size: 34px; line-height: 1; color: var(--accent); }
.bd-score small { font-size: 18px; margin-left: 2px; }
.bd-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.bd-stars { color: var(--accent); font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
.bd-bar { height: 8px; background: var(--bg2); border-radius: 999px; overflow: hidden; }
.bd-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* episode guide */
.season-tabs { margin-bottom: 8px; }
.ep-meta { margin: 4px 0 8px; }
.ep-list { display: flex; flex-direction: column; gap: 6px; }
.ep-row { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.ep-row .grow { cursor: pointer; min-width: 0; }
.ep-row b { font-size: 14px; }
.ep-row small { display: block; color: var(--muted); font-size: 12px; }
.ep-ov { display: none; margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.ep-row.open .ep-ov { display: block; }
.ep-row.seen { border-color: rgba(var(--accent-rgb),.3); }
.ep-row.seen .ep-n { background: var(--accent); color: var(--accent-ink); }
.ep-row.future { opacity: .6; }
.ep-n { width: 30px; height: 30px; border-radius: 50%; background: var(--bg2); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.ep-mark { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg2); color: var(--text); font-size: 16px; cursor: pointer; flex: none; }
.ep-mark.on { background: rgba(var(--accent-rgb),.15); border-color: var(--accent); color: var(--accent); }
.ep-mark:hover { border-color: var(--accent); }
.ep-best { font-size: 10.5px; padding: 1px 7px; color: var(--accent); border-color: rgba(var(--accent-rgb),.4); }

/* person */
.person-head { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 18px; }
.person-photo { width: 180px; aspect-ratio: 2/3; object-fit: cover; border-radius: 14px; flex: none; box-shadow: 0 16px 40px rgba(0,0,0,.5); display: grid; place-items: center; font-size: 48px; }
.person-head .page-title { margin: 2px 0 6px; }
.person-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 220px)); }
.person-bio { line-height: 1.6; white-space: pre-line; }
.person-bio.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) { .person-head { flex-direction: column; gap: 14px; } .person-photo { width: 130px; } }

/* top 50 */
.tabbtn { padding: 10px 14px; color: var(--muted); font: 600 14px var(--sans); border-bottom: 2px solid transparent; white-space: nowrap; flex: none; }
.tabbtn.on { color: var(--accent); border-color: var(--accent); }
.top-list { display: flex; flex-direction: column; gap: 8px; max-width: 820px; }
.top-row { display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.top-row:hover { border-color: var(--accent); color: var(--text); }
.top-row img, .top-row .noimg { width: 46px; height: 69px; object-fit: cover; border-radius: 6px; flex: none; }
.top-row b { font-size: 15px; }
.top-row small { display: block; color: var(--muted); font-size: 12.5px; margin: 2px 0 4px; }
.top-row .av-stack { margin-left: 0; }
.top-rank { width: 34px; text-align: center; font-family: var(--serif); font-weight: 800; font-size: 22px; color: var(--muted); flex: none; }
.top-rank.medal-1 { color: #f5d33a; } .top-rank.medal-2 { color: #cfd6e0; } .top-rank.medal-3 { color: #e09a5b; }
.top-score { text-align: right; flex: none; }
.top-score b { display: block; font-family: var(--serif); font-size: 20px; color: var(--accent); }
.top-score small { color: var(--muted); font-size: 11.5px; }

/* home */
.home-page { max-width: 1240px; }
.home-hello { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.home-hello .page-title { margin-bottom: 10px; }
.home-row { margin: 22px 0 6px; }
.home-row[hidden] { display: none; }
.row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.row-head h2 { font-size: 20px; margin: 0; }
.row-head a, .row-head .linkish { color: var(--accent); font-size: 13.5px; font-weight: 600; }
.row-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.row-scroll > * { scroll-snap-align: start; min-width: 0; }
@media (max-width: 720px) { .row-scroll { grid-auto-columns: 118px; gap: 10px; margin: 0 -16px; padding: 0 16px 8px; } }
.ranked { position: relative; padding-left: 26px; }
.rank-num { position: absolute; left: 0; bottom: 34px; font-family: var(--serif); font-weight: 800; font-size: 64px; line-height: .8; color: var(--bg); -webkit-text-stroke: 2px var(--accent); z-index: 1; pointer-events: none; }
.row-scroll:has(.ranked) { grid-auto-columns: 176px; }
@media (max-width: 720px) { .row-scroll:has(.ranked) { grid-auto-columns: 140px; } .rank-num { font-size: 52px; } }
.continue-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 320px); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
@media (max-width: 720px) { .continue-list { grid-auto-columns: 82%; margin: 0 -16px; padding: 0 16px 8px; } }
.cont-card { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
.cont-card img, .cont-card .noimg { width: 70px; aspect-ratio: 2/3; object-fit: cover; border-radius: 8px; flex: none; display: block; }
.cont-card b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cont-card small { display: block; color: var(--muted); margin: 2px 0 8px; }
.home-page #homeFeed { max-width: 720px; }

/* =================== motion =================== */

/* poster -> title morph */
.title-poster { view-transition-name: hero-poster; }
::view-transition-group(hero-poster) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }

/* tilt + shine (desktop) */
.tile-img { transform: perspective(700px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transition: transform .25s ease, box-shadow .25s; }
.tile-img.tilting { transition: transform .06s linear; box-shadow: 0 18px 36px rgba(0,0,0,.5); }
.tile-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.28), transparent 45%); mix-blend-mode: soft-light; }
.tile-img.tilting::after { opacity: 1; }
.tile:hover .tile-img { transform: perspective(700px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-3px); }
@media (hover: none) { .tile:active .tile-img { transform: scale(.96); } }

/* scroll reveals */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .45s ease var(--rd, 0ms), transform .5s cubic-bezier(.2,.8,.2,1) var(--rd, 0ms); }
.tile.reveal.in .tile-img { transition: transform .25s ease, box-shadow .25s; }

/* slow pan + parallax on title backdrops */
.title-hero::before { animation: kenburns 32s ease-in-out infinite alternate; translate: 0 var(--py, 0); }
@keyframes kenburns { from { scale: 1.04; } to { scale: 1.14; } }

/* new posts slide in */
.card.new-in { animation: newIn .55s cubic-bezier(.2,.9,.3,1.2), newGlow 1.8s ease; }
@keyframes newIn { from { opacity: 0; transform: translateY(-18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes newGlow { 0%, 40% { box-shadow: 0 0 0 1px var(--accent), 0 0 28px rgba(var(--accent-rgb),.35); } 100% { box-shadow: none; } }

/* pulsing "watching now" */
.story-ring { animation: livePulse 2.4s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.45), 0 0 18px rgba(var(--accent-rgb),.2); } 50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb),0), 0 0 24px rgba(var(--accent-rgb),.35); } }
.av-wrap .dot { animation: dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(95,214,139,.6); } 50% { box-shadow: 0 0 0 4px rgba(95,214,139,0); } }

/* bell */
.bell.wiggle .ico { animation: wiggle .8s ease; transform-origin: 50% 10%; }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(18deg); } 30% { transform: rotate(-15deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
.bell-badge.pop { animation: pop .45s cubic-bezier(.3,1.6,.5,1); }

/* progress rings */
.cont-card { position: relative; }
.ring { width: 46px; height: 46px; flex: none; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring-bg { stroke: var(--bg2); }
.ring-fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 4px rgba(var(--accent-rgb),.5)); }
.ring text { transform: rotate(90deg); transform-origin: 22px 22px; fill: var(--text); font: 700 9.5px var(--sans); }

/* self-drawing ticks */
.tick { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ep-row.just { animation: rowFill .6s ease var(--d, 0ms) both; }
.ep-row.just .tick path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: draw .45s ease calc(var(--d, 0ms) + 150ms) forwards; }
.ep-row.just .ep-n { animation: pop .45s cubic-bezier(.3,1.6,.5,1) var(--d, 0ms) both; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes rowFill { from { background: var(--panel); } 40% { background: rgba(var(--accent-rgb),.16); } to { background: var(--panel); } }

/* flip clock */
.flipclock { display: inline-flex !important; gap: 4px; padding: 4px 8px !important; }
.fu { display: inline-flex; align-items: baseline; gap: 1px; }
.fu i { font-style: normal; font-size: 10px; opacity: .75; }
.fd { display: inline-block; min-width: 1.3em; text-align: center; font-variant-numeric: tabular-nums; perspective: 200px; }
.fd.flip { animation: flip .45s cubic-bezier(.3,1.4,.5,1); }
@keyframes flip { 0% { transform: rotateX(90deg); opacity: .2; } 100% { transform: rotateX(0); opacity: 1; } }

/* badge unlocked */
.badge-unlock { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; background: rgba(5,6,10,.55); backdrop-filter: blur(3px); animation: fadeIn .2s ease; cursor: pointer; }
.badge-unlock.out { opacity: 0; transition: opacity .3s; }
.bu-card { position: relative; overflow: hidden; width: min(320px, 86vw); text-align: center; padding: 28px 22px 22px; border-radius: 22px; background: var(--panel); border: 1px solid rgba(var(--accent-rgb),.5);
  animation: buIn .6s cubic-bezier(.2,1.4,.4,1); box-shadow: 0 0 60px rgba(var(--accent-rgb),.25); }
.bu-glow { position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(var(--accent-rgb),.25), transparent 30%, rgba(123,92,255,.25), transparent 60%); animation: spin 6s linear infinite; }
.bu-card > *:not(.bu-glow) { position: relative; }
.bu-emoji { font-size: 64px; line-height: 1; margin-bottom: 8px; animation: buEmoji .9s cubic-bezier(.3,1.6,.5,1) .15s both; }
.bu-card h3 { font-size: 26px; margin: 4px 0; }
@keyframes buIn { from { opacity: 0; transform: scale(.6) translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes buEmoji { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1) rotate(0); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* animated logo on sign-in + first load */
.signin .brand svg polygon { stroke-dasharray: 120; stroke-dashoffset: 120; fill-opacity: 0; animation: vDraw .9s ease forwards, vFill .4s ease .7s forwards; }
.signin .brand svg polygon:nth-child(2) { animation-delay: .2s, .85s; }
.signin .brand svg text { opacity: 0; animation: fadeUp .5s ease 1s forwards; }
@keyframes vDraw { to { stroke-dashoffset: 0; } }
@keyframes vFill { to { fill-opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.topbar .brand svg polygon { animation: vPop .6s cubic-bezier(.3,1.6,.5,1) both; transform-origin: 20px 24px; }
.topbar .brand svg polygon:nth-child(2) { animation-delay: .08s; }
@keyframes vPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* drifting posters behind the sign-in hero */
.drift { position: fixed; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; padding: 0 14px; overflow: hidden; opacity: .16; pointer-events: none;
  mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%); }
.drift-col { display: flex; flex-direction: column; gap: 14px; animation: driftUp var(--dur) linear infinite; animation-delay: var(--delay); }
.drift-col:nth-child(even) { animation-direction: reverse; }
.drift-col img, .drift-ph { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 10px; display: block; }
.drift-ph { background: linear-gradient(160deg, hsl(var(--h) 60% 35%), hsl(calc(var(--h) + 60) 50% 18%)); }
@keyframes driftUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (max-width: 720px) { .drift { grid-template-columns: repeat(3, 1fr); } .drift-col:nth-child(n+4) { display: none; } }

/* sliding tab underline */
.tabs.has-ind { position: relative; }
.tabs.has-ind > button.on, .tabs.has-ind > .tabbtn.on { border-color: transparent; }
.tab-ind { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; box-shadow: 0 0 10px rgba(var(--accent-rgb),.6);
  transition: transform .3s cubic-bezier(.3,1.2,.5,1), width .3s cubic-bezier(.3,1.2,.5,1), opacity .2s; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .title-hero::before, .story-ring, .av-wrap .dot, .drift-col, .bu-glow { animation: none !important; }
  .tile-img { transform: none !important; }
}
.signin, .signin-feats { position: relative; z-index: 1; }

/* headings never break mid-word */
.page-title, h1, h2, h3 { overflow-wrap: break-word; word-break: normal; }

/* notifications header */
.notif-head { flex-wrap: wrap; gap: 10px 12px; align-items: center; margin-bottom: 14px; }
.notif-head .page-title { margin: 4px 0; flex: 1 1 auto; }
.notif-head .row-actions { margin: 0; gap: 8px; }
.notif-head .btn { white-space: nowrap; }
@media (max-width: 520px) { .notif-head .row-actions { width: 100%; } .notif-head .row-actions .btn { flex: 1; justify-content: center; } }

/* toasts in the VEWD style */
.toast { background: var(--panel); color: var(--text); border: 1px solid rgba(var(--accent-rgb),.45); border-radius: 16px;
  width: max-content; max-width: min(460px, calc(100vw - 32px)); padding: 12px 18px; text-align: center; line-height: 1.45;
  font: 600 14px var(--sans); box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 24px rgba(var(--accent-rgb),.12); animation: toastIn .3s cubic-bezier(.2,.9,.3,1.2); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 720px) { .toast { bottom: calc(150px + env(safe-area-inset-bottom)); } }

/* iPhone install steps */
.install-steps { list-style: none; padding: 0; margin: 14px 0 4px; display: flex; flex-direction: column; gap: 10px; }
.install-steps li { display: flex; gap: 12px; align-items: center; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.step-n { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; flex: none; }
.ios-share { display: inline-grid; place-items: center; vertical-align: middle; width: 26px; height: 26px; border-radius: 7px; background: var(--panel); border: 1px solid var(--line); }
.ios-share .ico { width: 16px; height: 16px; stroke: #4d9fff; }

/* quick seen-it / rate */
.seen-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.seen-bar .muted { width: 100%; }
.pick-tile { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: opacity .3s, transform .3s; }
.pick-tile.gone { opacity: 0; transform: scale(.85); }
.pick-acts { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 4px; }
.pick-acts button { background: var(--bg2); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 6px 0; font: 600 12px var(--sans); cursor: pointer; }
.pick-acts button:hover { border-color: var(--accent); }
.pick-acts button[data-qa="seen"] { color: var(--accent); }
#heroBox { transition: opacity .2s, transform .2s; }
#heroBox.swap { opacity: 0; transform: translateX(-20px); }
.cleared { margin: 6px 0 0; color: var(--accent); }
.qr-head { display: flex; gap: 14px; align-items: center; margin: 6px 0 14px; }
.qr-head img { width: 64px; border-radius: 8px; }
.qr-head b { font-size: 17px; }
.qr-stars { display: flex; justify-content: center; margin: 6px 0 10px; }
.qr-stars .star-input .s { font-size: 44px; }
.qr-faces { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 8px; }
.qr-actions { justify-content: center; }

/* collapsed log card */
#logPanel.logged { border-color: rgba(var(--accent-rgb),.4); }
.season-mini { margin-bottom: 12px; padding: 7px 10px; font-size: 13.5px; }
.log-sum { display: flex; align-items: center; gap: 12px; }
.log-badge { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 18px; flex: none; background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 18px rgba(var(--accent-rgb),.35); }
.log-badge.watching { background: var(--purple); color: #fff; box-shadow: 0 0 18px rgba(123,92,255,.4); }
.log-badge.watchlist { background: var(--bg2); color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.5); box-shadow: none; }
.log-status { font-family: var(--serif); font-weight: 800; font-size: 17px; }
.log-stars { color: var(--accent); letter-spacing: 1px; font-size: 16px; }
.log-review { margin: 12px 0 0; padding: 10px 12px; background: var(--bg2); border-radius: 10px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.log-review.spoiler { filter: blur(5px); cursor: pointer; }
#logPanel .row-actions { margin-top: 12px; }

/* + in the middle of the bottom bar */
.fab { display: none !important; }
@media (max-width: 720px) {
  .bottomnav { grid-template-columns: repeat(5, 1fr); align-items: end; }
  .nav-plus { display: flex; justify-content: center; align-items: center; background: none; border: 0; padding: 0 0 8px; cursor: pointer; }
  .nav-plus span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink);
    margin-top: -18px; box-shadow: 0 8px 22px rgba(var(--accent-rgb),.35), 0 0 0 5px var(--bg); transition: transform .15s; }
  .nav-plus:active span { transform: scale(.9); }
  .nav-plus svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; fill: none; }
  .credits { margin-bottom: 100px; }
  .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (min-width: 721px) { .nav-plus { display: none; } }

/* attribution + import, only at the bottom of your own profile */
.profile-credits { margin: 48px 0 24px; padding: 18px 0 0; border-top: 1px solid var(--line); display: block; max-width: none; }
.profile-credits p { margin: 10px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.pc-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-links a { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 13px; color: var(--text); }
.pc-links a:hover { border-color: var(--accent); }
@media (max-width: 720px) { .profile-credits { margin-bottom: 110px; } #app > :last-child { padding-bottom: 96px; } }
.inv-state { font-size: 12px; color: var(--muted); }
.inv-state.ok { color: var(--green); }
.invite-msg { margin: 10px 0 4px; font-size: 13.5px; line-height: 1.5; resize: none; }

/* Tonight: type + length stack neatly on phones */
.tonight-form .row2 { gap: 12px 16px; }
.tonight-form .seg button { padding: 9px 4px; font-size: 13.5px; }
.tonight-form .field[hidden] { display: none; }
@media (max-width: 720px) {
  .tonight-form .row2 { grid-template-columns: minmax(0, 1fr); }
  .tonight-form .seg { overflow: visible; }
}

/* invites */
.inline-form { display: flex; gap: 8px; align-items: center; }
.inline-form input { flex: 1; min-width: 0; }
.inline-form .btn { flex: none; white-space: nowrap; padding-left: 20px; padding-right: 20px; }
.invites-page { max-width: 760px; }
.invites-page .panel h3 { margin: 4px 0 6px; }
.invite-link-panel { border-color: rgba(var(--accent-rgb),.4); background: linear-gradient(160deg, rgba(var(--accent-rgb),.07), var(--panel) 55%); }
.link-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.link-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.link-list:empty { display: none; }
.link-row { display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.link-row.dead { opacity: .5; }
.link-row code { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: none; padding: 0; color: var(--accent); }
.link-row small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.invrow { gap: 10px; }
.invrow small { font-size: 11.5px; }
.invite-banner { display: flex; gap: 10px; align-items: flex-start; background: rgba(var(--accent-rgb),.1); border: 1px solid rgba(var(--accent-rgb),.45); border-radius: 14px; padding: 12px 14px; margin: 0 0 14px; max-width: 460px; font-size: 14.5px; }
.code-form { margin: 14px 0 6px; }
.invrow > .av, .invrow > .av-wrap { flex: 0 0 auto !important; width: 24px; height: 24px; }

/* Carousels: sideways only, no vertical wobble, no chunky scrollbars */
.row-scroll, .continue-list, .cast, .stories {
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-top: 6px;
}
.row-scroll::-webkit-scrollbar, .continue-list::-webkit-scrollbar, .cast::-webkit-scrollbar, .stories::-webkit-scrollbar { display: none; }
.row-scroll .tile-img { transform: none; }
.row-scroll .tile:hover .tile-img { transform: translateY(-3px); }
.row-scroll .reveal { transform: none; }
.row-tools { display: flex; align-items: center; gap: 12px; }
.row-arrows { display: inline-flex; gap: 6px; }
.row-arrows button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding-bottom: 2px; }
.row-arrows button:hover { border-color: var(--accent); color: var(--accent); }
@media (hover: none), (max-width: 720px) { .row-arrows { display: none; } }
.qr-value { text-align: center; margin: 2px 0 10px; color: var(--accent); min-height: 1.2em; }

/* =================== blur-up images =================== */
.tile-img::before { content: ""; position: absolute; inset: 0; background-image: var(--lq); background-size: cover; background-position: center;
  filter: blur(10px); transform: scale(1.12); opacity: .9; }
.tile-img > img, .card-poster img, .title-poster, .hp-poster, .cont-card img, .spot-poster, .top-row img, .rail-thumb, .person-photo, .castm img {
  filter: blur(14px); opacity: .25; transform: scale(1.03);
  transition: filter .5s ease, opacity .45s ease, transform .5s ease; animation: unblur 0s 4s forwards; }
.tile-img > img { position: relative; }
img.loaded { filter: none !important; opacity: 1 !important; transform: none !important; }
@keyframes unblur { to { filter: none; opacity: 1; transform: none; } }

/* =================== Now watching mini-player =================== */
.mini-player { position: fixed; z-index: 35; left: 50%; transform: translateX(-50%); bottom: 18px; width: min(420px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 8px; border-radius: 16px; cursor: pointer;
  background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(var(--accent-rgb), .35); box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 22px rgba(var(--accent-rgb), .12);
  animation: miniIn .35s cubic-bezier(.2,.9,.3,1.2); }
.mini-player[hidden] { display: none; }
@keyframes miniIn { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
.mini-player img, .mini-player .noimg { width: 36px; height: 54px; border-radius: 6px; object-fit: cover; flex: none; filter: none; opacity: 1; animation: none; }
.mp-text b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-text small { display: block; color: var(--muted); font-size: 11.5px; }
.mp-bar { display: block; height: 3px; border-radius: 3px; background: var(--bg2); margin-top: 5px; overflow: hidden; }
.mp-bar span { display: block; height: 100%; background: var(--accent); }
.mp-btn { flex: none; height: 36px; min-width: 40px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); font: 700 13px var(--sans); cursor: pointer; }
.mp-btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.mp-btn:active { transform: scale(.92); }
.mp-x { flex: none; background: none; border: 0; color: var(--muted); font-size: 14px; padding: 6px; cursor: pointer; }
@media (max-width: 720px) {
  .mini-player { bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.has-mini .toast { bottom: calc(160px + env(safe-area-inset-bottom)); }
}
body.has-mini #app > :last-child { padding-bottom: 150px; }
@media (min-width: 1180px) { .mini-player { left: auto; right: 24px; transform: none; } @keyframes miniIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } }

/* =================== Home spotlight =================== */
.spotlight { position: relative; height: 340px; border-radius: 22px; overflow: hidden; margin: 6px 0 18px; background: var(--panel); border: 1px solid var(--line); }
.spotlight[hidden] { display: none; }
.spot { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .7s ease; color: var(--text); }
.spot.on { opacity: 1; pointer-events: auto; }
.spot-bg { position: absolute; inset: 0; background-image: var(--bg); background-size: cover; background-position: center 25%; filter: blur(var(--blur, 0)); transform: scale(1.06); }
.spot.on .spot-bg { animation: kenburns 14s ease-in-out infinite alternate; }
.spot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,13,18,.95) 0%, rgba(11,13,18,.75) 40%, rgba(11,13,18,.15) 75%), linear-gradient(0deg, rgba(11,13,18,.8), transparent 50%); }
.spot-inner { position: relative; z-index: 1; height: 100%; display: flex; align-items: flex-end; gap: 22px; padding: 28px; }
.spot-poster { width: 150px; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.6); flex: none; }
.spot-text h2 { font-size: clamp(26px, 4vw, 40px); line-height: 1.05; margin: 6px 0 6px; }
.spot-sub { color: var(--text); opacity: .85; margin-bottom: 14px; }
.spot.on .spot-text > * { animation: fadeUp .5s ease both; }
.spot.on .spot-text h2 { animation-delay: .06s; } .spot.on .spot-sub { animation-delay: .12s; } .spot.on .spot-text .btn { animation-delay: .18s; }
.spot-dots { position: absolute; right: 18px; bottom: 16px; z-index: 2; display: flex; gap: 6px; }
.spot-dots button { width: 8px; height: 8px; border-radius: 999px; border: 0; background: rgba(255,255,255,.35); cursor: pointer; transition: width .3s, background .3s; padding: 0; }
.spot-dots button.on { width: 22px; background: var(--accent); }
@media (max-width: 720px) {
  .spotlight { height: 260px; margin: 0 -16px 16px; border-radius: 0; border-left: 0; border-right: 0; }
  .spot-inner { padding: 18px 16px; gap: 14px; }
  .spot-poster { width: 92px; }
  .spot-sub { font-size: 13.5px; margin-bottom: 10px; }
}

/* =================== poster menu =================== */
.tile { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.tile.pressing .tile-img { transform: scale(.95); transition: transform .45s ease; }
.tile-more { position: absolute; left: 6px; top: 6px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(11,13,18,.8); color: var(--text);
  font: 700 16px/1 var(--sans); cursor: pointer; opacity: 0; transition: opacity .15s; display: grid; place-items: center; }
.tile:hover .tile-more { opacity: 1; }
.tile-more:hover { background: var(--accent); color: var(--accent-ink); }
@media (hover: none) { .tile-more { display: none; } }
.fav-ribbon ~ .tile-more { top: 32px; }
.hidden-by-user { opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s; pointer-events: none; }
.pm-head { display: flex; gap: 14px; align-items: center; margin: 4px 0 14px; }
.pm-head img { width: 64px; border-radius: 8px; }
.pm-mine { color: var(--accent); font-weight: 600; font-size: 14px; margin: 2px 0; }
.pm-list { display: flex; flex-direction: column; gap: 4px; }
.pm-list button, .pm-list a { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px; border-radius: 12px; background: none; border: 0; color: var(--text); font: 500 15px var(--sans); text-align: left; cursor: pointer; }
.pm-list button:hover, .pm-list a:hover { background: var(--bg2); color: var(--text); }
.pm-list span { width: 26px; text-align: center; font-size: 18px; }
.pm .modal { animation: pmIn .25s cubic-bezier(.2,.9,.3,1.2); }
@keyframes pmIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .pm .modal { animation: sheetUp .28s cubic-bezier(.2,.9,.3,1); } }

/* iOS Safari keeps a grid row at its old height when the log form collapses; on phones use a simple
   column that always re-measures */
@media (max-width: 860px) {
  .title-grid { display: flex; flex-direction: column; gap: 22px; align-items: stretch; }
  .title-grid > aside { order: -1; position: static; height: auto; }
  .title-grid > section { order: 0; }
}

/* =================== trailer header =================== */
.hero-video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .9s ease; }
.title-hero.video-on .hero-video { opacity: .62; }
.title-hero.video-on.sound-on .hero-video { opacity: .85; }
.title-hero.video-on::before { opacity: 0; transition: opacity 1.2s ease; }
.hero-video iframe { position: absolute; top: 50%; left: 50%; border: 0;
  width: max(var(--hw, 100vw), calc(var(--hh, 420px) * 1.7778)); height: max(var(--hh, 420px), calc(var(--hw, 100vw) * .5625));
  transform: translate(-50%, -50%) scale(1.35); }
.trailer-sound { position: absolute; z-index: 3; right: 16px; top: 14px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2); background: rgba(11,13,18,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 17px; cursor: pointer; opacity: 0; transition: opacity .6s ease .4s; }
.title-hero.video-on .trailer-sound { opacity: 1; }
.title-hero.sound-on .trailer-sound { border-color: var(--accent); box-shadow: 0 0 14px rgba(var(--accent-rgb), .4); }
@media (max-width: 860px) { .title-hero.video-on .hero-video { opacity: .5; } }

/* =================== swipe on feed cards =================== */
.feed .card { position: relative; touch-action: pan-y; }
.feed .card.swiping, .feed .card.sw-release { overflow: hidden; }
.feed .card > * { transform: translateX(var(--dx, 0)); }
.feed .card.sw-release > * { transition: transform .28s cubic-bezier(.2,.9,.3,1.2); }
.feed .card::before, .feed .card::after { position: absolute; top: 50%; font-size: 26px; transform: translateY(-50%) scale(.6); opacity: 0;
  transition: transform .2s cubic-bezier(.3,1.6,.5,1), opacity .15s; pointer-events: none; }
.feed .card::before { content: "❤️"; left: 22px; }
.feed .card::after { content: "💬"; right: 22px; }
.feed .card.sw-right::before, .feed .card.sw-left::after { opacity: .55; }
.feed .card.sw-right.sw-armed::before, .feed .card.sw-left.sw-armed::after { opacity: 1; transform: translateY(-50%) scale(1.15); }
.feed .card.sw-right { background: linear-gradient(90deg, rgba(255,93,143,.16), var(--panel) 45%); }
.feed .card.sw-left { background: linear-gradient(270deg, rgba(var(--accent-rgb),.14), var(--panel) 45%); }
.swipe-hint { display: none; }
@media (hover: none) { .swipe-hint { display: block; text-align: center; color: var(--muted); font-size: 12px; margin: -4px 0 8px; } }

/* =================== slide between tabs =================== */
#app[data-slide="fwd"] > * { animation: slideFwd .32s cubic-bezier(.2,.8,.2,1); }
#app[data-slide="back"] > * { animation: slideBack .32s cubic-bezier(.2,.8,.2,1); }
@keyframes slideFwd { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes slideBack { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { #app[data-slide] > * { animation: none !important; } }

.page.title-actions { padding-bottom: 0 !important; }

/* =================== Rate what you've seen =================== */
.catchup-banner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 0 0 14px; border-radius: 16px;
  background: linear-gradient(120deg, rgba(var(--accent-rgb), .16), rgba(123,92,255,.16)); border: 1px solid rgba(var(--accent-rgb), .45); color: var(--text); }
.catchup-banner:hover { color: var(--text); border-color: var(--accent); }
.catchup-banner b { display: block; font-size: 15.5px; }
.catchup-banner small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.cb-bolt { font-size: 28px; }
.rate-page { max-width: 560px; }
.rate-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rate-head .page-title { margin-bottom: 4px; }
.rate-count { color: var(--muted); font-size: 14px; }
.rate-count b { color: var(--accent); font-size: 18px; }
.rate-filters { margin: 12px 0 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.rate-filters summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-weight: 600; font-size: 14px; }
.rate-filters summary::-webkit-details-marker { display: none; }
.rate-filters[open] summary { margin-bottom: 10px; }
.rate-filters .chips { margin: 8px 0; }
.rate-type { margin-bottom: 4px; }
.rate-stage { position: relative; display: grid; place-items: center; min-height: 420px; perspective: 900px; }
.rate-card { position: relative; width: min(300px, 78vw); aspect-ratio: 2/3; border-radius: 20px; overflow: hidden; background: var(--bg2);
  box-shadow: 0 24px 60px rgba(0,0,0,.6); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
  transition: transform .25s cubic-bezier(.2,.9,.3,1.1), opacity .25s; }
.rate-card.dragging { transition: none; cursor: grabbing; }
.rate-card::before { content: ""; position: absolute; inset: 0; background-image: var(--lq); background-size: cover; filter: blur(12px); transform: scale(1.1); }
.rate-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.rate-card .noimg { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; font-weight: 700; }
.rc-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 16px 16px; background: linear-gradient(transparent, rgba(11,13,18,.95)); }
.rc-info h2 { margin: 0 0 4px; font-size: 22px; line-height: 1.15; }
.rc-sub { color: var(--muted); font-size: 13px; }
.rc-friends { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--accent); font-weight: 600; }
.rc-friends .av-stack > * { border-color: #12141b; }
.rc-stamp { position: absolute; top: 22px; z-index: 2; padding: 6px 12px; border-radius: 10px; font: 800 15px var(--sans); text-transform: uppercase; letter-spacing: .04em; pointer-events: none; }
.rc-left { right: 18px; color: #fff; border: 3px solid #fff; transform: rotate(12deg); opacity: var(--l, 0); }
.rc-right { left: 18px; color: var(--accent); border: 3px solid var(--accent); transform: rotate(-12deg); opacity: var(--r, 0); }
.rate-card.enter { animation: cardIn .3s cubic-bezier(.2,.9,.3,1.2); }
.rate-card.back { animation: cardBack .3s cubic-bezier(.2,.9,.3,1.2); }
@keyframes cardIn { from { opacity: 0; transform: scale(.9) translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cardBack { from { opacity: 0; transform: translateX(-60px) rotate(-6deg); } to { opacity: 1; transform: none; } }
.rate-card.fly-left { transform: translateX(-130%) rotate(-18deg) !important; opacity: 0; }
.rate-card.fly-right { transform: translateX(130%) rotate(18deg) !important; opacity: 0; }
.rate-card.fly-up { transform: translateY(-70%) scale(.85) !important; opacity: 0; }
.rate-card.fly-down { transform: translateY(40%) scale(.8) !important; opacity: 0; }
.rate-card.skel { cursor: default; }
.rate-controls { text-align: center; margin-top: 14px; transition: opacity .2s; }
.rate-controls.off { opacity: .3; pointer-events: none; }
.rate-stars { display: flex; justify-content: center; }
.rate-stars .star-input .s { font-size: 46px; }
.rate-stars .star-input .clear { display: none; }
.rate-controls .qr-faces { margin: 6px 0 12px; }
.rate-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.rate-hint { margin-top: 12px; }
.rate-empty { width: 100%; }
@media (max-width: 720px) { .rate-stage { min-height: 0; } .rate-card { width: min(250px, 66vw); } .rate-stars .star-input .s { font-size: 40px; } }

/* catch-up digest card in the feed */
.digest-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 64px; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 10px 0 8px; padding-bottom: 2px; }
.digest-strip::-webkit-scrollbar { display: none; }
.digest-item { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: var(--accent); text-align: center; letter-spacing: .5px; }
.digest-item img, .digest-item .noimg { width: 64px; aspect-ratio: 2/3; object-fit: cover; border-radius: 7px; font-size: 9px; }
.card.kind-log[data-coll="digest"] { border-color: rgba(var(--accent-rgb), .3); }
.rate-head .btn { flex: none; white-space: nowrap; }

/* Top 10 numbers sit in their own gutter, lined up with the bottom of the poster, never over the title */
.ranked { position: relative; padding-left: 40px; container-type: inline-size; }
.ranked .rank-num { left: 0; bottom: auto; top: calc(100cqw * 1.5 - 50px); font-size: 58px; line-height: 1; letter-spacing: -2px; }
.ranked .rank-num.two { font-size: 40px; letter-spacing: -4px; top: calc(100cqw * 1.5 - 36px); left: -2px; }
.row-scroll:has(.ranked) { grid-auto-columns: 184px; }
@media (max-width: 720px) {
  .row-scroll:has(.ranked) { grid-auto-columns: 148px; }
  .ranked { padding-left: 36px; }
  .ranked .rank-num { font-size: 50px; top: calc(100cqw * 1.5 - 44px); }
  .ranked .rank-num.two { font-size: 34px; top: calc(100cqw * 1.5 - 31px); }
}

/* blended picks */
.blend-head { align-items: center; margin-top: 8px; }
.blend-head .section-title { margin: 0; }
.blend-from { margin: 4px 0 14px; }
.blend-from b { color: var(--text); font-weight: 600; }
.pick-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pick-reason { font-size: 11.5px; color: var(--accent); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* =================== stories =================== */
.stories-view { position: fixed; inset: 0; z-index: 90; background: #05060a; color: #f2f3f5; animation: svIn .25s cubic-bezier(.2,.9,.3,1); touch-action: none; overflow: hidden; }
.stories-view.out { opacity: 0; transform: scale(.96); transition: opacity .2s, transform .2s; }
@keyframes svIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.sv-bg { position: absolute; inset: 0; background-image: var(--bg); background-size: cover; background-position: center; filter: blur(2px) brightness(.55); transform: scale(1.08); animation: kenburns 18s ease-in-out infinite alternate; }
.stories-view::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,10,.7), transparent 25%, transparent 45%, rgba(5,6,10,.92)); pointer-events: none; }
.sv-bars { position: absolute; z-index: 3; top: calc(10px + env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; gap: 4px; }
.sv-bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; }
.sv-bars i { display: block; height: 100%; background: #fff; }
.sv-top { position: absolute; z-index: 3; top: calc(22px + env(safe-area-inset-top)); left: 14px; right: 8px; display: flex; align-items: center; gap: 10px; }
.sv-top b { display: block; font-size: 15px; }
.sv-top small { color: rgba(255,255,255,.7); font-size: 12px; }
.sv-x { background: none; border: 0; color: #fff; font-size: 22px; padding: 8px; cursor: pointer; }
.sv-tap { position: absolute; z-index: 2; top: 80px; bottom: 260px; }
.sv-prev { left: 0; width: 34%; } .sv-next { right: 0; width: 66%; }
.sv-body { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 24px 22px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sv-poster { width: 110px; border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.6); margin-bottom: 6px; filter: none !important; opacity: 1 !important; transform: none !important; animation: none !important; }
.sv-body h2 { font-size: clamp(28px, 7vw, 40px); margin: 0; line-height: 1.05; }
.sv-ep { font-size: 16px; color: var(--accent); font-weight: 700; }
.sv-reacts { display: flex; gap: 8px; margin: 8px 0; }
.sv-reacts button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); font-size: 22px; cursor: pointer; backdrop-filter: blur(6px); transition: transform .15s; }
.sv-reacts button:active { transform: scale(.85); }
.story { cursor: pointer; }
@media (min-width: 721px) { .stories-view .sv-body { max-width: 520px; left: 50%; transform: translateX(-50%); } }

/* =================== poster wall =================== */
.poster-wall { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; background: var(--bg2); }
.poster-wall::before { display: none; }
.poster-wall::after { background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 22%, transparent) 0%, transparent 35%, var(--bg) 96%),
  linear-gradient(90deg, color-mix(in srgb, var(--pc) 18%, transparent), transparent 40%); z-index: 1; }
.pw-row { display: flex; gap: 8px; width: max-content; animation: pwSlide var(--dur) linear infinite; opacity: .6; }
.pw-row.rev { animation-direction: reverse; }
.pw-row img { width: 74px; height: 111px; object-fit: cover; border-radius: 8px; flex: none; filter: saturate(1.1) !important; opacity: 1 !important; transform: none !important; animation: none !important; }
@keyframes pwSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.profile-banner.poster-wall { height: 240px; }
@media (max-width: 720px) { .profile-banner.poster-wall { height: 190px; } .pw-row img { width: 58px; height: 87px; } }

/* =================== Taste DNA =================== */
.dna { margin: 12px 0; }
.dna-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.dna-head h3 { margin: 0; }
.dna-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.dna-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dna-key .k-them { background: var(--pc, var(--accent)); }
.dna-key .k-me { background: var(--purple); margin-left: 6px; }
.dna-key b { color: var(--text); }
.dna-body { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 18px; align-items: center; }
.dna-svg { width: 100%; height: auto; overflow: visible; }
.dna-ring { fill: none; stroke: var(--line); stroke-width: 1; }
.dna-spoke { stroke: var(--line); stroke-width: 1; }
.dna-them { fill: color-mix(in srgb, var(--pc, var(--accent)) 30%, transparent); stroke: var(--pc, var(--accent)); stroke-width: 2.5; stroke-linejoin: round;
  stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: dnaDraw 1.4s ease forwards, dnaFill .6s ease 1s both; transform-origin: 120px 120px; }
.dna-me { fill: rgba(123,92,255,.22); stroke: var(--purple); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; animation: fadeUp .6s ease .5s both; }
@keyframes dnaDraw { to { stroke-dashoffset: 0; } }
@keyframes dnaFill { from { fill-opacity: 0; } to { fill-opacity: 1; } }
.dna-svg text { fill: var(--muted); font: 600 11px var(--sans); }
.dna-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.dna-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 14px; }
.dna-list b { color: var(--pc, var(--accent)); }
.dna-list i { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--pc, var(--accent)) var(--w), var(--bg2) var(--w)); }
@media (max-width: 640px) { .dna-body { grid-template-columns: 1fr; } .dna-svg { max-width: 300px; margin: 0 auto; } }

/* =================== Top 50 podium =================== */
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 12px; align-items: end; margin: 6px 0 18px; }
.pod { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; color: var(--text); min-width: 0; }
.pod:hover { color: var(--text); }
.pod-poster { position: relative; width: 100%; max-width: 150px; aspect-ratio: 2/3; border-radius: 12px; overflow: visible; }
.pod-poster img, .pod-poster .noimg { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 16px 34px rgba(0,0,0,.5); }
.pod-1 .pod-poster { max-width: 180px; }
.pod-1 .pod-poster img { box-shadow: 0 0 0 2px #f5d33a, 0 0 34px rgba(245,211,58,.45), 0 18px 40px rgba(0,0,0,.55); }
.pod-medal { position: absolute; top: -12px; right: -8px; font-size: 30px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); animation: pop .6s cubic-bezier(.3,1.6,.5,1) both; }
.pod b { font-size: 14px; line-height: 1.25; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pod small { color: var(--muted); font-size: 12px; }
.pod-plinth { width: 100%; margin-top: 8px; border-radius: 12px 12px 4px 4px; display: grid; place-items: center; font-family: var(--serif); font-weight: 800; color: rgba(0,0,0,.55); }
.pod-1 .pod-plinth { height: 74px; font-size: 34px; background: linear-gradient(180deg, #ffe680, #d6a91c); box-shadow: 0 0 30px rgba(245,211,58,.3); }
.pod-2 .pod-plinth { height: 52px; font-size: 26px; background: linear-gradient(180deg, #eef1f6, #9aa3b2); }
.pod-3 .pod-plinth { height: 38px; font-size: 22px; background: linear-gradient(180deg, #f1b47c, #a8642e); }
.pod-plinth { transform-origin: bottom; animation: rise .7s cubic-bezier(.2,.9,.3,1.2) both; }
.pod-2 .pod-plinth { animation-delay: .1s; } .pod-3 .pod-plinth { animation-delay: .2s; }
@keyframes rise { from { transform: scaleY(0); } to { transform: none; } }

/* =================== sticky title bar =================== */
.title-sticky { position: fixed; z-index: 19; left: 0; right: 0; top: 56px; display: flex; align-items: center; gap: 12px; padding: 8px max(16px, calc((100vw - 1100px) / 2 + 24px));
  background: color-mix(in srgb, var(--panel) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--tint, var(--accent)) 35%, var(--line)); transform: translateY(-120%); opacity: 0; transition: transform .3s ease, opacity .25s; cursor: pointer; }
html.tinted .title-sticky { border-bottom-color: color-mix(in srgb, var(--page-tint) 45%, var(--line)); }
.title-sticky.on { transform: none; opacity: 1; }
.title-sticky img { width: 30px; height: 45px; object-fit: cover; border-radius: 5px; filter: none !important; opacity: 1 !important; animation: none !important; transform: none !important; }
.title-sticky b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-sticky small { color: var(--muted); font-size: 12px; }
.title-sticky .btn { flex: none; }
@media (min-width: 721px) { .title-sticky { top: 59px; } }

/* =================== full-page colour wash =================== */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .8s ease;
  background: radial-gradient(1100px 700px at 50% -5%, color-mix(in srgb, var(--page-tint, transparent) 26%, transparent), transparent 70%),
    radial-gradient(900px 600px at 100% 100%, color-mix(in srgb, var(--page-tint, transparent) 12%, transparent), transparent 70%); }
html.tinted body::before { opacity: 1; }

/* =================== animated nav pill =================== */
.nav.has-pill { position: relative; isolation: isolate; }
.nav.has-pill a.active { background: transparent; color: var(--accent-ink); }
.nav-pill { position: absolute; left: 0; top: 0; z-index: -1; border-radius: 999px; background: var(--accent); pointer-events: none;
  transition: transform .38s cubic-bezier(.3,1.25,.5,1), width .38s cubic-bezier(.3,1.25,.5,1), opacity .2s; box-shadow: 0 4px 18px rgba(var(--accent-rgb), .35); }
.bottomnav.has-pill { isolation: isolate; }
.bottomnav .nav-pill { background: rgba(var(--accent-rgb), .16); box-shadow: none; border: 1px solid rgba(var(--accent-rgb), .35); }
.bottomnav a span { position: relative; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.bottomnav a.active span { transform: translateY(-1px) scale(1.08); }
.bottomnav a.active .ico { fill: rgba(var(--accent-rgb), .25); }
.bottomnav a.active { font-weight: 600; }

/* =================== branded pull-to-refresh =================== */
.ptr { position: fixed; z-index: 30; left: 50%; top: calc(64px + env(safe-area-inset-top)); width: 46px; height: 46px; margin-left: -23px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.45); display: grid; place-items: center;
  opacity: 0; transform: translateY(calc(-60px + var(--p, 0) * 60px)) scale(calc(.6 + var(--p, 0) * .4)); pointer-events: none; }
.ptr.show { opacity: 1; }
.ptr svg { width: 28px; height: 28px; }
.ptr-v { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 120; stroke-dashoffset: calc(120 - var(--p, 0) * 120); }
.ptr.ready .ptr-v { fill: rgba(var(--accent-rgb), .3); }
.ptr.spin { transform: none; transition: transform .2s; }
.ptr.spin svg { animation: spin .8s linear infinite; }

/* =================== Dynamic-Island alerts =================== */
.toast { top: calc(10px + env(safe-area-inset-top)) !important; bottom: auto !important; border-radius: 999px; padding: 11px 20px; background: #000; color: #fff;
  border: 1px solid rgba(var(--accent-rgb), .35); box-shadow: 0 14px 40px rgba(0,0,0,.5), 0 0 22px rgba(var(--accent-rgb), .15);
  animation: island .45s cubic-bezier(.2,1.3,.4,1) both; z-index: 99; }
.toast.out { animation: islandOut .3s ease forwards; }
@keyframes island { 0% { opacity: 0; transform: translate(-50%, -8px) scaleX(.35) scaleY(.7); } 60% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes islandOut { to { opacity: 0; transform: translate(-50%, -8px) scaleX(.4) scaleY(.7); } }

/* =================== hide-on-scroll header (phones) =================== */
@media (max-width: 720px) {
  .topbar { transition: transform .28s ease; }
  body.header-hidden .topbar { transform: translateY(-100%); }
  body.header-hidden .title-sticky { top: 0; padding-top: calc(8px + env(safe-area-inset-top)); }
  .title-sticky { top: 56px; transition: transform .3s ease, opacity .25s, top .28s ease; }
}

/* =================== seasonal touches =================== */
.brand { position: relative; }
html.season-xmas .topbar .brand::after { content: ""; position: absolute; inset: -6px -10px -4px -10px; pointer-events: none;
  background-image: radial-gradient(2px 2px at 20% 10%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 60% 0%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 85% 20%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 40% 30%, #fff 50%, transparent 51%);
  background-size: 100% 40px; animation: snow 3.5s linear infinite; opacity: .85; }
html.season-xmas .topbar .brand svg polygon:nth-of-type(2) { filter: drop-shadow(0 -2px 0 #fff); }
@keyframes snow { from { background-position: 0 -40px, 0 -20px, 0 -30px, 0 -10px; } to { background-position: 4px 40px, -3px 60px, 2px 50px, -2px 70px; } }
html.season-halloween .topbar .brand::after { content: "🎃"; position: absolute; right: -24px; top: -6px; font-size: 16px; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-3px) rotate(6deg); } }
html.season-wrapped .topbar .brand svg { animation: wrappedGlow 3s ease-in-out infinite; }
@keyframes wrappedGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(var(--accent-rgb), 0)); } 50% { filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), .7)); } }

/* =================== illustrated empty states =================== */
.empty-state { text-align: center; padding: 26px 18px 30px; background: var(--panel); border: 1px dashed var(--line); border-radius: 18px; }
.empty-state .ea { width: 140px; margin: 0 auto 6px; }
.empty-state svg { width: 100%; height: auto; overflow: visible; }
.empty-state h3 { margin: 4px 0 6px; font-size: 18px; }
.empty-state p { color: var(--muted); margin: 0 auto 12px; max-width: 360px; font-size: 14px; line-height: 1.5; }
.ea-fill { fill: rgba(var(--accent-rgb), .08); }
.ea-line { fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ea-accent { fill: var(--accent); }
.ea-pop { fill: #fff8e6; stroke: var(--muted); stroke-width: 2; animation: popc 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ea-pop.d2 { animation-delay: .4s; } .ea-pop.d3 { animation-delay: .9s; }
@keyframes popc { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.ea-spark { fill: var(--accent); animation: twinkle 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ea-spark.d2 { animation-delay: .7s; }
@keyframes twinkle { 0%, 100% { opacity: .3; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.2); } }
.ea-z { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; animation: twinkle 2.2s ease-in-out infinite; }
.grid > .empty-state, .feed > .empty-state { grid-column: 1 / -1; }

/* =================== light mode =================== */
html[data-theme="light"] {
  --bg: #f5f6f8; --bg2: #eceef2; --panel: #ffffff; --line: #e0e3ea; --text: #15171d; --muted: #5d6371; --dim: #cfd3dc; --skel-hi: #f9fafb;
  --red: #e0384a; --green: #1f9d55; color-scheme: light;
}
html[data-theme="light"] body { background: radial-gradient(900px 500px at 85% -10%, rgba(123,92,255,.08), transparent 60%), radial-gradient(700px 400px at -10% 10%, rgba(var(--accent-rgb),.08), transparent 60%), var(--bg); }
html[data-theme="light"] .topbar .brand svg text, html[data-theme="light"] .signin .brand svg text { fill: #15171d; }
html[data-theme="light"] .title-hero, html[data-theme="light"] .spot, html[data-theme="light"] .rc-info, html[data-theme="light"] .hero-pick,
html[data-theme="light"] .wrapped, html[data-theme="light"] .highlight { color: var(--text); }
html[data-theme="light"] .title-hero { color: #f2f3f5; background: #12141b; }
html[data-theme="light"] .title-hero::after { background: linear-gradient(180deg, rgba(11,13,18,.35), rgba(11,13,18,.9)); }
html[data-theme="light"] .title-hero .muted, html[data-theme="light"] .title-hero .tagline { color: rgba(255,255,255,.72); }
html[data-theme="light"] .title-hero .chip { background: rgba(255,255,255,.12); color: #e9eaee; border-color: rgba(255,255,255,.2); }
html[data-theme="light"] .spot { color: #f2f3f5; }
html[data-theme="light"] .rc-info { color: #f2f3f5; }
html[data-theme="light"] .rc-sub { color: rgba(255,255,255,.72); }
html[data-theme="light"] .vscore, html[data-theme="light"] .tile-more { color: #f2f3f5; }
html[data-theme="light"] .hero-pick { color: var(--text); }
html[data-theme="light"] .card, html[data-theme="light"] .panel, html[data-theme="light"] .quick, html[data-theme="light"] .top-row, html[data-theme="light"] .cal-row, html[data-theme="light"] .ep-row {
  box-shadow: 0 1px 2px rgba(20,23,29,.04), 0 6px 18px rgba(20,23,29,.05); }
html[data-theme="light"] .tile-img { box-shadow: 0 6px 18px rgba(20,23,29,.18); }
html[data-theme="light"] .toast { background: #15171d; color: #fff; }
html[data-theme="light"] .stars, html[data-theme="light"] .star-input .s.full, html[data-theme="light"] .stars-inline { text-shadow: none; }
html[data-theme="light"] .rank-num { color: var(--bg); }
html[data-theme="light"] .pw-row { opacity: .75; }
html[data-theme="light"] .mini-player { box-shadow: 0 14px 40px rgba(20,23,29,.18); }
html[data-theme="light"] .theme-seg button.on, html[data-theme="light"] .seg button.on { color: var(--accent-ink); }
.theme-seg { flex: none; width: 210px; }
html[data-theme="light"] .spot .spot-sub, html[data-theme="light"] .spot .hl-tag { color: rgba(255,255,255,.85); }
html[data-theme="light"] .spot .hl-tag { color: var(--accent-soft); }
html[data-theme="light"] .sv-body, html[data-theme="light"] .stories-view { color: #f2f3f5; }

/* =================== profile categories =================== */
.shelf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 16px; }
.shelf-type { flex: none; width: 200px; }
.shelf-sel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.shelf-sel select { width: auto; padding: 7px 30px 7px 10px; font-size: 13.5px; text-transform: none; letter-spacing: 0; border-radius: 999px; }
.shelf-count { margin-left: auto; }
.cat-jump { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -4px 0 14px; padding-bottom: 2px; }
.cat-jump::-webkit-scrollbar { display: none; }
.cat-jump button { flex: none; background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 6px 12px; font: 600 12.5px var(--sans); cursor: pointer; white-space: nowrap; }
.cat-jump button:hover { border-color: var(--accent); }
.cat-jump span { color: var(--accent); margin-left: 3px; }
.cat-group { margin-bottom: 14px; scroll-margin-top: 80px; }
.cat-group > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 10px 2px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.cat-group > summary::-webkit-details-marker { display: none; }
.cat-name { font-family: var(--serif); font-weight: 800; font-size: 17px; }
.cat-count { background: rgba(var(--accent-rgb), .14); color: var(--accent); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; }
.cat-chev { margin-left: auto; color: var(--muted); transition: transform .2s; font-size: 18px; line-height: 1; }
.cat-group:not([open]) .cat-chev { transform: rotate(-90deg); }
.cat-group:not([open]) > summary { margin-bottom: 0; }
@media (max-width: 720px) {
  .shelf-type { width: 100%; }
  .shelf-sel { flex: 1; min-width: 0; }
  .shelf-sel select { flex: 1; min-width: 0; width: 100%; }
  .shelf-count { width: 100%; margin: 0; }
}