:root {
  color-scheme: dark;
  --ink: #f3f1eb;
  --muted: #979792;
  --dim: #656560;
  --bg: #0b0b0b;
  --panel: #141414;
  --line: #292927;
  --green: #b8f36b;
  --red: #ff7169;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.hidden { display: none !important; }
.wordmark { font-size: .76rem; font-weight: 900; letter-spacing: .2em; }

.login-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-items: end;
  padding: 1.25rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, transparent 30%, #0b0b0b 78%),
    radial-gradient(ellipse at 70% 15%, #343b26 0, #171914 34%, #0b0b0b 70%);
}
.login-panel { width: min(100%, 31rem); margin: 0 auto; }
.login-panel h1 { margin: 1.2rem 0 .8rem; font-size: clamp(2.7rem, 13vw, 4.8rem); line-height: .93; letter-spacing: -.065em; }
.login-panel > p { color: var(--muted); }
.field { display: block; margin: 2rem 0 .7rem; }
.field span { display: block; margin-bottom: .4rem; color: var(--muted); font-size: .78rem; }
.field input {
  width: 100%;
  height: 3.35rem;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: .35rem;
  outline: none;
  background: #171717;
  color: var(--ink);
  font-size: 1.1rem;
}
.field input:focus { border-color: #77776f; }
.error { min-height: 1.3rem; color: var(--red) !important; font-size: .82rem; }

.profile-screen {
  min-height: 100vh; min-height: 100dvh; padding: max(2rem, env(safe-area-inset-top)) 1.2rem calc(2rem + env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 20%, #27301e 0, #11130f 30%, var(--bg) 70%);
}
.profile-panel { width: min(100%, 58rem); margin: 6vh auto 0; text-align: center; }
.profile-kicker { margin: 3.5rem 0 .6rem; color: var(--green); font-size: .72rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.profile-panel h1 { margin: 0; font-size: clamp(3rem, 10vw, 6.5rem); line-height: .9; letter-spacing: -.07em; }
.profile-panel > p:not(.profile-kicker) { color: var(--muted); }
.profile-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem; margin: 3rem 0; }
.profile-choice { width: 10rem; }
.profile-identity { width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.profile-identity > span { display: grid; width: 7rem; aspect-ratio: 1; place-items: center; margin: 0 auto .8rem; border: 1px solid #4b5141; border-radius: 50%; background: linear-gradient(145deg,#303a26,#161914); color: var(--green); font-size: 2.4rem; font-weight: 850; }
.profile-identity strong, .profile-identity small { display: block; }
.profile-identity small { margin-top: .25rem; color: var(--dim); font-size: .68rem; }
.profile-identity:hover > span, .profile-identity:focus-visible > span { border-color: var(--green); transform: scale(1.03); }
.profile-password { display: grid; gap: .35rem; margin-top: .8rem; }
.profile-password input { min-width: 0; height: 2.6rem; padding: 0 .65rem; border: 1px solid var(--line); border-radius: .35rem; background: #181818; color: var(--ink); }
.profile-password button, .profile-exit { min-height: 2.4rem; border: 1px solid var(--line); border-radius: .35rem; background: transparent; color: var(--muted); cursor: pointer; }
.profile-exit { padding: 0 1rem; }

.button {
  display: inline-flex;
  min-height: 3.15rem;
  align-items: center;
  justify-content: center;
  padding: 0 1.2rem;
  border: 1px solid transparent;
  border-radius: .35rem;
  text-decoration: none;
  font-weight: 750;
  cursor: pointer;
}
.button-light { width: 100%; background: var(--ink); color: #111; }
.button-outline { border-color: #4b4b47; background: transparent; color: var(--ink); }
.button.copied { border-color: var(--green); background: #1d2b16; color: var(--green); box-shadow: 0 0 0 2px rgba(184,243,107,.18); transform: scale(.98); }
button.press-feedback { transform: scale(.975); filter: brightness(1.16); transition: transform .12s ease, filter .12s ease; }
@media (prefers-reduced-motion: reduce) { button.press-feedback { transform: none; } }
.button:disabled { opacity: .55; cursor: wait; }
.button.incompatible, .button.incompatible:disabled { border-color: #5b2828; background: #2a1515; color: #ff9a94; opacity: 1; cursor: not-allowed; }
.button.disabled { opacity: .4; pointer-events: none; }

.app { padding-bottom: calc(3rem + env(safe-area-inset-bottom)); }
.topbar {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  height: calc(3.75rem + env(safe-area-inset-top));
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 1rem .9rem;
  border-bottom: 1px solid var(--line);
  background: rgba(11,11,11,.94);
  backdrop-filter: blur(18px);
}
.wordmark-button, .nav-button { padding: 0; border: 0; background: transparent; cursor: pointer; }
.topbar nav { display: flex; gap: 1.1rem; }
.nav-button { color: var(--muted); font-size: .79rem; }
.account-nav { display: inline-flex; align-items: center; gap: .4rem; }
.account-nav span { display: grid; width: 1.45rem; height: 1.45rem; place-items: center; border-radius: 50%; background: #283020; color: var(--green); font-size: .66rem; font-weight: 900; }
.account-nav b { max-width: 6rem; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.downloads-nav { display: inline-flex; align-items: center; gap: .35rem; }
.downloads-nav span {
  display: inline-grid;
  min-width: 1.15rem;
  height: 1.15rem;
  place-items: center;
  padding: 0 .25rem;
  border-radius: 1rem;
  background: var(--green);
  color: #10110f;
  font-size: .62rem;
  font-weight: 850;
}

.browse-head, .library, .recent-section { width: min(100% - 2rem, 76rem); margin-inline: auto; }
.network-status { display: flex; width: min(100% - 2rem, 76rem); box-sizing: border-box; align-items: center; justify-content: space-between; gap: .8rem; margin: .8rem auto 0; padding: .58rem .72rem; border: 1px solid rgba(255,133,127,.45); border-radius: .35rem; background: rgba(255,133,127,.09); color: #ffb0aa; font-size: .72rem; }
.network-status button { flex: 0 0 auto; min-height: 2rem; padding: 0 .65rem; border: 1px solid rgba(255,176,170,.55); border-radius: .26rem; background: transparent; color: inherit; font: inherit; font-weight: 750; cursor: pointer; }
.network-status button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.browse-head { position: relative; padding: 3.1rem 0 2rem; }
.browse-head h1 { margin: 0 0 1.3rem; font-size: clamp(2.65rem, 13vw, 6.8rem); line-height: .9; letter-spacing: -.07em; }
.search {
  display: grid;
  grid-template-columns: 1fr auto;
  width: min(100%, 42rem);
  border-bottom: 1px solid #60605b;
}
.search input {
  min-width: 0;
  height: 3.2rem;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-size: max(16px, 1.05rem);
}
.search input::placeholder { color: var(--dim); }
.search button { border: 0; background: transparent; color: var(--green); font-weight: 700; cursor: pointer; }
.search .clear-search { min-width: 3.25rem; padding: 0 .35rem; color: var(--dim); font-size: .67rem; }
.search .clear-search:hover, .search .clear-search:focus-visible { color: var(--ink); outline: none; }
.search .voice-search { display: grid; min-width: 2.55rem; padding: 0 .4rem; place-items: center; color: var(--muted); }
.search .voice-search svg { width: 1.08rem; height: 1.08rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.search .voice-search:hover, .search .voice-search:focus-visible { color: var(--green); outline: none; }
.search .voice-search.listening { color: #ff857f; animation: voice-pulse 1s ease-in-out infinite; }
@keyframes voice-pulse { 50% { opacity: .38; } }
.tabs { display: flex; gap: 1.5rem; margin-top: 1.4rem; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 0 0 auto; padding: .3rem 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--dim); cursor: pointer; }
.tabs button.active { border-color: var(--green); color: var(--ink); }
.recent-section { margin-bottom: 2.25rem; }
.recent-section .section-line { margin-bottom: .8rem; }
.recent-list {
  display: grid;
  grid-auto-columns: minmax(16rem, 21rem);
  grid-auto-flow: column;
  gap: .65rem;
  overflow-x: auto;
  padding: 0 .05rem .45rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.recent-card {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr) auto;
  gap: .7rem;
  align-items: center;
  min-width: 0;
  padding: .55rem;
  border: 1px solid var(--line);
  border-radius: .45rem;
  background: #121212;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
}
.recent-card:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.recent-poster { display: grid; width: 3.1rem; aspect-ratio: 2 / 3; place-items: center; overflow: hidden; background: #242422; color: var(--green); font-weight: 850; }
.recent-poster img { width: 100%; height: 100%; object-fit: cover; }
.recent-copy { min-width: 0; }
.recent-copy strong, .recent-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-copy strong { font-size: .8rem; }
.recent-copy small { margin-top: .18rem; color: var(--muted); font-size: .66rem; }
.recent-open { color: var(--green); font-size: .65rem; white-space: nowrap; }
.recent-progress-label { grid-column: 1 / -1; color: var(--dim); font-size: .62rem; }
/* The fill represents the percentage of the whole card, not only the text
   column after its poster. This keeps the visual length honest at a glance. */
.recent-progress { grid-column: 1 / -1; height: .22rem; overflow: hidden; border-radius: 1rem; background: #292927; }
.recent-progress i { display: block; height: 100%; background: var(--green); }
.discovery { margin-top: 1.45rem; }
.for-you-controls { margin-top: 1.45rem; }
.for-you-controls > span { display: block; margin-bottom: .45rem; color: var(--muted); font-size: .7rem; }
.for-you-controls > div { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: none; }
.for-you-controls > div::-webkit-scrollbar { display: none; }
.for-you-controls button { flex: 0 0 auto; min-height: 2.25rem; padding: 0 .82rem; border: 1px solid var(--line); border-radius: 2rem; background: #141414; color: var(--muted); font-size: .72rem; cursor: pointer; }
.for-you-controls button.active { border-color: var(--green); background: var(--green); color: #111; font-weight: 800; }
.for-you-controls .for-you-reset { border-color: transparent; background: transparent; color: var(--dim); }
.search-history { display: flex; gap: .42rem; overflow-x: auto; margin-top: .55rem; padding-bottom: .12rem; scrollbar-width: none; }
.search-history::-webkit-scrollbar { display: none; }
.search-history button { flex: 0 0 auto; min-height: 1.8rem; max-width: 13rem; overflow: hidden; padding: 0 .7rem; border: 1px solid #353533; border-radius: 2rem; background: #171717; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.search-history button:hover, .search-history button:focus-visible { border-color: var(--green); color: var(--ink); outline: none; }
.search-history .search-history-clear { border-color: transparent; background: transparent; color: var(--dim); }
.search-history .search-history-clear:hover, .search-history .search-history-clear:focus-visible { border-color: #555; color: var(--ink); }
.search-suggestions { position: absolute; z-index: 5; width: min(calc(100% - 2rem), 37rem); max-height: min(26rem, 55dvh); overflow-y: auto; margin-top: .35rem; border: 1px solid #383936; border-radius: .55rem; background: #151515; box-shadow: 0 .8rem 2.4rem rgba(0,0,0,.48); }
.search-suggestions button { display: grid; grid-template-columns: 2.25rem minmax(0,1fr) auto; gap: .65rem; width: 100%; min-height: 3.35rem; padding: .5rem .65rem; border: 0; border-bottom: 1px solid #282826; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.search-suggestions button:last-child { border-bottom: 0; }
.search-suggestions button:hover, .search-suggestions button:focus-visible { background: #22231f; outline: 0; }
.search-suggestions img, .suggestion-poster { width: 2.25rem; height: 2.25rem; object-fit: cover; background: #252525; color: var(--green); }
.suggestion-poster { display: grid; place-items: center; }
.search-suggestions strong, .search-suggestions small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggestions strong { font-size: .78rem; }
.search-suggestions small, .search-suggestions em { align-self: center; color: var(--dim); font-size: .65rem; font-style: normal; }
.search-suggestions-empty { display: grid; gap: .2rem; padding: .85rem; color: var(--muted); font-size: .72rem; }
.search-suggestions-empty strong { color: var(--ink); font-size: .78rem; }
.discovery-modes { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .65rem; scrollbar-width: none; }
.discovery-modes::-webkit-scrollbar, .genre-strip::-webkit-scrollbar { display: none; }
.discovery-modes button, .genre-strip button {
  flex: 0 0 auto;
  min-height: 2.15rem;
  padding: 0 .8rem;
  border: 1px solid var(--line);
  border-radius: 2rem;
  background: #141414;
  color: var(--muted);
  font-size: .72rem;
  cursor: pointer;
}
.discovery-modes button.active { border-color: var(--green); background: var(--green); color: #111; font-weight: 800; }
.genre-strip { display: flex; gap: .4rem; overflow-x: auto; margin-inline: -1rem; padding: .1rem 1rem .3rem; scrollbar-width: none; scroll-snap-type: x proximity; }
.genre-strip button { min-height: 1.9rem; padding-inline: .68rem; background: transparent; scroll-snap-align: start; }
.genre-strip button.active { border-color: #73776e; background: #24251f; color: var(--ink); }

.library { margin-bottom: 3rem; }
.catalog-heading { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.catalog-back { min-height: 1.9rem; padding: 0 .65rem; border: 1px solid #40413d; border-radius: 2rem; background: transparent; color: var(--muted); font-size: .65rem; white-space: nowrap; cursor: pointer; }
.catalog-back:hover, .catalog-back:focus-visible { border-color: var(--green); color: var(--ink); outline: none; }
.section-line { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .9rem; }
.section-line h2 { margin: 0; font-size: 1rem; letter-spacing: -.01em; }
.section-line span { color: var(--dim); font-size: .75rem; }
.section-refresh { min-height: 1.75rem; margin-left: .45rem; padding: 0 .55rem; border: 1px solid #353633; border-radius: 2rem; background: transparent; color: var(--muted); font-size: .65rem; cursor: pointer; }
.section-refresh:hover, .section-refresh:focus-visible { border-color: var(--green); color: var(--ink); outline: none; }
.catalog { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.35rem .7rem; }
.back-to-top { position: fixed; z-index: 8; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); min-height: 2.55rem; padding: 0 .85rem; border: 1px solid #5a7040; border-radius: 2rem; background: rgba(22,28,17,.94); color: var(--green); box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.35); font-size: .72rem; font-weight: 850; cursor: pointer; }
.back-to-top:hover, .back-to-top:focus-visible { background: #28321e; outline: 2px solid var(--green); outline-offset: 2px; }
.movie-card { min-width: 0; }
.movie-open { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.movie-open:focus-visible, .catalog-taste-actions button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.poster-wrap { position: relative; overflow: hidden; aspect-ratio: 2/3; background: #1b1b1b; }
.poster-wrap::before { content: attr(data-letter); position: absolute; inset: 0; display: grid; place-items: center; color: #454541; font-size: 2.5rem; font-weight: 200; }
.poster-wrap img { position: relative; width: 100%; height: 100%; display: block; object-fit: cover; opacity: 0; transition: opacity .2s; }
.poster-wrap img.loaded { opacity: 1; }
.rating { position: absolute; z-index: 1; right: .4rem; bottom: .4rem; padding: .2rem .35rem; background: rgba(8,8,8,.84); font-size: .68rem; }
.poster-genre { position: absolute; z-index: 1; left: .4rem; bottom: .4rem; max-width: calc(100% - 4rem); overflow: hidden; padding: .2rem .35rem; border: 1px solid rgba(184,243,107,.18); border-radius: .2rem; background: rgba(8,8,8,.88); color: var(--green); font-size: .61rem; font-weight: 750; letter-spacing: .01em; pointer-events: none; text-overflow: ellipsis; white-space: nowrap; }
.viewer-badge { position: absolute; z-index: 2; top: .4rem; left: .4rem; padding: .22rem .36rem; border-radius: .18rem; background: rgba(9,12,8,.9); color: var(--green); font-size: .57rem; font-weight: 900; letter-spacing: .04em; }
.viewer-badge.watchlist { color: #9bc7ff; }
.viewer-badge.liked { color: #ff9db5; }
.viewer-rating { position: absolute; z-index: 2; top: .4rem; right: .4rem; padding: .22rem .35rem; border-radius: .18rem; background: rgba(8,8,8,.9); color: var(--ink); font-size: .59rem; font-weight: 800; }
.movie-card h3 { min-height: 2.15em; margin: .55rem 0 .12rem; overflow-wrap: anywhere; font-size: .88rem; font-weight: 650; line-height: 1.08; }
.movie-card p { margin: 0; color: var(--dim); font-size: .73rem; }
.movie-card .original-title { margin-top: .14rem; overflow-wrap: anywhere; color: #81817d; font-size: .64rem; font-style: italic; }
.movie-card .similarity-reasons { margin-top: .28rem; color: #a8b19d; font-size: .63rem; }
.catalog-taste-actions { display: flex; flex-wrap: wrap; gap: .2rem .55rem; margin-top: .55rem; }
.catalog-taste-actions button { min-height: 1.9rem; max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--dim); font-size: .65rem; cursor: pointer; }
.catalog-taste-actions button:first-child { color: var(--green); }
.catalog-taste-actions button:nth-child(2) { color: var(--green); }
.catalog-taste-actions button:last-child { color: #b58d88; }
.catalog-taste-actions .catalog-watchlist { color: #9bc7ff; }
.catalog-taste-actions [data-catalog-more] { color: var(--green); }
.catalog-watch-now { padding: 0 .45rem !important; border: 1px solid #5a7040 !important; border-radius: 1rem !important; background: #1b2115 !important; font-weight: 800; }
.catalog-taste-actions button.saved { color: var(--green); font-weight: 800; }
.catalog-taste-actions button.selected { font-weight: 800; text-decoration: underline; text-underline-offset: .22rem; }
.detail-score { display: flex; align-items: center; gap: .65rem; margin-top: .85rem; color: var(--muted); font-size: .7rem; }
.detail-score > div { display: flex; gap: .1rem; }
.detail-score button { padding: .12rem; border: 0; background: transparent; color: #555550; font-size: 1.15rem; line-height: 1; cursor: pointer; }
.detail-score button.active, .detail-score button:hover, .detail-score button:focus-visible { color: var(--green); outline: none; }
.detail-note { display: grid; gap: .42rem; margin-top: .85rem; max-width: 34rem; }
.detail-note label { color: var(--muted); font-size: .68rem; }
.detail-note textarea { min-height: 3.3rem; resize: vertical; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: .32rem; background: rgba(9,9,8,.76); color: var(--ink); font: inherit; font-size: .78rem; }
.detail-note textarea:focus { border-color: var(--green); outline: none; }
.detail-note button { justify-self: start; min-height: 2.15rem; }
.catalog-taste-actions button:disabled { opacity: .55; cursor: wait; }
.skeleton { display: block; background: linear-gradient(90deg,#161616 25%,#222 50%,#161616 75%); background-size: 200%; animation: shimmer 1.3s infinite; }
.skeleton-card { pointer-events: none; }
.skeleton-poster { aspect-ratio: 2/3; }
.skeleton-title { width: 76%; height: .95rem; margin-top: .65rem; }
.skeleton-meta { width: 57%; height: .66rem; margin-top: .4rem; }
.skeleton-actions { display: grid; grid-template-columns: 1.1fr 1fr 1.3fr; gap: .35rem; margin-top: .72rem; }
.skeleton-actions i { height: 2rem; }
@keyframes shimmer { to { background-position: -200% 0; } }

dialog { color: var(--ink); }
dialog::backdrop { background: rgba(0,0,0,.78); }
.sheet {
  width: min(100%, 58rem);
  max-width: none;
  max-height: 94dvh;
  margin: auto auto 0;
  padding: 0;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: .8rem .8rem 0 0;
  background: #111;
}
.close { min-height: 2.7rem; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.detail-sheet > .close { position: absolute; z-index: 3; top: .7rem; right: 1rem; color: white; }
.detail-hero { position: relative; min-height: 34rem; display: flex; align-items: end; padding: 12rem 1.15rem 1.4rem; overflow: hidden; }
.detail-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detail-shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.08) 22%,#111 88%); }
.detail-info { position: relative; z-index: 1; }
.detail-info > p:first-child { margin: 0 0 .4rem; color: var(--green); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.detail-info h2 { margin: 0 0 .7rem; font-size: clamp(2.2rem, 11vw, 4.5rem); line-height: .93; letter-spacing: -.06em; }
.detail-original-title { margin: -.25rem 0 .75rem; color: #c0c0ba; font-size: .85rem; font-style: italic; }
.meta-row { display: flex; flex-wrap: wrap; gap: .4rem .8rem; color: #c2c2bd; font-size: .78rem; }
.detail-description { color: #b0b0ab; font-size: .88rem; }
.personal-state { width: fit-content; margin-top: .65rem; padding: .4rem .55rem; border: 1px solid #3b4b2e; border-radius: .25rem; background: rgba(184,243,107,.08); color: var(--green); font-size: .72rem; font-weight: 700; }
.detail-info .button { width: 100%; margin-top: .6rem; }
.detail-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.detail-actions .button { flex: 1 1 12rem; }
.episode-list { padding: 0 1.15rem 1.5rem; }
.episode-list > p { color: var(--muted); }
.episode-button { width: 100%; display: flex; justify-content: space-between; padding: .9rem 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }

.sheet-header { position: sticky; z-index: 2; top: 0; padding: .5rem 1rem 1rem; border-bottom: 1px solid var(--line); background: #111; }
.sheet-header .close { float: right; }
.sheet-header p { margin: 2.8rem 0 .25rem; color: var(--green); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.sheet-header h2 { margin: 0; font-size: 1.65rem; line-height: 1.05; }
.sheet-header > span { display: block; margin-top: .45rem; color: var(--muted); font-size: .78rem; }

.account-sheet { width: min(100%, 52rem); }
.account-sheet { overflow-y: auto; overscroll-behavior: contain; }
.account-content { display: grid; gap: .8rem; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
.account-card { padding: 1.15rem; border: 1px solid var(--line); border-radius: .55rem; background: #151515; }
.account-card h3 { margin: .25rem 0 .5rem; font-size: 1.25rem; }
.account-card > p, .account-card > small { color: var(--muted); }
.profile-login-card { background: linear-gradient(145deg,rgba(184,243,107,.08),rgba(15,15,15,.2) 60%),#151515; }
.profile-login-card .account-inline-actions { margin-top: .8rem; }
.account-card > small { display: block; margin-top: .75rem; }
.account-eyebrow { color: var(--green); font-size: .66rem; font-weight: 900; letter-spacing: .12em; }
.letterboxd-card { background: linear-gradient(145deg,rgba(0,224,84,.07),rgba(255,128,0,.035) 48%,#151515); }
.letterboxd-summary { display: flex; flex-wrap: wrap; gap: .65rem 1.25rem; margin: 1rem 0; padding: .8rem; border: 1px solid #30342d; border-radius: .4rem; background: #10110f; }
.letterboxd-summary span, .letterboxd-summary > strong { display: flex; align-items: baseline; gap: .3rem; }
.letterboxd-summary strong { color: var(--green); font-size: 1.25rem; }
.letterboxd-summary small { flex-basis: 100%; color: var(--dim); }
.import-button { position: relative; overflow: hidden; }
.import-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.import-progress { min-height: 1.4rem; margin-top: .65rem; color: var(--green); font-size: .75rem; }
.account-inline-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .7rem; }
.account-inline-actions button { min-height: 2.3rem; padding: 0 .7rem; border: 1px solid var(--line); border-radius: .3rem; background: transparent; color: var(--muted); cursor: pointer; }
.account-inline-actions button:disabled { opacity: .35; }
.account-form { display: grid; gap: .7rem; margin-top: .8rem; }
.account-form label span { display: block; margin-bottom: .3rem; color: var(--muted); font-size: .7rem; }
.account-form input { width: 100%; height: 2.9rem; padding: 0 .75rem; border: 1px solid var(--line); border-radius: .35rem; outline: none; background: #101010; color: var(--ink); }
.account-form input:focus { border-color: var(--green); }
.account-session-actions { padding-top: .8rem; border-top: 1px solid var(--line); }
.library-sheet { width: min(100%, 64rem); }
.library-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem .65rem; padding: 1rem 1rem calc(2rem + env(safe-area-inset-bottom)); }
.library-card { min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.library-card > div { position: relative; aspect-ratio: 2/3; overflow: hidden; background: #20201e; }
.library-card img { width: 100%; height: 100%; object-fit: cover; }
.library-card div span { position: absolute; left: .35rem; bottom: .35rem; padding: .2rem .3rem; background: rgba(5,5,5,.88); color: #9bc7ff; font-size: .56rem; font-weight: 850; }
.library-card strong, .library-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-card strong { margin-top: .45rem; }
.library-card small { color: var(--dim); }
.choice-import-proof { margin-top: .75rem; padding: .55rem .7rem; border-left: 2px solid var(--green); background: rgba(184,243,107,.055); color: #cbd8bf; font-size: .74rem; }
.source-progress {
  padding: .8rem 1rem .15rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(184,243,107,.055), transparent);
}
.search-radar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .65rem; }
.search-radar-head > div { display: flex; align-items: center; gap: .45rem; }
.search-radar-head strong { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.search-radar-head time { color: var(--dim); font: .65rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.radar-dot {
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(184,243,107,.55);
  animation: radar-pulse 1.35s infinite;
}
.radar-dot.complete { animation: none; box-shadow: none; }
.search-phases { display: grid; gap: .35rem; }
.search-phase {
  display: grid;
  grid-template-columns: 4.7rem minmax(0,1fr) auto;
  gap: .55rem;
  align-items: center;
  min-width: 0;
  padding: .48rem .55rem;
  border: 1px solid #262725;
  border-radius: .35rem;
  background: rgba(10,10,10,.58);
}
.search-phase > div { min-width: 0; }
.search-phase strong, .search-phase small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-phase strong { font-size: .72rem; }
.search-phase small { margin-top: .08rem; color: var(--dim); font-size: .61rem; }
.search-phase > b { color: var(--green); font-size: .7rem; }
.phase-state { color: var(--dim); font: 700 .55rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.search-phase.searching { border-color: rgba(184,243,107,.36); }
.search-phase.searching .phase-state { color: var(--green); }
.search-phase.done .phase-state { color: #b8b8b3; }
.search-phase.error .phase-state { color: var(--red); }
.search-phase.unavailable .phase-state { color: var(--dim); }
.source-list { display: grid; padding: 0 1rem 1.5rem; }
.source-filter { margin: .65rem 1rem 0; }
.source-filter > span, .source-filter > small { display: block; color: var(--muted); font-size: .68rem; }
.source-filter > span { margin-bottom: .3rem; }
.source-filter > small { margin-top: .25rem; color: var(--dim); font-size: .61rem; }
.source-card {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: .75rem;
  align-items: center;
  min-width: 0;
  padding: .9rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.quality { color: var(--green); font-size: .72rem; font-weight: 850; }
.source-main { min-width: 0; }
.source-main strong { display: block; overflow-wrap: anywhere; font-size: .84rem; line-height: 1.25; }
.source-provider { display: block; overflow: hidden; margin-top: .16rem; color: #73736e; font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.source-meta { display: flex; flex-wrap: wrap; gap: .3rem .7rem; margin-top: .2rem; color: var(--muted); font-size: .7rem; }
.source-language { display: inline-flex; align-items: center; gap: .25rem; }
.source-language b { font-size: .9rem; font-weight: 400; line-height: 1; }
.source-seeders { color: var(--green); }
.best-source { margin-right: .4rem; color: var(--green); font-size: .58rem; letter-spacing: .08em; }
.source-open { display: none; }
.source-searching-tail { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem 0; color: var(--muted); font-size: .7rem; }
.inline-loader { display: inline-block; width: .6rem; height: .6rem; border: 1px solid #4c4c48; border-top-color: var(--green); border-radius: 50%; animation: spin .7s linear infinite; }
.empty { padding: 3rem 1rem; color: var(--muted); text-align: center; }

@keyframes radar-pulse { 70% { box-shadow: 0 0 0 .45rem rgba(184,243,107,0); } 100% { box-shadow: 0 0 0 0 rgba(184,243,107,0); } }
@keyframes spin { to { rotate: 360deg; } }

.player-sheet {
  width: min(calc(100% - 1rem), 62rem);
  max-width: none;
  max-height: calc(100dvh - 1rem);
  overflow-x: hidden;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .7rem;
  background: #101010;
  margin: auto;
  border-bottom: 1px solid var(--line);
}
.player-sheet::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(5px); }
.mini-player { position: fixed; z-index: 90; right: .8rem; bottom: max(.8rem, calc(.8rem + env(safe-area-inset-bottom))); left: .8rem; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .6rem; width: min(calc(100% - 1.6rem), 34rem); margin-left: auto; padding: .55rem; border: 1px solid #393b35; border-radius: .7rem; background: rgba(18,19,17,.96); box-shadow: 0 1rem 3rem rgba(0,0,0,.55); backdrop-filter: blur(18px); -webkit-transform: translate3d(0,var(--mini-viewport-offset, 0px),0); transform: translate3d(0,var(--mini-viewport-offset, 0px),0); will-change: transform; }
.mini-player button { min-width: 0; padding: .45rem .6rem; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.mini-player button:first-child span { display: block; color: var(--green); font-size: .55rem; font-weight: 850; letter-spacing: .1em; }
.mini-player strong { display: block; overflow: hidden; margin-top: .1rem; text-overflow: ellipsis; white-space: nowrap; }
.mini-player #mini-stop { align-self: center; color: var(--red); font-size: .72rem; }
.player-top { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; }
.player-top > div { min-width: 0; }
.player-label { color: var(--green); font-size: .66rem; font-weight: 850; letter-spacing: .12em; }
.player-top h2 {
  display: -webkit-box;
  margin: .25rem 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 1.3rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.player-top p { margin: 0 0 1rem; overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.video-frame { position: relative; overflow: hidden; aspect-ratio: 16/9; background: #050505; }
.video-frame video { width: 100%; height: 100%; display: block; background: #050505; }
.web-controls { position: absolute; z-index: 3; right: .55rem; bottom: .55rem; left: .55rem; display: grid; grid-template-columns: auto minmax(4rem,1fr) auto auto 5rem auto auto auto; gap: .5rem; align-items: center; padding: .55rem; border: 1px solid rgba(255,255,255,.12); border-radius: .55rem; background: rgba(8,8,8,.86); opacity: 1; translate: 0 0; backdrop-filter: blur(14px); transition: opacity .22s ease, translate .22s ease; }
.video-frame.controls-idle { cursor: none; }
.video-frame.controls-idle .web-controls { opacity: 0; translate: 0 .7rem; pointer-events: none; }
.web-controls button { width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%; background: #262724; color: var(--ink); font-size: .8rem; cursor: pointer; }
.web-controls button:hover { background: var(--green); color: #090909; }
.web-controls input[type="range"] { width: 100%; accent-color: var(--green); }
.web-controls span { min-width: 6.5rem; color: #ddd; font: 600 .68rem ui-monospace, monospace; text-align: center; }
@media (max-width: 600px) { .web-controls { grid-template-columns: auto minmax(3rem,1fr) auto auto auto; } #web-volume, #web-mute { display: none; } .web-controls span { min-width: 5.7rem; font-size: .61rem; } }
.player-placeholder { position: absolute; inset: 0; display: grid; align-content: center; gap: .4rem; padding: 1.5rem; text-align: center; background: #080808; }
.player-placeholder span { color: var(--muted); font-size: .77rem; }
.buffer-meter { width: min(100%, 22rem); height: .25rem; margin: .55rem auto 0; overflow: hidden; background: #292927; }
.buffer-meter i { display: block; width: 0; height: 100%; background: var(--green); transition: width .25s ease; }
.play-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .8rem; }
.play-actions .button { min-width: 0; width: 100%; }
#next-episode { grid-column: 1 / -1; border-color: var(--green); background: var(--green); color: #121410; font-weight: 900; }
#next-episode::after { content: " →"; }
.track-controls { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .75rem; }
.track-controls label { min-width: 0; }
.track-controls span { display: block; margin-bottom: .3rem; color: var(--muted); font-size: .68rem; }
.track-controls select {
  width: 100%;
  height: 2.65rem;
  padding: 0 .65rem;
  border: 1px solid var(--line);
  border-radius: .3rem;
  background: #181818;
  color: var(--ink);
  font: inherit;
}
.compatibility-note { min-height: 1.2rem; margin: .7rem 0 0; color: var(--muted); font-size: .72rem; }
.telemetry {
  margin-top: .8rem;
  padding: .75rem;
  border: 1px solid #2b2b29;
  border-radius: .35rem;
  background: #0c0d0c;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.telemetry-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; font-size: .62rem; }
.telemetry-head strong { color: var(--green); letter-spacing: .08em; }
.telemetry-head span { overflow: hidden; color: #777; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.telemetry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #222; border-left: 1px solid #222; }
.telemetry-item { min-width: 0; padding: .42rem .5rem; border-right: 1px solid #222; border-bottom: 1px solid #222; }
.telemetry-item span { display: block; margin-bottom: .15rem; color: #737772; font-size: .58rem; text-transform: uppercase; }
.telemetry-item strong { display: block; overflow: hidden; color: #dce2dc; font-size: .66rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.telemetry-log { display: grid; gap: .2rem; margin-top: .6rem; color: #949994; font-size: .61rem; }
.telemetry-log div { display: grid; grid-template-columns: 4.8rem 1fr; gap: .4rem; }
.telemetry-log time { color: #5f655f; }
.telemetry-log .error span { color: var(--red); }

.active-list { display: grid; gap: .5rem; }
.downloads-sheet { width: min(100%, 48rem); }
.downloads-header small { display: block; margin-top: .4rem; color: #777; font-size: .65rem; }
.downloads-list { padding: .25rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
.downloads-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .2rem 0 .7rem; color: var(--muted); font-size: .68rem; }
.downloads-toolbar .button { padding: .35rem .6rem; font-size: .65rem; }
.nas-delivery-section { margin-top: 1.1rem; border-top: 1px solid var(--line); }
.nas-delivery-section > .section-line { padding: 1rem 1rem .35rem; }
.nas-delivery-section > .section-line h3 { letter-spacing: .02em; }
.nas-job-card { display: grid; gap: .65rem; padding: 1rem; border: 1px solid rgba(184,243,107,.16); border-radius: .8rem; background: linear-gradient(135deg, rgba(184,243,107,.07), rgba(255,255,255,.025)); box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.16); }
.nas-job-top, .nas-job-meta, .nas-job-bottom { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.nas-job-title { min-width: 0; }
.nas-job-kicker { display: block; margin-bottom: .25rem; color: var(--green); font-size: .58rem; font-weight: 750; letter-spacing: .12em; }
.nas-job-title strong { display: block; overflow-wrap: anywhere; font-size: .92rem; line-height: 1.25; }
.nas-job-state { flex: 0 0 auto; padding: .25rem .5rem; border: 1px solid rgba(184,243,107,.25); border-radius: 999px; color: var(--green); font-size: .6rem; font-weight: 700; text-transform: uppercase; }
.nas-job-meta, .nas-job-bottom { color: var(--muted); font-size: .68rem; }
.nas-job-meta span:first-child, .nas-job-bottom span:first-child { min-width: 0; overflow-wrap: anywhere; }
.nas-job-meta span:last-child, .nas-job-bottom span:last-child { flex: 0 0 auto; text-align: right; }
.nas-progress { height: .55rem; overflow: hidden; border-radius: 999px; background: #292927; }
.nas-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), #b7e86c 60%, #f1f5b0); box-shadow: 0 0 .8rem rgba(184,243,107,.3); transition: width .35s ease; }
.nas-job-complete { border-color: rgba(184,243,107,.35); }
.nas-job-failed { border-color: rgba(255,110,110,.4); }
@media (max-width: 560px) {
  .downloads-list { padding-inline: .7rem; }
  .nas-delivery-section > .section-line { padding-inline: .7rem; }
  .nas-job-card { padding: .85rem; }
  .nas-job-top { display: grid; gap: .55rem; }
  .nas-job-state { justify-self: start; }
  .nas-job-bottom { display: grid; gap: .25rem; }
  .nas-job-bottom span:last-child { text-align: left; }
}
.storage-meter { height: .3rem; margin-top: .75rem; overflow: hidden; background: #292927; border-radius: 1rem; }
.storage-meter i { display: block; width: 0; height: 100%; background: var(--green); transition: width .25s ease; }
.active-item { display: grid; grid-template-columns: 1fr auto; gap: .6rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.active-item > div:first-child { min-width: 0; }
.active-item > div:last-child { display: flex; align-items: start; justify-content: end; gap: .35rem; }
.active-item strong { display: block; overflow-wrap: anywhere; font-size: .82rem; line-height: 1.25; }
.active-item p { margin: .15rem 0 0; color: var(--muted); font-size: .72rem; }
.active-item button, .active-item a { padding: .35rem; border: 0; background: transparent; color: var(--green); font-size: .72rem; text-decoration: none; white-space: nowrap; }
.active-item button[data-remove] { color: var(--red); }
.download-empty { padding: 1.4rem 0; text-align: left; }
.choice-sheet { width: min(100%, 58rem); }
.choice-form { display: grid; gap: 1rem; padding: 1rem; }
.choice-form section, .choice-form details { padding: 1rem; border: 1px solid var(--line); border-radius: .4rem; }
.choice-form details.search-picker { padding: 0; border: 0; border-radius: 0; }
.choice-form h3 { margin: 0 0 .9rem; font-size: 1rem; }
.choice-form details summary { cursor: pointer; font-weight: 750; }
.choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.choice-grid label { min-width: 0; }
.choice-grid label > span, .choice-grid .picker-field > span, .genre-fieldset legend, .choice-subfieldset legend { display: block; margin-bottom: .3rem; color: var(--muted); font-size: .7rem; }
.choice-grid input, .choice-grid select {
  width: 100%; height: 2.75rem; padding: 0 .65rem; border: 1px solid var(--line); border-radius: .3rem;
  outline: none; background: #171817; color: var(--ink);
}
.choice-grid input:focus, .choice-grid select:focus { border-color: #777; }
.choice-grid small { color: var(--dim); font-size: .62rem; }
.genre-fieldset { margin: 1rem 0 0; padding: 0; border: 0; }
.choice-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.choice-chips label { position: relative; }
.choice-chips input { position: absolute; opacity: 0; pointer-events: none; }
.choice-chips span { display: block; padding: .42rem .65rem; border: 1px solid var(--line); border-radius: 1rem; color: var(--muted); font-size: .7rem; cursor: pointer; }
.choice-chips input:checked + span { border-color: var(--green); background: var(--green); color: #111; font-weight: 800; }
.advanced-choice { margin-top: 1rem; }
.wide-choice { grid-column: 1 / -1; }
.choice-subfieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.compact-chips { gap: .3rem; }
.compact-chips span { padding: .32rem .5rem; font-size: .66rem; }
.search-picker { position: relative; width: 100%; }
.search-picker summary {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.75rem;
  padding: .62rem .7rem; border: 1px solid var(--line); border-radius: .3rem; background: #171817;
  color: var(--ink); font-size: .76rem; font-weight: 500; cursor: pointer; list-style: none;
}
.search-picker summary::-webkit-details-marker { display: none; }
.search-picker summary::after { content: "⌄"; color: var(--green); font-size: .9rem; }
.search-picker[open] summary { border-color: #777; border-radius: .3rem .3rem 0 0; }
.picker-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-panel { padding: .55rem; border: 1px solid #777; border-top: 0; border-radius: 0 0 .3rem .3rem; background: #111; }
.picker-search { width: 100%; height: 2.4rem; padding: 0 .65rem; border: 1px solid var(--line); border-radius: .25rem; outline: none; background: #191919; color: var(--ink); }
.picker-search:focus { border-color: var(--green); }
.picker-options { display: grid; max-height: 13rem; margin-top: .35rem; overflow-y: auto; overscroll-behavior: contain; }
.picker-option { display: grid; grid-template-columns: 1rem minmax(0,1fr) auto; gap: .55rem; align-items: center; min-height: 2.25rem; padding: .35rem .3rem; color: var(--ink); font-size: .73rem; cursor: pointer; }
.picker-option:hover { background: #1b1c1a; }
.picker-option input { width: 1rem; height: 1rem; accent-color: var(--green); }
.picker-option small { color: var(--dim); font-size: .62rem; }
.picker-empty { padding: 1rem .3rem; color: var(--muted); font-size: .7rem; }
.surprise-label { grid-column: 1 / -1; }
.surprise-label input { padding: 0; }
.choice-results { display: grid; gap: .6rem; padding: 0 1rem 1rem; }
.choice-result { display: grid; grid-template-columns: 4.3rem minmax(0,1fr) auto; gap: .8rem; align-items: center; padding: .65rem; border: 1px solid var(--line); border-radius: .4rem; background: #111; }
.choice-result img { width: 4.3rem; aspect-ratio: 2/3; object-fit: cover; background: #1d1d1b; }
.choice-result-main { min-width: 0; }
.choice-result h3 { margin: 0; overflow: hidden; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.choice-result p { margin: .25rem 0 0; color: var(--muted); font-size: .68rem; }
.choice-match { color: var(--green); font-size: 1.05rem; font-weight: 850; white-space: nowrap; }
.choice-result button { margin-top: .45rem; padding: 0; border: 0; background: transparent; color: var(--green); font-size: .7rem; cursor: pointer; }
.choice-score-note { margin: .25rem 0; color: var(--dim); font-size: .65rem; }
.choice-result-actions { display: flex; gap: .8rem; }
.choice-details { margin-top: .5rem; padding-top: .4rem; border-top: 1px solid var(--line); }
.choice-details p { margin: .25rem 0; }
.choice-details b { color: var(--ink); }
.choice-codex { padding: 0 1rem calc(1rem + env(safe-area-inset-bottom)); }
.choice-codex p { color: var(--muted); font-size: .72rem; }
.choice-codex .button { width: 100%; }
.choice-sheet { width: min(100%, 72rem); overflow-x: hidden; background: #0e0f0d; }
.choice-header { background: rgba(14,15,13,.97); backdrop-filter: blur(18px); }
.choice-journey { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .45rem; margin-top: .9rem; }
.choice-journey span { display: flex; min-width: 0; align-items: center; gap: .35rem; overflow: hidden; color: #5f625d; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.choice-journey i { display: grid; flex: 0 0 1.25rem; width: 1.25rem; height: 1.25rem; place-items: center; border: 1px solid #353733; border-radius: 50%; font-style: normal; font-size: .57rem; }
.choice-journey span.active { color: var(--ink); }
.choice-journey span.active i { border-color: var(--green); background: var(--green); color: #10110f; font-weight: 900; }
.choice-journey span.done { color: #8d9189; }
.choice-journey span.done i { border-color: #66704f; color: var(--green); }
.choice-stage { min-height: 25rem; padding: clamp(1rem,3vw,2rem); }
.choice-stage.is-loading { opacity: .45; pointer-events: none; }
.choice-footer { position: sticky; z-index: 3; bottom: 0; display: grid; grid-template-columns: minmax(7rem,.35fr) 1fr; gap: .65rem; padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(14,15,13,.96); backdrop-filter: blur(18px); }
.choice-footer .button { width: 100%; }
.choice-kicker { color: var(--green); font-size: .65rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.choice-intro { max-width: 48rem; margin-bottom: 1.5rem; }
.choice-intro h3, .choice-result-hero h3 { margin: .5rem 0 .65rem; font-size: clamp(2rem,7vw,4.5rem); line-height: .93; letter-spacing: -.055em; }
.choice-intro h3 em, .choice-result-hero h3 em { color: var(--green); font-style: normal; }
.choice-intro p, .choice-result-hero p { max-width: 42rem; margin: 0; color: var(--muted); font-size: .88rem; }
.choice-intro.compact h3 { font-size: clamp(1.9rem,6vw,3.6rem); }
.taste-profile-strip { display: grid; grid-template-columns: auto auto auto auto auto auto; gap: .25rem .5rem; align-items: baseline; width: max-content; max-width: 100%; margin-top: 1rem; }
.taste-profile-strip strong { color: var(--green); font-size: 1.4rem; }
.taste-profile-strip span { color: var(--dim); font-size: .64rem; }
.taste-signals, .taste-hint { margin-top: .75rem; color: var(--muted); font-size: .7rem; }
.taste-signals span, .choice-profile-proof span { display: inline-block; margin: .2rem .25rem .2rem 0; padding: .3rem .5rem; border: 1px solid #343832; border-radius: 2rem; color: #c6c9c2; }
.taste-search { position: relative; margin-bottom: 1.5rem; }
.taste-search label { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .7rem; }
.taste-search > input { width: 100%; min-height: 3.4rem; padding: 0 1rem; border: 1px solid #3b3e39; border-radius: .45rem; outline: none; background: #151614; color: var(--ink); font-size: max(16px,1rem); }
.taste-search > input:focus { border-color: var(--green); }
.choice-search-results { position: absolute; z-index: 5; right: 0; left: 0; display: grid; max-height: 20rem; overflow-y: auto; background: #171816; box-shadow: 0 1rem 2rem rgba(0,0,0,.45); }
.choice-search-results > button { display: grid; grid-template-columns: 2.6rem minmax(0,1fr) auto; gap: .65rem; align-items: center; min-width: 0; padding: .45rem .6rem; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.choice-search-results img { width: 2.6rem; aspect-ratio: 2/3; object-fit: cover; background: #222; }
.choice-search-results span, .choice-search-results strong, .choice-search-results small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choice-search-results small { color: var(--dim); font-size: .64rem; }
.choice-search-results b { color: var(--green); font-size: .68rem; }
.choice-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.choice-section-heading span, .choice-question > span, .choice-refine > span { color: var(--green); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.choice-section-heading h4 { margin: .15rem 0 0; font-size: .95rem; }
.choice-section-heading button, .choice-reset { border: 0; background: transparent; color: var(--muted); font-size: .68rem; cursor: pointer; }
.taste-deck { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; }
.taste-card { min-width: 0; padding: .55rem; border: 1px solid #292b28; border-radius: .5rem; background: #131412; }
.taste-poster { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #20211f; }
.taste-poster::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent,rgba(0,0,0,.7)); }
.taste-poster img { width: 100%; height: 100%; object-fit: cover; object-position: center 23%; }
.taste-poster > span { position: absolute; z-index: 1; right: .4rem; bottom: .3rem; font-size: .6rem; }
.taste-card > h4 { margin: .5rem 0 .12rem; overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.taste-card > p { min-height: 1rem; margin: 0; overflow: hidden; color: var(--dim); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.taste-reactions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .25rem; margin-top: .5rem; }
.taste-reactions button { min-height: 2.35rem; padding: .2rem; border: 1px solid #30322f; border-radius: .3rem; background: #191a18; color: #a7aaa4; font-size: .63rem; cursor: pointer; }
.taste-reactions button.active { border-color: var(--green); background: var(--green); color: #111; font-weight: 850; }
.taste-reactions button.active.negative { border-color: var(--red); background: var(--red); }
.taste-reasons { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .45rem; padding-top: .4rem; border-top: 1px solid #292b28; }
.taste-reasons > span { width: 100%; color: var(--dim); font-size: .58rem; }
.taste-reasons button { padding: .22rem .35rem; border: 1px solid #30322f; border-radius: 1rem; background: transparent; color: #888b85; font-size: .56rem; cursor: pointer; }
.taste-reasons button.active { border-color: #7e8f62; color: var(--green); }
.choice-reset { display: block; margin: 1.2rem auto 0; color: #696b67; }
.choice-intent-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
.choice-intent-grid > button { display: grid; grid-template-columns: 2.4rem minmax(0,1fr); gap: .7rem; align-items: center; min-height: 5rem; padding: .8rem; border: 1px solid #2e302c; border-radius: .5rem; background: #141513; text-align: left; cursor: pointer; }
.choice-intent-grid > button > i { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 1px solid #3c4038; border-radius: 50%; color: var(--green); font-style: normal; font-size: 1.1rem; }
.choice-intent-grid strong, .choice-intent-grid small { display: block; }
.choice-intent-grid strong { font-size: .82rem; }
.choice-intent-grid small { margin-top: .18rem; color: var(--dim); font-size: .64rem; }
.choice-intent-grid > button.active { border-color: var(--green); background: #1a1d16; box-shadow: inset 0 0 0 1px rgba(184,243,107,.2); }
.choice-question { padding: .85rem; border: 1px solid #292b28; border-radius: .5rem; background: #121311; }
.choice-question > p { margin: .2rem 0 .7rem; color: var(--dim); font-size: .65rem; }
.compact-question { margin-top: 1rem; }
.choice-question-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }
.choice-option-cards, .choice-segments { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.choice-option-cards button, .choice-segments button, .choice-genre-ban button, .choice-refine button { flex: 1 1 7rem; min-height: 2.8rem; padding: .45rem .55rem; border: 1px solid #30322f; border-radius: .35rem; background: #181917; color: #a4a7a0; cursor: pointer; }
.choice-option-cards strong, .choice-option-cards small { display: block; }
.choice-option-cards small { margin-top: .1rem; color: #666963; font-size: .58rem; }
.choice-option-cards button.active, .choice-segments button.active, .choice-genre-ban button.active, .choice-refine button.active { border-color: var(--green); background: var(--green); color: #111; font-weight: 800; }
.choice-option-cards button.active small { color: #384027; }
.choice-boundaries { margin-top: .7rem; }
.choice-genre-ban { display: flex; flex-wrap: wrap; gap: .35rem; }
.choice-genre-ban button { flex: 0 1 auto; min-height: 2.35rem; border-radius: 2rem; }
.choice-result-hero { margin-bottom: 1rem; padding: 1rem; border: 1px solid #34402a; border-radius: .6rem; background: radial-gradient(circle at 90% 0,rgba(184,243,107,.13),transparent 42%),#141612; }
.choice-result-hero h3 { font-size: clamp(2rem,6vw,3.8rem); }
.choice-profile-proof { margin-top: .7rem; color: var(--muted); font-size: .62rem; }
.choice-refine { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: 1rem; }
.choice-refine > span { width: 100%; margin-bottom: .1rem; }
.choice-refine button { flex: 0 1 auto; min-height: 2.25rem; border-radius: 2rem; font-size: .64rem; }
.choice-result-deck { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.choice-result-card { display: grid; grid-template-columns: 8rem minmax(0,1fr); min-width: 0; overflow: hidden; border: 1px solid #2c2e2a; border-radius: .55rem; background: #131412; }
.choice-result-poster { position: relative; min-height: 13rem; background: #20211f; }
.choice-result-poster img { width: 100%; height: 100%; object-fit: cover; }
.choice-result-poster span, .choice-result-poster strong { position: absolute; left: .4rem; padding: .22rem .35rem; background: rgba(8,9,8,.86); font-size: .58rem; }
.choice-result-poster span { top: .4rem; color: var(--green); text-transform: uppercase; }
.choice-result-poster strong { bottom: .4rem; }
.choice-result-copy { min-width: 0; padding: .7rem; }
.choice-result-copy h4 { margin: 0; font-size: 1rem; }
.choice-result-copy > p { margin: .2rem 0 .55rem; color: var(--dim); font-size: .62rem; }
.choice-result-copy ul { min-height: 3.5rem; margin: 0 0 .6rem; padding-left: 1rem; color: #a7aaa4; font-size: .64rem; }
.choice-result-copy li { margin-bottom: .2rem; }
.choice-result-primary, .choice-result-feedback { display: flex; flex-wrap: wrap; gap: .55rem; }
.choice-result-primary button, .choice-result-feedback button { min-height: 2.3rem; padding: 0; border: 0; background: transparent; color: var(--green); font-size: .66rem; cursor: pointer; }
.choice-result-primary button:first-child { padding: 0 .65rem; border-radius: .3rem; background: var(--green); color: #111; font-weight: 800; }
.choice-result-feedback { margin-top: .45rem; padding-top: .4rem; border-top: 1px solid #292b28; }
.choice-result-feedback span { width: 100%; color: #62655f; font-size: .56rem; }
.choice-result-feedback button { min-height: 1.5rem; color: #858981; font-size: .58rem; }
.choice-result-feedback button:last-child { color: #a47d79; }
.choice-honesty { margin: 1rem 0 0; color: #62655f; font-size: .6rem; text-align: center; }
.choice-loading, .choice-loading-inline { min-height: 25rem; display: grid; place-items: center; align-content: center; gap: .65rem; padding: 2rem; text-align: center; }
.choice-loading > span:last-child { max-width: 30rem; color: var(--muted); font-size: .72rem; }
.choice-orbit { width: 2.8rem; height: 2.8rem; border: 1px solid #38402f; border-top-color: var(--green); border-radius: 50%; animation: spin .85s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.choice-empty { display: grid; min-height: 14rem; place-items: center; align-content: center; gap: .55rem; color: var(--muted); text-align: center; }
.choice-empty strong { color: var(--ink); }
.choice-empty .button { margin-top: .5rem; }
.toast { position: fixed; z-index: 100; left: 1rem; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); padding: .85rem 1rem; background: var(--ink); color: #111; font-weight: 650; opacity: 0; translate: 0 1rem; transition: .2s; pointer-events: none; }
.toast.visible { opacity: 1; translate: 0; }

/* Adapt by interaction capability, not browser or device brand. */
:root[data-device-mode="mobile"] .topbar { padding-inline: max(1rem, env(safe-area-inset-left)); }
:root[data-device-mode="mobile"] .catalog-taste-actions button { min-height: 2.25rem; }
:root[data-device-mode="mobile"] .discovery-modes button, :root[data-device-mode="mobile"] .genre-strip button { min-height: 2.35rem; }
:root[data-device-mode="tv"] { font-size: 18px; }
:root[data-device-mode="tv"] .browse-head, :root[data-device-mode="tv"] .library, :root[data-device-mode="tv"] .recent-section { width: min(100% - 5rem, 100rem); }
:root[data-device-mode="tv"] .topbar { height: 5.5rem; padding: 0 2.5rem 1.15rem; }
:root[data-device-mode="tv"] .topbar nav { gap: 2rem; }
:root[data-device-mode="tv"] .nav-button { font-size: .9rem; }
:root[data-device-mode="tv"] .catalog { gap: 2.2rem 1.3rem; }
:root[data-device-mode="tv"] .movie-open:focus-visible, :root[data-device-mode="tv"] .catalog-taste-actions button:focus-visible { outline-width: 4px; outline-offset: 6px; }
:root[data-device-mode="tv"] .catalog-taste-actions { gap: .45rem .85rem; }
:root[data-device-mode="tv"] .catalog-taste-actions button { min-height: 2.4rem; font-size: .72rem; }
:root[data-device-mode="tv"] .play-actions { grid-template-columns: repeat(3, minmax(0,1fr)); }
:root[data-device-mode="tv"] #next-episode { grid-column: 1 / -1; min-height: 3.1rem; font-size: 1rem; }
:root[data-device-mode="tv"] .recent-list { grid-auto-columns: minmax(20rem, 26rem); }

@media (min-width: 620px) {
  .catalog { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.8rem 1rem; }
  .browse-head { padding-top: 5rem; }
  .detail-info .button { width: auto; }
  .source-card { grid-template-columns: 4rem 1fr auto; }
  .source-open { display: block; color: var(--muted); }
  .genre-strip { margin-inline: 0; padding-inline: 0; }
  .library-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .account-content { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .letterboxd-card { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .topbar nav { gap: .65rem; }
  .nav-button { font-size: .7rem; }
  .account-nav b { display: none; }
  .profile-panel { margin-top: 2vh; }
  .profile-kicker { margin-top: 2.5rem; }
  .profile-list { gap: .8rem; }
  .profile-choice { width: 8.5rem; }
  .profile-identity > span { width: 5.8rem; }
  .player-sheet { width: calc(100% - .5rem); padding: .75rem; }
  .player-top { gap: .5rem; }
  .play-actions, .track-controls { grid-template-columns: 1fr; }
  .telemetry-grid { grid-template-columns: 1fr; }
  .active-item { grid-template-columns: 1fr; }
  .active-item > div:last-child { justify-content: start; }
  .search-phase { grid-template-columns: 4.2rem minmax(0,1fr) auto; padding-inline: .4rem; }
  .choice-grid { grid-template-columns: 1fr; }
  .surprise-label { grid-column: auto; }
  .wide-choice { grid-column: auto; }
  .choice-result { grid-template-columns: 3.6rem minmax(0,1fr); }
  .choice-result img { width: 3.6rem; }
  .choice-match { grid-column: 2; }
  .recent-list { grid-auto-columns: minmax(15rem, 88vw); }
  .recent-card { grid-template-columns: 2.8rem minmax(0, 1fr); }
  .recent-poster { width: 2.8rem; grid-row: span 2; }
  .recent-open { grid-column: 2; }
  .recent-progress-label { grid-column: 1 / -1; }
  .recent-progress { grid-column: 1 / -1; }
  .choice-journey span { font-size: 0; }
  .choice-journey i { font-size: .57rem; }
  .choice-stage { padding: 1rem; }
  .choice-footer { grid-template-columns: .45fr 1fr; }
  .taste-profile-strip { grid-template-columns: auto auto auto auto; }
  .taste-profile-strip strong:nth-of-type(3), .taste-profile-strip strong:nth-of-type(3) + span { display: none; }
  .taste-deck { grid-template-columns: 1fr; }
  .taste-card { display: grid; grid-template-columns: 5.2rem minmax(0,1fr); gap: 0 .65rem; }
  .taste-poster { grid-row: span 4; aspect-ratio: 2/3; }
  .taste-card > h4 { align-self: end; }
  .taste-reactions, .taste-reasons { grid-column: 2; }
  .choice-intent-grid, .choice-question-grid, .choice-result-deck { grid-template-columns: 1fr; }
  .choice-result-card { grid-template-columns: 6.6rem minmax(0,1fr); }
  .choice-result-poster { min-height: 12rem; }
}
@media (max-width: 560px) {
  .topbar { gap: .45rem; padding-inline: .75rem; }
  .topbar nav { min-width: 0; gap: .55rem; }
  .nav-button { min-height: 2.65rem; font-size: .72rem; }
  .account-nav { flex: 0 0 2.65rem; justify-content: center; }
  .account-nav b { display: none; }
  .account-nav span { width: 1.65rem; height: 1.65rem; }
  .account-sheet { width: 100%; max-height: 100dvh; margin: 0; border-inline: 0; border-radius: 0; }
  .account-content { padding-inline: .75rem; }
  .account-card { padding: .9rem; }
}
@media (min-width: 980px) {
  .catalog { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .sheet { margin: auto; border: 1px solid var(--line); border-radius: .8rem; }
}