:root {
  color-scheme: light;
  --ink: #1f2328;
  --muted: #656d76;
  --line: rgba(31, 35, 40, 0.12);
  --soft: #f6f8fa;
  --soft-2: #eef1f4;
  --paper: #ffffff;
  --surface: rgba(255, 255, 255, 0.94);
  --surface-soft: #f8fafc;
  --field: #ffffff;
  --app-bg: #f6f8fa;
  --right-pane-bg: rgba(255, 255, 255, 0.68);
  --room-header-bg: rgba(246, 248, 250, 0.94);
  --control-hover: #ffffff;
  --card-bg: #ffffff;
  --card-soft: #f8fafc;
  --card-wash: #f6f8fa;
  --warning-soft: #fff8e6;
  --danger-soft: #fff1f2;
  --preview-line: #d8dee4;
  --inset-line: rgba(255, 255, 255, 0.8);
  --green: #347d99;
  --green-strong: #1f6b83;
  --green-soft: #edf7fa;
  --green-line: rgba(52, 125, 153, 0.24);
  --blue: #315cbd;
  --amber: #b46912;
  --red: #b13b43;
  --violet: #6e4fb2;
  --shadow: 0 2px 4px rgba(23, 32, 39, 0.07), 0 16px 38px rgba(23, 32, 39, 0.1);
  --shadow-soft: 0 1px 2px rgba(23, 32, 39, 0.05), 0 8px 22px rgba(23, 32, 39, 0.06);
  --shadow-green: 0 1px 2px rgba(34, 111, 147, 0.07), 0 14px 34px rgba(34, 111, 147, 0.1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: 32px;
  background: var(--app-bg);
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 13px;
  letter-spacing: 0;
}

body[data-theme="night"] {
  color-scheme: dark;
  --ink: #e6edf3;
  --muted: #8b949e;
  --line: rgba(240, 246, 252, 0.1);
  --soft: #0d1117;
  --soft-2: #161b22;
  --paper: #0d1117;
  --surface: rgba(22, 27, 34, 0.94);
  --surface-soft: #1c2128;
  --field: #0d1117;
  --right-pane-bg: rgba(13, 17, 23, 0.72);
  --room-header-bg: rgba(13, 17, 23, 0.96);
  --control-hover: #21262d;
  --card-bg: #161b22;
  --card-soft: #1c2128;
  --card-wash: #111820;
  --warning-soft: #2d2111;
  --danger-soft: #2b171b;
  --preview-line: rgba(240, 246, 252, 0.14);
  --inset-line: rgba(255, 255, 255, 0.04);
  --green: #3f7fae;
  --green-strong: #8bbde0;
  --green-soft: rgba(63, 127, 174, 0.13);
  --green-line: rgba(139, 189, 224, 0.18);
  --blue: #8bbde0;
  --amber: #d29922;
  --red: #ff7b72;
  --violet: #bc8cff;
  --app-bg: #0d1117;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 10px 24px rgba(0, 0, 0, 0.18);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.14);
  --shadow-green: 0 1px 2px rgba(0, 0, 0, 0.16), 0 8px 18px rgba(28, 82, 101, 0.12);
}

body[data-theme="night"] {
  background: var(--app-bg);
}

@media (prefers-color-scheme: dark) {
  body[data-theme="auto"] {
    color-scheme: dark;
    --ink: #e6edf3;
    --muted: #8b949e;
    --line: rgba(240, 246, 252, 0.1);
    --soft: #0d1117;
    --soft-2: #161b22;
    --paper: #0d1117;
    --surface: rgba(22, 27, 34, 0.94);
    --surface-soft: #1c2128;
    --field: #0d1117;
    --right-pane-bg: rgba(13, 17, 23, 0.72);
    --room-header-bg: rgba(13, 17, 23, 0.96);
    --control-hover: #21262d;
    --card-bg: #161b22;
    --card-soft: #1c2128;
    --card-wash: #111820;
    --warning-soft: #2d2111;
    --danger-soft: #2b171b;
    --preview-line: rgba(240, 246, 252, 0.14);
    --inset-line: rgba(255, 255, 255, 0.04);
    --green: #3f7fae;
    --green-strong: #8bbde0;
    --green-soft: rgba(63, 127, 174, 0.13);
    --green-line: rgba(139, 189, 224, 0.18);
    --blue: #8bbde0;
    --amber: #d29922;
    --red: #ff7b72;
    --violet: #bc8cff;
    --app-bg: #0d1117;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 10px 24px rgba(0, 0, 0, 0.18);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.14);
    --shadow-green: 0 1px 2px rgba(0, 0, 0, 0.16), 0 8px 18px rgba(28, 82, 101, 0.12);
  }

  body[data-theme="auto"] {
    background: var(--app-bg);
  }
}

body[data-theme="night"] :is(.message.work-log .bubble, .agent-work-item, .timeline-body) {
  background: var(--card-bg);
}

body[data-theme="night"] :is(.workroom-hero, .projector-card, .status-card) {
  background: var(--card-soft);
}

@media (prefers-color-scheme: dark) {
  body[data-theme="auto"] :is(.message.work-log .bubble, .agent-work-item, .timeline-body) {
    background: var(--card-bg);
  }

  body[data-theme="auto"] :is(.workroom-hero, .projector-card, .status-card) {
    background: var(--card-soft);
  }
}

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

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(340px, 35fr) minmax(0, 65fr);
  min-height: calc(100vh - 32px);
  overflow: hidden;
}

body.projector-mode .app-shell {
  grid-template-columns: minmax(220px, 14fr) minmax(0, 86fr);
}

body.projector-mode .left-pane,
body.projector-mode .right-pane {
  padding: 8px;
}

body.projector-mode .left-pane {
  gap: 8px;
}

body.projector-mode .topbar,
body.projector-mode .composer {
  padding: 8px;
}

body.projector-mode .brand-lockup p,
body.projector-mode .provider-strip,
body.projector-mode .team-rail {
  display: none;
}

body.projector-mode .topbar-actions {
  grid-template-columns: 1fr;
}

body.projector-mode .room-header {
  gap: 6px;
}

body.projector-mode .workspace-header {
  padding: 8px;
}

body.projector-mode .tabs {
  gap: 5px;
  padding-bottom: 2px;
}

body.projector-mode .tab {
  min-height: 26px;
  padding: 0 8px;
  font-size: 10px;
}

body.focus-preview-mode {
  padding-bottom: 0;
}

body.focus-preview-mode .app-shell {
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
}

body.focus-preview-mode .left-pane {
  display: none;
}

body.focus-preview-mode .right-pane {
  height: 100vh;
  max-height: 100vh;
  gap: 6px;
  padding: 6px;
}

body.focus-preview-mode .workspace-header {
  padding: 6px 8px;
}

body.focus-preview-mode .workspace-header > div:first-child,
body.focus-preview-mode .tabs,
body.focus-preview-mode .workroom-grid > .workroom-card:not(.project-preview-card),
body.focus-preview-mode .project-link-button,
body.focus-preview-mode .run-button {
  display: none;
}

body.focus-preview-mode .workspace-actions {
  width: 100%;
  justify-content: flex-end;
}

body.focus-preview-mode .tab-panel.active {
  overflow: hidden;
  padding-bottom: 0;
}

body.focus-preview-mode .workroom-grid {
  display: block;
  height: 100%;
}

body.focus-preview-mode .project-preview-card {
  height: calc(100vh - 54px);
  padding: 8px;
}

body.focus-preview-mode .project-preview-shell {
  height: calc(100% - 104px);
}

body.focus-preview-mode .preview-browser-card,
body.focus-preview-mode .preview-image-card,
body.focus-preview-mode .preview-app-frame {
  height: 100%;
  min-height: 0;
}

body.focus-preview-mode .preview-image-card img {
  height: 100%;
  object-fit: contain;
}

.left-pane,
.right-pane {
  min-width: 0;
  padding: 14px;
}

.left-pane {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  border-right: 1px solid var(--line);
  height: calc(100vh - 32px);
  max-height: calc(100vh - 32px);
  overflow: hidden;
}

.right-pane {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  background: var(--right-pane-bg);
  height: calc(100vh - 32px);
  max-height: calc(100vh - 32px);
  overflow: hidden;
}

.topbar,
.workspace-header,
.control-strip,
.provider-strip,
.team-rail,
.composer,
.file-bar,
.metric-grid,
.approval-item,
.task-item,
.api-connections-card,
.preview-notes,
.settings-grid {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.topbar,
.workspace-header,
.composer {
  border-color: var(--green-line);
  box-shadow: var(--shadow-green);
}

.metric-grid,
.task-item,
.approval-item,
.team-rail {
  box-shadow: var(--shadow-soft);
}

.room-header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  gap: 8px;
  padding-bottom: 2px;
  background: var(--room-header-bg);
}

.topbar,
.workspace-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
}

.topbar {
  flex-direction: column;
}

.workspace-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.projector-button.active,
.focus-preview-button.active {
  border-color: var(--green-line);
  color: white;
  background: var(--green);
}

.topbar-actions {
  display: grid;
  grid-template-columns: minmax(128px, 0.95fr) minmax(150px, 1.05fr) auto;
  align-items: center;
  justify-content: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.brand-logo {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(14, 165, 233, 0.28);
}

.brand-title {
  min-width: 0;
}

.header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.header-meta span {
  display: inline-flex;
  align-items: center;
}

.header-meta span + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--muted);
}

.project-switcher,
.search-box {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.project-switcher span,
.search-box span,
.settings-grid span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.project-switcher select,
.search-box input,
.settings-grid select {
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}

.project-switcher select:focus,
.search-box input:focus,
.settings-grid select:focus,
.composer textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(59, 143, 189, 0.13);
  outline: none;
}

.project-switcher select {
  width: 100%;
}

.search-box input {
  width: 100%;
}

.density-control,
.theme-control,
.view-scale {
  min-width: 0;
}

.view-options {
  position: relative;
  justify-self: end;
  min-width: 0;
}

.view-options summary {
  display: grid;
  place-items: center;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  background: var(--field);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  list-style: none;
  white-space: nowrap;
  cursor: pointer;
}

.view-options summary::-webkit-details-marker {
  display: none;
}

.view-options[open] summary {
  border-color: var(--green-line);
  color: var(--green-strong);
  background: var(--green-soft);
}

.view-options-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 12;
  display: grid;
  gap: 6px;
  width: max-content;
  max-width: min(320px, calc(100vw - 40px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.density-control,
.theme-control {
  display: inline-grid;
  grid-template-columns: repeat(3, 28px);
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft-2);
}

.density-option,
.theme-option {
  display: grid;
  place-items: center;
  min-height: 24px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.theme-option[data-theme="auto"] {
  font-size: 11px;
}

.density-option.active,
.theme-option.active {
  background: var(--green);
  color: white;
  box-shadow: 0 4px 12px rgba(52, 125, 153, 0.12);
}

.view-scale {
  display: inline-grid;
  grid-template-columns: 28px 46px 28px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft-2);
  overflow: hidden;
}

.view-scale button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 26px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.view-scale span {
  display: grid;
  place-items: center;
  min-width: 46px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.view-scale button:hover {
  background: var(--control-hover);
}

.kicker {
  margin: 0 0 2px;
  color: var(--green-strong);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: 17px;
  line-height: 1.15;
}

h2 {
  font-size: 15px;
  line-height: 1.2;
}

.session-state {
  display: none;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.pulse {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 6px rgba(59, 143, 189, 0.13);
}

.control-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border-radius: 8px;
  min-width: 0;
}

.provider-strip {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr 0.9fr 96px;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
}

.specialist-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.provider-strip label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.provider-strip span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.provider-strip select {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 760;
}

.compact-toggle {
  align-content: end;
}

.compact-toggle input {
  position: absolute;
  opacity: 0;
}

.compact-toggle b {
  display: grid;
  place-items: center;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.compact-toggle input:checked + b {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green);
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 1 1 180px;
  width: auto;
  min-width: 0;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-2);
}

.segment,
.tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.segment {
  min-height: 30px;
  border-radius: 6px;
  font-size: 12px;
}

.segment.active,
.tab.active {
  background: var(--green);
  color: white;
  box-shadow: 0 8px 20px rgba(59, 143, 189, 0.16);
}

.toggle {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.toggle input {
  position: absolute;
  opacity: 0;
}

.toggle span {
  width: 36px;
  height: 20px;
  padding: 2px;
  border-radius: 999px;
  background: #cbd5d0;
}

.toggle span::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--field);
  transition: transform 160ms ease;
}

.toggle input:checked + span {
  background: var(--green);
}

.toggle input:checked + span::before {
  transform: translateX(16px);
}

.icon-text-button,
.secondary-button,
.send-button,
.approval-actions button {
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 850;
}

a.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.icon-text-button,
.send-button,
.approval-actions button:first-child {
  background: var(--green);
  color: white;
  box-shadow: 0 4px 12px rgba(52, 125, 153, 0.12);
}

.secondary-button,
.approval-actions button:last-child {
  border-color: var(--line);
  background: var(--field);
  color: var(--ink);
}

.project-link-button {
  border-color: var(--green-line);
  color: var(--green-strong);
  background: var(--green-soft);
}

.project-link-button.disabled {
  pointer-events: none;
  border-color: var(--line);
  color: var(--muted);
  background: var(--card-soft);
}

.control-strip .icon-text-button {
  margin-left: auto;
}

.secondary-button:hover,
.icon-text-button:hover,
.send-button:hover,
.approval-actions button:hover,
.composer-chip:hover {
  border-color: var(--green-line);
  box-shadow: 0 4px 12px rgba(52, 125, 153, 0.1);
  transform: translateY(-1px);
}

.team-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(112px, 1fr);
  gap: 8px;
  padding: 6px;
  border-radius: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.agent-chip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card-bg);
  box-shadow: none;
}

.agent-chip.is-available {
  border-color: rgba(46, 160, 67, 0.48);
  background: rgba(46, 160, 67, 0.1);
}

.agent-chip.is-busy {
  border-color: rgba(210, 153, 34, 0.48);
  background: rgba(210, 153, 34, 0.1);
}

.agent-chip.is-unavailable {
  border-color: rgba(255, 123, 114, 0.5);
  background: rgba(255, 123, 114, 0.1);
}

.agent-availability {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(255, 123, 114, 0.12);
}

.agent-chip.is-available .agent-availability {
  background: #2ea043;
  box-shadow: 0 0 0 4px rgba(46, 160, 67, 0.16);
}

.agent-chip.is-busy .agent-availability {
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(210, 153, 34, 0.16);
}

.agent-avatar {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: white;
  font-size: 9px;
  font-weight: 900;
}

.agent-chip strong {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.chat-history {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.chat-log {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow: auto;
  padding: 2px 6px 2px 6px;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

.chat-log::before {
  content: "Activity";
  align-self: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  color: var(--muted);
  background: var(--surface);
  font-size: 10px;
  font-weight: 850;
}

.jump-latest {
  position: absolute;
  right: 18px;
  bottom: 14px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--ink);
  background: var(--field);
  box-shadow: var(--shadow);
  font-size: 12px;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.jump-latest.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.message {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 7px;
  max-width: 100%;
}

.message.user {
  align-self: flex-end;
  grid-template-columns: minmax(0, 1fr) 24px;
  max-width: 88%;
}

.message.user .agent-avatar {
  order: 2;
}

.bubble {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 8px;
  background: var(--card-bg);
  box-shadow: none;
}

.message.work-log .bubble {
  border-left: 2px solid var(--green-line);
  background: var(--card-bg);
  box-shadow: none;
}

.message.user .bubble {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.bubble-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.message.work-log .bubble-head span:first-child {
  color: var(--ink);
  font-weight: 950;
}

.message.work-log .bubble-head span:last-child {
  color: var(--green-strong);
}

.bubble p {
  margin: 0;
  font-size: 12px;
  line-height: 1.36;
}

.log-section {
  display: grid;
  gap: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.log-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.log-section + .log-section {
  margin-top: 6px;
}

.log-section span {
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.log-section p {
  font-size: 12px;
  line-height: 1.34;
}

.log-decision span {
  color: var(--ink);
}

.log-decision p {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.34;
}

.log-next span {
  color: var(--green-strong);
}

.log-next p {
  color: var(--muted);
}

.composer {
  display: grid;
  gap: 6px;
  padding: 7px;
  border-radius: 8px;
}

.composer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.composer-head label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.composer-head select {
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
  text-transform: none;
}

.composer textarea {
  width: 100%;
  min-height: 38px;
  max-height: 150px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 9px;
  color: var(--ink);
  outline: none;
  font-size: 12px;
  line-height: 1.35;
  background: var(--field);
}

.composer-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  overflow-x: auto;
}

.composer-chip {
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 8px;
  background: var(--card-soft);
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.composer .send-button {
  margin-left: auto;
  min-width: 66px;
  min-height: 28px;
  background: var(--green);
  color: white;
}

.tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-2);
  overflow-x: auto;
  scrollbar-width: thin;
}

.tab {
  flex: 0 0 auto;
  min-width: 82px;
  min-height: 32px;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 11px;
  white-space: nowrap;
}

.tab-panel {
  display: none;
  min-height: 0;
  overflow: auto;
  padding-bottom: 4px;
}

.tab-panel.active {
  display: block;
}

.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.metric {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card-bg);
}

.metric span,
.task-meta,
.approval-meta,
.preview-notes p {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.metric strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.metric p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 520;
  line-height: 1.35;
}

.workroom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 8px;
}

.workroom-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.workroom-hero,
.workroom-wide {
  grid-column: 1 / -1;
}

.workroom-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.42fr);
  gap: 10px;
  align-items: start;
  border-color: var(--green-line);
  background: linear-gradient(180deg, var(--card-bg) 0%, var(--green-soft) 100%);
  box-shadow: var(--shadow-green);
}

.workroom-hero-copy {
  min-width: 0;
}

.workroom-hero .workroom-hero-copy h3 {
  font-size: 18px;
  line-height: 1.18;
}

.workroom-hero .workroom-hero-copy p {
  max-width: 760px;
  font-size: 12px;
  line-height: 1.48;
}

.confidence-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.confidence-item {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 8px;
  background: var(--card-bg);
}

.confidence-item.done {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.confidence-item.pending,
.confidence-item.active {
  border-color: rgba(226, 191, 125, 0.55);
  background: var(--warning-soft);
}

.confidence-item span,
.command-item span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.confidence-item strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workroom-command-card {
  padding: 8px;
  background: var(--card-bg);
}

.workroom-section-nav {
  position: static;
  border-color: rgba(139, 189, 224, 0.24);
  background:
    linear-gradient(180deg, rgba(31, 111, 235, 0.1), rgba(13, 17, 23, 0.14)),
    var(--surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 14px rgba(0, 0, 0, 0.14);
}

body[data-theme="night"] .workroom-section-nav {
  background:
    linear-gradient(180deg, rgba(31, 111, 235, 0.16), rgba(13, 17, 23, 0.34)),
    #111820;
}

body[data-theme="night"] .workroom-section-nav .kicker,
body[data-theme="night"] .workroom-section-nav h3 {
  color: #f0f6fc;
}

.workroom-section-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.workroom-section-status-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.workroom-view-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 8px;
}

.workroom-view-mode button,
.workroom-section-tabs button {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 8px;
  background: var(--field);
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 1px 2px rgba(13, 17, 23, 0.22);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workroom-view-mode button:hover,
.workroom-section-tabs button:hover {
  border-color: var(--green-line);
  background: var(--control-hover);
  color: var(--ink);
}

.workroom-view-mode button.active,
.workroom-section-tabs button.active {
  border-color: var(--green);
  background: var(--green);
  color: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 0 2px var(--green-line),
    0 6px 16px rgba(52, 125, 153, 0.2);
}

.workroom-view-mode button.active::before,
.workroom-section-tabs button.active::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.24);
  vertical-align: 1px;
}

.workroom-view-mode button:focus-visible,
.workroom-section-tabs button:focus-visible {
  outline: 3px solid rgba(139, 189, 224, 0.72);
  outline-offset: 2px;
}

.workroom-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.workroom-section-actions button {
  min-height: 32px;
  border-color: var(--line);
  background: var(--field);
  color: var(--ink);
  font-weight: 900;
}

.workroom-section-actions button:hover {
  border-color: var(--green-line);
  background: var(--control-hover);
}

.workroom-section-actions button:disabled {
  cursor: default;
  opacity: 0.55;
}

.workroom-grid.advanced-collapsed .workroom-section-nav {
  padding: 8px 10px;
}

.workroom-grid.advanced-collapsed .workroom-section-nav .workroom-section-head {
  align-items: center;
}

.workroom-grid.advanced-collapsed .workroom-section-nav h3 {
  font-size: 12px;
}

.workroom-grid.advanced-collapsed .workroom-section-nav .kicker,
.workroom-grid.advanced-collapsed .workroom-section-status-row,
.workroom-grid.advanced-collapsed .workroom-section-tabs,
.workroom-grid.advanced-collapsed .workroom-section-actions {
  display: none;
}

.workroom-grid.advanced-collapsed .workroom-view-mode {
  margin: 6px 0 0;
}

.workroom-grid.advanced-collapsed .workroom-view-mode button {
  min-height: 30px;
  padding: 6px 8px;
}

.workroom-grid.advanced-collapsed #previewWorkroomCard ~ .workroom-card {
  display: none;
}

.workroom-grid.advanced-collapsed .admin-command-summary-card {
  display: none;
}

.workroom-grid.advanced-collapsed .admin-action-queue-card {
  display: none;
}

.admin-command-summary {
  display: grid;
  gap: 8px;
}

.admin-health-summary {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: linear-gradient(135deg, var(--card-soft), rgba(49, 92, 189, 0.1));
}

.admin-segment-summary {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: rgba(12, 20, 38, 0.48);
}

.admin-health-summary-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.admin-segment-summary-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.admin-health-summary-head span,
.admin-health-summary-item span,
.admin-segment-summary-head span,
.admin-segment-summary-item span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.admin-health-summary-head strong,
.admin-health-summary-item strong,
.admin-segment-summary-head strong,
.admin-segment-summary-item strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.admin-health-summary-head p,
.admin-health-summary-item p,
.admin-segment-summary-head p,
.admin-segment-summary-item p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.admin-health-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.admin-segment-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.admin-health-summary-item {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px;
  background: var(--card);
}

.admin-segment-summary-item {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px;
  background: var(--card-soft);
}

.admin-segment-summary-item.active {
  border-color: rgba(49, 92, 189, 0.38);
  background: rgba(49, 92, 189, 0.12);
}

.admin-segment-summary-item.upgrade-ready,
.admin-segment-summary-item.strong-lead {
  border-color: var(--green-line);
}

.admin-segment-summary-item.needs-support {
  border-color: rgba(180, 105, 18, 0.32);
}

.admin-segment-summary-item.do-not-contact-yet {
  border-color: var(--red-line);
}

.admin-segment-summary-item button {
  width: 100%;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 8px;
  background: rgba(248, 251, 255, 0.06);
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.admin-segment-summary-item button:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(49, 92, 189, 0.16);
}

.admin-segment-summary-item button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.admin-health-summary-item.healthy {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.admin-health-summary-item.at-risk,
.admin-health-summary-item.critical,
.admin-health-summary-item.active-alerts {
  border-color: rgba(180, 105, 18, 0.32);
  background: var(--warning-soft);
}

.admin-command-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.admin-command-item,
.admin-command-next {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px;
  background: var(--card-soft);
}

.admin-command-item span,
.admin-command-next span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.admin-command-item strong,
.admin-command-next strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.admin-command-item p,
.admin-command-next p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.admin-command-next.done {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.admin-command-next.active {
  border-color: rgba(180, 105, 18, 0.32);
  background: var(--warning-soft);
}

.admin-action-queue {
  display: grid;
  gap: 8px;
}

.admin-action-item {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: var(--card-soft);
}

.admin-action-item.high {
  border-color: rgba(255, 123, 114, 0.28);
  background: var(--danger-soft);
}

.admin-action-item.medium {
  border-color: rgba(210, 153, 34, 0.28);
  background: var(--warning-soft);
}

.admin-action-item.normal {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.admin-action-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.admin-action-top span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.admin-action-top strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.25;
}

.admin-action-top button {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 0 10px;
  background: var(--field);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
}

.admin-action-top button:hover {
  background: var(--control-hover);
}

.admin-action-item p,
.admin-action-item small {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.35;
}

.admin-action-item small {
  color: var(--ink);
  font-weight: 800;
}

.command-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.command-item {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px;
  background: var(--surface-soft);
}

.command-item.done {
  border-color: var(--green-line);
}

.command-item.pending {
  border-color: rgba(226, 191, 125, 0.55);
  background: var(--warning-soft);
}

.command-item.active {
  border-color: rgba(49, 92, 189, 0.24);
}

.command-item strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-item p {
  min-height: 32px;
}

.loop-progress-list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.loop-progress-item {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 5px;
  min-width: 0;
  min-height: 86px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.loop-progress-item.done {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.loop-progress-item span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--field);
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 950;
}

.loop-progress-item strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.25;
}

.loop-progress-item i {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 920;
  text-transform: uppercase;
}

.loop-progress-item.done i {
  color: var(--green-strong);
}

.guided-demo-panel {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  border: 1px solid var(--green-line);
  border-radius: 8px;
  padding: 9px;
  background: var(--green-soft);
}

.guided-demo-panel span {
  color: var(--green-strong);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.guided-demo-panel strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.guided-demo-panel p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
}

.guided-demo-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.guided-demo-actions button {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
}

.guided-demo-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.demo-highlight {
  position: relative;
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(52, 125, 153, 0.18), var(--shadow-green) !important;
}

.user-checklist-form {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.user-checklist-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.user-checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 8px;
  background: var(--card-soft);
  color: var(--ink);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.3;
}

.user-checklist-item.done {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.user-checklist-item input {
  flex: 0 0 auto;
  accent-color: var(--green);
}

.user-checklist-item span {
  min-width: 0;
}

.usability-session-form {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.usability-session-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.usability-session-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.usability-session-grid .usability-next-field {
  grid-column: span 2;
}

.usability-session-grid span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.usability-session-grid input,
.usability-session-grid select {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}

.usability-session-list {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.usability-session-item,
.usability-session-empty {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.usability-session-item div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.usability-session-item span {
  color: var(--green-strong);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.usability-session-item strong,
.usability-session-empty strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.usability-session-item p,
.usability-session-empty p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.feedback-insights-panel {
  margin-top: 8px;
}

.feedback-insights-empty,
.feedback-insights-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--card-soft);
}

.feedback-insights-empty strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.feedback-insights-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.feedback-insights-grid div,
.feedback-next-improvement {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-bg);
}

.feedback-next-improvement {
  margin-top: 8px;
}

.feedback-insights-grid span,
.feedback-next-improvement span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.feedback-insights-grid strong,
.feedback-next-improvement strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.3;
}

.demo-brief-panel {
  margin-top: 8px;
}

.demo-brief-empty,
.demo-brief-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--card-soft);
}

.demo-brief-empty strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.demo-brief-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 9px 0 0;
}

.demo-brief-list div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-bg);
}

.demo-brief-list dt {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.demo-brief-list dd {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
}

.demo-brief-list code {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 5px;
  background: var(--soft);
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 850;
}

.demo-script-panel {
  margin-top: 8px;
}

.demo-script-empty,
.demo-script-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--card-soft);
}

.demo-script-empty strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.demo-script-empty p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.demo-script-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.demo-script-top span,
.demo-script-close span,
.demo-script-steps span {
  display: block;
  color: var(--green-strong);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.demo-script-top strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.demo-script-top button {
  min-height: 30px;
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 0 9px;
  background: var(--field);
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 900;
}

.demo-script-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}

.demo-script-steps li,
.demo-script-close {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-bg);
}

.demo-script-steps strong,
.demo-script-close strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.35;
}

.demo-script-steps p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.demo-script-close {
  margin-top: 8px;
}

.public-preview-pack-panel {
  margin-top: 8px;
}

.public-preview-pack-empty,
.public-preview-pack-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--card-soft);
}

.public-preview-pack-empty strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.public-preview-pack-empty p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.public-preview-pack-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.public-preview-pack-top span,
.public-preview-pack-grid span,
.public-preview-assets span {
  display: block;
  color: var(--green-strong);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.public-preview-pack-top strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.public-preview-pack-top button {
  min-height: 30px;
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 0 9px;
  background: var(--field);
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 900;
}

.public-preview-pack-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.public-preview-pack-grid div,
.public-preview-assets {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-bg);
}

.public-preview-pack-grid strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.3;
}

.public-preview-pack-grid p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.public-preview-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.public-preview-assets span {
  flex: 1 0 100%;
}

.public-preview-assets code {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 6px;
  background: var(--soft);
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 850;
}

.early-user-offer-panel {
  margin-top: 8px;
}

.early-user-offer-empty,
.early-user-offer-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--card-soft);
}

.early-user-offer-empty strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.early-user-offer-empty p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.early-user-offer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.early-user-offer-top span,
.early-user-offer-item span {
  display: block;
  color: var(--green-strong);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.early-user-offer-top strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.early-user-offer-top button,
.early-user-offer-item button {
  min-height: 30px;
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 0 9px;
  background: var(--field);
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 900;
}

.early-user-offer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.early-user-offer-item {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-bg);
}

.early-user-offer-item strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.early-user-offer-item dl {
  display: grid;
  gap: 6px;
  margin: 8px 0;
}

.early-user-offer-item dt {
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 920;
  text-transform: uppercase;
}

.early-user-offer-item dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 10px;
  font-weight: 730;
  line-height: 1.35;
}

.early-user-offer-item button {
  width: 100%;
}

.trial-api-key-form {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.trial-api-key-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.trial-api-key-grid label,
.trial-api-key-validator label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.trial-api-key-grid span,
.trial-api-key-validator span,
.trial-key-created span,
.trial-key-validation-card span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.trial-api-key-grid input,
.trial-api-key-validator input {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}

.trial-key-output,
.trial-key-validation-result {
  margin-top: 8px;
}

.trial-key-created,
.trial-key-validation-card,
.trial-key-item,
.trial-key-empty {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.trial-key-created {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.trial-key-created strong,
.trial-key-validation-card strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.trial-key-created p,
.trial-key-validation-card p,
.trial-key-item p,
.trial-key-empty p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.trial-api-key-validator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin-top: 9px;
}

.trial-key-list {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.trial-key-item div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.trial-key-item span {
  color: var(--green-strong);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.trial-key-item strong,
.trial-key-empty strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.trial-key-validation-card.done {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.trial-key-validation-card.blocked {
  border-color: rgba(239, 196, 200, 0.55);
  background: var(--danger-soft);
}

.trial-onboarding-form {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.trial-onboarding-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.35fr) minmax(150px, 0.45fr) minmax(0, 1.2fr);
  gap: 8px;
}

.trial-onboarding-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.trial-onboarding-goal-field {
  min-width: 0;
}

.trial-onboarding-grid span,
.trial-onboarding-card span,
.trial-onboarding-item span,
.trial-onboarding-empty span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.trial-onboarding-grid input,
.trial-onboarding-grid select {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}

.trial-onboarding-summary {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.trial-first-path {
  border: 1px solid rgba(59, 130, 246, 0.26);
  border-radius: 7px;
  padding: 9px;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.11), rgba(16, 185, 129, 0.08));
}

.trial-first-path-head span,
.trial-first-path-grid span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.trial-first-path-head strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.trial-first-path-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 740;
  line-height: 1.35;
}

.trial-first-path-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.trial-first-path-grid section {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 8px 8px 34px;
  background: rgba(255, 255, 255, 0.56);
}

.trial-first-path-grid section.done {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.trial-first-path-grid em {
  position: absolute;
  left: 8px;
  top: 8px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--card);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.trial-first-path-grid strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
}

.trial-onboarding-card,
.trial-onboarding-item,
.trial-onboarding-empty {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.trial-onboarding-card {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.trial-onboarding-item {
  border-color: rgba(73, 98, 128, 0.22);
}

.trial-onboarding-empty {
  border-style: dashed;
}

.trial-onboarding-card strong,
.trial-onboarding-item strong,
.trial-onboarding-empty strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.trial-onboarding-card p,
.trial-onboarding-item p,
.trial-onboarding-empty p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.trial-session-plan-panel {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.trial-session-card,
.trial-session-history,
.trial-session-empty {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.trial-session-card {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.trial-session-empty {
  border-style: dashed;
}

.trial-session-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.trial-session-top button {
  flex: 0 0 auto;
  border: 1px solid var(--green-line);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  padding: 7px 9px;
}

.trial-session-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.trial-session-grid section {
  border: 1px solid rgba(31, 42, 55, 0.08);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.55);
  padding: 8px;
  min-width: 0;
}

.trial-session-card span,
.trial-session-history span,
.trial-session-empty span,
.trial-session-grid span,
.trial-session-budget span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.trial-session-card strong,
.trial-session-history strong,
.trial-session-empty strong,
.trial-session-budget strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.trial-session-card p,
.trial-session-history p,
.trial-session-empty p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.trial-session-grid ol {
  margin: 6px 0 0;
  padding-left: 16px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.35;
}

.trial-session-grid li + li {
  margin-top: 4px;
}

.trial-session-budget {
  border: 1px solid rgba(180, 105, 18, 0.32);
  border-radius: 7px;
  margin-top: 8px;
  padding: 8px;
  background: var(--warning-soft);
}

.trial-usage-form {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.trial-usage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(110px, 0.35fr) minmax(0, 1fr);
  gap: 8px;
}

.trial-usage-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.trial-usage-grid span,
.trial-usage-card span,
.trial-usage-item span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.trial-usage-grid input,
.trial-usage-grid select {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}

.trial-usage-summary,
.trial-usage-list {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.trial-usage-card,
.trial-usage-item {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.trial-usage-card.done,
.trial-usage-item.done {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.trial-usage-card.active,
.trial-usage-item.active {
  border-color: rgba(180, 105, 18, 0.32);
  background: var(--warning-soft);
}

.trial-usage-card.blocked,
.trial-usage-item.blocked {
  border-color: rgba(239, 196, 200, 0.55);
  background: var(--danger-soft);
}

.trial-usage-card strong,
.trial-usage-item strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.trial-usage-card p,
.trial-usage-item p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.trial-advance-warning {
  border: 1px solid rgba(180, 105, 18, 0.32);
  border-radius: 7px;
  background: rgba(180, 105, 18, 0.08);
  margin-top: 10px;
  padding: 8px;
}

.trial-advance-warning span {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.trial-advance-warning strong {
  color: var(--ink);
  display: block;
  font-size: 12px;
  font-weight: 950;
  margin-top: 3px;
}

.trial-advance-warning button {
  border: 1px solid rgba(180, 105, 18, 0.32);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  margin-top: 8px;
  padding: 7px 9px;
}

.trial-usage-bar {
  height: 8px;
  overflow: hidden;
  margin-top: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
}

.trial-usage-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green-strong), var(--accent));
}

.trial-usage-item div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.credit-alert-panel {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.credit-alert-card,
.credit-alert-empty {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card-soft);
  padding: 9px;
}

.credit-alert-card.pending {
  border-color: rgba(180, 105, 18, 0.34);
  background: var(--warning-soft);
}

.credit-alert-card.sent {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.credit-alert-card.resolved {
  opacity: 0.82;
}

.credit-alert-top,
.credit-alert-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.credit-alert-top span,
.credit-alert-empty p,
.credit-alert-card p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
  margin: 5px 0 0;
}

.credit-alert-top strong,
.credit-alert-empty strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  margin-top: 3px;
}

.credit-alert-facts {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 10px 0 0;
}

.credit-alert-facts div {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  padding: 7px;
}

.credit-alert-facts dt {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.credit-alert-facts dd {
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
  margin: 3px 0 0;
}

.credit-alert-actions {
  justify-content: flex-start;
  margin-top: 9px;
}

.credit-alert-actions button {
  border: 1px solid rgba(180, 105, 18, 0.32);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  padding: 7px 9px;
}

.upgrade-path-panel {
  margin-top: 8px;
}

.upgrade-path-empty,
.upgrade-path-card,
.upgrade-path-signal,
.upgrade-path-item {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.upgrade-path-card {
  display: grid;
  gap: 8px;
}

.upgrade-path-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.upgrade-path-top span,
.upgrade-path-signal span,
.upgrade-path-item span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.upgrade-path-empty strong,
.upgrade-path-top strong,
.upgrade-path-signal strong,
.upgrade-path-item strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.upgrade-path-empty p,
.upgrade-path-signal p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.upgrade-path-top button,
.upgrade-path-item button {
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 7px 9px;
  background: var(--green-soft);
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.upgrade-path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.upgrade-path-item dl {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
}

.upgrade-path-item dt {
  color: var(--muted);
  font-size: 8px;
  font-weight: 920;
  text-transform: uppercase;
}

.upgrade-path-item dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.upgrade-path-item button {
  width: 100%;
  margin-top: 9px;
}

.upgrade-checkout-form {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.upgrade-checkout-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.upgrade-checkout-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.upgrade-checkout-grid span,
.upgrade-checkout-item span,
.upgrade-checkout-created span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.upgrade-checkout-grid input,
.upgrade-checkout-grid select {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}

.upgrade-checkout-output,
.upgrade-checkout-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.upgrade-checkout-empty,
.upgrade-checkout-item,
.upgrade-checkout-created {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.upgrade-checkout-created {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.upgrade-checkout-item strong,
.upgrade-checkout-empty strong,
.upgrade-checkout-created strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.upgrade-checkout-item p,
.upgrade-checkout-empty p,
.upgrade-checkout-created p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.revenue-dashboard-panel {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.revenue-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.revenue-dashboard-item,
.revenue-dashboard-next {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.revenue-dashboard-next {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.revenue-dashboard-item span,
.revenue-dashboard-next span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.revenue-dashboard-item strong,
.revenue-dashboard-next strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.revenue-dashboard-item p,
.revenue-dashboard-next p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.pricing-plan-form {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.pricing-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pricing-plan-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.pricing-plan-grid span,
.pricing-plan-card span,
.pricing-plan-policy span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.pricing-plan-grid input,
.pricing-plan-grid select {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}

.pricing-plan-summary {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.pricing-plan-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pricing-plan-card,
.pricing-plan-policy {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.pricing-plan-card:first-child,
.pricing-plan-policy {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.pricing-plan-card strong,
.pricing-plan-policy strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.pricing-plan-card p,
.pricing-plan-policy p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.admin-customer-panel {
  margin-top: 8px;
}

.admin-ops-block {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(12, 20, 38, 0.48);
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px;
}

.admin-ops-block.urgent {
  border-color: rgba(180, 105, 18, 0.24);
}

.admin-ops-block.customers {
  background: rgba(12, 20, 38, 0.58);
}

.admin-ops-block.tools {
  background: rgba(12, 20, 38, 0.36);
}

.admin-ops-head {
  align-items: start;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.admin-ops-head span {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.admin-ops-head strong {
  color: var(--ink);
  display: block;
  font-size: 13px;
  font-weight: 950;
  margin-top: 3px;
}

.admin-ops-head p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.35;
  margin: 0;
  max-width: 280px;
  text-align: right;
}

.admin-ops-two-column {
  align-items: start;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-ops-block .customer-health-alerts,
.admin-ops-block .customer-follow-up-queue,
.admin-ops-block .admin-customer-export,
.admin-ops-block .customer-merge-tool {
  margin-bottom: 0;
  min-width: 0;
}

.admin-customer-sync {
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card-soft);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 8px;
}

.admin-customer-sync.done {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.admin-customer-sync.blocked {
  border-color: var(--red-line);
  background: var(--red-soft);
}

.admin-customer-sync span {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.admin-customer-sync strong {
  color: var(--ink);
  display: block;
  font-size: 12px;
  font-weight: 950;
  margin-top: 3px;
}

.admin-customer-sync p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
  margin: 5px 0 0;
}

.admin-customer-sync button {
  border: 1px solid var(--green-line);
  border-radius: 6px;
  background: var(--green-soft);
  color: var(--green-strong);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  padding: 7px 9px;
  white-space: nowrap;
}

.admin-customer-export {
  display: grid;
  gap: 9px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: var(--card-soft);
}

.admin-customer-export > div:first-child {
  display: grid;
  gap: 3px;
}

.admin-customer-export span,
.admin-customer-export-output span {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.admin-customer-export strong,
.admin-customer-export-output strong {
  color: var(--ink);
  display: block;
  font-size: 13px;
  font-weight: 950;
}

.admin-customer-export p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
  margin: 0;
}

.admin-customer-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-customer-export-actions button {
  min-height: 32px;
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 0 11px;
  background: var(--green-soft);
  color: var(--green-strong);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
}

.admin-customer-export-output {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-bg);
}

.admin-customer-export-output pre {
  max-height: 160px;
  overflow: auto;
  margin: 7px 0 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 10px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.admin-customer-import {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-bg);
}

.admin-customer-import label {
  display: grid;
  gap: 5px;
}

.admin-customer-import label span,
.admin-customer-import-output span {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.admin-customer-import textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.4;
  resize: vertical;
}

.admin-customer-import textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-line);
  outline: none;
}

.admin-customer-import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.admin-customer-import-actions button {
  min-height: 32px;
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 0 11px;
  background: var(--green-soft);
  color: var(--green-strong);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
}

.admin-customer-import-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.admin-customer-import-output {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.admin-customer-import-output.restored,
.admin-customer-import-output.preview {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.admin-customer-import-output.blocked {
  border-color: var(--red-line);
  background: var(--red-soft);
}

.admin-customer-import-output strong {
  color: var(--ink);
  display: block;
  font-size: 12px;
  font-weight: 950;
  margin-top: 3px;
}

.admin-customer-import-output ul {
  display: grid;
  gap: 4px;
  margin: 7px 0 0;
  padding-left: 16px;
}

.admin-customer-import-output li {
  color: var(--ink);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.35;
}

.customer-health-strip {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.customer-health-strip.healthy,
.customer-health-panel.healthy {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.customer-health-strip.watch,
.customer-health-panel.watch {
  border-color: var(--blue-line);
  background: var(--blue-soft);
}

.customer-health-strip.at-risk,
.customer-health-panel.at-risk,
.customer-health-strip.critical,
.customer-health-panel.critical {
  border-color: rgba(180, 105, 18, 0.42);
  background: var(--warning-soft);
}

.customer-health-strip span,
.customer-health-panel span {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.customer-health-strip strong,
.customer-health-panel strong {
  color: var(--ink);
  display: block;
  font-size: 12px;
  font-weight: 950;
  margin-top: 3px;
}

.customer-health-strip p,
.customer-health-panel p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.35;
  margin: 0;
  max-width: 340px;
}

.customer-health-panel {
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: var(--card-soft);
}

.customer-health-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.customer-health-head em {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 7px;
  background: var(--field);
  color: var(--ink);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.customer-health-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.customer-health-grid article {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--field);
}

.customer-health-actions {
  display: flex;
  justify-content: flex-end;
}

.customer-health-actions button {
  min-height: 32px;
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 0 11px;
  background: var(--green-soft);
  color: var(--green-strong);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
}

.customer-health-trend {
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: var(--card-soft);
}

.customer-health-trend.improving {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.customer-health-trend.declining {
  border-color: rgba(180, 105, 18, 0.42);
  background: var(--warning-soft);
}

.customer-health-trend span,
.customer-health-history span {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.customer-health-trend strong,
.customer-health-history strong {
  color: var(--ink);
  display: block;
  font-size: 12px;
  font-weight: 950;
  margin-top: 3px;
}

.customer-health-trend p,
.customer-health-history p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.35;
  margin: 0;
}

.customer-health-trend button {
  min-height: 32px;
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 0 11px;
  background: var(--green-soft);
  color: var(--green-strong);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.customer-health-history {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.customer-health-history article {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--field);
}

.customer-health-history article.healthy {
  border-color: var(--green-line);
}

.customer-health-history article.at-risk,
.customer-health-history article.critical {
  border-color: rgba(180, 105, 18, 0.42);
}

.customer-merge-tool {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--card-soft);
}

.customer-merge-tool.empty {
  border-style: dashed;
}

.customer-merge-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.customer-merge-head span,
.customer-merge-grid span,
.customer-merge-preview span,
.customer-merge-tool.empty span {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.customer-merge-head strong,
.customer-merge-preview strong,
.customer-merge-tool.empty strong {
  color: var(--ink);
  display: block;
  font-size: 13px;
  font-weight: 950;
  margin-top: 3px;
}

.customer-merge-head p,
.customer-merge-preview p,
.customer-merge-tool.empty p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
  margin: 4px 0 0;
}

.customer-merge-head em {
  color: var(--ink);
  font-size: 10px;
  font-style: normal;
  font-weight: 840;
}

.customer-merge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.customer-merge-grid select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 11px;
  font-weight: 760;
}

.customer-merge-preview {
  border: 1px solid var(--green-line);
  border-radius: 7px;
  padding: 8px;
  background: var(--green-soft);
}

.customer-merge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.customer-merge-tool button {
  width: fit-content;
  min-height: 32px;
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 0 11px;
  background: var(--green-soft);
  color: var(--green-strong);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
}

.customer-merge-tool button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.customer-merge-history {
  display: grid;
  gap: 7px;
  border-top: 1px solid var(--line);
  padding-top: 9px;
}

.customer-merge-history > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.customer-merge-history article {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--field);
}

.customer-merge-history article.undone {
  border-color: var(--yellow-line);
  background: var(--yellow-soft);
}

.customer-merge-history strong {
  color: var(--ink);
  display: block;
  font-size: 12px;
  font-weight: 930;
}

.customer-merge-history p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
  margin: 4px 0 0;
}

.admin-audit-panel {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.admin-audit-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--card-soft);
}

.admin-audit-filters button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  color: var(--ink);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  padding: 0 9px;
}

.admin-audit-filters button.active {
  border-color: var(--green-line);
  background: var(--green-soft);
  color: var(--green-strong);
}

.admin-audit-filters span {
  margin-left: 4px;
  color: inherit;
  opacity: 0.76;
}

.admin-audit-sync,
.admin-audit-export {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: var(--card-soft);
}

.admin-audit-sync.done {
  border-color: var(--green-line);
}

.admin-audit-sync.blocked {
  border-color: rgba(239, 68, 68, 0.34);
}

.admin-audit-sync span,
.admin-audit-export span,
.admin-audit-export-output span {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.admin-audit-sync strong,
.admin-audit-export strong,
.admin-audit-export-output strong {
  color: var(--ink);
  display: block;
  font-size: 13px;
  font-weight: 950;
  margin-top: 3px;
}

.admin-audit-sync p,
.admin-audit-export p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
  margin: 4px 0 0;
}

.admin-audit-sync button {
  width: fit-content;
  min-height: 32px;
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 0 11px;
  background: var(--green-soft);
  color: var(--green-strong);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
}

.admin-audit-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-audit-export-actions button {
  min-height: 32px;
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 0 11px;
  background: var(--green-soft);
  color: var(--green-strong);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
}

.admin-audit-export-output {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-bg);
}

.admin-audit-export-output pre {
  max-height: 150px;
  overflow: auto;
  margin: 7px 0 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 10px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.admin-audit-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-audit-item,
.admin-audit-empty {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.admin-audit-item.backup {
  border-color: var(--blue-line);
  background: var(--blue-soft);
}

.admin-audit-item.security,
.admin-audit-item.payment {
  border-color: rgba(180, 105, 18, 0.32);
  background: var(--warning-soft);
}

.admin-audit-item.done {
  border-color: var(--green-line);
}

.admin-audit-item span {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.admin-audit-item strong,
.admin-audit-empty strong {
  color: var(--ink);
  display: block;
  font-size: 12px;
  font-weight: 950;
  margin-top: 3px;
}

.admin-audit-item p,
.admin-audit-empty p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
  margin: 4px 0 0;
}

.admin-audit-item em {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 7px;
  background: var(--field);
  color: var(--ink);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.customer-follow-up-queue {
  display: grid;
  gap: 9px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: var(--card-soft);
}

.customer-follow-up-queue-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.customer-follow-up-queue-head span,
.customer-follow-up-queue-filters span,
.customer-follow-up-queue-card span {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.customer-follow-up-queue-head strong {
  color: var(--ink);
  display: block;
  font-size: 13px;
  font-weight: 950;
  margin-top: 3px;
}

.customer-follow-up-queue-head p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
  margin: 5px 0 0;
}

.customer-follow-up-queue-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.customer-follow-up-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.customer-follow-up-filter-buttons button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  color: var(--ink);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  padding: 0 9px;
}

.customer-follow-up-filter-buttons button.active {
  border-color: var(--green-line);
  background: var(--green-soft);
  color: var(--green-strong);
}

.customer-follow-up-filter-buttons button span {
  display: inline;
  margin-left: 4px;
  color: inherit;
  opacity: 0.76;
  font-size: inherit;
  text-transform: none;
}

.customer-follow-up-queue-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.customer-follow-up-queue-card,
.customer-follow-up-queue-empty {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-bg);
}

.customer-follow-up-queue-card.high {
  border-color: rgba(239, 196, 200, 0.55);
  background: var(--danger-soft);
}

.customer-follow-up-queue-card.medium {
  border-color: rgba(180, 105, 18, 0.32);
  background: var(--warning-soft);
}

.customer-follow-up-queue-card strong,
.customer-follow-up-queue-empty strong {
  color: var(--ink);
  display: block;
  font-size: 12px;
  font-weight: 950;
  margin-top: 3px;
}

.customer-follow-up-queue-card p,
.customer-follow-up-queue-empty p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
  margin: 4px 0 0;
}

.customer-follow-up-queue-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.customer-follow-up-queue-card dt {
  color: var(--muted);
  font-size: 8px;
  font-weight: 920;
  text-transform: uppercase;
}

.customer-follow-up-queue-card dd {
  color: var(--ink);
  font-size: 10px;
  font-weight: 740;
  line-height: 1.3;
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.customer-follow-up-queue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.customer-follow-up-queue-actions button {
  min-height: 30px;
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 0 10px;
  background: var(--green-soft);
  color: var(--green-strong);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
}

.customer-health-alerts {
  display: grid;
  gap: 9px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: var(--card-soft);
}

.customer-health-alerts-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.customer-health-alerts-head span,
.customer-health-alert-card span,
.customer-health-alert-card dt {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.customer-health-alerts-head strong,
.customer-health-alert-card strong,
.customer-health-alert-empty strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.customer-health-alerts-head p,
.customer-health-alert-card p,
.customer-health-alert-empty p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.customer-health-alert-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.customer-health-alert-card,
.customer-health-alert-empty {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-bg);
}

.customer-health-alert-card.critical {
  border-color: rgba(239, 196, 200, 0.62);
  background: var(--danger-soft);
}

.customer-health-alert-card.high {
  border-color: rgba(180, 105, 18, 0.38);
  background: var(--warning-soft);
}

.customer-health-alert-card.medium {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.customer-health-alert-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.customer-health-alert-card dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 10px;
  font-weight: 740;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.customer-health-alert-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.customer-health-alert-actions button {
  min-height: 30px;
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 0 10px;
  background: var(--green-soft);
  color: var(--green-strong);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
}

.customer-health-alert-status {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: var(--card-soft);
}

.customer-health-alert-status.acknowledged {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.customer-health-alert-status.snoozed {
  border-color: rgba(180, 105, 18, 0.38);
  background: var(--warning-soft);
}

.customer-health-alert-status span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.customer-health-alert-status strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.customer-health-alert-status p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.customer-health-alert-status-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.customer-health-alert-status-actions button {
  min-height: 30px;
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 0 10px;
  background: var(--green-soft);
  color: var(--green-strong);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
}

.admin-customer-filters {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--card-soft);
}

.admin-customer-search {
  display: grid;
  gap: 5px;
}

.admin-customer-search span,
.admin-customer-filters p {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.admin-customer-search input {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 10px;
  background: var(--field);
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}

.admin-customer-search input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-line);
  outline: none;
}

.admin-customer-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-customer-filter-buttons button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  color: var(--ink);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  padding: 0 9px;
}

.admin-customer-filter-buttons button.active {
  border-color: var(--green-line);
  background: var(--green-soft);
  color: var(--green-strong);
}

.admin-customer-filter-buttons span {
  margin-left: 4px;
  color: inherit;
  opacity: 0.76;
}

.admin-customer-filters p {
  margin: 0;
  text-transform: none;
}

.segment-campaign-planner {
  display: grid;
  gap: 9px;
  margin: 10px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: rgba(12, 20, 38, 0.48);
}

.segment-campaign-head span,
.segment-campaign-grid label span,
.segment-campaign-audience span,
.segment-campaign-plan span,
.segment-campaign-plan dt {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.segment-campaign-head strong,
.segment-campaign-audience strong,
.segment-campaign-plan strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.segment-campaign-head p,
.segment-campaign-audience p,
.segment-campaign-plan p,
.segment-campaign-plan dd {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.segment-campaign-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.segment-campaign-grid label {
  display: grid;
  gap: 5px;
}

.segment-campaign-grid label.wide {
  grid-column: 1 / -1;
}

.segment-campaign-grid select,
.segment-campaign-grid input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 10px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
}

.segment-campaign-audience,
.segment-campaign-plan {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px;
  background: var(--card);
}

.segment-campaign-plan.empty {
  background: var(--card-soft);
}

.segment-campaign-plan dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 8px 0 0;
}

.segment-campaign-outcome {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px;
  background: rgba(248, 251, 255, 0.04);
}

.segment-campaign-outcome-head span,
.segment-campaign-outcome-grid label span,
.segment-campaign-outcome-summary span {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.segment-campaign-outcome-head strong,
.segment-campaign-outcome-summary strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.segment-campaign-outcome-head p,
.segment-campaign-outcome-summary p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.segment-campaign-outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.segment-campaign-outcome-grid label {
  display: grid;
  gap: 5px;
}

.segment-campaign-outcome-grid label.wide {
  grid-column: 1 / -1;
}

.segment-campaign-outcome-grid select,
.segment-campaign-outcome-grid input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 10px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
}

.segment-campaign-outcome-summary {
  border: 1px solid var(--green-line);
  border-radius: 7px;
  padding: 8px;
  background: var(--green-soft);
}

.segment-campaign-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.segment-campaign-actions button {
  border: 1px solid var(--green-line);
  border-radius: 7px;
  padding: 8px 10px;
  background: var(--green-soft);
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.segment-campaign-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.admin-customer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-customer-card,
.admin-customer-empty {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.admin-customer-card.done {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.admin-customer-card.active {
  border-color: rgba(180, 105, 18, 0.32);
  background: var(--warning-soft);
}

.admin-customer-card.blocked {
  border-color: rgba(239, 196, 200, 0.55);
  background: var(--danger-soft);
}

.admin-customer-card.selected {
  border-color: var(--green);
  box-shadow: 0 0 0 2px var(--green-line);
}

.customer-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.customer-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--card);
  color: var(--ink);
  font-size: 9px;
  font-weight: 900;
}

.customer-tag.empty {
  color: var(--muted);
}

.customer-tag.upgrade-ready,
.customer-tag.strong-lead {
  border-color: var(--green-line);
  background: var(--green-soft);
  color: var(--green-strong);
}

.customer-tag.needs-support,
.customer-tag.do-not-contact-yet {
  border-color: rgba(180, 105, 18, 0.32);
  background: var(--warning-soft);
}

.admin-customer-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}

.admin-customer-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.admin-customer-top span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.admin-customer-top strong,
.admin-customer-empty strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.admin-customer-top button {
  flex: 0 0 auto;
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 7px 9px;
  background: var(--green-soft);
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.admin-customer-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 9px 0 0;
}

.admin-customer-card dt {
  color: var(--muted);
  font-size: 8px;
  font-weight: 920;
  text-transform: uppercase;
}

.admin-customer-card dd,
.admin-customer-empty p {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.admin-customer-empty p {
  color: var(--muted);
}

.admin-customer-detail-drawer {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  border: 1px solid var(--green-line);
  border-radius: 8px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(63, 127, 174, 0.12), rgba(13, 17, 23, 0.08)),
    var(--card-soft);
}

.admin-customer-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.customer-tags-form {
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--card);
}

.customer-tags-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.customer-tags-head span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.customer-tags-head strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.customer-tags-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.customer-tags-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.customer-tags-options label {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
  color: var(--ink);
  font-size: 10px;
  font-weight: 850;
}

.customer-tags-options label.selected {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.admin-customer-detail-head span,
.admin-customer-detail-grid dt {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.admin-customer-detail-head strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.admin-customer-detail-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.35;
}

.admin-customer-detail-head button {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  background: var(--field);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
}

.admin-customer-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-customer-detail-grid div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-bg);
}

.admin-customer-detail-grid dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.customer-crm-sync {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: var(--card-bg);
}

.customer-crm-sync.synced {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.customer-crm-sync.syncing {
  border-color: var(--blue-line);
  background: var(--blue-soft);
}

.customer-crm-sync.failed {
  border-color: var(--red-line);
  background: var(--red-soft);
}

.customer-crm-sync span {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.customer-crm-sync strong {
  color: var(--ink);
  display: block;
  font-size: 13px;
  font-weight: 950;
  margin-top: 3px;
  text-transform: capitalize;
}

.customer-crm-sync p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
  margin: 5px 0 0;
}

.customer-crm-sync button {
  flex: 0 0 auto;
  min-height: 32px;
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 0 11px;
  background: var(--green-soft);
  color: var(--green-strong);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.customer-crm-sync button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.customer-note-form {
  display: grid;
  gap: 8px;
}

.customer-note-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.customer-note-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.customer-note-grid span,
.customer-note-summary span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.customer-note-grid input,
.customer-note-grid textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 12px;
  font-weight: 720;
}

.customer-note-grid textarea {
  resize: vertical;
  line-height: 1.35;
}

.customer-note-grid input:focus,
.customer-note-grid textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-line);
  outline: none;
}

.customer-note-actions {
  display: flex;
  justify-content: flex-end;
}

.customer-note-actions button {
  min-height: 32px;
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 0 11px;
  background: var(--green-soft);
  color: var(--green-strong);
  font-size: 11px;
  font-weight: 900;
}

.customer-note-summary {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px;
  background: var(--card-bg);
}

.customer-note-summary.done {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.customer-note-summary strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.customer-note-summary p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.35;
}

.customer-message-builder {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: var(--card-bg);
}

.customer-message-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.customer-message-head span,
.customer-message-builder label span {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.customer-message-head strong {
  color: var(--ink);
  display: block;
  font-size: 13px;
  font-weight: 950;
  margin-top: 3px;
}

.customer-message-head p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
  margin: 5px 0 0;
}

.customer-message-builder label {
  display: grid;
  gap: 5px;
}

.customer-template-library {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.customer-segment-message-suggestions {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: rgba(49, 92, 189, 0.08);
}

.customer-segment-message-suggestions > div:first-child span,
.customer-segment-message-grid span {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.customer-segment-message-suggestions > div:first-child strong,
.customer-segment-message-grid strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.customer-segment-message-suggestions > div:first-child p,
.customer-segment-message-grid small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 720;
  line-height: 1.3;
}

.customer-segment-message-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.customer-segment-message-grid button,
.customer-segment-message-grid article {
  min-height: 62px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--field);
  color: var(--ink);
  text-align: left;
}

.customer-segment-message-grid button {
  cursor: pointer;
}

.customer-segment-message-grid button:hover {
  border-color: var(--accent);
  background: rgba(49, 92, 189, 0.16);
}

.customer-template-library button {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--field);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.customer-template-library button:hover {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.customer-template-library strong {
  display: block;
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
}

.customer-template-library span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 720;
  line-height: 1.3;
}

.customer-message-builder select,
.customer-message-builder textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 12px;
  font-weight: 720;
}

.customer-message-builder textarea {
  resize: vertical;
  line-height: 1.4;
}

.customer-message-builder select:focus,
.customer-message-builder textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-line);
  outline: none;
}

.customer-message-head button,
.customer-message-actions button {
  min-height: 32px;
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 0 11px;
  background: var(--green-soft);
  color: var(--green-strong);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.customer-message-actions {
  display: flex;
  justify-content: flex-end;
}

.customer-message-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.customer-follow-up-status {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: var(--card-bg);
}

.customer-follow-up-status.ready,
.customer-follow-up-status.sent,
.customer-follow-up-status.waiting {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.customer-follow-up-status.resolved {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.customer-follow-up-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.customer-follow-up-head span,
.customer-follow-up-grid span {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.customer-follow-up-head strong {
  color: var(--ink);
  display: block;
  font-size: 13px;
  font-weight: 950;
  margin-top: 3px;
}

.customer-follow-up-head p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
  margin: 5px 0 0;
}

.customer-follow-up-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.customer-follow-up-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.customer-follow-up-grid .wide {
  grid-column: 1 / -1;
}

.customer-follow-up-grid select,
.customer-follow-up-grid input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 12px;
  font-weight: 720;
}

.customer-follow-up-grid select:focus,
.customer-follow-up-grid input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-line);
  outline: none;
}

.customer-follow-up-head button,
.customer-follow-up-quick-actions button {
  min-height: 32px;
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 0 11px;
  background: var(--green-soft);
  color: var(--green-strong);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.customer-follow-up-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.customer-activity-timeline {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: var(--card-bg);
}

.customer-activity-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.customer-activity-head span,
.customer-activity-timeline li span {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.customer-activity-head strong {
  color: var(--ink);
  display: block;
  font-size: 13px;
  font-weight: 950;
  margin-top: 3px;
}

.customer-activity-head p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
  margin: 0;
  max-width: 360px;
  text-align: right;
}

.customer-activity-timeline ol {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.customer-activity-timeline li {
  border-left: 3px solid var(--line);
  border-radius: 7px;
  padding: 7px 8px;
  background: var(--card-soft);
}

.customer-activity-timeline li.done {
  border-left-color: var(--green);
}

.customer-activity-timeline li.active {
  border-left-color: var(--blue);
}

.customer-activity-timeline li.blocked {
  border-left-color: var(--danger);
}

.customer-activity-timeline li strong {
  color: var(--ink);
  display: block;
  font-size: 12px;
  font-weight: 920;
  margin-top: 3px;
}

.customer-activity-timeline li p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
  margin: 4px 0 0;
}

.backend-security-panel {
  margin-top: 8px;
}

.backend-security-empty,
.backend-security-card,
.backend-security-item,
.backend-security-phase {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.backend-security-card {
  display: grid;
  gap: 8px;
}

.backend-security-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.backend-security-top span,
.backend-security-item span,
.backend-security-phase span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.backend-security-empty strong,
.backend-security-top strong,
.backend-security-item strong,
.backend-security-phase strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.backend-security-empty p,
.backend-security-item p,
.backend-security-phase p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.backend-security-top button {
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 7px 9px;
  background: var(--green-soft);
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.backend-security-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.backend-security-phases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.backend-schema-panel {
  margin-top: 8px;
}

.backend-schema-empty,
.backend-schema-card,
.backend-schema-entity,
.backend-schema-relations article {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.backend-schema-card {
  display: grid;
  gap: 8px;
}

.backend-schema-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.backend-schema-top span,
.backend-schema-entity span,
.backend-schema-relations span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.backend-schema-empty strong,
.backend-schema-top strong,
.backend-schema-entity strong,
.backend-schema-relations strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.backend-schema-empty p,
.backend-schema-entity p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.backend-schema-top button {
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 7px 9px;
  background: var(--green-soft);
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.backend-schema-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.backend-schema-entity code {
  display: block;
  margin-top: 7px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

.backend-schema-relations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.api-endpoint-panel {
  margin-top: 8px;
}

.api-endpoint-empty,
.api-endpoint-card,
.api-endpoint-item,
.api-endpoint-flow article {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.api-endpoint-card {
  display: grid;
  gap: 8px;
}

.api-endpoint-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.api-endpoint-top span,
.api-endpoint-item span,
.api-endpoint-flow span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.api-endpoint-empty strong,
.api-endpoint-top strong,
.api-endpoint-item strong,
.api-endpoint-flow strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.api-endpoint-empty p,
.api-endpoint-item p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.api-endpoint-top button {
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 7px 9px;
  background: var(--green-soft);
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.api-endpoint-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.api-endpoint-item dl {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
}

.api-endpoint-item dt {
  color: var(--muted);
  font-size: 8px;
  font-weight: 920;
  text-transform: uppercase;
}

.api-endpoint-item dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.api-endpoint-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.backend-stack-panel {
  margin-top: 8px;
}

.backend-stack-empty,
.backend-stack-card,
.backend-stack-recommendation,
.backend-stack-option,
.backend-stack-steps article {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.backend-stack-card {
  display: grid;
  gap: 8px;
}

.backend-stack-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.backend-stack-top span,
.backend-stack-recommendation span,
.backend-stack-option span,
.backend-stack-steps span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.backend-stack-empty strong,
.backend-stack-top strong,
.backend-stack-recommendation strong,
.backend-stack-option strong,
.backend-stack-steps strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.backend-stack-empty p,
.backend-stack-recommendation p,
.backend-stack-option p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.backend-stack-top button {
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 7px 9px;
  background: var(--green-soft);
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.backend-stack-recommendation,
.backend-stack-option.selected {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.backend-stack-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.backend-stack-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.backend-checklist-panel {
  margin-top: 8px;
}

.backend-checklist-empty,
.backend-checklist-card,
.backend-checklist-item {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.backend-checklist-card {
  display: grid;
  gap: 8px;
}

.backend-checklist-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.backend-checklist-top span,
.backend-checklist-item span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.backend-checklist-empty strong,
.backend-checklist-top strong,
.backend-checklist-item strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.backend-checklist-empty p,
.backend-checklist-item p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.backend-checklist-top button {
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 7px 9px;
  background: var(--green-soft);
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.backend-checklist-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.backend-checklist-item {
  display: grid;
  gap: 3px;
  cursor: pointer;
}

.backend-checklist-item.done {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.backend-checklist-item input {
  width: 16px;
  height: 16px;
  accent-color: var(--green-strong);
}

.backend-scaffold-panel {
  margin-top: 8px;
}

.backend-connection-panel {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.backend-connection-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.backend-connection-item,
.backend-connection-summary {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card-soft);
  padding: 8px;
}

.backend-connection-item.done,
.backend-connection-summary.done {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.backend-connection-summary.active {
  border-color: var(--amber-line);
  background: var(--amber-soft);
}

.backend-connection-item.blocked,
.backend-connection-summary.blocked {
  border-color: var(--red-line);
  background: var(--red-soft);
}

.backend-connection-item span,
.backend-connection-summary span {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.backend-connection-item strong,
.backend-connection-summary strong {
  color: var(--ink);
  display: block;
  font-size: 12px;
  font-weight: 950;
  margin-top: 3px;
}

.backend-connection-summary {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.backend-connection-summary p {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
  margin: 5px 0 0;
}

.backend-connection-summary button {
  border: 1px solid var(--green-line);
  border-radius: 6px;
  background: var(--green-soft);
  color: var(--green-strong);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  padding: 7px 9px;
  white-space: nowrap;
}

.backend-scaffold-empty,
.backend-scaffold-card,
.backend-scaffold-group,
.backend-scaffold-file,
.backend-scaffold-rules article {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.backend-scaffold-card {
  display: grid;
  gap: 8px;
}

.backend-scaffold-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.backend-scaffold-top span,
.backend-scaffold-group span,
.backend-scaffold-file span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.backend-scaffold-empty strong,
.backend-scaffold-top strong,
.backend-scaffold-group strong,
.backend-scaffold-file strong,
.backend-scaffold-rules strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.backend-scaffold-empty p,
.backend-scaffold-group p,
.backend-scaffold-file p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.backend-scaffold-top button {
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 7px 9px;
  background: var(--green-soft);
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.backend-scaffold-groups,
.backend-scaffold-rules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.backend-scaffold-files {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.paid-trial-checkout-form {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.paid-trial-checkout-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.paid-trial-checkout-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.paid-trial-checkout-grid span,
.paid-trial-checkout-created span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.paid-trial-checkout-grid input,
.paid-trial-checkout-grid select {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}

.paid-trial-checkout-output {
  margin-top: 8px;
}

.paid-trial-checkout-created,
.paid-trial-checkout-item,
.paid-trial-checkout-empty {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.paid-trial-checkout-created {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.paid-trial-checkout-created strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.paid-trial-checkout-created p,
.paid-trial-checkout-item p,
.paid-trial-checkout-empty p {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.paid-trial-checkout-list {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.paid-trial-checkout-item div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.paid-trial-checkout-item span {
  color: var(--green-strong);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.paid-trial-checkout-item strong,
.paid-trial-checkout-empty strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.receipt-email-form {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.receipt-email-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.receipt-email-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.receipt-email-grid span,
.receipt-email-item span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.receipt-email-grid input,
.receipt-email-grid select {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}

.receipt-email-summary {
  margin-top: 9px;
}

.receipt-email-readiness {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.receipt-email-item {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.receipt-email-item.done {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.receipt-email-item strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receipt-email-provider-plan {
  display: grid;
  gap: 8px;
  margin-top: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: var(--card-soft);
}

.receipt-email-provider-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.receipt-email-provider-head span,
.receipt-email-provider-item span {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.receipt-email-provider-head strong {
  color: var(--ink);
  display: block;
  font-size: 13px;
  font-weight: 950;
  margin-top: 3px;
}

.receipt-email-provider-head p {
  max-width: 320px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.35;
  text-align: right;
}

.receipt-email-provider-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.receipt-email-provider-item {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-bg);
}

.receipt-email-provider-item.done {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.receipt-email-provider-item strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.35;
}

.receipt-email-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.security-guardrails-form {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.security-guardrails-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.security-guardrail-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.security-guardrail-item.done {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.security-guardrail-item input {
  width: 16px;
  height: 16px;
  accent-color: var(--green);
}

.security-guardrail-item span {
  color: var(--ink);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.35;
}

.security-guardrails-summary {
  margin-top: 9px;
}

.security-guardrails-card {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.security-guardrails-card.done {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.security-guardrails-card.blocked {
  border-color: rgba(226, 191, 125, 0.55);
  background: var(--warning-soft);
}

.security-guardrails-card span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.security-guardrails-card strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.security-guardrails-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.payment-deposit-form {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.payment-deposit-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.payment-deposit-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.payment-deposit-grid span,
.payment-deposit-item span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.payment-deposit-grid input,
.payment-deposit-grid select {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}

.payment-deposit-summary {
  margin-top: 9px;
}

.payment-deposit-readiness {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.payment-deposit-item {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.payment-deposit-item.done {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.payment-deposit-item strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-deposit-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.launch-readiness-panel {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.launch-readiness-summary,
.launch-readiness-warning,
.launch-readiness-item {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.launch-readiness-summary.done,
.launch-readiness-item.done {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.launch-readiness-summary.blocked,
.launch-readiness-item.blocked,
.launch-readiness-warning {
  border-color: rgba(239, 196, 200, 0.55);
  background: var(--danger-soft);
}

.launch-readiness-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.legal-licensing-readiness {
  border: 1px solid rgba(59, 130, 246, 0.24);
  border-radius: 7px;
  padding: 9px;
  background: rgba(59, 130, 246, 0.08);
}

.launch-readiness-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.launch-readiness-legal-head span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.launch-readiness-legal-head strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.launch-readiness-legal-head p {
  margin: 5px 0 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.launch-readiness-summary span,
.launch-readiness-warning span,
.launch-readiness-item span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.launch-readiness-summary strong,
.launch-readiness-warning strong,
.launch-readiness-item strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.launch-readiness-summary p,
.launch-readiness-warning p,
.launch-readiness-item p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.conversation-outcome-form {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.conversation-outcome-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.conversation-outcome-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.conversation-outcome-grid .conversation-wide-field {
  grid-column: span 2;
}

.conversation-outcome-grid span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.conversation-outcome-grid input,
.conversation-outcome-grid select {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}

.conversation-outcome-list {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.conversation-outcome-item,
.conversation-outcome-empty {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.conversation-outcome-item div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.conversation-outcome-item span {
  color: var(--green-strong);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.conversation-outcome-item strong,
.conversation-outcome-empty strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.conversation-outcome-item p,
.conversation-outcome-empty p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.outcome-insights-panel {
  margin-top: 8px;
}

.outcome-insights-empty,
.outcome-insights-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--card-soft);
}

.outcome-insights-empty strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.outcome-insights-empty p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.outcome-insights-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.outcome-insights-grid div,
.outcome-insights-next {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-bg);
}

.outcome-insights-next {
  margin-top: 8px;
}

.outcome-insights-grid span,
.outcome-insights-next span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.outcome-insights-grid strong,
.outcome-insights-next strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.3;
}

.interest-tracker-form {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.interest-tracker-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.interest-tracker-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.interest-tracker-grid .interest-objection-field {
  grid-column: span 2;
}

.interest-tracker-grid span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.interest-tracker-grid input,
.interest-tracker-grid select {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}

.interest-lead-list {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.interest-lead-item,
.interest-lead-empty {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.interest-lead-item div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.interest-lead-item span {
  color: var(--green-strong);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.interest-lead-item strong,
.interest-lead-empty strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.interest-lead-item p,
.interest-lead-empty p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.founder-follow-up-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.follow-up-column {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card-soft);
}

.follow-up-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding: 8px;
}

.follow-up-column-head strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.follow-up-column-head span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border: 1px solid var(--green-line);
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 950;
}

.follow-up-column-list {
  display: grid;
  gap: 7px;
  padding: 8px;
}

.follow-up-lead-card,
.follow-up-empty {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-bg);
}

.follow-up-lead-card span {
  display: block;
  color: var(--green-strong);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.follow-up-lead-card strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.follow-up-lead-card p,
.follow-up-empty {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.follow-up-lead-card p {
  margin: 4px 0 0;
}

.follow-up-lead-card dl {
  display: grid;
  gap: 5px;
  margin: 7px 0 0;
}

.follow-up-lead-card dt {
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 920;
  text-transform: uppercase;
}

.follow-up-lead-card dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.3;
}

.follow-up-lead-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}

.follow-up-lead-actions button {
  min-width: 0;
  min-height: 27px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 6px;
  background: var(--field);
  color: var(--ink);
  font-size: 9px;
  font-weight: 900;
}

.follow-up-lead-actions button[data-lead-stage="forward"] {
  border-color: var(--green-line);
  color: var(--green-strong);
}

.workroom-timeline-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.workroom-timeline-list .timeline-item {
  grid-template-columns: 24px minmax(0, 1fr);
}

.workroom-timeline-list .timeline-item::before {
  display: none;
}

.workroom-timeline-list .timeline-marker {
  width: 23px;
  height: 23px;
}

.workroom-timeline-list .timeline-body {
  min-height: 70px;
}

.screenshot-review-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.screenshot-review-item {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card-soft);
}

.screenshot-review-item a {
  display: block;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.screenshot-review-item img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
}

.screenshot-review-item div {
  padding: 7px 8px;
}

.screenshot-review-item span {
  display: block;
  color: var(--green-strong);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.screenshot-review-item strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screenshot-review-item p {
  margin-top: 3px;
  min-height: 28px;
  font-size: 10px;
  line-height: 1.35;
}

.screenshot-review-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 7px;
}

.screenshot-review-actions button {
  min-width: 0;
  min-height: 27px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 5px;
  background: var(--field);
  color: var(--ink);
  font-size: 9px;
  font-weight: 900;
}

.screenshot-review-actions button[data-screenshot-review="good"] {
  border-color: var(--green-line);
  color: var(--green-strong);
}

.screenshot-review-actions button[data-screenshot-review="change"] {
  border-color: rgba(226, 191, 125, 0.55);
  color: var(--amber);
}

.screenshot-review-actions button[data-screenshot-review="unsure"] {
  color: var(--muted);
}

.screenshot-review-status {
  min-height: 0;
  border-top: 1px solid var(--line);
  padding-top: 6px;
  color: var(--muted);
  font-weight: 880;
}

.screenshot-review-status.good {
  color: var(--green-strong);
}

.screenshot-review-status.change {
  color: var(--amber);
}

.change-request-form {
  display: grid;
  gap: 9px;
  margin-top: 10px;
  border: 1px solid var(--green-line);
  border-radius: 8px;
  padding: 10px;
  background: var(--green-soft);
}

.change-request-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.24fr) minmax(110px, 0.24fr);
  gap: 8px;
  align-items: end;
}

.change-request-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.change-request-grid span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.change-request-grid textarea,
.change-request-grid select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}

.change-request-grid textarea {
  min-height: 74px;
  padding: 8px;
  line-height: 1.4;
  resize: vertical;
}

.change-request-grid select {
  height: 32px;
  padding: 0 8px;
}

.change-request-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.agent-plan-panel,
.implementation-panel,
.final-review-panel,
.completion-summary-panel {
  margin-top: 8px;
}

.agent-plan-empty,
.agent-plan-card,
.implementation-empty,
.implementation-card,
.final-review-empty,
.final-review-card,
.completion-summary-empty,
.completion-summary-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--card-soft);
}

.agent-plan-empty strong,
.implementation-empty strong,
.final-review-empty strong,
.completion-summary-empty strong,
.completion-summary-card > strong {
  display: block;
  font-size: 12px;
  font-weight: 950;
}

.agent-plan-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.agent-plan-top span {
  display: block;
  color: var(--green-strong);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.agent-plan-top strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.3;
}

.agent-plan-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 9px 0 0;
}

.agent-plan-details div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px;
  background: var(--card-bg);
}

.agent-plan-details dt {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.agent-plan-details dd {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
}

.agent-plan-details code {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 5px;
  background: var(--soft);
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 850;
}

.agent-plan-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 9px;
}

.agent-plan-actions button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 9px;
  background: var(--field);
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
}

.agent-plan-actions button[data-agent-plan-decision="approved"] {
  border-color: var(--green);
  background: var(--green);
  color: white;
}

.agent-plan-actions button[data-agent-plan-decision="revision"] {
  border-color: rgba(226, 191, 125, 0.55);
  background: var(--warning-soft);
  color: var(--amber);
}

.final-review-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}

.final-review-actions button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
}

.final-review-actions button[data-final-review="accepted"] {
  border-color: var(--green);
  background: var(--green);
  color: white;
}

.final-review-actions button[data-final-review="follow-up"] {
  border-color: rgba(226, 191, 125, 0.55);
  background: var(--warning-soft);
  color: var(--amber);
}

.final-review-actions button[data-final-review="reopen"] {
  border-color: rgba(239, 196, 200, 0.55);
  background: var(--danger-soft);
  color: var(--red);
}

.brand-settings-form {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.brand-settings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.brand-settings-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.brand-settings-grid .brand-tagline-field {
  grid-column: span 2;
}

.brand-settings-grid span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.brand-settings-grid input,
.brand-settings-grid select {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}

.brand-readiness-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.brand-readiness-item {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 8px;
  background: var(--card-soft);
}

.brand-readiness-item.done {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.brand-readiness-item span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.brand-readiness-item strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-preview-card {
  border-color: var(--green-line);
  background: linear-gradient(180deg, var(--card-bg) 0%, var(--card-wash) 100%);
}

body.projector-mode .project-preview-card {
  min-height: 68vh;
  padding: 8px;
}

body.projector-mode .project-preview-shell {
  grid-template-columns: minmax(0, 1fr);
}

body.projector-mode .preview-app-frame,
body.projector-mode .preview-image-card,
body.projector-mode .preview-browser-card {
  min-height: 62vh;
}

body.projector-mode .preview-image-card img {
  max-height: none;
}

.project-preview-card .workroom-section-head h3 {
  font-size: 14px;
}

.preview-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.preview-open-link,
.preview-refresh-button {
  min-height: 26px;
  padding: 0 8px;
  font-size: 10px;
  text-decoration: none;
}

.preview-open-link.disabled {
  pointer-events: none;
  opacity: 0.55;
}

.browser-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(250px, 0.48fr) minmax(170px, 0.3fr);
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 8px;
  background: var(--card-soft);
}

.browser-controls {
  display: inline-flex;
  gap: 5px;
}

.browser-controls span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--preview-line);
}

.browser-controls span:first-child {
  background: var(--red);
}

.browser-controls span:nth-child(2) {
  background: var(--amber);
}

.browser-controls span:last-child {
  background: var(--green);
}

.browser-address {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  background: var(--field);
}

.browser-toolbar div {
  min-width: 0;
}

.browser-address span,
.browser-toolbar p {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.browser-address strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-url-form {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) auto auto;
  gap: 5px;
  min-width: 0;
}

.preview-url-form input {
  min-width: 0;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 11px;
  font-weight: 760;
}

.preview-url-form button {
  min-height: 30px;
  padding: 0 8px;
  font-size: 10px;
}

.browser-toolbar p {
  margin: 0;
  font-weight: 760;
  line-height: 1.35;
  text-align: right;
  text-transform: none;
}

.workroom-card h3 {
  margin: 0;
  font-size: 13px;
  line-height: 1.25;
}

.workroom-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.42;
}

.workroom-status-stack {
  display: grid;
  gap: 5px;
}

.workroom-status {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) 9px;
  gap: 8px;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 5px 7px;
  background: var(--card-bg);
}

.workroom-status span,
.evidence-item span,
.agent-work-top span,
.approval-step i {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.workroom-status strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workroom-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.workroom-status i.active {
  background: var(--amber);
}

.workroom-status i.blocked {
  background: var(--red);
}

.workroom-section-head,
.agent-work-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.agent-work-list,
.approval-flow,
.workflow-step-list,
.changed-file-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.workroom-approval-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.workroom-approval-actions button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
}

.workroom-approval-actions button[data-workroom-decision="approved"] {
  border-color: var(--green);
  background: var(--green);
  color: white;
}

.workroom-approval-actions button[data-workroom-decision="changes"] {
  border-color: rgba(226, 191, 125, 0.5);
  background: var(--warning-soft);
  color: var(--amber);
}

.workroom-approval-actions button[data-workroom-decision="hold"] {
  border-color: rgba(239, 196, 200, 0.5);
  background: var(--danger-soft);
  color: var(--red);
}

.preview-decision-check {
  display: grid;
  grid-template-columns: 1fr repeat(3, auto);
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px;
  background: var(--card-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 820;
}

.preview-decision-check span {
  color: var(--ink);
  font-weight: 920;
}

.preview-decision-check label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.preview-decision-check input {
  accent-color: var(--green);
}

.workroom-decision-log {
  margin-top: 8px;
}

.workroom-decision-item {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.workroom-decision-item span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.workroom-decision-item strong {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 950;
}

.workroom-decision-item p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.34;
}

.workroom-decision-item.done {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.workroom-decision-item.active {
  border-color: rgba(226, 191, 125, 0.5);
  background: var(--warning-soft);
}

.workroom-decision-item.blocked {
  border-color: rgba(239, 196, 200, 0.5);
  background: var(--danger-soft);
}

.agent-work-item {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: linear-gradient(180deg, var(--card-bg) 0%, var(--card-wash) 100%);
}

.agent-work-top strong {
  display: block;
  font-size: 12px;
  font-weight: 950;
}

.agent-work-files {
  margin-top: 7px;
  border-top: 1px solid var(--line);
  padding-top: 6px;
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 860;
}

.agent-work-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 7px 0 0;
}

.agent-work-facts div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 6px;
  background: var(--card-bg);
}

.agent-work-facts dt {
  color: var(--muted);
  font-size: 8px;
  font-weight: 920;
  text-transform: uppercase;
}

.agent-work-facts dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.25;
}

.agent-work-approval {
  margin-top: 7px;
  border: 1px solid var(--green-line);
  border-radius: 6px;
  padding: 5px 6px;
  background: var(--green-soft);
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 920;
}

.workflow-step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px;
  background: var(--card-soft);
}

.workflow-step > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 950;
}

.workflow-step strong,
.changed-file strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-step p,
.changed-file p,
.github-card p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.34;
}

.github-open-link {
  display: inline-flex;
  margin-top: 9px;
  min-height: 30px;
}

.github-local-note {
  display: block;
  margin-top: 9px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 780;
  line-height: 1.35;
}

.backend-recover-button {
  margin-top: 10px;
  min-height: 30px;
}

.workflow-step i {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 920;
  text-transform: uppercase;
}

.workflow-step.active > span {
  background: var(--warning-soft);
  color: var(--amber);
}

.workflow-step.pending > span {
  background: var(--soft-2);
  color: var(--muted);
}

.changed-file {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 8px;
  background: var(--card-soft);
}

.changed-file strong {
  color: var(--green-strong);
}

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.evidence-item {
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.evidence-item strong {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 950;
}

.evidence-item p {
  font-size: 10px;
  line-height: 1.34;
}

.approval-step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px;
  background: var(--card-soft);
}

.approval-step span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 950;
}

.approval-step strong {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approval-step.active span {
  background: var(--warning-soft);
  color: var(--amber);
}

.workroom-next-copy {
  max-width: 820px;
}

.github-card {
  margin-top: 8px;
}

.github-card dl {
  display: grid;
  gap: 5px;
  margin: 0;
}

.github-card div {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 7px;
  background: var(--card-soft);
}

.github-card dt {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.github-card dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  font-weight: 880;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-preview-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 10px;
}

.project-validation-card {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--card-bg);
}

.project-validation-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.project-validation-item {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--card-soft);
}

.project-validation-item strong {
  display: block;
  font-size: 11px;
  font-weight: 930;
}

.project-validation-item p {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
}

.project-validation-item.done {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.project-validation-item.blocked {
  border-color: rgba(239, 196, 200, 0.65);
  background: var(--danger-soft);
}

.project-validation-item.pending {
  border-color: rgba(226, 191, 125, 0.55);
  background: var(--warning-soft);
}

.hidden {
  display: none !important;
}

.preview-browser-card,
.preview-image-card {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--green-line);
  border-radius: 8px;
  background: var(--card-bg);
  box-shadow: inset 0 0 0 1px var(--inset-line);
}

.preview-browser-card {
  aspect-ratio: 16 / 10;
  min-height: min(68vh, 720px);
  background: var(--card-bg);
}

.preview-browser-card iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
  background: var(--card-bg);
}

.preview-image-card img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  background: var(--card-wash);
}

.preview-image-card figcaption {
  border-top: 1px solid var(--line);
  padding: 7px 9px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.preview-app-frame {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--green-line);
  border-radius: 8px;
  background: var(--card-wash);
  box-shadow: inset 0 0 0 1px var(--inset-line);
}

.preview-titlebar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  border-bottom: 1px solid var(--line);
  padding: 0 9px;
  background: var(--card-bg);
}

.preview-titlebar span {
  display: inline-flex;
  gap: 4px;
}

.preview-titlebar span::before,
.preview-titlebar span::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-line);
}

.preview-titlebar strong {
  font-size: 12px;
  font-weight: 950;
}

.preview-titlebar em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.preview-app-body {
  display: grid;
  grid-template-columns: 96px minmax(150px, 0.9fr) minmax(170px, 1.1fr);
  gap: 8px;
  padding: 9px;
}

.preview-sidebar,
.preview-document,
.preview-study-board {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card-bg);
}

.preview-sidebar {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 7px;
}

.preview-sidebar b {
  font-size: 11px;
  font-weight: 950;
}

.preview-sidebar span {
  border-radius: 5px;
  padding: 5px 6px;
  color: var(--muted);
  background: var(--soft);
  font-size: 9px;
  font-weight: 860;
}

.preview-sidebar span.active,
.preview-tabs span.active {
  background: var(--green-soft);
  color: var(--green-strong);
}

.preview-document {
  display: grid;
  align-content: center;
  gap: 9px;
  min-height: 168px;
  padding: 14px;
}

.preview-page-line {
  height: 8px;
  border-radius: 999px;
  background: var(--preview-line);
}

.preview-page-line.wide {
  width: 100%;
}

.preview-page-line:not(.wide):not(.short) {
  width: 78%;
}

.preview-page-line.short {
  width: 48%;
}

.preview-equation {
  display: grid;
  place-items: center;
  min-height: 46px;
  border: 1px solid var(--green-line);
  border-radius: 7px;
  color: var(--green-strong);
  background: var(--green-soft);
  font-size: 13px;
  font-weight: 950;
}

.preview-study-board {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 8px;
}

.preview-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.preview-tabs span {
  display: grid;
  place-items: center;
  min-height: 24px;
  border-radius: 5px;
  background: var(--soft);
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
}

.preview-question {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px;
  color: var(--ink);
  background: var(--card-soft);
  font-size: 12px;
  font-weight: 950;
}

.preview-answer {
  border: 1px dashed var(--green-line);
  border-radius: 7px;
  padding: 8px;
  color: var(--muted);
  background: var(--card-wash);
  font-size: 10px;
  font-weight: 820;
}

.preview-submit {
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  color: white;
  background: var(--green);
  font-size: 10px;
  font-weight: 900;
}

.preview-inspector {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.preview-inspector div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 8px;
  background: var(--card-bg);
}

.preview-inspector span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.preview-inspector strong {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 930;
  line-height: 1.25;
}

.section-label {
  margin: 14px 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.task-list,
.approval-list {
  display: grid;
  gap: 5px;
}

#timelineList,
#timelineFullList {
  position: relative;
  gap: 8px;
  padding-left: 2px;
}

.task-item,
.approval-item,
.report-item {
  border-radius: 7px;
  padding: 8px 10px;
  border-color: var(--line);
  background: var(--card-bg);
}

.report-item {
  border: 1px solid var(--line);
}

.report-empty-state {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px;
  background: var(--card-bg);
}

.report-empty-state strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 930;
}

.report-empty-state p,
.report-empty-state span {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
}

.report-summary {
  margin: 7px 0 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.35;
}

.report-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}

.report-detail-list span {
  min-width: 0;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 7px;
  background: var(--card-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.3;
}

.report-rich-detail {
  display: grid;
  gap: 6px;
  grid-column: 1 / -1;
  min-width: 0;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 9px;
  background: var(--card-soft);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 620;
  line-height: 1.4;
}

.report-rich-detail p,
.report-rich-detail ul {
  margin: 0;
}

.report-rich-detail ul {
  padding-left: 16px;
}

.report-rich-detail strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 880;
}

.report-divider {
  width: 100%;
  height: 1px;
  border: 0;
  margin: 2px 0;
  background: var(--line);
}

.report-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.task-description {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 560;
  line-height: 1.35;
}

.task-files {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.task-files code {
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 6px;
  background: var(--card-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
  overflow-wrap: anywhere;
}

.task-item:hover,
.approval-item:hover,
.agent-option:hover {
  border-color: var(--green-line);
  box-shadow: var(--shadow-green);
  transform: translateY(-1px);
}

.task-top,
.approval-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0;
}

.task-title,
.approval-title {
  color: var(--ink);
  font-weight: 780;
  font-size: 12px;
  line-height: 1.25;
}

.status-pill {
  align-self: start;
  border-radius: 999px;
  padding: 2px 5px;
  color: white;
  background: var(--green);
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 8px;
}

.settings-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.api-connections-card {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 8px;
}

.api-connection-form {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(120px, 1fr) minmax(180px, 1.2fr) auto;
  gap: 8px;
  align-items: end;
}

.provider-plan-form {
  display: grid;
  gap: 8px;
}

.api-connection-form label,
.provider-plan-form label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.api-connection-form span,
.provider-plan-form span,
.api-connection-list span,
.api-connection-note {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.api-connection-form select,
.api-connection-form input,
.provider-plan-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}

.api-connection-form select,
.api-connection-form input {
  height: 30px;
}

.provider-plan-form textarea {
  min-height: 92px;
  padding: 8px;
  line-height: 1.4;
  resize: vertical;
}

.api-connection-form select:focus,
.api-connection-form input:focus,
.provider-plan-form textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(59, 143, 189, 0.13);
  outline: none;
}

.api-connection-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  min-width: max-content;
}

.api-connection-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.api-connection-item {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--card-soft);
}

.api-connection-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.api-connection-top strong {
  font-size: 12px;
  line-height: 1.25;
}

.api-connection-item p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.provider-plan-result {
  min-height: 72px;
  white-space: pre-wrap;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card-soft);
  color: var(--ink);
  padding: 9px;
  line-height: 1.45;
}

.api-connection-note {
  margin: 0;
  line-height: 1.35;
  text-transform: none;
}

.project-setup-card {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.project-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.project-setup-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.project-setup-grid span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 920;
  text-transform: uppercase;
}

.project-setup-grid input,
.project-setup-grid textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 12px;
  font-weight: 720;
}

.project-setup-grid textarea {
  resize: vertical;
  line-height: 1.35;
}

.project-setup-wide {
  grid-column: 1 / -1;
}

.project-setup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.status-pill.pending {
  background: var(--amber);
}

.status-pill.proposed {
  background: #6d5bd0;
}

.status-pill.blocked {
  background: var(--red);
}

.status-pill.done {
  background: var(--green-strong);
}

.timeline-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  position: relative;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 26px;
  bottom: -10px;
  width: 1px;
  background: rgba(183, 220, 235, 0.9);
}

.timeline-item:last-child::before {
  display: none;
}

.timeline-marker {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid var(--green-line);
  border-radius: 50%;
  background: var(--field);
  color: var(--green-strong);
  font-size: 10px;
  font-weight: 950;
  box-shadow: 0 1px 2px rgba(23, 32, 39, 0.05);
}

.timeline-body {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 9px;
  background: linear-gradient(180deg, var(--card-bg) 0%, var(--card-wash) 100%);
}

.timeline-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.timeline-type {
  color: var(--green-strong);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.timeline-title {
  margin-top: 1px;
  font-size: 12px;
  font-weight: 950;
}

.timeline-meta {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.file-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px 8px 0 0;
  padding: 9px 10px;
  box-shadow: none;
}

.code-card {
  min-height: 420px;
  margin: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: 14px;
  background: #141916;
  color: #d9f0df;
  font-size: 12px;
  line-height: 1.5;
}

.product-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-height: 300px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(49, 92, 189, 0.13), transparent 45%),
    linear-gradient(315deg, rgba(180, 105, 18, 0.16), transparent 42%),
    var(--card-bg);
}

.mini-chat,
.mini-workspace {
  display: grid;
  gap: 10px;
  align-content: center;
}

.mini-chat div,
.mini-workspace span {
  border-radius: 8px;
  background: rgba(23, 32, 29, 0.82);
}

.mini-chat div {
  height: 58px;
}

.mini-chat div:nth-child(2) {
  width: 78%;
  background: rgba(59, 143, 189, 0.78);
}

.mini-chat div:nth-child(3) {
  width: 88%;
  background: rgba(110, 79, 178, 0.78);
}

.mini-workspace {
  grid-template-columns: 1fr 1fr;
}

.mini-workspace span {
  min-height: 92px;
}

.mini-workspace span:nth-child(2) {
  background: rgba(49, 92, 189, 0.82);
}

.mini-workspace span:nth-child(3) {
  background: rgba(180, 105, 18, 0.82);
}

.preview-notes {
  margin-bottom: 10px;
  padding: 12px;
  border-radius: 8px;
  box-shadow: none;
}

.workspace-status {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 32px;
  padding: 0 14px;
  border-top: 1px solid var(--green-line);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  box-shadow: 0 -8px 24px rgba(34, 111, 147, 0.07);
  overflow-x: auto;
  white-space: nowrap;
}

.workspace-status span + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 14px;
  border-radius: 50%;
  background: var(--green);
  vertical-align: middle;
}

body[data-density="compact"] .left-pane,
body[data-density="compact"] .right-pane {
  padding: 10px;
}

body[data-density="compact"] .left-pane,
body[data-density="compact"] .right-pane,
body[data-density="compact"] .room-header {
  gap: 7px;
}

body[data-density="compact"] .bubble {
  padding: 6px 7px;
}

body[data-density="compact"] .bubble p {
  font-size: 12px;
  line-height: 1.32;
}

body[data-density="compact"] .log-section p {
  font-size: 11px;
  line-height: 1.3;
}

body[data-density="compact"] .task-item,
body[data-density="compact"] .approval-item {
  padding: 5px 7px;
}

body[data-density="compact"] .timeline-body {
  padding: 6px 7px;
}

body[data-density="compact"] .timeline-title {
  font-size: 11px;
}

body[data-density="compact"] .timeline-meta {
  font-size: 9px;
}

body[data-density="compact"] .task-meta,
body[data-density="compact"] .approval-meta {
  font-size: 9px;
}

body[data-density="comfortable"] .left-pane,
body[data-density="comfortable"] .right-pane {
  padding: 18px;
}

body[data-density="comfortable"] .task-item,
body[data-density="comfortable"] .approval-item {
  padding: 10px 11px;
}

body[data-density="comfortable"] .timeline-body {
  padding: 10px 11px;
}

body[data-density="comfortable"] .bubble {
  padding: 11px 12px;
}

.preview-notes p {
  margin: 0 0 9px;
  line-height: 1.42;
}

.preview-notes p:last-child {
  margin-bottom: 0;
}

.preview-notes strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 12px;
}

.approval-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.approval-closed-note {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

dialog {
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: var(--shadow);
}

dialog::backdrop {
  background: rgba(23, 32, 29, 0.42);
}

.dialog-card {
  width: min(460px, calc(100vw - 32px));
  padding: 16px;
  background: var(--paper);
}

.agent-options {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.agent-option {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--soft-2);
  text-align: left;
}

menu {
  display: flex;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
}

/* Calmer product typography: regular text carries the room, bold marks decisions and facts. */
.brand-lockup h1,
.workspace-header h2,
.workroom-card h3,
.metric strong,
.message strong,
.task-item strong,
.approval-item strong,
.agent-card strong,
.evidence-item strong,
.changed-file strong,
.github-card strong,
.preview-inspector strong {
  font-weight: 780;
}

.composer textarea,
.message p,
.task-meta,
.approval-meta,
.workroom-card p,
.preview-notes p,
.evidence-item p,
.timeline-item p,
.report-item p,
.github-card span,
.preview-inspector span {
  font-weight: 520;
}

.kicker,
.project-switcher span,
.search-box span,
.settings-grid span,
.section-label,
.tab,
.status-pill,
.density-option,
.composer-chip,
.secondary-button,
.send-button,
.view-options summary,
.preview-submit {
  font-weight: 720;
}

.header-meta,
.session-state,
.metric span,
.workflow-step i,
.approval-step i,
.changed-file span {
  font-weight: 600;
}

@media (max-width: 980px) {
  .app-shell,
  body.projector-mode .app-shell {
    grid-template-columns: 1fr;
  }

  .browser-toolbar {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .preview-url-form,
  .browser-toolbar p {
    grid-column: 1 / -1;
  }

  body.projector-mode .project-preview-shell {
    grid-template-columns: 1fr;
  }

  .left-pane {
    height: auto;
    min-height: 100svh;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .right-pane {
    min-height: 100svh;
  }

  .team-rail {
    grid-auto-columns: minmax(118px, 40vw);
  }

  .control-strip,
  .provider-strip,
  .topbar,
  .workspace-header {
    align-items: stretch;
  }

  .control-strip,
  .topbar,
  .workspace-header {
    flex-direction: column;
  }

  .segmented {
    flex: 0 0 auto;
    width: 100%;
  }

  .control-strip .icon-text-button {
    align-self: flex-end;
    margin-left: 0;
  }

  .topbar-actions {
    width: 100%;
    grid-template-columns: 1fr;
    justify-content: flex-start;
  }

  .view-options {
    justify-self: stretch;
  }

  .view-options summary {
    justify-content: start;
    padding-left: 10px;
  }

  .view-options-panel {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 6px;
    box-shadow: none;
  }

  .provider-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-switcher,
  .search-box {
    flex: 1 1 180px;
  }

  .project-switcher select,
  .search-box input {
    width: 100%;
  }

  .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .api-connection-form,
  .api-connection-list {
    grid-template-columns: 1fr;
  }

  .api-connection-actions {
    justify-content: flex-start;
    min-width: 0;
  }

  .workroom-grid,
  .workroom-hero,
  .command-grid,
  .admin-ops-two-column,
  .admin-health-summary-grid,
  .admin-segment-summary-grid,
  .segment-campaign-grid,
  .segment-campaign-plan dl,
  .segment-campaign-outcome-grid,
  .trial-first-path-grid,
  .admin-command-grid,
  .customer-tags-options,
  .workroom-view-mode,
  .workroom-section-tabs,
  .workroom-timeline-list,
  .project-preview-shell {
    grid-template-columns: 1fr;
  }

  .screenshot-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .change-request-grid {
    grid-template-columns: 1fr;
  }

  .agent-plan-details {
    grid-template-columns: 1fr;
  }

  .brand-settings-grid,
  .brand-readiness-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loop-progress-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guided-demo-panel {
    display: grid;
  }

  .user-checklist-list {
    grid-template-columns: 1fr;
  }

  .usability-session-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feedback-insights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .credit-alert-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .demo-brief-list {
    grid-template-columns: 1fr;
  }

  .demo-script-steps {
    grid-template-columns: 1fr;
  }

  .demo-script-top {
    display: grid;
  }

  .public-preview-pack-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-preview-pack-top {
    display: grid;
  }

  .early-user-offer-grid {
    grid-template-columns: 1fr;
  }

  .early-user-offer-top {
    display: grid;
  }

  .backend-connection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .backend-connection-summary {
    display: grid;
  }

  .trial-api-key-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trial-onboarding-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trial-session-grid {
    grid-template-columns: 1fr;
  }

  .trial-usage-grid {
    grid-template-columns: 1fr;
  }

  .upgrade-path-top,
  .upgrade-path-grid,
  .upgrade-checkout-grid,
  .revenue-dashboard-grid,
  .pricing-plan-grid,
  .pricing-plan-cards {
    grid-template-columns: 1fr;
  }

  .upgrade-path-top {
    display: grid;
  }

  .admin-customer-grid,
  .admin-customer-card dl,
  .admin-customer-detail-grid,
  .customer-note-grid {
    grid-template-columns: 1fr;
  }

  .admin-customer-top,
  .admin-customer-detail-head,
  .admin-ops-head {
    display: grid;
  }

  .admin-ops-head p {
    max-width: none;
    text-align: left;
  }

  .admin-customer-sync {
    display: grid;
  }

  .backend-security-top,
  .backend-security-grid,
  .backend-security-phases {
    display: grid;
    grid-template-columns: 1fr;
  }

  .backend-schema-top,
  .backend-schema-grid,
  .backend-schema-relations {
    display: grid;
    grid-template-columns: 1fr;
  }

  .api-endpoint-top,
  .api-endpoint-grid,
  .api-endpoint-flow {
    display: grid;
    grid-template-columns: 1fr;
  }

  .backend-stack-top,
  .backend-stack-grid,
  .backend-stack-steps {
    display: grid;
    grid-template-columns: 1fr;
  }

  .backend-checklist-top,
  .backend-checklist-items {
    display: grid;
    grid-template-columns: 1fr;
  }

  .backend-scaffold-top,
  .backend-scaffold-groups,
  .backend-scaffold-files,
  .backend-scaffold-rules {
    display: grid;
    grid-template-columns: 1fr;
  }

  .trial-api-key-validator {
    grid-template-columns: 1fr;
  }

  .paid-trial-checkout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .receipt-email-grid,
  .receipt-email-readiness {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .security-guardrails-list {
    grid-template-columns: 1fr;
  }

  .payment-deposit-grid,
  .payment-deposit-readiness,
  .launch-readiness-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .conversation-outcome-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .conversation-outcome-grid .conversation-wide-field {
    grid-column: span 2;
  }

  .outcome-insights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .interest-tracker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .founder-follow-up-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .interest-tracker-grid .interest-objection-field {
    grid-column: span 2;
  }

  .usability-session-grid .usability-next-field {
    grid-column: span 2;
  }

  .brand-settings-grid .brand-tagline-field {
    grid-column: span 2;
  }

  .confidence-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .browser-toolbar {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
  }

  .browser-toolbar p {
    grid-column: 1 / -1;
    text-align: left;
  }

  .preview-app-body,
  .preview-inspector,
  .project-validation-list,
  .report-detail-list {
    grid-template-columns: 1fr;
  }

  .project-setup-grid {
    grid-template-columns: 1fr;
  }

  .agent-work-facts {
    grid-template-columns: 1fr;
  }

  .preview-decision-check {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
}

@media (max-width: 540px) {
  .left-pane,
  .right-pane {
    padding: 12px;
  }

  .composer {
    grid-template-columns: 1fr;
  }

  .composer-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .composer-chip,
  .composer .send-button {
    width: 100%;
    min-width: 0;
    padding: 0 6px;
  }

  .composer .send-button {
    grid-column: span 3;
    margin-left: 0;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .confidence-strip {
    grid-template-columns: 1fr;
  }

  .command-item strong {
    white-space: normal;
  }

  .tabs {
    gap: 5px;
  }

  .provider-strip {
    grid-template-columns: 1fr;
  }

  .message,
  .message.user {
    max-width: 100%;
  }

  .density-control,
  .view-scale {
    flex: 1 1 auto;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .project-switcher,
  .search-box,
  .density-control,
  .view-scale {
    width: 100%;
  }

  .project-switcher,
  .search-box {
    grid-column: span 2;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .evidence-grid {
    grid-template-columns: 1fr;
  }

  .screenshot-review-grid {
    grid-template-columns: 1fr;
  }

  .brand-settings-grid,
  .brand-readiness-summary,
  .brand-settings-grid .brand-tagline-field {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .loop-progress-list {
    grid-template-columns: 1fr;
  }

  .usability-session-grid,
  .usability-session-grid .usability-next-field {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .feedback-insights-grid {
    grid-template-columns: 1fr;
  }

  .interest-tracker-grid,
  .interest-tracker-grid .interest-objection-field {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .founder-follow-up-board {
    grid-template-columns: 1fr;
  }

  .public-preview-pack-grid {
    grid-template-columns: 1fr;
  }

  .conversation-outcome-grid,
  .conversation-outcome-grid .conversation-wide-field {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .outcome-insights-grid {
    grid-template-columns: 1fr;
  }

  .trial-api-key-grid {
    grid-template-columns: 1fr;
  }

  .trial-onboarding-grid {
    grid-template-columns: 1fr;
  }

  .trial-session-grid {
    grid-template-columns: 1fr;
  }

  .paid-trial-checkout-grid {
    grid-template-columns: 1fr;
  }

  .receipt-email-grid,
  .receipt-email-readiness {
    grid-template-columns: 1fr;
  }

  .payment-deposit-grid,
  .payment-deposit-readiness,
  .launch-readiness-grid {
    grid-template-columns: 1fr;
  }

  .approval-step {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .workflow-step {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .approval-step i,
  .workflow-step i {
    grid-column: 2;
  }

  .github-card div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}