/* Login / setup / share / error pages */

.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--bg); }
.auth-art { position: relative; overflow: hidden; background: radial-gradient(800px 500px at 30% 20%, rgba(47, 91, 255, .35), transparent 60%), radial-gradient(600px 400px at 80% 90%, rgba(46, 230, 166, .18), transparent 60%), #070B16; color: #E9EDF7; display: flex; align-items: flex-end; padding: 48px; }
.auth-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.auth-art::after { content: ""; position: absolute; inset: 40% 0 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(7, 11, 22, .92) 55%); }
.auth-art-copy { position: relative; z-index: 2; max-width: 520px; }
.auth-art .brand { color: #fff; margin-bottom: 40px; }
.auth-art .brand small { color: #F2737B; }
.auth-art h2 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; line-height: 1.2; }
.auth-art p { color: #A3ACC2; margin-top: 16px; font-size: 16px; line-height: 1.75; }
.grad { background: linear-gradient(100deg, #6E8BFF, #2EE6A6 60%, #FFB547); -webkit-background-clip: text; background-clip: text; color: transparent; padding-block: .1em; }
.auth-chips { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.auth-chips li { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(46, 230, 166, .35); background: rgba(12, 18, 36, .7); color: #CFF7E8; opacity: 0; transform: translateY(8px); animation: chip-in .6s var(--ease) forwards; }
.auth-chips li:nth-child(2) { animation-delay: .15s; } .auth-chips li:nth-child(3) { animation-delay: .3s; } .auth-chips li:nth-child(4) { animation-delay: .45s; }
@keyframes chip-in { to { opacity: 1; transform: none; } }

.auth-main { display: grid; place-items: center; padding: 32px 16px; }
.auth-card { width: min(420px, 100%); display: grid; gap: 16px; animation: card-in .7s var(--ease) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(14px); } }
.auth-card h1 { font-size: 30px; font-weight: 700; }
.auth-sub { color: var(--muted); margin-top: -10px; }
.auth-foot { text-align: center; font-size: 13px; color: var(--muted); }
.auth-brand-mobile { display: none; }
.pw { position: relative; }
.pw .input { padding-right: 44px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: transparent; color: var(--faint); border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.pw-toggle svg { width: 18px; height: 18px; }
.pw-toggle.on, .pw-toggle:hover { color: var(--primary); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .auth-brand-mobile { display: inline-flex; margin-bottom: 8px; }
}
@media (max-width: 480px) { .grid-2 { grid-template-columns: 1fr; } }

.plain { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.plain-box { text-align: center; display: grid; gap: 12px; justify-items: center; max-width: 480px; }
.plain-box h1 { font-size: 24px; }
.plain-box p { color: var(--muted); }
.plain-code { font-family: var(--font-display); font-size: 72px; font-weight: 700; line-height: 1; background: linear-gradient(100deg, var(--cobalt), var(--mint)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.share-page { display: block; padding: 0; }
.share-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.share-pw { display: grid; gap: 10px; width: min(320px, 100%); margin-top: 8px; }
.share-main { max-width: 1100px; margin: 0 auto; padding: 24px 16px; display: grid; gap: 16px; }
.share-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.share-head h1 { font-size: 22px; }
.share-view { position: relative; min-height: 70vh; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; display: grid; place-items: center; }
.share-view iframe { width: 100%; height: 78vh; border: 0; }
.share-view img, .share-view video { max-width: 100%; max-height: 78vh; }
.share-wm { position: absolute; inset: 0; pointer-events: none; z-index: 2; display: flex; flex-wrap: wrap; gap: 60px 80px; padding: 30px; transform: rotate(-24deg) scale(1.4); opacity: .14; font-size: 22px; font-weight: 700; color: var(--text); overflow: hidden; user-select: none; }