/* ==========================================================================
   TeleFalafel — СТРАНИЦА ВХОДА «первая страница блокнота».
   Standalone (без общей оболочки). Использует токены/компоненты app.css.
   Маскот — пёс «Ластик» (рукописный SVG), глаза следят за курсором.
   ========================================================================== */

.login-body {
  --accent: var(--pc-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: max(20px, env(safe-area-inset-top)) 18px
           calc(20px + env(safe-area-inset-bottom));
}

.login-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ─────────── МАСКОТ «ЛАСТИК» ─────────── */
.mascot {
  width: 180px;
  height: 150px;
  margin-bottom: -14px;   /* «сидит» на верхнем крае листа */
  position: relative;
  z-index: 3;
  filter: drop-shadow(3px 5px 0 rgba(0,0,0,.4));
}
.mascot svg { width: 100%; height: 100%; overflow: visible; }
/* пёс «Ластик» нарисован мелом по грифельной доске: светлый штрих,
   тело — чуть светлее фона, пятно/язык — пастель */
.mascot .m-stroke { fill: none; stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.mascot .m-body { fill: color-mix(in srgb, var(--ink) 16%, var(--paper-2)); }
.mascot .m-patch { fill: color-mix(in srgb, var(--pc-brown) 42%, var(--paper-2)); }
.mascot .m-nose { fill: var(--ink); }
.mascot .m-tongue { fill: var(--pc-pink); }
.mascot .m-pupil { fill: var(--ink); transition: transform .08s linear; }
.mascot .m-ear { transform-origin: top center; transition: transform .3s var(--ease-draw); }
.mascot .m-ear-l { transform-origin: 58px 54px; }
.mascot .m-ear-r { transform-origin: 122px 54px; }
.mascot .m-paw { transition: transform .32s var(--ease-draw); }
.mascot .m-paw-l { transform-origin: 74px 118px; }
.mascot .m-paw-r { transform-origin: 106px 118px; }
.mascot .m-tail { transform-origin: 150px 108px; }
.mascot .m-lids { opacity: 0; transition: opacity .18s; }

/* Пароль в фокусе — закрывает глаза лапами */
.mascot.is-peeking .m-paw-l { transform: translate(6px, -34px) rotate(-18deg); }
.mascot.is-peeking .m-paw-r { transform: translate(-6px, -34px) rotate(18deg); }
.mascot.is-peeking .m-lids  { opacity: 1; }
.mascot.is-peeking .m-pupil { opacity: 0; }

/* Ошибка входа — уши вниз, грустно */
.mascot.is-sad .m-ear-l { transform: rotate(26deg) translateY(6px); }
.mascot.is-sad .m-ear-r { transform: rotate(-26deg) translateY(6px); }
.mascot.is-sad .m-tongue { opacity: 0; }

/* Успех — виляет хвостом */
.mascot.is-happy .m-tail { animation: tail-wag .32s ease-in-out 6; }
@keyframes tail-wag {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-26deg); }
}

/* ─────────── ЛИСТ-ФОРМА ─────────── */
.login-card {
  position: relative;
  width: 100%;
  padding: 34px 28px 26px;
  /* крупный стеклянный лист (единственный blur-слой сцены + фон-канвас) */
  background: var(--glass-strong);
  backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(1.2);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(1.2);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--r1);
  box-shadow: var(--sh-3), var(--glow) color-mix(in srgb, var(--accent) 20%, transparent), inset 0 1px 0 rgba(233,228,216,.06);
  /* красная линия полей слева, как в тетради — остаётся тёплой */
  background-image: linear-gradient(90deg, transparent 30px, rgba(226,114,91,.4) 30px, rgba(226,114,91,.4) 31.5px, transparent 31.5px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .login-card { background-color: color-mix(in srgb, var(--paper-2) 97%, #000); }
}
.login-head { text-align: center; margin-bottom: 22px; }
.login-title {
  font-family: var(--font-hand);
  font-size: 2.6rem;
  margin: 0;
  color: var(--ink);
  line-height: 1;
}
.login-title b { color: var(--pc-orange); font-weight: inherit; }
.login-sub {
  font-family: var(--font-note);
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 6px 0 0;
}

/* поле пароля с «глазиком» */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px; }
.pw-toggle {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: none; border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 8px;
}
.pw-toggle .ic { width: 22px; height: 22px; }
.pw-toggle:hover { color: var(--accent-ink); }
.pw-toggle.is-shown { color: var(--accent-ink); }

.login-actions { margin-top: 8px; }
.login-hint {
  font-family: var(--font-note);
  font-size: 13px;
  color: var(--ink-faint);
  text-align: center;
  margin: 16px 0 0;
}

/* ошибка входа — красный стикер */
.login-error {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  padding: 12px 14px;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--ink);
  background: color-mix(in srgb, var(--pc-red) 13%, var(--paper));
  border: 2px solid var(--pc-red);
  border-radius: var(--r3);
  box-shadow: var(--sh-2);
  transform: rotate(-1deg);
  animation: sticker-in .4s var(--ease-draw) both;
}
.login-error .flash-title { font-family: var(--font-hand); font-size: 1.4rem; color: var(--pc-red); line-height: 1; }

/* мобайл: форма разворачивается почти во весь экран */
@media (max-width: 480px) {
  .login-body { padding-left: 12px; padding-right: 12px; }
  .mascot { width: 150px; height: 126px; }
  .login-card { padding: 26px 20px 22px; }
  .login-title { font-size: 2.2rem; }
}