/* Meridian design system v4 · JIS ICT Corp
   Calm, near-monochrome surfaces. Colour is reserved for meaning:
   Phthalo Blue #001489 is the brand and primary data colour, Aureolin #FDF200 marks the one thing to look at,
   Black carries actions, status colours appear only in data. Type: Geist (bundled). */
@font-face{font-family:"Geist";src:url("fonts/geist.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/geist-mono.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --phthalo:#001489;--sapphire:#2D3192;--aureolin:#FDF200;--ducky:#FFD506;--black:#000;--white:#fff;
  --ink:#0A0B10;--ink-2:#3A3D48;--muted:#6C707C;--faint:#A2A6B0;
  --canvas:#E9EBF0;--surface:#FFFFFF;--surface-2:#F5F6F8;--surface-3:#EEF0F3;--line:#E3E5EA;--line-2:#EEF0F3;--track:#EEF0F3;
  --tint:#EEF0FA;--tint-2:#E2E6F8;
  --up:#128A43;--up-2:#2DBE60;--up-bg:#E8F7EE;--down:#D92D32;--down-2:#F04A4F;--down-bg:#FDECEC;
  --warn:#C25E00;--warn-2:#FF9500;--warn-bg:#FFF3E3;--paused:#9EA2AD;--paused-bg:#F1F2F4;
  --lvl-ok:#2DBE60;--lvl-minor:#A9E5BE;--lvl-warn:#FF9500;--lvl-bad:#F04A4F;--lvl-none:#E6E8EC;
  --hatch:repeating-linear-gradient(135deg,#CFD3DB 0 1.5px,transparent 1.5px 5px);
  --r-xs:8px;--r-sm:12px;--r:16px;--r-lg:24px;--r-xl:28px;
  --shadow-pop:0 24px 70px -20px rgba(10,11,16,.35),0 2px 8px rgba(10,11,16,.06);
  --ease:cubic-bezier(.22,.8,.24,1);--spring:cubic-bezier(.3,1.25,.55,1);--out:cubic-bezier(.4,0,1,1);
  --font:"Geist",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --display:"Geist",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Consolas,monospace;
  --side:248px;--gutter:12px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:14px;line-height:1.5;color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"ss01";letter-spacing:-.005em}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}button{cursor:pointer;border:0;background:none;padding:0}button:disabled{cursor:not-allowed;opacity:.4}
a{color:var(--phthalo);text-decoration:none}h1,h2,h3,h4,p{margin:0}
h1{font-family:var(--display);font-size:32px;font-weight:500;letter-spacing:-.035em;line-height:1.1}
h2{font-family:var(--display);font-size:17px;font-weight:550;letter-spacing:-.02em}
h3{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
small{font-size:12.5px}.muted{color:var(--muted)}.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}.nowrap{white-space:nowrap}.word-break{overflow-wrap:anywhere}
.green{color:var(--up)}.amber{color:var(--warn)}.red{color:var(--down)}
.icon{width:18px;height:18px;flex-shrink:0;stroke-width:1.7;display:inline-block;vertical-align:middle}.icon.sm{width:15px;height:15px}.icon.lg{width:22px;height:22px}
::selection{background:var(--aureolin);color:var(--ink)}
:focus-visible{outline:2px solid var(--phthalo);outline-offset:2px;border-radius:10px}
.skip-link{position:absolute;top:-60px;left:16px;z-index:200;background:var(--aureolin);color:var(--ink);padding:10px 14px;border-radius:12px;font-weight:600}.skip-link:focus{top:12px}

/* ---------- buttons & inputs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;font-weight:550;font-size:13.5px;white-space:nowrap;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);transition:background .2s var(--ease),box-shadow .2s var(--ease),transform .25s var(--spring),color .2s}
.btn:hover{background:var(--surface-2);box-shadow:inset 0 0 0 1px #D3D6DD}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--ink);color:#fff;box-shadow:none}.btn.primary:hover{background:#23252E}
.btn.accent{background:var(--aureolin);color:var(--ink);box-shadow:none}.btn.accent:hover{background:#F2E700}
.btn.danger{background:var(--down-bg);color:var(--down);box-shadow:none}.btn.danger:hover{background:#FADADB}
.btn.small{height:32px;padding:0 12px;font-size:12.5px}
.btn.ghost{background:transparent;box-shadow:none;color:var(--muted)}.btn.ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn.glass{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}.btn.glass:hover{background:rgba(255,255,255,.2)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;color:var(--ink-2);position:relative;background:var(--surface);transition:background .2s,color .2s,transform .25s var(--spring)}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}.icon-btn:active{transform:scale(.92)}
.text-link{color:var(--ink);font-weight:550;display:inline-flex;gap:6px;align-items:center;font-size:13px}.text-link:hover{color:var(--phthalo)}
.card-go{width:34px;height:34px;border-radius:999px;display:inline-grid;place-items:center;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);background:var(--surface);transition:background .2s,transform .3s var(--spring),box-shadow .2s}
.card-go .icon{transform:rotate(-45deg);transition:transform .3s var(--spring)}
.card-go:hover{background:var(--ink);color:#fff;box-shadow:none}.card-go:hover .icon{transform:rotate(0)}
input,select,textarea{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:9px 14px;min-height:42px;transition:border-color .15s,box-shadow .15s;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(10,11,16,.06)}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{width:100%;min-height:110px;resize:vertical;line-height:1.55}
input[type=checkbox]{accent-color:var(--ink);width:16px;height:16px;min-height:0;padding:0}input[type=range]{accent-color:var(--ink);border:0;padding:0}
select{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236C707C' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.search-input{position:relative;display:flex;align-items:center}.search-input .icon{position:absolute;left:14px;color:var(--faint);width:16px;height:16px;pointer-events:none}.search-input input{padding-left:38px;width:100%;border-radius:999px;background:var(--surface-2);border-color:transparent}
.search-input input:focus{background:var(--surface);border-color:var(--ink)}
.toggle{width:46px;height:28px;background:#D9DCE2;border-radius:99px;position:relative;flex-shrink:0;transition:background .25s var(--ease)}
.toggle:after{content:'';width:22px;height:22px;border-radius:50%;background:#fff;position:absolute;left:3px;top:3px;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .35s var(--spring)}
.toggle.on{background:var(--ink)}.toggle.on:after{transform:translateX(18px)}

/* ---------- badges & status ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:550;background:var(--surface-3);color:var(--ink-2);white-space:nowrap}
.badge.red{background:var(--down-bg);color:var(--down)}.badge.amber{background:var(--warn-bg);color:var(--warn)}.badge.green{background:var(--up-bg);color:var(--up)}.badge.blue{background:var(--tint);color:var(--phthalo)}.badge.yellow{background:var(--aureolin);color:var(--ink)}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:550;padding:3px 10px 3px 8px;border-radius:999px;background:var(--up-bg);color:var(--up);white-space:nowrap}
.status.down{background:var(--down-bg);color:var(--down)}.status.degraded,.status.unknown{background:var(--warn-bg);color:var(--warn)}.status.paused,.status.maintenance{background:var(--paused-bg);color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--up-2);display:inline-block;flex-shrink:0}
.dot.down{background:var(--down-2);box-shadow:0 0 0 0 rgba(240,74,79,.5);animation:pulseDot 1.8s infinite}.dot.degraded,.dot.unknown{background:var(--warn-2)}.dot.paused,.dot.maintenance{background:var(--paused)}
@keyframes pulseDot{70%{box-shadow:0 0 0 7px rgba(240,74,79,0)}100%{box-shadow:0 0 0 0 rgba(240,74,79,0)}}
.code{display:inline-block;background:var(--ink);color:#fff;font:600 11px var(--mono);padding:1px 6px;border-radius:6px;vertical-align:1px}
.lvl-text-ok{color:var(--up)}.lvl-text-minor{color:var(--up)}.lvl-text-warn{color:var(--warn)}.lvl-text-bad{color:var(--down)}.lvl-text-none{color:var(--faint)}
.delta{font-weight:600;font-size:12px;padding:2px 8px;border-radius:999px}.delta.good{background:var(--up-bg);color:var(--up)}.delta.bad{background:var(--down-bg);color:var(--down)}

/* ---------- app shell: floating sidebar on a soft canvas ---------- */
.sidebar{position:fixed;top:var(--gutter);bottom:var(--gutter);left:var(--gutter);width:var(--side);z-index:40;display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r-lg);view-transition-name:sidebar}
.brand{display:flex;align-items:center;gap:11px;padding:20px 20px 14px;color:var(--ink)}
.jis-mark{display:block;flex-shrink:0;object-fit:contain;user-select:none}
.kpi-ico{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-2)}
.brand-text{display:flex;flex-direction:column;line-height:1.1}.brand-text b{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.03em}.brand-text small{font-size:11.5px;color:var(--muted);margin-top:3px}
.nav-scroll{flex:1;overflow-y:auto;padding:4px 12px 12px;scrollbar-width:none}.nav-scroll::-webkit-scrollbar{display:none}
.nav-label{padding:16px 10px 6px;font-size:11.5px;font-weight:500;color:var(--faint)}
.nav-items{display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:11px;width:100%;height:40px;padding:0 12px;border-radius:12px;font-size:14px;font-weight:500;color:var(--ink-2);text-align:left;transition:background .2s var(--ease),color .2s,transform .25s var(--spring)}
.nav-item .icon{color:var(--muted);transition:color .2s}
.nav-item:hover{background:var(--surface-2);color:var(--ink)}.nav-item:hover .icon{color:var(--ink)}
.nav-item:active{transform:scale(.98)}
.nav-item.active{background:var(--ink);color:#fff}.nav-item.active .icon{color:var(--aureolin)}
.nav-count{margin-left:auto;font:550 11.5px var(--font);min-width:22px;height:20px;padding:0 7px;border-radius:999px;display:grid;place-items:center;background:var(--surface-3);color:var(--ink-2);font-variant-numeric:tabular-nums}
.nav-item.active .nav-count{background:rgba(255,255,255,.14);color:#fff}
.nav-count.alert{background:var(--down-2);color:#fff}
.sidebar-blip{margin:8px 12px;padding:10px 12px 10px 6px;border-radius:18px;display:flex;align-items:center;gap:6px;background:var(--surface-2);cursor:pointer;text-align:left;color:inherit;width:calc(100% - 24px);transition:background .2s}
.sidebar-blip:hover{background:var(--surface-3)}
.sidebar-blip b{display:block;font-size:13.5px;font-weight:600;line-height:1.25}.sidebar-blip small{display:block;color:var(--muted);font-size:12px;margin-top:1px}
.sidebar-footer{display:flex;align-items:center;gap:10px;padding:12px 16px 16px;border-top:1px solid var(--line-2)}
.sidebar-footer .name{font-weight:550;font-size:13.5px}.sidebar-footer small{display:block;color:var(--muted);font-size:12px}
.sidebar-footer .icon-btn{margin-left:auto;width:32px;height:32px;background:transparent}
.avatar{display:inline-grid;place-items:center;border-radius:50%;width:34px;height:34px;background:var(--surface-3);color:var(--ink);font-size:12px;font-weight:600;flex-shrink:0}
.avatar.dark{background:var(--aureolin);color:var(--ink)}.avatar.sm{width:24px;height:24px;font-size:10.5px}
.shell{margin-left:calc(var(--side) + var(--gutter));min-height:100vh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;height:72px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 28px;background:rgba(233,235,240,.82);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);view-transition-name:topbar}
.breadcrumbs{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);min-width:0;flex:1;overflow:hidden}
.breadcrumbs .current{color:var(--ink);font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb-sep{color:var(--faint)}.crumb-link{color:var(--muted);font-weight:500}.crumb-link:hover{color:var(--ink)}
.topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.search-pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 8px 0 14px;border-radius:999px;background:var(--surface);color:var(--faint);font-size:13.5px;min-width:220px;transition:box-shadow .2s}
.search-pill:hover{box-shadow:inset 0 0 0 1px var(--line)}.search-pill kbd{margin-left:auto;font:500 11px var(--font);padding:3px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.notification-indicator{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--down-2);box-shadow:0 0 0 2px var(--surface)}
.env-pill{font-size:12px;font-weight:550;height:28px;padding:0 11px;border-radius:999px;background:var(--surface);color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}.env-pill.demo{background:var(--aureolin);color:var(--ink)}
/* live "last updated" timer */
.sync{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px 0 6px;border-radius:999px;background:var(--surface);min-width:190px}
.sync-ring{width:28px;height:28px;transform:rotate(-90deg)}.sync-ring .track{stroke:var(--track)}.sync-ring .prog{stroke:var(--ink);transition:stroke-dashoffset 1s linear,stroke .3s}
.sync.stale .sync-ring .prog{stroke:var(--warn-2)}.sync.offline .sync-ring .prog{stroke:var(--down-2)}
.sync b{display:block;font-size:12.5px;font-weight:550;line-height:1.2;font-variant-numeric:tabular-nums}.sync small{display:block;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.3}
.main{flex:1;width:100%;max-width:1640px;margin:0 auto;padding:12px 28px 36px}
.view{view-transition-name:page}
.mobile-menu{display:none}.mobile-backdrop{display:none}

/* ---------- page heading ---------- */
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:8px 0 22px}
.page-heading p{color:var(--muted);font-size:14.5px;margin-top:8px;max-width:640px}
.page-heading .date-line{margin:0 0 6px;font-size:14px}
h1.display{font-size:44px;font-weight:400;letter-spacing:-.045em;line-height:1.02}
.heading-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.eyebrow{font-size:12.5px;font-weight:500;color:var(--muted);margin-bottom:6px}
.demo-line{font-size:12.5px;color:var(--faint);display:flex;align-items:center;justify-content:space-between;margin-top:26px;gap:10px;flex-wrap:wrap}.demo-line span{display:flex;align-items:center;gap:6px}

/* ---------- cards ---------- */
.panel,.card{background:var(--surface);border-radius:var(--r-lg);overflow:hidden;position:relative}
.panel-header{padding:22px 24px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel-header p{font-size:13px;color:var(--muted);margin-top:3px}.panel-title{display:flex;align-items:center;gap:8px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:22px 24px 0}
.card-head h2{font-size:17px}.card-head .sub{font-size:13px;color:var(--muted);margin-top:2px}
.card-body{padding:16px 24px 24px}
.card-kicker{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:550;color:var(--ink-2)}
.card-kicker .ico{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink)}
.card-kicker .ico .icon{width:16px;height:16px}
.notice{background:var(--surface-2);border-radius:16px;padding:14px 16px;display:flex;gap:11px;color:var(--ink-2);font-size:13.5px;line-height:1.55;margin-bottom:18px}
.notice.warning{background:var(--warn-bg);color:#7A3B00}.notice .icon{margin-top:1px;color:var(--ink)}.notice.warning .icon{color:var(--warn)}
.empty-state{padding:40px 20px;text-align:center;color:var(--muted)}.empty-state .icon{width:28px;height:28px;color:var(--faint);margin-bottom:12px}
.empty-state h3{color:var(--ink);font-size:15px;margin-bottom:4px}.empty-state p{font-size:13.5px;margin-bottom:14px}
.empty-state .blip{margin:0 auto 4px;display:block}
.hr{border:0;border-top:1px solid var(--line-2);margin:20px 0}
.divider-label{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:12.5px;font-weight:550;margin:22px 0 12px}.divider-label:after{content:'';height:1px;background:var(--line-2);flex:1}

/* ---------- overview bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.span-12{grid-column:span 12}.span-8{grid-column:span 8}.span-7{grid-column:span 7}.span-6{grid-column:span 6}.span-5{grid-column:span 5}.span-4{grid-column:span 4}.span-3{grid-column:span 3}
/* hero: the one filled brand card */
.hero{grid-column:span 6;min-height:300px;border-radius:var(--r-lg);color:#fff;padding:22px 24px 24px;position:relative;overflow:hidden;display:flex;flex-direction:column;background-color:var(--phthalo);
  background-image:repeating-radial-gradient(circle at 105% -15%,rgba(255,255,255,.075) 0 1px,transparent 1px 26px)}
.hero.state-partial,.hero.state-major{background-color:#0B1A8F}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:2}
.hero .live{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:rgba(255,255,255,.75)}
.hero .live i{width:8px;height:8px;border-radius:50%;background:var(--aureolin);box-shadow:0 0 0 0 rgba(253,242,0,.6);animation:livePulse 2.2s infinite}
@keyframes livePulse{70%{box-shadow:0 0 0 8px rgba(253,242,0,0)}100%{box-shadow:0 0 0 0 rgba(253,242,0,0)}}
.hero .card-go{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}.hero .card-go:hover{background:var(--aureolin);color:var(--ink)}
.hero-title{font-family:var(--display);font-size:40px;line-height:1.04;font-weight:400;letter-spacing:-.045em;margin:auto 0 8px;max-width:calc(100% - 130px);position:relative;z-index:2;padding-top:26px}
.hero-sub{font-size:14px;color:rgba(255,255,255,.66);max-width:calc(100% - 130px);position:relative;z-index:2}
.caps{display:flex;gap:4px;margin-top:20px;position:relative;z-index:2}
.caps i{flex:1;height:36px;border-radius:999px;background:#fff;min-width:0}
.caps i.down{background:#FF6166}.caps i.warn{background:#FFB23E}.caps i.off{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}.caps i.empty{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25)}
.view.enter .caps i{animation:capIn .6s var(--spring) both;animation-delay:calc(180ms + var(--c,0) * 16ms);transform-origin:bottom}
@keyframes capIn{from{transform:scaleY(.2);opacity:0}}
.hero-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;position:relative;z-index:2}
.chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:550;background:rgba(255,255,255,.1);color:#fff;transition:background .2s,transform .25s var(--spring)}
button.chip:hover{background:rgba(255,255,255,.2)}button.chip:active{transform:scale(.96)}
.chip .dot{width:7px;height:7px}
.hero-mascot{position:absolute;right:14px;top:58px;z-index:1;width:120px;height:120px}
.hero-mascot svg{width:100%;height:100%;display:block}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
/* stat cards */
.kpi{grid-column:span 3;padding:20px 22px 22px;display:flex;flex-direction:column;min-height:176px}
.kpi.kpi-third{grid-column:span 4}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px}
.kpi-label{font-size:14px;font-weight:500;color:var(--ink-2)}
.kpi-value{font-family:var(--display);font-size:48px;font-weight:300;letter-spacing:-.05em;line-height:1;margin-top:auto;padding-top:18px;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi-value .unit{font-size:18px;font-weight:400;color:var(--muted);letter-spacing:-.01em;margin-left:4px}
.kpi-foot{font-size:12.5px;color:var(--muted);margin-top:12px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.accent-card{background:color-mix(in srgb,var(--aureolin) 62%,#fff);color:var(--ink)}
.accent-card .kpi-label,.accent-card .kpi-foot,.accent-card .kpi-value .unit{color:rgba(10,11,16,.66)}
.accent-card .card-go{background:transparent;box-shadow:inset 0 0 0 1px rgba(10,11,16,.18)}.accent-card .card-go:hover{background:var(--ink);color:var(--aureolin)}
.spark-wrap{position:relative;height:46px;margin-top:12px}
.spark{width:100%;height:46px;display:block;overflow:visible}
.spark path.line{fill:none;stroke:var(--phthalo);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.spark.ink path.line{stroke:var(--ink)}
.spark-dot{position:absolute;left:var(--x);top:var(--y);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--aureolin) 62%,#fff)}
.card:not(.accent-card) .spark-dot{background:var(--phthalo);box-shadow:0 0 0 3px #fff}
/* gauge */
.ring-card{grid-column:span 3;padding:20px 22px 18px;display:flex;flex-direction:column}
.gauge{position:relative;width:100%;max-width:230px;margin:14px auto 0}.gauge svg{width:100%;display:block;overflow:visible}
.gauge .seg{fill:none;stroke-width:18}
.gauge-center{position:absolute;left:0;right:0;bottom:0;text-align:center}
.gauge-center b{display:block;font-family:var(--display);font-size:40px;font-weight:300;letter-spacing:-.05em;line-height:1}.gauge-center small{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.legend-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;margin-top:14px}
.legend-list button{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:6px 8px;border-radius:10px;text-align:left;color:var(--ink-2);transition:background .15s;min-width:0;white-space:nowrap}
.legend-list button:hover{background:var(--surface-2)}.legend-list b{margin-left:auto;font-weight:550;color:var(--ink);font-variant-numeric:tabular-nums}
.legend-list i{width:10px;height:10px;border-radius:3px;flex-shrink:0}.legend-list i.hatch{background:var(--hatch);box-shadow:inset 0 0 0 1px #CFD3DB}
/* lists inside cards */
.list-card .row-item{display:flex;align-items:center;gap:12px;padding:12px 24px;border-top:1px solid var(--line-2);cursor:pointer;transition:background .15s}
.list-card .row-item:hover{background:var(--surface-2)}
.row-item .ri-main{flex:1;min-width:0}.row-item .ri-main b{display:block;font-weight:550;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-item .ri-main small{display:block;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-item .ri-time{font:500 13px var(--mono);color:var(--down);white-space:nowrap}
.row-item .ri-time.warn{color:var(--warn)}.row-item .ri-actions{display:flex;gap:6px}
.pill-state{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;flex-shrink:0;background:var(--down-bg);color:var(--down)}
.pill-state.warn{background:var(--warn-bg);color:var(--warn)}.pill-state.ok{background:var(--up-bg);color:var(--up)}.pill-state.blue{background:var(--surface-2);color:var(--ink)}
.card-foot{padding:12px 24px;border-top:1px solid var(--line-2);display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--muted)}
.server-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:12px 24px;border-top:1px solid var(--line-2);align-items:center}
.server-row .dots{display:flex;flex-wrap:wrap;gap:3px;grid-column:1/-1}.server-row .dots i{width:14px;height:8px;border-radius:99px;background:var(--lvl-ok)}
.server-row .dots i.down{background:var(--lvl-bad)}.server-row .dots i.degraded,.server-row .dots i.unknown{background:var(--lvl-warn)}.server-row .dots i.paused{background:var(--hatch);box-shadow:inset 0 0 0 1px #CFD3DB}

/* ---------- AI panel ---------- */
.ai-panel{padding:22px 24px;height:100%}
.ai-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.ai-head h3{font-size:17px;font-weight:550;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.ai-spark{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:999px;background:var(--ink);color:var(--aureolin);font-size:14px}
.ai-text{font-size:14px;line-height:1.62;color:var(--ink-2)}.ai-text h4{font-size:12.5px;font-weight:600;color:var(--ink);margin:16px 0 4px}.ai-text h4:first-child{margin-top:2px}
.ai-text ul,.ai-text ol{margin:4px 0 8px;padding-left:20px}.ai-text li{margin:4px 0}.ai-text p{margin:4px 0}
.ai-text code{font:12.5px var(--mono);background:var(--surface-2);padding:1px 6px;border-radius:6px}
.ai-meta{margin-top:14px;font-size:12px;color:var(--faint)}
.ai-loading{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px;padding:6px 0}
.soft-note{font-size:13.5px;color:var(--muted);line-height:1.55;margin-bottom:12px}

/* ---------- websites board ---------- */
.board .section-heading,.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 24px 12px;flex-wrap:wrap}
.section-heading h2 .count{margin-left:8px;font-size:13px;color:var(--muted);font-weight:400;letter-spacing:0}
.board-heading-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.table-toolbar{padding:0 24px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.filters-right{display:flex;gap:8px;align-items:center}.filters-right .search-input input{width:250px}
.filters-right select{border-radius:999px;background-color:var(--surface-2);border-color:transparent}
.filter-tabs,.range-toggle,.period-toggle,.segmented{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:var(--surface-2)}
.filter-tabs button,.range-toggle button,.period-toggle button,.segmented button{height:32px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap;transition:background .25s var(--ease),color .2s}
.filter-tabs button:hover,.range-toggle button:hover,.period-toggle button:hover{color:var(--ink)}
.filter-tabs button.selected,.range-toggle button.selected,.period-toggle button.selected,.segmented button.selected{background:var(--ink);color:#fff}
.filter-tabs .n{font-size:11.5px;opacity:.55;margin-left:6px;font-variant-numeric:tabular-nums}
.board-rows{border-top:1px solid var(--line-2)}
.status-row{display:grid;grid-template-columns:32px minmax(200px,1.3fr) 124px 84px minmax(170px,1.4fr) 80px 18px;align-items:center;gap:14px;padding:12px 24px;border-top:1px solid var(--line-2);cursor:pointer;transition:background .15s;position:relative}
.status-row:first-child{border-top:0}
.status-row:hover{background:var(--surface-2)}.status-row.selected{background:#FEFBD0}
.status-row .avatar-site{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;font-size:11px;font-weight:600;background:var(--surface-2);color:var(--ink-2)}
.status-row.is-down .avatar-site{background:var(--down-bg);color:var(--down)}.status-row.is-paused .avatar-site{color:var(--faint)}
.sr-name{min-width:0}.sr-name strong{display:block;font-weight:550;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-name small{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden}
.sr-tags{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap}.sr-tags .badge{font-size:11px;padding:2px 8px}
.sr-uptime{font:500 13.5px var(--mono);text-align:right}
.sr-resp{font:400 12.5px var(--mono);color:var(--muted);text-align:right}.sr-resp.slow{color:var(--warn)}
.status-row .chev{color:var(--faint);transition:transform .3s var(--spring),color .15s}.status-row:hover .chev{transform:translateX(3px);color:var(--ink)}
.status-row .select-box{display:none}
.selecting .status-row{grid-template-columns:22px 32px minmax(200px,1.3fr) 124px 84px minmax(170px,1.4fr) 80px 18px}
.selecting .status-row .select-box{display:block}
.state-label{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:550;white-space:nowrap;color:var(--up)}
.state-label small{font-size:12px;font-weight:400;color:var(--muted)}
.state-dot{width:8px;height:8px;border-radius:50%;background:var(--up-2)}
.state-down{color:var(--down)}.state-down .state-dot{background:var(--down-2);animation:pulseDot 1.8s infinite}
.state-degraded,.state-unknown{color:var(--warn)}.state-degraded .state-dot,.state-unknown .state-dot{background:var(--warn-2)}
.state-disputed{color:#9A6700}.state-disputed .state-dot{background:#FFC53D;box-shadow:0 0 0 3px #FFF6D6}
.state-paused,.state-maintenance{color:var(--muted)}.state-paused .state-dot,.state-maintenance .state-dot{background:var(--paused)}
/* uptime history strip: capsules, hatched where there is no data */
.sbars{display:flex;gap:2px;height:26px;align-items:stretch;width:100%}
.sbars span{flex:1;min-width:1px;border-radius:99px;background:var(--lvl-none);transform-origin:bottom;transition:transform .25s var(--spring),filter .15s}
.sbars span:hover{filter:brightness(.88);transform:scaleY(1.12)}
.sbars.compact{height:24px}.sbars.tall{height:48px;gap:3px}
.sbars .lvl-ok,.board-legend .lvl-ok{background:var(--lvl-ok)}.sbars .lvl-minor,.board-legend .lvl-minor{background:var(--lvl-minor)}.sbars .lvl-warn,.board-legend .lvl-warn{background:var(--lvl-warn)}.sbars .lvl-bad,.board-legend .lvl-bad{background:var(--lvl-bad)}
.sbars .lvl-none,.board-legend .lvl-none{background:var(--hatch),#F4F5F7}.sbars .lvl-paused{background:var(--hatch),#F4F5F7}
.board-legend{display:flex;gap:16px;flex-wrap:wrap;padding:12px 24px;border-top:1px solid var(--line-2);font-size:12px;color:var(--muted)}
.board-legend span{display:inline-flex;align-items:center;gap:6px}.board-legend i{width:12px;height:8px;border-radius:99px;display:inline-block}
.bulk-bar{position:sticky;bottom:16px;z-index:20;margin:12px auto 0;max-width:880px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 10px 10px 20px;border-radius:999px;background:var(--ink);color:#fff;box-shadow:var(--shadow-pop);animation:bulkIn .45s var(--spring)}
.bulk-bar b{font-size:14px;font-weight:550}.bulk-bar select{min-height:36px;border-radius:999px;background-color:rgba(255,255,255,.1);border-color:transparent;color:#fff}.bulk-bar select option{color:var(--ink)}
.bulk-bar .btn.ghost{color:rgba(255,255,255,.75)!important}.bulk-bar .btn.ghost:hover{background:rgba(255,255,255,.1);color:#fff!important}
.bulk-bar .spacer{flex:1}
@keyframes bulkIn{from{transform:translateY(30px) scale(.96);opacity:0}}
.table-footer{padding:12px 24px;border-top:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--muted);gap:10px;flex-wrap:wrap}
.pagination{display:flex;gap:4px;flex-wrap:wrap}.pagination button{min-width:32px;height:32px;border-radius:999px;font-size:13px;font-weight:500;color:var(--muted);transition:background .15s}
.pagination button:hover{background:var(--surface-2);color:var(--ink)}.pagination button.active{background:var(--ink);color:#fff}

/* ---------- tables & other pages ---------- */
.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;text-align:left}
th{font-size:12px;font-weight:500;color:var(--muted);border-bottom:1px solid var(--line-2);padding:11px 16px;white-space:nowrap}
td{padding:13px 16px;border-bottom:1px solid var(--line-2);font-size:13.5px;vertical-align:middle}
th:first-child,td:first-child{padding-left:24px}th:last-child,td:last-child{padding-right:24px}
tbody tr{transition:background .15s}tbody tr[data-incident]:hover,tbody tr[data-site]:hover,tbody tr[data-client]:hover{background:var(--surface-2);cursor:pointer}
.site-name{display:flex;align-items:center;gap:10px}.site-name strong{font-weight:550}.site-name small{display:block;color:var(--muted)}
.site-stamp{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-2);font-weight:600;font-size:11.5px}
.owner-name{color:var(--muted)}
.mini-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.mini-stat{background:var(--surface);border-radius:var(--r-lg);padding:18px 20px}
.dialog .mini-stat{background:var(--surface-2)}
.mini-stat label{font-size:13px;color:var(--muted);display:block}.mini-stat strong{font-family:var(--display);font-size:34px;font-weight:300;letter-spacing:-.05em;display:block;margin-top:6px;line-height:1.05}.mini-stat strong.alert{color:var(--down)}
.tabs{display:flex;gap:2px;margin-bottom:20px;overflow-x:auto;scrollbar-width:none;padding:4px;border-radius:999px;background:var(--surface);width:max-content;max-width:100%}.tabs::-webkit-scrollbar{display:none}
.tab{height:34px;padding:0 16px;color:var(--muted);font-size:13.5px;font-weight:500;border-radius:999px;white-space:nowrap;flex-shrink:0;transition:background .25s var(--ease),color .2s}
.tab:hover{color:var(--ink)}.tab.active{background:var(--ink);color:#fff}
.list-tools{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px;flex-wrap:wrap}.list-tools .search-input input{width:300px;background:var(--surface)}
.page-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.client-card{padding:22px;background:var(--surface);border-radius:var(--r-lg);cursor:pointer;transition:transform .35s var(--spring),box-shadow .25s}
.client-card:hover{transform:translateY(-2px);box-shadow:0 18px 40px -24px rgba(10,11,16,.35)}
.client-card-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}.client-card-top h2{font-size:16px}
.client-logo{width:44px;height:44px;border-radius:999px;background:var(--surface-2);color:var(--ink);display:grid;place-items:center;font-weight:600;font-size:14px;flex-shrink:0}
.client-stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-2);padding-top:14px;gap:14px}
.client-stats label{font-size:12.5px;color:var(--muted);display:block}.client-stats strong{font-family:var(--display);font-size:26px;font-weight:300;letter-spacing:-.04em}
.client-contact{border-top:1px solid var(--line-2);margin-top:14px;padding-top:12px;font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;gap:8px;align-items:center}
.connection-card{background:var(--surface);border-radius:var(--r-lg);padding:22px 24px;margin-bottom:12px;display:grid;grid-template-columns:1.6fr 1fr 1fr auto;align-items:center;gap:20px}
.connection-provider{display:flex;align-items:center;gap:12px}.provider-logo{width:44px;height:44px;border-radius:999px;background:var(--up-bg);color:var(--up);display:grid;place-items:center;font-weight:700;font-size:17px}
.connection-card .caption{font-size:12.5px;color:var(--muted);display:block;margin-bottom:3px}.connection-card .value{font-size:14px;font-weight:550}
.connection-strip{display:flex;align-items:center;gap:16px;padding:14px 22px;margin-top:12px;border-radius:999px;background:var(--surface);font-size:13px;color:var(--muted);flex-wrap:wrap}
.connection-strip>strong{color:var(--ink);font-weight:550;display:flex;align-items:center;gap:7px}.connection-mini{display:flex;align-items:center;gap:6px}.connection-strip .text-link{margin-left:auto}
.settings-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);gap:12px;align-items:start}
.settings-panel{padding:24px}.settings-panel>h2{margin-bottom:4px}.settings-panel>p{font-size:13.5px;color:var(--muted);margin-bottom:10px}
.setting-line{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--line-2)}.setting-line>div:first-child{flex:1}
.setting-line strong{font-size:14px;font-weight:550}.setting-line p{font-size:13px;color:var(--muted);margin-top:3px}
.setting-line>.icon{color:var(--up)}
.policy-row{display:flex;align-items:center;gap:15px;padding:18px 24px;border-bottom:1px solid var(--line-2);background:var(--surface)}.policy-row:last-child{border-bottom:0}
.policy-row .policy-name{flex:1;min-width:150px}.policy-row p{font-size:13px;color:var(--muted);margin-top:3px}.policy-row .timing{font-size:12.5px;color:var(--muted);min-width:160px}
.code-block{background:var(--ink);color:#E6E8F0;padding:18px;border-radius:16px;font-size:12.5px;line-height:1.8;font-family:var(--mono);overflow:auto;margin-top:14px;white-space:pre}
.endpoint{display:flex;gap:12px;padding:12px 24px;border-top:1px solid var(--line-2);font-family:var(--mono);font-size:12.5px;align-items:center}
.endpoint .method{font-size:11px;font-weight:600;min-width:40px;color:var(--up)}.endpoint .method.post{color:var(--phthalo)}.endpoint .description{font-family:var(--font);color:var(--muted);margin-left:auto;font-size:12.5px}
.timeline{padding-left:8px}.timeline-entry{padding:0 0 20px 22px;border-left:1.5px solid var(--line);position:relative}
.timeline-entry:before{content:'';position:absolute;left:-6px;top:4px;width:9px;height:9px;background:var(--ink);border:2px solid var(--surface);border-radius:50%}
.timeline-entry:last-child{padding-bottom:0;border-left-color:transparent}.timeline-entry p{font-size:13.5px;color:var(--ink-2)}.timeline-entry time{font-size:12px;color:var(--faint);display:block;margin-top:3px}
.message-card{border-radius:18px;padding:16px;margin-top:12px;background:var(--surface-2)}
.message-card h3{font-size:14px;margin:8px 0}.message-card p{font-size:13.5px;color:var(--ink-2);line-height:1.6;white-space:pre-line}
.message-top{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted);align-items:center}.message-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px 0}
.detail-grid label{font-size:12.5px;color:var(--muted);display:block;margin-bottom:3px}.detail-grid span{font-size:14px;font-weight:500}
.search-result{padding:11px 12px;margin:0 -12px;border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;transition:background .15s}.search-result:hover{background:var(--surface-2)}
.selection-list{max-height:220px;overflow:auto;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);padding:6px}
.selection-list label{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:7px;border-radius:10px}.selection-list label:hover{background:var(--surface-2)}
.check-options{display:flex;flex-wrap:wrap;gap:8px}.check-option{border-radius:999px;padding:7px 12px;display:flex;align-items:center;gap:7px;font-size:13px;box-shadow:inset 0 0 0 1px var(--line);background:var(--surface)}
.day-options{display:flex;gap:8px;flex-wrap:wrap}.day-options label{display:flex;align-items:center;gap:4px;font-size:13px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-field{display:flex;flex-direction:column;gap:6px;font-size:13px}
.form-field>label,.form-label{font-weight:550;color:var(--ink-2);font-size:13px}.form-label{display:block;margin-bottom:7px}
.form-field input,.form-field select{width:100%}.form-field small{font-size:12.5px;color:var(--muted)}.form-field.full{grid-column:1/-1}
.form-field input[type=checkbox],.selection-list input[type=checkbox],.check-option input[type=checkbox],.day-options input[type=checkbox]{width:16px;height:16px;flex:0 0 16px}
.form-error{padding:11px 14px;border-radius:14px;background:var(--down-bg);color:var(--down);font-size:13.5px;margin-bottom:15px;display:none}.form-error.visible{display:block;animation:shake .4s var(--ease)}
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}

/* ---------- reports ---------- */
.report-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:12px;align-items:start}
.report-controls{padding:22px}.report-controls .form-field{margin-bottom:16px}.report-controls h2{margin-bottom:18px}.report-controls .btn{width:100%;margin-top:6px}
.report-preview{padding:28px}.report-preview-head{display:flex;justify-content:space-between;align-items:start;padding-bottom:22px;border-bottom:1px solid var(--line-2);gap:10px}
.report-preview-head h2{font-size:26px;font-weight:450;letter-spacing:-.035em;margin-top:8px}.report-preview-head p{font-size:13.5px;color:var(--muted);margin-top:6px}
.report-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:22px 0;border-bottom:1px solid var(--line-2)}
.report-stats label{color:var(--muted);font-size:12.5px;display:block}.report-stats strong{font-family:var(--display);font-size:32px;letter-spacing:-.05em;font-weight:300;display:block;margin-top:3px}.report-stats small{font-size:12px;color:var(--muted)}
.report-body{margin:22px -28px 0}.report-explainer{font-size:12.5px;color:var(--muted);padding-top:18px;line-height:1.8}
.chart-summary{display:flex;align-items:baseline;gap:10px;padding:0 24px}.chart-summary strong{font-family:var(--display);font-size:34px;font-weight:300;letter-spacing:-.05em}.chart-summary small{color:var(--muted)}
.chart-footer{padding:12px 24px;border-top:1px solid var(--line-2);display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);gap:10px}
.availability-chart{padding:6px 14px 0}.availability-chart svg{width:100%;height:auto;max-height:260px;display:block}
.availability-chart .rt-chart .area{fill:url(#rtFill)}
.legend{display:inline-flex;align-items:center;gap:6px}
.dashboard-middle{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:12px;margin-bottom:12px}.dashboard-middle.single{grid-template-columns:1fr}
.attention-item{display:flex;gap:12px;padding:14px 24px;border-top:1px solid var(--line-2);cursor:pointer;transition:background .15s}.attention-item:hover{background:var(--surface-2)}
.incident-indicator{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:var(--down-bg);color:var(--down);flex-shrink:0}
.attention-content{flex:1;min-width:0}.attention-content h3{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attention-content .meta{font-size:12.5px;color:var(--muted);margin-top:3px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.attention-bottom{padding:12px 24px;border-top:1px solid var(--line-2);font-size:12.5px;display:flex;justify-content:space-between;align-items:center;color:var(--muted)}

/* ---------- insights ---------- */
.bars-chart{display:flex;align-items:flex-end;gap:6px;height:190px;padding:18px 24px 0}
.bars-chart .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative;min-width:0}
.bars-chart .b:before{content:'';position:absolute;inset:0;border-radius:999px;background:var(--hatch);opacity:.7}
.bars-chart .b i{display:block;border-radius:999px;background:var(--ink);min-height:10px;transform-origin:bottom;position:relative;transition:background .2s}
.view.enter .bars-chart .b i,.view.enter-back .bars-chart .b i{animation:growY .7s var(--spring) both;animation-delay:calc(var(--i,0)*16ms)}
.bars-chart .b i.zero{background:transparent;min-height:0;height:0!important}
.bars-chart .b i.today{background:var(--aureolin);box-shadow:inset 0 0 0 1.5px var(--ink)}
.bars-chart .b:hover i:not(.zero){background:var(--phthalo)}
.bars-axis{display:flex;justify-content:space-between;padding:10px 24px 20px;font-size:12px;color:var(--faint)}
@keyframes growY{from{transform:scaleY(0)}}
.heat{display:grid;grid-template-columns:42px repeat(24,minmax(0,1fr));gap:3px;padding:8px 24px 22px;font-size:11px;color:var(--faint)}
.heat i{aspect-ratio:1;border-radius:99px;background:var(--surface-2);display:block}.heat .lbl{display:flex;align-items:center}
.rank-row{display:grid;grid-template-columns:minmax(0,1fr) 120px 72px;align-items:center;gap:14px;padding:12px 24px;border-top:1px solid var(--line-2);cursor:pointer;transition:background .15s}.rank-row:hover{background:var(--surface-2)}
.rank-row b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank-row .meter{height:10px;border-radius:99px;background:var(--hatch),var(--surface-2);overflow:hidden}
.rank-row .meter i{display:block;height:100%;border-radius:99px;background:var(--down-2);transform-origin:left}.view.enter .rank-row .meter i,.view.enter-back .rank-row .meter i{animation:growX .8s var(--spring) both}
.rank-row .meter.blue i{background:var(--phthalo)}.rank-row .v{text-align:right;font:500 13px var(--mono)}
@keyframes growX{from{transform:scaleX(0)}}
.gap-item{display:flex;gap:14px;padding:14px 24px;border-top:1px solid var(--line-2);align-items:flex-start}
.gap-item .gi-n{font-family:var(--display);font-size:28px;font-weight:300;min-width:40px;text-align:right;letter-spacing:-.05em;line-height:1.05}
.gap-item h4{font-size:14px;font-weight:550}.gap-item p{font-size:13px;color:var(--muted);margin-top:2px}
.gap-item details{margin-top:6px;font-size:13px}.gap-item summary{cursor:pointer;color:var(--ink);font-weight:550}
.gap-item ul{margin:6px 0 0;padding-left:18px;color:var(--ink-2)}

/* ---------- website page ---------- */
.site-page{max-width:1400px}
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-weight:500;font-size:13.5px;margin-bottom:12px;height:34px;padding:0 14px 0 10px;border-radius:999px;background:var(--surface);transition:background .15s}.back-link:hover{background:var(--surface-2)}
.site-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;padding:24px 26px;border-radius:var(--r-lg);background:var(--surface);margin-bottom:12px;position:relative;overflow:hidden}
.site-hero .eyebrow{text-transform:capitalize}
.site-hero h1{font-size:36px;font-weight:400;letter-spacing:-.045em;overflow-wrap:anywhere}.site-hero .meta-line{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:8px;color:var(--muted);font-size:14px}
.site-hero .meta-line a{font-weight:500;color:var(--ink)}.site-hero .hero-reason{margin-top:10px;font-size:14px}
.big-state{width:72px;height:72px;border-radius:999px;display:grid;place-items:center;background:var(--up-bg);color:var(--up)}
.big-state .icon{width:30px;height:30px;stroke-width:2}
.is-down .big-state{background:var(--down-bg);color:var(--down)}.is-degraded .big-state,.is-unknown .big-state{background:var(--warn-bg);color:var(--warn)}.is-paused .big-state{background:var(--paused-bg);color:var(--muted)}
.site-hero.is-down .eyebrow{color:var(--down)}.site-hero.is-up .eyebrow{color:var(--up)}.site-hero.is-degraded .eyebrow,.site-hero.is-unknown .eyebrow{color:var(--warn)}
.site-hero .hero-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin:0}
.incident-callout{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;margin-bottom:12px;background:var(--surface);box-shadow:inset 4px 0 0 var(--down-2)}
.incident-callout.disputed{box-shadow:inset 4px 0 0 #FFC53D}.incident-callout.disputed>div>.icon{color:#9A6700}.incident-callout.fix{box-shadow:inset 4px 0 0 var(--phthalo)}.incident-callout.fix>div>.icon{color:var(--phthalo)}
.incident-callout>div{display:flex;gap:12px;align-items:flex-start}.incident-callout>div>.icon{color:var(--down);margin-top:2px}
.incident-callout p{font-size:13.5px;color:var(--ink-2);margin:3px 0 7px}.incident-callout small{display:flex;gap:8px;align-items:center;color:var(--muted)}
.site-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:12px;align-items:start}
.site-side{display:flex;flex-direction:column;gap:12px;position:sticky;top:84px}
.block-title{font-size:18px;font-weight:500;letter-spacing:-.025em;margin:24px 4px 10px}.block-title:first-child{margin-top:0}.block-title span{font-weight:400;color:var(--muted);margin-left:6px;font-size:14px}
.panel.pad{padding:22px 24px}
.big-pct{font-family:var(--display);font-size:40px;font-weight:300;letter-spacing:-.05em;margin-bottom:14px;font-variant-numeric:tabular-nums;line-height:1}
.axis-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--faint);margin-top:8px}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px}.stat-row.four{grid-template-columns:repeat(4,1fr);margin-top:0}
.stat-row>div{padding:4px 18px;border-left:1px solid var(--line-2)}.stat-row>div:first-child{border-left:0;padding-left:0}
.stat-row strong{display:block;font-family:var(--display);font-size:28px;font-weight:300;letter-spacing:-.05em;font-variant-numeric:tabular-nums;line-height:1.1}
.stat-row span{display:block;font-size:12.5px;color:var(--muted);margin-top:4px}.stat-row small{display:block;font-size:12px;color:var(--warn);margin-top:2px}
.rt-chart{width:100%;height:auto;display:block}.rt-chart .grid{stroke:var(--line-2);stroke-dasharray:2 6}.rt-chart .axis{fill:var(--faint);font-size:10px;font-family:var(--font)}
.rt-chart .line{fill:none;stroke:var(--phthalo);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.rt-chart .area{fill:url(#rtFill)}
.view.enter .rt-chart .line,.view.enter-back .rt-chart .line,.view.enter .spark path.line,.view.enter-back .spark path.line{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.3s var(--ease) .15s forwards}
.view.enter .rt-chart .area,.view.enter-back .rt-chart .area{opacity:0;animation:fadeIn .8s .5s var(--ease) forwards}
.view.enter .spark-dot{opacity:0;animation:fadeIn .4s 1.2s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes fadeIn{to{opacity:1}}
.events{list-style:none;margin:0;padding:0}.ev{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line-2)}.ev:first-child{border-top:0;padding-top:2px}
.ev>.icon{width:32px;height:32px;border-radius:999px;padding:7px;flex-shrink:0}
.ev-down>.icon{color:var(--down);background:var(--down-bg)}.ev-up>.icon{color:var(--up);background:var(--up-bg)}.ev-info>.icon{color:var(--warn);background:var(--warn-bg)}
.ev h4{margin:0;font-size:14px;font-weight:550;line-height:1.35}.ev h4 small{font-size:12.5px;font-weight:400}.ev p{font-size:13.5px;color:var(--ink-2);margin-top:3px}.ev time{display:block;font-size:12.5px;color:var(--faint);margin-top:4px}
.more-events{margin-top:10px}
.details h3{font-size:15px;margin-bottom:12px}.details h3:not(:first-child){margin-top:20px}.details p{font-size:13.5px;margin:4px 0}
.details dl{display:grid;grid-template-columns:100px 1fr;gap:10px 12px;margin:0;font-size:13.5px}.details dt{color:var(--muted)}.details dd{margin:0;min-width:0;overflow-wrap:anywhere;font-weight:500}.details .red{color:var(--down)}
.qc-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}.qc-head b{display:block;font-size:15px;font-weight:550}.qc-head small{display:block;color:var(--muted)}
.qc-bars{display:flex;gap:2px;height:28px}.qc-bars i{flex:1;border-radius:99px;background:var(--lvl-ok)}.qc-bars i.fail{background:var(--lvl-bad)}.qc-bars i.none{background:var(--hatch),#F4F5F7}.qc-bars i.blocked{background:#C9CDD6}
.kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line-2);font-size:13.5px}.kv:first-of-type{border-top:0}.kv span{color:var(--muted)}.kv b{font-weight:500;text-align:right;overflow-wrap:anywhere}

/* ---------- dialogs, toast, login, loading ---------- */
.overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(10,11,16,.32);-webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%);animation:fadeIn .25s var(--ease) both;opacity:0}
.dialog{background:var(--surface);border-radius:28px;width:620px;max-width:100%;max-height:92vh;display:flex;flex-direction:column;box-shadow:var(--shadow-pop);animation:dialogIn .45s var(--spring)}
.dialog.wide{width:880px}
@keyframes dialogIn{from{transform:translateY(14px) scale(.97);opacity:0}}
.dialog-header{padding:24px 26px 14px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.dialog-header h2{font-size:22px;font-weight:500;letter-spacing:-.03em}.dialog-header p{font-size:13.5px;color:var(--muted);margin-top:4px}
.dialog-header .icon-btn{background:var(--surface-2)}
.dialog-body{padding:6px 26px 22px;overflow-y:auto;flex:1;min-height:0}
.dialog-footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--line-2);border-radius:0 0 28px 28px;flex-wrap:wrap}
.drawer-overlay{justify-content:flex-end;padding:12px}
.drawer{width:560px;height:100%;max-height:100%;border-radius:28px;animation:drawerIn .5s var(--spring)}
@keyframes drawerIn{from{transform:translateX(50px);opacity:0}}
.closing-ghost{pointer-events:none!important;animation:fadeOut .2s var(--out) forwards!important;opacity:1}
.closing-ghost .dialog-out{background:var(--surface);border-radius:28px;width:620px;max-width:100%;max-height:92vh;display:flex;flex-direction:column;box-shadow:var(--shadow-pop);animation:dialogOut .2s var(--out) forwards}
.closing-ghost .dialog-out.wide{width:880px}.closing-ghost .dialog-out.drawer{width:560px;height:100%;animation:drawerOut .24s var(--out) forwards}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes dialogOut{to{transform:translateY(10px) scale(.97);opacity:0}}@keyframes drawerOut{to{transform:translateX(40px);opacity:0}}
.nav-scroll,.filter-tabs,.range-toggle,.period-toggle,.tabs{position:relative}
.nav-item,.filter-tabs button,.range-toggle button,.period-toggle button,.tab{position:relative;z-index:1}
.slide-ghost{position:absolute;z-index:0;border-radius:999px;background:var(--ink);pointer-events:none}.nav-scroll .slide-ghost{border-radius:12px}
.sliding{background:transparent!important;color:var(--ink-2)!important}.sliding .icon{color:var(--muted)!important}.sliding .nav-count{background:var(--surface-3)!important;color:var(--ink-2)!important}
#toast-root,.toast{pointer-events:none}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;height:48px;padding:0 20px 0 16px;border-radius:999px;box-shadow:var(--shadow-pop);z-index:100;display:flex;gap:10px;align-items:center;font-size:14px;font-weight:500;max-width:calc(100vw - 32px);animation:toastIn .5s var(--spring)}
.toast.error{background:var(--down)}.toast .icon{width:17px;color:var(--aureolin)}.toast.error .icon{color:#fff}
@keyframes toastIn{from{transform:translate(-50%,20px) scale(.94);opacity:0}}
.loading{height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;text-align:center}.loading p{color:var(--muted)}
.loader{border:2.5px solid var(--line);border-top-color:var(--ink);width:24px;height:24px;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* from the Meridian Motion Kit */
.kit-caps rect{transform-box:fill-box;transform-origin:center;animation:kitWave 1.1s var(--ease) infinite}
@keyframes kitWave{0%,100%{transform:scaleY(.38);opacity:.45}45%{transform:scaleY(1);opacity:1}}
.kit-dots circle{animation:kitHop 1.2s var(--ease) infinite}
@keyframes kitHop{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-6px);opacity:1}}
.kit-dots{overflow:visible;flex-shrink:0}
.login-shell{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;padding:var(--gutter);gap:var(--gutter)}
.login-brand{position:relative;overflow:hidden;padding:44px;border-radius:var(--r-xl);color:rgba(255,255,255,.72);display:flex;flex-direction:column;justify-content:space-between;background-color:var(--phthalo);background-image:repeating-radial-gradient(circle at 100% 0%,rgba(255,255,255,.07) 0 1px,transparent 1px 30px)}
.login-brand h1{font-size:60px;font-weight:400;line-height:1;color:#fff;letter-spacing:-.05em;max-width:520px}.login-brand h1 em{font-style:normal;color:var(--aureolin)}
.login-brand p{font-size:16px;max-width:420px;margin-top:18px;line-height:1.55}
.login-brand .blip{position:absolute;right:36px;bottom:30px}
.login-form-wrap{display:flex;align-items:center;justify-content:center;padding:30px;background:var(--surface);border-radius:var(--r-xl)}
.login-form{max-width:360px;width:100%}.login-form h2{font-size:34px;font-weight:400;letter-spacing:-.045em;margin-bottom:6px}.login-form>p{font-size:14.5px;color:var(--muted);margin-bottom:28px}
.login-form .form-field{margin-bottom:16px}.login-form .btn{width:100%;margin-top:8px;height:48px;font-size:15px}.login-small{font-size:12.5px;color:var(--faint);margin-top:24px;text-align:center}

/* ---------- motion: calm entrances and page transitions ---------- */
.view.enter .rise,.view.enter-back .rise{animation:riseIn .7s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}}
.view.enter .sbars,.view.enter-back .sbars{animation:stripIn .9s var(--ease) both;animation-delay:calc(140ms + var(--r,0) * 30ms)}
@keyframes stripIn{from{clip-path:inset(0 100% 0 0 round 99px)}to{clip-path:inset(0 0 0 0 round 0)}}
.view.enter .status-row,.view.enter-back .status-row{animation:rowIn .55s var(--ease) both;animation-delay:calc(60ms + var(--r,0) * 30ms)}
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}}
.status-row:nth-child(1){--r:0}.status-row:nth-child(2){--r:1}.status-row:nth-child(3){--r:2}.status-row:nth-child(4){--r:3}.status-row:nth-child(5){--r:4}.status-row:nth-child(6){--r:5}.status-row:nth-child(7){--r:6}.status-row:nth-child(8){--r:7}.status-row:nth-child(9){--r:8}.status-row:nth-child(10){--r:9}.status-row:nth-child(11){--r:10}.status-row:nth-child(12){--r:11}.status-row:nth-child(13){--r:12}.status-row:nth-child(14){--r:13}.status-row:nth-child(15){--r:14}.status-row:nth-child(16){--r:15}.status-row:nth-child(17){--r:16}.status-row:nth-child(18){--r:17}.status-row:nth-child(19){--r:18}.status-row:nth-child(20){--r:19}
.view.enter .list-card .row-item,.view.enter .rank-row,.view.enter .gap-item{animation:rowIn .5s var(--ease) both;animation-delay:calc(200ms + var(--r,0) * 35ms)}
.row-item:nth-of-type(1),.rank-row:nth-of-type(1),.gap-item:nth-of-type(1){--r:0}.row-item:nth-of-type(2),.rank-row:nth-of-type(2),.gap-item:nth-of-type(2){--r:1}.row-item:nth-of-type(3),.rank-row:nth-of-type(3),.gap-item:nth-of-type(3){--r:2}.row-item:nth-of-type(4),.rank-row:nth-of-type(4),.gap-item:nth-of-type(4){--r:3}.row-item:nth-of-type(5),.rank-row:nth-of-type(5),.gap-item:nth-of-type(5){--r:4}.row-item:nth-of-type(6),.rank-row:nth-of-type(6),.gap-item:nth-of-type(6){--r:5}.row-item:nth-of-type(7),.rank-row:nth-of-type(7),.gap-item:nth-of-type(7){--r:6}.row-item:nth-of-type(8),.rank-row:nth-of-type(8),.gap-item:nth-of-type(8){--r:7}.row-item:nth-of-type(9),.rank-row:nth-of-type(9),.gap-item:nth-of-type(9){--r:8}.row-item:nth-of-type(10),.rank-row:nth-of-type(10),.gap-item:nth-of-type(10){--r:9}
html.no-vt .view.enter,html.no-vt .view.enter-back{animation:viewIn .35s var(--ease) both}@keyframes viewIn{from{opacity:0}}
.view.enter .gauge .seg,.view.enter-back .gauge .seg{animation:gaugeIn 1.1s var(--ease) .15s both}@keyframes gaugeIn{from{stroke-dasharray:0 200}}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-old(page){animation:vtOut .16s var(--out) both}
::view-transition-new(page){animation:vtIn .32s var(--ease) both}
::view-transition-old(sidebar),::view-transition-old(topbar){display:none}::view-transition-new(sidebar),::view-transition-new(topbar){animation:none}
::view-transition-group(sidebar),::view-transition-group(topbar){animation:none}
::view-transition-group(site-card){animation-duration:.5s;animation-timing-function:var(--ease)}
::view-transition-group(site-title){animation-duration:.5s;animation-timing-function:var(--ease)}
::view-transition-old(site-card),::view-transition-new(site-card){height:100%;overflow:hidden;animation-duration:.35s}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}}

/* ---------- responsive ---------- */
@media (max-width:1400px){.hero{grid-column:span 12}.ring-card{grid-column:span 6}.kpi,.kpi.kpi-third{grid-column:span 6}.span-7,.span-5{grid-column:span 12}.span-4{grid-column:span 6}}
@media (min-width:1401px) and (max-width:1600px){.status-row{grid-template-columns:32px minmax(180px,1.3fr) 118px 78px minmax(140px,1.2fr) 72px 18px}}
@media (max-width:1180px){:root{--side:224px}.main{padding:10px 20px 30px}.topbar{padding:0 20px}.site-grid{grid-template-columns:minmax(0,1fr)}.site-side{position:static}.page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-layout{grid-template-columns:1fr}.settings-layout{grid-template-columns:1fr}.connection-card{grid-template-columns:1.4fr 1fr auto}.connection-card .sync-detail{display:none}.search-pill{min-width:0;padding:0 12px}.search-pill span,.search-pill kbd{display:none}
  .status-row{grid-template-columns:32px minmax(160px,1.2fr) 112px 74px minmax(110px,1fr) 18px}.status-row .sr-resp{display:none}.selecting .status-row{grid-template-columns:22px 32px minmax(160px,1.2fr) 112px 74px minmax(110px,1fr) 18px}}
@media (max-width:860px){.ring-card,.kpi,.kpi.kpi-third,.span-4,.span-6,.span-3,.span-8{grid-column:span 12}h1.display{font-size:36px}.sync{min-width:0;padding:0 6px}.sync div{display:none}.env-pill{display:none}}
@media (max-width:760px){
  :root{--gutter:0px}
  .sidebar{top:8px;bottom:8px;left:8px;transform:translateX(-110%);transition:transform .45s var(--spring);width:272px;box-shadow:var(--shadow-pop)}.sidebar.open{transform:none}
  .mobile-backdrop.open{display:block;position:fixed;inset:0;background:rgba(10,11,16,.35);z-index:35;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .shell{margin-left:0}.mobile-menu{display:inline-flex}.topbar{height:62px;padding:0 12px}.main{padding:6px 10px 28px}
  .breadcrumbs .workspace-crumb,.breadcrumbs .crumb-sep,.breadcrumbs .crumb-link{display:none}
  h1{font-size:28px}h1.display{font-size:32px}.page-heading{flex-wrap:wrap;align-items:flex-start;margin:6px 4px 16px}
  .bento{gap:10px}
  .hero{padding:20px 18px 20px;min-height:0}.hero-title{font-size:30px;max-width:calc(100% - 90px)}.hero-sub{max-width:calc(100% - 90px)}.hero-mascot{width:84px;height:84px;right:8px;top:54px}.caps{gap:3px}.caps i{height:28px}
  .kpi-value{font-size:40px}.kpi{min-height:0}
  .status-row,.selecting .status-row{grid-template-columns:32px minmax(0,1fr) auto;row-gap:8px;padding:12px 16px}
  .status-row .select-box{grid-row:1}.selecting .status-row{grid-template-columns:22px 32px minmax(0,1fr) auto}
  .status-row .sr-bars{grid-column:1/-1}.status-row .chev,.status-row .sr-uptime{display:none}
  .table-toolbar,.section-heading,.board-legend,.table-footer{padding-left:16px;padding-right:16px}
  .filter-tabs{max-width:100%;overflow-x:auto;scrollbar-width:none}.filter-tabs::-webkit-scrollbar{display:none}
  .filters-right{width:100%}.filters-right .search-input{flex:1}.filters-right .search-input input{width:100%}
  .site-hero{grid-template-columns:1fr;padding:20px}.big-state{width:52px;height:52px}.site-hero h1{font-size:30px}.site-hero .hero-actions{justify-content:flex-start}
  .stat-row.four{grid-template-columns:1fr 1fr;row-gap:14px}.stat-row.four>div:nth-child(3){border-left:0;padding-left:0}.stat-row>div{padding:4px 12px}
  .page-grid{grid-template-columns:1fr}.mini-stat-grid{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}
  .connection-card{grid-template-columns:1fr auto;padding:18px}.connection-card .monitor-total{display:none}.connection-strip{border-radius:var(--r-lg)}
  .login-shell{grid-template-columns:1fr;padding:0}.login-brand{display:none}.login-form-wrap{border-radius:0}
  .closing-ghost .dialog-out{border-radius:28px 28px 20px 20px}.closing-ghost .dialog-out.drawer{width:100%;height:94vh;border-radius:28px 28px 0 0;margin-top:auto}
  .overlay{padding:8px;align-items:flex-end}.dialog{border-radius:28px 28px 20px 20px;max-height:94vh}.drawer-overlay{padding:0}.drawer{border-radius:28px 28px 0 0;height:94vh;margin-top:auto}
  .endpoint .description{display:none}.policy-row{flex-wrap:wrap}.policy-row .timing{display:none}.heat{grid-template-columns:30px repeat(24,minmax(0,1fr));gap:2px;padding:6px 16px 16px}
  .rank-row{grid-template-columns:minmax(0,1fr) 70px 60px;padding:11px 16px}.bulk-bar{bottom:10px;border-radius:24px}
  .bars-chart{gap:3px;padding:14px 16px 0}
  .sbars.tall{gap:1px;height:40px}.panel.pad{padding:20px}.kpi{padding:18px 20px}
  .tabs{width:100%}.list-tools .search-input input{width:100%}.list-tools .search-input{flex:1}
  .list-card .row-item{flex-wrap:wrap;padding:12px 18px}.row-item .ri-main{flex:1 1 calc(100% - 110px)}.row-item .ri-actions{flex-basis:100%;padding-left:48px}.row-item .ri-actions:empty{display:none}
  .incident-callout{flex-direction:column;align-items:stretch}.incident-callout small{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
@media print{body{background:#fff}.sidebar,.topbar,.page-heading,.report-controls,.demo-line,.connection-strip,.heading-actions,.btn,.skip-link,.overlay,#toast-root,.bulk-bar{display:none!important}.shell{margin:0}.main{padding:0}.report-layout{display:block}.report-preview{padding:15px}.report-body{margin-left:0;margin-right:0}.table-wrap{overflow:visible}.no-print{display:none!important}th{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
/* live-update indicator */
.ld{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:0;background:var(--warn-2)}
.ld.live{background:var(--up-2);animation:ldPulse 2.4s ease-out infinite}.ld.down{background:var(--down-2)}
@keyframes ldPulse{0%{box-shadow:0 0 0 0 rgba(45,190,96,.55)}70%{box-shadow:0 0 0 6px rgba(45,190,96,0)}100%{box-shadow:0 0 0 0 rgba(45,190,96,0)}}
@media (prefers-reduced-motion:reduce){.ld.live{animation:none}}
/* ---------- help and terms ---------- */
[data-help]:not(button):not(.badge):not(.status):not(.grade):not(.clock){cursor:help}
.badge[data-help],.status[data-help]{cursor:help}
.help-dot{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;border:0;background:var(--surface-3);color:var(--ink-2);font:600 10.5px/1 var(--sans,inherit);cursor:help;vertical-align:1px;margin-left:3px;padding:0;transition:background .15s,color .15s}
.help-dot:hover,.help-dot:focus-visible{background:var(--phthalo);color:#fff;outline:none}
.tip{position:fixed;z-index:1000;max-width:320px;padding:11px 13px;border-radius:14px;background:#10131C;color:#E9EBF0;font-size:12.5px;line-height:1.45;box-shadow:0 12px 32px rgba(10,11,16,.28);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .14s,transform .14s;left:-999px;top:-999px}
.tip.open{opacity:1;transform:translateY(0);pointer-events:auto}
.tip b{display:block;color:#fff;font-weight:600;margin-bottom:3px;font-size:13px}
.tip span{display:block}
.glossary dl{margin:14px 0 0;display:grid;gap:0}
.gl-row{display:grid;grid-template-columns:200px 1fr;gap:18px;padding:12px 0;border-top:1px solid var(--line-2)}
.gl-row dt{font-weight:600;font-size:13.5px}.gl-row dd{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.5}
@media (max-width:700px){.gl-row{grid-template-columns:1fr;gap:4px}}
/* ---------- Jamaica clock ---------- */
.clock{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;height:40px;padding:0 14px;border-radius:999px;border:0;background:var(--surface);color:var(--ink);cursor:pointer;text-align:left;min-width:112px;transition:background .15s}
.clock:hover{background:var(--surface-3)}
.clock b{font:600 13.5px/1.15 var(--mono,'Geist Mono',monospace);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.clock small{font-size:11px;color:var(--muted);line-height:1.2}
@media (max-width:860px){.clock{min-width:0;padding:0 10px}.clock small{display:none}}
.seg{display:inline-flex;gap:6px;margin-top:10px}.seg .btn.selected{background:var(--ink);color:#fff}
/* ---------- policies ---------- */
.plain-fieldset{border:0;margin:0;padding:0;min-width:0}
.plain-fieldset[disabled] input,.plain-fieldset[disabled] select{opacity:.75}
.policy-toggle{cursor:pointer;gap:16px}
.switch{position:relative;flex:none;width:42px;height:24px;display:inline-block}
.switch input[type=checkbox]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.switch-ui{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:background .2s}
.switch-ui::before{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s var(--ease)}
.switch input:checked+.switch-ui{background:var(--phthalo)}.switch input:checked+.switch-ui::before{transform:translateX(18px)}
.switch input:focus-visible+.switch-ui{outline:2px solid var(--phthalo);outline-offset:2px}
.switch input:disabled{cursor:not-allowed}.switch input:disabled+.switch-ui{opacity:.6}
.num-unit{display:flex;align-items:center;gap:8px;flex:none}.num-unit input{width:78px;text-align:right}.num-unit small{color:var(--muted);font-size:12px;white-space:nowrap}
.rule-locked{display:flex;gap:12px;padding:13px 14px;border-radius:16px;background:var(--tint);color:var(--phthalo);margin:12px 0 4px}
.rule-locked .icon{flex:none;margin-top:2px}.rule-locked strong{display:block;color:var(--ink);font-size:13.5px}.rule-locked p{margin:3px 0 0;color:var(--ink-2);font-size:12.5px;line-height:1.5}
/* ---------- incident tickets and write-ups ---------- */
.inc-block{margin-top:16px;padding:14px 16px;border-radius:18px;background:var(--surface-2)}
.inc-block.needs{background:var(--warn-bg)}
.inc-block-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.inc-block-head h3{margin:0}
.ticket-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--surface);font-weight:600;font-size:13px;color:var(--phthalo);text-decoration:none}
a.ticket-chip:hover{background:var(--tint)}
.ticket-form{display:flex;gap:8px;flex-wrap:wrap}.ticket-form input{flex:1 1 180px;min-width:0}
.wu-part{margin-top:10px}.wu-part label{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}.wu-part p{margin:3px 0 0;font-size:13.5px;line-height:1.5;white-space:pre-wrap}
.wu-form textarea{min-height:84px}
.ai-draft-box{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;margin-top:16px;padding:14px 16px;border-radius:18px;background:var(--tint)}
.ai-draft-box p{margin:4px 0 8px;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.ai-draft-box .check-option{font-size:12.5px}
@media (max-width:600px){.ai-draft-box{flex-direction:column}}
/* ---------- message presets ---------- */
.preset-row{grid-template-columns:auto minmax(0,1fr) auto auto}
.preset-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.preset-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ph-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ph-chip{border:0;border-radius:999px;background:var(--tint);color:var(--phthalo);font:550 11.5px/1 var(--mono,'Geist Mono',monospace);padding:6px 9px;cursor:pointer}
.ph-chip:hover{background:var(--tint-2)}
@media (max-width:860px){.preset-row{grid-template-columns:auto minmax(0,1fr)}.preset-badges,.preset-actions{grid-column:1/-1;justify-content:flex-start}}
/* ---------- health ---------- */
.health-summary{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.hs-counts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hs{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:var(--surface);font-size:12.5px;color:var(--ink-2)}
.hs b{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.hs.down b,.hs.risk b{color:var(--down)}.hs.watch b{color:var(--warn)}.hs.healthy b{color:var(--up)}
.hs-sort{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}.hs-sort select{height:34px}
.health-top{display:flex;align-items:baseline;gap:10px;margin-top:14px;flex-wrap:wrap}
.grade{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--surface-3);color:var(--ink-2);align-self:center}
.grade.red{background:var(--down-bg);color:var(--down)}.grade.amber{background:var(--warn-bg);color:var(--warn)}.grade.green{background:var(--up-bg);color:var(--up)}
.health-pct{font-family:var(--display);font-size:26px;font-weight:300;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.health-top small{color:var(--muted);font-size:12px}
.health-bars{display:flex;gap:2px;height:22px;margin-top:8px}.health-bars i{flex:1;border-radius:3px;min-width:2px}
.health-trend{min-height:18px;margin-top:5px;font-size:12px}
.trend.up{color:var(--up)}.trend.down{color:var(--down)}.trend.flat{color:var(--muted)}
.health-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:10px}
.health-stats b{display:block;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}.health-stats span{font-size:12px;color:var(--muted)}
.health-stats em{font-style:normal;font-weight:600}.health-stats em.red,.health-stats .red{color:var(--down)}.health-stats em.amber,.health-stats .amber{color:var(--warn)}
.health-worst{display:flex;justify-content:space-between;gap:10px;margin-top:12px;padding:8px 12px;border-radius:12px;background:var(--surface-2);font-size:12.5px;cursor:pointer}
.health-worst:hover{background:var(--surface-3)}.health-worst b{font-variant-numeric:tabular-nums}
.health-card.grade-down{box-shadow:inset 0 3px 0 var(--down-2)}.health-card.grade-risk{box-shadow:inset 0 3px 0 var(--down-2)}.health-card.grade-watch{box-shadow:inset 0 3px 0 var(--warn-2)}
.health-card.in-dialog{padding:2px 0 4px}
/* ---------- time to acknowledge ---------- */
.tta-value{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.tta-value .badge{font-size:11.5px;letter-spacing:0}
.kpi-none{font-size:22px;color:var(--faint);letter-spacing:-.02em}
.tta-waiting{display:flex;align-items:center;gap:9px;width:100%;margin-top:10px;padding:9px 12px;border:0;border-radius:14px;background:var(--warn-bg);color:var(--warn);text-align:left;cursor:pointer;font-size:12.5px;line-height:1.35}
.tta-waiting b{color:var(--ink)}.tta-waiting span{flex:1;color:var(--ink-2)}.tta-waiting:hover{filter:brightness(.98)}
.stat-row.four-up{grid-template-columns:repeat(4,1fr)}
.stat-row.four-up>div{padding:4px 10px}.stat-row.four-up>div:first-child{padding-left:0}
.stat-row.four-up strong{font-size:24px}
.stat-row .muted{color:var(--muted)}
.mini-stat-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.health-bars .lvl-ok{background:var(--lvl-ok)}.health-bars .lvl-minor{background:var(--lvl-minor)}.health-bars .lvl-warn{background:var(--lvl-warn)}.health-bars .lvl-bad{background:var(--lvl-bad)}.health-bars .lvl-none{background:var(--hatch),#F4F5F7}
.stack{display:flex;flex-direction:column;gap:20px;min-width:0}
.settings-layout>.stack>.panel{margin:0}
@media (max-width:520px){.breadcrumbs .current,.breadcrumbs .crumb-link,.breadcrumbs .crumb-sep{display:none}.clock b{font-size:13px}}
/* ---------- providers ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.svc-grid{grid-template-columns:1fr}}
.svc-card{padding:20px 22px;display:flex;flex-direction:column;gap:10px;min-width:0}
.svc-card.lvl-major,.svc-card.lvl-critical{box-shadow:inset 0 3px 0 var(--down-2)}.svc-card.lvl-minor{box-shadow:inset 0 3px 0 var(--warn-2)}.svc-card.lvl-maintenance{box-shadow:inset 0 3px 0 var(--phthalo)}
.svc-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.svc-head h2{margin:0;font-size:18px}.svc-head small{color:var(--muted);font-size:12.5px}
.svc-affected{display:flex;flex-wrap:wrap;gap:6px}
.svc-inc{padding:10px 12px;border-radius:14px;background:var(--surface-2)}
.svc-inc-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.svc-inc b{font-size:13px}.svc-inc small{display:block;color:var(--muted);font-size:12px;margin-top:2px}.svc-inc p{margin:6px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.svc-inc a,.svc-foot a{font-size:12px;color:var(--phthalo);text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.svc-more summary{cursor:pointer;font-size:12.5px;color:var(--muted);padding:4px 0}.svc-more[open] summary{margin-bottom:8px}.svc-more .svc-inc{margin-top:6px}
.svc-sites{font-size:12.5px;color:var(--ink-2);line-height:1.6}.svc-sites .text-link{font-size:12.5px}
.svc-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line-2);padding-top:10px;margin-top:auto}.svc-foot small{color:var(--muted);font-size:12px}.svc-foot span{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.provider-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;margin:0 0 12px;border-radius:18px;background:var(--warn-bg);cursor:pointer}
.provider-banner b{display:block;font-size:13.5px}.provider-banner small{color:var(--ink-2);font-size:12.5px}.provider-banner>div{flex:1;min-width:0}
/* ---------- WordPress ---------- */
.wp-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wp-top>div{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.wp-top label{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}.wp-top b{font-size:17px;font-variant-numeric:tabular-nums;word-break:break-word}.wp-top small{color:var(--muted);font-size:12px}
@media (max-width:700px){.wp-top{grid-template-columns:1fr 1fr}}
.wp-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line-2)}.wp-row:first-of-type{border-top:0}
.wp-main{min-width:0}.wp-main b{font-size:13.5px}.wp-main small{display:block;color:var(--muted);font-size:12px;margin-top:2px;word-break:break-word}
.wp-side{display:flex;gap:6px;align-items:flex-start;flex:none}
.vuln-list{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:12.5px;line-height:1.45}.vuln-list a{color:var(--phthalo);text-decoration:none}
.wp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.icon-btn.sm{width:28px;height:28px}
.stat-btn{all:unset;display:block;cursor:pointer;border-radius:10px;width:100%;box-sizing:border-box}
.stat-btn:hover strong{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.stat-btn:focus-visible{outline:2px solid var(--phthalo);outline-offset:3px}
.server-row[data-action]{cursor:pointer;border-radius:12px}.server-row[data-action]:hover{background:var(--surface-2)}
.filter-tabs .filter-special{display:inline-flex;align-items:center;gap:6px}