*{box-sizing:border-box}
html,body{margin:0}
body{background:#f4f4f5;color:#27272a;font:13px/1.45 "IBM Plex Sans",system-ui,sans-serif}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:#1d4ed8;text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid #1d4ed8;outline-offset:1px}
h1{margin:0;font-size:18px;font-weight:600;color:#18181b}
h2{margin:0 0 8px;font-size:13px;font-weight:600;color:#18181b}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px}
.muted{color:#52525b}
.mono{font-family:"IBM Plex Mono",monospace;font-size:12px}
.head{background:#fff;border-bottom:1px solid #e4e4e7}
.brand-row{display:flex;align-items:center;gap:8px;padding-top:12px;flex-wrap:wrap}
.brand{color:#166534;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:8px}
.logo{display:block;width:24px;height:24px}
.logo-lg{display:block;width:40px;height:40px;margin-bottom:12px}
.brand-sub{color:#52525b;font-weight:500}
.conn{margin-left:auto;color:#52525b;display:inline-flex;align-items:center;gap:6px}
.conn::before{content:"";width:8px;height:8px;background:#a1a1aa}
.conn.ok::before{background:#16a34a}
.conn.bad{color:#991b1b}.conn.bad::before{background:#b91c1c}
.nav{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:#52525b;font-weight:500}
.nav a:hover{text-decoration:none;color:#18181b}
.nav a[aria-current=page]{color:#18181b;box-shadow:inset 0 -2px 0 #1d4ed8}
main{padding-block:24px 48px;display:flex;flex-direction:column;gap:20px}
.panel{background:#fff;border:1px solid #e4e4e7}
.badge{display:inline-block;padding:1px 7px;font-size:12px;font-weight:500;white-space:nowrap;background:#e4e4e7;color:#3f3f46}
.badge.good{background:#dcfce7;color:#166534}
.badge.bad{background:#fee2e2;color:#991b1b}
.badge.warn{background:#fef3c7;color:#92400e}
.row{display:grid;gap:14px;align-items:center;width:100%;min-height:44px;padding:8px 16px;border:0;border-bottom:1px solid #e4e4e7;background:none;text-align:left;color:inherit}
.row:last-child{border-bottom:0}
a.row:hover,button.row:hover{background:#fafafa;text-decoration:none}
.row.head-row{background:#fafafa;font-weight:600;color:#52525b}
.dep{grid-template-columns:96px 170px minmax(0,1fr) 76px 76px}
.liv{grid-template-columns:minmax(0,1fr) auto 76px}
.app-row{grid-template-columns:minmax(0,1.5fr) 150px minmax(0,1.4fr) 100px 120px}
.res{grid-template-columns:minmax(0,1.5fr) 160px 170px}
.img{grid-template-columns:minmax(0,1fr) 110px 170px}
.act{grid-template-columns:150px minmax(0,1fr) 170px 90px}
.day{padding:6px 16px;background:#fafafa;border-bottom:1px solid #e4e4e7;font-weight:600;color:#52525b}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.num{text-align:right;color:#52525b;white-space:nowrap}
.timer{font-family:"IBM Plex Mono",monospace;font-size:14px;text-align:right;color:#18181b}
.empty{padding:32px 16px;text-align:center;color:#52525b}
.error{padding:8px 12px;background:#fee2e2;color:#991b1b}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.env-head{grid-column:1/-1;margin:8px 0 0;font-size:13px;font-weight:600;color:#18181b}
.card{padding:12px;display:flex;flex-direction:column;gap:6px}
.card-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 8px;align-items:center}
.card-top a,.card-top .strong{min-width:0;overflow-wrap:anywhere}
.strong{font-weight:600;color:#18181b}
.spark{display:flex;gap:2px;height:18px}
.spark i{flex:1;background:#4ade80}.spark i.failed{background:#b91c1c}.spark i.other{background:#a1a1aa}
.links{display:flex;flex-wrap:wrap;gap:4px 12px}
.tools{display:flex;gap:8px;flex-wrap:wrap}
.seg{display:flex;flex-wrap:wrap;background:#fff;border:1px solid #e4e4e7}
.seg button{min-height:36px;padding:0 12px;border:0;background:none;color:#3f3f46}
.seg button[aria-pressed=true]{background:#1d4ed8;color:#fff;font-weight:500}
input[type=search],input[type=password]{min-height:36px;padding:0 10px;background:#fff;border:1px solid #d4d4d8;border-radius:0}
.tools input{flex:1 1 200px;min-width:0}
.btn{min-height:36px;padding:0 14px;border:1px solid #d4d4d8;background:#fff;font-weight:500}
.btn:hover{background:#fafafa}
.btn.primary{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
.btn.primary:hover{background:#1e40af}
.btn:disabled{opacity:.6;cursor:default}
.link{border:0;background:none;padding:6px 0;color:#1d4ed8;font-weight:500}
.split{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.side{flex:1 1 280px;max-width:320px;max-height:680px;overflow:auto}
.pane{flex:999 1 560px;min-width:0}
.pick{display:block;width:100%;min-height:44px;padding:10px 12px;border:0;border-bottom:1px solid #e4e4e7;background:none;text-align:left}
.pick:hover{background:#fafafa}
.pick[aria-pressed=true]{background:#eff6ff;box-shadow:inset 3px 0 0 #1d4ed8}
.pane-head{padding:12px 16px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;border-bottom:1px solid #e4e4e7}
.pane-tools{padding:8px 16px;border-bottom:1px solid #e4e4e7;align-items:center}
.push{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
.logs{height:560px;overflow:auto;padding:8px 0;background:#18181b;color:#e4e4e7;font:12px/1.65 "IBM Plex Mono",monospace}
.line{display:grid;grid-template-columns:44px 72px minmax(0,1fr);gap:8px;padding:0 12px}
.line:hover{background:#27272a}
.line .n,.line .t{color:#a1a1aa}.line .n{text-align:right}
.line .x{white-space:pre-wrap;overflow-wrap:anywhere}
.line.ERROR .x{color:#fca5a5}.line.WARN .x{color:#fcd34d}
.logs .empty{color:#a1a1aa}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:16px}
.facts dt{color:#52525b}.facts dd{margin:0;color:#18181b;overflow-wrap:anywhere}
.tabs{display:flex;flex-wrap:wrap;gap:4px;padding:0 8px;border-bottom:1px solid #e4e4e7}
.tabs button{min-height:44px;padding:0 12px;border:0;background:none;color:#52525b;font-weight:500}
.tabs button[aria-pressed=true]{color:#18181b;box-shadow:inset 0 -2px 0 #1d4ed8}
.sub{padding:12px 16px 8px;margin:0;border-top:1px solid #e4e4e7}
.toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:10;max-width:calc(100vw - 32px);width:340px}
.toast{padding:10px 12px;background:#18181b;color:#fff;border-left:4px solid #60a5fa}
.toast.good{border-color:#4ade80}.toast.bad{border-color:#f87171}
.toast a{color:#bfdbfe}
.login{display:flex;justify-content:center;padding:64px 16px}
.login-box{width:100%;max-width:360px;background:#fff;border:1px solid #e4e4e7;padding:24px;display:flex;flex-direction:column;gap:8px}
.login-box h1,.login-box p{margin:0}
.login-box .btn{margin-top:8px;min-height:44px}
@media (max-width:760px){
  .dep{grid-template-columns:minmax(0,1fr) auto;gap:3px 12px}
  .dep .st{grid-column:2;grid-row:1}.dep .nm{grid-column:1;grid-row:1}
  .dep .ms{grid-column:1/-1;grid-row:2}.dep .du{grid-column:1;grid-row:3;text-align:left}.dep .wh{grid-column:2;grid-row:3}
  .opt{display:none}
  .app-row,.res,.img,.act{grid-template-columns:minmax(0,1fr) auto}
  .liv{grid-template-columns:minmax(0,1fr) 76px}
  .side{max-width:none;flex-basis:100%;max-height:240px}
  .pane{flex-basis:100%}
  .line{grid-template-columns:62px minmax(0,1fr)}.line .n{display:none}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.sso{display:flex;align-items:center;justify-content:center;text-decoration:none}
.sso:hover{text-decoration:none}
.crumbs{margin-bottom:2px;color:#52525b}
.tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:#52525b;font-weight:500}
.tabs a:hover{color:#18181b;text-decoration:none}
.tabs a[aria-current=page]{color:#18181b;box-shadow:inset 0 -2px 0 #1d4ed8}
.dep-site{grid-template-columns:96px minmax(0,1fr) 76px 76px}
.site-row{grid-template-columns:minmax(0,1.2fr) 170px minmax(0,1.5fr) 76px;color:inherit}
.site-row .sn,.site-row .sd{min-width:0}
.ell-block{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-row .sd{display:flex;align-items:center;gap:8px}
.ell-inline{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[hidden]{display:none!important}
@media (max-width:760px){
  .site-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .site-row .sn{grid-column:1;grid-row:1}.site-row .ss{grid-column:2;grid-row:1}
  .site-row .sd{grid-column:1;grid-row:2}.site-row .sw{grid-column:2;grid-row:2}
  .dep-site{grid-template-columns:minmax(0,1fr) auto;gap:3px 12px}
  .dep-site .st{grid-column:1;grid-row:1}.dep-site .wh{grid-column:2;grid-row:1}
  .dep-site .ms{grid-column:1/-1;grid-row:2}.dep-site .du{grid-column:1;grid-row:3;text-align:left}
}
.status-banner{padding:18px 20px;font-size:18px;font-weight:600;background:#3f3f46;color:#fff}
.status-banner.good{background:#166534}.status-banner.warn{background:#92400e}.status-banner.bad{background:#991b1b}
.status-groups{display:flex;flex-direction:column;gap:16px}
.status-env{margin:0;padding:10px 16px;background:#fafafa;border-bottom:1px solid #e4e4e7;text-transform:capitalize}
.status-row{display:block;padding:14px 16px;border-bottom:1px solid #e4e4e7;color:inherit}
.status-row:last-child{border-bottom:0}
.status-row:hover{background:#fafafa;text-decoration:none}
.status-top{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.status-state{margin-left:auto;font-weight:600;color:#3f3f46}
.status-state.good{color:#166534}.status-state.warn{color:#92400e}.status-state.bad{color:#991b1b}
.status-bars{display:flex;gap:2px;height:28px;margin-top:10px}
.status-bars i,.status-legend i{background:#d4d4d8}
.status-bars i{flex:1;min-width:0}
.status-bars i.ok,.status-legend i.ok{background:#22c55e}
.status-bars i.mixed,.status-legend i.mixed{background:#f59e0b}
.status-bars i.failed,.status-legend i.failed{background:#b91c1c}
.status-legend{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center}
.status-legend span:first-child{margin-right:auto}
.status-legend span{display:inline-flex;align-items:center;gap:6px}
.status-legend i{display:inline-block;width:10px;height:10px}
.incident{grid-template-columns:minmax(0,1fr) auto;color:inherit}
@media (max-width:760px){.status-bars{gap:1px}}
.status-banner{padding:10px 14px;font-size:14px}
.status-groups{gap:10px}
.status-env{padding:6px 12px;font-size:12px}
.status-row{padding:8px 12px}
.status-bars{height:20px;gap:1px;margin-top:5px}
.status-bars i{border-radius:1px}
@media (max-width:760px){.status-bars{gap:0}.status-bars i{box-shadow:inset -1px 0 0 #fff}}
.status-state{display:inline-flex;align-items:center;gap:6px}
.status-check{margin-left:auto;font-size:12px}
.status-check + .status-state{margin-left:0}
.pulse{width:8px;height:8px;border-radius:50%;background:#a1a1aa}
.pulse.good{background:#16a34a;animation:pulse 2s ease-out infinite}
.pulse.warn{background:#d97706}.pulse.bad{background:#b91c1c}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}70%,100%{box-shadow:0 0 0 7px rgba(22,163,74,0)}}
@media (prefers-reduced-motion:reduce){.pulse.good{animation:none}}
/* Mobile and installed-app layout */
html{-webkit-text-size-adjust:100%}
body{overflow-wrap:break-word}
.head,.login{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.head{padding-top:env(safe-area-inset-top)}
main{padding-bottom:calc(48px + env(safe-area-inset-bottom))}
.toasts{bottom:calc(16px + env(safe-area-inset-bottom))}
@media (max-width:760px){
  /* iOS zooms the page when focusing inputs under 16px. */
  input[type=search],input[type=password],select{font-size:16px;min-height:44px}
  .head{position:sticky;top:0;z-index:5}
  .brand-row{padding-top:8px}
  #me{display:none}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a,.tabs button{flex:none}
  main{padding-top:16px;gap:16px}
  .btn,.seg button,.link{min-height:44px}
  .seg{width:100%}.seg button{flex:1 1 auto}
  .push{margin-left:0;width:100%}
  .logs{height:60vh;height:60dvh}
  .side{max-height:200px}
  .toasts{left:16px;right:16px;width:auto}
  .login{padding-top:calc(32px + env(safe-area-inset-top))}
}
@media (max-width:760px){
  .status-top .strong{order:1;flex:1 1 0;min-width:0}
  .status-top .status-state,.status-check + .status-state{order:2;margin-left:auto}
  .status-top .muted,.status-check{order:3;margin-left:0}
  .status-check{flex-basis:100%}
}
.m-only,.nav-icon{display:none}
.sheet-wrap,.sheet{display:contents}
.filter-btn svg{flex:none}
@media (max-width:760px){
  :root{--tabs:calc(57px + env(safe-area-inset-bottom))}
  body{font-size:15px}
  .d-only{display:none}
  .m-only{display:revert}
  .btn.m-only{display:inline-flex;align-items:center;justify-content:center;gap:6px}
  /* Bottom tab bar, within thumb reach */
  .nav{position:fixed;left:0;right:0;bottom:0;z-index:6;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;max-width:none;margin:0;padding:0 0 env(safe-area-inset-bottom);background:#fff;border-top:1px solid #e4e4e7}
  .nav a{flex-direction:column;justify-content:center;gap:2px;min-height:56px;padding:0;font-size:12px}
  .nav a[aria-current=page]{color:#1d4ed8;font-weight:600;box-shadow:none}
  .nav-icon{display:block;width:22px;height:22px}
  .brand-row{padding-bottom:8px}
  main{padding-bottom:calc(var(--tabs) + 84px)}
  .toasts{bottom:calc(var(--tabs) + 76px)}
  /* Search and filters dock above the tabs */
  .dock{position:fixed;left:0;right:0;bottom:var(--tabs);z-index:7;flex-wrap:nowrap;align-items:center;gap:8px;margin:0;padding:8px 16px;background:#fff;border-top:1px solid #e4e4e7;border-bottom:0}
  .dock input[type=search]{flex:1 1 0;width:auto}
  .filter-btn{flex:none;max-width:45%;min-height:44px}
  .filter-btn span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  /* Filter sheet */
  .sheet-wrap{display:none;position:fixed;inset:0;z-index:20;flex-direction:column;justify-content:flex-end;background:rgba(39,39,42,.7)}
  .sheet-wrap.open{display:flex}
  .sheet{display:flex;flex-direction:column;gap:16px;padding:20px 16px calc(24px + env(safe-area-inset-bottom));background:#fff;border-radius:12px 12px 0 0}
  .sheet h2{margin:0;font-size:17px}
  .sheet .seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;background:none;border:0}
  .sheet .seg button{min-height:48px;border:1px solid #d4d4d8;border-radius:8px;background:#fff}
  .sheet .seg button[aria-pressed=true]{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
  .sheet .btn{min-height:52px;width:100%;font-weight:600}
  /* Log screens give the space to the log, with controls at the bottom */
  .log-view .nav{display:none}
  .log-view main{padding-bottom:calc(84px + env(safe-area-inset-bottom));gap:8px}
  .log-view .toasts{bottom:calc(76px + env(safe-area-inset-bottom))}
  .log-dock{bottom:0;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .log-dock #count{display:none}
  .log-dock input[type=search]{display:none}
  .log-dock.searching input[type=search]{display:block}
  .log-dock.searching #pause{display:none}
  .log-dock #pause{flex:1 1 0;min-height:48px;background:#1d4ed8;border-color:#1d4ed8;color:#fff;font-weight:600}
  .log-dock .icon-btn{flex:0 0 48px;min-height:48px;padding:0}
  .log-dock .icon-btn:first-of-type{margin-left:auto}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px}
  .logs{height:calc(100vh - 300px);height:calc(100dvh - 300px);min-height:280px}
  /* Mobile corners stay soft */
  .panel,.status-banner,.login-box,.toast,.error{border-radius:8px}
  .panel{overflow:hidden}
  .btn,input[type=search],input[type=password]{border-radius:8px}
  .badge{border-radius:4px}
  .status-bars i{border-radius:1px}
}
.status-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}