/* ============================================================
   MXControl - login екран v2 ("първото, което вижда човек")
   Тъмна сцена + жив еквалайзер + glass карта със светещ кант.
   Само transform/opacity анимации; reduced-motion = статично.
   ============================================================ */
body.login-page {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--slate-950); position: relative; overflow: hidden;
  padding: 24px;
}

/* ---- сцена: фина мрежа (aura блобовете махнати - тежки за GPU) ---- */
.bg-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(148,163,184,.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(148,163,184,.06) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, #000, transparent 78%);
}

/* ---- живият еквалайзер (звукът на фирмата) ---- */
.eq {
  position: absolute; left: 0; right: 0; bottom: 0; height: 180px;
  display: flex; align-items: flex-end; justify-content: center; gap: 5px;
  padding: 0 4vw; pointer-events: none; opacity: .5;
  mask-image: linear-gradient(to top, #000 30%, transparent 100%);
}
.eq span {
  flex: 1; max-width: 14px; border-radius: 4px 4px 0 0;
  background: linear-gradient(to top, rgba(30,64,175,.55), rgba(59,130,246,.85));
  height: 12%;
  animation: eq-bounce 1.6s ease-in-out infinite alternate;
  transform-origin: bottom;
}
/* псевдослучайни височини/закъснения - 24 бара */
.eq span:nth-child(8n+1) { animation-duration: 1.15s; height: 18%; }
.eq span:nth-child(8n+2) { animation-duration: 1.7s;  height: 42%; animation-delay: .12s; }
.eq span:nth-child(8n+3) { animation-duration: 1.3s;  height: 27%; animation-delay: .31s; }
.eq span:nth-child(8n+4) { animation-duration: 1.9s;  height: 56%; animation-delay: .07s; }
.eq span:nth-child(8n+5) { animation-duration: 1.45s; height: 33%; animation-delay: .44s; }
.eq span:nth-child(8n+6) { animation-duration: 1.05s; height: 22%; animation-delay: .21s; }
.eq span:nth-child(8n+7) { animation-duration: 1.75s; height: 48%; animation-delay: .36s; }
.eq span:nth-child(8n+8) { animation-duration: 1.25s; height: 15%; animation-delay: .18s; }
@keyframes eq-bounce { from { transform: scaleY(.45); } to { transform: scaleY(1.65); } }

/* ---- waveform линия зад картата ---- */
.waveform {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  width: 100%; height: 260px; pointer-events: none; opacity: .5;
}
.waveform svg { width: 100%; height: 100%; }
.waveform .wave-1 { animation: wf-drift 14s linear infinite; }
.waveform .wave-2 { animation: wf-drift 22s linear infinite reverse; opacity: .5; }
@keyframes wf-drift { from { transform: translateX(0); } to { transform: translateX(-160px); } }

/* ---- картата: glass + светещ градиентен кант ---- */
.login-wrap { position: relative; z-index: 2; width: 100%; max-width: 412px; }
.login-card {
  position: relative;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  border-radius: 20px;
  box-shadow: var(--shadow-xl), 0 0 80px rgba(37,99,235,.16);
  padding: 40px 38px 30px;
  animation: rise .5s var(--ease) both;
}
/* светещ кант: градиентна рамка през mask */
.login-card::before {
  content: ""; position: absolute; inset: 0; border-radius: 20px; padding: 1px;
  background: linear-gradient(160deg, rgba(96,165,250,.85), rgba(255,255,255,.18) 30%, rgba(255,255,255,.12) 65%, rgba(30,64,175,.6));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
@keyframes rise { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---- бранд: лого с пулсиращ ореол ---- */
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 24px; }
.login-brand .logo {
  width: 60px; height: 60px; border-radius: 18px; background: var(--brand-grad);
  display: grid; place-items: center; position: relative;
}
.login-brand .logo svg { width: 32px; height: 32px; color: #fff; }
.login-brand .logo::after {
  content: ""; position: absolute; inset: 0; border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.login-brand .halo {
  position: absolute; inset: -7px; border-radius: 24px; pointer-events: none;
  border: 2px solid rgba(59,130,246,.35);
  animation: halo 2.6s var(--ease) infinite;
}
@keyframes halo {
  0%   { transform: scale(.92); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: scale(1.22); opacity: 0; }
}
.login-brand .eyebrow-brand {
  font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cobalt-600); margin-top: 2px;
}
.login-brand h1 { font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: var(--slate-900); line-height: 1.05; }
.login-brand p { font-size: 13px; color: var(--ink-mute); }

/* ---- полета ---- */
.field-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field-group label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.input-wrap { position: relative; }
.input-wrap > .field-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--slate-400); display: block; pointer-events: none; transition: color .15s var(--ease); }
.input-wrap > .field-ico svg { display: block; }
.input-wrap:focus-within > .field-ico { color: var(--cobalt-600); }
.login-input {
  width: 100%; height: 47px; padding: 0 14px 0 42px; border-radius: 12px;
  border: 1px solid var(--border-2); background: var(--surface-2); font-size: 14px;
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease), background .14s var(--ease);
}
.login-input:focus { outline: none; border-color: var(--cobalt-500); background: #fff; box-shadow: 0 0 0 4px rgba(59,130,246,.14); }
.toggle-pw { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; }
.toggle-pw svg { width: 18px; height: 18px; color: var(--slate-400); }
.toggle-pw:hover svg { color: var(--ink-soft); }

.login-error {
  display: none; align-items: center; gap: 9px; padding: 11px 14px; margin-bottom: 16px;
  background: var(--red-bg); border: 1px solid var(--red-bd); border-radius: 12px;
  color: var(--red); font-size: 13px; font-weight: 500;
}
.login-error.show { display: flex; }
.login-error svg { width: 17px; height: 17px; flex: none; }

/* ---- бутонът: жива градиентна лента ---- */
.login-card .btn-lg {
  width: 100%; margin-top: 6px; height: 48px; border-radius: 12px;
  background: linear-gradient(120deg, #3b82f6, #1e40af, #2563eb, #3b82f6);
  background-size: 260% 100%;
  animation: btn-sheen 7s linear infinite;
  box-shadow: 0 6px 18px rgba(29,78,216,.38);
}
.login-card .btn-lg:hover { filter: brightness(1.07); box-shadow: 0 8px 24px rgba(29,78,216,.5); }
@keyframes btn-sheen { from { background-position: 0% 0; } to { background-position: 260% 0; } }

.helper { text-align: center; font-size: 12.5px; color: var(--ink-mute); margin-top: 18px; }
.login-foot {
  position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; z-index: 2;
  font-size: 11px; color: var(--slate-500);
}
.login-foot .mono { color: var(--slate-400); }

@media (prefers-reduced-motion: reduce) {
  .waveform .wave-1, .waveform .wave-2, .eq span,
  .login-brand .halo, .login-card .btn-lg { animation: none; }
  .login-card { animation: none; }
}
@media (max-width: 480px) {
  .login-card { padding: 30px 22px 24px; }
  .eq { gap: 3px; }
}