:root { --app-navy: #101c35; --app-blue: #315efb; --app-bg: #f4f6fa; }
body { background: var(--app-bg); color: #172033; min-height: 100vh; }
.app-navbar { background: linear-gradient(110deg, var(--app-navy), #1c3768); box-shadow: 0 4px 20px rgb(16 28 53 / 18%); }
.navbar-brand { letter-spacing: -.02em; }
.card { border-radius: .9rem; }
.metric-card { min-height: 128px; }
.metric-label { color: #667085; font-size: .9rem; }
.metric-value { font-size: 2.3rem; font-weight: 700; letter-spacing: -.04em; margin-top: .4rem; }
.login-shell { min-height: calc(100vh - 7rem); display: grid; place-items: center; }
.login-card { width: min(100%, 440px); }
.brand-mark { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--app-blue), #22a8f0); color: #fff; font-weight: 800; box-shadow: 0 12px 26px rgb(49 94 251 / 28%); }
.table > :not(caption) > * > * { padding: .9rem 1rem; }
.table thead th { color: #667085; font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; background: #f9fafb; white-space: nowrap; }
.btn-primary { --bs-btn-bg: var(--app-blue); --bs-btn-border-color: var(--app-blue); }
footer { opacity: .8; }
@media (max-width: 767.98px) { main.container-fluid { padding-inline: 1rem !important; } .metric-value { font-size: 1.9rem; } }