/* 配色方案：由 body[data-color] 切换，变量供全站使用 */

body[data-color="forest"] {
  --bg-page: #eef6f0;
  --bg-glow-a: rgba(200, 230, 212, 0.9);
  --bg-glow-b: rgba(184, 220, 232, 0.55);
  --bg-glow-c: rgba(226, 240, 232, 0.95);
  --blob-a: rgba(107, 189, 143, 0.35);
  --blob-b: rgba(184, 220, 232, 0.4);
  --blob-c: rgba(255, 248, 220, 0.5);
  --text: #1a3328;
  --text-muted: #5a7a6c;
  --surface: rgba(255, 255, 255, 0.72);
  --accent: #3d9b6e;
  --accent-soft: #6bbd8f;
  --leaf: #4a9d7a;
  --orb-inner: #f6fffa;
  --glow-1: rgba(107, 189, 143, 0.45);
  --glow-2: rgba(135, 206, 235, 0.35);
  --progress: linear-gradient(90deg, #5cb88a, #7ec8e3);
  --border-soft: rgba(61, 155, 110, 0.14);
  --shadow-card: 0 4px 24px rgba(45, 90, 72, 0.08), 0 18px 48px rgba(45, 90, 72, 0.06);
  --shadow-float: 0 12px 40px rgba(61, 155, 110, 0.18);
  --shadow-ui: rgba(45, 90, 72, 0.08);
  --shadow-ui-strong: rgba(45, 90, 72, 0.14);
  --method-hover-shadow: rgba(45, 90, 72, 0.06);
  --method-selected-border: rgba(61, 155, 110, 0.35);
  --method-selected-bg: linear-gradient(135deg, rgba(200, 230, 212, 0.65), rgba(255, 255, 255, 0.9));
  --method-selected-shadow: rgba(61, 155, 110, 0.12);
  --settings-expanded-bg: rgba(200, 230, 212, 0.65);
  --settings-expanded-border: rgba(61, 155, 110, 0.28);
  --sound-hover-bg: rgba(238, 246, 240, 0.9);
  --sound-active-bg: rgba(200, 230, 212, 0.55);
  --sound-dot-glow: rgba(61, 155, 110, 0.2);
  --orb-ring-border: rgba(61, 155, 110, 0.12);
  --orb-core-bg:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.95), transparent 45%),
    radial-gradient(circle at 70% 78%, rgba(184, 220, 232, 0.35), transparent 50%),
    linear-gradient(165deg, #f6fffa, #e8f5ee);
  --orb-core-shadow: 0 16px 48px rgba(45, 90, 72, 0.1);
  --countdown-border: rgba(61, 155, 110, 0.22);
  --countdown-shadow: rgba(45, 90, 72, 0.14);
  --progress-track-bg: rgba(61, 155, 110, 0.1);
  --progress-fill-glow: rgba(107, 189, 143, 0.35);
  --primary-hover-shadow: rgba(61, 155, 110, 0.28);
  --detail-effect-bg: linear-gradient(135deg, rgba(200, 230, 212, 0.55), rgba(255, 255, 255, 0.75));
  --detail-effect-border: rgba(61, 155, 110, 0.18);
  --popover-extra-shadow: rgba(45, 90, 72, 0.1);
}

body[data-color="mist"] {
  --bg-page: #edf3f9;
  --bg-glow-a: rgba(200, 220, 245, 0.92);
  --bg-glow-b: rgba(170, 200, 235, 0.5);
  --bg-glow-c: rgba(228, 236, 248, 0.96);
  --blob-a: rgba(100, 165, 220, 0.34);
  --blob-b: rgba(150, 190, 235, 0.38);
  --blob-c: rgba(230, 240, 255, 0.55);
  --text: #1a2d3d;
  --text-muted: #5a6e80;
  --surface: rgba(255, 255, 255, 0.76);
  --accent: #2f7ab8;
  --accent-soft: #5ca8dc;
  --leaf: #3a82b8;
  --orb-inner: #f5faff;
  --glow-1: rgba(90, 160, 220, 0.42);
  --glow-2: rgba(140, 190, 235, 0.38);
  --progress: linear-gradient(90deg, #4a9fd4, #7ec0eb);
  --border-soft: rgba(47, 122, 184, 0.16);
  --shadow-card: 0 4px 24px rgba(30, 55, 80, 0.07), 0 18px 48px rgba(30, 55, 80, 0.05);
  --shadow-float: 0 12px 40px rgba(47, 122, 184, 0.2);
  --shadow-ui: rgba(30, 55, 80, 0.08);
  --shadow-ui-strong: rgba(30, 55, 80, 0.12);
  --method-hover-shadow: rgba(30, 55, 80, 0.06);
  --method-selected-border: rgba(47, 122, 184, 0.38);
  --method-selected-bg: linear-gradient(135deg, rgba(200, 225, 248, 0.7), rgba(255, 255, 255, 0.92));
  --method-selected-shadow: rgba(47, 122, 184, 0.14);
  --settings-expanded-bg: rgba(200, 225, 248, 0.65);
  --settings-expanded-border: rgba(47, 122, 184, 0.28);
  --sound-hover-bg: rgba(235, 242, 252, 0.95);
  --sound-active-bg: rgba(200, 225, 248, 0.58);
  --sound-dot-glow: rgba(47, 122, 184, 0.22);
  --orb-ring-border: rgba(47, 122, 184, 0.14);
  --orb-core-bg:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.96), transparent 45%),
    radial-gradient(circle at 70% 78%, rgba(160, 205, 240, 0.4), transparent 50%),
    linear-gradient(165deg, #f5faff, #e4eef8);
  --orb-core-shadow: 0 16px 48px rgba(30, 55, 80, 0.09);
  --countdown-border: rgba(47, 122, 184, 0.22);
  --countdown-shadow: rgba(30, 55, 80, 0.12);
  --progress-track-bg: rgba(47, 122, 184, 0.11);
  --progress-fill-glow: rgba(92, 168, 220, 0.38);
  --primary-hover-shadow: rgba(47, 122, 184, 0.3);
  --detail-effect-bg: linear-gradient(135deg, rgba(200, 225, 248, 0.58), rgba(255, 255, 255, 0.78));
  --detail-effect-border: rgba(47, 122, 184, 0.2);
  --popover-extra-shadow: rgba(30, 55, 80, 0.09);
}

body[data-color="blossom"] {
  --bg-page: #faf5f7;
  --bg-glow-a: rgba(245, 215, 228, 0.85);
  --bg-glow-b: rgba(235, 200, 220, 0.48);
  --bg-glow-c: rgba(250, 235, 242, 0.95);
  --blob-a: rgba(230, 140, 175, 0.32);
  --blob-b: rgba(240, 190, 210, 0.38);
  --blob-c: rgba(255, 235, 220, 0.48);
  --text: #3a2430;
  --text-muted: #7a5f6c;
  --surface: rgba(255, 255, 255, 0.78);
  --accent: #c75b7a;
  --accent-soft: #e888a5;
  --leaf: #b85572;
  --orb-inner: #fff8fa;
  --glow-1: rgba(230, 130, 165, 0.4);
  --glow-2: rgba(245, 180, 200, 0.38);
  --progress: linear-gradient(90deg, #e07a96, #f0aac0);
  --border-soft: rgba(199, 91, 122, 0.16);
  --shadow-card: 0 4px 24px rgba(80, 45, 58, 0.06), 0 18px 48px rgba(80, 45, 58, 0.05);
  --shadow-float: 0 12px 40px rgba(199, 91, 122, 0.2);
  --shadow-ui: rgba(80, 45, 58, 0.07);
  --shadow-ui-strong: rgba(80, 45, 58, 0.11);
  --method-hover-shadow: rgba(80, 45, 58, 0.05);
  --method-selected-border: rgba(199, 91, 122, 0.35);
  --method-selected-bg: linear-gradient(135deg, rgba(248, 215, 228, 0.75), rgba(255, 255, 255, 0.92));
  --method-selected-shadow: rgba(199, 91, 122, 0.12);
  --settings-expanded-bg: rgba(248, 215, 228, 0.62);
  --settings-expanded-border: rgba(199, 91, 122, 0.28);
  --sound-hover-bg: rgba(253, 240, 245, 0.95);
  --sound-active-bg: rgba(248, 215, 228, 0.55);
  --sound-dot-glow: rgba(199, 91, 122, 0.22);
  --orb-ring-border: rgba(199, 91, 122, 0.14);
  --orb-core-bg:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.96), transparent 45%),
    radial-gradient(circle at 70% 78%, rgba(245, 200, 218, 0.42), transparent 50%),
    linear-gradient(165deg, #fff8fa, #fce8f0);
  --orb-core-shadow: 0 16px 48px rgba(80, 45, 58, 0.08);
  --countdown-border: rgba(199, 91, 122, 0.24);
  --countdown-shadow: rgba(80, 45, 58, 0.11);
  --progress-track-bg: rgba(199, 91, 122, 0.1);
  --progress-fill-glow: rgba(232, 136, 165, 0.38);
  --primary-hover-shadow: rgba(199, 91, 122, 0.28);
  --detail-effect-bg: linear-gradient(135deg, rgba(248, 215, 228, 0.55), rgba(255, 255, 255, 0.78));
  --detail-effect-border: rgba(199, 91, 122, 0.2);
  --popover-extra-shadow: rgba(80, 45, 58, 0.08);
}

body[data-color="harvest"] {
  --bg-page: #faf6ee;
  --bg-glow-a: rgba(240, 220, 185, 0.88);
  --bg-glow-b: rgba(235, 210, 165, 0.5);
  --bg-glow-c: rgba(250, 240, 220, 0.95);
  --blob-a: rgba(220, 170, 90, 0.32);
  --blob-b: rgba(235, 200, 130, 0.38);
  --blob-c: rgba(255, 235, 200, 0.5);
  --text: #3a3020;
  --text-muted: #7a6e55;
  --surface: rgba(255, 255, 255, 0.76);
  --accent: #b8832a;
  --accent-soft: #d9a84e;
  --leaf: #a67420;
  --orb-inner: #fffbf5;
  --glow-1: rgba(220, 160, 70, 0.4);
  --glow-2: rgba(240, 200, 120, 0.36);
  --progress: linear-gradient(90deg, #d4a03a, #ecc878);
  --border-soft: rgba(184, 131, 42, 0.18);
  --shadow-card: 0 4px 24px rgba(70, 55, 30, 0.07), 0 18px 48px rgba(70, 55, 30, 0.05);
  --shadow-float: 0 12px 40px rgba(184, 131, 42, 0.22);
  --shadow-ui: rgba(70, 55, 30, 0.08);
  --shadow-ui-strong: rgba(70, 55, 30, 0.12);
  --method-hover-shadow: rgba(70, 55, 30, 0.06);
  --method-selected-border: rgba(184, 131, 42, 0.4);
  --method-selected-bg: linear-gradient(135deg, rgba(250, 230, 200, 0.75), rgba(255, 255, 255, 0.92));
  --method-selected-shadow: rgba(184, 131, 42, 0.14);
  --settings-expanded-bg: rgba(250, 230, 200, 0.65);
  --settings-expanded-border: rgba(184, 131, 42, 0.3);
  --sound-hover-bg: rgba(255, 248, 235, 0.95);
  --sound-active-bg: rgba(250, 230, 200, 0.58);
  --sound-dot-glow: rgba(184, 131, 42, 0.22);
  --orb-ring-border: rgba(184, 131, 42, 0.15);
  --orb-core-bg:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.96), transparent 45%),
    radial-gradient(circle at 70% 78%, rgba(240, 210, 160, 0.45), transparent 50%),
    linear-gradient(165deg, #fffbf5, #f5ead8);
  --orb-core-shadow: 0 16px 48px rgba(70, 55, 30, 0.09);
  --countdown-border: rgba(184, 131, 42, 0.26);
  --countdown-shadow: rgba(70, 55, 30, 0.11);
  --progress-track-bg: rgba(184, 131, 42, 0.12);
  --progress-fill-glow: rgba(217, 168, 78, 0.4);
  --primary-hover-shadow: rgba(184, 131, 42, 0.3);
  --detail-effect-bg: linear-gradient(135deg, rgba(250, 230, 200, 0.58), rgba(255, 255, 255, 0.78));
  --detail-effect-border: rgba(184, 131, 42, 0.22);
  --popover-extra-shadow: rgba(70, 55, 30, 0.09);
}

body[data-color="lavender"] {
  --bg-page: #f4f2fa;
  --bg-glow-a: rgba(220, 210, 245, 0.9);
  --bg-glow-b: rgba(200, 185, 235, 0.48);
  --bg-glow-c: rgba(238, 235, 250, 0.96);
  --blob-a: rgba(160, 140, 220, 0.32);
  --blob-b: rgba(190, 170, 235, 0.36);
  --blob-c: rgba(230, 220, 250, 0.52);
  --text: #2a2540;
  --text-muted: #6a6280;
  --surface: rgba(255, 255, 255, 0.76);
  --accent: #6b5cae;
  --accent-soft: #9585d4;
  --leaf: #5d4e9e;
  --orb-inner: #faf8ff;
  --glow-1: rgba(150, 130, 210, 0.42);
  --glow-2: rgba(190, 175, 235, 0.38);
  --progress: linear-gradient(90deg, #8b7bd4, #b5a8e8);
  --border-soft: rgba(107, 92, 174, 0.16);
  --shadow-card: 0 4px 24px rgba(45, 40, 70, 0.07), 0 18px 48px rgba(45, 40, 70, 0.05);
  --shadow-float: 0 12px 40px rgba(107, 92, 174, 0.22);
  --shadow-ui: rgba(45, 40, 70, 0.08);
  --shadow-ui-strong: rgba(45, 40, 70, 0.12);
  --method-hover-shadow: rgba(45, 40, 70, 0.06);
  --method-selected-border: rgba(107, 92, 174, 0.38);
  --method-selected-bg: linear-gradient(135deg, rgba(230, 225, 248, 0.72), rgba(255, 255, 255, 0.92));
  --method-selected-shadow: rgba(107, 92, 174, 0.14);
  --settings-expanded-bg: rgba(230, 225, 248, 0.62);
  --settings-expanded-border: rgba(107, 92, 174, 0.28);
  --sound-hover-bg: rgba(246, 244, 252, 0.95);
  --sound-active-bg: rgba(230, 225, 248, 0.55);
  --sound-dot-glow: rgba(107, 92, 174, 0.22);
  --orb-ring-border: rgba(107, 92, 174, 0.14);
  --orb-core-bg:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.96), transparent 45%),
    radial-gradient(circle at 70% 78%, rgba(210, 200, 245, 0.42), transparent 50%),
    linear-gradient(165deg, #faf8ff, #ebe6f8);
  --orb-core-shadow: 0 16px 48px rgba(45, 40, 70, 0.09);
  --countdown-border: rgba(107, 92, 174, 0.24);
  --countdown-shadow: rgba(45, 40, 70, 0.11);
  --progress-track-bg: rgba(107, 92, 174, 0.11);
  --progress-fill-glow: rgba(149, 133, 212, 0.38);
  --primary-hover-shadow: rgba(107, 92, 174, 0.28);
  --detail-effect-bg: linear-gradient(135deg, rgba(230, 225, 248, 0.55), rgba(255, 255, 255, 0.78));
  --detail-effect-border: rgba(107, 92, 174, 0.2);
  --popover-extra-shadow: rgba(45, 40, 70, 0.09);
}

body[data-color="bamboo"] {
  --bg-page: #eef8f6;
  --bg-glow-a: rgba(190, 235, 225, 0.88);
  --bg-glow-b: rgba(160, 220, 210, 0.48);
  --bg-glow-c: rgba(225, 245, 242, 0.96);
  --blob-a: rgba(60, 190, 175, 0.32);
  --blob-b: rgba(120, 210, 200, 0.36);
  --blob-c: rgba(200, 240, 230, 0.5);
  --text: #153530;
  --text-muted: #4a7068;
  --surface: rgba(255, 255, 255, 0.75);
  --accent: #1f9b8a;
  --accent-soft: #4ec4b0;
  --leaf: #1a8878;
  --orb-inner: #f2fffc;
  --glow-1: rgba(50, 190, 170, 0.42);
  --glow-2: rgba(120, 220, 205, 0.38);
  --progress: linear-gradient(90deg, #3db9a8, #7dd4c8);
  --border-soft: rgba(31, 155, 138, 0.16);
  --shadow-card: 0 4px 24px rgba(25, 60, 55, 0.07), 0 18px 48px rgba(25, 60, 55, 0.05);
  --shadow-float: 0 12px 40px rgba(31, 155, 138, 0.22);
  --shadow-ui: rgba(25, 60, 55, 0.08);
  --shadow-ui-strong: rgba(25, 60, 55, 0.12);
  --method-hover-shadow: rgba(25, 60, 55, 0.06);
  --method-selected-border: rgba(31, 155, 138, 0.38);
  --method-selected-bg: linear-gradient(135deg, rgba(200, 240, 232, 0.72), rgba(255, 255, 255, 0.92));
  --method-selected-shadow: rgba(31, 155, 138, 0.14);
  --settings-expanded-bg: rgba(200, 240, 232, 0.62);
  --settings-expanded-border: rgba(31, 155, 138, 0.28);
  --sound-hover-bg: rgba(238, 252, 248, 0.95);
  --sound-active-bg: rgba(200, 240, 232, 0.55);
  --sound-dot-glow: rgba(31, 155, 138, 0.22);
  --orb-ring-border: rgba(31, 155, 138, 0.14);
  --orb-core-bg:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.96), transparent 45%),
    radial-gradient(circle at 70% 78%, rgba(160, 230, 218, 0.42), transparent 50%),
    linear-gradient(165deg, #f2fffc, #dff5f0);
  --orb-core-shadow: 0 16px 48px rgba(25, 60, 55, 0.09);
  --countdown-border: rgba(31, 155, 138, 0.24);
  --countdown-shadow: rgba(25, 60, 55, 0.11);
  --progress-track-bg: rgba(31, 155, 138, 0.11);
  --progress-fill-glow: rgba(78, 196, 176, 0.38);
  --primary-hover-shadow: rgba(31, 155, 138, 0.3);
  --detail-effect-bg: linear-gradient(135deg, rgba(200, 240, 232, 0.55), rgba(255, 255, 255, 0.78));
  --detail-effect-border: rgba(31, 155, 138, 0.2);
  --popover-extra-shadow: rgba(25, 60, 55, 0.09);
}