*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* DARK DEFAULT */
html{overflow-x:hidden;max-width:100vw}
body{overflow-x:hidden;
  --bg:#0d1117;--bgc:#161b22;--bge:#1e2530;--bgh:#1c2230;
  --bo:rgba(255,255,255,.07);--bos:rgba(255,255,255,.04);
  --tx:#e6edf3;--tx2:#8b949e;--txm:#7d8590;
  --ac:#2f81f7;--gr:#3fb950;--grb:rgba(63,185,80,.13);
  --ye:#d29922;--yeb:rgba(210,153,34,.13);
  --re:#f85149;--reb:rgba(248,81,73,.13);
  --unk:#6e7681;--unkb:rgba(110,118,129,.12);
  --lhred:#e8321c;--lhred2:#c42a16;
  --r:14px;--rs:8px;--nh:60px;
  font-family:'DM Sans',-apple-system,sans-serif;
  background:var(--bg);color:var(--tx);min-height:100vh;
  line-height:1.5;-webkit-font-smoothing:antialiased;
  transition:background .5s cubic-bezier(.4,0,.2,1),color .5s cubic-bezier(.4,0,.2,1),border-color .5s cubic-bezier(.4,0,.2,1);
}
/* LIGHT */
body.light{
  --bg:#f4f6f9;--bgc:#fff;--bge:#e4e9f0;--bgh:#eef1f6;
  --bo:rgba(0,0,0,.09);--bos:rgba(0,0,0,.05);
  --tx:#0f172a;--tx2:#475569;--txm:#64748b;
  --ac:#2563eb;--gr:#16a34a;--grb:rgba(22,163,74,.1);
  --ye:#e5a200;--yeb:rgba(229,162,0,.14);--re:#dc2626;--reb:rgba(220,38,38,.1);
  --unk:#64748b;--unkb:rgba(100,116,139,.1);
}
.lh-icon{display:block;transition:filter .5s cubic-bezier(.4,0,.2,1)}
body:not(.light) .lh-icon{filter:invert(.88) hue-rotate(180deg)}
a{color:inherit;text-decoration:none}

/* ── NAV ── */
.header{position:fixed;top:0;left:0;right:0;height:var(--nh);
  background:rgba(13,17,23,.95);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--bo);display:flex;align-items:center;
  padding:0 28px;gap:10px;z-index:100;transition:background .5s cubic-bezier(.4,0,.2,1),border-color .5s cubic-bezier(.4,0,.2,1)}
body.light .header{background:rgba(244,246,249,.97);backdrop-filter:blur(18px)}
.logo{height:24px;flex-shrink:0;display:block}
.logo img{height:100%;display:block;object-fit:contain}
.hdiv{width:1px;height:16px;background:var(--bo);flex-shrink:0}
.htitle{font-size:13px;font-weight:600;color:var(--tx);letter-spacing:-.01em;white-space:nowrap}
/* (mascot removed) */
.gsp{display:flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap;flex-shrink:0;transition:background .4s ease,color .4s ease}
.gsp.green{background:var(--grb);color:var(--gr)}.gsp.yellow{background:var(--yeb);color:var(--ye)}.gsp.red{background:var(--reb);color:var(--re)}
.gsp.unknown{background:var(--unkb);color:var(--unk)}
.sdot{width:5px;height:5px;border-radius:50%;flex-shrink:0;animation:pd 2s ease-in-out infinite;transition:background .4s ease}
.green .sdot{background:var(--gr)}.yellow .sdot{background:var(--ye)}.red .sdot{background:var(--re)}
.unknown .sdot{background:var(--unk)}
@keyframes pd{0%,100%{opacity:1}50%{opacity:.3}}
.hs{flex:1}
.refresh-now{padding:4px 10px;border-radius:var(--rs);font-size:11px;font-weight:600;color:var(--txm);border:1px solid var(--bo);background:transparent;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;flex-shrink:0}
.refresh-now:hover{background:var(--bge);color:var(--tx)}
.ri{font-size:11px;color:var(--txm);font-family:'DM Mono',monospace;white-space:nowrap}

/* ── THEME TOGGLE (icon-only, no box) ── */
.theme-toggle-btn{
  background:none;border:none;cursor:pointer;padding:4px;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  line-height:1;color:var(--tx2);border-radius:50%;
  transition:color .18s ease, filter .3s ease, transform .3s ease;
}
.theme-toggle-btn:hover{color:var(--tx)}
.theme-toggle-btn:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(47,129,247,.35)}
.theme-toggle-btn svg{width:18px;height:18px;display:block;transition:transform .55s cubic-bezier(.5,1.5,.4,1), filter .3s ease}
.theme-toggle-btn:hover svg{transform:rotate(18deg);filter:drop-shadow(0 0 6px rgba(255,200,80,.35))}
body.light .theme-toggle-btn svg{transform:rotate(180deg)}
body.light .theme-toggle-btn:hover svg{transform:rotate(198deg);filter:drop-shadow(0 0 6px rgba(47,129,247,.35))}

/* ── SEARCH BAR ── */
/* (search bar removed) */
/* (search results removed) */

/* ── AUTH DROPDOWN ── */
.auth-dw{position:relative;display:inline-block;margin-left:4px}
.auth-dw-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid rgba(47,129,247,.55);border-radius:999px;background:linear-gradient(135deg,rgba(47,129,247,.16),rgba(47,129,247,.08));color:var(--tx);font-size:13px;cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:600;transition:background .18s,border-color .18s,box-shadow .18s,color .18s,transform .15s;white-space:nowrap;position:relative;z-index:201;letter-spacing:-.005em}
.auth-dw-btn::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gr);box-shadow:0 0 6px rgba(63,185,80,.8);flex-shrink:0}
.auth-dw-btn:hover{background:linear-gradient(135deg,rgba(47,129,247,.26),rgba(47,129,247,.14));border-color:rgba(47,129,247,.85);color:var(--tx);box-shadow:0 6px 18px rgba(47,129,247,.2)}
body.light .auth-dw-btn{background:linear-gradient(135deg,rgba(37,99,235,.14),rgba(37,99,235,.05));border-color:rgba(37,99,235,.4);color:#1e40af}
body.light .auth-dw-btn:hover{background:linear-gradient(135deg,rgba(37,99,235,.22),rgba(37,99,235,.1));border-color:rgba(37,99,235,.7);box-shadow:0 6px 18px rgba(37,99,235,.18)}
nav.nav a.nav-login-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 18px;border-radius:999px;background:var(--ac);color:#fff!important;font-size:13px;font-weight:600;font-family:'DM Sans',sans-serif;letter-spacing:-.005em;transition:background .18s,box-shadow .18s,transform .15s;box-shadow:0 2px 10px rgba(47,129,247,.28);white-space:nowrap;margin-left:6px;border:1px solid rgba(47,129,247,.75)}
nav.nav a.nav-login-btn:hover{background:#4593fa;color:#fff!important;box-shadow:0 6px 18px rgba(47,129,247,.42);transform:translateY(-1px)}
nav.nav a.nav-login-btn svg{width:13px;height:13px;flex-shrink:0}
body.light nav.nav a.nav-login-btn{background:#2563eb;border-color:rgba(37,99,235,.75);box-shadow:0 2px 10px rgba(37,99,235,.3)}
body.light nav.nav a.nav-login-btn:hover{background:#1d4ed8;box-shadow:0 6px 18px rgba(37,99,235,.4)}
.auth-dm{display:none;position:fixed;z-index:200;background:var(--bgc);border:1px solid var(--bo);border-radius:var(--rs);min-width:160px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.3)}
.auth-dw.open .auth-dm{display:block}
.auth-dm a{display:block;padding:9px 14px;font-size:13px;color:var(--tx2);font-weight:500;transition:background .1s;border-bottom:1px solid var(--bos)}
.auth-dm a:last-child{border-bottom:none}
.auth-dm a:hover{background:var(--bge);color:var(--tx)}
.auth-dm a.active{color:var(--ac)}

nav.nav{display:flex;gap:1px;align-items:center}
nav.nav a{padding:5px 9px;border-radius:var(--rs);font-size:13px;font-weight:500;color:var(--tx2);transition:background .15s,color .15s;white-space:nowrap}
nav.nav a:hover,nav.nav a.active{background:var(--bge);color:var(--tx)}

/* ── PAGE ── */
.page{padding:calc(var(--nh) + 28px) 32px 48px;max-width:1400px;margin:0 auto}
.ph{margin-bottom:20px}
.ph h1{font-size:22px;font-weight:700;color:var(--tx);letter-spacing:-.02em}
.ph p{margin-top:4px;font-size:13px;color:var(--txm)}

/* ── TOOLBAR ── */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:20px}
label.lbl{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:600;color:var(--txm);text-transform:uppercase;letter-spacing:.06em}
select{padding:7px 28px 7px 10px;border:1px solid var(--bo);border-radius:var(--rs);background:var(--bgc);color:var(--tx);font-size:13px;font-family:'DM Sans',sans-serif;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;transition:border-color .15s}
select:focus{outline:none;border-color:var(--ac)}
button,.button-link{padding:7px 13px;border-radius:var(--rs);font-size:13px;font-weight:500;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bo);background:var(--bgc);color:var(--tx2)}
button:hover,.button-link:hover{background:var(--bge);color:var(--tx)}
button.primary,.button-link.primary{background:var(--ac);color:#fff;border-color:transparent}
button.primary:hover,.button-link.primary:hover{opacity:.88;transform:translateY(-1px)}

/* ── TIME RANGE PICKER ── */
.trp-wrap{position:relative;display:inline-block}
.trp-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--bo);border-radius:var(--rs);background:var(--bgc);color:var(--tx);font-size:13px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;white-space:nowrap}
.trp-btn:hover{border-color:var(--ac)}
.trp-panel{display:block;position:absolute;top:calc(100%+6px);left:0;z-index:300;background:var(--bgc);border:1px solid var(--bo);border-radius:var(--r);box-shadow:0 12px 40px rgba(0,0,0,.35);min-width:320px;padding:14px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px) scale(.985);transform-origin:top left;transition:opacity .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1), visibility 0s linear .22s}
.trp-wrap.open .trp-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition:opacity .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1), visibility 0s}
.trp-wrap.closing .trp-panel{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px) scale(.985);transition:opacity .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1), visibility 0s linear .22s}
.flatpickr-calendar{opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top center;transition:opacity .18s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.4,0,.2,1)}
.flatpickr-calendar.open{opacity:1;transform:translateY(0) scale(1)}
.flatpickr-calendar.animate{animation:none}
.trp-presets{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:12px}
.trp-preset{padding:6px 10px;border-radius:var(--rs);border:1px solid var(--bo);background:transparent;color:var(--tx2);font-size:12px;font-weight:500;cursor:pointer;text-align:left;font-family:'DM Sans',sans-serif;transition:all .15s}
.trp-preset:hover{background:var(--bge);color:var(--tx)}
.trp-preset.active{background:var(--ac);color:#fff;border-color:transparent}
.trp-divider{height:1px;background:var(--bo);margin:10px 0}
.trp-sect{font-size:11px;font-weight:600;color:var(--txm);text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px}
.trp-fields{display:flex;gap:8px;flex-wrap:wrap}
.trp-field{display:flex;flex-direction:column;gap:3px;flex:1;min-width:120px}
.trp-field span{font-size:11px;color:var(--txm);font-weight:500}
input[type="datetime-local"],input.flatpickr-input,.trp-field input{width:100%;padding:7px 9px;border:1px solid var(--bo);border-radius:var(--rs);background:var(--bge);color:var(--tx);font-size:12px;font-family:'DM Sans',sans-serif;transition:border-color .15s;cursor:pointer}
input[type="datetime-local"]:focus,input.flatpickr-input:focus,.trp-field input:focus{outline:none;border-color:var(--ac)}
/* Flatpickr dark theme overrides */
.flatpickr-calendar{background:var(--bgc);border:1px solid var(--bo);box-shadow:0 12px 40px rgba(0,0,0,.45);border-radius:10px;font-family:'DM Sans',sans-serif;overflow:hidden}
.flatpickr-calendar.arrowTop::before,.flatpickr-calendar.arrowTop::after{border-bottom-color:var(--bgc)}
.flatpickr-calendar.arrowBottom::before,.flatpickr-calendar.arrowBottom::after{border-top-color:var(--bgc)}
.flatpickr-months{background:var(--bge);border-radius:10px 10px 0 0}
.flatpickr-months .flatpickr-month{color:var(--tx);fill:var(--tx)}
.flatpickr-current-month{font-family:'DM Sans',sans-serif;font-weight:600;color:var(--tx);font-size:14px}
.flatpickr-current-month .flatpickr-monthDropdown-months{background:var(--bge);color:var(--tx);border:none;font-family:'DM Sans',sans-serif}
.flatpickr-current-month input.cur-year{color:var(--tx);font-family:'DM Sans',sans-serif}
.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{color:var(--tx2);fill:var(--tx2)}
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:var(--ac);fill:var(--ac)}
.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{fill:inherit}
span.flatpickr-weekday{color:var(--txm);font-family:'DM Sans',sans-serif;font-weight:600;font-size:11px}
.flatpickr-day{color:var(--tx);border-radius:6px;font-family:'DM Sans',sans-serif;font-weight:500}
.flatpickr-day:hover{background:var(--bge);border-color:var(--bo)}
.flatpickr-day.today{border-color:var(--ac)}
.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange{background:var(--ac)!important;border-color:var(--ac)!important;color:#fff}
.flatpickr-day.inRange{background:rgba(88,166,255,.15);border-color:transparent;box-shadow:-5px 0 0 rgba(88,166,255,.15),5px 0 0 rgba(88,166,255,.15)}
.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay{color:var(--txm)}
.flatpickr-day.flatpickr-disabled{color:var(--txm);opacity:.4}
.flatpickr-time{border-top:1px solid var(--bo);background:var(--bgc)}
/* Match the calendar's themed background — flatpickr's default is to leave
   each input's wrapper transparent but the focus state from the user agent
   stylesheet was bleeding through as a stark off-white. We force the picker's
   own surface colour on every layer of the time row so light/dark themes both
   stay visually consistent. */
.flatpickr-time .numInputWrapper{background:var(--bgc);transition:background .15s ease}
.flatpickr-time input,.flatpickr-time input.numInput{color:var(--tx);font-family:'DM Sans',sans-serif;background:var(--bgc);box-shadow:none;border:none}
.flatpickr-time input.numInput:focus{background:color-mix(in srgb,var(--ac) 12%,var(--bgc));outline:none;box-shadow:inset 0 -2px 0 var(--ac)}
.flatpickr-time .numInputWrapper:hover,.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover{background:var(--bge)}
.flatpickr-time .flatpickr-am-pm{color:var(--tx);background:var(--bgc)}
.flatpickr-time .flatpickr-time-separator{color:var(--txm);background:var(--bgc)}
.numInputWrapper span.arrowUp::after{border-bottom-color:var(--tx2)}
.numInputWrapper span.arrowDown::after{border-top-color:var(--tx2)}
.numInputWrapper span:hover{background:color-mix(in srgb,var(--ac) 18%,transparent)}
body.light .flatpickr-time .numInputWrapper,body.light .flatpickr-time input,body.light .flatpickr-time .flatpickr-am-pm,body.light .flatpickr-time .flatpickr-time-separator{background:#fff}
body.light .flatpickr-time input.numInput:focus{background:color-mix(in srgb,var(--ac) 10%,#fff);box-shadow:inset 0 -2px 0 var(--ac)}
body.light .flatpickr-time .numInputWrapper:hover,body.light .flatpickr-time input:hover,body.light .flatpickr-time .flatpickr-am-pm:hover{background:#f0f2f5}
body.light .flatpickr-calendar{background:#fff;border-color:rgba(0,0,0,.1);box-shadow:0 12px 40px rgba(0,0,0,.12)}
body.light .flatpickr-months{background:#f6f8fa}
body.light .flatpickr-day{color:#1f2328}
body.light .flatpickr-day:hover{background:#f0f2f5;border-color:rgba(0,0,0,.08)}
body.light .flatpickr-day.inRange{background:rgba(9,105,218,.1)}
body.light .flatpickr-time{border-top-color:rgba(0,0,0,.08);background:#fff}
body.light .flatpickr-time input{color:#1f2328}
.trp-pending{font-size:12px;color:var(--txm);margin-top:7px;min-height:15px;transition:color .25s ease}
.trp-actions{display:flex;gap:8px;margin-top:10px}
/* Smooth shrink + Apply highlight when both range dates are picked (Datadog-style) */
.trp-panel .trp-presets,.trp-panel .trp-divider,.trp-panel .trp-sect{transition:opacity .35s ease,max-height .4s cubic-bezier(.5,.05,.5,1),margin .35s ease,padding .35s ease;overflow:hidden}
.trp-panel.trp-ready .trp-presets,.trp-panel.trp-ready .trp-divider,.trp-panel.trp-ready .trp-sect{opacity:0;max-height:0;margin:0;padding:0;pointer-events:none}
.trp-panel.trp-ready .trp-pending{color:var(--ac);font-weight:600}
.trp-panel.trp-ready .trp-actions .primary{animation:trpReadyPulse 1.6s ease-in-out infinite;box-shadow:0 0 0 0 rgba(110,168,254,.45)}
@keyframes trpReadyPulse{0%,100%{box-shadow:0 0 0 0 rgba(110,168,254,.45)}50%{box-shadow:0 0 0 6px rgba(110,168,254,0)}}
.hist-apply-ready,.rpt-apply-ready{animation:trpReadyPulse 1.6s ease-in-out infinite;position:relative}

/* ── MULTI-SELECT FILTER DROPDOWN ── */
.ms-wrap{position:relative;display:inline-block}
.ms-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 28px 7px 10px;border:1px solid var(--bo);border-radius:var(--rs);background:var(--bgc);color:var(--tx);font-size:13px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;white-space:nowrap;min-width:140px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
.ms-btn:hover{border-color:var(--ac)}
.ms-panel{display:none;position:absolute;top:calc(100%+4px);left:0;z-index:300;background:var(--bgc);border:1px solid var(--bo);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.35);min-width:200px;padding:8px 0;max-height:260px;overflow-y:auto}
body.light .ms-panel{box-shadow:0 12px 40px rgba(0,0,0,.12);border-color:rgba(0,0,0,.1)}
.ms-wrap.open .ms-panel{display:block}
.ms-item{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:13px;color:var(--tx2);cursor:pointer;transition:background .1s;font-family:'DM Sans',sans-serif;font-weight:500;white-space:nowrap}
.ms-item:hover{background:var(--bge);color:var(--tx)}
.ms-item input[type="checkbox"]{accent-color:var(--ac);width:14px;height:14px;cursor:pointer}
.ms-item.ms-all{color:var(--tx);font-weight:600;border-bottom:1px solid var(--bos);padding-bottom:8px;margin-bottom:2px}
.ms-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:999px;background:var(--ac);color:#fff;font-size:10px;font-weight:700;padding:0 5px}

/* ── CLICK DROPDOWN ── */
.dw{position:relative;display:inline-block}
.dw-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border:1px solid var(--bo);border-radius:var(--rs);background:var(--bgc);color:var(--tx2);font-size:13px;cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:500;transition:all .15s}
.dw-btn:hover{background:var(--bge);color:var(--tx)}
.dm{display:none;position:absolute;top:calc(100%+5px);left:0;z-index:200;background:var(--bgc);border:1px solid var(--bo);border-radius:var(--rs);min-width:175px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.3)}
.dw.open .dm{display:block}
.di{display:flex;align-items:center;gap:8px;padding:9px 13px;font-size:13px;color:var(--tx2);cursor:pointer;border:none;background:transparent;width:100%;text-align:left;font-family:'DM Sans',sans-serif;font-weight:500;transition:background .1s}
.di:hover{background:var(--bge);color:var(--tx)}
.di+.di{border-top:1px solid var(--bos)}

/* ── GRID ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}

/* ── PRODUCT CARDS ── */
.card{background:var(--bgc);border-radius:var(--r);border:1px solid var(--bo);padding:20px 24px;
  transition:transform .2s,box-shadow .2s,border-color .2s,background .5s cubic-bezier(.4,0,.2,1),color .5s cubic-bezier(.4,0,.2,1);display:block;position:relative;overflow:hidden;cursor:pointer}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--r) var(--r) 0 0;background:var(--gr)}
.card.red::before{background:var(--re)}.card.yellow::before{background:var(--ye)}
.card.green{box-shadow:0 0 18px rgba(63,185,80,.08)}
.card.yellow{box-shadow:0 0 18px rgba(210,153,34,.12)}
.card.red{box-shadow:0 0 18px rgba(248,81,73,.14)}
.card.unknown{box-shadow:0 0 18px rgba(110,118,129,.08)}
.card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.14)}
.card.green:hover{box-shadow:0 6px 36px rgba(63,185,80,.18)}
.card.yellow:hover{box-shadow:0 6px 36px rgba(210,153,34,.22)}
.card.red:hover{box-shadow:0 6px 36px rgba(248,81,73,.24)}
.card.unknown:hover{box-shadow:0 6px 36px rgba(110,118,129,.16)}
body.light .card.green{box-shadow:0 0 16px rgba(22,163,74,.08)}
body.light .card.yellow{box-shadow:0 0 16px rgba(180,83,9,.1)}
body.light .card.red{box-shadow:0 0 16px rgba(220,38,38,.12)}
body.light .card.green:hover{box-shadow:0 6px 32px rgba(22,163,74,.2),0 0 0 1px rgba(22,163,74,.12)}
body.light .card.yellow:hover{box-shadow:0 6px 32px rgba(180,83,9,.22),0 0 0 1px rgba(180,83,9,.14)}
body.light .card.red:hover{box-shadow:0 6px 32px rgba(220,38,38,.24),0 0 0 1px rgba(220,38,38,.16)}
body.light .card.unknown:hover{box-shadow:0 6px 32px rgba(100,116,139,.18),0 0 0 1px rgba(100,116,139,.12)}
body.light .card:hover{border-color:rgba(0,0,0,.12)}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;overflow:hidden}
/* Card title wipes left→right from the default text color to the status
   color on hover/focus/active. Pure color change — no glow, no drop-shadow,
   no halo. Just a gradient sliding across the text via background-size clip.
   Slow + smooth so it reads as intentional. */
.card-title{font-size:15px;font-weight:600;line-height:1.3;color:var(--tx);max-width:100%;min-width:0;word-break:normal;overflow-wrap:break-word;hyphens:none;
  background-image:linear-gradient(90deg, var(--_ctw, var(--gr)) 0%, var(--_ctw, var(--gr)) 100%);
  background-repeat:no-repeat;background-size:0% 100%;background-position:left center;
  -webkit-background-clip:text;background-clip:text;
  transition: background-size 3.2s cubic-bezier(.33,.68,.24,1.01), color 1s ease;
}
.card.green .card-title{--_ctw:var(--gr)}
.card.yellow .card-title{--_ctw:var(--ye)}
.card.red .card-title{--_ctw:var(--re)}
.card.unknown .card-title{--_ctw:var(--txm)}
.card:hover .card-title, .card:focus-visible .card-title, .card:active .card-title{
  background-size:100% 100%;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
@media(prefers-reduced-motion: reduce){
  .card-title,.card:hover .card-title{transition:none}
}
.card-meta{color:var(--txm);font-size:11px;margin-top:3px;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
/* ── MULTI-API ROLLUP CARD (Local Hero Admin) ──
   These cards render as role="button" and open a picker popup instead of
   navigating. The "n APIs" chip signals this is a rollup; a subtle hover
   animation hints the card is interactive. */
.card.pc-pickable{cursor:pointer}
.card.pc-pickable:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.pc-api-tag{
  display:inline-flex;align-items:center;margin-left:8px;padding:1px 7px;border-radius:999px;
  background:color-mix(in srgb, var(--ac) 15%, transparent);color:var(--ac);
  font-size:10px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  border:1px solid color-mix(in srgb, var(--ac) 25%, transparent);
  vertical-align:middle;white-space:nowrap;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), background .22s ease;
}
.card.pc-pickable:hover .pc-api-tag{transform:scale(1.05);background:color-mix(in srgb, var(--ac) 22%, transparent)}
/* Picker popup — modal-style, same aesthetic as wg-modal but lighter. */
.pc-picker-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:600;display:flex;align-items:center;justify-content:center;padding:20px;animation:pcFadeIn .22s ease}
body.light .pc-picker-overlay{background:rgba(13,17,23,.45)}
.pc-picker{background:var(--bgc);border:1px solid var(--bo);border-radius:var(--r);padding:22px;width:420px;max-width:calc(100vw - 32px);box-shadow:0 28px 72px rgba(0,0,0,.5);animation:pcPopIn .3s cubic-bezier(.34,1.56,.64,1)}
.pc-picker h3{font-size:16px;font-weight:700;color:var(--tx);margin-bottom:3px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.pc-picker .pc-close{background:transparent;border:none;color:var(--txm);font-size:20px;cursor:pointer;line-height:1;padding:2px 6px;border-radius:6px;transition:background .15s, color .15s}
.pc-picker .pc-close:hover{background:var(--bge);color:var(--tx)}
.pc-picker-sub{font-size:12px;color:var(--txm);margin-bottom:16px;line-height:1.45}
/* Vertical stack — keeps spacing consistent regardless of API count (3 APIs
   in a 2-col grid left an empty cell next to CustomerAPI). */
.pc-picker-grid{display:flex;flex-direction:column;gap:8px}
.pc-picker-opt{
  padding:12px 14px;border:1.5px solid var(--bo);border-radius:var(--rs);background:var(--bgc);
  color:var(--tx);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;cursor:pointer;text-align:left;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),border-color .18s,box-shadow .24s,background .18s;
  display:flex;flex-direction:column;gap:4px;
  animation:pcOptIn .3s cubic-bezier(.4,0,.2,1) both;
}
.pc-picker-opt:hover{transform:translateY(-2px);border-color:var(--ac);background:var(--bge);box-shadow:0 8px 22px -8px rgba(47,129,247,.3)}
.pc-picker-opt-name{font-weight:600;color:var(--tx);font-size:13.5px}
.pc-picker-opt-sub{font-size:11px;color:var(--txm);letter-spacing:.01em}
.pc-picker-opt-all{border-color:color-mix(in srgb, var(--ac) 25%, var(--bo));background:color-mix(in srgb, var(--ac) 5%, var(--bgc))}
.pc-picker-opt-all:hover{background:color-mix(in srgb, var(--ac) 12%, var(--bgc));border-color:var(--ac)}
@keyframes pcFadeIn{from{opacity:0}to{opacity:1}}
@keyframes pcPopIn{0%{opacity:0;transform:translateY(8px) scale(.97)}100%{opacity:1;transform:none}}
@keyframes pcOptIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:500px){.pc-picker-opt{padding:10px 12px}}
/* ── PRODUCT-DETAIL COMPONENT GRID ──
   Replace the vertical-stacked "component row" layout with a responsive
   2-column grid on desktop (1 column under 720px). Makes all four
   standard components fit without vertical scrolling in typical heights. */
.pd-component-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:14px;margin-top:4px}
.pd-component-tile{background:var(--bgc);border:1px solid var(--bo);border-radius:var(--rs);padding:14px 16px;display:flex;flex-direction:column;gap:10px;animation:pcOptIn .35s cubic-bezier(.4,0,.2,1) both;transition:border-color .25s, box-shadow .3s, transform .25s}
.pd-component-tile:hover{border-color:color-mix(in srgb, var(--ac) 35%, var(--bo));box-shadow:0 10px 28px -14px rgba(0,0,0,.3);transform:translateY(-1px)}
.pd-component-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pd-component-name{font-size:13.5px;font-weight:700;color:var(--tx);line-height:1.3}
.pd-component-reason{font-size:11.5px;color:var(--tx2);margin-top:3px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pd-component-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.pd-component-up{font-family:'DM Mono',monospace;font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--tx)}
.pd-component-up-mini{font-size:11px;color:var(--txm);font-family:'DM Mono',monospace}
.pd-component-bars{margin-top:2px}
@media(max-width:720px){.pd-component-grid{grid-template-columns:1fr}}
.uptime{font-size:30px;font-weight:700;margin:14px 0 3px;font-family:'DM Mono',monospace;letter-spacing:-.02em;color:var(--tx)}
.reason{color:var(--tx2);font-size:12px;margin-top:2px}

/* ── BAR CELLS (discrete status timeline) ── */
.bar-row{display:flex;gap:3px;margin-top:14px;align-items:stretch;height:30px;position:relative}
.bar,.bar-cell{
  flex:1;border-radius:3px;background:var(--gr);
  cursor:pointer;
  transition:opacity .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1), filter .22s ease, box-shadow .22s ease;
  position:relative;min-width:4px;
  transform-origin:center;
}
.bar:hover,.bar-cell:hover{
  opacity:1;
  transform:scaleY(1.22) scaleX(1.05);
  z-index:6;
  filter:brightness(1.06) saturate(1.05);
  box-shadow:0 6px 16px -4px color-mix(in srgb, currentColor 0%, var(--gr) 55%), 0 0 0 1px color-mix(in srgb, var(--bgc) 70%, transparent);
}
.bar.yellow,.bar-cell.yellow{background:var(--ye)}
.bar.red,.bar-cell.red{background:var(--re)}
.bar.unknown,.bar-cell.unknown{background:var(--unk);opacity:.5}
.bar-cell.green:hover{box-shadow:0 6px 16px -4px color-mix(in srgb, var(--gr) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--gr) 35%, transparent)}
.bar-cell.yellow:hover{box-shadow:0 6px 16px -4px color-mix(in srgb, var(--ye) 60%, transparent), 0 0 0 1px color-mix(in srgb, var(--ye) 40%, transparent)}
.bar-cell.red:hover{box-shadow:0 6px 18px -4px color-mix(in srgb, var(--re) 65%, transparent), 0 0 0 1px color-mix(in srgb, var(--re) 45%, transparent)}
.bar-cell.unknown:hover{opacity:.85;box-shadow:0 6px 14px -4px color-mix(in srgb, var(--unk) 55%, transparent)}
/* Vertical guide line shows the period being inspected */
.bar-cell::before{
  content:"";
  position:absolute;left:50%;top:-8px;bottom:-8px;
  width:1px;background:linear-gradient(to bottom,transparent 0%,var(--ac) 18%,var(--ac) 82%,transparent 100%);
  opacity:0;transform:translateX(-50%) scaleY(.4);transform-origin:center;
  transition:opacity .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;border-radius:1px;
}
.bar-cell:hover::before{opacity:.55;transform:translateX(-50%) scaleY(1)}
.bar-label{display:flex;justify-content:space-between;margin-top:4px;font-size:10px;color:var(--txm);font-family:'DM Mono',monospace}
/* Floating status tooltip for bar cells — a compact pill that follows the cursor
   while hovering any cell. Hidden between cells and when not over a cell at all. */
.bar-float-tip{
  position:fixed;top:0;left:0;z-index:1200;pointer-events:none;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:5px 10px;border-radius:999px;
  background:color-mix(in srgb, var(--bgc) 92%, transparent);
  border:1px solid color-mix(in srgb, var(--ac) 24%, var(--bo));
  box-shadow:0 8px 22px -10px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb, var(--ac) 10%, transparent);
  font-size:11px;font-family:'DM Sans',sans-serif;color:var(--tx);
  opacity:0;will-change:transform,opacity;
  /* No transform transition — transform is the position. Animate only opacity
     so motion tracking stays instantaneous while fade-in/out remains smooth. */
  transition:opacity .14s ease;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.bar-float-tip.bft-active{opacity:1}
.bar-float-tip.bft-yellow{border-color:color-mix(in srgb, var(--ye) 40%, var(--bo));box-shadow:0 8px 22px -10px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb, var(--ye) 16%, transparent)}
.bar-float-tip.bft-red{border-color:color-mix(in srgb, var(--re) 44%, var(--bo));box-shadow:0 8px 22px -10px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb, var(--re) 18%, transparent)}
.bar-float-tip.bft-unknown{border-color:color-mix(in srgb, var(--unk) 40%, var(--bo))}
.bft-range{font-family:'DM Mono',monospace;color:var(--tx);font-weight:500;letter-spacing:.01em}
.bft-sep{color:var(--txm)}
.bft-status{font-weight:600;color:var(--gr)}
.bar-float-tip.bft-yellow .bft-status{color:var(--ye)}
.bar-float-tip.bft-red .bft-status{color:var(--re)}
.bar-float-tip.bft-unknown .bft-status{color:var(--unk)}
@media (prefers-reduced-motion: reduce){
  .bar,.bar-cell{transition:opacity .15s ease}
  .bar:hover,.bar-cell:hover{transform:none;filter:none;box-shadow:none}
  .bar-cell::before{transition:opacity .15s ease;transform:translateX(-50%)}
  .bar-cell:hover::before{transform:translateX(-50%) scaleY(1)}
  .bar-float-tip{transition:opacity .1s ease}
}

/* ── BADGE ── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
.card .badge{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0}
.badge.green{background:var(--grb);color:var(--gr)}.badge.green::before{background:var(--gr)}
.badge.yellow{background:var(--yeb);color:var(--ye)}.badge.yellow::before{background:var(--ye)}
.badge.red{background:var(--reb);color:var(--re)}.badge.red::before{background:var(--re)}
.badge.unknown{background:var(--unkb);color:var(--unk)}.badge.unknown::before{background:var(--unk)}

/* ── INTEGRATION CARDS (used in widget) ── */
.integ-mini-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;width:100%}
/* Apple-store inspired card: large brand tile, centered name reveal on hover,
   and a live status glow that hugs the full card in the active status color. */
.integ-card{display:flex;flex-direction:column;gap:10px;padding:16px 14px 12px;background:var(--bgc);border:1px solid var(--bo);border-radius:var(--r);text-decoration:none;color:inherit;position:relative;min-height:168px;overflow:hidden;transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .4s cubic-bezier(.4,0,.2,1), border-color .4s ease}
.integ-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:1;transition:opacity .45s ease, box-shadow .45s ease}
.integ-card:hover{transform:translateY(-3px)}
/* Status-colored outline + soft halo — applied to every card uniformly */
.integ-card.green   {border-color:rgba(63,185,80,.55);  box-shadow:0 0 0 1px rgba(63,185,80,.25), 0 6px 18px rgba(63,185,80,.18)}
.integ-card.yellow  {border-color:rgba(210,153,34,.6);  box-shadow:0 0 0 1px rgba(210,153,34,.28), 0 6px 18px rgba(210,153,34,.22)}
.integ-card.red     {border-color:rgba(218,54,51,.65);  box-shadow:0 0 0 1px rgba(218,54,51,.32), 0 6px 22px rgba(218,54,51,.3)}
.integ-card.unknown {border-color:rgba(110,118,129,.4); box-shadow:0 0 0 1px rgba(110,118,129,.18)}
body.light .integ-card.green  {border-color:rgba(22,163,74,.55); box-shadow:0 0 0 1px rgba(22,163,74,.25), 0 6px 18px rgba(22,163,74,.2)}
body.light .integ-card.yellow {border-color:rgba(229,162,0,.65); box-shadow:0 0 0 1px rgba(229,162,0,.3),  0 6px 18px rgba(229,162,0,.22)}
body.light .integ-card.red    {border-color:rgba(220,38,38,.65); box-shadow:0 0 0 1px rgba(220,38,38,.32), 0 6px 22px rgba(220,38,38,.3)}
.integ-card:hover.green  {box-shadow:0 0 0 1px rgba(63,185,80,.4),  0 10px 28px rgba(63,185,80,.28)}
.integ-card:hover.yellow {box-shadow:0 0 0 1px rgba(210,153,34,.45),0 10px 28px rgba(210,153,34,.3)}
.integ-card:hover.red    {box-shadow:0 0 0 1px rgba(218,54,51,.5),  0 10px 32px rgba(218,54,51,.38)}
.integ-card:hover.unknown{box-shadow:0 0 0 1px rgba(110,118,129,.3), 0 10px 24px rgba(110,118,129,.18)}
.integ-card.just-refreshed.green{animation:integGlowGreen 1.4s ease-out}
.integ-card.just-refreshed.yellow{animation:integGlowYellow 1.4s ease-out}
.integ-card.just-refreshed.red{animation:integGlowRed 1.4s ease-out}
@keyframes integGlowGreen{0%{box-shadow:0 0 0 2px rgba(63,185,80,.6), 0 0 26px rgba(63,185,80,.55)}100%{box-shadow:0 0 0 1px rgba(63,185,80,.25), 0 6px 18px rgba(63,185,80,.18)}}
@keyframes integGlowYellow{0%{box-shadow:0 0 0 2px rgba(210,153,34,.65), 0 0 26px rgba(210,153,34,.55)}100%{box-shadow:0 0 0 1px rgba(210,153,34,.28), 0 6px 18px rgba(210,153,34,.22)}}
@keyframes integGlowRed{0%{box-shadow:0 0 0 2px rgba(218,54,51,.7), 0 0 30px rgba(218,54,51,.65)}100%{box-shadow:0 0 0 1px rgba(218,54,51,.32), 0 6px 22px rgba(218,54,51,.3)}}
.integ-card.refreshing::after{content:"";position:absolute;top:0;left:-50%;width:50%;height:2px;background:linear-gradient(90deg,transparent,var(--ac),transparent);animation:integShimmer 1s ease-in-out}
@keyframes integShimmer{0%{left:-50%}100%{left:100%}}
/* Hero area: large brand tile centered, with the friendly name as an overlay
   label that fades in on hover. The tile gently scales down to make room for
   the name so both states feel tied together rather than replacing each other. */
/* Logo area: no tile background at all. The SVG is painted directly using
   CSS mask-image, which lets us set its color via background-color — so each
   brand's icon renders in the brand's own color (Slack pinwheel purple,
   Anthropic burst orange, etc.) instead of the forced monochrome-on-tile look. */
.integ-hero{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px 4px 4px;min-height:96px}
.integ-tile-lg{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:transparent;box-shadow:none;transition:transform .4s cubic-bezier(.4,0,.2,1), filter .4s ease}
.integ-logo-img{width:44px;height:44px;background-color:var(--brand,#6e7681);-webkit-mask-image:var(--icon-url);mask-image:var(--icon-url);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;display:inline-block;filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--brand,#6e7681) 35%,transparent));transition:transform .4s cubic-bezier(.4,0,.2,1),filter .4s ease}
.integ-logo-mark{display:flex;width:44px;height:44px;align-items:center;justify-content:center;font-weight:700;font-size:22px;color:var(--brand,#6e7681);letter-spacing:-.02em;border-radius:14px;background:color-mix(in srgb,var(--brand,#6e7681) 14%,transparent)}
/* Company name rendered in the brand's own visual language: color plus a
   typeface stack that echoes the brand's real logotype without requiring web
   fonts (avoids extra network requests and FOUT). */
.integ-name-overlay{font-size:16px;font-weight:700;color:var(--brand,var(--tx));letter-spacing:-.012em;line-height:1.1;text-align:center;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px;opacity:0;transform:translateY(6px);transition:opacity .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1);font-family:'DM Sans',system-ui,sans-serif}
.integ-card[data-key="slack"] .integ-name-overlay{font-family:'Helvetica Neue','Larsseit','Lato','DM Sans',sans-serif;font-weight:900;letter-spacing:-.025em}
.integ-card[data-key="openai"] .integ-name-overlay{font-family:'Signifier','ColfaxAI','Söhne','Helvetica Neue',sans-serif;font-weight:600;letter-spacing:-.015em;color:#000}
body:not(.light) .integ-card[data-key="openai"] .integ-name-overlay{color:#fff}
.integ-card[data-key="microsoft"] .integ-name-overlay{font-family:'Segoe UI','Segoe UI Variable','Segoe UI Web',system-ui,sans-serif;font-weight:600;letter-spacing:0}
.integ-card[data-key="zoom"] .integ-name-overlay{font-family:'Lato','Open Sans','DM Sans',sans-serif;font-weight:900;letter-spacing:-.01em}
.integ-card[data-key="anthropic"] .integ-name-overlay{font-family:'Tiempos Headline','Tiempos','Styrene A','Georgia',serif;font-weight:600;letter-spacing:.005em;font-style:italic}
.integ-card[data-key="leadspedia"] .integ-name-overlay{font-family:'DM Sans',sans-serif;font-weight:700;letter-spacing:-.01em}
.integ-card[data-key="aws"] .integ-name-overlay{font-family:'Amazon Ember','Helvetica Neue','Arial',sans-serif;font-weight:700;letter-spacing:-.005em}
.integ-card[data-key="onepassword"] .integ-name-overlay{font-family:'Inter','Helvetica Neue','DM Sans',sans-serif;font-weight:700;letter-spacing:-.015em}
.integ-card:hover .integ-tile-lg{transform:translateY(-3px)}
.integ-card:hover .integ-logo-img{transform:scale(1.06);filter:drop-shadow(0 4px 10px color-mix(in srgb,var(--brand,#6e7681) 55%,transparent))}
.integ-card:hover .integ-name-overlay{opacity:1;transform:translateY(0)}
/* Puddle-of-light click effect: a radial pool of status color spreads from
   the tap point. Driven by JS which sets --puddle-x/y and toggles .integ-splash. */
.integ-card{overflow:hidden}
.integ-splash{position:absolute;top:var(--puddle-y,50%);left:var(--puddle-x,50%);width:10px;height:10px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(0);opacity:.55;mix-blend-mode:normal;z-index:1;background:radial-gradient(circle,color-mix(in srgb,var(--puddle-col,#2f81f7) 85%,transparent) 0%,color-mix(in srgb,var(--puddle-col,#2f81f7) 40%,transparent) 45%,transparent 75%);animation:integPuddle .9s cubic-bezier(.3,.9,.4,1) forwards}
@keyframes integPuddle{0%{transform:translate(-50%,-50%) scale(.1);opacity:.7}60%{opacity:.55}100%{transform:translate(-50%,-50%) scale(36);opacity:0}}
.integ-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:600;white-space:nowrap;flex-shrink:0;font-family:'DM Sans',sans-serif;letter-spacing:.02em}
.integ-status-row{display:flex;align-items:center;justify-content:center;margin:2px 0 4px}
.integ-pill .pd{width:5px;height:5px;border-radius:50%;animation:pd 2s ease-in-out infinite;flex-shrink:0}
.integ-pill.green{background:var(--grb);color:var(--gr)}.integ-pill.green .pd{background:var(--gr)}
.integ-pill.yellow{background:var(--yeb);color:var(--ye)}.integ-pill.yellow .pd{background:var(--ye)}
.integ-pill.red{background:var(--reb);color:var(--re)}.integ-pill.red .pd{background:var(--re)}
.integ-pill.unknown{background:var(--unkb);color:var(--unk)}.integ-pill.unknown .pd{background:var(--unk);animation:none}
.integ-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;font-size:10.5px}
.integ-updated{color:var(--txm);font-family:'DM Mono',monospace}
.integ-link{color:var(--ac);font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:3px}
.integ-link::after{content:"→";opacity:.7;transition:transform .15s}
.integ-card:hover .integ-link::after{transform:translateX(2px)}
/* Per-integration remove button — only fades in on hover so the card stays
   clean by default. Sits above the puddle layer so the click is reliable. */
.integ-remove{position:absolute;top:6px;right:6px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;color:var(--txm);background:color-mix(in srgb,var(--bgc) 88%,transparent);border:1px solid var(--bos);border-radius:999px;cursor:pointer;opacity:0;transform:scale(.85);transition:opacity .18s ease,transform .18s ease,color .15s ease,border-color .15s ease;z-index:5;padding:0}
.integ-card:hover .integ-remove,.integ-card:focus-within .integ-remove{opacity:1;transform:scale(1)}
.integ-remove:hover{color:#fff;background:var(--re);border-color:var(--re)}
/* Drag handle inside the integration card. Only this element initiates the
   drag — the rest of the card stays clickable as a status link. */
.integ-card-handle{position:absolute;top:6px;left:8px;font-size:13px;line-height:1;color:var(--txm);opacity:0;transition:opacity .18s ease,color .15s ease;cursor:grab;user-select:none;z-index:5;padding:2px 4px;touch-action:none}
.integ-card:hover .integ-card-handle,.integ-card:focus-within .integ-card-handle{opacity:.75}
.integ-card-handle:hover{color:var(--tx);opacity:1}
.integ-card-handle:active{cursor:grabbing}
/* Soft removal/drag transitions */
.integ-card{transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .4s cubic-bezier(.4,0,.2,1), border-color .4s ease, opacity .25s ease}
.integ-card.integ-removing{opacity:0;transform:scale(.92);pointer-events:none}
.integ-card.integ-dragging{opacity:.55;transform:scale(.97) rotate(-1deg);box-shadow:0 18px 38px -12px rgba(0,0,0,.45)}
.integ-card.integ-drop-target{outline:2px dashed var(--ac);outline-offset:-4px}
/* FLIP smoothing — applied by JS for a single frame to slide cards from
   their previous slot to the new one after a swap. */
.integ-card.integ-flip{transition:transform .32s cubic-bezier(.5,0,.2,1)}
/* Integration picker inside the widget modal */
.wg-integ-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:6px}
.wg-integ-opt{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--bo);border-radius:var(--rs);cursor:pointer;transition:border-color .15s,background .15s;font-size:12px;color:var(--tx)}
.wg-integ-opt:hover{border-color:var(--ac);background:var(--bge)}
.wg-integ-opt input{accent-color:var(--ac);flex-shrink:0}
.wg-integ-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.wg-integ-name{font-weight:500}
.wg-integrations .wg-body{padding:0;min-height:0}
.wg-integrations .integ-mini-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
@media (max-width:600px){
  .integ-mini-grid{grid-template-columns:1fr;gap:8px}
  .wg-integ-picker{grid-template-columns:1fr}
}

/* ── SECTION / ROW ── */
.section{background:var(--bgc);border-radius:var(--r);border:1px solid var(--bo);padding:20px 24px;margin-bottom:16px;transition:background .5s cubic-bezier(.4,0,.2,1),border-color .5s cubic-bezier(.4,0,.2,1),color .5s cubic-bezier(.4,0,.2,1)}
.row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-top:1px solid var(--bos)}
.row:first-of-type{border-top:none}
.row-left{min-width:170px}
.row-title{font-size:14px;font-weight:600;color:var(--tx)}
.row-sub{margin-top:3px;color:var(--tx2);font-size:12px}

/* ── TABLE ── */
.report-table{width:100%;border-collapse:collapse;background:var(--bgc);border-radius:var(--r);overflow:hidden;border:1px solid var(--bo);transition:background .5s cubic-bezier(.4,0,.2,1),border-color .5s cubic-bezier(.4,0,.2,1)}
.report-table th,.report-table td{padding:11px 14px;text-align:left;font-size:13px}
.report-table th{background:var(--bge);color:var(--txm);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--bo)}
.report-table td{border-bottom:1px solid var(--bos);color:var(--tx2)}
.report-table td:first-child{color:var(--tx);font-weight:500}
.report-table tr:last-child td{border-bottom:none}
.report-table .clickable-row{cursor:pointer}
.report-table .clickable-row:hover td{background:var(--bge)}

/* ── INCIDENTS (history cards) ──
   Horizontal compact layout, everything center-aligned, zero resting
   animations. The only motion on the card itself is (a) a color-tinted
   glow on hover/focus/expand, and (b) the smooth zoom-out when the
   "Open product dashboard" pill is clicked. */
/* Incident card — fully centered, single column, no inline animations.
   Status dot, time, name, badges, duration and reason all stack vertically
   in the center of the card. The only motion the card has is the smooth
   zoom-in into the detail overlay when clicked. No hover transforms, no
   chevron rotation, no canvas-driven trend art, no flowing glow — just a
   quiet status-tinted border on hover. */
.incident{
  background:var(--bgc);border-radius:var(--rs);border:1px solid var(--bo);
  padding:14px 18px;margin:0 auto 10px;max-width:640px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:6px;
  cursor:pointer;position:relative;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.incident:hover,
.incident:focus-visible{
  border-color:color-mix(in srgb, var(--_hist-tint, var(--ac)) 55%, var(--bo));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--_hist-tint, var(--ac)) 30%, transparent);
  outline:none;
}
.incident[data-newstatus="green"]  {--_hist-tint:var(--gr)}
.incident[data-newstatus="yellow"] {--_hist-tint:var(--ye)}
.incident[data-newstatus="red"]    {--_hist-tint:var(--re)}
.incident[data-newstatus="unknown"]{--_hist-tint:var(--unk)}

.idot{width:10px;height:10px;border-radius:50%;background:var(--ye);flex-shrink:0;margin-bottom:2px}
.itime{color:var(--txm);font-size:11px;font-family:'DM Mono',monospace}
.iname{font-size:14px;color:var(--tx);font-weight:500}
.iname .ienv{color:var(--txm);font-weight:400}
.ibadges{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.ibadges .badge{font-size:10px;padding:2px 6px}
.ibadges .iarrow{color:var(--txm);font-size:11px}
.incident .reason{color:var(--tx2);font-size:12px;max-width:560px}

.hist-duration{display:inline-flex;align-items:center;font-size:10.5px;color:var(--txm);font-family:'DM Mono',monospace;padding:2px 7px;background:var(--bge);border-radius:999px;border:1px solid var(--bos)}
.hist-duration-ongoing{color:var(--ye);border-color:color-mix(in srgb, var(--ye) 35%, transparent);background:color-mix(in srgb, var(--ye) 12%, transparent)}

.hist-open-cta{display:inline-block;color:var(--ac);font-size:11px;font-weight:500;margin-top:2px;opacity:.7}
.incident:hover .hist-open-cta,
.incident:focus-visible .hist-open-cta{opacity:1}

/* ── ZOOM-IN DETAIL OVERLAY ──
   Click a card → an overlay is appended with the panel inside, the
   transform-origin is anchored at the card's screen position, and a
   class flip drives a CSS-only scale+opacity transition. Closing
   reverses the same class. Clicking "Open product dashboard" plays a
   second outward zoom that swallows the viewport, then navigates.
   Browser-back from the dashboard fires the pageshow handler which
   cleans up any leftover overlay/zoom classes so the user never sees
   a stuck black screen. Fully responsive: on mobile the modal becomes
   near-fullscreen. */
.hist-detail-overlay{
  /* The overlay is appended to <html> (not body) so position:fixed
     resolves against the viewport instead of the body — see histOpenDetail
     for the rationale. As a side effect it cannot inherit theme variables
     from <body>, so the dark-default + light-override blocks are mirrored
     here. histOpenDetail copies the body light class onto the overlay so
     the right theme wins. */
  --bg:#0d1117;--bgc:#161b22;--bge:#1e2530;--bgh:#1c2230;
  --bo:rgba(255,255,255,.07);--bos:rgba(255,255,255,.04);
  --tx:#e6edf3;--tx2:#8b949e;--txm:#7d8590;
  --ac:#2f81f7;--gr:#3fb950;--grb:rgba(63,185,80,.13);
  --ye:#d29922;--yeb:rgba(210,153,34,.13);
  --re:#f85149;--reb:rgba(248,81,73,.13);
  --unk:#6e7681;--unkb:rgba(110,118,129,.12);
  --r:14px;--rs:8px;
  font-family:'DM Sans',-apple-system,sans-serif;color:var(--tx);
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:24px 16px;
  background:color-mix(in srgb, var(--bg) 0%, transparent);
  -webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);
  transition:background-color .28s ease, backdrop-filter .28s ease, -webkit-backdrop-filter .28s ease;
  overflow-y:auto;
}
.hist-detail-overlay.light{
  --bg:#f4f6f9;--bgc:#fff;--bge:#e4e9f0;--bgh:#eef1f6;
  --bo:rgba(0,0,0,.09);--bos:rgba(0,0,0,.05);
  --tx:#0f172a;--tx2:#475569;--txm:#64748b;
  --ac:#2563eb;--gr:#16a34a;--grb:rgba(22,163,74,.1);
  --ye:#e5a200;--yeb:rgba(229,162,0,.14);--re:#dc2626;--reb:rgba(220,38,38,.1);
  --unk:#64748b;--unkb:rgba(100,116,139,.1);
}
body.hist-detail-open{overflow:hidden}
.hist-detail-overlay.is-open{
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.hist-detail-panel{
  width:100%;max-width:680px;max-height:calc(100vh - 48px);
  background:var(--bgc);
  border:1px solid color-mix(in srgb, var(--_hist-tint, var(--ac)) 45%, var(--bo));
  border-radius:var(--r);
  box-shadow:0 30px 80px -30px color-mix(in srgb, var(--_hist-tint, var(--ac)) 60%, transparent),
             0 0 0 1px color-mix(in srgb, var(--_hist-tint, var(--ac)) 18%, transparent);
  display:flex;flex-direction:column;overflow:hidden;
  /* origin overridden inline from the originating card's screen rect */
  transform-origin:center center;
  transform:scale(.86);opacity:0;
  transition:transform .42s cubic-bezier(.22,1,.36,1), opacity .3s ease;
  will-change:transform,opacity;
}
.hist-detail-overlay.is-open .hist-detail-panel{transform:scale(1);opacity:1}
.hist-detail-overlay.is-zooming-out .hist-detail-panel{
  transform:scale(1.45);opacity:0;
  transition:transform .55s cubic-bezier(.65,.04,.35,1), opacity .42s ease .08s;
}
.hist-detail-overlay.is-zooming-out{
  background:var(--bg);
  -webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);
  transition:background-color .55s ease, backdrop-filter .55s ease, -webkit-backdrop-filter .55s ease;
}
body.hist-zooming-out{overflow:hidden}
.hist-detail-overlay[data-newstatus="green"]  {--_hist-tint:var(--gr)}
.hist-detail-overlay[data-newstatus="yellow"] {--_hist-tint:var(--ye)}
.hist-detail-overlay[data-newstatus="red"]    {--_hist-tint:var(--re)}
.hist-detail-overlay[data-newstatus="unknown"]{--_hist-tint:var(--unk)}

/* Page-level entry fade — used when user returns from the product
   dashboard via back/forward so the page eases in instead of popping. */
body.hist-page-enter .page{opacity:0;transform:scale(.985);transition:opacity .35s ease, transform .35s ease}
body.hist-page-enter.hist-page-shown .page{opacity:1;transform:none}

.hist-detail-head{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;border-bottom:1px solid var(--bos);
  background:color-mix(in srgb, var(--_hist-tint, var(--ac)) 5%, var(--bge));
}
.hist-detail-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:500;color:var(--tx2);
  background:transparent;border:1px solid var(--bos);
  padding:6px 12px;border-radius:999px;cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.hist-detail-back:hover,
.hist-detail-back:focus-visible{
  color:var(--_hist-tint, var(--ac));
  border-color:color-mix(in srgb, var(--_hist-tint, var(--ac)) 45%, var(--bos));
  background:color-mix(in srgb, var(--_hist-tint, var(--ac)) 6%, transparent);
  outline:none;
}
.hist-detail-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left}
.hist-detail-title strong{font-size:14px;color:var(--tx);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-detail-title small{font-size:11px;color:var(--txm);font-family:'DM Mono',monospace}
.hist-detail-status-dot{width:10px;height:10px;border-radius:50%;background:var(--_hist-tint, var(--ac));flex-shrink:0}

.hist-detail-body{padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
/* Metadata block — stacked, centred rows so the value reads underneath its
   label like a vertical fact list. Each row is its own flex column so the
   key/value pair stays visually grouped despite the single-column layout. */
.hist-detail-grid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;font-size:12px;background:var(--bge);padding:14px 18px;border-radius:var(--rs);border:1px solid var(--bos)}
.hist-detail-row{display:flex;flex-direction:column;align-items:center;gap:3px;max-width:100%}
.hist-detail-k{color:var(--txm);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.hist-detail-v{color:var(--tx);line-height:1.5;word-break:break-word;text-align:center}
.hist-detail-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* AI / ML narrative — explicit ML attribution (model name + technique) so
   the user knows where the copy came from. */
.hist-narrative{
  padding:12px 14px;border-radius:var(--rs);
  border:1px solid color-mix(in srgb, var(--_hist-tint, var(--ac)) 30%, var(--bos));
  background:color-mix(in srgb, var(--_hist-tint, var(--ac)) 4%, var(--bge));
  text-align:left;font-size:13px;line-height:1.55;color:var(--tx);
}
.hist-narrative-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.hist-ml-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:3px 8px;border-radius:999px;
  background:color-mix(in srgb, var(--_hist-tint, var(--ac)) 16%, transparent);
  color:var(--_hist-tint, var(--ac));
  border:1px solid color-mix(in srgb, var(--_hist-tint, var(--ac)) 40%, transparent);
}
.hist-ml-badge svg{display:block}
.hist-ml-note{font-size:10.5px;color:var(--txm);font-style:italic}
.hist-narrative-body{color:var(--tx2);min-height:1.4em}
.hist-narrative[data-nar-state="error"] .hist-narrative-body{color:var(--txm);font-style:italic}

.hist-open-pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:500;letter-spacing:.01em;
  padding:7px 14px;border-radius:999px;
  background:transparent;border:1px solid var(--bos);
  color:var(--tx2);cursor:pointer;text-decoration:none;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.hist-open-pill:hover,
.hist-open-pill:focus-visible,
.hist-open-pill:active{
  color:var(--_hist-tint, var(--ac));
  border-color:color-mix(in srgb, var(--_hist-tint, var(--ac)) 45%, var(--bos));
  background:color-mix(in srgb, var(--_hist-tint, var(--ac)) 6%, transparent);
  outline:none;
}

@media (max-width:600px){
  .hist-detail-overlay{padding:12px 8px}
  .hist-detail-panel{max-height:calc(100vh - 24px);border-radius:12px}
  .hist-detail-head{padding:12px 14px}
  .hist-detail-body{padding:14px}
  .hist-detail-grid{padding:12px 14px;gap:12px}
  .incident{padding:12px 14px;max-width:100%}
}

@media (prefers-reduced-motion: reduce){
  .incident{transition:none}
  .hist-detail-overlay,.hist-detail-panel{transition:opacity .12s ease}
  .hist-detail-panel{transform:none !important}
}

/* ── STATUS BANNER ── */
.status-banner{padding:11px 18px;border-radius:var(--r);margin-bottom:18px;font-weight:600;font-size:14px;display:flex;align-items:center;gap:10px;border:1px solid;overflow:hidden;word-break:break-word;flex-wrap:wrap}
.status-banner::before{content:'';width:8px;height:8px;border-radius:50%;flex-shrink:0;animation:pd 2s ease-in-out infinite}
.status-banner.green{background:var(--grb);color:var(--gr);border-color:rgba(63,185,80,.22)}.status-banner.green::before{background:var(--gr)}
.status-banner.yellow{background:var(--yeb);color:var(--ye);border-color:rgba(210,153,34,.22)}.status-banner.yellow::before{background:var(--ye)}
.status-banner.red{background:var(--reb);color:var(--re);border-color:rgba(248,81,73,.22)}.status-banner.red::before{background:var(--re)}

/* ── FORM ELEMENTS ── */
.fg{margin-bottom:14px}
.fl{display:block;font-size:11px;font-weight:600;color:var(--txm);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.fi,.fs,.fta{width:100%;padding:9px 12px;border:1px solid var(--bo);border-radius:var(--rs);background:var(--bge);color:var(--tx);font-size:14px;font-family:'DM Sans',sans-serif;transition:border-color .15s}
.fta{min-height:100px;resize:vertical}
.fi:focus,.fs:focus,.fta:focus{outline:none;border-color:var(--ac)}
.fs{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:32px}
.fsuccess{display:none;background:var(--grb);color:var(--gr);border:1px solid rgba(63,185,80,.22);padding:12px 16px;border-radius:var(--rs);margin-top:12px;font-size:13px;font-weight:500}
.file-zone{border:2px dashed var(--bo);border-radius:var(--rs);padding:16px;text-align:center;cursor:pointer;font-size:13px;color:var(--txm);transition:all .2s}
.file-zone:hover,.file-zone.drag{border-color:var(--ac);background:rgba(47,129,247,.04)}
.file-list{margin-top:6px}
.file-item{font-size:12px;color:var(--tx2);padding:3px 0;border-top:1px solid var(--bos)}
.file-err{color:var(--re);font-size:12px;margin-top:4px}
.help{color:var(--txm);font-size:12px;padding:6px 0}

/* ── RELEASES PAGE ── */
.release-timeline{position:relative;padding-left:32px}
.release-timeline::before{content:'';position:absolute;left:10px;top:0;bottom:0;width:2px;background:var(--bo)}
.release-card{background:var(--bgc);border:1px solid var(--bo);border-radius:var(--r);padding:16px 20px;margin-bottom:14px;position:relative;transition:box-shadow .2s,border-color .2s}
.release-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.2);border-color:rgba(255,255,255,.14)}
.release-dot{position:absolute;left:-26px;top:20px;width:12px;height:12px;border-radius:50%;background:var(--ac);border:2px solid var(--bg);box-shadow:0 0 0 2px var(--ac)}
.release-key{font-size:11px;font-family:'DM Mono',monospace;color:var(--ac);margin-bottom:6px;font-weight:600}
.release-title{font-size:15px;font-weight:600;color:var(--tx);margin-bottom:6px}
.release-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.release-tag{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:500;background:var(--bge);color:var(--tx2)}
.release-date{font-size:11px;color:var(--txm);font-family:'DM Mono',monospace}
.release-env-tag{background:rgba(47,129,247,.12);color:var(--ac)}
.release-prod-tag{background:var(--grb);color:var(--gr)}

/* ── MONITORING PAGE ── */
/* Default: flex up to 4 cards per row with a smaller min-width so they
   don't wrap to 3+1 on typical widescreen laptops (~1280px). */
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px}
.mon-5-grid{display:flex!important;flex-wrap:wrap;gap:12px;justify-content:center}
.mon-5-grid>.metric-card{flex:1 1 0;min-width:0}
.mon-5-grid .metric-value{font-size:22px}
.mon-5-grid .metric-sub{font-size:11px}
@media(max-width:900px){.mon-5-grid>.metric-card{flex:0 0 calc(33.33% - 10px)}.mon-5-grid .metric-value{font-size:20px}}
@media(max-width:500px){.mon-5-grid>.metric-card{flex:0 0 calc(33.33% - 10px)}.mon-5-grid .metric-value{font-size:17px}.mon-5-grid .metric-sub{font-size:10px}.mon-5-grid{gap:8px}.mon-5-grid>.metric-card{padding:12px 8px}}
.metric-card{background:var(--bgc);border:1px solid var(--bo);border-radius:var(--r);padding:18px 20px;transition:background .5s cubic-bezier(.4,0,.2,1),border-color .5s cubic-bezier(.4,0,.2,1),color .5s cubic-bezier(.4,0,.2,1)}
.metric-label{font-size:11px;font-weight:600;color:var(--txm);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.metric-value{font-size:28px;font-weight:700;font-family:'DM Mono',monospace;color:var(--tx);letter-spacing:-.02em}
.metric-sub{font-size:12px;color:var(--tx2);margin-top:4px}
.chart-card{background:var(--bgc);border:1px solid var(--bo);border-radius:var(--r);padding:18px 20px;margin-bottom:16px;transition:background .5s cubic-bezier(.4,0,.2,1),border-color .5s cubic-bezier(.4,0,.2,1),color .5s cubic-bezier(.4,0,.2,1)}
.chart-title{font-size:13px;font-weight:600;color:var(--tx);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
/* ── COST TREND GRANULARITY TOGGLE ── */
.cost-trend-toggle{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--bge);border:1px solid var(--bos)}
.cost-trend-ml-hint{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:500;color:var(--txm);line-height:1.2;letter-spacing:.01em}
.cost-trend-ml-dot{width:6px;height:6px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 2px color-mix(in srgb, var(--ac) 25%, transparent);animation:costTrendMlPulse 2.4s ease-in-out infinite}
@keyframes costTrendMlPulse{0%,100%{box-shadow:0 0 0 2px color-mix(in srgb, var(--ac) 22%, transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb, var(--ac) 12%, transparent)}}
.cost-trend-hover-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;background:color-mix(in srgb, var(--ac) 10%, var(--bge));border:1px solid color-mix(in srgb, var(--ac) 30%, var(--bos));font-size:11px;color:var(--tx);font-weight:500;transition:opacity .15s ease}
.cost-trend-hover-pill[hidden]{display:none}
.cost-trend-hover-pill strong{font-family:'DM Mono',monospace;color:var(--ac)}
.cost-trend-hover-pill.cost-trend-hover-fc strong{color:var(--ac);opacity:.85}
.ctt-btn{font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:600;color:var(--txm);background:transparent;border:none;padding:4px 12px;border-radius:999px;cursor:pointer;transition:background .25s ease, color .25s ease, box-shadow .3s ease}
.ctt-btn:hover{color:var(--tx);background:color-mix(in srgb, var(--ac) 8%, transparent)}
.ctt-btn.active{color:#fff;background:var(--ac);box-shadow:0 2px 8px -2px color-mix(in srgb, var(--ac) 60%, transparent)}
.ctt-btn:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb, var(--ac) 45%, transparent)}
/* Service chart type picker — clearly a dropdown (label + caret + hover lift) rather than a flat button.
   The native <select> spans the whole pill (via inset positioning + opacity:1 + full-width) so clicks
   anywhere inside open the menu reliably — the chevron overlay uses pointer-events:none. */
/* Stable width so switching between Doughnut/Polar Area/Radar doesn't
   shuffle the title bar. 170px fits the longest label plus the chev
   without the value sliding around when the text changes. Label +
   separator + value sit flush left; chev floats right (absolute). */
.svc-chart-picker{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 32px 6px 12px;border:1px solid var(--bo);border-radius:8px;background:linear-gradient(180deg, color-mix(in srgb, var(--bge) 70%, var(--bgc)) 0%, var(--bge) 100%);box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent), 0 1px 2px rgba(0,0,0,.08);transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;cursor:pointer;min-height:34px;width:170px;user-select:none;outline:none;font-family:inherit}
.svc-chart-picker:hover{border-color:color-mix(in srgb, var(--ac) 55%, var(--bo));box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent), 0 3px 10px -4px color-mix(in srgb, var(--ac) 45%, transparent);transform:translateY(-1px)}
.svc-chart-picker:focus-visible,.svc-chart-picker.is-open{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb, var(--ac) 30%, transparent)}
/* Thin divider between "CHART" label and the value */
.svc-chart-picker-value{font-size:12.5px;font-weight:600;color:var(--tx);pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:8px;border-left:1px solid var(--bos);margin-left:2px}
.svc-chart-picker.is-open .svc-chart-picker-chev{transform:translateY(-50%) rotate(180deg)}
.svc-chart-picker-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:100%;list-style:none;margin:0;padding:4px;
  background:var(--bgc);border:1px solid var(--bo);border-radius:8px;
  box-shadow:0 14px 28px -10px rgba(0,0,0,.32), 0 0 0 1px color-mix(in srgb, var(--ac) 10%, transparent);
  z-index:30;
  opacity:0;transform:translateY(-4px) scale(.97);pointer-events:none;
  transition:opacity .18s cubic-bezier(.22,1,.36,1), transform .18s cubic-bezier(.22,1,.36,1);
  transform-origin:top right;
}
.svc-chart-picker.is-open .svc-chart-picker-menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
/* Two-column layout (check slot + label) so the text never collides with
   the checkmark on the selected item. Every row reserves the same slot,
   so clicking anywhere on the row hits the same target. */
.svc-chart-picker-item{display:grid;grid-template-columns:16px 1fr;align-items:center;gap:8px;padding:8px 14px 8px 10px;font-size:12.5px;font-weight:500;color:var(--tx);border-radius:6px;cursor:pointer;white-space:nowrap;transition:background .12s ease,color .12s ease}
.svc-chart-picker-item::before{content:"";display:inline-block;width:16px;text-align:center;font-weight:700;color:var(--ac);font-size:12px;line-height:1}
.svc-chart-picker-item-active::before{content:"✓"}
.svc-chart-picker-item:hover,.svc-chart-picker-item.svc-chart-picker-item-focus{background:color-mix(in srgb, var(--ac) 14%, var(--bge));color:var(--tx)}
.svc-chart-picker-item-active{color:var(--ac);font-weight:600}
.svc-chart-picker-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--txm);user-select:none;pointer-events:none;flex-shrink:0}
.svc-chart-picker-chev{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--ac);pointer-events:none;transition:transform .2s cubic-bezier(.22,1,.36,1);line-height:1}
/* Top-4 services caption chips under the chart — 2 × 2 grid, 50/50 split. */
.svc-top4-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 6px}
@media(max-width:560px){.svc-top4-grid{grid-template-columns:1fr}}
.svc-top3-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--bge);border:1px solid var(--bos);font-size:11.5px;color:var(--tx);transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;cursor:pointer;user-select:none}
.svc-top3-chip .svc-top3-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 2px color-mix(in srgb, currentColor 8%, transparent)}
.svc-top3-chip .svc-top3-name{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svc-top3-chip .svc-top3-val{font-family:'DM Mono',monospace;font-size:11px;color:var(--txm);flex-shrink:0}
.svc-top3-chip:hover{transform:translateY(-1px);border-color:color-mix(in srgb, var(--ac) 40%, var(--bos));background:color-mix(in srgb, var(--ac) 5%, var(--bge));box-shadow:0 4px 12px -6px color-mix(in srgb, var(--ac) 40%, transparent)}
.svc-top3-chip.svc-chip-locked{border-color:var(--ac);background:color-mix(in srgb, var(--ac) 12%, var(--bge));box-shadow:0 0 0 2px color-mix(in srgb, var(--ac) 25%, transparent)}
/* When any service is locked, fade the non-matching rows in the breakdown
   on the right so the selection reads clearly. */
#service-tbody tr.svc-row-dim{opacity:.5}
#service-tbody tr.svc-row-locked{background:color-mix(in srgb, var(--ac) 14%, var(--bge)) !important;box-shadow:inset 3px 0 0 var(--ac), 0 0 0 1px color-mix(in srgb, var(--ac) 45%, transparent) !important}
/* Breakdown-row hover/glow sync so a slice hover on the chart lights its matching row. */
#service-tbody tr{transition:background .2s ease, box-shadow .2s ease}
#service-tbody tr.svc-row-lit{background:color-mix(in srgb, var(--ac) 10%, var(--bge)) !important;box-shadow:inset 3px 0 0 var(--ac), 0 0 0 1px color-mix(in srgb, var(--ac) 35%, transparent)}
/* ── LH PRODUCT MONITOR — OPERATING-COST CARD ──
   The card is a two-tile hero (cost vs savings) that doubles as a
   "treasure chest" — hovering lifts it subtly with a warm glow, clicking
   bursts a sparkle layer and reveals the detail panel beneath. Each tile
   is independently clickable to zoom over the card's top region. */
.mc-card{position:relative;transition:transform .75s cubic-bezier(.22,1,.36,1), box-shadow .95s cubic-bezier(.22,1,.36,1), border-color .6s ease, background .45s ease;will-change:transform,box-shadow}
/* Gold hover glow on hover; expanded adds a steady yellow glow that
   pulses gently so users can see the card is "active" / open. Idle
   state stays neutral. */
.mc-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 40px -16px rgba(212,175,55,.35), 0 4px 14px -6px rgba(0,0,0,.25), inset 0 0 0 1px color-mix(in srgb, #d4af37 35%, transparent);
}
/* When expanded: clearer yellow outline + soft outer glow that breathes. */
.mc-card.mc-expanded{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--ye) 55%, var(--bo));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ye) 35%, transparent),
    0 18px 48px -18px color-mix(in srgb, var(--ye) 45%, transparent),
    0 6px 18px -8px rgba(0,0,0,.28),
    inset 0 0 0 1px color-mix(in srgb, var(--ye) 22%, transparent);
  animation:mcExpandedPulse 3.8s ease-in-out infinite;
}
@keyframes mcExpandedPulse{
  0%,100%{box-shadow:0 0 0 1px color-mix(in srgb, var(--ye) 30%, transparent), 0 18px 48px -18px color-mix(in srgb, var(--ye) 38%, transparent), 0 6px 18px -8px rgba(0,0,0,.28), inset 0 0 0 1px color-mix(in srgb, var(--ye) 18%, transparent)}
  50%{box-shadow:0 0 0 1px color-mix(in srgb, var(--ye) 42%, transparent), 0 22px 56px -18px color-mix(in srgb, var(--ye) 52%, transparent), 0 6px 18px -8px rgba(0,0,0,.28), inset 0 0 0 1px color-mix(in srgb, var(--ye) 26%, transparent)}
}
/* Radial cursor-following gleam — kept SUBTLE (lower alpha, tighter falloff)
   so the ambient glow doesn't compete with the fixed yellow outline above. */
.mc-card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at var(--mc-glow-x,50%) var(--mc-glow-y,0%), rgba(212,175,55,.10), transparent 45%);
  opacity:0;transition:opacity .55s ease;
}
.mc-card:hover::before,
.mc-card.mc-expanded::before{opacity:.7}
/* Chest-open pulse — slower, with a more drawn-out breath + lift so the
   open feels like a chest really taking in the air. */
.mc-card.mc-opening{animation:mcChestOpen 2.1s cubic-bezier(.22,1,.36,1) both}
@keyframes mcChestOpen{
  0%{transform:translateY(0) scale(1);box-shadow:0 0 0 0 rgba(212,175,55,0)}
  18%{transform:translateY(-5px) scale(1.010);box-shadow:0 0 0 0 rgba(212,175,55,.65), 0 16px 46px -16px rgba(212,175,55,.55)}
  50%{transform:translateY(-3px) scale(1.004);box-shadow:0 0 0 22px rgba(212,175,55,.12), 0 22px 54px -20px rgba(212,175,55,.48)}
  80%{transform:translateY(-1.5px) scale(1.002);box-shadow:0 0 0 36px rgba(212,175,55,0), 0 18px 46px -18px rgba(212,175,55,.4)}
  100%{transform:none;box-shadow:0 14px 40px -16px rgba(212,175,55,.35)}
}
/* Sparkle particle layer — absolute inside .mc-card. Particles injected via JS. */
.mc-sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit;z-index:4}
.mc-sparkle{position:absolute;width:14px;height:14px;pointer-events:none;will-change:transform,opacity}
.mc-sparkle::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle, #fff2a8 0%, #ffe27a 28%, #d4af37 55%, transparent 80%);
  box-shadow:0 0 18px 4px rgba(255,226,122,.8), 0 0 32px 6px rgba(212,175,55,.45);
  animation:mcSparkPulse 2.4s cubic-bezier(.3,.9,.4,1) both;
}
/* Bigger + brighter + slower sparkles per user feedback. */
@keyframes mcSparkPulse{
  0%  {transform:scale(.15) rotate(0deg);   opacity:0}
  18% {transform:scale(.75) rotate(90deg);  opacity:1}
  55% {transform:scale(1.25) rotate(220deg);opacity:1}
  85% {transform:scale(.9)  rotate(330deg); opacity:.55}
  100%{transform:scale(.25) rotate(420deg); opacity:0}
}
/* ── Card title + subtitle ── */
.mc-title-text{font-weight:600;color:var(--tx);letter-spacing:-.005em;transition:color .25s}
.mc-card:hover .mc-title-text{color:color-mix(in srgb, #d4af37 35%, var(--tx))}
.mc-subtitle{font-size:12px;color:var(--txm);font-weight:400;letter-spacing:.01em;font-family:'DM Mono',monospace;max-width:min(520px, 60%);text-align:right;line-height:1.45}
.mc-subtitle-cursor{display:inline-block;width:2px;height:13px;background:var(--ac);margin-left:2px;vertical-align:text-bottom;animation:mcBlink 1s step-end infinite}
@keyframes mcBlink{50%{opacity:0}}
@media(max-width:900px){.mc-subtitle{max-width:none;text-align:left;width:100%}}
/* ── Hero tile grid ──
   Slower, smoother timing on the tile zoom — a proper "blow up / shrink"
   choreography (~0.85s) that feels like the card is breathing rather than
   snapping. Transitions on all dimensions (width via grid, height via
   min-height+padding, font-size, sparkline size) all share one curve and
   one duration so they land together. */
.mc-hero{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px;transition:grid-template-columns 1.25s cubic-bezier(.22,1,.36,1)}
.mc-hero-tile{
  position:relative;padding:14px 16px 14px;border:1px solid var(--bo);border-radius:var(--rs);background:var(--bge);overflow:hidden;min-height:126px;
  transition:
    transform .75s cubic-bezier(.22,1,.36,1),
    box-shadow .75s cubic-bezier(.22,1,.36,1),
    border-color .5s ease,
    min-height 1.25s cubic-bezier(.22,1,.36,1),
    padding 1.25s cubic-bezier(.22,1,.36,1),
    background .5s,
    opacity .6s ease;
  text-align:left;color:inherit;font:inherit;cursor:pointer;width:100%;appearance:none;
}
.mc-hero-tile:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.mc-hero-tile:hover{transform:translateY(-3px);box-shadow:0 16px 34px -14px rgba(0,0,0,.35)}
.mc-hero-cost{border-left:3px solid var(--ac)}
.mc-hero-cost:hover{border-color:color-mix(in srgb, var(--ac) 70%, var(--bo));box-shadow:0 16px 34px -14px color-mix(in srgb, var(--ac) 50%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ac) 20%, transparent)}
.mc-hero-save{border-left:3px solid var(--gr)}
.mc-hero-save:hover{border-color:color-mix(in srgb, var(--gr) 70%, var(--bo));box-shadow:0 16px 34px -14px color-mix(in srgb, var(--gr) 50%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--gr) 20%, transparent)}
/* Expanded tile: larger breathing-room + drama lift. */
.mc-hero-tile.mc-tile-expanded{min-height:260px;padding:20px 24px 18px;box-shadow:0 28px 64px -24px rgba(0,0,0,.5), inset 0 0 0 1px color-mix(in srgb, currentColor 20%, transparent)}
/* Collapsing sibling: fade+scale-out instead of display:none so the
   transition is visible both directions. */
.mc-hero[data-expanded="cost"] .mc-hero-cost{grid-column:1 / -1}
.mc-hero[data-expanded="cost"] .mc-hero-save{opacity:0;transform:scale(.94);pointer-events:none;max-height:0;min-height:0;padding-top:0;padding-bottom:0;border-width:0;margin:0}
.mc-hero[data-expanded="save"] .mc-hero-save{grid-column:1 / -1}
.mc-hero[data-expanded="save"] .mc-hero-cost{opacity:0;transform:scale(.94);pointer-events:none;max-height:0;min-height:0;padding-top:0;padding-bottom:0;border-width:0;margin:0}
.mc-hero-label{font-size:10.5px;font-weight:600;color:var(--txm);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.mc-hero-num{font-family:'DM Mono',monospace;font-weight:700;font-size:36px;line-height:1.05;letter-spacing:-.025em;color:var(--tx);transition:font-size 1.25s cubic-bezier(.22,1,.36,1)}
.mc-tile-expanded .mc-hero-num{font-size:62px}
.mc-hero-save .mc-hero-num{color:var(--gr)}
.mc-hero-sub{font-size:11.5px;color:var(--tx2);margin-top:4px;font-weight:500}
/* Expanded tile body — a 3-column layout so the headline / detail rows /
   sparkline each get a dedicated gutter instead of the graph floating far
   right. Collapsed tile hides the extra columns. Detail panel fades in
   only after the tile has mostly settled. */
.mc-tile-body{display:grid;grid-template-columns:1fr;gap:0;align-items:start}
.mc-tile-expanded .mc-tile-body{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.1fr);gap:22px;align-items:center}
.mc-tile-headline{display:flex;flex-direction:column;justify-content:center;min-width:0}
.mc-tile-detail{opacity:0;max-height:0;overflow:hidden;transition:opacity .65s ease .65s, max-height 1.25s cubic-bezier(.22,1,.36,1);font-size:12.5px;color:var(--tx2)}
.mc-tile-expanded .mc-tile-detail{opacity:1;max-height:320px}
/* Expanded-tile graph sits in its own grid cell, sized to fill it.
   Collapsed tile keeps the original bottom-right sparkline absolute
   positioning via the .mc-spark rules below. */
.mc-tile-graph{display:none}
.mc-tile-expanded .mc-tile-graph{display:flex;justify-content:center;align-items:center;min-height:120px}
.mc-tile-expanded .mc-tile-graph svg{width:100%;max-width:320px;height:90px}
.mc-tile-expanded .mc-spark{display:none}
@media(max-width:900px){
  .mc-tile-expanded .mc-tile-body{grid-template-columns:1fr;gap:14px}
  .mc-tile-expanded .mc-tile-graph svg{max-width:420px}
}
.mc-tile-detail-row{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px solid var(--bos);animation:mcChipIn .3s cubic-bezier(.4,0,.2,1) both}
.mc-tile-detail-row:last-child{border-bottom:none}
.mc-tile-detail-k{color:var(--txm);font-size:11.5px}
.mc-tile-detail-v{font-family:'DM Mono',monospace;font-size:12.5px;color:var(--tx);font-weight:500}
.mc-hero-save .mc-tile-detail-v{color:var(--gr)}
/* Sparkline — bigger so the animation is more visible, fades in later */
.mc-spark{position:absolute;right:14px;bottom:14px;width:140px;height:42px;opacity:0;transition:opacity .5s ease .55s, width .45s cubic-bezier(.4,0,.2,1), height .45s cubic-bezier(.4,0,.2,1)}
.mc-tile-expanded .mc-spark{width:220px;height:72px;bottom:22px;right:22px}
.mc-hero-tile.mc-ready .mc-spark{opacity:1}
.mc-spark-path{fill:none;stroke:var(--ac);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--dash,500);stroke-dashoffset:var(--dash,500);transition:stroke-dashoffset 1.6s cubic-bezier(.45,0,.15,1) .45s}
.mc-spark-path-save{stroke:var(--gr)}
.mc-spark-fill{opacity:0;transition:opacity .75s ease 1.25s}
.mc-hero-tile.mc-ready .mc-spark-path{stroke-dashoffset:0}
.mc-hero-tile.mc-ready .mc-spark-fill{opacity:1}
/* Endpoint dot — pulses at the last data point when line is done drawing */
.mc-spark-dot{r:3.2;opacity:0;animation:mcDotPulse 2.1s ease-in-out infinite;animation-delay:2s}
.mc-hero-tile.mc-ready .mc-spark-dot{opacity:1}
.mc-spark-dots{fill:var(--ac)}
.mc-hero-save .mc-spark-dots{fill:var(--gr)}
@keyframes mcDotPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 3px currentColor)}50%{transform:scale(1.55);filter:drop-shadow(0 0 8px currentColor)}}
.mc-hero-num.mc-counter-done{animation:mcPop .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes mcPop{0%{transform:scale(.94)}55%{transform:scale(1.055)}100%{transform:scale(1)}}
/* Real-world equivalents — two slots aligned to the two hero tiles above.
   Each slot holds exactly one pill. Slots CENTER their pill directly
   below each tile so alignment reads as intentional. When a tile zooms,
   the opposite slot collapses; the visible slot stretches + stays
   centered on the card. */
/* More breathing room between the pills and the detail stats that open
   below them (was 20px, felt cramped). */
.mc-equiv{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;margin-bottom:8px;min-height:36px;transition:grid-template-columns 1.25s cubic-bezier(.22,1,.36,1)}
.mc-equiv-slot{display:flex;justify-content:center;align-items:center;padding:2px 2px;transition:opacity .55s ease, transform .75s cubic-bezier(.22,1,.36,1), max-width .75s cubic-bezier(.22,1,.36,1)}
.mc-equiv-slot-cost,.mc-equiv-slot-save{justify-content:center}
/* Collapsed (hidden) slot state — used when the other tile is expanded */
.mc-equiv-slot.mc-equiv-slot-hidden{opacity:0;pointer-events:none;transform:scale(.96);max-width:0;overflow:hidden}
/* When a tile is expanded, the visible slot stretches full-width but
   stays center-aligned */
.mc-equiv-slot.mc-equiv-slot-centered{grid-column:1 / -1;justify-content:center}
.mc-equiv-chip{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:500;background:color-mix(in srgb, var(--gr) 14%, transparent);color:var(--gr);border:1px solid color-mix(in srgb, var(--gr) 30%, transparent);cursor:pointer;font-family:inherit;user-select:none;outline:none;
  /* Persistent hover/active behavior — no snap back to default on burst */
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .25s ease, box-shadow .3s ease, color .25s ease, border-color .25s ease;
  animation:mcChipFadeIn .55s cubic-bezier(.4,0,.2,1) both;
}
.mc-equiv-chip:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, var(--gr) 55%, transparent)}
.mc-equiv-chip:hover{transform:translateY(-1px);box-shadow:0 4px 10px -4px color-mix(in srgb, var(--gr) 40%, transparent)}
.mc-equiv-chip:active{transform:translateY(0)}
.mc-equiv-chip-cost{background:color-mix(in srgb, var(--ac) 14%, transparent);color:var(--ac);border-color:color-mix(in srgb, var(--ac) 30%, transparent)}
.mc-equiv-chip-cost:hover{box-shadow:0 4px 10px -4px color-mix(in srgb, var(--ac) 40%, transparent)}
.mc-equiv-chip-cost:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, var(--ac) 55%, transparent)}
@keyframes mcChipFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* Click celebration — professional, subtle. A small press-in-then-settle
   with a text color deepen; no background flash, no giant bounce. */
.mc-equiv-chip.mc-chip-popped{animation:mcChipPop 1.1s cubic-bezier(.22,1,.36,1)}
@keyframes mcChipPop{
  0%{transform:scale(1) translateY(0)}
  22%{transform:scale(0.96) translateY(0)}
  45%{transform:scale(1.04) translateY(-1.5px)}
  70%{transform:scale(1.01) translateY(-.5px)}
  100%{transform:scale(1) translateY(0)}
}
/* On click the TEXT color deepens to the full accent, then settles back.
   Keeps the signal text-driven (per the spec) rather than background-driven. */
.mc-equiv-chip.mc-chip-popped{color:color-mix(in srgb, var(--gr) 80%, #fff 0%);font-weight:600}
.mc-equiv-chip.mc-chip-popped.mc-equiv-chip-cost{color:color-mix(in srgb, var(--ac) 80%, #fff 0%)}
.mc-chip-halo{
  position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:-1;
  box-shadow:0 0 0 0 currentColor;
  animation:mcChipHalo 1.8s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes mcChipHalo{
  0%{box-shadow:0 0 0 0 currentColor;opacity:.7}
  35%{box-shadow:0 0 0 12px color-mix(in srgb, currentColor 30%, transparent);opacity:.55}
  70%{box-shadow:0 0 0 28px color-mix(in srgb, currentColor 12%, transparent);opacity:.28}
  100%{box-shadow:0 0 0 44px transparent;opacity:0}
}
/* Double-ring — a second, expanding ring layered behind the halo for
   depth. Subtle but adds polish. */
.mc-chip-ring{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  border:2px solid currentColor;opacity:0;
  animation:mcChipRing 1.8s cubic-bezier(.2,.8,.3,1) .15s forwards;
}
@keyframes mcChipRing{
  0%{transform:scale(1);opacity:.7}
  55%{opacity:.25}
  100%{transform:scale(1.55);opacity:0}
}
/* Internal sheen — light gradient band crosses the pill slowly. */
.mc-chip-sheen{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden;z-index:1;
}
.mc-chip-sheen::before{
  content:"";position:absolute;top:0;bottom:0;left:-50%;width:50%;
  background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, #fff 60%, transparent) 45%, color-mix(in srgb, #fff 40%, transparent) 55%, transparent 100%);
  animation:mcChipSheen 1.6s cubic-bezier(.25,.8,.3,1) forwards;
  mix-blend-mode:overlay;
}
@keyframes mcChipSheen{0%{transform:translateX(0)}100%{transform:translateX(400%)}}
/* Correlated-list glow — when a pill is clicked, the matching list in the
   expanded section (Top Cost Drivers / Top Cost Savings) pulses a soft
   glow so the user sees the connection. */
.mc-list-title.mc-list-title-lit{animation:mcTitleLit 2.2s cubic-bezier(.3,.9,.4,1)}
@keyframes mcTitleLit{
  0%{text-shadow:0 0 0 transparent;color:var(--txm)}
  15%{text-shadow:0 0 14px color-mix(in srgb, currentColor 70%, transparent), 0 0 28px color-mix(in srgb, currentColor 45%, transparent);color:var(--tx)}
  55%{text-shadow:0 0 8px color-mix(in srgb, currentColor 55%, transparent), 0 0 16px color-mix(in srgb, currentColor 25%, transparent)}
  100%{text-shadow:0 0 0 transparent;color:var(--txm)}
}
.mc-drivers.mc-lit .mc-list-bar-fill,.mc-savings.mc-lit .mc-list-bar-fill{animation:mcBarGlow 2.2s cubic-bezier(.3,.9,.4,1)}
@keyframes mcBarGlow{
  0%{box-shadow:0 0 0 0 transparent}
  40%{box-shadow:0 0 10px 1px currentColor, 0 0 20px 1px color-mix(in srgb, currentColor 40%, transparent)}
  100%{box-shadow:0 0 0 0 transparent}
}
/* Tile graph — path draw-in animation. Runs on open + on pill click. */
.mc-tile-graph-path{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--dash,600);stroke-dashoffset:var(--dash,600);transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.15,1)}
.mc-tile-graph.mc-graph-playing .mc-tile-graph-path{stroke-dashoffset:0}
.mc-tile-graph-fill{opacity:0;transition:opacity .7s ease 1.1s}
.mc-tile-graph.mc-graph-playing .mc-tile-graph-fill{opacity:1}
/* Expanded-section layout */
.mc-expand-stats{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;padding:10px 0 6px}
.mc-expand-stats>div>span{color:var(--txm)}
.mc-expand-stats>div>strong{font-family:'DM Mono',monospace}
/* Cost / Savings stats split — each side aligns under its hero tile + pill. */
.mc-expand-stats-split{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:4px;padding:10px 0 10px;border-top:1px solid var(--bos);border-bottom:1px solid var(--bos)}
.mc-expand-col{display:flex;flex-direction:column;gap:4px;font-size:13px}
.mc-expand-col>div>span{color:var(--txm)}
.mc-expand-col>div>strong{font-family:'DM Mono',monospace}
.mc-expand-col-head{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--txm);margin-bottom:2px}
.mc-expand-col-cost .mc-expand-col-head{color:var(--ac)}
.mc-expand-col-save .mc-expand-col-head{color:var(--gr)}
@media(max-width:700px){.mc-expand-stats-split{grid-template-columns:1fr;gap:14px}}
/* Driver / Savings title glow: stronger than list-row glow, on a shared .mc-section-lit class. */
.mc-list-title{transition:transform .35s cubic-bezier(.22,1,.36,1), letter-spacing .35s cubic-bezier(.22,1,.36,1), color .35s ease;transform-origin:left center;display:inline-block}
.mc-list-title-lit{animation:mcTitleGlow 2.4s cubic-bezier(.4,0,.2,1) both}
@keyframes mcTitleGlow{
  0%{transform:scale(1);letter-spacing:.06em;text-shadow:0 0 0 transparent;color:var(--txm)}
  22%{transform:scale(1.14);letter-spacing:.08em;text-shadow:0 0 18px currentColor, 0 0 40px color-mix(in srgb, currentColor 55%, transparent);color:var(--tx)}
  55%{transform:scale(1.06);letter-spacing:.07em;text-shadow:0 0 10px currentColor;color:var(--tx)}
  100%{transform:scale(1);letter-spacing:.06em;text-shadow:0 0 0 transparent;color:var(--txm)}
}
.mc-drivers .mc-list-title-lit{color:var(--ac)}
.mc-savings .mc-list-title-lit{color:var(--gr)}
/* Each row (label + value + bar + pct) gets a coordinated glow when the
   section is lit. Title glows strongest; row text picks up a subtle
   text-shadow pulse so the whole cluster breathes together. */
.mc-list-row-lit{animation:mcRowGlow 2.0s cubic-bezier(.3,.9,.4,1) both}
.mc-list-row-lit .mc-list-label,
.mc-list-row-lit .mc-list-val,
.mc-list-row-lit .mc-list-pct{animation:mcRowTextGlow 2.0s cubic-bezier(.3,.9,.4,1) both}
@keyframes mcRowGlow{
  0%{background:transparent}
  30%{background:color-mix(in srgb, currentColor 10%, transparent)}
  100%{background:transparent}
}
@keyframes mcRowTextGlow{
  0%{text-shadow:0 0 0 transparent}
  35%{text-shadow:0 0 10px currentColor, 0 0 18px color-mix(in srgb, currentColor 45%, transparent)}
  100%{text-shadow:0 0 0 transparent}
}
/* Tint everything in a lit list with the section's accent color so the
   text-shadow picks it up. Drivers = accent-blue, Savings = green. */
.mc-drivers .mc-list-row-lit{color:var(--ac)}
.mc-savings .mc-list-row-lit{color:var(--gr)}
.mc-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:10px}
.mc-list-title{font-size:11px;font-weight:600;color:var(--txm);margin-bottom:4px;text-transform:uppercase;letter-spacing:.06em}
.mc-list-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--bos);animation:mcChipIn .32s cubic-bezier(.4,0,.2,1) both}
.mc-list-row:last-child{border-bottom:none}
.mc-list-label{font-size:12px;color:var(--tx);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-list-val{font-size:11px;font-family:'DM Mono',monospace;color:var(--tx2);flex-shrink:0}
.mc-list-bar{width:60px;height:5px;background:var(--bge);border-radius:3px;overflow:hidden;flex-shrink:0}
/* Bar fill: width is driven by inline --target (set from the server-rendered
   percentage). Start at 0; the .mc-bar-play class flips width to --target
   over 1.3s. We toggle the class on hover/click enter, then clear on leave
   so the next entry plays the animation again (once per entry). */
.mc-list-bar-fill{display:block;height:100%;border-radius:3px;width:0;transition:width 1.3s cubic-bezier(.4,0,.2,1)}
.mc-bar-play .mc-list-bar-fill{width:var(--target,0)}
.mc-drivers .mc-list-bar-fill{background:var(--ac)}
.mc-savings .mc-list-bar-fill{background:var(--gr)}
.mc-list-pct{font-size:10px;color:var(--txm);min-width:28px;text-align:right;flex-shrink:0}
@keyframes mcBarFill{from{width:0 !important}}
/* Per-focus split (Leads & Calls vs Ad Subs) */
.mc-focus-split{display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));gap:14px;margin-top:18px}
.mc-focus-card{padding:12px 14px;border:1px solid var(--bo);border-left:3px solid var(--gr);border-radius:var(--rs);background:var(--bge);animation:mcChipIn .4s cubic-bezier(.4,0,.2,1) both}
.mc-focus-card-leads{border-left-color:var(--ac)}
.mc-focus-card-adsubs{border-left-color:var(--gr)}
.mc-focus-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.mc-focus-name{font-size:12.5px;font-weight:600;color:var(--tx)}
.mc-focus-total{font-family:'DM Mono',monospace;font-size:15px;font-weight:700;color:var(--gr)}
.mc-focus-card-leads .mc-focus-total{color:var(--ac)}
.mc-focus-count{font-size:10.5px;color:var(--txm);text-transform:uppercase;letter-spacing:.06em}
/* Recent wins */
.mc-recent-head{font-size:11px;font-weight:600;color:var(--txm);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.06em}
.mc-recent-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--bos);font-size:11.5px;animation:mcChipIn .34s cubic-bezier(.4,0,.2,1) both}
.mc-recent-row:last-child{border-bottom:none}
.mc-recent-action{color:var(--tx);flex:1;line-height:1.45}
.mc-recent-save{font-family:'DM Mono',monospace;color:var(--gr);font-weight:600;flex-shrink:0}
@media(max-width:900px){.mc-hero{grid-template-columns:1fr}.mc-columns{grid-template-columns:1fr}.mc-hero[data-expanded="cost"] .mc-hero-cost,.mc-hero[data-expanded="save"] .mc-hero-save{grid-column:auto}}
@media (prefers-reduced-motion:reduce){
  .mc-card,.mc-card::before,.mc-spark-path,.mc-spark-fill,.mc-hero-tile,.mc-hero-num,.mc-spark{transition:none;animation:none}
  .mc-equiv-chip,.mc-list-row,.mc-recent-row,.mc-focus-card{animation:none}
  .mc-list-bar-fill{animation:none;width:var(--target,100%)}
  .mc-sparkle,.mc-spark-dot{animation:none;opacity:0}
}
.chart-wrap{position:relative;height:120px}
canvas{max-height:120px}
#cost-chart{max-height:none}#service-chart{max-height:none}#arch-canvas{max-height:none}#ha-mascot-canvas{max-height:none}#ha-globe-canvas{max-height:none}

/* ── LOG TABLE ── */
.log-table{width:100%;border-collapse:collapse;font-family:'DM Mono',monospace;font-size:12px}
.log-table th{padding:8px 12px;text-align:left;background:var(--bge);color:var(--txm);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--bo);position:sticky;top:0;z-index:1}
.log-table td{padding:5px 12px;border-bottom:1px solid var(--bos);color:var(--tx2);vertical-align:top;word-break:break-word}
.log-table td:first-child{color:var(--txm);white-space:nowrap;width:175px}
.log-table td:nth-child(2){color:var(--ac);white-space:nowrap;width:180px;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.log-table tr:hover td{background:var(--bge)}
.log-row.error td{color:var(--re)}.log-row.error td:first-child::before{content:'● ';color:var(--re)}
.log-row.warn td{color:var(--ye)}.log-row.warn td:first-child::before{content:'● ';color:var(--ye)}
.log-row.info td:first-child::before{content:'● ';color:var(--gr)}
.log-stats{display:flex;gap:16px;padding:8px 0;font-size:12px;color:var(--txm);border-bottom:1px solid var(--bo);margin-bottom:8px}
.log-stats span{display:flex;align-items:center;gap:4px}
.log-container{max-height:480px;overflow-y:auto;background:var(--bgc);border:1px solid var(--bo);border-radius:var(--r);margin-top:10px}
.log-empty{text-align:center;padding:36px;color:var(--txm);font-size:13px}

/* ── CHATBOT ── */
.hcb-wrap{position:fixed;bottom:22px;right:22px;z-index:999;display:flex;flex-direction:column;align-items:flex-end;gap:10px;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1)}
.hcb-wrap.hcb-hidden{transform:translateY(20px) scale(.95);opacity:0;pointer-events:none;transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s}
.hcb-wrap.hcb-peek{transform:translateY(12px);opacity:.75;pointer-events:auto;transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s}
.hcb-btn{width:58px;height:58px;border-radius:50%;background:var(--lhred);border:none;cursor:pointer;overflow:hidden;transition:transform .2s,box-shadow .2s;flex-shrink:0;padding:0;box-shadow:0 4px 24px rgba(232,50,28,.45)}
.hcb-btn img{width:100%;height:100%;object-fit:cover}
.hcb-btn:hover{transform:scale(1.04);box-shadow:0 5px 28px rgba(232,50,28,.5)}
.hcb-window{width:352px;max-height:560px;background:var(--bgc);border:1px solid var(--bo);border-radius:16px;box-shadow:0 20px 56px rgba(0,0,0,.45);display:none;flex-direction:column;overflow:hidden;transition:box-shadow .3s}
.hcb-window.open{display:flex;animation:slideUp .2s ease,hcbGlow 3s ease-in-out infinite;box-shadow:0 20px 56px rgba(0,0,0,.45),0 0 24px rgba(232,50,28,.15),0 0 48px rgba(232,50,28,.06)}
@keyframes hcbGlow{0%,100%{box-shadow:0 20px 56px rgba(0,0,0,.45),0 0 24px rgba(232,50,28,.15),0 0 48px rgba(232,50,28,.06)}50%{box-shadow:0 20px 56px rgba(0,0,0,.45),0 0 30px rgba(232,50,28,.22),0 0 56px rgba(232,50,28,.10)}}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.hcb-head{background:var(--lhred);padding:12px 14px;display:flex;align-items:center;gap:10px;flex-shrink:0}
.hcb-avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.3)}
.hcb-avatar img{width:100%;height:100%;object-fit:cover}
.hcb-head-text{flex:1}
.hcb-head-title{font-size:14px;font-weight:700;color:#fff}
.hcb-head-sub{font-size:11px;color:rgba(255,255,255,.72);margin-top:1px}
.hcb-close{background:none;border:none;color:rgba(255,255,255,.8);cursor:pointer;font-size:18px;line-height:1;padding:0}
.hcb-close:hover{color:#fff}
.hcb-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px;min-height:140px}
.hcb-msg{max-width:88%;padding:9px 13px;border-radius:14px;font-size:13px;line-height:1.5}
.hcb-msg.bot{background:var(--bge);color:var(--tx);align-self:flex-start;border-bottom-left-radius:4px}
.hcb-msg.user{background:var(--lhred);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
/* Thinking-dots — reused by the incident narrative panel + (later) the
   Architecture-tab chat while waiting on /api/hero-chat or /api/incidents/narrative */
.hcb-thinking{background:var(--bge);align-self:flex-start;border-bottom-left-radius:4px}
.hcb-dots{display:inline-flex;gap:4px;align-items:center}
.hcb-dots span{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb, var(--ac) 70%, var(--txm));opacity:.45;animation:hcbDotPulse 1s cubic-bezier(.4,0,.2,1) infinite}
.hcb-dots span:nth-child(2){animation-delay:.15s}
.hcb-dots span:nth-child(3){animation-delay:.3s}
@keyframes hcbDotPulse{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
.hcb-opts{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 8px}
.hcb-opt{padding:6px 12px;border-radius:999px;border:1px solid var(--bo);background:var(--bgc);color:var(--tx2);font-size:12px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s}
.hcb-opt:hover{background:var(--lhred);color:#fff;border-color:var(--lhred)}
.hcb-file-row{padding:0 14px 8px;display:none}
.hcb-fz{border:2px dashed var(--bo);border-radius:var(--rs);padding:10px;text-align:center;cursor:pointer;font-size:12px;color:var(--txm);transition:all .2s}
.hcb-fz:hover,.hcb-fz.drag{border-color:var(--lhred);background:rgba(232,50,28,.04)}
.hcb-file-list{margin-top:5px;font-size:11px;color:var(--tx2)}
.hcb-input-row{display:flex;gap:7px;padding:10px 13px;border-top:1px solid var(--bo);flex-shrink:0;align-items:center}
.hcb-input{flex:1;padding:8px 10px;border:1px solid var(--bo);border-radius:var(--rs);background:var(--bge);color:var(--tx);font-size:13px;font-family:'DM Sans',sans-serif;outline:none;display:none}
.hcb-input:focus{border-color:var(--lhred)}
.hcb-send{width:32px;height:32px;border-radius:var(--rs);background:var(--lhred);border:none;cursor:pointer;display:none;align-items:center;justify-content:center;flex-shrink:0}
.hcb-send:hover{background:var(--lhred2)}
.hcb-typing{display:flex;align-items:center;gap:4px;padding:4px 0}
.hcb-typing span{width:6px;height:6px;border-radius:50%;background:var(--txm);display:inline-block;animation:typing .9s infinite}
.hcb-typing span:nth-child(2){animation-delay:.2s}.hcb-typing span:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}

/* ── MASCOT ANIMATIONS ── */
@keyframes hcbWave{0%,100%{transform:rotate(0deg)}15%{transform:rotate(14deg)}30%{transform:rotate(-8deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-4deg)}75%{transform:rotate(6deg)}}
@keyframes hcbPeace{0%,100%{transform:scale(1) rotate(0)}25%{transform:scale(1.06) rotate(-3deg)}50%{transform:scale(1.08) rotate(2deg)}75%{transform:scale(1.04) rotate(-1deg)}}
@keyframes hcbHero{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-6px) scale(1.05)}60%{transform:translateY(-3px) scale(1.02)}}
@keyframes hcbNod{0%,100%{transform:translateY(0)}20%{transform:translateY(2px)}40%{transform:translateY(-2px)}60%{transform:translateY(1px)}}
@keyframes hcbPulse{0%,100%{box-shadow:0 4px 24px rgba(232,50,28,.45);filter:hue-rotate(0deg)}50%{box-shadow:0 4px 26px rgba(232,50,28,.55);filter:hue-rotate(8deg)}}
.hcb-btn.hcb-anim-wave{animation:hcbWave 1.2s ease-in-out}
.hcb-btn.hcb-anim-peace{animation:hcbPeace 1.4s ease-in-out}
.hcb-btn.hcb-anim-hero{animation:hcbHero 1.1s ease-in-out}
.hcb-btn.hcb-anim-nod{animation:hcbNod 1s ease-in-out}
.hcb-btn.hcb-anim-pulse{animation:hcbPulse 3s ease-in-out}

/* ── TABLE SCROLL ── */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.table-scroll .report-table{min-width:540px}
input,select,textarea{max-width:100%}

/* ── TOPOLOGY ── */
.topo-grid{display:flex;flex-direction:column;gap:12px;padding:16px 0;width:100%}
.topo-grid.topo-single{padding:0}
.topo-product-card{background:var(--bgc);border:1px solid var(--bo);border-radius:var(--r);cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);overflow:hidden}
.topo-product-card:hover{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac)}
.topo-product-card.expanded{border-color:var(--ac);box-shadow:0 0 20px rgba(47,129,247,.12);cursor:default}
.topo-product-card.status-green{border-left:4px solid var(--gr)}
.topo-product-card.status-yellow{border-left:4px solid var(--ye)}
.topo-product-card.status-red{border-left:4px solid var(--re)}
.topo-product-card.status-unknown{border-left:4px solid var(--unk)}
.topo-prod-header{display:flex;align-items:center;gap:12px;padding:18px 24px}
.topo-prod-name{font-size:15px;font-weight:700;color:var(--tx);flex:1}
.topo-prod-count{font-size:11px;color:var(--txm);font-family:'DM Mono',monospace}
.topo-prod-envs{font-size:10px;color:var(--txm);display:flex;gap:4px;flex-wrap:wrap}
.topo-prod-envs span{background:var(--bge);padding:2px 8px;border-radius:4px;font-weight:500}
.topo-expand-icon{font-size:14px;color:var(--txm);transition:transform .3s}
.topo-env-bar{display:flex;gap:12px;padding:8px 24px 16px;flex-wrap:wrap;align-items:center;justify-content:center}
.topo-env-btn{font-size:12px;padding:6px 18px;border-radius:8px;border:1px solid var(--bo);background:transparent;color:var(--tx2);cursor:pointer;font-weight:500;font-family:'DM Sans',sans-serif;transition:all .2s}
.topo-env-btn:hover{border-color:var(--ac);color:var(--ac)}
.topo-env-btn.active{background:var(--ac);color:#fff;border-color:var(--ac)}
/* ── Flow container with SVG overlay ── */
.topo-flow-wrap{position:relative;overflow:visible}
.topo-flow{display:none;padding:20px 12px 32px;overflow:visible}
.topo-flow.open{display:block;animation:topoFadeIn .5s cubic-bezier(.4,0,.2,1)}
.topo-direct-flow{display:block;padding:24px 0 32px;animation:topoFadeIn .5s cubic-bezier(.4,0,.2,1)}
@keyframes topoFadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
/* ── Tier layout ── */
.topo-tiers{display:flex;justify-content:space-evenly;align-items:flex-start;position:relative;z-index:2;min-height:200px;padding:0 32px}
.topo-tier{display:flex;flex-direction:column;align-items:center;gap:18px;flex:1;max-width:440px}
.topo-tier-label{font-size:9px;font-weight:700;color:var(--txm);text-transform:uppercase;letter-spacing:.1em;opacity:.6;text-align:center}
.topo-tier-nodes{display:flex;flex-direction:column;gap:24px;align-items:center}
/* ── Service nodes — icons only, no cards ── */
.topo-svc-node{background:transparent;border:none;padding:8px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;position:relative;transition:all .35s cubic-bezier(.4,0,.2,1);animation:topoFloat 6s cubic-bezier(.4,0,.2,1) infinite}
.topo-svc-node:nth-child(2){animation-delay:-2s}
.topo-svc-node:nth-child(3){animation-delay:-4s}
.topo-svc-node:hover{transform:translateY(-3px) scale(1.08)}
.topo-svc-node.topo-node-active{transform:scale(1.1)}
.topo-svc-node.topo-node-dimmed{opacity:.15;filter:grayscale(.7);pointer-events:none}
@keyframes topoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
/* ── Icon with halo glow — glow IS the status indicator ── */
.topo-svc-icon{width:80px;height:80px;display:flex;align-items:center;justify-content:center;transition:filter .35s cubic-bezier(.4,0,.2,1);color:var(--tx)}
.topo-svc-icon svg{width:64px;height:64px}
.topo-svc-node.status-green .topo-svc-icon{filter:drop-shadow(0 0 10px rgba(63,185,80,.7)) drop-shadow(0 0 24px rgba(63,185,80,.4)) drop-shadow(0 0 48px rgba(63,185,80,.15))}
/* Hover — drop-shadow radii + intensity increased so the hovered icon is
   clearly the brightest thing in the tier, and the adjacent icons visibly
   recede by comparison via topo-node-dimmed rule below. */
.topo-svc-node.status-green:hover .topo-svc-icon{filter:drop-shadow(0 0 18px rgba(63,185,80,.98)) drop-shadow(0 0 40px rgba(63,185,80,.65)) drop-shadow(0 0 72px rgba(63,185,80,.3)) brightness(1.1)}
.topo-svc-node.status-yellow .topo-svc-icon{filter:drop-shadow(0 0 10px rgba(229,162,0,.7)) drop-shadow(0 0 24px rgba(229,162,0,.4)) drop-shadow(0 0 48px rgba(229,162,0,.15))}
.topo-svc-node.status-yellow:hover .topo-svc-icon{filter:drop-shadow(0 0 18px rgba(229,162,0,.98)) drop-shadow(0 0 40px rgba(229,162,0,.65)) drop-shadow(0 0 72px rgba(229,162,0,.3)) brightness(1.1)}
.topo-svc-node.status-red .topo-svc-icon{filter:drop-shadow(0 0 12px rgba(248,81,73,.75)) drop-shadow(0 0 28px rgba(248,81,73,.45)) drop-shadow(0 0 52px rgba(248,81,73,.18));animation:topoPulseRed 2.5s ease-in-out infinite}
.topo-svc-node.status-red:hover .topo-svc-icon{filter:drop-shadow(0 0 20px rgba(248,81,73,1)) drop-shadow(0 0 44px rgba(248,81,73,.75)) drop-shadow(0 0 80px rgba(248,81,73,.35)) brightness(1.1);animation-play-state:paused}
.topo-svc-node.status-unknown .topo-svc-icon{filter:none}
.topo-svc-node.status-unknown:hover .topo-svc-icon{filter:drop-shadow(0 0 14px rgba(139,148,158,.55)) drop-shadow(0 0 30px rgba(139,148,158,.3)) brightness(1.15)}
.topo-svc-node.status-unknown{animation:topoFloat 6s cubic-bezier(.4,0,.2,1) infinite;opacity:.55}
/* When any node in a tier is hovered, non-hovered peers fade so the
   hovered one reads as the brightest. Uses the :has() selector on the
   wrapping tier — gracefully ignored by older browsers. */
.topo-tier:has(.topo-svc-node:hover) .topo-svc-node:not(:hover){opacity:.55;filter:saturate(.75)}
.topo-tier .topo-svc-node:not(:hover){transition:opacity .35s ease, filter .35s ease, transform .35s ease}
.topo-tier .topo-svc-node:hover{transform:translateY(-4px) scale(1.12);z-index:3}
@keyframes topoPulseRed{0%,100%{filter:drop-shadow(0 0 10px rgba(248,81,73,.6)) drop-shadow(0 0 24px rgba(248,81,73,.35)) drop-shadow(0 0 44px rgba(248,81,73,.12))}50%{filter:drop-shadow(0 0 16px rgba(248,81,73,.9)) drop-shadow(0 0 36px rgba(248,81,73,.55)) drop-shadow(0 0 64px rgba(248,81,73,.25))}}
/* ── Node label — type only, no status text ── */
.topo-svc-label{font-size:11px;font-weight:700;letter-spacing:.06em;font-family:'DM Mono',monospace;color:var(--tx2)}
/* ── SVG lines overlay ── */
.topo-lines-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.topo-path-base{fill:none;stroke-linecap:round;stroke-width:3;opacity:.18}
.topo-path-glow{fill:none;stroke-linecap:round;stroke-width:14;opacity:.08;filter:blur(5px)}
.topo-path-particles{fill:none;stroke-linecap:round;stroke-width:2.5;stroke-dasharray:4 20;opacity:.5;animation:topoParticle 5s linear infinite}
@keyframes topoParticle{0%{stroke-dashoffset:24}100%{stroke-dashoffset:0}}
.topo-line-green{stroke:var(--gr)}.topo-line-yellow{stroke:var(--ye)}.topo-line-red{stroke:var(--re)}.topo-line-unknown{stroke:var(--txm)}
.topo-line-dead .topo-path-particles{animation:none;opacity:.08;stroke-dasharray:3 10}
.topo-line-dead .topo-path-glow{opacity:.03}
.topo-line-dead .topo-path-base{opacity:.12}
.topo-line-active .topo-path-particles{animation-duration:1.8s;opacity:.75}
.topo-line-active .topo-path-glow{opacity:.18}
.topo-line-active .topo-path-base{opacity:.3}
.topo-line-dimmed .topo-path-particles{opacity:.05}
.topo-line-dimmed .topo-path-glow{opacity:0}
.topo-line-dimmed .topo-path-base{opacity:.04}
/* ── Depth: vignette behind active flow ── */
.topo-flow-wrap::before{content:'';position:absolute;inset:0;border-radius:var(--r);background:radial-gradient(ellipse at 50% 50%,rgba(47,129,247,.03) 0%,transparent 70%);pointer-events:none;z-index:0}
#dtopo-detail{transition:all .2s}
/* ── Responsive ── */
@media(max-width:900px){
.topo-svc-icon{width:64px;height:64px}
.topo-svc-icon svg{width:50px;height:50px}
.topo-tiers{padding:0 12px}
}
@media(max-width:640px){
.topo-tiers{flex-direction:column;align-items:center;gap:12px;padding:0}
.topo-tier-nodes{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:16px}
.topo-svc-icon{width:60px;height:60px}
.topo-svc-icon svg{width:46px;height:46px}
}
@media(min-width:1200px){
.topo-svc-icon{width:120px;height:120px}
.topo-svc-icon svg{width:96px;height:96px}
.topo-tiers{min-height:280px;padding:0 48px}
.topo-tier-nodes{gap:32px}
.topo-svc-label{font-size:12px}
}

/* ── WIDGET GRID ── */
.widget-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.wg-sm{grid-column:span 1}.wg-md{grid-column:span 2}.wg-lg{grid-column:span 4}
.wg-card{background:var(--bgc);border-radius:var(--r);border:1px solid var(--bo);padding:16px 18px;position:relative;min-height:110px;display:flex;flex-direction:column;transition:transform .28s cubic-bezier(.4,0,.2,1),border-color .22s ease,box-shadow .28s ease,background .22s ease;will-change:transform}
/* Each category gets its own distinct hover "feel" so the dashboard
   doesn't feel like a wall of identical glow. */
.wg-card[data-wg-cat="status"]:hover{border-color:color-mix(in srgb,var(--gr) 75%,var(--bo));box-shadow:0 0 0 1px color-mix(in srgb,var(--gr) 45%,transparent),0 10px 24px -16px color-mix(in srgb,var(--gr) 55%,transparent);background:linear-gradient(180deg,var(--bgc) 60%,color-mix(in srgb,var(--gr) 5%,var(--bgc)) 100%);transform:translateY(-2px)}
.wg-card[data-wg-cat="status"]:hover::before{opacity:1;transform:scaleX(1)}
.wg-card[data-wg-cat="status"]::before{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:linear-gradient(90deg,transparent,var(--gr),transparent);opacity:0;transform:scaleX(.25);transform-origin:center;transition:opacity .3s ease,transform .5s cubic-bezier(.4,0,.2,1);border-radius:0 0 var(--r) var(--r);pointer-events:none}
.wg-card[data-wg-cat="charts"]:hover{border-color:color-mix(in srgb,var(--ac) 70%,var(--bo));box-shadow:0 0 0 1px color-mix(in srgb,var(--ac) 40%,transparent),0 14px 28px -18px color-mix(in srgb,var(--ac) 55%,transparent);transform:translateY(-3px) scale(1.005)}
.wg-card[data-wg-cat="charts"]::after{content:"";position:absolute;inset:0;border-radius:var(--r);background:linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--ac) 18%,transparent) 50%,transparent 70%);background-size:220% 100%;background-position:100% 0;opacity:0;pointer-events:none;transition:opacity .25s ease}
.wg-card[data-wg-cat="charts"]:hover::after{opacity:1;animation:wgScanSweep 1.4s cubic-bezier(.4,0,.2,1) forwards}
@keyframes wgScanSweep{0%{background-position:100% 0}100%{background-position:-120% 0}}
.wg-card[data-wg-cat="meters"]:hover{border-color:color-mix(in srgb,#d29922 75%,var(--bo));box-shadow:0 0 0 1px color-mix(in srgb,#d29922 40%,transparent),0 12px 28px -18px color-mix(in srgb,#d29922 55%,transparent);transform:translateY(-2px)}
.wg-card[data-wg-cat="meters"]:hover .wg-speed-svg,
.wg-card[data-wg-cat="meters"]:hover .wg-pring,
.wg-card[data-wg-cat="meters"]:hover .wg-gauge,
.wg-card[data-wg-cat="meters"]:hover .wg-therm-bulb,
.wg-card[data-wg-cat="meters"]:hover .wg-batt{animation:wgMeterTick .6s cubic-bezier(.3,1.4,.4,1)}
@keyframes wgMeterTick{0%{transform:rotate(0) scale(1)}20%{transform:rotate(-2deg) scale(1.02)}55%{transform:rotate(1.5deg) scale(1.01)}100%{transform:rotate(0) scale(1)}}
.wg-card[data-wg-cat="integrations"]:hover{border-color:color-mix(in srgb,#a855f7 72%,var(--bo));box-shadow:0 0 0 1px color-mix(in srgb,#a855f7 40%,transparent),0 16px 32px -18px color-mix(in srgb,#a855f7 50%,transparent);transform:translateY(-2px)}
/* ── Per-widget-type hover micro-interactions ──
   The category-level hover handles the chrome (border, glow, lift). These
   per-type rules add a small motion that's *specific to what the widget shows*
   so each card feels alive in a way that matches its purpose. */
/* Status card — uptime number gently grows so the eye snaps to it */
.wg-card[data-wg-type="status"]:hover .wg-metric,
.wg-card[data-wg-type="kpi-stat"]:hover .wg-kpi-num{transition:transform .35s cubic-bezier(.3,1.4,.4,1),text-shadow .35s ease;transform:scale(1.06);text-shadow:0 4px 18px color-mix(in srgb,currentColor 30%,transparent)}
/* Component-health rows ripple in on hover — staggered fade */
.wg-card[data-wg-type="component-health"]:hover .wg-health-row{animation:wgHealthRipple .9s cubic-bezier(.3,1.2,.4,1) both}
.wg-card[data-wg-type="component-health"]:hover .wg-health-row:nth-child(1){animation-delay:0s}
.wg-card[data-wg-type="component-health"]:hover .wg-health-row:nth-child(2){animation-delay:.06s}
.wg-card[data-wg-type="component-health"]:hover .wg-health-row:nth-child(3){animation-delay:.12s}
.wg-card[data-wg-type="component-health"]:hover .wg-health-row:nth-child(4){animation-delay:.18s}
.wg-card[data-wg-type="component-health"]:hover .wg-health-row:nth-child(5){animation-delay:.24s}
@keyframes wgHealthRipple{0%{transform:translateX(0)}40%{transform:translateX(3px);background:color-mix(in srgb,var(--ac) 5%,transparent)}100%{transform:translateX(0);background:transparent}}
/* Active-incidents rows pulse subtly */
.wg-card[data-wg-type="incidents"]:hover .wg-empty,
.wg-card[data-wg-type="incidents"]:hover [data-dwid]{animation:wgIncPulse 1.1s ease-in-out infinite}
@keyframes wgIncPulse{0%,100%{opacity:.96}50%{opacity:.78}}
/* Cost overview shimmer */
.wg-card[data-wg-type="cost-overview"]{position:relative;overflow:hidden}
.wg-card[data-wg-type="cost-overview"]::before{content:"$";position:absolute;top:50%;right:-10px;transform:translateY(-50%) scale(.5) rotate(-12deg);font-size:120px;font-weight:900;font-family:'DM Mono',monospace;color:var(--ac);opacity:0;pointer-events:none;transition:opacity .4s ease,transform .55s cubic-bezier(.3,1.2,.4,1);letter-spacing:-.05em}
.wg-card[data-wg-type="cost-overview"]:hover::before{opacity:.07;transform:translateY(-50%) scale(1.05) rotate(0)}
/* Recent deployments — subtle vertical drift on the rows */
.wg-card[data-wg-type="deployments"]:hover [data-dwid]{animation:wgDeployDrift 1.1s ease-out}
@keyframes wgDeployDrift{0%{transform:translateY(2px);opacity:.85}100%{transform:translateY(0);opacity:1}}
/* Sparkline, line, area charts — re-cast the canvas with a subtle scale-in */
.wg-card[data-wg-type="uptime-sparkline"]:hover .wg-sparkline,
.wg-card[data-wg-type="line-chart"]:hover .wg-linechart,
.wg-card[data-wg-type="area-chart"]:hover .wg-linechart{animation:wgChartScale .55s cubic-bezier(.3,1.2,.4,1)}
@keyframes wgChartScale{0%{transform:scale(.985);filter:saturate(1)}50%{transform:scale(1.005);filter:saturate(1.18)}100%{transform:scale(1);filter:saturate(1)}}
/* Bar chart — bars subtly bounce */
.wg-card[data-wg-type="bar-chart"]:hover .wg-barchart{animation:wgChartBounce .65s cubic-bezier(.3,1.4,.4,1)}
@keyframes wgChartBounce{0%{transform:translateY(0)}40%{transform:translateY(-3px)}100%{transform:translateY(0)}}
/* Donut chart — segments rotate slowly */
.wg-card[data-wg-type="donut-chart"]:hover .wg-donut-svg{animation:wgDonutSpin 1.4s cubic-bezier(.4,0,.2,1)}
@keyframes wgDonutSpin{0%{transform:rotate(0)}100%{transform:rotate(8deg)}}
/* Heatmap — wave through cells */
.wg-card[data-wg-type="uptime-heatmap"]:hover .hm-cell{animation:hmWave 1.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes hmWave{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
/* Speed dial — needle whip */
.wg-card[data-wg-type="speed-dial"]:hover .wg-speed-fill{animation:wgSpeedWhip 1.1s cubic-bezier(.3,1.4,.4,1)}
@keyframes wgSpeedWhip{0%{stroke-dashoffset:0}30%{stroke-dashoffset:-10}100%{stroke-dashoffset:0}}
/* Progress ring — pulse the stroke width */
.wg-card[data-wg-type="progress-ring"]:hover .wg-pring-fill{animation:wgRingPulse 1.1s cubic-bezier(.3,1.2,.4,1)}
@keyframes wgRingPulse{0%,100%{stroke-width:6}50%{stroke-width:8}}
/* Thermometer — fluid bubble up */
.wg-card[data-wg-type="thermometer"]:hover .wg-therm-fill{animation:wgThermBubble 1.2s cubic-bezier(.3,1.2,.4,1)}
@keyframes wgThermBubble{0%{filter:brightness(1)}40%{filter:brightness(1.25) saturate(1.3)}100%{filter:brightness(1)}}
/* Battery — charging "lightning" sweep */
.wg-card[data-wg-type="battery-gauge"]:hover .wg-batt-fill{animation:wgBattGlow 1s cubic-bezier(.4,0,.2,1)}
@keyframes wgBattGlow{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:inset 0 0 24px 0 color-mix(in srgb,#fff 35%,transparent)}}
/* Meter bar — bar fill shimmer */
.wg-card[data-wg-type="meter-bar"]:hover .wg-mrow-fill{animation:wgBarShimmer 1.4s linear}
@keyframes wgBarShimmer{0%{filter:brightness(1)}50%{filter:brightness(1.25) saturate(1.3)}100%{filter:brightness(1)}}
/* Drag handle — shown only when the reorder affordance is enabled by parent */
.wg-drag{font-size:14px;color:var(--txm);cursor:grab;user-select:none;opacity:.55;transition:opacity .2s ease,color .2s ease;line-height:1;touch-action:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:22px;flex-shrink:0;border-radius:6px}
.wg-card:hover .wg-drag{opacity:.9}
.wg-drag:hover{color:var(--tx);opacity:1;background:var(--bge)}
.wg-drag:active{cursor:grabbing}
/* When dragging from the card body itself, the cursor should signal grab too,
   but we don't want grabbing on every hover — only when the user holds a
   non-interactive area and starts to move. */
.wg-card[draggable="true"]:not(.wg-dragging) .wg-body{cursor:grab}
.wg-card[draggable="true"]:not(.wg-dragging) .wg-body button,
.wg-card[draggable="true"]:not(.wg-dragging) .wg-body a,
.wg-card[draggable="true"]:not(.wg-dragging) .wg-body input,
.wg-card[draggable="true"]:not(.wg-dragging) .wg-body select{cursor:pointer}
/* FLIP smoothing for the widget grid — JS applies .wg-flip for one frame. */
.wg-card.wg-flip{transition:transform .35s cubic-bezier(.5,0,.2,1)}
/* While a card is being dragged it should feel a little "lifted" */
.wg-card.wg-dragging{opacity:.55;transform:rotate(-1.2deg) scale(1.01);box-shadow:0 22px 44px -14px rgba(0,0,0,.35);z-index:10}
.wg-card.wg-drop-target{outline:2px dashed var(--ac);outline-offset:-6px;background:color-mix(in srgb,var(--ac) 7%,var(--bgc))}
/* Remove/add transitions — smooth card life-cycle so there's no hard flash */
.wg-card.wg-removing{transition:opacity .32s ease,transform .32s cubic-bezier(.5,-0.2,.8,.6),margin .32s ease,max-height .32s ease;opacity:0;transform:scale(.94) translateY(-6px);pointer-events:none}
.wg-card.wg-added{animation:wgCardAdd .72s cubic-bezier(.25,1.2,.4,1) both}
@keyframes wgCardAdd{0%{opacity:0;transform:translateY(14px) scale(.96)}60%{opacity:1;transform:translateY(-2px) scale(1.005)}100%{opacity:1;transform:translateY(0) scale(1)}}
/* Toast messages — unobtrusive confirmation / error */
.lh-toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,12px);background:var(--bge);color:var(--tx);border:1px solid var(--bo);border-radius:999px;padding:8px 18px;font-size:12.5px;font-weight:500;box-shadow:0 10px 28px -12px rgba(0,0,0,.45);z-index:9999;opacity:0;transition:opacity .22s ease,transform .22s cubic-bezier(.3,1.3,.4,1);pointer-events:none;letter-spacing:.01em;font-family:'DM Sans',sans-serif}
.lh-toast.show{opacity:1;transform:translate(-50%,0)}
.lh-toast-success{border-color:color-mix(in srgb,var(--gr) 55%,var(--bo));color:var(--gr)}
.lh-toast-error{border-color:color-mix(in srgb,var(--re) 55%,var(--bo));color:var(--re)}
.wg-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px}
.wg-title{font-size:13px;font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wg-body{flex:1;display:flex;flex-direction:column;justify-content:center}
.wg-remove{font-size:10px;padding:2px 8px;color:var(--txm);background:transparent;border:1px solid var(--bos);border-radius:var(--rs);cursor:pointer;opacity:.5;transition:all .15s;flex-shrink:0}
.wg-remove:hover{opacity:1;color:var(--re);border-color:var(--re)}
.wg-metric{font-size:26px;font-weight:700;font-family:'DM Mono',monospace;color:var(--tx);line-height:1}
.wg-sub{font-size:11px;color:var(--txm);margin-top:4px}
.wg-sparkline{display:block;width:100%;height:100%;min-height:72px;flex:1}
.wg-card .wg-body:has(> .wg-sparkline){padding:0;margin:0}
.wg-heatmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(14px,1fr));gap:3px;width:100%;height:100%;min-height:72px;padding:2px;align-content:start;flex:1}
.wg-heatmap .hm-cell{width:100%;aspect-ratio:1/1;border-radius:3px;transition:transform .15s cubic-bezier(.5,1.6,.4,1),filter .25s,box-shadow .25s;animation:hmPulse 4.5s ease-in-out infinite;animation-fill-mode:both;opacity:.92;position:relative;cursor:pointer}
.wg-heatmap .hm-cell:hover{transform:scale(1.55);z-index:1;filter:brightness(1.25);box-shadow:0 0 8px currentColor}
.wg-heatmap .hm-cell.green{background:var(--gr);color:var(--gr)}
.wg-heatmap .hm-cell.yellow{background:var(--ye);color:var(--ye)}
.wg-heatmap .hm-cell.red{background:var(--re);color:var(--re);animation:hmPulseRed 2.2s ease-in-out infinite}
.wg-heatmap .hm-cell.unknown{background:var(--unk);color:var(--unk);opacity:.28;animation:none}
@keyframes hmPulse{0%,100%{opacity:.88}50%{opacity:1}}
@keyframes hmPulseRed{0%,100%{opacity:.82;box-shadow:0 0 0 0 rgba(218,54,51,0)}50%{opacity:1;box-shadow:0 0 10px rgba(218,54,51,.5)}}
.wg-gauge{position:relative;width:110px;height:110px;border-radius:50%;margin:0 auto;transition:box-shadow .5s ease;animation:wgGaugeBreathe 4s ease-in-out infinite}
@keyframes wgGaugeBreathe{0%,100%{filter:drop-shadow(0 0 4px rgba(47,129,247,.15))}50%{filter:drop-shadow(0 0 14px rgba(47,129,247,.3))}}
.wg-health-row{display:flex;gap:6px;align-items:center;padding:5px 0;border-bottom:1px solid var(--bos)}
.wg-health-row:last-child{border-bottom:none}
.wg-health-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.wg-health-dot.green{background:var(--gr)}.wg-health-dot.yellow{background:var(--ye)}.wg-health-dot.red{background:var(--re)}.wg-health-dot.unknown{background:var(--unk)}
.wg-health-name{font-size:12px;color:var(--tx);flex:1}
.wg-health-val{font-size:12px;color:var(--tx2);font-family:'DM Mono',monospace}
.wg-gauge{position:relative;width:80px;height:80px;border-radius:50%;margin:0 auto}
.wg-gauge-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;font-family:'DM Mono',monospace;color:var(--tx)}
.wg-empty{color:var(--txm);font-size:12px;text-align:center;padding:20px 0;font-style:italic;opacity:.7}
/* ── Extended widget visualizations (line/bar/area charts, dials, gauges, KPI) ── */
/* Canvas charts — the canvas is laid out to flex-fill the body; the actual DPR
   sizing is handled in JS. A fade-in keeps adds feeling responsive. */
.wg-linechart,.wg-barchart{display:block;width:100%;height:100%;min-height:90px;flex:1;animation:wgFadeIn .4s cubic-bezier(.4,0,.2,1) both}
.wg-lg .wg-linechart,.wg-lg .wg-barchart{min-height:140px}
.wg-md .wg-linechart,.wg-md .wg-barchart{min-height:110px}
/* Donut: centered SVG + legend stack that adapts to card size */
.wg-donut{display:flex;gap:14px;align-items:center;justify-content:center;width:100%;min-height:120px;animation:wgFadeIn .45s cubic-bezier(.4,0,.2,1) both}
.wg-donut-svg{flex-shrink:0;filter:drop-shadow(0 2px 8px rgba(0,0,0,.12))}
.wg-donut-seg{stroke-linecap:butt;transform-origin:50% 50%;animation:wgDonutDraw .9s cubic-bezier(.4,0,.2,1) both}
.wg-donut-g{animation-delay:.05s}.wg-donut-y{animation-delay:.25s}.wg-donut-r{animation-delay:.45s}
@keyframes wgDonutDraw{from{stroke-dasharray:0 100}}
.wg-donut-legend{display:flex;flex-direction:column;gap:6px;font-size:11.5px;color:var(--tx2)}
.wg-donut-lbl{display:flex;align-items:center;gap:7px;white-space:nowrap}
.wg-donut-lbl b{font-family:'DM Mono',monospace;color:var(--tx);margin-left:2px;font-weight:600}
.wg-donut-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.wg-donut-dot.green{background:var(--gr)}.wg-donut-dot.yellow{background:var(--ye)}.wg-donut-dot.red{background:var(--re)}
.wg-sm .wg-donut{flex-direction:column;gap:6px}
.wg-sm .wg-donut-legend{flex-direction:row;flex-wrap:wrap;justify-content:center;font-size:10.5px;gap:6px 12px}
/* Speed-dial (semicircular gauge) */
.wg-speed{display:flex;flex-direction:column;align-items:center;width:100%;max-width:260px;margin:0 auto;animation:wgFadeIn .45s both}
.wg-speed-svg{width:100%;height:auto;max-width:240px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.1))}
.wg-speed-fill{animation:wgSpeedSweep 1.1s cubic-bezier(.4,0,.2,1) both;transform-origin:100px 100px}
@keyframes wgSpeedSweep{from{stroke-dasharray:0 251.3}}
/* Progress ring */
.wg-pring{display:flex;flex-direction:column;align-items:center;animation:wgFadeIn .45s both}
.wg-pring svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.12))}
.wg-pring-fill{animation:wgRingDraw 1.1s cubic-bezier(.4,0,.2,1) both}
@keyframes wgRingDraw{from{stroke-dasharray:0 999}}
/* Thermometer */
.wg-therm{display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:2px;animation:wgFadeIn .45s both}
.wg-therm-tube{width:20px;height:120px;background:var(--bge);border:1px solid var(--bo);border-radius:12px 12px 4px 4px;overflow:hidden;position:relative;display:flex;align-items:flex-end;box-shadow:inset 0 2px 4px rgba(0,0,0,.08)}
.wg-therm-fill{width:100%;height:0;transition:height 1.3s cubic-bezier(.4,0,.2,1);animation:wgThermFill 1.3s cubic-bezier(.4,0,.2,1) both;border-radius:0 0 4px 4px}
@keyframes wgThermFill{from{height:0 !important}}
.wg-therm-bulb{width:32px;height:32px;border-radius:50%;margin-top:-6px;border:2px solid var(--bgc);position:relative;z-index:1}
.wg-therm-val{margin-top:6px;font-family:'DM Mono',monospace;font-weight:700;font-size:18px;color:var(--tx)}
/* Battery gauge */
.wg-batt{display:flex;align-items:center;gap:0;margin:4px auto 0;animation:wgFadeIn .45s both;flex-direction:row;justify-content:center}
.wg-batt-body{width:170px;height:70px;border:2.5px solid var(--bo);border-radius:10px;background:var(--bge);padding:6px;position:relative;display:flex;align-items:center;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.wg-batt-fill{height:100%;border-radius:6px;transition:width 1.3s cubic-bezier(.4,0,.2,1);animation:wgBattFill 1.3s cubic-bezier(.4,0,.2,1) both}
@keyframes wgBattFill{from{width:0 !important}}
.wg-batt-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-weight:700;font-size:22px;color:var(--tx);text-shadow:0 1px 2px rgba(0,0,0,.3)}
body.light .wg-batt-val{text-shadow:0 1px 0 rgba(255,255,255,.7)}
.wg-batt-cap{width:6px;height:22px;background:var(--bo);border-radius:0 3px 3px 0;margin-left:-2px;align-self:center}
/* Per-component meter rows */
.wg-mrow{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px dashed var(--bos);animation:wgFadeIn .45s both}
.wg-mrow:last-child{border-bottom:none}
.wg-mrow-lbl{flex:0 0 32%;font-size:11.5px;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wg-mrow-bar{flex:1;height:8px;background:var(--bge);border-radius:4px;overflow:hidden;position:relative}
.wg-mrow-fill{display:block;height:100%;width:0;border-radius:4px;animation:wgMrowFill 1.1s cubic-bezier(.4,0,.2,1) both}
@keyframes wgMrowFill{from{width:0 !important}}
.wg-mrow-val{flex:0 0 50px;text-align:right;font-family:'DM Mono',monospace;font-size:11.5px;color:var(--tx2)}
/* KPI big number */
.wg-kpi{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;gap:4px;animation:wgFadeIn .45s both}
.wg-kpi-label{font-size:10.5px;font-weight:600;color:var(--txm);text-transform:uppercase;letter-spacing:.07em}
.wg-kpi-num{font-family:'DM Mono',monospace;font-weight:700;font-size:42px;line-height:1.05;letter-spacing:-.03em;animation:wgKpiPop .6s cubic-bezier(.34,1.56,.64,1) both}
.wg-lg .wg-kpi-num{font-size:56px}.wg-sm .wg-kpi-num{font-size:32px}
@keyframes wgKpiPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.05);opacity:1}100%{transform:scale(1);opacity:1}}
.wg-kpi-delta{font-size:11.5px;font-weight:600;color:var(--ac);background:rgba(47,129,247,.12);padding:2px 9px;border-radius:999px;margin-top:4px}
/* Deployments list */
.wg-depl-list{display:flex;flex-direction:column;gap:6px}
.wg-depl-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--bos);border-radius:var(--rs);background:var(--bge);animation:wgFadeIn .35s both;transition:transform .18s,border-color .15s}
.wg-depl-row:hover{transform:translateY(-1px);border-color:var(--ac)}
.wg-depl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor}
.wg-depl-dot.green{background:var(--gr);color:var(--gr)}.wg-depl-dot.yellow{background:var(--ye);color:var(--ye)}.wg-depl-dot.red{background:var(--re);color:var(--re)}.wg-depl-dot.unknown{background:var(--unk);color:var(--unk)}
.wg-depl-name{flex:1;font-size:12px;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.wg-depl-state{font-size:10.5px;color:var(--tx2);font-family:'DM Mono',monospace;padding:1px 7px;background:var(--bgc);border-radius:999px;flex-shrink:0}
.wg-depl-time{font-size:10.5px;color:var(--txm);flex-shrink:0}
/* Shared entrance */
@keyframes wgFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* Widget creation modal */
.wg-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:500;display:flex;align-items:center;justify-content:center}
.wg-modal{background:var(--bgc);border:1px solid var(--bo);border-radius:var(--r);padding:24px;width:480px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px);overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.4)}
body.light .wg-modal{box-shadow:0 24px 64px rgba(0,0,0,.12)}
.wg-modal h3{font-size:16px;font-weight:700;color:var(--tx);margin-bottom:16px}
.wg-modal label{display:block;font-size:11px;font-weight:600;color:var(--txm);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;margin-top:12px}
.wg-modal select,.wg-modal input[type="text"]{width:100%;padding:8px 12px;border:1px solid var(--bo);border-radius:var(--rs);background:var(--bge);color:var(--tx);font-size:13px;font-family:'DM Sans',sans-serif}
.wg-type-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:6px}
.wg-type-opt{padding:12px;border:2px solid var(--bo);border-radius:var(--rs);cursor:pointer;transition:all .15s;text-align:center}
.wg-type-opt:hover{border-color:var(--ac);background:var(--bge)}
.wg-type-opt.selected{border-color:var(--ac);background:rgba(47,129,247,.08)}
.wg-type-opt .wg-type-icon{font-size:20px;margin-bottom:4px}
.wg-type-opt .wg-type-name{font-size:12px;font-weight:600;color:var(--tx)}
.wg-type-opt .wg-type-desc{font-size:10px;color:var(--txm);margin-top:2px}
/* Categorised widget picker (v2): categories → options → configure. */
.wg-modal-v2{width:560px;max-width:calc(100vw - 32px)}
.wg-step{animation:wgStepIn .32s cubic-bezier(.4,0,.2,1)}
@keyframes wgStepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.wg-step-head{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.wg-step-head h3{flex:1;text-align:center;font-size:16px;font-weight:700;color:var(--tx)}
.wg-step-sub{font-size:12px;color:var(--txm);text-align:center;margin:0 0 16px}
.wg-close-x{width:28px;height:28px;border-radius:50%;border:1px solid var(--bo);background:transparent;color:var(--tx2);font-size:18px;line-height:1;cursor:pointer;transition:background .15s,color .15s;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.wg-close-x:hover{background:var(--bge);color:var(--tx)}
.wg-back-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 10px 5px 8px;border:1px solid var(--bo);background:transparent;color:var(--tx2);font-size:11.5px;font-weight:600;border-radius:999px;cursor:pointer;transition:all .15s;font-family:'DM Sans',sans-serif;flex-shrink:0}
.wg-back-btn:hover{border-color:var(--ac);color:var(--ac);background:rgba(47,129,247,.08)}
.wg-back-btn svg{transition:transform .2s}
.wg-back-btn:hover svg{transform:translateX(-2px)}
/* Category grid */
.wg-cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:4px}
.wg-cat-card{padding:16px 14px 14px;border:1.5px solid var(--bo);border-radius:var(--r);cursor:pointer;transition:transform .25s cubic-bezier(.4,0,.2,1), border-color .2s, box-shadow .3s, background .2s;text-align:left;position:relative;overflow:hidden;background:var(--bgc)}
.wg-cat-card:hover{transform:translateY(-2px);border-color:var(--ac);box-shadow:0 8px 22px rgba(47,129,247,.18);background:var(--bge)}
.wg-cat-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:10px;box-shadow:0 4px 12px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.18)}
.wg-cat-icon svg{width:22px;height:22px}
.wg-cat-icon-status{background:linear-gradient(135deg,#3fb950,#238c3f)}
.wg-cat-icon-charts{background:linear-gradient(135deg,#2f81f7,#1f5fb8)}
.wg-cat-icon-meters{background:linear-gradient(135deg,#d29922,#9c6b12)}
.wg-cat-icon-integrations{background:linear-gradient(135deg,#a855f7,#7e22ce)}
.wg-cat-name{font-size:13.5px;font-weight:700;color:var(--tx);margin-bottom:3px}
.wg-cat-desc{font-size:11.5px;color:var(--txm);line-height:1.35}
.wg-cat-count{font-size:10px;color:var(--ac);font-weight:600;margin-top:8px;text-transform:uppercase;letter-spacing:.05em}
/* Options grid */
.wg-opts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:4px;animation:wgStepIn .3s cubic-bezier(.4,0,.2,1)}
.wg-opt{padding:12px 12px 10px;border:1.5px solid var(--bo);border-radius:var(--rs);cursor:pointer;transition:transform .22s cubic-bezier(.4,0,.2,1), border-color .15s, box-shadow .3s, background .15s;text-align:left;background:var(--bgc);position:relative}
.wg-opt:hover{transform:translateY(-2px);border-color:var(--ac);box-shadow:0 6px 16px rgba(47,129,247,.14);background:var(--bge)}
.wg-opt.selected{border-color:var(--ac);background:rgba(47,129,247,.1);box-shadow:0 0 0 2px rgba(47,129,247,.15)}
.wg-opt-icon{width:34px;height:34px;border-radius:9px;background:var(--bge);color:var(--ac);display:flex;align-items:center;justify-content:center;margin-bottom:8px;transition:background .2s, color .2s}
.wg-opt-icon svg{width:18px;height:18px}
.wg-opt:hover .wg-opt-icon{background:rgba(47,129,247,.14);color:var(--ac)}
.wg-opt-name{font-size:12.5px;font-weight:700;color:var(--tx);margin-bottom:2px}
.wg-opt-desc{font-size:10.5px;color:var(--txm);line-height:1.35}
/* Integration-specific option style with brand-colored logo tile */
/* Widget picker integration tiles — match the dashboard look: no background
   block around the icon, icon painted in the brand's real color via mask. */
.wg-opt-integ .wg-opt-logo-tile{width:36px;height:36px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;background:transparent;box-shadow:none}
.wg-opt-integ .wg-opt-mask{width:28px;height:28px;display:inline-block;background-color:var(--brand,#6e7681);-webkit-mask-image:var(--icon-url);mask-image:var(--icon-url);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;filter:drop-shadow(0 1px 2px color-mix(in srgb,var(--brand,#6e7681) 40%,transparent))}
.wg-opt-integ .wg-opt-letter{font-size:15px;font-weight:700;color:var(--brand,#6e7681);letter-spacing:-.02em}
@media (max-width:560px){
  .wg-cat-grid,.wg-opts-grid{grid-template-columns:1fr}
  .wg-modal-v2{width:100%}
}
.wg-size-row{display:flex;gap:8px;margin-top:6px}
.wg-size-opt{flex:1;padding:8px;border:2px solid var(--bo);border-radius:var(--rs);cursor:pointer;text-align:center;font-size:11px;font-weight:600;color:var(--tx2);transition:all .15s}
.wg-size-opt:hover{border-color:var(--ac)}.wg-size-opt.selected{border-color:var(--ac);background:rgba(47,129,247,.08);color:var(--ac)}

/* ── PRINT ── */
@media print{
  .header,.toolbar,nav,.theme-toggle-btn,.no-print,.hcb-wrap{display:none!important}
  body{background:#fff!important;color:#000!important}
  .page{padding:0!important}
  .card,.section,.report-table{border:1px solid #ddd!important;box-shadow:none!important;break-inside:avoid}
  .bar.green,.bar-cell.green,.bar:not(.yellow):not(.red):not(.unknown){background:#22c55e!important;opacity:1!important}
  .bar.yellow,.bar-cell.yellow{background:#f59e0b!important;opacity:1!important}
  .bar.red,.bar-cell.red{background:#ef4444!important;opacity:1!important}
  .badge.green{background:#dcfce7!important;color:#166534!important}
  .badge.yellow{background:#fef3c7!important;color:#92400e!important}
  .badge.red{background:#fee2e2!important;color:#991b1b!important}
}

/* ── RESPONSIVE ── */
/* Header overflow fix — use clip instead of hidden to allow fixed children to escape */
.header{overflow:visible;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.header::-webkit-scrollbar{display:none}

/* Mobile < 640px */
@media(max-width:640px){
  .header{padding:0 8px;gap:4px}
  .htitle{display:none}.ri{display:none}
  .gsp{display:none}.hdiv{display:none}
  .refresh-now{display:none}
  nav.nav a{padding:4px 6px;font-size:11px}
  nav.nav a.nav-login-btn{padding:5px 14px;font-size:12px}
  nav.nav{flex-wrap:nowrap;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav.nav::-webkit-scrollbar{display:none}
  .logo{height:20px;display:inline-flex;align-items:center;min-width:32px;min-height:32px;padding:4px}
  /* Tap targets — meet a 32×32 minimum on mobile so buttons/nav links are easy to hit */
  .theme-toggle-btn{padding:6px;min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center}.theme-toggle-btn svg{width:18px;height:18px}
  nav.nav a{min-height:32px;display:inline-flex;align-items:center}
  .mfa-banner button,.mfa-banner a,.banner-close,button[aria-label*="ismiss"i],button[aria-label*="lose"i]{min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center}
  .page{padding:calc(var(--nh) + 16px) 14px 28px}
  .grid{grid-template-columns:1fr;gap:14px}
  .row{flex-direction:column;align-items:flex-start}
  .toolbar{flex-direction:column;gap:8px;align-items:stretch;overflow:hidden}
  .toolbar label.lbl{min-width:0;width:100%}
  .toolbar select,.toolbar input{width:100%;min-width:0;max-width:100%}
  .toolbar .button-link{align-self:stretch!important;text-align:center}
  .trp-panel{
    /* Pin to the viewport instead of anchoring to the button so the panel
       never clips on narrow screens. Keeps the open/close transform animation. */
    position:fixed;
    inset:calc(var(--nh) + 12px) 12px auto 12px;
    top:calc(var(--nh) + 12px);
    left:12px;right:12px;
    width:auto;min-width:0;max-width:none;
    transform-origin:top center;
  }
  .hcb-window{width:calc(100vw - 32px)}
  .report-table th,.report-table td{padding:8px 10px;font-size:12px}
  #cost-charts-grid{grid-template-columns:1fr!important}
  #cost-svc-grid{grid-template-columns:1fr!important}
  #cost-summary-grid{grid-template-columns:1fr!important}
  .contact-grid{grid-template-columns:1fr!important}
  .ph{flex-direction:column!important;align-items:flex-start!important;gap:8px!important}
  .metric-grid{grid-template-columns:repeat(2,1fr)}
  .component-section .row{gap:6px}
  .widget-grid{grid-template-columns:1fr!important}
  .wg-sm,.wg-md,.wg-lg{grid-column:span 1!important}
  .wg-modal{padding:16px;width:100%}
  .wg-type-grid{grid-template-columns:1fr}
  .section{padding:16px 14px}
  .topo-svg{min-height:300px}
  #dtopo-container{overflow:auto;-webkit-overflow-scrolling:touch}
  .dash-tab-nav{width:100%!important}
  .dash-tab-nav button{flex:1!important}
  .topo-controls{flex-direction:column!important;align-items:stretch!important}
}
/* Tablet 640–1024px */
@media(min-width:640px) and (max-width:1024px){
  .grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .page{padding:calc(var(--nh) + 24px) 24px 36px}
  .contact-grid{grid-template-columns:1fr!important}
  .metric-grid{grid-template-columns:repeat(3,1fr)}
  .widget-grid{grid-template-columns:repeat(2,1fr)!important}
  .wg-lg{grid-column:span 2!important}
  .wg-modal{width:420px}
  .topo-controls{flex-wrap:wrap}
  /* Tablet header — iPad Air (768x1024 and 820x1180) was clipping nav items
     because the full "Local Hero Product Monitor" title + refresh button +
     dividers stayed visible at the desktop layout. Trim non-essential
     elements and let the nav wrap/scroll so every link stays reachable. */
  .header{padding:0 14px;gap:8px}
  .htitle,.hdiv,.refresh-now,.ri{display:none}
  nav.nav{flex:1;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}
  nav.nav::-webkit-scrollbar{display:none}
  nav.nav a{padding:5px 8px;font-size:12.5px;flex-shrink:0}
  .theme-toggle-btn{flex-shrink:0}
  .logo{flex-shrink:0}
  .gsp{font-size:10.5px;padding:2px 7px;flex-shrink:0}
}
/* Wide > 1440px */
@media(min-width:1440px){
  .page{padding:calc(var(--nh) + 32px) 48px 56px}
  .header{padding:0 48px}
  .grid{grid-template-columns:repeat(4,1fr);gap:22px}
  .metric-grid{grid-template-columns:repeat(5,1fr)}
}
/* Ultra-wide > 1920px */
@media(min-width:1920px){
  .page{padding:calc(var(--nh) + 36px) 64px 64px;max-width:1680px}
  .header{padding:0 64px}
}
/* Skeleton loading */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skel{background:linear-gradient(90deg,var(--bge) 25%,var(--bgh) 37%,var(--bge) 63%);background-size:800px 100%;animation:shimmer 1.6s ease-in-out infinite;border-radius:var(--rs);min-height:16px}
.skel-card{background:var(--bgc);border:1px solid var(--bo);border-radius:var(--r);padding:16px 18px;min-height:120px}
.skel-card .skel{margin-bottom:10px}
.skel-text{height:12px;border-radius:4px;margin-bottom:8px}
.skel-heading{height:20px;width:40%;border-radius:4px;margin-bottom:12px}
.skel-bar{height:8px;border-radius:4px;margin-bottom:6px}
.skel-circle{width:32px;height:32px;border-radius:50%}
.loading-text{font-size:13px;color:var(--txm);text-align:center;padding:24px 0;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.loading-overlay{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 20px}
/* ── /OPERATOR PAGE ──────────────────────────────────────────────────────────
   Layout primitives for the admin operator surface. Aim is "control panel
   feels solid, not cramped". Cards stretch full width on phones, two-up on
   tablets, full grid on desktop. Action buttons keep tap targets ≥40px. */
.op-grid{display:grid;grid-template-columns:1fr;gap:16px}
.op-card{background:var(--bgc);border:1px solid var(--bo);border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.op-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.op-card-title{font-weight:600;font-size:15px;color:var(--tx);display:flex;align-items:center;gap:8px;min-width:0}
.op-card-title .op-pill{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--bge);color:var(--tx2);white-space:nowrap}
.op-pill{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--bge);color:var(--tx2);white-space:nowrap;line-height:1.4}
.op-pill.green{background:color-mix(in srgb,var(--gr,#3aa86b) 18%,transparent);color:var(--gr,#3aa86b)}
.op-pill.amber{background:color-mix(in srgb,#d59c3c 22%,transparent);color:#d59c3c}
.op-pill.red{background:color-mix(in srgb,var(--re,#b14848) 22%,transparent);color:var(--re,#b14848)}
.op-pill.grey{background:var(--bge);color:var(--txm)}
.op-mono{font-family:'DM Mono',ui-monospace,monospace;font-size:11.5px}
.op-status-meta{color:var(--txm);font-size:11px;margin-left:8px}
.op-card-sub{font-size:12px;color:var(--txm);line-height:1.5;margin:0}
.op-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;align-items:start;min-width:0}
.op-kv dt{color:var(--txm);font-weight:500;white-space:nowrap}
.op-kv dd{color:var(--tx);margin:0;font-family:'DM Mono',ui-monospace,monospace;font-size:12px;word-break:break-all;min-width:0}
.op-kv dd.op-mono-wrap{word-break:break-word}
.op-actions{display:flex;flex-wrap:wrap;gap:8px}
.op-actions button{min-height:38px}
.op-btn-danger{background:var(--re,#b14848);color:#fff;border-color:transparent}
.op-btn-danger:hover{background:#a13d3d;color:#fff}
.op-status{font-size:12px;color:var(--txm);min-height:18px;line-height:1.5}
.op-status.op-status-ok{color:var(--gr,#3aa86b)}
.op-status.op-status-err{color:var(--re,#b14848)}
.op-status.op-status-busy{color:var(--ac)}
.op-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--bo);border-radius:var(--rs);min-width:0}
.op-table{width:100%;border-collapse:collapse;font-size:12.5px}
.op-table th,.op-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--bo);vertical-align:top;word-break:break-word}
.op-table th{font-weight:600;color:var(--tx2);background:var(--bge);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.op-table tr:last-child td{border-bottom:0}
.op-table td.op-mono{font-family:'DM Mono',ui-monospace,monospace;font-size:11.5px}
.op-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--bo);margin-right:6px;vertical-align:middle}
.op-dot.green{background:var(--gr,#3aa86b)}
.op-dot.amber{background:#d59c3c}
.op-dot.red{background:var(--re,#b14848)}
.op-dot.grey{background:var(--bo)}
.op-log{background:var(--bg);border:1px solid var(--bo);border-radius:var(--rs);padding:10px 12px;max-height:420px;overflow:auto;font-family:'DM Mono',ui-monospace,monospace;font-size:11.5px;line-height:1.55;color:var(--tx)}
.op-log-row{padding:2px 0;border-bottom:1px dotted color-mix(in srgb,var(--bo) 70%,transparent)}
.op-log-row:last-child{border-bottom:0}
.op-log-ts{color:var(--txm);margin-right:8px;white-space:nowrap}
.op-log-msg{white-space:pre-wrap;word-break:break-word}
.op-log-empty{color:var(--txm);font-style:italic;padding:20px;text-align:center}
.op-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--txm)}
.op-toolbar select,.op-toolbar input{font:inherit;padding:6px 8px;border-radius:var(--rs);border:1px solid var(--bo);background:var(--bgc);color:var(--tx);min-width:0}
.op-toolbar input{flex:1 1 180px;min-width:120px}
.op-config-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}
.op-config-grid > section{min-width:0}
.op-config-grid h4{font-size:12.5px;font-weight:600;color:var(--tx2);text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px}
.op-redacted{color:var(--txm);font-style:italic}
.op-arn{color:var(--txm);font-size:11px}
.op-flag-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--bo)}
.op-flag-row:last-child{border-bottom:0}
.op-flag-meta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.op-flag-label{font-size:13.5px;font-weight:600;color:var(--tx);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.op-flag-desc{font-size:12px;color:var(--txm);line-height:1.45}
.op-flag-id{font-size:11px;color:var(--txm)}
.op-toggle{display:inline-flex;align-items:center;cursor:pointer;flex:0 0 auto}
.op-toggle input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.op-toggle-track{display:inline-block;width:38px;height:22px;background:var(--bge);border:1px solid var(--bo);border-radius:999px;position:relative;transition:background .15s ease,border-color .15s ease}
.op-toggle-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--tx2);border-radius:50%;transition:transform .15s ease,background .15s ease}
.op-toggle input:checked + .op-toggle-track{background:color-mix(in srgb,#d59c3c 35%,transparent);border-color:#d59c3c}
.op-toggle input:checked + .op-toggle-track .op-toggle-thumb{transform:translateX(16px);background:#d59c3c}
.op-toggle input:disabled + .op-toggle-track{opacity:.6;cursor:not-allowed}
.op-toggle input:focus-visible + .op-toggle-track{outline:2px solid var(--ac);outline-offset:2px}
@media(min-width:900px){
  .op-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .op-grid .op-card.op-full{grid-column:1 / -1}
}
@media(max-width:680px){
  .op-card{padding:14px 14px;gap:10px}
  .op-kv{grid-template-columns:1fr;gap:2px}
  .op-kv dt{font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding-top:8px}
  .op-kv dt:first-child{padding-top:0}
  .op-config-grid{grid-template-columns:1fr}
  .op-actions{gap:6px}
  .op-actions button{flex:1 1 calc(50% - 6px);min-width:0}
  .op-table th,.op-table td{padding:8px 10px;font-size:11.5px}
  .op-log{max-height:320px;font-size:11px}
}
/* Global page navigation: gentle boot fade + leave cross-fade. No blur —
   blur was creating a noticeably "smudged" moment during longer loads. We
   use a light translate + opacity + a thin top-of-page progress bar
   instead, which reads as "deliberate transition" rather than "broken". */
@keyframes lhBootFade{from{opacity:.001;transform:translateY(4px)}to{opacity:1;transform:none}}
body{animation:lhBootFade .34s cubic-bezier(.3,1,.5,1) both}
body.lh-leaving{
  transition:opacity .32s cubic-bezier(.4,0,.2,1), transform .32s cubic-bezier(.4,0,.2,1);
  opacity:0;
  transform:translateY(-2px);
  pointer-events:none;
}
/* Top-of-page progress bar — shows while a navigation is in flight and
   self-animates. Appended by the page-transition listener. */
.lh-nav-progress{
  position:fixed;top:0;left:0;height:2px;width:0%;
  background:linear-gradient(90deg, var(--ac), color-mix(in srgb, var(--ac) 45%, #fff));
  box-shadow:0 0 8px color-mix(in srgb, var(--ac) 45%, transparent);
  z-index:10000;pointer-events:none;border-radius:0 2px 2px 0;
  transition:width .4s cubic-bezier(.3,1,.5,1), opacity .3s ease;
  opacity:0;
}
.lh-nav-progress.lh-nav-active{opacity:1}
/* Small calming pulse of the body bg during hang to signal "still loading",
   replaces the old filter:blur(1px) that users found jarring. */
@keyframes lhBreath{0%,100%{background-color:var(--bg)}50%{background-color:color-mix(in srgb, var(--ac) 2%, var(--bg))}}
body.lh-leaving{animation:lhBreath 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  body{animation:none}
  body.lh-leaving{transition:opacity .14s ease;animation:none;transform:none}
  .lh-nav-progress{transition:opacity .12s ease}
}

/* ── IN-APP MODAL (LH.alert / LH.confirm / LH.prompt) ──────────────────────
   Replaces all browser confirm()/alert()/prompt() with a styled, focus-
   trapped, keyboard-friendly dialog that fits the app aesthetic at every
   screen size. Mounted into <body>, fixed-positioned. */
.lh-mdl-backdrop{
  position:fixed;inset:0;z-index:10010;
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;pointer-events:none;
  transition:opacity .18s cubic-bezier(.4,0,.2,1);
}
body.light .lh-mdl-backdrop{background:rgba(15,23,42,.45)}
.lh-mdl-backdrop.lh-mdl-open{opacity:1;pointer-events:auto}
.lh-mdl{
  background:var(--bgc);border:1px solid var(--bo);border-radius:var(--r);
  box-shadow:0 24px 60px rgba(0,0,0,.45),0 6px 18px rgba(0,0,0,.25);
  width:100%;max-width:440px;max-height:calc(100vh - 32px);
  display:flex;flex-direction:column;overflow:hidden;
  font-family:'DM Sans',-apple-system,sans-serif;color:var(--tx);
  transform:translateY(8px) scale(.98);opacity:0;
  transition:transform .22s cubic-bezier(.3,1.1,.5,1), opacity .18s ease;
}
.lh-mdl-backdrop.lh-mdl-open .lh-mdl{transform:none;opacity:1}
.lh-mdl-head{
  padding:16px 18px 8px;display:flex;align-items:flex-start;gap:12px;
}
.lh-mdl-icon{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(47,129,247,.13);color:var(--ac);
}
.lh-mdl[data-tone="danger"] .lh-mdl-icon{background:var(--reb);color:var(--re)}
.lh-mdl[data-tone="warning"] .lh-mdl-icon{background:var(--yeb);color:var(--ye)}
.lh-mdl[data-tone="success"] .lh-mdl-icon{background:var(--grb);color:var(--gr)}
.lh-mdl-icon svg{width:18px;height:18px;display:block}
.lh-mdl-titlewrap{flex:1;min-width:0}
.lh-mdl-title{font-size:15px;font-weight:700;color:var(--tx);letter-spacing:-.01em;line-height:1.35}
.lh-mdl-body{
  padding:6px 18px 16px;font-size:13.5px;line-height:1.55;color:var(--tx2);
  overflow-y:auto;white-space:pre-wrap;word-wrap:break-word;
}
.lh-mdl-body strong{color:var(--tx);font-weight:600}
.lh-mdl-input{
  margin-top:12px;width:100%;padding:9px 11px;border:1px solid var(--bo);
  border-radius:var(--rs);background:var(--bge);color:var(--tx);
  font-size:13.5px;font-family:inherit;transition:border-color .15s,box-shadow .15s;
}
.lh-mdl-input:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px rgba(47,129,247,.18)}
.lh-mdl-foot{
  padding:12px 18px 16px;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;
  border-top:1px solid var(--bos);background:var(--bgh);
}
.lh-mdl-btn{
  padding:8px 16px;border-radius:var(--rs);font-size:13px;font-weight:600;
  font-family:inherit;cursor:pointer;border:1px solid var(--bo);
  background:var(--bgc);color:var(--tx);
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .12s;
}
.lh-mdl-btn:hover{background:var(--bge)}
.lh-mdl-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(47,129,247,.32)}
.lh-mdl-btn.lh-mdl-primary{
  background:var(--ac);color:#fff;border-color:transparent;
  box-shadow:0 2px 10px rgba(47,129,247,.28);
}
.lh-mdl-btn.lh-mdl-primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.lh-mdl-btn.lh-mdl-danger{
  background:var(--re);color:#fff;border-color:transparent;
  box-shadow:0 2px 10px rgba(248,81,73,.32);
}
.lh-mdl-btn.lh-mdl-danger:hover{filter:brightness(1.06);transform:translateY(-1px)}
@media (max-width:480px){
  .lh-mdl{max-width:100%;border-radius:var(--rs)}
  .lh-mdl-foot{flex-direction:column-reverse;align-items:stretch}
  .lh-mdl-btn{width:100%;text-align:center;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .lh-mdl-backdrop,.lh-mdl{transition:none}
  .lh-mdl{transform:none}
}