:root {
  --text: #17201b;
  --page: #f4f6f2;
  --sidebar-bg: #10251c;
  --sidebar-text: #f5f8f3;
  --sidebar-active: #294338;
  --panel: #fff;
  --panel-border: #d8dfd8;
  --subtle-border: #e3e8e3;
  --muted: #66736c;
  --muted-strong: #536158;
  --label: #35423a;
  --input-bg: #fff;
  --button-bg: #fff;
  --primary: #196b4a;
  --primary-text: #fff;
  --code-bg: #eef2ed;
  --code-border: #dce4dd;
  --selected-bg: #ecf4ef;
  --selected-border: #9ecbb2;
  --details-bg: #f8faf7;
  --status-bg: #f7f9f6;
  --success-bg: #edf8ef;
  --success-border: #b8dfc1;
  --success-text: #205a32;
  --warn-bg: #fff8e8;
  --warn-border: #efd08a;
  --warn-text: #6f5417;
  --danger-bg: #fff1ee;
  --danger-border: #efb8ae;
  --danger-text: #9b2c1f;
  --icon-muted: #718077;
  color: var(--text);
  background: var(--page);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  --text: #e6eee9;
  --page: #0f1412;
  --sidebar-bg: #07100d;
  --sidebar-text: #edf6f0;
  --sidebar-active: #173a2b;
  --panel: #171d1a;
  --panel-border: #2b3931;
  --subtle-border: #25322b;
  --muted: #95a69d;
  --muted-strong: #a7b7ae;
  --label: #c7d4cd;
  --input-bg: #101612;
  --button-bg: #1c2520;
  --primary: #35a06d;
  --primary-text: #07100d;
  --code-bg: #101815;
  --code-border: #304239;
  --selected-bg: #153427;
  --selected-border: #3d8f64;
  --details-bg: #121915;
  --status-bg: #121915;
  --success-bg: #10291c;
  --success-border: #2f8d55;
  --success-text: #95e2b3;
  --warn-bg: #2a220f;
  --warn-border: #a67925;
  --warn-text: #f0ca75;
  --danger-bg: #2a1514;
  --danger-border: #a65248;
  --danger-text: #ffb4aa;
  --icon-muted: #87978f;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }

.appShell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px 1fr;
}

.sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  padding: 22px 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 760;
  font-size: 20px;
  margin-bottom: 26px;
}

.brand.dark {
  color: var(--text);
  margin-bottom: 20px;
}

.authShell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--page);
}

.authPanel {
  width: min(440px, 100%);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 22px;
}

nav { display: grid; gap: 6px; }
nav button, .rowButton {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 6px;
  padding: 10px 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

nav button.active, nav button:hover { background: var(--sidebar-active); }
.workspace { padding: 24px; overflow: auto; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.topbarActions {
  display: flex;
  align-items: end;
  gap: 10px;
}
.workspaceSelect {
  width: min(280px, 32vw);
  margin-bottom: 0;
}
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 28px; margin-bottom: 4px; }
h2 { font-size: 18px; }
.topbar p, .muted { color: var(--muted); }

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

.span2 { grid-column: span 2; }
.span4 { grid-column: span 4; }
.split { display: grid; grid-template-columns: 420px 1fr; gap: 16px; align-items: start; }
.panel, .metric {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 16px;
}
.metric span { display: block; color: var(--muted); font-size: 13px; }
.metric strong { display: block; font-size: 32px; margin-top: 8px; }
.launchPanel { display: grid; gap: 12px; }
.launchHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.launchHeader h2 { margin-bottom: 0; }
.launchHeader span { color: var(--muted); font-size: 13px; }
.sectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sectionHeader h3 { margin-bottom: 0; font-size: 15px; }
.destinationEditor {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.destinationRow {
  display: grid;
  grid-template-columns: minmax(120px, 1.1fr) 94px 104px minmax(180px, 2fr) 42px;
  gap: 8px;
  align-items: end;
  border-top: 1px solid var(--subtle-border);
  padding-top: 10px;
}
.destinationRow label { margin-bottom: 0; }
.destinationRow button {
  width: 42px;
  height: 39px;
  justify-content: center;
}
.checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.checkItem {
  min-height: 78px;
  display: grid;
  grid-template-columns: 20px 1fr 16px;
  align-items: center;
  gap: 10px;
  text-align: left;
  border-color: var(--panel-border);
}
.checkItem.done { background: var(--success-bg); border-color: var(--success-border); }
.checkItem.warning { background: var(--warn-bg); border-color: var(--warn-border); }
.checkItem svg:first-child { color: var(--icon-muted); }
.checkItem.done svg:first-child { color: var(--primary); }
.checkItem.warning svg:first-child { color: var(--warn-text); }
.checkItem span { min-width: 0; }
.checkItem strong, .checkItem small { display: block; overflow-wrap: anywhere; }
.checkItem strong { font-size: 14px; }
.checkItem small { margin-top: 3px; color: var(--muted); }
.narrow { max-width: 560px; }
.wide { max-width: 100%; }
.reportsPage { display: grid; gap: 14px; }
.filterGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}
.filterGrid label { margin-bottom: 0; }
.compactFilters { grid-template-columns: minmax(220px, 1fr) 160px; max-width: 620px; }
.compactAuditFilters { grid-template-columns: minmax(160px, 220px) minmax(220px, 1fr) minmax(220px, 1fr) 140px; }
.capacityGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 12px;
  align-items: end;
}
.capacityGrid label { margin-bottom: 0; }
.checkboxLabel {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 39px;
}
.checkboxLabel input {
  width: auto;
  margin: 0;
}
.plannerResult { margin-top: 14px; display: grid; gap: 12px; }
.plannerMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  border-top: 1px solid var(--subtle-border);
  border-bottom: 1px solid var(--subtle-border);
  padding: 12px 0;
}
.plannerMetric span { display: block; color: var(--muted); font-size: 12px; }
.plannerMetric strong { display: block; margin-top: 4px; font-size: 20px; }
.trackerInsights {
  border-top: 1px solid var(--panel-border);
  margin-top: 18px;
  padding-top: 16px;
  display: grid;
  gap: 14px;
}
.insightMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  border-top: 1px solid var(--subtle-border);
  border-bottom: 1px solid var(--subtle-border);
  padding: 12px 0;
}
.insightGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.insightHeader {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 240px);
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.insightHeader h3 { margin-bottom: 0; }
.readinessPanel.pass { border-color: var(--success-border); }
.readinessPanel.warn { border-color: var(--warn-border); }
.readinessPanel.fail { border-color: var(--danger-border); }
.launchGatePanel.pass { border-color: var(--success-border); }
.launchGatePanel.warn { border-color: var(--warn-border); }
.launchGatePanel.fail { border-color: var(--danger-border); }
.launchGateControls {
  grid-template-columns: minmax(180px, 240px) 140px auto;
  max-width: 560px;
  margin-bottom: 12px;
}
.launchGateControls label { margin-bottom: 0; }
.launchGateMetrics { margin: 6px 0 12px; }
.gateIssueBlock {
  margin-top: 12px;
  border-top: 1px solid var(--subtle-border);
  padding-top: 10px;
}
.gateIssueBlock h3 {
  font-size: 14px;
  margin-bottom: 8px;
}
.gateIssueBlock.fail h3 { color: var(--danger-text); }
.gateIssueBlock.warn h3 { color: var(--warn-text); }
.rollupPanel.pass { border-color: var(--success-border); }
.rollupPanel.warn { border-color: var(--warn-border); }
.rollupPanel.fail { border-color: var(--danger-border); }
.verificationBlock {
  border-top: 1px solid var(--panel-border);
  margin-top: 16px;
  padding-top: 14px;
}
.verificationBlock.pass { border-top-color: var(--success-border); }
.verificationBlock.warn { border-top-color: var(--warn-border); }
.verificationBlock.fail { border-top-color: var(--danger-border); }
.readinessCounts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
}

label { display: grid; gap: 6px; margin-bottom: 12px; color: var(--label); font-size: 14px; }
.checkboxLine { display: flex; align-items: center; gap: 8px; }
.checkboxLine input { width: auto; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 9px 10px;
  background: var(--input-bg);
  color: var(--text);
}
textarea { resize: vertical; }

button {
  border: 1px solid var(--panel-border);
  background: var(--button-bg);
  color: var(--text);
  border-radius: 6px;
  padding: 9px 11px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}
.primary { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.fullWidth { width: 100%; justify-content: center; }
.iconButton { width: 40px; height: 40px; justify-content: center; }
.error { background: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger-border); padding: 12px; border-radius: 8px; margin-bottom: 14px; }
.warningList {
  margin-top: 10px;
  border: 1px solid var(--warn-border);
  background: var(--warn-bg);
  border-radius: 6px;
  padding: 10px;
  color: var(--warn-text);
}
.warningList p { margin: 0 0 6px; }
.warningList p:last-child { margin-bottom: 0; }
.buttonRow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.debugStatus {
  border: 1px solid var(--panel-border);
  background: var(--status-bg);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 12px;
  color: var(--muted-strong);
}
.debugStatus.ok {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success-text);
}
.validation { border-radius: 6px; padding: 10px; margin: 10px 0; }
.validation.ok { background: var(--success-bg); border: 1px solid var(--success-border); }
.validation.warn { background: var(--warn-bg); border: 1px solid var(--warn-border); }
.validation.bad { background: var(--danger-bg); border: 1px solid var(--danger-border); }
.riskChips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.riskChips span { color: var(--muted); font-size: 12px; }
.templatePicker {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--subtle-border);
  border-bottom: 1px solid var(--subtle-border);
  padding: 10px 0;
  margin-bottom: 12px;
}
.templateControls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: end;
}
.templateControls label { margin-bottom: 0; }
.templateMeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted-strong);
  font-size: 13px;
}
.templateMeta strong { color: var(--text); }
.templateMeta span {
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 1px 6px;
  text-transform: capitalize;
}
.templateMeta small {
  flex-basis: 100%;
  color: var(--muted);
}
.templateMeta a { color: var(--primary); }
.inlineField {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
}
.inlineField button {
  justify-content: center;
  padding: 0;
}
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
code {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 4px;
  padding: 2px 5px;
  overflow-wrap: anywhere;
}
.list { display: grid; gap: 8px; margin-bottom: 16px; }
.rowButton { width: 100%; justify-content: space-between; border: 1px solid var(--panel-border); color: var(--text); }
.rowButton.selected { background: var(--selected-bg); border-color: var(--selected-border); }
.detail { border-top: 1px solid var(--panel-border); padding-top: 16px; }
.userRow {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 120px auto auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 10px;
}
.apiSecret {
  margin-top: 14px;
  border: 1px solid var(--warn-border);
  background: var(--warn-bg);
  border-radius: 6px;
  padding: 10px;
  display: grid;
  gap: 8px;
}
.inviteBox {
  border-top: 1px solid var(--panel-border);
  margin-top: 16px;
  padding-top: 14px;
}
.apiKeyRow {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(130px, 0.8fr) 110px 120px minmax(150px, 0.9fr);
  gap: 8px;
  align-items: end;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 10px;
}
.apiKeyRow label { margin-bottom: 0; }
.apiKeySummary {
  display: grid;
  gap: 4px;
  align-self: center;
  min-width: 0;
}
.apiKeySummary strong,
.apiKeySummary small {
  overflow-wrap: anywhere;
}
.apiKeyNotes { grid-column: span 2; }
.urls { display: grid; gap: 8px; margin-top: 16px; }
.urlLine { display: grid; grid-template-columns: 1fr 38px; gap: 8px; align-items: start; }
.urlLine button { width: 38px; justify-content: center; padding: 7px; }
.snippetBlock {
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 10px;
  display: grid;
  gap: 8px;
}
.snippetBlock h4 { margin: 0; font-size: 14px; }
.snippetBlock button { width: 32px; height: 32px; justify-content: center; padding: 6px; }
.snippetBlock pre {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.snippetBlock code {
  display: block;
  padding: 8px;
}
.deadLetterList { display: grid; gap: 8px; }
.deadLetterRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 10px;
}
.deadLetterRow strong { overflow-wrap: anywhere; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { border-bottom: 1px solid var(--subtle-border); padding: 9px 8px; text-align: left; vertical-align: top; max-width: 300px; overflow-wrap: anywhere; }
th { color: var(--muted-strong); font-weight: 680; }
.recentTable th:first-child,
.recentTable td:first-child,
.auditTable th:first-child,
.auditTable td:first-child {
  width: 38px;
  max-width: 38px;
}
.expandButton {
  width: 28px;
  height: 28px;
  padding: 0;
  justify-content: center;
}
.monoCell {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}
.detailsRow td {
  background: var(--details-bg);
  padding: 14px;
}
.detailsGrid {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: 14px;
}
.detailsGrid h3 {
  margin-bottom: 8px;
}
.detailsGrid pre {
  margin: 0;
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  background: var(--panel);
  padding: 10px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
}

@media (max-width: 900px) {
  .appShell { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  nav { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  nav button span { display: none; }
  .topbar, .topbarActions { align-items: stretch; flex-direction: column; }
  .workspaceSelect { width: 100%; }
  .grid, .split, .filterGrid, .compactFilters, .compactAuditFilters, .launchGateControls, .capacityGrid, .plannerMetrics, .insightMetrics, .insightGrid, .insightHeader, .readinessCounts, .checklist, .templateControls, .deadLetterRow, .detailsGrid, .destinationRow { grid-template-columns: 1fr; }
  .userRow, .apiKeyRow { grid-template-columns: 1fr; }
  .apiKeyNotes { grid-column: auto; }
  .span2, .span4 { grid-column: auto; }
}