*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0d0f1a;--surface:#13162a;--surface2:#1a1e36;--border:#ffffff12;--teal:#00d4aa;--gold:gold;--violet:#a78bfa;--orange:#ff7043;--blue:#60a5fa;--text:#f0f2ff;--text2:#f0f2ff8c;--text3:#f0f2ff4d;--radius:12px;--sidebar-w:220px}html,body{background:var(--bg);height:100%;color:var(--text);-webkit-font-smoothing:antialiased;font-family:Inter,sans-serif;font-size:14px}#root{height:100%}button{cursor:pointer;font-family:inherit}a{color:inherit;text-decoration:none}ul{list-style:none}@keyframes spin{to{transform:rotate(360deg)}}.spinner{border:3px solid #00d4aa26;border-top-color:var(--teal);border-radius:50%;width:28px;height:28px;animation:.7s linear infinite spin}.shell{height:100vh;display:flex;overflow:hidden}.sidebar{width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;padding:1.25rem .75rem;display:flex}.sidebar-logo{align-items:center;gap:.5rem;margin-bottom:1.75rem;padding:0 .5rem;display:flex}.sidebar-logo-text{color:var(--text);letter-spacing:-.02em;font-family:Montserrat,sans-serif;font-size:1rem;font-weight:800}.sidebar-logo-text span{color:var(--teal)}.sidebar-nav{flex-direction:column;flex:1;gap:2px;display:flex}.nav-item{width:100%;color:var(--text3);text-align:left;background:0 0;border:none;border-radius:8px;align-items:center;gap:.6rem;padding:.55rem .75rem;font-size:.82rem;font-weight:500;transition:all .15s;display:flex}.nav-item:hover{color:var(--text2);background:#ffffff0d}.nav-item.active{color:var(--teal);background:#00d4aa1a;font-weight:600}.sidebar-bottom{border-top:1px solid var(--border);flex-direction:column;gap:.5rem;margin-top:auto;padding-top:1rem;display:flex}.sidebar-student-info{align-items:center;gap:.6rem;padding:.5rem .75rem;display:flex}.sidebar-avatar{font-size:1.5rem;line-height:1}.sidebar-student-name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;max-width:130px;font-size:.78rem;font-weight:600;overflow:hidden}.sidebar-student-sub{color:var(--text3);font-size:.68rem}.logout-btn{color:#f8717199!important}.logout-btn:hover{color:#f87171!important;background:#f8717114!important}.main-content{background:var(--bg);flex:1;padding:1.5rem;overflow-y:auto}.page{flex-direction:column;gap:1rem;max-width:860px;display:flex}.page-header{justify-content:space-between;align-items:center;margin-bottom:.25rem;display:flex}.page-title{color:var(--text);font-family:Montserrat,sans-serif;font-size:1.1rem;font-weight:800}.page-sub{color:var(--text3);margin-top:.15rem;font-size:.78rem}.page-loading{color:var(--text3);flex-direction:column;justify-content:center;align-items:center;gap:.75rem;padding:4rem;font-size:.85rem;display:flex}.empty-state{color:var(--text3);text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;align-items:center;gap:.75rem;padding:3rem;font-size:.85rem;display:flex}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem}.card-sm{padding:.9rem 1.1rem}.card-header{color:var(--text2);text-transform:uppercase;letter-spacing:.05em;align-items:center;gap:.5rem;margin-bottom:.9rem;font-size:.8rem;font-weight:700;display:flex}.xp-hero{border-radius:var(--radius);background:linear-gradient(135deg,#00d4aa14,#6c63ff0f);border:1px solid #00d4aa33;align-items:center;gap:1.25rem;padding:1.5rem;display:flex}.xp-hero-avatar{flex-shrink:0;font-size:3rem;line-height:1}.xp-hero-info{flex:1;min-width:0}.xp-hero-name{color:var(--text);margin-bottom:.25rem;font-family:Montserrat,sans-serif;font-size:1.1rem;font-weight:800}.xp-hero-title{color:var(--text2);align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:.82rem;display:flex}.level-badge{color:var(--teal);background:#00d4aa26;border:1px solid #00d4aa4d;border-radius:6px;padding:2px 7px;font-family:Montserrat,sans-serif;font-size:.7rem;font-weight:800}.xp-bar-wrap{flex-direction:column;gap:.3rem;display:flex}.xp-bar{background:#ffffff14;border-radius:999px;height:8px;overflow:hidden}.xp-bar-fill{background:linear-gradient(90deg, var(--teal), #00f5c4);border-radius:999px;height:100%;transition:width .6s}.xp-bar-label{color:var(--text3);font-size:.7rem}.xp-total{flex-direction:column;flex-shrink:0;align-items:center;gap:.25rem;display:flex}.xp-total-value{color:var(--gold);font-family:Montserrat,sans-serif;font-size:1.5rem;font-weight:900;line-height:1}.xp-total-label{color:var(--text3);text-transform:uppercase;letter-spacing:.05em;font-size:.65rem}.stats-row{grid-template-columns:repeat(4,1fr);gap:.75rem;display:grid}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-align:center;flex-direction:column;align-items:center;gap:.35rem;padding:1rem;display:flex}.stat-val{color:var(--text);font-family:Montserrat,sans-serif;font-size:1.4rem;font-weight:800;line-height:1}.stat-lbl{color:var(--text3);font-size:.68rem}.hw-list{flex-direction:column;gap:.5rem;display:flex}.hw-item{background:var(--surface2);border:1px solid var(--border);border-radius:8px;justify-content:space-between;align-items:center;padding:.6rem .75rem;display:flex}.hw-title{color:var(--text);font-size:.82rem;font-weight:600}.hw-meta{color:var(--text3);margin-top:.1rem;font-size:.72rem}.classroom-info{align-items:center;gap:.75rem;display:flex}.classroom-emoji{font-size:1.75rem;line-height:1}.classroom-name{color:var(--text);font-size:.9rem;font-weight:700}.classroom-sub{color:var(--text3);margin-top:.1rem;font-size:.73rem}.badge,.badge-pending,.badge-submitted,.badge-graded{border-radius:6px;align-items:center;gap:4px;padding:2px 8px;font-size:.72rem;font-weight:700;display:inline-flex}.badge-pending{color:#ffd54f;background:#ffd54f1f;border:1px solid #ffd54f40}.badge-submitted{color:var(--teal);background:#00d4aa1a;border:1px solid #00d4aa40}.badge-graded{color:var(--violet);background:#a78bfa1a;border:1px solid #a78bfa40}.filter-tabs{flex-wrap:wrap;gap:4px;margin-bottom:.75rem;display:flex}.filter-tab{color:var(--text3);cursor:pointer;background:0 0;border:1px solid #ffffff14;border-radius:7px;align-items:center;gap:5px;padding:5px 12px;font-size:.78rem;font-weight:600;transition:all .15s;display:inline-flex}.filter-tab:hover{color:var(--text2);border-color:#ffffff26}.filter-tab.active{color:var(--teal);background:#00d4aa1f;border-color:#00d4aa59}.tab-badge{color:#fff;background:#ff7043;border-radius:999px;padding:0 5px;font-size:.6rem;font-weight:800;line-height:1.5}.hw-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.75rem;display:grid}.hw-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:.5rem;padding:1rem;display:flex}.hw-card--pending{border-left:3px solid #ffd54f}.hw-card--submitted{border-left:3px solid var(--teal)}.hw-card--graded{border-left:3px solid var(--violet)}.hw-card-header{justify-content:space-between;align-items:center;display:flex}.hw-card-subject{text-transform:uppercase;letter-spacing:.05em;color:var(--text3);font-size:.68rem;font-weight:700}.hw-card-title{color:var(--text);font-size:.88rem;font-weight:700;line-height:1.35}.hw-card-desc{color:var(--text2);font-size:.78rem;line-height:1.5}.hw-card-footer{border-top:1px solid var(--border);justify-content:space-between;align-items:center;margin-top:auto;padding-top:.5rem;display:flex}.hw-card-due,.hw-card-grade{color:var(--text3);align-items:center;gap:4px;font-size:.72rem;display:flex}.hw-card-grade{color:var(--violet);font-weight:700}.my-rank-banner{border-radius:var(--radius);background:linear-gradient(135deg,#ffd70012,#00d4aa0d);border:1px solid #ffd70033;justify-content:space-between;align-items:center;padding:.75rem 1.1rem;display:flex}.my-rank-left{color:var(--text2);align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;display:flex}.my-rank-right{align-items:center;gap:.75rem;display:flex}.rank-num{color:var(--gold);font-family:Montserrat,sans-serif;font-size:1.2rem;font-weight:900}.rank-xp{color:var(--text3);align-items:center;gap:3px;font-size:.8rem;display:flex}.rankings-list{flex-direction:column;gap:4px;display:flex}.ranking-row{background:var(--surface);border:1px solid var(--border);border-radius:9px;align-items:center;gap:.75rem;padding:.65rem .9rem;transition:all .15s;display:flex}.ranking-row--me{background:#00d4aa0f;border-color:#00d4aa40}.rank-medal{text-align:center;flex-shrink:0;width:32px}.medal{font-size:1.25rem;line-height:1}.rank-num-sm{color:var(--text3);font-family:Montserrat,sans-serif;font-size:.82rem;font-weight:700}.rank-info{flex:1;min-width:0}.rank-name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600;display:flex;overflow:hidden}.rank-level{color:var(--text3);margin-top:.1rem;font-size:.7rem}.you-chip{color:var(--teal);text-transform:uppercase;background:#00d4aa26;border-radius:4px;padding:1px 5px;font-size:.6rem;font-weight:800}.rank-streak{color:#ff7043;align-items:center;gap:3px;font-size:.75rem;font-weight:700;display:flex}.rank-xp-col{color:var(--gold);white-space:nowrap;align-items:center;gap:4px;font-size:.8rem;font-weight:700;display:flex}.badges-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem;display:grid}.badge-card{background:var(--surface);border-radius:var(--radius);text-align:center;border:1px solid #a78bfa33;flex-direction:column;align-items:center;gap:.5rem;padding:1.25rem .75rem;transition:all .15s;display:flex}.badge-card:hover{background:#a78bfa0d;border-color:#a78bfa66}.badge-emoji{font-size:2.5rem;line-height:1}.badge-label{color:var(--text2);font-size:.72rem;font-weight:600}.tips-list{flex-direction:column;gap:.45rem;display:flex}.tips-list li{color:var(--text2);font-size:.8rem;line-height:1.5}.profile-hero{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);align-items:center;gap:1.25rem;padding:1.5rem;display:flex}.profile-avatar-wrap{cursor:pointer;flex-shrink:0;position:relative}.profile-avatar{font-size:3.5rem;line-height:1}.profile-avatar-edit{background:var(--surface2);border:1px solid var(--border);border-radius:50%;padding:2px;font-size:.9rem;line-height:1;position:absolute;bottom:-4px;right:-4px}.profile-info{flex:1;min-width:0}.profile-name{color:var(--text);margin-bottom:.3rem;font-family:Montserrat,sans-serif;font-size:1.1rem;font-weight:800}.profile-level{align-items:center;gap:.5rem;margin-bottom:.2rem;display:flex}.profile-title{color:var(--text2);font-size:.82rem}.profile-classroom{color:var(--text3);font-size:.75rem}.avatar-grid{grid-template-columns:repeat(6,1fr);gap:.5rem;display:grid}.avatar-option{cursor:pointer;background:0 0;border:2px solid #0000;border-radius:8px;padding:.4rem;font-size:1.75rem;line-height:1;transition:all .12s}.avatar-option:hover{background:#ffffff0f}.avatar-option.selected{border-color:var(--teal);background:#00d4aa1a}.xp-progress-bar-wrap{margin-bottom:.75rem}.xp-progress-bar{background:#ffffff12;border-radius:999px;height:10px;margin-bottom:.4rem;overflow:hidden}.xp-progress-fill{background:linear-gradient(90deg, var(--teal), #00f5c4);border-radius:999px;height:100%;transition:width .5s}.xp-progress-labels{color:var(--text3);justify-content:space-between;font-size:.7rem;display:flex}.xp-total-row{color:var(--gold);align-items:center;gap:.4rem;font-size:.82rem;display:flex}.attendance-summary{gap:.75rem;margin-bottom:.9rem;display:flex}.att-chip{border:1px solid var(--border);border-radius:8px;flex-direction:column;flex:1;align-items:center;gap:.2rem;padding:.65rem;display:flex}.att-chip--present{background:#00d4aa12;border-color:#00d4aa33}.att-chip--late{background:#ffd54f0f;border-color:#ffd54f33}.att-chip--absent{background:#f871710f;border-color:#f8717126}.att-chip-val{color:var(--text);font-family:Montserrat,sans-serif;font-size:1.1rem;font-weight:800}.att-chip-lbl{color:var(--text3);font-size:.65rem}.attendance-dots{flex-wrap:wrap;gap:5px;display:flex}.att-dot{border-radius:50%;width:12px;height:12px}.att-dot--present{background:var(--teal)}.att-dot--late{background:#ffd54f}.att-dot--absent{background:#f8717199}.att-dot--excused{background:#a78bfa99}.btn-logout{color:#f87171cc;cursor:pointer;background:#f8717112;border:1px solid #f871712e;border-radius:8px;align-items:center;gap:.5rem;padding:.6rem 1.1rem;font-size:.82rem;font-weight:600;transition:all .15s;display:inline-flex}.btn-logout:hover{color:#f87171;background:#f871711f}.btn-icon{border:1px solid var(--border);color:var(--text3);cursor:pointer;background:#ffffff0a;border-radius:8px;justify-content:center;align-items:center;padding:.45rem;transition:all .15s;display:inline-flex}.btn-icon:hover{color:var(--text2);background:#ffffff14}.btn-primary{background:var(--teal);color:#0d0f1a;cursor:pointer;border:none;border-radius:9px;justify-content:center;align-items:center;gap:.4rem;padding:.7rem 1.25rem;font-family:Montserrat,sans-serif;font-size:.9rem;font-weight:800;transition:opacity .15s;display:inline-flex}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-primary:hover:not(:disabled){opacity:.9}.login-page{background:var(--bg);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:2rem;font-family:Inter,sans-serif;display:flex}.login-logo{align-items:center;gap:.6rem;margin-bottom:2rem;display:flex}.login-logo-text{color:var(--text);letter-spacing:-.02em;font-family:Montserrat,sans-serif;font-size:1.3rem;font-weight:800}.login-logo-text span{color:var(--teal)}.login-card{background:var(--surface);border:1px solid #ffffff14;border-radius:14px;width:100%;max-width:360px;padding:2rem}.login-title{color:var(--text);margin-bottom:.3rem;font-family:Montserrat,sans-serif;font-size:1.2rem;font-weight:800}.login-sub{color:var(--text3);margin-bottom:1.5rem;font-size:.8rem;line-height:1.5}.login-error{color:#f87171;background:#f8717114;border:1px solid #f8717133;border-radius:8px;align-items:flex-start;gap:.5rem;margin-bottom:1rem;padding:.6rem;font-size:.8rem;line-height:1.5;display:flex}.login-form{flex-direction:column;gap:.9rem;display:flex}.field{flex-direction:column;gap:.35rem;display:flex}.field-label{color:var(--text3);text-transform:uppercase;letter-spacing:.06em;font-size:.7rem;font-weight:700}.field-wrap{position:relative}.field-icon{color:var(--text3);pointer-events:none;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}.field-input{width:100%;color:var(--text);background:#ffffff0d;border:1px solid #ffffff17;border-radius:8px;outline:none;padding:.6rem .9rem .6rem 2.2rem;font-family:Inter,sans-serif;font-size:.875rem;transition:border-color .15s}.field-input:focus{border-color:#00d4aa66}.login-btn{width:100%;margin-top:.25rem}.login-footer{color:#ffffff2e;text-align:center;margin-top:1.75rem;font-size:.72rem}@media (width<=640px){:root{--sidebar-w:60px}.sidebar-logo-text,.nav-item span,.sidebar-student-name,.sidebar-student-sub{display:none}.sidebar-logo{justify-content:center;padding:0}.nav-item{justify-content:center;padding:.6rem}.sidebar-avatar{font-size:1.2rem}.stats-row{grid-template-columns:repeat(2,1fr)}.xp-hero{text-align:center;flex-direction:column}.xp-total{flex-direction:row}}