.screen {
  position: fixed; inset: 0; z-index: var(--z-local);
  display: none; align-items: center; justify-content: center;
}
.screen.active { display: flex; }


.auth-card {
  width: 420px; max-width: 92vw; padding: 40px;
  background: rgba(20,23,25,0.92); backdrop-filter: blur(24px);
  border: 1px solid var(--twilight); border-radius: 16px;
  text-align: center; z-index: var(--z-local-mid);
}
.auth-logo img { width: 80px; height: 80px; margin-bottom: 8px; border-radius: 16px; }
.auth-logo-text {
  color: var(--starlight);
}
.auth-logo-text span { color: var(--steel-cyan); }
.auth-title { margin-top: 24px; }
.auth-subtitle { color: var(--stardust); margin-top: 8px; margin-bottom: 28px; }
.form-group { text-align: left; margin-bottom: 16px; }
.form-row { display: flex; justify-content: space-between; align-items: center; }
.form-label { color: var(--moonlight); margin-bottom: 6px; display: block; }
.forgot-link { color: var(--steel-cyan); cursor: pointer; }
.btn-primary {
  padding: var(--_pad, var(--btn-padding));
  border: 1px solid var(--rider-border, transparent);
  border-radius: var(--radius-md);
  background: var(--fx-color, var(--signal-yellow));
  color: var(--void-black);
  cursor: pointer;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-primary:hover {
  background: var(--rider-bg-tint, var(--fx-color, var(--signal-yellow)));
  border-color: var(--rider-border, transparent);
  box-shadow: 0 0 var(--glow-radius-sm) color-mix(in srgb, var(--fx-color, var(--signal-yellow)) var(--opacity-glow), transparent);
  transform: translateY(var(--fx-lift-y)) scale(var(--fx-lift-scale));
}
.btn-primary:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.auth-form .btn-primary { margin-top: 8px; }
.divider { display: flex; align-items: center; gap: 12px; margin: 24px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--twilight); }
.divider-text { color: var(--stardust); white-space: nowrap; }
.social-buttons { display: flex; gap: 12px; margin-bottom: 20px; }
.btn-social {
  flex: 1; padding: var(--_pad, 10px 12px); border: 1px solid var(--twilight);
  border-radius: var(--radius-lg); background: var(--nebula-mid); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--moonlight); transition: all var(--transition-normal);
}
.btn-social:hover {
  border-color: var(--rider-border, color-mix(in srgb, var(--fx-color, var(--signal-yellow)) 40%, transparent));
  background: var(--rider-bg-tint, color-mix(in srgb, var(--fx-color, var(--signal-yellow)) var(--opacity-tint), transparent));
}
.btn-social svg { width: 20px; height: 20px; }
.auth-links { font-size: var(--fs-base); color: var(--stardust); }
.auth-links a { color: var(--steel-cyan); cursor: pointer; }

/* ── Text Input / Textarea ── */
.vt-input,
.vt-textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--nebula-mid);
  border: var(--border-width) solid var(--twilight);
  border-radius: var(--radius-md);
  color: var(--starlight);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-default);
}

.vt-input::placeholder,
.vt-textarea::placeholder {
  color: var(--gunmetal);
  font-style: italic;
}

.vt-input:focus,
.vt-textarea:focus {
  border-color: var(--signal-yellow);
}

.vt-input:disabled,
.vt-textarea:disabled {
  opacity: var(--opacity-disabled);
  color: var(--gunmetal);
  cursor: not-allowed;
}

/* Compact variant */
.vt-input.input-compact,
.vt-textarea.input-compact {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

/* Circle variant (spell slots, etc.) */
.vt-input.input-circle {
  border-radius: var(--radius-circle);
  text-align: center;
}

/* Textarea specifics */
.vt-textarea {
  resize: vertical;
}

/* Suppress native number spinners on all vt-input number fields */
.vt-input[type="number"] { -moz-appearance: textfield; }
.vt-input[type="number"]::-webkit-inner-spin-button,
.vt-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Button size modifiers */
/* .size-sm/.size-lg duplicates removed — canonical definition in token section */
.btn-block {
  display: block;
  width: 100%;
}
.btn-dashed {
  border-style: dashed;
}
.btn-group { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }


/* help */
.help-fab-wrapper { position: fixed; bottom: 20px; right: 20px; z-index: var(--z-shelf); }

.help-popup {
  position: absolute; bottom: 60px; right: 0;
  width: 260px; padding: 16px;
  background: rgba(20,23,25,0.95); backdrop-filter: blur(20px);
  border: 1px solid var(--twilight); border-radius: 12px;
  display: none; z-index: var(--z-toolbar);
}
.help-popup.open { display: block; }
.help-popup-title {
  color: var(--steel-cyan); margin-bottom: 12px;
}
/* .help-search — purged, converged to vt-input/vt-textarea (D#560) */
.help-link {
  display: block; width: 100%; padding: 10px 12px; border: none; border-radius: 8px;
  background: transparent; color: var(--moonlight); cursor: pointer;
  text-align: left; transition: all 0.2s;
}
.help-link:hover { background: rgba(245,241,34,0.15); color: var(--starlight); }
.help-social { display: flex; gap: 16px; margin: 12px 0; justify-content: center; }
.help-social a { color: var(--stardust); transition: color 0.3s; }
.help-social a:hover { color: var(--steel-cyan); }
.help-social svg { width: 20px; height: 20px; }
.help-version { color: var(--twilight); text-align: center; }