:root {
  --bg: #f5f7fb;
  --sidebar: #0f172a;
  --card-radius: 20px;
}
body { background: var(--bg); font-family: Inter, Arial, sans-serif; }
#wrapper { min-height: 100vh; }
.sidebar {
  width: 270px; background: linear-gradient(180deg, #0f172a, #172554); color: #fff;
  min-height: 100vh; display: flex; flex-direction: column; position: sticky; top: 0;
}
.sidebar .nav-link { color: rgba(255,255,255,.85); border-radius: 12px; padding: .8rem 1rem; }
.sidebar .nav-link:hover, .sidebar .nav-link:focus { background: rgba(255,255,255,.08); color: #fff; }
.topbar { background: rgba(255,255,255,.75); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(15,23,42,.06); }
.card, .login-card { border-radius: var(--card-radius); }
.metric-card { border: 0; box-shadow: 0 8px 30px rgba(15,23,42,.06); }
.metric-label { color: #64748b; font-size: .95rem; margin-bottom: .5rem; }
.metric-value { font-size: 1.6rem; font-weight: 700; color: #0f172a; }
.login-card { width: min(1080px, 92vw); overflow: hidden; background: #fff; }
.content .card { box-shadow: 0 12px 32px rgba(15,23,42,.06); }
.table thead th { color: #64748b; font-weight: 600; }
.progress { height: 12px; border-radius: 999px; }
.progress-bar { border-radius: 999px; }
@media (max-width: 992px) {
  .sidebar { width: 90px; }
  .sidebar .brand .small, .sidebar .nav-link { font-size: 0; }
  .sidebar .nav-link i { font-size: 1.2rem; margin: 0 !important; }
  .sidebar .brand .h5 { font-size: 1rem; }
}
@media (max-width: 768px) {
  .sidebar { display: none; }
  .topbar { position: sticky; top: 0; z-index: 10; }
}