/* ===========================================================
   M2 Pesquisa — camada de modernização visual
   Mesma paleta original (preto / branco / cinza + vermelho no erro).
   Somente CSS: nenhum HTML ou JS foi alterado.
   =========================================================== */

:root {
  --radius: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --line: #e9ebef;
  --line-2: #f0f1f4;
  --elev-1: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 26px -14px rgba(16, 24, 40, .12);
  --elev-2: 0 1px 2px rgba(16, 24, 40, .05), 0 22px 46px -22px rgba(16, 24, 40, .22);
  --elev-3: 0 40px 90px -40px rgba(16, 24, 40, .5);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

html, body {
  background:
    radial-gradient(1200px 560px at 82% -14%, rgba(0, 0, 0, .05), transparent 62%),
    radial-gradient(900px 420px at -6% 8%, rgba(0, 0, 0, .03), transparent 60%),
    var(--bg);
  text-rendering: optimizeLegibility;
}

::selection { background: #080808; color: #fff; }

/* =========================== SHELL ============================ */
@media (min-width: 620px) {
  .survey-app {
    border-radius: 22px;
    overflow: hidden;
    border-color: transparent;
    box-shadow: var(--elev-3);
    background: var(--bg);
  }
  .mobile-actions {
    border-radius: var(--radius-pill);
    bottom: 26px;
    width: min(calc(100% - 40px), 640px);
    border: 1px solid var(--line);
    box-shadow: var(--elev-2);
    padding: 10px;
  }
}

/* ========================== CABEÇALHO ========================= */
.mobile-header {
  background: linear-gradient(140deg, rgba(24, 24, 27, .97), rgba(8, 8, 8, .97));
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: saturate(170%) blur(14px);
  backdrop-filter: saturate(170%) blur(14px);
}
.mobile-header img {
  border-radius: 10px;
  background: #fff;
  padding: 4px;
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .9);
}
.mobile-header strong { letter-spacing: .6px; }
.mobile-header span { letter-spacing: .5px; }

/* ===================== TELAS DE ESTADO ======================== */
.state-card {
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: var(--elev-2);
  animation: m2-in .32s var(--ease) both;
}
.state-card h1 { letter-spacing: -1.4px; }

.loader {
  border-color: #ededeb;
  border-top-color: #080808;
  margin-inline: auto;
}

@keyframes m2-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ============================ HERO ============================ */
.survey-hero {
  position: relative;
  overflow: hidden;
  margin: 12px 12px 0;
  padding: 22px 18px 20px;
  border-radius: var(--radius);
  background: linear-gradient(150deg, #17171a 0%, #050505 58%, #000 100%);
  box-shadow: var(--elev-2);
}
.survey-hero::after {
  content: "";
  position: absolute;
  inset: auto -90px -140px auto;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.survey-hero > * { position: relative; z-index: 1; }
.survey-hero h1 {
  margin: 8px 0 8px;
  letter-spacing: -2.2px;
  font-size: clamp(30px, 9vw, 46px);
}
.survey-hero p { font-size: 12px; line-height: 1.5; }

.survey-unit-brand {
  margin-bottom: 16px;
  padding-bottom: 14px;
}
.survey-unit-brand .survey-unit-logo-wrap {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 12px;
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .9);
}
.survey-unit-brand strong { font-size: 17px; }

.hero-meta {
  margin-top: 16px;
  padding-top: 12px;
  letter-spacing: .8px;
}
.hero-meta strong { font-variant-numeric: tabular-nums; }

/* ========================== PROGRESSO ========================= */
.survey-progress-card {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--elev-1);
}
.progress-header strong { font-variant-numeric: tabular-nums; letter-spacing: -.4px; }
.progress-track {
  border-radius: var(--radius-pill);
  border-color: var(--line);
  height: 10px;
}
.progress-track i {
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #2a2a2e, #000);
  transition: width .7s var(--ease);
}

/* ===================== CARTÕES DE PERGUNTA ==================== */
.question-card,
.contact-card {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--elev-1);
}
.question-card h2,
.contact-card h2 { letter-spacing: -1.1px; }

/* ========================== RESPOSTAS ========================= */
.scale-button {
  border-radius: var(--radius-md);
  border-color: var(--line);
  background: linear-gradient(180deg, #fafbfc, #f4f5f7);
  font-variant-numeric: tabular-nums;
  transition: transform .18s var(--ease), background .2s var(--ease),
              color .2s var(--ease), border-color .2s var(--ease), box-shadow .22s var(--ease);
}
.scale-button:hover {
  border-color: #c9ccd2;
  transform: translateY(-1px);
  box-shadow: var(--elev-1);
}
.scale-button.selected {
  background: linear-gradient(145deg, #1c1c1f, #000);
  box-shadow: 0 14px 26px -16px rgba(0, 0, 0, .9);
}
.scale-button:focus-visible,
.choice-button:focus-visible,
.choice-check:focus-visible,
.primary-button:focus-visible,
.secondary-button:focus-visible {
  outline: 2px solid #080808;
  outline-offset: 2px;
}

.choice-button,
.choice-check {
  border-radius: var(--radius-md);
  border-color: var(--line);
  background: linear-gradient(180deg, #fafbfc, #f5f6f8);
  transition: transform .18s var(--ease), background .2s var(--ease),
              border-color .2s var(--ease), box-shadow .22s var(--ease);
}
.choice-button:hover,
.choice-check:hover {
  transform: translateX(2px);
  border-color: #c9ccd2;
  box-shadow: var(--elev-1);
}
.choice-button.selected,
.choice-check.selected {
  background: #fff;
  box-shadow: 0 0 0 1px #080808 inset, var(--elev-1);
}
.choice-button::before,
.choice-check::before { border-radius: 7px; }
.choice-button::before { border-radius: 50%; }
.choice-check.selected::before { border-radius: 7px; }

.text-answer,
.contact-fields input {
  border-radius: var(--radius-sm);
  border-color: var(--line);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.text-answer:hover,
.contact-fields input:hover { border-color: #d6d9df; }
.text-answer:focus,
.contact-fields input:focus {
  border-color: #080808;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .08);
}

/* =========================== CONTATO ========================== */
.contact-permission {
  border-radius: var(--radius-md);
  border-color: var(--line);
  background: linear-gradient(180deg, #fafbfc, #f4f5f7);
  transition: border-color .2s var(--ease), box-shadow .22s var(--ease);
}
.contact-permission:hover { border-color: #d6d9df; box-shadow: var(--elev-1); }
.contact-permission input { border-radius: 6px; accent-color: #080808; }
.contact-fields label span { letter-spacing: .8px; }

/* =========================== BOTÕES =========================== */
.primary-button,
.secondary-button {
  border-radius: var(--radius-pill);
  font-weight: 800;
  transition: transform .18s var(--ease), box-shadow .22s var(--ease),
              background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.primary-button { background: linear-gradient(145deg, #1c1c1f, #000); }
.primary-button:hover,
.secondary-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -14px rgba(16, 24, 40, .7);
}
.secondary-button:hover { border-color: #080808; background: #f6f7f9; }
.primary-button:active,
.secondary-button:active { transform: translateY(0); box-shadow: none; }

.mobile-actions {
  -webkit-backdrop-filter: saturate(170%) blur(14px);
  backdrop-filter: saturate(170%) blur(14px);
}

/* ========================== CONCLUSÃO ========================= */
.success-screen { animation: m2-in .36s var(--ease) both; }
.success-icon {
  border-radius: 20px;
  background: linear-gradient(145deg, #232326, #000);
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .8);
}
.success-screen h1 { letter-spacing: -1.4px; }
.success-brand img { border-radius: 10px; }

/* ========================== ACESSIBILIDADE ==================== */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}