/* Status page */
:root { --bg: #08080a; --card: #111114; --line: #1f1f25; --text: #ededf0; --muted: #8e8f98; --pink: #ec5f9c;
  --up: #3fcf8e; --degraded: #f5b544; --down: #f0616d; --none: #2a2a31; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; background: radial-gradient(1000px 520px at 50% -12%, rgba(236,95,156,.13), transparent 70%), var(--bg);
  color: var(--text); font: 15px/1.55 "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
.fz-stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.st { position: relative; z-index: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 28px 20px 60px; }

.st__top { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 44px; }
.st__brand { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; font-weight: 700; }
.st__brand img { height: 42px; width: auto; filter: drop-shadow(0 0 12px rgba(236,95,156,.35)); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.st__brand:hover img { transform: rotate(-8deg) scale(1.06); }
.st__touch { padding: 9px 16px; border: 1px solid rgba(236,95,156,.45); border-radius: 10px; color: #fff; font-size: .9rem; font-weight: 600; transition: background-color .2s, box-shadow .2s; }
.st__touch:hover { background: rgba(236,95,156,.12); box-shadow: 0 0 24px -6px rgba(236,95,156,.6); }

.st__hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 0 46px; animation: st-in .6s ease both; }
.st__badge { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 20px; border-radius: 50%; color: #fff; background: var(--up); box-shadow: 0 0 0 10px rgba(63,207,142,.12), 0 0 40px rgba(63,207,142,.4); }
.st__hero--up .st__badge { animation: st-ring 2.6s ease-in-out infinite; }
.st__hero--degraded .st__badge { background: var(--degraded); box-shadow: 0 0 0 10px rgba(245,181,68,.12), 0 0 40px rgba(245,181,68,.35); }
.st__hero--down .st__badge { background: var(--down); box-shadow: 0 0 0 10px rgba(240,97,109,.12), 0 0 40px rgba(240,97,109,.35); }
.st__hero h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; }
.st__hero p { margin-top: 8px; color: var(--muted); font-size: .92rem; }

.st__group { margin-bottom: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: rgba(17,17,20,.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: st-in .6s ease both; }
.st__group:nth-of-type(2) { animation-delay: .06s; } .st__group:nth-of-type(3) { animation-delay: .12s; } .st__group:nth-of-type(4) { animation-delay: .18s; } .st__group:nth-of-type(5) { animation-delay: .24s; }
.st__ghead { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.st__ghead h2 { font-size: 1rem; font-weight: 600; }
.st__gstate { font-size: .86rem; font-weight: 600; }
.st__gstate--up { color: var(--up); } .st__gstate--degraded { color: var(--degraded); } .st__gstate--down { color: var(--down); }
.st__comp { padding: 18px 22px 16px; border-bottom: 1px solid var(--line); }
.st__comp:last-child { border-bottom: 0; }
.st__crow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.st__cname { font-size: .94rem; font-weight: 500; }
.st__cname em { margin-left: 6px; color: var(--muted); font-size: .8rem; font-style: normal; }
.st__cstate { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); white-space: nowrap; }
.st__cstate i { width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 0 rgba(63,207,142,.6); animation: st-pulse 2s infinite; }
.st__cstate--degraded i, .st__cstate--maintenance i { background: var(--degraded); animation: none; }
.st__cstate--down i { background: var(--down); animation: none; }
.st__cstate--up { color: var(--up); } .st__cstate--degraded { color: var(--degraded); } .st__cstate--down { color: var(--down); }
.st__bars { display: flex; gap: 2px; height: 34px; }
.st__bar { flex: 1; min-width: 2px; border-radius: 2px; background: var(--up); transition: transform .15s, filter .15s; transform-origin: bottom; }
.st__bar:hover { transform: scaleY(1.12); filter: brightness(1.25); }
.st__bar--degraded { background: var(--degraded); } .st__bar--down { background: var(--down); } .st__bar--none { background: var(--none); }
.st__axis { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: .76rem; }
.st__uptime { color: #c9cad0; }

.st__history { margin-top: 38px; animation: st-in .6s .2s ease both; }
.st__history h2 { margin-bottom: 14px; font-size: 1.05rem; }
.st__history li { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(17,17,20,.86); }
.st__history b { display: block; font-weight: 600; font-size: .92rem; }
.st__history li span:not(.st__pill) { color: var(--muted); font-size: .82rem; }
.st__pill { flex: none; padding: 3px 10px; border-radius: 99px; background: rgba(63,207,142,.14); color: var(--up); font-size: .75rem; font-weight: 700; }
.is-open .st__pill { background: rgba(240,97,109,.14); color: var(--down); }
.st__empty { padding: 18px 22px; color: var(--muted); font-size: .9rem; }
.st__history .st__empty { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(17,17,20,.86); }

.st__foot { padding-top: 40px; text-align: center; color: var(--muted); font-size: .85rem; }
.st__foot a:hover { color: #fff; }
.st__foot b { color: var(--pink); }

.st__tip { position: absolute; z-index: 10; padding: 8px 12px; border: 1px solid #2a2a31; border-radius: 10px; background: #18181c; box-shadow: 0 14px 30px -12px rgba(0,0,0,.8); font-size: .8rem; pointer-events: none; white-space: nowrap; }
.st__tip b { display: block; font-weight: 600; }
.st__tip span { color: var(--muted); }

@keyframes st-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes st-pulse { 70% { box-shadow: 0 0 0 7px rgba(63,207,142,0); } 100% { box-shadow: 0 0 0 0 rgba(63,207,142,0); } }
@keyframes st-ring { 50% { box-shadow: 0 0 0 16px rgba(63,207,142,.06), 0 0 50px rgba(63,207,142,.45); } }
@media (max-width: 600px) {
  .st { padding: 18px 14px 40px; }
  .st__bars { height: 28px; gap: 1px; }
  .st__bar:nth-child(-n+30) { display: none; } /* last 60 days on phones */
  .st__axis span:first-child::before { content: "60 days ago"; }
  .st__axis span:first-child { font-size: 0; }
  .st__axis span:first-child::before { font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) { .st__hero, .st__group, .st__history, .st__badge, .st__cstate i { animation: none !important; } }
* { scrollbar-width: thin; scrollbar-color: #3a2a33 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 10px; background: #3a2a33 padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(236, 95, 156, .7) padding-box; }