flex-direction: column; gap: 8px; } .form-label { font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; } .form-input { background: var(--chip); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; font-size: 14px; color: var(--fg); transition: all 0.2s ease; font-family: inherit; } .form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(122, 162, 247, 0.1); } .form-input::placeholder { color: var(--muted); } .password-input-wrapper { position: relative; width: 100%; } .password-toggle { position: absolute; right: 8px; /* Ближе к краю для всех устройств */ top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 4px; transition: all 0.2s ease; z-index: 10; display: flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; } .password-toggle:hover { color: var(--fg); background: var(--chip); } .password-toggle:active { transform: translateY(-50%) scale(0.95); } .password-input-wrapper .form-input { padding-right: 40px; /* Место для кнопки */ width: 100%; /* Поле на всю ширину */ } .login-button { background: var(--accent); color: #0b0d12; border: none; border-radius: 8px; padding: 14px 24px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; font-family: inherit; margin-top: 8px; } .login-button:hover { background: #6b8fd8; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(122, 162, 247, 0.3); } .login-button:disabled { background: var(--muted); cursor: not-allowed; transform: none; box-shadow: none; } .error-message { background: rgba(247, 118, 142, 0.1); border: 1px solid var(--err); border-radius: 8px; padding: 12px 16px; font-size: 14px;