:root{
  --sidebar-w: 260px;
  --brand-900:#0f2b46;
  --brand-800:#14395c;
  --brand-600:#1f6fb2;
  --brand-500:#2b8fd6;
  --radius: 14px;
}

*{ box-sizing:border-box; }
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:#f2f5f9;
  color:#1c2b3a;
  margin:0;
}
.tiny{ font-size:.72rem; }
.min-w-0{ min-width:0; }
.min-vh-75{ min-height:75vh; }

/* ---------- Auth ---------- */
.auth-bg{
  background:
    radial-gradient(900px 500px at 10% -10%, #d9e9f7 0%, transparent 60%),
    radial-gradient(800px 500px at 100% 0%, #e4f1e8 0%, transparent 55%),
    #f2f5f9;
}
.brand-badge{
  width:64px;height:64px;border-radius:20px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brand-600),var(--brand-900));
  color:#fff;font-size:1.7rem;
  box-shadow:0 12px 26px rgba(20,57,92,.28);
}
.brand-badge-sm{ width:42px;height:42px;border-radius:13px;font-size:1.1rem;box-shadow:none; }

/* ---------- Shell ---------- */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:linear-gradient(180deg,var(--brand-900),var(--brand-800));
  color:#e8f1f9; display:flex; flex-direction:column;
  position:fixed; inset:0 auto 0 0; z-index:1040;
  transition:transform .25s ease;
}
.sidebar-brand{ display:flex; align-items:center; gap:.7rem; padding:1.1rem 1rem; border-bottom:1px solid rgba(255,255,255,.09); }
.sidebar-brand .brand-text{ line-height:1.15; }
.sidebar-nav{ padding:.75rem .6rem; flex:1; overflow-y:auto; }
.sidebar-nav .nav-link{
  display:flex; align-items:center; gap:.7rem;
  color:#c7dcee; border-radius:10px; padding:.6rem .75rem;
  font-size:.9rem; font-weight:500; margin-bottom:.15rem; text-decoration:none;
}
.sidebar-nav .nav-link i{ width:1.15rem; text-align:center; font-size:1rem; }
.sidebar-nav .nav-link:hover{ background:rgba(255,255,255,.09); color:#fff; }
.sidebar-nav .nav-link.active{ background:#fff; color:var(--brand-900); font-weight:600; }
.sidebar-footer{ padding:.9rem; border-top:1px solid rgba(255,255,255,.09); }
.user-chip{ display:flex; align-items:center; gap:.6rem; }
.avatar{
  width:38px;height:38px;border-radius:50%;flex:0 0 38px;
  background:rgba(255,255,255,.16); color:#fff;
  display:grid;place-items:center;font-weight:700;
}
.sidebar-backdrop{
  display:none; position:fixed; inset:0; background:rgba(9,20,32,.5); z-index:1035;
}
.sidebar-backdrop.show{ display:block; }

.main-area{ flex:1; margin-left:var(--sidebar-w); min-width:0; display:flex; flex-direction:column; }
.topbar{
  position:sticky; top:0; z-index:1020;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid #e3e9f0;
  padding:.7rem 1rem; display:flex; align-items:center; gap:.75rem;
}
.topbar-title{ font-size:1.05rem; font-weight:700; margin:0; }
.page-content{ padding:1.25rem 1rem 3rem; }

@media (max-width: 991.98px){
  .sidebar{ transform:translateX(-100%); }
  .sidebar.open{ transform:translateX(0); }
  .main-area{ margin-left:0; }
}

/* ---------- Cards / stats ---------- */
.card{ border-radius:var(--radius); }
.stat-card{
  background:#fff; border-radius:var(--radius); padding:1rem;
  box-shadow:0 2px 10px rgba(16,42,67,.06);
  display:flex; align-items:center; gap:.85rem; height:100%;
}
.stat-icon{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:1.2rem;flex:0 0 46px;
}
.stat-value{ font-size:1.4rem; font-weight:800; line-height:1.1; }
.stat-label{ font-size:.75rem; color:#6b7c8f; }

.mini-stat{ padding:.35rem 0; }
.mini-value{ font-size:1.35rem; font-weight:800; line-height:1.1; }
.mini-label{ font-size:.72rem; color:#7b8a9b; text-transform:uppercase; letter-spacing:.04em; }

.school-logo{ width:58px;height:58px;border-radius:14px;object-fit:cover; }
.school-logo-placeholder{ display:grid;place-items:center;background:#e8eef6;color:#7b8ea3;font-size:1.5rem; }

/* ---------- Activity ---------- */
.activity-list li{ display:flex; gap:.6rem; padding:.45rem 0; border-bottom:1px dashed #edf1f6; }
.activity-list li:last-child{ border-bottom:0; }
.activity-list .dot{ width:8px;height:8px;border-radius:50%;background:var(--brand-500);margin-top:.45rem;flex:0 0 8px; }

/* ---------- Student photo ---------- */
.student-photo{ width:56px;height:56px;border-radius:11px;object-fit:cover;background:#eef1f5;border:1px solid #e2e8f0; }
.student-photo-lg{ width:160px;height:160px;border-radius:16px;object-fit:cover;background:#eef1f5;border:1px solid #e2e8f0; }
.photo-cell{ display:flex; align-items:center; gap:.7rem; }

.table > :not(caption) > * > *{ padding:.6rem .6rem; vertical-align:middle; }
.table thead th{ font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:#6b7c8f; font-weight:700; }
.form-label{ font-weight:600; font-size:.85rem; }
.btn{ border-radius:10px; }
.form-control,.form-select{ border-radius:10px; }
.progress{ border-radius:999px; background:#e9eef5; }
.badge{ font-weight:600; }