/* === Auth redesign (purple / iOS + Android feel) === */ body.auth-mode { background: radial-gradient(1200px 680px at 12% 8%, rgba(166, 109, 255, 0.34), transparent 60%), radial-gradient(900px 540px at 88% 14%, rgba(111, 210, 255, 0.22), transparent 58%), radial-gradient(1100px 760px at 50% 120%, rgba(124, 92, 255, 0.20), transparent 62%), linear-gradient(135deg, #3f238f 0%, #5b33bf 38%, #6b44d8 62%, #7a56ea 100%) !important; } body.auth-mode::before{ content:""; position:fixed; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)); } #authScreen.auth-container{ width:min(440px, calc(100vw - 32px)); max-width:440px; padding:18px; border-radius:32px; background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.10)); border:1px solid rgba(255,255,255,.24); box-shadow:0 28px 90px rgba(24, 14, 60, .38); backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px); position:relative; overflow:hidden; } #authScreen.auth-container::before{ content:""; position:absolute; inset:-1px; pointer-events:none; background: radial-gradient(360px 200px at 12% 10%, rgba(255,255,255,.15), transparent 60%), radial-gradient(300px 180px at 88% 0%, rgba(111,210,255,.12), transparent 62%); } #authScreen > *{ position:relative; z-index:1; } .auth-brand{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; margin-bottom:18px; } .auth-logo{ width:72px; height:72px; border-radius:24px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,.10)); border:1px solid rgba(255,255,255,.32); box-shadow:0 18px 40px rgba(36,16,90,.24); color:#fff; font-size:30px; } .auth-brand h1{ margin:0; color:#fff; font-size:30px; font-weight:800; letter-spacing:-.03em; } .auth-brand p{ margin:0; color:rgba(255,255,255,.78); font-size:14px; line-height:1.45; } .auth-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:6px; margin-bottom:18px; border:none; background:rgba(255,255,255,.08); border-radius:18px; } .auth-tab{ border-radius:14px; border-bottom:none !important; color:rgba(255,255,255,.82); font-weight:700; padding:13px 14px; } .auth-tab.active{ color:#23163f; background:linear-gradient(135deg, #ffffff, #eef4ff); box-shadow:0 10px 24px rgba(12, 7, 30, .12); } .auth-form{ gap:12px; } .auth-form h2{ margin:0 0 2px; font-size:24px; font-weight:800; letter-spacing:-.02em; color:#fff; } .auth-subtitle{ margin:0 0 6px; color:rgba(255,255,255,.74); font-size:14px; line-height:1.45; } #authScreen.auth-container input{ width:100%; height:54px; border-radius:18px; border:1px solid rgba(255,255,255,.20); background:rgba(255,255,255,.12); color:#fff; padding:0 16px !important; outline:none; box-shadow:none; transition:border-color .18s ease, background .18s ease, transform .12s ease, box-shadow .18s ease; } #authScreen.auth-container input::placeholder{ color:rgba(255,255,255,.56); } #authScreen.auth-container input:focus{ border-color:rgba(170, 224, 255, .78); background:rgba(255,255,255,.16); box-shadow:0 0 0 4px rgba(124, 92, 255, .18); } #authScreen .send-btn{ width:100%; height:56px; border-radius:18px; padding:0 18px; background:linear-gradient(135deg, #9c7bff, #76d6ff) !important; color:#1a1630 !important; font-size:16px; font-weight:800; letter-spacing:.01em; box-shadow:0 16px 34px rgba(26, 16, 58, .22); } #authScreen .send-btn:hover{ background:linear-gradient(135deg, #a78aff, #86ddff) !important; } #loginMessage, #regMessage{ min-height:20px; margin-top:2px !important; font-size:13px; font-weight:600; color:rgba(255,255,255,.84); } @media (max-width: 768px){ body.auth-mode{ background: radial-gradient(900px 560px at 12% 6%, rgba(166, 109, 255, 0.34), transparent 58%), radial-gradient(760px 460px at 88% 12%, rgba(111, 210, 255, 0.18), transparent 56%), linear-gradient(180deg, #46249a 0%, #5d34c6 52%, #734fe6 100%) !important; } body.auth-mode{ align-items:center !important; justify-content:center !important; padding:16px !important; } #authScreen.auth-container{ width:100%; max-width:100%; height:auto; min-height:auto; border-radius:28px; padding:18px; background:linear-gradient(180deg, rgba(255,255,255,.19), rgba(255,255,255,.10)); box-shadow:0 24px 60px rgba(24, 14, 60, .28); } .auth-brand{ margin-bottom:16px; } .auth-brand h1{ font-size:28px; } .auth-form h2{ font-size:22px; } }

LuStA

Современный вход в мессенджер в стиле мобильных приложений — с мягкими фиолетовыми оттенками и стеклянной карточкой.

Вход
Регистрация

С возвращением

Войдите в аккаунт, чтобы продолжить общение.