:root {
        --bg: hsl(184 44% 5%);
        --card: hsl(181 36% 12%);
        --border: hsl(180 20% 22%);
        --fg: hsl(164 48% 94%);
        --muted: hsl(182 16% 58%);
        --accent: hsl(168 63% 47%);
        --up: hsl(145 62% 44%);
        --down: hsl(0 76% 54%);
        --unknown: hsl(182 10% 42%);
        --radius: 10px;
      }
      * { box-sizing: border-box; margin: 0; padding: 0; }
      html { -webkit-text-size-adjust: 100%; }
      body {
        background: var(--bg);
        color: var(--fg);
        font-family: "Manrope", sans-serif;
        line-height: 1.5;
        min-height: 100vh;
        -webkit-font-smoothing: antialiased;
      }
      a { color: inherit; text-decoration: none; }
      .wrap { max-width: 940px; margin: 0 auto; padding: 0 20px; }
      .mono { font-family: "IBM Plex Mono", monospace; }

      /* ---------- header ---------- */
      header { border-bottom: 1px solid var(--border); }
      .top {
        display: flex; align-items: center; justify-content: space-between;
        height: 64px;
      }
      .brand {
        font-family: "Montserrat", sans-serif;
        font-weight: 800; font-size: 19px; letter-spacing: -0.03em;
        display: flex; align-items: center; gap: 9px;
      }
      .brand img { height: 32px; width: 32px; object-fit: contain; display: block; }
      nav { display: flex; align-items: center; gap: 18px; }
      nav .link {
        font-size: 14px; font-weight: 600; color: var(--muted);
        transition: color 0.15s;
      }
      nav .link:hover { color: var(--fg); }
      nav .btn {
        font-size: 13.5px; font-weight: 700;
        border: none; border-radius: 8px;
        padding: 9px 16px;
        background: var(--accent); color: hsl(184 44% 5%);
        display: inline-flex; align-items: center; gap: 7px;
        transition: filter 0.15s;
      }
      nav .btn:hover { filter: brightness(1.1); }
      nav .btn svg { width: 14px; height: 14px; }

      /* ---------- hero ---------- */
      .hero { text-align: center; padding: 56px 0 40px; }
      .hero-icon { width: 52px; height: 52px; margin: 0 auto 18px; }
      .hero-icon svg { width: 100%; height: 100%; display: block; }
      .hero h1 {
        font-family: "Montserrat", sans-serif;
        font-weight: 800; font-size: clamp(24px, 4.5vw, 34px);
        letter-spacing: 0.2px;
      }
      .hero p { color: var(--muted); font-size: 14.5px; margin-top: 8px; }

      /* ---------- controls ---------- */
      .controls {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
      }
      .seg {
        display: inline-flex; background: var(--card);
        border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
      }
      .seg span, .seg button {
        font-family: "Manrope", sans-serif;
        font-size: 13.5px; font-weight: 700;
        padding: 8px 16px; border: none; background: transparent;
        color: var(--muted); cursor: default;
      }
      .seg .active { color: var(--accent); background: hsl(168 63% 47% / 0.1); }
      .seg button { cursor: pointer; transition: color 0.15s, background 0.15s; }
      .seg button:hover { color: var(--fg); }
      .seg button.active {
        color: hsl(184 44% 5%); background: var(--accent);
      }
      .meta {
        font-size: 12.5px; color: var(--muted); margin-bottom: 22px;
        font-family: "IBM Plex Mono", monospace;
      }
      .meta b { color: var(--accent); font-weight: 600; }

      /* ---------- service cards ---------- */
      .card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 18px 20px 20px;
        margin-bottom: 14px;
      }
      .card-top {
        display: flex; align-items: flex-start; justify-content: space-between;
        gap: 14px; margin-bottom: 14px;
      }
      .card-left { display: flex; align-items: center; gap: 13px; min-width: 0; }
      .svc-icon { width: 26px; height: 26px; flex: none; }
      .svc-icon svg { width: 100%; height: 100%; display: block; }
      .status-label {
        font-size: 12px; font-weight: 700; letter-spacing: 0.2px;
        margin-bottom: 1px;
      }
      .svc-name { font-size: 16.5px; font-weight: 800; }
      .svc-note { font-size: 12px; color: var(--muted); margin-top: 2px; }
      .card-right { text-align: right; flex: none; }
      .uptime-label {
        font-size: 11.5px; color: var(--muted); font-weight: 600;
        font-family: "IBM Plex Mono", monospace;
      }
      .uptime-value {
        font-family: "IBM Plex Mono", monospace;
        font-size: 17px; font-weight: 600; margin-top: 1px;
      }

      /* ---------- uptime bars ---------- */
      .strip {
        display: flex; gap: 2px; height: 36px;
        background: hsl(184 44% 7%); border-radius: 5px; overflow: hidden;
        padding: 3px;
      }
      .strip .bar {
        flex: 1; min-width: 1px; border-radius: 2px;
        transition: filter 0.12s;
      }
      .strip .bar:hover { filter: brightness(1.35); }
      .bar-up { background: var(--up); }
      .bar-down { background: var(--down); }
      .bar-unknown { background: var(--unknown); }
      .bar-empty { opacity: 0.35; }

      .up { color: var(--up); }
      .down { color: var(--down); }
      .unknown { color: var(--unknown); }

      .empty-note {
        color: var(--muted); font-size: 13.5px; text-align: center;
        padding: 26px 0;
      }

      /* ---------- error ---------- */
      .err {
        border: 1px solid var(--down); border-radius: var(--radius);
        background: hsl(0 76% 54% / 0.08);
        padding: 14px 18px; font-size: 14px; margin-bottom: 18px;
        display: none;
      }

      /* ---------- footer ---------- */
      footer {
        border-top: 1px solid var(--border);
        margin-top: 44px; padding: 32px 0 48px;
      }
      .footer-inner {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: 10px 26px; font-size: 14px; color: var(--muted);
      }
      .footer-inner a { transition: color 0.15s; }
      .footer-inner a:hover { color: var(--fg); }

      @media (max-width: 560px) {
        .hero { padding: 40px 0 30px; }
        .controls { justify-content: center; }
        .uptime-value { font-size: 15px; }
        .strip { height: 30px; }
        nav .link { display: none; }
      }