.login { max-width: 460px; padding-top: 48px; padding-bottom: 56px; }
.login h1 { font-weight: 900; letter-spacing: -.045em; line-height: .9; font-size: clamp(48px, 14vw, 76px); margin: 28px 0 28px; }
.box { border: 1.5px solid var(--ink); border-radius: 14px; padding: 22px 20px; }
.lead { font-size: 16px; line-height: 1.45; margin: 0 0 18px; }
.btn.big { width: 100%; font-size: 16px; padding: 14px 18px; margin-top: 14px; }
.code-input { font-size: 28px; font-weight: 800; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.links { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 0; font-size: 14px; }
.note { margin: 16px 0 0; }
.dev { font-size: 14px; font-weight: 700; background: var(--accent); color: var(--on-accent); border-radius: 10px; padding: 10px 12px; margin: 12px 0 0; }
/* Intro animada: mesmo fundo claro da cena, some com fade para o login */
.intro { position: fixed; inset: 0; z-index: 50; background: #F2F2F2; cursor: pointer; transition: opacity .6s ease-out; }
.intro.saindo { opacity: 0; pointer-events: none; }
.intro-cena { position: absolute; inset: 0; }
.intro-pular { position: absolute; left: 0; right: 0; bottom: calc(20px + env(safe-area-inset-bottom)); text-align: center; font: 500 12px/1 "Inter", sans-serif; letter-spacing: .04em; color: rgba(61,57,53,.45); }