.status-hero {
    background:
      radial-gradient(ellipse 60% 50% at 100% 0%, rgba(78,124,58,0.18), transparent 60%),
      var(--sand);
    padding: 56px 0 32px;
  }
  .status-hero h1 { margin: 18px 0 18px; max-width: 18ch; }
  .status-hero .lede { max-width: 60ch; }
  .status-hero .notice { margin-top: 26px; max-width: 64ch; }

  .last-check {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--f-mono); font-size: 12px; color: var(--ink-mute);
    margin-top: 22px;
  }
  .last-check::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--hijau);
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

  .health-strip {
    background: var(--ink); color: var(--paper);
    border-radius: var(--r-lg);
    margin: 28px 0 0;
    padding: 24px 28px;
  }
  .health-strip .inner {
    display: grid; gap: 18px; grid-template-columns: 1fr;
  }
  @media (min-width: 720px) { .health-strip .inner { grid-template-columns: 1fr 1fr 1fr 2fr; align-items: center; } }
  .h-stat { display: flex; align-items: baseline; gap: 12px; }
  .h-stat .n {
    font-family: var(--f-mono); font-weight: 700; font-size: 38px;
    line-height: 1;
  }
  .h-stat .l {
    font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(255,255,255,0.72);
  }
  .h-beroperasi { color: #B8DDA4; }
  .h-terjejas   { color: #F5C97A; }
  .h-tergendala { color: #F5A698; }
  .h-overall { font-size: 14px; color: rgba(255,255,255,0.78); line-height: 1.55; }

  .status-tools {
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
    padding: 24px 0 12px;
    border-bottom: 1px solid rgba(42,35,32,0.10);
    margin-top: 36px;
  }
  .status-tools .left { display: flex; gap: 8px; flex-wrap: wrap; }
  .status-tools .right {
    margin-left: auto;
    display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-mute);
  }
  .filter-chip {
    padding: 7px 12px; border-radius: var(--r-pill);
    background: transparent; font-size: 12.5px; font-weight: 500;
    color: var(--ink-soft); cursor: pointer;
    border: 1.5px solid transparent;
    transition: background .15s, color .15s;
  }
  .filter-chip:hover { background: rgba(42,35,32,0.05); color: var(--ink); }
  .filter-chip[aria-pressed="true"] { background: var(--ink); color: var(--sand); }

  .s-table {
    background: var(--paper);
    border-radius: var(--r-lg);
    border: 1px solid rgba(42,35,32,0.10);
    overflow: hidden;
    margin: 28px 0 96px;
  }
  .s-row {
    display: grid; gap: 12px; align-items: center;
    padding: 18px 22px;
    border-top: 1px solid rgba(42,35,32,0.08);
    grid-template-columns: 1fr;
  }
  .s-row:first-child { border-top: 0; }
  .s-row:hover { background: rgba(42,35,32,0.03); }

  @media (min-width: 720px) {
    .s-row { grid-template-columns: 1.7fr 1fr 1fr 100px 100px; gap: 18px; }
  }
  .s-name {
    font-family: var(--f-display); font-size: 22px; line-height: 1;
    margin: 0;
  }
  .s-name a { color: inherit; }
  .s-name a:hover { color: var(--vermilion); }
  .s-meta {
    font-size: 12.5px; color: var(--ink-mute); margin-top: 4px;
    display: flex; gap: 8px; align-items: center;
  }
  .s-meta .flag { font-size: 14px; }
  .s-cat {
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em;
    color: var(--ink-mute);
  }
  .s-status-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: var(--r-pill);
    font-size: 12.5px; font-weight: 600;
  }
  .s-status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
  .sp-beroperasi { background: rgba(78,124,58,0.18); color: #2F4D22; }
  .sp-beroperasi::before { background: var(--hijau); }
  .sp-terjejas { background: rgba(232,132,61,0.20); color: #7A3F14; }
  .sp-terjejas::before { background: var(--kuning); }
  .sp-tergendala { background: rgba(200,65,43,0.14); color: #7A2418; }
  .sp-tergendala::before { background: var(--merah); }

  .s-mini-bars {
    display: flex; gap: 2px; height: 22px;
  }
  .s-mini-bars span {
    flex: 1; border-radius: 2px;
  }
  .s-mini-bars .ok { background: var(--hijau); }
  .s-mini-bars .warn { background: var(--kuning); }
  .s-mini-bars .fail { background: var(--merah); }

  .s-checked {
    font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-mute);
    text-align: right;
  }
  @media (max-width: 719px) { .s-checked { text-align: left; } }

  .status-head-row {
    display: none;
    padding: 12px 22px;
    background: var(--sand);
    border-bottom: 1px solid rgba(42,35,32,0.10);
    font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-mute);
    grid-template-columns: 1.7fr 1fr 1fr 100px 100px; gap: 18px;
  }
  @media (min-width: 720px) { .status-head-row { display: grid; } }