/* SmartAI Design System - Stripe-Inspired Professional */

/* ============================================
   配色系统 - 基于 Stripe 调色板
   ============================================ */
:root {
  /* 主色 - 深蓝紫 */
  --primary: #0052CC;
  --primary-hover: #003D99;
  --primary-light: #E6F0FF;
  
  /* 背景 - 浅蓝灰系（Omni 风格） */
  --bg-page: #F3F6FB;
  --bg-card: #FFFFFF;
  --bg-secondary: #EEF2F7;
  
  /* 文字 - 深海军蓝系（Stripe 风格） */
  --text-heading: #0A1929;
  --text-body: #4B5563;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  
  /* 边框 - 浅蓝灰 */
  --border-light: #E5EDF5;
  --border-medium: #D1D9E6;
  --border-dark: #B4BED1;
  
  /* 阴影 - Stripe 蓝色阴影系统 */
  --shadow-sm: 0 2px 4px rgba(50, 50, 93, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(50, 50, 93, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 24px rgba(50, 50, 93, 0.18), 0 6px 12px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 30px 45px -30px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.10);
}

/* ============================================
   全局基础
   ============================================ */
html,
body {
  background: var(--bg-page) !important;
  color: var(--text-body) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

* {
  box-sizing: border-box;
}

/* ============================================
   顶部导航 - 清爽白底
   ============================================ */
.semi-layout-header,
.semi-layout-header > header {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-sm) !important;
  height: 64px !important;
}

.semi-layout-header h4 {
  color: var(--text-heading) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

.semi-layout-header a,
.semi-layout-header button,
.semi-layout-header span {
  color: var(--text-heading) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  transition: color 0.2s ease;
}

.semi-layout-header a:hover,
.semi-layout-header button:hover {
  color: var(--primary) !important;
}

/* ============================================
   页面容器
   ============================================ */
.public-page-content,
.public-page-content > .bg-white,
.classic-page-fill,
.semi-layout-content {
  background: var(--bg-page) !important;
}

#smartai-home,
.smartai-about {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 64px 32px !important;
  background: var(--bg-page) !important;
}

/* ============================================
   标题系统 - Stripe 轻量风格
   ============================================ */
h1, .h1,
.smartai-about h1,
#smartai-home h1,
.pricing-layout h1 {
  color: var(--text-heading) !important;
  font-size: 48px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.04em !important;
  margin-bottom: 20px !important;
}

h2, .h2,
.smartai-about h2,
#smartai-home h2,
.pricing-layout h2 {
  color: var(--text-heading) !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 16px !important;
}

h3, .h3,
.smartai-about h3,
#smartai-home h3,
.pricing-layout h3,
.semi-card-body h3 {
  color: var(--text-heading) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 12px !important;
}

h4, .h4,
.smartai-about h4,
#smartai-home h4,
.pricing-layout h4,
.semi-card-body h4 {
  color: var(--text-heading) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-bottom: 8px !important;
}

/* ============================================
   正文文字 - 易读性优先
   ============================================ */
p,
.smartai-about p,
#smartai-home p,
.pricing-layout p,
.semi-card-body p {
  color: var(--text-body) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
  margin-bottom: 16px !important;
}

li {
  color: var(--text-body) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
}

small,
.text-sm {
  color: var(--text-secondary) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* ============================================
   卡片 - Stripe 多层阴影
   ============================================ */
.semi-card,
.smartai-about .card,
.pricing-layout .semi-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}

.semi-card:hover,
.smartai-about .card:hover,
.pricing-layout .semi-card:hover {
  border-color: var(--border-medium) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-2px) !important;
}

.semi-card-body {
  background: transparent !important;
  padding: 24px !important;
}

.semi-card-header {
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-light) !important;
  padding: 16px 24px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: var(--text-heading) !important;
}

/* ============================================
   Pricing 模型广场 - 超高对比度（纯黑字）
   ============================================ */
.pricing-layout {
  background: var(--bg-page) !important;
  padding: 80px 0 40px !important;
  color: #000000 !important;
}

/* 强制所有文字纯黑色 - 最高对比度 */
.pricing-layout *,
.pricing-layout span,
.pricing-layout div,
.pricing-layout p,
.pricing-layout h1,
.pricing-layout h2,
.pricing-layout h3,
.pricing-layout h4,
.pricing-layout strong,
.pricing-layout b {
  color: #000000 !important;
  font-weight: 600 !important;
}

.pricing-layout .pricing-sidebar {
  background: var(--bg-card) !important;
  border-right: 1px solid var(--border-light) !important;
  padding: 24px !important;
}

.pricing-layout .semi-layout-content {
  padding: 32px !important;
  background: var(--bg-page) !important;
}

/* 模型名称 - 超大纯黑 */
.pricing-layout .model-name {
  color: #000000 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 8px !important;
}

/* 模型描述 - 纯黑 */
.pricing-layout .model-desc {
  color: #000000 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  margin-bottom: 12px !important;
}

/* 档次标签 - 纯黑 */
.pricing-layout .tier-label,
.pricing-layout .tier-label *,
.pricing-layout .tier-label span {
  color: #000000 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* 价格 - 超大纯黑 */
.pricing-layout .tier-price,
.pricing-layout .tier-price *,
.pricing-layout .tier-price span,
.pricing-layout [class*="price"],
.pricing-layout [class*="Price"] {
  color: #000000 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
}

/* 折扣 - 纯黑 */
.pricing-layout .discount {
  color: #000000 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* 档次描述 - 纯黑 */
.pricing-layout .tier-desc {
  color: #000000 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* 单位文字 - 纯黑 */
.pricing-layout .unit {
  color: #000000 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* 价格标签 */
.pricing-layout .semi-tag {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
}

/* ============================================
   按钮系统 - 清晰层次
   ============================================ */
button,
.semi-button,
.sa-btn {
  border-radius: 6px !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  padding: 10px 20px !important;
  transition: all 0.15s ease !important;
  border: 1px solid var(--border-medium) !important;
  min-height: 40px !important;
  cursor: pointer !important;
}

/* 主按钮 */
.semi-button-primary,
button[type="submit"],
.sa-btn.primary,
#smartai-home .sa-btn.primary {
  background: var(--primary) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: var(--shadow-sm) !important;
  font-weight: 600 !important;
}

.semi-button-primary:hover,
button[type="submit"]:hover,
.sa-btn.primary:hover {
  background: var(--primary-hover) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}

/* 次要按钮 */
.semi-button-secondary,
.semi-button-tertiary,
.sa-btn.ghost {
  background: var(--bg-card) !important;
  color: var(--text-heading) !important;
  border: 1px solid var(--border-medium) !important;
  font-weight: 500 !important;
}

.semi-button-secondary:hover,
.semi-button-tertiary:hover,
.sa-btn.ghost:hover {
  background: var(--bg-secondary) !important;
  border-color: var(--border-dark) !important;
}

/* ============================================
   表单元素 - 精致输入
   ============================================ */
input,
textarea,
select,
.semi-input,
.semi-select {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--text-heading) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  min-height: 40px !important;
  background: var(--bg-card) !important;
  transition: all 0.15s ease !important;
}

input:hover,
textarea:hover,
select:hover,
.semi-input-wrapper:hover {
  border-color: var(--border-medium) !important;
}

input:focus,
textarea:focus,
select:focus,
.semi-input-wrapper:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-light) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
}

label,
.semi-form-field-label-text {
  color: var(--text-heading) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.semi-input-wrapper {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 6px !important;
  min-height: 40px !important;
}

/* ============================================
   登录/注册页面
   ============================================ */
.classic-page-fill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 40px 20px !important;
}

.classic-page-fill .w-full.max-w-sm {
  margin: 0 !important;
  width: 100% !important;
  max-width: 440px !important;
}

.classic-page-fill .semi-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-xl) !important;
  padding: 40px !important;
}

.classic-page-fill h3 {
  color: var(--text-heading) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  margin-bottom: 28px !important;
  text-align: center !important;
}

.classic-page-fill .semi-checkbox-addon {
  color: var(--text-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

.classic-page-fill a {
  color: var(--primary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.classic-page-fill a:hover {
  text-decoration: underline !important;
}

/* 移除默认标题 */
.classic-page-fill:not(.classic-home-page):before,
.classic-page-fill:not(.classic-home-page):after {
  content: none !important;
  display: none !important;
}

/* ============================================
   控制台主界面
   ============================================ */
.semi-layout-content {
  padding: 32px !important;
}

/* 表格 */
.semi-table {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
}

.semi-table-header {
  background: var(--bg-secondary) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--text-heading) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.semi-table-row {
  border-bottom: 1px solid var(--border-light) !important;
}

.semi-table-row:hover {
  background: var(--bg-secondary) !important;
}

.semi-table-cell {
  color: var(--text-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 12px 16px !important;
}

/* ============================================
   Footer
   ============================================ */
.semi-layout-footer {
  background: var(--bg-secondary) !important;
  border-top: 1px solid var(--border-light) !important;
  padding: 40px 24px !important;
  text-align: center !important;
}

.semi-layout-footer a {
  color: var(--text-secondary) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

.semi-layout-footer a:hover {
  color: var(--primary) !important;
}

/* 隐藏 New-API 原始 footer */
.semi-layout-footer a[href*="new-api"],
.semi-layout-footer a[href*="QuantumNous"],
.semi-layout-footer span:has(+ a[href*="new-api"]) {
  display: none !important;
}

/* 备案号 */
.smartai-icp-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;
  padding: 14px 0 !important;
  font-size: 13px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border-top: 1px solid var(--border-light) !important;
  z-index: 9999 !important;
  box-shadow: var(--shadow-sm) !important;
}

.smartai-icp-footer a {
  color: var(--text-secondary) !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}

.smartai-icp-footer a:hover {
  color: var(--primary) !important;
  text-decoration: underline !important;
}

/* ============================================
   移动端响应
   ============================================ */
@media (max-width: 768px) {
  h1, .h1 {
    font-size: 32px !important;
  }
  
  h2, .h2 {
    font-size: 26px !important;
  }
  
  h3, .h3 {
    font-size: 20px !important;
  }
  
  h4, .h4 {
    font-size: 16px !important;
  }
  
  p, li {
    font-size: 15px !important;
  }
  
  #smartai-home,
  .smartai-about {
    padding: 32px 16px !important;
  }
  
  .pricing-layout {
    padding-top: 72px !important;
  }
  
  .pricing-layout .pricing-sidebar {
    display: none !important;
  }
  
  .pricing-layout .semi-layout-content {
    padding: 16px !important;
  }
  
  .semi-card-body {
    padding: 20px !important;
  }
  
  .classic-page-fill .semi-card {
    padding: 28px 20px !important;
  }
  
  button,
  .semi-button {
    font-size: 14px !important;
    padding: 9px 18px !important;
  }
}

/* ============================================
   滚动条美化
   ============================================ */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-dark);
  border-radius: 6px;
  border: 3px solid var(--bg-secondary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* ============================================
   焦点可见性
   ============================================ */
*:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px !important;
}

/* ============================================
   加载动画
   ============================================ */
.semi-spin {
  color: var(--primary) !important;
}

/* ============================================
   通知框
   ============================================ */
.semi-toast,
.semi-notification {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-xl) !important;
  color: var(--text-heading) !important;
  border-radius: 8px !important;
}
/* SmartAI 全局统一风格修复 - Omni AI 风格 */

/* ============================================
   全局背景统一 - 浅蓝灰背景
   ============================================ */
html,
body,
#root,
.App,
.main-content,
.home-page,
.about-page,
.chat-page,
main,
.semi-layout,
.semi-layout-content {
  background: #F3F6FB !important;
}

/* ============================================
   隐藏底部大二维码
   ============================================ */
/* 客服二维码弹窗保留，只隐藏首页底部大二维码 */
.home-page img[src*="qr"],
.home-page img[src*="QR"],
.home-page img[width="200"],
.home-page img[width="300"],
.home-page .qrcode-large,
main > div > div:last-child > img:only-child {
  display: none !important;
}

/* 如果是在某个容器里的大二维码 */
main > div:last-child:has(img[width="200"]),
main > div:last-child:has(img[width="300"]) {
  display: none !important;
}

/* ============================================
   站内聊天页面统一风格
   ============================================ */
.chat-container,
.chat-wrapper,
.chat-page,
.chatbox,
[class*="chat"] {
  background: #F3F6FB !important;
}

/* 聊天消息卡片 */
.chat-message,
.message-bubble,
[class*="message-"] {
  background: #FFFFFF !important;
  border: 1px solid #E5EDF5 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 4px rgba(50, 50, 93, 0.08) !important;
}

/* ============================================
   首页统一 Omni 风格
   ============================================ */
#smartai-home,
.home-page,
.smartai-home {
  background: #F3F6FB !important;
}

/* 首页所有卡片 */
#smartai-home .card,
#smartai-home article,
.home-page .card,
.home-page article {
  background: #FFFFFF !important;
  border: 1px solid #E5EDF5 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 4px rgba(50, 50, 93, 0.08) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#smartai-home .card:hover,
#smartai-home article:hover {
  box-shadow: 0 8px 16px rgba(50, 50, 93, 0.12) !important;
  transform: translateY(-2px) !important;
}

/* 首页标题统一 */
#smartai-home h1 {
  font-weight: 900 !important;
  color: #0A1929 !important;
  letter-spacing: -0.04em !important;
}

#smartai-home h2 {
  font-weight: 800 !important;
  color: #0A1929 !important;
  letter-spacing: -0.03em !important;
}

#smartai-home h3 {
  font-weight: 700 !important;
  color: #0A1929 !important;
}

/* 首页按钮统一 */
#smartai-home .btn,
#smartai-home button,
#smartai-home a[class*="button"] {
  background: #0052CC !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(0, 82, 204, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#smartai-home .btn:hover,
#smartai-home button:hover {
  background: #003D99 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 82, 204, 0.35) !important;
}

/* ============================================
   关于页面背景修复
   ============================================ */
.smartai-about {
  background: #F3F6FB !important;
}

/* ============================================
   深色区块特殊处理
   ============================================ */
/* 如果有刻意设计的深色区块，保留 */
.dark-section,
[class*="dark-"],
.hero-dark {
  background: #0A1929 !important;
  color: #FFFFFF !important;
}

.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section p {
  color: #FFFFFF !important;
}

/* 隐藏底部大二维码 */
main img[alt="SmartAI QQ客服二维码"]{display:none!important}