/* Страница входа в веб-клиент — по первому экрану кадра К26 «Вход на компьютере»
   и канону макетов .mini (кадр К90). Цвета только токенами (tokens.css); страница
   тёмная в обеих темах, как сам экран К26 — приложение подхватывает её без разрыва. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg-page); color: var(--fg);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#ekran { position: relative; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; overflow: hidden; }

/* небо К26: редкие точки, из цвета текста с малой прозрачностью */
.nebo {
  position: absolute; inset: 0; pointer-events: none; color: var(--fg);
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, currentColor 0, transparent 100%),
    radial-gradient(1px 1px at 72% 16%, currentColor 0, transparent 100%),
    radial-gradient(2px 2px at 34% 72%, currentColor 0, transparent 100%),
    radial-gradient(1px 1px at 86% 64%, currentColor 0, transparent 100%),
    radial-gradient(1px 1px at 24% 42%, currentColor 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 88%, currentColor 0, transparent 100%);
  opacity: .35;
}

.scena { position: relative; width: min(100%, 360px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.logo { display: flex; align-items: baseline; gap: 5px; font-size: 38px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 10px; }
.logo .tochka { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-dot); align-self: center; }
.shutka { margin: 0 0 30px; font-size: 14px; color: var(--fg-3); }
.zag { margin: 0 0 18px; font-size: 16px; font-weight: 600; }
.btn { font: inherit; font-size: 15px; font-weight: 600; width: 100%; padding: 13px 18px; border-radius: 10px; border: 0; cursor: pointer; }
.btn.prim { background: var(--accent); color: var(--fg-on-accent); }
.btn.prim:hover { filter: brightness(1.06); }
.btn[disabled] { opacity: .55; cursor: default; }
.melko { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--fg-4); }
.melko.tiho { margin-top: 8px; color: var(--fg-5); }
.melko.verh { margin: 0 0 18px; }
#skolko:not(:empty)::before { content: " · "; }

/* поле кода — как строка ввода канона (Э2), слева подпись */
.pole { width: 100%; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--fg-3); text-align: left; margin-bottom: 14px; }
.pole input {
  font: inherit; font-size: 15px; color: var(--fg); background: var(--bg-field);
  border: 1px solid var(--line-card); border-radius: 10px; padding: 11px 14px; outline: none; width: 100%;
}
.pole input:focus { border-color: var(--accent); }
.pole input::placeholder { color: var(--fg-hint); }
.oshibka { margin: 12px 0 0; min-height: 1.4em; font-size: 13px; color: var(--crit-text); }

/* полоса хода: тонкая, цвет акцента, без процентов крупным — цифры рядом */
.polosa { width: 100%; height: 4px; border-radius: 2px; background: var(--bg-holder); overflow: hidden; }
#hod { height: 100%; width: 0; border-radius: 2px; background: var(--accent); transition: width .12s linear; }
#hod.tayet { animation: tayet 1.2s ease-in-out infinite; }
@keyframes tayet { 50% { opacity: .5; } }

@media (prefers-reduced-motion: reduce) { #hod { transition: none; } #hod.tayet { animation: none; } }