/* =========================================================
   QMH 球盟会数据 · /assets/site.css
   共享外壳：状态条 + 品牌轨道 + 框架导航 + 页脚 + 基础组件
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, picture { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; }
input { font: inherit; }
a { color: inherit; }
table { border-collapse: collapse; width: 100%; }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }

:root {
  --ink-900: #06120F;
  --ink-800: #0C211B;
  --ink-600: #14332A;
  --cy-500: #0FE3C8;
  --cy-200: #7CF5E4;
  --or-500: #FF6B1A;
  --or-200: #FFB37A;
  --gry-300: #C8D3CF;
  --gry-500: #6E7F7A;
  --paper-100: #F2EFE6;
  --clay-500: #9C5B3C;

  --rail-w: 88px;
  --status-h: 28px;
  --nav-h: 52px;
  --frame-top: calc(var(--status-h) + var(--nav-h));
  --line-1: 1px solid var(--ink-600);
  --gap: 24px;
  --maxw: 1440px;
  --dur: 160ms;
  --ease: ease-out;

  --font-display: 'Barlow Condensed', 'Oswald', 'Noto Sans SC', 'PingFang SC', sans-serif;
  --font-body: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

body {
  min-height: 100vh;
  padding-left: var(--rail-w);
  padding-top: var(--frame-top);
  background-color: var(--ink-900);
  background-image:
    linear-gradient(to right, rgba(20, 51, 42, 0.85) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 51, 42, 0.5) 1px, transparent 1px);
  background-size: 96px 96px;
  color: var(--gry-300);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.01em;
}

::selection { background: var(--cy-500); color: var(--ink-900); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--paper-100);
}
h1 { font-size: clamp(28px, 4vw, 38px); }
h2 { font-size: clamp(20px, 2.4vw, 25px); letter-spacing: -0.01em; color: var(--gry-300); }
h3 { font-size: 18px; letter-spacing: 0; color: var(--gry-300); }
h4 { font-size: 16px; letter-spacing: 0; color: var(--gry-300); }

a { text-decoration: none; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }

:focus-visible { outline: 1px solid var(--cy-500); outline-offset: 2px; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--gry-500); }
.accent { color: var(--cy-500); }
.signal { color: var(--or-500); }

/* ---------- 骨架 ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.section { padding: 40px 0; border-top: var(--line-1); }
.section:first-of-type { border-top: 0; padding-top: 24px; }
.section__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 12px; margin-bottom: 20px; border-bottom: var(--line-1);
}
.section__head h2 { letter-spacing: 0; }
.eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cy-500);
}
.rule { height: 1px; border: 0; background: var(--ink-600); margin: 32px 0; }
.rule--cyan { background: var(--cy-500); }

.layout { display: grid; grid-template-columns: 3fr 9fr; gap: var(--gap); align-items: start; }
.layout--tools { grid-template-columns: 4fr 8fr; }
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.prose { max-width: 68ch; }
.prose p { margin-bottom: 1em; }
.prose a { color: var(--cy-200); border-bottom: 1px solid var(--ink-600); }
.prose a:hover { border-bottom-color: var(--cy-500); }

/* ---------- 品牌轨道 ---------- */
.brand-rail {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 16px 0 20px;
  background: var(--ink-800);
  border-right: var(--line-1);
  z-index: 80;
}
.brand-rail__mark { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.brand-rail__cn {
  writing-mode: vertical-rl;
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  letter-spacing: 0.34em; color: var(--cy-200);
}
.brand-rail__abbr {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--gry-500); border: var(--line-1); padding: 3px 5px;
}
.brand-rail__mark:hover .brand-rail__cn { color: var(--cy-500); }
.brand-rail__mark:hover .brand-rail__abbr { border-color: var(--cy-500); color: var(--gry-300); }
.brand-rail__foot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.brand-rail__lamp { width: 6px; height: 6px; background: var(--cy-500); }
.brand-rail__ver {
  writing-mode: vertical-rl;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--gry-500);
}

/* ---------- 状态条 ---------- */
.statusbar {
  position: fixed; top: 0; left: var(--rail-w); right: 0; height: var(--status-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 16px;
  background: var(--ink-800);
  border-bottom: var(--line-1);
  font-size: 12px;
  z-index: 70;
}
.statusbar__left, .statusbar__right {
  display: flex; align-items: center; gap: 8px;
  min-width: 0; overflow: hidden; white-space: nowrap;
}
.statusbar__chip {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  background: var(--or-500); color: var(--ink-900); padding: 1px 6px;
}
.statusbar__text {
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.06em; color: var(--gry-300);
}
.statusbar__text--dim { color: var(--gry-500); }
.statusbar__text--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; }
.statusbar__dot { width: 3px; height: 3px; background: var(--gry-500); flex: 0 0 auto; }
.statusbar__track { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink-600); }
.statusbar__bar {
  display: block; height: 100%; width: 0;
  background: var(--or-500);
  transition: width var(--dur) var(--ease);
}
.site-header[data-scrolled] .statusbar__text--dim { display: none; }

/* ---------- 框架导航 ---------- */
.navrow {
  position: fixed; top: var(--status-h); left: var(--rail-w); right: 0; height: var(--nav-h);
  display: flex; align-items: stretch; justify-content: space-between;
  background: rgba(6, 18, 15, 0.96);
  border-bottom: var(--line-1);
  z-index: 65;
}
.site-nav { display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; }
.nav__list { display: flex; align-items: stretch; }
.nav__link {
  display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 18px;
  border-left: 2px solid transparent; border-right: var(--line-1);
  color: var(--gry-300);
  font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 0.04em;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__coord { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--gry-500); }
.nav__link:hover { background: var(--ink-800); border-left-color: var(--cy-500); color: var(--cy-200); }
.nav__link:hover .nav__coord { color: var(--or-500); }
.nav__link[aria-current="page"] {
  background: var(--ink-800); border-left-color: var(--cy-500); color: var(--cy-200);
}
.nav__link[aria-current="page"] .nav__coord { color: var(--or-500); }

.nav__quick { display: none; align-items: stretch; margin-left: auto; border-left: var(--line-1); }
.quick__link {
  display: flex; align-items: center; height: 100%; padding: 0 14px;
  border-right: var(--line-1);
  font-family: var(--font-display); font-size: 14px; letter-spacing: 0.04em; color: var(--cy-200);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.quick__link:hover { background: var(--ink-800); color: var(--cy-500); }

.nav-toggle {
  display: none; align-items: center; gap: 8px; padding: 0 16px;
  border-left: 2px solid transparent;
  font-family: var(--font-display); font-size: 14px; letter-spacing: 0.08em; color: var(--gry-300);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-toggle:hover { background: var(--ink-800); color: var(--cy-200); }
.nav-toggle[aria-expanded="true"] { background: var(--ink-800); border-left-color: var(--cy-500); color: var(--cy-500); }
.nav-toggle__bars {
  width: 16px; height: 10px;
  background-image:
    linear-gradient(var(--cy-500) 0 0),
    linear-gradient(var(--cy-500) 0 0),
    linear-gradient(var(--cy-500) 0 0);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 0, 0 50%, 0 100%;
}

/* ---------- 跳过链接 ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 16px;
  background: var(--or-500); color: var(--ink-900);
  font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: 0.04em;
}
.skip-link:focus { position: fixed; left: calc(var(--rail-w) + 8px); top: 8px; }

/* ---------- 通用按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: var(--line-1);
  font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--gry-300); background: transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { border-color: var(--cy-500); color: var(--cy-200); background: var(--ink-800); }
.btn--primary { background: var(--or-500); border-color: var(--or-500); color: var(--ink-900); font-weight: 600; }
.btn--primary:hover { background: var(--or-200); border-color: var(--or-200); color: var(--ink-900); }
.btn--ghost { border-color: var(--cy-500); color: var(--cy-500); }
.btn--ghost:hover { background: var(--ink-800); border-color: var(--cy-500); color: var(--cy-200); }
.btn--quiet { border-color: var(--ink-600); color: var(--gry-500); }
.btn--quiet:hover { color: var(--gry-300); border-color: var(--gry-500); }

/* ---------- 面包屑 ---------- */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 16px 0 0;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--gry-500);
}
.breadcrumb a { color: var(--gry-300); border-bottom: 1px solid transparent; }
.breadcrumb a:hover { color: var(--cy-200); border-bottom-color: var(--cy-500); }
.breadcrumb li:not(:last-child)::after { content: '/'; margin-left: 8px; color: var(--ink-600); }

/* ---------- 折叠索引 ---------- */
.index-rail { border: var(--line-1); background: var(--ink-800); }
.index-rail > summary,
.index-group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-bottom: var(--line-1);
  font-family: var(--font-display); font-size: 15px; letter-spacing: 0.04em; color: var(--gry-300);
}
.index-rail > summary::after,
.index-group > summary::after { content: '+'; font-family: var(--font-mono); font-size: 14px; color: var(--cy-500); }
.index-rail[open] > summary::after,
.index-group[open] > summary::after { content: '–'; color: var(--or-500); }
.index-rail__list a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 20px; border-bottom: var(--line-1);
  font-size: 14px; color: var(--gry-300);
}
.index-rail__list a:hover { background: var(--ink-900); color: var(--cy-200); border-left: 2px solid var(--cy-500); }
.index-rail__list li:last-child a { border-bottom: 0; }
.index-group { border-bottom: var(--line-1); }
.index-group:last-child { border-bottom: 0; }
.index-group > summary { border-bottom: 0; font-size: 14px; }

/* ---------- 卡片与数据 ---------- */
.card { position: relative; border: var(--line-1); background: var(--ink-800); padding: 18px; }
.card__coord {
  display: inline-block; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--cy-500);
}
.card__title { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--gry-300); }
.card p { font-size: 14px; color: var(--gry-500); margin-top: 6px; }
.card--link { display: block; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.card--link:hover { border-color: var(--cy-500); }
.card--link:hover .card__title { color: var(--cy-200); }
.card--signal { border-left: 2px solid var(--or-500); }

.stat { display: flex; flex-direction: column; gap: 4px; }
.stat__num {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 26px; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; color: var(--cy-200);
}
.stat__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--gry-500); }
.stat--signal .stat__num { color: var(--or-500); }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; border: var(--line-1); background: var(--ink-800); }
.data-table { width: 100%; font-size: 14px; }
.data-table th, .data-table td {
  padding: 10px 14px; text-align: left; white-space: nowrap; border-bottom: var(--line-1);
}
.data-table thead th {
  font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.08em;
  color: var(--gry-500); background: var(--ink-900);
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr td:first-child { border-left: 2px solid transparent; }
.data-table tbody tr:hover { background: rgba(6, 18, 15, 0.7); }
.data-table td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--cy-200); }
.data-table tr.is-current td { background: rgba(15, 227, 200, 0.07); }
.data-table tr.is-current td:first-child { border-left-color: var(--cy-500); }

/* ---------- 时间轴 ---------- */
.timeline { display: flex; border: var(--line-1); background: var(--ink-800); overflow-x: auto; }
.timeline__item { position: relative; flex: 1 0 120px; padding: 12px 14px; border-right: var(--line-1); }
.timeline__item:last-child { border-right: 0; }
.timeline__time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--gry-500); }
.timeline__item.is-current::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--or-500); }
.timeline__item.is-current .timeline__time { color: var(--or-200); }

/* ---------- 标签与说明 ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border: var(--line-1);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--gry-500);
}
.tag--live { border-color: var(--cy-500); color: var(--cy-500); }
.tag--signal { border-color: var(--or-500); color: var(--or-200); }
.tag--revised { border-color: var(--clay-500); color: var(--clay-500); }

.note {
  background: var(--paper-100); color: var(--ink-900);
  border: 1px solid var(--paper-100); padding: 16px 18px;
  font-size: 14px; line-height: 1.7;
}
.note__label {
  display: block; margin-bottom: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--clay-500);
}
.note a { color: var(--ink-900); border-bottom: 1px solid var(--or-500); }

/* ---------- 图片容器（页面阶段放置占位图） ---------- */
.media {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9;
  border: var(--line-1);
  background-color: var(--ink-800);
  background-image:
    linear-gradient(to right, rgba(20, 51, 42, 0.9) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 51, 42, 0.6) 1px, transparent 1px);
  background-size: 40px 40px;
  overflow: hidden;
}
.media > img, .media > picture > img, .media > svg { width: 100%; height: 100%; object-fit: cover; }
.media--wide { aspect-ratio: 21 / 9; }
.media--square { aspect-ratio: 1 / 1; }
.media--tall { aspect-ratio: 3 / 4; }
.media__cap {
  margin-top: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--gry-500);
}

/* ---------- 页脚 ---------- */
.site-footer {
  position: relative;
  margin-top: 56px;
  background: var(--ink-800);
  border-top: var(--line-1);
}
.site-footer::before { content: ''; position: absolute; top: 0; left: 0; width: 120px; height: 2px; background: var(--cy-500); }
.footer__inner { padding-top: 40px; padding-bottom: 24px; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.6fr;
  gap: 28px 32px;
  align-items: start;
}
.footer__mark { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: 0.06em; color: var(--gry-300); }
.footer__abbr { margin-top: 2px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--cy-500); }
.footer__desc { margin-top: 12px; max-width: 30ch; font-size: 14px; line-height: 1.7; color: var(--gry-500); }
.footer__cta { margin-top: 16px; }
.footer__title {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px; margin-bottom: 12px; border-bottom: var(--line-1);
  font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; color: var(--gry-300);
}
.footer__coord { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--or-500); }
.footer__list { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.footer__list a { color: var(--gry-500); border-bottom: 1px solid transparent; }
.footer__list a:hover { color: var(--cy-200); border-bottom-color: var(--cy-500); }
.footer__list--plain li { font-size: 13px; line-height: 1.7; color: var(--gry-500); }
.footer__list--plain a { border-bottom-color: var(--ink-600); }
.footer__key { margin-right: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--cy-500); }
.copy-btn {
  margin-left: 8px; padding: 2px 7px; border: var(--line-1);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--gry-500);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.copy-btn:hover { border-color: var(--cy-500); color: var(--cy-200); }
.copy-btn[data-copied] { border-color: var(--or-500); color: var(--or-200); }

.footer__legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
  margin-top: 32px; padding-top: 16px; border-top: var(--line-1);
  font-size: 12px; color: var(--gry-500);
}
.legal__icp { font-family: var(--font-mono); letter-spacing: 0.04em; }
.legal__note { max-width: 60ch; }
.legal__year { margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
  :root { --rail-w: 56px; }
  .brand-rail__cn { font-size: 14px; letter-spacing: 0.26em; }
  .brand-rail__abbr { font-size: 11px; letter-spacing: 0.1em; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 1100px) {
  .nav__quick { display: flex; }
  .nav-toggle { display: flex; }
  .nav__list { display: none; }
  .site-nav[data-open] .nav__list {
    display: flex; flex-direction: column;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--ink-800);
    border-bottom: 2px solid var(--cy-500);
  }
  .site-nav[data-open] .nav__link {
    height: 48px; padding: 0 20px;
    border-left: 2px solid transparent; border-right: 0; border-top: var(--line-1);
  }
  .layout, .layout--tools { grid-template-columns: 1fr; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  :root { --rail-w: 44px; --nav-h: 48px; --gap: 16px; }
  body { font-size: 15px; }
  .statusbar { padding: 0 10px; }
  .statusbar__text--dim { display: none; }
  .brand-rail__cn { font-size: 12px; letter-spacing: 0.2em; }
  .brand-rail__abbr { font-size: 10px; letter-spacing: 0.08em; }
  .quick__link { padding: 0 10px; font-size: 13px; }
  .wrap { padding: 0 16px; }
  .section { padding: 28px 0; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__brand { grid-column: auto; }
  .legal__year { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}