/* Token layer: the only place raw colours live. Warm paper, charcoal ink, butter-yellow highlight. */
:root {
  color-scheme: light;
  --paper:#FEFDF6; --paper-2:#FBF9EA; --paper-3:#F8F3DA; --white:#fff;
  --ink:#2D3539; --ink-2:#5C666B; --ink-inverse:#FEFDF6;
  --hairline:#E7DFAE; --hairline-soft:#F0EAC4;
  --yellow:#FFE584; --yellow-soft:#FFF1B8; --yellow-deep:#8A6A00;
  --ok-bg:#E3F1E4; --ok-text:#2F7A4A; --bad-bg:#FBE3DE; --bad-text:#A6392B; --info-bg:#E5ECEF; --info-text:#43535A;
  --bg-window:var(--paper); --bg-sidebar:var(--paper-2); --bg-panel:var(--white); --bg-hover:var(--paper-2); --bg-selected:var(--paper-3);
  --text-primary:var(--ink); --text-secondary:var(--ink-2); --border-subtle:var(--hairline); --row-line:var(--hairline-soft);
  --btn-bg:var(--ink); --btn-text:var(--ink-inverse); --focus:var(--ink); --selection:var(--yellow);
  --chart-line:var(--ink); --chart-line-2:var(--ink-2); --chart-area:var(--yellow); --chart-area-opacity:.7;
  --pill-bg:var(--info-bg); --pill-text:var(--info-text); --scrim:rgba(45,53,57,.4); --art-ink:#000600;
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg-window:#14181A; --bg-sidebar:#1A1F21; --bg-panel:#1A1F21; --bg-hover:#21282B; --bg-selected:#2A3236;
  --text-primary:#F5F2E1; --text-secondary:#A8B1B5; --border-subtle:#3A4347; --row-line:#2A3236;
  --btn-bg:var(--yellow); --btn-text:#2D3539; --focus:var(--yellow); --selection:#6B5A1C;
  --chart-line:#F5F2E1; --chart-line-2:#A8B1B5; --chart-area-opacity:.28;
  --pill-bg:#2A3236; --pill-text:#C5CED2; --ok-bg:#1F3A2A; --ok-text:#8FD6A4; --bad-bg:#472620; --bad-text:#F2A89A;
  --yellow-soft:#4A3F14; --yellow-deep:#FFE584;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--bg-window); color:var(--text-primary); font:14px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif; font-feature-settings:"cv11","ss03","cv02"; -webkit-font-smoothing:antialiased; }
h1 { font-size:36px; line-height:1.1; margin:0; font-weight:300; letter-spacing:-.02em; }
h2 { font-size:15px; margin:0; font-weight:600; }
.muted { color:var(--text-secondary); margin:2px 0 0; }
.num { font-variant-numeric:tabular-nums; }
.serif, .page-head .muted, .product { font-family:"Libre Baskerville",Baskerville,"Iowan Old Style",Georgia,serif; font-style:italic; }
* { scrollbar-color:var(--border-subtle) transparent; }
::selection { background:var(--selection); color:var(--text-primary); }
input { caret-color:var(--text-primary); }
::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-thumb { background:var(--border-subtle); border-radius:5px; border:2px solid transparent; background-clip:padding-box; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
svg { fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
[hidden] { display:none !important; }
button { font:inherit; color:inherit; cursor:pointer; }

/* Shell */
.shell { display:grid; grid-template-columns:280px 1fr; min-height:100vh; }
.sidebar { background:var(--bg-sidebar); border-right:1px solid var(--border-subtle); padding:20px 12px 16px; display:flex; flex-direction:column; gap:24px; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:baseline; gap:10px; padding:0 10px; }
.logo { height:24px; width:auto; display:block; }
:root[data-theme=dark] .logo, .login-art .logo { filter:invert(1); }
.product { font-size:12px; color:var(--text-secondary); }
nav { display:flex; flex-direction:column; gap:2px; flex:1; }
.group { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary); padding:4px 10px 8px; }
nav a { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:10px; color:var(--text-primary); text-decoration:none; }
nav a:hover { background:var(--bg-hover); }
nav a[aria-current=page] { background:var(--bg-selected); font-weight:600; }
nav svg { width:18px; height:18px; }
.theme { display:flex; flex-direction:column; gap:6px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary); padding:0 10px; }
.theme select { letter-spacing:normal; text-transform:none; font-size:14px; }
select, input[type=search] { background:var(--bg-panel); color:var(--text-primary); border:1px solid var(--border-subtle); border-radius:10px; padding:8px 12px; font:inherit; }
.sidebar .btn { margin:0 10px; }

.page { max-width:1040px; margin:0 auto; padding:40px 32px 48px; display:flex; flex-direction:column; gap:32px; }
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; }
.page-head .muted { font-size:15px; margin-top:6px; }
input[type=search] { width:280px; max-width:100%; border-radius:12px; }
.banner { border-radius:10px; background:var(--bad-bg); color:var(--bad-text); padding:10px 14px; }

/* KPI strip: hairline-divided, no cards */
.metrics { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.metric { padding:16px 20px 14px; display:flex; flex-direction:column; gap:2px; min-height:148px; min-width:0; }
.metric:first-child { padding-left:0; } .metric + .metric { border-left:1px solid var(--border-subtle); }
.metric .label { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary); }
.metric .value { font-size:30px; font-weight:300; line-height:38px; letter-spacing:-.02em; white-space:nowrap; }
.metric .sub { font-size:12px; color:var(--text-secondary); min-height:18px; white-space:nowrap; }
.chart { width:100%; height:44px; margin-top:auto; display:block; }
.chart .area { fill:var(--chart-area); stroke:none; opacity:var(--chart-area-opacity); }
.chart .l0 { stroke:var(--chart-line); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.chart .l1 { stroke:var(--chart-line-2); stroke-width:1.25; stroke-dasharray:4 3; vector-effect:non-scaling-stroke; }
.chart .base { stroke:var(--border-subtle); stroke-width:1; vector-effect:non-scaling-stroke; }
.section-head { margin:0 0 4px; }

/* Lists */
.list { border-top:1px solid var(--border-subtle); }
.row { display:grid; gap:16px; align-items:center; padding:12px 12px; min-height:60px; border-bottom:1px solid var(--row-line); }
.row:hover { background:var(--bg-hover); }
.row.ov { grid-template-columns:minmax(260px,1.4fr) repeat(3,minmax(130px,1fr)); }
.row.ct { grid-template-columns:minmax(200px,2fr) minmax(120px,1fr) minmax(140px,1.2fr) auto; }
.row.grp { background:var(--bg-sidebar); min-height:48px; }
.row.ct.grp { display:flex; flex-wrap:wrap; }
.row.ct.grp .actions { margin-left:auto; }
.id { display:flex; flex-direction:column; gap:2px; min-width:0; }
.id .name { display:flex; align-items:center; gap:8px; min-width:0; }
.id strong, .id .muted { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.id .muted { font-size:12px; margin:0; }
.row.child .id { padding-left:20px; border-left:1px solid var(--border-subtle); margin-left:8px; }
.row.grp strong { font-weight:600; }
.m { min-width:0; }
.m .mh { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--text-secondary); white-space:nowrap; }
.m .mh b { color:var(--text-primary); font-weight:500; }
.m .chart { height:28px; margin-top:4px; }
.m-off { grid-column:2/-1; font-size:12px; color:var(--text-secondary); }
.pills { display:flex; flex-wrap:wrap; gap:4px; }
.grp .pills { flex-wrap:nowrap; align-items:center; min-width:0; }
.pill { display:inline-block; font-size:12px; font-weight:500; padding:1px 9px; border-radius:999px; background:var(--pill-bg); color:var(--pill-text); white-space:nowrap; }
.pill.ok { background:var(--ok-bg); color:var(--ok-text); }
.pill.warn { background:var(--yellow-soft); color:var(--yellow-deep); }
.pill.bad { background:var(--bad-bg); color:var(--bad-text); }
.status-line { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.empty { padding:40px; text-align:center; color:var(--text-secondary); }
.toggle { cursor:pointer; display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:2px 4px 2px 0; border-radius:6px; min-width:0; flex:0 1 auto; }
.toggle strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chev { width:16px; height:16px; flex:none; transition:transform .15s cubic-bezier(.16,1,.3,1); } .chev.open { transform:rotate(90deg); }
@media (prefers-reduced-motion:reduce) { .chev { transition:none; } }

/* Actions */
.actions { display:flex; gap:4px; }
.icon { width:32px; height:32px; display:grid; place-items:center; border:1px solid transparent; background:transparent; border-radius:10px; color:var(--text-secondary); }
.icon:hover:not(:disabled) { background:var(--bg-selected); color:var(--text-primary); }
.icon:disabled { opacity:.4; cursor:progress; } .icon svg { width:16px; height:16px; }
.icon.danger:hover:not(:disabled) { background:var(--bad-bg); color:var(--bad-text); }
.btn { border:1px solid var(--border-subtle); background:var(--bg-panel); border-radius:10px; padding:8px 16px; font-weight:500; }
.btn:hover { background:var(--bg-selected); }
.btn.primary { background:var(--btn-bg); color:var(--btn-text); border-color:var(--btn-bg); font-weight:600; }
.btn.primary:hover { background:var(--btn-bg); filter:brightness(1.15); }
.icon:active:not(:disabled), .btn:active { transform:translateY(1px); }

/* Sheet + toast */
.sheet { margin:0 0 0 auto; height:100vh; max-height:100vh; width:min(760px,100vw); max-width:100vw; padding:0; border:0; border-left:1px solid var(--border-subtle); background:var(--bg-window); color:var(--text-primary); }
.sheet[open] { display:flex; flex-direction:column; }
.sheet::backdrop { background:var(--scrim); }
.sheet header, .sheet footer { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--border-subtle); }
.sheet footer { border-bottom:0; border-top:1px solid var(--border-subtle); justify-content:flex-end; gap:8px; }
.sheet h2 { font-size:16px; }
.sheet pre { flex:1; margin:0; padding:14px 20px; overflow:auto; font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; word-break:break-all; background:var(--bg-sidebar); }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--ink-inverse); border-radius:10px; padding:10px 16px; box-shadow:0 8px 24px var(--scrim); max-width:90vw; }

/* Sign in: dark brand panel + paper form */
.login { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.login-art { position:relative; overflow:hidden; background:var(--art-ink); color:#F5F2E1; padding:40px 48px; display:flex; flex-direction:column; justify-content:space-between;
  background-image:radial-gradient(60% 45% at 0% 100%, rgba(255,229,132,.75), transparent 70%), radial-gradient(35% 30% at 100% 100%, rgba(255,229,132,.3), transparent 70%), radial-gradient(40% 35% at 0% 10%, rgba(120,130,150,.45), transparent 70%); }
.login-art .logo { height:36px; align-self:flex-start; }
.login-art h2 { font-size:56px; font-weight:300; line-height:1.05; letter-spacing:-.03em; }
.login-art p { margin:12px 0 0; font-size:17px; opacity:.9; }
.login-pane { display:grid; place-items:center; padding:24px; background:var(--bg-window); }
.login-box { width:min(380px,100%); display:flex; flex-direction:column; gap:16px; }
.login-box h1 { font-size:30px; margin-bottom:4px; }
.login-box label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--text-secondary); }
.login-box input { background:var(--white); color:var(--ink); border:1px solid var(--border-subtle); border-radius:12px; padding:12px 14px; font:inherit; }
.login-box .btn { padding:12px 16px; border-radius:12px; }
.login-error { margin:0; color:var(--bad-text); background:var(--bad-bg); border-radius:10px; padding:8px 12px; }

/* Header tools, websites, docker, audit, settings, dialog */
.head-tools { display:flex; gap:8px; align-items:center; }
.row.ct.ro { grid-template-columns:minmax(200px,2fr) minmax(120px,1.2fr) minmax(140px,1.2fr); }
.row.st { grid-template-columns:minmax(240px,1.4fr) minmax(160px,1fr) minmax(120px,.5fr) auto; }
.row.kv { grid-template-columns:minmax(120px,.7fr) minmax(140px,1fr) minmax(160px,1.2fr) minmax(0,auto); }
.row.kv .btn { padding:4px 12px; }
.row.au { grid-template-columns:minmax(150px,.8fr) 80px minmax(110px,.8fr) minmax(0,1.6fr) minmax(90px,.5fr) 70px; font-size:13px; }
.row.au > * { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
ul.plain { list-style:none; margin:8px 0 0; padding:0; } ul.plain li { display:flex; justify-content:space-between; gap:16px; padding:6px 0; border-bottom:1px solid var(--row-line); font-size:13px; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border-subtle); margin-bottom:8px; }
.tab { position:relative; background:none; border:0; padding:10px 14px; color:var(--text-secondary); font-weight:500; border-radius:10px 10px 0 0; }
.tab:hover { color:var(--text-primary); background:var(--bg-hover); }
.tab[aria-selected=true] { color:var(--text-primary); }
.tab[aria-selected=true]::after { content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; background:var(--text-primary); }
.settings { display:flex; flex-direction:column; }
.set-group { display:grid; grid-template-columns:minmax(170px,15rem) minmax(0,38rem); gap:8px 56px; padding:28px 0; border-bottom:1px solid var(--row-line); }
.set-group header h2 { font-size:15px; margin:0 0 4px; } .set-group header p { margin:0; font-size:13px; color:var(--text-secondary); line-height:1.5; }
.set-body { display:flex; flex-direction:column; gap:14px; min-width:0; } .set-body p { margin:0; }
.savebar { position:sticky; bottom:0; display:flex; align-items:center; gap:14px; padding:14px 0; background:var(--bg-window); border-top:1px solid var(--border-subtle); z-index:1; }
.savebar .muted { margin:0; font-size:13px; } .btn:disabled { opacity:.45; cursor:default; }
.fields { display:flex; gap:16px; flex-wrap:wrap; }
.field { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--text-secondary); min-width:140px; }
.check { display:flex; align-items:center; gap:8px; }
.check input { width:16px; height:16px; accent-color:var(--text-primary); }
.field input, .field select, .modal select { background:var(--bg-panel); color:var(--text-primary); border:1px solid var(--border-subtle); border-radius:10px; padding:8px 12px; font:inherit; }
.modal { width:min(440px,calc(100vw - 32px)); border:1px solid var(--border-subtle); border-radius:12px; padding:0; background:var(--bg-window); color:var(--text-primary); }
.modal::backdrop { background:var(--scrim); }
.modal header, .modal footer { padding:16px 20px; } .modal header { border-bottom:1px solid var(--border-subtle); }
.modal footer { display:flex; justify-content:flex-end; gap:8px; border-top:1px solid var(--border-subtle); }
.modal-body { padding:16px 20px; display:flex; flex-direction:column; gap:14px; } .modal-body .muted { margin:0; font-size:13px; }
.modal .login-error { margin:0 20px 12px; }
.icon[aria-pressed=true] { color:var(--text-primary); background:var(--bg-selected); }

.toolbar { display:flex; gap:8px; margin-bottom:12px; }
.row.ev { grid-template-columns:minmax(150px,.7fr) minmax(120px,.7fr) minmax(0,2fr) 36px; font-size:13px; }  /* fixed last column: the log button is absent on most rows, and an auto column would shift the others */
.row.sc { grid-template-columns:minmax(0,1.4fr) 90px minmax(0,1.4fr) auto; }
.row .note { font-size:12px; margin:0; } .row .note a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.section-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
h3.sect { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary); font-weight:400; margin:6px 0 0; }
details { margin-top:8px; } summary { cursor:pointer; color:var(--text-secondary); padding:4px 0; }
.digest { margin:0; padding:12px; background:var(--bg-sidebar); border:1px solid var(--border-subtle); border-radius:10px; font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; }
.sheet-tools { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; padding:8px 20px; border-bottom:1px solid var(--border-subtle); font-size:13px; }
.sheet-tools input[type=search] { width:200px; padding:6px 10px; } .sheet-tools select { padding:4px 8px; border-radius:8px; }
.sheet-tools .check { gap:6px; } .sheet-tools .muted { margin:0 0 0 auto; }
.modal-body .field input:not([type=checkbox]), .modal-body .field select { width:100%; }
.checks { display:flex; flex-direction:column; gap:6px; max-height:240px; overflow:auto; padding:2px; }
@media (max-width:900px) { .set-group { grid-template-columns:1fr; gap:14px; padding:22px 0; } }
@media (max-width:1100px) {
  .row.ov { grid-template-columns:repeat(3,minmax(0,1fr)); } .row.ov .id { grid-column:1/-1; } .m-off { grid-column:1/-1; }
  .row.ct { grid-template-columns:minmax(0,1fr) auto; } .row.ct .status-line, .row.ct > .pills { grid-column:1; } .row.ct .actions { grid-column:2; grid-row:1 / span 3; }
  .row.ev, .row.sc { grid-template-columns:1fr 1fr; }
  .row.st { grid-template-columns:1fr 1fr auto; } .row.st .id { grid-column:1/-1; } .row.kv { grid-template-columns:minmax(0,1fr) auto; } .row.au { grid-template-columns:1fr 1fr; } .row.ct.ro { grid-template-columns:1fr; }
  .metrics { grid-template-columns:repeat(2,1fr); } .metric:nth-child(3) { padding-left:0; border-left:0; } .metric:nth-child(n+3) { border-top:1px solid var(--border-subtle); }
}
@media (max-width:820px) {
  .shell, .login { grid-template-columns:1fr; } .login-art { display:none; }
  .sidebar { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 16px; border-right:0; border-bottom:1px solid var(--border-subtle); }
  nav { flex-direction:row; flex-wrap:wrap; flex:1 1 100%; gap:2px 4px; order:3; } .group { display:none; } nav a { padding:6px 10px; }
  .page { padding:24px 16px 32px; } .page-head { flex-direction:column; align-items:stretch; } h1 { font-size:30px; }
}
@media (max-width:560px) {
  .row.ov { grid-template-columns:1fr; } .sheet { width:100vw; }
  .metric { padding:14px 12px; min-height:120px; } .metric .value { font-size:24px; }
}