.st-root { --st-surface:#151b23; --st-surface-2:#0e1319; --st-line:#27313e; --st-text:#edf1f7; --st-dim:#9aa6b7; --st-mute:#697587; --st-good:#0ca30c; --st-warn:#fab219; --st-bad:#d03b3b; --st-none:#323c4a; --st-k-down:#3987e5; --st-k-wl:#d95926; --st-k-server:#9085e9; --st-k-gateway:#c98500; display:flex; flex-direction:column; gap:12px; max-width:760px; margin:0 auto; color:var(--st-text); font-size:14px; }
.st-root * { box-sizing:border-box; }
.st-ico { width:18px; height:18px; flex:none; }
.st-hero { padding:16px; border:1px solid var(--st-line); border-radius:16px; background:var(--st-surface); }
.st-hero-top { display:flex; align-items:flex-start; gap:12px; }
.st-badge { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; border-radius:14px; }
.st-badge .st-ico { width:22px; height:22px; }
.st-tone-good .st-badge { background:rgba(12,163,12,.14); color:#4ade80; }
.st-tone-warn .st-badge { background:rgba(250,178,25,.14); color:var(--st-warn); }
.st-tone-bad .st-badge { background:rgba(208,59,59,.16); color:#f87171; }
.st-tone-bad { border-color:rgba(208,59,59,.4); }
.st-tone-warn { border-color:rgba(250,178,25,.35); }
.st-hero-copy { min-width:0; flex:1; }
.st-hero h2 { margin:0; color:#fff; font-size:1.12rem; font-weight:800; line-height:1.3; }
.st-hero p { margin:4px 0 0; color:var(--st-dim); font-size:.8rem; line-height:1.45; }
.st-refresh { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; flex:none; border:1px solid var(--st-line); border-radius:10px; background:transparent; color:var(--st-dim); cursor:pointer; }
.st-refresh.spin .st-ico { animation:st-spin .8s linear infinite; }
@keyframes st-spin { to { transform:rotate(360deg); } }
.st-episode { display:flex; align-items:center; gap:8px; margin-top:12px; padding:8px 10px; border-radius:10px; background:rgba(250,178,25,.08); color:#f4c85a; font-size:.74rem; }
.st-pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.st-pair-item { display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; background:var(--st-surface-2); color:var(--st-dim); }
.st-pair-item b { display:block; color:var(--st-text); font-size:.74rem; font-weight:700; }
.st-pair-item span { font-size:.72rem; }
.st-good { color:#4ade80; }
.st-warn { color:var(--st-warn); }
.st-bad { color:#f87171; }
.st-none { color:var(--st-mute); }
.st-meta { margin-top:10px; color:var(--st-mute); font-size:.66rem; }
.st-card { padding:14px; border:1px solid var(--st-line); border-radius:16px; background:var(--st-surface); }
.st-card-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:10px; }
.st-card-head h3 { margin:0; color:#fff; font-size:.92rem; font-weight:800; }
.st-card-sub { color:var(--st-dim); font-size:.72rem; white-space:nowrap; }
.st-strip { display:grid; gap:2px; height:30px; }
.st-strip-24 { grid-template-columns:repeat(144, 1fr); gap:1px; }
.st-strip-30 { grid-template-columns:repeat(30, 1fr); height:34px; }
.st-cell { display:block; min-width:0; border-radius:2px; cursor:pointer; }
.st-strip-30 .st-cell { border-radius:4px; }
.st-c-good { background:var(--st-good); }
.st-c-warn { background:var(--st-warn); }
.st-c-bad { background:var(--st-bad); }
.st-c-none { background:var(--st-none); }
.st-cell.st-hot, .st-col.st-hot { outline:2px solid #fff; outline-offset:1px; }
.st-axis { display:flex; justify-content:space-between; margin-top:5px; color:var(--st-mute); font-size:.62rem; }
.st-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:9px; color:var(--st-dim); font-size:.66rem; }
.st-legend span { display:inline-flex; align-items:center; gap:6px; }
.st-sw { display:inline-block; width:10px; height:10px; flex:none; border-radius:3px; }
.st-sw-good { background:var(--st-good); }
.st-sw-warn { background:var(--st-warn); }
.st-sw-bad { background:var(--st-bad); }
.st-sw-none { background:var(--st-none); }
.st-k-down, .st-sw-k-down { background:var(--st-k-down); }
.st-k-wl, .st-sw-k-wl { background:var(--st-k-wl); }
.st-k-server, .st-sw-k-server { background:var(--st-k-server); }
.st-k-gateway, .st-sw-k-gateway { background:var(--st-k-gateway); }
.st-k-all { background:var(--st-k-down); }
.st-tip { min-height:18px; margin-top:8px; color:var(--st-mute); font-size:.7rem; }
.st-tip.on { color:var(--st-text); }
.st-chart { position:relative; padding-top:16px; }
.st-ymax { position:absolute; top:0; left:0; color:var(--st-mute); font-size:.6rem; }
.st-bars { display:grid; grid-template-columns:repeat(var(--n), 1fr); align-items:end; gap:1px; height:110px; border-top:1px dashed var(--st-line); border-bottom:1px solid var(--st-line); }
.st-col { position:relative; display:block; height:100%; min-width:0; cursor:pointer; }
.st-seg { position:absolute; left:0; right:0; bottom:0; border-radius:2px 2px 0 0; }
.st-ticks { position:relative; height:16px; margin-top:4px; color:var(--st-mute); font-size:.6rem; }
.st-ticks span { position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; }
.st-ticks span:first-child { transform:none; }
.st-note { margin:8px 0 0; color:var(--st-mute); font-size:.68rem; line-height:1.45; }
.st-empty { margin:0; padding:16px 8px; color:var(--st-mute); font-size:.76rem; text-align:center; }
.st-list { display:flex; flex-direction:column; }
.st-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--st-line); font-size:.76rem; }
.st-row:first-child { border-top:0; }
.st-dot { width:8px; height:8px; flex:none; border-radius:50%; }
.st-row-main { min-width:0; flex:1; color:var(--st-text); }
.st-row-main small, .st-row-side small { display:block; color:var(--st-mute); font-size:.64rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.st-row-side { flex:none; color:var(--st-dim); font-size:.7rem; text-align:right; }
.st-tabs { display:grid; grid-template-columns:repeat(3, 1fr); gap:3px; margin-bottom:12px; padding:3px; border:1px solid var(--st-line); border-radius:12px; background:var(--st-surface-2); }
.st-tab { min-height:34px; border:0; border-radius:9px; background:transparent; color:var(--st-mute); font-size:.74rem; font-weight:700; cursor:pointer; }
.st-tab.on { background:#242d39; color:#fff; }
.st-kinds { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-top:12px; }
.st-kind { display:flex; flex-direction:column; gap:2px; padding:9px; border-radius:11px; background:var(--st-surface-2); font-size:.66rem; color:var(--st-dim); }
.st-kind .st-sw { margin-bottom:3px; }
.st-kind b { color:#fff; font-size:1.05rem; }
.st-kind small { color:var(--st-mute); }
.st-sub { margin-top:14px; }
.st-sub h4 { margin:0 0 6px; color:var(--st-dim); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.st-table { display:flex; flex-direction:column; }
.st-tr { display:grid; grid-template-columns:1fr auto auto; gap:12px; padding:6px 0; border-top:1px solid var(--st-line); font-size:.72rem; }
.st-tr:first-child { border-top:0; }
.st-name { min-width:0; overflow:hidden; color:var(--st-text); text-overflow:ellipsis; white-space:nowrap; }
.st-num { color:var(--st-dim); text-align:right; white-space:nowrap; }
.st-heat { display:flex; flex-direction:column; gap:3px; }
.st-hrow { display:grid; grid-template-columns:44px 1fr; align-items:center; gap:6px; }
.st-hday { color:var(--st-mute); font-size:.62rem; white-space:nowrap; }
.st-hcells { display:grid; grid-template-columns:repeat(24, 1fr); gap:2px; }
.st-hc { display:block; height:18px; min-width:0; border-radius:3px; cursor:pointer; }
.st-h0 { background:#1c2430; }
.st-hx { background:transparent; border:1px dashed #1c2430; cursor:default; }
.st-h1 { background:#173a66; }
.st-h2 { background:#1f5296; }
.st-h3 { background:#2a6fc4; }
.st-h4 { background:#3987e5; }
.st-h5 { background:#86b8f3; }
.st-haxis .st-hcells span { color:var(--st-mute); font-size:.6rem; }
.st-hlegend { align-items:center; gap:4px; }
.st-hlegend span { margin:0 4px; }
.st-hc.st-hot { outline:2px solid #fff; outline-offset:1px; }
@media (hover: hover) {
.st-refresh:hover { color:#fff; background:var(--st-surface-2); }
.st-tab:hover:not(.on) { color:var(--st-dim); }
}
@media (max-width: 560px) {
.st-pair { grid-template-columns:1fr; }
.st-kinds { grid-template-columns:repeat(2, 1fr); }
.st-strip-24 { gap:0; }
}
@media (prefers-reduced-motion: reduce) {
.st-refresh.spin .st-ico { animation:none; }
}