/* Login / registro — tela dividida dentro da "janela" */
body.auth { background: var(--outer); }
.auth-frame { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 32px); margin: 16px; background: var(--bg); border-radius: 28px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.auth-form { display: flex; flex-direction: column; padding: 2rem clamp(1.2rem, 5vw, 4rem); }
.auth-top { display: flex; justify-content: space-between; align-items: center; }
.auth-box { width: min(400px, 100%); margin: auto; padding: 2.5rem 0; }
.auth-box h1 { font-size: clamp(1.7rem, 3vw, 2.2rem); letter-spacing: -.035em; margin-bottom: .4rem; }
.auth-box .sub { color: var(--muted); margin-bottom: 1.8rem; }
.pw { position: relative; }
.pw .eye { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); cursor: pointer; font-size: .78rem; font-weight: 700; padding: .4rem; }
.or { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .8rem; margin: 1.3rem 0; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-alt { text-align: center; color: var(--muted); font-size: .9rem; margin-top: 1.6rem; }
.auth-alt a { color: var(--accent); font-weight: 700; }
.auth-legal { font-size: .75rem; color: var(--muted); text-align: center; }

.auth-art { position: relative; margin: 12px; border-radius: 22px; overflow: hidden; isolation: isolate; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.5rem, 4vw, 3rem);
  background: radial-gradient(80% 70% at 100% 0%, #d9534f 0%, transparent 60%), radial-gradient(70% 70% at 0% 100%, #f3b562 0%, transparent 60%), #2f3a4a; }
.auth-art::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .18; background-image: radial-gradient(#fff 1px, transparent 1.4px); background-size: 16px 16px; }
.auth-art .flags { position: absolute; top: 2.2rem; left: 2.2rem; right: 2.2rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.auth-art .flags span { background: rgba(255,255,255,.14); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: .45rem .7rem; font-size: .82rem; font-weight: 700; }
.auth-art .card-glass { background: rgba(255,255,255,.12); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.22); border-radius: 20px; padding: 1.3rem; margin-bottom: 1.6rem; display: flex; gap: 1rem; align-items: center; }
.auth-art .card-glass .ring { --ring: #fff; background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255,255,255,.25) 0); }
.auth-art .card-glass .ring::before { background: #3c4659; }
.auth-art h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); letter-spacing: -.035em; margin-bottom: .6rem; }
.auth-art p { opacity: .85; margin: 0; max-width: 30em; }
@media (max-width: 900px) {
  .auth-frame { grid-template-columns: 1fr; margin: 0; border-radius: 0; border: 0; min-height: 100vh; }
  .auth-art { display: none; }
}