/* Přihlašovací obrazovka hubu — koncept „Zamčená plocha“ (4. 10. 2026, návrh docs/navrhy/LOGIN_REDESIGN.md): formulář bez karty na atmosféře plochy, nahoře hodiny.
   Motivy dark (výchozí) / dim / light / sepia. Žádný backdrop-filter, žádné fonty, žádný inline kód. */
:root {
  color-scheme: dark;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-std: cubic-bezier(.2, .8, .2, 1); --ease-io: cubic-bezier(.65, 0, .35, 1);
  --bg: #070b14; --bg-img: url(/assets/login-bg-dark.webp);
  --mesh-1: rgba(20, 184, 166, .40); --mesh-2: rgba(56, 130, 246, .34); --mesh-3: rgba(76, 29, 149, .30);
  --scrim: linear-gradient(180deg, rgba(5, 8, 15, .20) 0%, rgba(5, 8, 15, .50) 55%, rgba(5, 8, 15, .78) 100%);
  --text: #f5f7fb; --muted: rgba(232, 238, 247, .74);
  --field: rgba(255, 255, 255, .08); --field-hover: rgba(255, 255, 255, .11); --field-border: rgba(255, 255, 255, .18); --field-border-hover: rgba(255, 255, 255, .30);
  --accent: #38bdf8; --ring: rgba(56, 189, 248, .30); --btn: #f1f5f9; --btn-hover: #ffffff; --btn-text: #0b1220;
  --err-bg: rgba(239, 68, 68, .16); --err-border: rgba(248, 113, 113, .40); --err: #fecaca;
  --lock-bg: rgba(245, 158, 11, .14); --lock-border: rgba(251, 191, 36, .40); --lock: #fde68a; --caps: #fbbf24;
}
:root[data-theme="dim"] { --bg: #1b2536; --scrim: linear-gradient(180deg, rgba(27, 37, 54, .25), rgba(27, 37, 54, .72)); }
:root[data-theme="light"] {
  color-scheme: light; --bg: #dcebf2; --bg-img: url(/assets/login-bg-light.webp);
  --mesh-1: rgba(45, 212, 191, .30); --mesh-2: rgba(56, 189, 248, .30); --mesh-3: rgba(165, 180, 252, .28);
  --scrim: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .45));
  --text: #0b1220; --muted: #475569; --field: rgba(255, 255, 255, .72); --field-hover: rgba(255, 255, 255, .86); --field-border: rgba(15, 23, 42, .14); --field-border-hover: rgba(15, 23, 42, .26);
  --accent: #0284c7; --ring: rgba(2, 132, 199, .24); --btn: #0369a1; --btn-hover: #075985; --btn-text: #ffffff;
  --err-bg: #fef2f2; --err-border: #fecaca; --err: #b91c1c; --lock-bg: #fffbeb; --lock-border: #fde68a; --lock: #92400e; --caps: #b45309;
}
:root[data-theme="sepia"] {
  color-scheme: light; --bg: #efdfc9; --bg-img: url(/assets/login-bg-sepia.webp);
  --mesh-1: rgba(234, 160, 120, .34); --mesh-2: rgba(214, 170, 110, .30); --mesh-3: rgba(170, 180, 210, .26);
  --scrim: linear-gradient(180deg, rgba(250, 244, 231, .10), rgba(250, 244, 231, .55));
  --text: #2d261e; --muted: #6a5c4c; --field: rgba(255, 250, 240, .70); --field-hover: rgba(255, 250, 240, .86); --field-border: rgba(120, 90, 50, .22); --field-border-hover: rgba(120, 90, 50, .36);
  --accent: #c25e1a; --ring: rgba(194, 94, 26, .24); --btn: #a34c10; --btn-hover: #8a3f0c; --btn-text: #fff8ef;
  --err-bg: #f8e5dc; --err-border: #e8b9a5; --err: #9f1d1d; --lock-bg: #f6e7c8; --lock-border: #e2c48a; --lock: #7a4206; --caps: #8a4b08;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body.login-page {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; position: relative; overflow-x: hidden; color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg) var(--bg-img) 50% 40% / cover no-repeat fixed;
}
/* pohyblá „mesh“ vrstva (jen transform, levné i na iPhonu) a clona pro čitelnost */
body.login-page::before {
  content: ""; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background: radial-gradient(40% 40% at 20% 25%, var(--mesh-1), transparent 70%), radial-gradient(38% 42% at 80% 20%, var(--mesh-2), transparent 70%), radial-gradient(45% 45% at 55% 95%, var(--mesh-3), transparent 70%);
  animation: login-drift 28s var(--ease-io) infinite alternate; will-change: transform;
}
body.login-page::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--scrim); }
@keyframes login-drift { from { transform: translate3d(-3%, -2%, 0) rotate(0); } to { transform: translate3d(3%, 2%, 0) rotate(6deg); } }
.login-brand, .login-stage, .login-foot { position: relative; z-index: 1; }
.login-brand { padding: max(20px, env(safe-area-inset-top)) 24px 0; font-size: 14px; font-weight: 650; letter-spacing: -.005em; }
.login-brand span { color: var(--muted); font-weight: 500; }
.login-stage { width: 100%; max-width: 408px; margin: 0 auto; padding: clamp(20px, 8vh, 88px) 24px 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* hodiny (z času zařízení; rezervovaná výška, aby nic neposkočilo) */
.login-clock { text-align: center; margin-bottom: 40px; min-height: 130px; animation: login-in .52s var(--ease-out) both; }
.login-time { display: block; font-size: 96px; font-weight: 200; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.login-date { margin-top: 8px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--muted); }
.login-date::first-letter { text-transform: uppercase; }
.login-mfa-head { text-align: center; margin-bottom: 28px; animation: login-in .52s var(--ease-out) both; }
.login-shield { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.login-shield svg { width: 28px; height: 28px; }
.login-mfa-head h1 { margin: 0; font-size: 30px; font-weight: 650; letter-spacing: -.02em; }
.login-mfa-head p { margin: 8px auto 0; max-width: 34ch; font-size: 15px; line-height: 1.45; color: var(--muted); }
.login-card { animation: login-in .52s var(--ease-out) .06s both; }
@keyframes login-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.login-card.is-chyba { animation: login-in .52s var(--ease-out) .06s both, login-shake .32s var(--ease-std) .1s; }
@keyframes login-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.login-msg { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; padding: 10px 12px; border-radius: 12px; font-size: 14px; font-weight: 500; line-height: 1.4; background: var(--err-bg); border: 1px solid var(--err-border); color: var(--err); animation: login-in .22s var(--ease-out) both; }
.login-msg svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }
.login-msg--lock { background: var(--lock-bg); border-color: var(--lock-border); color: var(--lock); }
.login-field { display: block; margin: 0 0 16px; }
.login-label { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--muted); transition: color .16s var(--ease-std); }
.login-field:focus-within .login-label { color: var(--accent); }
.login-input { position: relative; display: flex; align-items: center; }
.login-input input {
  width: 100%; height: 52px; padding: 0 16px; font: inherit; font-size: 17px; color: var(--text); background: var(--field); border: 1px solid var(--field-border); border-radius: 14px; outline: none;
  transition: background .16s var(--ease-std), border-color .16s var(--ease-std), box-shadow .16s var(--ease-std);
}
.login-input input[type="password"], .login-input input[name="password"] { padding-right: 96px; }
.login-input input:hover { background: var(--field-hover); border-color: var(--field-border-hover); }
.login-input input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.login-input input::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.login-input input[aria-invalid="true"] { border-color: var(--err-border); }
.login-eye { position: absolute; right: 4px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 11px; background: none; color: var(--muted); cursor: pointer; }
.login-eye:hover { color: var(--text); background: var(--field); }
.login-eye svg { width: 20px; height: 20px; }
.login-caps { position: absolute; right: 52px; display: none; font-size: 12px; font-weight: 650; color: var(--caps); pointer-events: none; }
.login-caps.on { display: block; }
.login-btn {
  width: 100%; height: 52px; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 14px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  color: var(--btn-text); background: var(--btn); transition: background .16s var(--ease-std), transform .09s var(--ease-std);
}
.login-btn svg { width: 18px; height: 18px; transition: transform .18s var(--ease-std); }
.login-btn:hover { background: var(--btn-hover); }
.login-btn:hover svg { transform: translateX(3px); }
.login-btn:active { transform: scale(.985); }
.login-btn[aria-busy="true"] { cursor: progress; }
.login-btn[aria-busy="true"] svg { display: none; }
.login-btn[aria-busy="true"]::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: login-spin .7s linear infinite; }
@keyframes login-spin { to { transform: rotate(360deg); } }
.login-btn:focus-visible, .login-eye:focus-visible, .login-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.login-code { text-align: center; font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono", Consolas, "Liberation Mono", monospace; height: 64px !important; font-size: 30px !important; font-weight: 600; letter-spacing: .32em; padding: 0 16px 0 calc(16px + .32em) !important; }
.login-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; }
.login-link:hover { color: var(--text); text-decoration: underline; }
.login-center { text-align: center; }
.login-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 24px max(20px, env(safe-area-inset-bottom)); font-size: 12px; font-weight: 500; color: var(--muted); }
.login-foot > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.login-foot svg { width: 14px; height: 14px; }
@media (max-width: 480px) { .login-time { font-size: 68px; } .login-clock { min-height: 100px; margin-bottom: 32px; } .login-date { font-size: 16px; } .login-stage { padding-left: 20px; padding-right: 20px; } .login-foot span:last-child { display: none; } }
@media (max-height: 600px) { .login-clock { display: none; } .login-stage { padding-top: 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (prefers-reduced-transparency: reduce) { .login-input input { background: var(--bg); } }
@media (forced-colors: active) { .login-input input, .login-btn { border: 1px solid CanvasText; } }
@view-transition { navigation: auto; }