:root {
    --ink: #1b2430;
    --muted: #5b6775;
    --line: #d9dee5;
    --bg: #f4f6f8;
    --side: #17202a;
    --accent: #2f5d8a;
}
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--ink); font: 13px/1.45 "Segoe UI", system-ui, sans-serif; }
.app-shell { display: flex; min-height: 100%; }
.app-sidebar { width: 230px; background: var(--side); color: #e8edf2; display: flex; flex-direction: column; }
.brand { padding: 18px 16px 10px; border-bottom: 1px solid #2a3644; }
.brand-kicker { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #9aa8b6; }
.brand-title { font-size: 16px; font-weight: 650; }
.side-nav { padding: 12px 0; flex: 1; }
.side-nav a { display: block; color: #d5dde5; text-decoration: none; padding: 7px 16px; }
.side-nav a.active, .side-nav a:hover { background: #243140; color: #fff; }
.nav-label { padding: 12px 16px 4px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #8b98a6; }
.sidebar-logout { padding: 12px 16px 16px; border-top: 1px solid #2a3644; }
.sidebar-logout button { background: transparent; color: #d5dde5; border: 1px solid #4a5868; width: 100%; padding: 6px; }
.sidebar-user { margin-top: 8px; font-size: 11px; color: #9aa8b6; word-break: break-all; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-header { padding: 16px 20px 8px; border-bottom: 1px solid var(--line); background: #fff; }
.app-header h1 { margin: 0; font-size: 18px; font-weight: 650; }
.header-note { color: var(--muted); font-size: 12px; }
.flash { margin: 12px 20px 0; background: #e8f0e9; border: 1px solid #c5d6c7; padding: 8px 12px; }
.page { padding: 16px 20px 28px; flex: 1; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.metric { background: #fff; border: 1px solid var(--line); padding: 12px 14px; }
.metric .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.metric .value { font-size: 22px; font-weight: 650; }
.panel { background: #fff; border: 1px solid var(--line); padding: 14px; margin-bottom: 14px; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.filters label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.filters input, .filters select { width: 100%; border: 1px solid var(--line); padding: 6px 8px; background: #fff; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.btn-row button, .btn-row a, .ms-btn { background: var(--accent); color: #fff; border: 0; padding: 7px 12px; text-decoration: none; font-size: 13px; display: inline-block; }
.btn-row .secondary, .ms-btn.secondary { background: #fff; color: var(--ink); border: 1px solid var(--line); }
table.data { width: 100%; border-collapse: collapse; background: #fff; }
table.data th, table.data td { border-bottom: 1px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: top; }
table.data th { font-size: 11px; text-transform: uppercase; color: var(--muted); background: #f8fafb; }
.status-pill { display: inline-block; padding: 2px 8px; border: 1px solid var(--line); background: #fff; font-size: 11px; }
.status-pill.pass { background: #e8f0e9; }
.status-pill.warning { background: #f7f1e1; }
.status-pill.fail { background: #f6e6e6; }
.guest-body { display: grid; place-items: center; }
.guest-card { width: min(420px, 92vw); background: #fff; border: 1px solid var(--line); padding: 28px; }
.guest-copy { color: var(--muted); }
.denied-title { font-size: 20px; font-weight: 650; }
.chat-thread { background: #fff; border: 1px solid var(--line); }
.chat-item { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.chat-item .meta { color: var(--muted); font-size: 12px; }
.drawer { position: fixed; top: 0; right: 0; width: min(480px, 100%); height: 100%; background: #fff; border-left: 1px solid var(--line); overflow: auto; padding: 16px; display: none; z-index: 20; }
.drawer.open { display: block; }
pre.raw { background: #11181f; color: #dbe4ee; padding: 10px; font-size: 11px; overflow: auto; max-height: 320px; }
@media (max-width: 900px) {
    .app-shell { flex-direction: column; }
    .app-sidebar { width: 100%; }
}