/* 来集卡 2a — global styles. Values come from tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--text); font: 400 15px/1.6 var(--font-cn); -webkit-font-smoothing: antialiased; min-height: 100vh; }
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
.ic { fill: currentColor; flex-shrink: 0; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-family: var(--font-num); }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }
.show-m { display: none !important; }
@media (max-width: 760px) { .show-m { display: flex !important; } .hide-m { display: none !important; } }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { font: 800 13px var(--font-num); letter-spacing: .2em; text-transform: uppercase; }
.eyebrow--gold { color: var(--gold-text); }
.eyebrow--red { color: var(--red); letter-spacing: .12em; }
.muted { color: var(--text-2); }
.weak { color: var(--text-3); }
.small { font-size: 13px; }

/* ---------- stage (星夜舞台) ---------- */
.stage { position: relative; overflow: hidden; background: var(--navy); color: #fff; }
.stage__glow { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(55% 75% at 88% 8%, var(--glow-blue), transparent 62%),
  radial-gradient(40% 55% at 62% 105%, var(--glow-purple), transparent 60%),
  radial-gradient(35% 50% at 4% 0%, var(--glow-cyan), transparent 60%); }
.stage__stars { position: absolute; inset: 0; opacity: .55; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1.4px), radial-gradient(rgba(247,201,72,.9) 1px, transparent 1.5px);
  background-size: 120px 120px, 190px 190px; background-position: 10px 30px, 70px 90px; }
.stage__rainbow { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--rainbow); }
.stage > :not(.stage__glow):not(.stage__stars):not(.stage__rainbow) { position: relative; }
.stage__body { max-width: var(--max); margin: 0 auto; padding: 32px var(--gutter) 48px; }
.stage h1 { font: 900 44px/1.2 var(--font-cn); letter-spacing: -.01em; }
.stage .lead { font: 400 17px/1.7 var(--font-cn); color: var(--on-dark-2); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 13px var(--font-cn); color: var(--on-dark-3); }
.crumbs a:hover { color: #fff; }
.crumbs .ic { opacity: .7; }

/* ---------- top bar ---------- */
.topbar { max-width: var(--max); margin: 0 auto; height: 76px; display: flex; align-items: center; gap: 36px; padding: 0 var(--gutter); }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand__img { display: block; height: 40px; width: auto; }
.brand__img--sheet { height: 30px; }
.topbar__nav { display: flex; align-items: center; gap: 28px; font: 500 16px var(--font-cn); color: var(--on-dark-2); }
.topbar__nav a { padding: 8px 0; white-space: nowrap; }
.topbar__nav a:hover, .topbar__nav a[aria-current] { color: #fff; }
.topbar__nav a[aria-current] { font-weight: 700; }
.topbar__sep { width: 1px; height: 18px; background: rgba(255,255,255,.18); margin: 0 -8px; }
.topbar__nav .topbar__sim { color: var(--gold-text); }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--gold); color: var(--navy); display: grid; place-items: center; font: 900 17px var(--font-num); }
.icon-btn { width: var(--tap); height: var(--tap); border-radius: 50%; display: grid; place-items: center; color: var(--text); }
.icon-btn:hover { background: var(--control); }
.icon-btn--dark { color: #fff; }
.icon-btn--dark:hover { background: rgba(255,255,255,.1); }
.mbar { height: 60px; align-items: center; justify-content: space-between; padding: 0 10px; }
.mbar__title { font: 800 17px var(--font-num); letter-spacing: .02em; }
.mbar__spacer { width: var(--tap); }
@media (max-width: 1100px) { .topbar { gap: 20px; } .topbar__nav { gap: 18px; font-size: 15px; } }
@media (max-width: 760px) {
  .topbar { height: 60px; padding: 0 12px 0 18px; }
  .topbar__nav { display: none; }
  .topbar .brand__img { height: 32px; }
  .topbar .btn--nav { display: none; }
  .avatar { width: 36px; height: 36px; font-size: 15px; }
  .stage h1 { font-size: 28px; }
  .stage .lead { font-size: 14px; }
  .stage__body { padding: 8px var(--gutter) 28px; }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 22px; border-radius: 14px; font: 700 15px var(--font-cn); white-space: nowrap; transition: transform .12s, box-shadow .12s, background .12s; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--red { background: var(--red); color: #fff; box-shadow: var(--sh-red); }
.btn--red:hover { background: #D22F0B; }
.btn--red:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--red-shade); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: #0E1E5C; }
.btn--ghost { background: var(--control); color: var(--text); }
.btn--ghost:hover { background: var(--border); }
.btn--outline { background: #fff; color: var(--text); border: 1.5px solid var(--border); }
.btn--outline:hover { border-color: var(--text-3); }
.btn--outline-dark { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.btn--outline-dark:hover { background: rgba(255,255,255,.08); }
.btn--glass { background: var(--glass); color: #fff; border: 1px solid var(--glass-border); }
.btn--glass:hover { background: rgba(255,255,255,.14); }
.btn--pill { border-radius: var(--r-pill); }
.btn--nav { height: 42px; min-height: 42px; padding: 0 20px; border-radius: var(--r-pill); }
.btn--block { width: 100%; }
.btn--lg { min-height: 52px; font-size: 16px; }
.link { display: inline-flex; align-items: center; gap: 6px; font: 700 15px var(--font-cn); color: var(--text); }
.link:hover { color: var(--red); }
.link--red { color: var(--red); }

/* ---------- chips / badges / segmented ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--center { justify-content: center; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips--scroll::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: #fff; border: 1.5px solid var(--border); font: 700 13px var(--font-cn); color: var(--text); white-space: nowrap; }
.chip:hover { border-color: var(--text-3); }
.chip.is-on { background: var(--soft-red); color: var(--red); border-color: var(--red); }
.chip--solid.is-on { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip--soft { border: 0; background: var(--soft-red); color: var(--red); }
.chip--tag { min-height: 26px; padding: 0 10px; font-size: 12px; border: 0; background: var(--control); color: var(--text-2); cursor: default; }
@media (max-width: 760px) { .chip { min-height: var(--tap); } }
.badge { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); font: 700 12px var(--font-cn); white-space: nowrap; }
.badge--grey { background: var(--control); color: var(--text-2); }
.badge--red { background: var(--red); color: #fff; }
.badge--soft-red { background: var(--soft-red); color: var(--red); }
.badge--green { background: var(--soft-green); color: #17703D; }
.badge--yellow { background: var(--soft-yellow); color: var(--text-warn); }
.badge--gold { background: var(--gold); color: var(--navy); }
.badge--blue { background: var(--soft-blue); color: var(--blue-text); }
.badge--purple { background: var(--soft-purple); color: var(--purple); }
.badge--glass { background: rgba(255,255,255,.14); color: #fff; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--control); }
.seg button { min-height: 38px; padding: 0 18px; border-radius: var(--r-pill); font: 700 14px var(--font-cn); color: var(--text-2); white-space: nowrap; }
.seg button.is-on { background: var(--navy); color: #fff; }
.seg--dark { background: rgba(255,255,255,.08); }
.seg--dark button { color: var(--on-dark-2); }
.seg--dark button.is-on { background: #fff; color: var(--navy); }
@media (max-width: 760px) { .seg button { min-height: var(--tap); padding: 0 14px; } .btn.btn--sm { min-height: var(--tap); } }

/* ---------- modules ---------- */
.page { padding-top: var(--gap); padding-bottom: 72px; }
.mod { background: var(--surface); border-radius: var(--r-module); padding: 28px 32px; }
.mod + .mod { margin-top: var(--gap); }
.mod__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.mod__title { display: flex; align-items: center; gap: 10px; font: 900 20px var(--font-cn); }
.mod__note { font: 500 13px var(--font-cn); color: var(--text-3); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--gap); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .mod { padding: 18px 16px; } .mod__title { font-size: 17px; } .mod__head { margin-bottom: 14px; } .page { padding-bottom: 110px; } .hide-m-soft { display: none !important; } }

/* ---------- card tiles ---------- */
.card-img { width: 100%; height: auto; aspect-ratio: 245 / 342; object-fit: cover; border-radius: var(--r-img); background: var(--control); }
.card-img--empty { display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--text-3); border: 2px dashed var(--border); background: var(--control); aspect-ratio: 63 / 88; }
.card-img--empty span { font-size: 12px; font-weight: 700; }
.grid-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .grid-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.tile { display: flex; flex-direction: column; gap: 12px; position: relative; }
.tile__frame { border-radius: var(--r-card); background: var(--control); padding: 18px; transition: transform .15s, box-shadow .15s; position: relative; }
.tile__frame .card-img { box-shadow: var(--sh-thumb); }
a.tile:hover .tile__frame, .tile--link:hover .tile__frame { transform: translateY(-3px); box-shadow: var(--sh-hover); }
.tile__name { font: 700 16px var(--font-cn); padding: 0 4px; }
.tile__meta { font: 500 13px var(--font-cn); color: var(--text-3); padding: 0 4px; margin-top: -8px; }
.tile__note { font: 400 13px/1.5 var(--font-cn); color: var(--text-2); padding: 0 4px; margin-top: -6px; }
.tile__badge { position: absolute; left: 10px; top: 10px; z-index: 1; height: 24px; font-size: 12px; }
.tile__fav { position: absolute; right: 8px; top: 8px; z-index: 1; width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.tile__fav.is-on { color: #E3A600; } /* 关注 = gold star */
@media (max-width: 760px) { .tile__frame { padding: 10px; border-radius: 18px; } .tile__name { font-size: 14px; } .tile__fav { width: var(--tap); height: var(--tap); right: 2px; top: 2px; background: transparent; box-shadow: none; } .tile__fav .ic { background: #fff; border-radius: 50%; padding: 6px; width: 32px; height: 32px; box-shadow: 0 2px 8px rgba(0,0,0,.12); } }

/* ---------- charts & numbers ---------- */
.spark { display: block; }
.spark--none { font: 500 12px var(--font-cn); color: var(--text-3); text-align: center; }
.chg { display: inline-block; min-width: 64px; text-align: center; padding: 4px 8px; border-radius: var(--r-pill); font: 800 13px var(--font-num); }
.chg--up { background: var(--soft-green); color: var(--up); }
.chg--down { background: var(--soft-red); color: var(--down); }
.chg--none { background: var(--control); color: var(--text-3); font: 700 12px var(--font-cn); }
.up { color: var(--up); } .down { color: var(--down); }
.stage .up { color: var(--up-dark); } .stage .down { color: var(--down-dark); }

/* ---------- footer ---------- */
.footer { background: var(--navy); color: #B9C3E6; padding: 28px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font: 400 13px var(--font-cn); }
.footer__brand { font: 900 18px var(--font-cn); color: #fff; }
.footer__links { margin-left: auto; display: flex; gap: 16px; }
.footer__links a { min-height: var(--tap); display: inline-flex; align-items: center; }
.footer__links a:hover { color: #fff; }
.footer__stale { color: var(--yellow); font-weight: 700; }
@media (max-width: 760px) { .footer { padding: 24px 18px 108px; } .footer__links { margin-left: 0; } }

/* ---------- mobile tab bar & menu ---------- */
.tabbar { position: fixed; left: 12px; right: 12px; bottom: 14px; z-index: 30; height: 64px; border-radius: 24px; background: var(--navy); box-shadow: var(--sh-float); display: grid !important; grid-template-columns: repeat(5, 1fr); align-items: center; color: #8A909C; font: 500 12px var(--font-cn); }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 56px; justify-content: center; }
.tabbar a[aria-current] { color: #fff; }
.tabbar a[aria-current] .ic { color: #FF6B45; }
@media (min-width: 761px) { .tabbar { display: none !important; } }
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(7,20,67,.45); }
.menu-sheet { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(320px, 86vw); background: #fff; padding: 12px 18px 24px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--sh-board); overflow-y: auto; }
.menu-sheet__head { display: flex; align-items: center; justify-content: space-between; height: 56px; margin-bottom: 8px; }
.menu-sheet__item { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 4px; border-bottom: 1px solid var(--divider); font: 700 16px var(--font-cn); }
.menu-sheet__item--sim { color: var(--yellow); }
.menu-sheet__foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 20px; }
.menu-sheet__link { min-height: var(--tap); display: flex; align-items: center; color: var(--text-2); font-size: 14px; }

/* ---------- states (P6) ---------- */
.state { border-radius: var(--r-module); padding: 40px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.state--empty { background: #fff; }
.state h2 { font: 900 20px var(--font-cn); }
.state p { font: 400 14px/1.7 var(--font-cn); color: var(--text-2); max-width: 380px; }
.state__icon { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; }
.state__icon--yellow { background: var(--soft-yellow); color: var(--yellow); }
.state__icon--night { background: rgba(255,255,255,.1); color: var(--gold); }
.state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.state__actions--left { justify-content: flex-start; }
.state--night { position: relative; overflow: hidden; background: var(--navy); color: #fff; min-height: 300px; justify-content: center; }
.state--night > :not(.stage__glow):not(.stage__stars) { position: relative; }
.state--night p { color: var(--on-dark-2); }
.state--404 { flex-direction: row; text-align: left; gap: 36px; padding: 40px 48px; }
.state--404 .state__text { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ghost-card { width: 118px; height: 164px; flex-shrink: 0; border: 2px dashed rgba(255,255,255,.3); border-radius: 12px; transform: rotate(-6deg); display: grid; place-items: center; font: 900 36px var(--font-num); color: var(--gold); }
@media (max-width: 760px) { .state--404 { flex-direction: column; text-align: center; padding: 32px 20px; } .state--404 .state__text { align-items: center; } .state__actions--left { justify-content: center; } }
.skel-card { display: flex; flex-direction: column; gap: 12px; }
.skel { background: linear-gradient(90deg, #EEF0F3 0%, #F6F7F9 50%, #EEF0F3 100%); background-size: 200% 100%; border-radius: 12px; animation: shimmer 1.4s linear infinite; }
.skel--img { aspect-ratio: 245 / 342; border-radius: var(--r-card); }
.skel--line { height: 14px; width: 80%; }
.skel--short { width: 55%; }
.skel--block { height: 120px; border-radius: var(--r-module); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 60; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: var(--r-pill); background: var(--navy); color: #fff; font: 700 14px var(--font-cn); box-shadow: var(--sh-float); transition: .2s; max-width: calc(100vw - 32px); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast--ok .ic { color: var(--up-dark); }
.toast--warn .ic { color: var(--gold); }
@media (max-width: 760px) { .toast { bottom: 92px; } }

/* ---------- dialogs ---------- */
.dialog-wrap { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; }
.dialog-backdrop { position: absolute; inset: 0; background: rgba(7,20,67,.55); }
.dialog { position: relative; width: min(460px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: #fff; border-radius: var(--r-module); box-shadow: 0 30px 80px rgba(7,20,67,.35); outline: none; }
.dialog--wide { width: min(1200px, 100%); }
.dialog__close { position: absolute; right: 16px; top: 16px; z-index: 2; width: var(--tap); height: var(--tap); border-radius: 50%; display: grid; place-items: center; background: var(--control); }
.dialog__close--dark { background: rgba(255,255,255,.14); color: #fff; }
.dialog__body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 16px; }
.dialog__head { padding: 24px 28px 0; display: flex; flex-direction: column; gap: 8px; }
.dialog__head h2 { font: 900 22px var(--font-cn); }
@media (max-width: 760px) { .dialog-wrap { align-items: end; padding: 0; } .dialog { width: 100%; border-radius: 28px 28px 0 0; max-height: 92vh; } .dialog__body { padding: 18px 18px 24px; } }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font: 700 13px var(--font-cn); color: var(--text-2); }
.input { width: 100%; height: 48px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--border); background: #fff; font-size: 16px; }
.input:focus { outline: none; border: 2px solid var(--indigo); padding: 0 15.5px; } /* red stays reserved for errors */
textarea.input { height: auto; min-height: 96px; padding: 12px 16px; line-height: 1.6; resize: vertical; }
.search { display: flex; align-items: center; gap: 10px; height: 62px; padding: 0 8px 0 22px; border-radius: 18px; background: #fff; color: var(--text); }
.search > .ic { color: var(--text-3); }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font-size: 16px; }
.search input::placeholder { color: var(--text-3); }
.search .btn { height: 46px; min-height: 46px; border-radius: 12px; box-shadow: none; }
@media (max-width: 760px) { .search { height: 52px; padding: 0 6px 0 16px; border-radius: 14px; } .search input { font-size: 16px; } .search .btn { height: var(--tap); min-height: var(--tap); padding: 0 16px; border-radius: 10px; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  a.tile:hover .tile__frame, .tile--link:hover .tile__frame { transform: none; }
}
/* Sticky footer: on short pages the footer sits at the bottom of the viewport; long pages push it down as usual. */
#app, body.static { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
#app > *, body.static > * { flex-shrink: 0; }
#app > .wrap, body.static > .wrap { width: 100%; } /* auto side margins would otherwise shrink it in a flex column */
#app > .footer, body.static > .footer { margin-top: auto; }