:root{--color-primary:hsl(40,7.3%,92%);--color-secondary:#f4f9f7;--color-accent:#0369a1;--color-accent-hover:#075985;--color-text-main:#0f172a;--color-text-dim:#475569;--color-success:#10b981;--color-warning:#f59e0b;--color-danger:#ef4444;--gradient-primary:linear-gradient(135deg,hsl(40,7.3%,92%) 0%,#f5f5f0 100%);--gradient-accent:linear-gradient(135deg,#0369a1 0%,#075985 100%);--gradient-glass:linear-gradient(145deg,rgba(255,255,255,0.95),rgba(245,243,239,0.95));--gradient-overlay:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 100%);--gradient-text-hero:linear-gradient(to bottom,#0f172a,#334155);--font-main:'Outfit',sans-serif;--font-size-base:16px;--font-weight-regular:400;--font-weight-medium:500;--font-weight-bold:700;--container-width:1240px;--header-height:80px;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-full:9999px;--shadow-sm:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px -1px rgba(0,0,0,0.1);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);--shadow-lg:0 20px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.1);--shadow-glow:0 0 15px rgba(2,132,199,0.15);--glass-blur:blur(12px);--glass-border:1px solid #cbd5e1;--transition-fast:0.2s cubic-bezier(0.4,0,0.2,1);--transition-base:0.3s cubic-bezier(0.4,0,0.2,1);--transition-smooth:0.5s cubic-bezier(0.4,0,0.2,1);--color-header-bg:rgba(255,255,255,0.9);--color-header-bg-scrolled:rgba(255,255,255,0.98);--color-input-bg:#ffffff;--color-input-bg-focus:hsl(40,7.3%,92%);--color-input-text:#334155;--color-input-border:#cbd5e1;--color-card-bg:#ffffff;--color-card-bg-hover:hsl(40,7.3%,92%);--color-card-popular-bg:rgba(205,217,238,0.8);}
[data-theme="dark"]{--color-primary:#0F172A;--color-secondary:#1E293B;--color-accent:#38bdf8;--color-accent-hover:#0ea5e9;--color-text-main:#f1f5f9;--color-text-dim:#94a3b8;--gradient-primary:linear-gradient(135deg,#0F172A 0%,#1E293B 100%);--gradient-accent:linear-gradient(135deg,#38bdf8 0%,#3b82f6 100%);--gradient-glass:linear-gradient(145deg,rgba(30,41,59,0.7),rgba(15,23,42,0.7));--gradient-overlay:linear-gradient(to bottom,rgba(15,23,42,0) 0%,rgba(15,23,42,0.8) 100%);--gradient-text-hero:linear-gradient(to bottom,#fff,#94a3b8);--shadow-sm:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--shadow-md:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);--shadow-lg:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);--shadow-glow:0 0 20px rgba(56,189,248,0.3);--glass-border:1px solid rgba(255,255,255,0.1);--color-header-bg:rgba(15,23,42,0.7);--color-header-bg-scrolled:rgba(15,23,42,0.9);--color-card-bg:rgba(30,41,59,0.5);--color-card-bg-hover:rgba(30,41,59,0.8);--color-card-popular-bg:rgba(30,41,59,0.8);--color-input-bg:#ffffff;--color-input-bg-focus:#f1f5f9;--color-input-text:#334155;--color-input-border:#cbd5e1;}
html{font-size:var(--font-size-base);scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body{font-family:var(--font-main);background:var(--color-primary);color:var(--color-text-main);line-height:1.6;overflow-x:hidden;}
::selection{background:var(--color-accent);color:var(--color-primary);}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--color-primary);}
::-webkit-scrollbar-thumb{background:var(--color-secondary);border-radius:var(--radius-full);border:2px solid var(--color-primary);}
.theme-switch{background-color:#87CEEB;border:none;cursor:pointer;border-radius:50px;position:relative;padding:5px;width:60px;height:30px;transition:background-color 0.5s ease;overflow:hidden;display:flex;align-items:center;box-shadow:inset 0 2px 5px rgba(0,0,0,0.2);}
.switch-handle{background-color:#FDB813;width:24px;height:24px;border-radius:50%;position:absolute;left:3px;transition:transform 0.5s cubic-bezier(0.4,0.0,0.2,1),background-color 0.5s ease;z-index:2;box-shadow:0 2px 4px rgba(0,0,0,0.2);}
.crater{background-color:#d4d4d8;position:absolute;border-radius:50%;opacity:0;transition:opacity 0.5s ease;}
.crater-1{width:5px;height:5px;top:4px;left:10px;}
.crater-2{width:3px;height:3px;top:12px;left:14px;}
.crater-3{width:4px;height:4px;top:15px;left:6px;}
.switch-decoration{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;}
.cloud{background:#fff;border-radius:50%;position:absolute;opacity:0.8;transition:transform 0.5s ease,opacity 0.5s ease;}
.cloud-1{width:12px;height:12px;top:5px;right:10px;}
.cloud-2{width:10px;height:10px;top:12px;right:4px;}
.cloud-3{width:8px;height:8px;top:8px;right:20px;}
.star{background:#fff;border-radius:50%;position:absolute;opacity:0;transition:opacity 0.5s ease;}
.star-1{width:2px;height:2px;top:6px;left:30px;}
.star-2{width:1px;height:1px;top:18px;left:25px;}
.star-3{width:2px;height:2px;top:10px;left:15px;}
.star-4{width:1px;height:1px;top:5px;left:45px;}
.star-5{width:2px;height:2px;top:20px;left:38px;}
[data-theme="dark"] .theme-switch{background-color:#1e293b;}
[data-theme="dark"] .switch-handle{transform:translateX(30px);background-color:#f4f4f5;box-shadow:inset -2px -1px 0 0 #e4e4e7;}
[data-theme="dark"] .crater{opacity:1;}
[data-theme="dark"] .cloud{transform:translateY(20px);opacity:0;}
[data-theme="dark"] .star{opacity:1;animation:twinkle 2s infinite ease-in-out alternate;}
[data-theme="dark"] .star-2{animation-delay:0.5s;}
[data-theme="dark"] .star-3{animation-delay:1.0s;}
[data-theme="dark"] .star-4{animation-delay:1.5s;}
@keyframes twinkle{0%{opacity:0.5;transform:scale(1);}
100%{opacity:1;transform:scale(1.2);}
}