:root{
  --primary:#f97316;
  --accent:#facc15;
  --bg:#1a1410;
  --text:#fff7ed;
  --text-dim:#d6c4b2;
  --card-bg:#2a1f18;
  --shadow-heavy:0 15px 35px rgba(0,0,0,0.8);
}
*{box-sizing:border-box}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  letter-spacing:0.02em;
  line-height:1.7;
}
h1,h2,h3,h4,.font-title{
  font-family:'Segoe Script', 'Brush Script MT', 'Comic Sans MS', 'Noto Sans SC', cursive, sans-serif;
  font-weight:700;
  letter-spacing:0.03em;
}
a{text-decoration:none; color:inherit}
img{max-width:100%; display:block}
.section-title{
  font-size:2rem;
  margin-bottom:1.2rem;
  color:var(--accent);
  border-left:0.5rem solid var(--primary);
  padding-left:1rem;
  text-shadow:0 3px 5px rgba(0,0,0,0.6);
}
/* 拟物厚重 */
.card-film{
  background:linear-gradient(145deg, #34281e, #1d1611);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:1.2rem;
  padding:0.8rem;
  box-shadow:var(--shadow-heavy), inset 0 1px 2px rgba(255,255,255,0.08);
  transition:transform 0.2s, box-shadow 0.3s;
  height:100%;
}
.card-film:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 25px 40px rgba(0,0,0,0.9), 0 0 0 1px var(--primary);
  z-index:3;
}
.poster-wrap{
  position:relative;
  overflow:hidden;
  border-radius:0.8rem;
  background:#000;
}
.poster-wrap img{
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover;
  transition:transform 0.4s ease, opacity 0.3s;
  background:linear-gradient(135deg, #3d2c1d, #5a3e2b);
  opacity:0.85;
}
.card-film:hover .poster-wrap img{
  transform:scale(1.08);
  opacity:1;
}
.poster-mask{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(20,10,0,0.9) 5%, transparent 60%);
  opacity:0.6;
  transition:opacity 0.3s;
}
.card-film:hover .poster-mask{opacity:0.95}
.play-btn{
  position:absolute;
  top:45%;
  left:50%;
  transform:translate(-50%,-50%);
  width:48px;
  height:48px;
  background:rgba(249,115,22,0.9);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.2rem;
  opacity:0;
  transition:opacity 0.3s;
  box-shadow:0 4px 12px rgba(0,0,0,0.5);
}
.card-film:hover .play-btn{opacity:1}
.film-info{
  padding:0.8rem 0.2rem 0.2rem;
}
.film-info h3{
  font-size:1rem;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#ffe9d2;
}
.film-meta{
  display:flex;
  justify-content:space-between;
  font-size:0.8rem;
  color:var(--text-dim);
  margin-top:0.2rem;
}
.badge-year{
  background:rgba(249,115,22,0.25);
  padding:0 0.3rem;
  border-radius:0.4rem;
}
/* 横向滚动 */
.scroll-row{
  display:flex;
  gap:1.2rem;
  overflow-x:auto;
  padding-bottom:1.2rem;
  scroll-snap-type:x mandatory;
}
.scroll-row .card-film{
  min-width:150px;
  scroll-snap-align:start;
}
.scroll-row::-webkit-scrollbar{height:8px}
.scroll-row::-webkit-scrollbar-thumb{background:var(--primary); border-radius:8px}
/* 对比表格 */
.compare-table td, .compare-table th{
  background:#2a201a;
  border-bottom:1px solid #4a3b2d;
  padding:0.8rem;
}
/* 导航 */
.navbar-brand{
  font-size:1.8rem;
  font-weight:800;
  color:var(--primary) !important;
  text-shadow:0 2px 6px #000;
}
.navbar-custom{
  background:rgba(26,20,16,0.92);
  backdrop-filter:blur(12px);
  border-bottom:2px solid #ff8c3b;
}
.nav-link{
  color:var(--text) !important;
  font-weight:600;
  margin:0 0.5rem;
}
.nav-link:hover{color:var(--accent) !important}
/* hero统计 */
.hero-stats{
  background:linear-gradient(130deg, #5d1f01, #1f130c);
  border-radius:2rem;
  padding:2.5rem 2rem;
  box-shadow:inset 0 0 0 2px rgba(249,115,22,0.3), 0 25px 40px rgba(0,0,0,0.7);
}
.stat-item .num{
  font-size:3.5rem;
  font-weight:900;
  color:var(--accent);
  text-shadow:0 4px 8px rgba(0,0,0,0.7);
}
/* 懒加载渐显 */
.fade-item{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.6s, transform 0.6s;
}
.fade-item.visible{opacity:1; transform:translateY(0)}
/* 抽屉弹窗 */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1050;
  display:none; align-items:flex-end;
}
.drawer-panel{
  width:100%;
  max-height:75vh;
  background:linear-gradient(145deg, #2b201a, #1e1510);
  border-radius:2rem 2rem 0 0;
  padding:2rem 1.5rem;
  box-shadow:0 -10px 40px rgba(0,0,0,0.9);
  transform:translateY(100%);
  transition:transform 0.3s ease;
  overflow-y:auto;
}
.drawer-panel.show{transform:translateY(0)}
.close-drawer{
  float:right;
  font-size:2rem;
  color:var(--primary);
  cursor:pointer;
  background:none;
  border:none;
}
/* 通用 */
.btn-custom{
  background:var(--primary);
  border:none;
  color:#fff;
  font-weight:700;
  border-radius:50rem;
  padding:0.4rem 1.2rem;
  box-shadow:0 3px 0 #a04b0c;
}
.btn-custom:hover{background:#fb923c; color:#000}
.pointer{cursor:pointer}

/* --- 子页面追加 --- */
/* 覆盖 bootstrap 组件白底 */
    .card, .card-body, .list-group-item, .accordion-item, .accordion-button, .accordion-body {
      background: var(--card-bg) !important;
      color: var(--text) !important;
      border-color: var(--border-color, #3a2c22) !important;
    }
.card-title, .card-text, .list-group-item {
      color: var(--text) !important;
    }
.table {
      --bs-table-bg: transparent !important;
      color: var(--text) !important;
    }
.table th, .table td {
      border-color: #3a2c22;
      background: transparent;
      color: var(--text);
    }
.table-hover tbody tr:hover {
      background: rgba(249, 115, 22, 0.08) !important;
    }
.form-control, .form-select {
      background: rgba(0,0,0,0.35);
      color: var(--text);
      border: 1px solid #3a2c22;
    }
.form-control::placeholder { color: rgba(255,255,255,0.45); }
.form-control:focus { background: rgba(0,0,0,0.5); color: #fff; }
/* 排行榜专用样式 */
    .rank-hero {
      padding: 3rem 0 2rem;
      border-bottom: 1px solid rgba(250, 204, 21, 0.15);
    }
.rank-badge {
      background: linear-gradient(135deg, var(--primary), #d95f0b);
      display: inline-block;
      padding: 0.3rem 1rem;
      border-radius: 30px;
      font-weight: 700;
      font-size: 0.9rem;
      letter-spacing: 0.5px;
      color: #fff;
    }
.rank-title {
      font-size: 2.5rem;
      font-weight: 900;
      color: var(--text);
      margin: 1rem 0 0.5rem;
    }
.rank-sub {
      color: var(--text-dim);
      max-width: 720px;
      margin: 0 auto 2rem;
    }
.rank-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 1.5rem;
      justify-content: center;
      border-bottom: 1px solid #3a2c22;
      padding-bottom: 1rem;
      margin-bottom: 2rem;
    }
.rank-tab {
      background: transparent;
      border: none;
      color: var(--text-dim);
      font-weight: 600;
      font-size: 1.05rem;
      padding: 0.3rem 0.2rem;
      border-bottom: 3px solid transparent;
      transition: 0.2s;
      cursor: pointer;
    }
.rank-tab.active, .rank-tab:hover {
      color: var(--accent);
      border-bottom-color: var(--primary);
    }
.rank-list {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
.rank-item {
      display: flex;
      align-items: center;
      background: var(--card-bg);
      border-radius: 16px;
      padding: 0.8rem 1rem;
      border: 1px solid rgba(255,255,255,0.04);
      transition: 0.2s;
    }
.rank-item:hover {
      border-color: var(--primary);
      transform: translateY(-2px);
      box-shadow: var(--shadow-heavy);
    }
.rank-number {
      font-weight: 900;
      font-size: 1.8rem;
      min-width: 70px;
      text-align: center;
      color: var(--primary);
      opacity: 0.9;
    }
.rank-number.gold { color: #fbbf24; }
.rank-number.silver { color: #cbd5e1; }
.rank-number.bronze { color: #d97706; }
.rank-info {
      flex: 1;
      padding: 0 1rem;
    }
.rank-info h3 {
      font-size: 1.15rem;
      font-weight: 700;
      margin-bottom: 0.3rem;
      color: var(--text);
    }
.rank-info .meta {
      font-size: 0.85rem;
      color: var(--text-dim);
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
    }
.rank-score {
      background: rgba(250, 204, 21, 0.12);
      color: var(--accent);
      font-weight: 800;
      padding: 0.25rem 0.9rem;
      border-radius: 30px;
      font-size: 1.2rem;
      border: 1px solid rgba(250,204,21,0.3);
      white-space: nowrap;
    }
.rank-extra {
      display: flex;
      gap: 0.8rem;
      margin-top: 0.5rem;
    }
.badge-tag {
      background: rgba(249,115,22,0.15);
      color: var(--primary);
      padding: 0.2rem 0.7rem;
      border-radius: 30px;
      font-size: 0.75rem;
      font-weight: 600;
    }
.editors-pick {
      background: rgba(249,115,22,0.03);
      border-radius: 24px;
      padding: 1.8rem 1.5rem;
      border: 1px dashed rgba(249,115,22,0.3);
      margin: 2rem 0;
    }
.pick-item {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
    }
.pick-icon {
      font-size: 1.8rem;
      color: var(--primary);
    }
.footer-links a {
      color: var(--text-dim);
      margin: 0 0.8rem;
      text-decoration: none;
      font-size: 0.9rem;
    }
.footer-links a:hover { color: var(--accent); }