/* Стиль страниц входа — «тёплая глина» бренда.

   Переменные и тени сняты измерением с работающего leads.tablo-bablo.pro:
   не похожий стиль, а тот же самый. Человек переходит между продуктами и не
   должен замечать стыка.

   Тёмной темы нет намеренно: бренд светлый, а подстройка под систему давала
   вторую страницу, которую никто не рисовал.

   Ни одного значения на глаз: всё, что ниже, — из шкалы, объявленной здесь же
   и совпадающей с design/tokens.json бренда. */

:root {
  --cl-bg: #E8E5DE;
  --cl-card: #F3F1EA;
  --cl-raised: #FBFAF6;
  --cl-border: #DCD8CD;
  --cl-text: #2E2B25;
  --cl-text-2: #6B665C;
  --cl-accent: #5E9E54;
  --cl-accent-strong: #4F9243;
  --cl-accent-soft: #DDEBD1;
  --cl-accent-soft-ink: #34660F;
  --cl-danger: #9E2B2B;
  --cl-danger-soft: #F6D9D3;
  --cl-yandex: #FC3F1D;
  --cl-white: #FFFFFF;
  /* Кольцо фокуса — акцент с прозрачностью: рамки у полей нет, и без кольца
     непонятно, куда попадёт набранное. */
  --cl-focus: rgba(94,158,84,.4);
  --cl-press: rgba(0,0,0,.05);

  /* Белая линия сверху обязательна: она и делает «глину», без неё карточка
     плоская. */
  --cl-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 14px 30px -14px rgba(120,114,100,.5),
               0 3px 8px rgba(120,114,100,.14);
  --cl-shadow-sm: inset 0 1px 0 rgba(255,255,255,.55), 0 6px 16px -8px rgba(120,114,100,.4);
  --cl-shadow-btn: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 14px -6px rgba(120,114,100,.45);
  --cl-shadow-inset: inset 0 2px 5px rgba(120,114,100,.3), inset 0 1px 0 rgba(255,255,255,.4);

  --r-card: 1.5rem;
  --r-control: .9rem;
  --r-tile: 1rem;
  --r-small: .75rem;
  --r-chip: .5rem;
  --r-round: 50%;

  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;

  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.5rem;

  --h-control: 2.75rem;
  --h-button: 3rem;
  --h-button-lg: 3.25rem;

  --ease-smooth: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .12s;
}

* { box-sizing: border-box; }

body {
  margin: 0; min-height: 100dvh; display: grid; place-items: center;
  padding: var(--s-8) var(--s-4);
  background: var(--cl-bg); color: var(--cl-text);
  font-family: Nunito, system-ui, sans-serif; font-size: var(--fs-md); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.card {
  width: min(26rem, 100%); padding: var(--s-8); text-align: center;
  background: var(--cl-card); border-radius: var(--r-card); box-shadow: var(--cl-shadow);
}
.logo {
  width: 3.5rem; height: 3.5rem; margin: 0 auto; display: block;
  border-radius: var(--r-tile); box-shadow: var(--cl-shadow-sm);
}
h1 { margin: var(--s-5) 0 0; font-size: var(--fs-lg); font-weight: 800; line-height: 1.34; }
p.sub { margin: var(--s-2) 0 0; font-size: var(--fs-sm); color: var(--cl-text-2); }

form { margin-top: var(--s-8); display: grid; gap: var(--s-3); text-align: left; }

input[type=email], input[type=text], input[type=password] {
  display: block; width: 100%; height: var(--h-control); padding: var(--s-3) var(--s-4);
  font: inherit; font-size: var(--fs-sm); color: var(--cl-text);
  background: var(--cl-bg); border: none; border-radius: var(--r-control);
  box-shadow: var(--cl-shadow-inset);
}
/* Не --cl-text-muted: на фоне поля он даёт 2.4:1 — подсказку не прочесть. */
input::placeholder { color: var(--cl-text-2); }
input:focus {
  outline: none;
  box-shadow: var(--cl-shadow-inset), 0 0 0 2px var(--cl-focus);
}

.pw { position: relative; display: block; }
/* Место под глазок: иначе он лежит поверх набранного. */
.pw input { padding-right: calc(var(--s-8) + var(--s-3)); }
.pw button {
  position: absolute; right: var(--s-2); top: 50%; transform: translateY(-50%);
  padding: var(--s-2); line-height: 0; color: var(--cl-text-2);
  background: none; border: 0; border-radius: var(--r-chip); cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.pw button:hover { color: var(--cl-text); background: var(--cl-press); }

button.primary {
  width: 100%; height: var(--h-button); font: inherit; font-weight: 700; color: var(--cl-white);
  background: var(--cl-accent-strong); border: none; border-radius: var(--r-control);
  box-shadow: var(--cl-shadow-btn); cursor: pointer;
  transition: filter var(--t-fast) var(--ease-smooth), transform var(--t-fast) var(--ease-smooth);
}
button.primary:hover { filter: brightness(1.05); }
button.primary:active { box-shadow: var(--cl-shadow-inset); transform: scale(.98); }

button.yandex {
  width: 100%; height: var(--h-button-lg); display: inline-flex; align-items: center;
  justify-content: center; gap: var(--s-3); font: inherit; font-weight: 700; color: var(--cl-white);
  background: var(--cl-yandex); border: none; border-radius: var(--r-small);
  box-shadow: var(--cl-shadow-btn); cursor: pointer;
  transition: filter var(--t-fast) var(--ease-smooth);
}
button.yandex:hover { filter: brightness(1.05); }
button.yandex span.mark {
  display: grid; place-items: center; width: var(--s-5); height: var(--s-5);
  font-weight: 900; font-size: var(--fs-sm); color: var(--cl-yandex);
  background: var(--cl-white); border-radius: var(--r-round);
}

.divider {
  display: flex; align-items: center; gap: var(--s-3); margin: var(--s-5) 0 var(--s-4);
  font-size: var(--fs-xs); color: var(--cl-text-2);
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--cl-border);
}

.consent {
  display: flex; align-items: flex-start; gap: var(--s-2);
  font-size: var(--fs-xs); line-height: 1.45; color: var(--cl-text-2); text-align: left;
}
/* Половина шага: квадрат чекбокса выше строки, и по верхнему краю они расходятся. */
.consent input { margin-top: calc(var(--s-1) / 2); accent-color: var(--cl-accent); }

.right { margin-top: calc(var(--s-1) * -1); text-align: right; }
.right a { font-size: var(--fs-xs); color: var(--cl-text-2); text-decoration: none; }
.right a:hover { text-decoration: underline; }

.foot { margin: var(--s-3) 0 0; font-size: var(--fs-xs); color: var(--cl-text-2); }
.foot a, .consent a { color: var(--cl-accent-soft-ink); }

.notice {
  margin-top: var(--s-5); padding: var(--s-3) var(--s-4); border-radius: var(--r-control);
  font-size: var(--fs-sm); text-align: left;
  background: var(--cl-danger-soft); color: var(--cl-danger);
}
.notice--calm { background: var(--cl-accent-soft); color: var(--cl-accent-soft-ink); }

/* Список продуктов на странице аккаунта. */
ul.apps {
  margin: var(--s-8) 0 0; padding: 0; list-style: none;
  display: grid; gap: var(--s-2); text-align: left;
}
li.app {
  padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); font-weight: 700;
  background: var(--cl-raised); border-radius: var(--r-control); box-shadow: var(--cl-shadow-sm);
}