*{transition-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-tap-highlight-color:transparent}:root,body[data-theme=emerald]{--theme-primary:#57C150;--theme-primary-dark:#237B2A;--theme-primary-light:#80D679;--theme-primary-soft:rgba(87,193,80,0.10);--theme-primary-glow:rgba(87,193,80,0.20);--theme-accent:#F9A717;--theme-accent-dark:#A56208;--theme-accent-light:#FBC05B;--theme-accent-soft:rgba(249,167,23,0.10)}body[data-theme=ocean]{--theme-primary:#3B82F6;--theme-primary-dark:#1E40AF;--theme-primary-light:#60A5FA;--theme-primary-soft:rgba(59, 130, 246, 0.10);--theme-primary-glow:rgba(59, 130, 246, 0.20);--theme-accent:#06B6D4;--theme-accent-dark:#0E7490;--theme-accent-light:#22D3EE;--theme-accent-soft:rgba(6, 182, 212, 0.10)}body[data-theme=sunset]{--theme-primary:#F97316;--theme-primary-dark:#C2410C;--theme-primary-light:#FB923C;--theme-primary-soft:rgba(249, 115, 22, 0.10);--theme-primary-glow:rgba(249, 115, 22, 0.20);--theme-accent:#EF4444;--theme-accent-dark:#B91C1C;--theme-accent-light:#F87171;--theme-accent-soft:rgba(239, 68, 68, 0.10)}body[data-theme=lavender]{--theme-primary:#8B5CF6;--theme-primary-dark:#5B21B6;--theme-primary-light:#A78BFA;--theme-primary-soft:rgba(139, 92, 246, 0.10);--theme-primary-glow:rgba(139, 92, 246, 0.20);--theme-accent:#EC4899;--theme-accent-dark:#BE185D;--theme-accent-light:#F472B6;--theme-accent-soft:rgba(236, 72, 153, 0.10)}body[data-theme=rose]{--theme-primary:#EC4899;--theme-primary-dark:#9D174D;--theme-primary-light:#F472B6;--theme-primary-soft:rgba(236, 72, 153, 0.10);--theme-primary-glow:rgba(236, 72, 153, 0.20);--theme-accent:#8B5CF6;--theme-accent-dark:#5B21B6;--theme-accent-light:#A78BFA;--theme-accent-soft:rgba(139, 92, 246, 0.10)}body[data-theme=midnight]{--theme-primary:#6366F1;--theme-primary-dark:#3730A3;--theme-primary-light:#818CF8;--theme-primary-soft:rgba(99, 102, 241, 0.10);--theme-primary-glow:rgba(99, 102, 241, 0.20);--theme-accent:#F59E0B;--theme-accent-dark:#B45309;--theme-accent-light:#FBBF24;--theme-accent-soft:rgba(245, 158, 11, 0.10)}body[data-theme=forest]{--theme-primary:#15803D;--theme-primary-dark:#052E16;--theme-primary-light:#22C55E;--theme-primary-soft:rgba(21, 128, 61, 0.10);--theme-primary-glow:rgba(21, 128, 61, 0.20);--theme-accent:#FBBF24;--theme-accent-dark:#B45309;--theme-accent-light:#FCD34D;--theme-accent-soft:rgba(251, 191, 36, 0.10)}body{color:#1e293b;font-family:Inter,sans-serif;background-color:#fafbfc;background-image:radial-gradient(ellipse 90% 55% at 50% 0,var(--theme-primary-soft),transparent 65%),radial-gradient(ellipse 70% 60% at 100% 100%,var(--theme-accent-soft),transparent 70%),linear-gradient(180deg,#fafbfc 0,#f4f7fa 100%);background-attachment:fixed;min-height:100vh;transition:background-image .4s ease}.card{background:#fff;border:1px solid #e8edf2;border-radius:14px;transition:all .3s ease;box-shadow:0 1px 2px rgba(15,23,42,.03),0 1px 3px rgba(15,23,42,.015)}.card:hover{border-color:var(--theme-primary-glow);box-shadow:0 8px 32px -10px var(--theme-primary-glow),0 2px 6px rgba(15,23,42,.03)}.btn-primary{background:linear-gradient(135deg,var(--dg-action) 0,var(--dg-deep) 100%);color:#fff;font-weight:700;transition:all .25s;box-shadow:0 4px 15px rgba(var(--dg-primary-rgb),.22)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(var(--dg-primary-rgb),.35)}.btn-ghost{border:1px solid #e8edf2;transition:all .2s;background:#fff;color:#1e293b}.btn-ghost:hover{border-color:var(--theme-primary);color:var(--theme-primary-dark);background:var(--theme-primary-soft);transform:translateY(-1px)}.btn-green{background:linear-gradient(135deg,var(--dg-action) 0,var(--dg-deep) 100%);color:#fff;font-weight:700;box-shadow:0 4px 15px var(--theme-primary-glow);transition:all .25s}.btn-green:hover{transform:translateY(-2px);box-shadow:0 8px 25px var(--theme-primary-glow)}.badge-teacher{background:linear-gradient(135deg,#ef4444 0,#f59e0b 100%);color:#fff;box-shadow:0 2px 10px rgba(239,68,68,.3)}.badge-green{background:var(--theme-primary-soft);color:var(--theme-primary-dark);border:1px solid var(--theme-primary-glow)}.input-field{background:#fff;border:1px solid #e8edf2;color:#1e293b;transition:all .2s}.input-field:focus{border-color:var(--theme-primary);outline:0;box-shadow:0 0 0 4px var(--theme-primary-soft)}.input-field::placeholder{color:#94a3b8}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f4f7fa}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--theme-primary)}@keyframes fadeIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .5s ease-out}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.slide-down{animation:slideDown .2s ease-out}@keyframes pulse-bell{0%,100%{transform:rotate(0)}10%,30%{transform:rotate(-12deg)}20%,40%{transform:rotate(12deg)}50%{transform:rotate(0)}}.bell-pulse{animation:pulse-bell 2s ease-in-out infinite}.header-main{background:#0f172a;box-shadow:0 4px 24px -4px rgba(15,23,42,.5);position:relative;border-bottom:1px solid rgba(255,255,255,.06);z-index:50}.header-main::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 15% 0,var(--theme-primary-soft),transparent 45%),radial-gradient(circle at 85% 100%,var(--theme-accent-soft),transparent 45%);pointer-events:none;transition:background .4s ease}.logo-wrap{display:inline-flex;align-items:center;justify-content:center;padding:4px;transition:transform .3s cubic-bezier(.34, 1.56, .64, 1);position:relative;z-index:1}.logo-wrap:hover{transform:scale(1.06)}.logo-img{height:44px;width:auto;display:block;object-fit:contain;filter:drop-shadow(0 0 12px var(--theme-primary-glow));transition:filter .4s ease,height .2s ease}.nav-link{transition:all .2s;position:relative;padding:9px 12px;font-weight:600;font-size:13.5px;color:rgba(255,255,255,.85);border-radius:10px;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:6px}.nav-link:hover{background:rgba(255,255,255,.08);color:#fff}.nav-link.active{background:var(--theme-primary-glow);color:#fff}.nav-link.active::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:24px;height:3px;background:var(--theme-primary-light);border-radius:2px;box-shadow:0 0 10px var(--theme-primary)}.nav-link .nav-icon{font-size:15px;line-height:1}.nav-link.game{background:linear-gradient(135deg,rgba(var(--dg-primary-rgb),.22),rgba(var(--dg-primary-rgb),.18));border:1px solid rgba(var(--dg-primary-rgb),.35);color:#fff;font-weight:800}.nav-link.game:hover{background:linear-gradient(135deg,rgba(var(--dg-primary-rgb),.42),rgba(var(--dg-primary-rgb),.36));transform:translateY(-1px);box-shadow:0 6px 18px -6px rgba(var(--dg-primary-rgb),.6)}.nav-link.game.active{background:linear-gradient(135deg,var(--dg-action) 0,var(--dg-action) 100%);border-color:transparent;box-shadow:0 6px 18px -6px rgba(var(--dg-primary-rgb),.6)}.nav-link.game.active::after{display:none}.nav-text-short{display:none}@media (min-width:768px) and (max-width:1023px){.logo-img{height:38px}.logo-wrap{padding:2px}.nav-link{padding:8px 9px;font-size:12px;gap:4px;border-radius:9px}.nav-link .nav-icon{font-size:15px}.nav-link .nav-text{display:none}.nav-link .nav-text-short{display:inline}.nav-link.active::after{width:18px;height:2.5px;bottom:2px}.notif-btn,.theme-btn{width:38px;height:38px;border-radius:11px}.notif-btn .bell-icon{font-size:17px}.theme-btn .theme-icon{font-size:16px}#theme-menu{width:260px}#notif-menu{width:340px}}@media (min-width:1024px){.nav-link .nav-text{display:inline}.nav-link .nav-text-short{display:none}}@media (max-width:767px){.logo-img{height:34px}.logo-wrap{padding:2px}}.notif-btn,.theme-btn{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:all .2s;cursor:pointer;flex-shrink:0}.notif-btn:hover,.theme-btn:hover{background:rgba(255,255,255,.12);transform:scale(1.05)}.notif-btn .bell-icon{font-size:19px}.theme-btn .theme-icon{font-size:18px}@media (max-width:767px){.notif-btn,.theme-btn{width:36px;height:36px;border-radius:10px}.notif-btn .bell-icon{font-size:16px}.theme-btn .theme-icon{font-size:15px}}.notif-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 6px;background:#ef4444;color:#fff;font-size:11px;font-weight:800;border-radius:10px;display:flex;align-items:center;justify-content:center;border:2px solid #0f172a;box-shadow:0 2px 8px rgba(239,68,68,.5)}#theme-menu{animation:slideDown .2s ease-out;background:#fff;border:1px solid #e8edf2;box-shadow:0 25px 50px rgba(15,23,42,.15)}.theme-swatch{width:40px;height:40px;border-radius:12px;border:2px solid transparent;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}.theme-swatch:hover{transform:scale(1.08);box-shadow:0 4px 12px rgba(15,23,42,.15)}.theme-swatch.active{border-color:#0f172a;box-shadow:0 0 0 3px rgba(15,23,42,.1)}.theme-swatch.active::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:18px;text-shadow:0 1px 3px rgba(0,0,0,.3)}#notif-menu{animation:slideDown .2s ease-out;background:#fff;border:1px solid #e8edf2;box-shadow:0 25px 50px rgba(15,23,42,.12)}.notif-item-row{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid #f1f5f9;transition:background .15s;cursor:pointer;text-decoration:none;color:inherit}.notif-item-row:hover{background:#f8fafc}.notif-item-row.unread{background:var(--theme-primary-soft)}.notif-item-row.unread:hover{background:var(--theme-primary-glow)}.notif-item-row:last-child{border-bottom:none}.notif-type-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}.nt-info{background:#dbeafe;color:#1d4ed8}.nt-success{background:#dcfce7;color:#15803d}.nt-warning{background:#fef3c7;color:#b45309}.nt-danger{background:#fee2e2;color:#b91c1c}.nt-update{background:#ede9fe;color:#6d28d9}.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--theme-primary);flex-shrink:0;margin-top:6px}@media (max-width:767px){#notif-menu,#theme-menu{position:fixed!important;top:68px!important;left:8px!important;right:8px!important;width:auto!important;max-width:none!important;max-height:calc(100vh - 84px)!important;overflow-y:auto!important;transform:none!important;z-index:60!important}#notif-list{max-height:calc(100vh - 260px)!important}#theme-menu .theme-grid{grid-template-columns:repeat(3,1fr)!important;gap:12px!important}#theme-menu .theme-swatch{width:100%!important;height:52px!important;border-radius:14px!important}#theme-menu .theme-swatch.active::after{font-size:22px!important}#theme-menu>div:first-child{padding:14px 16px!important}#theme-menu .theme-menu-grid-wrap{padding:0 16px 16px!important}}@media (max-width:380px){#theme-menu .theme-swatch{height:46px!important}#theme-menu .theme-grid{gap:8px!important}}#um-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:40}#um-overlay.open{opacity:1;pointer-events:auto}#user-menu.um-menu{position:absolute;right:0;top:100%;margin-top:8px;background:#fff;border-radius:20px;box-shadow:0 20px 50px -15px rgba(15,23,42,.25),0 0 0 1px var(--theme-primary-soft);width:380px;max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:hidden;padding:0;z-index:60;overscroll-behavior:contain;animation:umSlideIn .25s cubic-bezier(.34,1.56,.64,1)}@keyframes umSlideIn{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes umSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}@media (min-width:768px) and (max-width:1023px){#user-menu.um-menu{width:340px}}.um-profile{padding:16px 18px 12px;background:linear-gradient(135deg,var(--theme-primary-soft) 0,var(--theme-accent-soft) 100%);display:flex;align-items:center;gap:12px;position:relative;overflow:hidden;border-radius:20px 20px 0 0}.um-profile::before{content:'';position:absolute;top:-50%;right:-30%;width:200px;height:200px;background:radial-gradient(circle,var(--theme-primary-glow),transparent 70%);pointer-events:none}.um-avatar{width:50px;height:50px;border-radius:14px;border:3px solid #fff;box-shadow:0 4px 12px -2px var(--theme-primary-glow);flex-shrink:0;object-fit:cover;position:relative;z-index:1;background:#f1f5f9}.um-info{flex:1;min-width:0;position:relative;z-index:1}.um-name{font-weight:900;font-size:15px;color:var(--dg-ink);letter-spacing:-.02em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.um-email{font-size:11.5px;color:#64748b;margin-top:3px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.um-badge-row{margin-top:8px}.um-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:999px;font-size:10.5px;font-weight:900;letter-spacing:.03em}.um-badge.teacher{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;box-shadow:0 4px 10px -3px rgba(239,68,68,.5)}.um-badge.student{background:linear-gradient(135deg,var(--theme-primary-light),var(--theme-primary-dark));color:#fff;box-shadow:0 4px 10px -3px var(--theme-primary-glow)}.um-section{padding:12px 18px 6px;font-size:9.5px;font-weight:900;color:#94a3b8;text-transform:uppercase;letter-spacing:.14em;display:flex;align-items:center;gap:8px}.um-section::after,.um-section::before{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(15,23,42,.1),transparent)}.um-section.teacher-section{color:#ef4444}.um-section.teacher-section::after,.um-section.teacher-section::before{background:linear-gradient(90deg,transparent,rgba(239,68,68,.25),transparent)}.um-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:6px 14px 10px}.um-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;text-decoration:none!important;color:var(--dg-ink);font-size:13px;font-weight:700;transition:all .2s cubic-bezier(.34, 1.56, .64, 1);position:relative;background:0 0;border:none;cursor:pointer;font-family:inherit;text-align:left;min-height:42px}.um-item:hover{background:linear-gradient(135deg,var(--theme-primary-soft),transparent);transform:translateY(-2px);color:var(--theme-primary-dark);box-shadow:0 6px 14px -6px var(--theme-primary-glow)}.um-item .um-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;background:#f1f5f9;flex-shrink:0;transition:all .2s}.um-item:hover .um-icon{background:linear-gradient(135deg,var(--theme-primary-light),var(--theme-primary-dark));transform:scale(1.08) rotate(-4deg);box-shadow:0 4px 12px -3px var(--theme-primary-glow)}.um-item .um-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}.um-item.um-teacher:hover{color:#dc2626;background:linear-gradient(135deg,rgba(239,68,68,.1),transparent)}.um-item.um-teacher:hover .um-icon{background:linear-gradient(135deg,#ef4444,#f59e0b)}.um-item.um-game{background:linear-gradient(135deg,rgba(var(--dg-primary-rgb),.08),rgba(var(--dg-primary-rgb),.06));border:1px solid rgba(var(--dg-primary-rgb),.18)}.um-item.um-game .um-icon{background:linear-gradient(135deg,var(--dg-action),var(--dg-action));color:#fff}.um-item.um-game:hover{color:var(--dg-action);background:linear-gradient(135deg,rgba(var(--dg-primary-rgb),.18),rgba(var(--dg-primary-rgb),.12));box-shadow:0 6px 14px -6px rgba(var(--dg-primary-rgb),.4)}.um-item.um-game:hover .um-icon{transform:scale(1.1) rotate(-4deg);box-shadow:0 4px 12px -3px rgba(var(--dg-primary-rgb),.5)}.um-item .um-notif-badge{margin-left:auto;flex-shrink:0;background:#ef4444;color:#fff;font-size:10px;font-weight:800;border-radius:999px;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;padding:0 6px}.um-full{grid-column:span 2}.um-footer{padding:10px 14px 14px;border-top:1px solid rgba(15,23,42,.06);margin-top:2px}.um-logout{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:12px;background:linear-gradient(135deg,rgba(239,68,68,.08),rgba(220,38,38,.05));color:#dc2626!important;font-weight:900;font-size:13.5px;text-decoration:none!important;transition:all .25s cubic-bezier(.34, 1.56, .64, 1);border:1.5px solid rgba(239,68,68,.15)}.um-logout:hover{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff!important;transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(239,68,68,.5)}.um-menu::-webkit-scrollbar{width:5px}.um-menu::-webkit-scrollbar-track{background:0 0}.um-menu::-webkit-scrollbar-thumb{background:var(--theme-primary-glow);border-radius:999px}@media (max-width:767px){#user-menu.um-menu{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:100%!important;max-width:100%!important;max-height:88vh!important;border-radius:24px 24px 0 0!important;margin-top:0!important;animation:umSlideUp .35s cubic-bezier(.34,1.2,.64,1)!important;padding-bottom:env(safe-area-inset-bottom,0);z-index:60!important}#user-menu.um-menu::before{content:''!important;display:block!important;width:42px!important;height:4px!important;background:rgba(15,23,42,.2)!important;border-radius:999px!important;margin:10px auto 4px!important}.um-profile{padding:10px 20px 14px;border-radius:0}.um-avatar{width:56px;height:56px;border-radius:16px}.um-name{font-size:16px}.um-email{font-size:12px}.um-badge{font-size:11px;padding:5px 13px}.um-section{padding:12px 20px 6px;font-size:10px}.um-grid{grid-template-columns:1fr 1fr;gap:6px;padding:8px 16px 14px}.um-item{padding:12px;min-height:54px;border-radius:13px;background:#f8fafc;border:1px solid rgba(15,23,42,.04);gap:10px}.um-item:active{transform:scale(.97);background:var(--theme-primary-soft)}.um-item .um-icon{width:36px;height:36px;font-size:18px;border-radius:11px}.um-item .um-label{font-size:13px;font-weight:800}.um-footer{padding:12px 16px 20px;background:#fff;position:sticky;bottom:0}.um-logout{padding:14px;font-size:14.5px;border-radius:14px}}@media (max-width:400px){.um-grid{gap:5px;padding:6px 12px 12px}.um-item{padding:10px;min-height:48px}.um-item .um-icon{width:32px;height:32px;font-size:16px}.um-item .um-label{font-size:12px}}#mobile-drawer{transform:translateX(-100%);transition:transform .3s cubic-bezier(.4, 0, .2, 1);will-change:transform;background:#fff}#mobile-drawer.open{transform:translateX(0)}#mobile-overlay{opacity:0;pointer-events:none;transition:opacity .3s ease}#mobile-overlay.open{opacity:1;pointer-events:auto}.mobile-menu-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;transition:all .15s;font-size:14px;font-weight:500;color:#1e293b;text-decoration:none}.mobile-menu-item.active,.mobile-menu-item:hover{background:var(--theme-primary-soft);color:var(--theme-primary-dark)}.mobile-menu-item.active{border-left:3px solid var(--theme-primary);padding-left:13px;font-weight:700}.mobile-menu-item.game-item{background:linear-gradient(135deg,rgba(var(--dg-primary-rgb),.1),rgba(var(--dg-primary-rgb),.08));border:1px solid rgba(var(--dg-primary-rgb),.25);font-weight:800;margin:4px 0}.mobile-menu-item.game-item:hover{background:linear-gradient(135deg,rgba(var(--dg-primary-rgb),.2),rgba(var(--dg-primary-rgb),.16));color:var(--dg-action)}.mobile-menu-section{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#64748b;font-weight:700;padding:12px 16px 6px}#notif-wrapper,#theme-wrapper,#user-menu-wrapper{position:relative!important}#notif-menu,#theme-menu,#user-menu{display:none!important;position:absolute!important;top:100%!important;right:0!important;margin-top:8px!important}#notif-menu:not(.hidden),#theme-menu:not(.hidden),#user-menu:not(.hidden){display:block!important}@media (max-width:767px){#notif-menu,#theme-menu{position:fixed!important;top:68px!important;left:8px!important;right:8px!important;width:auto!important;max-width:none!important;max-height:calc(100vh - 84px)!important;overflow-y:auto!important;margin-top:0!important;transform:none!important;z-index:60!important}}.guest-cta{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 18px;border-radius:12px;background:linear-gradient(135deg,var(--theme-primary),var(--theme-primary-dark));color:#fff;font-weight:800;font-size:14px;text-decoration:none;margin:8px 16px 12px;box-shadow:0 8px 20px -6px var(--theme-primary-glow)}