.adaptive-surface[data-surface="build"] [data-surface-view="build"] { display: grid; }

.build-surface {
  --build-panel: #080908;
  --build-panel-raised: #101110;
  --build-panel-hover: #171817;
  --build-line: rgba(243, 241, 236, 0.08);
  --build-line-strong: rgba(243, 241, 236, 0.16);
  --build-muted: #a9aca9;
  --build-dim: #7d817d;
  --build-state: #d8dbd8;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: #000;
  color: var(--ink, #f3f1ec);
  font-family: var(--sans, Inter, ui-sans-serif, system-ui, sans-serif);
}

.os[data-theme="light"] .build-surface {
  --build-panel: #ffffff;
  --build-panel-raised: #eceeea;
  --build-panel-hover: #e2e4e0;
  --build-line: rgba(16, 18, 16, 0.1);
  --build-line-strong: rgba(16, 18, 16, 0.22);
  --build-muted: #565b56;
  --build-dim: #747974;
  --build-state: #171917;
  background: var(--black);
  color: var(--ink);
}

.os[data-theme="light"] :is(
  .build-task-header,
  .build-workspace-grid,
  .build-agent-body,
  .build-agent-view,
  .build-terminal-view,
  .build-editor-view,
  .build-editor-code,
  .build-editor-footer,
  .build-agent-footer,
  .build-preview-frame,
  .build-mode-tabs,
  .build-file-tabs,
  .build-mobile-switch
) { background: var(--black); }

.os[data-theme="light"] .build-surface :is(button, [role="tab"]):hover { color: var(--ink); }
.os[data-theme="light"] .build-run-button { background: var(--ink) !important; color: var(--black) !important; }
.os[data-theme="light"] .build-mode-tabs button[aria-selected="true"],
.os[data-theme="light"] .build-file-tabs button[aria-selected="true"],
.os[data-theme="light"] .build-mobile-switch button[aria-selected="true"] { color: var(--ink); }
.os[data-theme="light"] .build-editor-code :is(.cm-editor, .cm-scroller, .cm-gutters) { background: var(--black) !important; color: var(--ink) !important; }
.os[data-theme="light"] .build-files-view { background: var(--black); }
.os[data-theme="light"] .build-editor-code .cm-activeLine,
.os[data-theme="light"] .build-editor-code .cm-activeLineGutter { background: var(--panel-strong) !important; color: var(--ink) !important; }
.os[data-theme="light"] .build-editor-code .cm-cursor { border-left-color: var(--ink) !important; }
.os[data-theme="light"] .build-editor-code .cm-content [class~="ͼi"] { color: #315f89 !important; }
.os[data-theme="light"] .build-editor-code .cm-content [class~="ͼe"] { color: #8a571e !important; }
.os[data-theme="light"] .build-preview-frame iframe { filter: invert(1) grayscale(1); }

.build-surface *,
.build-surface *::before,
.build-surface *::after { box-sizing: border-box; }

.build-surface button { font: inherit; }

.build-surface button:focus-visible,
.build-surface [role="textbox"]:focus-visible,
.build-surface [role="application"]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

.build-task-header {
  min-width: 0;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px;
  background: #000;
}

.build-task-copy { min-width: 0; }
.build-task-copy h2 {
  margin: 5px 0 3px;
  overflow: hidden;
  color: var(--ink, #f3f1ec);
  font-size: 20px;
  font-weight: 660;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.build-task-copy p,
.build-demo-boundary {
  margin: 0;
  color: var(--build-muted);
  font: 500 12px/1.4 var(--mono, monospace);
}
.build-demo-boundary {
  flex: 0 0 auto;
  color: var(--build-dim);
}

.build-task-status,
.build-runtime-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--build-muted);
  font: 620 12px/1 var(--mono, monospace);
}
.build-task-status i,
.build-runtime-state i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--build-state);
}

.build-workspace-grid {
  position: relative;
  min-width: 0;
  min-height: 0;
  width: min(100%, var(--surface-content-max, 1760px));
  display: grid;
  grid-template-columns: minmax(540px, 1.18fr) minmax(360px, 0.82fr);
  gap: 10px;
  overflow: hidden;
  margin-inline: auto;
  padding: 0 24px var(--surface-dock-clearance, 84px);
  background: #000;
}

.build-mobile-switch { display: none; }

.build-agent-panel,
.build-preview-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  overflow: hidden;
  border-radius: 4px;
  background: var(--build-panel);
}
.build-agent-panel { grid-template-rows: auto auto minmax(0, 1fr) 42px; }
.build-preview-panel { grid-template-rows: 58px minmax(0, 1fr); }

.build-agent-header {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px 10px 16px;
  background: var(--build-panel);
}
.build-session-heading { min-width: 0; }
.build-session-heading strong,
.build-session-heading span { display: block; }
.build-session-heading strong { font-size: 13px; font-weight: 680; }
.build-session-heading span {
  margin-top: 4px;
  color: var(--build-dim);
  font: 500 12px/1.25 var(--mono, monospace);
  white-space: normal;
  overflow-wrap: anywhere;
}

.build-session-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex: 0 0 auto;
}
.build-session-actions button,
.build-mode-tabs button,
.build-file-tabs button {
  min-height: 44px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--build-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  transition: background-color 140ms ease, color 140ms ease, opacity 140ms ease;
}
.build-session-actions button {
  min-width: 70px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 11px;
}
.build-session-actions button:last-child { min-width: 108px; }
.build-session-actions button:hover:not(:disabled),
.build-mode-tabs button:hover,
.build-file-tabs button:hover { background: var(--build-panel-hover); color: #fff; }
.build-session-actions button:active:not(:disabled),
.build-mode-tabs button:active,
.build-file-tabs button:active { opacity: 0.72; }
.build-session-actions button:disabled { cursor: not-allowed; opacity: 0.34; }

.build-run-button {
  background: #f3f1ec !important;
  color: #050505 !important;
}
.build-run-button:hover:not(:disabled) { background: #fff !important; }
.build-run-mark {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
  transform-origin: center;
}
.build-run-button.is-running .build-run-mark {
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: build-spin 560ms linear infinite;
}
.build-stop-mark { width: 9px; height: 9px; background: currentColor; }
.build-new-mark { font: 500 18px/1 var(--mono, monospace); }

.build-mode-tabs,
.build-file-tabs {
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 2px;
  overflow-x: auto;
  padding: 3px 4px;
  scrollbar-width: none;
  background: #050605;
}
.build-mode-tabs::-webkit-scrollbar,
.build-file-tabs::-webkit-scrollbar { display: none; }
.build-mode-tabs button {
  min-width: 76px;
  flex: 1 0 auto;
  padding: 0 12px;
  font-family: var(--mono, monospace);
}
.build-mode-tabs button[aria-selected="true"],
.build-file-tabs button[aria-selected="true"] {
  background: var(--build-panel-raised);
  color: #fff;
}

.build-agent-body {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #070807;
}
.build-agent-view {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: #080908;
  scrollbar-color: #363936 transparent;
  scrollbar-width: thin;
}
.build-agent-view[hidden] { display: none !important; }
.build-terminal-view,
.build-editor-view { overflow: hidden; }
.build-terminal-view .build-terminal-pane,
.build-editor-view .build-files-view { height: 100%; }
.build-terminal-pane {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: #06090d;
}

.build-terminal-context {
  min-height: 58px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  border-top: 1px solid rgba(201, 130, 55, 0.88);
  border-bottom: 1px solid rgba(201, 130, 55, 0.88);
  background: #080d13;
}
.build-terminal-context strong { flex: 0 0 auto; color: #e6a45d; font: 700 13px/1.2 var(--mono, monospace); }
.build-terminal-context span {
  min-width: 0;
  overflow: hidden;
  color: #91a0b3;
  font: 500 12px/1.35 var(--mono, monospace);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.build-terminal-host {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 12px 10px;
  background: #06090d;
}
.build-terminal-host .xterm { height: 100%; }
.build-terminal-host .xterm-screen { max-width: 100%; }
.build-terminal-host .xterm-viewport {
  scrollbar-color: #363936 transparent;
  scrollbar-width: thin;
}

.build-files-view {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 38px;
  overflow: hidden;
  background: #080908;
}
.build-file-tabs button {
  min-width: 122px;
  flex: 0 0 auto;
  padding: 0 12px;
  font-family: var(--mono, monospace);
  text-align: left;
}
.build-file-tabs button > span {
  display: inline-block;
  min-width: 22px;
  color: var(--build-dim);
}
.build-file-tabs button > i {
  width: 5px;
  height: 5px;
  display: inline-block;
  margin-left: 8px;
  border-radius: 50%;
  background: #d8dbd8;
  vertical-align: 1px;
}
.build-file-tabs button > i[hidden] { display: none; }
.build-editor-code {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #080908;
}
.build-editor-code .cm-editor,
.build-editor-code .cm-scroller { height: 100%; }
.build-editor-code .cm-content [class~="ͼi"] { color: #8db2d8 !important; }
.build-editor-code .cm-content [class~="ͼe"] { color: #dda867 !important; }
.build-editor-code .cm-activeLine { background: rgba(255, 255, 255, 0.025); }
.build-editor-footer {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px;
  background: #060706;
  color: var(--build-dim);
  font: 500 12px/1 var(--mono, monospace);
}

.build-results-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 20px 14px;
}
.build-results-summary strong { font-size: 17px; font-weight: 670; }
.build-results-summary span { color: var(--build-muted); font-size: 12px; }
.build-test-list { list-style: none; margin: 0; padding: 0 20px 28px; }
.build-test-list li {
  min-height: 52px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.build-test-list li + li { border-top: 1px solid var(--build-line); }
.build-test-list li span { color: var(--build-muted); font: 700 12px/1 var(--mono, monospace); }
.build-test-list li.is-pass span { color: #e5e7e5; }
.build-test-list li.is-fail span { color: #ffaca3; }
.build-test-list li strong { min-width: 0; font-size: 13px; font-weight: 560; }

.build-diff { padding-bottom: 28px; }
.build-diff section + section { margin-top: 8px; }
.build-diff section > header {
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 16px;
  background: #0c0d0c;
}
.build-diff section > header strong { font: 650 12px/1 var(--mono, monospace); }
.build-diff section > header span { color: var(--build-dim); font: 500 12px/1 var(--mono, monospace); }
.build-diff pre {
  min-width: max-content;
  margin: 0;
  padding: 10px 0;
  font: 500 12px/1.65 var(--mono, monospace);
}
.build-diff pre > span { display: block; min-height: 20px; padding: 0 16px; white-space: pre; }
.build-diff pre > .is-add { background: rgba(255, 255, 255, 0.035); color: #d9dcd9; }
.build-diff pre > .is-remove { background: rgba(255, 101, 90, 0.08); color: #f4b2ac; }
.build-diff pre > .is-same { color: #777a78; }
.build-diff-empty { margin: 0; padding: 18px 16px 22px; color: var(--build-muted); font-size: 13px; }

.build-agent-footer {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 14px;
  background: #060706;
  color: var(--build-dim);
  font: 500 12px/1 var(--mono, monospace);
}
.build-agent-footer > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.build-preview-header {
  min-width: 0;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  background: var(--build-panel);
}
.build-preview-header strong,
.build-preview-header span { display: block; }
.build-preview-header strong { font-size: 13px; font-weight: 680; }
.build-preview-header div > span,
.build-preview-address {
  margin-top: 4px;
  color: var(--build-dim);
  font: 500 12px/1.25 var(--mono, monospace);
}
.build-preview-address {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.build-preview-frame {
  min-width: 0;
  min-height: 0;
  padding: 8px;
  overflow: hidden;
  background: #050605;
}
.build-preview-frame iframe {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  border: 0;
  border-radius: 2px;
  background: #000;
}
.build-surface.is-run-complete .build-preview-frame iframe {
  animation: build-preview-update 150ms var(--motion-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

@keyframes build-spin { to { transform: rotate(360deg); } }
@keyframes build-preview-update { from { opacity: 0.72; } to { opacity: 1; } }

@container adaptive-surface (max-width: 940px) {
  .build-surface { overflow: auto; }
  .build-workspace-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(540px, 64vh) minmax(560px, 70vh);
    overflow: visible;
    padding: 0 16px 112px;
  }
}

@container adaptive-surface (max-width: 760px) {
  .adaptive-surface[data-surface="build"] [data-surface-view="build"] { display: grid; }
  .build-surface {
    height: calc(100dvh - 122px);
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }
  .build-task-header { min-height: 96px; align-items: flex-start; padding: 12px 16px 10px; }
  .build-task-copy h2 { max-width: 310px; font-size: 18px; line-height: 1.25; white-space: normal; }
  .build-task-copy p { max-width: 330px; font-size: 12px; overflow-wrap: anywhere; }
  .build-demo-boundary { display: none; }
  .build-workspace-grid {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 44px minmax(0, 1fr);
    gap: 6px;
    overflow: hidden;
    padding: 0 10px 84px;
  }
  .build-mobile-switch {
    min-width: 0;
    display: grid;
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    padding: 0 4px;
    background: #050605;
  }
  .build-mobile-switch button {
    min-width: 0;
    min-height: 44px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--build-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 680;
  }
  .build-mobile-switch button[aria-selected="true"] {
    background: var(--build-panel-raised);
    color: #fff;
  }
  .build-mobile-switch button:hover { background: var(--build-panel-hover); color: #fff; }
  .build-agent-panel,
  .build-preview-panel {
    grid-column: 1;
    grid-row: 2;
    height: auto;
  }
  .build-surface[data-build-mobile-pane="agent"] .build-preview-panel,
  .build-surface[data-build-mobile-pane="preview"] .build-agent-panel {
    display: none;
  }
  .build-agent-header {
    min-height: 108px;
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
  }
  .build-session-heading span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .build-session-actions { justify-content: stretch; width: 100%; }
  .build-session-actions button { min-width: 0; flex: 1 1 0; padding: 0 8px; }
  .build-session-actions button:last-child { min-width: 118px; flex-grow: 1.3; }
  .build-mode-tabs button { min-width: 82px; padding: 0 9px; }
  .build-terminal-context { min-height: 52px; }
  .build-terminal-context span {
    overflow: visible;
    text-align: left;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .build-terminal-host { padding: 10px 8px; }
  .build-agent-footer { padding: 0 10px; }
  .build-preview-frame { padding: 6px; }
  .build-results-summary { align-items: flex-start; flex-direction: column; gap: 6px; padding: 18px 14px; }
  .build-test-list { padding: 0 14px 22px; }
  .build-diff section > header { align-items: flex-start; flex-direction: column; gap: 5px; padding-top: 11px; padding-bottom: 11px; }
}

@container adaptive-surface (min-width: 1800px) {
  .build-task-header { padding-right: 34px; padding-left: 34px; }
  .build-workspace-grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); padding-right: 34px; padding-left: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .build-surface *,
  .build-surface *::before,
  .build-surface *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}