:root{--navy:#102a52;--navy2:#163b67;--blue:#2d6cdf;--cyan:#2bb6c4;--pink:#e83e74;--green:#28a86b;--orange:#f39a38;--purple:#7a5ce4;--ink:#1d2b45;--muted:#71809a;--line:#dfe7f1;--bg:#f5f8fc;--card:#fff;--shadow:0 18px 48px rgba(26,57,90,.10)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'Sarabun',sans-serif;color:var(--ink);background:var(--bg)}button,input,select,textarea{font:inherit}a{color:inherit}.hidden{display:none!important}.btn{border:0;border-radius:12px;padding:10px 15px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:.18s}.btn:hover{transform:translateY(-1px)}.btn.primary{color:#fff;background:linear-gradient(135deg,#ec477a,#d72e64);box-shadow:0 10px 22px #e83e7430}.btn.dark{color:#fff;background:#17345e}.btn.soft{color:#214d83;background:#edf4ff;border:1px solid #d7e4f7}.btn.ghost{color:#52627d;background:transparent;border:1px solid #d8e1ec}.btn.big{min-height:48px;padding:0 20px}.btn.full{width:100%}.btn.mini{padding:6px 10px;font-size:12px}.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#2b72d9,#28a4b9);box-shadow:0 8px 20px #2366b030}.brand small,.brand b{display:block}.brand small{font-size:10px;letter-spacing:.08em;color:#8394ad}.brand b{font-size:19px;color:#17345e}.public-body{background:radial-gradient(circle at 8% 8%,#e6f5ff 0,transparent 27%),radial-gradient(circle at 90% 16%,#ffeef5 0,transparent 24%),#f7f9fd}.public-nav{width:min(1260px,calc(100% - 36px));margin:18px auto 0;height:68px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;background:#ffffffdd;border:1px solid #e2e8f2;border-radius:20px;backdrop-filter:blur(12px);box-shadow:0 12px 36px #22496c10;position:sticky;top:12px;z-index:20}.nav-actions{display:flex;gap:8px}.public-main{width:min(1260px,calc(100% - 36px));margin:26px auto 0}.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch}.hero-copy{padding:58px 52px;border-radius:30px;background:linear-gradient(135deg,#102d58 0%,#163f6d 60%,#1c6c85 100%);color:#fff;position:relative;overflow:hidden}.hero-copy:after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;right:-150px;top:-140px;border:46px solid #ffffff0b}.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.08em;color:#57c8d4}.hero h1{font-size:clamp(38px,5vw,68px);line-height:1.05;margin:16px 0 18px;letter-spacing:-.03em}.hero h1 span{color:#ff7ba0}.hero p{color:#c7d6e7;font-size:16px;line-height:1.7}.hero-actions{display:flex;gap:10px;margin-top:26px}.hero-panel{border-radius:30px;background:#fff;border:1px solid #e3e9f2;box-shadow:var(--shadow);padding:20px;display:grid;gap:16px}.season-card{padding:26px;border-radius:22px;background:linear-gradient(135deg,#f2f7ff,#f7fbff);border:1px solid #dae7f7}.season-card small{color:#2a65ac;font-weight:800;letter-spacing:.08em}.season-card h3{font-size:28px;margin:6px 0 0;color:#17345e}.season-card p{margin:2px 0 18px;color:#8090a7}.season-line{display:flex;justify-content:space-between;color:#61718a;font-size:12px}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mini-grid>div{border:1px solid #e6ebf2;border-radius:18px;padding:18px;background:#fbfcfe}.mini-grid i{color:#2d76be}.mini-grid b{display:block;font-size:27px;margin-top:7px}.mini-grid span{font-size:12px;color:#7b899f}.feature-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0}.feature-strip article{background:#fff;border:1px solid #e2e8f1;border-radius:18px;padding:18px;box-shadow:0 8px 22px #244c6a08}.feature-strip i{color:#2c77bd;font-size:20px}.feature-strip b,.feature-strip span{display:block}.feature-strip b{margin:9px 0 3px}.feature-strip span{font-size:12px;color:#7d899a;line-height:1.5}.leader-section{background:#fff;border:1px solid #e0e7f0;border-radius:24px;padding:22px;margin-bottom:34px;box-shadow:var(--shadow)}.section-title,.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-title small,.panel-head small{font-size:10px;font-weight:800;letter-spacing:.09em;color:#5690b8}.section-title h2,.panel-head h2{margin:3px 0 0;font-size:22px}.live-dot{font-size:10px;color:#198f5c;background:#ebfaf3;border-radius:999px;padding:7px 10px;font-weight:800}.leader-table{margin-top:14px}.leader-row{display:grid;grid-template-columns:44px 1fr auto 90px;align-items:center;gap:12px;padding:11px 8px;border-top:1px solid #edf1f5}.leader-row:first-child{border-top:0}.pos{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:#f1f4f8;color:#65768e;font-weight:800}.pos.top{background:#fff4d7;color:#b77b08}.student-id{display:flex;align-items:center;gap:10px;min-width:0}.avatar-circle{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#dceeff,#f7e6ff);color:#214b7c;font-weight:800}.avatar-circle.big{width:48px;height:48px;flex:0 0 auto}.student-id small,.student-id b{display:block}.student-id small{color:#8490a2;font-size:11px}.rank-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:800;color:var(--rank,#64748b);background:color-mix(in srgb,var(--rank,#64748b) 11%,white);border:1px solid color-mix(in srgb,var(--rank,#64748b) 26%,white)}.rank-pill.big{font-size:13px;padding:9px 13px}.score{text-align:right;color:#1e4f83}.public-footer{text-align:center;color:#8792a4;font-size:12px;padding:10px 20px 32px}.modal{position:fixed;inset:0;background:#0b203b88;display:grid;place-items:center;padding:18px;z-index:100;backdrop-filter:blur(6px)}.modal-card{width:min(440px,100%);background:#fff;border-radius:24px;padding:28px;position:relative;box-shadow:0 30px 80px #071a32aa}.modal-x{position:absolute;right:16px;top:16px;border:0;background:#f0f3f7;width:34px;height:34px;border-radius:50%;cursor:pointer}.login-card h2{margin:8px 0 14px}.role-switch{display:grid;grid-template-columns:1fr 1fr;padding:4px;background:#eff3f7;border-radius:12px;margin-bottom:16px}.role-switch button{border:0;background:transparent;border-radius:9px;padding:9px;font-weight:700;color:#7b8899;cursor:pointer}.role-switch button.active{background:#fff;color:#194c83;box-shadow:0 5px 14px #243d5c12}.login-card label,.form-stack label{display:block;font-size:12px;font-weight:700;color:#52627a;margin-bottom:12px}.login-card input,.form-stack input,.form-stack select,.form-stack textarea{width:100%;margin-top:5px;border:1px solid #ced8e5;border-radius:11px;padding:10px 12px;background:#fbfdff;color:#22324b}.login-card input,.form-stack input,.form-stack select{height:42px}.form-message{min-height:20px;margin-top:9px;font-size:12px;color:#c23c3c;text-align:center}.app-body{overflow-x:hidden}.app-shell{min-height:100vh;display:grid;grid-template-columns:250px 1fr}.sidebar{background:linear-gradient(180deg,#102c4f,#123854 65%,#143f56);color:#e8f0f6;padding:18px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.side-brand{padding:5px 7px 18px;border-bottom:1px solid #ffffff17}.side-brand b{color:#fff}.side-brand small{color:#9eb6c8}.user-panel{display:flex;gap:10px;align-items:center;padding:18px 6px}.user-panel b,.user-panel small{display:block}.user-panel b{font-size:13px}.user-panel small{color:#a8becd;font-size:10px;margin-top:2px}.side-nav{display:grid;gap:5px}.side-nav button{border:0;background:transparent;color:#d7e3ea;text-align:left;border-radius:11px;padding:10px 12px;font-weight:700;cursor:pointer}.side-nav button i{width:22px;color:#91b7ca}.side-nav button:hover{background:#ffffff0d}.side-nav button.active{background:#f4f8fb;color:#235675;box-shadow:0 8px 18px #0c203030}.side-nav button.active i{color:#2d899a}.sidebar-bottom{margin-top:auto;display:grid;gap:5px;border-top:1px solid #ffffff17;padding-top:10px}.sidebar-bottom a{padding:9px 11px;border-radius:10px;text-decoration:none;font-size:12px;color:#b8cbd6}.app-main{min-width:0}.app-top{height:82px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;background:#ffffffeb;border-bottom:1px solid #e3e9f0;position:sticky;top:0;z-index:15;backdrop-filter:blur(10px)}.app-top small{font-size:10px;color:#8492a6}.app-top h1{font-size:22px;margin:2px 0 0}.icon-button{display:none;width:38px;height:38px;border:1px solid #d9e2ec;background:#fff;border-radius:10px}.app-content{padding:24px 28px 38px;max-width:1480px;width:100%;margin:auto}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.stat-card{background:#fff;border:1px solid #e1e8f0;border-radius:18px;padding:18px;display:flex;gap:14px;align-items:center;box-shadow:0 9px 28px #294b6d09}.stat-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#edf5ff;color:#2d6bb4;font-size:18px}.stat-card.green .stat-icon{background:#ebf9f2;color:#209767}.stat-card.orange .stat-icon{background:#fff4e8;color:#d77a1e}.stat-card.purple .stat-icon{background:#f2efff;color:#6f55d6}.stat-card small,.stat-card b,.stat-card p{display:block}.stat-card small{font-size:10px;color:#8a96a7;font-weight:700}.stat-card b{font-size:24px;margin:2px 0}.stat-card p{margin:0;color:#8b97a8;font-size:10px}.dash-grid,.split-grid,.eport-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.panel{background:#fff;border:1px solid #e0e7ef;border-radius:20px;padding:20px;box-shadow:0 10px 30px #244d6c08}.panel-head{margin-bottom:14px}.season-chip,.count-badge{font-size:10px;font-weight:800;color:#32618d;background:#eef5fd;padding:7px 10px;border-radius:999px}.rank-row{display:grid;grid-template-columns:38px 1fr auto 60px;align-items:center;gap:9px;padding:10px 0;border-top:1px solid #eef2f5}.rank-row:first-child{border-top:0}.rank-row small,.rank-row b{display:block}.rank-row small{font-size:10px;color:#8592a4}.rank-row strong{text-align:right}.activity-list{display:grid}.activity,.assignment-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:10px 0;border-top:1px solid #eef2f5}.activity:first-child,.assignment-item:first-child{border-top:0}.activity b,.activity small,.assignment-item b,.assignment-item small{display:block}.activity small,.assignment-item small{font-size:10px;color:#8692a4;margin-top:2px}.activity time{font-size:9px;color:#9aa4b1}.score-dot{min-width:38px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:11px;font-weight:800}.score-dot.plus{color:#1a8a5b;background:#eaf8f1}.score-dot.minus{color:#c24f3b;background:#fff0ed}.student-hero,.avatar-hero{border-radius:22px;padding:24px;background:linear-gradient(135deg,#123257,#1b5877);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px;overflow:hidden;position:relative}.student-hero.compact{padding:20px}.student-hero h2,.avatar-hero h2{margin:7px 0 4px;font-size:29px}.student-hero p,.avatar-hero p{margin:0;color:#c7d8e3}.big-rank{min-width:170px;text-align:center;border:1px solid #ffffff26;background:#ffffff0d;padding:17px;border-radius:18px}.big-rank small,.big-rank b,.big-rank span{display:block}.big-rank b{font-size:23px;color:#fff;margin:4px}.big-rank span{color:#bcd5e3}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:620px}th,td{text-align:left;border-bottom:1px solid #edf1f5;padding:10px 8px;font-size:12px}th{font-size:10px;color:#7d8a9d;background:#f9fbfd}.td-small{display:block;font-size:9px;color:#909baa;margin-top:2px}.sticky-panel{align-self:start;position:sticky;top:100px}.selected-box{padding:12px 14px;border-radius:12px;background:#eff7ff;border:1px solid #d9e8f6;margin-bottom:14px;color:#61718a}.selected-box b,.selected-box span{display:block}.selected-box b{color:#224d77}.selected-box span{font-size:10px;margin-top:2px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form-stack textarea{resize:vertical}.check{display:flex!important;align-items:center;gap:8px}.check input{width:auto!important;height:auto!important;margin:0!important}.achievement-list{display:grid;gap:8px;margin-top:15px}.achievement-list>div{padding:10px 12px;border-radius:10px;background:#f7f9fc}.achievement-list b,.achievement-list small{display:block}.achievement-list small{font-size:10px;color:#8994a4}.avatar-hero{justify-content:flex-start}.avatar-stage{width:170px;height:190px;border-radius:24px;background:linear-gradient(180deg,#d7efff,#edf7ff);position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;flex-direction:column}.avatar-head{width:72px;height:68px;background:#f2c9ad;border-radius:18px 18px 14px 14px;position:relative;z-index:2}.avatar-head:before{content:"";position:absolute;left:14px;right:14px;top:25px;height:6px;border-left:6px solid #304760;border-right:6px solid #304760}.avatar-head span:first-child{position:absolute;width:76px;height:27px;left:-2px;top:-10px;border-radius:18px 18px 6px 6px;background:#5a3c2a}.avatar-body{width:92px;height:70px;border-radius:16px 16px 8px 8px;background:#4d76c6;margin-top:-2px}.avatar-legs{display:flex;gap:12px}.avatar-legs i{width:26px;height:38px;background:#344a74;border-radius:0 0 8px 8px}.coin-box{display:inline-flex;align-items:center;gap:8px;background:#ffffff12;border:1px solid #ffffff22;border-radius:13px;padding:10px 12px;margin-top:14px}.coin-box i{color:#ffd45b}.coin-box span{font-size:10px;color:#bfd1df}.avatar-stats{display:flex;gap:15px;margin-top:10px;font-size:11px;color:#bed0dc}.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.shop-card{border:1px solid #e1e8f0;border-radius:16px;padding:14px;background:#fbfcfe}.shop-card.owned{border-color:#bfe3d2;background:#f4fbf8}.shop-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;margin-bottom:10px}.shop-card small{font-size:9px;color:#8996a7}.shop-card h3{font-size:13px;margin:4px 0 8px}.item-stats{display:flex;gap:7px;font-size:10px;color:#66778b}.shop-foot{display:flex;align-items:center;justify-content:space-between;margin-top:11px}.shop-foot b{font-size:11px;color:#255784}.status-dot{width:10px;height:10px;border-radius:50%;background:#ef9e3d}.status-dot.done{background:#2fa66e}.empty-state{display:grid;place-items:center;text-align:center;gap:6px;padding:50px 20px;color:#8793a4}.empty-state.compact{padding:18px}.loader-card{padding:40px;text-align:center;color:#71809a}.skeleton-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.skeleton-grid div{height:120px;border-radius:18px;background:linear-gradient(90deg,#eef2f6,#f8fafc,#eef2f6);background-size:200% 100%;animation:sk 1.4s infinite}@keyframes sk{to{background-position:-200% 0}}.toast{position:fixed;right:22px;bottom:22px;z-index:200;max-width:360px;padding:12px 16px;border-radius:12px;background:#17385d;color:#fff;box-shadow:0 16px 38px #0b203b44;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:none}.toast.bad{background:#a93b3b}.eport-body{background:linear-gradient(180deg,#eef5fb,#f8f9fc)}.eport-wrap{width:min(1080px,calc(100% - 28px));margin:18px auto 40px}.eport-cover{height:260px;border-radius:28px;background:linear-gradient(135deg,#153a69,#1b7185);background-size:cover;background-position:center;position:relative}.eport-home{position:absolute;left:18px;top:18px;background:#ffffffdd;padding:8px 12px;border-radius:11px;text-decoration:none;font-size:12px;font-weight:800}.eport-profile{margin:-54px 24px 18px;position:relative;z-index:2;background:#fff;border-radius:22px;padding:18px;display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:center;box-shadow:var(--shadow)}.eport-photo{width:100px;height:100px;border-radius:22px;background:#eef4fb;border:6px solid #fff;display:grid;place-items:center;overflow:hidden;font-size:30px;color:#4e7197}.eport-photo img{width:100%;height:100%;object-fit:cover}.eport-profile small{color:#6c91b0;font-size:10px;font-weight:800}.eport-profile h1{margin:2px 0;font-size:26px}.eport-profile p{margin:0;color:#7e8a9b}.eport-card{background:#fff;border:1px solid #e0e7ef;border-radius:20px;padding:20px;box-shadow:0 9px 28px #284b6b08}.eport-card h3{margin-top:0}.tagline{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #edf1f4;padding:9px 0;font-size:12px}.tagline span{color:#758398;text-align:right}.eport-card blockquote{margin:14px 0 0;border-left:3px solid #7f67e3;padding-left:12px;color:#66768b}.timeline{position:relative;padding:3px 0 14px 20px;border-left:2px solid #dae5ef}.timeline:before{content:"";position:absolute;left:-6px;top:6px;width:10px;height:10px;border-radius:50%;background:#4f8fb8}.timeline b,.timeline span,.timeline small{display:block}.timeline span{font-size:12px;margin-top:3px}.timeline small{font-size:10px;color:#8995a5}.achievements{margin-top:16px}.ach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:15px}.ach-card{border:1px solid #e3e9f1;border-radius:16px;overflow:hidden;background:#fbfcfe}.ach-card img{width:100%;height:150px;object-fit:cover}.ach-card>div{padding:13px}.ach-card small{font-size:9px;color:#4d88ae;font-weight:800}.ach-card h3{font-size:14px;margin:4px 0}.ach-card p{font-size:11px;color:#778498}.ach-card time{font-size:9px;color:#9aa4b2}
@media(max-width:1020px){.hero{grid-template-columns:1fr}.feature-strip{grid-template-columns:1fr 1fr}.stats-grid{grid-template-columns:1fr 1fr}.shop-grid{grid-template-columns:1fr 1fr}.app-shell{grid-template-columns:210px 1fr}}
@media(max-width:760px){.public-nav,.public-main{width:min(100% - 20px,1260px)}.public-nav{height:60px}.public-nav .brand small{display:none}.nav-actions .ghost{display:none}.hero-copy{padding:34px 24px}.hero h1{font-size:40px}.hero-actions{flex-direction:column}.feature-strip{grid-template-columns:1fr}.leader-row{grid-template-columns:38px 1fr 72px}.leader-row .rank-pill{display:none}.app-shell{display:block}.sidebar{position:fixed;left:-270px;top:0;width:250px;z-index:100;transition:.2s}.menu-open .sidebar{left:0}.app-top{height:70px;padding:0 16px}.icon-button{display:block}.app-content{padding:16px}.stats-grid,.dash-grid,.split-grid,.eport-grid{grid-template-columns:1fr}.sticky-panel{position:static}.shop-grid{grid-template-columns:1fr 1fr}.student-hero,.avatar-hero{align-items:flex-start;flex-direction:column}.big-rank{width:100%}.eport-cover{height:190px}.eport-profile{grid-template-columns:auto 1fr;margin:-40px 12px 14px}.eport-profile>.rank-pill{grid-column:1/-1}.eport-photo{width:78px;height:78px}.ach-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.leader-row{padding:9px 2px}}
@media(max-width:440px){.mini-grid,.stats-grid,.shop-grid{grid-template-columns:1fr}.hero-panel{padding:13px}.hero-copy{border-radius:24px}.hero-panel,.leader-section{border-radius:20px}.eport-wrap{width:calc(100% - 16px)}.eport-profile{padding:13px}.eport-profile h1{font-size:20px}}

/* ===== S-CLASS V2 PHASE 1 : behavior room filter + assignment parity ===== */
.behavior-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.behavior-filter-grid{display:grid;grid-template-columns:180px 1fr;gap:10px;margin-bottom:14px}
.behavior-filter-grid label,.assignment-title-detail-grid label,.submit-filter-grid label,.assignment-student-filter{font-size:11px;font-weight:700;color:#617086}
.behavior-filter-grid select,.behavior-filter-grid input,.assignment-title-detail-grid input,.assignment-title-detail-grid textarea,.assignment-student-filter input,.submit-filter-grid select,.submit-filter-grid input,.submit-filter-grid textarea{width:100%;margin-top:6px;border:1px solid #d9e2ec;border-radius:12px;padding:11px 12px;background:#fff;color:#17304f;font:inherit;outline:none}
.behavior-filter-grid select:focus,.behavior-filter-grid input:focus,.assignment-title-detail-grid input:focus,.assignment-title-detail-grid textarea:focus,.assignment-student-filter input:focus,.submit-filter-grid select:focus,.submit-filter-grid input:focus,.submit-filter-grid textarea:focus{border-color:#74aee0;box-shadow:0 0 0 3px #74aee020}
.assignment-layout{align-items:start}
.assignment-title-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.assignment-student-panel{margin-top:4px;border:1px solid #dce6ef;border-radius:16px;padding:14px;background:#f9fbfd}
.assignment-student-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.assignment-student-head small,.assignment-student-head b{display:block}.assignment-student-head small{font-size:9px;color:#5b8bb5;font-weight:800;letter-spacing:.05em}.assignment-student-head b{font-size:13px;margin-top:2px}.assignment-student-head>span{font-size:10px;color:#78879a}
.assignment-student-filter{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px;margin-bottom:10px}
.assignment-student-actions{display:flex;gap:7px;flex-wrap:wrap}
.assignment-student-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:360px;overflow:auto;padding-right:3px}
.assignment-student-check{display:grid!important;grid-template-columns:auto 36px 1fr;gap:9px;align-items:center;padding:9px 10px;border:1px solid #e0e7ef;border-radius:12px;background:#fff;cursor:pointer;font-size:11px!important;font-weight:400!important;color:#24384e!important}
.assignment-student-check:hover{border-color:#a9c9e5;background:#f7fbff}.assignment-student-check input{width:auto!important;height:auto!important;margin:0!important}
.assignment-student-avatar{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#edf5ff;color:#2c679d;font-weight:800}
.assignment-student-copy b,.assignment-student-copy small{display:block}.assignment-student-copy small{font-size:9px;color:#8794a5;margin-top:2px}
.submit-filter-grid{display:grid;grid-template-columns:180px 1fr 1.4fr;gap:10px;margin-bottom:16px}
.submit-by-student-layout{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:14px}
.submit-student-side,.submit-job-side{border:1px solid #e0e7ef;border-radius:16px;padding:14px;background:#fbfcfe}
.submit-box-title{font-size:13px;font-weight:800;color:#203b5b;margin-bottom:4px}.hint-text{font-size:10px;color:#8793a4;margin-bottom:10px}
.submit-student-list,.submit-job-list{display:grid;gap:8px;max-height:500px;overflow:auto}
.submit-student-card{border:1px solid #e0e7ef;border-radius:12px;background:#fff;padding:10px 11px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;text-align:left;cursor:pointer;color:#20364f;font-family:inherit}
.submit-student-card:hover{border-color:#a9c9e5;background:#f7fbff}.submit-student-card b,.submit-student-card small{display:block}.submit-student-card small{font-size:9px;color:#8a96a6;margin-top:2px}.submit-student-card strong{font-size:10px;color:#c56d20;background:#fff2e6;padding:5px 8px;border-radius:999px}
.submit-job-side .assignment-student-actions{margin:10px 0}
.submit-job-card{display:grid!important;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:11px;border:1px solid #e1e8f0;border-radius:12px;background:#fff;font-size:11px!important;font-weight:400!important;color:#253a51!important}.submit-job-card input{width:auto!important;height:auto!important;margin:0!important}.submit-job-card b,.submit-job-card small{display:block}.submit-job-card small{font-size:9px;color:#8794a5;margin-top:2px}.submit-job-card strong{color:#25845c}
.loader-card.compact{padding:20px}

@media(max-width:900px){.assignment-student-grid{grid-template-columns:1fr}.submit-filter-grid{grid-template-columns:1fr 1fr}.submit-filter-grid label:last-child{grid-column:1/-1}.submit-by-student-layout{grid-template-columns:1fr}}
@media(max-width:760px){.behavior-filter-grid,.assignment-title-detail-grid,.submit-filter-grid,.assignment-student-filter{grid-template-columns:1fr}.assignment-student-grid{grid-template-columns:1fr}}

/* ==========================================================
   S-CLASS V2.2 — LEGACY TEACHER UI + MOBILE FIRST OVERRIDES
   Restore the visual language of the original GAS teacher UI
   while keeping the PHP/MySQL SPA logic.
========================================================== */
:root{
  --teacher-navy:#244762;
  --teacher-navy-2:#2c5570;
  --teacher-blue:#3d82ad;
  --teacher-teal:#2f918c;
  --teacher-violet:#756aa9;
  --teacher-bg:#f2f6f9;
  --teacher-surface:#fff;
  --teacher-border:#d5e1e9;
  --teacher-text:#26394c;
  --teacher-muted:#627487;
}
body.teacher-active{background:var(--teacher-bg);color:var(--teacher-text)}
body.teacher-active .app-shell{display:grid;grid-template-columns:270px minmax(0,1fr);background:radial-gradient(circle at 92% 5%,rgba(82,161,178,.10),transparent 31%),radial-gradient(circle at 35% 100%,rgba(112,126,181,.065),transparent 32%),linear-gradient(180deg,#f8fafc 0,#eef4f7 100%);min-height:100vh}
body.teacher-active .sidebar{width:270px;padding:12px;position:sticky;top:0;height:100vh;height:100dvh;background:linear-gradient(180deg,#244762 0%,#2c5570 55%,#244963 100%);border-right:1px solid rgba(255,255,255,.18);box-shadow:10px 0 28px rgba(34,67,90,.14);color:#edf6fb;overflow-y:auto;overscroll-behavior:contain;z-index:80;transition:width .2s ease,transform .22s ease}
body.teacher-active .legacy-sidebar-brand{display:flex;align-items:center;gap:10px;padding:9px 8px 13px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.055);border-radius:12px 12px 0 0}
body.teacher-active .legacy-sidebar-brand img{width:46px;height:46px;object-fit:contain;border:2px solid rgba(255,255,255,.68);border-radius:13px;background:#fff;box-shadow:0 8px 20px rgba(4,15,28,.18);flex:0 0 auto}
body.teacher-active .legacy-sidebar-brand strong,body.teacher-active .legacy-sidebar-brand span{display:block}
body.teacher-active .legacy-sidebar-brand strong{font-size:12.5px;line-height:1.35;color:#fff;font-weight:800}
body.teacher-active .legacy-sidebar-brand span{font-size:9.5px;line-height:1.45;color:#d8e7f0;margin-top:3px}
body.teacher-active .side-collapse{width:100%;min-height:38px;border:1px solid rgba(255,255,255,.25);border-radius:10px;background:rgba(255,255,255,.10);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:7px;cursor:pointer}
body.teacher-active .side-collapse:hover{background:rgba(255,255,255,.18)}
body.teacher-active .legacy-user-panel{padding:11px 7px;margin-bottom:5px;border-bottom:1px solid rgba(255,255,255,.08)}
body.teacher-active .legacy-user-panel .avatar-circle{background:#f5f0ff;color:#41546f;border:2px solid rgba(255,255,255,.9)}
body.teacher-active .legacy-user-panel b{color:#fff;font-size:12.5px}
body.teacher-active .legacy-user-panel small{color:#c8dce8;font-size:10px}
body.teacher-active .teacher-side-menu{display:grid;gap:5px;padding-bottom:8px}
body.teacher-active .teacher-side-menu>button,body.teacher-active .teacher-menu-main,body.teacher-active .teacher-sub-btn{width:100%;min-height:42px;border:1px solid transparent;border-radius:11px;background:transparent;color:#edf6fb;text-align:left;padding:9px 10px;display:flex;align-items:center;gap:8px;font-weight:700;cursor:pointer;transition:.18s}
body.teacher-active .teacher-side-menu>button i,body.teacher-active .teacher-menu-main i,body.teacher-active .teacher-sub-btn i{width:20px;color:#c8e2ee;text-align:center;flex:0 0 auto}
body.teacher-active .teacher-side-menu>button:hover,body.teacher-active .teacher-menu-main:hover,body.teacher-active .teacher-sub-btn:hover{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.11);color:#fff;transform:translateX(2px)}
body.teacher-active .teacher-side-menu button.active,body.teacher-active .teacher-menu-group.active-parent>.teacher-menu-main{background:linear-gradient(90deg,#3f8f98,#4e84ad);border-color:rgba(181,232,232,.55);color:#fff;box-shadow:0 7px 18px rgba(20,48,66,.20)}
body.teacher-active .teacher-side-menu button.active i,body.teacher-active .teacher-menu-group.active-parent>.teacher-menu-main i{color:#fff}
.teacher-menu-group{display:grid;gap:3px}.teacher-menu-caret{margin-left:auto;width:auto!important;font-size:10px;transition:transform .18s ease}.teacher-menu-group.is-open .teacher-menu-caret{transform:rotate(180deg)}
.teacher-sub-menu{display:none;gap:4px}.teacher-menu-group.is-open .teacher-sub-menu{display:grid}
body.teacher-active .teacher-sub-menu{margin:2px 0 4px 7px;padding:4px 4px 4px 10px;border-left:1px solid rgba(207,235,242,.36)}
body.teacher-active .teacher-sub-menu .teacher-sub-btn{min-height:36px;border-left:2px solid rgba(210,235,243,.42);background:rgba(14,45,65,.12);color:#e6f1f7;font-size:12px;padding:8px 9px}
body.teacher-active .teacher-sub-menu .teacher-sub-btn.active{border-color:#c9e5ee;border-left-color:#5eb9b1;background:#f1f8fa;color:#285b74;box-shadow:0 5px 14px rgba(22,54,74,.15)}
body.teacher-active .teacher-sub-menu .teacher-sub-btn.active i{color:#2f918c}
body.teacher-active .sidebar-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:8px;display:grid;gap:3px;margin-top:auto}
body.teacher-active .sidebar-bottom a{color:#d8e7f0;font-size:11.5px;padding:9px 10px;display:flex;align-items:center;gap:9px;text-decoration:none;border-radius:9px}
body.teacher-active .sidebar-bottom a:hover{background:rgba(255,255,255,.10);color:#fff}

body.teacher-active .app-main{min-width:0;background:transparent}
body.teacher-active .app-top{height:84px;padding:0 26px;position:sticky;top:0;z-index:40;border:0;border-bottom:1px solid #dce6ed;background:rgba(255,255,255,.96);box-shadow:0 7px 20px rgba(45,72,94,.065);backdrop-filter:blur(12px)}
.topbar-title-wrap{display:flex;align-items:center;gap:12px;min-width:0}
body.teacher-active .app-top h1{margin:0;color:#23445f;font-size:22px;font-weight:800;line-height:1.2}
body.teacher-active .app-top p{margin:4px 0 0;color:#687b8d;font-size:11px}
body.teacher-active .teacher-top-actions{margin:0;display:flex;gap:8px;flex-wrap:nowrap}
body.teacher-active .teacher-top-btn{border-radius:10px;font-weight:800;white-space:nowrap}
body.teacher-active .logout-top-btn{color:#a0444e;border-color:#ead4d8}
body.teacher-active .app-content{padding:22px 26px 40px;max-width:1480px;margin:0 auto;width:100%}

body.teacher-active .panel,body.teacher-active .coming-soon{position:relative;border:1px solid #d6e2ea;border-radius:17px;background:linear-gradient(180deg,#fff 0%,#fcfdfe 100%);box-shadow:0 11px 26px rgba(49,76,98,.07)}
body.teacher-active .panel:before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,#5ca2c3,#62b9ae,#8c82b8);opacity:.78;pointer-events:none}
body.teacher-active .panel-head small{color:#4f8eaa}.panel-head h2{color:#29485f;font-weight:800}
body.teacher-active label{color:#42596d;font-weight:700}
body.teacher-active input,body.teacher-active select,body.teacher-active textarea{border:1px solid #cbdbe5;background:#fff;color:#283d50;box-shadow:inset 0 1px 2px rgba(48,73,94,.025)}
body.teacher-active input:focus,body.teacher-active select:focus,body.teacher-active textarea:focus{border-color:#4d94b5;box-shadow:0 0 0 3px rgba(77,148,181,.13);outline:0}
body.teacher-active .btn.primary{background:linear-gradient(135deg,#468daf,#36789f);box-shadow:0 6px 14px rgba(48,112,150,.18)}
body.teacher-active .btn.soft{border:1px solid #c5dbe8;background:#edf6fa;color:#326f91}
body.teacher-active .btn.ghost{border:1px solid #c6d3dd;background:#fff;color:#4b6275}
body.teacher-active .stat-card{border-color:#d7e2eb;border-radius:15px;background:#fff;box-shadow:0 9px 22px rgba(37,58,79,.075)}
body.teacher-active .table-wrap{border:1px solid #d7e2e9;border-radius:13px;background:#fff}
body.teacher-active table th{background:linear-gradient(180deg,#eef6f9,#e8f1f5);color:#355269;border-bottom-color:#c8dae5}
body.teacher-active table td{color:#354b5e}
body.teacher-active table tbody tr:hover{background:#edf7f8}

/* Current score page, based on the original GAS filter row */
.current-score-filters{display:grid;grid-template-columns:minmax(150px,.75fr) minmax(220px,1.4fr) minmax(180px,.8fr);gap:12px;margin:10px 0 16px}
.current-score-filters label{font-size:12px}.current-score-filters input,.current-score-filters select{width:100%;height:43px;margin-top:6px;border-radius:11px;padding:0 12px}
.current-score-head{align-items:flex-end}
.td-small{display:block;color:#8796a7;font-size:10px;margin-top:3px}

/* Placeholder panels preserve old menu structure without pretending the backend is complete */
.legacy-coming-soon{min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px}
.legacy-coming-soon>i{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;background:#edf6fa;color:#3d82ad;font-size:28px;margin-bottom:14px}
.legacy-coming-soon h3{margin:0;color:#29485f;font-size:23px}.legacy-coming-soon p{max-width:620px;color:#66798b;line-height:1.7;margin:8px auto}.coming-note{max-width:660px;margin:7px auto 16px;padding:10px 14px;border-radius:11px;background:#f5f8fb;border:1px solid #dbe6ed;color:#6b7e90;font-size:12px}

/* modal in teacher topbar */
.simple-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:18px;background:rgba(18,37,54,.58);backdrop-filter:blur(7px)}
.simple-modal-card{width:min(650px,100%);max-height:calc(100dvh - 36px);overflow:auto;position:relative;padding:26px;border-radius:20px;background:#fff;border:1px solid #d4e1e9;box-shadow:0 24px 70px rgba(20,44,65,.28)}
.simple-modal-close{position:absolute;top:13px;right:13px;width:38px;height:38px;border:0;border-radius:50%;background:#eef3f6;color:#426077;cursor:pointer}.modal-desc{color:#63798b;line-height:1.7}.rank-quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:15px 0 20px}.rank-quick-grid span{padding:12px;border:1px solid #d8e4eb;border-radius:12px;background:#f8fbfc;text-align:center;font-weight:800;color:#36556c}

/* Desktop collapsed sidebar */
@media(min-width:861px){
  body.sidebar-collapsed.teacher-active .app-shell{grid-template-columns:82px minmax(0,1fr)}
  body.sidebar-collapsed.teacher-active .sidebar{width:82px}
  body.sidebar-collapsed .sidebar-brand-copy,body.sidebar-collapsed .sidebar-user-copy,body.sidebar-collapsed .side-collapse span,body.sidebar-collapsed .side-nav button span,body.sidebar-collapsed .sidebar-bottom span,body.sidebar-collapsed .teacher-menu-caret{display:none!important}
  body.sidebar-collapsed .legacy-sidebar-brand{justify-content:center;padding-left:4px;padding-right:4px}
  body.sidebar-collapsed .legacy-user-panel{justify-content:center}
  body.sidebar-collapsed .side-nav button{justify-content:center;padding-left:6px;padding-right:6px}
  body.sidebar-collapsed .teacher-sub-menu{padding-left:2px;margin-left:0;border-left:0}
}

.sidebar-overlay{display:none}
.mobile-menu-button{display:none}

/* Tablet: drawer sidebar, roomy text, no desktop shrink */
@media(max-width:860px){
  body.teacher-active .app-shell,body.student-active .app-shell{display:block;min-height:100dvh}
  body.teacher-active .sidebar,body.student-active .sidebar{position:fixed;left:0;top:0;bottom:0;width:min(310px,86vw)!important;height:100dvh;transform:translateX(-105%);transition:transform .22s ease;z-index:220;box-shadow:16px 0 44px rgba(21,43,62,.25);padding-bottom:max(14px,env(safe-area-inset-bottom));}
  body.menu-open .sidebar{transform:translateX(0)}
  body.menu-open{overflow:hidden}
  .sidebar-overlay{display:block;position:fixed;inset:0;z-index:210;background:rgba(18,35,50,.46);backdrop-filter:blur(3px);opacity:0;visibility:hidden;pointer-events:none;transition:.2s}
  body.menu-open .sidebar-overlay{opacity:1;visibility:visible;pointer-events:auto}
  .side-collapse{display:none!important}
  .mobile-menu-button{display:grid!important;place-items:center;flex:0 0 auto;width:42px;height:42px;border-radius:11px;border:1px solid #d5e2ea;background:#fff;color:#315f7b;cursor:pointer}
  body.teacher-active .app-top,body.student-active .app-top{height:auto;min-height:74px;padding:10px 14px;gap:10px;position:sticky;top:0}
  body.teacher-active .app-top h1,body.student-active .app-top h1{font-size:19px}
  body.teacher-active .app-top p,body.student-active .app-top p{max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.teacher-active .teacher-top-actions{gap:5px}
  .teacher-top-actions .btn{width:42px;height:42px;padding:0;border-radius:11px}
  .teacher-top-actions .btn span{display:none}
  body.teacher-active .app-content,body.student-active .app-content{padding:16px 14px 34px;max-width:none}
  .current-score-filters{grid-template-columns:1fr 1fr}.current-score-filters label:last-child{grid-column:1/-1}
  .rank-quick-grid{grid-template-columns:repeat(2,1fr)}
}

/* Mobile: cards, full-width forms, comfortable touch targets */
@media(max-width:640px){
  body.teacher-active .app-top,body.student-active .app-top{padding:9px 10px;min-height:66px}
  .topbar-title-wrap{gap:8px;min-width:0;flex:1}.mobile-menu-button{width:40px;height:40px}
  body.teacher-active .app-top h1,body.student-active .app-top h1{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
  body.teacher-active .app-top p,body.student-active .app-top p{font-size:9.5px;max-width:45vw}
  .teacher-top-actions .btn{width:38px;height:38px}
  body.teacher-active .app-content,body.student-active .app-content{padding:12px 10px 30px}
  .panel{padding:14px!important;border-radius:15px!important}.panel-head{align-items:flex-start;gap:8px}.panel-head h2{font-size:18px}.panel-head small{font-size:9px}
  .stats-grid,.dash-grid,.split-grid,.eport-grid,.assignment-layout,.submit-by-student-layout,.behavior-filter-grid,.assignment-title-detail-grid,.assignment-student-filter,.submit-filter-grid,.current-score-filters{grid-template-columns:1fr!important}
  .current-score-filters label:last-child{grid-column:auto}
  .stat-card{min-height:96px;padding:14px}.stat-card b{font-size:22px}
  .form-stack label{font-size:12px}.form-stack input,.form-stack select{min-height:46px}.form-stack textarea{min-height:96px}
  .btn{min-height:42px}.btn.mini{min-height:38px;padding:8px 11px}
  .responsive-table-wrap{border:0!important;background:transparent!important;overflow:visible!important}
  .responsive-data-table,.responsive-data-table tbody,.responsive-data-table tr,.responsive-data-table td{display:block;width:100%}
  .responsive-data-table thead{display:none}
  .responsive-data-table tr{margin-bottom:10px;padding:7px 11px;border:1px solid #d8e5ec;border-radius:14px;background:#fff!important;box-shadow:0 5px 15px rgba(47,78,101,.055)}
  .responsive-data-table td{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:10px;padding:8px 0!important;border:0!important;border-bottom:1px dashed #e4ecf1!important;text-align:right!important;min-height:38px}
  .responsive-data-table td:last-child{border-bottom:0!important}
  .responsive-data-table td:before{content:attr(data-label);text-align:left;color:#718494;font-size:10.5px;font-weight:800}
  .responsive-data-table td>b,.responsive-data-table td>.rank-pill,.responsive-data-table td>.btn{justify-self:end}
  .responsive-data-table .td-small{font-size:9px}
  .activity{grid-template-columns:auto 1fr!important;gap:9px!important}.activity time{grid-column:2;font-size:9px}
  .rank-row{grid-template-columns:32px minmax(0,1fr) auto!important}.rank-row>.rank-pill{display:none}.rank-row>strong{font-size:12px}
  .assignment-student-grid{grid-template-columns:1fr!important}.assignment-student-check{min-height:58px}
  .submit-student-card{min-height:58px}.submit-job-card{grid-template-columns:auto minmax(0,1fr) auto!important}
  .selected-box{min-height:56px}
  .legacy-coming-soon{min-height:260px;padding:24px 14px}.legacy-coming-soon>i{width:62px;height:62px;font-size:24px}.legacy-coming-soon h3{font-size:20px}
  .simple-modal{padding:0;align-items:end}.simple-modal-card{width:100%;max-height:92dvh;border-radius:22px 22px 0 0;padding:22px 16px max(18px,env(safe-area-inset-bottom));border-bottom:0}
  .rank-quick-grid{grid-template-columns:1fr 1fr}
  .toast{left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));max-width:none;text-align:center}
}

@media(max-width:390px){
  body.teacher-active .app-top h1,body.student-active .app-top h1{max-width:40vw}
  .teacher-top-actions .btn{width:36px;height:36px}
  .responsive-data-table td{grid-template-columns:82px minmax(0,1fr)}
  .rank-quick-grid{grid-template-columns:1fr}
}

/* S-Class V2.3 — Student Player Hub Legacy + Responsive */
body.student-active{--student-text:#24384e;--student-muted:#718198;min-height:100dvh;background:radial-gradient(circle at 10% 0,rgba(108,99,255,.08),transparent 25%),radial-gradient(circle at 100% 15%,rgba(52,174,202,.09),transparent 28%),linear-gradient(180deg,#f5f9fc 0,#eaf2f8 100%);color:var(--student-text)}
.student-player-shell{min-height:100dvh}.student-player-topbar{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px max(18px,calc((100vw - 1240px)/2));border-bottom:1px solid #dbe5ee;background:rgba(255,255,255,.93);backdrop-filter:blur(14px);position:sticky;top:0;z-index:80}
.student-player-brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;min-width:0}.student-player-brand img{width:50px;height:50px;object-fit:contain}.student-player-brand span,.student-player-brand strong,.student-player-brand small{display:block}.student-player-brand span{font-size:10px;font-weight:800;letter-spacing:.08em;color:#557a9a}.student-player-brand strong{font-size:18px;line-height:1.1;margin:2px 0}.student-player-brand small{font-size:10px;color:#7b899b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.student-player-top-actions{display:flex;align-items:center;gap:8px}.student-top-action{min-height:42px}.student-player-container{width:min(1240px,calc(100% - 32px));margin:20px auto 38px}
.student-player-profile-card{position:relative;overflow:hidden;border:1px solid #d5e3ed;border-radius:28px;background:#fff;box-shadow:0 14px 36px rgba(41,79,107,.08);margin-bottom:18px}.student-player-profile-pattern{position:absolute;inset:0 0 auto 0;height:84px;background:linear-gradient(115deg,#566ee4,#6d63dc 48%,#3c98b1)}
.student-player-profile-main{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(260px,.58fr);gap:20px;align-items:center;padding:42px 26px 18px}.student-player-avatar-frame{width:104px;height:104px;border-radius:26px;border:6px solid #fff;background:linear-gradient(145deg,#e8efff,#f7f9ff);box-shadow:0 10px 26px rgba(31,58,86,.14);display:grid;place-items:center;color:#4f66c7;font-size:34px;font-weight:800;position:relative}.student-player-online-dot{position:absolute;right:4px;bottom:5px;width:15px;height:15px;border-radius:50%;background:#22b983;border:3px solid #fff}
.student-player-identity{padding-top:26px;min-width:0}.student-player-label{font-size:10px;font-weight:800;letter-spacing:.08em;color:#5d75c9}.student-player-identity h1{font-size:28px;line-height:1.1;margin:5px 0 4px}.student-player-identity p{margin:0;color:var(--student-muted);font-size:13px}.student-player-chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.student-player-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:#eef3ff;color:#5367b8;font-size:10px;font-weight:800}.student-player-chip-yellow{background:#fff6da;color:#a47212}
.student-player-rank-zone{margin-top:26px;border:1px solid #e0e7ef;border-radius:20px;padding:14px;background:linear-gradient(180deg,#fbfcfe,#f6f8fb)}.student-player-rank-title{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}.student-player-rank-title span{font-size:9px;color:#7a8797;font-weight:800}.student-player-rank-title strong{font-size:12px}.student-rank-badge{display:flex;align-items:center;gap:12px}.student-rank-orb{width:48px;height:48px;border-radius:15px;background:#eef3ff;color:var(--rank);display:grid;place-items:center;font-size:21px}.student-rank-badge small,.student-rank-badge b,.student-rank-badge div>span{display:block}.student-rank-badge small{font-size:8px;color:#8a95a5}.student-rank-badge b{font-size:18px;color:var(--rank);margin:1px 0}.student-rank-badge div>span{font-size:10px;color:#68778b}
.student-player-stat-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 18px 18px}.student-player-mini-stat{border:1px solid #e0e7ef;border-radius:16px;padding:12px 14px;background:#fbfcfe}.student-player-mini-stat small,.student-player-mini-stat b,.student-player-mini-stat span{display:block}.student-player-mini-stat small{font-size:9px;color:#7b8798;font-weight:700}.student-player-mini-stat b{font-size:24px;margin:2px 0;color:#394d64}.student-player-mini-stat span{font-size:9px;color:#929baa}.tone-purple b{color:#6c63d8!important}.tone-green b{color:#248c68!important}.tone-orange b{color:#c9782b!important}.tone-blue b{color:#3b7fae!important}
.student-game-command-center{background:#fff;border:1px solid #d9e5ee;border-radius:26px;box-shadow:0 12px 30px rgba(41,75,103,.065);overflow:hidden}.student-game-panel-head{display:flex;align-items:center;gap:13px;padding:18px 20px 12px}.student-game-panel-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#eef2ff;color:#615bd2;font-size:18px}.student-game-panel-copy{min-width:0}.student-game-section-code{font-size:9px;letter-spacing:.09em;color:#6882a1;font-weight:800}.student-game-panel-copy h2{margin:2px 0;font-size:20px}.student-game-panel-copy p{margin:0;color:#7d8998;font-size:11px}
.student-game-tabbar{display:flex;gap:7px;overflow:auto;padding:8px 16px 14px;border-bottom:1px solid #edf1f5;scrollbar-width:none}.student-game-tabbar::-webkit-scrollbar{display:none}.student-game-tabbar button{border:1px solid #e0e7ef;background:#f8fafc;color:#617087;border-radius:14px;padding:10px 14px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font:inherit;font-size:11px;font-weight:700;cursor:pointer}.student-game-tabbar button.active{background:linear-gradient(135deg,#665ee0,#4f79c8);border-color:transparent;color:#fff;box-shadow:0 7px 17px rgba(83,88,191,.18)}
.student-app-content{padding:18px!important;max-width:none!important}.student-score-layout{display:grid;grid-template-columns:minmax(330px,.82fr) minmax(0,1.18fr);gap:16px}.student-score-overview{display:grid;grid-template-columns:190px 1fr;gap:16px;align-items:center}.student-score-total-ring{aspect-ratio:1;border-radius:50%;border:12px solid #e8edf6;display:grid;place-content:center;text-align:center;background:#fff}.student-score-total-ring span,.student-score-total-ring small{font-size:10px;color:#778599}.student-score-total-ring b{font-size:38px;color:var(--rank);line-height:1}.student-score-total-ring small{margin-top:6px;font-weight:800}.student-score-breakdown{display:grid;gap:9px}.student-score-breakdown>div{display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center;border:1px solid #e7ecf2;border-radius:13px;padding:10px;background:#fbfcfd}.student-score-breakdown i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#edf4fb;color:#4b779c}.student-score-breakdown span{font-size:11px;color:#6e7d91}.student-score-breakdown b{font-size:15px}
.student-profile-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(310px,.95fr);gap:16px}.student-public-switch{padding:11px 12px;border:1px solid #e2e8ef;border-radius:13px;background:#f8fafc}.student-achievement-list{margin-top:14px;display:grid;gap:8px}.student-achievement-list>div{display:flex;align-items:center;gap:10px;border:1px solid #e4eaf0;border-radius:13px;padding:9px 11px;background:#fbfcfd}.student-achievement-list b,.student-achievement-list small{display:block}.student-achievement-list small{font-size:9px;color:#8995a5;margin-top:2px}.achievement-mini-icon{width:34px;height:34px;border-radius:10px;background:#fff5d9;color:#b98418;display:grid;place-items:center;flex:0 0 auto}
.student-avatar-player-card{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:center;overflow:hidden;border:1px solid #dce5ef;border-radius:22px;background:linear-gradient(135deg,#f6f5ff,#eef7fb);padding:20px;margin-bottom:16px}.student-avatar-player-copy h2{font-size:28px;margin:4px 0}.student-avatar-wallet-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}.student-avatar-wallet-row>div{border:1px solid #e0e6ef;border-radius:14px;background:#fff;padding:11px}.student-avatar-wallet-row span{font-size:9px;color:#8490a1}.student-avatar-wallet-row b{display:block;font-size:19px;margin-top:3px}.student-avatar-preview{display:grid;place-items:center;min-height:220px}.legacy-avatar-stage{transform:scale(.9)}.student-shop-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(max-width:980px){.student-player-profile-main{grid-template-columns:auto 1fr}.student-player-rank-zone{grid-column:1/-1;margin-top:0}.student-player-stat-grid{grid-template-columns:repeat(2,1fr)}.student-score-layout,.student-profile-layout{grid-template-columns:1fr}.student-shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.student-avatar-player-card{grid-template-columns:1fr 240px}}
@media(max-width:760px){
body.student-active{padding-bottom:76px}.student-player-topbar{min-height:64px;padding:8px 10px;gap:8px}.student-player-brand img{width:42px;height:42px}.student-player-brand strong{font-size:15px}.student-player-brand small{max-width:48vw;font-size:8.5px}.student-player-top-actions .student-top-action{width:40px;height:40px;min-height:40px;padding:0;border-radius:12px}.student-player-top-actions .student-top-action span{display:none}.student-player-container{width:calc(100% - 18px);margin:10px auto 20px}.student-player-profile-card{border-radius:20px}.student-player-profile-pattern{height:68px}.student-player-profile-main{grid-template-columns:72px minmax(0,1fr);gap:12px;padding:34px 12px 12px}.student-player-avatar-frame{width:72px;height:72px;border-width:4px;border-radius:20px;font-size:25px}.student-player-identity{padding-top:23px}.student-player-label{font-size:8px}.student-player-identity h1{font-size:20px}.student-player-identity p{font-size:10px}.student-player-chip-row{gap:5px;margin-top:8px}.student-player-chip{font-size:8.5px;padding:5px 7px}.student-player-rank-zone{grid-column:1/-1;margin:0;padding:10px;border-radius:15px}.student-player-stat-grid{grid-template-columns:repeat(2,1fr);gap:7px;padding:0 10px 10px}.student-player-mini-stat{padding:9px 10px;border-radius:13px}.student-player-mini-stat b{font-size:20px}.student-game-command-center{border-radius:20px;overflow:visible}.student-game-panel-head{padding:13px 12px 9px}.student-game-panel-copy h2{font-size:16px}.student-game-panel-copy p{font-size:9px}.student-game-tabbar{position:fixed!important;left:0;right:0;bottom:0;z-index:190;background:rgba(255,255,255,.97);border-top:1px solid #d9e3ed;border-bottom:0;padding:7px 7px max(7px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);gap:4px;box-shadow:0 -10px 30px rgba(33,60,83,.12)}.student-game-tabbar button{min-width:0;padding:7px 2px;border:0;background:transparent;border-radius:12px;display:grid;place-items:center;gap:3px;font-size:8px}.student-game-tabbar button i{font-size:17px}.student-game-tabbar button.active{box-shadow:none;background:#eef0ff;color:#5b5bc4}.student-app-content{padding:10px!important}.student-score-overview{grid-template-columns:1fr}.student-score-total-ring{width:158px;margin:auto}.student-avatar-player-card{grid-template-columns:1fr;padding:14px}.student-avatar-preview{order:-1;min-height:180px}.legacy-avatar-stage{transform:scale(.78)}.student-avatar-wallet-row{grid-template-columns:repeat(3,1fr)}.student-shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.student-profile-layout{grid-template-columns:1fr}
}
@media(max-width:420px){.student-player-brand small{max-width:42vw}.student-player-top-actions{gap:5px}.student-player-top-actions .student-top-action{width:36px;height:36px;min-height:36px}.student-shop-grid{grid-template-columns:1fr!important}.student-avatar-wallet-row{grid-template-columns:1fr 1fr}.student-avatar-wallet-row>div:last-child{grid-column:1/-1}}