:root{--a:#16a34a;--a2:#0b7a35;--soft:#eaf8ee;--side:#0c1d13;--bg:#f5f8f6;--card:#fff;--text:#152019;--muted:#718078;--line:#e2e9e4;color:var(--text);background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}:root[data-theme=red]{--a:#ef4444;--a2:#b91c1c;--soft:#fff0f0;--side:#291010}:root[data-theme=yellow]{--a:#eab308;--a2:#a16207;--soft:#fff9df;--side:#29210a}:root[data-theme=blue]{--a:#2563eb;--a2:#1d4ed8;--soft:#edf3ff;--side:#0d1930}:root[data-theme=purple]{--a:#8b5cf6;--a2:#6d28d9;--soft:#f3edff;--side:#1a102d}:root[data-theme=pink]{--a:#ec4899;--a2:#be185d;--soft:#fff0f7;--side:#2b1020}:root[data-theme=orange]{--a:#f97316;--a2:#c2410c;--soft:#fff2e9;--side:#2b170b}:root[data-theme=dark]{--a:#60a5fa;--a2:#3b82f6;--soft:#172236;--side:#070b10;--bg:#090e14;--card:#111821;--text:#eef4f8;--muted:#9aa7b4;--line:#26313d}*{box-sizing:border-box}body{background:var(--bg);min-width:320px;margin:0}button,input,select{font:inherit}button{cursor:pointer}.shell{min-height:100vh;display:flex}aside{background:var(--side);color:#d9e8de;z-index:5;flex-direction:column;width:255px;padding:24px 15px 16px;display:flex;position:fixed;inset:0 auto 0 0}.brand{align-items:center;gap:11px;padding:0 9px 30px;display:flex}.logo{background:linear-gradient(135deg,var(--a),var(--a2));width:43px;height:43px;box-shadow:0 0 30px color-mix(in srgb,var(--a) 35%,transparent);border-radius:14px;place-items:center;display:grid}.logo svg{fill:none;stroke:#fff;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;width:29px}.brand b{color:#fff;letter-spacing:-.5px;font-size:20px;display:block}.brand small{opacity:.6;font-size:9px}nav{gap:5px;display:grid}nav button{color:#d9e8de;text-align:left;opacity:.8;background:0 0;border:0;border-radius:12px;align-items:center;gap:12px;padding:13px;font-weight:700;display:flex}nav button:hover,nav button.sel{color:#fff;opacity:1;background:#ffffff12}nav button.sel{box-shadow:inset 3px 0 var(--a)}nav span{text-align:center;width:20px;font-size:18px}.side-bottom{gap:8px;margin-top:auto;display:grid}.profile{color:#fff;cursor:pointer;background:#ffffff0c;border-radius:14px;align-items:center;gap:10px;padding:11px;display:flex}.profile>span{font-size:25px}.profile b,.profile small{display:block}.profile small{opacity:.55;font-size:10px}.ghost{color:#ffffff80;background:0 0;border:0;padding:8px;font-size:11px}main{flex:auto;width:auto;min-width:0;min-height:100vh;margin-left:255px;overflow-x:hidden}main>header{justify-content:space-between;align-items:center;height:96px;padding:25px 38px 14px;display:flex}.eyebrow,.classbar small,.class-banner small{letter-spacing:1.5px;color:var(--a);font-size:9px;font-weight:900}h1{letter-spacing:-1px;margin:5px 0;font-size:30px}h2{letter-spacing:-.5px;margin:4px 0;font-size:22px}.header-right{align-items:center;gap:14px;display:flex}.themes{border:1px solid var(--line);background:var(--card);border-radius:999px;gap:5px;padding:6px;display:flex}.themes button{border:2px solid #0000;border-radius:50%;width:16px;height:16px}.themes button.chosen{outline:2px solid var(--a);outline-offset:2px}.green{background:#16a34a}.red{background:#ef4444}.yellow{background:#eab308}.blue{background:#2563eb}.purple{background:#8b5cf6}.pink{background:#ec4899}.orange{background:#f97316}.dark{background:#111827}.user{border:1px solid var(--line);background:var(--card);border-radius:13px;width:42px;height:42px;font-size:23px}.classbar{border:1px solid var(--line);background:var(--card);border-radius:17px;align-items:center;gap:16px;width:auto;margin:0 38px 25px;padding:12px 14px;display:flex;box-shadow:0 8px 30px #00000005}.classbar>div:first-child{margin-right:auto}.classbar select{background:0 0;border:0;min-width:190px;margin-top:3px;padding:5px 0;font-weight:800;display:block}.class-total{text-align:right}.class-total b{color:var(--a);margin-top:2px;font-size:20px;display:block}.content{width:100%;max-width:1450px;margin:0;padding:0 38px 50px}.hero{color:#fff;background:radial-gradient(circle at 85% 25%,#ffffff25,transparent 20%),linear-gradient(135deg,var(--a2),var(--a));width:100%;min-height:205px;box-shadow:0 22px 55px color-mix(in srgb,var(--a) 18%,transparent);border-radius:26px;justify-content:space-between;align-items:center;padding:29px;display:flex;overflow:hidden}.hero small{letter-spacing:1.5px;opacity:.75;font-weight:900}.hero strong{letter-spacing:-3px;margin:4px 0;font-size:54px;display:block}.hero p{opacity:.78;margin:0}.hero-badge{background:#ffffff16;border-radius:50%;place-items:center;width:105px;height:105px;font-size:42px;display:grid;transform:rotate(12deg);box-shadow:0 0 70px #fff2}.cards4{grid-template-columns:repeat(4,1fr);gap:14px;margin-top:15px;display:grid}.card{border:1px solid var(--line);background:var(--card);color:inherit;text-align:left;border-radius:18px;min-height:135px;padding:18px;transition:all .18s;position:relative}.card:hover{border-color:color-mix(in srgb,var(--a) 40%,var(--line));transform:translateY(-3px)}.card i{background:var(--soft);width:39px;height:39px;color:var(--a);border-radius:12px;place-items:center;font-size:19px;font-style:normal;display:grid}.card small{color:var(--muted);margin-top:17px;display:block}.card b{margin-top:2px;font-size:25px;display:block}.card span{color:var(--muted);position:absolute;bottom:17px;right:17px}.head{margin:33px 0 14px}.head small{letter-spacing:1.5px;color:var(--a);font-size:9px;font-weight:900}.quick{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.quick button{background:var(--card);border:1px solid var(--line);color:inherit;text-align:left;border-radius:18px;gap:7px;padding:20px;display:grid}.quick button:hover{border-color:var(--a)}.quick i{color:var(--a);font-size:25px;font-style:normal}.quick span{color:var(--muted);font-size:12px}.list{gap:8px;display:grid}.row{border:1px solid var(--line);background:var(--card);border-radius:15px;align-items:center;gap:13px;min-height:68px;padding:11px 14px;display:flex}.rank{width:22px;color:var(--muted);text-align:center}.student-avatar{background:var(--soft);border-radius:13px;place-items:center;width:45px;height:45px;font-size:25px;display:grid}.student-info{flex:1}.student-info b,.student-info small{display:block}.student-info small{color:var(--muted);margin-top:2px;font-size:10px}.xp{text-align:right;min-width:65px}.xp b{color:var(--a);font-size:20px;display:block}.xp small{color:var(--muted);font-size:9px}.row>button:not(.del){border:1px solid var(--line);background:0 0;border-radius:10px;width:35px;height:35px;font-size:19px}.plus{color:var(--a);border-color:color-mix(in srgb,var(--a) 35%,var(--line))!important}.minus{color:#ef4444}.del{color:#9aa49e;background:0 0;border:0;font-size:22px}.del:hover{color:#ef4444}.toolbar{align-items:center;gap:10px;margin:8px 0 13px;display:flex}.toolbar input{width:min(410px,100%)}.toolbar span{color:var(--muted);margin-right:auto;font-size:11px}.primary,.outline{border-radius:10px;padding:10px 14px;font-weight:800}.primary{background:var(--a);color:#fff;border:1px solid #0000}.outline{border:1px solid var(--line);background:var(--card);color:var(--a2)}input,select{border:1px solid var(--line);background:var(--card);color:inherit;border-radius:10px;outline:none;padding:10px 12px}.class-banner{border:1px solid color-mix(in srgb,var(--a) 20%,var(--line));background:var(--soft);border-radius:22px;justify-content:space-between;align-items:center;padding:24px;display:flex}.class-banner span{color:var(--muted);font-size:12px}.class-banner>div:last-child{text-align:right}.class-banner>div:last-child b{color:var(--a);font-size:34px;display:block}.assignment-grid,.reward-grid{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.assignment,.reward{border:1px solid var(--line);background:var(--card);border-radius:19px;padding:20px}.assignment{min-height:190px}.assignment .tag{background:var(--soft);color:var(--a2);border-radius:999px;padding:5px 8px;font-size:10px;font-weight:900;display:inline-block}.assignment>small{float:right;color:var(--muted);font-size:10px}.assignment h3{margin:28px 0 18px}.progress{background:var(--soft);border-radius:99px;height:9px;overflow:hidden}.progress i{background:var(--a);border-radius:inherit;height:100%;display:block}.assignment footer{color:var(--muted);justify-content:space-between;align-items:center;margin-top:12px;font-size:11px;display:flex}.assignment footer button{background:var(--soft);color:var(--a2);border:0;border-radius:9px;padding:7px 9px;font-weight:800}.reward{text-align:center}.reward>div{font-size:45px}.reward p{color:var(--muted);min-height:34px;font-size:12px}.reward select{width:100%}.rule{background:var(--soft);color:var(--a2);border-radius:999px;margin-bottom:16px;padding:9px 12px;font-size:11px;display:inline-block}.chart{border:1px solid var(--line);background:var(--card);border-radius:19px;gap:18px;padding:22px;display:grid}.bar{grid-template-columns:175px 1fr 50px;align-items:center;gap:12px;font-size:12px;display:grid}.bar>div{background:var(--soft);border-radius:99px;height:10px;overflow:hidden}.bar i{background:var(--a);border-radius:99px;height:100%;display:block}.bar b{color:var(--a);text-align:right}.backdrop{z-index:20;background:#07100b99;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:var(--card);border:1px solid var(--line);border-radius:22px;width:min(450px,100%);padding:21px;box-shadow:0 30px 100px #0005}.modal header{justify-content:space-between;height:auto;padding:0 0 14px;display:flex}.modal header button{color:var(--muted);background:0 0;border:0;font-size:25px}.modal label{color:var(--muted);gap:7px;margin:12px 0;font-size:11px;font-weight:800;display:grid}.actions{justify-content:flex-end;gap:8px;margin-top:18px;display:flex}.big-avatar{text-align:center;padding:7px;font-size:55px}.avatar-pick{flex-wrap:wrap;gap:7px;margin:12px 0;display:flex}.avatar-pick button{border:1px solid var(--line);background:var(--card);border-radius:11px;width:43px;height:43px;font-size:22px}.avatar-pick button.chosen{border-color:var(--a);background:var(--soft)}.toast{z-index:50;color:#fff;background:#152019;border-radius:12px;padding:12px 16px;font-weight:800;position:fixed;bottom:25px;right:25px;box-shadow:0 18px 45px #0004}.onboard{background:radial-gradient(circle at top,var(--soft),transparent 48%),var(--bg);place-items:center;min-height:100vh;padding:20px;display:grid}.onboard-card{background:var(--card);border:1px solid var(--line);border-radius:29px;width:min(540px,100%);padding:34px;box-shadow:0 30px 90px #0002}.onboard-card .brand{padding:0 0 28px}.onboard-card h1{margin:8px 0;font-size:39px}.onboard-card p{color:var(--muted);line-height:1.6}.onboard-card>input{width:100%;margin:10px 0}.wide{width:100%;padding:13px}@media (width<=1050px){.cards4{grid-template-columns:repeat(2,1fr)}.hero{grid-column:auto}.assignment-grid,.reward-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=750px){aside{width:72px;padding:18px 8px}.brand{justify-content:center;padding:0 0 25px}.brand>div:last-child{display:none}nav button{justify-content:center;padding:13px;font-size:0}nav span{font-size:18px}.profile div,.ghost{display:none}.profile{justify-content:center}main{flex:auto;width:auto;min-width:0;margin-left:72px}main>header,.content{padding-left:17px;padding-right:17px}.classbar{flex-wrap:wrap;margin-left:17px;margin-right:17px}.classbar>div:first-child{width:100%}.class-total{margin-right:auto}.themes{display:none}.quick,.assignment-grid,.reward-grid{grid-template-columns:1fr}.bar{grid-template-columns:105px 1fr 40px}}@media (width<=500px){.cards4{grid-template-columns:1fr}.hero strong{font-size:43px}.hero-badge{width:75px;height:75px}.toolbar{flex-wrap:wrap}.toolbar input{width:100%}.toolbar span{margin-right:auto}.row{gap:7px}.student-info small{display:none}.xp{min-width:45px}}