:root {
  color-scheme: dark;
  --bg: #090b12;
  --panel: rgba(24, 29, 43, .76);
  --line: rgba(222, 232, 255, .12);
  --ink: #f7f8ff;
  --muted: #a9afc2;
  --purple: #a78bfa;
  --cyan: #63e3ee;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  margin: 0;
  background: radial-gradient(70rem 38rem at 0 0, #1d1740 0, transparent 56%), radial-gradient(56rem 32rem at 100% 100%, #0a333a 0, transparent 60%), var(--bg);
  color: var(--ink);
  font: 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-shell { width: min(1100px, calc(100% - 40px)); margin: 0 auto; padding: 82px 0 32px; }
.hero { max-width: 720px; padding-bottom: 62px; }
.brand-lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.brand-logo { width: 48px; height: 48px; filter: drop-shadow(0 10px 22px rgba(99, 227, 238, .18)); }
.brand-lockup .eyebrow { margin-bottom: 0; }
.eyebrow { margin: 0 0 10px; color: var(--cyan); font-size: .73rem; font-weight: 800; letter-spacing: .14em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 12px; font-size: clamp(3rem, 8vw, 5.7rem); line-height: .95; letter-spacing: -.065em; }
h1 span { color: var(--purple); }
h2 { margin-bottom: 0; font-size: clamp(1.6rem, 3vw, 2.15rem); letter-spacing: -.04em; }
h3 { margin: 20px 0 8px; font-size: 1.25rem; letter-spacing: -.025em; }
.intro { max-width: 600px; margin-bottom: 0; color: var(--muted); font-size: 1.13rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 19px; }

.server-status { margin-bottom: 56px; padding: 25px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(125deg, rgba(99, 227, 238, .08), rgba(167, 139, 250, .08)), var(--panel); box-shadow: 0 20px 60px rgba(0, 0, 0, .16); }
.status-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.server-state { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; font-weight: 800; }
.server-state i { width: 8px; height: 8px; border-radius: 50%; background: #7f8597; box-shadow: 0 0 0 4px rgba(127,133,151,.12); }
.server-state.is-online { color: #83ead1; }.server-state.is-online i { background: #55d9b8; box-shadow: 0 0 0 4px rgba(85,217,184,.12); }
.server-state.is-offline { color: #ff9f9f; }.server-state.is-offline i { background: #ff7474; box-shadow: 0 0 0 4px rgba(255,116,116,.12); }
.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.metric { display: flex; min-width: 0; flex-direction: column; padding: 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: rgba(4, 7, 15, .3); }
.metric-label { color: var(--muted); font-size: .78rem; font-weight: 700; }
.metric strong { margin: 6px 0 2px; font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1; letter-spacing: -.04em; }
.metric strong small { color: #83899b; font-size: .75rem; letter-spacing: 0; }
.metric-detail { min-height: 2.2em; color: #7f8597; font-size: .72rem; line-height: 1.3; }
.metric.is-warning strong { color: #ffd27d; }.metric.is-danger strong { color: #ff8a8a; }
.twitch-recorder { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border: 1px solid rgba(167,139,250,.2); border-radius: 15px; background: rgba(20,10,34,.34); }
.twitch-recorder-mark { color: #9b7bff; font-size: 1.15rem; text-shadow: 0 0 16px rgba(155,123,255,.7); }
.twitch-recorder div { display: flex; min-width: 0; flex-direction: column; }
.twitch-recorder strong { font-size: .88rem; }.twitch-recorder div span { overflow: hidden; color: #8f95a8; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.twitch-recorder-state { border-radius: 999px; padding: 5px 9px; background: rgba(255,255,255,.06); color: #a9afc2; font-size: .72rem; font-weight: 800; }
.twitch-recorder.is-recording .twitch-recorder-mark, .twitch-recorder.is-recording .twitch-recorder-state { color: #ff8baa; }
.twitch-recorder.is-recording .twitch-recorder-state { background: rgba(255,90,135,.12); }
.twitch-recorder.is-healthy .twitch-recorder-state { color: #83ead1; background: rgba(85,217,184,.1); }
.twitch-recorder.is-error .twitch-recorder-state { color: #ff9f9f; background: rgba(255,116,116,.1); }
.status-footnote { margin: 16px 0 0; color: #777d8e; font-size: .74rem; }

.app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.app-card, .local-access { border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: 0 20px 60px rgba(0, 0, 0, .16); }
.app-card { display: flex; min-height: 248px; flex-direction: column; padding: 23px; }
.app-card--featured { grid-column: span 2; background: linear-gradient(125deg, rgba(116, 88, 220, .28), rgba(33, 111, 121, .28)), var(--panel); }
.app-card--sender { background: linear-gradient(145deg, rgba(99, 227, 238, .12), rgba(167, 139, 250, .09)), var(--panel); }
.card-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-mark { display: grid; width: 37px; height: 37px; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.06); color: var(--cyan); font-size: 1.24rem; }
.status { color: #c0c5d3; font-size: .75rem; font-weight: 700; }
.status--ready { color: var(--cyan); }.status--active { color: #d6adff; }
.app-card p { color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: auto; padding-top: 14px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 999px; padding: 10px 16px; font-weight: 800; text-decoration: none; transition: transform .16s ease, background .16s ease; }
.button:hover { transform: translateY(-2px); }.button--primary { background: var(--ink); color: #12151f; }.button--secondary { border: 1px solid rgba(99, 227, 238, .46); background: rgba(99, 227, 238, .08); color: var(--cyan); }
.text-link { color: var(--ink); font-weight: 700; text-decoration-color: rgba(255,255,255,.38); text-underline-offset: 4px; }
.muted-action { margin-top: auto; padding-top: 14px; color: #7f8597; font-size: .86rem; }
.manual-note { color: #8990a3; font-size: .78rem; }
.local-access { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 48px; padding: 25px; }.local-access h2 { margin-bottom: 4px; }.local-access p:not(.eyebrow) { margin-bottom: 0; color: var(--muted); }
footer { padding-top: 58px; color: #777d8e; font-size: .82rem; text-align: center; }

@media (max-width: 760px) { .page-shell { width: min(100% - 28px, 1100px); padding-top: 48px; }.metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.status-heading { align-items: flex-start; flex-direction: column; gap: 10px; }.app-grid { grid-template-columns: 1fr; }.app-card--featured { grid-column: auto; }.local-access { align-items: flex-start; flex-direction: column; gap: 16px; }.button--secondary { width: 100%; }.app-card { min-height: 220px; } }

@media (max-width: 420px) { .metric-grid { grid-template-columns: 1fr; } }

@media (max-width: 520px) { .twitch-recorder { grid-template-columns: auto 1fr; }.twitch-recorder-state { grid-column: 2; justify-self: start; } }