/* Login JMDC: constelação de cobre, aurora, emblema em órbita e cartão de vidro */
.tela-login { min-height: 100dvh; overflow: hidden auto; background: #0d0c0b; }
#constelacao { position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 0; }
.aurora { position: fixed; inset: -20%; z-index: 0; filter: blur(70px); opacity: .55; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.aurora i:nth-child(1) { width: 52vmax; height: 52vmax; left: 52%; top: -6%; background: radial-gradient(circle, rgba(193, 138, 85, .55), transparent 65%); animation: vagar1 22s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 44vmax; height: 44vmax; left: -8%; top: 46%; background: radial-gradient(circle, rgba(143, 176, 122, .32), transparent 65%); animation: vagar2 26s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 36vmax; height: 36vmax; left: 34%; top: 62%; background: radial-gradient(circle, rgba(217, 164, 65, .28), transparent 65%); animation: vagar3 30s ease-in-out infinite alternate; }
@keyframes vagar1 { to { transform: translate(-14vmax, 10vmax) scale(1.15); } }
@keyframes vagar2 { to { transform: translate(16vmax, -12vmax) scale(.9); } }
@keyframes vagar3 { to { transform: translate(-10vmax, -16vmax) scale(1.2); } }
.grao { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.palco { position: relative; z-index: 2; min-height: 100dvh; display: grid; grid-template-columns: 1.05fr minmax(340px, 440px); align-items: center; gap: clamp(24px, 6vw, 96px);
    width: min(1180px, 100%); margin: 0 auto; padding: clamp(20px, 5vw, 56px) clamp(16px, 5vw, 48px); }

/* Emblema em órbita */
.vitrine { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.emblema { position: relative; width: clamp(220px, 30vw, 340px); aspect-ratio: 1; display: grid; place-items: center; animation: surgir 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.monograma { position: relative; z-index: 2; width: 52%; height: auto; filter: drop-shadow(0 0 18px rgba(201, 146, 98, .45)); animation: respirar 5.5s ease-in-out infinite; }
.orbita { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; overflow: visible; }
.orbita circle { stroke: rgba(201, 146, 98, .55); stroke-width: .7; stroke-linecap: round; }
.orbita-1 circle { stroke-dasharray: 2 6; }
.orbita-2 circle { stroke: rgba(201, 146, 98, .8); stroke-width: 1.1; stroke-dasharray: 520; stroke-dashoffset: 520; animation: tracar 2.4s .3s cubic-bezier(.6, .1, .2, 1) forwards; }
.orbita-3 circle { stroke: rgba(143, 176, 122, .45); stroke-dasharray: 40 18 4 18; }
.orbita-1 { animation: girar 90s linear infinite; } .orbita-3 { animation: girar 40s linear infinite reverse; }
.cometa { position: absolute; inset: 2%; z-index: 1; animation: girar 9s linear infinite; }
.cometa i { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #F3C595; box-shadow: 0 0 12px 3px rgba(243, 197, 149, .9), -14px 4px 18px 2px rgba(193, 138, 85, .35); }
.cometa-2 { inset: 16%; animation-duration: 14s; animation-direction: reverse; }
.cometa-2 i { width: 5px; height: 5px; background: #BFE0A6; box-shadow: 0 0 10px 2px rgba(143, 176, 122, .9); }
.lema { max-width: 30ch; font-size: clamp(1.15rem, 2.4vw, 1.6rem); font-weight: 300; line-height: 1.35; color: var(--texto-2); animation: surgir 1.1s .25s cubic-bezier(.2, .8, .2, 1) both; }
.lema span { font-weight: 800; background: linear-gradient(90deg, #F0C79C, var(--cobre), #F0C79C); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: reluzir 6s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes tracar { to { stroke-dashoffset: 0; } }
@keyframes respirar { 50% { transform: scale(1.04); filter: drop-shadow(0 0 28px rgba(201, 146, 98, .7)); } }
@keyframes reluzir { to { background-position: -200% center; } }
@keyframes surgir { from { opacity: 0; transform: translateY(18px) scale(.96); } }

/* Cartão */
.cartao-login { position: relative; padding: clamp(22px, 4vw, 34px); border-radius: 24px; background: linear-gradient(160deg, rgba(40, 31, 24, .78), rgba(20, 17, 14, .84));
    border: 1px solid rgba(201, 146, 98, .28); box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
    backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); animation: surgir .9s .15s cubic-bezier(.2, .8, .2, 1) both; }
.cartao-login::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
    background: conic-gradient(from var(--angulo, 0deg), transparent 0 70%, rgba(243, 197, 149, .9) 80%, transparent 90%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: contorno 7s linear infinite; }
@property --angulo { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes contorno { to { --angulo: 360deg; } }
.cartao-login.tremer { animation: tremer .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes tremer { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

.saudacao { margin-bottom: 18px; }
.saudacao-linha { font-size: .95rem; font-weight: 700; color: var(--cobre-claro); min-height: 1.5em; }
.saudacao-linha .cursor { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--cobre-claro); animation: piscar 1s steps(1) infinite; }
@keyframes piscar { 50% { opacity: 0; } }
.saudacao-data { font: 500 .8rem var(--f-mono); color: var(--oliva); }

.abas { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 20px; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(201, 146, 98, .18); }
.abas button { position: relative; z-index: 1; border: 0; background: none; min-height: 40px; font-weight: 800; font-size: .9rem; color: var(--texto-3); cursor: pointer; transition: color var(--transicao); }
.abas button[aria-selected="true"] { color: #1a120b; }
.abas-indicador { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 10px; background: linear-gradient(135deg, #E2B183, var(--cobre)); box-shadow: 0 6px 16px rgba(193, 138, 85, .35); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.abas[data-ativa="criar"] .abas-indicador { transform: translateX(100%); }
.abas.uma .abas-indicador, .abas.uma #aba-criar { display: none; }
.abas.uma { grid-template-columns: 1fr; }
.abas.uma .abas-indicador { display: block; width: calc(100% - 8px); }

.painel { display: flex; flex-direction: column; gap: 14px; animation: entrar-painel .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes entrar-painel { from { opacity: 0; transform: translateX(14px); } }
.titulo { font-size: clamp(1.45rem, 4vw, 1.8rem); font-weight: 800; letter-spacing: -.4px; line-height: 1.15; }
.titulo em { font-style: normal; background: linear-gradient(90deg, #F0C79C, var(--cobre)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.subtitulo { color: var(--texto-3); margin-top: -8px; font-size: .92rem; }

/* Campo com rótulo flutuante e sublinhado animado */
.flutuante { position: relative; }
.flutuante input { width: 100%; height: 56px; padding: 22px 16px 6px; border-radius: 14px; border: 1px solid rgba(201, 146, 98, .26); background: rgba(6, 5, 4, .5); color: var(--texto); font-size: 1rem; transition: border-color var(--transicao), background var(--transicao); }
.flutuante.com-acao input { padding-right: 52px; }
.flutuante label { position: absolute; left: 17px; top: 17px; color: var(--texto-3); font-weight: 600; pointer-events: none; transform-origin: left top; transition: transform var(--transicao), color var(--transicao); }
.flutuante input:focus, .flutuante input:not(:placeholder-shown) { outline: none; background: rgba(6, 5, 4, .7); }
.flutuante input:focus + label, .flutuante input:not(:placeholder-shown) + label { transform: translateY(-10px) scale(.76); color: var(--cobre-claro); }
.sublinhado { position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--oliva), var(--cobre-claro), var(--cobre)); transform: scaleX(0); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.flutuante input:focus ~ .sublinhado { transform: scaleX(1); }
.flutuante input:focus { border-color: rgba(201, 146, 98, .6); box-shadow: 0 0 0 4px rgba(193, 138, 85, .12); }
.flutuante input.invalido { border-color: rgba(224, 106, 79, .7); }
.olho { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--texto-3); cursor: pointer; display: grid; place-items: center; }
.olho:hover { color: var(--cobre-claro); background: rgba(193, 138, 85, .1); }
.olho svg { width: 20px; height: 20px; }
.olho .risco { stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .3s; }
.olho[aria-pressed="true"] .risco { stroke-dashoffset: 0; }
.caps { margin-top: -6px; font-size: .8rem; font-weight: 700; color: var(--atencao); }
.forca { display: flex; flex-direction: column; gap: 6px; margin-top: -4px; }
.forca-barra { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.forca-barra i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--perigo); transition: width .35s ease, background .35s ease; }
.forca small { color: var(--texto-3); font-size: .78rem; }

/* Botão com brilho, seta e carregamento */
.botao-brilho { position: relative; overflow: hidden; min-height: 52px; font-size: 1rem; border-radius: 14px; margin-top: 4px; }
.botao-brilho::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); animation: varrer 3.8s ease-in-out infinite; }
@keyframes varrer { 0%, 55% { left: -60%; } 100% { left: 140%; } }
.botao-brilho .seta { transition: transform var(--transicao); }
.botao-brilho:hover .seta { transform: translateX(4px); }
.giro { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(26, 18, 11, .3); border-top-color: #1a120b; animation: girar .7s linear infinite; }
.botao-brilho.carregando .giro { display: block; }
.botao-brilho.carregando .seta { display: none; }
.link-suave { align-self: center; color: var(--texto-3); font-size: .88rem; font-weight: 600; }
.link-suave:hover { color: var(--cobre-claro); }

/* Sucesso */
.painel-sucesso { align-items: center; text-align: center; padding: 22px 0 8px; }
.check { width: 84px; height: 84px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.check circle { stroke: var(--oliva); stroke-dasharray: 152; stroke-dashoffset: 152; animation: tracar .7s cubic-bezier(.65, 0, .45, 1) forwards; }
.check path { stroke: #F0C79C; stroke-dasharray: 40; stroke-dashoffset: 40; animation: tracar .45s .55s cubic-bezier(.65, 0, .45, 1) forwards; }

.rodape-login { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(201, 146, 98, .14); font-size: .76rem; color: var(--texto-3); }
.rodape-login a { color: var(--texto-2); }

@media (max-width: 900px) {
    .palco { grid-template-columns: 1fr; align-content: start; gap: 18px; padding-top: max(28px, env(safe-area-inset-top)); padding-bottom: 96px; }
    .vitrine { gap: 12px; }
    .emblema { width: clamp(140px, 40vw, 200px); }
    .lema { font-size: 1.05rem; }
    .cartao-login { width: 100%; max-width: 460px; margin: 0 auto; }
}
@media (max-width: 380px) { .lema { display: none; } }
@media (prefers-reduced-motion: reduce) { .aurora { display: none; } .cartao-login::before { display: none; } }

/* Versículo do dia e vigias 16 bits */
.versiculo { margin-top: 10px; font-size: .82rem; line-height: 1.45; color: var(--texto-2); cursor: pointer; transition: opacity .16s; }
.versiculo .versiculo-texto { font-style: italic; }
.versiculo .versiculo-ref { display: block; margin-top: 3px; font: 700 .72rem var(--f-mono); color: var(--cobre-claro); letter-spacing: .4px; }
.versiculo.versiculo-troca { opacity: 0; }
.vigias { display: block; width: 100%; height: 76px; margin: 6px 0 14px; image-rendering: pixelated; }
.pixelado { image-rendering: pixelated; }
.painel-pendente { align-items: center; text-align: center; padding: 18px 0 6px; }
.painel-pendente .ampulheta { font-size: 2.6rem; animation: girar 3s steps(8) infinite; }