*{box-sizing:border-box}:root{--navy:#142642;--blue:#2858dc;--ink:#202d40;--muted:#738096;--line:#e5eaf1;--bg:#f4f6fa}body{margin:0;background:var(--bg);font:14px/1.5 Arial, sans-serif;color:var(--ink)}button,input,select{font:inherit}button{cursor:pointer}.layout{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:240px;background:#142642;color:white;padding:23px 15px;display:flex;flex-direction:column}.brand{display:flex;gap:11px;align-items:center;padding:0 7px 30px}.logo{width:40px;height:40px;background:#315efb;border-radius:10px;display:grid;place-items:center;font-weight:bold}.brand b,.brand small{display:block}.brand small{font-size:10px;color:#aebbd0;margin-top:3px}.sidebar nav{display:grid;gap:6px}.nav{background:none;border:0;color:#c5d0df;text-align:left;padding:12px;border-radius:8px;font-weight:600}.nav.active,.nav:hover{background:#263e62;color:white}.side-foot{margin-top:auto;color:#aebbd0;font-size:11px;padding:10px}.side-foot:first-letter{color:#39c98b}main{margin-left:240px;padding:0 32px;max-width:1600px}.top{height:100px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.top small{font-size:10px;letter-spacing:1px;color:#8995a8;font-weight:bold}.top h1{font-size:25px;color:#172b4b;margin:3px 0}.top-right{display:flex;gap:8px}.btn{border:1px solid transparent;border-radius:7px;padding:9px 13px;font-size:12px;font-weight:bold;display:inline-flex;align-items:center;justify-content:center}.primary{background:var(--blue);color:#fff}.primary:hover{background:#1d45bb}.light{background:white;border-color:#dce3ec;color:#344054}.white{background:white;color:#234ed0}.danger{background:white;border:1px solid #efc7cb;color:#b93242}.file{position:relative;overflow:hidden}.file input{position:absolute;inset:0;opacity:0;cursor:pointer}.page{display:none}.page.active{display:block}.hero{border-radius:13px;background:linear-gradient(110deg,#2447ae,#315efb);color:white;padding:26px 28px;display:flex;justify-content:space-between;align-items:center;gap:15px}.hero small{color:#cbd7ff;font-size:10px;letter-spacing:1px}.hero h2{font-size:23px;margin:5px 0}.hero p{margin:0;color:#e0e7ff}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:17px 0}.stats div,.panel{background:white;border:1px solid var(--line);border-radius:11px}.stats div{padding:16px}.stats small{display:block;color:#78859a;font-size:11px}.stats b{font-size:27px;color:#172b4b}.panel{padding:20px;margin-bottom:16px}.panel h3{margin:0 0 4px;font-size:16px;color:#172b4b}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:17px}.panel-head p,.muted{margin:3px 0 0;color:#8490a2;font-size:12px}.quick{display:grid}.quick button{border:0;border-top:1px solid #edf0f4;background:white;display:flex;align-items:center;text-align:left;gap:13px;padding:13px 3px;color:#315efb}.quick button:first-child{border:0}.quick button>b{background:#edf2ff;border-radius:7px;padding:7px 9px}.quick span{flex:1}.quick strong,.quick small{display:block}.quick strong{font-size:12px;color:#27364d}.quick small{font-size:11px;color:#8994a5;margin-top:3px}.notice,.hint{background:#edf3ff;border:1px solid #dce7ff;border-radius:8px;color:#536a96;padding:12px 14px;font-size:11px;margin:15px 0}.form{display:grid;gap:13px;margin-bottom:16px}.form.four{grid-template-columns:repeat(4,1fr)}.form label,.entry-select label{display:grid;gap:6px;font-size:11px;font-weight:bold;color:#69778c}.form input,.form select,.entry-select select,.component input{border:1px solid #dce3ec;border-radius:7px;padding:9px 10px;min-width:0;width:100%;outline:none;color:#25344b;background:white}.form input:focus,.form select:focus,.entry-select select:focus,.component input:focus{border-color:#7392ff;box-shadow:0 0 0 3px #315efb17}.student-add{grid-template-columns:1fr 2fr auto;align-items:end}.table-scroll{overflow:auto;border:1px solid #edf0f4;border-radius:8px}table{width:100%;border-collapse:collapse;min-width:600px}th{background:#f7f9fc;color:#738096;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.4px;padding:11px}td{padding:10px 11px;border-top:1px solid #edf0f4;font-size:12px}td input{width:100%;min-width:60px;padding:7px;border:1px solid #dce3ec;border-radius:6px}.table-foot{display:flex;justify-content:space-between;align-items:center;padding-top:13px;font-size:11px;color:#8994a5}.subject-card{border:1px solid #e6ebf2;border-radius:9px;margin:12px 0;padding:14px}.subject-head{display:grid;grid-template-columns:2fr 1fr auto;gap:10px;align-items:end}.subject-head label,.grade-edit label{font-size:10px;color:#7a879a;display:grid;gap:5px}.subject-head input,.grade-edit input{border:1px solid #dce3ec;border-radius:6px;padding:8px;min-width:0;width:100%}.component-title{font-size:11px;font-weight:bold;color:#53627a;margin:14px 0 8px}.components{display:grid;gap:7px}.component{display:grid;grid-template-columns:1fr 130px auto;gap:8px;align-items:center}.component input{padding:7px}.small-btn{border:0;background:#eef2ff;color:#3158d9;border-radius:6px;padding:7px 9px;font-size:11px;font-weight:bold}.grade-edit{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.grade-edit input{text-align:center}.subject-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:11px;color:#738096}.tag{font-size:10px;font-weight:bold;color:#3158d9;background:#edf2ff;padding:7px 10px;border-radius:20px}.entry-select{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:end;background:#f7f9fc;padding:14px;border-radius:8px}.entry-section{margin-top:17px;border:1px solid #e8edf3;border-radius:9px;overflow:hidden}.entry-section h4{margin:0;background:#f5f7fb;padding:11px 14px;font-size:13px;color:#273a5a}.entry-table{width:100%;border-collapse:collapse}.entry-table th{background:white}.entry-table td,.entry-table th{border-top:1px solid #edf0f4}.entry-table td:first-child{font-weight:bold}.component-input{display:flex;align-items:center;gap:7px}.component-input input{width:100px;max-width:100%;border:1px solid #dce3ec;border-radius:6px;padding:8px}.component-input small{color:#8894a5;white-space:nowrap}.submit-bar{margin-top:18px;display:flex;align-items:center;justify-content:space-between;background:#f4f7fc;border-radius:8px;padding:14px}.submit-bar span{font-size:12px;font-weight:bold;color:#52627a}.big{padding:12px 18px}.result-filter{grid-template-columns:1fr 1fr}.pill{padding:4px 8px;border-radius:20px;font-size:10px;font-weight:bold}.pass{background:#e4f7ed;color:#118052}.fail{background:#ffeaec;color:#bd3545}.pending{background:#fff3d8;color:#936300}footer{text-align:center;padding:25px;color:#9aa4b2;font-size:10px}#toast{position:fixed;bottom:20px;right:20px;background:#172b4b;color:white;padding:12px 17px;border-radius:8px;opacity:0;transition:.2s;pointer-events:none}#toast.show{opacity:1}@media(max-width:900px){.sidebar{width:205px}main{margin-left:205px;padding:0 18px}.form.four{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}.grade-edit{grid-template-columns:repeat(4,1fr)}}@media(max-width:650px){.sidebar{position:static;width:100%;padding:12px}.brand{padding:0 5px 10px}.sidebar nav{display:flex;overflow:auto}.nav{white-space:nowrap;padding:9px}.side-foot{display:none}main{margin:0;padding:0 12px}.top{height:auto;padding:15px 0;align-items:flex-start;flex-direction:column;gap:10px}.top-right{flex-wrap:wrap}.hero{align-items:flex-start;flex-direction:column}.form.four,.student-add,.result-filter{grid-template-columns:1fr}.panel{padding:14px}.panel-head{align-items:flex-start}.subject-head{grid-template-columns:1fr 1fr}.subject-head label:first-child{grid-column:1/-1}.component{grid-template-columns:1fr 100px auto}.grade-edit{grid-template-columns:repeat(4,1fr)}.entry-select{grid-template-columns:1fr}.submit-bar{align-items:flex-start;flex-direction:column;gap:12px}}