/* Экран входа. Размеры под окно 1600×1000. До входа аккаунт неизвестен, поэтому палитра «Бирюза» по умолчанию. */
:root {
  --a-panel: #1d1b18;
  --a-panel-text: #b4ada5;
  --a-panel-line: #443f3a;
  --a-accent: #0f7c83;
  --a-link: #0b646a;
  --a-text: #33302d;
  --a-input-text: #22252c;
  --a-icon: #585d6a;
  --a-bg: #f5f5f5;
  --a-placeholder: #b5b5b5;
  --a-line: #e8eaeb;
  --a-danger-soft: #f37575;
  --a-white: #fff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 400 15px/normal "PT Sans", Arial, sans-serif; color: var(--a-text); background: var(--a-bg); }
.auth { position: fixed; left: 0; top: 0; bottom: 0; width: 374px; background: var(--a-panel); color: var(--a-panel-text); }
.auth__mark { position: absolute; left: 0; right: 0; top: 272px; text-align: center; }
.auth__mark svg { width: 146px; height: 31px; }
.auth__brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; font: 700 26px/1 "PT Sans", Arial, sans-serif; letter-spacing: .06em; }
.auth__brand-logo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.auth__form { position: absolute; left: 0; right: 0; top: 335px; padding: 0 39px; }
.auth__row { position: relative; margin-top: 12px; height: 40px; }
.auth__field { position: relative; display: block; height: 36px; background: var(--a-bg); border-radius: 4px; }
.auth__icon { position: absolute; left: 5px; top: 4px; width: 24px; height: 28px; color: var(--a-icon); }
.auth__input { display: block; width: 100%; height: 36px; margin: 0; border: 0; border-radius: 4px; background: transparent;
  padding: 8px 10px 9px 36px; font: inherit; color: var(--a-input-text); outline: none; }
.auth__input--pass { width: 77%; }
.auth__input::placeholder { color: var(--a-placeholder); }
.auth__forgot { position: absolute; right: 10px; top: 8px; color: var(--a-link); text-decoration: none; }
.auth__buttons { position: relative; margin: 12px 0 -10px; height: 56px; display: flex; gap: 16px; }
.auth__btn { width: 140px; height: 36px; border-radius: 4px; font: inherit; color: var(--a-white); text-align: center; cursor: pointer; }
.auth__btn--primary { border: 0; background: var(--a-accent); padding: 1px 0 0; margin: 0 0 1px; }
.auth__btn--secondary { display: block; border: 1px solid var(--a-panel-line); background: var(--a-panel); padding: 8px 0 7px; text-decoration: none; }
.auth__check { position: relative; margin-top: 12px; height: 22px; display: flex; align-items: center; gap: 4px; }
.auth__box { position: relative; display: block; width: 21px; height: 21px; margin: 0 7px 0 0; padding: 1px 0 0; cursor: pointer; }
.auth__box input { position: absolute; left: 0; top: 0; width: 20px; height: 20px; margin: 0; border: 0; background: var(--a-white); opacity: 0; cursor: pointer; }
.auth__box-mark { position: absolute; left: 0; top: 0; box-sizing: content-box; width: 18px; height: 18px; background: var(--a-white); border: 1px solid var(--a-line); border-radius: 4px; pointer-events: none; }
.auth__box input:checked + .auth__box-mark { background: var(--a-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%237443d6' stroke-width='2'/%3E%3C/svg%3E") center/16px no-repeat; }
.auth__check-label { letter-spacing: 0.3px; cursor: pointer; }
.auth__error { margin-top: 8px; color: var(--a-danger-soft); font-size: 13px; }
.auth__link { color: inherit; text-decoration: underline; }
.auth__done { margin-top: 8px; color: var(--a-white); font-size: 13px; }
.auth__footmark { position: absolute; left: 0; right: 0; top: 945px; text-align: center; }
.auth__footmark svg { width: 84px; height: 22px; }
.auth__note { margin: 0 0 4px; line-height: 1.4; }
.auth__input--code { padding-left: 12px; letter-spacing: 3px; }
@media (max-width: 760px) {  /* телефон: панель входа во всю ширину, форма выше */
  .auth { width: 100%; }
  .auth__mark { top: 12vh; }
  .auth__form { top: calc(12vh + 63px); padding: 0 20px; }
  .auth__buttons { gap: 12px; }
  .auth__btn { flex: 1; width: auto; }
  .auth__footmark { top: auto; bottom: 24px; }
}
.auth__note p { margin: 0 0 14px; color: var(--a-white); font-size: 15px; line-height: 1.45; }
.auth__note .auth__btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }