.security-code-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 22px;
  padding: 14px;
  border: 1px solid rgba(47, 143, 190, 0.22);
  border-radius: 12px;
  background: rgba(47, 143, 190, 0.08);
  color: var(--ink-2);
}

.security-code-note svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--accent-strong);
}

.security-code-note div {
  display: grid;
  gap: 3px;
}

.security-code-note strong {
  font-size: 13px;
  color: var(--ink);
}

.security-code-note span,
.security-code-status {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
}

.security-code-field {
  margin-bottom: 18px;
}

.security-code-input {
  height: 58px;
  font-family: "Geist Mono", monospace;
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.32em;
  padding-left: calc(14px + 0.32em);
}

.security-code-status {
  margin: -4px 0 16px;
  padding: 10px 12px;
  border-left: 2px solid var(--accent);
  background: var(--surface-2);
}

.security-code-resend {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
}

.security-code-resend a {
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}

.security-code-resend a:hover {
  color: var(--ink);
}