/* Focused first-time setup flow for Sonare student accounts. */
#studentSetupCard {
  max-width: 600px;
}

#studentSetupCard .student-setup-intro {
  max-width: 31rem;
}

.student-setup-progress {
  display: flex;
  align-items: center;
  margin: 1.5rem 0;
}

.student-setup-progress-step {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #85808c;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.student-setup-progress-step i {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid #ddd5e5;
  border-radius: 50%;
  background: #fff;
  font-size: 0.67rem;
  font-style: normal;
}

.student-setup-progress-step.is-complete {
  color: #5f526c;
}

.student-setup-progress-step.is-complete i {
  border-color: #d8cae8;
  color: var(--accent);
  background: var(--brand-lilac-soft);
}

.student-setup-progress-step.is-current {
  color: var(--accent-dark);
}

.student-setup-progress-step.is-current i {
  border-color: var(--brand-lilac);
  color: #fff;
  background: var(--accent);
}

.student-setup-progress-line {
  width: 34px;
  height: 1px;
  margin: 0 0.6rem;
  background: #ddd6e5;
}

.student-setup-account {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.45rem;
  padding: 0.85rem;
  border: 1px solid #e3dcec;
  border-radius: 14px;
  background: var(--brand-gradient-surface);
}

.student-setup-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
}

.student-setup-account-copy {
  display: grid;
  gap: 0.1rem;
}

.student-setup-account-copy small {
  color: #8b8292;
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.student-setup-account-copy strong {
  color: var(--brand-ink);
  font-size: 0.91rem;
}

.student-setup-ready {
  margin-left: auto;
  padding: 0.28rem 0.52rem;
  border-radius: 999px;
  color: var(--accent-dark);
  background: rgba(180, 154, 232, 0.18);
  font-size: 0.68rem;
  font-weight: 650;
}

.student-setup-username-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.student-setup-password-field {
  position: relative;
}

.student-setup-password-field input {
  padding-right: 4.3rem;
}

.student-setup-reveal {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  min-height: 34px;
  padding: 0 0.45rem;
  border: 0;
  border-radius: 7px;
  color: var(--accent);
  background: transparent;
  font-size: 0.76rem;
  font-weight: 650;
  cursor: pointer;
}

.student-setup-reveal:hover {
  background: var(--brand-lilac-soft);
}

.student-setup-requirements {
  margin: -0.35rem 0 1rem;
  color: #8a8490;
  font-size: 0.72rem;
}

.student-setup-requirements i {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-right: 0.25rem;
  border: 1px solid #d4ccd9;
  border-radius: 50%;
  color: transparent;
  font-size: 0.58rem;
  font-style: normal;
}

.student-setup-requirements.is-met {
  color: #4f3e63;
}

.student-setup-requirements.is-met i {
  border-color: var(--brand-lilac);
  color: #fff;
  background: var(--accent);
}

.student-setup-match {
  min-height: 1.15rem;
  margin: -0.35rem 0 0.65rem;
  color: var(--danger);
  font-size: 0.74rem;
}

.student-setup-match.is-match {
  color: var(--success);
}

.student-setup-privacy {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 0.45rem;
  padding: 0.85rem;
  border-radius: 12px;
  background: var(--brand-lilac-pale);
}

.student-setup-privacy span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--accent);
  background: var(--brand-lilac-soft);
  font-size: 0.7rem;
  font-weight: 700;
}

.student-setup-privacy p {
  margin: 0;
  font-size: 0.75rem;
}

#studentSetupSubmit:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

html[data-theme="dark"] .student-setup-progress-step i,
html[data-theme="dark"] .student-setup-account,
html[data-theme="dark"] .student-setup-privacy {
  border-color: var(--border);
  background: var(--surface-soft);
}

html[data-theme="dark"] .student-setup-account-copy strong {
  color: var(--text);
}

html[data-theme="dark"] .student-setup-account-copy small,
html[data-theme="dark"] .student-setup-requirements {
  color: var(--muted);
}

html[data-theme="dark"] .student-setup-ready {
  color: var(--accent-dark);
  background: rgba(180, 154, 232, 0.16);
}

@media (max-width: 540px) {
  .student-setup-progress-line {
    width: 18px;
    margin: 0 0.4rem;
  }

  .student-setup-progress-step {
    font-size: 0.68rem;
  }
}


.student-setup-entry-link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--accent-dark);
  font-weight: 650;
  text-decoration: none;
}

.student-setup-entry-link:hover {
  text-decoration: underline;
}

.student-setup-step-panel {
  display: grid;
  gap: 0.9rem;
}

#studentSetupCode {
  min-height: 58px;
  text-align: center;
  color: var(--brand-ink);
  font-size: clamp(1.35rem, 5vw, 1.8rem);
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#studentSetupCode::placeholder {
  color: #aca5b2;
  opacity: 0.72;
}

.student-setup-username-hint {
  margin: -0.35rem 0 1rem;
  color: #8a8490;
  font-size: 0.72rem;
}

#studentSetupCodeSubmit:disabled,
#studentSetupSubmit:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

#studentSetupBack {
  margin-top: -0.35rem;
}

html[data-theme="dark"] #studentSetupCode {
  color: var(--text);
}

html[data-theme="dark"] .student-setup-entry-link {
  color: var(--accent);
}

html[data-theme="dark"] .student-setup-username-hint {
  color: var(--muted);
}