/* Login / register pages: two full-page layouts with entrance, background and chart animations. */
.auth-page{position:relative;min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);background:#f7f8f6;color:#17202b;overflow:hidden;animation:authIn .6s cubic-bezier(.2,.8,.2,1) both}
.auth-register{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);animation-name:authInRight}
.auth-register .auth-visual{order:-1}
.auth-page.is-leaving{animation:authOut .28s ease-in both}
@keyframes authIn{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes authInRight{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes authOut{to{opacity:0;transform:scale(.985)}}
@keyframes authRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* soft moving blobs behind the form */
.auth-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.auth-bg .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:blobFloat 14s ease-in-out infinite}
.blob.b1{width:340px;height:340px;background:#c7eeec;left:-90px;top:-70px}
.blob.b2{width:300px;height:300px;background:#cfe6d7;left:26%;bottom:-110px;animation-delay:-5s}
.blob.b3{width:220px;height:220px;background:#cfe3ec;left:8%;bottom:22%;animation-delay:-9s}
@keyframes blobFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(38px,-30px) scale(1.12)}}

.auth-form-side{position:relative;z-index:1;display:flex;flex-direction:column;padding:32px clamp(24px,6vw,84px) 40px}
.auth-brand{align-self:flex-start;color:#17202b;text-decoration:none;font:800 30px Manrope,sans-serif;letter-spacing:-1px}
.auth-brand span{color:#0f9d9a}
.auth-panel-card{position:relative;margin:auto 0;width:100%;max-width:430px;align-self:center;padding:36px 0}
.auth-card-body>*{animation:authRise .6s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*70ms + 150ms)}
.auth-tag{display:inline-block;padding:7px 11px;border-radius:999px;background:#e8f7f6;color:#087f7c;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.auth-title{margin:18px 0 8px;font:800 clamp(30px,4vw,40px)/1.05 Manrope,sans-serif;letter-spacing:-1.2px}
.auth-lead{margin:0 0 26px;color:#5d7580;font-size:15px;line-height:1.6}
.auth-form{display:flex;flex-direction:column;gap:16px}
.auth-field{display:flex;flex-direction:column;gap:7px;animation:authRise .6s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*70ms + 150ms)}
.auth-field label{font-size:12px;font-weight:700;color:#465d6b}
.auth-input{position:relative;display:flex;align-items:center}
.auth-input input{width:100%;border:1.5px solid rgba(19,34,42,.12);background:#fff;border-radius:12px;padding:14px 15px;font-size:15px;color:#13222a;outline:none;transition:border-color .2s,box-shadow .2s,transform .2s}
.auth-input input:hover{border-color:rgba(19,34,42,.24)}
.auth-input input:focus{border-color:#0f9d9a;box-shadow:0 0 0 4px rgba(15,157,154,.14);transform:translateY(-1px)}
.auth-input input:not(:placeholder-shown):valid{border-color:rgba(94,155,118,.55)}
.auth-eye{position:absolute;right:8px;border:0;background:transparent;color:#84909b;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;transition:color .2s,background .2s}
.auth-eye:hover,.auth-eye.on{color:#0f9d9a;background:#e8f7f6}
.auth-input:has(.auth-eye) input{padding-right:46px}
.auth-error{margin:0;padding:11px 13px;border-radius:10px;background:#fff2f2;color:#b14646;font-size:13px;font-weight:600;border:1px solid rgba(177,70,70,.15);animation:authRise .3s ease both}
.auth-error[hidden]{display:none}
.auth-submit{position:relative;overflow:hidden;width:100%;margin-top:6px;border:0;border-radius:12px;padding:16px 18px;background:linear-gradient(135deg,#0f9d9a,#0f9d9a);color:#fff;font-size:15px;font-weight:800;box-shadow:0 16px 32px rgba(15,157,154,.28);transition:transform .2s,box-shadow .2s;animation:authRise .6s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*70ms + 150ms)}
.auth-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 20px 38px rgba(15,157,154,.36)}
.auth-submit:active:not(:disabled){transform:translateY(0)}
.auth-submit:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%)}
.auth-submit:hover:not(:disabled):before{transform:translateX(120%);transition:transform .7s}
.auth-submit b{display:inline-block;margin-left:8px;transition:transform .2s}
.auth-submit:hover:not(:disabled) b{transform:translateX(5px)}
.auth-submit:disabled{cursor:progress;opacity:.9}
.auth-spinner{display:none;width:20px;height:20px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;margin:0 auto}
.auth-submit.loading .auth-submit-label{display:none}
.auth-submit.loading .auth-spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.auth-switch{margin:22px 0 0;color:#5d7580;font-size:14px}
.auth-switch a{color:#0f9d9a;font-weight:800;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .25s}
.auth-switch a:hover{background-size:100% 2px}
.auth-panel-card.shake{animation:shake .45s}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}

/* success state */
.auth-success{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;opacity:0;pointer-events:none;transition:opacity .3s}
.auth-success svg{width:84px;height:84px}
.auth-success circle{stroke:#5e9b76;stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151}
.auth-success path{stroke:#5e9b76;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48}
.auth-success strong{font:800 24px Manrope,sans-serif}
.auth-success span{color:#5d7580;font-size:14px}
.auth-panel-card.is-success .auth-card-body{opacity:0;transform:scale(.96);transition:opacity .25s,transform .25s;pointer-events:none}
.auth-panel-card.is-success .auth-success{opacity:1}
.auth-panel-card.is-success .auth-success circle{animation:draw .5s ease forwards}
.auth-panel-card.is-success .auth-success path{animation:draw .35s .35s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* visual side */
.auth-visual{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:34px;padding:48px;background:linear-gradient(160deg,#1b4356 0%,#122b3a 100%);color:#fff;overflow:hidden}
.av-glow{position:absolute;border-radius:50%;filter:blur(80px);animation:blobFloat 16s ease-in-out infinite}
.av-glow.g1{width:340px;height:340px;background:rgba(15,157,154,.35);right:-80px;top:-60px}
.av-glow.g2{width:300px;height:300px;background:rgba(94,155,118,.35);left:-70px;bottom:-60px;animation-delay:-7s}
.av-card{position:relative;width:min(100%,420px);padding:26px;border-radius:24px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px);box-shadow:0 30px 70px rgba(0,0,0,.25);animation:avFloat 6s ease-in-out infinite,authRise .8s .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes avFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
.av-top{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#bfd0d7}
.av-top b{color:#8ae3ad}
.av-total{margin:16px 0 8px;font:800 40px Manrope,sans-serif;letter-spacing:-1px}
.av-total small{font:600 15px 'DM Sans',sans-serif;color:#bfd0d7}
.av-line{width:100%;height:auto;display:block;overflow:visible}
.av-stroke{stroke:#5ac8c3;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s .6s ease forwards}
.av-area{opacity:0;animation:fade 1s 1.4s ease forwards}
@keyframes fade{to{opacity:1}}
.av-bars{height:70px;display:flex;align-items:flex-end;gap:9px;margin-top:14px;border-bottom:1px solid rgba(255,255,255,.16)}
.av-bars i{flex:1;height:var(--h);border-radius:6px 6px 0 0;background:linear-gradient(180deg,#5ac8c3,#0f9d9a);transform-origin:bottom;animation:grow .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*90ms + 700ms)}
.av-bars i.hi{background:linear-gradient(180deg,#9fe4b8,#61c28f)}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.av-foot{display:flex;justify-content:space-between;margin-top:12px;font-size:12px;color:#cddfe6}
.av-chip{position:absolute;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:#fff;color:#17202b;font-size:12px;font-weight:700;box-shadow:0 14px 30px rgba(0,0,0,.22);animation:avFloat 5s ease-in-out infinite}
.av-chip i{width:8px;height:8px;border-radius:50%;background:#5e9b76;box-shadow:0 0 0 4px rgba(94,155,118,.2)}
.av-chip.c1{top:16%;left:9%;animation-delay:-1s}
.av-chip.c2{bottom:24%;right:8%;animation-delay:-3s}
.av-quote{position:relative;margin:0;text-align:center;font:800 24px/1.25 Manrope,sans-serif;letter-spacing:-.5px;max-width:360px}
.av-quote span{display:block;margin-top:8px;font:500 14px 'DM Sans',sans-serif;color:#bfd0d7;letter-spacing:0}

@media(max-width:920px){
  .auth-page,.auth-register{grid-template-columns:1fr}
  .auth-visual{display:none}
  .auth-panel-card{max-width:460px}
}
@media(prefers-reduced-motion:reduce){
  .auth-page *,.auth-page{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .av-stroke{stroke-dashoffset:0}.av-area{opacity:1}
}

/* phone + SMS code controls */
.auth-input.has-prefix{gap:0}
.auth-prefix{display:flex;align-items:center;padding:0 12px;height:100%;min-height:50px;border:1.5px solid rgba(19,34,42,.12);border-right:0;border-radius:12px 0 0 12px;background:#f1f4f3;color:#52616a;font-weight:800;font-size:14px}
.auth-input.has-prefix input{border-radius:0;flex:1;min-width:0}
.send-code{flex:0 0 auto;border:1.5px solid #0f9d9a;border-left:0;background:#e8f7f6;color:#087f7c;font-weight:800;font-size:12px;padding:0 14px;min-height:50px;border-radius:0 12px 12px 0;transition:background .2s,color .2s}
.send-code:hover:not(:disabled){background:#0f9d9a;color:#fff}
.send-code:disabled{opacity:.7;cursor:default}
.dev-hint{margin:8px 0 0;padding:8px 10px;border-radius:8px;background:#fff8e6;color:#8a5608;font-size:12px;font-weight:700;border:1px dashed #f0c96a}
.auth-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 0;animation:authRise .6s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*70ms + 150ms)}
.auth-link{color:#52616a;font-size:13px;font-weight:700;text-decoration:none;border-bottom:1px dashed #b7c1c6}
.auth-link:hover{color:#0f9d9a;border-color:#0f9d9a}
.phone-row{display:flex}
.phone-row .auth-prefix{min-height:0;border-radius:6px 0 0 6px}
.phone-row input{flex:1;min-width:0;border-radius:0!important}
.phone-row .outline-button{border-radius:0 6px 6px 0;white-space:nowrap}
.auth-input.has-action{gap:0}.auth-input.has-action input{border-radius:12px 0 0 12px;flex:1;min-width:0}
.tg-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;border:1.5px solid #0f9d9a;border-radius:12px;background:#e8f7f6;color:#087f7c;font:inherit;font-weight:800;font-size:15px;cursor:pointer;transition:background .2s,transform .15s,box-shadow .2s}
.tg-button:hover:not(:disabled){background:#c7eeec;transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,157,154,.18)}
.tg-button:disabled{opacity:.6;cursor:default}
.tg-button.done{background:#0f9d9a;color:#fff}
.tg-hint{margin:8px 2px 0;font-size:13px;line-height:1.45;color:#4b6470}
.tg-hint a{color:#087f7c;font-weight:700}
.tg-hint.ok{color:#087f7c;font-weight:800;font-size:15px}
.tg-hint.bad{color:#c0392b}
.auth-actions{display:flex;gap:10px;align-items:stretch}.auth-actions .auth-submit{flex:1 1 auto;width:auto;min-width:0}
.auth-telegram{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;min-height:50px;border:1.5px solid #0f9d9a;border-radius:12px;background:#e8f7f6;color:#087f7c;font-weight:800;font-size:14px;text-decoration:none;transition:background .2s,transform .15s,box-shadow .2s}
.auth-telegram:hover{background:#c7eeec;transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,157,154,.18)}
.auth-telegram svg{width:20px;height:20px}
@media(max-width:380px){.auth-actions{flex-direction:column}.auth-telegram{min-height:46px}}

.auth-check { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; line-height: 1.45; cursor: pointer; }
.auth-check input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.auth-check a { color: inherit; text-decoration: underline; }