:root{
  --navy:#0b1f3a;--blue:#124e96;--gold:#d7a93e;--bg:#f5f7fb;
  --card:#ffffff;--text:#1b2430;--muted:#6b7280;--line:#e5e7eb;
  --ok:#0f9d58;--danger:#c0392b;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#0b1f3a,#124e96)}
.login-card{width:min(460px,100%);background:#fff;border-radius:24px;padding:32px;box-shadow:0 24px 60px rgba(0,0,0,.22)}
.brand{display:flex;gap:14px;align-items:center;margin-bottom:24px}
.brand-badge{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,var(--gold),#f3d98a);display:grid;place-items:center;font-weight:800;color:var(--navy)}
.brand h1{font-size:22px;margin:0}.brand p{margin:4px 0 0;color:var(--muted);font-size:13px}
.form-group{margin-bottom:16px}.form-group label{display:block;font-weight:700;margin-bottom:7px;font-size:14px}
.input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;font-size:15px;outline:none}
.input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(18,78,150,.1)}
.btn{border:0;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer}
.btn-primary{background:var(--blue);color:#fff;width:100%}.btn-danger{background:#fff;color:var(--danger);border:1px solid #f1c8c4}
.message{margin-top:14px;font-size:14px;color:var(--danger)}
.app{min-height:100vh;display:grid;grid-template-columns:250px 1fr}
.sidebar{background:var(--navy);color:#fff;padding:22px 16px;position:sticky;top:0;height:100vh}
.sidebar .logo{font-weight:800;font-size:20px;margin-bottom:6px}.sidebar .school{font-size:12px;color:#cbd5e1;margin-bottom:26px}
.nav a{display:block;padding:12px 14px;border-radius:10px;margin:6px 0;color:#e5edf7}.nav a:hover,.nav a.active{background:rgba(255,255,255,.12)}
.main{padding:26px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:22px}
.topbar h1{margin:0;font-size:26px}.subtitle{color:var(--muted);font-size:14px;margin-top:4px}
.grid{display:grid;gap:18px}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 8px 24px rgba(15,23,42,.05)}
.metric{font-size:34px;font-weight:800;margin-top:6px;color:var(--blue)}
.card h3{margin-top:0}.muted{color:var(--muted)}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:720px}.table th,.table td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}.table th{background:#f8fafc}
.badge{display:inline-block;padding:5px 9px;border-radius:999px;background:#eaf7ef;color:#12703f;font-size:12px;font-weight:700}
.guru-binaan-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}.guru-binaan-number{width:34px;height:34px;border-radius:10px;background:#eef4fb;display:grid;place-items:center;font-weight:800;color:var(--blue)}.guru-binaan-info div,.guru-binaan-info small{color:var(--muted);margin-top:4px}
.supervisor-info-card{padding:16px;border-radius:14px;background:#f8fafc;border:1px solid var(--line)}
.empty-state{padding:18px;border:1px dashed #cbd5e1;border-radius:12px;color:var(--muted);text-align:center}
.status{margin-top:14px;color:var(--muted);font-size:13px}
@media(max-width:900px){.app{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.grid-3,.grid-2{grid-template-columns:1fr}.main{padding:18px}.nav{display:flex;flex-wrap:wrap;gap:6px}.nav a{margin:0}}