:root {
  --bg: #0b0d12;
  --bg-2: #12151d;
  --bg-3: #1a1f2b;
  --card: #161a24;
  --line: #262c3a;
  --text: #eef1f7;
  --muted: #9aa3b5;
  --muted-2: #6b7488;
  --accent: #f5c518;
  --accent-2: #ff5c7a;
  --good: #4cd08a;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  overscroll-behavior-y: none;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; }
img { display: block; }

#app { min-height: 100vh; overflow-x: clip; }

/* ---------------------------------------------------------------- topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(var(--safe-t) + 9px) 16px 9px;
  background: #032541;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 2px;
  white-space: nowrap;
}
.brand-text {
  background: linear-gradient(92deg, #90cea1 8%, #01b4e4 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-pill {
  width: 32px; height: 13px; border-radius: 8px;
  background: linear-gradient(90deg, #01b4e4, #90cea1);
  opacity: .95;
}
.topbar-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.topnav { display: none; }
.icon-btn {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #eaf6fb;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.icon-btn:hover { background: rgba(255,255,255,.17); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { display: block; }
.icon-btn.spinning svg { animation: spin 1s linear infinite; }

/* ------------------------------------------------------------------ view */
.view {
  padding: 14px 0 calc(84px + var(--safe-b));
  min-height: 60vh;
}
.section { margin: 30px 0 6px; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 16px 10px;
}
.section-title { font-size: 17px; font-weight: 750; }
.section-sub { font-size: 12px; color: var(--muted-2); }
.section-count { font-size: 12px; color: var(--muted); }

/* --------------------------------------------------------------- banners */
.banner {
  margin: 0 16px 6px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.5;
  display: flex; gap: 8px; align-items: flex-start;
}
.banner.warn { background: rgba(245,197,24,.1); color: #f0d68a; border: 1px solid rgba(245,197,24,.22); }
.banner.info { background: rgba(90,140,255,.1); color: #a9c1ff; border: 1px solid rgba(90,140,255,.22); }
.banner .tag {
  flex: 0 0 auto;
  font-weight: 800; font-size: 10px;
  padding: 2px 6px; border-radius: 6px;
  background: rgba(255,255,255,.12);
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  margin: 6px 0 0;
  border-radius: 20px;
  overflow: hidden;
  min-height: 470px;
  display: flex;
  align-items: center;
  background: #0f131b;
  isolation: isolate;
}
.hero { --tint: 46, 50, 58; }
/* Background is its own soft, out-of-focus plate so it never competes with the
   poster/text in front. Blur + slight zoom keeps the blurred edges out of view. */
.hero-bg {
  position: absolute; inset: -14px;
  background-size: cover;
  background-position: 50% 28%;
  transform: scale(1.035);
  transform-origin: 50% 42%;
  filter: blur(6px) brightness(.76) saturate(.78) contrast(.9);
  will-change: filter, transform;
}
.hero-bg.no-image {
  transform: scale(1.03);
  filter: blur(6px) brightness(.95) saturate(.9);
  background: radial-gradient(circle at 28% 18%, #1b2740, #0e1117 70%);
}
/* Per-movie colour wash + depth gradient: darker on the left for the poster and
   copy, opening up on the right so the subject's silhouette stays readable. */
.hero-shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(130% 150% at 78% 34%,
      rgba(var(--tint), 0) 32%,
      rgba(var(--tint), .18) 100%),
    linear-gradient(90deg,
      rgba(var(--tint), .56) 0%,
      rgba(var(--tint), .42) 18%,
      rgba(var(--tint), .25) 40%,
      rgba(var(--tint), .12) 62%,
      rgba(var(--tint), .05) 82%,
      rgba(var(--tint), .02) 100%),
    linear-gradient(0deg,
      rgba(11, 13, 18, .96) 0%,
      rgba(11, 13, 18, .62) 10%,
      rgba(6, 8, 12, 0) 38%),
    rgba(var(--tint), .18);
}
.hero-inner {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 36px;
  width: 100%;
  padding: 44px 88px;
}
.hero-inner.anim-next { animation: heroNext .42s cubic-bezier(.2,.8,.2,1); }
.hero-inner.anim-prev { animation: heroPrev .42s cubic-bezier(.2,.8,.2,1); }
.hero-inner.anim-fade { animation: heroFade .5s ease; }
@keyframes heroNext { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes heroPrev { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }

.hero-poster { flex: 0 0 auto; width: 240px; }
.hero-poster img {
  width: 100%; aspect-ratio: 2/3; object-fit: contain;
  border-radius: 14px; background: var(--bg-3);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .68), 0 0 0 1px rgba(255, 255, 255, .16),
              0 0 40px rgba(0, 0, 0, .35);
}
.hero-info { flex: 1; min-width: 0; max-width: 780px; }
.hero-title, .hero-orig, .hero-meta, .hero-overview, .hero-reason {
  text-shadow: 0 1px 14px rgba(0, 0, 0, .62), 0 1px 3px rgba(0, 0, 0, .55);
}
.hero-badge {
  display: inline-block;
  font-size: 11.5px; font-weight: 700; letter-spacing: .5px;
  color: #ffd76a; background: rgba(245,197,24,.12);
  border: 1px solid rgba(245,197,24,.25);
  padding: 3px 11px; border-radius: 20px; margin-bottom: 15px;
}
.hero-title { font-size: 38px; font-weight: 850; line-height: 1.14; margin: 0; letter-spacing: .3px; }
.hero-orig { font-size: 15px; color: var(--muted-2); margin-top: 8px; }
.hero-meta { font-size: 14px; color: var(--muted); margin-top: 13px; }
.hero-score { font-size: 14px; color: var(--accent); font-weight: 800; margin-top: 8px; }
.hero-reason {
  margin-top: 15px; padding-left: 12px;
  border-left: 3px solid var(--accent);
  font-size: 13.5px; color: #e6d9a6; line-height: 1.5;
}
.hero-overview {
  margin: 15px 0 0; font-size: 14px; color: #c6cdda; line-height: 1.66;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-actions { display: flex; gap: 12px; margin-top: 24px; }
.hero-actions .btn { flex: 0 0 auto; padding: 12px 28px; font-size: 14.5px; }

.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 25px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .15s ease;
}
.hero-arrow:hover { background: rgba(0,0,0,.74); }
.hero-arrow.left { left: 16px; }
.hero-arrow.right { right: 16px; }
.batch-status { font-size: 11.5px; color: var(--muted-2); padding: 8px 2px 0; letter-spacing: .3px; }
.pill {
  display: inline-block; padding: 1px 7px; border-radius: 20px;
  background: var(--bg-3); border: 1px solid var(--line);
  font-size: 11.5px; color: var(--muted);
}
.tonight-overview {
  margin: 12px 0 0;
  font-size: 13.5px; color: #c6cdda; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.reason {
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(245,197,24,.12), rgba(245,197,24,.03));
  border-left: 3px solid var(--accent);
  font-size: 12.5px; color: #e9dca8;
}
.tonight-actions { display: flex; gap: 10px; margin-top: 14px; }
.btn {
  flex: 1;
  border: none;
  border-radius: 11px;
  padding: 12px 10px;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: #171200; }
.btn-ghost { background: var(--bg-3); color: var(--text); border: 1px solid var(--line); }
.btn-dislike {
  background: rgba(255,92,122,.08); color: #e8a4b2;
  border: 1px solid rgba(255,92,122,.28); cursor: pointer;
}
.btn-dislike:hover { background: rgba(255,92,122,.15); color: #ffc0cc; }
.btn-dislike:disabled { opacity: .55; cursor: wait; }
.btn-dislike svg { flex: 0 0 auto; }
.btn-sm { padding: 8px 12px; font-size: 13px; border-radius: 9px; flex: 0 0 auto; }

/* ------------------------------------------------------------- h-scroll */
.hrow {
  display: flex; gap: 14px;
  overflow-x: auto;
  padding: 2px 16px 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.hrow::-webkit-scrollbar { display: none; }
.hrow > * { scroll-snap-align: start; }

/* horizontal carousel for "近期热议电影" */
.carousel { position: relative; }
.row-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(10,13,18,.5);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: 22px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  transition: opacity .2s ease, visibility .2s ease, background .15s ease;
}
.row-arrow:hover { background: rgba(10,13,18,.82); }
.row-arrow.left { left: 6px; }
.row-arrow.right { right: 6px; }
.row-arrow.hidden-arrow { opacity: 0; visibility: hidden; }

.pcard .ptag {
  position: absolute; left: 6px; bottom: 6px;
  max-width: calc(100% - 12px);
  font-size: 10.5px; padding: 2px 7px; border-radius: 7px;
  background: rgba(12,15,20,.62); color: #e7ecf4;
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(4px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pcard { flex: 0 0 134px; width: 134px; cursor: pointer; }
.pcard .poster {
  width: 100%; aspect-ratio: 2/3; border-radius: 12px;
  background: var(--bg-3); object-fit: cover;
  border: 1px solid rgba(255,255,255,.06);
}
.pcard .poster-wrap { position: relative; }
.pcard .ptitle {
  font-size: 13px; font-weight: 650; margin-top: 8px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard .pmeta { font-size: 11.5px; color: var(--muted-2); margin-top: 3px; }
.pcard .pscore { font-size: 11px; color: var(--muted); margin-top: 2px; }
.pcard .pscores {
  display: flex; flex-wrap: wrap; gap: 2px 8px;
  font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.3;
}
.score-douban { color: #75b866; }
.score-mine { color: var(--accent); }
.hero-scores { display: flex; align-items: center; gap: 14px; }
.hero-scores .score-douban { color: #8bd078; }
.pcard.rewatch .rw-stars { color: var(--accent); font-size: 12px; letter-spacing: 1px; margin-top: 5px; }
.pcard.rewatch .rw-line { font-size: 11.5px; color: var(--muted-2); margin-top: 2px; line-height: 1.35; }

/* compact list (used when the watchlist is very short) */
.mini-list { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 16px; }
.mini {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 14px 8px 8px; cursor: pointer;
  transition: background .15s ease;
}
.mini:hover { background: rgba(255,255,255,.06); }
.mini img { width: 44px; height: 66px; border-radius: 7px; object-fit: cover; background: var(--bg-3); }
.mini .mini-title { font-size: 13.5px; font-weight: 650; }
.mini .mini-sub { font-size: 11.5px; color: var(--muted-2); margin-top: 3px; }

/* --------------------------------------------------------------- grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 13px 10px;
  padding: 4px 14px;
}
.grid .pcard { flex: none; width: auto; }
.badge-watched {
  position: absolute; right: 6px; top: 6px;
  background: rgba(76,208,138,.92); color: #04220f;
  font-size: 10px; font-weight: 800;
  padding: 2px 6px; border-radius: 6px;
}
.badge-watchlist {
  position: absolute; right: 6px; top: 6px;
  background: rgba(90,140,255,.92); color: #04102b;
  font-size: 10px; font-weight: 800;
  padding: 2px 6px; border-radius: 6px;
}

/* --------------------------------------------------------------- chips */
.chips {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 4px 16px 10px; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--muted);
  font-size: 12.5px;
  padding: 7px 13px; border-radius: 20px;
}
.chip.active { background: var(--text); color: #0b0d12; border-color: var(--text); font-weight: 700; }
.chip:active { transform: scale(.96); }

.filter-bar { display: flex; gap: 8px; padding: 0 16px 10px; overflow-x: auto; scrollbar-width: none; }
.filter-bar::-webkit-scrollbar { display: none; }
select.control, input.control {
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 11px;
  font-size: 13px;
  flex: 0 0 auto;
  -webkit-appearance: none;
  appearance: none;
}
input.control { flex: 1 1 auto; width: 100%; }

/* --------------------------------------------------------------- search */
.searchbar { padding: 4px 16px 10px; display: flex; gap: 9px; }
.searchbar input {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  color: var(--text);
  font-size: 15px;
  outline: none;
}
.searchbar input:focus { border-color: var(--accent); }
.seg { display: flex; gap: 6px; padding: 0 16px 12px; }
.seg button {
  flex: 1; border: 1px solid var(--line); background: var(--bg-2);
  color: var(--muted); border-radius: 10px; padding: 9px; font-size: 13px;
}
.seg button.active { background: var(--text); color: #0b0d12; font-weight: 700; border-color: var(--text); }

.list { padding: 0 12px; }
.lrow {
  display: flex; gap: 12px; padding: 10px 4px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  align-items: center;
}
.lrow .poster { width: 58px; flex: 0 0 auto; aspect-ratio: 2/3; border-radius: 8px; object-fit: cover; background: var(--bg-3); }
.lrow .linfo { min-width: 0; flex: 1; }
.lrow .ltitle { font-weight: 700; font-size: 14.5px; }
.lrow .lsub { font-size: 12px; color: var(--muted-2); margin-top: 2px; }
.lrow .ltags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tag {
  font-size: 11px; padding: 2px 7px; border-radius: 6px;
  background: var(--bg-3); color: var(--muted); border: 1px solid var(--line);
}
.tag.watched { color: var(--good); border-color: rgba(76,208,138,.35); background: rgba(76,208,138,.1); }
.tag.unseen { color: var(--muted); }
.tag.wish { color: #8fb0ff; border-color: rgba(90,140,255,.35); background: rgba(90,140,255,.1); }
.tag.mine { color: var(--accent); border-color: rgba(245,197,24,.35); background: rgba(245,197,24,.1); }

/* ----------------------------------------------------------- search page */
.search-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
}
.search-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0 22px;
}
.search-heading {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text);
  opacity: .9;
  margin: 0 0 18px;
}
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 720px;
  height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.search-box:focus-within {
  border-color: rgba(245,197,24,.55);
  background: rgba(255,255,255,.055);
  box-shadow: 0 0 0 3px rgba(245,197,24,.1);
}
.search-icon { display: flex; color: var(--muted-2); margin-right: 10px; transition: color .18s ease; }
.search-box:focus-within .search-icon { color: var(--accent); }
.search-box input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 15px;
}
.search-box input::placeholder { color: var(--muted-2); }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-clear {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  margin-left: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.1);
  color: var(--muted);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.search-clear:hover { background: rgba(255,255,255,.2); color: #fff; }
.search-clear[hidden] { display: none; }
.search-clear svg { display: block; }

/* compact segmented pill (content-width, glass/gold) */
.seg-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 16px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
}
.seg-pill button {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.seg-pill button:hover { color: var(--text); }
.seg-pill button.active {
  color: #ffe08a;
  background: rgba(245,197,24,.14);
  box-shadow: inset 0 0 0 1px rgba(245,197,24,.22);
}

.search-results { padding: 4px 0 46px; }

/* unified poster cards (same as home) laid out as a grid */
.search-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 12px;
}
.search-grid .pcard { flex: none; width: auto; }
.badge-unseen {
  position: absolute; right: 6px; top: 6px;
  background: rgba(18,22,31,.72); color: var(--muted);
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.search-grid.compact { grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }
.search-grid.compact .pcard .ptitle { font-size: 12px; }
.search-grid.compact .pcard .pmeta,
.search-grid.compact .pcard .pscore { font-size: 11px; }

/* empty-state sections */
.search-section { margin-bottom: 30px; }
.search-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.search-section-title {
  font-size: 13px; font-weight: 700; letter-spacing: .5px; color: var(--muted);
}
.search-section-clear {
  border: none; background: none; color: var(--muted-2);
  font-size: 12px; padding: 2px 4px; cursor: pointer;
  transition: color .15s ease;
}
.search-section-clear:hover { color: var(--text); }
.recent-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.recent-chip {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.recent-chip:hover {
  background: rgba(255,255,255,.08);
  color: var(--text);
  border-color: rgba(255,255,255,.16);
}

.search-hint { text-align: center; color: var(--muted-2); padding: 58px 20px; }
.search-hint-ico { font-size: 34px; opacity: .6; margin-bottom: 12px; }
.search-hint-text { font-size: 13.5px; }

/* person results (circular avatar, not poster cards) */
.person-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 12px;
}
.person-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 20px 14px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.person-card:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); transform: translateY(-2px); }
.person-avatar img {
  width: 84px; height: 84px; border-radius: 50%;
  object-fit: cover; background: var(--bg-3);
  border: 1px solid rgba(255,255,255,.1);
}
.person-name { font-size: 14.5px; font-weight: 700; margin-top: 12px; }
.person-orig { font-size: 12px; color: var(--muted-2); margin-top: 3px; }
.person-works {
  font-size: 11.5px; color: var(--muted); margin-top: 9px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

@media (min-width: 720px) {
  .search-hero { padding: 40px 0 26px; }
  .search-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 22px 14px; }
  .search-grid.compact { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .person-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px 14px; }
}

/* --------------------------------------------------------------- stats */
.stats-page { position: relative; padding: 4px 16px 90px; }
.stats-content { position: relative; z-index: 2; pointer-events: none; }
.stats-bubbles { position: absolute; left: 0; right: 0; pointer-events: none; }

.glass {
  position: relative;
  background: rgba(22, 27, 38, .6);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 22px;
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  box-shadow: 0 22px 60px rgba(0,0,0,.38);
  padding: 22px 24px;
  margin: 0 0 22px;
}
.glass-title { font-size: 16px; font-weight: 800; margin-bottom: 16px; letter-spacing: .3px; }

.summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 10px; }
.sum-cell { text-align: center; }
.sum-num { font-size: 26px; font-weight: 850; letter-spacing: .5px; }
.sum-unit { font-size: 12px; color: var(--muted); font-weight: 600; margin-left: 4px; }
.sum-label { font-size: 12px; color: var(--muted); margin-top: 4px; }

.dist-list { display: flex; flex-direction: column; gap: 10px; }
.dist-row { display: flex; align-items: center; gap: 12px; }
.dist-stars { width: 64px; flex: 0 0 auto; font-size: 12px; color: var(--accent); letter-spacing: 1px; }
.dist-bar { flex: 1; height: 8px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.dist-bar > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, rgba(245,197,24,.85), rgba(245,197,24,.4)); }
.dist-count { width: 44px; text-align: right; font-size: 12.5px; color: var(--muted); flex: 0 0 auto; }

.grid2 { display: grid; grid-template-columns: 1fr; gap: 22px 30px; }
.rk-block { min-width: 0; }
.rk-title { font-size: 12.5px; color: var(--muted-2); margin-bottom: 10px; letter-spacing: .5px; }
.rk-list { display: flex; flex-direction: column; gap: 9px; }
.rk { display: flex; align-items: center; gap: 10px; }
.rk-name { flex: 0 1 auto; width: 108px; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-bar { flex: 1 1 auto; height: 6px; border-radius: 5px; background: rgba(255,255,255,.06); overflow: hidden; }
.rk-bar > i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, rgba(1,180,228,.75), rgba(144,206,161,.6)); }
.rk-val { flex: 0 0 auto; width: 72px; text-align: right; font-size: 12.5px; color: var(--muted); }
.rk-empty { font-size: 12.5px; color: var(--muted-2); }

.yr-list { display: flex; flex-direction: column; gap: 8px; }
.yr-row { display: flex; align-items: center; gap: 10px; }
.yr-year { width: 46px; flex: 0 0 auto; font-size: 12.5px; color: var(--muted); }
.this-year { display: flex; align-items: baseline; gap: 10px; }
.ty-num { font-size: 40px; font-weight: 850; color: var(--accent); }
.ty-label { font-size: 13px; color: var(--muted); }

/* floating review bubbles */
.bubble {
  position: absolute;
  pointer-events: auto;
  z-index: 0;
  max-width: 290px;
  padding: 12px 15px;
  border-radius: 18px;
  background: rgba(24,29,40,.5);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(9px) saturate(120%);
  -webkit-backdrop-filter: blur(9px) saturate(120%);
  box-shadow: 0 12px 34px rgba(0,0,0,.32);
  cursor: pointer;
  animation-name: bubbleFloat;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
  transition: background .2s ease, opacity .2s ease;
}
.bubble::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(155deg, rgba(255,255,255,.08), transparent 42%);
}
.bubble:hover { animation-play-state: paused; z-index: 10; background: rgba(36,42,57,.74); }
.bubble-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.bubble-title { font-size: 12.5px; font-weight: 750; color: #eef1f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bubble-stars { font-size: 11px; color: var(--accent); flex: 0 0 auto; letter-spacing: .5px; }
.bubble-text {
  font-size: 12.5px; color: #c2c9d6; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bubble:hover .bubble-text { -webkit-line-clamp: unset; overflow: visible; }
.bubble.r5 { border-color: rgba(245,197,24,.24); }
.bubble.r5 .bubble-stars { color: #ffd76a; }
.bubble.r5::before { background: linear-gradient(155deg, rgba(245,197,24,.1), transparent 45%); }
.bubble.r4 { border-color: rgba(245,197,24,.12); }
.bubble.r2 { opacity: .82; }
.bubble.r2 .bubble-text { color: #a7b0c1; }

@keyframes bubbleFloat {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(var(--dx, 16px), calc(var(--dy, 12px) * -1), 0); }
  50%  { transform: translate3d(calc(var(--dx, 16px) * -1), var(--dy, 12px), 0); }
  75%  { transform: translate3d(calc(var(--dx, 16px) * -0.4), calc(var(--dy, 12px) * -0.5), 0); }
  100% { transform: translate3d(0, 0, 0); }
}
body.anim-paused .bubble { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .bubble { animation: none !important; }
}

/* --------------------------------------------------------------- modal */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(4, 6, 10, .7);
  backdrop-filter: blur(7px) saturate(120%);
  -webkit-backdrop-filter: blur(7px) saturate(120%);
  opacity: 0;
  transition: opacity .26s ease;
}
.modal-backdrop.open { opacity: 1; }

.detail-modal {
  position: fixed; z-index: 61;
  left: 50%; top: 50%;
  width: min(78vw, 1000px);
  max-height: min(80vh, 900px);
  transform: translate(-50%, -50%) scale(.96);
  opacity: 0;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
  border-radius: 22px;
  overflow: hidden;
  background: #0e1117;
  box-shadow: 0 40px 110px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.035);
  display: flex; flex-direction: column;
}
.detail-modal.open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.detail-modal[hidden] { display: none; }

.detail-bg {
  position: absolute; inset: -40px;
  background-size: cover; background-position: center 22%;
  filter: blur(18px) brightness(.5) saturate(115%);
  transform: scale(1.12);
  pointer-events: none;
}
.detail-bg.no-image {
  background: radial-gradient(circle at 30% 0%, #1b2130, #0e1117 70%);
  filter: none; transform: none;
}
.detail-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(20,24,33,.35), transparent 60%),
    linear-gradient(180deg, rgba(10,12,17,.5) 0%, rgba(10,12,17,.82) 40%, #0e1117 74%);
}
.modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.16);
  color: #fff; font-size: 16px; display: grid; place-items: center;
  backdrop-filter: blur(6px); cursor: pointer;
}
.modal-close:hover { background: rgba(0,0,0,.78); }

.detail-scroll {
  position: relative; z-index: 2;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.14) transparent;
}
.detail-scroll::-webkit-scrollbar { width: 9px; }
.detail-scroll::-webkit-scrollbar-track { background: transparent; }
.detail-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.13);
  border-radius: 9px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.detail-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.24);
  background-clip: padding-box;
}
.detail-inner {
  display: grid;
  grid-template-columns: minmax(220px, 31%) 1fr;
  gap: 30px;
  padding: 34px 34px 30px;
}
.detail-poster { width: 100%; align-self: start; }
.detail-poster img {
  width: 100%; aspect-ratio: 2/3; object-fit: cover;
  border-radius: 16px; background: var(--bg-3);
  box-shadow: 0 18px 45px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
}

/* overview (right column) — fade only while clamped */
.ov-body { position: relative; }
.detail-section.clamp:not(.expanded) .ov-body {
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
.detail-main { min-width: 0; padding-top: 2px; }
.detail-kicker {
  font-size: 11.5px; letter-spacing: 2px; font-weight: 800;
  color: var(--accent); text-transform: uppercase; margin-bottom: 8px;
}
.detail-titlebar { display: flex; align-items: flex-start; gap: 14px; }
.detail-title { font-size: 30px; font-weight: 850; line-height: 1.16; margin: 0; letter-spacing: .3px; flex: 1; min-width: 0; }
.fav-btn {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  color: #cfd6e2; display: grid; place-items: center; cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.fav-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.fav-btn.active { color: #ff5c7a; border-color: rgba(255,92,122,.45); background: rgba(255,92,122,.12); }
.fav-btn.active svg path { fill: currentColor; }
.fav-btn:disabled { opacity: .6; }
.detail-orig { font-size: 14px; color: var(--muted-2); margin: 6px 0 0; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.detail-meta .sep { color: var(--muted-2); }
.detail-genres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pill.place { color: #a9c1ff; border-color: rgba(90,140,255,.32); background: rgba(90,140,255,.08); }

/* compact rating rows (auto-width, short) */
.detail-ratings { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.rate-mod {
  display: inline-flex; flex-direction: row; align-items: center;
  gap: 10px; padding: 8px 13px; border-radius: 11px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.075);
  color: inherit; text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
a.rate-mod:hover { background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.17); }
.rate-label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.rate-label .ext { font-size: 9px; opacity: .55; }
.rate-val { display: flex; align-items: baseline; gap: 4px; }
.rate-main { font-size: 16px; font-weight: 800; letter-spacing: .3px; }
.rate-main .star { color: var(--accent); }
.rate-main.soft { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.rate-sub { font-size: 10.5px; color: var(--muted-2); }

.detail-watchline { margin-top: 10px; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.detail-watchline .watched { color: var(--good); font-weight: 700; }
.detail-watchline .wish { color: #8fb0ff; font-weight: 700; }
.detail-watchline .sep { color: var(--muted-2); }
.detail-comment {
  margin-top: 12px; padding: 9px 12px; border-radius: 11px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.075);
  border-left: 3px solid var(--accent);
  font-size: 13px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
}
.detail-comment .cmt-label { color: var(--accent); font-weight: 600; }
.detail-comment .sep { color: var(--muted-2); }
.detail-comment .cmt-text { color: #d9dfe9; }

.detail-section { margin-top: 18px; }
.detail-label { font-size: 12px; color: var(--muted-2); margin-bottom: 7px; letter-spacing: .5px; }
.detail-text { font-size: 14px; color: #ccd3df; line-height: 1.7; }
.detail-overview {
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 14px; line-height: 1.72; color: #ccd3df;
}
.detail-section.expanded .detail-overview { display: block; -webkit-line-clamp: unset; overflow: visible; }
.detail-toggle {
  margin-top: 6px; padding: 0; border: none; background: none;
  color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.detail-toggle:hover { text-decoration: underline; }
.detail-director { margin-top: 16px; font-size: 13.5px; color: var(--muted); }
.detail-director b { color: var(--text); font-weight: 700; }
.detail-reason {
  margin-top: 18px; padding: 11px 14px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(245,197,24,.13), rgba(245,197,24,.03));
  border-left: 3px solid var(--accent); font-size: 13px; color: #ecdfae;
}
.cast-row { display: flex; gap: 14px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.cast-row::-webkit-scrollbar { display: none; }
.cast { flex: 0 0 58px; text-align: center; }
.cast img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; background: var(--bg-3); }
.cast .cname { font-size: 9.5px; margin-top: 4px; color: var(--muted-2); line-height: 1.2; }

.detail-awards .awards-list { display: flex; flex-direction: column; gap: 4px; }
.award { font-size: 12.5px; line-height: 1.5; }
.award.won { color: #eed08a; }
.award.won .award-icon { margin-right: 5px; font-size: 12px; }
.award.nom { color: var(--muted-2); padding-left: 2px; }

@media (max-width: 719px) {
  .detail-modal { width: 94vw; max-height: 92vh; border-radius: 18px; }
  .detail-inner { grid-template-columns: 1fr; gap: 16px; padding: 20px 18px 18px; }
  .detail-poster { width: 132px; margin: 0 auto; }
  .detail-title { font-size: 23px; }
  .detail-ratings { margin-top: 14px; }
  .detail-main { padding-top: 0; }
  .detail-kicker { margin-bottom: 6px; }
  .modal-close { top: 10px; right: 10px; width: 34px; height: 34px; }
}

/* --------------------------------------------------------------- misc */
.empty { text-align: center; color: var(--muted-2); padding: 60px 20px; font-size: 14px; }
.empty .big { font-size: 40px; margin-bottom: 10px; }
.skeleton {
  background: linear-gradient(100deg, var(--bg-3) 30%, #232a39 50%, var(--bg-3) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
  border-radius: 11px;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--line); border-top-color: var(--accent);
  animation: spin .7s linear infinite; margin: 30px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed; left: 50%; bottom: calc(96px + var(--safe-b));
  transform: translateX(-50%);
  background: rgba(30,35,48,.96); color: var(--text);
  border: 1px solid var(--line);
  padding: 9px 15px; border-radius: 22px; font-size: 13px;
  z-index: 80; box-shadow: var(--shadow);
  animation: fade .2s ease;
}

/* --------------------------------------------------------------- tabbar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex;
  padding: 6px 6px calc(6px + var(--safe-b));
  background: rgba(13,16,23,.92);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-top: 1px solid rgba(255,255,255,.06);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10.5px; color: var(--muted-2); padding: 5px 0; border-radius: 10px;
}
.tab .tab-ico { font-size: 19px; filter: grayscale(1) opacity(.7); }
.tab.active { color: var(--text); }
.tab.active .tab-ico { filter: none; }

/* --------------------------------------------------------------- desktop */
@media (min-width: 720px) {
  .view { max-width: 760px; margin: 0 auto; }
  .tabbar { max-width: 760px; margin: 0 auto; border-radius: 16px 16px 0 0; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
  .pcard { flex: 0 0 132px; width: 132px; }
  .summary { grid-template-columns: repeat(3, 1fr); }
  .grid2 { grid-template-columns: repeat(2, 1fr); }
  /* keep the heart clear of the top-right close button */
  .detail-titlebar { padding-right: 48px; }
}

/* wide desktop: proper desktop layout instead of a centered phone column */
@media (min-width: 1100px) {
  .topbar {
    display: flex; align-items: center; gap: 24px;
    padding-left: 24px; padding-right: 24px;
  }
  /* nav centred on the whole page */
  .topnav {
    display: flex; gap: 4px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }
  .topnav a {
    font-size: 14px; color: #bcd7e6; padding: 8px 15px; border-radius: 10px;
    transition: background .15s, color .15s;
  }
  .topnav a:hover { color: #fff; background: rgba(255,255,255,.09); }
  .topnav a.active { color: #fff; background: rgba(255,255,255,.14); font-weight: 700; }
  .tabbar { display: none; }

  .view { max-width: 1400px; margin: 0 auto; padding: 0 28px 64px; }

  .section-head { padding: 0 0 12px; }
  .banner { margin: 0 0 8px; }
  .hrow { padding: 2px 0 8px; gap: 18px; }
  .pcard { flex: 0 0 190px; width: 190px; }
  .pcard .ptitle { font-size: 14px; }
  .pcard .pmeta, .pcard .pscore { font-size: 12px; }
  .mini-list { padding: 0; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 22px 16px; padding: 4px 0; }
  .chips, .filter-bar, .searchbar { padding-left: 0; padding-right: 0; }
  .list { padding: 0; }
  .lrow .poster { width: 68px; }
  .summary { grid-template-columns: repeat(6, 1fr); gap: 16px 10px; }
  .stats-page { padding: 4px 0 100px; }

  .hero {
    min-height: 500px;
    margin-top: 24px;
    overflow: visible;
    background: transparent;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .22));
  }
  .hero-bg, .hero-shade {
    top: 0; bottom: 0;
    left: 50%; right: auto; width: 100vw;
    border-radius: 20px 20px 0 0;
    clip-path: inset(0 round 20px 20px 0 0);
  }
  .hero-bg { transform: translateX(-50%); }
  .hero-shade { transform: translateX(-50%); }
  .hero-inner { padding: 26px 100px; gap: 46px; }
  .hero-poster { width: 300px; }
  .hero-title { font-size: 42px; }
  .hero-info { max-width: 880px; }
}

/* hero on phones */
@media (max-width: 719px) {
  .hero { min-height: 0; border-radius: 16px; }
  .hero-inner { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px 18px 20px; }
  .hero-poster { width: 160px; margin: 0 auto; }
  .hero-title { font-size: 24px; }
  .hero-orig { font-size: 13px; }
  .hero-meta, .hero-score { font-size: 13px; }
  .hero-reason { font-size: 12.5px; }
  .hero-overview { -webkit-line-clamp: 4; font-size: 13.5px; }
  .hero-actions { margin-top: 16px; gap: 8px; }
  .hero-actions .btn { flex: 1 1 0; min-width: 0; padding: 10px 7px; font-size: 13px; }
  .hero-arrow { width: 34px; height: 34px; font-size: 18px; top: 12px; transform: none; }
  .hero-arrow.left { left: auto; right: 54px; }
  .hero-arrow.right { right: 12px; }
  .row-arrow { width: 34px; height: 34px; font-size: 18px; }
}

/* ----------------------------------------------------------- 电影详解 research */
.research-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 11px;
  border: 1px solid rgba(245,197,24,.35);
  background: rgba(245,197,24,.10);
  color: #f0d27a; font-size: 13px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.research-btn:hover { background: rgba(245,197,24,.18); color: #ffe08a; }
.research-btn:disabled { opacity: .6; cursor: default; }
.research-btn svg { flex: 0 0 auto; }

.research { max-width: 1180px; margin: 0 auto; padding: 26px 22px 80px; }

.rs-header { position: relative; padding-right: 210px; margin-bottom: 22px; }
.rs-back { border: none; background: none; color: var(--muted); font-size: 13px; padding: 0; cursor: pointer; margin-bottom: 12px; }
.rs-back:hover { color: #fff; }
.rs-title { font-size: 30px; font-weight: 850; margin: 0 0 8px; line-height: 1.2; }
.rs-metasub { color: var(--muted-2); font-size: 13px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.rs-metasub .sep { opacity: .6; }
.rs-usage { color: var(--muted-2); font-size: 12px; margin-top: 7px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rs-usage .sep { opacity: .6; }
.rs-reanalyze {
  position: absolute; top: 0; right: 0;
  padding: 8px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05);
  color: #cfd6e2; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.rs-reanalyze:hover { background: rgba(255,255,255,.1); color: #fff; }
.rs-reanalyze:disabled { opacity: .6; cursor: default; }
.rs-actions { position: absolute; top: 0; right: 0; display: flex; gap: 8px; }
.rs-actions .rs-reanalyze { position: static; }

.rs-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 34px; align-items: start; }
.rs-toc { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; }
.rs-toc-title { font-size: 12px; letter-spacing: 1px; color: var(--muted-2); margin-bottom: 8px; }
.rs-toc-link {
  text-align: left; border: none; background: none; cursor: pointer;
  color: var(--muted); font-size: 13px; padding: 5px 8px; border-radius: 8px;
  border-left: 2px solid transparent; line-height: 1.4;
}
.rs-toc-link:hover { color: #fff; background: rgba(255,255,255,.05); border-left-color: var(--accent); }
.rs-toc-empty { color: var(--muted-2); }

.rs-body { max-width: 720px; font-size: 15.5px; line-height: 1.9; color: #d7dde8; }
.rs-body h1, .rs-body h2, .rs-body h3, .rs-body h4 { color: #fff; line-height: 1.35; scroll-margin-top: 16px; }
.rs-body h1 { font-size: 26px; margin: 34px 0 12px; }
.rs-body h2 { font-size: 22px; margin: 34px 0 12px; padding-left: 12px; border-left: 3px solid var(--accent); }
.rs-body h3 { font-size: 18px; margin: 24px 0 10px; }
.rs-body h4 { font-size: 16px; margin: 20px 0 8px; color: #e8edf6; }
.rs-body p { margin: 0 0 16px; }
.rs-body ul, .rs-body ol { margin: 0 0 16px; padding-left: 22px; }
.rs-body li { margin: 6px 0; }
.rs-body blockquote {
  margin: 0 0 16px; padding: 8px 16px; color: #c2cad8;
  border-left: 3px solid rgba(255,255,255,.2); background: rgba(255,255,255,.03);
  border-radius: 0 10px 10px 0;
}
.rs-body hr { border: none; border-top: 1px solid rgba(255,255,255,.1); margin: 26px 0; }
.rs-body code { background: rgba(255,255,255,.09); padding: 1px 6px; border-radius: 6px; font-size: 13.5px; }
.rs-body a { color: #8fb0ff; text-decoration: none; }
.rs-body a:hover { text-decoration: underline; }
.rs-body strong { color: #fff; }

.rs-checklist {
  max-width: 720px; margin: 34px auto 0; padding: 18px 22px;
  border-radius: 16px; border: 1px solid rgba(245,197,24,.28);
  background: linear-gradient(180deg, rgba(245,197,24,.10), rgba(245,197,24,.02));
}
.rs-checklist .rs-body { max-width: none; }

.rs-progress { max-width: 520px; margin: 60px auto; text-align: center; }
.rs-progress-title { font-size: 18px; font-weight: 700; color: #fff; margin: 6px 0 18px; }
.rs-steps { list-style: none; padding: 0; margin: 0 0 18px; display: inline-flex; flex-direction: column; gap: 8px; text-align: left; }
.rs-steps li { color: var(--muted-2); font-size: 13.5px; padding-left: 20px; position: relative; opacity: .5; }
.rs-steps li::before { content: "○"; position: absolute; left: 0; }
.rs-steps li.active { color: #f0d27a; opacity: 1; }
.rs-steps li.active::before { content: "●"; }
.rs-progress-hint { color: var(--muted-2); font-size: 12.5px; }

.rs-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.10); overflow: hidden; margin: 0 auto 8px; max-width: 380px; }
.rs-bar-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #ffd76a); transition: width .5s ease; }
.rs-pct { font-size: 12.5px; color: var(--muted-2); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.rs-center { text-align: center; margin-top: 16px; }
.rs-center .rs-reanalyze { position: static; }

@media (max-width: 719px) {
  .research { padding: 18px 16px 70px; }
  .rs-header { padding-right: 0; }
  .rs-title { font-size: 22px; }
  .rs-reanalyze { position: static; margin-top: 0; }
  .rs-actions { position: static; margin-top: 12px; justify-content: flex-start; }
  .rs-layout { grid-template-columns: 1fr; gap: 18px; }
  .rs-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .rs-toc-title { width: 100%; margin-bottom: 4px; }
  .rs-body { font-size: 15px; line-height: 1.85; }
}