/* ===== ROOT FALLBACK (Default Theme) ===== */
:root {
    --bg: #f4f7fc; --surface: #ffffff; --surface2: #f8faff; --surface3: #ffffff;
    --text: #1e2a3a; --text2: #475569; --text3: #94a3b8; --bg-pattern: none;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.08); --border-light: rgba(0, 0, 0, 0.06);
    --task-bg: rgba(255, 255, 255, 0.9); --bg-overlay: rgba(0, 0, 0, 0.1);
    --primary: #3b82f6; --primary-light: #60a5fa; --primary-dark: #2563eb;
    --radius: 20px; --radius-sm: 12px; --danger: #ef4444; --success: #22c55e; --warning: #f59e0b;
    --bg-blur: blur(16px);
}

/* ===== 16 BACKGROUND CLASSES + SHAPES ===== */
.bg-default { --bg: #f4f7fc; }
.bg-ocean { --bg: linear-gradient(135deg, #1a2980, #26d0ce); }
.bg-sunset { --bg: linear-gradient(135deg, #f12711, #f5af19); }
.bg-forest { --bg: linear-gradient(135deg, #0f2027, #203a43, #2c5364); --bg-pattern: radial-gradient(circle at 20% 80%, rgba(46,204,113,0.15) 0%, transparent 50%); }
.bg-night { --bg: linear-gradient(135deg, #0c0e1a, #1a1a3e, #2d1b4e); --bg-pattern: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.05) 0%, transparent 40%), radial-gradient(circle at 70% 60%, rgba(255,255,200,0.04) 0%, transparent 30%); }
.bg-beach { --bg: linear-gradient(180deg, #f7dc6f 0%, #f5b041 30%, #5dade2 60%, #1a5276 100%); }
.bg-modern { --bg: linear-gradient(135deg, #0c0e1a, #1a1a3e); --bg-pattern: repeating-linear-gradient(45deg, rgba(108,92,231,0.06) 0px, rgba(108,92,231,0.06) 2px, transparent 2px, transparent 8px), repeating-linear-gradient(-45deg, rgba(108,92,231,0.06) 0px, rgba(108,92,231,0.06) 2px, transparent 2px, transparent 8px); }
.bg-city { --bg: linear-gradient(180deg, #0c0e1a 0%, #1a1a3e 40%, #2d1b4e 70%, #1a1a3e 100%); --bg-pattern: radial-gradient(ellipse at 10% 90%, rgba(255,200,100,0.08) 0%, transparent 30%), radial-gradient(ellipse at 90% 85%, rgba(255,200,100,0.06) 0%, transparent 25%), radial-gradient(ellipse at 50% 95%, rgba(255,200,100,0.04) 0%, transparent 40%); }
.bg-lavender { --bg: linear-gradient(135deg, #8e44ad, #9b59b6, #a29bfe); }
.bg-autumn { --bg: linear-gradient(135deg, #d35400, #f39c12, #e67e22); }
.bg-aurora { --bg: linear-gradient(135deg, #0f0c29, #302b63, #24243e); --bg-pattern: radial-gradient(ellipse at 20% 30%, rgba(0,255,200,0.06) 0%, transparent 40%), radial-gradient(ellipse at 80% 70%, rgba(255,0,200,0.06) 0%, transparent 40%), radial-gradient(ellipse at 50% 50%, rgba(0,200,255,0.04) 0%, transparent 50%); }
.bg-rose { --bg: linear-gradient(135deg, #ff6b6b, #ee5a24, #6c5ce7); }
.bg-spring { --bg: linear-gradient(135deg, #11998e, #38ef7d); }
.bg-charcoal { --bg: linear-gradient(135deg, #1a1a1a, #2a2a2a); --surface: rgba(30,30,30,0.85); --surface2: rgba(40,40,40,0.8); --surface3: #1e1e1e; --text: #e8e8f0; --text2: #b0b0b0; --text3: #777; --shadow: 0 8px 32px rgba(0,0,0,0.7); --border-light: rgba(255,255,255,0.06); --task-bg: rgba(30,30,30,0.92); --bg-overlay: rgba(0,0,0,0.5); }
.bg-deepspace { --bg: linear-gradient(135deg, #0b0b1a, #1a1a3e, #2d1b4e); --bg-pattern: radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.4), transparent), radial-gradient(1px 1px at 80% 70%, rgba(255,255,255,0.3), transparent), radial-gradient(1.5px 1.5px at 50% 90%, rgba(255,255,255,0.5), transparent), radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,0.2), transparent); --surface: rgba(15,15,35,0.85); --surface2: rgba(25,25,55,0.8); --surface3: #12122a; --text: #e8e8f0; --text2: #b0b0cc; --text3: #6a6a8a; --shadow: 0 8px 32px rgba(0,0,0,0.8); --border-light: rgba(255,255,255,0.06); --task-bg: rgba(20,20,50,0.92); --bg-overlay: rgba(0,0,0,0.5); }
.bg-minimal { --bg: #ffffff; --surface: rgba(240,240,245,0.7); --surface2: rgba(230,230,235,0.8); --surface3: #ffffff; --text: #1a1a2e; --text2: #4a4a6a; --text3: #8a8aaa; --shadow: 0 8px 32px rgba(0,0,0,0.04); --border-light: rgba(0,0,0,0.06); --task-bg: #ffffff; --bg-overlay: rgba(200,200,210,0.3); }
.bg-cream { --bg: #fdfbf7; --surface: rgba(255,252,245,0.85); --surface2: rgba(245,240,230,0.8); --surface3: #fdfbf7; --text: #2a2418; --text2: #5a5040; --text3: #8a8070; --shadow: 0 8px 32px rgba(160,130,100,0.08); --border-light: rgba(200,180,160,0.15); --task-bg: #ffffff; --bg-overlay: rgba(220,210,190,0.2); }

/* ===== APP SHELL ===== */
#app { background: var(--bg); transition: background 0.5s ease; position: relative; min-height: 100vh; }
#app::before { content: ''; position: absolute; inset: 0; background: var(--bg-pattern); pointer-events: none; z-index: 0; }
#app > * { position: relative; z-index: 1; }