:root {
  --ink: #2a2a2a;
  --muted: #667085;
  --line: #d8e0ea;
  --surface: #ffffff;
  --surface-soft: #f5f7fa;
  --accent: #ff6a00;
  --accent-dark: #d95500;
  --blue: #0057ff;
  --blue-dark: #0a1f44;
  --gold: #ffb547;
  --warm: #ff6a00;
  --shadow: 0 24px 70px rgba(10, 31, 68, 0.14);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(0, 87, 255, 0.1), transparent 34%),
    #f5f7fa;
}

body.modal-open {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/* HOME_VITRINE_IMPLEMENTATION_001 — escopo institucional isolado. */
.ig-home {
  --ig-home-ink: #f4f2ee;
  --ig-home-muted: #c9c6c1;
  --ig-home-orange: #ff9200;
  --ig-home-orange-soft: #ffb64a;
  --ig-home-line: rgba(126, 190, 235, 0.2);
  color: var(--ig-home-ink);
  min-height: 100vh;
  background: #020b12;
  overflow-x: clip;
  overflow-y: visible;
}

body.ig-home-workspace-active .ig-home {
  display: none;
}

body.ig-home-workspace-active main {
  min-height: 100vh;
}

.ig-home-header {
  position: relative;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 96px;
  padding: 10px max(32px, calc((100vw - 1602px) / 2));
  border-bottom: 1px solid rgba(87, 158, 214, 0.08);
  background: rgba(1, 7, 12, 0.97);
}

.ig-home-brand {
  display: inline-flex;
  width: fit-content;
}

.ig-home-brand img {
  display: block;
  width: 294px;
  height: 76px;
  object-fit: contain;
  object-position: left center;
  filter: none;
}

.ig-home-desktop-nav {
  display: flex;
  align-items: center;
  gap: 44px;
}

.ig-home-desktop-nav button,
.ig-home-mobile-menu button {
  border: 0;
  color: var(--ig-home-ink);
  background: transparent;
}

.ig-home-desktop-nav button {
  min-height: 44px;
  padding: 0 8px;
  font-size: 1rem;
}

.ig-home-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.ig-home-enter {
  min-width: 114px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--ig-home-orange);
  border-radius: 999px;
  color: var(--ig-home-ink);
  background: transparent;
  font-weight: 700;
}

.ig-home-menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  padding: 11px 8px;
  border: 0;
  color: #fff;
  background: transparent;
}

.ig-home-menu-toggle span {
  display: block;
  height: 2px;
  margin: 6px 0;
  border-radius: 2px;
  background: currentColor;
}

.ig-home-mobile-menu {
  position: absolute;
  top: calc(100% - 4px);
  right: 16px;
  width: min(260px, calc(100vw - 32px));
  padding: 10px;
  border: 1px solid rgba(255, 146, 0, 0.4);
  border-radius: 16px;
  background: rgba(2, 11, 19, 0.98);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.42);
}

.ig-home-mobile-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 10px;
  text-align: left;
}

.ig-home-mobile-menu button:hover,
.ig-home-mobile-menu button:focus-visible {
  background: rgba(255, 146, 0, 0.12);
}

.ig-home-hero {
  position: relative;
  max-width: 1672px;
  margin: 0 auto;
  padding-bottom: clamp(20px, 1.8vw, 30px);
}

.ig-home-hero-stage {
  position: relative;
  min-height: 695px;
  overflow: hidden;
  background: #020b12;
}

.ig-home-hero-stage::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #020b12 0%,
    rgba(2, 11, 18, 0.99) 31%,
    rgba(2, 11, 18, 0.9) 39%,
    rgba(2, 11, 18, 0.5) 49%,
    rgba(2, 11, 18, 0.1) 59%,
    transparent 68%
  );
}

.ig-home-copy {
  position: relative;
  z-index: 3;
  width: min(650px, 47vw);
  padding: 40px 0 132px 70px;
}

.ig-home-formula {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  margin: 0 0 42px;
  transform: translateX(-18px);
  padding: 0 24px;
  border: 1px solid var(--ig-home-orange);
  border-radius: 999px;
  color: var(--ig-home-ink);
  font-size: clamp(0.8rem, 1.08vw, 1.1rem);
  line-height: 1.25;
  white-space: nowrap;
}

.ig-home-formula > span {
  color: var(--ig-home-orange);
  font-size: 1.8rem;
}

.ig-home h1 {
  margin: 0;
  color: var(--ig-home-ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(2.45rem, 3.05vw, 3.2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.ig-home h1 > span {
  display: block;
}

.ig-home h1 em {
  color: var(--ig-home-orange);
  font-style: normal;
}

.ig-home-description {
  max-width: 520px;
  margin: 44px 0 0;
  color: var(--ig-home-ink);
  font-size: clamp(1rem, 1.16vw, 1.18rem);
  line-height: 1.62;
}

.ig-home-description strong {
  color: var(--ig-home-orange);
  font-weight: 500;
}

.ig-home-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 40px;
}

.ig-home-primary-cta,
.ig-home-secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 62px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
}

.ig-home-primary-cta {
  position: relative;
  isolation: isolate;
  min-width: 282px;
  border: 1px solid #ffc66a;
  color: #111820;
  background: linear-gradient(100deg, #ffc064, #ff970d);
  box-shadow: 0 12px 32px rgba(255, 146, 0, 0.2);
}

.ig-home-actions .ig-home-primary-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -3px;
  padding: 3px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(
    from var(--ig-home-cta-luminescence-angle),
    transparent 0deg 238deg,
    rgba(255, 222, 159, 0.16) 258deg,
    rgba(255, 252, 232, 0.96) 296deg,
    rgba(255, 169, 46, 0.68) 332deg,
    transparent 356deg 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(255, 202, 105, 0.48));
  animation: ig-home-cta-border-luminescence 5s linear infinite;
}

@property --ig-home-cta-luminescence-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes ig-home-cta-border-luminescence {
  to {
    --ig-home-cta-luminescence-angle: 1turn;
  }
}

.ig-home-primary-cta > span:not(.ig-home-cta-arrow) {
  white-space: nowrap;
}

.ig-home-secondary-cta {
  min-width: 238px;
  border: 1px solid rgba(255, 232, 201, 0.8);
  color: var(--ig-home-ink);
  background: rgba(2, 12, 20, 0.7);
}

.ig-home-cta-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  filter: brightness(0) saturate(100%);
  object-fit: contain;
}

.ig-home-cta-arrow {
  margin-left: auto;
  font-size: 1.25rem;
  line-height: 1;
}

.ig-home-house-wrap {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: min(59.33vw, 992px);
  height: 665px;
}

.ig-home-house {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.ig-home-brand-watermark {
  position: absolute;
  z-index: 2;
  top: 73%;
  left: 50%;
  width: 28%;
  perspective: 900px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: ig-home-brand-watermark-reveal 1.2s ease-out both;
}

.ig-home-brand-watermark img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.68;
  backface-visibility: visible;
  transform-origin: center;
  transform-style: preserve-3d;
  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.14))
    drop-shadow(0 16px 26px rgba(0, 0, 0, 0.28));
  animation: ig-home-brand-watermark-spin 12s linear infinite;
}

@keyframes ig-home-brand-watermark-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ig-home-brand-watermark-spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-360deg); }
}

.ig-home-mid-benefits {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr 1.1fr 1.2fr;
  gap: 22px;
  width: min(590px, calc(100% - 140px));
  min-height: 92px;
  margin: -92px 0 0 70px;
}

.ig-home-mid-benefits article,
.ig-home-lower-benefits article {
  display: flex;
  align-items: flex-start;
}

.ig-home-mid-benefits article {
  gap: 14px;
  min-width: 0;
}

.ig-home-benefit-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--ig-home-orange);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ig-home-mid-benefits h2,
.ig-home-lower-benefits h2 {
  margin: 0;
  color: var(--ig-home-ink);
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.35;
  text-transform: uppercase;
}

.ig-home-mid-benefits h2 {
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
}

.ig-home-mid-benefits p,
.ig-home-lower-benefits p {
  margin: 6px 0 0;
  color: var(--ig-home-muted);
  line-height: 1.45;
}

.ig-home-mid-benefits p {
  font-size: 0.84rem;
}

@media (min-width: 761px) {
  .ig-home-mid-benefits p {
    display: none;
  }
}

.ig-home-lower-benefits {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: calc(100% - 112px);
  margin: 0 56px;
  min-height: 150px;
}

.ig-home-lower-benefits article {
  align-items: center;
  gap: 24px;
  min-width: 0;
  min-height: 150px;
  padding: 26px 30px;
  border: 1px solid rgba(126, 190, 235, 0.34);
  border-radius: 24px;
  background: rgba(2, 17, 28, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(126, 190, 235, 0.12),
    0 14px 34px rgba(0, 0, 0, 0.18);
}

.ig-home-lower-benefits .ig-home-benefit-icon {
  width: 56px;
  height: 56px;
}

.ig-home-lower-benefits h2 {
  font-size: 0.96rem;
}

.ig-home-lower-benefits p {
  font-size: 0.86rem;
}

/* PX_HOME_ABOUT_REDESIGN_001 (contato institucional): rodapé compacto da
   Home pública -- e-mail real (mailto) e ícones vetoriais monocromáticos
   (.ig-social-icon, currentColor) apontando para as contas oficiais
   confirmadas. Mesmo par de classes/ícones reaproveitado no modal "Sobre"
   (.ig-about-connect) para consistência de marca entre as duas superfícies. */
.ig-social-icon {
  display: block;
  width: 19px;
  height: 19px;
}

.ig-home-footer {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: clamp(28px, 4vw, 48px);
  padding: 22px 56px;
  border-top: 1px solid var(--ig-home-line);
}

.ig-home-footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ig-home-footer-brand img {
  width: 46px;
  height: auto;
  object-fit: contain;
}

.ig-home-footer-brand p {
  margin: 0;
  color: var(--ig-home-muted);
  font-size: 0.82rem;
}

.ig-home-footer-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.ig-home-footer-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ig-home-ink);
  font-size: 0.86rem;
  transition: color 0.2s ease;
}

.ig-home-footer-email:hover {
  color: var(--ig-home-orange);
}

.ig-home-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ig-home-footer-social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--ig-home-muted);
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
  .ig-home-footer-social a:hover {
    color: var(--ig-home-orange);
    background: rgba(255, 146, 0, 0.1);
    transform: translateY(-2px);
  }
}

.ig-home button,
.ig-home a,
.ig-home-modal button,
.ig-home-modal a {
  -webkit-tap-highlight-color: transparent;
}

.ig-home button:focus-visible,
.ig-home a:focus-visible,
.ig-home-modal button:focus-visible,
.ig-home-modal a:focus-visible {
  outline: 3px solid rgba(74, 205, 255, 0.9);
  outline-offset: 3px;
}

body.ig-home-overlay-open {
  overflow: hidden;
}

.ig-home-modal {
  --ig-home-ink: #f4f2ee;
  --ig-home-muted: #c9c6c1;
  --ig-home-orange: #ff9200;
  --ig-home-line: rgba(126, 190, 235, 0.2);
}

.ig-home-modal[hidden] {
  display: none;
}

.ig-home-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0, 5, 10, 0.78);
  backdrop-filter: blur(7px);
}

.ig-home-modal-card {
  position: relative;
  width: min(620px, 100%);
  max-height: min(760px, calc(100vh - 44px));
  overflow: auto;
  padding: 42px;
  border: 1px solid rgba(255, 146, 0, 0.46);
  border-radius: 24px;
  color: var(--ig-home-ink);
  background:
    radial-gradient(circle at 90% 0%, rgba(0, 87, 255, 0.22), transparent 34%),
    #06131f;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.52);
}

.ig-home-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.8rem;
  line-height: 1;
}

.ig-home-modal-kicker {
  margin: 0 0 8px;
  color: var(--ig-home-orange);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ig-home-modal h2 {
  margin: 0 46px 20px 0;
  color: #fff;
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  line-height: 1.15;
}

.ig-home-modal p {
  color: var(--ig-home-muted);
  line-height: 1.7;
}

.ig-home-steps,
.ig-home-modal-benefits {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.ig-home-steps {
  counter-reset: home-step;
}

.ig-home-steps li {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 16px 14px 16px 54px;
  border-top: 1px solid var(--ig-home-line);
  counter-increment: home-step;
}

.ig-home-steps li::before {
  content: counter(home-step, decimal-leading-zero);
  position: absolute;
  top: 16px;
  left: 8px;
  color: var(--ig-home-orange);
  font-weight: 800;
}

.ig-home-steps span {
  color: var(--ig-home-muted);
  line-height: 1.5;
}

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

.ig-home-modal-benefits li {
  padding: 14px;
  border: 1px solid var(--ig-home-line);
  border-radius: 12px;
}

.ig-home-modal-action {
  width: min(100%, 330px);
  margin-top: 18px;
}

/* PX_HOME_HOW_IT_WORKS_REDESIGN_001: "Como funciona" rebuilt as a product
   showcase (Founder-provided brief) instead of a flat 4-item list -- both
   entry paths (preencher/colar) shown with equal weight, converging into
   the same Founder-approved brain+house asset/animation already used on
   the Processamento screen (reused as-is here, never redrawn), then into
   Revisão/Resultado and a closing human-control message. Pure content/CSS
   inside the existing .ig-home-modal-card shell -- the modal's own open/
   close/ESC/focus-trap mechanics (initializeHomeVitrine) are untouched. */
.ig-how {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0;
}

.ig-how-logo {
  width: 132px;
  height: auto;
  margin-bottom: 14px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}

.ig-how .ig-home-modal-kicker {
  text-align: center;
}

.ig-how h2 {
  margin: 0 0 14px;
  text-align: center;
  text-wrap: balance;
}

.ig-how-support {
  max-width: 46ch;
  margin: 0 0 30px;
}

.ig-how-entries {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  margin-bottom: 8px;
}

.ig-how-entry-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 20px 16px;
  border: 1px solid var(--ig-home-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.ig-how-entry-card strong {
  color: #fff;
  font-size: 0.98rem;
}

.ig-how-entry-card p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
}

.ig-how-entry-icon {
  font-size: 1.7rem;
  line-height: 1;
}

.ig-how-entry-divider {
  align-self: center;
  color: var(--ig-home-muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ig-how-flow-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  height: 30px;
  justify-content: center;
}

.ig-how-flow-connector span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ig-home-orange);
  opacity: 0.35;
  animation: ig-how-connector-pulse 1.6s ease-in-out infinite;
}

.ig-how-flow-connector span:nth-child(2) { animation-delay: 0.18s; }
.ig-how-flow-connector span:nth-child(3) { animation-delay: 0.36s; }

@keyframes ig-how-connector-pulse {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.5); }
}

.ig-how-core {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 100%;
  max-width: 420px;
  margin-bottom: 8px;
  padding: 22px 20px 26px;
  border: 1px solid rgba(255, 146, 0, 0.28);
  border-radius: 20px;
  background: radial-gradient(circle at 50% 0%, rgba(255, 146, 0, 0.1), transparent 60%);
}

.ig-how-core-visual.processing-brain-house {
  width: clamp(110px, 26vw, 150px);
  margin-bottom: 8px;
}

.ig-how-core strong {
  color: #fff;
  font-size: 1.08rem;
}

.ig-how-core p {
  max-width: 40ch;
  margin: 4px 0 0;
}

.ig-how-core-caption {
  margin-top: 8px;
  color: var(--ig-home-orange);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ig-how-demo {
  display: grid;
  gap: 4px;
  width: 100%;
  margin-bottom: 8px;
  padding: 18px 20px;
  border: 1px solid var(--ig-home-line);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
  text-align: left;
}

.ig-how-demo-label {
  color: var(--ig-home-orange);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ig-how-demo-input,
.ig-how-demo-output {
  margin: 2px 0 10px;
  color: var(--ig-home-ink);
  font-size: 0.86rem;
  font-style: italic;
  line-height: 1.5;
}

.ig-how-demo-process {
  margin: 0 0 12px;
  color: var(--ig-home-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ig-how-final-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  margin-bottom: 22px;
}

.ig-how-final-step {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 18px 14px;
  border-top: 1px solid var(--ig-home-line);
}

.ig-how-final-step strong {
  color: #fff;
  font-size: 0.94rem;
}

.ig-how-final-step p {
  margin: 0;
  font-size: 0.84rem;
}

.ig-how-final-step-note {
  color: var(--ig-home-orange);
  font-size: 0.76rem;
  font-weight: 700;
}

.ig-how-closing {
  max-width: 44ch;
  margin: 0 0 4px;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.5;
}

.ig-how-closing strong {
  color: var(--ig-home-orange);
}

.ig-how-closing-support {
  max-width: 42ch;
  margin: 0 0 22px;
  font-size: 0.85rem;
}

.ig-how-cta {
  width: min(100%, 300px);
}

@media (hover: hover) {
  .ig-how-entry-card:hover {
    border-color: rgba(255, 146, 0, 0.5);
    background: rgba(255, 146, 0, 0.06);
    transform: translateY(-2px);
  }
}

@media (max-width: 640px) {
  .ig-how-entries {
    grid-template-columns: 1fr;
  }

  .ig-how-entry-divider {
    padding: 2px 0;
  }

  .ig-how-final-steps {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ig-how-flow-connector span {
    animation: none;
    opacity: 0.6;
  }
}

/* PX_HOME_ABOUT_REDESIGN_001: "Sobre" rebuilt as the brand's origin story
   (Founder-provided brief) -- problem -> idea -> purpose narrative, distinct
   from "Como funciona" (which explains usage): shares only visual tokens and
   the reused brain+house asset/animation for family coherence. Pure
   content/CSS inside the existing .ig-home-modal-card shell -- no new modal
   mechanics, no CTA added (informational screen, same as before). */
.ig-about {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0;
}

.ig-about-logo {
  width: 132px;
  height: auto;
  margin-bottom: 14px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}

.ig-about .ig-home-modal-kicker {
  text-align: center;
}

.ig-about h2 {
  margin: 0 0 16px;
  text-align: center;
  text-wrap: balance;
}

.ig-about-intro {
  max-width: 48ch;
  margin: 0 0 30px;
}

.ig-about-story {
  display: grid;
  width: 100%;
  margin-bottom: 26px;
}

.ig-about-moment {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 18px 10px;
}

.ig-about-moment-index {
  color: var(--ig-home-orange);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.ig-about-moment strong {
  max-width: 34ch;
  color: #fff;
  font-size: 1.02rem;
}

.ig-about-moment p {
  max-width: 42ch;
  margin: 0;
}

.ig-about-moment-idea {
  padding: 22px 16px 26px;
  border: 1px solid rgba(255, 146, 0, 0.28);
  border-radius: 20px;
  background: radial-gradient(circle at 50% 0%, rgba(255, 146, 0, 0.1), transparent 60%);
}

.ig-about-moment-visual.processing-brain-house {
  width: clamp(110px, 26vw, 150px);
  margin-bottom: 6px;
}

.ig-about-flow-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  height: 30px;
  justify-content: center;
}

.ig-about-flow-connector span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ig-home-orange);
  opacity: 0.35;
  animation: ig-how-connector-pulse 1.6s ease-in-out infinite;
}

.ig-about-flow-connector span:nth-child(2) { animation-delay: 0.18s; }
.ig-about-flow-connector span:nth-child(3) { animation-delay: 0.36s; }

.ig-about-quote {
  max-width: 46ch;
  margin: 4px 0 30px;
  padding: 22px 26px;
  border-left: 3px solid var(--ig-home-orange);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.6;
  text-align: left;
}

.ig-about-pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  margin-bottom: 28px;
}

.ig-about-pillar {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 20px 14px;
  border: 1px solid var(--ig-home-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.ig-about-pillar-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.ig-about-pillar strong {
  color: #fff;
  font-size: 0.9rem;
}

.ig-about-pillar p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
}

.ig-about-closing {
  max-width: 44ch;
  margin: 0 0 4px;
  color: #fff;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}

.ig-about-closing-support {
  max-width: 42ch;
  margin: 0 0 26px;
  font-size: 0.85rem;
}

.ig-about-connect {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
  padding-top: 22px;
  border-top: 1px solid var(--ig-home-line);
}

.ig-about-connect-kicker {
  margin: 0;
  color: var(--ig-home-orange);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ig-about-connect-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ig-home-ink);
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.ig-about-connect-email:hover {
  color: var(--ig-home-orange);
}

.ig-about-connect-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ig-about-connect-social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--ig-home-muted);
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
  .ig-about-connect-social a:hover {
    color: var(--ig-home-orange);
    background: rgba(255, 146, 0, 0.1);
    transform: translateY(-2px);
  }
}

@media (hover: hover) {
  .ig-about-pillar:hover {
    border-color: rgba(255, 146, 0, 0.5);
    background: rgba(255, 146, 0, 0.06);
    transform: translateY(-2px);
  }
}

@media (max-width: 640px) {
  .ig-about-pillars {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ig-about-flow-connector span {
    animation: none;
    opacity: 0.6;
  }
}

@media (max-width: 1180px) {
  .ig-home-copy {
    padding-left: 42px;
  }

  .ig-home-mid-benefits {
    margin-left: 42px;
  }

  .ig-home h1 {
    font-size: clamp(2.2rem, 3.7vw, 3rem);
  }

  .ig-home-primary-cta,
  .ig-home-secondary-cta {
    min-width: 0;
    padding-inline: 20px;
  }
}

@media (max-width: 760px) {
  .ig-home {
    overflow-x: clip;
    overflow-y: visible;
  }

  .ig-home-header {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 116px;
    padding: 10px 16px;
  }

  .ig-home-brand img {
    width: min(176px, 45vw);
    height: 88px;
  }

  .ig-home-desktop-nav {
    display: none;
  }

  .ig-home-header-actions {
    gap: 8px;
  }

  .ig-home-menu-toggle {
    display: block;
  }

  .ig-home-enter {
    min-width: 82px;
    min-height: 44px;
    padding: 0 15px;
  }

  .ig-home-hero-stage {
    display: flex;
    min-height: 0;
    flex-direction: column;
  }

  .ig-home-copy {
    width: 100%;
    padding: 18px 20px 22px;
  }

  .ig-home-formula {
    display: flex;
    width: fit-content;
    max-width: 100%;
    min-height: 54px;
    margin: 0 auto 32px;
    padding: 10px 18px;
    font-size: clamp(0.69rem, 3.25vw, 0.88rem);
    text-align: center;
    transform: none;
    white-space: normal;
  }

  .ig-home-formula > span {
    display: none;
  }

  .ig-home h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(2rem, 8vw, 2.6rem);
    line-height: 1.22;
  }

  .ig-home-description {
    margin-top: 24px;
    font-size: clamp(1rem, 4.7vw, 1.2rem);
    line-height: 1.62;
  }

  .ig-home-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 28px;
  }

  .ig-home-primary-cta,
  .ig-home-secondary-cta {
    width: 100%;
    min-height: 66px;
    font-size: 1.08rem;
  }

  .ig-home-house-wrap {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: clamp(350px, 102vw, 440px);
  }

  .ig-home-hero-stage::after {
    background: linear-gradient(
      180deg,
      rgba(2, 11, 18, 0.18) 0%,
      rgba(2, 11, 18, 0.02) 54%,
      rgba(2, 11, 18, 0.12) 100%
    );
  }

  .ig-home-house {
    object-fit: cover;
    object-position: 68% center;
  }

  .ig-home-mid-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 30px 16px 34px;
    background: rgba(2, 14, 23, 0.84);
  }

  .ig-home-mid-benefits article {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 0 10px;
    text-align: center;
  }

  .ig-home-mid-benefits article + article {
    border-left: 1px solid var(--ig-home-line);
  }

  .ig-home-benefit-icon {
    width: 42px;
    height: 42px;
  }

  .ig-home-mid-benefits h2 {
    font-size: clamp(0.68rem, 3.1vw, 0.82rem);
    font-weight: 400;
    text-transform: none;
  }

  .ig-home-mid-benefits p {
    display: block;
    font-size: clamp(0.68rem, 2.85vw, 0.78rem);
  }

  .ig-home-lower-benefits {
    grid-template-columns: 1fr;
    gap: 12px;
    width: calc(100% - 32px);
    margin: 0 16px;
  }

  .ig-home-lower-benefits article {
    align-items: center;
    gap: 18px;
    min-height: 0;
    padding: 22px 20px;
    border-radius: 20px;
  }

  .ig-home-lower-benefits .ig-home-benefit-icon {
    width: 48px;
    height: 48px;
  }

  .ig-home-lower-benefits h2 {
    font-size: 0.95rem;
    font-weight: 400;
    text-transform: none;
  }

  .ig-home-lower-benefits p {
    font-size: 0.82rem;
  }

  .ig-home-modal-card {
    padding: 38px 22px 26px;
  }

  .ig-home-modal-benefits {
    grid-template-columns: 1fr;
  }

  .ig-home-footer {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 16px;
  }

  .ig-home-footer-contact {
    align-items: flex-start;
  }
}

@media (max-width: 390px) {
  .ig-home-header {
    padding-inline: 12px;
  }

  .ig-home-brand img {
    width: min(150px, 43vw);
  }

  .ig-home-menu-toggle {
    width: 42px;
    padding-inline: 7px;
  }

  .ig-home-enter {
    min-width: 72px;
    padding-inline: 11px;
    font-size: 0.88rem;
  }

  .ig-home-copy {
    padding-inline: 16px;
  }

  .ig-home h1 {
    font-size: clamp(1.9rem, 8vw, 2.15rem);
  }

  .ig-home-mid-benefits {
    padding-inline: 8px;
  }

  .ig-home-mid-benefits article {
    padding-inline: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ig-home *,
  .ig-home-modal * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }

  .ig-home-actions .ig-home-primary-cta::before {
    background: linear-gradient(115deg, rgba(255, 248, 218, 0.76), rgba(255, 169, 46, 0.3));
    filter: drop-shadow(0 0 3px rgba(255, 202, 105, 0.26));
    animation: none !important;
  }
}

/* AUTHENTICATED_APP_SHELL_FOUNDATION_001 — shell isolado da Home pública. */
.ig-auth-shell {
  --ig-auth-navy: #061a3a;
  --ig-auth-navy-deep: #03132d;
  --ig-auth-orange: #ff7200;
  --ig-auth-ink: #0a1f44;
  --ig-auth-muted: #647087;
  --ig-auth-line: rgba(10, 31, 68, 0.12);
  display: none;
  min-height: 100vh;
  color: var(--ig-auth-ink);
  background: #edf2f8;
}

.ig-home-workspace-active .ig-auth-shell,
.ig-auth-shell:has(#gerador:not(.app-screen-hidden)),
.ig-auth-shell:has(#studio-dashboard:not(.app-screen-hidden)) {
  display: grid;
  grid-template-columns: minmax(230px, 258px) minmax(0, 1fr);
}

.studio-dashboard {
  display: grid;
  gap: 24px;
}

.studio-dashboard.app-screen-hidden {
  display: none;
}

.studio-welcome-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(135deg, #fff, #f4f8f6);
}

.studio-welcome-copy h2 {
  margin: 6px 0 18px;
  font-size: 1.4rem;
  color: var(--blue-dark);
  max-width: 30ch;
}

.studio-welcome-logo-frame {
  position: relative;
  isolation: isolate;
  width: clamp(280px, 34vw, 460px);
  margin-left: auto;
  padding: 4px 6px;
  border: 2px solid var(--accent);
  border-radius: 12px;
  box-sizing: border-box;
  flex: 0 1 460px;
}

.studio-welcome-logo-frame::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -3px;
  padding: 4px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(
    from var(--studio-logo-luminescence-angle),
    transparent 0deg 226deg,
    rgba(255, 106, 0, 0.2) 250deg,
    rgba(255, 226, 204, 0.96) 292deg,
    rgba(255, 106, 0, 0.88) 334deg,
    transparent 358deg 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 8px rgba(255, 106, 0, 0.52));
  animation: studio-logo-border-luminescence 5s linear infinite;
}

.studio-welcome-illustration {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: right center;
}

@property --studio-logo-luminescence-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes studio-logo-border-luminescence {
  to {
    --studio-logo-luminescence-angle: -1turn;
  }
}

@media (max-width: 720px) {
  .studio-welcome-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .studio-welcome-logo-frame {
    width: min(100%, 400px);
    margin-left: auto;
    align-self: flex-end;
    flex-basis: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-welcome-logo-frame::before {
    background: linear-gradient(115deg, rgba(255, 226, 204, 0.9), rgba(255, 106, 0, 0.42));
    filter: drop-shadow(0 0 4px rgba(255, 106, 0, 0.34));
    animation: none;
  }
}

.studio-listings-section {
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.studio-listings-scope-note {
  font-size: 0.78rem;
  color: var(--muted);
  background: #f4f8f6;
  padding: 4px 10px;
  border-radius: 999px;
}

.studio-listings-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  font-size: 0.9rem;
}

.studio-listings-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.studio-listings-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

/* PX_STUDIO_LISTING_STATUS_COLOR_001: Founder asked for the status column
   to be color-coded instead of plain text. Reuses the app's own existing
   colors -- var(--accent) is the same orange the Revisão-screen ad-style
   badge and every other "needs attention" element uses; #b42323 is the
   same red .studio-listing-delete-button already uses for a real
   destructive/blocked action, never introduced fresh; var(--muted) is the
   app's standard neutral gray. Green is the one new color here -- nothing
   else in the app claims it, and a genuinely finished/positive state is
   exactly the kind of meaning green is safe to carry. */
.studio-listing-status {
  font-weight: 700;
}

.studio-listing-status-ready {
  color: #1a7a3d;
}

.studio-listing-status-review {
  color: var(--accent);
}

.studio-listing-status-blocked {
  color: #b42323;
}

.studio-listing-status-draft,
.studio-listing-status-archived {
  color: var(--muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.studio-listing-open-button {
  border: 1px solid var(--ig-auth-orange);
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--ig-auth-orange);
  background: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.studio-listing-open-button:hover,
.studio-listing-open-button:focus-visible {
  color: #fff;
  background: var(--ig-auth-orange);
  outline: none;
}

.studio-listing-open-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* PX_STUDIO_LISTING_ACTIONS_ROW_WRAP_REPAIR_001: reported live -- "Excluir"
   dropped to its own second line under "Abrir"/"Editar" even with clear
   empty space to the right of the row. Root cause: this <td> is one column
   in an auto-layout table alongside a long free-text "Título" column, and
   the browser's default column-width distribution let a long title squeeze
   this column narrower than 3 buttons need. `white-space: nowrap` +
   `width: 1%` (paired with the matching rule on the table cell below) is
   the standard auto-layout-table trick: it tells the browser "give this
   column exactly what its content needs, never less" -- the flexible
   Título column absorbs the space this one no longer needs, wrapping its
   own long text instead of forcing action buttons to wrap. */
.studio-listing-actions {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
  width: 1%;
}

.studio-listing-edit-button {
  border: 1px solid var(--ig-border, #d8e1ed);
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--ig-navy, #0a1f44);
  background: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.studio-listing-edit-button:hover,
.studio-listing-edit-button:focus-visible {
  color: #fff;
  background: var(--ig-navy, #0a1f44);
  outline: none;
}

.studio-listing-edit-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.studio-listing-delete-button {
  border: 1px solid #c93d3d;
  border-radius: 8px;
  padding: 7px 12px;
  color: #b42323;
  background: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.studio-listing-delete-button:hover,
.studio-listing-delete-button:focus-visible {
  color: #fff;
  background: #b42323;
  outline: none;
}

.studio-listing-delete-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.studio-listing-delete-warning {
  margin: 14px 0 0;
  color: #8f2525;
  font-size: 0.9rem;
  line-height: 1.5;
}

.studio-listing-delete-confirm {
  /* PX_DELETE_CONFIRM_BUTTON_RADIUS_REPAIR_001: reported live -- this
     class only ever set color/background, never the shared 8px radius
     .primary-action/.secondary-action both get, so any button using it
     (this one, and #clear-form-confirm-confirm reusing it) rendered with
     square corners next to a rounded "Cancelar". Same 8px token as every
     other button in the app, not a new value. */
  border-radius: 8px;
  border-color: #b42323;
  color: #fff;
  background: #b42323;
}

.studio-listing-delete-confirm:hover,
.studio-listing-delete-confirm:focus-visible {
  background: #8f1c1c;
  outline: none;
}

.studio-listings-empty-row td {
  color: var(--muted);
  text-align: center;
  padding: 24px 10px;
}

.studio-listings-session-note {
  margin: 14px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.studio-listings-pagination {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) auto auto;
  align-items: center;
  gap: 12px 18px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.84rem;
}

.studio-listings-page-size {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.studio-listings-page-size select {
  min-height: 38px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ig-auth-ink);
  background: #fff;
  font: inherit;
  font-weight: 700;
}

.studio-listings-range {
  text-align: center;
}

.studio-listings-page-navigation {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.studio-listings-page-navigation button,
.studio-listings-show-all {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--ig-auth-orange);
  border-radius: 8px;
  color: var(--ig-auth-orange);
  background: #fff;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.studio-listings-page-navigation button:hover:not(:disabled),
.studio-listings-page-navigation button:focus-visible,
.studio-listings-show-all:hover,
.studio-listings-show-all:focus-visible {
  color: #fff;
  background: var(--ig-auth-orange);
  outline: none;
}

.studio-listings-page-navigation button:disabled {
  border-color: var(--line);
  color: var(--muted);
  background: #f4f6f9;
  cursor: not-allowed;
  opacity: 0.72;
}

.studio-listings-show-all:disabled {
  border-color: var(--line);
  color: var(--muted);
  background: #f4f6f9;
  cursor: not-allowed;
  opacity: 0.72;
}

.studio-listings-show-all {
  justify-self: end;
  color: #fff;
  background: var(--ig-auth-orange);
}

@media (max-width: 1100px) {
  .studio-listings-pagination {
    grid-template-columns: 1fr auto;
  }

  .studio-listings-range {
    text-align: right;
  }

  .studio-listings-show-all {
    justify-self: end;
  }
}

@media (max-width: 680px) {
  .studio-listings-pagination {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .studio-listings-range {
    text-align: left;
  }

  .studio-listings-page-navigation {
    justify-content: space-between;
  }

  .studio-listings-show-all {
    width: 100%;
    justify-self: stretch;
  }
}

.ig-auth-skip-link {
  position: fixed;
  z-index: 2000;
  top: 10px;
  left: 14px;
  padding: 11px 16px;
  border: 2px solid #fff;
  border-radius: 10px;
  color: #fff;
  background: var(--ig-auth-orange);
  transform: translateY(-180%);
  transition: transform 0.16s ease;
}

.ig-auth-skip-link:focus-visible {
  transform: translateY(0);
}

.ig-auth-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  height: 100vh;
  overflow-y: auto;
  padding: 24px 18px;
  color: #fff;
  background:
    radial-gradient(circle at 20% 12%, rgba(0, 87, 255, 0.2), transparent 36%),
    linear-gradient(180deg, var(--ig-auth-navy), var(--ig-auth-navy-deep));
  box-shadow: 12px 0 34px rgba(3, 19, 45, 0.12);
}

/* PX_SIDEBAR_STEP_NAV_OVERFLOW_REPAIR_001: the sidebar is a fixed-height
   (100vh) flex column. #form-step-nav-sidebar (5 items + descriptions + exit
   button) is tall enough to overflow it, and flex items shrink by default —
   without this, the logo (a small flex-basis item) got squished down to 0
   height instead of the taller nav list, effectively disappearing. Every
   direct child now keeps its natural size; overflow-y: auto above lets the
   sidebar itself scroll if content still doesn't fit, instead of any child
   shrinking. */
.ig-auth-sidebar > * {
  flex-shrink: 0;
}

.ig-auth-brand {
  display: block;
  width: 100%;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: #fff;
}

.ig-auth-brand img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* PX_SIDEBAR_LOGO_TRANSPARENT_001: the sidebar's own brand link never gets
   the white card background/border the base rule above uses elsewhere (e.g.
   the light mobile header) -- it sits directly on the sidebar's dark navy
   gradient, and the logo asset itself is now transparent (logo-imobgenius-
   transparent.png), so it should blend into that gradient, not sit in a box. */
.ig-auth-sidebar .ig-auth-brand {
  background: transparent;
  border-color: transparent;
}

.ig-auth-brand-mobile {
  display: none;
}

.ig-auth-nav {
  display: grid;
  gap: 10px;
}

.ig-auth-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  font-weight: 750;
}

.ig-auth-nav a[aria-current="page"] {
  border-color: rgba(255, 114, 0, 0.65);
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 3px 0 0 var(--ig-auth-orange);
}

.ig-auth-nav-mark {
  color: var(--ig-auth-orange);
  font-size: 0.75rem;
}

/* PX_APP_SHELL_001 -------------------------------------------------------- */
.ig-auth-new-listing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  background: var(--ig-auth-orange);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
}

.ig-auth-new-listing span[aria-hidden="true"] {
  font-size: 1.05rem;
  line-height: 1;
}

/* PX_FORM_SIDEBAR_STEP_NAV_001 ---------------------------------------------- */
.form-step-nav-sidebar {
  display: grid;
  gap: 8px;
}

.form-step-nav-sidebar.app-screen-hidden {
  display: none;
}

.form-step-nav-sidebar-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  background: none;
  color: rgba(255, 255, 255, 0.82);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.form-step-nav-sidebar-item.active {
  border-color: rgba(255, 114, 0, 0.65);
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 3px 0 0 var(--ig-auth-orange);
}

.form-step-nav-sidebar-item.completed .form-step-nav-sidebar-index {
  background: var(--ig-auth-orange);
  color: #fff;
}

.form-step-nav-sidebar-index {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.78rem;
  font-weight: 700;
}

.form-step-nav-sidebar-copy {
  display: grid;
  gap: 2px;
}

.form-step-nav-sidebar-copy strong {
  font-size: 0.86rem;
}

.form-step-nav-sidebar-copy small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.74rem;
}

.form-step-nav-sidebar-back {
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.08) !important;
}

.ig-auth-sidebar-tip {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
  line-height: 1.5;
}

.ig-auth-sidebar-tip .eyebrow {
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
}

.ig-auth-sidebar-tip p:last-child {
  margin: 0;
}
/* end PX_FORM_SIDEBAR_STEP_NAV_001 ------------------------------------------- */

/* PX_FORM_CONTEXT_HEADER_001 -------------------------------------------------- */
.form-context-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.form-context-header.hidden {
  display: none;
}

.form-context-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.form-context-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f0f3f8;
  font-size: 1.3rem;
}

.form-context-heading h2 {
  margin: 0 0 4px;
  color: var(--blue-dark);
}

.form-context-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.required-mark {
  color: #d97706;
}

.form-context-help {
  flex-shrink: 0;
  max-width: 260px;
  padding: 12px 14px;
  border: 1px solid #bcd4ff;
  border-radius: 10px;
  background: #eef4ff;
}

.form-context-help .eyebrow {
  margin: 0 0 4px;
  color: var(--blue-dark);
  font-weight: 700;
}

.form-context-help p:last-child {
  margin: 0;
  font-size: 0.84rem;
  color: var(--ink);
}
/* end PX_FORM_CONTEXT_HEADER_001 ---------------------------------------------- */

.ig-auth-feedback-trigger {
  margin: 0;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.ig-auth-feedback-trigger:hover {
  color: rgba(255, 255, 255, 0.85);
}

/* PX_DISCREET_VERSION_TAG_001: deliberately closer to invisible than the
   feedback trigger above it -- no underline, low opacity, smallest
   readable size. Meant for an attentive eye to confirm which build is
   running, not to draw attention to itself. */
.ig-auth-version-tag {
  margin: 2px 0 0;
  padding: 0 4px;
  color: rgba(255, 255, 255, 0.22);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  user-select: text;
}

.ig-auth-version-tag:empty {
  display: none;
}

.ig-auth-sidebar-user {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.06);
}

.ig-auth-profile-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.ig-auth-profile-trigger:hover .ig-auth-user-copy strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ig-auth-sidebar-user-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #8592a8, #bcc4d0);
  font-weight: 850;
  font-size: 0.85rem;
}

.ig-auth-sidebar-user-avatar img,
.ig-auth-user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.ig-auth-sidebar-user .ig-auth-user-copy strong {
  color: #fff;
}

.ig-auth-sidebar-user .ig-auth-user-copy small {
  color: rgba(255, 255, 255, 0.68);
}
/* end PX_APP_SHELL_001 ---------------------------------------------------- */

.ig-auth-main {
  min-width: 0;
  background: #edf2f8;
}

.ig-auth-main > main {
  min-width: 0;
}

.ig-auth-header {
  position: sticky;
  z-index: 30;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 96px;
  padding: 18px clamp(22px, 3vw, 48px);
  border-bottom: 1px solid var(--ig-auth-line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 30px rgba(10, 31, 68, 0.06);
  backdrop-filter: blur(14px);
}

.ig-auth-heading h1 {
  margin: 0;
  color: var(--ig-auth-ink);
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.ig-auth-heading p {
  margin: 7px 0 0;
  color: var(--ig-auth-muted);
  font-size: 0.94rem;
}

.ig-auth-user {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 158px;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--ig-auth-line);
  border-radius: 999px;
  background: #fff;
}

.ig-auth-user-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #8592a8, #bcc4d0);
  box-shadow: 0 0 0 1px rgba(10, 31, 68, 0.12);
  font-weight: 850;
}

.ig-auth-user-copy {
  display: grid;
  gap: 2px;
}

.ig-auth-user-copy strong {
  color: var(--ig-auth-ink);
  font-size: 0.88rem;
}

.ig-auth-user-copy small {
  color: var(--ig-auth-muted);
  font-size: 0.73rem;
}

.user-profile-modal[hidden] { display: none; }

.user-profile-modal {
  position: fixed;
  z-index: 1100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(5, 18, 37, 0.7);
  backdrop-filter: blur(6px);
}

.user-profile-modal-card {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100vh - 44px);
  overflow: auto;
  padding: 30px;
  border: 1px solid var(--ig-auth-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(10, 31, 68, 0.28);
}

.user-profile-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ig-auth-line);
  border-radius: 50%;
  color: var(--ig-auth-ink);
  background: #fff;
  font-size: 1.4rem;
  cursor: pointer;
}

.user-profile-modal-card > .eyebrow { margin: 0 0 6px; color: var(--ig-auth-orange); }
.user-profile-modal-card h2 { margin: 0 50px 6px 0; color: var(--ig-auth-ink); font-size: 1.6rem; }
.user-profile-intro { margin: 0 0 24px; color: var(--ig-auth-muted); line-height: 1.5; }

.user-profile-photo-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--ig-auth-line);
  border-radius: 12px;
  background: #f8fafc;
}

.user-profile-photo-preview {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #64748b, #a8b2c2);
  box-shadow: 0 0 0 1px rgba(10, 31, 68, 0.14);
  font-size: 1.6rem;
  font-weight: 850;
}

.user-profile-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.user-profile-photo-row strong { color: var(--ig-auth-ink); }
.user-profile-photo-row p { margin: 4px 0 10px; color: var(--ig-auth-muted); font-size: 0.82rem; }
.user-profile-photo-button { display: inline-flex; min-height: 38px; padding: 8px 13px; cursor: pointer; }

.user-profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.user-profile-form-grid label {
  display: grid;
  gap: 7px;
  color: var(--ig-auth-ink);
  font-size: 0.84rem;
  font-weight: 700;
}

.user-profile-form-grid input {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--ig-auth-line);
  border-radius: 9px;
  color: var(--ig-auth-ink);
  background: #fff;
  font: inherit;
  font-weight: 500;
}

.user-profile-form-grid input[readonly] { color: var(--ig-auth-muted); background: #f3f6fa; }
.user-profile-feedback { min-height: 20px; margin: 14px 0 0; color: #b42318; font-size: 0.82rem; }
.user-profile-feedback[data-tone="success"] { color: #087443; }

.user-profile-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

@media (max-width: 620px) {
  .user-profile-modal { align-items: end; padding: 0; }
  .user-profile-modal-card { width: 100%; max-height: 92vh; padding: 24px 18px; border-radius: 18px 18px 0 0; }
  .user-profile-form-grid { grid-template-columns: 1fr; }
  .user-profile-photo-row { align-items: flex-start; }
}

.ig-auth-content {
  min-width: 0;
  padding: clamp(22px, 3vw, 48px);
  outline: none;
}

.ig-auth-content .generator-layout {
  width: min(1180px, 100%);
  margin: 0 auto 48px;
}

.ig-auth-shell :where(a, button, input, select, textarea):focus-visible,
.ig-auth-content:focus-visible {
  outline: 3px solid #ff8a28;
  outline-offset: 3px;
}

@media (max-width: 820px) {
  .ig-home-workspace-active .ig-auth-shell,
  .ig-auth-shell:has(#gerador:not(.app-screen-hidden)) {
    display: block;
  }

  .ig-auth-sidebar {
    display: none;
  }

  .ig-auth-header {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand user"
      "heading heading";
    gap: 14px 12px;
    min-height: 0;
    padding: 12px 14px 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--ig-auth-navy), var(--ig-auth-navy-deep));
  }

  .ig-auth-brand-mobile {
    grid-area: brand;
    display: block;
    width: min(176px, 52vw);
    padding: 4px;
    border-radius: 9px;
  }

  .ig-auth-heading {
    grid-area: heading;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .ig-auth-heading h1,
  .ig-auth-heading p {
    color: #fff;
  }

  .ig-auth-heading h1 {
    font-size: clamp(1.25rem, 5.7vw, 1.55rem);
  }

  .ig-auth-heading p {
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.84rem;
  }

  .ig-auth-user {
    grid-area: user;
    min-width: 0;
    padding: 5px 8px 5px 5px;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
  }

  .ig-auth-user-avatar {
    width: 36px;
    height: 36px;
  }

  .ig-auth-user-copy strong,
  .ig-auth-user-copy small {
    color: #fff;
  }

  .ig-auth-user-copy strong {
    font-size: 0.78rem;
  }

  .ig-auth-user-copy small {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.66rem;
  }

  .ig-auth-content {
    padding: 14px 10px 30px;
  }

  .ig-auth-content .generator-layout {
    width: 100%;
    margin: 0 auto 30px;
  }
}

@media (max-width: 370px) {
  .ig-auth-brand-mobile {
    width: min(154px, 48vw);
  }

  .ig-auth-user-copy strong {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ig-auth-shell *,
  .ig-auth-shell *::before,
  .ig-auth-shell *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
  padding: 0 max(22px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid rgba(10, 31, 68, 0.1);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
}

.brand,
.topbar nav,
.nav-action {
  display: flex;
  align-items: center;
}

.brand {
  gap: 10px;
  font-weight: 800;
}

.brand img,
.headerLogo,
.homeIcon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  object-position: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  mix-blend-mode: normal;
  filter: drop-shadow(0 6px 14px rgba(0, 87, 255, 0.12));
}

.brand span {
  color: var(--blue-dark);
  font-weight: 900;
}

.topbar nav {
  gap: 24px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.nav-action {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  background: var(--accent);
  box-shadow: 0 10px 24px rgba(255, 106, 0, 0.24);
}

.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: calc(100vh - 72px);
  padding: 72px max(22px, calc((100vw - 1180px) / 2));
  color: #ffffff;
  background:
    radial-gradient(circle at 78% 18%, rgba(0, 87, 255, 0.42), transparent 32%),
    radial-gradient(circle at 25% 74%, rgba(255, 106, 0, 0.28), transparent 26%),
    linear-gradient(105deg, rgba(10, 31, 68, 0.98), rgba(10, 31, 68, 0.9), rgba(10, 31, 68, 0.62)),
    linear-gradient(160deg, #16305a 0%, #0a1f44 45%, #060f24 100%);
}

.hero-brand-watermark {
  position: absolute;
  right: max(7%, calc((100vw - 1180px) / 2));
  bottom: 28%;
  width: min(430px, 34vw);
  opacity: 0;
  mix-blend-mode: soft-light;
  filter: blur(0.2px) contrast(1.08) brightness(1.03) saturate(0.96)
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.16))
    drop-shadow(0 20px 36px rgba(0, 0, 0, 0.18));
  pointer-events: none;
  transform-origin: center;
  /* PX_ENTRY_PAGE_VISUAL_FOUNDATION_001: presença discreta e estática do
     símbolo institucional — entrada suave única, sem rotação contínua nem
     loop. A animação anterior (logoSpinY, giro 3D infinito) foi removida por
     estar explicitamente proibida para esta Sprint. */
  animation: heroMarkReveal 1.4s ease-out 0.15s forwards;
}

@keyframes heroMarkReveal {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 0.16; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-brand-watermark {
    animation: none;
    opacity: 0.16;
    transform: none;
  }
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
}

.hero-logo,
.mainLogo {
  display: block;
  width: min(430px, 78vw);
  max-height: 220px;
  object-fit: contain;
  object-position: left center;
  margin: 0 0 26px;
  mix-blend-mode: normal;
  filter: contrast(1.05) brightness(1.02) saturate(1.05)
    drop-shadow(0 18px 34px rgba(0, 0, 0, 0.28))
    drop-shadow(0 0 16px rgba(0, 87, 255, 0.12));
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero .eyebrow {
  color: #ffb547;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1 {
  margin: 0;
  font-size: clamp(2.55rem, 6vw, 5.4rem);
  line-height: 0.96;
  letter-spacing: 0;
  font-weight: 900;
}

h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--blue-dark);
}

h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.hero p:not(.eyebrow) {
  max-width: 620px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.08rem;
  line-height: 1.7;
}

.hero h1 {
  color: #ffffff;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.primary-action,
.secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.primary-action {
  border: 1px solid var(--accent);
  color: #fff;
  background: var(--accent);
  box-shadow: 0 12px 26px rgba(255, 106, 0, 0.24);
}

.primary-action:hover,
.nav-action:hover {
  background: var(--accent-dark);
}

/* PX_ENTRY_PAGE_VISUAL_FOUNDATION_001: foco visível explícito para os CTAs —
   antes desta Sprint, links de ação dependiam apenas do outline padrão do
   navegador, sem garantia visual consistente entre navegadores. */
.primary-action:focus-visible,
.secondary-action:focus-visible,
.nav-action:focus-visible {
  outline: 3px solid rgba(0, 87, 255, 0.55);
  outline-offset: 2px;
}

.button:disabled,
button[aria-disabled="true"] {
  cursor: wait;
  opacity: 0.58;
  box-shadow: none;
}

.secondary-action {
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  background: rgba(0, 87, 255, 0.26);
}

.button.secondary-action {
  border-color: rgba(0, 87, 255, 0.24);
  color: var(--blue);
  background: #fff;
}

.button {
  width: fit-content;
}

.hidden {
  display: none !important;
}

.proof-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  width: min(1180px, calc(100% - 32px));
  margin: -34px auto 0;
  position: relative;
  z-index: 5;
  overflow: hidden;
  border: 1px solid rgba(10, 31, 68, 0.1);
  border-radius: 8px;
  box-shadow: var(--shadow);
  background: var(--line);
}

.proof-band div {
  padding: 22px;
  background: var(--surface);
}

.proof-band div:first-child {
  border-top: 3px solid var(--accent);
}

.proof-band div:nth-child(2) {
  border-top: 3px solid var(--blue);
}

.proof-band div:nth-child(3) {
  border-top: 3px solid var(--blue-dark);
}

.proof-band strong,
.proof-band span {
  display: block;
}

.proof-band strong {
  font-size: 1.05rem;
  color: var(--blue-dark);
}

.proof-band span {
  margin-top: 6px;
  color: var(--muted);
}

.section,
.generator-layout {
  width: min(1180px, calc(100% - 32px));
  margin: 86px auto;
}

.section-heading {
  max-width: 720px;
  margin-bottom: 24px;
}

.section-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.7;
  text-align: justify;
}

.section-heading.compact {
  margin-bottom: 20px;
}

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

.feature-grid article {
  min-height: 190px;
  padding: 22px;
  border: 1px solid rgba(0, 87, 255, 0.12);
  border-radius: 8px;
  background: var(--surface);
}

.feature-grid span {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--accent);
  font-weight: 800;
}

.feature-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.generator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 18px;
  align-items: start;
}

.app-screen-hidden {
  display: none !important;
}

.form-panel,
.result-panel {
  border: 1px solid rgba(10, 31, 68, 0.1);
  border-radius: 8px;
  box-shadow: var(--shadow);
  background: var(--surface);
}

.form-panel,
.result-panel,
.feature-grid article,
.result-preview section {
  position: relative;
}

.form-panel::before,
.result-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg, var(--accent), var(--blue));
}

.form-panel {
  padding: 28px;
}

.result-panel {
  position: sticky;
  top: 92px;
  padding: 24px;
}

.panel-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 20px;
  border: 1px solid rgba(0, 87, 255, 0.12);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(10, 31, 68, 0.04), rgba(0, 87, 255, 0.06));
}

.panel-brand img,
.panelLogo,
.panelIcon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  object-position: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  mix-blend-mode: normal;
  filter: contrast(1.05) brightness(1.02) drop-shadow(0 10px 20px rgba(0, 87, 255, 0.12));
  flex: 0 0 auto;
}

.panelIconSmart {
  filter: contrast(1.06) brightness(1.03) drop-shadow(0 10px 20px rgba(255, 106, 0, 0.12));
}

.panelIconMedia {
  filter: contrast(1.05) brightness(1.02) drop-shadow(0 10px 20px rgba(0, 87, 255, 0.14));
}

.panel-brand strong,
.panel-brand span {
  display: block;
}

.panel-brand strong {
  color: var(--blue-dark);
  font-weight: 900;
}

.panel-brand span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.listing-form {
  display: grid;
  gap: 18px;
}

/* PX_REVIEW_STEP_MODE_SWITCH_REPAIR_001: pointless once the user is past
   entering the property's own data (Dados do anunciante or Revisão) --
   switching input mode, style or generation mode there would discard
   work, not help it. See showFormStep(). */
#gerador.form-review-step-active .input-mode-switch,
#gerador.form-review-step-active .editorial-style-control,
#gerador.form-review-step-active .generation-mode-control {
  display: none;
}

.input-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  margin-bottom: 18px;
  border: 1px solid rgba(0, 87, 255, 0.12);
  border-radius: 8px;
  background: var(--surface-soft);
}

/* PX_FORM_MODE_SWITCH_STEP_ONE_ONLY_001: the toggle only makes sense before
   the user has committed to a mode and started entering data in it -- past
   that point it's replaced by this compact read-only indicator, so the
   user always knows which mode produced what's on screen without the
   toggle competing for attention on every step. */
.form-mode-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  padding: 8px 14px;
  border: 1px solid rgba(0, 87, 255, 0.12);
  border-radius: 999px;
  color: var(--blue-dark);
  font-size: 0.82rem;
  font-weight: 800;
  background: var(--surface-soft);
}

.mode-button {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  background: transparent;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.mode-button.active {
  color: #fff;
  background: var(--blue);
  box-shadow: 0 10px 22px rgba(0, 87, 255, 0.2);
}

.mode-panel {
  display: none;
}

.mode-panel.active {
  display: grid;
}

.paste-panel,
.commercial-contact-panel {
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
}

.commercial-contact-panel {
  display: grid;
  margin-top: 18px;
  background: #fff;
}

.commercial-contact-panel h3 {
  margin: 4px 0 0;
  color: var(--blue-dark);
}

/* PX_PASTE_MODE_ADVERTISER_DATA_PARITY_001 follow-up: manual mode conveys
   "this is its own optional step" via the sidebar stepper item's own
   caption ("Opcional — nome, contato e assinatura", see
   .form-step-nav-sidebar-copy small in index.html); paste mode has no
   stepper at all, so this panel could read as a stray leftover block
   instead of a distinct section -- shown only in paste mode (see
   updateCommercialContactPanelVisibility in script.js) to carry the same
   information the sidebar already gives manual-mode users. */
.commercial-contact-paste-note {
  margin: 2px 0 0;
  color: #5a6b82;
  font-size: 0.86rem;
  line-height: 1.5;
  max-width: 52ch;
}

/* PX_FORM_STEPPER_001 ---------------------------------------------------- */
/* .mode-panel handles the display:none/active toggle (form-stepper is a
   mode-panel too — hidden in "Colar anúncio existente", which has no
   stepper equivalent in the approved baseline); this only sets the type. */
#form-stepper.active {
  display: flex;
}

.form-stepper {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
}

.form-stepper-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.76rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.form-stepper-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 0.76rem;
  font-weight: 800;
  flex-shrink: 0;
}

.form-stepper-item.completed .form-stepper-index {
  background: #087443;
  border-color: #087443;
  color: #fff;
}

.form-stepper-item.active {
  background: rgba(10, 31, 68, 0.06);
  color: var(--blue-dark);
  font-weight: 800;
}

.form-stepper-item.active .form-stepper-index {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: #fff;
}

/* Every field group keeps its .commercial-contact-panel/.form-grid display
   rule for when it's the active step; this only controls visibility. Comes
   after .commercial-contact-panel { display: grid } in source order so the
   default (inactive) state wins the cascade at equal specificity. */
.form-step {
  display: none;
}

.form-step.active {
  display: grid;
  gap: 18px;
}

.form-step-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

/* PX_STEP5_ADVERTISER_DATA_GATE_001: this panel now has a real "Voltar"
   alongside "Continuar" (back to step 5), so it uses the same
   space-between layout as every other step's nav -- the old flex-end-only
   override was for when this held just the single "Continuar" button. */
.form-step-advertiser-gate {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7f8fa;
}

.form-step-advertiser-gate p {
  margin: 0;
  font-weight: 600;
  color: var(--blue-dark);
}

.form-step-advertiser-gate-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.form-step-advertiser-gate-actions-right {
  display: flex;
  gap: 10px;
}

.result-screen-panel {
  display: none;
  /* PX_RESULT_SCREEN_SCROLL_HEADING_CUTOFF_REPAIR_001: showResultScreen()'s
     scrollIntoView({block:"start"}) aligns this panel's top edge with the
     scroll container's top -- but .ig-auth-header is position:sticky,
     min-height:96px, sitting exactly there and covering whatever scrolls
     into that spot. Reported live as "Seu anúncio está pronto! 🎉" getting
     its top sliced off. Same scroll-margin-top pattern already used for
     .generator-layout/.generation-feedback below (100-104px) -- leaves room
     for the sticky header instead of scrolling underneath it. */
  scroll-margin-top: 108px;
}

.result-screen-panel.active {
  display: grid;
  gap: 18px;
}

/* PX_ASSISTED_REVIEW_APPROVED_COMPOSITION_001: Conferência assistida already
   owns its main/sidebar split through .assisted-review-body. The generic
   result-screen two-column grid must not split its heading and workflow into
   separate columns. This screen is a single outer column, matching IG_PX_06. */
#assisted-review-screen.result-screen-panel.active {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.ig-auth-content .generator-layout:has(#assisted-review-screen.active) {
  width: min(1420px, 100%);
}

/* PX_RESULT_SCREEN_TWO_COLUMN_MOCKUP_FIDELITY_001: .result-screen-panel.active
   never defined grid-template-columns, so every child (including the
   sidebar summary/status card) just stacked in a single column — not the
   two-column layout in the Founder-approved mockup (IG_PX_05). .result-
   screen-main/.result-screen-sidebar are the two real columns now; .result-
   hero and .result-screen-nav (outside both wrappers) stay full width. */
.result-screen-main,
.result-screen-sidebar {
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
}

@media (min-width: 900px) {
  .result-screen-panel.active {
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 360px);
    /* PX_RESULT_SCREEN_COLUMN_HEIGHT_PARITY_REPAIR_001: with align-items:
       start (the default), the preview column and the Conferência assistida/
       status column each sized to their own content — reported live as one
       clearly taller than the other. stretch makes both columns match the
       row's tallest content; .result-screen-main/.result-screen-sidebar fill
       that full height (see below) instead of leaving the shorter column's
       card sized to its own content with blank grid track under it. */
    align-items: stretch;
  }

  .result-hero,
  .result-screen-nav {
    grid-column: 1 / -1;
  }

  .result-screen-sidebar .result-summary-card {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

.result-screen-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.result-screen-nav-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* A finalização inteira é a etapa 10. Os quatro estados abaixo são subetapas
   visuais (anúncio, fotos, publicação e conclusão), mantendo o conteúdo no
   mesmo #publication-screen e reutilizando todos os handlers existentes. */
.publication-flow-header {
  grid-column: 1 / -1;
  display: grid;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.publication-flow-header h2,
.publication-flow-header p {
  margin: 0;
}

.publication-flow-header h2 {
  margin-top: 4px;
  color: var(--blue-dark);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
}

#publication-flow-subtitle {
  margin-top: 5px;
  color: var(--muted);
}

.publication-flow-stepper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.publication-flow-stepper::before {
  content: "";
  position: absolute;
  top: 23px;
  right: 10%;
  left: 10%;
  height: 2px;
  background: var(--line);
}

.publication-flow-step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 7px;
  min-height: 78px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--muted);
  text-align: center;
  cursor: pointer;
}

.publication-flow-step-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.publication-flow-step-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.publication-flow-step strong {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.82rem;
}

.publication-flow-step.active {
  color: var(--blue-dark);
}

.publication-flow-step.active .publication-flow-step-icon {
  border-color: #ff7300;
  background: #ff7300;
  color: #fff;
  box-shadow: 0 7px 18px rgba(255, 115, 0, 0.22);
}

.publication-flow-step.completed {
  color: #087443;
}

.publication-flow-step.completed .publication-flow-step-icon {
  border-color: #087443;
  background: #effaf5;
  color: #087443;
}

.publication-flow-step:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.publication-flow-panel.app-screen-hidden,
.publication-flow-sidebar.app-screen-hidden {
  display: none !important;
}

#publication-screen.publication-flow-wide .result-screen-main {
  grid-column: 1 / -1;
}

#publication-screen.publication-flow-wide .result-screen-nav {
  grid-column: 1 / -1;
}

.publication-flow-publishing {
  display: grid;
  gap: 18px;
}

/* Os cartões laterais duplicavam ações que já estão na etapa Publicação.
   Mantê-los no DOM preserva o registro e os handlers, mas elimina o ruído. */
.publication-flow-supporting-card {
  display: none;
}

.publication-optional-panel {
  padding: 0;
  overflow: hidden;
}

.publication-optional-panel > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px;
  color: var(--blue-dark);
  cursor: pointer;
  list-style: none;
}

.publication-optional-panel > summary::-webkit-details-marker {
  display: none;
}

.publication-optional-panel > summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.35rem;
  color: #ff7300;
}

.publication-optional-panel[open] > summary::after {
  content: "−";
}

.publication-optional-panel > summary span:first-child {
  display: grid;
  gap: 3px;
}

.publication-optional-panel > summary small {
  color: var(--muted);
  font-weight: 400;
}

.publication-optional-panel > summary #wealth-summary {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.78rem;
}

.publication-optional-panel > canvas,
.publication-optional-panel > p {
  margin-right: 18px;
  margin-left: 18px;
}

.publication-optional-panel > p {
  margin-bottom: 18px;
}

.publication-completion-card {
  justify-items: center;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid #b8dec9;
  border-radius: 16px;
  background: linear-gradient(180deg, #f4fbf6 0%, #fff 75%);
  text-align: center;
}

.publication-completion-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: #087443;
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
  box-shadow: 0 10px 28px rgba(8, 116, 67, 0.18);
}

.publication-completion-card h2 {
  margin: 4px 0 8px;
  color: var(--blue-dark);
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.publication-completion-card > p:not(.eyebrow) {
  max-width: 660px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.publication-completion-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.publication-completion-page-note {
  margin-top: 14px !important;
  font-size: 0.84rem;
}

@media (max-width: 760px) {
  .publication-flow-stepper {
    gap: 2px;
  }

  .publication-flow-step strong {
    font-size: 0.76rem;
  }

  .publication-flow-step-icon {
    width: 42px;
    height: 42px;
  }

  .publication-flow-stepper::before {
    top: 21px;
  }

  .publication-optional-panel > summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .publication-optional-panel > summary #wealth-summary {
    width: 100%;
    margin-left: 0;
  }
}

.result-hero {
  display: grid;
  gap: 4px;
}

.result-hero h2 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--blue-dark);
}

.result-hero p {
  margin: 0;
  color: var(--muted);
}

.result-summary-card {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.result-summary-card[data-recommendation="APPROVED"] { border-left-color: #087443; }
.result-summary-card[data-recommendation="REVIEW_RECOMMENDED"] { border-left-color: #d97706; }
.result-summary-card[data-recommendation="REGENERATE_RECOMMENDED"] { border-left-color: #b42318; }

.result-summary-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.result-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f4f8f6;
  font-weight: 700;
  flex-shrink: 0;
}

.result-summary-card[data-recommendation="APPROVED"] .result-summary-icon { color: #087443; background: #effaf5; }
.result-summary-card[data-recommendation="REVIEW_RECOMMENDED"] .result-summary-icon { color: #9a5800; background: #fff8e8; }
.result-summary-card[data-recommendation="REGENERATE_RECOMMENDED"] .result-summary-icon { color: #b42318; background: #fdf0ee; }

.result-summary-heading h3 {
  margin: 2px 0 0;
  font-size: 0.98rem;
  color: var(--blue-dark);
}

.result-summary-counts {
  display: flex;
  gap: 24px;
  margin: 14px 0;
}

.result-summary-count-item {
  display: flex;
  flex-direction: column;
}

.result-summary-count-item strong {
  font-size: 1.3rem;
  color: var(--blue-dark);
}

.result-summary-count-item span {
  font-size: 0.8rem;
  color: var(--muted);
}

.link-action {
  border: none;
  background: none;
  padding: 0;
  color: var(--blue-dark);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}

.link-action:hover {
  text-decoration: underline;
}

/* PX_ASSISTED_REVIEW_TRACKER_OVERFLOW_REPAIR_002: the pill version (label
   beside the number, all 5 sharing one row's horizontal space) forced long
   labels like "Verificar consistência" into ellipsis after 2-3 characters
   at normal widths -- reported live as unreadable ("2 Ve...", "3 Id...").
   Redesigned as a real step sequence, closer to the mockup: number circle on
   its own row connected by a horizontal line, label BELOW it and free to
   wrap onto 2 lines within its own column -- full label always readable,
   and still exactly 5 equal columns that never overflow the container. */
.assisted-review-tracker {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.tracker-step {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  position: relative;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

.tracker-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 12px;
  left: calc(50% + 16px);
  width: calc(100% - 32px);
  height: 2px;
  background: var(--line);
  z-index: 0;
}

.tracker-step-label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}

.tracker-step-num {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: 0.76rem;
}

@media (max-width: 720px) {
  .assisted-review-tracker {
    flex-wrap: wrap;
    row-gap: 16px;
  }

  .tracker-step {
    flex: 1 1 calc(33.33% - 4px);
  }

  .tracker-step:nth-child(3)::after {
    display: none;
  }
}

.tracker-step.done {
  color: #087443;
}

.tracker-step.done::after {
  background: #087443;
}

.tracker-step.done .tracker-step-num {
  background: #087443;
  border-color: #087443;
  color: #fff;
}

.tracker-step.active {
  color: #9a5800;
  font-weight: 600;
}

.tracker-step.active .tracker-step-num {
  background: #d97706;
  border-color: #d97706;
  color: #fff;
}

.assisted-review-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  gap: 24px;
  align-items: start;
}

@media (max-width: 860px) {
  .assisted-review-body {
    grid-template-columns: 1fr;
  }
}

.assisted-review-sidebar {
  display: grid;
  gap: 14px;
}

.review-sidebar-block {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.review-sidebar-block h4 {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--blue-dark);
}

.review-sidebar-block p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.review-sidebar-steps {
  margin: 0;
  padding-left: 18px;
  font-size: 0.82rem;
  color: var(--muted);
  display: grid;
  gap: 6px;
}

/* PX_ASSISTED_REVIEW_MOCKUP_FIDELITY_001 (IG_PX_06, Founder-approved) ------ */

.assisted-review-heading {
  margin-bottom: 16px;
}

.assisted-review-heading h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 1.4rem;
  color: var(--blue-dark);
}

.assisted-review-shield {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 20px;
  border: 2px solid #16a34a;
  border-radius: 5px 5px 8px 8px;
  color: #087443;
  transform: translateY(-1px);
}

.assisted-review-shield::after {
  content: "✓";
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}

.assisted-review-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* The old full-fact grid (#beta-safety-panel) stays in the DOM and keeps
   being rendered by FounderBetaRenderer (other code reads it), but the
   mockup shows only the items that actually need attention as rich cards
   below -- never a full checklist of 14 mostly-confirmed facts. */
#assisted-review-screen #beta-safety-panel {
  display: none;
}

.assisted-review-main {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.assisted-review-main .assisted-review-tracker {
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eef1f5;
}

.assisted-review-alert-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 24px;
  border: 1px solid #f3d9a6;
  border-radius: 10px;
  background: #fff8e8;
}

.assisted-review-alert-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.assisted-review-alert-copy {
  flex: 1;
  min-width: 0;
}

.assisted-review-alert-copy strong {
  display: block;
  color: #7a4a00;
  font-size: 0.92rem;
}

.assisted-review-alert-copy p {
  margin: 2px 0 0;
  color: #9a6a1f;
  font-size: 0.84rem;
}

.assisted-review-alert-badge {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: #d97706;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.assisted-review-items-heading {
  margin: 0 0 10px;
  font-size: 1rem;
  color: var(--blue-dark);
}

.assisted-review-items-list {
  display: grid;
  gap: 14px;
}

.assisted-review-items-empty {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.88rem;
  background: #fff;
}

.assisted-review-item-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.assisted-review-item-number {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #d97706;
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
}

.assisted-review-item-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #eef4ff;
  font-size: 1.25rem;
  line-height: 1;
}

.assisted-review-item-body {
  flex: 1;
  min-width: 0;
}

.assisted-review-item-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.assisted-review-item-title-row strong {
  color: var(--blue-dark);
  font-size: 0.95rem;
}

.assisted-review-item-badge {
  padding: 2px 9px;
  border-radius: 999px;
  background: #fff3dc;
  color: #9a5800;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.assisted-review-item-explanation {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: justify;
}

/* PX_ASSISTED_REVIEW_CARD_EXCERPT_PREVIEW_PARITY_001: the quoted trecho
   inside each Conferência Assistida card previously rendered as plain text,
   inconsistent with the exact same sentence shown highlighted (red italic,
   dashed underline) inside the ad preview -- reported live. Visual-only
   copy of .assisted-review-flagged-text's colors/style: this excerpt is
   inside a static card, not the live preview text, so it deliberately
   skips cursor:pointer and the hover background -- there is no click-to-
   edit action to invite here, only the visual identity. */
.assisted-review-item-excerpt {
  color: #c0273a;
  font-style: italic;
  border-bottom: 1px dashed #c0273a;
  border-radius: 2px;
}

/* PX_ASSISTED_REVIEW_CONFIRMED_TEXT_HIGHLIGHT_001: same red -> green switch
   as .assisted-review-flagged-text-confirmed (the identical trecho shown in
   the ad preview), applied here via the card's own already-existing
   accepted-state class -- one card, one accepted flag, two places that
   render it, never a separate confirmed/pending distinction computed twice. */
.assisted-review-item-card-accepted .assisted-review-item-excerpt {
  color: #087443;
  border-bottom-color: #087443;
}

.assisted-review-item-card .assisted-review-item-action {
  flex-shrink: 0;
  align-self: center;
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  white-space: nowrap;
}

.assisted-review-item-card .assisted-review-item-action:hover {
  border-color: var(--blue-dark);
  text-decoration: none;
}

.assisted-review-item-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: center;
}

.assisted-review-item-actions .assisted-review-item-action {
  align-self: stretch;
  justify-content: center;
}

.assisted-review-item-accept {
  border-color: #bfe3cc !important;
  background: #f4fbf6 !important;
  color: #087443 !important;
}

.assisted-review-item-accept:hover {
  border-color: #087443 !important;
}

/* PX_ASSISTED_REVIEW_PER_ITEM_ACCEPT_001: an individually accepted claim
   card stays in the list (never removed) so the user can see what they
   already resolved -- muted/green treatment distinguishes it from the
   still-pending amber cards above without hiding it. */
.assisted-review-item-card-accepted {
  border-color: #bfe3cc;
  background: #f4fbf6;
}

.assisted-review-item-card-accepted .assisted-review-item-badge {
  background: #e1f5e8;
  color: #087443;
}

.assisted-review-info-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: #eef4ff;
  color: #0a1f44;
  font-size: 0.84rem;
}

.review-sidebar-status-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

#assisted-review-screen > .result-screen-nav {
  padding-top: 4px;
}

#assisted-review-to-publication-button {
  margin-left: auto;
}

.review-sidebar-status-heading h4 {
  margin: 0;
}

.review-sidebar-status-pill {
  padding: 2px 9px;
  border-radius: 999px;
  background: #fff3dc;
  color: #9a5800;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.review-sidebar-status-pill:empty {
  display: none;
}

.review-sidebar-status-pill[data-tone="ready"] {
  background: #effaf5;
  color: #087443;
}

.review-sidebar-progress {
  margin-top: 12px;
}

.review-sidebar-progress-heading {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 4px;
}

.review-sidebar-progress-track {
  height: 6px;
  border-radius: 999px;
  background: #eef1f5;
  overflow: hidden;
}

.review-sidebar-progress-track span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #d97706;
  transition: width 0.3s ease;
}

.review-sidebar-note {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f4f8f6;
  font-size: 0.78rem;
}

.review-sidebar-note:empty {
  display: none;
}

/* PX_ASSISTED_REVIEW_COUNT_RELATIONSHIP_CLARITY_001: "itens a revisar" mixes
   two different things (unconfirmed facts + assisted claims), so it can
   legitimately be a different number than "total - confirmados" would
   suggest at a glance -- reported live as looking inconsistent (13/14 next
   to "3 itens a revisar"). Not a bug (verified: 1 missing fact + 2 claims =
   3, math checks out), just unclear without this line. */
.review-sidebar-counts-caption {
  margin: -4px 0 10px;
  font-size: 0.72rem;
  color: var(--muted);
}

.review-sidebar-counts-caption:empty {
  display: none;
}

.review-sidebar-safety-block {
  border-color: #bfe3cc;
  background: #f4fbf6;
}

.review-sidebar-safety-block h4 {
  color: #087443;
}

.assisted-review-item-action {
  display: inline-block;
  margin-top: 8px;
  border: none;
  background: none;
  padding: 0;
  color: var(--blue-dark);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
}

.assisted-review-item-action:hover {
  text-decoration: underline;
}

/* PX_RESULT_SCREEN_TWO_COLUMN_MOCKUP_FIDELITY_001: this element now also
   carries .result-summary-card (same sidebar card styling as #result-screen,
   IG_PX_05) — its own base rule used to set display:flex directly on the
   outer card, which fought .result-summary-card's block layout (the flex
   row now belongs to the inner .result-summary-heading instead). Only the
   recommendation-color variants stay here; layout/spacing come from
   .result-summary-card. */
.publication-status-banner[data-recommendation="APPROVED"] { border-left-color: #087443; }
.publication-status-banner[data-recommendation="REVIEW_RECOMMENDED"] { border-left-color: #d97706; }
.publication-status-banner[data-recommendation="REGENERATE_RECOMMENDED"] { border-left-color: #b42318; }

.publication-status-banner[data-recommendation="APPROVED"] .result-summary-icon { color: #087443; background: #effaf5; }
.publication-status-banner[data-recommendation="REVIEW_RECOMMENDED"] .result-summary-icon { color: #9a5800; background: #fff8e8; }
.publication-status-banner[data-recommendation="REGENERATE_RECOMMENDED"] .result-summary-icon { color: #b42318; background: #fdf0ee; }

.publication-status-banner h3 {
  margin: 2px 0 0;
  font-size: 1rem;
  color: var(--blue-dark);
}

.publication-export-heading {
  margin: 4px 0 0;
  font-size: 0.92rem;
  color: var(--blue-dark);
}

.publication-export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.publication-export-card {
  display: grid;
  gap: 4px;
  justify-items: start;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.publication-export-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08);
}

.publication-export-icon {
  font-size: 1.3rem;
  display: inline-flex;
}

.publication-export-icon svg {
  display: block;
}

.publication-export-card strong {
  color: var(--blue-dark);
  font-size: 0.9rem;
}

.publication-export-card span:last-child {
  font-size: 0.78rem;
  color: var(--muted);
}

.publication-quick-tip {
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f4f8f6;
  font-size: 0.85rem;
  color: var(--muted);
}

/* PX_PUBLICATION_SCREEN_MOCKUP_FIDELITY_001 (IG_PX_07, Founder-approved) --- */

.publication-hero-badge {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.publication-hero-badge:empty {
  display: none;
}

.publication-hero-badge[data-recommendation="APPROVED"] {
  background: #effaf5;
  color: #087443;
}

.publication-hero-badge[data-recommendation="REVIEW_RECOMMENDED"] {
  background: #fff8e8;
  color: #9a5800;
}

.publication-hero-badge[data-recommendation="REGENERATE_RECOMMENDED"] {
  background: #fdf0ee;
  color: #b42318;
}

.publication-export-subheading {
  margin: -8px 0 4px;
  font-size: 0.82rem;
  color: var(--muted);
}

.publication-status-meta {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.publication-status-meta div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
}

.publication-status-meta dt {
  color: var(--muted);
}

.publication-status-meta dd {
  margin: 0;
  color: var(--blue-dark);
  font-weight: 600;
}

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

.publication-channels-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.6;
}

.publication-channel-icon {
  flex-shrink: 0;
  font-size: 1.1rem;
}

.publication-channels-list li > div {
  flex: 1;
  min-width: 0;
}

.publication-channels-list strong {
  display: block;
  font-size: 0.85rem;
  color: var(--blue-dark);
}

.publication-channels-list span:not(.publication-channel-soon) {
  font-size: 0.76rem;
  color: var(--muted);
}

.publication-channel-soon {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef1f5;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

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

.publication-activity-empty {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.publication-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.publication-activity-icon {
  flex-shrink: 0;
  color: #087443;
  font-size: 0.9rem;
  margin-top: 1px;
}

.publication-activity-item strong {
  display: block;
  font-size: 0.83rem;
  color: var(--blue-dark);
}

.publication-activity-item span {
  font-size: 0.74rem;
  color: var(--muted);
}

.publication-tip-block {
  border-color: #bfe3cc;
  background: #f4fbf6;
}

.publication-tip-block h4 {
  color: #087443;
}

/* PX_RESULTADO_PANEL_MIGRATION_001: #resultado's real content (description/
   edit, photos, wealth chart, "Estrutura do anúncio") now lives in
   #result-screen/#publication-screen — see KIB-014. Nothing toggles this
   element's visibility in script.js, so a static rule is safe. */
#resultado {
  display: none;
}

/* Set on #result-screen while one of the 3 block/error states that use
   #generated-description/#structured-ad as their primary UI is active
   (renderCriticalInconsistencyAssistedPreview/renderQualityBlockedPreview/
   renderCanonicalSafePublicationPreview) — hides the toolbar/print-stage
   above so the user isn't shown an empty or stale preview next to an active
   block. Removed again by showPublicationViewer on the next real generation. */
.result-screen-blocked .publication-toolbar,
.result-screen-blocked .publication-stage,
.result-screen-blocked .result-content-card,
.result-screen-blocked #result-summary-card,
/* PX_RESULT_HERO_BLOCKED_STATE_REPAIR_001: .result-hero's static "Seu
   anúncio está pronto! 🎉" was never added to this list, so a real hard
   block still showed the celebration heading directly above the "Revisão
   necessária" panel -- reported live as a direct contradiction on screen.
   The block panel already carries its own heading (h3), so hiding this is
   the same pattern already used for every other normal-state element here. */
.result-screen-blocked .result-hero {
  display: none;
}

/* PX_RESULT_SCREEN_LEGACY_PREVIEW_DUPLICATION_REPAIR_001: on the normal
   (unblocked) happy path, #result-screen was showing FOUR overlapping
   representations of the same ad stacked on top of each other — the old
   single-screen "Visualização de impressão / Prévia de Publicação" print
   toolbar+stage, .result-content-card's own "Descrição otimizada" text,
   the "Estrutura do anúncio" placeholder card, and (only then) the actual
   Fase 7b "Conferência assistida" summary this screen was rebuilt around.
   That's what made the screen ~5200px tall and confusingly redundant,
   reported live. The toolbar/print-stage are legacy — result-content-card
   already shows the readable text — and .structured-ad only has real
   content to show during a hard-block (renderCriticalInconsistencyAssisted
   Preview/renderQualityBlockedPreview/renderCanonicalSafePublicationPreview,
   which repopulate it and rely on .result-screen-blocked being set), so it
   stays hidden outside that state instead of showing its empty placeholder
   next to the summary card. */
#result-screen .publication-toolbar,
#result-screen .publication-stage,
#result-screen .structured-ad {
  display: none;
}

#result-screen.result-screen-blocked .structured-ad {
  display: block;
}

/* FOUNDER_BETA_MULTI_STYLE_RESULT_ACCESSIBILITY_CLOSURE_001: the rule above
   only accounted for the 3 block-state renderers -- renderMultiVersionResults
   (the real "Gerar todos os estilos" comparison panel) also writes genuine
   content into .structured-ad on the normal, unblocked path, but nothing
   revealed it, so the 5 style cards/vary buttons existed in the DOM with no
   way for the user to reach them. .comparison-panel is the marker
   renderMultiVersionResults already adds (and every other render path --
   single-style, block states, error/reset states -- already removes before
   writing its own content, confirmed by inspection), so it never coincides
   with a hard block. Higher specificity than the base rule above (2 classes
   vs 1), no !important needed. */
#result-screen .structured-ad.comparison-panel {
  display: block;
}

/* PX_RESULT_SCREEN_DIAGNOSIS_PANEL_DUPLICATION_REPAIR_001: renderEditable
   PublicationPreview also unhides #publication-diagnosis-panel (a full-width
   "Conferência assistida / Recomendações" block) inside .result-content-card
   whenever there's a non-blocking recommendation -- duplicating, in full
   detail, what #result-summary-card already shows condensed in the sidebar.
   Reported live: "a conferência assistida... não há necessidade de aparecer
   na lateral direita e abaixo da preview". Kept working normally (still
   visible) during an actual hard block, where .result-screen-blocked hides
   the sidebar/main-card entirely and this becomes part of the real block
   explanation instead of a duplicate. #edit-publication-button (the
   diagnosis panel's own "Editar anúncio" trigger, no icon) is suppressed the
   same way -- #result-hero-copy-button/nav's "✏️ Editar anúncio" already
   proxies to this exact same button via .click(), so the action still works,
   just without a second, unlabelled trigger sitting next to it. */
#result-screen:not(.result-screen-blocked) #publication-diagnosis-panel,
#result-screen #edit-publication-button {
  display: none !important;
}

/* PX_RESULT_SCREEN_EMPTY_HIGHLIGHT_NOTE_REPAIR_001: #publication-status-
   message shows a static "Confira os pontos destacados antes de continuar."
   whenever status is ASSISTED_REVIEW, regardless of whether the (now
   hidden) diagnosis panel actually had anything to point to -- a vague
   pointer to an explanation that no longer renders here. Reported live:
   "caso não tenha [pontos destacados], não há que informar nada." The
   sidebar (#result-summary-card) is this screen's one real review-status
   signal now. */
#result-screen #publication-status-message {
  display: none !important;
}

/* PX_RESULTADO_PANEL_MIGRATION_001: the card look these sections had inside
   the old #resultado came from ".result-preview section" (padding/border/
   background) — that wrapper wasn't moved along with them, so it's
   reapplied directly here. */
.result-content-card,
.photo-result-section,
.platform-ready,
.wealth-section,
.structured-ad {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

#publication-ad-text-preview {
  margin: 0;
  color: #2f3b38;
  line-height: 1.72;
  white-space: pre-wrap;
  text-align: justify;
}

/* PX_PUBLICATION_SCREEN_MOCKUP_ALIGNMENT_REPAIR_001 originally hid "Fotos
   tratadas para anúncio" and "Evolução patrimonial da região" here too
   (legacy content carried over during the KIB-014 migration, not part of
   the approved mockup at the time) -- the Founder has since asked
   explicitly for both back on this screen, reported live as missing from
   the final ad/report. "Pacote pronto para plataformas" stays hidden
   (unchanged, not part of this request). */
#publication-screen .platform-ready {
  display: none;
}

.form-review-summary {
  display: grid;
  gap: 18px;
}

.review-card {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.review-card h4 {
  margin: 0 0 12px;
  color: var(--blue-dark);
  font-size: 0.92rem;
}

.review-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.review-card-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.review-card-edit-button {
  padding: 7px 16px;
  font-size: 0.84rem;
}

.form-review-summary-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 11px;
  border-radius: 6px;
  background: #f4f8f6;
  font-size: 0.86rem;
}

.form-review-summary-item strong {
  color: var(--blue-dark);
}

/* PX_REVIEW_AD_STYLE_BADGE_001: orange (the app's own accent/emphasis
   color), never red -- red already means error/blocked everywhere else in
   this app. */
.review-ad-style-badge {
  padding: 2px 10px;
  border-radius: 100px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 0.82rem;
  white-space: nowrap;
}

.review-card-patrimonial {
  border-color: rgba(255, 111, 0, 0.35);
  background: linear-gradient(135deg, #fff 0%, #fffaf3 100%);
}

.review-card-patrimonial .patrimonial-base-information strong,
.review-card-patrimonial .patrimonial-base-information span {
  color: #b54700;
  font-weight: 700;
}

.form-review-patrimonial-disclaimer {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.form-review-summary-empty {
  color: var(--muted);
  font-size: 0.85rem;
}

.quick-actions.form-step-cta-hidden {
  display: none;
}

.form-step-empty-note {
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f4f5f7;
  color: var(--muted);
  font-size: 0.86rem;
}
/* PX_DESCRICAO_COMPLEMENTAR_CHIPS_001 ------------------------------------- */
.chip-select-field {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.chip-select-label {
  margin: 0;
  font-weight: 600;
  color: var(--blue-dark);
  font-size: 0.92rem;
}

/* PX_STEP5_PROPERTY_TYPE_CONTEXT_NOTE_001: reminds the user which property
   type they're describing on this step (chosen back in Etapa 1), since some
   chip options here don't apply equally to every type. */
.form-step-context-note {
  margin: -6px 0 4px;
  color: var(--muted);
  font-size: 0.84rem;
}

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

.chip-option {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip-option:hover {
  border-color: var(--blue-dark);
}

.chip-option.selected {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: #fff;
}

.chip-freeform-label {
  font-size: 0.86rem;
  color: var(--muted);
}
/* end PX_DESCRICAO_COMPLEMENTAR_CHIPS_001 ---------------------------------- */

/* end PX_FORM_STEPPER_001 ------------------------------------------------- */

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

.paste-extra-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(10, 31, 68, 0.1);
  border-radius: 8px;
  background: #fff;
}

.paste-extra-panel h3 {
  margin: 4px 0 0;
  color: var(--blue-dark);
}

.paste-meta,
.paste-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.paste-meta {
  justify-content: space-between;
  margin-top: -8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.paste-meta span {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0, 87, 255, 0.07);
}

.paste-actions {
  padding-top: 2px;
  justify-content: space-between;
}

.editorial-style-control {
  margin: 16px 0 18px;
  padding: 14px;
  border: 1px solid rgba(0, 87, 255, 0.16);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.generation-mode-control {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.generation-mode-control legend {
  padding: 0 6px;
  color: var(--blue-dark);
  font-weight: 800;
}

.generation-mode-control label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.generation-mode-control input {
  width: auto;
  min-height: auto;
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -4px 0 18px;
  align-items: center;
  /* PX_QUICK_ACTIONS_ORDER_AND_ALIGNMENT_001: right-aligned to match every
     other step's Voltar/Continuar row -- previously only the paste-mode
     variant below set this explicitly, leaving manual mode's default
     (left-aligned) as the odd one out. */
  justify-content: flex-end;
}

.quick-actions[data-active-mode="paste"] {
  margin: 4px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

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

/* Keep native selects from stretching to the tallest label in a grid row. */
.form-step .form-grid select {
  height: 48px;
  align-self: start;
}

label,
.radio-group {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
}

.field-status {
  min-height: 18px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
}

.field-status.success {
  color: #087443;
}

.field-status.error {
  color: #b42318;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

input,
select {
  min-height: 48px;
  padding: 0 14px;
}

textarea {
  resize: vertical;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 14px;
  line-height: 1.5;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(0, 87, 255, 0.16);
  border-color: var(--blue);
}

.radio-group {
  grid-template-columns: auto auto 1fr;
  align-items: center;
  width: fit-content;
  min-width: min(100%, 360px);
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.radio-group legend {
  padding: 0 6px;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.radio-group input {
  width: auto;
  min-height: auto;
}

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

.valuation-input {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
}

.valuation-input p:not(.eyebrow) {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.valuation-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.valuation-actions span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.patrimonial-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.patrimonial-choice label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid rgba(0, 87, 255, 0.16);
  border-radius: 8px;
  background: #fff;
  color: var(--blue-dark);
  font-weight: 800;
  cursor: pointer;
}

.patrimonial-choice input {
  width: auto;
  min-height: auto;
  margin: 0;
}

.patrimonial-user-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(0, 87, 255, 0.12);
  border-radius: 8px;
  background: #fff;
}

.patrimonial-user-inputs.hidden,
#paste-patrimonial-user-inputs.hidden {
  display: none;
}

.patrimonial-user-inputs .valuation-actions {
  grid-column: 1 / -1;
}

.input-with-suffix {
  display: flex;
  align-items: center;
  gap: 8px;
}

.input-with-suffix input {
  flex: 1;
}

.input-with-suffix > span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
}

.valuation-grid {
  display: none;
  gap: 12px;
}

.valuation-grid label {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(220px, 1fr);
  align-items: center;
  gap: 10px 14px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 87, 255, 0.1);
  border-radius: 8px;
  background: #fff;
}

.valuation-grid.open {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-content: start;
  width: 100%;
  max-height: 100vh;
  padding: 24px;
  overflow: auto;
  background: rgba(10, 31, 68, 0.58);
  backdrop-filter: blur(12px);
}

.valuation-grid.open .patrimonial-modal-header,
.valuation-grid.open label,
.valuation-grid .patrimonial-modal-actions {
  width: min(900px, 100%);
  margin: 0 auto;
}

.patrimonial-modal-header {
  display: none;
}

.valuation-grid.open .patrimonial-modal-header {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  margin-top: 12px;
  padding: 20px 24px;
  border-bottom: 4px solid var(--orange);
  border-radius: 12px 12px 8px 8px;
  background: var(--blue-dark);
  box-shadow: 0 18px 44px rgba(4, 24, 58, 0.18);
}

.patrimonial-modal-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.22);
}

.patrimonial-modal-brand img {
  width: 72px;
  height: 52px;
  object-fit: contain;
}

.patrimonial-modal-brand div {
  display: grid;
  gap: 2px;
  color: #fff;
}

.patrimonial-modal-brand strong {
  font-size: 1rem;
}

.patrimonial-modal-brand span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
}

.patrimonial-modal-heading .eyebrow {
  margin: 0 0 3px;
  color: var(--orange);
}

.patrimonial-modal-heading h2 {
  margin: 0;
  color: #fff;
  font-size: 1.35rem;
}

.patrimonial-modal-heading p:last-child {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.86rem;
}

.patrimonial-modal-close {
  width: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
}

.valuation-grid .patrimonial-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 26px 18px;
  border: 1px solid rgba(0, 87, 255, 0.1);
  border-width: 1px;
  border-radius: 8px 8px 12px 12px;
  background: #fff;
}

.valuation-grid .patrimonial-modal-actions > span {
  margin-right: auto;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.valuation-grid select,
.valuation-grid input {
  min-width: 0;
}

.patrimonial-paste-note {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .patrimonial-user-inputs {
    grid-template-columns: 1fr;
  }

  .patrimonial-user-inputs .valuation-actions {
    grid-column: auto;
  }

  .valuation-grid.open {
    padding: 12px;
  }

  .valuation-grid.open .patrimonial-modal-header {
    grid-template-columns: 1fr auto;
  }

  .patrimonial-modal-brand {
    grid-column: 1 / -1;
    padding: 0 0 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .valuation-grid.open label {
    grid-template-columns: 1fr;
  }
}

.valuation-row-title {
  color: var(--blue-dark);
  font-size: 0.82rem;
  font-weight: 900;
}

.module-launch-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(0, 87, 255, 0.12);
  border-radius: 8px;
  background: #fff;
}

.module-launch-card strong {
  color: var(--blue-dark);
  font-weight: 900;
}

.module-launch-card span {
  flex: 1;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* FOUNDER_BETA_SINGLE_TXT_IMPORT_001 */
.import-txt-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.import-txt-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.upload-box {
  padding: 18px;
  border: 1px dashed rgba(0, 87, 255, 0.42);
  border-radius: 8px;
  background: var(--surface-soft);
}

.upload-box input {
  min-height: auto;
  padding: 0;
  border: 0;
}

.upload-box span {
  font-weight: 800;
}

.upload-box small {
  color: var(--muted);
  font-weight: 500;
}

.photo-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.photo-thumb {
  /* PX_PHOTO_THUMB_FIGURE_MARGIN_OVERFLOW_REPAIR_001: reported live -- the
     last thumbnail in each row spilled past the grid card's right edge.
     .photo-thumb is a <figure> element, and every browser's default
     stylesheet gives <figure> a margin (historically 1em 40px) that nothing
     here ever reset -- each thumb was rendering 40px further right than its
     own grid cell, so a row sized to fit N columns flush overflowed by
     exactly that 40px on the last one. */
  margin: 0;
  width: 100%;
  /* PX_PHOTO_ENHANCE_BUTTON_OVERLAP_REPAIR_001: reported live -- "Melhorar
     com IA" used to be position:absolute directly over the photo (unreadable
     against a busy image). The figure is now a plain flex column: the photo
     itself (with its own overlay caption/remove button) lives in
     .photo-thumb-media below, and the category select / enhance button are
     normal-flow rows underneath it -- they can never overlap the image. */
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.photo-thumb-media {
  position: relative;
  overflow: hidden;
  /* PX_PHOTO_THUMB_GRID_COLLAPSE_REPAIR_002: an aspect-ratio box with no
     explicit width, sitting in an auto-sized grid track, doesn't reliably
     stretch to that track's width on its own (Chrome falls back to a much
     smaller intrinsic size) -- explicit width:100% here (inherited from the
     already-corrected .photo-thumb width above) keeps that fix intact under
     the new nested structure. */
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #dfe6e3;
}

.photo-thumb-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.photo-thumb-media span {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  overflow: hidden;
  padding: 4px 6px;
  border-radius: 6px;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(10, 31, 68, 0.84);
}

.photo-remove-button {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  background: rgba(10, 31, 68, 0.82);
  cursor: pointer;
}

.photo-enhance-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(15, 74, 61, 0.86);
  cursor: pointer;
}

.photo-enhance-button:disabled {
  cursor: default;
  opacity: 0.85;
}

.photo-enhance-button.is-enhanced {
  background: rgba(15, 74, 61, 0.55);
}

.photo-result-add-button {
  display: inline-flex;
  width: fit-content;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 10px 22px rgba(255, 106, 0, 0.2);
  font-weight: 800;
  cursor: pointer;
}

.photo-result-add-button:hover {
  background: var(--accent-dark);
}

.photo-result-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.photo-result-video-button {
  gap: 8px;
}

.photo-result-video-status {
  margin: 10px 0 0;
}

/* PX_LISTING_VIDEO_PERSISTENCE_AND_ACTIONS_001 */
.video-result-card {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.video-result-card.hidden {
  display: none;
}

#video-result-player {
  width: 220px;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  background: #000;
}

.video-result-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 160px;
}

.photo-category-select {
  width: 100%;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: #fff;
  font-size: 0.76rem;
  font-weight: 700;
}

.photo-processing {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--blue-dark);
  font-size: 0.78rem;
  font-weight: 800;
  background: rgba(0, 87, 255, 0.1);
}

.result-toolbar {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
}

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

.result-preview {
  display: grid;
  gap: 14px;
}

.result-panel[data-generation-state="recoverable-error"] .beta-safety-panel,
.result-panel[data-generation-state="unavailable"] .beta-safety-panel,
.result-panel[data-generation-state="recoverable-error"] .result-preview,
.result-panel[data-generation-state="unavailable"] .result-preview {
  display: none;
}

.result-panel[data-generation-state="blocked-version"] .beta-safety-panel,
.result-panel[data-generation-state="safe-alternative"] .beta-safety-panel,
.result-panel[data-generation-state="blocked-version"] .result-preview > section:not(.structured-ad),
.result-panel[data-generation-state="safe-alternative"] .result-preview > section:not(.structured-ad) {
  display: none;
}

.result-panel[data-generation-state="blocked-version"] .structured-ad,
.result-panel[data-generation-state="safe-alternative"] .structured-ad {
  display: grid;
}

.result-panel[data-generation-state="blocked-version"] .result-toolbar > div:first-child {
  display: none;
}

.result-panel[data-generation-state="blocked-version"],
.result-panel[data-generation-state="safe-alternative"] {
  position: static;
  align-self: start;
}

/* PX_QUALITY_BLOCK_VISUAL_REFRESH_001: reported live as "aquela velha
   telinha medíocre" -- this card predated the Founder Beta visual system
   (Resultado/Conferência Assistida/Publicação) and still used a bespoke
   flat amber palette (#fffbeb/#b45309/#78350f) instead of the app's real
   tokens. Restyled onto the same tokens/shape as .assisted-review-item-card
   (white surface, var(--line) border, var(--blue-dark) headings, circular
   icon badge, var(--surface-soft) chips) -- reused, not reinvented. */
.review-guidance-card {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.review-guidance-card h3,
.review-guidance-card p {
  margin: 0;
}

.review-guidance-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--blue-dark);
  font-size: 1.15rem;
}

.review-guidance-card h3::before {
  content: "⚠️";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff3dc;
  font-size: 1.05rem;
  line-height: 1;
}

.review-guidance-facts {
  display: grid;
  gap: 8px;
  margin: 0;
}

.review-guidance-facts > div {
  display: grid;
  grid-template-columns: minmax(112px, 0.42fr) minmax(0, 1fr);
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-soft);
}

.review-guidance-facts dt {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.review-guidance-facts dd {
  margin: 0;
  color: var(--blue-dark);
  font-weight: 700;
}

.review-guidance-explanation {
  color: #3a4658;
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: justify;
}

.review-guidance-orientation {
  padding: 12px 14px;
  border-radius: 8px;
  border-left: 3px solid var(--accent);
  background: var(--surface-soft);
  color: #3a4658;
  font-size: 0.92rem;
  line-height: 1.4;
  text-align: justify;
}

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

.critical-inconsistency-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.critical-inconsistency-actions .button {
  min-height: 42px;
  padding: 10px 12px;
  font-size: 0.88rem;
}

.critical-inconsistency-review {
  max-height: 112px;
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid rgba(180, 83, 9, 0.18);
  border-radius: 8px;
  color: #4a321e;
  background: #fff;
  font-size: 0.9rem;
  line-height: 1.42;
  white-space: pre-wrap;
}

.beta-safety-panel {
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(0, 87, 255, 0.18);
  border-left: 5px solid var(--blue);
  border-radius: 12px;
  background: linear-gradient(145deg, #fff, #f7faff);
  box-shadow: 0 12px 30px rgba(10, 31, 68, 0.08);
}

.beta-safety-panel[data-recommendation="APPROVED"] { border-left-color: #087443; }
.beta-safety-panel[data-recommendation="REVIEW_RECOMMENDED"] { border-left-color: #d97706; }
.beta-safety-panel[data-recommendation="REGENERATE_RECOMMENDED"] { border-left-color: #b42318; }

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

.beta-safety-heading h3,
.beta-safety-heading p,
.beta-safety-recommendation {
  margin: 0;
}

.beta-safety-heading h3 { color: var(--blue-dark); font-size: 1.05rem; }
.beta-safety-heading div > span { display:block; margin-top: 5px; color: var(--muted); font-size: 0.8rem; line-height: 1.45; }

.beta-safety-heading > strong {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--blue-dark);
  background: rgba(0, 87, 255, 0.09);
  font-size: 0.78rem;
}

.beta-safety-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.beta-safety-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f4f8f6;
  font-size: 0.82rem;
}

.beta-safety-item-detail {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 0.76rem;
  font-weight: 400;
  color: #5b4a2a;
  line-height: 1.4;
}

.beta-safety-item[data-status="preserved"] span { color: #087443; font-weight: 800; }
.beta-safety-item[data-status="missing"] { border-color: #f4c36a; background: #fff8e8; }
.beta-safety-item[data-status="missing"] span { color: #9a5800; font-weight: 800; }
.beta-safety-item[data-status="unknown"] { color: #66716e; background: #f4f5f7; }
.beta-safety-item[data-status="contradicted"] { border-color: #f1a9a0; background: #fdf0ee; }
.beta-safety-item[data-status="contradicted"] span { color: #b42318; font-weight: 800; }
.beta-safety-recommendation {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--blue-dark);
  background: rgba(0, 87, 255, 0.07);
  font-weight: 900;
}
.beta-safety-recommendation::before {
  flex: 0 0 auto;
  font-weight: 900;
}
.beta-safety-panel[data-recommendation="APPROVED"] .beta-safety-recommendation { color: #087443; background: #effaf5; }
.beta-safety-panel[data-recommendation="APPROVED"] .beta-safety-recommendation::before { content: "✓"; }
.beta-safety-panel[data-recommendation="REVIEW_RECOMMENDED"] .beta-safety-recommendation { color: #9a5800; background: #fff8e8; }
.beta-safety-panel[data-recommendation="REVIEW_RECOMMENDED"] .beta-safety-recommendation::before { content: "!"; }
.beta-safety-panel[data-recommendation="REGENERATE_RECOMMENDED"] .beta-safety-recommendation { color: #b42318; background: #fdf0ee; }
.beta-safety-panel[data-recommendation="REGENERATE_RECOMMENDED"] .beta-safety-recommendation::before { content: "⟳"; }
.beta-safety-empty { color: #66716e; font-size: 0.85rem; }
.beta-safety-claims:empty { display: none; }
.beta-safety-claims { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.beta-safety-claims-title { margin: 0 0 8px; font-size: 0.85rem; font-weight: 900; color: #9a5800; }
.beta-safety-claims-list { display: flex; flex-direction: column; gap: 8px; }
.beta-safety-claim-item {
  border: 1px solid #f4c36a;
  background: #fff8e8;
  border-radius: 8px;
  padding: 10px 11px;
  font-size: 0.82rem;
}
.beta-safety-claim-item strong { display: block; color: #9a5800; }
.beta-safety-claim-item p { margin: 4px 0 0; color: #5b4a2a; line-height: 1.4; text-align: justify; }
.beta-safety-claim-item .beta-safety-claim-status { display: block; margin-top: 4px; font-size: 0.76rem; color: #7a6a48; font-style: italic; }

/* CONDOMINIUM_CONFIRMATION_INLINE_DISCLOSURE_AND_HUMANIZED_FEEDBACK_001:
   #beta-safety-checklist is a CSS grid (.beta-safety-grid); the review panel
   and its post-answer feedback are inserted as siblings of the clicked card
   inside that same grid, so they must span every column to read as one
   continuous block directly beneath the card instead of being squeezed into
   its narrow ~180px column. */
.condominium-review-panel,
.condominium-review-feedback {
  grid-column: 1 / -1;
}
.beta-safety-item.is-condominium-review-active {
  border-color: var(--blue);
  background: #eef4ff;
}
.condominium-review-panel {
  margin-top: 2px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 87, 255, 0.25);
  border-radius: 10px;
  background: #f2f6ff;
}
.condominium-review-active-indicator {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(0, 87, 255, 0.12);
  color: var(--blue-dark);
  font-size: 0.72rem;
  font-weight: 800;
}
.condominium-review-heading {
  margin: 0 0 6px;
  font-size: 0.92rem;
  color: var(--blue-dark);
}
.condominium-review-explanation,
.condominium-review-question,
.condominium-review-summary {
  margin: 0 0 10px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted);
}
.condominium-review-question { font-weight: 800; color: var(--blue-dark); }
.condominium-review-options { display: flex; flex-direction: column; gap: 8px; }
.condominium-review-other-name-field { margin-top: 10px; }
.condominium-review-other-name-field.hidden { display: none; }
.condominium-review-feedback {
  margin-top: 2px;
  padding: 12px 14px;
  border: 1px solid rgba(8, 116, 67, 0.3);
  border-radius: 10px;
  background: #f3fbf6;
  font-size: 0.85rem;
  color: #0a3d2b;
}
.condominium-review-feedback strong { display: block; margin-bottom: 4px; color: #087443; }
.condominium-review-feedback p { margin: 0; line-height: 1.4; }

/* PX_GENERATION_FEEDBACK_VALIDATION_LAYOUT_REPAIR_001: reported live -- a
   validation block ("Revise os campos destacados para continuar." + the
   actual message) rendered as two floating halves side by side instead of
   a title stacked above its message. This flex row was built for the
   spinner + short status case (script.js:614, icon and <strong> sitting on
   one line) but was unscoped, so it also caught the title+message shape
   (<strong>Title</strong>MessageText — an anonymous flex item each,
   forced onto the same row by align-items:center) used by the validation
   and safe-publication states. Excluded here; those keep the default block
   stacking .generation-feedback strong already sets up below. */
.generation-feedback:not(.hidden):not(.commercial-reasoning-experience):not(.generation-feedback-validation):not(.generation-feedback-safe-publication) {
  display: flex;
  align-items: center;
  gap: 10px;
}

.generation-spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 2px solid rgba(0, 87, 255, 0.2);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: generationSpin 0.8s linear infinite;
}

@keyframes generationSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .generation-spinner { animation-duration: 1.8s; }
}

/* IG_PX_PROCESSING_BRAND_ICON_ANIMATION_001: wrapper injected by script.js
   around the fallback spinner in both #generation-feedback visual modes; the
   canonical SVG (assets/imobgenius-processing-icon.svg) is cloned into it in
   place of the fallback once loaded. Sized here per visual mode — the SVG
   itself is never duplicated or redesigned in this file. */
.generation-brand-icon {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}

.generation-brand-icon-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.commercial-reasoning-main .generation-brand-icon {
  width: 64px;
  height: 64px;
}

.generation-brand-icon[data-visual-state="processing"] .generation-brand-icon-svg {
  animation: ig-brand-icon-pulse 1.6s ease-in-out infinite;
  transform-origin: center;
}

.generation-brand-icon[data-visual-state="processing"] .generation-brand-icon-svg #ig-circuits-orange {
  animation: ig-circuit-glow-orange 1.6s ease-in-out infinite;
  transform-origin: center;
}

.generation-brand-icon[data-visual-state="processing"] .generation-brand-icon-svg #ig-circuits-blue {
  animation: ig-circuit-glow-blue 1.6s ease-in-out infinite;
  transform-origin: center;
}

.generation-brand-icon[data-visual-state="completed"] .generation-brand-icon-svg {
  animation: ig-brand-icon-complete-glow 0.26s ease-out 1;
}

@keyframes ig-brand-icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes ig-circuit-glow-orange {
  0%, 100% { opacity: 0.55; filter: drop-shadow(0 0 0 rgba(255, 138, 46, 0)); }
  35% { opacity: 1; filter: drop-shadow(0 0 3px rgba(255, 138, 46, 0.85)); }
  70% { opacity: 0.75; filter: drop-shadow(0 0 1px rgba(255, 138, 46, 0.4)); }
}

@keyframes ig-circuit-glow-blue {
  0%, 45% { opacity: 0.55; filter: drop-shadow(0 0 0 rgba(47, 155, 255, 0)); }
  65% { opacity: 1; filter: drop-shadow(0 0 3px rgba(47, 155, 255, 0.85)); }
  100% { opacity: 0.75; filter: drop-shadow(0 0 1px rgba(47, 155, 255, 0.4)); }
}

@keyframes ig-brand-icon-complete-glow {
  0% { transform: scale(1.02); filter: drop-shadow(0 0 0 rgba(160, 205, 255, 0)); }
  40% { transform: scale(1.05); filter: drop-shadow(0 0 6px rgba(160, 205, 255, 0.9)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(160, 205, 255, 0)); }
}

@media (prefers-reduced-motion: reduce) {
  .generation-brand-icon[data-visual-state="processing"] .generation-brand-icon-svg,
  .generation-brand-icon[data-visual-state="processing"] .generation-brand-icon-svg #ig-circuits-orange,
  .generation-brand-icon[data-visual-state="processing"] .generation-brand-icon-svg #ig-circuits-blue,
  .generation-brand-icon[data-visual-state="completed"] .generation-brand-icon-svg {
    animation: none;
  }
}

@media (max-width: 1180px) and (min-width: 981px) {
  .generator-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr); gap: 14px; }
  .form-panel, .result-panel { padding: 22px; }
}

.result-preview section {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.ad-block p {
  white-space: pre-line;
}

.section-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.section-title-row h3 {
  margin: 0;
}

.section-title-row span {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(0, 87, 255, 0.1);
}

#generated-description {
  margin: 0;
  color: #2f3b38;
  line-height: 1.72;
  white-space: pre-wrap;
  text-align: justify;
  max-height: 560px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: 6px;
}

.generated-description-title {
  display: block;
  color: var(--blue-dark);
  font-weight: 700;
}

/* PX_ASSISTED_REVIEW_INLINE_TEXT_HIGHLIGHT_001: marks, directly inside the ad
   preview text, the exact trecho each pending Conferência Assistida
   card is about — so the user sees IN CONTEXT what needs revising, not only
   in the separate cards list below. */
.assisted-review-flagged-text {
  color: #c0273a;
  font-style: italic;
  cursor: pointer;
  border-bottom: 1px dashed #c0273a;
  border-radius: 2px;
}

.assisted-review-flagged-text:hover,
.assisted-review-flagged-text.active {
  background: rgba(192, 39, 58, 0.1);
}

/* PX_ASSISTED_REVIEW_CONFIRMED_TEXT_HIGHLIGHT_001: once the user reviews and
   confirms a trecho, it switches from red (needs attention) to green
   (reviewed and approved) instead of losing its mark entirely -- reported
   live as feeling like the confirmation "disappeared". Reuses the same
   success green already established elsewhere in this file (e.g.
   .beta-safety-item[data-status="preserved"], #087443) rather than
   introducing a new color for the same meaning. */
.assisted-review-flagged-text-confirmed {
  color: #087443;
  border-bottom-color: #087443;
}

.assisted-review-flagged-text-confirmed:hover,
.assisted-review-flagged-text-confirmed.active {
  background: rgba(8, 116, 67, 0.1);
}

/* PX_ASSISTED_REVIEW_INLINE_TEXT_ACTIONS_001: a small non-floating action
   row inserted right after the clicked trecho, inline with the text flow --
   no absolute positioning to get wrong on narrow screens. */
.assisted-review-inline-actions {
  display: inline-flex;
  gap: 6px;
  margin: 0 4px;
  vertical-align: middle;
}

.assisted-review-inline-actions button {
  font-style: normal;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.assisted-review-inline-action-accept {
  color: #087443;
  border-color: #087443;
}

.assisted-review-inline-action-accept:hover {
  background: rgba(8, 116, 67, 0.08);
}

.assisted-review-inline-action-edit {
  color: var(--blue-dark);
}

.assisted-review-inline-action-edit:hover {
  background: rgba(0, 87, 255, 0.06);
}

.structured-ad {
  display: grid;
  gap: 20px;
  line-height: 1.72;
  text-align: justify;
}

/* EDITABLE_PREVIEW_MINIMUM_001 */
.publication-preview-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.publication-version-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  border: 1px solid var(--line);
}

.publication-edit-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  margin: 10px 0 6px;
}

.publication-edit-textarea {
  width: 100%;
  min-height: 260px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  line-height: 1.72;
  resize: vertical;
}

.publication-edit-textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.publication-status-message {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.88rem;
  background: var(--surface-soft);
  color: var(--ink);
}

.publication-status-message[data-status="BLOCKED_VERSION"] {
  background: rgba(180, 35, 24, 0.08);
  color: #b42318;
}

.publication-status-message[data-status="ASSISTED_REVIEW"] {
  background: rgba(255, 181, 71, 0.16);
  color: #8a5a00;
}

.publication-safe-alternative-note {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.publication-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.structured-ad h3 {
  font-weight: 900;
}

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

.ad-block strong {
  display: block;
  color: var(--blue-dark);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ad-block p,
.ad-block li {
  line-height: 1.72;
}

.ad-block ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.multi-version-list {
  display: grid;
  gap: 16px;
}

.version-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.version-card.recommended {
  border-color: rgba(255, 106, 0, 0.42);
  box-shadow: 0 14px 34px rgba(255, 106, 0, 0.12);
}

.version-card header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

.version-card h4 {
  margin: 0;
  color: var(--blue-dark);
}

.version-card pre {
  overflow: auto;
  max-height: 320px;
  margin: 0;
  white-space: pre-wrap;
  /* PX_PUBLIC_LISTING_DESCRIPTION_JUSTIFY_REPAIR_001: same standing rule
     already applied to #generated-description/#publication-ad-text-preview
     -- this preview (the "gerar todas as versões" comparison cards) was
     the one surface still showing generated ad text left-aligned. */
  text-align: justify;
  color: var(--ink);
  font: inherit;
}

.version-actions,
.recommendation-note,
.comparison-actions,
.result-signature-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.comparison-panel {
  padding-top: 18px;
  border-top: 1px solid rgba(0, 87, 255, 0.16);
}

.result-panel.comparison-view {
  grid-column: 1 / -1;
}

.result-panel.comparison-view .result-preview > section:not(.structured-ad) {
  display: none;
}

.comparison-panel > h3 {
  color: var(--blue-dark);
  font-size: 1.1rem;
  text-transform: uppercase;
}

.comparison-actions {
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(10, 31, 68, 0.08);
  border-radius: 8px;
  background: #fff;
}

.style-divider {
  margin-bottom: 12px;
  color: var(--blue-dark);
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
  white-space: pre-line;
}

.result-signature-switch {
  align-items: center;
  margin: 14px 0 0;
  padding: 12px;
  border: 1px solid rgba(0, 87, 255, 0.12);
  border-radius: 8px;
  background: rgba(245, 247, 250, 0.86);
}

.result-signature-switch.hidden {
  display: none;
}

.result-signature-switch span {
  color: var(--blue-dark);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.result-signature-switch .active {
  border-color: rgba(255, 106, 0, 0.45);
  color: var(--accent-dark);
  background: rgba(255, 106, 0, 0.08);
}

.generation-feedback {
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(0, 87, 255, 0.18);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  color: var(--blue-dark);
  background: #f5f8ff;
  line-height: 1.55;
}

.generation-feedback.hidden {
  display: none;
}

.generation-feedback strong {
  display: block;
  margin-bottom: 4px;
  color: var(--blue-dark);
}

.generation-feedback-error {
  border-color: rgba(185, 28, 28, 0.25);
  border-left-color: #b91c1c;
  color: #7f1d1d;
  background: #fef2f2;
}

.generation-feedback-error strong {
  color: #7f1d1d;
}

.generation-feedback-recovery {
  padding: 0;
  border-color: rgba(185, 28, 28, 0.24);
  border-left-color: #b91c1c;
  background: #fff8f8;
  box-shadow: 0 12px 28px rgba(127, 29, 29, 0.08);
}

.generation-failure-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
}

.generation-failure-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(185, 28, 28, 0.28);
  border-radius: 50%;
  color: #991b1b;
  background: #fee2e2;
  font-weight: 900;
}

.generation-failure-content {
  min-width: 0;
}

.generation-failure-content p {
  margin: 0;
  color: #7f1d1d;
  line-height: 1.5;
}

.generation-failure-reason {
  margin-top: 6px !important;
  color: #9a5800 !important;
  font-size: 0.85rem;
  font-style: italic;
}

.provider-recovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.generation-feedback-validation {
  border-color: rgba(180, 83, 9, 0.24);
  border-left-color: #b45309;
  color: #78350f;
  background: #fffbeb;
}

.generation-feedback-validation strong {
  color: #78350f;
}

.generation-action-guarded,
.generation-action-guarded:hover {
  cursor: not-allowed;
  opacity: 0.48;
  box-shadow: none;
}

.commercial-reasoning-experience {
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 87, 255, 0.16);
  border-left: 4px solid var(--accent);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 106, 0, 0.16), transparent 32%),
    radial-gradient(circle at 100% 18%, rgba(0, 87, 255, 0.14), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 48%, #eef5ff 100%);
  box-shadow: 0 24px 70px rgba(10, 31, 68, 0.14);
  animation: commercialReasoningFadeIn 0.28s ease both;
}

.commercial-reasoning-card {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.commercial-reasoning-header {
  display: grid;
  gap: 4px;
}

.commercial-reasoning-header h3 {
  margin: 0;
  color: var(--blue-dark);
  font-size: clamp(1.12rem, 1.7vw, 1.42rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.16;
}

.commercial-reasoning-main {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: flex-start;
}

.commercial-reasoning-spinner {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: conic-gradient(from 180deg, var(--accent), var(--blue), rgba(0, 87, 255, 0.1), var(--accent));
  animation: generationSpin 1.15s linear infinite;
  box-shadow:
    0 12px 30px rgba(0, 87, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.commercial-reasoning-spinner::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  background: #fff;
}

.commercial-reasoning-copy {
  display: grid;
  gap: 7px;
}

.commercial-reasoning-kicker {
  color: var(--accent-dark);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.commercial-reasoning-copy h4 {
  margin: 0;
  color: var(--blue-dark);
  font-size: 1.04rem;
  font-weight: 900;
  line-height: 1.24;
}

.commercial-reasoning-copy strong {
  color: #192b4d;
  font-size: 0.92rem;
  font-weight: 850;
  line-height: 1.42;
}

.commercial-reasoning-copy p {
  margin: 0;
  color: #45536a;
  line-height: 1.55;
}

.commercial-reasoning-progress {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(10, 31, 68, 0.075);
  box-shadow: inset 0 0 0 1px rgba(10, 31, 68, 0.04);
}

.commercial-reasoning-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--blue));
  box-shadow: 0 0 24px rgba(0, 87, 255, 0.28);
  transition: width 0.5s ease;
}

/* PX_PROCESSING_SCREEN_MOCKUP_FIDELITY_001: redesigned from a compact
   horizontal 5-box grid into a full "screen" experience matching the
   approved Processamento mockup — title/subtitle, illustration + vertical
   timeline (each step keeps its own status label), a cancel action, and
   two tip cards. Reuses the exact same renderCommercialReasoningExperience
   state machine (stage mapping, progress %, error/validation rendering) —
   only what gets built into #generation-feedback's innerHTML changed. The
   :has() rule below hides the surrounding form chrome (title, mode switch,
   fields, CTA) while this experience is active, so it reads as one screen
   instead of a card floating above a stale form — the same principle
   already used for .ig-auth-shell:has(#gerador...). */
.form-panel:has(#generation-feedback.commercial-reasoning-experience) .form-context-header,
.form-panel:has(#generation-feedback.commercial-reasoning-experience) .input-mode-switch,
.form-panel:has(#generation-feedback.commercial-reasoning-experience) .editorial-style-control,
.form-panel:has(#generation-feedback.commercial-reasoning-experience) .generation-mode-control,
.form-panel:has(#generation-feedback.commercial-reasoning-experience) #form-stepper,
.form-panel:has(#generation-feedback.commercial-reasoning-experience) #listing-form,
.form-panel:has(#generation-feedback.commercial-reasoning-experience) .paste-panel,
.form-panel:has(#generation-feedback.commercial-reasoning-experience) .quick-actions,
.form-panel:has(#generation-feedback.commercial-reasoning-experience) .paste-advertiser-gate,
.form-panel:has(#generation-feedback.commercial-reasoning-experience) .commercial-contact-panel {
  display: none;
}

.commercial-reasoning-subtitle {
  margin: 2px 0 0;
  color: #45536a;
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 60ch;
}

.commercial-reasoning-body {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 24px;
  align-items: start;
}

.commercial-reasoning-illustration {
  display: grid;
  gap: 16px;
  justify-items: center;
  padding: 28px 18px;
  border-radius: 18px;
  background: rgba(0, 87, 255, 0.05);
  text-align: center;
}

.commercial-reasoning-illustration .commercial-reasoning-spinner {
  width: 96px;
  height: 96px;
}

/* PROCESSING_CANONICAL_BRAIN_HOUSE_DYNAMIC_VISUAL_ASSET_001: Founder-approved
   canonical brain+house asset (assets/imobgenius-processing-brain-house.png),
   used as-is — the file itself is never redrawn/recut. Two effects, both
   pure CSS, neither touching the source image:
   1) A gentle scale pulse on the whole image, pivoted near the house (not
      image center) so the house area barely moves while the brain above it
      visibly grows/shrinks — "brain breathes, house stays put" without
      needing to split the artwork into layers.
   2) A soft light band that sweeps upward through the image's own alpha
      shape (CSS mask, same file, no duplication), from the outer line-ends
      toward the house and on up into the brain — never the reverse
      direction — reading as "the lines feed the house, the house feeds the
      brain" per spec. */
.processing-brain-house {
  position: relative;
  width: clamp(180px, 22vw, 260px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.processing-brain-house-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: ig-brain-house-pulse 2.6s ease-in-out infinite;
  transform-origin: 50% 46%;
}

.processing-brain-house-flow {
  position: absolute;
  inset: 0;
  -webkit-mask-image: url("assets/imobgenius-processing-brain-house.png");
  mask-image: url("assets/imobgenius-processing-brain-house.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background: linear-gradient(180deg, transparent 0%, transparent 46%, rgba(255, 255, 255, 0.95) 52%, transparent 58%, transparent 100%);
  background-size: 100% 320%;
  background-position: 0 100%;
  animation: ig-brain-house-flow 2.4s linear infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes ig-brain-house-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

@keyframes ig-brain-house-flow {
  0% { background-position: 0 100%; }
  100% { background-position: 0 -220%; }
}

@media (max-width: 640px) {
  .processing-brain-house {
    width: clamp(140px, 40vw, 200px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .processing-brain-house-image {
    animation: none;
  }
  .processing-brain-house-flow {
    animation: none;
    opacity: 0.35;
  }
}

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

.commercial-reasoning-steps li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(10, 31, 68, 0.08);
  border-radius: 14px;
  color: #6b778c;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

.commercial-reasoning-step-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(10, 31, 68, 0.06);
  font-size: 1.05rem;
}

.commercial-reasoning-step-copy {
  display: grid;
  gap: 2px;
}

.commercial-reasoning-step-copy strong {
  color: inherit;
  font-size: 0.88rem;
  line-height: 1.3;
}

.commercial-reasoning-step-copy p {
  margin: 0;
  color: #7c879a;
  font-size: 0.78rem;
  line-height: 1.4;
}

.commercial-reasoning-step-status {
  color: #99a3b3;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.commercial-reasoning-steps li[data-state="active"] {
  transform: translateY(-1px);
  border-color: rgba(255, 106, 0, 0.38);
  color: var(--blue-dark);
  background: linear-gradient(180deg, #fffaf4, #fff4e5);
  box-shadow: 0 12px 28px rgba(255, 106, 0, 0.15);
}

.commercial-reasoning-steps li[data-state="active"] .commercial-reasoning-step-icon {
  background: rgba(255, 106, 0, 0.16);
}

.commercial-reasoning-steps li[data-state="active"] .commercial-reasoning-step-status {
  color: var(--accent-dark);
}

.commercial-reasoning-steps li[data-state="completed"] {
  border-color: rgba(8, 116, 67, 0.18);
  color: #087443;
  background: #effaf5;
}

.commercial-reasoning-steps li[data-state="completed"] .commercial-reasoning-step-icon {
  background: rgba(8, 116, 67, 0.16);
}

.commercial-reasoning-steps li[data-state="completed"] .commercial-reasoning-step-status {
  color: #087443;
}

.commercial-reasoning-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.commercial-reasoning-hint {
  margin: 0;
  color: #6b778c;
  font-size: 0.86rem;
}

.commercial-reasoning-tips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.commercial-reasoning-tip-card {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(10, 31, 68, 0.035);
}

.commercial-reasoning-tip-card strong {
  display: block;
  margin-bottom: 4px;
  color: var(--blue-dark);
  font-size: 0.86rem;
}

.commercial-reasoning-tip-card p {
  margin: 0;
  color: #6b778c;
  font-size: 0.82rem;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .commercial-reasoning-body {
    grid-template-columns: 1fr;
  }

  .commercial-reasoning-tips {
    grid-template-columns: 1fr;
  }
}

.commercial-reasoning-data-safety {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f4f5f7;
  color: var(--muted);
  font-size: 0.82rem;
}

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

@media (max-width: 760px) {
  .commercial-reasoning-steps li {
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon copy" "icon status";
  }

  .commercial-reasoning-steps li .commercial-reasoning-step-icon { grid-area: icon; }
  .commercial-reasoning-steps li .commercial-reasoning-step-copy { grid-area: copy; }
  .commercial-reasoning-steps li .commercial-reasoning-step-status { grid-area: status; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .commercial-reasoning-spinner,
  .generation-spinner {
    animation-duration: 1.8s;
  }

  .commercial-reasoning-progress span,
  .commercial-reasoning-steps li,
  .commercial-reasoning-experience {
    animation: none;
    transition: none;
  }
}

.signature-preview-panel {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-content: start;
  gap: 20px;
  padding: 32px;
  overflow: auto;
  background: rgba(10, 31, 68, 0.62);
  backdrop-filter: blur(14px);
}

.signature-preview-panel.open {
  display: grid;
}

.signature-preview-panel > div:first-child,
.signature-preview-grid {
  width: min(1080px, 100%);
  margin: 0 auto;
}

.signature-preview-panel > div:first-child {
  position: relative;
  padding: 26px 30px 0;
  margin-top: 28px;
  border-radius: 8px 8px 0 0;
  background: #fff;
}

.signature-preview-panel > div:first-child h3 {
  margin-bottom: 0;
}

.signature-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 24px 30px 30px;
  border-radius: 0 0 8px 8px;
  background: #fff;
}

.signature-preview-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 360px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.signature-preview-card.active {
  border-color: rgba(255, 106, 0, 0.45);
  box-shadow: 0 12px 28px rgba(255, 106, 0, 0.1);
}

.signature-preview-card h4 {
  margin: 0;
  color: var(--blue-dark);
}

.signature-preview-card pre {
  min-height: 170px;
  margin: 0;
  white-space: pre-wrap;
  color: var(--ink);
  font: inherit;
  line-height: 1.7;
}

.signature-preview-card .button {
  width: 100%;
  margin-top: auto;
}

/* PX_ADVERTISER_PROFILE_CONFIRM_MODAL_001: centered, IG-branded replacement
   for window.confirm() -- same fixed-overlay/backdrop language as
   .signature-preview-panel above, sized as a compact confirm card instead
   of a full-width comparison grid. */
.ig-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 31, 68, 0.62);
  backdrop-filter: blur(14px);
}

.ig-confirm-modal.open {
  display: flex;
}

.ig-confirm-modal-card {
  width: min(420px, 100%);
  padding: 32px 28px 28px;
  border-radius: 12px;
  background: #fff;
  text-align: center;
  box-shadow: var(--shadow);
}

.ig-confirm-modal-avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border: 2px solid var(--line);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #8592a8, #bcc4d0);
  font-weight: 850;
  font-size: 1.3rem;
}

.ig-confirm-modal-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* PX_PHOTO_ENHANCE_CONFIRM_PREVIEW_SIZE_001: reported live -- .ig-confirm-modal-avatar
   is shared with #advertiser-profile-confirm-modal, where a small 64px circle
   is correct for a real user profile photo. Reused as-is here for a real
   estate photo preview, the same tiny circular crop made the room/property
   barely recognizable. Scoped to this one modal (never touches the shared
   base rule, so the advertiser modal's own avatar is untouched) with a
   bigger, 4:3 rounded-rect crop matching how photos are already shown
   everywhere else in the app (.photo-thumb-media), not a circle. */
#photo-enhance-confirm-modal .ig-confirm-modal-avatar {
  width: 240px;
  height: 180px;
  border-radius: 12px;
  background: var(--surface);
}

.ig-confirm-modal-card h3 {
  margin: 0 0 10px;
  color: var(--blue-dark);
}

.ig-confirm-modal-body {
  margin: 0 0 24px;
  color: var(--muted);
  line-height: 1.6;
}

.ig-confirm-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.ig-confirm-modal-actions .button {
  flex: 1;
}

/* FEEDBACK_REPORTS_001 --------------------------------------------------- */
.feedback-report-card {
  width: min(480px, 100%);
  text-align: left;
}

.feedback-report-card h3 {
  text-align: center;
}

.feedback-report-context-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.85rem;
  text-align: left;
}

.feedback-report-textarea {
  margin: 0 0 20px;
  text-align: left;
}

.modal-close-button {
  position: absolute;
  top: 20px;
  right: 24px;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--blue-dark);
  font-size: 1.25rem;
  font-weight: 900;
  background: #fff;
  cursor: pointer;
}

.recommendation-note {
  display: block;
  padding: 14px;
  border: 1px solid rgba(0, 87, 255, 0.18);
  border-radius: 8px;
  background: var(--surface-soft);
}

.photo-result-section .empty-state {
  grid-column: 1 / -1;
}

.publication-viewer {
  width: min(1180px, calc(100% - 32px));
  margin: 86px auto;
}

.publication-toolbar {
  position: sticky;
  top: 72px;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(10, 31, 68, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 50px rgba(10, 31, 68, 0.12);
  backdrop-filter: blur(14px);
}

.publication-toolbar h2 {
  margin: 4px 0 0;
  color: var(--blue-dark);
}

.publication-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.publication-actions button {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.publication-actions button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(10, 31, 68, 0.1);
}

.publication-actions select {
  width: auto;
  min-height: 42px;
  padding: 0 12px;
}

.publication-viewer > .beta-safety-panel {
  margin: 18px 0 0;
}

.publication-stage {
  display: grid;
  place-items: start center;
  padding: 32px 12px;
  background:
    linear-gradient(rgba(245, 247, 250, 0.92), rgba(245, 247, 250, 0.92)),
    radial-gradient(circle at 20% 10%, rgba(0, 87, 255, 0.12), transparent 28%);
}

.print-page {
  position: relative;
  width: min(820px, 100%);
  min-height: 1020px;
  padding: 56px;
  border: 1px solid rgba(10, 31, 68, 0.08);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(10, 31, 68, 0.16);
  break-inside: avoid;
  page-break-inside: avoid;
}

.report-brand-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -22px 0 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(10, 31, 68, 0.1);
}

.report-brand-header img {
  width: 72px;
  height: auto;
  object-fit: contain;
}

.report-brand-header strong,
.report-brand-header span {
  display: block;
}

.report-brand-header strong {
  color: var(--blue-dark);
  font-size: 1.04rem;
  line-height: 1;
}

.report-brand-header span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.publication-viewer.with-watermark-brand .print-page::before {
  content: "ImobGenius";
  position: absolute;
  inset: 42% auto auto 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
  color: rgba(0, 87, 255, 0.055);
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  pointer-events: none;
  white-space: nowrap;
}

.publication-viewer.with-header-brand .print-page::after {
  content: "ImobGenius | Inteligência Imobiliária";
  position: absolute;
  top: 24px;
  right: 56px;
  color: rgba(0, 87, 255, 0.62);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.print-brand-footer {
  margin-top: 34px;
  padding-top: 14px;
  border-top: 1px solid rgba(10, 31, 68, 0.1);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}

.branding-choice-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 31, 68, 0.48);
  backdrop-filter: blur(10px);
}

.branding-choice-panel {
  width: min(760px, 100%);
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 34px 90px rgba(10, 31, 68, 0.26);
}

.branding-choice-panel h3 {
  margin: 0 0 8px;
  color: var(--blue-dark);
  font-size: 1.2rem;
}

.branding-choice-panel p {
  margin: 0 0 20px;
  color: var(--muted);
}

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

.branding-choice-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 128px;
  padding: 18px;
  border: 1px solid rgba(10, 31, 68, 0.1);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.branding-choice-card strong {
  color: var(--blue-dark);
}

.branding-choice-card span {
  color: var(--muted);
  line-height: 1.45;
}

.branding-choice-card:hover {
  border-color: rgba(255, 106, 0, 0.45);
  background: rgba(255, 106, 0, 0.07);
}

@media (max-width: 720px) {
  .branding-choice-grid {
    grid-template-columns: 1fr;
  }
}

/* PX_PDF_HEADER_PERSONALIZATION_001 --------------------------------------- */
.header-personalization-fields:not([hidden]) {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.header-personalization-fields label {
  display: grid;
  gap: 6px;
  font-size: 0.86rem;
  color: var(--ink);
  font-weight: 600;
}

.header-personalization-fields input[type="text"],
.header-personalization-fields input[type="file"] {
  font: inherit;
  font-weight: 400;
}

.print-content h1 {
  margin: 0 0 24px;
  color: var(--blue-dark);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.35;
  break-after: avoid;
  page-break-after: avoid;
}

.print-content h2 {
  margin: 28px 0 12px;
  color: var(--blue-dark);
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  break-after: avoid;
  page-break-after: avoid;
}

.print-content p {
  margin: 0 0 14px;
  line-height: 1.78;
  text-align: justify;
  orphans: 3;
  widows: 3;
}

.print-content ul {
  margin: 0 0 16px;
  padding-left: 20px;
  break-inside: avoid;
  page-break-inside: avoid;
}

.print-content li {
  margin-bottom: 8px;
  line-height: 1.65;
  break-inside: avoid;
  page-break-inside: avoid;
}

.print-spacer {
  height: 12px;
}

.patrimonial-chart-wrap {
  margin: 4px 0 20px;
  padding: 16px 12px 8px;
  border-radius: 12px;
  background: rgba(22, 106, 85, 0.05);
  break-inside: avoid;
  page-break-inside: avoid;
}

.patrimonial-chart {
  display: block;
  width: 100%;
  height: auto;
}

.patrimonial-chart-grid {
  stroke: #d9e1de;
  stroke-width: 1;
}

.patrimonial-chart-point {
  fill: #f4d99a;
  stroke: #0f4a3d;
  stroke-width: 2;
  cursor: pointer;
  transition: r 0.15s ease;
}

.patrimonial-chart-point:hover {
  r: 8;
  fill: #166a55;
}

.patrimonial-chart-axis-label {
  font-size: 11px;
  font-weight: 700;
  fill: #66716d;
}

.comparison-publication-stage {
  place-items: stretch;
}

.comparison-print-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.comparison-print-card {
  width: 100%;
  min-height: 720px;
  padding: 28px;
}

.comparison-print-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--blue-dark);
}

.comparison-print-card header span {
  color: var(--accent-dark);
  font-weight: 900;
}

.comparison-print-card.recommended {
  border-color: rgba(255, 106, 0, 0.42);
}

.result-grid {
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}

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

.platform-grid div {
  padding: 12px;
  border-radius: 8px;
  background: var(--surface-soft);
}

.platform-grid strong,
.platform-grid span {
  display: block;
}

.platform-grid strong {
  margin-bottom: 5px;
}

.platform-grid span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.video-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.wealth-section canvas {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f7faf8);
}

.ad-block {
  padding: 14px;
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: var(--surface-soft);
}

.ad-block strong {
  display: block;
  margin-bottom: 6px;
}

.ad-block p,
.ad-block ul,
.empty-state {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.ad-block ul {
  padding-left: 18px;
}

.ad-block li + li {
  margin-top: 5px;
}

.toast {
  position: fixed;
  z-index: 150;
  right: 20px;
  bottom: 20px;
  transform: translateY(18px);
  opacity: 0;
  pointer-events: none;
  padding: 12px 16px;
  border-radius: 8px;
  color: #fff;
  font-weight: 800;
  background: var(--blue-dark);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

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

.imobgenius-build-badge {
  /* PX_BUILD_BADGE_REPOSITION_001: bottom-right sat directly on top of the
     toast (#toast is also fixed/bottom-right), hiding action-result messages
     right after the Founder clicked something -- moved below the user
     avatar in the top-right corner instead, and shrunk so it reads as a
     discreet debug label, not another UI panel. */
  position: fixed;
  top: 78px;
  right: 14px;
  z-index: 60;
  display: grid;
  gap: 1px;
  max-width: min(190px, calc(100vw - 28px));
  padding: 6px 9px;
  border: 1px solid rgba(10, 31, 68, 0.14);
  border-radius: 10px;
  color: #0a1f44;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 16px rgba(10, 31, 68, 0.12);
  backdrop-filter: blur(10px);
  font-size: 0.62rem;
  line-height: 1.2;
  pointer-events: none;
}

.imobgenius-build-badge strong,
.imobgenius-build-badge span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imobgenius-build-badge strong {
  color: var(--blue-dark);
  font-weight: 900;
}

.imobgenius-build-badge span {
  color: #5b677a;
}

@media print {
  .imobgenius-build-badge {
    display: none !important;
  }
}

@media (max-width: 980px) {
  .topbar nav {
    display: none;
  }

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

  .result-panel {
    position: static;
  }

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

@media (max-width: 680px) {
  .topbar {
    padding: 0 14px;
  }

  .brand {
    font-size: 0.92rem;
  }

  .brand img {
    width: 34px;
    height: 34px;
  }

  .nav-action {
    min-height: 38px;
    padding: 0 10px;
    font-size: 0.78rem;
  }

  .hero {
    min-height: 680px;
    padding: 52px 18px;
    background:
      radial-gradient(circle at 70% 16%, rgba(0, 87, 255, 0.34), transparent 34%),
      linear-gradient(rgba(10, 31, 68, 0.9), rgba(10, 31, 68, 0.78)),
      linear-gradient(160deg, #16305a 0%, #0a1f44 45%, #060f24 100%);
  }

  /* PX_ENTRY_PAGE_VISUAL_FOUNDATION_001: no empilhamento em coluna única do
     mobile, o hero usa align-items:end (o conteúdo de texto fica ancorado
     embaixo) — a única faixa reservadamente vazia é o topo do hero, acima do
     eyebrow. Ancorar ao topo (em vez de bottom) evita sobreposição com a
     headline/subtítulo/CTA quando o conteúdo textual muda de altura. */
  .hero-brand-watermark {
    top: 16px;
    right: 6%;
    bottom: auto;
    width: min(150px, 34vw);
  }

  .hero-logo {
    width: min(330px, 84vw);
    height: auto;
    max-height: 170px;
  }

  .proof-band {
    grid-template-columns: 1fr;
  }

  .section,
  .generator-layout {
    width: min(100% - 20px, 620px);
    margin: 58px auto;
  }

  .form-panel,
  .result-panel {
    padding: 20px;
  }

  .beta-safety-heading { display: grid; grid-template-columns: 1fr; }
  .beta-safety-heading > strong { width: fit-content; }
  .form-grid,
  .binary-grid,
  .signature-preview-grid,
  .radio-group {
    grid-template-columns: 1fr;
  }

  .module-launch-card,
  .valuation-grid label {
    grid-template-columns: 1fr;
  }

  .module-launch-card {
    display: grid;
  }

  .valuation-grid.open,
  .signature-preview-panel {
    padding: 16px;
  }

  .signature-preview-grid {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .signature-preview-card {
    min-height: 280px;
  }

  .button,
  .hero-actions a,
  .toolbar-actions button,
  .valuation-actions button,
  .publication-actions button,
  .publication-actions select {
    width: 100%;
  }

  .section-title-row,
  .platform-grid,
  .publication-toolbar,
  .comparison-print-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .publication-viewer {
    width: min(100% - 20px, 620px);
    margin: 58px auto;
  }

  .publication-toolbar {
    top: 0;
  }

  .print-page {
    min-height: auto;
    padding: 24px;
  }
}

/* AUTHENTICATED_APP_SHELL_DESKTOP_1440_VISUAL_CORRECTION_001
   Desktop-only composition refinement. The result is omitted from the initial
   composition through state classes already maintained by the real flow. */
@media (min-width: 821px) {
  .ig-home-workspace-active .ig-auth-shell,
  .ig-auth-shell:has(#gerador:not(.app-screen-hidden)) {
    grid-template-columns: 216px minmax(0, 1fr);
    overflow-x: clip;
  }

  .ig-auth-sidebar {
    gap: 20px;
    padding: 20px 14px;
    background: linear-gradient(180deg, #071f47 0%, #03162f 100%);
    box-shadow: none;
  }

  .ig-auth-sidebar .ig-auth-brand {
    position: relative;
    height: 48px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    background: transparent;
  }

  /* PX_SIDEBAR_LOGO_TRANSPARENT_001: was an absolute-position crop (top/left/
     width offsets) hand-tuned to zoom into "Logo horizontal.png"'s specific
     internal layout so only its wordmark filled the 48px slot. Swapping to
     logo-imobgenius-transparent.png (a differently-proportioned mark+wordmark
     stack, no baked-in background box) made those hardcoded offsets crop the
     wrong region. object-fit:contain shows the whole logo correctly
     regardless of the source asset's exact proportions -- no coordinates to
     re-tune if the asset changes again. */
  .ig-auth-sidebar .ig-auth-brand img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .ig-auth-nav {
    gap: 8px;
  }

  .ig-auth-nav a {
    min-height: 44px;
    padding: 10px 12px;
    border-color: transparent;
    border-radius: 9px;
    font-size: 0.84rem;
    font-weight: 700;
  }

  .ig-auth-nav a[aria-current="page"] {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 3px 0 0 var(--ig-auth-orange);
  }

  .ig-auth-main {
    background: #f5f7fb;
  }

  .ig-auth-header {
    min-height: 84px;
    padding: 14px 30px;
    border-bottom-color: rgba(10, 31, 68, 0.08);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: none;
  }

  .ig-auth-heading h1 {
    font-size: clamp(1.45rem, 1.8vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
  }

  .ig-auth-heading p {
    margin-top: 5px;
    font-size: 0.9rem;
  }

  .ig-auth-user {
    gap: 9px;
    min-width: 146px;
    padding: 6px 11px 6px 6px;
    border-color: rgba(10, 31, 68, 0.09);
    background: #f8fafc;
  }

  .ig-auth-user-avatar {
    width: 38px;
    height: 38px;
  }

  .ig-auth-content {
    padding: 24px 28px 48px;
  }

  .ig-auth-content .generator-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    width: min(1056px, 100%);
    margin: 0 auto 48px;
    scroll-margin-top: 100px;
  }

  /* PX_GENERATION_FAILURE_LAYOUT_COLLAPSE_REPAIR_001: .generation-feedback-
     recovery ("Não conseguimos concluir seu anúncio agora" / provider
     unavailable) and .generation-feedback-validation ("Revise os campos
     destacados para continuar") are both dead-end states with nothing to
     show in .result-panel -- #resultado's own base `display: none` rule is
     never overridden for generationState "idle"/"recoverable-error"/
     "unavailable" (only "blocked-version"/"safe-alternative" earn that).
     Without this exclusion the selector below still widened the layout to
     two columns and squeezed .form-panel into ~45% width for an empty
     second column that never renders, forcing the long form into an
     unnecessarily narrow, tall single column -- reported live. */
  .ig-auth-shell #gerador:has(#new-version-button:not(.hidden)),
  .ig-auth-shell #gerador:has(#generation-feedback:not(.hidden):not(.commercial-reasoning-experience):not(.generation-feedback-recovery):not(.generation-feedback-validation)) {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    width: min(1160px, 100%);
  }

  .ig-auth-shell #gerador:has(#new-version-button.hidden):has(#generation-feedback.hidden) .result-panel {
    display: none;
  }

  /* PX_PROCESSING_SCREEN_RESULT_PANEL_LEAK_REPAIR_001: the rules above widen
     the layout to two columns and reveal .result-panel (the old export
     toolbar, "Anúncio ImobGenius" / Copiar texto / Baixar PDF etc.)
     whenever #generation-feedback is visible -- correct for the old
     one-line status message, but the rich "Preparando seu anúncio" card
     (commercial-reasoning-experience) is meant to be the sole focus of the
     screen, with nothing to export yet. Force single-column and hide the
     export toolbar specifically during that state, regardless of the
     #new-version-button/.hidden combination above. */
  .ig-auth-shell #gerador:has(#generation-feedback.commercial-reasoning-experience) {
    grid-template-columns: minmax(0, 1fr);
  }

  .ig-auth-shell #gerador:has(#generation-feedback.commercial-reasoning-experience) .result-panel {
    display: none !important;
  }

  /* PX_RESULTADO_LEGACY_PANEL_BLOCKED_STATE_LEAK_REPAIR_001: reported live --
     clicking "Voltar à edição" from a block card showed the OLD #resultado
     export toolbar (Copiar texto/Baixar pacote ZIP/Gerar vídeo curto/PDF/
     DOCX/WhatsApp) floating next to the current form step. This rule used
     to force #resultado back to display:block !important whenever
     data-generation-state was "blocked-version"/"safe-alternative" --
     correct back when blocked-state content rendered INTO #resultado's own
     .structured-ad, but the Fase 7 migration (PX_RESULTADO_PANEL_
     MIGRATION_001/KIB-014) moved #structured-ad/#generated-description into
     #result-screen. renderQualityBlockedPreview/renderCanonicalSafe
     PublicationPreview write to THOSE elements now, never anything inside
     #resultado -- this rule was reviving an empty, inert legacy panel next
     to the real (and now correctly styled) block card. #resultado's own
     static `display: none` rule already covers every state correctly
     without this override. */

  .ig-auth-shell .form-panel,
  .ig-auth-shell .result-panel {
    border: 1px solid rgba(10, 31, 68, 0.08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(10, 31, 68, 0.055);
  }

  .ig-auth-shell .form-panel::before,
  .ig-auth-shell .result-panel::before {
    display: none;
  }

  .ig-auth-shell .form-panel {
    padding: 28px 30px 34px;
  }

  .ig-auth-shell .result-panel {
    top: 104px;
    padding: 24px;
  }

  .ig-auth-shell .form-panel > .panel-brand {
    display: none;
  }

  .ig-auth-shell .section-heading.compact {
    margin-bottom: 18px;
  }

  .ig-auth-shell .form-panel > .generation-feedback {
    width: min(560px, 100%);
    margin: 0 0 20px auto;
    scroll-margin-top: 104px;
  }

  /* PX_PROCESSING_SCREEN_WIDTH_LEAK_REPAIR_001: the rule above caps
     #generation-feedback at 560px and right-aligns it — built for the old
     narrow one-line status card sitting beside the (now hidden during
     processing) .result-panel. The rich "Preparando seu anúncio" card must
     fill the single-column layout width instead, or it renders squeezed
     into the right edge with a large blank gap on the left, exactly as
     reported live. */
  .ig-auth-shell .form-panel > .generation-feedback.commercial-reasoning-experience {
    width: 100%;
    margin: 0 0 20px;
  }

  .ig-auth-shell .section-heading.compact h2 {
    font-size: clamp(1.75rem, 2.4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.035em;
  }

  .ig-auth-shell .eyebrow {
    letter-spacing: 0.02em;
    text-transform: none;
  }

  .ig-auth-shell .input-mode-switch {
    gap: 4px;
    padding: 4px;
    border-color: rgba(10, 31, 68, 0.08);
    border-radius: 10px;
    background: #f3f6fa;
  }

  .ig-auth-shell .mode-button {
    border-radius: 8px;
    font-weight: 700;
  }

  .ig-auth-shell .mode-button.active {
    background: var(--ig-auth-navy);
    box-shadow: none;
  }

  .ig-auth-shell .editorial-style-control,
  .ig-auth-shell .generation-mode-control,
  .ig-auth-shell .paste-panel,
  .ig-auth-shell .commercial-contact-panel,
  .ig-auth-shell .valuation-input,
  .ig-auth-shell .upload-box,
  .ig-auth-shell .module-launch-card {
    border-color: rgba(10, 31, 68, 0.09);
    background: #fbfcfe;
    box-shadow: none;
  }

  .ig-auth-shell .editorial-style-control,
  .ig-auth-shell .generation-mode-control {
    padding: 13px 14px;
  }

  .ig-auth-shell label,
  .ig-auth-shell .radio-group {
    font-weight: 650;
  }

  .ig-auth-shell input,
  .ig-auth-shell select,
  .ig-auth-shell textarea {
    border-color: #d9e0ea;
    border-radius: 9px;
    box-shadow: none;
  }

  .ig-auth-shell input:focus,
  .ig-auth-shell select:focus,
  .ig-auth-shell textarea:focus {
    border-color: #5e82b8;
    outline: 3px solid rgba(255, 114, 0, 0.16);
  }

  .ig-auth-shell .quick-actions {
    margin: 24px 0 0;
    padding-top: 22px;
    border-top: 1px solid rgba(10, 31, 68, 0.09);
  }

  .ig-auth-shell .quick-actions[data-active-mode="paste"] {
    margin: 4px 0 0;
    padding-top: 18px;
  }

  .ig-auth-shell .button,
  .ig-auth-shell .mode-button {
    text-transform: none;
    letter-spacing: 0;
  }

  .ig-auth-shell .primary-action.button {
    min-height: 46px;
    border-color: var(--ig-auth-orange);
    color: #fff;
    background: var(--ig-auth-orange);
    box-shadow: 0 8px 18px rgba(255, 114, 0, 0.18);
  }

  .ig-auth-shell .primary-action.button:hover {
    background: #e96600;
    box-shadow: 0 8px 18px rgba(255, 114, 0, 0.22);
  }

  .ig-auth-shell .secondary-action.button {
    border-color: #cfd8e5;
    color: #33435f;
    background: #fff;
    box-shadow: none;
  }

  .ig-auth-shell .form-grid {
    gap: 16px 18px;
  }

  .ig-auth-shell .radio-group,
  .ig-auth-shell .valuation-input,
  .ig-auth-shell .commercial-contact-panel,
  .ig-auth-shell .paste-panel {
    border-radius: 11px;
  }

  .ig-auth-shell .panel-brand,
  .ig-auth-shell .beta-safety-panel,
  .ig-auth-shell .result-preview section {
    box-shadow: none;
  }
}
.auth-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.auth-form[hidden] {
  display: none;
}

.auth-form label {
  display: grid;
  gap: 6px;
  font-weight: 700;
  /* PX_AUTH_FORM_LABEL_CONTRAST_REPAIR_001: reported live -- "Usuário ou
     e-mail"/"Senha" had no color set, inheriting a dark tone that read as
     low-contrast against this modal's dark background. */
  color: #fff;
}

.auth-form input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d5dbe7;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
}

.auth-form-links {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.auth-form-links button,
.auth-secondary-link,
.ig-auth-exit {
  border: 0;
  background: transparent;
  color: #3157d5;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}

.auth-feedback {
  min-height: 1.4em;
  color: #8c2d22;
}

.auth-feedback.auth-feedback-success {
  color: #17653a;
}

.auth-configuration-state {
  color: #5b6475;
  font-size: 0.92rem;
}

.ig-auth-exit {
  margin-left: auto;
  color: inherit;
  font-size: 0.82rem;
}

/* ===== FOUNDER_BETA_PUBLIC_LISTING_AND_PORTFOLIO_VERTICAL_SLICE_A_001 ===== */

.publish-page-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(10, 31, 68, 0.1);
  border-radius: 10px;
  background: var(--surface-soft);
  margin-bottom: 16px;
}

.publish-page-card strong {
  display: block;
  color: var(--blue-dark);
  margin-bottom: 4px;
}

.publish-page-card span {
  color: var(--muted);
  font-size: 0.92rem;
}

.publish-page-card-ready {
  background: #f4fbf6;
  border-color: #bfe3cc;
}

.publish-page-ready-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.publish-page-qr-code {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  padding: 6px;
  border: 1px solid rgba(10, 31, 68, 0.1);
  border-radius: 8px;
  background: #fff;
}

.publish-page-qr-code svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Meus imóveis */

.portfolio-header-row h2 {
  color: var(--blue-dark);
  margin: 4px 0 0;
}

.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}

.portfolio-filters input,
.portfolio-filters select {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  background: var(--surface);
}

.portfolio-filters input[type="search"] {
  flex: 1 1 240px;
}

.portfolio-state-note {
  color: var(--muted);
  margin: 0 0 12px;
}

.portfolio-state-note.portfolio-state-error {
  color: #b3261e;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.portfolio-card {
  border: 1px solid rgba(10, 31, 68, 0.1);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
}

.portfolio-card img,
.portfolio-card-cover-empty,
.portfolio-detail-cover,
.public-listing-cover {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface-soft);
}

.portfolio-detail-cover {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
}

.portfolio-card-body {
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.portfolio-card-body strong {
  color: var(--blue-dark);
}

.portfolio-card-price {
  font-weight: 600;
}

.portfolio-card-meta {
  color: var(--muted);
  font-size: 0.85rem;
}

.portfolio-card-status {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #e4ecff;
  color: var(--blue-dark);
  text-transform: uppercase;
}

.portfolio-card-status[data-status="unpublished"] {
  background: #f1f1f1;
  color: var(--muted);
}

.portfolio-card-status[data-status="sold"],
.portfolio-card-status[data-status="rented"] {
  background: #fde7d8;
  color: var(--accent-dark);
}

/* Detail + presentation overlay */

.portfolio-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 31, 68, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 60;
}

.portfolio-detail-panel,
.portfolio-presentation-panel {
  position: relative;
  background: var(--surface);
  border-radius: 14px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: var(--shadow);
}

.portfolio-presentation-panel {
  background: var(--blue-dark);
  color: #fff;
  text-align: center;
}

.portfolio-presentation-panel img,
.portfolio-presentation-panel .portfolio-card-cover-empty {
  border-radius: 10px;
  margin-bottom: 16px;
}

.portfolio-presentation-price {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 4px 0 12px;
}

.portfolio-presentation-actions,
.portfolio-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.portfolio-detail-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: rgba(10, 31, 68, 0.08);
  color: inherit;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
}

.portfolio-detail-price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--blue-dark);
}

/* Public listing page (/#imovel/{slug}) — no auth chrome, mobile-first */

.public-listing-page {
  min-height: 100vh;
  background: var(--surface-soft);
}

.public-listing-topbar {
  min-height: 94px;
  padding: 8px clamp(18px, 4vw, 56px);
  display: flex;
  align-items: center;
  background: #06152d;
  border-bottom: 2px solid rgba(255, 115, 0, 0.72);
}

.public-listing-brand {
  display: inline-flex;
  align-items: center;
}

.public-listing-topbar img {
  display: block;
  width: clamp(138px, 12vw, 172px);
  height: auto;
  border-radius: 6px;
}

.public-listing-loading,
.public-listing-not-found {
  padding: 60px 24px;
  text-align: center;
  color: var(--muted);
}

.public-listing-not-found h1 {
  color: var(--blue-dark);
  font-size: 1.3rem;
}

/* PX_PUBLIC_LISTING_PAGE_POLISH_001: reported live -- with no cover photo,
   this inherited the real cover's full-width, aspect-ratio:4/3 sizing
   (shared with .portfolio-card-cover-empty above, appropriate for a small
   grid card, not a full-bleed hero) -- on a normal desktop viewport that's
   over 700px of empty gradient before any content appears. A standalone
   page with nothing to show yet reads as broken, not "no photo": capped to
   a slim decorative band instead of reserving hero-image height for an
   image that doesn't exist. */
.public-listing-cover-empty {
  aspect-ratio: unset;
  height: 96px;
  background: linear-gradient(135deg, rgba(0, 87, 255, 0.12), rgba(10, 31, 68, 0.08));
}

.public-listing-cover:not(.public-listing-cover-empty) {
  display: block;
  aspect-ratio: 16 / 7;
  min-height: 280px;
  max-height: 560px;
  object-fit: cover;
}

.public-listing-cover-trigger {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.public-listing-cover-trigger .public-listing-cover {
  width: 100%;
}

.public-listing-body {
  width: min(920px, calc(100% - 32px));
  max-width: 920px;
  margin: -76px auto 0;
  padding: 32px clamp(20px, 5vw, 40px) 40px;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow);
  position: relative;
}

.public-listing-status {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: #e4ecff;
  color: var(--blue-dark);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.public-listing-body h1 {
  color: var(--blue-dark);
  margin: 0 0 6px;
  max-width: 28ch;
  font-size: clamp(1.45rem, 3.1vw, 2rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.public-listing-price {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.public-listing-location {
  color: var(--muted);
  margin: 0 0 16px;
}

.public-listing-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.public-listing-facts span {
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.85rem;
}

.public-listing-description {
  /* PX_PUBLIC_LISTING_DESCRIPTION_JUSTIFY_REPAIR_001: reported live -- the
     Founder's standing rule ("todos os textos gerados pelo IG devem ser
     justificados") was already applied to the PDF export
     (pdfSharedStyleCss's global p{text-align:justify}) but never made it to
     this surface -- the public listing page reads the same generated
     description text, left-aligned with a ragged right edge. */
  text-align: justify;
  white-space: pre-wrap;
  line-height: 1.6;
}

/* Public photo gallery and accessible in-page viewer. */
.public-listing-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.public-listing-gallery button {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #e8eef7;
  cursor: zoom-in;
}

.public-listing-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.public-listing-lightbox[hidden] {
  display: none;
}

.public-listing-lightbox {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  grid-template-columns: minmax(48px, 1fr) minmax(0, 12fr) minmax(48px, 1fr);
  align-items: center;
  gap: 12px;
  padding: 56px 20px 24px;
  background: rgba(3, 12, 28, 0.94);
}

.public-listing-lightbox figure {
  grid-column: 2;
  margin: 0;
  min-width: 0;
  text-align: center;
}

.public-listing-lightbox figure img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 112px);
  margin: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.48);
}

.public-listing-lightbox figcaption {
  margin-top: 10px;
  color: #fff;
  font-weight: 700;
}

.public-listing-lightbox-close,
.public-listing-lightbox-nav {
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(10, 31, 68, 0.82);
  color: #fff;
  cursor: pointer;
}

.public-listing-lightbox-close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 44px;
  height: 44px;
  font-size: 2rem;
  line-height: 1;
}

.public-listing-lightbox-nav {
  width: 48px;
  height: 48px;
  justify-self: center;
  font-size: 2.5rem;
  line-height: 0.8;
}

.public-listing-lightbox-prev { grid-column: 1; }
.public-listing-lightbox-next { grid-column: 3; }

body.public-listing-lightbox-open {
  overflow: hidden;
}

.public-listing-costs {
  display: flex;
  gap: 16px;
  color: var(--muted);
  margin: 12px 0;
}

.public-listing-features {
  margin: 12px 0;
  padding-left: 20px;
}

.public-listing-broker-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  margin: 20px 0;
}

.public-listing-broker {
  margin: 0;
  padding: 14px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
}

.public-listing-qr {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
  width: 132px;
}

.public-listing-qr svg {
  display: block;
  width: 88px;
  height: 88px;
}

.public-listing-qr span {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

@media (max-width: 560px) {
  .public-listing-broker-row {
    flex-direction: column;
    align-items: stretch;
  }

  .public-listing-qr {
    width: auto;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
  }

  .public-listing-qr span {
    text-align: left;
  }
}

.public-listing-updated {
  color: var(--muted);
  font-size: 0.82rem;
}

.public-listing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

@media (max-width: 520px) {
  .public-listing-topbar {
    min-height: 78px;
    padding: 6px 16px;
  }

  .public-listing-topbar img {
    width: 124px;
  }

  .public-listing-cover:not(.public-listing-cover-empty) {
    aspect-ratio: 4 / 3;
    min-height: 220px;
    max-height: 420px;
  }

  .public-listing-body {
    width: calc(100% - 20px);
    margin-top: -42px;
    padding: 24px 18px 32px;
  }

  .public-listing-actions,
  .public-listing-actions a,
  .public-listing-actions button {
    width: 100%;
  }

  .public-listing-lightbox {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 4px;
    padding-inline: 6px;
  }
}

/* ===== FOUNDER_BETA_COLLECTIONS_VERTICAL_SLICE_B_001 ===== */

.portfolio-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.portfolio-selection-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 12px 0;
  border-radius: 10px;
  background: #e4ecff;
  border: 1px solid rgba(0, 87, 255, 0.2);
}

.portfolio-selection-bar span {
  font-weight: 600;
  color: var(--blue-dark);
}

.portfolio-card-selectable {
  position: relative;
  cursor: pointer;
}

.portfolio-card-selected {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.portfolio-card-checkbox {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--blue);
  z-index: 1;
}

.portfolio-collections-section {
  margin-top: 32px;
}

.portfolio-collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.collection-card {
  cursor: pointer;
  padding: 16px;
}

.collection-card .portfolio-card-body {
  padding: 0;
}

.collection-form-field {
  display: block;
  margin: 14px 0;
}

.collection-form-field span {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--blue-dark);
}

.collection-form-field input,
.collection-form-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}

.collection-manage-subheading {
  margin: 20px 0 10px;
  color: var(--blue-dark);
}

.collection-manage-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.collection-manage-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.collection-manage-item img,
.collection-manage-item .portfolio-card-cover-empty {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.collection-manage-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.collection-manage-item-body strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.collection-manage-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.collection-item-move,
.collection-item-remove {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
}

.collection-item-move:disabled {
  opacity: 0.35;
  cursor: default;
}

.collection-item-remove {
  color: #b3261e;
}

/* ===== FOUNDER_BETA_ASSISTED_PUBLISHING_VERTICAL_SLICE_C_001 ===== */

.portal-panel {
  max-width: 520px;
}

.portal-panel-readiness {
  font-weight: 700;
  color: var(--muted);
  margin: 4px 0 12px;
}

.portal-panel-readiness[data-ready="true"] {
  color: #17653a;
}

.portal-panel-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.portal-panel-checklist li[data-ok="false"] {
  color: var(--muted);
}

.portal-panel-checklist li[data-ok="true"] {
  color: #17653a;
}

.portal-panel-missing {
  padding: 10px 12px;
  border-radius: 8px;
  background: #fdf3e7;
  color: var(--accent-dark);
  margin-bottom: 12px;
}

.portal-panel-preview {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  margin-bottom: 12px;
  max-height: 160px;
  overflow-y: auto;
}

.portal-panel-preview strong {
  display: block;
  color: var(--blue-dark);
  margin-bottom: 6px;
}

.portal-panel-disclaimer {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 16px;
}