/* ============================================================
   GEO V4.5 Agent — 主题变量与全局样式
   Aesthetic Direction: Deep Tech-Noir / Oceanic Emerald
   色彩体系：深海靛青底 + 翡翠青绿主 + 琥珀金点缀 + 珊瑚警告
   ============================================================ */

:root {
  /* ---------- 色彩体系 (15 色阶) ---------- */
  /* 背景层 */
  --color-bg-deep: #0a1628;           /* 最底层 - 午夜深海 */
  --color-bg-primary: #0f1e35;        /* 主背景 - 深蓝灰 */
  --color-bg-secondary: #162a47;      /* 卡片底 - 钢蓝 */
  --color-bg-elevated: #1d3557;       /* 悬浮层 - 升阶蓝 */
  --color-bg-glass: rgba(29, 53, 87, 0.55);  /* 玻璃拟态底 */

  /* 主色系 - 柔和森林绿 (#51a256) */
  --color-primary-50: #eaf4ec;           /* 最浅 */
  --color-primary-200: #86c98c;
  --color-primary-400: #51a256;
  --color-primary-500: #3d8f42;         /* 主色 */
  --color-primary-600: #2f7034;
  --color-primary-700: #245627;

  /* 点缀色 - 琥珀金 */
  --color-accent-amber: #f4b942;
  --color-accent-amber-soft: rgba(244, 185, 66, 0.15);

  /* 语义色 */
  --color-semantic-success: #51a256;     /* 柔和森林绿 */
  --color-semantic-success-bg: rgba(81, 162, 86, 0.15);
  --color-semantic-info: #38bdf8;      /* 天空蓝 */
  --color-semantic-info-bg: rgba(56, 189, 248, 0.12);
  --color-semantic-warning: #fbbf24;   /* 琥珀 */
  --color-semantic-warning-bg: rgba(251, 191, 36, 0.15);
  --color-semantic-danger: #f87171;    /* 朱砂红 */
  --color-semantic-danger-bg: rgba(248, 113, 113, 0.15);

  /* 文字色 */
  --color-text-primary: #f1f5f9;       /* 主文本 - 近白 */
  --color-text-secondary: #94a3b8;     /* 次文本 - 冷灰 */
  --color-text-tertiary: #64748b;      /* 弱文本 - 灰蓝 */
  --color-text-inverse: #0a1628;       /* 反色文本 */
  --color-text-brand: #86c98c;          /* 品牌强调字 */

  /* 边框/分割线 */
  --color-border-subtle: rgba(148, 163, 184, 0.1);
  --color-border-normal: rgba(148, 163, 184, 0.18);
  --color-border-strong: rgba(81, 162, 86, 0.3);
  --color-border-glow: rgba(81, 162, 86, 0.55);

  /* 组件通用底色（消除 components.css 硬编码） */
  --color-comp-bg-subtle: rgba(148, 163, 184, 0.08);   /* 次按钮/关闭按钮/kanban计数 hover 底 */
  --color-comp-bg-elevated: rgba(148, 163, 184, 0.12); /* 进度条底/胶囊底 */
  --color-comp-header: rgba(29, 53, 87, 0.55);          /* 表头深色底 */
  --color-comp-dark-panel: rgba(10, 22, 40, 0.6);       /* hero-input / modal-footer 深色面板 */

  /* 图表色板 (8 色) */
  --chart-1: #3d8f42;                    /* 主绿 */
  --chart-2: #51a256;                    /* 森林绿 */
  --chart-3: #fbbf24;                    /* 琥珀 */
  --chart-4: #a78bfa;
  --chart-5: #f87171;
  --chart-6: #f4b942;
  --chart-7: #38bdf8;
  --chart-8: #e879f9;

  /* ---------- 字体体系 ---------- */
  /* 显示字体：Playfair Display (优雅衬线，英文标题)
     正文字体："Source Han Sans CN" / "Noto Sans SC" (思源黑体中文)
     回退链：系统通用无衬线 */
  --font-display: "Playfair Display", "Cormorant Garamond", "Source Han Serif CN",
                  "Noto Serif SC", Georgia, "Times New Roman", serif;
  --font-body: "Source Han Sans CN", "Noto Sans SC", "PingFang SC",
               "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Source Code Pro",
               Consolas, Menlo, monospace;

  /* ---------- 字号体系 ---------- */
  --fs-display-1: 48px;   /* 主标题 / Hero 数字 */
  --fs-display-2: 36px;   /* 次级大数字 */
  --fs-h1: 28px;          /* 页面标题 */
  --fs-h2: 22px;          /* 区块标题 */
  --fs-h3: 18px;          /* 卡片标题 */
  --fs-body-lg: 16px;     /* 正文大 */
  --fs-body: 14px;        /* 正文标准 */
  --fs-body-sm: 13px;     /* 正文小 / 辅助 */
  --fs-caption: 12px;     /* 标签 / 说明 */
  --fs-micro: 11px;       /* 极细说明 */

  /* 行高字重 */
  --lh-tight: 1.15;
  --lh-normal: 1.55;
  --lh-relaxed: 1.75;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- 间距 (8pt 栅格) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---------- 圆角 ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ---------- 阴影 ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 30px -6px rgba(0, 0, 0, 0.5);
  --shadow-glow-primary: 0 0 24px -4px rgba(134, 201, 140, 0.45);
  --shadow-card-hover: 0 16px 40px -12px rgba(61, 143, 66, 0.35),
                       0 8px 24px -8px rgba(0, 0, 0, 0.55);
  --shadow-glass: inset 0 1px 0 rgba(255,255,255,0.06),
                  0 8px 32px -8px rgba(0,0,0,0.5);

  /* ---------- 过渡 ---------- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-fast: 150ms;
  --dur-normal: 280ms;
  --dur-slow: 520ms;
  --dur-leisure: 900ms;

  /* ---------- 布局尺寸 ---------- */
  --topnav-height: 64px;
  --sidebar-width: 240px;
  --breadcrumb-height: 40px;
}

/* ============================================================
   全局重置 & 一屏布局基架
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.01em;
}

/* ============ 页面加载过渡 —— 消除 JS 注入前的布局闪烁 ============
   html.geo-booting 时整页透明（html 在 head 里就能被 JS 访问，
   body 还没解析时 document.body === null，所以挂在 html 上）。
   页面上下文确认后移除该 class，触发 300ms opacity 过渡淡入；数据接口继续异步加载。
   兜底：shared.js 里有 2.5s 强制移除定时器，防止 JS 全挂时永远白屏。 */
html.geo-booting {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;   /* booting 状态下不要过渡，避免瞬间可见 */
}
html {
  transition: opacity 300ms var(--ease-out-expo);
}

/* 加载占位只占内容区，导航和页面标题保持稳定。 */
#pageRoot[data-loading] > :not(.page-header):not(.geo-page-loading) {
  display: none !important;
}
.geo-page-loading { padding: var(--sp-5) 0; }
.geo-loading-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--sp-6); }
.geo-loading-card { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: var(--sp-5); }
.geo-loading-card .skeleton { height: 16px; margin-bottom: 24px; }
.geo-loading-card .skeleton:last-child { margin-bottom: 0; }
.geo-loading-card .skeleton:nth-child(even) { width: 72%; }
.geo-loading-label { color: var(--color-text-tertiary); font-size: var(--fs-caption); margin-bottom: var(--sp-4); }
@media (max-width: 760px) { .geo-loading-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .geo-page-loading .skeleton { animation: none; } }

/* 多层背景氛围：渐变底 + 网格纹理 + 光晕 + 噪点 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse 900px 600px at 88% -10%, rgba(61, 143, 66, 0.18), transparent 60%),
    radial-gradient(ellipse 700px 500px at -10% 110%, rgba(56, 189, 248, 0.14), transparent 55%),
    linear-gradient(160deg, #0a1628 0%, #0f1e35 45%, #0a2030 100%);
}

/* 网格层 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
  pointer-events: none;
}

/* 光晕浮层 (app-container 内) */
.bg-halo {
  position: fixed;
  z-index: -1;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.35;
  pointer-events: none;
  animation: halo-drift 18s ease-in-out infinite alternate;
  /* 防止 600px 圆超出视口后，把 documentElement.scrollHeight 撑大导致"假溢出 / 伪裁剪"误判 */
  contain: layout paint size;
  will-change: transform, opacity;
}
.bg-halo.halo-1 {
  background: var(--color-primary-500);
  top: -150px;
  right: -120px;
  clip-path: inset(0 0 0 0); /* 配合 contain 防止 paint 外溢撑大 scrollHeight */
}
.bg-halo.halo-2 {
  background: #38bdf8;
  bottom: -180px;
  left: -160px;
  animation-delay: -6s;
  clip-path: inset(0 0 0 0);
}
/* NOTE: 坚决不允许 html,body 设置 contain:size —— 会破坏 .app-shell/.content-wrap 的
   grid-template-rows 1fr / calc(100vh) 百分比高度解析链路，导致 .page-scroll 底部
   被 html/body overflow:hidden 裁掉 24~40px（这就是"显示不全"元凶）。bg-halo 的
   尺寸限幅用下面的 max-width/max-height + overflow:hidden 独立解决，不污染祖宗层。*/
.bg-halo {
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
}

@keyframes halo-drift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(40px, -30px) scale(1.12); }
}

/* 选中文字高亮 */
::selection {
  background: var(--color-primary-500);
  color: var(--color-text-inverse);
}

/* 滚动条 (仅内部容器) */
.scroll-area::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.scroll-area::-webkit-scrollbar-track {
  background: transparent;
}
.scroll-area::-webkit-scrollbar-thumb {
  background: var(--color-border-normal);
  border-radius: var(--radius-full);
}
.scroll-area::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-strong);
}

/* 焦点无障碍样式 */
button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-primary-400);
  outline-offset: 2px;
}

/* 通用工具类 */
.display-font { font-family: var(--font-display); }
.text-brand { color: var(--color-text-brand); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-success { color: var(--color-semantic-success); }
.text-warning { color: var(--color-semantic-warning); }
.text-danger { color: var(--color-semantic-danger); }
.text-amber { color: var(--color-accent-amber); }

.mt-auto { margin-top: auto; }
.ml-auto { margin-left: auto; }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }

/* 入场序列动画基类 */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: reveal-enter var(--dur-slow) var(--ease-out-expo) forwards;
}
@keyframes reveal-enter {
  to { opacity: 1; transform: translateY(0); }
}

/* 数字增长动画计数类 - JS 设置 data-count 后触发 */
.count-up { display: inline-block; font-variant-numeric: tabular-nums; }

/* ============================================================
   浅色主题 Paper-White · Jade Accent
   Switch:  <html data-theme="light"> · 保持翡翠绿主色，
   仅背景 / 文字 / 边框 / 阴影 / 光晕做商务纸白反转，不沦为"办公模板"
   ============================================================ */
:root[data-theme="light"] {
  /* 背景层 - 纸张白家族 */
  --color-bg-deep:      #f7f9fb;      /* 底层 · 柔和纸白 */
  --color-bg-primary:   #ffffff;      /* 主背景 · 纯白 */
  --color-bg-secondary: #f1f5f9;      /* 卡片底 · 羽灰 */
  --color-bg-elevated:  #e6ecf3;      /* 悬浮层 · 淡钢灰 */
  --color-bg-glass:     rgba(255,255,255,0.82);

  /* 主色系 - 保持深绿主色，白底更通透 */
  /* 语义色背景调浅 */
  --color-semantic-success-bg: rgba(81, 162, 86, 0.10);
  --color-semantic-info-bg:    rgba(56, 189, 248, 0.10);
  --color-semantic-warning-bg: rgba(251, 191, 36, 0.12);
  --color-semantic-danger-bg:  rgba(248, 113, 113, 0.10);

  /* 文字 - 翻转：深靛青主文本 */
  --color-text-primary:   #0f1e35;     /* 主文本 - 原 bg-primary 反色 */
  --color-text-secondary: #475569;     /* 次文本 - slate-600 */
  --color-text-tertiary:  #94a3b8;     /* 弱文本 - slate-400 */
  --color-text-inverse:   #f1f5f9;     /* 反色 - 白+按钮深色底 */
  --color-text-brand:     #3d8f42;     /* 品牌字 - 主深绿 */

  /* 边框 - 转为浅色半透明 */
  --color-border-subtle: rgba(15, 30, 53, 0.06);
  --color-border-normal: rgba(15, 30, 53, 0.10);
  --color-border-strong: rgba(61, 143, 66, 0.28);
  --color-border-glow:   rgba(61, 143, 66, 0.55);

  /* 组件通用底色 — 浅色 override */
  --color-comp-bg-subtle:   rgba(15, 30, 53, 0.04);   /* 次按钮/关闭按钮/计数 hover 底 */
  --color-comp-bg-elevated: rgba(15, 30, 53, 0.08);   /* 进度条底/胶囊底 */
  --color-comp-header:      #e6ecf3;                   /* 表头：柔和浅钢灰 */
  --color-comp-dark-panel:  #f7f9fb;                   /* hero-input 胶囊：纸白 */
}

/* ---- 浅色 · 背景多层氛围反转 (更亮 更柔和 不抢内容) ---- */
:root[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 900px 600px at 88% -10%, rgba(61, 143, 66, 0.08), transparent 60%),
    radial-gradient(ellipse 700px 500px at -10% 110%, rgba(134, 201, 140, 0.06), transparent 55%),
    linear-gradient(160deg, #fdfefe 0%, #f7f9fb 45%, #eef4f7 100%);
}
:root[data-theme="light"] body::after {
  background-image:
    linear-gradient(rgba(15, 30, 53, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 30, 53, 0.035) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 88%);
}
:root[data-theme="light"] .bg-halo { opacity: 0.22; filter: blur(120px); }
:root[data-theme="light"] .bg-halo.halo-1 { background: #3d8f42; }
:root[data-theme="light"] .bg-halo.halo-2 { background: #38bdf8; }

/* ---- 浅色 · 顶栏 / 侧栏 / 面包屑 反转 ---- */
:root[data-theme="light"] .topnav {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.86) 100%);
  border-bottom: 1px solid var(--color-border-normal);
}
:root[data-theme="light"] .sidebar {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
:root[data-theme="light"] .breadcrumb {
  background: rgba(241, 245, 249, 0.7);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* ---- 浅色 · 顶栏图标按钮底色修正 ---- */
:root[data-theme="light"] .topnav-icon-btn {
  background: rgba(15, 30, 53, 0.04);
  color: var(--color-text-secondary);
}
:root[data-theme="light"] .topnav-icon-btn:hover {
  background: rgba(61, 143, 66, 0.08);
  border-color: var(--color-border-strong);
  color: var(--color-primary-600);
}
:root[data-theme="light"] .user-chip {
  background: rgba(15, 30, 53, 0.04);
}
:root[data-theme="light"] .geo-user-dropdown {
  background: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
}
:root[data-theme="light"] .geo-user-menu-item:hover {
  background: rgba(61, 143, 66, 0.10);
  color: #3d8f42;
}
:root[data-theme="light"] .sidebar-footer {
  background: linear-gradient(135deg,
    rgba(61, 143, 66, 0.09) 0%,
    rgba(56, 189, 248, 0.06) 100%);
}
:root[data-theme="light"] .sidebar-link.active {
  color: #0a1628;
  background: linear-gradient(90deg,
    rgba(61, 143, 66, 0.18) 0%,
    rgba(61, 143, 66, 0.06) 70%,
    transparent 100%);
}
:root[data-theme="light"] .sidebar-link:hover {
  background: rgba(15, 30, 53, 0.04);
}

/* ---- 浅色 · 卡片玻璃态 + 阴影反转（暖色光变投影）---- */
:root[data-theme="light"] .card,
:root[data-theme="light"] .metric-card,
:root[data-theme="light"] .retest-task-card,
:root[data-theme="light"] .wo-card,
:root[data-theme="light"] .entry-quick-card,
:root[data-theme="light"] .owner-card,
:root[data-theme="light"] .asset-card,
:root[data-theme="light"] .compare-card,
:root[data-theme="light"] .conclusion-item,
:root[data-theme="light"] .kanban-col,
:root[data-theme="light"] .hero-input-card,
:root[data-theme="light"] .entry-arch-node {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 18px -6px rgba(15, 30, 53, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
:root[data-theme="light"] .card:hover,
:root[data-theme="light"] .metric-card:hover,
:root[data-theme="light"] .wo-card:hover,
:root[data-theme="light"] .entry-quick-card:hover {
  box-shadow: 0 20px 50px -14px rgba(15, 30, 53, 0.16),
              0 8px 20px -8px rgba(15, 30, 53, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* ---- 浅色 · 滚动条颜色加深 (否则白底上看不见) ---- */
:root[data-theme="light"] .scroll-area::-webkit-scrollbar-thumb,
:root[data-theme="light"] .page-scroll::-webkit-scrollbar-thumb,
:root[data-theme="light"] .entry-wrap::-webkit-scrollbar-thumb {
  background: rgba(15, 30, 53, 0.20);
}
:root[data-theme="light"] .scroll-area::-webkit-scrollbar-thumb:hover,
:root[data-theme="light"] .page-scroll::-webkit-scrollbar-thumb:hover,
:root[data-theme="light"] .entry-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 30, 53, 0.32);
}

/* ---- 浅色 · 表格行条纹色 ---- */
:root[data-theme="light"] .data-table tbody tr:nth-child(even) td {
  background: rgba(15, 30, 53, 0.025);
}
:root[data-theme="light"] .data-table tbody tr:hover td {
  background: rgba(61, 143, 66, 0.06);
}
:root[data-theme="light"] .data-table tbody tr.danger-row td {
  background: rgba(248, 113, 113, 0.05);
}
:root[data-theme="light"] .data-table tbody tr.danger-row:hover td {
  background: rgba(248, 113, 113, 0.10);
}

/* ---- 浅色 · tag 语义色边框柔化 ---- */
:root[data-theme="light"] .tag.tag-auto {
  border-color: rgba(61, 143, 66, 0.22);
  background: rgba(61, 143, 66, 0.07);
  color: var(--color-primary-500);
}
:root[data-theme="light"] .tag.tag-human {
  border-color: rgba(217, 119, 6, 0.22);
  background: rgba(244, 185, 66, 0.12);
  color: #b45309;
}
:root[data-theme="light"] .tag.tag-review {
  border-color: rgba(14, 165, 233, 0.22);
  background: rgba(56, 189, 248, 0.10);
  color: #0369a1;
}

/* ---- 浅色 · card::before 顶光反向（白到白看不见 → 浅灰到透明） ---- */
:root[data-theme="light"] .card::before,
:root[data-theme="light"] .metric-card::before {
  background: linear-gradient(90deg,
    transparent,
    rgba(15, 30, 53, 0.06),
    transparent);
}

/* ---- 浅色 · 看板列标题圆点光晕减淡 ---- */
:root[data-theme="light"] .kanban-col-title::before {
  box-shadow: 0 0 4px var(--col-accent, transparent);
}

/* ---- 浅色 · 主题切换按钮 Sun icon 额外光晕 (视觉反馈) ---- */
.topnav-icon-btn.is-light {
  background: linear-gradient(135deg,
    rgba(244, 185, 66, 0.16), rgba(61, 143, 66, 0.08)) !important;
  color: var(--color-accent-amber) !important;
  border-color: rgba(244, 185, 66, 0.35) !important;
}

/* ---- 浅色 · 自定义进度条 shimmer 颜色柔化 ---- */
:root[data-theme="light"] .progress {
  background: rgba(15, 30, 53, 0.06);
}

/* ---- 浅色 · 算力积分弹窗 ---- */
:root[data-theme="light"] .credits-modal-mask {
  background: rgba(10, 22, 40, 0.4);
}
:root[data-theme="light"] .credits-modal {
  background: linear-gradient(160deg, #ffffff 0%, #f7f9fc 100%);
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.18), 0 0 0 1px rgba(61,143,66,0.1), inset 0 1px 0 rgba(255,255,255,0.6);
}
:root[data-theme="light"] .credits-modal-title { color: #0a1628; }
:root[data-theme="light"] .credits-modal-sub { color: var(--color-text-secondary); }
:root[data-theme="light"] .credits-tier-btn {
  background: rgba(15,30,53,0.04);
  color: var(--color-text-secondary);
}
:root[data-theme="light"] .credits-tier-btn:hover {
  background: rgba(15,30,53,0.08);
  color: #0a1628;
}
:root[data-theme="light"] .credits-tier-btn.active {
  background: linear-gradient(135deg, rgba(61,143,66,0.18), rgba(61,143,66,0.08));
  border-color: var(--color-primary-400);
  color: #3d8f42;
}
:root[data-theme="light"] .credits-feature-emoji {
  background: rgba(15,30,53,0.05);
}
:root[data-theme="light"] .credits-feature-emoji.gold { background: rgba(244,185,66,0.18); }
:root[data-theme="light"] .credits-feature-emoji.green { background: rgba(61,143,66,0.15); }
:root[data-theme="light"] .credits-feature-text .main { color: #0a1628; }
:root[data-theme="light"] .credits-period-btn {
  background: #fff;
  border: 1.5px solid var(--color-border-subtle);
}
:root[data-theme="light"] .credits-period-btn:hover {
  border-color: var(--color-primary-400);
  background: rgba(61,143,66,0.04);
}
:root[data-theme="light"] .credits-period-btn.active {
  border-color: var(--color-primary-400);
  background: rgba(61,143,66,0.08);
}
:root[data-theme="light"] .credits-period-label { color: var(--color-text-tertiary); }
:root[data-theme="light"] .credits-period-price { color: #0a1628; }
:root[data-theme="light"] .credits-recharge {
  background: rgba(61,143,66,0.12);
  border-color: var(--color-primary-400);
  color: #3d8f42;
}
:root[data-theme="light"] .credits-recharge:hover {
  background: var(--color-primary-400);
  color: #04131c;
}