/* ─── Hero: same pattern as uc-hero ─── */
  .st-hero { padding: clamp(3rem,6vw,5rem) 0 2.5rem; text-align:center;
    background: linear-gradient(180deg, rgba(0,128,128,.14) 0%, transparent 100%); }
  .st-hero__label { display:inline-block; font-size:.75rem; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin-bottom:.75rem; }
  .st-hero__title { font-size:clamp(1.75rem,4vw,2.75rem); font-weight:700;
    letter-spacing:-.02em; margin-bottom:.5rem; }
  .st-hero__sub { font-size:1rem; color:var(--muted); margin:0 auto 2rem; max-width:520px; }
  .st-hero__badge { display:inline-flex; align-items:center; gap:8px; padding:6px 16px;
    border-radius:999px; font-size:.875rem; font-weight:600; margin-bottom:1.25rem; }
  .st-hero__badge--ok   { background:rgba(0,128,128,.12);  color:#006666; }
  .st-hero__badge--warn { background:rgba(234,179,8,.12);  color:#b45309; }
  .st-hero__badge--down { background:rgba(185,60,60,.12);  color:#9b3333; }
  .st-hero__badge--loading { background:rgba(0,0,0,.06);   color:var(--muted); }
  .st-hero__badge-dot { width:8px; height:8px; border-radius:50%; background:currentColor;
    animation: st-pulse 2s ease-in-out infinite; }
  @keyframes st-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

  /* ─── Endpoint list ─── */
  .st-list { display:flex; flex-direction:column; gap:12px; margin-bottom:3rem; }

  .st-row { background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); overflow:hidden;
    transition: box-shadow .15s, border-color .15s; }
  .st-row:hover { box-shadow:0 4px 24px rgba(0,0,0,.07); border-color:rgba(0,128,128,.25); }

  .st-row__head { display:flex; align-items:center; justify-content:space-between;
    padding:18px 22px 16px; gap:12px; }
  .st-row__left { display:flex; align-items:center; gap:10px; }
  .st-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
  .st-dot--UP      { background:#008080; box-shadow:0 0 0 3px rgba(0,128,128,.22); }
  .st-dot--DOWN    { background:#c05858; box-shadow:0 0 0 3px rgba(192,88,88,.22);
    animation:st-pulse 1.2s ease-in-out infinite; }
  .st-dot--UNKNOWN { background:#d1d5db; }
  .st-row__name { font-weight:600; font-size:15px; color:var(--text); }

  .st-row__right { display:flex; align-items:center; gap:20px; flex-shrink:0; }
  .st-row__stat { text-align:right; }
  .st-row__stat-val { display:block; font-size:15px; font-weight:700; color:var(--text); }
  .st-row__stat-lbl { font-size:11px; color:var(--muted); }
  .st-pill { padding:3px 11px; border-radius:999px; font-size:12px; font-weight:600; }
  .st-pill--UP      { background:rgba(0,128,128,.1);   color:#006666; }
  .st-pill--DOWN    { background:rgba(185,60,60,.1);   color:#9b3333; }
  .st-pill--UNKNOWN { background:rgba(0,0,0,.06);       color:var(--muted); }

  /* Chart strip */
  .st-row__chart { position:relative; height:96px;
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
    background:var(--surface-2); }
  .st-row__chart canvas { display:block; }

  /* History bar */
  .st-row__foot { padding:8px 22px 12px; display:flex; align-items:center; gap:10px; }
  .hbar { display:flex; gap:2px; height:28px; flex:1; }
  .hbar__seg { flex:1; border-radius:3px; min-width:2px; position:relative; cursor:default; }
  .hbar__seg--none { background:rgba(0,0,0,.06); }
  /* rich tooltip */
  .hbar__seg::after { content:attr(data-tip);
    position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%);
    background:#1e293b; color:#f8fafc; font-size:11.5px; white-space:nowrap;
    padding:5px 9px; border-radius:6px; pointer-events:none;
    opacity:0; transition:opacity .12s; z-index:999; line-height:1.5; }
  .hbar__seg:hover::after { opacity:1; }
  .hbar__label { font-size:11px; color:var(--muted); white-space:nowrap; flex-shrink:0; }

  /* ─── Support card ─── */
  .st-support { background:var(--surface-2); border:1px solid var(--border);
    border-radius:var(--radius); padding:24px 28px; display:flex; align-items:center;
    justify-content:space-between; gap:20px; margin-bottom:3rem; }
  .st-support h3 { font-size:1rem; font-weight:600; margin:0 0 3px; color:var(--text); }
  .st-support p  { font-size:.875rem; color:var(--muted); margin:0; }

  .st-updated { text-align:center; font-size:.75rem; color:var(--muted);
    margin:-1.5rem 0 2rem; }

  @media(max-width:640px){
    .st-row__right { gap:10px; }
    .st-row__stat  { display:none; }
    .st-support    { flex-direction:column; text-align:center; }
  }