:root{--bg:#faf8f3;--text:#0f172a;--muted:#64748b;--line:#e6e1d6;--accent:#2457d6;--dim:#cdc5b0;--bad:#b42318;--bad-bg:#fdecea;--bad-line:#f5c2bd}
*{box-sizing:border-box}
body.auth{margin:0;min-height:100vh;display:grid;place-items:center;padding:28px 24px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;position:relative;-webkit-font-smoothing:antialiased}
body.auth::before{content:"";position:fixed;inset:-60px;background-image:radial-gradient(#d3cab4 1.3px,transparent 1.3px);background-size:28px 28px;animation:grid 30s linear infinite;-webkit-mask-image:radial-gradient(circle at 50% 45%,#000 10%,transparent 68%);mask-image:radial-gradient(circle at 50% 45%,#000 10%,transparent 68%);pointer-events:none}
@keyframes grid{to{transform:translate(28px,28px)}}
.blob{position:fixed;border-radius:50%;filter:blur(90px);opacity:.38;animation:float 16s ease-in-out infinite alternate;pointer-events:none}
.b1{width:420px;height:420px;background:#5b8cff;top:-120px;left:-100px}
.b2{width:380px;height:380px;background:#ffc46b;bottom:-120px;right:-90px;animation-delay:-7s}
@keyframes float{to{transform:translate(70px,50px) scale(1.15)}}
a{color:var(--accent)}
:focus-visible{outline:3px solid rgba(36,87,214,.45);outline-offset:2px}
.wrap{position:relative;z-index:1;width:100%;max-width:480px;text-align:center;animation:up .8s both}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.row{list-style:none;margin:0 0 26px;padding:0;display:flex;justify-content:center;gap:clamp(8px,2.4vw,16px)}
.row li{flex:1 1 0;max-width:84px;text-align:center;animation:lift 8s infinite}
.row li:nth-child(2),.row li:nth-child(2) b,.row li:nth-child(2) small{animation-delay:1.6s}
.row li:nth-child(3),.row li:nth-child(3) b,.row li:nth-child(3) small{animation-delay:3.2s}
.row li:nth-child(4),.row li:nth-child(4) b,.row li:nth-child(4) small{animation-delay:4.8s}
.row li:nth-child(5),.row li:nth-child(5) b,.row li:nth-child(5) small{animation-delay:6.4s}
.row b{display:grid;place-items:center;aspect-ratio:1;width:100%;border-radius:18px;background:#ece6d6;color:#9a937c;font-size:clamp(1.7rem,6.5vw,2.4rem);font-weight:850;animation:tile 8s infinite}
.row small{display:block;margin-top:8px;font-size:clamp(.62rem,2.3vw,.8rem);line-height:1.25;color:var(--muted);animation:cap 8s infinite}
.row small em{display:block;font-style:normal;font-size:.85em;opacity:.7}
@keyframes lift{0%,18%{transform:translateY(-8px)}24%,100%{transform:none}}
@keyframes tile{0%,18%{background:var(--accent);color:#fff;box-shadow:0 12px 26px rgba(36,87,214,.35)}24%,100%{background:#ece6d6;color:#9a937c;box-shadow:none}}
@keyframes cap{0%,18%{color:var(--text);font-weight:700}24%,100%{color:var(--muted);font-weight:400}}
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px;text-align:left;box-shadow:0 24px 60px rgba(60,50,20,.12);animation:up .8s .15s both}
h1{margin:0 0 6px;font-size:1.35rem}
.muted{color:var(--muted);margin:0}
.small{font-size:.85rem}
label{display:block;margin:18px 0 6px;font-weight:600}
input[type=tel],input[type=text]{width:100%;padding:13px 14px;font:inherit;color:var(--text);border:1px solid var(--line);border-radius:12px;background:#fdfcf9;transition:.15s}
input[type=tel]:focus,input[type=text]:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(36,87,214,.15);background:#fff}
.otp{letter-spacing:.45em;font-size:1.5rem;text-align:center}
.btn{margin-top:20px;width:100%;border:0;border-radius:12px;padding:14px;font:inherit;font-weight:600;color:#fff;background:var(--accent);cursor:pointer;display:flex;justify-content:center;align-items:center;gap:8px;transition:.2s}
.btn:hover{background:#1d49b4;box-shadow:0 10px 24px rgba(36,87,214,.3);transform:translateY(-1px)}
.btn i{display:inline-block;font-style:normal;transition:transform .2s}.btn:hover i{transform:translateX(5px)}
.error{margin:14px 0 0;padding:10px 12px;border:1px solid var(--bad-line);background:var(--bad-bg);color:var(--bad);border-radius:8px;animation:shake .45s}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.foot{margin:16px 0 0;font-size:.85rem}
.foot a{color:var(--muted);text-decoration:none}.foot a:hover{color:var(--text)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.by{margin:26px 0 0;font-size:.74rem;letter-spacing:.02em;color:#857e69}