/* Login flutuante sobre a landing: cartão de vidro dentro de um <dialog>. Sempre escuro, em qualquer tema. */
.l-login { --fg: #F2F6F4; --fg-2: #B2C3CA; --line: rgba(255, 255, 255, .12); --accent: #5BE3C4; --accent-fg: #5BE3C4; --on-accent: #0B1B2B; --surface: #0F2234; --amber: #F5B63D; color: var(--fg); width: min(470px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; }
.l-login::backdrop { background: rgba(4, 10, 17, .66); backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); }
.l-login[open] { animation: lg-in .55s cubic-bezier(.2, .8, .2, 1) both; }
.l-login[open]::backdrop { animation: lg-fade .4s ease both; }
@keyframes lg-in { from { opacity: 0; transform: translateY(34px) scale(.96); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lg-close { position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .06); color: var(--fg-2); cursor: pointer; transition: background .2s, color .2s; }
.lg-close:hover { background: rgba(255, 255, 255, .14); color: var(--fg); }
.lg-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lg-close:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
/* Cartão de vidro */
.lg-card { position: relative; border-radius: 30px; padding: 1px; background: linear-gradient(160deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .05) 38%, rgba(91, 227, 196, .22)); box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .25); }
.lg-card-inner { display: grid; gap: 18px; padding: clamp(28px, 4vw, 44px); border-radius: 29px; background: linear-gradient(180deg, rgba(20, 44, 66, .86), rgba(11, 27, 43, .92)); backdrop-filter: blur(26px) saturate(140%); -webkit-backdrop-filter: blur(26px) saturate(140%); }
.lg-cell { width: 34px; height: auto; overflow: visible; margin-bottom: 4px; }
.lg-kicker { margin: 0; font: 700 .78rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-2); }
.lg-card h2 { margin: -6px 0 0; font: 700 clamp(2.4rem, 5vw, 3.1rem)/1 var(--font-display); font-stretch: 92%; letter-spacing: -.035em; }
.lg-lead { margin: 0; color: var(--fg-2); font-size: 1.04rem; line-height: 1.6; }

/* Botão principal */
.lg-google { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 58px; margin-top: 6px; padding: 0 26px; border: 0; border-radius: 99px; background: #F7FAF9; color: #0B1B2B; font: 700 1.05rem var(--font-body); cursor: pointer; overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 14px 34px -10px rgba(91, 227, 196, .45); transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
.lg-google::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(91, 227, 196, .35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s; }
.lg-google:hover:not(:disabled)::before { transform: translateX(120%); }
.lg-google:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 20px 44px -10px rgba(91, 227, 196, .6); }
.lg-google:active:not(:disabled) { transform: translateY(0) scale(.99); }
.lg-google:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.lg-google:disabled { cursor: progress; background: #DCE7E3; box-shadow: none; }
.g-icon svg { display: block; width: 24px; height: 24px; }
.g-dots { display: none; grid-template-columns: repeat(2, 7px); gap: 4px; }
.g-dots i { width: 7px; height: 7px; border-radius: 50%; background: #0B6B5E; animation: pulse 1.2s ease-in-out infinite; }
.g-dots i:first-child { background: #F5B63D; } .g-dots i:nth-child(2) { animation-delay: .1s; } .g-dots i:nth-child(3) { animation-delay: .2s; } .g-dots i:nth-child(4) { animation-delay: .3s; } .g-dots i:nth-child(5) { animation-delay: .4s; } .g-dots i:nth-child(6) { animation-delay: .5s; }
.lg-google.is-busy .g-icon { display: none; } .lg-google.is-busy .g-dots { display: grid; }
.lg-status { margin: -4px 0 0; min-height: 1.5em; text-align: center; color: var(--fg-2); font-size: .95rem; }
.lg-status.ok { color: var(--accent-fg); font-weight: 700; }

/* Aviso de convite */
.lg-invite { display: flex; gap: 14px; align-items: flex-start; margin-top: 4px; padding: 16px 18px; border-radius: 18px; background: rgba(91, 227, 196, .07); border: 1px solid rgba(91, 227, 196, .18); }
.lg-invite p { margin: 0; color: var(--fg-2); font-size: .94rem; line-height: 1.55; }
.lg-invite strong { color: var(--fg); }
.lg-invite-icon { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: rgba(91, 227, 196, .14); }
.lg-invite-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--accent-fg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Entrada em cena */
.lg-cell .d { transform-box: fill-box; transform-origin: center; animation: dot-in .7s cubic-bezier(.2, .9, .3, 1.4) both; }
.lg-cell .d1 { animation: dot-in .7s .35s cubic-bezier(.2, .9, .3, 1.4) both, breathe 4s 1.5s ease-in-out infinite; } .lg-cell .d2 { animation-delay: .45s; } .lg-cell .d3 { animation-delay: .55s; } .lg-cell .d4 { animation-delay: .65s; } .lg-cell .d5 { animation-delay: .75s; } .lg-cell .d6 { animation-delay: .85s; }
@keyframes dot-in { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes pulse { 0%, 100% { transform: scale(.7); opacity: .5; } 50% { transform: scale(1.15); opacity: 1; } }


.lg-card-inner > :not(.lg-cell) { animation: rise .7s cubic-bezier(.2, .8, .2, 1) both; }
.lg-kicker { animation-delay: .25s !important; } .lg-card h2 { animation-delay: .32s !important; } .lg-lead { animation-delay: .4s !important; } .lg-google { animation-delay: .48s !important; } .lg-status { animation-delay: .54s !important; } .lg-invite { animation-delay: .6s !important; }
@media (max-width: 480px) { .lg-card, .lg-card-inner { border-radius: 24px; } .lg-card-inner { padding: 24px 20px; } }
@media (prefers-reduced-motion: reduce) { .l-login[open], .l-login[open]::backdrop, .lg-card-inner > *, .lg-cell .d { animation: none !important; } .g-dots i { animation: none; } }