
   supaya halaman tidak berkedip terang lalu berubah gelap. */
(function () {
  var d = document.documentElement, t = 'light';
  try {
    var q = new URLSearchParams(location.search).get('theme');
    t = q || localStorage.getItem('oss-theme') || 'light';
  } catch (e) {}
  if (t !== 'dark') t = 'light';
  d.setAttribute('data-theme', t);
  window.ossSyncMeta = function () {
    var m = document.querySelector('meta[name="theme-color"]');
    if (m) m.setAttribute('content', d.getAttribute('data-theme') === 'dark' ? '#080d16' : '#f6f8fb');
  };
  window.ossToggleTheme = function () {
    var n = d.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
    d.setAttribute('data-theme', n);
    try { localStorage.setItem('oss-theme', n); } catch (e) {}
    ossSyncMeta();
  };
  ossSyncMeta();
})();
</script>
<title><?= h($title) ?></title>
<style>
/* ---------- token ---------- */
:root{
  /* tema terang = bawaan. Hanya nilai token; tata letak tidak berubah. */
  --bg:#f6f8fb; --surface:#ffffff; --surface-2:#eef2f7; --surface-3:#f1f5f9;
  --line:#dbe3ee; --line-2:#c3cfe0; --line-3:#9fb0c7;
  --text:#0f172a; --text-2:#475569; --text-3:#5a6a80;
  --accent:#0f766e; --accent-dim:#115e59; --accent-ink:#ffffff; --accent-hi:#0d9488;
  --warn:#b45309; --ok:#15803d; --danger:#b91c1c;
  --ink-accent:#0f766e; --ink-accent-soft:#0f766e; --ink-warn:#92400e; --ink-ok:#166534; --ink-danger:#b91c1c;
  /* nilai bersama - tak berubah antar tema */
  --r-card:12px; --r-ctl:9px; --r-pill:999px;
  --sp:4px;
  --maxw:1440px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
html{color-scheme:light}

/* ---------- tema gelap ----------
   Penimpa. Akses tema: tombol di app bar, parameter ?theme=, atau localStorage. */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#080d16; --surface:#0e1626; --surface-2:#131e33; --surface-3:#070b12;
  --line:#1e2c45; --line-2:#28374f; --line-3:#34465f;
  --text:#e8eef7; --text-2:#93a3b8; --text-3:#7d8ea4;
  --accent:#14b8a6; --accent-dim:#0d8f80; --accent-ink:#032b26; --accent-hi:#1cc9b6;
  --warn:#e8b04b; --ok:#5cc98d; --danger:#ef7a7d;
  --ink-accent:#68dccd; --ink-accent-soft:#5fd8c8; --ink-warn:#f0c675; --ink-ok:#7fd9a6; --ink-danger:#f8a3a5;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.015em;line-height:1.25}
p{margin:0 0 10px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.muted{color:var(--text-2)}
.muted-3{color:var(--text-3)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px 56px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-ctl)}

/* ---------- app bar: satu baris, 64px ---------- */
.appbar{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.appbar-in{
  max-width:var(--maxw);margin:0 auto;padding:0 20px;height:64px;
  display:flex;align-items:center;gap:22px;
}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.mark{
  width:32px;height:32px;display:grid;place-items:center;flex:0 0 auto;
  border-radius:var(--r-ctl);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
}
.brand-t{display:flex;flex-direction:column;line-height:1.15}
.brand-t b{font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.brand-t i{font-style:normal;font-size:11.5px;color:var(--text-3);letter-spacing:.04em;text-transform:uppercase}
.nav{display:flex;flex-wrap:wrap;gap:2px;flex:0 1 auto;min-width:0}
.nav a{
  color:var(--text-2);font-size:13.5px;font-weight:550;white-space:nowrap;
  padding:7px 12px;border-radius:var(--r-ctl);
  transition:color .15s ease,background-color .15s ease;
}
.nav a:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
.nav a.on{color:var(--text);background:var(--surface-2);box-shadow:inset 0 -2px 0 var(--accent)}
.sync{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;flex:0 0 auto}
.live{font-size:13px;font-weight:650;font-variant-numeric:tabular-nums}
.sync-t{font-size:11.5px;color:var(--text-3)}

/* ---------- judul bagian ---------- */
.sechead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:26px 0 12px}
.sechead h2{font-size:16px}
.sechead .count{font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums}
.lede{color:var(--text-2);font-size:13.5px;margin:18px 0 0;max-width:70ch}

/* ---------- KPI ---------- */
.grid{display:grid;gap:12px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(196px,1fr));margin-top:22px}
.kpi{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);padding:15px 16px 14px;overflow:hidden;
}
.kpi::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:var(--line-2)}
.kpi.good::before{background:var(--ok)}
.kpi.warn::before{background:var(--warn)}
.kpi.bad::before{background:var(--danger)}
.kpi .n{
  font-size:30px;font-weight:660;letter-spacing:-.03em;line-height:1.05;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.kpi .l{font-size:13px;font-weight:550;margin-top:5px}
.kpi .s{font-size:11.5px;color:var(--text-3);margin-top:2px}
.kpi.warn .n{color:var(--warn)}
.kpi.bad .n{color:var(--danger)}

/* ---------- panel ---------- */
.panels{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin-top:12px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:15px 16px 16px}
.panel h3{font-size:13.5px;font-weight:600;letter-spacing:-.005em}
.panel .hint{font-size:11.5px;color:var(--text-3);margin:2px 0 12px}

/* ---------- bar ---------- */
.barrow{display:grid;grid-template-columns:minmax(96px,1.35fr) 2.2fr auto;align-items:center;gap:10px;margin:5px 0}
.barlabel{font-size:12.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bartrack{height:7px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden}
.barfill{
  height:100%;border-radius:var(--r-pill);background:var(--accent-dim);
  transform-origin:left center;
  animation:grow .5s cubic-bezier(.16,1,.3,1) both;
}
.barfill.be{background:var(--warn)}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.barval{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;min-width:44px;text-align:right}

/* ---------- donut ---------- */
.donutwrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.donutnum{fill:var(--text);font-size:26px;font-weight:660;font-variant-numeric:tabular-nums}
.donutlbl{fill:var(--text-3);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.legend{list-style:none;margin:0;padding:0;flex:1;min-width:170px}
.legend li{display:grid;grid-template-columns:9px 1fr auto auto;align-items:center;gap:9px;padding:5px 0;font-size:12.5px}
.legend li+li{border-top:1px solid var(--line)}
.legend i{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.legend .lg-l{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legend .lg-n{font-weight:600;font-variant-numeric:tabular-nums}
.legend .lg-p{color:var(--text-3);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}

/* ---------- badge & pill ---------- */
.badge{
  display:inline-block;padding:2px 8px;border-radius:var(--r-pill);
  font-size:11px;font-weight:600;letter-spacing:.02em;border:1px solid transparent;
}
.badge.be{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--ink-warn);border-color:color-mix(in srgb,var(--warn) 34%,transparent)}
.badge.an{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--ink-accent-soft);border-color:color-mix(in srgb,var(--accent) 34%,transparent)}
.badge.dr{background:var(--surface-2);color:var(--text-2);border-color:var(--line-2)}
.badge.cl{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ink-ok);border-color:color-mix(in srgb,var(--ok) 32%,transparent)}
.pill{
  display:inline-block;padding:2px 9px;border-radius:var(--r-pill);font-size:11.5px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  color:var(--ink-accent);white-space:nowrap;
}
.pill.dim{background:var(--surface-2);border-color:var(--line-2);color:var(--text-2)}
.pill.tier{background:color-mix(in srgb,var(--warn) 16%,transparent);border-color:color-mix(in srgb,var(--warn) 36%,transparent);color:var(--ink-warn)}
.pill.tier.plat{background:var(--surface-2);border-color:var(--line-3);color:var(--text-2)}
.pill.nb-low{background:color-mix(in srgb,var(--ok) 14%,transparent);border-color:color-mix(in srgb,var(--ok) 34%,transparent);color:var(--ink-ok)}
.pill.nb-minor{background:color-mix(in srgb,var(--warn) 16%,transparent);border-color:color-mix(in srgb,var(--warn) 36%,transparent);color:var(--ink-warn)}
.pill.nb-major{background:color-mix(in srgb,var(--danger) 14%,transparent);border-color:color-mix(in srgb,var(--danger) 34%,transparent);color:var(--ink-danger)}

/* ---------- filter ---------- */
.filters{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);padding:12px;margin:0 0 12px;
}
.filters .fld{display:flex;flex-direction:column;gap:4px}
.filters .fld label{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
.filters input,.filters select{
  background:var(--surface-2);color:var(--text);border:1px solid var(--line-2);
  border-radius:var(--r-ctl);padding:8px 10px;font-size:13px;font-family:inherit;
  transition:border-color .15s ease;
}
.filters input::placeholder{color:var(--text-3)}
.filters input:hover,.filters select:hover{border-color:var(--line-3)}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--accent)}
.filters input[type=text]{min-width:236px}
.filters .grow{flex:1}
.btn{
  display:inline-block;padding:9px 16px;border-radius:var(--r-ctl);cursor:pointer;
  font:600 13px/1 inherit;letter-spacing:.01em;
  background:var(--accent);color:var(--accent-ink);border:1px solid transparent;
  transition:background-color .15s ease,transform .08s ease;
}
.btn:hover{background:var(--accent-hi);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--text-2);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--surface-2);color:var(--text)}
.spacer{flex:1}

/* chip filter aktif */
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px}
.chips .lbl{font-size:11.5px;color:var(--text-3);margin-right:2px}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:3px 10px;
  border-radius:var(--r-pill);font-size:12px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);color:var(--ink-accent);
}
.chip b{font-weight:600}
.chip a{color:inherit;opacity:.75;font-size:13px;line-height:1}
.chip a:hover{opacity:1;text-decoration:none}

/* ---------- tabel ---------- */
.tablecard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:auto;max-height:74vh}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
thead th{
  position:sticky;top:0;z-index:2;
  background:var(--surface-2);
  text-align:left;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);padding:10px 12px;white-space:nowrap;
  border-bottom:1px solid var(--line-2);
}
tbody td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:color-mix(in srgb,var(--accent) 5%,transparent)}
td.inc{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
td.inc a{font-weight:600}
td.num,td.umur{font-variant-numeric:tabular-nums;white-space:nowrap}
td.umur.old{color:var(--warn);font-weight:600}
.wrapcell{max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- keadaan kosong / memuat ---------- */
.empty{
  text-align:center;color:var(--text-2);padding:36px 20px;
  border:1px dashed var(--line-2);border-radius:var(--r-card);background:var(--surface);
}
.empty b{display:block;color:var(--text);font-size:14px;margin-bottom:4px;font-weight:600}
.empty .hint{font-size:12.5px;color:var(--text-3)}
.skeleton{display:block;height:14px;border-radius:6px;background:var(--surface-2);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ---------- pager ---------- */
.pager{display:flex;gap:6px;align-items:center;justify-content:center;margin:18px 0 0;flex-wrap:wrap}
.pager a,.pager span{
  min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 11px;border-radius:var(--r-ctl);font-size:13px;
  border:1px solid var(--line);color:var(--text-2);background:var(--surface);
  font-variant-numeric:tabular-nums;
}
.pager a:hover{border-color:var(--accent);color:var(--text);text-decoration:none}
.pager .on{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:600}
.pager .off{opacity:.4}
.pager .pg-gap{border:none;background:none;color:var(--text-3)}

/* ---------- kaki ---------- */
.foot{
  margin-top:30px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12px;color:var(--text-3);
}

/* ---------- detail tiket ---------- */
.dl{display:grid;grid-template-columns:minmax(150px,196px) 1fr;gap:0}
.dl dt{padding:9px 12px 9px 0;font-size:12.5px;color:var(--text-3);border-top:1px solid var(--line)}
.dl dd{margin:0;padding:9px 0;font-size:13px;border-top:1px solid var(--line);overflow-wrap:anywhere}
.dl dt:first-of-type,.dl dd:first-of-type{border-top:none}
.raw{
  background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-ctl);
  padding:12px;font-family:var(--mono);font-size:12px;color:var(--text-2);
  max-height:340px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;
}

/* ---------- matriks STO ---------- */
.matrix{width:100%;font-size:13px;border-collapse:separate;border-spacing:0}
.matrix th,.matrix td{padding:9px 11px;border-bottom:1px solid var(--line);text-align:right}
.matrix th:first-child,.matrix td:first-child{text-align:left}
.matrix thead th{
  position:sticky;top:0;background:var(--surface-2);z-index:2;
  font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--text-3);text-transform:none;
}
.cell{
  font:600 13.5px/1 inherit;font-variant-numeric:tabular-nums;
  background:none;border:none;color:var(--text);cursor:pointer;
  padding:5px 9px;border-radius:var(--r-ctl);
  transition:background-color .12s ease;
}
.cell:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.cell.on{background:var(--accent);color:var(--accent-ink)}
.cell.zero{color:var(--text-3);font-weight:400;cursor:default}
.cell.tot{color:var(--accent)}
.matrix tr.manual .cell:not(.zero){color:var(--warn)}
.matrix tfoot td{font-weight:650;background:var(--surface-2);border-top:1px solid var(--line-2)}
.detailbox{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:15px 16px}
.detailbox h3{font-size:14px}

/* ---------- halaman masuk (disimpan untuk bisa diaktifkan lagi) ---------- */
body.loginpage{display:grid;place-items:center;min-height:100dvh;padding:24px}
body.loginpage::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(820px 420px at 18% -8%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%),
    radial-gradient(720px 380px at 92% 108%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 72%),
    linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 44px,
    linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/44px 100%;
  opacity:.5;
}
.card{width:100%;max-width:392px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:26px}
.card .mark{width:40px;height:40px;border-radius:var(--r-card);margin-bottom:14px}
.card h1{font-size:19px}
.card .sub{color:var(--text-2);font-size:13px;margin:4px 0 20px}
.cfg{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-3);margin:16px 0}
.statstrip{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 20px;
  border:1px solid var(--line);border-radius:var(--r-ctl);padding:12px;background:var(--surface-2);
}
.statstrip .k{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.statstrip .v{font-size:17px;font-weight:650;font-variant-numeric:tabular-nums}
.field{margin-bottom:14px}
.field label{display:block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.field input{
  width:100%;background:var(--surface-2);color:var(--text);
  border:1px solid var(--line-2);border-radius:var(--r-ctl);padding:11px 12px;font-size:14px;font-family:inherit;
}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.field .pwwrap{position:relative}
.field .pwwrap input{padding-right:64px}
.field .pwtog{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--text-2);font:600 11.5px/1 inherit;
  padding:7px 9px;border-radius:var(--r-ctl);cursor:pointer;letter-spacing:.03em;
}
.field .pwtog:hover{background:var(--surface);color:var(--text)}
.card .btn{width:100%;padding:12px;text-align:center}
.err{background:color-mix(in srgb,var(--danger) 13%,transparent);color:var(--ink-danger);border:1px solid color-mix(in srgb,var(--danger) 34%,transparent);padding:9px 12px;border-radius:var(--r-ctl);font-size:13px;margin-bottom:14px}

/* ---------- gerak: dihormati ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ---------- tombol tema ---------- */
.themebtn{
  display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;padding:0;
  background:var(--surface-2);color:var(--text-2);cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--r-ctl);
}
.themebtn:hover{color:var(--text);border-color:var(--line-3)}
.themebtn .ti-moon{display:none}
html[data-theme="dark"] .themebtn .ti-sun{display:none}
html[data-theme="dark"] .themebtn .ti-moon{display:block}

/* ---------- responsif ---------- */
@media (max-width:900px){
  .appbar-in{height:auto;padding:10px 16px;flex-wrap:wrap;gap:10px 14px}
  .sync{margin-left:0;align-items:flex-start;order:3}
  .themebtn{order:2;margin-left:auto}
  .wrap{padding:0 14px 40px}
  .tablecard{max-height:none}
  .wrapcell{max-width:260px}
}
@media (max-width:640px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi .n{font-size:24px}
  .panels{grid-template-columns:1fr}
  .filters{flex-direction:column;align-items:stretch}
  .filters .fld,.filters input[type=text]{width:100%}
  .btn{text-align:center}
  .dl{grid-template-columns:1fr}
  .dl dt{border-top:1px solid var(--line);padding-bottom:0}
  .nav{order:4;width:100%;flex-wrap:wrap;row-gap:2px}
  .nav a{font-size:12.5px;padding:6px 10px}
}


/* ==== Portal Monitoring HSA Sumaja — tambahan ==== */
.hs-greet{font-size:13px;color:var(--text-2);letter-spacing:.01em}
.hs-sec{margin:22px 0 10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hs-sec h2{margin:0;font-size:15px;font-weight:650;letter-spacing:-.01em}
.hs-sec .sub{font-size:12px;color:var(--text-3)}
.hs-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.hs-k{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px;position:relative;overflow:hidden}
.hs-k .lab{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:600}
.hs-k .val{font-size:30px;font-weight:700;letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums}
.hs-k .pct{font-size:13px;color:var(--text-2);margin-top:2px;font-variant-numeric:tabular-nums}
.hs-k .bar{height:5px;border-radius:3px;background:var(--surface-2);margin-top:10px;overflow:hidden}
.hs-k .bar i{display:block;height:100%;border-radius:3px}
.hs-k.ok .val{color:var(--ink-ok)}   .hs-k.ok .bar i{background:var(--ok)}
.hs-k.mid .val{color:var(--ink-warn)} .hs-k.mid .bar i{background:var(--warn)}
.hs-k.bad .val{color:var(--ink-danger)} .hs-k.bad .bar i{background:var(--danger)}
.hs-tbl{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;font-size:13px}
.hs-tbl th{text-align:left;padding:9px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);background:var(--surface-2);border-bottom:1px solid var(--line);font-weight:650}
.hs-tbl td{padding:10px 12px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.hs-tbl tr:last-child td{border-bottom:0}
.hs-tbl tr:hover td{background:var(--surface-3)}
.hs-tbl td.n{text-align:right}
.hs-tbl tfoot td{font-weight:700;background:var(--surface-2);border-top:1px solid var(--line-2)}
.hs-pill{display:inline-block;padding:2px 8px;border-radius:var(--r-pill);font-size:11px;font-weight:650;font-variant-numeric:tabular-nums}
.hs-pill.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ink-ok)}
.hs-pill.mid{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--ink-warn)}
.hs-pill.bad{background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--ink-danger)}
.hs-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hs-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px}
.hs-card h3{margin:0 0 10px;font-size:13px;font-weight:650;color:var(--text-2)}
.hs-kd{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line);font-size:13px}
.hs-kd:last-child{border-bottom:0}
.hs-kd .v{font-weight:650;font-variant-numeric:tabular-nums}
.hs-note{font-size:12px;color:var(--text-3);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-ctl);padding:10px 12px;margin-top:10px}
@media(max-width:820px){.hs-grid2{grid-template-columns:1fr}}

.hs-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.hs-scroll>.hs-tbl{min-width:560px}
@media(max-width:820px){
  .hs-k .val{font-size:26px}
  .appbar-in{flex-wrap:wrap}
  .hs-sec h2{font-size:14px}
}
