* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: #0f1115; color: #e8eaed; }
a { color: #7cb7ff; text-decoration: none; }
.app-body { min-height: 100vh; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 220px; background: #161922; padding: 1.25rem; border-right: 1px solid #252a36; }
.brand { font-weight: 700; margin-bottom: 1rem; }
.nav { display: flex; flex-direction: column; gap: 0.35rem; }
.nav-link { padding: 0.4rem 0.5rem; border-radius: 6px; }
.nav-link:hover { background: #252a36; }
.nav-logout { margin-top: 1rem; }
.main { flex: 1; padding: 1.5rem 2rem; max-width: 1200px; }
.page-head h1 { margin: 0 0 0.25rem; }
.muted { color: #9aa0a6; font-size: 0.9rem; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.5rem 0; }
.stat-card { background: #161922; border: 1px solid #252a36; border-radius: 10px; padding: 1rem; }
.stat-label { font-size: 0.85rem; color: #9aa0a6; }
.stat-value { font-size: 1.75rem; font-weight: 600; margin-top: 0.35rem; }
.charts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.chart-wide { grid-column: span 2; }
.chart-box { background: #161922; border: 1px solid #252a36; border-radius: 10px; padding: 1rem; }
.chart-box h2 { margin: 0 0 0.75rem; font-size: 1rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th, .data-table td { border-bottom: 1px solid #252a36; padding: 0.5rem 0.35rem; text-align: left; }
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.filters input { background: #161922; border: 1px solid #252a36; color: #e8eaed; padding: 0.35rem 0.5rem; border-radius: 6px; }
.btn { cursor: pointer; border: none; border-radius: 6px; padding: 0.45rem 0.85rem; font-size: 0.9rem; }
.btn-primary { background: #3b82f6; color: #fff; }
.btn-ghost { background: transparent; color: #e8eaed; border: 1px solid #252a36; }
.btn-sm { padding: 0.25rem 0.55rem; font-size: 0.8rem; }
.btn-danger { background: #b42318; color: #fff; }
.pager { margin-top: 1rem; display: flex; gap: 0.35rem; flex-wrap: wrap; }
.pager-cur { padding: 0.2rem 0.5rem; background: #252a36; border-radius: 4px; }
.pager-link { padding: 0.2rem 0.5rem; border-radius: 4px; background: #161922; border: 1px solid #252a36; }
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f1115; }
.login-card { background: #161922; border: 1px solid #252a36; padding: 2rem; border-radius: 12px; width: 360px; max-width: 92vw; }
.login-card h1 { margin-top: 0; }
.stack { display: flex; flex-direction: column; gap: 0.75rem; }
.stack label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.stack input { background: #0f1115; border: 1px solid #252a36; color: #e8eaed; padding: 0.45rem; border-radius: 6px; }
.alert { padding: 0.6rem 0.75rem; border-radius: 8px; margin-bottom: 1rem; }
.alert-error { background: #3b1a18; border: 1px solid #842016; }
.alert-ok { background: #143b1f; border: 1px solid #1f6b32; }
.config-section { margin-bottom: 2rem; }
.row-form { margin-bottom: 0.75rem; }
.badge { display: inline-block; background: #252a36; padding: 0.15rem 0.45rem; border-radius: 4px; font-size: 0.8rem; margin-right: 0.5rem; }
.form-sep { border: none; border-top: 1px solid #252a36; margin: 1rem 0; }
.chk { flex-direction: row !important; align-items: center; gap: 0.35rem; }
.inline { display: inline; }
.inline.danger { margin-left: 0.5rem; }