:root {
  --bg: #0e1116; --panel: #161b23; --panel2: #1d242f; --border: #2a3340;
  --text: #e6ebf2; --muted: #8b98a9; --accent: #4f8ef7; --accent2: #7c5cff;
  --good: #34c98e; --warn: #f2b544; --bad: #ef6a6a;
  --radius: 10px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; }
a { color: var(--accent); text-decoration: none; }
button { font-family: var(--font); cursor: pointer; border: none; border-radius: 8px; padding: 9px 16px; font-size: 14px; font-weight: 600; }
button.primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
button.small { padding: 5px 10px; font-size: 12.5px; }
button:disabled { opacity: 0.5; cursor: default; }
input, textarea, select { background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 14px; font-family: var(--font); width: 100%; }
input:focus, textarea:focus { outline: none; border-color: var(--accent); }
label { display: block; font-size: 12.5px; color: var(--muted); margin: 12px 0 5px; font-weight: 600; }

.topbar { display: flex; align-items: center; gap: 14px; padding: 12px 22px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, #141a24, var(--panel)); position: sticky; top: 0; z-index: 50; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand .mark { width: 22px; height: 22px; flex: none; filter: drop-shadow(0 2px 6px rgba(124,92,255,0.35)); }
.brand .name { font-weight: 800; font-size: 17px; letter-spacing: -0.2px; }
.brand .name b { background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand .tag { font-size: 10px; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 1px; }
.logo { font-weight: 800; font-size: 17px; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--muted); font-size: 13px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 26px 22px 80px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; }
.card.click:hover { border-color: var(--accent); cursor: pointer; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
h1 { font-size: 22px; margin: 0 0 16px; } h2 { font-size: 17px; margin: 0 0 10px; } h3 { font-size: 15px; margin: 0 0 6px; }
.muted { color: var(--muted); font-size: 13px; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; background: var(--panel2); color: var(--muted); border: 1px solid var(--border); }
.pill.active, .pill.running, .pill.in_interview { color: var(--warn); border-color: var(--warn); }
.pill.closing { color: var(--warn); border-color: var(--warn); opacity: .85; }
.pill.paused { color: var(--accent2); border-color: var(--accent2); }
.pill.completed, .pill.complete, .pill.interviewed, .pill.done { color: var(--good); border-color: var(--good); }
.pill.error, .pill.failed { color: var(--bad); border-color: var(--bad); }
/* Obligation lifecycle: open→requested→answered→verified→closed (+blocked/waived) */
.pill.requested { color: var(--warn); border-color: var(--warn); }
.pill.answered { color: var(--accent2); border-color: var(--accent2); }
.pill.verified, .pill.closed { color: var(--good); border-color: var(--good); }
.pill.blocked { color: var(--bad); border-color: var(--bad); }
.pill.waived { color: var(--muted); border-color: var(--border); opacity: .8; }
/* Collapsible Settings sections */
.sec > summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; gap: 10px; padding: 2px 0; user-select: none; }
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary::before { content: '▶'; color: var(--accent); font-size: 15px; line-height: 1; transition: transform .15s ease; flex: none; }
.sec[open] > summary::before { transform: rotate(90deg); }
.sec > summary:hover::before { color: var(--accent2, var(--accent)); }
.sec > summary h3 { margin: 0; flex: 1; }
.sec > summary > span { flex: none; }
/* Settings category groups — the h2 header + its member cards live inside ONE labeled container,
   so the header is never a bare heading floating between/outside the cards. */
.sgroup { border: 1px solid var(--border); border-radius: 14px; padding: 2px 16px 6px; margin: 0 0 22px; background: rgba(255,255,255,.015); }
.sgroup > h2 { font-size: 12.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin: 15px 2px 14px; padding-bottom: 9px; border-bottom: 1px solid var(--border); }
.sgroup > .card:last-child, .sgroup > details:last-child { margin-bottom: 8px; }
.pill.delivered { color: var(--good); border-color: var(--good); }
.pill.unconfirmed { color: var(--warn); border-color: var(--warn); }
.pill.suggested { color: var(--accent2); border-color: var(--accent2); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; }
.tabs button { background: none; color: var(--muted); border-radius: 8px 8px 0 0; padding: 10px 14px; font-weight: 600; }
.tabs button.on { color: var(--text); border-bottom: 2px solid var(--accent); }
/* Grouped tab bar: category clusters instead of one long row. */
.tabbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 14px; border-bottom: 1px solid var(--border); margin-bottom: 18px; padding-bottom: 4px; }
.tabbar .tabs { border-bottom: none; margin-bottom: 0; gap: 3px; }
.tabgroup { display: flex; flex-direction: column; gap: 2px; }
.tabgroup:not(.pinned) { border-left: 1px solid var(--border); padding-left: 12px; }
.tabcat { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); padding-left: 6px; opacity: .72; }
/* Cascaded menubar (Word/PowerPoint style): top-level buttons; children drop into a submenu. */
.menubar { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; position: relative; z-index: 41; }
.menubar .menutop { background: none; color: var(--muted); border-radius: 8px 8px 0 0; padding: 10px 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.menubar .menutop:hover { color: var(--text); }
.menubar .menutop.active { color: var(--text); border-bottom: 2px solid var(--accent); }
.menubar .menutop.open { background: var(--panel); color: var(--text); }
.menubar .caret { font-size: 9px; opacity: .65; }
.menuwrap { position: relative; display: inline-flex; }
.menudrop { position: absolute; top: 100%; left: 0; min-width: 200px; background: var(--panel); border: 1px solid var(--border); border-radius: 0 8px 8px 8px; box-shadow: 0 10px 28px rgba(0,0,0,.45); padding: 6px; z-index: 45; display: flex; flex-direction: column; gap: 2px; }
.menudrop .menuitem { text-align: left; background: none; color: var(--muted); padding: 8px 12px; border-radius: 6px; font-weight: 600; white-space: nowrap; }
.menudrop .menuitem:hover { background: var(--panel2); color: var(--text); }
.menudrop .menuitem.active { background: var(--panel2); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.menu-backdrop { position: fixed; inset: 0; z-index: 40; background: transparent; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 24px; width: min(560px, 92vw); max-height: 88vh; overflow: auto; }
.err { color: var(--bad); font-size: 13.5px; margin-top: 10px; }
.center { min-height: 90vh; display: flex; align-items: center; justify-content: center; }
.auth-card { width: min(420px, 94vw); }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; font-size: 14px; }
.kv .k { color: var(--muted); }
pre { background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; overflow: auto; font-size: 12.5px; }
.md { line-height: 1.55; } .md h1, .md h2 { margin-top: 22px; } .md table { font-size: 13px; } .md code { background: var(--panel2); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }

/* Chat */
.chat-shell { max-width: 760px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.chat-head { padding: 18px 20px; border-bottom: 1px solid var(--border); }
.chat-scroll { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.bubble { max-width: 82%; padding: 12px 16px; border-radius: 14px; line-height: 1.5; white-space: pre-wrap; }
.bubble.assistant { background: var(--panel); border: 1px solid var(--border); align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.user { background: linear-gradient(135deg, #2b4a8a, #35406e); align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-input { display: flex; gap: 10px; padding: 14px 20px 26px; border-top: 1px solid var(--border); background: var(--bg); }
.chat-input textarea { resize: none; min-height: 48px; max-height: 160px; flex: 1; }
.attach-btn { background: var(--panel2); border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 0 12px; font-size: 18px; line-height: 1; align-self: stretch; }
.attach-btn:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.attach-panel { display: flex; flex-direction: column; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--panel); }
.attach-row { display: flex; align-items: center; gap: 10px; }
.attach-file { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.attach-actions { display: flex; justify-content: flex-end; gap: 8px; }
.typing { color: var(--muted); font-size: 13px; padding: 0 22px 8px; height: 20px; }
.notice { text-align: center; color: var(--muted); padding: 16px; font-size: 13.5px; }

/* Live monitor: admin notes shown inline in the transcript timeline */
.live-note { align-self: center; max-width: 92%; font-size: 12.5px; background: rgba(240, 180, 41, 0.08); border: 1px dashed rgba(240, 180, 41, 0.55); border-radius: 10px; padding: 8px 12px; }
.live-note.delivered { border-style: solid; opacity: 0.7; }
.live-note .dm-time { margin-top: 3px; }

/* Consent / data source UI */
.consent-banner { border: 1px solid var(--accent2); background: rgba(124,92,255,0.08); border-radius: 10px; padding: 12px 14px; font-size: 13px; margin-bottom: 12px; }
.conv { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--border); border-radius: 9px; margin-bottom: 8px; background: var(--panel2); }
.conv input[type=checkbox] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent2); flex: none; }
.conv .body { flex: 1; min-width: 0; }
.conv .nm { font-weight: 600; }
.conv .pv { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.conv .meta { color: var(--muted); font-size: 11px; margin-top: 3px; }
.badge-sens { color: var(--warn); font-weight: 700; font-size: 11px; }
.badge-self { color: var(--accent2); font-weight: 700; font-size: 11px; }
.chip { display:inline-block; padding:2px 8px; border-radius:6px; background:var(--panel2); border:1px solid var(--border); font-size:11px; margin:2px 4px 2px 0; }
.otp-input { letter-spacing: 8px; text-align: center; font-size: 22px; font-weight: 700; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 42px; }
.pw-eye { position: absolute; right: 6px; top: 0; height: 100%; background: none; border: none; cursor: pointer; font-size: 16px; color: var(--muted); padding: 0 8px; }
.pw-eye:hover { color: var(--text); }
.expired-note { border: 1px solid var(--warn); background: rgba(242,181,68,0.1); color: var(--warn); border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }
.qr-box { text-align:center; padding:16px; } .qr-box img { max-width: 240px; border-radius: 8px; background:#fff; padding:8px; }

/* progress bars (cockpit + participant cards + interviewee) */
.prog { height: 7px; background: var(--panel2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.prog-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 999px; transition: width .4s ease; }
.iv-phases { display: flex; gap: 6px; padding: 10px 20px 0; }
.iv-phase { flex: 1; text-align: center; font-size: 10.5px; color: var(--muted); }
.iv-phase .dot { height: 5px; border-radius: 999px; background: var(--border); margin-bottom: 4px; }
.iv-phase.on .dot { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.iv-phase.on { color: var(--text); }
.iv-progress { height: 6px; border-radius: 999px; background: var(--border); margin-top: 8px; overflow: hidden; }
.iv-progress-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .4s ease; }

/* calendar + i18n */
select.mini { padding: 3px 6px; font-size: 12px; min-width: 92px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px; }
.cal-h { text-align: center; font-size: 11px; color: var(--muted); padding-bottom: 2px; }
.cal-cell { min-height: 52px; border-radius: 6px; padding: 4px; cursor: pointer; border: 1px solid var(--border); transition: filter .12s; }
.cal-cell:hover { filter: brightness(1.25); }
.cal-d { font-size: 12px; font-weight: 600; }
.cal-hrs { font-size: 10px; opacity: .85; }
.cal-off { font-size: 10px; opacity: .6; }
.cal-note { font-size: 9px; opacity: .8; margin-top: 2px; line-height: 1.15; overflow: hidden; max-height: 22px; }

/* prompt status ledger */
.prow { display:flex; align-items:center; gap:10px; padding:8px 12px; cursor:pointer; font-size:12.5px; }
.prow:hover { background:rgba(255,255,255,.03); }
.prow-caret { color:var(--muted); width:12px; }
.prow-title { flex:0 0 auto; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prow-co { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prow-t { flex:0 0 auto; white-space:nowrap; font-size:11px; }

/* auto-upgrade toast */
.cb-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  background: linear-gradient(135deg, #2a2350, #1a1a2e);
  color: #fff; border: 1px solid var(--accent, #7c5cff);
  border-radius: 12px; padding: 12px 16px; max-width: 320px; font-size: 13.5px;
  box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(124,92,255,.25);
  transform: translateY(24px) scale(.96); opacity: 0;
  transition: transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .35s;
}
.cb-toast.show { transform: translateY(0) scale(1); opacity: 1; }

/* version + copyright footer */
.ver-footer {
  position: fixed; right: 10px; bottom: 6px; z-index: 40;
  font-size: 10.5px; color: var(--muted, #8a8aa0); opacity: .55;
  pointer-events: none; letter-spacing: .01em; user-select: none;
}

/* online presence dot (admin UI) */
.presence { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: baseline; }
.presence.on { background: var(--good); box-shadow: 0 0 6px rgba(52,201,142,.8); }
.presence.idle { background: var(--bad); }
.presence.off { background: transparent; border: 1.5px solid var(--muted); width: 8px; height: 8px; }

/* direct messages — admin ↔ participant side channel */
.dm-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: 10px 16px; font-size: 13.5px; font-weight: 600;
  display: flex; align-items: center; gap: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.45);
}
.dm-fab.unread { border-color: var(--good); animation: dmPulse 1.6s infinite; }
@keyframes dmPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(52,201,142,.5); } 50% { box-shadow: 0 0 0 10px rgba(52,201,142,0); } }
.dm-badge { background: var(--good); color: #08130d; border-radius: 999px; min-width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; padding: 0 5px; }
.dm-preview { position: fixed; right: 18px; bottom: 68px; z-index: 60; max-width: 280px; background: var(--panel2); border: 1px solid var(--good); border-radius: 12px 12px 2px 12px; padding: 10px 12px; font-size: 13px; box-shadow: 0 8px 28px rgba(0,0,0,.5); }
.dm-panel {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  width: min(360px, calc(100vw - 24px)); height: min(480px, 72vh);
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.55);
}
.dm-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 13.5px; }
.dm-close { background: none; border: none; color: var(--muted); font-size: 14px; padding: 2px 6px; }
.dm-scroll { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.dm-scroll.admin { max-height: 44vh; min-height: 120px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.dm-msg { max-width: 82%; padding: 8px 11px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.dm-msg.them { align-self: flex-start; background: var(--panel2); border: 1px solid var(--border); border-bottom-left-radius: 3px; }
.dm-msg.me { align-self: flex-end; background: rgba(124,92,255,.18); border: 1px solid var(--accent2); border-bottom-right-radius: 3px; }
.dm-time { font-size: 10.5px; color: var(--muted); margin-top: 3px; text-align: right; }
.dm-empty { color: var(--muted); font-size: 13px; text-align: center; margin: auto; padding: 12px; }
.dm-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.dm-input textarea { flex: 1; resize: none; }

/* people: channel priority picker, score meters, process timeline, contact column */
.prio { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 8px; }
.prio-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--panel2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 8px; font-size: 12.5px; }
.prio-n { background: var(--accent2, #7c5cff); color: #fff; border-radius: 50%; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
.prio-b { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 10px; }
.prio-b:hover { color: var(--text); }
.contact-col { font-size: 12px; line-height: 1.5; white-space: nowrap; }
.meter { margin: 2px 0; }
.meter-l { font-size: 12px; color: var(--muted); }
.meter-bar { height: 7px; background: var(--panel2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin-top: 3px; }
.meter-fill { height: 100%; border-radius: 999px; transition: width .4s; }
.timeline { display: flex; flex-direction: column; gap: 0; }
.tl-row { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.tl-row:last-child { border-bottom: none; }
.tl-ic { flex: none; width: 22px; text-align: center; font-size: 14px; }
.tl-body { flex: 1; min-width: 0; font-size: 13px; }
.profile { display: flex; flex-direction: column; gap: 10px; }

/* sticky navigation: topbar (fixed height) + menubar pinned below it on every page */
.topbar { height: 56px; padding: 0 22px; }
.menubar { position: sticky; top: 56px; background: var(--bg); padding-top: 6px; z-index: 41; }
.mb-ctx { color: var(--muted); font-size: 12px; align-self: center; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pagetools { position: sticky; top: 56px; z-index: 41; display: flex; align-items: center; gap: 8px; background: var(--bg); border-bottom: 1px solid var(--border); margin-bottom: 12px; padding: 4px 0; }
.pagetools .menutop { background: none; color: var(--muted); border-radius: 8px; padding: 6px 10px; font-weight: 600; }
.pagetools .menutop:hover { color: var(--text); }
.pt-title { font-size: 13.5px; }
.wrap h1, .wrap h2, .wrap h3, .wrap summary { scroll-margin-top: 120px; }

/* live interview states + message metadata + translations */
.live-on { color: #0d1810 !important; background: var(--good) !important; border-color: var(--good) !important; animation: livePulse 1.6s infinite; font-weight: 700; }
@keyframes livePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(52,201,142,.5); } 50% { box-shadow: 0 0 0 7px rgba(52,201,142,0); } }
.msg-time { font-size: 10px; color: var(--muted); margin-top: 3px; opacity: .8; }
.tr-text { margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--border); color: var(--accent); font-size: 13px; }

/* meetings: green = live now · gray = historic · white/default = future */
.card.mt-live { border-color: var(--good); background: rgba(52,201,142,.07); }
.card.mt-past { opacity: .62; }
.card.mt-future { border-color: var(--border); }

/* Paged list standard: 10/page + search + pager, scrollable body */
.pgd-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.pgd-bar input { width: auto; }
.pgd-body { max-height: 62vh; overflow-y: auto; }

/* E4 in-product docs (📘 Help modal): readable markdown, wider modal via .docmd's parent */
.docmd { font-size: 14px; line-height: 1.65; max-width: 72ch; }
.docmd h1 { font-size: 20px; margin: 4px 0 10px; }
.docmd h2 { font-size: 16.5px; margin: 18px 0 6px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.docmd h3 { font-size: 14.5px; margin: 14px 0 4px; }
.docmd p { margin: 8px 0; }
.docmd ul, .docmd ol { margin: 6px 0 10px; padding-inline-start: 22px; }
.docmd li { margin: 3px 0; }
.docmd code { background: var(--panel2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; font-size: 12.5px; }
.docmd pre code { border: 0; padding: 0; background: transparent; }
.docmd hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.docmd blockquote { border-inline-start: 3px solid var(--accent2, #7c5cff); margin: 8px 0; padding: 2px 12px; color: var(--muted); }

/* Free/paid tag on channel-priority chips */
.ch-cost { font-size:10px; padding:1px 5px; border-radius:6px; margin-left:3px; white-space:nowrap; }
.ch-cost.paid { background:rgba(210,153,34,.18); color:#d29922; }
.ch-cost.free { background:rgba(63,185,80,.15); color:#3fb950; }

/* ==================== GUI PROFILES ====================
   Each profile renders the SAME pages (every feature present); only look/density/layout differ.
   Applied via html[data-gui="<id>"]. 'default' is the base look above (no overrides needed). */

/* Cockpit — dense, power-user (paired with the sidebar layout in JS). */
html[data-gui="cockpit"] { --radius:7px; --accent:#16b8a6; --accent2:#0ea5b7; }
html[data-gui="cockpit"] body { font-size:13.5px; }
html[data-gui="cockpit"] .card { padding:10px 12px; }
html[data-gui="cockpit"] .wrap { max-width:1440px; }
html[data-gui="cockpit"] button.small { padding:3px 8px; font-size:11.5px; }
html[data-gui="cockpit"] th, html[data-gui="cockpit"] td { padding:4px 8px; }
html[data-gui="cockpit"] h1 { font-size:22px; } html[data-gui="cockpit"] h2 { font-size:18px; } html[data-gui="cockpit"] h3 { font-size:15px; }

/* Focus — calm, centered, larger comfortable type, minimal chrome (classic top-menu layout). */
html[data-gui="focus"] { --accent:#7c9cff; --accent2:#a78bfa; }
html[data-gui="focus"] body { font-size:16px; }
html[data-gui="focus"] .wrap { max-width:900px; }
html[data-gui="focus"] .menubar { justify-content:center; flex-wrap:wrap; }
html[data-gui="focus"] .card { padding:18px 20px; }

/* Daylight — bright light theme (classic layout). Only the palette variables are swapped. */
html[data-gui="light"] {
  --bg:#f5f8fc; --panel:#ffffff; --panel2:#eef2f8; --border:#d6dee9;
  --text:#141a24; --muted:#5b6675; --accent:#2f6fed; --accent2:#7c5cff;
}
html[data-gui="light"] .topbar { background:linear-gradient(180deg,#ffffff,#eef2f8); }
html[data-gui="light"] .menutop { color:var(--text); }
html[data-gui="light"] .bubble.assistant { background:#eef2f8; }