/* ==========================================================================
   3344体育 · 共享站点样式 site.css
   夜场墨绿底板 / 草皮粗边框 / 荧光青柠数据高亮
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root{
  --ink:#0B3D2E;
  --ink-deep:#072A20;
  --turf:#14513E;
  --lime:#C6FF3D;
  --lime-soft:#E4FF9E;
  --paper:#F6F4EC;
  --carbon:#14171A;
  --mist:#6E8A7C;
  --sand:#DCD8C8;
  --alert:#FF6B45;

  --font-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"DejaVu Sans Mono","Roboto Mono","Courier New",monospace;

  --wrap:1320px;
  --gutter:clamp(18px,4vw,56px);

  --step-s:8px;
  --step-m:24px;
  --step-l:48px;
  --step-xl:120px;

  --line:2px solid var(--turf);
  --shadow-brutal:6px 6px 0 rgba(3,18,13,.95);
  --ease:160ms ease;
  --head-offset:112px;
}

/* ---------- 2. 重置 ---------- */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--head-offset);
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-sans);
  font-size:17px;
  font-weight:400;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,pre{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
table{border-collapse:collapse;border-spacing:0;width:100%}
img,svg,video{display:block;max-width:100%}
input,select,textarea{font:inherit}
hr{border:0;border-top:1px solid var(--turf);margin:0}

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

:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:2px;
  border-radius:1px;
}

/* ---------- 3. 中文排版与文本工具 ---------- */
.display{
  font-size:clamp(3.25rem,8.5vw,7.5rem);
  font-weight:300;
  line-height:1.02;
  letter-spacing:.02em;
}

.headline{
  font-size:clamp(1.5rem,2.6vw,2.25rem);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.01em;
}

.lede{
  font-size:clamp(1.02rem,1.5vw,1.28rem);
  line-height:1.7;
  color:var(--sand);
  max-width:38ch;
}

.idx{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--mist);
}

.num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-weight:600;
  letter-spacing:0;
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ---------- 4. 布局容器 ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{padding-block:clamp(48px,7vw,120px)}
.section--tight{padding-block:clamp(32px,4vw,64px)}
.section--paper{background:var(--paper);color:var(--carbon)}
.section--deep{background:var(--ink-deep)}

.split{display:grid;gap:clamp(24px,3vw,48px);grid-template-columns:1fr}

@media (min-width:1000px){
  .split--3-9{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}
  .split--7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .split--4-8{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
}

/* ---------- 5. 粗野主义面板与颗粒 ---------- */
.panel{
  border:var(--line);
  background:linear-gradient(180deg,rgba(20,81,62,.38),rgba(7,42,32,.62));
  box-shadow:var(--shadow-brutal);
  padding:clamp(20px,2.4vw,32px);
}

.panel--flat{
  background:var(--ink-deep);
  box-shadow:none;
}

.panel--lime{
  border-color:var(--lime);
  box-shadow:6px 6px 0 rgba(198,255,61,.18);
}

.grain{position:relative;isolation:isolate}

.grain::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.55;
  mix-blend-mode:screen;
  background-image:radial-gradient(rgba(246,244,236,.07) 1px,transparent 1px);
  background-size:3px 3px;
}

/* ---------- 6. 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.7rem 1.15rem;
  border:2px solid var(--turf);
  background:var(--ink-deep);
  color:var(--paper);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.06em;
  line-height:1.2;
  cursor:pointer;
  transition:border-color var(--ease),color var(--ease),background-color var(--ease),transform var(--ease);
}

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

.btn--lime{
  background:linear-gradient(135deg,var(--lime),var(--lime-soft));
  border-color:var(--lime);
  color:var(--ink);
}

.btn--lime:hover{
  color:var(--ink);
  background:var(--lime-soft);
  transform:translate(-1px,-1px);
}

.btn--ghost{background:transparent}
.btn--sm{padding:.5rem .85rem;font-size:.76rem}

.btn[disabled],
.btn[aria-disabled="true"]{
  opacity:.4;
  cursor:not-allowed;
  pointer-events:none;
}

/* ---------- 7. 索引标签与面包屑 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .7rem;
  border:1px solid var(--turf);
  background:transparent;
  color:var(--sand);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.08em;
  cursor:pointer;
  transition:border-color var(--ease),color var(--ease),background-color var(--ease);
}

.tag:hover{border-color:var(--lime);color:var(--lime)}

.tag[aria-pressed="true"],
.tag.is-active{
  border-color:var(--lime);
  color:var(--lime);
  background:rgba(198,255,61,.08);
}

.crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.55rem;
  padding-block:20px;
  font-size:.74rem;
  letter-spacing:.08em;
  color:var(--mist);
}

.crumbs a{color:var(--sand);border-bottom:1px solid transparent;transition:color var(--ease),border-color var(--ease)}
.crumbs a:hover{color:var(--lime);border-bottom-color:var(--lime)}
.crumbs__sep{color:var(--turf)}

/* ---------- 8. 数据表 ---------- */
.dtable{width:100%;font-size:.92rem}

.dtable caption{
  text-align:left;
  padding-bottom:.65rem;
  font-size:.74rem;
  letter-spacing:.08em;
  color:var(--mist);
}

.dtable th{
  padding:.6rem .75rem;
  text-align:left;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--mist);
  border-bottom:2px solid var(--turf);
  white-space:nowrap;
}

.dtable td{
  padding:.72rem .75rem;
  border-bottom:1px solid rgba(110,138,124,.28);
  font-variant-numeric:tabular-nums;
  color:var(--paper);
}

.dtable tbody tr{transition:background-color var(--ease)}
.dtable tbody tr:hover{background:var(--turf)}
.dtable .is-lime{color:var(--lime)}
.dtable .is-alert{color:var(--alert)}
.dtable .is-dim{color:var(--mist)}

.section--paper .dtable td{color:var(--carbon);border-bottom-color:var(--sand)}
.section--paper .dtable th{border-bottom-color:var(--carbon)}
.section--paper .dtable tbody tr:hover{background:rgba(220,216,200,.45)}

/* ---------- 9. 图片容器 ---------- */
.frame{
  position:relative;
  overflow:hidden;
  border:var(--line);
  background:var(--ink-deep);
  isolation:isolate;
}

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

.frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.5;
  mix-blend-mode:screen;
  background-image:radial-gradient(rgba(246,244,236,.07) 1px,transparent 1px);
  background-size:3px 3px;
}

.frame--16x9{aspect-ratio:16 / 9}
.frame--4x5{aspect-ratio:4 / 5}
.frame--1x1{aspect-ratio:1 / 1}
.frame--21x9{aspect-ratio:21 / 9}

.frame__cap{
  position:absolute;
  left:0;
  bottom:0;
  z-index:3;
  max-width:100%;
  padding:.5rem .75rem;
  background:rgba(7,42,32,.88);
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--sand);
}

/* ---------- 10. 跳过链接 ---------- */
.skip-link{
  position:absolute;
  left:var(--gutter);
  top:8px;
  z-index:200;
  transform:translateY(-200%);
  padding:.55rem .95rem;
  background:var(--lime);
  color:var(--ink);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.06em;
  transition:transform var(--ease);
}

.skip-link:focus,
.skip-link:focus-visible{transform:translateY(0)}

/* ---------- 11. 页头 ---------- */
.site-head{
  position:sticky;
  top:0;
  z-index:80;
  background:var(--ink);
  border-bottom:2px solid var(--turf);
  transition:background-color var(--ease),border-color var(--ease);
}

.site-head.is-float{
  background:transparent;
  border-bottom-color:transparent;
}

.site-head.is-float .site-head__ticker{border-bottom-color:transparent}

/* 状态数据条 */
.site-head__ticker{
  border-bottom:1px solid rgba(20,81,62,.85);
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--mist);
  transition:border-color var(--ease);
}

.site-head__tickrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-block:.5rem;
}

.site-head__status{
  display:flex;
  align-items:center;
  gap:.55rem;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.status-dot{
  flex:0 0 auto;
  width:7px;
  height:7px;
  background:var(--lime);
  box-shadow:0 0 0 3px rgba(198,255,61,.22);
}

.site-head__tickermeta{
  flex:0 0 auto;
  color:var(--sand);
  white-space:nowrap;
}

/* 主栏 */
.site-head__bar{
  position:relative;
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
  padding-block:clamp(12px,1.6vw,18px);
  display:flex;
  align-items:center;
  gap:clamp(16px,2.5vw,36px);
}

/* 品牌 */
.brand{
  display:flex;
  align-items:center;
  gap:.8rem;
  flex:0 0 auto;
  min-width:0;
}

.brand__mark{
  display:inline-flex;
  align-items:baseline;
  padding:.35rem .5rem;
  border:2px solid var(--turf);
  font-family:var(--font-mono);
  font-size:1.35rem;
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--paper);
  transition:border-color var(--ease);
}

.brand__mark em{font-style:normal;color:var(--lime)}

.brand:hover .brand__mark{border-color:var(--lime)}

.brand__text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.brand__line{
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--paper);
  white-space:nowrap;
}

.brand__sub{
  font-size:.68rem;
  letter-spacing:.1em;
  color:var(--mist);
  white-space:nowrap;
}

/* 主导航 */
.nav{margin-left:auto;min-width:0}

.nav__list{
  display:flex;
  align-items:center;
  gap:clamp(6px,1.3vw,20px);
}

.nav__link{
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:.4rem .1rem;
  border-bottom:2px solid transparent;
  transition:border-color var(--ease);
}

.nav__idx{
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.1em;
  color:var(--mist);
  transition:color var(--ease);
}

.nav__label{
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--sand);
  white-space:nowrap;
  transition:color var(--ease);
}

.nav__link:hover{border-bottom-color:var(--lime)}
.nav__link:hover .nav__label{color:var(--lime)}
.nav__link:hover .nav__idx{color:var(--lime-soft)}

.nav__link[aria-current="page"]{border-bottom-color:var(--lime)}
.nav__link[aria-current="page"] .nav__label{color:var(--lime)}
.nav__link[aria-current="page"] .nav__idx{color:var(--lime-soft)}

/* 页头行动区 */
.site-head__actions{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex:0 0 auto;
}

/* 汉堡按钮 */
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  border:2px solid var(--turf);
  cursor:pointer;
  transition:border-color var(--ease);
}

.nav-toggle:hover{border-color:var(--lime)}

.nav-toggle__bars{
  position:relative;
  display:block;
  width:18px;
  height:2px;
  background:var(--paper);
  transition:background-color var(--ease);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:inherit;
  transition:transform var(--ease),background-color var(--ease);
}

.nav-toggle__bars::before{top:-6px}
.nav-toggle__bars::after{top:6px}

[data-nav-toggle][aria-expanded="true"] .nav-toggle__bars{background:transparent}
[data-nav-toggle][aria-expanded="true"] .nav-toggle__bars::before{transform:translateY(6px) rotate(45deg);background:var(--lime)}
[data-nav-toggle][aria-expanded="true"] .nav-toggle__bars::after{transform:translateY(-6px) rotate(-45deg);background:var(--lime)}

/* 阅读进度尺 */
.scroll-meter{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  overflow:hidden;
  pointer-events:none;
  background:rgba(20,81,62,.7);
}

.scroll-meter__fill{
  display:block;
  width:100%;
  height:100%;
  background:var(--lime);
  transform:scaleX(0);
  transform-origin:0 50%;
}

/* ---------- 12. 页脚 ---------- */
.site-foot{
  background:var(--ink-deep);
  border-top:2px solid var(--turf);
  color:var(--sand);
}

.foot__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(28px,4vw,44px);
  padding-block:clamp(40px,6vw,80px) clamp(32px,4.5vw,64px);
}

@media (min-width:640px){
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__brand{grid-column:1 / -1}
}

@media (min-width:1080px){
  .foot__grid{
    grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.8fr)) minmax(0,1.5fr);
    gap:clamp(28px,3vw,48px);
  }
  .foot__brand{grid-column:auto}
}

.foot__logo{
  font-family:var(--font-mono);
  font-size:1.4rem;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--paper);
}

.foot__logo em{font-style:normal;color:var(--lime)}

.foot__brandtext{
  margin-top:.9rem;
  font-size:.92rem;
  line-height:1.85;
  color:var(--sand);
  max-width:36ch;
}

.foot__col{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  min-width:0;
}

.foot__coltitle{
  padding-bottom:.55rem;
  border-bottom:1px solid rgba(20,81,62,.9);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--mist);
}

.foot__list{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}

.foot__link{
  display:inline-block;
  width:fit-content;
  font-size:.92rem;
  color:var(--sand);
  border-bottom:1px solid transparent;
  transition:color var(--ease),border-color var(--ease);
}

.foot__link:hover{color:var(--lime);border-bottom-color:var(--lime)}

.foot__contact{gap:.6rem}

.foot__row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem;
  font-size:.86rem;
}

.foot__key{
  flex:0 0 auto;
  min-width:2.6rem;
  font-size:.68rem;
  letter-spacing:.1em;
  color:var(--mist);
}

.foot__val{
  color:var(--paper);
  font-variant-numeric:tabular-nums;
  word-break:break-all;
}

.foot__note{
  margin-top:.4rem;
  padding-top:.7rem;
  border-top:1px dashed rgba(20,81,62,.9);
  font-size:.78rem;
  line-height:1.75;
  color:var(--mist);
}

.copy-btn{
  flex:0 0 auto;
  padding:.15rem .45rem;
  border:1px solid var(--turf);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--sand);
  cursor:pointer;
  transition:border-color var(--ease),color var(--ease),background-color var(--ease);
}

.copy-btn:hover{border-color:var(--lime);color:var(--lime)}
.copy-btn.is-copied{border-color:var(--lime);background:var(--lime);color:var(--ink)}

.foot__base{border-top:1px solid rgba(20,81,62,.9)}

.foot__baserow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.7rem 1.6rem;
  padding-block:1.3rem;
  font-size:.74rem;
  letter-spacing:.06em;
  color:var(--mist);
}

.foot__baserow a{
  color:var(--sand);
  border-bottom:1px solid transparent;
  transition:color var(--ease),border-color var(--ease);
}

.foot__baserow a:hover{color:var(--lime);border-bottom-color:var(--lime)}

.foot__icp{font-variant-numeric:tabular-nums}

/* ---------- 13. 窄屏适配 ---------- */
@media (max-width:1180px){
  .brand__sub{display:none}
}

@media (max-width:1023px){
  .nav__list{gap:clamp(4px,1vw,12px)}
  .nav__label{font-size:.8rem}
}

@media (max-width:899px){
  :root{--head-offset:96px}

  .site-head__tickermeta{display:none}

  .site-head__bar{flex-wrap:nowrap;gap:.6rem}

  .brand__line{font-size:.8rem}

  .nav{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    margin-left:0;
    max-height:calc(100vh - 92px);
    overflow-y:auto;
    background:var(--ink-deep);
    border-bottom:2px solid var(--turf);
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity var(--ease),transform var(--ease),visibility 0s linear 160ms;
  }

  .nav[data-open]{
    opacity:1;
    visibility:visible;
    transform:none;
    transition:opacity var(--ease),transform var(--ease),visibility 0s;
  }

  .nav__list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:.5rem var(--gutter) 1.4rem;
  }

  .nav__item{border-bottom:1px solid rgba(20,81,62,.55)}

  .nav__link{
    flex-direction:row;
    align-items:baseline;
    gap:.9rem;
    padding:.9rem 0;
    border-bottom:0;
    border-left:2px solid transparent;
    padding-left:.75rem;
  }

  .nav__label{font-size:1.12rem}
  .nav__idx{font-size:.68rem}

  .nav__link:hover{border-left-color:var(--lime)}
  .nav__link[aria-current="page"]{border-bottom-color:transparent;border-left-color:var(--lime)}

  .nav-toggle{display:inline-flex}
  .btn--sm{padding:.5rem .7rem;font-size:.72rem}
}

@media (max-width:560px){
  body{font-size:16px}
  .brand__text{display:none}
  .foot__baserow{justify-content:flex-start}
}

/* ---------- 14. 动效降级 ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}

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

  .nav,
  .nav[data-open]{transform:none}
}

/* ---------- 15. 打印 ---------- */
@media print{
  .site-head,.site-foot{position:static;background:#fff;color:#000;border-color:#000}
  .nav,.nav-toggle,.scroll-meter,.copy-btn,.skip-link{display:none}
}