.my-page-account-settings {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.my-page-account-section {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--h24-border, #dce7df);
  border-radius: 14px;
  background: var(--h24-surface, #fff);
}

.my-page-account-section h3 {
  margin: 0;
  color: var(--h24-accent-green, #173b28);
  font-size: 1rem;
}

.my-page-account-section p {
  margin: 0;
}

.my-page-account-form {
  display: grid;
  gap: 10px;
}

.my-page-account-field {
  display: grid;
  gap: 6px;
}

.my-page-account-field > span {
  color: var(--h24-accent-green, #315f43);
  font-size: 0.86rem;
  font-weight: 800;
}

.my-page-account-field input {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--h24-border, #bfd2c5);
  border-radius: 10px;
  background: var(--h24-surface, #fff);
  color: var(--h24-accent-green, #173b28);
  font: inherit;
}

.my-page-account-field input:focus {
  outline: 3px solid rgba(49, 130, 78, 0.16);
  border-color: var(--h24-accent-green-action, #31824e);
}

.my-page-account-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  color: var(--h24-ink-muted, #567262);
  font-size: 0.84rem;
}

.my-page-account-meta strong {
  color: var(--h24-accent-green, #244d34);
  text-align: right;
}

.my-page-account-status {
  min-height: 20px;
  color: var(--h24-accent-green, #315f43);
  font-size: 0.86rem;
  line-height: 1.4;
}

.my-page-account-status[data-kind="error"] {
  color: var(--h24-danger, #a32626);
}

.my-page-account-status[data-kind="success"] {
  color: var(--h24-success, #1f6d3a);
  font-weight: 800;
}

.my-page-account-section button {
  min-height: 44px;
}

@media (max-width: 520px) {
  .my-page-account-section {
    padding: 12px;
  }

  .my-page-account-meta {
    grid-template-columns: 1fr;
  }

  .my-page-account-meta strong {
    text-align: left;
  }
}