:root { --bg: #f6f8fb; --card-r: 14px; --shadow: 0 12px 24px rgba(0,0,0,0.06); --text: #212529; --muted: #6c757d; --primary: #0d6efd; }
[data-theme="dark"] { --bg: #0f1115; --text: #e9ecef; --muted: #adb5bd; --shadow: 0 12px 24px rgba(0,0,0,0.3); }
html, body { background: var(--bg); color: var(--text); }
.card { border: 0; border-radius: var(--card-r); box-shadow: var(--shadow); }
.card { transition: box-shadow .2s ease, transform .2s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,0.12); }
.navbar-dark { background: linear-gradient(90deg, #ffffff 0%, #eaf3ff 20%, #8ec5ff 60%, #5fa8ff 100%); }
.kpi { display:flex; align-items:center; gap:12px; }
.kpi .icon { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; }
.list-group-item-action { border:0; }
.sidebar-sticky { position: sticky; top: 0; }
@media (max-width: 991px){ #app-sidebar { display:none; } }
/* Admin */
#admin-sidebar { background:#111; }
#admin-sidebar { min-height: 100vh; display: flex; flex-direction: column; }
#admin-sidebar .list-group-item { background: transparent; color:#cfd3d7; }
#admin-sidebar .list-group-item:hover, #admin-sidebar .list-group-item.active { color:#fff; background:#1e1e1e; }
/* Branding */
.brand-logo { height: 28px; width: auto; margin-right: 8px; vertical-align: middle; }
/* Tables */
.table-hover tbody tr:hover { background-color: rgba(13,110,253,0.06); }
.table thead th a { color: inherit; }
.table thead th a:hover { text-decoration: underline; }
.empty-state { border: 2px dashed rgba(0,0,0,0.1); border-radius: 12px; padding: 24px; text-align: center; color: var(--muted); }
.chart-card { padding: 12px; border-radius: 12px; }
.loading-skeleton { background: linear-gradient(90deg, rgba(0,0,0,0.04), rgba(0,0,0,0.08), rgba(0,0,0,0.04)); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 8px; }
@keyframes shimmer { 0%{ background-position: -200% 0;} 100%{ background-position: 200% 0;} }
.compact-form .form-floating { margin-bottom: .75rem; }
.compact-form .form-control, .compact-form .form-select, .compact-form textarea { border-radius: 10px; }
.compact-form .form-control, .compact-form .form-select { height: 48px; padding: .75rem 1rem; }
.compact-form .form-floating>label { color: var(--muted); }
.compact-form .btn { height: 44px; padding: .5rem 1rem; }
.filter-bar .form-label { font-size: .875rem; color: var(--muted); margin-bottom: .25rem; }
.filter-bar .form-select, .filter-bar .form-control { border-radius: 9999px; height: 40px; padding: .35rem .9rem; border: 1px solid rgba(0,0,0,0.12); }
.filter-bar .btn { border-radius: 9999px; height: 40px; padding: .35rem .9rem; }
.filter-bar .form-control[type="month"] { padding-right: 2.2rem; }
@media (max-width: 576px){
  .container { padding-left: 12px; padding-right: 12px; }
  .login-card { border-radius: 12px; }
  .login-card .brand img { height: 36px; }
  .logo-frame { padding: 8px 10px; }
  canvas { max-height: 260px; }
}
@media (max-width: 991px){
  #admin-sidebar { position: fixed; left: 0; top: 56px; height: calc(100vh - 56px); width: 80%; max-width: 320px; z-index: 1040; display: none; }
  #admin-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1039; display: none; }
}