@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300..700&display=swap");
/* Страница входа (v45, 10.10.2026). Один файл для сервера (/login) и демо (build.py вставляет его без @import, картинки — внутрь страницы).
   Всё внутри .lg — в демо страница входа живёт на одной странице с порталом и не должна задевать его стили.
   Фон — своя сцена: шёлк на закате, живая анимация на WebGL (public/login-silk.js). Складки ткани медленно колышутся, в дне одной складки
   течёт тёплый свет. Свет всегда проходит там, где его видно: на компьютере — слева от карточки, на телефоне — полосой между текстом
   и карточкой. Пока анимация запускается (или если WebGL нет) — неподвижный кадр той же сцены: login-silk-land.webp / login-silk-port.webp.
   «Уменьшить движение» — один неподвижный кадр. Цвета — сиреневый закат и оранжевый свет (решение Арно, вне брендбука).
   Поверх — белая карточка входа, в обеих темах. Карточка сплошная, без размытия фона: размытие поверх анимации тормозит телефоны.
   Немного стиля Apple: системный шрифт SF Pro на iPhone и Mac (на остальных — Geist); крупный жирный заголовок, кнопки-капсулы;
   капча — ячейка, как в настройках iOS; карточка поднимается по пружинной кривой iOS.
   Раскладка: на телефоне — логотип и заголовок сверху, ниже полоса со светом, карточка; от 600 px — карточка по центру экрана,
   над ней заголовок, логотип — в левом верхнем углу. */
.lg {
  --ink: #1f2727; --muted: #4b5856; --line: rgba(31, 39, 39, 0.12); --cell: rgba(52, 40, 86, 0.07); --sheet: rgba(255, 255, 255, 0.6); --surface: rgba(255, 255, 255, 0.85);
  --glass: rgba(255, 255, 255, 0.97); --glass-solid: #f6faf9; --edge-1: rgba(255, 255, 255, 0.95); --edge-2: rgba(255, 255, 255, 0.3);
  --calm: #c7e7dc; --teal: #00626b; --focus: #00626b;
  --bad: #b42318; --bad-soft: rgba(253, 236, 235, 0.9); --good: #12805c;
  --g-bg: #1f2727; --g-fg: #ffffff; --g-hover: #2b3837;
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  /* фон-сцена: телефонный кадр; от 600 px — широкий (каждая картинка упомянута один раз — в демо она встроена в страницу) */
  --sc: url("/login-silk-port.webp");
  position: relative; isolation: isolate; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; color: var(--ink);
  background: #4a3462; color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Geist", "Segoe UI", system-ui, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11";
}
/* тёмной темы у страницы входа нет: фон — всегда светлый закат, карточка белая */
.lg-body { margin: 0; background: #4a3462; }
.lg, .lg * { box-sizing: border-box; }
.lg[hidden], .lg [hidden] { display: none !important; }
.lg :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------- фон: неподвижный кадр, поверх — живая анимация (появляется плавно, когда нарисован первый кадр) ---------- */
.lg-scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: var(--sc) 50% 50% / cover no-repeat; }
.lg-silk { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.9s ease-out; }
.lg-silk.on { opacity: 1; }

/* ---------- шапка: логотип и заголовок на ткани ---------- */
.lg-hero { position: relative; flex: none; height: 380px; padding: calc(22px + env(safe-area-inset-top, 0px)) 24px 0; color: #ffffff; }
.lg-hero-t { margin-top: 22px; }
.lg-brand { display: flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.82); text-shadow: 0 1px 10px rgba(30, 14, 56, 0.35); }
.lg-brand .vlogo { display: block; height: 34px; width: auto; flex: none; color: #ffffff; filter: drop-shadow(0 1px 8px rgba(30, 14, 56, 0.35)); }
/* заголовок шапки — жирный и плотный, как заголовки на сайте Apple; белый на тёмной ткани, мягкая тень — от света полосы */
.lg-claim { margin: 0; max-width: 11ch; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Geist", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(32px, 9vw, 44px); font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance;
  color: #ffffff; text-shadow: 0 2px 18px rgba(30, 14, 56, 0.45); }
.lg-sub { margin: 10px 0 0; max-width: 32ch; font-size: 16px; line-height: 1.45; color: rgba(255, 255, 255, 0.86); text-shadow: 0 1px 12px rgba(30, 14, 56, 0.5); }

/* ---------- карточка: белая, плавает с отступами, тонкий блик по краю ---------- */
.lg-sheet { position: relative; flex: none; display: grid; gap: 16px; align-content: start; grid-template-columns: minmax(0, 1fr); text-align: center;
  margin: -58px 10px calc(10px + env(safe-area-inset-bottom, 0px)); padding: 30px 22px 24px; border-radius: 34px;
  background: var(--glass);
  box-shadow: 0 24px 60px -16px rgba(20, 8, 40, 0.55), 0 2px 8px rgba(20, 8, 40, 0.12); }
.lg-sheet::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, var(--edge-1), var(--edge-2) 45%, var(--edge-2) 80%, var(--edge-1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.lg-sheet > * { min-width: 0; margin: 0; }
/* «Вход» — как большой заголовок iOS (34 pt, жирный) */
.lg-sheet h1 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Geist", "Segoe UI", system-ui, sans-serif; font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
.lg-lead { font-size: 17px; line-height: 1.45; color: var(--muted); text-wrap: balance; }
.lg-lead b { font-weight: 600; color: var(--ink); }
.lg-err { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--bad-soft); color: var(--bad); font-size: 15px; line-height: 1.45; text-align: left; }
.lg-err::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; background: currentColor; -webkit-mask: var(--lg-alert) center / contain no-repeat; mask: var(--lg-alert) center / contain no-repeat; }
.lg { --lg-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E"); }
.lg-form { display: grid; gap: 12px; margin-top: 6px !important; }
/* капча: на сервере — виджет Cloudflare Turnstile, в демо — имитация; ячейка — как строка в настройках iOS */
.lg-captcha { min-height: 65px; }
.lg-cap { display: flex; align-items: center; gap: 12px; width: 100%; height: 58px; padding: 0 16px; border-radius: 16px; background: var(--cell); font-size: 17px; color: var(--ink); text-align: left; }
.lg-cap small { margin-left: auto; font-size: 13px; color: var(--muted); }
.lg-cap-ic { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--teal); }
@media (prefers-reduced-motion: no-preference) { .lg-cap-ic { animation: lg-spin 0.8s linear infinite; } }
@keyframes lg-spin { to { transform: rotate(360deg); } }
.lg-cap.ok .lg-cap-ic { animation: none; border-color: var(--good); background: var(--good); }
.lg-cap.ok .lg-cap-ic::after { content: ""; position: absolute; left: 6.5px; top: 2.5px; width: 5px; height: 10px; border: solid #ffffff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
/* кнопка Google — капсула; по правилам Google тёмная на светлом и светлая в тёмной теме, с цветным логотипом */
.lg-g { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 54px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--g-bg); color: var(--g-fg); font: inherit; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(9, 30, 31, 0.45);
  transition: background-color 160ms ease-out, transform 360ms var(--spring), opacity 200ms ease-out; -webkit-tap-highlight-color: transparent; }
.lg-g:hover:not(:disabled) { background: var(--g-hover); }
.lg-g:active:not(:disabled) { transform: scale(0.96); transition-duration: 120ms; }
.lg-g:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
.lg-g-ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #ffffff; }
.lg-g-ic svg { width: 17px; height: 17px; }
.lg-hint { font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: balance; }
.lg-foot { margin-top: 4px !important; font-size: 14px; line-height: 1.5; color: var(--muted); }
/* тестовый вход — только при DEV_LOGIN на сервере разработки */
.lg-dev { display: grid; gap: 10px; padding: 14px; border: 1px dashed var(--line); border-radius: 18px; text-align: left; }
.lg-dev label { font-size: 13px; color: var(--muted); }
.lg-dev input, .lg-dev button { width: 100%; min-width: 0; font: inherit; font-size: 16px; padding: 12px 16px; border: 0; border-radius: 999px; background: var(--cell); color: var(--ink); }
.lg-dev button { cursor: pointer; font-weight: 600; }

/* ---------- при открытии карточка поднимается по пружинной кривой iOS; ткань колышется сама (login-silk.js) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .lg-sheet { animation: lg-rise 0.75s var(--spring) both; }
}
@keyframes lg-rise { from { transform: translateY(60px) scale(0.97); opacity: 0; } }

/* ---------- узкий телефон (уже 348 px): капча Cloudflare шириной 300 px должна поместиться ---------- */
@media (max-width: 347px) {
  .lg-hero { padding-left: 18px; padding-right: 18px; }
  .lg-sheet { margin-left: 6px; margin-right: 6px; padding-left: 12px; padding-right: 12px; }
}

/* ---------- от 600 px: сцена на весь экран, карточка входа — по центру, над ней заголовок; логотип — в левом верхнем углу ---------- */
@media (min-width: 600px) {
  .lg { --sc: url("/login-silk-land.webp"); align-items: center; justify-content: center; padding: 96px 24px 48px; }
  .lg-hero { position: static; height: auto; padding: 0; text-align: center; }
  .lg-brand { position: absolute; top: 28px; left: 32px; }
  .lg-hero-t { margin: 0; }
  .lg-claim { max-width: none; font-size: clamp(40px, 4.4vw, 60px); }
  .lg-sub { margin: 12px auto 0; max-width: 44ch; font-size: 18px; }
  .lg-sheet { width: 100%; max-width: 440px; margin: 32px 0 0; padding: 40px 40px 34px; border-radius: 36px;
    box-shadow: 0 40px 80px -24px rgba(20, 8, 40, 0.6), 0 2px 8px rgba(20, 8, 40, 0.14); }
}