@import url("/js/tokens.css");
@import url("/js/styles/shell.css");
@import url("/js/styles/modals.css");
@import url("/js/styles/mobile-interaction-guards.css");

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

[data-theme="dark"], [data-theme="light"]{
  /* Temporary compatibility layer. Theme values are owned by tokens.css. */
  --bg: var(--recs-color-bg); --surface: var(--recs-color-surface); --surface2: var(--recs-color-surface-raised);
  --border: var(--recs-color-border); --border2: var(--recs-color-border-strong);
  --text: var(--recs-color-text); --text2: var(--recs-color-text-secondary); --muted: var(--recs-color-text-muted);
  --nav-bg: var(--recs-color-nav); --panel-bg: var(--recs-color-panel);
  --auth-bg: var(--recs-color-auth); --input-bg: var(--recs-color-input);
}
:root{ --accent: #FFFFFF; --accent-dim: rgba(255,255,255,0.16); --accent-btn-text: #0c0c0e; }

body{ background: var(--bg); color: var(--text); font-family: var(--recs-font-sans); 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; }

/* SHARED COMPONENTS */
.recs-surface-panel,
.recs-surface-card,
.recs-surface-inner,
.recs-surface-muted{
  background-image:none;
  border:1px solid var(--recs-surface-border);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.recs-surface-panel{background-color:var(--recs-surface-panel);border-radius:var(--recs-surface-radius-panel);box-shadow:var(--recs-surface-shadow)}
.recs-surface-card{background-color:var(--recs-surface-card);border-radius:var(--recs-surface-radius-card);box-shadow:var(--recs-surface-shadow)}
.recs-surface-inner{background-color:var(--recs-surface-inner);border-radius:var(--recs-surface-radius-card)}
.recs-surface-muted{background-color:var(--recs-surface-muted);border-radius:var(--recs-radius-md)}
.recs-surface-interactive{
  cursor:pointer;
  transition:background-color var(--recs-duration-fast) var(--recs-ease-standard),border-color var(--recs-duration-fast) var(--recs-ease-standard),box-shadow var(--recs-duration-fast) var(--recs-ease-standard),transform var(--recs-duration-fast) var(--recs-ease-standard);
}
.recs-surface-interactive:hover{background-color:var(--recs-surface-hover);border-color:var(--recs-surface-border-hover);box-shadow:var(--recs-surface-shadow-hover);transform:translateY(-1px)}
.recs-surface-interactive:focus-visible{outline:2px solid var(--recs-color-accent);outline-offset:3px;border-color:var(--recs-color-accent)}
.recs-surface-selected,.recs-surface-interactive[aria-selected="true"]{background-color:var(--recs-surface-selected);border-color:var(--recs-color-accent);box-shadow:0 0 0 1px var(--recs-color-accent-soft)}
.recs-surface-interactive:disabled,.recs-surface-interactive[aria-disabled="true"]{cursor:not-allowed;opacity:.5;transform:none;box-shadow:none}
.card{ background:var(--recs-surface-card); border:1px solid var(--recs-surface-border-strong); border-radius:var(--recs-card-radius); padding:1.4rem; }
@media (hover:none),(pointer:coarse){.recs-surface-interactive:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.recs-surface-interactive{transition:none}}
.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%; }

/* Keyboard and assistive-technology baseline. Kept independent of page-root
   spacing so nested semantic landmarks cannot inherit mobile shell clearance. */
.recs-skip-link{position:fixed;z-index:var(--z-emergency);top:max(8px,env(safe-area-inset-top));left:12px;padding:.72rem 1rem;border-radius:12px;background:var(--accent);color:var(--accent-btn-text);font-weight:850;text-decoration:none;transform:translateY(-180%);box-shadow:0 8px 28px rgba(0,0,0,.48)}
.recs-skip-link:focus{transform:none}
:where(a[href],button,input,textarea,select,summary,[role="button"],[role="tab"],[tabindex="0"]):focus-visible{outline:3px solid var(--accent);outline-offset:3px;box-shadow:0 0 0 2px var(--bg,#0c0c0e)}
:where(input,textarea,select):focus-visible{border-color:var(--accent)}
.sr-only,.recs-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}.recs-skip-link{transition:none}:where(*, *::before, *::after){animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.skeleton-line,.skeleton-thumb,.shimmer{animation:none!important}}
@media (max-width:480px){textarea,input[type="text"]{font-size:16px;}}
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; } }


@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} }





/* BADGES */
.badge{ font-size:0.68rem; font-weight:500; padding:2px 8px; border-radius:20px; }








@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 */


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 */

/* 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){

  /* 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; }
  
}




















/* ── 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; }



/* Profile emoji next to username */
.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 */
.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-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)); }


@media (max-width:600px){ .type-tabs.is-slidable .type-tab{ user-select:none; -webkit-user-select:none; } }


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



.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; }



/* Latest mobile polish */




/* Mobile episode dropdown reliability */


/* Compact full-page CTA inside media modal header */




.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; }


@media (max-width:600px){

  .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-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; }
  
  
  
  .result-title-row{ align-items:flex-start; }
  .result-title{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
}

/* Media page top spacing: keeps full info header below sticky/mobile nav */



/* TASTE MATCH */

/* Tool buttons / review likes / watching calendar */

.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:var(--recs-color-card-inner); border:1px solid rgba(255,255,255,.08); }
.calendar-day.level-1{ background:color-mix(in srgb, var(--accent) 28%, var(--recs-color-card-inner)); border-color:color-mix(in srgb, var(--accent) 36%, var(--recs-color-card-inner)); }
.calendar-day.level-2{ background:color-mix(in srgb, var(--accent) 48%, var(--recs-color-card-inner)); border-color:color-mix(in srgb, var(--accent) 56%, var(--recs-color-card-inner)); }
.calendar-day.level-3{ background:color-mix(in srgb, var(--accent) 70%, var(--recs-color-card-inner)); border-color:color-mix(in srgb, var(--accent) 76%, var(--recs-color-card-inner)); }
.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:700px){
  .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 */
.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 (max-width:700px){
  .modal-quick-actions{ gap:6px; }
  
  
}


/* PROFILE TOOL SEARCH + FAVORITES */

/* GENRE WHEEL */
.genre-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:0.7rem; }



/* Card header quick actions alignment */
.modal-quick-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:0.72rem; }
@media (max-width:560px){
  .modal-quick-actions{ gap:7px; }
}


/* polish + performance */
button,.secondary-btn,.primary-btn,.rec-card,.ph-card,.search-result{ transition-timing-function:cubic-bezier(.2,.8,.2,1); }
.secondary-btn:hover,.primary-btn:hover{ transform:translateY(-1px); }
.secondary-btn:active,.primary-btn:active{ transform:scale(.97); }
.rec-card:hover,.ph-card:hover,.search-result:hover{ transform:translateY(-1px); }
.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; opacity:.09; }
}
.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 */


/* Search tool button matches muted favorite-tool default */

/* 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; } }



/* Next batch: profile depth + cleaner empty states */
.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; }
.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; }
.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); }





@media (max-width:700px){
  .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:700px){ .recap-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .recap-month{ min-width:40px; } }

/* Top 4 editor */

.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 ─────────────────────────────────────────────── */

/* Profile fun pages cleanup: compact compare, kept page buttons, iPhone-friendly wrapping */

/* Compare/stat cleanup */


/* Stats / compare clarification polish */
.style-trait-label{ color: var(--text2); font-weight: 850; }


/* Match breakdown + best matches polish */


.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{
  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){
  
  
  
  .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{ 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 */
#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; gap: 12px; }
.brain-recs-btn{ width: 42px; height: 42px; font-size: 1.22rem; transform: translateY(1px); border-color: var(--border2); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.brain-recs-btn:hover{ transform: translateY(-1px); }

@media (max-width: 640px){
  
  
  .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; 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; height: 38px; font-size: 1.12rem; }
  .recs-title-row{ gap: 10px; }
}


/* Timeline month drilldown + final mobile polish */
.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; cursor:pointer; }
.match-generate-btn.thinking{ opacity:.72; cursor:wait; }
@media (max-width: 700px){
  .month-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; }
  
  
  .match-empty-generate{ min-height:74px; }
}
@media (max-width: 430px){
  .match-rec-card{ grid-template-columns:48px minmax(0,1fr); }
  .match-rec-card img,.match-rec-card .match-rec-ph{ width:48px; height:70px; }
  .brain-recs-btn{ width:36px; height:36px; }
}
@media (max-width: 600px){
  .rec-title-row,.search-title,.result-title{ flex-wrap:wrap; gap:4px; }
}
.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); }
@media (prefers-reduced-motion: reduce){ .brain-recs-btn{ animation:none; } }

/* Timeline show-all sits beside month title */

.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; } }


.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:"..."; }
}


/* Mobile collapsible profile highlights */

/* Social feature batch */
.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}.explore-icon{font-size:1.65rem;margin-bottom:.55rem}
@media (max-width:700px){.search-filter-row{grid-template-columns:1fr}.recommend-btn{width:100%}.review-comment-form{flex-direction:column}.mini-media-row img{width:30px;height:40px}}


.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; }
.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); }
@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{ width:46px; height:64px; }
}

/* Top 10 profile carousel cleanup */

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

/* Review wall poster-left layout */

@media (max-width:700px){
  .suggested-card{max-width:none;}
}

/* Final polish: Top 10 ranked carousel, bio, reviews, recommendations */
.muted-mini-btn{border-radius:999px;}
.suggested-tabs{display:flex;gap:14px;margin-bottom:1.15rem;position:relative;z-index:1;}
.suggest-toggle{margin:0;}
.recommend-btn{border-radius:999px;min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
@media (max-width:700px){
  
  .suggested-tabs{gap:10px;justify-content:center;}
}

/* Tight review box + similar fallback polish */


.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){
  
  
  .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);
  border-color: var(--border2);
  box-shadow: none;
}
.brain-recs-btn:hover{ opacity: .82; background: var(--input-bg); }
.type-tabs.dragging{ cursor: grabbing; }
.type-tabs.dragging .type-tab{ pointer-events:none; }
@media (max-width:700px){
  .type-tabs{ touch-action: pan-y; }
  
  .rec-actions{ min-width: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 */

@media (max-width: 760px){
  body.profile-redesign .emoji-edit-btn{
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }
  body.profile-redesign .stat-card{
    min-height: 58px;
    padding: .56rem .35rem;
    border-radius: 15px;
  }
  body.profile-redesign .stat-num{
    font-size: 1.08rem;
  }
  body.profile-redesign .stat-label{
    font-size: .58rem;
    letter-spacing: .04em;
  }
  body.profile-redesign .prof-sub-row{
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  body.profile-redesign .sort-select{
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 390px){
  body.profile-redesign .stat-label{ font-size: .54rem; }
}

/* Full liquid-glass page refresh batch */

.liquid-page .page-heading,.liquid-page .recs-pulse{
  letter-spacing: -0.045em;
}
.liquid-page .card,.liquid-page .rec-card,.liquid-page .search-result,.liquid-page .match-rec-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 .rec-card:hover,.liquid-page .search-result: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 .recs-header{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.liquid-page .recent-label{
  color: var(--text);
  letter-spacing: .1em;
}
.liquid-page .type-tabs,.liquid-page .activity-filter-row,.liquid-page .suggested-tabs,.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;
  border-color: color-mix(in srgb, var(--border2) 80%, var(--accent) 10%);
}
.liquid-page .secondary-btn,.liquid-page .mini-btn,.liquid-page .activity-filter-btn,.liquid-page .match-empty-generate,.liquid-page .auth-btn,.liquid-page .guest-btn{
  border-radius: 999px;
}
.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); }






.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{ border-radius: 16px; }
.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 .friend-action-row{ justify-content:center; text-align:center; }
.user-liquid .friend-btn{ border-radius:999px; padding:.5rem 1rem; }
.user-liquid .stat-card{ border-radius:22px; background:linear-gradient(180deg,var(--surface),var(--surface2)); }
/* shared mobile tightening */
@media (max-width: 700px){
  
  .liquid-page .page-heading{ font-size: clamp(2.1rem, 12vw, 3rem); margin-bottom: 1rem; }
  .liquid-page .card,.liquid-page .rec-card,.liquid-page .search-result,.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; }
  
  
  
  
  .match-liquid .match-column-grid{ grid-template-columns:1fr; }
  .match-liquid .match-rec-card{ align-items: flex-start; }
  .month-liquid .month-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:.7rem; }
  .index-liquid .auth-card{ padding: 1.35rem; border-radius: 26px; }
  .user-liquid .stat-card{ padding:.75rem .45rem; }
  .user-liquid .stat-num{ font-size:1.35rem; }
}
@media (max-width: 420px){
  .month-liquid .month-grid{ grid-template-columns:1fr 1fr; }
  
}


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

/* make stats panels masonry so shorter cards do not leave dead gaps */

/* user page should match the redesigned profile header instead of a loose header + rows */

@media (max-width:760px){
  .search-liquid .search-center-wrap{ align-items:stretch; width:100%; }
  .search-liquid .search-center-wrap > .card,.search-liquid .search-results{ width:100%; }
  .search-liquid .search-center-wrap > .card{ min-height:132px; padding:1rem; border-radius:22px; }
}


/* Final profile/user parity + stats/compare polish */
body.profile-redesign.user-liquid .friend-action-row{margin:.25rem 0 .25rem;display:flex;justify-content:center;}
body.profile-redesign.user-liquid .stat-card{position:relative;display:flex;align-items:center;justify-content:center;gap:.7rem;min-height:70px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border:1px solid var(--border);box-shadow:0 14px 38px rgba(0,0,0,.12);padding:.85rem 1rem;overflow:hidden;}
body.profile-redesign.user-liquid .stat-num{font-size:1.45rem;line-height:1;font-weight:900;}
body.profile-redesign.user-liquid .stat-label{font-size:.74rem;margin-top:0;text-align:left;}
body.profile-redesign.user-liquid .prof-section-head{margin-bottom:.9rem;color:var(--text);font-size:.86rem;font-weight:950;letter-spacing:.105em;}
body.profile-redesign.user-liquid .prof-section-count{margin-left:auto;color:var(--accent);font-weight:900;}
body.profile-redesign.user-liquid .prof-sub-row{padding:.42rem .5rem;margin-bottom:.55rem;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.045);}
body.profile-redesign.user-liquid .prof-sub-label{font-weight:950;color:var(--text2);}
body.profile-redesign.user-liquid .sort-select{border-radius:999px;background:rgba(0,0,0,.14);}
@media (max-width:700px){
  body.profile-redesign.user-liquid .stat-card{min-height:62px;display:block;text-align:center;padding:.65rem .45rem;border-radius:16px;}
  body.profile-redesign.user-liquid .stat-num{font-size:1.15rem;}
  body.profile-redesign.user-liquid .stat-label{text-align:center;font-size:.62rem;margin-top:.24rem;}
  body.profile-redesign.user-liquid .prof-section-head{font-size:.78rem;}
}

/* Stats layout: fit long top-card text and balance lower panels */

/* Compare unmatched favorites: make them compact like normal media cards */


/* Final profile/search polish: signed-in brain, favorite button, wider tabs, user column fix, stats cleanup */
.brain-recs-btn:not(.guest-locked){opacity:1;filter:none;background:var(--accent-dim);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));color:var(--text);}
.brain-recs-btn:not(.guest-locked):hover{background:var(--accent);color:var(--accent-btn-text);border-color:var(--accent);}
.brain-recs-btn.guest-locked{opacity:.42;filter:grayscale(1) saturate(.2);background:var(--surface2);border-color:var(--border2);color:var(--muted);cursor:not-allowed;pointer-events:none;animation:none;box-shadow:none;}
.type-tabs{max-width:min(620px,100%);margin-left:auto;margin-right:auto;gap:8px;padding:6px;}
.type-tab{min-width:108px;padding:.78rem 1.05rem;}
.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%;gap:6px;padding:5px}.type-tab{min-width:0;padding:.66rem .8rem}}
.rating-style-row small{display:none;}

/* 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,.stat-card,.search-card,.suggested-card,.timeline-month,.month-card,.match-card,.liquid-card{
  background: var(--card-solid);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.suggested-card{ background: var(--card-solid-2); }

/* Keep profile/user tool buttons in one horizontal carousel row when needed */

/* Top 10: compact edit button and consistent poster shape */

/* Mobile touch reliability for episode / track controls */




/* 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:var(--recs-color-card-inner); --surface-solid:#191a1d; }
[data-theme="light"]{ --card-solid:#e0e2e7; --card-solid-2:#d6d9e0; --surface-solid:#e0e2e7; }
.card,.stat-card,.search-card,.suggested-card,.timeline-month,.month-card,.match-card,.liquid-card,.result-card,.search-result,.rec-card,.ph-card{
  background: var(--card-solid);
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.suggested-card,.search-result,.rec-card,.ph-card{
  background: var(--card-solid-2);
}
@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,.stat-card,.search-card,.suggested-card,.timeline-month,.month-card,.match-card,.liquid-card,.result-card,.search-result,.rec-card,.ph-card{
    box-shadow:none;
  }
}

/* Profile/user action buttons: one clean horizontal row without extra hero dead space */

/* Top 10 header/edit button alignment and consistent poster shapes, including albums */

/* Social cleanup: no refresh control/recent review block */


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

/* Episode / track mobile tap targets */




/* 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,.search-result,.rec-card,.match-rec-card,.suggested-card{
  background: var(--solid-card-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.search-result,.rec-card,.match-rec-card,.suggested-card,.mini-media-row{
  background: var(--solid-card-bg-2);
}

/* Keep profile/user action buttons on one centered mobile rail. */

/* Top 10 media art: force albums into the same poster footprint as film/TV. */

/* Episode / track panels: prevent right-side spill and improve mobile hit layout. */




/* Liquid page hero: reduce top dead space and smooth the glow so it does not cut off. */

.liquid-page .recs-header{
  position: relative;
  overflow: visible;
  isolation: isolate;
  margin-top: 0;
}
.liquid-page .recs-header::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;
}





/* Film + TV mode: hide music from primary app surfaces */
@media (max-width:700px){.match-column-grid{grid-template-columns:1fr;}}


/* Final profile/user simplification: action row uses only neutral icon-button chrome. */


/* 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); }
  
  
  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:var(--z-nav);
  }
}

/* Final mobile fixed-nav spacing: fixed nav must not cover page headers/heroes. */
@media (max-width:760px){
  
  
  .liquid-page .page-heading,.liquid-page .recs-pulse,.liquid-page .recs-header{
    margin-top: 0;
  }
}

/* ─── 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);
  opacity: .42;
  will-change: auto;
  transform: translateZ(0);
}

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

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

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

/* Contain repaint work inside cards instead of invalidating the whole page. */
.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){
  .rec-card:hover,.match-rec-card:hover,.search-result:hover,.home-list-item:hover,.home-pick-card:hover{
    transform: none;
  }
}

/* Mobile/PWA: prioritize smooth scroll over decorative effects. */
@media (max-width: 760px){
  
  .orb{ filter: blur(24px); opacity: .28; }
  .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);
  }
}

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


/* 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{
  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{ color:transparent; min-height:1.15rem; border-radius:999px; }
.empty-state,.inbox-empty,.home-empty,.no-other-matches{
  text-align:center;
  border:1px dashed var(--border2);
  background:linear-gradient(180deg,var(--surface),rgba(255,255,255,.025));
  border-radius:18px;
  color:var(--muted);
  padding:1.25rem;
}
.empty-state-polished{ padding:1.6rem 1rem; }
.empty-state-polished::before,.empty-state.empty-search::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,.home-empty strong{ color:var(--text); display:block; margin-bottom:.35rem; font-size:.98rem; }
.empty-state 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 (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; }
  
  
  
}

/* Current polish: faster library actions, watching alignment, larger rating controls */


.search-result .in-lib-watching,.in-lib-watching{
  border-color:rgba(134,239,172,.72);
  color:#bbf7d0;
  background:rgba(34,197,94,.12);
}




/* Episode detail links inside TV season lists */





/* Status/action polish */


.in-lib-watching{
  border-color:rgba(134,239,172,.62);
  color:#bbf7d0;
  background:rgba(34,197,94,.12);
}


/* Smaller, clearer episode open button */




/* 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 */






/* Readability + media/episode interaction patch */
[data-theme="dark"] .field-label,[data-theme="dark"] .prof-section-count,[data-theme="dark"] .friend-sub,[data-theme="dark"] .user-stat-label,[data-theme="dark"] .home-taste-label{
  color: var(--text);
  opacity: .9;
}
[data-theme="light"] .field-label,[data-theme="light"] .prof-section-count,[data-theme="light"] .friend-sub,[data-theme="light"] .user-stat-label,[data-theme="light"] .home-taste-label{
  color: var(--text);
  opacity: .76;
}







/* Final polish: search status alignment, compact review footer, mobile episode ratings */





.review-save-btn{ min-height:36px; padding:.48rem .85rem; border-radius:999px; white-space:nowrap; }

.review-comment-form{ display:none; }
@media (max-width:560px){
  
  
  
  .review-save-btn{ padding:.42rem .7rem; font-size:.74rem; }
}






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


/* Final polish: unselected Watching should stay neutral; only selected/current is green */


/* Episode rows open their full breakdown page */




/* Final fix: keep episode-list star ratings inline on mobile */




/* Episode page arrow tap reliability */


/* 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}}


.home-panel,.home-card,.home-dashboard-section,.stat-card,.review-card,.rec-card,.result-card,.search-result{
  background:color-mix(in srgb,var(--panel-bg, var(--surface)) 92%, transparent);
  border-color:color-mix(in srgb,var(--border2, var(--border)) 70%, transparent);
}
html[data-theme="light"] .home-panel,html[data-theme="light"] .home-card,html[data-theme="light"] .home-dashboard-section,html[data-theme="light"] .stat-card,html[data-theme="light"] .review-card,html[data-theme="light"] .rec-card,html[data-theme="light"] .result-card,html[data-theme="light"] .search-result{
  background:rgba(255,255,255,.88);
}
/* Season watched controls should be a plain deliberate checkbox target only */
.season-watch-label,.season-watched-label,.mark-season-watched,.season-watched-btn{background:transparent;border:0;box-shadow:none;color:transparent;padding:0;min-width:0;width:auto;overflow:hidden;}
.season-watch-label input,.season-watched-label input,.mark-season-watched input,.season-watched-btn input{width:18px;height:18px;opacity:1;margin:0;accent-color:var(--accent);}

/* Global page background fill: prevent mobile safe-area black bars */
html,body{
  min-height: 100%;
  background: var(--bg);
}
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;
  top:calc(64px + env(safe-area-inset-top) + .75rem);
  left:max(1rem, env(safe-area-inset-left));
  z-index:var(--z-sticky);
  margin:0;
  padding:0;
  width:auto;
  height:0;
  pointer-events:none;
}
.smart-back-row .smart-back-btn{ pointer-events:auto; }
@media (max-width:700px){
  .smart-back-row{ top:calc(56px + env(safe-area-inset-top) + .55rem); left:.8rem; }
}

/* Profile/user skeleton loading and stronger user cards */
.skeleton-card{
  position:relative;
  overflow:hidden;
  background:var(--card-solid-2);
  border-radius:18px;
  min-height:120px;
}
.skeleton-card{min-height:92px;}
.skeleton-card::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;
}

/* Bio pencil sits directly after the bio text */

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

/* Episode panel watch-all control */




/* Keep Top 5 visible on desktop when profile activity tools are open; mobile can still hide it. */


.clear-all-btn{border:0;outline:0;box-shadow:none;}
.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);color:var(--accent-btn-text);border:0;outline:0;text-decoration:none;font-size:.85rem;font-weight:800;font-family:inherit;box-shadow:none;}
.letterboxd-import-btn:hover{filter:brightness(1.06);transform:translateY(-1px);}




@media (max-width:600px){
  body.search-liquid .search-result{
    align-items:flex-start;
    gap:12px;
    min-height:132px;
  }
  body.search-liquid .search-result .result-info{
    align-self:stretch;
    display:flex;
    flex-direction:column;
    min-width:0;
  }
  body.search-liquid .search-result .result-title-row{
    min-width:0;
  }
  body.search-liquid .search-result .result-sub{
    line-height:1.2;
  }
  body.search-liquid .search-result .result-meta{
    white-space:normal;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    line-height:1.25;
    margin-top:4px;
    max-height:3.75em;
  }
}

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




/* Stats readability restore */



/* 2026 nav cleanup: Home lives in tabs; search is an icon action. */




/* Mobile social filters and modal spacing */



/* Center the Social hero content as one group; keep search tucked next to title. */






/* Tighten page endings so pages stop just after their real last section. */



/* Hide page-level back buttons on match/media/episode while keeping global mobile back. */
body.match-liquid .smart-back-row{
  display:none;
}

/* Episode pages should finish shortly after the Similar section on mobile. */


/* Social mobile: rebuild the hero/search alignment and remove extra gap before friends. */


/* 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);
  }
  body{
    min-height:100%;
    min-height:100dvh;
    margin:0;
    background-color:var(--bg);
    padding-bottom:0;
  }

}
/* 2026-07-13 mobile nav drag + social mobile cleanup */


/* Final media/social/mobile-nav corrections */

.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. */




/* 2026-07-13 definitive profile, social, and mobile-nav stabilization */



/* 2026-07-13 final mobile history/nav/modal/social cleanup */


/* 2026-07-13 social mobile filter visibility final */



/* 2026-07-13 requested profile/modal stability pass */
.modal-profile-link{color:var(--text);text-decoration:none;font-weight:850;cursor:pointer;}
.modal-profile-link:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}


/* 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. */



/* 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%);
}
.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;outline:0;background:transparent;color:var(--text);font-size:.9rem;padding:.72rem .8rem;box-shadow:none}
.activity-panel-search input::placeholder{color:var(--muted)}
.activity-panel-empty{display:none;padding:1rem;text-align:center;color:var(--muted);font-size:.82rem}
@media (max-width:700px){
  body.user-liquid .friend-action-row{margin-bottom:.45rem}
  
  .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 .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:var(--recs-color-card-inner);
  background-image:none;
  border-color:rgba(255,255,255,.13);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  opacity:1;
}
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;
  background-image:none;
  color:#f5f5f7;
  border-color:rgba(255,255,255,.14);
  opacity:1;
}
[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;
  border-color:rgba(0,0,0,.14);
}
[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;
  color:#17181c;
  border-color:rgba(0,0,0,.14);
}

/* 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:var(--recs-color-card-inner);
  --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);
  background-image:none;
  border-color:var(--nav-page-card-border);
  box-shadow:var(--nav-page-card-shadow);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  opacity:1;
}
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);
  background-image:none;
  border-color:var(--nav-page-card-border);
  opacity:1;
}


/* Social */



/* 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);
  background-image:none;
  border-color:var(--nav-page-card-border);
  box-shadow:var(--nav-page-card-shadow);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  opacity:1;
}

/* Profile/User permanent lock, repeated here intentionally so this final block wins. */

/* 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. */

/* Cards nested inside a larger card use the quieter inner Home surface. */

/* 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. */

/* Keep controls readable inside the darker card surfaces. */

/* Social layout correction: never paint one large square card behind the feed. */


/* Every activity/review is its own rounded Home-style card. */




/* 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);
  border-color:var(--accent);
  color:var(--accent-btn-text);
}

@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);
  }
  
}


/* ========================================================================
   2026-07 FINAL NAV / GUEST / MOBILE TOP-LANE CORRECTIONS
   ======================================================================== */



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


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

/* Keep every media-modal close control anchored in the visible top-right corner. */





/* ========================================================================
   DEDICATED SEARCH MEDIA RESULT CARD — bypass legacy glass-card selectors
   ======================================================================== */


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



/* Media popup close button: solid and readable even over scrolling artwork. */


/* Top 5 editor: give the results a clear lane below Search and show artwork. */

/* Stats uses one dynamic page heading; no separate emoji or username row. */


/* 2026-07 stats/top-five follow-up: keep media modal close control higher. */




/* 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. */

/* Top 5 medals. The badge intentionally overlaps the poster edge. */

/* ========================================================================
   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-display-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.65rem;
}

.own-review-text{
  color:var(--text);
  font-size:.92rem;
  font-weight:700;
  line-height:1.58;
  white-space:normal;
  overflow-wrap:anywhere;
}
.review-edit-pencil{
  width:32px;
  height:32px;
  min-width:32px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border2);
  border-radius:999px;
  background:var(--input-bg);
  color:var(--text);
  font:inherit;
  font-size:.86rem;
  line-height:1;
  cursor:pointer;
  box-shadow:none;
}
.review-edit-pencil:hover,.review-edit-pencil:focus-visible{
  border-color:var(--accent);
  background:var(--accent-dim);
  outline:none;
}
.review-display-footer{
  justify-content:flex-start;
  margin-top:.8rem;
}


/* Put the compact mobile favorite heart beside TMDB/IMDb scores. */


/* Top-5 medals overlap the poster/card instead of being clipped by ancestors. */

/* A selected Watchlist summary spans the complete mobile profile width. */

/* Match hero uses the same dark, mostly opaque Home card surface. */

/* ========================================================================
   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.
   ======================================================================== */

/* ========================================================================
   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. */


/* Clickable quick-stat cards keep the exact typography/alignment of their
   non-clickable siblings. Only the cursor/hover cue reveals interactivity. */

/* The read-only review display uses the universal opaque Home card surface. */


/* Top 4: four equal cards in one fixed row at every size. */

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

/* Details on the full media page are clean rows, not nested universal cards. */


/* Stats labels and bars live directly on the main panel. */

/* Rating pills and the favorite heart form one compact inline score row. */





/* ========================================================================
   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.
   ======================================================================== */


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

/* Watchlist/Favorites panel headings are layout rows, not glass cards. */

/* Full media-page score row: type, TMDB score and Favorite are one spaced line. */


/* Media Details use unique flat rows so the universal nested-card selector
   can never turn them back into rounded boxes. */


/* Key-person pills are proper buttons but keep the same visual treatment. */


/* Reusable filmography popup — intentionally matches the Stats drill-down. */

/* On mobile, an empty review starts as one deliberate action instead of a
   full textarea/editor. */

.review-start-btn{
  width:min(100%,320px);
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--accent) 55%,var(--border2));
  border-radius:16px;
  background:var(--accent-dim);
  color:var(--text);
  font:900 .92rem/1 inherit;
  cursor:pointer;
}
.review-start-btn:hover,.review-start-btn:focus-visible{
  background:var(--accent);
  color:var(--accent-btn-text);
  outline:none;
}


/* Search/Media final interaction polish. */
#filter-picker-modal .modal-card > .modal-close{
  position:absolute;top:10px;right:10px;left:auto;bottom:auto;margin:0;z-index:80;
}




/* ========================================================================
   2026-07 AUTH / RECS / MATCH FINAL SURFACE LOCK
   Keep last: these selectors intentionally beat page-local legacy glass rules.
   ======================================================================== */


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

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

/* ========================================================================
   MEDIA PREVIEW / SEARCH POPUP — RESPONSIVE DECISION CARD
   Keep last so legacy popup and action-button rules cannot repaint it.
   ======================================================================== */




/* ========================================================================
   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;
}
body.search-liquid .active-filter-list{
  flex:1 1 auto;
}
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:var(--recs-color-card-inner);
  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;
  }
  body.search-liquid .active-filter-list{
    order:3;
    flex-basis:100%;
  }
  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 page status actions are one compact segmented control instead of
   unrelated full-row colored buttons. Watching remains available for TV. */


/* Larger, continuous mobile rating target: tapping or sliding anywhere
   across the row now selects half-star increments reliably. */


/* Make View full page the clear primary desktop action. */


/* The bottom navbar must never cover the final popup action on iPhone. */


/* Popup status choices stay side by side: Film uses two, TV uses three when
   Watching is available. */





/* ========================================================================
   2026-07 POPUP / EPISODE / SEARCH / STATUS FINAL POLISH
   ======================================================================== */
/* Swipeable popup still retains a fixed close control. */


/* Keep every final review, season, and episode block above the mobile nav. */


/* Desktop popup favorite is always an icon-size heart, never an overflowing word. */


/* Bright, separated rating heading with a compact clear action. */


/* Poster presentation on desktop: framed, floated, and softly blended. */


/* Flat episode details — no nested pills/cards around every fact. */


/* Snappier stars on desktop and a larger touch lane on mobile. */


/* Hide-watched is a real checkbox and matches the Tag control. */
body.search-liquid .search-hide-watched{display:inline-flex;align-items:center;gap:.45rem;margin-left:0;min-height:38px;padding:.55rem .76rem;border-radius:999px;background:#1c1d21;border:1px solid var(--border2);cursor:pointer}
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. */


/* Searchable Stats / actor filmography overlays. */
/* Final episode flat-row source selector (episode.html has no body class). */


/* A completed status is one full-width selected segment, not half an empty row. */


/* ========================================================================
   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%;
  display:flex;
  align-items:center;
  gap:.5rem;
}
body.search-liquid .active-filter-list{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
body.search-liquid .search-hide-watched{
  margin-left:auto;
  flex:0 0 auto;
  color:var(--text);
}
body.search-liquid .search-hide-watched .search-hide-label{color:inherit;font-weight:850}
@media (max-width:700px){
  body.search-liquid .search-hide-watched{margin-left:auto}
}

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

/* Media-page status control: every label has equal contrast. */


/* A completed Watched state owns the entire segmented control. */


/* Clear, quick state-change feedback without disturbing layout. */
.status-control-changing{animation:statusControlFill .38s cubic-bezier(.2,.85,.25,1)}
@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. */


/* Native episode links remain reliably tappable on iPhone. */


/* Stable mobile episode rows: title first, rating underneath. */


/* Next episode card near the top of TV media pages. */




/* Episode quick-rating sheet. */




/* ========================================================================
   MEDIA POPUP EPISODE STARS — FIVE VISIBLE + CENTERED (2026-07-23)
   Popup-specific so the full media page keeps its own layout.
   ======================================================================== */



/* ======================================================================
   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:#FFFFFF;
  /* Uniform cards: no bright top-to-dark-bottom wash on long panels. */
  --recs-universal-card-bg:linear-gradient(145deg,#1b1c20 0%,#17181c 48%,var(--recs-color-card) 100%);
  --recs-universal-inner-bg:#232429;
  --recs-universal-inner-hover:#292a30;
  --recs-universal-control-bg:#232429;
}
/* Nested rows stay quieter and uniform, even inside very long lists. */

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

/* Media-page status control owns the full mobile panel width. */


/* Review prompt/display/editor are always the opaque Home surface. */


/* Media-page favorite: hollow inactive, filled active, accent themed. */


/* Up Next only appears for watchlist/watching shows (JS controls hidden). */


/* Episode list separation on page and popup. */


/* 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. */




/* Review prompt/display/editor must use the permanent opaque Home-style card. */


/* Favorite follows the accent theme instead of using a hard-coded red state. */


/* Up Next should align to the same page width and typography as media panels. */




/* ========================================================================
   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 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.
   ======================================================================== */



/* ========================================================================
   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}


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



/* ========================================================================
   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;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  width:100%;
  min-width:0;
  min-height:38px;
  margin:0;
  padding:.55rem .68rem;
  border:1px solid var(--border2);
  border-radius:999px;
  background:#1c1d21;
  color:var(--text2);
  font-weight:850;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  box-sizing:border-box;
}
body.search-liquid .search-watched-only input,body.search-liquid .search-watchlist-only input,body.search-liquid .search-hide-watched input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}
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;
  place-items:center;
  flex:0 0 18px;
  width:18px;
  height:18px;
  margin:0;
  border:1px solid rgba(255,255,255,.25);
  border-radius:5px;
  background:#121317;
  color:transparent;
  font-size:12px;
  line-height:1;
  box-sizing:border-box;
}
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);
  border-color:color-mix(in srgb,var(--accent) 70%,rgba(255,255,255,.15));
  color:#fff;
}
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);
  border-color:var(--accent);
  color:var(--accent-btn-text);
}
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;
  font:inherit;
  line-height:1;
}
@media (max-width:700px){
  body.search-liquid .active-filter-wrap{
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:stretch;
  }
  body.search-liquid .search-watched-only,body.search-liquid .search-watchlist-only,body.search-liquid .search-hide-watched{
    min-height:38px;
    padding:.5rem .15rem;
    gap:.28rem;
    font-size:.68rem;
    letter-spacing:-.015em;
  }
  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;
    width:16px;
    height:16px;
    font-size:10px;
  }
}

/* ========================================================================
   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.
   ======================================================================== */


/* ========================================================================
   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;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(.24rem, 1.1vw, .44rem);
    width: 100%;
    min-width: 0;
  }

  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;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 40px;
    margin: 0;
    padding: .5rem clamp(.12rem, .7vw, .35rem);
    border-radius: 999px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    font-size: clamp(.58rem, 2.35vw, .72rem);
    letter-spacing: -.018em;
    line-height: 1;
  }

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

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

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

  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);
    width: clamp(13px, 3.7vw, 16px);
    height: clamp(13px, 3.7vw, 16px);
  }

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

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

@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;
    padding-inline: .08rem;
  }
}

/* ========================================================================
   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.
   ======================================================================== */




/* ========================================================================
   MOBILE EPISODE ROW — TITLE, READ-ONLY RATING, THEN CLEAR X
   Mobile only. Desktop episode rows and desktop rating controls are untouched.
   ======================================================================== */




/* Mobile episode rows: show the saved read-only rating between title and clear X. */



/* Settings menu secondary action — shared by desktop and mobile. */

/* ========================================================================
   2026-07-24 — mobile episode reliability + calendar cleanup
   Desktop episode controls are intentionally untouched.
   ======================================================================== */


/* 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;
  background-image:none;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.09);
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html body.calendar-liquid .calendar-recent-row:last-child,html body.calendar-liquid .calendar-day-detail-item:last-child{
  border-bottom:0;
}
html body.calendar-liquid .calendar-day{
  border-radius:3px;
  box-shadow:none;
  background:#25262b;
  background-image:none;
  border:1px solid rgba(255,255,255,.08);
}
html body.calendar-liquid .calendar-day.level-1{
  background:color-mix(in srgb,var(--accent) 28%,#25262b);
  border-color:color-mix(in srgb,var(--accent) 38%,transparent);
}
html body.calendar-liquid .calendar-day.level-2{
  background:color-mix(in srgb,var(--accent) 48%,#222329);
  border-color:color-mix(in srgb,var(--accent) 58%,transparent);
}
html body.calendar-liquid .calendar-day.level-3{
  background:color-mix(in srgb,var(--accent) 70%,#1c1d21);
  border-color:color-mix(in srgb,var(--accent) 78%,transparent);
}
html body.calendar-liquid .calendar-day.level-4{
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 9px color-mix(in srgb,var(--accent) 42%,transparent);
}
html body.calendar-liquid .calendar-day:hover,html body.calendar-liquid .calendar-day.selected{
  transform:scale(1.22);
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
}


/* ========================================================================
   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.
   ======================================================================== */




/* ========================================================================
   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.
   ======================================================================== */




/* ========================================================================
   DESKTOP NAV REFRESH — 2026-07-24
   Search is a real tab again. Mobile navigation is intentionally untouched.
   ======================================================================== */


/* 2026-07-24 timeline mobile overhaul */
.tl-mobile-list{ display:none; }
@media (max-width:700px){
  .timeline-liquid .tl-desktop-grid,.month-liquid .tl-desktop-grid{ display:none; }
  .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-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 .tl-month-mobile-list{ gap:6px; }
}

/* ========================================================================
   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}
  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;
  overflow:hidden;
  clip-path:inset(0 round 999px);
}
@media (max-width:700px){
  body.search-liquid .search-watching-only,body.search-liquid label.search-watching-only{border-radius:13px;clip-path:inset(0 round 13px)}
}

/* Mobile media previews float entirely above the bottom nav. Keeping the card
   independent from the nav also makes the downward-dismiss gesture predictable. */


/* @admin has one six-destination bottom row instead of a wrapped second row. */


/* Stats loading copy must remain legible against the solid cards. */

/* 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;
  background-image:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:none;
  border-radius:0;
  border-left:0;
  border-right:0;
  border-top:0;
  padding-left:0;
  padding-right:0;
}
body.calendar-liquid .calendar-recent-row > *,body.calendar-liquid .calendar-day-detail-item > *,body.calendar-liquid .calendar-biggest-row > *{
  background:transparent;
  box-shadow:none;
}


/* Timeline month blocks now match the solid expanded-month visual language. */
@media (max-width:700px){
  body.timeline-liquid .tl-row{
    background:#1b1c21;
    border-color:rgba(255,255,255,.09);
  }
}

/* The rating remove control is descriptive text, not another ambiguous X. */


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

/* Six-tab admin slider uses the same one-row geometry as the six icons. */


/* Revamp review/comment likes: compact heart + count. Accent until liked, red after. */

.review-like-heart{font-size:1rem;line-height:1}

/* ========================================================================
   2026-07 LISTS REVIVAL + MOBILE BOTTOM-SHEET SWIPE
   ======================================================================== */


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

@media (max-width:700px){
  .recs-list-picker-card{max-height:88dvh}
  .recs-list-picker-footer{grid-template-columns:1fr 1fr}
  .recs-list-picker-row{min-height:54px}
  
  
}
@media (max-width:390px){.recs-list-picker-footer{grid-template-columns:1fr}.recs-list-quick-row{grid-template-columns:1fr}}
/* Keep the shared list picker solid even though its class ends in -card. */
html[data-theme="dark"] body .recs-list-picker-card{
  background:var(--recs-color-card);background-image:none;background-color:var(--recs-color-card);
  border-color:rgba(255,255,255,.11);backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1;
}


/* The active account/settings menu always sits above page controls and dialogs. */

/* Desktop nav: notification bell and user menu use the same outlined surface. */

/* ========================================================================
   GUEST EXIT CONTROL — always provide a visible route back to the landing page
   ======================================================================== */

/* 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. Containers own grids; variants own anatomy. */
.recs-media-card{position:relative;min-width:0;color:var(--text);text-decoration:none;border-radius:var(--recs-media-card-radius);touch-action:manipulation}
.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__secondary{min-width:0}
.recs-media-card__status,.recs-media-card__actions{position:relative;z-index:1}
.recs-media-card__actions :is(button,a){min-width:var(--recs-touch-target-min);min-height:var(--recs-touch-target-min)}
.recs-media-card--compact{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
.recs-media-card--feed{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center}
.recs-media-card--poster .recs-media-card__title{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.recs-media-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* 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:var(--z-notification);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;border:1px solid var(--border);border-radius:12px;background:var(--surface2);color:var(--text);font:800 .82rem/1.1 inherit;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;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}
.recs-filter-segmented>button{border:0;border-radius:10px;background:transparent;min-height:38px;padding:.55rem .72rem}
.recs-filter-segmented>button.active,.recs-filter-segmented>button[aria-pressed="true"]{background:var(--accent);color:var(--accent-btn-text);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;
  overflow:hidden;
}

/* Desktop notification bell matches the Settings trigger; the notification card stays centered. */

/* Mobile notification count on the Social bell tab. Desktop inbox styling is unchanged. */

/* Persistent mobile inbox badge and polished friend-request notifications */
.friend-request-notification{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid var(--border2);
  border-radius:18px;
  background:linear-gradient(145deg,var(--surface2),var(--surface));
  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}
  .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. */


/* 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. */




/* Social swipe actions are mobile-only. Keep them out of normal desktop flow. */


/* Recs mobile polish */
@media (max-width:760px), (pointer:coarse){
  
  
  
  
  
  
  

  /* Shared mobile filter lanes stay reachable and scroll cleanly beneath the nav. */
  :is(.activity-filter-row,.filter-row,.filters-row,.library-filter-row,.timeline-filters){
    position:sticky; top:calc(env(safe-area-inset-top) + 58px); z-index:28;
    overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
    box-shadow:0 8px 24px rgba(0,0,0,.22);
  }
  :is(.activity-filter-row,.filter-row,.filters-row,.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;
  }
  
}

/* Reliability footer and diagnostics */
.recs-reliability-footer{width:min(var(--recs-content-wide),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,#FFFFFF) 65%,transparent);background:color-mix(in srgb,var(--accent,#FFFFFF) 15%,transparent)}
.diagnostics-page{width:min(var(--recs-content-normal),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,#FFFFFF)}
.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,#FFFFFF);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);
  background:linear-gradient(180deg,rgba(28,29,34,.98),rgba(15,16,19,.98));
  color:#f4f4f6;
  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,#FFFFFF) 62%,rgba(255,255,255,.12));
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent,#FFFFFF) 16%,var(--recs-color-card-inner)),#111216);
  color:#fff;
}
.diagnostics-body{
  min-height:100vh;
  background:#090a0d;
  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));
  border-color:rgba(255,255,255,.09);
}
.diagnostics-failure{
  background:#101116;
  border-color:rgba(255,255,255,.08);
}
.diagnostics-action{
  min-height:42px;
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(180deg,var(--recs-color-card-inner),#121318);
  color:#f5f5f7;
  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,#FFFFFF) 60%,rgba(255,255,255,.12));
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent,#FFFFFF) 24%,#24252b),#14151a);
  color:#fff;
}
@media (max-width:760px){
  .diagnostics-page{
    width:100%;
    padding-top:calc(112px + env(safe-area-inset-top));
    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;
  right:20px;
  bottom:20px;
  left:auto;
  width:auto;
  margin:0;
  padding:0;
  border-top:0;
  z-index:var(--z-sticky);
  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;
    margin:0;
    padding:0;
    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}

@media (max-width:700px){
  #recs-data-tools-modal.recs-modal-overlay{align-items:center;justify-content:center;padding:1rem}
  #recs-data-tools-modal .recs-modal-panel{width:min(94vw,560px);max-height:min(82dvh,760px);border-radius:22px;transform:translateY(10px) scale(.985)}
  #recs-data-tools-modal.open .recs-modal-panel{transform:translateY(0) scale(1)}
  
}

/* Recs results: fixed heading and rationale cards for every ranked pick. */
.recs-results-static-head{cursor:default;pointer-events:none}
.recs-secondary-why{margin-top:.7rem;padding:.72rem .82rem;border-radius:14px}
.recs-secondary-why .recs-why-label{font-size:.66rem}
.recs-secondary-why .recs-why-text{font-size:.78rem;line-height:1.45}
.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)}

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



/* Settings menu: viewport-safe accent controls and a focused blurred backdrop. */

/* Final settings-menu containment: all six accents stay on one row. */

.recs-secondary-why .recs-why-text{
  display:block;
  overflow:visible;
  -webkit-line-clamp:unset;
}

/* Shared generated-photo preview */
html.recs-photo-preview-open,body.recs-photo-preview-open{ overflow: hidden; }
.recs-photo-preview{
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  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); color: var(--accent-btn-text,#111); border-color: transparent; }
.recs-photo-preview-download{ background: #25252c; color: #f7f7fa; border: 1px solid rgba(255,255,255,.11); }
.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); } }

@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; }
}


/* 2026-08 restrained site motion polish */
:root{--recs-motion-fast:.14s;--recs-motion-standard:.24s;--recs-motion-ease:cubic-bezier(.2,.8,.2,1)}
/* Consistent tactile feedback without turning every control into a bouncing element. */
:where(button,.add-btn,.primary-btn,.secondary-btn,.nav-tab,.settings-btn,.notification-btn,.genre-chip,.quick-chip,.recent-chip){transition-property:transform,border-color,background-color,color,box-shadow,opacity;transition-duration:var(--recs-motion-fast);transition-timing-function:ease}
:where(button,.add-btn,.primary-btn,.secondary-btn,.nav-tab,.settings-btn,.notification-btn):active:not(:disabled){transform:scale(.975)}

/* Menus and overlays feel connected to the control that opened them. */


@keyframes recsMenuIn{from{opacity:0;transform:translateY(-5px) scale(.985)}to{opacity:1;transform:none}}


/* Desktop media previews stay centered in the viewport. Avoid transforms on page roots,
   because they change the containing block used by position:fixed overlays. */


/* Preserve a complete animated exit for the mobile media preview swipe. */


@media (prefers-reduced-motion:reduce){
  
  :where(button,.add-btn,.primary-btn,.secondary-btn,.nav-tab,.settings-btn,.notification-btn):active:not(:disabled){transform:none}
}

/* E2E reliability: hidden filmography results must stay hidden on every breakpoint. */


/* 2026-08 desktop density: render the desktop site slightly farther out.
   Mobile and tablet app layouts remain at their existing scale. */
@media (min-width:901px){
  html{zoom:.75}
}

/* Mobile media popup close control stays attached to the card's true top edge. */


/* 2026-08 mobile density and settings containment.
   Do not scale the viewport: mobile stays at the native CSS pixel width.
   Compact sizing is applied to components instead. */
@media (max-width:900px){
  html{zoom:1;font-size:15px}
  body{min-width:0;width:100%;}
}
@media (max-width:700px){
  html{font-size:14px}

  /* Keep the app visually denser without distorting viewport geometry. */
  :where(h1,.page-title,.hero-title){
    font-size:clamp(2rem,9vw,2.75rem);
    line-height:.96;
  }
  :where(h2,.section-title,.card-title){
    font-size:clamp(1.2rem,5vw,1.65rem);
  }
  :where(button,.add-btn,.primary-btn,.secondary-btn,.nav-tab,.settings-btn,.notification-btn){
    min-height:42px;
  }
  /* Icon-only controls have explicit square dimensions. Do not let the general
     mobile tap-target rule stretch them into tall rectangles. */
  :where(input,textarea,select){font-size:16px}

}

/* TMDB links must win over parent media-card click handlers. */



/* Global runtime recovery panel */
.recs-runtime-error-panel{position:fixed;inset:0;z-index:var(--z-emergency);display:none;place-items:center;padding:24px;background:rgba(0,0,0,.72);backdrop-filter:blur(10px)}
.recs-runtime-error-panel.open{display:grid}.recs-runtime-error-card{width:min(560px,100%);padding:28px;border:1px solid color-mix(in srgb,var(--accent,#fff) 28%,rgba(255,255,255,.12));border-radius:24px;background:var(--card,#151515);box-shadow:0 28px 90px rgba(0,0,0,.5)}
.recs-runtime-error-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:18px;border-radius:14px;background:color-mix(in srgb,var(--accent,#fff) 14%,transparent);color:var(--accent,#fff);font-size:24px;font-weight:900}.recs-runtime-error-kicker{margin:0 0 7px;color:var(--accent,#fff);font-size:11px;font-weight:900;letter-spacing:.16em}.recs-runtime-error-copy h2{margin:0 0 10px;font-size:28px}.recs-runtime-error-copy p{line-height:1.55}.recs-runtime-error-reference{min-height:1.4em;color:var(--muted,#aaa);font-size:13px}.recs-runtime-error-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}.recs-runtime-error-actions button{min-height:44px;border:1px solid rgba(255,255,255,.14);border-radius:13px;background:rgba(255,255,255,.07);color:inherit;font-weight:800;cursor:pointer}.recs-runtime-error-actions button:first-child{background:var(--accent,#fff);color:#000}.recs-runtime-error-panel.is-working .recs-runtime-error-actions{opacity:.55;pointer-events:none}
@media (max-width:600px){.recs-runtime-error-panel{padding:16px}.recs-runtime-error-card{padding:22px;border-radius:20px}.recs-runtime-error-copy h2{font-size:23px}.recs-runtime-error-actions{grid-template-columns:1fr}.recs-runtime-error-actions button{min-height:42px}}

/* 2026-08 mobile density correction.
   Keep native viewport geometry; compact components instead of scaling the page. */
@media (max-width:700px){
  html{zoom:1;font-size:13px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{width:100%;min-width:0}
  :where(button,.add-btn,.primary-btn,.secondary-btn,.nav-tab){min-height:38px}
  :where(input,textarea,select){font-size:16px}
}

/* Social notification cards: compact, responsive, and visually separated. */













/* 2026-08 notification/live-social refinements */






.notification-read,.notification-dismiss,.notification-clear-all{
  min-height:36px;
  padding:.48rem .78rem;
  border:1px solid color-mix(in srgb,var(--accent) 62%,var(--border2));
  border-radius:12px;
  background:color-mix(in srgb,var(--accent) 14%,var(--surface2));
  color:var(--accent);
  font:850 .76rem/1 inherit;
  box-shadow:none;
}
.notification-read:hover,.notification-dismiss:hover,.notification-clear-all:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-btn-text);
}


/* 2026-08 mobile notification card and header-control correction */




/* Shared interaction polish. Intentionally excludes page-entry/page-exit transitions. */
:where(
  .primary-btn,.secondary-btn,.quiet-btn,.add-btn,.status-btn,.status-choice,
  .home-action,.home-section-link,.search-utility-btn,.search-tab,.explore-tab,
  .filter-picker-tab,.filter-picker-option,.smart-picker-card,.quick-chip,.genre-chip,.recent-chip,
  .activity-filter-btn,.filter-btn,.friend-btn,.settings-btn,.notification-btn,
  .library-filter-option,.media-list-chip,.episode-check-label
):not(.np-top-card):not(.np-top-drag-grip):not(.top4-choice):not(.top4-slot){
  transition-property:background-color,border-color,color,box-shadow,opacity,filter;
  transition-duration:.14s;
  transition-timing-function:cubic-bezier(.2,.75,.25,1);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
:where(
  .primary-btn,.secondary-btn,.quiet-btn,.add-btn,.status-btn,.status-choice,
  .home-action,.home-section-link,.search-utility-btn,.search-tab,.explore-tab,
  .filter-picker-tab,.filter-picker-option,.smart-picker-card,.quick-chip,.genre-chip,.recent-chip,
  .activity-filter-btn,.filter-btn,.friend-btn,.settings-btn,.notification-btn,
  .library-filter-option,.media-list-chip,.episode-check-label
):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
@media (max-width:760px), (pointer:coarse){
  :where(
    .primary-btn,.secondary-btn,.quiet-btn,.add-btn,.status-btn,.status-choice,
    .home-action,.home-section-link,.search-utility-btn,.search-tab,.explore-tab,
    .filter-picker-tab,.filter-picker-option,.smart-picker-card,.quick-chip,.genre-chip,.recent-chip,
    .activity-filter-btn,.filter-btn,.friend-btn,.settings-btn,.notification-btn,
    .library-filter-option,.media-list-chip,.episode-check-label
  ):not(.np-top-card):not(.np-top-drag-grip):not(.top4-choice):not(.top4-slot):active{
    transform:none;
    filter:brightness(1.07);
    opacity:.94;
  }
  .recs-haptic-tap{animation:recs-haptic-tap .14s ease-out}
  .recs-haptic-success{animation:recs-haptic-success .2s ease-out}
  @keyframes recs-haptic-tap{45%{filter:brightness(1.09);opacity:.93}100%{filter:none;opacity:1}}
  @keyframes recs-haptic-success{42%{filter:brightness(1.1)}72%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}100%{filter:none;box-shadow:none}}

  #recs-pull-refresh{
    --pull:0px;
    --pull-progress:0;
    position:fixed;
    z-index:var(--z-sticky);
    top:calc(env(safe-area-inset-top,0px) + var(--recs-shell-mobile-header-height,52px) + 7px);
    left:50%;
    right:auto;
    display:flex;
    align-items:center;
    gap:8px;
    height:36px;
    padding:0 13px;
    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(-48px + var(--pull)),0);
    transition:opacity .14s ease,transform .22s cubic-bezier(.2,.78,.24,1);
    will-change:transform,opacity;
    contain:layout paint style;
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    font-size:.72rem;
  }
  #recs-pull-refresh.visible{opacity:1}
  #recs-pull-refresh.tracking{transition:opacity .06s linear}
  #recs-pull-refresh.ready{border-color:var(--accent);color:var(--text)}
  #recs-pull-refresh.settling{transition:opacity .18s ease,transform .22s cubic-bezier(.2,.78,.24,1)}
  #recs-pull-refresh.refreshing{
    opacity:1;
    transform:translate3d(-50%,10px,0) scale(1);
    transition:transform .2s cubic-bezier(.2,.78,.24,1),opacity .12s ease;
    animation:none;
  }
  .recs-pull-spinner{
    width:15px;
    height:15px;
    flex:0 0 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-progress) * 280deg));
  }
  #recs-pull-refresh.refreshing .recs-pull-spinner{animation:recs-mobile-spin .65s linear infinite}
  @keyframes recs-mobile-spin{to{transform:rotate(360deg)}}
}
@media (prefers-reduced-motion:reduce){
  :where(.primary-btn,.secondary-btn,.quiet-btn,.add-btn,.status-btn,.status-choice,.home-action,.home-section-link,.search-utility-btn,.search-tab,.explore-tab,.filter-picker-tab,.filter-picker-option,.smart-picker-card,.quick-chip,.genre-chip,.recent-chip,.activity-filter-btn,.filter-btn,.friend-btn,.settings-btn,.notification-btn,.library-filter-option,.media-list-chip,.episode-check-label){transition:none;animation:none}
  #recs-pull-refresh{transition:none}
}

/* Shared feedback toast and confirmation components. */
.recs-feedback-region{position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:var(--z-notification);width:min(92vw,560px);pointer-events:none}
.recs-toast{display:flex;align-items:flex-start;gap:.65rem;padding:.8rem .85rem;border-radius:14px;background:var(--panel-bg);border:1px solid var(--border2);box-shadow:0 16px 40px rgba(0,0,0,.42);color:var(--text);font:600 .82rem/1.42 inherit;opacity:0;transform:translateY(12px) scale(.98);transition:opacity .18s ease,transform .18s ease;pointer-events:auto}
.recs-toast.is-visible{opacity:1;transform:translateY(0) scale(1)}
.recs-toast[data-tone="success"]{border-color:rgba(74,222,128,.42)}
.recs-toast[data-tone="error"]{border-color:rgba(248,113,113,.55)}
.recs-toast[data-tone="warning"]{border-color:rgba(251,191,36,.5)}
.recs-toast-icon{flex:0 0 auto;font-size:1rem;line-height:1.2}
.recs-toast-copy{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word}
.recs-toast-title{font-weight:800;margin-bottom:.08rem}
.recs-toast-detail{color:var(--text2);font-weight:550}
.recs-toast-actions{display:flex;align-items:center;gap:.35rem;flex:0 0 auto}.recs-toast-action-btn{border:1px solid color-mix(in srgb,var(--accent,#fff) 55%,transparent);background:color-mix(in srgb,var(--accent,#fff) 18%,var(--input-bg));color:var(--text);border-radius:8px;padding:.34rem .58rem;font:800 .7rem/1 inherit;cursor:pointer}.recs-toast-action-btn:hover,.recs-toast-action-btn:focus-visible{background:color-mix(in srgb,var(--accent,#fff) 28%,var(--input-bg));outline:none}.recs-toast-copy-btn{border:1px solid var(--border2);background:var(--input-bg);color:var(--text2);border-radius:8px;padding:.28rem .48rem;font:750 .68rem/1 inherit;cursor:pointer}.recs-toast-close{border:0;background:none;color:var(--muted);font:700 1.05rem/1 inherit;padding:1px 2px;cursor:pointer}
.recs-feedback-backdrop{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:1rem;background:rgba(0,0,0,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .16s ease}
.recs-feedback-backdrop.is-visible{opacity:1}
.recs-confirm{width:min(92vw,430px);border-radius:20px;padding:1rem;background:var(--panel-bg);border:1px solid var(--border2);box-shadow:0 24px 70px rgba(0,0,0,.58);color:var(--text);transform:translateY(10px) scale(.98);transition:transform .16s ease}
.recs-feedback-backdrop.is-visible .recs-confirm{transform:translateY(0) scale(1)}
.recs-confirm h2{font:800 1.02rem/1.25 inherit;margin:0 0 .45rem}
.recs-confirm p{font:550 .88rem/1.5 inherit;color:var(--text2);margin:0;white-space:pre-wrap}
.recs-confirm-actions{display:flex;justify-content:flex-end;gap:.55rem;margin-top:1rem}
.recs-confirm button{min-height:42px;border-radius:12px;padding:.65rem .9rem;font:750 .84rem/1 inherit;cursor:pointer}
.recs-confirm-cancel{background:var(--input-bg);border:1px solid var(--border2);color:var(--text)}
.recs-confirm-ok{background:var(--accent,#fff);border:1px solid transparent;color:var(--accent-ink,#111)}
.recs-confirm-ok.danger{background:#dc2626;color:#fff}
@media(max-width:700px){.recs-feedback-region{bottom:calc(5.4rem + env(safe-area-inset-bottom));}.recs-feedback-backdrop{align-items:end;padding:.75rem}.recs-confirm{width:100%;border-radius:22px 22px 16px 16px;padding:1.05rem}.recs-confirm-actions{display:grid;grid-template-columns:1fr 1fr}.recs-confirm button{width:100%}}
@media(prefers-reduced-motion:reduce){.recs-toast,.recs-feedback-backdrop,.recs-confirm{transition:none}}

/* Shared star/rating component: the only owner of star shape and fill clipping. */
:root{--recs-rating-star-filled:var(--accent);--recs-rating-star-empty:var(--muted);--recs-rating-star-hover:var(--accent);--recs-rating-star-focus:var(--accent)}
.recs-star-rating{display:inline-flex;align-items:center;gap:2px;vertical-align:middle;white-space:nowrap;color:var(--recs-rating-star-filled)}
.recs-star-rating__star{position:relative;display:inline-grid;width:1em;height:1em;flex:0 0 auto}
.recs-star-rating__star svg{grid-area:1/1;display:block;width:100%;height:100%;fill:currentColor}
.recs-star-rating__empty{color:var(--recs-rating-star-empty)}
.recs-star-rating__fill{color:var(--recs-rating-star-filled);clip-path:inset(0 calc(100% - var(--recs-star-fill,0%)) 0 0)}
.recs-star-rating--small{font-size:.75rem}.recs-star-rating--medium{font-size:1rem}.recs-star-rating--large{font-size:2.15rem;gap:7px}
.recs-star-rating.is-editable{cursor:pointer;touch-action:pan-y;padding:4px;border-radius:10px;user-select:none;-webkit-user-select:none}
.recs-star-rating.is-editable .recs-star-rating__star{min-width:40px;min-height:40px;padding:3px}
.recs-star-rating.is-editable:focus-visible{outline:2px solid var(--recs-rating-star-focus);outline-offset:3px}
.recs-star-rating.is-disabled{cursor:default;opacity:.62}
.recs-star-rating--compact-pill{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:flex-start;gap:2px;width:92px;min-width:92px;min-height:28px;padding:4px 9px;border:1px solid color-mix(in srgb,var(--accent) 58%,rgba(255,255,255,.1));border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,var(--recs-color-card-inner));box-shadow:inset 0 1px 0 rgba(255,255,255,.055);font-size:.74rem;white-space:nowrap}
.recs-star-rating--compact-pill .recs-star-rating__star{width:13px;min-width:13px;height:13px}
.recs-star-rating--compact-pill .recs-star-rating__empty{color:transparent}
.recs-star-rating--compact-pill-small{width:82px;min-width:82px;min-height:24px;padding:3px 6px;font-size:.68rem}
.recs-star-rating--compact-pill-small .recs-star-rating__star{width:11px;min-width:11px;height:11px}
@media (hover:hover){.recs-star-rating.is-editable:not(.is-disabled) .recs-star-rating__star{transition:transform .06s linear,filter .06s linear}.recs-star-rating.is-editable:not(.is-disabled) .recs-star-rating__star:hover{transform:scale(1.08);filter:brightness(1.15)}}
@media (max-width:700px){.recs-star-rating--large{font-size:2.35rem;gap:4px}.recs-star-rating.is-editable .recs-star-rating__star{min-width:44px;min-height:44px}}