:root { color-scheme: light dark; }
body { min-width: 320px; background: var(--bs-tertiary-bg); }
.app-header { background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); padding: .75rem 0; }
.brand { color: var(--bs-emphasis-color); font-size: 1.15rem; font-weight: 700; text-decoration: none; }
.app-header .nav-link { color: var(--bs-body-color); padding: .5rem .65rem; border: 0; background: transparent; min-height: 44px; display: inline-flex; align-items: center; }
.app-header .nav-link:hover, .app-header .nav-link:focus-visible { color: var(--bs-primary); text-decoration: underline; }
.surface { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: 1rem; }
.empty-state { background: var(--bs-tertiary-bg); border-radius: .75rem; padding: 1rem; }
.dashboard-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .dashboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 390px) { .app-header .container-xl { gap: .25rem !important; } .app-header .nav-link { padding-inline: .5rem; } }