/* ============================================
   Shheng API - 全站设计系统 CSS v3.0
   覆盖公共页面 + 控制台 + 所有 UI 组件
   ============================================ */

/* === Google Fonts 动态加载 === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');

/* === 亮色主题变量覆盖 === */
:root {
  --background: oklch(0.99 0.002 250);
  --foreground: oklch(0.18 0.02 260);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.02 260);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.18 0.02 260);
  --primary: oklch(0.55 0.22 270);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.95 0.01 260);
  --secondary-foreground: oklch(0.25 0.02 260);
  --muted: oklch(0.96 0.005 260);
  --muted-foreground: oklch(0.50 0.02 260);
  --accent: oklch(0.93 0.03 230);
  --accent-foreground: oklch(0.25 0.02 260);
  --destructive: oklch(0.58 0.24 28);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0.90 0.008 260);
  --input: oklch(0.90 0.008 260);
  --ring: oklch(0.55 0.22 270);
  --radius: 0.625rem;
  --shheng-primary: #6366f1;
  --shheng-accent: #06b6d4;
  --shheng-bg: #f8f9ff;
  --shheng-card: #ffffff;
}

/* === 暗色主题变量覆盖 === */
.dark {
  --background: oklch(0.14 0.015 260);
  --foreground: oklch(0.93 0.01 260);
  --card: oklch(0.18 0.018 260);
  --card-foreground: oklch(0.93 0.01 260);
  --popover: oklch(0.16 0.016 260);
  --popover-foreground: oklch(0.93 0.01 260);
  --primary: oklch(0.65 0.20 275);
  --primary-foreground: oklch(0.12 0.01 260);
  --secondary: oklch(0.22 0.02 260);
  --secondary-foreground: oklch(0.90 0.01 260);
  --muted: oklch(0.20 0.015 260);
  --muted-foreground: oklch(0.60 0.02 260);
  --accent: oklch(0.25 0.04 230);
  --accent-foreground: oklch(0.90 0.01 260);
  --destructive: oklch(0.55 0.22 28);
  --destructive-foreground: oklch(0.95 0 0);
  --border: oklch(0.26 0.015 260);
  --input: oklch(0.24 0.015 260);
  --ring: oklch(0.65 0.20 275);
  --shheng-primary: #818cf8;
  --shheng-accent: #22d3ee;
  --shheng-bg: #0f0f18;
  --shheng-card: #16161e;
}

/* === 全局字体 === */
* {
  font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

body {
  background: var(--background) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* === 滚动条 === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--primary) 35%, transparent);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklch, var(--primary) 55%, transparent);
}

/* === 控制台 - 侧边栏 === */
[data-sidebar="sidebar"],
.sidebar,
[class*="sidebar"] {
  background: color-mix(in oklch, var(--card) 85%, transparent) !important;
  backdrop-filter: blur(12px);
  border-right: 1px solid color-mix(in oklch, var(--border) 60%, transparent) !important;
}

/* 侧边栏导航项 */
[data-sidebar="menu-item"],
.sidebar-menu-item,
[class*="sidebar"] [class*="menu-item"] {
  border-radius: 8px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[data-sidebar="menu-item"]:hover,
.sidebar-menu-item:hover {
  background: color-mix(in oklch, var(--primary) 10%, transparent) !important;
}

[data-sidebar="menu-item-active"],
.sidebar-menu-item.active,
[class*="sidebar"] [class*="active"] {
  background: color-mix(in oklch, var(--primary) 15%, transparent) !important;
  color: var(--primary) !important;
  font-weight: 500;
}

[data-sidebar="menu-item-active"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
}

/* === 控制台 - 顶栏 === */
[class*="header"],
[class*="app-header"] {
  background: color-mix(in oklch, var(--card) 80%, transparent) !important;
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid color-mix(in oklch, var(--border) 50%, transparent) !important;
}

/* 顶栏搜索框 */
[class*="header"] input[type="search"],
[class*="header"] [class*="search"] input {
  background: color-mix(in oklch, var(--muted) 50%, transparent) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

[class*="header"] input[type="search"]:focus,
[class*="header"] [class*="search"] input:focus {
  border-color: color-mix(in oklch, var(--primary) 40%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 15%, transparent) !important;
}

/* === 卡片 === */
[class*="card"]:not([class*="card-content"]):not([class*="card-header"]):not([class*="card-footer"]):not([class*="card-title"]):not([class*="card-description"]) {
  background: var(--card) !important;
  border: 1px solid color-mix(in oklch, var(--border) 70%, transparent) !important;
  border-radius: var(--radius) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[class*="card"]:hover:not([class*="card-content"]):not([class*="card-header"]):not([class*="card-footer"]):not([class*="card-title"]):not([class*="card-description"]):not([class*="static"]) {
  border-color: color-mix(in oklch, var(--primary) 30%, transparent) !important;
  box-shadow: 0 4px 24px -8px color-mix(in oklch, var(--primary) 20%, transparent) !important;
  transform: translateY(-1px);
}

/* === 按钮 === */
button[class*="primary"],
button[class*="default"]:not([class*="ghost"]):not([class*="outline"]):not([class*="secondary"]) {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  position: relative;
  overflow: hidden;
}

button[class*="primary"]:hover,
button[class*="default"]:hover {
  filter: brightness(1.1) !important;
  box-shadow: 0 4px 16px -4px color-mix(in oklch, var(--primary) 45%, transparent) !important;
  transform: translateY(-1px);
}

button[class*="ghost"]:hover,
button[class*="outline"]:hover {
  background: color-mix(in oklch, var(--primary) 10%, transparent) !important;
  color: var(--primary) !important;
}

/* === 输入框 / 表单 === */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
select {
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  background: var(--background) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: color-mix(in oklch, var(--primary) 50%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 12%, transparent) !important;
  outline: none !important;
}

/* === 数据表格 === */
[class*="table"] thead,
[class*="data-table"] thead {
  background: color-mix(in oklch, var(--muted) 50%, transparent) !important;
}

[class*="table"] thead th,
[class*="data-table"] thead th {
  font-weight: 600 !important;
  text-transform: none !important;
  font-size: 0.8rem !important;
  color: var(--muted-foreground) !important;
  border-bottom: 1px solid var(--border) !important;
}

[class*="table"] tbody tr,
[class*="data-table"] tbody tr {
  transition: background 0.15s ease !important;
  border-bottom: 1px solid color-mix(in oklch, var(--border) 50%, transparent) !important;
}

[class*="table"] tbody tr:hover,
[class*="data-table"] tbody tr:hover {
  background: color-mix(in oklch, var(--primary) 6%, transparent) !important;
}

/* === 徽章 / 标签 === */
[class*="badge"] {
  border-radius: 6px !important;
  font-weight: 500 !important;
  font-size: 0.72rem !important;
  padding: 2px 8px !important;
}

/* === 对话框 / 模态框 === */
[class*="dialog-content"],
[class*="modal-content"],
[class*="sheet-content"] {
  background: var(--card) !important;
  border: 1px solid color-mix(in oklch, var(--border) 60%, transparent) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px -16px rgba(0,0,0,0.25) !important;
  backdrop-filter: blur(8px);
}

[class*="dialog-overlay"],
[class*="modal-overlay"] {
  backdrop-filter: blur(6px) !important;
  background: color-mix(in oklch, var(--background) 50%, transparent) !important;
}

/* === 标签页 === */
[class*="tabs-trigger"] {
  border-radius: 8px 8px 0 0 !important;
  transition: all 0.2s ease !important;
  font-weight: 500 !important;
}

[class*="tabs-trigger"][data-state="active"],
[class*="tabs-trigger"].active {
  color: var(--primary) !important;
  border-bottom: 2px solid var(--primary) !important;
}

/* === 下拉菜单 === */
[class*="dropdown-menu-content"],
[class*="popover-content"],
[class*="select-content"] {
  background: var(--popover) !important;
  border: 1px solid color-mix(in oklch, var(--border) 60%, transparent) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px -8px rgba(0,0,0,0.18) !important;
  backdrop-filter: blur(8px);
}

[class*="dropdown-menu-item"]:hover,
[class*="select-item"]:hover {
  background: color-mix(in oklch, var(--primary) 10%, transparent) !important;
  color: var(--primary) !important;
}

/* === 控制台 Dashboard 统计卡片 === */
[class*="dashboard"] [class*="stat"],
[class*="dashboard"] [class*="metric"],
[class*="dashboard"] [class*="overview"] [class*="card"] {
  position: relative;
  overflow: hidden;
}

[class*="dashboard"] [class*="stat"]::after,
[class*="dashboard"] [class*="metric"]::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, color-mix(in oklch, var(--primary) 12%, transparent), transparent 70%);
  pointer-events: none;
}

/* === 令牌/密钥管理 === */
[class*="keys"] [class*="card"],
[class*="tokens"] [class*="card"] {
  border-left: 3px solid color-mix(in oklch, var(--primary) 40%, transparent) !important;
}

/* === 钱包/充值 === */
[class*="wallet"] [class*="card"],
[class*="topup"] [class*="card"],
[class*="billing"] [class*="card"] {
  background: linear-gradient(135deg, var(--card), color-mix(in oklch, var(--primary) 4%, var(--card))) !important;
}

/* === 模型广场 === */
[class*="pricing"] [class*="card"],
[class*="models"] [class*="card"] {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[class*="pricing"] [class*="card"]:hover,
[class*="models"] [class*="card"]:hover {
  border-color: var(--primary) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px -8px color-mix(in oklch, var(--primary) 25%, transparent) !important;
}

/* === 使用日志表格 === */
[class*="usage-logs"] [class*="table"],
[class*="logs"] [class*="table"] {
  font-size: 0.82rem !important;
}

/* === 用户管理 === */
[class*="users"] [class*="table"] [class*="avatar"] {
  border: 2px solid color-mix(in oklch, var(--primary) 30%, transparent) !important;
}

/* === 系统设置 === */
[class*="system-settings"] [class*="card"] {
  border-radius: 12px !important;
}

[class*="system-settings"] label {
  font-weight: 500 !important;
  color: var(--foreground) !important;
}

/* === Switch 开关 === */
[class*="switch"] [class*="thumb"] {
  transition: all 0.2s ease !important;
}

[class*="switch"][data-state="checked"] {
  background: var(--primary) !important;
}

/* === 进度条 === */
[class*="progress"] [class*="indicator"] {
  background: linear-gradient(90deg, var(--primary), var(--shheng-accent)) !important;
  border-radius: 4px !important;
}

/* === 工具提示 === */
[class*="tooltip-content"] {
  background: var(--popover) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: 0.75rem !important;
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.15) !important;
}

/* === 空状态 === */
[class*="empty"],
[class*="no-data"] {
  color: var(--muted-foreground) !important;
  opacity: 0.7;
}

/* === 分页 === */
[class*="pagination"] button {
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}

[class*="pagination"] button:hover {
  background: color-mix(in oklch, var(--primary) 10%, transparent) !important;
}

[class*="pagination"] button[aria-current="page"],
[class*="pagination"] button.active {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

/* === 通知/告警 === */
[class*="alert"] {
  border-radius: 10px !important;
  border-left-width: 3px !important;
}

[class*="alert-info"], [class*="alert-default"] {
  border-left-color: var(--primary) !important;
  background: color-mix(in oklch, var(--primary) 5%, var(--card)) !important;
}

[class*="alert-success"] {
  border-left-color: oklch(0.60 0.18 150) !important;
}

[class*="alert-warning"] {
  border-left-color: oklch(0.75 0.18 85) !important;
}

[class*="alert-destructive"], [class*="alert-error"] {
  border-left-color: var(--destructive) !important;
}

/* === 代码块 === */
pre, code, [class*="code-block"] {
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace !important;
  font-size: 0.82rem !important;
}

pre {
  background: color-mix(in oklch, var(--background) 80%, var(--card)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}

/* === 面包屑 === */
[class*="breadcrumb"] [class*="item"] {
  font-size: 0.82rem !important;
  transition: color 0.15s ease !important;
}

[class*="breadcrumb"] [class*="item"]:hover {
  color: var(--primary) !important;
}

/* === 折叠面板 === */
[class*="accordion"] [class*="item"] {
  border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent) !important;
}

[class*="accordion"] [class*="trigger"]:hover {
  color: var(--primary) !important;
}

/* === 主题切换按钮 === */
[class*="theme-switch"] button {
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

[class*="theme-switch"] button:hover {
  background: color-mix(in oklch, var(--primary) 12%, transparent) !important;
  transform: rotate(15deg);
}

/* === 用户头像下拉 === */
[class*="profile-dropdown"] [class*="avatar"] {
  border: 2px solid color-mix(in oklch, var(--primary) 35%, transparent) !important;
  transition: all 0.2s ease !important;
}

[class*="profile-dropdown"] [class*="avatar"]:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 15%, transparent) !important;
}

/* === 通知弹窗 === */
[class*="notification"] [class*="popover-content"] {
  width: 360px !important;
  max-height: 480px !important;
  overflow-y: auto;
}

/* === 通用动画 === */
@keyframes shheng-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

[class*="page-content"],
[class*="page-container"] {
  animation: shheng-fade-in 0.3s ease;
}

/* === 选中文字 === */
::selection {
  background: color-mix(in oklch, var(--primary) 25%, transparent);
  color: var(--foreground);
}

/* === 链接 === */
a {
  transition: color 0.15s ease !important;
}

a:hover {
  color: var(--primary) !important;
}

/* === 移动端适配 === */
@media (max-width: 768px) {
  [class*="card"] {
    border-radius: 10px !important;
  }

  [class*="dialog-content"],
  [class*="modal-content"] {
    border-radius: 12px !important;
    margin: 8px !important;
  }

  [class*="table"] {
    font-size: 0.78rem !important;
  }
}

/* === 骨架屏 === */
[class*="skeleton"] {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--muted) 60%, transparent) 25%,
    color-mix(in oklch, var(--muted) 80%, transparent) 50%,
    color-mix(in oklch, var(--muted) 60%, transparent) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: skeleton-shimmer 1.5s ease infinite !important;
  border-radius: 6px !important;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}