/* Вход в «Пульс» — как экран входа macOS: во весь экран живые размытые
   обои, сверху крупные часы, по центру стеклянная карточка с формой.
   Решение владельца 2026-10-11 (первый вариант — серый фон — «ужасный»). */

@font-face { font-family: "Inter"; src: url("fonts/inter-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --glass: rgb(255 255 255 / 0.16);
  --glass-edge: rgb(255 255 255 / 0.32);
  --field: rgb(255 255 255 / 0.18);
  --field-line: rgb(255 255 255 / 0.22);
  --ink: #FFFFFF;
  --ink-2: rgb(255 255 255 / 0.78);
  --ink-3: rgb(255 255 255 / 0.62);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 400 16px/1.4 var(--font); letter-spacing: -0.01em; color: var(--ink); background: #10235E; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid rgb(255 255 255 / 0.9); outline-offset: 2px; }
.i { flex: none; display: block; }

/* ───────── обои: цветные пятна под сильным размытием ───────── */
.wall { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(160deg, #0B1B4D 0%, #1B3A8C 45%, #3B2A8F 100%); }
.wall i { position: absolute; display: block; border-radius: 50%; filter: blur(70px); opacity: 0.9; animation: drift 26s ease-in-out infinite alternate; }
.wall i:nth-child(1) { width: 62vmax; height: 62vmax; left: -18vmax; top: -22vmax; background: #1E7BFF; }
.wall i:nth-child(2) { width: 52vmax; height: 52vmax; right: -16vmax; top: -10vmax; background: #8A4DFF; animation-duration: 32s; animation-delay: -8s; }
.wall i:nth-child(3) { width: 48vmax; height: 48vmax; left: 18vmax; bottom: -26vmax; background: #14C8E8; opacity: 0.7; animation-duration: 29s; animation-delay: -14s; }
.wall i:nth-child(4) { width: 34vmax; height: 34vmax; right: 6vmax; bottom: -8vmax; background: #FF5FA2; opacity: 0.55; animation-duration: 35s; animation-delay: -4s; }
.wall i:nth-child(5) { width: 30vmax; height: 30vmax; left: 36vmax; top: 18vmax; background: #3D5BFF; opacity: 0.6; animation-duration: 24s; animation-delay: -18s; }
.wall::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, transparent 40%, rgb(4 10 40 / 0.45) 100%); }
@keyframes drift { to { translate: 6vmax 4vmax; scale: 1.12; } }

/* ───────── компоновка ───────── */
.login { min-height: 100%; display: grid; grid-template-rows: auto 1fr; justify-items: center; padding: max(6vh, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom)); }
.clock { text-align: center; text-shadow: 0 2px 20px rgb(0 0 20 / 0.25); animation: fade 900ms var(--ease) both; }
.clock p { margin: 0; font: 600 20px/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink-2); }
.clock time { display: block; font: 600 clamp(72px, 13vw, 112px)/1 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: rgb(255 255 255 / 0.92); }
@keyframes fade { from { opacity: 0; } }

.form {
  align-self: center; width: 100%; max-width: 380px; margin-top: 28px;
  display: grid; justify-items: center; text-align: center;
  padding: 30px 26px 24px; border-radius: 28px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(40px) saturate(170%); backdrop-filter: blur(40px) saturate(170%);
  box-shadow: inset 0 0 0 0.5px var(--glass-edge), inset 0 1px 0 rgb(255 255 255 / 0.25), 0 30px 80px -20px rgb(0 0 30 / 0.55);
  animation: rise 700ms 120ms var(--ease) both;
}
@keyframes rise { from { opacity: 0; translate: 0 16px; scale: 0.98; } }

.app-icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 14px; border-radius: 17px; background: linear-gradient(180deg, #3D97FF, #0062D6); color: #fff; box-shadow: 0 10px 28px -8px rgb(0 40 140 / 0.7), inset 0 0.5px 0 rgb(255 255 255 / 0.45); }
h1 { margin: 0; font: 600 24px/1.15 var(--display); letter-spacing: -0.02em; }
.sub { margin: 4px 0 22px; font-size: 15px; color: var(--ink-2); }

.group { width: 100%; border-radius: 14px; background: var(--field); overflow: hidden; text-align: left; box-shadow: inset 0 0 0 0.5px var(--field-line); transition: box-shadow 200ms ease; }
.row { position: relative; display: flex; align-items: center; min-height: 50px; padding: 0 6px 0 16px; }
.row + .row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 0.5px; background: var(--field-line); }
.row input { flex: 1; min-width: 0; height: 50px; border: 0; outline: 0; background: none; font-size: 17px; color: var(--ink); caret-color: #fff; }
.row input::placeholder { color: var(--ink-3); }
.row input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 9999s; }
.row:focus-within { background: rgb(255 255 255 / 0.08); }
.form.has-error .group { box-shadow: inset 0 0 0 1.5px #FF8A80; }
.pw-toggle { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--ink-3); }
.pw-toggle:hover { color: #fff; }

.caps { margin: 10px 0 0; font-size: 13px; color: #FFD27A; }
.err { display: flex; align-items: flex-start; gap: 8px; width: 100%; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: rgb(255 69 58 / 0.28); color: #fff; font-size: 14px; text-align: left; }
.err .i { margin-top: 1px; }
.err.shake { animation: shake 360ms ease; }
@keyframes shake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }

.submit { position: relative; width: 100%; height: 50px; margin-top: 16px; border: 0; border-radius: 14px; background: #fff; color: #0B1B4D; font-size: 17px; font-weight: 600; box-shadow: 0 8px 24px -10px rgb(0 0 30 / 0.5); transition: transform 100ms ease, background 120ms ease; }
.submit:hover { background: rgb(255 255 255 / 0.9); }
.submit:active { transform: scale(0.98); }
.submit.is-busy span { opacity: 0; }
.submit.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border: 2.5px solid rgb(11 27 77 / 0.2); border-top-color: #0B1B4D; border-radius: 50%; animation: spin 700ms linear infinite; }
@keyframes spin { to { rotate: 360deg; } }

.passkey-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; margin-top: 10px; border: 0; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 0.5px var(--field-line); color: #fff; font-size: 17px; font-weight: 500; }
.passkey-btn:hover { background: rgb(255 255 255 / 0.24); }
.passkey-btn:active { transform: scale(0.98); }

.note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 18px 0 0; font-size: 13px; color: var(--ink-3); }

@media (max-width: 480px) {
  .login { padding-top: max(28px, env(safe-area-inset-top)); }
  .clock time { font-size: 76px; }
  .clock p { font-size: 17px; }
  .form { padding: 26px 20px 20px; margin-top: 24px; }
}
@media (max-height: 720px) and (min-width: 481px) { .clock time { font-size: 72px; } .form { margin-top: 16px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .form { background: rgb(20 36 96 / 0.92); -webkit-backdrop-filter: none; backdrop-filter: none; }
}