/* O seu Ano Pessoal 2027 (prefixo .ap-) */
.ap-app { position: relative; }
.ap-hero { position: relative; overflow: hidden; text-align: center; padding: 26px 18px 22px; margin-bottom: 16px; border-radius: var(--radius); border: 1px solid var(--line);
  background: radial-gradient(110% 90% at 50% 0%, rgba(216,181,106,.22), transparent 60%), radial-gradient(90% 70% at 50% 110%, rgba(155,132,242,.26), transparent 70%), linear-gradient(180deg, #221743, #120e2c); }
.ap-hero > *:not(.ap-estrelas) { position: relative; z-index: 1; }
.ap-titulo { font-family: var(--display); font-size: clamp(30px, 8vw, 44px); line-height: 1.08; margin: 8px 0 10px; color: #fff; text-wrap: balance; }
.ap-lede { margin: 0 auto; max-width: 560px; }
.ap-estrelas { position: absolute; inset: 0; pointer-events: none; }
.ap-estrelas span { position: absolute; color: var(--gold-soft); opacity: 0; text-shadow: 0 0 8px rgba(216,181,106,.7); animation: ap-pisca 4s ease-in-out infinite; }
@keyframes ap-pisca { 0%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: .9; transform: scale(1); } }

.ap-form { display: grid; gap: 12px; }
.ap-linha { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.ap-campo { display: grid; gap: 5px; font-size: 14px; color: var(--muted); }
.ap-campo select { width: 100%; box-sizing: border-box; background: var(--surface-2); color: var(--fg); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; font: 500 16px var(--body); color-scheme: dark; }
.ap-campo select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(216,181,106,.18); }
.ap-dica, .ap-priv { margin: 0; }
.ap-priv { text-align: center; }
.ap-msg { color: var(--hot); margin: 0; min-height: 1em; }
.ap-btn-full { width: 100%; justify-content: center; font-size: 16px; padding: 14px; }
.ap-cota:empty { display: none; }

.ap-resultado { margin-top: 18px; scroll-margin-top: 70px; }
.ap-revela { position: relative; overflow: hidden; text-align: center; padding: 26px 16px 22px;
  background: radial-gradient(80% 70% at 50% 40%, rgba(216,181,106,.16), transparent 70%), linear-gradient(180deg, #1f1747, #120e2c); border-color: rgba(216,181,106,.4); }
.ap-confete { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.ap-numero { display: inline-flex; gap: 6px; margin: 14px auto 6px; font: 600 112px/1 var(--display); color: var(--gold); }
.ap-rolo { display: block; height: 1em; width: .72em; overflow: hidden; border-radius: 14px; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(255,255,255,.04) 50%, rgba(0,0,0,.35)); border: 1px solid rgba(216,181,106,.35); padding: 0 .06em; }
.ap-fita { display: flex; flex-direction: column; transition: transform 2s cubic-bezier(.15,.85,.25,1); will-change: transform; }
.ap-fita b { display: block; height: 1em; line-height: 1em; font-weight: 600; }
.ap-revela.pronto .ap-numero { animation: ap-brilho 2.4s ease-in-out infinite; }
.ap-revela.pronto .ap-rolo { border-color: var(--gold); box-shadow: 0 0 26px rgba(216,181,106,.45), inset 0 0 16px rgba(216,181,106,.2); }
@keyframes ap-brilho { 0%, 100% { text-shadow: 0 0 14px rgba(216,181,106,.45); } 50% { text-shadow: 0 0 34px rgba(239,217,166,.95), 0 0 60px rgba(216,181,106,.5); } }
.ap-tema { font-family: var(--display); font-size: clamp(28px, 7vw, 38px); line-height: 1.1; margin: 10px 0 12px; color: #fff; opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .6s; }
.ap-kw { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; opacity: 0; transition: opacity .6s .2s; }
.ap-kw li { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(216,181,106,.45); color: var(--gold-soft); font-size: 14px; font-weight: 600; background: rgba(216,181,106,.08); }
.ap-revela.pronto .ap-tema, .ap-revela.pronto .ap-kw { opacity: 1; transform: none; }

.ap-bloco { margin: 26px 0; }
.ap-cascata { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.ap-cascata.on { opacity: 1; transform: none; }
.ap-h3 { font-family: var(--display); font-size: clamp(24px, 6vw, 30px); line-height: 1.15; margin: 6px 0 10px; }
.ap-texto { line-height: 1.65; }

.ap-conta { padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); margin-top: 8px; }
.ap-conta-leg { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.ap-conta-leg span { padding: 3px 9px; border-radius: 999px; background: var(--surface-2); }
.ap-conta-linha { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 5px; font: 600 20px var(--body); }
.ap-conta-linha i { font-style: normal; color: var(--muted); font-weight: 500; }
.ap-d { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 34px; padding: 0 8px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); }
.ap-dd { color: #f6a5c0; } .ap-mm { color: #9fd8e6; } .ap-aa { color: var(--violet); }
.ap-d.soma { color: var(--fg); }
.ap-d.fim { color: #1a1430; background: var(--gold); border-color: var(--gold); box-shadow: 0 0 16px rgba(216,181,106,.5); }
.ap-mestre { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(216,181,106,.1); border: 1px solid rgba(216,181,106,.35); font-size: 15px; }

.ap-simb { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 8px; }
.ap-simb-i { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.ap-simb-i small { display: block; color: var(--muted); font-size: 12px; }
.ap-cor { width: 34px; height: 34px; flex: none; border-radius: 50%; box-shadow: 0 0 14px rgba(255,255,255,.18), inset 0 -4px 8px rgba(0,0,0,.25); border: 2px solid rgba(255,255,255,.25); }
.ap-cristal { width: 34px; height: 34px; flex: none; display: grid; place-items: center; font-size: 24px; color: var(--violet); text-shadow: 0 0 12px rgba(155,132,242,.8); }

.ap-roda { display: block; width: 100%; max-width: 320px; margin: 6px auto 4px; }
.ap-roda-anel { fill: none; stroke: rgba(216,181,106,.25); stroke-width: 1.5; }
.ap-roda-anel.fino { stroke: rgba(155,132,242,.2); stroke-dasharray: 3 5; }
.ap-roda-n { font: 600 58px var(--display); fill: var(--gold); text-anchor: middle; }
.ap-roda-l { font: 700 9px var(--body); letter-spacing: 2px; fill: var(--muted); text-anchor: middle; }
.ap-seg circle { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; transition: fill .5s, stroke .5s, filter .5s; transition-delay: calc(var(--i) * 110ms); }
.ap-seg text { text-anchor: middle; fill: var(--muted); transition: fill .5s; transition-delay: calc(var(--i) * 110ms); }
.ap-seg-m { font: 700 8px var(--body); letter-spacing: .5px; }
.ap-seg-n { font: 600 13px var(--body); }
.ap-roda.on .ap-seg circle { fill: rgba(155,132,242,.16); stroke: rgba(155,132,242,.5); }
.ap-roda.on .ap-seg.livre circle { fill: rgba(216,181,106,.22); stroke: var(--gold); filter: drop-shadow(0 0 6px rgba(216,181,106,.75)); }
.ap-roda.on .ap-seg.livre text { fill: var(--gold-soft); }
.ap-roda.on .ap-seg text { fill: var(--fg); }

.ap-meses { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.ap-mes { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.ap-mes p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.ap-mes-n { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font: 600 24px var(--display); color: #1a1430; background: linear-gradient(180deg, #efd9a6, #d8b56a); box-shadow: 0 0 14px rgba(216,181,106,.35); }

.ap-share { text-align: center; margin: 26px 0; }
.ap-share-frase { font-family: var(--display); font-size: 22px; line-height: 1.3; margin: 6px 0 12px; color: var(--gold-soft); }
.ap-share-bts, .ap-trava-bts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ap-share-msg { margin: 8px 0 0; min-height: 1em; }

.ap-trava h3 { margin-top: 6px; }
.ap-trava-prev { position: relative; margin: 10px 0 14px; max-height: 340px; overflow: hidden; border-radius: 14px; user-select: none; pointer-events: none; }
.ap-trava-prev::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,12,34,0) 30%, rgba(15,12,34,.92)); }
.ap-trava-prev .ap-mes-n { background: var(--surface-2); color: var(--muted); box-shadow: none; }
.ap-borrado { filter: blur(5px); opacity: .75; }
.ap-areas { display: grid; gap: 10px; margin-top: 10px; }
.ap-areas > div { padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.ap-areas p { margin: 6px 0 0; font-size: 14px; }
.ap-cadeado { position: absolute; z-index: 1; left: 50%; top: 45%; transform: translate(-50%, -50%); font-size: 40px; filter: drop-shadow(0 0 14px rgba(216,181,106,.8)); }

.ap-mail { margin-top: 22px; }
.ap-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 8px; }
.ap-link { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--fg); text-decoration: none; font-weight: 600; font-size: 14px; transition: border-color .2s, transform .2s; }
.ap-link span { font-size: 20px; }
.ap-link:hover { border-color: var(--gold); transform: translateY(-2px); }

@media (max-width: 380px) { .ap-links, .ap-simb { grid-template-columns: 1fr; } .ap-numero { font-size: 92px; } }
@media (prefers-reduced-motion: reduce) {
  .ap-estrelas span, .ap-revela.pronto .ap-numero { animation: none; }
  .ap-fita, .ap-tema, .ap-kw, .ap-cascata, .ap-seg circle, .ap-seg text, .ap-link { transition: none; }
}