/* Orate — auth + splash */
.auth-screen { position: fixed; inset: 0; display: flex; padding: 24px; overflow-y: auto; }   /* the column centres itself with auto margins, so a tall form scrolls instead of being cut off */
.auth-col { margin: auto; width: min(480px, 100%); display: flex; flex-direction: column; gap: 14px; transition: width var(--t-slow) var(--ease); }
.auth-col.register { width: min(540px, 100%); }
.auth-hero { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 16px; padding: 12px 24px; border-radius: var(--radius-lg); background: rgb(var(--panel-rgb) / max(var(--panel-a, .7), .62)); animation: slide-down .7s var(--ease) both; }
.auth-mark { position: relative; display: flex; animation: float 7s ease-in-out infinite; filter: drop-shadow(0 6px 14px rgb(var(--accent-rgb) / .5)); }
.auth-hero h1 { font-size: 40px; line-height: 1; font-weight: 900; letter-spacing: -.04em; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.auth-card { width: 100%; padding: 0; border-radius: var(--radius-lg); background: rgb(var(--panel-rgb) / max(var(--panel-a, .7), .62)); animation: slide-up .8s var(--ease) both; }

.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-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-card-in { padding: 28px 22px; } .two-col { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .auth-screen { padding: 14px; } .auth-hero { padding: 10px 18px; } .auth-hero h1 { font-size: 34px; } }

.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; }

/* ------------------------------------------------ email verification */
.verify-card { text-align: center; }
.verify-card header { margin-bottom: 18px; }
.verify-card header b { color: var(--text); }
.verify-ic { width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-grad); color: var(--on-accent); box-shadow: 0 12px 30px -10px rgb(var(--accent-rgb) / .8); animation: pop-in var(--t-med) var(--ease-spring) both; margin-bottom: 4px; }
.verify-ic.ok { background: linear-gradient(135deg, #34d399, #10b981); color: #fff; box-shadow: 0 12px 30px -10px rgb(16 185 129 / .8); }
.verify-ic.bad { background: linear-gradient(135deg, #f87171, #ef4444); color: #fff; box-shadow: 0 12px 30px -10px rgb(239 68 68 / .8); }
.verify-card .note-chip { margin-bottom: 14px; text-align: left; }
.verify-card .auth-form { margin-top: 4px; }
.verify-links { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.verify-banner { position: fixed; top: 12px; left: 0; right: 0; margin: 0 auto; width: fit-content; max-width: calc(100vw - 24px); z-index: 55; display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 14px; border-radius: 99px; font-size: 13.5px; background: rgb(var(--panel-rgb) / .92); backdrop-filter: blur(20px) saturate(1.3); border: 1px solid var(--border); box-shadow: var(--shadow-pop); }
.verify-banner span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verify-banner .vb-btn { flex: none; padding: 5px 13px; border-radius: 99px; background: var(--accent-grad); color: var(--on-accent); font-weight: 700; font-size: 12.5px; transition: transform var(--t-fast) var(--ease-spring), filter var(--t-fast); }
.verify-banner .vb-btn:hover:not(:disabled) { transform: scale(1.06); filter: brightness(1.1); }
.verify-banner .vb-btn:disabled { opacity: .55; }
.verify-banner .vb-x { flex: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-3); }
.verify-banner .vb-x:hover { background: var(--hover); color: var(--text); }

/* sign-up code entry */
.code-input { width: 100%; height: 66px; text-align: center; font-size: 34px; font-weight: 700; letter-spacing: .5em; text-indent: .5em; font-variant-numeric: tabular-nums; font-family: var(--font-code); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text); border: 1px solid transparent; outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
.code-input::placeholder { color: var(--text-4); letter-spacing: .35em; }
.code-input:focus { border-color: rgb(var(--accent-rgb) / .8); box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / .2); }
.code-input:disabled { opacity: .6; }
.auth-form .note-chip { text-align: left; }
.verify-links .link-btn:disabled { opacity: .5; text-decoration: none; cursor: default; }

/* loading screen help (shown when connecting takes long) */
.splash-help { max-width: min(420px, calc(100vw - 40px)); text-align: center; color: var(--text-3); font-size: 14px; line-height: 1.5; animation: fade-in var(--t-med) ease both; }
.splash-help small { display: block; margin-top: 4px; opacity: .8; }
.splash-actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }