.tab-list {
  display: flex;
  align-items: stretch;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-stroke-soft);
}

.tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--color-text-sub);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 0;
  transition: color 150ms ease, border-color 150ms ease;
}

.tab:hover {
  color: var(--color-text-strong);
}

.tab-active,
.tab[aria-selected="true"] {
  color: var(--color-text-strong);
  border-bottom-color: var(--color-primary-base);
}

.tab .tab-count {
  font-weight: 400;
  color: var(--color-text-soft);
}

/* Leading icon inside an input. Explicit px so Figma spacing tokens
   (pl-10 = 10px) don't collapse the gutter under the placeholder. */
.input-leading-icon-wrap {
  position: relative;
}

.input-leading-icon {
  position: absolute;
  inset-block: 0;
  left: 12px;
  display: flex;
  align-items: center;
  pointer-events: none;
  color: var(--color-text-soft);
}

.input.has-leading-icon {
  padding-left: 40px;
}

/* OTP digit boxes. Explicit px so Figma spacing tokens (w-12 = 12px) don't
   shrink the tap targets. */
.otp-digits {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.otp-digit {
  box-sizing: border-box;
  width: 44px;
  height: 52px;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-strong);
  text-align: center;
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-stroke-soft);
  box-shadow: var(--shadow-xs);
  outline: none;
}

.otp-digit:focus {
  border-color: var(--color-primary-dark);
  box-shadow: 0 0 0 2px var(--color-primary-alpha-24);
}

@media (min-width: 640px) {
  .otp-digit {
    width: 52px;
    height: 60px;
    font-size: 26px;
  }
}