:root {
  color-scheme: light dark;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #203047;
  background: #f3f5f8;
  --panel: #fff;
  --border: #d5dce6;
  --muted: #52627a;
  --primary: #156174;
  --button: #f1f5f9;
}
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
.facilitator-page { max-width: 1180px; margin: 0 auto; padding: 24px 20px; }
.page-header, .section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.page-header { margin-bottom: 20px; }
h1 { margin: 0; font-size: 1.7rem; }
h2 { margin: 0 0 12px; font-size: 1.15rem; }
h3 { margin: 24px 0 10px; font-size: 1rem; }
p { line-height: 1.5; margin: 8px 0 14px; }
nav { display: flex; flex-wrap: wrap; gap: 16px; }
a { color: #155ea4; }
.panel { padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.muted, dt { color: var(--muted); font-size: .9rem; }
.status { min-height: 1.5em; overflow-wrap: anywhere; }
.status:empty { display: none; }
.status.error { color: #a32b24; }
button, select, textarea, input {
  font: inherit; color: inherit; border: 1px solid var(--border); border-radius: 7px;
}
button { min-height: 42px; padding: 8px 14px; background: var(--button); cursor: pointer; }
button:hover:not(:disabled) { filter: brightness(.96); }
button:disabled { opacity: .52; cursor: default; }
button.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
button[aria-pressed="true"] { outline: 2px solid var(--primary); outline-offset: -2px; font-weight: 650; }
button:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible { outline: 3px solid #3987c9; outline-offset: 2px; }
select, textarea, input { min-width: 0; padding: 9px; background: var(--panel); }
input { display: block; width: 100%; margin: 8px 0; }
textarea { width: 100%; resize: vertical; }
.pairing-layout { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
.pairing-code { font-size: 2rem; font-family: ui-monospace, monospace; letter-spacing: .16em; font-weight: 700; }
.pairing-qr { max-width: 100%; }
.pairing-qr svg { width: 180px; height: 180px; max-width: 100%; display: block; border-radius: 7px; }
.workspace { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.phone-list { display: flex; flex-direction: column; gap: 8px; }
.phone-card { text-align: left; width: 100%; overflow-wrap: anywhere; }
.phone-card strong, .phone-card span { display: block; }
.phone-card span { color: var(--muted); font-size: .85rem; margin-top: 4px; }
.phone-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0; }
.phone-summary dt { margin-bottom: 4px; }
.phone-summary dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.control-buttons, .tool-fields { display: flex; flex-direction: column; gap: 10px; }
.phase-buttons, .button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.phase-buttons > *, .button-row > * { flex: 1; }
.facilitator-tools { margin-top: 20px; }
summary { cursor: pointer; padding: 6px 0; }
.tool-fields { padding-top: 12px; }
.activity-list { padding-left: 24px; margin: 0; }
.activity-list li { padding: 5px 0; line-height: 1.4; overflow-wrap: anywhere; }
.activity-time { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 10px; font-size: .85rem; }
footer { margin-top: 24px; font-size: .9rem; }
@media (max-width: 700px) {
  .facilitator-page { padding: 16px 12px; }
  .page-header, .section-heading { flex-wrap: wrap; align-items: flex-start; }
  .workspace { grid-template-columns: 1fr; }
  .pairing-layout { grid-template-columns: 1fr; gap: 12px; }
  .phone-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel { padding: 16px; }
}
@media (prefers-color-scheme: dark) {
  :root { color: #e2eaf3; background: #101923; --panel: #192533; --border: #405064; --muted: #a6b9ce; --button: #26374a; --primary: #287c8e; }
  a { color: #9dccff; }
  .status.error { color: #ffaea5; }
}