/* ============================================================
   果冻风主题引擎（多风格切换）
   移植自新果冻风工作台：默认樱花粉 = 果冻风；另含 8 套配色。
   通过给 <html> 设 data-theme 切换；sakura 默认（移除属性）。
   只覆盖同名 CSS 变量 + 叠加果冻视觉效果，不改动原有组件结构。

   2026-08-16 优化：原表面色（modal / card / input 等）为半透明玻璃拟态，
   移动端或不支持 backdrop-filter 的浏览器上会“透出背景、像透明弹窗”。
   现统一改为实色，保证弹窗/卡片/输入区清晰不透明；果冻高光与阴影保留。
   ============================================================ */

/* ---------- 默认：樱花粉（果冻风） ---------- */
:root {
  --bg-base: #fff5f8;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #fff0f3;
  --bg-input: #fff5f7;
  --bg-card-2: var(--bg-input);
  --bg-pink-light: #ffe4ec;
  --bg-pink-soft: #ffd6e0;
  --border: #ffd6e7;
  --border-hover: #ff9eba;
  --border-strong: #ff7ba3;
  --text-primary: #4a3340;
  --text-secondary: #6f5562;
  --text-muted: #9a8294;
  --pink: #ff8fb3;
  --pink-deep: #ff6b9d;
  --pink-light: #ffb3cc;
  --pink-soft: #ffd6e0;
  --lavender: #a78bfa;
  --lavender-light: #ddd6fe;
  --mint: #4ecdc4;
  --mint-light: #99f6e4;
  --yellow: #fbbf24;
  --yellow-soft: #fef3c7;
  --orange: #fb923c;
  --coral: #ff6b6b;
  --gradient-1: linear-gradient(135deg, #ff9eba, #ff6b9d);
  --gradient-2: linear-gradient(135deg, #a78bfa, #8b5cf6);
  --gradient-3: linear-gradient(135deg, #4ecdc4, #06b6d4);
  --gradient-4: linear-gradient(135deg, #fbbf24, #fb923c);
  --gradient-pink: linear-gradient(135deg, #ff9eba, #ff6b9d);
  --gradient-cute: linear-gradient(135deg, #ffd6e0, #a78bfa);
  --shadow-sm: 0 2px 8px rgba(255,143,179,0.10);
  --shadow-md: 0 4px 16px rgba(255,143,179,0.14);
  --shadow-lg: 0 8px 32px rgba(255,143,179,0.18);
  --shadow-card: 0 2px 12px rgba(255,143,179,0.08);
  --shadow-hover: 0 8px 28px rgba(255,143,179,0.20);
  --radius: 22px;
  --radius-sm: 14px;
  --radius-xs: 10px;
  --radius-round: 50px;
  --jelly: 0 2px 4px rgba(255,255,255,0.7) inset, 0 -2px 4px rgba(255,143,179,0.06) inset;
  --bg-grad-1: rgba(255,209,224,0.45);
  --bg-grad-2: rgba(167,139,250,0.16);
}

/* ---------- 暗夜黑 ---------- */
[data-theme="dark"] {
  --bg-base: #1c1825;
  --bg-surface: #2a2532;
  --bg-card: #2a2532;
  --bg-card-hover: #302a38;
  --bg-input: #28232e;
  --bg-card-2: var(--bg-input);
  --bg-pink-light: #302a38;
  --bg-pink-soft: #403848;
  --border: #403848;
  --border-hover: #5a4f63;
  --border-strong: #6a5b75;
  --text-primary: #f5edfa;
  --text-secondary: #b0a4c0;
  --text-muted: #8a7e9a;
  --pink: #ff4d8d;
  --pink-deep: #e03a7a;
  --pink-light: #ffb3d1;
  --pink-soft: #ffc2dd;
  --lavender: #b18cff;
  --lavender-light: #d9c2ff;
  --mint: #2dd4a7;
  --gradient-1: linear-gradient(135deg, #ff7eb3, #ff4d8d);
  --gradient-2: linear-gradient(135deg, #b18cff, #8b5cf6);
  --gradient-3: linear-gradient(135deg, #2dd4a7, #06b6d4);
  --gradient-4: linear-gradient(135deg, #fbbf24, #fb923c);
  --gradient-pink: linear-gradient(135deg, #ff7eb3, #ff4d8d);
  --gradient-cute: linear-gradient(135deg, #ff7eb3, #b18cff);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.30);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.35);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.25);
  --shadow-hover: 0 8px 28px rgba(184,160,216,0.18);
  --jelly: 0 2px 4px rgba(255,255,255,0.04) inset, 0 -2px 4px rgba(0,0,0,0.15) inset;
  --bg-grad-1: rgba(184,160,216,0.12);
  --bg-grad-2: rgba(155,140,255,0.16);
}

/* ---------- 海洋蓝 ---------- */
[data-theme="ocean"] {
  --bg-base: #f0f8ff;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #e8f4fc;
  --bg-input: #f0f8ff;
  --bg-card-2: var(--bg-input);
  --bg-pink-light: #d0e8f8;
  --bg-pink-soft: #d8e8f5;
  --border: #d0e8f8;
  --border-hover: #9fc8e8;
  --border-strong: #6fa0d4;
  --text-primary: #1a3a5c;
  --text-secondary: #5070a0;
  --text-muted: #7a93b5;
  --pink: #6fa0d4;
  --pink-deep: #8fb8e0;
  --pink-light: #a8c8e8;
  --pink-soft: #cfe4f5;
  --lavender: #9fb8e0;
  --lavender-light: #cfe0f0;
  --mint: #5fbfb0;
  --gradient-1: linear-gradient(135deg, #6fa0d4, #8fb8e0);
  --gradient-2: linear-gradient(135deg, #6fa0d4, #5b7fd4);
  --gradient-3: linear-gradient(135deg, #5fbfb0, #06b6d4);
  --gradient-4: linear-gradient(135deg, #fbbf24, #fb923c);
  --gradient-pink: linear-gradient(135deg, #6fa0d4, #8fb8e0);
  --gradient-cute: linear-gradient(135deg, #a8c8e8, #7bc4b5);
  --shadow-sm: 0 2px 8px rgba(111,160,212,0.10);
  --shadow-md: 0 4px 16px rgba(111,160,212,0.14);
  --shadow-lg: 0 8px 32px rgba(111,160,212,0.18);
  --shadow-card: 0 2px 12px rgba(111,160,212,0.08);
  --shadow-hover: 0 8px 28px rgba(111,160,212,0.20);
  --jelly: 0 2px 4px rgba(255,255,255,0.7) inset, 0 -2px 4px rgba(111,160,212,0.06) inset;
  --bg-grad-1: rgba(143,184,224,0.32);
  --bg-grad-2: rgba(123,196,181,0.16);
}

/* ---------- 森林绿 ---------- */
[data-theme="forest"] {
  --bg-base: #f0faf2;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #e8f5ec;
  --bg-input: #f0faf2;
  --bg-card-2: var(--bg-input);
  --bg-pink-light: #d0e8d8;
  --bg-pink-soft: #d8e8dc;
  --border: #d0e8d8;
  --border-hover: #9fcfb0;
  --border-strong: #5fbf98;
  --text-primary: #1a3a26;
  --text-secondary: #507860;
  --text-muted: #7a9484;
  --pink: #5fbf98;
  --pink-deep: #a8e8c8;
  --pink-light: #8fd8b8;
  --pink-soft: #cfeede;
  --lavender: #8fbfa8;
  --lavender-light: #cfe8dc;
  --mint: #5fbf98;
  --gradient-1: linear-gradient(135deg, #5fbf98, #a8e8c8);
  --gradient-2: linear-gradient(135deg, #5fbf98, #4ea8d4);
  --gradient-3: linear-gradient(135deg, #5fbf98, #06b6d4);
  --gradient-4: linear-gradient(135deg, #fbbf24, #fb923c);
  --gradient-pink: linear-gradient(135deg, #5fbf98, #a8e8c8);
  --gradient-cute: linear-gradient(135deg, #a8e8c8, #7bc4b5);
  --shadow-sm: 0 2px 8px rgba(95,191,152,0.10);
  --shadow-md: 0 4px 16px rgba(95,191,152,0.14);
  --shadow-lg: 0 8px 32px rgba(95,191,152,0.18);
  --shadow-card: 0 2px 12px rgba(95,191,152,0.08);
  --shadow-hover: 0 8px 28px rgba(95,191,152,0.20);
  --jelly: 0 2px 4px rgba(255,255,255,0.7) inset, 0 -2px 4px rgba(95,191,152,0.06) inset;
  --bg-grad-1: rgba(142,221,186,0.30);
  --bg-grad-2: rgba(123,196,181,0.16);
}

/* ---------- 紫罗兰 ---------- */
[data-theme="purple"] {
  --bg-base: #faf6fc;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f5edf8;
  --bg-input: #faf6fc;
  --bg-card-2: var(--bg-input);
  --bg-pink-light: #e0d0ec;
  --bg-pink-soft: #e0d0ec;
  --border: #e0d0ec;
  --border-hover: #b89ad9;
  --border-strong: #9b7fc4;
  --text-primary: #2a1a3e;
  --text-secondary: #6a5890;
  --text-muted: #8e7aa8;
  --pink: #b89ad9;
  --pink-deep: #bba0d9;
  --pink-light: #c8b0e0;
  --pink-soft: #e0d0ec;
  --lavender: #b89ad9;
  --lavender-light: #ddd0f0;
  --mint: #7fc4b5;
  --gradient-1: linear-gradient(135deg, #b89ad9, #bba0d9);
  --gradient-2: linear-gradient(135deg, #b89ad9, #8b5cf6);
  --gradient-3: linear-gradient(135deg, #7fc4b5, #06b6d4);
  --gradient-4: linear-gradient(135deg, #fbbf24, #fb923c);
  --gradient-pink: linear-gradient(135deg, #b89ad9, #bba0d9);
  --gradient-cute: linear-gradient(135deg, #bba0d9, #7fb0e0);
  --shadow-sm: 0 2px 8px rgba(184,154,217,0.10);
  --shadow-md: 0 4px 16px rgba(184,154,217,0.14);
  --shadow-lg: 0 8px 32px rgba(184,154,217,0.18);
  --shadow-card: 0 2px 12px rgba(184,154,217,0.08);
  --shadow-hover: 0 8px 28px rgba(184,154,217,0.20);
  --jelly: 0 2px 4px rgba(255,255,255,0.7) inset, 0 -2px 4px rgba(184,154,217,0.06) inset;
  --bg-grad-1: rgba(184,154,217,0.30);
  --bg-grad-2: rgba(155,140,255,0.16);
}

/* ---------- 暖阳橙 ---------- */
[data-theme="orange"] {
  --bg-base: #fffaf0;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #fff5e8;
  --bg-input: #fffaf0;
  --bg-card-2: var(--bg-input);
  --bg-pink-light: #ffe8d0;
  --bg-pink-soft: #ffe0c8;
  --border: #ffe8d0;
  --border-hover: #d9b07a;
  --border-strong: #c89a5a;
  --text-primary: #3a2810;
  --text-secondary: #806840;
  --text-muted: #9a8050;
  --pink: #d9b07a;
  --pink-deep: #d9b88e;
  --pink-light: #e6c89a;
  --pink-soft: #f5e8d8;
  --lavender: #d9b8a0;
  --lavender-light: #f0e0d0;
  --mint: #9fbf8a;
  --gradient-1: linear-gradient(135deg, #d9b07a, #d9b88e);
  --gradient-2: linear-gradient(135deg, #d9b07a, #c98a4a);
  --gradient-3: linear-gradient(135deg, #9fbf8a, #06b6d4);
  --gradient-4: linear-gradient(135deg, #fbbf24, #fb923c);
  --gradient-pink: linear-gradient(135deg, #d9b07a, #d9b88e);
  --gradient-cute: linear-gradient(135deg, #d9b88e, #7bc4b5);
  --shadow-sm: 0 2px 8px rgba(217,176,122,0.10);
  --shadow-md: 0 4px 16px rgba(217,176,122,0.14);
  --shadow-lg: 0 8px 32px rgba(217,176,122,0.18);
  --shadow-card: 0 2px 12px rgba(217,176,122,0.08);
  --shadow-hover: 0 8px 28px rgba(217,176,122,0.20);
  --jelly: 0 2px 4px rgba(255,255,255,0.7) inset, 0 -2px 4px rgba(217,176,122,0.06) inset;
  --bg-grad-1: rgba(217,176,122,0.28);
  --bg-grad-2: rgba(251,146,60,0.14);
}

/* ---------- 薄荷青 ---------- */
[data-theme="mint"] {
  --bg-base: #f0faf8;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #e8f5f2;
  --bg-input: #f0faf8;
  --bg-card-2: var(--bg-input);
  --bg-pink-light: #d0e8e0;
  --bg-pink-soft: #d8e8e2;
  --border: #d0e8e0;
  --border-hover: #7bc4b5;
  --border-strong: #5fae9e;
  --text-primary: #1a3a36;
  --text-secondary: #507870;
  --text-muted: #7a948c;
  --pink: #7bc4b5;
  --pink-deep: #c0ece4;
  --pink-light: #9fd8cc;
  --pink-soft: #cfeae4;
  --lavender: #9fb8d0;
  --lavender-light: #cfe0e8;
  --mint: #7bc4b5;
  --gradient-1: linear-gradient(135deg, #7bc4b5, #c0ece4);
  --gradient-2: linear-gradient(135deg, #7bc4b5, #5b9fd4);
  --gradient-3: linear-gradient(135deg, #7bc4b5, #06b6d4);
  --gradient-4: linear-gradient(135deg, #fbbf24, #fb923c);
  --gradient-pink: linear-gradient(135deg, #7bc4b5, #c0ece4);
  --gradient-cute: linear-gradient(135deg, #c0ece4, #7fb0e0);
  --shadow-sm: 0 2px 8px rgba(123,196,181,0.10);
  --shadow-md: 0 4px 16px rgba(123,196,181,0.14);
  --shadow-lg: 0 8px 32px rgba(123,196,181,0.18);
  --shadow-card: 0 2px 12px rgba(123,196,181,0.08);
  --shadow-hover: 0 8px 28px rgba(123,196,181,0.20);
  --jelly: 0 2px 4px rgba(255,255,255,0.7) inset, 0 -2px 4px rgba(123,196,181,0.06) inset;
  --bg-grad-1: rgba(168,230,220,0.28);
  --bg-grad-2: rgba(123,196,181,0.16);
}

/* ---------- 玫瑰红 ---------- */
[data-theme="rose"] {
  --bg-base: #fff8f8;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #fff0f0;
  --bg-input: #fff8f8;
  --bg-card-2: var(--bg-input);
  --bg-pink-light: #ffd8d8;
  --bg-pink-soft: #ffd0c8;
  --border: #ffd8d8;
  --border-hover: #ffb3c0;
  --border-strong: #ff8a9a;
  --text-primary: #3a1a1a;
  --text-secondary: #8a5050;
  --text-muted: #a07070;
  --pink: #ffb3c0;
  --pink-deep: #ffc6d0;
  --pink-light: #ffc8d0;
  --pink-soft: #ffe0e4;
  --lavender: #e0a8c0;
  --lavender-light: #f0d0e0;
  --mint: #c08f9f;
  --gradient-1: linear-gradient(135deg, #ffb3c0, #ffc6d0);
  --gradient-2: linear-gradient(135deg, #ffb3c0, #d98aa0);
  --gradient-3: linear-gradient(135deg, #c08f9f, #06b6d4);
  --gradient-4: linear-gradient(135deg, #fbbf24, #fb923c);
  --gradient-pink: linear-gradient(135deg, #ffb3c0, #ffc6d0);
  --gradient-cute: linear-gradient(135deg, #ffc6d0, #b89ad9);
  --shadow-sm: 0 2px 8px rgba(255,179,192,0.10);
  --shadow-md: 0 4px 16px rgba(255,179,192,0.14);
  --shadow-lg: 0 8px 32px rgba(255,179,192,0.18);
  --shadow-card: 0 2px 12px rgba(255,179,192,0.08);
  --shadow-hover: 0 8px 28px rgba(255,179,192,0.20);
  --jelly: 0 2px 4px rgba(255,255,255,0.7) inset, 0 -2px 4px rgba(255,179,192,0.06) inset;
  --bg-grad-1: rgba(255,179,192,0.30);
  --bg-grad-2: rgba(184,154,217,0.16);
}

/* ---------- 午夜紫 ---------- */
[data-theme="midnight"] {
  --bg-base: #0f0e1a;
  --bg-surface: #1e1d30;
  --bg-card: #1e1d30;
  --bg-card-hover: #252540;
  --bg-input: #1a1a2e;
  --bg-card-2: var(--bg-input);
  --bg-pink-light: #252540;
  --bg-pink-soft: #353565;
  --border: #353565;
  --border-hover: #4f4f8f;
  --border-strong: #6a6ab0;
  --text-primary: #e8e8ff;
  --text-secondary: #8080b0;
  --text-muted: #6060a0;
  --pink: #8b5cf6;
  --pink-deep: #7c3aed;
  --pink-light: #c4b5ff;
  --pink-soft: #b3a4ff;
  --lavender: #b3a4ff;
  --lavender-light: #d8ccff;
  --mint: #2dd4a7;
  --gradient-1: linear-gradient(135deg, #a78bfa, #8b5cf6);
  --gradient-2: linear-gradient(135deg, #a78bfa, #7c3aed);
  --gradient-3: linear-gradient(135deg, #2dd4a7, #06b6d4);
  --gradient-4: linear-gradient(135deg, #fbbf24, #fb923c);
  --gradient-pink: linear-gradient(135deg, #a78bfa, #8b5cf6);
  --gradient-cute: linear-gradient(135deg, #a78bfa, #b3a4ff);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.40);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.30);
  --shadow-hover: 0 8px 28px rgba(155,140,255,0.22);
  --jelly: 0 2px 4px rgba(255,255,255,0.03) inset, 0 -2px 4px rgba(0,0,0,0.15) inset;
  --bg-grad-1: rgba(155,140,255,0.16);
  --bg-grad-2: rgba(123,176,224,0.14);
}

/* ============================================================
   果冻风视觉叠加（所有主题通用，使用上面的变量）
   ============================================================ */

/* 背景：柔和双色光晕 + 主题底色 */
body {
  background:
    radial-gradient(circle at 12% 18%, var(--bg-grad-1), transparent 42%),
    radial-gradient(circle at 88% 82%, var(--bg-grad-2), transparent 46%),
    var(--bg-base) !important;
  transition: background 0.4s ease, color 0.3s ease;
}

/* 玻璃拟态：主表面加毛玻璃（底色已为实色，blur 仅作柔光，不影响不透明度） */
.sidebar,
.top-bar,
.card,
.modal-box,
.calendar-card,
.sidebar-profile,
.sidebar-tools,
.profile-edit,
.modal,
.modal-content {
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
}

/* 卡片：大圆角 + 果冻内阴影 + 柔光 */
.card,
.calendar-card,
.modal-box {
  border-radius: var(--radius);
  box-shadow: var(--jelly), var(--shadow-md);
  border: 1.5px solid var(--border);
}

/* 按钮：果冻弹跳 + 悬浮上浮 */
.btn {
  border-radius: var(--radius-round);
  box-shadow: var(--jelly);
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--jelly), var(--shadow-hover);
}
.btn:active {
  transform: scale(0.96);
}

@keyframes jelly-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.08); }
  65%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.btn:active,
.nav-item:active,
.filter-btn:active,
.theme-dot:active,
.cal-nav:active,
.task-check:active {
  animation: jelly-pop 0.42s cubic-bezier(0.34,1.56,0.64,1);
}

/* 导航项激活态更果冻 */
.nav-item.active {
  box-shadow: var(--jelly), var(--shadow-sm);
}

/* 输入框：圆润果冻 */
input, textarea, select, .ai-select {
  border-radius: var(--radius-sm);
  background: var(--bg-input);
}

/* ============================================================
   主题切换器（侧边栏底部「🎨 主题」按钮触发色板弹层）
   ============================================================ */

.theme-panel {
  position: fixed;
  right: 18px;
  bottom: 82px;
  z-index: 300;
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 210px;
  padding: 14px;
  background: var(--bg-surface);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--jelly), var(--shadow-lg);
}
.theme-panel.open {
  display: grid;
  animation: jelly-pop 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.theme-dot {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  cursor: pointer;
  border: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.theme-dot:hover { transform: scale(1.08); }
.theme-dot.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--pink-deep), var(--shadow-md);
}

/* ====== 自动随昼夜切换（主题面板内） ====== */
.theme-auto {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.theme-auto-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.theme-auto-title { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.theme-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer; }
.theme-switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.theme-switch-track { position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: background 0.2s ease; }
.theme-switch-track::before { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.2s ease; }
.theme-switch input:checked + .theme-switch-track { background: var(--pink-deep, #e0568b); }
.theme-switch input:checked + .theme-switch-track::before { transform: translateX(18px); }
.theme-auto-sub { display: none; align-items: center; gap: 6px; margin-top: 9px; font-size: 11px; color: var(--text-secondary); }
.theme-auto-label { flex-shrink: 0; white-space: nowrap; }
.theme-select {
  flex: 1; min-width: 0;
  background: var(--bg-surface); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 6px; font-size: 11px; cursor: pointer;
}
.theme-select:focus { outline: none; border-color: var(--pink, #ff6b9d); }