/* Arcane Panel. Spacing 4·8·12·16·24·32·48, type 12·14·16·20·24·30, radius 4·8. */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2193}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2193}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2193}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:"IBM Plex Sans";font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2193}
@font-face{font-family:"IBM Plex Sans";font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

:root{
  color-scheme:light;
  --bg:#f7f8fa;--surface:#fff;--raised:#f7f8fa;--sunken:#eef0f3;
  --text:#0f1218;--text-2:#434a55;--text-3:#646c78;
  --line-1:#eef0f3;--line:#dde1e7;--line-3:#c2c8d1;
  --brand:#1b3a5b;--brand-h:#14304c;--on-brand:#fff;
  --accent:#8c6b2e;
  --ok:#0f7a3a;--warn:#a85a12;--crit:#b91c1c;--info:#1e5fad;
  --ok-bg:#eef7f1;--warn-bg:#fbf3ea;--crit-bg:#fbeeee;
  --logo:brightness(0);
  --ease:cubic-bezier(.2,.8,.2,1);
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --shadow:0 12px 32px hsl(214 40% 12% / .16);
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --bg:#0f1218;--surface:#14181f;--raised:#181c23;--sunken:#0f1218;
  --text:#eef0f3;--text-2:#c2c8d1;--text-3:#9098a3;
  --line-1:#1f242c;--line:#2a2f38;--line-3:#434a55;
  --brand:#c2d0df;--brand-h:#dde4ec;--on-brand:#0f1218;
  --accent:#c6995b;
  --ok:#4fb97c;--warn:#e0a45e;--crit:#ef7d7d;--info:#79a9e0;
  --ok-bg:#12261b;--warn-bg:#2a2013;--crit-bg:#2d1616;
  --logo:none;
  --shadow:0 12px 32px hsl(214 40% 2% / .6);
}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 14px/20px "IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 0}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
small{display:block;margin-top:4px;font-size:12px;line-height:16px;color:var(--text-3)}
code,.mono{font-family:var(--mono);font-size:12px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.muted{color:var(--text-3)}
.strong{font-weight:600}
[hidden]{display:none!important}

/* Shell */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column}
.brand{display:flex;align-items:center;height:56px;padding:0 24px;border-bottom:1px solid var(--line);flex:none}
.brand img,.auth-logo{filter:var(--logo);display:block;height:21px;width:141px}
.nav{padding:12px 12px 24px}
.nav-group{margin-top:16px}
.nav-hub{padding:4px 12px;font-size:12px;line-height:16px;font-weight:600;color:var(--text-3)}
.nav-link{display:block;padding:6px 12px;margin-top:2px;border-radius:4px;color:var(--text-2);transition:background-color 120ms var(--ease),color 120ms var(--ease)}
.nav-link:hover{background:var(--raised);color:var(--text)}
.nav-link.is-active{background:var(--sunken);color:var(--text);font-weight:600}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px;height:56px;padding:0 32px;background:var(--surface);border-bottom:1px solid var(--line)}
.crumbs{display:flex;align-items:baseline;gap:12px;min-width:0;flex:1;white-space:nowrap;overflow:hidden;color:var(--text-3)}
.crumb-cur{color:var(--text-2);overflow:hidden;text-overflow:ellipsis}
.crumb-ip{color:var(--text-3)}
.search{display:flex;align-items:center;gap:8px;width:280px;height:32px;padding:0 8px 0 12px;background:var(--raised);border:1px solid var(--line);border-radius:4px;color:var(--text-3);cursor:pointer;transition:border-color 120ms var(--ease)}
.search:hover{border-color:var(--line-3)}
.search span{flex:1;text-align:left}
kbd{font:400 12px/16px var(--mono);padding:0 4px;background:var(--surface);border:1px solid var(--line);border-radius:4px}
.who{display:flex;align-items:center;gap:12px}
.who-mail{color:var(--text-2)}
.who-mail:hover{color:var(--text)}
.who form{margin:0}
.icon-btn{display:none;align-items:center;justify-content:center;width:32px;height:32px;background:none;border:1px solid var(--line);border-radius:4px;cursor:pointer}
.scrim{display:none}
.content{width:100%;max-width:1440px;padding:32px;display:flex;flex-direction:column;gap:32px}

/* Masthead */
.mast{padding-bottom:16px;border-bottom:1px solid var(--line)}
.kicker{display:flex;align-items:baseline;gap:8px;font-weight:500;font-size:12px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.pipe,.num{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
h1{margin-top:8px;font-size:30px;line-height:36px;font-weight:700;letter-spacing:-.018em}
.lead{margin-top:8px;max-width:72ch;color:var(--text-2)}
.sec{display:flex;flex-direction:column;gap:12px;min-width:0}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.eyebrow{display:flex;align-items:baseline;gap:8px;font-weight:500;font-size:12px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.note{font-size:12px;line-height:16px;color:var(--text-3)}
.note a{text-decoration:underline}
.tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Hairline blocks */
.metrics,.grid-meta,.hubs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
.metrics-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.metric{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--surface);transition:background-color 120ms var(--ease);min-width:0}
a.metric:hover{background:var(--raised)}
.is-stale .value{color:var(--text-3)}
.label{display:block;font-weight:500;font-size:12px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.value{font-size:30px;line-height:36px;font-weight:700;letter-spacing:-.018em;font-variant-numeric:tabular-nums;white-space:nowrap}
.value-sm{font-size:30px}
.sub{font-size:12px;line-height:16px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar{display:block;width:100%;height:4px;border-radius:4px}
.bar-bg{fill:var(--sunken)}
.bar-fill{fill:var(--text-2);transition:width 280ms var(--ease)}
.grid-meta{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-meta-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-meta>div{display:flex;flex-direction:column;gap:4px;padding:12px 16px;background:var(--surface);min-width:0;overflow-wrap:anywhere}
.hubs{grid-template-columns:repeat(3,minmax(0,1fr))}
.hub{padding:16px;background:var(--surface);min-width:0}
.hub h3{font-size:14px;line-height:20px;font-weight:600;padding-bottom:8px;border-bottom:1px solid var(--line-1)}
.hub li a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line-1);transition:color 120ms var(--ease)}
.hub li:last-child a{border-bottom:0;padding-bottom:0}
.hub li a:hover span:first-child{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.hub-val{font-size:12px;line-height:16px;color:var(--text-3);text-align:right;font-variant-numeric:tabular-nums}

/* Tables */
.frame{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.scroll{overflow-x:auto}
.t{width:100%;border-collapse:collapse}
.t th{padding:8px 16px;text-align:left;font-weight:500;font-size:12px;line-height:16px;color:var(--text-3);background:var(--raised);border-bottom:1px solid var(--line);white-space:nowrap}
.t td{padding:12px 16px;vertical-align:top;border-bottom:1px solid var(--line-1)}
.t tbody tr:last-child td{border-bottom:0}
.t tbody tr:hover td{background:var(--raised)}
.t .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.t .act{text-align:right;width:1%;white-space:nowrap}
.t td a.strong:hover{text-decoration:underline;text-underline-offset:2px}
.t .wrap{max-width:360px;overflow-wrap:anywhere}
.t .bar-col{width:40%;vertical-align:middle}
.empty{color:var(--text-3);text-align:left}
.sortable{cursor:pointer;user-select:none}
.sortable:hover{color:var(--text)}
th[aria-sort=ascending]::after{content:" ↑"}
th[aria-sort=descending]::after{content:" ↓"}
.log{margin:0;padding:16px;max-height:640px;overflow:auto;font:400 12px/20px var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text-2)}

/* Status */
.s-ok{color:var(--ok)}
.s-warn{color:var(--warn)}
.s-crit{color:var(--crit)}
.s-unknown{color:var(--text-3)}
.alerts li{border-bottom:1px solid var(--line-1)}
.alerts li:last-child{border-bottom:0}
.alerts a{display:grid;grid-template-columns:96px minmax(0,auto) minmax(0,1fr) 16px;align-items:baseline;gap:16px;padding:12px 16px;transition:background-color 120ms var(--ease)}
.alerts a:hover{background:var(--raised)}
.alert-title{font-weight:500}
.alert-detail{color:var(--text-3);overflow-wrap:anywhere}
.arrow{color:var(--text-3);text-align:right;transition:transform 120ms var(--ease)}
.alerts a:hover .arrow{transform:translateX(2px)}
.tag{font-weight:500;font-size:12px;line-height:16px}
.tag-crit{color:var(--crit)}.tag-warn{color:var(--warn)}.tag-unknown{color:var(--text-3)}
.state{padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;gap:4px}
.state-title{font-weight:600}
.state-err{background:var(--crit-bg);border-color:transparent;overflow-wrap:anywhere}
.state-err .state-title{color:var(--crit)}
.flash{padding:12px 16px;border-radius:8px;overflow-wrap:anywhere}
.flash-ok{background:var(--ok-bg);color:var(--ok)}
.flash-err{background:var(--crit-bg);color:var(--crit)}
.flash-warn{background:var(--warn-bg);color:var(--warn)}
.flash summary{cursor:pointer;margin-top:4px;font-size:12px}
.flash pre{margin:8px 0 0;font:400 12px/16px var(--mono);white-space:pre-wrap;color:var(--text-2)}

/* Controls */
.btn{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;background:transparent;border:1px solid var(--line-3);border-radius:4px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background-color 120ms var(--ease),border-color 120ms var(--ease),color 120ms var(--ease)}
.btn:hover{background:var(--raised)}
.btn:active{background:var(--sunken)}
.btn:disabled{opacity:.6;cursor:progress}
.btn-sm{height:32px}
.btn-quiet{border-color:transparent;color:var(--text-2)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn-primary:hover{background:var(--brand-h);border-color:var(--brand-h)}
.btn-danger{background:var(--crit);border-color:var(--crit);color:#fff}
.btn-danger:hover{background:var(--crit);opacity:.9}
.btn-block{width:100%;height:40px}
.field{display:flex;flex-direction:column;gap:4px}
.field>span,.field-label{font-weight:500;font-size:12px;line-height:16px;color:var(--text-2)}
input:not([type=hidden]),select{height:40px;padding:0 12px;background:var(--surface);border:1px solid var(--line-3);border-radius:4px;width:100%;transition:border-color 120ms var(--ease)}
input:hover,select:hover{border-color:var(--text-3)}
input.filter:not([type=hidden]),.tools select{height:32px;width:200px}
.tools select{width:240px}
.stack{display:flex;flex-direction:column;gap:16px}
.panel{padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.panel .btn{align-self:flex-start}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.path{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;font:400 14px/20px var(--mono)}
.path a:hover{text-decoration:underline;text-underline-offset:2px}
.path-sep{color:var(--text-3)}
.seg{display:flex;border:1px solid var(--line-3);border-radius:4px;overflow:hidden}
.seg a{height:30px;padding:0 8px;font:400 12px/30px var(--mono);border-right:1px solid var(--line-3)}
.seg a:last-child{border-right:0}
.seg a:hover{background:var(--raised)}

/* Dialogs */
.dlg{padding:0;background:var(--surface);color:var(--text);border:0;border-radius:8px;box-shadow:var(--shadow);width:calc(100% - 32px)}
.dlg::backdrop{background:hsl(214 30% 8% / .4)}
.dlg[open]{animation:enter 200ms cubic-bezier(.2,0,0,1)}
@keyframes enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.palette{max-width:560px;margin-top:96px}
.palette input{height:48px;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0 16px;font-size:16px;outline:0}
#palette-list{max-height:384px;overflow-y:auto;padding:8px}
#palette-list a{display:block;padding:8px;border-radius:4px}
#palette-list small{margin-top:0}
#palette-list li.is-cur a,#palette-list a:hover{background:var(--sunken)}
.palette-empty{padding:16px;color:var(--text-3)}
.confirm{max-width:440px}
.confirm form{display:flex;flex-direction:column;gap:16px;padding:24px}
.confirm h2{font-size:20px;line-height:24px;font-weight:700;letter-spacing:-.01em;overflow-wrap:anywhere}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px}

/* Authentication */
.auth{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);min-height:100vh;background:var(--surface)}
.auth-col{display:flex;flex-direction:column;padding:32px 48px;min-width:0}
.auth-logo{margin-bottom:64px}
.auth-body{display:flex;flex-direction:column;gap:16px;width:100%;max-width:400px}
.auth-body h1{margin-top:0}
.auth-body .lead{margin-top:-8px}
.auth-side{background:#0f1218;padding:32px 48px;display:flex;align-items:flex-end}
.auth-side .kicker{color:#9098a3}
.auth-side .pipe{color:#c6995b}
.code{font:500 16px/24px var(--mono);letter-spacing:.14em}
.qr{width:192px;height:192px;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff}
.qr svg{display:block;width:100%;height:100%}
.secret{display:flex;flex-direction:column;gap:4px}
.secret code{font-size:14px;line-height:20px;overflow-wrap:anywhere}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.codes li{padding:8px 12px;background:var(--surface);text-align:center}
.codes code{font-size:14px;line-height:20px}

/* Responsive */
@media (max-width:1280px){.hubs{grid-template-columns:repeat(2,minmax(0,1fr))}.who-mail{display:none}}
@media (max-width:1024px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;z-index:20;top:0;left:0;width:280px;transform:translateX(-100%);transition:transform 200ms cubic-bezier(.2,0,0,1)}
  .side.is-open{transform:none}
  .scrim.is-open{display:block;position:fixed;inset:0;z-index:15;background:hsl(214 30% 8% / .4)}
  .icon-btn{display:inline-flex}
  .metrics,.grid-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metrics-3,.grid-meta-3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:768px){
  .top{padding:0 16px;gap:8px}
  .content{padding:24px 16px;gap:24px}
  .crumb-ip{display:none}
  .search{width:40px;padding:0;justify-content:center}.search span,.search kbd{display:none}
  .icon-btn,.search,.btn{min-height:44px;height:44px}
  .icon-btn{width:44px}
  .hubs,.two{grid-template-columns:minmax(0,1fr)}
  .alerts a{grid-template-columns:minmax(0,1fr) 16px;gap:4px 16px}
  .alerts .tag{grid-column:1/-1}.alerts .alert-title{grid-column:1}.alerts .arrow{grid-column:2;grid-row:2}.alerts .alert-detail{grid-column:1/-1}
  input.filter:not([type=hidden]),.tools select{width:100%;height:44px}.tools{width:100%}
  .value{font-size:24px;line-height:32px}
  h1{font-size:24px;line-height:32px}
  .auth{grid-template-columns:minmax(0,1fr)}.auth-side{display:none}.auth-col{padding:24px 16px}.auth-logo{margin-bottom:32px}.auth-body{max-width:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}