*{margin:0;padding:0;box-sizing:border-box}:root{--green: #58CC02;--green-dark: #46A302;--green-light: rgba(88, 204, 2, .15);--blue: #1CB0F6;--blue-dark: #0A9BD8;--blue-light: rgba(28, 176, 246, .12);--yellow: #FFC800;--yellow-dark: #E6A800;--red: #FF4B4B;--purple-dark: #9C4DE2;--radius-sm: 8px;--radius: 12px;--radius-lg: 16px;--radius-xl: 24px;--transition: .3s ease}[data-theme=dark]{--bg: #1f2937;--surface: #1F2937;--surface-2: #263348;--card: #1F2937;--border: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .22);--text: #F9FAFB;--text-muted: #B0B3B8;--text-light: #8B8FA8;--shadow-card: 0 4px 0 rgba(0,0,0,.45);--shadow-card-hover: 0 7px 0 rgba(0,0,0,.45);--nav-bg: #1f2937;--nav-border: rgba(255, 255, 255, .07);--code-bg: rgba(156, 77, 226, .18);--code-color: #CE82FF}[data-theme=light]{--bg: #F3F4F6;--surface: #FFFFFF;--surface-2: #F9FAFB;--card: #FFFFFF;--border: #E5E7EB;--border-strong: #9CA3AF;--text: #111827;--text-muted: #555F6E;--text-light: #6B7280;--shadow-card: 0 4px 0 #D1D5DB;--shadow-card-hover: 0 7px 0 #D1D5DB;--nav-bg: rgba(255, 255, 255, .96);--nav-border: #E5E7EB;--code-bg: #F3E8FF;--code-color: var(--purple-dark)}html{scroll-behavior:smooth}body{font-family:Segoe UI,Segoe UI Variable,system-ui,sans-serif;background-color:var(--bg);color:var(--text);line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased;transition:background-color var(--transition),color var(--transition)}h1,h2,h3,h4,h5,h6{font-family:Segoe UI,Segoe UI Variable Display,system-ui,sans-serif;font-weight:800;line-height:1.1;color:var(--text);transition:color var(--transition)}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:inherit;border:none;outline:none}#root{display:flex;flex-direction:column;min-height:100vh}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-light)}::selection{background:var(--green-light);color:var(--text)}@media(max-width:768px){::-webkit-scrollbar{width:4px}input,textarea,select{font-size:16px}}@media(max-width:480px){button,a{-webkit-tap-highlight-color:transparent}}.track{position:relative;width:56px;height:28px;border-radius:14px;background:var(--surface-2);border:2px solid var(--border-strong);cursor:pointer;transition:background .3s ease,border-color .3s ease;flex-shrink:0;overflow:hidden}.track.dark{background:#1e2a45;border-color:#3b4f75}.track.light{background:#e0f0ff;border-color:#93c5fd}.thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .35s cubic-bezier(.34,1.56,.64,1);will-change:transform}.track.light .thumb{transform:translate(28px)}.icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1)}.moonIcon{color:#93c5fd;opacity:1;transform:rotate(0)}.sunIcon{color:#ffc800;opacity:0;transform:rotate(-90deg) scale(.5)}.track.light .moonIcon{opacity:0;transform:rotate(90deg) scale(.5)}.track.light .sunIcon{opacity:1;transform:rotate(0) scale(1)}.langToggle{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--surface);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s,transform .15s;flex-shrink:0;overflow:hidden;perspective:400px;padding:0}.langToggle:hover{border-color:var(--border-strong);background:var(--bg)}.langToggle svg{display:block;transform-origin:center;transition:transform .08s ease}.langToggle--flip svg{animation:flagFlip .45s cubic-bezier(.34,1.56,.64,1)}@keyframes flagFlip{0%{transform:rotateY(0) scale(1)}25%{transform:rotateY(90deg) scale(.7)}50%{transform:rotateY(180deg) scale(.7)}75%{transform:rotateY(270deg) scale(.85)}to{transform:rotateY(360deg) scale(1)}}.navbar{position:sticky;top:0;z-index:100;background:var(--nav-bg);border-bottom:1px solid var(--nav-border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:background var(--transition),border-color var(--transition)}.navInner{max-width:1200px;margin:0 auto;padding:0 32px;height:68px;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}.logoIcon{color:var(--green);display:flex;align-items:center;transition:transform .3s ease}.logo:hover .logoIcon{transform:rotate(-8deg) scale(1.08)}.logoText{font-size:1.15rem;font-weight:800;color:var(--text);letter-spacing:-.01em;transition:color var(--transition)}.navLinks{display:flex;align-items:center;gap:12px}.navLink{padding:7px 14px;border-radius:var(--radius-sm);font-size:.8rem;font-weight:700;color:var(--text-muted);transition:background .15s,color .15s;text-transform:uppercase;letter-spacing:.05em;background:none;border:none;cursor:pointer;font-family:inherit}.navLink:hover{color:var(--text);background:var(--border)}.navLinkDaily{position:relative;display:inline-flex;align-items:center;gap:0}.dailyDot{position:absolute;top:4px;right:4px;width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 0 2px var(--nav-bg);animation:pulseDot 2s ease-in-out infinite}@keyframes pulseDot{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.8}}.rightSection{display:flex;align-items:center;gap:20px}.statsBar{display:flex;align-items:center;gap:16px}.streakBadge{display:flex;align-items:center;gap:4px;padding:5px 10px;background:#ffc8001f;border:1px solid rgba(255,200,0,.25);border-radius:20px;font-size:.8rem;font-weight:800;color:var(--yellow-dark)}.streakIcon{color:var(--yellow-dark)}.livesContainer{display:flex;align-items:center;gap:3px}.heart{color:var(--red)}.heartEmpty{color:var(--border-strong);opacity:.5}.userChipWrapper{position:relative}.userChip{display:flex;align-items:center;gap:6px;cursor:pointer;background:none;border:none;padding:4px;border-radius:var(--radius);transition:background .15s}.userChip:hover{background:var(--border)}.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--border-strong);transition:border-color .2s}.userChip:hover .avatar{border-color:var(--green)}.avatarFallback{width:34px;height:34px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.875rem;color:#fff}.chevron{color:var(--text-muted);transition:transform .2s ease}.chevronOpen{transform:rotate(180deg)}.profileDropdown{position:absolute;top:calc(100% + 10px);right:0;width:240px;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 8px 32px #0003,0 4px 0 var(--border);overflow:hidden;z-index:200;animation:dropdownIn .18s cubic-bezier(.34,1.56,.64,1)}@keyframes dropdownIn{0%{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.dropdownHeader{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg)}.dropdownAvatarImg{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--border-strong);flex-shrink:0}.dropdownAvatarFallback{width:42px;height:42px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;color:#fff;flex-shrink:0}.dropdownUserInfo{display:flex;flex-direction:column;gap:4px;min-width:0}.dropdownName{font-size:.9rem;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdownStats{display:flex;align-items:center;gap:6px}.dropdownStat{display:flex;align-items:center;gap:3px;font-size:.75rem;font-weight:700;color:var(--text-muted)}.dropdownStatDot{color:var(--border-strong);font-size:.75rem}.dropdownDivider{height:1px;background:var(--border);margin:4px 0}.dropdownItem{display:flex;align-items:center;gap:10px;width:100%;padding:11px 16px;background:none;border:none;color:var(--text);font-size:.875rem;font-weight:600;cursor:pointer;transition:background .12s;text-align:left}.dropdownItem:hover:not(:disabled){background:var(--bg)}.dropdownItemDisabled{opacity:.5;cursor:not-allowed}.dropdownBadge{margin-left:auto;padding:2px 8px;background:#ffc8001f;border:1px solid var(--yellow);border-radius:10px;font-size:.65rem;font-weight:800;color:var(--yellow-dark);text-transform:uppercase;letter-spacing:.06em}.dropdownItemDanger{color:var(--red)}.dropdownItemDanger:hover{background:#ff4b4b14!important}.dropdownItemAdmin{color:#6366f1;font-weight:600}.dropdownItemAdmin:hover{background:#6366f114!important}.loginBtn{padding:8px 18px;background:var(--green);color:#fff;border-radius:var(--radius);font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;box-shadow:0 3px 0 var(--green-dark);transition:transform .1s,box-shadow .1s}.loginBtn:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--green-dark)}.loginBtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--green-dark)}.schoolDropdownWrapper{position:relative}.schoolDropdownBtn{display:flex;align-items:center;gap:5px}.schoolDropdownBtnActive{color:var(--text)!important;background:var(--border)!important}.schoolChevron{color:var(--text-muted);transition:transform .2s ease}.schoolChevronOpen{transform:rotate(180deg)}.schoolDropdown{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);min-width:190px;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 8px 32px #0003,0 4px 0 var(--border);overflow:hidden;z-index:200;animation:dropdownIn .18s cubic-bezier(.34,1.56,.64,1);padding:4px 0}.schoolDropdownItem{display:flex;align-items:center;gap:10px;width:100%;padding:10px 16px;background:none;border:none;color:var(--text);font-size:.875rem;font-weight:600;cursor:pointer;transition:background .12s;text-decoration:none;font-family:inherit}.schoolDropdownItem:hover{background:var(--bg);color:var(--green)}.schoolDropdownDivider{height:1px;background:var(--border);margin:4px 0}.mobileMenuBtn{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:36px;height:36px;background:none;border:2px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:background .15s,border-color .15s;flex-shrink:0}.mobileMenuBtn:hover{background:var(--border);border-color:var(--border-strong)}.mobileMenuBar{width:18px;height:2px;background:var(--text);border-radius:2px;transition:transform .3s ease,opacity .3s ease}.mobileMenuBtn.open .mobileMenuBar:nth-child(1){transform:translateY(7px) rotate(45deg)}.mobileMenuBtn.open .mobileMenuBar:nth-child(2){opacity:0}.mobileMenuBtn.open .mobileMenuBar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.mobileNav{display:none;flex-direction:column;position:fixed;inset:68px 0 0;background:var(--nav-bg);border-top:1px solid var(--nav-border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:99;padding:12px 16px 24px;gap:4px;animation:mobileNavIn .2s ease;box-shadow:0 8px 24px #00000026;overflow-y:auto}.mobileNav.open{display:flex}@keyframes mobileNavIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.mobileNavLink{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--radius);font-size:.9rem;font-weight:700;color:var(--text-muted);background:none;border:none;cursor:pointer;font-family:inherit;text-decoration:none;text-transform:uppercase;letter-spacing:.05em;transition:background .15s,color .15s}.mobileNavLink:hover{background:var(--border);color:var(--text)}.mobileNavDivider{height:1px;background:var(--border);margin:4px 0}.mobileNavStats{display:flex;align-items:center;gap:12px;padding:10px 14px}@media(max-width:768px){.navInner{padding:0 16px;height:60px}.mobileNav{top:60px}.statsBar{display:none}.navLinks{gap:4px}.navLink{padding:6px 10px;font-size:.72rem;letter-spacing:.03em}.rightSection{gap:10px}.loginBtn{padding:7px 14px;font-size:.75rem}}@media(max-width:600px){.navLinks{display:none}.mobileMenuBtn{display:flex}.streakBadge{font-size:.72rem;padding:4px 8px}.rightSection{gap:8px}}@media(max-width:400px){.logoText,.streakBadge{display:none}.navInner{padding:0 12px}}.footer{width:100%;background:var(--white);border-top:2px solid var(--border);margin-top:auto}.footerInner{max-width:1300px;margin:0 auto;padding:32px;display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}.logoRow{display:flex;align-items:center;gap:10px;margin-bottom:12px}.logoIcon{color:var(--green)}.logoText{font-size:1.1rem;font-weight:800;color:var(--text)}.tagline{color:var(--text-muted);font-size:.875rem;line-height:1.6;max-width:240px;font-weight:500}.links{display:flex;gap:48px}.linkGroup{display:flex;flex-direction:column;align-items:center;gap:10px}.linkGroupTitle{font-size:.7rem;font-weight:800;text-transform:uppercase;text-align:center;letter-spacing:.12em;color:var(--text-light);margin-bottom:6px}.link{font-size:.875rem;font-weight:600;color:var(--text-muted);transition:color .15s;text-align:center}.link:hover{color:var(--text)}.social{display:flex;flex-direction:column;gap:14px}.socialIcons{display:flex;gap:8px}.socialIcon{width:38px;height:38px;background:var(--bg);border:2px solid var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .15s}.socialIcon:hover{background:var(--green);border-color:var(--green-dark);color:#fff;transform:translateY(-2px)}.bottom{border-top:1px solid var(--border);padding:16px 32px;max-width:1200px;margin:0 auto;display:flex;justify-content:center}.copyright{font-size:.8rem;font-weight:600;color:var(--text-light)}@media(max-width:768px){.footerInner{flex-direction:column;padding:24px 20px;gap:24px}.links{gap:32px;justify-content:center;width:100%}.tagline{max-width:100%}.bottom{padding:14px 20px}}@media(max-width:480px){.footerInner{padding:20px 16px;gap:20px}.links{gap:24px;flex-wrap:wrap}.logoRow{justify-content:center}.tagline{text-align:center}.social{align-items:center}}.pageSpinnerWrapper{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--bg)}.pageSpinnerInline{display:flex;flex-direction:column;align-items:center;gap:14px}.pageSpinner{border:3px solid var(--border);border-radius:50%;animation:spinnerSpin .7s linear infinite;flex-shrink:0}.pageSpinnerLabel{font-size:.9rem;font-weight:600;color:var(--text-muted)}@keyframes spinnerSpin{to{transform:rotate(360deg)}}