:root { color-scheme: light; --ink:#17212b; --muted:#667786; --line:#d8e0e6; --panel:#fff; --bg:#f4f7f9; --accent:#0b6477; --accent-light:#dff2f5; --match:#fff0b3; --app-cursor:url("cursor.svg") 3 2, auto; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif; cursor:var(--app-cursor); }
header { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; padding:28px clamp(18px,4vw,56px); background:#12343b; color:#fff; } .header-copy { min-width:0; } .header-side { display:flex; flex:0 0 auto; flex-direction:column; align-items:flex-end; gap:10px; } .branding-image { display:block; width:min(320px,28vw); height:auto; max-height:108px; object-fit:contain; border-radius:10px; animation:branding-enter .7s ease-out both; } @keyframes branding-enter { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
.deployment-badge { padding:5px 9px; border:1px solid #6caab2; border-radius:999px; color:#dff2f5; font-size:11px; font-weight:700; letter-spacing:.04em; text-align:right; }
.eyebrow { margin:0 0 4px; text-transform:uppercase; letter-spacing:.12em; font-size:11px; color:#9bd9df; font-weight:700; }
h1 { margin:0; font-size:28px; letter-spacing:-.02em; } h2 { margin:0; font-size:16px; }
.subtitle { margin:5px 0 0; color:#c9e4e7; } .status { padding:8px 12px; border:1px solid #5f9298; border-radius:6px; white-space:nowrap; font-size:12px; }
main { max-width:1500px; margin:22px auto; padding:0 18px 40px; display:grid; gap:16px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:0 2px 8px #1c34400d; padding:16px; }
.filter-grid { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:12px; } label { display:grid; gap:5px; color:var(--muted); font-size:12px; font-weight:650; } label.wide { grid-column:span 2; }
input,select,button { font:inherit; } input,select { min-height:36px; border:1px solid #b9c8d1; border-radius:5px; padding:7px 9px; color:var(--ink); background:#fff; } input:focus,select:focus { outline:2px solid #8fd0d7; border-color:var(--accent); }
.actions,.context-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:14px; } button { border:1px solid #b9c8d1; background:#fff; color:var(--ink); border-radius:5px; padding:8px 12px; cursor:pointer; } button:hover { border-color:var(--accent); } button:disabled { opacity:.45; cursor:not-allowed; } button.primary { background:var(--accent); color:#fff; border-color:var(--accent); } .summary { color:var(--muted); margin-left:4px; }
.section-title { display:flex; justify-content:space-between; gap:15px; align-items:baseline; margin-bottom:10px; } .section-title span { color:var(--muted); font-size:12px; }
.table-wrap { overflow:auto; max-height:430px; border:1px solid var(--line); border-radius:5px; } table { width:100%; border-collapse:collapse; min-width:900px; } th,td { text-align:left; padding:7px 9px; border-bottom:1px solid #e8edf0; vertical-align:top; } th { position:sticky; top:0; background:#eef5f6; color:#3a5961; font-size:12px; z-index:1; } td { font-size:13px; } tbody tr { cursor:pointer; } tbody tr:hover { background:#f2fafb; } tbody tr.selected { background:var(--match); } td.message { min-width:330px; max-width:580px; white-space:normal; }
.sort-button { width:100%; padding:0; border:0; border-radius:3px; background:transparent; color:inherit; font-size:inherit; font-weight:inherit; text-align:left; } .sort-button:hover { background:#dfecef; color:var(--accent); } .sort-button:focus-visible { outline:2px solid #8fd0d7; outline-offset:2px; }
.detail pre { white-space:pre-wrap; max-height:220px; overflow:auto; background:#f6f8f9; padding:12px; border-radius:5px; margin:10px 0 0; font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; } .context-panel { border-top:3px solid var(--accent); }
.empty { padding:22px; color:var(--muted); text-align:center; } .error { color:#9b2c2c; }
@media(max-width:900px){ .filter-grid{grid-template-columns:repeat(2,minmax(140px,1fr));} label.wide{grid-column:span 2;} header{display:block;} .header-side{align-items:flex-start;margin-top:16px;} .branding-image{width:min(360px,82vw);max-height:122px;} .status{display:inline-block;} }
@media(prefers-reduced-motion:reduce){ .branding-image{animation:none;} }