/* ==========================================================================
   OB赛场 · 共享样式表 /assets/site.css
   设计逻辑：技术蓝图网格 × 夜光球场仪表盘
   ========================================================================== */

/* --- 01 设计令牌 -------------------------------------------------------- */
:root{
  --ink-900:#06231E;
  --ink-800:#082B25;
  --ink-700:#0B3A31;
  --indigo:#3A2E7A;
  --wine:#7A1F3D;
  --cyan:#1FE0C5;
  --blue:#0F8FA6;
  --shot:#FF5A2B;
  --amber:#FFC24B;
  --paper:#F3FBF8;
  --text:#D8E8E3;
  --muted:#9FB6B0;

  --line:rgba(31,224,197,.20);
  --line-soft:rgba(216,232,227,.10);
  --line-hard:rgba(216,232,227,.22);

  --rail-w:88px;
  --rail-open:236px;
  --topbar-h:64px;
  --wrap:1240px;
  --r-lg:26px;
  --r-md:16px;
  --r-sm:10px;

  --font-display:"Barlow Condensed","Noto Sans SC","Source Han Sans SC",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-body:"Noto Sans SC","Source Han Sans SC",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;

  --t:200ms;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* --- 02 基础重置 -------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background-color:var(--ink-900);
  background-image:
    radial-gradient(1180px 720px at 88% -12%, rgba(58,46,122,.52), transparent 62%),
    radial-gradient(900px 620px at 2% 2%, rgba(31,224,197,.13), transparent 58%),
    linear-gradient(180deg,#06231E 0%,#072C25 50%,#051E1A 100%);
  background-attachment:fixed;
}

body{
  margin:0;
  min-height:100vh;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.78;
  color:var(--text);
  background:transparent;
  overflow-x:hidden;
}

/* 蓝图坐标网格 */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(216,232,227,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(216,232,227,.05) 1px, transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(140% 100% at 50% 0%, #000 16%, transparent 74%);
  mask-image:radial-gradient(140% 100% at 50% 0%, #000 16%, transparent 74%);
}

h1,h2,h3,h4,h5,h6{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.01em;
  color:var(--paper);
}
h1{ font-size:clamp(30px,5.6vw,68px) }
h2{ font-size:clamp(24px,3.2vw,38px) }
h3{ font-size:clamp(19px,1.9vw,25px); line-height:1.32 }
h4{ font-size:18px }

p,figure,blockquote{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
img,svg,video{ display:block; max-width:100% }
button,input,select,textarea{ font:inherit; color:inherit }
button{ background:none; border:0; padding:0; cursor:pointer }
a{ color:var(--cyan); text-decoration:none; transition:color var(--t) var(--ease) }
a:hover{ color:var(--paper) }
table{ border-collapse:collapse; width:100% }
strong{ color:var(--paper); font-weight:700 }
::selection{ background:rgba(31,224,197,.32); color:var(--paper) }

/* 轨道偏移：桌面留出侧边轨道，移动端留出顶栏 */
@media (min-width:1024px){
  body{ padding-left:var(--rail-w) }
}
@media (max-width:1023px){
  body{ padding-top:var(--topbar-h) }
}

/* --- 03 工具类 ---------------------------------------------------------- */
.container{
  width:min(100% - 40px, var(--wrap));
  margin-inline:auto;
}
@media (max-width:640px){
  .container{ width:min(100% - 28px, var(--wrap)) }
}

.mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.muted{ color:var(--muted) }
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

.skip-link{
  position:fixed;
  top:10px;
  left:10px;
  z-index:200;
  padding:12px 20px;
  border-radius:12px;
  background:var(--cyan);
  color:#04231E;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.06em;
  transform:translateY(-200%);
  transition:transform var(--t) var(--ease);
}
.skip-link:focus{ transform:none; color:#04231E }

/* 滚动进度条 */
.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  z-index:120;
  width:100%;
  height:3px;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--cyan),var(--amber),var(--shot));
  pointer-events:none;
}
@media (min-width:1024px){
  .scroll-progress{ left:var(--rail-w) }
}

/* 显现协议 */
[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 520ms var(--ease), transform 520ms var(--ease);
}
[data-reveal][data-revealed]{
  opacity:1;
  transform:none;
}

/* --- 04 按钮 ------------------------------------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:46px;
  padding:0 22px;
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:16px;
  letter-spacing:.05em;
  line-height:1;
  cursor:pointer;
  transition:transform var(--t) var(--ease), background var(--t) var(--ease),
             color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.btn:active{ transform:translateY(1px) }
.btn--cta{
  background:linear-gradient(135deg,var(--shot),#FF8E4D);
  color:#2A0F05;
  box-shadow:0 12px 30px rgba(255,90,43,.28);
}
.btn--cta:hover{
  color:#2A0F05;
  background:linear-gradient(135deg,#FF6A3D,var(--amber));
}
.btn--ghost{
  border-color:var(--line);
  background:rgba(11,58,49,.5);
  color:var(--paper);
}
.btn--ghost:hover{
  border-color:var(--cyan);
  color:var(--cyan);
}

/* --- 05 头部：侧边轨道 -------------------------------------------------- */
.rail{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:80;
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 14px;
  background:linear-gradient(180deg, rgba(8,43,37,.98), rgba(6,35,30,.94));
  border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

.rail__brand{
  display:flex;
  margin-right:auto;
  min-width:0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:inherit;
  min-width:0;
}
.brand:hover{ color:inherit }
.brand__mark{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:13px;
  background:linear-gradient(145deg,var(--cyan),var(--blue));
  color:#04231E;
  font-family:var(--font-display);
  font-weight:900;
  font-size:17px;
  letter-spacing:.02em;
  box-shadow:0 0 0 1px rgba(31,224,197,.42), 0 10px 26px rgba(31,224,197,.2);
}
.brand__text{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.brand__name{
  font-family:var(--font-display);
  font-weight:800;
  font-size:14px;
  letter-spacing:.09em;
  line-height:1.2;
  color:var(--paper);
  white-space:nowrap;
}
.brand__note{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.05em;
  line-height:1.3;
  color:var(--muted);
  white-space:nowrap;
}

.rail__status{
  display:none;
  align-items:center;
  gap:9px;
  min-width:0;
}
.status-dot{
  flex:0 0 auto;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--shot);
  box-shadow:0 0 0 4px rgba(255,90,43,.16);
  animation:obPulse 1.6s var(--ease) infinite;
}
@keyframes obPulse{
  0%{ transform:scale(1); opacity:1 }
  70%{ transform:scale(1.4); opacity:.55 }
  100%{ transform:scale(1); opacity:1 }
}
.rail__status-text{
  font-size:10px;
  line-height:1.5;
  color:var(--muted);
  white-space:nowrap;
  max-width:0;
  overflow:hidden;
  opacity:0;
  transition:max-width var(--t) var(--ease), opacity var(--t) var(--ease);
}

.rail__toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  transition:border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.rail__toggle:hover{ border-color:var(--cyan); background:rgba(31,224,197,.08) }
.rail__toggle-bars{
  display:grid;
  gap:4px;
  width:16px;
}
.rail__toggle-bars i{
  display:block;
  height:2px;
  border-radius:2px;
  background:var(--cyan);
  transition:transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.rail__toggle[aria-expanded="true"] .rail__toggle-bars i:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}
.rail__toggle[aria-expanded="true"] .rail__toggle-bars i:nth-child(2){
  opacity:0;
}
.rail__toggle[aria-expanded="true"] .rail__toggle-bars i:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}
.rail__toggle-label{ white-space:nowrap }

/* 导航（移动端 = 全屏抽屉） */
.nav{
  position:fixed;
  top:var(--topbar-h);
  left:0;
  right:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:22px 20px 34px;
  overflow-y:auto;
  background:linear-gradient(180deg, rgba(6,35,30,.99), rgba(5,28,24,.98));
  border-top:1px solid var(--line-soft);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-12px);
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease),
             visibility var(--t) linear;
}
.nav[data-open]{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}

.nav__hint{
  margin:0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.24em;
  color:var(--blue);
  text-transform:uppercase;
  transition:opacity var(--t) var(--ease);
}
.nav__list{
  display:grid;
  gap:8px;
}
.nav__link{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:52px;
  padding:0 16px;
  border:1px solid rgba(216,232,227,.08);
  border-radius:14px;
  background:rgba(11,58,49,.5);
  color:var(--muted);
  transition:color var(--t) var(--ease), background var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.nav__link:hover{
  color:var(--paper);
  border-color:var(--line);
  background:rgba(31,224,197,.08);
}
.nav__link[aria-current="page"]{
  color:var(--paper);
  border-color:rgba(31,224,197,.42);
  background:linear-gradient(90deg, rgba(31,224,197,.16), rgba(11,58,49,.4));
}
.nav__idx{
  flex:0 0 auto;
  width:24px;
  font-size:12px;
  color:var(--amber);
}
.nav__link[aria-current="page"] .nav__idx{ color:var(--cyan) }
.nav__label{
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
  letter-spacing:.02em;
  color:inherit;
  white-space:nowrap;
  opacity:1;
  transition:opacity var(--t) var(--ease), max-width var(--t) var(--ease);
}
.nav__foot{
  margin-top:auto;
  display:grid;
  gap:12px;
  padding-top:20px;
  border-top:1px solid var(--line-soft);
}
.nav__tagline{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--muted);
}

/* 轨道内紧凑 CTA */
.rail-cta{
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  min-height:48px;
}
.rail-cta__glyph{ font-size:16px; line-height:1 }
.rail-cta__text{
  white-space:nowrap;
  opacity:1;
  transition:opacity var(--t) var(--ease);
}

/* 桌面端：竖排轨道 */
@media (min-width:1024px){
  .rail{
    top:0;
    bottom:0;
    right:auto;
    width:var(--rail-w);
    height:auto;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:22px 0 20px;
    border-bottom:0;
    border-right:1px solid var(--line);
    overflow:hidden;
    transition:width var(--t) var(--ease);
  }
  .rail:hover,
  .rail:focus-within{ width:var(--rail-open) }

  .rail__brand{
    margin:0;
    padding:0 16px 20px;
  }
  .rail__brand .brand{
    flex-direction:column;
    align-items:flex-start;
    gap:11px;
  }
  .brand__note{ opacity:0; transition:opacity var(--t) var(--ease) }
  .rail:hover .brand__note,
  .rail:focus-within .brand__note{ opacity:1 }

  .rail__status{
    display:flex;
    padding:0 16px 16px;
  }
  .rail:hover .rail__status-text,
  .rail:focus-within .rail__status-text{
    max-width:180px;
    opacity:1;
  }

  .rail__toggle{ display:none }

  .nav{
    position:static;
    flex:1 1 auto;
    min-height:0;
    gap:0;
    padding:18px 0 0;
    border-top:1px solid var(--line-soft);
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:none;
    background:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    transition:none;
  }
  .nav::-webkit-scrollbar{ width:0; height:0 }
  .nav__hint{
    padding:0 16px;
    margin-bottom:14px;
    opacity:0;
    transition:opacity var(--t) var(--ease);
  }
  .rail:hover .nav__hint,
  .rail:focus-within .nav__hint{ opacity:1 }

  .nav__list{ display:block }
  .nav__link{
    gap:12px;
    min-height:46px;
    padding:10px 16px;
    border:0;
    border-radius:0;
    background:none;
  }
  .nav__link::after{
    content:"";
    flex:1 1 auto;
    min-width:6px;
    height:1px;
    background:linear-gradient(90deg, rgba(216,232,227,.2), transparent);
  }
  .nav__link:hover{
    border:0;
    background:rgba(31,224,197,.06);
  }
  .nav__link[aria-current="page"]{
    border:0;
    background:linear-gradient(90deg, rgba(31,224,197,.14), transparent 78%);
  }
  .nav__link[aria-current="page"]::before{
    content:"";
    position:absolute;
    left:0;
    top:9px;
    bottom:9px;
    width:3px;
    border-radius:0 3px 3px 0;
    background:var(--cyan);
    box-shadow:0 0 14px rgba(31,224,197,.65);
  }
  .nav__label{
    max-width:0;
    overflow:hidden;
    opacity:0;
    transform:translateX(-6px);
    transition:opacity var(--t) var(--ease), transform var(--t) var(--ease),
               max-width var(--t) var(--ease);
  }
  .rail:hover .nav__label,
  .rail:focus-within .nav__label{
    max-width:190px;
    opacity:1;
    transform:none;
  }

  .nav__foot{
    margin-top:auto;
    padding:18px 16px 0;
  }
  .rail-cta{ justify-content:flex-start }
  .rail-cta__text{
    opacity:0;
    max-width:0;
    overflow:hidden;
    display:inline-block;
  }
  .rail:hover .rail-cta__text,
  .rail:focus-within .rail-cta__text{
    opacity:1;
    max-width:170px;
  }
}

/* --- 06 页脚 ------------------------------------------------------------ */
.site-footer{
  position:relative;
  z-index:2;
  margin-top:clamp(56px,8vw,116px);
  padding:clamp(40px,6vw,74px) 0 26px;
  background:
    radial-gradient(760px 360px at 8% 0%, rgba(122,31,61,.34), transparent 66%),
    radial-gradient(720px 340px at 94% 10%, rgba(58,46,122,.42), transparent 68%),
    linear-gradient(180deg, rgba(8,43,37,.92), rgba(5,28,24,.98));
  border-top:1px solid var(--line);
}
.site-footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:12px;
  pointer-events:none;
  background-image:repeating-linear-gradient(90deg, rgba(31,224,197,.34) 0 1px, transparent 1px 44px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);
  mask-image:linear-gradient(180deg,#000,transparent);
}
.footer__inner{ display:grid; gap:clamp(28px,4vw,50px) }

.footer__top{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(26px,3.4vw,44px);
}
@media (min-width:768px){
  .footer__top{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .footer__contact{ grid-column:1 / -1 }
}
@media (min-width:1080px){
  .footer__top{ grid-template-columns:1.05fr 1.7fr 1.15fr }
  .footer__contact{ grid-column:auto }
}

.footer__brand-link{
  display:flex;
  align-items:center;
  gap:14px;
}
.footer__slogan{
  margin-top:16px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(21px,2.4vw,26px);
  letter-spacing:.02em;
  color:var(--paper);
}
.footer__update{
  margin-top:8px;
  max-width:24ch;
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
}

.footer__cols{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
}
.footer__col-title{
  margin-bottom:14px;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  line-height:1.4;
  letter-spacing:.22em;
  color:var(--amber);
  text-transform:uppercase;
}
.footer__links{ display:grid; gap:2px }
.footer__link{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:6px 0;
  font-size:15px;
  color:var(--text);
  border-bottom:1px dashed rgba(216,232,227,.08);
  transition:color var(--t) var(--ease), padding-left var(--t) var(--ease);
}
.footer__link::before{
  content:"";
  flex:0 0 auto;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(31,224,197,.38);
  transition:background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.footer__link:hover{
  color:var(--cyan);
  padding-left:5px;
}
.footer__link:hover::before{
  background:var(--cyan);
  box-shadow:0 0 12px rgba(31,224,197,.8);
}

.contact-list{ display:grid; gap:12px }
.contact-list__item{
  display:grid;
  gap:5px;
  padding:14px 16px;
  border:1px solid rgba(216,232,227,.08);
  border-radius:var(--r-md);
  background:rgba(11,58,49,.5);
}
.contact-list__key{
  font-size:10px;
  letter-spacing:.22em;
  color:var(--blue);
}
.contact-list__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.contact-list__val{
  font-size:15px;
  color:var(--paper);
  word-break:break-all;
}
.copy-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(31,224,197,.06);
  color:var(--cyan);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  transition:background var(--t) var(--ease), color var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.copy-btn:hover{
  background:rgba(31,224,197,.16);
  border-color:var(--cyan);
}
.copy-btn[data-copied]{
  background:var(--cyan);
  border-color:var(--cyan);
  color:#04231E;
}
.copy-status{
  display:block;
  margin-top:10px;
  min-height:18px;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--amber);
}
.footer__note{
  margin-top:12px;
  font-size:13px;
  line-height:1.75;
  color:var(--muted);
}

.footer__bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 26px;
  padding-top:22px;
  border-top:1px solid var(--line-soft);
}
.footer__legal{
  font-size:13px;
  color:var(--muted);
}
.footer__meta{
  font-size:11px;
  letter-spacing:.12em;
  color:var(--blue);
}

/* --- 07 页面级通用组件 -------------------------------------------------- */
.prose{
  display:grid;
  gap:14px;
  max-width:34em;
  font-size:16.5px;
}
.prose h3{ margin-top:8px }

.section{ margin-top:clamp(48px,7vw,100px) }
.section__head{
  display:grid;
  gap:14px;
  max-width:62ch;
  margin-bottom:clamp(22px,3vw,34px);
}
.section__index{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.24em;
  color:var(--amber);
  text-transform:uppercase;
}
.section__index::before{
  content:"";
  width:34px;
  height:1px;
  background:linear-gradient(90deg, var(--amber), transparent);
}
.section__title{ margin:0 }
.section__lead{
  max-width:56ch;
  font-size:16px;
  color:var(--muted);
}

.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding-top:24px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--muted);
}
.breadcrumbs__item{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.breadcrumbs__sep{ color:rgba(159,182,176,.5) }
.breadcrumbs a{ color:var(--muted) }
.breadcrumbs a:hover{ color:var(--cyan) }
.breadcrumbs [aria-current="page"]{ color:var(--paper) }

.grid{ display:grid; gap:clamp(18px,2.4vw,30px) }
@media (min-width:900px){
  .grid--7-5{ grid-template-columns:minmax(0,7fr) minmax(0,5fr) }
  .grid--8-4{ grid-template-columns:minmax(0,8fr) minmax(0,4fr) }
  .grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)) }
}

.panel{
  position:relative;
  padding:clamp(20px,2.6vw,34px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(11,58,49,.78), rgba(6,35,30,.62));
  overflow:hidden;
}
.panel--indigo{
  background:linear-gradient(160deg, rgba(58,46,122,.58), rgba(6,35,30,.72));
  border-color:rgba(58,46,122,.68);
}
.panel--wine{
  background:linear-gradient(160deg, rgba(122,31,61,.52), rgba(6,35,30,.72));
  border-color:rgba(122,31,61,.62);
}
.panel--paper{
  background:linear-gradient(160deg, var(--paper), #E1F1EC);
  border-color:rgba(6,35,30,.14);
  color:#0B2A24;
}
.panel--paper h2,
.panel--paper h3,
.panel--paper h4{ color:#0B2A24 }
.panel--paper .muted{ color:#4A6B63 }

.card{
  display:grid;
  gap:10px;
  align-content:start;
  padding:22px;
  border:1px solid rgba(216,232,227,.09);
  border-radius:20px;
  background:rgba(11,58,49,.5);
  transition:transform var(--t) var(--ease), border-color var(--t) var(--ease);
}
.card:hover{
  transform:translateY(-3px);
  border-color:rgba(31,224,197,.4);
}
.card__title{ font-size:19px }
.card__body{
  font-size:15px;
  color:var(--muted);
}

.stat{ display:grid; gap:8px }
.stat__value{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(30px,4.6vw,58px);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--cyan);
}
.stat__value--shot{ color:var(--shot) }
.stat__label{
  font-size:13px;
  letter-spacing:.04em;
  color:var(--muted);
}

.tag-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border:1px solid rgba(31,224,197,.28);
  border-radius:999px;
  background:rgba(31,224,197,.1);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
}
.tag--shot{
  background:rgba(255,90,43,.12);
  border-color:rgba(255,90,43,.34);
  color:#FFD5C6;
}
.tag--amber{
  background:rgba(255,194,75,.12);
  border-color:rgba(255,194,75,.34);
  color:#FFE6B8;
}

.table-scroll{
  overflow-x:auto;
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
}
.data-table{
  min-width:520px;
  font-size:15px;
}
.data-table th{
  padding:13px 16px;
  background:rgba(6,35,30,.72);
  font-family:var(--font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:.14em;
  text-align:left;
  white-space:nowrap;
  color:var(--amber);
}
.data-table td{
  padding:13px 16px;
  border-top:1px solid rgba(216,232,227,.08);
  color:var(--text);
}
.data-table tbody tr:hover td{ background:rgba(31,224,197,.05) }
.data-table .num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  text-align:right;
}

.disclosure{
  border:1px solid rgba(216,232,227,.1);
  border-radius:18px;
  background:rgba(11,58,49,.42);
  overflow:hidden;
}
.disclosure + .disclosure{ margin-top:10px }
.disclosure__trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  min-height:56px;
  padding:14px 20px;
  text-align:left;
  font-family:var(--font-display);
  font-weight:700;
  font-size:18px;
  color:var(--paper);
  transition:background var(--t) var(--ease);
}
.disclosure__trigger:hover{ background:rgba(31,224,197,.07) }
.disclosure__icon{
  position:relative;
  flex:0 0 auto;
  width:20px;
  height:20px;
  border:1px solid rgba(31,224,197,.5);
  border-radius:50%;
}
.disclosure__icon::before,
.disclosure__icon::after{
  content:"";
  position:absolute;
  left:4px;
  right:4px;
  top:50%;
  height:1.5px;
  background:var(--cyan);
  transform:translateY(-50%);
  transition:transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.disclosure__icon::after{ transform:translateY(-50%) rotate(90deg) }
.disclosure__trigger[aria-expanded="true"] .disclosure__icon::after{
  transform:translateY(-50%) rotate(0deg);
  opacity:.28;
}
.disclosure__panel{
  padding:0 20px 20px;
  font-size:15.5px;
  color:var(--text);
  overflow:hidden;
  transition:height 220ms var(--ease), opacity 200ms var(--ease);
}
.disclosure__panel[hidden]{ display:none }

.media{
  position:relative;
  overflow:hidden;
  aspect-ratio:16 / 10;
  border:1px solid var(--line-soft);
  border-radius:24px;
  background:linear-gradient(150deg, rgba(11,58,49,.9), rgba(6,35,30,.9));
}
.media--wide{ aspect-ratio:21 / 9 }
.media--tall{ aspect-ratio:4 / 5 }
.media--square{ aspect-ratio:1 / 1 }
.media__img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.05) contrast(1.06);
}
.media__cap{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:16px 18px 14px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--paper);
  background:linear-gradient(180deg, transparent, rgba(4,20,17,.9));
}
.media__badge{
  position:absolute;
  top:14px;
  left:14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(4,20,17,.72);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
}

.toc{ display:grid; gap:4px }
@media (min-width:1024px){
  .toc{ position:sticky; top:26px }
}
.toc__title{
  margin-bottom:8px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.22em;
  color:var(--amber);
  text-transform:uppercase;
}
.toc__link{
  display:flex;
  align-items:baseline;
  gap:10px;
  min-height:40px;
  padding:8px 12px;
  border-left:2px solid transparent;
  color:var(--muted);
  font-size:15px;
  transition:color var(--t) var(--ease), border-color var(--t) var(--ease),
             background var(--t) var(--ease);
}
.toc__link:hover{ color:var(--paper) }
.toc__link[data-active]{
  color:var(--paper);
  border-left-color:var(--cyan);
  background:linear-gradient(90deg, rgba(31,224,197,.1), transparent);
}

/* --- 08 无障碍与降级 ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1; transform:none }
  .status-dot{ animation:none }
}