/* Orate — auth + splash */
.auth-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(30px, 8vw, 140px); padding: 24px; overflow-y: auto; }
.auth-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; animation: slide-right .8s var(--ease) both; }
.auth-mark { position: relative; animation: float 7s ease-in-out infinite; filter: drop-shadow(0 20px 50px rgb(var(--accent-rgb) / .55)); }
.auth-hero h1 { font-size: clamp(44px, 6vw, 72px); font-weight: 900; letter-spacing: -.04em; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-top: 6px; }
.auth-hero p { font-size: 19px; color: var(--text-2); font-weight: 500; }
.auth-card { width: min(480px, 100%); padding: 0; border-radius: var(--radius-lg); background: rgb(var(--panel-rgb) / max(var(--panel-a, .7), .62)); animation: slide-left .8s var(--ease) both; transition: width var(--t-slow) var(--ease); flex: none; align-self: center; max-height: calc(100vh - 40px); overflow-y: auto; }
.auth-card.register { width: min(540px, 100%); }
.auth-card-in { padding: 34px 38px 30px; animation: auth-swap var(--t-slow) var(--ease) both; }
@keyframes auth-swap { from { opacity: 0; transform: translateX(calc(var(--d, 1) * 26px)); } to { opacity: 1; transform: none; } }
.auth-card-in[data-dir="-1"] { --d: -1; } .auth-card-in[data-dir="1"] { --d: 1; }
.auth-card header { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 22px; }
.auth-logo { margin-bottom: 6px; display: none; }
.auth-card h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.auth-card header p { color: var(--text-2); font-size: 15px; }
.invite-note { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 13px; display: flex; gap: 7px; align-items: center; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dob { display: grid; grid-template-columns: 1.4fr .8fr 1fr; gap: 8px; }
.auth-error { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: rgb(240 77 106 / .16); border: 1px solid rgb(240 77 106 / .5); color: #ff9db0; font-size: 13.5px; font-weight: 500; }
.auth-switch { text-align: center; color: var(--text-2); font-size: 14px; }
.link-btn { color: var(--link); font-weight: 600; font-size: inherit; text-align: left; transition: opacity var(--t-fast); }
.link-btn:hover { text-decoration: underline; }
.pw-eye { position: absolute; right: 6px; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-3); transition: color var(--t-fast), background var(--t-fast); }
.pw-eye:hover { color: var(--text); background: var(--hover); }
.input-wrap:has(.pw-eye) .input { padding-right: 44px; }
.avail { position: absolute; right: 12px; display: flex; color: var(--text-3); }
.avail.ok { color: #4fd18b; animation: bounce-in .35s var(--ease-spring); } .avail.no { color: #ff7b93; }
.input-wrap:has(.avail) .input { padding-right: 38px; }
.strength { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.strength .bars { display: flex; gap: 4px; flex: 1; }
.strength .bars i { flex: 1; height: 4px; border-radius: 4px; background: rgb(var(--surface-rgb) / .15); transition: background var(--t-med); }
.strength.s1 .bars i:nth-child(-n+1) { background: #f04d6a; } .strength.s2 .bars i:nth-child(-n+2) { background: #f0b232; }
.strength.s3 .bars i:nth-child(-n+3) { background: #8bd450; } .strength.s4 .bars i { background: #3ba55d; }
.check-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-2); cursor: pointer; line-height: 1.4; }
.check-row input { position: absolute; opacity: 0; pointer-events: none; }
.check-row .box { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: transparent; transition: all var(--t-fast); margin-top: 0; }
.check-row input:checked + .box { background: var(--accent-grad); border-color: transparent; color: #fff; animation: bounce-in .3s var(--ease-spring); }
.check-row input:focus-visible + .box { outline: 2px solid var(--accent); outline-offset: 2px; }
.auth-orb { position: fixed; border-radius: 50%; filter: blur(80px); opacity: .5; pointer-events: none; animation: float 12s ease-in-out infinite; }
.auth-orb.o1 { width: 340px; height: 340px; left: 6%; top: 8%; background: var(--accent); }
.auth-orb.o2 { width: 300px; height: 300px; right: 8%; bottom: 6%; background: var(--accent-2); animation-delay: -4s; }
.auth-orb.o3 { width: 200px; height: 200px; left: 44%; bottom: -60px; background: var(--accent); opacity: .3; animation-delay: -8s; }
@media (max-width: 900px) { .auth-hero { display: none; } .auth-logo { display: block; } .auth-card-in { padding: 28px 22px; } .two-col { grid-template-columns: 1fr; } }

.splash { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.splash-mark { animation: splash-pulse 1.8s ease-in-out infinite; filter: drop-shadow(0 12px 40px rgb(var(--accent-rgb) / .6)); }
@keyframes splash-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08) rotate(-3deg); } }
.splash-text { color: var(--text-2); font-weight: 600; letter-spacing: .02em; animation: pulse 1.6s ease-in-out infinite; }