/* PassTask: вход, регистрация и экраны хранилища на токенах ui.css. Разметка форм и логика прежние. */
body.vp { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.vp-top { display: flex; align-items: center; flex: none; height: 48px; padding: 0 16px; background: var(--bg-raised); border-bottom: 1px solid var(--border); }
.vp-logo { font-size: 14px; font-weight: 600; color: var(--text); }
.vp-wrap { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.vp-card { position: relative; width: 100%; max-width: 560px; }
.vp-btn .ui-i { width: 20px; height: 20px; margin-right: 8px; }
.vp-card--narrow { max-width: 400px; }
.vp-card h1 { font-size: 20px; line-height: 28px; font-weight: 600; margin-bottom: 8px; }
.vp-card h2 { font-size: 14px; line-height: 20px; font-weight: 600; margin: 16px 0 8px; }
.vp-muted { font-size: 13px; line-height: 18px; color: var(--text-muted); }
.vp-muted--center { margin-top: 12px; text-align: center; }
.vp-muted a { color: inherit; text-decoration: underline; }
.vp-p { margin: 8px 0; }
.vp-steps { display: flex; gap: 4px; margin: 8px 0 16px; }
.vp-steps span { flex: 1; height: 4px; border-radius: 2px; background: var(--border); }
.vp-steps span.done { background: var(--accent); }
.vp-field { margin: 12px 0; }
.vp-field label { display: block; margin-bottom: 4px; font-size: 12px; line-height: 16px; color: var(--text-muted); }
.vp-card input[type=password], .vp-card input[type=text], .vp-card input[type=email] { display: block; width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--bg-input); color: var(--text); font-size: 14px; box-sizing: border-box; }
.vp-card input:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.vp-pair { display: flex; gap: 8px; }
.vp-card input.vp-code { text-transform: uppercase; font-family: var(--mono); text-align: center; }
.vp-card input.vp-code--left { text-align: left; }
.vp-pw { position: relative; }
.vp-card .vp-pw input { padding-right: 40px; }
.vp-eye { position: absolute; top: 2px; right: 2px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--text-muted); cursor: pointer; }
.vp-eye:hover { color: var(--text); }
.vp-eye .vp-eye__off { display: none; }
.vp-eye.is-on .vp-eye__on { display: none; }
.vp-eye.is-on .vp-eye__off { display: inline-flex; }
.vp-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.vp-row--tight { margin-top: 4px; }
.vp-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 140px; min-height: 36px; padding: 4px 16px; border: 1px solid var(--border-strong); border-radius: 4px; background: transparent; color: var(--text); font-size: 14px; line-height: 20px; text-align: center; cursor: pointer; box-sizing: border-box; }
.vp-btn:hover { background: var(--bg-hover); text-decoration: none; }
.vp-btn--full { display: flex; width: 100%; }
.vp-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.vp-btn.primary:hover { opacity: 0.9; }
.vp-btn.danger { background: var(--critical); border-color: var(--critical); color: var(--bg); font-weight: 600; }
.vp-btn.is-good { background: var(--good); border-color: var(--good); color: var(--bg); }
.vp-btn.is-bad { background: var(--critical); border-color: var(--critical); color: var(--bg); }
.vp-btn.is-warn { background: var(--warning); border-color: var(--warning); color: var(--bg); }
.vp-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.vp-alert { display: none; margin: 8px 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; line-height: 18px; }
.vp-alert.error { display: block; background: var(--critical-bg); color: var(--critical); }
.vp-alert.warn { display: block; background: var(--warning-bg); color: var(--warning); }
.vp-alert.ok { display: block; background: var(--good-bg); color: var(--good); }
.vp-alert a { color: inherit; text-decoration: underline; }
.vp-alert__more { margin-top: 8px; }
.vp-meter { height: 4px; margin-top: 8px; border-radius: 2px; background: var(--border); overflow: hidden; }
.vp-meter i { display: block; width: 0; height: 100%; background: var(--critical); }
.vp-meter-text { min-height: 16px; margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--text-muted); }
.vp-rc { margin: 12px 0; padding: 12px; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--bg-raised); font-family: var(--mono); font-size: 18px; line-height: 24px; text-align: center; overflow-wrap: anywhere; user-select: all; }
.vp-check { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 13px; line-height: 18px; }
.vp-check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
ul.vp-list { margin: 8px 0 8px 20px; padding: 0; }
ul.vp-list li { margin-bottom: 4px; }
.vp-or { margin: 12px 0 8px; font-size: 12px; line-height: 16px; color: var(--text-muted); text-align: center; }
.vp-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 12px; font-size: 13px; line-height: 18px; }
.vp-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 12px; line-height: 16px; color: var(--text-muted); }
.vp-foot a { color: inherit; }
.vp-langs { display: flex; gap: 8px; }
.vp-langs a.on { color: var(--text); font-weight: 600; }
.vp-spin { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; vertical-align: -2px; animation: vpspin 0.8s linear infinite; }
@keyframes vpspin { to { transform: rotate(360deg); } }
.vp-hp { position: absolute; left: -9999px; top: -9999px; }
.vp-gap { margin-bottom: 12px; }

/* Окно привязки ключа доступа */
.bio-modal { position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.5); }
.bio-modal-content { position: relative; width: 100%; max-width: 400px; max-height: 100%; padding: 16px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); overflow: auto; box-sizing: border-box; }
.bio-modal-close, .close-button { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--text-muted); cursor: pointer; }
.bio-modal-close:hover, .close-button:hover { color: var(--text); }
.bio-modal-title { padding-right: 32px; font-size: 16px; line-height: 24px; font-weight: 600; }
.bio-modal-desc { margin: 4px 0 12px; font-size: 13px; line-height: 18px; color: var(--text-muted); }
.bio-modal-error { margin-bottom: 8px; font-size: 13px; line-height: 18px; color: var(--critical); }
.bio-modal-form input { margin-bottom: 8px; }
.bio-done { margin-bottom: 12px; }
.bio-done__title { font-weight: 600; color: var(--good); }
.bio-done__text { margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--text-muted); }
.bio-skip { margin-top: 8px; }

/* Регистрация */
.password-strength { height: 4px; margin-top: 8px; border-radius: 2px; background: var(--border); overflow: hidden; }
.password-strength-bar { width: 0; height: 100%; background: var(--critical); }
.password-strength-bar.strength-weak { width: 25%; background: var(--critical); }
.password-strength-bar.strength-fair { width: 50%; background: var(--warning); }
.password-strength-bar.strength-good { width: 75%; background: var(--good); }
.password-strength-bar.strength-strong { width: 100%; background: var(--good); }
.agreement-modal { display: none; position: fixed; inset: 0; z-index: 100; padding: 16px; background: rgba(0, 0, 0, 0.5); overflow: auto; }
.agreement-modal-content { position: relative; max-width: 720px; margin: 16px auto; padding: 16px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); }
.agreement-modal-content h2 { padding-right: 32px; margin: 0 0 8px; font-size: 16px; line-height: 24px; font-weight: 600; }
.agreement-text { font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.agreement-text h1, .agreement-text h2, .agreement-text h3 { margin: 12px 0 4px; font-size: 14px; line-height: 20px; font-weight: 600; }
.agreement-text p { margin: 8px 0; }

/* Код устройства */
.code-inputs { display: flex; justify-content: center; gap: 8px; margin: 16px 0; }
.vp-card input.code-input { width: 44px; height: 48px; padding: 0; font-family: var(--mono); font-size: 20px; text-align: center; }
.vp-card input.code-input.filled { border-color: var(--accent); }
.device-info { display: flex; gap: 8px; margin: 12px 0; font-size: 13px; line-height: 18px; }
.device-info-label { color: var(--text-muted); }
.device-info-value { min-width: 0; overflow-wrap: anywhere; }
.vp-timer { margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--text-muted); text-align: center; }
.vp-resend { margin-top: 12px; text-align: center; }
.btn-link { padding: 0; border: 0; background: none; color: var(--accent); font-size: 13px; line-height: 18px; cursor: pointer; }
.btn-link:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .vp-card input[type=password], .vp-card input[type=text], .vp-card input[type=email] { height: 44px; font-size: 16px; }
  .vp-eye { top: 6px; }
  .vp-btn { min-height: 44px; }
  .vp-card input.code-input { width: 44px; height: 52px; }
  .vp-rc { font-size: 16px; }
}