/* Cabinet login — apple-style auth tiles (TG / Google / Email / VK) + fallback accordion.
   Применяется только к #loginBlock; cabinetBlock не затрагивается. */

#loginBlock .login-hero {
  text-align: center;
  padding: 28px 16px 24px;
  max-width: 520px;
  margin: 0 auto 8px;
}
#loginBlock .login-hero h1 {
  font: 600 clamp(28px, 4.2vw, 36px)/1.15 'Cormorant Garamond', serif;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--text, #0f172a);
}
#loginBlock .login-hero-sub {
  font: 500 15px/1.5 'DM Sans', system-ui, sans-serif;
  color: var(--text-secondary, #64748b);
  margin: 0;
}
#loginBlock .login-banner-err {
  margin: 14px auto 0;
  max-width: 440px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
}

#loginBlock .login-tiles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 440px;
  margin: 0 auto 24px;
  padding: 0 14px;
}

#loginBlock .login-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  text-decoration: none;
  color: var(--text, #0f172a);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  width: 100%;
}
#loginBlock .login-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}
#loginBlock .login-tile:active { transform: translateY(0); }
#loginBlock .login-tile.pending { opacity: 0.85; cursor: default; }
#loginBlock .login-tile.pending:hover { transform: none; box-shadow: none; }

#loginBlock .login-tile-ico {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
}
#loginBlock .login-tile-tg .login-tile-ico { background: #2aabee; }
#loginBlock .login-tile-google .login-tile-ico { background: #fff; border: 1px solid #e5e7eb; }
#loginBlock .login-tile-email .login-tile-ico { background: #fef3c7; color: #92400e; }
#loginBlock .login-tile-vk .login-tile-ico { background: #0077ff; }

#loginBlock .login-tile-body { flex: 1 1 auto; min-width: 0; }
#loginBlock .login-tile-title {
  font: 600 15px/1.2 'DM Sans', system-ui, sans-serif;
  color: var(--text, #0f172a);
}
#loginBlock .login-tile-sub {
  margin-top: 3px;
  font: 500 13px/1.35 'DM Sans', system-ui, sans-serif;
  color: var(--text-secondary, #64748b);
}

#loginBlock .login-tile-chev {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--text-secondary, #94a3b8);
  transition: transform .12s ease, color .12s ease;
}
#loginBlock .login-tile:hover .login-tile-chev {
  transform: translateX(3px);
  color: var(--text, #0f172a);
}

#loginBlock .login-tile-msg {
  margin: -4px 4px 0;
  font: 500 13px/1.4 'DM Sans', system-ui, sans-serif;
  color: var(--text-secondary, #64748b);
  padding: 0 4px;
}
#loginBlock .login-tile-msg .err-msg { color: #b91c1c; }

/* Email magic-link inline panel (разворачивается под тайлом Email) */
#loginBlock .login-magic {
  margin: -2px 0 4px;
  padding: 14px;
  border-radius: 12px;
  background: #fffaf0;
  border: 1px solid #fde68a;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#loginBlock .login-magic[hidden] { display: none; }
#loginBlock .login-magic-label {
  font: 600 13px/1.2 'DM Sans', system-ui, sans-serif;
  color: var(--text, #0f172a);
}
#loginBlock .login-magic .input {
  font: 500 15px/1.4 'DM Sans', system-ui, sans-serif;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #fde68a;
  background: #fff;
}
#loginBlock .login-magic-btn { align-self: flex-start; }
#loginBlock .login-magic-msg {
  margin: 0;
  font: 500 13px/1.4 'DM Sans', system-ui, sans-serif;
}
#loginBlock .login-magic-msg.ok { color: #047857; }
#loginBlock .login-magic-msg.err { color: #b91c1c; }

#loginBlock .login-legal {
  margin: 8px 4px 0;
  font: 500 12px/1.45 'DM Sans', system-ui, sans-serif;
  color: var(--text-secondary, #94a3b8);
  text-align: center;
}
#loginBlock .login-legal a { color: var(--text-secondary, #64748b); text-decoration: underline; }

/* Fallback accordion — пароль / ссылка из письма */
#loginBlock .login-fallback {
  max-width: 440px;
  margin: 0 auto 40px;
  padding: 0 14px;
}
#loginBlock .login-fallback summary {
  cursor: pointer;
  font: 500 14px/1.2 'DM Sans', system-ui, sans-serif;
  color: var(--text-secondary, #64748b);
  padding: 10px 14px;
  border-radius: 10px;
  background: transparent;
  list-style: none;
  text-align: center;
  user-select: none;
}
#loginBlock .login-fallback summary::-webkit-details-marker { display: none; }
#loginBlock .login-fallback summary:hover { color: var(--text, #0f172a); background: #f8fafc; }
#loginBlock .login-fallback[open] summary { color: var(--text, #0f172a); margin-bottom: 4px; }
#loginBlock .login-fallback-body {
  padding: 14px;
  border-radius: 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
}

@media (max-width: 520px) {
  #loginBlock .login-hero { padding: 18px 14px 18px; }
  #loginBlock .login-tile { padding: 12px 14px; gap: 12px; }
  #loginBlock .login-tile-ico { flex-basis: 40px; width: 40px; height: 40px; }
}