/* ═══════════════════════════════════════════════════════ habit-themes.css — 10 Themes for Habit Tracker Usage: Default (no attribute) = Classic (same as before) ═══════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────── 1. CLASSIC (default — same as original, no override) ────────────────────────────────────────────────────── */ /* Already defined in :root inside habit-styles.css */ /* ────────────────────────────────────────────────────── 2. MIDNIGHT — Dark navy, cool & focused ────────────────────────────────────────────────────── */ [data-theme="midnight"] { --bg: #0f1117; --surface: #1a1d27; --surface2: #22263a; --blue: #6ba3d6; --blue-soft: rgba(107,163,214,0.18); --green: #56c897; --green-soft: rgba(86,200,151,0.18); --pink: #e87fb5; --pink-soft: rgba(232,127,181,0.18); --amber: #f0b35a; --amber-soft: rgba(240,179,90,0.18); --purple: #b09ee0; --purple-soft: rgba(176,158,224,0.18); --text: #e8eaf6; --text-muted: #8892a4; --border: rgba(255,255,255,0.09); } [data-theme="midnight"] body { background: #0f1117; background-image: radial-gradient(ellipse at 0% 0%, rgba(107,163,214,0.12) 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(86,200,151,0.10) 0%, transparent 55%); } [data-theme="midnight"] .trust-card { background: linear-gradient(135deg, rgba(86,200,151,0.18), rgba(40,100,70,0.25)); border-color: rgba(86,200,151,0.2); } [data-theme="midnight"] .trust-card h2 { color: #56c897; } [data-theme="midnight"] .affirmation-card { background: linear-gradient(135deg, rgba(240,179,90,0.15), rgba(120,80,20,0.2)); border-color: rgba(240,179,90,0.2); } [data-theme="midnight"] .affirmation-card p { color: #d4a96a; } [data-theme="midnight"] .affirmation-text { color: #b8904a; } [data-theme="midnight"] .daily-habits-card { background: linear-gradient(135deg, rgba(107,163,214,0.15), rgba(50,80,110,0.2)); border-color: rgba(107,163,214,0.2); } [data-theme="midnight"] .area-chart-card { background: #1a1d27; border-color: rgba(255,255,255,0.09); } [data-theme="midnight"] .week-1 { background: linear-gradient(160deg, rgba(107,163,214,0.2), rgba(70,110,160,0.25)); } [data-theme="midnight"] .week-2 { background: linear-gradient(160deg, rgba(232,127,181,0.2), rgba(140,60,100,0.25)); } [data-theme="midnight"] .week-3 { background: linear-gradient(160deg, rgba(86,200,151,0.2), rgba(40,100,70,0.25)); } [data-theme="midnight"] .week-4 { background: linear-gradient(160deg, rgba(240,179,90,0.2), rgba(140,90,20,0.25)); } [data-theme="midnight"] .week-5 { background: linear-gradient(160deg, rgba(176,158,224,0.2), rgba(90,70,140,0.25)); } [data-theme="midnight"] .habit-grid-section { background: #1a1d27; border-color: rgba(255,255,255,0.09); } [data-theme="midnight"] .week-header { background: rgba(255,255,255,0.06); } [data-theme="midnight"] .habit-number { background: rgba(255,255,255,0.08); } [data-theme="midnight"] .top-habits-card, [data-theme="midnight"] .weekly-progress-card { background: linear-gradient(160deg, rgba(107,163,214,0.15), rgba(50,80,120,0.2)); border-color: rgba(107,163,214,0.2); } [data-theme="midnight"] .top-habit-item, [data-theme="midnight"] .weekly-progress-item, [data-theme="midnight"] .top-habits-header { background: rgba(255,255,255,0.06); } [data-theme="midnight"] .pink-card { background: linear-gradient(160deg, rgba(232,127,181,0.18), rgba(140,60,100,0.2)); } [data-theme="midnight"] .select-box, [data-theme="midnight"] .download-btn { background: #1a1d27; color: #e8eaf6; border-color: rgba(255,255,255,0.12); } /* ────────────────────────────────────────────────────── 3. CHERRY BLOSSOM — Warm pinks & rose tones ────────────────────────────────────────────────────── */ [data-theme="cherry"] { --bg: #fff5f7; --surface: #ffffff; --surface2: #fdeef1; --blue: #d45f8c; --blue-soft: #fad4e0; --green: #e8a0b4; --green-soft: #fae0e8; --pink: #c24470; --pink-soft: #f7c0d0; --amber: #e8879a; --amber-soft: #fcd4dc; --purple: #b05580; --purple-soft: #f0c8d8; --text: #3d1a26; --text-muted: #9c6070; --border: #f7c0cc; } [data-theme="cherry"] body { background: #fff5f7; background-image: radial-gradient(ellipse at 0% 0%, rgba(212,95,140,0.10) 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(232,135,154,0.10) 0%, transparent 55%); } [data-theme="cherry"] .trust-card { background: linear-gradient(135deg, #fad4e0, #f5b8cc); border-color: rgba(212,95,140,0.2); } [data-theme="cherry"] .trust-card h2 { color: #c2306a; } [data-theme="cherry"] .affirmation-card { background: linear-gradient(135deg, #fce8ec, #fad0d8); border-color: rgba(232,135,154,0.2); } [data-theme="cherry"] .affirmation-card p { color: #9c4060; } [data-theme="cherry"] .daily-habits-card { background: linear-gradient(135deg, #fce0e8, #f8c8d4); border-color: rgba(212,95,140,0.2); } [data-theme="cherry"] .week-1 { background: linear-gradient(160deg, #fad4e0, #f5b8cc); } [data-theme="cherry"] .week-2 { background: linear-gradient(160deg, #fce8ec, #fad0d8); } [data-theme="cherry"] .week-3 { background: linear-gradient(160deg, #fce0e8, #f8c8d4); } [data-theme="cherry"] .week-4 { background: linear-gradient(160deg, #fcd4dc, #f5bec8); } [data-theme="cherry"] .week-5 { background: linear-gradient(160deg, #f0c8d8, #e8b0c0); } [data-theme="cherry"] .top-habits-card, [data-theme="cherry"] .weekly-progress-card { background: linear-gradient(160deg, #fad4e0, #f5b8cc); border-color: rgba(212,95,140,0.2); } /* ────────────────────────────────────────────────────── 4. FOREST — Deep greens & earthy tones ────────────────────────────────────────────────────── */ [data-theme="forest"] { --bg: #f0f7f2; --surface: #ffffff; --surface2: #e8f4ec; --blue: #3a8f60; --blue-soft: #c8e8d4; --green: #5aaa74; --green-soft: #d4f0dc; --pink: #7ab88c; --pink-soft: #d8eedd; --amber: #8bc478; --amber-soft: #ddefd8; --purple: #4d9e6c; --purple-soft: #cce8d4; --text: #0e2218; --text-muted: #5a7a66; --border: #b8ddc4; } [data-theme="forest"] body { background: #f0f7f2; background-image: radial-gradient(ellipse at 0% 0%, rgba(58,143,96,0.10) 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(90,170,116,0.10) 0%, transparent 55%); } [data-theme="forest"] .trust-card { background: linear-gradient(135deg, #c8e8d4, #aedcc0); border-color: rgba(58,143,96,0.2); } [data-theme="forest"] .trust-card h2 { color: #1f6e40; } [data-theme="forest"] .affirmation-card { background: linear-gradient(135deg, #ddefd8, #c8e4c0); border-color: rgba(139,196,120,0.2); } [data-theme="forest"] .affirmation-card p { color: #3a6e48; } [data-theme="forest"] .daily-habits-card { background: linear-gradient(135deg, #cce8d4, #b8dcbc); border-color: rgba(58,143,96,0.2); } [data-theme="forest"] .week-1 { background: linear-gradient(160deg, #c8e8d4, #aedcc0); } [data-theme="forest"] .week-2 { background: linear-gradient(160deg, #d4f0dc, #bad8c0); } [data-theme="forest"] .week-3 { background: linear-gradient(160deg, #ddefd8, #c8e0bc); } [data-theme="forest"] .week-4 { background: linear-gradient(160deg, #cce8d4, #b4d8bc); } [data-theme="forest"] .week-5 { background: linear-gradient(160deg, #d8eedd, #c0e0c8); } [data-theme="forest"] .top-habits-card, [data-theme="forest"] .weekly-progress-card { background: linear-gradient(160deg, #c8e8d4, #aedcc0); border-color: rgba(58,143,96,0.2); } /* ────────────────────────────────────────────────────── 5. SUNSET — Warm oranges & golden gradient ────────────────────────────────────────────────────── */ [data-theme="sunset"] { --bg: #fff8f2; --surface: #ffffff; --surface2: #fff2e8; --blue: #e07840; --blue-soft: #fad4b8; --green: #e89040; --green-soft: #fce0b8; --pink: #d4604a; --pink-soft: #f8c8b8; --amber: #f0a840; --amber-soft: #fce8b8; --purple: #c86038; --purple-soft: #f4c0a8; --text: #2c1408; --text-muted: #9a6050; --border: #f0c8a8; } [data-theme="sunset"] body { background: #fff8f2; background-image: radial-gradient(ellipse at 0% 0%, rgba(224,120,64,0.10) 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(240,168,64,0.10) 0%, transparent 55%); } [data-theme="sunset"] .trust-card { background: linear-gradient(135deg, #fad4b8, #f8c0a0); border-color: rgba(224,120,64,0.2); } [data-theme="sunset"] .trust-card h2 { color: #c04010; } [data-theme="sunset"] .affirmation-card { background: linear-gradient(135deg, #fce8b8, #fad8a0); border-color: rgba(240,168,64,0.2); } [data-theme="sunset"] .affirmation-card p { color: #9a5030; } [data-theme="sunset"] .daily-habits-card { background: linear-gradient(135deg, #f4c0a8, #f0b090); border-color: rgba(224,120,64,0.2); } [data-theme="sunset"] .week-1 { background: linear-gradient(160deg, #fad4b8, #f8c0a0); } [data-theme="sunset"] .week-2 { background: linear-gradient(160deg, #f8c8b8, #f4b0a0); } [data-theme="sunset"] .week-3 { background: linear-gradient(160deg, #fce0b8, #f8ccA0); } [data-theme="sunset"] .week-4 { background: linear-gradient(160deg, #fce8b8, #f8d8a0); } [data-theme="sunset"] .week-5 { background: linear-gradient(160deg, #f4c0a8, #f0a898); } [data-theme="sunset"] .top-habits-card, [data-theme="sunset"] .weekly-progress-card { background: linear-gradient(160deg, #fad4b8, #f8c0a0); border-color: rgba(224,120,64,0.2); } /* ────────────────────────────────────────────────────── 6. OCEAN — Deep teals & aqua blues ────────────────────────────────────────────────────── */ [data-theme="ocean"] { --bg: #f0f8fb; --surface: #ffffff; --surface2: #e4f4f8; --blue: #2a9db8; --blue-soft: #b8e8f4; --green: #3ab8a0; --green-soft: #c0f0e8; --pink: #2888b0; --pink-soft: #b8ddf0; --amber: #40c0c8; --amber-soft: #c8f0f4; --purple: #1878a4; --purple-soft: #a8d4e8; --text: #082030; --text-muted: #4a8090; --border: #a8d8e8; } [data-theme="ocean"] body { background: #f0f8fb; background-image: radial-gradient(ellipse at 0% 0%, rgba(42,157,184,0.12) 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(58,184,160,0.10) 0%, transparent 55%); } [data-theme="ocean"] .trust-card { background: linear-gradient(135deg, #b8e8f4, #98d8ec); border-color: rgba(42,157,184,0.2); } [data-theme="ocean"] .trust-card h2 { color: #0a7090; } [data-theme="ocean"] .affirmation-card { background: linear-gradient(135deg, #c8f0f4, #a8e4ec); border-color: rgba(64,192,200,0.2); } [data-theme="ocean"] .affirmation-card p { color: #1a7080; } [data-theme="ocean"] .daily-habits-card { background: linear-gradient(135deg, #a8d4e8, #90c8e0); border-color: rgba(42,157,184,0.2); } [data-theme="ocean"] .week-1 { background: linear-gradient(160deg, #b8e8f4, #98d8ec); } [data-theme="ocean"] .week-2 { background: linear-gradient(160deg, #b8ddf0, #98cce8); } [data-theme="ocean"] .week-3 { background: linear-gradient(160deg, #c0f0e8, #a0e4dc); } [data-theme="ocean"] .week-4 { background: linear-gradient(160deg, #c8f0f4, #a8e4ec); } [data-theme="ocean"] .week-5 { background: linear-gradient(160deg, #a8d4e8, #88c4e0); } [data-theme="ocean"] .top-habits-card, [data-theme="ocean"] .weekly-progress-card { background: linear-gradient(160deg, #b8e8f4, #98d8ec); border-color: rgba(42,157,184,0.2); } /* ────────────────────────────────────────────────────── 7. LAVENDER — Soft purples & violet haze ────────────────────────────────────────────────────── */ [data-theme="lavender"] { --bg: #f5f2fc; --surface: #ffffff; --surface2: #eee8f8; --blue: #7c5bbf; --blue-soft: #ddd0f8; --green: #9a78d4; --green-soft: #ecdcf8; --pink: #b07de0; --pink-soft: #f0dcfc; --amber: #8868cc; --amber-soft: #e4d8f4; --purple: #6a4ab0; --purple-soft: #d8c8f4; --text: #1a0e30; --text-muted: #7060a0; --border: #d4c8ee; } [data-theme="lavender"] body { background: #f5f2fc; background-image: radial-gradient(ellipse at 0% 0%, rgba(124,91,191,0.10) 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(154,120,212,0.10) 0%, transparent 55%); } [data-theme="lavender"] .trust-card { background: linear-gradient(135deg, #ddd0f8, #ccc0f0); border-color: rgba(124,91,191,0.2); } [data-theme="lavender"] .trust-card h2 { color: #5a38a8; } [data-theme="lavender"] .affirmation-card { background: linear-gradient(135deg, #e4d8f4, #d4c8ec); border-color: rgba(136,104,204,0.2); } [data-theme="lavender"] .affirmation-card p { color: #684898; } [data-theme="lavender"] .daily-habits-card { background: linear-gradient(135deg, #d8c8f4, #c8b8ec); border-color: rgba(124,91,191,0.2); } [data-theme="lavender"] .week-1 { background: linear-gradient(160deg, #ddd0f8, #ccc0f0); } [data-theme="lavender"] .week-2 { background: linear-gradient(160deg, #f0dcfc, #e0ccf4); } [data-theme="lavender"] .week-3 { background: linear-gradient(160deg, #ecdcf8, #dccced); } [data-theme="lavender"] .week-4 { background: linear-gradient(160deg, #e4d8f4, #d4c4ec); } [data-theme="lavender"] .week-5 { background: linear-gradient(160deg, #d8c8f4, #c8b8e8); } [data-theme="lavender"] .top-habits-card, [data-theme="lavender"] .weekly-progress-card { background: linear-gradient(160deg, #ddd0f8, #ccc0f0); border-color: rgba(124,91,191,0.2); } /* ────────────────────────────────────────────────────── 8. SAKURA NIGHT — Dark + soft pinks (premium) ────────────────────────────────────────────────────── */ [data-theme="sakura-night"] { --bg: #12090e; --surface: #1e1018; --surface2: #281420; --blue: #f08ab0; --blue-soft: rgba(240,138,176,0.18); --green: #e87878; --green-soft: rgba(232,120,120,0.18); --pink: #f070a0; --pink-soft: rgba(240,112,160,0.18); --amber: #e0a0c0; --amber-soft: rgba(224,160,192,0.18); --purple: #d878c0; --purple-soft: rgba(216,120,192,0.18); --text: #f8e8f0; --text-muted: #b08898; --border: rgba(240,138,176,0.15); } [data-theme="sakura-night"] body { background: #12090e; background-image: radial-gradient(ellipse at 0% 0%, rgba(240,138,176,0.15) 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(216,120,192,0.10) 0%, transparent 55%); } [data-theme="sakura-night"] .trust-card { background: linear-gradient(135deg, rgba(240,112,160,0.2), rgba(180,60,100,0.25)); border-color: rgba(240,112,160,0.2); } [data-theme="sakura-night"] .trust-card h2 { color: #f080b0; } [data-theme="sakura-night"] .affirmation-card { background: linear-gradient(135deg, rgba(224,160,192,0.18), rgba(160,80,120,0.2)); border-color: rgba(224,160,192,0.2); } [data-theme="sakura-night"] .affirmation-card p { color: #e8a0c0; } [data-theme="sakura-night"] .daily-habits-card { background: linear-gradient(135deg, rgba(240,138,176,0.16), rgba(170,60,100,0.2)); border-color: rgba(240,138,176,0.2); } [data-theme="sakura-night"] .area-chart-card { background: #1e1018; border-color: rgba(240,138,176,0.15); } [data-theme="sakura-night"] .week-1 { background: linear-gradient(160deg, rgba(240,138,176,0.2), rgba(180,60,110,0.25)); } [data-theme="sakura-night"] .week-2 { background: linear-gradient(160deg, rgba(240,112,160,0.2), rgba(180,50,100,0.25)); } [data-theme="sakura-night"] .week-3 { background: linear-gradient(160deg, rgba(232,120,120,0.2), rgba(160,50,80,0.25)); } [data-theme="sakura-night"] .week-4 { background: linear-gradient(160deg, rgba(224,160,192,0.2), rgba(150,70,110,0.25)); } [data-theme="sakura-night"] .week-5 { background: linear-gradient(160deg, rgba(216,120,192,0.2), rgba(140,50,110,0.25)); } [data-theme="sakura-night"] .habit-grid-section { background: #1e1018; border-color: rgba(240,138,176,0.15); } [data-theme="sakura-night"] .week-header { background: rgba(255,255,255,0.05); } [data-theme="sakura-night"] .habit-number { background: rgba(255,255,255,0.06); } [data-theme="sakura-night"] .top-habits-card, [data-theme="sakura-night"] .weekly-progress-card { background: linear-gradient(160deg, rgba(240,138,176,0.16), rgba(170,60,100,0.2)); border-color: rgba(240,138,176,0.2); } [data-theme="sakura-night"] .top-habit-item, [data-theme="sakura-night"] .weekly-progress-item, [data-theme="sakura-night"] .top-habits-header { background: rgba(255,255,255,0.05); } [data-theme="sakura-night"] .pink-card { background: linear-gradient(160deg, rgba(240,112,160,0.2), rgba(180,50,100,0.25)); } [data-theme="sakura-night"] .select-box, [data-theme="sakura-night"] .download-btn { background: #1e1018; color: #f8e8f0; border-color: rgba(240,138,176,0.2); } /* ────────────────────────────────────────────────────── 9. SLATE — Minimal greys & mono tones ────────────────────────────────────────────────────── */ [data-theme="slate"] { --bg: #f5f5f7; --surface: #ffffff; --surface2: #eeeef2; --blue: #4a5568; --blue-soft: #d8dde8; --green: #606878; --green-soft: #dde0e8; --pink: #38445a; --pink-soft: #d0d4e0; --amber: #556070; --amber-soft: #d8dce4; --purple: #3a4458; --purple-soft: #ccd0dc; --text: #121822; --text-muted: #6a7280; --border: #d4d8e2; } [data-theme="slate"] body { background: #f5f5f7; background-image: radial-gradient(ellipse at 0% 0%, rgba(74,85,104,0.06) 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(96,104,120,0.06) 0%, transparent 55%); } [data-theme="slate"] .trust-card { background: linear-gradient(135deg, #d8dde8, #c8cdd8); border-color: rgba(74,85,104,0.18); } [data-theme="slate"] .trust-card h2 { color: #283040; } [data-theme="slate"] .affirmation-card { background: linear-gradient(135deg, #d8dce4, #c8ccd4); border-color: rgba(85,96,112,0.18); } [data-theme="slate"] .affirmation-card p { color: #485060; } [data-theme="slate"] .daily-habits-card { background: linear-gradient(135deg, #ccd0dc, #bcc0cc); border-color: rgba(74,85,104,0.18); } [data-theme="slate"] .week-1 { background: linear-gradient(160deg, #d8dde8, #c8cdd8); } [data-theme="slate"] .week-2 { background: linear-gradient(160deg, #d0d4e0, #c0c4d0); } [data-theme="slate"] .week-3 { background: linear-gradient(160deg, #dde0e8, #cdd0d8); } [data-theme="slate"] .week-4 { background: linear-gradient(160deg, #d8dce4, #c8ccd4); } [data-theme="slate"] .week-5 { background: linear-gradient(160deg, #ccd0dc, #bcc0cc); } [data-theme="slate"] .top-habits-card, [data-theme="slate"] .weekly-progress-card { background: linear-gradient(160deg, #d8dde8, #c8cdd8); border-color: rgba(74,85,104,0.18); } /* ────────────────────────────────────────────────────── 10. NEON — Cyberpunk dark + electric accents ────────────────────────────────────────────────────── */ [data-theme="neon"] { --bg: #08090f; --surface: #10121e; --surface2: #181a28; --blue: #00d4ff; --blue-soft: rgba(0,212,255,0.18); --green: #00ff88; --green-soft: rgba(0,255,136,0.18); --pink: #ff2d78; --pink-soft: rgba(255,45,120,0.18); --amber: #ffcc00; --amber-soft: rgba(255,204,0,0.18); --purple: #c420ff; --purple-soft: rgba(196,32,255,0.18); --text: #e0f0ff; --text-muted: #6080a0; --border: rgba(0,212,255,0.2); } [data-theme="neon"] body { background: #08090f; background-image: radial-gradient(ellipse at 0% 0%, rgba(0,212,255,0.15) 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(196,32,255,0.12) 0%, transparent 55%); } [data-theme="neon"] .trust-card { background: linear-gradient(135deg, rgba(0,255,136,0.12), rgba(0,180,80,0.2)); border-color: rgba(0,255,136,0.3); box-shadow: 0 0 20px rgba(0,255,136,0.1); } [data-theme="neon"] .trust-card h2 { color: #00ff88; } [data-theme="neon"] .affirmation-card { background: linear-gradient(135deg, rgba(255,204,0,0.12), rgba(200,140,0,0.2)); border-color: rgba(255,204,0,0.3); box-shadow: 0 0 20px rgba(255,204,0,0.1); } [data-theme="neon"] .affirmation-card p { color: #e0c060; } [data-theme="neon"] .daily-habits-card { background: linear-gradient(135deg, rgba(0,212,255,0.12), rgba(0,160,180,0.2)); border-color: rgba(0,212,255,0.3); box-shadow: 0 0 20px rgba(0,212,255,0.1); } [data-theme="neon"] .area-chart-card { background: #10121e; border-color: rgba(0,212,255,0.2); } [data-theme="neon"] .week-1 { background: linear-gradient(160deg, rgba(0,212,255,0.15), rgba(0,150,180,0.2)); border-color: rgba(0,212,255,0.25); } [data-theme="neon"] .week-2 { background: linear-gradient(160deg, rgba(255,45,120,0.15), rgba(200,20,80,0.2)); border-color: rgba(255,45,120,0.25); } [data-theme="neon"] .week-3 { background: linear-gradient(160deg, rgba(0,255,136,0.15), rgba(0,200,90,0.2)); border-color: rgba(0,255,136,0.25); } [data-theme="neon"] .week-4 { background: linear-gradient(160deg, rgba(255,204,0,0.15), rgba(200,150,0,0.2)); border-color: rgba(255,204,0,0.25); } [data-theme="neon"] .week-5 { background: linear-gradient(160deg, rgba(196,32,255,0.15), rgba(140,20,200,0.2)); border-color: rgba(196,32,255,0.25); } [data-theme="neon"] .habit-grid-section { background: #10121e; border-color: rgba(0,212,255,0.2); } [data-theme="neon"] .week-header { background: rgba(0,212,255,0.08); color: #00d4ff; } [data-theme="neon"] .habit-number { background: rgba(0,212,255,0.12); color: #00d4ff; } [data-theme="neon"] .top-habits-card, [data-theme="neon"] .weekly-progress-card { background: linear-gradient(160deg, rgba(0,212,255,0.12), rgba(0,160,180,0.2)); border-color: rgba(0,212,255,0.3); } [data-theme="neon"] .top-habit-item, [data-theme="neon"] .weekly-progress-item, [data-theme="neon"] .top-habits-header { background: rgba(0,212,255,0.06); } [data-theme="neon"] .pink-card { background: linear-gradient(160deg, rgba(255,45,120,0.15), rgba(200,20,80,0.2)); border-color: rgba(255,45,120,0.25); } [data-theme="neon"] .select-box, [data-theme="neon"] .download-btn { background: #10121e; color: #e0f0ff; border-color: rgba(0,212,255,0.25); } [data-theme="neon"] .habit-item:hover { background: rgba(0,212,255,0.06); } /* ════════════════════════════════════════════════════════ THEME SWITCHER PANEL ════════════════════════════════════════════════════════ */ .theme-trigger { position: fixed; bottom: 24px; right: 20px; z-index: 1000; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--border); box-shadow: 0 4px 20px rgba(0,0,0,0.14); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 22px; transition: transform 0.2s, box-shadow 0.2s; } .theme-trigger:hover { transform: scale(1.1) rotate(30deg); box-shadow: 0 6px 28px rgba(0,0,0,0.18); } .theme-panel { position: fixed; bottom: 84px; right: 20px; z-index: 999; background: var(--surface); border: 1.5px solid var(--border); border-radius: 20px; padding: 18px; box-shadow: 0 12px 48px rgba(0,0,0,0.15); width: 240px; display: none; flex-direction: column; gap: 10px; animation: panelIn 0.25s cubic-bezier(0.16,1,0.3,1); } .theme-panel.open { display: flex; } @keyframes panelIn { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .theme-panel-title { font-size: 10px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; } .theme-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .theme-dot { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 2.5px solid transparent; transition: transform 0.2s, border-color 0.2s; position: relative; } .theme-dot:hover { transform: scale(1.15); } .theme-dot.active { border-color: var(--text); } .theme-dot::after { content: attr(title); position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 700; color: var(--text-muted); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .theme-dot:hover::after { opacity: 1; } /* Dot preview colors */ .dot-classic { background: linear-gradient(135deg, #5a8fc4, #5ac49e); } .dot-midnight { background: linear-gradient(135deg, #1a1d27, #6ba3d6); } .dot-cherry { background: linear-gradient(135deg, #fce0e8, #d45f8c); } .dot-forest { background: linear-gradient(135deg, #3a8f60, #8bc478); } .dot-sunset { background: linear-gradient(135deg, #e07840, #f0a840); } .dot-ocean { background: linear-gradient(135deg, #2a9db8, #3ab8a0); } .dot-lavender { background: linear-gradient(135deg, #7c5bbf, #b07de0); } .dot-sakura-night{ background: linear-gradient(135deg, #12090e, #f08ab0); } .dot-slate { background: linear-gradient(135deg, #4a5568, #d8dde8); } .dot-neon { background: linear-gradient(135deg, #08090f, #00d4ff); border: 1px solid rgba(0,212,255,0.4); } @media (max-width: 768px) { .theme-trigger { bottom: 16px; right: 16px; } .theme-panel { bottom: 76px; right: 16px; width: 220px; } }