/* SYSTEM FONTS (Datenschutzfreundlich & Schnell) */
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow-x: hidden; 
}

/* --- BACKGROUND VIDEO --- */
#bg-video {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: -1; opacity: 0; transition: opacity 1.5s ease-in-out;
}

/* --- GRADIENTS --- */
.bg-gradient-animate {
    background-size: 200% 200%; 
    animation: gradientMove 15s ease infinite; 
    z-index: -2;
}
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Color Themes */
.mode-pomodoro { background: linear-gradient(-45deg, #0f172a, #1e1b4b, #312e81, #1e293b); }
.mode-shortBreak { background: linear-gradient(-45deg, #064e3b, #0f766e, #115e59, #134e4a); }
.mode-longBreak { background: linear-gradient(-45deg, #1e1b4b, #4c1d95, #581c87, #3b0764); }

/* --- GLASS PANEL --- */
.glass-panel {
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1); 
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- ZEN MODE --- */
body.zen-active #bg-video { opacity: 1; }
body.zen-active .hide-in-zen { opacity: 0; transform: translateY(-40px); pointer-events: none; }
body.zen-active .glass-panel { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; }

/* Pulse Animation */
@keyframes softPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); background: rgba(255,255,255,0.1); }
    70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); background: rgba(255,255,255,0.2); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); background: rgba(255,255,255,0.1); }
}
.suggestion-pulse { animation: softPulse 2s infinite; }

/* Zen Button Position */
#toggle-zen { transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); z-index: 100; }
body.zen-active #toggle-zen {
    position: fixed; top: 30px; left: 50%; transform: translateX(-50%);
    width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255,255,255,0.3);
    color: white; backdrop-filter: blur(4px); padding: 0;
}
body.zen-active #toggle-zen:hover { background: rgba(255, 255, 255, 0.2); transform: translateX(-50%) scale(1.1); }

/* --- UI UTILS --- */
.btn-active { background: rgba(255, 255, 255, 0.2); font-weight: 600; }
.btn-ghost { background: transparent; opacity: 0.7; }
.task-done { text-decoration: line-through; opacity: 0.5; }
.custom-checkbox { appearance: none; width: 1.2em; height: 1.2em; border: 2px solid rgba(255,255,255,0.5); border-radius: 50%; display: grid; place-content: center; cursor: pointer; }
.custom-checkbox::before { content: ""; width: 0.65em; height: 0.65em; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em white; border-radius: 50%; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.custom-checkbox:checked::before { transform: scale(1); }

/* Typography for Text Pages */
h2 { margin-top: 2rem; margin-bottom: 0.5rem; color: white; font-weight: 600; font-size: 1.25rem; }
p, li { line-height: 1.6; margin-bottom: 1rem; }