/* ═══════════════════════════════════════════════════════════════════════
   LOGIN — Animated landing
   Mesh gradient · Particles · Floating shapes · Smooth interactions
   ═══════════════════════════════════════════════════════════════════════ */

.login {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  background: var(--bg);
}

/* ─── Animated background ──────────────────────────────────────────── */
.login__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  /* Flex centering — aby pattern (child) bol vycentrovaný rovnako ako card v .login */
  display: flex;
  justify-content: center;
  align-items: stretch;
}

/* Mesh orbs */
.login__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .4;
  animation: orb-drift 18s ease-in-out infinite;
  will-change: transform;
}
.login__orb--1 {
  width: 480px; height: 480px;
  background: #4a764a;
  top: -140px; left: -120px;
  animation-delay: 0s;
}
.login__orb--2 {
  width: 420px; height: 420px;
  background: #4a764a;
  bottom: -140px; right: -100px;
  animation-delay: -6s;
  opacity: .25;
}
.login__orb--3 {
  width: 300px; height: 300px;
  background: #FF6B6B;
  top: 40%; left: 60%;
  transform: translate(-50%, -50%);
  animation-delay: -12s;
  opacity: .14;
}
@keyframes orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(60px, -40px) scale(1.05); }
  66%      { transform: translate(-40px, 50px) scale(.95); }
}

/* Grid pattern overlay */
.login__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 75%);
  opacity: .8;
}

/* Floating geometric shapes */
.login__shape {
  position: absolute;
  border: 1.5px solid rgba(74,118,74,.18);
  border-radius: 8px;
  animation: shape-float 14s ease-in-out infinite;
  will-change: transform;
}
.login__shape--1 { width: 60px; height: 60px; top: 18%; right: 18%; animation-delay: 0s; transform: rotate(15deg); }
.login__shape--2 { width: 40px; height: 40px; bottom: 22%; left: 14%; animation-delay: -4s; transform: rotate(-20deg); border-color: rgba(74,118,74,.2); }
.login__shape--3 { width: 80px; height: 80px; top: 60%; right: 8%; animation-delay: -8s; transform: rotate(45deg); border-radius: 50%; border-color: rgba(74,118,74,.18); }
.login__shape--4 { width: 24px; height: 24px; top: 12%; left: 22%; animation-delay: -2s; background: rgba(74,118,74,.08); border: 0; transform: rotate(30deg); }
@keyframes shape-float {
  0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
  50%      { transform: translate(20px, -30px) rotate(calc(var(--rot, 0deg) + 30deg)); }
}

/* Noise texture */
.login__noise {
  position: absolute;
  inset: 0;
  opacity: .03;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/></svg>");
}

/* ─── Card ─────────────────────────────────────────────────────────── */
.login__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: rgba(20,23,31,.65);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  padding: 36px 32px;
  box-shadow:
    0 32px 64px rgba(0,0,0,.5),
    0 0 80px rgba(74,118,74,.06),
    inset 0 1px 0 rgba(255,255,255,.06);
  animation: card-in .7s var(--e-spring);
}
@keyframes card-in {
  0%   { opacity: 0; transform: translateY(20px) scale(.96); filter: blur(12px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.login__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--grad-acc);
  color: #FFFFFF;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 24px;
  margin: 0 auto 22px;
  position: relative;
  box-shadow: 0 8px 24px rgba(74,118,74,.4), inset 0 1px 0 rgba(255,255,255,.4);
  animation: brand-pop .6s var(--e-spring) .15s backwards;
}
.login__brand::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 18px;
  background: var(--grad-acc);
  filter: blur(16px);
  opacity: .4;
  z-index: -1;
  animation: brand-pulse 3s ease-in-out infinite;
}
@keyframes brand-pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes brand-pulse {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .55; transform: scale(1.1); }
}

.login__title {
  text-align: center;
  font-size: 26px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 6px;
  animation: txt-in .5s var(--e-out) .25s backwards;
}
.login__subtitle {
  text-align: center;
  color: var(--fg-3);
  font-size: 13.5px;
  margin-bottom: 28px;
  animation: txt-in .5s var(--e-out) .3s backwards;
}
@keyframes txt-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Floating-label inputs */
.login__field {
  position: relative;
  margin-bottom: 14px;
  animation: txt-in .5s var(--e-out) .35s backwards;
}
.login__field:nth-of-type(2) { animation-delay: .42s; }
.login__field input {
  width: 100%;
  height: 52px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 14px 6px 44px;
  color: var(--fg);
  font-size: 14.5px;
  outline: none;
  transition: all var(--d-2) var(--e-out);
}
.login__field input:focus {
  border-color: rgba(74,118,74,.4);
  background: rgba(74,118,74,.04);
  box-shadow: 0 0 0 4px rgba(74,118,74,.08);
}
.login__field-label {
  position: absolute;
  left: 44px; top: 50%;
  transform: translateY(-50%);
  color: var(--fg-3);
  font-size: 14px;
  pointer-events: none;
  transition: all var(--d-2) var(--e-out);
  background: transparent;
}
.login__field input:focus + .login__field-label,
.login__field input:not(:placeholder-shown) + .login__field-label {
  top: 11px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--acc);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transform: translateY(0);
}
.login__field-ico {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--fg-3);
  font-size: 15px;
  pointer-events: none;
  transition: color var(--d-2);
}
.login__field input:focus ~ .login__field-ico { color: var(--acc); }
.login__field-eye {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: all var(--d-1);
}
.login__field-eye:hover { color: var(--acc); background: rgba(74,118,74,.06); }

.login__remember {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--fg-2);
  margin: 8px 0 22px;
  cursor: pointer;
  user-select: none;
  animation: txt-in .5s var(--e-out) .5s backwards;
}
.login__remember input { display: none; }
.login__remember-box {
  width: 18px; height: 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 5px;
  background: rgba(255,255,255,.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--d-1) var(--e-spring);
}
.login__remember input:checked + .login__remember-box {
  background: var(--grad-acc);
  border-color: var(--acc);
}
.login__remember input:checked + .login__remember-box::after {
  content: '✓';
  color: #FFFFFF;
  font-weight: 700;
  font-size: 12px;
}

.login__err {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(248,113,113,.1);
  border: 1px solid rgba(248,113,113,.3);
  color: var(--err);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  margin-bottom: 14px;
  animation: shake .4s var(--e-out);
}
.login__err.show { display: flex; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Submit button — morphing states */
.login__submit {
  width: 100%;
  height: 52px;
  background: var(--grad-acc);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--r);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all var(--d-2) var(--e-out);
  box-shadow: 0 8px 22px rgba(74,118,74,.32), inset 0 1px 0 rgba(255,255,255,.4);
  animation: txt-in .5s var(--e-out) .55s backwards;
}
.login__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(74,118,74,.45), inset 0 1px 0 rgba(255,255,255,.4);
}
.login__submit:active { transform: translateY(0); }
.login__submit-text { display: inline-flex; align-items: center; gap: 8px; transition: opacity var(--d-2); }
.login__submit.loading .login__submit-text { opacity: 0; }
.login__submit-loader {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}
.login__submit.loading .login__submit-loader { display: flex; }
.login__submit-loader span {
  width: 8px; height: 8px;
  background: #0A0B0F;
  border-radius: 50%;
  margin: 0 3px;
  animation: dot-pulse 1.2s ease-in-out infinite;
}
.login__submit-loader span:nth-child(2) { animation-delay: .15s; }
.login__submit-loader span:nth-child(3) { animation-delay: .3s; }
@keyframes dot-pulse {
  0%, 80%, 100% { transform: scale(0); opacity: .5; }
  40%           { transform: scale(1.2); opacity: 1; }
}
.login__submit.success {
  background: linear-gradient(135deg, #4ADE80, #22C55E);
  pointer-events: none;
}
.login__submit.success .login__submit-text { display: none; }
.login__submit.success .login__submit-loader { display: none; }
.login__submit.success::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #FFFFFF;
  animation: check-pop .4s var(--e-spring);
}
@keyframes check-pop {
  from { opacity: 0; transform: scale(.3); }
  to   { opacity: 1; transform: scale(1); }
}

.login__foot {
  text-align: center;
  font-size: 11px;
  color: var(--fg-4);
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  animation: txt-in .5s var(--e-out) .6s backwards;
}
.login__foot i { font-size: 10px; color: var(--ok); }

/* Mobile login tweaks */
@media (max-width: 520px) {
  .login__card { padding: 28px 24px; max-width: 100%; }
  .login__title { font-size: 22px; }
  .login__brand { width: 48px; height: 48px; font-size: 20px; }
  .login__shape { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT MODE — login card musí byť čitateľný na bielom pozadí
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] .login,
:root:not([data-theme="dark"]) .login {
  background: linear-gradient(135deg, #fafbfc 0%, #f0f4ef 60%, #e8f0e3 100%);
}
:root[data-theme="light"] .login__card,
:root:not([data-theme="dark"]) .login__card {
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(74,118,74,.18);
  box-shadow:
    0 24px 60px rgba(74,118,74,.10),
    0 0 0 1px rgba(0,0,0,.02),
    inset 0 1px 0 rgba(255,255,255,.6);
  color: #1a1f1a;
}
:root[data-theme="light"] .login__title,
:root:not([data-theme="dark"]) .login__title { color: #1a1f1a; }
:root[data-theme="light"] .login__subtitle,
:root:not([data-theme="dark"]) .login__subtitle { color: #5a6358; }
:root[data-theme="light"] .login__field input,
:root:not([data-theme="dark"]) .login__field input {
  background: rgba(0,0,0,.025);
  border: 1.5px solid rgba(74,118,74,.18);
  color: #1a1f1a;
}
:root[data-theme="light"] .login__field input::placeholder,
:root:not([data-theme="dark"]) .login__field input::placeholder { color: #94999094; }
:root[data-theme="light"] .login__field-label,
:root:not([data-theme="dark"]) .login__field-label { color: #5a6358; background: #fff; }
:root[data-theme="light"] .login__field-ico,
:root:not([data-theme="dark"]) .login__field-ico { color: #5a6358; }
:root[data-theme="light"] .login__field input:focus,
:root:not([data-theme="dark"]) .login__field input:focus {
  border-color: #4a764a;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(74,118,74,.10);
}
:root[data-theme="light"] .login__remember,
:root:not([data-theme="dark"]) .login__remember { color: #5a6358; }
:root[data-theme="light"] .login__remember-box,
:root:not([data-theme="dark"]) .login__remember-box {
  background: #fff;
  border: 1.5px solid rgba(74,118,74,.30);
}
:root[data-theme="light"] .login__foot,
:root:not([data-theme="dark"]) .login__foot { color: #7a8077; }
:root[data-theme="light"] .login__orb,
:root:not([data-theme="dark"]) .login__orb { opacity: .25; filter: blur(110px); }
:root[data-theme="light"] .login__grid,
:root:not([data-theme="dark"]) .login__grid {
  background-image:
    linear-gradient(rgba(74,118,74,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,118,74,.05) 1px, transparent 1px);
}
:root[data-theme="light"] .login__noise,
:root:not([data-theme="dark"]) .login__noise { opacity: .015; }

/* ═══════════════════════════════════════════════════════════════════════
   PASSKEY / Touch ID button
   ═══════════════════════════════════════════════════════════════════════ */
.login__passkey {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
  padding: 12px 16px;
  background: transparent;
  border: 1.5px dashed rgba(74,118,74,.45);
  border-radius: 12px;
  font: 600 13.5px Inter, sans-serif;
  color: var(--acc, #4a764a);
  cursor: pointer;
  transition: all var(--d-1, 200ms);
}
.login__passkey:hover {
  background: rgba(74,118,74,.06);
  border-style: solid;
  transform: translateY(-1px);
}
.login__passkey:disabled { opacity: .65; cursor: wait; }
.login__passkey i { font-size: 16px; }
:root[data-theme="light"] .login__passkey,
:root:not([data-theme="dark"]) .login__passkey {
  background: rgba(74,118,74,.04);
  border-color: rgba(74,118,74,.35);
  color: #3a5e3a;
}

/* ═══════════════════════════════════════════════════════════════════════
   AI NEURAL NETWORK background — themed na umelú inteligenciu
   Neuróny pulzujú · Synapse pomalšie ožívajú · "Data pulses" letia
   po synaps-ách · Plávajúce AI správy ("Premýšľam…")
   ═══════════════════════════════════════════════════════════════════════ */

/* Hlavný neural network SVG */
.login__neural {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .55;
  mask-image: radial-gradient(ellipse at center, #000 0%, #000 50%, rgba(0,0,0,.55) 75%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, #000 50%, rgba(0,0,0,.55) 75%, transparent 100%);
}

/* Synapses — line draws itself in & out */
.login__synapse {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: synapse-draw 7s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes synapse-draw {
  0%   { stroke-dashoffset: 300; opacity: 0; }
  20%  { stroke-dashoffset: 0;   opacity: .8; }
  50%  { stroke-dashoffset: 0;   opacity: .9; }
  80%  { stroke-dashoffset: -300; opacity: .3; }
  100% { stroke-dashoffset: -300; opacity: 0; }
}

/* Neuróny — scale + opacity pulse */
.login__node {
  transform-origin: center;
  transform-box: fill-box;
  animation: node-pulse 3.5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes node-pulse {
  0%, 100% { transform: scale(1);   opacity: .55; }
  50%      { transform: scale(1.6); opacity: 1;   }
}

/* Data pulses — bodky letiace po synaps cestách */
.login__pulse {
  offset-rotate: 0deg;
  animation: pulse-travel 4.5s linear infinite;
  animation-delay: var(--d, 0s);
  opacity: 0;
}
@keyframes pulse-travel {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* AI "rozprávajúce" správy */
.login__ai-msgs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.login__ai-msg {
  position: absolute;
  left: var(--x);
  top:  var(--y);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  background: rgba(74,118,74,.10);
  border: 1px solid rgba(74,118,74,.25);
  border-radius: 99px;
  font: 600 11.5px 'JetBrains Mono', 'Inter', monospace;
  color: #4a764a;
  letter-spacing: 0.02em;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  animation: ai-msg-cycle 24s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.login__ai-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e, 0 0 0 3px rgba(34,197,94,.22);
  animation: ai-dot-blink 1.4s ease-in-out infinite;
}
@keyframes ai-msg-cycle {
  0%, 100%   { opacity: 0; transform: translate(-50%, -45%); }
  6%         { opacity: 1; transform: translate(-50%, -50%); }
  20%        { opacity: 1; transform: translate(-50%, -52%); }
  26%        { opacity: 0; transform: translate(-50%, -55%); }
}
@keyframes ai-dot-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.7); }
}

/* Light mode — znížiť opacity neural elementov */
:root[data-theme="light"] .login__neural,
:root:not([data-theme="dark"]) .login__neural { opacity: .42; }
:root[data-theme="light"] .login__ai-msg,
:root:not([data-theme="dark"]) .login__ai-msg {
  background: rgba(74,118,74,.08);
  color: #3a5e3a;
}

/* Reduce motion — vypneme animácie */
@media (prefers-reduced-motion: reduce) {
  .login__synapse,
  .login__node,
  .login__pulse,
  .login__ai-msg,
  .login__ai-dot { animation: none !important; }
  .login__ai-msg { opacity: .65; transform: translate(-50%, -50%); }
}

/* Mobile — menej správ + menšie texty */
@media (max-width: 600px) {
  .login__ai-msg { font-size: 10.5px; padding: 5px 12px 5px 10px; }
  /* Schovať bočné správy aby sa nepretláčali s kartou */
  .login__ai-msg[style*="--x:74"],
  .login__ai-msg[style*="--x:78"],
  .login__ai-msg[style*="--x:82"] { display: none; }
}

/* Vychytávky pre starý chevron pattern — keep stub aby `.login__pattern` v HTML
   nehádzal styling chyby (ak by zostal v cache HTML). */
.login__pattern { display: none !important; }
.login__shape { display: none !important; }

/* Override starých chevron-related premenných (no-op safety) */
.login__pattern,
.login__pattern::before,
.login__pattern::after {
  display: none !important;
  animation: login-pat-shift 30s linear infinite;
  /* 8 stĺpcov × 2 layery (45° + -45°) = 16 background layerov pre širší pattern */
  background:
    linear-gradient(45deg,  var(--l) 0% 14.286%, transparent 14.286% 28.571%, var(--l) 28.571% 42.857%, transparent 42.857% 57.143%, var(--l) 57.143% 71.429%, transparent 71.429% 85.714%, var(--l) 85.714% 100%),
    linear-gradient(-45deg, var(--l) 0% 14.286%, transparent 14.286% 28.571%, var(--l) 28.571% 42.857%, transparent 42.857% 57.143%, var(--l) 57.143% 71.429%, transparent 71.429% 85.714%, var(--l) 85.714% 100%),
    linear-gradient(45deg,  var(--l) 0% 30.769%, transparent 30.769% 61.538%, var(--l) 61.538% 92.308%, transparent 92.308%),
    linear-gradient(-45deg, var(--l) 0% 30.769%, transparent 30.769% 61.538%, var(--l) 61.538% 92.308%, transparent 92.308%),
    linear-gradient(45deg,  var(--l) 0% 30.769%, transparent 30.769% 61.538%, var(--l) 61.538% 92.308%, transparent 92.308%),
    linear-gradient(-45deg, var(--l) 0% 30.769%, transparent 30.769% 61.538%, var(--l) 61.538% 92.308%, transparent 92.308%),
    linear-gradient(45deg,  var(--l) 0% 30.769%, transparent 30.769% 61.538%, var(--l) 61.538% 92.308%, transparent 92.308%),
    linear-gradient(-45deg, var(--l) 0% 30.769%, transparent 30.769% 61.538%, var(--l) 61.538% 92.308%, transparent 92.308%),
    linear-gradient(45deg,  var(--l) 0% 30.769%, transparent 30.769% 61.538%, var(--l) 61.538% 92.308%, transparent 92.308%),
    linear-gradient(-45deg, var(--l) 0% 30.769%, transparent 30.769% 61.538%, var(--l) 61.538% 92.308%, transparent 92.308%),
    linear-gradient(45deg,  var(--l) 0% 30.769%, transparent 30.769% 61.538%, var(--l) 61.538% 92.308%, transparent 92.308%),
    linear-gradient(-45deg, var(--l) 0% 30.769%, transparent 30.769% 61.538%, var(--l) 61.538% 92.308%, transparent 92.308%),
    linear-gradient(45deg,  var(--l) 0% 30.769%, transparent 30.769% 61.538%, var(--l) 61.538% 92.308%, transparent 92.308%),
    linear-gradient(-45deg, var(--l) 0% 30.769%, transparent 30.769% 61.538%, var(--l) 61.538% 92.308%, transparent 92.308%),
    linear-gradient(45deg,  var(--l) 0% 14.286%, transparent 14.286% 28.571%, var(--l) 28.571% 42.857%, transparent 42.857% 57.143%, var(--l) 57.143% 71.429%, transparent 71.429% 85.714%, var(--l) 85.714% 100%),
    linear-gradient(-45deg, var(--l) 0% 14.286%, transparent 14.286% 28.571%, var(--l) 28.571% 42.857%, transparent 42.857% 57.143%, var(--l) 57.143% 71.429%, transparent 71.429% 85.714%, var(--l) 85.714% 100%);
  background-size:
    50px 20px, 50px 20px,
    50px 80px, 50px 80px,
    50px 80px, 50px 80px,
    50px 80px, 50px 80px,
    50px 80px, 50px 80px,
    50px 80px, 50px 80px,
    50px 80px, 50px 80px,
    50px 20px, 50px 20px;
  background-position-x:
    4px, 54px,
    calc(var(--w) * 1 + 4px), calc(var(--w) * 1 + 54px),
    calc(var(--w) * 2 + 4px), calc(var(--w) * 2 + 54px),
    calc(var(--w) * 3 + 4px), calc(var(--w) * 3 + 54px),
    calc(var(--w) * 4 + 4px), calc(var(--w) * 4 + 54px),
    calc(var(--w) * 5 + 4px), calc(var(--w) * 5 + 54px),
    calc(var(--w) * 6 + 4px), calc(var(--w) * 6 + 54px),
    calc(var(--w) * 7 + 4px), calc(var(--w) * 7 + 54px);
  background-repeat: repeat-y;
  /* Soft horizontal fade — pattern svieti od hora po dole, fade-uje len naľavo a napravo */
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 12%, #000 30%, #000 70%, rgba(0,0,0,.5) 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 12%, #000 30%, #000 70%, rgba(0,0,0,.5) 88%, transparent 100%);
}

/* Animované „kvapky" overlay — biele blikajúce body padajúce nadol */
.login__pattern::before,
.login__pattern::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat-y;
  background-size: 50px 80px, 50px 80px;
  background-position-x:
    calc(var(--w) * 2 + 4px), calc(var(--w) * 2 + 54px);
}
.login__pattern::after {
  animation:
    login-pat-after-opacity 15s linear infinite,
    login-pat-shift 30s linear infinite;
  background-image:
    linear-gradient(45deg,  var(--c) 0% 30.769%, transparent 30.769% 61.538%, var(--c) 61.538% 92.308%, transparent 92.308%),
    linear-gradient(-45deg, var(--c) 0% 30.769%, transparent 30.769% 61.538%, var(--c) 61.538% 92.308%, transparent 92.308%);
}
.login__pattern::before {
  animation:
    login-pat-before-opacity 15s linear infinite,
    login-pat-shift 30s linear infinite;
  background-image:
    linear-gradient(45deg,  var(--c) 0% 14.286%, transparent 14.286% 28.571%, var(--c) 28.571% 42.857%, transparent 42.857% 57.143%, var(--c) 57.143% 71.429%, transparent 71.429% 85.714%, var(--c) 85.714% 100%),
    linear-gradient(-45deg, var(--c) 0% 14.286%, transparent 14.286% 28.571%, var(--c) 28.571% 42.857%, transparent 42.857% 57.143%, var(--c) 57.143% 71.429%, transparent 71.429% 85.714%, var(--c) 85.714% 100%);
}
@keyframes login-pat-shift {
  to { background-position-y: 800px, 800px, 1040px, 1040px, 1360px, 1360px, 1040px, 1040px, 800px, 800px; }
}
@keyframes login-pat-after-opacity {
  5%  { opacity: 1; }
  0%, 4.99%, 20%, 100% { opacity: 0; }
}
@keyframes login-pat-before-opacity {
  0%, 10.4% { opacity: .8; }
  9.9%, 10.3999%, 30%, 100% { opacity: 0; }
}

/* Light mode — znížiť opacity ešte viac (na bielom pozadí by inak svietilo moc) */
:root[data-theme="light"] .login__pattern,
:root:not([data-theme="dark"]) .login__pattern {
  opacity: .12;
  --l: #4a764a;
  --c: #4a764a;       /* na svetlom pozadí olive miesto white */
}

/* Schovať existujúce orbs+shapes na pozadí ak je pattern aktívny — nech to nie je preplnené */
.login__bg .login__pattern ~ .login__orb,
.login__bg .login__pattern ~ .login__shape { opacity: .25; }
.login__bg .login__pattern ~ .login__grid { opacity: .35; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .login__pattern,
  .login__pattern::before,
  .login__pattern::after { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   2FA STEP — druhý faktor po hesle (Touch ID / Face ID / telefón)
   ═══════════════════════════════════════════════════════════════════════ */
.login__twofa { text-align: center; animation: twofaIn .35s ease both; }
@keyframes twofaIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.login__twofa-ico {
  width: 64px; height: 64px; margin: 4px auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(74,118,74,.12);
  border: 1.5px solid rgba(74,118,74,.4);
  color: var(--acc, #4a764a);
  font-size: 26px;
  animation: twofaPulse 2s ease-in-out infinite;
}
@keyframes twofaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,118,74,.25); }
  50%      { box-shadow: 0 0 0 12px rgba(74,118,74,0); }
}
.login__twofa-title { font: 700 17px Inter, sans-serif; margin-bottom: 6px; }
.login__twofa-sub { font: 400 13px/1.55 Inter, sans-serif; color: var(--fg-3, #8a918a); margin-bottom: 16px; }
.login__twofa-back {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px; padding: 8px 14px;
  background: transparent; border: none;
  font: 500 12.5px Inter, sans-serif;
  color: var(--fg-3, #8a918a);
  cursor: pointer; border-radius: 8px;
  transition: color .2s;
}
.login__twofa-back:hover { color: var(--acc, #4a764a); }