/* ============ 主题系统 ============
   全部颜色集中在这里，style.css 只引用变量。
   切换方式：<html data-theme="tech|titanium|aurora|sand|morandi|sakura">
   默认 tech：深色科技质感，作为项目初始主题。
   新增主题只需在下面再加一段 [data-theme="xxx"] 的变量块。 */

/* ---------- 默认：曜石（深色 · 科技 · 质感） ---------- */
:root,
html[data-theme="tech"] {
  color-scheme: dark;

  --bg: #0a0e13;
  --bg-image:
    linear-gradient(rgba(56, 189, 248, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.028) 1px, transparent 1px),
    radial-gradient(900px 520px at 10% -12%, rgba(34, 211, 238, 0.13), transparent 62%),
    radial-gradient(760px 440px at 94% 2%, rgba(59, 130, 246, 0.12), transparent 64%),
    linear-gradient(180deg, #0a0e13 0%, #080b10 62%, #070a0e 100%);
  --bg-size: 48px 48px, 48px 48px, auto, auto, auto;

  --surface: #111823;
  --surface-2: #16202c;
  --surface-3: #1c2938;
  --surface-rgb: 17, 24, 35;

  --line: #1e2a38;
  --line-2: #2b3b4d;
  --line-accent: rgba(56, 189, 248, 0.34);

  --t1: #e9f1fa;
  --t2: #c2cfdd;
  --t3: #8ea0b4;
  --t4: #5f7288;

  --accent: #0e7490;
  --accent-2: #0891b2;
  --accent-ink: #38bdf8;
  --accent-soft: rgba(56, 189, 248, 0.10);
  --accent-soft2: rgba(56, 189, 248, 0.18);
  --accent-rgb: 56, 189, 248;
  --on-accent: #f2fbff;

  --ok: #0f766e;
  --ok-soft: rgba(52, 211, 153, 0.12);
  --ok-soft2: rgba(52, 211, 153, 0.20);
  --ok-ink: #4ade80;
  --ok-rgb: 52, 211, 153;

  --warn: #b45309;
  --warn-soft: rgba(251, 191, 36, 0.12);
  --warn-soft2: rgba(251, 191, 36, 0.20);
  --warn-ink: #fbbf24;
  --warn-rgb: 251, 191, 36;

  --danger: #b91c1c;
  --danger-soft: rgba(248, 113, 113, 0.12);
  --danger-soft2: rgba(248, 113, 113, 0.20);
  --danger-ink: #f87171;
  --danger-rgb: 248, 113, 113;

  --info: #1d4ed8;
  --info-soft: rgba(96, 165, 250, 0.12);
  --info-soft2: rgba(96, 165, 250, 0.20);
  --info-ink: #7dd3fc;
  --info-rgb: 96, 165, 250;

  --pink: #be185d;
  --pink-soft: rgba(244, 114, 182, 0.12);
  --pink-soft2: rgba(244, 114, 182, 0.20);
  --pink-ink: #f9a8d4;
  --pink-rgb: 244, 114, 182;

  --toast-bg: rgba(8, 12, 18, 0.95);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.028), 0 10px 30px rgba(0, 0, 0, 0.45);
  --card-glow: 0 0 0 1px rgba(56, 189, 248, 0.22), 0 12px 34px rgba(8, 145, 178, 0.18);
  /* 日记本：深色石墨封面 + 冷光纸页 */
  --j-cover: linear-gradient(155deg, #1b2836 0%, #131d28 46%, #0c141d 100%);
  --j-cover-line: rgba(255, 255, 255, 0.07);
  --j-ring: linear-gradient(160deg, #c2d6e6, #6c8497 55%, #3f5666);
  --j-hole: rgba(5, 9, 14, 0.75);
  --j-sheet: #16202c;
  --j-paper: #101923;
  --j-paper-line: rgba(255, 255, 255, 0.05);
  --j-ink: #e2edf7;
  --j-ink-2: #8ea2b6;
  --j-rule: rgba(148, 178, 205, 0.14);
  --j-margin: rgba(56, 189, 248, 0.38);
  --j-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.85);
}

/* ---------- 钛白（浅色 · 冷灰高级） ---------- */
html[data-theme="titanium"] {
  color-scheme: light;

  --bg: #f2f5f8;
  --bg-image: linear-gradient(180deg, #f8fafc 0%, #f1f4f7 58%, #edf1f5 100%);
  --bg-size: auto;

  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --surface-3: #eef2f6;
  --surface-rgb: 255, 255, 255;

  --line: #e5eaf0;
  --line-2: #d2dae3;
  --line-accent: rgba(37, 99, 235, 0.32);

  --t1: #0d1621;
  --t2: #374758;
  --t3: #6d7d8f;
  --t4: #9aa8b8;

  --accent: #1d4ed8;
  --accent-2: #3b82f6;
  --accent-ink: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.07);
  --accent-soft2: rgba(37, 99, 235, 0.13);
  --accent-rgb: 37, 99, 235;
  --on-accent: #ffffff;

  --ok: #157f52;
  --ok-soft: rgba(21, 127, 82, 0.09);
  --ok-soft2: rgba(21, 127, 82, 0.16);
  --ok-ink: #157f52;
  --ok-rgb: 21, 127, 82;

  --warn: #a15a08;
  --warn-soft: rgba(161, 90, 8, 0.09);
  --warn-soft2: rgba(161, 90, 8, 0.16);
  --warn-ink: #a15a08;
  --warn-rgb: 161, 90, 8;

  --danger: #c0392b;
  --danger-soft: rgba(192, 57, 43, 0.08);
  --danger-soft2: rgba(192, 57, 43, 0.15);
  --danger-ink: #c0392b;
  --danger-rgb: 192, 57, 43;

  --info: #1f6fb2;
  --info-soft: rgba(31, 111, 178, 0.08);
  --info-soft2: rgba(31, 111, 178, 0.15);
  --info-ink: #1f6fb2;
  --info-rgb: 31, 111, 178;

  --pink: #b5327a;
  --pink-soft: rgba(181, 50, 122, 0.08);
  --pink-soft2: rgba(181, 50, 122, 0.15);
  --pink-ink: #b5327a;
  --pink-rgb: 181, 50, 122;

  --toast-bg: rgba(13, 22, 33, 0.92);
  --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 10px 26px rgba(16, 24, 40, 0.06);
  --card-glow: 0 0 0 1px rgba(37, 99, 235, 0.18), 0 12px 30px rgba(37, 99, 235, 0.12);
  /* 日记本：珍珠白封面 + 细蓝线纸页 */
  --j-cover: linear-gradient(155deg, #f8fbff 0%, #e9eff7 48%, #dce5ef 100%);
  --j-cover-line: rgba(16, 24, 40, 0.07);
  --j-ring: linear-gradient(160deg, #ffffff, #c9d5e2 55%, #9dafc1);
  --j-hole: rgba(16, 24, 40, 0.18);
  --j-sheet: #f2f6fa;
  --j-paper: #ffffff;
  --j-paper-line: rgba(16, 24, 40, 0.05);
  --j-ink: #16212e;
  --j-ink-2: #7a8a9b;
  --j-rule: rgba(37, 99, 235, 0.10);
  --j-margin: rgba(37, 99, 235, 0.28);
  --j-shadow: 0 26px 50px -28px rgba(16, 24, 40, 0.35);
}

/* ---------- 极光（深蓝紫） ---------- */
html[data-theme="aurora"] {
  color-scheme: dark;

  --bg: #090818;
  --bg-image:
    radial-gradient(820px 500px at 6% -12%, rgba(139, 92, 246, 0.26), transparent 62%),
    radial-gradient(700px 460px at 98% 0%, rgba(34, 211, 238, 0.18), transparent 62%),
    linear-gradient(180deg, #0c0a1e 0%, #080714 70%, #07060f 100%);
  --bg-size: auto;

  --surface: #14122c;
  --surface-2: #1a1740;
  --surface-3: #221d4e;
  --surface-rgb: 20, 18, 44;

  --line: #241f4a;
  --line-2: #352d68;
  --line-accent: rgba(167, 139, 250, 0.40);

  --t1: #ece9ff;
  --t2: #c3bcec;
  --t3: #928cc2;
  --t4: #6a649b;

  --accent: #6d28d9;
  --accent-2: #8b5cf6;
  --accent-ink: #a78bfa;
  --accent-soft: rgba(139, 92, 246, 0.14);
  --accent-soft2: rgba(139, 92, 246, 0.24);
  --accent-rgb: 139, 92, 246;
  --on-accent: #f7f5ff;

  --ok: #047857;
  --ok-soft: rgba(52, 211, 153, 0.12);
  --ok-soft2: rgba(52, 211, 153, 0.20);
  --ok-ink: #34d399;
  --ok-rgb: 52, 211, 153;

  --warn: #b45309;
  --warn-soft: rgba(251, 191, 36, 0.12);
  --warn-soft2: rgba(251, 191, 36, 0.20);
  --warn-ink: #fbbf24;
  --warn-rgb: 251, 191, 36;

  --danger: #be123c;
  --danger-soft: rgba(251, 113, 133, 0.12);
  --danger-soft2: rgba(251, 113, 133, 0.20);
  --danger-ink: #fb7185;
  --danger-rgb: 251, 113, 133;

  --info: #2563eb;
  --info-soft: rgba(96, 165, 250, 0.12);
  --info-soft2: rgba(96, 165, 250, 0.20);
  --info-ink: #60a5fa;
  --info-rgb: 96, 165, 250;

  --pink: #be185d;
  --pink-soft: rgba(244, 114, 182, 0.12);
  --pink-soft2: rgba(244, 114, 182, 0.20);
  --pink-ink: #f472b6;
  --pink-rgb: 244, 114, 182;

  --toast-bg: rgba(9, 8, 24, 0.94);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 32px rgba(4, 3, 12, 0.5);
  --card-glow: 0 0 0 1px rgba(167, 139, 250, 0.26), 0 12px 34px rgba(109, 40, 217, 0.22);
  /* 日记本：深靛封面 + 紫光纸页 */
  --j-cover: linear-gradient(155deg, #2a2259 0%, #1b1542 48%, #0f0a26 100%);
  --j-cover-line: rgba(255, 255, 255, 0.09);
  --j-ring: linear-gradient(160deg, #e2d9ff, #9a7be0 55%, #5b4194);
  --j-hole: rgba(6, 4, 16, 0.78);
  --j-sheet: #1a1640;
  --j-paper: #15112f;
  --j-paper-line: rgba(255, 255, 255, 0.05);
  --j-ink: #ece9ff;
  --j-ink-2: #9b93cc;
  --j-rule: rgba(167, 139, 250, 0.16);
  --j-margin: rgba(167, 139, 250, 0.40);
  --j-shadow: 0 30px 64px -26px rgba(3, 2, 10, 0.9);
}

/* ---------- 暖砂（米白 · 暖调） ---------- */
html[data-theme="sand"] {
  color-scheme: light;

  --bg: #f6f1e8;
  --bg-image: linear-gradient(180deg, #faf6ee 0%, #f4eee3 100%);
  --bg-size: auto;

  --surface: #fffcf7;
  --surface-2: #f7f1e7;
  --surface-3: #efe6d7;
  --surface-rgb: 255, 252, 247;

  --line: #e9dfd0;
  --line-2: #d8c9b3;
  --line-accent: rgba(150, 96, 43, 0.30);

  --t1: #2a2118;
  --t2: #4c4134;
  --t3: #877965;
  --t4: #b0a189;

  --accent: #96602b;
  --accent-2: #bf8546;
  --accent-ink: #8a5527;
  --accent-soft: rgba(150, 96, 43, 0.09);
  --accent-soft2: rgba(150, 96, 43, 0.16);
  --accent-rgb: 150, 96, 43;
  --on-accent: #fffaf2;

  --ok: #4e7a4a;
  --ok-soft: rgba(78, 122, 74, 0.10);
  --ok-soft2: rgba(78, 122, 74, 0.18);
  --ok-ink: #486f45;
  --ok-rgb: 78, 122, 74;

  --warn: #a35a08;
  --warn-soft: rgba(163, 90, 8, 0.09);
  --warn-soft2: rgba(163, 90, 8, 0.17);
  --warn-ink: #a35a08;
  --warn-rgb: 163, 90, 8;

  --danger: #a83c2b;
  --danger-soft: rgba(168, 60, 43, 0.09);
  --danger-soft2: rgba(168, 60, 43, 0.16);
  --danger-ink: #a83c2b;
  --danger-rgb: 168, 60, 43;

  --info: #3f6d9e;
  --info-soft: rgba(63, 109, 158, 0.09);
  --info-soft2: rgba(63, 109, 158, 0.16);
  --info-ink: #3f6d9e;
  --info-rgb: 63, 109, 158;

  --pink: #a8476b;
  --pink-soft: rgba(168, 71, 107, 0.09);
  --pink-soft2: rgba(168, 71, 107, 0.16);
  --pink-ink: #a8476b;
  --pink-rgb: 168, 71, 107;

  --toast-bg: rgba(42, 33, 24, 0.92);
  --card-shadow: 0 1px 2px rgba(74, 56, 32, 0.06), 0 10px 24px rgba(74, 56, 32, 0.08);
  --card-glow: 0 0 0 1px rgba(150, 96, 43, 0.16), 0 12px 28px rgba(150, 96, 43, 0.12);
  /* 日记本：暖砂封面 + 米白纸页 */
  --j-cover: linear-gradient(155deg, #e9dcc4 0%, #dcc9a8 48%, #cdb894 100%);
  --j-cover-line: rgba(94, 64, 30, 0.10);
  --j-ring: linear-gradient(160deg, #fffaf0, #d9c49c 55%, #b09a72);
  --j-hole: rgba(74, 52, 26, 0.30);
  --j-sheet: #f6eedd;
  --j-paper: #fffdf7;
  --j-paper-line: rgba(150, 96, 43, 0.06);
  --j-ink: #3b3021;
  --j-ink-2: #a19076;
  --j-rule: rgba(150, 96, 43, 0.16);
  --j-margin: rgba(150, 96, 43, 0.30);
  --j-shadow: 0 26px 50px -28px rgba(74, 56, 32, 0.42);
}

/* ---------- 莫兰迪（低饱和灰绿） ---------- */
html[data-theme="morandi"] {
  color-scheme: light;

  --bg: #eceeeb;
  --bg-image: linear-gradient(180deg, #f1f3f0 0%, #e9ece8 100%);
  --bg-size: auto;

  --surface: #f8f9f7;
  --surface-2: #f0f2ef;
  --surface-3: #e4e8e2;
  --surface-rgb: 248, 249, 247;

  --line: #dfe3dd;
  --line-2: #ccd3c9;
  --line-accent: rgba(92, 125, 102, 0.28);

  --t1: #2c342f;
  --t2: #49544d;
  --t3: #7e8a81;
  --t4: #a7b1a8;

  --accent: #5c7d66;
  --accent-2: #819c88;
  --accent-ink: #4c6b56;
  --accent-soft: rgba(92, 125, 102, 0.10);
  --accent-soft2: rgba(92, 125, 102, 0.18);
  --accent-rgb: 92, 125, 102;
  --on-accent: #fbfdfb;

  --ok: #4e7a55;
  --ok-soft: rgba(78, 122, 85, 0.11);
  --ok-soft2: rgba(78, 122, 85, 0.18);
  --ok-ink: #486f4e;
  --ok-rgb: 78, 122, 85;

  --warn: #96703c;
  --warn-soft: rgba(150, 112, 60, 0.11);
  --warn-soft2: rgba(150, 112, 60, 0.18);
  --warn-ink: #88652f;
  --warn-rgb: 150, 112, 60;

  --danger: #a56a63;
  --danger-soft: rgba(165, 106, 99, 0.11);
  --danger-soft2: rgba(165, 106, 99, 0.18);
  --danger-ink: #96594f;
  --danger-rgb: 165, 106, 99;

  --info: #5f7d94;
  --info-soft: rgba(95, 125, 148, 0.11);
  --info-soft2: rgba(95, 125, 148, 0.18);
  --info-ink: #527086;
  --info-rgb: 95, 125, 148;

  --pink: #a37684;
  --pink-soft: rgba(163, 118, 132, 0.11);
  --pink-soft2: rgba(163, 118, 132, 0.18);
  --pink-ink: #946574;
  --pink-rgb: 163, 118, 132;

  --toast-bg: rgba(44, 52, 47, 0.92);
  --card-shadow: 0 1px 2px rgba(44, 52, 47, 0.05), 0 10px 24px rgba(44, 52, 47, 0.07);
  --card-glow: 0 0 0 1px rgba(92, 125, 102, 0.16), 0 12px 28px rgba(92, 125, 102, 0.12);
  /* 日记本：灰绿封面 + 米灰纸页 */
  --j-cover: linear-gradient(155deg, #e9ede6 0%, #d8e0d6 48%, #c8d2c6 100%);
  --j-cover-line: rgba(44, 52, 47, 0.08);
  --j-ring: linear-gradient(160deg, #fdfefb, #cbd5cb 55%, #a6b2a7);
  --j-hole: rgba(44, 52, 47, 0.22);
  --j-sheet: #f1f4ef;
  --j-paper: #fbfcf9;
  --j-paper-line: rgba(44, 52, 47, 0.05);
  --j-ink: #313a33;
  --j-ink-2: #8a958b;
  --j-rule: rgba(92, 125, 102, 0.16);
  --j-margin: rgba(92, 125, 102, 0.30);
  --j-shadow: 0 26px 50px -30px rgba(44, 52, 47, 0.35);
}

/* ---------- 樱花（粉白 · 柔和） ---------- */
html[data-theme="sakura"] {
  color-scheme: light;

  --bg: #fdf3f5;
  --bg-image: linear-gradient(180deg, #fff8fa 0%, #fbeef2 100%);
  --bg-size: auto;

  --surface: #fffdfd;
  --surface-2: #fdf3f5;
  --surface-3: #f9e5ea;
  --surface-rgb: 255, 253, 253;

  --line: #f5e2e8;
  --line-2: #ecd0d9;
  --line-accent: rgba(184, 74, 120, 0.26);

  --t1: #3b2830;
  --t2: #5d4650;
  --t3: #967d87;
  --t4: #c0a7b1;

  --accent: #b84a78;
  --accent-2: #d97ba0;
  --accent-ink: #a83f6c;
  --accent-soft: rgba(184, 74, 120, 0.09);
  --accent-soft2: rgba(184, 74, 120, 0.16);
  --accent-rgb: 184, 74, 120;
  --on-accent: #fffafc;

  --ok: #4e8a63;
  --ok-soft: rgba(78, 138, 99, 0.10);
  --ok-soft2: rgba(78, 138, 99, 0.17);
  --ok-ink: #457d59;
  --ok-rgb: 78, 138, 99;

  --warn: #a86a34;
  --warn-soft: rgba(168, 106, 52, 0.10);
  --warn-soft2: rgba(168, 106, 52, 0.17);
  --warn-ink: #9a5f2c;
  --warn-rgb: 168, 106, 52;

  --danger: #b8434f;
  --danger-soft: rgba(184, 67, 79, 0.09);
  --danger-soft2: rgba(184, 67, 79, 0.16);
  --danger-ink: #b8434f;
  --danger-rgb: 184, 67, 79;

  --info: #6d7fb5;
  --info-soft: rgba(109, 127, 181, 0.10);
  --info-soft2: rgba(109, 127, 181, 0.17);
  --info-ink: #5f72a8;
  --info-rgb: 109, 127, 181;

  --pink: #c05a8b;
  --pink-soft: rgba(192, 90, 139, 0.10);
  --pink-soft2: rgba(192, 90, 139, 0.17);
  --pink-ink: #b24e80;
  --pink-rgb: 192, 90, 139;

  --toast-bg: rgba(59, 40, 48, 0.92);
  --card-shadow: 0 1px 2px rgba(90, 50, 66, 0.05), 0 10px 26px rgba(90, 50, 66, 0.07);
  --card-glow: 0 0 0 1px rgba(184, 74, 120, 0.16), 0 12px 28px rgba(184, 74, 120, 0.12);
  /* 日记本：樱粉封面 + 奶白纸页 */
  --j-cover: linear-gradient(155deg, #fbe9ef 0%, #f3d3de 48%, #eac4d2 100%);
  --j-cover-line: rgba(59, 40, 48, 0.07);
  --j-ring: linear-gradient(160deg, #fffdfd, #f0cfda 55%, #d3a3b4);
  --j-hole: rgba(59, 40, 48, 0.18);
  --j-sheet: #fdf3f6;
  --j-paper: #fffdfd;
  --j-paper-line: rgba(59, 40, 48, 0.04);
  --j-ink: #43303a;
  --j-ink-2: #a98d99;
  --j-rule: rgba(184, 74, 120, 0.15);
  --j-margin: rgba(184, 74, 120, 0.26);
  --j-shadow: 0 26px 50px -30px rgba(90, 50, 66, 0.32);
}

/* ============ 统一质感层 ============ */
body {
  background-size: var(--bg-size, auto);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 卡片：细描边 + 统一投影，深浅主题都有边界感 */
.card, .stats-card, .settings-section, .note-card, .health-stat-card,
.note-empty, .modal, .plan-btn, .filter-chip {
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
}

.sidebar { border-right-color: var(--line); }

/* 顶部/标题类：紧一点的字符间距，更利落 */
.header .greeting, .settings-title, .plan-title, .card-header .title,
.settings-section-head, .theme-card-name {
  letter-spacing: -0.2px;
}
.amount, .focus-card .focus-time, .ai-score, .ps-block b, .hs-value,
.ov-stat b, .mc-num, .ptl-time, .chart-label {
  font-variant-numeric: tabular-nums;
}

/* 深色主题下自绘阴影会消失，用渐变提亮卡片顶部做质感 */
html[data-theme="tech"] .card,
html[data-theme="tech"] .stats-card,
html[data-theme="tech"] .settings-section,
html[data-theme="tech"] .note-card,
html[data-theme="tech"] .health-stat-card,
html[data-theme="aurora"] .card,
html[data-theme="aurora"] .stats-card,
html[data-theme="aurora"] .settings-section,
html[data-theme="aurora"] .note-card,
html[data-theme="aurora"] .health-stat-card {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0) 42%);
}

/* 图表面板与空状态在深色下别太亮 */
html[data-theme="tech"] .note-empty,
html[data-theme="aurora"] .note-empty {
  background: var(--surface-2);
}

/* 日记本 / 纸页 / 头图已改为跟随 --j-* 与语义色，无需再按深浅主题单独覆盖 */

/* 滚动条跟随主题 */
html[data-theme="tech"] ::-webkit-scrollbar-track,
html[data-theme="aurora"] ::-webkit-scrollbar-track { background: var(--surface-2); }

/* ============ 主题选择卡片（偏好设置） ============ */
.theme-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 4px;
}
@media (max-width: 620px) { .theme-grid { grid-template-columns: repeat(2, 1fr); } }

.theme-card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 9px 9px 10px; border-radius: 13px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--surface-2);
  font-family: inherit; text-align: left; transition: all .16s ease;
}
.theme-card:hover { border-color: var(--line-accent); transform: translateY(-1px); }
.theme-card.active {
  border-color: var(--accent-ink);
  box-shadow: var(--card-glow);
}
.theme-card.active::after {
  content: "✓"; position: absolute; top: 7px; right: 7px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  font-size: 10px; line-height: 16px; text-align: center; font-weight: 700;
}

.theme-preview {
  height: 54px; border-radius: 9px; overflow: hidden; position: relative;
  border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.tp-bar { display: flex; gap: 3px; padding: 6px 7px; }
.tp-block { flex: 1; border-radius: 3px; height: 8px; }
.tp-block.wide { flex: 2.4; }
.tp-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tp-head { display: flex; align-items: center; gap: 4px; padding: 7px 7px 0; }

.theme-card-name {
  font-size: 12.5px; font-weight: 700; color: var(--t1);
  display: flex; align-items: center; gap: 5px;
}
.theme-card-desc { font-size: 10.5px; color: var(--t4); line-height: 1.45; }
.theme-card.active .theme-card-name { color: var(--accent-ink); }

.theme-reset {
  margin-left: auto; border: none; background: none; cursor: pointer;
  font-size: 11.5px; color: var(--t4); font-family: inherit; padding: 2px 4px;
}
.theme-reset:hover { color: var(--accent-ink); }

/* 主题区下面的布局开关，跟主题卡片隔一条细线 */
.theme-layout-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line);
}