.marketing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
  gap: 16px;
  position: relative;
  isolation: isolate;
}

.marketing-layout::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(circle at 10% 10%, rgba(56, 189, 248, 0.16), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(251, 146, 60, 0.12), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(168, 85, 247, 0.1), transparent 30%),
    linear-gradient(180deg, #050913 0%, #09101d 45%, #060b14 100%);
}

.marketing-layout::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.32;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(circle at center, black 44%, transparent 100%);
}

.marketing-layout .card,
.marketing-layout .output-section,
.marketing-layout .info-card,
.marketing-layout .copy-card,
.campaign-row,
.wizard-step-chip,
.wizard-choice,
.wizard-summary-card,
.learning-card,
.creative-flow-node {
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .24s ease;
}

.marketing-layout .card,
.marketing-layout .output-section,
.marketing-layout .info-card,
.marketing-layout .copy-card {
  position: relative;
  border: 1px solid rgba(103, 232, 249, 0.42);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 22%, rgba(7, 12, 22, 0.56) 58%, rgba(7, 12, 22, 0.72)),
    linear-gradient(180deg, rgba(8, 14, 25, 0.78), rgba(4, 8, 16, 0.72));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 16px 40px rgba(2, 8, 23, 0.34),
    0 0 0 1px rgba(103, 232, 249, 0.16),
    0 0 26px rgba(34, 211, 238, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  animation: holoFloat 10s ease-in-out infinite;
}

.marketing-layout .card::before,
.marketing-layout .output-section::before,
.marketing-layout .info-card::before,
.marketing-layout .copy-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(125, 211, 252, 0.16), transparent 18%, transparent 58%, rgba(251, 191, 36, 0.08) 82%, transparent),
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 28%);
  opacity: 0.9;
}

.marketing-layout .card::after,
.marketing-layout .output-section::after,
.marketing-layout .info-card::after,
.marketing-layout .copy-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: linear-gradient(135deg, rgba(125, 211, 252, 0.34), rgba(255, 255, 255, 0.04) 26%, rgba(251, 191, 36, 0.16) 58%, rgba(168, 85, 247, 0.26));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 1;
  filter: drop-shadow(0 0 12px rgba(103, 232, 249, 0.28));
}

.marketing-layout .card > *,
.marketing-layout .output-section > *,
.marketing-layout .info-card > *,
.marketing-layout .copy-card > * {
  position: relative;
  z-index: 1;
}

.marketing-hero {
  position: relative;
  overflow: hidden;
  border-color: rgba(125, 211, 252, 0.3);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.22), transparent 24%),
    radial-gradient(circle at top right, rgba(251, 146, 60, 0.2), transparent 24%),
    linear-gradient(180deg, rgba(18, 30, 49, 0.7), rgba(8, 14, 24, 0.52));
}

.marketing-hero::after {
  content: '';
  position: absolute;
  inset: -20% -40%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.08) 46%, transparent 58%);
  transform: translateX(-20%);
  animation: holoSweep 9s linear infinite;
}

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

.marketing-hero__card,
.guided-intro-card {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(125, 211, 252, 0.04) 18%, rgba(9, 18, 31, 0.54) 62%, rgba(6, 12, 21, 0.76)),
    linear-gradient(180deg, rgba(12, 21, 35, 0.66), rgba(8, 15, 25, 0.56));
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(2, 8, 23, 0.2);
}

.marketing-hero__card:hover,
.guided-intro-card:hover,
.campaign-row:hover,
.wizard-summary-card:hover,
.learning-card:hover,
.creative-flow-node:hover {
  transform: translateY(-2px);
  border-color: rgba(103, 232, 249, 0.82);
  box-shadow:
    0 18px 34px rgba(2, 8, 23, 0.26),
    0 0 0 1px rgba(103, 232, 249, 0.24),
    0 0 36px rgba(34, 211, 238, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.marketing-hero__card h3,
.guided-intro-card strong {
  margin: 10px 0 8px;
  color: #f8fbff;
}

.marketing-hero__card p,
.guided-intro-card p {
  margin: 0;
  color: #b7c7dd;
  line-height: 1.6;
}

.wizard-modal[hidden] {
  display: none !important;
}

.wizard-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.wizard-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 18, 0.72);
  backdrop-filter: blur(4px);
}

.wizard-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(1380px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: 16px auto;
  overflow: auto;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(125, 211, 252, 0.03) 18%, rgba(7, 12, 22, 0.72) 60%, rgba(4, 8, 16, 0.84)),
    linear-gradient(180deg, rgba(17, 26, 43, 0.84), rgba(11, 18, 32, 0.84));
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    0 30px 70px rgba(2, 8, 23, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.wizard-modal__dialog::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: linear-gradient(135deg, rgba(125, 211, 252, 0.32), rgba(255, 255, 255, 0.06) 26%, rgba(249, 115, 22, 0.18) 52%, rgba(168, 85, 247, 0.26));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.72;
}

.wizard-modal__header,
.wizard-modal__footer {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(34, 52, 83, 0.9);
}

.wizard-modal__footer {
  border-top: 1px solid rgba(34, 52, 83, 0.9);
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.wizard-modal__body {
  padding: 18px;
  display: grid;
  gap: 16px;
}

.wizard-progress {
  padding: 0 18px 18px;
}

.wizard-progress__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: #cfe3ff;
  margin-bottom: 8px;
}

.wizard-progress__bar {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(34, 52, 83, 0.85);
}

.wizard-progress__bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #67e8f9, #60a5fa 42%, #f59e0b 86%, #f97316);
  box-shadow: 0 0 14px rgba(96, 165, 250, 0.3);
  transition: width .2s ease;
}

.wizard-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.wizard-step-chip {
  border: 1px solid rgba(103, 232, 249, 0.34);
  border-radius: 14px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(15, 24, 40, 0.54), rgba(8, 13, 24, 0.5));
  backdrop-filter: blur(10px);
  color: #cfe3ff;
}

.wizard-step-chip.is-active {
  border-color: rgba(103, 232, 249, 0.86);
  background:
    linear-gradient(135deg, rgba(125, 211, 252, 0.16), rgba(249, 115, 22, 0.08)),
    rgba(249, 115, 22, 0.08);
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.24),
    0 0 26px rgba(34, 211, 238, 0.2),
    inset 0 0 20px rgba(103, 232, 249, 0.12);
}

.wizard-step-chip .small {
  display: block;
  margin-bottom: 4px;
}

.wizard-panel {
  display: grid;
  gap: 14px;
}

.wizard-upload-grid {
  display: grid;
  grid-template-columns: 160px minmax(200px, 1fr) minmax(240px, 1.2fr);
  gap: 12px;
}

.wizard-creative-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.wizard-family-board {
  display: grid;
  gap: 14px;
}

.wizard-family-lane {
  border: 1px solid rgba(103, 232, 249, 0.24);
  border-radius: 18px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(8, 14, 25, 0.54) 44%, rgba(4, 8, 16, 0.72)),
    linear-gradient(180deg, rgba(11, 19, 32, 0.78), rgba(7, 12, 20, 0.74));
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.08),
    0 0 18px rgba(34, 211, 238, 0.08);
}

.wizard-family-lane__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: #e8f5ff;
}

.wizard-family-card {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.wizard-family-card__body {
  display: grid;
  gap: 10px;
}

.wizard-family-card__body h4,
.wizard-asset-card h4 {
  margin: 0;
  color: #f8fbff;
}

.wizard-family-card__body p,
.wizard-asset-card p {
  margin: 0;
  color: #bfd0e5;
  line-height: 1.5;
}

.wizard-family-card__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wizard-family-mini-grid,
.wizard-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.wizard-family-mini,
.wizard-asset-card {
  border: 1px solid rgba(103, 232, 249, 0.22);
  border-radius: 16px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(8, 14, 25, 0.5) 44%, rgba(4, 8, 16, 0.68)),
    linear-gradient(180deg, rgba(11, 19, 32, 0.74), rgba(7, 12, 20, 0.72));
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.06),
    0 0 14px rgba(34, 211, 238, 0.06);
}

.wizard-family-mini {
  display: grid;
  gap: 10px;
}

.wizard-family-mini strong {
  color: #f8fbff;
}

.wizard-family-mini span {
  color: #97adca;
  font-size: 12px;
}

.wizard-family-mini--empty {
  place-items: center;
  text-align: center;
  color: #9cb6d7;
  min-height: 160px;
}

.wizard-family-mini__media .variant-preview__media,
.wizard-family-card__media .variant-preview__media,
.wizard-asset-card .variant-preview__media {
  max-height: 220px;
  object-fit: cover;
}

.wizard-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) 360px;
  gap: 18px;
  align-items: start;
}

.wizard-main {
  display: grid;
  gap: 14px;
}

.wizard-aside {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 0;
}

.wizard-aside-card {
  position: relative;
  border: 1px solid rgba(103, 232, 249, 0.28);
  border-radius: 18px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(8, 14, 25, 0.5) 44%, rgba(4, 8, 16, 0.68)),
    linear-gradient(180deg, rgba(11, 19, 32, 0.78), rgba(7, 12, 20, 0.74));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.1),
    0 0 20px rgba(34, 211, 238, 0.08);
}

.wizard-aside-card h4 {
  margin: 8px 0 8px;
  color: #f8fbff;
}

.wizard-aside-card p {
  margin: 0;
  color: #b9c9df;
  line-height: 1.55;
}

.wizard-aside-card--ok {
  border-color: rgba(74, 222, 128, 0.38);
  box-shadow:
    0 0 0 1px rgba(74, 222, 128, 0.1),
    0 0 18px rgba(74, 222, 128, 0.08);
}

.wizard-aside-card--warn {
  border-color: rgba(251, 191, 36, 0.38);
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.1),
    0 0 18px rgba(251, 191, 36, 0.08);
}

.wizard-aside-card--pending,
.wizard-step-chip--pending {
  border-color: rgba(103, 232, 249, 0.28);
}

.wizard-step-chip--ok {
  border-color: rgba(74, 222, 128, 0.36);
  box-shadow: 0 0 16px rgba(74, 222, 128, 0.08);
}

.wizard-step-chip--warn {
  border-color: rgba(251, 191, 36, 0.34);
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.08);
}

.wizard-aside-metrics {
  display: grid;
  gap: 10px;
}

.wizard-aside-metric {
  border: 1px solid rgba(103, 232, 249, 0.16);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(8, 14, 25, 0.34);
  display: grid;
  gap: 4px;
}

.wizard-aside-metric span {
  color: #8fa7c5;
  font-size: 11px;
}

.wizard-aside-metric strong {
  color: #f8fbff;
  line-height: 1.45;
}

.wizard-live-preview {
  display: grid;
  gap: 10px;
}

.wizard-live-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wizard-ad-preview,
.wizard-landing-mini {
  border: 1px solid rgba(103, 232, 249, 0.28);
  border-radius: 18px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(8, 14, 25, 0.52) 44%, rgba(4, 8, 16, 0.68)),
    linear-gradient(180deg, rgba(11, 19, 32, 0.78), rgba(7, 12, 20, 0.74));
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.1),
    0 0 18px rgba(34, 211, 238, 0.08);
}

.wizard-ad-preview {
  display: grid;
  gap: 10px;
}

.wizard-ad-preview__media .variant-preview {
  min-height: 180px;
}

.wizard-ad-preview__body {
  display: grid;
  gap: 8px;
}

.wizard-ad-preview__eyebrow,
.wizard-landing-mini__kicker {
  color: #8fc6df;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wizard-ad-preview__body h4,
.wizard-landing-mini__hero h4 {
  margin: 0;
  color: #f8fbff;
  line-height: 1.3;
}

.wizard-ad-preview__body p,
.wizard-landing-mini__hero p {
  margin: 0;
  color: #bfd0e5;
  line-height: 1.55;
}

.wizard-ad-preview__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wizard-ad-preview__meta span {
  border: 1px solid rgba(103, 232, 249, 0.18);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  color: #d8f5ff;
  background: rgba(8, 14, 25, 0.34);
}

.wizard-landing-mini {
  display: grid;
  gap: 12px;
}

.wizard-landing-mini__hero {
  display: grid;
  gap: 8px;
}

.wizard-landing-mini__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wizard-landing-mini__proof {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wizard-panel__lead {
  padding: 16px 18px;
  border: 1px solid rgba(103, 232, 249, 0.42);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(249, 115, 22, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(15, 24, 40, 0.96), rgba(9, 16, 28, 0.98));
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.12),
    0 0 26px rgba(34, 211, 238, 0.12);
}

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

.wizard-three-col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.wizard-card {
  border: 1px solid rgba(103, 232, 249, 0.34);
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(15, 24, 40, 0.94), rgba(9, 16, 28, 0.96));
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.1),
    0 0 20px rgba(34, 211, 238, 0.1);
}

.wizard-card h4 {
  margin: 0 0 8px;
}

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

.wizard-choice {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(15, 24, 40, 0.56), rgba(8, 13, 24, 0.44));
  backdrop-filter: blur(12px);
  transition: border-color .2s ease, transform .15s ease, background .2s ease;
}

.wizard-choice:hover {
  border-color: rgba(249, 115, 22, 0.6);
  transform: translateY(-1px);
}

.wizard-choice.is-selected {
  border-color: rgba(125, 211, 252, 0.44);
  background:
    linear-gradient(135deg, rgba(125, 211, 252, 0.18), rgba(249, 115, 22, 0.12)),
    rgba(249, 115, 22, 0.08);
}

.wizard-choice strong,
.wizard-card strong {
  color: #fff;
}

.wizard-note {
  color: #93a4bd;
  font-size: 12px;
  line-height: 1.45;
}

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

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

.wizard-review-item {
  border: 1px solid rgba(103, 232, 249, 0.32);
  border-radius: 14px;
  padding: 12px;
  background: rgba(15, 24, 40, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.wizard-review-item span {
  display: block;
  font-size: 12px;
  color: #93a4bd;
  margin-bottom: 4px;
}

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

.marketing-side {
  display: grid;
  gap: 16px;
  align-content: start;
}

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

.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }

.marketing-label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  align-content: start;
}

.marketing-label strong {
  color: var(--txt);
  font-size: 12px;
}

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

.field-example {
  color: #88a3c4;
  font-size: 11px;
  line-height: 1.5;
}

.field-popover {
  position: relative;
}

.field-popover summary {
  list-style: none;
  cursor: pointer;
  font-size: 11px;
  color: #ffd59b;
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(251, 191, 36, 0.08);
}

.field-popover summary::-webkit-details-marker {
  display: none;
}

.field-popover[open] summary {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.14);
}

.field-popover__body {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 6;
  width: min(280px, 70vw);
  border: 1px solid rgba(71, 103, 145, 0.8);
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(10, 18, 30, 0.98), rgba(7, 12, 21, 0.98));
  box-shadow: 0 18px 36px rgba(2, 8, 23, 0.48);
  color: #dbeafe;
  line-height: 1.55;
}

.marketing-textarea {
  min-height: 104px;
  resize: vertical;
}

.marketing-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.marketing-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

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

.marketing-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.marketing-tab {
  border: 1px solid rgba(103, 232, 249, 0.38);
  border-radius: 999px;
  padding: 10px 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(11, 19, 32, 0.62) 40%, rgba(6, 12, 21, 0.68)),
    rgba(15, 24, 40, 0.5);
  color: #cfe3ff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  min-height: 42px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.marketing-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 211, 252, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 18px rgba(56, 189, 248, 0.08);
}

.marketing-tab.is-active {
  background:
    linear-gradient(135deg, rgba(125, 211, 252, 0.36), rgba(249, 115, 22, 0.28)),
    linear-gradient(180deg, rgba(255, 140, 43, 0.42), rgba(249, 115, 22, 0.28));
  border-color: rgba(125, 211, 252, 0.4);
  color: #f8fbff;
  box-shadow:
    0 0 0 1px rgba(125, 211, 252, 0.14),
    0 0 20px rgba(56, 189, 248, 0.14);
}

[data-tab-panel] {
  display: none;
}

[data-tab-panel].is-active {
  display: block;
}

.simple-help-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid #223453;
  border-radius: 12px;
  background: linear-gradient(180deg, #111b2b, #0d1522);
  color: #dbe4f0;
  font-size: 12px;
}

.simple-help-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 24, 40, 0.7);
  border: 1px solid #2a3c5a;
}

.marketing-mini {
  border: 1px solid rgba(64, 94, 128, 0.45);
  border-radius: 18px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(14, 23, 38, 0.9), rgba(8, 14, 24, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.marketing-mini .value {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
}

.marketing-search {
  display: grid;
  gap: 10px;
}

.campaign-list {
  display: grid;
  gap: 10px;
  max-height: 70vh;
  overflow: auto;
}

.campaign-list-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

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

.campaign-quick-filters .btn.is-active {
  border-color: rgba(255, 122, 26, 0.65);
  box-shadow: 0 0 0 1px rgba(255, 122, 26, 0.25);
  color: #fff4e8;
  background: rgba(255, 122, 26, 0.12);
}

.campaign-row {
  position: relative;
  border: 1px solid rgba(103, 232, 249, 0.34);
  border-radius: 14px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(8, 14, 25, 0.58) 40%, rgba(5, 10, 18, 0.7)),
    linear-gradient(180deg, rgba(17, 26, 43, 0.74), rgba(13, 20, 33, 0.7));
  cursor: pointer;
  display: grid;
  gap: 6px;
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 22px rgba(2, 8, 23, 0.18),
    0 0 18px rgba(34, 211, 238, 0.1);
}

.campaign-row.campaign-row-master {
  border-color: rgba(34, 197, 94, 0.8);
  background:
    radial-gradient(circle at top right, rgba(34, 197, 94, 0.18), transparent 30%),
    linear-gradient(180deg, #11261b, #0d1821);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.22);
}

.campaign-row.campaign-row-derived-active {
  border-color: rgba(74, 222, 128, 0.38);
  background:
    radial-gradient(circle at top right, rgba(74, 222, 128, 0.08), transparent 28%),
    linear-gradient(180deg, #101d1a, #0d1421);
}

.campaign-row.campaign-row-derived-paused {
  border-color: rgba(245, 158, 11, 0.65);
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.14), transparent 28%),
    linear-gradient(180deg, #21180d, #0d1421);
}

.campaign-row.active {
  border-color: rgba(103, 232, 249, 0.92);
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.24),
    0 0 28px rgba(34, 211, 238, 0.2);
}

.campaign-row.is-loading {
  opacity: 0.78;
  position: relative;
}

.campaign-row.is-loading::after {
  content: 'Cargando...';
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  color: #fed7aa;
}

.campaign-row h4 {
  margin: 0 0 6px;
  font-size: 14px;
}

.campaign-row__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.campaign-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.campaign-row__status {
  font-size: 11px;
  font-weight: 700;
  color: #cfe3ff;
  white-space: nowrap;
}

.campaign-row__identity,
.campaign-row__stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}

.campaign-row__reuse,
.selected-campaign-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.campaign-row__identity span,
.campaign-row__stats span {
  border: 1px solid rgba(34, 52, 83, 0.9);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(12, 19, 32, 0.74);
  color: #bfd0e7;
}

.campaign-row__signal {
  color: #dbeafe;
  font-size: 12px;
  line-height: 1.45;
}

.campaign-row__warning {
  color: #fde68a;
}

.selection-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #2a3c5a;
  background: rgba(15, 24, 40, 0.82);
  color: #dbeafe;
  font-size: 11px;
  line-height: 1.2;
}

.selection-pill--ok {
  border-color: rgba(22, 163, 74, 0.45);
  background: rgba(22, 163, 74, 0.12);
  color: #bbf7d0;
}

.selection-pill--warn {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
  color: #fde68a;
}

.selection-pill--neutral {
  border-color: rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.12);
  color: #bfdbfe;
}

.selection-pill--draft {
  border-color: rgba(168, 85, 247, 0.35);
  background: rgba(168, 85, 247, 0.12);
  color: #ead5ff;
}

.pill-automation.manual {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(71, 85, 105, 0.15);
  color: #dbe4f0;
}

.pill-automation.semi {
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.12);
  color: #bfdbfe;
}

.pill-automation.automatic {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.12);
  color: #bbf7d0;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid rgba(125, 211, 252, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(8, 14, 25, 0.5) 44%, rgba(4, 8, 16, 0.66)),
    rgba(15, 24, 40, 0.42);
  color: #cfe3ff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.pill-runtime.running {
  border-color: rgba(22, 163, 74, 0.45);
  background: rgba(22, 163, 74, 0.12);
  color: #b8f7c6;
}

.pill-runtime.scheduled {
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.12);
  color: #bfdbfe;
}

.pill-runtime.paused {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
  color: #fde68a;
}

.pill-runtime.completed,
.pill-runtime.archived {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(100, 116, 139, 0.14);
  color: #dbe4f0;
}

.pill-runtime.draft {
  border-color: rgba(168, 85, 247, 0.35);
  background: rgba(168, 85, 247, 0.12);
  color: #ead5ff;
}

.output-grid {
  display: grid;
  gap: 14px;
}

.output-section {
  border: 1px solid rgba(103, 232, 249, 0.36);
  border-radius: 14px;
  padding: 14px;
  background: rgba(9, 14, 23, 0.9);
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.12),
    0 0 24px rgba(34, 211, 238, 0.12);
}

.output-section h3 {
  margin: 0 0 10px;
}

.output-section.inner {
  padding: 12px;
  background: linear-gradient(180deg, #101828, #0c1421);
}

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

.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(8, 14, 25, 0.48) 44%, rgba(4, 8, 16, 0.64)),
    rgba(19, 32, 51, 0.42);
  border: 1px solid rgba(125, 211, 252, 0.14);
  color: #dce9fb;
  font-size: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

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

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

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

.spec-item {
  border: 1px solid rgba(103, 232, 249, 0.3);
  border-radius: 12px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(7, 12, 22, 0.62) 44%, rgba(4, 8, 16, 0.72)),
    linear-gradient(180deg, rgba(15, 24, 40, 0.72), rgba(11, 18, 29, 0.68));
  display: grid;
  gap: 6px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.wizard-summary {
  border: 1px solid rgba(103, 232, 249, 0.38);
  border-radius: 14px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(8, 14, 25, 0.54) 44%, rgba(4, 8, 16, 0.72)),
    linear-gradient(180deg, rgba(17, 26, 43, 0.72), rgba(13, 20, 33, 0.68));
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
}

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

.wizard-summary-card,
.learning-card {
  position: relative;
  border: 1px solid rgba(103, 232, 249, 0.3);
  border-radius: 12px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(14, 24, 40, 0.54) 40%, rgba(7, 12, 22, 0.68)),
    linear-gradient(180deg, rgba(19, 32, 51, 0.68), rgba(13, 21, 34, 0.68));
  display: grid;
  gap: 8px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.wizard-summary-card strong,
.learning-card strong {
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
  text-shadow: 0 0 16px rgba(125, 211, 252, 0.08);
}

.learning-chart-grid {
  align-items: start;
}

.mini-bar-chart {
  display: grid;
  gap: 12px;
}

.mini-bar-row {
  display: grid;
  gap: 6px;
}

.mini-bar-row__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: #dbe7f8;
  font-size: 13px;
}

.mini-bar-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: #132033;
  border: 1px solid #223453;
  overflow: hidden;
}

.mini-bar-fill {
  height: 100%;
  border-radius: 999px;
}

.mini-bar-fill.tone-blue {
  background: linear-gradient(90deg, #60a5fa, #2563eb);
}

.mini-bar-fill.tone-green {
  background: linear-gradient(90deg, #4ade80, #16a34a);
}

.mini-bar-fill.tone-orange {
  background: linear-gradient(90deg, #fb923c, #ea580c);
}

.learning-table-wrap {
  overflow-x: auto;
}

.wizard-summary--compact {
  padding: 12px;
}

.wizard-quick-actions {
  justify-content: flex-end;
}

.wizard-compact-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.wizard-compact-step {
  position: relative;
  border: 1px solid rgba(103, 232, 249, 0.3);
  border-radius: 14px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(8, 14, 25, 0.54) 44%, rgba(4, 8, 16, 0.72)),
    linear-gradient(180deg, rgba(16, 24, 40, 0.74), rgba(11, 18, 32, 0.68));
  display: grid;
  gap: 8px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.wizard-compact-step strong {
  color: #fff;
}

.wizard-compact-step p {
  margin: 0;
  color: #a7bad7;
  font-size: 13px;
  line-height: 1.45;
}

.wizard-compact-step::before,
.wizard-summary-card::before,
.creative-flow-node::before,
.campaign-row::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(125, 211, 252, 0.08), transparent 24%, transparent 76%, rgba(168, 85, 247, 0.06));
  opacity: 0.8;
}

@keyframes holoSweep {
  0% {
    transform: translateX(-22%) translateY(-2%) rotate(0.001deg);
    opacity: 0.4;
  }
  50% {
    transform: translateX(16%) translateY(1%) rotate(0.001deg);
    opacity: 0.75;
  }
  100% {
    transform: translateX(48%) translateY(-2%) rotate(0.001deg);
    opacity: 0.4;
  }
}

@keyframes holoFloat {
  0%, 100% {
    box-shadow:
      0 16px 40px rgba(2, 8, 23, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  }
  50% {
    box-shadow:
      0 20px 44px rgba(2, 8, 23, 0.38),
      0 0 28px rgba(56, 189, 248, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  }
}

.advanced-details {
  border: 1px solid rgba(103, 232, 249, 0.32);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(8, 14, 25, 0.5) 40%, rgba(4, 8, 16, 0.68)),
    linear-gradient(180deg, rgba(15, 24, 40, 0.72), rgba(11, 18, 32, 0.68));
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.advanced-details summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
  font-weight: 700;
  color: #dbeafe;
}

.advanced-details summary::-webkit-details-marker {
  display: none;
}

.advanced-details summary::after {
  content: '+';
  float: right;
  color: #93a4bd;
}

.advanced-details[open] summary::after {
  content: '−';
}

.advanced-details__content {
  padding: 0 16px 16px;
  border-top: 1px solid rgba(34, 52, 83, 0.9);
}

.wizard-secondary-actions {
  background: rgba(13, 21, 34, 0.72);
}

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

.simple-summary-card {
  border: 1px solid rgba(103, 232, 249, 0.3);
  border-radius: 12px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(14, 24, 40, 0.54) 40%, rgba(7, 12, 22, 0.68)),
    linear-gradient(180deg, rgba(19, 32, 51, 0.68), rgba(13, 21, 34, 0.68));
  display: grid;
  gap: 8px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.simple-summary-card strong {
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
}

.loading-shell {
  border: 1px dashed #2a3c5a;
  border-radius: 14px;
  padding: 18px;
  color: #93a4bd;
  background: rgba(13, 21, 34, 0.6);
}

.loading-lines {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.loading-line {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34, 52, 83, 0.7), rgba(59, 130, 246, 0.18), rgba(34, 52, 83, 0.7));
  background-size: 200% 100%;
  animation: marketingShimmer 1.4s linear infinite;
}

.loading-line.short { width: 45%; }
.loading-line.medium { width: 70%; }
.loading-line.long { width: 100%; }

@keyframes marketingShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.spec-item strong {
  line-height: 1.4;
}

.copy-card,
.info-card {
  border: 1px solid #223453;
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(180deg, #0f1828, #0c1320);
}

.copy-card h4,
.info-card h4 {
  margin: 0 0 8px;
  font-size: 13px;
}

.copy-card p,
.info-card p {
  margin: 0 0 8px;
  white-space: pre-wrap;
}

.variant-preview {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.variant-preview--empty {
  min-height: 96px;
  border: 1px dashed #2c4267;
  border-radius: 12px;
  place-items: center;
  display: grid;
  color: #8ea7c8;
  background: rgba(12, 19, 32, 0.6);
}

.variant-preview__media {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #223453;
  background: #09101a;
}

.variant-preview__poster-link {
  display: block;
  text-decoration: none;
}

.variant-preview__video-static {
  min-height: 180px;
  border: 1px solid #223453;
  border-radius: 12px;
  background: linear-gradient(180deg, #101827, #0b1220);
  display: grid;
  place-items: center;
  gap: 8px;
  color: #dbeafe;
  text-align: center;
  padding: 16px;
}

.variant-preview__play {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  background: rgba(59, 130, 246, 0.12);
  color: #bfdbfe;
  font-size: 18px;
}

.variant-preview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.saved-publish-plan {
  display: grid;
  gap: 10px;
  border: 1px solid #223453;
  border-radius: 12px;
  padding: 12px;
  background: rgba(8, 13, 24, 0.56);
}

.saved-publish-plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.saved-publish-plan__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.saved-publish-plan__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.saved-publish-plan__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

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

.budget-clarity-card {
  border: 1px solid #223453;
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(180deg, #0f1828, #0a111d);
  display: grid;
  gap: 6px;
}

.budget-clarity-card strong {
  font-size: 20px;
  color: #fff;
}

.budget-phase-ok {
  border-color: rgba(22, 163, 74, 0.58);
  background: linear-gradient(180deg, rgba(20, 83, 45, 0.34), #0a111d);
}

.budget-phase-warn {
  border-color: rgba(245, 158, 11, 0.58);
  background: linear-gradient(180deg, rgba(146, 64, 14, 0.28), #0a111d);
}

.budget-phase-stop {
  border-color: rgba(220, 38, 38, 0.68);
  background: linear-gradient(180deg, rgba(127, 29, 29, 0.28), #0a111d);
}

.budget-phase-neutral {
  border-color: rgba(59, 130, 246, 0.48);
  background: linear-gradient(180deg, rgba(30, 64, 175, 0.2), #0a111d);
}

.pacing-note {
  margin-top: 12px;
  border: 1px solid #223453;
  border-radius: 12px;
  padding: 12px;
  background: rgba(15, 24, 40, 0.88);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 12px;
}

.pacing-note strong {
  color: #fff;
}

.pacing-note-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  color: #c8d5ee;
  font-size: 13px;
}

.stack-list,
.mini-list {
  display: grid;
  gap: 8px;
}

.stack-row,
.mini-row {
  border: 1px solid #223453;
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(15, 24, 40, 0.92);
}

.publish-history-row {
  display: grid;
  gap: 6px;
}

.publish-history__meta {
  line-height: 1.45;
}

.publish-history__warnings {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 10px;
  padding: 10px;
  background: rgba(120, 53, 15, 0.16);
}

.publish-history__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.landing-preview {
  border: 1px solid #2c4267;
  border-radius: 16px;
  padding: 18px;
  background:
    radial-gradient(circle at top left, rgba(255, 122, 26, 0.18), transparent 36%),
    linear-gradient(180deg, #101a2a, #0c1320);
  display: grid;
  gap: 14px;
}

.landing-preview__hero h4 {
  margin: 10px 0 8px;
  font-size: 24px;
  line-height: 1.15;
}

.landing-preview__hero p {
  margin: 0;
  color: #dce9fb;
}

.landing-preview__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.landing-preview__proof {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

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

.report-kpi {
  border: 1px solid #223453;
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(180deg, #101828, #0b1220);
  display: grid;
  gap: 6px;
}

.report-kpi .value {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
}

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

.chart-shell {
  display: grid;
  gap: 10px;
}

.chart-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #b8c7dc;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chart-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.chart-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  color: #93a4bd;
  border: 1px dashed #223453;
  border-radius: 14px;
}

.mode-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.mode-table th,
.mode-table td {
  padding: 10px 8px;
  border-bottom: 1px solid rgba(34, 52, 83, 0.8);
  text-align: right;
}

.mode-table th:first-child,
.mode-table td:first-child {
  text-align: left;
}

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

.live-item {
  border: 1px solid #223453;
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(180deg, #0f1828, #0a111d);
}

.live-runtime {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.learning-list {
  display: grid;
  gap: 10px;
}

.learning-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #223453;
  background: rgba(14, 22, 36, 0.9);
}

.learning-row strong {
  color: #fff;
}

.learning-row .muted {
  display: block;
  margin-top: 4px;
}

.learning-recommendation {
  border-left: 4px solid #22c55e;
}

.mini-row {
  display: grid;
  gap: 4px;
  font-size: 12px;
}

.budget-reset-note {
  border-color: rgba(59, 130, 246, 0.45);
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.22), rgba(14, 22, 36, 0.92));
}

.ops-alert-list {
  display: grid;
  gap: 10px;
}

.ops-alert-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #28405f;
  border-radius: 14px;
  padding: 12px;
  background: rgba(14, 22, 36, 0.9);
}

.ops-alert-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.ops-alert-info {
  border-color: rgba(59, 130, 246, 0.55);
}

.ops-alert-warn {
  border-color: rgba(245, 158, 11, 0.7);
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.25), rgba(14, 22, 36, 0.92));
}

.ops-alert-danger {
  border-color: rgba(239, 68, 68, 0.7);
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.24), rgba(14, 22, 36, 0.92));
}

.publish-review-modal {
  max-width: 1120px;
}

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

.creative-flow-board {
  display: grid;
  gap: 14px;
}

.creative-flow-lane {
  position: relative;
  border: 1px solid rgba(103, 232, 249, 0.3);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(8, 14, 25, 0.52) 42%, rgba(4, 8, 16, 0.72)),
    linear-gradient(180deg, rgba(15, 24, 40, 0.72), rgba(10, 16, 28, 0.68));
  padding: 14px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.creative-flow-lane:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 36px;
  bottom: -15px;
  width: 2px;
  height: 16px;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.5), rgba(96, 165, 250, 0.08));
}

.creative-flow-lane__title {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #dbeafe;
}

.creative-flow-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.creative-flow-lane__footer {
  margin-top: 12px;
  display: flex;
  justify-content: flex-start;
}

.creative-flow-node {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(103, 232, 249, 0.3);
  border-radius: 14px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(8, 14, 25, 0.52) 42%, rgba(4, 8, 16, 0.72)),
    linear-gradient(180deg, rgba(16, 26, 43, 0.68), rgba(11, 18, 32, 0.66));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.creative-flow-node.is-focused,
.info-card.is-focused,
.output-section.is-focused {
  border-color: rgba(96, 165, 250, 0.95);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.22), 0 0 24px rgba(59, 130, 246, 0.18);
}

.creative-flow-node__head,
.creative-flow-node__meta,
.creative-flow-node__stats {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.creative-flow-node__head {
  align-items: center;
}

.creative-flow-node__meta {
  flex-wrap: wrap;
  color: #a9bfdc;
  font-size: 12px;
}

.creative-flow-node__readiness {
  display: grid;
  gap: 6px;
}

.creative-flow-node__stats > div {
  display: grid;
  gap: 4px;
  flex: 1;
  border: 1px solid rgba(103, 232, 249, 0.24);
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(8, 13, 24, 0.4), rgba(8, 13, 24, 0.24));
}

.creative-flow-copy {
  border: 1px solid rgba(103, 232, 249, 0.26);
  border-radius: 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(8, 13, 24, 0.36), rgba(8, 13, 24, 0.18));
}

.creative-flow-copy summary {
  cursor: pointer;
  color: #dbeafe;
  font-weight: 700;
}

.creative-flow-copy__body {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.creative-flow-copy__body p {
  margin: 0;
  white-space: pre-wrap;
}

.creative-flow-editor {
  border: 1px solid rgba(103, 232, 249, 0.26);
  border-radius: 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(8, 13, 24, 0.4), rgba(8, 13, 24, 0.22));
}

.creative-flow-editor summary {
  cursor: pointer;
  color: #dbeafe;
  font-weight: 700;
}

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

.creative-flow-editor__body label {
  display: grid;
  gap: 6px;
  color: #dbeafe;
  font-size: 12px;
  font-weight: 700;
}

.creative-flow-editor__full {
  grid-column: 1 / -1;
}

.creative-flow-editor__hint {
  grid-column: 1 / -1;
}

.creative-flow-editor__body textarea {
  resize: vertical;
  min-height: 110px;
}

.creative-flow-editor__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.asset-delivery-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(148, 163, 184, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.asset-delivery-badge--ok {
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(22, 163, 74, 0.14);
}

.asset-delivery-badge--warn {
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(180, 83, 9, 0.16);
}

.asset-delivery-badge--danger {
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(153, 27, 27, 0.16);
}

.variant-verification {
  display: grid;
  gap: 8px;
  border: 1px solid #223453;
  border-radius: 12px;
  padding: 10px;
  background: rgba(8, 13, 24, 0.56);
}

.variant-verification--compact {
  gap: 6px;
  padding: 9px;
}

.variant-verification__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.variant-verification__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.variant-verification__item {
  display: grid;
  gap: 4px;
}

.variant-verification__item strong {
  font-size: 12px;
  line-height: 1.35;
  color: #fff;
}

.asset-delivery-badge--neutral {
  color: #dbeafe;
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(51, 65, 85, 0.18);
}

.copy-review-panel {
  border-color: rgba(251, 146, 60, 0.45);
}

.publish-variant-review-panel {
  border-color: rgba(96, 165, 250, 0.38);
}

.publish-variant-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.publish-variant-card {
  display: grid;
  gap: 10px;
}

.publish-variant-card.is-unselected {
  opacity: 0.58;
  filter: saturate(0.8);
}

.publish-variant-card.is-focused {
  border-color: rgba(96, 165, 250, 0.95);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.22), 0 0 24px rgba(59, 130, 246, 0.18);
}

.publish-variant-card--ok {
  border-color: rgba(34, 197, 94, 0.35);
}

.publish-variant-card--warn {
  border-color: rgba(245, 158, 11, 0.4);
}

.publish-variant-card--danger {
  border-color: rgba(239, 68, 68, 0.42);
}

.publish-variant-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.publish-variant-card__head h4 {
  margin: 0;
}

.publish-variant-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #fff;
}

.publish-variant-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #60a5fa;
}

.copy-review-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.publish-review-context {
  margin-top: 12px;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: 12px;
  padding: 12px;
  background: rgba(30, 64, 175, 0.12);
}

.publish-review-context__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.copy-review-heading p {
  margin: 4px 0 0;
}

.copy-review-grid {
  display: grid;
  gap: 12px;
}

.copy-review-assistant {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 18px;
  padding: 16px;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(8, 16, 30, 0.98), rgba(7, 12, 20, 0.98));
}

.copy-review-assistant__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.copy-review-assistant__head h4 {
  margin: 0 0 4px;
  color: #f8fbff;
}

.copy-review-assistant__grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
}

.copy-review-assistant textarea {
  min-height: 120px;
}

.assistant-prompt-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.assistant-prompt-chip {
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(14, 35, 57, 0.68);
  color: #d9edff;
  cursor: pointer;
  transition: border-color .2s ease, transform .15s ease, background .2s ease;
}

.assistant-prompt-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 211, 252, 0.56);
  background: rgba(20, 45, 72, 0.82);
}

.copy-review-card {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(53, 77, 109, 0.9);
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(9, 16, 28, 0.92), rgba(6, 11, 20, 0.96));
  box-shadow: 0 10px 22px rgba(2, 8, 23, 0.2);
}

.copy-review-card.is-focused {
  border-color: rgba(96, 165, 250, 0.95);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.22), 0 0 24px rgba(59, 130, 246, 0.18);
}

.copy-review-card label {
  display: grid;
  gap: 6px;
  color: #e7f0fc;
  font-size: 12px;
  font-weight: 700;
}

.copy-review-card input,
.copy-review-card textarea {
  width: 100%;
  border: 1px solid rgba(55, 81, 116, 0.95);
  border-radius: 12px;
  background: rgba(7, 14, 25, 0.98);
  color: #f4f8fd;
  padding: 10px;
  font: inherit;
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.copy-review-card textarea {
  min-height: 160px;
  resize: vertical;
  white-space: pre-wrap;
}

.copy-review-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.copy-review-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.copy-review-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  color: #dbeafe;
  background: rgba(30, 64, 175, 0.16);
}

.copy-review-card__tips span {
  color: #88a3c4;
}

.copy-review-card input:focus,
.copy-review-card textarea:focus,
.copy-review-assistant textarea:focus,
.copy-review-assistant select:focus,
.marketing-label .input:focus {
  outline: none;
  border-color: rgba(125, 211, 252, 0.76);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.14);
}

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

.empty-state {
  border: 1px dashed #2a3c5a;
  border-radius: 14px;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 1180px) {
  .marketing-layout {
    grid-template-columns: 1fr;
  }

  .marketing-hero__grid,
  .guided-intro-grid {
    grid-template-columns: 1fr;
  }

  .campaign-list {
    max-height: 420px;
  }

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

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

  .wizard-upload-grid,
  .wizard-family-card {
    grid-template-columns: 1fr;
  }

  .wizard-aside {
    position: static;
  }

  .marketing-form-grid,
  .marketing-kpis,
  .report-kpis,
  .report-grid,
  .cards-grid,
  .section-grid,
  .spec-grid,
  .budget-clarity-grid,
  .simple-summary-grid,
  .wizard-summary-grid,
  .learning-grid,
  .publish-review-summary,
  .copy-review-meta,
  .copy-review-assistant__grid {
    grid-template-columns: 1fr;
  }

  .col-12,
  .col-8,
  .col-6,
  .col-4 {
    grid-column: span 1;
  }
}