:root { --sb-w: 240px; --brand: #0d6efd; }
body { background: #f4f6f9; }

.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sb-w); background: #1f2733; color: #cdd3dc;
  display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0;
}
.sidebar .brand { font-size: 1.15rem; font-weight: 700; color: #fff; padding: 1.1rem 1.1rem .75rem; }
.sidebar .brand .bi { color: #4dabf7; }
.sidebar .nav { padding: .5rem; gap: 2px; flex: 1; }
.sidebar .nav-link { color: #cdd3dc; border-radius: 8px; padding: .55rem .8rem; display: flex; align-items: center; gap: .6rem; font-size: .95rem; }
.sidebar .nav-link:hover { background: #2b3543; color: #fff; }
.sidebar .nav-link.active { background: var(--brand); color: #fff; }
.sidebar-footer { padding: .9rem; border-top: 1px solid #2b3543; }
.sidebar-footer .user { font-size: .9rem; margin-bottom: .5rem; display: flex; justify-content: space-between; align-items: center; }
.sidebar-footer .role { font-size: .68rem; text-transform: uppercase; color: #8b95a3; letter-spacing: .5px; }

.content { margin-left: var(--sb-w); flex: 1; min-width: 0; }
.page-title { font-weight: 700; }

.card { border: none; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.stat-card .num { font-size: 2rem; font-weight: 700; line-height: 1; }
.stat-card .lbl { color: #6b7280; font-size: .8rem; text-transform: uppercase; letter-spacing: .4px; margin-bottom: .35rem; }

.photo-thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; cursor: pointer; background: #e9ecef; }
.badge-soft { background: #eef2ff; color: #4338ca; font-weight: 600; }
.login-wrap { max-width: 400px; margin: 8vh auto; }
.table > :not(caption) > * > * { padding: .6rem .75rem; }
.kv-key { color: #6b7280; font-weight: 600; white-space: nowrap; }

@media (max-width: 768px) {
  .sidebar { position: static; width: 100%; flex-direction: column; }
  .content { margin-left: 0; }
}