/* Streamworks brand: maroon #901731, crimson #c41f43 (from the original control.streamworks.video). */
:root {
  --brand:#901731; --brand-2:#c41f43; --brand-ink:#fff; --brand-soft:#fbe9ed;
  --ink:#16161b; --muted:#6c6c78; --bg:#f4f4f6; --card:#fff; --line:#e7e7ec; --field:#fff; --field-line:#d6d6de;
  --ok:#16a34a; --ok-soft:#e5f6ea; --warn:#c27803; --warn-soft:#fdf3dc; --err:#c41f43; --err-soft:#fbe9ed; --off-soft:#ececf0;
  --bar:#14090c; --shadow:0 1px 2px rgba(16,16,24,.04), 0 4px 16px rgba(16,16,24,.06);
  --radius:14px; --mono:"JetBrains Mono", ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink:#ececf1; --muted:#9a9aa8; --bg:#0d0d11; --card:#17171d; --line:#26262f; --field:#111116; --field-line:#33333d;
    --brand-soft:#3a121c; --ok:#34d399; --ok-soft:#0f2e22; --warn:#fbbf24; --warn-soft:#33270b; --err:#f2577a; --err-soft:#3a121c; --off-soft:#24242c;
    --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme: dark;
  }
}
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 Inter, system-ui, -apple-system, sans-serif; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; }
a { color:var(--brand-2); text-decoration:none; } a:hover { text-decoration:underline; }
code { font-family:var(--mono); font-size:.82rem; }
:focus-visible { outline:2px solid var(--brand-2); outline-offset:2px; }

/* Top bar */
.top { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 20px; background:linear-gradient(90deg, #6b0f23, var(--brand) 55%, var(--brand-2)); box-shadow:0 1px 0 rgba(0,0,0,.2); }
.brand { display:flex; align-items:center; gap:10px; }
.brand img { display:block; } .brand .wordmark { height:20px; width:auto; }
.top nav { display:flex; gap:4px; align-items:center; }
.top nav a, .top nav button { color:#e9e3e5; font-weight:500; font-size:.9rem; padding:6px 12px; border-radius:8px; border:0; background:none; text-decoration:none; }
.top nav a:hover, .top nav button:hover { background:rgba(255,255,255,.14); color:#fff; }
.top form { margin:0; }

main { max-width:1040px; margin:0 auto; padding:24px 20px 48px; }
h1 { font-size:1.6rem; font-weight:700; letter-spacing:-.02em; margin:.2em 0 .1em; }
h2 { font-size:1rem; font-weight:600; margin:0; letter-spacing:-.01em; }
h3 { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:28px 0 10px; padding-top:18px; border-top:1px solid var(--line); }
.card > h2 + p, .card > h2 + .muted { margin-top:6px; }
.empty, .muted.empty { color:var(--muted); padding:6px 0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin:20px 0; box-shadow:var(--shadow); }
.narrow { max-width:400px; margin:56px auto; padding:28px; }
.narrow h1 { margin-bottom:.6em; }
.muted { color:var(--muted); font-size:.875rem; } .err { color:var(--err); }

/* Forms */
label { display:block; margin:12px 0; font-size:.85rem; font-weight:500; color:var(--muted); }
input, select { display:block; width:100%; height:40px; padding:0 12px; margin-top:6px; font:inherit; font-size:.95rem; color:var(--ink);
  background:var(--field); border:1px solid var(--field-line); border-radius:10px; transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus { outline:none; border-color:var(--brand-2); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-2) 22%, transparent); }
button { font:inherit; font-size:.9rem; font-weight:500; height:40px; padding:0 16px; border-radius:10px; border:1px solid var(--field-line);
  background:var(--card); color:var(--ink); cursor:pointer; transition:background .15s, border-color .15s, transform .05s; }
button:hover { border-color:var(--muted); } button:active { transform:translateY(1px); }
button.primary { background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }
button.primary:hover { background:var(--brand-2); border-color:var(--brand-2); }
button:disabled { opacity:.45; cursor:not-allowed; transform:none; }
button.link { border:0; background:none; height:auto; min-height:32px; padding:4px 10px; color:var(--muted); border-radius:8px; }
button.link:hover { background:var(--off-soft); color:var(--ink); }
button.danger, button.link.danger { color:var(--err); } button.link.danger:hover { background:var(--err-soft); }
.narrow button.primary { width:100%; margin-top:8px; }

.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.row > *, .row label { margin:0; } .row input, .row select { width:auto; margin:0; }
.row input[type=email], .row input[type=text], .row input:not([type]) { flex:1 1 220px; min-width:0; }
.row select { flex:0 0 auto; min-width:130px; }
.between { justify-content:space-between; }
.stack { display:flex; flex-direction:column; gap:12px; } .stack > label, .stack > .row, .stack > p { margin:0; }

.banner { padding:12px 16px; border-radius:12px; margin:12px 0; font-weight:500; font-size:.9rem; }
.banner.warn { background:var(--warn-soft); color:var(--warn); border:1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.banner.err { background:var(--err-soft); color:var(--err); border:1px solid color-mix(in srgb, var(--err) 30%, transparent); }

/* Status pills: tinted background + dot */
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:600;
  background:var(--off-soft); color:var(--muted); white-space:nowrap; }
.pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.pill[data-state=live] { background:var(--ok-soft); color:var(--ok); }
.pill[data-state=live]::before { animation:pulse 1.6s ease-out infinite; }
.pill[data-state=error] { background:var(--err-soft); color:var(--err); }
.pill[data-state=connecting], .pill[data-state=waiting], .pill.warn { background:var(--warn-soft); color:var(--warn); }
.pill[data-state=off] { background:var(--off-soft); color:var(--muted); }
@keyframes pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 100% { box-shadow:0 0 0 7px transparent; } }

/* Ingest */
.ingest-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:20px; margin-top:16px; }
.preview { background:#000; border-radius:12px; position:relative; aspect-ratio:16/9; overflow:hidden; }
.preview video { width:100%; height:100%; object-fit:contain; display:block; }
.preview-msg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; margin:0; padding:8px; text-align:center; color:#8d8d99; }
.preview [data-unmute] { position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,.6); color:#fff; backdrop-filter:blur(6px); }
.details { display:grid; grid-template-columns:auto 1fr; gap:0 16px; margin:0; font-size:.9rem; align-content:start; }
.details dt, .details dd { padding:7px 0; border-bottom:1px solid var(--line); }
.details dt { color:var(--muted); } .details dd { margin:0; font-variant-numeric:tabular-nums; font-weight:500; }
.details dt:last-of-type, .details dd:last-of-type { border-bottom:0; }
.setup { margin-top:16px; border-top:1px solid var(--line); padding-top:12px; }
.setup summary { cursor:pointer; font-weight:600; font-size:.9rem; list-style:none; display:flex; align-items:center; gap:8px; }
.setup summary::before { content:"›"; display:inline-block; transition:transform .15s; color:var(--muted); font-size:1.1rem; }
.setup[open] summary::before { transform:rotate(90deg); }
.copy-row { display:grid; grid-template-columns:120px 1fr auto; gap:10px; align-items:center; padding:6px 0; }
.copy-row code { overflow-wrap:anywhere; background:var(--bg); border:1px solid var(--line); padding:6px 10px; border-radius:8px; }

/* Destinations */
.dests { list-style:none; padding:0; margin:12px 0 0; }
.dest { display:flex; gap:12px; align-items:center; padding:14px 4px; border-top:1px solid var(--line); flex-wrap:wrap; }
.dest:first-child { border-top:0; }
.dest-main { flex:1; min-width:160px; } .dest-main strong { display:block; font-weight:600; }
.dest-err { color:var(--err); font-size:.82rem; overflow-wrap:anywhere; margin-top:2px; }
.dest [data-bitrate] { min-width:64px; text-align:right; font-variant-numeric:tabular-nums; }
.dest form { margin:0; }
.badge { display:inline-flex; align-items:center; justify-content:center; min-width:84px; padding:4px 8px; border-radius:8px;
  font-size:.72rem; font-weight:600; letter-spacing:.02em; background:var(--off-soft); color:var(--ink); }
.badge[data-preset=youtube] { background:#ff0033; color:#fff; } .badge[data-preset=facebook] { background:#0866ff; color:#fff; }
.badge[data-preset=vimeo] { background:#17d5ff; color:#0b2733; } .badge[data-preset=twitch] { background:#9146ff; color:#fff; }

/* On/off switch (the button keeps its text for screen readers) */
.toggle { position:relative; width:44px; height:26px; padding:0; border-radius:999px; border:0; background:var(--field-line); font-size:0; flex:none; }
.toggle::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s; }
.toggle[aria-pressed=true] { background:var(--ok); }
.toggle[aria-pressed=true]::after { transform:translateX(18px); }

dialog { border:1px solid var(--line); border-radius:var(--radius); max-width:460px; width:calc(100% - 32px); padding:24px;
  background:var(--card); color:var(--ink); box-shadow:0 24px 60px rgba(0,0,0,.25); }
dialog::backdrop { background:rgba(10,8,12,.55); backdrop-filter:blur(2px); }
dialog .row { justify-content:flex-end; margin-top:16px; }

table { width:100%; border-collapse:collapse; font-size:.9rem; }
th { text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:8px 6px; }
td { padding:12px 8px; border-top:1px solid var(--line); vertical-align:middle; }
tr:first-child td { border-top:0; }
td form { display:inline-flex; gap:8px; align-items:center; margin:0; }
td:last-child { text-align:right; white-space:nowrap; }
td:last-child form + form { margin-left:4px; }

@media (max-width:720px) {
  main { padding:16px; } .top { padding:10px 16px; } .brand .wordmark { height:16px; }
  .ingest-grid { grid-template-columns:1fr; } .copy-row { grid-template-columns:1fr auto; } .copy-row .muted { grid-column:1/-1; }
  /* phone: row 1 = service, name, switch; row 2 = status, bitrate, edit, remove */
  .dest { display:grid; grid-template-columns:auto auto 1fr auto auto; gap:8px; }
  .dest .badge { min-width:0; grid-area:1/1; } .dest-main { min-width:0; grid-area:1/2/2/5; }
  .dest > form:first-of-type { grid-area:1/5; }
  .dest [data-status] { grid-area:2/1; justify-self:start; } .dest [data-bitrate] { grid-area:2/2; min-width:0; text-align:left; }
  .dest > [data-edit] { grid-area:2/4; } .dest > form:nth-of-type(2) { grid-area:2/5; }
}
[hidden] { display:none !important; }

.pill[data-state=unknown] { background:var(--off-soft); color:var(--muted); }
.chan-tabs { display:flex; gap:6px; flex-wrap:wrap; margin:12px 0 0; }
.chan-tabs a { padding:6px 14px; border-radius:999px; border:1px solid var(--line); text-decoration:none; color:var(--muted); font-weight:500; background:var(--card); }
.chan-tabs a[aria-current=page] { color:var(--ink); border-color:var(--muted); }
label .err { display:block; font-weight:400; margin-top:4px; }

/* Split-screen entry pages (matches the original control.streamworks.video sign-in) */
.auth { display:flex; min-height:100vh; background:var(--card); }
.auth-side { flex:0 0 40%; background:var(--brand); display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-side img { width:min(100%, 354px); height:auto; display:block; }
.auth-main { flex:1; display:flex; align-items:center; justify-content:center; padding:32px 24px; }
.auth-form { width:100%; max-width:300px; }
.auth-form h1 { text-align:center; font-size:1.5rem; font-weight:700; color:var(--ink); margin:0 0 20px; }
.auth-form label { color:#080658; font-weight:400; font-size:.9rem; margin:14px 0 0; }
@media (prefers-color-scheme: dark) { .auth-form label { color:var(--muted); } }
.auth-form input { margin-top:4px; padding:9px 10px; border:1px solid #b1b1b1; border-radius:3px; }
.auth-form button.wide { width:100%; margin-top:20px; padding:10px; background:var(--brand); border:0; border-radius:5px; color:#fff; font-weight:500; box-shadow:#838383 1px 2px 5px 0; }
.auth-form button.wide:hover { background:var(--brand-2); }
.auth-form .muted { margin-top:16px; text-align:center; } .auth-form .center, .center { text-align:center; }
.pw { position:relative; display:block; } .pw input { padding-right:40px; }
.pw-toggle { position:absolute; right:4px; top:50%; transform:translateY(-35%); border:0; background:none; padding:6px; color:#b1b1b1; cursor:pointer; }
.pw-toggle:hover { color:var(--muted); }
@media (max-width:720px) { .auth { flex-direction:column; } .auth-side { flex:0 0 auto; padding:28px 24px; } .auth-side img { width:min(70%, 260px); } .auth-main { align-items:flex-start; } }
.pull-h { margin:16px 0 4px; font-size:1rem; }
.setup-body[data-mode="url-us"] [data-show="fields"], .setup-body[data-mode="fields"] [data-show="url-us"] { display:none; }
.enc-pick { max-width:360px; }

/* Admin org settings */
.settings { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px; align-items:end; }
.setting > .muted { display:block; margin-bottom:6px; font-weight:500; }
.setting .row { flex-wrap:nowrap; } .setting .row select { flex:1 1 auto; min-width:0; }
.setting.end { display:flex; justify-content:flex-end; }

/* Node list */
.card details { padding:12px 0; border-top:1px solid var(--line); } .card details:first-of-type { border-top:0; padding-top:0; }
.card details > summary { cursor:pointer; display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.card details > form, .card details > .row { margin-top:14px; }
.card details form.stack { max-width:420px; }

/* Two-column forms (collapse on phones) */
.grid2 { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 18px; }
.grid2 > label { margin:0; } .grid2 > button, .grid2 > p, .grid2 > .span { grid-column:1 / -1; margin:0; }
.grid2 > button { justify-self:start; }
@media (max-width:720px) { .grid2 { grid-template-columns:1fr; } }
.subnav { margin:0 0 8px; }
.card > h2 { margin-bottom:10px; }
td form.grow { display:flex; width:100%; } td form.grow input { flex:1 1 auto; max-width:320px; }
.dest .pill { min-width:92px; justify-content:center; }
.dest [data-bitrate] { min-width:76px; }
@media (max-width:720px) { .dest .pill { min-width:0; } }
@media (max-width:480px) {
  .top { padding:10px 12px; gap:6px; } .top nav { gap:0; } .top nav a, .top nav button { padding:6px 8px; font-size:.82rem; }
  .brand .wordmark { height:14px; }
}
html, body { overflow-x:hidden; }
/* Phones: tables become stacked rows so actions never get cut off */
@media (max-width:720px) {
  .card table, .card tbody { display:block; width:100%; }
  .card tr { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:12px 0; border-top:1px solid var(--line); }
  .card tr:first-child { border-top:0; }
  .card td { display:block; border:0; padding:0; text-align:left; white-space:normal; }
  .card td:first-child { flex:1 1 100%; }
  .card td:last-child { margin-left:auto; white-space:nowrap; }
  /* data tables keep their columns and scroll sideways instead */
  .card table.usage { display:table; width:max-content; min-width:100%; }
  .card table.usage tbody { display:table-row-group; }
  .card table.usage tr { display:table-row; padding:0; border-top:0; }
  .card table.usage td { display:table-cell; padding:8px 10px; white-space:nowrap; }
  .card table.usage td:last-child { margin-left:0; }
  td form.grow { width:auto; flex:1 1 auto; } td form.grow input { max-width:none; }
}
td form.grow { flex-wrap:nowrap; } td form.grow input { flex:1 1 0; min-width:0; }

.badge[data-preset=srtpull] { background:var(--brand); color:#fff; }
.pull-actions { display:flex; flex-wrap:wrap; gap:2px 6px; margin-top:4px; margin-left:-10px; }
.pull-actions form { display:inline-flex; margin:0; }
.dest-spacer { flex:0 0 133px; } @media (max-width:720px) { .dest-spacer { display:none; } }

/* Admin: node health */
.node .tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin-top:16px; }
.tile { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.tile strong { font-size:1.05rem; font-variant-numeric:tabular-nums; font-weight:600; }
.capbar { position:relative; margin-top:14px; height:26px; background:var(--off-soft); border-radius:8px; overflow:hidden; }
.capfill { height:100%; width:0; background:var(--ok); transition:width .4s; } .capfill[data-level=warn] { background:var(--warn); } .capfill[data-level=err] { background:var(--err); }
.capbar .muted { position:absolute; inset:0; display:flex; align-items:center; padding:0 10px; color:var(--ink); }
.sparks { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin-top:16px; }
.sparks > div { display:flex; flex-direction:column; gap:4px; } .spark { color:var(--brand-2); width:100%; height:40px; background:var(--bg); border-radius:8px; }
.node-settings { margin-top:14px; border-top:1px solid var(--line); padding-top:12px; } .node-settings summary { cursor:pointer; font-weight:600; font-size:.9rem; }
.node-settings form { margin-top:12px; }
table.usage th:not(:first-child), table.usage td:not(:first-child) { text-align:right; font-variant-numeric:tabular-nums; }

/* Stream health */
.health { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.hints { margin:8px 0 0; padding-left:18px; color:var(--ink); font-size:.88rem; } .hints:empty { display:none; } .hints li { margin:2px 0; }
.sparks.small { margin-top:12px; } .sparks.small .spark { height:36px; } .sparks b { font-weight:600; color:var(--ink); margin-left:4px; }
.dest-meta:empty { display:none; }
.preview-col { min-width:0; } .track-pick { display:block; max-width:300px; margin:12px 0 0; }
.badge[data-preset=hls] { background:#0b6b5c; color:#fff; } .pull-actions a.link { padding:4px 10px; text-decoration:none; color:var(--muted); border-radius:8px; } .pull-actions a.link:hover { background:var(--off-soft); color:var(--ink); }

.scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.usage th, table.usage td { white-space:nowrap; padding-right:16px; }
table.usage th:first-child, table.usage td:first-child { white-space:normal; }

/* checkboxes are not text fields: inline, natural size */
input[type=checkbox] { display:inline-block; width:auto; height:auto; margin:0 8px 0 0; accent-color:var(--brand); vertical-align:middle; }
label.check, .row label { display:inline-flex; align-items:center; }
/* audio track names and caption tracks: aligned grids instead of wrapping rows */
.name-row { display:grid; grid-template-columns:64px minmax(0,1fr) 90px; gap:8px; align-items:center; }
.name-row input { width:100%; min-width:0; flex:none; }
.cap-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.cap-row > span { flex:0 0 64px; }
.cap-row select { flex:0 0 200px; width:200px; min-width:0; }
.cap-row select[name^=script] { flex-basis:130px; width:130px; }
.cap-row input { flex:1 1 220px; width:auto; min-width:0; }
li.dest:has(details[open]) { align-items:flex-start; }
.audio-names summary { cursor:pointer; margin-top:6px; }

/* audience page */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.stat { display:flex; flex-direction:column; gap:2px; } .stat strong { font-size:1.6rem; font-variant-numeric:tabular-nums; } .stat .small { font-size:.75rem; }
.bar-row { display:grid; grid-template-columns:minmax(80px,140px) 1fr 40px; gap:8px; align-items:center; margin:6px 0; font-size:.9rem; }
.bar-row .bar { height:10px; border-radius:5px; background:var(--brand-2); display:block; } .bar-row b { text-align:right; font-variant-numeric:tabular-nums; }

/* EBU R128 meters */
.meters { margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
.meter { display:grid; grid-template-columns:64px minmax(120px,1fr) minmax(0,2fr); gap:10px; align-items:center; margin:8px 0; font-size:.82rem; }
.mbar { position:relative; height:14px; border-radius:7px; background:var(--off-soft); overflow:hidden; }
.mfill { position:absolute; inset:0 auto 0 0; background:var(--ok, #2f9e5b); transition:width .1s linear; }
.mhold { position:absolute; top:0; bottom:0; width:2px; background:#fff; mix-blend-mode:difference; transition:left .25s linear; }
.mtarget { position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--ink); opacity:.55; }
.mnum { font-variant-numeric:tabular-nums; color:var(--muted); }
.meter[data-state=warn] .mfill { background:#e0a31a; } .meter[data-state=bad] .mfill, .meter[data-state=clip] .mfill { background:var(--err, #c4372b); }
.meter[data-state=quiet] .mfill, .meter[data-state=silent] .mfill { background:#9aa0a6; }
.meter[data-state=clip] .mnum, .meter[data-state=silent] .mnum { color:var(--err, #c4372b); font-weight:600; }
@media (max-width:720px) { .meter { grid-template-columns:56px 1fr; } .mnum { grid-column:1 / -1; } }

/* help */
.help { display:grid; grid-template-columns:240px minmax(0,1fr); gap:32px; align-items:start; }
.help-nav { position:sticky; top:16px; font-size:.9rem; }
.help-nav h2 { margin:18px 0 6px; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.help-nav ul { list-style:none; margin:0; padding:0; } .help-nav li a { display:block; padding:5px 10px; border-radius:8px; color:var(--ink); text-decoration:none; }
.help-nav li a:hover { background:var(--off-soft); } .help-nav li a[aria-current=page] { background:var(--brand-soft); color:var(--brand); font-weight:600; }
.help-nav input[type=search] { width:100%; }
.help-main { min-width:0; max-width:820px; } .lede { font-size:1.05rem; color:var(--muted); margin-top:0; }
.help-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.help-card { display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit; margin:0; } .help-card:hover { border-color:var(--brand-2); }
.help-hit h3 { margin:16px 0 4px; } .help-hit p { margin:0; color:var(--muted); } mark { background:#fff1a8; color:#16161b; border-radius:3px; padding:0 2px; }
.prose { line-height:1.65; } .prose h2 { margin:32px 0 8px; padding-top:8px; border-top:1px solid var(--line); } .prose h3 { margin:22px 0 6px; }
.prose p, .prose ul, .prose ol { margin:10px 0; } .prose li { margin:4px 0; }
.prose code { font-family:"JetBrains Mono",monospace; font-size:.85em; background:var(--off-soft); padding:1px 5px; border-radius:5px; }
.prose pre { background:var(--off-soft); padding:12px 14px; border-radius:10px; overflow-x:auto; } .prose pre code { background:none; padding:0; }
.prose table { width:100%; border-collapse:collapse; margin:14px 0; font-size:.9rem; display:block; overflow-x:auto; } .prose th, .prose td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.prose blockquote { margin:14px 0; padding:8px 14px; border-left:3px solid var(--brand-2); background:var(--brand-soft); border-radius:0 8px 8px 0; }
.help-pager { display:flex; justify-content:space-between; gap:12px; margin:40px 0 20px; padding-top:16px; border-top:1px solid var(--line); }
@media (max-width:860px) { .help { grid-template-columns:1fr; } .help-nav { position:static; } }
.help-link { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; margin-left:6px; border:1px solid var(--line); border-radius:50%; font-size:.7rem; font-weight:600; color:var(--muted); text-decoration:none; vertical-align:middle; }
.help-link:hover { color:var(--brand); border-color:var(--brand-2); }