:root{--bg:#f5f7fb;--surface:#fff;--surface-soft:#eef4f1;--ink:#17202a;--muted:#667085;--line:#d9e2ec;--blue:#1d5fd1;--teal:#0f8b8d;--green:#238636;--amber:#b7791f;--red:#c2413a;--navy:#122033;--shadow:0 18px 40px #1f293714}*{box-sizing:border-box}body{min-height:100vh;color:var(--ink);background:var(--bg);margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}.login-screen{background:#eef3f8;grid-template-columns:minmax(0,1.1fr) minmax(400px,.62fr);min-height:100vh;display:grid}.login-visual{color:#fff;background:radial-gradient(circle at 18% 22%,#ffffff73,#0000 18%),radial-gradient(circle at 78% 18%,#d8fff452,#0000 22%),linear-gradient(145deg,#dceeff 0%,#90c6de 42%,#2d777d 100%);align-items:flex-end;min-height:100vh;padding:54px;display:flex;position:relative;overflow:hidden}.login-visual:after{content:"";background:linear-gradient(#12203314,#1220335c);position:absolute;inset:0}.campus-scene{opacity:.72;position:absolute;inset:0}.sun{background:#ffd166;border-radius:50%;width:86px;height:86px;position:absolute;top:76px;left:92px;box-shadow:0 0 0 18px #ffd16629}.cloud{background:#ffffffdb;border-radius:999px;width:150px;height:46px;animation:12s ease-in-out infinite alternate drift;position:absolute}.cloud:before,.cloud:after{content:"";background:#ffffffdb;border-radius:50%;width:54px;height:54px;position:absolute;top:8px}.cloud:before{left:-18px}.cloud:after{right:-18px}.cloud:first-child{animation-delay:0s;top:152px;left:54px}.cloud:nth-child(2){animation-delay:4s;top:248px;right:32px}.cloud:nth-child(3){animation-delay:8s;top:340px;left:8px}.building{background:#2d5a7a;border-radius:2px 2px 0 0;position:absolute}.building:nth-child(4){width:180px;height:280px;bottom:0;left:10%}.building:nth-child(5){width:140px;height:320px;bottom:0;left:42%}.building:nth-child(6){width:220px;height:240px;bottom:0;right:18%}.building window{background:#ffc107;width:20px;height:20px;margin:8px;position:absolute}.tree{width:60px;height:120px;position:absolute;bottom:0}.tree:nth-child(7){left:8%}.tree:nth-child(8){right:12%}.tree circle{fill:#2d5a7a}.tree rect{fill:#5a4a3a}@keyframes drift{0%{transform:translate(-100px)}to{transform:translate(100px)}}.login-form-container{flex-direction:column;justify-content:center;gap:32px;padding:54px;display:flex}.login-form-content{flex-direction:column;gap:32px;display:flex}.login-form-header{flex-direction:column;gap:8px;display:flex}.login-form-header h1{color:var(--navy);margin:0;font-size:28px;font-weight:600}.login-form-header p{color:var(--muted);margin:0;font-size:14px}.login-form{flex-direction:column;gap:16px;display:flex}.form-group{flex-direction:column;gap:6px;display:flex}.form-group label{color:var(--ink);font-size:14px;font-weight:500}.form-group input{border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:6px;padding:10px 12px;font-size:14px}.form-group input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px #1d5fd11a}.form-error{color:var(--red);font-size:13px;display:none}.form-error.show{display:block}.btn-login{color:#fff;background:var(--blue);cursor:pointer;border:none;border-radius:6px;padding:10px 16px;font-size:14px;font-weight:500;transition:background .2s}.btn-login:hover{background:#1a47a0}.btn-login:active{transform:scale(.98)}.demo-section{border-top:1px solid var(--line);flex-direction:column;gap:12px;padding-top:24px;display:flex}.demo-section h3{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:0;font-size:12px;font-weight:600}.demo-accounts{flex-direction:column;gap:8px;display:flex}.demo-account-btn{color:var(--blue);cursor:pointer;text-align:left;background:#1d5fd10f;border:1px solid #1d5fd133;border-radius:6px;padding:8px 12px;font-size:13px;transition:all .2s}.demo-account-btn:hover{background:#1d5fd11f;border-color:#1d5fd14d}.demo-account-btn strong{margin-bottom:2px;font-weight:600;display:block}.demo-account-btn small{color:var(--muted);font-size:12px}.app-shell{background:var(--bg);grid-template-rows:auto 1fr;grid-template-columns:280px 1fr;gap:0;min-height:100vh;display:grid}.app-shell.hidden{display:none}.top-bar{background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow);grid-column:1/-1;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.top-bar-left{align-items:center;gap:16px;display:flex}.top-bar-title{color:var(--ink);min-width:200px;margin:0;font-size:18px;font-weight:600}.top-bar-breadcrumb{color:var(--muted);margin:0;font-size:13px}.top-bar-right{align-items:center;gap:16px;display:flex}.btn-export{color:var(--blue);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:6px;padding:8px 12px;font-size:13px;transition:all .2s}.btn-export:hover{background:var(--surface-soft);border-color:var(--blue)}.session-info{border-left:1px solid var(--line);align-items:center;gap:12px;padding:0 12px;display:flex}.session-name{color:var(--ink);margin:0;font-size:14px;font-weight:500}.session-detail{color:var(--muted);margin:0;font-size:12px}.btn-logout{color:var(--red);border:1px solid var(--red);cursor:pointer;background:0 0;border-radius:4px;padding:6px 12px;font-size:13px;transition:all .2s}.btn-logout:hover{background:#c2413a0f}.sidebar{background:var(--surface);border-right:1px solid var(--line);flex-direction:column;padding:24px 0;display:flex}.sidebar-section{padding:0 8px}.sidebar-section:first-child{flex:1}.sidebar-label{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;padding:0 16px;font-size:11px;font-weight:600}.nav-items{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.nav-item{margin:0}.nav-link{color:var(--ink);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:12px;width:100%;padding:10px 16px;font-size:14px;text-decoration:none;transition:all .2s;display:flex}.nav-link:hover{background:var(--surface-soft);color:var(--blue)}.nav-link.active{color:var(--blue);border-left:3px solid var(--blue);background:#1d5fd114;padding-left:13px}.nav-icon{flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;font-size:12px;display:flex}.content-area{padding:32px;overflow-y:auto}.page-header{align-items:baseline;gap:12px;margin-bottom:32px;display:flex}.page-header h1{color:var(--ink);margin:0;font-size:32px;font-weight:700}.page-header p{color:var(--muted);margin:0;font-size:14px}.class-selector{flex-wrap:wrap;gap:8px;margin-bottom:24px;display:flex}.class-btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;border-radius:6px;padding:8px 14px;font-size:13px;transition:all .2s}.class-btn:hover{border-color:var(--blue);color:var(--blue)}.class-btn.active{background:var(--blue);border-color:var(--blue);color:#fff}.overview-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-bottom:32px;display:grid}.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:24px;box-shadow:0 1px 2px #0000000d}.card-header{color:var(--muted);text-transform:uppercase;margin-bottom:8px;font-size:12px;font-weight:600}.card-value{color:var(--ink);margin-bottom:8px;font-size:28px;font-weight:700}.card-detail{color:var(--muted);font-size:13px}.table-container{border:1px solid var(--line);background:var(--surface);border-radius:8px;overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:14px}thead{background:var(--surface-soft);border-bottom:1px solid var(--line)}th{text-align:left;color:var(--ink);padding:12px 16px;font-size:13px;font-weight:600}td{border-bottom:1px solid var(--line);color:var(--ink);padding:12px 16px}tbody tr:hover{background:#1d5fd10a}.status-badge{border-radius:12px;padding:4px 12px;font-size:12px;font-weight:500;display:inline-block}.status-present{color:var(--green);background:#2386361a}.status-absent{color:var(--red);background:#c2413a1a}.toast{background:var(--navy);color:#fff;box-shadow:var(--shadow);z-index:1000;opacity:0;border-radius:6px;padding:16px 20px;font-size:14px;animation:.3s forwards slideIn;position:fixed;bottom:24px;right:24px}.toast.hidden{display:none}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.login-screen{grid-template-columns:1fr}.login-visual{display:none}.app-shell{grid-template-columns:1fr}.sidebar{display:none}.top-bar{flex-wrap:wrap}.overview-grid{grid-template-columns:1fr}table{font-size:12px}th,td{padding:8px 12px}}