:root {
  color-scheme: dark;
  --bg: #0d1117;
  --panel: #151b24;
  --panel-2: #1b2230;
  --border: #263246;
  --text: #e7edf7;
  --muted: #91a0b7;
  --accent: #5eead4;
  --accent-2: #60a5fa;
  --green: #34d399;
  --amber: #fbbf24;
  --red: #f87171;
  --blue: #60a5fa;
  --neutral: #94a3b8;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: linear-gradient(180deg, #0b1016 0%, #101722 100%);
  color: var(--text);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
}

.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  padding: 24px 20px;
  background: rgba(10, 14, 20, 0.9);
  border-right: 1px solid var(--border);
}

.workspace {
  padding: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #07111c;
}

.brand h1,
.topbar h2,
.hero-copy h3,
.result-summary h3,
.screen-headline h3 {
  margin: 0;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.section {
  margin-bottom: 24px;
}

.section-title {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.workspace-card,
.selection-card,
.highlight-box,
.stack-card,
.decision-box,
.theme-card,
.notification-panel,
.flow-step,
.state-strip,
.input,
.textarea,
.chip,
.status-card,
.workspace-tags,
.project-chip,
.decision-preview,
.button-stack button {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.workspace-card,
.selection-card,
.highlight-box,
.stack-card,
.decision-box,
.status-card,
.decision-preview {
  padding: 14px;
}

.workspace-card p,
.selection-card p,
.highlight-box p,
.decision-box p,
.panel-copy p:last-child,
.screen-headline p,
.caption-row,
.block-list p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.workspace-tags,
.top-actions,
.panel-actions,
.form-actions,
.status-strip,
.decision-actions,
.fake-select-row,
.workspace-card .workspace-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.nav-group {
  display: grid;
  gap: 8px;
}

.nav-item {
  text-align: left;
  padding: 11px 12px;
  border-radius: 8px;
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.nav-item.active {
  background: rgba(96, 165, 250, 0.16);
  border-color: rgba(96, 165, 250, 0.48);
}

.summary ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.6;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.project-chip {
  min-height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
}

.project-chip.secondary {
  color: var(--muted);
}

.icon-button,
.settings-trigger,
.panel-header button,
.form-actions button,
.selection-card button,
.panel-actions button,
.button-stack button,
.decision-actions button {
  padding: 8px 12px;
  border-radius: 8px;
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.03);
}

.ghost {
  background: transparent !important;
}

.danger {
  border-color: rgba(248, 113, 113, 0.4) !important;
  color: #ffb0b0;
}

.badge,
.pill,
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--border);
}

.badge.success,
.badge.green,
.pill.green,
.badge[data-status="success"],
.badge[data-status="healthy"],
.badge[data-status="approved"],
.badge[data-status="verified"],
.badge[data-status="delivered"],
.pill[data-status="success"],
.pill[data-status="healthy"],
.pill[data-status="approved"],
.pill[data-status="verified"],
.pill[data-status="delivered"] {
  color: #8ff0ce;
}

.badge.warning,
.badge.amber,
.pill.amber,
.badge[data-status="warning"],
.badge[data-status="needs_review"],
.badge[data-status="revision_requested"],
.badge[data-status="pending"],
.badge[data-status="retry_pending"],
.pill[data-status="warning"],
.pill[data-status="needs_review"],
.pill[data-status="revision_requested"],
.pill[data-status="pending"],
.pill[data-status="retry_pending"] {
  color: #ffd571;
}

.badge.red,
.badge.danger,
.pill.red,
.badge[data-status="danger"],
.badge[data-status="failed"],
.badge[data-status="rejected"],
.badge[data-status="timeout"],
.badge[data-status="permission_blocked"],
.pill[data-status="danger"],
.pill[data-status="failed"],
.pill[data-status="rejected"],
.pill[data-status="timeout"],
.pill[data-status="permission_blocked"] {
  color: #ff9f9f;
}

.badge.blue,
.badge.info,
.pill.blue,
.badge[data-status="info"],
.badge[data-status="processing"],
.badge[data-status="vision_processing"],
.badge[data-status="in_review"],
.badge[data-status="assigned"],
.pill[data-status="info"],
.pill[data-status="processing"],
.pill[data-status="vision_processing"],
.pill[data-status="in_review"],
.pill[data-status="assigned"] {
  color: #9bc4ff;
}

.badge.neutral,
.pill.neutral,
.badge[data-status="neutral"],
.badge[data-status="queued"],
.badge[data-status="uploaded"],
.badge[data-status="inactive"],
.pill[data-status="neutral"],
.pill[data-status="queued"],
.pill[data-status="uploaded"],
.pill[data-status="inactive"] {
  color: #d1d9e6;
}

.screen {
  display: none;
}

.screen.active {
  display: block;
}

.settings-panel,
.notification-panel {
  display: none;
  margin-bottom: 16px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(28, 36, 50, 0.98), rgba(21, 27, 36, 0.98));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.settings-panel.active,
.notification-panel.active {
  display: block;
}

.settings-grid,
.hero-grid,
.content-grid,
.status-grid,
.selection-grid,
.highlight-strip,
.theme-options {
  display: grid;
  gap: 16px;
}

.settings-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
}

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

.theme-card {
  display: grid;
  gap: 8px;
  text-align: left;
  padding: 14px;
}

.theme-card.active {
  border-color: rgba(96, 165, 250, 0.48);
  background: rgba(96, 165, 250, 0.12);
}

.theme-card small {
  color: var(--muted);
}

.theme-swatch {
  width: 100%;
  height: 42px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.swatch-default {
  background: linear-gradient(90deg, #0d1117, #151b24, #60a5fa);
}

.swatch-slate {
  background: linear-gradient(90deg, #111827, #1f2937, #93c5fd);
}

.swatch-forest {
  background: linear-gradient(90deg, #0f1720, #16242a, #34d399);
}

.content-grid {
  margin-bottom: 16px;
}

.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
}

.panel {
  background: linear-gradient(180deg, rgba(28, 36, 50, 0.98), rgba(21, 27, 36, 0.98));
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 18px;
}

.hero-copy p:last-child,
.metric-card span,
.metric-card small,
.alert-item p,
.timeline-item p {
  color: var(--muted);
}

.metric-card strong,
.status-card strong {
  display: block;
  margin: 8px 0 4px;
  font-size: 24px;
}

.panel-header,
.screen-headline,
.card-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.panel-header.compact {
  margin-bottom: 10px;
}

.panel-header {
  margin-bottom: 14px;
}

.panel-header h4 {
  margin: 0;
  font-size: 15px;
}

.status-strip,
.state-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.alert-list,
.timeline,
.mini-list,
.block-list,
.flow-shell,
.button-stack,
.stat-list {
  display: grid;
  gap: 12px;
}

.alert-item,
.timeline-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.alert-list.compact {
  margin-top: 8px;
}

.timeline-time {
  min-width: 56px;
  color: var(--muted);
  font-size: 12px;
  padding-top: 2px;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 6px;
}

.status-dot.red { background: var(--red); }
.status-dot.amber { background: var(--amber); }
.status-dot.blue { background: var(--blue); }

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  vertical-align: top;
}

.table th {
  color: var(--muted);
  font-weight: 600;
}

.form-mock {
  display: grid;
  gap: 10px;
}

.form-mock label {
  color: var(--muted);
  font-size: 12px;
}

.input,
.textarea {
  padding: 12px;
  min-height: 44px;
}

.textarea {
  min-height: 112px;
  line-height: 1.6;
}

.flow-step {
  padding: 12px 14px;
  color: var(--muted);
}

.flow-step.active {
  border-color: rgba(94, 234, 212, 0.4);
  background: rgba(94, 234, 212, 0.08);
  color: var(--text);
}

.document-canvas {
  background: linear-gradient(180deg, #0d131d, #121926);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 18px;
  margin-top: 10px;
}

.page-card {
  aspect-ratio: 0.72;
  background: #f3f5f9;
  color: #111827;
  border-radius: 8px;
  padding: 16px;
}

.page-label {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}

.text-block,
.highlight-block,
.table-block {
  border-radius: 6px;
  background: #d9e0ea;
  margin-bottom: 12px;
}

.text-block { height: 16px; width: 100%; }
.text-block.medium { width: 72%; }
.text-block.short { width: 48%; }
.text-block.wide { height: 22px; }
.highlight-block { height: 48px; background: #bfe8ff; }
.table-block { height: 124px; background: #c4d2e7; }

.sidebar-stack {
  display: grid;
  gap: 16px;
}

.mini-list,
.block-list,
.stat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mini-list li,
.stat-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.block-list li {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.block-list li.selected {
  border-color: rgba(96, 165, 250, 0.4);
  background: rgba(96, 165, 250, 0.08);
}

@media (max-width: 1200px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .rail {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 960px) {
  .hero-grid,
  .hero,
  .two-col,
  .split-view,
  .detail-grid,
  .request-grid,
  .three-col,
  .settings-grid,
  .selection-grid,
  .highlight-strip,
  .theme-options,
  .evidence-cards,
  .status-grid,
  .status-grid.wide,
  .decision-grid,
  .candidate-grid,
  .fake-select-row {
    grid-template-columns: 1fr;
  }

  .topbar,
  .screen-headline,
  .panel-header,
  .card-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .top-actions,
  .decision-actions {
    width: 100%;
  }

  .decision-actions button {
    width: 100%;
  }
}