/* The hidden attribute must win even over a class that sets its own `display` (e.g. .login-panel's `display:grid`),
   otherwise toggling `.hidden = true` in app.js (login/logout) leaves the element visually shown underneath. */
[hidden] { display: none !important; }
:root { --ink:#17324d; --muted:#62778a; --paper:#f6f9fc; --line:#d9e4ec; --panel:#fff; --blue:#1768a6; --blue-dark:#104d80; --pale:#e8f3fb; --amber:#825000; --amber-bg:#fff5df; --red:#922d2d; --red-bg:#fff0f0; --green:#1f6450; --green-bg:#e6f5ef; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
button, input, textarea { font:inherit; } button { cursor:pointer; }
:focus-visible { outline:3px solid #78b7e3; outline-offset:2px; }
h1, h2, p { margin-top:0; } h1 { font-size:28px; letter-spacing:-.03em; margin:0; } h2 { font-size:20px; margin:0; }
.topbar { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; padding:24px clamp(16px,4vw,48px); background:#193d5c; color:#fff; }
.kicker { color:#9fcdee; font-size:13px; font-weight:700; margin:0 0 4px; }
.session { display:flex; gap:10px; align-items:center; color:#dbe8f3; font-size:14px; } .session .button.quiet { color:#fff; }
.main { max-width:1200px; margin:0 auto; padding:28px clamp(16px,4vw,48px) 64px; }
.login-panel { display:grid; grid-template-columns:1.2fr 1fr; gap:40px; background:var(--panel); border:1px solid var(--line); border-top:4px solid var(--blue); padding:32px; max-width:820px; }
.login-panel p { color:var(--muted); }
.form { display:grid; gap:10px; align-content:start; }
label { font-weight:650; font-size:14px; }
input, textarea, select { width:100%; padding:9px 11px; color:var(--ink); border:1px solid #b9cad7; border-radius:6px; background:#fff; }
td select { width:auto; padding:6px 8px; }
.panel h3 { font-size:15px; margin:18px 0 8px; }
textarea { font-family:ui-monospace, Consolas, monospace; font-size:13px; }
.button { min-height:38px; padding:7px 14px; border:1px solid #aabfce; border-radius:6px; color:#20435d; background:#fff; font-weight:650; }
.button:hover { background:#edf5fa; } .button.primary { color:#fff; background:var(--blue); border-color:var(--blue); } .button.primary:hover { background:var(--blue-dark); }
.button.danger { color:var(--red); border-color:#e2b4b4; } .button.quiet { min-height:auto; padding:4px 8px; border-color:transparent; background:transparent; }
.button[disabled] { opacity:.55; cursor:not-allowed; }
.notice { margin-bottom:18px; padding:11px 14px; background:var(--pale); border-left:3px solid var(--blue); }
.notice.error { border-color:var(--red); background:var(--red-bg); color:#7b2b2b; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:20px; margin-bottom:20px; }
.section-title { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
.section-title p { color:var(--muted); font-size:14px; margin:0; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:9px 10px; border-bottom:1px solid #e8eef2; vertical-align:top; }
th { color:var(--muted); font-size:12px; font-weight:700; }
td small { display:block; color:var(--muted); font-family:ui-monospace, Consolas, monospace; font-size:11px; overflow-wrap:anywhere; }
.tag { display:inline-block; padding:2px 8px; border-radius:99px; font-size:12px; font-weight:700; color:#1d5b7c; background:var(--pale); }
.tag.ok { color:var(--green); background:var(--green-bg); } .tag.warning { color:var(--amber); background:var(--amber-bg); } .tag.danger { color:var(--red); background:var(--red-bg); }
.count { display:inline-block; min-width:22px; padding:0 7px; border-radius:99px; background:#e9aa4f; color:#422700; font-size:13px; text-align:center; vertical-align:middle; }
.facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0; }
.facts dt { color:var(--muted); font-size:12px; } .facts dd { margin:2px 0 0; font-size:18px; font-weight:650; overflow-wrap:anywhere; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.errors { margin:0; padding-left:20px; color:var(--red); font-size:14px; }
.inline-field { display:flex; align-items:center; gap:8px; } .inline-field input { width:160px; }
.stack { display:grid; gap:10px; }
.record { border:1px solid var(--line); border-radius:8px; padding:14px 16px; }
.record-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.record h3 { margin:0; font-size:16px; } .record p { margin:4px 0 0; color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
.empty { border:1px dashed #b9cad7; color:var(--muted); padding:18px; text-align:center; }
.audit-list { display:grid; font-size:13px; }
.audit-row { display:grid; grid-template-columns:170px 140px minmax(0,1fr) minmax(0,2fr); gap:12px; padding:8px 4px; border-bottom:1px solid #e8eef2; }
.audit-row code { font-family:ui-monospace, Consolas, monospace; overflow-wrap:anywhere; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width:760px) { .topbar { flex-direction:column; align-items:flex-start; } .login-panel { grid-template-columns:1fr; gap:20px; padding:20px; } .facts { grid-template-columns:1fr 1fr; } .audit-row { grid-template-columns:1fr; gap:2px; } }

.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.inline-form input{flex:1 1 200px}
.token{display:block;word-break:break-all;user-select:all}
.profile-rule{display:inline-flex;align-items:center;gap:2px;margin:0 4px 4px 0}
td .profile-rule + select, td select + select{margin-left:6px}