/* ============================================================================
   宝瓶 · 深空主题 v2  —— 纯设计变量驱动（与应用自身 CSS 变量对齐，全站一致）
   原理：应用所有卡片/文字/背景都读取 --bg / --card-bg / --text 等变量，
        我们只重新定义这些变量 + 少量增强，即可全站统一深色化，绝不白底白字。
   ============================================================================ */

:root,
html,
body {
  /* ---- 基础面板 ---- */
  --bg: #0a0816 !important;                 /* 页面深空底 */
  --card-bg: #15122b !important;            /* 卡片底 */
  --text: #f1edff !important;               /* 主文字 */
  --text-light: #9f97c6 !important;         /* 次要文字 */
  --border: rgba(255,255,255,.10) !important;
  --radius: 18px !important;
  --radius-sm: 12px !important;

  /* ---- 把"浅粉"档位重映射成深色（这些原本是浅底，深色下必须压暗）---- */
  --pink-50:  #181231 !important;           /* 表头/输入底/标签底 */
  --pink-100: #1f1840 !important;
  --pink-200: #2a2057 !important;
  --pink-300: #6b4cff !important;           /* 边框/强调（偏紫）*/

  /* ---- 这些是"强调色"，保持鲜艳（按钮/价格/渐变）---- */
  --pink-400: #ff6cb0 !important;
  --pink-500: #ff4d8a !important;
  --pink-600: #ec3a86 !important;
  --pink-700: #ff7eb1 !important;           /* 深色下点缀文字调亮 */
  --pink-800: #ffa0c8 !important;
  --pink-900: #ffc2dc !important;

  --pink-gradient: linear-gradient(135deg,#2a2057 0%,#3a2570 50%,#4a2b85 100%) !important;
  --pink-gradient-bold: linear-gradient(135deg,#ff4d8a 0%,#c641b0 50%,#7b5bff 100%) !important;
  --pink-shadow: 0 4px 14px rgba(0,0,0,.4) !important;
  --pink-shadow-lg: 0 18px 44px -18px rgba(123,91,255,.5) !important;
}

/* ---- 全站底：深空渐变 + 极光 ---- */
body {
  background:
    radial-gradient(1100px 750px at 16% 6%, rgba(123,91,255,.28) 0%, transparent 58%),
    radial-gradient(900px 700px at 96% 8%, rgba(61,240,255,.14) 0%, transparent 55%),
    radial-gradient(1000px 800px at 50% 108%, rgba(255,77,138,.22) 0%, transparent 60%),
    linear-gradient(180deg,#0a0816 0%,#0e0a22 55%,#0a0816 100%) !important;
  background-attachment: fixed !important;
  color: var(--text) !important;
}

/* 透明化容器层，让底色透出 */
#app, .layout, .main-content, main, .content, .app-content { background: transparent !important; }

/* ---- 侧边栏：玻璃深色 ---- */
.sidebar, aside.sidebar {
  background: linear-gradient(180deg, rgba(21,18,43,.92) 0%, rgba(14,10,34,.92) 100%) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(14px) saturate(150%);
}
.sidebar a, .sidebar .menu-item, .sidebar span, .sidebar div { color: var(--text-light) !important; }
.sidebar a:hover, .sidebar .menu-item:hover {
  background: rgba(255,255,255,.05) !important;
  color: #fff !important;
}
/* 侧栏选中：玫粉光条 */
.sidebar .router-link-active, .sidebar a.active, .sidebar .menu-item.active {
  background: linear-gradient(90deg, rgba(255,77,138,.18) 0%, rgba(123,91,255,.08) 100%) !important;
  color: #fff !important;
  position: relative;
}
.sidebar .router-link-active::before, .sidebar a.active::before, .sidebar .menu-item.active::before {
  content:""; position:absolute; left:0; top:16%; bottom:16%; width:3px;
  background: linear-gradient(180deg,#ff4d8a,#7b5bff);
  border-radius: 0 4px 4px 0; box-shadow: 0 0 12px rgba(255,77,138,.7);
}

/* ---- 卡片：实色深底（杜绝白色透出）+ 最高优先级压制 Devin 的 !important ---- */
html body .card,
html body .stat-card,
html body .plan-card,
html body .rc-custom-card,
html body div[class*="card"],
html body .panel,
html body .box,
html body .mobile-card-list,
html body .mobile-token-item {
  background-color: #16132e !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 100%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 16px 40px -18px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06) !important;
  color: var(--text) !important;
  transition: transform .28s, box-shadow .28s, border-color .28s !important;
}
/* 嵌套卡片（卡里套卡）用更亮一档，避免一片死黑 */
html body .card .card,
html body .card .stat-card,
html body .card .plan-card {
  background-color: #1c1840 !important;
}
html body .card:hover,
html body .stat-card:hover,
html body .plan-card:hover,
html body .rc-custom-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255,77,138,.35) !important;
  box-shadow: 0 30px 60px -20px rgba(123,91,255,.45), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* 客服/QQ 等小药丸、移动导航：压成深色 */
html body .support-pill,
html body .mobile-nav,
html body .pill,
html body .chip {
  background-color: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #fff !important;
}

/* ---- KPI / 余额 大数字：渐变 ---- */
.stat-card .stat-value, .stat-value, .stat-card h2, .stat-card .value,
.stat-card strong, .stat-card b {
  background: linear-gradient(135deg,#fff 0%,#ff80b8 55%,#7b5bff 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important;
  font-weight: 900 !important;
}

/* ---- 输入框 ---- */
input, select, textarea {
  background: rgba(255,255,255,.04) !important;
  border: 1.5px solid rgba(255,255,255,.10) !important;
  color: #fff !important;
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,.32) !important; }
input:focus, select:focus, textarea:focus {
  border-color: var(--pink-500) !important;
  background: rgba(255,77,138,.08) !important;
  box-shadow: 0 0 0 4px rgba(255,77,138,.14) !important; outline: none !important;
}

/* ---- 主按钮 ---- */
.btn-primary, button.btn-primary, .btn.btn-primary {
  background: var(--pink-gradient-bold) !important;
  border: 0 !important; color: #fff !important;
  box-shadow: 0 12px 26px -10px rgba(255,77,138,.55), inset 0 1px 0 rgba(255,255,255,.25) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.btn-primary:hover { transform: translateY(-2px) !important;
  box-shadow: 0 18px 34px -10px rgba(123,91,255,.6), inset 0 1px 0 rgba(255,255,255,.35) !important; }

/* 次按钮（outline） */
.btn-outline {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: var(--pink-700) !important;
}
.btn-outline:hover { background: rgba(255,77,138,.12) !important; border-color: var(--pink-500) !important; color:#fff !important; }

/* ---- 表格 ---- */
table { background: transparent !important; }
table th, th { background: rgba(123,91,255,.14) !important; color:#9be9ff !important;
  border-color: rgba(255,255,255,.08) !important; }
table td, td { color: var(--text) !important; border-color: rgba(255,255,255,.06) !important; }
table tbody tr:hover { background: rgba(255,77,138,.06) !important; }

/* ---- 套餐卡价格巨号 + 顶部彩条 ---- */
.plan-card { position: relative; }
.plan-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg,#ff4d8a,#7b5bff,#3df0ff); border-radius: var(--radius) var(--radius) 0 0; }
.plan-card .price, .plan-card .amount, .plan-card [class*="price"] {
  background: linear-gradient(135deg,#ffd86b,#ff8e5a) !important;
  -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important;
  font-weight: 900 !important;
}

/* ---- 顶栏按钮（客服 QQ / QQ 群）---- */
.topbar button, header button, .app-header button {
  background: rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.12) !important;
  color:#fff !important; border-radius:999px !important; backdrop-filter: blur(8px);
}
.topbar button:hover { background: rgba(255,77,138,.15) !important; border-color: rgba(255,77,138,.6) !important; }

/* ---- 滚动条 ---- */
::-webkit-scrollbar{ width:10px;height:10px }
::-webkit-scrollbar-track{ background: rgba(255,255,255,.02) }
::-webkit-scrollbar-thumb{ background: linear-gradient(180deg,#7b5bff,#ff4d8a); border-radius:99px }

/* ---- 卡片淡入 ---- */
@keyframes bp-fade{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.card, .stat-card, .plan-card { animation: bp-fade .4s ease-out both; }

/* ============================================================================
   宝瓶 · 深空主题 · 补丁 v3  —— 修复"没改到"的地方
   追加在 baoping-theme.css 之后加载（优先级更高）
   ============================================================================ */

/* ---- 1. 奖励页：白色"奖池"提示框 ---- */
html body .lottery-tip{
  background: rgba(255,150,70,.12) !important;
  border: 1px solid rgba(255,175,90,.32) !important;
  color: #ffdcb8 !important;
}

/* ---- 2. 模型定价页：浅色彩标签（输入/输出/缓存）→ 半透明深底 + 亮字 ---- */
html body .tag.tag-green{
  background: rgba(52,211,153,.16) !important; color:#86f0c4 !important;
  border:1px solid rgba(52,211,153,.32) !important;
}
html body .tag.tag-yellow{
  background: rgba(250,204,21,.16) !important; color:#ffe488 !important;
  border:1px solid rgba(250,204,21,.32) !important;
}
html body .tag.tag-purple{
  background: rgba(167,139,250,.18) !important; color:#d2c0ff !important;
  border:1px solid rgba(167,139,250,.36) !important;
}
/* 兜底：任意浅底 tag */
html body .tag[class*="tag-"]{ backdrop-filter: none !important; }

/* ---- 3. 顶栏搜索框 / 任何残留白底输入控件 ---- */
html body header input,
html body .topbar input,
html body input[type="search"],
html body .search input,
html body .search-box input,
html body [class*="search" i] input,
html body .filter input,
html body [class*="filter" i] input{
  background: rgba(255,255,255,.05) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
html body header input::placeholder,
html body [class*="search" i] input::placeholder{ color: rgba(255,255,255,.35) !important; }

/* select 下拉 + 其选项 */
html body select, html body select option{
  background: #15122b !important; color: #f1edff !important;
}

/* ---- 4. 顶栏右侧"加入 QQ 群"等浅色胶囊按钮 ---- */
html body [class*="qq" i],
html body [class*="group" i].btn,
html body .join-group,
html body .qq-group{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
}

/* ---- 5. 奖励页低对比区块文字提亮（邀请赚佣金 / 用量返佣） ---- */
html body .invite-card, html body .invite-card *,
html body .rebate-card, html body .rebate-card *,
html body [class*="invite" i] *,
html body [class*="rebate" i] *,
html body [class*="referral" i] *{
  color: #d9d2f5 !important;
}
/* 这些区块里的小标题用亮粉 */
html body [class*="invite" i] h2, html body [class*="invite" i] h3, html body [class*="invite" i] h4,
html body [class*="rebate" i] h2, html body [class*="rebate" i] h3{
  color: #ff9bc6 !important;
}

/* ---- 6. 通用兜底：纯白底块统一压暗（避免漏网）---- */
html body div[style*="background: #fff"],
html body div[style*="background:#fff"],
html body div[style*="background-color: #fff"],
html body div[style*="background-color:#fff"],
html body div[style*="background: rgb(255, 255, 255)"]{
  background: #16132e !important;
  color: #f1edff !important;
}

/* ---- 7. 整页背景兜底：html 也铺深色（防止长页面底部露白）---- */
html{ background:#0a0816 !important; }

/* ---- 8. 充值页 recharge.html 专项（独立静态页，内联硬编码了 #fff）---- */
html body .rc-amt-input{
  background: rgba(255,255,255,.05) !important; color:#fff !important;
  border:2px solid rgba(255,255,255,.14) !important;
}
html body .rc-amt-input:focus{ border-color: var(--pink-500) !important; background: rgba(255,77,138,.08) !important; }
html body .rc-quick button{
  background: rgba(255,255,255,.05) !important; color:#ffb3d1 !important;
  border:1px solid rgba(255,255,255,.14) !important;
}
html body .rc-quick button:hover{ background: rgba(255,77,138,.16) !important; color:#fff !important; }
html body .rc-modal-card{ background:#15122b !important; }
html body .rc-modal-close{ background: rgba(255,255,255,.10) !important; color:#fff !important; }
html body .plan-price .cur, html body .plan-price .amt{ color:#ffd86b !important; }
html body .plan-price .orig{ color:#9f97c6 !important; }
html body .plan-name, html body .group-title{ color:#f5f0ff !important; }
html body .recharge-intro, html body .plan-desc, html body .rc-arrive, html body .empty-box{ color:#b8aed6 !important; }
html body .plan-features li{ color:#e8e2fb !important; }
html body .sidebar-logo span{
  background:linear-gradient(135deg,#ff6cd2,#a672ff) !important;
  -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important;
  font-weight:800 !important;
}

/* ---- 9. 对接教程 docs.html：白色 tab 与 Q&A 框 ---- */
html body .os-tab{
  background: rgba(255,255,255,.06) !important; color:#ffb3d1 !important;
  border:1px solid rgba(255,255,255,.14) !important;
}
html body .os-tab.active, html body .os-tab.on, html body .os-tab[aria-selected="true"]{
  background: var(--pink-gradient-bold) !important; color:#fff !important; border-color:transparent !important;
}
html body .faq-item{
  background:#16132e !important; border:1px solid rgba(255,255,255,.10) !important;
  color:#e8e2fb !important;
}
html body .faq-item *{ color:#e8e2fb !important; }
html body .faq-item code, html body .faq-item kbd{
  background:rgba(255,77,138,.14) !important; color:#ffc2dc !important;
  padding:1px 6px !important; border-radius:6px !important;
}

/* ---- 10. 奖励页抽奖组件(注入的浅色widget)：标题/徽章字提亮 ---- */
html body .lottery-card h2, html body .lottery-section h2,
html body [class*="lottery"] h2, html body [class*="lottery"] h3{
  color:#ffb877 !important;
}
html body .lottery-badge{
  background: rgba(255,150,70,.18) !important; color:#ffd9b0 !important;
  border:1px solid rgba(255,170,90,.30) !important;
}

/* ---- 11. 顶栏"加入QQ群"浅色链接胶囊 ---- */
html body .support-link, html body a.support-pill{
  background: rgba(255,255,255,.07) !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.16) !important;
}
html body .support-link:hover{ background: rgba(255,77,138,.16) !important; border-color: rgba(255,77,138,.5) !important; }

/* ---- 12. 套餐卡内"到账余额"小框（原白底→浅字看不见）---- */
html body .package-metrics,
html body .package-metric,
html body .plan-metrics,
html body .metric-box{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 10px !important;
}
html body .package-metrics span,
html body .package-metrics label,
html body .package-metric span,
html body .plan-metrics span{ color:#c3bbe0 !important; }
html body .package-metrics strong,
html body .package-metrics b,
html body .package-metric strong,
html body .plan-metrics strong{ color:#ffd86b !important; font-weight:800 !important; }

/* ======================================================================
   全站美化 v4 (纯 CSS, 无 JS, 不卡)
   ====================================================================== */

/* --- 1. 登录页：极光背景 + 网格 + 卡片增强 --- */
body:has(input[type=password]):not(:has(aside)):not(:has(.sidebar)):not(:has(.app-sidebar)){
  background:
    radial-gradient(circle at 18% 18%, rgba(123,91,255,.40), transparent 45%),
    radial-gradient(circle at 84% 26%, rgba(61,240,255,.20), transparent 45%),
    radial-gradient(circle at 50% 88%, rgba(255,77,138,.32), transparent 52%),
    linear-gradient(180deg,#070512,#140a2e 55%,#070512) !important;
  position:relative; overflow:hidden;
}
body:has(input[type=password]):not(:has(aside)):not(:has(.sidebar))::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 50% 42%,#000 38%,transparent 72%);
  mask-image:radial-gradient(circle at 50% 42%,#000 38%,transparent 72%);
}

/* --- 2. KPI 卡片分色 + hover 发光 + 数字加大 --- */
.stats-grid .stat-card, .stats-grid > div, .dashboard-stats .stat-card{
  position:relative; overflow:hidden;
  transition:transform .28s, box-shadow .28s, border-color .28s !important;
}
.stats-grid .stat-card::before, .dashboard-stats .stat-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
}
.stats-grid .stat-card:nth-child(1)::before{ background:linear-gradient(90deg,#ffd86b,#ff8e5a) !important; }
.stats-grid .stat-card:nth-child(2)::before{ background:linear-gradient(90deg,#3df0ff,#5b8fff) !important; }
.stats-grid .stat-card:nth-child(3)::before{ background:linear-gradient(90deg,#a672ff,#7b5bff) !important; }
.stats-grid .stat-card:nth-child(4)::before{ background:linear-gradient(90deg,#ff4d8a,#ff6cd2) !important; }
.stats-grid .stat-card:nth-child(1):hover{ box-shadow:0 20px 44px -18px rgba(255,142,90,.5) !important; border-color:rgba(255,200,90,.4) !important; transform:translateY(-4px) !important; }
.stats-grid .stat-card:nth-child(2):hover{ box-shadow:0 20px 44px -18px rgba(61,240,255,.45) !important; border-color:rgba(61,240,255,.4) !important; transform:translateY(-4px) !important; }
.stats-grid .stat-card:nth-child(3):hover{ box-shadow:0 20px 44px -18px rgba(166,114,255,.45) !important; border-color:rgba(166,114,255,.4) !important; transform:translateY(-4px) !important; }
.stats-grid .stat-card:nth-child(4):hover{ box-shadow:0 20px 44px -18px rgba(255,77,138,.5) !important; border-color:rgba(255,77,138,.4) !important; transform:translateY(-4px) !important; }
.stats-grid .stat-card .value, .stats-grid .stat-card .stat-value{
  font-size:clamp(26px,2.3vw,36px) !important; font-weight:900 !important; letter-spacing:-.5px !important;
}

/* --- 3. 表格隔行 + 平滑 hover --- */
table tbody tr:nth-child(even){ background:rgba(255,255,255,.018) !important; }
table tbody tr{ transition:background .15s !important; }

/* --- 4. 按钮 hover 微光泽 + 统一过渡 --- */
button, .btn, a.btn{ transition:transform .18s, box-shadow .18s, filter .18s !important; }
.btn-primary:hover, button.btn-primary:hover{ filter:brightness(1.08) !important; }

/* --- 5. 卡片淡入 + 统一圆角阴影微调 --- */
@keyframes bp-rise{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
.card, .stat-card, .plan-card, .package-card, .subscription-section{ animation:bp-rise .45s ease-out both; }

/* --- 6. 顶栏品牌区/页面标题渐变强调 --- */
.page-header h2, .page-title, h1.title{
  background:linear-gradient(135deg,#fff,#ffb3d1 70%) !important;
  -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important;
}

/* --- 7. 链接/强调色 hover 辉光 --- */
a:hover{ text-shadow:0 0 8px rgba(255,77,138,.35); }