:root {
  --bg-main: #f3f6f8;
  --bg-soft: #e7edf1;
  --panel: #ffffff;
  --panel-2: #f8fbfc;
  --ink-900: #12202d;
  --ink-700: #2e465d;
  --ink-600: #48657d;
  --line-soft: #bdd0de78;
  --line-strong: #a8bfd1;
  --brand-900: #34506c;
  --brand-700: #6387aa;
  --brand-500: #6dbbba;
  --accent-warm: #f0a85d;
  --danger: #bb3f3f;
  --ok: #277a57;
  --warn: #a06f2f;
  --ui-body-font: "Manrope", sans-serif;
  --ui-display-font: "Sora", sans-serif;
  --ui-radius-base: 14px;
  --ui-spacing-scale: 1;
  --ui-shadow-scale: 1;
  --table-cell-y: 8px;
  --table-cell-x: 8px;
}

body[data-theme="atlas"] {
  --bg-main: #f3f6f8;
  --bg-soft: #e7edf1;
  --panel: #ffffff;
  --panel-2: #f8fbfc;
  --ink-900: #12202d;
  --ink-700: #2e465d;
  --ink-600: #48657d;
  --line-soft: #bdd0de78;
  --line-strong: #a8bfd1;
  --brand-900: #34506c;
  --brand-700: #6387aa;
  --brand-500: #6dbbba;
}

body[data-theme="costa"] {
  --bg-main: #eef6f6;
  --bg-soft: #e0ecec;
  --panel: #fefefe;
  --panel-2: #f3fbfb;
  --ink-900: #16313b;
  --ink-700: #36505d;
  --ink-600: #4d6774;
  --line-soft: #9fcbcb79;
  --line-strong: #97bdbf;
  --brand-900: #1f5c6d;
  --brand-700: #3f7f90;
  --brand-500: #79bcad;
}

body[data-theme="arena"] {
  --bg-main: #f7f4ee;
  --bg-soft: #efe7da;
  --panel: #fffdf9;
  --panel-2: #fcf8f0;
  --ink-900: #34291f;
  --ink-700: #5f4a36;
  --ink-600: #7d6650;
  --line-soft: #d4c1a27a;
  --line-strong: #c8b08d;
  --brand-900: #7f5b3f;
  --brand-700: #ab7f5f;
  --brand-500: #d3b391;
}

body[data-theme="grafito"] {
  --bg-main: #f0f2f5;
  --bg-soft: #e4e8ed;
  --panel: #ffffff;
  --panel-2: #f7f9fc;
  --ink-900: #1f2430;
  --ink-700: #3f4758;
  --ink-600: #5a6477;
  --line-soft: #a9b3c580;
  --line-strong: #97a5bc;
  --brand-900: #3b4b69;
  --brand-700: #5f7394;
  --brand-500: #8ca2c8;
}

body[data-theme="oliva"] {
  --bg-main: #f3f6f0;
  --bg-soft: #e8eee0;
  --panel: #fefefc;
  --panel-2: #f5f8f1;
  --ink-900: #222d20;
  --ink-700: #40543b;
  --ink-600: #5c7155;
  --line-soft: #b8caa97f;
  --line-strong: #a5b891;
  --brand-900: #4f6e42;
  --brand-700: #79916a;
  --brand-500: #a7bf8f;
}

body[data-theme="cielo"] {
  --bg-main: #eef5fb;
  --bg-soft: #e1ebf8;
  --panel: #ffffff;
  --panel-2: #f4f8fd;
  --ink-900: #1c2840;
  --ink-700: #3d5270;
  --ink-600: #5b7395;
  --line-soft: #b3c5e07e;
  --line-strong: #9eb4d2;
  --brand-900: #345b93;
  --brand-700: #4e7dc2;
  --brand-500: #7ba8e6;
}

body[data-theme="custom"] {
  --bg-main: var(--custom-bg-main, #f3f6f8);
  --bg-soft: var(--custom-bg-soft, #e7edf1);
  --panel: var(--custom-panel, #ffffff);
  --panel-2: var(--custom-panel-2, #f8fbfc);
  --ink-900: var(--custom-ink-900, #12202d);
  --ink-700: var(--custom-ink-700, #2e465d);
  --ink-600: var(--custom-ink-600, #48657d);
  --line-soft: var(--custom-line-soft, #bdd0de78);
  --line-strong: var(--custom-line-strong, #a8bfd1);
  --brand-900: var(--custom-brand-900, #34506c);
  --brand-700: var(--custom-brand-700, #6387aa);
  --brand-500: var(--custom-brand-500, #6dbbba);
}

body[data-contrast="soft"] .panel {
  border-color: color-mix(in srgb, var(--line-soft) 84%, white);
}

body[data-contrast="high"] .panel {
  border-color: color-mix(in srgb, var(--brand-900) 36%, var(--line-soft));
}

body[data-contrast="high"] .readonly-value {
  color: color-mix(in srgb, var(--brand-900) 82%, black);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: var(--ui-body-font);
  color: var(--ink-900);
  background: linear-gradient(170deg, #f9fbfc 0%, var(--bg-main) 42%, var(--bg-soft) 100%);
}

.aurora-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 400px at -5% -10%, color-mix(in srgb, var(--brand-500) 28%, transparent) 0%, #0000 65%),
    radial-gradient(760px 360px at 103% -8%, color-mix(in srgb, var(--brand-700) 22%, transparent) 0%, #0000 65%),
    radial-gradient(700px 380px at 45% 103%, color-mix(in srgb, var(--accent-warm) 26%, transparent) 0%, #0000 70%);
  z-index: 0;
}

.shell {
  position: relative;
  z-index: 1;
  max-width: 1260px;
  margin: 0 auto;
  padding: 24px 14px 42px;
  display: grid;
  gap: 14px;
}

.panel {
  border-radius: calc(var(--ui-radius-base) + 4px);
  border: 1px solid var(--line-soft);
  background: var(--panel);
  box-shadow:
    0 calc(18px * var(--ui-shadow-scale)) calc(44px * var(--ui-shadow-scale))
      color-mix(in srgb, var(--brand-900) 18%, transparent),
    inset 0 1px 0 #ffffffdb;
}

.hero {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.hero-main {
  max-width: 760px;
}

.hero h1 {
  font-family: var(--ui-display-font);
  margin: 10px 0;
  font-size: clamp(1.6rem, 2.9vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.hero p {
  margin: 0;
  max-width: 68ch;
  color: var(--ink-600);
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--brand-500) 68%, white);
  color: var(--brand-900);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 16%, white) 0%, #eef5fa 100%);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 380px;
}

.btn {
  border: 0;
  cursor: pointer;
  border-radius: calc(var(--ui-radius-base) - 2px);
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn.primary {
  color: #fff;
  background: linear-gradient(
    140deg,
    var(--brand-900) 0%,
    color-mix(in srgb, var(--brand-700) 86%, #4f6e90) 48%,
    color-mix(in srgb, var(--brand-500) 84%, #58a4a9) 100%
  );
  box-shadow: 0 10px 30px color-mix(in srgb, var(--brand-900) 36%, transparent);
}

.btn.secondary {
  color: var(--ink-900);
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, #fbfdff 0%, #f1f6fa 100%);
}

.btn.soft {
  color: var(--brand-900);
  border: 1px solid color-mix(in srgb, var(--brand-700) 44%, white);
  background: color-mix(in srgb, var(--brand-500) 12%, white);
}

.flow-panel {
  padding: 14px 16px;
}

.flow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.flow-kicker {
  margin: 0;
  color: var(--ink-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 700;
}

.flow-panel h2 {
  margin: 2px 0 0;
  font-family: var(--ui-display-font);
  font-size: 1.03rem;
}

.flow-controls {
  display: flex;
  gap: 8px;
}

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

.step-chip {
  border: 1px solid var(--line-strong);
  background: #f4f8fb;
  color: var(--ink-700);
  border-radius: calc(var(--ui-radius-base) - 4px);
  padding: 10px 12px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.step-chip.active {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--brand-500) 24%, white) 0%,
    color-mix(in srgb, var(--brand-700) 14%, white) 100%
  );
  border-color: color-mix(in srgb, var(--brand-700) 66%, white);
  color: var(--brand-900);
  box-shadow: inset 0 1px 0 #ffffffe6;
}

.metrics-toggle {
  padding: 8px 14px 12px;
}

.metrics-toggle summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink-700);
}

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

.kpi-card {
  padding: 16px 16px 14px;
  background: linear-gradient(180deg, #ffffff 0%, var(--panel-2) 100%);
}

.kpi-label {
  margin: 0;
  color: var(--ink-600);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.kpi-value {
  margin: 6px 0 4px;
  font-size: clamp(1.18rem, 2vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.kpi-sub {
  margin: 0;
  color: var(--ink-700);
  font-size: 13px;
}

.layout {
  display: grid;
  gap: 14px;
}

.step-panel {
  display: none;
}

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

.section {
  padding: calc(18px * var(--ui-spacing-scale));
}

.section-head {
  margin-bottom: 12px;
}

.section-head h2 {
  margin: 0;
  font-family: var(--ui-display-font);
  font-size: 1.1rem;
}

.section-head h3 {
  margin: 0;
  font-family: var(--ui-display-font);
  font-size: 1rem;
}

.section-head p {
  margin: 4px 0 0;
  color: var(--ink-600);
  font-size: 14px;
}

.section-head.compact {
  margin-top: 14px;
}

.grid {
  display: grid;
  gap: calc(10px * var(--ui-spacing-scale));
}

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

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

.grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

label {
  display: grid;
  gap: 6px;
  color: var(--ink-700);
  font-size: 13px;
  font-weight: 600;
}

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

input,
select,
textarea {
  width: 100%;
  font: inherit;
  color: var(--ink-900);
  border-radius: calc(var(--ui-radius-base) - 3px);
  border: 1px solid var(--line-strong);
  padding: calc(9px * var(--ui-spacing-scale)) calc(11px * var(--ui-spacing-scale));
  background: #fff;
}

textarea {
  resize: vertical;
  min-height: 72px;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--brand-700) 46%, white);
  outline-offset: 1px;
}

.theme-swatches {
  margin: 10px 0 14px;
  display: flex;
  gap: 8px;
}

.swatch {
  width: 36px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #ffffffbf;
  box-shadow: 0 0 0 1px #d8e2ea;
}

.swatch.atlas {
  background: linear-gradient(90deg, #34506c 0%, #6dbbba 100%);
}

.swatch.costa {
  background: linear-gradient(90deg, #1f5c6d 0%, #79bcad 100%);
}

.swatch.arena {
  background: linear-gradient(90deg, #7f5b3f 0%, #d3b391 100%);
}

.swatch.grafito {
  background: linear-gradient(90deg, #3b4b69 0%, #8ca2c8 100%);
}

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

.canva-card {
  border: 1px solid var(--line-soft);
  background: #fff;
  border-radius: calc(var(--ui-radius-base) + 2px);
  padding: calc(10px * var(--ui-spacing-scale));
  display: grid;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.canva-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 calc(16px * var(--ui-shadow-scale)) calc(28px * var(--ui-shadow-scale))
    color-mix(in srgb, var(--brand-900) 15%, transparent);
}

.canva-card.active {
  border-color: color-mix(in srgb, var(--brand-700) 64%, white);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--brand-500) 26%, white),
    0 calc(18px * var(--ui-shadow-scale)) calc(32px * var(--ui-shadow-scale))
      color-mix(in srgb, var(--brand-900) 18%, transparent);
}

.thumb {
  height: 142px;
  border-radius: calc(var(--ui-radius-base) - 2px);
  padding: 12px;
  display: grid;
  align-content: start;
  gap: 8px;
  border: 1px solid #ffffffb8;
  box-shadow: inset 0 1px 0 #ffffffa8;
}

.thumb-title {
  width: 58%;
  height: 16px;
  border-radius: 999px;
  background: #ffffffcf;
}

.thumb-line {
  width: 78%;
  height: 8px;
  border-radius: 999px;
  background: #ffffffad;
}

.thumb-block {
  width: 100%;
  height: 70px;
  border-radius: calc(var(--ui-radius-base) - 4px);
  background: #ffffffa3;
}

.thumb.atlas {
  background: linear-gradient(150deg, #3f5670 0%, #8fc7c0 100%);
}

.thumb.costa {
  background: linear-gradient(150deg, #2d6677 0%, #8bc4b7 100%);
}

.thumb.arena {
  background: linear-gradient(150deg, #8a6648 0%, #dbc2a2 100%);
}

.thumb.grafito {
  background: linear-gradient(150deg, #47597b 0%, #9ab0d3 100%);
}

.thumb.oliva {
  background: linear-gradient(150deg, #5c794e 0%, #b8ca98 100%);
}

.thumb.cielo {
  background: linear-gradient(150deg, #3e6ca8 0%, #92baf1 100%);
}

.canva-card .meta strong {
  font-size: 14px;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}

.canva-card .meta p {
  margin: 2px 0 0;
  color: var(--ink-600);
  font-size: 12px;
  line-height: 1.35;
}

.designer-lab {
  margin-top: 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--ui-radius-base);
  background: color-mix(in srgb, var(--brand-500) 6%, white);
  padding: calc(10px * var(--ui-spacing-scale));
}

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

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

.design-grid-pro input[type="range"] {
  accent-color: var(--brand-700);
  cursor: ew-resize;
}

.canvas-preview {
  margin-top: 12px;
  border-radius: calc(var(--ui-radius-base) + 2px);
  border: 1px solid color-mix(in srgb, var(--brand-700) 32%, white);
  background:
    radial-gradient(120% 90% at 2% 0%, color-mix(in srgb, var(--brand-500) 26%, transparent), transparent),
    linear-gradient(165deg, color-mix(in srgb, var(--brand-900) 14%, white), color-mix(in srgb, var(--brand-500) 10%, white));
  padding: 10px;
  box-shadow: inset 0 1px 0 #ffffffc2;
}

.canvas-preview-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
}

.canvas-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-900) 70%, white);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-900) 30%, transparent);
}

.canvas-line {
  height: 12px;
  width: min(220px, 70%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-700) 44%, white);
}

.canvas-preview-body {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 8px;
}

.canvas-col {
  border-radius: calc(var(--ui-radius-base) - 4px);
  border: 1px solid #ffffffb5;
  background: #ffffffc9;
  padding: 10px;
  display: grid;
  gap: 7px;
}

.canvas-col span {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-700) 24%, white);
}

.canvas-col.main span:nth-child(1) {
  width: 84%;
}

.canvas-col.main span:nth-child(2) {
  width: 62%;
}

.canvas-col.main span:nth-child(3) {
  width: 96%;
  height: 48px;
  border-radius: calc(var(--ui-radius-base) - 5px);
}

.canvas-col.side span:nth-child(1) {
  width: 88%;
}

.canvas-col.side span:nth-child(2) {
  width: 76%;
  height: 36px;
  border-radius: calc(var(--ui-radius-base) - 6px);
}

.canvas-preview[data-header-style="editorial"] .canvas-dot {
  border-radius: 4px;
}

.canvas-preview[data-header-style="editorial"] .canvas-line {
  width: min(160px, 56%);
}

.canvas-preview[data-header-style="sales"] .canvas-line {
  width: min(260px, 84%);
  height: 14px;
}

.canvas-preview[data-header-style="sales"] .canvas-col.main span:nth-child(3) {
  height: 56px;
}

.saved-template-panel {
  margin-top: 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--ui-radius-base);
  background: color-mix(in srgb, var(--brand-500) 6%, white);
  padding: calc(10px * var(--ui-spacing-scale));
}

.fallback-theme {
  margin-top: 12px;
  max-width: 320px;
}

.saved-template-actions {
  display: grid;
  gap: 10px;
  grid-template-columns: 2fr auto 2fr auto auto;
  align-items: end;
}

.template-card {
  border: 1px solid var(--line-strong);
  background: #f8fbfd;
  border-radius: 14px;
  padding: 11px;
  text-align: left;
  display: grid;
  gap: 6px;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.template-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--brand-900) 15%, transparent);
}

.template-card.active {
  border-color: color-mix(in srgb, var(--brand-700) 66%, white);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--brand-500) 15%, white) 0%,
    color-mix(in srgb, var(--brand-700) 7%, white) 100%
  );
}

.template-card strong {
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.template-card p {
  margin: 0;
  font-size: 12px;
  color: var(--ink-600);
  line-height: 1.38;
}

.template-tag {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid #d4e2ee;
  background: #fff;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-700);
}

.swatch-line {
  height: 10px;
  border-radius: 999px;
  border: 1px solid #fff;
  box-shadow: inset 0 0 0 1px #d8e2ea;
}

.swatch-line.atlas {
  background: linear-gradient(90deg, #34506c 0%, #6dbbba 100%);
}

.swatch-line.costa {
  background: linear-gradient(90deg, #1f5c6d 0%, #79bcad 100%);
}

.swatch-line.arena {
  background: linear-gradient(90deg, #7f5b3f 0%, #d3b391 100%);
}

.swatch-line.grafito {
  background: linear-gradient(90deg, #3b4b69 0%, #8ca2c8 100%);
}

.logo-preview-wrap {
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: #fafcfe;
  padding: 8px;
  min-height: 90px;
  display: grid;
  gap: 6px;
  align-content: start;
}

.logo-label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-600);
}

#companyLogoPreview {
  max-height: 54px;
  max-width: 180px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #e0e8f1;
  border-radius: 8px;
  padding: 4px;
}

.inline-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inline-actions select {
  width: min(340px, 100%);
}

.advanced-block {
  margin-top: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand-500) 6%, white);
  padding: 10px;
}

.advanced-block summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink-700);
  margin-bottom: 10px;
}

.table-wrap {
  margin-top: 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--ui-radius-base);
  overflow: auto;
  background: #fff;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1120px;
}

th,
td {
  padding: var(--table-cell-y) var(--table-cell-x);
  border-bottom: 1px solid #dbe7f0;
  text-align: left;
  font-size: 13px;
  vertical-align: middle;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, #eef4f8 0%, #e4edf4 100%);
  color: #203c56;
  font-weight: 700;
}

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

.row-input {
  width: 100%;
  border-radius: calc(var(--ui-radius-base) - 6px);
  border: 1px solid #c5d5e1;
  padding: calc(6px * var(--ui-spacing-scale)) calc(8px * var(--ui-spacing-scale));
  font-size: 13px;
}

.readonly-value {
  font-weight: 700;
  color: #163b59;
  white-space: nowrap;
}

.line-margin.negative {
  color: var(--danger);
}

.line-margin.ok {
  color: var(--ok);
}

.mini-actions {
  display: flex;
  gap: 6px;
}

.mini-btn {
  border: 1px solid #bccfdf;
  background: #f5f9fd;
  color: #2f5475;
  border-radius: calc(var(--ui-radius-base) - 6px);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  cursor: pointer;
}

.mini-btn.danger {
  color: var(--danger);
  border-color: #e3bcbc;
  background: #fff8f8;
}

.totals-form {
  margin-top: 12px;
}

.totals-card {
  margin-top: 12px;
  border: 1px solid var(--line-soft);
  border-radius: calc(var(--ui-radius-base) - 2px);
  background: linear-gradient(180deg, #fbfdff 0%, #f0f5f9 100%);
  padding: 12px;
  display: grid;
  gap: 7px;
}

.totals-card > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.totals-card .emphasis {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px dashed #b7cad8;
  font-size: 15px;
}

.note {
  font-size: 13px;
  color: var(--ink-700);
}

.note.good {
  color: var(--ok);
}

.note.warn {
  color: var(--warn);
}

.quality-card {
  margin-top: 8px;
  border: 1px solid #cad8e3;
  border-radius: calc(var(--ui-radius-base) - 2px);
  background: #f4f8fb;
  padding: 12px;
  display: grid;
  gap: 6px;
}

.quality-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.quality-row strong {
  font-size: 13px;
}

.quality-row.pass {
  color: var(--ok);
}

.quality-row.fail {
  color: #8d5d23;
}

.preview-box {
  --preview-panel: #ffffff;
  --preview-panel-2: #f8fbfc;
  --preview-ink-900: #12202d;
  --preview-ink-700: #2e465d;
  --preview-ink-600: #48657d;
  --preview-line-strong: #cbd9e5;
  --preview-line-soft: #dbe7f0;
  --preview-brand-900: #34506c;
  --preview-brand-700: #6387aa;
  --preview-brand-500: #6dbbba;
  --preview-display-font: var(--ui-display-font);
  --preview-body-font: var(--ui-body-font);
  --preview-radius-base: var(--ui-radius-base);
  --preview-cell-y: 8px;
  --preview-cell-x: 8px;
  margin-top: 10px;
  border: 1px solid var(--preview-line-strong);
  border-radius: var(--preview-radius-base);
  background: var(--preview-panel);
  color: var(--preview-ink-900);
  font-family: var(--preview-body-font);
  padding: calc(16px * var(--preview-spacing-scale, 1));
}

.preview-box.theme-atlas {
  --preview-panel: #ffffff;
  --preview-panel-2: #f8fbfc;
  --preview-ink-900: #12202d;
  --preview-ink-700: #2e465d;
  --preview-ink-600: #48657d;
  --preview-line-strong: #cbd9e5;
  --preview-line-soft: #dbe7f0;
  --preview-brand-900: #34506c;
  --preview-brand-700: #6387aa;
  --preview-brand-500: #6dbbba;
}

.preview-box.theme-costa {
  --preview-panel: #fefefe;
  --preview-panel-2: #f3fbfb;
  --preview-ink-900: #16313b;
  --preview-ink-700: #36505d;
  --preview-ink-600: #4d6774;
  --preview-line-strong: #bad0d3;
  --preview-line-soft: #cddfe2;
  --preview-brand-900: #1f5c6d;
  --preview-brand-700: #3f7f90;
  --preview-brand-500: #79bcad;
}

.preview-box.theme-arena {
  --preview-panel: #fffdf9;
  --preview-panel-2: #fcf8f0;
  --preview-ink-900: #34291f;
  --preview-ink-700: #5f4a36;
  --preview-ink-600: #7d6650;
  --preview-line-strong: #d5c2a8;
  --preview-line-soft: #e4d6c2;
  --preview-brand-900: #7f5b3f;
  --preview-brand-700: #ab7f5f;
  --preview-brand-500: #d3b391;
}

.preview-box.theme-grafito {
  --preview-panel: #ffffff;
  --preview-panel-2: #f7f9fc;
  --preview-ink-900: #1f2430;
  --preview-ink-700: #3f4758;
  --preview-ink-600: #5a6477;
  --preview-line-strong: #bcc7d8;
  --preview-line-soft: #d2dae6;
  --preview-brand-900: #3b4b69;
  --preview-brand-700: #5f7394;
  --preview-brand-500: #8ca2c8;
}

.preview-box.theme-oliva {
  --preview-panel: #fefefc;
  --preview-panel-2: #f5f8f1;
  --preview-ink-900: #222d20;
  --preview-ink-700: #40543b;
  --preview-ink-600: #5c7155;
  --preview-line-strong: #c0cfb2;
  --preview-line-soft: #d8e3cc;
  --preview-brand-900: #4f6e42;
  --preview-brand-700: #79916a;
  --preview-brand-500: #a7bf8f;
}

.preview-box.theme-cielo {
  --preview-panel: #ffffff;
  --preview-panel-2: #f4f8fd;
  --preview-ink-900: #1c2840;
  --preview-ink-700: #3d5270;
  --preview-ink-600: #5b7395;
  --preview-line-strong: #c2d0e6;
  --preview-line-soft: #d9e2f0;
  --preview-brand-900: #345b93;
  --preview-brand-700: #4e7dc2;
  --preview-brand-500: #7ba8e6;
}

.preview-box.theme-custom {
  --preview-panel: var(--preview-custom-panel, #ffffff);
  --preview-panel-2: var(--preview-custom-panel-2, #f8fbfc);
  --preview-ink-900: var(--preview-custom-ink-900, #12202d);
  --preview-ink-700: var(--preview-custom-ink-700, #2e465d);
  --preview-ink-600: var(--preview-custom-ink-600, #48657d);
  --preview-line-strong: var(--preview-custom-line-strong, #cbd9e5);
  --preview-line-soft: var(--preview-custom-line-soft, #dbe7f0);
  --preview-brand-900: var(--preview-custom-brand-900, #34506c);
  --preview-brand-700: var(--preview-custom-brand-700, #6387aa);
  --preview-brand-500: var(--preview-custom-brand-500, #6dbbba);
}

.preview-logo {
  max-height: 68px;
  max-width: 220px;
  object-fit: contain;
  display: block;
  margin-bottom: 10px;
  border: 1px solid #dde5ef;
  border-radius: 10px;
  padding: 6px;
  background: #fff;
}

.preview-box h3 {
  margin: 0 0 6px;
  color: var(--preview-ink-900);
  font-family: var(--preview-display-font);
  font-size: 1.2rem;
}

.preview-box h4 {
  margin: 16px 0 8px;
  color: var(--preview-ink-900);
  font-family: var(--preview-display-font);
  font-size: 0.95rem;
}

.preview-box p {
  margin: 7px 0;
  color: var(--preview-ink-700);
  line-height: 1.5;
  font-size: 14px;
}

.preview-box ul {
  margin: 8px 0;
  padding-left: 18px;
}

.preview-box li {
  margin: 5px 0;
  color: var(--preview-ink-700);
  font-size: 14px;
}

.preview-box table {
  border: 1px solid var(--preview-line-soft);
  border-radius: calc(var(--preview-radius-base) - 4px);
  min-width: 0;
  overflow: hidden;
}

.preview-box th {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--preview-brand-500) 20%, var(--preview-panel)) 0%,
    color-mix(in srgb, var(--preview-brand-700) 15%, var(--preview-panel)) 100%
  );
  color: var(--preview-ink-900);
}

.preview-box th,
.preview-box td {
  border-bottom: 1px solid var(--preview-line-soft);
  padding: var(--preview-cell-y) var(--preview-cell-x);
}

.preview-box th,
.preview-box td {
  font-size: 12px;
}

.preview-box .muted {
  color: var(--preview-ink-600);
}

.muted {
  color: var(--ink-600);
}

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

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

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

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

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

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

  .saved-template-actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .hero {
    flex-direction: column;
  }

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

  .flow-header {
    flex-direction: column;
    align-items: stretch;
  }

  .flow-controls {
    justify-content: flex-start;
  }

  .grid.cols-2,
  .grid.cols-3,
  .grid.cols-4 {
    grid-template-columns: 1fr;
  }

  .canva-library {
    grid-template-columns: 1fr;
  }

  .design-grid {
    grid-template-columns: 1fr;
  }

  .design-grid-pro {
    grid-template-columns: 1fr;
  }

  .saved-template-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .shell {
    padding: 14px 10px 24px;
  }

  .section {
    padding: 14px;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }
}