:root{--color-primary: #00ff88;--color-primary-dark: #00cc6a;--color-primary-light: #33ff9f;--color-primary-glow: rgba(0, 255, 136, .3);--color-secondary: #00d4ff;--color-secondary-dark: #00a8cc;--color-secondary-light: #33ddff;--color-accent-purple: #a855f7;--color-accent-pink: #ec4899;--color-accent-orange: #f97316;--color-accent-red: #ef4444;--color-accent-yellow: #eab308;--bg-primary: #0a0e17;--bg-secondary: #111827;--bg-tertiary: #1f2937;--bg-card: rgba(17, 24, 39, .8);--bg-glass: rgba(17, 24, 39, .6);--text-primary: #f9fafb;--text-secondary: #9ca3af;--text-muted: #6b7280;--text-accent: var(--color-primary);--border-color: rgba(255, 255, 255, .1);--border-glow: rgba(0, 255, 136, .5);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .5);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .5);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px var(--color-primary-glow);--font-primary: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .35s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-primary);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at 20% 20%,rgba(0,255,136,.05) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(0,212,255,.05) 0%,transparent 50%),linear-gradient(to bottom,var(--bg-primary) 0%,var(--bg-secondary) 100%);pointer-events:none;z-index:-1}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.3;margin-bottom:var(--space-md)}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem}p{margin-bottom:var(--space-md)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-light);text-decoration:underline}code,pre{font-family:var(--font-mono);background:var(--bg-tertiary);border-radius:var(--radius-sm)}code{padding:.125rem .375rem;font-size:.875em;color:var(--color-primary)}pre{padding:var(--space-md);overflow-x:auto;border:1px solid var(--border-color)}pre code{padding:0;background:none}.container{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--space-lg)}.glass{background:var(--bg-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-color)}.card{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);padding:var(--space-lg);transition:all var(--transition-normal)}.card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-glow);transform:translateY(-2px)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);font-family:var(--font-primary);font-size:.875rem;font-weight:600;border-radius:var(--radius-md);border:none;cursor:pointer;transition:all var(--transition-fast);text-decoration:none}.btn-primary{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:var(--bg-primary)}.btn-primary:hover{box-shadow:var(--shadow-glow);transform:translateY(-2px);text-decoration:none}.btn-secondary{background:transparent;border:2px solid var(--color-primary);color:var(--color-primary)}.btn-secondary:hover{background:var(--color-primary);color:var(--bg-primary)}.btn-ghost{background:transparent;color:var(--text-secondary)}.btn-ghost:hover{color:var(--color-primary);background:var(--bg-tertiary)}.badge{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);font-size:.75rem;font-weight:600;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em}.badge-green{background:#00ff8826;color:var(--color-primary);border:1px solid rgba(0,255,136,.3)}.badge-blue{background:#00d4ff26;color:var(--color-secondary);border:1px solid rgba(0,212,255,.3)}.badge-purple{background:#a855f726;color:var(--color-accent-purple);border:1px solid rgba(168,85,247,.3)}.badge-orange{background:#f9731626;color:var(--color-accent-orange);border:1px solid rgba(249,115,22,.3)}.badge-red{background:#ef444426;color:var(--color-accent-red);border:1px solid rgba(239,68,68,.3)}.progress{height:8px;background:var(--bg-tertiary);border-radius:var(--radius-full);overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-secondary) 100%);border-radius:var(--radius-full);transition:width var(--transition-slow)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes glow{0%,to{box-shadow:0 0 5px var(--color-primary-glow)}50%{box-shadow:0 0 20px var(--color-primary-glow),0 0 30px var(--color-primary-glow)}}.animate-fade-in{animation:fadeIn var(--transition-normal) ease-out}.animate-slide-up{animation:slideUp var(--transition-slow) ease-out}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-glow{animation:glow 2s ease-in-out infinite}.terminal{background:#0d1117;border-radius:var(--radius-lg);border:1px solid var(--border-color);overflow:hidden}.terminal-header{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--bg-tertiary);border-bottom:1px solid var(--border-color)}.terminal-dot{width:12px;height:12px;border-radius:50%}.terminal-dot.red{background:#ff5f56}.terminal-dot.yellow{background:#ffbd2e}.terminal-dot.green{background:#27c93f}.terminal-body{padding:var(--space-md);font-family:var(--font-mono);font-size:.875rem;line-height:1.7;color:var(--text-secondary)}.terminal-prompt{color:var(--color-primary)}.terminal-cursor{display:inline-block;width:8px;height:16px;background:var(--color-primary);animation:pulse 1s step-end infinite;vertical-align:middle;margin-left:2px}@media (max-width: 768px){h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}.container{padding:0 var(--space-md)}}.page-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:var(--bg-primary);color:var(--text-secondary);gap:var(--space-md)}.loader-spinner{width:48px;height:48px;border:3px solid var(--border-color);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.page-loader p{font-family:var(--font-mono);color:var(--color-primary)}.notification-center{position:relative}.notification-bell{position:relative;background:transparent;border:none;color:var(--text-primary);cursor:pointer;padding:8px;border-radius:var(--radius-md);transition:all .2s ease;display:flex;align-items:center;justify-content:center}.notification-bell:hover{background:var(--bg-hover);color:var(--color-primary)}.notification-bell.has-unread{animation:bellShake .5s ease-in-out}@keyframes bellShake{0%,to{transform:rotate(0)}20%,60%{transform:rotate(10deg)}40%,80%{transform:rotate(-10deg)}}.notification-badge{position:absolute;top:2px;right:2px;background:#ef4444;color:#fff;font-size:.65rem;font-weight:700;min-width:16px;height:16px;padding:0 4px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.notification-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:380px;max-height:500px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:0 10px 40px #0000004d;overflow:hidden;z-index:1000;animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.notification-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border-color);background:var(--bg-secondary)}.notification-header h3{margin:0;font-size:1rem}.notification-actions{display:flex;gap:var(--space-xs)}.btn-icon{background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:6px;border-radius:var(--radius-md);transition:all .2s ease;display:flex;align-items:center;justify-content:center}.btn-icon:hover{background:var(--bg-hover);color:var(--color-primary)}.btn-icon:disabled{opacity:.5;cursor:not-allowed}.btn-icon.btn-sm{padding:4px}.notification-tabs{display:flex;border-bottom:1px solid var(--border-color)}.notif-tab{flex:1;background:transparent;border:none;padding:var(--space-sm) var(--space-md);color:var(--text-muted);cursor:pointer;font-size:.875rem;transition:all .2s ease;border-bottom:2px solid transparent}.notif-tab:hover{color:var(--text-primary);background:var(--bg-hover)}.notif-tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.notification-list{max-height:350px;overflow-y:auto}.notification-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-xl);color:var(--text-muted);gap:var(--space-sm)}.notification-empty svg{opacity:.5}.notification-item{display:flex;align-items:flex-start;gap:var(--space-md);padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border-color);cursor:pointer;transition:all .2s ease}.notification-item:hover{background:var(--bg-hover)}.notification-item.unread{background:#00ff880d;border-left:3px solid var(--color-primary)}.notification-item:last-child{border-bottom:none}.notif-icon{flex-shrink:0;padding:8px;border-radius:var(--radius-md)}.notif-icon.solve{background:#10b98133;color:#10b981}.notif-icon.badge,.notif-icon.achievement{background:#fbbf2433;color:#f59e0b}.notif-icon.hint{background:#8b5cf633;color:#8b5cf6}.notif-icon.announcement{background:#3b82f633;color:#3b82f6}.notif-icon.competition{background:#ec489933;color:#ec4899}.notif-icon.system{background:#6b728033;color:#6b7280}.notification-content{flex:1;min-width:0}.notification-title{font-weight:600;font-size:.875rem;margin-bottom:2px;color:var(--text-primary)}.notification-message{font-size:.8rem;color:var(--text-muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-time{font-size:.7rem;color:var(--text-muted);margin-top:4px}.notification-item-actions{display:flex;gap:2px;opacity:0;transition:opacity .2s ease}.notification-item:hover .notification-item-actions{opacity:1}.notification-footer{padding:var(--space-sm) var(--space-lg);border-top:1px solid var(--border-color);display:flex;justify-content:center}.notification-settings{padding:var(--space-lg)}.notification-settings h4{margin:0 0 var(--space-md);font-size:.9rem}.setting-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) 0;cursor:pointer;font-size:.875rem;color:var(--text-secondary)}.setting-item:hover{color:var(--text-primary)}.setting-item input[type=checkbox]{width:16px;height:16px;accent-color:var(--color-primary)}.setting-icon{display:flex;align-items:center;color:var(--text-muted)}@media (max-width: 480px){.notification-dropdown{position:fixed;top:60px;right:var(--space-sm);left:var(--space-sm);width:auto;max-height:calc(100vh - 80px)}}.layout{min-height:100vh;display:flex;flex-direction:column}.header{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border-color)}.header-content{max-width:1280px;margin:0 auto;padding:var(--space-md) var(--space-lg);display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:var(--space-sm);text-decoration:none;color:var(--text-primary);font-weight:700;font-size:1.25rem}.logo:hover{text-decoration:none}.logo-icon{color:var(--color-primary);animation:glow 2s ease-in-out infinite}.logo-text{font-family:var(--font-mono)}.logo-accent{color:var(--color-primary)}.nav-desktop{display:flex;align-items:center;gap:var(--space-xs)}.nav-link{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);color:var(--text-secondary);text-decoration:none;font-size:.875rem;font-weight:500;transition:all var(--transition-fast)}.nav-link:hover{color:var(--color-primary);background:#00ff881a;text-decoration:none}.nav-link.active{color:var(--color-primary);background:#00ff8826}.nav-link.needs-auth{opacity:.6}.nav-link .lock-icon{margin-left:2px;color:var(--text-muted)}.nav-link-mobile.needs-auth{opacity:.6}.nav-link-mobile .lock-icon{margin-left:auto;color:var(--text-muted)}.mobile-menu-btn{display:none;padding:var(--space-sm);background:transparent;border:none;color:var(--text-primary);cursor:pointer;border-radius:var(--radius-md);transition:background var(--transition-fast)}.mobile-menu-btn:hover{background:var(--bg-tertiary)}.profile-stats{display:flex;align-items:center;gap:var(--space-sm)}.stat-pill{display:flex;align-items:center;gap:4px;padding:4px 10px;background:var(--bg-tertiary);border-radius:var(--radius-full);font-size:.75rem;font-weight:600;font-family:var(--font-mono)}.stat-pill.streak{color:var(--color-accent-orange)}.stat-pill.streak svg{animation:flame-pulse 1s ease-in-out infinite}@keyframes flame-pulse{0%,to{opacity:1}50%{opacity:.6}}.stat-pill.xp{color:var(--color-primary)}.profile-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);border-radius:50%;color:var(--bg-primary);text-decoration:none;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.profile-btn:hover{text-decoration:none;transform:scale(1.05);box-shadow:0 0 15px #0f86}.login-btn{display:flex;align-items:center;gap:var(--space-xs);padding:6px 12px;background:var(--bg-tertiary);border:1px solid var(--color-primary);border-radius:var(--radius-md);color:var(--color-primary);text-decoration:none;font-size:.8rem;font-weight:500;transition:all var(--transition-fast)}.login-btn:hover{background:#00ff881a;text-decoration:none}.dashboard-link{padding:6px 12px;background:#a855f71a;border:1px solid var(--color-accent-purple);border-radius:var(--radius-md);color:var(--color-accent-purple);text-decoration:none;font-size:.75rem;font-weight:500}.dashboard-link:hover{background:#a855f733;text-decoration:none}.logout-nav-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:transparent;border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast)}.logout-nav-btn:hover{color:var(--color-accent-red);border-color:var(--color-accent-red);background:#ef44441a}.nav-mobile{display:none;flex-direction:column;padding:var(--space-md);border-top:1px solid var(--border-color)}.nav-link-mobile{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);border-radius:var(--radius-md);color:var(--text-secondary);text-decoration:none;font-size:1rem;font-weight:500;transition:all var(--transition-fast)}.nav-link-mobile:hover,.nav-link-mobile.active{color:var(--color-primary);background:#00ff881a;text-decoration:none}.main-content{flex:1;padding:var(--space-2xl) 0}.footer{border-top:1px solid var(--border-color);padding:var(--space-xl) var(--space-lg);text-align:center}.footer-content{max-width:1280px;margin:0 auto}.footer p{margin-bottom:var(--space-sm);color:var(--text-secondary);font-size:.875rem}.footer-note{color:var(--color-accent-orange);font-size:.75rem!important}@media (max-width: 768px){.nav-desktop{display:none}.mobile-menu-btn{display:block}.nav-mobile{display:flex}.header-content{padding:var(--space-sm) var(--space-md)}}