/* /stage/book and /stage/admin — paid Main Stage slots (1.99al) */
.sb { --card: var(--ds-surface); --line: var(--ds-line); --muted: var(--ds-text-muted); --green: var(--ds-green); --lime: var(--ds-green-2); --gold: var(--ds-gold); --red: #ff5252;   /* 1.99po: on the ds tokens (lime retired) */
      max-width: 980px; margin: 0 auto; padding: 14px 16px 56px; font-family: Ubuntu, sans-serif; color: #e6e6e6;
      display: grid; gap: 14px; box-sizing: border-box; width: 100%; }
.sb *, .sb *::before, .sb *::after { box-sizing: border-box; }
.sb a { color: #81c784; text-decoration: none; }
.sb a:hover { color: #a5d6a7; }
.sb .hide { display: none !important; }
.sb .muted { color: var(--muted); font-size: 13px; line-height: 1.5; }
.sb .center { text-align: center; }
.sb-head { background: none; padding: 0; margin: 0; }
.sb-head h1 { margin: 6px 0 4px; font-size: 26px; }
.sb-head .lede { margin: 0; color: #c9d3c9; font-size: 15px; line-height: 1.5; }
.sb-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.sb h2 { margin: 0 0 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-family: 'Press Start 2P', monospace; font-size: 10px; line-height: 1.6; }
.sb .note { margin: 0; font-size: 15px; }
.sb .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.sb .fact { background: rgba(0,0,0,.35); border: 1px solid #1f2a20; border-radius: 10px; padding: 8px 12px; display: grid; gap: 2px; min-width: 0; }
.sb .fact .k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sb .fact .v { font-size: 20px; font-weight: bold; color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sb .fact .v small { font-size: 12px; color: var(--muted); font-weight: normal; }
.sb .steps { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.5; color: #d5dcd5; }
.sb .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border-radius: 9px; border: 1px solid #2b2b2b;
           background: #181818; color: #ddd !important; font-size: 14px; font-weight: bold; cursor: pointer; font-family: inherit; text-decoration: none; }
.sb .btn:hover, .sb .btn:focus-visible { border-color: var(--green); }
.sb .btn.primary { background: var(--green); border-color: var(--green); color: var(--ds-on-ac) !important; }   /* dark ink: white on #4caf50 was 2.8:1 */
.sb .btn.danger { background: #2a1010; border-color: #5a2222; color: #ffb4b4 !important; }
.sb .btn.danger:hover { border-color: var(--red); }
.sb .btn[disabled] { opacity: .5; cursor: not-allowed; }
.sb .row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.sb .msg { min-height: 18px; margin: 6px 0 0; font-size: 14px; color: var(--ds-warn); }
.sb input[type=text], .sb input[type=password], .sb input[type=number], .sb select, .sb textarea {
  background: #0d0d0d; color: #eee; border: 1px solid #333; border-radius: 7px; padding: 8px 10px; font: inherit; font-size: 14px; min-width: 0; }
.sb .book { display: grid; gap: 10px; }
.sb .book .btn { justify-self: start; }
.sb .book label { font-size: 13px; color: #bbb; }
.sb .mins { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sb .mins input[type=range] { flex: 1 1 200px; accent-color: var(--green); }
.sb .mins .num { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sb .mins input[type=number] { width: 90px; }
.sb .hold { font-size: 16px; }
.sb .hold b { color: var(--gold); }
.sb .slot-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.sb .state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 10px; border-radius: 999px; font-weight: bold; letter-spacing: .05em; }
.sb .state.live { background: #3a1010; border: 1px solid #7a2222; color: #ffb4b4; }
.sb .state.wait { background: #1c1c1c; border: 1px solid #333; color: #bbb; }
.sb .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: sbPulse 1.6s ease-in-out infinite; display: inline-block; }
@keyframes sbPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.sb .tabs { display: flex; gap: 6px; margin: 14px 0 10px; border-bottom: 1px solid #222; flex-wrap: wrap; }
.sb .tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: #aaa; padding: 8px 10px; font: inherit; font-size: 14px; font-weight: bold; cursor: pointer; }
.sb .tabs button[aria-selected=true] { color: #fff; border-bottom-color: var(--lime); }
.sb .tabs button:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.sb .pane p { font-size: 14px; line-height: 1.5; }
.sb .kv { display: grid; gap: 4px; font-size: 13px; color: #bbb; margin: 10px 0; }
.sb .copyrow { display: flex; gap: 6px; min-width: 0; align-items: center; }
.sb .copyrow .btn { flex: none; }
.sb .copyrow input { flex: 1 1 auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.sb .web { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.sb .preview { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid #262626; border-radius: 12px; overflow: hidden; }
.sb .preview video { width: 100%; height: 100%; object-fit: contain; display: block; }
.sb .preview .pv-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #777; font-size: 14px; }
.sb .preview .onair { position: absolute; top: 8px; left: 8px; display: inline-flex; gap: 6px; align-items: center; background: rgba(58,16,16,.9); border: 1px solid #7a2222; color: #ffb4b4;
                      font-size: 12px; font-weight: bold; padding: 3px 9px; border-radius: 999px; }
.sb .src { border: 1px solid #262626; border-radius: 10px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; }
.sb .src legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
.sb .src label { font-size: 14px; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.sb .rate { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #bbb; font-variant-numeric: tabular-nums; }
.sb .rate b { color: #fff; min-width: 3ch; text-align: right; }
.sb .meter { flex: 1 1 auto; height: 6px; background: #1c1c1c; border-radius: 3px; overflow: hidden; max-width: 160px; }
.sb .meter span { display: block; height: 100%; width: 0; background: var(--green); transition: width .4s; }
/* admin */
.sb table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sb th, .sb td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #1d1d1d; vertical-align: top; }
.sb th { color: var(--muted); font-weight: normal; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.sb td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sb .tblwrap { overflow-x: auto; }
.sb .settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.sb .settings label { display: grid; gap: 4px; font-size: 12.5px; color: #bbb; }
.sb .chk { display: inline-flex !important; grid-auto-flow: column; align-items: center; gap: 8px !important; }
.sb form.row input[type=text] { flex: 1 1 180px; width: auto; }
.sb .settings select { width: 100%; }
.sb .live-tag { color: #ffb4b4; font-weight: bold; }
@media (max-width: 760px) { .sb .web { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .sb { padding: 10px 10px 44px; } .sb-head { background: none; padding: 0; margin: 0; }
.sb-head h1 { font-size: 22px; } .sb .fact .v { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .sb .dot { animation: none; } }
/* 1.99ba: the Go live hub - room picker, choices, upcoming list; owner + rooms admin pages */
.sb .book2 { display: grid; gap: 12px; }
.sb .book2 .fld { display: grid; gap: 5px; font-size: 13px; color: #bbb; }
.sb .book2 .fld select, .sb .book2 .fld input { width: 100%; }
.sb .roominfo { margin: -4px 0 0; min-height: 1.2em; }
.sb .choice { border: 1px solid #262626; border-radius: 12px; padding: 8px; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; }
.sb .choice legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
.sb .choice label { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 9px; border: 1px solid #222; background: #0d0d0d; cursor: pointer; min-width: 0; }
.sb .choice label:has(input:checked) { border-color: var(--green); background: var(--ds-green-bg); }
.sb .choice input { margin-top: 3px; accent-color: var(--green); flex: none; }
.sb .choice span { display: grid; gap: 2px; min-width: 0; }
.sb .choice b { font-size: 14px; color: #fff; }
.sb .choice small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
/* "Use my Twitch channel" suggestion under the link field */
.sb .twsug { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: -4px; font-size: 12px; }
.sb .twsug .chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 11px; border-radius: 999px; border: 1px solid #6441a5;
                   background: #1b1426; color: #e6dcff; font: inherit; font-size: 13px; cursor: pointer; }
.sb .twsug .chip:hover, .sb .twsug .chip:focus-visible { border-color: #9b6bff; background: #241a35; }
.sb .twsug .chip small { color: #b9a6e8; overflow-wrap: anywhere; }
.sb .btn.big { font-size: 16px; padding: 11px 20px; justify-self: start; }
.sb .btn.gold { background: #1d1a0f; border-color: #6b5a20; color: #f3e3a3 !important; }
.sb .mylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sb .mylist li { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; background: rgba(0,0,0,.35); border: 1px solid #1f2a20; border-radius: 10px; padding: 8px 10px; font-size: 13.5px; }
.sb .mylist li > span { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.sb .mylist .btn { padding: 5px 10px; font-size: 12.5px; }
.sb .toggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.sb .toggle { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: rgba(0,0,0,.35); border: 1px solid #1f2a20; border-radius: 10px; padding: 8px 10px; font-size: 13.5px; }
.sb .toggle .on { color: #9be3a6; font-weight: bold; } .sb .toggle .off { color: #888; }
.sb .pillrow { display: flex; flex-wrap: wrap; gap: 6px; }
.sb .tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid #333; color: #bbb; white-space: nowrap; }
.sb .tag.gold { border-color: #6b5a20; color: #f3e3a3; background: #1d1a0f; }
.sb .tag.red { border-color: #7a2222; color: #ffb4b4; background: #3a1010; }
.sb textarea { width: 100%; min-height: 80px; resize: vertical; }
.sb .settings textarea, .sb .settings input[type=text] { width: 100%; }
.sb .big-num { font-size: 26px; font-weight: bold; color: var(--gold); font-variant-numeric: tabular-nums; }
.sb .meter2 { height: 8px; background: #1c1c1c; border-radius: 999px; overflow: hidden; }
.sb .meter2 span { display: block; height: 100%; background: linear-gradient(90deg, var(--ds-green), var(--ds-green-2)); }
@media (max-width: 520px) { .sb .choice { grid-template-columns: minmax(0, 1fr); } .sb .btn.big { justify-self: stretch; } }
/* 1.99bx: camera / mic pickers + Switch camera on the browser stream */
.sb .devs { display: grid; gap: 8px; margin: 8px 0; }
.sb .devs .fld { display: grid; gap: 4px; font-size: 13px; color: #bbb; min-width: 0; }
.sb .devs select { width: 100%; max-width: 100%; text-overflow: ellipsis; }
.sb .devs select:disabled { opacity: .6; }
.sb .devs .btn { justify-self: start; }
.sb .devs .muted { margin: 0; font-size: 12.5px; }
.sb .devs .muted:empty { display: none; }
/* 1.99cr: your slot's snap / clip settings (stagecap.js) */
.sb .capopts { border: 1px solid #262626; border-radius: 10px; padding: 8px 12px; display: grid; gap: 6px; margin: 10px 0 0; }
.sb .capopts legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
.sb .capopts label { font-size: 14px; display: flex; gap: 8px; align-items: flex-start; cursor: pointer; line-height: 1.4; }
.sb .capopts input { margin-top: 3px; accent-color: #4caf50; }
/* 1.99fk: 🟣 Also stream to Twitch (restream.js) */
.sb .rs-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 8px 0; }
.sb .rs-badge { display: inline-block; border: 1px solid #3a2a5c; background: #1a1229; color: #c9b5ff; border-radius: 999px; padding: 3px 10px; font-size: 13px; overflow-wrap: anywhere; }
.sb .rs-badge.rs-live { border-color: #9146ff; background: #2a1650; color: #fff; }
.sb .rs-badge.rs-error { border-color: var(--red); color: #ffb3b3; background: #2a1212; }
.sb .rs-warn { color: var(--gold); font-size: 13px; }
.sb #rsSaved { margin: 0 0 10px; overflow-wrap: anywhere; }
/* 1.99jn: 📼 Play from Plex in the Go-live flow (stage-plex.js) */
.sb .choice label.locked { opacity: .55; cursor: not-allowed; }
.sb .pxlock { margin: 0; font-size: 13px; }
.sb #bookForm.plex-mode .np { display: none !important; }
.sb .px { display: grid; gap: 10px; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.sb .px .pxnote { margin: 0; font-size: 13px; color: var(--gold); }
.sb .px form.row { display: flex; gap: 8px; flex-wrap: wrap; }
.sb .px form.row input { flex: 1 1 220px; min-width: 0; }
.sb .px-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.sb .px-it { background: #0b0b0b; border: 1px solid #222; border-radius: 10px; padding: 6px; cursor: pointer; text-align: left; color: #ddd; font: inherit; display: grid; gap: 4px; min-width: 0; }
.sb .px-it:hover, .sb .px-it:focus-visible { border-color: var(--green); }
.sb .px-it img, .sb .px-ph { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; background: #1a1a1a; display: block; }
.sb .px-it b { font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.sb .px-it small { color: var(--muted); font-size: 11.5px; }
.sb .px-pick { border: 1px solid #262626; border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; min-width: 0; }
.sb .px-pick .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sb .px-pick label { font-size: 13px; color: #bbb; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sb .px-pick select, .sb .px-pick input[type=text] { max-width: 100%; }
.sb .px-eps { max-height: 280px; overflow: auto; display: grid; gap: 4px; }
.sb .px-eps button { text-align: left; overflow-wrap: anywhere; }
.sb .px-price { font-size: 15px; }
.sb .px-price b { color: var(--lime); }
.sb .pxnow { background: rgba(76,175,80,.08); border: 1px solid #1f3a20; border-radius: 10px; padding: 10px 12px; margin: 8px 0; display: grid; gap: 8px; min-width: 0; }
.sb .pxnow .px-bar { height: 6px; background: #222; border-radius: 3px; overflow: hidden; }
.sb .pxnow .px-bar span { display: block; height: 100%; background: var(--green); }
.sb .pxnow .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sb .pxnow input[type=text] { width: 90px; }
/* 1.99lr: 📼 queues - my list (before it starts) and what's left of the one playing */
.sb .px-list, .sb .pxq { border: 1px solid #262626; border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; min-width: 0; }
.sb .pxq { border-color: #1f3a20; }
.sb .px-list ol, .sb .pxq ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; max-height: 320px; overflow: auto; }
.sb .px-list li, .sb .pxq li { overflow-wrap: anywhere; }
.sb .px-list li > span:first-child, .sb .pxq li > span:first-child { margin-right: 6px; }
.sb .px-ctl { display: inline-flex; gap: 4px; vertical-align: middle; }
.sb .px-ctl .btn { padding: 2px 8px; min-height: 28px; font-size: 13px; }
.sb .px-list .row { display: flex; gap: 8px; flex-wrap: wrap; }
.sb .px-warn { color: var(--gold); }
.sb .pxq-next summary { cursor: pointer; color: #bbb; }
/* 1.99po: .sb pages migrated to the design system add .ds-page to their <main> (Go live, Requests). These rules give the
   legacy .sb parts the ds metrics: 44px pill buttons and fields, 16-radius cards, the 12px pixel section heading, gold focus.
   :where(.ds-page) keeps the specificity at .sb level, so the compact variants above (.mylist .btn, .px-ctl .btn) still win.
   Admin pages that still use a bare .sb are untouched until they are polished. */
.sb.ds-page { max-width: var(--ds-w); padding: var(--ds-sp-4) var(--ds-gutter) var(--ds-sp-14); gap: var(--ds-sp-4); }
.sb:where(.ds-page) .sb-head { display: grid; gap: var(--ds-sp-1h); }
.sb:where(.ds-page) .sb-head h1 { margin: 2px 0 0; font: 700 var(--ds-fs-h1)/var(--ds-lh-h1) var(--ds-font); color: var(--ds-text-strong); text-wrap: balance; }
.sb:where(.ds-page) .sb-head .lede { max-width: 68ch; color: var(--ds-text-2); font-size: var(--ds-fs-lead); line-height: var(--ds-lh-lead); }
.sb:where(.ds-page) .sb-head .muted { margin: 0; }
.sb:where(.ds-page) .sb-card { border-radius: var(--ds-r-xl); padding: var(--ds-sp-4); }
@media (min-width: 700px) { .sb:where(.ds-page) .sb-card { padding: var(--ds-sp-5); } }
.sb:where(.ds-page) h2 { margin: 0 0 var(--ds-sp-3); font: var(--ds-fs-pixel-h)/1.6 var(--ds-font-pixel); letter-spacing: var(--ds-ls-pixel-h); color: var(--ds-gold); }
.sb:where(.ds-page) h3 { margin: var(--ds-sp-4) 0 var(--ds-sp-2); font: 700 var(--ds-fs-h4)/var(--ds-lh-h4) var(--ds-font); color: var(--ds-text); }
.sb:where(.ds-page) .muted { color: var(--ds-text-muted); }
.sb:where(.ds-page) .note { font-size: var(--ds-fs-body); line-height: var(--ds-lh-body); }
.sb:where(.ds-page) .btn { min-height: var(--ds-tap); padding: 0 var(--ds-sp-4); border-radius: var(--ds-r-pill); border-color: var(--ds-line-strong); background: #1c1c1f; font: 700 14px/1.1 var(--ds-font);
                           transition: border-color var(--ds-dur-1), filter var(--ds-dur-1); }
.sb:where(.ds-page) .btn:hover { border-color: var(--ds-green); }
.sb:where(.ds-page) .btn.primary { background: var(--ds-green); border-color: transparent; }
.sb:where(.ds-page) .btn.primary:hover { filter: brightness(1.1); }
.sb:where(.ds-page) .btn.danger { background: var(--ds-danger-fill); border-color: var(--ds-danger-line); color: var(--ds-danger-ink) !important; }
.sb:where(.ds-page) .btn.gold { background: var(--ds-gold-bg); border-color: var(--ds-gold-line); color: var(--ds-gold-text) !important; }
.sb:where(.ds-page) .btn.big { min-height: 52px; padding: 0 var(--ds-sp-6); font-size: 16px; }
.sb:where(.ds-page) .btn.sm { min-height: 36px; padding: 0 var(--ds-sp-3); font-size: var(--ds-fs-meta); }
.sb:where(.ds-page) .btn[disabled] { opacity: 1; filter: grayscale(.6) brightness(.7); }
.sb:where(.ds-page) .btn:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.sb:where(.ds-page) a:focus-visible, .sb:where(.ds-page) input:focus-visible, .sb:where(.ds-page) summary:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.sb:where(.ds-page) :is(input[type=text], input[type=password], input[type=number], input[type=search], input[type=datetime-local], select, textarea) {
  margin: 0; min-height: var(--ds-tap); padding: 10px 12px; border-radius: var(--ds-r-md); border: 1px solid var(--ds-line-strong); background: var(--ds-sunken); color: #eee;
  font: 400 15px/1.3 var(--ds-font); transition: border-color var(--ds-dur-1), box-shadow var(--ds-dur-1); }
.sb:where(.ds-page) :is(input, select, textarea):hover { border-color: #444; }
.sb:where(.ds-page) :is(input[type=text], input[type=password], input[type=number], input[type=search], input[type=datetime-local], select, textarea):focus { outline: none; border-color: var(--ds-green); box-shadow: 0 0 0 3px var(--ds-green-bg); }
.sb:where(.ds-page) input[type=search] { flex: 1 1 220px; min-width: 0; }
.sb:where(.ds-page) input[type=checkbox], .sb:where(.ds-page) input[type=radio] { width: 18px; height: 18px; accent-color: var(--ds-green); }
.sb:where(.ds-page) .copyrow input { font-family: var(--ds-font-mono); font-size: 13px; }
.sb:where(.ds-page) .row { margin: var(--ds-sp-2h) 0; gap: var(--ds-sp-2); }
.sb:where(.ds-page) form.row { margin: 0; }
.sb:where(.ds-page) .fact { background: var(--ds-sunken); border-color: var(--ds-line-soft); border-radius: var(--ds-r-md); padding: var(--ds-sp-2h) var(--ds-sp-3); }
.sb:where(.ds-page) .fact .k { font-weight: 700; letter-spacing: var(--ds-ls-label); }
.sb:where(.ds-page) .fact .v { font-size: var(--ds-fs-num); font-weight: 700; line-height: 1.25; }
.sb:where(.ds-page) .steps { font-size: var(--ds-fs-body); line-height: 1.55; color: var(--ds-text); }
.sb:where(.ds-page) .tabs { gap: 4px; border-bottom-color: var(--ds-line); }
.sb:where(.ds-page) .tabs button { min-height: var(--ds-tap); padding: 0 var(--ds-sp-3); color: var(--ds-text-muted); }
.sb:where(.ds-page) .tabs button:hover { color: #fff; }
.sb:where(.ds-page) .tabs button[aria-selected=true] { color: #fff; border-bottom-color: var(--ds-green); }
.sb:where(.ds-page) .choice, .sb:where(.ds-page) .src, .sb:where(.ds-page) .capopts { border-color: var(--ds-line); border-radius: var(--ds-r-lg); padding: var(--ds-sp-2) var(--ds-sp-2h) var(--ds-sp-2h); }
.sb:where(.ds-page) .choice legend, .sb:where(.ds-page) .src legend, .sb:where(.ds-page) .capopts legend { font-size: 11px; font-weight: 700; letter-spacing: var(--ds-ls-label); text-transform: uppercase; color: #b9b9b9; }
.sb:where(.ds-page) .choice label { min-height: var(--ds-tap); padding: var(--ds-sp-2h) var(--ds-sp-3); border-radius: var(--ds-r-md); border-color: var(--ds-line); background: var(--ds-sunken); }
.sb:where(.ds-page) .choice label:hover { border-color: #444; }
.sb:where(.ds-page) .choice label:has(input:focus-visible) { box-shadow: var(--ds-focus-ring); }
.sb:where(.ds-page) .src label, .sb:where(.ds-page) .capopts label { min-height: 36px; align-items: center; }
.sb:where(.ds-page) .capopts input { margin-top: 0; }
.sb:where(.ds-page) .book2 .fld, .sb:where(.ds-page) .devs .fld, .sb:where(.ds-page) .kv { gap: 6px; font-size: var(--ds-fs-meta); color: #b9b9b9; }
.sb:where(.ds-page) .state { font-size: 11px; letter-spacing: var(--ds-ls-chip); text-transform: uppercase; padding: 3px 10px; }
.sb:where(.ds-page) .state.live { background: var(--ds-danger-bg); border-color: var(--ds-danger-line); color: var(--ds-danger); }
.sb:where(.ds-page) .dot { background: var(--ds-live); }
.sb:where(.ds-page) .preview { border-radius: var(--ds-r-lg); border-color: var(--ds-line); }
.sb:where(.ds-page) .preview .pv-empty { color: var(--ds-text-faint); }
.sb:where(.ds-page) .meter span { background: var(--ds-green); }
.sb:where(.ds-page) .hold b { color: var(--ds-gold-text); }
.sb:where(.ds-page) .mylist li { min-height: var(--ds-tap); background: var(--ds-sunken); border-color: var(--ds-line-soft); padding: var(--ds-sp-2) var(--ds-sp-3); }
.sb:where(.ds-page) .px-it, .sb:where(.ds-page) .mr-it { border-radius: var(--ds-r-md); }
.sb:where(.ds-page) .center { margin: 0; }
.sb:where(.ds-page) .center a { display: inline-flex; align-items: center; min-height: 36px; }
@media (max-width: 520px) { .sb.ds-page { padding: var(--ds-sp-4) var(--ds-gutter) var(--ds-sp-12); } .sb:where(.ds-page) .fact .v { font-size: var(--ds-fs-num); } }
@media (prefers-reduced-motion: reduce) { .sb .meter span, .sb:where(.ds-page) .btn, .sb:where(.ds-page) input, .sb:where(.ds-page) select { transition: none; } }