:root {
  --pass-fg:#f5ead6; --pass-muted:#968c7d; --pass-bg:#0e0906;
  --pass-panel:#1a1009; --pass-border:#8f6921; --pass-gold:#f0b429; --pass-rose:#ff5d73;
}
* { box-sizing:border-box }
body.pass-page {
  min-height:100vh; margin:0; color:var(--pass-fg); background:
    linear-gradient(180deg,rgba(14,9,6,.76),rgba(14,9,6,.96)),
    url("/assets/menu-bg.jpg") center/cover fixed;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
}
.pass-bar {
  display:flex; align-items:center; justify-content:space-between;
  min-height:64px; padding:12px max(24px,calc((100vw - 920px)/2));
  border-bottom:1px solid rgba(240,180,41,.28); background:rgba(14,9,6,.9);
}
.pass-bar strong { color:var(--pass-gold); letter-spacing:4px }
.pass-back { color:var(--pass-fg); text-decoration:none; font-size:13px }
.pass-shell { width:min(920px,calc(100% - 32px)); margin:0 auto; padding:64px 0 96px }
.pass-hero {
  padding:42px; border:1px solid var(--pass-border);
  background:linear-gradient(135deg,rgba(240,180,41,.16),rgba(255,93,115,.06),rgba(14,9,6,.95));
}
.pass-kicker { color:var(--pass-gold); font:700 11px ui-monospace,monospace; letter-spacing:3px }
.pass-hero h1 { margin:10px 0; font-size:54px; letter-spacing:8px; color:var(--pass-gold) }
.pass-hero p { max-width:600px; margin:0; color:var(--pass-muted); line-height:1.8 }
.pass-status { display:inline-block; margin-top:24px; padding:8px 12px; border:1px solid rgba(240,180,41,.35); color:var(--pass-gold); font-size:12px }
.pass-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0 }
.pass-grid article { padding:20px; border:1px solid rgba(245,234,214,.12); background:rgba(26,16,9,.88) }
.pass-grid b { color:var(--pass-fg); font-size:15px }
.pass-grid p { margin:8px 0 0; color:var(--pass-muted); font-size:12px; line-height:1.7 }
.pass-pace { margin:18px 0; padding:24px; border:1px solid rgba(101,214,174,.34); background:linear-gradient(110deg,rgba(101,214,174,.08),rgba(14,9,6,.94)) }
.pass-pace-head { display:flex; align-items:center; justify-content:space-between; gap:16px }
.pass-pace-head span { color:#65d6ae; font:700 10px ui-monospace,monospace; letter-spacing:2px }
.pass-pace-head b { color:var(--pass-muted); font-size:11px }
.pass-pace h2 { margin:12px 0 5px; font-size:22px }
.pass-pace p { margin:0; color:var(--pass-muted); font-size:12px; line-height:1.7 }
.pass-pace-meter { height:7px; margin:16px 0; overflow:hidden; background:rgba(245,234,214,.1) }
.pass-pace-meter i { display:block; width:0; height:100%; background:linear-gradient(90deg,#65d6ae,var(--pass-gold)); transition:width .25s ease }
#btn-pass-play { display:block; width:100%; padding:12px; border:1px solid rgba(101,214,174,.48); color:#65d6ae; background:rgba(101,214,174,.07); text-align:center; text-decoration:none; font-size:13px; font-weight:800 }
#btn-pass-play:hover { background:rgba(101,214,174,.14) }
.pass-preview { margin:18px 0; padding:24px; border:1px solid rgba(240,180,41,.28); background:rgba(14,9,6,.94) }
.pass-preview-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:16px }
.pass-preview-head span { color:var(--pass-gold); font:700 10px ui-monospace,monospace; letter-spacing:2px }
.pass-preview-head h2 { margin:5px 0 0; font-size:22px }
.pass-preview-head b { color:var(--pass-muted); font-size:11px }
.pass-preview-profile { margin-bottom:12px }
.pass-preview-profile .pass-badge { font-style:normal }
.pass-preview-tiers { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px }
.pass-preview-tiers button {
  min-width:0; padding:9px 5px; cursor:pointer; border:1px solid rgba(245,234,214,.14);
  background:rgba(245,234,214,.025); color:var(--pass-muted); font:700 10px inherit;
}
.pass-preview-tiers button.selected { border-color:var(--pass-gold); color:var(--pass-gold); background:rgba(240,180,41,.08) }
.pass-preview-tiers button.earned::after { content:"已点亮"; display:block; margin-top:3px; color:#65d6ae; font-size:8px }
#pass-preview-detail { margin:12px 0 0; color:var(--pass-muted); font-size:12px; line-height:1.7 }
.pass-patrol { margin:18px 0; padding:24px; border:1px solid rgba(240,180,41,.28); background:rgba(14,9,6,.94) }
.pass-patrol-head { display:flex; align-items:end; justify-content:space-between; gap:16px }
.pass-patrol-head span { color:var(--pass-gold); font:700 10px ui-monospace,monospace; letter-spacing:2px }
.pass-patrol-head h2 { margin:5px 0 0; font-size:22px }
.pass-patrol-head b { color:var(--pass-gold); font:800 14px ui-monospace,monospace }
.pass-patrol-days { display:grid; grid-template-columns:repeat(14,minmax(0,1fr)); gap:5px; margin:18px 0 }
.pass-patrol-days i { aspect-ratio:1; border:1px solid rgba(245,234,214,.12); background:rgba(245,234,214,.025) }
.pass-patrol-days i.on { border-color:rgba(240,180,41,.6); background:linear-gradient(135deg,#f0b429,#ff8b6b) }
.pass-patrol-tiers { display:flex; flex-wrap:wrap; gap:7px }
.pass-patrol-tiers span { padding:5px 8px; border:1px solid rgba(245,234,214,.12); color:var(--pass-muted); font-size:10px }
.pass-patrol-tiers span.on { border-color:rgba(240,180,41,.5); color:var(--pass-gold) }
#pass-patrol-note { margin:12px 0 0; color:var(--pass-muted); font-size:12px; line-height:1.7 }
.pass-checkout { padding:24px; border:1px solid rgba(240,180,41,.28); background:rgba(14,9,6,.94) }
.pass-checkout > div { display:flex; justify-content:space-between; gap:20px; padding:8px 0; border-bottom:1px solid rgba(245,234,214,.08) }
.pass-checkout span { color:var(--pass-muted); font-size:12px }
.pass-checkout b { color:var(--pass-fg); font-size:13px }
.pass-checkout button {
  width:100%; margin-top:20px; padding:15px; border:0; cursor:pointer;
  background:linear-gradient(100deg,var(--pass-gold),#ffd66b); color:#1a1005;
  font:900 15px inherit; letter-spacing:3px;
}
.pass-checkout button:disabled { cursor:default; background:#33291e; color:#746b5f }
#checkout-note { min-height:20px; margin:12px 0 0; color:var(--pass-muted); font-size:12px; text-align:center }
.pass-privacy { margin:18px 0 0; text-align:center; font-size:12px }
.pass-privacy a { color:var(--pass-muted) }
@media (max-width:720px) {
  .pass-shell { padding:32px 0 64px }
  .pass-hero { padding:28px 22px }
  .pass-hero h1 { font-size:40px }
  .pass-grid { grid-template-columns:1fr }
  .pass-pace { padding:20px 16px }
  .pass-pace-head { align-items:flex-start; flex-direction:column; gap:6px }
  .pass-preview { padding:20px 16px }
  .pass-preview-head { align-items:flex-start; flex-direction:column; gap:7px }
  .pass-preview-tiers { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .pass-patrol { padding:20px 16px }
  .pass-patrol-days { grid-template-columns:repeat(7,minmax(0,1fr)) }
}