/* Сайт: окно входа, лист с условиями, аккаунт в настройках. На своём компьютере всего этого не видно. */

/* ---------- окно входа ---------- */
.login {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  padding: calc(20px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto;
  opacity: 0; transition: opacity .5s var(--ease);
}
.login.in { opacity: 1; }
.login.out { opacity: 0; pointer-events: none; }
/* мягкий свет за окном — как свет призмы на воде */
.login::before { content: ''; position: fixed; left: 50%; top: 46%; width: min(980px, 150vw); height: 620px; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(142, 155, 255, .20), rgba(198, 137, 255, .09) 46%, transparent 72%); }
.login-card {
  position: relative; width: min(420px, 100%);
  display: grid; justify-items: center; gap: 0;
  padding: 34px 30px 24px; border-radius: 34px; text-align: center;
  transform: translateY(18px) scale(.97); transition: transform .6s var(--ease);
  --glass-blur: 30px;
}
.login.in .login-card { transform: none; }
.login-card.busy { pointer-events: none; }
.login-card.busy .login-ways { opacity: .55; }
.login-mark { width: 84px; height: 87px; filter: drop-shadow(0 0 16px rgba(255, 255, 255, .5)); }
.login-mark svg { width: 100%; height: 100%; overflow: visible; }
.login-mark path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1s var(--ease) forwards; }
.login-name { margin-top: 18px; font: 900 25px/1.06 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; }
.login-lead { margin-top: 10px; color: var(--ink-2); font-size: 15px; }
.login-ways { width: 100%; display: grid; gap: 14px; margin-top: 26px; transition: opacity .2s; }

.login-google { position: relative; display: grid; justify-items: center; gap: 10px; min-height: 44px; }
.login-gbtn { width: 100%; min-height: 44px; display: grid; justify-items: center; color-scheme: light; }   /* иначе у кнопки Google белый фон вокруг */
.login-shield { position: absolute; inset: 0 0 auto 0; height: 44px; border-radius: 999px; cursor: pointer; }
.login-gplain { width: 100%; height: 44px; font-size: 15px; }
.login-note { color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.login-note:empty { display: none; }

.login-or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 12.5px; }
.login-or::before, .login-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.login-form { display: grid; gap: 10px; width: 100%; }
.login-form .field { width: 100%; height: 48px; border-radius: 16px; font-size: 16px; text-align: center; user-select: text; -webkit-user-select: text; }
.login-form .btn { width: 100%; height: 48px; justify-content: center; font-size: 15px; }
.login-code-in { font: 700 26px/1 var(--font-display) !important; letter-spacing: .32em; padding-left: .32em; }
.login-code-in::placeholder { letter-spacing: .2em; color: var(--ink-4); }
.login-sent { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; margin: 0 0 2px; }
.login-sent b { color: var(--ink); font-weight: 600; word-break: break-all; }
.login-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 2px; }
.login-link { color: var(--ink-2); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.login-link:hover { color: var(--ink); }
.login-link:disabled { color: var(--ink-3); text-decoration: none; }

.login-consent { display: flex; align-items: flex-start; gap: 11px; margin-top: 20px; text-align: left; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; cursor: pointer; }
.login-consent input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.login-check { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: #000;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .34); transition: background .16s, box-shadow .16s, transform .18s var(--spring); }
.login-check .ico { width: 15px; height: 15px; opacity: 0; transform: scale(.5); transition: opacity .14s, transform .2s var(--spring); }
.login-check .ico svg { stroke-width: 2.6; }
.login-consent input:checked + .login-check { background: #fff; box-shadow: 0 0 18px -4px rgba(255, 255, 255, .7); }
.login-consent input:checked + .login-check .ico { opacity: 1; transform: none; }
.login-consent input:focus-visible + .login-check { outline: 2px solid #fff; outline-offset: 2px; }
.login-consent a { color: var(--ink); text-underline-offset: 3px; }
.login-consent.shake { animation: shake .4s var(--ease); }
@keyframes shake { 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 100% { transform: none; } }

.login-error { max-height: 0; overflow: hidden; color: var(--danger); font-size: 13.5px; line-height: 1.45; transition: max-height .25s var(--ease), margin .25s var(--ease); }
.login-error.on { max-height: 80px; margin-top: 14px; }
.login-foot { margin-top: 22px; color: var(--ink-4); font-size: 12px; }

/* пока человек не вошёл, приложения за окном входа нет */
body.login-open #app { visibility: hidden; }

/* ---------- лист поверх окна: условия и политика ---------- */
.sheet-scrim { position: fixed; z-index: 90; padding: 18px; }
.sheet { width: min(860px, 100%); height: min(900px, 100%); display: flex; flex-direction: column; overflow: hidden; padding: 0; border-radius: 28px; transform: translateY(18px); transition: transform .4s var(--ease); }
.scrim.in .sheet { transform: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 22px; border-bottom: 1px solid var(--line); font-size: 15px; }
.sheet-frame { flex: 1; width: 100%; border: 0; background: #000; }

/* ---------- аккаунт в настройках ---------- */
.acc { display: flex; align-items: center; gap: 14px; }
.acc-pic { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; background: linear-gradient(140deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .06)); font: 700 18px var(--font-display); }
.acc-pic img { width: 100%; height: 100%; object-fit: cover; }
.acc-name { font-weight: 600; font-size: 16px; }
.acc-mail { color: var(--ink-2); font-size: 13.5px; user-select: text; -webkit-user-select: text; }
.acc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.btn.danger { color: var(--danger); }
.set-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.set-links a, .set-links button { color: var(--ink-2); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.set-links a:hover, .set-links button:hover { color: var(--ink); }