.v4-auth { display: grid; grid-template-columns: var(--v4-auth-columns); height: 100%; }
.v4-auth-story[hidden], .v4-auth-secondary[hidden], .v4-auth-card[hidden] { display: none; }
.v4-auth-story {
  background: var(--v4-story-bg); color: var(--v4-story-text); display: flex;
  flex-direction: column; justify-content: space-between; padding: var(--v4-story-padding);
}
.v4-auth-positioning {
  border: var(--v4-border-width) solid var(--v4-story-border);
  border-radius: var(--v4-tag-radius); display: inline-flex;
  font: var(--v4-tag-font); padding: var(--v4-tag-padding);
}
.v4-auth-title {
  font: var(--v4-title-font); letter-spacing: var(--v4-title-tracking);
  line-height: var(--v4-title-leading); margin: var(--v4-title-margin); white-space: pre-line;
}
.v4-auth-description {
  color: var(--v4-story-muted); font: var(--v4-body-font); line-height: var(--v4-body-leading);
}
.v4-auth-principles {
  display: grid; gap: var(--v4-principle-gap); margin: 0; padding: 0;
}
.v4-auth-panel {
  align-items: center; background: var(--v4-bg); display: flex;
  justify-content: center; padding: var(--v4-panel-padding);
}
.v4-auth-card {
  background: var(--v4-panel); border: var(--v4-border-width) solid var(--v4-border);
  border-radius: var(--v4-card-radius); box-shadow: var(--v4-card-shadow);
  display: flex; flex-direction: column; gap: var(--v4-card-gap);
  padding: var(--v4-card-padding); width: var(--v4-card-width);
}
.v4-auth-card-title { font: var(--v4-card-title-font); margin: 0; }
.v4-auth-input, .v4-auth-submit, .v4-auth-secondary {
  border: var(--v4-border-width) solid var(--v4-border);
  border-radius: var(--v4-control-radius); font: var(--v4-control-font);
  min-height: var(--v4-control-height); padding: var(--v4-control-padding);
}
.v4-auth-input { background: var(--v4-input-bg); color: var(--v4-text); }
.v4-auth-submit { background: var(--v4-action); color: var(--v4-on-action); }
.v4-auth-secondary { background: var(--v4-panel); color: var(--v4-text); }
.v4-auth-sms { display: flex; gap: var(--v4-control-gap); }
.v4-auth-sms[hidden], .v4-auth-input[hidden] { display: none; }
.v4-auth-sms .v4-auth-input { flex: 1; }
.v4-auth-error { color: var(--v4-danger); font: var(--v4-error-font); }
.v4-auth-status { color: var(--v4-success); font: var(--v4-error-font); }
