/* ============================================================
   押注赛场 · 共享样式 /assets/site.css
   暗场聚光：深墨绿底 · 荧光绿状态 · 琥珀橙数据
   ============================================================ */

/* ---------- 1. 变量 ---------- */
:root{
  --ink:#0B1F17;
  --char:#121516;
  --moss:#26352D;
  --paper:#F3F6EE;
  --turf:#B8FF3D;
  --amber:#FFB340;
  --steel:#8FA6B2;
  --pine:#123B2E;
  --cyan:#4DE3C1;
  --sand:#FFE0A8;

  --rail-width:300px;
  --rail-pad:26px;
  --header-h:64px;

  --font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
  --font-cond:"Oswald","Barlow Condensed","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono","Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --radius-sm:12px;
  --radius-md:20px;
  --radius-lg:30px;
  --radius-pill:999px;

  --line:rgba(243,246,238,.14);
  --line-soft:rgba(243,246,238,.08);
  --wrap:1240px;
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100%;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,dl,dd{ margin:0; padding:0; }
ul,ol{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
img,svg,video{ display:block; max-width:100%; }
table{ border-collapse:collapse; }
strong{ font-weight:600; }

::selection{ background:var(--turf); color:var(--ink); }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- 3. 基础排版工具 ---------- */
.content-wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(18px,3.4vw,48px);
}

.section{
  padding-block:clamp(52px,6.5vw,96px);
}

.eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.4;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cyan);
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border-radius:var(--radius-pill);
  background:var(--pine);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.5;
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}

.tag--turf{ background:rgba(184,255,61,.16); color:var(--turf); }
.tag--amber{ background:rgba(255,179,64,.16); color:var(--amber); }

/* ---------- 4. 跳转链接 ---------- */
.skip-link{
  position:fixed;
  top:12px;
  left:12px;
  z-index:300;
  padding:10px 18px;
  border-radius:var(--radius-pill);
  background:var(--turf);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.06em;
  transform:translateY(-180%);
  transition:transform .2s ease;
}

.skip-link:focus,
.skip-link:focus-visible{
  transform:translateY(0);
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

/* ---------- 5. 共享按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:11px 20px;
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:.06em;
  text-align:center;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.btn--primary{
  background:var(--turf);
  color:#0A1B12;
  box-shadow:0 8px 22px -12px rgba(184,255,61,.9);
}

.btn--primary:hover{ background:#CBFF6B; transform:translateY(-1px); }

.btn--ghost{
  background:transparent;
  border-color:rgba(243,246,238,.26);
  color:rgba(243,246,238,.88);
}

.btn--ghost:hover{
  border-color:var(--cyan);
  color:var(--cyan);
}

.btn--amber{
  background:var(--amber);
  color:#1C1204;
}

.btn--amber:hover{ background:#FFC76E; }

/* ============================================================
   6. 头部 / 侧边轨道
   ============================================================ */
.site-header{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:var(--rail-width);
  z-index:120;
  display:flex;
  flex-direction:column;
  padding:32px var(--rail-pad) 26px;
  background:
    radial-gradient(140% 52% at 0% 0%, rgba(77,227,193,.10), transparent 62%),
    linear-gradient(185deg,#0E241A 0%, #0B1F17 46%, #121516 100%);
  border-right:1px solid var(--line);
}

.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(180deg, transparent 0 21.9%, rgba(184,255,61,.12) 22%, transparent 22.2%),
    radial-gradient(circle at 80% 86%, rgba(255,179,64,.11), transparent 46%);
}

/* 品牌 */
.brand{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}

.brand__mark{
  font-family:var(--font-cond);
  font-size:27px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:.02em;
  color:var(--paper);
}

.brand__line{
  font-family:var(--font-mono);
  font-size:10.5px;
  line-height:1.5;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--steel);
}

/* 抽屉按钮（桌面隐藏） */
.nav-toggle{ display:none; }

.nav-toggle__bars{
  display:flex;
  flex-direction:column;
  gap:4px;
  width:16px;
}

.nav-toggle__bars span{
  display:block;
  height:1.5px;
  width:100%;
  border-radius:2px;
  background:currentColor;
  transition:transform .2s ease, opacity .2s ease;
}

.nav-toggle__text{
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1;
  letter-spacing:.18em;
}

/* 导航 */
.site-nav{
  position:relative;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
  padding-top:24px;
  overflow-y:auto;
  overscroll-behavior:contain;
}

.rail-nav-list{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.rail-link{
  position:relative;
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:10px 10px 10px 8px;
  border-radius:14px;
  color:rgba(243,246,238,.70);
  transition:color .18s ease, background-color .18s ease;
}

.rail-link__idx{
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.4;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  color:var(--steel);
  transition:color .18s ease;
}

.rail-link__label{
  font-size:14.5px;
  line-height:1.45;
  letter-spacing:.01em;
}

.rail-link:hover:not([aria-current="page"]){
  color:var(--paper);
  background-color:rgba(18,59,46,.68);
}

.rail-link[aria-current="page"]{
  color:var(--turf);
  background-image:linear-gradient(90deg, rgba(184,255,61,.17), rgba(184,255,61,0) 88%);
}

.rail-link[aria-current="page"] .rail-link__idx{ color:var(--amber); }

.rail-link[aria-current="page"]::before{
  content:"";
  position:absolute;
  left:-1px;
  top:50%;
  width:3px;
  height:18px;
  border-radius:3px;
  background:var(--turf);
  transform:translateY(-50%);
  box-shadow:0 0 12px rgba(184,255,61,.7);
}

/* 轨道刻度装饰 */
.rail-ticks{
  flex:1 1 auto;
  min-height:26px;
  margin:16px 2px;
  background-image:repeating-linear-gradient(180deg, rgba(143,166,178,.26) 0 1px, transparent 1px 14px);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}

/* 轨道底部行动区 */
.nav-actions{
  display:flex;
  flex-direction:column;
  gap:9px;
  padding-top:18px;
  border-top:1px solid var(--line-soft);
}

.nav-actions .btn{ width:100%; }

/* 滚动进度 */
.rail-progress{
  position:absolute;
  top:0;
  right:0;
  width:2px;
  height:100%;
  background:linear-gradient(180deg, var(--turf), var(--cyan));
  transform:scaleY(var(--scroll-progress, 0));
  transform-origin:top center;
  pointer-events:none;
  z-index:5;
}

/* ============================================================
   7. 页脚
   ============================================================ */
.site-footer{
  position:relative;
  padding-top:clamp(44px,6vw,72px);
  padding-bottom:26px;
  background:var(--char);
  color:var(--paper);
  border-top:1px solid var(--line);
  overflow:hidden;
}

.site-footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--turf) 18%, var(--amber) 58%, transparent);
  opacity:.6;
}

.site-footer::after{
  content:"";
  position:absolute;
  top:-140px;
  right:-140px;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(77,227,193,.13), transparent 68%);
  pointer-events:none;
}

.footer-inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(18px,3.4vw,48px);
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:36px 26px;
  align-items:start;
}

.footer-brand{
  grid-column:span 4;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer-brand__mark{
  font-family:var(--font-cond);
  font-size:clamp(22px,2.4vw,28px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:.04em;
  color:var(--paper);
}

.footer-brand__mark:hover{ color:var(--turf); }

.footer-brand__line{
  font-family:var(--font-mono);
  font-size:10.5px;
  line-height:1.6;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cyan);
}

.footer-summary{
  max-width:32ch;
  font-size:14px;
  line-height:1.75;
  color:rgba(243,246,238,.66);
}

.footer-rule{
  margin-top:4px;
  width:64px;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg, var(--turf), var(--amber));
}

.footer-nav{
  grid-column:span 5;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.footer-group{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer-group__title{
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:400;
  line-height:1.6;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--steel);
}

.footer-list{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.footer-link{
  display:inline-block;
  padding-bottom:1px;
  font-size:14px;
  line-height:1.5;
  color:rgba(243,246,238,.78);
  border-bottom:1px solid transparent;
  transition:color .16s ease, border-color .16s ease;
}

.footer-link:hover{
  color:var(--turf);
  border-bottom-color:rgba(184,255,61,.5);
}

.footer-contact{
  grid-column:span 3;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer-contact__list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-contact__row{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.footer-contact__label{
  font-family:var(--font-mono);
  font-size:10px;
  line-height:1.6;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--steel);
}

.footer-contact__value{
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:1.65;
  color:var(--paper);
  word-break:break-word;
  font-variant-numeric:tabular-nums;
}

.footer-note{
  padding-left:10px;
  border-left:2px solid rgba(255,179,64,.45);
  font-size:11.5px;
  line-height:1.75;
  color:rgba(243,246,238,.52);
}

.footer-base{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--wrap);
  margin:clamp(34px,4vw,52px) auto 0;
  padding:18px clamp(18px,3.4vw,48px) 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 20px;
  border-top:1px solid var(--line-soft);
}

.footer-copy,
.footer-icp{
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.7;
  letter-spacing:.06em;
  color:rgba(243,246,238,.5);
  font-variant-numeric:tabular-nums;
}

.footer-copy [data-year]{ color:var(--amber); }

/* ============================================================
   8. 可复用图片容器
   ============================================================ */
.img-frame{
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg,#1B4B39,#0E241A);
  isolation:isolate;
}

.img-frame > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.img-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(11,31,23,0) 42%, rgba(11,31,23,.62) 100%);
}

.img-frame--wide{ aspect-ratio:16 / 9; }
.img-frame--band{ aspect-ratio:21 / 9; }
.img-frame--square{ aspect-ratio:1 / 1; }
.img-frame--tall{ aspect-ratio:3 / 4; }

.img-frame--texture{
  background-image:
    repeating-linear-gradient(135deg, rgba(184,255,61,.10) 0 2px, transparent 2px 14px),
    linear-gradient(160deg,#1B4B39,#0E241A);
}

/* ============================================================
   9. 响应式：桌面轨道 → 平板堆叠 → 移动抽屉
   ============================================================ */
@media (min-width:1024px){
  body{ padding-left:var(--rail-width); }
}

@media (max-width:1023px){
  .site-header{
    position:sticky;
    inset:auto;
    top:0;
    width:100%;
    height:var(--header-h);
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:0 16px;
    background:#0B1F17;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .site-header::before{ display:none; }

  .brand{
    padding-bottom:0;
    border-bottom:0;
    gap:1px;
  }

  .brand__mark{ font-size:17px; letter-spacing:.04em; }
  .brand__line{ font-size:9px; letter-spacing:.16em; }

  .nav-toggle{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:9px 15px 9px 13px;
    border-radius:var(--radius-pill);
    border:1px solid rgba(184,255,61,.45);
    background:rgba(18,59,46,.62);
    color:var(--turf);
    transition:background-color .18s ease, border-color .18s ease, color .18s ease;
  }

  .nav-toggle:hover{
    background:rgba(184,255,61,.14);
    border-color:var(--turf);
  }

  .nav-toggle[aria-expanded="true"]{
    background:var(--turf);
    border-color:var(--turf);
    color:#0A1B12;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child{
    transform:translateY(2.75px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child{
    transform:translateY(-2.75px) rotate(-45deg);
  }

  .site-nav{
    position:fixed;
    top:var(--header-h);
    left:0;
    right:0;
    bottom:0;
    z-index:115;
    padding:22px 18px 36px;
    background:linear-gradient(170deg,#0F2719 0%, #121516 78%);
    border-top:1px solid var(--line-soft);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s linear;
  }

  .site-header[data-open] .site-nav{
    opacity:1;
    visibility:visible;
    transform:none;
  }

  .rail-nav-list{ gap:4px; }

  .rail-link{
    grid-template-columns:34px minmax(0,1fr);
    gap:12px;
    padding:15px 14px;
    border-radius:18px;
  }

  .rail-link__label{ font-size:16.5px; }
  .rail-link__idx{ font-size:12px; }

  .rail-link[aria-current="page"]::before{
    left:0;
    width:3px;
    height:22px;
  }

  .rail-ticks{ display:none; }

  .nav-actions{
    margin-top:auto;
    padding-top:24px;
    gap:10px;
  }

  .nav-actions .btn{
    min-height:48px;
    font-size:14.5px;
  }

  .rail-progress{
    top:auto;
    bottom:-1px;
    left:0;
    right:auto;
    width:100%;
    height:2px;
    transform:scaleX(var(--scroll-progress, 0));
    transform-origin:left center;
  }

  .footer-brand,
  .footer-nav,
  .footer-contact{ grid-column:span 12; }

  .footer-nav{ gap:24px 20px; }
}

@media (max-width:720px){
  .footer-nav{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-base{ flex-direction:column; align-items:flex-start; gap:6px; }
  .footer-contact__value{ font-size:12px; }
}

@media (max-width:430px){
  .rail-link__label{ font-size:15.5px; }
  .btn--primary,
  .btn--ghost{ width:100%; }
}

/* ---------- 10. 减少动效 ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }

  .rail-link:hover:not([aria-current="page"]),
  .btn--primary:hover,
  .btn--amber:hover{ transform:none; }
}