/* Пульт · то, чего не было в мокапе: вход, загрузка, признак сохранения, ссылка установки пароля. Только переменные «Бенто». */

/* ---------- загрузка данных команды */
.boot { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--bg); color: var(--ink-2); font: 500 15px/1.4 var(--font, Onest, Arial, sans-serif); z-index: 50; padding: 24px; text-align: center; flex-wrap: wrap; }
.boot-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--brand-dot); animation: boot-spin 1.1s linear infinite; flex: none; }
.boot.err { color: var(--coral-700); }
.boot.err .boot-dot { animation: none; background: var(--coral-500); }
@keyframes boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-dot { animation: none; } }

/* ---------- вход и пароль */
.auth-body { min-height: 100vh; min-height: 100dvh; background: var(--bg); }
.auth { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; position: relative; overflow: hidden; }
.auth::before { content: ''; position: absolute; width: 720px; height: 720px; left: 50%; top: 42%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--aura-1), transparent 70%), radial-gradient(closest-side at 70% 60%, var(--aura-2), transparent 70%); pointer-events: none; }
.auth-card { position: relative; width: 100%; max-width: 420px; background: var(--surface); border-radius: var(--r-xl, 24px); box-shadow: var(--shadow-2, 0 1px 2px rgba(29, 28, 26, .06), 0 12px 32px rgba(29, 28, 26, .08)); padding: 32px 28px 26px; }
.auth-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 22px; }
.auth-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-dot); }
.auth-t { font-size: 30px; line-height: 1.12; letter-spacing: -.02em; font-weight: 600; margin: 0 0 8px; }
.auth-t em { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; color: var(--signature); font-size: 1.12em; }
.auth-sub { color: var(--ink-2); margin: 0 0 22px; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.auth-form { display: grid; gap: 14px; }
.auth-form .field { display: grid; gap: 6px; }
.auth-form .input { width: 100%; }
.auth-go { width: 100%; justify-content: center; margin-top: 4px; }
.auth-err { margin: 0; color: var(--coral-700); background: var(--coral-50); border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.4; }
.auth-note { margin: 18px 0 0; color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 13px; margin: 18px 0 14px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
#g-btn { display: flex; justify-content: center; min-height: 44px; }

/* ---------- второй шаг входа: код приложения, настройка по QR-коду, резервные коды */
.auth-code { font: 600 22px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; text-align: center; }
.auth-steps { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 12px; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; list-style: decimal; }
.auth-steps li::marker { color: var(--ink-3); font-weight: 600; }
.auth-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.auth-steps b { color: var(--ink); font-weight: 600; }
.auth-qr { display: block; width: 220px; max-width: 100%; height: auto; margin: 10px 0 8px; border-radius: 12px; background: #fff; padding: 6px; box-shadow: inset 0 0 0 1px var(--line-2); }
.auth-key { display: block; font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
.auth-key code, .tf-key code { font: 600 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); background: var(--surface-3); border-radius: 6px; padding: 1px 6px; }
.auth-codes, .tf-codes { list-style: none; margin: 0 0 14px; padding: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; background: var(--surface-3); border-radius: 14px; font: 600 15px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
.auth-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.auth-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--ink-2); margin-bottom: 14px; }
.auth-check input { margin-top: 2px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.tf-qr { display: block; width: 200px; max-width: 100%; height: auto; border-radius: 12px; background: #fff; padding: 6px; box-shadow: inset 0 0 0 1px var(--line-2); }
.tf-setup { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 560px) { .tf-setup { grid-template-columns: minmax(0, 1fr); } }
.tf-key { display: block; font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; margin-top: 8px; }
.tf-code { max-width: 200px; font: 600 20px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; text-align: center; }

/* ---------- сохранение: пока изменения уходят на сервер, у аватара в меню пульсирует точка */
[data-act="user-menu"] { position: relative; }
.is-saving [data-act="user-menu"]::after { content: ''; position: absolute; right: 2px; top: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--sand-500); box-shadow: 0 0 0 2px var(--surface); }

/* ---------- ссылка установки пароля в окне приглашения */
.invite-link { display: block; padding: 12px 14px; border-radius: 12px; background: var(--surface-3); font: 500 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; user-select: all; }
.inv-dirs { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.qr-img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.um-mail { color: var(--ink-3); font-size: 12.5px; overflow-wrap: anywhere; }

/* этап B: загрузка таблицы, кнопка во время запроса */
.pp-drop { cursor: pointer; }
.pp-drop.is-over, .pp-drop:focus-within { outline-color: var(--accent); background: var(--surface-3); }
.btn.is-busy { opacity: .7; cursor: progress; }
.ct-chat .cell-s.mono { display: block; overflow-wrap: anywhere; }