/* ВХОД · СТИЛЬ 20 — туман, стекло, бирюзовый акцент.
   Подключить в mobile/index.html ПОСЛЕ строки со styles.css:
   <link rel="stylesheet" href="/mobile/login-style20.css?v=1">
   Разметку, app.js и логику входа не трогать. */

html.new-login,html.new-login body,html.desktop-login,html.desktop-login body{background:#0e1114}

html.new-login .login-layer,html.desktop-login .login-layer{padding:24px 20px;background:#0e1114!important;background-image:none!important;overflow:hidden auto;place-items:safe center!important}
html.new-login body,html.desktop-login body{background-image:none!important}
html.new-login .login-layer::before,html.desktop-login .login-layer::before{content:"";position:fixed;inset:-4%;z-index:0;pointer-events:none;
  background:url('/sales-style20-bg.jpg') center 60%/cover no-repeat;animation:l20Drift 38s ease-in-out infinite alternate}
html.new-login .login-layer::after,html.desktop-login .login-layer::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(640px 460px at 50% 46%,rgba(45,212,191,.10),transparent 70%),linear-gradient(200deg,rgba(14,19,22,.18),rgba(10,14,17,.55))}
html.new-login .access-terminal,html.desktop-login .access-terminal{position:relative;z-index:1;display:block;width:min(100%,960px);min-height:0!important;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
html.new-login .core-panel,html.desktop-login .core-panel{display:none}

html.new-login .login-card,html.desktop-login .login-card{position:relative;width:min(430px,calc(100% - 32px));min-height:0!important;height:auto;margin:0 auto;padding:40px 36px 30px;
  border:1px solid rgba(255,255,255,.14);border-radius:24px;background:rgba(20,26,31,.46);
  backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);text-align:center;
  animation:l20Rise .7s cubic-bezier(.2,.8,.2,1) both}
html.new-login .login-card::before,html.desktop-login .login-card::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(45,212,191,.9),transparent);animation:l20Scan 4.5s ease-in-out infinite}

html.new-login .login-card form,html.desktop-login .login-card form{display:grid;gap:12px;margin-top:0;text-align:left}
html.new-login .new-login-mark,html.desktop-login .new-login-mark{position:relative;width:50px;height:50px;display:grid;place-items:center;justify-self:center;margin:0 auto 18px;border-radius:15px;
  background:linear-gradient(150deg,#2dd4bf,#0f766e);color:#06201c;font-size:21px;font-weight:800;box-shadow:0 10px 30px rgba(45,212,191,.35)}
html.new-login .new-login-mark::after,html.desktop-login .new-login-mark::after{content:"";position:absolute;inset:-8px;border-radius:20px;border:1px solid rgba(45,212,191,.45);animation:l20Pulse 2.8s ease-out infinite}
html.new-login .new-login-title,html.desktop-login .new-login-title{margin:0;color:#f4f7f9;font-size:27px;font-weight:700;letter-spacing:-.03em;text-align:center}
html.new-login .new-login-subtitle,html.desktop-login .new-login-subtitle{margin:8px 0 16px;color:#b6c1c8;font-size:13.5px;line-height:1.55;text-align:center}
html.new-login .login-divider,html.desktop-login .login-divider{display:none}
html.new-login .login-field,html.desktop-login .login-field{display:grid;gap:6px;animation:l20Rise .6s cubic-bezier(.2,.8,.2,1) both}
html.new-login .login-field:nth-of-type(1),html.desktop-login .login-field:nth-of-type(1){animation-delay:.12s}
html.new-login .login-field:nth-of-type(2),html.desktop-login .login-field:nth-of-type(2){animation-delay:.2s}
html.new-login .login-field>span,html.desktop-login .login-field>span{display:flex;justify-content:space-between;align-items:center;color:#8e9ba4;font:10px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em}
html.new-login .login-field>span button,html.desktop-login .login-field>span button{border:0;background:none;color:#5eead4;font:11px Manrope,Inter,sans-serif;letter-spacing:0;cursor:pointer;padding:0}
html.new-login .login-field input,html.desktop-login .login-field input{height:50px;width:100%;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(10,14,17,.42);color:#f4f7f9;padding:0 16px;
  font:14px Manrope,Inter,-apple-system,sans-serif;transition:border-color .2s,box-shadow .2s,background .2s}
html.new-login .login-field input::placeholder,html.desktop-login .login-field input::placeholder{color:#76838c}
html.new-login .login-field input:focus,html.desktop-login .login-field input:focus{outline:0;border-color:#2dd4bf;background:rgba(10,14,17,.6);box-shadow:0 0 0 4px rgba(45,212,191,.16)}
html.new-login .login-message,html.desktop-login .login-message{min-height:18px;text-align:center;color:#9aa7b0;font-size:12px}
html.new-login .login-message.error,html.desktop-login .login-message.error{color:#fb923c}
html.new-login .login-message.warning,html.desktop-login .login-message.warning{color:#fbbf24}
html.new-login .login-submit,html.desktop-login .login-submit{position:relative;overflow:hidden;height:50px;border:0;border-radius:14px;background:#eef2f6;color:#0e1114;box-shadow:0 10px 26px rgba(0,0,0,.25);font-size:15px;font-weight:700;
  animation:l20Rise .6s .28s cubic-bezier(.2,.8,.2,1) both;transition:transform .15s,background .2s}
html.new-login .login-submit::after,html.desktop-login .login-submit::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(45,212,191,.35),transparent);animation:l20Shine 3.8s 1.2s ease-in-out infinite}
html.new-login .login-submit:hover,html.desktop-login .login-submit:hover{background:#fff;transform:translateY(-1px)}
html.new-login .login-submit:active,html.desktop-login .login-submit:active{transform:translateY(0)}
html.new-login .login-submit kbd,html.desktop-login .login-submit kbd{display:none}

html.new-login .mobile-core-status,html.desktop-login .mobile-core-status{display:flex;order:2;justify-content:center;align-items:center;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
html.new-login .login-card,html.desktop-login .login-card{display:flex;flex-direction:column}
html.new-login .login-card form,html.desktop-login .login-card form{order:1}
html.new-login .mobile-core-status .core-logo,html.desktop-login .mobile-core-status .core-logo{display:none}
html.new-login .mobile-core-status b,html.desktop-login .mobile-core-status b{display:none}
html.new-login .mobile-core-status small,html.desktop-login .mobile-core-status small{display:flex;align-items:center;gap:7px;color:#9aa7b0;font:10.5px "JetBrains Mono",ui-monospace,monospace}
html.new-login .mobile-core-status small>i,html.desktop-login .mobile-core-status small>i{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80;animation:l20Blink 2s ease-in-out infinite}
html.new-login .mobile-core-status strong,html.desktop-login .mobile-core-status strong{color:#e6ecef;font-weight:500}

html.new-login .new-login-methods,html.desktop-login .new-login-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
html.new-login .new-login-methods button,html.desktop-login .new-login-methods button{height:42px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.05);color:#c9d2d8;font-size:12px}
html.new-login .new-login-invite,html.desktop-login .new-login-invite{margin-top:16px;color:#8e9ba4;font-size:12px;text-align:center}
html.new-login .new-login-invite span,html.desktop-login .new-login-invite span{color:#5eead4}

@keyframes l20Rise{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes l20Drift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.07) translate3d(-1.5%,-1%,0)}}
@keyframes l20Scan{0%,100%{opacity:.25;transform:scaleX(.4)}50%{opacity:1;transform:scaleX(1)}}
@keyframes l20Pulse{0%{opacity:.8;transform:scale(.9)}100%{opacity:0;transform:scale(1.25)}}
@keyframes l20Shine{0%{left:-60%}55%,100%{left:130%}}
@keyframes l20Blink{0%,100%{opacity:1}50%{opacity:.35}}

@media (max-width:520px){
  html.new-login .login-card,html.desktop-login .login-card{width:calc(100% - 20px);padding:32px 22px 24px;border-radius:22px}
  html.new-login .new-login-title,html.desktop-login .new-login-title{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  html.new-login *,html.desktop-login *,html.new-login .login-layer::before,html.desktop-login .login-layer::before{animation:none!important}
}