:root{--bg:#f4f7fb;--panel:#fff;--ink:#182337;--muted:#718096;--line:#e5eaf1;--blue:#1768e6;--navy:#0c2240;--shadow:0 10px 30px rgba(22,50,91,.08)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,sans-serif;font-size:14px}button,input,select,textarea{font:inherit}aside{position:fixed;inset:0 auto 0 0;width:250px;background:#fff;border-right:1px solid var(--line);padding:24px 16px;z-index:20;display:flex;flex-direction:column}.brand,.user{display:flex;align-items:center;gap:11px}.brand{padding:0 8px 24px}.brand>i{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#156be8,#744be0);color:white;font-style:normal;font-weight:900}.brand b,.brand small,.user b,.user small{display:block}.brand small,.user small{color:var(--muted);margin-top:3px}.user{background:#f2f6fd;border:1px solid #e0e9f7;border-radius:13px;padding:11px;margin-bottom:20px}.user>i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#1768e6;color:white;font-style:normal;font-weight:bold}nav{display:grid;gap:5px}nav button{height:43px;border:0;border-radius:9px;background:transparent;text-align:left;padding:0 12px;font-weight:bold;color:#556276;cursor:pointer}nav button i{font-style:normal;width:29px;display:inline-block}nav button.active{background:#eaf2ff;color:#1261d2}.logout{margin-top:auto;color:#dc465a;text-decoration:none;font-weight:bold;padding:13px}main{margin-left:250px;min-height:100vh}header{height:82px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 30px;position:sticky;top:0;z-index:10}header h1{font-size:20px;margin:0 0 5px}header p{font-size:11px;color:var(--muted);margin:0}.header-user{margin-left:auto;display:flex;gap:14px;align-items:center}.header-user span{font-size:10px;color:#258656;background:#e9f8ef;padding:8px 10px;border-radius:20px}.header-user button,#menu{width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:9px}.page{display:none;padding:27px;max-width:1500px;margin:auto}.page.active{display:block}.hero{min-height:190px;border-radius:20px;padding:35px 40px;color:#fff;background:linear-gradient(110deg,#0b306c,#1264cf 58%,#784bd7);display:flex;align-items:center;justify-content:space-between;box-shadow:0 18px 35px rgba(23,79,164,.2)}.hero small{letter-spacing:1px;background:#ffffff1a;padding:6px 10px;border-radius:20px}.hero h2{font-size:27px;margin:18px 0 8px}.hero p{color:#dce9ff;margin:0 0 22px}.calendar{width:125px;height:125px;border:1px solid #ffffff40;background:#ffffff18;border-radius:18px;display:grid;place-items:center}.calendar b{font-size:48px;line-height:38px}.stats,.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:20px 0}.stats article,.card{background:var(--panel);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}.stats article{padding:18px;display:flex;gap:14px;align-items:center}.stats article>i{width:43px;height:43px;border-radius:12px;display:grid;place-items:center;font-style:normal;font-size:19px}.blue{background:#e8f1ff;color:#1768e6}.green{background:#e9f9ef;color:#20a75f}.orange{background:#fff3df;color:#dc970a}.purple{background:#f0eaff;color:#7549df}.stats small,.stats b,.stats em{display:block}.stats small,.stats em{color:var(--muted);font-size:10px;font-style:normal}.stats b{font-size:23px;margin:4px 0}.grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}.card-title{height:58px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 19px}.card-title h3{font-size:14px}.card-title span{margin-left:auto;color:var(--muted);font-size:10px}.donut-wrap{min-height:210px;display:flex;justify-content:center;align-items:center;gap:24px}.donut{width:130px;height:130px;border-radius:50%;display:grid;place-items:center;position:relative}.donut:after{content:"";width:76px;height:76px;background:var(--panel);border-radius:50%}.legend{display:grid;gap:10px}.legend span{font-size:11px}.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px}.quick button{border:1px solid var(--line);background:#fafbfe;border-radius:11px;padding:17px;text-align:left;color:#1768e6;font-size:20px;cursor:pointer}.quick b{display:block;color:var(--ink);font-size:11px;margin-top:9px}.btn{height:40px;border-radius:9px;border:1px solid var(--line);padding:0 15px;font-weight:bold;cursor:pointer;text-decoration:none;display:inline-grid;place-items:center}.primary{background:#1768e6;color:#fff;border-color:#1768e6}.white{background:white;color:#155fc6;border:0}.soft{background:#fff;color:#47566d}.full{width:100%}.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px}.page-head h2{margin:0 0 6px;font-size:24px}.page-head p{margin:0;color:var(--muted);font-size:12px}.page-head>div:last-child{display:flex;gap:8px}.page-head input,.toolbar input,.toolbar select{height:40px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:0 11px}.toolbar{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center}.toolbar>input{min-width:250px}.toolbar span{margin-left:auto;color:var(--muted)}.student-row{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;padding:13px 18px;border-top:1px solid #edf0f4}.student-row:first-child{border-top:0}.avatar{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#e8f1ff;color:#1768e6;font-size:10px;font-weight:bold}.student-info{display:flex;align-items:center}.student-info small{display:block;color:var(--muted);margin-top:3px}.status-buttons{display:flex;gap:6px}.status-buttons button{width:70px;height:31px;border:1px solid var(--line);background:#fff;border-radius:8px;color:#7c8797;font-size:10px;font-weight:bold}.status-buttons button.selected.hadir{background:#e8f8ee;color:#159653;border-color:#9fdfb9}.status-buttons button.selected.sakit{background:#fff5df;color:#bd8000;border-color:#efd28e}.status-buttons button.selected.izin{background:#e9f1ff;color:#1768e6;border-color:#a8c7f1}.status-buttons button.selected.alpa{background:#ffebee;color:#d94255;border-color:#efb4bc}.table-card{overflow:hidden}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse}th{text-align:left;background:#fafbfc;color:#778395;font-size:10px;padding:12px 15px}td{padding:12px 15px;border-top:1px solid #edf0f4;font-size:11px}td strong{font-size:12px}.badge{padding:5px 8px;border-radius:20px;background:#e8f8ee;color:#169654;font-size:9px}.action-btn{border:0;background:transparent;color:#1768e6;font-weight:bold;cursor:pointer}.delete{color:#dc465a}.cards4 .card{padding:19px}.subject-card>i,.document-card>i,.report-cards article>i{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:#e8f1ff;color:#1768e6;font-style:normal}.subject-card h3,.document-card h3{margin:15px 0 6px}.subject-card p,.document-card p,.report-cards p{color:var(--muted);font-size:11px}.subject-card footer,.document-card footer{border-top:1px solid var(--line);margin-top:14px;padding-top:12px;display:flex;justify-content:space-between;font-size:10px}.grade-input{width:70px;height:32px;border:1px solid var(--line);border-radius:7px;text-align:center}.timeline{display:grid;gap:13px}.timeline article{display:grid;grid-template-columns:100px 1fr auto;padding:18px}.timeline time{color:#1768e6;font-weight:bold}.timeline h3{font-size:13px;margin:0 0 6px}.timeline p{font-size:11px;color:var(--muted);margin:0}.report-cards article{text-align:center}.report-cards article>i{margin:auto}.report-cards .btn{margin-top:10px}.settings-form{padding:22px}.settings-form h3{margin-top:0;border-bottom:1px solid var(--line);padding-bottom:15px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}label{display:grid;gap:7px;font-size:11px;font-weight:bold;margin-bottom:13px}label input,label select,label textarea{height:40px;border:1px solid var(--line);border-radius:8px;padding:0 11px;background:#fbfcfe;color:var(--ink)}label textarea{height:75px;padding-top:10px;resize:vertical}.modal{position:fixed;inset:0;background:#07172b70;backdrop-filter:blur(4px);z-index:50;display:none;place-items:center}.modal.open{display:grid}.modal-card{width:min(610px,92vw);max-height:90vh;overflow:auto;background:var(--panel);padding:27px;border-radius:17px;position:relative}.modal-card.small{width:min(450px,92vw)}.modal-card h2{margin-top:0}.modal-close{position:absolute;right:16px;top:13px;border:0;background:transparent;font-size:24px}.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#e8f2ff,#f7ecff)}.login-card{width:min(410px,92vw);background:#fff;padding:35px;border-radius:20px;box-shadow:0 25px 60px #244a7f25;text-align:center}.login-card.setup{width:min(490px,92vw)}.login-brand{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;margin:auto;background:linear-gradient(135deg,#1768e6,#744be0);color:#fff;font-size:20px;font-weight:900}.login-card h1{margin:20px 0 7px}.login-card>p{color:var(--muted);margin:0 0 23px}.login-card form{text-align:left}.login-card>small{display:block;margin-top:20px;color:var(--muted)}.alert{padding:11px;border-radius:8px;margin:14px 0;font-size:11px}.alert.danger{background:#ffebee;color:#c7394b}.alert.success{background:#e8f8ee;color:#19874e}#toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:100;background:#14243a;color:#fff;padding:12px 17px;border-radius:9px;box-shadow:0 12px 30px #0002;display:none}.dark{--bg:#0d1828;--panel:#14243a;--ink:#e7edf5;--muted:#99a7b9;--line:#293a50}.dark aside,.dark header{background:#101e31}.dark input,.dark select,.dark textarea,.dark .soft,.dark .status-buttons button{background:#17283e;color:var(--ink)}#menu{display:none}
@media(max-width:1000px){.stats,.cards4{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr}}
@media(max-width:720px){aside{transform:translateX(-100%);transition:.25s}aside.open{transform:translateX(0);box-shadow:20px 0 50px #0004}main{margin-left:0}#menu{display:block;margin-right:11px}header{padding:0 15px}.header-user span,.header-user b{display:none}.page{padding:15px}.hero{padding:25px}.calendar{display:none}.hero h2{font-size:22px}.stats,.cards4{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.page-head{align-items:flex-start;gap:12px}.page-head>div:last-child{flex-wrap:wrap;justify-content:flex-end}.student-row{grid-template-columns:36px 1fr}.status-buttons{grid-column:1/-1}.status-buttons button{flex:1}.toolbar{flex-wrap:wrap}.toolbar>input{min-width:100%;}.timeline article{grid-template-columns:75px 1fr}.timeline article>span{grid-column:2}.donut-wrap{flex-direction:column;padding:20px}}
@media print{aside,header,.page-head button,.toolbar,.btn{display:none!important}main{margin:0}.page{display:none!important;padding:0}.page.printing{display:block!important}.card{box-shadow:none}}

/* Visual refresh v2 — pastel glass dashboard */
:root{--bg:#eef5fb;--panel:rgba(255,255,255,.82);--ink:#172238;--muted:#6f7f96;--line:rgba(255,255,255,.78);--blue:#1677ff;--shadow:0 16px 42px rgba(40,65,110,.10)}
body{font-size:15px;background:
radial-gradient(circle at 8% 8%,rgba(100,210,188,.27),transparent 28%),
radial-gradient(circle at 56% 5%,rgba(243,173,203,.26),transparent 30%),
radial-gradient(circle at 96% 18%,rgba(111,166,255,.28),transparent 35%),
linear-gradient(135deg,#eef7f4 0%,#f8eef4 48%,#edf5ff 100%);background-attachment:fixed}
aside{width:280px;margin:18px;height:calc(100vh - 36px);inset:0 auto 0 0;border:1px solid rgba(255,255,255,.9);border-radius:25px;padding:22px 17px;background:rgba(255,255,255,.72);backdrop-filter:blur(24px) saturate(135%);box-shadow:0 20px 55px rgba(45,65,100,.12)}
.brand{padding:2px 10px 24px}.brand>i{width:50px;height:50px;border-radius:16px;font-size:16px;box-shadow:0 10px 23px rgba(82,76,224,.28)}.brand b{font-size:17px}.brand small{font-size:12px}.user{padding:14px;border-radius:16px;background:linear-gradient(135deg,rgba(232,244,255,.88),rgba(244,236,255,.78));border-color:rgba(195,215,244,.55);margin-bottom:18px}.user>i{width:43px;height:43px;box-shadow:0 8px 18px rgba(23,104,230,.22)}nav{gap:7px}nav button{height:48px;border-radius:13px;padding:0 14px;font-size:14px;transition:.2s}nav button:hover{background:rgba(255,255,255,.75);transform:translateX(3px)}nav button.active{background:linear-gradient(120deg,#1677ff,#4c63ec);color:#fff;box-shadow:0 9px 20px rgba(22,119,255,.25)}.logout{background:rgba(255,239,242,.74);border-radius:12px;text-align:center;padding:12px;margin-top:auto}
main{margin-left:316px;padding:18px 18px 26px 0}header{height:92px;border:1px solid rgba(255,255,255,.88);border-radius:23px;padding:0 28px;background:rgba(255,255,255,.64);backdrop-filter:blur(24px) saturate(135%);box-shadow:0 14px 40px rgba(46,69,105,.08);position:sticky;top:18px}header h1{font-size:24px;letter-spacing:-.4px}header p{font-size:12px}.header-user span{font-size:11px;padding:9px 13px;border:1px solid rgba(106,211,154,.35);box-shadow:0 5px 14px rgba(38,160,92,.08)}.header-user button{width:42px;height:42px;border-radius:13px}.page{padding:26px 6px 0;max-width:none}.hero{min-height:225px;border-radius:25px;padding:42px 45px;background:linear-gradient(115deg,rgba(18,67,143,.97),rgba(26,111,223,.95) 53%,rgba(119,70,221,.92));box-shadow:0 22px 50px rgba(35,92,181,.23);position:relative;overflow:hidden}.hero:before,.hero:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.13);border-radius:50%}.hero:before{width:390px;height:390px;right:-110px;top:-240px}.hero:after{width:240px;height:240px;right:100px;bottom:-190px}.hero>div{position:relative;z-index:1}.hero h2{font-size:31px;letter-spacing:-.6px;margin-top:20px}.hero p{font-size:14px}.hero .white{padding:0 20px;height:45px;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.12)}.calendar{width:145px;height:145px;border-radius:23px;background:rgba(255,255,255,.13);backdrop-filter:blur(10px);box-shadow:inset 0 1px rgba(255,255,255,.25)}.calendar b{font-size:54px}.stats{gap:18px;margin:22px 0}.stats article,.card{border:1px solid rgba(255,255,255,.9);background:var(--panel);backdrop-filter:blur(18px) saturate(130%);box-shadow:var(--shadow)}.stats article{min-height:108px;border-radius:20px;padding:21px;transition:.2s}.stats article:hover{transform:translateY(-3px);box-shadow:0 20px 48px rgba(40,65,110,.14)}.stats article>i{width:50px;height:50px;border-radius:15px;font-size:22px}.stats small{font-size:11px}.stats b{font-size:28px}.stats em{font-size:11px}.grid2{gap:20px}.grid2>.card{border-radius:22px;overflow:hidden}.card-title{height:68px;padding:0 23px;border-bottom-color:rgba(188,202,222,.42)}.card-title h3{font-size:16px}.donut-wrap{min-height:270px}.donut{width:150px;height:150px;box-shadow:0 12px 28px rgba(35,70,120,.10)}.donut:after{width:88px;height:88px}.legend{gap:13px}.legend span{font-size:12px}.quick{gap:13px;padding:22px}.quick button{min-height:100px;border-radius:16px;border:1px solid rgba(199,213,233,.7);background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(244,248,255,.72));font-size:24px;padding:20px;transition:.2s}.quick button:hover{transform:translateY(-3px);border-color:#9fc5fa;box-shadow:0 13px 28px rgba(44,94,168,.11)}.quick b{font-size:13px;margin-top:13px}.page-head{padding:3px 4px 0;margin-bottom:22px}.page-head h2{font-size:28px;letter-spacing:-.5px}.page-head p{font-size:13px}.btn{height:44px;border-radius:12px;padding:0 18px}.primary{background:linear-gradient(120deg,#1677ff,#4f63ec);box-shadow:0 9px 20px rgba(22,119,255,.21)}.table-card,.settings-form,#attendance>.card{border-radius:21px}.toolbar{padding:19px 21px}.toolbar input,.toolbar select,.page-head input{height:44px;border-radius:12px;background:rgba(255,255,255,.78)}th{padding:15px 18px;font-size:11px}td{padding:15px 18px;font-size:12px}.student-row{padding:16px 21px}.avatar{width:42px;height:42px;border-radius:13px}.cards4{gap:18px}.cards4 .card{border-radius:20px;padding:23px;min-height:185px}.subject-card>i,.document-card>i,.report-cards article>i{width:50px;height:50px;border-radius:15px;font-size:20px}.subject-card h3,.document-card h3{font-size:16px}.timeline article{border-radius:18px;padding:22px}.settings-form{padding:28px}.modal-card{border:1px solid rgba(255,255,255,.9);box-shadow:0 32px 80px rgba(15,35,70,.25)}
.login-page{background:radial-gradient(circle at 20% 15%,rgba(89,211,181,.30),transparent 30%),radial-gradient(circle at 83% 25%,rgba(118,155,255,.34),transparent 36%),linear-gradient(135deg,#edf9f4,#f9edf4 48%,#edf4ff)}.login-card{border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.79);backdrop-filter:blur(22px);box-shadow:0 28px 70px rgba(46,67,105,.15)}
.dark{--bg:#0d1828;--panel:rgba(20,36,58,.88);--ink:#e7edf5;--muted:#99a7b9;--line:#293a50;background:radial-gradient(circle at 20% 10%,#173b3a,transparent 35%),radial-gradient(circle at 90% 10%,#1b3157,transparent 38%),#0d1828}.dark aside,.dark header{background:rgba(15,29,48,.8);border-color:#2a3b50}.dark .quick button{background:linear-gradient(145deg,#182b44,#14233a)}
@media(max-width:1100px){aside{width:245px;margin:12px}main{margin-left:269px;padding-top:12px}header{top:12px}.stats{grid-template-columns:1fr 1fr}}
@media(max-width:720px){aside{width:270px;margin:0;height:100vh;border-radius:0}main{margin-left:0;padding:0 12px}header{top:8px;height:76px;border-radius:18px}.page{padding:18px 0}.hero{padding:28px;min-height:220px}.hero h2{font-size:24px}.stats{grid-template-columns:1fr}.stats article{min-height:96px}.cards4{grid-template-columns:1fr}.donut-wrap{min-height:235px}}

/* Layout correction v3 */
main{display:flex;flex-direction:column;min-width:0}
header{position:relative;top:auto;flex:0 0 92px;width:100%;z-index:5}
.page{width:100%;flex:1;padding-top:24px}
.hero{margin-top:0}
.dark nav button{color:#9fb0c6}
.dark nav button:hover{color:#edf4ff;background:rgba(89,118,155,.22)}
.dark nav button.active{color:#fff;background:linear-gradient(120deg,#1683ff,#5365ee)}
.dark .user{background:linear-gradient(135deg,rgba(47,69,98,.85),rgba(62,60,93,.78));border-color:#435772}
.dark .user b{color:#f1f6ff}.dark .user small{color:#adbad0}
.dark .logout{background:rgba(122,52,69,.28);color:#ff7d91}
.dark .stats article,.dark .card{background:rgba(25,43,66,.88);border-color:#40556f}
.dark .quick button{border-color:#405a78}.dark .quick b{color:#e9f1fc}
.dark .card-title{border-bottom-color:#40536b}
@media(max-width:1100px){header{top:auto}.page{padding-top:20px}}
@media(max-width:720px){header{top:auto;flex-basis:76px;margin-top:8px}.page{padding-top:18px}}

/* Import and master-data controls v4 */
.page-head>div:last-child{align-items:center;flex-wrap:wrap}.page-head a.btn{display:inline-flex}
.toolbar select{min-width:170px}.class-badge{display:inline-block;background:#e8f2ff;color:#1768e6;border-radius:20px;padding:5px 10px;font-weight:700;font-size:10px}
.import-form{text-align:left}.import-form>h2,.import-form>p{text-align:center}.import-form>p{color:var(--muted);margin:-5px 0 18px}.import-icon{width:58px;height:58px;border-radius:18px;margin:0 auto 17px;display:grid;place-items:center;background:#e8f2ff;color:#1768e6;font-size:25px}.import-icon.orange{background:#fff2dc;color:#d99000}.import-icon.green{background:#e8f8ee;color:#1b9a57}.import-form input[type=file]{height:auto;min-height:48px;padding:11px;background:rgba(247,250,255,.88)}.format-note{background:rgba(236,243,252,.72);border:1px solid #dfe9f6;border-radius:12px;padding:13px;margin:3px 0 16px;color:#607087;font-size:11px;line-height:1.8}.dark .format-note{background:#172b44;border-color:#3b506b;color:#b3c1d3}.empty-state{padding:42px;text-align:center;color:var(--muted);font-weight:600}.student-info small,.student-row small{display:block;color:var(--muted);margin-top:4px}.btn:disabled{opacity:.65;cursor:wait}
@media(max-width:720px){.page-head>div:last-child{width:100%;justify-content:flex-start}.page-head>div:last-child .btn{flex:1}.toolbar select{width:100%}}

/* Dedicated login layout v4 */
.login-page{padding:28px;min-height:100vh;display:grid;place-items:center}
.login-page main.login-shell{margin:0;padding:0;min-height:0;width:min(980px,96vw);display:grid;grid-template-columns:1.08fr .92fr;border:1px solid rgba(255,255,255,.9);border-radius:30px;overflow:hidden;background:rgba(255,255,255,.78);box-shadow:0 35px 90px rgba(42,62,102,.18);backdrop-filter:blur(24px)}
.login-showcase{min-height:590px;padding:38px 42px;color:#fff;background:linear-gradient(145deg,#103674 0%,#176bd5 56%,#7252df 100%);display:flex;flex-direction:column;position:relative;overflow:hidden}.login-showcase:before,.login-showcase:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.15);border-radius:50%}.login-showcase:before{width:390px;height:390px;right:-180px;top:-170px}.login-showcase:after{width:240px;height:240px;left:-130px;bottom:-110px}.showcase-brand{display:flex;align-items:center;gap:12px;position:relative;z-index:1}.showcase-brand>i,.mobile-login-brand{width:49px;height:49px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.22);font-style:normal;font-weight:900}.showcase-brand b,.showcase-brand small{display:block}.showcase-brand b{font-size:17px}.showcase-brand small{font-size:11px;color:#d8e6ff;margin-top:3px}.showcase-copy{margin:auto 0;position:relative;z-index:1}.showcase-pill{display:inline-block;padding:7px 11px;border-radius:20px;background:rgba(255,255,255,.12);font-size:10px;font-weight:800;letter-spacing:1px}.showcase-copy h1{font-size:38px;line-height:1.16;letter-spacing:-1.2px;margin:22px 0 15px;max-width:430px}.showcase-copy p{font-size:14px;line-height:1.7;color:#dce9ff;max-width:420px}.showcase-features{display:grid;gap:11px;margin-top:28px}.showcase-features span{font-size:12px;font-weight:700}.login-showcase>small{position:relative;z-index:1;color:#cadcff;font-size:10px}.login-form-panel{padding:60px 52px;display:flex;flex-direction:column;justify-content:center}.mobile-login-brand{display:none;background:linear-gradient(135deg,#1768e6,#704ee2);color:#fff}.login-eyebrow{color:#1768e6;font-size:10px;font-weight:900;letter-spacing:1.2px}.login-form-panel h2{font-size:29px;letter-spacing:-.6px;margin:10px 0 7px}.login-form-panel>p{color:var(--muted);font-size:12px;margin:0 0 27px}.login-form-panel form{display:block}.login-form-panel label{font-size:11px;margin-bottom:16px}.input-with-icon{height:48px;border:1px solid #dce4ee;border-radius:12px;background:#f9fbfe;display:flex;align-items:center;overflow:hidden;transition:.2s}.input-with-icon:focus-within{border-color:#408af0;box-shadow:0 0 0 3px rgba(23,104,230,.10);background:#fff}.input-with-icon i{width:42px;text-align:center;color:#7e8da2;font-style:normal}.input-with-icon input{height:100%;width:100%;border:0!important;outline:0;background:transparent!important;padding:0 12px 0 0}.login-options{display:flex;justify-content:space-between;align-items:center;margin:-2px 0 20px;font-size:10px}.login-options label{display:flex;align-items:center;gap:6px;margin:0;font-weight:500}.login-options input{width:auto;height:auto}.login-options a,.setup-link a{color:#1768e6;text-decoration:none;font-weight:700}.login-form-panel .btn{height:48px;font-size:13px}.setup-link{display:block;text-align:center;margin-top:23px;color:var(--muted);font-size:10px}.dark .login-page main.login-shell{background:rgba(18,32,51,.92);border-color:#354861}.dark .input-with-icon{background:#17283e;border-color:#354b66}.dark .input-with-icon:focus-within{background:#1a2d46}.dark .login-form-panel{color:#e8eef7}
@media(max-width:760px){.login-page{padding:16px}.login-page main.login-shell{display:block;width:min(440px,96vw);border-radius:24px}.login-showcase{display:none}.login-form-panel{padding:38px 28px}.mobile-login-brand{display:grid;margin-bottom:28px}.login-form-panel h2{font-size:25px}}
.login-page main.login-card{margin:0;padding:35px;min-height:0;display:block;width:min(490px,92vw)}

/* Multi-user portal v5 */
.standalone{max-width:1400px;margin:auto;padding:30px}.standalone .inline{display:inline}.standalone td small{display:block;color:var(--muted);margin-top:5px}.vspace{margin-top:22px}.live-session{padding:28px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:28px;background:linear-gradient(120deg,rgba(231,244,255,.9),rgba(242,235,255,.88))}.live-session strong{font-size:48px;letter-spacing:10px;color:#1768e6}.live-session img{width:150px;border-radius:14px}.student-portal{background:radial-gradient(circle at 10% 5%,#dff7ef,transparent 30%),radial-gradient(circle at 90% 5%,#e2e8ff,transparent 36%),#f3f7fc}.student-header{position:relative;top:auto;margin:18px auto;width:min(1200px,calc(100% - 32px));border-radius:20px;display:flex;justify-content:space-between}.student-header .brand{padding:0}.student-header>div{display:flex;align-items:center;gap:12px}.student-main{margin:0 auto;padding:0 16px 40px;display:block;width:min(1200px,100%)}.student-welcome{border-radius:25px;padding:37px 40px;color:white;background:linear-gradient(120deg,#123b80,#1874e5 58%,#7650dc);box-shadow:0 20px 45px #2357a42b}.student-welcome small{font-weight:800;letter-spacing:1px}.student-welcome h1{font-size:28px;max-width:680px;margin:15px 0 8px}.student-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}.student-grid>.card{padding:24px}.attendance-mobile form{max-width:420px}.mini-list>div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line)}.mini-list small{display:block;color:var(--muted);margin-top:4px}.mini-list strong{font-size:20px;color:#1768e6}.task-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.task-card{padding:22px}.task-card h3{font-size:17px}.task-card>p,.task-card>small,.task-card>a{display:block;margin:10px 0;color:var(--muted);font-size:11px}.task-card>a{color:#1768e6;font-weight:bold}.score-result{margin-top:12px;padding:11px;border-radius:10px;background:#e8f8ee;color:#167c48}.danger{background:#e54457!important;color:#fff!important;border-color:#e54457!important}
@media(max-width:800px){.standalone{padding:16px}.live-session{grid-template-columns:1fr;text-align:center}.live-session img{margin:auto}.student-header{height:auto;padding:12px 15px}.student-header .brand span{display:none}.student-main{padding:0 12px 30px}.student-welcome{padding:27px}.student-grid,.task-grid{grid-template-columns:1fr}.header-user a{display:none}}

/* Jurnal pembinaan siswa v6 */
.journal-page{max-width:1500px}.journal-layout{display:grid;grid-template-columns:minmax(340px,.72fr) minmax(620px,1.35fr);gap:22px;align-items:start}.journal-entry{overflow:hidden;position:sticky;top:20px}.journal-body{padding:23px}.journal-body label{display:block;font-size:12px;font-weight:700;margin-bottom:16px}.journal-body input,.journal-body select,.journal-body textarea{display:block;width:100%;margin-top:8px}.journal-body textarea{min-height:90px;resize:vertical}.journal-body small{display:block;color:var(--muted);font-weight:400;margin-top:7px}.journal-page .card{border-radius:20px}.journal-page .table-card td{line-height:1.45}.journal-page .table-card a{color:#1768e6;font-weight:700}.journal-page .page-head>div:last-child{display:flex;gap:9px}.journal-page .full{width:100%}
@media(max-width:1050px){.journal-layout{grid-template-columns:1fr}.journal-entry{position:static}.journal-page .table-card{min-width:0}}
@media(max-width:650px){.journal-page{padding:14px}.journal-page .page-head>div:last-child{width:100%;display:grid;grid-template-columns:1fr}.journal-page .page-head .btn{width:100%;justify-content:center}.journal-body{padding:17px}.journal-page .table-scroll{overflow:auto}.journal-page table{min-width:760px}}

/* Sidebar account cleanup v6.1 */
.user.user-compact{display:block;padding:13px 15px;background:linear-gradient(135deg,rgba(232,244,255,.78),rgba(244,236,255,.68));border-left:3px solid #1768e6}
.user.user-compact span{display:block}.user.user-compact small{margin:0 0 5px;text-transform:uppercase;letter-spacing:.7px;font-size:9px}.user.user-compact b{line-height:1.25}.user.user-compact em{display:block;margin-top:4px;color:var(--muted);font-size:10px;font-style:normal}.dark .user.user-compact{background:linear-gradient(135deg,rgba(47,69,98,.72),rgba(62,60,93,.62));border-left-color:#4c91f5}

/* Filters and pagination v7.2 */
.pagination{min-height:68px;padding:14px 21px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}.pagination>div{display:flex;gap:6px}.pagination button{min-width:35px;height:35px;padding:0 9px;border:1px solid #dce5f0;border-radius:9px;background:rgba(255,255,255,.82);color:var(--ink);font-weight:700;cursor:pointer}.pagination button.active{border-color:#1768e6;background:#1768e6;color:#fff}.pagination button:disabled{opacity:.35;cursor:not-allowed}.dark .pagination button{background:#17283e;border-color:#3b506b}.dark .pagination button.active{background:#1768e6}.toolbar #attendanceStatus,.toolbar #attendancePageSize,.toolbar #studentGender,.toolbar #studentPageSize{min-width:145px}
@media(max-width:720px){.pagination{align-items:flex-start;flex-direction:column}.pagination>div{width:100%;justify-content:center}.toolbar #attendanceStatus,.toolbar #attendancePageSize,.toolbar #studentGender,.toolbar #studentPageSize{width:100%}}

/* Grade groups v8 */
.grade-toolbar{display:grid;grid-template-columns:150px minmax(170px,1fr) minmax(170px,1fr) minmax(220px,1.3fr) auto}.grade-filter{border-top:1px solid var(--line)}.grade-filter>input{flex:1}.grade-filter>span{white-space:nowrap;color:var(--muted);font-size:11px}.grade-input{width:105px}.grade-toolbar select{min-width:0}.grade-filter select{min-width:150px}#gradeTable td small{display:block;color:var(--muted);margin-top:4px}
@media(max-width:950px){.grade-toolbar{grid-template-columns:1fr 1fr}.grade-toolbar input{min-width:0}.grade-toolbar .btn{width:100%}}
@media(max-width:620px){.grade-toolbar{grid-template-columns:1fr}.grade-filter{display:grid;grid-template-columns:1fr}.grade-filter>*{width:100%!important}}

/* Persistent responsive navigation v9.3 */
aside{overflow-y:auto;scrollbar-width:thin}.sidebar-links{display:grid;gap:5px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.sidebar-links>small{padding:0 12px 5px;color:var(--muted);font-size:8px;letter-spacing:1px;font-weight:800}.sidebar-links>a{min-height:42px;border-radius:10px;padding:0 12px;display:flex;align-items:center;gap:11px;color:#556276;text-decoration:none;font-size:12px;font-weight:700}.sidebar-links>a:hover{background:rgba(255,255,255,.75);color:#1768e6}.sidebar-links i{width:18px;text-align:center;font-style:normal}.dark .sidebar-links>a{color:#9fb0c6}.dark .sidebar-links>a:hover{color:#fff;background:rgba(89,118,155,.22)}
@media(max-height:820px){aside{padding-top:15px;padding-bottom:15px}.brand{padding-bottom:13px}.user{margin-bottom:10px}nav{gap:2px}nav button{height:39px}.sidebar-links{margin-top:7px;padding-top:7px}.sidebar-links>a{min-height:36px}.logout{margin-top:9px}}

/* Readable calm theme v10 */
:root{--bg:#f1f5fa;--panel:rgba(255,255,255,.94);--ink:#17233a;--muted:#5f7089;--line:#dce5f0;--blue:#2563eb;--navy:#10233f;--shadow:0 14px 38px rgba(39,65,105,.09)}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:16px;line-height:1.45;background:radial-gradient(circle at 5% 6%,rgba(168,230,215,.30),transparent 29%),radial-gradient(circle at 54% 4%,rgba(248,199,218,.28),transparent 31%),radial-gradient(circle at 98% 12%,rgba(177,203,255,.34),transparent 34%),linear-gradient(135deg,#f3f8f7,#faf4f7 50%,#f2f6fd)}
aside,header,.card,.stats article{background:rgba(255,255,255,.91);border-color:rgba(207,220,235,.88);backdrop-filter:blur(18px) saturate(115%)}
.brand b{font-size:18px}.brand small{font-size:13px}.user.user-compact b{font-size:15px}.user.user-compact em{font-size:11px}nav button{font-size:15px;color:#46566e}.sidebar-links>a{font-size:13px;color:#46566e}.sidebar-links>small{font-size:9px}.logout{font-size:14px}
header h1{font-size:26px}header p{font-size:13px}.header-user b{font-size:14px}.header-user .btn{font-size:13px}.page-head h2{font-size:30px}.page-head p{font-size:14px;color:#62748e}.card-title h3,.settings-form>h3{font-size:19px}
label,.settings-form label,.journal-body label{font-size:13px;color:#26364d;font-weight:700}input,select,textarea{font-size:14px!important;color:#16243a;background:#fff!important;border:1px solid #d4dfec!important}input::placeholder,textarea::placeholder{color:#8b99aa}input:focus,select:focus,textarea:focus{border-color:#3b82f6!important;box-shadow:0 0 0 3px rgba(59,130,246,.12)!important;outline:0}.settings-form input,.settings-form select{height:48px}.settings-form textarea{min-height:94px}.btn{font-size:14px;font-weight:750}.primary{background:linear-gradient(120deg,#1671ef,#465ee8);box-shadow:0 9px 20px rgba(37,99,235,.22)}
th{font-size:12px;color:#53647b}td{font-size:13px}.student-row b{font-size:15px}.student-row small{font-size:12px}.status-buttons button{font-size:11px}.class-badge,.badge{font-size:11px}.pagination{font-size:12px}
.standalone .page-head h2{font-size:30px}.standalone .page-head p{font-size:14px}.standalone .settings-form{padding:30px}.standalone .settings-form h3{font-size:20px;margin-top:0}.standalone .table-card h3{font-size:18px}.live-session p{font-size:14px}
.dark{--ink:#edf3fb;--muted:#aab8ca;--line:#344a64}.dark input,.dark select,.dark textarea{background:#17283e!important;color:#edf3fb!important;border-color:#405875!important}
@media(max-width:720px){body{font-size:15px}.page-head h2,.standalone .page-head h2{font-size:25px}header h1{font-size:21px}.settings-form{padding:20px}.btn{font-size:13px}}