/* ============================================================
 * Fish AI API 开发者平台 · 2026-09 深渊极光版(结构性重写)
 * 设计体系:Abyssal Aurora(与主站同源) · Dark-first 双主题
 * 新布局:悬浮胶囊导航舱 + 新 Hero(信任带) + 独立指标带 + 2×2 Bento
 * 工程美学:极光动态背景 + 玻璃拟态 + 霓虹渐变 + 深色控制台隐喻
 * ============================================================ */

/* ===== 设计系统令牌(计划规格逐字照抄) ===== */
:root, html[data-theme="dark"] {
  --bg:#04060d; --bg-soft:#090e1c; --bg-hover:rgba(129,140,248,.09);
  --surface:rgba(13,20,40,.55); --surface-solid:#0b1020; --surface-raised:rgba(16,24,48,.82);
  --border:rgba(139,152,208,.17); --border-soft:rgba(139,152,208,.1);
  --text:#e9efff; --text-secondary:#a4b1d2; --text-muted:#6d799c;
  --primary:#818cf8; --primary-strong:#6366f1; --accent:#22d3ee; --violet:#c084fc;
  --glow:99,102,241; --glow-cyan:34,211,238; --glow-violet:168,85,247;
  --grad-brand:linear-gradient(118deg,#22d3ee 0%,#6366f1 55%,#a855f7 100%);
  --grad-brand-soft:linear-gradient(135deg,rgba(34,211,238,.14),rgba(99,102,241,.14));
  --shadow:0 18px 50px rgba(2,6,23,.55); --shadow-lg:0 30px 80px rgba(2,6,23,.65);
  --glow-shadow:0 0 44px rgba(99,102,241,.3);
  --glass-blur:blur(20px) saturate(1.5);
  --radius:16px; --radius-sm:10px; --sidebar-w:292px;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="light"] {
  --bg:#f4f7fd; --bg-soft:#ecf1fb; --bg-hover:rgba(79,70,229,.06);
  --surface:rgba(255,255,255,.75); --surface-solid:#fff; --surface-raised:rgba(255,255,255,.92);
  --border:rgba(100,116,160,.18); --border-soft:rgba(100,116,160,.11);
  --text:#151c31; --text-secondary:#4c5975; --text-muted:#8792ab;
  --primary:#4f46e5; --primary-strong:#4338ca; --accent:#0891b2; --violet:#7c3aed;
  --glow:79,70,229;
  --shadow:0 12px 34px rgba(39,50,86,.1); --shadow-lg:0 26px 70px rgba(39,50,86,.18);
  --glow-shadow:0 10px 30px rgba(79,70,229,.22);
}

/* ===== api-center 专有令牌(值对齐深渊极光体系) ===== */
:root, html[data-theme="dark"] {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --brand-anthropic: #ea580c;
  --glow-anthropic: 234, 88, 12;
  --brand-success: #16a34a;
  --glow-success: 22, 163, 74;
  --danger: #fb7185;
  --danger-rgb: 244, 63, 94;
  --amber: #fbbf24;
  --amber-rgb: 251, 191, 36;
  --border-strong: rgba(139, 152, 208, .34);
  --shadow-sm: 0 10px 26px rgba(2, 6, 23, .4);
  --shadow-md: 0 16px 40px rgba(2, 6, 23, .5);
  --radius-md: 12px;
  --radius-xl: 22px;
}
html[data-theme="light"] {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --brand-anthropic: #ea580c;
  --glow-anthropic: 234, 88, 12;
  --brand-success: #16a34a;
  --glow-success: 22, 163, 74;
  --glow-cyan: 8, 145, 178;
  --glow-violet: 124, 58, 236;
  --danger: #dc2626;
  --danger-rgb: 220, 38, 38;
  --amber: #b45309;
  --amber-rgb: 180, 83, 9;
  --border-strong: rgba(100, 116, 160, .34);
  --shadow-sm: 0 6px 18px rgba(39, 50, 86, .08);
  --shadow-md: 0 12px 32px rgba(39, 50, 86, .12);
  --radius-md: 12px;
  --radius-xl: 22px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  color: var(--text);
  background-color: var(--bg);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:::selection { color: #fff; background: #6366f1; }

/* ===== 深渊极光动态背景 FX(计划规格逐字照抄) ===== */
.fx-stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx-aurora{position:absolute;inset:-20%;filter:blur(30px);animation:fxPan 40s ease-in-out infinite alternate;
  background:
    radial-gradient(42% 34% at 18% 8%,rgba(34,211,238,.16),transparent 70%),
    radial-gradient(50% 40% at 82% 12%,rgba(99,102,241,.2),transparent 72%),
    radial-gradient(46% 36% at 50% 96%,rgba(168,85,247,.14),transparent 70%)}
@keyframes fxPan{to{transform:translate3d(-4%,3%,0) rotate(2deg) scale(1.06)}}
.fx-orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.5}
.fx-orb-cyan{width:44vmax;height:44vmax;left:-12vmax;top:-14vmax;background:rgba(34,211,238,.14);animation:fxDriftA 26s ease-in-out infinite alternate}
.fx-orb-indigo{width:52vmax;height:52vmax;right:-16vmax;top:6vmax;background:rgba(99,102,241,.16);animation:fxDriftB 32s ease-in-out infinite alternate}
.fx-orb-violet{width:40vmax;height:40vmax;left:28vmax;bottom:-18vmax;background:rgba(168,85,247,.12);animation:fxDriftA 38s ease-in-out infinite alternate-reverse}
@keyframes fxDriftA{to{transform:translate3d(6vmax,4vmax,0)}}
@keyframes fxDriftB{to{transform:translate3d(-5vmax,6vmax,0)}}
.fx-grid{position:absolute;inset:0;background-size:36px 36px;
  background-image:linear-gradient(rgba(139,152,208,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(139,152,208,.05) 1px,transparent 1px);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0,#000 30%,transparent 75%)}
.fx-noise{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
html[data-theme="light"] .fx-aurora{opacity:.5}
html[data-theme="light"] .fx-orb{opacity:.3}
html[data-theme="light"] .fx-grid{background-image:linear-gradient(rgba(100,116,160,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(100,116,160,.06) 1px,transparent 1px)}
@media (prefers-reduced-motion:reduce){.fx-aurora,.fx-orb{animation:none!important}}

/* ===== 顶部悬浮胶囊导航舱(sticky 骨架 + 视觉悬浮玻璃舱) ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
}
.topbar-inner {
  width: min(calc(100% - 28px), 1200px);
  margin: 12px auto 0;
  height: 62px;
  padding: 0 12px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  box-shadow: 0 0 18px rgba(var(--glow), .45);
}
.brand-text {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.brand-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--grad-brand);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-sub {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 550;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color .18s var(--ease-out), background .18s var(--ease-out);
}
/* hover 渐变下划线滑入 + 辉光 */
.nav-item::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
  box-shadow: 0 0 10px rgba(var(--glow), .5);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s var(--ease-out);
}
.nav-item:hover {
  color: var(--text);
  background: var(--bg-hover);
}
.nav-item:hover::after {
  transform: scaleX(1);
}
.nav-badge-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 99px;
  background: rgba(var(--glow-violet), .14);
  color: var(--violet);
  border: 1px solid rgba(var(--glow-violet), .4);
  text-shadow: 0 0 12px rgba(var(--glow-violet), .45);
}
.nav-badge-new {
  background: rgba(var(--glow-violet), .16);
  color: var(--violet);
  border-color: rgba(var(--glow-violet), .5);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* 主题切换:48px 幽灵圆钮 */
.ac-theme-toggle {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color .18s var(--ease-out), background .18s var(--ease-out),
              border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.ac-theme-toggle svg {
  width: 20px;
  height: 20px;
}
.ac-theme-toggle:hover {
  color: var(--text);
  background: var(--bg-hover);
  border-color: rgba(var(--glow), .4);
  box-shadow: var(--glow-shadow);
}
html[data-theme="dark"] .ac-theme-toggle .tt-sun { display: block; }
html[data-theme="dark"] .ac-theme-toggle .tt-moon { display: none; }
html[data-theme="light"] .ac-theme-toggle .tt-moon { display: block; }
html[data-theme="light"] .ac-theme-toggle .tt-sun { display: none; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  color: var(--text-secondary);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all .18s var(--ease-out);
}
.back-link svg {
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  transition: transform .18s var(--ease-out), color .18s var(--ease-out);
}
.back-link:hover {
  color: var(--text);
  border-color: rgba(var(--glow), .4);
  background: var(--bg-hover);
  box-shadow: var(--glow-shadow);
  transform: translateY(-1px);
}
.back-link:hover svg {
  transform: translateX(-2px);
  color: var(--text);
}

/* ===== 主容器(内容层抬升至极光之上) ===== */
.page-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: 34px 24px 80px;
}

/* ===== HERO 主战场(两栏 grid:文案 1.1fr + 控制台 0.9fr) ===== */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 44px;
  padding: 18px 0 40px;
}
.hero-copy { min-width: 0; }
.hero-console-wrap { min-width: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 5px 12px;
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 99px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
}
.status-indicator {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
}
.status-indicator .dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-success);
  box-shadow: 0 0 0 3px rgba(var(--glow-success), .18), 0 0 10px rgba(var(--glow-success), .7);
}
.status-indicator .dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(var(--glow-success), .55);
  animation: statusPulse 2.2s ease-out infinite;
}
@keyframes statusPulse {
  0%   { transform: scale(1); opacity: .75; }
  70%, 100% { transform: scale(3.4); opacity: 0; }
}
.status-text {
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
}
.tech-pill {
  padding: 1px 8px;
  background: rgba(var(--glow), .12);
  border: 1px solid rgba(var(--glow), .4);
  color: var(--primary);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(var(--glow), .4);
}

.hero-title {
  margin: 0 0 18px;
  color: var(--text);
  font-size: clamp(34px, 4.6vw, 58px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.title-accent {
  background: var(--grad-brand);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(var(--glow), .35));
}

.hero-desc {
  color: var(--text-secondary);
  font-size: 15.5px;
  line-height: 1.75;
  margin-bottom: 30px;
}
.hero-desc strong {
  color: var(--text);
  font-weight: 650;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 13px 26px;
  background: var(--grad-brand);
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  border-radius: 14px;
  box-shadow: var(--glow-shadow), inset 0 1px rgba(255,255,255,.25);
  transition: all .18s var(--ease-out);
  border: 1px solid transparent;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 60px rgba(var(--glow), .45);
  filter: saturate(1.1);
}
.btn-arrow {
  width: 16px;
  height: 16px;
  transition: transform .18s var(--ease-out);
}
.btn-primary:hover .btn-arrow {
  transform: translateX(3px);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: all .18s var(--ease-out);
}
.btn-secondary:hover {
  color: var(--text);
  background: var(--bg-hover);
  border-color: rgba(var(--glow), .4);
  box-shadow: var(--shadow-sm), var(--glow-shadow);
  transform: translateY(-2px);
}

/* 信任带:深度适配工具链 */
.hero-trust {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 8px;
}
.trust-label {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.trust-chip {
  padding: 4px 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
  font-family: var(--font-mono);
  white-space: nowrap;
  transition: color .18s var(--ease-out), background .18s var(--ease-out),
              border-color .18s var(--ease-out), transform .18s var(--ease-out),
              box-shadow .18s var(--ease-out);
}
.trust-chip:hover {
  color: var(--text);
  background: var(--bg-hover);
  border-color: rgba(var(--glow), .45);
  box-shadow: 0 0 14px rgba(var(--glow), .18);
  transform: translateY(-1px);
}

/* ===== HERO 极客控制台卡片(两主题统一深色终端) ===== */
.console-box {
  background: #0b1020;
  border: 1px solid rgba(129, 140, 248, .3);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), 0 0 54px rgba(99, 102, 241, .2);
  overflow: hidden;
  position: relative;
}
.console-box::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 85% -10%, rgba(99, 102, 241, .2), transparent 45%),
              radial-gradient(circle at 8% 110%, rgba(34, 211, 238, .12), transparent 40%);
}
.console-header {
  height: 38px;
  padding: 0 14px;
  background: rgba(4, 8, 18, .88);
  border-bottom: 1px solid rgba(129, 140, 248, .18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.window-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}
.window-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.dot-red { background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, .6); }
.dot-yellow { background: #f59e0b; box-shadow: 0 0 8px rgba(245, 158, 11, .6); }
.dot-green { background: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, .6); }

.console-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.console-status-live {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #4ade80;
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-shadow: 0 0 10px rgba(74, 222, 128, .55);
}
.live-blink {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, .8);
  animation: hwBlink 1.8s ease-in-out infinite;
}

.console-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.endpoint-block {
  background: rgba(17, 26, 50, .6);
  border: 1px solid rgba(129, 140, 248, .2);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.endpoint-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.endpoint-badge {
  font-size: 10px;
  font-weight: 750;
  color: #38bdf8;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-shadow: 0 0 10px rgba(56, 189, 248, .5);
}
.endpoint-hint {
  font-size: 11px;
  color: #94a3b8;
}
.endpoint-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(4, 8, 18, .85);
  border: 1px solid rgba(129, 140, 248, .2);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}
.endpoint-field code {
  color: #7dd3fc;
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.copy-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(48, 64, 108, .8);
  border: 1px solid rgba(129, 140, 248, .28);
  color: #e2e8f0;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s var(--ease-out);
  flex-shrink: 0;
}
.copy-pill svg { width: 12px; height: 12px; }
.copy-pill:hover {
  background: var(--primary-strong);
  color: #fff;
  border-color: rgba(129, 140, 248, .6);
  box-shadow: 0 0 14px rgba(99, 102, 241, .5);
}

.route-matrix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.route-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 10px;
  background: rgba(17, 26, 50, .6);
  border: 1px solid rgba(129, 140, 248, .2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11.5px;
  transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.route-tag:hover {
  border-color: rgba(129, 140, 248, .55);
  box-shadow: 0 0 12px rgba(99, 102, 241, .25);
}
.route-tag .method {
  color: #a5b4fc;
  background: rgba(99, 102, 241, .2);
  border: 1px solid rgba(129, 140, 248, .35);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 10px;
  flex-shrink: 0;
}
.route-tag:last-child .method {
  color: #6ee7b7;
  background: rgba(16, 185, 129, .18);
  border-color: rgba(52, 211, 153, .4);
}
.route-tag .path {
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flag {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  flex-shrink: 0;
}
.openai-flag { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
.anthropic-flag { background: rgba(249, 115, 22, 0.2); color: #fdba74; }
.new-flag { background: rgba(168, 85, 247, 0.2); color: #d8b4fe; }
.sync-flag { background: rgba(56, 189, 248, 0.2); color: #7dd3fc; }

.auth-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(4, 8, 18, .85);
  border: 1px solid rgba(129, 140, 248, .2);
  border-radius: var(--radius-sm);
}
.auth-icon-wrap {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: rgba(48, 64, 108, .85);
  border: 1px solid rgba(129, 140, 248, .28);
  display: grid;
  place-items: center;
  color: #38bdf8;
  flex-shrink: 0;
}
.auth-icon-wrap svg { width: 13px; height: 13px; }
.auth-text {
  flex: 1;
  min-width: 0;
}
.auth-label {
  display: block;
  font-size: 9px;
  font-weight: 750;
  color: #64748b;
  font-family: var(--font-mono);
}
.auth-format {
  color: #94a3b8;
  font-size: 11px;
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-sec-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #10b981;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  text-shadow: 0 0 10px rgba(16, 185, 129, .5);
}
.auth-sec-badge svg { width: 11px; height: 11px; }

/* ===== 硬核指标带(hero 后独立满宽玻璃长条) ===== */
.hero-metrics {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 30px;
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 26px;
}
.metric-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}
.metric-val {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 800;
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
  line-height: 1.15;
  background: var(--grad-brand);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.metric-lbl {
  color: var(--text-muted);
  font-size: 12.5px;
}
.metric-sep {
  width: 1px;
  height: 44px;
  flex-shrink: 0;
  background: linear-gradient(180deg, transparent, rgba(var(--glow), .5), transparent);
}

/* ===== 核心能力 Bento(2×2 玻璃卡 + 倾斜) ===== */
.features-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 0 0 12px;
}
.feature-card {
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: var(--shadow);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out),
              border-color .18s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2.5px;
  background: var(--grad-brand);
  opacity: 0;
  transition: opacity .18s var(--ease-out);
}
.feature-card:hover {
  border-color: rgba(var(--glow), .4);
  box-shadow: var(--shadow-lg), var(--glow-shadow);
  transform: translateY(-3px);
}
.feature-card:hover::before { opacity: 1; }
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--grad-brand-soft);
  color: var(--primary);
  border: 1px solid rgba(var(--glow), .35);
  box-shadow: 0 0 16px rgba(var(--glow), .18);
  transition: transform .18s var(--ease-out);
}
.feature-card:hover .feature-icon { transform: scale(1.06); }
.feature-icon svg { width: 22px; height: 22px; }
/* 四卡 icon tile 分色:青 / 靛 / 紫 / 玫红 */
.feature-card:nth-child(1) .feature-icon {
  background: rgba(var(--glow-cyan), .13);
  color: var(--accent);
  border-color: rgba(var(--glow-cyan), .42);
  box-shadow: 0 0 18px rgba(var(--glow-cyan), .22);
}
.feature-card:nth-child(2) .feature-icon {
  background: rgba(var(--glow), .16);
  color: var(--primary);
  border-color: rgba(var(--glow), .42);
  box-shadow: 0 0 18px rgba(var(--glow), .22);
}
.feature-card:nth-child(3) .feature-icon {
  background: rgba(var(--glow-violet), .16);
  color: var(--violet);
  border-color: rgba(var(--glow-violet), .42);
  box-shadow: 0 0 18px rgba(var(--glow-violet), .22);
}
.feature-card:nth-child(4) .feature-icon {
  background: rgba(var(--danger-rgb), .13);
  color: var(--danger);
  border-color: rgba(var(--danger-rgb), .42);
  box-shadow: 0 0 18px rgba(var(--danger-rgb), .22);
}
.feature-content { min-width: 0; }
.feature-content h3 {
  color: var(--text);
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}
.feature-content p {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}

/* ===== 通用区块 ===== */
.section-block {
  width: 100%;
  margin: 0;
  padding: 48px 0 20px;
  border-top: 1px solid var(--border);
}
.section-block.key-section { padding-top: 54px; }
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.section-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
/* 渐变圆角方块徽章 + 辉光 */
.section-badge-num {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--grad-brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(var(--glow), .35), inset 0 1px rgba(255, 255, 255, .25);
}
.section-badge-num svg { width: 17px; height: 17px; }
.harness-badge {
  background: linear-gradient(135deg, #a855f7, #6366f1);
  box-shadow: 0 0 20px rgba(var(--glow-violet), .4), inset 0 1px rgba(255, 255, 255, .25);
}
.section-head h2 {
  color: var(--text);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  position: relative;
  padding-bottom: 9px;
}
/* h2 下渐变发丝线 */
.section-head h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
  box-shadow: 0 0 12px rgba(var(--glow), .45);
}
.section-head p {
  color: var(--text-muted);
  font-size: 13.5px;
}
.model-head-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.hot-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(var(--danger-rgb), .12);
  color: var(--danger);
  border: 1px solid rgba(var(--danger-rgb), .4);
  text-shadow: 0 0 12px rgba(var(--danger-rgb), .4);
}
.new-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  background: linear-gradient(135deg, rgba(var(--glow-violet), .16), rgba(var(--glow-cyan), .12));
  color: var(--violet);
  border: 1px solid rgba(var(--glow-violet), .45);
}
.section-tag-pill {
  padding: 4px 10px;
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

/* ===== VS CODE / Harness 专属卡片(全玻璃化) ===== */
.fishcode-glass-card {
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 28px;
}
.harness-glass-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(var(--glow-violet), .1) 0%, var(--surface) 45%, rgba(var(--glow-cyan), .07) 100%);
  border-color: rgba(var(--glow-violet), .35);
}
.harness-glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--violet), var(--primary), var(--accent));
  z-index: 1;
}
.fishcode-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 32px;
  align-items: center;
}
.fishcode-info { min-width: 0; }
.fishcode-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(var(--glow), .12);
  border: 1px solid rgba(var(--glow), .35);
  color: var(--primary);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .03em;
  margin-bottom: 10px;
}
.harness-kicker {
  background: rgba(var(--glow-violet), .13);
  border-color: rgba(var(--glow-violet), .45);
  color: var(--violet);
}
.fishcode-heading {
  color: var(--text);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.3;
  margin-bottom: 10px;
}
.fishcode-summary {
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.7;
  margin-bottom: 18px;
}
.fishcode-summary strong { color: var(--text); font-weight: 650; }
.harness-quote {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 18px;
  background: rgba(var(--glow-violet), .08);
  border: 1px solid rgba(var(--glow-violet), .28);
  border-left: 3px solid var(--violet);
  border-radius: var(--radius-sm);
  color: var(--violet);
  font-size: 13px;
  font-weight: 700;
}
.hq-mark {
  font-size: 18px;
  line-height: 1;
  color: var(--violet);
  text-shadow: 0 0 12px rgba(var(--glow-violet), .5);
}
.fishcode-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.fc-feat-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 11px;
  background: var(--bg-hover);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  transition: border-color .18s var(--ease-out), transform .18s var(--ease-out),
              box-shadow .18s var(--ease-out);
}
.fc-feat-item:hover {
  border-color: rgba(var(--glow), .4);
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(var(--glow), .14);
}
.fc-feat-icon { font-size: 15px; }
.fc-feat-item strong {
  display: block;
  color: var(--text);
  font-size: 12.5px;
}
/* 同 .q-step div span 的坑：图标是直接子 <span class="fc-feat-icon">，
   写成 .fc-feat-item span（0,1,1）会压过 .fc-feat-icon（0,1,0），
   把它从 15px 打成 11px。这里同样只取 <div> 里的描述行。 */
.fc-feat-item div span {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
}

.fishcode-cta-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 19px;
  background: var(--grad-brand);
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 650;
  box-shadow: 0 6px 16px rgba(var(--glow), .3);
  transition: all .18s var(--ease-out);
  animation: dlBreath 3.2s ease-in-out infinite;
}
@keyframes dlBreath {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(var(--glow), .22)); }
  50% { filter: drop-shadow(0 0 14px rgba(var(--glow), .42)); }
}
.btn-download svg { width: 16px; height: 16px; }
.btn-download:hover {
  transform: translateY(-2px);
  filter: saturate(1.12) drop-shadow(0 0 16px rgba(var(--glow), .5));
}
.btn-harness {
  background: linear-gradient(135deg, #8b5cf6, #6366f1 55%, #0891b2);
  box-shadow: 0 6px 18px -4px rgba(139, 92, 246, 0.5);
}
.btn-harness:hover {
  background: linear-gradient(135deg, #7c3aed, #4f46e5 55%, #0e7490);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -6px rgba(139, 92, 246, 0.62);
}
.version-label {
  color: var(--text-muted);
  font-size: 12px;
}

.install-tip-box {
  padding: 10px 12px;
  background: var(--bg-hover);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.install-tip-title {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text);
  font-weight: 700;
  margin-bottom: 3px;
}
.install-tip-title svg { width: 13px; height: 13px; color: var(--primary); }
.install-tip-box p {
  color: var(--text-secondary);
  line-height: 1.55;
}
.install-tip-box p strong { color: var(--text); }

/* VS Code 演示窗(霓虹终端,两主题统一深色) */
.ide-mockup {
  background: #0b1020;
  border: 1px solid rgba(129, 140, 248, .26);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md), 0 0 34px rgba(99, 102, 241, .18);
}
.ide-topbar {
  display: flex;
  align-items: center;
  height: 34px;
  background: rgba(4, 8, 18, .88);
  padding: 0 10px;
  border-bottom: 1px solid rgba(129, 140, 248, .18);
  gap: 8px;
}
.ide-dots { display: flex; gap: 5px; }
.ide-dots span { width: 8px; height: 8px; border-radius: 50%; background: #334155; }
.ide-dots span:nth-child(1) { background: #ef4444; }
.ide-dots span:nth-child(2) { background: #f59e0b; }
.ide-dots span:nth-child(3) { background: #10b981; }

.ide-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-size: 11px;
  color: #64748b;
  border-radius: 5px;
  border: 1px solid transparent;
}
.ide-tab.active {
  background: rgba(48, 64, 108, .8);
  color: #f8fafc;
  border-color: rgba(129, 140, 248, .35);
  border-radius: 5px;
}
.ide-tab svg { width: 12px; height: 12px; }

.ide-content {
  position: relative;
  padding: 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.65;
}
.code-line { color: #cbd5e1; }
.code-line.blank { height: 8px; }
.c-kw { color: #c084fc; }
.c-fn { color: #60a5fa; }
.c-str { color: #4ade80; }
.c-var { color: #f43f5e; }
.c-prop { color: #38bdf8; }
.c-comment { color: #64748b; font-style: italic; }
.indent-1 { padding-left: 14px; }
.indent-2 { padding-left: 28px; }

.ide-float-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(17, 26, 50, .9);
  border: 1px solid rgba(56, 189, 248, .55);
  border-radius: 20px;
  color: #38bdf8;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(56, 189, 248, .28);
}
.ai-glow-ball {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, .9);
  animation: aiBallPulse 2.4s ease-in-out infinite;
}
@keyframes aiBallPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* Harness 桌面客户端演示窗(霓虹紫终端,两主题统一深色) */
.harness-window {
  background: linear-gradient(160deg, #150f2c, #0b1020);
  border: 1px solid rgba(139, 92, 246, .38);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 20px 40px -12px rgba(76, 29, 149, 0.45), 0 0 34px rgba(139, 92, 246, .18);
}
.hw-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  background: #0a0716;
  border-bottom: 1px solid rgba(139, 92, 246, .28);
  padding: 0 10px;
}
.hw-title {
  font-size: 11px;
  font-weight: 700;
  color: #c4b5fd;
  letter-spacing: 0.3px;
  text-shadow: 0 0 12px rgba(167, 139, 250, .5);
}
.hw-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 7px;
  border-radius: 99px;
}
.hw-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px rgba(52, 211, 153, .8);
  animation: hwBlink 1.6s ease-in-out infinite;
}
@keyframes hwBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
.hw-body {
  display: flex;
  min-height: 230px;
}
.hw-side {
  width: 96px;
  flex-shrink: 0;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #0d0a1c;
  border-right: 1px solid rgba(139, 92, 246, .24);
}
.hw-side-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 7px;
  font-size: 10.5px;
  color: #8b86a8;
  border-radius: 6px;
}
.hw-side-item.active {
  background: rgba(139, 92, 246, 0.16);
  color: #e9e4ff;
  box-shadow: inset 0 0 12px rgba(139, 92, 246, .2);
}
.hw-main {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hw-msg.user { align-self: flex-end; }
.hw-msg.user span {
  display: inline-block;
  padding: 7px 10px;
  font-size: 11px;
  color: #ede9fe;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  box-shadow: 0 0 16px rgba(124, 58, 236, .35);
  border-radius: 10px 10px 3px 10px;
}
.hw-msg.ai {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hw-tools {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.hw-tools span {
  font-size: 9.5px;
  font-weight: 700;
  color: #7dd3fc;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.28);
  padding: 2.5px 7px;
  border-radius: 99px;
}
.hw-text {
  font-size: 11px;
  line-height: 1.6;
  color: #cbd5e1;
}
.hw-cursor {
  display: inline-block;
  width: 7px;
  height: 12px;
  margin-left: 3px;
  vertical-align: -1px;
  background: #a78bfa;
  border-radius: 1.5px;
  box-shadow: 0 0 8px rgba(167, 139, 250, .7);
  animation: hwBlink 1s steps(1) infinite;
}
.hw-float {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 12px 12px;
  padding: 7px 10px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: #d8ccff;
}
.hw-float-icon { font-size: 13px; line-height: 1; }

/* ===== 智能体更新日期徽章 ===== */
.update-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 2px;
  white-space: nowrap;
}
.update-pill i { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.update-pill.fresh {
  color: #34d399;
  background: rgba(16, 185, 129, .1);
  border: 1px solid rgba(16, 185, 129, .35);
}
.update-pill.fresh i {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, .8);
  animation: upDotPulse 2s ease-out infinite;
}
.update-pill.recent {
  color: var(--primary);
  background: rgba(var(--glow), .1);
  border: 1px solid rgba(var(--glow), .35);
}
.update-pill.recent i { background: var(--primary); }
@keyframes upDotPulse {
  0% { transform: scale(.9); opacity: 1; }
  70%, 100% { transform: scale(1.9); opacity: .25; }
}

/* ===== API KEY 创建与管理卡片(玻璃表单) ===== */
.create-card {
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.create-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 14px;
  font-weight: 750;
  margin-bottom: 14px;
}
.create-card-header svg {
  width: 16px;
  height: 16px;
  color: var(--primary);
}
.create-form-grid {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
.key-name-col {
  flex: 1;
  min-width: 0;
}
.key-ip-col {
  flex: 1.3;
  min-width: 0;
}
.key-action-col {
  flex-shrink: 0;
}
.input-group {
  display: flex;
  flex-direction: column;
}
.input-group label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 650;
  margin-bottom: 6px;
  height: 18px;
}
.req-star { color: var(--danger); }
.opt-tag {
  font-size: 10px;
  padding: 0 4px;
  background: var(--bg-hover);
  border-radius: 3px;
  color: var(--text-muted);
}
.input-inner {
  position: relative;
  display: flex;
  align-items: center;
}
.input-inner::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius-sm) + 1px);
  background: var(--grad-brand);
  box-shadow: 0 0 16px rgba(var(--glow), .3);
  opacity: 0;
  transition: opacity .18s var(--ease-out);
  pointer-events: none;
}
.input-inner:focus-within::before { opacity: 1; }
.input-inner svg {
  position: absolute;
  left: 10px;
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
}
.input-inner input {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 38px;
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0 10px 0 32px;
  color: var(--text);
  font-size: 13.5px;
  outline: none;
  transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.input-inner input:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(var(--glow), .1);
}
.input-inner input::placeholder {
  color: var(--text-muted);
}
.input-hint {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
  height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-create-key {
  height: 38px;
  margin-bottom: 20px;
  padding: 0 18px;
  background: var(--grad-brand);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(var(--glow), .3);
  transition: all .18s var(--ease-out);
}
.btn-create-key svg {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
}
.btn-create-key:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(var(--glow), .4), var(--glow-shadow);
  filter: saturate(1.1);
}
.btn-create-key:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 6px 16px rgba(var(--glow), .3);
}

/* API KEY 列表(玻璃行) */
.key-list-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.key-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
  transition: all .18s var(--ease-out);
}
.key-item:hover {
  border-color: rgba(var(--glow), .4);
  box-shadow: var(--shadow), var(--glow-shadow);
  transform: translateY(-2px);
}
.key-name {
  color: var(--text);
  font-size: 14px;
  font-weight: 750;
  margin-bottom: 2px;
}
.key-value {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  text-shadow: 0 0 14px rgba(var(--glow-cyan), .35);
  overflow-wrap: anywhere;
}
.key-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11.5px;
}
.key-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.key-actions button {
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s var(--ease-out);
}
.key-actions button:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: rgba(var(--glow), .4);
  box-shadow: 0 0 12px rgba(var(--glow), .18);
}
.key-actions .delete {
  color: var(--danger);
  border-color: rgba(var(--danger-rgb), .4);
  background: rgba(var(--danger-rgb), .08);
}
.key-actions .delete:hover {
  background: rgba(var(--danger-rgb), .16);
  border-color: rgba(var(--danger-rgb), .65);
  color: var(--danger);
  box-shadow: 0 0 12px rgba(var(--danger-rgb), .25);
}

.loading-state, .empty, .login-required {
  padding: 30px 20px;
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--text-muted);
  font-size: 13.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.login-required a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== 模型工具栏(玻璃) ===== */
.models-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.models-search-wrap {
  position: relative;
  flex: 1;
  min-width: 260px;
}
.models-search-wrap::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 11px;
  background: var(--grad-brand);
  box-shadow: 0 0 16px rgba(var(--glow), .3);
  opacity: 0;
  transition: opacity .18s var(--ease-out);
  pointer-events: none;
}
.models-search-wrap:focus-within::before { opacity: 1; }
.models-search-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
}
.models-search-wrap input {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 38px;
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 0 32px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.models-search-wrap input:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(var(--glow), .1);
}
.clear-search-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  transition: color .18s var(--ease-out);
}
.clear-search-btn:hover { color: var(--text); }
.models-filter-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.filter-btn {
  padding: 5px 12px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s var(--ease-out);
}
.filter-btn.active {
  background: var(--grad-brand);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(var(--glow), .35);
}

/* ===== 模型卡片矩阵 ===== */
.model-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.model-group-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  margin-top: 10px;
  box-shadow: var(--shadow-sm);
}
.model-group-head:first-child { margin-top: 0; }
.model-group-head > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.model-group-head b {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 750;
}
.model-group-head span {
  color: var(--text-muted);
  font-size: 11.5px;
}
.model-group-head em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--primary);
  background: rgba(var(--glow), .12);
  border: 1px solid rgba(var(--glow), .35);
  padding: 2px 6px;
  border-radius: 4px;
}
.model-group-head.anthropic {
  border-left-color: var(--brand-anthropic);
}
.model-group-head.anthropic b { color: var(--brand-anthropic); }
.model-group-head.anthropic em {
  color: var(--brand-anthropic);
  background: rgba(var(--glow-anthropic), .12);
  border-color: rgba(var(--glow-anthropic), .4);
}

.model-group-cards { display: contents; }
.model-group-cards.new-api-group {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.model-card {
  position: relative;
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out),
              border-color .18s var(--ease-out);
  overflow: hidden;
}
.model-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  opacity: 0;
  transition: opacity .18s var(--ease-out);
}
.model-card:has(.model-title span.anthropic)::before {
  background: linear-gradient(90deg, #fb923c, var(--brand-anthropic));
}
.model-card:hover {
  border-color: rgba(var(--glow), .4);
  box-shadow: var(--shadow-md), var(--glow-shadow);
  transform: translateY(-3px);
}
.model-card:hover::before { opacity: 1; }

/* 厂商顶边条:全新模型走品牌渐变常亮 */
.model-card.new-api-card { border-color: rgba(var(--glow-violet), .4); }
.model-card.new-api-card::before {
  background: var(--grad-brand);
  opacity: 1;
}

/* 降价霓虹红 */
.model-card.price-drop { border-color: rgba(var(--danger-rgb), .38); }
.model-card.price-drop::before {
  background: linear-gradient(90deg, #fb7185, #e11d48);
  opacity: 1;
}
.price-drop-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #fff;
  font-size: 9px;
  font-weight: 750;
  padding: 3px 6px;
  border-bottom-left-radius: 6px;
  box-shadow: 0 0 14px rgba(244, 63, 94, .5);
  z-index: 1;
}
.model-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  padding-right: 24px;
}
.model-title h3 {
  color: var(--text);
  font-size: 14.5px;
  font-weight: 750;
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-title span {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(var(--glow), .14);
  color: var(--primary);
  border: 1px solid rgba(var(--glow), .4);
  flex-shrink: 0;
}
.model-title span.anthropic {
  background: rgba(var(--glow-anthropic), .13);
  color: var(--brand-anthropic);
  border-color: rgba(var(--glow-anthropic), .42);
}
/* 右侧徽章组:去掉从 .model-title span 继承的蓝底样式 */
.model-title span.title-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  flex-shrink: 0;
}
/* 上下文窗口徽章:1M 中性灰 */
.model-title span.ctx-pill {
  font-family: var(--font-mono);
  background: var(--bg-hover);
  color: var(--text-muted);
  border-color: var(--border-strong);
}
/* 上下文窗口徽章:2M 紫色高亮 */
.model-title span.ctx-pill.ctx-2m {
  background: rgba(var(--glow-violet), .15);
  color: var(--violet);
  border-color: rgba(var(--glow-violet), .45);
}
.model-card > p {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 12px;
  min-height: 36px;
}
.price-drop-note {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--danger);
  font-weight: 650;
  margin-bottom: 10px;
}
.price-drop-note span {
  background: rgba(var(--danger-rgb), .12);
  border: 1px solid rgba(var(--danger-rgb), .35);
  padding: 1px 5px;
  border-radius: 4px;
}

/* 峰谷电价:峰橙谷青 */
.peak-note {
  font-size: 10.5px;
  color: var(--amber);
  background: rgba(var(--amber-rgb), .1);
  border: 1px solid rgba(var(--amber-rgb), .3);
  padding: 4px 6px;
  border-radius: 5px;
  margin-bottom: 8px;
  line-height: 1.4;
}
.peak-note span { font-weight: 800; }
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
.schedule-price {
  background: var(--bg-hover);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  padding: 5px 6px;
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* 峰时(第一格)橙 · 谷时(第二格)青 */
.schedule-price:nth-child(1) { border-left: 2px solid rgba(var(--amber-rgb), .55); }
.schedule-price:nth-child(2) { border-left: 2px solid rgba(var(--glow-cyan), .55); }
.schedule-price.active:nth-child(1) {
  border-color: rgba(var(--amber-rgb), .5);
  background: rgba(var(--amber-rgb), .12);
  box-shadow: 0 0 12px rgba(var(--amber-rgb), .2);
}
.schedule-price.active:nth-child(2) {
  border-color: rgba(var(--glow-cyan), .5);
  background: rgba(var(--glow-cyan), .1);
  box-shadow: 0 0 12px rgba(var(--glow-cyan), .18);
}
.schedule-price b { color: var(--text); }
.schedule-price.active:nth-child(1) b { color: var(--amber); }
.schedule-price.active:nth-child(2) b { color: var(--accent); }
.schedule-cache { color: var(--text-muted); font-size: 9.5px; }

.price-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-top: auto;
}
.price-row.current-price-row {
  border-color: rgba(var(--glow), .38);
  box-shadow: 0 0 16px rgba(var(--glow), .14);
}
.price-cell {
  background: var(--surface-solid);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
}
.price-cell small {
  color: var(--text-muted);
  font-size: 9.5px;
  margin-bottom: 1px;
}
.price-cell strong {
  color: var(--text);
  font-size: 11.5px;
  line-height: 1.35;
}
.point-price {
  color: var(--brand-success);
  font-weight: 750;
  display: block;
}
.cny-price {
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 600;
  display: block;
}

.price-guarantee-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-top: 20px;
  box-shadow: var(--shadow-sm);
}
.guarantee-icon { font-size: 20px; line-height: 1; }
.guarantee-text strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  margin-bottom: 2px;
}
.guarantee-text p {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
}

/* ===== 客户端接入专区(玻璃卡 + 倾斜) ===== */
.client-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.client-card {
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out),
              border-color .18s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.client-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2.5px;
  background: var(--grad-brand);
  opacity: 0;
  transition: opacity .18s var(--ease-out);
}
.client-card:hover {
  border-color: rgba(var(--glow), .4);
  box-shadow: var(--shadow-lg), var(--glow-shadow);
  transform: translateY(-3px);
}
.client-card:hover::before { opacity: 1; }
.client-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.client-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
  background: var(--grad-brand-soft);
  border: 1px solid rgba(var(--glow), .3);
  box-shadow: 0 0 14px rgba(var(--glow), .15);
}
.client-title h4 {
  color: var(--text);
  font-size: 14.5px;
  font-weight: 750;
}
.client-title span {
  color: var(--text-muted);
  font-size: 11px;
}

.client-guide-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guide-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}
.step-num {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  font-size: 9.5px;
  font-weight: 750;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
  box-shadow: 0 0 8px rgba(var(--glow), .35);
}
.guide-item strong { color: var(--text); }
.guide-item code {
  color: var(--primary);
  background: rgba(var(--glow), .12);
  border: 1px solid rgba(var(--glow), .28);
  padding: 1px 4px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
}

/* ===== 快速调用示例(左右分栏玻璃卡) ===== */
.quickstart {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
  align-items: flex-start;
  gap: 32px;
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 30px;
  box-shadow: var(--shadow);
}
.quickstart-left { min-width: 0; }
.quickstart-left .section-badge-num {
  margin-bottom: 12px;
}
.quickstart-left h2 {
  color: var(--text);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 8px;
}
.quickstart-left p {
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.65;
  margin-bottom: 18px;
}

.protocol-tabs-modern {
  display: inline-flex;
  gap: 4px;
  background: var(--bg-hover);
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-bottom: 20px;
}
.tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s var(--ease-out);
}
.tab-btn.active {
  background: linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box,
              var(--grad-brand) border-box;
  border: 1px solid transparent;
  color: var(--text);
  box-shadow: var(--shadow-sm), 0 0 14px rgba(var(--glow), .22);
  font-weight: 700;
}
.tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.tab-dot.openai { background: var(--brand-success); box-shadow: 0 0 8px rgba(var(--glow-success), .7); }
.tab-dot.anthropic { background: var(--brand-anthropic); box-shadow: 0 0 8px rgba(var(--glow-anthropic), .7); }

.quick-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.q-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
/* 序号：与上方 .section-badge-num 用同一套渐变/字色/高光处理，做成它的迷你版。
   注意这里的数字是 .q-step 的直接子 <span>，会被下面的描述文字规则误伤
   （见 .q-step div span 处的说明），所以选择器必须写足。 */
.q-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  /* grid + place-items 做居中：原先的 flex + line-height:1 会把文字框压到
     与字号等高，字形贴框顶，视觉上整体偏上 */
  display: grid;
  place-items: center;
  line-height: 1.2;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  margin-top: 1px;
  box-shadow: 0 0 20px rgba(var(--glow), .35), inset 0 1px rgba(255, 255, 255, .25);
}
.q-step strong {
  display: block;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.4;
  margin-bottom: 2px;
}
/* 只作用于 <div> 里的描述行。原先写成 .q-step span（0,1,1），
   特异性高过 .q-num（0,1,0），把序号的颜色/display 一起改掉了：
   display 被压成 block，flex 居中失效、数字偏到左上；
   color 被改成 --text-muted，白字变灰蓝，压在渐变上就显得发闷。 */
.q-step div span {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.quickstart-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 终端代码窗(两主题统一深色终端) */
.code-terminal {
  background: #0b1020;
  border: 1px solid rgba(129, 140, 248, .26);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md), 0 0 34px rgba(99, 102, 241, .16);
}
.terminal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 12px;
  background: rgba(4, 8, 18, .88);
  border-bottom: 1px solid rgba(129, 140, 248, .18);
}
.terminal-title {
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.btn-copy-code {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: rgba(48, 64, 108, .8);
  border: 1px solid rgba(129, 140, 248, .28);
  border-radius: 5px;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s var(--ease-out);
}
.btn-copy-code svg { width: 12px; height: 12px; }
.btn-copy-code:hover {
  background: var(--primary-strong);
  color: #fff;
  border-color: rgba(129, 140, 248, .6);
  box-shadow: 0 0 14px rgba(99, 102, 241, .5);
}
.terminal-code {
  padding: 16px;
  margin: 0;
  overflow: auto;
  min-height: 160px;
}
.terminal-code code {
  color: #e2e8f0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ===== 页脚(玻璃 + 顶部渐变发丝线) ===== */
.footer {
  position: relative;
  z-index: 1;
  width: 100%;
  border-top: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: 32px 24px;
}
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--glow), .55), rgba(var(--glow-cyan), .45), transparent);
  pointer-events: none;
}
.footer-inner {
  width: min(100%, 1200px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  align-items: center;
  gap: 24px;
}
.footer-brand-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer-brand {
  font-size: 15px;
}
.footer-desc {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
  max-width: 360px;
}
.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  transition: color .18s var(--ease-out), text-shadow .18s var(--ease-out);
}
.footer-links a:hover { color: var(--primary); text-shadow: 0 0 12px rgba(var(--glow), .4); }

.footer-copyright {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  color: var(--text-muted);
  font-size: 11.5px;
}
.footer-badge {
  position: relative;
  font-size: 10px;
  color: var(--brand-success);
  background: rgba(var(--glow-success), .1);
  padding: 1px 5px 1px 14px;
  border-radius: 4px;
  border: 1px solid rgba(var(--glow-success), .35);
}
.footer-badge::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-success);
  box-shadow: 0 0 8px rgba(var(--glow-success), .85);
  animation: hwBlink 2s ease-in-out infinite;
}

/* ===== 吐司通知 ===== */
.toast {
  position: fixed;
  z-index: 100;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 15px);
  background: var(--surface-raised);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--text);
  padding: 9px 18px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(var(--glow), .35);
  box-shadow: var(--shadow-lg), var(--glow-shadow);
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s var(--ease-out);
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ===== 响应式适配 ===== */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; gap: 30px; padding-top: 6px; }
  .hero-console-wrap { max-width: 660px; }
  /* 指标带 2×2 */
  .hero-metrics { flex-wrap: wrap; gap: 20px 12px; padding: 22px 24px; }
  .metric-item { flex: 1 1 40%; }
  .metric-sep { display: none; }
  .fishcode-grid { grid-template-columns: 1fr; }
  .fishcode-visual { display: none; }
  .model-grid { grid-template-columns: repeat(2, 1fr); }
  .model-group-cards.new-api-group { grid-template-columns: repeat(2, 1fr); }
  .client-cards-grid { grid-template-columns: 1fr; }
  .quickstart { grid-template-columns: 1fr; gap: 24px; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .footer-desc { margin: 0 auto; }
  .footer-copyright { align-items: center; }
}

@media (max-width: 768px) {
  /* 小屏导航折叠 */
  .topnav { display: none; }
  .topbar-inner {
    width: calc(100% - 20px);
    margin: 10px auto 0;
    height: 56px;
    border-radius: 16px;
    padding: 0 10px 0 14px;
  }
  .create-form-grid { grid-template-columns: 1fr; }
  .btn-create-key { width: 100%; justify-content: center; }
  .model-grid { grid-template-columns: 1fr; }
  .model-group-cards.new-api-group { grid-template-columns: 1fr; }
  .models-toolbar { flex-direction: column; align-items: stretch; }
  .models-filter-tabs { overflow-x: auto; width: 100%; justify-content: flex-start; }
  .route-matrix { grid-template-columns: 1fr; }
  .key-item { flex-direction: column; align-items: flex-start; gap: 10px; }
  .key-actions { width: 100%; }
  .key-actions button { flex: 1; }
  .page-shell { padding: 20px 16px 50px; }
  .ac-theme-toggle { width: 44px; height: 44px; }
}

@media (max-width: 640px) {
  /* Bento 单列 */
  .features-row { grid-template-columns: 1fr; }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary { width: 100%; justify-content: center; }
  .hero-metrics { gap: 16px 10px; padding: 18px 16px; }
  .section-head { flex-direction: column; gap: 12px; }
  .quickstart { padding: 20px; }
  .fishcode-glass-card { padding: 20px; }
  .trust-label { width: 100%; }
  .hero-trust { grid-template-columns: repeat(2, max-content); }
}

/* ===== 动效降级守卫 ===== */
@media (prefers-reduced-motion:reduce) {
  .fx-aurora, .fx-orb,
  .status-indicator .dot::before,
  .update-pill.fresh i,
  .live-blink, .hw-live-dot, .hw-cursor,
  .ai-glow-ball,
  .btn-download,
  .footer-badge::before,
  .spinner { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ===== VS 对决专区(Fish AI vs 普通中转站) ===== */
.versus-badge{
  background:linear-gradient(135deg,#22d3ee,#818cf8 60%,#a855f7);
  box-shadow:0 0 20px rgba(var(--glow-cyan),.35), inset 0 1px rgba(255,255,255,.25);
}

/* -- 三张真相卡 -- */
.versus-intro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:24px;}
.vi-card{position:relative;background:var(--surface);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm);transition:border-color .25s var(--ease-out),box-shadow .25s var(--ease-out);}
.vi-card:hover{border-color:rgba(var(--glow),.35);box-shadow:var(--shadow-md);}
.vi-icon{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;background:rgba(139,152,208,.1);border:1px solid var(--border);}
html[data-theme="light"] .vi-icon{background:rgba(100,116,160,.09);}
.vi-card h3{display:flex;align-items:center;gap:8px;color:var(--text);font-size:14.5px;font-weight:800;letter-spacing:-.01em;margin:12px 0 6px;}
.vi-card p{color:var(--text-secondary);font-size:12.6px;line-height:1.78;}
.vi-hero{border-color:rgba(var(--glow),.36);background:linear-gradient(155deg,rgba(var(--glow),.12),var(--surface) 55%,rgba(var(--glow-cyan),.08));box-shadow:var(--shadow-md),0 0 34px rgba(var(--glow),.14);}
.vi-hero::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--primary),var(--violet));border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;}
.vi-hero .vi-icon{background:rgba(var(--glow),.16);border-color:rgba(var(--glow),.4);}

/* -- 对决表主体 -- */
.versus-card{position:relative;background:var(--surface);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow);padding:40px 22px 22px;}
.versus-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--primary),var(--violet));border-radius:var(--radius-xl) var(--radius-xl) 0 0;pointer-events:none;}
.versus-grid{--vs-cols:158px minmax(0,1.12fr) minmax(0,1fr);display:flex;flex-direction:column;}
.v-row{display:grid;grid-template-columns:var(--vs-cols);align-items:stretch;transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);}
.v-row.io-hide{opacity:0;transform:translateY(16px);}
.v-row.io-in{opacity:1;transform:none;}
.cell{min-width:0;padding:15px 16px;display:flex;align-items:center;}
.cell-label{justify-content:flex-start;font-weight:750;font-size:13.5px;color:var(--text-secondary);transition:color .2s;}
.v-row + .v-row .cell-label,
.v-row + .v-row .cell-comp{border-top:1px solid var(--border-soft);}
.cell-fish,.cell-comp{flex-direction:column;justify-content:center;gap:7px;text-align:center;}
.cell-fish{background:rgba(var(--glow),.085);border-left:1px solid rgba(var(--glow),.26);border-right:1px solid rgba(var(--glow),.26);transition:background .25s;}
.versus-grid .v-row:nth-child(n+3) .cell-fish{border-top:1px solid rgba(var(--glow),.12);}
.versus-grid .v-row:last-child .cell-fish{border-bottom:1px solid rgba(var(--glow),.26);border-radius:0 0 14px 14px;}
.v-row:not(.v-head):hover .cell-fish{background:rgba(var(--glow),.12);}
.v-row:not(.v-head):hover .cell-label{color:var(--text);}

/* 表头:高亮列凸出加冕 */
.v-head .cell-label{font-size:12px;font-weight:650;color:var(--text-muted);}
.v-fish-head{margin-top:-32px;position:relative;z-index:1;flex-direction:column;gap:3px;padding:24px 16px;color:#fff;background:linear-gradient(115deg,#6366f1 0%,#7c3aed 45%,#0e7490 100%);background-size:220% 100%;border:1px solid rgba(var(--glow),.5);border-radius:16px 16px 0 0;box-shadow:0 16px 38px rgba(2,6,23,.42),0 0 38px rgba(var(--glow),.28);animation:vHeadFlow 7s ease-in-out infinite alternate;}
@keyframes vHeadFlow{from{background-position:0% 0}to{background-position:100% 0}}
.v-fish-name{display:flex;align-items:center;gap:6px;font-size:15.5px;font-weight:850;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(2,6,23,.35);}
.v-crown{font-size:14px;}
.v-fish-sub{font-size:11px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.82);}
.v-fish-head::after{content:'VS';position:absolute;right:-14px;top:50%;transform:translateY(-50%);z-index:3;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-raised);border:1px solid var(--border-strong);color:var(--text);font-size:11px;font-weight:900;letter-spacing:.05em;box-shadow:var(--shadow-md),0 0 16px rgba(var(--glow),.4);animation:vsPulse 2.8s ease-in-out infinite;}
@keyframes vsPulse{0%,100%{box-shadow:var(--shadow-md),0 0 10px rgba(var(--glow),.3)}50%{box-shadow:var(--shadow-md),0 0 26px rgba(var(--glow),.6)}}
.v-comp-head{flex-direction:column;gap:3px;padding-left:36px;}
.v-comp-name{font-size:14px;font-weight:800;color:var(--text);}
.v-comp-sub{font-size:11px;color:var(--text-muted);letter-spacing:.02em;}

/* 单元格内容 */
.v-line{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;}
.v-mark{width:19px;height:19px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.v-mark svg{width:10px;height:10px;}
.v-mark.win{background:rgba(var(--glow-success),.15);border:1px solid rgba(var(--glow-success),.5);color:var(--brand-success);}
.v-mark.lose{background:rgba(var(--danger-rgb),.12);border:1px solid rgba(var(--danger-rgb),.4);color:var(--danger);}
.v-val{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;}
.v-val b{font-size:14.5px;font-weight:800;letter-spacing:-.01em;line-height:1.3;}
.cell-fish .v-val b{color:var(--accent);text-shadow:0 0 20px rgba(var(--glow-cyan),.35);}
html[data-theme="light"] .cell-fish .v-val b{color:#0e7490;}
.cell-comp .v-val b{color:var(--text-muted);}
.v-note{font-size:11.8px;line-height:1.6;color:var(--text-secondary);}
.cell-comp .v-note{color:var(--text-muted);}

/* ⓘ 悬浮提示 */
.v-info{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;border:1px solid rgba(var(--glow-cyan),.5);background:rgba(var(--glow-cyan),.08);color:var(--accent);font-size:9.5px;font-weight:800;cursor:help;position:relative;vertical-align:1px;}
.v-info:focus-visible{outline:2px solid rgba(var(--glow-cyan),.6);outline-offset:2px;}
.v-info::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(5px);width:max-content;max-width:240px;white-space:normal;background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:10px;padding:8px 11px;color:var(--text-secondary);font-size:11.5px;font-weight:500;line-height:1.65;text-align:left;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .18s var(--ease-out),transform .18s var(--ease-out);z-index:30;}
.v-info::before{content:'';position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%) rotate(45deg);width:8px;height:8px;background:var(--surface-raised);border-right:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong);opacity:0;transition:opacity .18s var(--ease-out);z-index:31;pointer-events:none;}
.v-info:hover::after,.v-info:focus::after{opacity:1;transform:translateX(-50%) translateY(0);}
.v-info:hover::before,.v-info:focus::before{opacity:1;}

/* 迷你对比条 */
.v-bar{width:100%;max-width:180px;height:5px;border-radius:99px;background:rgba(139,152,208,.16);overflow:hidden;margin-top:2px;}
html[data-theme="light"] .v-bar{background:rgba(100,116,160,.18);}
.v-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--primary));box-shadow:0 0 12px rgba(var(--glow-cyan),.5);transform-origin:left center;}
.v-bar-bad i{background:repeating-linear-gradient(90deg,rgba(var(--danger-rgb),.55) 0 7px,rgba(var(--danger-rgb),.18) 7px 11px);box-shadow:none;}
.v-row.io-in .v-bar i{animation:vBarGrow 1s var(--ease-out) .2s backwards;}
@keyframes vBarGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* 底部 CTA */
.v-cta{margin-top:20px;padding-top:18px;border-top:1px dashed var(--border-strong);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.v-cta-text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.v-cta-text strong{font-size:14.5px;font-weight:800;color:var(--text);letter-spacing:-.01em;}
.v-cta-text span{font-size:12px;color:var(--text-muted);}
.v-cta-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:12px;background:var(--grad-brand);color:#fff;font-size:13px;font-weight:750;text-decoration:none;letter-spacing:.01em;box-shadow:0 10px 26px rgba(var(--glow),.35);transition:transform .25s var(--ease-spring),box-shadow .25s var(--ease-out),filter .25s var(--ease-out);white-space:nowrap;}
.v-cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(var(--glow),.5);filter:brightness(1.07);}
.v-cta-btn svg{width:15px;height:15px;transition:transform .25s var(--ease-out);}
.v-cta-btn:hover svg{transform:translateX(3px);}

/* -- VS 区响应式 -- */
@media (max-width:1024px){
  .versus-intro{grid-template-columns:1fr;}
  .versus-grid{--vs-cols:120px minmax(0,1fr) minmax(0,1fr);}
}
@media (max-width:768px){
  .versus-card{padding:32px 10px 14px;}
  .versus-grid{--vs-cols:minmax(0,1fr) minmax(0,1fr);}
  .cell{padding:13px 9px;}
  .v-head .cell-label{display:none;}
  .cell-label{grid-column:1 / -1;padding:13px 6px 3px;font-size:12.5px;}
  .v-row + .v-row .cell-label{border-top:none;}
  .v-row + .v-row .cell-comp,
  .versus-grid .v-row:nth-child(n+3) .cell-fish{border-top:none;}
  .v-fish-head{margin-top:-22px;padding:18px 12px 16px;}
  .v-fish-head::after{width:30px;height:30px;right:-11px;font-size:10px;}
  .v-comp-head{padding-left:26px;}
  .v-fish-name{font-size:14px;}
  .v-cta{flex-direction:column;align-items:stretch;}
  .v-cta-btn{justify-content:center;}
}
@media (max-width:640px){
  .v-val b{font-size:13.5px;}
  .v-note{font-size:11px;}
  .v-bar{max-width:150px;}
}
@media (prefers-reduced-motion:reduce){
  .v-fish-head,.v-fish-head::after{animation:none !important;}
  .v-row{transition:none !important;}
  .v-row.io-hide{opacity:1;transform:none;}
  .v-row.io-in .v-bar i{animation:none !important;}
}