/* ==========================================================================
   waver · 设计系统
   色板与形态取自参考设计稿：Inter 字体 / 近黑主色 / 细描边 / 大圆角胶囊
   ========================================================================== */

:root{
  /* —— 色板 —— */
  --ink:        #0A1317;
  --ink-2:      #1C1E21;
  --ink-3:      #444950;
  --muted:      #8595A4;
  --muted-2:    #5D6C7B;
  --line:       #E4E8EE;
  --line-2:     #DEE3E9;
  --line-strong:#BCC0C4;
  --surface:    #F1F4F7;
  --surface-2:  #EDF1F7;
  --surface-3:  #F7F9FB;
  --white:      #FFFFFF;
  --blue:       #0064E0;
  --green:      #31A24C;
  --red:        #D93A3A;
  --amber:      #B7791F;

  /* —— 圆角 —— */
  --r-pill: 999px;
  --r-lg:   24px;
  --r-md:   14px;
  --r-sm:   10px;

  /* —— 阴影 —— */
  --sh-xs: 0 1px 2px rgba(10,19,23,.04);
  --sh-sm: 0 2px 8px rgba(10,19,23,.05);
  --sh-md: 0 10px 34px rgba(10,19,23,.07);
  --sh-lg: 0 28px 70px rgba(10,19,23,.12);

  --container: 1180px;
  --nav-h: 66px;

  --font:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI',
         'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC',sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
}

/* —— Reset —— */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
table{border-collapse:collapse;width:100%}

/* —— 排版 —— */
.h1{font-size:clamp(38px,5vw,62px);font-weight:800;letter-spacing:-.035em;line-height:1.04}
.h2{font-size:clamp(28px,3.4vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1.12}
.h3{font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.h4{font-size:17px;font-weight:700;letter-spacing:-.01em}
.lead{font-size:clamp(15px,1.35vw,18px);line-height:1.65;color:var(--muted-2)}
.muted{color:var(--muted)}
.tiny{font-size:12.5px}
.center{text-align:center}
.mono{font-family:var(--mono);font-size:12.5px}

/* —— 布局 —— */
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:96px 0}
.section-sm{padding:64px 0}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.between{display:flex;align-items:center;justify-content:space-between}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mt-32{margin-top:32px}.mt-40{margin-top:40px}.mt-56{margin-top:56px}
.hide{display:none !important}

/* —— 公告：顶部把手 + 可收起浮层 —— */
.ann-dock{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  z-index:70;display:flex;flex-direction:column;align-items:center;
  pointer-events:none;
}
.ann-tab{
  pointer-events:auto;
  display:inline-flex;align-items:center;gap:7px;
  height:26px;padding:0 14px;
  border-radius:0 0 12px 12px;
  background:var(--ink);color:#CDD7E1;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;
  box-shadow:0 6px 18px rgba(10,19,23,.16);
  transition:border-radius .3s, background .2s, color .2s;
}
.ann-tab:hover{background:#16232a;color:#fff}
.ann-tab-dot{
  width:6px;height:6px;border-radius:50%;background:var(--green);
}
.ann-caret{transition:transform .35s;opacity:.75}
.ann-dock.is-open .ann-caret,.ann-dock:hover .ann-caret,.ann-dock:focus-within .ann-caret{transform:rotate(180deg)}
.ann-panel{
  pointer-events:none;
  width:min(600px,calc(100vw - 24px));
  background:var(--ink);color:#E7EDF3;
  border-radius:0 0 18px 18px;
  padding:0 0;max-height:0;opacity:0;overflow:hidden;
  box-shadow:0 22px 46px rgba(10,19,23,.2);
  transition:max-height .45s cubic-bezier(.22,1,.36,1),
             opacity .3s ease,
             padding .45s cubic-bezier(.22,1,.36,1);
}
.ann-dock.is-open .ann-panel,
.ann-dock:hover .ann-panel,
.ann-dock:focus-within .ann-panel{
  pointer-events:auto;
  max-height:min(300px,52vh);opacity:1;
  padding:14px 24px 18px;overflow:auto;
}
.ann-dock.is-open .ann-tab,.ann-dock:hover .ann-tab,.ann-dock:focus-within .ann-tab{border-radius:0}
.ann-panel-head{
  font-size:11px;font-weight:700;letter-spacing:.12em;color:#7E909F;
  text-transform:uppercase;margin-bottom:8px;
}
.ann-panel-body{
  font-size:13px;line-height:1.85;white-space:pre-wrap;color:#E7EDF3;
}

/* —— 顶部提示条 —— */
.toasts{
  position:fixed;top:16px;right:16px;z-index:120;
  display:flex;flex-direction:column;gap:10px;max-width:320px;
}
.toast{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:12px 16px;font-size:13px;font-weight:600;color:var(--ink);
  box-shadow:var(--sh-md);animation:toastIn .32s cubic-bezier(.22,1,.36,1);
  transition:opacity .35s, transform .35s;
}
.toast-ok{border-color:#BFE3C6;background:#F2FBF4;color:#1F6B33}
.toast-err{border-color:#F5C2C0;background:#FEF3F2;color:#B42318}
.toast.is-out{opacity:0;transform:translateY(-10px)}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* —— 无障碍：只给读屏的文字 —— */
.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;
}

/* —— 导航 —— */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--container);margin:0 auto;padding:0 24px;
  height:var(--nav-h);display:flex;align-items:center;gap:28px;
}
.brand{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:800;letter-spacing:-.035em}
.brand-mark{
  width:27px;height:27px;flex:0 0 27px;
  background:url('logo.png') center/contain no-repeat;
}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:6px}
.nav-links a{
  font-size:13.5px;font-weight:500;color:var(--muted-2);
  padding:8px 14px;border-radius:var(--r-pill);transition:.18s;
}
.nav-links a:hover{color:var(--ink);background:var(--surface)}
.nav-links a.active{color:#fff;background:var(--ink);font-weight:600}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-user{font-size:13.5px;font-weight:600;color:var(--ink-3)}

/* —— 右上角账号菜单（悬停展开） —— */
.nav-menu{position:relative}
.nav-menu-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:36px;padding:0 12px 0 8px;border-radius:var(--r-pill);
  border:1px solid transparent;background:transparent;
  font-size:13.5px;font-weight:600;color:var(--ink-3);cursor:pointer;
  transition:background .18s, border-color .18s;
}
.nav-menu:hover .nav-menu-btn,
.nav-menu.is-open .nav-menu-btn{background:var(--surface);border-color:var(--line)}
.nav-ava{
  width:24px;height:24px;border-radius:50%;flex:0 0 24px;
  background:var(--ink);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;letter-spacing:0;
}
.nav-menu-caret{opacity:.55;transition:transform .25s}
.nav-menu:hover .nav-menu-caret,
.nav-menu.is-open .nav-menu-caret{transform:rotate(180deg)}

.nav-menu-panel{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:196px;padding:6px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-md);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s, transform .18s, visibility .18s;
  z-index:80;
}
/* 这块透明区域填掉按钮与面板之间的空隙，否则鼠标移过去会掉出 hover */
.nav-menu-panel::before{
  content:"";position:absolute;left:0;right:0;top:-10px;height:10px;
}
.nav-menu:hover .nav-menu-panel,
.nav-menu:focus-within .nav-menu-panel,
.nav-menu.is-open .nav-menu-panel{
  opacity:1;visibility:visible;transform:translateY(0);
}
.nav-menu-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 11px;border-radius:var(--r-sm);
  font-size:13px;font-weight:500;color:var(--ink-3);
  background:transparent;border:0;cursor:pointer;text-align:left;
  transition:background .15s, color .15s;
}
.nav-menu-item svg{flex:0 0 15px;opacity:.62}
.nav-menu-item:hover{background:var(--surface);color:var(--ink)}
.nav-menu-item:hover svg{opacity:.9}
.nav-menu-sep{height:1px;background:var(--line);margin:5px 8px}
.nav-menu-out:hover{background:rgba(217,58,58,.07);color:#B42318}

.modal-card-sm{max-width:440px}
.pwd-msg{min-height:18px;margin:-6px 0 10px;color:#B42318}
.nav-toggle{display:none;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);
  align-items:center;justify-content:center}
.nav-toggle span{display:block;width:16px;height:1.6px;background:var(--ink);position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:16px;height:1.6px;background:var(--ink)}
.nav-toggle span::before{top:-5px}.nav-toggle span::after{top:5px}

/* —— 按钮 —— */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 22px;border-radius:var(--r-pill);
  font-size:13.5px;font-weight:600;letter-spacing:.01em;
  white-space:nowrap;transition:.18s;border:1px solid transparent;
}
.btn-sm{height:34px;padding:0 16px;font-size:12.5px}
.btn-lg{height:50px;padding:0 30px;font-size:14.5px}
.btn-block{width:100%}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#1d2a31;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--surface);border-color:var(--muted)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:#eef1f5}
.btn-soft{background:var(--surface);color:var(--ink)}
.btn-soft:hover{background:#e6ebf1}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:#0055bd}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}
.btn-icon{width:34px;height:34px;padding:0;border-radius:10px;border:1px solid var(--line);
  background:#fff;color:var(--muted-2)}
.btn-icon:hover{background:var(--surface);color:var(--ink)}

/* —— 药丸 / 徽标 —— */
.pill{
  display:inline-flex;align-items:center;gap:7px;
  height:30px;padding:0 14px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);
  font-size:12.5px;font-weight:500;color:var(--muted-2);
}
.pill-plain{background:#fff;border-color:var(--line);box-shadow:var(--sh-xs)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 7px}
.dot-blue{background:var(--blue)}
.dot-amber{background:var(--amber)}
.dot-red{background:var(--red)}
.badge{
  display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;
  border-radius:var(--r-pill);font-size:11.5px;font-weight:600;letter-spacing:.02em;
}
.badge-green{background:rgba(49,162,76,.10);color:#25793a}
.badge-gray{background:var(--surface);color:var(--muted-2)}
.badge-red{background:rgba(217,58,58,.10);color:#a82c2c}
.badge-blue{background:rgba(0,100,224,.10);color:#0055bd}
.badge-ink{background:var(--ink);color:#fff}
.badge-amber{background:rgba(183,121,31,.12);color:#8a5a13}

/* —— 卡片 —— */
.card{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:28px;
}
.card-flat{border-radius:var(--r-md);padding:20px}
.card-dark{background:var(--ink);border-color:var(--ink);color:#E7EDF3}
.card-dark .muted,.card-dark .lead{color:rgba(231,237,243,.62)}
.card-hover{transition:.2s}
.card-hover:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.card-title{font-size:14.5px;font-weight:700;letter-spacing:-.01em}

/* —— Hero —— */
.hero{padding:76px 0 64px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-meta{margin-top:26px;font-size:12.5px;color:var(--muted);letter-spacing:.02em}

/* —— 首屏标题：逐字沙化消散 → 被风吹走 → 重新聚拢，无限循环 ——
   12s 一个周期：0–58% 完全清晰（保证标题大部分时间可读），58–84% 沙化飘散，
   84–100% 聚拢回位。颗粒位移滤镜只在消散阶段挂上，静止时文字保持锐利。 */
.sand-defs{position:absolute;width:0;height:0;overflow:hidden}
.sand-title{
  animation:sandGrain 12s linear infinite;
  will-change:filter;
}
.sand-line{display:block;white-space:nowrap}
.sand-ch{
  display:inline-block;font-style:normal;
  -webkit-mask-image:linear-gradient(96deg,#000 0 40%,rgba(0,0,0,.5) 62%,transparent 86%);
  -webkit-mask-size:280% 100%;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:0% 0;
  mask-image:linear-gradient(96deg,#000 0 40%,rgba(0,0,0,.5) 62%,transparent 86%);
  mask-size:280% 100%;
  mask-repeat:no-repeat;
  mask-position:0% 0;
  animation:sandBlow 12s cubic-bezier(.42,0,.32,1) infinite,
            sandMask 12s cubic-bezier(.42,0,.32,1) infinite;
  animation-delay:calc(var(--i) * 70ms), calc(var(--i) * 70ms);
  will-change:transform,opacity,filter;
}
@keyframes sandBlow{
  0%,58%   {opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
  70%      {opacity:.7;transform:translate3d(6px,3px,0);filter:blur(.6px)}
  80%      {opacity:0;transform:translate3d(22px,9px,0);filter:blur(2.2px)}
  84%      {opacity:0;transform:translate3d(22px,9px,0);filter:blur(2.2px)}
  94%      {opacity:.55;transform:translate3d(8px,4px,0);filter:blur(1.1px)}
  100%     {opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
}
@keyframes sandMask{
  0%,58%   {mask-position:0% 0;-webkit-mask-position:0% 0}
  80%      {mask-position:100% 0;-webkit-mask-position:100% 0}
  84%,100% {mask-position:0% 0;-webkit-mask-position:0% 0}
}
@keyframes sandGrain{
  0%,56%   {filter:none}
  58%,96%  {filter:url(#sandGrain)}
  98%,100% {filter:none}
}
@media (prefers-reduced-motion: reduce){
  .sand-title{animation:none;filter:none}
  .sand-ch{
    animation:none;mask-image:none;-webkit-mask-image:none;
    opacity:1;transform:none;filter:none;
  }
  .nv-arcs-flow path,.nv-packets circle{display:none}
}

/* 节点可视化：真实世界地图（Natural Earth 墨卡托投影）+ 实时延迟 */
.netviz{
  position:relative;border-radius:26px;overflow:hidden;
  background:linear-gradient(180deg,#F4F7FB 0%,#E9EFF7 55%,#E3EBF5 100%);
  border:1px solid #E1E8F0;
  aspect-ratio:1000/668;
}
.netviz-map{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:.96;
}
.netviz-lines{position:absolute;inset:0;width:100%;height:100%}

.nv-cities circle{fill:#9FB0C2}
.nv-arcs path{fill:none;stroke:#0064E0;stroke-opacity:.18;stroke-width:1.1}
.nv-arcs-flow path{
  fill:none;stroke:#0064E0;stroke-opacity:.62;stroke-width:1.5;
  stroke-linecap:round;stroke-dasharray:11 89;
  animation:nvFlow 4.6s linear infinite;
}
@keyframes nvFlow{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
.nv-packets circle{fill:#0064E0;opacity:.9}
.nv-ring{fill:none;stroke:#0064E0;stroke-width:1.2;stroke-opacity:.26}

/* 挂在节点旁的实时延迟小牌 */
.nv-pin{position:absolute;width:0;height:0;z-index:3}
.nv-pin-card{
  position:absolute;right:16px;bottom:10px;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:#fff;border-radius:var(--r-pill);
  padding:8px 15px;font-size:12.5px;font-weight:600;color:var(--ink);
  box-shadow:0 10px 30px rgba(10,19,23,.14);
}
.nv-pin-tag{
  font-size:10.5px;font-weight:800;letter-spacing:.06em;
  background:rgba(0,100,224,.10);color:#0055BD;
  border-radius:999px;padding:2px 7px;
}
.nv-pin-ms{color:var(--blue);font-variant-numeric:tabular-nums}
.nv-pin-ms b{font-size:13.5px}

/* 延迟面板 */
.nv-card{
  position:absolute;left:4.5%;bottom:6%;width:216px;z-index:4;
  background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(228,232,238,.9);
  border-radius:18px;padding:14px 16px 12px;
  box-shadow:0 16px 40px rgba(10,19,23,.10);
}
.nv-card-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.nv-live{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  font-size:9.5px;font-weight:800;letter-spacing:.1em;color:#25793A;
}
.nv-live i{
  width:6px;height:6px;border-radius:50%;background:var(--green);
}
.nv-card-node{
  font-size:10.5px;color:var(--muted);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nv-metric{display:flex;align-items:baseline;gap:5px;line-height:1}
.nv-metric b{
  font-size:34px;font-weight:800;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:var(--ink);
  transition:color .3s;
}
.nv-unit{font-size:12px;font-weight:700;color:var(--muted-2)}
.nv-card.q-good .nv-metric b{color:#1F7A3C}
.nv-card.q-mid  .nv-metric b{color:#9A6612}
.nv-card.q-bad  .nv-metric b{color:#B42318}
.nv-cap{font-size:10.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.nv-spark{margin-top:8px;height:34px}
.nv-spark svg{width:100%;height:100%;display:block}
#nvSpark{fill:none;stroke:#0064E0;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.nv-foot{
  display:flex;justify-content:space-between;gap:6px;
  margin-top:6px;font-size:10.5px;color:var(--muted);
}
.nv-foot b{color:var(--ink-3);font-variant-numeric:tabular-nums}

/* —— 统计条 —— */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.stat-num{font-size:clamp(26px,2.8vw,38px);font-weight:800;letter-spacing:-.035em;line-height:1.1}
.stat-lbl{margin-top:10px;font-size:12.5px;line-height:1.6;color:var(--muted)}

/* —— 特性 —— */
.feat{display:flex;gap:14px}
.feat-ico{
  width:40px;height:40px;flex:0 0 40px;border-radius:12px;
  background:var(--surface);display:flex;align-items:center;justify-content:center;
  font-size:17px;
}

/* —— 套餐卡 —— */
.plan{
  position:relative;border-radius:var(--r-lg);padding:32px;
  border:1px solid var(--line);background:#fff;
  display:flex;flex-direction:column;
}
.plan-featured{background:var(--ink);border-color:var(--ink);color:#fff}
.plan-featured .muted,.plan-featured .plan-sub{color:rgba(255,255,255,.62)}
.plan-sub{font-size:13px;color:var(--muted-2);margin-top:6px}
.plan-price{display:flex;align-items:baseline;gap:8px;margin:22px 0 6px}
.plan-price .amt{font-size:clamp(34px,3.6vw,46px);font-weight:800;letter-spacing:-.04em;line-height:1}
.plan-price .per{font-size:14px;color:var(--muted)}
.plan-featured .plan-price .per{color:rgba(255,255,255,.6)}
.plan-list{margin:24px 0 28px;display:flex;flex-direction:column;gap:12px}
.plan-list li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--ink-3)}
.plan-featured .plan-list li{color:rgba(255,255,255,.86)}
.tick{
  width:16px;height:16px;flex:0 0 16px;margin-top:2px;border-radius:50%;
  background:rgba(49,162,76,.14);color:#25793a;
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;
}
.plan-featured .tick{background:rgba(255,255,255,.16);color:#fff}
.plan-tag{
  position:absolute;top:26px;right:26px;
  background:#fff;color:var(--ink);font-size:11.5px;font-weight:700;
  padding:5px 12px;border-radius:var(--r-pill);letter-spacing:.02em;
}

/* —— 表单 —— */
.field{margin-bottom:16px}
.label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-3);margin-bottom:7px}
.input,.select,.textarea{
  width:100%;height:44px;padding:0 14px;
  border:1px solid var(--line-2);border-radius:var(--r-md);
  background:#fff;font-size:14px;transition:.16s;outline:none;
}
.textarea{height:auto;padding:12px 14px;resize:vertical;min-height:96px;line-height:1.6}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--ink);box-shadow:0 0 0 3.5px rgba(10,19,23,.06);
}
.input::placeholder,.textarea::placeholder{color:#A9B4C0}
.input-group{display:flex;gap:10px}
.input-group .input{flex:1}
.hint{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.55}

/* —— 提示条 —— */
.alert{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 15px;border-radius:var(--r-md);font-size:13px;line-height:1.55;
  border:1px solid transparent;
}
.alert-err{background:#FDF2F2;border-color:#F6D9D9;color:#9E2B2B}
.alert-ok{background:#F1F9F3;border-color:#D6EEDE;color:#256C38}
.alert-info{background:var(--surface-3);border-color:var(--line);color:var(--muted-2)}
.alert-warn{background:#FDF8EE;border-color:#F3E4C4;color:#8A5A13}

/* —— 认证页 —— */
.auth{
  min-height:calc(100vh - var(--nav-h));display:flex;align-items:center;justify-content:center;
  padding:56px 24px;
  background:
    radial-gradient(90% 70% at 50% 0%, #EDF1F7 0%, rgba(237,241,247,0) 70%),
    #fff;
}
.auth-card{width:100%;max-width:412px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:38px 34px;box-shadow:var(--sh-sm)}
.auth-brand{display:flex;align-items:center;gap:9px;justify-content:center;margin-bottom:6px}

/* —— 数据表 —— */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
table.tbl{font-size:13px;min-width:640px}
table.tbl th{
  text-align:left;font-weight:600;font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);
  padding:13px 16px;background:var(--surface-3);border-bottom:1px solid var(--line);
  white-space:nowrap;
}
table.tbl td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:var(--surface-3)}
.tbl-empty{padding:44px 16px;text-align:center;color:var(--muted);font-size:13px}

/* —— 进度条 —— */
.bar{height:8px;border-radius:var(--r-pill);background:var(--surface);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:var(--r-pill);background:var(--ink);transition:width .5s}
.bar-blue > i{background:var(--blue)}
.bar-green > i{background:var(--green)}
.bar-amber > i{background:var(--amber)}

/* —— 指标卡 —— */
.metric{border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;background:#fff}
.metric .k{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.metric .v{font-size:24px;font-weight:800;letter-spacing:-.03em;margin-top:8px}
.metric .s{font-size:12px;color:var(--muted);margin-top:4px}

/* —— 复制块 —— */
.copy{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-3);
  padding:10px 10px 10px 14px;
}
.copy code{
  flex:1;font-family:var(--mono);font-size:12px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.copy-btn{
  height:32px;padding:0 14px;border-radius:var(--r-pill);background:var(--ink);color:#fff;
  font-size:12px;font-weight:600;flex:0 0 auto;
}
.copy-btn:hover{background:#1d2a31}

/* —— 步骤 —— */
.steps{counter-reset:s;display:flex;flex-direction:column;gap:18px}
.step{display:flex;gap:14px}
.step::before{
  counter-increment:s;content:counter(s);
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

/* —— 分栏页头 —— */
.page-head{padding:52px 0 40px;border-bottom:1px solid var(--line);background:var(--surface-3)}
.crumb{font-size:12.5px;color:var(--muted);margin-bottom:12px}

/* —— 页脚 —— */
.footer{border-top:1px solid var(--line);padding:60px 0 30px;background:#fff}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.foot-title{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:14px;letter-spacing:.01em}
.foot-links{display:flex;flex-direction:column;gap:10px}
.foot-links a{font-size:13px;color:var(--muted-2)}
.foot-links a:hover{color:var(--ink)}
.foot-bottom{
  margin-top:46px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:12px;color:var(--muted);
}

/* —— 模态 —— */
.modal{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(10,19,23,.42);backdrop-filter:blur(3px);
}
.modal.open{display:flex}
.modal-card{
  width:100%;max-width:520px;background:#fff;border-radius:var(--r-lg);
  padding:28px;max-height:86vh;overflow:auto;box-shadow:var(--sh-lg);
}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}

/* —— 工具 —— */
.kv{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted-2)}
.kv .v{font-weight:600;text-align:right}
.divider{height:1px;background:var(--line);margin:24px 0}
.scroll-x{overflow-x:auto}

/* —— 响应式 —— */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .section{padding:70px 0}
  .nv-card{width:198px}
}
@media (max-width:760px){
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 16px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 14px;border-radius:12px}
  .nav-toggle{display:flex}
  .nav-user{display:none}
  /* 小屏没有 hover：菜单改为点击展开，并隐藏用户名只留头像 */
  .nav-menu-name,.nav-menu-caret{display:none}
  .nav-menu-btn{padding:0 6px;height:34px}
  .nav-menu-panel{min-width:180px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  .card{padding:22px}
  .section{padding:56px 0}
  .wrap{padding:0 18px}

  /* 小屏把公告把手移到底部，避免压住导航右侧按钮 */
  .ann-dock{top:auto;bottom:0;flex-direction:column-reverse}
  .ann-tab,.ann-dock.is-open .ann-tab,.ann-dock:hover .ann-tab,.ann-dock:focus-within .ann-tab{
    border-radius:12px 12px 0 0;
  }
  .ann-panel{border-radius:18px 18px 0 0;box-shadow:0 -18px 44px rgba(10,19,23,.2)}
}
@media (max-width:560px){
  /* 小屏空间有限：只留贴在地图上的小牌，信息更干净 */
  .nv-card{display:none}
  .nv-pin-card{padding:7px 12px;font-size:12px;gap:7px;right:12px;bottom:6px}
}