/* Agents Butler · site components — 06_网站前后台视觉规范_v01.md §3–§5 */

/* 0. fonts (self-hosted Latin subsets, OFL) — never Google Fonts CDN */
@font-face{ font-family:"Figtree"; src:url("/assets/fonts/figtree-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Figtree"; src:url("/assets/fonts/figtree-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Figtree"; src:url("/assets/fonts/figtree-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Outfit"; src:url("/assets/fonts/outfit-300.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Outfit"; src:url("/assets/fonts/outfit-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* 1. base */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--ab-site-bg); color:var(--ab-ink); font:400 15px/23px var(--ab-font-sans);
  -webkit-font-smoothing:antialiased; position:relative; z-index:1; }
[lang^="zh"] body{ line-height:25px; }
a{ color:inherit; }
img,svg{ display:block; }
h1,h2,h3,h4,p{ margin:0; }
code,kbd,pre{ font-family:var(--ab-font-mono); }
:where(a,button,summary,input,select,textarea):focus-visible{ outline:2px solid var(--ab-focus); outline-offset:2px; }
.ab-wrap{ width:100%; max-width:var(--ab-container); margin-inline:auto; padding-inline:var(--ab-gutter); }
.ab-w-full{ max-width:var(--ab-w-full); margin-inline:auto; }
.ab-w-card{ max-width:var(--ab-w-card); margin-inline:auto; }
.ab-w-read{ max-width:var(--ab-w-read); margin-inline:auto; }
.ab-section{ margin-top:96px; }
@media (max-width:1199px){ .ab-section{ margin-top:72px; } }
@media (max-width:767px){  .ab-section{ margin-top:56px; } }
.ab-h2{ font:300 clamp(24px,5.6vw,32px)/1.25 var(--ab-font-display); letter-spacing:-.022em; color:var(--ab-ink); text-wrap:balance; }
[lang^="zh"] .ab-h2{ font-weight:400; font-size:clamp(22px,5vw,28px); letter-spacing:-.01em; }
.ab-h2 + .ab-lead{ margin-top:10px; }
.ab-lead{ font:400 17px/28px var(--ab-font-sans); color:var(--ab-ink-2); max-width:56ch; }
.ab-page-h1{ font:300 clamp(28px,6.4vw,40px)/1.2 var(--ab-font-display); letter-spacing:-.022em; }
[lang^="zh"] .ab-page-h1{ font-weight:400; font-size:clamp(26px,5.6vw,34px); letter-spacing:-.01em; }
.ab-page-head{ padding-top:72px; max-width:var(--ab-w-read); }
.ab-page-head .ab-lead{ margin-top:14px; }
.ab-page-head--center{ text-align:center; max-width:880px; margin-inline:auto; }
.ab-page-head--center .ab-lead{ margin-inline:auto; }
.ab-muted{ color:var(--ab-ink-2); }
.ab-meta{ font:400 13px/20px var(--ab-font-sans); color:var(--ab-ink-3); }
.ab-num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.ab-flow > * + *{ margin-top:14px; }
.ab-center{ text-align:center; }
.ab-eyebrow{ font:500 12px/16px var(--ab-font-sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ab-ink-3); }
[lang^="zh"] .ab-eyebrow{ text-transform:none; letter-spacing:0; font-size:13px; }

/* 4.1 nav */
.ab-nav{ position:sticky; top:0; z-index:50; height:72px; background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent; transition:border-color 160ms var(--ab-ease-out), background 160ms var(--ab-ease-out); }
.ab-nav.is-stuck{ border-bottom-color:var(--ab-line); background:rgba(255,255,255,.86); }
.ab-nav__in{ height:100%; display:flex; align-items:center; gap:28px; }
.ab-nav__brand{ display:flex; align-items:center; gap:10px; font:500 17px/24px var(--ab-font-sans); color:var(--ab-ink); text-decoration:none; }
.ab-nav__brand img{ width:28px; height:28px; }
.ab-nav__brand small{ font:400 13px/20px var(--ab-font-sans); color:var(--ab-ink-3); }
[lang="en"] .ab-nav__brand small{ display:none; }
.ab-nav__links{ display:flex; gap:28px; margin-left:auto; }
.ab-nav__links a{ font:400 15px/22px var(--ab-font-sans); color:var(--ab-ink-2); text-decoration:none; transition:color 120ms var(--ab-ease-out); }
.ab-nav__links a:hover, .ab-nav__links a[aria-current="page"]{ color:var(--ab-ink); }
.ab-nav__acts{ display:flex; align-items:center; gap:16px; }
.ab-nav__menu{ display:none; }
@supports not (backdrop-filter:blur(1px)){ .ab-nav{ background:#fff; } }
@media (max-width:767px){
  .ab-nav{ height:64px; }
  .ab-nav__links{ display:none; position:absolute; left:0; right:0; top:64px; flex-direction:column; gap:0; margin:0;
    background:var(--ab-surface); box-shadow:var(--ab-shadow-lift); border-radius:0 0 20px 20px; padding:8px 0 12px; }
  .ab-nav__links.is-open{ display:flex; animation:ab-drop 240ms var(--ab-ease-out); }
  .ab-nav__links a{ padding:0 var(--ab-gutter); line-height:52px; font-size:16px; }
  .ab-nav__menu{ display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border:0; background:transparent; border-radius:var(--ab-r-md); color:var(--ab-ink-2); cursor:pointer; }
  .ab-nav__menu svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
  .ab-nav__acts .ab-btn span{ display:none; }
  .ab-nav__acts .ab-btn{ width:40px; padding:0; }
  .ab-nav__acts .ab-lang{ display:none; }
}
@keyframes ab-drop{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* 4.2 hero + spark */
.ab-hero-zone{ position:relative; isolation:isolate; }
.ab-hero{ padding:96px 0 0; text-align:center; }
.ab-hero__h1{ max-width:880px; margin:0 auto; font:300 clamp(34px,8.2vw,56px)/1.10 var(--ab-font-display); letter-spacing:-.022em; color:var(--ab-ink); text-wrap:balance; }
[lang^="zh"] .ab-hero__h1{ font-weight:400; font-size:clamp(28px,7vw,44px); line-height:1.24; letter-spacing:-.01em; }
.ab-hero__sub{ max-width:46em; margin:18px auto 0; font:400 19px/31px var(--ab-font-sans); color:var(--ab-ink-2); text-wrap:balance; }
[lang^="zh"] .ab-hero__sub{ font-size:18px; line-height:32px; }
.ab-spark{ width:var(--spark,88px); height:var(--spark,88px); display:inline-block; vertical-align:middle; margin-left:12px; transform:translateY(-6px);
  fill:none; stroke:var(--ab-spark); stroke-width:1.25; stroke-linejoin:round; opacity:.9; }
.ab-spark--sm{ --spark:44px; stroke-width:1; margin-left:8px; transform:translateY(-4px); }
@media (max-width:767px){ .ab-hero{ padding-top:56px; } .ab-spark{ --spark:52px; margin-left:8px; } }

/* 4.3 aura */
.ab-aura{ position:absolute; left:0; right:0; bottom:0; height:min(46vh,520px); z-index:-2; pointer-events:none; overflow:hidden;
  opacity:var(--ab-aura-opacity); filter:blur(var(--ab-aura-blur)) saturate(118%);
  background:
    radial-gradient(38% 62% at 12% 78%, var(--ab-aura-violet) 0%, transparent 70%),
    radial-gradient(34% 58% at 33% 96%, var(--ab-aura-blue)   0%, transparent 72%),
    radial-gradient(36% 60% at 55% 84%, var(--ab-aura-green)  0%, transparent 70%),
    radial-gradient(32% 56% at 74% 98%, var(--ab-aura-amber)  0%, transparent 72%),
    radial-gradient(34% 58% at 92% 82%, var(--ab-aura-pink)   0%, transparent 70%);
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 42%,transparent 100%);
          mask-image:linear-gradient(to top,#000 0%,#000 42%,transparent 100%);
  animation:ab-drift 24s linear infinite alternate; }
@keyframes ab-drift{ from{ transform:translate3d(-1.5%,1%,0); } to{ transform:translate3d(1.5%,-1%,0); } }
@media (max-width:767px){ .ab-aura{ --ab-aura-opacity:.42; --ab-aura-blur:56px; } }

/* 4.4 download card */
.ab-dlcard{ position:relative; width:100%; max-width:var(--ab-w-card); margin:40px auto 0; }
.ab-dlcard__glow{ position:absolute; left:6%; right:6%; bottom:-14px; height:34px; border-radius:999px;
  background:linear-gradient(90deg,var(--ab-rim-green) 0%,var(--ab-rim-amber) 52%,var(--ab-rim-coral) 100%);
  filter:blur(18px); opacity:var(--ab-rim-alpha); animation:ab-breathe var(--ab-t-breath-site) var(--ab-ease-inout) infinite alternate; }
.ab-dlcard__body{ position:relative; z-index:1; background:var(--ab-surface); border-radius:var(--ab-r-3xl); box-shadow:var(--ab-shadow-rim); padding:26px 28px 18px; }
.ab-dlcard__body::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:.55;
  background:linear-gradient(112deg, var(--ab-rim-green) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 60%, var(--ab-rim-amber) 82%, var(--ab-rim-coral) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; }
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){ .ab-dlcard__body{ border:1px solid var(--ab-line); } .ab-dlcard__body::before{ display:none; } }
.ab-dlcard__meta{ display:flex; align-items:baseline; gap:8px; font:400 13px/20px var(--ab-font-sans); color:var(--ab-ink-3); font-variant-numeric:tabular-nums; }
.ab-dlcard__meta b{ font:500 15px/22px var(--ab-font-sans); color:var(--ab-ink); }
.ab-dlcard__meta em{ margin-left:auto; font-style:normal; }
.ab-dlcard__acts{ display:flex; gap:12px; margin-top:18px; }
.ab-hash{ margin-top:14px; border-top:1px solid var(--ab-line); padding-top:12px; }
.ab-hash summary{ cursor:pointer; font:400 13px/20px var(--ab-font-sans); color:var(--ab-ink-2); list-style:none; display:flex; align-items:center; gap:4px; }
.ab-hash summary::-webkit-details-marker{ display:none; }
.ab-hash summary::before{ content:"›"; display:inline-block; width:14px; transition:transform 180ms var(--ab-ease-out); }
.ab-hash[open] summary::before{ transform:rotate(90deg); }
.ab-hash__row{ display:flex; gap:10px; align-items:flex-start; margin-top:8px; }
.ab-hash code{ flex:1; display:block; padding:10px 14px; background:var(--ab-surface-2); border-radius:var(--ab-r-md); font:400 12px/18px var(--ab-font-mono); color:var(--ab-ink-2); word-break:break-all; }
@media (max-width:767px){
  .ab-dlcard__body{ padding:20px 18px 14px; border-radius:22px; }
  .ab-dlcard__acts{ flex-direction:column; }
  .ab-dlcard__acts .ab-btn{ width:100%; }
  .ab-dlcard__meta{ flex-wrap:wrap; } .ab-dlcard__meta em{ margin-left:0; width:100%; }
}

/* 4.5 chips */
.ab-chip2{ display:inline-flex; align-items:center; gap:10px; height:40px; padding:0 16px 0 12px; border:1px solid var(--ab-line); border-radius:var(--ab-r-pill);
  background:var(--ab-surface); font:500 14px/20px var(--ab-font-sans); color:var(--ab-ink); text-decoration:none; white-space:nowrap;
  transition:border-color 180ms var(--ab-ease-out), box-shadow 180ms var(--ab-ease-out), transform 180ms var(--ab-ease-out); }
.ab-chip2:hover{ border-color:var(--ab-line-strong); box-shadow:var(--ab-shadow-card); transform:translateY(-2px); }
.ab-chip2 img{ width:18px; height:18px; }
.ab-chip2 .ab-tile{ --tile:20px; --tile-r:6px; }
.ab-chip2 .ab-tile svg{ stroke-width:1.5; }
.ab-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.ab-chips--left{ justify-content:flex-start; }
@media (max-width:767px){
  .ab-chips--scroll{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; scroll-snap-type:x proximity; padding-bottom:6px; -ms-overflow-style:none; scrollbar-width:none; }
  .ab-chips--scroll::-webkit-scrollbar{ display:none; }
  .ab-chips--scroll > *{ scroll-snap-align:start; }
}

/* 4.6 tiles */
.ab-tile{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:var(--tile,44px); height:var(--tile,44px); border-radius:var(--tile-r,13px);
  background:linear-gradient(155deg,var(--t1) 0%,var(--t2) 100%); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.30); }
.ab-tile svg{ width:calc(var(--tile,44px) * .5); height:calc(var(--tile,44px) * .5); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ab-tile--32{ --tile:32px; --tile-r:10px; }
.ab-tile--28{ --tile:28px; --tile-r:9px; }
.ab-tile--green {--t1:var(--ab-tile-green-1);  --t2:var(--ab-tile-green-2);}
.ab-tile--blue  {--t1:var(--ab-tile-blue-1);   --t2:var(--ab-tile-blue-2);}
.ab-tile--cyan  {--t1:var(--ab-tile-cyan-1);   --t2:var(--ab-tile-cyan-2);}
.ab-tile--amber {--t1:var(--ab-tile-amber-1);  --t2:var(--ab-tile-amber-2);}
.ab-tile--pink  {--t1:var(--ab-tile-pink-1);   --t2:var(--ab-tile-pink-2);}
.ab-tile--gold  {--t1:var(--ab-tile-gold-1);   --t2:var(--ab-tile-gold-2);}
.ab-tile--violet{--t1:var(--ab-tile-violet-1); --t2:var(--ab-tile-violet-2);}

/* 4.7 feature cards + grids */
.ab-feature{ background:var(--ab-surface); border:1px solid var(--ab-line); border-radius:var(--ab-r-2xl); padding:24px; min-height:196px; box-shadow:none;
  transition:box-shadow 180ms var(--ab-ease-out), transform 180ms var(--ab-ease-out), border-color 180ms var(--ab-ease-out); }
.ab-feature:hover{ transform:translateY(-2px); box-shadow:var(--ab-shadow-lift); border-color:var(--ab-line-strong); }
.ab-feature h3{ margin:16px 0 6px; font:500 17px/24px var(--ab-font-sans); color:var(--ab-ink); }
.ab-feature p { margin:0; font:400 15px/23px var(--ab-font-sans); color:var(--ab-ink-2); }
.ab-feature .ab-meta{ margin-top:12px; }
.ab-feature--link{ text-decoration:none; color:inherit; display:block; }
.ab-grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.ab-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ab-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:1199px){ .ab-grid-3{ grid-template-columns:repeat(2,1fr); } .ab-grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px) { .ab-grid-3,.ab-grid-2{ grid-template-columns:1fr; } .ab-grid-4{ grid-template-columns:repeat(2,1fr); } }

/* 4.8 showcase (the only gradient on the page) */
.ab-gradient{ position:relative; isolation:isolate; border-radius:var(--ab-r-xl); overflow:hidden;
  background:
    radial-gradient(120% 140% at  8%  6%, var(--ab-grad-warm-soft) 0%, rgba(249,195,107,0) 58%),
    radial-gradient(110% 130% at 46% 94%, var(--ab-grad-lime-soft) 0%, rgba(185,222,122,0) 62%),
    radial-gradient(132% 122% at 96% 40%, var(--ab-grad-teal-soft) 0%, rgba(111,200,190,0) 66%),
    linear-gradient(104deg,#F4A21F 0%, #8CC63F 48%, #17A398 100%); }
.ab-gradient::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.5'/></svg>");
  opacity:.07; mix-blend-mode:overlay; }
.ab-glass{ height:56px; border-radius:var(--ab-r-pill); padding:0 20px; display:inline-flex; align-items:center; gap:14px;
  background:rgba(255,255,255,.58); backdrop-filter:blur(18px) saturate(120%); -webkit-backdrop-filter:blur(18px) saturate(120%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.94), var(--ab-shadow-glass); color:var(--ab-ink); }
@supports not (backdrop-filter:blur(1px)){ .ab-glass{ background:rgba(255,255,255,.80); } }
.ab-glass .ab-num{ font:500 34px/40px var(--ab-font-sans); letter-spacing:-.01em; }
.ab-glass .ab-unit{ font:500 17px/24px var(--ab-font-sans); margin-left:-8px; }
.ab-glass .ab-glass__note{ font:400 13px/20px var(--ab-font-sans); color:var(--ab-ink-2); }
.ab-glass .ab-chip{ margin-left:4px; }
.ab-showcase{ border-radius:var(--ab-r-2xl); overflow:hidden; border:1px solid var(--ab-line); box-shadow:var(--ab-shadow-card); background:var(--ab-surface); }
.ab-showcase__top{ height:260px; display:grid; place-items:center; padding:0 32px; border-radius:0; }
.ab-showcase__top::before{ content:""; position:absolute; inset:auto 0 0 0; height:88px; background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.92) 100%); z-index:1; }
.ab-showcase__glass{ position:relative; z-index:3; }
.ab-showcase__bot{ padding:28px 32px 32px; background:var(--ab-surface); }
.ab-showcase__bot h3{ margin:0 0 8px; font:500 20px/28px var(--ab-font-sans); }
.ab-showcase__bot p{ margin:0; max-width:64ch; font:400 15px/23px var(--ab-font-sans); color:var(--ab-ink-2); }
@media (max-width:767px){ .ab-showcase__top{ height:208px; padding:0 16px; } .ab-showcase__bot{ padding:20px; } .ab-glass{ height:auto; padding:12px 18px; flex-wrap:wrap; gap:8px 12px; border-radius:20px; } }

/* 03 §3.4 level chips (semantic; never for decoration) */
.ab-chip{ height:22px; border-radius:11px; padding:0 8px 0 6px; display:inline-flex; align-items:center; gap:5px; font:500 12px/16px var(--ab-font-sans); border:1px solid; white-space:nowrap; }
.ab-chip::before{ content:""; width:6px; height:6px; border-radius:3px; background:currentColor; }
.ab-chip--safe { color:var(--ab-lv-safe-fg);  background:var(--ab-lv-safe-bg);  border-color:var(--ab-lv-safe-line); }
.ab-chip--sugg { color:var(--ab-lv-sugg-fg);  background:var(--ab-lv-sugg-bg);  border-color:var(--ab-lv-sugg-line); }
.ab-chip--conf { color:var(--ab-lv-conf-fg);  background:var(--ab-lv-conf-bg);  border-color:var(--ab-lv-conf-line); }
.ab-chip--block{ color:var(--ab-lv-block-fg); background:var(--ab-lv-block-bg); border-color:var(--ab-lv-block-line);
  background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 6px); }

/* 4.9 table */
.ab-table-wrap{ border:1px solid var(--ab-line); border-radius:var(--ab-r-lg); overflow:hidden; background:var(--ab-surface); }
.ab-table{ width:100%; border-collapse:collapse; }
.ab-table th{ height:40px; padding:0 16px; text-align:left; background:var(--ab-surface-2); font:500 12px/16px var(--ab-font-sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ab-ink-3); }
[lang^="zh"] .ab-table th{ text-transform:none; letter-spacing:0; font-size:13px; }
.ab-table td{ height:52px; padding:0 16px; border-top:1px solid var(--ab-line); font:400 15px/22px var(--ab-font-sans); color:var(--ab-ink); vertical-align:middle; }
.ab-table td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.ab-table td code{ font:400 12px/18px var(--ab-font-mono); color:var(--ab-ink-2); word-break:break-all; }
.ab-table tbody tr:hover{ background:var(--ab-surface-2); }
.ab-table td.ab-empty{ height:120px; text-align:center; color:var(--ab-ink-2); }
.ab-table__group td{ background:var(--ab-surface-2); font:500 17px/24px var(--ab-font-sans); }
@media (max-width:767px){
  .ab-table-wrap{ border:0; background:transparent; border-radius:0; overflow:visible; }
  .ab-table thead{ display:none; }
  .ab-table, .ab-table tbody, .ab-table tr, .ab-table td{ display:block; width:100%; }
  .ab-table tr{ border:1px solid var(--ab-line); border-radius:14px; padding:14px; margin-bottom:12px; background:var(--ab-surface); }
  .ab-table td{ height:auto; padding:6px 0; border-top:0; display:flex; justify-content:space-between; gap:12px; text-align:left; }
  .ab-table td.num{ text-align:right; }
  .ab-table td::before{ content:attr(data-label); font:500 12px/16px var(--ab-font-sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ab-ink-3); flex:none; }
  .ab-table__group td::before{ content:none; }
}

/* 4.10 buttons / code / notice */
.ab-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 20px; border:1px solid transparent; border-radius:var(--ab-r-pill);
  font:500 14px/20px var(--ab-font-sans); text-decoration:none; cursor:pointer; white-space:nowrap; color:var(--ab-ink); background:transparent;
  transition:background 180ms var(--ab-ease-out), box-shadow 180ms var(--ab-ease-out), transform 120ms var(--ab-ease-out); }
.ab-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ab-btn--lg{ height:48px; padding:0 24px; font-size:15px; }
.ab-btn--primary  { background:var(--ab-ink); color:#fff; }
.ab-btn--primary:hover  { background:#2A2F37; box-shadow:var(--ab-shadow-hover); }
.ab-btn--primary:active { transform:translateY(1px); box-shadow:var(--ab-shadow-card); }
.ab-btn--secondary{ background:var(--ab-surface); border-color:var(--ab-line-strong); color:var(--ab-ink); }
.ab-btn--secondary:hover{ background:var(--ab-surface-2); }
.ab-btn--ghost    { background:transparent; color:var(--ab-ink-2); }
.ab-btn--ghost:hover{ background:var(--ab-surface-2); color:var(--ab-ink); }
.ab-btn[aria-disabled="true"]{ opacity:.40; pointer-events:none; }
.ab-copy{ height:32px; padding:0 12px; border:1px solid var(--ab-line-strong); border-radius:var(--ab-r-pill); background:var(--ab-surface); font:500 12px/16px var(--ab-font-sans); color:var(--ab-ink-2); cursor:pointer; flex:none; }
.ab-copy:hover{ background:var(--ab-surface-2); color:var(--ab-ink); }
.ab-code{ background:var(--ab-surface-2); border:1px solid var(--ab-line); border-radius:var(--ab-r-md); padding:12px 14px; font:400 13px/20px var(--ab-font-mono); color:var(--ab-ink-2); overflow-x:auto; margin:0; white-space:pre; }
.ab-notice{ display:flex; align-items:center; gap:10px; min-height:48px; padding:0 14px; background:var(--ab-surface-2); border-radius:var(--ab-r-lg); font:400 14px/22px var(--ab-font-sans); color:var(--ab-ink-2); }
.ab-notice svg{ width:20px; height:20px; flex:none; fill:none; stroke:var(--ab-ink-2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ab-notice .ab-btn{ margin-left:auto; }
.ab-notice--sticky{ position:sticky; top:84px; z-index:40; }
@media (max-width:767px){ .ab-notice{ flex-wrap:wrap; padding:10px 14px; } .ab-notice .ab-btn{ margin-left:0; } .ab-notice--sticky{ top:72px; } }

/* 4.11 language segmented pill */
.ab-lang{ display:inline-flex; gap:2px; padding:3px; height:32px; border-radius:var(--ab-r-pill); background:var(--ab-surface-2); }
.ab-lang button{ height:26px; padding:0 10px; border:0; border-radius:var(--ab-r-pill); background:transparent; font:500 12px/26px var(--ab-font-sans); color:var(--ab-ink-2); cursor:pointer; }
.ab-lang button[aria-pressed="true"]{ background:var(--ab-surface); color:var(--ab-ink); box-shadow:0 1px 2px rgba(20,24,32,.10); }

/* 4.12 footer */
.ab-footer{ margin-top:96px; padding:48px 0 56px; border-top:1px solid var(--ab-line); }
.ab-footer__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.ab-footer h4{ margin:0 0 12px; font:500 12px/16px var(--ab-font-sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ab-ink-3); }
[lang^="zh"] .ab-footer h4{ text-transform:none; letter-spacing:0; font-size:13px; }
.ab-footer a{ display:block; font:400 14px/28px var(--ab-font-sans); color:var(--ab-ink-2); text-decoration:none; }
.ab-footer a:hover{ color:var(--ab-ink); }
.ab-footer__bar{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:40px; padding-top:20px; border-top:1px solid var(--ab-line); font:400 13px/20px var(--ab-font-sans); color:var(--ab-ink-2); }
.ab-footer__brand{ font:600 15px/20px var(--ab-font-sans); letter-spacing:.10em; color:var(--ab-brand); }
.ab-footer__bar .ab-lang{ margin-left:auto; }
@media (max-width:767px){ .ab-footer{ margin-top:56px; } .ab-footer__cols{ grid-template-columns:repeat(2,1fr); } }

/* page-specific small pieces */
.ab-stat{ background:var(--ab-surface); border:1px solid var(--ab-line); border-radius:var(--ab-r-2xl); padding:20px 24px; }
.ab-stat .ab-num{ display:block; font:500 34px/40px var(--ab-font-sans); letter-spacing:-.01em; }
.ab-stat .ab-meta{ margin-top:2px; }
.ab-timeline{ display:grid; grid-template-columns:132px 1fr; gap:0 28px; }
.ab-timeline__ver{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:18px 0; border-right:1px solid var(--ab-line); }
.ab-timeline__pill{ height:28px; padding:0 12px; border-radius:var(--ab-r-pill); background:var(--ab-surface-2); font:500 12px/28px var(--ab-font-sans); font-variant-numeric:tabular-nums; }
.ab-timeline__body{ padding:18px 0; border-bottom:1px solid var(--ab-line); }
.ab-timeline__body ul{ margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.ab-timeline__body li{ display:flex; gap:10px; align-items:flex-start; font:400 15px/23px var(--ab-font-sans); color:var(--ab-ink-2); }
.ab-timeline__body li .ab-tile{ --tile:20px; --tile-r:6px; margin-top:2px; }
.ab-timeline__body li .ab-tile svg{ stroke-width:1.5; }
@media (max-width:1199px){ .ab-timeline{ grid-template-columns:100px 1fr; } }
@media (max-width:767px){ .ab-timeline{ grid-template-columns:1fr; } .ab-timeline__ver{ border-right:0; padding-bottom:0; flex-direction:row; align-items:center; } .ab-timeline__body{ padding-top:10px; } }
.ab-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ab-step{ position:relative; background:var(--ab-surface); border:1px solid var(--ab-line); border-radius:var(--ab-r-2xl); padding:24px; }
.ab-step__n{ font:400 12px/16px var(--ab-font-mono); color:var(--ab-ink-3); }
.ab-step h3{ margin:12px 0 6px; font:500 17px/24px var(--ab-font-sans); }
.ab-step p{ font:400 14px/22px var(--ab-font-sans); color:var(--ab-ink-2); }
@media (max-width:767px){ .ab-steps{ grid-template-columns:1fr; } }
.ab-list{ margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.ab-list li{ display:grid; grid-template-columns:28px 1fr; gap:12px; font:400 15px/24px var(--ab-font-sans); color:var(--ab-ink-2); }
[lang^="zh"] .ab-list li{ line-height:26px; }
.ab-list li b{ font:400 13px/24px var(--ab-font-mono); color:var(--ab-ink-3); }
.ab-kv{ display:grid; grid-template-columns:160px 1fr; gap:10px 20px; font:400 15px/23px var(--ab-font-sans); }
.ab-kv dt{ color:var(--ab-ink-3); font-size:13px; line-height:23px; }
.ab-kv dd{ margin:0; color:var(--ab-ink); }
@media (max-width:767px){ .ab-kv{ grid-template-columns:1fr; gap:2px 0; } .ab-kv dt{ margin-top:10px; } }
.ab-card{ background:var(--ab-surface); border:1px solid var(--ab-line); border-radius:var(--ab-r-2xl); padding:24px; }
.ab-card h3{ font:500 17px/24px var(--ab-font-sans); margin-bottom:8px; }
.ab-card p{ color:var(--ab-ink-2); }
.ab-card p + p{ margin-top:8px; }
.ab-legal{ font:400 16px/28px var(--ab-font-sans); color:var(--ab-ink); }
[lang^="zh"] .ab-legal{ line-height:30px; }
.ab-legal h2{ font:500 22px/30px var(--ab-font-sans); margin:40px 0 10px; scroll-margin-top:96px; }
.ab-legal h3{ font:500 17px/24px var(--ab-font-sans); margin:24px 0 6px; }
.ab-legal p{ margin:0 0 12px; }
.ab-legal ul{ margin:0 0 12px; padding-left:24px; }
.ab-legal li{ margin:4px 0; }
.ab-legal-wrap{ display:grid; grid-template-columns:var(--ab-w-read) 220px; gap:60px; justify-content:center; }
.ab-toc{ position:sticky; top:96px; align-self:start; font:400 13px/22px var(--ab-font-sans); }
.ab-toc a{ display:block; padding-left:10px; border-left:2px solid transparent; color:var(--ab-ink-2); text-decoration:none; }
.ab-toc a:hover, .ab-toc a.is-active{ color:var(--ab-ink); border-left-color:var(--ab-grad-teal); }
@media (max-width:1199px){ .ab-legal-wrap{ grid-template-columns:1fr; } .ab-toc{ display:none; } }
.ab-rise{ animation:ab-rise 260ms var(--ab-ease-out) both; }
@keyframes ab-rise{ from{ opacity:.001; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes ab-breathe{ from{ opacity:calc(var(--ab-rim-alpha) - .08); transform:scaleX(.985); } to{ opacity:calc(var(--ab-rim-alpha) + .08); transform:scaleX(1.03); } }
main{ animation:ab-fade 160ms var(--ab-ease-out) both; }
@keyframes ab-fade{ from{ opacity:.6; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .ab-dlcard__glow{ opacity:var(--ab-rim-alpha); transform:none; }
}
[hidden]{ display:none !important; }
.ab-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }