/* ============================================================
   MANBET登录 · 共享外壳样式 /assets/site.css
   深空蓝控制台 + 侧边轨道导航
   ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root{
  --ink-0:#050E1F;
  --ink-1:#0B1E3A;
  --ink-2:#132A4A;
  --line:#1E3A5F;

  --orange:#FF6B35;
  --teal:#00C9A7;
  --blue:#2D7FF9;
  --amber:#FFB020;

  --text:#E6F1FF;
  --muted:#9BB0C9;
  --faint:#6F87A3;

  --rail:272px;
  --bar-h:64px;
  --gutter:20px;

  --radius:14px;
  --radius-sm:10px;

  --font-sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-hard:6px 6px 0 rgba(5,14,31,.78);
}
@media (min-width:1440px){ :root{ --rail:304px; } }

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  background:var(--ink-0);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--bar-h) + 24px);
}
body{
  margin:0;
  min-height:100vh;
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.8;
  font-weight:400;
  color:var(--text);
  background-color:var(--ink-1);
  background-image:
    radial-gradient(1100px 640px at 84% -14%, rgba(45,127,249,.22), transparent 62%),
    radial-gradient(860px 560px at 6% 108%, rgba(0,201,167,.14), transparent 68%),
    linear-gradient(180deg,#0B1E3A 0%,#08172E 52%,#050E1F 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(30,58,95,.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,58,95,.30) 1px, transparent 1px);
  background-size:72px 72px,72px 72px;
  -webkit-mask-image:radial-gradient(130% 95% at 62% 0%, #000 0%, transparent 74%);
  mask-image:radial-gradient(130% 95% at 62% 0%, #000 0%, transparent 74%);
}
h1,h2,h3,h4,h5{ margin:0; font-weight:800; line-height:1.14; letter-spacing:-.02em; }
p{ margin:0; }
img,svg,video,picture{ display:block; max-width:100%; height:auto; }
button{ font:inherit; color:inherit; }
a{ color:var(--blue); }
::selection{ background:var(--orange); color:#0B1220; }

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

/* ---------- 3. 跳至主内容 ---------- */
.skip-link{
  position:fixed;
  top:10px;
  left:12px;
  z-index:200;
  padding:10px 16px;
  border-radius:var(--radius-sm);
  background:var(--orange);
  color:#0B1220;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  transform:translateY(-200%);
  transition:transform .22s var(--ease);
}
.skip-link:focus{ transform:translateY(0); }

/* ---------- 4. 页头 / 侧边轨道 ---------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--bar-h);
  z-index:60;
  color:var(--text);
  background:rgba(5,14,31,.97);
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  height:100%;
  padding:0 var(--gutter);
}

/* 品牌 */
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:0;
  text-decoration:none;
  color:var(--text);
}
.brand__mark{
  flex:0 0 auto;
  width:36px; height:36px;
  display:grid; place-items:center;
  border:2px solid var(--orange);
  border-radius:var(--radius-sm);
  font-family:var(--font-mono);
  font-size:16px; font-weight:700;
  color:var(--orange);
  background:linear-gradient(140deg, rgba(255,107,53,.24), rgba(255,107,53,0));
  box-shadow:3px 3px 0 rgba(0,201,167,.30);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.brand:hover .brand__mark{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 rgba(0,201,167,.45); }
.brand__text{ display:flex; flex-direction:column; min-width:0; }
.brand__name{ font-size:17px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; }
.brand__tag{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.06em;
  color:var(--muted); white-space:nowrap;
}
@media (max-width:560px){ .brand__tag{ display:none; } }

/* 移动导航按钮 */
.nav-toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  background:var(--ink-2);
  border:2px solid var(--line);
  border-radius:12px;
  color:var(--text);
  font-size:14px; font-weight:700;
  cursor:pointer;
  transition:border-color .2s, background .2s, color .2s;
}
.nav-toggle:hover{ border-color:var(--blue); }
.nav-toggle[aria-expanded="true"]{ border-color:var(--orange); background:rgba(255,107,53,.16); }
.nav-toggle__bars{ display:grid; gap:4px; width:18px; }
.nav-toggle__bars span{
  display:block; height:2px; width:100%;
  background:currentColor; border-radius:2px;
  transition:transform .26s var(--ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){ transform:translateY(6px) 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(-6px) rotate(-45deg); }

/* 导航（移动端抽屉） */
.site-nav{
  position:fixed;
  top:var(--bar-h); left:0; right:0;
  height:calc(100vh - var(--bar-h));
  height:calc(100dvh - var(--bar-h));
  z-index:55;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:20px var(--gutter) 34px;
  overflow-y:auto;
  background:linear-gradient(180deg,#050E1F 0%,#0B1E3A 100%);
  border-top:1px solid var(--line);
  transform:translateX(100%);
  opacity:0;
  visibility:hidden;
  transition:transform .34s var(--ease), opacity .28s var(--ease), visibility .34s;
}
.site-nav[data-open]{
  transform:translateX(0);
  opacity:1;
  visibility:visible;
}
.site-nav__meta{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal);
}
.site-nav__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.site-nav__item{ display:block; }

.nav-link{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:13px 14px;
  border:1px solid transparent;
  border-radius:12px;
  color:var(--muted);
  font-size:16px; font-weight:600; line-height:1.3;
  text-decoration:none;
  transition:color .2s, background .2s, border-color .2s, transform .22s var(--ease);
}
.nav-link::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:3px; height:0;
  border-radius:0 3px 3px 0;
  background:var(--orange);
  transform:translateY(-50%);
  transition:height .24s var(--ease);
}
.nav-link:hover{
  color:var(--text);
  background:rgba(19,42,74,.78);
  border-color:var(--line);
  transform:translateX(3px);
}
.nav-link:hover::before{ height:56%; }
.nav-link[aria-current="page"]{
  color:var(--text);
  background:linear-gradient(90deg, rgba(255,107,53,.22), rgba(255,107,53,0) 74%);
  border-color:rgba(255,107,53,.48);
}
.nav-link[aria-current="page"]::before{ height:72%; }
.nav-link__idx{
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.08em;
  color:var(--muted); opacity:.85;
}
.nav-link[aria-current="page"] .nav-link__idx{ color:var(--orange); opacity:1; }
.nav-link__label{ min-width:0; }

.site-nav__foot{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-top:16px;
  border-top:1px dashed var(--line);
}
.site-nav__status{
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.05em;
  color:var(--muted);
}

.status-dot{
  display:inline-block;
  width:7px; height:7px;
  margin-right:6px;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 3px rgba(0,201,167,.18);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.35; }
}

/* 阅读进度 */
.read-progress{
  position:fixed;
  top:var(--bar-h); left:0; right:0;
  height:3px;
  z-index:70;
  pointer-events:none;
  background:rgba(30,58,95,.55);
}
.read-progress__bar{
  display:block;
  width:100%; height:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg, var(--orange), var(--amber), var(--teal));
}

/* ---------- 5. 主体与页脚让位 ---------- */
#main-content{
  position:relative;
  z-index:1;
  padding:calc(var(--bar-h) + 24px) 0 64px;
}
.site-footer{
  position:relative;
  z-index:1;
  margin-left:0;
}

/* ---------- 6. 桌面端：侧边轨道 ---------- */
@media (min-width:1024px){
  .site-header{
    top:0; left:0; bottom:0; right:auto;
    width:var(--rail);
    height:100vh;
    border-bottom:0;
    border-right:1px solid var(--line);
    background:linear-gradient(180deg,#050E1F 0%,#0B1E3A 58%,#050E1F 100%);
  }
  .site-header::after{
    content:"";
    position:absolute;
    top:0; bottom:0; right:-1px;
    width:1px;
    background:linear-gradient(180deg, var(--orange), transparent 34%, transparent 66%, var(--teal));
    opacity:.55;
  }
  .site-header__inner{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    height:100%;
    gap:24px;
    padding:28px 20px 24px;
  }
  .brand{ width:100%; }
  .brand__mark{ width:40px; height:40px; font-size:17px; }
  .brand__name{ font-size:19px; }
  .nav-toggle{ display:none; }

  .site-nav{
    position:static;
    height:auto;
    flex:1 1 auto;
    min-height:0;
    padding:0;
    overflow-y:auto;
    background:none;
    border-top:0;
    transform:none;
    opacity:1;
    visibility:visible;
    transition:none;
  }
  .site-nav::-webkit-scrollbar{ width:6px; }
  .site-nav::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px; }
  .nav-link{ font-size:16px; }

  .read-progress{ top:0; left:var(--rail); }

  #main-content{
    margin-left:var(--rail);
    padding:56px 0 96px;
  }
  .site-footer{ margin-left:var(--rail); }
}

/* ---------- 7. 通用排版与容器 ---------- */
.wrap{
  width:min(100% - 40px, 1120px);
  margin-inline:auto;
}
@media (max-width:480px){ .wrap{ width:min(100% - 28px, 1120px); } }

.section{ padding:44px 0; }
.section--tight{ padding:24px 0; }
@media (min-width:1024px){
  .section{ padding:72px 0; }
  .section--tight{ padding:36px 0; }
}

.eyebrow{
  margin:0 0 12px;
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal);
}
.display{
  margin:0;
  font-weight:900;
  font-size:clamp(48px,9vw,128px);
  line-height:1.02;
  letter-spacing:-.02em;
}
.page-title{
  margin:0;
  font-weight:900;
  font-size:clamp(32px,5vw,64px);
  line-height:1.06;
}
.section-title{
  margin:0;
  font-weight:700;
  font-size:clamp(22px,3vw,36px);
  line-height:1.16;
}
.lede{
  max-width:62ch;
  font-size:clamp(17px,1.6vw,20px);
  line-height:1.8;
  color:var(--muted);
}
.mono{ font-family:var(--font-mono); letter-spacing:.05em; }
.muted{ color:var(--muted); }

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(19,42,74,.65);
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.06em;
  color:var(--muted);
}
.tag--orange{ color:var(--orange); border-color:rgba(255,107,53,.5); }
.tag--teal{ color:var(--teal); border-color:rgba(0,201,167,.5); }
.tag--amber{ color:var(--amber); border-color:rgba(255,176,32,.5); }

/* ---------- 8. 表面与网格 ---------- */
.grid{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:640px){
  .grid--2,
  .grid--3,
  .grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px){
  .grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

.panel{
  padding:22px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--ink-2);
}
.panel--flat{ background:rgba(19,42,74,.52); }

.card{
  position:relative;
  padding:22px;
  border:2px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(160deg,#132A4A 0%,#0B1E3A 100%);
  box-shadow:var(--shadow-hard);
  transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s;
}
.card:hover{
  transform:translate(-3px,-3px);
  box-shadow:10px 10px 0 rgba(5,14,31,.85);
  border-color:var(--blue);
}

.rule{ height:1px; margin:32px 0; border:0; background:var(--line); }

/* ---------- 9. 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 20px;
  border:2px solid transparent;
  border-radius:12px;
  font-size:15px; font-weight:700; line-height:1.3;
  text-decoration:none;
  cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, border-color .2s, color .2s;
}
.btn--primary{
  background:var(--orange);
  color:#0B1220;
  box-shadow:4px 4px 0 rgba(0,201,167,.35);
}
.btn--primary:hover{
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 rgba(0,201,167,.5);
}
.btn--teal{
  background:var(--teal);
  color:#04121A;
  box-shadow:4px 4px 0 rgba(45,127,249,.35);
}
.btn--teal:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 rgba(45,127,249,.5); }
.btn--ghost{
  border-color:var(--line);
  background:rgba(19,42,74,.6);
  color:var(--text);
}
.btn--ghost:hover{ border-color:var(--blue); background:rgba(45,127,249,.16); }
.btn--block{ width:100%; }

/* ---------- 10. 面包屑 ---------- */
.breadcrumb{ margin:0 0 22px; }
.breadcrumb__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0; padding:0;
  list-style:none;
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.06em;
}
.breadcrumb__item{ display:flex; align-items:center; gap:8px; color:var(--muted); }
.breadcrumb__item + .breadcrumb__item::before{ content:"/"; color:var(--line); }
.breadcrumb__link{
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px dashed transparent;
  transition:color .2s, border-color .2s;
}
.breadcrumb__link:hover{ color:var(--teal); border-bottom-color:var(--teal); }
.breadcrumb__current{ color:var(--text); }

/* ---------- 11. 锚点目录 ---------- */
.toc{ position:relative; }
.toc__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.toc__link{
  display:block;
  padding:9px 12px;
  border-left:2px solid var(--line);
  color:var(--muted);
  font-size:14px;
  text-decoration:none;
  transition:color .2s, border-color .2s, background .2s;
}
.toc__link:hover{ color:var(--text); border-left-color:var(--blue); background:rgba(45,127,249,.10); }
.toc__link[data-active]{
  color:var(--text);
  border-left-color:var(--orange);
  background:rgba(255,107,53,.10);
}

/* ---------- 12. 图片容器 ---------- */
.media{
  position:relative;
  overflow:hidden;
  aspect-ratio:16 / 10;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(150deg,#132A4A 0%,#050E1F 100%);
}
.media img,
.media picture img{ width:100%; height:100%; object-fit:cover; }
.media--wide{ aspect-ratio:16 / 7; }
.media--square{ aspect-ratio:1 / 1; }
.media--ph::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(30,58,95,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,58,95,.55) 1px, transparent 1px);
  background-size:44px 44px,44px 44px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 50%, #000 20%, transparent 78%);
  mask-image:radial-gradient(120% 100% at 50% 50%, #000 20%, transparent 78%);
}
.media__tag{ position:absolute; left:14px; bottom:14px; z-index:2; }

/* ---------- 13. 页脚 ---------- */
.site-footer{
  color:var(--muted);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(11,30,58,.6) 0%, #050E1F 46%, #050E1F 100%);
}
.site-footer::before{
  content:"";
  display:block;
  height:1px;
  background:linear-gradient(90deg, var(--orange), var(--teal) 42%, transparent 88%);
}
.site-footer__inner{
  width:min(100% - 40px, 1180px);
  margin-inline:auto;
  padding:52px 0 30px;
  display:grid;
  gap:34px;
  grid-template-columns:1fr;
}
@media (min-width:640px){
  .site-footer__inner{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px){
  .site-footer__inner{ grid-template-columns:1.5fr 1fr 1fr 1.4fr; gap:40px; }
}

.footer-brand__mark{
  margin:0 0 10px;
  font-family:var(--font-mono);
  font-size:clamp(22px,2.6vw,30px);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--text);
}
.footer-brand__mark span{ color:var(--orange); }
.footer-brand__tagline{
  margin:0 0 14px;
  font-size:15px;
  color:var(--muted);
}
.footer-brand__status{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(19,42,74,.6);
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.05em;
  color:var(--muted);
}

.footer-col{ min-width:0; }
.footer-col__title{
  margin:0 0 14px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--text);
}
.footer-col__title::after{
  content:"";
  display:block;
  width:26px; height:2px;
  margin-top:8px;
  background:var(--orange);
}
.footer-col__note{
  margin-top:14px;
  font-size:13px;
  line-height:1.7;
  color:var(--faint);
}

.footer-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.footer-list--contact{ gap:0; }
.footer-link{
  color:var(--muted);
  font-size:15px;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.footer-link:hover{ color:var(--text); border-bottom-color:var(--teal); }

.contact-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 12px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px dashed var(--line);
}
.contact-item__label{
  grid-column:1 / -1;
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint);
}
.contact-item__value{
  font-size:15px;
  color:var(--text);
  word-break:break-all;
}
.copy-btn{
  align-self:center;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--ink-2);
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.05em;
  cursor:pointer;
  transition:color .2s, border-color .2s, background .2s;
}
.copy-btn:hover{ color:var(--text); border-color:var(--teal); background:rgba(0,201,167,.14); }
.copy-btn[data-copied]{ color:var(--teal); border-color:var(--teal); }

.footer-legal{
  width:min(100% - 40px, 1180px);
  margin-inline:auto;
  padding:20px 0 34px;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 24px;
  font-size:13px;
}
.footer-legal__text{ flex:1 1 320px; margin:0; color:var(--faint); line-height:1.7; }
.footer-legal__links{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  margin:0; padding:0;
  list-style:none;
}
.footer-legal__icp{
  flex:1 1 100%;
  margin:0;
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.05em;
  color:var(--faint);
}

/* ---------- 14. 显现与工具类 ---------- */
.has-js [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .62s var(--ease), transform .62s var(--ease);
}
.has-js [data-reveal].is-in{ opacity:1; transform:none; }

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

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