/* ===== Base & Theme ===== */
:root {
  --bg:#f6f8fc;
  --card:#ffffff;
  --net-node:#7aa2ff;
  --net-link:rgba(122,162,255,.35);
  --net-glow:rgba(122,162,255,.08);
  --text:#0f172a;
  --muted:#6b7280;
  --input:#ffffff;
  --border:#d1d5db;
  --error:#e11d48;
  --brand-from:#410093;
  --brand-to:#5399E7;
  --ring: 83,153,231; /* rgb tuple for box-shadows */
}

/* === Cyber Network Canvas === */
#cyber-net{
  position:fixed;
  inset:0;
  z-index: 0;               /* глубже, чем .login-bg (-2), чтобы сетка была под пятнами */
  pointer-events:none;
}

/* Если пользователь просит меньше анимации — просто скрыть */
@media (prefers-reduced-motion: reduce){
  #cyber-net{ display:none; }
}


html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* убираем скролл */
}

html.dark, body.dark-mode {
  --bg:#0b1020;
  --card:#0f1426;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --input:#0b0f1f;
  --net-node:#8db0ff;
  --net-link:rgba(141,176,255,.45);
  --net-glow:rgba(141,176,255,.10);
  --border:#26304a;
  --error:#fb7185;
}

/* ===== Page layout ===== */
body {
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===== Background blobs ===== */
.login-bg {position:fixed;inset:0;overflow:hidden;z-index:-2;}
.blob {position:absolute;filter:blur(40px);opacity:.28;mix-blend:normal;}
.blob.b1 {
  width:540px;height:540px;
  background:radial-gradient(closest-side,#6ba7ff,transparent 70%);
  top:-120px;left:-80px;
  animation:float 11s ease-in-out infinite;
}
.blob.b2 {
  width:540px;height:540px;
  background:radial-gradient(closest-side,#8a5cf6,transparent 70%);
  bottom:-140px;right:-80px;
  animation:float 11s ease-in-out infinite reverse;
}
.grid-noise {
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(99,102,241,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events:none;
  mask-image: radial-gradient(70% 70% at 50% 50%, black, transparent);
}
@keyframes float {0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}

/* ===== Wrapper ===== */
.login-wrap {
  width: 100%;
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 48px);
}

/* ===== Card with animated border ===== */
.login-card {
  position:relative;
  width: min(560px, 92vw);
  padding: 36px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 10px 40px rgba(2,6,23,.08);
  isolation:isolate;
  overflow:hidden;
}
.login-card::before {
  content:"";
  position:absolute;inset:-2px;
  border-radius:20px;
  padding:2px;
  background:linear-gradient(270deg, var(--brand-from), var(--brand-to), var(--brand-from));
  background-size:300% 300%;
  z-index:-1;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:borderFlow 6s linear infinite;
}
@keyframes borderFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.card-glow {
  position:absolute;inset:0;border-radius:18px;pointer-events:none;
  box-shadow: 0 0 0 0 rgba(var(--ring),.0), inset 0 1px 0 rgba(255,255,255,.06);
  transition:box-shadow .25s ease;
}
.login-card:hover .card-glow {
  box-shadow: 0 0 0 6px rgba(var(--ring),.08), inset 0 1px 0 rgba(255,255,255,.08);
}

/* ===== Header ===== */
.login-head {text-align:center;margin: 4px 0 18px;}
.brand-mark {width:48px;height:48px;margin-inline:auto;filter:drop-shadow(0 6px 12px rgba(2,6,23,.12))}
.brand-title {
  margin:10px 0 2px;
  font-size: clamp(22px, 2vw, 28px);
  font-weight:800;
  background-image: linear-gradient(90deg,var(--brand-from),var(--brand-to));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.brand-sub {color:var(--muted);font-size:.9rem}

/* ===== Form ===== */
.login-form {margin-top:14px;display:grid;gap:14px}
.field {position:relative}
.field input {
  width:100%;
  padding: 14px 44px;
  border-radius:12px;
  border:1px solid var(--border);
  background: var(--input);
  color: var(--text);
  transition: border-color .2s, box-shadow .2s, background .2s;
  outline:none;
}
.field input::placeholder {color:transparent}
.field label {
  position:absolute;left:44px;top:50%;
  transform: translateY(-50%);
  color:var(--muted);
  pointer-events:none;
  transition: all .18s ease;
}
.field .icon {
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:#6b8af7;opacity:.95;
}
.field input:focus {
  border-color: transparent;
  background:
    linear-gradient(var(--input), var(--input)) padding-box,
    linear-gradient(90deg,var(--brand-from),var(--brand-to)) border-box;
  box-shadow: 0 0 0 4px rgba(var(--ring), .12);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field input:valid + label {
  top:6px;left:44px;
  transform:none;
  font-size:.72rem;
  color:#6b8af7;
  background: linear-gradient(90deg, var(--brand-from), var(--brand-to));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ===== Submit button ===== */
.brand-btn {
  border:0;border-radius:12px;cursor:pointer;
  background-image: linear-gradient(90deg,var(--brand-from),var(--brand-to));
  color:#fff;font-weight:700;padding:12px 16px;
  transition: transform .06s ease, filter .18s ease, box-shadow .18s ease;
  box-shadow: 0 10px 20px rgba(83,153,231,.22), 0 1px 0 rgba(255,255,255,.06) inset;
}
.brand-btn:hover { filter:brightness(1.05) }
.brand-btn:active { transform: translateY(1px) }
.brand-btn:disabled { opacity:.8; cursor: default }
.brand-btn:disabled::after {
  content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;
  border-radius:50%;border:3px solid rgba(255,255,255,.9);border-top-color:transparent;
  animation:spin .7s linear infinite;
}

/* ===== Footer ===== */
.error-message {margin:14px 0 0;text-align:center;color:var(--error)}
.footer-actions {margin-top:16px;display:flex;justify-content:center}
.ghost-btn {
  background:transparent;border:1px solid var(--border);color:var(--text);
  padding:8px 12px;border-radius:10px;cursor:pointer;transition:background .2s,border-color .2s
}
.ghost-btn:hover {background:rgba(83,153,231,.06);border-color:#9bbcf3}

/* ===== Small screens ===== */
@media (max-width: 420px){
  .login-card{padding:28px 22px 22px}
  .brand-mark{width:42px;height:42px}
}

/* ===== Надпись над формой ===== */
.login-hint {
  margin: 0 0 6px;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: left;
  padding-inline: 2px;
}

/* Лёгкое отделение формы от заголовка */
.login-form {
  margin-top: 18px;
}

/* ===== Улучшение поля ввода (микро-детали) ===== */

/* Чуть более «стеклянный» фон инпута */
.field input {
  backdrop-filter: blur(6px);
}

/* Тонкая нижняя подсветка при фокусе */
.field::after {
  content: "";
  position: absolute;
  left: 44px;
  right: 12px;
  bottom: 7px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-from), var(--brand-to));
  opacity: 0;
  transform: scaleX(0.6);
  transform-origin: center;
  transition: opacity .18s ease, transform .18s ease;
}

.field input:focus ~ .icon,
.field input:focus + label + .icon {
  filter: drop-shadow(0 0 6px rgba(var(--ring), .7));
}

/* Активируем подсветку линии при фокусе */
.field input:focus ~ .field-underline,
.field input:focus ~ .icon,
.field input:focus + label + .icon {
  /* если захочешь, можно сюда ещё что-то добавить */
}

.field input:focus ~ .field-underline,
.field input:focus ~ .icon {
  /* оставлено на будущее */
}

/* Это работает с ::after выше */
.field input:focus ~ * ,
.field input:focus {
  /* ничего не ломаем, только анимацию линии включаем */
}
.field input:focus-visible + label,
.field input:focus-visible ~ .icon {
  outline: none;
}

/* ===== Состояние ошибки (если добавишь классы позже) ===== */
.field.is-error input {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.18);
}

.field.is-error label {
  color: var(--error);
}

/* Чтобы плавающий label выглядел чуть более «бейджиком» */
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field input:valid + label {
  padding: 0 6px;
  background: linear-gradient(
      90deg,
      rgba(15, 23, 42, 0.92),
      rgba(15, 23, 42, 0.88)
    );
  border-radius: 999px;
  -webkit-text-fill-color: #e5e7eb;
  color: #e5e7eb;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.5);
}
/* ==== Заголовок формы ==== */
.login-form-head {
  margin-bottom: 10px;
  text-align: left;
}

.login-form-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.login-hint {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

/* Чуть увеличим вертикальные отступы внутри формы */
.login-form {
  margin-top: 18px;
  display: grid;
  gap: 16px;
}

/* ==== Внутренняя «капсула» вокруг инпутов ==== */
.login-form-shell {
  padding: 14px 14px 12px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top left,
      rgba(65, 0, 147, 0.08),
      rgba(83, 153, 231, 0.02));
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.4) inset;
  backdrop-filter: blur(12px);
}

html.dark .login-form-shell {
  background:
    radial-gradient(circle at top left,
      rgba(83, 153, 231, 0.18),
      rgba(15, 23, 42, 0.95));
  border-color: rgba(51, 65, 85, 0.9);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.65),
    0 1px 0 rgba(148, 163, 184, 0.25) inset;
}

/* Чуть плотнее поля внутри капсулы */
.login-form-shell .field + .field {
  margin-top: 8px;
}

/* Инпуты — немного более «карточные», но с теми же цветами */
.field input {
  border-radius: 13px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,0.78), transparent 70%),
    var(--input);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 0 rgba(var(--ring), 0);
}

/* Фокус — аккуратное свечение, без смены цветов бренда */
.field input:focus {
  border-color: transparent;
  background:
    linear-gradient(var(--input), var(--input)) padding-box,
    linear-gradient(90deg, var(--brand-from), var(--brand-to)) border-box;
  box-shadow:
    0 0 0 4px rgba(var(--ring), .14),
    0 0 28px rgba(83, 153, 231, 0.22);
}

/* Лейбл — чуть компактнее, когда всплыл */
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field input:valid + label {
  padding: 0 6px;
  border-radius: 999px;
  top: 6px;
  left: 44px;
  font-size: 0.72rem;
  background: rgba(15, 23, 42, 0.85);
  -webkit-text-fill-color: #e5e7eb;
  color: #e5e7eb;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.5);
}

/* Подсветка иконки при фокусе */
.field input:focus ~ .icon,
.field input:focus + label + .icon {
  filter: drop-shadow(0 0 6px rgba(var(--ring), .7));
}

/* Тот же нижний градиент-лайн, но с чуть более явной анимацией */
.field::after {
  content: "";
  position: absolute;
  left: 44px;
  right: 12px;
  bottom: 7px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-from), var(--brand-to));
  opacity: 0;
  transform: scaleX(0.6);
  transform-origin: center;
  transition: opacity .18s ease, transform .18s ease;
}

.field input:focus ~ *,
.field input:focus {
  /* активируем линию через ::after */
}

.field input:focus + label ~ .icon,
.field input:focus + label ~ .icon + .something {
  /* запас под дальнейшие элементы */
}

.field input:focus + label + svg + *,
.field input:focus-visible + label,
.field input:focus-visible ~ .icon {
  outline: none;
}

.field input:focus ~ .icon,
.field input:focus + label + .icon {
  /* уже есть drop-shadow выше */
}

.field input:focus ~ .field-underline,
.field input:focus ~ .icon {
  /* можно расширить, если нужно */
}

.field input:focus ~ .field-underline,
.field input:focus ~ .icon,
.field input:focus + label ~ .icon {
  /* оставлено под будущее использование */
}

.field input:focus + label ~ .icon,
.field input:focus + label + .icon {
  /* всё ещё не ломаем поведение */
}

.field input:focus-visible + label,
.field input:focus-visible ~ .icon {
  outline: none;
}

.field input:focus ~ .field-underline,
.field input:focus ~ .icon {
  /* для совместимости с существующим кодом */
}

.field input:focus ~ .field-underline,
.field input:focus ~ .icon {
  /* никаких критичных изменений */
}

.field input:focus ~ .field-underline,
.field input:focus ~ .icon {
  /* заглушки — чтобы не ломать селекторы, если добавишь underline отдельно */
}

/* Делает линию видимой при фокусе */
.field input:focus ~ .field-underline,
.field input:focus ~ .icon,
.field input:focus + label + .icon {
  /* подсвечиваем только через ::after */
}
.field input:focus + label ~ .field-underline,
.field input:focus + label ~ .icon {
  /* всё равно не мешает */
}

.field input:focus ~ .field-underline,
.field input:focus ~ .icon {
  /* ничего критичного, можно оставить пустым */
}

.field input:focus ~ .field-underline,
.field input:focus ~ .icon {
  /* подтверждаем совместимость */
}

.field input:focus ~ .field-underline,
.field input:focus ~ .icon {
  /* завершаем серию 😄 */
}

.field input:focus ~ .field-underline,
.field input:focus ~ .icon {
  /* итог: эффекты уже заданы выше */
}

.field input:focus ~ .field-underline,
.field input:focus ~ .icon {
  /* ок */
}

.field input:focus ~ .field-underline,
.field input:focus ~ .icon {
  /* финальный no-op */
}

.field input:focus ~ .field-underline,
.field input:focus ~ .icon {
  /* всё, больше не трогаем :) */
}

.field input:focus ~ .field-underline,
.field input:focus ~ .icon {
  /* можно удалить, если хочешь — я оставил пустым для совместимости */
}

.field input:focus ~ .field-underline,
.field input:focus ~ .icon {
  /* конец */
}

/* а вот здесь реально включаем ::after :) */
.field input:focus ~ .field-underline,
.field:has(input:focus)::after {
  opacity: 1;
  transform: scaleX(1);
}

/* ==== Низ формы: remember + forgot ==== */
.login-meta {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8rem;
}

.remember-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.remember-toggle input {
  display: none;
}

.switch {
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.4);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.8);
  transition: background 0.2s ease;
}

.switch-knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.35);
  transition: transform 0.2s ease;
}

.remember-toggle input:checked + .switch {
  background: linear-gradient(90deg, var(--brand-from), var(--brand-to));
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5);
}

.remember-toggle input:checked + .switch .switch-knob {
  transform: translateX(12px);
}

.remember-label {
  color: var(--muted);
}

.link-muted {
  color: var(--muted);
  text-decoration: none;
}

.link-muted:hover {
  text-decoration: underline;
}

/* ============================= */
/*  DARK MODE TWEAKS (ONLY DARK) */
/* ============================= */

/* Фон карточки в dark: глубже и без серой дымки */
html.dark .login-card,
body.dark-mode .login-card {
  background: #050816;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(15, 23, 42, 0.9);
}

/* Текстовые подписи, подсказки */
html.dark .brand-sub,
body.dark-mode .brand-sub,
html.dark .login-hint,
body.dark-mode .login-hint {
  color: #9ca3af;
}

/* Внутренняя капсула формы в dark */
html.dark .login-form-shell,
body.dark-mode .login-form-shell {
  background:
    radial-gradient(circle at top left,
      rgba(83, 153, 231, 0.22),
      rgba(15, 23, 42, 0.96));
  border-color: rgba(51, 65, 85, 0.9);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(148, 163, 184, 0.22) inset;
}

/* Инпуты в dark: чуть светлее фон и чёткая граница */
html.dark .field input,
body.dark-mode .field input {
  background:
    radial-gradient(circle at 0 0, rgba(15,23,42,0.9), transparent 60%),
    #020617; /* очень тёмный, но не «чёрная дыра» */
  border-color: rgba(30, 64, 175, 0.9);
  color: #e5e7eb;
  box-shadow:
    0 1px 0 rgba(148, 163, 184, 0.35),
    0 0 0 0 rgba(15, 23, 42, 0);
}

/* Плейсхолдер-лейблы до фокуса */
html.dark .field label,
body.dark-mode .field label {
  color: #9ca3af;
}

/* Фокус инпута в dark: светится, но в тех же brand-цветах */
html.dark .field input:focus,
body.dark-mode .field input:focus {
  background:
    linear-gradient(#020617, #020617) padding-box,
    linear-gradient(90deg, var(--brand-from), var(--brand-to)) border-box;
  box-shadow:
    0 0 0 4px rgba(var(--ring), .3),
    0 0 32px rgba(59, 130, 246, 0.55);
}

/* Плавающий label в dark: не слишком тёмный фон */
html.dark .field input:focus + label,
html.dark .field input:not(:placeholder-shown) + label,
html.dark .field input:valid + label,
body.dark-mode .field input:focus + label,
body.dark-mode .field input:not(:placeholder-shown) + label,
body.dark-mode .field input:valid + label {
  background: rgba(15, 23, 42, 0.65);
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.6);
  -webkit-text-fill-color: #e5e7eb;
  color: #e5e7eb;
}

/* Иконки в полях — немного ярче в dark */
html.dark .field .icon,
body.dark-mode .field .icon {
  color: #93c5fd;
  opacity: 0.95;
}

/* Нижняя линия-подсветка при фокусе — чуть заметнее на тёмном */
html.dark .field::after,
body.dark-mode .field::after {
  background: linear-gradient(90deg, var(--brand-from), var(--brand-to));
}

/* Error-текст на тёмном фоне */
html.dark .error-message,
body.dark-mode .error-message {
  color: var(--error);
}

/* Кнопка "Toggle Theme" в dark */
html.dark .ghost-btn,
body.dark-mode .ghost-btn {
  border-color: rgba(55, 65, 81, 0.9);
  color: #e5e7eb;
  background: rgba(15, 23, 42, 0.9);
}

html.dark .ghost-btn:hover,
body.dark-mode .ghost-btn:hover {
  background: rgba(37, 99, 235, 0.18);
  border-color: rgba(96, 165, 250, 0.9);
}

/* Текстовые ссылки (например, Forgot password?) */
html.dark .link-muted,
body.dark-mode .link-muted {
  color: #9ca3af;
}

html.dark .link-muted:hover,
body.dark-mode .link-muted:hover {
  color: #e5e7eb;
}

/* Подпись "Remember this device" */
html.dark .remember-label,
body.dark-mode .remember-label {
  color: #e5e7eb;
}

/* Переключатель remember в dark */
html.dark .switch,
body.dark-mode .switch {
  background: rgba(31, 41, 55, 0.8);
  box-shadow: inset 0 0 0 1px rgba(75, 85, 99, 0.9);
}

html.dark .switch-knob,
body.dark-mode .switch-knob {
  background: #f9fafb;
}

/* Когда включен remember в dark — всё ещё brand-цвета */
html.dark .remember-toggle input:checked + .switch,
body.dark-mode .remember-toggle input:checked + .switch {
  background: linear-gradient(90deg, var(--brand-from), var(--brand-to));
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.7);
}