/* GENERATED dari core public/assets/style.css oleh deploy/sync-portal-core-css.py: jangan diedit tangan */
html{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);}
body{margin:0; background:var(--bg); color:var(--text); font-family:'Montserrat',ui-sans-serif,system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; font-size:15px;}
.tenant-code{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;}
.page{max-width:min(1720px, 96vw); margin-inline:auto; padding-inline:20px; padding-block:18px 40px;}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--border); margin-bottom:20px;}
.brand-link{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit;}
.brand svg{color:var(--accent); flex-shrink:0;}
.brand-text{display:flex; flex-direction:column; gap:2px;}
.brand-name{font-size:1.25rem; font-weight:800; letter-spacing:-0.01em;}
.brand-tag{font-size:0.76rem; color:var(--text-muted); font-weight:500;}
.brand-tagline{font-size:0.72rem; line-height:1.2; color:var(--text-muted); font-weight:500; letter-spacing:0.01em;}
.brand-tagline b{color:var(--accent); font-weight:800;}
@media (max-width:420px){
  .brand-tagline{font-size:0.72rem;}
}
.nav{display:flex; align-items:center; gap:4px; flex-wrap:wrap;}
.nav a{text-decoration:none; color:var(--text-muted); font-weight:600; font-size:0.86rem; padding:7px 12px; border-radius:999px;}
.nav a:hover{background:var(--surface-raised); color:var(--text);}
.nav a.active{background:var(--accent-soft); color:var(--accent);}
@media (min-width:901px){
  body.has-sidebar{padding-left:240px;}
  body.has-sidebar .topbar{position:fixed; inset:0 auto 0 0; width:240px; flex-direction:column; align-items:stretch; justify-content:flex-start; flex-wrap:nowrap; gap:20px; margin:0; padding:20px 14px; background:var(--surface); border-bottom:0; border-right:1px solid var(--border); overflow-y:auto; z-index:20;}
  body.has-sidebar .nav{flex:1; flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:2px;}
  body.has-sidebar .nav a{border-radius:var(--radius-s); padding:9px 12px;}
  body.has-sidebar .nav-user{margin:auto 0 0; padding:12px 12px 4px; border-top:1px solid var(--border);}
}
.nav-user{font-size:0.8rem; color:var(--text-muted); margin-left:10px;}
.nav-logout{font-size:0.8rem !important;}
.tenant-code{font-size:0.72rem; font-weight:600; color:var(--accent); background:var(--accent-soft); padding:2px 6px; border-radius:5px; letter-spacing:0.02em;}
.status-chip{font-size:0.74rem; font-weight:700; padding:2px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap;}
.status-chip::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
.status-chip.ok{color:var(--ok); background:var(--ok-soft);}
.status-chip.warn{color:var(--warn); background:var(--warn-soft);}
.status-chip.crit{color:var(--crit); background:var(--crit-soft);}
.status-chip.info{color:var(--info); background:var(--info-soft);}
.status-chip.off{color:var(--text-muted); background:var(--surface-raised);}
.login-wrap .brand-link{justify-content:center; margin-bottom:22px;}
footer.note{margin-top:26px; font-size:0.74rem; color:var(--text-muted);}
@media (max-width:640px){
  .topbar{flex-direction:column; align-items:flex-start; gap:10px;}
  .nav{width:100%; overflow-x:auto; flex-wrap:nowrap;}
  .nav a{white-space:nowrap;}
  .nav-user{display:none;}
}
@media (max-width:420px){
  .page{padding-inline:14px;}
}
.hero{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; padding:20px 22px; border-radius:var(--radius-m); border:1px solid var(--border); background:linear-gradient(135deg, var(--surface) 0%, var(--accent-soft) 100%); box-shadow:var(--shadow); margin-bottom:18px; position:relative; overflow:hidden;}
.hero::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--accent);}
.hero.ok::before{background:var(--ok);}
.hero.warn::before{background:var(--warn);}
.hero.crit::before{background:var(--crit);}
.hero.warn{background:linear-gradient(135deg, var(--surface) 0%, var(--warn-soft) 100%);}
.hero.crit{background:linear-gradient(135deg, var(--surface) 0%, var(--crit-soft) 100%);}
.hero-main{display:flex; align-items:center; gap:18px; min-width:0;}
.hero-ring{position:relative; width:76px; height:76px; flex:none;}
.hero-ring svg{width:100%; height:100%; transform:rotate(-90deg);}
.hero.warn .ring-fg{stroke:var(--warn);}
.hero.crit .ring-fg{stroke:var(--crit);}
.hero-kicker{font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); font-weight:700;}
.hero-title{font-size:1.35rem; font-weight:800; margin:2px 0 4px; letter-spacing:-0.01em;}
.hero-sub{margin:0; font-size:0.86rem; color:var(--text-muted);}
.hero-side{display:flex; flex-direction:column; align-items:flex-end; gap:8px;}
.hero-legend{display:flex; gap:10px; font-size:0.76rem; color:var(--text-muted);}
.hero-legend .lg::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px;}
.hero-legend .ok::before{background:var(--ok);}
.hero-legend .warn::before{background:var(--warn);}
.hero-legend .crit::before{background:var(--crit);}
.hero-legend b{color:var(--text);}
@media (max-width:640px){
  .hero-side{align-items:flex-start;}
  .hero-title{font-size:1.1rem;}
}
.exp-item .status-chip{white-space:nowrap;}
.cust-row-top .status-chip{white-space:nowrap; flex:none;}
.page-wide .cust-grid{grid-template-columns:repeat(auto-fill,minmax(420px,1fr));}
@media print{
  body.has-sidebar{padding-left:0 !important;}
  .topbar, footer.note{display:none !important;}
  body{background:#fff; color:#000; font-size:12px;}
  .page{max-width:none; padding:0;}
}
.lang-switch{display:inline-flex; align-items:center; gap:2px; font-size:0.74rem; font-weight:700; color:var(--text-muted);}
.lang-switch a{padding:3px 7px !important; border-radius:6px !important;}
.nav .lang-switch{margin:10px 0 0 10px;}
.lang-switch a.active{background:var(--accent-soft); color:var(--accent);}
.lang-float{position:fixed; top:12px; right:14px; z-index:30;}
.lang-float a{text-decoration:none; color:var(--text-muted);}
@media (min-width:901px){
  body.has-sidebar .nav .lang-switch{margin:12px 0 0 0; padding:0 6px;}
}
.hero{flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:14px; padding:18px 22px 16px;}
.hero-top{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;}
.hero-badge{flex:none; width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:800; color:var(--text-muted); background:var(--surface-raised); border:1px solid var(--border);}
.hero.ok .hero-badge{color:var(--ok); background:var(--ok-soft); border-color:transparent;}
.hero.warn .hero-badge{color:var(--warn); background:var(--warn-soft); border-color:transparent;}
.hero.crit .hero-badge{color:var(--crit); background:var(--crit-soft); border-color:transparent;}
.hero-side{align-items:flex-end;}
.hero-bottom{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.health-bar{flex:1 1 220px; min-width:160px; height:8px; border-radius:99px; background:var(--surface-raised); border:1px solid var(--border); display:flex; overflow:hidden;}
.health-bar .hb{display:block; height:100%; width:0; transition:width .4s ease;}
.hb.ok{background:var(--ok);}
.hb.warn{background:var(--warn);}
.hb.crit{background:var(--crit);}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:16px 0 18px;}
.kpi{position:relative; display:flex; flex-direction:column; gap:2px; padding:14px 16px 12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); text-decoration:none; color:inherit; overflow:hidden;}
.kpi::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--border);}
.kpi.ok::before{background:var(--ok);}
.kpi.warn::before{background:var(--warn);}
.kpi.crit::before{background:var(--crit);}
a.kpi:hover{border-color:var(--accent);}
.kpi-lbl{font-size:0.72rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em;}
.kpi-val{font-family:'IBM Plex Mono',monospace; font-size:2.4rem; font-weight:600; line-height:1.15; font-variant-numeric:tabular-nums;}
.kpi.crit .kpi-val{color:var(--crit);}
.kpi.warn .kpi-val{color:var(--warn);}
.kpi-sub{font-size:0.76rem; color:var(--text-muted); min-height:1.1em;}
@media (max-width:760px){
  .kpis{grid-template-columns:repeat(2,1fr);}
  .todo-list li .tenant-code{display:none;}
  .hero-side{align-items:flex-start;}
}
.auth-lang .lang-switch a{text-decoration:none; color:var(--text-muted);}
.nav a{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.nav-badge{min-width:20px; height:20px; padding:0 6px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; line-height:1; color:var(--on-solid); background:var(--info); font-variant-numeric:tabular-nums;}
.nav-badge.crit{background:var(--crit); animation:badge-pulse 2s ease-in-out infinite;}
.nav-badge.warn{background:var(--warn);}
@media (prefers-reduced-motion:reduce){
  .nav-badge.crit{animation:none;}
}
@media (max-width:900px){
  .nav a{display:inline-flex;}
}
.page{min-width:0;}
.nav a{position:relative;}
.nav a .nav-ico{flex:none; opacity:.85;}
.nav a .nav-label{flex:1; min-width:0;}
.nav-group{display:none;}
@media (min-width:901px){
  body.has-sidebar .topbar{padding:20px 14px;}
  body.has-sidebar .nav{gap:1px;}
  body.has-sidebar .nav a{gap:11px; padding:8px 12px; font-size:.87rem; font-weight:600; border-radius:var(--radius-s); transition:background .15s, color .15s;}
  body.has-sidebar .nav a:hover{background:var(--surface-raised); color:var(--text);}
  body.has-sidebar .nav a:hover .nav-ico{opacity:1;}
  body.has-sidebar .nav a.active{background:var(--accent-soft); color:var(--accent);}
  body.has-sidebar .nav a.active .nav-ico{opacity:1;}
  body.has-sidebar .nav a.active::before{content:""; position:absolute; left:-14px; top:6px; bottom:6px; width:3px; border-radius:0 3px 3px 0; background:var(--accent);}
  body.has-sidebar .nav-group{display:block; font-size:.65rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); opacity:.75; padding:14px 12px 5px;}
  body.has-sidebar .nav-group:first-child{padding-top:4px;}
}
@media (max-width:900px){
  .nav a .nav-ico{display:none;}
}
.theme-switch{display:inline-flex; align-items:center; gap:2px; padding:2px; border:1px solid var(--border); border-radius:999px; background:var(--surface-raised);}
.theme-switch button{all:unset; box-sizing:border-box; width:28px; height:24px; display:inline-grid; place-items:center; border-radius:999px; color:var(--text-muted); cursor:pointer; transition:background .15s,color .15s;}
.theme-switch button:hover{color:var(--text);}
.theme-switch button:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.theme-switch button.active{background:var(--surface); color:var(--accent); box-shadow:0 1px 2px rgba(0,0,0,.12);}
.nav .theme-switch{margin:10px 0 0 10px; align-self:flex-start;}
.theme-float{position:fixed; top:12px; right:76px; z-index:30;}
.sk{display:inline-block; vertical-align:middle; height:1em; min-width:2.2em; border-radius:6px; background:linear-gradient(90deg, var(--surface-raised) 25%, var(--border) 37%, var(--surface-raised) 63%); background-size:400% 100%; animation:sk-shimmer 1.3s ease-in-out infinite;}
.sk-block{display:block; border-radius:var(--radius-m); min-height:150px; width:100%;}
.tenant-list .sk-card{border:1px solid var(--border); border-radius:var(--radius-m); background:var(--surface); padding:16px; display:flex; flex-direction:column; gap:12px;}
.sk-card .sk{height:12px;}
@media (prefers-reduced-motion:reduce){
  .sk{animation:none;}
}
.nav .nav-top{display:flex; align-items:center; gap:6px; margin:0 0 8px;}
@media (max-width:900px){
  .nav .nav-top{margin:0;}
}
@media (max-width:760px){
  .chk summary .status-chip{justify-self:start;}
}
html{scroll-behavior:smooth;}
body{letter-spacing:-.003em; line-height:1.5; text-rendering:optimizeLegibility;}
.page>*:not(.topbar){animation:page-in .28s var(--ease) both;}
.kpi-val{font-family:'Montserrat',ui-sans-serif,system-ui,sans-serif !important; font-variant-numeric:tabular-nums; font-weight:700; letter-spacing:-.02em;}
.brand svg{background:var(--grad-brand); color:#fff; border-radius:10px; padding:5px; width:36px; height:36px; box-shadow:0 6px 16px -8px var(--electric);}
.brand-name{font-weight:800; letter-spacing:-.02em;}
.brand-tagline b{color:var(--brand);}
.nav a{position:relative; font-weight:600; transition:background-color .15s var(--ease), color .15s var(--ease), padding-left .15s var(--ease);}
.nav a:hover{background:var(--accent-soft); color:var(--accent);}
.nav a.active{background:var(--accent-soft); color:var(--accent); font-weight:700;}
@media (min-width:901px){
  body.has-sidebar .topbar{background:var(--surface); border-right:1px solid var(--border); box-shadow:1px 0 0 rgba(20,30,45,.02);}
  body.has-sidebar .nav a.active::before{content:""; position:absolute; left:-14px; top:8px; bottom:8px; width:4px; border-radius:0 4px 4px 0; background:var(--grad-brand);}
  body.has-sidebar .nav a:hover{padding-left:15px;}
}
.nav-group{font-weight:800; letter-spacing:.08em;}
.status-chip{font-weight:700; letter-spacing:.01em;}
.tenant-code{background:var(--accent-soft); color:var(--accent); font-weight:700;}
@media (max-width:600px){
  .page{padding-inline:14px;}
}
.nav-flyout{display:none;}
.nav-chev{flex:none; width:7px; height:7px; border-right:2px solid var(--text-muted); border-top:2px solid var(--text-muted); transform:rotate(45deg); opacity:.55; margin-left:2px; transition:transform .15s var(--ease), opacity .15s;}
@media (min-width:901px){
  .nav-item.has-sub{position:relative;}
  .nav-item.has-sub>a{display:flex; align-items:center;}
  .nav-item.has-sub:hover .nav-chev, .nav-item.has-sub.open .nav-chev{opacity:1; transform:rotate(45deg) translate(2px,-2px);}
  .nav-flyout{position:fixed; left:222px; top:0; z-index:70; padding-left:16px; min-width:250px; opacity:0; visibility:hidden; transform:translateX(-6px); transition:opacity .14s var(--ease), transform .14s var(--ease), visibility .14s; pointer-events:none; display:block;}
  .nav-item.has-sub.open>.nav-flyout{opacity:1; visibility:visible; transform:none; pointer-events:auto;}
  .nf-box{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:8px; box-shadow:0 18px 44px -12px rgba(15,25,40,.28), 0 2px 6px rgba(15,25,40,.06); display:flex; flex-direction:column; gap:2px; max-height:calc(100vh - 24px); overflow-y:auto;}
  .nf-title{font-size:.66rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); padding:8px 12px 6px;}
  .nf-sep{font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); opacity:.8; padding:10px 12px 4px; border-top:1px dashed var(--border); margin-top:4px;}
  .nav .nf-link{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px; font-size:.87rem; font-weight:600; color:var(--text); text-decoration:none; transition:background .12s, color .12s, padding-left .12s;}
  .nav .nf-link::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--border); transition:background .12s, transform .12s; flex:none;}
  .nav .nf-link:hover{background:var(--accent-soft); color:var(--accent); padding-left:15px;}
  .nav .nf-link:hover::before, .nav .nf-link.active::before{background:var(--brand); transform:scale(1.25);}
  .nav .nf-link.active{background:var(--accent-soft); color:var(--accent); font-weight:700;}
  body.has-sidebar .nav .nf-link.active::after{content:none;}
}
@media (max-width:900px){
  .nav-flyout, .nav-chev{display:none !important;}
}
.soon-badge{font-style:normal; font-size:.6rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:999px; background:var(--accent-soft); color:var(--accent); margin-left:auto; white-space:nowrap;}
.subtab .soon-badge{margin-left:6px;}
@media (min-width:901px) and (max-height:820px){
  body.has-sidebar .topbar{gap:12px; padding:14px 12px;}
  body.has-sidebar .brand-tag, .brand-tagline{display:none;}
  body.has-sidebar .nav a{padding-top:6px; padding-bottom:6px; font-size:.84rem;}
  body.has-sidebar .nav-group{padding:9px 12px 3px;}
  body.has-sidebar .nav-user{padding-top:8px;}
}
@media (min-width:901px){
  body.has-sidebar .topbar{scrollbar-width:thin; overscroll-behavior:contain; background:linear-gradient(var(--surface) 30%, transparent) top / 100% 24px no-repeat local, linear-gradient(transparent, rgba(20,30,45,.10)) bottom / 100% 14px no-repeat scroll, var(--surface);}
}
.nav-badge.new{background:var(--grad-brand); color:#fff; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; min-width:0; border-radius:999px;}
:where(.rb-ring, .rb-row, .rb-bar, .rb-comp li, .rb-port, .rb-gauge-card, .rb-fixes, .rb-trend, .rb-gauge){--c:var(--info); --cs:var(--info-soft);}
.tone-ok{--c:var(--ok); --cs:var(--ok-soft);}
.tone-warn{--c:var(--warn); --cs:var(--warn-soft);}
.tone-crit{--c:var(--crit); --cs:var(--crit-soft);}
.rb-ring{flex:none; position:relative; width:62px; height:62px; border-radius:50%; display:grid; place-content:center; text-align:center; text-decoration:none;
  background:conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-raised) 0);}
.rb-ring::before{content:""; position:absolute; inset:6px; border-radius:50%; background:var(--surface);}
.rb-ring strong, .rb-ring small{position:relative; line-height:1;}
.rb-ring strong{font:700 1.2rem 'IBM Plex Mono',monospace; color:var(--c);}
.rb-ring small{margin-top:2px; font:800 .62rem 'Montserrat',sans-serif; color:var(--text-muted);}
.rb-ring.xl{width:132px; height:132px; filter:drop-shadow(0 6px 18px var(--cs));}
.rb-ring.xl::before{inset:12px;}
.rb-ring.xl strong{font-size:2.6rem;}
.rb-ring.xl small{font-size:.85rem; margin-top:4px;}
@media (max-width:900px){
  .rb-win-list li .tenant-code{display:none;}
}
@media (max-width:520px){
  .rb-ring.xl{width:108px; height:108px;}
  .rb-ring.xl strong{font-size:2.1rem;}
}
.skip-link{position:absolute; left:-9999px; top:8px; z-index:1000; padding:8px 14px; border-radius:var(--radius-s); background:var(--surface); color:var(--text); border:2px solid var(--accent); font-weight:700; font-size:.84rem; text-decoration:none;}
.skip-link:focus{left:12px;}
main#main:focus{outline:none;}
@media (max-width:900px){
  .nav a{min-height:44px; align-items:center;}
  .theme-switch button{width:44px; height:44px;}
  .lang-switch a{display:inline-flex; align-items:center; min-height:44px; padding:0 12px !important;}
}
.hero-top{align-items:center;}
.hero-stat{flex:none; min-width:1.3em; font:800 3.4rem/1 'Montserrat',sans-serif; font-variant-numeric:tabular-nums; color:var(--text-muted); text-align:center;}
.hero.ok .hero-stat{color:var(--ok);}
.hero.warn .hero-stat{color:var(--warn);}
.hero.crit .hero-stat{color:var(--crit);}
.hero-text{min-width:0;}
.hero-cta{margin-top:10px; font-size:.9rem; padding:10px 18px;}
.hero-mid{display:flex; flex-direction:column; gap:4px; align-items:flex-start; color:var(--accent);}
.hero-mid-lbl{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:700;}
.hero-port{display:flex; align-items:center; gap:14px; padding:10px 16px; border:1px solid var(--border); border-radius:var(--radius-m); background:var(--surface); text-decoration:none; color:inherit;}
.hero-port:hover{border-color:var(--accent);}
.hero-port-t{display:flex; flex-direction:column; gap:2px;}
.hero-port-l{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:700;}
.hero-port-t b{font-size:1.15rem;}
.hero .health-bar{height:12px;}
.hero-meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding-top:10px; border-top:1px solid var(--border);}
@media (max-width:640px){
  .hero-stat{font-size:2.6rem;}
  .hero-mid{display:none;}
}
.kpi-trend{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px; min-height:20px; color:var(--text-muted);}
.kpi-delta{font-size:.72rem; font-weight:700;}
.kpi-delta.bad{color:var(--crit);}
.kpi-delta.good{color:var(--ok);}
.kpi-spark{flex:none; color:var(--accent);}
.hero-sub b{color:var(--text);}
.hb.info{background:var(--info);}
.hero-legend .info::before{background:var(--info);}
.hero-mid{flex:1 1 280px; max-width:420px;}
.hero-stat{font-size:4rem;}
.kpi-lbl{min-height:2.4em; display:block;}
@media (max-width:640px){
  .hero-stat{font-size:2.8rem;}
  .hero-mid{display:flex; max-width:none;}
}
.hero .hero-grid{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:start;}
.hero-left{min-width:0; display:flex; flex-direction:column; gap:12px;}
.hero-head{display:flex; align-items:center; gap:16px;}
.hero-head .hero-title{margin:0;}
.sev-row{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.84rem; color:var(--text-muted);}
.sev-row b{font-size:1.25rem; font-variant-numeric:tabular-nums; color:var(--text); margin-right:2px;}
.hero-legend .lg, .sev-row .lg, .ha-leg .lg{display:inline-flex; align-items:baseline; gap:4px;}
.sev-row .lg::before, .ha-leg .lg::before{content:""; align-self:center; display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:4px;}
.sev-row .crit::before, .ha-leg .crit::before{background:var(--crit);}
.sev-row .warn::before, .ha-leg .warn::before{background:var(--warn);}
.sev-row .info::before, .ha-leg .info::before{background:var(--accent);}
.sev-row .total::before{display:none;}
.hb.info{background:var(--accent);}
.hero-cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;}
.hero-cta-row .hero-cta{margin:0;}
.hero-top-t{font-size:.84rem; color:var(--text-muted); min-width:0;}
.hero-top-t b{color:var(--text);}
.hero-port{flex-direction:column; align-items:center; gap:6px; text-align:center; min-width:190px;}
.hero-port-lvl{font-size:1.15rem;}
.hero-port-low{font-size:.78rem; color:var(--text-muted);}
.hero-port-low i{font-style:normal; font-weight:700;}
.hero-port-low i.up{color:var(--ok);}
.hero-port-low i.down{color:var(--crit);}
.hero-areas{border-top:1px solid var(--border); padding-top:12px;}
.ha-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px;}
.ha-leg{display:inline-flex; gap:14px; font-size:.74rem; color:var(--text-muted);}
.ha-list{list-style:none; margin:0; padding:0; --cols:var(--cc,2);}
.ha-hd, .ha-row{display:grid; grid-template-columns:7em minmax(90px,1fr) calc(var(--cols) * 4.2em) 3em; align-items:center; gap:12px; padding:6px 8px;}
.ha-hd{font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:700;}
.ha-row{text-decoration:none; color:inherit; border-radius:6px; font-size:.84rem;}
.ha-row:hover{background:var(--surface-raised);}
.ha-row:focus-visible{outline:3px solid var(--accent); outline-offset:1px;}
.ha-row.dim{opacity:.55;}
.ha-name{font-weight:600;}
.ha-bar{display:flex; height:9px; border-radius:999px; overflow:hidden; background:var(--surface-raised);}
.ha-bar i.crit{background:var(--crit);}
.ha-bar i.warn{background:var(--warn);}
.ha-bar i.info{background:var(--accent);}
.ha-cs{display:grid; grid-template-columns:repeat(var(--cols), 1fr); text-align:right; font-variant-numeric:tabular-nums; color:var(--text-muted);}
.ha-t{text-align:right; font-variant-numeric:tabular-nums;}
@media (max-width:900px){
  .hero .hero-grid{grid-template-columns:minmax(0,1fr);}
  .hero-port{flex-direction:row; flex-wrap:wrap; justify-content:center;}
  .ha-hd{display:none;}
  .ha-row{grid-template-columns:1fr auto; grid-template-areas:"name tot" "bar bar" "cs cs"; row-gap:6px; padding:10px 8px;}
  .ha-row .ha-name{grid-area:name;}
  .ha-row .ha-t{grid-area:tot;}
  .ha-row .ha-bar{grid-area:bar;}
  .ha-row .ha-cs{grid-area:cs; grid-template-columns:repeat(var(--cols), auto); justify-content:start; gap:14px; text-align:left;}
}
.hero{padding:14px 20px 12px; gap:10px;}
.hero .hero-grid{grid-template-columns:minmax(340px,1fr) minmax(430px,1.25fr) auto; gap:24px; align-items:start;}
.hero .hero-left{gap:9px;}
.hero .hero-left .health-bar{flex:none; width:100%; min-width:0; height:12px; border-radius:999px;}
.hero .hero-stat{font-size:3.75rem; min-width:1.2em;}
.hero .hero-head .hero-title{font-size:1.3rem; white-space:nowrap;}
.hero .sev-row{gap:4px 18px;}
.hero .sev-row b{color:var(--text);}
.hero .hero-port{padding:8px 14px; gap:4px; min-width:170px;}
.hero .hero-port .rb-ring.xl{width:112px; height:112px;}
.hero .hero-port .rb-ring.xl::before{inset:10px;}
.hero .hero-port .rb-ring.xl strong{font-size:2.2rem;}
.hero .hero-areas{border-top:0; padding-top:0; min-width:0;}
.hero .ha-head{margin-bottom:2px;}
.hero .ha-list{--cols:var(--cc,2);}
.hero .ha-hd, .hero .ha-row{display:grid; grid-template-columns:5.2em minmax(70px,420px) repeat(var(--cols), 6.5em) 2.6em; justify-content:start; align-items:center; gap:12px; padding:3px 6px;}
.hero .ha-hd{font-size:.68rem;}
.hero .ha-cs{display:contents;}
.hero .ha-cs > span{text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; color:var(--text); font-variant-numeric:tabular-nums;}
.hero .ha-hd .ha-cs > span{color:var(--text-muted);}
.hero .ha-row{font-size:.8rem;}
.hero .ha-row.dim .ha-cs > span, .hero .ha-row.dim .ha-name{color:var(--text-muted);}
.hero .ha-t{text-align:right; color:var(--text);}
.hero .hero-meta{padding-top:8px;}
@media (max-width:1100px){
  .hero .hero-grid{grid-template-columns:minmax(0,1fr) auto;}
  .hero .hero-areas{grid-column:1 / -1;}
}
@media (max-width:900px){
  .hero .hero-grid{grid-template-columns:minmax(0,1fr);}
  .hero .hero-head .hero-title{white-space:normal;}
  .hero .ha-hd{display:none;}
  .hero .ha-row{grid-template-columns:1fr auto; grid-template-areas:"name tot" "bar bar" "cs cs"; row-gap:6px; padding:8px 6px;}
  .hero .ha-row .ha-name{grid-area:name;}
  .hero .ha-row .ha-t{grid-area:tot;}
  .hero .ha-row .ha-bar{grid-area:bar;}
  .hero .ha-cs{display:flex; grid-area:cs; gap:16px; justify-content:flex-start;}
  .hero .ha-cs > span{text-align:left;}
}
.hero .hero-left{order:1;}
.hero .hero-areas{order:2;}
.hero .hero-port{order:3;}
@media (max-width:1100px){
  .hero .hero-port{order:2;}
  .hero .hero-areas{order:3;}
}
@media (max-width:900px){
  .dp-cust .tenant-code{max-width:8em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
}
.band{display:grid; grid-template-columns:minmax(260px,1.1fr) repeat(3,minmax(104px,.42fr)) minmax(380px,1.9fr); gap:16px; margin:0 0 20px; align-items:stretch;}
.band-card{position:relative; display:flex; flex-direction:column; gap:10px; min-width:0; padding:16px 18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow); color:inherit; text-decoration:none;}
a.band-card:hover{border-color:var(--c,var(--accent));}
a.band-card:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}
.band-lbl{font:800 .72rem 'Montserrat',sans-serif; text-transform:uppercase; letter-spacing:.09em; color:var(--text-muted);}
.band-sub{font-size:.8rem; color:var(--text-muted); line-height:1.35;}
.band-health{background:linear-gradient(135deg,var(--cs),transparent 62%),var(--surface);}
.band-health-main{display:flex; align-items:center; gap:16px;}
.band .rb-ring.xl{width:104px; height:104px;}
.band .rb-ring.xl::before{inset:10px;}
.band .rb-ring.xl strong{font-size:2.1rem;}
.band-health-txt{display:flex; flex-direction:column; gap:4px; min-width:0;}
.band-level{font-size:1.25rem; font-weight:800; color:var(--c);}
.band-spark{color:var(--c); line-height:0;}
.band-delta{font:700 .8rem 'IBM Plex Mono',monospace;}
.band-delta.up{color:var(--ok);}
.band-delta.down{color:var(--crit);}
.band-delta span{font:600 .74rem 'Montserrat',sans-serif; color:var(--text-muted);}
.band-low{font-size:.82rem; color:var(--text-muted);}
.band-low b{color:var(--text);}
.band-low i{font:700 .78rem 'IBM Plex Mono',monospace; font-style:normal;}
.band-low i.up{color:var(--ok);}
.band-low i.down{color:var(--crit);}
.band-stat{justify-content:space-between; border-bottom:4px solid var(--c);}
.band-foot{display:flex; flex-direction:column; gap:6px;}
.band-bar{display:block; height:6px; border-radius:99px; background:var(--surface-raised); overflow:hidden;}
.band-bar i{display:block; height:100%; border-radius:99px; background:var(--c);}
.band-stat.crit{--c:var(--crit);}
.band-stat.warn{--c:var(--warn);}
.band-stat.info{--c:var(--accent);}
.band-num{font:800 3.4rem/1 'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; color:var(--c);}
.band-fix{gap:8px;}
.band-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.band-list a{display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:8px; padding:6px 8px; border-radius:var(--radius-s); background:var(--surface-raised); color:inherit; text-decoration:none; font-size:.84rem; font-weight:600;}
.band-list a:hover{background:var(--accent-soft);}
.band-list a:focus-visible{outline:3px solid var(--accent); outline-offset:1px;}
.band-n{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--accent); color:var(--on-solid,#fff); font:800 .72rem 'Montserrat',sans-serif;}
.band-t{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3;}
.band-gain{font:700 .76rem 'IBM Plex Mono',monospace; color:var(--ok); background:var(--ok-soft); padding:2px 8px; border-radius:999px; white-space:nowrap;}
.band-cta{align-self:flex-start; margin-top:auto; white-space:nowrap;}
@media (max-width:1280px){
  .band{grid-template-columns:repeat(6,minmax(0,1fr));}
  .band-health{grid-area:1 / 1 / 2 / 4;}
  .band-fix{grid-area:1 / 4 / 2 / 7;}
  .band-stat{grid-column:span 2;}
}
@media (max-width:640px){
  .band{grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;}
  .band-health, .band-fix{grid-column:1 / -1; grid-row:auto;}
  .band-stat{grid-column:auto;}
  .band-card{padding:14px;}
  .band-num{font-size:2.4rem;}
  .band-stat .band-sub{font-size:.72rem;}
  .band-health-main{gap:12px;}
  .band-list a{grid-template-columns:auto minmax(0,1fr) auto;}
  .band-list .tenant-code{display:none;}
  .band-cta{align-self:stretch; text-align:center; min-height:44px; display:inline-flex; align-items:center; justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  a.band-card{transition:none;}
}
.page-wide .cust-grid{grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr));}
.nav-toggle{display:none;}
@media (max-width:900px){
  .topbar{position:relative;}
  .brand-tag, .brand-tagline{display:none;}
  .nav-toggle{position:absolute; top:0; right:0; display:inline-grid; place-items:center; width:44px; height:44px; border-radius:var(--radius-s); border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer;}
  .nav-toggle:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}
  .nav-toggle .ico-close{display:none;}
  .nav-toggle[aria-expanded="true"] .ico-open{display:none;}
  .nav-toggle[aria-expanded="true"] .ico-close{display:block;}
  .nav{width:100%;}
  .nav:not(.is-open) > :not(.nav-top){display:none !important;}
  .nav.is-open{flex-direction:column; align-items:stretch; flex-wrap:nowrap; overflow:visible; gap:2px;}
  .nav.is-open > a{min-height:44px; display:flex; align-items:center;}
}
a.tenant-code, a.status-chip{display:inline-flex; align-items:center; min-height:24px;}
@media (pointer:coarse){
  a.tenant-code{min-height:32px;}
}
.nav-group, .soon-badge{font-size:.72rem;}
.rb-ring small{font-size:.7rem;}
body.has-sidebar .nav .nav-group, .nav .soon-badge, .nav kbd{font-size:.72rem;}
.band{position:relative;}
.kpi-trend .kpi-spark{width:64px; max-width:45%; height:20px;}
.band [hidden]{display:none;}