/* Off-Brand Stream Tools - app UI. Dark theme, green accent. No inline styles anywhere (strict CSP). */
:root {
  color-scheme: dark;
  /* Off-Brand palette: near-black indigo surfaces, purple primary, red for LIVE/alerts, amber for tips/highlights */
  --bg:#0b0a13; --bg-2:#100e1b; --panel:#151324; --panel-2:#1c192e; --field:#0f0d19; --line:#28243d; --line-2:#383252;
  --text:#eeedf6; --muted:#a39fbb; --faint:#7a7593;
  --accent:#8b5cf6; --accent-2:#7c3aed; --accent-text:#b9a3ff; --accent-ink:#ffffff; --accent-soft:rgba(139,92,246,.14); --accent-line:rgba(139,92,246,.4);
  --red:#ef4444; --red-2:#dc2626; --amber:#f59e0b; --amber-text:#fbbf24;
  --grad:linear-gradient(135deg, #7c3aed 0%, #a333c8 55%, #dc2626 100%);
  --warn:#fbbf24; --warn-soft:rgba(245,158,11,.14); --err:#f87171; --err-soft:rgba(239,68,68,.14); --info:#7aa7ff;
  --r-sm:8px; --r:12px; --r-lg:16px;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.32);
  --shadow-lg:0 18px 48px rgba(0,0,0,.55);
  --font: Inter, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --nav-w:248px;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.55 var(--font); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background-image: radial-gradient(1200px 600px at 80% -10%, rgba(139,92,246,.05), transparent 60%); background-attachment:fixed; }
a { color:var(--accent-text); text-decoration:none; } a:hover { text-decoration:underline; text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
.skip { position:absolute; left:-9999px; top:8px; z-index:100; background:var(--accent); color:var(--accent-ink); padding:8px 14px; border-radius:var(--r-sm); font-weight:700; }
.skip:focus { left:12px; }
::selection { background:rgba(139,92,246,.3); }

/* ---------- app shell: sidebar (desktop) ---------- */
header.site { position:fixed; inset:0 auto 0 0; width:var(--nav-w); display:flex; flex-direction:column; background:linear-gradient(180deg,#10141c,#0c0f15);
  border-right:1px solid var(--line); z-index:40; }
header.site .bar { display:flex; align-items:center; gap:10px; padding:18px 18px 14px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--text); font-weight:700; letter-spacing:-.01em; font-size:15px; line-height:1.15; min-width:0; }
.brand:hover { text-decoration:none; }
.brand-mark { flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; color:var(--accent-ink);
  background:var(--grad); box-shadow:0 6px 18px rgba(139,92,246,.25); }
.brand-name b { color:var(--accent); font-weight:800; display:block; }
header.site .here, header.site .menu-btn { display:none; }
.site-nav { flex:1; display:flex; flex-direction:column; gap:18px; padding:8px 12px 12px; overflow-y:auto; }
.nav-group { display:flex; flex-direction:column; gap:2px; }
.nav-title { font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); padding:0 12px 6px; }
.site-nav a { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:10px; color:var(--muted); font-weight:550; font-size:14.5px;
  transition:background .15s, color .15s; position:relative; }
.site-nav a:hover { background:var(--panel-2); color:var(--text); text-decoration:none; }
.site-nav a.on { background:var(--accent-soft); color:var(--text); }
.site-nav a.on::before { content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
.site-nav a .ico { flex:none; opacity:.85; } .site-nav a.on .ico { color:var(--accent); opacity:1; }
.nav-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 8px 4px; border-top:1px solid var(--line); }
.who { display:flex; align-items:center; gap:8px; min-width:0; color:var(--text); font-weight:600; font-size:14px; }
.who-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatar { flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--panel-2); border:1px solid var(--line-2); color:var(--accent); font-weight:800; font-size:13px; }
body.has-nav main { margin-left:var(--nav-w); }
/* logged out: slim top bar */
header.site.anon { position:sticky; inset:auto; top:0; width:auto; flex-direction:row; border-right:0; border-bottom:1px solid var(--line); background:rgba(11,13,18,.85); backdrop-filter:blur(10px); }
header.site.anon .bar { width:100%; max-width:1100px; margin:0 auto; padding:12px 20px; justify-content:space-between; }
.anon-nav { display:flex; align-items:center; gap:14px; } .anon-nav a { color:var(--muted); font-weight:600; } .anon-nav a.btn { color:var(--accent-ink); margin:0; }

/* ---------- content ---------- */
main { max-width:980px; margin:0 auto; padding:28px 28px 72px; }
body.has-nav main { margin-right:auto; margin-left:max(var(--nav-w), calc(var(--nav-w) + (100vw - var(--nav-w) - 980px) / 2)); }
main.wide { max-width:1440px; }
body.has-nav main.wide { margin-left:var(--nav-w); max-width:none; padding-left:32px; padding-right:32px; }
h1, h2, h3 { letter-spacing:-.015em; line-height:1.25; }
h1 { margin:0 0 6px; font-size:26px; font-weight:750; } h2 { margin:0 0 12px; font-size:17px; font-weight:700; } h3 { margin:18px 0 8px; font-size:14.5px; font-weight:700; color:#d7deea; }
p { margin:8px 0; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 20px; }
.page-head p.muted { margin:4px 0 0; max-width:70ch; }
.page-head .btn { margin:0; }
.card { background:linear-gradient(180deg,var(--panel),#121620); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px; margin:0 0 18px; box-shadow:var(--shadow); min-width:0; }
.card .card { background:var(--bg-2); box-shadow:none; border-radius:var(--r); }
.card.narrow { max-width:420px; margin:56px auto; padding:28px; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.card-head h2 { margin:0; } .card-head .btn { margin:0; }
label { display:block; margin-top:14px; font-size:13.5px; font-weight:600; color:#cfd6e3; }
label small, .muted { color:var(--muted); font-size:13px; font-weight:400; display:block; }
label small { margin-top:5px; }
p.muted { margin:10px 0 0; }
.muted.inline { display:inline; }
code { font-family:var(--mono); font-size:.88em; background:var(--field); border:1px solid var(--line); padding:1px 6px; border-radius:6px; word-break:break-all; }

/* ---------- form controls ---------- */
input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], input[type=url], input:not([type]), select, textarea {
  width:100%; padding:10px 12px; margin-top:6px; background:var(--field); color:var(--text); border:1px solid var(--line-2); border-radius:10px; font:inherit; font-size:14.5px;
  transition:border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color:var(--faint); }
input:hover, select:hover, textarea:hover { border-color:#3e4759; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft); }
input[readonly] { color:#c9d1de; background:#0c0f14; }
select { appearance:none; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a0b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:16px; }
textarea { resize:vertical; }
input[type=color] { width:100%; height:42px; padding:4px; margin-top:6px; background:var(--field); border:1px solid var(--line-2); border-radius:10px; cursor:pointer; }
input[type=file] { margin-top:8px; color:var(--muted); font-size:13px; }
input[type=file]::file-selector-button { font:inherit; font-weight:600; margin-right:10px; padding:7px 12px; border-radius:8px; border:1px solid var(--line-2); background:var(--panel-2); color:var(--text); cursor:pointer; }
input[type=range] { width:100%; accent-color:var(--accent); }
input[type=radio] { accent-color:var(--accent); width:16px; height:16px; margin:0 8px 0 0; }
/* toggles: every checkbox is a switch */
.check, .switch { display:flex; align-items:center; gap:10px; font-weight:500; color:var(--text); cursor:pointer; }
.switch { margin-top:12px; }
.check input[type=checkbox], .switch input[type=checkbox], input[type=checkbox] {
  appearance:none; flex:none; width:38px; height:22px; margin:0; border-radius:999px; background:#2a3140; border:1px solid var(--line-2); position:relative; cursor:pointer; transition:background .18s, border-color .18s; }
input[type=checkbox]::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#c7cfdc; box-shadow:0 1px 3px rgba(0,0,0,.4); transition:transform .18s, background .18s; }
input[type=checkbox]:checked { background:var(--accent); border-color:var(--accent); }
input[type=checkbox]:checked::after { transform:translateX(16px); background:#fff; }
input[type=checkbox]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
input[type=checkbox]:disabled { opacity:.5; cursor:not-allowed; }
.switch .track { display:none; }

/* buttons */
button, .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; padding:10px 18px; font:inherit; font-size:14px; font-weight:650; line-height:1.2;
  background:linear-gradient(180deg,#a78bfa,var(--accent)); color:var(--accent-ink); border:1px solid rgba(0,0,0,.2); border-radius:10px; cursor:pointer; text-decoration:none;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px rgba(139,92,246,.16); transition:filter .15s, transform .05s, background .15s, box-shadow .15s; }
button:hover, .btn:hover { filter:brightness(1.06); text-decoration:none; }
button:active, .btn:active { transform:translateY(1px); }
button.secondary, .btn.secondary { background:var(--panel-2); color:var(--text); border:1px solid var(--line-2); box-shadow:none; }
button.secondary:hover, .btn.secondary:hover { background:#222838; border-color:#3e4759; filter:none; }
button.ghost, .btn.ghost { background:transparent; color:var(--muted); border:1px solid transparent; box-shadow:none; }
button.ghost:hover, .btn.ghost:hover { background:var(--panel-2); color:var(--text); filter:none; }
button.danger, .btn.danger { background:rgba(255,107,107,.1); color:#ff9a9a; border:1px solid rgba(255,107,107,.35); box-shadow:none; }
button.danger:hover { background:rgba(255,107,107,.18); filter:none; }
button[disabled], button[disabled]:hover { opacity:.45; cursor:not-allowed; filter:none; transform:none; }
button.link { background:none; border:0; box-shadow:none; color:var(--accent); padding:0; margin:0; font-weight:500; }
button.small, .btn.small { padding:6px 12px; font-size:13px; margin-top:8px; border-radius:8px; }
.nav-foot button.small { margin:0; white-space:nowrap; flex:none; }
form.inline { display:inline; margin:0; }
.row { display:flex; gap:8px; align-items:center; } .row input { flex:1; min-width:0; } .row button, .row .btn { margin-top:6px; flex:none; }
.row.wrap { flex-wrap:wrap; }

/* status bits */
.flash { padding:12px 16px; border-radius:var(--r); margin:0 0 18px; border:1px solid var(--line); background:var(--panel); }
.flash.ok { border-color:var(--accent-line); background:linear-gradient(90deg,rgba(139,92,246,.12),rgba(139,92,246,.04)); }
.flash.err { border-color:rgba(255,107,107,.4); background:var(--err-soft); color:#ffd3d3; }
.notice { border:1px solid var(--line-2); border-radius:var(--r); padding:12px 14px; background:var(--bg-2); margin:6px 0 4px; }
.notice.warn { border-color:rgba(255,207,74,.35); background:var(--warn-soft); }
.notice.ok { border-color:rgba(139,92,246,.35); background:rgba(139,92,246,.08); color:#ddd3ff; }
.notice.err { border-color:rgba(255,107,107,.4); background:var(--err-soft); color:#ffc9c9; }
.rumble-note { font-size:13.5px; line-height:1.45; }
.notice b { display:block; color:#ffe08a; } .notice p { margin:4px 0 0; color:#d8cfae; font-size:13.5px; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:650; background:#232a38; color:#c5cdda; border:1px solid var(--line-2); white-space:nowrap; }
.pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.8; }
.pill.ok { background:rgba(139,92,246,.12); color:#c4b5fd; border-color:rgba(139,92,246,.3); }
.pill.warn { background:var(--warn-soft); color:var(--warn); border-color:rgba(255,207,74,.3); }
.pill.err { background:var(--err-soft); color:#ff8f8f; border-color:rgba(255,107,107,.3); }
.pill.soon { color:var(--muted); }
span.err { color:#ff8a8a; }
.secret-hint { font-family:var(--mono); color:var(--muted); font-size:13px; }
.accent { color:var(--accent); }
.muted.inline.ok { color:var(--accent); } .muted.inline.warn { color:var(--warn); }
details.help { margin:.5rem 0 .9rem; } details.help summary { cursor:pointer; color:#cfd6e3; font-weight:600; font-size:13.5px; }

/* tables */
table { width:100%; border-collapse:separate; border-spacing:0; }
th { text-align:left; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); padding:8px 10px; border-bottom:1px solid var(--line); }
td { text-align:left; padding:10px; border-bottom:1px solid var(--line); font-size:14px; }
tbody tr:hover td { background:rgba(255,255,255,.015); }
tbody tr:last-child td { border-bottom:0; }

/* grids */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.grid2 { display:grid; grid-template-columns:2fr 1fr; gap:12px; align-items:end; }
.grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; align-items:end; }
.grid4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; align-items:end; }
.cards3 .card { margin:0; }

/* media / rules / giphy */
.media-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:8px 0 12px; padding:12px; border:1px dashed var(--line-2); border-radius:var(--r); background:var(--bg-2); }
.media-preview img, img.thumb { max-height:80px; max-width:240px; border-radius:8px; display:block; }
.media-preview.avatar img { width:80px; height:80px; object-fit:cover; border-radius:50%; }
table.rules td { vertical-align:top; } table.rules tr.disabled { opacity:.5; } td.actions { white-space:nowrap; text-align:right; }
td.actions form, td.actions button, td.actions .btn { margin:0 0 0 6px; }
.radios { display:flex; gap:20px; flex-wrap:wrap; } .radios .check { margin-top:10px; }
.stats .card { margin:0; } .stat .big, .card .big { font-size:26px; font-weight:800; color:var(--accent); letter-spacing:-.02em; }
ul.bysource { list-style:none; padding:0; margin:8px 0 0; font-size:13px; } ul.bysource li { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding:4px 0; }
svg.chart { width:100%; height:auto; } svg.chart .bar { fill:var(--accent); } svg.chart .axis { fill:var(--muted); font-size:11px; } svg.chart .grid { stroke:var(--line); stroke-width:1; }
.giphy-picker { margin-top:10px; } .gp-panel { border:1px solid var(--line); border-radius:var(--r); padding:10px; margin-top:8px; background:var(--bg-2); }
.gp-bar { display:flex; gap:6px; } .gp-bar input { flex:1; margin:0; } .gp-bar select { width:auto; margin:0; }
.gp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:6px; max-height:300px; overflow:auto; margin-top:8px; }
.gp-item { margin:0; padding:0; background:var(--field); border-radius:8px; overflow:hidden; border:0; box-shadow:none; } .gp-item img { width:100%; height:96px; object-fit:cover; display:block; }
.gp-attr { font-size:12px; font-weight:700; color:var(--muted); text-align:right; margin-top:6px; letter-spacing:.03em; }
.gp-selected img { max-height:120px; border-radius:8px; display:block; margin-top:8px; }
progress.meter { width:100%; max-width:420px; height:10px; accent-color:var(--accent); }
table.media-lib td { vertical-align:middle; }
table.media-lib .thumb, .media-row video.thumb { max-width:160px; max-height:90px; border-radius:8px; background:#000; }
.inline-label { display:inline-flex; gap:.5rem; align-items:center; margin:0 .5rem .4rem 0; }
.inline-label select { max-width:260px; margin:0; }
p.small { font-size:.85rem; }

/* ---------- Alerts tab ---------- */
.alerts-top { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start; }
.alerts-top .card { margin:0 0 18px; }
ul.types { list-style:none; margin:4px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px; }
.type-row { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"main test" "state state"; gap:10px 12px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2); }
.type-main { grid-area:main; min-width:0; } .type-main b { display:block; font-size:15px; }
.type-state { grid-area:state; } .type-state .switch { margin:0; font-size:13.5px; color:#cfd6e3; }
.type-row [data-test-alert] { grid-area:test; margin:0; }
#types-form button { margin-top:14px; }

/* ---------- onboarding checklist ---------- */
.onboarding h2 small { font-weight:normal; font-size:.8em; }
.checklist { list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.75rem; }
.checklist li { display:flex; gap:.75rem; align-items:flex-start; }
.checklist .tick { flex:none; width:1.8rem; height:1.8rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:bold; border:2px solid var(--accent); color:var(--accent); }
.checklist li.done .tick { background:var(--accent); color:var(--accent-ink); }
.checklist li.done b a { color:inherit; }
.checklist li > div { flex:1; min-width:0; }
.checklist .row { margin:.2rem 0 .4rem; }

/* ---------- chat TTS controls + link catcher ---------- */
.tts-controls input[type=range] { width:100%; }
.tts-controls output { font-weight:600; margin-left:.3em; color:var(--accent); }
.tts-controls #tts-toggle { min-width:7.5em; }
.tts-controls .row { gap:.5em; align-items:center; }
.link-actions button, .link-actions .btn, .tts-controls button { margin-top:0; }
ul.links { list-style:none; padding:0; margin:.5em 0; }
.link-item { border-bottom:1px solid var(--line); padding:.65em 0; display:grid; gap:.25em; }
.link-item:last-child { border-bottom:0; }
.link-item.new { animation:linkflash 1.5s ease-out; }
@keyframes linkflash { from { background:rgba(139,92,246,.15); } to { background:transparent; } }
.link-main { overflow-wrap:anywhere; } .link-domain { margin-right:.4em; }
.link-url { font-family:var(--mono); font-size:.85em; opacity:.85; }
.link-actions { display:flex; gap:.4em; align-items:center; flex-wrap:wrap; }

/* ---------- dashboard command center ---------- */
.pfilter, .periods { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 14px; }
.pfilter a, .periods a { display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px; border:1px solid var(--line-2); color:var(--muted); text-decoration:none; font-size:13px; font-weight:600; background:var(--bg-2); transition:all .15s; }
.pfilter a:hover, .periods a:hover { color:var(--text); border-color:#3e4759; text-decoration:none; }
.pfilter a.on, .periods a.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.periods { margin:0; padding:3px; border:1px solid var(--line); border-radius:999px; background:var(--bg-2); gap:2px; }
.periods a { border:0; background:transparent; }
.dash { display:grid; gap:18px; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.9fr);
  grid-template-areas: "onb onb onb" "stats stats stats" "pv pv ovc" "live events tools"; align-items:start; }
.dash > .dash-onboarding { grid-area:onb; } .dash > .dash-stats { grid-area:stats; } .dash > .dash-live { grid-area:live; }
.dash > .dash-events { grid-area:events; } .dash > .dash-tools { grid-area:tools; }
.dash .card { margin:0 0 18px; } .dash .dash-stats { margin:0; } .dash-col > .card:last-child { margin-bottom:0; }
.dash-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.dash-head h1 { margin:0; }
.dash-tabs { display:none; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.tile { background:linear-gradient(180deg,#151a24,#10141c); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; display:flex; flex-direction:column; gap:2px; min-width:0; position:relative; overflow:hidden; }
.tile::after { content:""; position:absolute; inset:auto -20px -30px auto; width:80px; height:80px; border-radius:50%; background:radial-gradient(circle,rgba(139,92,246,.10),transparent 70%); }
.tile-label { color:var(--muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; font-weight:700; }
.tile-val { font-size:26px; font-weight:800; color:var(--text); line-height:1.2; overflow-wrap:anywhere; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.tile:first-child .tile-val { color:var(--accent); }
.table-scroll { overflow-x:auto; margin-top:14px; border:1px solid var(--line); border-radius:var(--r); }
table.breakdown td, table.breakdown th { white-space:nowrap; }
.dash-chat.chat-log { height:62vh; min-height:320px; max-height:720px; }
.chat-log .ts { color:var(--muted); font-size:11px; margin-right:6px; font-variant-numeric:tabular-nums; }
.viewer-strip { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; min-height:26px; }
.vchip { display:inline-flex; align-items:center; gap:2px; padding:3px 10px; border-radius:999px; background:var(--bg-2); border:1px solid var(--line-2); font-size:13px; }
.vchip.live { border-color:var(--accent-line); } .vchip.live b { color:#e5484d; } .vchip.na { opacity:.55; filter:grayscale(1); } .vchip.total b { color:var(--accent); }
ul.events { list-style:none; margin:0; padding:0; max-height:62vh; overflow-y:auto; }
li.ev { display:flex; gap:10px; align-items:flex-start; padding:10px 4px; border-bottom:1px solid var(--line); }
li.ev:last-child { border-bottom:0; }
li.ev.new { animation:linkflash 1.5s ease-out; }
li.ev .pi { margin-top:3px; }
.ev-main { flex:1; min-width:0; } .ev-msg { overflow-wrap:anywhere; font-size:14px; color:#d3dae6; }
.ev-amt { color:var(--accent); } .ev-type { font-size:11px; }
.ev-type::before { display:none; }
li.ev-follow .ev-type { background:rgba(106,168,255,.14); color:#9cc4ff; border-color:rgba(106,168,255,.3); }
li.ev-sub .ev-type, li.ev-gift_sub .ev-type { background:rgba(170,120,255,.14); color:#c7a8ff; border-color:rgba(170,120,255,.3); }
li.ev-kicks .ev-type { background:rgba(83,252,24,.12); color:#8dff63; border-color:rgba(83,252,24,.3); }
li.ev-rant .ev-type { background:rgba(255,160,70,.14); color:#ffbf85; border-color:rgba(255,160,70,.3); }
li.ev .ev-replay { margin:0; flex:none; }
ul.viewers, ul.conns { list-style:none; margin:0; padding:0; }
ul.viewers li { display:flex; align-items:center; gap:4px; padding:8px 0; border-bottom:1px solid var(--line); }
ul.viewers li:last-child, ul.conns li:last-child { border-bottom:0; }
ul.viewers li b { margin-left:auto; font-variant-numeric:tabular-nums; }
ul.conns li { display:grid; grid-template-columns:auto auto 1fr; gap:2px 8px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); }
ul.conns li small { grid-column:2 / -1; }
ul.conns li > span:nth-child(3) { justify-self:end; }
.accounts .card { margin:0; } .accounts h3 { margin-top:0; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
#kick-relay { margin-top:14px; }

/* ---------- responsive ---------- */
@media (max-width:1180px) {
  .dash { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas: "onb onb" "stats stats" "pv pv" "ovc ovc" "live events" "tools tools"; }
  .dash > .dash-tools { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
  .dash > .dash-tools > .card { margin:0; }
}
@media (max-width:1023.98px) { .alerts-top { grid-template-columns:minmax(0,1fr); gap:0; } }

/* phone (< 768px): top bar with the current page + a menu button; the nav drops down (public/static/nav.js) */
@media (max-width:767.98px) {
  header.site { position:sticky; inset:auto; top:0; width:auto; height:auto; flex-direction:column; border-right:0; border-bottom:1px solid var(--line);
    background:rgba(11,13,18,.92); backdrop-filter:blur(12px); }
  header.site .bar { padding:10px 12px; gap:10px; }
  header.site:not(.anon) .brand-name { display:none; }
  header.site .here { display:block; flex:1; min-width:0; font-weight:700; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  header.site .menu-btn { display:inline-flex; margin:0; padding:8px 12px; background:var(--panel-2); color:var(--text); border:1px solid var(--line-2); box-shadow:none; }
  header.site .menu-btn[aria-expanded="true"] { background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); }
  .menu-label { font-size:13px; }
  header.site .site-nav { display:none; position:absolute; left:8px; right:8px; top:calc(100% + 6px); max-height:calc(100vh - 80px); overflow-y:auto;
    background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:12px; gap:12px; }
  body.nav-open header.site .site-nav { display:flex; animation:drop .14s ease-out; }
  @keyframes drop { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
  .site-nav a { padding:11px 12px; font-size:15px; }
  .site-nav a.on::before { left:-12px; }
  .nav-foot { padding:12px 6px 2px; }
  body.has-nav main, body.has-nav main.wide, main, main.wide { margin:0; max-width:none; padding:14px 12px 48px; }
  .card { padding:16px; border-radius:var(--r); }
  .card.narrow { margin:24px auto; padding:20px; }
  h1 { font-size:22px; }
  .page-head { margin-bottom:14px; } .page-head .btn { width:100%; }
  .anon-nav { gap:10px; }
  .grid2, .grid3 { grid-template-columns:1fr; }
  .dash { grid-template-columns:minmax(0,1fr); grid-template-areas: "tabs" "onb" "stats" "ovc" "pv" "live" "events" "tools"; gap:12px; }
  .dash > .dash-tools { display:block; }
  .dash > .dash-tools > .card { margin:0 0 12px; }
  .dash.js .dash-tabs { grid-area:tabs; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; position:sticky; top:58px; z-index:5; background:rgba(11,13,18,.92); backdrop-filter:blur(10px); padding:4px; border:1px solid var(--line); border-radius:12px; }
  .dash-tabs button { margin:0; padding:9px 4px; background:transparent; color:var(--muted); border:0; border-radius:9px; box-shadow:none; }
  .dash-tabs button[aria-selected="true"] { background:var(--accent); color:var(--accent-ink); }
  .dash.js .panel { display:none; }
  .dash.js[data-tab="stats"] .panel[data-panel="stats"], .dash.js[data-tab="live"] .panel[data-panel="live"],
  .dash.js[data-tab="events"] .panel[data-panel="events"], .dash.js[data-tab="tools"] .panel[data-panel="tools"] { display:block; }
  .tiles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .tile { padding:12px; } .tile-val { font-size:21px; }
  .dash-chat.chat-log { height:calc(100vh - 250px); max-height:none; }
  ul.events { max-height:none; }
  .dash-head h1 { font-size:20px; }
  .periods a, .pfilter a { padding:4px 10px; font-size:12px; }
  ul.types { grid-template-columns:1fr; }
  td.actions { white-space:normal; }
  table.rules thead { display:none; } table.rules tr { display:block; border-bottom:1px solid var(--line); padding:8px 0; } table.rules td { display:block; border:0; padding:3px 0; } td.actions { text-align:left; } td.actions .btn, td.actions form, td.actions button { margin:6px 6px 0 0; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

/* Profile: "Public tip page" switch at the top */
.visibility { margin:6px 0 14px; padding:14px 16px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--bg-2); }
.vis-form { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0; }
.vis-form .switch { margin:0; font-size:16px; font-weight:700; }
.vis-form .switch input[type=checkbox] { width:46px; height:26px; }
.vis-form .switch input[type=checkbox]::after { width:20px; height:20px; }
.vis-form .switch input[type=checkbox]:checked::after { transform:translateX(20px); }
.vis-form #tip-state { font-size:13px; padding:3px 12px; }
.vis-form button { margin:0; }
.vis-help { margin:8px 0 0; }
#vis-error:empty { display:none; } #vis-error { display:block; margin-top:6px; }
.visibility .notice { margin-top:12px; }
#form-error:focus { outline:2px solid var(--err); outline-offset:2px; }

/* ---------- Settings -> Connected accounts: one card per platform ---------- */
.acct-intro p { max-width:78ch; margin-top:4px; }
.accounts-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap:16px; margin-top:14px; }
.acct { margin:0; display:flex; flex-direction:column; gap:10px; background:linear-gradient(180deg, var(--panel-2), var(--panel)); transition:border-color .2s, transform .2s; }
.acct:hover { border-color:var(--line-2); }
.acct-head { display:flex; align-items:center; gap:10px; } .acct-head h3 { margin:0; flex:1; font-size:18px; }
.acct-head .pi { transform:scale(1.25); }
.acct-via { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; }
.chip { display:inline-flex; align-items:center; padding:2px 10px; border-radius:999px; border:1px dashed var(--line-2); color:var(--muted); font-size:12.5px; font-weight:600; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip.on { border-style:solid; border-color:var(--accent-line); background:var(--accent-soft); color:var(--text); }
.acct-caps { list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:13.5px; }
.acct-caps li { display:flex; gap:8px; align-items:baseline; } .acct-caps li span { width:12px; flex:none; text-align:center; }
.acct-caps li.yes span { color:var(--accent); font-weight:800; } .acct-caps li.no { color:var(--faint); } .acct-caps small { color:var(--faint); }
.acct-sec { border-top:1px solid var(--line); padding-top:12px; margin-top:2px; }
.acct-sec h4 { margin:0 0 10px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:14.5px; } .acct-sec h4 small { color:var(--muted); font-weight:500; }
.step { width:22px; height:22px; border-radius:50%; display:inline-grid; place-items:center; background:var(--bg-2); border:1px solid var(--accent-line); font-size:12px; font-weight:800; color:var(--accent); flex:none; }
.mon-status { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 8px; font-size:14px; }
.mon-err { color:#ff9b9b; font-size:13px; margin:0 0 8px; } .mon-title { margin:0 0 8px; font-size:13px; }
.mon-form label { margin-bottom:6px; }
p.small, .small { font-size:13px; }
.notice.small b { font-size:13.5px; }
.row-btns { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ---------- login / sign up ---------- */
.auth-wrap { display:grid; grid-template-columns:minmax(0, 440px) minmax(0, 420px); gap:48px; justify-content:center; align-items:center; min-height:calc(100vh - 160px); padding:16px 0; }
.auth-card { background:linear-gradient(180deg, var(--panel-2), var(--panel)); border:1px solid var(--line); border-radius:20px; padding:32px 30px 26px; box-shadow:var(--shadow-lg); animation:rise .45s ease-out both; }
.auth-mark { width:44px; height:44px; margin-bottom:14px; } .auth-mark svg, .auth-mark .brand-mark { width:44px; height:44px; border-radius:13px; }
.auth-card h1 { margin:0 0 4px; font-size:28px; letter-spacing:-.025em; }
.auth-sub { margin:0 0 20px; color:var(--muted); }
.btn-kick { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:12px; border:0; font-weight:800; font-size:15.5px;
  background:#8b5cf6; color:#06110a; box-shadow:0 8px 24px rgba(139,92,246,.25), inset 0 -2px 0 rgba(0,0,0,.18); cursor:pointer; transition:transform .15s, box-shadow .15s, filter .15s; margin:0; }
.btn-kick:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 12px 30px rgba(83,252,24,.35), inset 0 -2px 0 rgba(0,0,0,.18); filter:brightness(1.05); }
.btn-kick:disabled { background:#1d2a1a; color:#7f9a74; box-shadow:none; cursor:not-allowed; border:1px dashed rgba(83,252,24,.3); }
.kick-logo { flex:none; }
.kick-form { margin:0; }
.auth-note { font-size:12.5px; color:var(--faint); margin:8px 2px 0; text-align:center; }
.auth-or { display:flex; align-items:center; gap:12px; margin:20px 0 6px; color:var(--faint); font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:650; }
.auth-or::before, .auth-or::after { content:""; flex:1; height:1px; background:var(--line); }
.auth-form button.btn-block, .btn-block { width:100%; justify-content:center; padding:11px 16px; font-size:15px; }
.auth-foot { text-align:center; margin:16px 0 0; color:var(--muted); font-size:14px; }
.auth-side h2 { font-size:34px; line-height:1.1; letter-spacing:-.03em; margin:0 0 20px; background:linear-gradient(90deg, #fff, #d6c8ff 60%, var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.auth-feats { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.auth-feats li { display:grid; gap:2px; padding:14px 16px 14px 18px; border-radius:14px; border:1px solid var(--line); background:rgba(20,24,33,.6); position:relative; animation:rise .5s ease-out both; }
.auth-feats li:nth-child(2) { animation-delay:.08s; } .auth-feats li:nth-child(3) { animation-delay:.16s; }
.auth-feats li::before { content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
.auth-feats b { font-size:15px; } .auth-feats span { color:var(--muted); font-size:13.5px; }
@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media (max-width: 900px) { .auth-wrap { grid-template-columns:minmax(0, 480px); gap:28px; min-height:0; } .auth-side { display:none; } .auth-card { padding:26px 20px 22px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }
dl.kv { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; margin:0 0 14px; } dl.kv dt { color:var(--muted); } dl.kv dd { margin:0; }

/* setup: dashboard banner + Settings > Overlays & setup */
.setup-banner { display:flex; align-items:center; gap:.6rem; padding:.45rem .5rem .45rem .9rem; margin:0 0 1rem; border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); background:color-mix(in srgb, var(--accent) 8%, transparent); border-radius:999px; font-size:.92rem; width:fit-content; max-width:100%; }
.setup-banner .sb-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); flex:none; }
.setup-banner form { margin:0; } .setup-banner button { padding:.15rem .55rem; font-size:1.1rem; line-height:1; }
#setup h3 { margin:1rem 0 .4rem; font-size:1rem; }
.ov-urls { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:.4rem 1rem; }
.ov-url .row, .more-ov .row { margin:.15rem 0 .4rem; }
#setup .checklist .tick:empty::before { content:""; }
.more-ov { margin:.25rem 0 .75rem; } .more-ov summary { cursor:pointer; color:var(--muted, #9aa3b2); margin-bottom:.4rem; }

/* multichat: platform filter chips + timestamps toggle (view-only) */
.mc-bar { display:flex; gap:6px; align-items:center; margin:0 0 8px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
.mc-bar::-webkit-scrollbar { display:none; }
.mc-group { display:flex; gap:6px; flex:1 0 auto; }
.mc-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; min-height:34px; border-radius:999px; border:1px solid var(--line, #2a2f3a); background:transparent; color:var(--muted, #9aa3b2); font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer; box-shadow:none; transition:background .15s, color .15s, border-color .15s; }
.mc-chip:hover { color:var(--fg, #e8ebf1); }
.mc-chip[aria-pressed="true"], .mc-chip.all-on { color:var(--fg, #e8ebf1); background:color-mix(in srgb, var(--pc, var(--accent)) 16%, transparent); border-color:color-mix(in srgb, var(--pc, var(--accent)) 60%, transparent); }
.mc-chip.mc-all[aria-pressed="true"] { --pc:var(--accent); }
.mc-chip.p-kick { --pc:#53fc18; } .mc-chip.p-rumble { --pc:#85c742; } .mc-chip.p-x { --pc:#e7e9ea; } .mc-chip.p-antislave { --pc:#ff5a5f; }
.mc-chip .pi { width:16px; height:16px; }
.mc-n { font-size:11px; padding:1px 6px; border-radius:999px; background:rgba(255,255,255,.08); font-variant-numeric:tabular-nums; }
.mc-chip.unread .mc-n { background:var(--pc, var(--accent)); color:#0b0d12; }
.mc-ts { margin-left:auto; flex:none; }
.chat-log.mc-no-ts .ts { display:none; }
.chat-log.mc-hide-rumble .line[data-platform="rumble"], .chat-log.mc-hide-kick .line[data-platform="kick"], .chat-log.mc-hide-x .line[data-platform="x"], .chat-log.mc-hide-antislave .line[data-platform="antislave"] { display:none; }
@media (max-width:600px) { .mc-chip { padding:6px 10px; min-height:36px; } .mc-ts { position:sticky; right:0; background:var(--bg2, #12151c); } }
.chat-log .text { overflow-wrap:anywhere; }

/* ---------- v5 clean pass: one button/chip language everywhere (pills, chips, switches) ---------- */
button, .btn { border-radius:999px; padding:10px 20px; }
button.small, .btn.small { padding:7px 14px; font-size:13px; }
.btn-row, .row-btns { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.btn-row button, .btn-row .btn, .row-btns button, .row-btns .btn { margin-top:12px; }
.row-btns form { margin:0; } .row-btns button { margin-top:0; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], input[type=url], input:not([type]), select, textarea { border-radius:12px; }
.card form > label, .card .inline-form label, .card > label { max-width:560px; }
.card h3 { font-size:14px; letter-spacing:.01em; margin:18px 0 6px; }
.group-title { font-size:12px; font-weight:750; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:28px 4px 10px; scroll-margin-top:80px; }
.page-head + .pill-nav + .group-title { margin-top:12px; }
.card, section[id] { scroll-margin-top:80px; }
/* chip/pill links (same look as the dashboard + tip page chips) */
.pill-nav { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 0 6px; margin:0 0 6px; -webkit-overflow-scrolling:touch; }
.pill-nav::-webkit-scrollbar { display:none; }
.pill-link { flex:none; display:inline-flex; align-items:center; gap:6px; padding:7px 14px; min-height:34px; border-radius:999px; border:1px solid var(--line-2); color:var(--muted); font-size:13px; font-weight:650; white-space:nowrap; background:transparent; }
.pill-link:hover, .pill-link:focus-visible { color:var(--text); border-color:var(--accent-line); background:var(--accent-soft); text-decoration:none; }
.chip-stats { display:flex; flex-wrap:wrap; gap:6px; }
.chip-stat { display:inline-flex; gap:5px; align-items:center; padding:4px 11px; border-radius:999px; border:1px solid var(--line-2); font-size:12.5px; color:var(--muted); }
.chip-stat b { color:var(--text); font-variant-numeric:tabular-nums; }
.role-chip { display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:700; border:1px solid var(--line-2); color:var(--muted); background:rgba(255,255,255,.03); }
.role-chip.r-owner { color:var(--accent); border-color:var(--accent-line); } .role-chip.r-admin { color:#ffb86b; border-color:rgba(255,184,107,.45); }
.role-chip.r-mod { color:#7cc4ff; border-color:rgba(124,196,255,.45); } .role-chip.r-editor { color:#c39bff; border-color:rgba(195,155,255,.45); }
/* collapsible advanced options */
details.adv { margin-top:14px; border-top:1px solid var(--line); padding-top:10px; }
details.adv > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; font-weight:650; font-size:13.5px; color:var(--muted); padding:6px 0; }
details.adv > summary::-webkit-details-marker { display:none; }
details.adv > summary::before { content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .15s; margin:0 4px 0 2px; }
details.adv[open] > summary::before { transform:rotate(45deg); }
details.adv > summary:hover { color:var(--text); }
/* nav menu: pill items, channel switcher */
.site-nav a { border-radius:999px; }
.site-nav a.on { box-shadow:inset 0 0 0 1px var(--accent-line); }
.site-nav a.on::before { display:none; }
.switcher { margin:2px 0 6px; border:1px solid var(--line-2); border-radius:16px; background:var(--panel-2); }
.switcher > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; padding:9px 12px; font-size:13.5px; flex-wrap:wrap; }
.switcher > summary::-webkit-details-marker { display:none; }
.switcher .sw-label { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; width:100%; }
.sw-list { display:flex; flex-direction:column; gap:4px; padding:0 8px 8px; }
.sw-list form { margin:0; }
.sw-opt { width:100%; margin:0; justify-content:flex-start; gap:10px; background:transparent; color:var(--text); border:1px solid transparent; box-shadow:none; padding:7px 10px; font-weight:600; }
.sw-opt:hover { background:rgba(255,255,255,.05); filter:none; } .sw-opt.on { border-color:var(--accent-line); background:var(--accent-soft); }
.sw-opt .role-chip { margin-left:auto; }
.avatar { flex:none; }
/* team page */
.team-grid { display:grid; gap:18px; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:start; }
.team-list { list-style:none; margin:0 0 6px; padding:0; display:flex; flex-direction:column; gap:8px; }
.team-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:14px; background:var(--bg-2); }
.team-row form { margin:0; } .team-row button { margin-top:0; }
.tr-main { flex:1; min-width:0; } .tr-meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:3px; }
.team-invite { display:grid; grid-template-columns:minmax(0,1fr) 160px auto; gap:10px; align-items:end; margin-top:8px; }
.team-invite label { margin-top:0; max-width:none; } .team-invite button { margin-top:0; height:42px; }
button.danger-text { color:#ff9a9a; }
.empty { display:flex; flex-direction:column; gap:4px; padding:16px; border:1px dashed var(--line-2); border-radius:14px; text-align:center; margin:4px 0 10px; }
ul.audit { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:13.5px; }
ul.audit li { padding:6px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.flash.info { background:rgba(124,196,255,.08); border-color:rgba(124,196,255,.35); }
.owner-only { opacity:.85; }
@media (max-width:900px) { .team-grid { grid-template-columns:minmax(0,1fr); } }
@media (max-width:600px) {
  .card { padding:16px; border-radius:18px; }
  .team-invite { grid-template-columns:minmax(0,1fr); }
  .card form > label, .card .inline-form label { max-width:none; }
  .btn-row button, .btn-row .btn { flex:1 1 auto; }
  .group-title { margin:22px 2px 8px; }
}
dl.kv { grid-template-columns:max-content minmax(0,1fr); } dl.kv dd { min-width:0; overflow-wrap:anywhere; }

/* Settings > Payments: numbered setup steps + Connect with Stripe */
.pay-step { border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:12px 0; background:var(--bg-2); min-width:0; }
.pay-step .step-head { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.pay-step p { margin:4px 0 8px; overflow-wrap:anywhere; }
.pay-step .inline-form label { display:block; }
.connect-step { border-color:var(--accent-line); }
button.stripe-connect { background:#635bff; color:#fff; border:1px solid #635bff; }
button.stripe-connect:hover { filter:brightness(1.08); }
button.stripe-connect[disabled] { opacity:.55; cursor:not-allowed; filter:none; }
details.pay-manual > summary { font-size:14px; }
.secret-hint { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; }
.held-queue { border-color:#f5a52466; }
.held-list { list-style:none; padding:0; margin:8px 0 0; display:grid; gap:8px; }
.held-list li { border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:10px 12px; }
.held-top { display:flex; justify-content:space-between; gap:8px; } .held-top .amt { font-weight:800; }
.held-msg { opacity:.85; margin:4px 0; overflow-wrap:anywhere; } .held-actions { display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }

/* Settings > Payments > Chargeback protection */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.safety-form { margin-top:6px; }
.safety-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid var(--line); }
.safety-row.stack { flex-direction:column; align-items:stretch; }
.safety-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
.safety-copy small { font-size:12.5px; line-height:1.45; }
.money-in { display:flex; align-items:center; gap:8px; margin:0; flex:none; font-size:13.5px; color:var(--muted); }
.money-in input { width:110px; margin:0; text-align:right; font-variant-numeric:tabular-nums; }
.money-in .unit { font-weight:700; color:var(--faint); font-size:12px; letter-spacing:.06em; }
.safety-row .check { margin:0; }
.seg { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.seg-opt { display:flex; align-items:flex-start; gap:2px; padding:10px 12px; border:1px solid var(--line-2); border-radius:12px; background:var(--bg-2); cursor:pointer; transition:border-color .15s, background .15s; }
.seg-opt span { display:flex; flex-direction:column; gap:2px; } .seg-opt small { color:var(--muted); font-size:12px; }
.seg-opt:has(input:checked) { border-color:var(--accent-line); background:var(--accent-soft); }
.hold-over { display:none; align-self:flex-start; }
.safety-form:has(input[name=hold_mode][value=over]:checked) .hold-over { display:flex; }
.resp-note { margin:14px 0 4px; padding:12px 14px; border:1px solid rgba(255,207,74,.35); border-left:3px solid var(--warn); border-radius:12px; background:var(--warn-soft); }
.resp-note b { color:var(--warn); font-size:13px; letter-spacing:.02em; } .resp-note p { margin:4px 0 0; font-size:13px; line-height:1.5; color:var(--text); }
@media (max-width:560px) { .seg { grid-template-columns:1fr; } .safety-row:not(.stack) { flex-wrap:wrap; } }
.site-footer{text-align:center;padding:1.5rem 1rem 2rem}.site-footer a{color:inherit}.legal{max-width:760px;margin:0 auto;line-height:1.6}.legal h2{margin-top:1.4em;font-size:1.15em}

/* ---- Page background card (Settings > Profile). Pattern swatches mirror src/appearance.js PATTERNS ---- */
.bgp-grid{background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:40px 40px;}
.bgp-dots{background-image:radial-gradient(rgba(255,255,255,.09) 1.2px, transparent 1.6px); background-size:22px 22px;}
.bgp-diagonal{background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 18px);}
.bgp-plus{background-image:linear-gradient(rgba(255,255,255,.05) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.05) 2px, transparent 2px); background-size:56px 56px; background-position:-27px -27px;}
.bgp-waves{background-image:radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,.045) 21%, rgba(255,255,255,.045) 34%, transparent 35%, transparent), radial-gradient(circle at 0% 50%, transparent 20%, rgba(255,255,255,.045) 21%, rgba(255,255,255,.045) 34%, transparent 35%, transparent); background-size:60px 40px;}
.bgp-aurora{background-image:radial-gradient(40% 35% at 15% 10%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%), radial-gradient(35% 30% at 85% 15%, rgba(124,92,255,.28), transparent 70%), radial-gradient(45% 40% at 50% 100%, rgba(0,180,255,.16), transparent 70%); }
.bgp-none{background-image:none;}
.sw-brand{background:#100e1b;} .sw-brand span{background:#8b5cf6;}
.sw-amber{background:#14100a;} .sw-amber span{background:#f59e0b;}
.sw-ocean{background:#0b1520;} .sw-ocean span{background:#22c7ff;}
.sw-sunset{background:#1a110d;} .sw-sunset span{background:#ff8a3d;}
.sw-rose{background:#1a0e15;} .sw-rose span{background:#ff4f8b;}
.sw-gold{background:#16140c;} .sw-gold span{background:#ffd54a;}
.sw-mono{background:#111215;} .sw-mono span{background:#e6e8ee;}
.ap-wrap { display:grid; gap:20px; grid-template-columns:minmax(0,1fr); }
@media (min-width:900px) { .ap-wrap { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:start; } .ap-previews { position:sticky; top:16px; } }
.ap-form { display:grid; gap:14px; }
.field-label { display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.seg { display:inline-flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:999px; background:var(--field); margin:0; }
.seg legend { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.seg-opt { margin:0; cursor:pointer; } .seg-opt input { position:absolute; opacity:0; pointer-events:none; }
.seg-opt span { display:block; padding:7px 14px; border-radius:999px; font-weight:600; font-size:14px; color:var(--muted); }
.seg-opt input:checked + span { background:var(--accent); color:var(--accent-ink); }
.seg-opt input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.bg-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
.bg-tile { display:grid; gap:6px; margin:0; cursor:pointer; font-size:13px; font-weight:600; color:var(--muted); text-align:center; }
.bg-tile input { position:absolute; opacity:0; pointer-events:none; }
.bg-sw { display:block; height:64px; border-radius:var(--r); border:2px solid var(--line); background-color:#13141c; transition:border-color .15s, transform .15s; }
.bg-tile:hover .bg-sw { transform:translateY(-1px); border-color:var(--line-2); }
.bg-tile.on .bg-sw, .bg-tile input:checked + .bg-sw { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.bg-tile.on { color:var(--text); } .bg-tile input:focus-visible + .bg-sw { outline:2px solid var(--accent); outline-offset:2px; }
.preset-row { display:flex; flex-wrap:wrap; gap:8px; }
.preset-sw { width:40px; height:40px; padding:0; border-radius:50%; border:2px solid var(--line-2); display:grid; place-items:center; min-height:0; box-shadow:none; }
.preset-sw span { width:16px; height:16px; border-radius:50%; display:block; } .preset-sw:hover { border-color:var(--accent); transform:none; }
.media-preview.bg img { width:160px; height:90px; object-fit:cover; border-radius:8px; }
.row-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ap-preview { --accent:#8b5cf6; --bg:#13141c; position:relative; overflow:hidden; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--bg); min-height:260px; padding:22px; display:grid; align-content:end; gap:12px; }
.ap-bgl { position:absolute; inset:0; background-color:var(--bg); background-size:cover; background-position:center; }
.ap-bgl::after { content:''; position:absolute; inset:0; background:radial-gradient(60% 80% at 50% 0, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); }
.ap-card { position:relative; display:flex; gap:12px; align-items:center; padding:14px; border-radius:14px; background:rgba(22,26,36,.82); border:1px solid rgba(255,255,255,.08); }
.ap-card small { display:block; color:var(--muted); } .ap-ava { width:44px; height:44px; border-radius:50%; background:var(--accent); flex:none; box-shadow:0 0 0 3px var(--bg); }
.ap-btn { position:relative; text-align:center; padding:11px; border-radius:12px; font-weight:800; background:var(--accent); color:#0b0f0a; }

/* ---- Alerts tab > Alert style ---- */
.st-wrap { display:grid; gap:20px; grid-template-columns:minmax(0,1fr); }
@media (min-width:1100px) { .st-wrap { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:start; } .st-side { position:sticky; top:16px; } }
.st-form { display:grid; gap:14px; }
.th-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px; }
.th-tile { display:grid; gap:6px; margin:0; cursor:pointer; text-align:center; font-size:13px; font-weight:600; color:var(--muted); }
.th-tile input { position:absolute; opacity:0; pointer-events:none; }
.th-sw.ab { min-width:0; max-width:none; padding:14px 6px; border-radius:12px; font-size:18px; font-weight:800; box-shadow:none; outline:2px solid transparent; outline-offset:3px; transition:outline-color .15s, transform .15s; }
.th-tile:hover .th-sw { transform:translateY(-1px); } .th-tile.on { color:var(--text); }
.th-tile.on .th-sw, .th-tile input:checked + .th-sw { outline-color:var(--accent); } .th-tile input:focus-visible + .th-sw { outline-color:var(--info); }
.st-stage { position:relative; display:grid; place-items:center; min-height:300px; padding:24px 12px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(45deg, #1b1f29 25%, transparent 25%, transparent 75%, #1b1f29 75%), linear-gradient(45deg, #1b1f29 25%, #151821 25%, #151821 75%, #1b1f29 75%); background-size:28px 28px; background-position:0 0, 14px 14px; }
.st-stage .ab { min-width:0; width:min(100%, 460px); } .st-stage .ab.size-big, .st-stage .ab.size-huge { width:min(100%, 540px); }
.st-stage .ab.size-huge .head { font-size:40px; }
.st-ctl { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin-top:12px; } .st-ctl input { width:110px; }
.tier { border:1px solid var(--line); border-radius:var(--r); padding:12px; margin:10px 0; background:var(--bg-2); } .tier-hidden { display:none; }
.tier-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.tier-grid { display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }

/* ---- All-in-one overlay card ---- */
.studio-grid { display:grid; gap:20px; grid-template-columns:minmax(0,1fr); margin-top:12px; } @media (min-width:900px) { .studio-grid { grid-template-columns:1fr 1fr; } }
.w-rows { display:grid; gap:8px; } .w-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2); } .w-row select { width:auto; min-width:150px; margin:0; }
.studio-form { display:grid; gap:12px; }
.goal-mini { display:grid; gap:6px; } .goal-mini-bar { height:10px; border-radius:999px; background:var(--line); overflow:hidden; } .goal-mini-bar span { display:block; height:100%; background:var(--accent); border-radius:999px; }
ol.steps { margin:10px 0; padding-left:20px; display:grid; gap:4px; }
.gm-0{width:0%;}.gm-5{width:5%;}.gm-10{width:10%;}.gm-15{width:15%;}.gm-20{width:20%;}.gm-25{width:25%;}.gm-30{width:30%;}.gm-35{width:35%;}.gm-40{width:40%;}.gm-45{width:45%;}.gm-50{width:50%;}.gm-55{width:55%;}.gm-60{width:60%;}.gm-65{width:65%;}.gm-70{width:70%;}.gm-75{width:75%;}.gm-80{width:80%;}.gm-85{width:85%;}.gm-90{width:90%;}.gm-95{width:95%;}.gm-100{width:100%;}

/* ---- Setup wizard (/setup) ---- */
.wz-progress { height:6px; border-radius:999px; background:var(--line); overflow:hidden; margin:4px 0 20px; } .wz-progress span { display:block; height:100%; background:linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius:999px; transition:width .4s; }
.wzp-0 { width:3%; } .wzp-1 { width:25%; } .wzp-2 { width:50%; } .wzp-3 { width:75%; } .wzp-4 { width:100%; }
.wz-grid { display:grid; gap:20px; grid-template-columns:minmax(0,1fr); } @media (min-width:860px) { .wz-grid { grid-template-columns:220px minmax(0,1fr); align-items:start; } }
.wz-rail { list-style:none; margin:0; padding:0; display:grid; gap:6px; } @media (max-width:859px) { .wz-rail { grid-template-columns:repeat(4,1fr); } .wz-r a span:last-child { font-size:12px; } }
.wz-r a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r); color:var(--muted); text-decoration:none; font-weight:600; border:1px solid transparent; }
@media (max-width:859px) { .wz-r a { flex-direction:column; gap:4px; padding:8px 4px; text-align:center; } }
.wz-r a:hover { background:var(--panel); color:var(--text); } .wz-r.cur a { background:var(--panel); border-color:var(--accent-line); color:var(--text); }
.wz-r small { display:block; font-size:11px; color:var(--warn); font-weight:600; }
.wz-n { width:28px; height:28px; flex:none; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:13px; background:var(--panel-2); border:1px solid var(--line-2); }
.wz-r.done .wz-n { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); } .wz-r.cur .wz-n { border-color:var(--accent); }
.wz-main { padding:28px; min-height:360px; display:flex; flex-direction:column; gap:14px; }
.wz-head { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; } .wz-head h2 { margin:0; font-size:26px; width:100%; }
.wz-kicker { font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.lead { font-size:16px; color:var(--text); margin:0; max-width:62ch; }
.wz-plats { display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.wz-plat { display:flex; align-items:center; gap:10px; padding:14px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2); } .wz-plat b { flex:1; }
.wz-plat.on { border-color:var(--accent-line); background:var(--accent-soft); } .wz-plat .pi { width:26px; height:26px; margin:0; }
.wz-steps { margin:0; padding-left:20px; display:grid; gap:6px; }
.wz-nav { margin-top:auto; padding-top:16px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; } .wz-nav-r { display:flex; gap:8px; }
.wz-done { text-align:center; display:grid; justify-items:center; gap:10px; padding:20px 0; } .wz-done .row-actions { justify-content:center; }
.wz-badge { width:72px; height:72px; border-radius:50%; display:grid; place-items:center; font-size:36px; font-weight:900; background:var(--accent); color:var(--accent-ink); box-shadow:0 0 0 8px var(--accent-soft); }
.wz-ok { display:flex; gap:10px; align-items:center; }
.btn-stripe { background:#635bff; color:#fff; border-color:#635bff; } .btn-stripe:hover { background:#7a73ff; }

/* ---- /support ---- */
.support { max-width:980px; margin:0 auto; display:grid; gap:28px; }
.sp-hero { text-align:center; padding:48px 20px 36px; border-radius:24px; border:1px solid var(--line); display:grid; justify-items:center; gap:14px;
  background:radial-gradient(70% 90% at 50% 0, rgba(139,92,246,.16), transparent 70%), var(--panel); }
.sp-hero h1 { font-size:clamp(28px, 4.4vw, 44px); line-height:1.1; margin:0; max-width:18ch; } .sp-hero .hl { color:var(--accent); }
.sp-kicker { font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.sp-presets { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.sp-preset { min-width:72px; padding:10px 16px; border-radius:12px; border:1px solid var(--line-2); background:var(--bg-2); color:var(--text); font-weight:800; text-decoration:none; }
.sp-preset:hover, .sp-preset.on { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.sp-cta { font-size:17px; padding:14px 28px; }
.sp-why { display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); } .sp-why h3 { margin-top:0; }
.nav-support { display:block; margin:8px 12px 0; padding:8px 10px; border-radius:var(--r-sm); font-size:13px; font-weight:600; color:var(--muted); text-decoration:none; }
.nav-support:hover { color:var(--accent); background:var(--accent-soft); }

/* ---- Alerts > Overlay layout editor ---- */
.le { display:grid; gap:18px; grid-template-columns:minmax(0,1fr); }
@media (min-width:1100px) { .le { grid-template-columns:260px minmax(0,1fr); align-items:start; } }
.le-side { display:grid; gap:10px; align-content:start; }
.le-togs { display:grid; gap:4px; } .le-tog { display:flex; align-items:center; gap:8px; margin:0; padding:6px 8px; border-radius:8px; cursor:pointer; font-weight:600; font-size:14px; } .le-tog:hover { background:var(--panel-2); }
.le-tog input { margin:0; width:16px; height:16px; accent-color:var(--accent); }
.le-dot { width:10px; height:10px; border-radius:3px; background:var(--c); flex:none; }
.le-presets { display:flex; flex-wrap:wrap; gap:6px; }
.le-sel { font-size:13px; font-variant-numeric:tabular-nums; padding:8px 10px; border-radius:8px; background:var(--bg-2); border:1px solid var(--line); min-height:20px; }
.le-canvas-wrap { display:grid; gap:6px; }
.le-canvas { position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; border:1px solid var(--line-2); touch-action:none; user-select:none;
  background:linear-gradient(160deg, #1d2433, #10131b 60%), #10131b; outline:none; }
.le-canvas.snap { background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(160deg, #1d2433, #10131b 60%);
  background-size:calc(var(--grid) * 5) calc(var(--grid) * 5), calc(var(--grid) * 5) calc(var(--grid) * 5), auto; }
.le-canvas:focus-visible { box-shadow:0 0 0 2px var(--accent); }
.le-box { position:absolute; box-sizing:border-box; border:2px dashed color-mix(in srgb, var(--c) 70%, transparent); border-radius:8px; background:color-mix(in srgb, var(--c) 10%, transparent); cursor:move; overflow:hidden; outline:none; }
.le-box.on { border-style:solid; border-color:var(--c); box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); z-index:2; }
.le-box[hidden] { display:none; }
.le-tag { position:absolute; left:4px; top:4px; z-index:2; font-size:11px; font-weight:800; padding:2px 6px; border-radius:5px; background:var(--c); color:#0b0d12; pointer-events:none; white-space:nowrap; }
.le-handle { position:absolute; right:0; bottom:0; width:16px; height:16px; z-index:3; cursor:nwse-resize; background:linear-gradient(135deg, transparent 50%, var(--c) 50%); }
.le-c-alerts { --c:#8b5cf6; } .le-c-chat { --c:#6aa8ff; } .le-c-media { --c:#ff5f6d; } .le-c-goal { --c:#ffd54a; } .le-c-viewers { --c:#22c7ff; } .le-c-emotes { --c:#ff8a3d; } .le-c-top { --c:#c69bff; } .le-c-recent { --c:#9aa3b5; }
.le-emotes-under { z-index:0; } .le-c-emotes { z-index:0; } .le-c-emotes.on { z-index:1; }
.le-sample { position:absolute; inset:0; pointer-events:none; font-size:calc(22px * var(--sc, .4)); color:#fff; display:flex; flex-direction:column; padding:calc(14px * var(--sc, .4)); box-sizing:border-box; gap:calc(4px * var(--sc, .4)); }
.s-alerts { align-items:center; justify-content:flex-start; padding-top:calc(26px * var(--sc, .4)); } .le-ab.ab { min-width:0; width:96%; padding:calc(16px * var(--sc, .4)); border-radius:calc(18px * var(--sc, .4)); border-width:max(1px, calc(2px * var(--sc, .4))); }
.le-ab .head { font-size:calc(34px * var(--sc, .4)); } .le-ab .msg { font-size:calc(24px * var(--sc, .4)); margin-top:calc(6px * var(--sc, .4)); }
.s-chat { justify-content:flex-end; } .le-line { text-shadow:0 1px 2px #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .le-line .pi { width:1em; height:1em; margin-right:.3em; }
.le-media { flex:1; display:grid; place-items:center; align-content:center; border-radius:6px; background:repeating-linear-gradient(45deg, #2a1416 0 10px, #241114 10px 20px); color:#ff8f98; font-size:calc(48px * var(--sc, .4)); }
.le-media small { font-size:calc(20px * var(--sc, .4)); }
.s-goal { justify-content:center; background:rgba(14,16,22,.7); border-radius:6px; } .le-gtitle { font-weight:800; white-space:nowrap; overflow:hidden; } .le-gbar { height:calc(18px * var(--sc, .4)); border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; } .le-gbar span { display:block; width:60%; height:100%; background:#8b5cf6; }
.s-viewers { justify-content:center; } .le-big { font-size:calc(30px * var(--sc, .4)); text-shadow:0 1px 2px #000; }
.s-emotes { flex-direction:row; flex-wrap:wrap; align-content:space-around; justify-content:space-around; font-size:calc(40px * var(--sc, .4)); opacity:.7; }
.s-top, .s-recent { background:rgba(14,16,22,.7); border-radius:6px; } .le-ph { font-weight:800; color:#9aa3b5; text-transform:uppercase; font-size:calc(14px * var(--sc, .4)); letter-spacing:.1em; }
.le-row { display:flex; justify-content:space-between; gap:6px; } .le-row b { color:#8b5cf6; }
details.legacy { margin-top:10px; }
/* editor toggles: one clean pill per widget (colour dot + name + on/off), input visually hidden but focusable */
.le-tog { position:relative; justify-content:space-between; border:1px solid var(--line); background:var(--bg-2); opacity:.6; }
.le-tog:has(input:checked) { opacity:1; border-color:color-mix(in srgb, var(--c, var(--accent)) 45%, var(--line)); }
.le-tog input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.le-tog:has(input:focus-visible) { box-shadow:0 0 0 2px var(--accent); }
.le-tog .le-dot { order:-1; }
.le-tog .le-name { flex:1; }
.le-tog::after { content:'Off'; font-size:11px; font-weight:800; color:var(--muted); }
.le-tog:has(input:checked)::after { content:'On'; color:var(--c, var(--accent)); }
.le-ab.ab { box-sizing:border-box; padding:calc(22px * var(--sc, .4)) calc(26px * var(--sc, .4)); }
.s-alerts { padding-top:calc(44px * var(--sc, .4)); justify-content:center; }
.le-box .s-alerts .le-ab.ab { width:92%; max-height:100%; overflow:hidden; animation:none; transform:none; margin:0; }
.le-box .s-alerts .le-ab .head { font-size:calc(40px * var(--sc, .4)); line-height:1.2; }
.le-box .s-alerts .le-ab .msg { font-size:calc(26px * var(--sc, .4)); }
.le-box .s-top, .le-box .s-recent, .le-box .s-goal { padding-top:calc(48px * var(--sc, .4)); } .le-box .le-ph { display:none; }

/* ---- Settings > Tip goal ---- */
.goal-chips { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:16px; }
.goal-chip { display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--bg-2); color:var(--text); font-weight:600; font-size:14px; text-decoration:none; }
.goal-chip:hover { border-color:var(--line-2); text-decoration:none; } .goal-chip.sel { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.goal-chip .pill { font-size:11px; padding:1px 7px; }
.goal-ed { display:grid; gap:22px; grid-template-columns:minmax(0,1fr); }
@media (min-width:1000px) { .goal-ed { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; } .goal-side { position:sticky; top:16px; } }
.goal-form { display:grid; gap:12px; }
.goal-form .grid-2 { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }
.gs-tiles { display:grid; gap:8px; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); }
.gs-tile { position:relative; display:grid; gap:6px; justify-items:center; margin:0; padding:10px 8px; border-radius:10px; border:1px solid var(--line); background:var(--bg-2); cursor:pointer; font-size:13px; font-weight:600; }
.gs-tile input { position:absolute; opacity:0; pointer-events:none; }
.gs-tile:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.gs-tile:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.gs-demo { width:84px; display:block; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; }
.gs-demo i { display:block; width:62%; height:100%; background:var(--accent); border-radius:inherit; }
.gs-slim { height:4px; } .gs-chunky { height:16px; border-radius:4px; } .gs-chunky i { background:repeating-linear-gradient(-45deg, var(--accent) 0 6px, color-mix(in srgb, var(--accent) 75%, #000) 6px 12px); }
.gs-glow { height:10px; } .gs-glow i { box-shadow:0 0 10px var(--accent); }
.gs-segments { height:12px; border-radius:3px; position:relative; } .gs-segments i { border-radius:3px; } .gs-segments::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--bg-2) calc(10% - 2px) 10%); }
.goal-colors { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.color-field { display:grid; gap:4px; margin:0; font-size:13px; font-weight:600; } .color-field input[type=color] { width:56px; height:36px; padding:2px; border-radius:8px; }
.swatches { display:flex; gap:6px; margin-left:auto; }
.swatch-btn { width:32px; height:32px; padding:0; border-radius:50%; border:1px solid var(--line-2); background:var(--bg-2); display:grid; place-items:center; cursor:pointer; }
.swatch-btn span { width:20px; height:20px; border-radius:50%; display:block; }
.sw-offbrand { background:#8b5cf6; } .sw-amber { background:#f59e0b; } .sw-rose { background:#ff5f6d; } .sw-ice { background:#22c7ff; } .sw-gold { background:#ffb300; } .sw-mono { background:#ffffff; }
.goal-stage { position:relative; padding:34px 28px; border-radius:12px; border:1px solid var(--line-2); overflow:hidden;
  background:linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.03) 75%), linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.03) 75%), linear-gradient(160deg, #1d2433, #10131b);
  background-size:24px 24px, 24px 24px, auto; background-position:0 0, 12px 12px, 0 0; }
.goal-prev { font-size:20px; }
.goal-side { display:grid; gap:10px; }
.inline-label { display:flex; align-items:center; gap:10px; margin:0; font-size:13px; font-weight:600; } .inline-label input[type=range] { width:160px; accent-color:var(--accent); }
/* tip page / editor sample use the shared .gb renderer */
.tip-goal .gb { font-size:16px; }
.le-box .s-goal .gb { font-size:calc(24px * var(--sc, .4)); }
.le-box .s-goal .gb-foot { display:none; }
.gs-tiles { grid-template-columns:repeat(4, minmax(0, 1fr)); } @media (max-width:560px) { .gs-tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.gs-demo { width:80%; max-width:84px; }
.swatches { margin-left:0; align-self:center; }

/* ---- polish pass 2: dashboard ---- */
table.breakdown tr.quiet td { color:var(--muted); } table.breakdown tr.quiet td a { color:var(--muted); } table.breakdown tr.quiet:hover td, table.breakdown tr.quiet:hover td a { color:var(--text); }
table.breakdown td { font-variant-numeric:tabular-nums; } table.breakdown td:first-child a { font-weight:600; }
.vchip.na { padding:4px 6px; opacity:.55; } .vchip.na:hover { opacity:1; }
[data-stat] { font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* page background: desktop vs mobile preview */
.ap-previews { display:grid; gap:8px; align-content:start; }
.ap-tag { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.ap-tag small { text-transform:none; letter-spacing:0; font-weight:500; }
.ap-phone { --accent:#8b5cf6; width:210px; min-height:300px; padding:46px 14px 18px; border-radius:28px; border:6px solid #262b37; display:grid; align-content:end; gap:10px;
  background:#13141c linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 22px 22px, #13141c; }
.ap-phone .ap-card { padding:10px; gap:8px; } .ap-phone .ap-ava { width:32px; height:32px; } .ap-phone .ap-btn { padding:9px; font-size:13px; }
/* page background: focus/zoom, cards, banner */
.ap-focus { display:grid; gap:6px; margin:6px 0 4px; }
.ap-range { display:grid; grid-template-columns:110px 1fr 48px; align-items:center; gap:10px; margin:0; font-size:13px; font-weight:600; }
.ap-range input { accent-color:var(--accent); width:100%; } .ap-range output { font-variant-numeric:tabular-nums; color:var(--muted); text-align:right; }
.ap-picker { position:relative; cursor:crosshair; }
.ap-picker::after { content:""; position:absolute; left:var(--fx, 50%); top:var(--fy, 50%); width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 2px rgba(0,0,0,.6), 0 0 0 5px color-mix(in srgb, var(--accent) 50%, transparent); pointer-events:none; }
.ap-ban-thumb { max-width:360px; aspect-ratio:3/1; border-radius:10px; overflow:hidden; border:1px solid var(--line-2); margin:4px 0 8px; }
.ap-ban-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.media-preview.bg.ap-picker { overflow:hidden; }
.ap-banner { display:grid; gap:6px; padding:12px; border-radius:var(--r); border:1px solid var(--line); background:var(--bg-2); }
.ap-preview { overflow:hidden; } .ap-bgl { transition:transform .2s ease; }
.ap-head { overflow:hidden; isolation:isolate; }
.ap-head-ban { position:absolute; inset:0; z-index:-1; } .ap-head-ban img { width:100%; height:100%; object-fit:cover; display:block; }
.ap-head-ban::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(12,13,19,.88), rgba(12,13,19,.3)); }
.ap-head-ban.subtle img { opacity:.18; filter:blur(2px); }
.ap-preview.solid-cards .ap-card { background:color-mix(in srgb, var(--bg) 70%, #1a1d27); }
.ap-wrap > #ap-rm { display:none; }

/* ---- Dashboard > Preview ---- */
.pv-card .card-head { flex-wrap:wrap; gap:10px; }
.pv-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-left:auto; }
.pv-seg { display:inline-flex; padding:3px; border-radius:999px; background:var(--bg-2); border:1px solid var(--line); }
.pv-seg button { background:transparent; color:var(--muted); border:0; box-shadow:none; padding:5px 12px; border-radius:999px; font-size:13px; font-weight:700; min-height:0; }
.pv-seg button[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); }
.pv-card:not(.on) .pv-seg, .pv-card:not(.on) #pv-src { display:none; }
#pv-src { width:auto; min-width:140px; padding:6px 10px; font-size:13px; }
.pv-stage { position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; border:1px solid var(--line-2); background:#06070a; }
.pv-stage.ov-only { background:linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.035) 75%) 0 0 / 28px 28px, linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.035) 75%) 14px 14px / 28px 28px, #0c0e13; }
.pv-player { position:absolute; inset:0; } .pv-frame { width:100%; height:100%; border:0; display:block; }
.pv-ov { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.pv-ov-frame { width:1920px; height:1080px; border:0; transform-origin:0 0; background:transparent; color-scheme:normal; }
.pv-off { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:6px; text-align:center; padding:20px;
  background:radial-gradient(60% 70% at 50% 40%, rgba(139,92,246,.07), transparent 70%), #0b0d12; }
.pv-off b { font-size:18px; } .pv-off .muted { max-width:420px; font-size:13px; }
.pv-badge { position:absolute; left:10px; top:10px; z-index:2; font-size:11px; font-weight:800; letter-spacing:.04em; padding:3px 8px; border-radius:6px; background:rgba(0,0,0,.65); color:#cfd6e4; }
.pv-badge.live { background:#ff3b30; color:#fff; }
.pv-note { margin:8px 0 0; }
@media (max-width:640px) { .pv-tools { margin-left:0; width:100%; } }
.dash > .pv-card { grid-area:pv; margin:0; } .pv-stage { max-width:1100px; margin:0 auto; } .pv-note { text-align:center; }


/* ---- brand: purple / red / amber (WCAG: white on #7c3aed 5.7:1, #b9a3ff on #151324 7.9:1) ---- */
button:not(.ghost):not(.secondary):not(.link):not(.swatch-btn):not(.preset-sw), .btn:not(.secondary):not(.ghost), input[type=submit] {
  background:var(--grad); color:#fff; border-color:transparent; text-shadow:0 1px 0 rgba(0,0,0,.15); }
button:not(.ghost):not(.secondary):not(.link):not(.swatch-btn):not(.preset-sw):hover:not(:disabled), .btn:not(.secondary):not(.ghost):hover { filter:brightness(1.08); }
.pill.ok { color:#c9b8ff; background:var(--accent-soft); border-color:var(--accent-line); }
.badge.live, .pill.live, .pv-badge.live, .vchip.live { background:var(--red); color:#fff; border-color:transparent; }
[data-stat="tips"], .tip-amt, .amount { color:var(--amber-text); }
.brand-mark, .logo { background:var(--grad); color:#fff; }
::selection { background:rgba(139,92,246,.35); }
body { background-image: radial-gradient(1100px 560px at 85% -10%, rgba(139,92,246,.09), transparent 60%), radial-gradient(800px 400px at -10% 110%, rgba(220,38,38,.05), transparent 60%); }
.dash [data-stat="tips"] { color:var(--amber-text) !important; }

.dash > .ovc-card { grid-area:ovc; margin:0; } .pv-card.ov-off .pv-ov { opacity:.25; } .pv-flags { display:flex; gap:6px; } .pv-flag { font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px; background:#ef4444; color:#fff; } .pv-flag.amber { background:#f59e0b; color:#1a1000; }
@media (min-width:1101px) { .dash > .ovc-card .ovc-widgets { grid-template-columns:1fr 1fr; } }
.pv-seg button { background:transparent !important; color:var(--muted) !important; text-shadow:none; } .pv-seg button[aria-pressed="true"] { background:var(--accent-2) !important; color:#fff !important; }
[data-ovc] .ovc-btn { background:#1c192e !important; color:#eeedf6 !important; text-shadow:none; } [data-ovc] .ovc-btn.on { background:#ef4444 !important; color:#fff !important; } [data-ovc] .ovc-btn.ghost { background:transparent !important; }

/* ---- sidebar: collapsible icon rail (desktop), off-canvas drawer (phones) ---- */
.rail-btn { margin:0 0 0 auto; padding:6px; min-height:0; width:32px; height:32px; display:inline-grid; place-items:center; border-radius:8px;
  background:transparent !important; color:var(--muted) !important; border:1px solid transparent; box-shadow:none; text-shadow:none; }
.rail-btn:hover { color:var(--text) !important; border-color:var(--line-2); }
.nav-support { display:flex; align-items:center; gap:12px; } .nav-support .ico { flex:none; color:var(--red); }
.site-nav a.on { background:var(--accent-soft); color:#fff; } .site-nav a.on .ico { color:var(--accent-text); }
@media (min-width:768px) {
  header.site, body.has-nav main { transition:width .18s ease, margin .18s ease; }
  body.nav-rail { --nav-w:72px; }
  body.nav-rail header.site .bar { flex-direction:column; padding:14px 0 8px; gap:10px; }
  body.nav-rail header.site .brand-name, body.nav-rail .nav-title, body.nav-rail .site-nav a > span, body.nav-rail .nav-support > span,
  body.nav-rail .who-name, body.nav-rail .nav-foot form span, body.nav-rail .switcher { display:none; }
  body.nav-rail .rail-btn { margin:0; } body.nav-rail .rail-btn .ico { transform:scaleX(-1); }
  body.nav-rail .site-nav { padding:8px 10px; gap:10px; overflow:visible; }
  body.nav-rail .nav-group { border-top:1px solid var(--line); padding-top:8px; } body.nav-rail .nav-group:first-of-type { border-top:0; }
  body.nav-rail .site-nav a, body.nav-rail .nav-support { justify-content:center; padding:10px 0; position:relative; }
  body.nav-rail .nav-foot { flex-direction:column; gap:8px; align-items:center; }
  /* tooltips while collapsed */
  body.nav-rail [data-tip]:hover::after, body.nav-rail [data-tip]:focus-visible::after { content:attr(data-tip); position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
    white-space:nowrap; padding:6px 10px; border-radius:8px; background:#221e36; border:1px solid var(--line-2); color:var(--text); font-size:13px; font-weight:600; box-shadow:var(--shadow-lg); z-index:60; pointer-events:none; }
}
@media (max-width:767.98px) {
  .rail-btn { display:none; }
  header.site .site-nav { display:flex; position:fixed; top:0; bottom:0; left:0; right:auto; width:min(300px, 86vw); max-height:none; border-radius:0 var(--r-lg) var(--r-lg) 0;
    transform:translateX(-105%); transition:transform .2s ease; z-index:70; padding:18px 12px; visibility:hidden; }
  body.nav-open header.site .site-nav { transform:none; animation:none; visibility:visible; }
  body.nav-open::after { content:""; position:fixed; inset:0; background:rgba(5,4,10,.6); z-index:65; }
}
header.site .menu-btn { background:var(--panel-2) !important; color:var(--text) !important; text-shadow:none; }
.dash-tabs button { background:transparent !important; color:var(--muted) !important; text-shadow:none; } .dash-tabs button[aria-selected="true"] { background:var(--accent-2) !important; color:#fff !important; }