:root{color:#e8edf7;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg:#081120;--panel:#111c2d;--panel-alt:#0e1728;--sidebar:#0d1524;--primary:#5b8cff;--primary-soft:#5b8cff1f;--green:#39d39f;--purple:#8b5cf6;--orange:#f59e0b;--soft-border:#9ba8c126;--text-soft:#aab8d4;--text-strong:#edf3ff;--danger:#ef4444;background:#081120;font-family:Inter,Segoe UI,sans-serif;font-weight:400;line-height:1.5}html,body,#root{min-height:100vh;color:var(--text-strong);background:linear-gradient(135deg,#081120 0%,#0d1830 100%);margin:0}button{font:inherit}.app-shell{min-height:100vh;display:flex}.sidebar{border-right:1px solid var(--soft-border);background:#081120f5;width:280px;padding:24px 20px}.brand-block{align-items:center;gap:14px;margin-bottom:30px;display:flex}.brand-badge{background:linear-gradient(135deg, var(--primary), #6dd3ff);color:#fff;border-radius:14px;place-items:center;width:42px;height:42px;font-weight:700;display:grid}.eyebrow{color:var(--text-soft);text-transform:uppercase;letter-spacing:.12em;margin:0;font-size:11px}.eyebrow.accent{color:#8bb8ff}.brand-block h2,.topbar h1,.hero-panel h2,.panel-header h3{margin:0}.nav-menu{flex-direction:column;gap:8px;display:flex}.nav-item{text-align:left;color:var(--text-strong);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:12px;padding:12px 14px;transition:all .2s}.nav-item:hover,.nav-item.active{background:var(--primary-soft);border-color:#5b8cff59}.sidebar-card{background:linear-gradient(#5b8cff1f,#0f1929e6);border:1px solid #5b8cff4d;border-radius:16px;margin-top:32px;padding:18px}.tiny-label{color:var(--text-soft);text-transform:uppercase;letter-spacing:.08em;margin:0 0 8px;font-size:11px}.sidebar-card h3{margin:0 0 6px;font-size:24px}.sidebar-card span{color:var(--text-soft);font-size:13px}.main-panel{background:#0d1624d9;flex:1;padding:28px 32px 36px}.topbar,.hero-panel,.panel-header,.score-meta,.stat-head{justify-content:space-between;align-items:center;gap:16px;display:flex}.topbar{margin-bottom:22px}.topbar h1{font-size:clamp(2rem,3vw,2.7rem)}.topbar-actions{align-items:center;gap:12px;display:flex}.search-box{border:1px solid var(--soft-border);min-width:260px;color:var(--text-soft);background:#111c2de6;border-radius:12px;padding:11px 16px}.primary-btn,.secondary-btn{cursor:pointer;border:none;border-radius:12px;transition:transform .2s,opacity .2s}.primary-btn{background:linear-gradient(135deg, var(--primary), #6aa8ff);color:#fff;padding:12px 18px;font-weight:600}.secondary-btn{color:#dfeaff;background:#5b8cff1f;border:1px solid #5b8cff40;padding:10px 16px}.primary-btn:hover,.secondary-btn:hover{transform:translateY(-1px)}.hero-panel{background:linear-gradient(135deg,#5b8cff38,#1f2937cc);border:1px solid #5b8cff40;border-radius:18px;margin-bottom:22px;padding:24px 22px}.hero-panel h2{margin-top:8px;font-size:clamp(1.4rem,2vw,2rem)}.stat-card{background:var(--panel);border:1px solid var(--soft-border);border-radius:18px;padding:18px 18px 16px}.stat-card strong{margin-top:10px;font-size:2rem;display:inline-block}.stat-head{color:var(--text-soft);font-size:13px}.delta{color:var(--green);background:#39d39f1f;border-radius:999px;padding:5px 8px}.stat-card.blue .delta{color:#8bb8ff;background:#5b8cff1f}.stat-card.green .delta{color:var(--green);background:#39d39f1f}.stat-card.purple .delta{color:#bfa3ff;background:#8b5cf61f}.stat-card.orange .delta{color:#f8c76b;background:#f59e0b1f}.content-grid,.bottom-grid{grid-template-columns:1.2fr 1fr;gap:18px;margin-bottom:18px;display:grid}.panel{background:var(--panel);border:1px solid var(--soft-border);border-radius:18px;padding:18px 18px 14px}.panel-header{margin-bottom:18px}.bars{justify-content:space-between;align-items:end;gap:12px;height:180px;padding-top:10px;display:flex}.bar-col{flex-direction:column;flex:1;justify-content:end;align-items:center;gap:10px;height:100%;display:flex}.bar{background:linear-gradient(#7aa9ff,#4f7cff);border-radius:12px 12px 6px 6px;width:100%;max-width:34px;min-height:24px;display:block}.bar-col small{color:var(--text-soft)}.score-list{flex-direction:column;gap:14px;display:flex}.score-row{flex-direction:column;gap:8px;display:flex}.score-meta span,.score-meta strong{font-size:14px}.score-track{background:#ffffff14;border-radius:999px;width:100%;height:10px;overflow:hidden}.score-track span{border-radius:inherit;background:linear-gradient(90deg,#52d6b6,#6ea5ff);height:100%;display:block}.table-panel table{border-collapse:collapse;width:100%}.table-panel th,.table-panel td{text-align:left;border-bottom:1px solid var(--soft-border);color:var(--text-strong);padding:12px 10px}.table-panel th{color:var(--text-soft);text-transform:uppercase;letter-spacing:.08em;font-size:12px}.status{border-radius:999px;align-items:center;padding:6px 10px;font-size:12px;font-weight:600;display:inline-flex}.status.present{color:var(--green);background:#39d39f1f}.status.late{color:#f8c76b;background:#f59e0b1f}.status.absent{color:#ff8d8d;background:#ef44441f}.announcement-list{color:var(--text-soft);flex-direction:column;gap:14px;margin:0;padding-left:18px;display:flex}@media (width<=980px){.app-shell{flex-direction:column}.sidebar{border-right:none;border-bottom:1px solid var(--soft-border);width:100%}.content-grid,.bottom-grid,.stats-grid{grid-template-columns:1fr}.topbar,.hero-panel,.topbar-actions{flex-direction:column;align-items:flex-start}.search-box{min-width:100%}}*{box-sizing:border-box}body{color:#1f2937;background:#6424db;margin:0;font-family:Arial,sans-serif}.admin-layout{min-height:100vh;display:flex}.sidebar{color:#fff;background:#111827;width:250px;min-height:100vh;position:fixed;top:0;bottom:0;left:0;overflow-y:auto}.sidebar-logo{border-bottom:1px solid #d92929;padding:25px 20px}.sidebar-logo h2{color:#e81111;margin:0}.sidebar-logo span{color:#d8df17;font-size:14px}.sidebar nav{padding:15px 10px}.sidebar-link{color:#d1d5db;border-radius:8px;align-items:center;gap:12px;margin-bottom:5px;padding:12px 15px;text-decoration:none;transition:all .2s;display:flex}.sidebar-link:hover,.sidebar-link.active{color:#fff;background:#2563eb}.main-content{width:calc(100% - 250px);margin-left:250px}.topbar{background:#5858de;border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;height:70px;padding:0 30px;display:flex}.topbar h3{color:#81ee78;margin:0}.admin-profile{color:#37f259;align-items:center;gap:10px;display:flex}.content{padding:30px}.admin-page{width:100%}.page-header{justify-content:space-between;align-items:center;margin-bottom:25px;display:flex}.page-header h1{color:#e7c863;margin:0 0 5px}.page-header h2{color:#2f13e7}.page-header p{color:#5385e9;margin:0}.stats-grid{grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:25px;display:grid}.stat-card{background:#fff;border-radius:12px;align-items:center;gap:18px;padding:22px;display:flex;box-shadow:0 2px 8px #0d9cd90f}.stat-icon{font-size:38px}.stat-card h3{color:#27bd74;margin:0;font-size:26px}.stat-card p{color:#f1560e;margin:5px 0;font-weight:700}.stat-card small{color:#570ae6}.dashboard-grid{grid-template-columns:2fr 1fr;gap:20px;display:grid}.dashboard-card,.form-card,.profile-card{background:#fff;border-radius:12px;margin-bottom:20px;padding:25px;box-shadow:0 2px 8px #3933eb0f}.dashboard-card h2{color:#d41bce;margin-top:0}.table-container{width:100%;overflow-x:auto}table{border-collapse:collapse;width:100%}th,td{text-align:left;border-bottom:1px solid #b608b3;padding:14px}th{color:#f41124;background:#14dd3c;font-weight:600}td{color:#3d62d2}tbody tr:hover{background:#8fc41d}.status{border-radius:20px;padding:5px 10px;font-size:12px;font-weight:700}.status.active{color:#166534;background:#90c416}.status.pending{color:#92400e;background:#f2d55f}.status.inactive{color:#991b1b;background:#fee2e2}.btn{cursor:pointer;border:none;border-radius:7px;padding:11px 18px;font-size:14px;font-weight:500;text-decoration:none;display:inline-block}.btn-primary{color:#fff;background:#2563eb}.btn-primary:hover{background:#1d4ed8}.btn-secondary{color:#1ecd44;background:#e5e7eb}.btn-secondary:hover{background:#d1d5db}.toolbar{border-radius:15 px;background:#fff;margin-bottom:20px;padding:15px}.toolbar input{color:#c20ab3;background:#327632;border:1px solid #b0132b;border-radius:7px;width:100%;padding:12px}.toolbar input::placeholder{color:#abeb17}.form-grid{grid-template-columns:repeat(2,1fr);gap:15px;margin-bottom:25px;display:grid}.form-grid input,.form-grid select,.form-grid textarea{color:#e226d3;background:#fff;border:1px solid #d1d5db;border-radius:7px;width:100%;padding:12px}.form-grid input::placeholder,.form-grid textarea::placeholder{color:#9ca3af}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.toolbar input:focus{border-color:#2563eb;outline:none;box-shadow:0 0 0 3px #2563eb1a}.form-card h2{color:#111827;margin-top:0;margin-bottom:20px}.form-actions{justify-content:flex-end;gap:10px;display:flex}.profile-card{align-items:center;gap:20px;display:flex}.profile-card h2,.profile-card h3{color:#c40183}.profile-card p{color:#e10a1c}.profile-avatar{color:#1ce12c;background:#2563eb;border-radius:50%;justify-content:center;align-items:center;width:70px;height:70px;font-size:24px;font-weight:700;display:flex}.summary-item{color:#931290;border-bottom:1px solid #e5e7eb;justify-content:space-between;padding:15px 0;display:flex}.notification-item{background:#e59ac6;border-radius:10px;gap:15px;margin-bottom:10px;padding:18px;display:flex}.notification-item h3{color:#13d741}.notification-item p{color:#171adf;margin:5px 0 0}.report-grid{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}.checkbox-label{color:#b7cf42;align-items:center;gap:10px;display:flex}@media (width<=1000px){.stats-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.report-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=700px){.sidebar{width:70px}.sidebar-logo span,.sidebar-link span:last-child{display:none}.main-content{width:calc(100% - 70px);margin-left:70px}.stats-grid,.form-grid,.report-grid{grid-template-columns:1fr}.content{padding:15px}table{min-width:700px}.dashboard-card{overflow-x:auto}}.personal-info p{color:#c80e27;margin:0 0 20px;font-size:16px}.personal-info p strong{color:#c728aa;font-weight:600}.personal-info p,.academic-info p{color:#374151;margin:0 0 20px;font-size:16px;line-height:1.5}.personal-info p strong,.academic-info p strong{color:#111827;font-weight:600}.personal-info h2,.academic-info h2{color:#2563eb;margin-top:0;margin-bottom:25px}.student-profile h2{color:#111827}.student-profile p{color:#4b5563}.student-profile .email{color:#374151}.student-id{font-size:15px;color:#2563eb!important}.student-profile{align-items:center;gap:20px;display:flex}.student-profile h2{margin:0 0 8px;color:#111827!important}.profile-email{margin:0 0 12px;color:#4b5563!important}.personal-info,.academic-info{color:#374151!important}.personal-info h2,.academic-info h2{margin-top:0;margin-bottom:25px;color:#2563eb!important}.info-item{border-bottom:1px solid #e5e7eb;align-items:center;gap:8px;padding:12px 0;display:flex}.info-item strong{font-weight:600;color:#111827!important}.info-item span{color:#374151!important}.info-item:last-child{border-bottom:none}.student-profile .profile-avatar{color:#fff;background:#2563eb}.student-profile .status.active{background:#dcfce7;color:#166534!important}.login-page{background:#f5f7fb;min-height:100vh;display:flex}.login-brand{color:#fff;background:linear-gradient(135deg,#0f172a,#1e3a8a);justify-content:center;align-items:center;width:50%;min-height:100vh;padding:50px;display:flex}.brand-content{max-width:520px}.brand-logo{background:#ffffff1f;border-radius:18px;justify-content:center;align-items:center;width:70px;height:70px;margin-bottom:25px;font-size:35px;display:flex}.brand-content h1{color:#fff;margin:0 0 20px;font-size:42px;line-height:1.15}.brand-content>p{color:#cbd5e1;margin:0 0 35px;font-size:17px;line-height:1.7}.brand-features{flex-direction:column;gap:18px;display:flex}.brand-feature{align-items:center;gap:14px;display:flex}.brand-feature span{color:#fff;background:#2563eb;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-weight:700;display:flex}.brand-feature p{color:#e2e8f0;margin:0;font-size:15px}.login-container{justify-content:center;align-items:center;width:50%;min-height:100vh;padding:40px;display:flex}.login-card{background:#fff;border-radius:16px;width:100%;max-width:460px;padding:40px;box-shadow:0 20px 50px #0f172a1a}.login-header{text-align:center;margin-bottom:30px}.login-header h2{color:#111827;margin:0 0 8px;font-size:30px}.login-header p{color:#6b7280;margin:0;font-size:15px}.mobile-logo{display:none}.login-form-group label{color:#374151;margin-bottom:8px;font-size:14px;font-weight:600;display:block}.login-form-group input{color:#111827;background:#fff;border:1px solid #d1d5db;border-radius:8px;outline:none;width:100%;height:48px;padding:0 14px;font-size:14px;transition:all .2s}.login-form-group input::placeholder{color:#9ca3af}.login-form-group input:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1f}.password-label label{margin-bottom:0}.password-label a{color:#2563eb;font-size:13px;text-decoration:none}.password-label a:hover{text-decoration:underline}.password-input{position:relative}.password-input input{padding-right:50px}.password-toggle{cursor:pointer;background:0 0;border:none;font-size:18px;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.login-options{align-items:center;margin-bottom:22px;display:flex}.remember-me{cursor:pointer;color:#4b5563;align-items:center;gap:8px;font-size:14px;display:flex}.remember-me input{cursor:pointer;accent-color:#2563eb;width:16px;height:16px}.login-button{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:8px;width:100%;height:48px;font-size:15px;font-weight:600;transition:all .2s}.login-button:hover{background:#1d4ed8;transform:translateY(-1px);box-shadow:0 6px 15px #2563eb40}.login-button:active{transform:translateY(0)}.login-divider{align-items:center;gap:15px;margin:28px 0;display:flex}.login-divider:before,.login-divider:after{content:"";background:#e5e7eb;flex:1;height:1px}.login-divider span{color:#9ca3af;font-size:12px;font-weight:600}.create-account{text-align:center}.create-account p{color:#6b7280;margin:0 0 14px;font-size:14px}.create-account-button{color:#2563eb;background:#fff;border:1px solid #2563eb;border-radius:8px;justify-content:center;align-items:center;width:100%;height:46px;font-size:14px;font-weight:600;text-decoration:none;transition:all .2s;display:flex}.create-account-button:hover{color:#1d4ed8;background:#eff6ff;border-color:#1d4ed8}.login-footer{text-align:center;margin-top:30px}.login-footer p{color:#9ca3af;margin:0;font-size:12px}@media (width<=1000px){.login-brand{width:45%;padding:30px}.login-container{width:55%;padding:25px}.brand-content h1{font-size:34px}}@media (width<=750px){.login-page{display:block}.login-brand{width:100%;min-height:auto;padding:35px 25px}.brand-content{text-align:center}.brand-logo{margin-left:auto;margin-right:auto}.brand-content h1{font-size:30px}.brand-content>p{font-size:15px}.brand-features{display:none}.login-container{width:100%;min-height:auto;padding:30px 20px}.login-card{padding:30px 25px}}@media (width<=450px){.login-brand{padding:30px 20px}.brand-content h1{font-size:26px}.login-container{padding:20px 15px}.login-card{border-radius:12px;padding:25px 20px}.login-header h2{font-size:25px}}.password-label{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.password-label label{margin:0}.password-input{align-items:center;display:flex;position:relative}.password-input input{width:100%;padding-right:48px}.auth-error{color:#b91c1c;background:#fee2e2;border:1px solid #fecaca;border-radius:7px;margin:12px 0;padding:11px 14px;font-size:14px}.create-account{text-align:center;margin-top:20px}.create-account p{color:#6b7280;margin-bottom:10px}.create-account-button{color:#2563eb;font-weight:600;text-decoration:none;display:inline-block}.create-account-button:hover{text-decoration:underline}.login-form-group{margin-bottom:20px}.login-form-group>label{color:#111827;margin-bottom:8px;font-size:14px;font-weight:600;display:block}.password-input{width:100%;position:relative}.password-input input{color:#111827;background:#fff;border:1px solid #d1d5db;border-radius:8px;outline:none;width:100%;padding:13px 48px 13px 13px;font-size:14px;transition:border-color .2s,box-shadow .2s}.password-input input:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.password-toggle{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:5px;font-size:18px;display:flex;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.password-toggle:hover{opacity:.7}.forgot-password-wrapper{justify-content:flex-end;margin-top:8px;display:flex}.forgot-password{color:#2563eb;font-size:13px;font-weight:600;text-decoration:none;transition:color .2s}.forgot-password:hover{color:#1d4ed8;text-decoration:underline}.auth-error{color:#b91c1c;background:#fee2e2;border:1px solid #fecaca;border-radius:7px;margin-bottom:15px;padding:11px 14px;font-size:14px;line-height:1.4}