/* Full polished CSS: status */
:root {
      --primitive-blue-950: #001A24; --primitive-blue-900: #002A3A; --primitive-blue-800: #003D54;
      --primitive-green-700: #006B44; --primitive-green-600: #009D64; --primitive-green-500: #00C07A;
      --primitive-green-100: #D6F5E9; --primitive-green-50: #EDFAF4;
      --primitive-yellow-500: #FFC107; --primitive-yellow-400: #FFCD38;
      --primitive-neutral-950: #0B1220; --primitive-neutral-800: #1E293B; --primitive-neutral-700: #475569;
      --primitive-neutral-400: #94A3B8; --primitive-neutral-200: #DCE3EA;
      --primitive-neutral-100: #F1F5F9; --primitive-neutral-50: #FDFBF4; --primitive-white: #FFFFFF;
      --color-bg: var(--primitive-neutral-50); --color-surface: var(--primitive-white);
      --color-surface-raised: var(--primitive-neutral-100);
      --color-ink-strong: var(--primitive-neutral-950); --color-ink-base: var(--primitive-neutral-800);
      --color-ink-muted: var(--primitive-neutral-700); --color-ink-disabled: var(--primitive-neutral-400);
      --color-brand-primary: var(--primitive-blue-900); --color-brand-action: var(--primitive-green-600);
      --color-brand-action-hover: var(--primitive-green-700);
      --color-border: var(--primitive-neutral-200); --color-border-strong: var(--primitive-neutral-400);
      --color-success-bg: var(--primitive-green-50); --color-hover-overlay: rgba(0,42,58,.05);
      --font-display: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace;
      --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:40px;--space-8:48px;--space-9:64px;--space-10:80px;
      --radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;
      --shadow-sm:0 1px 3px rgba(2,6,23,.06);--shadow-md:0 4px 12px rgba(2,6,23,.08);
      --shadow-brand:0 4px 16px rgba(0,157,100,.25);--shadow-focus:0 0 0 3px #86B7FE;
      --dur-fast:120ms;--dur-base:200ms;--ease:cubic-bezier(.2,.8,.2,1);
      --container-xl:1280px;--nav-height:64px;
    }

    @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{font-family:var(--font-body);font-size:16px;line-height:1.625;color:var(--color-ink-strong);background:var(--color-bg);-webkit-font-smoothing:antialiased;scroll-behavior:smooth;overflow-x:hidden}
    body{min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden} main{flex:1}
    h1,h2,h3{font-family:var(--font-display);font-weight:700;color:var(--color-ink-strong)}
    a{color:var(--color-brand-action);text-decoration:none;transition:color var(--dur-fast) var(--ease)}
    a:hover{color:var(--color-brand-action-hover)}
    a:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-xs)}
    ul{list-style:none} img{max-width:100%;display:block}
    .container{width:100%;max-width:var(--container-xl);margin:0 auto;padding:0 var(--space-4)}
    @media(min-width:640px){.container{padding:0 var(--space-6)}}
    @media(min-width:1024px){.container{padding:0 var(--space-8)}}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-body);font-size:16px;font-weight:500;line-height:24px;border:none;cursor:pointer;text-decoration:none;transition:all var(--dur-fast) var(--ease);white-space:nowrap}
    .btn:active{transform:scale(0.98)}.btn:focus-visible{box-shadow:var(--shadow-focus);outline:none}
    .btn-lg{height:48px;padding:0 var(--space-5);border-radius:var(--radius-md)}
    .btn-md{height:40px;padding:0 var(--space-4);border-radius:var(--radius-md)}
    .btn-primary{background:var(--color-brand-action);color:#fff;box-shadow:var(--shadow-brand)}
    .btn-primary:hover{background:var(--color-brand-action-hover);color:#fff}
    .btn-secondary{background:var(--color-surface);color:var(--color-brand-primary);border:1.5px solid var(--color-border-strong);box-shadow:var(--shadow-sm)}
    .btn-secondary:hover{background:var(--color-hover-overlay);color:var(--color-brand-primary)}
    .btn-ghost{background:transparent;color:var(--color-brand-primary)}
    .btn-ghost:hover{background:var(--color-hover-overlay);color:var(--color-brand-primary)}
    .nav{position:sticky;top:0;z-index:200;height:var(--nav-height);display:flex;align-items:center;background:var(--color-surface);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-sm)}
    .nav>.container{height:100%}
    .nav-inner{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--space-6)}
    .nav-logo{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--color-brand-primary);text-decoration:none;flex-shrink:0}
    .nav-logo:hover{color:var(--color-brand-primary)}
    .nav-links{display:flex;align-items:center;gap:var(--space-1);flex:1;justify-content:center}
    .nav-link{font-family:var(--font-body);font-size:14px;font-weight:500;line-height:1;color:var(--color-ink-base);text-decoration:none;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
    .nav-link:hover{color:var(--color-brand-action);background:var(--color-success-bg)}
    .nav-link.active{color:var(--color-brand-action);background:var(--color-success-bg)}
    .nav-actions{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}
    .nav-signin{font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--color-ink-base);text-decoration:none;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);transition:color var(--dur-fast) var(--ease)}
    .nav-signin:hover{color:var(--color-brand-action)}
    .nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:var(--space-2);border-radius:var(--radius-sm);transition:background var(--dur-fast) var(--ease);flex-shrink:0}
    .nav-hamburger:hover{background:var(--color-surface-raised)}.nav-hamburger:focus-visible{box-shadow:var(--shadow-focus);outline:none}
    .nav-hamburger span{display:block;width:20px;height:2px;background:var(--color-ink-base);border-radius:2px;transition:all var(--dur-base) var(--ease);transform-origin:center}
    .nav-hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .nav-hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
    .nav-hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    .nav-mobile{display:none;position:fixed;top:var(--nav-height);left:0;right:0;background:var(--color-surface);border-bottom:1px solid var(--color-border);box-shadow:0 8px 22px rgba(2,6,23,.10);z-index:190;padding:var(--space-4) var(--space-4) var(--space-5)}
    .nav-mobile.is-open{display:block}
    .nav-mobile-links{display:flex;flex-direction:column;gap:var(--space-1);margin-bottom:var(--space-5)}
    .nav-mobile-link{font-family:var(--font-body);font-size:16px;font-weight:500;color:var(--color-ink-base);text-decoration:none;padding:var(--space-3) var(--space-2);border-radius:var(--radius-sm);border-bottom:1px solid var(--color-border)}
    .nav-mobile-link:last-child{border-bottom:none}.nav-mobile-link:hover{color:var(--color-brand-action)}
    .nav-mobile-actions{display:flex;flex-direction:column;gap:var(--space-3)}
    @media(max-width:768px){.nav-links{display:none}.nav-signin{display:none}.nav-hamburger{display:flex}}
    .footer{background:#001A24;color:rgba(255,255,255,.75);padding:var(--space-10) 0 var(--space-6)}
    .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-8);padding-bottom:var(--space-8);border-bottom:1px solid rgba(255,255,255,.08)}
    .footer-brand-name{font-family:var(--font-display);font-size:18px;font-weight:700;color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}
    .footer-brand-desc{font-size:14px;line-height:22px;color:rgba(255,255,255,.5);max-width:32ch}
    .footer-col-heading{font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:var(--space-4)}
    .footer-links{display:flex;flex-direction:column;gap:var(--space-2)}
    .footer-link{font-size:14px;line-height:22px;color:rgba(255,255,255,.65);text-decoration:none;transition:color var(--dur-fast) var(--ease);padding:var(--space-1) 0}
    .footer-link:hover{color:#fff}
    .footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-top:var(--space-5);flex-wrap:wrap}
    .footer-copy{font-size:13px;color:rgba(255,255,255,.35)}
    .footer-status{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:12px;font-weight:500;color:#00C07A;text-decoration:none}
    .status-dot{width:7px;height:7px;background:#00C07A;border-radius:50%;box-shadow:0 0 0 0 rgba(0,192,122,.4);animation:ping 2.5s ease-in-out infinite}
    @keyframes ping{0%{box-shadow:0 0 0 0 rgba(0,192,122,.5)}70%{box-shadow:0 0 0 6px rgba(0,192,122,0)}100%{box-shadow:0 0 0 0 rgba(0,192,122,0)}}
    @media(max-width:1023px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand-wrap{grid-column:1/-1}}
    @media(max-width:639px){.footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-6)}.footer-brand-wrap{grid-column:1/-1}.footer-bottom{flex-direction:column;align-items:flex-start}}
    .skip-link{position:absolute;top:-100%;left:var(--space-4);background:var(--color-brand-primary);color:#fff;padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);font-size:14px;font-weight:600;z-index:9999;text-decoration:none;transition:top var(--dur-fast) var(--ease)}
    .skip-link:focus{top:var(--space-2)}



    /* PAGE */
    /* Hero section with dark background */
    .status-hero{background:#001A24;padding:var(--space-9) 0 var(--space-8)}
    .status-hero-inner{max-width:800px;margin:0 auto;text-align:center}
    .status-hero .status-title{font-family:var(--font-display);font-size:clamp(32px,6vw,48px);font-weight:700;letter-spacing:-0.02em;line-height:1.15;color:#fff;margin-bottom:var(--space-3)}
    .status-hero .status-desc{font-size:16px;line-height:26px;color:rgba(255,255,255,.6);margin-bottom:var(--space-6)}

    /* Hero status card */
    .status-hero-card{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-3);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-6)}
    .status-hero-header{display:flex;align-items:center;gap:var(--space-3)}
    .status-hero-text{font-family:var(--font-mono);font-size:16px;font-weight:600;color:#fff}
    .status-hero-meta{font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,.4)}

    /* Status indicator */
    .status-indicator{width:10px;height:10px;border-radius:50%;flex-shrink:0}
    .status-indicator.status-ok{background:#00C07A;box-shadow:0 0 0 0 rgba(0,192,122,.4);animation:ping 2.5s ease-in-out infinite}
    .status-indicator.status-degraded{background:#FFC107;box-shadow:0 0 0 0 rgba(255,193,7,.4);animation:ping 2.5s ease-in-out infinite}
    .status-indicator.status-error{background:#E53935;box-shadow:0 0 0 0 rgba(229,57,53,.4);animation:ping 2.5s ease-in-out infinite}

    /* Main content section */
    .status-section{padding:var(--space-8) 0 var(--space-10)}
    .status-components{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-4)}

    /* Component card */
    .component-card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5)}
    .component-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);flex-wrap:wrap}
    .component-name{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--color-ink-strong)}
    .component-badge{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:12px;font-weight:500;padding:4px 10px;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.02em}
    .component-badge.status-ok{background:#D6F5E9;color:#006B44}
    .component-badge.status-degraded{background:#FEF3C7;color:#92400E}
    .component-badge.status-outage{background:#FEE2E2;color:#991B1B}
    .component-badge.status-unknown{background:var(--color-surface-raised);color:var(--color-ink-disabled)}
    .component-uptime{font-family:var(--font-mono);font-size:12px;color:var(--color-ink-muted);margin-left:auto}

    /* History bars */
    .history-bars{display:flex;gap:2px;align-items:flex-end;height:30px}
    .bar{width:8px;height:30px;border-radius:2px;background:#E5E7EB;cursor:pointer;transition:opacity var(--dur-fast) var(--ease)}
    .bar:hover{opacity:0.8}
    .bar-ok{background:#10B981}
    .bar-degraded{background:#F59E0B}
    .bar-outage{background:#EF4444}

    /* API note */
    .status-api-note{font-size:13px;color:var(--color-ink-disabled);text-align:center;margin:var(--space-8) 0 var(--space-5)}
    .status-api-note code{font-family:var(--font-mono);font-size:12px;background:var(--color-surface-raised);padding:2px 6px;border-radius:var(--radius-xs)}

    .status-back{font-size:14px;color:var(--color-ink-muted);text-align:center}
    .status-back a{color:var(--color-brand-action);font-weight:500}

    @media(max-width:640px){
      .component-header{flex-direction:column;align-items:flex-start;gap:var(--space-2)}
      .component-uptime{margin-left:0}
      .history-bars{height:24px}
      .bar{width:6px;height:24px}
    }