:root{color-scheme:dark;--bg:#0e0b0f;--panel:#171319;--panel2:#211922;--line:#382b36;--text:#f6eee9;--muted:#a9969f;--accent:#ff856f;--accent2:#e55372}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -20%,#30213b 0,#0e0b0f 55%);color:var(--text);font:16px system-ui,-apple-system,sans-serif}main{width:min(680px,100%);margin:auto;padding:28px 16px 46px}.card{background:#171319f2;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 20px 70px #0005}.brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}.logo{width:52px;height:52px;border-radius:14px;object-fit:contain}.brand h1{font-size:29px;margin:0}.sub{color:var(--muted);margin:0 0 24px}label,.legend{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin:18px 0 8px}input{width:100%;padding:13px 14px;background:#100d12;border:1px solid var(--line);border-radius:10px;color:var(--text);font:inherit}input:focus{outline:2px solid var(--accent);outline-offset:2px}.avatars{display:grid;grid-template-columns:repeat(10,1fr);gap:9px}.avatars button{width:48px;height:48px;padding:2px;border-radius:50%;background:#100d12;border:1px solid var(--line);cursor:pointer}.avatars button.selected{border:3px solid var(--accent);background:#ffd2bd}.avatars img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}.colors{display:flex;gap:12px;flex-wrap:wrap}.colors button{width:29px;height:29px;border-radius:50%;border:2px solid transparent;cursor:pointer}.colors button.selected{outline:3px solid #ffe7d1;outline-offset:2px}.continue{width:100%;margin-top:24px;padding:13px;border:0;border-radius:10px;background:linear-gradient(90deg,var(--accent),#ff9b72);color:#21151c;font:700 16px inherit;cursor:pointer}.hint{margin:16px 0 0;color:var(--muted);font-size:13px}@media(max-width:560px){main{padding:14px 10px}.card{padding:18px}.avatars{grid-template-columns:repeat(5,1fr);justify-items:center}}

:root{--bg:#0b0d10;--panel:#12161c;--panel2:#181e26;--line:#28313d;--text:#edf3fa;--muted:#929eac;--accent:#63adff;--accent2:#8b8cff}
body{background:radial-gradient(ellipse 850px 400px at 80% -12%,#1d3b5d66,transparent 70%),radial-gradient(ellipse 700px 400px at -12% 70%,#292b5a24,transparent 70%),var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.card{position:relative;overflow:hidden;background:linear-gradient(145deg,#141a22f5,#10141af5);border-color:#2c3948;border-radius:20px;box-shadow:0 24px 70px #0007;animation:max-enter .38s cubic-bezier(.2,.7,.2,1) both}
.card::before{position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#63adff,#8b8cff,#42d6a0);content:""}
.logo{padding:3px;border:1px solid #38506b;border-radius:14px;background:#152337;box-shadow:0 0 24px #428bda26}
.brand h1{letter-spacing:-.035em}.sub{line-height:1.65}label,.legend{color:#9baaba}
input{border-color:#303b49;border-radius:11px;background:#0c1117;transition:border-color .18s,box-shadow .18s}input:focus{outline:0;box-shadow:0 0 0 3px #63adff20;border-color:var(--accent)}
.avatars button{border-color:#344253;background:#111820;transition:transform .18s,border-color .18s,box-shadow .18s}.avatars button:hover{transform:translateY(-2px);border-color:#6eafea;box-shadow:0 7px 18px #0005}.avatars button.selected{border-color:#63adff;background:#17314d;box-shadow:0 0 0 3px #63adff22}
.colors button{transition:transform .18s,box-shadow .18s}.colors button:hover{transform:scale(1.12)}.colors button.selected{outline-color:#a7d3ff}
.continue{background:linear-gradient(135deg,#73b9ff,#5196ed);color:#07111d;box-shadow:0 8px 24px #438ede30;transition:transform .18s,filter .18s,box-shadow .18s}.continue:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 12px 28px #438ede42}
.hint{line-height:1.6}
@keyframes max-enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.site-link{position:fixed;z-index:5;top:14px;left:14px;display:inline-flex;padding:10px 12px;border:1px solid #2b3948;border-radius:11px;background:#171e27;color:#dcecff;font-weight:700;text-decoration:none}.site-link:hover{border-color:#568ac0;background:#1b2734}main{padding-top:76px}.auth-panel{width:min(560px,100%);margin:auto}.auth-tabs{display:flex;gap:8px;margin:18px 0 8px;padding:4px;border:1px solid #2c3948;border-radius:13px;background:#0c1117}.auth-tabs button{flex:1;padding:11px 14px;border:1px solid transparent;border-radius:9px;background:transparent;color:#aab7c7;font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .18s}.auth-tabs button:hover{background:#17202b;color:#eaf3ff}.auth-tabs button.active{border-color:#344b63;background:#1a2634;color:#eaf3ff;box-shadow:inset 0 0 0 1px #63adff12}.auth-tabs button:focus-visible{outline:2px solid #63adff;outline-offset:2px}.auth-form[hidden]{display:none}.auth-form label{margin-top:14px}.auth-form .continue{margin-top:18px}.auth-form .hint{line-height:1.55}.text-button{display:block;margin:12px auto 0;padding:8px 10px;border:0;background:transparent;color:#9fcfff;box-shadow:none;cursor:pointer}.text-button:hover{color:#dcecff;text-decoration:underline;transform:none!important;box-shadow:none!important}.form-error{margin:14px 0 0;padding:10px 12px;border:1px solid #7e4548;border-radius:9px;background:#321c23;color:#ffd5d5}.recovery-code{display:block;overflow-wrap:anywhere;margin:18px 0;padding:16px;border:1px dashed #5988b7;border-radius:10px;background:#0c1117;color:#dcecff;font:700 20px ui-monospace,monospace;letter-spacing:.06em}.recovery-code+button{width:100%;padding:11px}.auth-panel .sub{margin-bottom:14px}
@media(max-width:560px){main{padding:62px 10px 24px}.site-link{top:10px;left:10px}.auth-tabs{flex-direction:column}.recovery-code{font-size:17px}}
.confirm-dialog{width:min(440px,calc(100vw - 32px));padding:24px;border:1px solid #34485d;border-radius:18px;background:linear-gradient(145deg,#17212d,#10161e);color:var(--text);box-shadow:0 24px 80px #000b;animation:max-enter .18s ease-out both}
.confirm-dialog::backdrop{background:#05080dcc;backdrop-filter:blur(3px)}
.confirm-dialog h2{margin:0 0 10px;font-size:21px;letter-spacing:-.02em}
.confirm-dialog p{margin:0;color:var(--muted);line-height:1.55}
.confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.confirm-actions button{min-width:100px;padding:10px 16px;border-radius:10px;font:inherit;font-weight:650;cursor:pointer;transition:filter .18s,transform .18s}
.confirm-actions .secondary{border:1px solid #344253;background:#171e27;color:#d7e2ef}
.confirm-actions .danger-button{border:1px solid #814955;background:#7a3544;color:#fff0f1}
.confirm-actions button:hover{filter:brightness(1.1);transform:translateY(-1px)}
@media(max-width:560px){.confirm-dialog{padding:20px}.confirm-actions button{flex:1}}