/* ============================================================
   novapi theme.css — Coinbase 风格皮肤(注入 sub2api)
   设计合同:docs/theme-reskin.md(画布纯白 / 唯一品牌蓝 #0052ff
   / active #003ecc / CTA pill / 绿红只做状态)
   目标:覆盖 sub2api Tailwind 主色 teal → Coinbase Blue
   ============================================================ */

:root {
  --nv-brand: #0052ff;          /* 唯一品牌电压 */
  --nv-brand-active: #003ecc;   /* CTA active/hover */
  --nv-brand-soft: #e9f0ff;     /* 品牌蓝浅底(选中态背景) */
  --nv-brand-on-dark: #6b9fff;  /* 暗色下的品牌文字 */
  --nv-ink: #0a0b0d;
  --nv-success: #047a4c;        /* 合同状态绿(浅色加严) */
  --nv-danger: #cf202f;
}

/* ---------- 主色:teal primary 全档位 → Coinbase Blue ---------- */
.bg-primary-400, .bg-primary-500, .bg-primary-600, .bg-primary-700 {
  background-color: var(--nv-brand) !important;
}
.hover\:bg-primary-500:hover, .hover\:bg-primary-600:hover, .hover\:bg-primary-700:hover {
  background-color: var(--nv-brand-active) !important;
}
.active\:bg-primary-700:active {
  background-color: var(--nv-brand-active) !important;
}
.text-primary-500, .text-primary-600, .text-primary-700 {
  color: var(--nv-brand) !important;
}
.hover\:text-primary-500:hover, .hover\:text-primary-600:hover, .hover\:text-primary-700:hover {
  color: var(--nv-brand-active) !important;
}
.border-primary-400, .border-primary-500, .border-primary-600, .border-primary-700 {
  border-color: var(--nv-brand) !important;
}
.ring-primary-500, .ring-primary-600,
.focus\:ring-primary-500:focus, .focus\:ring-primary-600:focus {
  --tw-ring-color: var(--nv-brand) !important;
}
.stroke-primary-500, .stroke-primary-600, .fill-primary-500, .fill-primary-600 {
  stroke: var(--nv-brand) !important;
  fill: var(--nv-brand) !important;
}
.from-primary-400, .from-primary-500, .from-primary-600 { --tw-gradient-from: var(--nv-brand) !important; }
.via-primary-500 { --tw-gradient-stops: var(--nv-brand) !important; }
.to-primary-500, .to-primary-600 { --tw-gradient-to: var(--nv-brand-active) !important; }

/* 品牌浅底(选中/高亮背景) */
.bg-primary-50, .bg-primary-100 {
  background-color: var(--nv-brand-soft) !important;
}
.text-primary-50, .text-primary-100, .text-primary-200, .text-primary-300, .text-primary-400 {
  color: var(--nv-brand-on-dark) !important;
}

/* 暗色模式(darkMode: class)下的同语义覆盖 */
.dark .bg-primary-400, .dark .bg-primary-500, .dark .bg-primary-600, .dark .bg-primary-700 {
  background-color: var(--nv-brand) !important;
}
.dark .text-primary-300, .dark .text-primary-400, .dark .text-primary-500, .dark .text-primary-600 {
  color: var(--nv-brand-on-dark) !important;
}

/* ---------- CTA pill:主色填充按钮一律胶囊形 ---------- */
button[class*="bg-primary"],
a[class*="bg-primary"] {
  border-radius: 9999px !important;
}

/* ---------- .btn-primary 组件类(@apply 渐变内联在类里,必须直接覆盖) ---------- */
.btn-primary {
  background-image: none !important;
  background-color: var(--nv-brand) !important;
  border-color: var(--nv-brand) !important;
  box-shadow: none !important;
  border-radius: 9999px !important;
}
.btn-primary:hover, .btn-primary:focus-visible {
  background-image: none !important;
  background-color: var(--nv-brand-active) !important;
  border-color: var(--nv-brand-active) !important;
}
.btn-primary:disabled {
  background-color: #a8b8cc !important;   /* 合同:primary-disabled */
  border-color: #a8b8cc !important;
}

/* ---------- 兜底:原生 teal/cyan 工具类全档 → 品牌蓝 ---------- */
.bg-teal-400, .bg-teal-500, .bg-teal-600, .bg-teal-700,
.bg-cyan-400, .bg-cyan-500, .bg-cyan-600, .bg-cyan-700 {
  background-color: var(--nv-brand) !important;
}
.hover\:bg-teal-500:hover, .hover\:bg-teal-600:hover, .hover\:bg-teal-700:hover,
.hover\:bg-cyan-500:hover, .hover\:bg-cyan-600:hover, .hover\:bg-cyan-700:hover {
  background-color: var(--nv-brand-active) !important;
}
.text-teal-300, .text-teal-400, .text-teal-500, .text-teal-600, .text-teal-700,
.text-cyan-400, .text-cyan-500, .text-cyan-600, .text-cyan-700 {
  color: var(--nv-brand) !important;
}
.dark .text-teal-300, .dark .text-teal-400, .dark .text-teal-500, .dark .text-teal-600,
.dark .text-cyan-400, .dark .text-cyan-500, .dark .text-cyan-600 {
  color: var(--nv-brand-on-dark) !important;
}
.border-teal-400, .border-teal-500, .border-teal-600,
.border-cyan-400, .border-cyan-500, .border-cyan-600 {
  border-color: var(--nv-brand) !important;
}
.from-teal-400, .from-teal-500, .from-teal-600, .from-teal-700,
.from-cyan-400, .from-cyan-500, .from-cyan-600 {
  --tw-gradient-from: var(--nv-brand) !important;
}
.to-teal-500, .to-teal-600, .to-teal-700,
.to-cyan-500, .to-cyan-600, .to-cyan-700 {
  --tw-gradient-to: var(--nv-brand-active) !important;
}

/* 无档位变体(部分组件直接用 text-primary / bg-primary) */
.text-primary { color: var(--nv-brand) !important; }
.dark .text-primary { color: var(--nv-brand-on-dark) !important; }
.bg-primary { background-color: var(--nv-brand) !important; }
.border-primary { border-color: var(--nv-brand) !important; }

/* ---------- .text-gradient 组件类(登录页站名等,@apply 渐变内联) ---------- */
.text-gradient {
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--nv-brand) !important;
}
.dark .text-gradient { color: var(--nv-brand-on-dark) !important; }

/* ---------- 暗色变体兜底(dark: 前缀类特异性 0-2-0,必须对齐) ---------- */
.dark .bg-teal-400, .dark .bg-teal-500, .dark .bg-teal-600, .dark .bg-teal-700,
.dark .bg-cyan-400, .dark .bg-cyan-500, .dark .bg-cyan-600, .dark .bg-cyan-700 {
  background-color: var(--nv-brand) !important;
}
.dark .hover\:bg-teal-500:hover, .dark .hover\:bg-teal-600:hover, .dark .hover\:bg-teal-700:hover,
.dark .hover\:bg-cyan-500:hover, .dark .hover\:bg-cyan-600:hover, .dark .hover\:bg-cyan-700:hover {
  background-color: var(--nv-brand-active) !important;
}
.dark .border-teal-400, .dark .border-teal-500, .dark .border-teal-600,
.dark .border-cyan-400, .dark .border-cyan-500, .dark .border-cyan-600 {
  border-color: var(--nv-brand) !important;
}
.dark .from-teal-400, .dark .from-teal-500, .dark .from-teal-600, .dark .from-teal-700,
.dark .from-cyan-400, .dark .from-cyan-500, .dark .from-cyan-600 {
  --tw-gradient-from: var(--nv-brand) !important;
}
.dark .to-teal-500, .dark .to-teal-600, .dark .to-teal-700,
.dark .to-cyan-500, .dark .to-cyan-600, .dark .to-cyan-700 {
  --tw-gradient-to: var(--nv-brand-active) !important;
}
.dark .hover\:text-teal-500:hover, .dark .hover\:text-teal-600:hover, .dark .hover\:text-teal-700:hover,
.dark .hover\:text-cyan-500:hover, .dark .hover\:text-cyan-600:hover {
  color: var(--nv-brand-on-dark) !important;
}

/* ---------- emerald/green 家族:合同语义色统一 ----------
   绿只做状态文字:浅色 #047a4c(对比加严)/ 暗色 #05b169;
   浅绿底板(图标座/快捷卡)一律换品牌浅蓝,消除青感 */
[class*="text-emerald-"], [class*="text-green-"] {
  color: #047a4c !important;
}
.dark [class*="text-emerald-"], .dark [class*="text-green-"] {
  color: #05b169 !important;
}
.bg-emerald-50, .bg-emerald-100, .bg-green-50, .bg-green-100 {
  background-color: var(--nv-brand-soft) !important;
}
[class*="bg-emerald-9"], [class*="bg-green-9"] {
  background-color: rgba(0, 82, 255, 0.12) !important;
}

/* ---------- 自定义组件类:导航进度条 + mesh 网格背景(teal 内联渐变) ---------- */
.navigation-progress-bar {
  background-image: linear-gradient(90deg, rgba(0, 82, 255, 0) 0%, #0052ff 20%, #003ecc 50%, #0052ff 80%, rgba(0, 82, 255, 0) 100%) !important;
}
.bg-mesh-gradient {
  background-image:
    radial-gradient(at 40% 20%, rgba(0, 82, 255, 0.10) 0px, rgba(0, 0, 0, 0) 50%),
    radial-gradient(at 80% 0%, rgba(107, 159, 255, 0.08) 0px, rgba(0, 0, 0, 0) 50%) !important;
}

/* ---------- 侧边栏激活态组件类(浅色下内联 teal) ---------- */
.sidebar-link-active,
.sidebar-link-active .sidebar-label {
  color: var(--nv-brand) !important;
  background-color: var(--nv-brand-soft) !important;
}
.sidebar-link-active svg {
  color: var(--nv-brand) !important;
}
.sidebar-link:hover {
  color: var(--nv-brand) !important;
}

/* ---------- badge 徽章组件类 ---------- */
.badge-primary {
  color: var(--nv-brand) !important;
  background-color: var(--nv-brand-soft) !important;
}
.badge-success {
  color: #047a4c !important;
  background-color: #f7f7f7 !important;
}

/* ---------- primary 800/900 档位与浅档渐变(此前只盖了 500-700) ---------- */
.text-primary-800, .text-primary-900 { color: var(--nv-brand-active) !important; }
.dark .text-primary-800, .dark .text-primary-900 { color: var(--nv-brand-on-dark) !important; }
.from-primary-50, .from-primary-100 { --tw-gradient-from: var(--nv-brand-soft) !important; }
.to-primary-50, .to-primary-100 { --tw-gradient-to: #ffffff !important; }
.border-primary-100 { border-color: var(--nv-brand-soft) !important; }
/* 精确匹配 50/100 档;不能用子串匹配——会误伤 bg-primary-500(toggle 关闭轨道) */
.bg-primary-50, .bg-primary-100 {
  background-color: var(--nv-brand-soft) !important;
}
[class*="bg-primary-50/"], [class*="bg-primary-100/"] {
  background-color: var(--nv-brand-soft) !important;
}

/* ---------- 系统设置页 tab 组件类(侧边栏同族) ---------- */
.settings-tab-active, .settings-tab-active .settings-tab-label {
  color: var(--nv-brand) !important;
}
.settings-tab-icon {
  color: var(--nv-brand) !important;
  background-color: var(--nv-brand-soft) !important;
}
.settings-tab-icon svg { color: var(--nv-brand) !important; }

/* ---------- 暗色模式:浅蓝实底全部换半透明品牌蓝(避免暗底上的亮块) ---------- */
.dark .sidebar-link-active, .dark .sidebar-link-active .sidebar-label {
  background-color: rgba(0, 82, 255, 0.16) !important;
  color: var(--nv-brand-on-dark) !important;
}
.dark .settings-tab-icon { background-color: rgba(0, 82, 255, 0.16) !important; }
.dark .badge-primary { background-color: rgba(0, 82, 255, 0.16) !important; }
.dark .badge-success { background-color: rgba(255, 255, 255, 0.08) !important; }
.dark [class*="bg-primary-50"], .dark [class*="bg-primary-100"] {
  background-color: rgba(0, 82, 255, 0.12) !important;
}
.dark .bg-emerald-50, .dark .bg-emerald-100, .dark .bg-green-50, .dark .bg-green-100,
.dark [class*="bg-emerald-1"], .dark [class*="bg-green-1"] {
  background-color: rgba(0, 82, 255, 0.12) !important;
}

/* ---------- 状态色只做状态(涨跌/成功/危险文字) ---------- */
.text-emerald-500, .text-green-500, .text-green-600 { color: var(--nv-success) !important; }
.text-red-500, .text-red-600 { color: var(--nv-danger) !important; }

/* ---------- 字体:Inter 优先,中文回退不可删(44d2efd 教训) ---------- */
html, body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Display 字距:合同标志性负字距(权重不动,避免压掉 UI 标题层级) ---------- */
h1, h2 {
  letter-spacing: -0.015em;
}