/* ============================================================
   主题 20 · 暗夜电影  Noir Cinema
   纯黑底配冷银灰与暗蓝，电影质感深沉如暗调电影海报
   ============================================================ */
:root{
  --c-bg:#0a0a0c;
  --c-bg-grad:radial-gradient(circle at 25% 15%,rgba(100,116,139,.14),transparent 45%),
              radial-gradient(circle at 75% 85%,rgba(71,85,105,.10),transparent 48%),
              radial-gradient(circle at 50% 50%,rgba(148,163,184,.05),transparent 55%),
              linear-gradient(165deg,#0a0a0c,#121214);
  --c-surface:rgba(22,22,26,.82);
  --c-surface-2:rgba(30,30,36,.65);
  --c-text:#e2e8f0;
  --c-muted:#64748b;
  --c-accent:#94a3b8;
  --c-accent-2:#cbd5e1;
  --c-on-accent:#0a0a0c;
  --c-border:rgba(148,163,184,.14);
  --font-display:'Helvetica Neue','Helvetica','Arial','PingFang SC',sans-serif;
  --hero-grad:linear-gradient(135deg,#64748b,#94a3b8 55%,#e2e8f0);
  --nav-bg:rgba(10,10,12,.68);
  --nav-blur:blur(18px);
  --shadow:0 22px 55px rgba(0,0,0,.55);
  --radius:4px;
}
/* 暗夜光晕层 */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 45% at 18% 10%,rgba(100,116,139,.14),transparent 65%),
    radial-gradient(55% 40% at 82% 90%,rgba(148,163,184,.08),transparent 60%);
  animation:noirFlicker 10s ease-in-out infinite alternate;
}
@keyframes noirFlicker{from{opacity:.6}to{opacity:.9}}
/* 电影胶片划痕感 */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.03;
  background-image:repeating-linear-gradient(90deg,transparent,transparent 3px,rgba(255,255,255,1) 3px,rgba(255,255,255,1) 4px);
}
.hero h1{font-weight:200;letter-spacing:-1px}
.hero h1 .grad{background:linear-gradient(135deg,#cbd5e1,#94a3b8,#e2e8f0);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.album-card{backdrop-filter:blur(12px);border:1px solid rgba(148,163,184,.12);box-shadow:0 18px 44px rgba(0,0,0,.5)}
.album-card:hover{box-shadow:0 0 0 1px rgba(148,163,184,.4),0 30px 64px rgba(0,0,0,.6);border-color:rgba(148,163,184,.35);transform:translateY(-6px)}
.album-info{border-top:1px solid rgba(148,163,184,.12)}
.album-info h3{font-weight:500;letter-spacing:.5px}
.album-badge{background:rgba(10,10,12,.82);color:#cbd5e1;border:1px solid rgba(148,163,184,.25);backdrop-filter:blur(6px)}
.album-meta .view{color:#cbd5e1}
.section-head .kicker{color:#94a3b8;letter-spacing:6px}
.section-head h2{font-weight:200;letter-spacing:-.5px}
.about-visual{background:linear-gradient(135deg,#1e1e24,#475569,#94a3b8);box-shadow:0 0 50px rgba(0,0,0,.4)}
.eyebrow{background:linear-gradient(135deg,#64748b,#94a3b8) !important;color:#0a0a0c !important;letter-spacing:4px}
.btn.primary{background:linear-gradient(135deg,#64748b,#94a3b8);color:#0a0a0c;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.btn.ghost{background:rgba(255,255,255,.05);color:#e2e8f0;border-color:rgba(148,163,184,.2)}
.footer{background:#050506;border-top:1px solid rgba(148,163,184,.08)}
.logo-mark{box-shadow:0 6px 22px rgba(0,0,0,.5)}
.nav-menu a:hover{color:#cbd5e1}
.divider{background:linear-gradient(135deg,#64748b,#94a3b8)}
.shape.s1{background:#64748b !important;opacity:.10 !important}
.shape.s2{background:#94a3b8 !important;opacity:.08 !important}
.ts-swatch.ts-noir{background:linear-gradient(135deg,#0a0a0c,#94a3b8)}