:root { --fundo: #0b0920; --cartao: #151231; --borda: #262247; --tinta: #ecebf7; --suave: #9a96b9; --ambar: #f59e0b; --roxo: #7c6cf2; --verde: #34d399; --erro: #f87171 }
* { box-sizing: border-box }
[hidden] { display: none !important }
body { margin: 0; min-height: 100vh; background: var(--fundo); color: var(--tinta); font: 16px/1.5 "Inter", sans-serif }
h1, h2, h3 { font-family: "Outfit", sans-serif; letter-spacing: -0.01em; margin: 0 0 8px }
h1 { font-size: clamp(28px, 6vw, 40px); line-height: 1.1 }
em { font-style: normal; color: var(--ambar) }
.topo { display: flex; justify-content: space-between; align-items: center; padding: 16px; max-width: 880px; margin: 0 auto }
.marca { font: 800 22px "Outfit", sans-serif }
main { max-width: 880px; margin: 0 auto; padding: 8px 16px 64px }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 18px; padding: 20px; margin-bottom: 14px }
.suave { color: var(--suave) }
label { display: grid; gap: 6px; margin-bottom: 14px; font-weight: 600; font-size: 14px }
input, select, textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borda); background: #0e0b25; color: var(--tinta); font: inherit }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--roxo); outline-offset: 1px }
textarea { min-height: 140px; resize: vertical }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px }
.opcoes label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border: 1px solid var(--borda); border-radius: 999px; font-weight: 500; cursor: pointer }
.opcoes input { width: auto }
button { font: 700 16px "Inter", sans-serif; cursor: pointer; border: 0; border-radius: 999px; padding: 13px 22px }
.principal { background: var(--ambar); color: #241604 }
.secundario { background: transparent; color: var(--tinta); border: 1px solid var(--borda) }
.link { background: none; color: var(--suave); padding: 6px; text-decoration: underline }
button:disabled { opacity: .6; cursor: wait }
.abas { display: flex; gap: 6px; margin-bottom: 18px }
.abas button { flex: 1; background: transparent; color: var(--suave); border: 1px solid var(--borda) }
.abas button[aria-pressed="true"] { background: var(--roxo); color: #fff; border-color: var(--roxo) }
.progresso { height: 10px; border-radius: 6px; background: #1c1842; overflow: hidden; margin: 10px 0 4px }
.progresso i { display: block; height: 100%; background: var(--ambar); transition: width .4s }
.passos { display: grid; gap: 10px }
.passo { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; width: 100%; text-align: left; background: var(--cartao); color: var(--tinta); border: 1px solid var(--borda); border-radius: 16px; padding: 14px 16px }
.passo .num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #1c1842; font: 800 16px "Outfit", sans-serif }
.passo.feito .num { background: var(--verde); color: #062b1e }
.passo small { display: block; color: var(--suave); font-weight: 400 }
.selo { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: #1c1842; color: var(--suave); white-space: nowrap }
.feito .selo { background: #0f2f2a; color: var(--verde) }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px }
.logo-previa { width: 96px; height: 96px; border-radius: 22px; object-fit: contain; background: #fff; display: block; margin-bottom: 10px }
.erro { color: var(--erro); font-size: 14px; min-height: 20px }
#aviso { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: #241f52; border: 1px solid #3a3370; padding: 12px 18px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); max-width: calc(100% - 32px) }
table { width: 100%; border-collapse: collapse; font-size: 14px }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borda); vertical-align: top }
th { color: var(--suave); font-weight: 600 }
.tabela { overflow-x: auto }
@media (max-width: 560px) { .passo { grid-template-columns: 36px 1fr } .passo .selo { grid-column: 2 } }