/* ============================================================
 * 明策 MetaDecide · 深海翡翠主题（Deep Navy + Emerald）
 * 方案 A — 专业金融评估、高信任度、现代感
 * ============================================================ */

:root {
  /* === 色彩系统 === */
  --bg-primary: #0a0e1a;
  --bg-secondary: #18212f;
  --bg-elevated: #222c3e;
  --bg-input: #101726;

  --accent-primary: #10b981;    /* 翡翠绿：成功/正向 */
  --accent-secondary: #3b82f6;  /* 蓝宝石：信息/中性 */
  --accent-warning: #f59e0b;    /* 琥珀：警告 */
  --accent-danger: #ef4444;     /* 珊瑚红：危险 */
  --accent-gold: #fbbf24;       /* 金色：变更/高亮 */
  --brand: #10b981;             /* 品牌色 = accent-primary */
  --sk-shimmer: rgba(148, 163, 184, 0.22); /* 骨架屏 shimmer 高光（S2） */

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;

  --border: rgba(148, 163, 184, 0.14);
  --border-hover: rgba(148, 163, 184, 0.24);
  --border-focus: var(--accent-primary);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* 兼容旧变量名（渐进迁移） */
  --bg: var(--bg-primary);
  --card: var(--bg-secondary);
  --accent: var(--accent-primary);
  --warn: var(--accent-warning);
  --danger: var(--accent-danger);
  --text: var(--text-primary);
  --dim: var(--text-secondary);
  --border-color: var(--border);
  --gold: var(--accent-gold);
}

/* === 全局重置 ===
 * 置于 @layer base：让 @layer utilities 的 @utility（如 .btn）天然胜出，
 * 同时不影响任何普通页面样式的优先级（base < 无 layer < utilities）。 */
@layer base {
  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

/* === 排版 === */
body {
  font-family: 'Inter', -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 等宽数字（金融数据核心） */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
}

/* === 链接 === */
a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: opacity 0.15s;
}
a:hover {
  opacity: 0.85;
}

/* === 按钮 ===（btn 家族已迁至 css/tailwind/input.css @utility，见 npm run build） */

/* === 按钮变体 .bs（次要按钮）===（T2 收口：原 index.html:50 / wizard.html:22 页内同名定义
   取值一致，收敛为单一来源；.bp 因 index(--bg-primary 文字) 与 wizard(#000) 取值不同仍留页内；
   index .ha .bs 顶栏灰蓝配色亦为页内私有） */
.bs{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--border)}
.bs:hover{border-color:var(--border-hover);filter:brightness(1.1)}

/* === 骨架屏（S2：加载占位 shimmer；布局类由各页定义，如 index .skel-wrap） === */
.sk{position:relative;overflow:hidden;background:var(--bg-elevated);border-radius:6px}
.sk::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--sk-shimmer),transparent);
  animation:sk-shimmer 1.5s ease-in-out infinite}
@keyframes sk-shimmer{100%{transform:translateX(100%)}}

/* === 卡片 === */
.card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 12px;
  transition: border-color 0.15s;
}
.card:hover {
  border-color: var(--border-hover);
}
.card h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* === 表单元素 === */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}
input::placeholder, textarea::placeholder {
  color: var(--text-tertiary);
  opacity: 0.7;
}
input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* number 输入框上下箭头常显（Chromium 新版默认仅在 hover/聚焦时显示；
   2026-09-29 Calvin 反馈箭头消失，恢复为始终可见）
   箭头背景适配深色主题（color-scheme: dark 让原生控件渲染为暗色） */
input[type="number"] {
  color-scheme: dark;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
}

/* 等宽输入框（数值） */
input.mono {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  text-align: right;
}

/* === Slider === */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--accent-primary);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--bg-primary);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
  transition: transform 0.1s;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

/* === 表格 === */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
th, td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
}
th {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(16, 185, 129, 0.04);
}
td:first-child, th:first-child {
  text-align: left;
  font-family: inherit;
  color: var(--text-secondary);
}
tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* === KPI 卡片 === */
.kpi-card {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  text-align: center;
  transition: border-color 0.15s, transform 0.12s;
}
.kpi-card:hover {
  border-color: var(--border-hover);
}
.kpi-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.kpi-value {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
}

/* KPI 状态色 */
.kpi-value.positive { color: var(--accent-primary); }
.kpi-value.negative { color: var(--accent-danger); }
.kpi-value.neutral  { color: var(--accent-warning); }
.kpi-value.gold     { color: var(--accent-gold); }

/* KPI 徽章 */
.kpi-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 14px;
  font-weight: 800;
  min-width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 12px;
  padding: 0 5px;
  cursor: help;
}
.kpi-badge.ok {
  color: var(--accent-primary);
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
}
.kpi-badge.bad {
  color: var(--accent-warning);
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
}

/* === 浮动 Tooltip（S3：替代 CSS-only ::after，由 common.js 全局委托驱动） === */
.ftip{
  position:fixed;z-index:9999;max-width:min(340px,80vw);
  background:var(--bg-elevated);color:var(--text-primary);
  font-size:12px;font-weight:600;line-height:1.55;
  padding:8px 12px;border-radius:var(--radius-sm);
  border:1px solid var(--border);box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(-50%) translateY(3px);
  transition:opacity .12s ease,transform .12s ease,visibility .12s;
  white-space:normal;word-break:break-word;
}
.ftip.on{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* === Verdict Bar === */
.verdict-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 12px;
}
.verdict-badge {
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.verdict-badge.ok  { color: var(--accent-primary); }
.verdict-badge.bad { color: var(--accent-danger); }
.verdict-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
}
.verdict-icon.ok  { color: #022c22; background: var(--accent-primary); }
.verdict-icon.bad { color: #451a03; background: var(--accent-warning); }

/* === Tabs === */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.tab {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-secondary);
  background: var(--bg-primary);
  transition: all 0.15s;
}
.tab:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}
.tab.on {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  background: var(--bg-secondary);
}
.tab-body { display: none; }
.tab-body.on { display: block; }

/* === Loading Overlay === */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(10, 14, 26, 0.9);
  backdrop-filter: blur(4px);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 14px;
}
.overlay.on { display: flex; }
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.overlay-msg {
  font-size: 13px;
  color: var(--text-secondary);
}

/* === Toast / Message === */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-size: 13px;
  max-width: 400px;
  display: none;
  animation: toastIn 0.2s ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.toast.ok {
  display: block;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid var(--accent-primary);
  color: #6ee7b7;
}
.toast.err {
  display: block;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid var(--accent-danger);
  color: #fca5a5;
}

/* === Modal === */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 26, 0.7);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.modal-overlay.on { display: flex; }
.modal-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow: auto;
  box-shadow: var(--shadow-lg);
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.modal-close {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.modal-close:hover {
  color: var(--accent-danger);
  border-color: var(--accent-danger);
}

/* === Chips / Tags === */
.chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 3px 12px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  background: var(--bg-input);
  color: var(--text-secondary);
  transition: all 0.15s;
}
.chip.on {
  border-color: var(--accent-secondary);
  background: rgba(59, 130, 246, 0.12);
  color: #93c5fd;
}
.tag {
  display: inline-block;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  color: var(--text-secondary);
}
.tag.accent {
  color: var(--accent-primary);
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.08);
}

/* === Utility === */
.text-dim    { color: var(--text-secondary); }
.text-muted  { color: var(--text-tertiary); }
.text-accent { color: var(--accent-primary); }
.text-danger { color: var(--accent-danger); }
.text-warn   { color: var(--accent-warning); }
.text-gold   { color: var(--accent-gold); }
.pos         { color: var(--accent-primary); }
.neg         { color: var(--accent-danger); }
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm      { gap: 6px; }
.gap-md      { gap: 12px; }
.gap-lg      { gap: 18px; }
.wrap        { flex-wrap: wrap; }
.hidden      { display: none !important; }
.sr-only     { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* === Canvas === */
canvas {
  width: 100%;
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin-top: 6px;
  cursor: crosshair;
}

/* === Favicon (handled per-page) === */

/* === Responsive Grid Helpers === */
.grid-kpi {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 1100px) { .grid-kpi { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .grid-kpi { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .grid-kpi { grid-template-columns: repeat(2, 1fr); } }

/* === Scrollbar === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* === Selection === */
::selection {
  background: rgba(16, 185, 129, 0.25);
  color: var(--text-primary);
}

/* === 浅色主题（全页面统一；由各页切换按钮设置 html[data-theme="light"]） === */
html[data-theme="light"]{
  --bg-primary:#f5f8ff;--bg-secondary:#ffffff;--bg-elevated:#eef2fa;--bg-input:#f0f4fb;
  --accent-primary:#0e9f6e;--accent-secondary:#0b74c9;--accent-warning:#d97706;--accent-danger:#dc2626;--accent-gold:#b8860b;--brand:#0e9f6e;
  --text-primary:#0f1b2d;--text-secondary:#5f7191;--text-tertiary:#8ba0bd;
  --border:rgba(15,27,45,.12);--border-hover:rgba(15,27,45,.22);
  --shadow-sm:0 1px 3px rgba(15,27,45,.08);--shadow-md:0 4px 12px rgba(15,27,45,.1);--shadow-lg:0 8px 32px rgba(15,27,45,.14);
  --g08:rgba(15,27,45,.08);--g45:rgba(15,27,45,.45);--g5:rgba(15,27,45,.5);--g6:rgba(15,27,45,.6);
  --sk-shimmer:rgba(15,27,45,.16);
}
html[data-theme="light"] input:disabled{opacity:.75;color:var(--text-secondary)}
html[data-theme="light"] .cd:hover,html[data-theme="light"] .kc:hover{box-shadow:var(--shadow-md)}
/* body 级兜底：切换逻辑若只写在 body（宿主页）时也能生效（2026-09-18 两行卡片修复同日加） */
body[data-theme="light"]{
  --bg-primary:#f5f8ff;--bg-secondary:#ffffff;--bg-elevated:#eef2fa;--bg-input:#f0f4fb;
  --accent-primary:#0e9f6e;--accent-secondary:#0b74c9;--accent-warning:#d97706;--accent-danger:#dc2626;--accent-gold:#b8860b;--brand:#0e9f6e;
  --text-primary:#0f1b2d;--text-secondary:#5f7191;--text-tertiary:#8ba0bd;
  --border:rgba(15,27,45,.12);--border-hover:rgba(15,27,45,.22);
  --shadow-sm:0 1px 3px rgba(15,27,45,.08);--shadow-md:0 4px 12px rgba(15,27,45,.1);--shadow-lg:0 8px 32px rgba(15,27,45,.14);
  --sk-shimmer:rgba(15,27,45,.16);
}
/* KPI 卡片纵深：浅色下用白底 + 深字，避免标签落入低对比灰白（2026-09-18） */
body[data-theme="light"] .kc,html[data-theme="light"] .kc{
  background:#fff;border-color:rgba(15,27,45,.12);background-image:none;
}
body[data-theme="light"] .kc .kl,html[data-theme="light"] .kc .kl{color:#5f7191}
body[data-theme="light"] .kc .kv,html[data-theme="light"] .kc .kv{color:#0f1b2d}
body[data-theme="light"] .kc .kv.pv,html[data-theme="light"] .kc .kv.pv{color:#0e9f6e}
body[data-theme="light"] .kc .kv.nv,html[data-theme="light"] .kc .kv.nv{color:#dc2626}
body[data-theme="light"] .kc .kv.n,html[data-theme="light"] .kc .kv.n{color:#d97706}

/* 2026-09-29 软著截图修复：button/input/select 需显式继承 body 字体，
   否则 Chromium UA 默认样式（Arial）覆盖继承，导致 emoji 回退失败显示豆腐块 */
button, input, select, textarea, optgroup {
  font-family: inherit;
}