/* ============================================================
   6319登录中心 · 共享样式表 /assets/site.css
   深海蓝底 / 电光青高亮 / 暖橙状态标记
   ============================================================ */

/* ---------- 01 变量 ---------- */
:root{
  --sea:#0B1F3A;
  --trench:#071427;
  --cyan:#00E5C7;
  --orange:#FF7A45;
  --mist:#E6F7F5;
  --steel:#9FB8C8;
  --line:#2A4A66;
  --green:#3DDC97;
  --amber:#FFB020;
  --paper:#F5F7FA;
  --card-top:#0E2742;
  --card-bot:#0A1B31;
  --wrap:1180px;
  --gutter:clamp(18px,4vw,40px);
  --r:10px;
  --ease:cubic-bezier(.22,.7,.3,1);
  --font-cn:"PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono","Courier New",monospace;
}

/* ---------- 02 重置 ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background-color:var(--sea);
  background-image:
    radial-gradient(1100px 520px at 84% -10%, rgba(0,229,199,.10), transparent 62%),
    radial-gradient(820px 460px at -12% 20%, rgba(255,122,69,.07), transparent 66%),
    linear-gradient(180deg,#0B1F3A 0%,#0A1B31 48%,#0B1F3A 100%);
  color:var(--mist);
  font-family:var(--font-cn);
  font-size:17px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%;}
img{height:auto;}
a{color:var(--cyan);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
p{margin:0 0 1em;}
ul,ol{margin:0 0 1em;padding-left:1.15em;}
li{margin:.35em 0;}
button{font:inherit;color:inherit;background:none;border:0;}
h1,h2,h3,h4{font-weight:800;line-height:1.25;letter-spacing:.02em;color:var(--mist);margin:0 0 .6em;}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px;}
::selection{background:rgba(0,229,199,.3);color:#fff;}

/* ---------- 03 布局工具 ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.page-main{padding-top:clamp(26px,3.4vw,46px);padding-bottom:clamp(44px,6vw,86px);}
.mono{font-family:var(--font-mono);letter-spacing:.02em;}
.muted{color:var(--steel);}

.grid{display:grid;gap:clamp(16px,2.4vw,28px);}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--asym{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);}

/* 左侧固定三级锚点 */
.anchor-rail{
  position:sticky;
  top:calc(var(--sticky-offset,136px));
  align-self:start;
  display:grid;
  gap:2px;
  padding:6px 0 6px 16px;
  border-left:1px solid var(--line);
}
.anchor-rail .rail-title{
  margin:0 0 8px;
  padding-left:6px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--steel);
}
.anchor-rail a{
  display:block;
  padding:7px 6px;
  border-radius:6px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--steel);
}
.anchor-rail a:hover{color:var(--mist);background:rgba(0,229,199,.07);text-decoration:none;}
.anchor-rail a[aria-current="true"]{
  color:var(--cyan);
  background:linear-gradient(90deg,rgba(0,229,199,.14),transparent);
}

/* ---------- 04 排版与正文 ---------- */
.prose{max-width:74ch;font-size:17px;line-height:1.85;}
.prose h2{margin:2em 0 .6em;font-size:clamp(22px,2.6vw,28px);}
.prose h3{margin:1.6em 0 .5em;font-size:clamp(18px,2vw,21px);}
.prose p{margin:0 0 1.1em;}
.prose ul,.prose ol{padding-left:1.3em;}
.prose li::marker{color:var(--cyan);}
.prose strong{font-weight:700;color:#fff;}
.prose a{text-decoration:underline;text-underline-offset:3px;}
.prose blockquote{
  margin:1.4em 0;
  padding:12px 18px;
  border-left:3px solid var(--cyan);
  border-radius:0 var(--r) var(--r) 0;
  background:rgba(0,229,199,.06);
  color:var(--steel);
}
.prose code{
  font-family:var(--font-mono);
  font-size:.92em;
  padding:2px 6px;
  border:1px solid var(--line);
  border-radius:5px;
  background:rgba(42,74,102,.28);
  color:var(--mist);
}

/* ---------- 05 面包屑 ---------- */
.breadcrumb{padding:6px 0 0;font-size:13px;font-family:var(--font-mono);color:var(--steel);}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:0;list-style:none;margin:0;padding:0;}
.breadcrumb li{margin:0;display:flex;align-items:center;}
.breadcrumb li+li::before{content:"/";margin:0 10px;color:var(--line);}
.breadcrumb a{color:var(--steel);}
.breadcrumb a:hover{color:var(--cyan);}
.breadcrumb [aria-current="page"]{color:var(--mist);}

/* ---------- 06 标签与卡片 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(159,184,200,.06);
  color:var(--steel);
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.08em;
  white-space:nowrap;
}
.tag--cyan{color:var(--cyan);border-color:rgba(0,229,199,.5);background:rgba(0,229,199,.09);}
.tag--version{color:#04212B;background:var(--orange);border-color:var(--orange);}
.tag--warn{color:var(--amber);border-color:rgba(255,176,32,.5);background:rgba(255,176,32,.09);}
.tag--ok{color:var(--green);border-color:rgba(61,220,151,.5);background:rgba(61,220,151,.09);}

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:clamp(18px,2.4vw,28px);
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(180deg,var(--card-top),var(--card-bot));
  transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.card::before{
  content:"";
  position:absolute;
  left:-1px;
  top:-1px;
  width:40px;
  height:2px;
  background:var(--cyan);
  opacity:.6;
}
.card:hover{
  border-color:rgba(0,229,199,.55);
  transform:translateY(-2px);
  box-shadow:0 20px 42px -28px rgba(0,0,0,.95);
}
.card-label{margin:0;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.18em;color:var(--steel);}
.card-title{margin:0;font-size:clamp(18px,2vw,21px);font-weight:800;letter-spacing:.02em;}
.card-text{margin:0;color:var(--steel);font-size:15.5px;line-height:1.8;}

/* ---------- 07 图片容器基础规则 ---------- */
.media-frame{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  background:linear-gradient(140deg,rgba(0,229,199,.12),rgba(255,122,69,.07) 58%,rgba(11,31,58,.35));
}
.media-frame>img{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;}
.media-frame--grid::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(42,74,102,.42) 1px,transparent 1px),
    linear-gradient(90deg,rgba(42,74,102,.42) 1px,transparent 1px);
  background-size:34px 34px;
  opacity:.5;
  pointer-events:none;
}
.media-caption{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.02em;
  color:var(--steel);
}

/* ---------- 08 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:12px 22px;
  border:1px solid transparent;
  border-radius:8px;
  font-size:15px;
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.4;
  cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.btn:hover{text-decoration:none;}
.btn--primary{background:var(--cyan);color:#04212B;border-color:var(--cyan);}
.btn--primary:hover{background:#3DF2DC;box-shadow:0 0 0 4px rgba(0,229,199,.16);}
.btn--ghost{background:transparent;color:var(--mist);border-color:var(--line);}
.btn--ghost:hover{border-color:var(--cyan);color:var(--cyan);}
.btn--warm{background:rgba(255,122,69,.1);color:var(--orange);border-color:rgba(255,122,69,.5);}
.btn--warm:hover{background:rgba(255,122,69,.18);}

/* ---------- 09 页头 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:linear-gradient(180deg,rgba(10,27,49,.98),rgba(11,31,58,.96));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:2px;
  z-index:90;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--cyan),var(--orange));
  pointer-events:none;
}
.skip-link{
  position:absolute;
  left:var(--gutter);
  top:10px;
  z-index:120;
  padding:10px 18px;
  border-radius:6px;
  background:var(--cyan);
  color:#04212B;
  font-size:14px;
  font-weight:700;
  transform:translateY(-180%);
  transition:transform .18s var(--ease);
}
.skip-link:focus{transform:translateY(0);text-decoration:none;}

.hdr-utility{background:var(--trench);border-bottom:1px solid rgba(42,74,102,.6);}
.hdr-utility-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:38px;
  padding-top:4px;
  padding-bottom:4px;
}
.utility-note{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--steel);
}
.dot-live{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px rgba(61,220,151,.16);
  flex:none;
}
.utility-meta{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  font-size:12px;
  color:var(--steel);
}
.badge-version{
  display:inline-flex;
  align-items:center;
  padding:2px 10px;
  border:1px solid rgba(255,122,69,.55);
  border-radius:999px;
  background:rgba(255,122,69,.1);
  color:var(--orange);
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.08em;
  white-space:nowrap;
}

.hdr-masthead{padding:clamp(18px,3.2vw,30px) 0 clamp(14px,2.4vw,22px);}
.masthead-inner{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
}
.masthead-aside{
  margin:0;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  color:var(--steel);
  opacity:.85;
}
.masthead-aside--end{text-align:right;}
.masthead-action{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
}
.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  justify-self:center;
  text-align:center;
  color:var(--mist);
}
.brand:hover{text-decoration:none;}
.brand-name{
  font-size:clamp(26px,4.6vw,46px);
  font-weight:800;
  letter-spacing:.08em;
  line-height:1.05;
  color:var(--mist);
  font-stretch:condensed;
}
.brand:hover .brand-name{color:#fff;}
.brand-rule{
  width:66px;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
}
.brand-tagline{
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.2em;
  color:var(--steel);
}

.nav-toggle{
  display:none;
  align-items:center;
  gap:9px;
  padding:9px 14px;
  border:1px solid rgba(0,229,199,.45);
  border-radius:8px;
  background:rgba(0,229,199,.08);
  color:var(--cyan);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.06em;
  cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.nav-toggle:hover{background:rgba(0,229,199,.16);border-color:var(--cyan);}
.nav-toggle-bars{
  position:relative;
  display:block;
  width:16px;
  height:2px;
  background:currentColor;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  width:16px;
  height:2px;
  background:currentColor;
}
.nav-toggle-bars::before{top:-5px;}
.nav-toggle-bars::after{top:5px;}

.site-nav{border-top:1px solid var(--line);}
.nav-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
}
.nav-list li{margin:0;border-left:1px solid rgba(42,74,102,.55);}
.nav-list li:first-child{border-left:0;}
.nav-link{
  position:relative;
  display:block;
  padding:14px clamp(12px,2vw,22px);
  color:var(--steel);
  font-size:15px;
  font-weight:600;
  letter-spacing:.05em;
  transition:color .18s var(--ease),background .18s var(--ease);
}
.nav-link:hover{color:var(--mist);background:rgba(0,229,199,.06);text-decoration:none;}
.nav-link::after{
  content:"";
  position:absolute;
  left:50%;
  right:50%;
  bottom:0;
  height:2px;
  background:var(--cyan);
  transition:left .22s var(--ease),right .22s var(--ease);
}
.nav-link:hover::after{left:14%;right:14%;}
.nav-link[aria-current="page"]{color:var(--cyan);}
.nav-link[aria-current="page"]::after{left:14%;right:14%;}

/* ---------- 10 页脚 ---------- */
.site-footer{
  margin-top:clamp(48px,7vw,96px);
  background:var(--trench);
  border-top:1px solid var(--line);
}
.footer-rail{
  height:7px;
  border-bottom:1px solid rgba(42,74,102,.55);
  background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 14px);
  opacity:.8;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.45fr 1fr 1.35fr;
  gap:clamp(24px,4vw,54px);
  padding-top:clamp(36px,5vw,62px);
  padding-bottom:clamp(28px,4vw,46px);
}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;}
.footer-mark{
  margin:0 0 12px;
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.28em;
  color:var(--cyan);
}
.footer-name{
  margin:0 0 12px;
  font-size:22px;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--mist);
}
.footer-desc{
  margin:0 0 16px;
  max-width:34ch;
  font-size:15px;
  color:var(--steel);
}
.footer-icp{
  display:inline-block;
  margin:0;
  padding:4px 11px;
  border:1px dashed rgba(159,184,200,.45);
  border-radius:6px;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--mist);
}
.footer-col-title{
  margin:0 0 16px;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.22em;
  color:var(--cyan);
}
.footer-links{display:grid;gap:10px;list-style:none;margin:0;padding:0;}
.footer-links li{margin:0;}
.footer-links a{color:var(--steel);font-size:15px;}
.footer-links a:hover{color:var(--cyan);}
.footer-contact p{margin:0 0 10px;font-size:14.5px;line-height:1.75;color:var(--steel);}
.footer-contact strong{
  display:inline-block;
  margin-right:8px;
  color:var(--mist);
  font-weight:600;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.1em;
}
.footer-base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 24px;
  padding-top:18px;
  padding-bottom:28px;
  border-top:1px solid rgba(42,74,102,.55);
  font-size:13px;
  color:var(--steel);
}
.footer-base-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;}
.footer-base-links a{color:var(--steel);}
.footer-base-links a:hover{color:var(--cyan);}
.footer-base-meta{margin:0;}

/* ---------- 11 显现动效 ---------- */
.js-ready [data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.js-ready [data-reveal].is-visible{opacity:1;transform:none;}

/* ---------- 12 响应式 ---------- */
@media (max-width:1080px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px 40px;}
  .footer-brand{grid-column:1 / -1;}
}
@media (max-width:980px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:860px){
  body{font-size:16.5px;}
  .masthead-inner{grid-template-columns:minmax(0,1fr) auto;gap:12px;}
  .masthead-aside{display:none;}
  .brand{justify-self:start;align-items:flex-start;text-align:left;}
  .brand-name{font-size:clamp(24px,7.4vw,34px);letter-spacing:.05em;}
  .brand-tagline{font-size:11.5px;letter-spacing:.14em;}
  .masthead-action{display:flex;}
  .nav-toggle{display:inline-flex;}

  .site-nav{display:none;}
  .site-nav[data-open]{display:block;}
  .nav-list{flex-direction:column;}
  .nav-list li{border-left:0;border-top:1px solid rgba(42,74,102,.5);}
  .nav-link{padding:14px var(--gutter);text-align:left;}
  .nav-link::after{display:none;}
  .nav-link[aria-current="page"]{background:rgba(0,229,199,.1);box-shadow:inset 3px 0 0 var(--cyan);}

  .grid--2,.grid--3,.grid--asym{grid-template-columns:minmax(0,1fr);}

  .anchor-rail{
    position:static;
    display:flex;
    gap:8px;
    padding:0;
    border-left:0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .anchor-rail::-webkit-scrollbar{display:none;}
  .anchor-rail .rail-title{display:none;}
  .anchor-rail a{
    padding:6px 13px;
    border:1px solid var(--line);
    border-radius:999px;
    white-space:nowrap;
    font-size:13px;
  }
}
@media (max-width:640px){
  .hdr-utility-inner{flex-wrap:wrap;justify-content:flex-start;padding-top:8px;padding-bottom:8px;}
  .utility-meta{width:100%;justify-content:space-between;}
  .footer-grid{grid-template-columns:minmax(0,1fr);}
  .footer-base{flex-direction:column;align-items:flex-start;}
}

/* ---------- 13 动效降级 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js-ready [data-reveal]{opacity:1;transform:none;}
  .card:hover{transform:none;}
  .nav-link::after{transition:none;}
  .scroll-progress{display:none;}
}