*{margin:0;padding:0;box-sizing:border-box} body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0e0e0e;min-height:100vh;display:flex;align-items:center;justify-content:center;color:#fff} .wrap{display:flex;flex-direction:column;align-items:center;width:100%;padding:20px} .logo{font-size:26px;font-weight:900;letter-spacing:2.5px;color:#fff;text-transform:uppercase;margin-bottom:18px;font-style:italic} .logo .dot{color:#7ecbd4} .title{font-size:22px;font-weight:500;color:#f0f0f0;margin-bottom:8px} .subtitle{font-size:14px;color:#666;margin-bottom:28px;text-align:center;line-height:1.5} /* Card */ .card{background:#1e1e1e;border-radius:10px;padding:28px 28px 20px;width:100%;max-width:260px} .form-group{margin-bottom:16px} .form-group label{display:block;font-size:13px;color:#ccc;margin-bottom:6px;font-weight:400} .form-group input[type=text], .form-group input[type=password]{width:100%;padding:9px 12px;background:#111;border:1.5px solid #2e5f70;border-radius:6px;color:#fff;font-size:14px;outline:none;height:40px;transition:border-color .15s,box-shadow .15s} .form-group input:focus{border-color:#7ecbd4;box-shadow:0 0 0 2px rgba(126,203,212,0.15)} .form-group input::placeholder{color:#333} .password-wrap{position:relative} .password-wrap input{padding-right:38px!important} .eye-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#555;display:flex;align-items:center;padding:0} .eye-btn:hover{color:#888} .eye-btn svg{width:17px;height:17px} .btn-login{width:100%;height:42px;background:#f5f5f0;color:#1a1a1a;border:none;border-radius:6px;font-size:15px;font-weight:500;cursor:pointer;transition:background .15s,opacity .15s;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px} .btn-login:hover{background:#e2e2dd} .btn-login:disabled{opacity:.6;cursor:not-allowed} .spinner{display:none;width:15px;height:15px;border:2px solid rgba(0,0,0,0.15);border-top-color:#333;border-radius:50%;animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* "Unable to login" под кнопкой */ .unable-msg{display:none;align-items:center;gap:5px;color:#e05555;font-size:13px;margin-top:10px} .unable-msg.show{display:flex} .unable-msg svg{width:14px;height:14px;flex-shrink:0} /* Throttle */ .throttle-msg{display:none;color:#e3a946;font-size:12px;text-align:center;margin-top:8px} .throttle-msg.show{display:block} /* Toast уведомление (верхний правый угол) */ .toast{position:fixed;top:16px;right:16px;background:#fff;border-radius:8px;padding:12px 16px;min-width:220px;display:flex;align-items:flex-start;gap:10px;box-shadow:0 4px 20px rgba(0,0,0,0.4);z-index:1000;transform:translateX(120%);transition:transform .3s ease;pointer-events:none} .toast.show{transform:translateX(0);pointer-events:all} .toast-icon{width:20px;height:20px;flex-shrink:0;margin-top:1px} .toast-icon svg{width:20px;height:20px} .toast-body{flex:1} .toast-title{font-size:14px;font-weight:600;color:#e05555;line-height:1.3} .toast-sub{font-size:13px;color:#888;margin-top:2px} .toast-close{background:none;border:none;cursor:pointer;color:#aaa;font-size:18px;line-height:1;padding:0;margin-left:4px;margin-top:-1px} .toast-close:hover{color:#555} @keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}} .shake{animation:shake .35s ease}