* { box-sizing: border-box; margin: 0; padding: 0; }
html { transition: background 0.3s; }

[data-theme="dark"] {
  --bg: #0c0c0e; --surface: rgba(255,255,255,0.04); --surface2: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.1); --border2: rgba(255,255,255,0.18);
  --text: #f0eff0; --text2: #aaa; --muted: #555;
  --nav-bg: rgba(12,12,14,0.85); --panel-bg: #18181a;
  --auth-bg: rgba(22,22,24,0.9); --input-bg: rgba(255,255,255,0.06);
}
[data-theme="light"] {
  --bg: #c7c9cf; --surface: rgba(255,255,255,0.34); --surface2: rgba(255,255,255,0.26);
  --border: rgba(255,255,255,0.44); --border2: rgba(0,0,0,0.16);
  --text: #111113; --text2: #3f4248; --muted: #6f737b;
  --nav-bg: rgba(201,203,209,0.92); --panel-bg: #bbbfc7;
  --auth-bg: rgba(200,202,208,0.94); --input-bg: rgba(0,0,0,0.075);
}
:root { --accent: #8f949c; --accent-dim: rgba(143,148,156,0.16); --accent-btn-text: #0c0c0e; }

body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; min-height: 100vh; overflow-x: hidden; }

/* ORBS */
.orb { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(120px); will-change: transform; user-select: none; -webkit-user-select: none; }
.orb-1 { width: 600px; height: 600px; background: var(--accent); top: -220px; left: -180px; opacity: 0.18; animation: orbDrift1 14s ease-in-out infinite; }
.orb-2 { width: 500px; height: 500px; background: var(--accent); bottom: -180px; right: -150px; opacity: 0.13; animation: orbDrift2 18s ease-in-out infinite; }
.orb-3 { width: 350px; height: 350px; background: var(--accent); top: 40%; left: 35%; opacity: 0.06; animation: orbDrift3 22s ease-in-out infinite; }
@keyframes orbDrift1 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(30px,25px);} }
@keyframes orbDrift2 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(-35px,-25px);} }
@keyframes orbDrift3 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(20px,-30px);} }
/* isolate orb layer from page content to prevent repaint bleed */
.orb-layer { position:fixed; inset:0; z-index:0; pointer-events:none; contain:strict; }

/* NAV */
nav { display:flex; align-items:center; justify-content:space-between; padding:0 1.75rem; border-bottom:0.5px solid rgba(255,255,255,0.08); position:sticky; top:env(safe-area-inset-top); background:var(--nav-bg); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); z-index:100; height:64px; }
[data-theme="light"] nav { background:#d0d2d8; }
.nav-logo { font-size:1.35rem; font-weight:800; letter-spacing:-0.03em; background:linear-gradient(135deg,var(--text) 0%,var(--accent) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; text-decoration:none; }
.nav-tabs { display:flex; gap:4px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--input-bg); border:0.5px solid var(--glass-border); border-radius:14px; padding:4px; }
.nav-tab { background:none; border:none; color:var(--text2); font-size:0.84rem; font-weight:500; padding:0.42rem 1rem; border-radius:10px; cursor:pointer; transition:color 0.12s, background 0.12s, box-shadow 0.12s; font-family:inherit; text-decoration:none; display:inline-block; white-space:nowrap; }
.nav-tab:hover { color:var(--text); background:var(--surface2); }
.nav-tab.active { color:var(--text); background:var(--surface3); font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.nav-right { display:flex; align-items:center; gap:8px; position:relative; }
.nav-user-btn { background:var(--surface2); border:0.5px solid var(--border); border-radius:20px; color:var(--text2); font-size:0.75rem; padding:0.3rem 0.75rem; cursor:pointer; font-family:inherit; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:border-color 0.12s; }
.nav-user-btn:hover { border-color:var(--accent); color:var(--text); }

/* SETTINGS */
.settings-panel { position:absolute; top:calc(100% + 10px); right:0; width:252px; background:var(--panel-bg); border:0.5px solid var(--border2); border-radius:18px; padding:1.1rem; display:none; z-index:200; box-shadow:0 12px 40px rgba(0,0,0,0.4); }
.settings-panel.open { display:block; }
.settings-label { font-size:0.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:0.55rem; display:block; }
.theme-toggle { display:flex; background:var(--input-bg); border-radius:10px; padding:3px; margin-bottom:1rem; border:0.5px solid var(--border); }
.theme-btn { flex:1; background:none; border:none; border-radius:8px; color:var(--text2); font-size:0.82rem; padding:0.35rem; cursor:pointer; transition:all 0.15s; font-family:inherit; }
.theme-btn.active { background:var(--surface); color:var(--text); border:0.5px solid var(--border); }
.color-presets { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-bottom:0.5rem; }
.color-preset { width:100%; aspect-ratio:1; border-radius:50%; border:2.5px solid transparent; cursor:pointer; transition:transform 0.15s, border-color 0.15s; }
.color-preset:hover { transform:scale(1.18); }
.color-preset.active { border-color:var(--text); }
.color-picker-row { display:flex; align-items:center; gap:10px; }
.color-picker-row label { font-size:0.8rem; color:var(--text2); flex:1; }
input[type="color"] { width:36px; height:28px; border:0.5px solid var(--border2); border-radius:8px; background:var(--input-bg); cursor:pointer; padding:2px; }
.settings-divider { height:0.5px; background:var(--border); margin:0.75rem 0; }
.signout-btn {
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#202126;
  border:1px solid var(--border2);
  border-radius:10px;
  color:var(--text2);
  font-size:0.85rem;
  font-weight:750;
  padding:0.55rem 0.7rem;
  cursor:pointer;
  font-family:inherit;
  box-shadow:none;
  transform:none;
  transition:background .14s ease, border-color .14s ease, color .14s ease;
}
.signout-btn:hover,
.signout-btn:focus-visible {
  background:rgba(248,113,113,0.10);
  border-color:rgba(248,113,113,0.72);
  color:#f87171;
  box-shadow:none;
  transform:none;
  outline:none;
}
.signout-btn:active {
  background:rgba(248,113,113,0.16);
  transform:none;
}

/* PAGE WRAP */
.page-wrap { position:relative; z-index:1; padding:2rem 1.25rem 5rem; max-width:720px; margin:0 auto; contain: layout style; }

/* SHARED COMPONENTS */
.card { background:var(--surface); border:1px solid var(--border2); border-radius:22px; padding:1.4rem; }
.field-label { font-size:0.7rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.1em; display:block; margin-bottom:0.55rem; }
textarea, input[type="text"] { background:var(--input-bg); border:1px solid var(--border2); border-radius:14px; color:var(--text); font-size:1rem; padding:0.8rem 1rem; outline:none; font-family:inherit; transition:border-color 0.15s, box-shadow 0.15s; width:100%; }
@media(max-width:480px){textarea,input[type="text"]{font-size:16px !important;}}
textarea:focus, input[type="text"]:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
textarea { resize:none; min-height:88px; line-height:1.6; }
.primary-btn { background:var(--accent); border:none; border-radius:14px; color:var(--accent-btn-text); font-size:0.94rem; font-weight:700; padding:0.8rem 1.25rem; cursor:pointer; transition:opacity 0.12s, transform 0.1s; font-family:inherit; letter-spacing:-0.01em; }
.primary-btn:hover { opacity:0.88; }
.primary-btn:active { transform:scale(0.97); }
.primary-btn:disabled { opacity:0.38; cursor:not-allowed; }
.primary-btn.full { width:100%; margin-top:0.85rem; }
.secondary-btn { background:var(--input-bg); border:1px solid var(--border2); border-radius:14px; color:var(--text2); font-size:0.85rem; padding:0.6rem 1rem; cursor:pointer; font-family:inherit; transition:border-color 0.12s, color 0.12s; }
.secondary-btn:hover { border-color:var(--accent); color:var(--text); }
.status-msg { font-size:0.8rem; color:var(--muted); text-align:center; margin-top:0.5rem; min-height:1.1em; }

/* TYPE TABS */
.type-tabs { display:flex; gap:5px; margin-bottom:1.1rem; background:var(--input-bg); border-radius:14px; padding:4px; border:1px solid var(--border); position:relative; overflow:hidden; touch-action:pan-y; }
.type-tab { flex:1; background:none; border:none; border-radius:10px; color:var(--text2); font-size:1rem; font-weight:600; padding:0.65rem; cursor:pointer; transition:color 0.15s, transform 0.15s, background 0.2s; font-family:inherit; position:relative; z-index:2; }
.type-tabs::before { content:''; position:absolute; left:var(--tab-slider-left,4px); top:4px; width:var(--tab-slider-width,0px); height:calc(100% - 8px); border-radius:10px; background:var(--accent); box-shadow:0 2px 8px rgba(0,0,0,0.2); opacity:var(--tab-slider-opacity,0); transition:left 0.22s cubic-bezier(.2,.8,.2,1), width 0.22s cubic-bezier(.2,.8,.2,1), opacity 0.18s; z-index:1; pointer-events:none; }
.type-tabs.dragging::before { transition:none; }
.type-tab:hover { color:var(--text); }
.type-tab.active { background:transparent; color:var(--accent-btn-text); box-shadow:none; }
@media(max-width:480px) { .type-tab { color:var(--text); } }
@media(min-width:701px) { .type-tabs { padding:5px; border-radius:16px; } .type-tab { font-size:1.2rem; padding:0.85rem; border-radius:12px; } }

/* ADD BUTTONS */
.add-wrap { display:flex; gap:7px; flex-shrink:0; flex-wrap:wrap; align-items:center; }
.add-wrap-modern { width:auto; }
.add-btn {
  background:linear-gradient(180deg,var(--surface2),var(--input-bg));
  border:1px solid var(--border2);
  border-radius:999px;
  color:var(--text2);
  font-size:0.76rem;
  font-weight:750;
  padding:0.45rem 0.72rem;
  cursor:pointer;
  transition:background 0.16s, border-color 0.16s, color 0.16s, transform 0.12s, box-shadow 0.16s, opacity 0.16s;
  font-family:inherit;
  white-space:nowrap;
  user-select:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  line-height:1;
  min-height:32px;
}
.add-btn:hover { border-color:var(--accent); color:var(--text); box-shadow:0 0 0 3px var(--accent-dim); transform:translateY(-1px); }
.add-btn:active { transform:scale(0.96); }
.add-btn:disabled { cursor:default; transform:none; opacity:0.38; box-shadow:none; }
.add-btn-icon { width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--surface2); font-size:0.76rem; line-height:1; }
.add-btn-watchlist .add-btn-icon { color:#fb923c; }
.add-btn-watching .add-btn-icon { color:#86efac; }
.add-btn-watched .add-btn-icon { color:var(--accent); }
.add-btn-saved { animation:popIn 0.18s ease; }
.add-btn.in-lib-watched { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
.add-btn.in-lib-watching { background:rgba(134,239,172,0.12); border-color:rgba(134,239,172,0.48); color:#86efac; }
.add-btn.in-lib-wl { background:rgba(251,146,60,0.12); border-color:rgba(251,146,60,0.42); color:#fb923c; }
.add-btn-saved .add-btn-icon { background:rgba(255,255,255,0.08); }
.add-btn-x { opacity:0.55; font-size:1rem; margin-left:2px; line-height:0.8; }
.add-btn.just-added { animation:addConfirmPop 0.36s ease; }
@keyframes popIn { 0%{transform:scale(0.92);opacity:0.6} 60%{transform:scale(1.03)} 100%{transform:scale(1);opacity:1} }
@keyframes addConfirmPop { 0%{transform:scale(0.92)} 45%{transform:scale(1.06); box-shadow:0 0 0 5px var(--accent-dim)} 100%{transform:scale(1); box-shadow:none} }
@media(max-width:480px){
  .add-wrap { gap:6px; }
  .add-btn { font-size:0.72rem; padding:0.46rem 0.68rem; min-height:34px; }
}


.add-wrap-modern .add-btn-watching { border-color:rgba(134,239,172,0.32); }
@media(max-width:640px){
  .add-wrap-modern { flex-wrap:wrap; justify-content:flex-end; }
  .search-result .add-wrap-modern, .rec-card .add-wrap-modern { max-width:min(48vw, 260px); }
}

/* BADGES */
.badge { font-size:0.68rem; font-weight:500; padding:2px 8px; border-radius:20px; }
.badge-Film { background:rgba(251,146,60,0.15); color:#fb923c; }
.badge-TV { background:rgba(52,211,153,0.15); color:#34d399; }
.badge-Music { background:rgba(192,132,252,0.15); color:#c084fc; }
.status-badge { font-size:0.68rem; padding:2px 8px; border-radius:20px; font-family:inherit; border:none; cursor:default; }
.status-badge.in-lib-watched { background:var(--accent-dim); color:var(--accent); }
.status-badge.in-lib-watching { background:rgba(134,239,172,0.12); color:#86efac; border:1px solid rgba(134,239,172,0.42); }
.status-badge.in-lib-wl { background:rgba(251,146,60,0.12); color:#fb923c; }

/* STARS */
.stars { display:flex; gap:2px; }
.star-wrap { display:inline-grid; font-size:0.9rem; cursor:pointer; user-select:none; line-height:1; vertical-align:middle; }
.star-wrap .star-bg { grid-area:1/1; color:var(--muted); transition:color 0.08s; }
.star-wrap .star-fg { grid-area:1/1; overflow:hidden; width:0; color:#facc15; pointer-events:none; white-space:nowrap; }
.star-wrap.full .star-bg { color:#facc15; }
.star-wrap.half .star-fg { width:50%; }

/* MODAL */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:500; display:flex; align-items:center; justify-content:center; padding:1rem; opacity:0; pointer-events:none; transition:opacity 0.2s; }
@media(min-width:600px) { .modal-overlay { background:rgba(0,0,0,0.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } }
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal-card { background:var(--panel-bg); border:0.5px solid var(--border2); border-radius:22px; padding:1.5rem; width:100%; max-width:480px; max-height:85vh; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; box-shadow:0 20px 60px rgba(0,0,0,0.4); transform:translateY(12px); transition:transform 0.2s; position:relative; }
@media(min-width:768px) { .modal-card { width:82vw; max-width:900px; max-height:82vh; padding:2rem; } }
@media(min-width:1200px) { .modal-card { width:75vw; max-width:1100px; } }
.modal-overlay.open .modal-card { transform:translateY(0); }
.modal-close { position:absolute; top:1rem; right:1rem; background:var(--surface2); border:0.5px solid var(--border); border-radius:50%; width:30px; height:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:0.85rem; color:var(--text2); line-height:1; }
.modal-close:hover { color:var(--text); }
.modal-top { display:flex; gap:1rem; margin-bottom:1rem; }
.modal-poster { width:80px; height:120px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.modal-poster-sq { width:120px; height:120px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.modal-poster-ph { width:80px; height:120px; border-radius:10px; background:var(--accent-dim); border:0.5px solid var(--accent); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.8rem; }
.modal-poster-ph-sq { width:120px; height:120px; border-radius:10px; background:var(--accent-dim); border:0.5px solid var(--accent); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.8rem; }
.modal-header { flex:1; min-width:0; }
.modal-title { font-size:1.15rem; font-weight:700; letter-spacing:-0.02em; margin-bottom:4px; }
.modal-meta { font-size:0.78rem; color:var(--text2); margin-bottom:6px; }
.modal-ratings { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.modal-rating-pill { font-size:0.75rem; padding:3px 10px; border-radius:20px; font-weight:600; }
.modal-rating-imdb { background:rgba(245,197,24,0.15); color:#f5c518; }
.modal-rating-tmdb { background:rgba(1,180,228,0.15); color:#01b4e4; }
.modal-overview { font-size:0.88rem; color:var(--text2); line-height:1.6; margin-bottom:1rem; }
.modal-footer { display:flex; justify-content:flex-end; margin-bottom:1rem; }

/* User rating in detail modal */
.modal-user-rating { margin-bottom:0.75rem; animation:fadeUp 0.3s ease; }
.modal-user-rating-label { font-size:0.68rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.3rem; }
.modal-stars { display:flex; gap:3px; }
.modal-stars .star-wrap { display:inline-grid; font-size:1.4rem; cursor:pointer; user-select:none; line-height:1; vertical-align:middle; }
.modal-stars .star-bg { grid-area:1/1; color:var(--muted); }
.modal-stars .star-fg { grid-area:1/1; overflow:hidden; width:0; color:#facc15; pointer-events:none; white-space:nowrap; }
.modal-stars .star-wrap.full .star-bg { color:#facc15; }
.modal-stars .star-wrap.half .star-fg { width:50%; }
.modal-watchlist-msg { font-size:0.78rem; color:var(--muted); font-style:italic; }

/* Friend ratings in detail modal */
.modal-friend-ratings { margin-top:0.75rem; padding-top:0.75rem; border-top:0.5px solid var(--border); animation:fadeUp 0.3s ease; }
.modal-friend-ratings-label { font-size:0.68rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.5rem; }
.modal-friend-rating-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0.4rem 0; }
.modal-friend-rating-row + .modal-friend-rating-row { border-top:0.5px solid var(--border); }
.modal-friend-name { font-size:0.8rem; font-weight:600; color:var(--text2); }
.modal-friend-stars { font-size:0.8rem; white-space:nowrap; }

@keyframes fadeUp { from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);} }
@keyframes imgIn { from{opacity:0;transform:scale(0.98);}to{opacity:1;transform:scale(1);} }
img[loading="lazy"] { animation:imgIn 0.2s ease; }

/* MOBILE / PWA */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .page-wrap { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
}
@supports (padding-top: env(safe-area-inset-top)) {
  .page-wrap { padding-top: calc(1rem + env(safe-area-inset-top)); }
}
body { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
/* Fix iOS bottom bar bleed — use accent color for bottom fill */
/* Safe-area handling: extend the nav's own background upward using padding,
   not a separate floating element, so nothing can ever sit above or block it. */
html { background: var(--bg); height: 100%; }
body { min-height: 100%; padding-bottom: env(safe-area-inset-bottom); }
/* Smooth scrolling on iOS */
.page-wrap { -webkit-overflow-scrolling: touch; }
/* Prevent text size adjust on orientation change */
html { -webkit-text-size-adjust: 100%; }
/* Bottom safe area fill matches bg */
/* bottom safe area handled by html background */

@media(max-width:480px) {
  nav { padding:0.9rem 0.85rem; top:env(safe-area-inset-top); min-height:2.5rem; }
  .nav-user-btn { max-width:72px; font-size:0.7rem; padding:0.35rem 0.6rem; }
  .nav-logo { font-size:1.1rem; }
  .nav-tab { font-size:0.78rem; padding:0.36rem 0.55rem; }
  .nav-tabs { gap:1px; }
  /* Type tabs: always 3 equal columns on mobile */
  .type-tabs { display:grid; grid-template-columns:1fr 1fr 1fr; flex-wrap:unset; }
  .type-tab { flex:unset; }
  .rec-card-inner { gap:10px; }
  .add-wrap { flex-direction:row; gap:6px; }
  .modal-footer .add-wrap { flex-direction:row; }
  .modal-footer .add-btn { flex:1; }
  .modal-card { border-radius:16px; padding:1.25rem; }
}

/* RATING MODAL */
.rating-sheet-title { font-size:1.05rem; font-weight:700; letter-spacing:-0.01em; margin-bottom:0.25rem; }
.rating-sheet-sub { font-size:0.78rem; color:var(--muted); margin-bottom:1.1rem; }
.rating-sheet-stars { display:flex; gap:8px; justify-content:center; margin-bottom:1.25rem; }
.rating-sheet-stars .star-wrap { font-size:2.2rem; }
.rating-sheet-stars .star-bg { font-size:2.2rem; }
.rating-sheet-skip { width:100%; background:none; border:0.5px solid var(--border); border-radius:12px; color:var(--text2); font-size:0.85rem; padding:0.6rem; cursor:pointer; font-family:inherit; transition:border-color 0.12s; margin-top:0.25rem; }
.rating-sheet-skip:hover { border-color:var(--border2); }

/* INBOX NAV BTN */
.inbox-nav-btn { position:relative; background:var(--surface2); border:0.5px solid var(--border); color:var(--text2); font-size:0.9rem; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-family:inherit; transition:border-color 0.12s, color 0.12s; flex-shrink:0; }
.inbox-nav-btn:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-dim); }
.inbox-nav-badge { position:absolute; top:-2px; right:-2px; background:var(--accent); color:var(--accent-btn-text); border-radius:50%; width:15px; height:15px; font-size:0.6rem; font-weight:700; display:none; align-items:center; justify-content:center; }
.inbox-nav-badge.show { display:flex; }

/* ── EPISODE RATINGS ───────────────────────────────────────────────────────── */
.ep-panel-wrap { margin-top:1.25rem; padding-top:1rem; border-top:0.5px solid var(--border); }
.ep-panel-label { font-size:0.67rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.75rem; }

.ep-season { border:0.5px solid var(--glass-border); border-radius:var(--r-md); overflow:hidden; margin-bottom:8px; }
.ep-season-toggle {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  position:relative;
  background:var(--glass); border:none; padding:0.7rem 0.9rem;
  cursor:pointer; font-family:inherit; gap:8px;
  transition:background var(--t-fast);
}
.ep-season-toggle:hover { background:var(--surface2); }
.ep-season-toggle.open { background:var(--surface2); }
.ep-season-name {
  position:absolute; left:50%; transform:translateX(-50%);
  font-size:0.88rem; font-weight:700; color:var(--text); letter-spacing:-0.01em;
  white-space:nowrap; pointer-events:none;
}
.ep-season-right { display:inline-flex; align-items:center; gap:8px; flex-shrink:0; }
.ep-season-stats { display:flex; gap:6px; align-items:center; }
.ep-stat { font-size:0.7rem; color:var(--text2); }
.ep-stat strong { color:var(--text); }
.ep-chevron { font-size:0.9rem; color:var(--muted); transition:transform var(--t-fast); display:inline-block; }
.ep-season-toggle.open .ep-chevron { transform:rotate(90deg); }

.ep-season-body { padding:0.5rem 0; }

.ep-chart-wrap { padding:0.25rem 0.75rem 0.5rem; }
.ep-chart { width:100%; height:auto; display:block; }

.ep-list { display:flex; flex-direction:column; }
.ep-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:0.45rem 0.9rem; gap:8px;
  border-top:0.5px solid var(--border);
  transition:background var(--t-fast);
}
.ep-row:hover { background:var(--surface); }
.ep-info { display:flex; align-items:center; gap:6px; min-width:0; flex:1; }
.ep-num { font-size:0.72rem; font-weight:700; color:var(--muted); flex-shrink:0; width:24px; }
.ep-name { font-size:0.82rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ep-runtime { font-size:0.68rem; color:var(--muted); flex-shrink:0; }
.ep-rating-wrap { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.ep-star-picker { display:flex; gap:1px; }
.ep-clear-btn { background:none; border:none; color:var(--muted); font-size:0.95rem; line-height:1; cursor:pointer; padding:0 2px; font-family:inherit; transition:color var(--t-fast); flex-shrink:0; }
.ep-clear-btn:hover { color:#f87171; }
.ep-star-picker .star-wrap { display:inline-grid; font-size:0.82rem; cursor:pointer; user-select:none; line-height:1; vertical-align:middle; }
.ep-star-picker .star-bg { grid-area:1/1; color:var(--muted); transition:color 0.07s; }
.ep-star-picker .star-fg { grid-area:1/1; overflow:hidden; width:0; color:#facc15; pointer-events:none; white-space:nowrap; }
.ep-star-picker .star-wrap.full .star-bg { color:#facc15; }
.ep-star-picker .star-wrap.half .star-fg { width:50%; }

/* ── DESKTOP EPISODE RATINGS ENHANCEMENTS ── */
@media (min-width: 768px) {
  .ep-panel-wrap { margin-top:1.5rem; padding-top:1.25rem; }
  .ep-panel-label { font-size:0.75rem; margin-bottom:1rem; }
  .ep-season { margin-bottom:10px; }
  .ep-season-toggle { padding:0.8rem 1rem; }
  .ep-season-name { font-size:1rem; }
  .ep-season-stats { gap:10px; }
  .ep-stat { font-size:0.78rem; }
  .ep-stat strong { font-size:0.85rem; }

  .ep-season-body { padding:0.75rem 0; }
  .ep-chart-wrap { padding:0.5rem 1rem 0.75rem; }
  .ep-row {
    padding:0.55rem 1rem;
    gap:14px;
    border-top:0.5px solid var(--border);
  }
  .ep-info { gap:10px; }
  .ep-num { font-size:0.8rem; width:32px; }
  .ep-name { font-size:0.9rem; }
  .ep-runtime { font-size:0.75rem; }
  .ep-rating-wrap { gap:8px; }
  .ep-star-picker .star-wrap { font-size:1rem; padding:2px; }
  .ep-clear-btn { font-size:1.1rem; padding:0 4px; }
}

@media (min-width: 1024px) {

  .ep-row {
    padding:0.65rem 1.25rem;
    gap:16px;
  }
  .ep-info { gap:12px; }
  .ep-num { font-size:0.85rem; width:38px; }
  .ep-name { font-size:0.95rem; }
  .ep-runtime { font-size:0.78rem; }
  .ep-rating-wrap { gap:10px; }
  .ep-star-picker .star-wrap { font-size:1.1rem; padding:3px; }
  .ep-clear-btn { font-size:1.2rem; padding:0 6px; }
}

@media(max-width:480px) {
  .ep-name { font-size:0.78rem; }
  .ep-star-picker .star-wrap { font-size:0.75rem; }
}

/* ── EPISODE WATCHED CHECKBOXES ────────────────────────────────────────── */
.ep-check, .ep-season-cb-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; user-select: none;
}
.ep-check input[type="checkbox"],
.ep-season-cb-wrap input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.ep-cb-dot {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--muted);
  background: none;
  transition: background var(--t-fast), border-color var(--t-fast), transform 0.1s ease;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative;
}
.ep-check input:checked ~ .ep-cb-dot,
.ep-season-cb-wrap input:checked ~ .ep-cb-dot {
  background: var(--accent);
  border-color: var(--accent);
}
.ep-cb-dot::after {
  content: '';
  width: 4px; height: 7px;
  border: 1.5px solid var(--accent-btn-text);
  border-top: none; border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.ep-check input:checked ~ .ep-cb-dot::after,
.ep-season-cb-wrap input:checked ~ .ep-cb-dot::after { opacity: 1; }
.ep-check:hover .ep-cb-dot,
.ep-season-cb-wrap:hover .ep-cb-dot { border-color: var(--accent); transform: scale(1.1); }

/* Season cb in toggle button */
.ep-season-cb-wrap { padding: 6px; margin-left: -4px; }
.ep-season-cb-wrap .ep-cb-dot { width: 14px; height: 14px; border-radius: 3px; }

/* Ep row layout with checkbox */
.ep-row { display: flex; align-items: center; gap: 6px; padding: 0.45rem 0.9rem; border-top: 0.5px solid var(--border); transition: background var(--t-fast); }
.ep-row:hover { background: var(--surface); }

/* ── CIRCULAR PROGRESS RING ────────────────────────────────────────────── */
.ep-progress-ring {
  position: relative; width: 36px; height: 36px; flex-shrink: 0;
}
.ep-progress-svg {
  width: 36px; height: 36px;
  transform: rotate(-90deg); transform-origin: center;
}
.ep-progress-bg { stroke: var(--border2); stroke-width: 2.8; }
.ep-progress-fill {
  stroke: var(--accent); stroke-width: 2.8; stroke-linecap: round;
  transition: stroke-dasharray 0.35s ease;
}
.ep-progress-pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.5rem; font-weight: 700; color: var(--text2);
  pointer-events: none;
}

/* Profile item layout with progress ring */
.profile-item { display: flex; align-items: center; gap: 10px; }
.profile-item .ep-progress-ring { margin-left: auto; margin-right: 4px; }

/* ── TMDB rating badge on profile cards ─────────────────────── */
.profile-item-title-row { display:flex; align-items:center; gap:5px; min-width:0; overflow:hidden; }
.profile-item-title { font-size:0.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
.profile-tmdb-badge { font-size:0.6rem; font-weight:700; background:rgba(1,180,228,0.14); color:#01b4e4; padding:2px 5px; border-radius:4px; flex-shrink:0; white-space:nowrap; letter-spacing:0.01em; }


/* ── Search-update fade animation ──────────────────────────────────────── */
@keyframes resultsFade { from{opacity:0;transform:translateY(3px)} to{opacity:1;transform:translateY(0)} }
.search-results-anim { animation:resultsFade 0.18s ease; }
.compare-body-anim   { animation:resultsFade 0.15s ease; }
.profile-items-anim  { animation:resultsFade 0.15s ease; }

/* ── Profile category search input ─────────────────────────────────────── */
.profile-filter-search { margin-bottom:1rem; padding:6px; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,0.025); }
.profile-filter-search input {
  width:100%; background:var(--input-bg); border:1px solid var(--border2);
  border-radius:var(--r-md,12px); color:var(--text); font-size:0.88rem;
  padding:0.55rem 0.9rem; outline:none; font-family:inherit;
  transition:border-color var(--t-fast);
}
.profile-filter-search input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }

/* Suggest nav tab — subtle accent tint, active state still uses normal active style */
.nav-tab-suggest { color:var(--text2); }
.nav-tab-suggest:hover { color:var(--text); background:var(--surface2); }
.nav-tab-suggest.active { background:var(--surface3); color:var(--text); }
/* Profile emoji next to username */
.profile-username-wrap { display:inline-flex; align-items:center; gap:0.3em; }
.profile-emoji { font-size:clamp(2rem,8vw,2.8rem); line-height:1.15; -webkit-text-fill-color:initial !important; }
.emoji-edit-btn { background:var(--accent-dim); border:0.5px solid rgba(192,132,252,0.3); border-radius:50%; width:30px; height:30px; color:var(--accent); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background var(--t-fast), border-color var(--t-fast); flex-shrink:0; }
.emoji-edit-btn:hover { background:rgba(192,132,252,0.22); border-color:rgba(192,132,252,0.5); }
.emoji-edit-btn svg { pointer-events:none; }

/* Mobile nav adjustment: keep username/bell visible without touching desktop */
@media(max-width:600px){
  nav {
    padding-left:0.45rem; padding-right:0.45rem; gap:0.35rem; height:58px; min-height:58px;
  }
  .nav-logo { font-size:0.98rem; flex-shrink:0; }
  .nav-tabs {
    position:static; transform:none; left:auto; top:auto;
    flex:1 1 auto; min-width:0; gap:1px; padding:3px; justify-content:center;
  }
  .nav-tab { padding:0.34rem 0.42rem; font-size:0.68rem; border-radius:8px; }
  .nav-right { gap:4px; flex-shrink:0; }
  .inbox-nav-btn { width:28px; height:28px; font-size:0.74rem; }
  .inbox-nav-badge { width:13px; height:13px; font-size:0.55rem; }
  .nav-user-btn { max-width:88px; font-size:0.66rem; padding:0.28rem 0.45rem; }
}
@media(max-width:370px){
  .nav-logo { display:none; }
  .nav-tab { padding:0.32rem 0.36rem; font-size:0.65rem; }
  .nav-user-btn { max-width:78px; }
}

@keyframes subtleButtonPulse {
  0%,100% { opacity:0.72; transform:scale(1); }
  50% { opacity:1; transform:scale(1.015); }
}
.primary-btn.thinking, .secondary-btn.thinking { animation:subtleButtonPulse 1.35s ease-in-out infinite; }

.no-other-matches {
  background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:1rem 1.1rem;
  color:var(--muted); font-size:0.9rem; font-weight:700; letter-spacing:-0.01em; text-align:center;
}

.review-framework-box {
  margin-top:1rem; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:0.9rem;
}
.review-framework-label { font-size:0.7rem; color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.5rem; }
.review-framework-text { width:100%; min-height:86px; resize:vertical; }
.review-framework-row { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:0.6rem; }
.review-framework-count { font-size:0.72rem; color:var(--muted); }
.review-framework-status { font-size:0.75rem; color:var(--muted); margin-top:0.45rem; min-height:1em; }


.modal-footer { margin-top:1.05rem; }
.modal-footer .add-wrap { justify-content:stretch; width:100%; }
.modal-footer .add-btn { flex:1; min-height:42px; font-size:0.86rem; }
.modal-review-slot:empty { display:none; }


.review-indicator { display:inline-flex; align-items:center; justify-content:center; color:var(--accent); font-size:0.78rem; margin-left:5px; line-height:1; filter:drop-shadow(0 0 5px var(--accent-dim)); }
.profile-item-review { margin-top:6px; color:var(--text2); font-size:0.76rem; line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.modal-friend-review { margin-top:4px; color:var(--text2); font-size:0.76rem; line-height:1.45; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:0.55rem 0.65rem; }
.modal-footer .add-wrap-modern { width:100%; }
.result-card .add-wrap-modern, .search-card .add-wrap-modern, .rec-card .add-wrap-modern, .profile-item .add-wrap-modern { width:auto; }
@media(max-width:600px){ .type-tabs.is-slidable .type-tab { user-select:none; -webkit-user-select:none; } }


.modal-viewed-rating {
  margin:0.95rem 0 0.75rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:0.75rem 0.85rem;
}
.modal-viewed-rating-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.modal-viewed-status { font-size:0.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-top:3px; }

/* STATS PAGE / PROFILE STATS LINK */
.profile-action-row { display:flex; justify-content:center; gap:8px; margin-top:1rem; margin-bottom:1.15rem; }
.profile-hero .profile-action-row { margin-top:0.95rem; margin-bottom:0.2rem; }
.stats-link-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--input-bg); border:1px solid var(--border2); border-radius:999px; color:var(--text); font-size:0.82rem; font-weight:700; padding:0.48rem 0.9rem; text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,0.12); transition:border-color 0.15s, transform 0.12s, background 0.15s; }
.stats-link-btn:hover { border-color:var(--accent); background:var(--accent-dim); transform:translateY(-1px); }
.stats-page-hero { text-align:center; margin-bottom:1.25rem; }
.stats-title-wrap { display:inline-flex; align-items:center; justify-content:center; gap:0.3em; }
.stats-page-title { font-size:clamp(2rem,8vw,3rem); font-weight:800; letter-spacing:-0.03em; background:linear-gradient(135deg,var(--text) 0%,var(--accent) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stats-page-sub { color:var(--muted); font-size:0.9rem; margin-top:0.35rem; }
.stats-grid-main { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:1rem; }
.stats-big-card { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:1rem; min-height:92px; }
.stats-big-num { font-size:1.75rem; font-weight:800; letter-spacing:-0.03em; color:var(--text); }
.stats-big-label { font-size:0.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-top:0.2rem; }
.stats-section-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.stats-panel { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:1rem; min-height:160px; }
.stats-panel-title { font-size:0.78rem; font-weight:800; color:var(--text2); text-transform:uppercase; letter-spacing:0.09em; margin-bottom:0.8rem; }
.stats-list { display:flex; flex-direction:column; gap:8px; }
.stats-list-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; font-size:0.9rem; }
.stats-list-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); font-weight:650; }
.stats-list-value { color:var(--accent); font-weight:800; font-size:0.82rem; }
.stats-bar { grid-column:1 / -1; height:6px; background:var(--input-bg); border-radius:99px; overflow:hidden; margin-top:-3px; }
.stats-bar-fill { height:100%; background:var(--accent); opacity:0.72; border-radius:99px; }
.stats-loading { text-align:center; padding:2rem; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:18px; }
.stats-note { color:var(--muted); font-size:0.78rem; line-height:1.5; text-align:center; margin:1rem 0; }
@media(max-width:720px){ .stats-grid-main{grid-template-columns:repeat(2,1fr);} .stats-section-grid{grid-template-columns:1fr;} .stats-big-card{padding:0.9rem;} .stats-big-num{font-size:1.45rem;} }


/* PATCH: better native dropdown sizing */
.sort-select {
  min-height: 34px;
  line-height: 1.25;
  max-width: 190px !important;
  min-width: 130px;
  padding: 7px 28px 7px 10px !important;
  white-space: nowrap;
}
@media (max-width:600px) {
  .sort-select {
    max-width: 48vw !important;
    min-width: 128px;
    font-size: 0.74rem !important;
  }
  .prof-sub-row { align-items:flex-start; }
}

/* PATCH: full media page */
.media-page-wrap { max-width: 1100px; padding-top: 1.75rem; }
.media-hero-full { position:relative; overflow:hidden; border:1px solid var(--border); border-radius:28px; min-height:330px; background:var(--surface); margin-bottom:1.2rem; }
.media-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.28; filter:blur(1px); transform:scale(1.02); }
.media-hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,var(--bg) 0%,rgba(12,12,14,.82) 38%,rgba(12,12,14,.35) 100%); }
[data-theme="light"] .media-hero-shade { background:linear-gradient(90deg,rgba(220,221,224,.98) 0%,rgba(220,221,224,.84) 42%,rgba(220,221,224,.42) 100%); }
.media-hero-content { position:relative; z-index:1; display:flex; gap:1.25rem; align-items:flex-end; min-height:330px; padding:2rem; }
.media-poster-full { width:160px; height:240px; border-radius:18px; object-fit:cover; box-shadow:0 18px 60px rgba(0,0,0,.45); border:1px solid var(--border2); flex-shrink:0; }
.media-poster-full.music { height:160px; }
.media-poster-ph-full { width:160px; height:240px; border-radius:18px; background:var(--accent-dim); border:1px solid var(--accent); display:flex; align-items:center; justify-content:center; font-size:3rem; flex-shrink:0; }
.media-poster-ph-full.music { height:160px; }
.media-hero-info { min-width:0; max-width:720px; }
.media-type-pill { display:inline-flex; align-items:center; border:1px solid var(--border2); background:var(--input-bg); color:var(--text2); padding:5px 10px; border-radius:999px; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; margin-bottom:.65rem; }
.media-title-full { font-size:clamp(2rem,7vw,4rem); line-height:.95; font-weight:900; letter-spacing:-.055em; margin-bottom:.6rem; }
.media-meta-full { color:var(--text2); font-size:.92rem; line-height:1.55; margin-bottom:.8rem; }
.media-pills { display:flex; flex-wrap:wrap; gap:7px; margin:.75rem 0; }
.media-pill { border:1px solid var(--border); background:var(--input-bg); border-radius:999px; padding:5px 10px; font-size:.76rem; color:var(--text2); }
.media-actions-full { display:flex; flex-wrap:wrap; gap:8px; margin-top:1rem; }
.media-grid-full { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(270px,.7fr); gap:1rem; align-items:start; }
.media-panel { background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:1.25rem; margin-bottom:1rem; }
.media-panel-label { font-size:.72rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.75rem; }
.media-overview-full { color:var(--text2); font-size:.95rem; line-height:1.75; }
.media-list { display:flex; flex-direction:column; gap:8px; }
.media-list-row { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--border); padding-bottom:8px; font-size:.86rem; }
.media-list-row:last-child { border-bottom:none; padding-bottom:0; }
.media-list-label { color:var(--muted); flex-shrink:0; }
.media-list-value { color:var(--text); text-align:right; }
.full-page-btn { width:100%; margin-top:.75rem; text-align:center; justify-content:center; text-decoration:none; display:flex; }
.review-like-btn { background:var(--input-bg); border:1px solid var(--border); border-radius:999px; color:var(--text2); font-size:.75rem; padding:3px 8px; cursor:pointer; font-family:inherit; transition:transform .12s, border-color .12s, color .12s, background .12s; }
.review-like-btn:hover { border-color:var(--accent); color:var(--accent); }
.review-like-btn.liked { background:rgba(248,113,113,.14); border-color:rgba(248,113,113,.4); color:#f87171; }
.review-like-btn:active { transform:scale(.94); }
.notification-item { display:flex; align-items:center; gap:10px; padding:.8rem 0; border-bottom:.5px solid var(--border); }
.notification-item:last-child { border-bottom:none; }
.notification-icon { width:36px; height:36px; border-radius:50%; background:var(--accent-dim); border:1.5px solid var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.notification-text { flex:1; min-width:0; }
.notification-title { font-size:.86rem; font-weight:700; line-height:1.35; }
.notification-sub { font-size:.72rem; color:var(--muted); margin-top:2px; }
.notification-dismiss { background:none; border:1px solid var(--border); border-radius:9px; color:var(--muted); font-size:.75rem; padding:4px 8px; cursor:pointer; }
@media (max-width:760px) {
  .media-hero-content { flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:1.25rem; min-height:420px; }
  .media-poster-full { width:122px; height:183px; border-radius:14px; }
  .media-poster-full.music, .media-poster-ph-full.music { width:122px; height:122px; }
  .media-poster-ph-full { width:122px; height:183px; }
  .media-grid-full { grid-template-columns:1fr; }
  .media-title-full { font-size:clamp(2rem,12vw,3.2rem); }
  .media-hero-shade { background:linear-gradient(0deg,var(--bg) 0%,rgba(12,12,14,.84) 42%,rgba(12,12,14,.25) 100%); }
  [data-theme="light"] .media-hero-shade { background:linear-gradient(0deg,rgba(220,221,224,.98) 0%,rgba(220,221,224,.82) 46%,rgba(220,221,224,.3) 100%); }
}


/* Latest mobile polish */
.modal-full-page-top { margin-top:1rem; margin-bottom:0.85rem; }
@media(max-width:600px){
  .modal-footer { display:block; }
  .modal-footer .add-wrap { flex-direction:column; gap:7px; }
  .modal-footer .add-btn { min-height:38px; font-size:0.8rem; }
  .full-page-btn { min-height:40px; }
  .result-card .add-wrap-modern, .search-card .add-wrap-modern { flex-direction:column; gap:5px; align-items:stretch; }
  .result-card .add-btn, .search-card .add-btn { font-size:0.68rem; padding:4px 7px; min-height:28px; }
}
.media-panel { margin-top:1rem; }
.modal-review-slot + .media-panel { margin-top:1.15rem; }


/* Mobile episode dropdown reliability */
@media(max-width:600px){
  .ep-season-toggle { min-height:46px; touch-action:manipulation; -webkit-user-select:none; user-select:none; }
}

/* Compact full-page CTA inside media modal header */
.modal-full-page-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  max-width:100%;
  margin-top:0.55rem;
  padding:0.42rem 0.72rem;
  border:1px solid var(--border2);
  border-radius:999px;
  background:linear-gradient(135deg,var(--surface2),var(--input-bg));
  color:var(--text);
  text-decoration:none;
  font-size:0.76rem;
  font-weight:750;
  letter-spacing:-0.01em;
  box-shadow:0 6px 18px rgba(0,0,0,0.16);
  transition:transform 0.14s ease,border-color 0.14s ease,background 0.14s ease,color 0.14s ease;
}
.modal-full-page-pill:hover {
  transform:translateY(-1px);
  border-color:var(--accent);
  color:var(--accent);
}
@media(max-width:520px){
  .modal-full-page-pill {
    font-size:0.72rem;
    padding:0.38rem 0.62rem;
    margin-top:0.48rem;
  }
}

/* Patch: card-level full page CTA + tighter mobile actions */
.rec-title-stack { min-width:0; flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:0.38rem; }
.card-full-page-pill {
  display:inline-flex; align-items:center; justify-content:center; width:max-content; max-width:100%;
  padding:0.34rem 0.62rem; border:1px solid var(--border2); border-radius:999px;
  background:linear-gradient(135deg,var(--surface2),var(--input-bg)); color:var(--text);
  text-decoration:none; font-size:0.72rem; font-weight:800; letter-spacing:-0.01em;
  box-shadow:0 5px 16px rgba(0,0,0,0.14); transition:transform .14s ease,border-color .14s ease,color .14s ease,background .14s ease;
}
.card-full-page-pill:hover { transform:translateY(-1px); border-color:var(--accent); color:var(--accent); }
.result-info .card-full-page-pill { margin-top:0.48rem; }
.review-like-static { display:inline-flex; align-items:center; gap:4px; color:#f87171; font-size:.75rem; font-weight:750; }
.review-like-count { margin-left:4px; min-width:1.15em; text-align:center; color:inherit; font-weight:850; }

@media(max-width:600px){
  nav { padding-left:0.68rem; padding-right:0.68rem; gap:0.4rem; }
  .nav-tabs { gap:3px; padding:3px; max-width:calc(100vw - 120px); }
  .nav-tab { font-size:0.71rem; padding:0.34rem 0.42rem; border-radius:8px; }
  .nav-user-btn { max-width:82px; padding:0.27rem 0.42rem; font-size:0.66rem; }
  .notif-btn { width:28px; height:28px; min-width:28px; }

  .rec-top { align-items:flex-start; gap:8px; }
  .rec-actions { flex-direction:column; align-items:stretch; gap:6px; width:82px; flex-shrink:0; }
  .rec-actions .badge { align-self:flex-end; font-size:0.62rem; padding:2px 6px; }
  .rec-actions .add-wrap-modern { width:100%; flex-direction:column; align-items:stretch; gap:6px; }
  .rec-actions .add-btn { width:100%; min-height:28px; padding:4px 5px; font-size:0.64rem; border-radius:8px; justify-content:center; }
  .rec-actions .add-btn-icon { display:none; }
  .rec-title-row { align-items:flex-start; gap:5px; }
  .rec-title { white-space:normal; overflow:visible; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .card-full-page-pill { font-size:0.68rem; padding:0.3rem 0.52rem; }

  .search-result { align-items:flex-start; gap:10px; padding:0.8rem 0.75rem; }
  .search-result > .add-wrap-modern { width:82px; flex-direction:column; gap:6px; align-items:stretch; flex-shrink:0; }
  .search-result > .add-wrap-modern .add-btn { width:100%; min-height:28px; padding:4px 5px; font-size:0.64rem; border-radius:8px; justify-content:center; }
  .search-result > .add-wrap-modern .add-btn-icon { display:none; }
  .result-title-row { align-items:flex-start; }
  .result-title { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
}


.stats-link-btn.stats-icon-btn { width:38px; height:38px; padding:0; font-size:1.05rem; border-radius:50%; }
@media(max-width:600px){ .stats-link-btn.stats-icon-btn { width:36px; height:36px; font-size:1rem; } }

/* Media page top spacing: keeps full info header below sticky/mobile nav */
@media(max-width:700px){
  .media-page-wrap { padding-top: calc(5.25rem + env(safe-area-inset-top)) !important; }
  .media-hero-full { margin-top: 0.25rem; }
}


/* TASTE MATCH */
.taste-match-btn { border-color: var(--accent); background: var(--accent-dim); }
.taste-match-btn:hover { background: var(--accent); color: var(--accent-btn-text); }
.taste-modal-card { max-width:560px; }
.taste-loading { text-align:center; color:var(--muted); padding:2.5rem 1rem; font-size:0.95rem; }
.taste-head { display:flex; align-items:center; gap:14px; margin-bottom:0.85rem; }
.taste-score { min-width:112px; min-height:92px; display:flex; align-items:center; justify-content:center; border-radius:22px; background:var(--accent-dim); border:1px solid var(--accent); color:var(--text); font-size:1.65rem; font-weight:900; letter-spacing:-0.04em; }
.taste-title { font-size:1.25rem; font-weight:850; letter-spacing:-0.03em; }
.taste-sub { color:var(--muted); font-size:0.86rem; margin-top:2px; }
.taste-summary { color:var(--text2); font-size:0.9rem; line-height:1.55; margin-bottom:1.1rem; }
.taste-parts { display:flex; flex-direction:column; gap:10px; }
.taste-part { background:var(--surface); border:1px solid var(--border); border-radius:15px; padding:0.8rem; }
.taste-part-top { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:0.84rem; font-weight:750; margin-bottom:0.5rem; }
.taste-part-top strong { color:var(--accent); }
.taste-meter { width:100%; height:6px; border-radius:999px; background:var(--input-bg); overflow:hidden; }
.taste-meter-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--text)); transition:width 0.35s ease; }
.taste-part-note { display:block; color:var(--muted); font-size:0.72rem; margin-top:0.45rem; }
.taste-shared { margin-top:1rem; display:flex; gap:6px; flex-wrap:wrap; }
.taste-small-title { width:100%; font-size:0.72rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.15rem; }
.taste-shared span { font-size:0.78rem; color:var(--text2); border:1px solid var(--border); background:var(--input-bg); border-radius:999px; padding:0.28rem 0.55rem; }
.taste-empty-note, .taste-footnote { color:var(--muted); font-size:0.78rem; line-height:1.45; margin-top:1rem; }
@media(max-width:520px){
  .taste-head { align-items:stretch; }
  .taste-score { min-width:96px; min-height:82px; font-size:1.35rem; }
  .taste-title { font-size:1.08rem; }
}

/* Tool buttons / review likes / watching calendar */
.stats-link-btn.stats-icon-btn,
.profile-tool-btn {
  border-color: var(--accent) !important;
  background: var(--accent-dim) !important;
  box-shadow: 0 0 0 1px var(--accent-dim), 0 8px 24px rgba(0,0,0,0.14);
}
.stats-link-btn.stats-icon-btn:hover,
.profile-tool-btn:hover {
  background: var(--accent) !important;
  color: var(--accent-btn-text) !important;
}
.own-review-likes {
  margin-top: 0.55rem;
  color: #f87171;
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}
.calendar-page-wrap { max-width: 1060px; }
.calendar-hero { text-align:center; margin-bottom:1.25rem; }
.calendar-title-wrap { display:inline-flex; align-items:center; justify-content:center; gap:0.3em; }
.calendar-title { font-size:clamp(2rem,8vw,3rem); font-weight:800; letter-spacing:-0.03em; background:linear-gradient(135deg,var(--text) 0%,var(--accent) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.calendar-sub { color:var(--muted); font-size:0.9rem; margin-top:0.35rem; }
.calendar-summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:1rem; }
.calendar-summary-card { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:1rem; }
.calendar-summary-num { font-size:1.65rem; font-weight:850; letter-spacing:-0.03em; }
.calendar-summary-label { color:var(--muted); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; margin-top:0.2rem; }
.calendar-panel { background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:1rem; overflow-x:auto; }
.calendar-panel-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:0.9rem; }
.calendar-panel-title { font-size:0.82rem; font-weight:850; color:var(--text2); text-transform:uppercase; letter-spacing:0.09em; }
.calendar-panel-note { color:var(--muted); font-size:0.78rem; line-height:1.4; text-align:right; }
.calendar-heatmap { display:grid; grid-template-columns:repeat(53, 12px); grid-template-rows:repeat(7, 12px); grid-auto-flow:column; gap:4px; min-width:max-content; padding:0.3rem 0; }
.calendar-day { width:12px; height:12px; border-radius:3px; background:#202126; border:1px solid rgba(255,255,255,.08); }
.calendar-day.level-1 { background:color-mix(in srgb, var(--accent) 28%, #202126); border-color:color-mix(in srgb, var(--accent) 36%, #202126); }
.calendar-day.level-2 { background:color-mix(in srgb, var(--accent) 48%, #202126); border-color:color-mix(in srgb, var(--accent) 56%, #202126); }
.calendar-day.level-3 { background:color-mix(in srgb, var(--accent) 70%, #202126); border-color:color-mix(in srgb, var(--accent) 76%, #202126); }
.calendar-day.level-4 { background:var(--accent); border-color:color-mix(in srgb,var(--accent) 82%, white); box-shadow:0 0 10px color-mix(in srgb,var(--accent) 22%, transparent); }
.calendar-legend { display:flex; justify-content:flex-end; align-items:center; gap:5px; color:var(--muted); font-size:0.72rem; margin-top:0.8rem; }
.calendar-legend .calendar-day { display:inline-block; }
.calendar-recent { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:1rem; }
.calendar-recent-panel { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:1rem; }
.calendar-recent-title { font-size:0.78rem; font-weight:850; color:var(--text2); text-transform:uppercase; letter-spacing:0.09em; margin-bottom:0.75rem; }
.calendar-recent-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0.55rem 0; border-bottom:1px solid var(--border); font-size:0.88rem; }
.calendar-recent-row:last-child { border-bottom:0; }
.calendar-recent-date { color:var(--text); font-weight:750; }
.calendar-recent-count { color:var(--accent); font-weight:850; white-space:nowrap; }
.calendar-loading { text-align:center; padding:2rem; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:18px; }
@media(max-width:720px){
  .calendar-summary-grid{grid-template-columns:repeat(2,1fr);}
  .calendar-recent{grid-template-columns:1fr;}
  .calendar-panel{padding:0.9rem; margin-left:-0.25rem; margin-right:-0.25rem;}
  .calendar-panel-head{align-items:flex-start; flex-direction:column; gap:0.35rem;}
  .calendar-panel-note{text-align:left;}
  .calendar-heatmap{grid-template-columns:repeat(53, 10px); grid-template-rows:repeat(7, 10px); gap:3px;}
  .calendar-day{width:10px;height:10px;border-radius:2.5px;}
}

/* Favorites feature */
.favorite-tool-btn { color:#f87171 !important; border-color:var(--accent) !important; background:var(--input-bg) !important; }
.favorite-tool-btn:hover, .favorite-tool-btn.active { background:var(--accent) !important; color:var(--accent-btn-text) !important; border-color:var(--accent) !important; transform:translateY(-1px); }
.stat-card-favorites { grid-column:1 / -1; border-color:rgba(248,113,113,0.35) !important; background:rgba(248,113,113,0.08) !important; }
.favorites-panel { background:var(--surface); border:1px solid rgba(248,113,113,0.24); border-radius:22px; padding:1rem; }
.profile-favorites-enter { animation:favoritesIn 0.22s ease both; }
@keyframes favoritesIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.favorites-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:0.95rem; }
.favorites-title { font-size:1.05rem; font-weight:800; letter-spacing:-0.02em; color:#f87171; }
.favorites-sub { font-size:0.78rem; color:var(--muted); margin-top:2px; }
.favorites-grid { grid-template-columns:repeat(3,1fr); }
.favorites-reset-btn { width:auto; margin-top:0; padding:0.55rem 0.8rem; color:#f87171; border-color:rgba(248,113,113,0.35); }
.favorite-chip-slot { display:inline-flex; }
.favorite-chip { display:inline-flex; align-items:center; justify-content:center; gap:5px; border:1px solid rgba(248,113,113,0.42); background:rgba(248,113,113,0.10); color:#f87171; border-radius:999px; padding:0.45rem 0.72rem; font-size:0.78rem; font-weight:800; font-family:inherit; cursor:pointer; text-decoration:none; transition:background 0.15s, color 0.15s, transform 0.12s, border-color 0.15s; }
.favorite-chip:hover { border-color:#f87171; transform:translateY(-1px); }
.favorite-chip.active { background:#f87171; color:#fff; border-color:#f87171; }
.favorite-chip:active { transform:scale(0.97); }
.modal-quick-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:0.7rem; }
.modal-favorite-chip { padding:0.42rem 0.68rem; font-size:0.76rem; }
.media-favorite-chip { margin-left:8px; }
@media(max-width:700px){
  .favorites-panel { padding:0.85rem; border-radius:18px; }
  .favorites-head { align-items:flex-start; flex-direction:column; gap:8px; }
  .favorites-reset-btn { width:100%; }
  .favorites-grid { grid-template-columns:1fr !important; gap:8px; }
  .favorite-chip { padding:0.4rem 0.62rem; font-size:0.74rem; }
  .modal-quick-actions { gap:6px; }
  .media-favorite-chip { margin-left:0; margin-top:8px; width:100%; }
  .media-favorite-chip.favorite-chip { width:100%; }
}


/* PROFILE TOOL SEARCH + FAVORITES */
.profile-tool-search-wrap { display:none; max-width:520px; margin:0.65rem auto 1.1rem; animation:fadeUp 0.16s ease; }
.profile-tool-search-wrap.open { display:block; }
.profile-tool-search-box { background:var(--surface); border:1px solid var(--border2); border-radius:18px; padding:0.8rem; box-shadow:0 12px 28px rgba(0,0,0,0.12); }
.profile-tool-search-input { width:100%; background:var(--input-bg); border:1px solid var(--border2); border-radius:13px; color:var(--text); font-size:0.95rem; padding:0.75rem 0.95rem; outline:none; font-family:inherit; }
.profile-tool-search-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.profile-tool-search-results { margin-top:0.65rem; display:grid; gap:8px; max-height:420px; overflow:auto; padding-right:2px; }
.profile-tool-search-empty { color:var(--muted); font-size:0.86rem; text-align:center; padding:0.9rem 0.4rem; }
.profile-tool-search-group { margin-top:0.35rem; }
.profile-tool-search-label { color:var(--muted); font-size:0.68rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; margin:0.35rem 0 0.45rem; padding-left:3px; }
.favorite-indicator { display:inline-flex; align-items:center; justify-content:center; color:#f87171; font-size:0.78rem; margin-left:5px; line-height:1; filter:drop-shadow(0 0 5px rgba(248,113,113,0.22)); }
.stats-link-btn.stats-icon-btn { border-color:var(--accent) !important; box-shadow:0 0 0 1px var(--accent-dim), 0 8px 24px rgba(0,0,0,0.12); }
.stats-link-btn.stats-icon-btn.favorite-tool-btn { color:#f87171; border-color:var(--accent) !important; }
.stats-link-btn.stats-icon-btn.favorite-tool-btn:hover, .stats-link-btn.stats-icon-btn.favorite-tool-btn.active { background:var(--accent); border-color:var(--accent) !important; color:var(--accent-btn-text); }

/* GENRE WHEEL */
.genre-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:0.7rem; }
.genre-wheel-toggle { border:1px solid var(--border2); background:var(--input-bg); color:var(--text2); border-radius:999px; font-size:0.72rem; font-weight:800; padding:0.35rem 0.65rem; cursor:pointer; font-family:inherit; }
.genre-wheel-toggle:hover { border-color:var(--accent); color:var(--text); }
.genre-wheel-layout { display:grid; grid-template-columns:132px 1fr; gap:1rem; align-items:center; }
.genre-wheel { width:132px; height:132px; border-radius:50%; background:conic-gradient(var(--border) 0 100%); box-shadow:inset 0 0 0 14px var(--surface), 0 10px 30px rgba(0,0,0,0.18); }
.genre-wheel-list { display:flex; flex-direction:column; gap:8px; }
.genre-wheel-row { display:grid; grid-template-columns:12px 1fr auto; gap:8px; align-items:center; font-size:0.84rem; }
.genre-wheel-dot { width:10px; height:10px; border-radius:50%; }
.genre-wheel-name { color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.genre-wheel-pct { color:var(--muted); font-weight:800; font-size:0.78rem; }
@media(max-width:560px){ .profile-tool-search-wrap { margin:0.55rem 0 1rem; } .genre-wheel-layout { grid-template-columns:1fr; justify-items:center; } .genre-wheel-list { width:100%; } }


/* Patch: profile tool buttons use accent ring; favorite icon stays red without red outline */
.stats-link-btn.stats-icon-btn.favorite-tool-btn {
  color:#f87171 !important;
  border-color:var(--accent) !important;
  background:var(--input-bg) !important;
  box-shadow:0 0 0 1px var(--accent-dim), 0 8px 24px rgba(0,0,0,0.12) !important;
}
.stats-link-btn.stats-icon-btn.favorite-tool-btn:hover,
.stats-link-btn.stats-icon-btn.favorite-tool-btn.active {
  color:#f87171 !important;
  border-color:var(--accent) !important;
  background:var(--accent-dim) !important;
  transform:translateY(-1px);
}

/* Card header quick actions alignment */
.modal-quick-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:0.72rem; }
.modal-quick-actions .modal-full-page-pill,
.modal-quick-actions .favorite-chip { min-height:34px; display:inline-flex; align-items:center; justify-content:center; line-height:1; margin:0; }
.modal-quick-actions .favorite-chip-slot { display:inline-flex; align-items:center; }
@media(max-width:560px){
  .modal-quick-actions { gap:7px; }
  .modal-quick-actions .modal-full-page-pill,
  .modal-quick-actions .favorite-chip { flex:1 1 auto; min-width:0; padding:0.52rem 0.68rem; }
}
.favorite-indicator { font-size:0.82rem; color:inherit; margin-left:5px; filter:drop-shadow(0 0 5px rgba(248,113,113,0.25)); }
.friend-name-emoji { margin-left:3px; }
.compare-modal-card { max-width:720px; }
.compare-modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:0.7rem; }
.compare-modal-title { font-size:1.2rem; font-weight:850; letter-spacing:-0.03em; }
.compare-modal-sub { color:var(--muted); font-size:0.82rem; margin-top:2px; }
.compare-tool-btn:disabled { opacity:0.38; cursor:not-allowed; }

/* polish + performance */
button, .add-btn, .secondary-btn, .primary-btn, .stats-link-btn, .profile-item, .rec-card, .ph-card, .search-result { transition-timing-function:cubic-bezier(.2,.8,.2,1); }
.add-btn:hover, .secondary-btn:hover, .primary-btn:hover, .stats-link-btn:hover { transform:translateY(-1px); }
.add-btn:active, .secondary-btn:active, .primary-btn:active, .stats-link-btn:active { transform:scale(.97); }
.profile-item:hover, .rec-card:hover, .ph-card:hover, .search-result:hover { transform:translateY(-1px); }
.profile-item, .rec-card, .ph-card, .search-result { transition:transform .16s cubic-bezier(.2,.8,.2,1), border-color .16s, background .16s, box-shadow .16s; }
@media(max-width:700px){
  .orb { filter:blur(80px); animation:none !important; opacity:.09; }
  nav, .modal-card, .settings-panel { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
}
.calendar-day { cursor:pointer; padding:0; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.calendar-day:hover, .calendar-day.selected { transform:scale(1.25); box-shadow:0 0 0 3px var(--accent-dim); border-color:var(--accent); }
.calendar-day-detail { margin-top:1rem; background:var(--input-bg); border:1px solid var(--border); border-radius:16px; padding:0.9rem; min-height:58px; }
.calendar-day-detail-title { font-size:0.9rem; font-weight:800; margin-bottom:0.55rem; }
.calendar-day-detail-empty { color:var(--muted); font-size:0.82rem; }
.calendar-day-detail-list { display:flex; flex-direction:column; gap:6px; }
.calendar-day-detail-item { display:flex; justify-content:space-between; gap:10px; color:var(--text2); font-size:0.82rem; }
.calendar-day-detail-item em { color:var(--muted); font-style:normal; flex-shrink:0; }
/* final favorite tool hover should match other tool buttons */
.stats-link-btn.stats-icon-btn.favorite-tool-btn:hover,
.stats-link-btn.stats-icon-btn.favorite-tool-btn.active,
.favorite-tool-btn:hover,
.favorite-tool-btn.active {
  background:var(--accent) !important;
  color:var(--accent-btn-text) !important;
  border-color:var(--accent) !important;
}


/* Search tool button matches muted favorite-tool default */
.stats-link-btn.stats-icon-btn.search-tool-btn {
  color:var(--text2) !important;
  border-color:var(--accent) !important;
  background:var(--input-bg) !important;
  box-shadow:0 0 0 1px var(--accent-dim), 0 8px 24px rgba(0,0,0,0.12) !important;
}
.stats-link-btn.stats-icon-btn.search-tool-btn:hover,
.stats-link-btn.stats-icon-btn.search-tool-btn.active {
  background:var(--accent) !important;
  color:var(--accent-btn-text) !important;
  border-color:var(--accent) !important;
}

/* Subtle background texture variety — minimalist, low-lag */
body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:0.32;
  background:
    radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--accent) 12%, transparent) 0 1px, transparent 1.5px),
    radial-gradient(circle at 76% 64%, rgba(255,255,255,0.055) 0 1px, transparent 1.6px),
    linear-gradient(135deg, transparent 0 48%, rgba(255,255,255,0.018) 49% 51%, transparent 52%);
  background-size:72px 72px, 118px 118px, 44px 44px;
  mix-blend-mode:normal;
}
[data-theme="light"] body::before { opacity:0.22; }
@media(max-width:700px){ body::before { opacity:0.18; background-size:96px 96px, 150px 150px, 64px 64px; } }


/* Recs hotfix: review spacing + favorites emoji button */
.stats-link-btn.stats-icon-btn.favorite-tool-btn {
  color: inherit !important;
  border-color: var(--accent) !important;
  background: var(--input-bg) !important;
}
.stats-link-btn.stats-icon-btn.favorite-tool-btn:hover,
.stats-link-btn.stats-icon-btn.favorite-tool-btn.active {
  background: var(--accent) !important;
  color: var(--accent-btn-text) !important;
  border-color: var(--accent) !important;
}
.modal-friend-rating-row {
  align-items: flex-start;
  padding: 0.72rem 0 !important;
}
.modal-friend-rating-row + .modal-friend-rating-row {
  margin-top: 0.35rem;
  padding-top: 0.85rem !important;
}
.modal-friend-review {
  margin-top: 0.5rem !important;
  margin-bottom: 0.55rem !important;
}
.modal-friend-review + div {
  margin-top: 0.5rem !important;
  margin-bottom: 0.35rem !important;
}
.review-like-btn,
.review-like-static {
  margin-top: 0.15rem;
}


/* Next batch: profile depth + cleaner empty states */
.profile-extras { margin:0.35rem 0 1.35rem; }
.profile-highlight-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.profile-highlight-card { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:1rem; animation:fadeUp 0.2s ease both; }
.profile-highlight-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:0.75rem; font-size:0.8rem; font-weight:800; color:var(--text2); text-transform:uppercase; letter-spacing:0.07em; }
.profile-highlight-head small { text-transform:none; letter-spacing:0; color:var(--muted); font-weight:600; font-size:0.72rem; }
.profile-mini-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.profile-mini-card { background:var(--input-bg); border:1px solid var(--border); border-radius:14px; padding:0.55rem; color:var(--text); font-family:inherit; cursor:pointer; min-width:0; transition:transform .16s ease, border-color .16s ease, background .16s ease; }
.profile-mini-card:hover { transform:translateY(-2px); border-color:var(--accent); background:var(--accent-dim); }
.profile-mini-art { display:block; aspect-ratio:2/3; border-radius:10px; overflow:hidden; background:var(--surface2); margin-bottom:0.45rem; }
.profile-mini-art.sq { aspect-ratio:1/1; }
.profile-mini-art img { width:100%; height:100%; object-fit:cover; display:block; }
.profile-mini-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--accent-dim); color:var(--accent); }
.profile-mini-title { display:block; font-size:0.72rem; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-mini-stars { display:flex; justify-content:center; margin-top:0.25rem; font-size:0.62rem; }
.profile-random-btn { background:var(--input-bg); border:1px solid var(--border2); color:var(--text2); border-radius:999px; padding:0.3rem 0.58rem; font-size:0.72rem; font-weight:800; cursor:pointer; font-family:inherit; transition:all .15s ease; }
.profile-random-btn:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }
.profile-random-btn:disabled { opacity:.35; cursor:not-allowed; }
.profile-empty-soft { grid-column:1 / -1; text-align:center; color:var(--muted); font-size:0.82rem; padding:1rem 0.5rem; background:var(--input-bg); border:1px dashed var(--border); border-radius:14px; }
.empty-state-polished strong { display:block; color:var(--text2); margin-bottom:0.35rem; font-size:0.95rem; }
.empty-state-polished span { display:block; max-width:360px; margin:0 auto; line-height:1.45; }
.taste-preview-score { font-size:0.72rem; font-weight:900; margin-left:2px; }
.rating-dist { display:grid; gap:10px; }
.rating-dist-row { display:grid; grid-template-columns:74px 28px 1fr; align-items:center; gap:8px; color:var(--text2); font-size:0.78rem; }
.rating-dist-row strong { color:var(--text); text-align:right; }
.rating-dist-bar { height:8px; border-radius:99px; background:var(--input-bg); overflow:hidden; }
.rating-dist-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),rgba(255,255,255,.22)); }
.badge-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.profile-badge { background:var(--input-bg); border:1px solid var(--border); border-radius:14px; padding:0.75rem; display:flex; align-items:center; gap:8px; }
.profile-badge span { font-size:1.15rem; }
.profile-badge strong { font-size:0.82rem; color:var(--text2); }
.activity-filter-row { display:flex; flex-wrap:wrap; gap:7px; margin:0.65rem 0 0.9rem; }
.activity-filter-btn { background:var(--input-bg); border:1px solid var(--border); color:var(--text2); border-radius:999px; padding:0.45rem 0.72rem; font-family:inherit; font-size:0.78rem; font-weight:800; cursor:pointer; transition:all .15s ease; }
.activity-filter-btn:hover, .activity-filter-btn.active { background:var(--accent); border-color:var(--accent); color:var(--accent-btn-text); transform:translateY(-1px); }
.review-feed-label { margin-top:1.2rem; }
.review-feed-grid { display:grid; gap:10px; margin-bottom:1rem; }
.review-feed-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:0.9rem; }
.review-feed-card p { margin:0.55rem 0; color:var(--text2); line-height:1.5; font-size:0.88rem; }
.review-feed-meta { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:0.75rem; }
@media(max-width:700px){
  .profile-highlight-grid { grid-template-columns:1fr; }
  .profile-highlight-card { padding:0.85rem; border-radius:18px; }
  .profile-mini-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  .profile-mini-card { padding:0.42rem; border-radius:12px; }
  .profile-mini-title { font-size:0.66rem; }
  .profile-highlight-head { align-items:flex-start; flex-direction:column; gap:4px; }
  .profile-random-btn { width:100%; }
  .badge-grid { grid-template-columns:1fr; }
  .rating-dist-row { grid-template-columns:66px 24px 1fr; font-size:0.72rem; }
}

/* Year recap */
.recap-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:1rem; }
.recap-item { display:flex; align-items:center; gap:10px; padding:0.75rem; background:var(--input-bg); border:1px solid var(--border); border-radius:14px; margin-bottom:8px; }
.recap-item > span { font-size:1.2rem; }
.recap-item strong { display:block; font-size:0.9rem; color:var(--text); }
.recap-item small { display:block; font-size:0.72rem; color:var(--muted); margin-top:2px; }
.recap-lines { display:grid; gap:10px; }
.recap-lines div { display:flex; justify-content:space-between; gap:12px; padding:0.65rem 0; border-bottom:1px solid var(--border); }
.recap-lines div:last-child { border-bottom:0; }
.recap-lines span { color:var(--muted); font-size:0.8rem; }
.recap-lines strong { color:var(--text2); font-size:0.82rem; text-align:right; }
.recap-months { display:flex; align-items:end; gap:8px; min-height:112px; overflow-x:auto; padding:0.5rem 0.1rem 0; }
.recap-month { min-width:48px; display:flex; flex-direction:column; align-items:center; justify-content:end; gap:5px; color:var(--muted); font-size:0.68rem; }
.recap-month i { width:22px; border-radius:8px 8px 3px 3px; background:linear-gradient(180deg,var(--accent),var(--accent-dim)); display:block; }
.recap-month b { color:var(--text2); font-size:0.7rem; }
@media(max-width:720px){ .recap-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .recap-month { min-width:40px; } }

/* Top 4 editor */
.profile-highlight-note { color:var(--muted); font-size:0.7rem; margin-top:0.65rem; text-align:center; }
.top4-editor-modal { max-width:680px; }
.top4-editor-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:0.9rem; }
.top4-save-btn { width:auto; padding:0.6rem 0.85rem; }
.top4-selected-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:0.85rem; }
.top4-search-box { margin:0 0 0.85rem; }
.top4-search-box input { min-height:42px; }
.top4-slot { min-height:56px; border:1px dashed var(--border2); background:var(--input-bg); border-radius:14px; padding:0.55rem; display:flex; flex-direction:column; justify-content:center; gap:4px; position:relative; overflow:hidden; }
.top4-slot.filled { border-style:solid; border-color:var(--accent); background:var(--accent-dim); }
.top4-slot b { color:var(--accent); font-size:0.72rem; }
.top4-slot span { color:var(--text2); font-size:0.74rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top4-slot button { position:absolute; top:5px; right:5px; border:0; background:rgba(0,0,0,.24); color:var(--text); width:20px; height:20px; border-radius:999px; cursor:pointer; }
.top4-editor-list { max-height:52vh; overflow:auto; display:grid; gap:8px; padding-right:2px; }
.top4-choice { width:100%; border:1px solid var(--border); background:var(--input-bg); color:var(--text); border-radius:14px; padding:0.7rem; display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:10px; text-align:left; cursor:pointer; font-family:inherit; transition:transform .14s ease, border-color .14s ease, background .14s ease; }
.top4-choice:hover:not(:disabled), .top4-choice.selected { border-color:var(--accent); background:var(--accent-dim); transform:translateY(-1px); }
.top4-choice:disabled { opacity:.42; cursor:not-allowed; }
.top4-choice-rank { width:34px; height:34px; border-radius:12px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--accent); font-weight:900; }
.top4-choice-main strong { display:block; color:var(--text); font-size:0.86rem; }
.top4-choice-main small { display:block; color:var(--muted); font-size:0.72rem; margin-top:2px; }
.top4-choice-meta { color:#f87171; display:flex; align-items:center; gap:3px; font-size:0.72rem; }
@media(max-width:700px){
  .top4-editor-modal { width:min(94vw,680px); max-height:86vh; overflow:hidden; display:flex; flex-direction:column; padding:1rem; }
  .top4-editor-head { flex-direction:column; gap:10px; margin-bottom:0.75rem; padding-right:2rem; }
  .top4-save-btn { width:100%; min-height:42px; }
  .top4-selected-strip { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-bottom:0.7rem; }
  .top4-slot { min-height:48px; padding:0.45rem 1.6rem 0.45rem 0.5rem; }
  .top4-search-box { flex:0 0 auto; margin-bottom:0.7rem; }
  .top4-editor-list { max-height:none; overflow:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
  .top4-choice { grid-template-columns:34px 1fr; padding:0.62rem; border-radius:13px; gap:8px; }
  .top4-choice-meta { grid-column:2; justify-content:flex-start; }
  .profile-highlight-grid { gap:10px; }
  .profile-highlight-card { overflow:hidden; }
  .profile-mini-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .profile-mini-card { display:grid; grid-template-columns:42px 1fr; gap:8px; align-items:center; text-align:left; }
  .profile-mini-art { width:42px; margin:0; }
  .profile-mini-title { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .profile-mini-stars { justify-content:flex-start; }
}

.random-picker-modal { max-width:420px; }
.random-picker-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.random-picker-option { border:1px solid var(--border); background:var(--input-bg); color:var(--text); border-radius:18px; padding:0.9rem 0.65rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer; font-family:inherit; transition:transform .14s ease, border-color .14s ease, background .14s ease; min-height:96px; }
.random-picker-option:hover:not(:disabled) { transform:translateY(-2px); border-color:var(--accent); background:var(--accent-dim); }
.random-picker-option span { font-size:1.55rem; line-height:1; }
.random-picker-option strong { font-size:0.82rem; }
.random-picker-option small { color:var(--muted); font-size:0.7rem; font-weight:700; }
.random-picker-option:disabled { opacity:.38; cursor:not-allowed; }
@media(max-width:520px){ .random-picker-options{grid-template-columns:1fr;} .random-picker-option{min-height:72px; flex-direction:row; justify-content:flex-start; padding:0.8rem;} .random-picker-option small{margin-left:auto;} }

/* ─── PROFILE FUN PAGES ─────────────────────────────────────────────── */
.pf-page { max-width:1080px; padding-top:calc(5.5rem + env(safe-area-inset-top)); }
.pf-hero { margin:0 0 1.15rem; padding:1.2rem; border:1px solid var(--border); background:linear-gradient(145deg,var(--surface),rgba(255,255,255,0.025)); border-radius:24px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.pf-hero:after { content:""; position:absolute; inset:auto -20% -55% auto; width:42%; height:130%; background:radial-gradient(circle,var(--accent-dim),transparent 68%); opacity:.62; pointer-events:none; }
.pf-back { display:inline-flex; color:var(--muted); text-decoration:none; border:1px solid var(--border); background:var(--input-bg); border-radius:999px; padding:.36rem .68rem; font-size:.76rem; font-weight:800; margin-bottom:.75rem; }
.pf-back:hover { color:var(--accent); border-color:var(--accent); }
.pf-eyebrow { color:var(--accent); font-size:.72rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; margin-bottom:.24rem; }
.pf-hero h1 { margin:0; font-size:clamp(1.7rem,4vw,3rem); letter-spacing:-.06em; }
.pf-hero p { margin:.35rem 0 0; color:var(--muted); font-size:.92rem; max-width:680px; }
.pf-page-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.pf-feature-card { min-height:150px; text-decoration:none; color:var(--text); border:1px solid var(--border); background:linear-gradient(145deg,var(--surface),rgba(255,255,255,0.025)); border-radius:22px; padding:1.1rem; display:flex; flex-direction:column; justify-content:space-between; transition:transform .16s ease, border-color .16s ease, background .16s ease; box-shadow:var(--shadow-soft); }
.pf-feature-card:hover { transform:translateY(-2px); border-color:var(--accent); background:linear-gradient(145deg,var(--surface),var(--accent-dim)); }
.pf-feature-card b { font-size:1.75rem; line-height:1; }
.pf-feature-card strong { display:block; font-size:1.05rem; letter-spacing:-.03em; margin-top:.7rem; }
.pf-feature-card span { color:var(--muted); font-size:.82rem; line-height:1.45; margin-top:.35rem; }
.pf-section { margin:1rem 0; border:1px solid var(--border); background:var(--surface); border-radius:22px; padding:1rem; box-shadow:var(--shadow-soft); }
.pf-section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:.85rem; }
.pf-section h2, .pf-timeline-block h2 { margin:0; font-size:1.05rem; letter-spacing:-.035em; }
.pf-section p, .pf-timeline-block p { margin:.25rem 0 0; color:var(--muted); font-size:.8rem; }
.pf-stats-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:1rem 0; }
.pf-stat { border:1px solid var(--border); background:var(--surface); border-radius:18px; padding:.9rem; }
.pf-stat b { display:block; color:var(--accent); font-size:1.25rem; letter-spacing:-.04em; }
.pf-stat span { display:block; color:var(--text2); font-size:.78rem; font-weight:800; margin-top:.1rem; }
.pf-stat small { display:block; color:var(--muted); font-size:.7rem; margin-top:.12rem; }
.pf-card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.pf-card-grid.mini { grid-template-columns:repeat(6,minmax(0,1fr)); }
.pf-card { text-decoration:none; color:var(--text); border:1px solid var(--border); background:var(--input-bg); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; min-width:0; transition:transform .16s ease, border-color .16s ease, background .16s ease; }
.pf-card:hover { transform:translateY(-2px); border-color:var(--accent); background:var(--accent-dim); }
.pf-card img, .pf-card-ph { width:100%; aspect-ratio:2/3; object-fit:cover; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--accent); font-weight:900; font-size:1.4rem; }
.pf-card-body { padding:.72rem; }
.pf-card-title { font-weight:900; font-size:.85rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-card-sub { color:var(--muted); font-size:.7rem; margin-top:.22rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:.55rem; font-size:.72rem; }
.pf-stars { color:#facc15; letter-spacing:-.05em; white-space:nowrap; }
.pf-half-star { display:inline-block; width:.55em; overflow:hidden; vertical-align:bottom; color:#facc15; }
.pf-rating-num { display:block; margin-top:2px; color:var(--muted); font-size:.7rem; font-weight:700; }
.pf-muted { color:var(--muted); }
.pf-empty { border:1px dashed var(--border2); background:var(--input-bg); color:var(--muted); border-radius:18px; padding:1.1rem; text-align:center; font-size:.86rem; }
.pf-list { display:grid; gap:8px; }
.pf-compare-row { display:grid; grid-template-columns:1.5fr .8fr .8fr; gap:10px; align-items:center; border:1px solid var(--border); background:var(--input-bg); border-radius:14px; padding:.7rem .8rem; font-size:.8rem; }
.pf-compare-row a { color:var(--text); font-weight:850; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-bars { display:grid; gap:9px; }
.pf-bars div { display:grid; grid-template-columns:105px 1fr 28px; gap:9px; align-items:center; font-size:.78rem; color:var(--text2); }
.pf-bars b { height:8px; min-width:6px; border-radius:999px; background:linear-gradient(90deg,var(--accent),rgba(255,255,255,.16)); }
.pf-bars em { color:var(--muted); font-style:normal; text-align:right; }
.pf-big-copy { font-size:1rem; line-height:1.6; color:var(--text2); border:1px solid var(--border); background:var(--input-bg); border-radius:18px; padding:1rem; }
.pf-bubbles { min-height:260px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; padding:1rem; }
.pf-bubbles span { width:var(--s); height:var(--s); min-width:48px; min-height:48px; border-radius:999px; background:var(--accent-dim); border:1px solid var(--accent); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--text); font-size:.72rem; font-weight:900; padding:8px; }
.pf-bubbles small { color:var(--accent); font-size:.68rem; margin-top:2px; }
.pf-sliders { display:grid; gap:12px; }
.pf-sliders label { display:grid; grid-template-columns:145px 1fr 40px; align-items:center; gap:10px; color:var(--text2); font-size:.8rem; font-weight:800; }
.pf-sliders b { display:block; height:8px; border-radius:999px; background:var(--accent); }
.pf-sliders span { color:var(--muted); text-align:right; }
.pf-timeline-block { margin:1rem 0; border-left:2px solid var(--accent); padding-left:1rem; }
.pf-review-wall { display:grid; gap:10px; }
.pf-review-card { display:block; text-decoration:none; color:var(--text); border:1px solid var(--border); background:var(--surface); border-radius:18px; padding:1rem; }
.pf-review-card:hover { border-color:var(--accent); background:var(--accent-dim); }
.pf-review-card div { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pf-review-card p { color:var(--text2); font-size:.86rem; line-height:1.55; margin:.65rem 0 0; }
.pf-pick-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:1rem; }
.pf-pick-btn { border:1px solid var(--border); background:var(--input-bg); color:var(--text); border-radius:16px; padding:.85rem; font-family:inherit; font-weight:900; cursor:pointer; transition:transform .16s ease,border-color .16s ease,background .16s ease; }
.pf-pick-btn:hover:not(:disabled) { transform:translateY(-2px); border-color:var(--accent); background:var(--accent-dim); }
.pf-pick-btn:disabled { opacity:.4; cursor:not-allowed; }
.pf-pick-btn span { color:var(--accent); margin-left:5px; }
.pf-pick-result .pf-card { max-width:220px; }
.pf-tagline { color:var(--muted); font-size:.72rem; margin-top:.55rem; }
.pf-personality-list { display:grid; gap:8px; margin-top:1rem; }
.pf-personality-list div { border:1px solid var(--border); background:var(--input-bg); border-radius:14px; padding:.75rem; color:var(--text2); font-size:.84rem; }
@media (max-width:760px){
  .pf-page { padding-top:calc(5.9rem + env(safe-area-inset-top)); }
  .pf-hero { border-radius:20px; padding:1rem; }
  .pf-page-grid { grid-template-columns:1fr; gap:10px; }
  .pf-feature-card { min-height:120px; border-radius:18px; }
  .pf-stats-row { grid-template-columns:1fr 1fr; }
  .pf-card-grid, .pf-card-grid.mini { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pf-compare-row { grid-template-columns:1fr; gap:5px; }
  .pf-bars div { grid-template-columns:78px 1fr 24px; }
  .pf-sliders label { grid-template-columns:1fr; gap:6px; }
  .pf-pick-row { grid-template-columns:1fr; }
  .pf-pick-result .pf-card { max-width:none; }
}

/* Profile fun pages cleanup: compact compare, kept page buttons, iPhone-friendly wrapping */
.profile-action-row {
  flex-wrap: wrap;
  align-items: center;
  row-gap: 8px;
}
@media (max-width: 600px) {
  .profile-action-row {
    max-width: 330px;
    margin-left: auto;
    margin-right: auto;
    gap: 7px;
  }
  .profile-hero .profile-action-row { margin-bottom: 0.45rem; }
  .stats-link-btn.stats-icon-btn {
    width: 34px;
    height: 34px;
    font-size: .95rem;
  }
}
.pf-page-grid.compact { grid-template-columns: repeat(3, minmax(0,1fr)); }
.pf-page-grid.compact .pf-feature-card { min-height: 136px; }
.compare-stats { grid-template-columns: repeat(4, minmax(0,1fr)); }
.pf-compare-card {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(190px,.8fr);
  gap: 12px;
  align-items: start;
  border: 1px solid var(--border);
  background: var(--input-bg);
  border-radius: 16px;
  padding: .78rem;
  margin-bottom: 8px;
}
.pf-compare-media {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}
.pf-compare-media img,
.pf-compare-thumb-ph {
  width: 46px;
  height: 66px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-weight: 900;
}
.pf-compare-media strong {
  display: block;
  font-size: .9rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-compare-media span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-compare-ratings {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 8px;
  border-left: 1px solid var(--border);
  padding-left: 12px;
}
.pf-compare-ratings div { min-width: 0; }
.pf-compare-ratings small {
  display: block;
  color: var(--muted);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 850;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-compare-ratings em {
  color: var(--muted);
  font-style: normal;
  font-size: .7rem;
  font-weight: 850;
  white-space: nowrap;
}
.pf-compare-reviews {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
}
.pf-compare-review {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 13px;
  padding: .62rem .72rem;
}
.pf-compare-review b {
  display: block;
  color: var(--accent);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .28rem;
}
.pf-compare-review p {
  margin: 0;
  color: var(--text2);
  font-size: .8rem;
  line-height: 1.45;
}
.pf-compare-mini-list .pf-compare-card { margin-bottom: 8px; }
.stats-taste-read b { display:block; color:var(--accent); font-size:1.15rem; letter-spacing:-.03em; margin-bottom:.35rem; }
.stats-taste-read p { color:var(--text2); line-height:1.55; margin:0; font-size:.9rem; }
.stats-style-traits label { grid-template-columns: 125px 1fr 40px; }
@media (max-width: 820px) {
  .pf-page-grid.compact { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .compare-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pf-compare-card { grid-template-columns: 1fr; }
  .pf-compare-ratings { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; padding-top: 10px; }
}
@media (max-width: 560px) {
  .pf-page { padding-left: .9rem; padding-right: .9rem; }
  .pf-page-grid.compact { grid-template-columns: 1fr; }
  .pf-feature-card { min-height: 112px; padding: .95rem; }
  .pf-card-grid.mini { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pf-compare-card { padding: .68rem; border-radius: 14px; }
  .pf-compare-media { grid-template-columns: 42px minmax(0,1fr); }
  .pf-compare-media img, .pf-compare-thumb-ph { width:42px; height:60px; }
  .pf-compare-ratings { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pf-compare-ratings em { grid-column: 1 / -1; }
  .pf-compare-reviews { grid-template-columns: 1fr; }
  .stats-style-traits label { grid-template-columns: 1fr; gap:6px; }
}

/* Compare/stat cleanup */
.pf-compare-card-ratings-only { grid-template-columns:minmax(0,1fr) minmax(230px,.55fr); }
.pf-compare-card-ratings-only .pf-compare-ratings { align-self:stretch; }
@media(max-width:720px){
  .pf-compare-card-ratings-only { grid-template-columns:1fr; }
  .pf-compare-card-ratings-only .pf-compare-ratings { border-left:0; border-top:1px solid var(--border); padding-left:0; padding-top:10px; }
}


/* Stats / compare clarification polish */
.stats-rating-style-panel .stats-style-summary {
  color: var(--text2);
  font-size: .86rem;
  line-height: 1.45;
  margin: .15rem 0 .85rem;
}
.stats-rating-style-panel .stats-style-summary strong { color: var(--accent); }
.stats-style-traits label small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
  margin-top: -2px;
}
.style-trait-label { color: var(--text2); font-weight: 850; }
.pf-compare-search {
  display:flex;
  align-items:center;
  gap:10px;
  margin: .15rem 0 .75rem;
}
.pf-compare-search input {
  flex:1;
  min-width:0;
  border:1px solid var(--border2);
  background:var(--input-bg);
  color:var(--text);
  border-radius:14px;
  padding:.72rem .86rem;
  outline:none;
  font-family:inherit;
  font-size:.9rem;
}
.pf-compare-search input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.pf-compare-search span { color:var(--muted); font-size:.75rem; font-weight:800; white-space:nowrap; }
.pf-disagreement-row { border-color: rgba(248,113,113,.36); }
.pf-disagreement-row .pf-compare-ratings em { color:#f87171; }
@media(max-width:560px){
  .pf-compare-search { flex-direction:column; align-items:stretch; gap:7px; }
  .pf-compare-search span { text-align:left; }
  .stats-style-traits label { grid-template-columns:1fr; }
}

/* Media match + mobile polish patch */
.media-match-pill {
  border-color: rgba(250, 204, 21, .34);
  color: #facc15;
  background: rgba(250, 204, 21, .09);
  font-weight: 850;
}
[data-theme="light"] .media-match-pill {
  color: #8a5f00;
  background: rgba(250, 204, 21, .2);
}
@media (max-width: 932px) {
  .page-wrap { padding-left: max(.9rem, env(safe-area-inset-left)); padding-right: max(.9rem, env(safe-area-inset-right)); }
  .media-page-wrap { padding-top: 1rem; }
  .media-hero-full { border-radius: 22px; min-height: auto; }
  .media-hero-content { gap: .95rem; padding: 1rem; min-height: 0; }
  .media-title-full { font-size: clamp(1.9rem, 10vw, 3rem); letter-spacing: -.045em; line-height: 1; }
  .media-pills { gap: 6px; }
  .media-pill { font-size: .72rem; padding: 5px 9px; }
  .media-match-pill { order: -1; }
  .media-actions-full { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
  .media-actions-full .add-wrap-modern { width: 100%; display: contents; }
  .media-actions-full .add-btn { width: 100%; min-height: 38px; justify-content: center; font-size: .74rem; padding: 7px 8px; }
  .media-panel { border-radius: 18px; padding: 1rem; }
  .media-list-row { flex-direction: column; gap: 3px; align-items: flex-start; }
  .media-list-value { text-align: left; }
  .pf-section { border-radius: 18px; padding: .95rem; }
  .pf-section-head { gap: .7rem; align-items: flex-start; }
  .pf-section h2 { font-size: 1.02rem; }
  .pf-section p { font-size: .78rem; }
  .pf-stats-row, .compare-stats, .stats-grid-main { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px; }
  .pf-stat, .stats-big-card { padding: .85rem; border-radius: 16px; }
  .pf-stat b, .stats-big-num { font-size: 1.22rem; }
  .pf-bars div { grid-template-columns: minmax(92px,.8fr) minmax(0,1fr) 38px; gap: 8px; }
  .pf-card-grid, .pf-card-grid.mini { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .pf-card { border-radius: 15px; }
  .pf-card img, .pf-card-ph { height: 148px; }
}
@media (max-width: 430px) {
  .media-actions-full { grid-template-columns: 1fr; }
  .media-poster-full { width: 112px; height: 168px; }
  .media-poster-full.music, .media-poster-ph-full.music { width: 112px; height: 112px; }
  .media-poster-ph-full { width: 112px; height: 168px; }
  .media-title-full { font-size: clamp(1.75rem, 11vw, 2.55rem); }
  .pf-stats-row, .compare-stats, .stats-grid-main { grid-template-columns: 1fr 1fr !important; }
  .pf-compare-card { padding: .68rem; margin-bottom: 9px; }
  .pf-compare-ratings { grid-template-columns: 1fr; }
  .pf-compare-ratings em { grid-column: auto; }
  .pf-compare-media strong { font-size: .86rem; }
  .pf-stars { font-size: .83rem; letter-spacing: -1px; }
  .pf-rating-num { font-size: .68rem; }
  .pf-card-grid, .pf-card-grid.mini { grid-template-columns: 1fr 1fr; }
  .pf-card img, .pf-card-ph { height: 132px; }
  .pf-card-body { padding: .62rem; }
  .pf-card-title { font-size: .8rem; }
  .pf-card-sub { font-size: .68rem; }
  .genre-wheel { width: 118px; height: 118px; }
}

/* Match breakdown + best matches polish */
.media-match-pill {
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.media-match-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(250,204,21,.65);
  background: rgba(250,204,21,.16);
}
.media-match-card { max-width: 680px; }
.media-match-break-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: .85rem;
}
.media-match-break-head span {
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 950;
  letter-spacing: -.07em;
  color: #facc15;
}
.media-match-break-head small {
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.media-match-overview {
  color: var(--text2);
  line-height: 1.55;
  margin: 0 0 .8rem;
}
.media-match-taste-line {
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--muted);
  border-radius: 14px;
  padding: .7rem .8rem;
  font-size: .8rem;
  margin-bottom: .85rem;
}
.media-match-procon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.media-match-procon-grid > div {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  padding: .9rem;
}
.media-match-procon-grid h3 {
  margin: 0 0 .6rem;
  font-size: .92rem;
  letter-spacing: -.02em;
}
.media-match-procon-grid ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text2);
  font-size: .82rem;
  line-height: 1.5;
}
.media-match-procon-grid li { margin: .35rem 0; }
.match-page { max-width: 1240px; }
.match-refresh-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 1rem;
}
.match-refresh-row span {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 750;
}
.match-column-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.match-list { display: grid; gap: 9px; }
.match-rec-card {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  gap: 10px;
  align-items: stretch;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--input-bg);
  border-radius: 16px;
  padding: .65rem;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.match-rec-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: var(--accent-dim);
}
.match-rec-card img,
.match-rec-card .pf-card-ph {
  width: 52px;
  height: 76px;
  border-radius: 11px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface);
}
.match-rec-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  gap: 6px;
}
.match-score-pill {
  display: inline-flex;
  width: fit-content;
  border: 1px solid rgba(250,204,21,.34);
  background: rgba(250,204,21,.1);
  color: #facc15;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: .66rem;
  font-weight: 900;
  margin-bottom: .3rem;
}
.match-rec-body strong {
  display: block;
  font-size: .88rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.match-rec-body small {
  display: block;
  color: var(--muted);
  font-size: .7rem;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.match-rec-body p {
  margin: 0;
  color: var(--text2);
  font-size: .74rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media(max-width: 980px) {
  .match-column-grid { grid-template-columns: 1fr; }
  .match-col { margin: 0; }
}
@media(max-width: 560px) {
  .media-match-procon-grid { grid-template-columns: 1fr; }
  .media-match-break-head { flex-direction: column; align-items: flex-start; gap: 3px; }
  .media-match-card { border-radius: 22px; }
  .match-refresh-row { flex-direction: column; align-items: stretch; }
  .match-refresh-row .primary-btn { width: 100%; }
  .match-rec-card { grid-template-columns: 46px minmax(0,1fr); border-radius: 15px; }
  .match-rec-card img, .match-rec-card .pf-card-ph { width:46px; height:68px; }
  .match-rec-body p { -webkit-line-clamp: 2; }
  .recs-title-row { gap: 8px; }
  .brain-recs-btn { width: 32px; height: 32px; }
}

/* Compare list controls + mobile polish */
.pf-show-all-btn { margin: 10px auto 0; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; }
#compare-shared-list, #compare-disagreement-list { display: flex; flex-direction: column; gap: 10px; }
.match-generate-btn { min-width: 170px; }
.match-generate-btn:disabled { opacity: .72; cursor: wait; transform: none; }

/* Recs brain button alignment */
.recs-title-row { align-items: center !important; gap: 12px !important; }
.brain-recs-btn { width: 42px !important; height: 42px !important; font-size: 1.22rem !important; transform: translateY(1px); border-color: var(--border2) !important; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.brain-recs-btn:hover { transform: translateY(-1px); }

@media (max-width: 640px) {
  .pf-page { padding-left: 12px; padding-right: 12px; }
  .pf-stats-row.compare-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pf-compare-search { position: sticky; top: 58px; z-index: 4; background: linear-gradient(180deg, var(--bg), rgba(0,0,0,0)); padding-top: 4px; }
  .pf-compare-card-ratings-only .pf-compare-ratings { grid-template-columns: 1fr 1fr; gap: 7px; }
  .pf-compare-ratings div { padding: 8px; border-radius: 12px; background: var(--surface2); }
  .pf-compare-ratings .stars, .pf-star-row, .pf-stars { font-size: .82rem; }
  .pf-rating-num { font-size: .72rem; }
  .media-match-card { width: min(94vw, 520px); max-height: 82vh; overflow: auto; }
  .media-match-procon-grid { grid-template-columns: 1fr !important; gap: 10px; }
  .match-refresh-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .match-refresh-row .primary-btn { width: 100%; }
  .match-column-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .match-rec-card { grid-template-columns: 54px minmax(0, 1fr); padding: 10px; }
  .match-rec-card img, .match-rec-ph { width: 54px; height: 78px; }
  .brain-recs-btn { width: 38px !important; height: 38px !important; font-size: 1.12rem !important; }
  .recs-title-row { gap: 10px !important; }
}


/* Timeline month drilldown + final mobile polish */
.pf-timeline-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:.75rem;
}
.pf-month-link {
  flex:0 0 auto;
  min-height:34px;
  padding:0 12px;
  font-size:.78rem;
  text-decoration:none;
}
.pf-month-back {
  display:inline-flex;
  margin:0 0 .7rem;
  text-decoration:none;
}
.month-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.match-empty-generate {
  width:100%;
  min-height:86px;
  border:1px dashed var(--border2);
  background:linear-gradient(135deg, var(--input-bg), var(--surface));
  color:var(--text);
  border-radius:16px;
  font-family:inherit;
  font-size:.9rem;
  font-weight:900;
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.match-empty-generate:hover { transform:translateY(-1px); border-color:var(--accent); background:var(--accent-dim); }
.match-generate-btn:not(:disabled) { opacity:1 !important; cursor:pointer !important; }
.match-generate-btn.thinking { opacity:.72 !important; cursor:wait !important; }
@media(max-width: 700px){
  .pf-timeline-head { flex-direction:column; align-items:stretch; gap:8px; }
  .pf-month-link { width:100%; justify-content:center; }
  .month-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; }
  .pf-month-page .pf-section-head h2 { font-size:1.35rem; }
  .pf-card-grid.mini { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; }
  .pf-card { min-width:0; }
  .pf-card-title { font-size:.84rem; }
  .pf-card-sub { font-size:.72rem; }
  .pf-show-all-btn { width:100%; }
  .pf-compare-search { position:relative !important; top:auto !important; background:transparent !important; }
  .media-match-overview { font-size:.9rem; }
  .media-match-procon-grid li { font-size:.84rem; }
  .match-empty-generate { min-height:74px; }
}
@media(max-width: 430px){
  .pf-page { padding-left:10px !important; padding-right:10px !important; }
  .pf-hero h1 { font-size: clamp(1.75rem, 12vw, 2.35rem); }
  .pf-stats-row.compare-stats { grid-template-columns:1fr 1fr !important; }
  .pf-compare-card-ratings-only .pf-compare-ratings { grid-template-columns:1fr !important; }
  .match-rec-card { grid-template-columns:48px minmax(0,1fr) !important; }
  .match-rec-card img, .match-rec-card .pf-card-ph, .match-rec-card .match-rec-ph { width:48px !important; height:70px !important; }
  .brain-recs-btn { width:36px !important; height:36px !important; }
}


.pf-exact-match-row { border-color:rgba(34,197,94,.72) !important; box-shadow:0 0 0 1px rgba(34,197,94,.22), 0 10px 28px rgba(34,197,94,.07); }
@media (max-width: 600px){
  .rec-title-row, .profile-item-title, .search-title, .result-title { flex-wrap:wrap; gap:4px; }
  .pf-card-foot { align-items:flex-start; flex-direction:column; gap:5px; }
  .pf-card-foot-right { width:100%; justify-content:space-between; }
  .pf-month-link { width:auto; min-height:32px; padding-left:10px !important; padding-right:10px !important; }
}

@keyframes recsBrainPulse {
  0%, 100% { transform: translateY(1px) scale(1); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
  50% { transform: translateY(1px) scale(1.12); box-shadow: 0 10px 28px var(--accent-dim); }
}
.brain-recs-btn { animation: recsBrainPulse 2.4s ease-in-out infinite; }
.brain-recs-btn:hover { animation-play-state: paused; transform: translateY(-1px) scale(1.06) !important; }
@media (prefers-reduced-motion: reduce){ .brain-recs-btn { animation:none !important; } }

/* Timeline show-all sits beside month title */
.pf-timeline-title-line { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pf-timeline-title-line h2 { margin:0; }
.pf-timeline-title-line .pf-month-link { width:auto; min-height:30px; padding:0 10px !important; }
.media-match-pill-disabled { cursor:default; opacity:.78; }
.media-match-pill-disabled:hover { transform:none; border-color:var(--border); background:var(--input-bg); }
@media(max-width:700px){ .pf-timeline-title-line { gap:8px; } .pf-timeline-title-line .pf-month-link { width:auto !important; font-size:.72rem; min-height:28px; } }

.match-rec-body p { -webkit-line-clamp: 3; max-height: 4.1em; }
@media(max-width:600px){ .match-rec-body p { -webkit-line-clamp: 2; max-height: 3em; } }


/* Final timeline/match accuracy hotfix */
.pf-timeline-title-line .pf-month-link,
.pf-month-link.secondary-btn {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  vertical-align:middle;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.match-thinking {
  display:inline-flex;
  align-items:center;
  gap:2px;
  animation:matchThinkingPulse 1.15s ease-in-out infinite;
}
.match-thinking::after {
  content:'';
  display:inline-block;
  width:1.5em;
  text-align:left;
  animation:matchThinkingDots 1.2s steps(4,end) infinite;
}
@keyframes matchThinkingPulse {
  0%,100%{ opacity:.62; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.025); }
}
@keyframes matchThinkingDots {
  0%{ content:''; }
  25%{ content:'.'; }
  50%{ content:'..'; }
  75%,100%{ content:'...'; }
}
@media(max-width:700px){
  .pf-timeline-title-line .pf-month-link { min-height:30px !important; }
}


/* Mobile collapsible profile highlights */
.profile-highlight-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.profile-highlight-body {
  max-height: 900px;
  opacity: 1;
  overflow: hidden;
  transition: max-height .28s ease, opacity .22s ease, margin-top .22s ease;
}
.profile-collapse-btn {
  display: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text, #f8fafc);
  align-items: center;
  justify-content: center;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.profile-collapse-btn:hover,
.profile-collapse-btn:focus-visible {
  transform: translateY(-1px);
  background: rgba(255,255,255,.1);
  border-color: var(--accent, rgba(255,255,255,.3));
  outline: none;
}
.profile-highlight-card.collapsed .profile-collapse-btn {
  transform: rotate(180deg);
}
@media (max-width: 640px) {
  .profile-highlight-head {
    gap: 10px;
    align-items: center;
  }
  .profile-highlight-actions {
    gap: 6px;
    max-width: 62%;
  }
  .profile-highlight-actions small {
    font-size: 11px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .profile-collapse-btn {
    display: inline-flex;
    flex: 0 0 auto;
  }
  .profile-highlight-card.collapsed {
    padding-bottom: 12px;
  }
  .profile-highlight-card.collapsed .profile-highlight-body {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
  }
}

/* Social feature batch */
.profile-bio-text{max-width:640px;margin:.55rem auto .35rem;color:var(--text2);font-size:.92rem;line-height:1.45;text-align:center}
.profile-bio-edit{display:flex;gap:8px;justify-content:center;align-items:center;margin:.45rem auto .75rem;max-width:620px}
.profile-bio-edit input{flex:1;min-width:0;max-width:460px;background:var(--input-bg);border:1px solid var(--border);color:var(--text);border-radius:12px;padding:.68rem .85rem;font:inherit}
.mini-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:.48rem .75rem;border-radius:10px;border:1px solid var(--border);background:var(--input-bg);color:var(--text2);font:inherit;font-weight:700;font-size:.78rem;text-decoration:none;cursor:pointer;line-height:1.1}
.mini-btn:hover{border-color:var(--accent);color:var(--accent)}
.search-filter-row{display:grid;grid-template-columns:.6fr 1fr .8fr;gap:8px;margin-top:10px}
.search-filter-row input,.search-filter-row select{background:var(--input-bg);border:1px solid var(--border);color:var(--text);border-radius:11px;padding:.62rem .72rem;font:inherit;font-size:.82rem;min-width:0}
.friend-pick-list{display:grid;gap:8px;margin-top:12px}.friend-pick-btn{background:var(--surface);border:1px solid var(--border);border-radius:12px;color:var(--text);padding:.75rem .9rem;text-align:left;font-weight:700;cursor:pointer}.friend-pick-btn:hover{border-color:var(--accent);color:var(--accent)}
.recommend-btn{white-space:nowrap}.because-list{display:grid;gap:8px}.mini-media-row{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.65rem}.mini-media-row img{width:34px;height:46px;object-fit:cover;border-radius:7px}.mini-media-row b{display:block;font-size:.86rem}.mini-media-row small{display:block;color:var(--muted);font-size:.74rem;margin-top:2px}.muted-small{color:var(--muted);font-size:.82rem}
.review-comments-slot{margin-top:.75rem}.review-comments-list{display:grid;gap:6px;margin-bottom:8px}.review-comment{font-size:.78rem;color:var(--text2);background:rgba(255,255,255,.035);border:1px solid var(--border);border-radius:10px;padding:.55rem .65rem;line-height:1.35}.review-comment b{color:var(--text)}.review-comment-form{display:flex;gap:7px}.review-comment-form input{flex:1;min-width:0;background:var(--input-bg);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:.55rem .65rem;font:inherit;font-size:.78rem}
.pf-list{display:grid;gap:10px}.pf-row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1rem}.pf-row p{margin:.25rem 0 0;color:var(--muted);font-size:.78rem}.pf-note{color:var(--text2);font-size:.78rem;line-height:1.35;margin:.55rem 0 0}.pf-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:.7rem}.pf-card-static{cursor:default}.explore-icon{font-size:1.65rem;margin-bottom:.55rem}
@media(max-width:700px){.profile-bio-edit{flex-direction:column;align-items:stretch}.profile-bio-edit input{max-width:none}.search-filter-row{grid-template-columns:1fr}.media-actions-full{flex-wrap:wrap}.recommend-btn{width:100%}.review-comment-form{flex-direction:column}.pf-row{align-items:flex-start;flex-direction:column}.pf-actions .mini-btn{flex:1}.profile-bio-text{text-align:center;font-size:.86rem}.mini-media-row img{width:30px;height:40px}}


/* Cleanup/social polish patch */
.nav-user-btn {
  min-height:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:0 0.72rem;
}
@media(max-width:700px){
  .nav-user-btn { min-height:28px; height:28px; max-width:82px; padding:0 .48rem; font-size:.66rem; }
}
.profile-extras { margin:0.25rem 0 0.85rem; }
.profile-highlight-grid { gap:9px; }
.profile-highlight-card { padding:.72rem; border-radius:16px; }
.profile-highlight-head { margin-bottom:.5rem; font-size:.72rem; letter-spacing:.055em; }
.profile-mini-grid { gap:6px; }
.profile-mini-grid.upnext-mini-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.profile-mini-card { padding:.38rem; border-radius:12px; }
.profile-mini-art { border-radius:8px; margin-bottom:.32rem; }
.profile-mini-title { font-size:.66rem; }
.profile-mini-stars { font-size:.58rem; margin-top:.16rem; }
.profile-random-btn { padding:.24rem .48rem; font-size:.68rem; }
@media(min-width:900px){
  .profile-highlight-grid { max-width:820px; margin:0 auto; }
  .profile-mini-art { max-height:112px; }
}
@media(max-width:640px){
  .profile-highlight-grid { gap:8px; }
  .profile-highlight-card { padding:.7rem; border-radius:15px; }
  .profile-highlight-head { flex-direction:row !important; align-items:center !important; }
  .profile-mini-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .profile-mini-grid.upnext-mini-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.suggested-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.suggested-card { display:grid; grid-template-columns:54px 1fr; gap:10px; align-items:start; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:.68rem; color:var(--text); }
.suggested-card > img { width:54px; height:76px; object-fit:cover; border-radius:10px; }
.suggested-card .pf-card-ph { width:54px; height:76px; border-radius:10px; }
.suggested-card .pf-card-body { min-width:0; }
.suggested-card .pf-card-title { font-size:.9rem; }
.suggested-card .pf-note { margin:.45rem 0; font-size:.8rem; line-height:1.35; color:var(--text2); }
.suggested-card .pf-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:.45rem; }
.suggest-toggle { border:1px solid var(--border); background:var(--text); color:var(--bg); border-radius:999px; padding:.42rem .78rem; font-family:inherit; font-size:.78rem; font-weight:900; cursor:pointer; transition:all .15s ease; }
.suggest-toggle.active,.suggest-toggle:hover { background:var(--accent); border-color:var(--accent); color:var(--accent-btn-text); transform:translateY(-1px); }
[data-theme="light"] .suggest-toggle { background:var(--text); color:var(--bg); }
.pf-review-card-media { display:grid !important; grid-template-columns:58px 1fr; gap:12px; align-items:start; }
.pf-review-poster { width:58px; height:86px; object-fit:cover; border-radius:10px; background:var(--surface2); flex-shrink:0; }
.pf-review-poster-ph { display:flex; align-items:center; justify-content:center; color:var(--accent); background:var(--accent-dim); font-weight:900; }
.pf-review-main { min-width:0; }
.pf-review-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.pf-review-top strong { line-height:1.25; }
@media(max-width:640px){
  .suggested-grid { grid-template-columns:1fr; gap:8px; }
  .suggested-card { grid-template-columns:46px 1fr; padding:.62rem; border-radius:14px; }
  .suggested-card > img,.suggested-card .pf-card-ph { width:46px; height:64px; }
  .pf-review-card-media { grid-template-columns:48px 1fr; gap:10px; padding:.72rem; }
  .pf-review-poster { width:48px; height:70px; border-radius:8px; }
}

/* Top 10 profile carousel cleanup */
.profile-top10-strip{margin:1rem auto 1.1rem;max-width:980px;border:0;background:transparent;padding:0;}
.profile-top10-head{display:flex;align-items:center;gap:10px;margin-bottom:.55rem;color:var(--text2);font-weight:900;text-transform:uppercase;letter-spacing:.07em;font-size:.78rem;}
.profile-top10-head small{font-size:.72rem;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:650;}
.profile-carousel-row{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:.15rem .1rem .85rem;scrollbar-width:thin;}
.profile-carousel-item{flex:0 0 112px;scroll-snap-align:start;background:transparent;border:0;color:var(--text);font-family:inherit;text-align:left;padding:0;cursor:pointer;transition:transform .16s ease, opacity .16s ease;}
.profile-carousel-item:hover{transform:translateY(-3px);}
.profile-carousel-art{display:block;width:112px;aspect-ratio:2/3;border-radius:14px;overflow:hidden;background:var(--surface2);box-shadow:0 14px 34px rgba(0,0,0,.24);}
.profile-carousel-art.sq{aspect-ratio:1/1;}
.profile-carousel-art img{width:100%;height:100%;object-fit:cover;display:block;}
.profile-carousel-title{display:block;margin-top:.48rem;font-weight:850;font-size:.76rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.profile-carousel-review{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:.32rem;color:var(--muted);font-size:.67rem;line-height:1.25;}
.profile-carousel-row .profile-empty-soft{min-width:260px;}
.top4-editor-modal .top4-selected-strip{grid-template-columns:repeat(5,minmax(0,1fr));}

/* Suggested page tighter tabs/cards */
.suggested-tabs,.profile-filter-row:has(.suggest-toggle){margin-bottom:1rem;align-items:center;gap:10px;}
.suggest-toggle{background:transparent!important;color:var(--text2)!important;border:1px solid var(--border)!important;border-radius:999px;padding:.55rem .9rem;font-weight:850;line-height:1;box-shadow:none!important;}
.suggest-toggle.active{color:var(--bg)!important;background:var(--text)!important;border-color:var(--text)!important;}
.suggested-grid{align-items:start;}
.suggested-card{max-width:520px;}

/* Review wall poster-left layout */
.pf-review-card-media{display:grid!important;grid-template-columns:72px minmax(0,1fr)!important;gap:12px!important;align-items:start!important;text-decoration:none!important;}
.pf-review-poster{grid-column:1;grid-row:1 / span 2;width:72px!important;height:104px!important;object-fit:cover;border-radius:12px;background:var(--surface2);}
.pf-review-poster-ph{display:flex;align-items:center;justify-content:center;color:var(--accent);font-weight:900;}
.pf-review-main{grid-column:2;min-width:0;display:block!important;}
.pf-review-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:.4rem;}
.pf-review-main p{margin:.25rem 0 0!important;color:var(--text2);line-height:1.45;font-size:.88rem;}

@media (max-width:700px){
  .profile-top10-strip{margin:.75rem 0 .9rem;}
  .profile-carousel-row{gap:10px;padding-bottom:.75rem;}
  .profile-carousel-item{flex-basis:92px;}
  .profile-carousel-art{width:92px;border-radius:12px;}
  .profile-carousel-title{font-size:.7rem;}
  .profile-carousel-review{font-size:.64rem;-webkit-line-clamp:2;}
  .top4-editor-modal .top4-selected-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
  .suggested-card{max-width:none;}
  .pf-review-card-media{grid-template-columns:58px minmax(0,1fr)!important;gap:10px!important;}
  .pf-review-poster{width:58px!important;height:84px!important;border-radius:10px;}
  .pf-review-top{display:block;}
}

/* Final polish: Top 10 ranked carousel, bio, reviews, recommendations */
.profile-carousel-art{position:relative;}
.profile-rank-badge{position:absolute;top:7px;left:7px;z-index:2;width:26px;height:26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:var(--accent-btn-text);font-size:.78rem;font-weight:950;box-shadow:0 10px 22px rgba(0,0,0,.35),0 0 0 2px rgba(0,0,0,.22);}
.profile-carousel-review{display:none!important;}
.profile-mini-stars{margin-top:.25rem;display:block;}
.review-framework-box{padding:.72rem .78rem .68rem!important;margin-top:.75rem!important;}
.review-framework-label{margin-bottom:.42rem!important;}
.review-framework-text{min-height:76px!important;}
.review-framework-count{display:block;margin:.34rem 0 .45rem!important;text-align:right;line-height:1.15;}
.review-framework-row{margin-top:0!important;justify-content:flex-end!important;}
.review-framework-row .secondary-btn{min-height:34px;padding:.48rem .82rem;border-radius:999px;}
.own-review-likes{margin-top:.42rem!important;margin-bottom:.12rem!important;line-height:1.15;}
.review-framework-status{margin-top:.25rem!important;min-height:.85em!important;}
.profile-bio-actions{display:flex;justify-content:center;margin:.2rem 0 .45rem;}
.profile-bio-edit-btn,.muted-mini-btn{border-radius:999px!important;}
.profile-bio-edit input{max-width:520px;}
.profile-bio-text:empty{display:none;}
.suggested-tabs{display:flex!important;gap:14px!important;margin-bottom:1.15rem!important;position:relative;z-index:1;}
.suggest-toggle{margin:0!important;}
.recommend-btn{border-radius:999px!important;min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
@media(max-width:700px){
  .profile-rank-badge{width:23px;height:23px;font-size:.72rem;top:6px;left:6px;}
  .review-framework-box{padding:.68rem!important;}
  .suggested-tabs{gap:10px!important;justify-content:center;}
}

/* Tight review box + similar fallback polish */
.profile-bio-edit .mini-btn.muted-mini-btn{
  border-radius:999px!important;
  border:1px solid var(--border)!important;
  background:var(--input-bg)!important;
  color:var(--text)!important;
}
.profile-bio-edit .mini-btn.muted-mini-btn:hover{
  border-color:var(--accent)!important;
  background:var(--accent-dim)!important;
}
.review-framework-box{
  padding:.72rem .78rem .58rem!important;
  margin-top:.72rem!important;
}
.review-framework-text{
  min-height:76px!important;
  margin-bottom:0!important;
}
.review-framework-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:.34rem 0 .42rem;
}
.review-framework-meta .own-review-likes{
  margin:0!important;
  text-align:left;
  line-height:1.15;
}
.review-framework-meta .review-framework-count{
  margin:0!important;
  text-align:right;
  line-height:1.15;
  color:var(--muted);
  font-size:.72rem;
}
.review-framework-row{
  margin:0!important;
  padding:0!important;
  display:flex;
  justify-content:flex-end!important;
}
.review-framework-status{
  margin-top:.2rem!important;
  min-height:0!important;
  line-height:1.15!important;
}
.mini-media-placeholder{
  width:42px;
  height:56px;
  flex:0 0 42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--input-bg);
  color:var(--muted);
  font-weight:900;
  font-size:1.05rem;
}
@media(max-width:700px){
  .review-framework-box{padding:.66rem!important;}
  .review-framework-meta{gap:8px;}
  .mini-media-placeholder{width:38px;height:52px;flex-basis:38px;}
}


/* Recs ideas polish: guest/social, brain, mobile slider, light mode, button sizing */
.brain-recs-btn {
  opacity: .62;
  filter: grayscale(1) saturate(.2);
  background: var(--surface2) !important;
  border-color: var(--border2) !important;
  box-shadow: none !important;
}
.brain-recs-btn:hover { opacity: .82; background: var(--input-bg) !important; }
.type-tabs.dragging { cursor: grabbing; }
.type-tabs.dragging .type-tab { pointer-events:none; }
@media(max-width:700px){
  .type-tabs { touch-action: pan-y; }
  .add-btn { min-width: max-content; max-width: 100%; white-space: normal; line-height: 1.08; text-align: center; }
  .add-wrap, .rec-actions, .modal-footer { min-width: 0; }
  .add-btn span:not(.add-btn-icon):not(.add-btn-x) { overflow-wrap: normal; word-break: normal; }
  .add-btn-watchlist { padding-left: .58rem; padding-right: .58rem; }
}
.stats-link-btn.stats-icon-btn.favorite-tool-btn:not(.active) {
  background: transparent !important;
  color: #f87171 !important;
}
.stats-link-btn.stats-icon-btn.favorite-tool-btn.active,
.stats-link-btn.stats-icon-btn.favorite-tool-btn:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-btn-text) !important;
}
.nav-user-btn, .inbox-nav-btn {
  height: 34px;
  min-height: 34px;
}
.nav-user-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 .7rem;
  border-radius:999px;
}
@media(max-width:600px){
  .nav-user-btn, .inbox-nav-btn { height:28px; min-height:28px; }
  .nav-user-btn { max-width:78px; padding:0 .45rem; }
}
.stats-panel { min-height: 0 !important; align-self: start; }
.stats-section-grid { align-items: start; }
.stats-taste-read p { margin-bottom: 0; }
[data-theme="light"] body { background: radial-gradient(circle at top left, rgba(0,0,0,.04), transparent 36%), var(--bg); }
[data-theme="light"] .orb { opacity: .07; }

/* Profile redesign alignment + mobile polish */
body.profile-redesign .profile-hero {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
body.profile-redesign .profile-username-wrap,
body.profile-redesign .profile-bio-actions,
body.profile-redesign .profile-bio-edit,
body.profile-redesign .profile-action-row {
  justify-content: center !important;
}
body.profile-redesign .profile-bio-text {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
body.profile-redesign .profile-bio-edit {
  width: 100% !important;
}
body.profile-redesign .profile-bio-edit input {
  background: var(--input-bg) !important;
}
body.profile-redesign .profile-tool-search-box {
  margin-left: auto !important;
  margin-right: auto !important;
}
body.profile-redesign .profile-import-row {
  margin-top: .65rem !important;
  display: flex !important;
  justify-content: center !important;
}
body.profile-redesign .profile-import-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: .42rem .72rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  background: var(--input-bg) !important;
  color: var(--text2) !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.10) !important;
  transition: border-color .14s ease, color .14s ease, background .14s ease, transform .14s ease !important;
}
body.profile-redesign .profile-import-link:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-dim) !important;
  transform: translateY(-1px) !important;
}
body.profile-redesign .profile-hero > div[style*="margin-top:0.5rem"] {
  text-align: center !important;
}
body.profile-redesign .profile-hero > div[style*="margin-top:0.5rem"] a {
  color: var(--text2) !important;
  background: var(--input-bg) !important;
  border-color: var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}

@media (max-width: 760px) {
  body.profile-redesign .page-wrap {
    width: min(100%, 430px) !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    padding-top: calc(.75rem + env(safe-area-inset-top)) !important;
  }
  body.profile-redesign .profile-hero {
    width: 100% !important;
    padding: .95rem .75rem .9rem !important;
    border-radius: 22px !important;
  }
  body.profile-redesign .profile-username-wrap {
    width: 100% !important;
    gap: .36rem !important;
    justify-content: center !important;
  }
  body.profile-redesign .profile-username {
    max-width: calc(100vw - 92px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(2rem, 11vw, 3rem) !important;
  }
  body.profile-redesign .profile-emoji {
    font-size: clamp(1.55rem, 7vw, 2.25rem) !important;
  }
  body.profile-redesign .emoji-edit-btn {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
  }
  body.profile-redesign .profile-bio-text {
    max-width: 95% !important;
    margin-top: .55rem !important;
    font-size: .86rem !important;
    line-height: 1.42 !important;
  }
  body.profile-redesign .profile-import-row {
    margin-top: .55rem !important;
  }
  body.profile-redesign .profile-import-link {
    min-height: 32px !important;
    padding: .38rem .64rem !important;
    font-size: .74rem !important;
  }
  body.profile-redesign .profile-action-row {
    width: 100% !important;
    gap: .42rem !important;
    margin-top: .8rem !important;
    margin-bottom: .15rem !important;
    justify-content: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }
  body.profile-redesign .stats-link-btn.stats-icon-btn {
    width: 37px !important;
    height: 37px !important;
    min-width: 37px !important;
    border-radius: 13px !important;
    font-size: .98rem !important;
  }
  body.profile-redesign .profile-tool-search-wrap.open {
    width: 100% !important;
    margin-top: .65rem !important;
  }
  body.profile-redesign .profile-tool-search-box {
    width: 100% !important;
    max-width: none !important;
    border-radius: 16px !important;
  }
  body.profile-redesign .profile-bio-edit {
    flex-direction: column !important;
    align-items: stretch !important;
    width: min(100%, 330px) !important;
    gap: 8px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.profile-redesign .profile-bio-edit input,
  body.profile-redesign .profile-bio-edit button {
    width: 100% !important;
    max-width: none !important;
  }
  body.profile-redesign .profile-top10-strip {
    margin-top: .75rem !important;
    padding: .8rem .65rem .6rem !important;
    border-radius: 18px !important;
  }
  body.profile-redesign .profile-top10-head {
    gap: 8px !important;
    align-items: center !important;
  }
  body.profile-redesign .profile-random-btn,
  body.profile-redesign .top4-edit-btn {
    white-space: nowrap !important;
    font-size: .72rem !important;
    padding: .36rem .58rem !important;
  }
  body.profile-redesign .profile-carousel-row {
    gap: 10px !important;
    padding-bottom: .55rem !important;
    scroll-snap-type: x proximity !important;
  }
  body.profile-redesign .profile-carousel-item {
    flex: 0 0 78px !important;
    scroll-snap-align: start !important;
  }
  body.profile-redesign .profile-carousel-art {
    width: 78px !important;
    border-radius: 12px !important;
  }
  body.profile-redesign .profile-carousel-title {
    font-size: .66rem !important;
    line-height: 1.18 !important;
    max-height: 2.35em !important;
    overflow: hidden !important;
  }
  body.profile-redesign .profile-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: .75rem 0 !important;
  }
  body.profile-redesign .stat-card {
    min-height: 58px !important;
    padding: .56rem .35rem !important;
    border-radius: 15px !important;
  }
  body.profile-redesign .stat-num {
    font-size: 1.08rem !important;
  }
  body.profile-redesign .stat-label {
    font-size: .58rem !important;
    letter-spacing: .04em !important;
  }
  body.profile-redesign .profile-3col,
  body.profile-redesign .profile-3col.filtered {
    grid-template-columns: 1fr !important;
    gap: .8rem !important;
  }
  body.profile-redesign .profile-section {
    padding: .7rem !important;
    border-radius: 18px !important;
  }
  body.profile-redesign .prof-sub-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  body.profile-redesign .sort-select {
    width: 100% !important;
    max-width: none !important;
  }
  body.profile-redesign .profile-item {
    padding: .58rem .62rem !important;
    gap: 8px !important;
  }
}

@media (max-width: 390px) {
  body.profile-redesign .stats-link-btn.stats-icon-btn {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    font-size: .92rem !important;
  }
  body.profile-redesign .profile-action-row { gap: .36rem !important; }
  body.profile-redesign .profile-carousel-item { flex-basis: 72px !important; }
  body.profile-redesign .profile-carousel-art { width: 72px !important; }
  body.profile-redesign .stat-label { font-size: .54rem !important; }
}

/* Full liquid-glass page refresh batch */
.liquid-page .page-wrap,
.liquid-page.page-wrap {
  position: relative;
  z-index: 1;
}
.liquid-page .page-heading,
.liquid-page .stats-page-title,
.liquid-page .pf-hero h1,
.liquid-page .recs-pulse {
  letter-spacing: -0.045em;
}
.liquid-page .card,
.liquid-page .social-panel,
.liquid-page .stats-panel,
.liquid-page .stats-big-card,
.liquid-page .pf-section,
.liquid-page .pf-timeline-block,
.liquid-page .pf-review-card,
.liquid-page .rec-card,
.liquid-page .search-result,
.liquid-page .feed-card,
.liquid-page .match-rec-card,
.liquid-page .modal-card,
.liquid-page .auth-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 86%, white 6%), color-mix(in srgb, var(--surface2) 88%, black 4%));
  border: 1px solid color-mix(in srgb, var(--border2) 72%, var(--accent) 12%);
  box-shadow: 0 18px 52px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter: blur(22px) saturate(1.12);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
}
.liquid-page .card:hover,
.liquid-page .social-panel:hover,
.liquid-page .stats-panel:hover,
.liquid-page .pf-section:hover,
.liquid-page .pf-timeline-block:hover,
.liquid-page .pf-review-card:hover,
.liquid-page .rec-card:hover,
.liquid-page .search-result:hover,
.liquid-page .feed-card:hover,
.liquid-page .match-rec-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border2));
  transform: translateY(-1px);
}
.liquid-page .page-heading,
.liquid-page .stats-page-hero,
.liquid-page .pf-hero,
.liquid-page .recs-header,
.liquid-page .social-hero {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.liquid-page .pf-hero,
.liquid-page .stats-page-hero {
  max-width: 900px;
  margin-bottom: 1.3rem;
  padding: 1.15rem 1rem;
  border-radius: 28px;
  background: radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 56%);
}
.liquid-page .pf-hero .pf-back,
.liquid-page .pf-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: var(--input-bg);
  color: var(--text2);
  padding: .48rem .75rem;
  font-weight: 800;
  text-decoration: none;
  margin-bottom: .7rem;
}
.liquid-page .pf-hero .pf-back:hover,
.liquid-page .pf-back:hover { border-color: var(--accent); color: var(--accent); }
.liquid-page .pf-eyebrow,
.liquid-page .feed-label,
.liquid-page .recent-label,
.liquid-page .stats-panel-title,
.liquid-page .pf-section-head h2,
.liquid-page .social-panel-title {
  color: var(--text);
  letter-spacing: .1em;
}
.liquid-page .type-tabs,
.liquid-page .activity-filter-row,
.liquid-page .suggested-tabs,
.liquid-page .pf-compare-search,
.liquid-page .search-row,
.liquid-page .match-refresh-row,
.liquid-page .refine-row {
  background: color-mix(in srgb, var(--input-bg) 86%, transparent);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: .35rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.liquid-page .type-tabs { max-width: 520px; margin-left:auto; margin-right:auto; }
.liquid-page input,
.liquid-page textarea,
.liquid-page select,
.liquid-page .rec-prompt-editable {
  border-radius: 16px !important;
  border-color: color-mix(in srgb, var(--border2) 80%, var(--accent) 10%) !important;
}
.liquid-page .secondary-btn,
.liquid-page .mini-btn,
.liquid-page .social-refresh,
.liquid-page .activity-filter-btn,
.liquid-page .match-empty-generate,
.liquid-page .pf-show-all-btn,
.liquid-page .pf-month-link,
.liquid-page .auth-btn,
.liquid-page .guest-btn {
  border-radius: 999px !important;
}
.liquid-page .search-center-wrap,
.liquid-page .recs-center-wrap {
  min-height: calc(100vh - 96px);
}
.search-liquid .search-page-wrap { max-width: 900px; }
.search-liquid .card { max-width: 720px; margin: 0 auto; padding: 1rem; border-radius: 28px; }
.search-liquid .search-row { padding: .4rem; }
.search-liquid .search-row input { min-height: 46px; font-size: 1rem; padding-left: 1rem; }
.search-liquid .search-results { max-width: 840px; margin-left: auto; margin-right: auto; }
.search-liquid .search-result { border-radius: 22px; padding: .9rem; }
.recs-liquid .recs-center-wrap { max-width: 880px; margin: 0 auto; }
.recs-liquid .card { border-radius: 30px; padding: 1.15rem; }
.recs-liquid .results { max-width: 850px; margin-left: auto; margin-right: auto; }
.recs-liquid .rec-card { border-radius: 26px; }
.recs-liquid .brain-recs-btn { width: 46px; height: 46px; box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 10px 28px rgba(0,0,0,.2) !important; }
.social-liquid .page-wrap { max-width: 1120px; }
.social-liquid .social-hero { align-items: center; padding: .65rem 0 .25rem; }
.social-liquid .social-shell { gap: 1.15rem; }
.social-liquid .social-panel { border-radius: 28px; }
.social-liquid .feed-card { border-radius: 22px; padding: 1rem; }
.social-liquid .social-item { border-radius: 16px; }
.match-liquid .match-column-grid { gap: 1rem; }
.match-liquid .match-col { border-radius: 28px; overflow: hidden; }
.match-liquid .match-rec-card { border-radius: 22px; padding: .7rem; }
.match-liquid .match-rec-card img,
.match-liquid .pf-card-ph { border-radius: 16px; }
.stats-liquid .stats-grid-main,
.stats-liquid .stats-section-grid { gap: 1rem; align-items: start; }
.stats-liquid .stats-big-card { border-radius: 24px; padding: 1rem; }
.stats-liquid .stats-panel { border-radius: 26px; padding: 1rem; }
.compare-liquid .pf-section { border-radius: 28px; }
.compare-liquid .pf-compare-card { border-radius: 20px; }
.compare-liquid .pf-compare-search { margin-bottom: .8rem; }
.timeline-liquid .pf-timeline-block { padding: 1rem; border-radius: 28px; }
.timeline-liquid .pf-timeline-title-line { display:flex; align-items:center; justify-content:flex-start; gap:.65rem; flex-wrap:wrap; }
.timeline-liquid .pf-month-link { min-height: 34px; display:inline-flex; align-items:center; justify-content:center; padding:.42rem .75rem; line-height:1; }
.month-liquid .pf-month-page { border-radius: 28px; }
.reviews-liquid .pf-review-wall { display:flex; flex-direction:column; gap:.8rem; }
.reviews-liquid .pf-review-card { border-radius: 22px; align-items: flex-start; }
.reviews-liquid .pf-review-main p { margin-top: .45rem; line-height: 1.55; }
.index-liquid .auth-screen { padding: 1.5rem; }
.index-liquid .auth-card { border-radius: 32px; padding: 2.2rem; max-width: 410px; }
.index-liquid .auth-title { font-size: 1.75rem; background:linear-gradient(135deg,var(--text),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.index-liquid .auth-btn { min-height: 46px; }
.index-liquid .auth-switch button { border-radius: 999px; padding: .18rem .35rem; text-decoration: none; background: var(--accent-dim); }
/* make user page visually match the profile redesign */
.user-liquid.profile-redesign .profile-hero,
.user-liquid .profile-hero {
  position: relative;
  text-align: center !important;
  margin: 0 auto 1rem !important;
  padding: 1.35rem 1.25rem 1.15rem !important;
  border: 1px solid color-mix(in srgb,var(--accent) 18%,var(--border)) !important;
  border-radius: 28px !important;
  background: radial-gradient(circle at 50% -35%, color-mix(in srgb,var(--accent) 20%, transparent), transparent 62%), linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important;
  overflow: hidden;
}
.user-liquid .profile-joined,
.user-liquid .friend-action-row,
.user-liquid .profile-action-row,
.user-liquid .profile-tools-row { justify-content:center !important; text-align:center !important; }
.user-liquid .profile-action-row { display:flex; flex-wrap:wrap; gap:.55rem; margin: .9rem auto .4rem; }
.user-liquid .friend-btn { border-radius:999px; padding:.5rem 1rem; }
.user-liquid .profile-top10-strip,
.user-liquid .profile-stats,
.user-liquid .profile-3col { max-width: 1100px; margin-left:auto; margin-right:auto; }
.user-liquid .profile-top10-strip { border-radius:24px; padding:1rem; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid var(--border); }
.user-liquid .stat-card { border-radius:22px; background:linear-gradient(180deg,var(--surface),var(--surface2)); }
.user-liquid .profile-section { border-radius:26px; background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); border:1px solid var(--border); padding:1rem; }
/* shared mobile tightening */
@media(max-width: 700px){
  .liquid-page .page-wrap { padding-left: .85rem; padding-right: .85rem; padding-top: calc(70px + env(safe-area-inset-top)); }
  .liquid-page .page-heading { font-size: clamp(2.1rem, 12vw, 3rem); margin-bottom: 1rem; }
  .liquid-page .card,
  .liquid-page .social-panel,
  .liquid-page .stats-panel,
  .liquid-page .stats-big-card,
  .liquid-page .pf-section,
  .liquid-page .pf-timeline-block,
  .liquid-page .pf-review-card,
  .liquid-page .rec-card,
  .liquid-page .search-result,
  .liquid-page .feed-card,
  .liquid-page .match-rec-card { border-radius: 20px; box-shadow: 0 10px 34px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.045); }
  .liquid-page .type-tabs { width:100%; max-width: 100%; }
  .liquid-page .type-tab { min-height: 40px; }
  .search-liquid .search-center-wrap,
  .recs-liquid .recs-center-wrap { min-height: auto; justify-content: flex-start; padding-bottom: 1rem; }
  .search-liquid .card,
  .recs-liquid .card { padding: .82rem; }
  .search-liquid .search-row { flex-direction: column; }
  .search-liquid .search-result { gap: .75rem; align-items: flex-start; }
  .social-liquid .social-hero { text-align: center; align-items: stretch; }
  .social-liquid .social-refresh { width:100%; }
  .social-liquid .social-shell { grid-template-columns: 1fr; }
  .social-liquid .social-side { order:-1; }
  .match-liquid .match-column-grid { grid-template-columns:1fr !important; }
  .match-liquid .match-rec-card { align-items: flex-start; }
  .stats-liquid .stats-grid-main { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stats-liquid .stats-big-num { font-size: clamp(1.15rem, 7vw, 1.7rem); }
  .stats-liquid .stats-section-grid { grid-template-columns:1fr !important; }
  .compare-liquid .pf-compare-card { grid-template-columns:1fr !important; gap:.75rem; }
  .compare-liquid .pf-compare-ratings { width:100%; justify-content:space-between; }
  .timeline-liquid .pf-timeline-head { gap:.4rem; }
  .timeline-liquid .pf-card-grid.mini,
  .month-liquid .month-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap:.7rem; }
  .timeline-liquid .pf-month-link { font-size:.74rem; min-height:32px; padding:.38rem .62rem; }
  .reviews-liquid .pf-review-card { display:grid; grid-template-columns:58px minmax(0,1fr); gap:.75rem; padding:.75rem; }
  .reviews-liquid .pf-review-poster { width:58px; height:84px; border-radius:12px; }
  .reviews-liquid .pf-review-top { flex-direction:column; align-items:flex-start; gap:.25rem; }
  .index-liquid .auth-card { padding: 1.35rem; border-radius: 26px; }
  .user-liquid .profile-hero { padding:1rem !important; border-radius:22px !important; }
  .user-liquid .profile-stats { grid-template-columns: repeat(3, minmax(0,1fr)); gap:.55rem; }
  .user-liquid .stat-card { padding:.75rem .45rem; }
  .user-liquid .stat-num { font-size:1.35rem; }
  .user-liquid .profile-3col { grid-template-columns:1fr !important; gap:1rem; }
  .user-liquid .profile-section { padding:.8rem; border-radius:20px; }
  .user-liquid .profile-carousel-row { justify-content:flex-start !important; }
}
@media(max-width: 420px){
  .stats-liquid .stats-grid-main { grid-template-columns:1fr 1fr; gap:.65rem; }
  .timeline-liquid .pf-card-grid.mini,
  .month-liquid .month-grid { grid-template-columns:1fr 1fr !important; }
  .reviews-liquid .pf-review-card { grid-template-columns:52px minmax(0,1fr); }
  .reviews-liquid .pf-review-poster { width:52px; height:76px; }
  .liquid-page .nav-tabs { gap:2px; }
}


/* Targeted polish after liquid redesign feedback */
.search-liquid .search-center-wrap { width:min(880px,100%) !important; margin-inline:auto !important; align-items:center !important; }
.search-liquid .search-center-wrap > .card { width:min(780px,100%) !important; min-height:150px; display:flex; flex-direction:column; justify-content:center; }
.search-liquid .search-results { width:min(780px,100%) !important; }
.search-liquid .type-tab { transition: background .08s ease, color .08s ease, border-color .08s ease, transform .08s ease !important; }

/* make stats panels masonry so shorter cards do not leave dead gaps */
.stats-liquid .stats-section-grid { display:block !important; columns: 2 360px; column-gap: 1rem; }
.stats-liquid .stats-section-grid > * { break-inside: avoid; margin: 0 0 1rem; width:100%; display:block; }
.stats-liquid .stats-panel { min-height:0 !important; align-self:start !important; }

/* user page should match the redesigned profile header instead of a loose header + rows */
.user-liquid.profile-redesign .page-wrap { max-width:1180px; padding-top:1.35rem; }
.user-liquid.profile-redesign .profile-hero.user-profile-hero-card { width:100%; min-height:210px; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; gap:.55rem; margin:0 auto 1.15rem !important; }
.user-liquid.profile-redesign .profile-hero.user-profile-hero-card .profile-username-wrap { justify-content:center !important; align-items:center !important; }
.user-liquid.profile-redesign .profile-hero.user-profile-hero-card .profile-joined { margin:.2rem 0 0 !important; font-size:.9rem; color:var(--text2); }
.user-liquid.profile-redesign .profile-hero.user-profile-hero-card .friend-action-row { margin:.3rem 0 .2rem !important; display:flex; justify-content:center; }
.user-liquid.profile-redesign .profile-hero.user-profile-hero-card .profile-bio-text { margin:.25rem auto !important; text-align:center !important; max-width:680px; }
.user-liquid.profile-redesign .profile-hero.user-profile-hero-card .profile-action-row { margin:.35rem auto 0 !important; justify-content:center !important; }
.user-liquid.profile-redesign .profile-top10-strip { padding:1.15rem !important; border-radius:28px !important; overflow:hidden; }
.user-liquid.profile-redesign .profile-carousel-row { justify-content:flex-start !important; align-items:flex-start !important; gap:1.05rem !important; padding:.4rem .2rem .65rem !important; scroll-snap-type:x proximity; }
.user-liquid.profile-redesign .profile-carousel-item { flex:0 0 92px !important; width:92px !important; scroll-snap-align:start; }
.user-liquid.profile-redesign .profile-carousel-art { width:92px !important; min-height:92px; }
.user-liquid.profile-redesign .profile-carousel-title { font-size:.86rem !important; line-height:1.18; max-height:2.36em; overflow:hidden; }
.user-liquid.profile-redesign .profile-mini-stars { font-size:.78rem; }

.compare-liquid #compare-perfect-list { display:flex; flex-direction:column; gap:10px; }
.compare-liquid .pf-perfect-row { border-color:rgba(34,197,94,.72) !important; box-shadow:0 0 0 1px rgba(34,197,94,.22), 0 10px 28px rgba(34,197,94,.07); }
.compare-liquid .pf-perfect-row .pf-compare-ratings em { color:#22c55e; }

@media(max-width:760px){
  .search-liquid .search-center-wrap { align-items:stretch !important; width:100% !important; }
  .search-liquid .search-center-wrap > .card, .search-liquid .search-results { width:100% !important; }
  .search-liquid .search-center-wrap > .card { min-height:132px; padding:1rem !important; border-radius:22px !important; }
  .stats-liquid .stats-section-grid { columns:1 !important; }
  .user-liquid.profile-redesign .page-wrap { width:min(100%,430px) !important; padding-left:max(10px,env(safe-area-inset-left)) !important; padding-right:max(10px,env(safe-area-inset-right)) !important; }
  .user-liquid.profile-redesign .profile-hero.user-profile-hero-card { min-height:0; padding:.95rem .75rem .9rem !important; border-radius:22px !important; gap:.45rem; }
  .user-liquid.profile-redesign .profile-username { max-width:calc(100vw - 92px) !important; font-size:clamp(2rem,11vw,3rem) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .user-liquid.profile-redesign .profile-action-row { gap:.42rem !important; flex-wrap:wrap !important; }
  .user-liquid.profile-redesign .stats-link-btn.stats-icon-btn { width:37px !important; height:37px !important; min-width:37px !important; border-radius:13px !important; }
  .user-liquid.profile-redesign .profile-top10-strip { padding:.8rem .65rem .6rem !important; border-radius:18px !important; }
  .user-liquid.profile-redesign .profile-carousel-row { gap:10px !important; padding-bottom:.55rem !important; }
  .user-liquid.profile-redesign .profile-carousel-item { flex:0 0 78px !important; width:78px !important; }
  .user-liquid.profile-redesign .profile-carousel-art { width:78px !important; min-height:78px !important; border-radius:12px !important; }
  .user-liquid.profile-redesign .profile-carousel-title { font-size:.66rem !important; }
}


/* Final profile/user parity + stats/compare polish */
body.profile-redesign.user-liquid .page-wrap{max-width:1180px!important;padding-top:1.35rem!important;padding-bottom:4rem!important;}
body.profile-redesign.user-liquid .profile-hero.user-profile-hero-card{position:relative;width:100%;min-height:250px;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;gap:.55rem;margin:0 auto 1rem!important;padding:1.35rem 1.35rem 1.15rem!important;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--border))!important;border-radius:28px!important;background:radial-gradient(circle at 50% -35%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 62%),linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025))!important;box-shadow:0 22px 70px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)!important;overflow:hidden!important;}
body.profile-redesign.user-liquid .profile-hero.user-profile-hero-card:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0 45%,color-mix(in srgb,var(--accent) 10%,transparent) 55%,transparent 70%);opacity:.72;z-index:0;pointer-events:none;}
body.profile-redesign.user-liquid .profile-hero.user-profile-hero-card:after{content:"";position:absolute;left:1.35rem;right:1.35rem;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.55;}
body.profile-redesign.user-liquid .profile-hero.user-profile-hero-card>*{position:relative;z-index:1;}
body.profile-redesign.user-liquid .profile-username-wrap{display:flex!important;align-items:center!important;justify-content:center!important;gap:.55rem!important;flex-wrap:wrap!important;}
body.profile-redesign.user-liquid .profile-username{animation:none!important;font-size:clamp(2.1rem,5vw,4.25rem)!important;letter-spacing:-.055em!important;line-height:.95!important;background:linear-gradient(135deg,var(--text),color-mix(in srgb,var(--accent) 85%,#fff))!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;text-shadow:0 16px 48px color-mix(in srgb,var(--accent) 18%, transparent)!important;}
body.profile-redesign.user-liquid .profile-emoji{font-size:clamp(1.8rem,4vw,3.2rem)!important;filter:drop-shadow(0 10px 22px rgba(0,0,0,.28));}
body.profile-redesign.user-liquid .profile-joined{margin:.2rem 0 0!important;font-size:.96rem!important;color:var(--text2)!important;text-align:center!important;}
body.profile-redesign.user-liquid .friend-action-row{margin:.25rem 0 .25rem!important;display:flex!important;justify-content:center!important;}
body.profile-redesign.user-liquid .profile-bio-text{max-width:760px!important;margin:.35rem auto!important;text-align:center!important;color:var(--text2)!important;font-size:.98rem!important;line-height:1.55!important;}
body.profile-redesign.user-liquid .profile-action-row{display:flex!important;justify-content:center!important;flex-wrap:wrap!important;gap:.55rem!important;margin:.55rem auto 0!important;}
body.profile-redesign.user-liquid .stats-link-btn.stats-icon-btn{width:42px!important;height:42px!important;border-radius:14px!important;background:rgba(255,255,255,.055)!important;border-color:color-mix(in srgb,var(--accent) 36%,var(--border))!important;box-shadow:0 12px 28px rgba(0,0,0,.16)!important;}
body.profile-redesign.user-liquid .stats-link-btn.stats-icon-btn:hover{background:var(--accent)!important;color:var(--accent-btn-text)!important;border-color:var(--accent)!important;transform:translateY(-2px) scale(1.02)!important;}
body.profile-redesign.user-liquid .profile-extras{margin:.95rem auto .9rem!important;max-width:1180px!important;}
body.profile-redesign.user-liquid .profile-top10-strip{position:relative;max-width:none!important;margin:0!important;padding:1rem 1rem .85rem!important;border:1px solid var(--border)!important;border-radius:24px!important;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))!important;box-shadow:0 18px 50px rgba(0,0,0,.16)!important;overflow:hidden!important;}
body.profile-redesign.user-liquid .profile-top10-strip:before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.65;}
body.profile-redesign.user-liquid .profile-top10-head{margin-bottom:.75rem!important;font-size:.82rem!important;color:var(--text)!important;letter-spacing:.11em!important;}
body.profile-redesign.user-liquid .profile-carousel-row{display:flex!important;justify-content:flex-start!important;align-items:flex-start!important;gap:14px!important;padding:.1rem .15rem .7rem!important;overflow-x:auto!important;scrollbar-color:var(--accent) transparent!important;scroll-snap-type:x proximity!important;}
body.profile-redesign.user-liquid .profile-carousel-row:after{content:"";flex:0 0 1px;}
body.profile-redesign.user-liquid .profile-carousel-item{flex:0 0 94px!important;width:94px!important;text-align:left!important;scroll-snap-align:start;}
body.profile-redesign.user-liquid .profile-carousel-art{width:94px!important;border-radius:16px!important;box-shadow:0 14px 34px rgba(0,0,0,.28)!important;border:1px solid rgba(255,255,255,.08)!important;}
body.profile-redesign.user-liquid .profile-carousel-title{font-size:.73rem!important;font-weight:850!important;margin-top:.5rem!important;color:var(--text)!important;line-height:1.15!important;text-align:left!important;}
body.profile-redesign.user-liquid .profile-mini-stars{display:block!important;margin-top:.22rem!important;font-size:.68rem!important;text-align:left!important;}
body.profile-redesign.user-liquid .profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;margin:1rem 0 1.05rem!important;max-width:none!important;}
body.profile-redesign.user-liquid .stat-card{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:.7rem!important;min-height:70px!important;border-radius:20px!important;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025))!important;border:1px solid var(--border)!important;box-shadow:0 14px 38px rgba(0,0,0,.12)!important;padding:.85rem 1rem!important;overflow:hidden!important;}
body.profile-redesign.user-liquid .stat-num{font-size:1.45rem!important;line-height:1!important;font-weight:900!important;}
body.profile-redesign.user-liquid .stat-label{font-size:.74rem!important;margin-top:0!important;text-align:left!important;}
body.profile-redesign.user-liquid .profile-3col{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:1rem!important;max-width:none!important;}
body.profile-redesign.user-liquid .profile-section{position:relative!important;padding:1rem!important;border:1px solid var(--border)!important;border-radius:24px!important;background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.018))!important;box-shadow:0 16px 44px rgba(0,0,0,.13)!important;min-width:0!important;}
body.profile-redesign.user-liquid .prof-section-head{margin-bottom:.9rem!important;color:var(--text)!important;font-size:.86rem!important;font-weight:950!important;letter-spacing:.105em!important;}
body.profile-redesign.user-liquid .prof-section-count{margin-left:auto!important;color:var(--accent)!important;font-weight:900!important;}
body.profile-redesign.user-liquid .prof-sub-row{padding:.42rem .5rem!important;margin-bottom:.55rem!important;border-radius:12px!important;background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.045)!important;}
body.profile-redesign.user-liquid .prof-sub-label{font-weight:950!important;color:var(--text2)!important;}
body.profile-redesign.user-liquid .sort-select{border-radius:999px!important;background:rgba(0,0,0,.14)!important;}
body.profile-redesign.user-liquid .profile-item{border-radius:16px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.06)!important;padding:.7rem .75rem!important;box-shadow:none!important;}
body.profile-redesign.user-liquid .profile-item:hover{background:rgba(255,255,255,.07)!important;border-color:color-mix(in srgb,var(--accent) 35%,var(--border))!important;transform:translateY(-1px)!important;}
body.profile-redesign.user-liquid .profile-thumb,body.profile-redesign.user-liquid .profile-thumb-sq{width:40px!important;border-radius:10px!important;box-shadow:0 8px 18px rgba(0,0,0,.22)!important;}
body.profile-redesign.user-liquid .profile-thumb{height:56px!important;}
body.profile-redesign.user-liquid .profile-thumb-sq{height:40px!important;}
body.profile-redesign.user-liquid .profile-item-title{font-size:.9rem!important;font-weight:850!important;}
body.profile-redesign.user-liquid .profile-item-sub{font-size:.74rem!important;color:var(--muted)!important;}
@media(max-width:700px){
  body.profile-redesign.user-liquid .page-wrap{padding-top:calc(70px + env(safe-area-inset-top))!important;}
  body.profile-redesign.user-liquid .profile-hero.user-profile-hero-card{min-height:0!important;padding:1rem!important;border-radius:22px!important;}
  body.profile-redesign.user-liquid .profile-username{font-size:clamp(2rem,12vw,3.1rem)!important;}
  body.profile-redesign.user-liquid .profile-action-row{gap:.45rem!important;}
  body.profile-redesign.user-liquid .stats-link-btn.stats-icon-btn{width:38px!important;height:38px!important;border-radius:13px!important;}
  body.profile-redesign.user-liquid .profile-top10-strip{border-radius:20px!important;padding:.85rem .75rem .65rem!important;}
  body.profile-redesign.user-liquid .profile-carousel-row{gap:10px!important;}
  body.profile-redesign.user-liquid .profile-carousel-item{flex-basis:82px!important;width:82px!important;}
  body.profile-redesign.user-liquid .profile-carousel-art{width:82px!important;border-radius:13px!important;}
  body.profile-redesign.user-liquid .profile-carousel-title{font-size:.68rem!important;}
  body.profile-redesign.user-liquid .profile-stats{gap:8px!important;margin:.85rem 0!important;}
  body.profile-redesign.user-liquid .stat-card{min-height:62px!important;display:block!important;text-align:center!important;padding:.65rem .45rem!important;border-radius:16px!important;}
  body.profile-redesign.user-liquid .stat-num{font-size:1.15rem!important;}
  body.profile-redesign.user-liquid .stat-label{text-align:center!important;font-size:.62rem!important;margin-top:.24rem!important;}
  body.profile-redesign.user-liquid .profile-3col{grid-template-columns:1fr!important;gap:1rem!important;}
  body.profile-redesign.user-liquid .profile-section{padding:.75rem!important;border-radius:18px!important;}
  body.profile-redesign.user-liquid .prof-section-head{font-size:.78rem!important;}
  body.profile-redesign.user-liquid .profile-item{border-radius:14px!important;padding:.62rem .65rem!important;}
}

/* Stats layout: fit long top-card text and balance lower panels */
.stats-liquid .stats-big-card{min-width:0;overflow:hidden;}
.stats-liquid .stats-big-num{line-height:1.06;max-width:100%;overflow-wrap:anywhere;word-break:normal;}
.stats-liquid .stat-text-card .stats-big-num,.stats-liquid .stats-big-text{font-size:clamp(1.1rem,2.35vw,2rem)!important;letter-spacing:-.04em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.stats-liquid .stats-grid-main{align-items:stretch!important;}
.stats-liquid .stats-balanced-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:1rem!important;columns:auto!important;}
.stats-liquid .stats-balanced-grid>.stats-stack{display:flex;flex-direction:column;gap:1rem;min-width:0;}
.stats-liquid .stats-balanced-grid>.stats-stack>.stats-panel{margin:0!important;width:100%;}
@media(max-width:760px){.stats-liquid .stats-balanced-grid{grid-template-columns:1fr!important}.stats-liquid .stats-big-text{font-size:clamp(1rem,7vw,1.55rem)!important}}

/* Compare unmatched favorites: make them compact like normal media cards */
.compare-liquid .compare-fav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.7rem;}
.compare-liquid .compare-fav-grid .pf-card{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:.65rem;min-height:64px;padding:.58rem .65rem;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);box-shadow:none;}
.compare-liquid .compare-fav-grid .pf-card img,.compare-liquid .compare-fav-grid .pf-card .pf-card-ph{width:44px;height:60px;border-radius:10px;object-fit:cover;}
.compare-liquid .compare-fav-grid .pf-card-title{font-size:.86rem;line-height:1.12;font-weight:850;}
.compare-liquid .compare-fav-grid .pf-card-sub,.compare-liquid .compare-fav-grid .pf-card-meta{font-size:.72rem;color:var(--muted);}
.compare-liquid .compare-fav-grid .pf-card:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--border));transform:translateY(-1px);}
@media(max-width:700px){.compare-liquid .compare-fav-grid{grid-template-columns:1fr}.compare-liquid .compare-fav-grid .pf-card{min-height:62px}}


/* Final profile/search polish: signed-in brain, favorite button, wider tabs, user column fix, stats cleanup */
.brain-recs-btn:not(.guest-locked){opacity:1!important;filter:none!important;background:var(--accent-dim)!important;border-color:color-mix(in srgb,var(--accent) 45%,var(--border))!important;color:var(--text)!important;}
.brain-recs-btn:not(.guest-locked):hover{background:var(--accent)!important;color:var(--accent-btn-text)!important;border-color:var(--accent)!important;}
.brain-recs-btn.guest-locked{opacity:.42!important;filter:grayscale(1) saturate(.2)!important;background:var(--surface2)!important;border-color:var(--border2)!important;color:var(--muted)!important;cursor:not-allowed!important;pointer-events:none!important;animation:none!important;box-shadow:none!important;}
.stats-link-btn.stats-icon-btn.favorite-tool-btn,.favorite-tool-btn{background:var(--accent-dim)!important;border-color:color-mix(in srgb,var(--accent) 45%,var(--border))!important;color:#f87171!important;}
.stats-link-btn.stats-icon-btn.favorite-tool-btn:hover,.stats-link-btn.stats-icon-btn.favorite-tool-btn.active,.favorite-tool-btn:hover,.favorite-tool-btn.active{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-btn-text)!important;}
.type-tabs{max-width:min(620px,100%)!important;margin-left:auto!important;margin-right:auto!important;gap:8px!important;padding:6px!important;}
.type-tab{min-width:108px!important;padding:.78rem 1.05rem!important;}
.type-tab:hover::after{content:"";position:absolute;left:22%;right:22%;bottom:6px;height:2px;border-radius:999px;background:var(--accent);opacity:.9;}
@media(max-width:560px){.type-tabs{max-width:100%!important;gap:6px!important;padding:5px!important}.type-tab{min-width:0!important;padding:.66rem .8rem!important}}
body.profile-redesign.user-liquid .profile-3col.filtered{grid-template-columns:1fr!important;}
body.profile-redesign.user-liquid .profile-3col.filtered .profile-section{width:100%!important;max-width:none!important;}
body.profile-redesign.user-liquid .profile-3col.filtered .profile-items-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:1rem!important;}
body.profile-redesign.user-liquid .profile-3col.filtered .profile-item{min-width:0!important;}
@media(max-width:700px){body.profile-redesign.user-liquid .profile-3col.filtered .profile-items-grid{grid-template-columns:1fr!important;gap:.75rem!important;}}
.rating-style-row small{display:none!important;}
.stats-liquid .rating-style-row{gap:.35rem!important;margin-bottom:.7rem!important;}

/* Solid-card/mobile readability + profile action/top10/social polish */
[data-theme="dark"] { --card-solid:#1b1b1e; --card-solid-2:#202024; }
[data-theme="light"] { --card-solid:#d8dae0; --card-solid-2:#d0d3da; }
.card,
.media-card,
.profile-section,
.profile-item,
.profile-top10-strip,
.stat-card,
.stats-panel,
.stats-big-card,
.feed-card,
.social-panel,
.search-card,
.pf-card,
.pf-review-card,
.suggested-card,
.compare-card,
.compare-row,
.timeline-month,
.month-card,
.match-card,
.liquid-card,
.review-framework-box,
.ep-season,
.media-panel,
.similar-card {
  background: var(--card-solid) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.profile-item,
.profile-section,
.feed-card,
.compare-row,
.suggested-card,
.pf-review-card-media,
.media-panel,
.similar-card { background: var(--card-solid-2) !important; }

/* Keep profile/user tool buttons in one horizontal carousel row when needed */
.profile-hero .profile-action-row,
body.profile-redesign .profile-action-row,
body.profile-redesign.user-liquid .profile-action-row,
.user-liquid.profile-redesign .profile-action-row {
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  max-width:100% !important;
  gap:.5rem !important;
  padding:.15rem .1rem .25rem !important;
  margin:.45rem auto .15rem !important;
  scrollbar-width:none !important;
  -webkit-overflow-scrolling:touch !important;
}
.profile-action-row::-webkit-scrollbar { display:none; }
body.profile-redesign .profile-hero,
body.profile-redesign.user-liquid .profile-hero.user-profile-hero-card,
.user-liquid.profile-redesign .profile-hero.user-profile-hero-card {
  padding-bottom:.95rem !important;
  min-height:0 !important;
}
@media(max-width:700px){
  .profile-hero .profile-action-row,
  body.profile-redesign .profile-action-row,
  body.profile-redesign.user-liquid .profile-action-row,
  .user-liquid.profile-redesign .profile-action-row {
    justify-content:flex-start !important;
    width:100% !important;
    padding-left:.15rem !important;
    padding-right:.15rem !important;
  }
}

/* Top 10: compact edit button and consistent poster shape */
.profile-top10-head { justify-content:flex-start !important; align-items:center !important; }
.profile-top10-head .profile-random-btn {
  margin-left:0 !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  padding:.35rem .6rem !important;
  border-radius:999px !important;
  font-size:.72rem !important;
  line-height:1 !important;
}
.profile-carousel-art,
.profile-carousel-art.sq { aspect-ratio:2/3 !important; }
.profile-carousel-art img { object-fit:cover !important; }
.profile-carousel-item { min-width:0 !important; }

/* Mobile touch reliability for episode / track controls */
.ep-clear-btn,
.ep-check,
.ep-season-cb-wrap,
.ep-check .ep-cb-dot,
.ep-season-cb-wrap .ep-cb-dot {
  pointer-events:auto !important;
  touch-action:manipulation !important;
  position:relative;
  z-index:5;
}
@media(max-width:700px){
  .ep-clear-btn { min-width:34px; min-height:34px; display:inline-flex; align-items:center; justify-content:center; }
  .ep-check, .ep-season-cb-wrap { min-width:34px; min-height:34px; }
  .ep-cb-dot { width:18px; height:18px; }
}


/* Mobile QOL: solid cards, tighter profile tools, carousel poster consistency */
:root { --mobile-card-bg-dark:#191a1d; --mobile-card-bg-light:#e0e2e7; }
[data-theme="dark"] { --card-solid:#191a1d; --card-solid-2:#202126; --surface-solid:#191a1d; }
[data-theme="light"] { --card-solid:#e0e2e7; --card-solid-2:#d6d9e0; --surface-solid:#e0e2e7; }
.card,
.media-card,
.profile-section,
.profile-item,
.profile-top10-strip,
.stat-card,
.stats-panel,
.stats-big-card,
.feed-card,
.social-panel,
.search-card,
.pf-card,
.pf-review-card,
.pf-review-card-media,
.suggested-card,
.compare-card,
.compare-row,
.timeline-month,
.month-card,
.match-card,
.liquid-card,
.review-framework-box,
.ep-season,
.media-panel,
.similar-card,
.result-card,
.search-result,
.rec-card,
.ph-card,
.modal-card {
  background: var(--card-solid) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.profile-item,
.feed-card,
.compare-row,
.suggested-card,
.pf-review-card-media,
.media-panel,
.similar-card,
.search-result,
.rec-card,
.ph-card {
  background: var(--card-solid-2) !important;
}
@media(max-width:760px){
  [data-theme="dark"] { --card-solid:#18191c; --card-solid-2:#1f2024; }
  [data-theme="light"] { --card-solid:#dde0e6; --card-solid-2:#d3d7df; }
  .card,.media-card,.profile-section,.profile-item,.profile-top10-strip,.stat-card,.stats-panel,.stats-big-card,.feed-card,.social-panel,.search-card,.pf-card,.pf-review-card,.pf-review-card-media,.suggested-card,.compare-card,.compare-row,.timeline-month,.month-card,.match-card,.liquid-card,.review-framework-box,.ep-season,.media-panel,.similar-card,.result-card,.search-result,.rec-card,.ph-card,.modal-card {
    box-shadow:none !important;
  }
}

/* Profile/user action buttons: one clean horizontal row without extra hero dead space */
body.profile-redesign .profile-hero,
body.profile-redesign.user-liquid .profile-hero.user-profile-hero-card,
.user-liquid.profile-redesign .profile-hero.user-profile-hero-card {
  padding-bottom:.75rem !important;
}
.profile-hero .profile-action-row,
body.profile-redesign .profile-action-row,
body.profile-redesign.user-liquid .profile-action-row,
.user-liquid.profile-redesign .profile-action-row {
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  gap:.48rem !important;
  max-width:min(100%, 560px) !important;
  justify-content:flex-start !important;
  margin:.45rem auto .05rem !important;
  padding:.12rem .18rem .18rem !important;
  scrollbar-width:none !important;
  -webkit-overflow-scrolling:touch !important;
}
.profile-action-row::-webkit-scrollbar{display:none;}
@media(min-width:780px){
  .profile-hero .profile-action-row,
  body.profile-redesign .profile-action-row,
  body.profile-redesign.user-liquid .profile-action-row,
  .user-liquid.profile-redesign .profile-action-row { justify-content:center !important; }
}
.profile-action-row .stats-icon-btn,
.profile-action-row .profile-tool-btn { flex:0 0 auto !important; }

/* Top 10 header/edit button alignment and consistent poster shapes, including albums */
.profile-top10-head{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:.55rem!important;margin-bottom:.6rem!important;}
.profile-top10-head .profile-random-btn{margin-left:0!important;width:auto!important;min-width:0!important;min-height:0!important;padding:.34rem .62rem!important;border-radius:999px!important;font-size:.72rem!important;line-height:1.05!important;}
.profile-carousel-art,
.profile-carousel-art.sq{width:112px!important;aspect-ratio:2/3!important;height:auto!important;border-radius:14px!important;}
.profile-carousel-art img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;}
@media(max-width:700px){
  .profile-carousel-art,.profile-carousel-art.sq{width:92px!important;aspect-ratio:2/3!important;}
  .profile-top10-head .profile-random-btn{font-size:.68rem!important;padding:.32rem .54rem!important;}
}

/* Social cleanup: no refresh control/recent review block */
.social-refresh,.review-feed-label,.review-feed-grid,#review-feed-section{display:none!important;}

/* Recs mobile: keep badge/status buttons on the right, inside the card */
@media(max-width:640px){
  .rec-card{padding:.85rem!important;border-radius:16px!important;overflow:hidden!important;}
  .rec-card-inner{display:grid!important;grid-template-columns:54px minmax(0,1fr)!important;gap:10px!important;align-items:start!important;}
  .rec-thumb,.rec-thumb-ph{width:54px!important;height:80px!important;border-radius:10px!important;}
  .rec-thumb-sq,.rec-thumb-ph.sq{width:54px!important;height:54px!important;border-radius:10px!important;}
  .rec-body{min-width:0!important;width:100%!important;padding-top:0!important;}
  .rec-top{display:grid!important;grid-template-columns:minmax(0,1fr) 72px!important;align-items:start!important;gap:8px!important;width:100%!important;}
  .rec-title-stack{min-width:0!important;}
  .rec-title-row{min-width:0!important;}
  .rec-title{font-size:.95rem!important;line-height:1.15!important;white-space:normal!important;overflow-wrap:anywhere!important;}
  .rec-actions{width:72px!important;max-width:72px!important;min-width:72px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:5px!important;margin:0!important;justify-self:end!important;}
  .rec-actions .badge{align-self:stretch!important;text-align:center!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
  .rec-actions .add-wrap-modern,.rec-actions .add-wrap{width:100%!important;max-width:100%!important;display:flex!important;flex-direction:column!important;gap:5px!important;}
  .rec-actions .add-btn{width:100%!important;max-width:100%!important;min-width:0!important;min-height:28px!important;padding:4px 5px!important;font-size:.58rem!important;line-height:1.05!important;white-space:normal!important;overflow:hidden!important;text-align:center!important;border-radius:8px!important;}
  .rec-actions .add-btn span:not(.add-btn-icon):not(.add-btn-x){white-space:normal!important;overflow:hidden!important;text-overflow:clip!important;display:block!important;line-height:1.05!important;}
}

/* Episode / track mobile tap targets */
.ep-clear-btn{cursor:pointer!important;}
.ep-check,.ep-season-cb-wrap{cursor:pointer!important;}
@media(max-width:700px){
  .ep-clear-btn{min-width:38px!important;min-height:38px!important;font-size:1.15rem!important;line-height:1!important;}
  .ep-check,.ep-season-cb-wrap{min-width:38px!important;min-height:38px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;}
  .ep-check .ep-cb-dot,.ep-season-cb-wrap .ep-cb-dot{width:20px!important;height:20px!important;}
}

/* Mobile follow-up polish: solid cards, centered action carousel, episodes, stats hero, calendar */
:root{
  --solid-card-bg: #1e1e21;
  --solid-card-bg-2: #242428;
}
[data-theme="light"]{
  --solid-card-bg: #ece9df;
  --solid-card-bg-2: #e4e0d5;
}
.card,
.profile-hero,
.profile-top10-strip,
.profile-section-card,
.profile-stat-tile,
.profile-item,
.profile-carousel-art,
.stats-big-card,
.stats-panel,
.pf-section,
.pf-review-card,
.pf-compare-card,
.search-result,
.rec-card,
.match-rec-card,
.feed-card,
.social-panel,
.suggested-card,
.media-panel,
.media-hero-full,
.ep-season,
.ep-row,
.modal-card {
  background: var(--solid-card-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.profile-item,
.search-result,
.rec-card,
.match-rec-card,
.feed-card,
.suggested-card,
.ep-row,
.mini-media-row {
  background: var(--solid-card-bg-2) !important;
}

/* Keep profile/user action buttons on one centered mobile rail. */
@media (max-width: 760px) {
  body.profile-redesign .profile-action-row,
  .user-liquid.profile-redesign .profile-action-row,
  .profile-action-row {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: .46rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0 max(0.85rem, calc((100vw - 354px) / 2)) .15rem !important;
    margin-top: .72rem !important;
    margin-bottom: .12rem !important;
    scroll-snap-type: x proximity;
  }
  body.profile-redesign .profile-action-row::-webkit-scrollbar,
  .user-liquid.profile-redesign .profile-action-row::-webkit-scrollbar,
  .profile-action-row::-webkit-scrollbar { display:none; }
  body.profile-redesign .profile-action-row .stats-link-btn,
  .user-liquid.profile-redesign .profile-action-row .stats-link-btn,
  .profile-action-row .stats-link-btn {
    flex: 0 0 37px !important;
    scroll-snap-align: center;
  }
  body.profile-redesign .profile-hero,
  .user-liquid.profile-redesign .profile-hero {
    padding-bottom: .78rem !important;
  }
}

/* Top 10 media art: force albums into the same poster footprint as film/TV. */
.profile-carousel-art,
.profile-carousel-art.sq,
body.profile-redesign .profile-carousel-art,
body.profile-redesign.user-liquid .profile-carousel-art {
  aspect-ratio: 2 / 3 !important;
  height: auto !important;
  display: block !important;
  overflow: hidden !important;
}
.profile-carousel-art img,
body.profile-redesign .profile-carousel-art img,
body.profile-redesign.user-liquid .profile-carousel-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Episode / track panels: prevent right-side spill and improve mobile hit layout. */
.ep-panel-wrap, .ep-season, .ep-season-body, .ep-list { min-width:0 !important; max-width:100% !important; overflow-x:hidden !important; }
.ep-row { min-width:0 !important; max-width:100% !important; }
.ep-info { min-width:0 !important; overflow:hidden !important; }
.ep-rating-wrap { min-width:0 !important; max-width:48% !important; justify-content:flex-end !important; }
.ep-star-picker { min-width:0 !important; flex-wrap:nowrap !important; }
.ep-clear-btn { min-width:28px !important; min-height:28px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; touch-action:manipulation !important; }
.ep-check, .ep-season-cb-wrap { min-width:30px !important; min-height:30px !important; touch-action:manipulation !important; }
@media (max-width: 560px) {
  .ep-season-toggle {
    display:grid !important;
    grid-template-columns: 30px minmax(0,1fr) auto !important;
    gap: 6px !important;
    align-items:center !important;
    padding: .68rem .62rem !important;
  }
  .ep-season-name {
    position: static !important;
    left: auto !important;
    transform: none !important;
    justify-self: start !important;
    text-align: left !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: auto !important;
    font-size: .82rem !important;
  }
  .ep-season-right { justify-self:end !important; gap:4px !important; max-width: 44vw !important; overflow:hidden !important; }
  .ep-season-stats { gap:4px !important; overflow:hidden !important; justify-content:flex-end !important; }
  .ep-stat { font-size:.62rem !important; white-space:nowrap !important; }
  .ep-row {
    display:grid !important;
    grid-template-columns: auto minmax(0,1fr) auto !important;
    align-items:center !important;
    gap: 5px !important;
    padding: .52rem .55rem !important;
  }
  .ep-row .ep-check + .ep-info + .ep-rating-wrap { max-width: 132px !important; }
  .ep-info { gap:4px !important; }
  .ep-num { width:auto !important; min-width:24px !important; font-size:.68rem !important; }
  .ep-name { font-size:.75rem !important; max-width:100% !important; }
  .ep-runtime { display:none !important; }
  .ep-rating-wrap { gap:3px !important; max-width: 142px !important; }
  .ep-star-picker .star-wrap { font-size:.72rem !important; padding: 3px 1px !important; }
  .ep-clear-btn { padding:0 !important; font-size:1rem !important; }
  #track-panel .ep-row { grid-template-columns: minmax(0,1fr) auto !important; }
  #track-panel .ep-rating-wrap { max-width:145px !important; }
}

/* Liquid page hero: reduce top dead space and smooth the glow so it does not cut off. */
.liquid-page .page-wrap { padding-top: 1rem !important; }
.liquid-page .stats-page-hero,
.liquid-page .pf-hero,
.liquid-page .recs-header,
.liquid-page .social-hero {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
  margin-top: 0 !important;
}
.liquid-page .stats-page-hero::before,
.liquid-page .pf-hero::before,
.liquid-page .recs-header::before,
.liquid-page .social-hero::before {
  content:"";
  position:absolute;
  inset:-54px -80px -34px;
  z-index:-1;
  pointer-events:none;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%);
  filter: blur(20px);
  opacity:.72;
}
.liquid-page .stats-page-hero,
.liquid-page .pf-hero {
  background: none !important;
  padding-top: .65rem !important;
  padding-bottom: .9rem !important;
}
@media(max-width:760px){
  .liquid-page .page-wrap { padding-top: calc(.55rem + env(safe-area-inset-top)) !important; }
  .liquid-page .stats-page-hero::before,
  .liquid-page .pf-hero::before { inset:-36px -38px -24px; filter:blur(18px); }
}


/* Recs patch: action button alignment and favorite button base color */
.profile-action-row {
  justify-content:center !important;
  align-items:center !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.stats-link-btn.stats-icon-btn.favorite-tool-btn:not(.active),
.favorite-tool-btn:not(.active) {
  background:rgba(255,255,255,.055) !important;
  border-color:color-mix(in srgb,var(--accent) 36%,var(--border)) !important;
  color:#f87171 !important;
}
body.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn:not(.active),
body.profile-redesign.user-liquid .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn:not(.active) {
  background:rgba(255,255,255,.055) !important;
}
@media (min-width: 761px) {
  body.profile-redesign .profile-action-row,
  body.profile-redesign.user-liquid .profile-action-row,
  .profile-action-row {
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    overflow:visible !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}
@media (max-width: 760px) {
  body.profile-redesign:not(.user-liquid) .profile-action-row {
    justify-content:center !important;
    padding-left:max(.85rem, calc((100vw - 354px) / 2)) !important;
    padding-right:max(.85rem, calc((100vw - 354px) / 2)) !important;
  }
  body.profile-redesign.user-liquid .profile-action-row,
  .user-liquid.profile-redesign .profile-action-row {
    justify-content:flex-start !important;
    padding-left:.85rem !important;
    padding-right:.85rem !important;
    scroll-padding-left:.85rem !important;
  }
}

/* Final fix: favorite action button chrome must match the other profile/user action buttons. */
.profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn,
body.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn,
body.profile-redesign.user-liquid .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn,
.user-liquid.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn {
  background: rgba(255,255,255,.055) !important;
  border-color: color-mix(in srgb,var(--accent) 36%,var(--border)) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.16) !important;
  color: #f87171 !important;
}
.profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn:hover,
.profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn.active,
body.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn:hover,
body.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn.active,
body.profile-redesign.user-liquid .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn:hover,
body.profile-redesign.user-liquid .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn.active,
.user-liquid.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn:hover,
.user-liquid.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn.active {
  background: rgba(255,255,255,.12) !important;
  border-color: color-mix(in srgb,var(--accent) 36%,var(--border)) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.16) !important;
  color: #f87171 !important;
  transform: translateY(-2px) scale(1.02) !important;
}
[data-theme="light"] .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn,
[data-theme="light"] body.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn,
[data-theme="light"] body.profile-redesign.user-liquid .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn,
[data-theme="light"] .user-liquid.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn {
  background: rgba(255,255,255,.62) !important;
}
[data-theme="light"] .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn:hover,
[data-theme="light"] .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn.active,
[data-theme="light"] body.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn:hover,
[data-theme="light"] body.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn.active,
[data-theme="light"] body.profile-redesign.user-liquid .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn:hover,
[data-theme="light"] body.profile-redesign.user-liquid .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn.active,
[data-theme="light"] .user-liquid.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn:hover,
[data-theme="light"] .user-liquid.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.favorite-tool-btn.active {
  background: rgba(255,255,255,.92) !important;
}


/* Final fix: search/list action toggles use the same active gray as favorite. */
.profile-action-row .stats-link-btn.stats-icon-btn.search-tool-btn.active,
.profile-action-row .stats-link-btn.stats-icon-btn.list-tool-btn.active,
body.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.search-tool-btn.active,
body.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.list-tool-btn.active,
body.profile-redesign.user-liquid .profile-action-row .stats-link-btn.stats-icon-btn.search-tool-btn.active,
body.profile-redesign.user-liquid .profile-action-row .stats-link-btn.stats-icon-btn.list-tool-btn.active,
.user-liquid.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.search-tool-btn.active,
.user-liquid.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.list-tool-btn.active {
  background: rgba(255,255,255,.12) !important;
  border-color: color-mix(in srgb,var(--accent) 36%,var(--border)) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.16) !important;
  transform: translateY(-2px) scale(1.02) !important;
}
[data-theme="light"] .profile-action-row .stats-link-btn.stats-icon-btn.search-tool-btn.active,
[data-theme="light"] .profile-action-row .stats-link-btn.stats-icon-btn.list-tool-btn.active,
[data-theme="light"] body.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.search-tool-btn.active,
[data-theme="light"] body.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.list-tool-btn.active,
[data-theme="light"] body.profile-redesign.user-liquid .profile-action-row .stats-link-btn.stats-icon-btn.search-tool-btn.active,
[data-theme="light"] body.profile-redesign.user-liquid .profile-action-row .stats-link-btn.stats-icon-btn.list-tool-btn.active,
[data-theme="light"] .user-liquid.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.search-tool-btn.active,
[data-theme="light"] .user-liquid.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.list-tool-btn.active {
  background: rgba(255,255,255,.92) !important;
}

/* Film + TV mode: hide music from primary app surfaces */
body.profile-redesign:not(.user-liquid) .profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
body.profile-redesign:not(.user-liquid) .profile-3col{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
@media(max-width:700px){.match-column-grid,body.profile-redesign:not(.user-liquid) .profile-stats,body.profile-redesign:not(.user-liquid) .profile-3col{grid-template-columns:1fr!important;}}


/* Final profile/user simplification: action row uses only neutral icon-button chrome. */
.profile-action-row .stats-link-btn.stats-icon-btn,
body.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn,
body.profile-redesign.user-liquid .profile-action-row .stats-link-btn.stats-icon-btn,
.user-liquid.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn {
  background: rgba(255,255,255,.055) !important;
  border: 1px solid color-mix(in srgb,var(--accent) 36%,var(--border)) !important;
  color: var(--text) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.16) !important;
}
.profile-action-row .stats-link-btn.stats-icon-btn:hover,
.profile-action-row .stats-link-btn.stats-icon-btn.active,
body.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn:hover,
body.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.active,
body.profile-redesign.user-liquid .profile-action-row .stats-link-btn.stats-icon-btn:hover,
body.profile-redesign.user-liquid .profile-action-row .stats-link-btn.stats-icon-btn.active,
.user-liquid.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn:hover,
.user-liquid.profile-redesign .profile-action-row .stats-link-btn.stats-icon-btn.active {
  background: rgba(255,255,255,.12) !important;
  border-color: color-mix(in srgb,var(--accent) 36%,var(--border)) !important;
  color: var(--text) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.16) !important;
  transform: translateY(-2px) scale(1.02) !important;
}
.profile-action-row .favorite-tool-btn,
.profile-action-row .favorite-tool-btn:not(.active),
.profile-action-row .favorite-tool-btn:hover,
.profile-action-row .favorite-tool-btn.active,
body.profile-redesign .profile-action-row .favorite-tool-btn,
body.profile-redesign .profile-action-row .favorite-tool-btn:not(.active),
body.profile-redesign .profile-action-row .favorite-tool-btn:hover,
body.profile-redesign .profile-action-row .favorite-tool-btn.active,
body.profile-redesign.user-liquid .profile-action-row .favorite-tool-btn,
body.profile-redesign.user-liquid .profile-action-row .favorite-tool-btn:not(.active),
body.profile-redesign.user-liquid .profile-action-row .favorite-tool-btn:hover,
body.profile-redesign.user-liquid .profile-action-row .favorite-tool-btn.active,
.user-liquid.profile-redesign .profile-action-row .favorite-tool-btn,
.user-liquid.profile-redesign .profile-action-row .favorite-tool-btn:not(.active),
.user-liquid.profile-redesign .profile-action-row .favorite-tool-btn:hover,
.user-liquid.profile-redesign .profile-action-row .favorite-tool-btn.active {
  background: rgba(255,255,255,.055) !important;
  border-color: color-mix(in srgb,var(--accent) 36%,var(--border)) !important;
  color: var(--text) !important;
}
.profile-action-row .favorite-tool-btn:hover,
.profile-action-row .favorite-tool-btn.active,
body.profile-redesign .profile-action-row .favorite-tool-btn:hover,
body.profile-redesign .profile-action-row .favorite-tool-btn.active,
body.profile-redesign.user-liquid .profile-action-row .favorite-tool-btn:hover,
body.profile-redesign.user-liquid .profile-action-row .favorite-tool-btn.active,
.user-liquid.profile-redesign .profile-action-row .favorite-tool-btn:hover,
.user-liquid.profile-redesign .profile-action-row .favorite-tool-btn.active {
  background: rgba(255,255,255,.12) !important;
}
@media(max-width:760px){
  body.profile-redesign:not(.user-liquid) .profile-action-row,
  body.profile-redesign.user-liquid .profile-action-row,
  .user-liquid.profile-redesign .profile-action-row,
  .profile-action-row {
    justify-content:center !important;
    overflow:visible !important;
    flex-wrap:wrap !important;
    padding-left:.5rem !important;
    padding-right:.5rem !important;
  }
}


/* Mobile stability: lock top nav and safe-area fill so Safari/PWA bounce does not pull chrome away */
@media(max-width:600px){
  html, body { min-height:100%; overscroll-behavior-y:none; }
  body { padding-top:0; padding-bottom:env(safe-area-inset-bottom); }
  nav {
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:1000 !important;
    padding-top:calc(0.45rem + env(safe-area-inset-top)) !important;
    min-height:calc(58px + env(safe-area-inset-top)) !important;
    height:calc(58px + env(safe-area-inset-top)) !important;
    transform:translateZ(0);
  }
  .page-wrap {
    padding-top:calc(74px + env(safe-area-inset-top)) !important;
    padding-bottom:calc(5.4rem + env(safe-area-inset-bottom)) !important;
  }
  body::after {
    content:"";
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:env(safe-area-inset-bottom);
    min-height:0;
    background:var(--bg);
    pointer-events:none;
    z-index:999;
  }
}

/* Final mobile fixed-nav spacing: fixed nav must not cover page headers/heroes. */
@media(max-width:760px){
  nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1200 !important;
    transform: translateZ(0) !important;
  }
  .page-wrap,
  .liquid-page .page-wrap,
  .liquid-page.page-wrap,
  body.profile-redesign .page-wrap,
  body.profile-redesign.user-liquid .page-wrap,
  .user-liquid.profile-redesign .page-wrap,
  .search-liquid .page-wrap,
  .recs-liquid .page-wrap,
  .social-liquid .page-wrap,
  .match-liquid .page-wrap {
    padding-top: calc(94px + env(safe-area-inset-top)) !important;
  }
  .liquid-page .page-heading,
  .liquid-page .recs-pulse,
  .liquid-page .social-hero,
  .liquid-page .recs-header,
  body.profile-redesign .profile-hero,
  body.profile-redesign.user-liquid .profile-hero.user-profile-hero-card,
  .user-liquid.profile-redesign .profile-hero.user-profile-hero-card {
    margin-top: 0 !important;
  }
}

@media(max-width:430px){
  .page-wrap,
  .liquid-page .page-wrap,
  .liquid-page.page-wrap,
  body.profile-redesign .page-wrap,
  body.profile-redesign.user-liquid .page-wrap,
  .user-liquid.profile-redesign .page-wrap,
  .search-liquid .page-wrap,
  .recs-liquid .page-wrap,
  .social-liquid .page-wrap,
  .match-liquid .page-wrap {
    padding-top: calc(88px + env(safe-area-inset-top)) !important;
  }
}


/* ─── PERFORMANCE PASS ──────────────────────────────────────────────────────
   Keep the Liquid Glass look, but stop Safari/mobile from repainting giant
   blur/shadow layers during scroll, selection, and quick UI updates. */
:root {
  --shadow: 0 12px 34px rgba(0,0,0,.18);
  --shadow-soft: 0 8px 22px rgba(0,0,0,.12);
}

/* Large blurred orbs are expensive because they sit under almost every page. */
.orb {
  filter: blur(42px) !important;
  opacity: .42 !important;
  will-change: auto !important;
  transform: translateZ(0);
}

/* Blur only the small chrome that benefits from it. Large cards use paint-only glass. */
.home-panel,
.liquid-card,
.profile-section,
.profile-hero,
.user-profile-hero-card,
.pf-section,
.pf-hero,
.rec-card,
.match-rec-card,
.social-card,
.activity-card,
.search-result,
.profile-item,
.stat-card,
.home-section,
.home-card,
.home-pick-card,
.home-score-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Reduce expensive giant shadows on repeated cards without flattening the theme. */
.profile-section,
.profile-hero,
.user-profile-hero-card,
.pf-section,
.pf-hero,
.rec-card,
.match-rec-card,
.social-card,
.activity-card,
.search-result,
.profile-item,
.home-panel,
.home-section,
.home-card,
.home-pick-card,
.home-score-card {
  box-shadow: 0 10px 28px rgba(0,0,0,.14) !important;
}

/* Let the browser skip off-screen dashboard/profile/social sections. */
.profile-section,
.pf-section,
.social-card,
.activity-card,
.home-panel,
.home-section,
.results > *,
.profile-grid > *,
.media-grid > *,
.search-results > *,
.profile-list > *,
.friend-activity-list > *,
.recs-list > * {
  content-visibility: auto;
  contain-intrinsic-size: 1px 420px;
}

/* Contain repaint work inside cards instead of invalidating the whole page. */
.profile-item,
.rec-card,
.match-rec-card,
.search-result,
.activity-card,
.home-list-item,
.home-pick-card,
.friend-card,
.stat-card {
  contain: layout paint style;
}

/* Heavy hover animations feel nice on desktop, but they can make Safari repaint text. */
@media (hover:hover) and (pointer:fine) {
  .profile-item:hover,
  .rec-card:hover,
  .match-rec-card:hover,
  .search-result:hover,
  .home-list-item:hover,
  .home-pick-card:hover {
    transform: none !important;
  }
}

/* Mobile/PWA: prioritize smooth scroll over decorative effects. */
@media (max-width: 760px) {
  nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.055), 0 8px 22px rgba(0,0,0,.22) !important;
  }
  .orb { filter: blur(24px) !important; opacity: .28 !important; }
  .profile-section,
  .profile-hero,
  .user-profile-hero-card,
  .rec-card,
  .match-rec-card,
  .search-result,
  .home-panel,
  .home-section {
    box-shadow: 0 8px 20px rgba(0,0,0,.12) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}


/* UX PASS: skeleton loading + polished empty states */
@keyframes recsShimmer {
  0% { background-position: 140% 0; }
  100% { background-position: -140% 0; }
}
.skeleton-surface,
.skeleton-line,
.skeleton-thumb,
.skeleton-pill,
.home-skeleton,
.social-page-loading {
  background: linear-gradient(90deg, var(--input-bg) 0%, var(--surface2) 42%, var(--input-bg) 82%);
  background-size: 220% 100%;
  animation: recsShimmer 1.25s ease-in-out infinite;
}
.skeleton-page { display:grid; gap:1rem; width:100%; }
.skeleton-hero { min-height:315px; border:1px solid var(--border); border-radius:28px; padding:2rem; display:flex; align-items:flex-end; gap:1.2rem; background:var(--surface); overflow:hidden; }
.skeleton-thumb { width:150px; height:220px; border-radius:18px; flex-shrink:0; }
.skeleton-copy { flex:1; display:grid; gap:12px; min-width:0; }
.skeleton-line { height:16px; border-radius:999px; }
.skeleton-line.title { height:46px; width:min(480px,86%); }
.skeleton-line.short { width:35%; }
.skeleton-line.mid { width:62%; }
.skeleton-line.long { width:86%; }
.skeleton-pill-row { display:flex; flex-wrap:wrap; gap:8px; }
.skeleton-pill { width:94px; height:28px; border-radius:999px; }
.skeleton-card-list { display:grid; gap:12px; }
.skeleton-card { min-height:88px; border:1px solid var(--border); border-radius:18px; padding:1rem; display:flex; gap:12px; align-items:center; background:var(--surface); }
.skeleton-card .skeleton-thumb { width:56px; height:74px; border-radius:10px; }
.skeleton-grid-two { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(270px,.8fr); gap:1rem; }
.skeleton-panel { border:1px solid var(--border); border-radius:22px; padding:1.2rem; background:var(--surface); display:grid; gap:12px; }
.loading-centered, .social-page-loading { color:transparent !important; min-height:1.15rem; border-radius:999px; }
.empty-state, .pf-empty, .empty-feed, .inbox-empty, .home-empty, .no-other-matches {
  text-align:center;
  border:1px dashed var(--border2) !important;
  background:linear-gradient(180deg,var(--surface),rgba(255,255,255,.025)) !important;
  border-radius:18px !important;
  color:var(--muted) !important;
  padding:1.25rem !important;
}
.empty-state-polished { padding:1.6rem 1rem !important; }
.empty-state-polished::before,
.empty-state.empty-search::before,
.pf-empty::before,
.home-empty:not(.home-skeleton)::before {
  content:'⚡';
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin:0 auto .75rem;
  border-radius:50%;
  background:var(--input-bg);
  border:1px solid var(--border);
  color:var(--text2);
  font-size:1.25rem;
}
.empty-state strong, .pf-empty strong, .home-empty strong { color:var(--text); display:block; margin-bottom:.35rem; font-size:.98rem; }
.empty-state span, .pf-empty span, .home-empty span { color:var(--text2); line-height:1.5; }
.empty-actions { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:1rem; }
.empty-action-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:.55rem .85rem; border-radius:999px; border:1px solid var(--border2); background:var(--input-bg); color:var(--text2); text-decoration:none; font-size:.82rem; font-weight:800; }
.empty-action-btn:hover { color:var(--text); border-color:var(--accent); }

/* UX PASS: improved media page */
.media-hero-full { box-shadow:0 18px 55px rgba(0,0,0,.18); }
.media-hero-content { align-items:center; }
.media-title-full { text-wrap:balance; }
.media-poster-full, .media-poster-ph-full { transform:translateZ(0); }
.media-summary-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:1rem 0 0; }
.media-summary-card { border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.045); padding:.75rem .85rem; min-width:0; }
.media-summary-card strong { display:block; font-size:1.1rem; color:var(--text); letter-spacing:-.02em; line-height:1; }
.media-summary-card span { display:block; margin-top:.35rem; color:var(--muted); font-size:.64rem; font-weight:900; text-transform:uppercase; letter-spacing:.09em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.media-panel.premium { background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025)); }
.media-overview-full.lead { font-size:1.03rem; color:var(--text2); }
.media-chip-row { display:flex; flex-wrap:wrap; gap:7px; }
.media-chip { display:inline-flex; align-items:center; max-width:100%; border:1px solid var(--border); background:var(--input-bg); color:var(--text2); border-radius:999px; padding:.38rem .62rem; font-size:.75rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.media-insight-list { display:grid; gap:.62rem; }
.media-insight-item { display:grid; grid-template-columns:22px minmax(0,1fr); gap:.55rem; align-items:start; color:var(--text2); line-height:1.5; font-size:.9rem; }
.media-insight-item i { display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--accent-dim); color:var(--accent); font-style:normal; font-size:.72rem; font-weight:900; margin-top:.1rem; }
.media-list-row.empty-detail { color:var(--muted); justify-content:center; text-align:center; }
@media(max-width:760px){
  .skeleton-hero { min-height:420px; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:1.25rem; }
  .skeleton-thumb { width:122px; height:183px; }
  .skeleton-grid-two { grid-template-columns:1fr; }
  .media-summary-row { grid-template-columns:1fr; }
  .media-hero-content { align-items:flex-start; }
  .media-summary-card { padding:.7rem .8rem; }
}

/* Current polish: faster library actions, watching alignment, larger rating controls */
.search-result .add-wrap-modern,
.search-result .add-wrap {
  margin-left:auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  align-self:center !important;
  min-width:118px;
}
.search-result .add-wrap-modern .add-btn,
.search-result .add-wrap .add-btn {
  width:100% !important;
  justify-content:center !important;
  text-align:center !important;
}
.search-result .add-btn-watching,
.search-result .in-lib-watching,
.add-btn-watching,
.in-lib-watching {
  border-color:rgba(134,239,172,.72) !important;
  color:#bbf7d0 !important;
  background:rgba(34,197,94,.12) !important;
}
.search-result .in-lib-watching .add-btn-icon,
.add-btn-watching .add-btn-icon { color:#86efac !important; }
.rating-sheet-stars .star-wrap,
#rs-stars .star-wrap {
  font-size:2.05rem !important;
  min-width:40px !important;
  min-height:40px !important;
  padding:5px 4px !important;
  touch-action:manipulation !important;
}
.rating-sheet-stars { justify-content:center !important; gap:.2rem !important; }
@media(max-width:700px){
  .search-result .add-wrap-modern,
  .search-result .add-wrap { min-width:92px !important; width:92px !important; }
  .search-result .add-btn { min-height:32px !important; font-size:.66rem !important; }
  .rating-sheet-stars .star-wrap,
  #rs-stars .star-wrap { font-size:2.3rem !important; min-width:44px !important; min-height:44px !important; }
}

/* Episode detail links inside TV season lists */
.ep-info[role="button"] { cursor:pointer; border-radius:10px; padding:2px 6px; margin:-2px -6px; transition:background .12s ease, color .12s ease; }
.ep-info[role="button"]:hover { background:rgba(255,255,255,.055); }
.ep-open-hint { display:inline-flex; margin-left:.45rem; color:var(--muted); font-size:.68rem; font-weight:800; opacity:.75; }
.ep-info[role="button"]:hover .ep-open-hint { color:var(--accent); opacity:1; }
@media(max-width:560px){ .ep-open-hint { display:none; } }


/* Status/action polish */
.add-wrap-current-watched { display:grid !important; grid-template-columns:1fr !important; width:100%; }
.add-wrap-current-watched .add-btn-saved.in-lib-watched,
.media-actions-full .add-wrap-current-watched .add-btn-saved.in-lib-watched {
  width:100%; justify-content:center; border-color:rgba(134,239,172,.72) !important;
  background:rgba(34,197,94,.18) !important; color:#bbf7d0 !important;
}
.add-btn-watching, .in-lib-watching, .status-badge.in-lib-watching {
  border-color:rgba(134,239,172,.62) !important;
  color:#bbf7d0 !important;
  background:rgba(34,197,94,.12) !important;
}
.search-result-card .add-wrap, .result-card .add-wrap { align-items:center; }
.search-result-card .add-btn-watching, .result-card .add-btn-watching { align-self:center; }

/* Smaller, clearer episode open button */
.ep-info { align-items:center; }
.ep-open-hint {
  display:inline-flex; align-items:center; justify-content:center; margin-left:.45rem;
  width:24px; height:24px; border-radius:999px; border:1px solid var(--border2);
  color:var(--text2); background:rgba(255,255,255,.045); font-size:1rem; font-weight:1000;
  line-height:1; padding:0; flex:0 0 auto; cursor:pointer;
}
.ep-open-hint:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
@media(max-width:560px){ .ep-open-hint { display:inline-flex !important; width:22px; height:22px; font-size:.95rem; margin-left:.28rem; } }

/* Smart back buttons */
.smart-back-row { display:flex; justify-content:flex-start; margin:.25rem 0 1rem; }
.smart-back-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border:1px solid var(--border);
  background:rgba(255,255,255,.05); color:var(--text2); border-radius:999px; padding:.58rem .86rem;
  font:inherit; font-size:.82rem; font-weight:900; cursor:pointer;
}
.smart-back-btn:hover { color:var(--text); border-color:var(--border2); background:rgba(255,255,255,.08); }
@media(max-width:700px){ .smart-back-row { margin:.15rem 0 .75rem; } .smart-back-btn { width:auto; min-height:38px; } }

/* Public review/comment cards */
.media-public-review-panel .media-panel-label-row, .episode-comment-toolbar { display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:.75rem; }
.media-review-sort, .episode-comment-sort { border:1px solid var(--border); background:var(--input-bg); color:var(--text2); border-radius:999px; padding:.42rem .7rem; font:inherit; font-size:.76rem; font-weight:850; }
.public-review-list { display:grid; gap:.7rem; }
.public-review-card { border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.04); padding:.8rem .9rem; }
.public-review-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.35rem; }
.public-review-user { color:var(--text); font-weight:950; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.public-review-meta { color:var(--muted); font-size:.74rem; font-weight:800; white-space:nowrap; }
.public-review-stars { margin:.25rem 0 .38rem; }
.public-review-text { color:var(--text2); line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.public-review-actions, .episode-comment-actions-row { display:flex; align-items:center; gap:.5rem; margin-top:.6rem; }
.public-review-like-btn, .episode-comment-like-btn { border:1px solid rgba(248,113,113,.45); color:#ff7b7b; background:rgba(248,113,113,.08); border-radius:999px; padding:.38rem .58rem; font:inherit; font-size:.76rem; font-weight:900; cursor:pointer; }
.public-review-like-btn.liked, .episode-comment-like-btn.liked { background:rgba(248,113,113,.18); border-color:#ff7b7b; }
.public-review-like-btn:disabled, .episode-comment-like-btn:disabled { opacity:.72; cursor:default; }
@media(max-width:700px){ .media-public-review-panel .media-panel-label-row, .episode-comment-toolbar { align-items:flex-start; flex-direction:column; gap:.45rem; } .media-review-sort, .episode-comment-sort { width:100%; } }

/* Readability + media/episode interaction patch */
[data-theme="dark"] .field-label,
[data-theme="dark"] .media-panel-label,
[data-theme="dark"] .episode-panel-label,
[data-theme="dark"] .prof-section-count,
[data-theme="dark"] .profile-item-sub,
[data-theme="dark"] .friend-sub,
[data-theme="dark"] .feed-label,
[data-theme="dark"] .side-label,
[data-theme="dark"] .social-section-label,
[data-theme="dark"] .user-stat-label,
[data-theme="dark"] .review-feed-meta,
[data-theme="dark"] .feed-meta,
[data-theme="dark"] .home-taste-label,
[data-theme="dark"] .pf-muted,
[data-theme="dark"] .pf-card-sub,
[data-theme="dark"] .pf-section-head p,
[data-theme="dark"] .pf-stat span,
[data-theme="dark"] .media-list-label,
[data-theme="dark"] .episode-detail-key {
  color: var(--text) !important;
  opacity: .9;
}
[data-theme="light"] .field-label,
[data-theme="light"] .media-panel-label,
[data-theme="light"] .episode-panel-label,
[data-theme="light"] .prof-section-count,
[data-theme="light"] .profile-item-sub,
[data-theme="light"] .friend-sub,
[data-theme="light"] .feed-label,
[data-theme="light"] .side-label,
[data-theme="light"] .social-section-label,
[data-theme="light"] .user-stat-label,
[data-theme="light"] .review-feed-meta,
[data-theme="light"] .feed-meta,
[data-theme="light"] .home-taste-label,
[data-theme="light"] .pf-muted,
[data-theme="light"] .pf-card-sub,
[data-theme="light"] .pf-section-head p,
[data-theme="light"] .pf-stat span,
[data-theme="light"] .media-list-label,
[data-theme="light"] .episode-detail-key {
  color: var(--text) !important;
  opacity: .76;
}
.media-actions-full {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: stretch;
  gap: 8px;
}
.media-actions-full .add-wrap-modern { width: 100%; min-width: 0; }
.media-actions-full .add-wrap-current-watched,
.media-actions-full .add-wrap-current-watching { display: grid !important; grid-template-columns: 1fr !important; }
.media-actions-full .add-btn { min-height: 40px; }
.media-recommend-compact { min-height: 40px; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; padding-inline:.85rem; }
.media-recommend-compact .rec-emoji { display:none; }
@media(max-width:560px){
  .media-actions-full { grid-template-columns: minmax(0,1fr) 44px !important; }
  .media-recommend-compact { width:44px; padding:0; border-radius:14px; }
  .media-recommend-compact .rec-word { display:none; }
  .media-recommend-compact .rec-emoji { display:inline; }
}
.episode-grid { align-items:start; }
.episode-panel { align-self:start; }
.episode-rating-panel { margin-bottom:1rem; }
.episode-page-rating-stars { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.episode-page-rating-stars .star-wrap { font-size:2.15rem; min-width:40px; min-height:40px; padding:3px; display:inline-grid; }
.episode-page-rating-stars .star-bg { grid-area:1/1; color:var(--muted); }
.episode-page-rating-stars .star-fg { grid-area:1/1; overflow:hidden; width:0; color:#facc15; pointer-events:none; white-space:nowrap; }
.episode-page-rating-stars .star-wrap.full .star-bg { color:#facc15; }
.episode-page-rating-stars .star-wrap.half .star-fg { width:50%; }
@media(max-width:560px){
  .episode-page-rating-stars { justify-content:center; gap:8px; }
  .episode-page-rating-stars .star-wrap { font-size:2.45rem; min-width:46px; min-height:46px; }
  .ep-open-hint { width:22px !important; height:22px !important; margin-left:.28rem !important; font-size:.92rem !important; }
}
.public-review-like-btn,
.episode-comment-like-btn,
.review-like-static { min-height:30px; display:inline-flex; align-items:center; gap:5px; }
.pf-episode-comment-card .pf-review-poster-ph { font-size:1.35rem; }

/* Final polish: search status alignment, compact review footer, mobile episode ratings */
.search-result > .add-wrap-modern,
.search-result > .add-wrap {
  margin-left:auto !important;
  flex:0 0 116px !important;
  width:116px !important;
  min-width:116px !important;
  max-width:116px !important;
  align-self:center !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:center !important;
  gap:6px !important;
}
.search-result > .add-wrap-modern .add-btn,
.search-result > .add-wrap .add-btn {
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  min-height:36px !important;
  justify-content:center !important;
  text-align:center !important;
  align-self:center !important;
  border-radius:999px !important;
}
.search-result > .add-wrap-modern .add-btn-saved.in-lib-watched,
.search-result > .add-wrap .add-btn-saved.in-lib-watched {
  border-color:rgba(134,239,172,.72) !important;
  background:rgba(34,197,94,.16) !important;
  color:#bbf7d0 !important;
}
@media(max-width:620px){
  .search-result > .add-wrap-modern,
  .search-result > .add-wrap { flex-basis:86px !important; width:86px !important; min-width:86px !important; max-width:86px !important; }
  .search-result > .add-wrap-modern .add-btn,
  .search-result > .add-wrap .add-btn { min-height:32px !important; font-size:.65rem !important; padding:4px 6px !important; }
}

.review-framework-box { padding:.9rem 1rem .75rem !important; }
.review-framework-text { min-height:84px !important; margin-bottom:.55rem !important; }
.review-framework-control-row {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-top:0 !important;
}
.review-framework-control-row .own-review-likes { flex:1 1 auto; min-width:0; margin:0 !important; }
.review-framework-right-tools { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex:0 0 auto; }
.review-framework-right-tools .review-framework-count { margin:0 !important; white-space:nowrap; color:var(--text2) !important; font-size:.74rem !important; }
.review-save-btn { min-height:36px; padding:.48rem .85rem !important; border-radius:999px !important; white-space:nowrap; }
.review-framework-meta,
.review-framework-row { display:none !important; }
.review-comment-form { display:none !important; }
@media(max-width:560px){
  .review-framework-control-row { align-items:center !important; gap:8px !important; }
  .review-framework-right-tools { gap:8px; }
  .review-framework-right-tools .review-framework-count { font-size:.68rem !important; }
  .review-save-btn { padding:.42rem .7rem !important; font-size:.74rem !important; }
}

.media-actions-full {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:stretch !important;
  gap:8px !important;
}
.media-actions-full .add-wrap-modern,
.media-actions-full .add-wrap { width:100% !important; min-width:0 !important; max-width:none !important; display:flex !important; align-items:stretch !important; }
.media-actions-full .add-btn { width:100% !important; justify-content:center !important; }
.media-recommend-compact { min-width:126px; align-self:stretch !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
@media(max-width:520px){
  .media-actions-full { grid-template-columns:minmax(0,1fr) 44px !important; }
  .media-recommend-compact { min-width:0 !important; width:44px !important; padding:0 !important; }
  .media-recommend-compact .rec-word { display:none !important; }
  .media-recommend-compact .rec-emoji { display:inline !important; }
}

.episode-grid { align-items:start !important; }
.episode-panel { align-self:start !important; }
.episode-comment-user { display:flex !important; align-items:center !important; gap:.55rem !important; min-width:0; }
.episode-comment-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.episode-comment-rating { display:inline-flex; align-items:center; flex-shrink:0; font-size:.76rem; }
.episode-comment-rating .stars,
.episode-comment-rating .profile-mini-stars { font-size:.76rem; gap:1px; }
@media(max-width:560px){
  .episode-comment-head { align-items:flex-start !important; gap:.45rem !important; }
  .episode-comment-user { max-width:100%; gap:.42rem !important; flex-wrap:nowrap; }
  .episode-comment-rating { font-size:.68rem; }
  .episode-comment-date { font-size:.68rem !important; }
}

body.search-liquid .smart-back-row,
body.recs-liquid .smart-back-row,
body.suggest-liquid .smart-back-row { display:none !important; }


/* Final polish: unselected Watching should stay neutral; only selected/current is green */
.add-btn.add-btn-watching:not(.add-btn-saved):not(.in-lib-watching) {
  background:rgba(255,255,255,.035) !important;
  border-color:var(--border) !important;
  color:var(--text2) !important;
}
.add-btn.add-btn-watching:not(.add-btn-saved):not(.in-lib-watching):hover {
  background:rgba(255,255,255,.065) !important;
  border-color:var(--border2) !important;
  color:var(--text) !important;
}
.add-btn.add-btn-watching:not(.add-btn-saved):not(.in-lib-watching) .add-btn-icon {
  color:#86efac !important;
  background:rgba(134,239,172,.10) !important;
}
.add-btn.in-lib-watching,
.add-btn.add-btn-saved.in-lib-watching,
.status-badge.in-lib-watching {
  border-color:rgba(134,239,172,.68) !important;
  color:#bbf7d0 !important;
  background:rgba(34,197,94,.14) !important;
}
.search-result .add-wrap-modern,
.search-result .add-wrap,
.search-result-card .add-wrap-modern,
.search-result-card .add-wrap,
.result-card .add-wrap-modern,
.result-card .add-wrap {
  align-self:center !important;
  justify-content:center !important;
}

/* Episode rows open their full breakdown page */
.ep-info.ep-link {
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  width:100%;
  min-width:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:.45rem;
  border-radius:10px;
  padding:2px 6px;
  margin:-2px -6px;
}
.ep-info.ep-link:hover { background:rgba(255,255,255,.055); }
.ep-info.ep-link .ep-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ep-info.ep-link .ep-open-hint {
  margin-left:auto;
  width:22px;
  height:22px;
  min-width:22px;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.045);
  color:var(--text2);
  font-size:1rem;
  font-weight:1000;
  line-height:1;
}
.ep-info.ep-link:hover .ep-open-hint { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
@media(max-width:560px){
  .ep-info.ep-link { gap:.32rem; padding-right:2px; }
  .ep-info.ep-link .ep-open-hint { width:20px; height:20px; min-width:20px; font-size:.95rem; }
}

/* Final fix: keep episode-list star ratings inline on mobile */
@media(max-width:560px){
  .ep-row {
    grid-template-columns: 32px minmax(0, 1fr) 92px !important;
    column-gap: 6px !important;
    overflow: hidden !important;
  }
  .ep-row .ep-rating-wrap {
    width: 92px !important;
    max-width: 92px !important;
    min-width: 92px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 2px !important;
    overflow: visible !important;
  }
  .ep-row .ep-star-picker {
    width: 76px !important;
    max-width: 76px !important;
    min-width: 76px !important;
    display: grid !important;
    grid-template-columns: repeat(5, 14px) !important;
    gap: 1px !important;
    align-items: center !important;
    justify-content: end !important;
    overflow: visible !important;
  }
  .ep-row .ep-star-picker .star-wrap {
    width: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    font-size: 0.76rem !important;
    line-height: 20px !important;
    display: inline-grid !important;
    place-items: center !important;
    overflow: hidden !important;
  }
  .ep-row .ep-clear-btn {
    width: 14px !important;
    min-width: 14px !important;
    height: 20px !important;
    min-height: 20px !important;
    font-size: 0.95rem !important;
    padding: 0 !important;
  }
  .ep-row .ep-info.ep-link {
    min-width: 0 !important;
    width: auto !important;
  }
  .ep-row .ep-info.ep-link .ep-name {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .ep-row .ep-info.ep-link .ep-open-hint {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    font-size: 0.82rem !important;
    margin-left: 0.2rem !important;
  }
}

@media(max-width:380px){
  .ep-row { grid-template-columns: 30px minmax(0, 1fr) 82px !important; }
  .ep-row .ep-rating-wrap { width: 82px !important; max-width: 82px !important; min-width: 82px !important; }
  .ep-row .ep-star-picker { width: 66px !important; max-width: 66px !important; min-width: 66px !important; grid-template-columns: repeat(5, 12px) !important; }
  .ep-row .ep-star-picker .star-wrap { width: 12px !important; min-width: 12px !important; max-width: 12px !important; font-size: 0.68rem !important; }
}

/* Episode page arrow tap reliability */
.ep-info.ep-link,
.ep-info.ep-link .ep-open-hint {
  pointer-events:auto !important;
  touch-action:manipulation !important;
}
.ep-info.ep-link {
  cursor:pointer !important;
  position:relative;
  z-index:2;
}
.ep-row .ep-open-hint {
  flex-shrink:0 !important;
}


/* Recs history + final polish */
.rec-history-panel{margin-top:1rem}.rec-history-card{border:1px solid var(--border);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));padding:1rem}.rec-history-head{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-bottom:.75rem}.rec-history-title{font-weight:1000;color:var(--text);text-transform:uppercase;letter-spacing:.12em;font-size:.82rem}.rec-history-sub{color:var(--text2);font-size:.78rem;font-weight:800;margin-top:.2rem}.rec-history-clear{width:auto;margin:0;padding:.45rem .7rem}.rec-history-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.rec-history-item{text-align:left;border:1px solid var(--border);border-radius:15px;background:rgba(255,255,255,.04);color:var(--text);padding:.7rem;cursor:pointer;font-family:inherit}.rec-history-item strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rec-history-item span{display:block;color:var(--text2);font-size:.75rem;font-weight:800;margin-top:.2rem}@media(max-width:650px){.rec-history-list{grid-template-columns:1fr}.rec-history-head{align-items:flex-start}.rec-history-clear{flex-shrink:0}}
.pf-review-card .pf-review-meta-line{color:var(--text2);font-size:.78rem;font-weight:850;margin-top:.2rem}.pf-review-card .pf-review-kind{border:1px solid var(--border2);border-radius:999px;padding:.28rem .5rem;color:var(--text2);font-size:.7rem;font-weight:950;white-space:nowrap}.pf-review-top{gap:.6rem}.pf-review-poster{object-fit:cover}


/* Patch: stronger cards + safer mobile modals */
@media(max-width:600px){
  .modal-overlay{ align-items:flex-start; padding-top:calc(env(safe-area-inset-top, 0px) + 72px); padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 14px); }
  .modal-card{ max-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 96px); margin:0 auto; }
}
.home-panel,.home-card,.home-dashboard-section,.taste-panel,.taste-card,.profile-section,.profile-item,.profile-top10-strip,.stat-card,.feed-card,.social-panel,.pf-card,.review-card,.review-feed-card,.media-panel,.rec-card,.result-card,.search-result,.similar-card,.modal-card{
  background:color-mix(in srgb,var(--panel-bg, var(--surface)) 92%, transparent) !important;
  border-color:color-mix(in srgb,var(--border2, var(--border)) 70%, transparent) !important;
}
html[data-theme="light"] .home-panel,html[data-theme="light"] .home-card,html[data-theme="light"] .home-dashboard-section,html[data-theme="light"] .taste-panel,html[data-theme="light"] .taste-card,html[data-theme="light"] .profile-section,html[data-theme="light"] .profile-item,html[data-theme="light"] .profile-top10-strip,html[data-theme="light"] .stat-card,html[data-theme="light"] .feed-card,html[data-theme="light"] .social-panel,html[data-theme="light"] .pf-card,html[data-theme="light"] .review-card,html[data-theme="light"] .review-feed-card,html[data-theme="light"] .media-panel,html[data-theme="light"] .rec-card,html[data-theme="light"] .result-card,html[data-theme="light"] .search-result,html[data-theme="light"] .similar-card,html[data-theme="light"] .modal-card{
  background:rgba(255,255,255,.88) !important;
}
/* Season watched controls should be a plain deliberate checkbox target only */
.season-watch-label,.season-watched-label,.ep-season-watch-label,.mark-season-watched,.season-watched-btn{background:transparent!important;border:0!important;box-shadow:none!important;color:transparent!important;padding:0!important;min-width:0!important;width:auto!important;overflow:hidden!important;}
.season-watch-label input,.season-watched-label input,.ep-season-watch-label input,.mark-season-watched input,.season-watched-btn input{width:18px!important;height:18px!important;opacity:1!important;margin:0!important;accent-color:var(--accent)!important;}

/* Global page background fill: prevent mobile safe-area black bars */
html, body {
  min-height: 100%;
  background: var(--bg) !important;
}
body {
  min-height: 100svh;
  min-height: 100dvh;
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:var(--bg);
}

/* Back buttons overlay without adding their own layout row */
.smart-back-row {
  position:absolute !important;
  top:calc(64px + env(safe-area-inset-top) + .75rem) !important;
  left:max(1rem, env(safe-area-inset-left)) !important;
  z-index:35 !important;
  margin:0 !important;
  padding:0 !important;
  width:auto !important;
  height:0 !important;
  pointer-events:none !important;
}
.smart-back-row .smart-back-btn { pointer-events:auto !important; }
@media(max-width:700px){
  .smart-back-row { top:calc(56px + env(safe-area-inset-top) + .55rem) !important; left:.8rem !important; }
}

/* Profile/user skeleton loading and stronger user cards */
.profile-skeleton-block,
.skeleton-card,
.profile-skeleton-poster,
.profile-skeleton-head {
  position:relative;
  overflow:hidden;
  background:var(--card-solid-2) !important;
  border-radius:18px;
  min-height:120px;
}
.profile-skeleton-head{height:18px;min-height:18px;width:38%;margin:.2rem 0 1rem;}
.profile-skeleton-poster{width:86px;height:128px;min-height:128px;flex:0 0 auto;border-radius:13px;}
.skeleton-card{min-height:92px;}
.profile-skeleton-block::after,
.skeleton-card::after,
.profile-skeleton-poster::after,
.profile-skeleton-head::after {
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  animation:profileSkeletonSweep 1.2s infinite;
}
@keyframes profileSkeletonSweep{100%{transform:translateX(100%);}}
.user-liquid .profile-section,
.user-liquid .profile-item,
.user-liquid .profile-extras,
.user-liquid .profile-top10-strip,
.user-liquid .profile-hero.user-profile-hero-card {
  background:var(--card-solid-2) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Bio pencil sits directly after the bio text */
.profile-bio-line{
  display:block;
  max-width:760px;
  margin:.75rem 0 .3rem;
  color:var(--text2);
  font-size:.98rem;
  line-height:1.55;
}
.profile-bio-line .profile-bio-text{display:inline !important;margin:0 !important;max-width:none !important;vertical-align:baseline;}
.profile-bio-line .profile-bio-actions{display:inline-flex !important;margin:.02rem 0 0 .35rem !important;vertical-align:baseline;}
.profile-bio-line .profile-bio-edit-btn{display:inline-flex;vertical-align:baseline;}
@media(max-width:760px){
  .profile-bio-line{text-align:center;margin:.45rem auto .25rem;font-size:.88rem;}
}

/* Profile subsection counts */
.prof-sub-label .prof-sub-count{
  margin-left:.28rem;
  font-size:.78em;
  font-weight:700;
  letter-spacing:0;
  color:var(--text) !important;
  opacity:.72;
}

/* Episode panel watch-all control */
.ep-watch-all-wrap{
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  border:1px solid var(--border2);
  border-radius:999px;
  padding:.35rem .65rem;
  font-size:.72rem;
  font-weight:800;
  color:var(--text2);
  background:var(--surface2);
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.ep-watch-all-wrap input{position:absolute;opacity:0;pointer-events:none;}
.ep-watch-all-wrap:has(input:checked){border-color:var(--accent);color:var(--accent);background:var(--accent-dim);}
@supports not selector(:has(*)){
  .ep-watch-all-wrap{color:var(--text2);}
}

/* Keep Top 5 visible on desktop when profile activity tools are open; mobile can still hide it. */
@media(min-width:761px){
  body.profile-redesign .profile-extras.hide-for-activity,
  body.profile-redesign .profile-top-row .profile-extras.hide-for-activity,
  body.profile-redesign .profile-extras[style*="display: none"] {
    display:block !important;
  }
}


/* Patch: stable desktop profile top row + bottom import controls */
body.profile-redesign .profile-top-row{align-items:start!important;}
body.profile-redesign .profile-top-row .profile-hero,
body.profile-redesign .profile-top-row .profile-extras{min-height:0!important;height:auto!important;align-self:start!important;}
body.profile-redesign .profile-top-row .profile-extras:empty{display:none!important;}
.profile-bottom-actions{width:min(520px,100%);margin:2.5rem auto 0;display:grid;gap:.75rem;}
body.profile-redesign .profile-bottom-actions .danger-zone{margin:0!important;padding:0!important;border:0!important;background:transparent!important;}
.clear-all-btn{border:0!important;outline:0!important;box-shadow:none!important;}
.letterboxd-import-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:.75rem 1rem;border-radius:12px;background:var(--accent)!important;color:var(--accent-btn-text)!important;border:0!important;outline:0!important;text-decoration:none!important;font-size:.85rem;font-weight:800;font-family:inherit;box-shadow:none!important;}
.letterboxd-import-btn:hover{filter:brightness(1.06);transform:translateY(-1px);}
@media(max-width:760px){.profile-bottom-actions{margin-top:1.5rem;}}

/* Patch: Top 5 edit limit, equal desktop profile cards, neutral watching button, and restored stats spread */
@media(min-width:761px){
  body.profile-redesign .profile-top-row{
    align-items:stretch!important;
  }
  body.profile-redesign .profile-top-row .profile-hero,
  body.profile-redesign .profile-top-row .profile-extras,
  body.profile-redesign .profile-top-row .profile-top10-strip{
    height:100%!important;
    min-height:0!important;
    align-self:stretch!important;
  }
  body.profile-redesign .profile-top-row .profile-hero,
  body.profile-redesign.user-liquid .profile-top-row .profile-hero.user-profile-hero-card{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }
}
body.search-liquid .add-btn.add-btn-watching:not(.add-btn-saved):not(.in-lib-watching),
body.search-liquid .search-result .add-btn.add-btn-watching:not(.add-btn-saved):not(.in-lib-watching),
body.search-liquid .result-card .add-btn.add-btn-watching:not(.add-btn-saved):not(.in-lib-watching){
  background:linear-gradient(180deg,var(--surface2),var(--input-bg))!important;
  border-color:var(--border2)!important;
  color:var(--text2)!important;
}
body.search-liquid .add-btn.add-btn-watching:not(.add-btn-saved):not(.in-lib-watching) .add-btn-icon{
  background:var(--surface2)!important;
  color:#86efac!important;
}
body.search-liquid .add-btn.add-btn-watching:not(.add-btn-saved):not(.in-lib-watching):hover{
  border-color:var(--accent)!important;
  color:var(--text)!important;
  box-shadow:0 0 0 3px var(--accent-dim)!important;
}

/* Patch: mobile search descriptions, stats spread containment/order, darker user cards */
@media(max-width:600px){
  body.search-liquid .search-result{
    align-items:flex-start!important;
    gap:12px!important;
    min-height:132px!important;
  }
  body.search-liquid .search-result .result-info{
    align-self:stretch!important;
    display:flex!important;
    flex-direction:column!important;
    min-width:0!important;
  }
  body.search-liquid .search-result .result-title-row{
    min-width:0!important;
  }
  body.search-liquid .search-result .result-sub{
    line-height:1.2!important;
  }
  body.search-liquid .search-result .result-meta{
    white-space:normal!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:3!important;
    line-height:1.25!important;
    margin-top:4px!important;
    max-height:3.75em!important;
  }
}

.stats-liquid .rating-spread-panel{
  overflow:hidden!important;
  min-width:0!important;
}
.stats-liquid .rating-spread-rail{
  grid-template-columns:26px minmax(0,1fr) clamp(48px,7vw,74px)!important;
  gap:clamp(.3rem,1.2vw,.65rem)!important;
  min-width:0!important;
  width:100%!important;
  overflow:hidden!important;
}
.stats-liquid .rating-spread-chart{
  min-width:0!important;
  width:100%!important;
  gap:clamp(2px,.55vw,4px)!important;
}
.stats-liquid .rating-spread-end.high{
  font-size:clamp(.82rem,1.8vw,1.18rem)!important;
  letter-spacing:-.06em!important;
  transform:translateY(1px);
}
.stats-liquid .rating-spread-end.low{
  font-size:clamp(1.15rem,2.2vw,1.55rem)!important;
}
.stats-liquid .rating-spread-fill{
  max-width:32px!important;
}
@media(max-width:700px){
  .stats-liquid .stats-balanced-grid{
    display:flex!important;
    flex-direction:column!important;
  }
  .stats-liquid .stats-balanced-grid>.stats-stack{display:contents!important;}
  .stats-liquid .rating-spread-panel{order:1!important;}
  .stats-liquid .genre-stats-panel{order:2!important;}
  .stats-liquid .media-mix-panel{order:3!important;}
  .stats-liquid .stats-balanced-grid .stats-panel:not(.rating-spread-panel):not(.genre-stats-panel):not(.media-mix-panel){order:10!important;}
  .stats-liquid .rating-spread-rail{
    grid-template-columns:22px minmax(0,1fr) 54px!important;
    gap:.34rem!important;
  }
  .stats-liquid .rating-spread-end.high{
    font-size:.78rem!important;
    letter-spacing:-.08em!important;
  }
  .stats-liquid .rating-spread-end.low{font-size:1.25rem!important;}
  .stats-liquid .rating-spread-fill{max-width:24px!important;}
}

body.profile-redesign.user-liquid .profile-hero.user-profile-hero-card,
body.profile-redesign.user-liquid .profile-top10-strip,
body.profile-redesign.user-liquid .profile-section,
body.profile-redesign.user-liquid .profile-item,
body.profile-redesign.user-liquid .stat-card,
body.profile-redesign.user-liquid .profile-extras{
  background:var(--card-solid)!important;
  background-image:none!important;
  border-color:color-mix(in srgb,var(--border2) 75%,transparent)!important;
  box-shadow:0 16px 44px rgba(0,0,0,.18)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html[data-theme="light"] body.profile-redesign.user-liquid .profile-hero.user-profile-hero-card,
html[data-theme="light"] body.profile-redesign.user-liquid .profile-top10-strip,
html[data-theme="light"] body.profile-redesign.user-liquid .profile-section,
html[data-theme="light"] body.profile-redesign.user-liquid .profile-item,
html[data-theme="light"] body.profile-redesign.user-liquid .stat-card,
html[data-theme="light"] body.profile-redesign.user-liquid .profile-extras{
  background:var(--card-solid)!important;
  background-image:none!important;
}


/* Final profile/stats alignment patch */
body.profile-redesign .profile-top-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:1rem !important;
  align-items:stretch !important;
  margin-bottom:1rem !important;
}
body.profile-redesign .profile-top-row .profile-hero,
body.profile-redesign .profile-top-row .profile-extras{
  margin:0 !important;
  min-height:300px !important;
  height:auto !important;
  align-self:stretch !important;
  box-sizing:border-box !important;
}
body.profile-redesign .profile-top-row .profile-extras{
  display:flex !important;
  align-items:stretch !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:0 !important;
  overflow:visible !important;
}
body.profile-redesign .profile-top-row .profile-top10-strip{
  width:100% !important;
  height:100% !important;
  min-height:300px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  transform:none !important;
  outline:0 !important;
}
body.profile-redesign .profile-top-row .profile-top10-strip:before{
  left:0 !important;
  right:0 !important;
}
@media(max-width:760px){
  body.profile-redesign .profile-top-row{display:block !important;}
  body.profile-redesign .profile-top-row .profile-hero,
  body.profile-redesign .profile-top-row .profile-extras,
  body.profile-redesign .profile-top-row .profile-top10-strip{
    min-height:0 !important;
    height:auto !important;
  }
}

/* Stats readability restore */
.stats-page-hero{
  text-align:center !important;
  margin:0 auto 1.5rem !important;
}
.stats-title-wrap{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.45rem !important;
}
.stats-page-title{
  font-size:clamp(2.65rem,7vw,4.75rem) !important;
  font-weight:950 !important;
  line-height:.92 !important;
  letter-spacing:-.065em !important;
}
.stats-page-sub{
  color:var(--text2) !important;
  font-size:1.05rem !important;
  font-weight:800 !important;
  letter-spacing:.04em !important;
  margin-top:.55rem !important;
  opacity:.82 !important;
}
.stats-big-card{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:22px !important;
  padding:1.25rem !important;
  min-height:112px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}
.stats-big-num{
  font-size:clamp(2rem,4vw,2.7rem) !important;
  font-weight:950 !important;
  letter-spacing:-.055em !important;
  line-height:.95 !important;
  color:var(--text) !important;
}
.stats-big-label{
  font-size:.78rem !important;
  color:var(--text2) !important;
  opacity:.82 !important;
  font-weight:850 !important;
  letter-spacing:.13em !important;
  margin-top:.45rem !important;
}
.stats-panel-title{
  font-size:.88rem !important;
  color:var(--text) !important;
  opacity:.9 !important;
  font-weight:950 !important;
  letter-spacing:.12em !important;
}
.stats-list-row,
.stats-taste-read p,
.stats-note{
  color:var(--text2) !important;
  opacity:.9 !important;
}
.stats-list-name{
  color:var(--text) !important;
  opacity:.92 !important;
}
@media(max-width:700px){
  .stats-page-title{font-size:clamp(2.35rem,14vw,3.7rem) !important;}
  .stats-page-sub{font-size:.95rem !important;}
  .stats-big-card{min-height:96px !important;padding:1rem !important;}
  .stats-big-num{font-size:1.8rem !important;}
  .stats-big-label{font-size:.68rem !important;}
}


/* FINAL: lock profile/user desktop top row to actual Top 5 content height */
@media (min-width: 761px){
  body.profile-redesign .profile-top-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:1rem!important;
    align-items:stretch!important;
    margin-bottom:1rem!important;
  }
  body.profile-redesign .profile-top-row .profile-hero,
  body.profile-redesign.user-liquid .profile-top-row .profile-hero.user-profile-hero-card{
    margin:0!important;
    min-height:0!important;
    height:auto!important;
    align-self:stretch!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding:clamp(1.05rem,1.75vw,1.45rem)!important;
  }
  body.profile-redesign .profile-top-row .profile-extras{
    margin:0!important;
    padding:0!important;
    min-height:0!important;
    height:auto!important;
    align-self:stretch!important;
    display:flex!important;
    align-items:stretch!important;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  body.profile-redesign .profile-top-row .profile-top10-strip{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    align-self:stretch!important;
    margin:0!important;
    padding:1rem 1rem .78rem!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    transform:none!important;
    outline:0!important;
  }
  body.profile-redesign.user-liquid .profile-top-row .profile-top10-strip{
    min-height:0!important;
    height:auto!important;
    padding:1rem 1rem .78rem!important;
  }
  body.profile-redesign .profile-top-row .profile-carousel-row,
  body.profile-redesign.user-liquid .profile-top-row .profile-carousel-row{
    padding:.1rem .15rem .15rem!important;
    margin:0!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    overflow:hidden!important;
  }
  body.profile-redesign .profile-top-row .profile-carousel-item{
    flex:0 1 94px!important;
  }
}
@media (max-width: 760px){
  body.profile-redesign .profile-top-row .profile-hero,
  body.profile-redesign .profile-top-row .profile-extras,
  body.profile-redesign .profile-top-row .profile-top10-strip{
    min-height:0!important;
    height:auto!important;
  }
}

/* 2026 nav cleanup: Home lives in tabs; search is an icon action. */
nav .nav-logo { display:none !important; }
.inbox-nav-btn.active, .nav-search-btn.active { color:var(--accent); border-color:var(--accent); background:var(--accent-dim); }
.nav-search-btn { text-decoration:none; }
@media(min-width:601px){
  nav { justify-content:flex-end; }
  nav .nav-tabs { left:50%; }
}
@media(max-width:600px){
  nav .nav-tabs { max-width:none; }
  nav .nav-tab { padding-left:0.44rem; padding-right:0.44rem; }
}
@media(max-width:370px){
  nav .nav-tab { padding-left:0.32rem; padding-right:0.32rem; }
}


/* Patch: stable Top 5 row and restored stats spread */
@media (min-width: 761px){
  body.profile-redesign .profile-top-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    align-items:stretch!important;
  }
  body.profile-redesign .profile-top-row .profile-hero,
  body.profile-redesign.user-liquid .profile-top-row .profile-hero.user-profile-hero-card,
  body.profile-redesign .profile-top-row .profile-extras,
  body.profile-redesign .profile-top-row .profile-top10-strip{
    min-height:0!important;
    height:auto!important;
  }
  body.profile-redesign .profile-top-row .profile-hero,
  body.profile-redesign.user-liquid .profile-top-row .profile-hero.user-profile-hero-card{
    align-self:stretch!important;
  }
  body.profile-redesign .profile-top-row .profile-top10-strip{
    contain:layout paint!important;
  }
}
.stats-liquid .rating-spread-panel{
  margin:1rem 0 1.1rem!important;
  padding:1.25rem!important;
  overflow:hidden!important;
}
.stats-liquid .rating-spread-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:1rem!important;
  padding-bottom:.85rem!important;
  border-bottom:1px solid var(--border)!important;
}
.stats-liquid .rating-spread-total{
  color:var(--text2)!important;
  font-size:1.25rem!important;
  font-weight:950!important;
  margin-top:.2rem!important;
}
.stats-liquid .rating-average-big{
  display:flex!important;
  align-items:baseline!important;
  gap:.5rem!important;
  white-space:nowrap!important;
}
.stats-liquid .rating-average-big strong{
  color:var(--text)!important;
  font-size:clamp(2.25rem,5vw,3.8rem)!important;
  line-height:.9!important;
  letter-spacing:-.075em!important;
}
.stats-liquid .rating-average-big span{
  color:var(--text2)!important;
  text-transform:uppercase!important;
  letter-spacing:.13em!important;
  font-size:.78rem!important;
  font-weight:900!important;
  opacity:.85!important;
}
.stats-liquid .rating-spread-rail{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) minmax(92px,auto)!important;
  align-items:end!important;
  gap:clamp(.5rem,1.4vw,.9rem)!important;
  margin-top:1.15rem!important;
}
.stats-liquid .rating-spread-chart{
  height:150px!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  gap:clamp(4px,.75vw,8px)!important;
  min-width:0!important;
  overflow:hidden!important;
}
.stats-liquid .rating-spread-bar{
  flex:1 1 0!important;
  max-width:44px!important;
  height:100%!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  display:flex!important;
  align-items:flex-end!important;
  cursor:default!important;
  position:relative!important;
}
.stats-liquid .rating-spread-bar span{
  display:block!important;
  width:100%!important;
  height:var(--h)!important;
  min-height:5px!important;
  border-radius:5px 5px 2px 2px!important;
  background:color-mix(in srgb,var(--accent) 62%,var(--text2))!important;
  opacity:.92!important;
}
.stats-liquid .rating-spread-bar:active::after,
.stats-liquid .rating-spread-bar:hover::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  bottom:calc(var(--h) + 10px);
  transform:translateX(-50%);
  white-space:nowrap;
  background:var(--surface2);
  color:var(--text);
  border:1px solid var(--border2);
  border-radius:999px;
  padding:.25rem .5rem;
  font-size:.72rem;
  font-weight:850;
  z-index:3;
}
.stats-liquid .rating-spread-end.low,
.stats-liquid .rating-spread-end.high{
  color:var(--accent)!important;
  line-height:1!important;
  text-shadow:none!important;
}
.stats-liquid .rating-spread-end.low{font-size:2rem!important;}
.stats-liquid .rating-spread-end.high{font-size:1.25rem!important;letter-spacing:-.04em!important;}
@media(max-width:700px){
  .stats-liquid .rating-spread-panel{padding:1rem!important;}
  .stats-liquid .rating-spread-head{display:block!important;}
  .stats-liquid .rating-average-big{margin-top:.75rem!important;}
  .stats-liquid .rating-spread-rail{grid-template-columns:26px minmax(0,1fr) 72px!important;gap:.38rem!important;}
  .stats-liquid .rating-spread-chart{height:116px!important;gap:3px!important;}
  .stats-liquid .rating-spread-bar{max-width:28px!important;}
  .stats-liquid .rating-spread-end.low{font-size:1.45rem!important;}
  .stats-liquid .rating-spread-end.high{font-size:.82rem!important;letter-spacing:-.08em!important;}
}


/* ─── Mobile Navigation Revamp ────────────────────────────────────────────
   Desktop nav stays unchanged. On phones, the primary tabs become a clean
   bottom bar. Search/notifications/profile float at the top right, and a real
   back button floats at the top left on every non-home page. */
.mobile-back-btn { display:none; }
@media(max-width:700px){
  body.mobile-nav-ready { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }

  body.mobile-nav-ready nav {
    position:fixed !important;
    top:auto !important;
    left:12px !important;
    right:12px !important;
    bottom:calc(10px + env(safe-area-inset-bottom)) !important;
    height:62px !important;
    min-height:62px !important;
    padding:7px !important;
    border:1px solid color-mix(in srgb, var(--border2) 82%, transparent) !important;
    border-radius:26px !important;
    background:color-mix(in srgb, var(--panel-bg) 92%, transparent) !important;
    box-shadow:0 18px 48px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.07) !important;
    backdrop-filter:blur(26px) saturate(170%) !important;
    -webkit-backdrop-filter:blur(26px) saturate(170%) !important;
    z-index:900 !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:0 !important;
    overflow:hidden !important;
  }
  body.mobile-nav-ready nav .nav-logo,
  body.mobile-nav-ready nav > .nav-right { display:none !important; }

  body.mobile-nav-ready .nav-tabs {
    position:static !important;
    transform:none !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    flex:1 1 auto !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }
  body.mobile-nav-ready .nav-tab {
    height:48px !important;
    min-width:0 !important;
    padding:0 .12rem !important;
    border-radius:18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    font-size:.76rem !important;
    font-weight:850 !important;
    letter-spacing:-.015em !important;
    color:var(--text2) !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
  body.mobile-nav-ready .nav-tab.active {
    color:var(--text) !important;
    background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, var(--surface3)), color-mix(in srgb, var(--accent) 8%, var(--surface2))) !important;
    border:1px solid color-mix(in srgb, var(--accent) 35%, transparent) !important;
    box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 16%, transparent), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  body.mobile-nav-ready > .nav-right {
    position:fixed !important;
    top:calc(10px + env(safe-area-inset-top)) !important;
    right:10px !important;
    z-index:920 !important;
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    padding:5px !important;
    border-radius:999px !important;
    background:color-mix(in srgb, var(--panel-bg) 88%, transparent) !important;
    border:1px solid color-mix(in srgb, var(--border2) 74%, transparent) !important;
    box-shadow:0 12px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07) !important;
    backdrop-filter:blur(22px) saturate(160%) !important;
    -webkit-backdrop-filter:blur(22px) saturate(160%) !important;
  }
  body.mobile-nav-ready > .nav-right .nav-user-btn,
  body.mobile-nav-ready > .nav-right .inbox-nav-btn,
  body.mobile-nav-ready > .nav-right .nav-search-btn {
    width:38px !important;
    height:38px !important;
    min-height:38px !important;
    max-width:38px !important;
    padding:0 !important;
    border-radius:50% !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:.88rem !important;
    background:var(--surface2) !important;
    border:1px solid var(--border2) !important;
    color:var(--text) !important;
    text-decoration:none !important;
    line-height:1 !important;
  }
  body.mobile-nav-ready > .nav-right .nav-search-btn.active,
  body.mobile-nav-ready > .nav-right .inbox-nav-btn.active,
  body.mobile-nav-ready > .nav-right .nav-user-btn:hover,
  body.mobile-nav-ready > .nav-right .inbox-nav-btn:hover,
  body.mobile-nav-ready > .nav-right .nav-search-btn:hover {
    border-color:var(--accent) !important;
    background:var(--accent-dim) !important;
    color:var(--accent) !important;
  }
  body.mobile-nav-ready > .nav-right .inbox-nav-badge {
    top:-2px !important;
    right:-2px !important;
    width:14px !important;
    height:14px !important;
    font-size:.54rem !important;
  }

  body.mobile-nav-ready .mobile-back-btn {
    display:inline-flex;
    position:fixed;
    top:calc(10px + env(safe-area-inset-top));
    left:10px;
    z-index:920;
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid color-mix(in srgb, var(--border2) 80%, transparent);
    background:color-mix(in srgb, var(--panel-bg) 88%, transparent);
    color:var(--text);
    box-shadow:0 12px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07);
    backdrop-filter:blur(22px) saturate(160%);
    -webkit-backdrop-filter:blur(22px) saturate(160%);
    font-size:1.35rem;
    font-weight:900;
    cursor:pointer;
    line-height:1;
  }
  body.mobile-nav-ready.mobile-root-page .mobile-back-btn { display:none !important; }

  body.mobile-nav-ready .page-wrap,
  body.mobile-nav-ready main,
  body.mobile-nav-ready .container {
    padding-bottom:calc(7.4rem + env(safe-area-inset-bottom)) !important;
  }
  body.mobile-nav-ready .settings-panel {
    position:fixed !important;
    top:calc(60px + env(safe-area-inset-top)) !important;
    right:10px !important;
    z-index:930 !important;
  }
}
@media(max-width:380px){
  body.mobile-nav-ready .nav-tab { font-size:.7rem !important; }
  body.mobile-nav-ready nav { left:8px !important; right:8px !important; }
  body.mobile-nav-ready > .nav-right .nav-user-btn,
  body.mobile-nav-ready > .nav-right .inbox-nav-btn,
  body.mobile-nav-ready > .nav-right .nav-search-btn { width:35px !important; height:35px !important; max-width:35px !important; min-height:35px !important; }
}
[data-theme="light"] body.mobile-nav-ready nav,
[data-theme="light"] body.mobile-nav-ready > .nav-right,
[data-theme="light"] body.mobile-nav-ready .mobile-back-btn {
  background:color-mix(in srgb, var(--panel-bg) 94%, transparent) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

/* FINAL MOBILE NAV TUNE: raise bottom bar, reduce dead top space, keep account as icon */
@media(max-width:700px){
  body.mobile-nav-ready{
    padding-bottom:calc(112px + env(safe-area-inset-bottom)) !important;
  }
  body.mobile-nav-ready nav{
    left:14px !important;
    right:14px !important;
    bottom:calc(22px + env(safe-area-inset-bottom)) !important;
    height:62px !important;
    min-height:62px !important;
    border-radius:25px !important;
    overflow:hidden !important;
  }
  body.mobile-nav-ready .page-wrap,
  body.mobile-nav-ready main,
  body.mobile-nav-ready .container,
  body.mobile-nav-ready.liquid-page .page-wrap,
  body.mobile-nav-ready .liquid-page .page-wrap,
  body.mobile-nav-ready.search-liquid .page-wrap,
  body.mobile-nav-ready.recs-liquid .page-wrap,
  body.mobile-nav-ready.social-liquid .page-wrap,
  body.mobile-nav-ready.match-liquid .page-wrap,
  body.mobile-nav-ready.profile-redesign .page-wrap,
  body.mobile-nav-ready.profile-redesign.user-liquid .page-wrap,
  body.mobile-nav-ready.user-liquid.profile-redesign .page-wrap{
    padding-top:calc(58px + env(safe-area-inset-top)) !important;
    padding-bottom:calc(8.6rem + env(safe-area-inset-bottom)) !important;
  }
  body.mobile-nav-ready.mobile-root-page .page-wrap,
  body.mobile-nav-ready.mobile-root-page.liquid-page .page-wrap{
    padding-top:calc(52px + env(safe-area-inset-top)) !important;
  }
  body.mobile-nav-ready > .nav-right{
    top:calc(12px + env(safe-area-inset-top)) !important;
    right:12px !important;
  }
  body.mobile-nav-ready > .nav-right #nav-email.nav-user-btn{
    font-size:0 !important;
    color:transparent !important;
    overflow:hidden !important;
    text-indent:0 !important;
  }
  body.mobile-nav-ready > .nav-right #nav-email.nav-user-btn::before{
    content:"👤";
    font-size:1.05rem !important;
    line-height:1 !important;
    color:var(--text) !important;
  }
  body.mobile-nav-ready .mobile-back-btn{
    top:calc(12px + env(safe-area-inset-top)) !important;
    left:12px !important;
  }
}
@media(max-width:380px){
  body.mobile-nav-ready nav{
    left:10px !important;
    right:10px !important;
    bottom:calc(18px + env(safe-area-inset-bottom)) !important;
  }
}

/* Mobile nav follow-up: full-width bottom bar, tighter social filters, safer modals */
@media(max-width:700px){
  body.mobile-nav-ready{
    padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important;
  }
  body.mobile-nav-ready nav{
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    height:72px !important;
    min-height:72px !important;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    border-radius:24px 24px 0 0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  body.mobile-nav-ready nav .nav-tabs{
    width:100% !important;
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:6px !important;
  }
  body.mobile-nav-ready nav .nav-tab{
    min-width:0 !important;
    width:100% !important;
    padding:.62rem .35rem !important;
    font-size:.82rem !important;
    white-space:nowrap !important;
  }
  body.mobile-nav-ready .page-wrap,
  body.mobile-nav-ready main,
  body.mobile-nav-ready .container,
  body.mobile-nav-ready.liquid-page .page-wrap,
  body.mobile-nav-ready.search-liquid .page-wrap,
  body.mobile-nav-ready.recs-liquid .page-wrap,
  body.mobile-nav-ready.social-liquid .page-wrap,
  body.mobile-nav-ready.match-liquid .page-wrap,
  body.mobile-nav-ready.profile-redesign .page-wrap,
  body.mobile-nav-ready.profile-redesign.user-liquid .page-wrap,
  body.mobile-nav-ready.user-liquid.profile-redesign .page-wrap{
    padding-bottom:calc(7.1rem + env(safe-area-inset-bottom)) !important;
  }

  .social-liquid .activity-filter-row,
  .social-liquid .type-tabs{
    align-items:center !important;
    gap:5px !important;
    padding:4px !important;
  }
  .social-liquid .activity-filter-btn,
  .social-liquid .type-tab{
    min-width:0 !important;
    padding:.52rem .48rem !important;
    font-size:clamp(.58rem, 2.45vw, .72rem) !important;
    letter-spacing:-.015em !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    line-height:1.05 !important;
  }
  .social-liquid .activity-filter-row{
    display:grid !important;
    grid-template-columns:repeat(5, minmax(0,1fr)) !important;
  }

  .modal-overlay{
    align-items:flex-start !important;
    padding-top:calc(env(safe-area-inset-top, 0px) + 68px) !important;
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 104px) !important;
  }
  .modal-card{
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 182px) !important;
    margin:0 auto !important;
  }
}
@media(max-width:380px){
  body.mobile-nav-ready nav{
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100vw !important;
  }
  body.mobile-nav-ready nav .nav-tab{font-size:.76rem !important;padding:.58rem .25rem !important;}
  .social-liquid .activity-filter-btn,
  .social-liquid .type-tab{font-size:.56rem !important;padding:.5rem .3rem !important;}
}

/* ─── Mobile nav + page-ending polish ─────────────────────────────────────
   Keep the mobile nav locked to the bottom, set the tab buttons at a middle vertical position so the
   bar feels balanced without sitting too low, and tighten page endings. */
@media(max-width:700px){
  body.mobile-nav-ready{
    padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important;
  }
  body.mobile-nav-ready nav{
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    height:calc(68px + env(safe-area-inset-bottom)) !important;
    min-height:calc(68px + env(safe-area-inset-bottom)) !important;
    padding:6px 10px max(2px, env(safe-area-inset-bottom)) !important;
    border-radius:22px 22px 0 0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  body.mobile-nav-ready nav .nav-tabs{
    transform:translateY(2px) !important;
    align-items:end !important;
  }
  body.mobile-nav-ready nav .nav-tab{
    height:48px !important;
    padding:.5rem .3rem !important;
  }
  body.mobile-nav-ready .page-wrap,
  body.mobile-nav-ready main,
  body.mobile-nav-ready .container,
  body.mobile-nav-ready.liquid-page .page-wrap,
  body.mobile-nav-ready.search-liquid .page-wrap,
  body.mobile-nav-ready.recs-liquid .page-wrap,
  body.mobile-nav-ready.social-liquid .page-wrap,
  body.mobile-nav-ready.match-liquid .page-wrap,
  body.mobile-nav-ready.profile-redesign .page-wrap,
  body.mobile-nav-ready.profile-redesign.user-liquid .page-wrap,
  body.mobile-nav-ready.user-liquid.profile-redesign .page-wrap{
    padding-bottom:calc(5.75rem + env(safe-area-inset-bottom)) !important;
  }
}
@media(max-width:380px){
  body.mobile-nav-ready nav .nav-tab{font-size:.74rem !important;padding:.48rem .18rem !important;}
}

/* Center the Social hero content as one group; keep search tucked next to title. */
.social-liquid .social-hero-card{
  justify-content:center !important;
  text-align:center !important;
}
.social-liquid .social-titleblock{
  text-align:center !important;
  margin-inline:auto !important;
}
.social-liquid .social-hero-card .page-heading{
  text-align:center !important;
  margin-inline:auto !important;
  display:inline-block !important;
}
.social-liquid .social-hero-card .social-sub{
  color:var(--text) !important;
  opacity:.78 !important;
  text-align:center !important;
}
.social-liquid .social-hero-card .social-search-toggle{
  position:absolute !important;
  left:calc(50% + 68px) !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:2 !important;
}
@media(max-width:700px){
  .social-liquid .social-hero-card .social-search-toggle{
    left:calc(50% + 54px) !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
  }
}

/* Tighten page endings so pages stop just after their real last section. */
.home-liquid .page-wrap,
.home-page .page-wrap,
.social-liquid .page-wrap,
.recs-liquid .page-wrap,
.profile-redesign .page-wrap{
  padding-bottom:1.15rem !important;
}
.social-liquid .social-shell{
  margin-bottom:.75rem !important;
}
.recs-liquid .page-wrap{
  min-height:auto !important;
}
@media(max-width:700px){
  body.mobile-nav-ready.home-liquid .page-wrap,
  body.mobile-nav-ready.home-page .page-wrap,
  body.mobile-nav-ready.social-liquid .page-wrap,
  body.mobile-nav-ready.recs-liquid .page-wrap,
  body.mobile-nav-ready.profile-redesign .page-wrap{
    padding-bottom:calc(5.75rem + env(safe-area-inset-bottom)) !important;
  }
}


/* ─── Mobile nav / detail page cleanup ──────────────────────────────────── */
@media(max-width:700px){
  body.mobile-nav-ready nav{
    height:calc(72px + env(safe-area-inset-bottom)) !important;
    min-height:calc(72px + env(safe-area-inset-bottom)) !important;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
  }
  body.mobile-nav-ready nav .nav-tabs{
    height:52px !important;
    align-items:center !important;
    transform:none !important;
  }
  body.mobile-nav-ready nav .nav-tab{
    height:46px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:.48rem .28rem !important;
  }
  body.mobile-nav-ready .page-wrap,
  body.mobile-nav-ready main,
  body.mobile-nav-ready .container,
  body.mobile-nav-ready.liquid-page .page-wrap,
  body.mobile-nav-ready.search-liquid .page-wrap,
  body.mobile-nav-ready.recs-liquid .page-wrap,
  body.mobile-nav-ready.social-liquid .page-wrap,
  body.mobile-nav-ready.match-liquid .page-wrap,
  body.mobile-nav-ready.profile-redesign .page-wrap,
  body.mobile-nav-ready.profile-redesign.user-liquid .page-wrap,
  body.mobile-nav-ready.user-liquid.profile-redesign .page-wrap{
    padding-bottom:calc(6.2rem + env(safe-area-inset-bottom)) !important;
  }
}

/* Hide page-level back buttons on match/media/episode while keeping global mobile back. */
body.match-liquid .pf-back,
body.match-liquid .smart-back-row,
body.media-liquid .smart-back-row,
body.episode-liquid .episode-back-row,
body.episode-theme-active .episode-back-row,
body:has(.episode-page-wrap) .episode-back-row{
  display:none !important;
}

/* Episode pages should finish shortly after the Similar section on mobile. */
@media(max-width:700px){
  body.episode-liquid .episode-page-wrap,
  body.episode-theme-active .episode-page-wrap,
  body:has(.episode-page-wrap) .episode-page-wrap{
    padding-bottom:calc(1.1rem + env(safe-area-inset-bottom)) !important;
    margin-bottom:0 !important;
  }
  body.episode-liquid main,
  body.episode-theme-active main,
  body:has(.episode-page-wrap) main{
    padding-bottom:calc(5.8rem + env(safe-area-inset-bottom)) !important;
  }
}

/* Social mobile: rebuild the hero/search alignment and remove extra gap before friends. */
@media(max-width:700px){
  .social-liquid .social-hero-card{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:.45rem !important;
    padding:1.05rem 1rem !important;
    margin-bottom:.75rem !important;
  }
  .social-liquid .social-titleblock{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:.22rem !important;
  }
  .social-liquid .social-titleline,
  .social-liquid .page-heading{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:.42rem !important;
    margin:0 !important;
    text-align:center !important;
  }
  .social-liquid .social-search-toggle{
    position:static !important;
    transform:none !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    margin-left:.35rem !important;
    vertical-align:middle !important;
  }
  .social-liquid .social-sub{
    margin-top:.18rem !important;
    color:var(--text) !important;
    opacity:.84 !important;
    max-width:260px !important;
  }
  .social-liquid .activity-filter-row{
    margin-bottom:.55rem !important;
  }
  .social-liquid .social-main-grid,
  .social-liquid .side-friends,
  .social-liquid .social-panel{
    margin-top:0 !important;
  }
  .social-liquid .side-friends{
    padding-top:.85rem !important;
  }
}

/* FINAL iOS MOBILE BOTTOM FILL
   Keep the page/nav background painted through the home-indicator safe area. */
@media (max-width:700px){
  html{
    min-height:100%;
    min-height:100dvh;
    background:var(--bg) !important;
  }
  body,
  body.mobile-nav-ready{
    min-height:100%;
    min-height:100dvh;
    margin:0 !important;
    background-color:var(--bg) !important;
    padding-bottom:0 !important;
  }
  body.mobile-nav-ready::after{
    content:"" !important;
    display:block !important;
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100vw !important;
    height:max(34px, env(safe-area-inset-bottom)) !important;
    background:var(--nav-bg) !important;
    pointer-events:none !important;
    z-index:1198 !important;
  }
  body.mobile-nav-ready nav{
    bottom:0 !important;
    z-index:1200 !important;
    overflow:visible !important;
    background:var(--nav-bg) !important;
    padding-bottom:max(8px, env(safe-area-inset-bottom)) !important;
    box-sizing:border-box !important;
  }
  body.mobile-nav-ready nav::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:calc(-1 * max(34px, env(safe-area-inset-bottom)));
    height:max(34px, env(safe-area-inset-bottom));
    background:var(--nav-bg);
    pointer-events:none;
    z-index:-1;
  }
  body.mobile-nav-ready .page-wrap,
  body.mobile-nav-ready main,
  body.mobile-nav-ready .container,
  body.mobile-nav-ready.liquid-page .page-wrap,
  body.mobile-nav-ready.search-liquid .page-wrap,
  body.mobile-nav-ready.recs-liquid .page-wrap,
  body.mobile-nav-ready.social-liquid .page-wrap,
  body.mobile-nav-ready.match-liquid .page-wrap,
  body.mobile-nav-ready.profile-redesign .page-wrap,
  body.mobile-nav-ready.profile-redesign.user-liquid .page-wrap,
  body.mobile-nav-ready.user-liquid.profile-redesign .page-wrap{
    padding-bottom:calc(6.2rem + max(12px, env(safe-area-inset-bottom))) !important;
  }
}
\n\n/* 2026-07 mobile navigation, social search, TMDB pill */\n.media-type-score-row{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}\n.media-tmdb-pill{display:inline-flex;align-items:center;border:1px solid var(--border2);background:var(--surface2);color:var(--text2);border-radius:999px;padding:.28rem .58rem;font-size:.72rem;font-weight:800;line-height:1}\n.social-liquid .social-titleblock{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}\n.social-liquid .social-title-row{display:inline-flex;align-items:center;justify-content:center;gap:.42rem}\n.social-liquid .social-title-row .page-heading{margin:0}\n.social-liquid .social-search-toggle{position:static!important;transform:none!important;right:auto!important;top:auto!important;flex:0 0 auto}\n.social-liquid .social-search-toggle:hover{transform:translateY(-1px)!important}\n.social-notifications-section{margin-bottom:1rem}\n.social-notification-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.65rem}\n.social-notification-row .notification-item{padding:.8rem;border:1px solid var(--border);border-radius:16px;background:var(--surface2);min-width:0}\n\n@media(max-width:700px){\n  body.mobile-nav-ready nav .nav-tabs{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:4px!important}\n  body.mobile-nav-ready nav .nav-tab{font-size:1.25rem!important;padding:0!important;position:relative!important}\n  body.mobile-nav-ready nav .mobile-search-tab{display:flex!important}\n  body.mobile-nav-ready > .nav-right{display:none!important}\n  body.mobile-nav-ready > .nav-right.mobile-settings-only{display:flex!important;padding:5px!important}\n  body.mobile-nav-ready > .nav-right.mobile-settings-only > *:not(#nav-email):not(#settings-panel){display:none!important}\n  body.mobile-nav-ready > .nav-right.mobile-settings-only #nav-email{display:inline-flex!important;font-size:1rem!important;color:var(--text)!important}\n  body.mobile-nav-ready > .nav-right.mobile-settings-only #nav-email::before{content:none!important}\n  body.mobile-nav-ready .mobile-social-badge{position:absolute!important;top:3px!important;right:calc(50% - 17px)!important}\n  #global-inbox-modal.modal-overlay{align-items:center!important;justify-content:center!important;padding:1rem!important}\n  #global-inbox-modal .modal-card{margin:auto!important;max-height:min(72dvh,620px)!important}\n  .social-notification-row{display:flex;overflow-x:auto;gap:.65rem;padding-bottom:.2rem;scroll-snap-type:x proximity}\n  .social-notification-row .notification-item{min-width:min(86vw,340px);scroll-snap-align:start}\n}\n

/* 2026-07 compact monochrome mobile tab bar */
@media (max-width:700px){
  /* Remove the old bell/profile controls from the top-right on every mobile page.
     Profile keeps only the standalone settings gear. */
  body.mobile-nav-ready > .nav-right:not(.mobile-settings-only){display:none!important}
  body.mobile-nav-ready > .nav-right.mobile-settings-only > #global-inbox-btn,
  body.mobile-nav-ready > .nav-right.mobile-settings-only > .inbox-nav-btn,
  body.mobile-nav-ready > .nav-right.mobile-settings-only > .nav-search-btn{
    display:none!important;
  }

  body.mobile-nav-ready nav{
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  body.mobile-nav-ready nav .nav-tabs{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:2px!important;
    padding:6px 8px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  body.mobile-nav-ready nav .nav-tab{
    min-width:0!important;
    width:100%!important;
    max-width:none!important;
    height:52px!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    font-size:0!important;
    line-height:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:transparent!important;
    border-radius:18px!important;
  }
  body.mobile-nav-ready nav .nav-tab::before{
    content:"";
    display:block;
    width:25px;
    height:25px;
    background-color:var(--accent)!important;
    opacity:.72;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;
  }
  body.mobile-nav-ready nav .nav-tab.active{
    background:color-mix(in srgb,var(--accent) 18%,var(--surface2))!important;
    border-color:color-mix(in srgb,var(--accent) 70%,var(--border2))!important;
  }
  body.mobile-nav-ready nav .nav-tab.active::before{
    opacity:1;
    filter:drop-shadow(0 0 7px color-mix(in srgb,var(--accent) 55%,transparent));
  }
  body.mobile-nav-ready nav .nav-tab[data-page="home"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 10.7 12 3l9 7.7V21h-6v-6H9v6H3V10.7Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 10.7 12 3l9 7.7V21h-6v-6H9v6H3V10.7Z'/%3E%3C/svg%3E");
  }
  body.mobile-nav-ready nav .nav-tab[data-page="search"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10.5 3a7.5 7.5 0 1 0 4.7 13.35L20.85 22 22 20.85l-5.65-5.65A7.5 7.5 0 0 0 10.5 3Zm0 2a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10.5 3a7.5 7.5 0 1 0 4.7 13.35L20.85 22 22 20.85l-5.65-5.65A7.5 7.5 0 0 0 10.5 3Zm0 2a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z'/%3E%3C/svg%3E");
  }
  body.mobile-nav-ready nav .nav-tab[data-page="recs"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.2 3.2A4.2 4.2 0 0 0 4 7.4c0 .55.1 1.08.3 1.57A4.5 4.5 0 0 0 5.5 17.8V20h5v-7.7H8.7v-2h1.8V7.4a2.3 2.3 0 0 0-2.3-2.2Zm7.6 0a2.3 2.3 0 0 0-2.3 2.2v2.9h1.8v2h-1.8V20h5v-2.2A4.5 4.5 0 0 0 19.7 9 4.2 4.2 0 0 0 15.8 3.2ZM11 4h2v16h-2V4Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.2 3.2A4.2 4.2 0 0 0 4 7.4c0 .55.1 1.08.3 1.57A4.5 4.5 0 0 0 5.5 17.8V20h5v-7.7H8.7v-2h1.8V7.4a2.3 2.3 0 0 0-2.3-2.2Zm7.6 0a2.3 2.3 0 0 0-2.3 2.2v2.9h1.8v2h-1.8V20h5v-2.2A4.5 4.5 0 0 0 19.7 9 4.2 4.2 0 0 0 15.8 3.2ZM11 4h2v16h-2V4Z'/%3E%3C/svg%3E");
  }
  body.mobile-nav-ready nav .nav-tab[data-page="social"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a6 6 0 0 0-6 6v3.5L3.5 16v1.5h17V16L18 11.5V8a6 6 0 0 0-6-6Zm0 20a3 3 0 0 0 2.83-2H9.17A3 3 0 0 0 12 22Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a6 6 0 0 0-6 6v3.5L3.5 16v1.5h17V16L18 11.5V8a6 6 0 0 0-6-6Zm0 20a3 3 0 0 0 2.83-2H9.17A3 3 0 0 0 12 22Z'/%3E%3C/svg%3E");
  }
  body.mobile-nav-ready nav .nav-tab[data-page="profile"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5C21 16.5 17 14 12 14Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5C21 16.5 17 14 12 14Z'/%3E%3C/svg%3E");
  }
}

/* 2026-07-13 definitive five-item mobile navigation fix */
@media (max-width:700px){
  body.mobile-nav-ready nav{
    display:block!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    max-width:none!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }
  body.mobile-nav-ready nav .nav-tabs{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    gap:2px!important;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  body.mobile-nav-ready nav .nav-tab,
  body.mobile-nav-ready nav .mobile-search-tab{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:0!important;
    width:100%!important;
    max-width:none!important;
    height:50px!important;
    margin:0!important;
    padding:0!important;
    font-size:1.35rem!important;
    line-height:1!important;
    color:var(--text)!important;
    overflow:hidden!important;
    border-radius:17px!important;
    white-space:nowrap!important;
  }
  body.mobile-nav-ready nav .nav-tab::before{
    content:none!important;
    display:none!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  body.mobile-nav-ready nav .nav-tab.active{
    color:var(--accent)!important;
    background:color-mix(in srgb,var(--accent) 16%,var(--surface2))!important;
    border-color:color-mix(in srgb,var(--accent) 62%,var(--border2))!important;
  }
  /* Hide every old top-right mobile control. Profile may expose only its gear. */
  body.mobile-nav-ready > .nav-right{display:none!important}
  body.mobile-nav-ready > .nav-right.mobile-settings-only{
    display:flex!important;
  }
  body.mobile-nav-ready > .nav-right.mobile-settings-only > *:not(#nav-email):not(#settings-panel){
    display:none!important;
  }
  body.mobile-nav-ready > .nav-right.mobile-settings-only #nav-email{
    display:inline-flex!important;
  }
  body.mobile-nav-ready > .nav-right.mobile-settings-only #global-inbox-btn,
  body.mobile-nav-ready > .nav-right.mobile-settings-only .inbox-nav-btn,
  body.mobile-nav-ready > .nav-right.mobile-settings-only .nav-search-btn{
    display:none!important;
  }
}


/* 2026-07-13 mobile nav drag + social mobile cleanup */
@media (max-width:700px){
  body.mobile-nav-ready nav .nav-tabs{
    position:relative!important;
    isolation:isolate;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
    --mobile-nav-slider-left:8px;
    --mobile-nav-slider-width:calc((100% - 24px)/5);
  }
  body.mobile-nav-ready nav .nav-tabs::before{
    content:"";
    position:absolute;
    z-index:0;
    left:var(--mobile-nav-slider-left);
    top:7px;
    width:var(--mobile-nav-slider-width);
    height:50px;
    border-radius:18px;
    border:1px solid color-mix(in srgb,var(--accent) 65%,var(--border2));
    background:color-mix(in srgb,var(--accent) 17%,var(--surface2));
    box-shadow:0 8px 20px rgba(0,0,0,.15);
    transform:translateZ(0);
    transition:left .24s cubic-bezier(.22,.8,.28,1),width .24s cubic-bezier(.22,.8,.28,1),background .18s ease;
    pointer-events:none;
  }
  body.mobile-nav-ready nav .nav-tabs.dragging::before{
    transition:none!important;
  }
  body.mobile-nav-ready nav .nav-tab,
  body.mobile-nav-ready nav .mobile-search-tab{
    position:relative!important;
    z-index:1!important;
    background:transparent!important;
    border-color:transparent!important;
    font-size:0!important;
    color:transparent!important;
    overflow:visible!important;
  }
  body.mobile-nav-ready nav .nav-tab::before,
  body.mobile-nav-ready nav .mobile-search-tab::before{
    content:""!important;
    display:block!important;
    width:27px!important;
    height:27px!important;
    background:var(--accent)!important;
    opacity:.72;
    filter:none!important;
    -webkit-mask-repeat:no-repeat!important;
    mask-repeat:no-repeat!important;
    -webkit-mask-position:center!important;
    mask-position:center!important;
    -webkit-mask-size:contain!important;
    mask-size:contain!important;
  }
  body.mobile-nav-ready nav .nav-tab.active::before{
    opacity:1;
    filter:drop-shadow(0 0 7px color-mix(in srgb,var(--accent) 55%,transparent))!important;
  }
  body.mobile-nav-ready nav .nav-tab[data-page="home"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 10.7 12 3l9 7.7V21h-6v-6H9v6H3V10.7Z'/%3E%3C/svg%3E")!important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 10.7 12 3l9 7.7V21h-6v-6H9v6H3V10.7Z'/%3E%3C/svg%3E")!important;
  }
  body.mobile-nav-ready nav .nav-tab[data-page="search"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10.5 3a7.5 7.5 0 1 0 4.7 13.35L20.85 22 22 20.85l-5.65-5.65A7.5 7.5 0 0 0 10.5 3Zm0 2a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z'/%3E%3C/svg%3E")!important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10.5 3a7.5 7.5 0 1 0 4.7 13.35L20.85 22 22 20.85l-5.65-5.65A7.5 7.5 0 0 0 10.5 3Zm0 2a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z'/%3E%3C/svg%3E")!important;
  }
  body.mobile-nav-ready nav .nav-tab[data-page="recs"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.2 3.2A4.2 4.2 0 0 0 4 7.4c0 .55.1 1.08.3 1.57A4.5 4.5 0 0 0 5.5 17.8V20h5v-7.7H8.7v-2h1.8V7.4a2.3 2.3 0 0 0-2.3-2.2Zm7.6 0a2.3 2.3 0 0 0-2.3 2.2v2.9h1.8v2h-1.8V20h5v-2.2A4.5 4.5 0 0 0 19.7 9 4.2 4.2 0 0 0 15.8 3.2ZM11 4h2v16h-2V4Z'/%3E%3C/svg%3E")!important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.2 3.2A4.2 4.2 0 0 0 4 7.4c0 .55.1 1.08.3 1.57A4.5 4.5 0 0 0 5.5 17.8V20h5v-7.7H8.7v-2h1.8V7.4a2.3 2.3 0 0 0-2.3-2.2Zm7.6 0a2.3 2.3 0 0 0-2.3 2.2v2.9h1.8v2h-1.8V20h5v-2.2A4.5 4.5 0 0 0 19.7 9 4.2 4.2 0 0 0 15.8 3.2ZM11 4h2v16h-2V4Z'/%3E%3C/svg%3E")!important;
  }
  body.mobile-nav-ready nav .nav-tab[data-page="social"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a6 6 0 0 0-6 6v3.5L3.5 16v1.5h17V16L18 11.5V8a6 6 0 0 0-6-6Zm0 20a3 3 0 0 0 2.83-2H9.17A3 3 0 0 0 12 22Z'/%3E%3C/svg%3E")!important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a6 6 0 0 0-6 6v3.5L3.5 16v1.5h17V16L18 11.5V8a6 6 0 0 0-6-6Zm0 20a3 3 0 0 0 2.83-2H9.17A3 3 0 0 0 12 22Z'/%3E%3C/svg%3E")!important;
  }
  body.mobile-nav-ready nav .nav-tab[data-page="profile"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5C21 16.5 17 14 12 14Z'/%3E%3C/svg%3E")!important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5C21 16.5 17 14 12 14Z'/%3E%3C/svg%3E")!important;
  }

  .social-liquid .social-hero-card{
    padding-right:1rem!important;
  }
  .social-liquid .social-title-row{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:.45rem!important;
    width:auto!important;
    margin-inline:auto!important;
  }
  .social-liquid .social-search-toggle,
  .social-liquid .social-hero-card .social-search-toggle{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    margin:0!important;
    flex:0 0 34px!important;
  }
  .social-liquid .social-shell{
    display:flex!important;
    flex-direction:column!important;
    gap:.65rem!important;
  }
  .social-liquid .social-side{
    order:0!important;
    margin:0!important;
  }
  .social-liquid .social-main{
    order:1!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:.55rem!important;
  }
  .social-liquid .activity-filter-row{
    order:0!important;
    margin:0!important;
    padding:5px!important;
    background:color-mix(in srgb,var(--surface) 92%,transparent)!important;
    border:1px solid var(--border)!important;
    border-radius:20px!important;
    box-shadow:0 10px 26px rgba(0,0,0,.14)!important;
    backdrop-filter:blur(14px) saturate(120%)!important;
    -webkit-backdrop-filter:blur(14px) saturate(120%)!important;
  }
  .social-liquid #activity-section{order:1!important;margin-top:0!important}
  .social-liquid .social-notifications-section{order:-1!important;margin:0!important}
}

/* Final media/social/mobile-nav corrections */
.media-type-score-row .media-tmdb-pill{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--border2);
  background:var(--input-bg);
  color:var(--text2);
  padding:5px 10px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em;
  margin-bottom:.65rem;
}
.mini-media-row.similar-media-trigger{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
/* Hide only legacy/page-level media back controls. The global mobile back remains. */
.media-page-wrap .smart-back-row,
.media-page-wrap .page-back-row,
.media-page-wrap .media-back-btn,
.media-page-wrap [data-page-back],
body:has(.media-page-wrap) .smart-back-row{
  display:none!important;
}
@media(max-width:700px){
  .media-page-wrap .media-panel .stars,
  .media-page-wrap .modal-user-rating .stars{gap:.08rem!important;}
  .media-page-wrap .media-panel .star-wrap,
  .media-page-wrap .modal-user-rating .star-wrap{
    font-size:2.05rem!important;
    min-width:40px!important;
    min-height:40px!important;
    padding:3px 2px!important;
  }
  /* One selector only: remove the old per-tab active shell and let the slider own it. */
  body.mobile-nav-ready nav .nav-tabs .nav-tab,
  body.mobile-nav-ready nav .nav-tabs .nav-tab.active,
  body.mobile-nav-ready nav .nav-tabs .mobile-search-tab,
  body.mobile-nav-ready nav .nav-tabs .mobile-search-tab.active{
    background:transparent!important;
    border:1px solid transparent!important;
    box-shadow:none!important;
    outline:none!important;
  }
  body.mobile-nav-ready nav .nav-tabs{
    overflow:visible!important;
    padding:6px 8px calc(9px + env(safe-area-inset-bottom))!important;
  }
  body.mobile-nav-ready nav .nav-tabs::before{
    top:5px!important;
    height:48px!important;
    box-sizing:border-box!important;
  }
}


/* 2026-07-13 definitive profile, social, and mobile-nav stabilization */
@media (min-width:761px){
  body.profile-redesign .profile-top-row{
    align-items:stretch!important;
    grid-auto-rows:1fr!important;
  }
  body.profile-redesign .profile-top-row > .profile-hero,
  body.profile-redesign .profile-top-row > .profile-extras{
    height:100%!important;
    min-height:0!important;
    align-self:stretch!important;
    margin:0!important;
  }
  body.profile-redesign .profile-top-row > .profile-extras > .profile-top10-strip{
    height:100%!important;
    min-height:0!important;
    margin:0!important;
  }
}

@media (max-width:700px){
  /* Hide the slider until its active-tab geometry is known, preventing the left flash. */
  body.mobile-nav-ready nav .nav-tabs::before{
    opacity:0!important;
  }
  body.mobile-nav-ready nav .nav-tabs.slider-ready::before{
    opacity:1!important;
  }
  body.mobile-nav-ready nav .nav-tabs.dragging::before{
    opacity:1!important;
  }

  /* Keep the slider fully inside the bar. */
  body.mobile-nav-ready nav .nav-tabs{
    padding:5px 8px calc(11px + env(safe-area-inset-bottom))!important;
    overflow:visible!important;
  }
  body.mobile-nav-ready nav .nav-tabs::before{
    top:5px!important;
    height:48px!important;
    box-sizing:border-box!important;
  }

  /* Social: center the actual word Social, then pin search immediately after it. */
  .social-liquid .social-titleblock{
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }
  .social-liquid .social-title-row{
    position:relative!important;
    display:block!important;
    width:max-content!important;
    max-width:calc(100% - 48px)!important;
    margin:0 auto!important;
    transform:none!important;
  }
  .social-liquid .social-title-row .page-heading{
    margin:0!important;
    text-align:center!important;
  }
  .social-liquid .social-title-row .social-search-toggle{
    position:absolute!important;
    left:calc(100% + .42rem)!important;
    right:auto!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    margin:0!important;
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
  }
  .social-liquid .social-title-row .social-search-toggle:hover{
    transform:translateY(calc(-50% - 1px))!important;
  }

  /* Remove all artificial space between Friends, filters, and feed. */
  .social-liquid .social-shell{
    gap:.35rem!important;
  }
  .social-liquid .social-main{
    gap:.35rem!important;
    margin:0!important;
    padding:0!important;
  }
  .social-liquid .social-search-panel.is-collapsed,
  .social-liquid #user-result:empty,
  .social-liquid .social-notifications-section[hidden]{
    display:none!important;
    margin:0!important;
    padding:0!important;
    min-height:0!important;
  }
  .social-liquid .social-side,
  .social-liquid .side-friends{
    margin:0!important;
  }
  .social-liquid .activity-filter-row{
    margin:0!important;
    padding:6px!important;
    background:var(--surface)!important;
    background-image:none!important;
    border:1px solid var(--border)!important;
    border-radius:20px!important;
    box-shadow:0 12px 30px rgba(0,0,0,.2)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    opacity:1!important;
  }
  .social-liquid .activity-filter-btn{
    background:var(--surface2)!important;
  }
  .social-liquid .activity-filter-btn.active{
    background:var(--accent)!important;
  }
  .social-liquid #activity-section{
    margin:0!important;
    padding:0!important;
  }
}

/* 2026-07-13 final mobile history/nav/modal/social cleanup */
@media (max-width:700px){
  /* Let CSS place the slider on the correct tab before JS runs, eliminating the left flash. */
  body.mobile-nav-ready nav .nav-tabs:has(.nav-tab[data-page="home"].active){--mobile-nav-slider-left:8px;--mobile-nav-slider-width:calc((100% - 16px)/5)}
  body.mobile-nav-ready nav .nav-tabs:has(.nav-tab[data-page="search"].active){--mobile-nav-slider-left:calc(8px + (100% - 16px)/5);--mobile-nav-slider-width:calc((100% - 16px)/5)}
  body.mobile-nav-ready nav .nav-tabs:has(.nav-tab[data-page="recs"].active){--mobile-nav-slider-left:calc(8px + 2 * ((100% - 16px)/5));--mobile-nav-slider-width:calc((100% - 16px)/5)}
  body.mobile-nav-ready nav .nav-tabs:has(.nav-tab[data-page="social"].active){--mobile-nav-slider-left:calc(8px + 3 * ((100% - 16px)/5));--mobile-nav-slider-width:calc((100% - 16px)/5)}
  body.mobile-nav-ready nav .nav-tabs:has(.nav-tab[data-page="profile"].active){--mobile-nav-slider-left:calc(8px + 4 * ((100% - 16px)/5));--mobile-nav-slider-width:calc((100% - 16px)/5)}
  body.mobile-nav-ready nav .nav-tabs:has(.nav-tab.active)::before{opacity:1!important}

  /* The old top navigation is gone; reclaim that vertical space on every major page. */
  body.mobile-nav-ready.home-dashboard .page-wrap,
  body.mobile-nav-ready.recs-liquid .page-wrap,
  body.mobile-nav-ready.social-liquid .page-wrap,
  body.mobile-nav-ready.stats-liquid .page-wrap,
  body.mobile-nav-ready.reviews-liquid .page-wrap,
  body.mobile-nav-ready.profile-redesign .page-wrap,
  body.mobile-nav-ready.user-liquid .page-wrap,
  body.mobile-nav-ready.liquid-page:not(.search-liquid):not(.match-liquid) .page-wrap,
  body.mobile-nav-ready.liquid-page > main,
  body.mobile-nav-ready.liquid-page > .container{
    padding-top:.25rem!important;
    margin-top:0!important;
  }

  /* Keep the film-card close control visible while the user scrolls the card. */
  #film-modal.open .modal-close,
  #film-modal[style*="display: flex"] .modal-close,
  #film-modal[style*="display:flex"] .modal-close{
    position:fixed!important;
    top:calc(env(safe-area-inset-top) + 4.3rem)!important;
    right:1rem!important;
    width:40px!important;
    height:40px!important;
    font-size:1.05rem!important;
    z-index:5005!important;
    box-shadow:0 8px 24px rgba(0,0,0,.35)!important;
  }

  /* Social: remove the artificial gap and make the filter shell fully opaque/readable. */
  .social-liquid .social-shell{
    display:flex!important;
    flex-direction:column!important;
    gap:.35rem!important;
  }
  .social-liquid .social-side,
  .social-liquid .side-friends,
  .social-liquid .social-main{
    margin:0!important;
  }
  .social-liquid .activity-filter-row{
    margin:.05rem 0 .3rem!important;
    padding:6px!important;
    background:var(--surface)!important;
    border:1px solid var(--border)!important;
    box-shadow:0 12px 28px rgba(0,0,0,.22)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    opacity:1!important;
  }
  .social-liquid .activity-filter-btn{
    background:var(--surface2)!important;
  }
  .social-liquid .activity-filter-btn.active{
    background:var(--accent)!important;
  }
  .social-liquid #activity-section{margin-top:0!important}
}

/* 2026-07-13 social mobile filter visibility final */
@media (max-width:760px){
  .social-liquid .activity-filter-row{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:5px!important;
    width:100%!important;
    box-sizing:border-box!important;
    margin:0 0 .35rem!important;
    padding:6px!important;
    background:#17181c!important;
    background-image:none!important;
    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:19px!important;
    box-shadow:0 10px 26px rgba(0,0,0,.28)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    opacity:1!important;
    overflow:hidden!important;
  }
  [data-theme="light"] .social-liquid .activity-filter-row{
    background:#d9dce3!important;
    border-color:rgba(0,0,0,.16)!important;
    box-shadow:0 8px 20px rgba(0,0,0,.12)!important;
  }
  .social-liquid .activity-filter-btn{
    min-width:0!important;
    width:100%!important;
    height:42px!important;
    padding:.35rem .08rem!important;
    margin:0!important;
    border-radius:999px!important;
    background:#25262b!important;
    color:var(--text2)!important;
    font-size:clamp(.5rem,2.55vw,.68rem)!important;
    line-height:1!important;
    letter-spacing:-.025em!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  [data-theme="light"] .social-liquid .activity-filter-btn{
    background:#c9cdd5!important;
    color:#303238!important;
  }
  .social-liquid .activity-filter-btn.active{
    background:var(--accent)!important;
    color:var(--accent-btn-text)!important;
    border-color:var(--accent)!important;
  }
}


/* 2026-07-13 requested profile/modal stability pass */
.modal-profile-link{color:var(--text)!important;text-decoration:none!important;font-weight:850!important;cursor:pointer!important;}
.modal-profile-link:hover{color:var(--accent)!important;text-decoration:underline!important;text-underline-offset:3px!important;}
@media(max-width:760px){
  /* Fit all five Top 5 cards in one non-scrollable mobile frame. */
  body.profile-redesign .profile-top-row .profile-carousel-row,
  body.profile-redesign.user-liquid .profile-top-row .profile-carousel-row{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
    max-width:none!important;
    overflow:hidden!important;
    padding:.1rem 0 .15rem!important;
    margin:0!important;
  }
  body.profile-redesign .profile-top-row .profile-carousel-item,
  body.profile-redesign.user-liquid .profile-top-row .profile-carousel-item{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    flex:none!important;
  }
  body.profile-redesign .profile-top-row .profile-carousel-art,
  body.profile-redesign .profile-top-row .profile-carousel-art.sq,
  body.profile-redesign.user-liquid .profile-top-row .profile-carousel-art,
  body.profile-redesign.user-liquid .profile-top-row .profile-carousel-art.sq{
    width:100%!important;
    max-width:100%!important;
    aspect-ratio:2/3!important;
    border-radius:10px!important;
  }
  body.profile-redesign .profile-top-row .profile-carousel-title,
  body.profile-redesign.user-liquid .profile-top-row .profile-carousel-title{
    font-size:.58rem!important;
    line-height:1.12!important;
    margin-top:.3rem!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.profile-redesign .profile-top-row .profile-carousel-stars,
  body.profile-redesign.user-liquid .profile-top-row .profile-carousel-stars{
    font-size:.58rem!important;
    line-height:1!important;
    letter-spacing:-.07em!important;
    white-space:nowrap!important;
  }
  body.profile-redesign:not(.user-liquid) .profile-top-row > .profile-extras{
    margin-top:.75rem!important;
  }
}

/* 2026-07-13 mobile safe-top spacing pass
   Keep primary page content below the iOS status/back-button zone without
   restoring the removed desktop-style top navigation gap. */
@media (max-width:700px){
  /* Home has no back button, so it only needs a modest visual drop. */
  body.mobile-nav-ready.home-dashboard .page-wrap,
  body.mobile-nav-ready.home-liquid .page-wrap,
  body.mobile-nav-ready.home-page .page-wrap{
    padding-top:calc(env(safe-area-inset-top, 0px) + 1.35rem)!important;
  }

  /* Search stays vertically composed, but sits a little lower and clears the status area. */
  body.mobile-nav-ready.search-liquid .search-page-wrap{
    padding-top:calc(env(safe-area-inset-top, 0px) + 2.25rem)!important;
    padding-bottom:calc(6.2rem + env(safe-area-inset-bottom, 0px))!important;
  }
  body.mobile-nav-ready.search-liquid .search-center-wrap{
    transform:translateY(1.15rem);
  }

  /* Pages with the universal back button need a real safe header lane. */
  body.mobile-nav-ready.recs-liquid .page-wrap,
  body.mobile-nav-ready.social-liquid .page-wrap,
  body.mobile-nav-ready.stats-liquid .page-wrap,
  body.mobile-nav-ready.progress-liquid .page-wrap,
  body.mobile-nav-ready.reviews-liquid .page-wrap,
  body.mobile-nav-ready.personality-liquid .page-wrap,
  body.mobile-nav-ready.profile-redesign .page-wrap,
  body.mobile-nav-ready.user-liquid.profile-redesign .page-wrap,
  body.mobile-nav-ready.profile-redesign.user-liquid .page-wrap{
    padding-top:calc(env(safe-area-inset-top, 0px) + 5.15rem)!important;
  }

  /* Recs has its own center wrapper; keep its first controls below the safe header lane. */
  body.mobile-nav-ready.recs-liquid .recs-center-wrap{
    min-height:auto!important;
    justify-content:flex-start!important;
    padding-top:0!important;
  }

  /* Social hero should be fully visible before Friends begins. */
  body.mobile-nav-ready.social-liquid .social-hero-card{
    margin-top:0!important;
  }
}


/* 2026-07 final profile / compare / mobile polish */
:root{
  --solid-card-bg: color-mix(in srgb, var(--surface) 94%, #08090c 6%);
  --solid-card-bg-2: color-mix(in srgb, var(--surface2) 94%, #07080a 6%);
}
body.profile-redesign .profile-hero,
body.user-liquid .profile-hero,
body.profile-redesign .favorites-panel,
body.user-liquid .favorites-panel,
.compare-liquid .pf-hero,
.compare-liquid .pf-stats-row .pf-stat,
.compare-liquid .pf-section{
  background:var(--solid-card-bg)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-color:var(--border2)!important;
}
.compare-liquid .pf-compare-card,
.compare-liquid .pf-card,
.compare-liquid .pf-bars > div{
  background:var(--solid-card-bg-2)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.activity-panel-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;margin-bottom:.9rem}
.activity-panel-toolbar-main{min-width:0}
.activity-panel-filter{appearance:none;border:1px solid var(--border2);background:var(--input-bg);color:var(--text);font-weight:850;font-size:.78rem;border-radius:12px;padding:.55rem 2rem .55rem .72rem;min-width:92px;cursor:pointer}
.activity-panel-search{margin:0 0 .9rem;padding:6px;border:1px solid var(--border2);border-radius:16px;background:var(--input-bg)}
.activity-panel-search input{width:100%;border:0!important;outline:0!important;background:transparent!important;color:var(--text)!important;font-size:.9rem;padding:.72rem .8rem!important;box-shadow:none!important}
.activity-panel-search input::placeholder{color:var(--muted)}
.activity-panel-empty{display:none;padding:1rem;text-align:center;color:var(--muted);font-size:.82rem}
.stats-page-title.stats-accent-pulse{
  background:linear-gradient(135deg,var(--text) 0%,var(--accent) 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
  animation:recsPulse 3.5s ease-in-out infinite!important;
  display:inline-block!important;
}
@media(max-width:700px){
  body.user-liquid .friend-action-row{margin-bottom:.45rem!important}
  body.user-liquid #stats-action-row{margin-top:0!important}
  .compare-liquid .page-wrap{padding-top:calc(env(safe-area-inset-top,0px) + 4.6rem)!important}
  .activity-panel-toolbar{align-items:center}
  .activity-panel-filter{flex:0 0 auto}
}


/* 2026-07-14 permanent solid-card lock
   Profile/User cards must stay dark and mostly opaque. Do not replace with
   translucent glass backgrounds unless explicitly requested. */
body.profile-redesign .profile-hero,
body.profile-redesign.user-liquid .profile-hero,
body.user-liquid .profile-hero,
body.profile-redesign .favorites-panel,
body.profile-redesign.user-liquid .favorites-panel,
body.user-liquid .favorites-panel{
  background:#17181c !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.34) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:1 !important;
}
body.profile-redesign .activity-panel-toolbar,
body.profile-redesign.user-liquid .activity-panel-toolbar,
body.user-liquid .activity-panel-toolbar,
body.profile-redesign .activity-panel-search,
body.profile-redesign.user-liquid .activity-panel-search,
body.user-liquid .activity-panel-search{
  background:#202126 !important;
  background-image:none !important;
  border-color:rgba(255,255,255,.13) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:1 !important;
}
body.profile-redesign .activity-panel-filter,
body.profile-redesign.user-liquid .activity-panel-filter,
body.user-liquid .activity-panel-filter,
body.profile-redesign .activity-panel-search input,
body.profile-redesign.user-liquid .activity-panel-search input,
body.user-liquid .activity-panel-search input{
  background:#26272d !important;
  background-image:none !important;
  color:#f5f5f7 !important;
  border-color:rgba(255,255,255,.14) !important;
  opacity:1 !important;
}
[data-theme="light"] body.profile-redesign .profile-hero,
[data-theme="light"] body.profile-redesign.user-liquid .profile-hero,
[data-theme="light"] body.user-liquid .profile-hero,
[data-theme="light"] body.profile-redesign .favorites-panel,
[data-theme="light"] body.profile-redesign.user-liquid .favorites-panel,
[data-theme="light"] body.user-liquid .favorites-panel{
  background:#e1e3e8 !important;
  border-color:rgba(0,0,0,.14) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.14) !important;
}
[data-theme="light"] body.profile-redesign .activity-panel-toolbar,
[data-theme="light"] body.profile-redesign.user-liquid .activity-panel-toolbar,
[data-theme="light"] body.user-liquid .activity-panel-toolbar,
[data-theme="light"] body.profile-redesign .activity-panel-search,
[data-theme="light"] body.profile-redesign.user-liquid .activity-panel-search,
[data-theme="light"] body.user-liquid .activity-panel-search{
  background:#d5d8df !important;
  border-color:rgba(0,0,0,.14) !important;
}
[data-theme="light"] body.profile-redesign .activity-panel-filter,
[data-theme="light"] body.profile-redesign.user-liquid .activity-panel-filter,
[data-theme="light"] body.user-liquid .activity-panel-filter,
[data-theme="light"] body.profile-redesign .activity-panel-search input,
[data-theme="light"] body.profile-redesign.user-liquid .activity-panel-search input,
[data-theme="light"] body.user-liquid .activity-panel-search input{
  background:#eef0f4 !important;
  color:#17181c !important;
  border-color:rgba(0,0,0,.14) !important;
}

/* 2026-07-14 permanent main-navigation card theme
   Home, Search, Recs, Social, and Profile/User use solid, dark, mostly opaque
   surfaces. Keep this block at the end so older glass rules cannot win. */
:root{
  --nav-page-card-solid:#17181c;
  --nav-page-card-solid-2:#202126;
  --nav-page-control-solid:#26272d;
  --nav-page-card-border:rgba(255,255,255,.14);
  --nav-page-card-shadow:0 18px 46px rgba(0,0,0,.34);
}

/* Recs */
body.recs-liquid .card,
body.recs-liquid .rec-card,
body.recs-liquid .ph-card,
body.recs-liquid .refine-input-wrap,
body.recs-liquid .review-adjust-wrap,
body.recs-liquid .empty-state,
body.recs-liquid .polished-empty{
  background:var(--nav-page-card-solid)!important;
  background-image:none!important;
  border-color:var(--nav-page-card-border)!important;
  box-shadow:var(--nav-page-card-shadow)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  opacity:1!important;
}
body.recs-liquid .rec-prompt-editable,
body.recs-liquid .count-select,
body.recs-liquid .review-adjust-row textarea,
body.recs-liquid .refine-row input,
body.recs-liquid .refine-row textarea{
  background:var(--nav-page-control-solid)!important;
  background-image:none!important;
  border-color:var(--nav-page-card-border)!important;
  opacity:1!important;
}

/* Search */
body.search-liquid .search-hero,
body.search-liquid .discover-section,
body.search-liquid .search-result,
body.search-liquid .user-card,
body.search-liquid .search-empty-note,
body.search-liquid .poster-card{
  background:var(--nav-page-card-solid)!important;
  background-image:none!important;
  border-color:var(--nav-page-card-border)!important;
  box-shadow:var(--nav-page-card-shadow)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  opacity:1!important;
}
body.search-liquid .search-tabs,
body.search-liquid .search-input-wrap,
body.search-liquid .genre-chip,
body.search-liquid .quick-chip{
  background:var(--nav-page-card-solid-2)!important;
  background-image:none!important;
  border-color:var(--nav-page-card-border)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  opacity:1!important;
}

/* Social */
body.social-liquid .social-hero-card,
body.social-liquid .social-panel,
body.social-liquid .side-friends,
body.social-liquid .social-main,
body.social-liquid .feed-card,
body.social-liquid .review-feed-card,
body.social-liquid .friend-pill,
body.social-liquid .social-notifications-section,
body.social-liquid .social-notification-row,
body.social-liquid .skeleton-card,
body.social-liquid .user-card{
  background:var(--nav-page-card-solid)!important;
  background-image:none!important;
  border-color:var(--nav-page-card-border)!important;
  box-shadow:var(--nav-page-card-shadow)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  opacity:1!important;
}
body.social-liquid .activity-filter-row,
body.social-liquid .friends-show-all{
  background:var(--nav-page-card-solid-2)!important;
  background-image:none!important;
  border-color:var(--nav-page-card-border)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  opacity:1!important;
}

/* Home — lock existing design to the same opaque family. */
body.home-liquid .home-hero,
body.home-liquid .home-panel,
body.home-liquid .home-section,
body.home-liquid .home-pick-card,
body.home-liquid .home-score-card,
body.home-liquid .home-mini-stat,
body.home-liquid .home-feed-item,
body.home-liquid .home-row,
body.home-liquid .home-empty{
  background:var(--nav-page-card-solid)!important;
  background-image:none!important;
  border-color:var(--nav-page-card-border)!important;
  box-shadow:var(--nav-page-card-shadow)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  opacity:1!important;
}

/* Profile/User permanent lock, repeated here intentionally so this final block wins. */
body.profile-redesign .profile-hero,
body.profile-redesign.user-liquid .profile-hero,
body.user-liquid .profile-hero,
body.profile-redesign .favorites-panel,
body.profile-redesign.user-liquid .favorites-panel,
body.user-liquid .favorites-panel{
  background:var(--nav-page-card-solid)!important;
  background-image:none!important;
  border-color:var(--nav-page-card-border)!important;
  box-shadow:var(--nav-page-card-shadow)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  opacity:1!important;
}

/* Solid light-mode equivalents; never fall back to transparent glass. */
[data-theme="light"]{
  --nav-page-card-solid:#e1e3e8;
  --nav-page-card-solid-2:#d5d8df;
  --nav-page-control-solid:#eef0f4;
  --nav-page-card-border:rgba(0,0,0,.14);
  --nav-page-card-shadow:0 14px 34px rgba(0,0,0,.14);
}

/* ========================================================================
   UNIVERSAL HOME CARD SYSTEM — FINAL SOURCE OF TRUTH
   ========================================================================
   The Home dashboard card treatment is the permanent site-wide standard:
   dark, mostly opaque gradient cards with rounded borders and nested surfaces.
   This high-specificity final block intentionally wins over older page-local
   glass/transparent rules without requiring every HTML page to be rewritten.
   ======================================================================== */

:root{
  --recs-universal-card-bg:
    radial-gradient(circle at 18% -8%, color-mix(in srgb, var(--accent,#ff8c42) 17%, transparent), transparent 36%),
    radial-gradient(circle at 96% 4%, rgba(255,255,255,.055), transparent 30%),
    linear-gradient(135deg, rgba(24,24,27,.96), rgba(18,18,21,.92));
  --recs-universal-inner-bg:rgba(255,255,255,.065);
  --recs-universal-inner-hover:rgba(255,255,255,.09);
  --recs-universal-control-bg:rgba(255,255,255,.07);
  --recs-universal-border:rgba(255,255,255,.14);
  --recs-universal-border-strong:rgba(255,255,255,.2);
  --recs-universal-shadow:0 24px 80px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.075);
  --recs-universal-inner-shadow:0 10px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.045);
  --recs-universal-radius:28px;
  --recs-universal-inner-radius:18px;
}
[data-theme="light"]{
  --recs-universal-card-bg:
    radial-gradient(circle at 18% -8%, color-mix(in srgb, var(--accent,#ff8c42) 12%, transparent), transparent 36%),
    radial-gradient(circle at 96% 4%, rgba(255,255,255,.6), transparent 30%),
    linear-gradient(135deg, rgba(246,247,250,.98), rgba(226,229,235,.96));
  --recs-universal-inner-bg:rgba(255,255,255,.72);
  --recs-universal-inner-hover:rgba(255,255,255,.9);
  --recs-universal-control-bg:rgba(255,255,255,.78);
  --recs-universal-border:rgba(0,0,0,.14);
  --recs-universal-border-strong:rgba(0,0,0,.2);
  --recs-universal-shadow:0 18px 54px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.76);
  --recs-universal-inner-shadow:0 8px 22px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.68);
}

/* All semantic card/panel class tokens plus the site's card-like hero/section names. */
html body:not(#recs-card-theme-guard) :where(
  [class~="card"],
  [class$="-card"],
  [class*="-card "],
  [class~="panel"],
  [class$="-panel"],
  [class*="-panel "],
  .profile-hero,
  .pf-hero,
  .search-hero,
  .progress-hero,
  .dna-hero,
  .stats-page-hero,
  .recent-hero,
  .calendar-hero,
  .import-summary,
  .pf-section,
  .profile-section,
  .prof-subsection,
  .discover-section,
  .compare-section,
  .social-notifications-section,
  .empty-state,
  .empty-feed,
  .not-found
):not(.np-panel){
  background:var(--recs-universal-card-bg)!important;
  background-color:#141417!important;
  border:1px solid var(--recs-universal-border)!important;
  border-radius:var(--recs-universal-radius)!important;
  box-shadow:var(--recs-universal-shadow)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  opacity:1!important;
}

/* Cards nested inside a larger card use the quieter inner Home surface. */
html body:not(#recs-card-theme-guard) :where(
  [class~="card"],
  [class$="-card"],
  [class*="-card "],
  [class~="panel"],
  [class$="-panel"],
  [class*="-panel "],
  .profile-hero,
  .pf-hero,
  .search-hero,
  .progress-hero,
  .dna-hero,
  .stats-page-hero,
  .recent-hero,
  .calendar-hero,
  .import-summary,
  .pf-section,
  .profile-section,
  .prof-subsection,
  .discover-section,
  .compare-section,
  .social-notifications-section
) :where(
  [class~="card"],
  [class$="-card"],
  [class*="-card "],
  [class~="panel"],
  [class$="-panel"],
  [class*="-panel "]
){
  background:var(--recs-universal-inner-bg)!important;
  background-image:none!important;
  border:1px solid var(--recs-universal-border)!important;
  border-radius:var(--recs-universal-inner-radius)!important;
  box-shadow:var(--recs-universal-inner-shadow)!important;
}

/* Reuse Home's nested row style for lists, filters, chips and compact cards.
   IMPORTANT: calendar recent/detail rows and episode detail rows are intentionally
   excluded. They are hierarchy text, not cards/pills. */
html body:not(#recs-card-theme-guard) :where(
  .home-action,
  .home-mini-stat,
  .home-pick-card,
  .home-row,
  .home-taste-line,
  .home-feed-item,
  .home-tag,
  .profile-item,
  .recent-item,
  .profile-carousel-item,
  .prof-sub-row,
  .feed-media,
  .feed-like,
  .friend-pill,
  .social-item,
  .user-stat,
  .activity-filter-row,
  .activity-filter-btn,
  .friends-show-all,
  .inbox-item,
  .notification-item,
  .social-notification-row .notification-item,
  .search-tabs,
  .search-input-wrap,
  .search-result,
  .poster-card,
  .quick-chip,
  .genre-chip,
  .recent-chip,
  .user-media,
  .mini-media-row,
  .episode-comment,
  .calendar-summary-card,
  .calendar-day,
  .profile-filter-row,
  .review-filter-row,
  .activity-panel-search,
  .profile-search-box,
  .profile-tool-search-box,
  .top4-search-box,
  .compare-item,
  .review-framework-box,
  .ep-season,
  .similar-card,
  .result-card,
  .rec-card,
  .ph-card
){
  background:var(--recs-universal-inner-bg)!important;
  background-image:none!important;
  border:1px solid var(--recs-universal-border)!important;
  border-radius:var(--recs-universal-inner-radius)!important;
  box-shadow:var(--recs-universal-inner-shadow)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  opacity:1!important;
}

html body:not(#recs-card-theme-guard) :where(
  .home-action,
  .home-row,
  .home-pick-card,
  .profile-item,
  .recent-item,
  .friend-pill,
  .search-result,
  .poster-card,
  .quick-chip,
  .genre-chip,
  .recent-chip,
  .mini-media-row,
  .suggested-card,
  .match-rec-card
):hover{
  background:var(--recs-universal-inner-hover)!important;
  border-color:var(--recs-universal-border-strong)!important;
}

/* Keep controls readable inside the darker card surfaces. */
html body:not(#recs-card-theme-guard) :where(
  .activity-panel-filter,
  .activity-panel-search input,
  .profile-tool-search-box input,
  .profile-search-box input,
  .top4-search-box input,
  .search-input-wrap input,
  .search-box input,
  .count-select,
  .rec-prompt-editable,
  .review-adjust-row textarea,
  .refine-row input,
  .refine-row textarea
){
  background:var(--recs-universal-control-bg)!important;
  border-color:var(--recs-universal-border)!important;
  color:var(--text)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Social layout correction: never paint one large square card behind the feed. */
html body.social-liquid:not(#recs-card-theme-guard) :where(
  .social-shell,
  .social-main,
  #activity-section,
  .review-feed-grid,
  .social-notification-row
){
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Every activity/review is its own rounded Home-style card. */
html body.social-liquid:not(#recs-card-theme-guard) :where(.feed-card,.review-feed-card){
  background:var(--recs-universal-card-bg)!important;
  background-color:#141417!important;
  border:1px solid var(--recs-universal-border)!important;
  border-radius:24px!important;
  box-shadow:0 16px 44px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06)!important;
  margin-bottom:.72rem!important;
  overflow:hidden!important;
}
html body.social-liquid:not(#recs-card-theme-guard) .feed-card::before{
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent 48%)!important;
  border-radius:inherit!important;
}
html body.social-liquid:not(#recs-card-theme-guard) :where(
  .feed-media,
  .feed-like,
  .friend-pill,
  .social-item,
  .user-stat,
  .activity-filter-btn,
  .friends-show-all,
  .inbox-item,
  .notification-item
){
  background:var(--recs-universal-inner-bg)!important;
  background-image:none!important;
  border-color:var(--recs-universal-border)!important;
  box-shadow:var(--recs-universal-inner-shadow)!important;
}

/* Active pills retain the user's accent instead of being overwritten by card rules. */
html body:not(#recs-card-theme-guard) :where(
  .activity-filter-btn.active,
  .search-tab.active,
  .type-tab.active
){
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:var(--accent-btn-text)!important;
}

@media(max-width:760px){
  :root{
    --recs-universal-radius:24px;
    --recs-universal-inner-radius:17px;
    --recs-universal-shadow:0 18px 52px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.07);
  }
  html body.social-liquid:not(#recs-card-theme-guard) :where(.feed-card,.review-feed-card){
    border-radius:22px!important;
    margin-bottom:.62rem!important;
  }
}


/* ========================================================================
   2026-07 FINAL NAV / GUEST / MOBILE TOP-LANE CORRECTIONS
   ======================================================================== */
@media (max-width:700px){
  /* Let JavaScript provide the actual glyph. This disables the old hard-coded
     person pseudo-element that was covering the Profile settings gear. */
  body.mobile-nav-ready > .nav-right #nav-email.nav-user-btn{
    font-size:1.05rem!important;
    line-height:1!important;
    color:var(--text)!important;
    text-indent:0!important;
  }
  body.mobile-nav-ready > .nav-right #nav-email.nav-user-btn::before{
    content:none!important;
    display:none!important;
  }

  /* Guest mode has exactly Home + Search + Recs, evenly divided. */
  body.mobile-nav-ready.guest-mobile-nav nav .nav-tabs{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    --mobile-nav-slider-width:calc((100% - 16px)/3)!important;
  }
  body.mobile-nav-ready.guest-mobile-nav nav .nav-tabs:has(.nav-tab[data-page="home"].active){
    --mobile-nav-slider-left:8px!important;
    --mobile-nav-slider-width:calc((100% - 16px)/3)!important;
  }
  body.mobile-nav-ready.guest-mobile-nav nav .nav-tabs:has(.nav-tab[data-page="search"].active){
    --mobile-nav-slider-left:calc(8px + (100% - 16px)/3)!important;
    --mobile-nav-slider-width:calc((100% - 16px)/3)!important;
  }
  body.mobile-nav-ready.guest-mobile-nav nav .nav-tabs:has(.nav-tab[data-page="recs"].active){
    --mobile-nav-slider-left:calc(8px + 2 * ((100% - 16px)/3))!important;
    --mobile-nav-slider-width:calc((100% - 16px)/3)!important;
  }
}


/* ========================================================================
   2026-07 FINAL SEARCH / MODAL / PROFILE SUMMARY CORRECTIONS
   ======================================================================== */

/* Search-result cards must use the exact Home card surface, never the legacy glass row. */
html body.search-liquid .search-result,
html body.search-liquid .discover-section,
html body.search-liquid .user-card,
html body.search-liquid .search-hero{
  background:var(--recs-universal-card-bg)!important;
  background-color:#141417!important;
  border:1px solid var(--recs-universal-border)!important;
  box-shadow:var(--recs-universal-shadow)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  opacity:1!important;
}
html[data-theme="light"] body.search-liquid .search-result,
html[data-theme="light"] body.search-liquid .discover-section,
html[data-theme="light"] body.search-liquid .user-card,
html[data-theme="light"] body.search-liquid .search-hero{
  background-color:#eef0f4!important;
}
html body.search-liquid .poster-card{
  background:var(--recs-universal-inner-bg)!important;
  border:1px solid var(--recs-universal-border)!important;
  box-shadow:var(--recs-universal-inner-shadow)!important;
}
html body.search-liquid :is(.result-title,.poster-title,.result-sub,.result-meta,.poster-meta){opacity:1!important;}
html body.search-liquid :is(.result-title,.poster-title){color:var(--text)!important;}
html body.search-liquid :is(.result-sub,.result-meta,.poster-meta){color:color-mix(in srgb,var(--text) 72%,transparent)!important;}

/* The watchlist count and media-type labels are normal foreground text in both themes. */
body.profile-redesign .library-secondary-count{
  color:var(--text)!important;
  font-size:1rem!important;
  font-weight:600!important;
  opacity:1!important;
}
body.profile-redesign .library-secondary-label{
  color:var(--text)!important;
  opacity:1!important;
}

/* Keep every media-modal close control anchored in the visible top-right corner. */
#film-modal .modal-card > .modal-close{
  z-index:80!important;
  top:.8rem!important;
  right:.8rem!important;
}
@media(max-width:700px){
  #film-modal .modal-card{
    padding-top:3.45rem!important;
  }
  #film-modal .modal-card > .modal-close{
    position:sticky!important;
    top:0!important;
    right:auto!important;
    margin:-2.7rem 0 .35rem auto!important;
    float:none!important;
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    transform:none!important;
  }
  #film-modal .modal-card > .modal-close + #modal-content{
    clear:both;
  }
}


/* ========================================================================
   ABSOLUTE SEARCH SURFACE LOCK — opaque Home-style cards
   ======================================================================== */
html[data-theme="dark"] body.search-liquid :is(.search-hero,.discover-section,.search-results > .search-result,.user-card){
  background-color:#141417!important;
  background-image:linear-gradient(135deg,#1b1b1f 0%,#111114 100%)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 24px 80px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.075)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  opacity:1!important;
}
html[data-theme="light"] body.search-liquid :is(.search-hero,.discover-section,.search-results > .search-result,.user-card){
  background-color:#e6e8ed!important;
  background-image:linear-gradient(135deg,#f6f7fa 0%,#e2e5eb 100%)!important;
  border:1px solid rgba(0,0,0,.14)!important;
  box-shadow:0 18px 54px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.76)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  opacity:1!important;
}
html[data-theme="dark"] body.search-liquid .search-results > .search-result .result-title{color:#f4f4f5!important;opacity:1!important;}
html[data-theme="dark"] body.search-liquid .search-results > .search-result .result-sub{color:#d4d4d8!important;opacity:1!important;}
html[data-theme="dark"] body.search-liquid .search-results > .search-result .result-meta{color:#a1a1aa!important;opacity:1!important;}

/* ========================================================================
   DEDICATED SEARCH MEDIA RESULT CARD — bypass legacy glass-card selectors
   ======================================================================== */
html body.search-liquid .search-media-result-card{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:#141417!important;
  background-image:none!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 18px 52px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.07)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  opacity:1!important;
}
html body.search-liquid .search-media-result-card::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:linear-gradient(135deg,#1b1b1f 0%,#111114 100%)!important;
  opacity:1!important;
}
html body.search-liquid .search-media-result-card>*{
  position:relative!important;
  z-index:1!important;
}
html[data-theme="light"] body.search-liquid .search-media-result-card{
  background:#e6e8ed!important;
  border-color:rgba(0,0,0,.14)!important;
  box-shadow:0 18px 54px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.76)!important;
}
html[data-theme="light"] body.search-liquid .search-media-result-card::before{
  background:linear-gradient(135deg,#f6f7fa 0%,#e2e5eb 100%)!important;
}


/* ========================================================================
   2026-07 FINAL GUEST / NAV / MODAL / TOP-5 / STATS POLISH
   ======================================================================== */

@media (max-width:700px){
  /* Increase mobile icon contrast without changing the user's accent color. */
  body.mobile-nav-ready nav .nav-tab::before,
  body.mobile-nav-ready nav .mobile-search-tab::before{
    opacity:.9!important;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.3))!important;
  }
  body.mobile-nav-ready nav .nav-tab.active::before,
  body.mobile-nav-ready nav .mobile-search-tab.active::before{
    opacity:1!important;
    filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 65%,transparent))!important;
  }
}

/* Media popup close button: solid and readable even over scrolling artwork. */
#film-modal .modal-card > .modal-close{
  background:#08090b!important;
  background-image:none!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.5)!important;
  opacity:1!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
#film-modal .modal-card > .modal-close:hover,
#film-modal .modal-card > .modal-close:active{
  background:#000!important;
  color:#fff!important;
}

/* Top 5 editor: give the results a clear lane below Search and show artwork. */
.top4-search-box{
  padding-left:.8rem!important;
}
.top4-search-box input{
  width:100%!important;
}
.top4-editor-list{
  margin-top:.4rem!important;
  padding-top:.35rem!important;
}
.top4-choice{
  grid-template-columns:46px minmax(0,1fr) auto!important;
}
.top4-choice-art{
  width:42px!important;
  height:58px!important;
  border-radius:9px!important;
  overflow:hidden!important;
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:var(--surface)!important;
  border:1px solid var(--border)!important;
  flex:0 0 auto!important;
}
.top4-choice-art img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}
.top4-choice-art-fallback{
  width:100%!important;
  height:100%!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:1.05rem!important;
}
.top4-choice-art > b{
  position:absolute!important;
  top:3px!important;
  left:3px!important;
  min-width:20px!important;
  height:20px!important;
  padding:0 5px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  color:#fff!important;
  background:rgba(0,0,0,.88)!important;
  border:1px solid rgba(255,255,255,.3)!important;
  font-size:.66rem!important;
  line-height:1!important;
  box-shadow:0 3px 8px rgba(0,0,0,.35)!important;
}

/* Stats uses one dynamic page heading; no separate emoji or username row. */
.stats-liquid .stats-title-wrap{
  gap:0!important;
}
.stats-liquid .stats-page-title{
  max-width:100%!important;
}

@media(max-width:700px){
  .top4-editor-list{
    margin-top:.45rem!important;
    padding-top:.45rem!important;
  }
  .top4-choice{
    grid-template-columns:44px minmax(0,1fr)!important;
    align-items:center!important;
  }
  .top4-choice-art{
    width:40px!important;
    height:55px!important;
  }
  .top4-choice-meta{
    grid-column:2!important;
  }
}


/* 2026-07 stats/top-five follow-up: keep media modal close control higher. */
#film-modal .modal-card > .modal-close{
  top:.55rem!important;
  right:.65rem!important;
}
@media(max-width:700px){
  #film-modal .modal-card > .modal-close{
    top:0!important;
    margin:-3.08rem -.08rem .2rem auto!important;
  }
}

/* ========================================================================
   UNIVERSAL MOBILE APP HEADER — one reliable top lane on every page
   ======================================================================== */
@keyframes recsPulse{
  0%,100%{opacity:1;filter:brightness(1)}
  50%{opacity:.56;filter:brightness(1.18)}
}
.mobile-app-header{display:none}
@media(max-width:700px){
  body.mobile-nav-ready .mobile-app-header{
    position:fixed!important;
    inset:0 0 auto 0!important;
    z-index:915!important;
    height:calc(env(safe-area-inset-top,0px) + 52px)!important;
    padding-top:env(safe-area-inset-top,0px)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    background:linear-gradient(180deg,rgba(16,16,19,.985),rgba(16,16,19,.94))!important;
    border-bottom:1px solid rgba(255,255,255,.105)!important;
    box-shadow:0 10px 30px rgba(0,0,0,.2)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  [data-theme="light"] body.mobile-nav-ready .mobile-app-header{
    background:linear-gradient(180deg,rgba(235,237,241,.99),rgba(224,227,233,.96))!important;
    border-bottom-color:rgba(0,0,0,.13)!important;
    box-shadow:0 9px 25px rgba(0,0,0,.12)!important;
  }
  body.mobile-nav-ready .mobile-app-header-title{
    position:absolute!important;
    left:50%!important;
    bottom:10px!important;
    transform:translateX(-50%)!important;
    font-size:1.16rem!important;
    line-height:1!important;
    font-weight:1000!important;
    letter-spacing:-.055em!important;
    white-space:nowrap!important;
    background:linear-gradient(135deg,var(--text) 5%,var(--accent) 100%)!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    -webkit-text-fill-color:transparent!important;
    color:transparent!important;
    animation:recsPulse 3.5s ease-in-out infinite!important;
    pointer-events:none!important;
  }
  body.mobile-nav-ready .mobile-app-header-left,
  body.mobile-nav-ready .mobile-app-header-right{
    position:absolute!important;
    bottom:7px!important;
    width:38px!important;
    height:38px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  body.mobile-nav-ready .mobile-app-header-left{left:10px!important}
  body.mobile-nav-ready .mobile-app-header-right{right:10px!important}
  body.mobile-nav-ready .mobile-app-header .mobile-back-btn{
    position:static!important;
    inset:auto!important;
    margin:0!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:50%!important;
    background:#101014!important;
    border:1px solid rgba(255,255,255,.16)!important;
    color:var(--text)!important;
    box-shadow:0 7px 18px rgba(0,0,0,.28)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  [data-theme="light"] body.mobile-nav-ready .mobile-app-header .mobile-back-btn{
    background:#f1f2f5!important;
    border-color:rgba(0,0,0,.14)!important;
  }
  body.mobile-nav-ready.mobile-root-page .mobile-app-header .mobile-back-btn{
    visibility:hidden!important;
    pointer-events:none!important;
  }
  /* Existing page-level top-space rules are neutralized by the managed inline
     padding applied in shared.js. These keep secondary wrappers from adding a
     second fake header lane. */
  body.mobile-nav-ready .mobile-header-content{
    margin-top:0!important;
  }
  body.mobile-nav-ready.search-liquid .search-center-wrap{
    transform:none!important;
  }
  body.mobile-nav-ready.recs-liquid .recs-center-wrap{
    padding-top:0!important;
  }
  /* Align optional settings/sign-in control inside the right side of the bar. */
  body.mobile-nav-ready > .nav-right{
    top:calc(env(safe-area-inset-top,0px) + 7px)!important;
    right:10px!important;
    z-index:925!important;
  }
  body.mobile-nav-ready > .nav-right.mobile-settings-only{
    width:38px!important;
    height:38px!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  body.mobile-nav-ready > .nav-right.mobile-settings-only #nav-email{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    background:#101014!important;
    border:1px solid rgba(255,255,255,.16)!important;
    box-shadow:0 7px 18px rgba(0,0,0,.28)!important;
  }
  [data-theme="light"] body.mobile-nav-ready > .nav-right.mobile-settings-only #nav-email{
    background:#f1f2f5!important;
    border-color:rgba(0,0,0,.14)!important;
  }
}

/* Stats rows live directly on their main panel instead of becoming a stack of
   small enclosed cards. Clickable rows retain only a subtle hover cue. */
.stats-liquid .stats-panel :is(.stats-list-row,.rating-dist-row,.genre-wheel-row,.pf-sliders>label){
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.stats-liquid .stats-panel button.stats-list-row:hover,
.stats-liquid .stats-panel button.stats-list-row:focus-visible{
  background:color-mix(in srgb,var(--accent) 8%,transparent)!important;
  border-radius:10px!important;
}

/* Top 5 medals. The badge intentionally overlaps the poster edge. */
body.profile-redesign .profile-carousel-art,
body.user-liquid.profile-redesign .profile-carousel-art{
  overflow:visible!important;
}
body.profile-redesign .profile-carousel-art>img,
body.user-liquid.profile-redesign .profile-carousel-art>img{
  border-radius:inherit!important;
}
body.profile-redesign .profile-rank-badge,
body.user-liquid.profile-redesign .profile-rank-badge{
  top:-8px!important;
  left:-8px!important;
  z-index:8!important;
  border:2px solid rgba(10,10,12,.75)!important;
}
body.profile-redesign .profile-rank-badge.rank-1,
body.user-liquid.profile-redesign .profile-rank-badge.rank-1{
  background:linear-gradient(135deg,#fff1a8,#d99a08)!important;
  color:#241700!important;
  box-shadow:0 8px 20px rgba(217,154,8,.38),0 0 0 1px rgba(255,235,142,.65)!important;
}
body.profile-redesign .profile-rank-badge.rank-2,
body.user-liquid.profile-redesign .profile-rank-badge.rank-2{
  background:linear-gradient(135deg,#f5f7fa,#9ca3ad)!important;
  color:#17191d!important;
  box-shadow:0 8px 20px rgba(190,197,207,.28),0 0 0 1px rgba(255,255,255,.5)!important;
}
body.profile-redesign .profile-rank-badge.rank-3,
body.user-liquid.profile-redesign .profile-rank-badge.rank-3{
  background:linear-gradient(135deg,#e8a66e,#8a4b22)!important;
  color:#fff6ec!important;
  box-shadow:0 8px 20px rgba(154,82,35,.32),0 0 0 1px rgba(236,171,113,.48)!important;
}

/* ========================================================================
   2026-07 REVIEW / MODAL / TOP-5 / WATCHLIST / MATCH FINALIZATION
   Keep this block last so legacy glass and mobile overrides cannot win.
   ======================================================================== */

/* Existing reviews are read-only by default, with an explicit pencil to edit. */
.review-framework-display{
  padding:1rem!important;
}
.review-display-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:.75rem!important;
  margin-bottom:.65rem!important;
}
.review-display-head .review-framework-label{margin:0!important}
.own-review-text{
  color:var(--text)!important;
  font-size:.92rem!important;
  font-weight:700!important;
  line-height:1.58!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.review-edit-pencil{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid var(--border2)!important;
  border-radius:999px!important;
  background:var(--input-bg)!important;
  color:var(--text)!important;
  font:inherit!important;
  font-size:.86rem!important;
  line-height:1!important;
  cursor:pointer!important;
  box-shadow:none!important;
}
.review-edit-pencil:hover,
.review-edit-pencil:focus-visible{
  border-color:var(--accent)!important;
  background:var(--accent-dim)!important;
  outline:none!important;
}
.review-display-footer{
  justify-content:flex-start!important;
  margin-top:.8rem!important;
}
.review-framework-editor .review-framework-text{
  min-height:96px!important;
}

/* Put the compact mobile favorite heart beside TMDB/IMDb scores. */
.modal-ratings-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:.65rem!important;
  width:100%!important;
  margin-top:.35rem!important;
}
.modal-ratings-row .modal-ratings{
  flex:1 1 auto!important;
  min-width:0!important;
  margin:0!important;
}
.modal-ratings-row .favorite-chip-slot{
  flex:0 0 auto!important;
}
@keyframes favoriteHeartPop{
  0%{transform:scale(.78)}
  55%{transform:scale(1.22)}
  100%{transform:scale(1)}
}
.favorite-chip.favorite-pop{
  animation:favoriteHeartPop .34s cubic-bezier(.2,.9,.2,1)!important;
}
@media(max-width:700px){
  #film-modal .modal-favorite-heart.favorite-chip{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    padding:0!important;
    border-radius:999px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:#111216!important;
    background-image:none!important;
    border:1px solid rgba(248,113,113,.48)!important;
    color:#f87171!important;
    box-shadow:0 8px 20px rgba(0,0,0,.3)!important;
  }
  #film-modal .modal-favorite-heart.favorite-chip.active{
    background:#f87171!important;
    color:#fff!important;
  }
  #film-modal .modal-favorite-heart .favorite-chip-icon{
    display:block!important;
    font-size:1.22rem!important;
    line-height:1!important;
    transform:translateY(-.5px)!important;
  }
  #film-modal .modal-favorite-heart .favorite-chip-label{
    display:none!important;
  }
  #film-modal .modal-quick-actions{
    margin-top:.55rem!important;
  }

  /* Keep the close control visibly high in the corner while the modal scrolls. */
  #film-modal.open .modal-card > .modal-close,
  #film-modal[style*="display: flex"] .modal-card > .modal-close,
  #film-modal[style*="display:flex"] .modal-card > .modal-close{
    position:fixed!important;
    top:calc(env(safe-area-inset-top,0px) + 3.72rem)!important;
    right:.72rem!important;
    margin:0!important;
    z-index:5005!important;
  }
}

/* Top-5 medals overlap the poster/card instead of being clipped by ancestors. */
body.profile-redesign .profile-top-row .profile-extras,
body.profile-redesign.user-liquid .profile-top-row .profile-extras,
body.profile-redesign .profile-top-row .profile-top10-strip,
body.profile-redesign.user-liquid .profile-top-row .profile-top10-strip,
body.profile-redesign .profile-top-row .profile-carousel-row,
body.profile-redesign.user-liquid .profile-top-row .profile-carousel-row,
body.profile-redesign .profile-top-row .profile-carousel-item,
body.profile-redesign.user-liquid .profile-top-row .profile-carousel-item{
  overflow:visible!important;
}
body.profile-redesign .profile-top-row .profile-carousel-row,
body.profile-redesign.user-liquid .profile-top-row .profile-carousel-row{
  padding:.7rem .55rem .2rem!important;
}
body.profile-redesign .profile-rank-badge,
body.profile-redesign.user-liquid .profile-rank-badge{
  top:-9px!important;
  left:-9px!important;
}

/* A selected Watchlist summary spans the complete mobile profile width. */
@media(max-width:700px){
  body.profile-redesign .profile-stats,
  body.profile-redesign.user-liquid .profile-stats{
    width:100%!important;
  }
  body.profile-redesign .profile-stats .stat-card-list,
  body.profile-redesign.user-liquid .profile-stats .stat-card-list,
  body.user-liquid .profile-stats .stat-card-list{
    grid-column:1 / -1!important;
    justify-self:stretch!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
  }
}

/* Match hero uses the same dark, mostly opaque Home card surface. */
body.match-liquid .pf-hero{
  background:#17181c!important;
  background-image:linear-gradient(135deg,#1b1b1f 0%,#111114 100%)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 22px 65px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.06)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  opacity:1!important;
}
html[data-theme="light"] body.match-liquid .pf-hero{
  background:#e4e6eb!important;
  background-image:linear-gradient(135deg,#f5f6f8 0%,#e0e3e8 100%)!important;
  border-color:rgba(0,0,0,.14)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.7)!important;
}

/* ========================================================================
   2026-07 FINAL TOP 5 RESPONSIVE CARD LAYOUT
   Five clean equal columns on desktop; a swipeable, snap-aligned row on mobile.
   High-specificity selectors intentionally beat older page-local Top 5 rules.
   ======================================================================== */
html body.profile-redesign .profile-top-row .profile-top10-strip{
  overflow:visible!important;
  padding:1rem!important;
}
html body.profile-redesign .profile-top-row .profile-top10-strip .profile-carousel-row{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:clamp(8px,1vw,12px)!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:14px 4px 4px!important;
  overflow:visible!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  scroll-snap-type:none!important;
  box-sizing:border-box!important;
}
html body.profile-redesign .profile-top-row .profile-top10-strip .profile-carousel-item{
  display:flex!important;
  flex:initial!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  padding:0 0 .55rem!important;
  margin:0!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#222328 0%,#17181c 100%)!important;
  background-image:linear-gradient(180deg,#222328 0%,#17181c 100%)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.24)!important;
  overflow:visible!important;
  text-align:center!important;
  box-sizing:border-box!important;
  transform:none!important;
}
html body.profile-redesign .profile-top-row .profile-top10-strip .profile-carousel-item:hover{
  transform:translateY(-2px)!important;
  border-color:color-mix(in srgb,var(--accent) 45%,rgba(255,255,255,.12))!important;
}
html body.profile-redesign .profile-top-row .profile-top10-strip .profile-carousel-art{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  aspect-ratio:2 / 3!important;
  border:0!important;
  border-radius:15px 15px 10px 10px!important;
  background:#111216!important;
  box-shadow:none!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
html body.profile-redesign .profile-top-row .profile-top10-strip .profile-carousel-art>img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:14px 14px 10px 10px!important;
  overflow:hidden!important;
}
html body.profile-redesign .profile-top-row .profile-top10-strip .profile-carousel-title{
  display:-webkit-box!important;
  width:auto!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:2.28em!important;
  margin:.5rem .42rem 0!important;
  padding:0!important;
  color:var(--text)!important;
  font-size:clamp(.68rem,.82vw,.78rem)!important;
  font-weight:900!important;
  line-height:1.14!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}
html body.profile-redesign .profile-top-row .profile-top10-strip .profile-mini-stars{
  display:block!important;
  width:auto!important;
  min-width:0!important;
  margin:.3rem .2rem 0!important;
  padding:0!important;
  color:#facc15!important;
  font-size:clamp(.56rem,.76vw,.7rem)!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:-.055em!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
html body.profile-redesign .profile-top-row .profile-top10-strip .profile-rank-badge{
  top:-9px!important;
  left:-9px!important;
  z-index:30!important;
  width:27px!important;
  min-width:27px!important;
  height:27px!important;
  padding:0!important;
  font-size:.78rem!important;
  line-height:1!important;
  border-width:2px!important;
}

@media(max-width:760px){
  html body.profile-redesign .profile-top-row .profile-top10-strip{
    padding:.9rem .72rem .72rem!important;
    overflow:hidden!important;
  }
  html body.profile-redesign .profile-top-row .profile-top10-strip .profile-top10-head{
    margin-bottom:.25rem!important;
  }
  html body.profile-redesign .profile-top-row .profile-top10-strip .profile-carousel-row{
    display:flex!important;
    grid-template-columns:none!important;
    gap:10px!important;
    width:auto!important;
    margin:0!important;
    padding:15px 10px 10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-left:10px!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  html body.profile-redesign .profile-top-row .profile-top10-strip .profile-carousel-row::-webkit-scrollbar{
    display:none!important;
  }
  html body.profile-redesign .profile-top-row .profile-top10-strip .profile-carousel-item{
    flex:0 0 108px!important;
    width:108px!important;
    min-width:108px!important;
    max-width:108px!important;
    scroll-snap-align:start!important;
    padding-bottom:.52rem!important;
  }
  html body.profile-redesign .profile-top-row .profile-top10-strip .profile-carousel-title{
    margin-top:.46rem!important;
    font-size:.72rem!important;
  }
  html body.profile-redesign .profile-top-row .profile-top10-strip .profile-mini-stars{
    margin-top:.26rem!important;
    font-size:.67rem!important;
    letter-spacing:-.06em!important;
  }
  html body.profile-redesign .profile-top-row .profile-top10-strip .profile-rank-badge{
    top:-8px!important;
    left:-8px!important;
    width:26px!important;
    min-width:26px!important;
    height:26px!important;
    font-size:.76rem!important;
  }
}

/* ========================================================================
   2026-07 HEADER / STATS / REVIEW / TOP-4 FINAL PASS
   ======================================================================== */

/* Keep the shared Recs wordmark larger and truly centered in the usable
   52px header lane beneath the iPhone status area. */
@media(max-width:700px){
  body.mobile-nav-ready .mobile-app-header-title{
    top:calc(env(safe-area-inset-top,0px) + 26px)!important;
    bottom:auto!important;
    transform:translate(-50%,-50%)!important;
    font-size:1.48rem!important;
    line-height:1!important;
    letter-spacing:-.06em!important;
  }
  body.mobile-nav-ready .mobile-app-header-left,
  body.mobile-nav-ready .mobile-app-header-right{
    top:calc(env(safe-area-inset-top,0px) + 26px)!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
  }
}

/* Clickable quick-stat cards keep the exact typography/alignment of their
   non-clickable siblings. Only the cursor/hover cue reveals interactivity. */
.stats-liquid .stats-grid-main .stats-person-summary{
  text-align:left!important;
  align-items:flex-start!important;
  justify-content:center!important;
  font:inherit!important;
  color:inherit!important;
}
.stats-liquid .stats-grid-main .stats-person-summary .stats-big-num,
.stats-liquid .stats-grid-main .stats-person-summary .stats-big-text{
  width:100%!important;
  max-width:100%!important;
  font-size:clamp(2rem,4vw,2.7rem)!important;
  font-weight:950!important;
  line-height:.95!important;
  letter-spacing:-.055em!important;
  text-align:left!important;
  -webkit-line-clamp:2!important;
}
.stats-liquid .stats-grid-main .stats-person-summary .stats-big-label{
  width:100%!important;
  text-align:left!important;
}
@media(max-width:700px){
  .stats-liquid .stats-grid-main .stats-person-summary .stats-big-num,
  .stats-liquid .stats-grid-main .stats-person-summary .stats-big-text{
    font-size:1.8rem!important;
  }
}

/* The read-only review display uses the universal opaque Home card surface. */
html[data-theme="dark"] body .review-framework-box.review-framework-display,
html[data-theme="dark"] body #film-modal .review-framework-box.review-framework-display{
  background-color:#141417!important;
  background-image:linear-gradient(135deg,#1b1b1f 0%,#111114 100%)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:22px!important;
  box-shadow:0 20px 58px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  opacity:1!important;
}
html[data-theme="light"] body .review-framework-box.review-framework-display,
html[data-theme="light"] body #film-modal .review-framework-box.review-framework-display{
  background-color:#e6e8ed!important;
  background-image:linear-gradient(135deg,#f6f7fa 0%,#e2e5eb 100%)!important;
  border:1px solid rgba(0,0,0,.14)!important;
  border-radius:22px!important;
  box-shadow:0 17px 46px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.75)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  opacity:1!important;
}

/* Top 4: four equal cards in one fixed row at every size. */
html body.profile-redesign .profile-top-row .profile-top10-strip{
  overflow:visible!important;
}
html body.profile-redesign .profile-top-row .profile-top10-strip .profile-carousel-row{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:clamp(9px,1.15vw,15px)!important;
  width:100%!important;
  min-width:0!important;
  overflow:visible!important;
  scroll-snap-type:none!important;
}
html body.profile-redesign .profile-top-row .profile-top10-strip .profile-carousel-item{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  flex:none!important;
}
@media(max-width:760px){
  html body.profile-redesign .profile-extras,
  html body.profile-redesign .profile-top-row .profile-top10-strip{
    overflow:visible!important;
  }
  html body.profile-redesign .profile-top-row .profile-top10-strip{
    padding:.82rem .62rem .68rem!important;
  }
  html body.profile-redesign .profile-top-row .profile-top10-strip .profile-carousel-row{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
    margin:0!important;
    padding:12px 2px 3px!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
  }
  html body.profile-redesign .profile-top-row .profile-top10-strip .profile-carousel-item{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    padding:0 0 .38rem!important;
    border-radius:13px!important;
  }
  html body.profile-redesign .profile-top-row .profile-top10-strip .profile-carousel-art{
    width:100%!important;
    aspect-ratio:2/3!important;
    border-radius:12px 12px 8px 8px!important;
  }
  html body.profile-redesign .profile-top-row .profile-top10-strip .profile-carousel-art>img{
    border-radius:11px 11px 8px 8px!important;
  }
  html body.profile-redesign .profile-top-row .profile-top10-strip .profile-carousel-title{
    min-height:2.2em!important;
    margin:.38rem .22rem 0!important;
    font-size:clamp(.58rem,2.75vw,.68rem)!important;
    line-height:1.1!important;
    -webkit-line-clamp:2!important;
  }
  html body.profile-redesign .profile-top-row .profile-top10-strip .profile-mini-stars{
    margin:.22rem .08rem 0!important;
    font-size:clamp(.49rem,2.3vw,.61rem)!important;
    letter-spacing:-.08em!important;
  }
  html body.profile-redesign .profile-top-row .profile-top10-strip .profile-rank-badge{
    top:-7px!important;
    left:-6px!important;
    width:23px!important;
    min-width:23px!important;
    height:23px!important;
    font-size:.68rem!important;
  }
}

/* ========================================================================
   2026-07 SEARCH / STATS / MEDIA FINAL POLISH
   ======================================================================== */

/* Details on the full media page are clean rows, not nested universal cards. */
html body .media-page-wrap .media-panel .media-list{
  gap:0!important;
}
html body .media-page-wrap .media-panel .media-list-row{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--border2) 72%,transparent)!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  opacity:1!important;
  padding:.62rem 0!important;
  margin:0!important;
}
html body .media-page-wrap .media-panel .media-list-row:last-child{
  border-bottom:0!important;
}
html body .media-page-wrap .media-panel .media-list-row:hover{
  background:transparent!important;
  border-left:0!important;
  border-right:0!important;
  border-top:0!important;
}

/* Stats labels and bars live directly on the main panel. */
html body.stats-liquid .stats-panel :is(
  .stats-list-row,
  button.stats-list-row,
  .stats-person-row,
  .stats-drilldown-row,
  .rating-dist-row,
  .genre-wheel-row,
  .pf-sliders > label
){
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  opacity:1!important;
}
html body.stats-liquid .stats-panel :is(
  button.stats-list-row,
  .stats-person-row,
  .stats-drilldown-row
):is(:hover,:focus-visible,:active){
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:0!important;
}
html body.stats-liquid .genre-wheel-list{
  gap:.2rem!important;
}

/* Rating pills and the favorite heart form one compact inline score row. */
#film-modal .modal-ratings-row{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:.42rem!important;
  width:auto!important;
  max-width:100%!important;
  margin-top:.35rem!important;
}
#film-modal .modal-ratings-row .modal-ratings{
  flex:0 1 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:.38rem!important;
  min-width:0!important;
  margin:0!important;
}
#film-modal .modal-rating-pill{
  min-height:28px!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:4px 10px!important;
  line-height:1!important;
}
#film-modal .modal-ratings-row .favorite-chip-slot{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  margin:0!important;
}

@media(max-width:700px){
  /* Remove the artificial blank lane that older close-button fixes reserved. */
  #film-modal .modal-card{
    padding-top:1.05rem!important;
  }
  #film-modal #modal-content,
  #film-modal .modal-top{
    margin-top:0!important;
    padding-top:0!important;
  }
  #film-modal .modal-top{
    padding-right:2.1rem!important;
  }
  #film-modal .modal-favorite-heart.favorite-chip{
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    min-height:28px!important;
    padding:0!important;
    border-radius:999px!important;
    box-shadow:0 6px 16px rgba(0,0,0,.28)!important;
  }
  #film-modal .modal-favorite-heart .favorite-chip-icon{
    font-size:1rem!important;
    transform:none!important;
  }
}


/* ========================================================================
   STATS FLAT ROWS — SOURCE-LEVEL EXCEPTION FROM UNIVERSAL CARD SYSTEM
   Stats panels remain Home-style cards, while their labels and bars sit
   directly on the panel rather than becoming individual nested cards.
   ======================================================================== */
html body.stats-liquid .stats-panel .stats-list{
  gap:.2rem!important;
}
html body.stats-liquid .stats-panel :is(
  .stats-list-row,
  button.stats-list-row,
  .stats-person-row,
  .stats-drilldown-row,
  .rating-dist-row,
  .genre-wheel-row,
  .pf-sliders > label
){
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html body.stats-liquid .stats-panel :is(
  .stats-list-row,
  button.stats-list-row,
  .stats-person-row,
  .stats-drilldown-row
)::before,
html body.stats-liquid .stats-panel :is(
  .stats-list-row,
  button.stats-list-row,
  .stats-person-row,
  .stats-drilldown-row
)::after{
  content:none!important;
  display:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}
html body.stats-liquid .stats-panel button.stats-list-row:is(:hover,:focus-visible,:active){
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}


/* ========================================================================
   2026-07 SESSION / MEDIA / PROFILE FINALIZATION
   ======================================================================== */

/* Watchlist/Favorites panel headings are layout rows, not glass cards. */
html body.profile-redesign .favorites-panel .activity-panel-toolbar,
html body.profile-redesign.user-liquid .favorites-panel .activity-panel-toolbar,
html body.user-liquid .favorites-panel .activity-panel-toolbar{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  opacity:1!important;
}

/* Full media-page score row: type, TMDB score and Favorite are one spaced line. */
html body .media-page-wrap .media-type-score-row{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:.62rem!important;
  margin-bottom:.7rem!important;
}
html body .media-page-wrap .media-type-score-row > *{
  margin:0!important;
}
html body .media-page-wrap .media-type-score-row .favorite-chip-slot{
  display:inline-flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
}
html body .media-page-wrap .media-page-favorite-chip.favorite-chip{
  min-height:28px!important;
  height:28px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.35rem!important;
  margin:0!important;
  padding:4px 10px!important;
  border-radius:999px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
html body .media-page-wrap .media-page-favorite-chip .favorite-chip-icon{
  line-height:1!important;
}

/* Media Details use unique flat rows so the universal nested-card selector
   can never turn them back into rounded boxes. */
html body .media-page-wrap .media-detail-list{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
}
html body .media-page-wrap .media-detail-row{
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
  gap:1rem!important;
  padding:.7rem 0!important;
  margin:0!important;
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--border2) 72%,transparent)!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  opacity:1!important;
}
html body .media-page-wrap .media-detail-row:last-child{
  border-bottom:0!important;
}
html body .media-page-wrap .media-detail-label{
  flex:0 0 auto!important;
  color:var(--muted)!important;
  font-weight:750!important;
}
html body .media-page-wrap .media-detail-value{
  min-width:0!important;
  color:var(--text)!important;
  text-align:right!important;
  overflow-wrap:anywhere!important;
}

/* Key-person pills are proper buttons but keep the same visual treatment. */
.media-person-chip{
  appearance:none!important;
  -webkit-appearance:none!important;
  font:inherit!important;
  cursor:pointer!important;
}
.media-person-chip:hover,
.media-person-chip:focus-visible{
  border-color:var(--accent)!important;
  color:var(--accent)!important;
  outline:none!important;
}

/* Reusable filmography popup — intentionally matches the Stats drill-down. */
.stats-person-modal{
  position:fixed;
  inset:0;
  z-index:920;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  background:rgba(0,0,0,.78);
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease;
  overflow-y:auto;
}
.stats-person-modal.open{
  opacity:1;
  pointer-events:auto;
}
.stats-person-modal-card{
  position:relative;
  width:min(620px,100%);
  max-height:min(82dvh,760px);
  margin:auto;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
  padding:1.1rem;
  background:linear-gradient(135deg,#1b1b1f,#111114)!important;
  background-image:linear-gradient(135deg,#1b1b1f,#111114)!important;
  border:1px solid rgba(255,255,255,.15)!important;
  border-radius:26px!important;
  box-shadow:0 28px 90px rgba(0,0,0,.58)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.stats-person-modal-head{
  padding:.15rem 3rem .9rem .15rem;
  border-bottom:1px solid var(--border2);
}
.stats-person-modal-kicker{
  font-size:.7rem;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text2);
}
.stats-person-modal-title{
  margin:.25rem 0 0;
  font-size:clamp(1.55rem,5vw,2.25rem);
  line-height:1;
  font-weight:1000;
  letter-spacing:-.055em;
  color:var(--text);
}
.stats-person-modal-close{
  position:absolute;
  top:.85rem;
  right:.85rem;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  background:#060608;
  color:#fff;
  font-size:1rem;
  font-weight:900;
  cursor:pointer;
  z-index:2;
}
.stats-person-credit-list{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:.9rem .15rem .15rem;
  -webkit-overflow-scrolling:touch;
}
.stats-credit-card{
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr) auto!important;
  gap:.8rem!important;
  align-items:center!important;
  width:100%!important;
  padding:.65rem!important;
  border:1px solid var(--border2)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.055)!important;
  background-image:none!important;
  box-shadow:none!important;
  color:var(--text)!important;
  text-align:left!important;
  cursor:pointer!important;
}
.stats-credit-card:hover,
.stats-credit-card:focus-visible{
  background:rgba(255,255,255,.09)!important;
  outline:none!important;
  border-color:color-mix(in srgb,var(--accent) 48%,var(--border2))!important;
}
.stats-credit-poster{
  width:58px;
  height:82px;
  object-fit:cover;
  border-radius:10px;
  background:var(--surface2);
}
.stats-credit-poster-ph{
  width:58px;
  height:82px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--surface2);
  font-size:1.45rem;
}
.stats-credit-copy{min-width:0}
.stats-credit-copy strong{
  display:block;
  font-size:.95rem;
  line-height:1.15;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.stats-credit-copy span{
  display:block;
  margin-top:.2rem;
  color:var(--text2);
  font-size:.76rem;
  line-height:1.25;
}
.stats-credit-role{color:var(--text)!important;opacity:.86}
.stats-credit-rating{
  align-self:start;
  white-space:nowrap;
  border:1px solid var(--border2);
  border-radius:999px;
  padding:.35rem .5rem;
  background:var(--input-bg);
  font-size:.72rem;
  font-weight:900;
  color:var(--text);
}
.stats-person-empty{
  padding:1.2rem;
  text-align:center;
  color:var(--text2);
}
[data-theme="light"] .stats-person-modal-card{
  background:linear-gradient(135deg,#f7f8fa,#e6e8ed)!important;
  border-color:rgba(0,0,0,.14)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.22)!important;
}
[data-theme="light"] .stats-credit-card{background:rgba(0,0,0,.035)}

/* On mobile, an empty review starts as one deliberate action instead of a
   full textarea/editor. */
.review-framework-prompt{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:1rem!important;
}
.review-start-btn{
  width:min(100%,320px)!important;
  min-height:48px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid color-mix(in srgb,var(--accent) 55%,var(--border2))!important;
  border-radius:16px!important;
  background:var(--accent-dim)!important;
  color:var(--text)!important;
  font:900 .92rem/1 inherit!important;
  cursor:pointer!important;
}
.review-start-btn:hover,
.review-start-btn:focus-visible{
  background:var(--accent)!important;
  color:var(--accent-btn-text)!important;
  outline:none!important;
}

@media(max-width:700px){
  html body .media-page-wrap .media-type-score-row{
    gap:.5rem!important;
  }
  html body .media-page-wrap .media-page-favorite-chip.favorite-chip{
    width:28px!important;
    min-width:28px!important;
    max-width:28px!important;
    padding:0!important;
  }
  html body .media-page-wrap .media-page-favorite-chip .favorite-chip-label{
    display:none!important;
  }
  html body .media-page-wrap .media-page-favorite-chip .favorite-chip-icon{
    font-size:1rem!important;
  }
  html body .media-page-wrap .media-detail-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:.2rem!important;
  }
  html body .media-page-wrap .media-detail-value{
    text-align:left!important;
  }
  .stats-person-modal{
    align-items:center;
    justify-content:center;
    padding:calc(env(safe-area-inset-top,0px) + .8rem) .7rem calc(env(safe-area-inset-bottom,0px) + .8rem);
  }
  .stats-person-modal-card{
    max-height:min(80dvh,720px);
    border-radius:24px!important;
  }
  .stats-credit-card{
    grid-template-columns:52px minmax(0,1fr)!important;
    gap:.65rem!important;
  }
  .stats-credit-poster,
  .stats-credit-poster-ph{
    width:52px;
    height:74px;
  }
  .stats-credit-rating{
    grid-column:2;
    justify-self:start;
    margin-top:-.25rem;
  }
}


/* Search/Media final interaction polish. */
.modal-card > .modal-close,
#film-modal .modal-card > .modal-close,
#filter-picker-modal .modal-card > .modal-close{
  position:absolute!important;top:10px!important;right:10px!important;left:auto!important;bottom:auto!important;margin:0!important;z-index:80!important;
}
html[data-theme="dark"] body .review-framework-box.review-framework-prompt,
html[data-theme="dark"] body #film-modal .review-framework-box.review-framework-prompt{
  background-color:#141417!important;background-image:linear-gradient(135deg,#1b1b1f 0%,#111114 100%)!important;
  border:1px solid rgba(255,255,255,.14)!important;border-radius:22px!important;
  box-shadow:0 20px 58px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;opacity:1!important;
}
html[data-theme="light"] body .review-framework-box.review-framework-prompt,
html[data-theme="light"] body #film-modal .review-framework-box.review-framework-prompt{
  background-color:#e6e8ed!important;background-image:linear-gradient(135deg,#f6f7fa 0%,#e2e5eb 100%)!important;
  border:1px solid rgba(0,0,0,.14)!important;border-radius:22px!important;
  box-shadow:0 17px 46px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.75)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;opacity:1!important;
}
@media(max-width:700px){
  body.search-liquid .search-media-result-card > .add-wrap-modern,
  body.search-liquid .search-media-result-card > .add-wrap{
    flex:0 0 112px!important;width:112px!important;min-width:112px!important;max-width:112px!important;
  }
  body.search-liquid .search-media-result-card > .add-wrap-modern .add-btn,
  body.search-liquid .search-media-result-card > .add-wrap .add-btn{
    min-height:43px!important;padding:7px 9px!important;font-size:.72rem!important;
  }
}

/* ========================================================================
   2026-07 AUTH / RECS / MATCH FINAL SURFACE LOCK
   Keep last: these selectors intentionally beat page-local legacy glass rules.
   ======================================================================== */
html[data-theme="dark"] body .review-framework-box.review-framework-display,
html[data-theme="dark"] body #film-modal .review-framework-box.review-framework-display,
html[data-theme="dark"] body.media-liquid .review-framework-box.review-framework-display{
  background-color:#141417!important;
  background-image:linear-gradient(135deg,#1b1b1f 0%,#111114 100%)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:22px!important;
  box-shadow:0 20px 58px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  opacity:1!important;
}
html[data-theme="light"] body .review-framework-box.review-framework-display,
html[data-theme="light"] body #film-modal .review-framework-box.review-framework-display,
html[data-theme="light"] body.media-liquid .review-framework-box.review-framework-display{
  background-color:#e6e8ed!important;
  background-image:linear-gradient(135deg,#f6f7fa 0%,#e2e5eb 100%)!important;
  border:1px solid rgba(0,0,0,.14)!important;
  border-radius:22px!important;
  box-shadow:0 17px 46px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.75)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  opacity:1!important;
}

/* Recommendation results use the same opaque Home surface on desktop and mobile. */
html[data-theme="dark"] body.recs-liquid .rec-card{
  background-color:#17181c!important;
  background-image:linear-gradient(135deg,#1b1b1f 0%,#111114 100%)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  opacity:1!important;
}
html[data-theme="light"] body.recs-liquid .rec-card{
  background-color:#e6e8ed!important;
  background-image:linear-gradient(135deg,#f6f7fa 0%,#e2e5eb 100%)!important;
  border:1px solid rgba(0,0,0,.14)!important;
  box-shadow:0 15px 40px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.72)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  opacity:1!important;
}
body.recs-liquid .rec-card .rec-card-inner,
body.recs-liquid .rec-card .rec-body{
  background:transparent!important;
  background-image:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Match cards are preview controls, not page-changing links. */
body.match-liquid .match-rec-card[role="button"]{
  cursor:pointer!important;
  color:var(--text)!important;
  text-decoration:none!important;
}
body.match-liquid .match-rec-card[role="button"]:focus-visible{
  outline:2px solid var(--accent)!important;
  outline-offset:3px!important;
}

/* ========================================================================
   MEDIA PREVIEW / SEARCH POPUP — RESPONSIVE DECISION CARD
   Keep last so legacy popup and action-button rules cannot repaint it.
   ======================================================================== */
#film-modal .modal-card.media-preview-card{
  position:relative!important;
  width:min(920px,calc(100vw - 40px))!important;
  max-width:920px!important;
  max-height:min(86dvh,820px)!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:28px!important;
  background:#111114!important;
  background-image:linear-gradient(145deg,#1b1b1f 0%,#111114 60%,#0d0d10 100%)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 30px 100px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.06)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html[data-theme="light"] #film-modal .modal-card.media-preview-card{
  background:#eef0f4!important;
  background-image:linear-gradient(145deg,#fafbfc 0%,#e7e9ee 100%)!important;
  border-color:rgba(0,0,0,.15)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.82)!important;
}
#film-modal .media-preview-card > .modal-close{
  position:absolute!important;
  top:12px!important;
  right:12px!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  z-index:120!important;
  border-radius:999px!important;
  color:#fff!important;
  background:#070709!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.42)!important;
  opacity:1!important;
}
#film-modal .media-preview-card > #modal-content{
  max-height:min(86dvh,820px)!important;
  overflow:auto!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
#film-modal .media-preview-layout{
  display:grid!important;
  grid-template-columns:minmax(190px,260px) minmax(0,1fr)!important;
  gap:0!important;
  min-height:390px;
}
#film-modal .media-preview-visual{
  position:relative;
  min-height:390px;
  background:#09090b;
  overflow:hidden;
}
#film-modal .media-preview-visual .modal-poster,
#film-modal .media-preview-visual .modal-poster-sq{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  border-radius:0!important;
  margin:0!important;
  display:block!important;
}
#film-modal .media-preview-visual::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 65%,rgba(17,17,20,.82) 100%);
}
#film-modal .media-preview-main{
  min-width:0;
  padding:2.1rem 2rem 1.7rem!important;
  display:flex;
  flex-direction:column;
}
#film-modal .media-preview-kicker{
  margin:0 0 .45rem;
  color:var(--accent);
  font-size:.68rem;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
}
#film-modal .media-preview-card .modal-title{
  padding-right:2.7rem!important;
  font-size:clamp(1.65rem,3vw,2.35rem)!important;
  line-height:1.02!important;
  letter-spacing:-.045em!important;
}
#film-modal .media-preview-card .modal-meta{
  margin-top:.55rem!important;
  color:var(--text2)!important;
  font-size:.9rem!important;
  line-height:1.45!important;
}
#film-modal .media-preview-card .modal-ratings-row{
  margin-top:.9rem!important;
  gap:.5rem!important;
  flex-wrap:wrap!important;
}
#film-modal .media-preview-card .modal-rating-pill,
#film-modal .media-preview-card .modal-favorite-heart.favorite-chip{
  min-height:34px!important;
  height:34px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.065)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  color:var(--text)!important;
  box-shadow:none!important;
}
html[data-theme="light"] #film-modal .media-preview-card .modal-rating-pill,
html[data-theme="light"] #film-modal .media-preview-card .modal-favorite-heart.favorite-chip{
  background:rgba(0,0,0,.055)!important;
  border-color:rgba(0,0,0,.14)!important;
}
#film-modal .media-preview-card .modal-favorite-heart.favorite-chip{
  width:34px!important;
  min-width:34px!important;
  padding:0!important;
}
#film-modal .media-preview-overview{
  margin:1.15rem 0 1.2rem!important;
  color:var(--text2)!important;
  font-size:.97rem!important;
  line-height:1.58!important;
  display:block!important;
  -webkit-box-orient:initial!important;
  -webkit-line-clamp:unset!important;
  overflow:visible!important;
  max-height:none!important;
}
#film-modal .media-preview-actions{
  margin:auto 0 0!important;
  padding:0!important;
  display:block!important;
}
#film-modal .media-preview-actions .add-wrap-modern,
#film-modal .media-preview-actions .add-wrap{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  width:100%!important;
  gap:.55rem!important;
}
#film-modal .media-preview-actions .add-btn{
  width:100%!important;
  min-width:0!important;
  min-height:44px!important;
  padding:.65rem .8rem!important;
  border-radius:13px!important;
  background:#202024!important;
  background-image:none!important;
  border:1px solid rgba(255,255,255,.13)!important;
  color:#f1f1f3!important;
  font-size:.8rem!important;
  font-weight:800!important;
  box-shadow:none!important;
  gap:.38rem!important;
}
#film-modal .media-preview-actions .add-btn:hover{
  background:#29292e!important;
  border-color:color-mix(in srgb,var(--accent) 60%,rgba(255,255,255,.16))!important;
  transform:translateY(-1px)!important;
}
#film-modal .media-preview-actions .add-btn-icon{
  display:none!important;
}
#film-modal .media-preview-actions .add-btn-saved{
  background:color-mix(in srgb,var(--accent) 19%,#1b1b1f)!important;
  border-color:color-mix(in srgb,var(--accent) 62%,rgba(255,255,255,.12))!important;
  color:#fff!important;
}
#film-modal .media-preview-actions .add-btn-x{
  margin-left:.2rem;
  opacity:.65;
  font-size:1rem;
}
#film-modal .media-preview-actions .add-btn-watched:not(.add-btn-saved),
#film-modal .media-preview-actions .add-btn-watching:not(.add-btn-saved),
#film-modal .media-preview-actions .add-btn-watchlist:not(.add-btn-saved){
  color:#f1f1f3!important;
}
html[data-theme="light"] #film-modal .media-preview-actions .add-btn{
  background:#e1e3e8!important;
  color:#151518!important;
  border-color:rgba(0,0,0,.14)!important;
}
html[data-theme="light"] #film-modal .media-preview-actions .add-btn-saved{
  background:color-mix(in srgb,var(--accent) 28%,#f2f3f6)!important;
  border-color:color-mix(in srgb,var(--accent) 68%,rgba(0,0,0,.15))!important;
  color:#111!important;
}
#film-modal .media-preview-card .modal-quick-actions{
  margin-top:.65rem!important;
}
#film-modal .media-preview-card .modal-full-page-pill{
  width:100%!important;
  min-height:42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.5rem!important;
  border-radius:13px!important;
  background:transparent!important;
  color:var(--text)!important;
  border:1px solid var(--border2)!important;
  font-weight:800!important;
  text-decoration:none!important;
}
#film-modal .media-preview-secondary{
  padding:0 2rem 2rem!important;
}

@media(max-width:700px){
  #film-modal{
    align-items:flex-end!important;
    padding:0!important;
  }
  #film-modal .modal-card.media-preview-card{
    width:100%!important;
    max-width:none!important;
    max-height:91dvh!important;
    border-radius:26px 26px 0 0!important;
    border-bottom:0!important;
  }
  #film-modal .media-preview-card > #modal-content{
    max-height:91dvh!important;
  }
  #film-modal .media-preview-card > .modal-close{
    position:sticky!important;
    float:right!important;
    top:10px!important;
    right:10px!important;
    margin:10px 10px -48px 0!important;
  }
  #film-modal .media-preview-layout{
    display:block!important;
    min-height:0!important;
  }
  #film-modal .media-preview-visual{
    width:100%!important;
    height:clamp(210px,33dvh,310px)!important;
    min-height:0!important;
  }
  #film-modal .media-preview-visual .modal-poster,
  #film-modal .media-preview-visual .modal-poster-sq{
    object-position:center 22%!important;
  }
  #film-modal .media-preview-visual::after{
    background:linear-gradient(180deg,transparent 55%,#111114 100%)!important;
  }
  html[data-theme="light"] #film-modal .media-preview-visual::after{
    background:linear-gradient(180deg,transparent 55%,#eef0f4 100%)!important;
  }
  #film-modal .media-preview-main{
    padding:1rem 1.05rem 1.15rem!important;
  }
  #film-modal .media-preview-card .modal-title{
    padding-right:2.8rem!important;
    font-size:1.55rem!important;
  }
  #film-modal .media-preview-overview{
    margin:.9rem 0 1rem!important;
    font-size:.9rem!important;
    display:block!important;
    -webkit-line-clamp:unset!important;
    overflow:visible!important;
    max-height:none!important;
  }
  #film-modal .media-preview-actions .add-wrap-modern,
  #film-modal .media-preview-actions .add-wrap{
    grid-template-columns:1fr!important;
    gap:.48rem!important;
  }
  #film-modal .media-preview-actions .add-btn{
    min-height:50px!important;
    border-radius:15px!important;
    font-size:.9rem!important;
  }
  #film-modal .media-preview-actions .add-btn-saved{
    min-height:52px!important;
  }
  #film-modal .media-preview-card .modal-full-page-pill{
    min-height:48px!important;
  }
  #film-modal .media-preview-secondary{
    padding:0 1.05rem 1.35rem!important;
  }
}

/* ========================================================================
   2026-07 SEARCH YEARS / HIDE WATCHED + CLEAN STATUS CONTROLS
   Kept last so older page-specific rules cannot override these controls.
   ======================================================================== */
body.search-liquid .active-filter-wrap{
  align-items:center!important;
}
body.search-liquid .active-filter-list{
  flex:1 1 auto!important;
}
body.search-liquid .search-hide-watched{
  flex:0 0 auto;
  min-height:36px;
  margin-left:auto;
  padding:.55rem .82rem;
  border:1px solid var(--border2);
  border-radius:999px;
  background:#202126;
  color:var(--text2);
  font:850 .73rem/1 inherit;
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .14s,color .14s,background .14s,transform .12s;
}
body.search-liquid .search-hide-watched:hover,
body.search-liquid .search-hide-watched:focus-visible{
  border-color:var(--accent);
  color:var(--text);
  outline:none;
  transform:translateY(-1px);
}
body.search-liquid .search-hide-watched.active{
  border-color:color-mix(in srgb,var(--accent) 70%,rgba(255,255,255,.15));
  background:color-mix(in srgb,var(--accent) 18%,#18191d);
  color:#fff;
}
html[data-theme="light"] body.search-liquid .search-hide-watched{
  background:#e4e6eb;
  color:#24252a;
  border-color:rgba(0,0,0,.14);
}
html[data-theme="light"] body.search-liquid .search-hide-watched.active{
  background:color-mix(in srgb,var(--accent) 26%,#f2f3f6);
  color:#111;
}
@media(max-width:700px){
  body.search-liquid .active-filter-wrap{
    gap:.45rem!important;
  }
  body.search-liquid .active-filter-list{
    order:3;
    flex-basis:100%!important;
  }
  body.search-liquid .search-hide-watched{
    margin-left:auto;
    min-height:36px;
    padding:.52rem .72rem;
    font-size:.69rem;
  }
}

/* Search results with a saved Watchlist/Watching status expose a direct
   Watched transition without forcing the user to remove and reopen it. */
@media(min-width:701px){
  body.search-liquid .search-media-result-card > .add-wrap-saved-transition{
    flex-basis:196px!important;
    width:196px!important;
    min-width:196px!important;
    max-width:196px!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  body.search-liquid .search-media-result-card > .add-wrap-saved-transition:has(.add-btn-watching){
    flex-basis:274px!important;
    width:274px!important;
    min-width:274px!important;
    max-width:274px!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
body.search-liquid .search-media-result-card .add-btn-transition{
  background:#222328!important;
  border-color:rgba(255,255,255,.14)!important;
  color:var(--text)!important;
}

/* Media page status actions are one compact segmented control instead of
   unrelated full-row colored buttons. Watching remains available for TV. */
body .media-page-wrap .media-actions-full{
  display:block!important;
  width:min(100%,560px)!important;
  margin-top:1rem!important;
}
body .media-page-wrap .media-actions-full .add-wrap-modern,
body .media-page-wrap .media-actions-full .add-wrap{
  width:100%!important;
  max-width:none!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:5px!important;
  padding:5px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:17px!important;
  background:#111114!important;
  box-shadow:0 12px 32px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
body .media-page-wrap .media-actions-full .add-wrap:has(.add-btn-watching),
body .media-page-wrap .media-actions-full .add-wrap-modern:has(.add-btn-watching){
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
body .media-page-wrap .media-actions-full .add-btn{
  width:100%!important;
  min-width:0!important;
  min-height:45px!important;
  margin:0!important;
  padding:.65rem .6rem!important;
  justify-content:center!important;
  gap:0!important;
  border:1px solid transparent!important;
  border-radius:12px!important;
  background:transparent!important;
  background-image:none!important;
  color:#c7c7cd!important;
  box-shadow:none!important;
  font-size:.78rem!important;
  font-weight:850!important;
}
body .media-page-wrap .media-actions-full .add-btn:hover,
body .media-page-wrap .media-actions-full .add-btn:focus-visible{
  background:#202126!important;
  color:#fff!important;
  outline:none!important;
}
body .media-page-wrap .media-actions-full .add-btn-saved{
  background:color-mix(in srgb,var(--accent) 22%,#1a1b1f)!important;
  border-color:color-mix(in srgb,var(--accent) 65%,rgba(255,255,255,.12))!important;
  color:#fff!important;
}
body .media-page-wrap .media-actions-full :is(.add-btn-icon,.add-btn-x){
  display:none!important;
}
html[data-theme="light"] body .media-page-wrap .media-actions-full .add-wrap-modern,
html[data-theme="light"] body .media-page-wrap .media-actions-full .add-wrap{
  background:#e7e9ee!important;
  border-color:rgba(0,0,0,.14)!important;
}
html[data-theme="light"] body .media-page-wrap .media-actions-full .add-btn{
  color:#303137!important;
}
html[data-theme="light"] body .media-page-wrap .media-actions-full .add-btn:hover{
  background:#d9dce2!important;
  color:#111!important;
}
html[data-theme="light"] body .media-page-wrap .media-actions-full .add-btn-saved{
  background:color-mix(in srgb,var(--accent) 28%,#f4f5f7)!important;
  color:#111!important;
}

/* Larger, continuous mobile rating target: tapping or sliding anywhere
   across the row now selects half-star increments reliably. */
@media(max-width:700px){
  body .media-page-wrap .media-panel .stars[data-star-id]{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    width:100%!important;
    gap:4px!important;
    touch-action:none!important;
    user-select:none!important;
    -webkit-user-select:none!important;
  }
  body .media-page-wrap .media-panel .stars[data-star-id] .star-wrap{
    width:100%!important;
    min-width:0!important;
    min-height:56px!important;
    padding:6px 0!important;
    place-items:center!important;
    font-size:2.55rem!important;
    touch-action:none!important;
  }
  body .media-page-wrap .media-actions-full{
    width:100%!important;
  }
  body .media-page-wrap .media-actions-full .add-btn{
    min-height:49px!important;
    padding:.7rem .38rem!important;
    font-size:.75rem!important;
  }
}

/* Make View full page the clear primary desktop action. */
@media(min-width:701px){
  #film-modal .media-preview-card .modal-quick-actions{
    margin-top:1rem!important;
  }
  #film-modal .media-preview-card .modal-full-page-pill{
    min-height:56px!important;
    padding:.85rem 1.1rem!important;
    border-color:color-mix(in srgb,var(--accent) 58%,rgba(255,255,255,.15))!important;
    background:color-mix(in srgb,var(--accent) 16%,#17181c)!important;
    font-size:.95rem!important;
    font-weight:900!important;
  }
  #film-modal .media-preview-card .modal-full-page-pill:hover{
    background:color-mix(in srgb,var(--accent) 25%,#17181c)!important;
    transform:translateY(-1px)!important;
  }
}

/* The bottom navbar must never cover the final popup action on iPhone. */
@media(max-width:700px){
  #film-modal .media-preview-card > #modal-content{
    box-sizing:border-box!important;
    padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))!important;
    scroll-padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))!important;
  }
  #film-modal .media-preview-card .modal-full-page-pill{
    min-height:52px!important;
    font-size:.88rem!important;
    background:color-mix(in srgb,var(--accent) 15%,#17181c)!important;
    border-color:color-mix(in srgb,var(--accent) 52%,rgba(255,255,255,.14))!important;
  }
}
#film-modal .media-preview-actions :is(.add-btn-icon,.add-btn-x){display:none!important}
/* Popup status choices stay side by side: Film uses two, TV uses three when
   Watching is available. */
#film-modal .media-preview-actions .add-wrap-modern,
#film-modal .media-preview-actions .add-wrap{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
#film-modal .media-preview-actions .add-wrap-modern:has(.add-btn-watching),
#film-modal .media-preview-actions .add-wrap:has(.add-btn-watching){
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
@media(max-width:700px){
  #film-modal .media-preview-actions .add-wrap-modern,
  #film-modal .media-preview-actions .add-wrap{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #film-modal .media-preview-actions .add-wrap-modern:has(.add-btn-watching),
  #film-modal .media-preview-actions .add-wrap:has(.add-btn-watching){
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  #film-modal .media-preview-actions .add-btn{
    min-height:48px!important;
    padding:.62rem .35rem!important;
    font-size:.76rem!important;
  }
}


/* ========================================================================
   2026-07 POPUP / EPISODE / SEARCH / STATUS FINAL POLISH
   ======================================================================== */
/* Swipeable popup still retains a fixed close control. */
#film-modal .modal-card{will-change:transform;overscroll-behavior:contain}
#film-modal .modal-close{top:8px!important;right:8px!important;z-index:100!important}

/* Keep every final review, season, and episode block above the mobile nav. */
@media(max-width:700px){
  #film-modal .media-preview-card{max-height:calc(100dvh - 10px)!important}
  #film-modal .media-preview-card>#modal-content{padding-bottom:calc(170px + env(safe-area-inset-bottom,0px))!important;scroll-padding-bottom:calc(180px + env(safe-area-inset-bottom,0px))!important}
  #film-modal .media-preview-secondary{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))!important}
  #film-modal .ep-panel-wrap,#film-modal .modal-review-slot{scroll-margin-bottom:150px!important}
}

/* Desktop popup favorite is always an icon-size heart, never an overflowing word. */
#film-modal .modal-favorite-heart.favorite-chip{width:42px!important;min-width:42px!important;max-width:42px!important;height:42px!important;padding:0!important;display:inline-grid!important;place-items:center!important;overflow:hidden!important}
#film-modal .modal-favorite-heart .favorite-chip-label{display:none!important}
#film-modal .modal-favorite-heart .favorite-chip-icon{font-size:1.25rem!important;line-height:1!important}

/* Bright, separated rating heading with a compact clear action. */
.modal-user-rating-head,.media-rating-panel-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.55rem}
.modal-user-rating-label,.media-page-wrap .media-panel-label{color:var(--text)!important;opacity:1!important;font-weight:950!important}
.rating-clear-btn{width:30px;height:30px;border-radius:999px;border:1px solid var(--border2);background:#17181c;color:var(--text2);display:grid;place-items:center;font:900 .72rem/1 inherit;cursor:pointer}
.rating-clear-btn:hover{border-color:#f87171;color:#f87171}
@media(min-width:701px){#film-modal .modal-user-rating{margin-top:1rem!important;padding-top:.65rem!important}}

/* Poster presentation on desktop: framed, floated, and softly blended. */
@media(min-width:701px){
  #film-modal .media-preview-visual{padding:1rem!important;border-radius:24px!important;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 68%),#101014!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 18px 44px rgba(0,0,0,.3)!important}
  #film-modal .media-preview-visual:after{content:"";position:absolute;inset:auto 8% 2%;height:24%;background:linear-gradient(transparent,rgba(8,8,10,.5));pointer-events:none;border-radius:0 0 18px 18px}
  #film-modal .modal-poster{border-radius:18px!important;box-shadow:0 20px 45px rgba(0,0,0,.42)!important}
}

/* Flat episode details — no nested pills/cards around every fact. */
body.episode-liquid .episode-detail-list{gap:0!important}
body.episode-liquid .episode-detail-row{background:transparent!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:.65rem 0!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
body.episode-liquid .episode-detail-row:last-child{border-bottom:0!important}
body.episode-liquid .episode-detail-row:before,body.episode-liquid .episode-detail-row:after{display:none!important}

/* Snappier stars on desktop and a larger touch lane on mobile. */
.stars .star-wrap,.modal-stars .star-wrap,.rating-sheet-stars .star-wrap{transition:transform .06s linear,filter .06s linear,color .06s linear!important}
@media(hover:hover){.stars .star-wrap:hover,.modal-stars .star-wrap:hover,.rating-sheet-stars .star-wrap:hover{transform:scale(1.12)!important;filter:brightness(1.18)!important}}
@media(max-width:700px){body .media-page-wrap .media-panel .stars[data-star-id] .star-wrap{min-height:64px!important;font-size:2.75rem!important}}

/* Hide-watched is a real checkbox and matches the Tag control. */
body.search-liquid .search-hide-watched{display:inline-flex!important;align-items:center!important;gap:.45rem!important;margin-left:0!important;min-height:38px!important;padding:.55rem .76rem!important;border-radius:999px!important;background:#1c1d21!important;border:1px solid var(--border2)!important;cursor:pointer!important}
body.search-liquid .search-hide-watched input{position:absolute;opacity:0;pointer-events:none}
body.search-liquid .search-hide-checkmark{width:18px;height:18px;border-radius:5px;border:1px solid var(--border2);display:grid;place-items:center;font-size:.7rem;color:transparent;background:#111114}
body.search-liquid .search-hide-watched.active .search-hide-checkmark{background:var(--accent);border-color:var(--accent);color:var(--accent-btn-text)}

/* Stronger, fully filled status segmented controls. */
body .media-page-wrap .media-actions-full .add-btn,#film-modal .media-preview-actions .add-btn{opacity:1!important;border:1px solid rgba(255,255,255,.09)!important;background:#1b1c20!important;color:#d8d8de!important}
body .media-page-wrap .media-actions-full .add-btn-saved,#film-modal .media-preview-actions .add-btn-saved{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 42%,#17181c),color-mix(in srgb,var(--accent) 22%,#111114))!important;border-color:color-mix(in srgb,var(--accent) 80%,white 10%)!important;color:#fff!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent),0 9px 22px color-mix(in srgb,var(--accent) 18%,transparent)!important}
body .media-page-wrap .media-actions-full .add-wrap-modern,body .media-page-wrap .media-actions-full .add-wrap,#film-modal .media-preview-actions .add-wrap-modern,#film-modal .media-preview-actions .add-wrap{align-items:stretch!important}
body .media-page-wrap .media-actions-full .add-btn,#film-modal .media-preview-actions .add-btn{height:100%!important;min-height:50px!important}
@media(max-width:700px){body .media-page-wrap .media-actions-full .add-btn,#film-modal .media-preview-actions .add-btn{min-height:54px!important;font-size:.8rem!important}}

/* Searchable Stats / actor filmography overlays. */
.stats-person-search-wrap{padding:0 0 .8rem}
.stats-person-search{width:100%;min-height:46px;border:1px solid var(--border2);border-radius:15px;background:var(--input-bg);color:var(--text);font:750 .86rem/1.2 inherit;padding:.72rem .85rem;outline:none}
.stats-person-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.stats-credit-card[hidden]{display:none!important}
/* Final episode flat-row source selector (episode.html has no body class). */
.episode-detail-list .episode-detail-row{
  background:transparent!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:.7rem 0!important;border-bottom:1px solid rgba(255,255,255,.08)!important
}
.episode-detail-list .episode-detail-row:last-child{border-bottom:0!important}
.episode-detail-list .episode-detail-row:before,.episode-detail-list .episode-detail-row:after{display:none!important}
/* A completed status is one full-width selected segment, not half an empty row. */
.media-actions-full .add-wrap:has(.in-lib-watched),.media-actions-full .add-wrap-modern:has(.in-lib-watched),
#film-modal .media-preview-actions .add-wrap:has(.in-lib-watched),#film-modal .media-preview-actions .add-wrap-modern:has(.in-lib-watched){grid-template-columns:minmax(0,1fr)!important}
.media-actions-full .add-wrap:has(.in-lib-watching):not(:has(.add-btn-transition)),#film-modal .media-preview-actions .add-wrap:has(.in-lib-watching):not(:has(.add-btn-transition)){grid-template-columns:minmax(0,1fr)!important}


/* ========================================================================
   STATUS / SEARCH / STATS INTERACTION DEFINITIVE FIX — 2026-07-17
   ======================================================================== */

/* Hide Watched stays on the far right and preserves its checkbox DOM. */
body.search-liquid .active-filter-wrap{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  gap:.5rem!important;
}
body.search-liquid .active-filter-list{display:flex!important;align-items:center!important;gap:.45rem!important;flex-wrap:wrap!important}
body.search-liquid .search-hide-watched{
  margin-left:auto!important;
  flex:0 0 auto!important;
  color:var(--text)!important;
}
body.search-liquid .search-hide-watched .search-hide-label{color:inherit!important;font-weight:850!important}
@media(max-width:700px){
  body.search-liquid .search-hide-watched{margin-left:auto!important}
}

/* Clickable Stats rows remain flat but are fully interactive. */
html body.stats-liquid button.stats-list-row,
html body.stats-liquid .stats-person-row,
html body.stats-liquid .stats-drilldown-row,
html body.stats-liquid .stats-person-summary{
  pointer-events:auto!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
  position:relative!important;
  z-index:2!important;
}
html body.stats-liquid button.stats-list-row > *,
html body.stats-liquid .stats-person-row > *,
html body.stats-liquid .stats-drilldown-row > *{pointer-events:none!important}

/* Media-page status control: every label has equal contrast. */
body .media-page-wrap .media-actions-full .add-btn,
body .media-page-wrap .media-actions-full .add-btn span,
#film-modal .media-preview-actions .add-btn,
#film-modal .media-preview-actions .add-btn span{
  color:var(--text)!important;
  opacity:1!important;
}

/* A completed Watched state owns the entire segmented control. */
body .media-page-wrap .media-actions-full .add-wrap:has(.in-lib-watched),
body .media-page-wrap .media-actions-full .add-wrap-modern:has(.in-lib-watched),
#film-modal .media-preview-actions .add-wrap:has(.in-lib-watched),
#film-modal .media-preview-actions .add-wrap-modern:has(.in-lib-watched){
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  width:100%!important;
}
body .media-page-wrap .media-actions-full .add-wrap:has(.in-lib-watched) .in-lib-watched,
body .media-page-wrap .media-actions-full .add-wrap-modern:has(.in-lib-watched) .in-lib-watched,
#film-modal .media-preview-actions .add-wrap:has(.in-lib-watched) .in-lib-watched,
#film-modal .media-preview-actions .add-wrap-modern:has(.in-lib-watched) .in-lib-watched{
  width:100%!important;
  max-width:none!important;
  grid-column:1/-1!important;
  justify-content:center!important;
  min-height:48px!important;
}

/* Clear, quick state-change feedback without disturbing layout. */
.status-control-changing{animation:statusControlFill .38s cubic-bezier(.2,.85,.25,1)!important}
@keyframes statusControlFill{
  0%{transform:scale(.975);filter:brightness(.82)}
  55%{transform:scale(1.015);filter:brightness(1.18)}
  100%{transform:scale(1);filter:brightness(1)}
}

/* ========================================================================
   EPISODE RATING + NEXT EPISODE DEFINITIVE FIX — 2026-07-23
   ======================================================================== */

/* Render half-stars as one glyph with a clipped gradient, never two visible stars. */
.star-wrap{--star-fill:0%;position:relative!important}
.star-wrap.full{--star-fill:100%}
.star-wrap.half{--star-fill:50%}
.star-wrap .star-bg{
  color:transparent!important;
  background:linear-gradient(90deg,#facc15 0 var(--star-fill),var(--muted) var(--star-fill) 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}
.star-wrap .star-fg{display:none!important}

/* Native episode links remain reliably tappable on iPhone. */
.ep-info.ep-link{
  text-decoration:none!important;
  -webkit-tap-highlight-color:transparent!important;
  touch-action:manipulation!important;
  pointer-events:auto!important;
}
.ep-info.ep-link>*{pointer-events:none!important}

/* Stable mobile episode rows: title first, rating underneath. */
@media(max-width:560px){
  .ep-row{
    display:grid!important;
    grid-template-columns:32px minmax(0,1fr)!important;
    grid-template-areas:"check info" ". rating"!important;
    gap:.45rem .55rem!important;
    padding:.78rem .8rem!important;
    overflow:visible!important;
  }
  .ep-row>.ep-check{grid-area:check!important;align-self:center!important}
  .ep-row>.ep-info{grid-area:info!important;width:100%!important;min-height:36px!important;padding:.25rem 0!important;z-index:5!important}
  .ep-row>.ep-rating-wrap{
    grid-area:rating!important;
    width:100%!important;max-width:none!important;min-width:0!important;
    justify-content:flex-start!important;overflow:visible!important;
  }
  .ep-row .ep-star-picker{
    width:auto!important;max-width:none!important;min-width:0!important;
    display:flex!important;grid-template-columns:none!important;gap:.25rem!important;
  }
  .ep-row .ep-star-picker .star-wrap{
    width:36px!important;min-width:36px!important;max-width:36px!important;
    height:42px!important;min-height:42px!important;
    font-size:1.72rem!important;line-height:42px!important;
    overflow:visible!important;touch-action:none!important;
  }
  .ep-row .ep-clear-btn{
    width:30px!important;min-width:30px!important;height:42px!important;min-height:42px!important;
    font-size:1.1rem!important;
  }
  .ep-row .ep-info .ep-name{font-size:.9rem!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .ep-row .ep-info .ep-open-hint{display:inline-flex!important}
}

/* Next episode card near the top of TV media pages. */
.next-episode-slot{max-width:1180px;margin:1rem auto 0;padding:0 1.1rem;position:relative;z-index:2}
.next-episode-card{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.1rem;border:1px solid rgba(255,255,255,.13);border-radius:22px;
  background:linear-gradient(135deg,#1b1b1f 0%,#111114 100%);
  box-shadow:0 18px 48px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06);
}
.next-episode-kicker{text-transform:uppercase;letter-spacing:.13em;font-size:.68rem;font-weight:1000;color:var(--accent);margin-bottom:.28rem}
.next-episode-title{font-size:1rem;font-weight:950;color:var(--text)}
.next-episode-meta{font-size:.76rem;font-weight:750;color:var(--text2);margin-top:.2rem}
.next-episode-actions{display:flex;align-items:center;gap:.55rem;flex-shrink:0}
.next-episode-open,.next-episode-watch{
  min-height:42px;border-radius:13px;padding:.68rem .9rem;font:900 .78rem/1 inherit;text-decoration:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.next-episode-open{border:1px solid var(--border2);background:#202126;color:var(--text)}
.next-episode-watch{border:1px solid color-mix(in srgb,var(--accent) 72%,white 8%);background:var(--accent);color:var(--accent-btn-text)}
.next-episode-watch:disabled{opacity:.62;cursor:wait}
@media(max-width:700px){
  .next-episode-slot{padding:0 .85rem;margin-top:.75rem}
  .next-episode-card{align-items:stretch;flex-direction:column;padding:.9rem;border-radius:19px}
  .next-episode-actions{display:grid;grid-template-columns:1fr 1.35fr;width:100%}
  .next-episode-open,.next-episode-watch{width:100%;min-height:46px;padding:.72rem .55rem}
}

/* Episode quick-rating sheet. */
.episode-quick-rating-overlay{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:1rem;background:rgba(0,0,0,.72);opacity:0;transition:opacity .15s ease}
.episode-quick-rating-overlay.open{opacity:1}
.episode-quick-rating-card{position:relative;width:min(430px,calc(100vw - 2rem));padding:1.35rem;border-radius:24px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(135deg,#1b1b1f,#101013);box-shadow:0 28px 80px rgba(0,0,0,.55);text-align:center}
.episode-quick-rating-close{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:999px;border:1px solid rgba(255,255,255,.13);background:#08080a;color:#fff;display:grid;place-items:center;cursor:pointer}
.episode-quick-rating-kicker{text-transform:uppercase;letter-spacing:.13em;font-size:.68rem;font-weight:1000;color:var(--accent);margin-bottom:.5rem}
.episode-quick-rating-title{font-size:1.15rem;font-weight:1000;color:var(--text);padding:0 2rem}
.episode-quick-rating-sub{font-size:.8rem;color:var(--text2);font-weight:750;margin:.35rem 0 1rem}
.episode-quick-rating-stars{display:flex;justify-content:center;gap:.28rem;margin:.25rem 0 1rem;touch-action:none}
.episode-quick-rating-stars .star-wrap{font-size:2.4rem!important;min-width:48px;min-height:52px;display:grid!important;place-items:center!important;cursor:pointer}
.episode-quick-rating-skip{width:100%;min-height:43px;border-radius:13px;border:1px solid var(--border2);background:#1c1d21;color:var(--text);font:900 .8rem/1 inherit;cursor:pointer}
@media(max-width:560px){
  .episode-quick-rating-overlay{align-items:center;padding:max(1rem,env(safe-area-inset-top,0px)) .75rem max(1rem,env(safe-area-inset-bottom,0px))}
  .episode-quick-rating-card{width:100%;border-radius:24px;padding:1.3rem 1rem 1rem}
  .episode-quick-rating-stars{gap:.08rem}
  .episode-quick-rating-stars .star-wrap{font-size:2.2rem!important;min-width:44px;min-height:54px}
}

/* ========================================================================
   MEDIA POPUP EPISODE STARS — FIVE VISIBLE + CENTERED (2026-07-23)
   Popup-specific so the full media page keeps its own layout.
   ======================================================================== */
@media (max-width: 700px) {
  #film-modal .ep-row > .ep-rating-wrap,
  #film-modal .episode-row > .ep-rating-wrap {
    grid-area: rating !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 38px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #film-modal .ep-row .ep-star-picker,
  #film-modal .episode-row .ep-star-picker {
    display: grid !important;
    grid-template-columns: repeat(5, 36px) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    width: 204px !important;
    min-width: 204px !important;
    max-width: 204px !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  #film-modal .ep-row .ep-star-picker .star-wrap,
  #film-modal .episode-row .ep-star-picker .star-wrap {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 1.72rem !important;
    line-height: 42px !important;
    overflow: visible !important;
    flex: 0 0 36px !important;
  }

  #film-modal .ep-row .ep-clear-btn,
  #film-modal .episode-row .ep-clear-btn {
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
  }
}


/* ======================================================================
   2026-07 FINAL MEDIA / SEARCH / CARD POLISH
   ====================================================================== */
:root{
  /* New accounts begin dark with a neutral moderate-gray accent. Existing
     users retain their saved preference. */
  --recs-default-accent:#8f949c;
  /* Uniform cards: no bright top-to-dark-bottom wash on long panels. */
  --recs-universal-card-bg:linear-gradient(145deg,#1b1c20 0%,#17181c 48%,#15161a 100%)!important;
  --recs-universal-inner-bg:#232429!important;
  --recs-universal-inner-hover:#292a30!important;
  --recs-universal-control-bg:#232429!important;
}
html[data-theme="dark"] body :where(.card,[class$="-card"],[class*="-card "],.panel,[class$="-panel"],[class*="-panel "]):not(.np-panel){
  background-image:var(--recs-universal-card-bg)!important;
  background-color:#18191d!important;
}
/* Nested rows stay quieter and uniform, even inside very long lists. */
html[data-theme="dark"] body :where(.profile-item,.pf-item,.library-row,.episode-row,.result-row,.activity-item,.media-detail-row){
  background:#222329!important;
  background-image:none!important;
}

/* Search library toggles: Tag stays left, library filters stay right. */
body.search-liquid .active-filter-wrap{display:flex!important;align-items:center!important;gap:.55rem!important;flex-wrap:wrap!important}
body.search-liquid .search-library-filters{margin-left:auto!important;display:inline-flex!important;align-items:center!important;gap:.5rem!important}
body.search-liquid .search-watchlist-only,
body.search-liquid .search-hide-watched{display:inline-flex!important;align-items:center!important;gap:.45rem!important;min-height:38px!important;padding:.55rem .76rem!important;border-radius:999px!important;background:#1c1d21!important;border:1px solid var(--border2)!important;color:var(--text2)!important;cursor:pointer!important;font-weight:850!important}
body.search-liquid .search-watchlist-only input,
body.search-liquid .search-hide-watched input{position:absolute!important;opacity:0!important;pointer-events:none!important}
body.search-liquid .search-watchlist-only.active,
body.search-liquid .search-hide-watched.active{border-color:color-mix(in srgb,var(--accent) 70%,white 10%)!important;background:color-mix(in srgb,var(--accent) 18%,#1c1d21)!important;color:var(--text)!important}
body.search-liquid .search-watchlist-only.active .search-hide-checkmark,
body.search-liquid .search-hide-watched.active .search-hide-checkmark{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-btn-text)!important}
@media(max-width:700px){
  body.search-liquid .search-library-filters{margin-left:auto!important}
  body.search-liquid .search-watchlist-only,
  body.search-liquid .search-hide-watched{min-height:36px!important;padding:.48rem .66rem!important;font-size:.75rem!important}
}

/* Media-page status control owns the full mobile panel width. */
@media(max-width:760px){
  body.media-liquid .media-actions-full,
  body.media-liquid .media-actions-full .add-wrap,
  body.media-liquid .media-actions-full .add-wrap-modern{width:100%!important;max-width:none!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  body.media-liquid .media-actions-full .add-btn,
  body.media-liquid .media-actions-full .saved-btn,
  body.media-liquid .media-actions-full button{width:100%!important;min-width:0!important;max-width:none!important;min-height:50px!important;padding:.72rem .35rem!important;justify-content:center!important}
  body.media-liquid .media-actions-full .add-wrap:has(.saved-btn[data-status="watched"]),
  body.media-liquid .media-actions-full .add-wrap-modern:has(.saved-btn[data-status="watched"]){grid-template-columns:1fr!important}
}

/* Review prompt/display/editor are always the opaque Home surface. */
html body.media-liquid .review-framework-box,
html body.media-liquid .review-framework-box.review-framework-prompt,
html body.media-liquid .review-framework-box.review-framework-display,
html body.media-liquid .review-framework-box.review-framework-editor{
  background:linear-gradient(145deg,#1b1c20,#15161a)!important;
  background-color:#18191d!important;
  background-image:linear-gradient(145deg,#1b1c20,#15161a)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.055)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;opacity:1!important;
}

/* Media-page favorite: hollow inactive, filled active, accent themed. */
html body.media-liquid .media-page-favorite-chip.favorite-chip{
  background:#202126!important;border-color:rgba(255,255,255,.18)!important;color:var(--text)!important;
}
html body.media-liquid .media-page-favorite-chip.favorite-chip.active{
  background:color-mix(in srgb,var(--accent) 24%,#202126)!important;border-color:var(--accent)!important;color:var(--accent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)!important;
}
html body.media-liquid .media-page-favorite-chip .favorite-chip-label{display:none!important}
html body.media-liquid .media-page-favorite-chip .favorite-chip-icon{font-size:1.22rem!important;line-height:1!important}
#film-modal .modal-favorite-heart.favorite-chip:not(.active){color:var(--text)!important;background:#111216!important;border-color:rgba(255,255,255,.18)!important}
#film-modal .modal-favorite-heart.favorite-chip.active{color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 22%,#111216)!important;border-color:var(--accent)!important}

/* Up Next only appears for watchlist/watching shows (JS controls hidden). */
.next-episode-slot[hidden]{display:none!important}
body.media-liquid .next-episode-slot{width:100%!important;margin:1rem 0!important}
body.media-liquid .next-episode-card{width:100%!important;max-width:none!important;box-sizing:border-box!important;padding:1rem!important}
body.media-liquid .next-episode-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.65rem!important;width:100%!important}
body.media-liquid .next-episode-open,
body.media-liquid .next-episode-watch{font-family:inherit!important;font-weight:900!important;min-height:46px!important;width:100%!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important}
@media(max-width:700px){body.media-liquid .next-episode-card{display:grid!important;gap:.85rem!important}.next-episode-actions{grid-template-columns:1fr!important}}

/* Episode list separation on page and popup. */
body.media-liquid .episode-row,
#film-modal .episode-row{position:relative!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;padding-block:1rem!important}
body.media-liquid .episode-row + .episode-row,
#film-modal .episode-row + .episode-row{border-top:1px solid rgba(255,255,255,.11)!important}
body.media-liquid .episode-row::after,
#film-modal .episode-row::after{content:"";position:absolute;left:1rem;right:1rem;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.13) 12%,rgba(255,255,255,.13) 88%,transparent);pointer-events:none}
body.media-liquid .episode-row:last-child::after,
#film-modal .episode-row:last-child::after{display:none}
@media(max-width:700px){body.media-liquid .episode-row,#film-modal .episode-row{padding-block:.9rem!important}}

/* MERGED: preserve Media page layout polish after latest theme/search update */
/* ========================================================================
   MEDIA PAGE FINAL LAYOUT POLISH — 2026-07-23
   ======================================================================== */

/* Keep the main media status control full-width inside its hero column. */
body .media-page-wrap .media-actions-full{
  width:100%!important;
  max-width:none!important;
  align-self:stretch!important;
}
body .media-page-wrap .media-actions-full .add-wrap,
body .media-page-wrap .media-actions-full .add-wrap-modern{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
@media(max-width:700px){
  body .media-page-wrap .media-actions-full{
    width:100%!important;
    max-width:100%!important;
  }
  body .media-page-wrap .media-actions-full .add-wrap,
  body .media-page-wrap .media-actions-full .add-wrap-modern{
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body .media-page-wrap .media-actions-full .add-wrap:has(.add-btn-watching),
  body .media-page-wrap .media-actions-full .add-wrap-modern:has(.add-btn-watching){
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  body .media-page-wrap .media-actions-full .add-btn{
    min-width:0!important;
    width:100%!important;
    min-height:52px!important;
    padding:.72rem .38rem!important;
    font-size:.78rem!important;
    white-space:nowrap!important;
  }
  body .media-page-wrap .media-actions-full .add-wrap:has(.in-lib-watched),
  body .media-page-wrap .media-actions-full .add-wrap-modern:has(.in-lib-watched){
    grid-template-columns:minmax(0,1fr)!important;
  }
}

/* Review prompt/display/editor must use the permanent opaque Home-style card. */
html body .media-page-wrap .review-framework-box,
html body .media-page-wrap .review-framework-prompt,
html body .media-page-wrap .review-framework-display,
html body .media-page-wrap .review-framework-editor,
html body #film-modal .review-framework-box,
html body #film-modal .review-framework-prompt,
html body #film-modal .review-framework-display,
html body #film-modal .review-framework-editor{
  background:linear-gradient(135deg,#1b1b1f 0%,#111114 100%)!important;
  background-image:linear-gradient(135deg,#1b1b1f 0%,#111114 100%)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.05)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  opacity:1!important;
}
html[data-theme="light"] body .media-page-wrap .review-framework-box,
html[data-theme="light"] body #film-modal .review-framework-box{
  background:linear-gradient(135deg,#f7f8fa 0%,#e7e9ee 100%)!important;
  background-image:linear-gradient(135deg,#f7f8fa 0%,#e7e9ee 100%)!important;
  border-color:rgba(0,0,0,.13)!important;
}

/* Favorite follows the accent theme instead of using a hard-coded red state. */
html body .media-page-wrap .media-page-favorite-chip.favorite-chip{
  border-color:color-mix(in srgb,var(--accent) 58%,rgba(255,255,255,.14))!important;
  background:color-mix(in srgb,var(--accent) 12%,#17181c)!important;
  color:var(--text)!important;
  box-shadow:none!important;
}
html body .media-page-wrap .media-page-favorite-chip.favorite-chip:hover,
html body .media-page-wrap .media-page-favorite-chip.favorite-chip:focus-visible{
  border-color:var(--accent)!important;
  background:color-mix(in srgb,var(--accent) 20%,#17181c)!important;
}
html body .media-page-wrap .media-page-favorite-chip.favorite-chip.active{
  border-color:color-mix(in srgb,var(--accent) 82%,white 8%)!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 42%,#17181c),color-mix(in srgb,var(--accent) 22%,#111114))!important;
  color:#fff!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent)!important;
}

/* Up Next should align to the same page width and typography as media panels. */
.next-episode-slot{
  width:100%!important;
  max-width:1100px!important;
  box-sizing:border-box!important;
}
.next-episode-card{
  width:100%!important;
  box-sizing:border-box!important;
  min-height:112px!important;
  font-family:inherit!important;
}
.next-episode-card *{
  font-family:inherit!important;
}
.next-episode-open,
.next-episode-watch{
  font-family:inherit!important;
  font-weight:900!important;
  letter-spacing:0!important;
}
@media(max-width:700px){
  .next-episode-slot{
    padding:0 .85rem!important;
  }
  .next-episode-card{
    min-height:0!important;
    padding:1rem!important;
  }
  .next-episode-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.55rem!important;
  }
  .next-episode-open,
  .next-episode-watch{
    min-height:50px!important;
    width:100%!important;
    padding:.74rem .5rem!important;
    font-size:.78rem!important;
  }
}

/* ========================================================================
   MEDIA HERO MOBILE WIDTH LOCK — 2026-07-23
   The hero switches to a column with align-items:flex-start on mobile, which
   makes .media-hero-info shrink to its content width. Force the info column
   and its status control to own the full hero width, matching popup cards.
   ======================================================================== */
@media (max-width: 700px) {
  html body.media-liquid .media-page-wrap .media-hero-content {
    align-items: stretch !important;
  }

  html body.media-liquid .media-page-wrap .media-hero-info {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }

  html body.media-liquid .media-page-wrap .media-actions-full,
  html body.media-liquid .media-page-wrap .media-actions-full > .add-wrap,
  html body.media-liquid .media-page-wrap .media-actions-full > .add-wrap-modern {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }

  html body.media-liquid .media-page-wrap .media-actions-full .add-btn,
  html body.media-liquid .media-page-wrap .media-actions-full .saved-btn,
  html body.media-liquid .media-page-wrap .media-actions-full button {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}

/* ========================================================================
   MEDIA PAGE EPISODE STARS — ALWAYS FIVE + CENTERED (2026-07-23)
   Full-page counterpart to the popup rule. Keeps the clear control outside
   the five-star grid so it cannot cover or replace the fifth star.
   ======================================================================== */
@media (max-width: 700px) {
  html body.media-liquid .media-page-wrap .ep-row > .ep-rating-wrap,
  html body.media-liquid .media-page-wrap .episode-row > .ep-rating-wrap {
    grid-area: rating !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 38px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html body.media-liquid .media-page-wrap .ep-row .ep-star-picker,
  html body.media-liquid .media-page-wrap .episode-row .ep-star-picker {
    display: grid !important;
    grid-template-columns: repeat(5, 36px) !important;
    grid-auto-flow: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    width: 204px !important;
    min-width: 204px !important;
    max-width: 204px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body.media-liquid .media-page-wrap .ep-row .ep-star-picker > .star-wrap,
  html body.media-liquid .media-page-wrap .episode-row .ep-star-picker > .star-wrap {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    place-items: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 1.72rem !important;
    line-height: 42px !important;
    overflow: visible !important;
    flex: 0 0 36px !important;
  }

  html body.media-liquid .media-page-wrap .ep-row .ep-clear-btn,
  html body.media-liquid .media-page-wrap .episode-row .ep-clear-btn {
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
  }
}


/* ========================================================================
   DARK-ONLY MODE + SEARCH LIBRARY FILTER ROW + MOBILE EPISODE LINKS
   Added as a final override so older page-level rules cannot undo it.
   ======================================================================== */
html,html[data-theme="light"],html[data-theme="dark"]{color-scheme:dark!important}
.theme-toggle{display:none!important}

body.search-liquid .active-filter-wrap{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:.55rem!important;
  width:100%!important;
}
body.search-liquid .active-filter-list{min-width:0!important}
body.search-liquid .search-library-filters{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:.45rem!important;
  justify-self:end!important;
  min-width:min(100%,330px)!important;
}
body.search-liquid .search-watched-only,
body.search-liquid .search-watchlist-only,
body.search-liquid .search-hide-watched{
  min-width:0!important;
  width:100%!important;
  justify-content:center!important;
  white-space:nowrap!important;
  padding:.58rem .68rem!important;
  font-size:.76rem!important;
  font-weight:900!important;
}
body.search-liquid .search-watched-only.active,
body.search-liquid .search-watchlist-only.active,
body.search-liquid .search-hide-watched.active{
  background:color-mix(in srgb,var(--accent) 24%,#17171a)!important;
  border-color:color-mix(in srgb,var(--accent) 70%,rgba(255,255,255,.15))!important;
  color:#fff!important;
}
@media(max-width:700px){
  body.search-liquid .active-filter-wrap{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:.4rem!important;
  }
  body.search-liquid .active-filter-add{grid-column:1!important;width:100%!important;min-width:0!important;padding:.58rem .35rem!important}
  body.search-liquid .active-filter-list{grid-column:1/-1!important;grid-row:2!important}
  body.search-liquid .search-library-filters{display:contents!important}
  body.search-liquid .search-watched-only{grid-column:2!important;grid-row:1!important}
  body.search-liquid .search-watchlist-only{grid-column:3!important;grid-row:1!important}
  body.search-liquid .search-hide-watched{grid-column:4!important;grid-row:1!important}
  body.search-liquid .search-watched-only,
  body.search-liquid .search-watchlist-only,
  body.search-liquid .search-hide-watched{padding:.58rem .2rem!important;font-size:.68rem!important;letter-spacing:-.015em!important}
}

@media(max-width:700px){
  #film-modal .media-preview-visual .modal-poster,
  #film-modal .media-preview-visual .modal-poster-sq{object-position:center 40%!important}
  .ep-row>.ep-info.ep-link{
    display:block!important;
    min-height:40px!important;
    padding:.3rem 0!important;
    color:var(--text)!important;
    text-decoration:none!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
  .ep-row>.ep-info.ep-link .ep-num{display:inline-block!important;margin-right:.42rem!important;color:var(--muted)!important}
  .ep-row>.ep-info.ep-link .ep-name{
    display:inline!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    font-weight:850!important;
    line-height:1.3!important;
    text-decoration:underline!important;
    text-decoration-color:color-mix(in srgb,var(--accent) 50%,transparent)!important;
    text-underline-offset:3px!important;
  }
  .ep-row .ep-open-hint{display:none!important}
}

/* ========================================================================
   SEARCH FILTER ROW — FINAL CONSISTENT CHECKBOX PILLS
   Watched, Watchlist, and Hide watched intentionally share one component.
   ======================================================================== */
body.search-liquid .search-watched-only,
body.search-liquid .search-watchlist-only,
body.search-liquid .search-hide-watched{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.45rem!important;
  width:100%!important;
  min-width:0!important;
  min-height:38px!important;
  margin:0!important;
  padding:.55rem .68rem!important;
  border:1px solid var(--border2)!important;
  border-radius:999px!important;
  background:#1c1d21!important;
  color:var(--text2)!important;
  font-weight:850!important;
  line-height:1!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  box-sizing:border-box!important;
}
body.search-liquid .search-watched-only input,
body.search-liquid .search-watchlist-only input,
body.search-liquid .search-hide-watched input{
  position:absolute!important;
  opacity:0!important;
  width:1px!important;
  height:1px!important;
  pointer-events:none!important;
}
body.search-liquid .search-watched-only .search-hide-checkmark,
body.search-liquid .search-watchlist-only .search-hide-checkmark,
body.search-liquid .search-hide-watched .search-hide-checkmark{
  display:inline-grid!important;
  place-items:center!important;
  flex:0 0 18px!important;
  width:18px!important;
  height:18px!important;
  margin:0!important;
  border:1px solid rgba(255,255,255,.25)!important;
  border-radius:5px!important;
  background:#121317!important;
  color:transparent!important;
  font-size:12px!important;
  line-height:1!important;
  box-sizing:border-box!important;
}
body.search-liquid .search-watched-only.active,
body.search-liquid .search-watchlist-only.active,
body.search-liquid .search-hide-watched.active{
  background:color-mix(in srgb,var(--accent) 24%,#17171a)!important;
  border-color:color-mix(in srgb,var(--accent) 70%,rgba(255,255,255,.15))!important;
  color:#fff!important;
}
body.search-liquid .search-watched-only.active .search-hide-checkmark,
body.search-liquid .search-watchlist-only.active .search-hide-checkmark,
body.search-liquid .search-hide-watched.active .search-hide-checkmark{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:var(--accent-btn-text)!important;
}
body.search-liquid .search-watched-only .search-watched-label,
body.search-liquid .search-watchlist-only .search-watchlist-label,
body.search-liquid .search-hide-watched .search-hide-label{
  color:inherit!important;
  font:inherit!important;
  line-height:1!important;
}
@media(max-width:700px){
  body.search-liquid .active-filter-wrap{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    align-items:stretch!important;
  }
  body.search-liquid .search-watched-only,
  body.search-liquid .search-watchlist-only,
  body.search-liquid .search-hide-watched{
    min-height:38px!important;
    padding:.5rem .15rem!important;
    gap:.28rem!important;
    font-size:.68rem!important;
    letter-spacing:-.015em!important;
  }
  body.search-liquid .search-watched-only .search-hide-checkmark,
  body.search-liquid .search-watchlist-only .search-hide-checkmark,
  body.search-liquid .search-hide-watched .search-hide-checkmark{
    flex-basis:16px!important;
    width:16px!important;
    height:16px!important;
    font-size:10px!important;
  }
}

/* ========================================================================
   MEDIA PAGE STATUS — FINAL OUTER GRID OVERRIDE (2026-07-23)
   Preserve all existing Media work. Only fix the outer status wrapper that
   was still splitting itself into three columns and shrinking the controls.
   ======================================================================== */
@media (max-width: 760px) {
  html body.media-liquid .media-page-wrap .media-actions-full {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }

  html body.media-liquid .media-page-wrap .media-actions-full > .add-wrap,
  html body.media-liquid .media-page-wrap .media-actions-full > .add-wrap-modern {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  html body.media-liquid .media-page-wrap .media-actions-full > .add-wrap:has(.add-btn-watching),
  html body.media-liquid .media-page-wrap .media-actions-full > .add-wrap-modern:has(.add-btn-watching) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body.media-liquid .media-page-wrap .media-actions-full > .add-wrap:not(:has(.add-btn-watching)),
  html body.media-liquid .media-page-wrap .media-actions-full > .add-wrap-modern:not(:has(.add-btn-watching)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.media-liquid .media-page-wrap .media-actions-full > .add-wrap:has(.in-lib-watched),
  html body.media-liquid .media-page-wrap .media-actions-full > .add-wrap-modern:has(.in-lib-watched) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.media-liquid .media-page-wrap .media-actions-full .add-btn,
  html body.media-liquid .media-page-wrap .media-actions-full .saved-btn,
  html body.media-liquid .media-page-wrap .media-actions-full button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}

/* ========================================================================
   SEARCH FILTER ROW — RESPONSIVE FOUR-CONTROL LOCK
   Keep + Tag, Watched, Watchlist, and Hide watched on one row. Labels never
   change length, and controls shrink evenly on narrower mobile screens.
   ======================================================================== */
@media (max-width: 760px) {
  html body.search-liquid .active-filter-wrap {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: clamp(.24rem, 1.1vw, .44rem) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.search-liquid .active-filter-add,
  html body.search-liquid .search-watched-only,
  html body.search-liquid .search-watchlist-only,
  html body.search-liquid .search-hide-watched {
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: .5rem clamp(.12rem, .7vw, .35rem) !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    font-size: clamp(.58rem, 2.35vw, .72rem) !important;
    letter-spacing: -.018em !important;
    line-height: 1 !important;
  }

  html body.search-liquid .active-filter-add {
    grid-column: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .22rem !important;
  }
  html body.search-liquid .search-watched-only { grid-column: 2 !important; }
  html body.search-liquid .search-watchlist-only { grid-column: 3 !important; }
  html body.search-liquid .search-hide-watched { grid-column: 4 !important; }

  html body.search-liquid .search-library-filters {
    display: contents !important;
  }

  html body.search-liquid .search-watched-only,
  html body.search-liquid .search-watchlist-only,
  html body.search-liquid .search-hide-watched {
    justify-content: center !important;
    gap: clamp(.18rem, .65vw, .32rem) !important;
  }

  html body.search-liquid .search-watched-only .search-hide-checkmark,
  html body.search-liquid .search-watchlist-only .search-hide-checkmark,
  html body.search-liquid .search-hide-watched .search-hide-checkmark {
    flex: 0 0 clamp(13px, 3.7vw, 16px) !important;
    width: clamp(13px, 3.7vw, 16px) !important;
    height: clamp(13px, 3.7vw, 16px) !important;
  }

  html body.search-liquid .search-watched-label,
  html body.search-liquid .search-watchlist-label,
  html body.search-liquid .search-hide-label {
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }

  html body.search-liquid .active-filter-list {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
  }
}

@media (max-width: 390px) {
  html body.search-liquid .active-filter-add,
  html body.search-liquid .search-watched-only,
  html body.search-liquid .search-watchlist-only,
  html body.search-liquid .search-hide-watched {
    font-size: .56rem !important;
    padding-inline: .08rem !important;
  }
}

/* ========================================================================
   MOBILE EPISODE LIST — NAVIGATION-FIRST, READ-ONLY RATINGS
   Mobile media pages and preview cards keep watched checkboxes and existing
   rating visibility, but episode ratings can only be changed on episode.html.
   Desktop episode controls remain unchanged.
   ======================================================================== */
.ep-mobile-rating-display{display:none}

@media (max-width:700px){
  body.media-liquid .media-page-wrap .ep-row,
  #film-modal .ep-row{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) auto!important;
    grid-template-areas:"check info rating"!important;
    align-items:center!important;
    column-gap:.62rem!important;
    row-gap:0!important;
    min-height:62px!important;
    padding:.72rem .78rem!important;
    touch-action:pan-y!important;
  }

  body.media-liquid .media-page-wrap .ep-row>.ep-check,
  #film-modal .ep-row>.ep-check{
    grid-area:check!important;
    align-self:center!important;
    margin:0!important;
    z-index:4!important;
  }

  body.media-liquid .media-page-wrap .ep-row>.ep-info.ep-link,
  #film-modal .ep-row>.ep-info.ep-link{
    grid-area:info!important;
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    padding:.3rem .2rem!important;
    color:var(--text)!important;
    text-decoration:none!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:color-mix(in srgb,var(--accent) 18%,transparent)!important;
    border-radius:10px!important;
    z-index:8!important;
  }

  body.media-liquid .media-page-wrap .ep-row>.ep-info.ep-link:active,
  #film-modal .ep-row>.ep-info.ep-link:active{
    background:color-mix(in srgb,var(--accent) 14%,transparent)!important;
  }

  body.media-liquid .media-page-wrap .ep-row>.ep-info.ep-link .ep-num,
  #film-modal .ep-row>.ep-info.ep-link .ep-num{
    flex:0 0 auto!important;
    margin-right:.45rem!important;
    color:var(--muted)!important;
    font-weight:900!important;
  }

  body.media-liquid .media-page-wrap .ep-row>.ep-info.ep-link .ep-name,
  #film-modal .ep-row>.ep-info.ep-link .ep-name{
    display:block!important;
    min-width:0!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    font-size:.88rem!important;
    font-weight:850!important;
    line-height:1.28!important;
    text-decoration:none!important;
  }

  body.media-liquid .media-page-wrap .ep-row>.ep-info.ep-link .ep-runtime,
  #film-modal .ep-row>.ep-info.ep-link .ep-runtime,
  body.media-liquid .media-page-wrap .ep-row .ep-open-hint,
  #film-modal .ep-row .ep-open-hint{
    display:none!important;
  }

  body.media-liquid .media-page-wrap .ep-row>.ep-rating-wrap,
  #film-modal .ep-row>.ep-rating-wrap{
    grid-area:rating!important;
    position:relative!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    width:auto!important;
    min-width:0!important;
    max-width:112px!important;
    padding:0!important;
    margin:0!important;
    gap:.3rem!important;
    overflow:visible!important;
    touch-action:pan-y!important;
  }

  /* The editable picker remains desktop-only. */
  body.media-liquid .media-page-wrap .ep-row .ep-star-picker,
  #film-modal .ep-row .ep-star-picker{
    display:none!important;
    pointer-events:none!important;
  }

  body.media-liquid .media-page-wrap .ep-row .ep-mobile-rating-display,
  #film-modal .ep-row .ep-mobile-rating-display{
    align-items:center!important;
    justify-content:center!important;
    gap:1px!important;
    width:76px!important;
    min-width:76px!important;
    min-height:29px!important;
    padding:4px 7px!important;
    border:1px solid color-mix(in srgb,var(--accent) 42%,rgba(255,255,255,.1))!important;
    border-radius:999px!important;
    background:color-mix(in srgb,var(--accent) 10%,#17181c)!important;
    box-sizing:border-box!important;
    pointer-events:none!important;
  }

  body.media-liquid .media-page-wrap .ep-row .ep-mobile-rating-star,
  #film-modal .ep-row .ep-mobile-rating-star{
    position:relative!important;
    display:inline-block!important;
    width:11px!important;
    min-width:11px!important;
    height:12px!important;
    color:transparent!important;
    font-size:.72rem!important;
    line-height:1!important;
  }

  body.media-liquid .media-page-wrap .ep-row .ep-mobile-rating-star::before,
  #film-modal .ep-row .ep-mobile-rating-star::before{
    content:"★"!important;
    position:absolute!important;
    inset:0 auto 0 0!important;
    width:var(--ep-mobile-fill,0%)!important;
    overflow:hidden!important;
    color:var(--accent)!important;
    white-space:nowrap!important;
  }

  body.media-liquid .media-page-wrap .ep-row .ep-clear-btn,
  #film-modal .ep-row .ep-clear-btn{
    position:static!important;
    transform:none!important;
    display:inline-grid!important;
    place-items:center!important;
    flex:0 0 27px!important;
    width:27px!important;
    min-width:27px!important;
    height:29px!important;
    min-height:29px!important;
    margin:0!important;
    padding:0!important;
    border-radius:9px!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    z-index:9!important;
  }
}

/* ========================================================================
   MOBILE EPISODE ROW — TITLE, READ-ONLY RATING, THEN CLEAR X
   Mobile only. Desktop episode rows and desktop rating controls are untouched.
   ======================================================================== */
@media (max-width: 700px) {
  html body.media-liquid .media-page-wrap .ep-row,
  html #film-modal .ep-row {
    grid-template-columns: 34px minmax(0, 1fr) 116px !important;
    grid-template-areas: "check info rating" !important;
    column-gap: .55rem !important;
  }

  html body.media-liquid .media-page-wrap .ep-row > .ep-info.ep-link,
  html #film-modal .ep-row > .ep-info.ep-link {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding-right: 0 !important;
  }

  html body.media-liquid .media-page-wrap .ep-row > .ep-info.ep-link .ep-num,
  html #film-modal .ep-row > .ep-info.ep-link .ep-num {
    flex: 0 0 auto !important;
  }

  html body.media-liquid .media-page-wrap .ep-row > .ep-info.ep-link .ep-name,
  html #film-modal .ep-row > .ep-info.ep-link .ep-name {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }

  html body.media-liquid .media-page-wrap .ep-row > .ep-rating-wrap,
  html #film-modal .ep-row > .ep-rating-wrap {
    grid-area: rating !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: 80px 28px !important;
    align-items: center !important;
    justify-content: end !important;
    gap: 6px !important;
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body.media-liquid .media-page-wrap .ep-row .ep-mobile-rating-display,
  html #film-modal .ep-row .ep-mobile-rating-display {
    grid-column: 1 !important;
    justify-self: center !important;
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    padding-inline: 7px !important;
  }

  html body.media-liquid .media-page-wrap .ep-row .ep-clear-btn,
  html #film-modal .ep-row .ep-clear-btn {
    grid-column: 2 !important;
    justify-self: end !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 29px !important;
    min-height: 29px !important;
  }
}

@media (max-width: 390px) {
  html body.media-liquid .media-page-wrap .ep-row,
  html #film-modal .ep-row {
    grid-template-columns: 32px minmax(0, 1fr) 108px !important;
    column-gap: .42rem !important;
  }

  html body.media-liquid .media-page-wrap .ep-row > .ep-rating-wrap,
  html #film-modal .ep-row > .ep-rating-wrap {
    grid-template-columns: 74px 27px !important;
    gap: 5px !important;
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
  }

  html body.media-liquid .media-page-wrap .ep-row .ep-mobile-rating-display,
  html #film-modal .ep-row .ep-mobile-rating-display {
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    padding-inline: 5px !important;
  }
}

/* Mobile episode rows: show the saved read-only rating between title and clear X. */
@media (max-width: 700px) {
  html body.media-liquid .media-page-wrap .ep-row .ep-mobile-rating-display[data-rating="0"],
  html #film-modal .ep-row .ep-mobile-rating-display[data-rating="0"],
  html body.media-liquid .media-page-wrap .ep-row .ep-mobile-rating-display[data-rating=""],
  html #film-modal .ep-row .ep-mobile-rating-display[data-rating=""] {
    display: none !important;
  }

  html body.media-liquid .media-page-wrap .ep-row .ep-mobile-rating-display:not([data-rating="0"]):not([data-rating=""]),
  html #film-modal .ep-row .ep-mobile-rating-display:not([data-rating="0"]):not([data-rating=""]) {
    display: inline-flex !important;
  }
}


/* Settings menu secondary action — shared by desktop and mobile. */
.settings-panel .settings-import-stats-btn{
  width:100%;
  min-height:38px;
  margin:0 0 .5rem;
  padding:.55rem .7rem;
  border:1px solid var(--border2);
  border-radius:10px;
  background:var(--surface2);
  color:var(--text);
  font:800 .82rem/1 inherit;
  cursor:pointer;
  transition:border-color .14s ease,background .14s ease,color .14s ease,transform .1s ease;
}
.settings-panel .settings-import-stats-btn:hover,
.settings-panel .settings-import-stats-btn:focus-visible{
  border-color:var(--accent);
  background:var(--accent-dim);
  color:var(--accent);
  transform:translateY(-1px);
  outline:none;
}

/* ========================================================================
   2026-07-24 — mobile episode reliability + calendar cleanup
   Desktop episode controls are intentionally untouched.
   ======================================================================== */
@media (max-width:700px){
  body.media-liquid .media-page-wrap .ep-season-toggle,
  #film-modal .ep-season-toggle{
    touch-action:pan-y!important;
    -webkit-user-select:none!important;
    user-select:none!important;
  }

  body.media-liquid .media-page-wrap .ep-row,
  #film-modal .ep-row{
    overflow:hidden!important;
  }

  body.media-liquid .media-page-wrap .ep-row>.ep-info.ep-link,
  #film-modal .ep-row>.ep-info.ep-link{
    position:relative!important;
    z-index:30!important;
    pointer-events:auto!important;
    touch-action:pan-y!important;
  }

  body.media-liquid .media-page-wrap .ep-row .ep-star-picker,
  #film-modal .ep-row .ep-star-picker{
    display:none!important;
    width:0!important;
    min-width:0!important;
    max-width:0!important;
    height:0!important;
    overflow:hidden!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body.media-liquid .media-page-wrap .ep-row .ep-mobile-rating-display,
  #film-modal .ep-row .ep-mobile-rating-display{
    overflow:hidden!important;
    isolation:isolate!important;
  }

  body.media-liquid .media-page-wrap .ep-row .ep-mobile-rating-star,
  #film-modal .ep-row .ep-mobile-rating-star{
    overflow:hidden!important;
  }

  body.media-liquid .media-page-wrap .ep-row .ep-clear-btn,
  #film-modal .ep-row .ep-clear-btn{
    position:relative!important;
    z-index:40!important;
    overflow:hidden!important;
    background:#111216!important;
    background-image:none!important;
    box-shadow:0 0 0 4px #111216!important;
  }
}

/* Prevent iOS Safari/PWA from zooming the catalog when its search is focused. */
@media (max-width:700px){
  html body.library-page .catalog-search,
  html body.library-page .catalog-sort{
    font-size:16px!important;
  }
}

/* Calendar rows are flat text rows, and heatmap activity colors must win over
   the universal nested-card selector. */
html body.calendar-liquid .calendar-recent-row,
html body.calendar-liquid .calendar-day-detail-item{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html body.calendar-liquid .calendar-recent-row:last-child,
html body.calendar-liquid .calendar-day-detail-item:last-child{
  border-bottom:0!important;
}
html body.calendar-liquid .calendar-day{
  border-radius:3px!important;
  box-shadow:none!important;
  background:#25262b!important;
  background-image:none!important;
  border:1px solid rgba(255,255,255,.08)!important;
}
html body.calendar-liquid .calendar-day.level-1{
  background:color-mix(in srgb,var(--accent) 28%,#25262b)!important;
  border-color:color-mix(in srgb,var(--accent) 38%,transparent)!important;
}
html body.calendar-liquid .calendar-day.level-2{
  background:color-mix(in srgb,var(--accent) 48%,#222329)!important;
  border-color:color-mix(in srgb,var(--accent) 58%,transparent)!important;
}
html body.calendar-liquid .calendar-day.level-3{
  background:color-mix(in srgb,var(--accent) 70%,#1c1d21)!important;
  border-color:color-mix(in srgb,var(--accent) 78%,transparent)!important;
}
html body.calendar-liquid .calendar-day.level-4{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  box-shadow:0 0 9px color-mix(in srgb,var(--accent) 42%,transparent)!important;
}
html body.calendar-liquid .calendar-day:hover,
html body.calendar-liquid .calendar-day.selected{
  transform:scale(1.22)!important;
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px var(--accent-dim)!important;
}


/* ========================================================================
   DESKTOP UP-NEXT PANEL REDESIGN — 2026-07-24
   Keep the compact mobile layout untouched. On desktop, give the episode
   copy a real column and keep both actions proportional instead of allowing
   them to stretch into oversized bars.
   ======================================================================== */
@media (min-width: 761px) {
  html body.media-liquid .next-episode-slot {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 1.1rem auto 0 !important;
    padding: 0 !important;
  }

  html body.media-liquid .next-episode-card {
    display: grid !important;
    grid-template-columns: minmax(250px, .72fr) minmax(440px, 1.28fr) !important;
    align-items: center !important;
    gap: 1.25rem !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 1.15rem 1.2rem !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, #1b1c20 0%, #121316 100%) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.055) !important;
  }

  html body.media-liquid .next-episode-copy {
    min-width: 0 !important;
    padding: .15rem 1.25rem .15rem .2rem !important;
    border-right: 1px solid rgba(255,255,255,.11) !important;
  }

  html body.media-liquid .next-episode-kicker {
    margin: 0 0 .42rem !important;
    font-size: .7rem !important;
    line-height: 1 !important;
    letter-spacing: .16em !important;
  }

  html body.media-liquid .next-episode-title {
    margin: 0 !important;
    max-width: 100% !important;
    font-size: 1.12rem !important;
    line-height: 1.22 !important;
    letter-spacing: -.015em !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body.media-liquid .next-episode-meta {
    margin-top: .38rem !important;
    font-size: .78rem !important;
    line-height: 1.25 !important;
  }

  html body.media-liquid .next-episode-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: .75rem !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.media-liquid .next-episode-open,
  html body.media-liquid .next-episode-watch {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding: .82rem 1rem !important;
    border-radius: 16px !important;
    font-size: .84rem !important;
    line-height: 1.1 !important;
    transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease !important;
  }

  html body.media-liquid .next-episode-open {
    color: var(--text) !important;
    background: #202126 !important;
    border-color: rgba(255,255,255,.16) !important;
  }

  html body.media-liquid .next-episode-watch {
    color: #fff !important;
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 58%, #24252a),
      color-mix(in srgb, var(--accent) 34%, #141519)
    ) !important;
    border-color: color-mix(in srgb, var(--accent) 72%, rgba(255,255,255,.18)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1) !important;
  }

  html body.media-liquid .next-episode-open:hover,
  html body.media-liquid .next-episode-watch:hover {
    transform: translateY(-1px) !important;
    border-color: color-mix(in srgb, var(--accent) 65%, rgba(255,255,255,.2)) !important;
  }

  html body.media-liquid .next-episode-complete {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 761px) and (max-width: 960px) {
  html body.media-liquid .next-episode-card {
    grid-template-columns: 1fr !important;
    gap: .9rem !important;
  }

  html body.media-liquid .next-episode-copy {
    padding: 0 0 .85rem !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.11) !important;
  }
}

/* ========================================================================
   FINAL EPISODE INTERACTION CONTRACT — 2026-07-24
   Explicit season expand button + native episode links on mobile.
   Desktop rating controls and desktop row layout remain unchanged.
   ======================================================================== */
.ep-season-body[hidden] {
  display: none !important;
}

.ep-season-expand {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border2);
  border-radius: 10px;
  background: var(--surface2);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ep-season-expand:hover,
.ep-season-expand:focus-visible {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-dim);
  outline: none;
}
.ep-season-expand .ep-chevron {
  display: block;
  font-size: 1.25rem;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .14s ease;
}
.ep-season.open .ep-season-expand .ep-chevron,
.ep-season-expand[aria-expanded="true"] .ep-chevron {
  transform: rotate(90deg);
}
.ep-season-right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
  min-width: 0;
}
.ep-clear-btn[hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  body.media-liquid .media-page-wrap .ep-season-toggle,
  #film-modal .ep-season-toggle {
    cursor: default !important;
    touch-action: pan-y !important;
  }

  body.media-liquid .media-page-wrap .ep-season-expand,
  #film-modal .ep-season-expand {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    position: relative !important;
    z-index: 60 !important;
    pointer-events: auto !important;
  }

  body.media-liquid .media-page-wrap .ep-season-right,
  #film-modal .ep-season-right {
    gap: .35rem !important;
  }

  body.media-liquid .media-page-wrap .ep-season-stats,
  #film-modal .ep-season-stats {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Native link: checkbox | title | saved rating + remove button. */
  html body.media-liquid .media-page-wrap .ep-row,
  html #film-modal .ep-row {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    grid-template-areas: "check info rating" !important;
    align-items: center !important;
    column-gap: .55rem !important;
    min-height: 62px !important;
    padding: .64rem .72rem !important;
    overflow: hidden !important;
    touch-action: pan-y !important;
  }

  html body.media-liquid .media-page-wrap .ep-row > .ep-info.ep-link,
  html #film-modal .ep-row > .ep-info.ep-link {
    grid-area: info !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    padding: .25rem .1rem !important;
    overflow: hidden !important;
    color: var(--text) !important;
    text-decoration: none !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 18%, transparent) !important;
    position: relative !important;
    z-index: 30 !important;
  }

  html body.media-liquid .media-page-wrap .ep-row > .ep-info.ep-link .ep-name,
  html #film-modal .ep-row > .ep-info.ep-link .ep-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body.media-liquid .media-page-wrap .ep-row > .ep-rating-wrap,
  html #film-modal .ep-row > .ep-rating-wrap {
    grid-area: rating !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 5px !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  /* Mobile ratings are read-only here; episode.html remains the editor. */
  html body.media-liquid .media-page-wrap .ep-row .ep-star-picker,
  html #film-modal .ep-row .ep-star-picker {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  html body.media-liquid .media-page-wrap .ep-row .ep-mobile-rating-display,
  html #film-modal .ep-row .ep-mobile-rating-display {
    flex: 0 0 74px !important;
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    height: 29px !important;
    min-height: 29px !important;
    padding: 4px 5px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, rgba(255,255,255,.1)) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--accent) 10%, #17181c) !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
  }

  html body.media-liquid .media-page-wrap .ep-row .ep-mobile-rating-display[data-rating="0"],
  html #film-modal .ep-row .ep-mobile-rating-display[data-rating="0"],
  html body.media-liquid .media-page-wrap .ep-row .ep-mobile-rating-display[data-rating=""],
  html #film-modal .ep-row .ep-mobile-rating-display[data-rating=""] {
    display: none !important;
  }

  html body.media-liquid .media-page-wrap .ep-row .ep-mobile-rating-display:not([data-rating="0"]):not([data-rating=""]),
  html #film-modal .ep-row .ep-mobile-rating-display:not([data-rating="0"]):not([data-rating=""]) {
    display: inline-flex !important;
  }

  html body.media-liquid .media-page-wrap .ep-row .ep-clear-btn,
  html #film-modal .ep-row .ep-clear-btn {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 29px !important;
    min-height: 29px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 9px !important;
    background: #111216 !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--muted) !important;
    position: relative !important;
    z-index: 40 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  html body.media-liquid .media-page-wrap .ep-row .ep-clear-btn[hidden],
  html #film-modal .ep-row .ep-clear-btn[hidden] {
    display: none !important;
  }
}

/* ========================================================================
   DESKTOP NAV REFRESH — 2026-07-24
   Search is a real tab again. Mobile navigation is intentionally untouched.
   ======================================================================== */
@media (min-width:701px){
  nav{
    height:68px;
    border-bottom:1px solid color-mix(in srgb,var(--accent) 13%,rgba(255,255,255,.08));
    background:linear-gradient(180deg,color-mix(in srgb,var(--nav-bg) 94%,var(--accent) 6%),var(--nav-bg));
    box-shadow:0 10px 34px rgba(0,0,0,.14);
  }
  nav .nav-tabs{
    gap:5px;
    padding:5px;
    border:1px solid color-mix(in srgb,var(--accent) 12%,var(--border2));
    border-radius:17px;
    background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 8px 28px rgba(0,0,0,.13);
    overflow:visible;
  }
  nav .nav-tab{
    position:relative;
    padding:.5rem 1rem;
    border-radius:12px;
    font-size:.82rem;
    font-weight:720;
    letter-spacing:.005em;
    transition:transform .16s ease,color .16s ease,background .16s ease,box-shadow .16s ease;
  }
  nav .nav-tab::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:4px;
    width:4px;
    height:4px;
    border-radius:999px;
    background:var(--accent);
    opacity:0;
    transform:translate(-50%,4px) scale(.4);
    transition:opacity .16s ease,transform .16s ease;
    box-shadow:0 0 10px var(--accent);
  }
  nav .nav-tab:hover{
    transform:translateY(-1px);
    color:var(--text);
    background:rgba(255,255,255,.075);
  }
  nav .nav-tab.active{
    color:var(--text);
    background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 18%,var(--surface2)),var(--surface2));
    border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 14px rgba(0,0,0,.16),0 0 18px color-mix(in srgb,var(--accent) 8%,transparent);
  }
  nav .nav-tab.active::after{
    opacity:.92;
    transform:translate(-50%,0) scale(1);
  }
  nav #global-search-btn{display:none!important;}
  nav .nav-user-btn{
    border-radius:13px;
    border:1px solid color-mix(in srgb,var(--accent) 12%,var(--border));
    background:linear-gradient(180deg,var(--surface2),var(--input-bg));
    padding:.42rem .72rem;
    font-weight:700;
  }
  nav .nav-user-btn:hover{
    border-color:color-mix(in srgb,var(--accent) 58%,var(--border));
    box-shadow:0 0 0 3px var(--accent-dim);
  }
}

/* 2026-07-24 timeline mobile overhaul */
.pf-timeline-count {
  color: var(--text) !important;
  opacity: 1 !important;
  font-weight: 800;
}
.tl-mobile-list { display:none; }
.pf-card-log-date {
  margin-top:.5rem;
  color:var(--text2);
  font-size:.68rem;
  font-weight:800;
}
@media (max-width:700px) {
  .timeline-liquid .pf-hero,
  .month-liquid .pf-hero { margin-bottom:.7rem; }
  .timeline-liquid .pf-timeline-block {
    margin:.65rem 0 !important;
    padding:.82rem !important;
    border-radius:18px !important;
    border-left:1px solid color-mix(in srgb,var(--accent) 45%,var(--border)) !important;
  }
  .timeline-liquid .pf-timeline-head { margin-bottom:.58rem; }
  .timeline-liquid .pf-timeline-title-line { gap:.48rem; }
  .timeline-liquid .pf-timeline-title-line h2 { font-size:1rem; letter-spacing:-.025em; }
  .timeline-liquid .pf-timeline-count,
  .month-liquid .pf-timeline-count { margin-top:.12rem; font-size:.7rem; }
  .timeline-liquid .pf-month-link {
    min-height:27px !important;
    padding:0 .55rem !important;
    font-size:.67rem !important;
    border-radius:999px !important;
  }
  .timeline-liquid .tl-desktop-grid,
  .month-liquid .tl-desktop-grid { display:none !important; }
  .timeline-liquid .tl-mobile-list,
  .month-liquid .tl-mobile-list { display:grid; gap:6px; }
  .tl-row {
    min-width:0;
    min-height:68px;
    display:grid;
    grid-template-columns:45px minmax(0,1fr) auto;
    align-items:center;
    gap:9px;
    padding:6px 8px 6px 6px;
    border:1px solid var(--border);
    border-radius:13px;
    background:rgba(255,255,255,.04);
    color:var(--text);
    text-decoration:none;
    box-shadow:none;
  }
  .tl-row:active { transform:scale(.992); border-color:color-mix(in srgb,var(--accent) 38%,var(--border)); }
  .tl-row > img,
  .tl-row-ph {
    width:45px;
    height:62px;
    border-radius:9px;
    object-fit:cover;
    display:grid;
    place-items:center;
    background:var(--surface2);
    color:var(--accent);
    font-size:.57rem;
    font-weight:950;
    letter-spacing:.04em;
  }
  .tl-row-main { min-width:0; }
  .tl-row-title {
    font-size:.82rem;
    line-height:1.12;
    font-weight:900;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .tl-row-sub {
    margin-top:3px;
    color:var(--text2);
    font-size:.64rem;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .tl-row-rating { margin-top:5px; line-height:1; }
  .tl-row-rating .pf-stars { font-size:.69rem; }
  .tl-row-rating .pf-muted { font-size:.62rem; }
  .tl-row-date {
    align-self:start;
    margin-top:2px;
    padding:.26rem .42rem;
    border:1px solid var(--border);
    border-radius:999px;
    background:rgba(255,255,255,.04);
    color:var(--text2);
    font-size:.59rem;
    font-weight:850;
    white-space:nowrap;
  }
  .month-liquid .pf-month-page { padding:.82rem !important; border-radius:19px !important; }
  .month-liquid .pf-section-head { margin-bottom:.65rem; }
  .month-liquid .pf-section-head h2 { font-size:1.22rem !important; }
  .month-liquid .pf-month-back { margin-bottom:.48rem; }
  .month-liquid .tl-month-mobile-list { gap:6px; }
}

/* ─── ADMIN ACCOUNT CONTEXT ─────────────────────────────────────────────── */
.admin-nav-tab{position:relative}
.admin-nav-tab::after{content:'◆';font-size:.42rem;margin-left:.42rem;vertical-align:middle;opacity:.7}
.admin-settings-btn{font-weight:750}
.recs-admin-context-bar{
  position:fixed;z-index:990;left:50%;top:76px;transform:translateX(-50%);
  width:min(720px,calc(100% - 32px));display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 12px 10px 14px;border:1px solid color-mix(in srgb,var(--accent) 44%,rgba(255,255,255,.1));
  border-radius:16px;background:color-mix(in srgb,#0b0c0f 91%,var(--accent) 9%);
  box-shadow:0 14px 42px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.025) inset;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
.recs-admin-context-bar>div:first-child{display:flex;align-items:baseline;gap:10px;min-width:0}
.recs-admin-context-bar strong{font-size:.68rem;letter-spacing:.13em;color:var(--accent);white-space:nowrap}
.recs-admin-context-bar span{font-size:.82rem;font-weight:760;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recs-admin-context-actions{display:flex;gap:7px;flex:0 0 auto}
.recs-admin-context-actions a,.recs-admin-context-actions button{
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.055);color:var(--text);border-radius:10px;
  padding:7px 10px;font:inherit;font-size:.72rem;font-weight:720;text-decoration:none;cursor:pointer
}
.recs-admin-context-actions button{background:color-mix(in srgb,var(--accent) 16%,rgba(255,255,255,.04))}
@media(max-width:700px){
  .admin-nav-tab{display:none!important}
  .recs-admin-context-bar{top:calc(env(safe-area-inset-top,0px) + 60px);width:calc(100% - 20px);border-radius:13px;padding:8px 9px 8px 11px;gap:8px}
  .recs-admin-context-bar>div:first-child{display:block;line-height:1.12}
  .recs-admin-context-bar strong{display:block;font-size:.56rem;margin-bottom:2px}
  .recs-admin-context-bar span{display:block;max-width:46vw;font-size:.72rem}
  .recs-admin-context-actions a,.recs-admin-context-actions button{font-size:.66rem;padding:6px 8px}
}

/* ========================================================================
   PRE-BETA STABILITY / MOBILE POLISH — 2026-07-24
   ======================================================================== */

/* iOS focus safety: keep all form controls at the 16px threshold that prevents
   Safari from auto-zooming. The viewport still permits zooming OUT to 50%. */
@media (max-width:700px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  input,textarea,select{font-size:16px!important}
  button,a,[role="button"],label{touch-action:manipulation}
}

/* A Watching filter is a first-class pill, never a raw/native checkbox block. */
body.search-liquid .search-watching-only,
body.search-liquid label.search-watching-only{
  border-radius:999px!important;
  overflow:hidden!important;
  clip-path:inset(0 round 999px)!important;
}
@media(max-width:700px){
  body.search-liquid .search-watching-only,
  body.search-liquid label.search-watching-only{border-radius:13px!important;clip-path:inset(0 round 13px)!important}
}

/* Mobile media previews float entirely above the bottom nav. Keeping the card
   independent from the nav also makes the downward-dismiss gesture predictable. */
@media(max-width:700px){
  #film-modal{
    align-items:flex-end!important;
    justify-content:center!important;
    padding:calc(env(safe-area-inset-top,0px) + 58px) 8px calc(env(safe-area-inset-bottom,0px) + 78px)!important;
  }
  #film-modal .modal-card.media-preview-card{
    width:100%!important;
    max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 146px)!important;
    border-radius:24px!important;
    border:1px solid rgba(255,255,255,.14)!important;
    transform-origin:center bottom;
    touch-action:pan-y;
  }
  #film-modal .media-preview-card > #modal-content{
    max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 146px)!important;
    padding-bottom:4px!important;
  }
  #film-modal .modal-card.media-preview-card::before{
    content:"";
    position:absolute;
    z-index:125;
    top:7px;
    left:50%;
    transform:translateX(-50%);
    width:38px;
    height:4px;
    border-radius:999px;
    background:rgba(255,255,255,.34);
    pointer-events:none;
  }
  #film-modal .media-preview-card .modal-full-page-pill{
    position:sticky!important;
    bottom:4px!important;
    z-index:40!important;
    margin-top:.55rem!important;
    background:#17171b!important;
    box-shadow:0 -10px 24px rgba(17,17,20,.55)!important;
  }
}

/* @admin has one six-destination bottom row instead of a wrapped second row. */
@media(max-width:700px){
  body.mobile-nav-ready.admin-mobile-nav nav .nav-tabs{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:3px!important;
  }
  body.mobile-nav-ready.admin-mobile-nav nav .nav-tabs .nav-tab{
    display:flex!important;
    min-width:0!important;
    font-size:1.08rem!important;
  }
  body.mobile-nav-ready.admin-mobile-nav nav .nav-tabs .admin-nav-tab{display:flex!important}
  body.mobile-nav-ready.admin-mobile-nav nav .nav-tabs .admin-nav-tab::after{display:none!important}
}

/* Stats loading copy must remain legible against the solid cards. */
.stats-loading-metadata{
  color:var(--accent)!important;
  font-weight:900;
  letter-spacing:.01em;
  padding:1.15rem .15rem;
}

/* Calendar / episode information is hierarchy text, not a pile of nested cards. */
body.calendar-liquid .calendar-recent-row,
body.calendar-liquid .calendar-day-detail-item,
body.calendar-liquid .calendar-biggest-row{
  background:transparent!important;
  background-image:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  border-radius:0!important;
  border-left:0!important;
  border-right:0!important;
  border-top:0!important;
  padding-left:0!important;
  padding-right:0!important;
}
body.calendar-liquid .calendar-recent-row > *,
body.calendar-liquid .calendar-day-detail-item > *,
body.calendar-liquid .calendar-biggest-row > *{
  background:transparent!important;
  box-shadow:none!important;
}
body.episode-liquid .episode-detail-row,
body.episode-liquid .episode-detail-row > *,
body.episode-liquid .episode-detail-list > *{
  background:transparent!important;
  background-image:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  border-radius:0!important;
}
body.episode-liquid .episode-detail-row{
  border-left:0!important;border-right:0!important;border-top:0!important;
  padding-left:0!important;padding-right:0!important;
}

/* Timeline month blocks now match the solid expanded-month visual language. */
body.timeline-liquid .pf-timeline-block{
  background:#15161a!important;
  background-image:linear-gradient(145deg,#1a1b20,#131418)!important;
  border:1px solid rgba(255,255,255,.11)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.25)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
body.timeline-liquid .pf-timeline-count{color:var(--text)!important;opacity:.78}
body.timeline-liquid .pf-back{display:none!important}
@media(max-width:700px){
  body.timeline-liquid .tl-row{
    background:#1b1c21!important;
    border-color:rgba(255,255,255,.09)!important;
  }
}

/* The rating remove control is descriptive text, not another ambiguous X. */
.rating-clear-btn{
  width:auto!important;
  min-width:0!important;
  height:32px!important;
  min-height:32px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  font-size:.67rem!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
}
@media(max-width:700px){.rating-clear-btn{min-height:34px!important;padding-inline:11px!important;font-size:.7rem!important}}

/* Recently watched TV: compact mobile continuation rows. */
@media(max-width:700px){
  body.home-dashboard #recent-shows.home-list{gap:6px!important}
  body.home-dashboard .home-recent-show-row{
    min-height:72px!important;
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr) 24px!important;
    gap:9px!important;
    align-items:center!important;
    padding:6px 8px 6px 6px!important;
    border-radius:13px!important;
    background:#1b1c21!important;
    border:1px solid rgba(255,255,255,.085)!important;
  }
  body.home-dashboard .home-recent-show-art{
    width:48px!important;
    height:60px!important;
    border-radius:9px!important;
    overflow:hidden!important;
  }
  body.home-dashboard .home-recent-show-copy{min-width:0!important}
  body.home-dashboard .home-recent-show-row .home-row-title{
    font-size:.86rem!important;
    line-height:1.13!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.home-dashboard .home-recent-show-meta{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    margin-top:6px!important;
    min-width:0!important;
  }
  body.home-dashboard .home-recent-episode{
    display:inline-flex!important;
    min-height:24px!important;
    align-items:center!important;
    padding:0 7px!important;
    border-radius:999px!important;
    background:color-mix(in srgb,var(--accent) 13%,#202126)!important;
    color:var(--text)!important;
    font-size:.62rem!important;
    font-weight:900!important;
    white-space:nowrap!important;
  }
  body.home-dashboard .home-recent-when{
    min-width:0!important;
    color:var(--text2)!important;
    font-size:.62rem!important;
    font-weight:760!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.home-dashboard .home-recent-show-arrow{
    display:grid!important;
    place-items:center!important;
    width:24px!important;
    height:24px!important;
    border-radius:999px!important;
    color:var(--accent)!important;
    background:rgba(255,255,255,.05)!important;
    font-size:1.2rem!important;
    line-height:1!important;
  }
}

/* Six-tab admin slider uses the same one-row geometry as the six icons. */
@media(max-width:700px){
  body.mobile-nav-ready.admin-mobile-nav nav .nav-tabs:has(.nav-tab[data-page="home"].active){--mobile-nav-slider-left:8px;--mobile-nav-slider-width:calc((100% - 16px)/6)}
  body.mobile-nav-ready.admin-mobile-nav nav .nav-tabs:has(.nav-tab[data-page="search"].active){--mobile-nav-slider-left:calc(8px + (100% - 16px)/6);--mobile-nav-slider-width:calc((100% - 16px)/6)}
  body.mobile-nav-ready.admin-mobile-nav nav .nav-tabs:has(.nav-tab[data-page="recs"].active){--mobile-nav-slider-left:calc(8px + 2 * ((100% - 16px)/6));--mobile-nav-slider-width:calc((100% - 16px)/6)}
  body.mobile-nav-ready.admin-mobile-nav nav .nav-tabs:has(.nav-tab[data-page="social"].active){--mobile-nav-slider-left:calc(8px + 3 * ((100% - 16px)/6));--mobile-nav-slider-width:calc((100% - 16px)/6)}
  body.mobile-nav-ready.admin-mobile-nav nav .nav-tabs:has(.nav-tab[data-page="profile"].active){--mobile-nav-slider-left:calc(8px + 4 * ((100% - 16px)/6));--mobile-nav-slider-width:calc((100% - 16px)/6)}
  body.mobile-nav-ready.admin-mobile-nav nav .nav-tabs:has(.nav-tab[data-page="admin"].active){--mobile-nav-slider-left:calc(8px + 5 * ((100% - 16px)/6));--mobile-nav-slider-width:calc((100% - 16px)/6)}
}

/* Revamp review/comment likes: compact heart + count. Accent until liked, red after. */
.review-like-btn,.public-review-like-btn,.episode-comment-like-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--border2))!important;background:#202126!important;color:var(--accent)!important;border-radius:999px!important;min-width:46px!important;min-height:32px!important;padding:.35rem .55rem!important;font:900 .76rem/1 inherit!important;cursor:pointer!important;opacity:1!important}
.review-like-btn.liked,.public-review-like-btn.liked,.episode-comment-like-btn.liked{color:#f05252!important;border-color:rgba(240,82,82,.55)!important;background:rgba(240,82,82,.12)!important}.review-like-btn:disabled,.public-review-like-btn:disabled,.episode-comment-like-btn:disabled{opacity:.62!important;cursor:wait!important}.review-like-heart{font-size:1rem;line-height:1}

/* ========================================================================
   2026-07 LISTS REVIVAL + MOBILE BOTTOM-SHEET SWIPE
   ======================================================================== */
.media-list-chip{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:34px!important;padding:0 11px!important;margin:0!important;
  border:1px solid rgba(255,255,255,.11)!important;border-radius:11px!important;
  background:#202126!important;background-image:none!important;color:var(--text)!important;
  font:850 .7rem/1 inherit!important;cursor:pointer!important;white-space:nowrap!important;
  box-shadow:none!important;transition:border-color .13s ease,background .13s ease,transform .13s ease!important;
}
.media-list-chip:hover{transform:translateY(-1px)!important;border-color:var(--accent)!important;background:#25262c!important;color:var(--text)!important}
.media-list-chip .list-plus{color:var(--accent)!important;font-size:.9rem!important;font-weight:1000!important;margin-right:4px!important}
#film-modal .modal-ratings-row{gap:7px!important;align-items:center!important}
#film-modal .modal-ratings-row .media-list-chip{width:auto!important;min-width:72px!important}
body.media-liquid .media-type-score-row .media-list-chip{min-height:34px!important}
html[data-theme="light"] .media-list-chip{background:#eceef2!important;color:#1a1b1f!important;border-color:rgba(0,0,0,.13)!important}

.recs-list-picker-card{
  width:min(520px,calc(100vw - 28px))!important;max-height:min(80vh,720px)!important;overflow:auto!important;
  border-radius:24px!important;padding:18px!important;background:#15161a!important;background-image:none!important;
  border:1px solid rgba(255,255,255,.11)!important;box-shadow:0 28px 90px rgba(0,0,0,.58)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.recs-list-picker-title{font-size:1.16rem!important;font-weight:1000!important;color:var(--text)!important;letter-spacing:-.02em!important}
.recs-list-picker-loading,.recs-list-picker-empty{margin-top:12px;padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:#202126!important;color:var(--text2);font-size:.76rem;font-weight:760;line-height:1.5}
.recs-list-picker-media{display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;gap:10px!important;align-items:center!important;margin:10px 0 13px!important;padding:8px!important;border-radius:13px!important;background:#202126!important;border:1px solid rgba(255,255,255,.07)!important}
.recs-list-picker-media img,.recs-list-picker-ph{width:42px!important;height:58px!important;border-radius:8px!important;object-fit:cover!important;background:#24252b!important;display:grid!important;place-items:center!important}
.recs-list-picker-media strong{display:block!important;color:var(--text)!important;font-size:.78rem!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.recs-list-picker-media span{display:block!important;margin-top:3px!important;color:var(--text2)!important;font-size:.66rem!important}
.recs-list-picker-rows{display:grid!important;gap:6px!important}.recs-list-picker-row{width:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important;min-height:50px!important;padding:8px 9px!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:13px!important;background:#202126!important;background-image:none!important;color:var(--text)!important;text-align:left!important;font:inherit!important;cursor:pointer!important;box-shadow:none!important}
.recs-list-picker-row:hover{border-color:color-mix(in srgb,var(--accent) 48%,rgba(255,255,255,.09))!important;background:#25262b!important}.recs-list-picker-row.active{border-color:color-mix(in srgb,var(--accent) 58%,rgba(255,255,255,.09))!important;background:color-mix(in srgb,var(--accent) 10%,#202126)!important}.recs-list-picker-row strong{display:block!important;font-size:.76rem!important;font-weight:920!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.recs-list-picker-row small{display:block!important;margin-top:3px!important;color:var(--text2)!important;font-size:.63rem!important;font-weight:760!important}.recs-list-picker-state{display:inline-flex!important;align-items:center!important;min-height:28px!important;padding:0 9px!important;border-radius:9px!important;background:#15161a!important;border:1px solid rgba(255,255,255,.08)!important;color:var(--text2)!important;font-size:.64rem!important;font-weight:900!important}.recs-list-picker-row.active .recs-list-picker-state{color:var(--accent)!important}
.recs-list-picker-footer{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin-top:10px!important}.recs-list-picker-footer .secondary-btn,.recs-list-manage-link{min-height:42px!important;display:flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;background:#202126!important;color:var(--text)!important;border-color:rgba(255,255,255,.10)!important}
.recs-list-quick-create{display:none;margin-top:10px!important;padding:10px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:14px!important;background:#202126!important}.recs-list-quick-create.open{display:block!important}.recs-list-quick-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:7px!important}.recs-list-quick-input{width:100%!important;box-sizing:border-box!important;min-height:42px!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:12px!important;background:#15161a!important;color:var(--text)!important;padding:0 11px!important;font-size:16px!important;outline:none!important}.recs-list-quick-input:focus{border-color:var(--accent)!important}.recs-list-quick-options{display:flex!important;gap:10px!important;flex-wrap:wrap!important;margin-top:8px!important;color:var(--text2)!important;font-size:.67rem!important;font-weight:820!important}.recs-list-quick-options label{display:inline-flex!important;align-items:center!important;gap:5px!important}.recs-list-quick-options input{accent-color:var(--accent)!important}.recs-list-picker-status{min-height:16px!important;margin-top:7px!important;color:var(--text2)!important;font-size:.68rem!important;font-weight:800!important}

@media(max-width:700px){
  .modal-overlay.recs-bottom-sheet-overlay{align-items:flex-end!important;justify-content:center!important;padding:0!important;padding-top:calc(env(safe-area-inset-top,0px) + 56px)!important;padding-bottom:0!important}
  .recs-bottom-sheet{width:100%!important;max-width:none!important;max-height:88dvh!important;margin:0!important;border-radius:24px 24px 0 0!important;padding:19px 15px calc(22px + env(safe-area-inset-bottom,0px))!important;overscroll-behavior:contain!important;will-change:transform!important}
  .recs-bottom-sheet::before,.np-overlay.open .np-sheet::before{content:""!important;display:block!important;width:42px!important;height:4px!important;border-radius:999px!important;background:rgba(255,255,255,.23)!important;margin:-5px auto 13px!important;float:none!important}
  .np-overlay.open .np-sheet{will-change:transform!important;overscroll-behavior:contain!important}
  .recs-list-picker-card{max-height:88dvh!important}
  .recs-list-picker-footer{grid-template-columns:1fr 1fr!important}
  .recs-list-picker-row{min-height:54px!important}
  .media-list-chip{min-height:36px!important;padding:0 10px!important;font-size:.69rem!important}
  #film-modal .modal-ratings-row{flex-wrap:wrap!important}
}
@media(max-width:390px){.recs-list-picker-footer{grid-template-columns:1fr!important}.recs-list-quick-row{grid-template-columns:1fr!important}}
/* Keep the shared list picker solid even though its class ends in -card. */
html[data-theme="dark"] body .recs-list-picker-card{
  background:#15161a!important;background-image:none!important;background-color:#15161a!important;
  border-color:rgba(255,255,255,.11)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;opacity:1!important;
}


/* The active account/settings menu always sits above page controls and dialogs. */
body:has(.settings-panel.open) nav,
body:has(.settings-panel.open) > .nav-right{
  z-index:2147483000!important;
  overflow:visible!important;
  isolation:isolate!important;
}
body:has(.settings-panel.open) .nav-right:has(.settings-panel.open){
  z-index:2147483001!important;
  overflow:visible!important;
}
body:has(.settings-panel.open) .settings-panel.open{
  z-index:2147483002!important;
}

/* Desktop nav: notification bell and user menu use the same outlined surface. */
@media(min-width:701px){
  nav .inbox-nav-btn{
    border:1px solid color-mix(in srgb,var(--accent) 12%,var(--border));
    background:linear-gradient(180deg,var(--surface2),var(--input-bg));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  }
  nav .inbox-nav-btn:hover{
    border-color:color-mix(in srgb,var(--accent) 58%,var(--border));
    box-shadow:0 0 0 3px var(--accent-dim);
  }
}


/* ========================================================================
   GUEST EXIT CONTROL — always provide a visible route back to the landing page
   ======================================================================== */
.guest-landing-nav-btn{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.46rem .76rem;
  border:1px solid color-mix(in srgb,var(--accent) 42%,var(--border2));
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 10%,var(--surface2));
  color:var(--text);
  font:850 .72rem/1 inherit;
  letter-spacing:-.01em;
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.guest-landing-nav-btn:hover{
  transform:translateY(-1px);
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 18%,var(--surface2));
}
@media(max-width:700px){
  body.mobile-nav-ready > .nav-right.mobile-settings-only{
    width:auto!important;
    height:38px!important;
    gap:6px!important;
    display:flex!important;
    align-items:center!important;
  }
  body.mobile-nav-ready > .nav-right.mobile-settings-only #guest-landing-btn{
    display:inline-flex!important;
    width:auto!important;
    min-width:58px!important;
    max-width:none!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 .72rem!important;
    border-radius:999px!important;
    background:#101014!important;
    border:1px solid rgba(255,255,255,.16)!important;
    color:var(--text)!important;
    box-shadow:0 7px 18px rgba(0,0,0,.28)!important;
    font-size:.68rem!important;
    font-weight:900!important;
  }
  [data-theme="light"] body.mobile-nav-ready > .nav-right.mobile-settings-only #guest-landing-btn{
    background:#f1f2f5!important;
    border-color:rgba(0,0,0,.14)!important;
  }
}


/* Shared mobile form behavior — build 20260731-assets-1 */
@media (max-width: 767px) {
  input,
  textarea,
  select,
  [contenteditable="true"] {
    font-size: max(16px, 1rem);
  }
}

/* Shared media-card foundation. Page-specific classes can still control layout. */
.recs-media-card{position:relative;min-width:0;color:var(--text);text-decoration:none}
.recs-media-card__poster{position:relative;min-width:0;overflow:hidden;background:var(--surface2)}
.recs-media-card__image{display:block;width:100%;height:100%;object-fit:cover}
.recs-media-card__fallback{display:grid;place-items:center;width:100%;height:100%;background:var(--accent-dim)}
.recs-media-card__body{min-width:0}
.recs-media-card__title-row{display:flex;align-items:center;gap:.4rem;min-width:0}
.recs-media-card__title{min-width:0;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recs-media-card__meta{color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recs-media-card__description{color:var(--text2);line-height:1.42}
.recs-media-card__rating{display:inline-flex;gap:1px;flex:0 0 auto}
.recs-media-card__star{position:relative;color:var(--muted)}
.recs-media-card__star::after{content:'★';position:absolute;inset:0;width:var(--recs-star-fill,0%);overflow:hidden;color:#facc15}

/* Shared loading, empty, error, retry, and offline states. */
.recs-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.72rem;width:100%;min-height:180px;padding:1.5rem;text-align:center;border:1px solid var(--border);border-radius:20px;background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--text)}
.recs-state.is-compact{min-height:112px;padding:1rem}
.recs-state-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--accent-dim);color:var(--accent);font-size:1.2rem;font-weight:950}
.recs-state-copy{display:flex;flex-direction:column;gap:.32rem;max-width:520px}
.recs-state-copy strong{font-size:1rem;font-weight:900;letter-spacing:-.02em}
.recs-state-copy span{color:var(--text2);font-size:.82rem;line-height:1.48}
.recs-state--error .recs-state-icon{background:rgba(248,113,113,.12);color:#f87171}
.recs-state--offline .recs-state-icon{background:rgba(251,191,36,.12);color:#fbbf24}
.recs-state-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.12rem}
.recs-state-action{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:.62rem .85rem;border-radius:12px;font:800 .78rem/1 inherit;text-decoration:none;cursor:pointer}
.recs-state-action.primary{border:1px solid transparent;background:var(--accent);color:var(--accent-ink,#111)}
.recs-state-action.secondary{border:1px solid var(--border2);background:var(--surface2);color:var(--text)}
.recs-state-skeleton{width:100%}
.recs-offline-indicator{position:fixed;z-index:99990;left:50%;top:calc(.55rem + env(safe-area-inset-top));transform:translate(-50%,-140%);width:min(92vw,520px);padding:.65rem .85rem;border:1px solid rgba(251,191,36,.38);border-radius:999px;background:rgba(34,28,12,.96);color:#fde68a;box-shadow:0 10px 30px rgba(0,0,0,.35);font:800 .75rem/1.25 inherit;text-align:center;opacity:0;transition:transform .18s ease,opacity .18s ease;pointer-events:none}
.recs-offline-indicator.is-visible{transform:translate(-50%,0);opacity:1}
@media(max-width:700px){.recs-state{min-height:150px;border-radius:16px;padding:1.2rem}.recs-offline-indicator{top:calc(.4rem + env(safe-area-inset-top));font-size:.7rem}}
@media(prefers-reduced-motion:reduce){.recs-offline-indicator{transition:none}}

/* Shared filter controls */
.recs-filter-group{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;min-width:0}
.recs-filter-control{font-family:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button.recs-filter-control,.recs-filter-pill{min-height:40px;border:1px solid var(--border);border-radius:999px;background:var(--surface2);color:var(--text2);font:850 .78rem/1 inherit;padding:.62rem .86rem;cursor:pointer;transition:border-color .14s,color .14s,background .14s,transform .1s}
button.recs-filter-control:hover,.recs-filter-pill:hover{border-color:var(--border2);color:var(--text)}
button.recs-filter-control:active,.recs-filter-pill:active{transform:scale(.98)}
button.recs-filter-control.active,button.recs-filter-control[aria-pressed="true"],.recs-filter-pill.active,.recs-filter-toggle.active{border-color:color-mix(in srgb,var(--accent) 72%,var(--border));background:var(--accent-dim);color:var(--accent)}
.recs-filter-control:focus-visible,.recs-filter-select:focus-visible,.recs-filter-range:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.recs-filter-select-wrap{position:relative;display:inline-flex;align-items:center;max-width:100%}
.recs-filter-select-wrap:after{content:"⌄";position:absolute;right:.78rem;top:50%;transform:translateY(-55%);pointer-events:none;color:var(--text2);font-size:.8rem}
.recs-filter-select{appearance:none;-webkit-appearance:none;min-height:42px;max-width:100%;padding:.62rem 2rem .62rem .82rem!important;border:1px solid var(--border)!important;border-radius:12px!important;background:var(--surface2)!important;color:var(--text)!important;font:800 .82rem/1.1 inherit!important;cursor:pointer}
.recs-filter-toggle{user-select:none;-webkit-user-select:none}
.recs-filter-range{--recs-range-progress:0%;appearance:none;-webkit-appearance:none;height:28px;background:transparent;cursor:pointer;touch-action:none}
.recs-filter-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--accent) 0 var(--recs-range-progress),var(--border2) var(--recs-range-progress) 100%)}
.recs-filter-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border:3px solid var(--surface);border-radius:50%;background:var(--accent);box-shadow:0 3px 10px rgba(0,0,0,.3)}
.recs-filter-range::-moz-range-track{height:6px;border-radius:999px;background:var(--border2)}
.recs-filter-range::-moz-range-progress{height:6px;border-radius:999px;background:var(--accent)}
.recs-filter-range::-moz-range-thumb{width:18px;height:18px;border:3px solid var(--surface);border-radius:50%;background:var(--accent)}
.recs-filter-segmented{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:4px;border:1px solid var(--border);border-radius:14px;background:var(--input-bg);gap:4px!important}
.recs-filter-segmented>button{border:0!important;border-radius:10px!important;background:transparent!important;min-height:38px;padding:.55rem .72rem!important}
.recs-filter-segmented>button.active,.recs-filter-segmented>button[aria-pressed="true"]{background:var(--accent)!important;color:var(--accent-btn-text)!important;box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 24%,transparent)}
@media(max-width:760px){.recs-filter-group{gap:.42rem}.recs-filter-select-wrap{width:100%}.recs-filter-select{width:100%}button.recs-filter-control,.recs-filter-pill{min-height:42px;font-size:.8rem}.recs-filter-group[data-scrollable="true"]{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.recs-filter-group[data-scrollable="true"]::-webkit-scrollbar{display:none}}

/* Shared user/profile elements */
.recs-user-avatar{display:inline-grid;place-items:center;flex:0 0 auto;overflow:hidden;border-radius:50%;background:var(--accent-dim);border:1.5px solid var(--accent);color:var(--accent);font-weight:850;line-height:1}
.recs-user-avatar.is-small{width:30px;height:30px;font-size:.66rem}.recs-user-avatar.is-medium{width:42px;height:42px;font-size:.78rem}.recs-user-avatar.is-large{width:52px;height:52px;font-size:1rem}
.recs-user-avatar img{width:100%;height:100%;object-fit:cover}.recs-user-avatar-link{display:inline-flex;text-decoration:none;border-radius:50%}.recs-user-avatar-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.recs-username-link{color:var(--text);font-weight:850;text-decoration:none}.recs-username-link:hover{color:var(--accent)}
.recs-friend-btn{min-height:36px;padding:.48rem .8rem;border-radius:999px;border:1px solid var(--accent);background:var(--accent-dim);color:var(--accent);font:750 .78rem/1 inherit;cursor:pointer;white-space:nowrap}.recs-friend-btn:hover{background:var(--accent);color:var(--accent-btn-text)}.recs-friend-btn.is-pending{background:var(--input-bg);border-color:var(--border2);color:var(--muted)}.recs-friend-btn.is-accepted{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.4);color:#34d399}.recs-friend-btn:disabled{opacity:.6;cursor:default}
.recs-rating-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.32rem .55rem;border-radius:999px;background:var(--accent-dim);border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);color:var(--accent);font-size:.74rem;font-weight:850;white-space:nowrap}
.recs-profile-stat{display:inline-flex;align-items:baseline;gap:.28rem;padding:.42rem .65rem;border:1px solid var(--border);border-radius:999px;background:var(--surface2)}.recs-profile-stat strong{font-size:.88rem}.recs-profile-stat span{font-size:.72rem;color:var(--text2)}
.recs-activity-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:.75rem}.recs-activity-copy{min-width:0}.recs-activity-title{font-size:.84rem;line-height:1.35}.recs-activity-action{color:var(--text2);font-weight:650}.recs-activity-body{margin-top:.2rem;color:var(--text);font-size:.85rem;line-height:1.45}.recs-activity-meta{display:block;margin-top:.25rem;color:var(--muted);font-size:.72rem}.recs-activity-aside{align-self:center}
@media(max-width:640px){.recs-user-avatar.is-medium{width:38px;height:38px}.recs-activity-row{gap:.6rem}.recs-friend-btn{min-height:34px;padding:.44rem .68rem}}

/* Search missing-user result keeps the same rounded card language as other states. */
body.search-liquid .search-empty-note{
  border-radius:18px!important;
  overflow:hidden!important;
}

/* Desktop notification bell matches the Settings trigger; the notification card stays centered. */
@media(min-width:701px){
  nav .inbox-nav-btn:not(.nav-search-btn){
    width:auto!important;
    min-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 .7rem!important;
    border-radius:999px!important;
    border:1px solid color-mix(in srgb,var(--accent) 12%,var(--border))!important;
    background:linear-gradient(180deg,var(--surface2),var(--input-bg))!important;
    color:var(--text2)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  }
  nav .inbox-nav-btn:not(.nav-search-btn):hover{
    color:var(--accent)!important;
    border-color:color-mix(in srgb,var(--accent) 58%,var(--border))!important;
    background:var(--accent-dim)!important;
    box-shadow:0 0 0 3px var(--accent-dim)!important;
  }
}


/* Mobile notification count on the Social bell tab. Desktop inbox styling is unchanged. */
@media (max-width:700px){
  body.mobile-nav-ready .nav-tab[data-page="social"]{
    position:relative!important;
    overflow:visible!important;
  }
  body.mobile-nav-ready .nav-tab[data-page="social"] .mobile-social-badge{
    position:absolute!important;
    top:2px!important;
    right:calc(50% - 20px)!important;
    min-width:17px!important;
    width:auto!important;
    height:17px!important;
    padding:0 4px!important;
    border-radius:999px!important;
    background:var(--accent)!important;
    color:var(--accent-btn-text)!important;
    border:2px solid var(--bg)!important;
    box-sizing:border-box!important;
    font-size:.58rem!important;
    font-weight:900!important;
    line-height:13px!important;
    align-items:center!important;
    justify-content:center!important;
    pointer-events:none!important;
    z-index:4!important;
  }
}


/* Persistent mobile inbox badge and polished friend-request notifications */
.friend-request-notification{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center!important;
  gap:12px!important;
  padding:14px!important;
  border:1px solid var(--border2)!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,var(--surface2),var(--surface))!important;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
  overflow:hidden;
}
.friend-request-avatar{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-dim);border:1.5px solid var(--accent);
  color:var(--accent);font-size:.82rem;font-weight:800;flex:none;
}
.friend-request-copy{min-width:0}
.friend-request-copy .notification-title{font-size:.94rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.friend-request-copy .notification-sub{margin-top:2px;font-size:.77rem;color:var(--muted)}
.friend-request-actions{display:flex;gap:7px;align-items:center;flex:none}
.friend-request-btn{
  min-height:36px;padding:7px 13px;border-radius:12px;
  font:700 .78rem/1 inherit;cursor:pointer;transition:transform .16s ease,filter .16s ease;
}
.friend-request-btn:active{transform:scale(.97)}
.friend-request-btn.accept{background:var(--accent);border:1px solid var(--accent);color:var(--accent-btn-text)}
.friend-request-btn.decline{background:var(--surface3);border:1px solid var(--border2);color:var(--text2)}
@media(max-width:700px){
  .friend-request-notification{grid-template-columns:auto minmax(0,1fr);padding:13px!important}
  .friend-request-actions{grid-column:1/-1;width:100%;display:grid;grid-template-columns:1fr 1fr}
  .friend-request-btn{width:100%}
}

/* Mobile Social notifications: keep the heading inside its panel and preserve rounded request cards. */
@media (max-width:700px){
  body.social-liquid .social-notifications-section{
    padding:14px!important;
    overflow:visible!important;
  }
  body.social-liquid .social-notifications-section > .feed-label{
    display:block!important;
    margin:2px 4px 12px!important;
    padding:0!important;
    line-height:1.2!important;
  }
  body.social-liquid .social-notification-row{
    display:block!important;
    overflow:visible!important;
    padding:0!important;
    margin:0!important;
  }
  body.social-liquid .social-notification-row .friend-request-notification{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    border-radius:22px!important;
    overflow:hidden!important;
    clip-path:inset(0 round 22px);
  }
}

/* Notification controls, grouping, and timestamps */
.notification-item{
  position:relative;
  align-items:flex-start;
}
.notification-item.unread{
  background:color-mix(in srgb,var(--accent) 8%,var(--surface2));
  border-color:color-mix(in srgb,var(--accent) 42%,var(--border));
}
.notification-item.unread::before{
  content:"";
  position:absolute;
  left:-1px;
  top:14px;
  width:4px;
  height:28px;
  border-radius:0 999px 999px 0;
  background:var(--accent);
}
.notification-text{flex:1;min-width:0}
.notification-time{
  margin-top:.28rem;
  color:var(--muted);
  font-size:.69rem;
  font-weight:650;
}
.notification-actions{
  display:flex;
  align-items:center;
  gap:.42rem;
  flex:0 0 auto;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.notification-read,
.notification-clear-all{
  border:1px solid color-mix(in srgb,var(--accent) 52%,var(--border));
  border-radius:999px;
  background:var(--accent-dim);
  color:var(--accent);
  font:700 .72rem/1 inherit;
  padding:.48rem .7rem;
  cursor:pointer;
}
.notification-dismiss{
  border-radius:999px;
  padding:.48rem .7rem;
}
.notification-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0 0 .8rem;
  margin-bottom:.15rem;
  border-bottom:1px solid var(--border);
  color:var(--muted);
  font-size:.78rem;
  font-weight:750;
}
.notification-clear-all{white-space:nowrap}
.notification-empty{
  text-align:center;
  padding:1.35rem;
  color:var(--muted);
  font-size:.85rem;
}
.notification-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent-dim);
  border:1.5px solid var(--accent);
  color:var(--accent);
  font-weight:800;
  flex:0 0 auto;
}
.request-actions{align-self:center}
.request-accept{min-width:70px}

@media(max-width:700px){
  .notification-item{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:.7rem .75rem;
  }
  .notification-actions{
    grid-column:1/-1;
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .notification-actions button{width:100%;min-height:42px}
  .notification-toolbar{padding-inline:.1rem}
}

/* Media popup poster fit — preserve the full one-sheet instead of cropping it. */
#film-modal .media-preview-visual.has-preview-art{
  isolation:isolate;
  display:grid;
  place-items:center;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
#film-modal .media-preview-visual.has-preview-art::before{
  content:"";
  position:absolute;
  inset:-22px;
  z-index:0;
  background:inherit;
  filter:blur(20px) saturate(.8) brightness(.42);
  transform:scale(1.08);
  opacity:.9;
  pointer-events:none;
}
#film-modal .media-preview-visual.has-preview-art .modal-poster,
#film-modal .media-preview-visual.has-preview-art .modal-poster-sq{
  position:relative!important;
  z-index:1!important;
  width:auto!important;
  height:auto!important;
  max-width:calc(100% - 28px)!important;
  max-height:calc(100% - 28px)!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:16px!important;
  box-shadow:0 18px 48px rgba(0,0,0,.5)!important;
}
#film-modal .media-preview-visual.has-preview-art::after{
  z-index:2;
  background:linear-gradient(90deg,transparent 72%,rgba(17,17,20,.7) 100%)!important;
}
@media(max-width:700px){
  #film-modal .media-preview-visual{
    height:clamp(245px,38dvh,350px)!important;
  }
  #film-modal .media-preview-visual.has-preview-art .modal-poster,
  #film-modal .media-preview-visual.has-preview-art .modal-poster-sq{
    max-width:min(58vw,210px)!important;
    max-height:calc(100% - 24px)!important;
    border-radius:14px!important;
  }
  #film-modal .media-preview-visual.has-preview-art::after{
    background:linear-gradient(180deg,transparent 66%,#111114 100%)!important;
  }
  html[data-theme="light"] #film-modal .media-preview-visual.has-preview-art::after{
    background:linear-gradient(180deg,transparent 66%,#eef0f4 100%)!important;
  }
}

/* Recs mobile polish */
@media (max-width:760px), (pointer:coarse){
  #recs-pull-refresh{
    --pull:0px; position:fixed; z-index:10020; top:calc(env(safe-area-inset-top) + 5px); left:50%;
    display:flex; align-items:center; gap:8px; height:38px; padding:0 14px; border:1px solid var(--border);
    border-radius:999px; background:color-mix(in srgb,var(--surface) 94%,transparent); color:var(--text2);
    box-shadow:0 10px 28px rgba(0,0,0,.28); opacity:0; pointer-events:none;
    transform:translate3d(-50%,calc(-52px + var(--pull)),0) scale(.94); transition:opacity .14s,transform .16s;
    -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); font-size:.72rem;
  }
  #recs-pull-refresh.visible{opacity:1;transform:translate3d(-50%,calc(-52px + var(--pull)),0) scale(1)}
  #recs-pull-refresh.ready{border-color:var(--accent);color:var(--text)}
  .recs-pull-spinner{width:15px;height:15px;border-radius:50%;border:2px solid color-mix(in srgb,var(--text) 24%,transparent);border-top-color:var(--accent);transform:rotate(calc(var(--pull) * 3deg))}
  #recs-pull-refresh.refreshing .recs-pull-spinner{animation:recs-mobile-spin .65s linear infinite}
  #recs-pull-refresh.refreshing{left:50%!important;right:auto!important;transform:translate3d(-50%,20px,0) scale(1)!important;animation:none!important}
  @keyframes recs-mobile-spin{to{transform:rotate(360deg)}}

  .recs-haptic-tap{animation:recs-haptic-tap .2s ease-out!important}
  .recs-haptic-success{animation:recs-haptic-success .26s ease-out!important}
  @keyframes recs-haptic-tap{45%{transform:scale(.965)}100%{transform:scale(1)}}
  @keyframes recs-haptic-success{40%{transform:scale(.975)}70%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}100%{transform:scale(1)}}

  .feed-swipe-shell{position:relative;overflow:hidden;border-radius:20px;margin-bottom:.72rem;background:var(--surface2)}
  .feed-swipe-shell .feed-card{position:relative;z-index:2;margin:0!important;transition:transform .18s cubic-bezier(.2,.8,.2,1);will-change:transform;background:var(--surface)}
  .feed-swipe-shell.swiping .feed-card{transition:none}
  .feed-swipe-action{position:absolute;inset-block:0;width:112px;z-index:1;display:flex;align-items:center;justify-content:center;gap:7px;font-size:.78rem;color:var(--accent-btn-text);opacity:.25;transition:opacity .12s}
  .feed-swipe-like{left:0;background:var(--accent)}
  .feed-swipe-view{right:0;background:color-mix(in srgb,var(--accent) 70%,#101114)}
  .feed-swipe-shell.show-like .feed-swipe-like,.feed-swipe-shell.show-view .feed-swipe-view{opacity:1}

  /* Shared mobile filter lanes stay reachable and scroll cleanly beneath the nav. */
  :is(.activity-filter-row,.filter-row,.filters-row,.catalog-filters,.library-filter-row,.timeline-filters){
    position:sticky!important; top:calc(env(safe-area-inset-top) + 58px)!important; z-index:28!important;
    overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
    box-shadow:0 8px 24px rgba(0,0,0,.22)!important;
  }
  :is(.activity-filter-row,.filter-row,.filters-row,.catalog-filters,.library-filter-row,.timeline-filters)::after{
    content:""; position:absolute; inset:-8px -4px; z-index:-1; pointer-events:none;
    background:linear-gradient(180deg,var(--bg) 35%,transparent); border-radius:inherit;
  }
  .social-liquid #activity-filter-row.activity-filter-row{top:calc(env(safe-area-inset-top) + 58px)!important;margin-bottom:.5rem!important}
}
@media (prefers-reduced-motion:reduce){
  #recs-pull-refresh,.feed-swipe-shell .feed-card{transition:none!important}
  .recs-haptic-tap,.recs-haptic-success{animation:none!important}
}


/* Reliability footer and diagnostics */
.recs-reliability-footer{width:min(1180px,calc(100% - 32px));margin:42px auto calc(96px + env(safe-area-inset-bottom));padding:18px 0 4px;border-top:1px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;gap:14px;color:var(--muted,#9ca0aa)}
.recs-report-bug,.recs-diagnostics-link{appearance:none;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.045);color:inherit;padding:9px 14px;font:inherit;font-size:12px;font-weight:800;letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:.18s ease}
.recs-report-bug:hover,.recs-diagnostics-link:hover,.recs-report-bug.is-copied{color:#fff;border-color:color-mix(in srgb,var(--accent,#8f949c) 65%,transparent);background:color-mix(in srgb,var(--accent,#8f949c) 15%,transparent)}
.diagnostics-page{width:min(1040px,calc(100% - 32px));margin:0 auto;padding:110px 0 50px}
.diagnostics-hero{margin-bottom:24px}.diagnostics-kicker{text-transform:uppercase;letter-spacing:.14em;font-weight:900;font-size:11px;color:var(--accent,#8f949c)}
.diagnostics-hero h1{font-size:clamp(34px,6vw,64px);line-height:.95;margin:10px 0 12px}.diagnostics-hero p{max-width:680px;color:var(--muted,#a3a4ac);font-weight:650}
.diagnostics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.diagnostics-card{border:1px solid rgba(255,255,255,.1);background:rgba(20,21,26,.86);border-radius:24px;padding:20px;box-shadow:0 22px 55px rgba(0,0,0,.2)}
.diagnostics-card.full{grid-column:1/-1}.diagnostics-card h2{margin:0 0 14px;font-size:17px}.diagnostics-row{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-top:1px solid rgba(255,255,255,.07)}.diagnostics-row:first-of-type{border-top:0}.diagnostics-row span{color:var(--muted,#9ca0aa)}.diagnostics-row strong{text-align:right;overflow-wrap:anywhere}
.diagnostics-status{display:inline-flex;align-items:center;gap:7px}.diagnostics-status::before{content:'';width:9px;height:9px;border-radius:50%;background:#7f838d}.diagnostics-status.ok::before{background:#42c77a;box-shadow:0 0 16px rgba(66,199,122,.55)}.diagnostics-status.bad::before{background:#ff5d68}
.diagnostics-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.diagnostics-action{border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.05);color:#fff;padding:10px 13px;font-weight:850;cursor:pointer}.diagnostics-action.primary{background:var(--accent,#8f949c);color:#0b0b0d;border-color:transparent}
.diagnostics-failures{display:grid;gap:10px}.diagnostics-failure{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);border-radius:16px;padding:14px}.diagnostics-failure-head{display:flex;justify-content:space-between;gap:12px;font-weight:850}.diagnostics-failure code{display:block;color:#c9cad1;white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;margin-top:7px}.diagnostics-empty{color:var(--muted,#9ca0aa);padding:12px 0}
@media(max-width:760px){.recs-reliability-footer{margin-top:28px;flex-wrap:wrap}.diagnostics-page{padding-top:86px}.diagnostics-grid{grid-template-columns:1fr}.diagnostics-card.full{grid-column:auto}.diagnostics-row{display:block}.diagnostics-row strong{display:block;text-align:left;margin-top:4px}.diagnostics-actions>*{flex:1}}

/* Reliability tools polish: persistent dark controls and diagnostics layout. */
.recs-reliability-footer{
  position:relative;
  z-index:5;
}
.recs-report-bug,.recs-diagnostics-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  border:1px solid rgba(255,255,255,.13)!important;
  background:linear-gradient(180deg,rgba(28,29,34,.98),rgba(15,16,19,.98))!important;
  color:#f4f4f6!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 10px 24px rgba(0,0,0,.22);
}
.recs-report-bug:hover,.recs-diagnostics-link:hover,.recs-report-bug.is-copied{
  border-color:color-mix(in srgb,var(--accent,#8f949c) 62%,rgba(255,255,255,.12))!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent,#8f949c) 16%,#202126),#111216)!important;
  color:#fff!important;
}
.diagnostics-body{
  min-height:100vh;
  background:#090a0d!important;
  color:#f5f5f7;
}
.diagnostics-page{
  position:relative;
  z-index:1;
  padding-top:calc(118px + env(safe-area-inset-top));
}
.diagnostics-hero{
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(145deg,rgba(22,23,28,.98),rgba(12,13,16,.98));
  border-radius:26px;
  padding:24px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.diagnostics-card{
  background:linear-gradient(150deg,rgba(21,22,27,.99),rgba(12,13,16,.99))!important;
  border-color:rgba(255,255,255,.09)!important;
}
.diagnostics-failure{
  background:#101116!important;
  border-color:rgba(255,255,255,.08)!important;
}
.diagnostics-action{
  min-height:42px;
  border:1px solid rgba(255,255,255,.13)!important;
  background:linear-gradient(180deg,#202126,#121318)!important;
  color:#f5f5f7!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 20px rgba(0,0,0,.18);
}
.diagnostics-action.primary{
  border-color:color-mix(in srgb,var(--accent,#8f949c) 60%,rgba(255,255,255,.12))!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent,#8f949c) 24%,#24252b),#14151a)!important;
  color:#fff!important;
}
@media(max-width:760px){
  .diagnostics-page{
    width:calc(100% - 24px);
    padding-top:calc(112px + env(safe-area-inset-top))!important;
    padding-bottom:calc(120px + env(safe-area-inset-bottom));
  }
  .diagnostics-hero{padding:20px;border-radius:22px;margin-bottom:14px}
  .diagnostics-hero h1{font-size:38px;line-height:1;margin-top:8px}
  .diagnostics-grid{gap:12px}
  .diagnostics-card{padding:17px;border-radius:20px}
  .recs-reliability-footer{width:calc(100% - 24px);gap:10px}
  .recs-report-bug,.recs-diagnostics-link{flex:1;min-width:0}
}

/* Reliability controls: keep visible without colliding with app navigation. */
.recs-reliability-footer{
  position:fixed!important;
  right:20px;
  bottom:20px;
  left:auto;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  border-top:0!important;
  z-index:1200!important;
  justify-content:flex-end;
  gap:8px;
}
@media(max-width:760px){
  .recs-reliability-footer{
    left:12px;
    right:12px;
    bottom:calc(82px + env(safe-area-inset-bottom));
    width:auto!important;
    margin:0!important;
    padding:0!important;
    flex-wrap:nowrap;
  }
  .recs-report-bug,.recs-diagnostics-link{
    min-height:42px;
    flex:1 1 0;
  }
}

/* Recommendation export control */
.recs-result-head-row{display:flex;align-items:stretch;gap:.35rem}
.recs-result-head-row>.recs-collapse-head{flex:1;min-width:0}
.recs-picks-share{align-self:center;width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;margin-right:.7rem;border:1px solid var(--border2);border-radius:10px;background:var(--card2,#191a1f);color:var(--text,#f4f4f6);cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.recs-picks-share:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--card2,#191a1f));transform:translateY(-1px)}
.recs-picks-share:active{transform:scale(.94)}
.recs-picks-share svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){.recs-result-head-row{align-items:center}.recs-picks-share{width:30px;height:30px;flex-basis:30px;margin-right:.55rem;border-radius:9px}.recs-picks-share svg{width:15px;height:15px}}


/* Settings menu visibility and reliability tools placement. */
.recs-reliability-footer{display:none!important}
.settings-panel .settings-import-stats-btn,
.settings-panel button,
.settings-panel a{font-size:14px!important;line-height:1.25!important;min-height:42px}
.settings-panel .settings-label{font-size:12px!important}
#account-btn,
.nav-right .account-btn,
.nav-right [data-account-btn]{min-width:42px;min-height:42px;font-size:14px!important}
body.guest-page #account-btn,
body.landing-page #account-btn{padding:10px 15px!important;min-width:auto!important;font-weight:850}
@media(max-width:760px){
  .settings-panel .settings-import-stats-btn,.settings-panel button,.settings-panel a{font-size:15px!important;min-height:45px}
}
#nav-email.nav-user-btn{min-width:46px!important;min-height:42px!important;padding:9px 13px!important;font-size:14px!important;font-weight:850!important}
@media(max-width:700px){
  #recs-data-tools-modal.recs-modal-overlay{align-items:center!important;justify-content:center!important;padding:1rem!important}
  #recs-data-tools-modal .recs-modal-panel{width:min(94vw,560px)!important;max-height:min(82dvh,760px)!important;border-radius:22px!important;transform:translateY(10px) scale(.985)!important}
  #recs-data-tools-modal.open .recs-modal-panel{transform:translateY(0) scale(1)!important}
  body.mobile-nav-ready > .nav-right.mobile-settings-only #nav-email{width:44px!important;height:44px!important;font-size:1.12rem!important}
}

/* Recs results: fixed heading and rationale cards for every ranked pick. */
.recs-results-static-head{cursor:default!important;pointer-events:none!important}
.recs-secondary-why{margin-top:.7rem!important;padding:.72rem .82rem!important;border-radius:14px!important}
.recs-secondary-why .recs-why-label{font-size:.66rem!important}
.recs-secondary-why .recs-why-text{font-size:.78rem!important;line-height:1.45!important}
.page-export-share{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--border2);border-radius:11px;background:var(--input-bg);color:var(--text);cursor:pointer}
.page-export-share svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.page-export-share:hover{border-color:var(--accent);color:var(--accent)}
.stats-title-wrap,.dna-export-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:.75rem!important}

/* Compact recommendation reasoning and give mobile media previews a little more usable room. */
.recs-secondary-why{
  margin-top:.55rem!important;
  padding:.58rem .7rem!important;
  border-radius:12px!important;
}
.recs-secondary-why .recs-why-label{
  margin-bottom:.18rem!important;
  font-size:.64rem!important;
}
.recs-secondary-why .recs-why-text{
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  font-size:.76rem!important;
  line-height:1.35!important;
}

@media(max-width:700px){
  #film-modal{
    padding-top:calc(env(safe-area-inset-top,0px) + 48px)!important;
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 72px)!important;
  }
  #film-modal .modal-card.media-preview-card{
    max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 124px)!important;
    transform:translateY(-4px)!important;
  }
  #film-modal.open .modal-card.media-preview-card{
    transform:translateY(-4px)!important;
  }
  #film-modal .media-preview-card > #modal-content{
    max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 124px)!important;
    padding-bottom:12px!important;
  }
  #film-modal .media-preview-card .modal-quick-actions{
    padding-bottom:6px!important;
  }
  #film-modal .media-preview-card .modal-full-page-pill{
    bottom:8px!important;
  }
}

/* Settings menu: viewport-safe accent controls and a focused blurred backdrop. */
body:has(#settings-panel.open)::before,
body:has(.settings-panel.open)::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:2147482980;
  pointer-events:none;
  background:rgba(5,6,9,.38);
  -webkit-backdrop-filter:blur(8px) saturate(90%);
  backdrop-filter:blur(8px) saturate(90%);
}
#settings-panel.settings-panel.open,
.settings-panel.open{
  z-index:2147483000!important;
  box-sizing:border-box!important;
  width:min(330px,calc(100vw - 24px))!important;
  max-width:calc(100vw - 24px)!important;
  max-height:min(82dvh,760px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
}
.settings-panel .color-presets{
  display:grid!important;
  width:100%!important;
  min-width:0!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:9px!important;
  box-sizing:border-box!important;
}
.settings-panel .color-preset{
  width:min(100%,44px)!important;
  height:auto!important;
  aspect-ratio:1!important;
  max-width:44px!important;
  min-width:0!important;
  justify-self:center!important;
  box-sizing:border-box!important;
}
.settings-panel .color-picker-row,
.settings-panel .color-picker-row label{min-width:0!important;max-width:100%!important}
.settings-panel #custom-color{flex:0 0 50px!important;width:50px!important;max-width:50px!important}
@media(max-width:700px){
  #settings-panel.settings-panel.open,
  .settings-panel.open{
    left:auto!important;
    right:10px!important;
    width:min(340px,calc(100vw - 20px))!important;
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 92px - env(safe-area-inset-top))!important;
    padding:1rem!important;
  }
  .settings-panel .color-presets{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important}
  .settings-panel .color-preset{max-width:42px!important}
}


/* Final settings-menu containment: all six accents stay on one row. */
body.settings-menu-open::before,
body:has(#settings-panel.open)::before,
body:has(.settings-panel.open)::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:2147482980;
  pointer-events:none;
  background:rgba(5,6,9,.42);
  -webkit-backdrop-filter:blur(9px) saturate(88%);
  backdrop-filter:blur(9px) saturate(88%);
}
#settings-panel.settings-panel.open,
.settings-panel.open{
  width:min(370px,calc(100vw - 24px))!important;
  max-width:calc(100vw - 24px)!important;
  overflow-x:hidden!important;
}
.settings-panel .color-presets{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
}
.settings-panel .color-preset{
  width:100%!important;
  max-width:40px!important;
  min-width:0!important;
  justify-self:center!important;
  aspect-ratio:1!important;
}
.recs-secondary-why .recs-why-text{
  display:block!important;
  overflow:visible!important;
  -webkit-line-clamp:unset!important;
}
@media(max-width:700px){
  #settings-panel.settings-panel.open,.settings-panel.open{
    width:min(360px,calc(100vw - 20px))!important;
    max-width:calc(100vw - 20px)!important;
  }
  .settings-panel .color-presets{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:6px!important}
  .settings-panel .color-preset{max-width:36px!important}
}


/* Shared generated-photo preview */
html.recs-photo-preview-open,
body.recs-photo-preview-open { overflow: hidden !important; }
.recs-photo-preview {
  position: fixed;
  inset: 0;
  z-index: 2147483200;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background: rgba(3,3,5,.78);
  -webkit-backdrop-filter: blur(16px) saturate(.8);
  backdrop-filter: blur(16px) saturate(.8);
  opacity: 0;
  transition: opacity .16s ease;
}
.recs-photo-preview.open { opacity: 1; }
.recs-photo-preview-card {
  width: min(1040px, 100%);
  max-height: min(92dvh, 980px);
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  background: #111115;
  box-shadow: 0 30px 90px rgba(0,0,0,.62);
  transform: translateY(12px) scale(.985);
  transition: transform .18s ease;
}
.recs-photo-preview.open .recs-photo-preview-card { transform: translateY(0) scale(1); }
.recs-photo-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: #151519;
}
.recs-photo-preview-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .13em;
}
.recs-photo-preview-head h2 { margin: 0; color: #f7f7fa; font-size: clamp(21px,3vw,30px); line-height: 1.08; }
.recs-photo-preview-copy { margin: 7px 0 0; color: #9d9da7; font-size: 14px; line-height: 1.4; }
.recs-photo-preview-close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: #222229;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
}
.recs-photo-preview-stage {
  min-height: 0;
  overflow: auto;
  display: grid;
  place-items: start center;
  padding: 22px;
  background:
    linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.025) 75%),
    linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.025) 75%),
    #09090c;
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
  overscroll-behavior: contain;
}
.recs-photo-preview-image {
  display: block;
  width: min(100%, 620px);
  height: auto;
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  background: #0b0b0e;
}
.recs-photo-preview-actions {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 12px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.08);
  background: #151519;
}
.recs-photo-preview-actions > button,
.recs-photo-preview-actions > a {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 15px;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
}
.recs-photo-preview-save { background: var(--accent) !important; color: var(--accent-btn-text,#111) !important; border-color: transparent !important; }
.recs-photo-preview-download { background: #25252c !important; color: #f7f7fa !important; border: 1px solid rgba(255,255,255,.11) !important; }
.recs-photo-preview-actions p { grid-column: 1 / -1; margin: 0; color: #8f8f99; font-size: 12px; line-height: 1.4; text-align: center; }
.recs-photo-preview-mini-spinner { width: 17px; height: 17px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: recsPhotoSpin .7s linear infinite; }
@keyframes recsPhotoSpin { to { transform: rotate(360deg); } }

/* Full-document navigation paint guard */
#recs-page-transition-curtain {
  position: fixed;
  inset: -2px;
  z-index: 2147483646;
  pointer-events: none;
  background: #0c0c0e;
  opacity: 0;
  visibility: hidden;
  transition: opacity .08s linear, visibility 0s linear .08s;
  transform: translateZ(0);
}
#recs-page-transition-curtain.show,
html.recs-page-leaving #recs-page-transition-curtain {
  opacity: 1;
  visibility: visible;
  transition: none;
}

@media (max-width: 700px) {
  .recs-photo-preview { padding: max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)); place-items: stretch; }
  .recs-photo-preview-card { width: 100%; height: calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom))); max-height: none; border-radius: 22px; }
  .recs-photo-preview-head { padding: 18px 16px 14px; }
  .recs-photo-preview-copy { font-size: 13px; }
  .recs-photo-preview-stage { padding: 14px; align-items: start; }
  .recs-photo-preview-image { width: min(100%, 520px); border-radius: 14px; }
  .recs-photo-preview-actions { position: sticky; bottom: 0; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); gap: 9px; }
  .recs-photo-preview-actions > button,
  .recs-photo-preview-actions > a { min-height: 48px; font-size: 14px; border-radius: 13px; }
}