/* The login page: soft colour blobs, one button. Nothing on it says what is behind it. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: #0A1019; color: #D3E3F3; font: 14px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
body { overflow: hidden; }
.bg { position: fixed; inset: -20%; filter: blur(90px) saturate(1.15); opacity: 0.85; }
.bg i { position: absolute; border-radius: 50%; animation: drift 38s ease-in-out infinite alternate; will-change: transform; }
.bg i:nth-child(1) { left: 12%; top: 18%; width: 44vmax; height: 44vmax; background: radial-gradient(closest-side, rgba(47, 127, 224, 0.75), transparent); }
.bg i:nth-child(2) { right: 8%; top: 6%; width: 38vmax; height: 38vmax; background: radial-gradient(closest-side, rgba(43, 179, 163, 0.5), transparent); animation-duration: 46s; animation-delay: -12s; }
.bg i:nth-child(3) { left: 38%; bottom: 4%; width: 46vmax; height: 46vmax; background: radial-gradient(closest-side, rgba(107, 91, 214, 0.55), transparent); animation-duration: 52s; animation-delay: -20s; }
.bg i:nth-child(4) { left: 2%; bottom: 10%; width: 30vmax; height: 30vmax; background: radial-gradient(closest-side, rgba(30, 64, 120, 0.8), transparent); animation-duration: 41s; animation-delay: -6s; }
.bg i:nth-child(5) { right: 18%; bottom: 22%; width: 26vmax; height: 26vmax; background: radial-gradient(closest-side, rgba(90, 168, 255, 0.35), transparent); animation-duration: 57s; animation-delay: -30s; }
@keyframes drift { from { transform: translate(-4%, -3%) scale(1); } to { transform: translate(5%, 4%) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .bg i { animation: none; } }

main { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font: inherit; font-size: 14px; color: #E8F2FC; cursor: pointer; white-space: nowrap;
  background: rgba(23, 35, 53, 0.55); border: 1px solid rgba(163, 205, 238, 0.2); border-radius: 10px; padding: 8px 16px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background 120ms, border-color 120ms; }
.btn:hover { background: rgba(30, 44, 66, 0.75); }
.btn:focus-visible, .icon:focus-visible { outline: none; box-shadow: 0 0 0 2px #8FC1FF; }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn.primary { background: #2A74D4; border-color: #2A74D4; color: #fff; font-weight: 600; box-shadow: 0 10px 30px rgba(20, 60, 120, 0.45); }
.btn.primary:hover:not(:disabled) { background: #3381E6; border-color: #3381E6; }
.btn.ghost { background: transparent; border-color: transparent; color: #B7C9DC; backdrop-filter: none; }
.btn.ghost:hover { background: rgba(163, 205, 238, 0.08); color: #F2F8FF; }
.btn.big { height: 48px; padding: 0 26px; font-size: 15px; border-radius: 12px; }
.btn svg { width: 20px; height: 20px; fill: currentColor; }
#deny { display: flex; flex-direction: column; align-items: center; gap: 14px; }
#deny[hidden] { display: none; }
#deny p { margin: 0; color: #D3E3F3; text-align: center; }
#deny b { color: #F2F8FF; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.icon { display: inline-grid; place-items: center; width: 26px; height: 26px; vertical-align: middle; border: 0; border-radius: 7px; background: none; color: #9FB4CB; cursor: pointer; }
.icon:hover { background: rgba(163, 205, 238, 0.1); color: #F2F8FF; }
.icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#note { margin: 0; min-height: 21px; font-size: 13px; color: #F3C987; text-align: center; max-width: 420px; }
/* the language: RU · EN · KK under the form (as the PIN gate) */
.lang { display: flex; gap: 2px; font-size: 12px; letter-spacing: 0.06em; }
.lang button { font: inherit; color: #7F95AD; background: none; border: 0; border-radius: 6px; padding: 4px 8px; cursor: pointer; }
.lang button:hover { color: #B7C9DC; }
.lang button[aria-checked="true"] { color: #E8F2FC; font-weight: 600; }
.lang button:focus-visible { outline: none; box-shadow: 0 0 0 2px #8FC1FF; }