/* ===== 公用主题（黑蓝紫暗色调 + 浅色覆盖）=====
 * 与 home.html 暗色调统一：#0a0a14 底 + #6366f1 蓝紫强调 + #7c3aed 紫渐变。
 * 各页面只需在 head 引入本文件并用 var(--xxx) 即可统一色调。
 *
 * 用法：<link rel="stylesheet" href="/static/css/theme.css">
 * 然后 body { background: var(--bg-base); color: var(--text-primary); }
 * 卡片用 .card 类或 var(--bg-card)；强调色用 var(--accent)。
 *
 * 浅色主题：app-shell 的 applyTheme() 同时设置 html data-theme="light"
 * + body.light-theme。本文件对两者都生效。
 */

:root {
  /* 暗色（默认） */
  --bg-base: #0a0a14;
  --bg-card: rgba(99, 102, 241, 0.08);
  --bg-card-hover: rgba(99, 102, 241, 0.16);
  --bg-elevated: rgba(99, 102, 241, 0.12);
  --border: rgba(99, 102, 241, 0.22);
  --border-hover: rgba(99, 102, 241, 0.45);
  --text-primary: #f0f0f5;
  --text-secondary: #a8b0c8;
  --text-muted: #6a7088;
  --accent: #6366f1;
  --accent-hover: #818cf8;
  --accent-glow: rgba(99, 102, 241, 0.35);
  --gradient: linear-gradient(135deg, #6366f1 0%, #7c3aed 50%, #4338ca 100%);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --radius: 14px;
  --code-bg: rgba(99, 102, 241, 0.10);
  --danger: #ef4444;
  --success: #4ade80;
  --warn: #fbbf24;
}

/* ===== 浅色主题覆盖 ===== */
[data-theme="light"],
body.light-theme {
  --bg-base: #fafafa;
  --bg-card: #ffffff;
  --bg-card-hover: #f5f6f8;
  --bg-elevated: #ffffff;
  --border: rgba(99, 102, 241, 0.18);
  --border-hover: rgba(99, 102, 241, 0.4);
  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-muted: #86868b;
  --accent: #5856d6;
  --accent-hover: #0071e3;
  --accent-glow: rgba(0, 113, 227, 0.2);
  --gradient: linear-gradient(135deg, #6366f1 0%, #7c3aed 50%, #4338ca 100%);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  --code-bg: #f0f0f5;
}


/* .card 只在无 Bootstrap 的页面生效（用 theme-card 类区分） */
.theme-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}

/* .btn 只管布局/圆角，不管颜色 — 避免覆盖 Bootstrap 和页面自定义 btn-g/r/b/o */
.btn {
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
/* btn-ghost 是自定义类，不和 Bootstrap 冲突 */
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="search"],
textarea,
select {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.15s;
}
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="search"],
[data-theme="light"] textarea,
[data-theme="light"] select,
body.light-theme input[type="text"],
body.light-theme input[type="password"],
body.light-theme input[type="number"],
body.light-theme input[type="email"],
body.light-theme input[type="search"],
body.light-theme textarea,
body.light-theme select {
  background: var(--bg-base);
  border-color: var(--border);
  color: var(--text-primary);
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
}
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

code {
  background: var(--code-bg);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 0.92em;
  color: var(--accent-hover);
}

table {
  width: 100%;
  border-collapse: collapse;
}
th {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  padding: 10px 14px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
}
td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-primary);
}
tr:hover td {
  background: var(--bg-card-hover);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s;
}
a:hover {
  color: var(--accent-hover);
}

/* 链接按钮（无下划线，pill 形） */
.link-btn {
  display: inline-block;
  padding: 10px 22px;
  background: var(--gradient);
  color: #fff;
  border-radius: 25px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 16px var(--accent-glow);
}
.link-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px var(--accent-glow);
  color: #fff;
}