/* ============================================================
   银河登陆站 · 共享样式表 /assets/site.css
   01 Reset  02 变量与中文排版  03 头部  04 页脚
   05 按钮与基础组件  06 网格与容器  07 图片容器  08 动效与响应式
   ============================================================ */

/* ---------- 01 Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
img,svg{display:block;max-width:100%}
svg{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}

/* ---------- 02 变量与中文排版 ---------- */
:root{
  --void:#070B1A;
  --indigo:#101A38;
  --line:#1E2A44;
  --frost:#F4F7FF;
  --stone:#6B7691;
  --ice:#7FD4FF;
  --cyan:#35E0D0;
  --magenta:#FF4D9D;
  --gold:#FFC46B;
  --crystal:#C9E6FF;

  --font-head:"HarmonyOS Sans SC","Noto Sans SC",Inter,"Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"PingFang SC","HarmonyOS Sans SC","Noto Sans SC",system-ui,-apple-system,"Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;

  --shell:1320px;
  --gutter:24px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --r-1:2px;
  --r-2:10px;
}

body{
  min-height:100vh;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  color:rgba(244,247,255,.92);
  background-color:var(--void);
  background-image:
    radial-gradient(1100px 560px at 8% -12%, rgba(53,224,208,.10), transparent 62%),
    radial-gradient(900px 520px at 92% -6%, rgba(255,77,157,.09), transparent 64%),
    radial-gradient(1400px 780px at 50% 112%, rgba(127,212,255,.08), transparent 60%);
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--font-head);font-weight:800;letter-spacing:.02em;color:var(--frost);line-height:1.28}
h1{font-size:48px}
h2{font-size:32px}
h3{font-size:24px}
h4{font-size:18px}
p{word-break:break-word}

.mono{font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;color:var(--stone)}

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

.skip-link{
  position:fixed;left:16px;top:-80px;z-index:400;
  padding:12px 22px;background:var(--gold);color:#23160a;
  font-weight:700;font-size:14px;letter-spacing:.06em;border-radius:var(--r-1);
  transition:top .18s var(--ease);
}
.skip-link:focus{top:16px}

/* ---------- 03 头部 ---------- */
.site-header{
  position:sticky;top:0;z-index:140;
  background:linear-gradient(180deg,rgba(7,11,26,.97),rgba(16,26,56,.93));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
  transition:box-shadow .24s var(--ease);
}
.site-header[data-scrolled="true"]{
  box-shadow:0 20px 44px -30px rgba(0,0,0,.95),0 1px 0 rgba(127,212,255,.18);
}
.header-frame{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}

.brand-band{border-bottom:1px dashed rgba(107,118,145,.28)}
.brand-band__inner{
  display:flex;align-items:center;gap:20px;
  min-height:76px;padding:10px 0;
}
.brand-mark{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand-mark__glyph{
  flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;
  border:1px solid rgba(127,212,255,.42);border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(53,224,208,.34),rgba(16,26,56,.92) 72%);
}
.brand-mark__glyph svg{width:24px;height:24px}
.brand-mark__text{display:flex;flex-direction:column;line-height:1.3}
.brand-mark__name{font-family:var(--font-head);font-size:18px;font-weight:800;letter-spacing:.1em;color:var(--frost)}
.brand-mark__line{font-size:12px;letter-spacing:.03em;color:var(--stone)}

.brand-status{
  display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0;
  font-size:12.5px;color:var(--stone);
}
.brand-status__dot{
  flex:0 0 7px;width:7px;height:7px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 0 3px rgba(53,224,208,.16);
}
.brand-status__label{color:var(--ice);font-size:12px;letter-spacing:.1em}
.brand-status__ver{color:var(--crystal)}
.brand-status__sep{color:rgba(107,118,145,.6)}
.brand-status__meta{color:var(--stone)}

.brand-band__cta{display:flex;align-items:center;gap:10px;flex:0 0 auto}

.nav-toggle{
  display:none;align-items:center;gap:9px;
  padding:9px 14px;border:1px solid rgba(127,212,255,.32);border-radius:var(--r-1);
  background:rgba(16,26,56,.9);color:var(--ice);
  font-size:13px;font-weight:700;letter-spacing:.1em;cursor:pointer;
  transition:border-color .16s var(--ease),background-color .16s var(--ease);
}
.nav-toggle:hover{border-color:var(--ice);background:rgba(127,212,255,.14)}
.nav-toggle__bars{display:inline-flex;flex-direction:column;gap:3px;width:16px}
.nav-toggle__bars span{display:block;height:2px;background:currentColor;transition:transform .16s var(--ease),opacity .16s var(--ease)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.primary-nav{position:relative}
.nav-track{display:flex;align-items:stretch;flex-wrap:wrap;gap:4px}
.nav-track__item{display:flex}
.nav-track__link{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  padding:14px 16px;font-size:14.5px;font-weight:700;letter-spacing:.04em;
  color:var(--stone);
  transition:color .16s var(--ease),background-color .16s var(--ease);
}
.nav-track__link:hover{color:var(--frost);background:rgba(127,212,255,.07)}
.nav-track__link[aria-current="page"]{color:var(--ice)}
.nav-track__link[aria-current="page"]::after{
  content:"";position:absolute;left:16px;right:16px;bottom:6px;height:2px;
  background:linear-gradient(90deg,var(--ice),var(--cyan) 62%,rgba(53,224,208,0));
}
.nav-track__num{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:rgba(107,118,145,.78)}
.nav-track__link[aria-current="page"] .nav-track__num{color:var(--cyan)}

.nav-dock{display:none}

/* ---------- 04 页脚 ---------- */
.site-footer{
  position:relative;margin-top:96px;padding:56px 0 32px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(16,26,56,.55),rgba(7,11,26,.98) 68%);
}
.site-footer::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(127,212,255,.6),rgba(255,77,157,.4),transparent);
}
.footer-frame{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:32px}

.footer-brand__name{font-family:var(--font-head);font-size:20px;font-weight:800;letter-spacing:.12em;color:var(--frost);margin-bottom:10px}
.footer-brand__line{font-size:13.5px;color:var(--stone);margin-bottom:12px}
.footer-brand__note{font-size:13px;letter-spacing:.16em;color:var(--ice);margin-bottom:12px}
.footer-code{font-size:12px;color:var(--stone);margin:0}

.footer-col__title{
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.18em;
  color:var(--crystal);margin-bottom:14px;
}
.footer-col__list{display:flex;flex-direction:column;gap:9px}
.footer-col__list a{font-size:13.5px;color:var(--stone);transition:color .16s var(--ease)}
.footer-col__list a:hover{color:var(--ice)}

.footer-contact{
  display:flex;flex-wrap:wrap;gap:8px 26px;
  margin-top:44px;padding-top:24px;
  border-top:1px dashed rgba(107,118,145,.28);
  font-size:13px;color:var(--stone);
}
.footer-contact__item{margin:0}
.footer-contact__label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  color:var(--cyan);margin-right:8px;
}
.footer-contact__note{width:100%;margin:0;font-size:12.5px;color:rgba(107,118,145,.9)}

.footer-base{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 24px;margin-top:26px;font-size:12px;color:var(--stone);
}
.footer-base__icp,.footer-base__sign,.footer-base__year{margin:0;font-size:12px;color:var(--stone)}

/* ---------- 05 按钮与基础组件 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border:1px solid transparent;border-radius:var(--r-1);
  font-size:14px;font-weight:700;letter-spacing:.05em;cursor:pointer;
  transition:transform .09s var(--ease),background-color .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--sm{padding:9px 15px;font-size:13px}
.btn--gold{background:linear-gradient(140deg,var(--gold),#FF9F4D);color:#23160a;box-shadow:0 12px 28px -18px rgba(255,196,107,.9)}
.btn--gold:hover{background:linear-gradient(140deg,#FFD48C,#FFB163)}
.btn--ghost{background:rgba(127,212,255,.06);border-color:rgba(127,212,255,.34);color:var(--ice)}
.btn--ghost:hover{background:rgba(127,212,255,.15);border-color:var(--ice)}

.card{
  position:relative;padding:24px;
  border:1px solid var(--line);border-radius:var(--r-1);
  background:linear-gradient(160deg,rgba(16,26,56,.95),rgba(7,11,26,.92));
}
.card::before{
  content:"";position:absolute;top:-1px;left:-1px;width:15px;height:15px;
  border-top:2px solid var(--ice);border-left:2px solid var(--ice);
}
.card__title{font-family:var(--font-head);font-size:18px;font-weight:800;letter-spacing:.04em;margin-bottom:8px;color:var(--frost)}
.card__meta{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--stone)}
.card__body{font-size:14.5px;color:rgba(244,247,255,.82);margin-top:10px}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border:1px solid rgba(127,212,255,.36);border-radius:999px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  color:var(--ice);background:rgba(127,212,255,.07);
}
.tag--cyan{border-color:rgba(53,224,208,.45);color:var(--cyan);background:rgba(53,224,208,.08)}
.tag--magenta{border-color:rgba(255,77,157,.45);color:var(--magenta);background:rgba(255,77,157,.08)}
.tag--gold{border-color:rgba(255,196,107,.48);color:var(--gold);background:rgba(255,196,107,.08)}

.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:22px 0 0;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--stone);
}
.breadcrumb a{color:var(--stone);transition:color .16s var(--ease)}
.breadcrumb a:hover{color:var(--ice)}
.breadcrumb__sep{color:rgba(107,118,145,.55)}
.breadcrumb [aria-current="page"]{color:var(--crystal)}

.prose{max-width:68ch;font-size:17px;line-height:1.75;color:rgba(244,247,255,.92)}
.prose p{margin:0 0 1.1em}
.prose h2{font-size:24px;margin:1.8em 0 .6em}
.prose h3{font-size:18px;margin:1.6em 0 .5em;color:var(--ice)}
.prose ul{list-style:disc;padding-left:1.35em;margin:0 0 1.1em}
.prose ol{list-style:decimal;padding-left:1.45em;margin:0 0 1.1em}
.prose li{margin:.32em 0}
.prose strong{color:#fff}
.prose a{color:var(--ice);border-bottom:1px solid rgba(127,212,255,.4)}
.prose code{font-family:var(--font-mono);font-size:.92em;background:rgba(127,212,255,.1);padding:1px 6px;border-radius:var(--r-1)}

.data-table{font-size:14px}
.data-table th,.data-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.data-table thead th{
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;
  color:var(--crystal);background:rgba(16,26,56,.82);
}
.data-table tbody tr{transition:background-color .16s var(--ease)}
.data-table tbody tr:hover{background:rgba(127,212,255,.05)}
.data-table td.is-mono{font-family:var(--font-mono);font-size:13px;color:var(--stone)}

.orbit{position:relative;padding-left:30px}
.orbit::before{
  content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,rgba(127,212,255,.55),rgba(30,42,68,.35));
}
.orbit__node{
  position:absolute;left:2px;width:11px;height:11px;border-radius:50%;
  background:var(--void);border:2px solid var(--cyan);
}

/* ---------- 06 容器与网格 ---------- */
.container{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
.container--narrow{max-width:900px}

.section{padding:76px 0}
.section__head{
  display:flex;align-items:flex-start;gap:20px;
  padding-bottom:20px;margin-bottom:32px;
  border-bottom:1px solid rgba(30,42,68,.9);
}
.section__index{
  font-family:var(--font-mono);font-size:48px;line-height:1;font-weight:700;
  letter-spacing:.02em;color:rgba(127,212,255,.24);
}
.section__title{font-size:32px;font-weight:800;letter-spacing:.04em;margin:0}
.section__lead{margin-top:8px;max-width:62ch;color:var(--stone);font-size:15px}

.grid{display:grid;gap:24px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--7-3{grid-template-columns:minmax(0,7fr) minmax(0,3fr)}
.grid--8-4{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}

/* ---------- 07 图片容器 ---------- */
.img-frame{
  position:relative;overflow:hidden;
  aspect-ratio:16/9;
  border:1px solid var(--line);border-radius:var(--r-1);
  background:
    radial-gradient(420px 220px at 26% 18%, rgba(127,212,255,.16), transparent 70%),
    radial-gradient(360px 200px at 78% 82%, rgba(255,77,157,.14), transparent 72%),
    linear-gradient(150deg,rgba(16,26,56,.96),rgba(7,11,26,.98));
}
.img-frame img{width:100%;height:100%;object-fit:cover}
.img-frame__caption{
  position:absolute;left:14px;bottom:12px;
  padding:4px 10px;border:1px solid rgba(127,212,255,.28);
  background:rgba(7,11,26,.82);border-radius:var(--r-1);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--crystal);
}
.img-frame--wide{aspect-ratio:21/9}
.img-frame--square{aspect-ratio:1/1}
.img-frame--portrait{aspect-ratio:4/5}

/* ---------- 08 动效与响应式 ---------- */
html.js-reveal [data-reveal]{opacity:0;transform:translateY(16px)}
html.js-reveal [data-reveal].is-visible{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:var(--reveal-delay,0ms);
}

@media (max-width:1080px){
  h1{font-size:38px}
  .brand-status__meta{display:none}
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-brand{grid-column:1 / -1}
}

@media (max-width:980px){
  .grid--7-3,.grid--8-4{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:900px){
  :root{--gutter:16px}
  .brand-band__inner{min-height:62px;gap:12px;justify-content:space-between}
  .brand-mark__line{display:none}
  .brand-mark__glyph{flex:0 0 34px;width:34px;height:34px}
  .brand-mark__glyph svg{width:20px;height:20px}
  .brand-band__cta{display:none}
  .nav-toggle{display:inline-flex}
  .brand-status{justify-content:flex-end;font-size:11.5px}
  .brand-status__sep{display:none}
  .brand-status__label{display:none}

  .primary-nav{
    position:fixed;left:0;right:0;top:0;bottom:0;z-index:130;
    display:flex;flex-direction:column;
    padding:112px 24px 40px;overflow-y:auto;
    background:
      radial-gradient(620px 320px at 84% 4%, rgba(255,77,157,.18), transparent 62%),
      radial-gradient(700px 420px at 6% 12%, rgba(53,224,208,.14), transparent 66%),
      rgba(7,11,26,.985);
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-10px);
    transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s linear;
  }
  .primary-nav[data-open="true"]{opacity:1;visibility:visible;pointer-events:auto;transform:none}

  .nav-dock{
    display:flex;flex-direction:column;gap:10px;
    margin-bottom:26px;padding-bottom:24px;
    border-bottom:1px dashed rgba(107,118,145,.32);
  }
  .nav-dock__link{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 16px;border:1px solid rgba(127,212,255,.3);border-radius:var(--r-1);
    background:rgba(16,26,56,.72);color:var(--ice);
    font-family:var(--font-head);font-size:15px;font-weight:700;letter-spacing:.06em;
  }
  .nav-dock__link--gold{border-color:rgba(255,196,107,.42);background:rgba(255,196,107,.09);color:var(--gold)}

  .nav-track{flex-direction:column;flex-wrap:nowrap;gap:0}
  .nav-track__item{width:100%}
  .nav-track__link{
    width:100%;padding:16px 4px;font-family:var(--font-head);
    font-size:19px;font-weight:700;letter-spacing:.06em;
    border-bottom:1px solid rgba(30,42,68,.9);
  }
  .nav-track__link[aria-current="page"]::after{display:none}
  .nav-track__num{width:36px;font-size:12px}

  .section{padding:52px 0}
  .section__head{gap:14px}
  .section__index{font-size:34px}
  .section__title{font-size:24px}
  .site-footer{margin-top:64px;padding-top:44px}
  .grid--3{grid-template-columns:minmax(0,1fr)}
}

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

@media (max-width:480px){
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .brand-status{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  html.js-reveal [data-reveal]{opacity:1;transform:none}
}