:root{--bg-primary:#ffffff;--bg-secondary:#f8f8f8;--bg-tertiary:#f0f0f0;--bg-hover:#efefef;--text-primary:#1a1a1a;--text-secondary:#666666;--text-tertiary:#999999;--border-color:rgba(0, 0, 0, 0.06);--border-color-hover:rgba(0, 0, 0, 0.12);--accent-primary:#3b3b3b;--accent-secondary:#6b6b6b;--accent-tertiary:#9a9a9a;--shadow-sm:0 1px 3px rgba(0, 0, 0, 0.04);--shadow-md:0 4px 8px rgba(0, 0, 0, 0.05);--shadow-lg:0 12px 24px rgba(0, 0, 0, 0.08);--shadow-xl:0 24px 40px rgba(0, 0, 0, 0.12);--glass-bg:rgba(255, 255, 255, 0.75);--glass-border:rgba(255, 255, 255, 0.3);--glass-backdrop:12px;--transition-speed:0.2s}html.dark-mode{--bg-primary:#0a0a0c;--bg-secondary:#131316;--bg-tertiary:#1c1c21;--bg-hover:#26262d;--text-primary:#ffffff;--text-secondary:#a0a0a8;--text-tertiary:#6e6e77;--border-color:rgba(255, 255, 255, 0.06);--border-color-hover:rgba(255, 255, 255, 0.12);--accent-primary:#3a3a40;--accent-secondary:#55555e;--accent-tertiary:#6e6e77;--shadow-sm:0 1px 3px rgba(0, 0, 0, 0.2);--shadow-md:0 4px 8px rgba(0, 0, 0, 0.3);--shadow-lg:0 12px 24px rgba(0, 0, 0, 0.4);--shadow-xl:0 24px 40px rgba(0, 0, 0, 0.5);--glass-bg:rgba(20, 20, 28, 0.85);--glass-border:rgba(255, 255, 255, 0.08);--glass-backdrop:12px}*,body,html{transition:background-color var(--transition-speed) cubic-bezier(.2, .9, .4, 1.1),color var(--transition-speed) cubic-bezier(.2, .9, .4, 1.1),border-color var(--transition-speed) cubic-bezier(.2, .9, .4, 1.1),box-shadow var(--transition-speed) cubic-bezier(.2, .9, .4, 1.1),transform .2s cubic-bezier(.2, .9, .4, 1.1)}html.prevent-transition,html.prevent-transition *{transition:none!important}body{background-color:var(--bg-primary);color:var(--text-primary)}.theme-toggle-btn{position:relative}.theme-toggle-btn .moon-icon,.theme-toggle-btn .sun-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:opacity .3s,transform .3s}.theme-toggle-btn .sun-icon{opacity:1;transform:translate(-50%,-50%) rotate(0)}.theme-toggle-btn .moon-icon{opacity:0;transform:translate(-50%,-50%) rotate(-180deg)}html.dark-mode .theme-toggle-btn .sun-icon{opacity:0;transform:translate(-50%,-50%) rotate(180deg)}html.dark-mode .theme-toggle-btn .moon-icon{opacity:1;transform:translate(-50%,-50%) rotate(0)}