/* ==========================================================================
   Amazon API 规范服务 — app.css
   深色为主的开发者基础设施气质：克制、有纵深、有分量。
   零 CDN / 零外链字体 / 零图片请求，全部图标为内联 SVG。

   目录：
     00 自托管字体            08 徽章 / 提示 / 进度
     01 设计令牌（暗色·默认） 09 代码块 / 终端 / tabs / toast
     02 设计令牌（亮色）      10 进场动效
     03 基础与排版            11 落地页
     04 氛围光与纵深          12 定价
     05 布局 / 顶栏 / 页脚    13 文档
     06 按钮 / 卡片           14 控制台
     07 表单 / 表格           15 登录 / 授权 / 错误 / 法务 / 试用台
                              16 响应式  17 降级与打印
   ========================================================================== */

/* -- 00 自托管字体 ---------------------------------------------------------- */
@font-face{
  font-family:'Inter var';
  src:url('/static/fonts/inter-latin-var.woff2') format('woff2');
  font-weight:100 900;font-display:swap;font-style:normal;
}
@font-face{
  font-family:'JetBrains Mono var';
  src:url('/static/fonts/jetbrains-mono-latin-var.woff2') format('woff2');
  font-weight:100 800;font-display:swap;font-style:normal;
}

/* -- 01 设计令牌（暗色 · 默认） -------------------------------------------- */
:root{
  color-scheme: dark;

  --font-sans:'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI',
              'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
              'Source Han Sans SC', sans-serif;
  --font-mono:'JetBrains Mono var', ui-monospace, SFMono-Regular, Consolas,
              'Liberation Mono', monospace;

  --bg:         #080B14;
  --bg-elev:    #0E1422;
  --surface:    #111726;
  --surface-2:  #161D2F;
  --border:     rgba(255,255,255,.07);
  --border-str: rgba(255,255,255,.13);
  --text:       #F2F5FA;
  --text-2:     #A8B2C6;
  /* 令牌表给的 #6E7A93 落在 --surface 上只有 4.23:1，提亮到 5.2:1 以满足硬约束 */
  --text-3:     #7E8AA3;

  --brand:      #4F6BFF;
  --brand-2:    #7C8CFF;
  --brand-dim:  rgba(79,107,255,.14);
  --brand-glow: rgba(79,107,255,.30);
  --accent:     #FFA033;
  --accent-dim: rgba(255,160,51,.13);
  --ok:         #22C55E;
  --ok-dim:     rgba(34,197,94,.12);
  --warn:       #F5A524;
  --warn-dim:   rgba(245,165,36,.12);
  --danger:     #EF4444;
  --danger-dim: rgba(239,68,68,.11);

  /* 可读文字色：正文级对比度 ≥ 4.5:1 */
  --link:       var(--brand-2);
  --link-hover: #9AA7FF;
  --ok-ink:     #22C55E;
  --warn-ink:   #F5A524;
  --danger-ink: #F87171;
  --accent-ink: #FFB35C;

  /* 主按钮渐变：白字在两端分别为 4.78:1 与 7.2:1 */
  --brand-btn-1:#4A63F5;
  --brand-btn-2:#3243D6;
  --on-brand:   #FFFFFF;

  --card-grad:  linear-gradient(180deg, var(--surface), var(--bg-elev));
  --shadow-card:0 1px 0 rgba(255,255,255,.04) inset, 0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-pop: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px -20px rgba(0,0,0,.75);
  --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  --header-bg:  rgba(8,11,20,.72);
  --glow-1:     rgba(79,107,255,.10);
  --glow-2:     rgba(255,160,51,.05);
  --code-bg:    #0B1020;
  --code-fg:    #D7DEEC;
  --code-dim:   #8892AB;   /* 5.98:1 on --code-bg */
  --code-faint: #7C879F;   /* 5.17:1 on --code-bg */
  --code-key:   #8B99FF;   /* 7.19:1 on --code-bg */
  --track:      rgba(255,255,255,.06);

  --chart-1:    #4F6BFF;
  --chart-2:    #7C8CFF;
  --chart-3:    #A3AFFF;
  --chart-4:    #FFA033;
  --chart-grid: rgba(255,255,255,.08);

  --r-sm: 6px;
  --r:    9px;
  --r-lg: 14px;
  --r-pill: 999px;

  --shell: 1200px;
  --gap: 20px;
  --sec-y: clamp(72px, 9vw, 132px);
  --ease: cubic-bezier(.16,1,.3,1);
}

/* -- 02 设计令牌（亮色） ---------------------------------------------------- */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
    --bg:         #FFFFFF;
    --bg-elev:    #F7F9FC;
    --surface:    #FFFFFF;
    --surface-2:  #F2F5FA;
    --border:     rgba(10,15,30,.10);
    --border-str: rgba(10,15,30,.18);
    --text:       #0B1020;
    --text-2:     #47536B;
    --text-3:     #626D85;

    --brand:      #3B4FE0;
    --brand-2:    #5A6BFF;
    --brand-dim:  rgba(59,79,224,.10);
    --brand-glow: rgba(59,79,224,.22);
    --accent-dim: rgba(255,160,51,.16);
    --ok-dim:     rgba(34,197,94,.13);
    --warn-dim:   rgba(245,165,36,.15);
    --danger-dim: rgba(239,68,68,.10);

    --link:       var(--brand);
    --link-hover: #2B3CC0;
    --ok-ink:     #0C6B47;
    --warn-ink:   #8A5200;
    --danger-ink: #C0281F;
    --accent-ink: #8A5200;

    --card-grad:  linear-gradient(180deg, var(--surface), var(--bg-elev));
    --shadow-card:0 1px 2px rgba(10,15,30,.06), 0 8px 24px -12px rgba(10,15,30,.14);
    --shadow-pop: 0 1px 2px rgba(10,15,30,.07), 0 22px 48px -20px rgba(10,15,30,.22);
    --shadow-sm:  0 1px 2px rgba(10,15,30,.07);
    --header-bg:  rgba(255,255,255,.76);
    --glow-1:     rgba(59,79,224,.06);
    --glow-2:     rgba(255,160,51,.03);
    --code-bg:    #0B1020;
    --track:      rgba(10,15,30,.07);

    --chart-1:    #3B4FE0;
    --chart-2:    #5A6BFF;
    --chart-3:    #94A2F7;
    --chart-4:    #E58200;
    --chart-grid: rgba(10,15,30,.10);
  }
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:         #FFFFFF;
  --bg-elev:    #F7F9FC;
  --surface:    #FFFFFF;
  --surface-2:  #F2F5FA;
  --border:     rgba(10,15,30,.10);
  --border-str: rgba(10,15,30,.18);
  --text:       #0B1020;
  --text-2:     #47536B;
  --text-3:     #626D85;

  --brand:      #3B4FE0;
  --brand-2:    #5A6BFF;
  --brand-dim:  rgba(59,79,224,.10);
  --brand-glow: rgba(59,79,224,.22);
  --accent-dim: rgba(255,160,51,.16);
  --ok-dim:     rgba(34,197,94,.13);
  --warn-dim:   rgba(245,165,36,.15);
  --danger-dim: rgba(239,68,68,.10);

  --link:       var(--brand);
  --link-hover: #2B3CC0;
  --ok-ink:     #0C6B47;
  --warn-ink:   #8A5200;
  --danger-ink: #C0281F;
  --accent-ink: #8A5200;

  --card-grad:  linear-gradient(180deg, var(--surface), var(--bg-elev));
  --shadow-card:0 1px 2px rgba(10,15,30,.06), 0 8px 24px -12px rgba(10,15,30,.14);
  --shadow-pop: 0 1px 2px rgba(10,15,30,.07), 0 22px 48px -20px rgba(10,15,30,.22);
  --shadow-sm:  0 1px 2px rgba(10,15,30,.07);
  --header-bg:  rgba(255,255,255,.76);
  --glow-1:     rgba(59,79,224,.06);
  --glow-2:     rgba(255,160,51,.03);
  --code-bg:    #0B1020;
  --track:      rgba(10,15,30,.07);

  --chart-1:    #3B4FE0;
  --chart-2:    #5A6BFF;
  --chart-3:    #94A2F7;
  --chart-4:    #E58200;
  --chart-grid: rgba(10,15,30,.10);
}

/* -- 03 基础与排版 ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{
  background: var(--bg);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:84px;
}
body{
  margin:0;
  background:transparent;
  color:var(--text);
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.65;
  font-feature-settings:'cv05' 1,'ss01' 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  margin:0 0 .5em;
  color:var(--text);
  line-height:1.18;
  letter-spacing:-.018em;
  font-weight:680;
  text-wrap:balance;
}
h1{font-size:clamp(1.9rem,3.4vw,2.6rem);letter-spacing:-.026em}
h2{font-size:clamp(1.35rem,2.2vw,1.75rem);letter-spacing:-.022em}
h3{font-size:1.0625rem}
h4{font-size:.9375rem}

p{margin:0 0 1em;max-width:68ch}
ul,ol{margin:0 0 1em;padding-left:1.35em}
li{margin:.3em 0}
li::marker{color:var(--text-3)}
hr{border:0;border-top:1px solid var(--border);margin:28px 0}

a{color:var(--link);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:3px}

strong,.strong{font-weight:640;color:var(--text)}
b{font-weight:640}
em{font-style:normal;color:var(--text-2)}

code,kbd,samp,pre,.mono,.num,.tabular{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1,'zero' 1;
}
:not(pre) > code{
  font-size:.86em;
  padding:.12em .38em;
  border-radius:var(--r-sm);
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text);
  word-break:break-word;
}
small,.small{font-size:12.5px;line-height:1.6}
.muted{color:var(--text-2)}
.faint{color:var(--text-3)}
.nowrap{white-space:nowrap}
.center{text-align:center}
.right{text-align:right}
.spacer{flex:1 1 auto;min-width:0}

.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}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--surface);color:var(--text);
  padding:10px 16px;border:1px solid var(--border-str);border-radius:var(--r);
}
.skip-link:focus{left:12px;top:12px}

::selection{background:var(--brand-dim);color:var(--text)}

:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}
button,a,summary,select,input[type="checkbox"],[role="tab"]{cursor:pointer}
input,textarea{cursor:text}

/* 内联 SVG 图标：统一线性、跟随 currentColor */
svg{display:block}
.ico{
  width:20px;height:20px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.ico-lg{width:24px;height:24px}
.ico-xl{width:34px;height:34px;stroke-width:1.25}

/* -- 04 氛围光与纵深 -------------------------------------------------------- */
body::before{
  content:'';
  position:fixed;
  inset:-25vmax;
  z-index:-1;
  pointer-events:none;
  /* 半径用百分比：无论视口多大，渐变都在盒子内部就淡到透明，
     盒子自身的硬边落在视口之外 25vmax 处，永远不会露出一道灰边。 */
  background:
    radial-gradient(ellipse 58% 52% at 22% 16%, var(--glow-1), transparent 70%),
    radial-gradient(ellipse 54% 48% at 84% 68%, var(--glow-2), transparent 70%);
  filter:blur(60px);
}

/* 区块底色交替，避免通篇纯扁平 */
.band{background:var(--bg-elev);border-block:1px solid var(--border)}
.band + .band{border-top:0}

/* -- 05 布局 / 顶栏 / 页脚 -------------------------------------------------- */
.container{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:24px}
.container-narrow,.page-narrow{width:100%;max-width:820px;margin-inline:auto}

main{display:block;min-height:52vh;padding-bottom:clamp(56px,7vw,96px)}
main > .container{padding-top:clamp(28px,3.6vw,44px)}
body.landing main > .container{padding-top:0;padding-inline:0;max-width:none}
body.landing .section-shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:24px}

.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--header-bg);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.site-header.is-scrolled{
  border-bottom-color:var(--border);
  box-shadow:0 8px 24px -18px rgba(0,0,0,.8);
}
.hdr{display:flex;align-items:center;gap:18px;height:60px}

.brand{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--text);font-weight:640;font-size:14.5px;letter-spacing:-.015em;
  white-space:nowrap;
}
.brand:hover{text-decoration:none;color:var(--text)}
.brand-mark{color:var(--brand-2);filter:drop-shadow(0 0 10px var(--brand-glow))}

.nav{display:flex;align-items:center;gap:2px;margin-left:6px;flex:1 1 auto;min-width:0}
.nav a{
  position:relative;
  padding:7px 11px;border-radius:var(--r-sm);
  color:var(--text-2);font-size:13.5px;font-weight:500;white-space:nowrap;
  transition:color .18s var(--ease), background-color .18s var(--ease);
}
.nav a:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
.nav a.on{color:var(--text);background:var(--brand-dim)}
.nav a.on::after{
  content:'';position:absolute;left:11px;right:11px;bottom:2px;height:1.5px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
}
.nav-sep{width:1px;height:18px;background:var(--border);margin:0 8px}

.hdr-actions{display:flex;align-items:center;gap:8px;flex:none}
.icon-btn{
  display:inline-grid;place-items:center;
  width:34px;height:34px;padding:0;
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--text-2);
  transition:color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.icon-btn:hover{color:var(--text);border-color:var(--border-str)}
.icon-btn:active{transform:scale(.94)}
.theme-toggle .ico-sun{display:none}
:root[data-theme="light"] .theme-toggle .ico-sun{display:block}
:root[data-theme="light"] .theme-toggle .ico-moon{display:none}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .theme-toggle .ico-sun{display:block}
  :root:not([data-theme="dark"]) .theme-toggle .ico-moon{display:none}
}

.site-footer{
  border-top:1px solid var(--border);
  background:var(--bg-elev);
  padding:40px 0 48px;
  color:var(--text-3);font-size:12.5px;
}
.footer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:32px}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 16px}
.site-footer a{color:var(--text-2)}
.site-footer a:hover{color:var(--link)}
.footer-note{line-height:1.75;max-width:78ch}

/* -- 06 按钮 / 卡片 --------------------------------------------------------- */
.btn{
  --btn-bg:var(--surface-2);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 16px;
  font:inherit;font-size:13.5px;font-weight:560;line-height:1.2;
  color:var(--text);background:var(--btn-bg);
  border:1px solid var(--border-str);border-radius:var(--r-sm);
  text-decoration:none;white-space:nowrap;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),
             color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.btn:hover{border-color:var(--text-3);color:var(--text);text-decoration:none;
  box-shadow:var(--shadow-sm)}
.btn:active{transform:scale(.985)}
.btn[disabled],.btn.is-busy{opacity:.6;pointer-events:none}

.btn-primary{
  background:linear-gradient(180deg,var(--brand-btn-1),var(--brand-btn-2));
  color:var(--on-brand);
  border-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 8px 22px -10px var(--brand-glow);
}
.btn-primary:hover{
  color:var(--on-brand);border-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 12px 28px -10px var(--brand-glow);
  filter:brightness(1.06);
}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--border);color:var(--text)}
.btn-danger{background:transparent;border-color:var(--border-str);color:var(--danger-ink)}
.btn-danger:hover{background:var(--danger-dim);border-color:var(--danger);color:var(--danger-ink)}

.btn-sm{padding:5px 10px;font-size:12.5px;border-radius:var(--r-sm)}
.btn-lg{padding:12px 22px;font-size:15px;border-radius:var(--r)}
.btn-block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

.card{
  position:relative;
  background:var(--card-grad);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
}
.card-lift{transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)}
.card-lift:hover{transform:translateY(-2px);border-color:var(--border-str);box-shadow:var(--shadow-pop)}

/* 重点卡片的顶边高光 */
.card-glow::before{
  content:'';position:absolute;left:14px;right:14px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  pointer-events:none;
}

.card-head{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;border-bottom:1px solid var(--border);
}
.card-head h2,.card-head h3{margin:0;font-size:14.5px;font-weight:620;letter-spacing:-.012em}
.card-head .ico{color:var(--text-3);width:17px;height:17px}
.card-body{padding:18px}
.card-body > :last-child{margin-bottom:0}
.card-foot{padding:12px 18px;border-top:1px solid var(--border);background:var(--surface-2);
  border-radius:0 0 var(--r-lg) var(--r-lg)}
.card-pad{padding:20px}
.card-pad > :last-child{margin-bottom:0}

.section{margin:0 0 clamp(34px,4.4vw,56px)}
.section:last-child{margin-bottom:0}
.section-band{padding-block:var(--sec-y)}

.section-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.section-title h2{margin:0}
.section-title.stack-title{display:block}
.eyebrow{
  display:block;
  font-size:11.5px;font-weight:620;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:8px;
}
.section-lead{color:var(--text-2);max-width:68ch;font-size:15px}

.grid{display:grid;gap:var(--gap)}
.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))}
.g-side{grid-template-columns:minmax(0,1fr) 300px}
.stack{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.stack-sm{display:flex;flex-direction:column;gap:10px;min-width:0}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.row-between{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}

/* -- 07 表单 / 表格 --------------------------------------------------------- */
.field{margin-bottom:16px;min-width:0}
.field > label,.label{
  display:block;margin-bottom:6px;
  font-size:12.5px;font-weight:580;color:var(--text-2);letter-spacing:.005em;
}
input[type="text"],input[type="email"],input[type="password"],input[type="number"],
input[type="search"],select,textarea{
  width:100%;padding:10px 12px;
  font:inherit;font-size:14px;color:var(--text);
  background:var(--surface-2);
  border:1px solid var(--border-str);border-radius:var(--r-sm);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease);
}
textarea{resize:vertical;min-height:96px;line-height:1.6}
textarea.mono,input.mono{font-family:var(--font-mono);font-size:13px}
input:hover,select:hover,textarea:hover{border-color:var(--text-3)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-dim);
  background:var(--surface);
}
input::placeholder,textarea::placeholder{color:var(--text-3);opacity:1}
input[aria-invalid="true"]{border-color:var(--danger)}
select{
  appearance:none;-webkit-appearance:none;
  padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 51%, calc(100% - 12px) 51%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
.help{margin-top:6px;font-size:12px;color:var(--text-3);line-height:1.55}
.field-error{margin-top:6px;font-size:12px;color:var(--danger-ink);min-height:1em}
.check{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--text-2);cursor:pointer}
.check input[type="checkbox"]{width:16px;height:16px;margin:3px 0 0;accent-color:var(--brand);flex:none}
.inline-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.inline-form .field{flex:1 1 260px;margin-bottom:0}

.pw-meter{display:flex;gap:4px;margin-top:8px}
.pw-meter i{flex:1;height:3px;border-radius:2px;background:var(--track);transition:background-color .2s var(--ease)}
.pw-meter[data-score="1"] i:nth-child(-n+1){background:var(--danger)}
.pw-meter[data-score="2"] i:nth-child(-n+2){background:var(--warn)}
.pw-meter[data-score="3"] i:nth-child(-n+3){background:var(--brand)}
.pw-meter[data-score="4"] i{background:var(--ok)}

.table-wrap,.table-scroll{
  overflow-x:auto;max-width:100%;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  /* 经典的 CSS 滚动阴影：local 两层做遮罩，scroll 两层做阴影，
     滚到两端时遮罩盖住阴影，自动消失，不需要 JS。 */
  background:
    linear-gradient(90deg, var(--surface), rgba(255,255,255,0)) left center / 22px 100% no-repeat local,
    linear-gradient(90deg, rgba(255,255,255,0), var(--surface)) right center / 22px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.22), rgba(0,0,0,0)) left center / 11px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.22), rgba(0,0,0,0)) right center / 11px 100% no-repeat scroll;
}
.card > .table-wrap{border-radius:0 0 var(--r-lg) var(--r-lg)}
table.table,.table-scroll table{
  width:100%;border-collapse:collapse;font-size:13px;min-width:min(520px,100%);
}
table.table th,table.table td,.table-scroll th,.table-scroll td{
  padding:10px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
table.table th,.table-scroll th{
  font-size:11.5px;font-weight:620;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);background:var(--surface-2);white-space:nowrap;
  position:sticky;top:0;
}
table.table tbody tr:last-child td{border-bottom:0}
table.table tbody tr{transition:background-color .15s var(--ease)}
table.table tbody tr:hover td{background:var(--surface-2)}
table.table td.wrap,table.table th.wrap{white-space:normal;min-width:170px;line-height:1.6}
table.table td.num,table.table td.mono,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
table.table td.num{text-align:right}
table.table th.right,table.table td.right{text-align:right}
table.table.compact th,table.table.compact td{padding:7px 12px;font-size:12.5px}

.empty{
  padding:34px 20px;text-align:center;color:var(--text-3);font-size:13.5px;
}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;margin:0;font-size:13px}
.kv dt{color:var(--text-3);white-space:nowrap}
.kv dd{margin:0;color:var(--text-2);font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* -- 08 徽章 / 提示 / 进度 -------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:580;line-height:1.7;white-space:nowrap;
  color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);
}
.badge-sq{border-radius:var(--r-sm);font-family:var(--font-mono);font-size:11px}
.badge-primary{color:var(--link);background:var(--brand-dim);border-color:transparent}
.badge-accent{color:var(--accent-ink);background:var(--accent-dim);border-color:transparent}
.badge-ok{color:var(--ok-ink);background:var(--ok-dim);border-color:transparent}
.badge-warn{color:var(--warn-ink);background:var(--warn-dim);border-color:transparent}
.badge-err{color:var(--danger-ink);background:var(--danger-dim);border-color:transparent}

.alert{
  display:flex;gap:12px;align-items:flex-start;
  padding:13px 16px;margin:0 0 18px;
  border:1px solid var(--border);border-left-width:2px;border-radius:var(--r);
  background:var(--surface);font-size:13.5px;line-height:1.65;color:var(--text-2);
  box-shadow:var(--shadow-sm);
}
.alert p:last-child{margin-bottom:0}
.alert .ico{width:18px;height:18px;margin-top:1px}
.alert-ok{border-left-color:var(--ok);background:var(--ok-dim)}
.alert-ok .ico{color:var(--ok-ink)}
.alert-warn{border-left-color:var(--warn);background:var(--warn-dim)}
.alert-warn .ico{color:var(--warn-ink)}
.alert-error{border-left-color:var(--danger);background:var(--danger-dim)}
.alert-error .ico{color:var(--danger-ink)}
.alert-info{border-left-color:var(--brand);background:var(--brand-dim)}
.alert-info .ico{color:var(--link)}

.note{
  padding:13px 16px;margin:16px 0;
  border:1px solid var(--border);border-left:2px solid var(--border-str);
  border-radius:var(--r);background:var(--surface-2);
  font-size:13.5px;line-height:1.7;color:var(--text-2);
}
.note-accent{border-left-color:var(--accent);background:var(--accent-dim)}
.note > :last-child{margin-bottom:0}

.progress{
  display:block;
  position:relative;height:9px;border-radius:var(--r-pill);
  background:var(--track);overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.28) inset;
}
.progress > i{
  display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  box-shadow:0 0 12px -1px var(--brand-glow), 0 1px 0 rgba(255,255,255,.35) inset;
  transition:width .5s var(--ease);
}
.progress.lvl-warning > i{background:linear-gradient(90deg,var(--warn),#FFC46B);
  box-shadow:0 0 12px -1px rgba(245,165,36,.5), 0 1px 0 rgba(255,255,255,.35) inset}
.progress.lvl-alert > i{background:linear-gradient(90deg,var(--accent),#FFC46B);
  box-shadow:0 0 12px -1px rgba(255,160,51,.5), 0 1px 0 rgba(255,255,255,.35) inset}
.progress.lvl-over > i{background:linear-gradient(90deg,var(--danger),#FF8080);
  box-shadow:0 0 12px -1px rgba(239,68,68,.5), 0 1px 0 rgba(255,255,255,.35) inset}
.progress-marks{position:relative;height:14px;margin-top:3px}
.progress-mark{
  position:absolute;top:0;transform:translateX(-50%);
  font-size:10px;color:var(--text-3);font-family:var(--font-mono);
}
.progress-mark::before{
  content:'';position:absolute;left:50%;top:-6px;width:1px;height:5px;background:var(--border-str);
}

/* -- 09 代码块 / 终端 / tabs / toast ---------------------------------------- */
.code{
  margin:0 0 18px;
  background:var(--code-bg);
  border:1px solid var(--border-str);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.code-bar{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px 7px 14px;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.code-lang{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;
  color:var(--code-dim);text-transform:lowercase;
}
.code pre{
  margin:0;padding:14px 16px;overflow-x:auto;
  font-size:12.75px;line-height:1.72;color:var(--code-fg);
  -webkit-overflow-scrolling:touch;
}
.code pre code{
  background:none;border:0;padding:0;color:inherit;font-size:inherit;
  /* 长 endpoint URL 被横向裁掉比换行难看得多；缩进靠 pre-wrap 保住 */
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.code.code-lg pre{font-size:13.5px;padding:16px 18px}
.code .btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#C6CEDE}
.code .btn:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.24);color:#fff}
.copy-btn.copied{color:var(--ok);border-color:var(--ok)}

/* 终端窗口：落地页与文档共用 */
.term{
  margin:0 0 18px;padding:16px 18px;
  background:var(--code-bg);
  border:1px solid var(--border-str);border-radius:var(--r);
  font-family:var(--font-mono);font-size:12.5px;line-height:1.75;
  color:var(--code-fg);white-space:pre-wrap;word-break:break-word;
  overflow-x:auto;box-shadow:var(--shadow-card);
}
.term b{color:#F0F4FB;font-weight:620}
.term .u{color:var(--code-key)}
.term .a{color:var(--accent)}
.term .faint{color:var(--code-faint)}

.tw{
  position:relative;
  background:var(--code-bg);
  border:1px solid var(--border-str);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-pop);
}
.tw::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  z-index:1;
}
.tw-bar{
  display:flex;align-items:center;gap:9px;
  padding:10px 14px;
  background:rgba(255,255,255,.035);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.tw-dots{display:flex;gap:6px}
.tw-dots i{width:10px;height:10px;border-radius:50%;background:#39415A;display:block}
.tw-dots i:nth-child(1){background:#E05C58}
.tw-dots i:nth-child(2){background:#DDA23B}
.tw-dots i:nth-child(3){background:#4FB06A}
.tw-title{
  font-family:var(--font-mono);font-size:11.5px;color:var(--code-dim);letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tw-body{
  padding:16px 18px 20px;
  font-family:var(--font-mono);font-size:12.75px;line-height:1.85;
  color:var(--code-fg);overflow-x:auto;
  font-variant-numeric:tabular-nums;
}
.tw-line{display:flex;gap:9px;white-space:pre}
.tw-line + .tw-line{margin-top:1px}
.tw-line.gap{margin-top:12px}
.tw-p{color:var(--ok);flex:none;font-weight:600}
.tw-cmd{color:#E8EDF7}
.tw-str{color:#8FD9A8}
.tw-out{display:flex;gap:9px;color:#A3AEC4;white-space:pre-wrap}
.tw-arrow{color:var(--code-faint);flex:none}
.tw-key{color:var(--code-key)}
.tw-num{color:var(--accent);font-weight:600}
.tw-bad{color:#F87171;font-weight:600}
.tw-cursor{
  display:inline-block;width:7px;height:14px;vertical-align:-2px;
  background:var(--code-key);margin-left:4px;
  animation:tw-blink 1.15s steps(2,start) infinite;
}
@keyframes tw-blink{0%,100%{opacity:1}50%{opacity:0}}

.tabs{margin:0 0 18px}
.tablist{
  display:flex;gap:2px;flex-wrap:wrap;
  padding:4px;margin-bottom:14px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
}
.tab{
  padding:7px 13px;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--text-2);
  font:inherit;font-size:13px;font-weight:540;
  transition:color .18s var(--ease),background-color .18s var(--ease);
}
.tab:hover{color:var(--text);background:var(--surface)}
.tab[aria-selected="true"]{
  color:var(--text);background:var(--surface);
  box-shadow:var(--shadow-sm), 0 0 0 1px var(--border);
}
.tabpanel{min-width:0}
.tabpanel[hidden]{display:none}

.toasts{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{
  padding:10px 15px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border-str);
  box-shadow:var(--shadow-pop);font-size:13px;color:var(--text);
  animation:toast-in .26s var(--ease);
}
.toast-ok{border-left:2px solid var(--ok)}
.toast-warn{border-left:2px solid var(--warn)}
.toast-error{border-left:2px solid var(--danger)}
.toast.out{opacity:0;transform:translateY(6px);transition:opacity .24s,transform .24s}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

details.faq{
  border:1px solid var(--border);border-radius:var(--r);
  background:var(--card-grad);margin-bottom:10px;
  box-shadow:var(--shadow-sm);
  transition:border-color .18s var(--ease);
}
details.faq:hover{border-color:var(--border-str)}
details.faq > summary{
  list-style:none;position:relative;
  padding:14px 46px 14px 18px;
  font-size:14.5px;font-weight:580;color:var(--text);
}
details.faq > summary::-webkit-details-marker{display:none}
details.faq > summary::after{
  content:'';position:absolute;right:19px;top:50%;
  width:8px;height:8px;margin-top:-5px;
  border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);
  transform:rotate(45deg);transition:transform .2s var(--ease);
}
details.faq[open] > summary::after{transform:rotate(-135deg);margin-top:-2px}
details.faq > summary:hover{color:var(--link)}
details.faq .faq-body{padding:0 18px 16px;font-size:13.5px;color:var(--text-2);line-height:1.75}
details.faq .faq-body > :last-child{margin-bottom:0}

/* -- 10 进场动效 ------------------------------------------------------------ */
.js .reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity .42s var(--ease), transform .42s var(--ease);
  transition-delay:calc(var(--i,0) * 60ms);
  will-change:opacity,transform;
}
.js .reveal.in{opacity:1;transform:none}

/* -- 11 落地页 -------------------------------------------------------------- */
.hero{padding-block:clamp(56px,7.5vw,104px) clamp(48px,6vw,84px);position:relative}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr);
  gap:clamp(28px,4vw,52px);align-items:center;
}
.hero h1{
  font-size:clamp(2.4rem,5vw,4.2rem);
  font-weight:760;letter-spacing:-.03em;line-height:1.06;
  margin:16px 0 20px;text-wrap:balance;
}
.hero h1 .grad{
  background:linear-gradient(100deg,var(--brand-2),var(--brand));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--brand);
}
.hero-lead{
  font-size:clamp(15px,1.25vw,17px);line-height:1.72;
  color:var(--text-2);max-width:60ch;margin-bottom:26px;
}
.hero-lead strong{color:var(--text)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}

.kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px 5px 10px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--border);
  font-size:12px;font-weight:520;color:var(--text-2);
  font-variant-numeric:tabular-nums;
}
.kicker .dot{
  width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 3px var(--ok-dim);
}

.hero-install{max-width:640px}
.hero-install .code{margin-bottom:8px}
.hero-note{font-size:12.5px;color:var(--text-3);margin:0}

/* 统计带 */
.stat-band{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--card-grad);box-shadow:var(--shadow-card);
  overflow:hidden;
}
.stat{padding:24px 22px;position:relative}
.stat + .stat::before{
  content:'';position:absolute;left:0;top:16px;bottom:16px;width:1px;background:var(--border);
}
.stat-v{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(2rem,3.4vw,2.9rem);font-weight:620;
  letter-spacing:-.035em;line-height:1.05;color:var(--text);
}
.stat-l{font-size:13px;color:var(--text-3);margin-top:6px;font-weight:540}
.stat-sub{font-size:11.5px;color:var(--text-3);margin-top:3px;font-family:var(--font-mono);opacity:.85}
.stat.accent .stat-v{color:var(--accent-ink)}

/* 三件事 */
.pillar{padding:26px 24px 24px;position:relative;overflow:hidden}
.pillar-ico{
  display:grid;place-items:center;width:40px;height:40px;
  border-radius:var(--r);background:var(--brand-dim);color:var(--link);
  margin-bottom:16px;
}
.pillar-n{
  position:absolute;right:20px;top:20px;
  font-family:var(--font-mono);font-size:11.5px;font-weight:620;
  letter-spacing:.08em;color:var(--text-3);
  padding:2px 7px;border:1px solid var(--border);border-radius:var(--r-sm);
}
.pillar h3{font-size:16px;margin-bottom:10px;letter-spacing:-.015em}
.pillar p{font-size:13.5px;line-height:1.72;color:var(--text-2);margin-bottom:.85em}
.pillar p:last-child{margin-bottom:0}

/* 凭记忆 vs 查规范 */
.vs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--card-grad);box-shadow:var(--shadow-card);overflow:hidden;
}
.vs-col{padding:0;position:relative}
.vs-col + .vs-col::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--border);
}
.vs-head{
  display:flex;align-items:center;gap:9px;
  padding:14px 20px;font-size:14px;font-weight:620;
  border-bottom:1px solid var(--border);
}
.vs-col.bad .vs-head{color:var(--danger-ink);background:var(--danger-dim)}
.vs-col.good .vs-head{color:var(--ok-ink);background:var(--ok-dim)}
.vs-col .vs-head .ico{width:18px;height:18px}
.vs ul{list-style:none;margin:0;padding:6px 0}
.vs li{
  display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;
  padding:11px 20px;margin:0;font-size:13px;line-height:1.65;color:var(--text-2);
  border-bottom:1px solid var(--border);
}
.vs li:last-child{border-bottom:0}
.vs li .m{
  font-size:11.5px;font-weight:620;color:var(--text-3);
  letter-spacing:.04em;padding-top:2px;
}
.vs-col.good li .m{color:var(--ok-ink)}
.vs-col.bad li .m{color:var(--danger-ink)}

/* 典型调用链 */
.flow{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap}
.flow-zone{
  flex:1 1 380px;min-width:0;
  border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface-2);padding:14px;
}
.flow-zone.local{border-color:var(--accent);background:var(--accent-dim);flex:0 1 300px}
.flow-zone-t{
  display:flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:620;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:12px;
}
.flow-zone.local .flow-zone-t{color:var(--accent-ink)}
.flow-steps{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
.flow-step{
  flex:1 1 0;min-width:150px;
  padding:12px 13px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.flow-zone.local .flow-step{flex:1 1 auto}
.flow-step b{
  display:block;font-family:var(--font-mono);font-size:12.5px;
  color:var(--link);margin-bottom:5px;font-weight:600;
}
.flow-step span{display:block;font-size:12px;color:var(--text-2);line-height:1.55}
.flow-arrow{width:20px;height:20px;flex:none;color:var(--text-3)}
.flow-cross{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  flex:0 0 130px;text-align:center;
  font-size:11px;color:var(--text-3);line-height:1.5;
}
.flow-cross .ico{width:26px;height:26px;color:var(--accent-ink);stroke-width:1.25}
.flow-legend{margin:16px 0 0;font-size:13px;color:var(--text-2);line-height:1.72}

/* endpoint 卡 */
.ep-card{padding:22px}
.ep-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ep-head h3{font-size:15.5px}
.ep-url{
  display:flex;align-items:center;gap:10px;margin-top:14px;
  padding:9px 10px 9px 13px;
  background:var(--code-bg);border:1px solid var(--border-str);border-radius:var(--r-sm);
}
.ep-url code{
  flex:1;min-width:0;overflow-x:auto;white-space:nowrap;
  background:none;border:0;padding:0;font-size:12.5px;color:var(--code-fg);
}
.ep-url .btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#C6CEDE}
.ep-url .btn:hover{background:rgba(255,255,255,.11);color:#fff}

/* 收尾 CTA */
.cta-band{
  position:relative;overflow:hidden;
  padding:clamp(40px,5vw,64px) clamp(24px,4vw,56px);
  border:1px solid var(--border-str);border-radius:var(--r-lg);
  background:
    radial-gradient(80% 140% at 50% 0%, var(--brand-dim), transparent 70%),
    var(--card-grad);
  box-shadow:var(--shadow-pop);
  text-align:center;
}
.cta-band::before{
  content:'';position:absolute;left:10%;right:10%;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
}
.cta-band h2{font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.026em;margin-bottom:12px}
.cta-band p{margin-inline:auto}

/* -- 12 定价 ---------------------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.plan{
  display:flex;flex-direction:column;padding:24px 20px 20px;position:relative;
  transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.plan:hover{transform:translateY(-2px);border-color:var(--border-str);box-shadow:var(--shadow-pop)}
.plan.featured{
  border-color:var(--brand);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 20px 48px -18px var(--brand-glow);
  transform:scale(1.025);
  z-index:1;
}
.plan.featured:hover{transform:scale(1.025) translateY(-2px)}
.plan.featured::before{
  content:'';position:absolute;left:14px;right:14px;top:-1px;height:1.5px;
  background:linear-gradient(90deg,transparent,var(--brand-2),transparent);
}
.plan-tag{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  padding:2px 10px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--brand-btn-1),var(--brand-btn-2));
  color:var(--on-brand);font-size:11px;font-weight:600;white-space:nowrap;
  box-shadow:0 6px 16px -6px var(--brand-glow);
}
.plan-name{font-size:14px;font-weight:640;color:var(--text);letter-spacing:.01em}
.plan-desc{font-size:12.5px;color:var(--text-3);margin-top:5px;line-height:1.6;min-height:2.6em}
.plan-price{display:flex;align-items:baseline;gap:2px;margin:16px 0 4px;color:var(--text)}
.plan-price .cur{font-size:16px;color:var(--text-3);font-family:var(--font-mono)}
.plan-price .amt{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:2.2rem;font-weight:640;letter-spacing:-.035em;line-height:1;
}
.plan-price .per{font-size:12.5px;color:var(--text-3);margin-left:4px}
.plan-calls{font-size:12.5px;color:var(--text-2);margin-bottom:16px}
.plan-calls b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text);font-weight:620}
.plan ul{list-style:none;margin:0 0 18px;padding:0;flex:1}
.plan li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--text-2);
  line-height:1.6;margin:0 0 8px}
.plan li .ico{width:15px;height:15px;margin-top:2px;color:var(--ok-ink);stroke-width:2}
.plan .plan-cta{margin-top:auto}
.plan-current{
  text-align:center;padding:9px;border-radius:var(--r-sm);
  background:var(--brand-dim);color:var(--link);font-size:13px;font-weight:580;
}
.matrix td.yes{color:var(--ok-ink);text-align:center;font-weight:620}
.matrix td.no{color:var(--text-3);text-align:center}
.matrix th{text-align:center}
.matrix th:first-child,.matrix td:first-child{text-align:left}

.enterprise{
  display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px;
  padding:28px;align-items:start;
}
.enterprise h2{font-size:1.35rem}

/* -- 13 文档 ---------------------------------------------------------------- */
.doc-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:44px;align-items:start}
.doc-toc{
  position:sticky;top:78px;align-self:start;
  max-height:calc(100vh - 100px);overflow-y:auto;
  padding-right:6px;
}
.doc-toc-t{
  font-size:11.5px;font-weight:620;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:12px;
}
.doc-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.doc-toc li{margin:0;counter-increment:toc}
.doc-toc a{
  position:relative;display:block;
  padding:7px 10px 7px 16px;
  font-size:13px;color:var(--text-2);border-radius:var(--r-sm);
  transition:color .18s var(--ease),background-color .18s var(--ease);
}
.doc-toc a::before{
  content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;
  background:transparent;transition:background-color .18s var(--ease);
}
.doc-toc a:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
.doc-toc a.on{color:var(--text);background:var(--brand-dim);font-weight:560}
.doc-toc a.on::before{background:var(--brand)}

.doc-body{min-width:0}
.doc-body > section{
  padding-top:clamp(36px,4vw,52px);
  margin-bottom:clamp(36px,4vw,52px);
  border-bottom:1px solid var(--border);
  padding-bottom:clamp(36px,4vw,52px);
}
.doc-body > section:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.doc-body h2{
  display:flex;align-items:baseline;gap:12px;
  font-size:clamp(1.3rem,2vw,1.6rem);margin-bottom:16px;
}
.doc-body h2 .n{
  font-family:var(--font-mono);font-size:12px;font-weight:620;
  color:var(--link);background:var(--brand-dim);
  padding:3px 8px;border-radius:var(--r-sm);letter-spacing:.04em;
}
.doc-body h3{margin-top:30px;font-size:15.5px;color:var(--text)}
.doc-body p,.doc-body li{color:var(--text-2);font-size:14px;line-height:1.78}
.doc-body strong{color:var(--text)}

.steps{list-style:none;counter-reset:st;margin:16px 0 20px;padding:0}
.steps > li{
  position:relative;counter-increment:st;
  padding:0 0 16px 40px;margin:0;
  border-left:1px solid var(--border);margin-left:13px;
}
.steps > li:last-child{border-left-color:transparent;padding-bottom:0}
.steps > li::before{
  content:counter(st,decimal-leading-zero);
  position:absolute;left:-13px;top:0;
  display:grid;place-items:center;width:26px;height:26px;
  border-radius:50%;background:var(--surface-2);border:1px solid var(--border-str);
  font-family:var(--font-mono);font-size:10.5px;font-weight:620;color:var(--text-3);
}
.steps > li > b{display:block;color:var(--text);font-size:14px;margin-bottom:4px;font-weight:620}

/* -- 14 控制台 -------------------------------------------------------------- */
.layout-console{display:grid;grid-template-columns:210px minmax(0,1fr);gap:32px;align-items:start}
.console-side{position:sticky;top:78px;align-self:start}
.console-user{
  padding:14px;margin-bottom:14px;
  border:1px solid var(--border);border-radius:var(--r);
  background:var(--card-grad);box-shadow:var(--shadow-sm);
}
.console-user .em{font-size:12.5px;color:var(--text);word-break:break-all;font-weight:560}
.console-nav{display:flex;flex-direction:column;gap:2px}
.console-nav a{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:var(--r-sm);
  font-size:13.5px;color:var(--text-2);
  transition:color .18s var(--ease),background-color .18s var(--ease);
}
.console-nav a .ico{width:16px;height:16px;color:var(--text-3)}
.console-nav a:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
.console-nav a.on{color:var(--text);background:var(--brand-dim);font-weight:560}
.console-nav a.on .ico{color:var(--link)}
.console-main{min-width:0}

.page-head{
  display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:24px;
  border-bottom:1px solid var(--border);
}
.page-head h1{margin:0 0 6px;font-size:clamp(1.6rem,2.6vw,2.05rem)}
.page-head p{margin:0;color:var(--text-2);font-size:13.5px;max-width:72ch}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:24px}
.kpi{padding:16px 18px;position:relative;overflow:hidden}
.kpi::after{
  content:'';position:absolute;right:-40px;top:-50px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle closest-side,var(--brand-dim),transparent);pointer-events:none;
}
.kpi-l{
  display:flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:10px;
}
.kpi-v{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(1.7rem,2.6vw,2.15rem);font-weight:620;
  letter-spacing:-.035em;line-height:1.06;color:var(--text);
}
.kpi-s{font-size:12px;color:var(--text-3);margin-top:6px}
.kpi.ok .kpi-v{color:var(--ok-ink)}
.kpi.warn .kpi-v{color:var(--warn-ink)}
.kpi.over .kpi-v{color:var(--danger-ink)}
.kpi.ok::after{background:radial-gradient(circle closest-side,var(--ok-dim),transparent)}
.kpi.warn::after{background:radial-gradient(circle closest-side,var(--warn-dim),transparent)}
.kpi.over::after{background:radial-gradient(circle closest-side,var(--danger-dim),transparent)}

.chart-box{width:100%;min-height:40px;overflow:hidden}
.chart-box svg{display:block;max-width:100%}
.chart-empty{
  display:grid;place-items:center;min-height:120px;
  color:var(--text-3);font-size:13px;
  border:1px dashed var(--border-str);border-radius:var(--r);
}
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:11.5px;color:var(--text-3)}
.chart-legend span{display:inline-flex;align-items:center;gap:6px}
.chart-legend i{width:9px;height:9px;border-radius:2px;display:block}
.donut-wrap{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.donut-wrap .chart-box{flex:none;width:118px}

.token-reveal{border-color:var(--accent)}
.token-reveal .card-head{background:var(--accent-dim)}
.token-reveal .card-head h2{color:var(--accent-ink)}
.token-reveal::before{
  content:'';position:absolute;left:14px;right:14px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.pay-slot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:170px;padding:20px;
  border:1px dashed var(--border-str);border-radius:var(--r);
  background:var(--surface-2);color:var(--text-3);font-size:12.5px;text-align:center;
}
.pay-slot .ico{color:var(--text-3)}

/* -- 15 登录 / 授权 / 错误 / 法务 / 试用台 --------------------------------- */
.auth-wrap{
  max-width:440px;margin:clamp(24px,5vw,64px) auto;
  display:flex;flex-direction:column;gap:16px;
}
.auth-card{
  padding:32px 30px 26px;
  background:var(--card-grad);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:var(--shadow-pop);
}
.auth-card::before{
  content:'';position:absolute;left:20px;right:20px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
}
.auth-head{margin-bottom:22px}
.auth-head h1{font-size:1.6rem;margin-bottom:6px}
.auth-head p{margin:0;color:var(--text-3);font-size:13px}
.auth-alt{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);
  font-size:13px;color:var(--text-2);text-align:center}
.auth-side{text-align:center;font-size:12.5px;color:var(--text-3);line-height:1.65}

.consent-card{padding:30px;box-shadow:var(--shadow-pop)}
.consent-card::before{
  content:'';position:absolute;left:20px;right:20px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
}
.consent-title{font-size:1.4rem;margin-bottom:10px}
.consent-lead{font-size:14px;color:var(--text-2);line-height:1.7}
.consent-lead strong{color:var(--text)}
.consent-scopes{
  margin:20px 0;border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface-2);overflow:hidden;
}
.consent-scopes-head{
  padding:9px 14px;border-bottom:1px solid var(--border);
  font-size:11.5px;font-weight:620;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);
}
.consent-scopes ul{list-style:none;margin:0;padding:0}
.consent-scopes li{
  display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;
  padding:10px 14px;border-bottom:1px solid var(--border);margin:0;font-size:13px;
}
.consent-scopes li:last-child{border-bottom:0}
.consent-scopes li code{flex:none;color:var(--link);background:var(--brand-dim);border-color:transparent}
.consent-scopes li span{color:var(--text-2);min-width:0}
.consent-note{
  padding:14px;border-radius:var(--r);background:var(--surface-2);
  border:1px solid var(--border);font-size:12.5px;line-height:1.7;
}
.consent-note p{margin:0 0 8px;color:var(--text-2)}
.consent-note p:last-child{margin-bottom:0}
.consent-note strong{color:var(--text)}
.consent-actions{display:flex;gap:12px;margin-top:22px}
.consent-actions .btn{flex:1}
.consent-foot{margin:16px 0 0;font-size:12px;text-align:center}

.err-wrap{
  max-width:620px;margin:clamp(40px,9vw,110px) auto;text-align:center;
}
.err-code{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(4rem,14vw,7.5rem);font-weight:700;line-height:1;
  letter-spacing:-.05em;
  background:linear-gradient(180deg,var(--text-2),var(--text-3));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:var(--text-2);
}
.err-msg{font-size:1.35rem;font-weight:640;margin:10px 0 14px;color:var(--text)}
.err-wrap p{margin-inline:auto}

.legal-page{padding-block:8px clamp(30px,5vw,60px)}
.legal-page h1{margin-bottom:6px}
.legal-page h2{
  margin-top:36px;font-size:1.15rem;
  padding-bottom:8px;border-bottom:1px solid var(--border);
}
.legal-page p,.legal-page li{color:var(--text-2);font-size:14px;line-height:1.8}
.legal-page pre{
  padding:16px 18px;border-radius:var(--r);background:var(--code-bg);
  border:1px solid var(--border-str);overflow-x:auto;
  font-size:12.5px;line-height:1.75;color:var(--code-fg);box-shadow:var(--shadow-card);
}
.legal-highlight{
  padding:16px 18px;border-radius:var(--r);
  background:var(--brand-dim);border-left:2px solid var(--brand);
  color:var(--text) !important;
}
.legal-foot{margin-top:40px;padding-top:20px;border-top:1px solid var(--border)}
.table-scroll table{border:1px solid var(--border);border-radius:var(--r);font-size:13px}

/* 试用台：IDE 感的左右分栏 */
.pg-layout{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:20px;align-items:start}
.pg-out{
  margin:0;padding:16px 18px;
  background:var(--code-bg);
  border-top:1px solid var(--border);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  font-family:var(--font-mono);font-size:12.5px;line-height:1.75;
  color:var(--code-fg);white-space:pre-wrap;word-break:break-word;
  min-height:340px;max-height:60vh;overflow:auto;
  font-variant-numeric:tabular-nums;
}
.pg-out.placeholder{color:var(--code-faint)}
.pg-meta{
  font-family:var(--font-mono);font-size:11.5px;color:var(--text-3);
  min-height:1.2em;font-variant-numeric:tabular-nums;
}
.preset-list{display:flex;flex-direction:column;gap:8px}
.preset{justify-content:space-between;text-align:left;width:100%;gap:12px}
.preset span{
  font-family:var(--font-mono);font-size:11px;color:var(--text-3);
  padding:1px 6px;border:1px solid var(--border);border-radius:var(--r-sm);flex:none;
}
.preset:hover span{color:var(--link);border-color:var(--brand)}

/* -- 16 响应式 -------------------------------------------------------------- */
@media (max-width:1180px){
  .doc-layout{grid-template-columns:200px minmax(0,1fr);gap:32px}
  .enterprise{grid-template-columns:minmax(0,1fr) 250px;gap:24px}
}
@media (max-width:1024px){
  :root{--gap:16px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .hero{padding-block:clamp(40px,6vw,64px) clamp(36px,5vw,56px)}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .plan.featured{transform:none}
  .plan.featured:hover{transform:translateY(-2px)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .layout-console{grid-template-columns:minmax(0,1fr);gap:20px}
  .console-side{position:static}
  .console-nav{flex-direction:row;flex-wrap:wrap;gap:6px}
  .console-nav a{border:1px solid var(--border)}
  .doc-layout{grid-template-columns:minmax(0,1fr);gap:20px}
  .doc-toc{
    position:static;max-height:none;
    padding:14px;border:1px solid var(--border);border-radius:var(--r);
    background:var(--surface-2);
  }
  .doc-toc ol{display:flex;flex-wrap:wrap;gap:4px}
  .doc-toc a{padding:6px 10px}
  .doc-toc a::before{display:none}
  .pg-layout{grid-template-columns:minmax(0,1fr)}
  .enterprise{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .g3,.g2{grid-template-columns:minmax(0,1fr)}
  .vs{grid-template-columns:minmax(0,1fr)}
  .vs-col + .vs-col::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  .footer-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .flow-zone,.flow-zone.local{flex:1 1 100%}
  .flow-cross{flex:1 1 100%;flex-direction:row;gap:12px}
  .flow-cross .ico{transform:rotate(90deg)}
}
@media (max-width:768px){
  body{font-size:14.5px}
  .container{padding-inline:18px}
  body.landing .section-shell{padding-inline:18px}
  .hdr{height:56px;gap:10px}
  .nav-desk,.hdr-auth,.hdr-cta{display:none}
  .nav-burger{display:inline-grid}
  .stat-band{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:18px 16px}
  .stat + .stat::before{display:none}
  .stat:nth-child(n+2){border-left:1px solid var(--border)}
  .stat:nth-child(odd){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--border)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card-body,.card-pad{padding:16px}
  .card-head{padding:12px 16px}
  .auth-card{padding:24px 20px}
  .consent-actions{flex-direction:column}
  .donut-wrap{gap:18px}
  .toasts{left:14px;right:14px;bottom:14px}
}
@media (max-width:520px){
  .plans{grid-template-columns:minmax(0,1fr)}
  .kpis{grid-template-columns:minmax(0,1fr)}
  .hero-cta .btn{width:100%}
  .btn-row .btn{flex:1 1 auto}
  .vs li{grid-template-columns:minmax(0,1fr);gap:3px}
  .err-wrap{padding-inline:6px}
}

/* -- 17 降级与打印 ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal{opacity:1;transform:none}
  .tw-cursor{animation:none}
}

@media print{
  /* 打印时进场动效必须整体失效，否则未滚动到的区块会印成空白 */
  .js .reveal{opacity:1 !important;transform:none !important}
  body::before,.site-header,.site-footer,.toasts,.hero-cta,.doc-toc,
  .docs-nav,.docs-aside,.to-top,.drawer,.drawer-backdrop{display:none !important}
  html,body{background:#fff;color:#000}
  .card,.code,.term,.tw{box-shadow:none;border:1px solid #ccc}
}

/* ==========================================================================
   18 信息架构补充：顶栏右侧 / 抽屉 / 回到顶部 / 文档三栏 / 控制台胶囊条
   ========================================================================== */

/* -- 顶栏右侧 --------------------------------------------------------------- */
.hdr-auth{display:flex;align-items:center;gap:2px}
.hdr-link{
  padding:7px 10px;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:500;color:var(--text-2);white-space:nowrap;
  transition:color .18s var(--ease),background-color .18s var(--ease);
}
.hdr-link:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
.hdr-link.on{color:var(--text);background:var(--brand-dim)}
.hdr-cta{margin-left:4px}
.nav-burger{display:none}
.flash-wrap{padding-top:16px}

/* -- 移动端抽屉 ------------------------------------------------------------- */
.drawer-backdrop{
  position:fixed;inset:0;z-index:90;
  background:rgba(4,6,12,.6);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .22s var(--ease);
}
.drawer-backdrop.in{opacity:1}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:100;
  width:min(300px,84vw);
  display:flex;flex-direction:column;gap:8px;
  padding:16px;
  background:var(--card-grad);
  border-left:1px solid var(--border-str);
  box-shadow:-24px 0 60px -24px rgba(0,0,0,.7);
  transform:translateX(100%);
  transition:transform .26s var(--ease);
  overflow-y:auto;
}
.drawer.in{transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.drawer-t{
  font-size:11.5px;font-weight:620;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);
}
.drawer-nav{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.drawer-nav a{
  padding:11px 12px;border-radius:var(--r-sm);
  font-size:14.5px;color:var(--text-2);
}
.drawer-nav a:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.drawer-nav a.on{background:var(--brand-dim);color:var(--text);font-weight:560}
.drawer-sep{height:1px;background:var(--border);margin:8px 2px}
body.drawer-open{overflow:hidden}

/* -- 回到顶部 --------------------------------------------------------------- */
.to-top{
  position:fixed;right:18px;bottom:18px;z-index:70;
  display:grid;place-items:center;width:40px;height:40px;padding:0;
  border:1px solid var(--border-str);border-radius:50%;
  background:var(--surface);color:var(--text-2);
  box-shadow:var(--shadow-pop);
  transition:opacity .22s var(--ease),transform .22s var(--ease),color .18s var(--ease);
}
.to-top:hover{color:var(--text);transform:translateY(-2px)}
.to-top:active{transform:scale(.94)}
.to-top[hidden]{display:none}
.to-top.fade{opacity:0;transform:translateY(8px)}

/* -- 文档：三栏 ------------------------------------------------------------- */
.docs-layout{
  display:grid;
  grid-template-columns:226px minmax(0,1fr) 186px;
  gap:36px;align-items:start;
}
.docs-nav{
  position:sticky;top:78px;align-self:start;
  max-height:calc(100vh - 96px);overflow-y:auto;
  padding:2px 8px 20px 0;scrollbar-width:thin;
}
.docs-search{position:relative;margin-bottom:16px}
.docs-search input{
  padding:8px 30px 8px 32px;font-size:13px;border-radius:var(--r-sm);
}
.docs-search .ico{
  position:absolute;left:10px;top:50%;margin-top:-8px;
  width:16px;height:16px;color:var(--text-3);pointer-events:none;
}
.docs-search kbd{
  position:absolute;right:9px;top:50%;margin-top:-9px;
  font-size:10.5px;color:var(--text-3);
  border:1px solid var(--border);border-radius:4px;padding:1px 5px;
  background:var(--surface);pointer-events:none;
}
.docs-search-count{
  margin-top:6px;font-size:11.5px;color:var(--text-3);min-height:1em;
}
.docs-group{margin-bottom:18px}
.docs-group[hidden]{display:none}
.docs-group-t{
  font-size:11px;font-weight:620;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);padding:0 10px;margin-bottom:6px;
}
.docs-nav a{
  position:relative;display:block;
  padding:6px 10px 6px 16px;margin-bottom:1px;
  font-size:13px;color:var(--text-2);border-radius:var(--r-sm);line-height:1.45;
  transition:color .18s var(--ease),background-color .18s var(--ease);
}
.docs-nav a[hidden]{display:none}
.docs-nav a::before{
  content:'';position:absolute;left:0;top:5px;bottom:5px;width:2px;border-radius:2px;
  background:transparent;transition:background-color .18s var(--ease);
}
.docs-nav a:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
.docs-nav a.on{color:var(--text);background:var(--brand-dim);font-weight:560}
.docs-nav a.on::before{background:var(--brand)}
.docs-nav-empty{padding:10px;font-size:12.5px;color:var(--text-3)}

.docs-aside{
  position:sticky;top:78px;align-self:start;
  max-height:calc(100vh - 96px);overflow-y:auto;
  font-size:12.5px;
}
.docs-aside-t{
  font-size:11px;font-weight:620;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:10px;
}
.docs-aside a{
  display:block;padding:5px 0 5px 11px;color:var(--text-3);
  border-left:1px solid var(--border);line-height:1.45;
}
.docs-aside a:hover{color:var(--text);text-decoration:none;border-left-color:var(--border-str)}
.docs-aside a.on{color:var(--link);border-left-color:var(--brand)}

.docs-main{min-width:0}
.docs-toc-mobile{display:none;margin-bottom:20px}

/* 标题锚点 */
.doc-body h2 .anchor,.doc-body h3 .anchor{
  margin-left:8px;font-family:var(--font-mono);font-size:.62em;font-weight:500;
  color:var(--text-3);opacity:0;
  transition:opacity .18s var(--ease),color .18s var(--ease);
  border:0;background:none;padding:0 2px;
}
.doc-body h2:hover .anchor,.doc-body h3:hover .anchor,
.doc-body .anchor:focus-visible{opacity:1}
.doc-body .anchor:hover{color:var(--link)}

/* -- 落地页：三步就能用 ----------------------------------------------------- */
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.step3{padding:24px 22px;display:flex;flex-direction:column}
.step3-n{
  display:grid;place-items:center;width:30px;height:30px;margin-bottom:14px;
  border-radius:50%;
  background:linear-gradient(180deg,var(--brand-btn-1),var(--brand-btn-2));
  color:var(--on-brand);
  font-family:var(--font-mono);font-size:13px;font-weight:640;
  box-shadow:0 6px 16px -8px var(--brand-glow);
}
.step3 h3{font-size:15.5px;margin-bottom:8px}
.step3 p{font-size:13px;color:var(--text-2);line-height:1.7;margin-bottom:14px;flex:1}
.step3 .code{margin-bottom:0}
.step3 .code pre{font-size:11.75px;padding:12px 14px}
.step3-say{
  margin:0;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--border);
  font-size:12.75px;color:var(--text-2);line-height:1.7;
}
.step3-say b{color:var(--text);font-weight:560}

/* -- 控制台：额度胶囊条 ----------------------------------------------------- */
.quota-pill{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 18px;margin-bottom:20px;
  border:1px solid var(--border);border-radius:var(--r-pill);
  background:var(--card-grad);box-shadow:var(--shadow-sm);
}
.quota-pill .qp-plan{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:580;color:var(--text);white-space:nowrap;
}
.quota-pill .qp-bar{flex:1 1 180px;min-width:120px}
.quota-pill .qp-num{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:12.5px;color:var(--text-2);white-space:nowrap;
}
.quota-pill .qp-num b{color:var(--text);font-weight:620}
.quota-pill .progress{height:7px}

/* -- 需要更高额度才注册：定价区上方的一行小字 ------------------------------ */
.why-register{
  display:flex;align-items:flex-start;gap:10px;
  margin-bottom:18px;font-size:12.75px;color:var(--text-3);line-height:1.6;
}
.why-register .ico{width:15px;height:15px;color:var(--accent-ink);margin-top:2px}
.why-register span{flex:1 1 auto;min-width:0}
.why-register strong{color:var(--text-2)}

/* -- 补充响应式 ------------------------------------------------------------- */
@media (max-width:1200px){
  .docs-layout{grid-template-columns:222px minmax(0,1fr);gap:32px}
  .docs-aside{display:none}
}
@media (max-width:1024px){
  .steps3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .docs-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .docs-nav{
    position:static;max-height:none;overflow:visible;
    padding:16px;margin-bottom:24px;
    border:1px solid var(--border);border-radius:var(--r);
    background:var(--surface-2);
  }
  .docs-group{margin-bottom:12px}
  .docs-nav-list{display:flex;flex-wrap:wrap;gap:4px}
  .docs-nav a{padding:6px 10px}
  .docs-nav a::before{display:none}
}
@media (max-width:768px){
  /* 这条必须放在 .nav-burger{display:none} 之后：同优先级，后来者胜 */
  .nav-burger{display:inline-grid}
  .nav-desk,.hdr-auth,.hdr-cta{display:none}
  .to-top{right:14px;bottom:14px}
  .quota-pill{border-radius:var(--r-lg)}
}

/* ==========================================================================
   19 积分与邀请 / 加油包 / 注册页说明 / 错误页入口
   ========================================================================== */

/* -- 余额卡 ----------------------------------------------------------------- */
.bal-card{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;
  padding:28px 30px;
}
.bal-l{
  font-size:11.5px;font-weight:620;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:10px;
}
.bal-v{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(2.6rem,4vw,3.6rem);font-weight:660;
  letter-spacing:-.04em;line-height:1;color:var(--text);
}
.bal-split{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:22px}
.bal-part{display:flex;align-items:baseline;gap:8px;min-width:0}
.bal-dot{width:8px;height:8px;border-radius:2px;flex:none;transform:translateY(-2px)}
.bal-dot.m{background:linear-gradient(180deg,var(--brand-2),var(--brand))}
.bal-dot.p{background:linear-gradient(180deg,var(--accent),#E58200)}
.bal-n{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:1.15rem;font-weight:620;color:var(--text);letter-spacing:-.02em;
}
.bal-t{font-size:12px;color:var(--text-3)}
.bal-side{
  padding-left:32px;border-left:1px solid var(--border);
}
.bal-side p{margin-bottom:0}

/* -- 怎么拿积分 ------------------------------------------------------------- */
.earn-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.earn{padding:20px 18px}
.earn-ico{
  display:grid;place-items:center;width:34px;height:34px;margin-bottom:14px;
  border-radius:var(--r-sm);background:var(--brand-dim);color:var(--link);
}
.earn-v{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:1.5rem;font-weight:640;letter-spacing:-.03em;line-height:1.1;color:var(--text);
}
.earn-t{font-size:12.5px;font-weight:580;color:var(--text-2);margin-top:5px}
.earn p{font-size:12px;color:var(--text-3);line-height:1.6;margin:8px 0 0}

/* -- 邀请 ------------------------------------------------------------------- */
.ref-link{display:flex;gap:10px;align-items:stretch;margin-bottom:16px;flex-wrap:wrap}
.ref-link input{
  flex:1 1 320px;min-width:0;
  font-size:13px;padding:11px 14px;letter-spacing:.01em;
  background:var(--surface-2);color:var(--text);border-color:var(--border-str);
}
.ref-link .btn{flex:none;padding-inline:20px}
.ref-code-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 16px;margin-bottom:16px;
  border:1px dashed var(--border-str);border-radius:var(--r);background:var(--surface-2);
}
.ref-code-l{
  font-size:11px;font-weight:620;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:4px;
}
.ref-code{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:1.6rem;font-weight:660;letter-spacing:.12em;color:var(--text);line-height:1.1;
}
.ref-rule{line-height:1.8;margin-bottom:18px}
.ref-rule strong{color:var(--text)}
.ref-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  background:var(--surface-2);
}
.ref-stat{padding:16px 18px;position:relative}
.ref-stat + .ref-stat::before{
  content:'';position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--border);
}
.ref-stat-v{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:1.6rem;font-weight:640;letter-spacing:-.03em;line-height:1.1;color:var(--text);
}
.ref-stat-v.ok{color:var(--ok-ink)}
.ref-stat-v.accent{color:var(--accent-ink)}
.ref-stat-l{font-size:12px;color:var(--text-3);margin-top:5px}

/* -- 加油包 ----------------------------------------------------------------- */
.pack{display:flex;flex-direction:column;padding:22px}
.pack-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.pack-name{font-size:14px;font-weight:620;color:var(--text)}
.pack-credits{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:1.35rem;font-weight:640;letter-spacing:-.03em;color:var(--text);margin-top:6px;
}
.pack-price{display:flex;align-items:baseline;gap:1px;color:var(--text)}
.pack-price .cur{font-size:14px;color:var(--text-3);font-family:var(--font-mono)}
.pack-price .amt{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:2rem;font-weight:640;letter-spacing:-.035em;line-height:1;
}
.pack-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;flex:1;align-items:flex-start}

/* -- 积分明细 --------------------------------------------------------------- */
td.delta.up{color:var(--ok-ink);font-weight:620}
td.delta.down{color:var(--text-2)}

/* -- 注册页右侧说明 --------------------------------------------------------- */
.auth-why{background:var(--surface-2);box-shadow:none}
.auth-why-t{
  font-size:11.5px;font-weight:620;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:10px;
}
.auth-why p{font-size:13px;color:var(--text-2);line-height:1.7}
.auth-why ul{margin:0 0 12px;padding-left:1.1em}
.auth-why li{font-size:12.5px;color:var(--text-2);line-height:1.65}

/* -- 错误页三个入口 --------------------------------------------------------- */
.err-links{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  margin-top:34px;text-align:left;
}
.err-link{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  color:var(--text-2);font-size:13px;
}
.err-link:hover{text-decoration:none;color:var(--text)}
.err-link .ico{color:var(--link);flex:none}
.err-link b{display:block;color:var(--text);font-size:13.5px;margin-bottom:2px}

@media (max-width:900px){
  .bal-card{grid-template-columns:minmax(0,1fr);gap:22px}
  .bal-side{padding-left:0;padding-top:20px;border-left:0;border-top:1px solid var(--border)}
  .earn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .auth-wrap{max-width:520px}
  .err-links{grid-template-columns:minmax(0,1fr)}
  .ref-stats{grid-template-columns:minmax(0,1fr)}
  .ref-stat + .ref-stat::before{left:14px;right:14px;top:0;bottom:auto;width:auto;height:1px}
  .ref-code{font-size:1.3rem}
}
@media (max-width:520px){
  .earn-grid{grid-template-columns:minmax(0,1fr)}
  .ref-link .btn{width:100%}
}

/* ==========================================================================
   20 微信扫码登录 / 手机绑定页 / 账号绑定
   ========================================================================== */

/* -- 登录 / 注册：扫码为主，邮箱为辅 --------------------------------------- */
.auth-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:22px;align-items:start;
  width:100%;max-width:940px;
  margin:clamp(20px,4vw,56px) auto;
}
.auth-grid.no-wx,
body.no-wx .auth-grid{grid-template-columns:minmax(0,1fr);max-width:460px}
.auth-referred{grid-column:1 / -1}
.auth-referred .alert{margin-bottom:0}

.wx-card{
  padding:30px 28px 24px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  box-shadow:var(--shadow-pop);
}
.wx-head{display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%;margin-bottom:22px}
.wx-ico{
  display:grid;place-items:center;flex:none;
  width:40px;height:40px;border-radius:var(--r);
  background:var(--ok-dim);color:var(--ok-ink);
}
.wx-head h1{font-size:1.5rem;margin:0 0 6px;letter-spacing:-.022em}
.wx-head p{margin:0;font-size:13px;color:var(--text-2);line-height:1.65;max-width:44ch}

/* 二维码永远白底：微信扫码对反色码识别率低 */
.wx-qr{
  position:relative;
  width:268px;height:268px;
  display:grid;place-items:center;
  padding:14px;border-radius:var(--r-lg);
  background:#FFFFFF;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 18px 44px -18px rgba(0,0,0,.55);
  border:1px solid var(--border);
}
.wx-qr img{width:240px;height:240px;display:block;border-radius:4px}
.wx-skel{
  width:240px;height:240px;border-radius:6px;
  background:linear-gradient(100deg,#EDF0F6 30%,#F7F9FC 50%,#EDF0F6 70%);
  background-size:220% 100%;
  animation:wx-shimmer 1.4s linear infinite;
}
@keyframes wx-shimmer{from{background-position:130% 0}to{background-position:-30% 0}}
.wx-mask{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border-radius:var(--r-lg);
  background:rgba(11,16,32,.72);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  color:#F2F5FA;font-size:13px;
}
.wx-mask .ico{width:26px;height:26px;color:#F2F5FA}
.wx-mask[hidden]{display:none}

.wx-code{
  margin:16px 0 0;font-size:12.5px;color:var(--text-3);
}
.wx-code code{
  font-size:14px;letter-spacing:.18em;color:var(--text);
  background:var(--surface-2);border-color:var(--border-str);
}
.wx-status{
  margin:10px 0 0;font-size:13px;color:var(--text-2);min-height:1.6em;
}
.wx-mock{margin:8px 0 0}
.wx-name{margin:6px 0 0}

.auth-side-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.auth-fallback{padding:24px 22px 20px;background:var(--surface-2);box-shadow:var(--shadow-sm)}
.auth-fallback::before{display:none}
.auth-fallback .auth-head{margin-bottom:16px}
.auth-fallback .auth-head h2{font-size:15px;margin-bottom:5px}
.auth-fallback .auth-head p{margin:0;font-size:12.5px;color:var(--text-3);line-height:1.6}
.auth-terms{margin:10px 0 0;font-size:11.5px;color:var(--text-3);text-align:center;line-height:1.6}
.auth-note{
  margin:0;padding:0 4px;
  font-size:12.5px;color:var(--text-3);line-height:1.75;
}
.auth-note strong{color:var(--text-2)}

/* -- 手机上的扫码绑定页（移动端优先） ------------------------------------- */
.link-wrap{
  width:100%;max-width:460px;
  margin:clamp(16px,5vw,52px) auto;
  display:flex;flex-direction:column;gap:14px;
}
.link-card{
  padding:28px 22px 24px;text-align:center;
  box-shadow:var(--shadow-pop);
}
.link-head h1{font-size:1.4rem;margin-bottom:8px}
.link-head p{margin:0 auto 22px;font-size:13.5px;line-height:1.7;max-width:34ch}
.link-qr{
  width:268px;height:268px;margin:0 auto;
  display:grid;place-items:center;
  padding:14px;border-radius:var(--r-lg);
  background:#FFFFFF;border:1px solid var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 18px 44px -18px rgba(0,0,0,.55);
}
.link-qr img{width:240px;height:240px;display:block;border-radius:4px}
.link-code{margin:18px 0 0;font-size:12.5px;color:var(--text-3)}
.link-code code{
  font-size:16px;letter-spacing:.22em;color:var(--text);
  background:var(--surface-2);border-color:var(--border-str);
}
.link-hint{
  display:inline-flex;align-items:center;gap:8px;
  margin:14px 0 0;font-size:13px;color:var(--text-2);
}
.link-dot{
  width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 3px var(--ok-dim);
  animation:link-pulse 1.6s ease-in-out infinite;
}
@keyframes link-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.link-mock{margin:10px 0 0}
.link-steps{
  list-style:none;counter-reset:lk;
  margin:22px 0 0;padding:16px 0 0;
  border-top:1px solid var(--border);
  text-align:left;
}
.link-steps li{
  counter-increment:lk;position:relative;
  padding-left:28px;margin:0 0 9px;
  font-size:12.75px;color:var(--text-2);line-height:1.6;
}
.link-steps li:last-child{margin-bottom:0}
.link-steps li::before{
  content:counter(lk);position:absolute;left:0;top:1px;
  display:grid;place-items:center;width:19px;height:19px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--border-str);
  font-family:var(--font-mono);font-size:10.5px;font-weight:620;color:var(--text-3);
}
.link-state{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0}
.link-state h1{font-size:1.4rem;margin:12px 0 8px}
.link-state p{margin:0 auto 20px;max-width:32ch;font-size:13.5px;line-height:1.7}
.link-badge{
  display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
}
.link-badge .ico{width:28px;height:28px;stroke-width:1.8}
.link-badge.ok{background:var(--ok-dim);color:var(--ok-ink)}
.link-badge.bad{background:var(--warn-dim);color:var(--warn-ink)}
.link-foot{text-align:center;margin:0}

/* -- 控制台：账号绑定 ------------------------------------------------------- */
.bind-list{
  border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface-2);overflow:hidden;margin-bottom:18px;
}
.bind-row{
  display:flex;align-items:center;gap:14px;
  padding:13px 16px;border-bottom:1px solid var(--border);
}
.bind-row:last-child{border-bottom:0}
.bind-ico{
  display:grid;place-items:center;flex:none;
  width:32px;height:32px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--border);color:var(--text-3);
}
.bind-ico .ico{width:17px;height:17px}
.bind-main{flex:1;min-width:0}
.bind-t{font-size:11.5px;font-weight:620;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.bind-v{font-size:13.5px;color:var(--text);margin-top:2px;word-break:break-all}
.bind-forms{align-items:start;grid-template-columns:repeat(auto-fit,minmax(290px,430px));justify-content:start}
.bind-form{
  padding:18px;border:1px solid var(--border);border-radius:var(--r);
  background:var(--card-grad);box-shadow:var(--shadow-sm);
}
.bind-form-t{font-size:14px;font-weight:620;color:var(--text);margin-bottom:4px}
.bind-form p{margin-bottom:14px}
.bind-inline{display:flex;gap:8px}
.bind-inline input{flex:1;min-width:0}
.bind-inline .btn{flex:none;white-space:nowrap}
.bind-inline .btn[disabled]{opacity:.55}

@media (max-width:900px){
  .auth-grid{grid-template-columns:minmax(0,1fr);max-width:520px}
  .auth-side-col{order:2}
}
@media (max-width:520px){
  .wx-card{padding:22px 16px 20px}
  .wx-head{flex-direction:column;align-items:center;text-align:center;gap:10px}
  .wx-head p{max-width:none}
  .wx-qr,.link-qr{width:min(268px,86vw);height:min(268px,86vw);padding:10px}
  .wx-qr img,.link-qr img{width:100%;height:auto}
  .wx-skel{width:100%;height:100%}
  .link-card{padding:22px 16px 20px}
  .bind-inline{flex-direction:column}
  .bind-inline .btn{width:100%}
}