/* ============================================================
   易博中心 · 共享站点样式 /assets/site.css
   深墨蓝控制台：网格纹理 + 玻璃层 + 青橙双强调
   ============================================================ */

/* ---------- 1. reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote,pre{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
table{border-collapse:collapse;width:100%}
[hidden]{display:none !important}

/* ---------- 2. 令牌 ---------- */
:root{
  --ink:#0A1120;
  --panel:#101D33;
  --panel-soft:rgba(16,29,51,.72);
  --cyan:#2FE0C8;
  --orange:#FF8A3C;
  --amber:linear-gradient(90deg,#FFC46B 0%,#E4622B 100%);
  --glass:rgba(255,255,255,.07);
  --text:#E8EEF8;
  --text-soft:#CBD8EC;
  --muted:#9AAECB;
  --line:#1B2C47;
  --header-h:74px;
  --radius:14px;
  --radius-sm:10px;
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-sans:"Avenir Next","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"JetBrains Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace;
}

/* ---------- 3. 基础与中文排版 ---------- */
body{
  background-color:var(--ink);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.85;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(58% 42% at 10% 6%, rgba(47,224,200,.10), transparent 62%),
    radial-gradient(52% 44% at 90% 12%, rgba(255,138,60,.08), transparent 60%),
    radial-gradient(85% 60% at 50% 104%, rgba(47,224,200,.06), transparent 72%);
}
body::after{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:96px 96px;
  opacity:.42;
  -webkit-mask-image:radial-gradient(125% 100% at 50% 0%, #000 0%, transparent 78%);
  mask-image:radial-gradient(125% 100% at 50% 0%, #000 0%, transparent 78%);
}
main{display:block;padding-top:var(--header-h)}
main[data-bleed="true"]{padding-top:0}
#main-content{outline:none;scroll-margin-top:var(--header-h)}

h1,h2,h3,h4{font-weight:300;line-height:1.2;letter-spacing:0}
strong{font-weight:600;color:#fff}

.display{
  font-size:clamp(2.6rem,7vw,6.4rem);
  font-weight:200;
  line-height:.98;
  letter-spacing:-.02em;
}
.section-title{font-size:clamp(1.5rem,3.1vw,2.5rem);font-weight:300;line-height:1.2}
.caption{font-size:13px;font-weight:600;letter-spacing:.28em;color:var(--muted)}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:600;letter-spacing:.28em;color:var(--muted);
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--cyan);flex:0 0 auto}
.lede{font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.8;color:var(--text-soft);max-width:34em}
.mono,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.num{font-weight:500;letter-spacing:.02em}
.muted{color:var(--muted)}
.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. 布局 ---------- */
.container{width:min(100% - 40px, var(--maxw));margin-inline:auto}
.section{padding-block:clamp(48px,7vw,96px)}
.section--tight{padding-block:clamp(26px,4vw,52px)}
.stack>*+*{margin-top:var(--stack-gap,16px)}
.divider{height:1px;border:0;background:var(--line);margin-block:clamp(24px,4vw,48px)}
.underlay{padding-top:calc(var(--header-h) + clamp(32px,8vh,84px))}

.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2.2vw,30px)}
.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-5{grid-column:span 5}
.col-6{grid-column:span 6}
.col-7{grid-column:span 7}
.col-8{grid-column:span 8}
.col-12{grid-column:span 12}

/* ---------- 5. 组件 ---------- */
.card{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(18px,2.4vw,28px);
}
.card::before{
  content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(47,224,200,.5),transparent);
}
.glass-panel{
  position:relative;
  background:var(--glass);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  padding:clamp(16px,2.2vw,24px);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel-soft);
  color:var(--muted);
  font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;
}
.chip--cyan{color:var(--cyan);border-color:rgba(47,224,200,.35)}
.chip--orange{color:var(--orange);border-color:rgba(255,138,60,.42)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 22px;border-radius:999px;
  border:1px solid var(--line);
  background:var(--glass);
  color:var(--text);
  font-size:14px;font-weight:500;letter-spacing:.06em;
  text-decoration:none;cursor:pointer;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.btn:hover{background-color:rgba(255,255,255,.10)}
.btn:active{transform:translateY(1px)}
.btn--accent{background-color:var(--orange);border-color:transparent;color:#1C0D02;font-weight:600}
.btn--accent:hover{background-color:#FF9C58}
.btn--cyan{background-color:transparent;border-color:rgba(47,224,200,.55);color:var(--cyan)}
.btn--cyan:hover{background-color:rgba(47,224,200,.13)}
.btn--block{width:100%}

.meter{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.meter__bar{height:100%;width:var(--meter-value,60%);border-radius:999px;background:var(--amber)}

.rail-wrap{position:relative}
.rail-wrap::after{
  content:"";position:absolute;top:0;right:0;bottom:14px;width:70px;
  pointer-events:none;
  background:linear-gradient(270deg,var(--ink) 8%,rgba(10,17,32,0) 100%);
}
.rail{
  display:flex;gap:clamp(12px,1.6vw,20px);
  overflow-x:auto;overflow-y:hidden;
  padding:4px 4px 14px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  cursor:grab;
}
.rail::-webkit-scrollbar{height:4px}
.rail::-webkit-scrollbar-track{background:var(--line);border-radius:2px}
.rail::-webkit-scrollbar-thumb{background:var(--cyan);border-radius:2px}
.rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.rail:focus-visible{outline:2px solid var(--cyan);outline-offset:6px;border-radius:var(--radius-sm)}
.rail__item{flex:0 0 clamp(220px,30vw,300px);scroll-snap-align:start}
.rail__item--wide{flex-basis:clamp(280px,44vw,460px)}

/* 图片容器基础规则：页面阶段放入 <img> 即可 */
.media-frame{
  position:relative;overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  aspect-ratio:16/9;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(47,224,200,.16), transparent 62%),
    radial-gradient(95% 70% at 8% 92%, rgba(255,138,60,.12), transparent 62%),
    linear-gradient(180deg,#0E1B30,#0A1120);
}
.media-frame::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:
    linear-gradient(rgba(27,44,71,.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,44,71,.45) 1px, transparent 1px);
  background-size:34px 34px;
  opacity:.5;
}
.media-frame>img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.media-frame--wide{aspect-ratio:21/9}
.media-frame--tall{aspect-ratio:4/5}
.media-frame--square{aspect-ratio:1/1}

.chapter-mark{
  display:flex;align-items:baseline;gap:clamp(14px,2vw,26px);
  padding-top:18px;border-top:1px solid var(--line);
}
.chapter-index{
  font-family:var(--font-mono);font-weight:500;
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:1;
  color:rgba(47,224,200,.18);
}
.chapter-title{font-size:clamp(1.15rem,2vw,1.6rem);font-weight:300}

.prose{max-width:34em;font-size:16.5px;line-height:1.85;color:var(--text-soft)}
.prose p+p{margin-top:1.4em}
.prose a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(47,224,200,.4)}

.breadcrumbs{padding-block:12px}
.breadcrumb-list{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--font-mono);font-size:13px;color:var(--muted)}
.breadcrumb-list li{display:flex;align-items:center;gap:8px}
.breadcrumb-list li+li::before{content:"/";color:var(--line)}
.breadcrumb-list a{color:var(--muted);text-decoration:none}
.breadcrumb-list a:hover{color:var(--cyan)}
.breadcrumb-current{color:var(--text)}

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

/* ---------- 6. 头部 ---------- */
.skip-link{
  position:fixed;left:14px;top:-70px;z-index:120;
  padding:10px 18px;
  background:var(--cyan);color:#04141A;
  border-radius:0 0 10px 10px;
  font-size:13px;font-weight:600;text-decoration:none;
  transition:top .18s var(--ease);
}
.skip-link:focus{top:0}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background-color:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.site-header[data-scrolled="true"]{
  background-color:rgba(10,17,32,.93);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 18px 40px rgba(3,7,16,.45);
}
.header-inner{
  width:min(100% - 40px, var(--maxw));
  margin-inline:auto;
  height:var(--header-h);
  display:flex;align-items:center;gap:clamp(12px,2vw,26px);
  transition:height .22s var(--ease);
}
.site-header[data-scrolled="true"] .header-inner{height:58px}

.brand{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;text-decoration:none;color:var(--text)}
.brand__mark{
  position:relative;width:26px;height:26px;flex:0 0 auto;
  border:1px solid var(--cyan);border-radius:8px;
  background:radial-gradient(circle at 30% 28%, rgba(47,224,200,.35), transparent 72%);
}
.brand__mark::after{content:"";position:absolute;inset:7px;border-radius:3px;background:var(--cyan);opacity:.9}
.brand__text{display:flex;align-items:baseline;gap:8px}
.brand__name{font-size:16.5px;font-weight:500;letter-spacing:.06em}
.brand__ver{
  font-size:10.5px;letter-spacing:.12em;color:var(--cyan);
  border:1px solid rgba(47,224,200,.35);border-radius:999px;padding:2px 7px;
}

.site-nav{flex:1 1 auto;min-width:0;position:relative}
.nav-track{
  display:flex;align-items:center;gap:clamp(4px,1vw,12px);
  overflow-x:auto;overflow-y:hidden;
  padding:4px 2px;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.nav-track::-webkit-scrollbar{display:none}
.nav-track:focus-visible{outline:2px solid var(--cyan);outline-offset:5px;border-radius:999px}
.nav-link{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:8px 13px;border-radius:999px;
  border:1px solid transparent;
  color:var(--muted);font-size:14px;letter-spacing:.02em;text-decoration:none;
  transition:color .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease);
}
.nav-link::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.35;flex:0 0 auto}
.nav-link:hover{color:var(--text);background-color:var(--glass)}
.nav-link[aria-current="page"]{
  color:var(--cyan);
  background-color:rgba(47,224,200,.10);
  border-color:rgba(47,224,200,.38);
}
.nav-link[aria-current="page"]::before{background:var(--orange);opacity:1}

.header-tools{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.status-lamp{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 11px;border-radius:999px;
  border:1px solid var(--line);background-color:var(--glass);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;color:var(--muted);
}
.status-lamp__dot{
  width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--cyan);
  box-shadow:0 0 0 3px rgba(47,224,200,.16);
  animation:lamp 2.8s var(--ease) infinite;
}
@keyframes lamp{0%,100%{opacity:1}50%{opacity:.35}}

.lang-switch{
  padding:6px 12px;border-radius:999px;
  border:1px solid var(--line);background-color:transparent;
  color:var(--muted);font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease);
}
.lang-switch:hover{color:var(--cyan);border-color:rgba(47,224,200,.45)}
.lang-switch[aria-pressed="true"]{color:var(--ink);background-color:var(--cyan);border-color:var(--cyan)}

.header-cta{padding:10px 18px;font-size:13px;letter-spacing:.08em}

.nav-toggle{
  display:none;align-items:center;gap:9px;
  padding:9px 14px 9px 13px;border-radius:999px;
  border:1px solid var(--line);background-color:transparent;
  color:var(--text);font-size:12.5px;letter-spacing:.1em;cursor:pointer;
}
.nav-toggle__bar{position:relative;display:block;width:16px;height:2px;border-radius:2px;background:var(--cyan)}
.nav-toggle__bar::before,.nav-toggle__bar::after{
  content:"";position:absolute;left:0;width:16px;height:2px;border-radius:2px;background:var(--text);
  transition:transform .22s var(--ease),top .22s var(--ease),background-color .22s var(--ease);
}
.nav-toggle__bar::before{top:-5px}
.nav-toggle__bar::after{top:5px}
.site-header[data-open="true"] .nav-toggle{border-color:rgba(255,138,60,.45)}
.site-header[data-open="true"] .nav-toggle__bar{background:transparent}
.site-header[data-open="true"] .nav-toggle__bar::before{top:0;transform:rotate(45deg);background:var(--orange)}
.site-header[data-open="true"] .nav-toggle__bar::after{top:0;transform:rotate(-45deg);background:var(--orange)}

/* ---------- 7. 页脚 ---------- */
.site-footer{
  margin-top:clamp(48px,7vw,96px);
  border-top:1px solid rgba(47,224,200,.45);
  background:linear-gradient(180deg, rgba(16,29,51,.65), rgba(10,17,32,1) 60%);
}
.footer-inner{width:min(100% - 40px, var(--maxw));margin-inline:auto;padding-block:clamp(26px,4vw,44px)}
.footer-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(10px,2vw,28px);
  padding-block:clamp(13px,1.8vw,19px);
  border-bottom:1px solid var(--line);
}
.footer-row:last-child{border-bottom:0;padding-bottom:0}
.footer-row--brand{align-items:baseline}
.footer-brand{
  display:inline-flex;align-items:baseline;gap:10px;
  font-size:clamp(1.05rem,2vw,1.35rem);font-weight:300;letter-spacing:.06em;
}
.footer-brand__ver{
  font-size:10.5px;letter-spacing:.12em;color:var(--cyan);
  border:1px solid rgba(47,224,200,.35);border-radius:999px;padding:2px 8px;
}
.footer-tagline{max-width:46ch;font-size:14px;color:var(--muted)}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.footer-link{font-size:14px;color:var(--muted);text-decoration:none;transition:color .2s var(--ease)}
.footer-link:hover{color:var(--cyan)}
.footer-legal{display:flex;gap:16px;font-size:13px}
.footer-legal__link{
  color:var(--muted);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:2px;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.footer-legal__link:hover{color:var(--orange);border-color:var(--orange)}
.footer-meta__left,.footer-meta__right{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12.5px;color:var(--muted);
}
.footer-dot{color:var(--line)}
.footer-meta__label{font-size:11px;letter-spacing:.14em;color:var(--muted)}
.copy-value{color:var(--text);font-size:12.5px;letter-spacing:.02em;user-select:all}
.copy-btn{
  padding:5px 12px;border-radius:999px;
  border:1px solid var(--line);background-color:transparent;
  color:var(--muted);font-size:12px;letter-spacing:.06em;cursor:pointer;
  transition:color .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease);
}
.copy-btn:hover{color:var(--cyan);border-color:rgba(47,224,200,.45)}
.copy-btn[data-state="copied"]{color:#04141A;background-color:var(--cyan);border-color:var(--cyan)}

/* ---------- 8. 动效 ---------- */
.anim-ready [data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.anim-ready [data-reveal].is-visible{opacity:1;transform:translateY(0)}

/* ---------- 9. 响应式 ---------- */
@media (max-width:1080px){
  .status-lamp__text{display:none}
}
@media (max-width:960px){
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8{grid-column:span 12}
}
@media (max-width:900px){
  :root{--header-h:64px}
  .container,.footer-inner{width:min(100% - 32px, var(--maxw))}
  .header-inner{width:min(100% - 26px, var(--maxw));gap:10px}
  .lang-switch{display:none}
  .nav-toggle{display:inline-flex}
  .site-nav{
    position:absolute;left:0;right:0;top:100%;
    max-height:0;overflow:hidden;
    visibility:hidden;opacity:0;
    padding:0 20px;
    background-color:rgba(9,15,28,.98);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    transition:max-height .3s var(--ease),opacity .2s var(--ease),padding .3s var(--ease),visibility .2s linear;
  }
  .site-header[data-open="true"] .site-nav{
    max-height:78vh;overflow-y:auto;
    visibility:visible;opacity:1;
    padding:16px 20px 24px;
  }
  .nav-track{display:block;overflow:visible;padding:0;scroll-snap-type:none}
  .nav-track li+li{margin-top:8px}
  .nav-link{
    width:100%;justify-content:flex-start;
    padding:13px 16px;border-radius:12px;font-size:15px;
    border-color:var(--line);
    background-color:rgba(255,255,255,.03);
  }
  .footer-row{flex-direction:column;align-items:flex-start}
  .footer-legal{gap:14px}
}
@media (max-width:560px){
  .status-lamp{display:none}
  .header-cta{padding:9px 14px;font-size:12.5px;letter-spacing:.04em}
  .brand__name{font-size:15px}
  .display{letter-spacing:-.01em}
  .footer-meta__left,.footer-meta__right{font-size:12px;gap:8px}
}

/* ---------- 10. 降低动效 ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .anim-ready [data-reveal]{opacity:1 !important;transform:none !important}
  .rail{scroll-behavior:auto}
}