/* =========================================================================
   狐狸君影视 前台主题（按 8/19 设计稿 V5 重建）
   框架：左侧栏 240px(可折叠 64px) + 顶栏 60px + 全宽流式主区
   双主题：light 默认 / dark / auto(跟随系统)；主色蓝 #2563eb
   ========================================================================= */

/* ============ 1. 设计令牌(双主题变量) ============ */
:root {
  --brand-500:#2563eb; --brand-600:#1d4ed8; --brand-400:#3b82f6; --brand-100:#dbeafe;
  --bg:#f5f6f8; --surface:#ffffff; --surface-2:#f8fafc; --surface-3:#eef1f5;
  --sidebar:#ffffff; --sidebar-border:#e6e8ec; --hover:#f0f3f7;
  --text:#0f172a; --text-2:#475569; --text-3:#94a3b8;
  --border:#e6e8ec; --border-2:#eef0f3;
  --shadow-1:0 1px 2px rgba(15,23,42,.05); --shadow-2:0 6px 24px rgba(15,23,42,.08); --shadow-3:0 18px 50px rgba(15,23,42,.18);
  --placeholder:#cbd5e1;
  --rating-bg:rgba(15,23,42,.78); --rating-text:#fff;
  --scroll-track:#eef1f6; --scroll-thumb:#9aa6b5;
  --ok:#16a34a; --ok-bg:#dcfce7;
}
:root[data-theme="dark"] {
  --bg:#0b0e14; --surface:#11151d; --surface-2:#161b25; --surface-3:#1d2330;
  --sidebar:#0d1117; --sidebar-border:#1f2632; --hover:#1c2230;
  --text:#e6e8ee; --text-2:#9aa3b2; --text-3:#6b7280;
  --border:#1f2632; --border-2:#19202b;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 6px 24px rgba(0,0,0,.5); --shadow-3:0 18px 50px rgba(0,0,0,.55);
  --placeholder:#29313d; --rating-bg:rgba(0,0,0,.65); --rating-text:#fde68a;
  --scroll-track:#161b25; --scroll-thumb:#5b6678;
  --ok:#4ade80; --ok-bg:rgba(74,222,128,.12);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg:#0b0e14; --surface:#11151d; --surface-2:#161b25; --surface-3:#1d2330;
    --sidebar:#0d1117; --sidebar-border:#1f2632; --hover:#1c2230;
    --text:#e6e8ee; --text-2:#9aa3b2; --text-3:#6b7280;
    --border:#1f2632; --border-2:#19202b;
    --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 6px 24px rgba(0,0,0,.5); --shadow-3:0 18px 50px rgba(0,0,0,.55);
    --placeholder:#29313d; --rating-bg:rgba(0,0,0,.65); --rating-text:#fde68a;
    --scroll-track:#161b25; --scroll-thumb:#5b6678;
    --ok:#4ade80; --ok-bg:rgba(74,222,128,.12);
  }
}

/* ============ 2. 基础 ============ */
*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  transition:background-color .18s ease, color .18s ease; overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* ============ 2.1 极细反差滚动条 ============ */
/* Firefox：细滚动条 + 反差配色 */
html { scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) var(--scroll-track); }
/* WebKit/Blink：极细（6px）、圆角、反差拇指 */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--scroll-track); }
::-webkit-scrollbar-thumb {
  background:var(--scroll-thumb); border-radius:999px;
  border:1px solid transparent; background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover { background:var(--brand-500); }
::-webkit-scrollbar-corner { background:var(--scroll-track); }

/* 横向滚动容器：更克制，悬停才显形，保证触控顺滑 */
.cards-scroller, .cast-track, .gallery-track, .hero-thumbs, .res-list {
  scrollbar-width:thin;
  scrollbar-color:var(--scroll-thumb) transparent;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.cards-scroller::-webkit-scrollbar, .cast-track::-webkit-scrollbar,
.gallery-track::-webkit-scrollbar, .hero-thumbs::-webkit-scrollbar,
.res-list::-webkit-scrollbar { width:6px; height:6px; }
.cards-scroller::-webkit-scrollbar-thumb, .cast-track::-webkit-scrollbar-thumb,
.gallery-track::-webkit-scrollbar-thumb, .hero-thumbs::-webkit-scrollbar-thumb,
.res-list::-webkit-scrollbar-thumb { background:var(--scroll-thumb); border-radius:999px; }

/* 触控屏 / 小屏：隐藏自定义细滚动条，交回原生覆盖式滚动，
   避免细条难抓取、干扰滑动手势（原生 momentum + 覆盖条体验最佳） */
@media (pointer:coarse), (max-width:768px) {
  html { scrollbar-width:none; }
  ::-webkit-scrollbar { width:0; height:0; }
  .cards-scroller, .cast-track, .gallery-track, .hero-thumbs, .res-list {
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .cards-scroller::-webkit-scrollbar, .cast-track::-webkit-scrollbar,
  .gallery-track::-webkit-scrollbar, .hero-thumbs::-webkit-scrollbar,
  .res-list::-webkit-scrollbar { width:0; height:0; }
}
img { display:block; max-width:100%; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:var(--scroll-track); }
::-webkit-scrollbar-thumb { background:var(--scroll-thumb); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-3); }

/* ============ 3. 布局骨架 ============ */
.app { display:grid; grid-template-columns:240px minmax(0,1fr); grid-template-rows:60px 1fr;
  grid-template-areas:"sidebar header" "sidebar main"; min-height:100vh; }
.app.compact { grid-template-columns:64px minmax(0,1fr); }
.app.compact .nav-text, .app.compact .sidebar-section-title, .app.compact .sidebar-extra { display:none; }
.app.compact .logo { padding:18px 14px; justify-content:center; }
.app.compact .nav-item, .app.compact .nav-subitem { justify-content:center; padding:9px 0; }
.sidebar-scrim { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:150; opacity:0; pointer-events:none; transition:opacity .2s ease; }
.sidebar { grid-area:sidebar; background:var(--sidebar); border-right:1px solid var(--sidebar-border);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; z-index:50;
  transition:background-color .18s ease; }
.logo { display:flex; align-items:center; gap:10px; padding:18px 22px; border-bottom:1px solid var(--sidebar-border); font-weight:700; font-size:18px; }
.logo .glyph { width:32px; height:32px; flex:0 0 32px; border-radius:8px; background:linear-gradient(135deg,var(--brand-500),#7c3aed); display:grid; place-items:center; color:#fff; font-weight:800; font-size:16px; }
.nav-list { padding:14px 10px; flex:1 0 auto; }
.nav-item, .nav-subitem { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:8px; color:var(--text-2); cursor:pointer; font-size:14px; transition:background .12s ease,color .12s ease; white-space:nowrap; }
.nav-item:hover, .nav-subitem:hover { background:var(--hover); color:var(--text); }
.nav-item.active, .nav-subitem.active { background:var(--brand-100); color:var(--brand-600); font-weight:600; }
:root[data-theme="dark"] .nav-item.active, :root[data-theme="dark"] .nav-subitem.active { background:rgba(59,130,246,.18); color:#93c5fd; }
.nav-item .ico, .nav-subitem .ico { width:18px; height:18px; flex:0 0 18px; opacity:.8; }
.sidebar-section-title { padding:16px 14px 6px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); }
.sidebar-extra { padding:10px 14px; border-top:1px solid var(--sidebar-border); font-size:11px; color:var(--text-3); }
.sidebar-extra a { color:var(--text-2); }
.sidebar-extra a:hover { color:var(--brand-500); }
.sidebar-actions { display:none; align-items:center; gap:10px; padding:12px 14px; border-top:1px solid var(--sidebar-border); }
.sidebar-actions .avatar { margin-left:0; }
.sidebar-actions .theme-toggle { margin:0; }
.topbar { grid-area:header; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:14px; padding:0 22px; position:sticky; top:0; z-index:40; }
.topbar .search { flex:1; max-width:560px; display:flex; align-items:center; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:7px 14px; color:var(--text-2); transition:border-color .12s ease,background-color .12s ease; }
.topbar .search:focus-within { border-color:var(--brand-500); background:var(--surface); }
.topbar .search input { flex:1; border:0; background:transparent; outline:0; color:var(--text); font-size:14px; padding:2px 6px; }
.topbar .actions { display:flex; align-items:center; gap:6px; margin-left:auto; }
.icon-btn { width:36px; height:36px; display:grid; place-items:center; border-radius:8px; color:var(--text-2); transition:background .12s ease,color .12s ease; }
.icon-btn:hover { background:var(--hover); color:var(--text); }
.icon-btn.theme-toggle { position:relative; }
.avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#fb7185,#f59e0b); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; margin-left:6px; cursor:pointer; }
.main { grid-area:main; padding:0 0 60px; width:100%; }

/* ============ 4. Hero 精选影视(自动轮播) ============ */
.hero { position:relative; padding:24px 28px 0; }
.hero-row { position:relative; display:grid; grid-template-columns:minmax(0,2.1fr) minmax(0,1fr); gap:18px; }
.hero-main {
  position:relative; border-radius:16px; overflow:hidden; background:var(--surface);
  border:1px solid var(--border); box-shadow:var(--shadow-2); min-height:400px;
  background-color:var(--placeholder);
}
.hero-layers { position:absolute; inset:0; z-index:1; overflow:hidden; border-radius:16px; }
.hero-layer { position:absolute; inset:0; background-size:cover; background-position:center top; opacity:0; transition:opacity .7s ease; will-change:opacity,transform; animation:heroKB 6.5s ease-out forwards; }
.hero-layer.active { opacity:1; z-index:1; }
@keyframes heroKB { from{ transform:scale(1.04); } to{ transform:scale(1.13); } }
.hero-main .scrim { position:absolute; inset:0; z-index:2; background:var(--mask); }
.hero-main .meta { position:absolute; left:0; right:0; bottom:0; z-index:3; padding:28px 32px 32px; color:#fff; transition:opacity .35s ease; }
.hero-main .badge { display:inline-block; padding:3px 10px; border-radius:6px; background:rgba(255,255,255,.18); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font-size:11px; letter-spacing:.05em; color:#fff; }
.hero-main h1 { margin:14px 0 6px; font-size:30px; line-height:1.15; font-weight:700; letter-spacing:-.01em; text-shadow:0 2px 12px rgba(0,0,0,.4); }
.hero-main .sub { font-size:13px; opacity:.85; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hero-main .sub span + span::before { content:"·"; margin-right:10px; opacity:.6; }
.hero-main .cta { margin-top:18px; display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; background:var(--brand-500); color:#fff; font-weight:600; font-size:13px; box-shadow:0 4px 14px rgba(37,99,235,.4); transition:background .12s ease,transform .12s ease; }
.hero-main .cta:hover { background:var(--brand-600); transform:translateY(-1px); }
.hero-play { position:absolute; top:14px; right:14px; z-index:4; width:34px; height:34px; border-radius:9px; background:rgba(0,0,0,.32); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:#fff; display:grid; place-items:center; transition:background .12s ease; }
.hero-play:hover { background:rgba(0,0,0,.55); }
.hero-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,.28); color:#fff; display:grid; place-items:center; opacity:0; transition:opacity .15s ease, background .12s ease; }
.hero-main:hover .hero-nav { opacity:1; }
.hero-nav:hover { background:rgba(0,0,0,.55); }
.hero-prev { left:12px; }
.hero-next { right:12px; }
.hero-progress { position:absolute; left:0; right:0; bottom:0; z-index:4; height:3px; background:rgba(255,255,255,.18); }
.hero-progress > i { display:block; height:100%; width:0; background:var(--brand-400); box-shadow:0 0 8px rgba(59,130,246,.8); }
.hero-thumbs { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:8px; min-height:400px; }
.hero-thumb { position:relative; border-radius:10px; overflow:hidden; background:var(--placeholder); background-size:cover; background-position:center top; cursor:pointer; border:1px solid var(--border); transition:transform .15s ease, box-shadow .15s ease; }
.hero-thumb:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); }
.hero-thumb .scrim { position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%, rgba(0,0,0,.85) 100%); }
.hero-thumb .title { position:absolute; left:0; right:0; bottom:0; padding:8px 10px; color:#fff; font-size:12px; line-height:1.2; font-weight:500; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.hero-thumb.active { outline:2px solid var(--brand-500); outline-offset:-2px; box-shadow:0 0 0 2px rgba(37,99,235,.4); }

/* ============ 5. 通用组件 ============ */
.ico { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ico.lg { width:20px; height:20px; }
.crumb { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-3); padding:22px 28px 0; flex-wrap:wrap; }
.crumb a:hover { color:var(--brand-500); }
.crumb .sep { opacity:.6; }
.crumb .now { color:var(--text-2); }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; padding:14px 28px 4px; gap:12px; flex-wrap:wrap; }
.page-title { display:flex; align-items:center; gap:10px; font-size:24px; font-weight:800; letter-spacing:-.01em; }
.page-title::before { content:""; display:inline-block; width:4px; height:24px; border-radius:2px; background:var(--brand-500); }
.page-count { font-size:12px; color:var(--text-3); margin-bottom:3px; }

/* ============ 6. 分类模块(首页) ============ */
.home-sections { padding:0 28px; }
.section { margin-top:34px; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:14px; position:relative; gap:12px; flex-wrap:wrap; }
.section-title { display:flex; align-items:center; gap:10px; font-size:19px; font-weight:700; letter-spacing:-.01em; }
.section-title::before { content:""; display:inline-block; width:4px; height:22px; border-radius:2px; background:var(--brand-500); }
.section-sub { font-size:12px; color:var(--text-3); margin-top:2px; margin-left:14px; }
.section-nav { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.all-link { display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:600; color:var(--brand-500); padding:6px 4px; transition:gap .15s ease, color .12s ease; }
.all-link:hover { gap:8px; color:var(--brand-600); }
.all-link .all-arrow { transition:transform .15s ease; }
.all-link:hover .all-arrow { transform:translateX(2px); }
.section-nav .arrow { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--text-2); cursor:pointer; transition:all .12s ease; }
.section-nav .arrow:hover:not(:disabled){ background:var(--brand-500); color:#fff; border-color:var(--brand-500); }
.section-nav .arrow:disabled { opacity:.4; cursor:not-allowed; }

/* ============ 7. 卡片(横滑 + 网格) ============ */
.cards-scroller { position:relative; margin:0 -4px; }
.cards-track { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(150px,210px); gap:14px; overflow-x:auto; scroll-behavior:smooth; padding:6px 4px 16px; scrollbar-width:thin; }
.cards-track::-webkit-scrollbar { height:6px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; position:relative; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-3); border-color:var(--brand-500); }
:root[data-theme="dark"] .card:hover { border-color:var(--brand-400); }
.card .poster { aspect-ratio:2/3; width:100%; background:var(--placeholder); position:relative; overflow:hidden; }
.card .poster img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card .poster .rating { position:absolute; top:8px; right:8px; background:var(--rating-bg); color:var(--rating-text); font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:1; }
.card .poster .tags { position:absolute; top:8px; left:8px; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:4px; pointer-events:none; }
.card .poster .badge { position:static; font-size:10px; font-weight:600; padding:2px 7px; border-radius:4px; background:rgba(0,0,0,.45); color:#fff; letter-spacing:.03em; }
.card .poster .flag { font-size:10px; font-weight:700; padding:2px 7px; border-radius:4px; color:#fff; letter-spacing:.03em; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.flag-top { background:#2563eb; }
.flag-recommend { background:#f59e0b; color:#241800; }
.flag-hot { background:#ef4444; }
.flag-latest { background:#10b981; }
.flag-updated { background:#64748b; }
.card .info { padding:10px 12px 12px; }
.card .title { font-size:13px; font-weight:600; overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.card .meta { margin-top:4px; font-size:11px; color:var(--text-3); display:flex; align-items:center; gap:6px; }
.card .meta .dot { width:3px; height:3px; border-radius:50%; background:var(--text-3); }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; padding:10px 28px; }

/* ============ 8. 列表页筛选条 + 分页 ============ */
.filter-bar { padding:6px 28px 0; }
.filter-group { display:flex; align-items:flex-start; gap:10px; padding:6px 0; border-bottom:1px dashed var(--border-2); flex-wrap:wrap; }
.filter-group:last-child { border-bottom:0; }
.filter-label { flex:0 0 44px; font-size:12px; color:var(--text-3); line-height:28px; }
.filter-opts { display:flex; flex-wrap:wrap; gap:6px; }
.fchip { padding:4px 12px; border-radius:999px; border:1px solid var(--border); font-size:12px; color:var(--text-2); cursor:pointer; background:var(--surface-2); transition:all .12s ease; }
.fchip:hover { color:var(--text); border-color:var(--brand-400); }
.fchip.active { background:var(--brand-500); color:#fff; border-color:var(--brand-500); font-weight:600; }
.pager { display:flex; justify-content:center; align-items:center; gap:6px; padding:26px 28px 8px; flex-wrap:wrap; }
.pager .pg { min-width:34px; height:34px; padding:0 10px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text-2); display:grid; place-items:center; font-size:13px; transition:all .12s ease; }
.pager .pg:hover:not(:disabled):not(.active) { border-color:var(--brand-400); color:var(--text); }
.pager .pg.active { background:var(--brand-500); color:#fff; border-color:var(--brand-500); font-weight:600; }
.pager .pg:disabled { opacity:.4; cursor:not-allowed; }
.pager .total { font-size:12px; color:var(--text-3); margin-left:10px; }
.pager .pg.gap { border:0; background:none; color:var(--text-3); }

/* ============ 9. 底部 ============ */
.footer { margin-top:50px; padding:32px 28px; border-top:1px solid var(--border); color:var(--text-3); font-size:12px; }
.footer .row { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer a:hover { color:var(--brand-500); }

/* toast */
.theme-toast { position:fixed; right:24px; bottom:24px; padding:10px 16px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-2); font-size:12px; z-index:100; opacity:0; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease; pointer-events:none; }
.theme-toast.show { opacity:1; transform:translateY(0); }

/* ============ 10. 详情页 ============ */
.d-hero { position:relative; margin:18px 28px 0; border-radius:16px; overflow:hidden; min-height:380px; display:flex; border:1px solid var(--border); box-shadow:var(--shadow-2); }
.d-bg { position:absolute; inset:0; background-size:cover; background-position:center 30%; }
.d-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,14,22,.94) 0%, rgba(10,14,22,.82) 42%, rgba(10,14,22,.45) 100%); }
:root[data-theme="light"] .d-bg::after { background:linear-gradient(90deg, rgba(15,20,30,.96) 0%, rgba(15,20,30,.85) 45%, rgba(15,20,30,.55) 100%); }
.d-inner { position:relative; z-index:2; display:grid; grid-template-columns:200px minmax(0,1fr); gap:26px; padding:30px; align-items:center; }
.d-poster { width:200px; aspect-ratio:2/3; border-radius:12px; background-size:cover; background-position:center; box-shadow:0 18px 50px rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.14); }
.d-info { color:#fff; min-width:0; }
.d-info .badges { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.d-info .tag { display:inline-block; padding:3px 10px; border-radius:6px; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font-size:11px; letter-spacing:.05em; }
.d-info .rate-pill { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:6px; background:var(--brand-500); font-weight:700; font-size:13px; }
.d-info h1 { margin:14px 0 2px; font-size:32px; line-height:1.15; font-weight:800; letter-spacing:-.01em; text-shadow:0 2px 12px rgba(0,0,0,.4); }
.d-info .orig { font-size:13px; color:rgba(255,255,255,.7); }
.d-info .chips { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; font-size:12px; color:rgba(255,255,255,.85); }
.d-info .chips .chip { padding:2px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.28); }
.d-info .chips .dot { width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.5); }
.d-desc { margin-top:12px; font-size:13px; line-height:1.75; color:rgba(255,255,255,.88); max-width:780px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; position:relative; }
.d-desc.expanded { -webkit-line-clamp:unset; }
.d-desc-toggle { margin-top:4px; font-size:12px; color:var(--brand-400); cursor:pointer; display:inline-block; }
.d-actions { display:flex; align-items:center; gap:10px; margin-top:18px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:999px; font-weight:600; font-size:13px; transition:all .12s ease; border:1px solid transparent; }
.btn-primary { background:var(--brand-500); color:#fff; box-shadow:0 4px 14px rgba(37,99,235,.4); }
.btn-primary:hover { background:var(--brand-600); transform:translateY(-1px); }
.btn-ghost-light { background:rgba(255,255,255,.14); color:#fff; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-color:rgba(255,255,255,.22); }
.btn-ghost-light:hover { background:rgba(255,255,255,.24); }
.d-stats { display:flex; gap:18px; margin-top:16px; font-size:12px; color:rgba(255,255,255,.75); }
.d-stats b { color:#fff; font-size:14px; margin-right:3px; }
.d-body { padding:0 28px; }
.d-block { margin-top:30px; }
.d-block-head { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:700; margin-bottom:14px; }
.d-block-head::before { content:""; width:4px; height:18px; border-radius:2px; background:var(--brand-500); }
.cast-track { display:flex; gap:14px; overflow-x:auto; padding:6px 4px 14px; scrollbar-width:thin; }
.cast-card { flex:0 0 110px; text-align:center; }
.cast-ava { width:110px; height:110px; border-radius:50%; overflow:hidden; background:var(--surface-3); border:1px solid var(--border); margin:0 auto; }
.cast-ava img { width:100%; height:100%; object-fit:cover; display:block; }
.cast-card .cn { margin-top:8px; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cast-card .role { font-size:11px; color:var(--text-3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gallery-track { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(120px,150px); gap:12px; overflow-x:auto; padding:6px 4px 14px; scrollbar-width:thin; }
.gallery-item { position:relative; aspect-ratio:2/3; border-radius:10px; overflow:hidden; background:var(--surface-3); border:1px solid var(--border); cursor:zoom-in; transition:transform .15s ease, box-shadow .15s ease; }
.gallery-item img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-item:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); }
.gallery-item.img-fail img { display:none; }
.gallery-item .g-fail { position:absolute; inset:0; display:grid; place-items:center; font-size:11px; color:var(--text-3); }
.video-link { display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--surface); border:1px solid var(--border); border-radius:12px; max-width:560px; transition:border-color .12s ease, box-shadow .12s ease; }
.video-link:hover { border-color:var(--brand-500); box-shadow:var(--shadow-2); }
.video-link .vico { width:34px; height:34px; flex:0 0 34px; border-radius:50%; background:var(--brand-500); color:#fff; display:grid; place-items:center; }
.video-name2 { flex:1; min-width:0; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.video-go { font-size:13px; font-weight:600; color:var(--brand-500); white-space:nowrap; }
.video-official { display:inline-block; font-size:10px; padding:1px 8px; border-radius:4px; background:var(--brand-100); color:var(--brand-600); font-weight:600; white-space:nowrap; }
:root[data-theme="dark"] .video-official { background:rgba(59,130,246,.18); color:#93c5fd; }
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:300; display:none; align-items:center; justify-content:center; cursor:zoom-out; }
.lightbox.show { display:flex; }
.lightbox img { max-width:92vw; max-height:92vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.res-tabs { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.res-tab { padding:6px 14px; border-radius:999px; border:1px solid var(--border); font-size:12px; color:var(--text-2); cursor:pointer; transition:all .12s ease; }
.res-tab.active { background:var(--brand-500); color:#fff; border-color:var(--brand-500); font-weight:600; }
.res-list { display:flex; flex-direction:column; gap:10px; }
.res-item { display:flex; align-items:center; gap:14px; padding:13px 16px; background:var(--surface); border:1px solid var(--border); border-radius:10px; transition:border-color .12s ease; }
.res-item:hover { border-color:var(--brand-500); }
.res-ico { width:40px; height:40px; flex:0 0 40px; border-radius:10px; display:grid; place-items:center; font-size:11px; font-weight:700; color:#fff; }
.res-ico.magnet { background:linear-gradient(135deg,#f59e0b,#ef4444); }
.res-ico.netdisk { background:linear-gradient(135deg,#3b82f6,#8b5cf6); }
.res-ico.thunder { background:linear-gradient(135deg,#06b6d4,#2563eb); }
.res-ico.http { background:linear-gradient(135deg,#10b981,#059669); }
.res-ico.ed2k { background:linear-gradient(135deg,#a855f7,#6d28d9); }
.res-ico.ftp { background:linear-gradient(135deg,#0ea5e9,#0284c7); }
.res-ico.other { background:linear-gradient(135deg,#64748b,#475569); }
.res-info { flex:1; min-width:0; }
.res-title { font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.res-meta { display:flex; gap:8px; margin-top:4px; flex-wrap:wrap; }
.res-meta .mini { font-size:11px; padding:1px 8px; border-radius:4px; background:var(--surface-3); color:var(--text-2); }
.res-meta .mini.ok { background:var(--ok-bg); color:var(--ok); font-weight:600; }
.res-copy { flex:0 0 auto; }

/* ============ 11. 搜索页 ============ */
.s-hero { padding:44px 28px 10px; max-width:720px; margin:0 auto; text-align:center; }
.s-hero h1 { font-size:30px; font-weight:800; letter-spacing:-.01em; margin:0 0 6px; }
.s-hero p { font-size:13px; color:var(--text-3); margin:0 0 22px; }
.s-box { display:flex; align-items:center; gap:8px; background:var(--surface); border:2px solid var(--border); border-radius:999px; padding:10px 16px; transition:border-color .15s ease, box-shadow .15s ease; }
.s-box:focus-within { border-color:var(--brand-500); box-shadow:0 0 0 4px rgba(37,99,235,.12); }
.s-box input { flex:1; border:0; background:transparent; outline:0; font-size:15px; color:var(--text); }
.s-box .go { padding:8px 20px; border-radius:999px; background:var(--brand-500); color:#fff; font-weight:600; font-size:13px; transition:background .12s ease; }
.s-box .go:hover { background:var(--brand-600); }
.hot { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:16px; font-size:12px; color:var(--text-3); }
.hot .tag { padding:4px 12px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-2); cursor:pointer; transition:all .12s ease; }
.hot .tag:hover { color:var(--brand-500); border-color:var(--brand-400); }
.s-result-head { display:flex; align-items:center; justify-content:space-between; padding:26px 28px 0; gap:12px; flex-wrap:wrap; }
.s-result-head h2 { font-size:17px; margin:0; }
.s-result-head .n { color:var(--text-3); font-size:12px; font-weight:400; margin-left:6px; }
.s-cats { display:flex; gap:6px; flex-wrap:wrap; }
.s-cat { padding:6px 14px; border-radius:999px; border:1px solid var(--border); font-size:12px; color:var(--text-2); cursor:pointer; transition:all .12s ease; }
.s-cat.active { background:var(--brand-500); color:#fff; border-color:var(--brand-500); font-weight:600; }
.empty-state { text-align:center; padding:70px 28px 40px; color:var(--text-3); }
.empty-state .big { font-size:44px; margin-bottom:12px; opacity:.5; }
.empty-state h3 { color:var(--text-2); font-size:16px; margin:0 0 6px; }
.empty-state p { font-size:12px; margin:0 0 18px; }

/* ============ 12. 响应式 ============ */
@media (max-width:1440px) and (min-width:1025px){
  .hero-thumbs{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1280px){
  .hero{ padding:22px 22px 0; }
  .home-sections{ padding:0 22px; }
  .crumb{ padding:20px 22px 0; }
  .page-head{ padding:12px 22px 4px; }
  .filter-bar{ padding:6px 22px 0; }
  .card-grid{ padding:10px 22px; }
  .d-hero{ margin:16px 22px 0; }
  .d-body{ padding:0 22px; }
  .s-hero{ padding:38px 22px 10px; }
  .s-result-head{ padding:24px 22px 0; }
  .footer{ padding:32px 22px; }
}
@media (max-width:1024px){
  .hero{ padding:20px 18px 0; }
  .home-sections{ padding:0 18px; }
  .hero-row{ grid-template-columns:1fr; }
  .hero-main{ min-height:360px; }
  .hero-thumbs{ grid-template-columns:repeat(4,1fr); min-height:0; }
  .d-inner{ grid-template-columns:150px minmax(0,1fr); gap:20px; padding:24px; }
  .d-poster{ width:150px; }
  .d-info h1{ font-size:26px; }
}
@media (max-width:900px){
  .app{ grid-template-columns:64px minmax(0,1fr); }
  .nav-text, .sidebar-section-title, .sidebar-extra{ display:none; }
  .topbar .actions{ display:none; }
  .sidebar-actions{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 0; }
  .sidebar-actions .avatar{ margin-left:0; }
  .hero{ padding:18px 16px 0; }
  .home-sections{ padding:0 16px; }
  .hero-row{ grid-template-columns:1fr; gap:14px; }
  .hero-main{ min-height:340px; }
  .hero-thumbs{ grid-template-columns:repeat(4,1fr); min-height:0; }
  .app.is-expanded .sidebar{ position:fixed; top:0; left:0; width:240px; height:100vh; z-index:200; box-shadow:var(--shadow-3); }
  .app.is-expanded .nav-text, .app.is-expanded .sidebar-section-title, .app.is-expanded .sidebar-extra{ display:block; }
  .app.is-expanded .sidebar-actions{ flex-direction:row; justify-content:center; gap:10px; padding:12px 14px; }
  .app.is-expanded .sidebar-scrim{ opacity:1; pointer-events:auto; }
}
@media (max-width:680px){
  .hero-thumbs{ grid-template-columns:repeat(3,1fr); }
  .hero-main h1{ font-size:26px; }
  .hero-main .meta{ padding:22px 20px 24px; }
  .cards-track{ grid-auto-columns:minmax(150px,1fr); }
  .d-hero{ min-height:0; }
  .d-inner{ grid-template-columns:1fr; gap:16px; text-align:center; justify-items:center; padding:22px 16px; }
  .d-poster{ width:130px; }
  .d-desc{ text-align:left; }
  .d-actions{ justify-content:center; }
  .d-stats{ justify-content:center; }
  .d-bg::after{ background:linear-gradient(180deg, rgba(10,14,22,.75) 0%, rgba(10,14,22,.9) 100%); }
  .card-grid{ grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:12px; padding:10px 12px; }
  .crumb{ padding:16px 12px 0; }
  .page-head{ padding:12px 12px 4px; }
  .page-title{ font-size:20px; }
  .filter-bar{ padding:6px 12px 0; }
  .d-hero{ margin:12px 12px 0; }
  .d-body{ padding:0 12px; }
  .s-hero{ padding:30px 12px 8px; }
  .s-hero h1{ font-size:24px; }
  .s-result-head{ padding:20px 12px 0; }
}
@media (max-width:480px){
  .hero-thumbs{ display:flex; gap:8px; overflow-x:auto; grid-template-columns:none; padding-bottom:6px; scrollbar-width:thin; }
  .hero-thumb{ flex:0 0 44%; min-width:44%; }
  .topbar{ padding:0 14px; gap:10px; }
  .topbar .search{ padding:6px 12px; }
  .hero{ padding:14px 12px 0; }
  .home-sections{ padding:0 12px; }
  .hero-main{ min-height:280px; border-radius:12px; }
  .hero-main h1{ font-size:22px; }
  .hero-main .meta{ padding:18px 16px 20px; }
  .hero-main .sub{ gap:10px; font-size:12px; }
  .hero-layers{ border-radius:12px; }
  .section-title{ font-size:17px; }
  .cards-track{ grid-auto-columns:minmax(132px,1fr); gap:10px; }
  .card .info{ padding:8px 9px 10px; }
  .hero-nav{ display:none; }
  .cast-card{ flex-basis:88px; }
  .cast-ava{ width:88px; height:88px; }
  .res-item{ gap:10px; padding:11px 12px; }
  .res-copy .btn{ padding:8px 14px; font-size:12px; }
}
@media (max-width:360px){
  .hero-thumb{ flex:0 0 52%; min-width:52%; }
  .hero-main h1{ font-size:19px; }
}
@media (min-width:1921px){
  :root{ font-size:15px; }
  .card-grid{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
  .cards-track{ grid-auto-columns:minmax(170px,240px); }
  .hero-main{ min-height:440px; }
  .hero-thumbs{ min-height:440px; }
}

/* ===== 前端动态取数：加载占位 / 骨架屏 ===== */
.fx-loading{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:60px 12px; color:var(--text-3,#9aa3ad); font-size:13px; }
.fx-loading--lg{ padding:120px 12px; }
.spinner{ width:34px; height:34px; border:3px solid rgba(140,150,160,.25); border-top-color:var(--accent,#ff5b6e); border-radius:50%; animation:fx-spin .8s linear infinite; }
@keyframes fx-spin{ to{ transform:rotate(360deg); } }
[hidden]{ display:none !important; }

/* ===== 详情页 TMDB 外链徽标（评分右侧）===== */
.d-info .tmdb-link {
    display:inline-flex; align-items:center; gap:3px; padding:3px 9px; border-radius:6px;
    background:rgba(1,180,129,.16); color:#06b26b; font-weight:600; font-size:11px; text-decoration:none;
}
.d-info .tmdb-link .ico { width:11px; height:11px; }
.d-info .tmdb-link:hover { background:rgba(1,180,129,.28); }

/* ===== 演职人员：头像/姓名可点击跳转 TMDB ===== */
.cast-ava { display:block; }
a.cast-ava:hover { box-shadow:0 0 0 2px var(--brand-500); }
a.cast-name { color:inherit; text-decoration:none; }
a.cast-name:hover { color:var(--brand-500); text-decoration:underline; }

/* ===== 灯箱：左右切换箭头 + 计数 ===== */
.lightbox { cursor:default; }
.lb-nav {
    position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:44px; height:44px; border:none; border-radius:50%; cursor:pointer;
    background:rgba(0,0,0,.45); color:#fff; display:grid; place-items:center; transition:background .12s ease;
}
.lb-nav:hover { background:rgba(0,0,0,.75); }
.lb-nav .ico { width:24px; height:24px; }
.lb-counter {
    position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:2;
    padding:4px 12px; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; font-size:12px;
}
.lightbox img { cursor:zoom-out; display:block; max-width:90vw; max-height:88vh; width:auto; height:auto; object-fit:contain; margin:auto; }

/* ===== 复制链接弹窗（扩大 1.5 倍：620→930；左图充满；按钮居中；说明在按钮下方；广告位隐藏）===== */
.copy-modal { position:fixed; inset:0; z-index:320; display:none; align-items:center; justify-content:center; }
.copy-modal.show { display:flex; }
.cm-mask { position:absolute; inset:0; background:rgba(0,0,0,.6); }
.cm-box {
    position:relative; z-index:2; width:min(930px, 94vw); background:var(--surface,#fff); color:var(--text-1,#1a1f29);
    border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.45); overflow:hidden; border:1px solid var(--border,#e6e9ef);
}
.cm-close { position:absolute; top:10px; right:12px; z-index:3; width:30px; height:30px; border:none; border-radius:50%;
    background:rgba(0,0,0,.06); color:var(--text-2,#444); font-size:20px; line-height:1; cursor:pointer; }
.cm-close:hover { background:rgba(0,0,0,.14); }
.cm-grid { display:grid; grid-template-columns:minmax(240px,40%) minmax(0,1fr); min-height:340px; }
.cm-left { position:relative; background:var(--surface-2,#f6f7fb); overflow:hidden; border-right:1px solid var(--border,#e6e9ef); }
.cm-left img { width:100%; height:100%; object-fit:cover; display:block; }
.cm-left-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--text-3,#9aa3ad); }
.cm-right { display:flex; flex-direction:column; padding:28px; gap:16px; align-items:center; justify-content:center; }
.cm-right-top { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; width:100%; }
.cm-desc { font-size:13px; line-height:1.7; color:var(--text-2,#445); text-align:center; max-width:420px; white-space:pre-line; }
.cm-copy { display:inline-flex; align-items:center; gap:8px; padding:12px 28px; border:none; border-radius:999px; background:var(--brand-500,#2563eb); color:#fff; font-weight:600; font-size:15px; cursor:pointer; box-shadow:0 4px 14px rgba(37,99,235,.35); }
.cm-copy:hover { background:var(--brand-600,#1d4ed8); }
.cm-copy .ico { width:16px; height:16px; }
.cm-hint { min-height:18px; font-size:12px; text-align:center; color:var(--text-3,#9aa3ad); line-height:1.6; }
.cm-hint.ok { color:#06b26b; }
.cm-hint.err { color:#e5484d; }
@media (max-width:560px) {
    .cm-box { max-width:300px; }
    .cm-grid { grid-template-columns:1fr; min-height:0; }
    .cm-left { border-right:none; border-bottom:1px solid var(--border,#e6e9ef); min-height:200px; }
    .cm-right { padding:22px; }
}


/* ===== 捐助墙（/dashang.html）===== */
.dashang-page { max-width:1040px; margin:0 auto; padding:24px 16px 48px; }
.dp-head { text-align:center; margin-bottom:22px; }
.dp-title { font-size:26px; font-weight:800; letter-spacing:1px; }
.dp-sub { color:var(--text-3,#9aa3ad); font-size:13px; margin:8px 0 18px; }
.dp-stats { display:flex; justify-content:center; gap:28px; flex-wrap:wrap; }
.dp-stat { display:flex; flex-direction:column; align-items:center; }
.dp-stat b { font-size:22px; font-weight:800; color:var(--brand-500,#2563eb); }
.dp-stat span { font-size:12px; color:var(--text-3,#9aa3ad); margin-top:4px; }
.dp-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 18px; flex-wrap:wrap; }
.dp-sort { display:inline-flex; background:var(--surface-2,#f6f7fb); border-radius:999px; padding:4px; }
.dp-sort-btn { border:none; background:transparent; color:var(--text-2,#445); font-size:13px; font-weight:600; padding:7px 18px; border-radius:999px; cursor:pointer; }
.dp-sort-btn.active { background:var(--brand-500,#2563eb); color:#fff; box-shadow:0 4px 12px rgba(37,99,235,.3); }
.dp-hint { font-size:12px; color:var(--text-3,#9aa3ad); }
.dp-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.dp-card { background:var(--surface,#fff); border:1px solid var(--border,#e6e9ef); border-radius:14px; padding:16px 16px 14px; display:flex; flex-direction:column; gap:6px; }
.dp-amount { font-size:20px; font-weight:800; color:var(--text-1,#1a1f29); display:flex; align-items:center; gap:8px; }
.dp-name { font-size:14px; font-weight:600; color:var(--text-1,#1a1f29); }
:root[data-theme="dark"] .dp-name { color:#9d9d9d; }
:root[data-theme="dark"] .dp-amount:not(.top) { color:#9d9d9d; }
.dp-card.top .dp-amount { color:#d97706; }
:root[data-theme="dark"] .dp-card.top .dp-amount { color:#f5b942; }
.dp-remark { font-size:12px; color:var(--text-2,#445); line-height:1.6; word-break:break-word; }
.dp-meta { font-size:11px; color:var(--text-3,#9aa3ad); margin-top:2px; }
.dp-badge { font-size:10px; font-weight:700; color:#fff; background:linear-gradient(135deg,#f59e0b,#ef4444); padding:2px 7px; border-radius:999px; }
.dp-card.top { border-color:#f5b942; background:linear-gradient(180deg,rgba(245,158,11,.10),rgba(245,158,11,.03)); box-shadow:0 6px 18px rgba(245,158,11,.18); }
.dp-card.top .dp-amount { color:#d97706; }
.dp-loading, .dp-empty { grid-column:1/-1; text-align:center; color:var(--text-3,#9aa3ad); padding:40px 0; }
.dp-pager { display:flex; justify-content:center; align-items:center; gap:6px; margin-top:24px; flex-wrap:wrap; }
.dp-pg { min-width:34px; height:34px; border:1px solid var(--border,#e6e9ef); background:var(--surface,#fff); color:var(--text-2,#445); border-radius:8px; cursor:pointer; font-size:13px; }
.dp-pg.active { background:var(--brand-500,#2563eb); color:#fff; border-color:var(--brand-500,#2563eb); }
.dp-pg:disabled { opacity:.4; cursor:not-allowed; }
.dp-pg.gap { border:none; background:transparent; cursor:default; }
@media (max-width:560px) {
    .dp-list { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
    .dp-stats { gap:18px; }
}