:root { --primary:#2563eb; --secondary:#10b981; --dark:#0f172a; --soft:#f8fafc; }
body { background: var(--soft); color:#1f2937; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.hero { background: linear-gradient(135deg, #2563eb, #10b981); color:white; border-radius:0 0 32px 32px; padding:28px 0 70px; }
.logo-mark { width:52px; height:52px; border-radius:16px; box-shadow:0 12px 30px rgba(15,23,42,.18); }
.glass-card, .stat-card, .content-card { background:rgba(255,255,255,.95); border:0; border-radius:22px; box-shadow:0 18px 45px rgba(15,23,42,.08); }
.class-card { transition:.2s ease; border:0; border-radius:22px; box-shadow:0 16px 38px rgba(15,23,42,.08); }
.class-card:hover { transform:translateY(-5px); box-shadow:0 22px 50px rgba(37,99,235,.18); }
.badge { font-weight:700; padding:.55rem .75rem; }
.dashboard-layout { min-height:100vh; display:flex; }
.dashboard-sidebar { width:270px; background:#0f172a; color:white; padding:22px; position:fixed; inset:0 auto 0 0; overflow-y:auto; }
.dashboard-sidebar .brand { display:flex; align-items:center; gap:12px; margin-bottom:22px; font-weight:800; color:white; text-decoration:none; font-size:1.1rem; }
.dashboard-sidebar .brand img { width:42px; height:42px; border-radius:12px; }
.dashboard-sidebar a:not(.brand) { display:flex; align-items:center; gap:10px; color:#cbd5e1; text-decoration:none; padding:12px 14px; border-radius:14px; margin-bottom:6px; }
.dashboard-sidebar a:hover, .dashboard-sidebar a.active { background:linear-gradient(135deg, #2563eb, #10b981); color:white; }
.dashboard-main { margin-left:270px; padding:26px; width:calc(100% - 270px); }
.topbar { background:white; border-radius:20px; box-shadow:0 12px 32px rgba(15,23,42,.07); padding:16px 20px; margin-bottom:22px; }
.table thead th { color:#64748b; text-transform:uppercase; font-size:.78rem; letter-spacing:.04em; }
.form-control, .form-select { border-radius:12px; padding:.72rem .9rem; }
.btn { border-radius:12px; font-weight:700; }
.btn-gradient { background:linear-gradient(135deg, #2563eb, #10b981); color:white; border:0; }
.btn-gradient:hover { color:white; opacity:.92; }
@media (max-width: 991px) { .dashboard-layout { display:block; } .dashboard-sidebar { position:relative; width:100%; min-height:auto; } .dashboard-main { margin-left:0; width:100%; padding:16px; } }
.siswa-table { font-size:.88rem; }
.siswa-table .btn-sm { font-size:.76rem; padding:.25rem .5rem; }
.siswa-table th, .siswa-table td { white-space:nowrap; }
.siswa-table td:nth-child(4) { white-space:normal; min-width:180px; }