*{box-sizing:border-box}html,body{margin:0;font-family:Cairo,sans-serif;background:#07111f;color:#edf4ff}body{min-height:100vh}.app{min-height:100vh}.sidebar{position:fixed;right:0;top:0;width:260px;height:100vh;background:linear-gradient(180deg,#111f3a,#07101d);border-left:1px solid #243756;padding:22px 16px;z-index:10}.brand{display:flex;align-items:center;gap:11px;padding:5px 8px 28px}.brandmark{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#1bd0a8,#3978ff);display:grid;place-items:center;font-size:22px;font-weight:800;box-shadow:0 12px 35px #1f9eab55}.brand small{display:block;color:#7f93b4;font-size:11px}.sidebar nav{display:grid;gap:5px}.sidebar nav a{color:#aebdd4;text-decoration:none;padding:12px 13px;border-radius:12px;transition:.2s}.sidebar nav a:hover{background:#182b49;color:#fff;transform:translateX(-3px)}.main{margin-right:260px;min-height:100vh;padding:28px;background:radial-gradient(circle at 80% 0,#17365d 0,#0a1424 38%,#07111f 70%)}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.top h1{margin:2px 0;font-size:27px}.top>div:first-child>span{color:#8296b5;font-size:12px}.top-actions{display:flex;gap:10px;align-items:center}.iconbtn,.avatar{width:42px;height:42px;border-radius:50%;border:1px solid #2b405f;background:#13243e;color:white}.avatar{display:grid;place-items:center}.iconbtn{cursor:pointer}.hero{border:1px solid #294261;border-radius:24px;padding:28px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(120deg,#132a49dd,#10233bdd);box-shadow:0 20px 60px #0004;margin-bottom:20px}.hero.compact{padding:20px}.hero h2{margin:7px 0;font-size:28px}.hero p{color:#9aadc8}.eyebrow{color:#35d7b4;font-size:11px;font-weight:800}.btn{display:inline-block;border:0;background:linear-gradient(135deg,#1ccaa5,#367cff);color:white;text-decoration:none;padding:11px 17px;border-radius:12px;font-family:inherit;cursor:pointer;transition:.2s;box-shadow:0 8px 25px #1ccaa533}.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.card{background:#10223add;border:1px solid #263d5c;border-radius:18px;padding:18px;box-shadow:0 12px 40px #0002;transition:.25s}.card:hover{transform:translateY(-3px);border-color:#35648c}.card span{display:block;color:#8397b7;font-size:12px}.card b{display:block;font-size:24px;margin-top:4px}.ci{font-size:25px;margin-bottom:8px}.grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}.panel{background:#10223add;border:1px solid #263d5c;border-radius:20px;padding:22px;box-shadow:0 15px 50px #0002}.panel-title{display:flex;justify-content:space-between;align-items:center}.panel-title span{font-size:11px;color:#49d8b8}.notice{padding:13px;border-radius:12px;background:#0c1b30;border:1px solid #203552;margin:10px 0;color:#c8d5e7}.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px}.search{background:#0e1e34;color:#dce8f8;border:1px solid #2a405e;border-radius:12px;padding:11px 14px;font-family:inherit;min-width:300px}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:14px 10px;border-bottom:1px solid #233750;text-align:right;white-space:nowrap}th{font-size:11px;color:#8295b3}td{font-size:13px}.link{color:#48d8b8;text-decoration:none}.badge{padding:5px 9px;border-radius:99px;font-size:10px}.badge.present{background:#0d3b32;color:#52e0bf}.badge.absent{background:#481f2b;color:#ff8298}.badge.late{background:#4b3b17;color:#ffd36b}.formpanel{max-width:850px}.formpanel form{display:grid;grid-template-columns:1fr 1fr;gap:15px}.formpanel label{color:#91a5c2;font-size:12px;display:grid;gap:7px}.formpanel input,.formpanel select{background:#0b1a2d;color:white;border:1px solid #2a405e;border-radius:11px;padding:12px;font-family:inherit}.formpanel .btn{grid-column:1/-1}.profilehead{display:flex;align-items:center;gap:18px;margin-bottom:22px}.studentpic{width:78px;height:78px;border-radius:23px;background:#162d4b;display:grid;place-items:center;font-size:35px}.mini-cards{grid-template-columns:repeat(4,1fr)}.mini-cards .card b{font-size:18px}.tabs{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}.tabs button,.reportgrid button{background:#132641;color:#bdd0e9;border:1px solid #29415f;border-radius:10px;padding:10px 14px;font-family:inherit;cursor:pointer}.reportgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.alert{background:#0f3b33;color:#5ee1c1;border:1px solid #1c6d5d;padding:12px;border-radius:12px;margin-bottom:15px}.inline{display:flex;gap:7px;align-items:center}.inline select{background:#0c1a2c;color:white;border:1px solid #29415e;padding:7px;border-radius:8px}.login-page{display:grid;place-items:center;min-height:100vh;background:radial-gradient(circle at 50% 0,#193c68,#07111f 65%)}.login-card{width:min(430px,92vw);padding:34px;border:1px solid #294361;border-radius:24px;background:#0d1e34dd;box-shadow:0 30px 80px #0008;text-align:center}.brandmark.big{margin:auto}.login-card h1{font-size:20px}.login-card p{color:#8fa3c1}.login-card form{display:grid;gap:14px;text-align:right}.login-card label{font-size:12px;color:#9eb0ca;display:grid;gap:7px}.login-card input{padding:13px;border-radius:11px;border:1px solid #2b4260;background:#09182a;color:#fff;font-family:inherit}.login-card .btn{margin-top:5px}@media(max-width:1050px){.sidebar{width:78px}.sidebar .brand>div:not(.brandmark),.sidebar nav span{display:none}.sidebar nav a{text-align:center;font-size:20px}.main{margin-right:78px}.cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.main{padding:15px}.hero{display:block}.hero .btn{margin-top:15px}.cards,.grid2,.mini-cards,.formpanel form,.reportgrid{grid-template-columns:1fr}.toolbar{align-items:stretch;flex-direction:column}.search{min-width:0;width:100%}.top h1{font-size:21px}}
html.light body{background:#eef3f9;color:#18243a}html.light .main{background:#eef3f9}html.light .sidebar{background:#fff;border-color:#d9e2ef}html.light .sidebar nav a{color:#52637b}html.light .panel,html.light .card,html.light .hero{background:#fff;color:#18243a;border-color:#d9e2ef}html.light .notice,html.light .search,html.light .formpanel input{background:#f4f7fb;color:#18243a;border-color:#d5dfec}
textarea{min-height:100px;resize:vertical;background:#0b1a2d;color:white;border:1px solid #2a405e;border-radius:11px;padding:12px;font-family:inherit}.chatbox{max-width:900px}.chatbox small{display:block;color:#7287a5;margin-top:5px}.small{padding:7px 11px;font-size:11px}h3{margin-top:0}
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap');
:root{font-family:'Cairo','Tajawal',sans-serif}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}.stat{padding:20px;border-radius:18px;background:linear-gradient(135deg,#10243c,#0b1729);border:1px solid #223957;box-shadow:0 15px 40px rgba(0,0,0,.16)}.stat b{display:block;color:#8fa5c2;font-size:12px}.stat strong{display:block;font-size:24px;margin-top:8px}.link{display:block;color:inherit;text-decoration:none}.notice{transition:.2s}.notice:hover{transform:translateY(-2px);border-color:#4b6d96}
@media(max-width:800px){.stats{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}
.formpanel label{display:block}.toolbar .btn{margin-bottom:4px}.panel{animation:fadeIn .35s ease}@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}