/* ==========================================
   FOREST THEME
   ========================================== */

body.forest {
    background: linear-gradient(180deg, #1a3a2e 0%, #16423c 50%, #0f2a26 100%);
    color: #d4e5dc;
}

body.forest::before {
    background-image:
        radial-gradient(circle at 15% 25%, rgba(72, 130, 88, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(34, 87, 63, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 50% 90%, rgba(46, 125, 50, 0.05) 0%, transparent 50%);
}

body.forest .header h1 {
    color: #81c784;
}

body.forest .segmented-option input[type="radio"]:checked + label {
    width: var(--button-size);
    height: var(--button-size);
    border-color: rgba(129, 199, 132, 0.4);
    color: #81c784;
    box-shadow: inset 0 0 16px rgba(129, 199, 132, 0.1);
}

body.forest .segmented-option.time-hours input[type="radio"]:checked + label,
body.forest .segmented-option.time-minutes input[type="radio"]:checked + label {
    width: var(--button-size);
    height: var(--button-size);
    border-color: rgba(129, 199, 132, 0.4);
    color: #81c784;
    box-shadow: inset 0 0 16px rgba(129, 199, 132, 0.1);
}

body.forest .segmented-control::before {
    background: linear-gradient(135deg, #81c784, #66bb6a);
}

body.forest .theme-selector .segmented-option input[type="radio"]:checked + label {
    background: transparent;
    width: 32px;
    height: 32px;
    border-color: transparent;
    box-shadow: none;
}

body.forest .pie-chart .progress-circle {
    stroke: #81c784;
}

body.forest .meditation-circle {
    background: radial-gradient(circle, rgba(76, 175, 80, 0.15) 0%, rgba(29, 69, 46, 0.3) 100%);
    border: 2px solid rgba(129, 199, 132, 0.4);
}

body.forest .meditation-circle::before {
    background: radial-gradient(circle, rgba(76, 175, 80, 0.15) 0%, rgba(29, 69, 46, 0.3) 100%);
    border: 2px solid rgba(129, 199, 132, 0.4);
    animation: forestBreath 6s ease-in-out infinite;
}

@keyframes forestBreath {
    0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(76, 175, 80, 0.2); }
    50% { transform: scale(1.03); box-shadow: 0 0 30px rgba(76, 175, 80, 0.3); }
}

body.forest .interval-text { color: #a5d6a7; }
body.forest .interval-number { color: #81c784; }
body.forest .interval-unit { color: #a5d6a7; }
body.forest .interval-until { color: #a5d6a7; }

body.forest .zen-btn.primary {
    border-color: rgba(129, 199, 132, 0.4);
    color: #81c784;
    box-shadow: inset 0 0 16px rgba(129, 199, 132, 0.1);
}

body.forest .zen-btn.primary:hover {
    border-color: rgba(129, 199, 132, 0.5);
    box-shadow: inset 0 0 20px rgba(129, 199, 132, 0.15);
}

body.forest .tab-button.active {
    border-color: rgba(129, 199, 132, 0.4);
    color: #81c784;
    box-shadow: inset 0 0 16px rgba(129, 199, 132, 0.1);
}

body.forest .tab-button.active svg {
    color: #81c784;
}


/* ==========================================
   STARLIGHT THEME
   ========================================== */

body.starlight {
    background: linear-gradient(180deg, #0f0f23 0%, #1a1a3a 50%, #0f0f23 100%);
    color: #e6e6ff;
    overflow-x: hidden;
}

body.starlight::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 25% 25%, rgba(138, 131, 238, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(186, 147, 216, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

body.starlight .header h1 {
    color: #c7d2fe;
    text-shadow: 0 0 10px rgba(199, 210, 254, 0.3);
}

body.starlight .segmented-option input[type="radio"]:checked + label {
    width: var(--button-size);
    height: var(--button-size);
    border-color: rgba(199, 210, 254, 0.4);
    color: #c7d2fe;
    box-shadow: inset 0 0 16px rgba(199, 210, 254, 0.1);
}

body.starlight .segmented-option.time-hours input[type="radio"]:checked + label,
body.starlight .segmented-option.time-minutes input[type="radio"]:checked + label {
    width: var(--button-size);
    height: var(--button-size);
    border-color: rgba(199, 210, 254, 0.4);
    color: #c7d2fe;
    box-shadow: inset 0 0 16px rgba(199, 210, 254, 0.1);
}

body.starlight .segmented-control::before {
    background: linear-gradient(135deg, #c7d2fe, #a5b4fc);
}

body.starlight .theme-selector .segmented-option input[type="radio"]:checked + label {
    background: transparent;
    width: 32px;
    height: 32px;
    border-color: transparent;
    box-shadow: none;
}

body.starlight .pie-chart .progress-circle {
    stroke: #ffffff;
}

body.starlight .meditation-circle {
    background: radial-gradient(circle, rgba(138, 131, 238, 0.15) 0%, rgba(15, 15, 35, 0.3) 100%);
    border: 2px solid rgba(199, 210, 254, 0.4);
    box-shadow: 0 0 30px rgba(138, 131, 238, 0.2), inset 0 0 20px rgba(199, 210, 254, 0.1);
}

body.starlight .meditation-circle::before {
    background: radial-gradient(circle, rgba(138, 131, 238, 0.15) 0%, rgba(15, 15, 35, 0.3) 100%);
    border: 2px solid rgba(199, 210, 254, 0.4);
    animation: cosmicPulse 12s ease-in-out infinite;
    box-shadow: 0 0 30px rgba(138, 131, 238, 0.2), inset 0 0 20px rgba(199, 210, 254, 0.1);
}

@keyframes cosmicPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(138, 131, 238, 0.2), inset 0 0 20px rgba(199, 210, 254, 0.1); }
    25% { transform: scale(1.03); box-shadow: 0 0 40px rgba(186, 147, 216, 0.3), inset 0 0 25px rgba(199, 210, 254, 0.15); }
    50% { transform: scale(0.98); box-shadow: 0 0 25px rgba(138, 131, 238, 0.25), inset 0 0 15px rgba(199, 210, 254, 0.08); }
    75% { transform: scale(1.05); box-shadow: 0 0 45px rgba(186, 147, 216, 0.35), inset 0 0 30px rgba(199, 210, 254, 0.2); }
}

body.starlight .interval-text { color: #a5b4fc; }
body.starlight .interval-number { color: #c7d2fe; text-shadow: 0 0 10px rgba(199, 210, 254, 0.4); }
body.starlight .interval-unit { color: #a5b4fc; }
body.starlight .interval-until { color: #a5b4fc; }

body.starlight .zen-btn.primary {
    border-color: rgba(199, 210, 254, 0.4);
    color: #c7d2fe;
    box-shadow: inset 0 0 16px rgba(199, 210, 254, 0.1);
}

body.starlight .zen-btn.primary:hover {
    border-color: rgba(199, 210, 254, 0.5);
    box-shadow: inset 0 0 20px rgba(199, 210, 254, 0.15);
}

body.starlight .pulse {
    animation: starPulse 6s ease-in-out infinite;
}

@keyframes starPulse {
    0%, 100% { opacity: 0.6; text-shadow: 0 0 5px rgba(199, 210, 254, 0.3); }
    50% { opacity: 1; text-shadow: 0 0 15px rgba(199, 210, 254, 0.6); }
}

body.starlight .tab-button.active {
    border-color: rgba(199, 210, 254, 0.4);
    color: #c7d2fe;
    box-shadow: inset 0 0 16px rgba(199, 210, 254, 0.1);
}

body.starlight .tab-button.active svg {
    color: #c7d2fe;
}


/* ==========================================
   FIRE THEME
   ========================================== */

body.fire {
    background: linear-gradient(180deg, #3a1a0f 0%, #5c2317 50%, #3a1a0f 100%);
    color: #ffe8dc;
}

body.fire::before {
    background-image:
        radial-gradient(circle at 25% 75%, rgba(255, 99, 71, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 75% 25%, rgba(255, 140, 0, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(220, 20, 60, 0.05) 0%, transparent 50%);
    animation: fireFlicker 4s ease-in-out infinite;
}

@keyframes fireFlicker {
    0%, 100% { opacity: 1; }
    25% { opacity: 0.8; }
    50% { opacity: 1.2; }
    75% { opacity: 0.9; }
}

body.fire .header h1 {
    color: #ff7043;
    text-shadow: 0 0 8px rgba(255, 112, 67, 0.4);
}

body.fire .segmented-option input[type="radio"]:checked + label {
    width: var(--button-size);
    height: var(--button-size);
    border-color: rgba(255, 107, 107, 0.4);
    color: #ff6b6b;
    box-shadow: inset 0 0 16px rgba(255, 107, 107, 0.1);
}

body.fire .segmented-option.time-hours input[type="radio"]:checked + label,
body.fire .segmented-option.time-minutes input[type="radio"]:checked + label {
    width: var(--button-size);
    height: var(--button-size);
    border-color: rgba(255, 107, 107, 0.4);
    color: #ff6b6b;
    box-shadow: inset 0 0 16px rgba(255, 107, 107, 0.1);
}

body.fire .segmented-control::before {
    background: linear-gradient(135deg, #ff7043, #ff5722);
}

body.fire .theme-selector .segmented-option input[type="radio"]:checked + label {
    background: transparent;
    width: 32px;
    height: 32px;
    border-color: transparent;
    box-shadow: none;
}

body.fire .pie-chart .progress-circle {
    stroke: #ff6b6b;
}

body.fire .meditation-circle {
    background: radial-gradient(circle, rgba(255, 99, 71, 0.15) 0%, rgba(58, 26, 15, 0.3) 100%);
    border: 2px solid rgba(255, 112, 67, 0.4);
    box-shadow: 0 0 25px rgba(255, 99, 71, 0.2);
}

body.fire .meditation-circle::before {
    background: radial-gradient(circle, rgba(255, 99, 71, 0.15) 0%, rgba(58, 26, 15, 0.3) 100%);
    border: 2px solid rgba(255, 112, 67, 0.4);
    animation: fireGlow 5s ease-in-out infinite;
    box-shadow: 0 0 25px rgba(255, 99, 71, 0.2);
}

@keyframes fireGlow {
    0%, 100% { transform: scale(1); box-shadow: 0 0 25px rgba(255, 99, 71, 0.2); }
    25% { transform: scale(1.02); box-shadow: 0 0 35px rgba(255, 140, 0, 0.3); }
    50% { transform: scale(0.99); box-shadow: 0 0 20px rgba(220, 20, 60, 0.25); }
    75% { transform: scale(1.04); box-shadow: 0 0 40px rgba(255, 99, 71, 0.35); }
}

body.fire .interval-text { color: #ffab91; }
body.fire .interval-number { color: #ff7043; }
body.fire .interval-unit { color: #ffab91; }
body.fire .interval-until { color: #ffab91; }

body.fire .zen-btn.primary {
    border-color: rgba(255, 112, 67, 0.4);
    color: #ff7043;
    box-shadow: inset 0 0 16px rgba(255, 112, 67, 0.1);
}

body.fire .zen-btn.primary:hover {
    border-color: rgba(255, 112, 67, 0.5);
    box-shadow: inset 0 0 20px rgba(255, 112, 67, 0.15);
}

body.fire .tab-button.active {
    border-color: rgba(255, 107, 107, 0.4);
    color: #ff6b6b;
    box-shadow: inset 0 0 16px rgba(255, 107, 107, 0.1);
}

body.fire .tab-button.active svg {
    color: #ff6b6b;
}


/* ==========================================
   STONE THEME
   ========================================== */

body.stone {
    background: linear-gradient(180deg, #374151 0%, #4b5563 50%, #374151 100%);
    color: #f3f4f6;
}

body.stone::before {
    background-image:
        radial-gradient(circle at 30% 20%, rgba(156, 163, 175, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(209, 213, 219, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(243, 244, 246, 0.04) 0%, transparent 60%);
    animation: windFlow 8s ease-in-out infinite;
}

@keyframes windFlow {
    0%, 100% { transform: translateX(0px) scale(1); }
    33% { transform: translateX(5px) scale(1.02); }
    66% { transform: translateX(-3px) scale(0.98); }
}

body.stone .header h1 {
    color: #d1d5db;
}

body.stone .segmented-option input[type="radio"]:checked + label {
    width: var(--button-size);
    height: var(--button-size);
    border-color: rgba(209, 213, 219, 0.4);
    color: #d1d5db;
    box-shadow: inset 0 0 16px rgba(209, 213, 219, 0.1);
}

body.stone .segmented-option.time-hours input[type="radio"]:checked + label,
body.stone .segmented-option.time-minutes input[type="radio"]:checked + label {
    width: var(--button-size);
    height: var(--button-size);
    border-color: rgba(209, 213, 219, 0.4);
    color: #d1d5db;
    box-shadow: inset 0 0 16px rgba(209, 213, 219, 0.1);
}

body.stone .segmented-control::before {
    background: linear-gradient(135deg, #d1d5db, #9ca3af);
}

body.stone .theme-selector .segmented-option input[type="radio"]:checked + label {
    background: transparent;
    width: 32px;
    height: 32px;
    border-color: transparent;
    box-shadow: none;
}

body.stone .pie-chart .progress-circle {
    stroke: #87ceeb;
}

body.stone .meditation-circle {
    background: radial-gradient(circle, rgba(156, 163, 175, 0.15) 0%, rgba(55, 65, 81, 0.3) 100%);
    border: 2px solid rgba(209, 213, 219, 0.4);
}

body.stone .meditation-circle::before {
    background: radial-gradient(circle, rgba(156, 163, 175, 0.15) 0%, rgba(55, 65, 81, 0.3) 100%);
    border: 2px solid rgba(209, 213, 219, 0.4);
    animation: stoneDance 7s ease-in-out infinite;
}

@keyframes stoneDance {
    0%, 100% { transform: scale(1) rotate(0deg); box-shadow: 0 0 20px rgba(156, 163, 175, 0.2); }
    33% { transform: scale(1.02) rotate(0.5deg); box-shadow: 0 0 25px rgba(209, 213, 219, 0.25); }
    66% { transform: scale(0.98) rotate(-0.5deg); box-shadow: 0 0 18px rgba(156, 163, 175, 0.18); }
}

body.stone .interval-text { color: #d1d5db; }
body.stone .interval-number { color: #f3f4f6; }
body.stone .interval-unit { color: #d1d5db; }
body.stone .interval-until { color: #d1d5db; }

body.stone .zen-btn.primary {
    border-color: rgba(209, 213, 219, 0.4);
    color: #d1d5db;
    box-shadow: inset 0 0 16px rgba(209, 213, 219, 0.1);
}

body.stone .zen-btn.primary:hover {
    border-color: rgba(209, 213, 219, 0.5);
    box-shadow: inset 0 0 20px rgba(209, 213, 219, 0.15);
}

body.stone .tab-button.active {
    border-color: rgba(209, 213, 219, 0.4);
    color: #d1d5db;
    box-shadow: inset 0 0 16px rgba(209, 213, 219, 0.1);
}

body.stone .tab-button.active svg {
    color: #d1d5db;
}


/* ==========================================
   WATER THEME
   ========================================== */

body.water {
    background: linear-gradient(180deg, #0c4a6e 0%, #075985 30%, #0369a1 60%, #0284c7 100%);
    color: #e0f2fe;
}

body.water::before {
    background-image:
        radial-gradient(circle at 20% 30%, rgba(14, 165, 233, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(56, 189, 248, 0.15) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(125, 211, 252, 0.1) 0%, transparent 60%),
        radial-gradient(circle at 10% 80%, rgba(6, 182, 212, 0.12) 0%, transparent 40%);
    animation: oceanWaves 12s ease-in-out infinite;
}

@keyframes oceanWaves {
    0%, 100% {
        transform: scale(1) rotate(0deg) translateY(0px);
        opacity: 1;
    }
    25% {
        transform: scale(1.02) rotate(0.3deg) translateY(-2px);
        opacity: 0.9;
    }
    50% {
        transform: scale(0.98) rotate(-0.2deg) translateY(1px);
        opacity: 1.1;
    }
    75% {
        transform: scale(1.01) rotate(0.1deg) translateY(-1px);
        opacity: 0.95;
    }
}

body.water .header h1 {
    color: #38bdf8;
    text-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
}

body.water .segmented-option input[type="radio"]:checked + label {
    width: var(--button-size);
    height: var(--button-size);
    border-color: rgba(56, 189, 248, 0.5);
    color: #38bdf8;
    box-shadow: inset 0 0 20px rgba(56, 189, 248, 0.15);
}

body.water .segmented-option.time-hours input[type="radio"]:checked + label,
body.water .segmented-option.time-minutes input[type="radio"]:checked + label {
    width: var(--button-size);
    height: var(--button-size);
    border-color: rgba(56, 189, 248, 0.5);
    color: #38bdf8;
    box-shadow: inset 0 0 20px rgba(56, 189, 248, 0.15);
}

body.water .segmented-control::before {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9);
}

body.water .theme-selector .segmented-option input[type="radio"]:checked + label {
    background: transparent;
    width: 32px;
    height: 32px;
    border-color: transparent;
    box-shadow: none;
}

body.water .pie-chart .progress-circle {
    stroke: #38bdf8;
}

body.water .meditation-circle {
    background: radial-gradient(circle, rgba(56, 189, 248, 0.25) 0%, rgba(14, 165, 233, 0.4) 100%);
    border: 2px solid rgba(56, 189, 248, 0.6);
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.4), inset 0 0 25px rgba(14, 165, 233, 0.2);
}

body.water .meditation-circle::before {
    background: radial-gradient(circle, rgba(56, 189, 248, 0.25) 0%, rgba(14, 165, 233, 0.4) 100%);
    border: 2px solid rgba(56, 189, 248, 0.6);
    animation: oceanRipple 15s ease-in-out infinite;
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.4), inset 0 0 25px rgba(14, 165, 233, 0.2);
}

@keyframes oceanRipple {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 30px rgba(56, 189, 248, 0.4), inset 0 0 25px rgba(14, 165, 233, 0.2);
    }
    25% {
        transform: scale(1.02);
        box-shadow: 0 0 35px rgba(56, 189, 248, 0.5), inset 0 0 30px rgba(14, 165, 233, 0.25);
    }
    50% {
        transform: scale(1.01);
        box-shadow: 0 0 40px rgba(14, 165, 233, 0.6), inset 0 0 20px rgba(56, 189, 248, 0.15);
    }
    75% {
        transform: scale(1.03);
        box-shadow: 0 0 45px rgba(56, 189, 248, 0.55), inset 0 0 35px rgba(14, 165, 233, 0.3);
    }
}

body.water .interval-text { color: #7dd3fc; }
body.water .interval-number { color: #38bdf8; text-shadow: 0 0 15px rgba(56, 189, 248, 0.6); }
body.water .interval-unit { color: #7dd3fc; }
body.water .interval-until { color: #7dd3fc; }

body.water .zen-btn.primary {
    border-color: rgba(56, 189, 248, 0.5);
    color: #38bdf8;
    box-shadow: inset 0 0 20px rgba(56, 189, 248, 0.15);
}

body.water .zen-btn.primary:hover {
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow: inset 0 0 25px rgba(56, 189, 248, 0.2);
}

body.water .tab-button.active {
    border-color: rgba(56, 189, 248, 0.5);
    color: #38bdf8;
    box-shadow: inset 0 0 20px rgba(56, 189, 248, 0.15);
}

body.water .tab-button.active svg {
    color: #38bdf8;
}