:root{
  --paper:#f4f6f8;--panel:#e9edf1;--white:#ffffff;--ink:#1f2933;--muted:#64748b;--line:#e2e8f0;
  --accent:#3a6ea5;--accent-ink:#fff;--tint:#e7eef7;--danger:#c0503f;--ok:#2f8f5b;--warn:#c88a1a;
  --r:9px;--btn-r:8px;--shadow:0 1px 3px rgba(15,23,42,.08);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--paper);font-size:14px;color-scheme:light}
@media(prefers-color-scheme:dark){:root{
  --paper:#0f1216;--panel:#171b21;--white:#161a20;--ink:#e6eaef;--muted:#8b95a1;--line:#2a313a;
  --accent:#6ea8fe;--accent-ink:#0f1216;--tint:#1e2a3b;--danger:#e08a7c;--ok:#5bbd86;--warn:#e0b85a;
  --shadow:0 2px 10px rgba(0,0,0,.4);color-scheme:dark}}
*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}a{color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.sidebar{padding:28px 18px 18px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.brand{font-weight:800;font-size:28px;letter-spacing:-.02em;text-decoration:none;line-height:1}
.strapline{font-size:11px;color:var(--muted);margin:8px 0 28px}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;background:none;text-align:left;border-radius:var(--btn-r);margin:2px 0;font-size:13px;font-weight:600;color:var(--ink)}
.nav-item:hover{background:var(--tint)}
.nav-item.active{background:var(--accent);color:var(--accent-ink)}
.nav-item .nav-count{margin-left:auto;font-size:11px;opacity:.7;font-variant-numeric:tabular-nums}
.nav-symbol{width:18px;text-align:center;opacity:.8}
.sidebar-bottom{margin-top:auto;padding-top:28px;font-size:11px;color:var(--muted)}
.sidebar-bottom a{display:block;margin-top:12px;text-decoration:none;color:var(--accent)}
.local-dot{display:inline-block;width:6px;height:6px;background:var(--ok);border-radius:50%;margin-right:6px}

.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 32px;gap:15px}
.topbar>span{font-size:12px;color:var(--muted)}
.top-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.primary,.quiet,.danger{border-radius:var(--btn-r);padding:9px 16px;border:1px solid transparent;font-size:12px;font-weight:700}
.primary{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow)}.primary:hover{filter:brightness(.95)}
.quiet{background:transparent;color:var(--muted)}.quiet:hover{background:var(--tint);color:var(--ink)}
.danger{background:transparent;color:var(--danger);border-color:var(--line);margin-right:auto}.danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.danger[data-armed]{background:var(--danger);color:#fff;border-color:var(--danger)}

.workspace{max-width:1140px;padding:40px 32px 24px;margin:auto}
.page-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.eyebrow{font-size:10px;letter-spacing:.16em;color:var(--accent);font-weight:700;margin:0 0 10px}
h1{font-size:34px;line-height:1.1;margin:0;letter-spacing:-.02em}h2{font-size:22px;margin:0;letter-spacing:-.01em}h3{font-size:13px;margin:0;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.description{color:var(--muted);font-size:13px;line-height:1.6;margin:10px 0 0;max-width:620px}
.count-badge{border:1px solid var(--line);border-radius:50%;width:46px;height:46px;display:grid;place-items:center;color:var(--muted);flex-shrink:0;font-variant-numeric:tabular-nums}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--line);padding:18px 0 14px;margin:24px 0 4px}
.search{display:flex;align-items:center;gap:8px;flex:1}.search span{font-size:20px;color:var(--muted)}.search input{width:100%;border:0;background:none;padding:6px 0;font-size:13px}
.view-summary{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px;margin:12px 0;width:100%;text-align:left;display:block;cursor:pointer}
.card:hover{border-color:var(--accent)}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card-title{font-size:16px;font-weight:700}
.card-sub{color:var(--muted);font-size:12px;margin-top:6px;line-height:1.6;overflow-wrap:anywhere}
.card-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;align-items:center}
.pill{border:1px solid var(--line);border-radius:999px;padding:3px 9px;font-size:10px;font-weight:600;color:var(--muted);white-space:nowrap}
.pill.crit-low{color:var(--ok);border-color:var(--ok)}.pill.crit-medium{color:var(--accent);border-color:var(--accent)}
.pill.crit-high{color:var(--warn);border-color:var(--warn)}.pill.crit-critical{color:#fff;background:var(--danger);border-color:var(--danger)}
.pill.strong{background:var(--tint);color:var(--accent);border:0}
.pill.ghost{border-style:dashed}
.cost{font-variant-numeric:tabular-nums;font-weight:700}
.empty{padding:56px 20px;text-align:center;color:var(--muted)}.empty h2{font-size:22px;color:var(--ink);margin-bottom:10px}.empty p{max-width:380px;margin:0 auto 18px;line-height:1.7}
.workspace-footer{display:flex;justify-content:space-between;margin-top:48px;padding-top:18px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}

table.audit{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px}
table.audit td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.audit .at{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.tag-act{font-weight:700;text-transform:capitalize}.act-create{color:var(--ok)}.act-update{color:var(--accent)}.act-delete{color:var(--danger)}

dialog{width:min(820px,calc(100vw - 28px));max-height:92vh;border:0;border-radius:calc(var(--r) + 5px);padding:0;background:var(--white);color:var(--ink);box-shadow:0 30px 90px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(10,14,20,.55);backdrop-filter:blur(3px)}
.dialog-header{padding:22px 26px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;position:sticky;top:0;background:var(--white);z-index:2}
.dialog-body{padding:22px 26px}
.dialog-footer{padding:16px 26px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--paper);position:sticky;bottom:0}
.icon-button{background:none;border:0;font-size:24px;line-height:1;width:34px;height:34px;border-radius:6px;color:var(--muted)}.icon-button:hover{background:var(--tint)}
.field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;margin-bottom:16px}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);background:var(--white);border-radius:var(--btn-r);padding:9px 11px;font-weight:400;line-height:1.5}
.field textarea{resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.form-grid.three{grid-template-columns:1fr 1fr 1fr}
.optional{font-size:10px;color:var(--muted);font-weight:400}
.section{border-top:1px solid var(--line);margin-top:22px;padding-top:20px}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px}
.field-hint{font-size:11px;color:var(--muted);line-height:1.6;margin:-4px 0 12px}
.text-button{border:1px dashed var(--line);background:none;color:var(--accent);padding:8px 12px;border-radius:var(--btn-r);font-size:12px;font-weight:600}
.text-button:hover{border-color:var(--accent);background:var(--tint)}
.item-row{display:grid;gap:8px;align-items:start;border:1px solid var(--line);border-radius:var(--btn-r);padding:12px;margin-bottom:10px;background:var(--paper)}
.item-row .row-top{display:flex;gap:8px;align-items:center}
.item-row input,.item-row select,.item-row textarea{border:1px solid var(--line);background:var(--white);border-radius:6px;padding:7px 9px;font-size:12px;width:100%}
.item-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px}
.item-remove{border:0;background:none;color:var(--danger);font-size:18px;width:30px;flex-shrink:0}
.choice-list{display:flex;flex-wrap:wrap;gap:7px}
.choice{display:flex;gap:6px;align-items:center;font-size:12px;border:1px solid var(--line);border-radius:var(--btn-r);padding:7px 10px;cursor:pointer;overflow-wrap:anywhere}
.choice:has(input:checked){background:var(--tint);border-color:var(--accent)}.choice input{accent-color:var(--accent)}
.derived{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.derived a,.derived span.none{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;text-decoration:none;color:var(--accent)}
.derived span.none{color:var(--muted);border-style:dashed}
.cost-total{font-size:13px;font-weight:700;margin-top:10px;font-variant-numeric:tabular-nums}
.form-error{color:var(--danger);font-size:12px;background:color-mix(in srgb,var(--danger) 10%,transparent);border-radius:var(--btn-r);padding:11px;line-height:1.5}
.form-error:empty{display:none}
.small{font-size:11px;color:var(--muted)}

#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);padding:12px 20px;background:var(--ink);color:var(--paper);border-radius:999px;box-shadow:var(--shadow);z-index:50;font-size:13px;max-width:90vw}

.auth-panel{min-height:100vh;display:grid;place-items:center;padding:28px}
.auth-card{width:min(100%,440px)}.auth-card .brand{display:block;margin-bottom:48px;font-size:34px}
.auth-card h1{font-size:38px;margin-bottom:8px}.auth-card .description{font-size:15px}.auth-card #gbtn{margin-top:28px}

.api-key-row{border-bottom:1px solid var(--line);padding:14px 0}.api-key-row p{font-size:12px;color:var(--muted);overflow-wrap:anywhere;margin:4px 0}
#settings-dialog pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--paper);padding:10px;border-radius:6px;font-size:12px}
#key-secret{font-family:monospace}#key-secret-panel{margin-top:16px;padding:14px;background:var(--tint);border-radius:var(--btn-r)}

@media(max-width:820px){.shell{display:block}.sidebar{position:relative;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}#views{display:flex;overflow:auto;gap:4px;width:100%}.nav-item{width:auto;white-space:nowrap}.nav-count{display:none}.sidebar-bottom{display:none}.workspace{padding:28px 18px}.topbar{padding:0 18px;height:60px}.form-grid,.form-grid.three,.item-grid{grid-template-columns:1fr}h1{font-size:28px}}
