/* One introduction, title and set of tools in both color schemes. */
.auth-panel .auth-invite-note { margin: 0 0 20px; font-size: 12px; line-height: 1.7; }

:root[data-ui-theme] .auth-modern-intro {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-width: 0;
}
:root[data-ui-theme] .auth-modern-brand { display: flex; align-items: center; gap: 12px; }
:root[data-ui-theme] .auth-modern-brand > img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  padding: 7px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--accent-line);
}
:root[data-ui-theme] .auth-modern-brand > div { display: grid; gap: 5px; }
:root[data-ui-theme] .auth-modern-brand strong { font-size: 15px; font-weight: 650; }
:root[data-ui-theme] .auth-modern-brand span { font-size: 9px; letter-spacing: 0.12em; color: var(--muted); }
:root[data-ui-theme] .auth-modern-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  padding: 44px 0 62px;
}
:root[data-ui-theme] .auth-modern-main h2 {
  margin: 0;
  font-size: clamp(25px, 2.4vw, 32px);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.45;
}
:root[data-ui-theme] .auth-tool-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
:root[data-ui-theme] .auth-tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  background: var(--chip-bg);
  font-size: 12px;
  line-height: 18px;
  color: var(--text-secondary);
}
:root[data-ui-theme] .auth-tool-chip img { width: 16px; height: 16px; object-fit: contain; filter: var(--icon-filter); opacity: 0.55; }

@media (min-width: 821px) {
  :root[data-ui-theme] .auth-entry-card { grid-template-columns: minmax(0, 0.94fr) minmax(0, 1fr); }
  :root[data-ui-theme] .auth-entry-card .hero-side { padding: 38px; }
  :root[data-ui-theme] .auth-entry-card .form-side { padding: 38px 42px; }
}
@media (min-width: 821px) and (max-width: 1000px) {
  :root[data-ui-theme] .auth-entry-card .hero-side { padding: 28px; }
  :root[data-ui-theme] .auth-entry-card .form-side { padding: 28px; }
}