:root{
  --navy:#0f1c33;
  --navy-active:#25406b;
  --orange:#f5a623;
  --blue:#3b82f6;
  --blue-bg:#e3edfd;
  --green:#22c55e;
  --green-bg:#e3f7ea;
  --amber:#f5a623;
  --amber-bg:#fdf0dc;
  --purple:#8b5cf6;
  --purple-bg:#eee6fd;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --bg:#f4f6fb;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{text-decoration:none;color:inherit;}
.layout{display:flex;min-height:100vh;}

/* Sidebar */
.sidebar{
  width:260px;
  background:var(--navy);
  color:#cfd8e8;
  flex-shrink:0;
  padding:24px 0;
}
.sidebar .brand{
  display:flex;align-items:center;gap:10px;
  padding:0 24px 24px;
  font-size:22px;font-weight:700;color:#fff;
}
.sidebar .brand span{color:var(--orange);}
.sidebar nav a{
  display:flex;align-items:center;gap:12px;
  padding:12px 24px;
  font-size:14.5px;
  color:#cfd8e8;
  border-left:3px solid transparent;
}
.sidebar nav a.active{
  background:var(--navy-active);
  color:#fff;
  border-left-color:var(--orange);
}
.sidebar nav a:hover{background:rgba(255,255,255,.06);}
.sidebar .foot{
  margin-top:40px;
  padding:16px 24px 0;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:12px;color:#8fa0bb;
}

/* Main */
.main{flex:1;min-width:0;}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  background:#fff;border-bottom:1px solid var(--border);
  padding:16px 32px;
}
.topbar h1{font-size:20px;margin:0;display:flex;align-items:center;gap:10px;}
.topbar .sub{font-size:12.5px;color:var(--muted);margin-top:2px;}
.topbar .right{display:flex;align-items:center;gap:18px;}
.icon-btn{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#f1f3f8;color:#4b5563;position:relative;
}
.user-chip{display:flex;align-items:center;gap:10px;}
.avatar{
  width:38px;height:38px;border-radius:50%;
  background:var(--blue-bg);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-weight:700;
}
.login-btn{
  background:var(--navy);color:#fff;border:none;
  padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;gap:8px;
}
.login-btn:hover{background:var(--navy-active);}
.logout-link{color:#dc2626;font-size:13px;font-weight:600;}

.content{padding:28px 32px;}

/* Stat cards */
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px;
}
.stat-card{
  background:#fff;border-radius:14px;padding:20px;
  display:flex;align-items:center;gap:16px;
  box-shadow:0 1px 3px rgba(16,24,40,.06);
}
.stat-icon{
  width:56px;height:56px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;
}
.stat-card .num{font-size:26px;font-weight:700;line-height:1.1;}
.stat-card .label{font-size:14px;font-weight:600;color:var(--text);}
.stat-card .desc{font-size:12px;color:var(--muted);}

.icon-blue{background:var(--blue-bg);color:var(--blue);}
.icon-green{background:var(--green-bg);color:var(--green);}
.icon-amber{background:var(--amber-bg);color:var(--amber);}
.icon-purple{background:var(--purple-bg);color:var(--purple);}

/* panels */
.panel{
  background:#fff;border-radius:14px;padding:22px;
  box-shadow:0 1px 3px rgba(16,24,40,.06);
}
.panel h2{font-size:16px;margin:0;}
.grid-2{display:grid;grid-template-columns:2.2fr 1fr;gap:20px;margin-bottom:24px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr;gap:20px;}

.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.search-box{
  border:1px solid var(--border);border-radius:8px;padding:8px 12px;
  font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;width:220px;
}
.search-box input{border:none;outline:none;font-size:13px;width:100%;}

table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{
  text-align:left;color:var(--muted);font-weight:600;font-size:12.5px;
  padding:8px 10px;border-bottom:1px solid var(--border);
}
td{padding:12px 10px;border-bottom:1px solid #f1f3f8;}
.progress{
  background:#eef0f4;border-radius:20px;height:7px;width:90px;overflow:hidden;display:inline-block;vertical-align:middle;margin-right:8px;
}
.progress > span{display:block;height:100%;background:var(--green);border-radius:20px;}
.badge-btn{
  border:1px solid var(--blue);color:var(--blue);background:#fff;
  border-radius:6px;padding:5px 10px;font-size:12.5px;cursor:pointer;
}

.donut-wrap{display:flex;align-items:center;gap:20px;justify-content:center;padding:10px 0;}
.donut{
  width:150px;height:150px;border-radius:50%;
  background:conic-gradient(var(--green) 0% calc(var(--pct)*1%), #e5e7eb calc(var(--pct)*1%) 100%);
  display:flex;align-items:center;justify-content:center;position:relative;
}
.donut::before{
  content:"";position:absolute;width:104px;height:104px;background:#fff;border-radius:50%;
}
.donut .donut-label{position:relative;text-align:center;}
.donut .donut-label b{font-size:22px;display:block;}
.donut .donut-label span{font-size:11px;color:var(--muted);}
.legend-item{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:8px;}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;}

.recent-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f1f3f8;}
.recent-item:last-child{border-bottom:none;}
.recent-item .avatar{width:36px;height:36px;background:var(--green-bg);color:var(--green);}
.recent-item .name{font-weight:600;font-size:13.5px;}
.recent-item .school{font-size:12px;color:var(--muted);}
.recent-item .date{margin-left:auto;font-size:12px;color:var(--muted);}

.side-card{border-radius:14px;padding:20px;margin-bottom:20px;}
.side-card h3{margin:0 0 4px;font-size:15px;display:flex;align-items:center;gap:8px;}
.side-card p{margin:0 0 14px;font-size:12.5px;color:var(--muted);}
.side-blue{background:#eef4ff;}
.side-amber{background:#fef7e6;}
.side-purple{background:#f3edfe;}
.side-card label{font-size:12px;color:var(--muted);display:block;margin-bottom:4px;margin-top:10px;}
.side-card .field{
  background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--text);
}
.side-card .note{font-size:11.5px;color:var(--muted);margin-top:10px;}
.btn-amber{background:var(--amber);color:#fff;border:none;padding:9px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;}
.btn-purple{background:var(--purple);color:#fff;border:none;padding:9px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;}

/* Login page */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px;
}
.login-card{
  width:100%;max-width:400px;background:#fff;border-radius:16px;padding:36px 32px;
  box-shadow:0 10px 30px rgba(16,24,40,.08);
}
.login-card .brand{display:flex;align-items:center;gap:8px;font-size:24px;font-weight:700;color:var(--navy);margin-bottom:4px;}
.login-card .brand span{color:var(--orange);}
.login-card .lead{font-size:13.5px;color:var(--muted);margin-bottom:26px;}
.login-card label{font-size:13px;font-weight:600;display:block;margin-bottom:6px;margin-top:16px;}
.login-card input{
  width:100%;border:1px solid var(--border);border-radius:8px;padding:11px 12px;font-size:14px;outline:none;
}
.login-card input:focus{border-color:var(--blue);}
.login-card button{
  width:100%;margin-top:22px;background:var(--navy);color:#fff;border:none;
  padding:12px;border-radius:8px;font-size:14.5px;font-weight:600;cursor:pointer;
}
.login-card button:hover{background:var(--navy-active);}
.error-box{
  background:#fdecec;color:#b91c1c;border:1px solid #f8caca;border-radius:8px;
  padding:10px 12px;font-size:13px;margin-top:16px;
}
.back-link{display:block;text-align:center;margin-top:18px;font-size:12.5px;color:var(--muted);}
.demo-hint{
  margin-top:22px;background:#f4f6fb;border-radius:8px;padding:12px 14px;font-size:11.5px;color:var(--muted);line-height:1.6;
}

.welcome-banner{
  background:linear-gradient(135deg,var(--navy),var(--navy-active));
  color:#fff;border-radius:14px;padding:24px 28px;margin-bottom:24px;
  display:flex;align-items:center;justify-content:space-between;
}
.welcome-banner h2{margin:0 0 6px;font-size:20px;}
.welcome-banner p{margin:0;font-size:13.5px;color:#cfd8e8;}
.welcome-banner .school-tag{
  background:rgba(255,255,255,.12);padding:8px 16px;border-radius:10px;font-size:13px;font-weight:600;
}

@media(max-width:900px){
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .grid-2{grid-template-columns:1fr;}
  .sidebar{display:none;}
}