/* Backdrop and range control adapted from BS_YF_M01's hero.css. */
.login-brand-scene {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(1000px 600px at 50% -20%, rgba(255,255,255,.045), transparent 60%), #0a0a0a;
}
.login-brand-scene canvas { display: block; width: 100%; height: 100%; opacity: .75; }
.login-brand-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.15), rgba(10,10,10,.4));
}
.login-scale-settings { margin: 0 16px 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.login-scale-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.login-scale-heading label { color: var(--ink); font-size: 14px; font-weight: 650; }
.login-scale-heading output {
  min-width: 54px;
  padding: 3px 8px;
  border-radius: 5px;
  color: var(--blue);
  background: var(--blue-soft);
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.login-scale-settings input[type="range"] { display: block; width: 100%; height: 24px; margin: 0; padding: 0; accent-color: var(--blue); cursor: pointer; }
.login-scale-limits { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.login-scale-preview { position: relative; height: 150px; margin-top: 12px; overflow: hidden; border-radius: 8px; background: #0a0a0a; }
.login-scale-preview canvas { display: block; width: 100%; height: 100%; }
.login-scale-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.1), rgba(10,10,10,.3));
  pointer-events: none;
}
.login-scale-preview > span { position: absolute; z-index: 1; top: 12px; left: 14px; color: #a3a3a3; font-size: 11px; }