/* V4智能AI开放平台 - Industrial/Utilitarian Theme */
/* Forbidden colors: purple/violet/indigo/fuchsia/blue-purple gradients */
/* Fonts: Chakra Petch (display), Manrope (body), JetBrains Mono (data) */

:root {
  --bg-carbon: #09090B;              /* 页面近黑底 */
  --bg-panel: #0F0F12;               /* 导航/面板 第一层 */
  --bg-card: #151519;                /* 卡片 第二层 */
  --bg-elevated: #1B1B21;            /* 弹窗内部 第三层 */
  --accent-amber: #F0A739;           /* 琥珀 accent（收敛，去廉价橙） */
  --accent-cyan: #4FD1C5;
  --text-primary: #F4F4F5;           /* 主文字 近白 */
  --text-secondary: #A1A1AA;         /* 次级文字（≥4.5:1） */
  --status-green: #4ADE80;
  --status-yellow: #F0A739;
  --status-red: #F87171;
  --border-color: rgba(255,255,255,.08);   /* 发丝边框 */
  --border-strong: rgba(255,255,255,.16);  /* 强调边框 */
  --surface-glow: rgba(255,255,255,.04);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Manrope', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background-color: var(--bg-carbon);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

a {
  color: var(--accent-cyan);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.8;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Navbar */
.navbar {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-color);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar-brand {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-amber) !important;
  /* flex 垂直居中 + 不裁剪：logo 与原文字同轴对齐，且不被行高裁切 */
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.navbar-nav .nav-link {
  color: var(--text-secondary) !important;
  margin-left: 1.5rem;
  transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover {
  color: var(--accent-amber) !important;
}

/* Hero Section */
.hero-section {
  padding: 4rem 0;
  background: linear-gradient(135deg, var(--bg-panel) 0%, var(--bg-carbon) 100%);
  border-bottom: 1px solid var(--border-color);
}

.hero-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--accent-amber);
}

.hero-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

/* Stats Card */
.stats-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.stats-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.stats-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2rem;
  color: var(--accent-cyan);
  font-weight: 700;
}

/* Progress Bar */
.progress-container {
  background: var(--bg-panel);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
  margin: 1rem 0;
}

.progress-bar {
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 4px;
}

.progress-bar.green { background: var(--status-green); }
.progress-bar.yellow { background: var(--status-yellow); }
.progress-bar.red { background: var(--status-red); }

/* Package Cards */
.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.package-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.package-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-amber);
}

.package-card.featured {
  border-color: var(--accent-amber);
  box-shadow: 0 0 20px rgba(255, 176, 32, 0.1);
}

.package-badge {
  position: absolute;
  top: -10px;
  right: 20px;
  background: var(--accent-amber);
  color: var(--bg-carbon);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: 'Chakra Petch', sans-serif;
}

.package-number {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: var(--border-color);
  opacity: 0.3;
  line-height: 1;
  margin-bottom: -1rem;
}

.package-name {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.package-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.75rem;
  color: var(--accent-amber);
  font-weight: 700;
  margin-bottom: 1rem;
}

.package-tokens {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

.btn-amber {
  background: var(--accent-amber);
  color: var(--bg-carbon);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.btn-amber:hover {
  background: #FFC540;
  color: var(--bg-carbon);
}

.btn-outline-amber {
  background: transparent;
  color: var(--accent-amber);
  border: 2px solid var(--accent-amber);
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-outline-amber:hover {
  background: var(--accent-amber);
  color: var(--bg-carbon);
}

/* Modal */
.modal-content {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.modal-header {
  border-bottom: 1px solid var(--border-color);
}

.modal-footer {
  border-top: 1px solid var(--border-color);
}

.btn-close {
  filter: invert(1);
}

.contact-info-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.contact-info-item:hover {
  border-color: var(--accent-amber);
}

.contact-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.contact-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem;
  color: var(--accent-cyan);
}

.copy-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
}

/* Forms */
.form-control {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  border-radius: 6px;
}

.form-control:focus {
  background: var(--bg-card);
  border-color: var(--accent-amber);
  color: var(--text-primary);
  box-shadow: 0 0 0 0.2rem rgba(255, 176, 32, 0.15);
}

.form-label {
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

/* Toast */
.toast-container {
  z-index: 9999;
}

.toast {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.toast.bg-success {
  background: rgba(63, 185, 80, 0.1) !important;
  border-color: var(--status-green);
}

.toast.bg-danger {
  background: rgba(248, 81, 73, 0.1) !important;
  border-color: var(--status-red);
}

.toast.bg-warning {
  background: rgba(240, 180, 41, 0.1) !important;
  border-color: var(--status-yellow);
}

/* Tabs */
.nav-tabs {
  border-bottom: 1px solid var(--border-color);
}

.nav-tabs .nav-link {
  color: var(--text-secondary);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: 0.75rem 1.5rem;
  margin-right: 0.5rem;
}

.nav-tabs .nav-link.active {
  color: var(--accent-amber);
  background: transparent;
  border-bottom-color: var(--accent-amber);
}

.nav-tabs .nav-link:hover {
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* Utility */
.text-amber { color: var(--accent-amber) !important; }
.text-cyan { color: var(--accent-cyan) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-green { color: var(--status-green) !important; }
.text-yellow { color: var(--status-yellow) !important; }
.text-red { color: var(--status-red) !important; }

.border-amber { border-color: var(--accent-amber) !important; }

.mono { font-family: 'JetBrains Mono', monospace; }

/* Responsive */
@media (max-width: 768px) {
  .hero-title {
    font-size: 1.75rem;
  }
  
  .stats-value {
    font-size: 1.5rem;
  }
  
  .package-number {
    font-size: 2rem;
  }
}

/* Loading Spinner */
.spinner-border-amber {
  border-color: var(--accent-amber);
  border-right-color: transparent;
}

/* Section numbering */
.section-marker {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 0.75rem;
  color: var(--accent-amber);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  display: block;
}

/* Card with left accent */
.card-accent {
  border-left: 3px solid var(--accent-amber);
}

/* API Key display */
.api-key-display {
  background: var(--bg-carbon);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 1rem;
  font-family: 'JetBrains Mono', monospace;
  word-break: break-all;
  margin-bottom: 1rem;
}

/* Table styles for admin */
.table-dark-custom {
  background: var(--bg-card);
  color: var(--text-primary);
}

.table-dark-custom th {
  background: var(--bg-panel);
  border-color: var(--border-color);
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.table-dark-custom td {
  border-color: var(--border-color);
  vertical-align: middle;
}

.table-dark-custom tbody tr:hover {
  background: var(--bg-panel);
}

/* ============================================================
   V4智能AI开放平台 · 白色/浅色主题（可切换）
   通过 body.light-theme 覆盖 CSS 变量，实现浅色配色
   ============================================================ */
body.light-theme {
  --bg-carbon: #F5F7FA;          /* 页面底色：浅灰白 */
  --bg-panel: #FFFFFF;           /* 面板：纯白 */
  --bg-card: #FFFFFF;            /* 卡片：纯白 */
  --text-primary: #1A2530;       /* 主文字：深炭 */
  --text-secondary: #4A5A6E;     /* 次级文字（对比度提升） */
  --border-color: #DCE3EA;       /* 边框：浅灰 */
  background-color: var(--bg-carbon);
  color: var(--text-primary);
}
body.light-theme .navbar { background: var(--bg-panel); border-bottom-color: var(--border-color); }
body.light-theme .hero-section { background: linear-gradient(135deg, #FFFFFF 0%, #F0F3F7 100%); border-bottom-color: var(--border-color); }
body.light-theme .stats-card,
body.light-theme .package-card { background: var(--bg-card); border-color: var(--border-color); }
body.light-theme .package-card:hover { border-color: var(--accent-amber); }
body.light-theme .package-number { color: #C6CED6; opacity: .5; }
body.light-theme .modal-content { background: var(--bg-panel); border-color: var(--border-color); color: var(--text-primary); }
body.light-theme .modal-header, body.light-theme .modal-footer { border-color: var(--border-color); }
body.light-theme .contact-info-item { background: var(--bg-card); border-color: var(--border-color); }
body.light-theme .form-control { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); }
body.light-theme .form-control:focus { background: var(--bg-card); border-color: var(--accent-amber); color: var(--text-primary); }
body.light-theme .nav-tabs { border-bottom-color: var(--border-color); }
body.light-theme .nav-tabs .nav-link { color: var(--text-secondary); }
body.light-theme .nav-tabs .nav-link.active { color: var(--accent-amber); }
body.light-theme .api-key-display { background: #F0F3F7; border-color: var(--border-color); color: var(--text-primary); }
body.light-theme .progress-container { background: #E7ECF1; }
body.light-theme .toast { background: var(--bg-panel); border-color: var(--border-color); color: var(--text-primary); }
body.light-theme footer { border-top-color: var(--border-color) !important; }
body.light-theme .text-secondary { color: var(--text-secondary) !important; }
body.light-theme .copy-hint { color: var(--text-secondary); }
body.light-theme .navbar-brand, body.light-theme .navbar-brand span { color: var(--text-primary) !important; }
body.light-theme .brand-logo { background: transparent; }

/* ============================================================
   对比度 / 可读性提升（深色主界面为主，登录注册重点）
   ============================================================ */
/* 次级文字提升亮度，避免与背景糊在一起 */
:root { --text-secondary: #A6B2C0; }
/* 表单标签、提示文字更清晰 */
.form-label { color: var(--text-secondary); font-weight: 600; }
.hero-subtitle { color: var(--text-secondary); }
.stats-label { color: var(--text-secondary); }
.contact-label { color: var(--text-secondary); }
.package-tokens { color: var(--text-secondary); }
/* 导航链接对比度 */
.navbar-nav .nav-link { color: var(--text-secondary) !important; }
.navbar-nav .nav-link:hover { color: var(--accent-amber) !important; }
/* 登录/注册弹窗表单加大对比 */
#authModal .form-label, .modal .form-label { color: var(--text-secondary); }
#authModal .form-control, .modal .form-control { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary); }
/* 页脚可读 */
footer { color: var(--text-secondary); }


/* ============================================================
   V4智能AI开放平台 · 徽标尺寸 + 深/浅主题 Logo 双显隐
   ============================================================ */
.brand-logo {
  /* 明确盒模型：定高 + object-fit:contain，logo 完整等比缩放、绝不裁剪/挤压 */
  height: 24px;
  width: auto;
  max-height: 24px;
  max-width: 160px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  flex-shrink: 0;
  overflow: visible;
}
.brand-word { display: inline-flex; align-items: center; line-height: 1; }
/* 深色主题（默认）：显示深色 logo（logo-dark.png），隐藏浅色 logo */
.brand-logo-light { display: none; }
.brand-logo-dark { display: inline-block; }
/* 浅色主题：交换 */
body.light-theme .brand-logo-light { display: inline-block; }
body.light-theme .brand-logo-dark { display: none; }

/* ============================================================
   接口文档 · 清晰分节样式（docs-*）
   ============================================================ */
.docs-intro {
  background: rgba(45,212,191,.08);
  border: 1px solid rgba(45,212,191,.35);
  border-left: 3px solid var(--accent-cyan);
  color: var(--text-primary);
  padding: 12px 14px;
  border-radius: 8px;
  font-size: .92rem;
  margin-bottom: 18px;
}
.docs-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.docs-title {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}
.docs-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--accent-amber);
  color: #0B0F14;
  font-size: .8rem;
  font-weight: 700;
  margin-right: 10px;
}
.docs-label {
  font-size: .8rem;
  color: var(--text-secondary);
  letter-spacing: .03em;
  margin-bottom: 6px;
}
.docs-table { margin: 0; color: var(--text-primary); }
.docs-table th {
  background: var(--bg-panel);
  color: var(--text-secondary);
  border-color: var(--border-color);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.docs-table td { border-color: var(--border-color); color: var(--text-primary); vertical-align: middle; }
.docs-table .mono { color: var(--accent-cyan); }
.docs-code {
  background: #0D1420;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-amber);
  color: #E6EDF3;
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem;
  line-height: 1.6;
  padding: 12px 14px;
  border-radius: 8px;
  overflow-x: auto;
  white-space: pre;
  margin: 8px 0 0;
}
body.light-theme .docs-code { background: #0D1420; color: #E6EDF3; border-color: #DCE3EA; }
body.light-theme .docs-intro { color: var(--text-primary); background: rgba(0,113,227,.06); border-color: rgba(0,113,227,.25); border-left-color: #0071E3; }
body.light-theme .docs-num { color: #FFFFFF; }
body.light-theme .docs-table .mono { color: #0071E3; }

/* ============================================================
   白色主题 · macOS 浅色设计语言（F5F5F7 底 + 纯白卡片 + 毛玻璃导航）
   ============================================================ */
body.light-theme {
  --bg-carbon: #F5F5F7;          /* macOS 页面底色 */
  --bg-panel: #FFFFFF;           /* 面板：纯白 */
  --bg-card: #FFFFFF;            /* 卡片：纯白 */
  --text-primary: #1D1D1F;       /* macOS 主文字 */
  --text-secondary: #6E6E73;     /* macOS 次级文字（4.5:1+ 对比度） */
  --border-color: #E4E5E9;       /* 细浅边框 */
  --accent-amber: #0071E3;       /* macOS 蓝作为浅色主题主 accent */
  --accent-cyan: #0071E3;
  background-color: var(--bg-carbon);
  color: var(--text-primary);
}
/* 毛玻璃导航 */
body.light-theme .navbar {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--border-color);
}
body.light-theme .navbar-brand, body.light-theme .navbar-brand span { color: var(--text-primary) !important; }
body.light-theme .navbar-nav .nav-link { color: #1D1D1F !important; }
body.light-theme .navbar-nav .nav-link:hover { color: #0071E3 !important; }
body.light-theme .hero-section { background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F7 100%); border-bottom-color: var(--border-color); }
body.light-theme .hero-title, body.light-theme h1, body.light-theme h2, body.light-theme h3,
body.light-theme h4, body.light-theme h5 { color: #1D1D1F; }
body.light-theme .stats-card, body.light-theme .package-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
body.light-theme .package-card:hover { border-color: #0071E3; box-shadow: 0 10px 24px rgba(0,0,0,.08); }
body.light-theme .package-card.featured { border-color: #0071E3; box-shadow: 0 0 0 1px #0071E3, 0 10px 24px rgba(0,113,227,.12); }
body.light-theme .package-badge { background: #0071E3; color: #fff; }
body.light-theme .package-price, body.light-theme .text-amber { color: #0071E3 !important; }
body.light-theme .package-number { color: #D2D3D7; opacity: .8; }
body.light-theme .btn-amber { background: #0071E3; color: #fff; }
body.light-theme .btn-amber:hover { background: #0062C3; color: #fff; }
body.light-theme .btn-outline-amber { color: #0071E3; border-color: #0071E3; }
body.light-theme .btn-outline-amber:hover { background: #0071E3; color: #fff; }
body.light-theme .modal-content { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: 14px; color: var(--text-primary); }
body.light-theme .modal-header, body.light-theme .modal-footer { border-color: var(--border-color); }
body.light-theme .modal-title { color: #1D1D1F !important; }
body.light-theme .modal-title.text-amber { color: #0071E3 !important; }
body.light-theme .contact-info-item { background: #F5F5F7; border-color: var(--border-color); }
body.light-theme .contact-info-item:hover { border-color: #0071E3; }
body.light-theme .contact-value { color: #0071E3; }
body.light-theme .form-control, body.light-theme textarea.form-control {
  background: #FFFFFF;
  border: 1px solid #D2D3D7;
  color: #1D1D1F;
}
body.light-theme .form-control:focus, body.light-theme textarea.form-control:focus {
  background: #FFFFFF; border-color: #0071E3; color: #1D1D1F;
  box-shadow: 0 0 0 3px rgba(0,113,227,.18);
}
body.light-theme .nav-tabs { border-bottom-color: var(--border-color); }
body.light-theme .nav-tabs .nav-link { color: #6E6E73; }
body.light-theme .nav-tabs .nav-link.active { color: #0071E3; border-bottom-color: #0071E3; }
body.light-theme .api-key-display { background: #F5F5F7; border-color: var(--border-color); color: #1D1D1F; }
body.light-theme .progress-container { background: #E4E5E9; }
body.light-theme .toast { background: #FFFFFF; border: 1px solid var(--border-color); color: #1D1D1F; }
body.light-theme footer { border-top-color: var(--border-color) !important; color: #6E6E73 !important; }
body.light-theme .stats-value { color: #0071E3; }
body.light-theme .section-marker { color: #0071E3; }
body.light-theme .copy-hint { color: #6E6E73; }

/* ============================================================
   对比度修复：人设 textarea、表单、提示（深浅主题均 ≥ 4.5:1）
   ============================================================ */
textarea.form-control {
  font-family: 'Manrope', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  line-height: 1.6;
}
textarea.form-control::placeholder, .form-control::placeholder, input::placeholder { color: #8A94A6; }
body.dark textarea.form-control, body textarea.form-control { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); }
#personaInput { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); min-height: 140px; }
body.light-theme #personaInput { background: #FFFFFF; color: #1D1D1F; border-color: #D2D3D7; }
#personaInput:focus { border-color: var(--accent-amber); box-shadow: 0 0 0 3px rgba(255,176,32,.18); }
body.light-theme #personaInput:focus { border-color: #0071E3; box-shadow: 0 0 0 3px rgba(0,113,227,.18); }
.form-label { color: var(--text-secondary) !important; font-weight: 600 !important; }
.modal .text-secondary, .modal-body p { color: var(--text-secondary); }
.modal-body .alert, .alert { color: var(--text-primary); }
.toast .toast-body { color: var(--text-primary); }

/* ============================================================
   科技感交互：过渡 + 悬停微反馈 + 入场编排
   ============================================================ */
body { transition: background-color .3s ease, color .3s ease; }
.navbar { transition: background .3s ease, border-color .3s ease; }
.hero-section { transition: background .3s ease; }
.stats-card, .package-card, .btn-amber, .btn-outline-amber, .contact-info-item {
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease, color .25s ease;
}
.stats-card { border-left: 3px solid var(--accent-amber); }
.btn-amber:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,176,32,.28); }
.btn-outline-amber:hover { transform: translateY(-2px); }
.contact-info-item:hover { transform: translateX(4px); }
.package-card:hover { transform: translateY(-6px); }
/* 入场编排 */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-section .hero-title, .hero-section .hero-subtitle, .hero-section .section-marker,
.hero-section .stats-card { animation: fadeUp .6s ease both; }
.hero-section .hero-subtitle { animation-delay: .12s; }
.hero-section .section-marker { animation-delay: .04s; }
.hero-section .stats-card { animation-delay: .24s; }
#packages .section-marker, #packages .package-card { animation: fadeUp .6s ease both; }
#packages .package-card:nth-child(2) { animation-delay: .08s; }
#packages .package-card:nth-child(3) { animation-delay: .16s; }
#packages .package-card:nth-child(4) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .btn-amber:hover, .package-card:hover, .contact-info-item:hover { transform: none; }
}


/* ============================================================
   深色主题 · 近黑多层表面精修（去"廉价蓝灰"）
   浅色 macOS 主题由 body.light-theme 变量覆盖，不受影响
   ============================================================ */
body {
  background-image: radial-gradient(1200px 600px at 60% -10%, rgba(240,167,57,.05), transparent 60%),
                    radial-gradient(900px 500px at 0% 0%, rgba(79,209,197,.04), transparent 55%);
  background-attachment: fixed;
}
.navbar { background: var(--bg-panel); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--border-color); box-shadow: 0 1px 0 rgba(0,0,0,.2); }
.stats-card, .package-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 var(--surface-glow);
}
.package-card:hover { border-color: var(--border-strong); box-shadow: 0 12px 30px rgba(0,0,0,.45), inset 0 1px 0 var(--surface-glow); transform: translateY(-6px); }
.package-card.featured { border-color: rgba(240,167,57,.45); box-shadow: 0 0 0 1px rgba(240,167,57,.35), 0 12px 30px rgba(0,0,0,.45); }
.package-badge { background: linear-gradient(135deg, #F0A739, #D9883A); color: #09090B; box-shadow: 0 2px 8px rgba(240,167,57,.35); }
.package-number { color: var(--text-secondary); opacity: .18; }
.package-name { color: var(--text-primary); }
.package-price { color: var(--accent-amber); }
.package-save { color: var(--status-green); font-size: .85rem; letter-spacing: .2px; margin: -.75rem 0 1rem; font-weight: 600; }
.btn-amber { background: var(--accent-amber); color: #09090B; box-shadow: 0 4px 14px rgba(240,167,57,.22); }
.btn-amber:hover { background: #FFC35C; box-shadow: 0 8px 22px rgba(240,167,57,.34); transform: translateY(-2px); }
.btn-outline-amber { color: var(--accent-amber); border-color: rgba(240,167,57,.5); }
.btn-outline-amber:hover { background: rgba(240,167,57,.12); color: #FFC35C; border-color: #F0A739; }
.modal-content { background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.modal-header, .modal-footer { border-color: var(--border-color); }
.stats-label { color: var(--text-secondary); letter-spacing: .4px; }
.api-key-display { background: var(--bg-carbon); border: 1px solid var(--border-color); border-radius: 10px; }
.progress-container { background: rgba(255,255,255,.06); }
.text-secondary { color: var(--text-secondary) !important; }
.font-mono, .mono { font-family: 'JetBrains Mono', monospace; letter-spacing: .2px; }

/* 个人中心组件 */
.uc-stat {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: .85rem 1rem;
  height: 100%;
  box-shadow: inset 0 1px 0 var(--surface-glow);
}
.uc-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1rem 1.1rem;
}
.uc-section .stats-label { margin-bottom: .4rem; }
.api-key-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .75rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-carbon);
  margin-bottom: .5rem;
}
.api-key-mask { color: var(--text-primary); }
.uc-copy-key { flex: 0 0 auto; }