/* ==========================================================================
   Criar / editar quiz — formulário em etapas.
   Uma etapa por vez, trilho de progresso no topo, barra de ação presa
   embaixo. Mesma linguagem editorial da home: papel, fio fino, bordô.
   Sem JS (html sem .js) todas as etapas aparecem empilhadas.
   ========================================================================== */

.create {
    padding-block: var(--s-6) 0;
}

.create-head {
    margin-bottom: var(--s-6);
}

.create-head h1 {
    margin-block: var(--s-3);
    font-size: var(--t-2xl);
    font-weight: 300;
    font-variation-settings: 'SOFT' 40, 'WONK' 1;
}

.create-head .lede { font-size: var(--t-base); }

/* ------------------------------------------------------------ rascunho -- */

.draft-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
    margin-bottom: var(--s-6);
    padding: var(--s-4) var(--s-5);
    background: var(--wine-tint);
    border: 1px solid rgba(107, 31, 46, 0.2);
    border-radius: var(--r-core);
    font-size: var(--t-sm);
    animation: rise 0.6s var(--ease-out) both;
}

.draft-banner[hidden] { display: none; }

.draft-banner p { color: var(--ink-soft); }
.draft-banner strong { color: var(--ink); }

.draft-banner-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ------------------------------------------------------------- stepper -- */

.stepper {
    display: none;
    list-style: none;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-2);
    margin-bottom: var(--s-6);
    counter-reset: step;
}

.js .stepper { display: grid; }

.stepper-item { position: relative; min-width: 0; }

.stepper-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
    width: 100%;
    padding: 0 0 var(--s-2);
    border: 0;
    border-bottom: 2px solid var(--line);
    background: none;
    color: var(--ink-faint);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.stepper-btn:disabled { cursor: default; }

.stepper-num {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    font-size: var(--t-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.stepper-label {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.stepper-btn.is-done { color: var(--ink-soft); border-bottom-color: var(--terracotta); }
.stepper-btn.is-done .stepper-num { border-color: var(--terracotta); color: var(--terracotta); }

.stepper-btn[aria-current="step"] { color: var(--wine); border-bottom-color: var(--wine); }
.stepper-btn[aria-current="step"] .stepper-num {
    background: var(--wine);
    border-color: var(--wine);
    color: var(--paper);
}

.stepper-btn:not(:disabled):hover { color: var(--wine); }

/* ---------------------------------------------------------------- etapa -- */

.quiz-form fieldset {
    border: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.step {
    padding-bottom: var(--s-7);
}

/* Sem JS: etapas empilhadas, separadas por fio */
.step + .step {
    padding-top: var(--s-7);
    border-top: 1px solid var(--line);
}

.js .step { display: none; }
.js .step + .step { padding-top: 0; border-top: 0; }
.js .step.is-active {
    display: block;
    animation: step-in 0.45s var(--ease-out) both;
}

@keyframes step-in {
    from { opacity: 0; transform: translateY(0.75rem); }
    to   { opacity: 1; transform: none; }
}

.step-kicker {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--terracotta);
}

.step-title {
    margin-block: var(--s-2) var(--s-2);
    font-size: var(--t-xl);
    font-weight: 400;
}

.step-title:focus { outline: none; }

.step-lede {
    margin-bottom: var(--s-6);
    color: var(--ink-soft);
    max-width: 52ch;
}

/* ------------------------------------------------------------ campos -- */

.field { margin-bottom: var(--s-5); }

.form-input--xl {
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-variation-settings: 'SOFT' 30, 'WONK' 1;
}

.field-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: var(--s-2);
}

.field-meta .char-counter { margin-top: 0; }

.field-hint {
    margin-top: var(--s-2);
    font-size: var(--t-xs);
    color: var(--ink-faint);
    line-height: 1.5;
}

.field-meta .field-hint { margin-top: 0; }

.field-error {
    margin-top: var(--s-2);
    font-size: var(--t-sm);
    color: var(--danger);
}

.field-error[hidden] { display: none; }

.form-input.is-invalid,
.form-input[aria-invalid="true"] {
    border-bottom-color: var(--danger);
}

textarea.form-input[aria-invalid="true"],
.file-drop.is-invalid { border-color: var(--danger); }

.char-counter.is-near { color: var(--warn); }
.char-counter.is-full { color: var(--danger); }

.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------------------- temas -- */

.theme-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--s-3);
}

.theme-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    cursor: pointer;
    text-align: center;
}

.theme-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.theme-swatch {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    max-width: 4.5rem;
    border-radius: var(--r-core);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    box-shadow: var(--inset-hi);
    overflow: hidden;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.theme-swatch-ink {
    position: absolute;
    left: 18%;
    right: 18%;
    top: 30%;
    height: 12%;
    border-radius: var(--radius-pill);
    background: var(--wine);
}

.theme-swatch-accent {
    position: absolute;
    left: 18%;
    width: 30%;
    top: 55%;
    height: 8%;
    border-radius: var(--radius-pill);
    background: var(--terracotta);
}

.theme-name {
    font-size: var(--t-xs);
    line-height: 1.3;
    color: var(--ink-soft);
}

.theme-current {
    display: none;
    margin-top: var(--s-3);
    font-size: var(--t-sm);
    color: var(--ink-soft);
}

.theme-current strong { color: var(--wine); font-weight: 600; }

.theme-option:hover .theme-swatch { transform: translateY(-2px); }

.theme-option input:checked + .theme-swatch {
    box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--wine);
}

.theme-option input:checked ~ .theme-name { color: var(--wine); font-weight: 600; }

.theme-option input:focus-visible + .theme-swatch {
    outline: 2px solid var(--terracotta);
    outline-offset: 5px;
}

/* ----------------------------------------------------------- disclosure -- */

.disclosure {
    margin-top: var(--s-5);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.disclosure summary {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding-block: var(--s-4);
    cursor: pointer;
    list-style: none;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink);
}

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

.disclosure summary::before {
    content: '+';
    display: inline-grid;
    place-items: center;
    width: 1.3rem;
    height: 1.3rem;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    font-weight: 400;
    color: var(--ink-soft);
    flex: none;
}

.disclosure[open] summary::before { content: '−'; }

.summary-hint {
    font-weight: 400;
    color: var(--ink-faint);
}

.disclosure-body { padding-bottom: var(--s-5); }

/* ---------------------------------------------------------------- slug -- */

.slug-input-wrapper {
    display: flex;
    align-items: baseline;
    gap: var(--s-1);
    border-bottom: 1px solid var(--line-strong);
}

.slug-input-wrapper:focus-within { border-bottom-color: var(--wine); }

.slug-input-wrapper .form-input {
    flex: 1;
    min-width: 0;
    border-bottom: 0;
}

.slug-input-wrapper .form-input:focus { background: none; }

.slug-prefix {
    font-size: var(--t-sm);
    color: var(--ink-faint);
    white-space: nowrap;
}

.slug-status {
    min-height: 1.3em;
    margin-top: var(--s-2);
    font-size: var(--t-sm);
    color: var(--ink-faint);
}

.slug-status.is-ok  { color: var(--ok); }
.slug-status.is-bad { color: var(--danger); }

/* ----------------------------------------------------------- perguntas -- */

.tip { margin-bottom: var(--s-5); }

.question-list {
    list-style: none;
    display: grid;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
}

.question-card {
    padding: var(--s-5);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-core);
    box-shadow: var(--inset-hi), var(--shadow-page);
    transition: border-color 0.3s var(--ease);
}

.question-card:focus-within { border-color: var(--line-strong); }

.question-card.is-new { animation: step-in 0.45s var(--ease-out) both; }

.question-card.has-error { border-color: rgba(155, 44, 44, 0.45); }

.question-card-head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
}

.question-number {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    border-radius: 50%;
    background: var(--wine);
    color: var(--paper);
    font-size: var(--t-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.question-card-title {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.question-card-tools {
    display: flex;
    gap: var(--s-1);
    margin-left: auto;
}

.question-card .field:last-child { margin-bottom: 0; }

.question-card .question-input {
    font-family: var(--font-display);
    font-size: var(--t-md);
    font-variation-settings: 'SOFT' 30, 'WONK' 1;
}

.icon-btn {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-faint);
    cursor: pointer;
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.icon-btn svg { width: 0.95rem; height: 0.95rem; }

.icon-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--line-strong); }
.icon-btn--danger:hover:not(:disabled) { color: var(--danger); border-color: rgba(155, 44, 44, 0.35); }
.icon-btn:disabled { opacity: 0.3; cursor: default; }
.icon-btn[hidden] { display: none; }

.answer-variants {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1) var(--s-2);
    min-height: 0;
    margin-top: var(--s-2);
    font-size: var(--t-xs);
    color: var(--ink-faint);
}

.answer-variants:empty { display: none; }

.variant {
    padding: 0.1em 0.6em;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    color: var(--ink-soft);
    background: var(--paper-warm);
}

.questions-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
}

.questions-count {
    font-size: var(--t-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}

.questions-count strong { color: var(--wine); font-size: var(--t-sm); }

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-3);
}

.chip {
    padding: 0.45em 0.9em;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: var(--paper);
    color: var(--ink-soft);
    font-size: var(--t-sm);
    text-align: left;
    cursor: pointer;
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.chip:hover { color: var(--wine); border-color: var(--wine); background: var(--wine-tint); }
.chip.is-used { opacity: 0.45; }

/* ------------------------------------------------------------ presente -- */

.choice-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}

.choice { position: relative; cursor: pointer; }

.choice input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.choice-body {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    height: 100%;
    padding: var(--s-4);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-core);
    box-shadow: var(--inset-hi);
    transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.choice-title {
    font-family: var(--font-display);
    font-size: var(--t-md);
    color: var(--ink);
    font-variation-settings: 'SOFT' 30, 'WONK' 1;
}

.choice-desc {
    font-size: var(--t-xs);
    line-height: 1.45;
    color: var(--ink-faint);
}

.choice:hover .choice-body { transform: translateY(-2px); border-color: var(--wine); }

.choice input:checked + .choice-body {
    background: var(--wine-tint);
    border-color: var(--wine);
    box-shadow: inset 0 0 0 1px var(--wine);
}

.choice input:checked + .choice-body .choice-title { color: var(--wine); }

.choice input:focus-visible + .choice-body {
    outline: 2px solid var(--terracotta);
    outline-offset: 3px;
}

.prize-panel {
    margin-bottom: var(--s-6);
    padding: var(--s-5);
    background: var(--paper-warm);
    border: 1px solid var(--line);
    border-radius: var(--r-core);
    box-shadow: var(--inset-hi);
}

.prize-panel[hidden] { display: none; }
.prize-panel .field:last-child { margin-bottom: 0; }

/* Arquivo: o input nativo fica por cima, invisível — área inteira clicável */
.file-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    padding: var(--s-6) var(--s-4);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-core);
    background: var(--paper);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.file-drop--compact { padding: var(--s-4); }

.file-drop input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-drop:hover,
.file-drop:focus-within { border-color: var(--wine); background: var(--wine-tint); }

.file-drop-title {
    font-weight: 600;
    color: var(--wine);
    word-break: break-word;
}

.file-drop-hint { font-size: var(--t-xs); color: var(--ink-faint); }

.image-preview { margin-top: var(--s-4); }
.image-preview[hidden] { display: none; }

.image-preview img {
    max-height: 14rem;
    width: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
}

/* ---------------------------------------------------------- subseções -- */

.subsection {
    margin-top: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
}

.premium-lock > .subsection:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }

.subsection-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    flex-wrap: wrap;
}

.subsection-title {
    margin-bottom: var(--s-3);
    font-size: var(--t-lg);
}

.premium-note { margin-bottom: var(--s-6); }

.premium-lock:disabled,
.premium-lock.is-locked { opacity: 0.55; }

.subsection.is-locked .premium-lock { opacity: 0.55; }

.mini-list {
    list-style: none;
    display: grid;
    gap: var(--s-4);
    margin-top: var(--s-4);
}

.mini-label {
    display: block;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
}

.mini-q {
    display: block;
    margin-top: 2px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-q:empty { display: none; }

.photo-current {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-top: var(--s-4);
}

.photo-current[hidden] { display: none; }

.photo-current img {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--paper);
    box-shadow: 0 0 0 1px var(--line-strong);
}

.timeline-list {
    list-style: none;
    display: grid;
    gap: var(--s-3);
    margin-block: var(--s-4);
}

.timeline-list:empty { margin-block: var(--s-3); }

.timeline-row {
    display: grid;
    grid-template-columns: 10.5rem minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--s-3);
}

.btn-small { padding: 0.65em 1.3em; font-size: var(--t-xs); }

.check {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-sm);
    color: var(--ink-soft);
    cursor: pointer;
}

/* Interruptor: checkbox real, só a aparência muda */
.switch {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
    padding-block: var(--s-3);
    cursor: pointer;
}

.switch + .switch { border-top: 1px solid var(--line); }

.switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.switch-track {
    position: relative;
    flex: none;
    width: 2.6rem;
    height: 1.5rem;
    margin-top: 0.1rem;
    border-radius: var(--radius-pill);
    background: var(--paper-deep);
    border: 1px solid var(--line-strong);
    transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.switch-track::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.15rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--paper);
    box-shadow: 0 1px 2px rgba(36, 26, 24, 0.25);
    transform: translateY(-50%);
    transition: transform 0.35s var(--ease);
}

.switch input:checked + .switch-track { background: var(--wine); border-color: var(--wine); }
.switch input:checked + .switch-track::after { transform: translate(1.08rem, -50%); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--terracotta); outline-offset: 3px; }

.switch-text { display: grid; gap: 2px; font-size: var(--t-sm); }
.switch-text strong { font-weight: 600; color: var(--ink); }
.switch-text span { color: var(--ink-faint); }

/* ------------------------------------------------------------- música -- */

.track-list {
    display: grid;
    gap: var(--s-2);
    margin-top: var(--s-4);
}

.track {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-core);
    overflow: hidden;
    transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.track:has(input:checked) {
    background: var(--wine-tint);
    border-color: var(--wine);
}

.track-choice {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex: 1;
    min-width: 0;
    min-height: 2.5rem;
    cursor: pointer;
}

.track-choice input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.track-dot {
    position: relative;
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--paper);
}

.track-choice input:checked + .track-dot { border-color: var(--wine); }
.track-choice input:checked + .track-dot::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--wine);
}

.track-choice input:focus-visible + .track-dot { outline: 2px solid var(--terracotta); outline-offset: 3px; }

.track-title {
    font-family: var(--font-display);
    font-size: var(--t-md);
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variation-settings: 'SOFT' 30, 'WONK' 1;
}

.track-play {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    flex: none;
    padding: 0.5em 0.9em;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: var(--paper);
    color: var(--ink-soft);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.track-play svg { width: 0.8rem; height: 0.8rem; }
.track-play .track-icon-stop { display: none; }

.track-play:hover { color: var(--wine); border-color: var(--wine); }

.track.is-playing .track-play { background: var(--wine); border-color: var(--wine); color: var(--paper); }
.track.is-playing .track-icon-play { display: none; }
.track.is-playing .track-icon-stop { display: block; }

/* Barra de 15 s na base do cartão */
.track-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    pointer-events: none;
}

.track-progress-fill {
    display: block;
    height: 100%;
    background: var(--terracotta);
    transform: scaleX(0);
    transform-origin: left;
}

/* ------------------------------------------------------------- revisão -- */

.review {
    display: grid;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}

.review-section {
    padding: var(--s-4) var(--s-5);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-core);
    box-shadow: var(--inset-hi);
}

.review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-2);
}

.review-head h3 {
    font-family: var(--font-body);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.review-edit {
    padding: 0;
    border: 0;
    background: none;
    color: var(--wine);
    font-size: var(--t-sm);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.review-main {
    font-family: var(--font-display);
    font-size: var(--t-md);
    line-height: 1.35;
    font-variation-settings: 'SOFT' 30, 'WONK' 1;
    overflow-wrap: anywhere;
}

.review-sub {
    margin-top: var(--s-1);
    font-size: var(--t-sm);
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

.review-qa {
    list-style: none;
    display: grid;
    gap: var(--s-2);
    margin-top: var(--s-2);
    counter-reset: qa;
}

.review-qa li {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: var(--s-2);
    font-size: var(--t-sm);
    counter-increment: qa;
}

.review-qa li::before {
    content: counter(qa);
    color: var(--terracotta);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.review-qa .qa-a { display: block; color: var(--ink-faint); }

.review-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }

.review-warnings {
    list-style: none;
    display: grid;
    gap: var(--s-2);
    margin-bottom: var(--s-5);
}

.review-warnings:empty { display: none; }

.review-warnings li {
    padding: var(--s-3) var(--s-4);
    border-left: 2px solid var(--warn);
    background: var(--paper-warm);
    font-size: var(--t-sm);
    color: var(--ink-soft);
}

.captcha-block {
    display: flex;
    justify-content: center;
    margin-top: var(--s-5);
}

.form-note {
    margin-top: var(--s-5);
    text-align: center;
    font-size: var(--t-sm);
    color: var(--ink-faint);
}

/* ------------------------------------------------------ barra de ações -- */

.wizard-bar {
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    display: none;
    align-items: center;
    gap: var(--s-3);
    margin-inline: calc(var(--s-5) * -1);
    padding: var(--s-3) var(--s-5);
    padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
    background: rgba(247, 241, 232, 0.9);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border-top: 1px solid var(--line);
}

.js .wizard-bar { display: flex; }

.wizard-bar-status {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}

.wizard-bar-actions {
    display: flex;
    gap: var(--s-2);
    margin-left: auto;
}

.wizard-bar .btn[hidden] { display: none; }
#prevBtn[disabled] { visibility: hidden; }

.btn .btn-loader { display: inline-flex; align-items: center; gap: var(--s-2); }

.spinner {
    width: 12px;
    height: 12px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

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

/* ------------------------------------------------------- rate limit -- */

/* ------------------------------------------------------ escolha de plano -- */

.wrap.wrap--plans { max-width: 60rem; }

.plans { padding-bottom: var(--s-9); }

.plans-head {
    max-width: 38rem;
    margin-inline: auto;
    text-align: center;
}

.plans-head .lede { margin-inline: auto; }

.plans-note {
    max-width: 38rem;
    margin: 0 auto var(--s-6);
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5);
    align-items: stretch;
}

.plan {
    display: flex;
    flex-direction: column;
    padding: var(--s-6);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-shell);
    box-shadow: var(--inset-hi), var(--shadow-page);
    animation: rise 0.6s var(--ease-out) both;
}

.plan--premium {
    border-color: rgba(107, 31, 46, 0.35);
    box-shadow: var(--inset-hi), var(--inset-lo), var(--shadow-lift);
}

.plan--free {
    background: var(--paper-warm);
    animation-delay: 0.08s;
}

.plan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}

.plan-name {
    margin: 0;
    font-size: var(--t-xs);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.plan--premium .plan-name { color: var(--gold); }

.plan-tag {
    padding: 0.25em 0.8em;
    border-radius: var(--radius-pill);
    background: var(--wine);
    color: var(--paper);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.plan-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-block: var(--s-4) var(--s-2);
}

.plan-price-value {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 3.2rem);
    font-weight: 300;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-variation-settings: 'SOFT' 40, 'WONK' 1;
}

.plan--premium .plan-price-value { color: var(--wine); }

.plan-price-note {
    font-size: var(--t-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.plan-desc {
    margin-top: var(--s-3);
    font-size: var(--t-sm);
    color: var(--ink-soft);
}

.plan-list {
    list-style: none;
    margin: var(--s-3) 0 var(--s-6);
    padding: 0;
    flex: 1;
}

.plan-list li {
    position: relative;
    padding: var(--s-2) 0 var(--s-2) 1.75rem;
    border-bottom: 1px solid var(--line);
    font-size: var(--t-sm);
    line-height: 1.4;
}

.plan-list li:last-child { border-bottom: 0; }

.plan-list li::before {
    position: absolute;
    left: 0;
    top: var(--s-2);
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
}

.plan-list li.is-yes::before {
    content: '✓';
    background: rgba(79, 107, 70, 0.14);
    color: var(--ok);
}

.plan-list li.is-no {
    color: var(--ink-faint);
    text-decoration: line-through;
    text-decoration-color: var(--line-strong);
}

.plan-list li.is-no::before {
    content: '✕';
    background: rgba(36, 26, 24, 0.07);
    color: var(--ink-faint);
}

.plan-action { margin-top: auto; }

.plan-btn { width: 100%; }
.plan-btn[hidden] { display: none; }
.plan-btn[aria-busy="true"] { cursor: progress; opacity: 0.8; }

.plan-foot {
    margin-top: var(--s-3);
    font-size: var(--t-xs);
    color: var(--ink-faint);
    text-align: center;
}

.plan-foot[hidden] { display: none; }

.plan-locked {
    margin-top: auto;
    padding: var(--s-4);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-core);
    font-size: var(--t-sm);
    color: var(--ink-soft);
    text-align: center;
}

.plan-locked p:first-child { margin-bottom: var(--s-3); }
.plan-locked strong { color: var(--wine); }

.plan-paid { margin-bottom: var(--s-6); }

.plan-switch {
    margin: calc(-1 * var(--s-3)) 0 var(--s-5);
    font-size: var(--t-sm);
    color: var(--ink-faint);
}

@media (max-width: 720px) {
    .plans-grid { grid-template-columns: 1fr; }
    .plan { padding: var(--s-5) var(--s-4); }
}

@media (prefers-reduced-motion: reduce) {
    .plan { animation: none; }
}

.rate-limit-warning {
    max-width: 34rem;
    margin: var(--s-6) auto var(--s-9);
    padding: var(--s-8) var(--s-6);
    text-align: center;
    background: var(--paper-warm);
    border: 1px solid var(--line);
    border-radius: var(--r-shell);
    box-shadow: var(--inset-hi), var(--shadow-page);
}

.rate-limit-warning h1 { margin-block: var(--s-4); font-size: var(--t-xl); }
.time-remaining { color: var(--ink-soft); }
.time-remaining strong { color: var(--wine); font-weight: 600; }

.rate-limit-warning .info-text {
    margin-block: var(--s-3) var(--s-6);
    font-size: var(--t-sm);
    color: var(--ink-faint);
}

.rate-limit-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--s-3);
}

.rate-limit-actions .btn { flex: 1 1 13rem; }
.rate-limit-actions .btn[hidden] { display: none; }

.rate-limit-warning .rate-limit-hint { margin-block: var(--s-5) 0; }
.rate-limit-warning .rate-limit-hint[hidden] { display: none; }

/* --------------------------------------------------------------- modal -- */

.modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-4);
    background: rgba(36, 26, 24, 0.55);
    backdrop-filter: blur(4px);
}

.modal[hidden] { display: none; }

.modal-content {
    position: relative;
    width: 100%;
    max-width: 34rem;
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    padding: var(--s-7) var(--s-6) var(--s-6);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-shell);
    box-shadow: var(--inset-hi), var(--shadow-lift);
    animation: rise 0.55s var(--ease-out) both;
    text-align: center;
}

.success-icon {
    width: 12px;
    height: 12px;
    margin: 0 auto var(--s-4);
    background: var(--terracotta);
    transform: rotate(45deg);
}

.modal-content h2 { margin-block: var(--s-3) var(--s-2); font-size: var(--t-xl); }
.modal-content h2:focus { outline: none; }

.success-message {
    color: var(--ink-soft);
    font-size: var(--t-sm);
    margin-bottom: var(--s-5);
}

.link-box { text-align: left; margin-bottom: var(--s-5); }

.link-display {
    display: flex;
    gap: var(--s-2);
    align-items: stretch;
}

.link-input {
    flex: 1;
    min-width: 0;
    padding: var(--s-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--paper-warm);
    font-family: var(--font-body);
    font-size: var(--t-sm);
    color: var(--ink-soft);
}

.btn-copy { flex: none; padding-inline: var(--s-4); font-size: var(--t-xs); }

.share-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2);
    margin-top: var(--s-3);
}

.manage-box {
    display: grid;
    gap: var(--s-3);
    text-align: left;
}

.manage-box p { color: var(--ink-soft); }
.manage-box strong { color: var(--ink); }
.manage-box .link-input { background: var(--paper); }
.manage-box .link-rule { justify-self: start; }

/* ---------------------------------------------------------- responsivo -- */

@media (max-width: 760px) {
    .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .theme-grid  { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); }
    .theme-name  { font-size: 0.68rem; }

    /* Trilho compacto: só números; o rótulo aparece na etapa ativa */
    .stepper-label { display: none; }
    .stepper-btn { align-items: center; }
    .stepper-btn[aria-current="step"] .stepper-label {
        display: block;
        max-width: none;
        overflow: visible;
        font-size: 0.65rem;
        letter-spacing: 0.02em;
    }
}

@media (max-width: 560px) {
    .create { padding-top: var(--s-4); }
    .create-head { margin-bottom: var(--s-5); }
    .question-card { padding: var(--s-4); }
    .prize-panel { padding: var(--s-4); }
    .slug-input-wrapper { flex-wrap: wrap; }
    .slug-prefix { width: 100%; }
    .timeline-row { grid-template-columns: minmax(0, 1fr) auto; }
    .timeline-row input[type="date"] { grid-column: 1 / -1; }
    .timeline-row input[type="text"] { grid-column: 1; }
    .modal-content { padding: var(--s-6) var(--s-4) var(--s-5); }
    .link-display { flex-direction: column; }
    .share-row { grid-template-columns: 1fr; }
    .wizard-bar-status { display: none; }
    .wizard-bar .btn { padding-inline: 1.1em; }

    .js .theme-current { display: block; }

    /* Nome do tema some da tela mas continua sendo o rótulo do rádio */
    .theme-name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Acompanha o recuo de .wrap em base.css para a barra ir de borda a borda */
@media (max-width: 460px) {
    .wizard-bar { margin-inline: calc(var(--s-4) * -1); padding-inline: var(--s-4); }
}