/* ==========================================================================
   theme-dark.css —— 深色主题 (通过 <html data-theme="dark"> 切换)
   仅覆盖设计令牌与硬编码的浅色玻璃表面, 保持淡紫色调。
   ========================================================================== */

[data-theme="dark"] {
  /* 淡紫色阶 (整体压暗) */
  --lav-50: #1c1730;
  --lav-100: #14101f;
  --lav-200: #241d3a;
  --lav-300: #2e2549;

  /* 墨色 (反转为浅色文字) */
  --ink-900: #f6f3fc;
  --ink-800: #e8e3f5;
  --ink-700: #d4ccec;
  --ink-500: #b1a8ce;
  --ink-400: #958cb0;
  --ink-300: #7d7397;
  --ink-200: #60587a;

  /* 玻璃层 */
  --glass: rgba(43, 35, 68, 0.62);
  --glass-strong: rgba(52, 43, 80, 0.84);
  --glass-soft: rgba(43, 35, 68, 0.42);
  --glass-line: rgba(255, 255, 255, 0.1);
  --hairline: rgba(167, 139, 250, 0.3);
  --hairline-soft: rgba(167, 139, 250, 0.16);

  /* 阴影 */
  --sh-xs: 0 1px 3px rgba(0, 0, 0, 0.35);
  --sh-sm: 0 3px 12px rgba(0, 0, 0, 0.4);
  --sh-md: 0 12px 32px -10px rgba(0, 0, 0, 0.55);
  --sh-lg: 0 28px 64px -20px rgba(0, 0, 0, 0.65);
  --sh-glow: 0 10px 30px -8px rgba(139, 92, 246, 0.55);

  color-scheme: dark;
}

[data-theme="dark"] body {
  background: var(--lav-100);
  color: var(--ink-800);
}

[data-theme="dark"] .bg-canvas .blob {
  opacity: 0.34;
  filter: saturate(120%);
}

/* ---- 顶栏 / 侧栏 ---- */
[data-theme="dark"] .topbar {
  background: rgba(24, 19, 38, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 26px -14px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .search {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .search input {
  color: var(--ink-800);
}
[data-theme="dark"] .status-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .foot {
  color: var(--ink-300);
}
[data-theme="dark"] kbd {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--ink-700);
}

/* ---- 分类项 / 侧栏 ---- */
[data-theme="dark"] .cat-item {
  color: var(--ink-400);
}
[data-theme="dark"] .cat-item:hover {
  background: rgba(167, 139, 250, 0.1);
}
[data-theme="dark"] .cat-item.active {
  background: rgba(167, 139, 250, 0.18);
  color: var(--ink-800);
}

/* ---- 卡片 / 面板 ---- */
[data-theme="dark"] .tile {
  border-color: var(--glass-line);
  box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .tile::after {
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 0%),
    rgba(196, 181, 253, 0.22),
    rgba(139, 92, 246, 0.12) 40%,
    transparent 68%
  );
}
[data-theme="dark"] .tile h3 {
  color: var(--ink-800);
}
[data-theme="dark"] .empty {
  color: var(--ink-400);
}

/* ---- 表单控件 ---- */
[data-theme="dark"] .input,
[data-theme="dark"] .textarea,
[data-theme="dark"] .select {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--ink-800);
}
[data-theme="dark"] .input:hover,
[data-theme="dark"] .textarea:hover,
[data-theme="dark"] .select:hover {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .input:focus,
[data-theme="dark"] .textarea:focus,
[data-theme="dark"] .select:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(167, 139, 250, 0.6);
}
[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23958cb0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

[data-theme="dark"] .btn {
  color: var(--ink-700);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: var(--sh-xs), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .btn.primary {
  color: #fff;
}

[data-theme="dark"] .seg {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .seg button {
  color: var(--ink-400);
}
[data-theme="dark"] .seg button.on {
  color: #fff;
}

/* ---- 结果 / 键值 / 统计 ---- */
[data-theme="dark"] .result,
[data-theme="dark"] .stat,
[data-theme="dark"] .swatch {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .kv-row {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .switch .track {
  background: rgba(255, 255, 255, 0.16);
}

/* ---- 提示条 ---- */
[data-theme="dark"] .alert {
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .alert.ok {
  background: rgba(22, 163, 74, 0.16);
  color: #86efac;
}
[data-theme="dark"] .alert.err {
  background: rgba(190, 40, 60, 0.18);
  color: #fda4af;
}
[data-theme="dark"] .alert.warn {
  background: rgba(217, 119, 6, 0.18);
  color: #fcd34d;
}
[data-theme="dark"] .alert.info {
  background: rgba(139, 92, 246, 0.16);
  color: #ddd6fe;
}

/* ---- 新工具组件 ---- */
[data-theme="dark"] .run-item,
[data-theme="dark"] .diff-view,
[data-theme="dark"] .md-preview,
[data-theme="dark"] .fh-item,
[data-theme="dark"] .drop-zone,
[data-theme="dark"] .img-box {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .md-preview {
  background: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .md-body {
  color: var(--ink-700);
}
[data-theme="dark"] .md-body h1,
[data-theme="dark"] .md-body h2,
[data-theme="dark"] .md-body h3,
[data-theme="dark"] .md-body h4 {
  color: var(--ink-900);
}
[data-theme="dark"] .md-body pre {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .md-body pre code {
  color: var(--ink-700);
}
[data-theme="dark"] .md-body th {
  background: rgba(167, 139, 250, 0.14);
}
[data-theme="dark"] .fh-row {
  background: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .fh-val {
  color: var(--ink-400);
}
[data-theme="dark"] .diff-row.add {
  background: rgba(34, 197, 94, 0.14);
}
[data-theme="dark"] .diff-row.del {
  background: rgba(244, 63, 94, 0.14);
}
[data-theme="dark"] .diff-text {
  color: var(--ink-700);
}
[data-theme="dark"] .ds.add,
[data-theme="dark"] .ds.ok {
  color: #86efac;
}
[data-theme="dark"] .ds.del {
  color: #fda4af;
}
[data-theme="dark"] .ds.warn {
  color: #fcd34d;
}
[data-theme="dark"] .alert code,
[data-theme="dark"] .md-body code {
  background: rgba(167, 139, 250, 0.2);
  color: #ddd6fe;
}

/* ---- 标签 / 图标按钮 ---- */
[data-theme="dark"] .chip {
  background: rgba(167, 139, 250, 0.16);
  color: #c4b5fd;
}
[data-theme="dark"] .chip.gray {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-400);
}
[data-theme="dark"] .icon-btn {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--ink-700);
}
[data-theme="dark"] .icon-btn:hover {
  background: rgba(255, 255, 255, 0.13);
}
[data-theme="dark"] .icon-btn.active {
  color: #fcd34d;
  background: rgba(252, 211, 77, 0.16);
}
[data-theme="dark"] .tile-star {
  color: var(--ink-300);
}
[data-theme="dark"] .tile-star.on {
  color: #fcd34d;
}

/* ---- 公告栏 ---- */
[data-theme="dark"] .ann-badge {
  background: rgba(167, 139, 250, 0.18);
  color: #c4b5fd;
}
[data-theme="dark"] .ann-text {
  color: var(--ink-700);
}
[data-theme="dark"] .ann-dots button {
  background: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .ann-dots button.on {
  background: #a78bfa;
}
[data-theme="dark"] .ann-close {
  color: var(--ink-400);
}

/* ---- 广告位 ---- */
[data-theme="dark"] .ad-banner {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(167, 139, 250, 0.24);
}
[data-theme="dark"] .ad-banner b {
  color: var(--ink-800);
}
[data-theme="dark"] .ad-banner span {
  color: var(--ink-400);
}
[data-theme="dark"] .ad-tag {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink-400);
}

/* ---- 面板头 / 侧栏 ---- */
[data-theme="dark"] .panel-head {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .back-btn {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--ink-700);
}
[data-theme="dark"] .side-title {
  color: var(--ink-400);
}
[data-theme="dark"] .cat-sep {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .side-foot {
  color: var(--ink-400);
}

/* ---- 转换 / 图片 / 面板 ---- */
[data-theme="dark"] .conv-split .textarea[readonly] {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .img-toolbar {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .run-time {
  color: var(--ink-700);
}
[data-theme="dark"] .panel-external {
  background: rgba(255, 255, 255, 0.05);
}