:root {
  color-scheme: dark;
  --bg: #06090b;
  --bg-soft: #0a1013;
  --surface: rgba(12, 18, 22, .88);
  --surface-2: rgba(18, 27, 32, .92);
  --surface-3: #17232a;
  --line: rgba(113, 232, 255, .13);
  --line-strong: rgba(113, 232, 255, .28);
  --text: #eef7fa;
  --muted: #8ea6ad;
  --dim: #5e737b;
  --orange: #fd8043;
  --blue: #37d5ff;
  --cream: #fffadb;
  --success: #35e29a;
  --warning: #f6bd43;
  --danger: #ff5f57;
  --magenta: #d96cff;
  --glow-blue: 0 0 0 1px rgba(55, 213, 255, .14), 0 18px 56px rgba(0, 0, 0, .38);
  --glow-orange: 0 0 0 1px rgba(253, 128, 67, .18), 0 18px 48px rgba(0, 0, 0, .34);
  --radius: 8px;
  --shadow: 0 18px 54px rgba(0, 0, 0, .38);
  --sidebar: 240px;
  font-family: "Aptos", "Segoe UI", system-ui, sans-serif;
  --font-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", ui-monospace, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(55, 213, 255, .06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(55, 213, 255, .035) 1px, transparent 1px),
    linear-gradient(135deg, rgba(253, 128, 67, .055), transparent 32%),
    linear-gradient(180deg, #061014 0%, #06090b 42%, #040607 100%),
    var(--bg);
  background-size: 48px 48px, 48px 48px, auto, auto;
  color: var(--text);
  font-size: 14px;
  letter-spacing: 0;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent 0, rgba(55, 213, 255, .08) 50%, transparent 100%);
  opacity: .05;
  mask-image: repeating-linear-gradient(180deg, #000 0 1px, transparent 1px 7px);
}

button,
input,
select {
  font: inherit;
}

button {
  touch-action: manipulation;
}

.nav-item svg,
.icon-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

svg text {
  stroke: none;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  padding: 18px 14px;
  background: rgba(10, 16, 19, .9);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.brand-logo {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--orange), #c44a18);
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}

.brand-name {
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 14px;
  color: var(--text);
}

.brand-tag {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--dim);
  text-transform: uppercase;
  margin-top: 2px;
}

.nav-section {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--dim);
  text-transform: uppercase;
  padding: 12px 10px 6px;
  font-weight: 600;
}
.nav-section.nav-section-drilldown {
  margin-top: 12px;
  border-top: 1px dashed var(--line);
  padding-top: 14px;
  opacity: 0.7;
}
.nav-item.nav-item-drill {
  font-size: 12px;
  color: var(--muted);
  padding-left: 14px;
}
.nav-item.nav-item-drill:hover { color: var(--blue); }
.drill-mark { color: var(--dim); margin-right: 4px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all .15s;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
}

.nav-item:hover {
  background: rgba(55, 213, 255, .05);
  color: var(--text);
}

.nav-item.is-active {
  background: rgba(253, 128, 67, .1);
  color: var(--orange);
  border-left: 2px solid var(--orange);
  padding-left: 8px;
}

.nav-item.sub {
  padding-left: 32px;
  font-size: 12px;
}

.nav-item.sub.is-active {
  padding-left: 30px;
}

.nav-item .ico {
  width: 16px;
  height: 16px;
  opacity: .85;
  flex-shrink: 0;
}

.nav-badge {
  margin-left: auto;
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  min-width: 18px;
  text-align: center;
}
.nav-badge.nav-badge-warn {
  background: var(--warning);
  color: #06090b;
}
.nav-badge.nav-badge-soft {
  background: rgba(150, 160, 170, .14);
  color: var(--dim);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  text-transform: uppercase;
}

.kpi-tile-link { transition: background .15s, transform .15s; }
.kpi-tile-link:hover { background: rgba(55,213,255,.05); transform: translateY(-1px); }


.eyebrow,
.section-note,
.meta-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}


.app-shell {
  margin-left: var(--sidebar);
  padding: 24px 28px 56px;
  min-width: 0;
  max-width: 1680px;
}

.page-view {
  display: none;
}

.page-view.is-active {
  display: block;
}

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

.executive-brief h2,
.panel h2,
.section-heading h2,
.dialog-head h2 {
  margin: 0;
  letter-spacing: 0;
}

.breadcrumb {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--dim);
  text-transform: uppercase;
}

.page-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 4px 0 0;
}

.timestamp {
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-3);
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--line);
}

.mono {
  font-family: var(--font-mono);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.source-badge,
.impact-chip,
.risk-chip,
.autonomy-badge,
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid var(--line);
  white-space: nowrap;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.status-badge.ok {
  color: var(--success);
  background: rgba(53, 226, 154, .1);
  border-color: rgba(53, 226, 154, .28);
}

.status-badge.warn {
  color: var(--warning);
  background: rgba(246, 189, 67, .1);
  border-color: rgba(246, 189, 67, .28);
}

.status-badge.risk {
  color: var(--danger);
  background: rgba(255, 95, 87, .1);
  border-color: rgba(255, 95, 87, .28);
}

.status-badge.neutral {
  color: var(--muted);
  background: rgba(142, 166, 173, .08);
  border-color: rgba(142, 166, 173, .2);
}

.source-real {
  color: var(--success);
  background: rgba(53, 208, 127, .1);
  border-color: rgba(53, 208, 127, .25);
}

.source-ai {
  color: var(--blue);
  background: rgba(55, 184, 247, .1);
  border-color: rgba(55, 184, 247, .25);
}

.source-estimate {
  color: var(--warning);
  background: rgba(246, 189, 67, .1);
  border-color: rgba(246, 189, 67, .25);
}

.source-benchmark {
  color: var(--magenta);
  background: rgba(217, 108, 255, .08);
  border-color: rgba(217, 108, 255, .25);
}

.source-demo {
  color: var(--dim);
  background: rgba(150, 160, 170, .08);
  border-color: rgba(150, 160, 170, .2);
}

.icon-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: rgba(12, 18, 22, .92);
  color: var(--text);
  border-radius: 7px;
  cursor: pointer;
}

.icon-button:hover {
  border-color: var(--line-strong);
  background: rgba(55, 213, 255, .12);
  color: var(--blue);
}

.executive-brief {
  display: grid;
  grid-template-columns: minmax(300px, 1.35fr) minmax(360px, 1fr);
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(135deg, rgba(55, 213, 255, .12), transparent 30%),
    linear-gradient(225deg, rgba(253, 128, 67, .1), transparent 38%),
    rgba(9, 16, 20, .9);
  border-radius: var(--radius);
  box-shadow: var(--glow-blue);
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}

.executive-brief::after,
.analytics-title-card::after,
.data-panel::after,
.panel::after,
.decision-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 28%);
  opacity: .42;
}

.executive-brief > *,
.analytics-title-card > *,
.data-panel > *,
.panel > *,
.decision-card > * {
  position: relative;
  z-index: 1;
}

.brief-copy h2 {
  max-width: 920px;
  font-size: clamp(26px, 3.3vw, 48px);
  line-height: 1.02;
  max-width: 980px;
}

.brief-copy p:not(.eyebrow) {
  max-width: 780px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.closing-evidence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 920px;
  margin-top: 18px;
}

.closing-evidence:empty {
  display: none;
}

.closing-evidence div {
  min-width: 0;
  border: 1px solid rgba(113, 232, 255, .14);
  border-radius: 7px;
  padding: 10px;
  background: rgba(2, 8, 11, .54);
}

.closing-evidence span {
  display: block;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.closing-evidence strong {
  display: block;
  margin-top: 6px;
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.35;
}

.brief-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.metric-card,
.panel,
.decision-card,
.module-card,
.autonomy-card,
.audit-item {
  background: linear-gradient(180deg, rgba(18, 29, 35, .92), rgba(9, 14, 18, .92));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .18);
}

.metric-card {
  padding: 14px;
  border-top: 1px solid var(--line-strong);
}

.metric-link {
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
}

.metric-link:hover {
  color: #73ddff;
}

.metric-card-primary {
  border-color: rgba(253, 128, 67, .32);
  background:
    linear-gradient(135deg, rgba(253, 128, 67, .1), transparent 46%),
    linear-gradient(180deg, rgba(18, 29, 35, .96), rgba(9, 14, 18, .94));
}

.metric-value {
  margin-top: 8px;
  color: var(--text);
  font-size: 24px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  color: #f6fbff;
}

.metric-detail {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.decision-hint {
  margin-top: 10px;
  border-top: 1px solid rgba(113, 232, 255, .1);
  padding-top: 8px;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  line-height: 1.35;
}

.metric-comparisons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.metric-comparisons div {
  min-width: 0;
  border: 1px solid rgba(113, 232, 255, .12);
  border-radius: 6px;
  padding: 7px;
  background: rgba(2, 8, 11, .48);
}

.metric-comparisons span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.metric-comparisons strong {
  display: block;
  margin-top: 3px;
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(310px, .75fr);
  gap: 18px;
  margin-bottom: 24px;
}

.morning-cockpit-section {
  margin-bottom: 18px;
}

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

.cockpit-card {
  grid-column: span 4;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(15, 24, 29, .94), rgba(8, 13, 16, .92));
  padding: 16px;
  position: relative;
  overflow: hidden;
  min-height: 188px;
}

.cockpit-card::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(113, 232, 255, .26), rgba(113, 232, 255, 0));
}

.cockpit-card.lead {
  background: linear-gradient(180deg, rgba(10, 25, 31, .98), rgba(8, 14, 18, .94));
  box-shadow: inset 0 0 0 1px rgba(113, 232, 255, .08), 0 14px 40px rgba(0, 0, 0, .18);
}

.cockpit-card.compare {
  background: linear-gradient(180deg, rgba(13, 22, 27, .96), rgba(8, 13, 16, .92));
}

.cockpit-card.wide {
  grid-column: span 6;
}

.cockpit-card.ok {
  border-color: rgba(53, 226, 154, .24);
}

.cockpit-card.warn {
  border-color: rgba(246, 189, 67, .24);
}

.cockpit-card.risk {
  border-color: rgba(255, 95, 87, .24);
}

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

.cockpit-chip {
  flex-shrink: 0;
}

.cockpit-card > strong {
  display: block;
  margin: 10px 0 6px;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: 0;
}

.cockpit-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.cockpit-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(113, 232, 255, .08);
}

.cockpit-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
}

.cockpit-list strong {
  color: var(--cream);
  font-size: 12px;
  text-align: right;
}

.cockpit-card.lead > strong,
.cockpit-card.wide > strong {
  font-size: 28px;
}

.panel {
  padding: 18px;
  box-shadow: var(--glow-blue);
}

.panel-header,
.section-heading,
.dialog-head,
.decision-head,
.module-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.text-button {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.text-button:hover {
  color: var(--orange);
}

.diagnostic-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.diagnostic-item {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(6, 12, 15, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.diagnostic-item strong {
  display: block;
  margin: 8px 0;
}

.diagnostic-item p {
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
  font-size: 12px;
}

.purpose-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--text);
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, .035);
}

.purpose-icon svg {
  width: 17px;
  height: 17px;
}

.action-panel p {
  color: var(--muted);
  line-height: 1.55;
}

.impact-chip {
  color: var(--orange);
  background: rgba(253, 128, 67, .1);
  border-color: rgba(253, 128, 67, .25);
}

.risk-chip {
  color: var(--danger);
  background: rgba(255, 95, 87, .1);
  border-color: rgba(255, 95, 87, .25);
}

.approval-bar {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.primary-button,
.secondary-button {
  border-radius: 7px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.primary-button {
  background: linear-gradient(135deg, var(--orange), #ffab62);
  color: #190f09;
  border-color: var(--orange);
  box-shadow: 0 0 0 1px rgba(253, 128, 67, .18), 0 10px 24px rgba(253, 128, 67, .12);
}

.secondary-button {
  color: var(--text);
  background: rgba(55, 213, 255, .08);
  border-color: var(--line-strong);
}

.primary-button:hover,
.secondary-button:hover {
  filter: brightness(1.08);
}

.section-block {
  margin-top: 28px;
}

.section-heading {
  align-items: end;
  margin-bottom: 14px;
}

.section-heading h2 {
  font-size: 22px;
}

.decision-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.focus-filter-section {
  margin-top: 18px;
}

.change-section {
  margin-top: 18px;
}

.change-grid,
.focus-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.change-card,
.focus-filter-card {
  border: 1px solid rgba(246, 189, 67, .18);
  border-radius: var(--radius);
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(246, 189, 67, .07), transparent 54%),
    rgba(6, 12, 15, .7);
}

.change-card.ok {
  border-color: rgba(53, 226, 154, .22);
  background:
    linear-gradient(135deg, rgba(53, 226, 154, .07), transparent 54%),
    rgba(6, 12, 15, .7);
}

.change-card.risk {
  border-color: rgba(255, 95, 87, .24);
  background:
    linear-gradient(135deg, rgba(255, 95, 87, .075), transparent 54%),
    rgba(6, 12, 15, .7);
}

.change-card.warn {
  border-color: rgba(246, 189, 67, .24);
}

.change-card strong,
.focus-filter-card strong {
  display: block;
  margin: 8px 0;
}

.change-card p,
.focus-filter-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 12px;
}

.decision-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 318px;
}

.decision-card[data-priority="critical"] {
  border-color: rgba(255, 95, 87, .46);
  box-shadow: 0 0 0 1px rgba(255, 95, 87, .1), 0 14px 42px rgba(0, 0, 0, .28);
}

.decision-card h3,
.module-card h3,
.autonomy-card h3 {
  margin: 0;
  font-size: 16px;
}

.decision-card p {
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.queue-reason {
  border: 1px solid rgba(113, 232, 255, .12);
  border-radius: 7px;
  padding: 10px;
  background: rgba(6, 12, 15, .62);
}

.queue-reason span {
  display: inline-block;
  margin-bottom: 5px;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.queue-reason p {
  font-size: 12px;
}

.decision-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}

.meta-box {
  border: 1px solid var(--line);
  background: rgba(3, 9, 12, .68);
  border-radius: 7px;
  padding: 10px;
}

.meta-box strong {
  display: block;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.autonomy-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.autonomy-card {
  padding: 14px;
  min-height: 154px;
}

.autonomy-card.is-current {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(55, 213, 255, .22), 0 0 22px rgba(55, 213, 255, .06);
}

.autonomy-badge {
  margin-bottom: 12px;
  color: var(--blue);
  background: rgba(55, 184, 247, .1);
  border-color: rgba(55, 184, 247, .25);
}

.autonomy-card p {
  color: var(--muted);
  line-height: 1.42;
  margin: 8px 0 0;
  font-size: 12px;
}

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

.module-card {
  padding: 18px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.module-card:hover,
.decision-card:hover,
.metric-card:hover,
.data-panel:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  box-shadow: var(--glow-blue);
}

.module-card p {
  color: var(--muted);
  line-height: 1.5;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 14px;
}

.module-chip {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
}

.module-outcome {
  margin-top: auto;
  padding: 12px;
  border: 1px solid rgba(55, 184, 247, .24);
  border-radius: var(--radius);
  color: var(--cream);
  background: rgba(55, 213, 255, .08);
  font-weight: 800;
  line-height: 1.35;
}

.audit-timeline {
  display: grid;
  gap: 10px;
}

.audit-item {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
}

.audit-time {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.audit-item strong {
  display: block;
  margin-bottom: 3px;
}

.audit-item p {
  color: var(--muted);
  margin: 0;
}

.analytics-page {
  display: none;
}

.analytics-page.is-active {
  display: block;
}

.analytics-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(310px, .65fr);
  gap: 18px;
  margin-bottom: 18px;
}

.analytics-title-card {
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(55, 213, 255, .12), transparent 38%),
    rgba(9, 16, 20, .9);
  border-radius: var(--radius);
  padding: 22px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--glow-blue);
}

.analytics-title-card h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.04;
}

.analytics-title-card p {
  max-width: 820px;
  color: var(--muted);
  line-height: 1.55;
}

.analytics-action-card {
  border: 1px solid rgba(253, 128, 67, .3);
  background: linear-gradient(180deg, rgba(253, 128, 67, .13), rgba(12, 18, 22, .88));
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--glow-orange);
}

.analytics-action-card h3 {
  margin: 8px 0;
  font-size: 18px;
}

.analytics-action-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.analytics-grid.compact {
  grid-template-columns: repeat(3, 1fr);
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.board-analytics .chart-grid {
  margin-bottom: 12px;
}

.board-source-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.board-source-card p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.chart-panel {
  min-height: 260px;
}

.chart-body {
  margin-top: 16px;
}

.data-panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(15, 24, 29, .92), rgba(8, 13, 16, .92));
  border-radius: var(--radius);
  padding: 16px;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.data-panel h3 {
  margin: 0;
  font-size: 16px;
}

.panel-sub {
  color: var(--muted);
  margin: 4px 0 14px;
  font-size: 12px;
}

.data-state-panel {
  margin-bottom: 18px;
}

.data-state-panel[data-state="loading"] {
  border-color: rgba(142, 166, 173, .24);
}

.data-state-panel[data-state="empty"] {
  border-color: rgba(246, 189, 67, .24);
}

.data-state-panel[data-state="error"] {
  border-color: rgba(255, 95, 87, .28);
}

.data-state-panel.compact {
  margin-top: 16px;
  margin-bottom: 0;
}

.state-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.data-state-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr);
  gap: 14px;
  align-items: start;
}

.state-note {
  border: 1px dashed rgba(113, 232, 255, .14);
  border-radius: 7px;
  background: rgba(6, 12, 15, .48);
  padding: 12px;
}

.state-note p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.skeleton-grid {
  margin-bottom: 18px;
}

.skeleton-card {
  min-height: 112px;
  border-color: rgba(113, 232, 255, .1);
  background:
    linear-gradient(90deg, rgba(17, 28, 34, .96), rgba(28, 44, 52, .9), rgba(17, 28, 34, .96));
  background-size: 220% 100%;
  animation: skeleton-shift 1.2s linear infinite;
}

@keyframes skeleton-shift {
  0% { background-position: 200% 0; }
  100% { background-position: -20% 0; }
}

.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 18px;
  margin-bottom: 18px;
}

.drilldown-panel {
  margin-bottom: 18px;
}

.drilldown-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.drilldown-field {
  display: grid;
  gap: 7px;
}

.drilldown-field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(5, 12, 15, .92);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}

.drilldown-field input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(5, 12, 15, .92);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}

.drilldown-field select:focus {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 1px rgba(55, 213, 255, .14);
}

.drilldown-field input:focus {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 1px rgba(55, 213, 255, .14);
}

.drilldown-custom-range {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: -4px 0 14px;
}

.drilldown-summary {
  margin-bottom: 14px;
}

.drilldown-table td,
.drilldown-table th {
  white-space: normal;
}

.data-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: min(720px, 100%);
  table-layout: fixed;
}

.data-table th,
.data-table td {
  padding: 10px 9px;
  border-bottom: 1px solid rgba(113, 232, 255, .09);
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
  word-break: normal;
}

.data-table th {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-family: var(--font-mono);
  background: rgba(55, 213, 255, .035);
}

.data-table td {
  color: var(--text);
  font-size: 13px;
}

.data-table tbody tr:hover td {
  background: rgba(55, 213, 255, .045);
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.num {
  font-variant-numeric: tabular-nums;
}

.td-right {
  text-align: right !important;
}

.bar-list {
  display: grid;
  gap: 11px;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2fr 72px;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.bar-track {
  height: 8px;
  background: rgba(2, 8, 11, .7);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
  color: var(--blue);
  box-shadow: 0 0 18px currentColor;
}

.column-chart {
  height: 180px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
  gap: 10px;
  align-items: end;
}

.column-item {
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 6px;
  align-items: end;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
}

.column-track {
  height: 126px;
  display: flex;
  align-items: end;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(2, 8, 11, .7);
  overflow: hidden;
}

.column-fill {
  width: 100%;
  min-height: 3px;
  border-radius: 4px;
  box-shadow: 0 0 18px currentColor;
}

.column-item strong {
  color: var(--text);
  font-size: 12px;
}

.donut-layout {
  display: grid;
  grid-template-columns: 136px 1fr;
  gap: 16px;
  align-items: center;
}

.donut {
  width: 136px;
  height: 136px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 34px rgba(55, 213, 255, .1);
}

.donut > .donut-center {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background: #071014;
  border: 1px solid var(--line);
  position: static;
  inset: auto;
}

.donut > .donut-center strong {
  font-family: var(--font-mono);
  font-size: 19px;
}

.donut > .donut-center span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.donut-layout .donut-legend {
  display: grid;
  gap: 8px;
  margin-top: 0;
}

.donut-layout .donut-legend div {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.donut-layout .donut-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.donut-layout .donut-legend strong {
  color: var(--text);
  font-family: var(--font-mono);
}

.status-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--muted);
}

.status-dot.ok {
  background: var(--success);
}

.status-dot.warn {
  background: var(--warning);
}

.status-dot.risk {
  background: var(--danger);
}

.mini-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.mini-card {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(6, 12, 15, .68);
  padding: 12px;
}

.mini-card strong {
  display: block;
  margin-top: 5px;
  font-size: 20px;
}

.n2-plan-panel {
  border-color: rgba(253, 128, 67, .26);
}

.n2-plan-panel.risk {
  border-color: rgba(255, 95, 87, .38);
  box-shadow: 0 0 0 1px rgba(255, 95, 87, .08), var(--shadow);
}

.n2-plan-panel.warn {
  border-color: rgba(246, 189, 67, .35);
}

.n2-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.n2-step {
  position: relative;
  min-height: 210px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(3, 9, 12, .72);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step-index {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #160f08;
  background: var(--orange);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 900;
}

.n2-step strong {
  font-size: 15px;
  line-height: 1.32;
}

.n2-step p,
.n2-step small,
.guardrail-card p {
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.n2-step small {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.step-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.step-meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--cream);
  background: rgba(55, 213, 255, .05);
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.guardrail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.guardrail-card {
  border: 1px solid rgba(113, 232, 255, .12);
  border-radius: 7px;
  padding: 11px;
  background: rgba(55, 213, 255, .035);
}

.goal-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
  gap: 18px;
  margin-bottom: 18px;
}

.goal-source-panel {
  margin-bottom: 18px;
  border-color: rgba(55, 213, 255, .2);
}

.goal-source-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

.goal-source-form {
  display: grid;
  gap: 12px;
}

.goal-source-fields {
  margin-top: 0;
}

.planner-field-wide {
  grid-column: span 2;
}

.planner-select-wrap {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(3, 9, 12, .72);
  overflow: hidden;
}

.planner-select-wrap select {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  padding: 10px 11px;
  font-family: var(--font-mono);
  font-weight: 850;
}

.planner-select-wrap:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px rgba(55, 213, 255, .18);
}

.goal-source-actions {
  justify-content: flex-start;
}

.goal-sync-card {
  display: grid;
  gap: 8px;
  min-height: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(6, 12, 15, .66);
  padding: 14px;
}

.goal-sync-card strong {
  font-size: 18px;
  line-height: 1.35;
}

.goal-sync-card p,
.goal-sync-card small {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.goal-sync-card.ok {
  border-color: rgba(53, 226, 154, .28);
  box-shadow: 0 0 0 1px rgba(53, 226, 154, .08);
}

.goal-sync-card.risk {
  border-color: rgba(255, 95, 87, .34);
  box-shadow: 0 0 0 1px rgba(255, 95, 87, .08);
}

.planner-panel {
  border-color: rgba(55, 213, 255, .22);
}

.plan-status-cluster,
.plan-version-strip,
.planner-version-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.plan-status-cluster {
  justify-content: flex-end;
}

.plan-version-strip {
  margin: 14px 0 2px;
}

.plan-version-strip span,
.planner-version-row span,
.plan-state {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(6, 12, 15, .72);
  color: var(--muted);
  padding: 6px 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.planner-version-row {
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.planner-version-row span {
  border-radius: 7px;
}

.plan-state.ok,
.plan-version-strip.ok span:first-child {
  border-color: rgba(53, 226, 154, .36);
  color: var(--success);
  background: rgba(53, 226, 154, .1);
}

.plan-state.warn,
.plan-version-strip.warn span:first-child {
  border-color: rgba(246, 189, 67, .36);
  color: var(--warning);
  background: rgba(246, 189, 67, .1);
}

.plan-state.risk,
.plan-version-strip.risk span:first-child {
  border-color: rgba(255, 95, 87, .4);
  color: var(--danger);
  background: rgba(255, 95, 87, .1);
}

.planner-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.planner-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.planner-input-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(3, 9, 12, .72);
  overflow: hidden;
}

.planner-input-wrap input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  padding: 10px 11px;
  font-family: var(--font-mono);
  font-weight: 850;
}

.planner-input-wrap em {
  color: var(--dim);
  font-style: normal;
  padding-right: 10px;
}

.planner-input-wrap:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px rgba(55, 213, 255, .18);
}

.planner-divider {
  height: 1px;
  background: var(--line);
  margin: 18px 0 14px;
}

.feasibility-card.ok {
  border-color: rgba(53, 226, 154, .34);
  background: linear-gradient(180deg, rgba(53, 226, 154, .12), rgba(12, 18, 22, .88));
}

.feasibility-card.warn {
  border-color: rgba(246, 189, 67, .34);
  background: linear-gradient(180deg, rgba(246, 189, 67, .13), rgba(12, 18, 22, .88));
}

.feasibility-card.risk {
  border-color: rgba(255, 95, 87, .38);
  background: linear-gradient(180deg, rgba(255, 95, 87, .13), rgba(12, 18, 22, .88));
}

.feasibility-meter {
  display: grid;
  gap: 10px;
  margin: 14px 0 16px;
}

.meter-track {
  height: 12px;
  border: 1px solid var(--line);
  background: rgba(2, 8, 11, .8);
  border-radius: 999px;
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--success);
  box-shadow: 0 0 22px currentColor;
}

.feasibility-meter.warn .meter-fill {
  background: var(--warning);
}

.feasibility-meter.risk .meter-fill {
  background: var(--danger);
}

.state-explainer {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px;
  margin: 0 0 14px;
  background: rgba(6, 12, 15, .64);
}

.state-explainer strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.state-explainer p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.state-explainer.ok {
  border-color: rgba(53, 226, 154, .28);
  background: rgba(53, 226, 154, .065);
}

.state-explainer.ok strong {
  color: var(--success);
}

.state-explainer.warn {
  border-color: rgba(246, 189, 67, .28);
  background: rgba(246, 189, 67, .065);
}

.state-explainer.warn strong {
  color: var(--warning);
}

.state-explainer.risk {
  border-color: rgba(255, 95, 87, .32);
  background: rgba(255, 95, 87, .065);
}

.state-explainer.risk strong {
  color: var(--danger);
}

.rhythm-panel.ahead {
  border-color: rgba(53, 226, 154, .28);
}

.rhythm-panel.recover {
  border-color: rgba(246, 189, 67, .28);
}

.rhythm-panel.risk {
  border-color: rgba(255, 95, 87, .32);
}

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

.rhythm-card {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 13px;
  background: rgba(6, 12, 15, .68);
  min-height: 118px;
}

.rhythm-card strong {
  display: block;
  margin: 7px 0;
  font-size: 24px;
  letter-spacing: 0;
}

.rhythm-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
  font-size: 12px;
}

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

.channel-target-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px;
  background: rgba(55, 213, 255, .035);
}

.channel-target-card strong {
  display: block;
  margin-top: 6px;
  font-size: 20px;
}

.channel-target-card p,
.channel-target-card small {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.channel-target-card div:last-child {
  display: grid;
  justify-items: end;
  text-align: right;
}

.channel-target-card div:last-child span {
  border: 1px solid rgba(55, 213, 255, .24);
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 850;
}

.empty-history {
  border: 1px dashed var(--line);
  border-radius: 7px;
  padding: 16px;
  background: rgba(6, 12, 15, .5);
}

.empty-history p {
  margin: 6px 0 0;
  color: var(--muted);
}

.goal-history-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.goal-history-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px;
  background: rgba(6, 12, 15, .66);
}

.goal-history-card strong {
  display: block;
  margin: 5px 0;
  font-size: 20px;
}

.goal-history-card p,
.goal-history-card small {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.goal-history-card div:last-child {
  display: grid;
  gap: 5px;
  justify-items: end;
  text-align: right;
}

.mini-action {
  min-height: 30px;
  padding: 7px 10px;
  font-size: 11px;
}

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

.kpi-map-card {
  min-height: 128px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(6, 12, 15, .68);
  padding: 13px;
}

.kpi-map-card strong {
  display: block;
  margin-bottom: 8px;
}

.kpi-map-card p {
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
  font-size: 12px;
}

.funnel {
  display: grid;
  gap: 9px;
}

.funnel-step {
  display: grid;
  grid-template-columns: 140px 1fr 72px;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.heatmap {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.heat-cell {
  min-height: 62px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: rgba(6, 12, 15, .68);
}

.heat-cell strong {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
}

.heat-cell span {
  color: var(--muted);
  font-size: 11px;
}

.heat-1 {
  background: rgba(55, 184, 247, .08);
}

.heat-2 {
  background: rgba(53, 208, 127, .11);
}

.heat-3 {
  background: rgba(253, 128, 67, .14);
  border-color: rgba(253, 128, 67, .35);
}

.insight-stack {
  display: grid;
  gap: 10px;
}

.insight {
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  background: rgba(6, 12, 15, .72);
  border-radius: 7px;
  padding: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.insight.risk {
  border-left-color: var(--danger);
}

.insight.ok {
  border-left-color: var(--success);
}

.insight.warn {
  border-left-color: var(--warning);
}

.insight strong {
  display: block;
  color: var(--text);
  margin-bottom: 3px;
}

.rules-grid {
  display: grid;
  gap: 10px;
}

.module-flow {
  margin: 18px 0;
}

.module-flow-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.module-flow-card {
  border: 1px solid rgba(113, 232, 255, .12);
  border-radius: 7px;
  padding: 12px;
  background: rgba(6, 12, 15, .68);
  min-height: 156px;
}

.module-flow-card strong {
  display: block;
  margin: 10px 0 6px;
}

.module-flow-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.42;
  font-size: 12px;
}

.rule-card {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px;
  background: rgba(6, 12, 15, .72);
}

.rule-card strong {
  display: block;
  margin: 6px 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}

.rule-card small {
  color: var(--muted);
  line-height: 1.45;
}

.evidence-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  background: rgba(9, 16, 20, .98);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0;
}

.evidence-dialog::backdrop {
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(3px);
}

.dialog-head {
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

#dialog-body {
  padding: 18px;
}

.evidence-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.evidence-list li {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px;
  color: var(--muted);
  line-height: 1.5;
  background: rgba(55, 213, 255, .035);
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  color: #031014;
  background: linear-gradient(135deg, var(--blue), var(--cream));
  border-radius: 7px;
  padding: 12px 14px;
  font-weight: 900;
  box-shadow: var(--shadow);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 20;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .topbar,
  .panel-header,
  .section-heading,
  .decision-head,
  .module-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .topbar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .approval-bar > * {
    flex: 1 1 220px;
  }

  .executive-brief,
  .board-grid,
  .analytics-hero,
  .split-grid,
  .data-state-grid,
  .goal-source-grid,
  .goal-command-grid {
    grid-template-columns: 1fr;
  }

  .decision-grid,
  .change-grid,
  .focus-filter-grid,
  .diagnostic-list,
  .closing-evidence {
    grid-template-columns: 1fr;
  }

  .module-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .autonomy-track {
    grid-template-columns: repeat(3, 1fr);
  }

  .analytics-grid,
  .analytics-grid.compact,
  .chart-grid,
  .board-source-grid,
  .morning-cockpit-grid,
  .goal-source-fields,
  .drilldown-filter-grid,
  .drilldown-custom-range,
  .kpi-map-grid,
  .rhythm-grid,
  .channel-target-grid,
  .module-flow-grid,
  .n2-plan-grid,
  .guardrail-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cockpit-card,
  .cockpit-card.compare {
    grid-column: span 1;
    min-height: 176px;
  }

  .cockpit-card.lead,
  .cockpit-card.wide {
    grid-column: span 2;
  }
}

@media (max-width: 840px) {
  :root {
    --sidebar: 0px;
  }

  .sidebar {
    position: static;
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .app-shell {
    margin-left: 0;
    padding: 18px;
  }

  .topbar h1 {
    font-size: 22px;
  }

  .module-grid,
  .autonomy-track,
  .brief-grid,
  .analytics-grid,
  .analytics-grid.compact,
  .chart-grid,
  .board-source-grid,
  .morning-cockpit-grid,
  .mini-card-grid,
  .goal-source-grid,
  .goal-source-fields,
  .drilldown-filter-grid,
  .drilldown-custom-range,
  .planner-grid,
  .kpi-map-grid,
  .rhythm-grid,
  .channel-target-grid,
  .module-flow-grid,
  .goal-history-card,
  .n2-plan-grid,
  .guardrail-grid {
    grid-template-columns: 1fr;
  }

  .cockpit-card,
  .cockpit-card.compare,
  .cockpit-card.lead,
  .cockpit-card.wide {
    grid-column: span 1;
    min-height: auto;
  }

  .state-badges {
    justify-content: flex-start;
  }

  .decision-meta {
    grid-template-columns: 1fr;
  }

  .approval-bar {
    flex-direction: column;
  }

  .approval-bar > * {
    width: 100%;
  }

  .planner-field-wide {
    grid-column: span 1;
  }

  .audit-item {
    grid-template-columns: 1fr;
  }

  .funnel-step,
  .bar-row {
    grid-template-columns: 1fr;
  }

  .heatmap {
    grid-template-columns: repeat(2, 1fr);
  }

  .donut-layout {
    grid-template-columns: 1fr;
  }

  .metric-comparisons {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ── Board v5 — legado (Lojas / CRM) ─────────────────────────────────── */
/* Plain-named classes (.brief, .card, .comp-grid, .spark-svg, .donut-svg, etc.)
   foram REMOVIDOS desta seção em 2026-05-06: o board usa V6/mockup logo abaixo.
   Mantemos aqui apenas as classes -v5 / .bkpi-* / .comp-card / .gauge-nps-* /
   .grid-v5-* que ainda são consumidas pelas páginas Lojas e CRM. */

.board-v5 { padding: 0 0 4rem; }

/* Executive brief (v5 — usado em Lojas/CRM) */
.brief-v5 {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--line) 180%, transparent);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}

.brief-v5::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--orange), #d96cff);
}

.brief-eyebrow-v5 {
  font-size: .7rem;
  letter-spacing: .14em;
  color: var(--orange);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: .5rem;
}

.brief-headline-v5 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.4;
  margin-bottom: .875rem;
  max-width: 860px;
}

.brief-headline-v5 strong { color: var(--text); font-weight: 600; }
.brief-headline-v5 .hl-danger { color: #ff5f57; }
.brief-headline-v5 .hl-success { color: var(--success); }

.brief-kpis-v5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  padding-top: .875rem;
  border-top: 1px solid var(--line);
}

.bkpi-label { font-size: .68rem; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; margin-bottom: .35rem; }
.bkpi-value { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.bkpi-delta { font-size: .72rem; margin-top: .25rem; }
.bkpi-delta.up { color: var(--success); }
.bkpi-delta.down { color: #ff5f57; }
.bkpi-delta.flat { color: var(--muted); }

/* Comparativos wrapper (v5 — usado em Lojas) */
.comp-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem .875rem;
  margin-bottom: 1rem;
}

.comp-card .card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .875rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
}

/* Gauge NPS (v5 — nome distinto, sem conflito com V6) */
.gauge-nps-wrap { position: relative; padding-top: 4px; }
.gauge-nps-svg { width: 100%; height: 80px; display: block; }
.gauge-nps-readout { text-align: center; margin-top: -18px; }
.gauge-nps-readout .v { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; }
.gauge-nps-readout .l { font-size: .68rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }

/* Decision cards v5 (Lojas/CRM) */
.decision-list-v5 { display: flex; flex-direction: column; gap: 10px; }

.decision-v5 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  padding: 1rem 1.125rem;
  transition: border-color .2s;
}

.decision-v5.priority { border-left-color: var(--orange); }
.decision-v5.danger   { border-left-color: #ff5f57; }

.decision-meta-v5 { display: flex; gap: 6px; flex-wrap: wrap; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }

/* Modificadores extras de .autonomy-pill usados pelas decisões v5
   (a regra base de .autonomy-pill vive na seção V6 abaixo). */
.autonomy-pill.confidence { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }
.autonomy-pill.risk { color: #f6bd43; background: color-mix(in srgb, #f6bd43 10%, transparent); }
.autonomy-pill.urgent { color: #ff5f57; background: color-mix(in srgb, #ff5f57 10%, transparent); }

.decision-title-v5 { font-size: .9rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; margin-bottom: .4rem; }
.decision-why-v5 { color: var(--muted); font-size: .8rem; line-height: 1.55; margin-bottom: .75rem; }

.decision-evidence-v5 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: .75rem;
}

.decision-actions-v5 { display: flex; gap: 6px; flex-wrap: wrap; }

.btn-v5 {
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  transition: all .15s;
}

.btn-v5:hover { color: var(--text); border-color: color-mix(in srgb, var(--line) 180%, transparent); }
.btn-v5-primary { background: var(--orange); color: #0c0c0c; border-color: var(--orange); }
.btn-v5-primary:hover { background: #ff9659; }
.btn-v5-evidence { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 25%, transparent); padding: 2px 7px; font-size: .72rem; }
.btn-v5-evidence:hover { background: color-mix(in srgb, var(--blue) 8%, transparent); }

/* Delta timeline (v5 — usado em Lojas) */
.delta-list-v5 { display: flex; flex-direction: column; }

.delta-row-v5 {
  display: grid;
  grid-template-columns: 24px 1fr 66px 56px;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--blue) 7%, transparent);
}

.delta-row-v5:last-child { border-bottom: 0; }

.delta-arrow-v5 {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 5px;
  font-size: .875rem;
  font-weight: 700;
}

.delta-arrow-v5.up   { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.delta-arrow-v5.down { background: color-mix(in srgb, #ff5f57 12%, transparent); color: #ff5f57; }
.delta-arrow-v5.warn { background: color-mix(in srgb, #f6bd43 12%, transparent); color: #f6bd43; }
.delta-arrow-v5.muted { background: color-mix(in srgb, var(--muted) 10%, transparent); color: var(--muted); }

.delta-label-v5 { font-size: .8rem; color: var(--text); line-height: 1.3; }
.delta-spark-v5 { width: 100%; height: 20px; }
.delta-val-v5 { font-size: .78rem; font-weight: 600; text-align: right; }

/* Grid helpers (v5 — usados em Lojas/CRM) */
.grid-v5-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.grid-v5-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }

@media (max-width: 960px) {
  .brief-kpis-v5 { grid-template-columns: repeat(3, 1fr); }
  .grid-v5-3 { grid-template-columns: 1fr; }
  .grid-v5-2 { grid-template-columns: 1fr; }
  .decision-evidence-v5 { grid-template-columns: 1fr 1fr; }
  .lojas-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 680px) {
  .lojas-grid { grid-template-columns: 1fr !important; }
}

/* ── Planejamento de Meta ────────────────────────────────────────── */
.planejar-page {
  padding: 0 0 4rem;
}

.planejar-alavancas-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.planejar-alavancas-card .panel-header {
  margin-bottom: 1rem;
}

.alavanca-header-row {
  display: grid;
  grid-template-columns: 130px 1fr 90px 100px;
  gap: .75rem;
  padding: 0 0 .5rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: .75rem;
}

.alavanca-header-row span {
  font-size: .7rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.alavanca-row {
  display: grid;
  grid-template-columns: 130px 1fr 90px 100px;
  gap: .75rem;
  align-items: center;
  padding: .5rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
}

.alavanca-row:last-child {
  border-bottom: none;
}

.alavanca-label {
  font-size: .875rem;
  font-weight: 500;
  color: var(--text);
}

.alavanca-label small {
  display: block;
  font-size: .75rem;
  color: var(--muted);
  font-weight: 400;
  margin-top: .1rem;
}

.alavanca-bar-wrap {
  position: relative;
  height: 28px;
  background: color-mix(in srgb, var(--bg) 60%, var(--surface));
  border-radius: 6px;
  overflow: hidden;
}

.alavanca-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width .4s ease;
  background: var(--success);
}

.alavanca-bar-fill.is-alert { background: var(--orange); }
.alavanca-bar-fill.is-warn  { background: #f5c542; }

.alavanca-bar-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
}

.alavanca-vs {
  font-size: .8rem;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

.alavanca-vs.is-up  { color: var(--success); }
.alavanca-vs.is-down { color: var(--orange); }

.alavanca-diag-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 600;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent);
  border-radius: 6px;
  padding: .3rem .5rem;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
  width: 96px;
  height: 28px;
}

.alavanca-diag-btn:hover {
  background: color-mix(in srgb, var(--blue) 22%, transparent);
}

.alavanca-diag-btn.is-open {
  color: var(--orange);
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  border-color: color-mix(in srgb, var(--orange) 25%, transparent);
}

/* Diagnostic panel */
.diag-panel {
  background: color-mix(in srgb, var(--blue) 5%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  animation: slide-down .2s ease;
}

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.diag-head {
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  padding: .75rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.diag-head strong {
  font-size: .875rem;
  color: var(--text);
}

.diag-head span {
  font-size: .75rem;
  color: var(--muted);
}

.diag-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: color-mix(in srgb, var(--line) 50%, transparent);
}

.diag-finding {
  background: var(--surface);
  padding: 1rem 1.25rem;
}

.diag-finding .eyebrow {
  font-size: .7rem;
  margin-bottom: .35rem;
  color: var(--muted);
}

.diag-finding strong {
  display: block;
  font-size: .875rem;
  color: var(--text);
  margin-bottom: .35rem;
}

.diag-finding p {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.diag-action {
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: color-mix(in srgb, var(--success) 5%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
}

.diag-action-copy {
  font-size: .8rem;
  color: var(--text);
  line-height: 1.4;
}

.diag-n2 {
  display: inline-block;
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
  border-radius: 4px;
  padding: .1rem .4rem;
  font-size: .7rem;
  font-weight: 700;
  margin-right: .5rem;
}

/* Canal blocks */
.canal-blocks {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.canal-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.canal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  gap: 1rem;
}

.canal-header-left {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.canal-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.canal-icon.shopee { background: color-mix(in srgb, #f85606 15%, transparent); color: #f85606; }
.canal-icon.ml     { background: color-mix(in srgb, #ffe600 15%, transparent); color: #cdb800; }
.canal-icon.site   { background: color-mix(in srgb, var(--blue) 15%, transparent); color: var(--blue); }
.canal-icon.tiktok { background: color-mix(in srgb, #ff004f 12%, transparent); color: #ff004f; }

.canal-name {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
}

.canal-meta {
  font-size: .75rem;
  color: var(--muted);
  margin-top: .1rem;
}

.canal-receita-badge {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 60%, var(--surface));
  border-radius: 8px;
  padding: .4rem .75rem;
  white-space: nowrap;
}

.subcanal-sep {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem 1.25rem;
  background: color-mix(in srgb, var(--blue) 5%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

.subcanal-sep.shopee-lp {
  background: color-mix(in srgb, #f85606 5%, var(--surface));
}

.subcanal-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--blue);
  text-transform: uppercase;
}

.subcanal-sep.shopee-lp     .subcanal-label { color: #f85606; }
.subcanal-sep.shopee-l2     .subcanal-label { color: color-mix(in srgb, #f85606 60%, var(--muted)); }
.subcanal-sep.ml-premium    .subcanal-label { color: var(--success); }
.subcanal-sep.ml-volume     .subcanal-label { color: color-mix(in srgb, var(--success) 60%, var(--muted)); }

.subcanal-info {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .75rem;
  color: var(--muted);
}

.subcanal-alert { color: var(--orange); font-weight: 600; }
.subcanal-ok    { color: var(--success); font-weight: 600; }

.driver-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: .75rem;
  padding: 1rem 1.25rem;
  align-items: end;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
}

.driver-grid:last-of-type {
  border-bottom: none;
}

.driver-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.driver-field label {
  font-size: .7rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.driver-field input {
  width: 100%;
  background: color-mix(in srgb, var(--bg) 60%, var(--surface));
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: .9rem;
  font-weight: 600;
  padding: .5rem .6rem;
  box-sizing: border-box;
  transition: border-color .15s;
}

.driver-field input:focus {
  outline: none;
  border-color: var(--blue);
}

.driver-field input.is-alert {
  border-color: var(--orange);
  background: color-mix(in srgb, var(--orange) 6%, transparent);
}

.driver-field-result {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  align-items: flex-end;
}

.driver-field-result label {
  font-size: .7rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.driver-receita {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  padding: .5rem .6rem;
  background: color-mix(in srgb, var(--success) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 20%, transparent);
  border-radius: 6px;
  text-align: right;
  white-space: nowrap;
  min-width: 100px;
}

.canal-subtotal-bar {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: .75rem;
  padding: .7rem 1.25rem;
  background: color-mix(in srgb, var(--bg) 50%, var(--surface));
  border-top: 1px solid var(--line);
  align-items: center;
}

.subtotal-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.subtotal-value {
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}

.subtotal-value.is-total {
  color: var(--success);
  font-size: .95rem;
}

/* Scenario table */
.planejar-cenario {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.planejar-cenario .panel-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.cenario-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}

.cenario-table th {
  padding: .6rem 1.25rem;
  text-align: right;
  font-size: .7rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: color-mix(in srgb, var(--bg) 40%, var(--surface));
  border-bottom: 1px solid var(--line);
}

.cenario-table th:first-child { text-align: left; }

.cenario-table td {
  padding: .65rem 1.25rem;
  text-align: right;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
  color: var(--text);
}

.cenario-table td:first-child { text-align: left; }

.cenario-table tr.canal-total-row td {
  font-weight: 600;
  background: color-mix(in srgb, var(--bg) 30%, var(--surface));
}

.cenario-table tr.subcanal-row td {
  font-size: .8rem;
  color: var(--muted);
  padding-left: 2.25rem;
}

.cenario-table tr.total-row td {
  font-weight: 700;
  font-size: .9rem;
  border-top: 2px solid var(--line);
  border-bottom: none;
}

.cenario-table tr.gap-row td {
  color: var(--orange);
  font-weight: 600;
  border-bottom: none;
  font-size: .82rem;
}

.gap-action-hint {
  font-size: .75rem;
  color: var(--success);
  font-weight: 400;
  margin-left: .5rem;
}

.planejar-action-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 0;
}

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

  .diag-body {
    grid-template-columns: 1fr;
  }

  .canal-subtotal-bar {
    grid-template-columns: 1fr 1fr;
  }

  .alavanca-row,
  .alavanca-header-row {
    grid-template-columns: 110px 1fr 80px;
  }

  .alavanca-diag-btn { display: none; }
}

/* ── CRM ────────────────────────────────────────────────────────────────────── */

.crm-regras-grid {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.crm-regra-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .875rem 1rem;
  transition: border-color .2s;
}

.crm-regra-card.is-off {
  border-color: rgba(255, 95, 87, .2);
  background: rgba(255, 95, 87, .025);
}

.crm-regra-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: .5rem;
}

.crm-regra-nome {
  font-size: .86rem;
  font-weight: 600;
  color: var(--text);
}

.crm-regra-desc {
  font-size: .72rem;
  color: var(--muted);
  margin-top: .12rem;
}

.crm-regra-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  padding: .5rem 0;
  border-top: 1px solid var(--line);
}

.crm-rm-label {
  font-size: .65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.crm-rm-val {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  margin-top: .12rem;
}

.crm-regra-off-hint {
  font-size: .76rem;
  color: var(--muted);
  padding: .4rem 0;
  border-top: 1px solid var(--line);
}

.crm-regra-sugestao {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
  font-size: .73rem;
  color: var(--muted);
  padding: .4rem .6rem;
  background: rgba(55, 213, 255, .05);
  border-left: 2px solid var(--blue);
  border-radius: 0 4px 4px 0;
  margin-top: .5rem;
}

.crm-badge {
  font-size: .63rem;
  font-weight: 600;
  padding: .15rem .42rem;
  border-radius: 3px;
  white-space: nowrap;
}

.crm-badge-ok {
  background: rgba(55, 213, 255, .12);
  color: var(--blue);
}

.crm-badge-off {
  background: rgba(255, 95, 87, .1);
  color: #ff5f57;
}

.crm-badge-warn {
  background: rgba(246, 189, 67, .12);
  color: #f6bd43;
}

.crm-badge-tip {
  background: rgba(55, 213, 255, .08);
  color: var(--blue);
}

.crm-seg-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .875rem;
}

.crm-seg-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
}

.crm-seg-desc {
  font-size: .7rem;
  color: var(--muted);
  margin-top: .1rem;
}

.crm-seg-total {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.025em;
  margin: .5rem 0 .55rem;
  line-height: 1;
}

.crm-seg-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  padding-top: .5rem;
  border-top: 1px solid var(--line);
}

.crm-spark-chart {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .875rem .75rem .5rem;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .2rem;
  align-items: end;
  min-height: 140px;
}

.crm-spark-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
}

.crm-spark-bar-wrap {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.crm-spark-bar-fill {
  width: 65%;
  background: var(--blue);
  border-radius: 2px 2px 0 0;
  opacity: .7;
  min-height: 4px;
  transition: height .3s;
}

.crm-spark-day {
  font-size: .6rem;
  color: var(--muted);
  text-align: center;
}

.crm-spark-val {
  font-size: .62rem;
  color: var(--blue);
  font-weight: 600;
  text-align: center;
}

.canal-icon.crm-icon {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #fff;
  font-size: .52rem;
  font-weight: 700;
}

@media (max-width: 900px) {
  .crm-regra-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .crm-seg-meta-grid {
    grid-template-columns: 1fr;
  }
}


/* ════════════════════════════════════════════════════════════════ */
/*  BOARD V6 — Mockup pos-auditoria (idêntico ao aprovado)            */
/* ════════════════════════════════════════════════════════════════ */

/* ── DATE FILTER STRIP ────────────────────────────────── */
.date-filter {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 22px;
  padding: 8px 10px;
  background: rgba(10, 16, 19, .65);
  border: 1px solid var(--line);
  border-radius: 8px;
  align-items: center;
}
.df-label {
  font-size: 9.5px; letter-spacing: 0.14em; color: var(--dim);
  text-transform: uppercase; padding: 0 8px 0 4px;
  font-weight: 600;
}
.period-pill {
  font-size: 11.5px; font-weight: 500;
  padding: 6px 12px; border-radius: 5px;
  color: var(--muted);
  cursor: pointer; transition: all .15s;
  border: 1px solid transparent;
  user-select: none;
}
.period-pill:hover { color: var(--text); background: rgba(55, 213, 255, .06); }
.period-pill.active {
  background: rgba(253, 128, 67, .14);
  color: var(--orange);
  border-color: rgba(253, 128, 67, .35);
  font-weight: 600;
}
.period-pill.custom {
  margin-left: auto;
  border: 1px dashed rgba(113, 232, 255, .25);
  color: var(--blue);
}
.period-pill.custom:hover { background: rgba(55, 213, 255, .08); }

/* ── EXECUTIVE BRIEF ──────────────────────────────────── */
.brief {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.brief::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--orange), var(--magenta)); }
.brief-eyebrow { font-size: 10px; letter-spacing: 0.16em; color: var(--orange); text-transform: uppercase; font-weight: 600; }
.brief-headline { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.35; margin: 8px 0 14px; max-width: 880px; }
.brief-headline strong { color: var(--cream); font-weight: 600; }
.brief-headline .danger { color: var(--danger); }
.brief-headline .success { color: var(--success); }
.brief-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.kpi-label { font-size: 10px; letter-spacing: 0.12em; color: var(--dim); text-transform: uppercase; margin-bottom: 6px; }
.kpi-value { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.kpi-delta { font-size: 11px; margin-top: 4px; }
.delta-up { color: var(--success); }
.delta-down { color: var(--danger); }
.delta-flat { color: var(--muted); }

/* ── GRID ────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}
.card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.card-title { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; }
.card-eyebrow { font-size: 9.5px; letter-spacing: 0.14em; color: var(--dim); text-transform: uppercase; }
.persona-tag { font-size: 10px; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.tag-cgo { background: rgba(55, 213, 255, .15); color: var(--blue); }
.tag-coo { background: rgba(217, 108, 255, .15); color: var(--magenta); }
.tag-cfo { background: rgba(53, 226, 154, .15); color: var(--success); }
.tag-ceo { background: rgba(253, 128, 67, .15); color: var(--orange); }
.diag-status { font-size: 10px; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.06em; font-weight: 600; }
.status-ok { background: rgba(53, 226, 154, .12); color: var(--success); }
.status-warn { background: rgba(246, 189, 67, .12); color: var(--warning); }
.status-bad { background: rgba(255, 95, 87, .12); color: var(--danger); }

/* ── COMPARATIVOS (D-1 / M-1 / Y-1) ─────────────────── */
.comp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.comp-col {
  padding: 4px 18px;
  border-right: 1px dashed rgba(113, 232, 255, .08);
}
.comp-col:last-child { border-right: 0; }
.comp-col:first-child { padding-left: 4px; }
.comp-kpi-name {
  font-size: 9.5px; letter-spacing: 0.14em; color: var(--dim);
  text-transform: uppercase; margin-bottom: 4px;
}
.comp-kpi-val {
  font-size: 19px; font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.comp-rows { display: flex; flex-direction: column; gap: 7px; }
.comp-row {
  display: grid;
  grid-template-columns: 56px 1fr 52px;
  gap: 8px;
  align-items: center;
}
.comp-period {
  font-size: 10px; color: var(--muted);
  letter-spacing: 0.04em;
}
.comp-bar-track {
  position: relative;
  height: 7px;
  background: rgba(15, 22, 26, .85);
  border-radius: 3px;
  overflow: visible;
  border: 1px solid rgba(113, 232, 255, .05);
}
.comp-zero {
  position: absolute; left: 50%; top: -2px; bottom: -2px;
  width: 1px; background: rgba(238, 247, 250, .3);
}
.comp-fill-pos {
  position: absolute; left: 50%; top: 0; height: 100%;
  background: linear-gradient(90deg, #37d5ff, #35e29a);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 6px rgba(53, 226, 154, .35);
}
.comp-fill-neg {
  position: absolute; right: 50%; top: 0; height: 100%;
  background: linear-gradient(270deg, #f6bd43, #ff5f57);
  border-radius: 2px 0 0 2px;
  box-shadow: 0 0 6px rgba(255, 95, 87, .3);
}
.comp-delta {
  font-size: 10.5px; font-weight: 600; text-align: right;
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}
.comp-delta.up { color: var(--success); }
.comp-delta.down { color: var(--danger); }
.comp-delta.warn { color: var(--warning); }

/* ── HERO RITMO CHART ─────────────────────────────────── */
.ritmo-hero { padding: 26px 30px 22px; }
.ritmo-chart { width: 100%; height: auto; max-height: 700px; display: block; }
.ritmo-legend { display: flex; gap: 26px; margin-top: 16px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); }
.legend-item { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--muted); }
.legend-swatch { width: 24px; height: 3px; border-radius: 2px; }

/* ── SPARKLINE ROW ────────────────────────────────────── */
.spark-list { display: flex; flex-direction: column; }
.spark-row {
  display: grid;
  grid-template-columns: 95px 1fr 88px;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(113, 232, 255, .07);
}
.spark-row:last-child { border-bottom: 0; }
.spark-label { font-size: 11.5px; color: var(--muted); }
.spark-svg { width: 100%; height: 28px; display: block; }
.spark-value { font-size: 12.5px; font-weight: 600; text-align: right; line-height: 1.3; }
.spark-trend { font-size: 10px; display: block; margin-top: 1px; font-weight: 500; }

/* ── STOCK BARS ───────────────────────────────────────── */
.stock-list { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 0; }
.stock-row { display: flex; flex-direction: column; gap: 4px; }
.stock-head { display: flex; justify-content: space-between; align-items: baseline; }
.stock-name { font-size: 12px; color: var(--text); font-weight: 500; }
.stock-meta { font-size: 11px; color: var(--muted); }
.stock-track {
  position: relative;
  height: 12px;
  background: rgba(15, 22, 26, .9);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(113, 232, 255, .06);
}
.stock-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 3px; }
.stock-threshold { position: absolute; top: -3px; bottom: -3px; width: 1px; background: rgba(255, 255, 255, .35); }
.stock-threshold::after {
  content: attr(data-label);
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font-size: 8.5px; color: var(--dim); white-space: nowrap;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ── DONUT + GAUGE ────────────────────────────────────── */
.cfo-block { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 4px; }
.donut-wrap { display: flex; flex-direction: column; }
.donut-stage { position: relative; }
.donut-svg { width: 100%; height: 160px; display: block; }
.donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.donut-center .big { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.donut-center .sub { font-size: 9.5px; color: var(--dim); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 4px; }
.donut-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 10.5px; }
.donut-legend-row { display: grid; grid-template-columns: 9px 1fr 32px 38px; align-items: center; gap: 6px; }
.donut-legend-row .dot { width: 8px; height: 8px; border-radius: 2px; }
.donut-legend-row .lbl { color: var(--muted); }
.donut-legend-row .val { color: var(--text); font-weight: 700; text-align: right; font-family: var(--font-mono); }
.donut-legend-row .yoy {
  font-size: 9.5px; font-weight: 600; text-align: right;
  font-family: var(--font-mono);
}
.donut-legend-row .yoy.up { color: var(--danger); }
.donut-legend-row .yoy.down { color: var(--success); }
.donut-legend-row .yoy.flat { color: var(--dim); }
.donut-legend-head {
  display: grid; grid-template-columns: 9px 1fr 32px 38px;
  gap: 6px; padding-bottom: 4px; border-bottom: 1px dashed rgba(113,232,255,.08);
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
}
.donut-legend-head .h-now { text-align: right; }
.donut-legend-head .h-yoy { text-align: right; }

.gauge-wrap { position: relative; padding-top: 6px; }
.gauge-svg { width: 100%; height: 88px; display: block; }
.gauge-readout {
  text-align: center; margin-top: -22px;
}
.gauge-readout .v { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.gauge-readout .l { font-size: 9.5px; color: var(--dim); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 2px; }

.cfo-mini { padding: 10px 0 0; border-top: 1px dashed rgba(113, 232, 255, .07); margin-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cfo-mini-label { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.cfo-mini-spark { flex: 1; height: 22px; }
.cfo-mini-val { font-size: 12.5px; font-weight: 600; }

/* ── DELTA TIMELINE ───────────────────────────────────── */
.delta-list { display: flex; flex-direction: column; }
.delta-row {
  display: grid;
  grid-template-columns: 26px 1fr 70px 60px;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(113, 232, 255, .07);
}
.delta-row:last-child { border-bottom: 0; }
.delta-arrow {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 6px;
  font-size: 14px; font-weight: 700;
}
.delta-arrow.up { background: rgba(53, 226, 154, .12); color: var(--success); }
.delta-arrow.down { background: rgba(255, 95, 87, .12); color: var(--danger); }
.delta-arrow.warn { background: rgba(246, 189, 67, .12); color: var(--warning); }
.delta-label { font-size: 12px; color: var(--text); line-height: 1.3; }
.delta-spark { width: 100%; height: 22px; }
.delta-val { font-size: 11.5px; font-weight: 600; text-align: right; }

/* ── DECISION CARDS ───────────────────────────────────── */
.decision-list { display: flex; flex-direction: column; gap: 12px; }
.decision { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; border-left: 3px solid var(--blue); transition: all .2s; }
.decision.priority { border-left-color: var(--orange); }
.decision.danger { border-left-color: var(--danger); }
.decision-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 10px; }
.decision-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.decision-title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }
.decision-why { color: var(--muted); font-size: 12.5px; line-height: 1.55; margin-bottom: 12px; }
.decision-evidence { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.ev-label { font-size: 9.5px; letter-spacing: 0.1em; color: var(--dim); text-transform: uppercase; margin-bottom: 3px; }
.ev-value { font-size: 13px; font-weight: 600; }
.decision-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { font-family: inherit; font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 5px; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--muted); letter-spacing: 0.02em; transition: all .15s; }
.btn:hover { color: var(--text); border-color: var(--line-strong); }
.btn-primary { background: var(--orange); color: #0c0c0c; border-color: var(--orange); }
.btn-primary:hover { background: #ff9659; }
.btn-evidence { color: var(--blue); border-color: rgba(55, 213, 255, .25); padding: 3px 8px; font-size: 11px; }
.btn-evidence:hover { background: rgba(55, 213, 255, .08); }
.autonomy-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; letter-spacing: 0.1em; padding: 2px 7px; border-radius: 3px; background: rgba(217, 108, 255, .12); color: var(--magenta); font-weight: 600; text-transform: uppercase; }
.confidence-pill { color: var(--success); }
.risk-pill { color: var(--warning); }

/* ── FOOTER NOTE ──────────────────────────────────────── */
.note {
  margin-top: 30px; padding: 14px 18px;
  background: rgba(55, 213, 255, .04);
  border: 1px solid rgba(55, 213, 255, .14);
  border-radius: 6px;
  font-size: 12px; color: var(--muted);
}
.note strong { color: var(--blue); }

/* ── SVG text rendering crisp ─────────────────────── */
svg text {
  font-family: "Aptos", "Segoe UI", system-ui, sans-serif;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ritmo-chart text {
  font-family: "Aptos", "Segoe UI", system-ui, sans-serif;
  text-rendering: geometricPrecision;
}

/* Sparklines: stroke não escala (mantém peso constante apesar do preserveAspectRatio="none") */
.spark-svg polyline,
.spark-svg path,
.spark-svg line,
.delta-spark polyline,
.delta-spark path,
.cfo-mini-spark polyline,
.cfo-mini-spark path {
  vector-effect: non-scaling-stroke;
}

/* ════════════════════════════════════════════════════════════════════
   PLANEJAMENTO V2 — Mockup planejamento.html
   Todas as regras escopadas em .planejar-page para nao colidir com
   board (Sala de Conselho), Lojas, CRM. Copia EXATA do mockup.
   ════════════════════════════════════════════════════════════════════ */

.planejar-page { font-size: 14.5px; color: var(--text); padding: 0 0 80px; }
.planejar-page .mono { font-family: "SFMono-Regular", "Cascadia Code", ui-monospace, monospace; }

/* topbar reaproveitada da pagina */
.planejar-page .planejar-topbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.planejar-page .planejar-breadcrumb {
  font-size: 11px; letter-spacing: 0.08em; color: var(--dim);
  text-transform: uppercase;
}
.planejar-page .planejar-page-title {
  font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px;
  color: var(--text);
}
.month-nav {
  display: flex; align-items: center; gap: 10px;
}
.month-nav-btn {
  width: 34px; height: 34px; border-radius: 6px;
  background: transparent; border: 1px solid var(--line);
  color: var(--text); font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
}
.month-nav-btn:hover { border-color: var(--blue); color: var(--blue); }
.month-nav-label {
  font-size: 14px; font-weight: 600; color: var(--text);
  min-width: 110px; text-align: center;
}

/* ── BRIEF (override scopado) ─────────────────────────── */
.planejar-page .brief {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 22px 26px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.planejar-page .brief::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--success), var(--warning), var(--danger));
}
.planejar-page .brief-eyebrow {
  font-size: 10px; letter-spacing: 0.16em; color: var(--success);
  text-transform: uppercase; font-weight: 600;
}
.planejar-page .brief-headline {
  font-size: 22px; font-weight: 500; letter-spacing: -0.015em;
  line-height: 1.35; margin: 8px 0 14px; max-width: 920px;
  color: var(--text);
}
.planejar-page .brief-headline strong { color: var(--cream); font-weight: 600; }
.planejar-page .brief-headline .danger { color: var(--danger); }
.planejar-page .brief-headline .warning { color: var(--warning); }
.planejar-page .brief-headline .success { color: var(--success); }
.planejar-page .brief-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; padding-top: 14px; border-top: 1px solid var(--line);
}
.planejar-page .kpi-label {
  font-size: 10px; letter-spacing: 0.12em; color: var(--dim);
  text-transform: uppercase; margin-bottom: 6px;
}
.planejar-page .kpi-value {
  font-size: 22px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--text);
}
/* ── Sala de Conselho — Fase 2 (consolidação da leitura matinal) ────────── */
.board-bloco {
  margin-bottom: 24px;
  padding: 18px 20px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.board-bloco.board-bloco-apoio {
  margin-top: 28px;
  background: rgba(6, 9, 11, .35);
  border-style: dashed;
  opacity: 0.92;
}

.board-bloco-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.board-bloco-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: rgba(55, 213, 255, .1);
  color: var(--blue);
  border: 1px solid rgba(55, 213, 255, .25);
}
.board-bloco-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.board-bloco-sub {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Bloco 1 — brief-kpis com 4 colunas (em vez de 5) */
.brief-kpis-4 {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* Bloco 2-3 — tabela vs passado */
.vs-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.vs-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 12px;
  padding: 12px 16px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.vs-row:last-child { border-bottom: none; }
.vs-head {
  background: rgba(6, 9, 11, .55);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.vs-metric {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.vs-source {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
}
.vs-source-real {
  color: var(--success);
  background: rgba(53, 226, 154, .08);
  border: 1px solid rgba(53, 226, 154, .25);
}
.vs-source-local {
  color: var(--blue);
  background: rgba(55, 213, 255, .08);
  border: 1px solid rgba(55, 213, 255, .22);
  cursor: help;
}
.vs-source-partial {
  color: var(--warning);
  background: rgba(246, 189, 67, .08);
  border: 1px solid rgba(246, 189, 67, .25);
}
.vs-source-none {
  color: var(--dim);
  background: rgba(94, 115, 123, .10);
  border: 1px solid rgba(94, 115, 123, .30);
}
.vs-current {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.vs-real {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vs-base {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.vs-delta {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
}
.vs-up   { color: var(--success); }
.vs-down { color: var(--danger); }
.vs-flat { color: var(--muted); }
.vs-empty {
  font-size: 11px;
  color: var(--dim);
  font-style: italic;
}

/* Bloco 4 — Para onde vamos */
.paraonde-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.paraonde-headline {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  padding: 12px 14px;
  border-radius: 6px;
  background: rgba(6, 9, 11, .5);
  border-left: 3px solid var(--blue);
}
.paraonde-headline.is-ok   { border-left-color: var(--success); }
.paraonde-headline.is-bad  { border-left-color: var(--danger); }
.paraonde-headline.is-warn { border-left-color: var(--warning); }
.paraonde-headline strong { font-weight: 700; }
.paraonde-headline strong.success { color: var(--success); }
.paraonde-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.paraonde-stat {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(6, 9, 11, .4);
}
.paraonde-stat-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 4px;
}
.paraonde-stat strong {
  font-size: 18px;
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}

/* Bloco 5 — O que o Pimi já fez (com selo Demo obrigatório) */
.pimi-fez-card { display: flex; flex-direction: column; gap: 12px; }
.pimi-fez-demo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 6px;
  background: rgba(150, 160, 170, .08);
  border: 1px solid rgba(150, 160, 170, .25);
}
.pimi-fez-demo-icon { font-size: 12px; color: var(--dim); font-family: var(--font-mono); }
.pimi-fez-demo-state {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.pimi-fez-demo-sub {
  font-size: 11.5px;
  color: var(--muted);
  flex: 1 0 100%;
  margin-top: 2px;
  line-height: 1.4;
}
.pimi-fez-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pimi-fez-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(6, 9, 11, .35);
  border: 1px solid var(--line);
}
.pimi-fez-state {
  width: 22px; height: 22px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.pimi-fez-domain {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.pimi-fez-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-top: 2px;
}
.pimi-fez-result {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
}

/* Bloco 6 — Estamos no caminho certo? */
.caminho-card {
  padding: 16px 18px;
  border-radius: 8px;
  border-left: 4px solid;
}
.caminho-card.caminho-ok   { background: rgba(53, 226, 154, .06); border-left-color: var(--success); }
.caminho-card.caminho-warn { background: rgba(246, 189, 67, .06); border-left-color: var(--warning); }
.caminho-card.caminho-bad  { background: rgba(255, 95, 87, .06);  border-left-color: var(--danger); }

.caminho-resposta {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.caminho-card.caminho-ok   .caminho-resposta { color: var(--success); }
.caminho-card.caminho-warn .caminho-resposta { color: var(--warning); }
.caminho-card.caminho-bad  .caminho-resposta { color: var(--danger); }

.caminho-motivo {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}
.caminho-alavanca {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(6, 9, 11, .4);
  border-radius: 6px;
  border-left: 2px solid var(--magenta);
}
.caminho-alavanca-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 4px;
}
.caminho-alavanca p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.caminho-alavanca strong { color: var(--text); }
.evidence-link-inline {
  color: var(--blue);
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
}
.evidence-link-inline:hover { text-decoration: underline; }

/* Bloco 7 — O que fazer agora? */
.agora-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.agora-card {
  background: rgba(6, 9, 11, .4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--domain-color, var(--blue));
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agora-card.is-blocked { opacity: 0.85; }
.agora-card[data-priority="critical"] { box-shadow: 0 0 0 1px rgba(255,95,87,.18); }

.agora-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.agora-rank {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
}
.agora-priority-pill {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(255, 95, 87, .12);
  color: var(--danger);
  border: 1px solid rgba(255, 95, 87, .25);
}
.agora-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}
.agora-why {
  padding: 8px 10px;
  background: rgba(253, 128, 67, .06);
  border-left: 2px solid var(--orange);
  border-radius: 0 5px 5px 0;
}
.agora-why-label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 3px;
}
.agora-why p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text);
}
.agora-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.agora-meta > div { display: flex; flex-direction: column; gap: 2px; }
.agora-meta-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.agora-meta strong { font-size: 12px; color: var(--text); }
.agora-trust-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.agora-trust {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
}
.agora-trust-ok    { color: var(--success); background: rgba(53,226,154,.08); border: 1px solid rgba(53,226,154,.2); }
.agora-trust-warn  { color: var(--warning); background: rgba(246,189,67,.08); border: 1px solid rgba(246,189,67,.2); }
.agora-trust-block { color: var(--danger);  background: rgba(255,95,87,.08);  border: 1px solid rgba(255,95,87,.2); }
.agora-trust-demo  { color: var(--dim);     background: rgba(150,160,170,.08); border: 1px solid rgba(150,160,170,.2); }

.agora-actions {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 5px;
  margin-top: auto;
}
.agora-actions .primary-button,
.agora-actions .ghost-button {
  font-size: 11px;
  padding: 6px 8px;
}

@media (max-width: 1100px) {
  .agora-grid { grid-template-columns: repeat(2, 1fr); }
  .vs-row { grid-template-columns: 1.4fr 0.8fr 1fr 1fr; }
}
@media (max-width: 720px) {
  .agora-grid { grid-template-columns: 1fr; }
  .paraonde-stats { grid-template-columns: 1fr; }
  .vs-row { grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; }
  .vs-row > div:nth-child(3),
  .vs-row > div:nth-child(4) { grid-column: 1 / -1; }
}

/* ── Conteúdo (Fase 6) — Motor de criação orientado por diagnóstico ──────── */
.conteudo-page { padding: 0 0 4rem; }

.conteudo-header { margin-bottom: 28px; }
.conteudo-header h2 { margin: 6px 0 6px; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.conteudo-sub { color: var(--muted); margin: 0 0 20px; font-size: 13.5px; max-width: 820px; }

.conteudo-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.conteudo-stat-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 16px; border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  min-width: 90px; text-align: center;
}
.conteudo-stat-item span:last-child { font-size: 11px; color: var(--muted); margin-top: 2px; }
.conteudo-stat-num { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.conteudo-stat-item.active .conteudo-stat-num { color: var(--blue); }
.conteudo-stat-item.ok .conteudo-stat-num     { color: var(--success); }
.conteudo-stat-item.neutral .conteudo-stat-num { color: var(--magenta); }

/* Bloco wrapper (compartilha estilo dos board-bloco) */
.conteudo-bloco {
  margin-bottom: 24px;
  padding: 18px 20px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* Bloco 1 — Causas detectadas */
.conteudo-causas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.conteudo-causa-card {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: 8px;
  background: rgba(6,9,11,.4);
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s, transform .15s;
}
.conteudo-causa-card:hover { border-color: var(--orange); }
.conteudo-causa-card.is-active {
  border-left-color: var(--blue);
  background: rgba(55,213,255,.06);
}
.conteudo-causa-head {
  display: flex; align-items: center; gap: 10px;
}
.conteudo-causa-icon {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  font-size: 14px; font-weight: 700;
  background: rgba(253,128,67,.1);
  color: var(--orange);
  border: 1px solid rgba(253,128,67,.3);
}
.conteudo-causa-card.is-active .conteudo-causa-icon {
  background: rgba(55,213,255,.1);
  color: var(--blue);
  border-color: rgba(55,213,255,.3);
}
.conteudo-causa-meta {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
}
.conteudo-causa-tipo {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange);
}
.conteudo-causa-card.is-active .conteudo-causa-tipo { color: var(--blue); }
.conteudo-causa-origem { font-size: 11px; color: var(--muted); }
.conteudo-causa-active-pill {
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(55,213,255,.15);
  color: var(--blue);
  border: 1px solid rgba(55,213,255,.3);
}
.conteudo-causa-card h4 {
  margin: 0; font-size: 13.5px; font-weight: 600;
  line-height: 1.4; color: var(--text);
}
.conteudo-causa-card p {
  margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted);
}
.conteudo-causa-card button { margin-top: auto; }

/* Bloco 2 — Briefing ativo */
.conteudo-briefing-card {
  padding: 16px 18px;
  background: rgba(55,213,255,.05);
  border: 1px solid rgba(55,213,255,.2);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
}
.conteudo-briefing-titulo {
  font-size: 15px; font-weight: 600; color: var(--text);
  margin-bottom: 14px;
}
.conteudo-briefing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.conteudo-briefing-grid > div { display: flex; flex-direction: column; gap: 3px; }
.conteudo-briefing-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dim);
}
.conteudo-briefing-grid strong {
  font-size: 13px; color: var(--text);
}

/* Bloco 3 — Matriz criativa */
.conteudo-matriz-table {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.conteudo-matriz-row {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 1.5fr 1.2fr 130px;
  gap: 12px;
  padding: 11px 14px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.conteudo-matriz-row:last-child { border-bottom: none; }
.conteudo-matriz-row.conteudo-matriz-head {
  background: rgba(6,9,11,.5);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim);
}

/* Bloco 4 — Rascunho N2 */
.conteudo-rascunho-card {
  padding: 18px 20px;
  background: rgba(217,108,255,.05);
  border: 1px solid rgba(217,108,255,.25);
  border-left: 3px solid var(--magenta);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 14px;
}
.conteudo-rascunho-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: 4px;
  background: rgba(217,108,255,.12);
  color: var(--magenta);
  border: 1px solid rgba(217,108,255,.3);
  align-self: flex-start;
}
.conteudo-rascunho-preview {
  padding: 16px 18px;
  background: rgba(6,9,11,.6);
  border: 1px dashed var(--line);
  border-radius: 6px;
}
.conteudo-rascunho-headline {
  font-size: 17px; font-weight: 600; line-height: 1.35;
  color: var(--text); margin-bottom: 10px;
}
.conteudo-rascunho-body {
  margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--muted);
}
.conteudo-rascunho-cta {
  font-size: 13px; font-weight: 700; color: var(--orange);
  padding: 8px 14px; border-radius: 4px;
  background: rgba(253,128,67,.1);
  border: 1px solid rgba(253,128,67,.3);
  display: inline-block;
}
.conteudo-rascunho-imagem {
  margin-top: 12px;
  font-size: 11.5px; color: var(--dim); font-style: italic;
}
.conteudo-rascunho-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  padding-top: 10px; border-top: 1px solid var(--line);
}
.conteudo-rascunho-meta > div { display: flex; flex-direction: column; gap: 3px; }
.conteudo-rascunho-meta strong { font-size: 12.5px; color: var(--text); }
.conteudo-rascunho-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}

/* Bloco 5 — Pipeline */
.conteudo-pipeline-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.conteudo-pipeline-step {
  position: relative;
  padding: 14px 14px 14px 50px;
  background: rgba(6,9,11,.4);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.conteudo-pipeline-num {
  position: absolute; left: 14px; top: 14px;
  width: 26px; height: 26px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: rgba(55,213,255,.12);
  color: var(--blue);
  border: 1px solid rgba(55,213,255,.25);
  font-family: var(--font-mono);
}
.conteudo-pipeline-step strong {
  display: block; font-size: 12.5px; color: var(--text); margin-bottom: 4px;
}
.conteudo-pipeline-step p {
  margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--muted);
}

.conteudo-footer-note {
  margin-top: 24px; padding: 14px 18px;
  background: rgba(217,108,255,.04);
  border: 1px solid rgba(217,108,255,.18);
  border-radius: 6px;
  font-size: 12.5px; color: var(--muted);
}
.conteudo-footer-note strong { color: var(--magenta); }
.conteudo-footer-note em { color: var(--text); font-style: normal; font-weight: 600; }

@media (max-width: 1100px) {
  .conteudo-causas-grid { grid-template-columns: 1fr; }
  .conteudo-briefing-grid { grid-template-columns: 1fr 1fr; }
  .conteudo-pipeline-flow { grid-template-columns: 1fr 1fr; }
  .conteudo-matriz-row { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; font-size: 11.5px; }
  .conteudo-matriz-row > div:nth-child(3),
  .conteudo-matriz-row > div:nth-child(4),
  .conteudo-matriz-row > div:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .conteudo-briefing-grid { grid-template-columns: 1fr; }
  .conteudo-pipeline-flow { grid-template-columns: 1fr; }
  .conteudo-rascunho-meta { grid-template-columns: 1fr; }
}

/* Tonalização event-trail dos eventos de Conteúdo (Fase 6) */
.event-trail-item.evt-content-approved .event-trail-icon { color: var(--magenta); }
.event-trail-item.evt-content-task .event-trail-icon     { color: var(--orange); }

/* ── Event Trail (Fase 5) — mini-timeline de eventos da trilha operacional ─ */
.event-trail {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 5px;
  background: rgba(217, 108, 255, .04);
  border-left: 2px solid rgba(217, 108, 255, .35);
}
.event-trail-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--magenta);
}
.event-trail-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.event-trail-item {
  display: flex; flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.45;
}
.event-trail-icon {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--magenta);
  min-width: 12px;
}
.event-trail-time {
  font-family: var(--font-mono);
  color: var(--dim);
  font-size: 10.5px;
  min-width: 80px;
}
.event-trail-label {
  font-weight: 700;
  color: var(--text);
  font-size: 10.5px;
}
.event-trail-actor {
  font-size: 10px;
  color: var(--blue);
  font-style: italic;
}
.event-trail-note {
  flex: 1 0 100%;
  margin-left: 100px;
  font-size: 10.5px;
  color: var(--dim);
}
.event-trail-empty {
  font-size: 11px;
  color: var(--dim);
  font-style: italic;
}

/* Tonalização por tipo de evento */
.event-trail-item.evt-approved .event-trail-icon         { color: var(--success); }
.event-trail-item.evt-task-created .event-trail-icon     { color: var(--blue); }
.event-trail-item.evt-task-started .event-trail-icon     { color: var(--orange); }
.event-trail-item.evt-task-completed .event-trail-icon   { color: var(--success); }
.event-trail-item.evt-action-running .event-trail-icon   { color: var(--blue); }
.event-trail-item.evt-action-completed .event-trail-icon { color: var(--success); }
.event-trail-item.evt-learning .event-trail-icon         { color: var(--magenta); }
.event-trail-item.evt-rejected .event-trail-icon         { color: var(--danger); }

.decision-trail {
  margin-top: 4px;
}

.learning-trail {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.learning-trail-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 6px;
}

/* Brain Trail badge (selo "Trilha local" nos cards dinâmicos do Brain em Ação) */
.brain-trail-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(217, 108, 255, .1);
  color: var(--magenta);
  border: 1px solid rgba(217, 108, 255, .3);
  cursor: help;
}
.brain-card.brain-card-trail {
  border-left-style: solid;
  border-left-width: 3px;
  border-left-color: var(--magenta);
}
.brain-card.brain-card-content {
  border-left-color: var(--warning);
}

.brain-trail-badge.brain-trail-badge-content {
  background: rgba(246, 189, 67, .12);
  color: var(--warning);
  border-color: rgba(246, 189, 67, .35);
}

.brain-origin-strip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 8px 12px;
  border-radius: 5px;
  background: rgba(217, 108, 255, .06);
  border-left: 2px solid var(--magenta);
  font-size: 11.5px;
}
.brain-origin-strip.is-content {
  background: rgba(246, 189, 67, .06);
  border-left-color: var(--warning);
}
.brain-origin-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--magenta);
}
.brain-origin-strip.is-content .brain-origin-label { color: var(--warning); }
.brain-origin-value { font-weight: 700; color: var(--text); }
.brain-origin-source { color: var(--muted); font-size: 11px; }

.brain-stat-item.trail .brain-stat-num { color: var(--magenta); }

/* ── Source Strip — selo de origem do dado (Fase 1 handoff) ─────────────── */
.source-strip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--line);
  background: var(--surface);
  margin-bottom: 18px;
}
.source-strip-icon {
  font-size: 11px;
  font-family: var(--font-mono);
}
.source-strip-state {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10.5px;
}
.source-strip-sep { color: var(--dim); }
.source-strip-label {
  color: var(--muted);
  font-weight: 500;
}

.source-strip-real {
  background: rgba(53, 226, 154, .06);
  border-color: rgba(53, 226, 154, .25);
}
.source-strip-real .source-strip-icon,
.source-strip-real .source-strip-state { color: var(--success); }

.source-strip-parcial {
  background: rgba(246, 189, 67, .06);
  border-color: rgba(246, 189, 67, .25);
}
.source-strip-parcial .source-strip-icon,
.source-strip-parcial .source-strip-state { color: var(--warning); }

.source-strip-demo {
  background: rgba(150, 160, 170, .06);
  border-color: rgba(150, 160, 170, .2);
}
.source-strip-demo .source-strip-icon,
.source-strip-demo .source-strip-state { color: var(--dim); }

.source-strip-construcao {
  background: rgba(217, 108, 255, .05);
  border-color: rgba(217, 108, 255, .22);
}
.source-strip-construcao .source-strip-icon,
.source-strip-construcao .source-strip-state { color: var(--magenta); }

/* CONV-1 (2026-06-03) — estado de erro de fonte (vermelho). Os demais
   estados do contrato adapter (partial/stale/no_data) reusam parcial/demo. */
.source-strip-error {
  background: rgba(255, 95, 87, .06);
  border-color: rgba(255, 95, 87, .22);
}
.source-strip-error .source-strip-icon,
.source-strip-error .source-strip-state { color: var(--danger, #ff5f57); }

/* tag inline pra marcar valor estimado dentro de bloco real (parcial) */
.estimated-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warning);
  background: rgba(246, 189, 67, .08);
  border: 1px solid rgba(246, 189, 67, .25);
  vertical-align: middle;
  cursor: help;
}

/* ── Estados padronizados (loading / erro / vazio) ───────────────────────── */
.state-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 22px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  margin: 14px 0;
}
.state-block .state-message {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.state-block .state-detail {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.state-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}
.state-spinner {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--blue);
  animation: state-spin .8s linear infinite;
  flex-shrink: 0;
  margin-top: 1px;
}
@keyframes state-spin { to { transform: rotate(360deg); } }

.state-loading { border-color: rgba(55, 213, 255, .2); }
.state-loading .state-message { color: var(--muted); font-weight: 500; }

.state-error { border-color: rgba(255, 95, 87, .25); background: rgba(255, 95, 87, .04); }
.state-error .state-icon { color: var(--danger); }

.state-empty { border-style: dashed; }
.state-empty .state-icon { color: var(--dim); }

/* ── Página em construção (placeholder padrão) ──────────────────────────── */
.construction-page { padding: 0 0 4rem; max-width: 880px; }

.construction-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warning);
  border-radius: 10px;
  padding: 28px 30px;
}
.construction-card .eyebrow { color: var(--warning); }
.construction-card h2 { margin: 6px 0 8px; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.construction-sub { color: var(--muted); margin: 0 0 24px; font-size: 13.5px; }

.construction-flow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.construction-step {
  position: relative;
  padding: 14px 14px 14px 50px;
  background: rgba(6,9,11,.5);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.construction-step-num {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 26px; height: 26px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: rgba(55,213,255,.12);
  color: var(--blue);
  border: 1px solid rgba(55,213,255,.25);
  font-family: var(--font-mono);
}
.construction-step strong {
  display: block;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
}
.construction-step p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.construction-status {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
}
.construction-status > div {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 12px;
}
.construction-status-label {
  color: var(--dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  width: 160px;
}

@media (max-width: 720px) {
  .construction-flow { grid-template-columns: 1fr; }
  .construction-status > div { flex-direction: column; gap: 2px; }
  .construction-status-label { width: auto; }
}

/* ── Gestão — Kanban N2/N3 ─────────────────────────────────────────────── */
.gestao-page { padding: 0 0 4rem; }

.gestao-header { margin-bottom: 24px; }
.gestao-header h2 { margin: 6px 0 6px; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.gestao-sub { color: var(--muted); margin: 0 0 18px; font-size: 13.5px; max-width: 760px; }

.gestao-stats { display: flex; gap: 12px; flex-wrap: wrap; }

.gestao-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 20px;
}

.gestao-column {
  background: rgba(6,9,11,.4);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex; flex-direction: column;
  min-height: 480px;
}

.gestao-column-head {
  padding: 14px 14px 10px;
  border-bottom: 2px solid var(--line);
}
.gestao-column-head > div {
  display: flex; align-items: center; gap: 8px;
}
.gestao-column-title {
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text);
}
.gestao-column-count {
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
  background: rgba(150,160,170,.12);
  color: var(--muted);
  font-family: var(--font-mono);
}
.gestao-column-sub {
  margin: 4px 0 0; font-size: 11px; color: var(--dim);
}

.gestao-column-body {
  padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}

.gestao-empty {
  font-size: 12px; color: var(--dim);
  padding: 18px 8px; text-align: center;
  border: 1px dashed var(--line);
  border-radius: 6px;
}

.gestao-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--domain-color, var(--blue));
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s, transform .15s;
}
.gestao-card:hover { border-color: var(--blue); transform: translateY(-1px); }

.gestao-card-head { display: flex; justify-content: space-between; align-items: center; }
.gestao-card-title {
  margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4;
  color: var(--text);
}
.gestao-card-note {
  margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.5;
}

.gestao-progress {
  display: flex; align-items: center; gap: 8px;
}
.gestao-progress-bar {
  flex: 1; height: 4px; border-radius: 2px;
  background: rgba(94,115,123,.2);
  overflow: hidden;
}
.gestao-progress-fill {
  height: 100%; background: var(--blue);
  transition: width .4s ease;
}
.gestao-progress-pct {
  font-size: 10.5px; color: var(--blue);
  font-family: var(--font-mono); font-weight: 600;
}

.gestao-card-meta {
  display: flex; flex-direction: column; gap: 3px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.gestao-meta-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px;
}
.gestao-meta-label { color: var(--dim); letter-spacing: 0.04em; text-transform: uppercase; font-size: 9.5px; }
.gestao-meta-row strong { font-size: 11.5px; }
.gestao-meta-row strong.impact-receita   { color: var(--success); }
.gestao-meta-row strong.impact-protecao  { color: var(--blue); }
.gestao-meta-row strong.impact-qualidade { color: var(--warning); }

.gestao-deadline-pill {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  padding: 4px 8px; border-radius: 4px;
  background: rgba(253,128,67,.1);
  color: var(--orange);
  border: 1px solid rgba(253,128,67,.25);
  text-align: center;
}

.gestao-card .evidence-link {
  font-size: 10.5px; padding: 0;
}

.gestao-card-footer {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.gestao-action-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: all .15s;
  border: 1px solid transparent;
  letter-spacing: 0.02em;
}
.gestao-action-btn.primary {
  background: var(--orange);
  color: var(--bg);
  border-color: var(--orange);
}
.gestao-action-btn.primary:hover {
  background: transparent;
  color: var(--orange);
}
.gestao-action-btn.ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
}
.gestao-action-btn.ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.gestao-card[data-state="execucao"] .gestao-action-btn.primary {
  background: var(--success);
  border-color: var(--success);
}
.gestao-card[data-state="execucao"] .gestao-action-btn.primary:hover {
  background: transparent;
  color: var(--success);
}

.gestao-footer-note {
  margin-top: 24px; padding: 14px 18px;
  background: rgba(55,213,255,.04);
  border: 1px solid rgba(55,213,255,.14);
  border-radius: 6px;
  font-size: 12.5px; color: var(--muted);
}
.gestao-footer-note strong { color: var(--blue); }
.gestao-footer-note em { color: var(--text); font-style: normal; font-weight: 600; }

@media (max-width: 1280px) { .gestao-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .gestao-board { grid-template-columns: 1fr; } }

/* ── Aprendizado — memória do que funcionou ────────────────────────────── */
.learning-page { padding: 0 0 4rem; }

.learning-header { margin-bottom: 28px; }
.learning-header h2 { margin: 6px 0 6px; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.learning-sub { color: var(--muted); margin: 0 0 20px; font-size: 13.5px; max-width: 760px; }

.learning-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.learning-stat-box {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 16px; border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  min-width: 92px; text-align: center;
}
.learning-stat-box span:last-child { font-size: 11px; color: var(--muted); margin-top: 2px; }
.learning-stat-num { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.learning-stat-box.observando .learning-stat-num { color: var(--blue); }
.learning-stat-box.maduro .learning-stat-num     { color: var(--success); }
.learning-stat-box.promovivel .learning-stat-num { color: var(--warning); }
.learning-stat-box.invalidado .learning-stat-num { color: var(--danger); }
.learning-stat-box.neutral .learning-stat-num    { color: var(--text); }

.learning-filters { display: flex; gap: 8px; flex-wrap: wrap; }

.learning-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.learning-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--domain-color, var(--blue));
  border-radius: 10px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.learning-card.lc-invalidado { opacity: 0.92; }

.learning-card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.learning-card-head-left { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.learning-lifecycle-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
}
.learning-lifecycle-pill.lc-observando { background: rgba(55,213,255,.1);  color: var(--blue);    border: 1px solid rgba(55,213,255,.25); }
.learning-lifecycle-pill.lc-maduro     { background: rgba(53,226,154,.1);  color: var(--success); border: 1px solid rgba(53,226,154,.25); }
.learning-lifecycle-pill.lc-promovivel { background: rgba(246,189,67,.1);  color: var(--warning); border: 1px solid rgba(246,189,67,.25); }
.learning-lifecycle-pill.lc-invalidado { background: rgba(255,95,87,.1);   color: var(--danger);  border: 1px solid rgba(255,95,87,.25); }

.learning-conf-block {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.learning-conf-num {
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  font-family: var(--font-mono);
  line-height: 1;
}
.learning-conf-delta {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  font-family: var(--font-mono);
}
.learning-conf-delta.conf-up   { color: var(--success); }
.learning-conf-delta.conf-down { color: var(--danger); }
.learning-conf-delta.conf-flat { color: var(--dim); }

.learning-card-title {
  margin: 0; font-size: 15.5px; font-weight: 600;
  line-height: 1.35; color: var(--text);
}
.learning-card-desc {
  margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted);
}

.learning-card-stats {
  display: flex; gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.learning-stat { display: flex; flex-direction: column; gap: 2px; }
.learning-stat-label { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }
.learning-stat strong { font-size: 13px; font-variant-numeric: tabular-nums; }

.learning-origin {
  font-size: 12px; line-height: 1.5;
}
.learning-origin-label,
.learning-history-label,
.learning-next-action-label {
  display: block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dim);
  margin-bottom: 4px;
}
.learning-origin p { margin: 0; color: var(--muted); }

.learning-history-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.learning-history-list li {
  display: grid; grid-template-columns: 50px 1fr; gap: 8px;
  font-size: 11.5px; color: var(--muted); line-height: 1.45;
}
.learning-history-date {
  font-family: var(--font-mono);
  color: var(--blue);
  font-weight: 600;
}

.learning-next-action {
  margin-top: auto;
  padding: 10px 12px; border-radius: 6px;
  background: rgba(55,213,255,.05);
  border-left: 2px solid rgba(55,213,255,.4);
}
.learning-next-action p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text); }
.learning-next-action.is-action {
  background: rgba(246,189,67,.06);
  border-left-color: var(--warning);
}
.learning-next-action.is-action .learning-next-action-label { color: var(--warning); }
.learning-next-action.is-warn {
  background: rgba(255,95,87,.06);
  border-left-color: var(--danger);
}
.learning-next-action.is-warn .learning-next-action-label { color: var(--danger); }

.learning-footer-note {
  margin-top: 28px; padding: 14px 18px;
  background: rgba(217,108,255,.04);
  border: 1px solid rgba(217,108,255,.14);
  border-radius: 6px;
  font-size: 12.5px; color: var(--muted);
}
.learning-footer-note strong { color: var(--magenta); }
.learning-footer-note em { color: var(--text); font-style: normal; font-weight: 600; }

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

/* ── Brain em Ação — log de execução N3 + loop de aprendizado ──────────── */
.brain-acao-page { padding: 0 0 4rem; }

.brain-acao-header { margin-bottom: 28px; }
.brain-acao-header h2 { margin: 6px 0 6px; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.brain-acao-sub { color: var(--muted); margin: 0 0 20px; font-size: 13.5px; max-width: 720px; }

.brain-acao-stats {
  display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.brain-stat-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 18px; border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  min-width: 90px; text-align: center;
}
.brain-stat-item span:last-child { font-size: 11px; color: var(--muted); margin-top: 2px; }
.brain-stat-num { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.brain-stat-item.running .brain-stat-num   { color: var(--blue); }
.brain-stat-item.ok .brain-stat-num        { color: var(--success); }
.brain-stat-item.bad .brain-stat-num       { color: var(--danger); }
.brain-stat-item.neutral .brain-stat-num   { color: var(--text); }
.brain-stat-item.learning .brain-stat-num  { color: var(--magenta); }

.brain-acao-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.brain-filter-pill {
  padding: 6px 16px; border-radius: 20px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  cursor: pointer; transition: all .15s ease;
}
.brain-filter-pill:hover { border-color: var(--blue); color: var(--blue); }
.brain-filter-pill.is-active { background: var(--blue); border-color: var(--blue); color: var(--bg); }

.brain-acao-list { display: flex; flex-direction: column; gap: 16px; }

.brain-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--domain-color, var(--blue));
  border-radius: 10px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.brain-card-running { border-color: rgba(55,213,255,.35); }
.brain-card-failed  { border-color: rgba(255,95,87,.3); }

.brain-card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap;
}
.brain-card-head-left { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.brain-card-head-right { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.brain-domain-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  padding: 3px 10px; border-radius: 4px;
  background: rgba(55,213,255,.08); color: var(--blue); border: 1px solid rgba(55,213,255,.2);
}

.brain-state-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
}
.brain-state-pill.state-running   { background: rgba(55,213,255,.1);  color: var(--blue);    border: 1px solid rgba(55,213,255,.25); }
.brain-state-pill.state-completed { background: rgba(53,226,154,.1);  color: var(--success); border: 1px solid rgba(53,226,154,.25); }
.brain-state-pill.state-failed    { background: rgba(255,95,87,.1);   color: var(--danger);  border: 1px solid rgba(255,95,87,.25); }
.brain-state-pill.state-rollback  { background: rgba(253,128,67,.1);  color: var(--orange);  border: 1px solid rgba(253,128,67,.25); }
.brain-state-pill.state-learning  { background: rgba(217,108,255,.1); color: var(--magenta); border: 1px solid rgba(217,108,255,.25); }

.brain-time-meta { font-size: 11px; color: var(--dim); font-family: var(--font-mono); }

.brain-card-title {
  margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text);
}

.brain-card-body {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px;
  padding-top: 6px;
}

.brain-timeline-wrap { padding-right: 8px; }

.brain-timeline { list-style: none; margin: 0; padding: 0; }
.brain-timeline-item {
  display: grid; grid-template-columns: 24px 1fr 1.6fr 50px; gap: 10px;
  padding: 8px 0; align-items: flex-start;
}
.brain-timeline-item.is-pending { opacity: 0.5; }

.brain-timeline-marker {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  height: 100%; padding-top: 4px;
}
.brain-timeline-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(53,226,154,.18);
  flex-shrink: 0;
}
.brain-timeline-dot.is-pending {
  background: transparent; border: 2px solid var(--dim); box-shadow: none;
}
.brain-timeline-dot.is-running {
  background: var(--blue); box-shadow: 0 0 0 3px rgba(55,213,255,.22);
  animation: brain-pulse 1.6s ease-in-out infinite;
}
.brain-timeline-dot.is-failed {
  background: var(--danger); box-shadow: 0 0 0 3px rgba(255,95,87,.22);
}
@keyframes brain-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.brain-timeline-line {
  flex: 1; width: 1px; min-height: 18px;
  background: linear-gradient(180deg, rgba(53,226,154,.3), rgba(94,115,123,.1));
  margin-top: 4px;
}

.brain-timeline-meta { display: flex; flex-direction: column; gap: 2px; }
.brain-timeline-time { font-family: var(--font-mono); font-size: 10.5px; color: var(--dim); }
.brain-timeline-stage { font-size: 12px; font-weight: 700; color: var(--text); }
.brain-timeline-body p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

.brain-result-panel {
  background: rgba(6,9,11,.6);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.brain-result-row { display: flex; flex-direction: column; gap: 3px; }
.brain-result-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dim);
}
.brain-result-text { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.brain-result-text.result-success { color: var(--success); }
.brain-result-text.result-failed  { color: var(--danger); }
.brain-result-text.result-pending { color: var(--blue); }

.brain-result-summary {
  font-size: 12px; font-weight: 600;
  padding: 6px 10px; border-radius: 5px;
  margin-top: 2px;
}
.brain-result-summary.result-success { background: rgba(53,226,154,.08); color: var(--success); border-left: 2px solid rgba(53,226,154,.4); }
.brain-result-summary.result-failed  { background: rgba(255,95,87,.08);  color: var(--danger);  border-left: 2px solid rgba(255,95,87,.4); }
.brain-result-summary.result-pending { background: rgba(55,213,255,.06); color: var(--blue);    border-left: 2px solid rgba(55,213,255,.3); }

.brain-learning {
  margin-top: 6px; padding: 10px 12px; border-radius: 6px;
  background: rgba(217,108,255,.06);
  border-left: 2px solid rgba(217,108,255,.4);
}
.brain-learning-label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--magenta); margin-bottom: 4px;
}
.brain-learning p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text); }

.brain-learning.brain-learning-pending {
  background: rgba(150,160,170,.05);
  border-left-color: rgba(150,160,170,.3);
}
.brain-learning.brain-learning-pending .brain-learning-label { color: var(--dim); }
.brain-learning.brain-learning-pending p { color: var(--muted); }

.brain-card-actions {
  display: flex; gap: 8px; padding-top: 6px;
  border-top: 1px solid var(--line);
}

.brain-acao-footer-note {
  margin-top: 28px; padding: 14px 18px;
  background: rgba(55,213,255,.04);
  border: 1px solid rgba(55,213,255,.14);
  border-radius: 6px;
  font-size: 12.5px; color: var(--muted);
}
.brain-acao-footer-note strong { color: var(--blue); }

@media (max-width: 1100px) {
  .brain-card-body { grid-template-columns: 1fr; }
  .brain-timeline-item { grid-template-columns: 24px 100px 1fr 50px; }
}

/* ── Auditoria de Fontes ─────────────────────────────────────────────────── */
.audit-page { padding: 0 0 4rem; }

.audit-header { margin-bottom: 32px; }
.audit-header h2 { margin: 6px 0 6px; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.audit-sub { color: var(--muted); margin: 0 0 20px; font-size: 13.5px; }

.audit-summary {
  display: flex; gap: 20px; flex-wrap: wrap;
}
.audit-sum-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 20px; border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  min-width: 90px; text-align: center;
}
.audit-sum-item span:last-child { font-size: 11px; color: var(--muted); margin-top: 2px; }
.audit-sum-num { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.audit-sum-item.ok .audit-sum-num   { color: var(--success); }
.audit-sum-item.warn .audit-sum-num { color: var(--warning); }
.audit-sum-item.demo .audit-sum-num { color: var(--dim); }
.audit-sum-item.neutral .audit-sum-num { color: var(--blue); }

.audit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.audit-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
}
.audit-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.audit-card.audit-ok::before   { background: var(--success); }
.audit-card.audit-warn::before  { background: var(--warning); }
.audit-card.audit-demo::before  { background: var(--dim); }
.audit-card.audit-error::before { background: var(--danger); }

.audit-card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
}
.audit-fonte-nome { font-size: 14px; font-weight: 600; color: var(--text); }
.audit-fonte-cat  { font-size: 11px; color: var(--muted); margin-top: 2px; }

.audit-status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0;
}
.audit-status-pill.audit-ok   { background: rgba(53,208,127,.12); color: var(--success); border: 1px solid rgba(53,208,127,.25); }
.audit-status-pill.audit-warn  { background: rgba(246,189,67,.12); color: var(--warning); border: 1px solid rgba(246,189,67,.25); }
.audit-status-pill.audit-demo  { background: rgba(150,160,170,.1); color: var(--dim);     border: 1px solid rgba(150,160,170,.2); }
.audit-status-pill.audit-error { background: rgba(255,95,87,.12);  color: var(--danger);  border: 1px solid rgba(255,95,87,.25); }

.audit-card-metrics { display: flex; flex-wrap: wrap; gap: 5px; }
.audit-metric-chip {
  padding: 2px 8px; border-radius: 4px;
  font-size: 10.5px; font-weight: 600;
  background: rgba(55,213,255,.07);
  border: 1px solid rgba(55,213,255,.12);
  color: var(--blue);
}

.audit-card-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.audit-stat { display: flex; flex-direction: column; gap: 2px; }
.audit-stat-label { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }
.audit-stat strong { font-size: 12.5px; font-variant-numeric: tabular-nums; }

.audit-issues { display: flex; flex-direction: column; gap: 5px; }
.audit-issue-row {
  font-size: 11.5px; color: var(--warning);
  padding: 5px 8px; border-radius: 5px;
  background: rgba(246,189,67,.07);
  border-left: 2px solid rgba(246,189,67,.35);
  line-height: 1.4;
}
.audit-clean {
  font-size: 11.5px; color: var(--success);
  padding: 5px 8px; border-radius: 5px;
  background: rgba(53,208,127,.06);
  border-left: 2px solid rgba(53,208,127,.3);
}

.audit-footer-note {
  margin-top: 28px; padding: 14px 18px;
  background: rgba(55,213,255,.04);
  border: 1px solid rgba(55,213,255,.14);
  border-radius: 6px;
  font-size: 12.5px; color: var(--muted);
}
.audit-footer-note strong { color: var(--blue); }

@media (max-width: 1100px) { .audit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .audit-grid { grid-template-columns: 1fr; } }

/* ── Fila de Decisão ─────────────────────────────────────────────────────── */
.fila-page { padding: 0 0 4rem; }

.fila-header { margin-bottom: 32px; }

.fila-headline {
  display: flex; align-items: center; gap: 16px;
  margin: 6px 0 20px;
}
.fila-headline h2 { margin: 0; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }

.fila-summary-chips { display: flex; gap: 8px; }

.fila-chip {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 600;
  background: rgba(55, 213, 255, .1);
  border: 1px solid rgba(55, 213, 255, .2);
  color: var(--blue);
}
.fila-chip.danger {
  background: rgba(255, 95, 87, .1);
  border-color: rgba(255, 95, 87, .2);
  color: var(--danger);
}

.fila-filters { display: flex; gap: 8px; flex-wrap: wrap; }

.fila-filter-pill {
  padding: 6px 16px; border-radius: 20px;
  font-size: 12px; font-weight: 600;
  border: 1px solid var(--line);
  background: transparent; color: var(--muted);
  cursor: pointer; transition: all .15s ease;
}
.fila-filter-pill:hover { border-color: var(--blue); color: var(--blue); }
.fila-filter-pill.is-active {
  background: var(--blue); border-color: var(--blue); color: var(--base);
}

/* Tabs Pendentes/Rejeitadas — feature de rejeição/reabertura da Fila */
.fila-tabs {
  display: flex; gap: 8px; margin-top: 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0;
}
.fila-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 0; background: transparent;
  color: var(--muted); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: color .15s ease, border-color .15s ease;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.fila-tab:hover { color: var(--text); }
.fila-tab.is-active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}
.fila-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: rgba(255,255,255,0.06);
  color: inherit; font-size: 11px; font-weight: 700;
}
.fila-tab.is-active .fila-tab-count {
  background: rgba(55, 213, 255, .15);
}

.fila-pane { margin-top: 20px; }
.fila-pane[hidden] { display: none; }

.fila-grid-rejected { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1100px) { .fila-grid-rejected { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .fila-grid-rejected { grid-template-columns: 1fr; } }

.fila-decision-card-rejected {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; border-radius: 10px;
  background: rgba(255, 95, 87, .04);
  border: 1px solid rgba(255, 95, 87, .14);
  border-left: 3px solid var(--domain-color, var(--danger));
  opacity: .96;
  min-width: 0;
}
.fila-rejected-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.fila-rejected-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 12px;
  background: rgba(255, 95, 87, .12);
  border: 1px solid rgba(255, 95, 87, .25);
  color: var(--danger);
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
}
.fila-rejected-when {
  margin-left: auto;
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.fila-rejected-title {
  margin: 0; font-size: 14px; font-weight: 600;
  letter-spacing: -.01em; color: var(--text);
  line-height: 1.35;
  overflow-wrap: anywhere; word-break: break-word;
}
.fila-rejected-reason {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px; border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid rgba(255, 95, 87, .3);
}
.fila-rejected-reason-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.fila-rejected-reason p {
  margin: 0; font-size: 12.5px; line-height: 1.45;
  color: var(--text);
  overflow-wrap: anywhere; word-break: break-word;
  white-space: pre-wrap;
}
.fila-rejected-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--muted);
}
.fila-rejected-meta strong { color: var(--text); font-weight: 600; }
.fila-rejected-actions {
  display: flex; justify-content: flex-end; margin-top: 2px;
}
.fila-rejected-actions .ghost-button {
  font-size: 12px; padding: 6px 12px;
}

.fila-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.fila-decision-card {
  border-left: 3px solid var(--domain-color, var(--blue));
}
.decision-card.is-blocked {
  opacity: 0.92;
}
.decision-card.is-blocked .primary-button,
.fila-decision-card.is-blocked .primary-button {
  background: rgba(255,95,87,.12);
  color: var(--danger);
  cursor: not-allowed;
  border: 1px solid rgba(255,95,87,.3);
}

/* "Por que agora" — gatilho de urgência da DecisionCard */
.why-now {
  border-left: 2px solid var(--orange);
  background: rgba(253, 128, 67, .06);
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
}
.why-now-label {
  display: block;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 4px;
}
.why-now p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
}

/* Decision actions — Aprovar + Editar + Agendar + Rejeitar */
.decision-actions {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 6px;
  margin-top: auto;
}

.ghost-button {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.ghost-button:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.ghost-button.danger:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: rgba(255,95,87,.04);
}

.evidence-link {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  background: transparent;
  color: var(--blue);
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
  margin-top: -4px;
}
.evidence-link:hover { color: var(--text); text-decoration: underline; }

/* Decision head — direita comporta tipo de dado + autonomia */
.decision-head-right {
  display: flex; align-items: center; gap: 6px;
}

/* ── EvidenceDrawer — 6 seções ─────────────────────────────────────── */
.evidence-section {
  border-top: 1px solid var(--line);
  padding: 14px 0;
}
.evidence-section:first-child { border-top: none; padding-top: 8px; }

.evidence-section-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.evidence-section-head h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.evidence-section-icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px;
  font-size: 11px; font-weight: 700;
  color: var(--blue);
  background: rgba(55,213,255,.1);
  border: 1px solid rgba(55,213,255,.2);
}
.evidence-section-calculo .evidence-section-icon  { color: var(--orange); background: rgba(253,128,67,.08); border-color: rgba(253,128,67,.22); }
.evidence-section-fonte .evidence-section-icon    { color: var(--success); background: rgba(53,226,154,.08); border-color: rgba(53,226,154,.22); }
.evidence-section-risco .evidence-section-icon    { color: var(--warning); background: rgba(246,189,67,.08); border-color: rgba(246,189,67,.22); }
.evidence-section-rollbackCriterio .evidence-section-icon { color: var(--magenta); background: rgba(217,108,255,.08); border-color: rgba(217,108,255,.22); }
.evidence-section-sucessoCriterio .evidence-section-icon  { color: var(--success); background: rgba(53,226,154,.08); border-color: rgba(53,226,154,.22); }

.evidence-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  padding-left: 4px;
}
.evidence-list {
  margin: 0; padding: 0 0 0 22px;
  list-style: disc;
}
.evidence-list li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 4px;
}

/* ── AuditTimeline — 6 etapas com loop de aprendizado ──────────────── */
.audit-item {
  display: grid;
  grid-template-columns: 28px 110px 1fr 60px;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  position: relative;
}
.audit-item:not(:last-child)::after { content: none; }
.audit-item.is-pending { opacity: 0.65; }

.audit-stage-marker {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  height: 100%;
  padding-top: 4px;
}
.audit-stage-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(53,226,154,.18);
  flex-shrink: 0;
}
.audit-stage-dot.is-pending {
  background: transparent;
  border: 2px solid var(--dim);
  box-shadow: none;
}
.audit-stage-line {
  flex: 1;
  width: 1px;
  background: linear-gradient(180deg, rgba(53,226,154,.35), rgba(94,115,123,.15));
  margin-top: 4px;
  min-height: 28px;
}

.audit-stage-time {
  display: flex; flex-direction: column; gap: 4px;
}
.audit-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.04em;
}
.audit-stage-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}
.audit-stage-body p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.trust-banner {
  font-size: 11.5px; font-weight: 600;
  padding: 6px 10px; border-radius: 5px;
  letter-spacing: 0.01em;
}
.trust-banner.trust-ok    { background: rgba(53,208,127,.08);  color: var(--success); border-left: 2px solid rgba(53,208,127,.4); }
.trust-banner.trust-warn  { background: rgba(246,189,67,.08);  color: var(--warning); border-left: 2px solid rgba(246,189,67,.4); }
.trust-banner.trust-block { background: rgba(255,95,87,.1);    color: var(--danger);  border-left: 2px solid rgba(255,95,87,.5); }
.trust-banner.trust-demo  { background: rgba(150,160,170,.08); color: var(--dim);     border-left: 2px solid rgba(150,160,170,.3); }

.trust-sources {
  display: flex; gap: 5px; flex-wrap: wrap;
}
.trust-pill {
  font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 4px;
  font-family: "SFMono-Regular", monospace;
  letter-spacing: 0.02em;
}
.trust-pill.trust-pill-ok    { background: rgba(53,208,127,.1);  color: var(--success); border: 1px solid rgba(53,208,127,.2); }
.trust-pill.trust-pill-warn  { background: rgba(246,189,67,.1);  color: var(--warning); border: 1px solid rgba(246,189,67,.2); }
.trust-pill.trust-pill-demo  { background: rgba(150,160,170,.1); color: var(--dim);     border: 1px solid rgba(150,160,170,.2); }
.trust-pill.trust-pill-error { background: rgba(255,95,87,.1);   color: var(--danger);  border: 1px solid rgba(255,95,87,.2); }

@media (max-width: 1100px) { .fila-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .fila-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────────────────── */

.planejar-page .kpi-delta { font-size: 11px; margin-top: 4px; color: var(--muted); }

/* ── CARD (override scopado) ──────────────────────────── */
.planejar-page .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.planejar-page .card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.planejar-page .card-title { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--text); }
.planejar-page .card-eyebrow {
  font-size: 9.5px; letter-spacing: 0.14em; color: var(--dim); text-transform: uppercase;
}
.planejar-page .persona-tag {
  font-size: 10px; padding: 2px 8px; border-radius: 4px;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}
.planejar-page .tag-cfo { background: rgba(53, 226, 154, .15); color: var(--success); }
.planejar-page .tag-ceo { background: rgba(253, 128, 67, .15); color: var(--orange); }

/* ── SEMÁFORO + ALAVANCAS ────────────────────────────── */
.planejar-page .cfo-validacao {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px; align-items: center;
}
.planejar-page .gauge-big { position: relative; }
.planejar-page .gauge-svg-big { width: 100%; height: 220px; display: block; }
.planejar-page .gauge-readout-big { text-align: center; margin-top: -100px; pointer-events: none; }
.planejar-page .gauge-readout-big .pct {
  font-size: 56px; font-weight: 800; letter-spacing: -0.03em; line-height: 1;
}
.planejar-page .gauge-readout-big .pct-warn { color: var(--warning); }
.planejar-page .gauge-readout-big .pct-ok { color: var(--success); }
.planejar-page .gauge-readout-big .pct-bad { color: var(--danger); }
.planejar-page .gauge-readout-big .lbl {
  font-size: 11px; color: var(--muted); letter-spacing: 0.12em;
  text-transform: uppercase; margin-top: 6px;
}
.planejar-page .gauge-readout-big .gap {
  font-size: 14px; color: var(--danger); margin-top: 10px; font-weight: 700;
}
.planejar-page .formula-strip {
  background: rgba(55, 213, 255, .04);
  border: 1px dashed rgba(55, 213, 255, .2);
  border-radius: 6px;
  padding: 10px 16px;
  margin-top: 14px;
  font-size: 12.5px;
  text-align: center;
  color: var(--blue);
  font-family: "SFMono-Regular", monospace;
}
.planejar-page .alavancas-block { display: flex; flex-direction: column; gap: 14px; }
.planejar-page .alavancas-title { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.planejar-page .alavanca-row {
  display: grid; grid-template-columns: 130px 1fr 90px 80px;
  gap: 12px; align-items: center;
  padding: 0; border-bottom: 0;
}
.planejar-page .alavanca-name { font-size: 12.5px; color: var(--text); font-weight: 600; }
.planejar-page .alavanca-name span {
  display: block; font-weight: 400; font-size: 10px; color: var(--dim);
  margin-top: 2px; letter-spacing: 0.06em;
}
.planejar-page .alavanca-bar-track {
  position: relative;
  height: 22px;
  background: rgba(15, 22, 26, .85);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(113, 232, 255, .06);
}
.planejar-page .alavanca-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--orange), var(--magenta));
  border-radius: 2px;
  height: auto; overflow: hidden;
  transition: width .4s ease;
}
.planejar-page .alavanca-bar-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; padding-left: 10px;
  font-size: 11.5px; font-weight: 600; color: var(--text);
  pointer-events: none; white-space: nowrap; letter-spacing: 0.02em;
}
.planejar-page .alavanca-bar-fill.gap-marker {
  background: linear-gradient(90deg, var(--success), var(--blue));
}
.planejar-page .alavanca-bar-marker {
  position: absolute; top: -4px; bottom: -4px; width: 1.5px;
  background: var(--cream); opacity: .5;
}
.planejar-page .alavanca-bar-marker::after {
  content: "fecha gap"; position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-size: 8.5px; color: var(--cream); white-space: nowrap;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.planejar-page .alavanca-impact {
  font-size: 13px; font-weight: 700; text-align: right;
  color: var(--warning); font-family: "SFMono-Regular", monospace;
}
.planejar-page .alavanca-impact.is-ok {
  color: var(--success);
}
.planejar-page .alavanca-diag {
  font-size: 10.5px; color: var(--orange); font-weight: 600;
  cursor: pointer; text-align: right; letter-spacing: 0.03em;
  opacity: 0.55; transition: opacity .15s; white-space: nowrap;
  background: transparent; border: 0; padding: 0; font-family: inherit;
}
.planejar-page .alavanca-diag.active { opacity: 1; }
.planejar-page .alavanca-diag:hover { opacity: 1; }

/* ── DRIVER CARDS POR CANAL (override scopado) ──────── */
.planejar-page .canal-block {
  margin-bottom: 16px;
  background: transparent; border: 0; border-radius: 0; overflow: visible;
  display: block;
}
.planejar-page .canal-header {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 8px 8px 0 0;
  border-bottom: 0;
  justify-content: flex-start;
}
.planejar-page .canal-icon {
  width: 38px; height: 38px; border-radius: 7px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
  background: transparent; color: var(--text);
  flex-shrink: 0;
}
.planejar-page .canal-icon.canal-site   { background: rgba(167,139,250,.18); color: #a78bfa; }
.planejar-page .canal-icon.canal-shopee { background: rgba(238,77,45,.18); color: #ee4d2d; }
.planejar-page .canal-icon.canal-ml     { background: rgba(230,168,23,.18); color: #e6a817; }
.planejar-page .canal-icon.canal-tiktok { background: rgba(170,170,170,.18); color: #aaaaaa; }

.planejar-page .canal-name {
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  flex-shrink: 0; color: var(--text); margin-top: 0;
}
.planejar-page .canal-meta { font-size: 11.5px; color: var(--muted); margin-top: 0; }
.planejar-page .canal-meta strong { color: var(--text); font-weight: 600; }
.planejar-page .canal-meta-receita { margin-left: auto; text-align: right; }
.planejar-page .canal-meta-receita .v {
  font-size: 18px; font-weight: 700; color: var(--orange); letter-spacing: -0.01em;
}
.planejar-page .canal-meta-receita .l {
  font-size: 9.5px; color: var(--dim); letter-spacing: 0.12em; text-transform: uppercase;
}

.planejar-page .driver-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 0;
  padding: 18px 22px;
}
.planejar-page .driver-card.last { border-radius: 0 0 8px 8px; }

.planejar-page .driver-loja-name {
  font-size: 12.5px; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase;
  margin-bottom: 12px; font-weight: 600;
}
.planejar-page .driver-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.2fr;
  gap: 16px;
  align-items: start;
  padding: 0; border-bottom: 0;
}
.planejar-page .driver-input-block { display: flex; flex-direction: column; }
.planejar-page .driver-input-label {
  font-size: 11px; letter-spacing: 0.1em; color: var(--dim);
  text-transform: uppercase; margin-bottom: 6px; font-weight: 600;
}
.planejar-page .driver-input-wrap {
  position: relative;
  background: var(--surface-3);
  border: 1.5px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  transition: all .15s;
}
.planejar-page .driver-input-wrap:focus-within { border-color: var(--orange); }
.planejar-page .driver-input-wrap.is-alert { border-color: rgba(255,95,87,.45); }
.planejar-page .driver-input {
  width: 100%; background: transparent; border: 0; outline: none;
  font-family: inherit; color: var(--text); font-size: 17px; font-weight: 700;
  letter-spacing: -0.01em;
  padding: 0;
}
.planejar-page .driver-input.is-danger { color: var(--danger); }
.planejar-page .driver-input-prefix {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--dim); pointer-events: none;
}
.planejar-page .driver-input-wrap.has-prefix .driver-input { padding-left: 18px; }
.planejar-page .driver-input-suffix {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--dim); pointer-events: none;
}

.planejar-page .driver-compare {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: 8px;
  font-size: 10.5px;
  font-family: "SFMono-Regular", monospace;
}
.planejar-page .driver-compare-row {
  display: flex; justify-content: space-between; align-items: center;
}
.planejar-page .driver-compare-label { color: var(--dim); letter-spacing: 0.04em; }
.planejar-page .driver-compare-val { color: var(--muted); font-weight: 600; }
.planejar-page .driver-compare-delta { font-size: 9.5px; padding-left: 6px; }
.planejar-page .delta-up { color: var(--success); }
.planejar-page .delta-down { color: var(--danger); }
.planejar-page .delta-flat { color: var(--dim); }

.planejar-page .driver-result {
  background: linear-gradient(135deg, rgba(253, 128, 67, .14), rgba(217, 108, 255, .08));
  border: 1px solid rgba(253, 128, 67, .35);
  border-radius: 6px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.planejar-page .driver-result.is-alert { border-color: rgba(255,95,87,.3); }
.planejar-page .driver-result-row {
  display: flex; justify-content: space-between; align-items: baseline;
}
.planejar-page .driver-result-label {
  font-size: 9.5px; color: var(--dim); letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600;
}
.planejar-page .driver-result-value {
  font-size: 18px; font-weight: 800; color: var(--cream); letter-spacing: -0.01em;
}
.planejar-page .driver-result-roas {
  font-size: 11px; color: var(--success); font-weight: 600;
  font-family: "SFMono-Regular", monospace;
}
.planejar-page .driver-result-roas.is-warn { color: var(--warning); }
.planejar-page .driver-result-roas.is-danger { color: var(--danger); }

.planejar-page .driver-actions {
  margin-top: 14px;
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
}
.planejar-page .driver-meta {
  font-size: 10px; color: var(--dim); letter-spacing: 0.04em; margin-right: auto;
}
.planejar-page .driver-meta.is-danger { color: var(--danger); }

.planejar-page .btn {
  font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 8px 16px; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--line); background: transparent;
  color: var(--muted); letter-spacing: 0.02em; transition: all .15s;
}
.planejar-page .btn:hover { color: var(--text); border-color: var(--line-strong); }
.planejar-page .btn-save {
  background: var(--success); color: #06090b;
  border-color: var(--success); font-weight: 700;
}
.planejar-page .btn-save:hover { background: #4ce8aa; }

/* ── SUBCANAL SEPARATOR (override scopado) ─────────── */
.planejar-page .subcanal-sep {
  padding: 8px 22px;
  background: rgba(5, 9, 13, .88);
  border: 1px solid var(--line);
  border-top: 0; border-bottom: 0;
  display: flex; align-items: center; gap: 12px;
  justify-content: flex-start;
}
.planejar-page .subcanal-sep-label {
  font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700; color: var(--blue);
}
.planejar-page .subcanal-sep-pill {
  font-size: 9px; padding: 1px 7px; border-radius: 3px;
  background: rgba(55, 213, 255, .07); color: var(--dim); letter-spacing: 0.06em;
}
.planejar-page .subcanal-sep-info {
  margin-left: auto; font-size: 10.5px;
  color: var(--dim); font-family: "SFMono-Regular", monospace;
}
.planejar-page .subcanal-sep-info.is-danger { color: var(--danger); }
.planejar-page .subcanal-sep-info.is-success { color: var(--success); }

/* ── CANAL SUBTOTAL BAR (override scopado) ─────────── */
.planejar-page .canal-subtotal-bar {
  display: flex; align-items: center; gap: 28px;
  padding: 11px 22px;
  background: rgba(6, 10, 15, .92);
  border: 1px solid var(--line);
  border-top: 1px solid var(--line-strong);
  border-radius: 0 0 8px 8px;
  grid-template-columns: none;
}
.planejar-page .canal-subtotal-bar .st-label {
  font-size: 9.5px; color: var(--dim); letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600; flex: 1;
}
.planejar-page .canal-subtotal-bar .st-kpi { text-align: right; }
.planejar-page .canal-subtotal-bar .st-kpi .v {
  font-size: 16px; font-weight: 800; color: var(--orange);
  font-family: "SFMono-Regular", monospace; letter-spacing: -0.015em;
}
.planejar-page .canal-subtotal-bar .st-kpi .l {
  font-size: 8.5px; color: var(--dim); letter-spacing: 0.12em; text-transform: uppercase;
}
.planejar-page .canal-subtotal-bar .st-mini {
  font-size: 11.5px; color: var(--muted);
  font-family: "SFMono-Regular", monospace;
}
.planejar-page .canal-subtotal-bar .st-mini .lb {
  font-size: 9px; color: var(--dim); display: block;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px;
}

/* ── DIAGNÓSTICO INLINE (override scopado) ──────────── */
.planejar-page .diag-panel {
  margin-top: 16px; margin-bottom: 4px;
  background: rgba(7, 12, 17, .8);
  border: 1px solid rgba(253, 128, 67, .22);
  border-radius: 8px; overflow: hidden;
  animation: planejar-slide-down .2s ease;
}
@keyframes planejar-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.planejar-page .diag-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px;
  background: rgba(253, 128, 67, .05);
  border-bottom: 1px solid rgba(253, 128, 67, .14);
  justify-content: flex-start;
}
.planejar-page .diag-head-icon { font-size: 14px; line-height: 1; }
.planejar-page .diag-head-title {
  font-size: 12px; font-weight: 700; color: var(--orange); letter-spacing: 0.02em;
}
.planejar-page .diag-head-sub { font-size: 10.5px; color: var(--dim); margin-left: auto; }
.planejar-page .diag-body {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 0; background: transparent;
}
.planejar-page .diag-finding {
  padding: 14px 18px;
  border-right: 1px solid var(--line);
  background: transparent;
}
.planejar-page .diag-finding:last-child { border-right: 0; }
.planejar-page .diag-finding-label {
  font-size: 9.5px; letter-spacing: 0.12em; color: var(--dim);
  text-transform: uppercase; font-weight: 600; margin-bottom: 6px;
}
.planejar-page .diag-finding-value {
  font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 5px;
}
.planejar-page .diag-finding-detail {
  font-size: 11px; color: var(--muted); line-height: 1.55;
}
.planejar-page .diag-action {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 18px;
  background: rgba(35, 226, 154, .03);
  border-top: 1px solid var(--line);
  justify-content: flex-start;
}
.planejar-page .diag-action-label {
  font-size: 9px; letter-spacing: 0.16em; color: var(--success);
  text-transform: uppercase; font-weight: 700; white-space: nowrap;
  padding: 3px 8px; border: 1px solid rgba(35, 226, 154, .3); border-radius: 3px;
  background: transparent;
}
.planejar-page .diag-action-text {
  font-size: 12px; color: var(--text); line-height: 1.45; flex: 1;
}
.planejar-page .diag-action-btn {
  font-family: inherit; font-size: 11px; font-weight: 700;
  padding: 7px 14px; border-radius: 5px;
  border: 1px solid var(--success); background: rgba(35, 226, 154, .12);
  color: var(--success); cursor: pointer; white-space: nowrap; letter-spacing: 0.02em;
}

/* ── CENÁRIO TABLE (override scopado) ──────────────── */
.planejar-page .cenario-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.planejar-page .cenario-table th {
  font-size: 9.5px; letter-spacing: 0.14em; color: var(--dim);
  text-transform: uppercase; font-weight: 600;
  padding: 10px 8px; text-align: right;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.planejar-page .cenario-table th:first-child,
.planejar-page .cenario-table td:first-child { text-align: left; padding-left: 14px; }
.planejar-page .cenario-table th:last-child,
.planejar-page .cenario-table td:last-child  { padding-right: 14px; }
.planejar-page .cenario-table td {
  padding: 10px 8px; text-align: right;
  border-bottom: 1px dashed rgba(113, 232, 255, .06);
  font-family: "SFMono-Regular", monospace;
  font-weight: 600;
  color: var(--text);
}
.planejar-page .cenario-table td.canal-cell {
  font-family: inherit;
  display: flex; align-items: center; gap: 8px;
}
.planejar-page .cenario-canal-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

.planejar-page .cenario-table tr.subcanal-row td {
  font-size: 11.5px; color: var(--muted); padding-top: 5px; padding-bottom: 5px;
  border-bottom-color: transparent; font-weight: 500;
}
.planejar-page .cenario-table tr.subcanal-row td:first-child {
  padding-left: 28px; color: var(--dim);
}
.planejar-page .cenario-table tr.canal-group-row td { font-weight: 700; }

.planejar-page .cenario-table tr.total-row td {
  border-top: 2px solid var(--line-strong);
  border-bottom: 0;
  padding-top: 14px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--cream);
  letter-spacing: -0.01em;
}
.planejar-page .cenario-table tr.total-row td.gap-cell { color: var(--danger); }
.planejar-page .cenario-table tr.total-row td.pct-cell { color: var(--warning); }

/* ── NOTE no rodape ──────────────────────────────────── */
.planejar-page .planejar-note {
  margin-top: 30px; padding: 14px 18px;
  background: rgba(55, 213, 255, .04);
  border: 1px solid rgba(55, 213, 255, .14);
  border-radius: 6px;
  font-size: 12px; color: var(--muted);
}
.planejar-page .planejar-note strong { color: var(--blue); }

/* ── responsivo ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .planejar-page .driver-grid { grid-template-columns: repeat(3, 1fr); }
  .planejar-page .driver-grid .driver-result { grid-column: 1 / -1; }
  .planejar-page .cfo-validacao { grid-template-columns: 1fr; }
  .planejar-page .alavanca-row { grid-template-columns: 120px 1fr 80px 80px; }
  .planejar-page .diag-body { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .planejar-page .driver-grid { grid-template-columns: 1fr 1fr; }
  .planejar-page .brief-kpis { grid-template-columns: repeat(2, 1fr); }
  .planejar-page .canal-subtotal-bar { flex-wrap: wrap; gap: 14px; }
  .planejar-page .canal-meta-receita { margin-left: 0; }
  .planejar-page .canal-header { flex-wrap: wrap; }
}

/* ===========================================================================
   Fase 7 — Materializar criativo (Bloco 6 da página Conteúdo)
   ===========================================================================
   Codex: escolha de motor explícita, rastreável, com placeholder honesto
   marcando "demo · sem motor real". Sem auto-seleção. */

.conteudo-stat-item.creative .conteudo-stat-num,
.conteudo-stat-item.creative-ok .conteudo-stat-num { color: var(--magenta); }
.conteudo-stat-item.creative-ok .conteudo-stat-num { color: var(--success); }

.conteudo-bloco-materializar { background: rgba(255, 255, 255, 0.015); }

.conteudo-bloco7-brief {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 18px;
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.02);
  display: flex; flex-direction: column; gap: 16px;
}
.conteudo-bloco7-brief-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.conteudo-bloco7-brief-head h4 {
  margin: 4px 0 0; font-size: 16px; color: var(--text); line-height: 1.3;
}
.conteudo-bloco7-eyebrow {
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
}
.conteudo-bloco7-approved-pill {
  font-size: 11px; padding: 4px 10px; border-radius: 999px;
  background: rgba(56, 199, 137, 0.12); color: var(--success);
  border: 1px solid rgba(56, 199, 137, 0.3); white-space: nowrap;
}
.conteudo-bloco7-brief-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  font-size: 12px; color: var(--text); padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025); border-radius: 8px;
}
.conteudo-bloco7-brief-meta strong { color: var(--muted); font-weight: 500; margin-right: 4px; }

/* Engine selector */
.conteudo-bloco7-engine-selector {
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.018);
}
.conteudo-bloco7-engine-question {
  margin: 0 0 12px; font-size: 13px; color: var(--text);
}
.conteudo-bloco7-engine-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.engine-btn {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border-radius: 10px; cursor: pointer; text-align: left;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text); transition: transform 0.08s, border-color 0.12s, background 0.12s;
}
.engine-btn:hover { transform: translateY(-1px); }
.engine-btn .engine-icon {
  font-size: 22px; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}
.engine-btn .engine-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.engine-btn .engine-text strong { font-size: 14px; }
.engine-btn .engine-text span { font-size: 11px; color: var(--muted); }
.engine-btn .engine-status {
  font-size: 10px; padding: 3px 8px; border-radius: 999px;
  background: rgba(253, 128, 67, 0.12); color: var(--orange); text-transform: uppercase;
  letter-spacing: 0.05em;
}
.engine-btn.engine-gpt-image-2:hover {
  border-color: rgba(48, 174, 255, 0.5);
  background: rgba(48, 174, 255, 0.06);
}
.engine-btn.engine-gpt-image-2 .engine-icon { color: var(--blue); }
.engine-btn.engine-nano-banana:hover {
  border-color: rgba(255, 220, 90, 0.5);
  background: rgba(255, 220, 90, 0.05);
}
.engine-btn.engine-nano-banana .engine-icon { color: #ffd95a; }
.conteudo-bloco7-engine-hint {
  margin: 10px 0 0; font-size: 11px; color: var(--muted); line-height: 1.4;
}

/* Lista de versões geradas */
.conteudo-bloco7-versions {
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 14px;
}
.conteudo-bloco7-versions-title {
  margin: 0; font-size: 12px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.04em;
}

.creative-version-card {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
  display: flex; flex-direction: column; gap: 10px;
}
.creative-version-card.creative-status-aprovado {
  border-color: rgba(56, 199, 137, 0.4);
  background: rgba(56, 199, 137, 0.03);
}
.creative-version-card.creative-status-rejeitado {
  border-color: rgba(255, 90, 90, 0.25);
  background: rgba(255, 90, 90, 0.02);
  opacity: 0.7;
}
.creative-version-head {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.creative-version-engine { font-size: 13px; font-weight: 500; }
.creative-version-num {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); color: var(--muted);
}
.creative-status-pill {
  font-size: 11px; padding: 3px 8px; border-radius: 999px;
  margin-left: auto;
}
.creative-status-pill.pending {
  background: rgba(253, 128, 67, 0.12); color: var(--orange);
}
.creative-status-pill.approved {
  background: rgba(56, 199, 137, 0.12); color: var(--success);
}
.creative-status-pill.rejected {
  background: rgba(255, 90, 90, 0.12); color: #ff8b8b;
}

/* Placeholder demo (gradient por motor) */
.creative-placeholder {
  display: flex; align-items: center; gap: 14px; padding: 18px;
  border-radius: 10px; min-height: 96px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}
.creative-placeholder.is-gpt-image-2 {
  background: linear-gradient(135deg, rgba(48, 174, 255, 0.18), rgba(48, 174, 255, 0.04));
  border-color: rgba(48, 174, 255, 0.25);
}
.creative-placeholder.is-nano-banana {
  background: linear-gradient(135deg, rgba(255, 220, 90, 0.18), rgba(255, 180, 50, 0.04));
  border-color: rgba(255, 220, 90, 0.25);
}
.creative-placeholder-icon { font-size: 36px; opacity: 0.85; }
.is-gpt-image-2 .creative-placeholder-icon { color: var(--blue); }
.is-nano-banana .creative-placeholder-icon { color: #ffd95a; }
.creative-placeholder-meta { display: flex; flex-direction: column; gap: 3px; }
.creative-placeholder-meta strong { font-size: 14px; color: var(--text); }
.creative-placeholder-meta span { font-size: 11px; color: var(--muted); }
.creative-placeholder-demo {
  font-size: 10px !important; padding: 3px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); color: var(--orange) !important;
  align-self: flex-start; margin-top: 4px; text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Prompt (collapsible) */
.creative-version-prompt {
  background: rgba(255, 255, 255, 0.018); border-radius: 8px;
  padding: 8px 12px; font-size: 12px;
}
.creative-version-prompt summary {
  cursor: pointer; color: var(--muted); padding: 4px 0;
}
.creative-version-prompt summary:hover { color: var(--text); }
.creative-version-prompt ul {
  list-style: none; margin: 8px 0 6px; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 12px;
}
.creative-version-prompt ul strong { color: var(--muted); font-weight: 500; margin-right: 4px; }
.creative-version-prompt-text {
  margin: 6px 0 0; padding-top: 6px; color: var(--text);
  border-top: 1px solid rgba(255, 255, 255, 0.05); font-style: italic;
}

/* Ações */
.creative-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.creative-rejection-note,
.creative-approved-note {
  margin: 0; padding: 8px 12px; border-radius: 6px; font-size: 12px;
}
.creative-rejection-note {
  background: rgba(255, 90, 90, 0.06); color: #ff8b8b;
}
.creative-approved-note {
  background: rgba(56, 199, 137, 0.06); color: var(--success);
}
.creative-approved-note code {
  background: rgba(56, 199, 137, 0.15); padding: 1px 5px; border-radius: 4px;
  font-size: 11px;
}

/* Brain em Ação — chip "Criativo aprovado" (Fase 7) */
.brain-creative-badge {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: rgba(193, 102, 220, 0.13); color: var(--magenta);
  border: 1px solid rgba(193, 102, 220, 0.28);
  display: inline-flex; align-items: center; gap: 4px;
}

/* Evidence dialog — lista de criativos */
.evidence-creatives-list .creative-status-aprovado { color: var(--success); }
.evidence-creatives-list .creative-status-rejeitado { color: #ff8b8b; opacity: 0.7; }
.evidence-creatives-list .creative-status-gerado { color: var(--orange); }
.evidence-creative-demo { color: var(--muted); font-size: 11px; }

@media (max-width: 720px) {
  .conteudo-bloco7-brief-meta { grid-template-columns: 1fr 1fr; }
  .conteudo-bloco7-engine-row { grid-template-columns: 1fr; }
  .creative-version-prompt ul { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Fase 8 — Materializacao real + ajuste explicito da arte
   ===========================================================================
   - Engine status real/em-breve/indisponivel
   - Painel "Ajustar arte" (10 chips + campo livre)
   - Imagem real renderizada
   - Pills de status e ajustes no historico */

/* Engine status pills no botao */
.engine-status.real {
  background: rgba(56, 199, 137, 0.15); color: var(--success);
}
.engine-status.em-breve {
  background: rgba(170, 170, 170, 0.12); color: var(--muted);
  text-transform: lowercase; letter-spacing: 0;
}
.engine-status.not-config {
  background: rgba(255, 90, 90, 0.12); color: #ff8b8b;
}
.engine-btn.is-em-breve {
  opacity: 0.55; cursor: not-allowed;
}
.engine-btn.is-em-breve:hover { transform: none; border-color: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); }
.engine-btn.is-loading {
  opacity: 0.7; cursor: progress;
  border-color: rgba(48, 174, 255, 0.4) !important;
}
.engine-btn.is-loading .engine-icon {
  animation: pulse-engine 1.2s ease-in-out infinite;
}
@keyframes pulse-engine {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

/* Loading panel — spinner + timer + barra de progresso + fase verbal.
   Substitui o conteúdo normal do botão durante geração (60-180s). */
.engine-btn.is-loading {
  align-items: stretch;
}
.engine-icon-spinning {
  animation: engine-spin 1.6s linear infinite;
}
@keyframes engine-spin {
  to { transform: rotate(360deg); }
}
.engine-text-loading {
  flex: 1;
  display: flex; flex-direction: column; gap: 6px;
}
.engine-text-loading strong {
  display: flex; align-items: baseline; gap: 6px; font-size: 13px;
}
.engine-loading-timer {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.engine-loading-est {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  font-family: ui-monospace, monospace;
}
.engine-loading-phase {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
  font-style: italic;
}
.engine-loading-bar {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.engine-loading-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(to right, var(--blue), var(--magenta));
  border-radius: 999px;
  transition: width 600ms ease-out;
  box-shadow: 0 0 8px rgba(48, 174, 255, 0.4);
}

/* Painel "Ajustar arte" */
.conteudo-adjustments-panel {
  border: 1px solid rgba(193, 102, 220, 0.22);
  border-radius: 10px;
  padding: 14px;
  background: rgba(193, 102, 220, 0.04);
}
.conteudo-adjustments-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 6px;
}
.conteudo-adjustments-head strong { color: var(--text); font-size: 13px; }
.conteudo-adjustments-count {
  font-size: 11px; color: var(--muted); margin-left: auto;
}
.conteudo-adjustments-hint {
  margin: 0 0 10px; font-size: 11px; color: var(--muted); line-height: 1.4;
}
.conteudo-adjustments-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}

/* Chip individual (botao) */
.adj-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text); font-size: 12px; cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.adj-chip:hover { border-color: rgba(193, 102, 220, 0.4); background: rgba(193, 102, 220, 0.08); }
.adj-chip.is-filled {
  border-color: rgba(193, 102, 220, 0.5);
  background: rgba(193, 102, 220, 0.12);
}
.adj-chip-label { font-weight: 500; }
.adj-chip-value {
  color: var(--muted); font-size: 11px; font-style: italic;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adj-chip-plus, .adj-chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 12px; color: var(--muted);
}
.adj-chip-remove:hover { background: rgba(255, 90, 90, 0.2); color: #ff8b8b; }
.adj-chip-plus { color: var(--magenta); }

/* Chip aberto (form com input) */
.adj-chip.adj-chip-open {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  background: rgba(193, 102, 220, 0.1);
  border-color: var(--magenta);
  border-radius: 8px; padding: 8px 10px;
  font-size: 12px;
}
.adj-chip-open label { color: var(--text); font-weight: 500; }
.adj-chip-open input {
  flex: 1; min-width: 180px;
  padding: 5px 8px; border-radius: 6px; font-size: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
}
.adj-chip-open input:focus { border-color: var(--magenta); outline: none; }
.adj-chip-confirm, .adj-chip-cancel {
  padding: 4px 10px; border-radius: 6px; font-size: 11px; cursor: pointer;
}
.adj-chip-confirm {
  background: var(--magenta); color: white; border: none;
}
.adj-chip-cancel {
  background: transparent; color: var(--muted); border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Textarea livre */
.conteudo-adjustments-freetext {
  width: 100%; resize: vertical; min-height: 48px; max-height: 200px;
  padding: 10px; border-radius: 8px; font-size: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text); font-family: inherit; line-height: 1.4;
}
.conteudo-adjustments-freetext:focus {
  border-color: rgba(193, 102, 220, 0.5); outline: none;
}

/* Botao small (ghost compact) */
.ghost-button.small { padding: 4px 10px; font-size: 11px; }

/* Imagem real no card */
.creative-image-link {
  display: block; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #000;
  transition: border-color 0.12s;
}
.creative-image-link:hover { border-color: var(--blue); }
.creative-image {
  width: 100%; height: auto; display: block;
  max-height: 480px; object-fit: contain;
  background: rgba(0, 0, 0, 0.5);
}

/* Pill real/demo na header da versao */
.creative-real-pill {
  font-size: 10px; padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500;
}
.creative-real-pill.real {
  background: rgba(56, 199, 137, 0.15); color: var(--success);
  border: 1px solid rgba(56, 199, 137, 0.3);
}
.creative-real-pill.demo {
  background: rgba(253, 128, 67, 0.12); color: var(--orange);
  border: 1px solid rgba(253, 128, 67, 0.3);
}

/* Resumo de ajustes na versao */
.creative-version-adjustments {
  font-size: 12px; padding: 10px 12px; border-radius: 8px;
  background: rgba(193, 102, 220, 0.05);
  border-left: 2px solid var(--magenta);
  display: flex; flex-direction: column; gap: 4px;
}
.creative-adjustments-summary { color: var(--text); }
.creative-adjustments-summary strong { color: var(--magenta); margin-right: 4px; }
.creative-adjustments-free { color: var(--muted); font-size: 11px; }
.creative-adjustments-free strong { color: var(--text); margin-right: 4px; }

/* Prompt collapsible — render-as-pre pra quebra correta */
pre.creative-version-prompt-text {
  margin: 6px 0 0; padding: 10px;
  background: rgba(0, 0, 0, 0.3); border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px; line-height: 1.5; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

@media (max-width: 720px) {
  .conteudo-adjustments-chips { gap: 5px; }
  .adj-chip { font-size: 11px; padding: 5px 8px; }
  .adj-chip.adj-chip-open input { min-width: 140px; }
}

/* ===========================================================================
   Fase 9 — Iteração visual: 3 modos (gerar do zero / editar / regenerar baseada)
   ===========================================================================
   Codex pediu diferenciação CLARA entre:
     ⊕ gerada do zero
     ✦ editada (image-edit real)
     ↺ derivada (referência indireta)
   Banner no painel de ajustes muda conforme o mode escolhido.
   Cada card de versão mostra um ancestry-badge no header. */

.creative-ancestry-badge {
  font-size: 10px; padding: 2px 8px; border-radius: 999px;
  text-transform: lowercase; letter-spacing: 0.04em;
  border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 4px;
}
.creative-ancestry-badge.mode-fresh {
  background: rgba(255, 255, 255, 0.04); color: var(--muted);
  border-color: rgba(255, 255, 255, 0.08);
}
.creative-ancestry-badge.mode-edit {
  background: rgba(193, 102, 220, 0.14); color: var(--magenta);
  border-color: rgba(193, 102, 220, 0.35);
}
.creative-ancestry-badge.mode-derive {
  background: rgba(48, 174, 255, 0.13); color: var(--blue);
  border-color: rgba(48, 174, 255, 0.32);
}

/* Linha lateral colorida no card todo conforme o modo de origem
   (sublinha visualmente o caminho de iteração que o usuário tomou) */
.creative-version-card.mode-edit {
  border-left: 3px solid var(--magenta);
}
.creative-version-card.mode-regenerate-from {
  border-left: 3px solid var(--blue);
}

/* Banner do painel de ajustes mostrando o modo ativo */
.conteudo-adjustments-mode-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 10px;
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
  align-items: center;
}
.conteudo-adjustments-mode-banner .mode-icon {
  grid-row: 1 / 3;
  font-size: 22px; line-height: 1;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}
.conteudo-adjustments-mode-banner strong {
  font-size: 13px; color: var(--text);
}
.conteudo-adjustments-mode-banner .mode-detail {
  grid-column: 2 / 3;
  font-size: 11px; color: var(--muted); line-height: 1.4;
}
.conteudo-adjustments-mode-banner button {
  grid-row: 1 / 3; align-self: center;
  white-space: nowrap;
}

.conteudo-adjustments-mode-banner.mode-fresh {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.conteudo-adjustments-mode-banner.mode-fresh .mode-icon { color: var(--muted); }

.conteudo-adjustments-mode-banner.mode-edit {
  background: rgba(193, 102, 220, 0.08);
  border: 1px solid rgba(193, 102, 220, 0.3);
}
.conteudo-adjustments-mode-banner.mode-edit .mode-icon { color: var(--magenta); background: rgba(193, 102, 220, 0.18); }
.conteudo-adjustments-mode-banner.mode-edit strong { color: var(--magenta); }

.conteudo-adjustments-mode-banner.mode-derive {
  background: rgba(48, 174, 255, 0.07);
  border: 1px solid rgba(48, 174, 255, 0.3);
}
.conteudo-adjustments-mode-banner.mode-derive .mode-icon { color: var(--blue); background: rgba(48, 174, 255, 0.18); }
.conteudo-adjustments-mode-banner.mode-derive strong { color: var(--blue); }

/* Painel inteiro tinge sutilmente conforme o modo */
.conteudo-adjustments-panel.mode-edit { border-color: rgba(193, 102, 220, 0.35); }
.conteudo-adjustments-panel.mode-regenerate-from { border-color: rgba(48, 174, 255, 0.35); }

@media (max-width: 720px) {
  .conteudo-adjustments-mode-banner {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
  }
  .conteudo-adjustments-mode-banner button {
    grid-row: 3 / 4; grid-column: 1 / 3;
    margin-top: 4px;
  }
}

/* ===========================================================================
   Fase 10 — Segundo motor real + comparação entre motores
   ===========================================================================
   - Engine status 'engine_not_configured' (motor real mas sem chave/auth)
   - Stats de comparação no header de cada brief (X GPT + Y Nano · Z aprovadas)
   - Filtro de versões por motor */

.engine-status.not-config {
  background: rgba(255, 165, 0, 0.13); color: #ffaa50;
  border: 1px solid rgba(255, 165, 0, 0.3);
}
.engine-btn.is-not-config {
  opacity: 0.55; cursor: not-allowed;
}
.engine-btn.is-not-config:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 165, 0, 0.05);
}

/* Comparison stats — header de cada brief */
.conteudo-comparison {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12px; flex-wrap: wrap;
}
.conteudo-comparison.has-comparison {
  background: rgba(48, 174, 255, 0.04);
  border-color: rgba(48, 174, 255, 0.2);
}
.conteudo-comparison-label {
  color: var(--muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.04em; margin-right: 4px;
}
.conteudo-comparison-stat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
}
.conteudo-comparison-stat .cmp-engine { font-weight: 500; color: var(--text); }
.conteudo-comparison-stat .cmp-total {
  background: var(--blue); color: white;
  padding: 1px 6px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.conteudo-comparison-stat .cmp-detail {
  color: var(--muted); font-size: 11px; font-family: ui-monospace, monospace;
}

/* Filtro de versões por motor */
.conteudo-versions-filter {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; flex-wrap: wrap;
  font-size: 12px; color: var(--muted);
}
.conteudo-versions-filter > span { margin-right: 4px; }
.filter-btn {
  padding: 4px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted); font-size: 11px; cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.filter-btn:hover {
  border-color: rgba(255, 255, 255, 0.15); color: var(--text);
}
.filter-btn.is-active {
  background: var(--blue); color: white;
  border-color: var(--blue);
}

@media (max-width: 720px) {
  .conteudo-comparison { padding: 8px; gap: 6px; }
  .conteudo-comparison-label { width: 100%; margin-bottom: 4px; }
}

/* ===========================================================================
   Fase 11 — Pacotes operacionais por canal (Bloco 7 da página Conteúdo)
   ===========================================================================
   Codex: criativo aprovado vira pacote acionável por canal. 3 canais
   prioritários: Meta Ads, Instagram, WhatsApp. Aprovação cria task no Kanban. */

.conteudo-stat-item.package-ok .conteudo-stat-num { color: var(--success); }

.conteudo-bloco-pacotes { background: rgba(56, 199, 137, 0.015); }

/* Cabeçalho do brief com criativo aprovado */
.conteudo-package-brief {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 16px;
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.02);
  display: flex; flex-direction: column; gap: 14px;
}
.conteudo-package-brief-head {
  display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
}
.conteudo-package-brief-head h4 {
  margin: 4px 0 0; font-size: 16px; color: var(--text); line-height: 1.3;
}
.package-creative-thumb {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Linha de criação de pacote */
.package-create-row {
  border: 1px dashed rgba(56, 199, 137, 0.25);
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(56, 199, 137, 0.025);
}
.package-create-label {
  margin: 0 0 10px; font-size: 13px; color: var(--text);
}
.package-create-buttons {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.package-create-btn {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text); cursor: pointer; text-align: left;
  transition: border-color 0.12s, background 0.12s, transform 0.08s;
}
.package-create-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(56, 199, 137, 0.4);
  background: rgba(56, 199, 137, 0.06);
}
.package-create-btn:disabled {
  opacity: 0.45; cursor: not-allowed;
}
.package-create-btn .pkg-icon { font-size: 18px; }
.package-create-btn .pkg-label { font-size: 13px; font-weight: 500; }
.package-create-btn .pkg-format {
  font-size: 10px; color: var(--muted);
}
.package-create-btn.has-package .pkg-label { color: var(--muted); }

.package-create-hint {
  margin: 10px 0 0; font-size: 11px; color: var(--muted); line-height: 1.4;
}

/* Lista de pacotes existentes */
.package-list {
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 14px;
}
.package-list-title {
  margin: 0; font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* Card individual do pacote */
.package-card {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
  display: flex; flex-direction: column; gap: 10px;
  border-left-width: 3px;
}
.package-card.channel-meta-ads     { border-left-color: var(--blue); }
.package-card.channel-instagram    { border-left-color: var(--magenta); }
.package-card.channel-whatsapp     { border-left-color: var(--success); }
.package-card.status-aprovado {
  background: rgba(56, 199, 137, 0.04);
}
.package-card.status-rejeitado {
  opacity: 0.7;
  background: rgba(255, 90, 90, 0.02);
}
.package-card.is-editing {
  border-color: rgba(48, 174, 255, 0.4);
  box-shadow: 0 0 0 2px rgba(48, 174, 255, 0.08);
}

.package-head {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  flex-wrap: wrap;
}
.package-head-left {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.package-channel-pill {
  font-size: 13px; padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-weight: 500;
}
.channel-meta-ads .package-channel-pill  { background: rgba(48, 174, 255, 0.13); color: var(--blue); }
.channel-instagram .package-channel-pill { background: rgba(193, 102, 220, 0.13); color: var(--magenta); }
.channel-whatsapp .package-channel-pill  { background: rgba(56, 199, 137, 0.13); color: var(--success); }

.package-version-tag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); color: var(--muted);
}
.package-duplicate-badge {
  font-size: 10px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04); color: var(--muted);
  font-style: italic;
}

.package-status {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
}
.package-status.pill-draft     { background: rgba(253, 128, 67, 0.12); color: var(--orange); }
.package-status.pill-approved  { background: rgba(56, 199, 137, 0.13); color: var(--success); }
.package-status.pill-rejected  { background: rgba(255, 90, 90, 0.12); color: #ff8b8b; }

.package-format-hint {
  margin: 0; font-size: 11px; color: var(--muted); line-height: 1.4;
  padding: 6px 10px; background: rgba(255, 255, 255, 0.025);
  border-radius: 6px;
}

/* Conteúdo do pacote (modo visualização) */
.package-fields {
  margin: 0; display: flex; flex-direction: column; gap: 8px;
}
.package-fields > div {
  display: grid; grid-template-columns: 110px 1fr; gap: 10px;
  font-size: 13px; align-items: start;
}
.package-fields dt {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.04em; padding-top: 1px;
}
.package-fields dd {
  margin: 0; color: var(--text);
}
.package-fields dd.multiline {
  white-space: pre-wrap; line-height: 1.5;
}
.package-notes {
  font-style: italic; color: var(--muted) !important; font-size: 12px;
}
.cta-pill {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--orange); color: white; font-weight: 500; font-size: 12px;
}
.package-unsaved-note {
  margin: 4px 0 0; font-size: 11px; color: var(--orange);
}

/* Form de edição inline */
.package-edit-form {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; border-radius: 8px;
  background: rgba(48, 174, 255, 0.04);
  border: 1px solid rgba(48, 174, 255, 0.2);
}
.package-edit-form label {
  display: flex; flex-direction: column; gap: 4px;
}
.package-edit-form label > span {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.package-edit-form input,
.package-edit-form textarea {
  padding: 8px 10px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.3); color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px; font-family: inherit; line-height: 1.4;
}
.package-edit-form input:focus,
.package-edit-form textarea:focus {
  border-color: var(--blue); outline: none;
}
.package-edit-form textarea { resize: vertical; }
.package-edit-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 4px;
}

/* Ações do card */
.package-actions {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.package-actions-sep {
  color: var(--muted); padding: 0 4px;
}
.package-actions-label {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.04em; margin-right: 2px;
}

/* Banner do approved */
.package-approved-banner {
  padding: 10px 12px; border-radius: 8px;
  background: rgba(56, 199, 137, 0.08);
  border-left: 3px solid var(--success);
}
.package-approved-banner strong { color: var(--success); font-size: 13px; }
.package-approved-banner p { margin: 4px 0 0; font-size: 11px; color: var(--muted); }

.package-rejection-note {
  margin: 0; padding: 8px 12px; border-radius: 6px; font-size: 12px;
  background: rgba(255, 90, 90, 0.06); color: #ff8b8b;
}

/* Lista de pacotes na evidence dialog */
.evidence-packages-list .evidence-package-status.status-aprovado { color: var(--success); }
.evidence-packages-list .evidence-package-status.status-rejeitado { color: #ff8b8b; opacity: 0.7; }
.evidence-packages-list .evidence-package-status.status-rascunho { color: var(--orange); }
.evidence-package-label { color: var(--muted); font-size: 11px; }

@media (max-width: 720px) {
  .package-create-buttons { grid-template-columns: 1fr; }
  .package-fields > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ===========================================================================
   Workflow stepper (UX pós-Fase 11) — refactor pra remover colisão de
   numeração entre blocos e etapas internas do antigo Pipeline.
   ===========================================================================
   Aplica guidelines da skill ui-ux-pro-max:
     - Step indicators (Feedback)
     - Active state visualmente claro (Navigation)
     - Smooth scroll com scroll-behavior (Navigation)
     - Easing ease-out (Animation)
     - Heading hierarchy sequencial (Accessibility) */

html { scroll-behavior: smooth; }

/* Scroll-margin nas sections do workflow pra stepper sticky não tampar */
[id^="wf-step-"] { scroll-margin-top: 100px; }

/* Stepper container — sticky logo abaixo do header */
.conteudo-workflow {
  position: sticky;
  top: 8px;
  z-index: 20;
  margin: 16px 0 24px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(8, 12, 18, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.conteudo-workflow-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr) auto auto auto auto auto;
  /* 6 botões + 5 conectores ENTRE eles (HTML alterna btn/connector/btn/...) */
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 0;
}

/* Cada step é botão clicável */
.wf-step {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background 180ms ease-out, border-color 180ms ease-out, transform 120ms ease-out;
  min-width: 96px;
}
.wf-step:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
.wf-step:disabled { cursor: not-allowed; opacity: 0.45; }

.wf-step-num {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  font-weight: 600;
  transition: background 180ms ease-out, border-color 180ms ease-out;
}
.wf-step-icon { font-size: 14px; }
.wf-step-n {
  position: absolute;
  bottom: -8px; right: -8px;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: rgba(8, 12, 18, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}

.wf-step-text { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.2; }
.wf-step-label { font-size: 12px; color: var(--text); }
.wf-step-hint { font-size: 10px; color: var(--muted); text-align: center; }

/* ESTADOS — visual claro pra cada um */
.wf-step.wf-step-completed .wf-step-num {
  background: var(--success);
  border-color: var(--success);
  color: white;
}
.wf-step.wf-step-completed .wf-step-label { color: var(--success); }

.wf-step.wf-step-active .wf-step-num {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
  box-shadow: 0 0 0 4px rgba(48, 174, 255, 0.18);
  animation: wf-pulse 2.4s ease-out infinite;
}
.wf-step.wf-step-active .wf-step-label { color: var(--blue); font-weight: 600; }

.wf-step.wf-step-available .wf-step-num {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--orange);
  color: var(--orange);
}
.wf-step.wf-step-available .wf-step-label { color: var(--orange); }

.wf-step.wf-step-blocked .wf-step-num {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}

@keyframes wf-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(48, 174, 255, 0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(48, 174, 255, 0.05); }
}

/* Conectores entre steps */
.wf-connector {
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0;
  border-radius: 1px;
  transition: background 240ms ease-out;
}
.wf-connector.wf-connector-completed { background: var(--success); }
.wf-connector.wf-connector-active    { background: linear-gradient(to right, var(--success), var(--blue)); }

/* Highlight ao chegar via scroll */
.wf-flash {
  animation: wf-flash-anim 1.4s ease-out;
}
@keyframes wf-flash-anim {
  0%   { box-shadow: 0 0 0 0 rgba(48, 174, 255, 0); }
  20%  { box-shadow: 0 0 0 6px rgba(48, 174, 255, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(48, 174, 255, 0); }
}

/* Trilha (bloco fora do workflow) — visual mais discreto que blocos numerados */
.conteudo-bloco-trilha {
  margin-top: 28px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.012);
}
.conteudo-trilha-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 12px;
}
.conteudo-trilha-eyebrow {
  font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.08em;
}
.conteudo-trilha-title {
  margin: 4px 0 0; font-size: 14px; color: var(--text); font-weight: 600;
}
.conteudo-trilha-count {
  font-size: 11px; color: var(--muted);
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

/* Mobile: stepper vira lista compacta horizontal scrollável */
@media (max-width: 980px) {
  .conteudo-workflow-track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
  }
  .wf-step { scroll-snap-align: start; min-width: 90px; }
  .wf-connector { width: 24px; }
}
@media (max-width: 720px) {
  .conteudo-workflow { top: 0; border-radius: 10px; }
  .wf-step-hint { display: none; }
  .wf-step { min-width: 70px; padding: 8px; }
  .wf-step-num { width: 30px; height: 30px; }
}

/* ===========================================================================
   UX refresh — aplicação das 4 dimensões da skill ui-ux-pro-max:
     • Typography: scale modular consistente, line-height 1.5+
     • Color: sem cor-só-pra-info (Severity High) — sempre ícone + texto
     • UX: card density estruturada com seções visíveis
     • A11y: heading hierarchy + contrast forte
   =========================================================================== */

/* === Stats topo redesenhados ============================================== */
.conteudo-stats-v2 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
  margin-top: 18px;
}
.conteudo-stats-group {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.018);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.conteudo-stats-group-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
}
.conteudo-stats-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
}
.stat-card {
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-left-width: 3px;
  border-left-color: rgba(255, 255, 255, 0.1);
  display: flex; flex-direction: column; gap: 6px;
  transition: transform 180ms ease-out, border-color 180ms ease-out;
}
.stat-card:hover { transform: translateY(-1px); }
.stat-num {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
}
.stat-label {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-card.is-neutral .stat-num { color: var(--muted); }
.stat-card.is-active {
  border-left-color: var(--blue);
  background: rgba(48, 174, 255, 0.05);
}
.stat-card.is-active .stat-num { color: var(--blue); }
.stat-card.is-success {
  border-left-color: var(--success);
  background: rgba(56, 199, 137, 0.05);
}
.stat-card.is-success .stat-num { color: var(--success); }
.stat-card.is-info {
  border-left-color: var(--orange);
  background: rgba(253, 128, 67, 0.04);
}
.stat-card.is-info .stat-num { color: var(--orange); }
.stat-card.is-creative {
  border-left-color: var(--magenta);
  background: rgba(193, 102, 220, 0.05);
}
.stat-card.is-creative .stat-num { color: var(--magenta); }

.conteudo-stats-divider {
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--muted);
  opacity: 0.4;
  font-weight: 300;
}

@media (max-width: 980px) {
  .conteudo-stats-v2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .conteudo-stats-divider { display: none; }
}
@media (max-width: 720px) {
  .conteudo-stats-row { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: 1fr 1fr; }
  .stat-num { font-size: 24px; }
}

/* === Cards de causa redesenhados ========================================== */
.conteudo-causa-card {
  padding: 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--orange);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 200ms ease-out, border-color 200ms ease-out, background 200ms ease-out;
}
.conteudo-causa-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.035);
}
.conteudo-causa-card.is-active {
  border-color: var(--blue);
  border-left-color: var(--blue);
  background: rgba(48, 174, 255, 0.06);
  box-shadow: 0 0 0 2px rgba(48, 174, 255, 0.12);
}

.conteudo-causa-head {
  display: flex; align-items: flex-start; gap: 10px;
}
.conteudo-causa-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(253, 128, 67, 0.13);
  color: var(--orange);
  font-size: 16px;
  flex-shrink: 0;
}
.conteudo-causa-card.is-active .conteudo-causa-icon {
  background: rgba(48, 174, 255, 0.13);
  color: var(--blue);
}
.conteudo-causa-meta {
  display: flex; flex-direction: column; gap: 2px; flex: 1;
}
.conteudo-causa-tipo {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange);
}
.conteudo-causa-card.is-active .conteudo-causa-tipo { color: var(--blue); }
.conteudo-causa-origem {
  font-size: 11px;
  color: var(--muted);
}
.conteudo-causa-active-pill {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(48, 174, 255, 0.15);
  color: var(--blue);
  border: 1px solid rgba(48, 174, 255, 0.3);
  white-space: nowrap;
}

.conteudo-causa-titulo {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
  font-weight: 600;
}

/* Seções "Por quê" e "Resultado esperado" — caixas com label dedicado */
.conteudo-causa-section {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.018);
  border-left: 2px solid rgba(255, 255, 255, 0.06);
}
.conteudo-causa-section-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 6px;
}
.conteudo-causa-why p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.conteudo-causa-expected {
  border-left-color: rgba(56, 199, 137, 0.4);
}
.conteudo-causa-expected .conteudo-causa-section-label {
  color: var(--success);
}
.conteudo-causa-kpi {
  margin: 0;
  display: grid;
  gap: 8px;
}
.conteudo-causa-kpi > div {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 12px;
  line-height: 1.5;
}
.conteudo-causa-kpi dt {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding-top: 1px;
}
.conteudo-causa-kpi dd {
  margin: 0;
  color: var(--text);
}

/* Tags persona/canal/funil */
.conteudo-causa-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.cz-tag {
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--muted);
  white-space: nowrap;
}

.conteudo-causa-cta {
  margin-top: auto;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

/* === Saída do criativo — destaque ao chegar =============================== */
@keyframes creative-arrival {
  0%   { box-shadow: 0 0 0 0 rgba(56, 199, 137, 0); transform: scale(1); }
  20%  { box-shadow: 0 0 0 6px rgba(56, 199, 137, 0.4); transform: scale(1.005); }
  100% { box-shadow: 0 0 0 0 rgba(56, 199, 137, 0); transform: scale(1); }
}
.creative-version-card.creative-just-arrived {
  animation: creative-arrival 2.4s ease-out;
  border-color: var(--success) !important;
}

/* === Fotos do produto (referência visual) ================================= */
.conteudo-product-photos {
  padding: 14px;
  border-radius: 10px;
  background: rgba(48, 174, 255, 0.04);
  border: 1px solid rgba(48, 174, 255, 0.18);
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 12px;
}
.conteudo-product-photos-head {
  display: flex; justify-content: space-between; align-items: center;
}
.conteudo-product-photos-head strong {
  font-size: 13px; color: var(--text);
}
.conteudo-product-photos-count {
  font-size: 11px; color: var(--muted);
  padding: 3px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-variant-numeric: tabular-nums;
}
.conteudo-product-photos-hint {
  margin: 0; font-size: 11px; color: var(--muted); line-height: 1.45;
}

/* Drop/click zone */
.product-photo-dropzone {
  display: block;
  padding: 16px;
  border-radius: 10px;
  border: 2px dashed rgba(48, 174, 255, 0.3);
  background: rgba(48, 174, 255, 0.04);
  cursor: pointer;
  transition: border-color 180ms ease-out, background 180ms ease-out;
}
.product-photo-dropzone:hover:not(.is-full) {
  border-color: var(--blue);
  background: rgba(48, 174, 255, 0.08);
}
.product-photo-dropzone.is-full {
  cursor: not-allowed; opacity: 0.5;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
.product-photo-dropzone-inner {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
}
.product-photo-dropzone-icon {
  font-size: 28px;
  color: var(--blue);
  line-height: 1;
}
.product-photo-dropzone.is-full .product-photo-dropzone-icon { color: var(--muted); }
.product-photo-dropzone-inner strong {
  font-size: 13px; color: var(--text);
}
.product-photo-dropzone-inner span {
  font-size: 11px; color: var(--muted);
}

/* Thumbs das fotos anexadas */
.product-photo-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}
.product-photo-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #000;
}
.product-photo-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.product-photo-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.75);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 120ms ease-out;
}
.product-photo-remove:hover {
  background: rgba(255, 90, 90, 0.85);
  border-color: #ff8b8b;
}

/* === Refresh visual: cards com fundo sólido + contraste forte =============
   Pattern do card aprovado verde aplicado a todos os cards principais. */

/* Cards de versão de criativo — pattern reforçado */
.creative-version-card {
  background: rgba(255, 255, 255, 0.04) !important; /* override do anterior translúcido demais */
  border-left-width: 3px;
}
.creative-version-card.creative-status-aprovado {
  background: rgba(56, 199, 137, 0.08) !important;
  border-color: rgba(56, 199, 137, 0.45) !important;
  border-left-color: var(--success) !important;
}
.creative-version-card.creative-status-rejeitado {
  background: rgba(255, 90, 90, 0.04) !important;
  border-left-color: #ff8b8b;
}
.creative-version-card.creative-status-gerado {
  border-left-color: var(--orange);
}

/* Cards de pacote — reforço visual */
.package-card {
  background: rgba(255, 255, 255, 0.04) !important;
}
.package-card.status-aprovado {
  background: rgba(56, 199, 137, 0.08) !important;
}

/* Banners de mode (edit/derive) — fundo mais sólido */
.conteudo-adjustments-mode-banner.mode-edit {
  background: rgba(193, 102, 220, 0.12) !important;
}
.conteudo-adjustments-mode-banner.mode-derive {
  background: rgba(48, 174, 255, 0.1) !important;
}

/* Painel de ajustes — base mais sólida */
.conteudo-adjustments-panel {
  background: rgba(193, 102, 220, 0.06) !important;
}

/* ===========================================================================
   Refresh "Exaggerated Minimalism" — tipografia grande + progressive disclosure
   =========================================================================== */

/* Hero header (substitui antigo .conteudo-header) */
.conteudo-hero {
  padding: 32px 0 8px;
  max-width: 880px;
}
.conteudo-eyebrow {
  margin: 0 0 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  font-weight: 600;
}
.conteudo-title {
  margin: 0 0 16px;
  font-size: clamp(2rem, 4vw, 2.75rem); /* 32-44px responsivo */
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--text);
}
.conteudo-sub {
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.125rem); /* 16-18px */
  line-height: 1.55;
  color: var(--muted);
  max-width: 640px;
}
.conteudo-sub strong { color: var(--text); }

/* Stepper compacto — sem hint visível, mais respiro */
.conteudo-workflow {
  margin: 24px 0 32px;
  padding: 12px;
}
.wf-step { min-width: auto; padding: 8px 14px; gap: 6px; }
.wf-step-text { display: contents; }
.wf-step-label {
  font-size: 12px;
  color: var(--text);
  /* alinha label embaixo do círculo */
  padding-top: 2px;
}

/* Placeholder discreto pra etapas ainda bloqueadas — 1 linha só */
.wf-step-placeholder {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  margin-top: 16px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.012);
  font-size: 13px;
  color: var(--muted);
}
.wf-step-placeholder-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.wf-step-placeholder strong {
  color: var(--text); font-weight: 500; flex: 1;
}
.wf-step-placeholder span:last-child { font-size: 11px; }

/* Estado fresh: respiro extra entre header e causas, stats some */
.conteudo-page.is-fresh .conteudo-bloco {
  margin-top: 8px;
}

/* Cards de causa — fundo mais sólido + contraste forte (pattern aprovado) */
.conteudo-causa-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.conteudo-causa-card:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(253, 128, 67, 0.4) !important;
}
.conteudo-causa-card.is-active {
  background: rgba(48, 174, 255, 0.1) !important;
  border-color: rgba(48, 174, 255, 0.5) !important;
}
.conteudo-causa-titulo { color: var(--text) !important; }
.conteudo-causa-why p { color: var(--text) !important; }
.conteudo-causa-section {
  background: rgba(0, 0, 0, 0.25) !important;
}
.conteudo-causa-kpi dd { color: var(--text) !important; }

/* Bloco header com mais peso visual */
.conteudo-bloco { margin-top: 32px; padding: 28px; border-radius: 14px; }
@media (min-width: 980px) {
  .conteudo-bloco { padding: 36px; }
}

/* Override scoped: tipografia DENTRO da página Conteúdo. Aumenta todos os
   headers de bloco e melhora respiro pra reduzir a sensação de "carregado". */
.conteudo-page .board-bloco-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  gap: 14px;
  align-items: center;
}
.conteudo-page .board-bloco-num {
  font-size: 13px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(55, 213, 255, 0.15);
  border-width: 2px;
  font-weight: 800;
}
.conteudo-page .board-bloco-title {
  font-size: 22px;        /* era 15px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.conteudo-page .board-bloco-sub {
  font-size: 13px;
  color: var(--muted);
  margin-left: auto;
  line-height: 1.4;
}

/* Trilha local — limpar duplicidade de header */
.conteudo-bloco-trilha .conteudo-trilha-eyebrow {
  display: none; /* já temos o título "Trilha local" claro abaixo */
}
.conteudo-bloco-trilha .conteudo-trilha-title {
  font-size: 18px;
}

/* === Card de versão de criativo — layout 2 colunas minimalista ============
   Imagem destacada à esquerda (40%), info + ações à direita (60%).
   Mobile: colapsa pra 1 coluna. */
.creative-version-grid {
  display: grid;
  grid-template-columns: minmax(220px, 40%) 1fr;
  gap: 20px;
  align-items: start;
}
.creative-version-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.creative-version-info {
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0;
}

/* Imagem real — sem letterbox, encaixa no container 40%. */
.creative-image-link {
  background: rgba(0, 0, 0, 0.4) !important;
  display: block !important;
  padding: 0 !important;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.creative-image {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: 520px;
  object-fit: cover;
  border-radius: 10px;
}

/* Fallback quando imagem 404 — não vira mais "link sublinhado feio" */
.creative-image-missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: rgba(255, 165, 0, 0.05);
  border: 1px dashed rgba(255, 165, 0, 0.3);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  padding: 16px;
}
.creative-image-missing > span:first-child {
  font-size: 32px;
  color: rgba(255, 165, 0, 0.6);
  line-height: 1;
}
.creative-image-missing strong {
  font-size: 13px;
  color: var(--text);
}

/* Header do info: número grande + título */
.creative-version-head {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.creative-version-num-big {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
  flex-shrink: 0;
}
.creative-version-titleline {
  display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0;
}
.creative-version-titleline strong {
  font-size: 16px;
  color: var(--text);
  line-height: 1.2;
}
.creative-version-meta-line {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

/* Pill de status na direita */
.creative-version-head .creative-status-pill {
  margin-left: auto;
  align-self: flex-start;
}

/* Mobile: 1 coluna */
@media (max-width: 720px) {
  .creative-version-grid { grid-template-columns: 1fr; gap: 14px; }
  .creative-version-num-big { width: 36px; height: 36px; font-size: 14px; }
  .creative-version-titleline strong { font-size: 14px; }
}

/* ===========================================================================
   Brief estruturado (correção conceitual Codex 2026-05-08)
   ===========================================================================
   10 campos descritivos visíveis · sugestões criativas em <details>
   colapsado · título interno em destaque · headline marcada como sugestão. */

.conteudo-brief-titulo-interno {
  padding: 16px 18px;
  border-radius: 10px;
  background: rgba(48, 174, 255, 0.08);
  border-left: 3px solid var(--blue);
  margin-bottom: 18px;
}
.conteudo-brief-titulo-interno .conteudo-brief-label-strong {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue);
  font-weight: 700;
  margin-bottom: 4px;
}
.conteudo-brief-titulo-interno h4 {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.conteudo-brief-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.conteudo-brief-field {
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid rgba(255, 255, 255, 0.08);
}
.conteudo-brief-field .conteudo-brief-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.conteudo-brief-field p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

/* Sugestões criativas — colapsado por padrão, marca clara que NÃO é o brief */
.conteudo-brief-sugestoes {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(193, 102, 220, 0.04);
  border: 1px dashed rgba(193, 102, 220, 0.3);
}
.conteudo-brief-sugestoes summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--magenta);
  font-weight: 500;
  padding: 4px 0;
}
.conteudo-brief-sugestoes summary:hover { color: var(--text); }
.conteudo-brief-sugestoes-body {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(193, 102, 220, 0.2);
}
.conteudo-brief-sugestoes-body .conteudo-brief-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--magenta);
  font-weight: 600;
  margin-bottom: 4px;
}
.conteudo-brief-sugestoes-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.conteudo-brief-sugestoes-note {
  font-size: 11px !important;
  color: var(--muted) !important;
  font-style: italic;
  margin-top: 6px !important;
  padding-top: 6px;
  border-top: 1px solid rgba(193, 102, 220, 0.15);
}

@media (max-width: 720px) {
  .conteudo-brief-fields { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Fase 12 — Handoff operacional por canal
   ===========================================================================
   Pacote aprovado vira material executável. Checklist específico, instruções
   editáveis, status do handoff (rascunho/pronto/em-execução/concluído). */

.handoff-cta-block {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-top: 12px;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(48, 174, 255, 0.08);
  border-left: 3px solid var(--blue);
}
.handoff-cta-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }
.handoff-cta-text strong { color: var(--text); font-size: 14px; }
.handoff-cta-text span { color: var(--muted); font-size: 12px; line-height: 1.4; }

.handoff-card {
  margin-top: 14px;
  padding: 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--blue);
  display: flex; flex-direction: column; gap: 14px;
}
.handoff-card.status-status-ready { border-left-color: var(--orange); }
.handoff-card.status-status-exec { border-left-color: var(--magenta); background: rgba(193, 102, 220, 0.05); }
.handoff-card.status-status-done { border-left-color: var(--success); background: rgba(56, 199, 137, 0.05); }
.handoff-card.status-status-discarded { border-left-color: rgba(255, 90, 90, 0.5); opacity: 0.7; }

.handoff-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.handoff-head-left {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.handoff-channel-pill {
  font-size: 13px; padding: 4px 10px; border-radius: 999px;
  background: rgba(48, 174, 255, 0.13); color: var(--blue);
  font-weight: 500;
}
.handoff-runbook-tag {
  font-size: 10px; padding: 3px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.handoff-status-pill {
  font-size: 11px; padding: 4px 10px; border-radius: 999px;
  font-weight: 500;
}
.handoff-status-pill.status-draft     { background: rgba(170, 170, 170, 0.13); color: var(--muted); }
.handoff-status-pill.status-ready     { background: rgba(253, 128, 67, 0.15);  color: var(--orange); }
.handoff-status-pill.status-exec      { background: rgba(193, 102, 220, 0.15); color: var(--magenta); }
.handoff-status-pill.status-done      { background: rgba(56, 199, 137, 0.15);  color: var(--success); }
.handoff-status-pill.status-discarded { background: rgba(255, 90, 90, 0.13);   color: #ff8b8b; }

.handoff-section-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 8px;
}

/* Conteúdo final (snapshot do pacote) */
.handoff-content-final {
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.handoff-content-dl {
  margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.handoff-content-dl > div {
  display: grid; grid-template-columns: 110px 1fr; gap: 10px;
  font-size: 13px; align-items: start;
}
.handoff-content-dl dt {
  font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.06em; padding-top: 1px;
}
.handoff-content-dl dd { margin: 0; color: var(--text); }
.handoff-content-dl dd.multiline { white-space: pre-wrap; line-height: 1.5; }
.handoff-content-dl dd a { color: var(--blue); }

/* Checklist */
.handoff-checklist {
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(48, 174, 255, 0.04);
  border: 1px solid rgba(48, 174, 255, 0.18);
}
.handoff-checklist-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.handoff-checklist-count {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.handoff-checklist-items {
  display: flex; flex-direction: column; gap: 8px;
}
.handoff-checklist-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
  transition: background 120ms ease-out;
}
.handoff-checklist-item:hover { background: rgba(255, 255, 255, 0.04); }
.handoff-checklist-item.is-checked { background: rgba(56, 199, 137, 0.05); }
.handoff-checklist-item input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.handoff-checkbox-faux {
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 2px;
  transition: background 120ms ease-out, border-color 120ms ease-out;
  position: relative;
}
.handoff-checklist-item.is-checked .handoff-checkbox-faux {
  background: var(--success);
  border-color: var(--success);
}
.handoff-checklist-item.is-checked .handoff-checkbox-faux::after {
  content: '✓';
  color: white;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.handoff-checklist-text {
  display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0;
}
.handoff-checklist-text strong {
  font-size: 13px; color: var(--text); font-weight: 500; line-height: 1.3;
}
.handoff-checklist-hint {
  font-size: 11px; color: var(--muted); line-height: 1.45;
}
.handoff-checklist-item.is-checked strong { color: var(--success); }

/* Instruções operacionais */
.handoff-instructions {
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  border-left: 2px solid rgba(255, 255, 255, 0.08);
}
.handoff-instructions textarea {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  min-height: 60px;
}
.handoff-instructions textarea:focus {
  border-color: var(--blue); outline: none;
}
.handoff-readonly {
  margin: 0;
  padding: 8px 0 0;
  font-size: 13px; color: var(--text); line-height: 1.5;
  white-space: pre-wrap;
}
.handoff-readonly em.muted { color: var(--muted); font-style: italic; }

/* Ações */
.handoff-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.handoff-final-note {
  margin: 0; padding: 10px 14px; border-radius: 8px; font-size: 13px;
  background: rgba(56, 199, 137, 0.08);
  color: var(--success);
  border-left: 2px solid var(--success);
}
.handoff-final-note.discarded {
  background: rgba(255, 90, 90, 0.05);
  color: #ff8b8b;
  border-left-color: #ff8b8b;
}

.handoff-honesty-note {
  margin: 0; font-size: 11px; color: var(--muted); font-style: italic;
  line-height: 1.45;
}

/* Bloco "De onde veio esse texto" — rastreabilidade do brief origem */
.handoff-origin-block {
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(48, 174, 255, 0.04);
  border: 1px dashed rgba(48, 174, 255, 0.3);
}
.handoff-origin-block summary {
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.handoff-origin-block summary::before {
  content: '▾'; color: var(--blue); font-size: 11px;
  transition: transform 200ms ease-out;
}
.handoff-origin-block[open] summary::before {
  transform: rotate(180deg);
}
.handoff-origin-block summary:hover .handoff-section-label { color: var(--blue); }
.handoff-origin-block[open] summary {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(48, 174, 255, 0.15);
}
.handoff-origin-dl {
  margin: 0; display: flex; flex-direction: column; gap: 8px;
}
.handoff-origin-dl > div {
  display: grid; grid-template-columns: 160px 1fr; gap: 12px;
  font-size: 12px; align-items: start;
}
.handoff-origin-dl dt {
  font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.06em; padding-top: 1px;
}
.handoff-origin-dl dd { margin: 0; color: var(--text); line-height: 1.5; }
.handoff-origin-dl dd.multiline { white-space: normal; line-height: 1.55; }
.handoff-origin-honesty {
  margin: 8px 0 0; font-size: 11px; color: var(--muted);
  font-style: italic; line-height: 1.5;
  padding: 8px 10px; background: rgba(253, 128, 67, 0.05);
  border-radius: 6px; border-left: 2px solid rgba(253, 128, 67, 0.3);
}
.handoff-origin-honesty strong { color: var(--orange); }

/* Bloco "O que fazer agora" — guia operacional manual passo a passo */
.handoff-next-steps {
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(56, 199, 137, 0.07);
  border-left: 3px solid var(--success);
}
.handoff-next-steps-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.handoff-next-steps-icon {
  font-size: 18px;
  color: var(--success);
  line-height: 1;
}
.handoff-next-steps-head strong {
  font-size: 14px; color: var(--success);
}
.handoff-next-steps-list {
  margin: 0; padding-left: 20px;
  display: flex; flex-direction: column; gap: 8px;
  font-variant-numeric: tabular-nums;
}
.handoff-next-steps-list li {
  font-size: 13px; color: var(--text); line-height: 1.55;
}
.handoff-next-steps-list li strong {
  color: var(--text); background: rgba(56, 199, 137, 0.13);
  padding: 1px 6px; border-radius: 4px;
}
.handoff-next-steps-note {
  margin: 12px 0 0; font-size: 11px; color: var(--muted);
  font-style: italic; line-height: 1.5;
  padding-top: 8px; border-top: 1px solid rgba(56, 199, 137, 0.15);
}

@media (max-width: 720px) {
  .handoff-origin-dl > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ===========================================================================
   MODO FOCADO (refactor 2026-05-08) — pivot radical pedido pelo Rafael.
   ===========================================================================
   1 etapa por tela. Hero compacto. Migalhas no topo. Nav no rodapé. FABs
   pra Trilha + Stats. Modal "próximo passo" guiando avanço. */

/* Codex (correção de layout) — modo focado estava com max-width 960px
   centralizado dentro de um app-shell de 1680px. Resultado: ~700px de
   canvas vazio nas laterais, sensação de "tela dividida em duas". As
   outras telas operacionais (Brain, Gestão, Decisões, Feedback) usam
   o app-shell direto. Aumentar pra 1320px alinha a área útil sem
   transformar o cockpit em ultrawide. Mantém centralização e padding-
   -bottom pra nav fixa do rodapé. */
.conteudo-focused-mode {
  max-width: 1320px;
  margin: 0 auto;
  padding-bottom: 80px;
}

/* Hero compacto */
.conteudo-hero-compact {
  padding: 24px 0 12px !important;
  max-width: none !important;
}
.conteudo-hero-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
}
.conteudo-title-compact {
  margin: 4px 0 6px;
  font-size: clamp(1.4rem, 2.5vw, 1.875rem); /* 22-30px */
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--text);
}
.conteudo-sub-compact {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* Migalhas — micro stepper compacto, sticky */
.conteudo-breadcrumbs {
  position: sticky;
  top: 8px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin: 18px 0 24px;
  border-radius: 10px;
  background: rgba(8, 12, 18, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.conteudo-bc-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  transition: background 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.conteudo-bc-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
.conteudo-bc-item:disabled { cursor: not-allowed; opacity: 0.4; }
.conteudo-bc-icon { font-size: 12px; line-height: 1; }
.conteudo-bc-num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.conteudo-bc-label { font-size: 12px; }
.conteudo-bc-item.is-current {
  background: rgba(48, 174, 255, 0.15);
  color: var(--blue);
  border-color: rgba(48, 174, 255, 0.4);
  font-weight: 600;
}
.conteudo-bc-item.is-done {
  color: var(--success);
}
.conteudo-bc-item.is-done .conteudo-bc-icon { color: var(--success); }
.conteudo-bc-item.is-blocked .conteudo-bc-icon { color: rgba(255, 255, 255, 0.2); }
.conteudo-bc-sep {
  color: rgba(255, 255, 255, 0.15);
  font-size: 14px;
  margin: 0 -2px;
}

@media (max-width: 720px) {
  .conteudo-bc-label { display: none; } /* só icon + num em mobile */
}

/* Conteúdo da etapa focada — único bloco grande.
   Codex (correção visual) — antes tinha min-height: 400px que criava ~300px
   de área morta nas etapas 2/3/6 (conteúdo curto). Removido; o painel
   acompanha a altura natural do conteúdo. */
.conteudo-focused-content {
  padding: 28px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 32px;
}
.conteudo-focused-content .focused-inner {
  /* Container interno que substitui a section antiga */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Esconde headers internos antigos (renderBoardBlocoHeader) — agora título
   está no hero compacto, não duplica */
.conteudo-focused-content .board-bloco-header {
  display: none !important;
}

/* Esconde o source-strip que estava em cada bloco — informação repetitiva */
.conteudo-focused-content .source-strip {
  margin-bottom: 8px;
  font-size: 11px;
}

/* Nav do rodapé */
.conteudo-step-nav {
  position: sticky;
  bottom: 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(8, 12, 18, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  z-index: 15;
}
.conteudo-step-nav-current {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 720px) {
  .conteudo-step-nav { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
  .conteudo-step-nav-current { display: none; }
}

/* FABs — Trilha + Stats no canto inferior direito */
.conteudo-fab {
  position: fixed;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 12, 18, 0.92);
  backdrop-filter: blur(8px);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  transition: transform 180ms ease-out, border-color 180ms ease-out;
  z-index: 12;
}
.conteudo-fab:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
}
.conteudo-fab-trail { bottom: 90px; }
.conteudo-fab-stats { bottom: 30px; }

/* Codex (alívio FABs) — FAB unificado Trilha+Stats com menu disclosure. */
.conteudo-fab-menu-wrap {
  position: fixed;
  right: 20px;
  bottom: 30px;
  z-index: 30;
}
.conteudo-fab-menu-wrap > summary {
  /* sobrescreve estilo de summary default (sem marker) */
  list-style: none;
  cursor: pointer;
  /* herda visual do .conteudo-fab via classe */
  position: static;
  margin: 0;
}
.conteudo-fab-menu-wrap > summary::-webkit-details-marker { display: none; }
.conteudo-fab-menu-items {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(8, 12, 18, 0.96);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.conteudo-fab-menu-items button {
  text-align: left;
  width: 100%;
  white-space: nowrap;
  padding: 8px 12px;
}
.conteudo-fab .fab-icon { font-size: 16px; }
.conteudo-fab .fab-count {
  background: var(--blue);
  color: white;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Dialog lateral pra Trilha + Stats */
.conteudo-side-dialog {
  position: fixed;
  inset: auto 20px 20px auto;
  width: min(480px, calc(100vw - 40px));
  max-height: 75vh;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(8, 12, 18, 0.96);
  backdrop-filter: blur(16px);
  color: var(--text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
.conteudo-side-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
.side-dialog-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.side-dialog-head h3 {
  margin: 0; font-size: 14px; color: var(--text); font-weight: 600;
}
.side-dialog-body {
  padding: 16px 18px;
  overflow-y: auto;
  max-height: calc(75vh - 60px);
}

/* Dialog "Próximo passo" — modal centralizado */
.conteudo-next-dialog {
  border: none;
  border-radius: 16px;
  padding: 0;
  max-width: 480px;
  background: linear-gradient(145deg, rgba(56, 199, 137, 0.08), rgba(8, 12, 18, 0.98));
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  color: var(--text);
}
.conteudo-next-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}
.next-dialog-content {
  padding: 32px 28px;
  text-align: center;
}
.next-dialog-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 999px;
  background: rgba(56, 199, 137, 0.18);
  color: var(--success);
  font-size: 26px;
  margin-bottom: 16px;
}
.next-dialog-title {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--text);
}
.next-dialog-body {
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}
.next-dialog-actions {
  display: flex; gap: 10px; justify-content: center;
}

.conteudo-honesty-footnote {
  margin-top: 16px;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  text-align: center;
}

/* Override da Fase 14 anterior: no modo focado não usa wrap-collapsed */
.conteudo-focused-mode .conteudo-bloco {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}
/* Botão download em card de versão de criativo */
.creative-download-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.creative-download-btn:hover {
  border-color: var(--success);
  color: var(--success);
}

/* Modal "Ciclo completo" — celebração + reset */
.conteudo-cycle-dialog {
  border: none;
  border-radius: 18px;
  padding: 0;
  max-width: 560px;
  background: linear-gradient(160deg,
    rgba(56, 199, 137, 0.12) 0%,
    rgba(48, 174, 255, 0.08) 50%,
    rgba(8, 12, 18, 0.98) 100%);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
  color: var(--text);
}
.conteudo-cycle-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
}
.cycle-dialog-content {
  padding: 36px 32px 28px;
  text-align: center;
}
.cycle-dialog-icon {
  display: inline-block;
  font-size: 48px;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 20px rgba(56, 199, 137, 0.4));
  animation: cycle-pop 600ms ease-out;
}
@keyframes cycle-pop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
.cycle-dialog-title {
  margin: 0 0 6px;
  font-size: 22px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.cycle-dialog-subtitle {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.cycle-dialog-summary {
  text-align: left;
  padding: 16px 18px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 22px;
  display: flex; flex-direction: column; gap: 6px;
}
.cycle-summary-line {
  font-size: 13px; line-height: 1.55; color: var(--text);
}
.cycle-summary-line strong {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 6px;
}
.cycle-dialog-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 14px;
}
.cycle-dialog-note {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
}

/* Banner de ciclo completo na etapa 6 */
.cycle-complete-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(56, 199, 137, 0.12), rgba(48, 174, 255, 0.06));
  border: 1px solid rgba(56, 199, 137, 0.3);
  margin-bottom: 24px;
}
.cycle-banner-icon {
  font-size: 32px;
  flex-shrink: 0;
}
.cycle-banner-text {
  display: flex; flex-direction: column; gap: 3px; flex: 1;
}
.cycle-banner-text strong {
  font-size: 14px;
  color: var(--success);
}
.cycle-banner-text span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 720px) {
  .cycle-complete-banner { flex-direction: column; text-align: center; }
}

/* ===========================================================================
   Codex Fase 15 — Catálogo de causas diagnósticas (Etapa 1)
   ===========================================================================
   Filtros + cards de causa expandidos (severity, patterns, angles)
   + form de causa custom no overlay. */

.conteudo-causas-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.cz-filter-group { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.cz-filter-group label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
}
.cz-filter-group select {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.30);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}
.cz-filter-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* Severity pill */
.cz-sev-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
}
.cz-sev-alta  { color: #ff8b8b; background: rgba(255, 107, 107, 0.15); }
.cz-sev-media { color: var(--orange, #fd8043); background: rgba(253, 128, 67, 0.15); }
.cz-sev-baixa { color: #5dd1ff; background: rgba(48, 174, 255, 0.15); }

.cz-source-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cz-source-demo {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}
.cz-source-custom {
  background: rgba(167, 73, 247, 0.18);
  color: #d6a8ff;
}

.cz-pill-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.cz-evidence {
  margin: 8px 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  opacity: 0.85;
}

.cz-patterns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.cz-pattern-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(48, 174, 255, 0.10);
  color: #5dd1ff;
  border: 1px solid rgba(48, 174, 255, 0.25);
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms;
}
.cz-pattern-badge:hover { background: rgba(48, 174, 255, 0.20); }
.cz-pattern-badge.is-invalidated {
  background: rgba(255, 107, 107, 0.10);
  color: #ff8b8b;
  border-color: rgba(255, 107, 107, 0.30);
}

.cz-angles {
  margin: 6px 0 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}
.cz-angles-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
}
.cz-angles ul {
  margin: 4px 0 0; padding: 0 0 0 18px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.6;
}

.cz-invalidated-warning {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  margin: 8px 0 10px;
  border-radius: 8px;
  background: rgba(255, 107, 107, 0.08);
  border: 1px solid rgba(255, 107, 107, 0.30);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.5;
}
.cz-warn-icon { font-size: 16px; color: #ff8b8b; flex-shrink: 0; }
.cz-invalid-list { margin: 4px 0 0 18px; padding: 0; }
.cz-invalid-list li { font-size: 12px; }

/* Botão "Outra causa — descreva" */
/* Codex (correção composição etapa 1) — variante INLINE do "Outra causa".
   Antes: bloco gigante de 100% largura no fim do causasHtml competindo
   com a grade principal. Agora: CTA discreto na barra de filtros, ao
   lado de "Limpar filtros". Mantém a tonalidade roxa pra marcar que é
   ação de criação, não de filtragem. */
.cz-add-custom-inline {
  border: 1px dashed rgba(167, 73, 247, 0.35) !important;
  color: #d6a8ff !important;
  background: rgba(167, 73, 247, 0.05) !important;
}
.cz-add-custom-inline:hover {
  border-color: rgba(167, 73, 247, 0.55) !important;
  background: rgba(167, 73, 247, 0.10) !important;
}

.conteudo-causa-add-custom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 18px 20px;
  margin-top: 16px;
  border-radius: 12px;
  background: rgba(167, 73, 247, 0.05);
  border: 1px dashed rgba(167, 73, 247, 0.35);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 120ms, border-color 120ms;
}
.conteudo-causa-add-custom:hover {
  background: rgba(167, 73, 247, 0.10);
  border-color: rgba(167, 73, 247, 0.55);
}
.conteudo-causa-add-custom .cz-add-icon {
  font-size: 18px;
  color: #d6a8ff;
}
.conteudo-causa-add-custom strong {
  font-size: 14px;
  color: #d6a8ff;
}
.conteudo-causa-add-custom span {
  font-size: 12px;
  color: var(--muted);
}

/* Trilha de causa (linha de origem) reusável em brief/handoff/result */
.cz-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 8px 0 12px;
  border-radius: 8px;
  background: rgba(48, 174, 255, 0.06);
  border-left: 3px solid rgba(48, 174, 255, 0.45);
  font-size: 12.5px;
}
.cz-trail-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
}
.cz-trail-titulo {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-weight: 500;
  overflow-wrap: break-word;
}
.cz-trail-tipo {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}
.cz-trail-sev {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}
.cz-trail-missing {
  background: rgba(255, 107, 107, 0.05);
  border-left-color: rgba(255, 107, 107, 0.40);
}
.cz-trail-missing-pill {
  font-size: 11px;
  color: #ff8b8b;
  font-style: italic;
}

/* ===========================================================================
   Codex Fase 16 — Fila diagnóstica operacional (estado por causa)
   ===========================================================================
   Badges de estado (nova/em-analise/usada/descartada/expirada),
   frescor com gradiente de urgência, cluster (causas similares),
   card visual discardado/expirado dimming. */

/* Pílulas de estado */
.cz-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cz-status-pill.st-nova        { background: rgba(48, 174, 255, 0.15); color: #5dd1ff; }
.cz-status-pill.st-em-analise  { background: rgba(253, 128, 67, 0.18); color: var(--orange, #fd8043); }
.cz-status-pill.st-usada       { background: rgba(56, 199, 137, 0.15); color: var(--success, #38c789); }
.cz-status-pill.st-descartada  { background: rgba(255, 107, 107, 0.12); color: #ff8b8b; opacity: 0.85; }
.cz-status-pill.st-expirada    { background: rgba(255, 255, 255, 0.05); color: var(--muted); }

/* Pílulas de idade/frescor */
.cz-age-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}
.cz-age-fresh   { background: rgba(56, 199, 137, 0.12); color: var(--success); }
.cz-age-recent  { background: rgba(48, 174, 255, 0.10); color: #5dd1ff; }
.cz-age-aging   { background: rgba(253, 128, 67, 0.10); color: var(--orange); }
.cz-age-stale   { background: rgba(255, 107, 107, 0.10); color: #ff8b8b; font-style: italic; }
.cz-age-unknown { background: rgba(255, 255, 255, 0.04); color: var(--muted); }

/* Pílula de duplicação (cluster) */
.cz-dup-pill {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(167, 73, 247, 0.12);
  color: #d6a8ff;
  border: 1px dashed rgba(167, 73, 247, 0.35);
}

/* Card descartado / expirado: dimming */
.conteudo-causa-card.is-discarded {
  opacity: 0.55;
  background: rgba(255, 107, 107, 0.025);
  border-color: rgba(255, 107, 107, 0.20);
}
.conteudo-causa-card.is-discarded:hover {
  opacity: 0.85;
}
.conteudo-causa-card.is-expired {
  opacity: 0.65;
  border-style: dashed;
}

/* Histórico operacional — colapsado */
.cz-history {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.cz-history summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cz-history summary:hover { color: var(--text); }
.cz-history-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text);
}
.cz-history-list li {
  display: flex;
  gap: 10px;
  padding: 4px 0;
  border-top: 1px dotted rgba(255, 255, 255, 0.06);
}
.cz-history-list li:first-child { border-top: none; }
.cz-hist-time {
  font-family: var(--mono, monospace);
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
  min-width: 90px;
}

/* Bloco de ações no card */
.cz-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cz-card-actions .primary-button { flex: 1; min-width: 0; }
.cz-card-actions .ghost-button.danger {
  color: #ff8b8b;
  border-color: rgba(255, 107, 107, 0.30);
}
.cz-card-actions .ghost-button.danger:hover {
  background: rgba(255, 107, 107, 0.10);
  border-color: rgba(255, 107, 107, 0.50);
}

/* ===========================================================================
   Codex Fase 17 — Feedback como fonte operacional
   ===========================================================================
   Página dedicada com fila + agrupamento por tema + filtros + ações
   (transformar em causa, triar, descartar). */

.feedback-page {
  padding: 24px 32px 60px;
  max-width: 1400px;
  margin: 0 auto;
}

.fb-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 18px;
}
.fb-stat-card {
  flex: 1;
  min-width: 140px;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex; flex-direction: column; gap: 4px;
}
.fb-stat-num {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.fb-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
}
.fb-stat-card.fb-stat-novo .fb-stat-num         { color: #5dd1ff; }
.fb-stat-card.fb-stat-triado .fb-stat-num       { color: var(--orange, #fd8043); }
.fb-stat-card.fb-stat-virou .fb-stat-num        { color: var(--success, #38c789); }
.fb-stat-card.fb-stat-encaminhado .fb-stat-num  { color: #d6a8ff; }
.fb-stat-card.fb-stat-desc .fb-stat-num         { color: var(--muted); }

.fb-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: 12px 14px; margin-bottom: 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.fb-filter-group { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.fb-filter-group label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 600;
}
.fb-filter-group select {
  padding: 6px 8px; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.30); color: var(--text);
  font-size: 13px; font-family: inherit;
}
.fb-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.fb-list {
  display: flex; flex-direction: column; gap: 24px;
}

.fb-theme-group {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.fb-theme-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.fb-theme-icon { font-size: 22px; }
.fb-theme-title { margin: 0; font-size: 16px; color: var(--text); flex: 1; }
.fb-theme-count {
  font-size: 12px; color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 10px; border-radius: 999px;
}
.fb-theme-list {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 18px;
}

.fb-card {
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 120ms;
}
.fb-card:hover { border-color: rgba(255, 255, 255, 0.14); }
.fb-card.status-fb-st-virou { border-color: rgba(56, 199, 137, 0.35); background: rgba(56, 199, 137, 0.04); }
.fb-card.status-fb-st-desc  { opacity: 0.55; }
.fb-card.status-fb-st-triado { border-color: rgba(253, 128, 67, 0.30); }

.fb-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.fb-head-left, .fb-head-right { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fb-theme-pill, .fb-origin-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.05); color: var(--text);
}
.fb-status-pill {
  display: inline-flex; padding: 3px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.fb-st-novo         { background: rgba(48, 174, 255, 0.15); color: #5dd1ff; }
.fb-st-triado       { background: rgba(253, 128, 67, 0.18); color: var(--orange, #fd8043); }
.fb-st-virou        { background: rgba(56, 199, 137, 0.15); color: var(--success, #38c789); }
.fb-st-encaminhado  { background: rgba(167, 73, 247, 0.15); color: #d6a8ff; }
.fb-st-desc         { background: rgba(255, 107, 107, 0.10); color: #ff8b8b; opacity: 0.85; }
.fb-card.status-fb-st-encaminhado { border-color: rgba(167, 73, 247, 0.30); background: rgba(167, 73, 247, 0.04); }

.fb-excerpt {
  margin: 0 0 10px;
  padding: 10px 14px;
  border-left: 3px solid rgba(48, 174, 255, 0.45);
  background: rgba(48, 174, 255, 0.04);
  font-size: 14px;
  font-style: italic;
  color: var(--text);
  line-height: 1.5;
  border-radius: 0 8px 8px 0;
}

.fb-meta-row {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 10px; font-size: 12px; color: var(--muted);
}
.fb-occurrences strong { color: var(--text); font-size: 14px; }

.fb-dest-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: 12px;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}
.fb-dest-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 600;
}
.fb-dest-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px;
  background: color-mix(in srgb, var(--dest-color) 15%, transparent);
  color: var(--dest-color);
  border: 1px solid color-mix(in srgb, var(--dest-color) 30%, transparent);
}

.fb-actions {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.fb-actions .ghost-button.danger {
  color: #ff8b8b; border-color: rgba(255, 107, 107, 0.30);
}
.fb-meta-note {
  flex: 1; min-width: 0;
  font-size: 12.5px; color: var(--muted);
}
.fb-meta-note strong { color: var(--text); }

/* Codex Fase 17 (revisão 2) — Modal "Encaminhar pra qual área?" */
.fb-route-dialog { max-width: 560px; }
.fb-route-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 18px;
  max-height: 60vh;
  overflow-y: auto;
}
.fb-route-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 120ms, border-color 120ms, transform 80ms;
}
.fb-route-option:hover {
  background: color-mix(in srgb, var(--dest-color) 12%, rgba(0, 0, 0, 0.25));
  border-color: color-mix(in srgb, var(--dest-color) 50%, transparent);
}
.fb-route-option:active { transform: scale(0.99); }
.fb-route-option.is-suggested {
  border-left: 3px solid color-mix(in srgb, var(--dest-color) 55%, transparent);
}
.fb-route-option.is-suggested-primary {
  border-left: 3px solid var(--dest-color);
  background: color-mix(in srgb, var(--dest-color) 6%, rgba(0, 0, 0, 0.25));
}
.fb-route-icon {
  font-size: 24px;
  width: 36px;
  text-align: center;
  flex-shrink: 0;
  color: var(--dest-color);
}
.fb-route-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.fb-route-info strong {
  font-size: 14px;
  color: var(--text);
}
.fb-route-info span {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.45;
}

/* ===========================================================================
   Codex Fase 18 — Itens Operacionais por área (Página/Produto/Oferta/CRM/
   Atendimento). Aparecem em seção dedicada na página Feedback. */

.aitem-section {
  margin-top: 28px;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.aitem-section-head h2 {
  margin: 0 0 6px; font-size: 18px; color: var(--text);
}
.aitem-section-sub {
  margin: 0 0 18px; font-size: 13px; color: var(--muted); line-height: 1.5;
}

.aitem-area-group {
  margin-bottom: 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--area-color, #5dd1ff);
  overflow: hidden;
}
.aitem-area-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--area-color, #5dd1ff) 5%, transparent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.aitem-area-icon { font-size: 20px; }
.aitem-area-title { margin: 0; font-size: 15px; color: var(--text); flex: 1; }
.aitem-area-count {
  font-size: 12px; color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  padding: 3px 9px; border-radius: 999px;
}

.aitem-list {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
}
.aitem-card {
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 120ms;
}
.aitem-card:hover { border-color: rgba(255, 255, 255, 0.14); }
.aitem-card.status-aitem-st-concluido {
  background: rgba(56, 199, 137, 0.04);
  border-color: rgba(56, 199, 137, 0.20);
  opacity: 0.85;
}
.aitem-card.status-aitem-st-descartado { opacity: 0.5; }
.aitem-card.status-aitem-st-execucao   { border-color: rgba(48, 174, 255, 0.30); }
.aitem-card.status-aitem-st-aprovado   { border-color: rgba(253, 128, 67, 0.30); }

.aitem-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  margin-bottom: 8px;
}
.aitem-title {
  margin: 0; font-size: 14px; color: var(--text);
  line-height: 1.4; flex: 1; min-width: 0;
  overflow-wrap: break-word;
}
.aitem-status-pill {
  display: inline-flex; padding: 3px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  flex-shrink: 0;
}
.aitem-st-rascunho   { background: rgba(255, 255, 255, 0.05); color: var(--muted); }
.aitem-st-aprovado   { background: rgba(253, 128, 67, 0.18); color: var(--orange, #fd8043); }
.aitem-st-execucao   { background: rgba(48, 174, 255, 0.18); color: #5dd1ff; }
.aitem-st-concluido  { background: rgba(56, 199, 137, 0.15); color: var(--success, #38c789); }
.aitem-st-descartado { background: rgba(255, 107, 107, 0.10); color: #ff8b8b; }

.aitem-desc {
  margin: 0 0 10px;
  font-size: 12.5px; color: var(--muted);
  line-height: 1.5;
}

.aitem-meta-row { margin-bottom: 10px; }
.aitem-source-link {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(48, 174, 255, 0.10);
  color: #5dd1ff;
  border: 1px solid rgba(48, 174, 255, 0.25);
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms;
}
.aitem-source-link:hover { background: rgba(48, 174, 255, 0.20); }

/* Codex Fase 19 — link de task em Gestão no card do area item */
.aitem-task-link {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  background: rgba(56, 199, 137, 0.10);
  color: var(--success, #38c789);
  border: 1px solid rgba(56, 199, 137, 0.30);
  cursor: pointer;
  font-family: inherit;
  margin-left: 6px;
  transition: background 120ms;
}
.aitem-task-link:hover { background: rgba(56, 199, 137, 0.20); }
.aitem-task-link strong { color: var(--text); }

/* Codex Fase 19 — badge "feedback" no card de task em Gestão */
.gestao-source-feedback {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(48, 174, 255, 0.15);
  color: #5dd1ff;
  border: 1px solid rgba(48, 174, 255, 0.30);
  margin-left: 6px;
}
.gestao-card.is-from-feedback {
  border-left: 3px solid #5dd1ff;
}

.aitem-history {
  margin: 8px 0;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.aitem-history summary {
  cursor: pointer;
  font-size: 11px; color: var(--muted);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.aitem-history ul {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11.5px; color: var(--text);
}
.aitem-history li {
  display: flex; gap: 10px;
  padding: 3px 0;
  border-top: 1px dotted rgba(255, 255, 255, 0.06);
}
.aitem-history li:first-child { border-top: none; }
.aitem-history li span:first-child {
  font-family: var(--mono, monospace);
  font-size: 11px;
  color: var(--muted);
  min-width: 90px;
  flex-shrink: 0;
}

.aitem-actions {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.aitem-actions .ghost-button.danger {
  color: #ff8b8b; border-color: rgba(255, 107, 107, 0.30);
}
.aitem-final-note {
  font-size: 12px; color: var(--muted); font-style: italic;
}

/* Status pill inline mostrado dentro do card de feedback (linha "Encaminhado pra X · item: Y") */
.fb-item-status-inline {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-left: 6px;
  vertical-align: middle;
}

/* ===========================================================================
   Codex Fase 21 — Clareza UX global
   ===========================================================================
   Pílula universal "demo" pra qualquer card que vem de catálogo seed
   (DecisionCard, BrainAction, Pattern, GestaoTask seed). Reduz dúvida
   "isso é real ou é exemplo?" de usuário novo. */

.ux-demo-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.10);
  cursor: help;
  flex-shrink: 0;
}
.ux-demo-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

/* Card finalizado (concluído/aprovado-fechado/descartado) ganha tom mais
   discreto — fica claro que é histórico e não precisa de ação imediata.
   Aplicado em todos os tipos de card que terminaram seu ciclo. */
.aitem-card.status-aitem-st-concluido,
.gestao-card[data-state="concluido"],
.brain-card.brain-card-completed,
.fb-card.status-fb-st-virou,
.fb-card.status-fb-st-encaminhado {
  filter: saturate(0.85);
}

/* ===========================================================================
   Codex (passada de UX) — bloco curto: clareza > rastreabilidade visível
   =========================================================================== */

/* Topbar: botão glossário + container right */
.topbar-right {
  display: flex; align-items: center; gap: 14px;
}
.topbar-glossario-btn {
  background: rgba(48, 174, 255, 0.10);
  color: #5dd1ff;
  border: 1px solid rgba(48, 174, 255, 0.25);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms;
}
.topbar-glossario-btn:hover {
  background: rgba(48, 174, 255, 0.20);
}

/* Dialog Glossário */
.glossario-dialog {
  border: none;
  border-radius: 14px;
  padding: 0;
  max-width: 640px;
  width: calc(100% - 32px);
  max-height: 85vh;
  background: var(--surface, #0d1218);
  color: var(--text);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
}
.glossario-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
}
.glossario-content { padding: 24px 24px 22px; }
.glossario-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.glossario-head h2 { margin: 0; font-size: 18px; }
.glossario-intro {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}
.glossario-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 6px;
}
.glossario-list > div {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.glossario-list dt {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.glossario-list dd {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.glossario-list dd strong {
  color: var(--text);
}

/* DecisionCard comprimido — "Ver detalhes" colapsado por default */
.decision-secondary {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.decision-secondary summary {
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
  list-style: none;
}
.decision-secondary summary::-webkit-details-marker { display: none; }
.decision-secondary summary::before { content: '▸ '; transition: transform 120ms; display: inline-block; }
.decision-secondary[open] summary::before { content: '▾ '; }
.decision-secondary summary:hover { color: var(--text); }
.decision-secondary-body {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.decision-secondary-body .decision-meta { margin: 0; }

/* "Mais opções" no DecisionCard (... menu) */
.decision-more {
  display: inline-block;
  position: relative;
}
.decision-more summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.decision-more summary::-webkit-details-marker { display: none; }
.decision-more-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  padding: 6px;
  background: var(--surface, #0d1218);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  min-width: 140px;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.decision-more-menu button {
  text-align: left;
  width: 100%;
  white-space: nowrap;
}

/* C-13 fix 2026-05-17: .decision-card herda overflow:hidden do grupo
   shared com .metric-card/.panel/.module-card/.autonomy-card/.audit-item
   na linha ~504. Esse hidden é necessário pros outros cards (gradients
   decorativos), mas CORTA o .decision-more-menu absolute do menu ⋯,
   escondendo Agendar e Rejeitar. O pseudo-element decorativo .decision-card::after
   tem inset:0, então não vaza se removermos overflow:hidden — ok.
   Mesma régua pra .fila-decision-card que herda de .decision-card. */
.decision-card,
.fila-decision-card {
  overflow: visible;
}

/* Linha secundária de pílulas em Causa — mais discreta (legado, mantido pra compat) */
.cz-pill-row-secondary {
  margin-top: 4px;
  opacity: 0.65;
  font-size: 0.92em;
}
.cz-pill-row-secondary:hover { opacity: 1; }

/* Codex (rev 2 da passada de UX) — disclosure real "⋯" pras pílulas
   secundárias de causa. Default colapsado. Click revela menu flutuante
   com idade/origem/similares. Cumpre regra "max 3 sinais visíveis". */
.cz-pill-more {
  display: inline-block;
  position: relative;
  margin-left: 4px;
}
.cz-pill-more summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 120ms;
}
.cz-pill-more summary::-webkit-details-marker { display: none; }
.cz-pill-more summary:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--text);
}
.cz-pill-more-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  padding: 8px 10px;
  background: var(--surface, #0d1218);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  min-width: 180px;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.cz-pill-more-menu > * { display: inline-flex; }

/* ===========================================================================
   Codex (bloco estrutural UX) — Sala "Comece por aqui" + FABs +
   Aprendizado interativo + Gestão compacta
   =========================================================================== */

/* Sala — bloco prologo "Comece por aqui" no topo */
.board-bloco-prologo {
  border-left: 3px solid var(--blue, #5dd1ff);
  background: linear-gradient(135deg, rgba(48, 174, 255, 0.04), transparent 70%);
  margin-bottom: 28px;
}
.board-prologo-head {
  margin-bottom: 18px;
}
.board-prologo-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
  color: #5dd1ff;
}
.board-prologo-title {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.board-prologo-sub {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* Codex (rev 2 do bloco estrutural) — agora-card radicalmente comprimido.
   Visível: título · contexto curto · 1 CTA. Resto em disclosure. */
.agora-head-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.agora-context-line {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.agora-actions-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}
.agora-actions-compact .primary-button {
  flex: 1;
}
.ghost-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 120ms;
  flex-shrink: 0;
}
.ghost-button-icon::-webkit-details-marker { display: none; }
.ghost-button-icon:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--text);
}
.agora-secondary {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.agora-secondary summary {
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
  list-style: none;
}
.agora-secondary summary::-webkit-details-marker { display: none; }
.agora-secondary summary::before { content: '▸ '; transition: transform 120ms; display: inline-block; }
.agora-secondary[open] summary::before { content: '▾ '; }
.agora-secondary summary:hover { color: var(--text); }
.agora-secondary-body {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Menu "⋯" comprimido em agora-card (Top 3 da Sala) */
.agora-more {
  display: inline-block;
  position: relative;
}
.agora-more summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.agora-more summary::-webkit-details-marker { display: none; }
.agora-more-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  padding: 6px;
  background: var(--surface, #0d1218);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  min-width: 140px;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.agora-more-menu button {
  text-align: left;
  width: 100%;
  white-space: nowrap;
}

/* Codex (clareza operacional) — QUEM/AÇÃO/ONDE/CRITÉRIO visíveis no card.
   Aplica em agora-card (Sala de Conselho) e em decision-card (Fila de Decisão).
   Regra: nada de dado solto — toda informação importante responde por que /
   como / onde / quem agir. */

.agora-owner-pill,
.decision-owner-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(48, 174, 255, 0.14);
  color: #5dd1ff;
  border: 1px solid rgba(48, 174, 255, 0.30);
  letter-spacing: 0.01em;
}

.agora-action-block,
.decision-action-block {
  margin: 10px 0 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border-left: 3px solid var(--domain-color, var(--blue, #5dd1ff));
  border-radius: 0 6px 6px 0;
}
.agora-action-eyebrow,
.decision-action-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft, rgba(255, 255, 255, 0.55));
  margin-bottom: 4px;
}
.agora-action-text,
.decision-action-text {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #f1f4f8);
  line-height: 1.4;
}

.agora-skus,
.decision-skus {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
  font-size: 12px;
}
.agora-skus-label,
.decision-skus-label {
  color: var(--text-soft, rgba(255, 255, 255, 0.55));
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 2px;
}
.agora-sku-pill,
.decision-sku-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 162, 102, 0.12);
  color: #ffb87a;
  border: 1px solid rgba(255, 162, 102, 0.25);
}

.agora-done,
.decision-done {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 4px;
  padding: 8px 10px;
  background: rgba(40, 200, 120, 0.06);
  border: 1px solid rgba(40, 200, 120, 0.18);
  border-radius: 6px;
}
.agora-done-icon,
.decision-done-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(40, 200, 120, 0.18);
  color: #4cd49a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  margin-top: 1px;
}
.agora-done-text,
.decision-done-text {
  margin: 0;
  font-size: 12px;
  color: var(--text, #d8dfe8);
  line-height: 1.45;
}
.agora-done-label,
.decision-done-label {
  font-weight: 600;
  color: #4cd49a;
}

.agora-where-btn,
.decision-where-btn {
  font-size: 12px;
  white-space: nowrap;
}

/* Codex (clareza operacional — extensão pros 4 cards: Brain/Feedback/Gestão/Aprendizado).
   Reusa a mesma régua visual: owner-pill + action-block + done block. */

.brain-owner-pill,
.fb-owner-pill,
.gestao-owner-pill,
.learning-owner-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(48, 174, 255, 0.14);
  color: #5dd1ff;
  border: 1px solid rgba(48, 174, 255, 0.30);
  letter-spacing: 0.01em;
}

.brain-action-block,
.fb-action-block,
.gestao-action-block {
  margin: 10px 0 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border-left: 3px solid var(--domain-color, var(--blue, #5dd1ff));
  border-radius: 0 6px 6px 0;
}
.brain-action-eyebrow,
.fb-action-eyebrow,
.gestao-action-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft, rgba(255, 255, 255, 0.55));
  margin-bottom: 4px;
}
.brain-action-text,
.fb-action-text,
.gestao-action-text {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #f1f4f8);
  line-height: 1.4;
}

.brain-done,
.fb-done,
.gestao-done,
.learning-done {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 4px;
  padding: 8px 10px;
  background: rgba(40, 200, 120, 0.06);
  border: 1px solid rgba(40, 200, 120, 0.18);
  border-radius: 6px;
}
.brain-done-icon,
.fb-done-icon,
.gestao-done-icon,
.learning-done-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(40, 200, 120, 0.18);
  color: #4cd49a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  margin-top: 1px;
}
.brain-done-text,
.fb-done-text,
.gestao-done-text,
.learning-done-text {
  margin: 0;
  font-size: 12px;
  color: var(--text, #d8dfe8);
  line-height: 1.45;
}
.brain-done-label,
.fb-done-label,
.gestao-done-label,
.learning-done-label {
  font-weight: 600;
  color: #4cd49a;
}

.brain-where-btn {
  font-size: 12px;
  white-space: nowrap;
}

/* Codex (Conteúdo etapa 4) — hierarquia de CTAs: Aprovar domina,
   secundários (Trocar combinação / Rejeitar) entram em menu ⋯. */
.conteudo-approve-cta {
  flex: 0 1 auto;
  padding: 10px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.conteudo-rascunho-more {
  display: inline-block;
  position: relative;
}
.conteudo-rascunho-more > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.conteudo-rascunho-more > summary::-webkit-details-marker { display: none; }
.conteudo-rascunho-more-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 220px;
  padding: 6px;
  background: var(--surface, #0d1218);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.conteudo-rascunho-more-menu button {
  text-align: left;
  width: 100%;
  white-space: nowrap;
}

/* Codex (Conteúdo etapa 4) — campos do brief editáveis inline.
   Visual de "preenchido" (não input sublinhado de form). Borda sutil,
   pra parecer texto até hover/focus. Largura total. */
.conteudo-brief-edit {
  width: 100%;
  padding: 6px 10px;
  margin-top: 4px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: border-color 120ms, background 120ms;
  box-sizing: border-box;
  resize: none;
}
.conteudo-brief-edit:hover {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
.conteudo-brief-edit:focus {
  outline: none;
  border-color: var(--blue, #5dd1ff);
  background: rgba(48, 174, 255, 0.06);
}
.conteudo-brief-edit-long {
  min-height: 56px;
  line-height: 1.4;
  resize: vertical;
}

/* Codex (Conteúdo: ajustes visuais etapas 2-6).
   --- Etapa 3: CTA "Gerar rascunho" compacto mas dominante (era ghost-button
       discreto à direita; agora primary-button no tom da página). */
.matriz-cta {
  padding: 6px 12px !important;
  font-size: 12px !important;
  white-space: nowrap;
}

/* --- Etapa 5: blocos opcionais (fotos + ajustes) em <details>.
       Antes ocupavam ~420px sempre, competindo com a escolha de motor. */
.conteudo-product-photos-details,
.conteudo-adjustments-details {
  margin: 12px 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.conteudo-product-photos-summary,
.conteudo-adjustments-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.conteudo-product-photos-summary::-webkit-details-marker,
.conteudo-adjustments-summary::-webkit-details-marker { display: none; }
.conteudo-product-photos-summary::before,
.conteudo-adjustments-summary::before {
  content: '▸';
  margin-right: 8px;
  color: var(--muted);
  transition: transform 120ms ease-out;
  display: inline-block;
}
.conteudo-product-photos-details[open] .conteudo-product-photos-summary::before,
.conteudo-adjustments-details[open] .conteudo-adjustments-summary::before {
  transform: rotate(90deg);
}
.conteudo-product-photos-details[open] .conteudo-product-photos-summary,
.conteudo-adjustments-details[open] .conteudo-adjustments-summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.conteudo-product-photos-details > .conteudo-product-photos,
.conteudo-adjustments-body {
  padding: 14px;
}
.conteudo-adjustments-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

/* Codex (hierarquia global) — pílula no header da página indica intenção:
   "Tela de ação" (módulos onde se decide/agir) vs "Tela de análise"
   (drill-down, analytics). Usuário novo precisa entender que está num
   modo ou outro pra não esperar acionabilidade onde não tem. */
.page-kind-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  cursor: help;
}
.page-kind-action {
  background: rgba(48, 174, 255, 0.14);
  color: #5dd1ff;
  border: 1px solid rgba(48, 174, 255, 0.30);
}
.page-kind-analysis {
  background: rgba(255, 220, 120, 0.10);
  color: #ffd478;
  border: 1px solid rgba(255, 220, 120, 0.25);
}

/* Codex (alívio fb-card) — destinos sugeridos pela IA agora colapsados.
   Default: usuário lê citação + ação agora + critério + meta sem o ruído
   visual dos chips de IA. Quem quer ver, abre. */
.fb-dest-details {
  margin: 8px 0 4px;
  font-size: 12px;
}
.fb-dest-summary {
  cursor: pointer;
  color: var(--text-soft, rgba(255, 255, 255, 0.55));
  font-size: 11px;
  padding: 2px 0;
  list-style: none;
  user-select: none;
}
.fb-dest-summary::-webkit-details-marker { display: none; }
.fb-dest-summary::before { content: '▸ '; transition: transform 120ms; display: inline-block; }
.fb-dest-details[open] .fb-dest-summary::before { content: '▾ '; }
.fb-dest-summary:hover { color: var(--text); }
.fb-dest-details .fb-dest-row {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Menu "⋯" comprimido no brain-card */
.brain-more {
  display: inline-block;
  position: relative;
}
.brain-more summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.brain-more summary::-webkit-details-marker { display: none; }
.brain-more-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  padding: 6px;
  background: var(--surface, #0d1218);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  min-width: 160px;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.brain-more-menu button {
  text-align: left;
  width: 100%;
  white-space: nowrap;
}

/* FAB "Briefs em paralelo" no Conteúdo (substitui badge no breadcrumb) */
.conteudo-fab-parallel {
  bottom: 240px;  /* acima do FAB Trilha */
  background: rgba(48, 174, 255, 0.18);
  color: #5dd1ff;
  border: 1px solid rgba(48, 174, 255, 0.40);
}
.conteudo-fab-parallel:hover {
  background: rgba(48, 174, 255, 0.28);
}
.conteudo-fab-parallel .fab-count {
  background: var(--orange, #fd8043);
  color: #06090b;
}

/* Aprendizado — botão "Editar" no card de pattern */
.learning-pattern-actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  display: flex;
  gap: 8px;
}

/* Gestão card compacto (cards 1 linha + detalhes em <details>) */
.gestao-card-essentials {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
  font-size: 12px;
}
.gestao-essential-impact {
  font-weight: 700;
  color: var(--text);
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}
.gestao-essential-impact.impact-receita  { color: var(--success, #38c789); }
.gestao-essential-impact.impact-protecao { color: var(--orange, #fd8043); }
.gestao-essential-due {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.gestao-card-more {
  display: inline-block;
  position: relative;
}
.gestao-card-more summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.gestao-card-more summary::-webkit-details-marker { display: none; }
.gestao-card-more-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  padding: 10px 12px;
  background: var(--surface, #0d1218);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  min-width: 220px;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.gestao-card-more-menu .gestao-card-note {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.gestao-card-more-menu .gestao-card-meta-line {
  margin: 0 0 6px;
  font-size: 11.5px;
  color: var(--muted);
}
.gestao-card-more-menu .gestao-card-meta-line strong { color: var(--text); }

/* Source badge "feedback" + pill reversa "origem feedback" no card de causa */
.cz-source-badge.cz-source-feedback {
  background: rgba(48, 174, 255, 0.18);
  color: #5dd1ff;
}
.cz-feedback-origin-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 600;
  background: rgba(48, 174, 255, 0.10);
  color: #5dd1ff;
  border: 1px solid rgba(48, 174, 255, 0.25);
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms;
}
.cz-feedback-origin-pill:hover {
  background: rgba(48, 174, 255, 0.20);
}

/* Codex Fase 15 (revisão 2) — Bloco "Originado de causas" no card do pattern.
   Aparece quando o pattern recebeu learning_promoted_from_handoff. */
.learning-causa-origem {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(48, 174, 255, 0.06);
  border-left: 3px solid rgba(48, 174, 255, 0.45);
}
.learning-causa-origem-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5dd1ff;
  margin-bottom: 8px;
}
.learning-causa-origem-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.learning-causa-origem-item {
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.20);
}
.learning-causa-origem-item strong {
  display: block;
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
  margin-bottom: 4px;
  overflow-wrap: break-word;
}
.learning-causa-origem-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* Modal "Outra causa — descreva" */
.conteudo-custom-cause-dialog {
  border: none;
  border-radius: 14px;
  padding: 0;
  max-width: 560px;
  width: calc(100% - 32px);
  background: linear-gradient(160deg, rgba(167, 73, 247, 0.10) 0%, rgba(8, 12, 18, 0.98) 60%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
  color: var(--text);
}
.conteudo-custom-cause-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
}
.custom-cause-content { padding: 24px 24px 18px; }
.custom-cause-eyebrow {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #d6a8ff;
  background: rgba(167, 73, 247, 0.15);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.custom-cause-title {
  margin: 0 0 6px;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.custom-cause-sub {
  margin: 0 0 16px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.custom-cause-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}
.custom-cause-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.custom-cause-form label > span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
}
.custom-cause-form input,
.custom-cause-form select,
.custom-cause-form textarea {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.30);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}
.custom-cause-form input:focus,
.custom-cause-form select:focus,
.custom-cause-form textarea:focus {
  outline: none;
  border-color: rgba(167, 73, 247, 0.55);
  box-shadow: 0 0 0 3px rgba(167, 73, 247, 0.15);
}
.custom-cause-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 14px;
}

/* ─── Codex Fase 14 fix #3 — Badge numérico nos breadcrumbs 5/6 ───
   Aparece só quando há paralelismo (>1 brief em estados diferentes).
   Bolha discreta laranja ao lado do label, com tooltip detalhado. */
.conteudo-bc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--orange, #fd8043);
  color: #06090b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  flex-shrink: 0;
}
.conteudo-bc-item.is-current .conteudo-bc-badge {
  background: #5dd1ff;
  color: #06090b;
}
/* Codex Fase 14b ajuste F — badge clicável (abre dialog paralelos).
   pointer-events: auto sobrescreve possível inherit do button parent. */
.conteudo-bc-badge[data-conteudo-open-parallel] {
  cursor: pointer;
  pointer-events: auto;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.conteudo-bc-badge[data-conteudo-open-parallel]:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 3px rgba(253, 128, 67, 0.25);
}

/* Codex Fase 14b ajuste F — Dialog "Briefs em paralelo" */
.conteudo-parallel-dialog {
  border: none;
  border-radius: 14px;
  padding: 0;
  max-width: 520px;
  width: calc(100% - 32px);
  background: linear-gradient(160deg, rgba(48, 174, 255, 0.12) 0%, rgba(8, 12, 18, 0.98) 60%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
  color: var(--text);
}
.conteudo-parallel-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
}
.parallel-dialog-content {
  padding: 24px 24px 18px;
}
.parallel-dialog-eyebrow {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #5dd1ff;
  background: rgba(48, 174, 255, 0.15);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.parallel-dialog-title {
  margin: 0 0 4px;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.parallel-dialog-sub {
  margin: 0 0 16px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.parallel-dialog-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
}
.parallel-dialog-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.parallel-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.parallel-item-titulo {
  font-size: 13px;
  color: var(--text);
  overflow-wrap: break-word;
  word-break: break-word;
}
.parallel-item-estado {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.parallel-item-estado-pending  { color: var(--orange, #fd8043); }
.parallel-item-estado-approved { color: var(--success, #38c789); }
.parallel-item-estado-done     { color: var(--success, #38c789); opacity: 0.8; }
.parallel-item-estado-empty    { color: var(--muted); }
.parallel-dialog-empty {
  margin: 16px 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}
.parallel-dialog-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Highlight do card recém-selecionado pelo dialog paralelo */
.parallel-just-selected {
  animation: parallel-flash 1800ms ease-out;
}
@keyframes parallel-flash {
  0%   { box-shadow: 0 0 0 4px rgba(48, 174, 255, 0); }
  20%  { box-shadow: 0 0 0 4px rgba(48, 174, 255, 0.5); }
  100% { box-shadow: 0 0 0 4px rgba(48, 174, 255, 0); }
}

/* ─── Codex Fase 14 fix #2 — Banner discreto de rascunho aberto ───
   Aparece no topo da etapa atual (entre breadcrumbs e content) quando
   há pendingPackage/Handoff/Result Edits. */
.conteudo-pending-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin: 14px 0 4px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(253, 128, 67, 0.12), rgba(253, 128, 67, 0.04));
  border: 1px solid rgba(253, 128, 67, 0.35);
}
.pending-banner-icon {
  font-size: 22px;
  color: var(--orange, #fd8043);
  flex-shrink: 0;
}
.pending-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}
.pending-banner-text strong {
  font-size: 13px;
  color: var(--orange, #fd8043);
}
.pending-banner-text span {
  font-size: 12px;
  color: var(--muted);
}

/* ─── Modal "Sair com rascunho?" — Codex Fase 14 fix #2 ─── */
.conteudo-leave-confirm-dialog {
  border: none;
  border-radius: 14px;
  padding: 0;
  max-width: 480px;
  width: calc(100% - 32px);
  background: linear-gradient(160deg, rgba(253, 128, 67, 0.10) 0%, rgba(8, 12, 18, 0.98) 60%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
  color: var(--text);
}
.conteudo-leave-confirm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
}
.leave-confirm-content {
  padding: 24px 24px 20px;
}
.leave-confirm-eyebrow {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--orange, #fd8043);
  background: rgba(253, 128, 67, 0.15);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.leave-confirm-title {
  margin: 0 0 14px;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.leave-confirm-body {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 18px;
}
.leave-confirm-body p { margin: 0 0 8px; }
.leave-confirm-body ul { margin: 8px 0; padding-left: 18px; }
.leave-confirm-body li { margin-bottom: 4px; }
.leave-confirm-body .leave-confirm-hint {
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
  margin-top: 10px;
}
.leave-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
@media (max-width: 480px) {
  .leave-confirm-actions { flex-direction: column-reverse; }
  .leave-confirm-actions button { width: 100%; }
}

/* Modal "Edição pontual" — atalho rápido pra editar uma versão específica
   sem precisar abrir o painel cheio de chips. Default 3 opções. */
.conteudo-edit-dialog {
  border: none;
  border-radius: 14px;
  padding: 0;
  max-width: 520px;
  width: calc(100% - 32px);
  background: linear-gradient(160deg,
    rgba(167, 73, 247, 0.10) 0%,
    rgba(8, 12, 18, 0.98) 60%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
  color: var(--text);
}
.conteudo-edit-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
}
.edit-dialog-content {
  padding: 26px 26px 22px;
}
.edit-dialog-head {
  margin-bottom: 18px;
}
.edit-dialog-eyebrow {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #d6a8ff;
  background: rgba(167, 73, 247, 0.15);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.edit-dialog-title {
  margin: 0 0 4px;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.edit-dialog-subtitle {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.edit-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.edit-dialog-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: -8px;
}
.edit-dialog-textarea {
  width: 100%;
  min-height: 110px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  resize: vertical;
  transition: border-color 120ms;
}
.edit-dialog-textarea:focus {
  outline: none;
  border-color: rgba(167, 73, 247, 0.55);
  box-shadow: 0 0 0 3px rgba(167, 73, 247, 0.15);
}
.edit-dialog-textarea::placeholder {
  color: rgba(255, 255, 255, 0.30);
  font-style: italic;
}
.edit-dialog-hint {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
}
.edit-dialog-count {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px 10px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.edit-dialog-count legend {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0 6px;
}
.edit-dialog-count label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  padding: 4px 0;
}
.edit-dialog-count label:hover {
  color: #d6a8ff;
}
.edit-dialog-count input[type="radio"] {
  accent-color: #a749f7;
  width: 14px;
  height: 14px;
}
.edit-dialog-count label strong {
  color: var(--text);
}

/* Codex Fase 14b ajuste D — chips estruturados em <details> colapsado.
   Caminho avançado pra ajuste estruturado (CTA → overlay laranja, etc).
   Default fechado: usuário casual edita só pelo textarea livre. */
.edit-dialog-chips-section {
  margin-top: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
.edit-dialog-chips-section[open] {
  background: rgba(0, 0, 0, 0.28);
}
.edit-dialog-chips-section summary {
  cursor: pointer;
  padding: 10px 14px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  user-select: none;
}
.edit-dialog-chips-section summary::-webkit-details-marker { display: none; }
.edit-dialog-chips-summary-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.edit-dialog-chips-section[open] .edit-dialog-chips-summary-label {
  color: #d6a8ff;
}
.edit-dialog-chips-count {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.7;
}
.edit-dialog-chips-help {
  margin: 0 14px 10px;
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
}
.edit-dialog-chips-grid {
  padding: 0 14px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.edit-dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 520px) {
  .edit-dialog-content { padding: 22px 18px 18px; }
  .edit-dialog-actions { flex-direction: column-reverse; }
  .edit-dialog-actions button { width: 100%; }
}

/* Lista de handoffs na evidence dialog */
.evidence-handoffs-list .evidence-handoff-status.status-concluido { color: var(--success); }
.evidence-handoffs-list .evidence-handoff-status.status-pronto    { color: var(--orange); }
.evidence-handoffs-list .evidence-handoff-status.status-em-execucao { color: var(--magenta); }
.evidence-handoffs-list .evidence-handoff-status.status-rascunho  { color: var(--muted); }
.evidence-handoffs-list .evidence-handoff-status.status-descartado { color: #ff8b8b; opacity: 0.7; }
.evidence-handoff-checklist { color: var(--muted); font-size: 11px; }

@media (max-width: 720px) {
  .handoff-content-dl > div { grid-template-columns: 1fr; gap: 4px; }
  .handoff-cta-block { padding: 12px; }
}

/* ===========================================================================
   Fase 13 — Fechamento de resultado por handoff
   ===========================================================================
   CTA pra registrar · form com 5 campos · resumo do resultado salvo. */

.handoff-result-cta {
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(56, 199, 137, 0.06);
  border-left: 3px solid var(--success);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.handoff-result-cta-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }
.handoff-result-cta-text strong { color: var(--text); font-size: 14px; }
.handoff-result-cta-text span { color: var(--muted); font-size: 12px; line-height: 1.4; }

/* Form de resultado */
.handoff-result-form {
  margin-top: 14px;
  padding: 18px;
  border-radius: 10px;
  background: rgba(56, 199, 137, 0.05);
  border: 1px solid rgba(56, 199, 137, 0.25);
  display: flex; flex-direction: column; gap: 14px;
}
.handoff-result-form-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
}
.handoff-result-form-head strong {
  color: var(--success); font-size: 14px;
}
.handoff-result-honesty {
  font-size: 10px;
  color: var(--orange);
  background: rgba(253, 128, 67, 0.1);
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.handoff-result-field { display: flex; flex-direction: column; gap: 6px; }
.handoff-result-field-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.handoff-result-field input[type="text"],
.handoff-result-field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
}
.handoff-result-field input:focus,
.handoff-result-field textarea:focus {
  border-color: var(--success); outline: none;
}
.handoff-result-field textarea { resize: vertical; min-height: 60px; }

/* Status do resultado: 3 opções como cards radio */
.result-status-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.result-status-option {
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  align-items: center;
  text-align: center;
  transition: border-color 120ms ease-out, background 120ms ease-out;
}
.result-status-option:hover { background: rgba(255, 255, 255, 0.05); }
.result-status-option input[type="radio"] {
  position: absolute; width: 1px; height: 1px; opacity: 0;
}
.result-status-option .result-status-icon { font-size: 20px; }
.result-status-option strong { font-size: 12px; line-height: 1.3; }
.result-status-option.is-active.is-confirmed {
  background: rgba(56, 199, 137, 0.12); border-color: var(--success); color: var(--success);
}
.result-status-option.is-active.is-contradicted {
  background: rgba(255, 90, 90, 0.1); border-color: #ff8b8b; color: #ff8b8b;
}
.result-status-option.is-active.is-inconclusive {
  background: rgba(170, 170, 170, 0.12); border-color: rgba(255, 255, 255, 0.3); color: var(--muted);
}

/* Recomendação: 4 chips */
.recommendation-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.recommendation-chip {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  transition: border-color 120ms ease-out, background 120ms ease-out;
}
.recommendation-chip:hover { background: rgba(255, 255, 255, 0.05); }
.recommendation-chip input[type="radio"] {
  position: absolute; width: 1px; height: 1px; opacity: 0;
}
.recommendation-icon {
  font-size: 18px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}
.recommendation-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.recommendation-text strong { font-size: 13px; color: var(--text); }
.recommendation-text span { font-size: 11px; color: var(--muted); }
.recommendation-chip.is-active.rec-escalar  { background: rgba(56, 199, 137, 0.1); border-color: var(--success); }
.recommendation-chip.is-active.rec-ajustar  { background: rgba(48, 174, 255, 0.1);  border-color: var(--blue); }
.recommendation-chip.is-active.rec-pausar   { background: rgba(170, 170, 170, 0.12); border-color: rgba(255, 255, 255, 0.3); }
.recommendation-chip.is-active.rec-repetir  { background: rgba(193, 102, 220, 0.1);  border-color: var(--magenta); }

.handoff-result-actions {
  display: flex; gap: 8px; padding-top: 4px;
}

/* Resumo do resultado salvo */
.handoff-result-summary {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(56, 199, 137, 0.05);
  border-left: 3px solid var(--success);
  display: flex; flex-direction: column; gap: 10px;
}
.handoff-result-summary.status-is-contradicted {
  background: rgba(255, 90, 90, 0.04);
  border-left-color: #ff8b8b;
}
.handoff-result-summary.status-is-inconclusive {
  background: rgba(170, 170, 170, 0.06);
  border-left-color: rgba(255, 255, 255, 0.3);
}
.handoff-result-summary-head {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.handoff-result-summary-status {
  font-size: 12px; padding: 4px 10px; border-radius: 999px; font-weight: 500;
}
.handoff-result-summary-status.is-confirmed    { background: rgba(56, 199, 137, 0.15); color: var(--success); }
.handoff-result-summary-status.is-contradicted { background: rgba(255, 90, 90, 0.13);  color: #ff8b8b; }
.handoff-result-summary-status.is-inconclusive { background: rgba(170, 170, 170, 0.13); color: var(--muted); }
.handoff-result-summary-rec {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); color: var(--text);
}
.handoff-result-summary-rec.rec-escalar { background: rgba(56, 199, 137, 0.13); color: var(--success); }
.handoff-result-summary-rec.rec-ajustar { background: rgba(48, 174, 255, 0.13); color: var(--blue); }
.handoff-result-summary-rec.rec-pausar  { background: rgba(170, 170, 170, 0.13); color: var(--muted); }
.handoff-result-summary-rec.rec-repetir { background: rgba(193, 102, 220, 0.13); color: var(--magenta); }
.handoff-result-summary-origin {
  font-size: 10px;
  margin-left: auto;
  color: var(--orange);
  background: rgba(253, 128, 67, 0.1);
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.handoff-result-summary-fields {
  margin: 0; display: flex; flex-direction: column; gap: 6px;
}
.handoff-result-summary-fields > div {
  display: grid; grid-template-columns: 130px 1fr; gap: 10px;
  font-size: 13px; align-items: start;
}
.handoff-result-summary-fields dt {
  font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.06em;
}
.handoff-result-summary-fields dd {
  margin: 0; color: var(--text);
}
.handoff-result-summary-fields dd.multiline { white-space: pre-wrap; line-height: 1.5; }
.handoff-result-summary-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.handoff-result-loop-note {
  font-size: 11px; color: var(--muted); font-style: italic; line-height: 1.4;
}

/* Linha de resultado na evidence list de handoffs */
.evidence-handoff-result.status-confirmou    { color: var(--success); font-weight: 500; }
.evidence-handoff-result.status-contradisse  { color: #ff8b8b; font-weight: 500; }
.evidence-handoff-result.status-inconclusivo { color: var(--muted); }
.evidence-handoff-result-pending             { color: var(--orange); font-style: italic; font-size: 11px; }

@media (max-width: 720px) {
  .handoff-result-field-grid { grid-template-columns: 1fr; }
  .result-status-grid { grid-template-columns: 1fr; }
  .recommendation-grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Fechamento Fase 13 — Captura de aprendizado a partir do resultado
   ===========================================================================
   Form inline com prefill · selector de pattern · novo pattern opcional ·
   chip no card do pattern em Aprendizado. */

.handoff-promotion-form {
  margin-top: 14px;
  padding: 18px;
  border-radius: 10px;
  background: rgba(193, 102, 220, 0.08);
  border: 1px solid rgba(193, 102, 220, 0.3);
  display: flex; flex-direction: column; gap: 14px;
}
.handoff-promotion-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
}
.handoff-promotion-head strong {
  color: var(--magenta); font-size: 14px;
}
.handoff-promotion-context {
  font-size: 11px; padding: 3px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); color: var(--text);
}

.handoff-promotion-prefill {
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.handoff-promotion-fields {
  margin: 0; display: flex; flex-direction: column; gap: 6px;
}
.handoff-promotion-fields > div {
  display: grid; grid-template-columns: 110px 1fr; gap: 10px;
  font-size: 13px; align-items: start;
}
.handoff-promotion-fields dt {
  font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.06em; padding-top: 1px;
}
.handoff-promotion-fields dd { margin: 0; color: var(--text); }
.handoff-promotion-fields dd.multiline { white-space: pre-wrap; line-height: 1.5; }
.handoff-promotion-fields dd.is-confirmed    { color: var(--success); }
.handoff-promotion-fields dd.is-contradicted { color: #ff8b8b; }
.handoff-promotion-fields dd.is-inconclusive { color: var(--muted); }

.handoff-promotion-pattern { display: flex; flex-direction: column; gap: 6px; }
.handoff-promotion-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}
.handoff-promotion-select:focus { border-color: var(--magenta); outline: none; }

.handoff-promotion-newpattern {
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(193, 102, 220, 0.04);
  border: 1px dashed rgba(193, 102, 220, 0.3);
  display: flex; flex-direction: column; gap: 8px;
}
.handoff-promotion-newpattern[hidden] { display: none; }
.handoff-promotion-newpattern input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-family: inherit; font-size: 13px;
}
.handoff-promotion-newpattern input:focus { border-color: var(--magenta); outline: none; }
.handoff-promotion-newpattern-hint { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.5; }

.handoff-promotion-effects {
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(48, 174, 255, 0.05);
  border-left: 2px solid var(--blue);
}
.handoff-promotion-effects ul {
  margin: 8px 0 0; padding-left: 20px;
  list-style: '· ';
  display: flex; flex-direction: column; gap: 4px;
}
.handoff-promotion-effects li { font-size: 12px; color: var(--text); line-height: 1.5; }
.handoff-promotion-effects strong { color: var(--blue); }

.handoff-promotion-actions {
  display: flex; gap: 8px; padding-top: 4px;
}

/* Histórico de capturas no resumo do resultado */
.handoff-promotion-history {
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(193, 102, 220, 0.06);
  border-left: 2px solid var(--magenta);
}
.handoff-promotion-history ul {
  margin: 6px 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 6px;
}
.handoff-promotion-history li {
  font-size: 13px; color: var(--text);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.handoff-promotion-newchip {
  font-size: 10px; padding: 2px 8px; border-radius: 999px;
  background: rgba(193, 102, 220, 0.18); color: var(--magenta);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.handoff-promotion-when { font-size: 11px; color: var(--muted); font-style: italic; }
.handoff-promotion-link-note {
  margin: 6px 0 0; font-size: 11px; color: var(--muted); font-style: italic; line-height: 1.45;
}
.handoff-promotion-link-note strong { color: var(--magenta); }

/* Chip no card do pattern em Aprendizado — sinaliza que foi alimentado por handoff */
.learning-handoff-chip {
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(193, 102, 220, 0.13);
  color: var(--magenta);
  border: 1px solid rgba(193, 102, 220, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Linha de promoção na evidence */
.evidence-handoff-promotion {
  color: var(--magenta);
  font-size: 12px;
  display: block;
  margin-top: 4px;
  padding-left: 8px;
  border-left: 2px solid rgba(193, 102, 220, 0.3);
}

@media (max-width: 720px) {
  .handoff-promotion-fields > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ===========================================================================
   Fase 14 — Trilha colapsível (auto-collapse de blocos foi removido em
   2026-05-08 quando o sistema pivotou pra MODO FOCADO — 1 etapa por tela.
   Classes .conteudo-bloco.is-collapsed, .is-active-step,
   .bloco-collapsed-summary, .bloco-cs-*, .bloco-active-badge,
   .is-expanded-by-user foram removidas junto.)
   =========================================================================== */

/* Trilha: histórico antigo collapsível */
.conteudo-trilha-older {
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.conteudo-trilha-older summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  padding: 4px 0;
  transition: color 120ms ease-out;
}
.conteudo-trilha-older summary:hover {
  color: var(--text);
}
.conteudo-trilha-older[open] summary {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Cards de versão de criativo: estado aprovado/rejeitado fica mais discreto
   pra não disputar atenção com o card pendente em foco */
.creative-version-card.creative-status-rejeitado {
  opacity: 0.7;
}
.creative-version-card.creative-status-rejeitado:hover {
  opacity: 1;
}

/* Cards de pacote: estado aprovado fica menos verboso */
.package-card.status-aprovado .package-format-hint {
  display: none;
}
.package-card.status-aprovado .package-fields {
  font-size: 12px;
}

/* Reduz padding interno geral pra dar respiro */
.creative-version-card,
.package-card,
.handoff-card {
  padding: 14px !important;
}

/* Cards de causa: details secundário discreto */
.conteudo-causa-details {
  margin: 0;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
}
.conteudo-causa-details summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--muted);
  padding: 2px 0;
  transition: color 120ms ease-out;
}
.conteudo-causa-details summary:hover { color: var(--text); }
.conteudo-causa-details[open] {
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 12px;
}
.conteudo-causa-details[open] summary {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.conteudo-causa-details-body {
  display: flex; flex-direction: column; gap: 10px;
}

/* Brief: campos secundários discretos */
.conteudo-brief-secundarios {
  margin-top: -8px; /* puxa pra cima dos campos primários */
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.018);
  border-radius: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.06);
}
.conteudo-brief-secundarios summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--muted);
  padding: 2px 0;
}
.conteudo-brief-secundarios summary:hover { color: var(--text); }
.conteudo-brief-secundarios[open] summary {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.conteudo-brief-fields-secundarios {
  margin: 0;
}

/* Versions antigas em <details> compacto */
.conteudo-versions-older {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.06);
}
.conteudo-versions-older summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
  padding: 2px 0;
}
.conteudo-versions-older summary:hover { color: var(--text); }
.conteudo-versions-older[open] summary {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.conteudo-versions-older-list {
  display: flex; flex-direction: column; gap: 12px;
}

/* Conjunto de versões pendentes (gerado, aguardando decisão).
   N==1: full-width normal.
   N>1: grid lado-a-lado pra comparar (auto-fit 280px min, wrap em telas
   estreitas). Card interno colapsa pra 1 coluna (imagem em cima, info
   embaixo) pra caber na coluna estreita do grid. */
.conteudo-versions-pending {
  display: flex; flex-direction: column; gap: 18px;
}
.conteudo-versions-pending.is-multi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  padding: 14px;
  border: 1px dashed rgba(167, 73, 247, 0.35);
  border-radius: 14px;
  background: rgba(167, 73, 247, 0.04);
  margin-bottom: 8px;
}
.conteudo-versions-pending.is-multi > * {
  min-width: 0; /* evita overflow horizontal nos itens do grid */
}
.conteudo-versions-pending-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0; /* defesa pra grid item não estourar */
}
/* Codex Fase 14b ajuste E — quebra defensiva contra prompt longo
   ou produto com nome wide estourando largura da coluna do grid. */
.conteudo-versions-pending-col,
.conteudo-versions-pending-col * {
  overflow-wrap: break-word;
  word-break: break-word;
}
.conteudo-versions-pending-col pre {
  white-space: pre-wrap;
}
/* Cada coluna empilha: label + card. Card interno vira 1 coluna (imagem
   em cima, info embaixo) sobrepondo o layout 40/60 padrão. */
.conteudo-versions-pending.is-multi .creative-version-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}
.conteudo-versions-pending.is-multi .creative-version-card {
  height: 100%;
}
.conteudo-versions-pending.is-multi .creative-actions {
  flex-wrap: wrap;
}
.conteudo-versions-pending.is-multi .creative-actions button,
.conteudo-versions-pending.is-multi .creative-actions a {
  font-size: 12px;
  padding: 6px 10px;
}
.conteudo-versions-pending-label {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(167, 73, 247, 0.18);
  color: #d6a8ff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  align-self: flex-start;
}
.conteudo-versions-compare-hint {
  margin: 8px 0 4px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(167, 73, 247, 0.10);
  border: 1px solid rgba(167, 73, 247, 0.25);
  color: #d6a8ff;
  font-size: 13px;
  font-weight: 500;
}
/* Codex Fase 14b ajuste C — nota discreta de custo no hint */
.conteudo-versions-cost-note {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 400;
  opacity: 0.6;
  font-style: italic;
}

/* Briefs anteriores em <details> compacto (fix Fase 14 — não virar parede) */
.conteudo-briefs-older {
  margin-top: 16px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.06);
}
.conteudo-briefs-older summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  padding: 4px 0;
  transition: color 120ms ease-out;
}
.conteudo-briefs-older summary:hover { color: var(--text); }
.conteudo-briefs-older[open] summary {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.conteudo-briefs-older-list {
  display: flex; flex-direction: column; gap: 16px;
}

/* Pacote em rascunho: form mais compacto inline */
.package-card.status-rascunho .package-edit-form input,
.package-card.status-rascunho .package-edit-form textarea {
  font-size: 12px;
  padding: 6px 10px;
}

/* Cards de versão: prompt details mais discreto (era expandido visualmente) */
.creative-version-prompt {
  font-size: 11px;
}
.creative-version-prompt summary {
  font-size: 11px;
  padding: 2px 4px;
}

/* Mais respiro entre seções principais da página Conteúdo */
.conteudo-page > .conteudo-bloco + .conteudo-bloco,
.conteudo-page > .conteudo-bloco + .wf-step-placeholder,
.conteudo-page > .wf-step-placeholder + .conteudo-bloco {
  margin-top: 28px;
}

/* Cards de causa: respiro interno aumentado */
.conteudo-causa-card {
  padding: 22px !important;
  gap: 14px !important;
}
.conteudo-causa-titulo {
  font-size: 17px !important;
  line-height: 1.35 !important;
}
.conteudo-causa-why p {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Grid de causas: 2 colunas em telas médias (era 4 forçado) — mais respiro */
.conteudo-causas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 18px;
}

@media (max-width: 720px) {
  .conteudo-hero { padding: 16px 0 4px; }
  .conteudo-title { line-height: 1.15; }
  .conteudo-page .board-bloco-title { font-size: 18px; }
  .conteudo-bloco { padding: 20px; }
}

/* ==========================================================================
   Régua executiva de faturamento — usada em Board (Sala de Conselho) e
   Planejamento de Meta. 12 cells (3 linhas x 4 colunas) com dados reais
   do /goal-plan-sync. Foi desenhada compacta pra caber no topo da página
   sem competir com o headline ou KPIs do Bloco 1.
   ========================================================================== */
.regua-faturamento {
  background: rgba(20, 28, 40, 0.55);
  border: 1px solid rgba(113, 232, 255, 0.10);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 18px;
}
.regua-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}
.regua-header-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─── Sync badge (timestamp + refresh) ─── */
.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 6px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.03em;
  font-weight: 500;
  border: 1px solid transparent;
}
.sync-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.sync-badge.sync-fresh {
  background: rgba(94, 234, 132, 0.08);
  color: var(--success, #5eea84);
  border-color: rgba(94, 234, 132, 0.20);
}
.sync-badge.sync-fresh .sync-badge-dot { background: var(--success, #5eea84); box-shadow: 0 0 4px var(--success, #5eea84); }
.sync-badge.sync-stale {
  background: rgba(245, 197, 66, 0.08);
  color: var(--warning, #f5c542);
  border-color: rgba(245, 197, 66, 0.20);
}
.sync-badge.sync-stale .sync-badge-dot { background: var(--warning, #f5c542); }
.sync-badge.sync-old {
  background: rgba(248, 113, 113, 0.08);
  color: var(--danger, #ff6b6b);
  border-color: rgba(248, 113, 113, 0.20);
}
.sync-badge.sync-old .sync-badge-dot { background: var(--danger, #ff6b6b); }
.sync-badge.sync-unknown {
  background: rgba(113, 120, 138, 0.08);
  color: var(--dim, #71788a);
  border-color: rgba(113, 120, 138, 0.20);
}
.sync-badge.sync-unknown .sync-badge-dot { background: var(--dim, #71788a); }
.sync-badge-text {
  font-variant-numeric: tabular-nums;
}
.sync-badge-age {
  opacity: 0.75;
  font-size: 9px;
}
.sync-badge-refresh {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0 2px;
  font-size: 12px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity .15s, transform .3s;
}
.sync-badge-refresh:hover {
  opacity: 1;
  transform: rotate(90deg);
}
.sync-badge-refresh:disabled { cursor: not-allowed; opacity: 0.3; }
.regua-eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #9aa0aa);
  font-weight: 600;
}
.regua-source {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}
.regua-source.source-real {
  background: rgba(94, 234, 132, 0.10);
  color: var(--success, #5eea84);
  border: 1px solid rgba(94, 234, 132, 0.25);
}
.regua-source.source-partial {
  background: rgba(245, 197, 66, 0.10);
  color: var(--warning, #f5c542);
  border: 1px solid rgba(245, 197, 66, 0.25);
}
.regua-source.source-disconnected {
  background: rgba(253, 128, 67, 0.10);
  color: var(--orange, #fd8043);
  border: 1px solid rgba(253, 128, 67, 0.25);
}
.regua-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.regua-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  min-height: 76px;
  justify-content: center;
}
.regua-label {
  font-size: 11px;
  color: var(--muted, #9aa0aa);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.regua-value {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--text, #f0f0f5);
}
.regua-sub {
  font-size: 11px;
  color: var(--dim, #71788a);
  font-variant-numeric: tabular-nums;
}
.regua-sub-muted {
  color: var(--dim, #71788a);
  opacity: 0.7;
}
.regua-pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(245, 197, 66, 0.15);
  color: var(--warning, #f5c542);
}
.regua-delta {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.regua-delta-up { color: var(--success, #5eea84); }
.regua-delta-down { color: var(--danger, #ff6b6b); }
.regua-delta-flat { color: var(--dim, #71788a); }

@media (max-width: 1180px) {
  .regua-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
  .regua-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .regua-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .regua-cell { min-height: auto; padding: 8px 10px; }
  .regua-value { font-size: 16px; }
}

/* ==========================================================================
   Ads Summary — Tráfego pago (Meta + Google) com classificação ads-ratos
   ========================================================================== */
.ads-summary-panel .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.ads-actions-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ads-act-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.ads-act-kill {
  background: rgba(248, 113, 113, 0.15);
  color: var(--danger, #ff6b6b);
  border: 1px solid rgba(248, 113, 113, 0.3);
}
.ads-act-scale {
  background: rgba(74, 222, 128, 0.15);
  color: var(--success, #5eea84);
  border: 1px solid rgba(74, 222, 128, 0.3);
}
.ads-act-optimize {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warning, #f5c542);
  border: 1px solid rgba(251, 191, 36, 0.3);
}
.ads-platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.ads-platform-card {
  background: rgba(20, 28, 40, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 14px 16px;
}
.ads-plat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.ads-plat-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ads-plat-meta {
  font-size: 11px;
  color: var(--dim, #71788a);
}
.ads-plat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ads-plat-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ads-plat-grid strong {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.ads-mini-label {
  font-size: 10px;
  color: var(--muted, #9aa0aa);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ads-camps-table {
  width: 100%;
  font-size: 12px;
}
.ads-camps-table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #9aa0aa);
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ads-camps-table td {
  padding: 10px 6px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.ads-action-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
}
.ads-action-cell.ads-act-kill { background: rgba(248,113,113,0.10); color: var(--danger); }
.ads-action-cell.ads-act-scale { background: rgba(74,222,128,0.10); color: var(--success); }
.ads-action-cell.ads-act-optimize { background: rgba(251,191,36,0.10); color: var(--warning); }
.ads-action-cell strong {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.ads-action-regra {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.9;
}
.ads-action-cell small {
  color: var(--text);
  opacity: 0.85;
  font-size: 10px;
  line-height: 1.3;
}

@media (max-width: 880px) {
  .ads-plat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── ADS — Overview: Health + Sazonalidade + CPA ───────────────────────── */
.ads-overview-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 0.9fr;
  gap: 14px;
  margin-top: 16px;
}
.ads-health-card,
.ads-seasonality,
.ads-cpa-edit {
  background: rgba(20, 28, 40, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 14px 16px;
}
.ads-health-card {
  display: flex;
  gap: 16px;
  align-items: center;
}
.ads-health-score-side {
  display: flex; flex-direction: column; align-items: center; min-width: 96px;
  border-right: 1px solid rgba(255,255,255,0.06); padding-right: 16px;
}
.ads-health-number { font-size: 36px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ads-health-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-top: 2px; }
.ads-health-base { font-size: 10px; color: var(--dim, #71788a); margin-top: 4px; }
.ads-health-detail { flex: 1; }
.ads-health-title { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 10px 0; }
.ads-health-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ads-health-stats > div { display: flex; flex-direction: column; gap: 2px; }
.ads-health-stats strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.ads-health-stats span { font-size: 10px; color: var(--dim); }

.ads-seasonality { display: flex; gap: 12px; align-items: flex-start; }
.ads-season-icon { font-size: 18px; line-height: 1; padding-top: 2px; }
.ads-seasonality strong { display: block; font-size: 14px; }
.ads-season-fator { font-size: 11px; color: var(--dim); display: block; margin: 2px 0; }
.ads-seasonality p { font-size: 12px; color: var(--text); margin: 6px 0 0 0; line-height: 1.4; opacity: 0.9; }

.ads-cpa-edit label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; }
.ads-cpa-row { display: flex; gap: 6px; align-items: center; margin: 8px 0; }
.ads-cpa-row span { font-size: 13px; color: var(--dim); }
.ads-cpa-row input {
  flex: 1; min-width: 60px;
  background: rgba(0,0,0,0.3); color: var(--text);
  border: 1px solid rgba(113, 232, 255, 0.15);
  border-radius: 6px; padding: 6px 10px; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.ads-cpa-edit small { font-size: 11px; color: var(--dim); line-height: 1.4; display: block; }

/* ─── ADS — Narrative ─── */
.ads-narrative { margin-top: 18px; }
.ads-narr-line {
  padding: 10px 14px;
  border-left: 3px solid var(--dim, #71788a);
  background: rgba(255,255,255, 0.02);
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 0 6px 6px 0;
}
.ads-narr-line.narr-info { border-left-color: var(--blue, #60a5fa); }
.ads-narr-line.narr-warn { border-left-color: var(--warning, #f5c542); }
.ads-narr-line.narr-bad { border-left-color: var(--danger, #ff6b6b); }
.ads-narr-line.narr-good { border-left-color: var(--success, #5eea84); }
.ads-narr-line.narr-saz { border-left-color: var(--orange, #fd8043); }

/* ─── ADS — Charts ─── */
.ads-chart-wrap { margin-top: 18px; }
.ads-bar-chart { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ads-bar-row { display: grid; grid-template-columns: 110px 1fr 90px; gap: 10px; align-items: center; }
.ads-bar-label { font-size: 12px; font-weight: 700; }
.ads-bar-track { height: 14px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden; }
.ads-bar-fill { height: 100%; border-radius: 4px; transition: width .3s ease; }
.ads-bar-value { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }

/* ─── ADS — Action cards ─── */
.ads-action-cards-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
.ads-action-card {
  background: rgba(20, 28, 40, 0.55);
  border-radius: 10px;
  padding: 14px 18px;
  border-left: 4px solid var(--dim);
}
.ads-action-card.ads-act-kill { border-left-color: var(--danger); background: rgba(248, 113, 113, 0.05); }
.ads-action-card.ads-act-scale { border-left-color: var(--success); background: rgba(74, 222, 128, 0.05); }
.ads-action-card.ads-act-optimize { border-left-color: var(--warning); background: rgba(251, 191, 36, 0.05); }
.ads-action-card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.ads-action-card-tipo { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; margin-right: 10px; }
.ads-action-card.ads-act-kill .ads-action-card-tipo { color: var(--danger); }
.ads-action-card.ads-act-scale .ads-action-card-tipo { color: var(--success); }
.ads-action-card.ads-act-optimize .ads-action-card-tipo { color: var(--warning); }
.ads-action-card-campaign { font-size: 13px; font-weight: 600; }
.ads-action-card-impact { font-size: 12px; white-space: nowrap; }
.ads-action-card-motivo { font-size: 12px; color: var(--text); margin: 6px 0; line-height: 1.5; opacity: 0.9; }
.ads-action-card-steps { margin: 10px 0 12px 18px; padding: 0; color: var(--text); font-size: 12px; line-height: 1.6; }
.ads-action-card-steps li { margin-bottom: 2px; }
.ads-action-card-foot { display: flex; gap: 8px; align-items: center; }
.ads-action-approved {
  display: flex; gap: 12px; align-items: center;
  color: var(--success); font-size: 12px; font-weight: 600;
}

/* ─── ADS — Benchmarks reference ─── */
.ads-benchmarks-ref { margin-top: 14px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.05); }
.ads-benchmarks-ref summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: 4px 0; }
.ads-bench-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-top: 10px; }
.ads-bench-block h4 { font-size: 12px; margin: 0 0 8px 0; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

@media (max-width: 1080px) {
  .ads-overview-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .ads-overview-grid { grid-template-columns: 1fr; }
  .ads-health-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ─── ADS — Modal de preview (dry-run) ─── */
.ads-exec-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0, 0, 0, 0.65);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ads-exec-modal-box {
  background: var(--bg, #0a0f18);
  border: 1px solid rgba(113, 232, 255, 0.15);
  border-radius: 12px;
  padding: 28px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6);
}
.ads-exec-modal-box h3 { margin: 8px 0 16px 0; font-size: 17px; }
.ads-exec-modal-box ul { list-style: none; padding: 0; margin: 12px 0; }
.ads-exec-modal-box ul li { padding: 6px 0; font-size: 13px; line-height: 1.5; border-bottom: 1px dashed rgba(255,255,255,0.05); }
.ads-exec-modal-box ul li strong { color: var(--muted); margin-right: 8px; }

/* V6 — Modal de confirmacao literal pra execucao real Ads */
.ads-exec-confirm-expected {
  display: block;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 13px;
  padding: 10px 12px;
  background: rgba(55, 213, 255, .08);
  border: 1px solid rgba(55, 213, 255, .25);
  border-radius: 6px;
  margin: 8px 0 12px;
  color: var(--blue);
  overflow-wrap: anywhere;
  user-select: all;
}
.ads-exec-confirm-input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 13px;
  outline: none;
}
.ads-exec-confirm-input:focus { border-color: var(--blue); }
.ads-exec-confirm-hint {
  margin: 8px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.4;
}
.ads-exec-confirm-hint.ads-exec-confirm-hint-warn { color: var(--warning, #f5c542); }

/* ─── ADS — Estados pós-execução N3 ─── */
.ads-action-executed {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  color: var(--success);
  background: rgba(74, 222, 128, 0.08);
  border-radius: 6px; padding: 8px 12px;
  font-size: 12px;
}
.ads-action-executed span:first-child { font-weight: 700; }
.ads-exec-summary {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--text); opacity: 0.85;
}
.ads-action-rolled-back {
  color: var(--warning);
  font-size: 12px; font-weight: 600;
  padding: 8px 12px;
  background: rgba(245, 197, 66, 0.08);
  border-radius: 6px;
  display: inline-block;
}
.ads-action-unverified {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  color: var(--warning);
  background: rgba(245, 197, 66, 0.08);
  border-radius: 6px; padding: 8px 12px;
  font-size: 12px;
}
.ads-action-unverified span:first-child { font-weight: 700; }
.ads-exec-warning {
  font-size: 11px;
  color: var(--warning);
  opacity: 0.95;
  font-style: italic;
}
.ads-kanban-only,
.ads-reject-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--dim);
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s ease;
}
.ads-kanban-only:hover {
  border-color: rgba(255,255,255,0.3);
  color: var(--text);
}

/* ─── SKU/margem warning nos cards de ads ─── */
.ads-sku-warning {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 10px 0;
  font-size: 11px;
}
.ads-sku-warning-row {
  display: flex; gap: 10px; align-items: center;
  padding: 2px 0;
}
.ads-sku-warning-label { color: var(--muted); }
.ads-sku-warning-value { color: var(--warning); font-weight: 600; }
.ads-sku-warning-scale {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(248,113,113,0.10);
  border: 1px solid rgba(248,113,113,0.25);
  border-radius: 4px;
  color: var(--danger);
  font-size: 11px;
  line-height: 1.4;
}
.ads-sku-warning.ads-sku-warning-scale .ads-sku-warning-value {
  color: var(--danger);
}
.ads-sku-warning-formula {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.25);
  border-radius: 4px;
  font-size: 10px;
  font-family: ui-monospace, monospace;
  color: var(--dim);
  line-height: 1.4;
}
.ads-link-badge {
  font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 4px;
  letter-spacing: 0.02em;
}
.ads-link-btn {
  background: transparent;
  border: 1px solid rgba(113,232,255,0.25);
  color: var(--blue, #60a5fa);
  font-size: 10px;
  padding: 3px 8px; border-radius: 4px;
  cursor: pointer;
  margin-left: 8px;
}
.ads-link-btn:hover { background: rgba(113,232,255,0.08); }

/* Source badges — indica se vínculo está salvo no backend ou fallback localStorage */
.link-source-badge,
.link-source-badge-mini {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  margin-left: 6px;
  vertical-align: middle;
}
.link-source-badge-mini { font-size: 9px; padding: 1px 5px; }
.link-source-ok { color: var(--success, #5eea84); background: rgba(94,234,132,0.10); }
.link-source-fallback { color: var(--warning, #f5c542); background: rgba(245,197,66,0.10); }
.link-source-migrating { color: var(--blue, #60a5fa); background: rgba(96,165,250,0.10); }
.link-source-unknown { color: var(--dim, #888); background: rgba(255,255,255,0.05); }

/* F2 — Saneamento queue */
.saneamento-panel {
  border-left: 3px solid var(--warning, #f5c542);
  background: rgba(245,197,66,0.04);
}
.saneamento-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}
.saneamento-stats {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.saneamento-stat {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.saneamento-stat.sev-critical { color: var(--danger, #f87171); background: rgba(248,113,113,0.12); }
.saneamento-stat.sev-high { color: var(--warning, #f5c542); background: rgba(245,197,66,0.12); }
.saneamento-stat.sev-medium { color: var(--blue, #60a5fa); background: rgba(96,165,250,0.10); }

.saneamento-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.saneamento-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  border-left: 3px solid transparent;
}
.saneamento-item.sev-critical { border-left-color: var(--danger, #f87171); background: rgba(248,113,113,0.05); }
.saneamento-item.sev-high { border-left-color: var(--warning, #f5c542); background: rgba(245,197,66,0.04); }
.saneamento-item.sev-medium { border-left-color: var(--blue, #60a5fa); background: rgba(96,165,250,0.03); }
.saneamento-item.sev-low { border-left-color: rgba(255,255,255,0.10); }

.saneamento-item-main { flex: 1; min-width: 0; }
.saneamento-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.saneamento-item-head strong { font-size: 12px; }
.saneamento-owner {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.saneamento-owner-daiana { color: #ff9d76; background: rgba(255,157,118,0.10); }
.saneamento-owner-rafael { color: var(--blue, #60a5fa); background: rgba(96,165,250,0.10); }
.saneamento-owner-rafael-daiana { color: #c084fc; background: rgba(192,132,252,0.10); }

.saneamento-item-sku {
  font-size: 11px;
  color: var(--dim, #888);
  margin: 2px 0;
}
.saneamento-item-impact {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  margin: 2px 0;
}
.saneamento-impact { font-weight: 600; color: var(--warning, #f5c542); margin-left: 4px; }
.saneamento-campanhas { font-size: 10px; color: var(--blue, #60a5fa); margin-left: 6px; }
.saneamento-item-action {
  font-size: 11px;
  color: var(--text, #eee);
  margin: 4px 0 0;
  font-weight: 500;
}

.saneamento-item-actions { flex-shrink: 0; }
.saneamento-task-btn {
  background: transparent;
  border: 1px solid rgba(94,234,132,0.30);
  color: var(--success, #5eea84);
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}
.saneamento-task-btn:hover { background: rgba(94,234,132,0.08); }
.saneamento-task-btn-mini {
  background: transparent;
  border: 1px solid rgba(94,234,132,0.20);
  color: var(--success, #5eea84);
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
}
.saneamento-task-btn-mini:hover { background: rgba(94,234,132,0.06); }
.saneamento-task-done {
  font-size: 10px;
  color: var(--success, #5eea84);
  font-weight: 600;
  padding: 4px 10px;
  background: rgba(94,234,132,0.06);
  border-radius: 3px;
  display: inline-block;
}
.ads-stock-alert {
  margin: 8px 0 0;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.4;
}
.ads-stock-alert-danger { background: rgba(248,113,113,0.10); color: var(--danger); border: 1px solid rgba(248,113,113,0.25); }
.ads-stock-alert-warning { background: rgba(245,197,66,0.10); color: var(--warning); border: 1px solid rgba(245,197,66,0.25); }
.ads-scale-blocked-btn { background: var(--warning, #f5c542) !important; color: #000 !important; }

/* ─── Modal vincular campanha ─── */
.link-tabs {
  display: flex; gap: 4px;
  margin: 14px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.link-tab {
  background: transparent; border: none;
  color: var(--dim); font-size: 12px;
  padding: 8px 14px; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.link-tab:hover { color: var(--text); }
.link-tab.is-active {
  color: var(--blue, #60a5fa);
  border-bottom-color: var(--blue, #60a5fa);
}
.link-product-row:hover { background: rgba(113,232,255,0.05); }
.link-inference-suggestion {
  margin: 12px 0;
  padding: 10px 12px;
  background: rgba(245,197,66,0.05);
  border: 1px solid rgba(245,197,66,0.20);
  border-radius: 6px;
}
.ads-scale-warning.ads-scale-warning-block {
  background: rgba(248,113,113,0.18);
  border-left-width: 6px;
  animation: pulse-warn 1.5s ease-in-out infinite;
}
@keyframes pulse-warn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); }
  50% { box-shadow: 0 0 12px 2px rgba(248,113,113,0.25); }
}

/* ─── Scale warning forte no modal ─── */
.ads-scale-warning {
  margin: 14px 0;
  padding: 14px 16px;
  background: rgba(248,113,113,0.10);
  border-left: 4px solid var(--danger);
  border-radius: 6px;
}
.ads-scale-warning p {
  margin: 6px 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
}
.ads-scale-warning p:first-child {
  color: var(--danger);
  font-weight: 700;
  font-size: 13px;
}

/* ─── Produtos: filtros, paginação ─── */
.produtos-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.produtos-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.produtos-filter-btn {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text);
  transition: all .15s;
}
.produtos-filter-btn:hover {
  border-color: rgba(113,232,255,0.25);
}
.produtos-filter-btn.is-active {
  background: rgba(113,232,255,0.10);
  border-color: rgba(113,232,255,0.4);
  color: var(--blue, #60a5fa);
}
.produtos-filter-count {
  margin-left: 4px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.produtos-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.produtos-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ads-reject-btn:hover {
  border-color: rgba(248, 113, 113, 0.4);
  color: var(--danger);
  background: rgba(248, 113, 113, 0.05);
}

/* ─── Hooks modal (Fase B) ─── */
.ads-exec-modal-box { max-width: 720px; }
.ads-hooks-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.ads-hook-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 14px;
}
.ads-hook-head {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  font-size: 13px; line-height: 1.4;
}
.ads-hook-head input[type=checkbox] { margin-top: 3px; cursor: pointer; }
.ads-hook-angle {
  font-size: 10px; font-weight: 800; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 4px; flex-shrink: 0;
}
.ads-hook-angle-dor { background: rgba(248,113,113,0.15); color: var(--danger); }
.ads-hook-angle-promessa { background: rgba(74,222,128,0.15); color: var(--success); }
.ads-hook-angle-prova { background: rgba(96,165,250,0.15); color: var(--blue, #60a5fa); }
.ads-hook-head strong { font-weight: 600; flex: 1; }
.ads-hook-body { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ads-hook-body label { display: flex; flex-direction: column; gap: 4px; font-size: 10px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.04em; }
.ads-hook-body textarea,
.ads-hook-body input[type=text] {
  background: rgba(0,0,0,0.3); color: var(--text);
  border: 1px solid rgba(113,232,255,0.10); border-radius: 4px;
  padding: 6px 8px; font-size: 12px; font-family: inherit;
  resize: vertical;
}
.ads-hook-row { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.ads-hook-hypothesis {
  font-size: 11px; color: var(--dim); margin: 8px 0 0 0;
  padding: 8px 10px; background: rgba(255,255,255,0.02); border-radius: 4px;
  line-height: 1.4;
}
.ads-hooks-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 14px; flex-wrap: wrap; align-items: center;
}

/* ─── C-15 / C-16 — Aprendizados candidatos (digest determinístico) ─── */
.c15-digest {
  margin: 18px 0 26px;
  padding: 16px 20px;
  border: 1px solid var(--border, #3a3a3a);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.c15-digest.is-empty {
  border-style: dashed;
  border-color: var(--border, #444);
  background: rgba(255, 255, 255, 0.02);
}
.c15-digest-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.c15-digest-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.c15-digest-stamp {
  font-size: 11px;
  opacity: 0.6;
}
.c15-digest-sub {
  margin: 10px 0 14px;
  font-size: 12px;
  opacity: 0.7;
}
.c15-digest-empty-msg {
  margin: 10px 0 0;
  font-size: 13px;
  opacity: 0.75;
}
.c15-digest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}
.c15-digest-card {
  padding: 12px 14px;
  border: 1px solid var(--border, #3a3a3a);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.c15-digest-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.c15-digest-card-title {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
}
.c15-digest-card-action {
  margin: 0;
  font-size: 12px;
  opacity: 0.8;
  line-height: 1.4;
}
.c15-digest-card-footer {
  display: flex;
  gap: 14px;
  font-size: 11px;
  opacity: 0.7;
  flex-wrap: wrap;
}
.c15-digest-card-status {
  margin-left: auto;
}
.c15-conf-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.c15-conf-badge.is-high   { color: #1f9d55; background: rgba(31, 157, 85, 0.14); }
.c15-conf-badge.is-medium { color: #b58400; background: rgba(181, 132, 0, 0.14); }
.c15-conf-badge.is-low    { color: #9b3939; background: rgba(155, 57, 57, 0.14); }
.c15-digest-card-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  padding-top: 8px;
}
.c15-promote-btn {
  background: rgba(55, 213, 255, 0.10);
  color: var(--blue, #37d5ff);
  border: 1px solid rgba(55, 213, 255, 0.30);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.c15-promote-btn:hover:not(:disabled) {
  background: rgba(55, 213, 255, 0.18);
  border-color: rgba(55, 213, 255, 0.50);
}
.c15-promote-btn:disabled {
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.04);
  color: var(--dim, #888);
  border-color: rgba(255, 255, 255, 0.08);
}
.c15-promote-btn.is-promoted {
  background: rgba(31, 157, 85, 0.10);
  color: #1f9d55;
  border-color: rgba(31, 157, 85, 0.30);
}
.c15-promote-btn.is-demo {
  background: rgba(181, 132, 0, 0.08);
  color: #b58400;
  border-color: rgba(181, 132, 0, 0.25);
  opacity: 0.85;
}

/* ─── C-17 M1 — Avaliação humana de padrão observado ─── */
.c17-observed-section {
  margin: 18px 0 26px;
  padding: 16px 20px;
  border: 1px solid var(--border, #3a3a3a);
  border-radius: 10px;
  background: rgba(55, 213, 255, 0.03);
}
.c17-observed-section.is-empty {
  border-style: dashed;
  opacity: 0.75;
}
.c17-observed-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.c17-observed-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.c17-observed-sub {
  margin: 8px 0 14px;
  font-size: 12px;
  opacity: 0.7;
}
.c17-observed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.c17-observed-card {
  padding: 14px 16px;
  border: 1px solid var(--border, #3a3a3a);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.c17-observed-card-title {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  margin: 0;
}
.c17-observed-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  opacity: 0.75;
  flex-wrap: wrap;
}
.c17-counts {
  display: flex;
  gap: 10px;
  font-size: 12px;
}
.c17-count-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.c17-count-item.is-confirmed { color: #1f9d55; }
.c17-count-item.is-contradicted { color: #9b3939; }
.c17-count-item.is-applied { color: var(--blue, #37d5ff); }
.c17-eval-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.c17-eval-btn {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.c17-eval-btn.is-confirm {
  color: #1f9d55;
  border-color: rgba(31, 157, 85, 0.30);
  background: rgba(31, 157, 85, 0.08);
}
.c17-eval-btn.is-confirm:hover:not(:disabled) {
  background: rgba(31, 157, 85, 0.18);
  border-color: rgba(31, 157, 85, 0.55);
}
.c17-eval-btn.is-contradict {
  color: #9b3939;
  border-color: rgba(155, 57, 57, 0.30);
  background: rgba(155, 57, 57, 0.08);
}
.c17-eval-btn.is-contradict:hover:not(:disabled) {
  background: rgba(155, 57, 57, 0.18);
  border-color: rgba(155, 57, 57, 0.55);
}
.c17-eval-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.c17-block-note {
  font-size: 11px;
  opacity: 0.6;
  margin: 0;
}
.c17-eval-history {
  margin: 0;
  padding: 8px 12px;
  list-style: none;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  padding-top: 8px;
  max-height: 140px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.c17-eval-history-empty {
  font-size: 11px;
  opacity: 0.5;
  margin: 0;
}
.c17-eval-item {
  font-size: 11px;
  line-height: 1.4;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.c17-eval-outcome {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.c17-eval-outcome.is-confirmed {
  color: #1f9d55;
  background: rgba(31, 157, 85, 0.14);
}
.c17-eval-outcome.is-contradicted {
  color: #9b3939;
  background: rgba(155, 57, 57, 0.14);
}
.c17-eval-ref {
  font-family: var(--mono, monospace);
  opacity: 0.85;
}
.c17-eval-when {
  margin-left: auto;
  opacity: 0.5;
}
.c17-eval-note {
  opacity: 0.7;
  font-style: italic;
}

/* C-17 dialog */
.c17-eval-dialog {
  padding: 0;
  border: 1px solid var(--border, #3a3a3a);
  border-radius: 10px;
  background: var(--bg, #06090b);
  color: inherit;
  max-width: 480px;
  width: 90vw;
}
.c17-eval-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.c17-eval-dialog-content {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.c17-eval-dialog-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.c17-eval-dialog-sub {
  margin: 0;
  font-size: 12px;
  opacity: 0.7;
  line-height: 1.4;
}
.c17-eval-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.c17-eval-dialog-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
}
.c17-eval-dialog-form input,
.c17-eval-dialog-form textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, #3a3a3a);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  color: inherit;
  font-family: inherit;
}
.c17-eval-dialog-form textarea { resize: vertical; min-height: 60px; }
.c17-eval-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.c17-eval-dialog-error {
  font-size: 12px;
  color: #9b3939;
  margin: 0;
  min-height: 16px;
}

/* ─── C-17 M2 manual — Progresso e ação de maturidade ─── */
.c17-maturity-progress {
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  padding-top: 10px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.c17-maturity-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
}
.c17-maturity-header strong { font-weight: 600; }
.c17-maturity-sub { opacity: 0.65; font-size: 11px; }
.c17-maturity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 4px 12px;
}
.c17-maturity-row {
  font-size: 11px;
  display: flex;
  gap: 6px;
  align-items: baseline;
  line-height: 1.35;
}
.c17-maturity-row.is-check { color: #1f9d55; }
.c17-maturity-row.is-miss { opacity: 0.75; }
.c17-maturity-mark {
  font-weight: 700;
  width: 12px;
  display: inline-block;
  text-align: center;
}
.c17-maturity-action {
  margin-top: 4px;
  display: flex;
  justify-content: flex-end;
}
.c17-mature-btn {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: #b58400;
  border: 1px solid rgba(181, 132, 0, 0.30);
  background: rgba(181, 132, 0, 0.08);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.c17-mature-btn:hover:not(:disabled) {
  background: rgba(181, 132, 0, 0.18);
  border-color: rgba(181, 132, 0, 0.55);
}
.c17-mature-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.c17-lifecycle-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.c17-lifecycle-tag.is-observando { color: #b58400; background: rgba(181, 132, 0, 0.14); }
.c17-lifecycle-tag.is-maduro { color: #1f9d55; background: rgba(31, 157, 85, 0.14); }
.c17-lifecycle-tag.is-invalidado { color: #9b3939; background: rgba(155, 57, 57, 0.14); }

.c17-matured-banner {
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  padding-top: 10px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.c17-matured-banner strong { color: #1f9d55; font-weight: 700; }
.c17-matured-by { opacity: 0.75; font-size: 11px; }
.c17-matured-note {
  margin: 0;
  font-size: 11px;
  opacity: 0.8;
  font-style: italic;
  line-height: 1.4;
}

/* ─── C-17.4 — Invalidação (saída negativa) ─── */
.c17-invalidation-progress {
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  padding-top: 10px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.c17-invalidate-btn {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: #9b3939;
  border: 1px solid rgba(155, 57, 57, 0.30);
  background: rgba(155, 57, 57, 0.08);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.c17-invalidate-btn:hover:not(:disabled) {
  background: rgba(155, 57, 57, 0.18);
  border-color: rgba(155, 57, 57, 0.55);
}
.c17-invalidate-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.c17-invalidated-banner {
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  padding-top: 10px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.c17-invalidated-banner strong { color: #9b3939; font-weight: 700; }

/* ─── C-17.6 — Reabertura (maduro → observando) ─── */
.c17-reopen-progress {
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  padding-top: 10px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.c17-reopen-btn {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: #2563a7;
  border: 1px solid rgba(37, 99, 167, 0.32);
  background: rgba(37, 99, 167, 0.08);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.c17-reopen-btn:hover:not(:disabled) {
  background: rgba(37, 99, 167, 0.18);
  border-color: rgba(37, 99, 167, 0.55);
}
.c17-reopen-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.c17-reopened-banner {
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  padding-top: 10px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.c17-reopened-banner strong { color: #2563a7; font-weight: 700; }

/* ─── C-17.5 — confidence badge dinâmica + delta auditável ─── */
.c17-confidence-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.c17-confidence-badge.is-high   { color: #1f9d55; background: rgba(31, 157, 85, 0.14); }
.c17-confidence-badge.is-medium { color: #b58400; background: rgba(181, 132, 0, 0.14); }
.c17-confidence-badge.is-low    { color: #9b3939; background: rgba(155, 57, 57, 0.14); }
.c17-confidence-delta {
  font-size: 11px;
  opacity: 0.7;
  font-style: italic;
}

/* ─── C-17.7 — Filtro de lifecycle (Todos / Observando / Maduro / Invalidado) ─── */
.c17-filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}
.c17-filter-btn {
  background: transparent;
  border: 1px solid var(--border, #3a3a3a);
  color: inherit;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.c17-filter-btn:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.20);
}
.c17-filter-btn.is-active {
  background: rgba(55, 213, 255, 0.14);
  color: var(--blue, #37d5ff);
  border-color: rgba(55, 213, 255, 0.40);
  font-weight: 600;
}
.c17-filter-count {
  display: inline-block;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  opacity: 0.85;
  min-width: 16px;
  text-align: center;
}
.c17-filter-btn.is-active .c17-filter-count {
  background: rgba(55, 213, 255, 0.20);
}
.c15-promote-hint {
  font-size: 11px;
  opacity: 0.6;
  margin-right: auto;
}

/* ─── Clientes RFM · intelligence workspace (2026-07) ─── */
.rfm-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin: 10px 0 18px;
}
.rfm-head .eyebrow, .rfm-panel .eyebrow, .rfm-drill .eyebrow { margin: 0 0 4px; }
.rfm-head h2 { margin: 0; max-width: 720px; font-size: clamp(22px, 2.6vw, 31px); line-height: 1.12; letter-spacing: -0.025em; }
.rfm-head > div > p:last-child { margin: 8px 0 0; max-width: 700px; color: var(--muted); font-size: 13px; }
.rfm-method {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  min-width: 245px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font: 600 10px/1.35 var(--font-mono, monospace);
  text-transform: uppercase;
}
.rfm-method span { color: #60a5fa; font-weight: 900; }

.rfm-gate {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
  padding: 16px 18px;
  border-radius: 14px;
}
.rfm-gate--blocked { background: rgba(255,95,87,.07); border: 1px solid rgba(255,95,87,.28); }
.rfm-gate--ready { background: rgba(54,211,153,.07); border: 1px solid rgba(54,211,153,.28); }
.rfm-gate__mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 900; }
.rfm-gate--blocked .rfm-gate__mark { color: #ff5f57; background: rgba(255,95,87,.14); }
.rfm-gate--ready .rfm-gate__mark { color: #36d399; background: rgba(54,211,153,.14); }
.rfm-gate__eyebrow { display: block; margin-bottom: 2px; color: var(--muted); font: 800 9px/1.2 var(--font-mono, monospace); letter-spacing: .09em; text-transform: uppercase; }
.rfm-gate__body > strong { display: block; font-size: 15px; }
.rfm-gate--blocked .rfm-gate__body > strong { color: #ff7d76; }
.rfm-gate--ready .rfm-gate__body > strong { color: #36d399; }
.rfm-gate__body > p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.rfm-gate__checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rfm-gate__checks span { padding: 4px 8px; border: 1px solid rgba(255,95,87,.2); border-radius: 999px; color: #d6a09d; font-size: 10px; }
.rfm-gate__checks i { margin-right: 5px; color: #ff5f57; font-style: normal; font-weight: 900; }
.rfm-gate__link { align-self: center; border: 0; background: transparent; padding: 0; color: inherit; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; }

.rfm-filters { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.rfm-filter { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.rfm-filter > span { margin-right: 4px; color: var(--muted); font: 700 9px/1 var(--font-mono, monospace); letter-spacing: .07em; text-transform: uppercase; }
.rfm-filter button { padding: 6px 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 700; cursor: pointer; transition: .18s ease; }
.rfm-filter button:hover { color: var(--text); border-color: rgba(255,255,255,.22); }
.rfm-filter button.is-active { color: #60a5fa; border-color: rgba(96,165,250,.52); background: rgba(96,165,250,.11); }
.rfm-filter button.is-active.is-channel { color: #36d399; border-color: rgba(54,211,153,.5); background: rgba(54,211,153,.1); }

.rfm-kpis { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; margin-bottom: 14px; }
.rfm-kpi { position: relative; min-height: 108px; padding: 15px 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 13px; background: rgba(255,255,255,.027); }
.rfm-kpi::after { content: ''; position: absolute; right: -28px; bottom: -34px; width: 86px; height: 86px; border-radius: 50%; background: rgba(255,255,255,.025); }
.rfm-kpi > span { display: block; min-height: 27px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.rfm-kpi strong { display: block; margin-top: 3px; font-size: clamp(20px, 2vw, 28px); line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.rfm-kpi small { display: block; margin-top: 8px; color: var(--muted); font-size: 9.5px; line-height: 1.3; }
.rfm-kpi--money strong { color: #60a5fa; }
.rfm-kpi--repeat strong { color: #36d399; }
.rfm-kpi--reach strong { color: #f6bd43; }

.rfm-quality { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 18px; align-items: center; margin-bottom: 14px; padding: 13px 16px; border: 1px solid rgba(246,189,67,.24); border-radius: 12px; background: rgba(246,189,67,.055); }
.rfm-quality span { display: block; color: #f6bd43; font: 800 9px/1.2 var(--font-mono, monospace); letter-spacing: .08em; }
.rfm-quality strong { display: block; margin-top: 3px; font-size: 12px; }
.rfm-quality p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.rfm-quality b { color: #f1cf86; }

.rfm-panel { margin-bottom: 14px; padding: 19px 20px; border: 1px solid rgba(255,255,255,.065); border-radius: 14px; background: rgba(255,255,255,.022); }
.rfm-panel__head { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 14px; }
.rfm-panel__head h3, .rfm-drill > h3 { margin: 0; font-size: 17px; }
.rfm-panel__head small { color: var(--muted); font-size: 10px; }
.rfm-segments { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.rfm-segment { position: relative; display: flex; flex-direction: column; min-height: 214px; padding: 14px; overflow: hidden; text-align: left; color: inherit; border: 1px solid color-mix(in srgb,var(--seg) 24%,transparent); border-radius: 13px; background: color-mix(in srgb,var(--seg) 7%,transparent); cursor: pointer; transition: transform .18s ease,border-color .18s ease,background .18s ease; }
.rfm-segment:hover { transform: translateY(-2px); border-color: color-mix(in srgb,var(--seg) 48%,transparent); background: color-mix(in srgb,var(--seg) 11%,transparent); }
.rfm-segment__head { display: flex; justify-content: space-between; gap: 8px; color: var(--text); font-size: 12px; font-weight: 800; text-transform: capitalize; }
.rfm-segment__head b { color: var(--seg); font: 700 10px/1 var(--font-mono, monospace); }
.rfm-segment > strong { margin-top: 10px; color: var(--seg); font-size: 27px; line-height: 1; }
.rfm-segment > p { min-height: 30px; margin: 5px 0 8px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.rfm-segment__bar { height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.055); }
.rfm-segment__bar i { display: block; height: 100%; background: var(--seg); }
.rfm-segment dl { display: grid; grid-template-columns: .9fr 1.25fr .85fr; gap: 6px; margin: 12px 0 10px; }
.rfm-segment dl div { min-width: 0; }
.rfm-segment dt { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.rfm-segment dd { margin: 3px 0 0; overflow: hidden; font-size: 10.5px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.rfm-segment dd small { color: var(--muted); font-size: 8px; }
.rfm-segment__action { margin-top: auto; color: var(--seg); font-size: 9.5px; font-weight: 800; }

.rfm-layout { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(290px,.8fr); gap: 14px; align-items: start; }
.rfm-cohort-wrap, .rfm-table-wrap { overflow-x: auto; }
.rfm-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.rfm-table th { padding: 7px 8px; color: var(--muted); border-bottom: 1px solid rgba(255,255,255,.07); text-align: left; font: 700 9px/1.2 var(--font-mono, monospace); letter-spacing: .03em; text-transform: uppercase; }
.rfm-table td { padding: 8px; border-bottom: 1px solid rgba(255,255,255,.045); }
.rfm-table tr:last-child td { border-bottom: 0; }
.rfm-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rfm-cohort { min-width: 560px; }
.rfm-cohort__cell { display: inline-grid; place-items: center; min-width: 38px; height: 27px; padding: 0 5px; border: 1px solid color-mix(in srgb,#60a5fa var(--strength),transparent); border-radius: 6px; background: color-mix(in srgb,#60a5fa var(--strength),transparent); }
.rfm-cohort__empty { color: rgba(255,255,255,.24); }
.rfm-note { margin: 10px 0 0; color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.rfm-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 2px; background: var(--seg); }

.rfm-drill { min-height: 236px; }
.rfm-drill > p:last-child, .rfm-empty { color: var(--muted); font-size: 12px; line-height: 1.5; }
.rfm-customer-list { max-height: 470px; overflow: auto; padding-right: 4px; }
.rfm-customer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.055); }
.rfm-customer:last-child { border-bottom: 0; }
.rfm-customer > div { min-width: 0; }
.rfm-customer > div strong,.rfm-customer > div span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfm-customer > div strong { font-size: 11.5px; }
.rfm-customer > div span { margin-top: 2px; color: var(--muted); font-size: 8.5px; }
.rfm-customer dl { display: flex; gap: 11px; margin: 0; }
.rfm-customer dl div { text-align: right; }
.rfm-customer dt { color: var(--muted); font-size: 7.5px; text-transform: uppercase; }
.rfm-customer dd { margin: 2px 0 0; font-size: 10px; font-weight: 800; }
.rfm-customer dd.ok { color: #36d399; }.rfm-customer dd.warn { color: #f6bd43; }.rfm-customer dd.risk { color: #ff7d76; }
.rfm-customer__reach { grid-column: 1/-1; color: var(--muted); font-size: 8.5px; }
.rfm-customer__reach.is-on { color: #36d399; }
.rfm-privacy { margin: 2px 0 16px; color: var(--muted); font-size: 10px; text-align: center; }

@media (max-width: 1160px) {
  .rfm-kpis { grid-template-columns: repeat(3,1fr); }
  .rfm-segments { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 820px) {
  .rfm-head { align-items: start; flex-direction: column; }
  .rfm-method { width: 100%; box-sizing: border-box; }
  .rfm-kpis { grid-template-columns: repeat(2,1fr); }
  .rfm-segments { grid-template-columns: repeat(2,1fr); }
  .rfm-layout { grid-template-columns: 1fr; }
  .rfm-quality { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 560px) {
  .rfm-gate { grid-template-columns: auto minmax(0,1fr); }
  .rfm-gate__link { display: none; }
  .rfm-kpis,.rfm-segments { grid-template-columns: 1fr; }
  .rfm-segment { min-height: 194px; }
  .rfm-panel { padding: 15px; }
}

/* ───────────────────────────────────────────────────────────────────
   Planejar Meta — honestidade de fonte (banner + separação de universos)
   Adicionado 2026-07-15: distingue execução real de plano hipotético.
   ─────────────────────────────────────────────────────────────────── */
.honesty-banner {
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 14px 0 6px;
  background: rgba(113, 232, 255, .04);
}
.honesty-banner.tone-warn { border-color: rgba(246, 189, 67, .4); background: rgba(246, 189, 67, .06); }
.honesty-banner.tone-danger { border-color: rgba(255, 95, 87, .4); background: rgba(255, 95, 87, .06); }
.honesty-banner-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.honesty-banner-icon { font-size: 15px; color: var(--muted); }
.honesty-banner.tone-warn .honesty-banner-icon { color: var(--warning); }
.honesty-banner.tone-danger .honesty-banner-icon { color: var(--danger); }
.honesty-banner-title { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--text); }
.honesty-banner-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.honesty-banner-list li { font-size: 12px; line-height: 1.55; color: var(--muted); }
.honesty-banner-list strong { color: var(--text); font-weight: 600; }
.honesty-banner-list em { font-style: normal; color: var(--warning); }

.universe-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  margin: 22px 0 8px; color: var(--muted);
}
.universe-label .universe-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.universe-real .universe-dot { background: var(--success); box-shadow: 0 0 8px rgba(53, 226, 154, .5); }
.universe-plan .universe-dot { background: var(--orange); box-shadow: 0 0 8px rgba(253, 128, 67, .5); }
.universe-real { color: var(--success); }
.universe-plan { color: var(--orange); }

/* Selo de origem por campo no card de driver */
.drv-src {
  font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 5px; margin-left: 6px; vertical-align: middle;
}
.drv-src-real { color: var(--success); background: rgba(53, 226, 154, .12); }
.drv-src-hip  { color: var(--warning); background: rgba(246, 189, 67, .13); }
.drv-src-man  { color: var(--muted); background: rgba(142, 166, 173, .13); }

/* Pílula "hipótese"/"base site" nos rótulos de KPI do brief */
.kpi-hip {
  font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 5px; margin-left: 5px;
  color: var(--warning); background: rgba(246, 189, 67, .13);
}