/* Marketing pages, chat mock-ups, docs, commands, discover, login. Builds on styles.css. */

/* ---------- hero ---------- */
.hero { text-align: center; padding: clamp(3.5rem, 10vw, 7rem) var(--gutter) clamp(1.5rem, 4vw, 2.5rem); }
.hero-chip { display: inline-grid; place-items: center; width: 4.6rem; height: 4.6rem; margin-bottom: 1.8rem; border-radius: 22px; border: 1px solid var(--line-hi); background: rgba(255, 255, 255, 0.04); box-shadow: 0 0 4rem rgba(59, 123, 255, 0.3); }
.hero-chip img { width: 2.8rem; }
.hero h1 { font: 600 clamp(2.3rem, 6.2vw, 4.4rem)/1.12 var(--font); letter-spacing: -0.03em; text-wrap: balance; }
.hero h1 .l1 { display: block; }
.hero h1 b { font-weight: 700; }
.hero p.lead { margin: 1.4rem auto 0; max-width: 34rem; color: var(--muted); font-size: clamp(1rem, 2vw, 1.15rem); }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 2rem; }
.stat-line { margin-top: 1.8rem; color: var(--muted); font-size: 0.98rem; min-height: 1.6rem; }
.stat-line b { color: var(--text); font-weight: 600; }

/* ---------- server marquee ---------- */
.marquee { position: relative; overflow: hidden; margin: 1.6rem 0 0; padding: 0.4rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: belt var(--dur, 40s) linear infinite; will-change: transform; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes belt { to { transform: translateX(calc(-1 * var(--dist, 50%))); } }
/* The belt is the point of the strip, so it keeps moving even when the system asks for less motion (it only slows down). */
@media (prefers-reduced-motion: reduce) { .marquee-track { animation-duration: calc(var(--dur, 40s) * 2) !important; animation-iteration-count: infinite !important; } }
.server-chip { display: inline-flex; flex: none; align-items: center; gap: 0.75rem; margin-right: 0.8rem; min-width: 11rem; padding: 0.7rem 1.1rem 0.7rem 0.75rem; border: 1px solid var(--line-hi); border-radius: 16px; background: rgba(255, 255, 255, 0.035); color: var(--text); text-align: left; transition: border-color 0.15s, background 0.15s; }
a.server-chip:hover { border-color: var(--blue); background: var(--blue-dim); text-decoration: none; }
.sv-text { display: flex; flex-direction: column; min-width: 0; }
.sv-ico { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--blue-dim); color: var(--blue-2); font-weight: 600; font-size: 1rem; overflow: hidden; flex: none; }
.sv-ico, .server-card .mark { position: relative; }
.sv-ico img, .server-card .mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #0d111b; }
.server-card .mark { overflow: hidden; }
.server-chip b { font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.server-chip small { color: var(--muted); font-size: 0.78rem; }
.server-chip.add { border-style: dashed; color: var(--muted); flex-direction: column; align-items: flex-start; gap: 0; justify-content: center; }
.marquee.still .marquee-track { animation: none; width: auto; justify-content: center; flex-wrap: wrap; }

/* ---------- sections ---------- */
.section { padding-top: clamp(3.5rem, 8vw, 6.5rem); }
.section-head { text-align: center; max-width: 38rem; margin: 0 auto clamp(2rem, 5vw, 3.5rem); }
.section-head h2 { font: 600 clamp(1.8rem, 4.2vw, 2.7rem)/1.15 var(--font); letter-spacing: -0.025em; }
.section-head p { margin-top: 0.9rem; color: var(--muted); }

.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; padding: clamp(1.8rem, 4vw, 2.8rem) 0; }
.feature + .feature { border-top: 1px solid var(--line); }
.feature.flip .f-text { order: 2; }
.f-text h3 { font: 600 clamp(1.5rem, 3.2vw, 2.1rem)/1.2 var(--font); letter-spacing: -0.02em; }
.f-text p { margin-top: 0.9rem; color: var(--muted); max-width: 30rem; }
.f-text ul { margin-top: 1.2rem; display: grid; gap: 0.5rem; }
.f-text li { position: relative; padding-left: 1.4rem; color: #c3cde3; font-size: 0.95rem; }
.f-text li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--blue); }
.f-visual { padding: clamp(1rem, 2.5vw, 1.6rem); border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)); box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.35); display: grid; gap: 1rem; }

/* ---------- chat message mock-ups (what Jewel's messages look like) ---------- */
.msg { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.8rem; }
.msg .av { width: 2.6rem; height: 2.6rem; padding: 0.35rem; border-radius: 50%; background: #0b1024; border: 1px solid var(--line-hi); }
.msg-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; }
.msg-head b { font-weight: 600; color: var(--blue-2); }
.msg-head .bot { padding: 0.05rem 0.4rem; border-radius: 5px; background: var(--blue); color: #fff; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em; }
.msg-head time { color: var(--muted); font-size: 0.75rem; }
.embed { margin-top: 0.45rem; padding: 0.8rem 0.95rem; border-radius: 8px; background: rgba(255, 255, 255, 0.045); border-left: 4px solid var(--blue); display: grid; gap: 0.45rem; }
.embed.c-green { border-left-color: #4caf7d; } .embed.c-red { border-left-color: #e5534b; } .embed.c-amber { border-left-color: #f0b650; } .embed.c-purple { border-left-color: #8b6cf0; }
.e-title { font-weight: 600; font-size: 0.98rem; }
.e-text { color: #c3cde3; font-size: 0.88rem; }
.e-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; font-size: 0.82rem; }
.e-fields b { display: block; font-weight: 600; color: var(--text); font-size: 0.8rem; }
.e-fields span { color: #c3cde3; }
.e-bar { font-family: var(--mono); font-size: 0.82rem; color: var(--blue-2); letter-spacing: 0.02em; }
.e-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.2rem; }
.e-btn { padding: 0.35rem 0.9rem; border-radius: 6px; color: #fff; font-size: 0.82rem; font-weight: 500; background: #3a4258; }
.e-btn.blue { background: #3b6cf0; } .e-btn.green { background: #2f8f63; } .e-btn.red { background: #c8454f; }
.lb-row { display: grid; grid-template-columns: 1.4rem 1fr auto; gap: 0.6rem; font-size: 0.85rem; color: #c3cde3; }
.lb-row b { color: var(--text); font-weight: 500; }

/* ---------- call to action ---------- */
.cta-band { margin-top: clamp(4rem, 9vw, 7rem); text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter); border: 1px solid var(--line-hi); border-radius: 32px; background: radial-gradient(34rem 14rem at 50% 0, rgba(59, 123, 255, 0.28), transparent 70%), rgba(255, 255, 255, 0.025); }
.cta-band h2 { font: 600 clamp(1.8rem, 4.4vw, 3rem)/1.15 var(--font); letter-spacing: -0.025em; }
.cta-band p { margin: 0.9rem auto 0; max-width: 30rem; color: var(--muted); }

/* ---------- page header for inner pages ---------- */
.page-head { text-align: center; padding: clamp(3rem, 8vw, 5rem) var(--gutter) 1.5rem; }
.page-head h1 { font: 600 clamp(2rem, 5vw, 3.2rem)/1.15 var(--font); letter-spacing: -0.025em; }
.page-head p { margin: 0.8rem auto 0; max-width: 34rem; color: var(--muted); }

/* ---------- commands ---------- */
.tools { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; justify-content: center; margin-bottom: 1.6rem; }
.search { width: min(24rem, 100%); min-height: 2.8rem; padding: 0 1.2rem; border: 1px solid var(--line-hi); border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: var(--text); font: 400 0.95rem var(--font); }
.search:focus-visible { border-color: var(--blue); outline: none; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.chip { padding: 0.4rem 0.95rem; border: 1px solid var(--line-hi); border-radius: 999px; background: transparent; color: var(--muted); font: 500 0.85rem/1.2 var(--font); cursor: pointer; }
.chip:hover { color: var(--text); }
.chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.cmd-list { display: grid; gap: 0.6rem; max-width: 56rem; margin: 0 auto; }
.cmd { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) auto; gap: 0.3rem 1.2rem; align-items: baseline; padding: 0.95rem 1.2rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.025); }
.cmd code { background: var(--blue-dim); border-color: rgba(59, 123, 255, 0.3); color: var(--blue-2); font-size: 0.92rem; padding: 0.15em 0.6em; justify-self: start; }
.cmd span { color: #c3cde3; font-size: 0.93rem; }
.badge { padding: 0.15rem 0.6rem; border-radius: 999px; background: rgba(240, 182, 80, 0.12); color: var(--warn); font-size: 0.72rem; font-weight: 500; }
.cmd-group { margin: 1.6rem auto 0.2rem; max-width: 56rem; font: 600 0.82rem/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 2rem 0; }

/* ---------- discover and leaderboard ---------- */
.server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.server-card { padding: 1.3rem; border: 1px solid var(--line); border-radius: 22px; background: rgba(255, 255, 255, 0.03); display: grid; gap: 0.9rem; align-content: start; }
.server-card h3 { font: 600 1.1rem/1.3 var(--font); overflow-wrap: anywhere; }
.server-card .mark { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 16px; background: var(--blue-dim); color: var(--blue-2); font-weight: 600; font-size: 1.1rem; }
.server-card .row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.server-card .btn { min-height: 2.2rem; padding: 0 1rem; font-size: 0.85rem; }
.podium { display: grid; gap: 0.6rem; max-width: 40rem; margin: 0 auto; }
.rank-row { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 0.9rem 1.2rem; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.03); }
.rank-row .n { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: rgba(255, 255, 255, 0.06); font-weight: 600; font-size: 0.9rem; }
.rank-row:nth-child(1) .n { background: var(--blue); color: #fff; }
.rank-row b { font-weight: 600; overflow-wrap: anywhere; }
.rank-row small { display: block; color: var(--muted); font-size: 0.78rem; }
.rank-row .lvl { text-align: right; font-weight: 600; }
.rank-row .lvl small { font-weight: 400; }

/* ---------- login ---------- */
.login-card { width: min(31rem, 100%); margin: 0 auto; padding: clamp(1.6rem, 4vw, 2.4rem); border: 1px solid var(--line-hi); border-radius: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); text-align: center; }
.login-card .hero-chip { margin-bottom: 1.2rem; width: 4rem; height: 4rem; }
.login-card h1 { font: 600 1.7rem/1.2 var(--font); letter-spacing: -0.02em; }
.login-card > p { margin-top: 0.7rem; color: var(--muted); font-size: 0.95rem; }
.l-steps { margin-top: 1.6rem; display: grid; gap: 0.9rem; text-align: left; }
.l-step { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.03); }
.l-step small { display: block; margin-bottom: 0.5rem; color: var(--muted); font: 500 0.72rem/1.2 var(--font); letter-spacing: 0.1em; text-transform: uppercase; }
.l-step small i { font-style: normal; display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; margin-right: 0.5rem; border-radius: 50%; background: var(--blue-dim); color: var(--blue-2); }
.copy-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.copy-row code { font-size: 1.05rem; padding: 0.4em 0.9em; }
.copy-row .btn { min-height: 2.2rem; padding: 0 1rem; font-size: 0.85rem; }
.code-input { width: 100%; min-height: 3.4rem; padding: 0 1rem; border: 1px solid var(--line-hi); border-radius: 16px; background: var(--bg); color: var(--text); font: 600 1.6rem var(--mono); letter-spacing: 0.5em; text-align: center; text-transform: uppercase; }
.code-input:focus-visible { border-color: var(--blue); outline: none; }
.l-msg { min-height: 1.4rem; margin-top: 0.9rem; font-size: 0.92rem; color: var(--muted); }
.l-msg.bad { color: var(--bad); } .l-msg.ok { color: var(--ok); }
.spinner { display: inline-block; width: 1rem; height: 1rem; margin-right: 0.6rem; vertical-align: -0.15rem; border: 2px solid var(--line-hi); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.alt { margin-top: 1.4rem; color: var(--muted); font-size: 0.88rem; }

/* ---------- docs ---------- */
.docs { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding-top: clamp(2.5rem, 6vw, 4rem); align-items: start; }
.docs-nav { position: sticky; top: 5.5rem; display: grid; gap: 0.15rem; }
.docs-nav h4 { font: 600 0.75rem/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.7rem 0.8rem; }
.docs-nav a { padding: 0.5rem 0.8rem; border-radius: 12px; color: var(--muted); font-size: 0.92rem; font-weight: 500; }
.docs-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); text-decoration: none; }
.docs-nav a[aria-current="page"] { color: var(--text); background: var(--blue-dim); }
.prose { max-width: 46rem; min-width: 0; }
.prose h1 { font: 600 clamp(1.9rem, 4vw, 2.6rem)/1.15 var(--font); letter-spacing: -0.025em; }
.prose .lead { margin-top: 0.8rem; color: var(--muted); font-size: 1.05rem; }
.prose h2 { margin-top: 2.6rem; font: 600 1.45rem/1.25 var(--font); letter-spacing: -0.015em; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.prose h3 { margin-top: 1.8rem; font: 600 1.1rem/1.3 var(--font); }
.prose p, .prose li { margin-top: 0.8rem; color: #c3cde3; }
.prose ul, .prose ol { margin-top: 0.6rem; padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.3rem; }
.prose ul li::before { content: ""; position: absolute; left: 0.2rem; top: 0.85em; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--blue); }
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; position: relative; padding-left: 2.2rem; }
.prose ol li::before { content: counter(n); position: absolute; left: 0; top: 0.1rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--blue-dim); color: var(--blue-2); font-weight: 600; font-size: 0.8rem; }
.note-box { margin-top: 1.2rem; padding: 1rem 1.2rem; border: 1px solid rgba(59, 123, 255, 0.3); border-left: 4px solid var(--blue); border-radius: 14px; background: var(--blue-dim); color: #c9d8ff; font-size: 0.93rem; }
.note-box.warn { border-color: rgba(240, 182, 80, 0.3); border-left-color: var(--warn); background: rgba(240, 182, 80, 0.08); color: #f3dfb4; }
.prose table { width: 100%; margin-top: 1rem; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 0.92rem; }
.prose th { text-align: left; padding: 0.7rem 1rem; background: rgba(255, 255, 255, 0.04); color: var(--muted); font-weight: 500; }
.prose td { padding: 0.7rem 1rem; border-top: 1px solid var(--line); vertical-align: top; color: #c3cde3; }
.docs-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }

/* ---------- changelog ---------- */
.log { max-width: 46rem; margin: 0 auto; display: grid; gap: 2.4rem; }
.release { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem 2rem; }
.release time { color: var(--muted); font-size: 0.9rem; padding-top: 0.35rem; }
.release h2 { font: 600 1.5rem/1.2 var(--font); display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.release h2 .tag { padding: 0.15rem 0.7rem; border-radius: 999px; background: var(--blue-dim); color: var(--blue-2); font-size: 0.75rem; font-weight: 500; }
.release ul { margin-top: 0.9rem; display: grid; gap: 0.5rem; }
.release li { position: relative; padding-left: 1.3rem; color: #c3cde3; }
.release li::before { content: ""; position: absolute; left: 0.2rem; top: 0.75em; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--blue); }

@media (max-width: 56rem) {
  .feature { grid-template-columns: 1fr; }
  .feature.flip .f-text { order: 0; }
  .docs { grid-template-columns: 1fr; }
  .docs-nav { position: static; display: flex; flex-wrap: wrap; gap: 0.3rem; }
  .docs-nav h4 { width: 100%; }
  .release { grid-template-columns: 1fr; gap: 0.3rem; }
  .cmd { grid-template-columns: 1fr; }
}

.pad-top { padding-top: 3rem; }
.small { font-size: 0.85rem; margin-top: 0.6rem; }
.lbl { font-size: 0.85rem; display: block; margin-bottom: 0.6rem; }
.full { width: 100%; margin-top: 0.8rem; }

.cmd span, .cmd code { min-width: 0; overflow-wrap: anywhere; }

/* ---------- ticket transcript ---------- */
.tr-head { padding: 1.4rem 0 1rem; }
.tr-head h1 { font: 650 1.7rem/1.2 var(--font); margin-top: 0.3rem; overflow-wrap: anywhere; }
.tr-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.6rem; margin-top: 1.1rem; }
.tr-facts > div { padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.03); min-width: 0; }
.tr-facts dt { color: var(--muted); font-size: 0.75rem; }
.tr-facts dd { margin: 0.15rem 0 0; font-weight: 600; font-size: 0.92rem; overflow-wrap: anywhere; }
.tr-toggle { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem; color: var(--muted); font-size: 0.88rem; cursor: pointer; }
.tr-log { display: grid; gap: 0.15rem; padding-bottom: 4rem; max-width: 52rem; }
.tr-log.hide-notes .tr-msg.note { display: none; }
.tr-day { margin: 1.2rem 0 0.4rem; color: var(--muted); font-size: 0.78rem; text-align: center; }
.tr-sys { margin: 0.4rem 0; color: var(--muted); font-size: 0.82rem; text-align: center; }
.tr-msg { display: flex; gap: 0.8rem; padding: 0.55rem 0.7rem; border-radius: 12px; }
.tr-msg:hover { background: rgba(255, 255, 255, 0.025); }
.tr-msg.note { border: 1px dashed #6b5a22; background: rgba(242, 184, 75, 0.05); }
.tr-av { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--blue-dim); color: var(--blue-2); font-weight: 600; font-size: 0.9rem; }
.tr-msg.staff .tr-av, .tr-msg.note .tr-av { background: #1d2a52; color: #fff; }
.tr-body { min-width: 0; }
.tr-who { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tr-who b { font-weight: 600; }
.tr-who time { color: var(--muted); font-size: 0.75rem; }
.tr-tag { padding: 0 0.4rem; border-radius: 5px; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em; background: var(--blue); color: #fff; }
.tr-tag.note { background: #f2b84b; color: #1b1405; }
.tr-body p { margin-top: 0.15rem; white-space: pre-wrap; overflow-wrap: anywhere; color: #d7def0; }
.tr-body img { display: block; margin-top: 0.4rem; max-width: min(100%, 26rem); max-height: 22rem; border-radius: 12px; border: 1px solid var(--line); }

/* ---------- status page ---------- */
.st-wrap { width: min(46rem, calc(100% - 2rem)); margin: 0 auto; }
.st-top { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.st-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.st-bar .brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); font-weight: 600; }
.st-bar .brand img { width: 1.6rem; }
.st-banner { margin: 1.8rem 0 1.4rem; padding: 1.4rem 1.5rem; border-radius: 20px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); }
.st-banner h1 { font: 650 1.5rem/1.25 var(--font); }
.st-banner p { margin-top: 0.3rem; color: var(--muted); }
.st-banner.operational { border-color: #1f6a4a; background: rgba(76, 175, 125, 0.1); }
.st-banner.operational h1 { color: #6fe0a6; }
.st-banner.degraded { border-color: #7a5d1c; background: rgba(242, 184, 75, 0.1); }
.st-banner.degraded h1 { color: #f2c36b; }
.st-banner.outage { border-color: #7a2a30; background: rgba(229, 83, 75, 0.1); }
.st-banner.outage h1 { color: #ff8f88; }
.st-list { display: grid; gap: 0.8rem; }
.st-row { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.025); }
.st-row-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.st-names { min-width: 0; }
.st-names b { display: block; font-weight: 600; }
.st-names small { color: var(--muted); font-size: 0.8rem; }
.st-right { display: flex; align-items: center; gap: 0.7rem; }
.st-ms { color: var(--muted); font-size: 0.78rem; }
.st-pill { padding: 0.18rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: #1a1f2b; color: var(--muted); }
.st-pill.ok { background: rgba(76, 175, 125, 0.16); color: #6fe0a6; }
.st-pill.slow, .st-pill.limited { background: rgba(242, 184, 75, 0.16); color: #f2c36b; }
.st-pill.down { background: rgba(229, 83, 75, 0.16); color: #ff8f88; }
.st-bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; margin-top: 0.9rem; }
.st-bar-day { display: block; height: 1.7rem; border-radius: 3px; background: #1a1f2b; }
.st-bar-day.ok { background: #3fae7a; }
.st-bar-day.warn { background: #e0a93d; }
.st-bar-day.bad { background: #e5534b; }
.st-bars-foot { display: flex; justify-content: space-between; margin-top: 0.4rem; color: var(--muted); font-size: 0.72rem; }
.st-incidents { margin-top: 2.4rem; }
.st-incidents h2 { font: 650 1.1rem/1.3 var(--font); margin-bottom: 0.8rem; }
.st-inc { padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 0.6rem; }
.st-inc.live { border-color: #7a2a30; }
.st-inc b { display: block; font-weight: 600; }
.st-inc small { color: var(--muted); }
.st-foot { margin: 2rem 0 3rem; font-size: 0.82rem; }