/* =====================================================
   CONTENT TRACKER — "STREAMING ANALYTICS" DESIGN
   Brand: deep green (watchlist) + warm gold (ratings)
   Fonts: Inter (UI) — system stack, no external requests
   Radius scale: 14px cards, 8px controls, 999px pills.
   Motion: transform/opacity only; prefers-reduced-motion honored.
   ===================================================== */

:root {
  --bg: #f3f6f4;
  --surface: #ffffff;
  --surface-soft: #f8faf8;
  /* Brand accent — deep green scheme */
  --green: #245c42;
  --green-mid: #3d8b63;
  --green-lite: #7cc4a0;
  --green-pale: #e6f2ea;
  --border: #dbe6de;
  --border-mid: #bcd3c4;
  --gold: #c98a3d;
  --gold-pale: #fdf4e7;
  /* Text — green-neutral palette */
  --text: #10231a;
  --text-mid: #3a5445;
  --text-soft: #4e7a64;
  --red: #c0392b;
  --red-pale: #fde8e8;
  --shadow-sm: 0 1px 2px rgba(16,35,26,.05), 0 4px 14px rgba(16,35,26,.05);
  --shadow-md: 0 12px 32px rgba(16,35,26,.12), 0 2px 6px rgba(16,35,26,.05);
  --r: 14px;
  --nav-h: 60px;
}

/* Dark theme — same variables re-scoped so every component flips automatically */
html.dark {
  --bg: #0c1410;
  --surface: #131e17;
  --surface-soft: #19261e;
  --green: #7cc4a0;
  --green-mid: #4da87e;
  --green-lite: #a9ddc2;
  --green-pale: #1a2d22;
  --border: #24382c;
  --border-mid: #33503f;
  --gold: #e2a860;
  --gold-pale: #352b1c;
  --text: #e6efe9;
  --text-mid: #b3c8ba;
  --text-soft: #93b0a0;
  --red: #e7877a;
  --red-pale: #3a2421;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  --shadow-md: 0 12px 32px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.38);
}
html.dark { color-scheme: dark; }
html.dark nav { background: rgba(15,22,17,.9); border-bottom-color: var(--border); box-shadow: 0 4px 18px rgba(0,0,0,.4); }
html.dark body { background: radial-gradient(circle at 85% 0%, rgba(124,196,160,.06), transparent 28rem), var(--bg); }
html.dark .page-header { background: linear-gradient(115deg, #123526, #1d4a36); }
html.dark .note-card { background: var(--gold-pale); border-color: #4a3a24; }
html.dark .note-body { color: #e8d1b3; }
html.dark .note-body strong { color: #f6e5cc; }
html.dark tbody tr:nth-child(even) td { background: #101b14; }
html.dark .data-filters { background: var(--surface); }
html.dark .df-select, html.dark .df-search { background: var(--surface-soft); }
html.dark select option { background: var(--surface); color: var(--text); }

* { margin: 0; padding: 0; box-sizing: border-box; }
.skip-link { position: fixed; left: 16px; top: 8px; z-index: 1000; padding: 8px 12px; background: var(--surface); color: var(--text); border: 2px solid var(--gold); border-radius: 6px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
html { scroll-behavior: smooth; color-scheme: light; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
button, a, select, input, textarea { touch-action: manipulation; }
button:disabled { cursor: not-allowed; }
body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at 85% 0%, rgba(124,196,160,.08), transparent 28rem), var(--bg); color: var(--text); min-height: 100dvh; overflow-x: hidden; font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }

/* ── LOADING ── */
#loading { position: fixed; inset: 0; background: linear-gradient(160deg, #1b4633, var(--green)); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 999; transition: opacity .5s; }
#loading.hide { opacity: 0; pointer-events: none; }
.loader-mark { color: #fff; opacity: .9; margin-bottom: 18px; display: flex; }
.loader-title { font-family: "Inter", sans-serif; font-size: 26px; font-weight: 700; color: #fff; letter-spacing: -.5px; margin-bottom: 12px; }
.loader-sub { font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 32px; font-weight: 400; }
.loader-bar { width: 200px; height: 3px; background: rgba(255,255,255,.16); border-radius: 2px; overflow: hidden; }
.loader-fill { height: 100%; width: 0; background: linear-gradient(90deg, rgba(255,255,255,.6), #fff); border-radius: 2px; animation: loadBar 1.4s ease forwards; }
@keyframes loadBar { 0% { width: 0 } 60% { width: 70% } 100% { width: 100% } }

/* ── NAV ── */
nav { background: rgba(255,255,255,.9); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 32px; position: sticky; top: 0; z-index: 100; box-shadow: 0 4px 18px rgba(16,35,26,.05); backdrop-filter: blur(14px); min-height: var(--nav-h); }
.nav-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font-family: "Inter", sans-serif; font-size: 15px; font-weight: 700; color: var(--green); letter-spacing: -.25px; padding: 0; margin-right: 34px; white-space: nowrap; cursor: pointer; }
.nav-brand svg { color: var(--gold); }
.nav-tabs { display: flex; flex: 1; gap: 2px; }
.nav-tab { display: flex; align-items: center; gap: 7px; padding: 0 14px; min-height: var(--nav-h); font-size: 13px; font-weight: 500; color: var(--text-soft); cursor: pointer; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s, background-color .2s; white-space: nowrap; user-select: none; }
.nav-tab:hover { color: var(--green); background: var(--green-pale); }
.nav-tab.active { color: var(--green); font-weight: 700; border-bottom-color: var(--green); background: rgba(230,242,234,.6); }
.nav-tab svg { flex-shrink: 0; }

/* ── THEME TOGGLE ── */
.theme-toggle { margin-left: 12px; width: 36px; height: 36px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border-mid); border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s, transform .1s; color: var(--text-mid); }
.theme-toggle:hover { border-color: var(--green); color: var(--green); background: var(--green-pale); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon.show { display: block; }
.theme-toggle .icon-sun.show { display: block; }
html.dark .theme-toggle .icon-sun { display: none; }
html.dark .theme-toggle .icon-sun.show { display: block; }
html.dark .theme-toggle .icon-moon.show { display: none; }

/* ── PAGE HEADER ── */
.page-header { background: linear-gradient(115deg, #1d4f38, var(--green)); padding: 26px 32px; display: flex; align-items: center; justify-content: space-between; position: relative; overflow: hidden; }
.page-header::before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.05); pointer-events: none; }
.page-header::after { content: ""; position: absolute; right: 100px; bottom: -40px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,.03); pointer-events: none; }
.ph-left h1 { font-family: "Inter", sans-serif; font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -.5px; position: relative; }
.ph-left p { font-size: 13px; color: rgba(255,255,255,.92); margin-top: 4px; font-weight: 400; position: relative; }
.ph-right { display: flex; gap: 8px; align-items: center; position: relative; }
.ph-filter { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; height: 30px; padding: 0 10px; font-size: 13px; line-height: 16px; font-weight: 500; color: rgba(255,255,255,.85); cursor: pointer; }
.ph-filter select { background: transparent; border: none; color: #fff; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; padding-right: 4px; }
.ph-filter select:focus-visible, .df-select select:focus-visible, .sf-select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ph-filter select option { background: var(--green); color: #fff; }
/* Was an inline style= on every generated filter label, which is what
   forced style-src 'unsafe-inline'. */
.ph-filter-label { font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.5); margin-right: 6px; font-weight: 500; }

/* ── MAIN ── */
.main { max-width: 1440px; width: 100%; margin: 0 auto; padding: 26px 32px 56px; display: flex; flex-direction: column; gap: 22px; }

/* ── KPI ROW ── */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; animation: fadeUp .5s ease both; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-mid); }
.kpi-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--green-mid); border-radius: var(--r) var(--r) 0 0; opacity: .55; }
.kpi-card.accent-gold::before { background: var(--gold); opacity: 1; }
.kpi-card.accent-red::before { background: var(--red); opacity: .8; }
.kpi-label { font-size: 11.5px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .9px; color: var(--text-mid); margin-bottom: 10px; }
.kpi-val { font-family: "Inter", sans-serif; font-size: 24px; line-height: 28px; font-weight: 700; color: var(--text); letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.kpi-val.negative { color: var(--red); }
.kpi-val small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--text-soft); }
.kpi-sub { font-size: 12px; color: var(--text-soft); margin-top: 10px; display: flex; align-items: center; gap: 6px; min-height: 20px; line-height: 1.4; }
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 500; }
.badge-green { background: var(--green-pale); color: var(--green); }
.badge-gold  { background: var(--gold-pale);  color: var(--gold); }
.badge-red   { background: var(--red-pale);   color: var(--red); }

/* ── CHARTS ROW ── */
.charts-row { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(0, 1.6fr); gap: 18px; }
.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 20px 18px; box-shadow: var(--shadow-sm); animation: fadeUp .5s ease both; }
.chart-title { font-size: 11px; line-height: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-soft); margin-bottom: 18px; }
.chart-canvas-wrap { position: relative; height: 210px; }

/* ── PLATFORM BARS ── */
.plat-bars { display: flex; flex-direction: column; gap: 11px; }
.plat-row { display: flex; align-items: center; gap: 10px; }
.plat-name { font-size: 14px; color: var(--text); width: 140px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plat-track { flex: 1; height: 7px; background: var(--green-pale); border-radius: 4px; overflow: hidden; }
.plat-fill { width: var(--w, 0%); height: 100%; border-radius: 4px; background: var(--green-mid); transition: width 1s cubic-bezier(.4,0,.2,1); }
.plat-fill.top { background: linear-gradient(90deg, var(--green-mid), var(--gold)); }
.plat-count { font-size: 14px; font-weight: 600; color: var(--text); width: 26px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* ── BOTTOM ROW ── */
.bottom-row { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; }

/* ── TREEMAP ── */
.treemap { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: 220px; }
.tm-block { border-radius: 12px; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 16px; cursor: default; transition: transform .2s, filter .2s; position: relative; overflow: hidden; }
.tm-block:hover { transform: scale(1.02); filter: brightness(1.05); }
.tm-block::before { content: ""; position: absolute; top: -24px; right: -24px; width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; }
.tm-block.col1  { grid-row: 1/3; background: linear-gradient(160deg, #2f7a58, var(--green)); }
.tm-block.col2a { background: linear-gradient(160deg, #3f8764, #33694f); }
.tm-block.col2b { background: linear-gradient(160deg, #539a78, #3f7d5e); }
.tm-block.col3a { background: linear-gradient(160deg, #6faf90, #539a78); }
.tm-block.col3b { background: linear-gradient(160deg, #8ac6a8, #6faf90); }
.tm-name { font-family: "Inter", sans-serif; font-size: 16px; font-weight: 600; color: rgba(255,255,255,.95); line-height: 1.2; }
.tm-pct  { font-size: 13px; color: rgba(255,255,255,.82); margin-top: 3px; font-weight: 400; }

/* ── STAT SIDEBAR ── */
.stat-sidebar { display: flex; flex-direction: column; gap: 10px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow-sm); animation: fadeUp .5s ease both; }
.stat-info .stat-label { font-size: 12px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .8px; color: var(--text-mid); }
.stat-info .stat-val   { font-family: "Inter", sans-serif; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--text); letter-spacing: -.1px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.stat-badge2 { background: var(--green-pale); color: var(--green); font-size: 13px; font-weight: 500; padding: 4px 11px; border-radius: 20px; white-space: nowrap; }

/* ── YOY CARD ── */
.yoy-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow-sm); animation: fadeUp .5s ease both; }
.yoy-title { font-size: 12px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .8px; color: var(--text-mid); margin-bottom: 12px; }
.yoy-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.yoy-label { font-size: 13px; color: var(--text-mid); }
.yoy-val { font-family: "Inter", sans-serif; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--text); letter-spacing: -.1px; font-variant-numeric: tabular-nums; }
.yoy-bar-track { height: 5px; background: var(--green-pale); border-radius: 3px; overflow: hidden; margin: 6px 0 4px; }
.yoy-bar-fill  { width: var(--w, 0%); height: 100%; background: var(--green-mid); border-radius: 3px; transition: width .8s ease; }
.yoy-note { font-size: 13px; color: var(--text-mid); font-weight: 400; }

/* ── README HERO ── */
.readme-hero { background: linear-gradient(115deg, #1d4f38, var(--green)); padding: 42px 32px 36px; position: relative; overflow: hidden; }
.readme-hero::before { content: ""; position: absolute; right: -60px; top: -60px; width: 250px; height: 250px; border-radius: 50%; background: rgba(255,255,255,.05); pointer-events: none; }
.readme-hero::after  { content: ""; position: absolute; right: 80px; bottom: -50px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.04); pointer-events: none; }
.readme-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; position: relative; }
.readme-hero h1 { font-family: "Inter", sans-serif; font-size: clamp(26px, 4vw, 40px); font-weight: 750; color: #fff; letter-spacing: -.9px; line-height: 1.06; text-wrap: balance; }
.readme-hero h1 em { font-style: italic; font-weight: 500; color: rgba(255,255,255,.85); font-size: .62em; display: block; letter-spacing: 0; margin-bottom: 4px; }
.readme-desc { font-size: 14px; color: rgba(255,255,255,.95); line-height: 1.75; font-weight: 400; max-width: 560px; margin-top: 8px; position: relative; }
.readme-updated { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 10px 16px; font-size: 12px; color: rgba(255,255,255,.92); text-align: right; flex-shrink: 0; }
.readme-updated strong { display: block; color: #fff; font-size: 14px; margin-bottom: 2px; }
.readme-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative; }
.readme-stat { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 16px; animation: fadeUp .5s ease both; }
.readme-stat:nth-child(1) { animation-delay: .05s }
.readme-stat:nth-child(2) { animation-delay: .1s }
.readme-stat:nth-child(3) { animation-delay: .15s }
.readme-stat:nth-child(4) { animation-delay: .2s }
.rs-label  { font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.88); font-weight: 500; margin-bottom: 8px; }
.rs-val    { font-family: "Inter", sans-serif; font-size: 18px; line-height: 24px; font-weight: 600; color: #fff; letter-spacing: -.1px; font-variant-numeric: tabular-nums; }
.rs-val small { font-size: 13px; font-weight: 500; letter-spacing: 0; }
.rs-sub    { font-size: 13px; color: rgba(255,255,255,.88); margin-top: 6px; font-weight: 400; }
.rs-accent { color: var(--gold); font-weight: 600; }

/* ── README BODY ── */
.readme-main { max-width: 1440px; width: 100%; margin: 0 auto; padding: 30px 32px 48px; display: grid; grid-template-columns: 1fr 320px; gap: 28px; }
.cards-label { font-size: 11px; line-height: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-soft); margin-bottom: 14px; }
.cards-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Slim variant — a one-line row of nav shortcuts instead of four big cards, so
   Recently Watched and the recap sit above the fold. Descriptions move to the
   link's title tooltip. */
.cards-grid.slim { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.info-card.slim { padding: 10px 12px; align-items: center; gap: 10px; }
.info-card.slim .ic-icon { width: 30px; height: 30px; border-radius: 8px; font-size: 15px; }
.info-card.slim .ic-body { min-width: 0; }
.info-card.slim .ic-body h2 { font-size: 14px; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; text-decoration: none; color: inherit; display: flex; align-items: flex-start; gap: 14px; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s, border-color .2s; cursor: pointer; animation: fadeUp .5s ease both; }
.info-card:nth-child(1) { animation-delay: .05s }
.info-card:nth-child(2) { animation-delay: .1s }
.info-card:nth-child(3) { animation-delay: .15s }
.info-card:nth-child(4) { animation-delay: .2s }
.info-card:hover { box-shadow: 0 2px 4px rgba(20,40,32,.06), 0 18px 36px -16px rgba(20,40,32,.22); transform: translateY(-4px); border-color: var(--green-lite); }
.info-card:active, .spin-btn:active:not(:disabled), .sf-submit-btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.ic-icon      { width: 40px; height: 40px; border-radius: 10px; background: var(--green-pale); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; color: var(--green); }
.ic-icon.gold { background: var(--gold-pale); color: var(--gold); }
.ic-body h2   { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.ic-body p    { font-size: 14px; color: var(--text-mid); line-height: 1.6; font-weight: 400; }

/* ── README SIDEBAR ── */
.readme-sidebar { display: flex; flex-direction: column; gap: 14px; align-content: start; }
.fact-card  { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow-sm); animation: fadeUp .5s ease .25s both; }
.fact-title { font-size: 12px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .8px; color: var(--text-mid); margin-bottom: 14px; }
.fact-row   { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; }
.fact-row + .fact-row { border-top: 1px solid var(--border); }
.fact-l { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
.fact-r { font-family: "Inter", sans-serif; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--text); letter-spacing: -.1px; font-variant-numeric: tabular-nums; }
.note-card  { background: var(--gold-pale); border: 1px solid #f0d5b8; border-radius: var(--r); padding: 16px; display: flex; gap: 12px; animation: fadeUp .5s ease .3s both; }
.note-icon  { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.note-body  { font-size: 14px; color: #7a4e1e; line-height: 1.6; font-weight: 400; }
.note-body strong { display: block; color: #5a3510; font-weight: 600; margin-bottom: 3px; font-size: 13px; }

/* ── DATA TAB ── */
.data-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 18px 32px; background: var(--surface); border-bottom: 1px solid var(--border); }
.df-select { display: flex; align-items: center; gap: 6px; background: var(--surface-soft); border: 1px solid var(--border-mid); border-radius: 8px; height: 34px; padding: 0 10px; font-size: 13px; line-height: 16px; font-weight: 500; color: var(--text-mid); cursor: pointer; }
.df-select select { background: transparent; border: none; color: var(--text-mid); font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; outline: none; }
.df-search  { display: flex; align-items: center; gap: 8px; background: var(--surface-soft); border: 1px solid var(--border-mid); border-radius: 8px; height: 34px; padding: 0 11px; font-size: 13px; color: var(--text-soft); min-width: 220px; }
.df-search input { background: transparent; border: none; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; color: var(--text); outline: none; width: 100%; }
.df-search input::placeholder { color: var(--text-soft); }
.df-divider { width: 1px; height: 16px; background: var(--border); margin: 0 2px; }
.data-main { padding: 20px 32px 40px; }
.data-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.data-reset { border: 0; background: transparent; color: var(--green); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.data-reset:hover { background: var(--green-pale); }
.data-count { font-size: 14px; color: var(--text-mid); font-weight: 400; }
.data-count strong { color: var(--text-mid); font-weight: 600; }
/* overflow stays visible so the sticky header can work; the rounded corners are
   painted per-cell (a table with overflow:hidden traps sticky cells in a box
   that never scrolls). Row backgrounds live on the cells for the same reason. */
table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); font-size: 14px; }
thead tr { background: transparent; }
thead th  { padding: 12px 16px; text-align: left; font-size: 12px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.85); }
tbody tr:nth-child(even) td { background: var(--bg); }
tbody tr:hover td { background: var(--green-pale); }
/* Parks under the sticky nav instead of sliding beneath it. */
thead th { position: sticky; top: var(--nav-h); z-index: 2; background: var(--green); }
thead th:first-child { border-top-left-radius: var(--r); }
thead th:last-child  { border-top-right-radius: var(--r); }
tbody tr:last-child td:first-child { border-bottom-left-radius: var(--r); }
tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--r); }
tbody td { padding: 11px 16px; color: var(--text); border-bottom: 1px solid var(--border); }
/* Episode count under the title — phones only (see the ≤600px block). */
.meta-mobile { display: none; }
tbody tr:last-child td { border-bottom: none; }
.row-num { color: var(--text-soft); font-size: 11px; width: 32px; }
.type-pill       { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 500; }
.type-pill.movie { background: var(--gold-pale);  color: var(--gold); }
.type-pill.show  { background: var(--green-pale); color: var(--green); }
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.pag-info { font-size: 13px; color: var(--text-soft); }
.pag-btns { display: flex; gap: 8px; }
.pag-btn  { display: inline-flex; align-items: center; padding: 0 14px; height: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; color: var(--text-mid); cursor: pointer; transition: color .15s, background-color .15s, border-color .15s; }
.pag-btn:hover:not(:disabled) { background: var(--green); color: #fff; border-color: var(--green); }
.pag-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ── SUGGESTIONS ── */
.sugg-page    { padding: 32px 32px; }
.sugg-inner   { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.sugg-filters { background: rgba(45,106,79,.06); border: 1px solid var(--border-mid); border-radius: var(--r); padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sf-label  { display: block; font-size: 12px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .8px; color: var(--text-soft); margin-bottom: 7px; }
.sf-select { width: 100%; background: var(--surface); border: 1px solid var(--border-mid); border-radius: 6px; height: 28px; padding: 0 12px; color: var(--text); font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a9e8a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color .2s; }
.sf-select:hover { border-color: var(--green-lite); }
.result-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 38px 20px 32px; box-shadow: var(--shadow-md); text-align: center; min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.result-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--green), var(--gold), var(--green-lite)); border-radius: 14px 14px 0 0; }
.result-tag  { font-size: 12px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-soft); margin-bottom: 12px; }
.result-name { font-family: "Inter", sans-serif; font-size: clamp(22px, 4vw, 32px); font-weight: 700; color: var(--text); line-height: 1.2; letter-spacing: -.3px; }
.result-name.spinning { animation: slotSpin .5s ease-out; }
.result-name.empty { font-family: "Inter", sans-serif; font-size: 14px; font-weight: 400; color: var(--text-soft); }
.result-name.empty span { display: block; font-size: 28px; margin-bottom: 8px; }
.result-meta { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.rm-badge      { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 20px; font-size: 13px; font-weight: 500; }
.rm-badge.plat { background: var(--green-pale); color: var(--green); }
.rm-badge.type { background: var(--gold-pale);  color: var(--gold); }
.rm-badge.genre { background: #f0f0f0; color: #555; }
.rm-badge.time { background: var(--surface-soft); color: var(--text-mid); }
html.dark .rm-badge.genre { background: #24382c; color: var(--text-mid); }
.result-poster { display: block; width: 84px; height: 126px; margin: 0 auto 14px; border-radius: 8px; object-fit: cover; background: linear-gradient(135deg, var(--green-pale), var(--surface-soft)); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.result-poster.placeholder { display: flex; align-items: center; justify-content: center; font-size: 26px; }
@keyframes slotSpin { 0% { transform: translateY(-18px); opacity: 0 } 40% { transform: translateY(4px); opacity: .7 } 70% { transform: translateY(-3px); opacity: .9 } 100% { transform: translateY(0); opacity: 1 } }
.spin-btn { width: 100%; padding: 13px; background: linear-gradient(135deg, #2e7a56 0%, #1b4032 100%); color: #fff; border: none; border-radius: var(--r); font-family: "Inter", sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s; box-shadow: 0 4px 20px rgba(45,106,79,.35); }
.spin-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 60%); pointer-events: none; }
.spin-btn:hover:not(:disabled)  { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(45,106,79,.45); }
.spin-btn:focus-visible, .sf-submit-btn:focus-visible { box-shadow: 0 0 0 4px rgba(201,138,61,.25), 0 4px 20px rgba(45,106,79,.3); }
.spin-btn:active:not(:disabled) { transform: scale(.98); }
.spin-btn:disabled { opacity: .45; cursor: not-allowed; }
.spin-btn .sbi { font-size: 20px; }
.spin-btn.spinning .sbi { animation: spinIcon .6s ease-out; }
@keyframes spinIcon { 0% { transform: rotate(0) scale(1) } 50% { transform: rotate(200deg) scale(1.3) } 100% { transform: rotate(360deg) scale(1) } }
.try-btn { width: 100%; padding: 11px; background: transparent; color: var(--green-lite); border: 1.5px solid var(--border-mid); border-radius: var(--r); font-family: "Inter", sans-serif; font-size: 14px; cursor: pointer; transition: color .2s, background-color .2s, border-color .2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.try-btn:hover:not(:disabled) { border-color: var(--green-lite); background: var(--green-pale); color: var(--green); }
.try-btn:disabled { opacity: .3; cursor: not-allowed; }
.try-btn .arr { font-size: 16px; transition: transform .3s; }
.try-btn:hover:not(:disabled) .arr { transform: rotate(180deg); }
.sugg-count { text-align: center; font-size: 13px; color: var(--text-soft); }
.sugg-count strong { color: var(--text-mid); font-weight: 600; }
.confetti-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; animation: dotFly .7s ease-out forwards; }
@keyframes dotFly { 0% { transform: translate(0,0) scale(1); opacity: 1 } 100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0 } }
@keyframes ripple { 0% { transform: scale(0); opacity: .4 } 100% { transform: scale(4); opacity: 0 } }
.ripple { position: absolute; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.3); animation: ripple .6s linear forwards; pointer-events: none; }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: translateY(0) } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
.a1 { animation-delay: .05s }
.a2 { animation-delay: .1s }
.a3 { animation-delay: .15s }
.a4 { animation-delay: .2s }
.a5 { animation-delay: .25s }
.a6 { animation-delay: .3s }

/* ── RECENT WATCHES ── */
.rw-section { margin-top: 24px; }
/* minmax(0, 1fr) keeps the three tracks equal even when one title's badges are
   wide — otherwise a long meta row stretches its own column. */
.rw-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rw-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s; animation: fadeUp .5s ease both; }
.rw-card:hover { box-shadow: 0 2px 4px rgba(20,40,32,.06), 0 16px 32px -16px rgba(20,40,32,.2); transform: translateY(-3px); }
/* The poster + text block starts as a span and is swapped for an <a> (class
   name-link) once the media lookup resolves — both states share this rule. */
.rw-link, .rw-card .name-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.rw-poster { width: 54px; height: 80px; flex-shrink: 0; border-radius: 6px; object-fit: cover; background: linear-gradient(135deg, var(--green-pale), var(--surface-soft)); border: 1px solid var(--border); box-shadow: 0 2px 8px -3px rgba(16,35,26,.35); }
.rw-poster.placeholder { display: flex; align-items: center; justify-content: center; font-size: 22px; }
.rw-info { flex: 1; min-width: 0; }
.rw-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
.rw-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; }
.rw-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 500; }
.rw-pill.movie { background: var(--gold-pale); color: var(--gold); }
.rw-pill.show  { background: var(--green-pale); color: var(--green); }
.rw-date { font-size: 12px; color: var(--text-soft); }
.rw-genre { font-size: 12px; color: var(--text-soft); background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 2px 8px; }

/* ── FOOTER ── */
.footer { text-align: right; font-size: 13px; color: var(--text-soft); padding: 0 32px 24px; }

/* ── EMPTY STATE ── */
.empty-state { text-align: center; padding: 48px; color: var(--text-soft); font-size: 14px; font-weight: 400; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.empty-state span { display: block; font-size: 32px; margin-bottom: 12px; }

/* ── ADMIN PAGE ── */
.admin-page { padding: 32px 32px 48px; display: flex; justify-content: center; }
.admin-card { width: min(100%, 440px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 28px 20px; box-shadow: var(--shadow-sm); }
.admin-card h2 { font-size: 20px; margin-bottom: 6px; }
.admin-icon { font-size: 28px; margin-bottom: 12px; }
.sf-custom-value { margin-top: 8px; }

.admin-name-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: stretch; }
.admin-check-btn { width: auto; min-width: 108px; padding: 0 12px; color: var(--green); background: var(--green-pale); border-color: var(--border-mid); }
.admin-check-btn:hover:not(:disabled), .admin-autofill-btn:hover:not(:disabled) { color: var(--green); background: #dcefe3; border-color: var(--green-lite); }
.admin-autofill-btn { color: var(--green); background: #f2f8f4; }
.autofill-spinner { width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: autofillSpin .7s linear infinite; }
@keyframes autofillSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .autofill-spinner { animation: none; border-right-color: currentColor; } }
.admin-name-result { min-height: 20px; margin-top: 6px; font-size: 12px; color: var(--text-soft); }
.admin-name-result.available { color: var(--green); }
.admin-name-result.found { color: var(--gold); }
.admin-match { display: flex; justify-content: space-between; gap: 12px; padding: 7px 9px; margin-top: 5px; background: var(--gold-pale); border: 1px solid #f0d5b8; border-radius: 7px; color: var(--text-mid); }
.admin-match strong { color: var(--text); font-weight: 600; }
.admin-match span { text-align: right; }
.admin-edit-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--green-pale); border: 1px solid var(--border-mid); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--green); margin-bottom: 14px; }
.admin-edit-bar strong { font-weight: 600; }
.admin-edit-cancel { width: auto; padding: 8px 14px; min-height: 0; }
.admin-edit-results { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.admin-edit-empty { font-size: 13px; color: var(--text-soft); padding: 6px 2px; }
.admin-edit-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--surface-soft); border: 1px solid var(--border-mid); border-radius: 8px; }
.admin-edit-info { min-width: 0; }
.admin-edit-name { font-size: 14px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-edit-meta { font-size: 12px; color: var(--text-soft); margin-top: 2px; }
.admin-edit-actions { display: flex; gap: 8px; flex-shrink: 0; }
.admin-edit-btn,
.admin-del-btn { width: auto; min-width: 84px; padding: 8px 14px; min-height: 0; }
.admin-del-btn { color: #e0504d; }
.admin-del-btn:hover:not(:disabled) { border-color: #e0504d; background: rgba(224, 80, 77, 0.08); color: #c0392b; }

/* Duplicate checker */
.admin-dup-results { margin-top: 6px; display: flex; flex-direction: column; gap: 12px; }
.dup-clear, .clean-clear { font-size: 13px; color: var(--green); background: var(--green-pale); border: 1px solid var(--border-mid); border-radius: 10px; padding: 12px 16px; line-height: 1.5; }
.dup-sub, .clean-sub { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--gold); }
.dup-group { border: 1px solid var(--border-mid); border-radius: 10px; overflow: hidden; }
.dup-group-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; background: var(--surface-soft); }
.dup-group-title { font-size: 14px; font-weight: 600; color: var(--text); min-width: 0; }
.dup-group-meta { font-size: 12px; color: var(--text-soft); }
.dup-group-btn { margin-left: auto; width: auto; min-width: 0; padding: 6px 12px; min-height: 0; color: #e0504d; }
.dup-group-btn:hover:not(:disabled) { border-color: #e0504d; background: rgba(224, 80, 77, 0.08); color: #c0392b; }
.dup-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; font-size: 13px; color: var(--text-mid); border-top: 1px solid var(--border-mid); }
.dup-row .try-btn { margin-left: auto; }
.dup-row .admin-del-btn { width: auto; min-width: 84px; padding: 5px 12px; min-height: 0; }
.dup-tag { font-size: 11px; font-weight: 600; border-radius: 20px; padding: 2px 8px; }
.dup-tag.keep { color: var(--green); background: var(--green-pale); }
.dup-tag.copy { color: #c0392b; background: rgba(224, 80, 77, 0.1); }

/* Database cleanup — the raw invalid rows, in a table that scrolls on its own.
   The app's global table styles (`table`, `thead th`, `tbody td`) were written
   when #dat-table was the only table on the site: a sticky green header, row
   borders and the ≤900px column drops. This table opts out of all of them
   explicitly rather than inheriting a header it must not have. */
.admin-clean-btn { width: auto; min-width: 0; padding: 9px 16px; min-height: 0; }
.admin-clean-results { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.clean-table-wrap { overflow-x: auto; border: 1px solid var(--border-mid); border-radius: 10px; }
.clean-table { width: 100%; border-collapse: collapse; font-size: 12.5px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.clean-table th { position: static; text-align: left; white-space: nowrap; padding: 8px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--text-soft); background: var(--surface-soft); }
.clean-table th:first-child, .clean-table th:last-child { border-radius: 0; }
.clean-table td { white-space: nowrap; padding: 7px 10px; border-top: 1px solid var(--border-mid); border-bottom: 0; color: var(--text-mid); }
.clean-table .clean-id { color: var(--text); font-variant-numeric: tabular-nums; }
.clean-table .clean-name { color: var(--text); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.clean-table .clean-null { color: var(--gold); font-style: italic; }
.clean-table .clean-added { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.clean-table td:last-child { text-align: right; }
.clean-table .admin-clean-del { width: auto; min-width: 0; padding: 5px 12px; min-height: 0; }

/* Add-time duplicate warning — the block that stands in for a save that was
   stopped. It sits where the success message would have been, so it reuses
   .sf-error and adds the structure: what was matched, which rows already hold
   it, and (for a rewatch) the deliberate override. */
.admin-dup-stop { line-height: 1.55; }
.admin-dup-stop > strong { display: block; font-size: 14px; }
.admin-dup-what { margin: 7px 0 9px; font-size: 14.5px; font-weight: 600; color: var(--text); }
.admin-dup-kind { font-size: 12.5px; font-weight: 500; color: var(--text-mid); }
.admin-dup-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; margin-bottom: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; font-size: 12.5px; color: var(--text-mid); }
.admin-dup-line strong { font-weight: 600; color: var(--text); white-space: nowrap; }
.admin-dup-line span { text-align: right; }
/* The detail line is information rather than alarm, so it takes the body's
   mid tone instead of the .sf-error red — 4.6:1 was the red's ceiling on the
   pale background. The border is themed like the other destructive buttons. */
.admin-dup-tail { margin-top: 9px; font-size: 13px; color: var(--text-mid); }
.admin-dup-force { width: auto; margin-top: 10px; padding: 8px 14px; min-height: 0; color: var(--red); border-color: var(--border-mid); }
.admin-dup-force:hover:not(:disabled) { color: var(--red); background: rgba(224, 80, 77, .08); border-color: var(--red); }

/* ── SUBMIT PAGE ── */
.submit-page { padding: 28px 32px 48px; display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
.submit-form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 28px 22px; box-shadow: var(--shadow-sm); }
.submit-heading { font-family: "Inter", sans-serif; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--text); letter-spacing: -.1px; margin-bottom: 6px; }
.submit-sub { font-size: 14px; color: var(--text-mid); margin-bottom: 24px; line-height: 1.6; }
.sf-field { margin-bottom: 20px; }
.sf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sf-lbl { display: block; font-size: 12px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .8px; color: var(--text-mid); margin-bottom: 7px; }
.sf-req { color: var(--gold); }
.sf-input { width: 100%; background: var(--surface-soft); border: 1px solid var(--border-mid); border-radius: 8px; font-family: "Inter", sans-serif; font-size: 14px; color: var(--text); padding: 11px 12px; transition: border-color .2s, box-shadow .2s, background-color .2s; appearance: none; }
.sf-input:focus-visible, .df-search:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.sf-input:focus { border-color: var(--green-mid); background: var(--surface); box-shadow: 0 0 0 3px rgba(64,145,108,.14); }
.sf-ta { resize: vertical; min-height: 90px; line-height: 1.6; }
.sf-chars { font-size: 12px; color: var(--text-soft); text-align: right; margin-top: 4px; }
.sf-submit-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #2e7a56 0%, #1b4032 100%); color: #fff; border: none; border-radius: var(--r); font-family: "Inter", sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; transition: transform .15s, box-shadow .15s; box-shadow: 0 4px 20px rgba(45,106,79,.3); }
.sf-submit-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(45,106,79,.4); }
.sf-submit-btn:disabled { opacity: .5; cursor: not-allowed; }
html.dark .sf-submit-btn { background: linear-gradient(135deg, #2e7a56, #1b4032); }
.sf-success, .sf-error { line-height: 1.5; }
.sf-success { background: var(--green-pale); border: 1px solid var(--border-mid); border-radius: 10px; padding: 12px 16px; font-size: 14px; color: var(--green); font-weight: 500; margin-bottom: 14px; }
.sf-error { background: var(--red-pale); border: 1px solid #f5c0c0; border-radius: 10px; padding: 12px 16px; font-size: 14px; color: var(--red); font-weight: 500; margin-bottom: 14px; }
.submit-right { display: flex; flex-direction: column; gap: 16px; }
.submit-side-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow-sm); }
.submit-side-title { font-size: 12px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .8px; color: var(--text-mid); margin-bottom: 14px; }
.sr-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.sr-item:last-child { border-bottom: none; padding-bottom: 0; }
.sr-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--green-pale); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; color: var(--green); }
.sr-name { font-size: 14px; font-weight: 600; color: var(--text); }
.sr-meta { font-size: 12px; color: var(--text-soft); margin-top: 2px; }
.sr-empty { font-size: 14px; color: var(--text-soft); padding: 10px 0; font-style: italic; line-height: 1.5; }
.sr-stat { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.sr-stat:last-child { border-bottom: none; }
.sr-stat-l { font-size: 14px; color: var(--text-mid); }
.sr-stat-r { font-family: "Inter", sans-serif; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--text); letter-spacing: -.1px; font-variant-numeric: tabular-nums; }

/* ── RELEASE CALENDAR ── */
/* Month tabs + the grid. Cells are surface cards like the rest of the app, and
   everything colours from the tokens, so dark mode needs no extra rules beyond
   the two the palette can't express (the active tab's white-on-green and the
   scrim). */
.cal-month-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 32px 0; }
.cal-month-tabs { display: inline-flex; gap: 3px; padding: 3px; background: var(--surface); border: 1px solid var(--border-mid); border-radius: 10px; box-shadow: var(--shadow-sm); }
.cal-month-tab { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-soft); padding: 7px 16px; border-radius: 8px; cursor: pointer; transition: background-color .18s, color .18s; }
.cal-month-tab:hover { color: var(--green); background: var(--green-pale); }
.cal-month-tab.active { background: var(--green); color: #fff; box-shadow: 0 2px 8px rgba(36,92,66,.28); }
.cal-month-tab.active:hover { color: #fff; }
/* In dark mode --green is a LIGHT green, so white-on-green would be the one
   unreadable thing on the page; these three carry dark text instead, and the
   drawer header keeps a dark gradient the way .page-header does. */
html.dark .cal-month-tab.active { background: var(--green-mid); color: #07130d; }
html.dark .cal-month-tab.active:hover { color: #07130d; }
html.dark .cal-today-tag { background: var(--green-mid); color: #07130d; }
html.dark .cal-drawer-top { background: linear-gradient(115deg, #123526, #1d4a36); }
.cal-month-sum { font-size: 13px; color: var(--text-soft); }
/* The filter in force, said out loud. The calendar opens with whatever was
   chosen last, so a short month must not read as an empty one. */
.cal-flag { display: inline-block; margin-right: 2px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--green-mid); background: var(--green-pale); border: 1px solid var(--border-mid); vertical-align: 1px; }
.cal-month-sum strong { color: var(--text-mid); font-weight: 600; font-variant-numeric: tabular-nums; }
/* "updated 14:32" — the auto-update made visible. */
.cal-updated { color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A background refresh that failed, while the last good window is still up: an
   aside, not an alarm — the data on screen is real, only its age is. */
.cal-notice { margin-bottom: 14px; padding: 9px 14px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 8px; font-size: 12.5px; color: var(--text-mid); }

/* ── YEAR SCOPES ── */
/* This year is browsed month by month, next year as a whole. The tabs are above
   the month strip because they decide what the strip even is. */
.cal-scopes { display: flex; gap: 8px; flex-wrap: wrap; padding: 18px 32px 0; }
.cal-scopes + .cal-month-bar { padding-top: 12px; }
.cal-scope-tab { display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 16px; background: var(--surface); border: 1px solid var(--border-mid); border-radius: 10px; font: inherit; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .18s, background-color .18s, color .18s; }
.cal-scope-tab .cal-scope-year { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cal-scope-tab .cal-scope-note { font-size: 11.5px; color: var(--text-soft); }
.cal-scope-tab:hover { border-color: var(--green-mid); }
.cal-scope-tab.active { border-color: var(--green); background: var(--green-pale); }
.cal-scope-tab.active .cal-scope-year, .cal-scope-tab.active .cal-scope-note { color: var(--green); }
html.dark .cal-scope-tab.active { background: rgba(64, 145, 108, .18); }
/* Twelve month names never fit a strip; they scroll, and the active one is kept
   in view by the render. */
.cal-month-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cal-month-tabs::-webkit-scrollbar { display: none; }

/* ── NEXT YEAR AT A GLANCE ── */
.cal-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.cal-year-month { padding: 12px 14px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); }
/* A month with nothing dated yet is genuine white space, so it reads as such. */
.cal-year-month.empty { background: transparent; border-style: dashed; box-shadow: none; }
.cal-year-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.cal-year-head h3 { font-size: 14px; font-weight: 700; color: var(--text); }
.cal-year-meta { font-size: 11.5px; color: var(--text-soft); text-align: right; }
.cal-year-items { display: flex; flex-direction: column; gap: 5px; }
.cal-year-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 8px; }
.cal-year-date { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.cal-year-row .cal-item { padding: 2px 4px; }

.cal-main { padding: 18px 32px 40px; }
.cal-loading { padding: 64px 0 72px; text-align: center; font-size: 13px; color: var(--text-soft); }
.cal-loading .loader-bar { margin: 0 auto 16px; background: var(--green-pale); }
.cal-loading .loader-fill { background: linear-gradient(90deg, var(--green-mid), var(--green)); }
.cal-warn { display: flex; flex-direction: column; gap: 2px; background: var(--gold-pale); border: 1px solid #f0d5b8; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 12.5px; color: var(--text-mid); }
.cal-warn strong { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .9px; color: var(--gold); }
html.dark .cal-warn { border-color: #4a3a24; }
.cal-retry { display: flex; justify-content: center; padding: 18px 0 8px; }
.cal-retry .try-btn { max-width: 220px; }
.cal-none { text-align: center; font-size: 13px; color: var(--text-soft); padding: 16px 0 4px; }

.cal-grid-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.cal-grid-head span { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-soft); }
.cal-grid-body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.cal-cell { display: flex; flex-direction: column; gap: 6px; min-height: 152px; padding: 8px 8px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); }
.cal-cell.cal-blank { background: transparent; border: 0; box-shadow: none; }
/* Days before today are quiet, not empty: the window is the whole month, so a
   past day carries the releases that were on it. The recessed background and the
   muted day number below say "behind us" without washing the posters out — the
   dimming this used to carry was right when those cells could only be blank. */
.cal-cell.past { background: var(--surface-soft); box-shadow: none; }
.cal-cell.today { border-color: var(--green-mid); box-shadow: 0 0 0 2px rgba(64,145,108,.15), var(--shadow-sm); }
.cal-cell-top { display: flex; align-items: center; gap: 6px; min-height: 18px; }
.cal-daynum { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cal-cell.past .cal-daynum, .cal-cell.cal-empty .cal-daynum { font-weight: 600; color: var(--text-soft); }
.cal-today-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #fff; background: var(--green-mid); border-radius: 20px; padding: 1px 7px; }
.cal-cell-count { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--text-soft); background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.cal-cell-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }

.cal-item { position: relative; display: flex; align-items: center; gap: 7px; width: 100%; padding: 3px; border-radius: 8px; font: inherit; text-align: left; cursor: pointer; transition: background-color .15s; }
.cal-item:hover { background: var(--green-pale); }
/* The tile's day-opener: invisible, filling the tile, sitting under its title.
   It has to be a separate element because the title is itself a link (an <a>
   inside a <button> is invalid, and a <button> inside an <a> would eat the
   day), so the whole tile stays clickable without nesting the two. */
.cal-item-open { position: absolute; inset: 0; z-index: 0; width: 100%; padding: 0; background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.cal-item-open:focus-visible { outline: 2px solid var(--green); outline-offset: 0; }
.cal-thumb { width: 26px; height: 38px; flex-shrink: 0; border-radius: 4px; object-fit: cover; background: linear-gradient(135deg, var(--green-pale), var(--surface-soft)); border: 1px solid var(--border); }
.cal-thumb.placeholder { display: flex; align-items: center; justify-content: center; font-size: 13px; }
.cal-item-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* The title is the tile's IMDb link, lifted over .cal-item-open so the click
   lands on it rather than on the day drawer underneath. */
.cal-item-title { position: relative; z-index: 1; font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cal-item-title:hover, .cal-item-title:focus-visible { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.cal-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; }
.cal-tag { padding: 1px 6px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg); font-size: 9.5px; font-weight: 600; color: var(--text-soft); white-space: nowrap; }
.cal-tag.new { border-color: transparent; background: var(--gold-pale); color: var(--gold); }
.cal-tag.seen { border-color: transparent; background: var(--green-pale); color: var(--green); }
.cal-plat { max-width: 100%; font-size: 10px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-more { width: 100%; padding: 3px 0; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 11px; font-weight: 600; color: var(--green); text-align: center; cursor: pointer; }
.cal-more:hover { background: var(--green-pale); }

/* The agenda is the ≤600px view (see the mobile block) — the DOM is always
   there, but only phones show it. */
.cal-agenda { display: none; }
.cal-agenda-day { margin-bottom: 10px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); }
.cal-agenda-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-mid); }
.cal-agenda-head .cal-cell-count { margin-left: auto; }

/* ── DAY DRAWER ── */
.cal-drawer { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: flex-end; }
.cal-drawer-scrim { position: absolute; inset: 0; background: rgba(8,18,12,.5); animation: calFade .18s ease both; }
.cal-drawer-panel { position: relative; display: flex; flex-direction: column; width: min(560px, 100%); height: 100%; max-height: 100%; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -18px 0 48px rgba(8,18,12,.28); animation: calSlide .22s cubic-bezier(.22,.8,.3,1) both; }
.cal-drawer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; background: linear-gradient(115deg, #1d4f38, var(--green)); }
.cal-drawer-title { font-size: 16px; font-weight: 700; letter-spacing: -.2px; color: #fff; }
.cal-drawer-sub { margin-top: 3px; font-size: 12.5px; color: rgba(255,255,255,.86); }
.cal-drawer-close { flex-shrink: 0; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.3); border-radius: 9px; background: rgba(255,255,255,.12); color: #fff; font-size: 15px; cursor: pointer; }
.cal-drawer-close:hover { background: rgba(255,255,255,.22); }
.cal-drawer-note { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 20px; background: var(--gold-pale); border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--text-mid); }
.cal-drawer-showall { padding: 5px 10px; border: 1px solid var(--border-mid); border-radius: 8px; background: var(--surface); font: inherit; font-size: 12px; font-weight: 600; color: var(--green); cursor: pointer; }
.cal-drawer-body { flex: 1; overflow-y: auto; padding-bottom: 26px; }
.cal-row { display: flex; align-items: center; gap: 11px; padding: 9px 20px; border-bottom: 1px solid var(--border); }
.cal-row:hover { background: var(--surface-soft); }
.cal-row .cal-thumb { width: 34px; height: 50px; }
.cal-row-main { flex: 1; min-width: 0; }
.cal-row-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.cal-row-ep { margin-top: 2px; font-size: 12px; color: var(--text-soft); }
/* The title is the IMDb link. It keeps the title's own weight and colour so the
   day still reads as a list, and only the hover says it is a link. */
.cal-row-imdb { color: inherit; text-decoration: none; }
.cal-row-imdb:hover, .cal-row-imdb:focus-visible { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.cal-row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 3px; font-size: 11.5px; color: var(--text-soft); }
.cal-row-rating { display: inline-flex; align-items: center; gap: 4px; }
.cal-row-link { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border-mid); border-radius: 9px; color: var(--green); font-size: 14px; text-decoration: none; }
.cal-row-link:hover { background: var(--green-pale); }
/* Sticky tier headings, so a 300-entry day stays navigable. */
.cal-row-head { position: sticky; top: 0; z-index: 1; padding: 14px 20px 6px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-soft); }
.cal-row-empty { padding: 24px 20px; font-size: 13px; color: var(--text-soft); }
@keyframes calFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes calSlide { from { transform: translateX(24px); opacity: .4 } to { transform: translateX(0); opacity: 1 } }
/* The drawer is a modal sheet: nothing behind it should scroll. */
html.cal-lock, html.cal-lock body { overflow: hidden; }

/* ── RESPONSIVE ── */
/* ── TABLET (≤900px) ── */
@media (max-width: 900px) {
  nav { padding: 0 16px; }
  .nav-brand { margin-right: 12px; font-size: 15px; }
  .nav-tab { padding: 0 10px; font-size: 13px; }
  .main, .readme-main, .data-main, .sugg-page, .submit-page { padding-left: 20px; padding-right: 20px; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .charts-row, .bottom-row, .readme-main, .readme-stats, .submit-page { grid-template-columns: 1fr; }
  /* Between 601px and ~850px the single-row nav is wider than the viewport, so
     the last tabs and the theme toggle used to spill off the edge with no way
     to reach them. Icons go and the strip scrolls (with an edge fade as the
     cue) so every tab stays reachable. */
  .nav-tab svg { display: none; }
  .nav-tab { flex-shrink: 0; }
  .nav-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
              -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
              mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent); }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .data-filters { padding: 12px 20px; }
  /* Calendar — seven columns between 601px and 900px are ~90px wide each, so
     the platform line and the bigger poster give way to keep titles readable. */
  .cal-main { padding: 14px 20px 32px; }
  /* Room for a year's worth of month tabs: they wrap onto a second row here
     rather than scrolling, because a hidden month is a month nobody finds. */
  .cal-scopes { padding: 14px 20px 0; }
  .cal-month-bar { padding: 14px 20px 0; }
  .cal-month-tabs { flex-wrap: wrap; }
  .cal-grid-head, .cal-grid-body { gap: 6px; }
  .cal-cell { min-height: 128px; padding: 6px 6px 4px; }
  /* Seven columns are ~73px each at 601px, and a nowrap "Series premiere" tag is
     81px — wide enough to push the whole document sideways. The tags come out of
     the cell entirely here, which leaves the poster and a two-line title, and
     the day drawer (whose rows have the width for it) keeps the detail. The
     agenda below 600px is a different container and keeps its meta. */
  .cal-cell .cal-item-meta { display: none; }
  /* Day number + "today" + count is wider than a 73px cell, so the header row
     wraps instead of spilling out of it. */
  .cal-cell-top { flex-wrap: wrap; row-gap: 3px; }
  .page-header { padding: 20px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .readme-hero { padding: 28px 24px 24px; }
  .admin-page { padding-left: 20px; padding-right: 20px; }
  .rw-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards-grid { grid-template-columns: 1fr 1fr; }
  .cards-grid.slim { grid-template-columns: 1fr 1fr; }
  /* The 9-column table is ~915px wide, so from 601px up to roughly 950px it
     ran past the viewport and the body's overflow-x:hidden clipped the last
     columns away with no way to reach them at all. Scrolling the table beats
     losing Rating / Watch Date. Note the sticky header only applies where the
     table fits without scrolling — inside a horizontally scrolling wrapper the
     header sticks to that wrapper, which never scrolls vertically (same as the
     phone layout below). */
  #dat-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── MOBILE (≤600px) ── */
@media (max-width: 600px) {
  body { background: var(--bg); }
  nav { backdrop-filter: none; }

  /* Nav — brand + theme toggle on a fixed top row, tabs in their own scroll
     strip below. Previously one long scrolling strip put Timeline / Random Pick
     / Submit off-screen with a hidden scrollbar and no cue, so they were simply
     undiscoverable, and the theme toggle sat off-screen with them. */
  :root { --nav-h: 73px; }   /* must match the measured nav height (see the sticky offsets) */
  nav { padding: 0 10px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 8px; border-bottom: 1px solid var(--border); }
  .nav-brand { padding: 8px 0; margin-right: 0; font-size: 14px; white-space: nowrap; }
  .theme-toggle { grid-column: 2; grid-row: 1; margin: 0; }
  .nav-tabs { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
              padding-bottom: 4px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
              mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent); }
  .nav-tabs::-webkit-scrollbar { display: none; }
  /* min-height must go, or every tab inherits --nav-h and the strip becomes
     74px tall on its own. */
  .nav-tab { padding: 6px 10px; min-height: 0; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
  .nav-tab svg { display: none; }

  /* Page headers */
  .page-header { padding: 18px 16px; gap: 10px; }
  .ph-left h1 { font-size: 18px; }
  .ph-left p { font-size: 13px; }
  .ph-right { flex-wrap: wrap; gap: 6px; width: 100%; }
  .ph-filter { flex: 1; min-width: 120px; min-height: 34px; }

  /* Hero */
  .readme-hero { padding: 22px 16px 20px; }
  .readme-top { flex-direction: column; gap: 12px; margin-bottom: 20px; }
  .readme-hero h1 { font-size: 24px; }
  .readme-desc { font-size: 14px; }
  .readme-updated { text-align: left; }
  .readme-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .readme-stat { padding: 12px 14px; }
  .rs-val { font-size: 18px; }

  /* Readme body */
  .readme-main { padding: 16px; grid-template-columns: 1fr; gap: 16px; }
  .cards-grid { grid-template-columns: 1fr; gap: 10px; }
  .info-card { padding: 14px 16px; }
  .cards-grid.slim { grid-template-columns: 1fr 1fr; gap: 8px; }
  .info-card.slim { padding: 10px 12px; }
  .info-card.slim .ic-body h2 { font-size: 13px; }
  .readme-sidebar { gap: 12px; }
  .rw-strip { grid-template-columns: 1fr; gap: 8px; }
  .rw-card { padding: 12px 14px; }
  .rw-poster { width: 46px; height: 68px; }

  /* KPI cards */
  .main { padding: 16px; gap: 14px; }
  .kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi-card { padding: 14px; }
  .kpi-val { font-size: 20px; line-height: 25px; }
  .kpi-sub { font-size: 12px; flex-wrap: wrap; }

  /* Charts */
  .charts-row { grid-template-columns: 1fr; gap: 12px; }
  .chart-card { padding: 16px 16px; }
  .plat-name { width: 118px; font-size: 13px; }
  .bottom-row { grid-template-columns: 1fr; gap: 12px; }
  .stat-sidebar { gap: 8px; }
  .treemap { height: 180px; }
  .tm-name { font-size: 14px; }

  /* Data filters — wrap into rows */
  .data-filters { flex-wrap: wrap; padding: 12px 16px; gap: 8px; }
  /* Calendar — a seven-column grid is unreadable at 375px, so phones get the
     agenda instead: one row per release, empty days skipped entirely. */
  .cal-grid { display: none; }
  .cal-agenda { display: block; }
  /* The agenda carries the message on phones; the desktop note would repeat it. */
  .cal-none { display: none; }
  .cal-main { padding: 12px 16px 28px; }
  /* A phone cannot wrap twelve months without eating half the screen, so the
     strip scrolls and the render keeps the selected month in view. */
  .cal-scopes { padding: 12px 16px 0; }
  .cal-scope-tab { padding: 8px 12px; }
  .cal-month-bar { padding: 12px 16px 0; gap: 8px; flex-direction: column; align-items: stretch; }
  .cal-month-tabs { flex-wrap: nowrap; width: 100%; }
  .cal-month-tab { padding: 7px 12px; font-size: 12.5px; }
  .cal-month-sum { font-size: 12px; }
  .cal-year { grid-template-columns: 1fr; }
  .cal-item .cal-thumb { width: 30px; height: 44px; }
  .cal-item-title { font-size: 13px; -webkit-line-clamp: 3; }
  .cal-drawer-panel { width: 100%; border-left: 0; }
  .cal-drawer-top { padding: 14px 16px 12px; }
  .cal-drawer-note { padding: 9px 16px; }
  .cal-row { padding: 9px 16px; }
  .cal-row-head { padding: 12px 16px 5px; }
  .df-select { flex: 1 1 100%; min-width: 100%; min-height: 36px; }
  .data-reset { align-self: flex-start; }
  .df-search { width: 100%; min-width: unset; }
  .df-divider { display: none; }
  .data-main { padding: 12px 16px 32px; }

  /* Data table — horizontal scroll, with the Name column frozen and the two
     lowest-value columns (#, Episodes) dropped so the title stays readable
     while you swipe through the rest. The episode count moves under the title
     so that information stays on the page. */
  .meta-mobile { display: block; font-size: 11px; font-weight: 400; color: var(--text-soft); margin-top: 1px; }
  #dat-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--r); position: relative; }
  #dat-table::after { content: "Swipe to view more →"; display: block; padding: 8px 12px; color: var(--text-soft); font-size: 11px; text-align: right; background: var(--surface-soft, var(--bg)); }
  table { font-size: 13px; min-width: 560px; border-radius: 0; }
  thead th { padding: 10px 12px; font-size: 11px; }
  tbody td { padding: 9px 12px; }
  #dat-table thead th:nth-child(1), #dat-table tbody td:nth-child(1),
  #dat-table thead th:nth-child(6), #dat-table tbody td:nth-child(6) { display: none; }
  #dat-table thead th:nth-child(2), #dat-table tbody td:nth-child(2) { position: sticky; left: 0; z-index: 2; background: var(--surface); box-shadow: 1px 0 0 var(--border); }
  #dat-table thead th:nth-child(2) { z-index: 3; background: var(--green); }
  #dat-table tbody tr:nth-child(even) td:nth-child(2) { background: var(--bg); }
  #dat-table tbody tr:hover td:nth-child(2) { background: var(--green-pale); }
  .data-header-row { flex-direction: column; gap: 6px; align-items: flex-start; }
  .pagination { flex-direction: column; gap: 10px; align-items: flex-start; }
  .pag-btns { width: 100%; }
  .pag-btn { flex: 1; text-align: center; }

  /* Suggestions */
  .sugg-page { padding: 16px; }
  .sugg-filters { grid-template-columns: 1fr; gap: 12px; }
  .result-name { font-size: 22px; overflow-wrap: anywhere; max-width: 100%; }
  .spin-btn { font-size: 14px; padding: 12px; }

  /* Submit */
  .submit-page { padding: 16px; grid-template-columns: 1fr; gap: 14px; }
  .admin-page { padding: 16px; }
  .submit-form-card { padding: 20px 16px; }
  .submit-right { width: 100%; }
  .sf-row { grid-template-columns: 1fr; gap: 12px; }
  .admin-name-row { grid-template-columns: 1fr; }
  .admin-check-btn { min-height: 40px; }

  /* Fact / stat cards */
  .fact-card, .yoy-card, .note-card { padding: 14px 16px; }
  .stat-card { padding: 12px 14px; }

  /* Footer */
  .footer { padding: 0 16px 20px; font-size: 12px; }
}

/* ── NEW FEATURES ── */

/* Public rating display in the data table (IMDb/TMDB stars, read-only) */
.rating-cell { white-space: nowrap; }
.rt-stars { display: inline-flex; gap: 1px; vertical-align: -2px; }
.rt-star { color: var(--border-mid); font-size: 14px; }
.rt-star.on { color: var(--gold); }
.rt-num { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--text-mid); font-variant-numeric: tabular-nums; }
.rt-na { color: var(--text-soft); }

/* Year in Screens recap */
.recap-card { margin-top: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; color: var(--text); box-shadow: var(--shadow-sm); animation: fadeUp .55s ease .2s both; }
.recap-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.recap-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-soft); }
.recap-year { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--green); }
.recap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.recap-cell { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; padding: 12px 10px; text-align: center; }
.recap-val { font-size: 20px; font-weight: 800; letter-spacing: -.3px; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.recap-val.recap-name { font-size: 14px; line-height: 1.25; word-break: break-word; }
.recap-lbl { font-size: 11px; color: var(--text-soft); margin-top: 3px; text-transform: uppercase; letter-spacing: .5px; }
.recap-bar { height: 8px; border-radius: 6px; background: var(--border); overflow: hidden; margin-top: 14px; }
.recap-fill { width: var(--w, 0%); height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--green-mid), var(--green)); }
.recap-foot { font-size: 12px; color: var(--text-mid); margin-top: 7px; text-align: center; }

/* Timeline journal */
.timeline { max-width: 900px; margin: 0 auto; padding: 28px 28px 48px; }
.tl-section { margin-bottom: 26px; scroll-margin-top: calc(var(--nav-h) + 62px); }
/* Month headers stick under the nav + jump bar so a long month keeps its label. */
.tl-head { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -.2px; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; position: sticky; top: calc(var(--nav-h) + 48px); z-index: 3; background: var(--bg); padding: 8px 0 6px; }
.tl-count { font-size: 11px; color: var(--green); background: var(--green-pale); padding: 2px 8px; border-radius: 20px; font-weight: 600; }
.tl-list { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.tl-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.tl-item + .tl-item { border-top: 1px solid var(--border); }
.tl-name { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; }
.tl-season { color: var(--text-soft); font-weight: 400; }
.tl-meta { font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.tl-date { font-size: 13px; color: var(--text-mid); }
/* Year jump bar — pins under the nav so you can skip around a 370-item log. */
.tl-jump { position: sticky; top: var(--nav-h); z-index: 4; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 0 10px; background: var(--bg); }
.tl-jump-label { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-soft); font-weight: 700; margin-right: 2px; }
.tl-jump-btn { font: inherit; font-size: 12px; font-weight: 600; color: var(--green); background: var(--green-pale); border: 1px solid var(--border-mid); border-radius: 20px; padding: 4px 12px; cursor: pointer; }
.tl-jump-btn:hover { background: var(--green); color: #fff; }
/* Long months start collapsed rather than making you scroll past everything. */
.tl-extra { display: none; }
.tl-section.expanded .tl-extra { display: flex; }
.tl-more { display: block; width: 100%; font: inherit; font-size: 13px; font-weight: 600; color: var(--green); background: var(--surface-soft); border: 0; border-top: 1px solid var(--border); padding: 10px; cursor: pointer; }
.tl-more:hover { background: var(--green-pale); }

/* Sortable table headers */
.sortable { cursor: pointer; user-select: none; }
/* A translucent-white wash layered over the green (a plain background would
   replace it, and the cells now carry the header colour themselves). */
.sortable:hover { background-image: linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)); }
html.dark .sortable:hover { background-image: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.08)); }
.sortable .sort-arrow { display: inline-block; margin-left: 5px; font-size: 10px; opacity: .7; }

/* Data page toolbar (export / save-default) */
.data-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tool-select { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-soft); }
.tool-select select { font: inherit; font-size: 13px; color: var(--text-mid); background: var(--surface-soft); border: 1px solid var(--border-mid); border-radius: 6px; padding: 4px 6px; cursor: pointer; }
.rating-status { font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.rating-status.complete { color: var(--green); font-weight: 600; }
.pag-page { color: var(--text-soft); }
.tool-btn { border: 0; background: var(--green-pale); color: var(--green); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 10px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; }
.tool-btn:hover { background: var(--green); color: #fff; }
html.dark .tool-btn { background: var(--green-pale); }

/* Insight card rows */
.ins-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; font-size: 13px; }
.ins-row + .ins-row { border-top: 1px solid var(--border); }
.ins-l { color: var(--text-mid); display: flex; align-items: center; gap: 8px; }
.ins-r { text-align: right; color: var(--text); font-weight: 600; }
.ins-sub { color: var(--text-soft); font-weight: 400; font-size: 12px; }
.ins-cta { display: flex; align-items: center; gap: 8px; padding-top: 6px; margin-top: 4px; color: var(--green); font-size: 13px; font-weight: 600; }

/* Watch goal card */
.goal-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.goal-count { font-family: "Inter", sans-serif; font-size: 12px; color: var(--text-soft); }
.goal-count strong { color: var(--text); font-weight: 600; }
.goal-track { height: 10px; background: var(--green-pale); border: 1px solid var(--border-mid); border-radius: 8px; overflow: hidden; margin-top: 10px; }
.goal-fill { width: var(--w, 0%); height: 100%; border-radius: 8px 0 0 8px; background: linear-gradient(90deg, var(--green-mid), var(--gold)); transition: width .8s cubic-bezier(.4,0,.2,1); }
.goal-edit { margin-top: 10px; display: flex; gap: 8px; }
.goal-edit input { flex: 1; min-width: 0; }
.goal-edit input:disabled { opacity: .6; cursor: not-allowed; }
.goal-note { font-size: 12px; color: var(--text-soft); margin-top: 8px; }
.goal-lock-note { color: var(--gold); }

/* Poster + title in the Data table — the whole cell links to IMDb */
.name-link { display: flex; align-items: center; gap: 10px; min-width: 0; }
.poster { width: 42px; height: 60px; flex-shrink: 0; border-radius: 5px; object-fit: cover; background: linear-gradient(135deg, var(--green-pale), var(--surface-soft)); border: 1px solid var(--border); }
.poster.placeholder { display: flex; align-items: center; justify-content: center; font-size: 18px; }
a.name-link { color: inherit; text-decoration: none; cursor: pointer; }
a.name-link:hover .title-cell { color: var(--green-mid); text-decoration: underline; }


/* ── Replacements for the removed inline style attributes ─────────────
   style-src is 'self', so a style= attribute in generated markup is refused
   outright and the element renders unstyled — a silent, layout-only failure.
   Each rule below is the exact declaration the attribute used to carry; the
   four progress-bar widths moved to the --w custom property set by
   paintWidths() in app.js. */
.note-card-wide { max-width: 640px; margin: 0 0 16px; }
.btn-wide  { min-height: 44px; padding: 0 24px; }
.btn-compact { width: auto; padding: 8px 12px; min-height: 0; }
.fact-title-flush { margin-bottom: 0; }
.chart-card-late { animation: fadeUp .5s ease .3s both; }
.stat-label-stack { margin-top: 2px; }
.dh-pill { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 6px 14px; font-size: 12px; color: rgba(255,255,255,.7); }
.dh-pill strong { color: #fff; }
.td-strong { font-weight: 500; }
.td-mid  { color: var(--text-mid); }
.td-soft { color: var(--text-soft); }
.season-note { color: var(--text-soft); font-weight: 400; }