:root{--primary:#2563eb;--primary-dark:#1d4ed8;--primary-light:#dbeafe;--success:#22c55e;--warning:#f59e0b;--danger:#ef4444;--background:#f4f7fb;--surface:#ffffff;--surface-2:#f8fafc;--border:#e5e7eb;--text:#0f172a;--text-light:#64748b;--shadow:0 10px 35px rgba(15,23,42,.08);--radius:18px;--transition:.25s ease}*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,sans-serif}body{background:var(--background);color:var(--text)}.notification-panel{position:absolute;right:30px;top:70px;width:300px;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:15px}.notification-item{padding:15px;border-bottom:1px solid var(--border)}.notification-title{display:flex;gap:10px;font-weight:700;padding:10px}.settings-panel{position:absolute;right:20px;top:70px;width:280px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:16px;z-index:30}.settings-panel h4{margin-bottom:8px}.settings-panel p{color:var(--text-light);margin-bottom:12px;line-height:1.5}.feedback-banner{margin-bottom:16px;padding:12px 14px;border-radius:12px;background:var(--primary-light);color:var(--primary-dark);font-weight:600}a{text-decoration:none;color:inherit}button{cursor:pointer;transition:var(--transition)}.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;border:1px solid var(--border);transition:.25s}.card:hover{transform:translateY(-4px);box-shadow:0 15px 45px #0000001f}.page-title{font-size:2rem;font-weight:700;margin-bottom:12px}.page-subtitle{color:var(--text-light);margin-bottom:30px}.grid{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.btn{padding:12px 20px;border:none;border-radius:12px;font-weight:600}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.badge{display:inline-flex;padding:6px 12px;border-radius:999px;font-size:.8rem;font-weight:600}.badge-success{background:#dcfce7;color:#166534}.badge-warning{background:#fef3c7;color:#92400e}.badge-danger{background:#fee2e2;color:#991b1b}table{width:100%;border-collapse:collapse}thead{background:#f8fafc}th,td{padding:16px;text-align:left;border-bottom:1px solid var(--border)}tr:hover{background:#f8fafc}input,select,textarea{width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;outline:none;transition:.2s}input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px #2563eb26}.fade{animation:fade .4s ease}@keyframes fade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.page-title{font-size:1.5rem}.card{padding:18px}}.ui-card{background:#fff;border-radius:18px;padding:24px;box-shadow:var(--shadow);border:1px solid var(--border)}.ui-card-title{margin-bottom:20px;font-size:18px}.stat-card{background:#fff;border-radius:18px;padding:20px;display:flex;align-items:center;gap:20px;box-shadow:var(--shadow)}.stat-icon{width:55px;height:55px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:25px}.stat-icon.blue{background:#dbeafe;color:#2563eb}.stat-icon.green{background:#dcfce7;color:#16a34a}.stat-icon.orange{background:#ffedd5;color:#ea580c}.stat-icon.red{background:#fee2e2;color:#dc2626}.stat-info p{color:var(--text-light)}.stat-info h2{font-size:28px;margin:5px 0}.positive{color:#16a34a;display:flex;align-items:center;gap:5px}.negative{color:#dc2626;display:flex;align-items:center;gap:5px}.ui-button{border:none;padding:12px 20px;border-radius:12px;font-weight:600;display:inline-flex;align-items:center;gap:8px}.ui-button.primary{background:var(--primary);color:#fff}.ui-button.success{background:#16a34a;color:#fff}.ui-button.danger{background:#dc2626;color:#fff}.alert{padding:16px;border-radius:14px;display:flex;gap:12px;align-items:center}.alert.info{background:#dbeafe;color:#1d4ed8}.alert.success{background:#dcfce7;color:#166534}.alert.warning{background:#fef3c7;color:#92400e}.table-container{background:#fff;border-radius:18px;overflow:auto;box-shadow:var(--shadow)}.student-profile{display:flex;align-items:center;gap:20px}.student-profile .badge{margin-left:auto}.student-avatar{width:80px;height:80px;border-radius:50%;background:#dbeafe;color:#2563eb;display:flex;align-items:center;justify-content:center}.subject-item{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid var(--border)}.calendar-box{display:flex;align-items:center;gap:15px}.timeline{list-style:none}.timeline li{padding:15px;border-left:3px solid var(--primary);margin-bottom:10px;background:#f8fafc;border-radius:8px}.children-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.child-card{background:#f8fafc;padding:20px;border-radius:18px;border:1px solid var(--border)}.child-header{display:flex;align-items:center;gap:15px}.child-avatar{width:55px;height:55px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#dcfce7;color:#16a34a;font-size:22px;font-weight:700}.child-info{display:flex;justify-content:space-between}.child-info p{font-size:20px;font-weight:700;margin-top:5px}.class-item{display:flex;justify-content:space-between;align-items:center;padding:15px;background:#f8fafc;border-radius:14px;margin-bottom:12px}.class-item p{color:var(--text-light);margin-top:5px}.attendance{display:flex;align-items:center;gap:15px;color:var(--text-light)}.teacher-item{display:flex;justify-content:space-between;align-items:center;padding:15px;background:#f8fafc;border-radius:14px;margin-bottom:12px}.teacher-item p{color:var(--text-light);margin-top:5px}.performance-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:220px;color:var(--primary)}.performance-box h2{font-size:45px}.report-box{display:flex;align-items:center;gap:20px}.report-box button{margin-left:auto}@media (max-width:700px){.report-box{flex-direction:column;align-items:flex-start}}.inspection-event{display:flex;align-items:center;gap:20px;padding:20px;background:#f8fafc;border-radius:16px}.location{display:flex;align-items:center;gap:5px}.location svg{color:var(--primary)}.quick-actions{display:flex;flex-wrap:wrap;gap:15px}.quick-actions button{display:flex;align-items:center;gap:8px}.system-card{display:flex;align-items:center;gap:20px;padding:20px;background:#f8fafc;border-radius:16px}.map-placeholder{height:250px;background:#f8fafc;border-radius:18px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;color:var(--primary)}.map-placeholder p{color:var(--text-light);text-align:center}.national-card{display:flex;align-items:center;gap:20px}body.dark{--background:#020617;--surface:#0f172a;--surface-2:#1e293b;--text:#f8fafc;--text-light:#94a3b8;--border:#334155;--shadow: 0 10px 30px rgba(0,0,0,.4)}body.dark .card,body.dark .ui-card,body.dark .stat-card,body.dark .sidebar,body.dark .topbar,body.dark .login-card{background:var(--surface);color:var(--text)}body.dark input,body.dark select,body.dark textarea{background:#1e293b;color:#fff;border-color:#334155}body.dark table{color:#fff}body.dark thead,body.dark tr:hover{background:#1e293b}.app-container{display:flex;min-height:100vh}.sidebar{width:270px;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;height:100vh;z-index:100}.sidebar-header{padding:25px;display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;gap:12px}.logo-icon{width:45px;height:45px;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;border-radius:14px;font-size:24px;font-weight:700}.logo h2{font-size:20px}.logo small{color:var(--text-light)}.close-menu{display:none;border:none;background:none}.navigation{padding:15px;flex:1}.nav-link{display:flex;align-items:center;gap:15px;padding:14px;margin-bottom:8px;border-radius:14px;color:var(--text-light);transition:.3s}.nav-link:hover,.nav-link.active{background:#eff6ff;color:var(--primary)}.nav-icon{font-size:22px}.nav-arrow{margin-left:auto}.sidebar-footer{padding:20px;border-top:1px solid var(--border)}.profile-mini,.logout{width:100%;display:flex;align-items:center;gap:12px;padding:13px;border:none;background:none;border-radius:12px}.logout:hover{background:#fee2e2;color:#dc2626}.main-area{margin-left:270px;width:100%}.topbar{height:80px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 30px}.menu-button{display:none;background:none;border:none}.search-box{display:flex;align-items:center;gap:10px;background:#f8fafc;padding:10px 16px;border-radius:14px;width:350px}.search-box input{border:none;background:none}.top-actions{display:flex;align-items:center;gap:15px}.icon-button{position:relative;border:none;background:#f8fafc;padding:12px;border-radius:12px}.notification-dot{position:absolute;width:8px;height:8px;background:red;border-radius:50%;right:10px;top:10px}.user-box{display:flex;align-items:center;gap:12px}.user-box small{display:block;color:var(--text-light)}.avatar{width:42px;height:42px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}.content{padding:30px}@media (max-width:900px){.sidebar{transform:translate(-100%);transition:.3s}.sidebar.active{transform:translate(0)}.main-area{margin-left:0}.menu-button,.close-menu{display:block}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:90}.search-box{display:none}}.login-page{min-height:100vh;display:grid;grid-template-columns:1fr 650px;background:#f8fafc}.login-left{background:#2563eb;color:#fff;padding:70px;display:flex;flex-direction:column;justify-content:center;align-items:center}.brand{display:flex;align-items:center;gap:15px}.brand-icon{width:60px;height:60px;background:#fff;color:#2563eb;border-radius:18px;display:flex;align-items:center;justify-content:center}.login-left h1{font-size:45px}.login-left h2{font-size:32px;margin-top:40px}.login-left p{font-size:18px;opacity:.9;max-width:450px;line-height:1.6}.login-stat{display:flex;gap:40px;margin-top:50px}.login-stat div{display:flex;flex-direction:column}.login-stat strong{font-size:30px}.login-card{background:#fff;padding:70px;display:flex;flex-direction:column;justify-content:center}.login-card h2{font-size:32px}.login-card p{color:#64748b;margin-bottom:30px}.login-card label{display:block;margin-bottom:8px;font-weight:600}.input-box{height:50px;border:1px solid #e5e7eb;border-radius:12px;display:flex;align-items:center;gap:10px;padding:0 15px;margin-bottom:20px}.input-box input{border:none;outline:none}.input-box button{border:none;background:none}select{height:50px;border-radius:12px;border:1px solid #e5e7eb;padding:0 15px;margin-bottom:20px}.login-options{display:flex;justify-content:space-between;font-size:14px;margin-bottom:25px}.login-button{height:55px;padding:15px;border:none;border-radius:14px;background:#2563eb;color:#fff;font-size:17px;font-weight:700}.login-button:hover{background:#1d4ed8}@media (max-width:900px){.login-page{grid-template-columns:1fr}.login-left{display:none}.login-card{padding:30px}}