/* TARS Plan — Design System
   Single source of truth pra todos os plan.html e index.html.
   Classes só. HTML usa, nunca redefine.
*/

/* Paleta Thariq/Anthropic (aprovada pelo Miguel 04/07/2026):
   ivory + clay + olive + oat. Nomes de var antigos mantidos pra compat. */
:root {
  --bg: #FAF9F5;
  --bg-soft: #F0EEE6;
  --bg-card: #FFFFFF;
  --grid: #E6E3DA;
  --ink: #141413;
  --ink-soft: #3D3D3A;
  --ink-muted: #87867F;
  --accent: #D97757;
  --accent-d: #B85C3E;
  --accent-soft: #FBF0EA;
  --warn: #8A6A3B;
  --warn-soft: #E3DACC;
  --ok: #788C5D;
  --ok-soft: #EFF2E9;
  --danger: #B85C3E;
  --danger-soft: #FBF0EA;
  --oat: #E3DACC;
  --g300: #D1CFC5;
  --serif: ui-serif, Georgia, 'Times New Roman', Times, serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --radius: 12px;
  --gap: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 920px;
  margin: 0 auto;
  padding: 64px 48px 120px;
  background: var(--bg);
}

/* Header */
.label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.label .sep { margin: 0 8px; opacity: 0.5; }

h1.title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.15;
  margin: 0 0 32px 0;
  letter-spacing: -0.01em;
}

/* Brief box */
.brief {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin: 0 0 40px 0;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.brief .brief-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.brief code, .brief a {
  color: var(--ink);
  background: rgba(0,0,0,0.04);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 13px;
}

/* Stat cards */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 0 0 56px 0;
}
.stat {
  background: var(--bg-card);
  border: 1px solid var(--grid);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
}
.stat .num {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 8px;
}
.stat .lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  text-transform: uppercase;
}

/* Sections */
.section { margin: 56px 0 0 0; }
.section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid var(--grid);
  padding-bottom: 14px;
  margin-bottom: 28px;
}
.section-num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-muted);
}
.section-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  margin: 0;
}
.section p { margin: 0 0 14px 0; }
.section code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--bg-soft);
  padding: 2px 5px;
  border-radius: 3px;
}

/* Phases (timeline) */
.phases { margin: 28px 0; }
.phase {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--grid);
}
.phase:first-child { border-top: none; padding-top: 0; }
.phase-id {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
  padding-top: 4px;
  position: relative;
}
.phase-id::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
}
.phase.done .phase-id::before { background: var(--accent); }
.phase-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  margin: 0 0 6px 0;
}
.phase-desc { color: var(--ink-soft); margin: 0 0 10px 0; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--bg-soft);
  color: var(--ink-soft);
  padding: 3px 8px;
  border-radius: 4px;
}
.tag.accent { background: var(--accent-soft); color: var(--accent); }
.tag.warn   { background: var(--warn-soft);   color: var(--warn); }
.tag.ok     { background: var(--ok-soft);     color: var(--ok); }

/* Tasks (bite-sized steps) */
.task {
  background: var(--bg-card);
  border: 1px solid var(--grid);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 16px 0;
}
.task h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  margin: 0 0 12px 0;
}
.task .files {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}
.task .files .verb { color: var(--accent); }
.task .step {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--grid);
}
.task .step:first-of-type { border-top: none; }
.task .step .check {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink-muted);
  border-radius: 4px;
  margin-top: 2px;
  cursor: pointer;
  background: transparent;
  flex-shrink: 0;
}
.task .step.done .check { background: var(--accent); border-color: var(--accent); }
.task .step.done .check::after {
  content: '✓';
  color: white;
  display: block;
  text-align: center;
  font-size: 13px;
  line-height: 14px;
}
.task .step.blocked .check {
  background: #fbbf24;
  border-color: #d97706;
}
.task .step.blocked .check::after {
  content: '?';
  color: white;
  display: block;
  text-align: center;
  font-size: 12px;
  line-height: 14px;
  font-weight: bold;
}
.task .step.blocked > div:last-child::after {
  content: ' (aguardando Miguel)';
  color: #d97706;
  font-size: 11px;
  font-style: italic;
}

/* Code blocks */
pre {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  overflow-x: auto;
  margin: 12px 0;
}

/* Diagram container */
.diagram {
  background: var(--bg-card);
  border: 1px solid var(--grid);
  border-radius: var(--radius);
  padding: 32px;
  margin: 24px 0;
  text-align: center;
}
.diagram svg { max-width: 100%; height: auto; }
.diagram .caption {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-top: 16px;
}

/* Annotation toolbar (selection) */
.ann-toolbar {
  position: absolute;
  display: none;
  background: var(--ink);
  color: white;
  border-radius: var(--radius);
  padding: 6px 8px;
  gap: 4px;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.ann-toolbar.active { display: flex; }
.ann-toolbar button {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 14px;
  padding: 6px 8px;
  border-radius: 3px;
}
.ann-toolbar button:hover { background: rgba(255,255,255,0.15); }

/* Annotation highlight on text */
.ann-mark {
  background: var(--accent-soft);
  border-bottom: 2px solid var(--accent);
  cursor: pointer;
  padding: 0 1px;
  transition: background 0.15s;
}
.ann-mark:hover { background: #ddd6fe; }

/* Inline popover (aparece logo abaixo da seleção) */
.ann-popover {
  position: absolute;
  z-index: 110;
  width: 360px;
  background: white;
  border: 1px solid var(--grid);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 14px 14px 12px;
  font-family: var(--sans);
}
.ann-pop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.ann-pop-quote {
  flex: 1;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 8px;
  border-radius: 3px;
  line-height: 1.4;
  word-break: break-word;
}
.ann-pop-close {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.ann-pop-close:hover { background: var(--bg-soft); color: var(--ink); }
.ann-pop-text {
  width: 100%;
  min-height: 70px;
  border: 1px solid var(--grid);
  border-radius: 4px;
  padding: 8px 10px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
}
.ann-pop-text:focus { outline: none; border-color: var(--accent); }
.ann-pop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
}
.ann-pop-actions button {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--grid);
  background: white;
  color: var(--ink-soft);
  cursor: pointer;
}
.ann-pop-actions button:hover { background: var(--bg-soft); }
.ann-pop-actions .primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.ann-pop-actions .primary:hover { background: #5b4dd0; }
.ann-pop-actions .ann-pop-del {
  margin-right: auto;
  color: var(--danger);
  border-color: transparent;
}
.ann-pop-actions .ann-pop-del:hover { background: var(--danger-soft); }

/* Sidebar — lista de visão geral */
.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 340px;
  height: 100vh;
  background: white;
  border-left: 1px solid var(--grid);
  padding: 20px 18px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  z-index: 90;
  box-shadow: -4px 0 16px rgba(0,0,0,0.04);
}
.sidebar.open { transform: translateX(0); }
.sidebar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.sidebar h2 {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
.sidebar-close {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 3px;
}
.sidebar-close:hover { background: var(--bg-soft); }
.sidebar .empty {
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
  padding: 60px 16px;
  line-height: 1.6;
}
.ann-item {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color 0.1s, transform 0.05s;
}
.ann-item:hover { border-color: var(--accent); transform: translateY(-1px); }
.ann-item-section {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.ann-item-quote {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 6px;
  line-height: 1.45;
}
.ann-item-comment {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.ann-item-comment .ann-empty {
  color: var(--ink-muted);
  font-style: italic;
}

/* Top bar (annotation send) */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  border-bottom: 1px solid var(--grid);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 80;
  font-family: var(--mono);
  font-size: 13px;
}
.topbar .brand {
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar .brand .sep { color: var(--ink-muted); opacity: 0.6; }
.topbar .brand .back {
  color: var(--accent);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--grid);
  border-radius: 4px;
  background: var(--bg-soft);
  transition: background 120ms;
}
.topbar .brand .back:hover { background: var(--accent-soft); }
.topbar .actions { display: flex; gap: 8px; }
.topbar button {
  background: var(--bg-soft);
  border: 1px solid var(--grid);
  color: var(--ink);
  padding: 6px 12px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
}
.topbar button.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.topbar button.primary:hover { opacity: 0.9; }
.topbar button.danger {
  background: white;
  color: var(--danger);
  border-color: var(--danger-soft);
}
.topbar button.danger:hover {
  background: var(--danger-soft);
}

/* Delete button na sidebar */
.ann-item { position: relative; padding-right: 28px; }
.ann-item-del {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 14px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, color 120ms;
}
.ann-item-del:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.ann-item.sent {
  opacity: 0.55;
  background: #f6f6f3;
}
.ann-item.sent .ann-item-quote,
.ann-item.sent .ann-item-comment {
  text-decoration: line-through;
  text-decoration-color: rgba(0,0,0,0.25);
}
.ann-item-sent {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  background: #d1fae5;
  color: #059669;
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Diagrama: cursor pointer + highlight em elementos clicados */
.diagram svg text,
.diagram svg rect {
  cursor: pointer;
  transition: opacity 120ms;
}
.diagram svg text:hover,
.diagram svg rect:hover {
  opacity: 0.7;
}
.diagram svg .diagram-marked {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
  fill: var(--accent-soft) !important;
}
.diagram svg text.diagram-marked {
  fill: var(--accent) !important;
  font-weight: 600;
}
body.has-topbar .page { padding-top: 96px; }

/* ========== KANBAN MASTER ========== */
.kanban-page {
  max-width: 1400px;
  padding: 64px 32px 64px;
}
.kanban-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
}
.kanban-head h1 {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 400;
  margin: 0;
}
.kanban-head .meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
}
.filters {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.filters select, .filters input {
  font-family: var(--mono);
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--grid);
  border-radius: 4px;
  background: white;
  color: var(--ink);
}
.filters input { min-width: 240px; }
.filters .count {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
  margin-left: auto;
}

/* Chips multi-projeto */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.chip {
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 12px;
  border: 1px solid var(--grid);
  border-radius: 999px;
  background: white;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 120ms;
  user-select: none;
}
.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.chip.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Stat header acima do kanban */
.kanban-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.stat-card {
  background: white;
  border: 1px solid var(--grid);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.stat-card .stat-title {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.stat-card .stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.stat-pill {
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-soft);
  color: var(--ink-soft);
}
.stat-pill[data-status="pending"]     { background: #f3f4f6; color: #6b7280; }
.stat-pill[data-status="in-progress"] { background: #dbeafe; color: #1e40af; }
.stat-pill[data-status="done"]        { background: #d1fae5; color: #059669; }
.stat-card .stat-total {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-muted);
}
.stat-throughput {
  background: linear-gradient(135deg, #ede9fe, #f5f3ff);
  border-color: var(--accent);
}
.stat-throughput .stat-big {
  font-family: var(--serif);
  font-size: 36px;
  line-height: 1;
  color: var(--accent);
  margin: 4px 0;
}
.stat-throughput .stat-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-muted);
}

.kanban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: start;
}
.col {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 16px;
  min-height: 200px;
}
.col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.col-head .col-count {
  background: white;
  border-radius: 10px;
  padding: 2px 8px;
  color: var(--ink-soft);
  font-size: 11px;
}
.col[data-status="pending"]      .col-head { color: var(--ink-muted); }
.col[data-status="in-progress"]  .col-head { color: var(--warn); }
.col[data-status="done"]         .col-head { color: var(--ok); }
.col[data-status="cancelled"]    .col-head { color: var(--danger); }

.plan-card {
  background: white;
  border: 1px solid var(--grid);
  border-radius: 5px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.1s, transform 0.05s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.plan-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.plan-card .pc-title {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.3;
  margin-bottom: 8px;
}
.plan-card .pc-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-muted);
}
.pc-project {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
}
.pc-type { color: var(--ink-soft); }
.pc-date { margin-left: auto; }
.col .empty {
  text-align: center;
  color: var(--ink-muted);
  font-size: 12px;
  padding: 40px 10px;
  font-family: var(--mono);
}

/* sub-planos no kanban (aninhados sob o pai) */
.plan-card .pc-children {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--grid);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pc-child {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  padding: 2px 0;
}
.pc-child::before {
  content: "└";
  color: var(--ink-muted);
  font-size: 10px;
}
.pc-child[data-status="done"] { color: var(--ok); text-decoration: line-through; opacity: 0.7; }
.pc-child[data-status="in-progress"] { color: var(--warn); }
.pc-child[data-status="cancelled"] { color: var(--danger); opacity: 0.5; }

/* indicador de plano-pai */
.plan-card.has-children { border-left: 3px solid var(--accent); }
.plan-card .pc-children-count {
  font-size: 10px;
  color: var(--accent);
  font-family: var(--mono);
  background: var(--accent-soft);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ========== TEMPLATE "CONVERSA" — seções específicas pra simplificação ========== */
.where, .what, .result, .sql-block {
  border: 1px solid var(--grid);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 12px 0;
  background: white;
}
.where { border-left: 3px solid var(--accent); }
.where .where-label,
.what .what-label,
.result .result-label,
.sql-block .sql-label {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.where ul, .what ul, .result ul { margin: 4px 0; padding-left: 20px; }
.where code, .what code, .result code, .sql-block code {
  background: var(--bg-soft);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12.5px;
}
.what { border-left: 3px solid var(--warn); }
.result { border-left: 3px solid var(--ok); background: var(--ok-soft); }
.result .result-label { color: var(--ok); }

/* Callout de destaque — ponto que precisa de atenção/decisão */
.callout {
  border: 1px solid var(--warn);
  border-left: 5px solid var(--warn);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 16px 0;
  background: var(--warn-soft);
}
.callout .callout-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--warn);
  font-weight: 700;
  margin-bottom: 8px;
}
.callout p { margin: 7px 0; font-size: 14px; line-height: 1.6; }
.callout .ex {
  background: rgba(180,120,10,0.10);
  border-radius: 6px;
  padding: 9px 13px;
  margin: 10px 0;
  font-size: 13px;
}
.callout ul { margin: 6px 0 0; padding-left: 20px; }
.callout li { margin: 5px 0; font-size: 13.5px; line-height: 1.5; }
.callout code {
  background: rgba(255,255,255,0.6);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12.5px;
}
.callout .rec { margin-top: 10px; font-weight: 600; font-size: 13.5px; }

/* SQL antes/depois lado a lado */
.sql-block { border-left: 3px solid #4f46e5; background: #1e1b2e; color: #e0e7ff; padding: 0; overflow: hidden; }
.sql-block .sql-label { padding: 10px 16px 0; color: #c7d2fe; }
.sql-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #2d2a3f;
  margin-top: 8px;
}
.sql-diff > div { background: #1e1b2e; padding: 12px 16px; }
.sql-diff .sql-side-label {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  color: #818cf8;
  margin-bottom: 6px;
}
.sql-diff pre {
  margin: 0;
  background: transparent;
  color: #e0e7ff;
  font-size: 12.5px;
  white-space: pre-wrap;
  word-break: break-word;
}
.sql-diff .before .sql-side-label { color: #fca5a5; }
.sql-diff .after .sql-side-label { color: #86efac; }

/* pre direto dentro de .sql-block (sem o wrapper .sql-diff) — listagem solo */
.sql-block > pre {
  margin: 0;
  padding: 12px 16px 16px;
  background: transparent;
  color: #e0e7ff;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 700px) {
  .sql-diff { grid-template-columns: 1fr; }
}

/* Sub-plans listing dentro do plano pai */
.subplans {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.subplan-card {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--grid);
  border-radius: var(--radius);
  background: var(--bg-soft);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.1s;
}
.subplan-card:hover { border-color: var(--accent); }
.subplan-card .sp-title {
  font-family: var(--serif);
  font-size: 14px;
  margin-bottom: 4px;
}
.subplan-card .sp-status {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.subplan-card[data-status="done"] .sp-status { color: var(--ok); }
.subplan-card[data-status="in-progress"] .sp-status { color: var(--warn); }
.subplan-card[data-status="cancelled"] .sp-status { color: var(--danger); }

@media (max-width: 1100px) {
  .kanban { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .kanban { grid-template-columns: 1fr; }
  .page { padding: 40px 20px; }
}

/* ============================================
   BOM tree (explosion view) — fits LIGHT theme
   ============================================ */

.bom-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 16px 0 24px 0;
  padding: 14px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--grid);
  border-radius: 10px;
}
.bom-toolbar label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
}
.bom-toolbar input[type="number"] {
  width: 70px;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--grid);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.bom-toolbar button {
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--grid);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.bom-toolbar button:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.bom-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 16px 0 24px 0;
}
.bom-stat {
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--grid);
  border-radius: 10px;
}
.bom-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.bom-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bom-stat-sub {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 2px;
}

.bom-tree {
  font-family: var(--mono);
  font-size: 12.5px;
  background: #0e1018;
  color: #e6e8ef;
  border: 1px solid #1f2333;
  border-radius: 10px;
  padding: 18px 20px;
  overflow-x: auto;
  max-height: 80vh;
  overflow-y: auto;
}

.tree-node {
  position: relative;
}
.tree-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: default;
  white-space: nowrap;
  color: #e6e8ef;
}
.tree-row[data-can-expand="true"] { cursor: pointer; }
.tree-row:hover { background: rgba(255,255,255,0.06); }
.tree-row.faded { opacity: 0.32; }

.tree-toggle {
  display: inline-block;
  width: 14px;
  text-align: center;
  color: #9aa3b8;
  flex-shrink: 0;
  user-select: none;
}
.tree-node[data-open="false"] > .tree-row .tree-toggle::before { content: "▶"; }
.tree-node[data-open="true"]  > .tree-row .tree-toggle::before { content: "▼"; }
.tree-row[data-can-expand="false"] .tree-toggle::before { content: "·"; color: rgba(255,255,255,0.25); }

.tree-children {
  margin-left: 18px;
  border-left: 1px dashed rgba(255,255,255,0.16);
  padding-left: 14px;
}
.tree-node[data-open="false"] > .tree-children { display: none; }

.tree-codigo {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  font-family: var(--mono);
}
.tree-codigo.prefix-PFB { background: rgba(255,180,80,0.22); color: #ffd28c; }
.tree-codigo.prefix-COMP { background: rgba(120,180,255,0.22); color: #b4d8ff; }
.tree-codigo.prefix-MPR { background: rgba(180,220,140,0.22); color: #d6eba8; }
.tree-codigo.prefix-EMB { background: rgba(220,140,200,0.22); color: #f0bce0; }
.tree-codigo.prefix-SVT { background: rgba(220,160,100,0.22); color: #f4caa0; }
.tree-codigo.prefix-REV { background: rgba(160,220,220,0.22); color: #b8e8e8; }
.tree-codigo.prefix-IMO { background: rgba(180,180,200,0.22); color: #ccd; }

.tree-desc {
  color: #e6e8ef;
  font-size: 12.5px;
  font-family: var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
}
.tree-qtde {
  margin-left: auto;
  padding-left: 16px;
  font-variant-numeric: tabular-nums;
  color: #9aa3b8;
  font-size: 12px;
  flex-shrink: 0;
}
.tree-qtde strong { color: #ffffff; }

.tree-stock-badge {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 3px;
  margin-left: 6px;
  font-family: var(--mono);
  font-weight: 700;
}
.tree-stock-badge.ok       { background: rgba(120,210,120,0.22); color: #b4e8b4; }
.tree-stock-badge.low      { background: rgba(255,210,140,0.22); color: #ffd28c; }
.tree-stock-badge.zero     { background: rgba(255,120,120,0.22); color: #ff9999; }
.tree-stock-badge.dispatch { background: rgba(160,200,255,0.22); color: #b4d8ff; }

.bom-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 12px 0 20px 0;
  font-size: 12px;
  color: var(--ink-soft);
}
.bom-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bom-legend .swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.bom-summary {
  margin-top: 24px;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--grid);
  border-radius: 10px;
}
.bom-summary h3 {
  margin: 0 0 12px 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.bom-summary table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  color: var(--ink);
}
.bom-summary th, .bom-summary td {
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid var(--grid);
}
.bom-summary th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  background: var(--bg-soft);
}
.bom-summary td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bom-summary td .tree-codigo { font-size: 10px; padding: 1px 6px; }
.bom-summary td .tree-stock-badge { margin: 0; }

/* tree row meta (qtde necessária + estoque atual) */
.tree-meta {
  margin-left: auto;
  padding-left: 16px;
  font-size: 12px;
  color: #c4cad9;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tree-need { color: #e6e8ef; }
.tree-need strong { color: #ffffff; font-weight: 700; }
.tree-sep { color: rgba(255,255,255,0.25); }
.tree-stock.has  { color: #b4e8b4; }
.tree-stock.none { color: rgba(255,255,255,0.35); }

/* highlights pós-explosão na árvore */
.tree-row.lit-ok {
  background: rgba(120,210,120,0.10);
  box-shadow: inset 3px 0 0 #6ec06e;
}
.tree-row.lit-op {
  background: rgba(160,200,255,0.10);
  box-shadow: inset 3px 0 0 #6a9fff;
}
.tree-row.lit-sc {
  background: rgba(255,150,150,0.10);
  box-shadow: inset 3px 0 0 #e06464;
}

/* badge variantes adicionais */
.tree-stock-badge.op { background: rgba(106,159,255,0.22); color: #b4d8ff; }
.tree-stock-badge.sc { background: rgba(255,120,120,0.22); color: #ff9999; }

/* primary button */
.bom-toolbar button.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  font-weight: 600;
}
.bom-toolbar button.primary:hover {
  background: #5749d9;
  border-color: #5749d9;
  color: white;
}

/* result cards grandes */
.bom-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 16px 0 24px 0;
}
.bom-action {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 12px;
  border: 2px solid;
  background: var(--bg-card);
}
.bom-action-icon {
  font-size: 36px;
  line-height: 1;
  flex-shrink: 0;
}
.bom-action-body { flex: 1; min-width: 0; }
.bom-action-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: 2px;
}
.bom-action-num {
  font-size: 36px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin: 4px 0;
}
.bom-action-sub {
  font-size: 11px;
  color: var(--ink-muted);
}
.bom-action-reserva { border-color: #b4e8b4; background: rgba(180,232,180,0.12); }
.bom-action-reserva .bom-action-num { color: #2d8a2d; }
.bom-action-op { border-color: #b4d8ff; background: rgba(180,216,255,0.12); }
.bom-action-op .bom-action-num { color: #2256c8; }
.bom-action-sc { border-color: #ffb4b4; background: rgba(255,180,180,0.12); }
.bom-action-sc .bom-action-num { color: #c22; }

.bom-result-narrative {
  margin: 16px 0 24px 0;
  padding: 18px 22px;
  background: var(--bg-soft);
  border-radius: 10px;
  border-left: 4px solid var(--accent);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.bom-result-narrative p { margin: 0; }
.bom-result-narrative p + p { margin-top: 8px; }

/* linhas da tabela tintadas por ação */
.bom-summary tr[data-action="reserva"] td:first-child { box-shadow: inset 3px 0 0 #6ec06e; }
.bom-summary tr[data-action="op"] td:first-child      { box-shadow: inset 3px 0 0 #6a9fff; }
.bom-summary tr[data-action="comprar"] td:first-child { box-shadow: inset 3px 0 0 #e06464; }

/* root row tem destaque sutil */
.tree-row.tree-root {
  padding: 8px 6px;
  border-bottom: 1px dashed rgba(255,255,255,0.12);
  margin-bottom: 4px;
}
.tree-row.tree-root .tree-codigo { font-size: 12px; padding: 3px 10px; }
.tree-row.tree-root .tree-desc { font-weight: 600; font-size: 14px; }

/* summary inline quando uma sub-arvore foi auto-colapsada */
.tree-children-summary {
  display: inline-block;
  margin-left: 12px;
  padding: 2px 8px;
  background: rgba(120,210,120,0.10);
  border-radius: 4px;
  color: #8fd88f;
  font-size: 10.5px;
  font-style: italic;
  letter-spacing: 0.02em;
}

/* tree-meta refinado */
.tree-meta { gap: 14px; }
.tree-need {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: #d4d8e3;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.tree-need strong { color: #ffffff; }
.tree-stock {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.tree-stock.has { color: #b4e8b4; font-weight: 600; }
.tree-stock.none { color: rgba(255,255,255,0.30); }

/* comparison card */
.bom-compare {
  margin: 24px 0;
  padding: 18px 22px;
  background: linear-gradient(135deg, var(--accent-soft) 0%, rgba(255,255,255,0.6) 100%);
  border: 1px solid rgba(108,92,231,0.25);
  border-radius: 12px;
}
.bom-compare-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}
.bom-compare-icon {
  font-size: 32px;
  flex-shrink: 0;
}
.bom-compare-body { flex: 1; min-width: 0; }
.bom-compare-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 10px;
}
.bom-compare-cols {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.bom-compare-cols > div { min-width: 0; }
.bom-compare-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: 3px;
}
.bom-compare-val {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bom-compare-val.bad { color: #c22; }
.bom-compare-val.good { color: #2256c8; }
.bom-compare-val.savings { color: #2d8a2d; }
.bom-compare-arrow {
  font-size: 20px;
  color: var(--ink-muted);
  font-weight: 300;
}

/* narrative */
.bom-result-narrative {
  margin: 0 0 20px 0;
  padding: 18px 22px;
  background: var(--bg-soft);
  border-radius: 10px;
  border-left: 4px solid var(--accent);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.bom-result-narrative .narrative-pedido { margin: 0 0 8px 0; color: var(--ink-soft); }
.bom-result-narrative .narrative-pedido code { background: rgba(108,92,231,0.12); padding: 2px 7px; border-radius: 4px; color: var(--accent); font-weight: 600; }
.bom-result-narrative .narrative-result { margin: 0; font-size: 15px; }
.bom-result-narrative .narrative-good { color: #2d8a2d; }

/* secoes agrupadas de ações */
.action-section {
  margin-top: 18px;
  border: 1px solid var(--grid);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
}
.action-section:first-child { margin-top: 0; }
.action-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--grid);
  font-weight: 600;
  font-size: 13px;
}
.action-section-icon { font-size: 18px; }
.action-section-title { flex: 1; color: var(--ink); }
.action-section-count {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  background: var(--bg-card);
  color: var(--ink-soft);
  border: 1px solid var(--grid);
}
.action-section-empty .action-section-head { opacity: 0.55; }
.action-section-empty .action-section-count { background: transparent; border-color: transparent; }

.action-section-reserva { border-color: rgba(110,192,110,0.4); }
.action-section-reserva .action-section-head { background: rgba(110,192,110,0.12); border-bottom-color: rgba(110,192,110,0.3); }
.action-section-reserva .action-section-count { background: #6ec06e; color: white; border-color: #6ec06e; }

.action-section-op { border-color: rgba(106,159,255,0.4); }
.action-section-op .action-section-head { background: rgba(106,159,255,0.12); border-bottom-color: rgba(106,159,255,0.3); }
.action-section-op .action-section-count { background: #6a9fff; color: white; border-color: #6a9fff; }

.action-section-sc { border-color: rgba(224,100,100,0.4); }
.action-section-sc .action-section-head { background: rgba(224,100,100,0.12); border-bottom-color: rgba(224,100,100,0.3); }
.action-section-sc .action-section-count { background: #e06464; color: white; border-color: #e06464; }

.action-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--ink);
}
.action-table th, .action-table td {
  padding: 9px 16px;
  text-align: left;
  border-bottom: 1px solid var(--grid);
}
.action-table tr:last-child td { border-bottom: 0; }
.action-table th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  font-weight: 600;
  background: var(--bg);
}
.action-table td.num, .action-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.action-table .tree-codigo { font-size: 10.5px; padding: 2px 7px; }

@media (max-width: 800px) {
  .bom-actions { grid-template-columns: 1fr; }
  .bom-compare-cols { flex-direction: column; align-items: flex-start; gap: 8px; }
  .bom-compare-arrow { transform: rotate(90deg); }
}

/* ============================================================
   Formato Thariq (aprovado 04/07/2026)
   Componentes novos do /plan: lingua do plano, decisoes com
   alternativa, mock de tela, quiz, antes/depois, resposta montada.
   Nomes proprios pra nao colidir com kanban/annotator/BOM.
   ============================================================ */

/* divisor com label central */
.divider {
  display: flex; align-items: center; gap: 16px; margin: 44px 0 24px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-muted); white-space: nowrap;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1.5px; background: var(--g300); }

/* faixa de stats do plano */
.stat-strip {
  display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 14px 18px;
  border: 1.5px solid var(--grid); border-radius: var(--radius); background: var(--bg-soft);
  margin: 20px 0 10px; font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
}
.stat-strip b { color: var(--ink); font-weight: 600; }
.stat-strip .warn b { color: var(--accent-d); }
.sort-hint {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted); margin: 14px 2px 0;
}
.sort-hint b { color: var(--accent-d); }

/* escada de vocabulario (lingua do plano) */
.ladder { display: grid; gap: 12px; }
.rung {
  background: var(--bg-card); border: 1.5px solid var(--g300); border-radius: var(--radius);
  padding: 16px 20px 15px; display: grid; grid-template-columns: 158px 1fr; gap: 4px 22px;
}
@media (max-width: 640px) { .rung { grid-template-columns: 1fr; } }
.rung .term { font-family: var(--serif); font-size: 17px; font-weight: 500; }
.rung .term small {
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted); margin-top: 2px;
}
.rung .def { font-size: 14.5px; color: var(--ink-soft); }
.rung .say {
  grid-column: 2; font-family: var(--mono); font-size: 12.5px; color: var(--accent-d);
  background: var(--bg-soft); border-radius: 8px; padding: 7px 11px; margin-top: 6px;
}
@media (max-width: 640px) { .rung .say { grid-column: 1; } }
.rung .say::before { content: "diria \2192  "; color: var(--ink-muted); }

/* card de decisao */
.dec {
  border: 1.5px solid var(--g300); border-radius: var(--radius); background: var(--bg-card);
  padding: 20px 22px; margin-bottom: 18px;
}
.dec-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.dec-title { font-family: var(--serif); font-weight: 500; font-size: 19px; letter-spacing: -0.01em; margin: 0; flex: 1 1 100%; }
.dec p { font-size: 14px; color: var(--ink-soft); margin: 0 0 12px; }
.dec p strong { color: var(--ink); }
.badge {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; font-weight: 600;
  padding: 3px 9px; border-radius: 6px; border: 1.5px solid; white-space: nowrap;
}
.badge.decisao { color: var(--accent-d); border-color: var(--accent); background: var(--accent-soft); }
.badge.sql { color: #55663F; border-color: var(--ok); background: var(--ok-soft); }
.badge.ux { color: var(--warn); border-color: #C9B48E; background: var(--oat); }

/* alternativa lado a lado */
.alt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 12px; }
@media (max-width: 640px) { .alt-grid { grid-template-columns: 1fr; } }
.alt { border: 1.5px solid var(--g300); border-radius: var(--radius); padding: 14px 16px; background: var(--bg); }
.alt.escolha { border-color: var(--ok); background: var(--ok-soft); }
.alt .alt-tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 8px;
}
.alt.escolha .alt-tag { color: var(--ok); }
.alt p { margin: 0 0 6px; font-size: 13.5px; }
.alt .quando { font-size: 12.5px; color: var(--ink-muted); font-style: italic; }

/* callout custo de errar */
.bite {
  display: flex; gap: 10px; font-size: 13.5px; color: var(--ink-soft);
  background: var(--bg); border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0; padding: 10px 14px; margin: 12px 0;
}
.bite .bite-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-d); flex: none; padding-top: 2px;
}

/* chips de reacao (viram resposta montada; nome proprio pra nao colidir com .chip do kanban) */
.rchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rchip {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft);
  background: var(--bg-soft); border: 1.5px solid var(--g300); border-radius: 8px;
  padding: 5px 12px; cursor: pointer; user-select: none; transition: all 120ms;
}
.rchip:hover { border-color: var(--accent); color: var(--accent-d); }
.rchip.sel { background: var(--ok); border-color: var(--ok); color: var(--bg-card); }
.rchip.sel::before { content: "\2713  "; }

/* mock de tela embutido (moldura de janela) */
.artifact { border: 1.5px solid var(--g300); border-radius: 14px; overflow: hidden; background: var(--bg-card); margin: 14px 0; }
.artifact-bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1.5px solid var(--grid); background: var(--bg-soft); }
.artifact-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--g300); }
.artifact-bar .file { font-family: var(--mono); font-size: 11.5px; color: var(--ink-muted); margin-left: 8px; }
.ui-mock { padding: 22px 24px 26px; }
.ui-mock .ui-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.seg { display: inline-flex; border: 1.5px solid var(--g300); border-radius: 9px; overflow: hidden; margin-bottom: 16px; }
.seg span { padding: 7px 18px; font-size: 13px; color: var(--ink-muted); cursor: pointer; }
.seg span.on { background: var(--ink); color: var(--bg-card); font-weight: 600; }
.ghost-table { border: 1.5px solid var(--grid); border-radius: 9px; overflow: hidden; }
.ghost-row { display: grid; grid-template-columns: 90px 1fr 1fr 1fr 80px; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--grid); }
.ghost-row:last-child { border-bottom: none; }
.ghost-row.head { background: var(--bg-soft); font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
.ghost-row .gh { height: 11px; border-radius: 4px; background: var(--grid); align-self: center; }
.fnote { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); margin-top: 10px; }
.fnote b { color: var(--accent-d); }

/* passos da ordem de construcao */
.step-row {
  display: flex; gap: 14px; align-items: baseline; border: 1.5px solid var(--g300);
  border-radius: 10px; background: var(--bg-card); padding: 12px 16px;
  margin-bottom: 8px; font-size: 14px; color: var(--ink-soft);
}
.step-row .n { font-family: var(--mono); font-size: 11.5px; color: var(--accent-d); flex: none; }
.step-row .esf { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); margin-left: auto; white-space: nowrap; }

/* mecanica colapsada */
details.mech { border: 1.5px solid var(--grid); border-radius: var(--radius); background: var(--bg-soft); }
details.mech summary {
  cursor: pointer; padding: 14px 18px; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted);
}
details.mech[open] summary { border-bottom: 1.5px solid var(--grid); }
details.mech ul { margin: 12px 18px 16px; padding-left: 18px; font-size: 13.5px; color: var(--ink-soft); }
details.mech li { margin-bottom: 4px; }

/* quiz do plano */
.quiz-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.quiz-intro .qsub { color: var(--ink-muted); font-size: 13.5px; max-width: 560px; }
.scorebox {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft);
  background: var(--bg-soft); border: 1.5px solid var(--g300); border-radius: 10px;
  padding: 8px 14px; white-space: nowrap;
}
.scorebox b { color: var(--ink); }
.q { border: 1.5px solid var(--g300); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; background: var(--bg-card); }
.q.answered-right { border-color: var(--ok); }
.q.answered-wrong { border-color: var(--accent); }
.q .qnum { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); margin-bottom: 6px; }
.q .qtext { font-family: var(--serif); font-size: 17px; line-height: 1.45; margin-bottom: 14px; letter-spacing: -0.01em; }
.q .opt {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left;
  border: 1.5px solid var(--g300); border-radius: 9px; background: var(--bg);
  padding: 10px 14px; margin-bottom: 8px; cursor: pointer; font: inherit;
  font-size: 14px; color: var(--ink-soft); transition: border-color .12s, background .12s;
}
.q .opt:hover { border-color: var(--ink-muted); }
.q .opt .key { font-family: var(--mono); font-size: 11.5px; color: var(--ink-muted); flex: none; padding-top: 2px; }
.q .opt.sel-right { border-color: var(--ok); background: var(--ok-soft); color: var(--ink); }
.q .opt.sel-right .key { color: var(--ok); }
.q .opt.sel-wrong { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.q .opt.sel-wrong .key { color: var(--accent-d); }
.q .opt.reveal-right { border-color: var(--ok); }
.q .opt.dim { opacity: .55; }
.q .fb { border-radius: 9px; padding: 12px 15px; font-size: 13.5px; margin-top: 4px; display: none; }
.q .fb.show { display: block; }
.q .fb.good { background: var(--ok-soft); border: 1.5px solid var(--ok); color: var(--ink-soft); }
.q .fb.bad { background: var(--accent-soft); border: 1.5px solid var(--accent); color: var(--ink-soft); }

/* antes/depois do pedido */
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .ba-grid { grid-template-columns: 1fr; } }
.ba-cell { border: 1.5px solid var(--g300); border-radius: var(--radius); background: var(--bg); padding: 16px 18px; }
.ba-cell.depois { border-color: var(--ok); background: var(--ok-soft); }
.ba-cell .ba-tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px;
}
.ba-cell.depois .ba-tag { color: var(--ok); }
.ba-cell .txt { font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--ink); white-space: pre-wrap; }
.ba-cell .txt .novo { color: var(--accent-d); font-weight: 600; }
.ba-note { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); margin-top: 10px; }

/* resposta montada */
.final-card {
  border: 1.5px solid var(--ink); border-radius: 14px; background: var(--bg-card);
  padding: 24px 26px 26px; margin-top: 38px; box-shadow: 0 10px 28px rgba(20,20,19,.07);
}
.final-card h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.012em; margin: 8px 0 14px; }
.final-card .f-eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-d);
  display: flex; align-items: center; gap: 12px;
}
.final-card .f-eyebrow::before { content: ""; width: 24px; height: 1.5px; background: var(--accent); flex: none; }
textarea.reply, textarea.livre {
  width: 100%; font-family: var(--mono); font-size: 12.5px; line-height: 1.65;
  color: var(--ink); background: var(--bg); border: 1.5px solid var(--grid);
  border-radius: 10px; padding: 16px 18px; resize: vertical; box-sizing: border-box;
}
textarea.reply { min-height: 130px; margin-top: 12px; }
textarea.livre { min-height: 55px; margin-top: 10px; }
.reply-copy {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--bg-soft); border: 1.5px solid var(--g300);
  border-radius: 8px; padding: 6px 14px; cursor: pointer; margin-top: 12px; transition: all 120ms;
}
.reply-copy:hover { border-color: var(--accent); color: var(--accent-d); }
.reply-copy.copied { background: var(--ok); border-color: var(--ok); color: var(--bg-card); }
.reply-note { font-family: var(--mono); font-size: 11.5px; color: var(--ink-muted); margin-top: 10px; }