:root {
  --primary: #41034d;
  --primary-container: #f3ecf6;
  --on-primary-container: #2c0235;
  --accent: #2a9cb3;
  --accent-strong: #14606f;
  --accent-container: #e3f3f7;
  --on-surface: #1f1a1f;
  --on-surface-variant: #574f57;
  --surface: #faf7fb;
  --surface-container: #f2edf3;
  --surface-container-low: #f6f2f7;
  --surface-container-lowest: #ffffff;
  --surface-container-high: #ebe4ec;
  --outline: #8b8290;
  --outline-variant: #cfc5d0;
  --gradient: linear-gradient(165deg, #f4e5fa, #d9efff);
  --shadow-ambient: 0 12px 32px rgba(31, 26, 31, 0.06);
  --warn: #8a3a22;
  --warn-container: #fdeeea;
  --good: #1f6b4f;
  --good-container: #e6f4ed;
  --radius: 8px;
  --radius-full: 9999px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --motion: 200ms cubic-bezier(0.2, 0, 0, 1);
  --vh: 100vh;
}
@supports (height: 100dvh) { :root { --vh: 100dvh; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: Quicksand, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  overflow: hidden;
}

h1, h2, h3, h4 {
  font-family: Raleway, Quicksand, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

a { color: var(--primary); text-underline-offset: 2px; }

.eyebrow, .mono {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.mono { text-transform: none; letter-spacing: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

button, input, select, textarea { font: inherit; color: inherit; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  min-height: 44px; padding: 10px var(--space-md);
  border: none; border-radius: var(--radius);
  background: var(--surface-container-high); color: var(--on-surface);
  cursor: pointer; font-weight: 600;
  transition: background var(--motion), opacity var(--motion);
}
.btn:hover { background: var(--primary-container); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.btn[aria-busy="true"] { cursor: progress; }
.btn-primary { background: var(--gradient); color: var(--on-primary-container); }
.btn-primary:hover { filter: saturate(1.15); background: var(--gradient); }
.btn-quiet { background: transparent; }
.btn-quiet:hover { background: var(--surface-container); }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }

.field { display: block; margin-bottom: var(--space-md); }
.field > span { display: block; margin-bottom: var(--space-xs); }
input[type="text"], input[type="email"], input[type="password"], select, textarea {
  width: 100%; min-height: 44px; padding: 10px var(--space-md);
  border-radius: var(--radius);
  border: 1px solid var(--outline);
  background: var(--surface-container-lowest);
}
input[aria-invalid="true"] { border-color: var(--warn); }
textarea { resize: vertical; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "DM Mono", monospace; font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--radius-full);
  background: var(--surface-container); color: var(--on-surface-variant);
  white-space: nowrap;
}
.chip:empty { display: none; }
.chip[data-tone="good"] { background: var(--good-container); color: var(--good); }
.chip[data-tone="warn"] { background: var(--warn-container); color: var(--warn); }
.chip[data-tone="accent"] { background: var(--accent-container); color: var(--accent-strong); }
.chip[data-tone="primary"] { background: var(--primary-container); color: var(--primary); }

.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 28px; height: 28px; }

/* ---------- shell ---------- */
#app { display: none; grid-template-rows: auto auto minmax(0, 1fr) auto; height: var(--vh); min-width: 0; }
#app[data-ready="true"] { display: grid; }
#app[inert] { filter: blur(1px); }
#app > .bar { grid-row: 1; }
#app > .stepper { grid-row: 2; }
#app > main { grid-row: 3; }
#app > .pane-bar { grid-row: 4; }

.bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md); padding: var(--space-sm) var(--space-lg);
  background: rgba(250, 247, 251, 0.82);
  backdrop-filter: blur(16px);
  min-width: 0; z-index: 20;
}
.bar h1 { font-size: 1.15rem; }
.bar-left, .bar-right { display: flex; align-items: center; gap: var(--space-sm) var(--space-md); flex-wrap: wrap; min-width: 0; }
.bar-title { display: flex; flex-direction: column; line-height: 1.15; }
#run-picker { width: auto; min-width: 0; max-width: min(340px, 42vw); text-overflow: ellipsis; }
.who { max-width: 28vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.stepper { display: none; min-width: 0; padding: 0 var(--space-lg) var(--space-sm); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-xs); overflow-x: auto; min-width: 0; }
.step {
  flex: 1 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: var(--radius); background: var(--surface-container);
  font-size: 12.5px; font-weight: 600; color: var(--on-surface-variant); white-space: nowrap;
}
.step[data-state="current"] { background: var(--gradient); color: var(--on-primary-container); }
.step[data-state="done"] { color: var(--accent-strong); }
.step[data-state="locked"] { opacity: 0.5; }
.step .rail-num { font-size: 11px; }
.step-next { margin: var(--space-xs) 0 0; font-size: 13px; color: var(--on-surface-variant); }
.step-next:empty { display: none; }
.step-next strong { color: var(--on-surface); }

main {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) minmax(320px, 22%);
  gap: var(--space-md);
  padding: 0 var(--space-lg) var(--space-md);
  min-height: 0; min-width: 0;
}
.pane {
  background: var(--surface-container-low);
  border-radius: var(--radius);
  min-height: 0; min-width: 0; display: flex; flex-direction: column;
}
.pane-body { overflow-y: auto; padding: var(--space-md); min-height: 0; overscroll-behavior: contain; }
.conversation-pane .pane-body { flex: 1 1 auto; }
.pane-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm); padding: var(--space-md) var(--space-md) var(--space-sm);
}

.pane-bar { display: none; }
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full);
  background: var(--accent-strong); color: #fff; font-size: 11px; font-weight: 600;
}

.toast {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 60; max-width: min(520px, calc(100vw - 32px));
  padding: 12px var(--space-md); border-radius: var(--radius);
  background: var(--on-surface); color: #fff; font-size: 14px; box-shadow: var(--shadow-ambient);
}
.toast[data-tone="error"] { background: var(--warn); }
.toast[data-tone="good"] { background: var(--good); }

/* ---------- stage rail ---------- */
.rail { display: flex; flex-direction: column; gap: var(--space-xs); }
.rail-stage {
  display: grid; grid-template-columns: 26px 1fr auto; gap: var(--space-sm);
  align-items: center; padding: 10px var(--space-md);
  border-radius: var(--radius); background: var(--surface-container);
  transition: background var(--motion);
}
.rail-stage[data-state="current"] { background: var(--gradient); }
.rail-stage[data-state="locked"] { opacity: 0.4; }
.rail-num { font-family: "DM Mono", monospace; font-size: 12px; color: var(--on-surface-variant); }
.rail-stage[data-state="done"] .rail-num { color: var(--accent-strong); }
.rail-label { font-weight: 600; font-size: 14px; }
.rail-hint { display: block; font-size: 12px; color: var(--on-surface-variant); }
.rail-tick { width: 16px; height: 16px; stroke: var(--accent-strong); }
.rail-working { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }

.progress {
  height: 4px; border-radius: var(--radius-full);
  background: var(--surface-container-high); overflow: hidden; margin: var(--space-sm) 0 var(--space-md);
}
.progress > i { display: block; height: 100%; background: var(--accent-strong); transition: width var(--motion); }
.progress[data-indeterminate="true"] > i {
  width: 35% !important; animation: slide 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }

/* ---------- config summary ---------- */
.config-strip { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-md); }
.config-row {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--space-sm);
  align-items: start; padding: 6px var(--space-sm); border-radius: var(--radius);
}
.config-row:hover { background: var(--surface-container); }
.config-k { font-family: "DM Mono", monospace; font-size: 10px; text-transform: uppercase; color: var(--on-surface-variant); display: block; }
.config-v { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: var(--space-xs); padding: var(--space-sm) var(--space-md) 0; flex-wrap: wrap; }
.tab {
  border: none; background: transparent; cursor: pointer;
  min-height: 40px; padding: 8px var(--space-md); border-radius: var(--radius);
  color: var(--on-surface-variant); font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--motion), color var(--motion);
}
.tab:hover { background: var(--surface-container); }
.tab[aria-selected="true"], .tab[aria-pressed="true"] { background: var(--surface-container-lowest); color: var(--primary); }
.tab .count { font-family: "DM Mono", monospace; font-size: 10px; }

/* ---------- canvas editor ---------- */
.editor-bar {
  position: sticky; top: calc(-1 * var(--space-md)); z-index: 2;
  display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
  margin: 0 calc(-1 * var(--space-md)); padding: var(--space-sm) var(--space-md);
  background: var(--surface-container-low);
}
.editor-bar .spacer { flex: 1; }
.modes { display: flex; gap: 4px; }
.saved { font-size: 12px; color: var(--on-surface-variant); }
.saved[data-tone="error"] { color: var(--warn); }
.saved[data-tone="good"] { color: var(--good); }
.canvas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); min-height: 0; }
.canvas[data-mode="preview"] { grid-template-columns: 1fr; }
.canvas[data-mode="preview"] .canvas-edit { display: none; }
.canvas[data-mode="write"] { grid-template-columns: 1fr; }
.canvas[data-mode="write"] .canvas-preview { display: none; }
.canvas-edit, .canvas-preview {
  background: var(--surface-container-lowest); border-radius: var(--radius);
  overflow-y: auto; min-height: 0; max-height: calc(var(--vh) - 240px);
}
.canvas-edit textarea {
  width: 100%; min-height: 60vh; field-sizing: content; border: none; background: transparent;
  padding: var(--space-lg); font-size: 16px; line-height: 1.7;
}
.canvas-preview { padding: var(--space-lg); }

/* ---------- markdown ---------- */
.md h1 { font-size: 1.6rem; margin: 0 0 var(--space-md); }
.md h2 { font-size: 1.25rem; margin: var(--space-lg) 0 var(--space-sm); }
.md h3 { font-size: 1.05rem; margin: var(--space-md) 0 var(--space-xs); }
.md p, .md li { margin: 0 0 var(--space-sm); }
.md ul, .md ol { margin: 0 0 var(--space-md); padding-left: var(--space-lg); }
.md blockquote {
  margin: 0 0 var(--space-md); padding: var(--space-sm) var(--space-md);
  background: var(--surface-container); border-radius: var(--radius);
  color: var(--on-surface-variant);
}
.md code {
  font-family: "DM Mono", monospace; font-size: 0.9em;
  background: var(--surface-container); padding: 1px 5px; border-radius: var(--radius);
}
.md pre { background: var(--surface-container); padding: var(--space-md); border-radius: var(--radius); overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md table { border-collapse: collapse; width: 100%; margin-bottom: var(--space-md); }
.md th, .md td { text-align: left; padding: var(--space-sm); background: var(--surface-container-low); }
.md th { background: var(--surface-container); font-family: "DM Mono", monospace; font-size: 11px; text-transform: uppercase; }
.md hr { border: none; height: var(--space-lg); }
.md img { max-width: 100%; border-radius: var(--radius); }
.md .fact {
  font-family: "DM Mono", monospace; font-size: 0.85em;
  padding: 1px var(--space-sm); border-radius: var(--radius-full);
  background: var(--warn-container); color: var(--warn);
}
.md .fact[data-resolved="true"] { background: var(--primary-container); color: var(--primary); }

/* ---------- findings ---------- */
.finding {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius);
  background: var(--surface-container-lowest); margin-bottom: var(--space-sm);
}
.finding[data-kind="decline"] { background: var(--warn-container); }
.finding-label { font-family: "DM Mono", monospace; font-size: 10px; text-transform: uppercase; color: var(--accent-strong); white-space: nowrap; }
.finding[data-kind="decline"] .finding-label { color: var(--warn); }
.finding-detail { font-size: 13.5px; }

/* ---------- approve bar ---------- */
.approve-bar {
  display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap;
  padding: var(--space-md); border-radius: var(--radius);
  background: var(--gradient); margin-bottom: var(--space-md);
}
.approve-bar .grow { flex: 1; min-width: 200px; }
.approve-bar h3 { font-size: 0.95rem; }
.approve-bar p { margin: 2px 0 0; font-size: 13px; color: var(--on-surface-variant); }
.approve-bar.blocked { background: var(--warn-container); }
.approve-why { font-size: 12.5px; color: var(--warn); flex-basis: 100%; margin: 0; }
.approve-why:empty { display: none; }

/* ---------- media ---------- */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-md); }
.media-card { background: var(--surface-container-lowest); border-radius: var(--radius); overflow: hidden; }
.media-card img, .media-card video { width: 100%; display: block; background: var(--surface-container); }
.media-card audio { width: 100%; }
.media-loading {
  display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
  min-height: 120px; background: var(--surface-container); color: var(--on-surface-variant); font-size: 13px;
}
.media-meta { padding: var(--space-sm) var(--space-md); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.media-option { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-sm); border-radius: var(--radius); min-height: 44px; }
.media-option:hover { background: var(--surface-container); }
.media-option input { margin-top: 5px; accent-color: var(--primary); width: 20px; height: 20px; }
.media-spec { display: block; font-size: 12.5px; color: var(--on-surface-variant); }

/* ---------- sources ---------- */
.source { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); padding: var(--space-sm) 0; align-items: start; }
.source a, .source span { overflow-wrap: anywhere; }

/* ---------- transcript ---------- */
.transcript { display: flex; flex-direction: column; gap: var(--space-sm); }
.turn { padding: var(--space-md); border-radius: var(--radius); background: var(--surface-container-lowest); overflow-wrap: anywhere; }
.turn[data-who="you"] { background: var(--primary-container); }
.turn[data-who="error"] { background: var(--warn-container); color: var(--warn); }
.turn .who { display: block; margin-bottom: var(--space-xs); }
.turn p:last-child { margin-bottom: 0; }
.tools { font-family: "DM Mono", monospace; font-size: 11px; color: var(--on-surface-variant); display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.thinking { display: flex; gap: 4px; padding: var(--space-sm) 0; }
.thinking i { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.thinking i:nth-child(2) { animation-delay: 0.2s; }
.thinking i:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* ---------- composer ---------- */
.composer { padding: var(--space-sm) var(--space-md) var(--space-md); }
.suggestions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.suggestion {
  border: none; cursor: pointer; font-size: 12.5px; min-height: 36px;
  padding: 6px 12px; border-radius: var(--radius-full);
  background: var(--surface-container); color: var(--on-surface);
  transition: background var(--motion);
}
.suggestion:hover { background: var(--primary-container); }
.suggestion:disabled { opacity: 0.45; cursor: default; }
.composer-box {
  display: flex; align-items: flex-end; gap: var(--space-sm);
  background: var(--surface-container-lowest); border-radius: var(--radius);
  padding: var(--space-sm);
}
.composer-box textarea { border: none; background: transparent; padding: 6px; max-height: 180px; min-height: 44px; }
.composer-hint { margin: var(--space-xs) 0 0; font-size: 12.5px; color: var(--on-surface-variant); }
.composer-hint:empty { display: none; }

/* ---------- choices from the agent ---------- */
#surface img, #surface video { max-width: 100%; height: auto; display: block; }
.block { background: var(--surface-container-lowest); border-radius: var(--radius); padding: var(--space-md); margin-bottom: var(--space-md); }
.block-title { font-size: 0.95rem; margin-bottom: var(--space-sm); }
.choice {
  display: block; width: 100%; text-align: left; border: none; cursor: pointer;
  background: var(--surface-container); color: inherit;
  border-radius: var(--radius); padding: var(--space-md); margin-bottom: var(--space-sm);
  transition: background var(--motion);
}
.choice:hover { background: var(--primary-container); }
.choice:disabled { cursor: default; opacity: 0.6; }
.choice[aria-pressed="true"] { background: var(--gradient); opacity: 1; }
.choice-headline { font-weight: 600; display: block; margin-bottom: var(--space-xs); }
.choice-why { font-size: 13px; color: var(--on-surface-variant); }

/* ---------- overlays ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: none; align-items: center; justify-content: center;
  padding: var(--space-lg);
  background: rgba(31, 26, 31, 0.28); backdrop-filter: blur(16px);
}
.overlay[data-open="true"] { display: flex; }
.sheet {
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius);
  width: min(880px, 100%); max-height: calc(var(--vh) - 2 * var(--space-lg)); min-height: 0;
  padding: var(--space-xl); box-shadow: var(--shadow-ambient);
}
.sheet-sm { width: min(460px, 100%); }
.sheet h2 { font-size: 1.5rem; margin-bottom: var(--space-xs); }
.sheet .lede { color: var(--on-surface-variant); margin: 0 0 var(--space-md); }
.sheet-body { overflow-y: auto; min-height: 0; flex: 1 1 auto; overscroll-behavior: contain; padding: 2px; }
.sheet-actions { display: flex; gap: var(--space-sm); justify-content: flex-end; margin-top: var(--space-md); flex-wrap: wrap; flex: none; }

/* ---------- sign in ---------- */
#signin .sheet { width: min(420px, 100%); }
.signin-brand { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-lg); }
.error-note { background: var(--warn-container); color: var(--warn); padding: var(--space-sm) var(--space-md); border-radius: var(--radius); font-size: 13.5px; margin-bottom: var(--space-md); }
.info-note { background: var(--accent-container); color: var(--accent-strong); padding: var(--space-sm) var(--space-md); border-radius: var(--radius); font-size: 13.5px; margin-bottom: var(--space-md); }
.restore-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.restore-words { flex: 1; min-width: 200px; }
.sheet > .error-note { margin: var(--space-md) 0 0; }

/* ---------- wizard ---------- */
.wiz-step { margin-bottom: var(--space-lg); }
.wiz-step > h3 { font-size: 1rem; margin-bottom: var(--space-xs); }
.wiz-step > .hint { font-size: 13px; color: var(--on-surface-variant); margin: 0 0 var(--space-sm); }
.wiz-step[aria-busy="true"] .pick { opacity: 0.6; pointer-events: none; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-sm); margin-top: var(--space-sm); }
.pick {
  display: flex; gap: var(--space-sm); align-items: flex-start; text-align: left;
  border: none; cursor: pointer; min-height: 44px; padding: var(--space-md); border-radius: var(--radius);
  background: var(--surface-container); color: inherit;
  transition: background var(--motion);
}
.pick-wide { grid-column: 1 / -1; }
.pick:hover { background: var(--surface-container-high); }
.pick[aria-pressed="true"] { background: var(--gradient); }
.pick .icon { margin-top: 2px; color: var(--primary); }
.pick-label { font-weight: 600; font-size: 14px; display: block; }
.pick-why { font-size: 12px; color: var(--on-surface-variant); display: block; margin-top: 2px; }
.recommended { display: inline-flex; align-items: center; gap: 4px; }
.selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-md); }

/* ---------- seo ---------- */
.serp {
  background: var(--surface-container-lowest); border-radius: var(--radius);
  padding: var(--space-md); margin-bottom: var(--space-md); max-width: 600px;
}
.serp-url { font-size: 12.5px; color: var(--on-surface-variant); overflow-wrap: anywhere; }
.serp-title { color: #1a0dab; font-size: 19px; line-height: 1.3; margin: 2px 0; font-family: Raleway, sans-serif; }
.serp-desc { font-size: 13.5px; color: #4d5156; }
.serp-truncated { opacity: 0.45; }

.empty { padding: var(--space-xl) var(--space-md); text-align: center; color: var(--on-surface-variant); }
.empty-lead { font-family: Raleway, sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--on-surface); margin: 0 0 var(--space-xs); }
.empty .btn { margin-top: var(--space-md); }

@media (max-width: 1199px) {
  main { grid-template-columns: minmax(0, 1fr) minmax(300px, 36%); }
  #rail-pane { display: none; }
  .stepper { display: block; }
  .canvas { grid-template-columns: 1fr; }
  .canvas[data-mode="split"] .canvas-edit { display: none; }
  .modes .tab[data-mode="split"] { display: none; }
}

@media (max-width: 820px) {
  .bar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: var(--space-sm) var(--space-md); }
  .bar-left { display: contents; }
  .bar-title { grid-row: 1; grid-column: 1; }
  .bar-right { grid-row: 1; grid-column: 2; justify-self: stretch; justify-content: flex-end; min-width: 0; }
  #new-run { grid-row: 2; grid-column: 1; }
  #run-picker { grid-row: 2; grid-column: 2; max-width: 100%; }
  .who { display: none; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; }
  .stepper { padding: 0 var(--space-md) var(--space-sm); }
  .step { flex: 0 1 auto; }
  .step[data-state="current"] { flex: 1 1 auto; }
  .step:not([data-state="current"]) > span:last-child { display: none; }
  main { grid-template-columns: 1fr; padding: 0 var(--space-sm) var(--space-sm); }
  main > .pane { display: none; }
  main[data-pane="rail"] > #rail-pane,
  main[data-pane="work"] > #workspace,
  main[data-pane="chat"] > .conversation-pane { display: flex; }
  .pane-bar {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm) max(var(--space-xs), env(safe-area-inset-bottom));
    background: var(--surface-container-low);
  }
  .pane-bar button {
    min-height: 48px; border: none; border-radius: var(--radius); background: transparent;
    font-weight: 600; font-size: 14px; color: var(--on-surface-variant); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  }
  .pane-bar button[aria-pressed="true"] { background: var(--surface-container-lowest); color: var(--primary); }
  .toast { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .overlay { padding: 0; align-items: stretch; }
  .sheet, .sheet-sm, #signin .sheet { width: 100%; max-height: var(--vh); border-radius: 0; padding: var(--space-md); }
  .sheet h2 { font-size: 1.3rem; }
  input[type="text"], input[type="email"], input[type="password"], select, textarea { font-size: 16px; }
  .canvas { margin: 0 calc(-1 * var(--space-md)); }
  .canvas-edit, .canvas-preview { max-height: none; overflow-y: visible; border-radius: 0; }
  .canvas-edit textarea { min-height: 50vh; padding: var(--space-sm); }
  .canvas-preview { padding: var(--space-md); }
  .editor-bar { top: calc(-1 * var(--space-md)); }
}

@media (pointer: coarse) {
  .btn-sm, .tab, .suggestion { min-height: 44px; }
  .btn-sm { padding: 10px 14px; }
}