.account-view {
  width: 100%; max-width: 650px; min-width: 0; margin-inline: auto;
  color: var(--ink, #273d33); font-family: var(--body, "DM Sans", sans-serif);
  overflow-wrap: anywhere;
}
.account-view h1 { font-size: clamp(25px, 4vw, 34px); margin-bottom: 10px; }
.account-view h2 { font-size: 21px; margin-bottom: 10px; }
.account-view .account-kicker {
  color: var(--forest, #2d543f); font-size: 10px; letter-spacing: 1.5px;
  font-weight: 700; margin: 0 0 10px;
}
.account-intro, .account-help {
  color: var(--muted, #586957); font-size: 13px; line-height: 1.6;
}
.account-test-note {
  padding: 13px 15px; border: 1px solid var(--line, #d7decf);
  border-left: 3px solid var(--forest, #2d543f); border-radius: 9px;
  color: var(--sage-ink, #294b32); background: var(--sage, #dfe7d5);
  font-size: 12px; line-height: 1.6; margin: 18px 0;
}
.account-card {
  border: 1px solid var(--line, #d7decf); border-radius: 14px;
  padding: clamp(16px, 4vw, 26px); background: var(--surface, #fffefa);
  min-width: 0;
}
.account-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.account-view .account-modes button[aria-pressed="true"] {
  background: var(--sage, #dfe7d5); color: var(--sage-ink, #294b32);
  border-color: var(--forest, #2d543f);
}
.account-view :is(button, input) { min-width: 0; min-height: 44px; max-width: 100%; }
.account-view button { white-space: normal; overflow-wrap: anywhere; }
.account-view input {
  width: 100%; color: var(--ink, #273d33); background: var(--surface, #fffefa);
  border-color: var(--line, #d7decf); font-size: 16px;
}
.account-view label { margin: 0 0 16px; font-size: 13px; font-weight: 600; }
.account-view .account-code {
  max-width: 250px; font-size: 22px; font-variant-numeric: tabular-nums;
  letter-spacing: 5px;
}
.account-view :is(button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--focus, #527542); outline-offset: 3px;
}
.account-view [aria-invalid="true"] { border-color: var(--danger, #943e2c); }
.account-field-help { margin: -8px 0 16px; color: var(--muted, #586957); font-size: 12px; line-height: 1.5; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.account-checklist { display: grid; gap: 8px; padding: 0; margin: 16px 0; list-style: none; }
.account-checklist li {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 6px 12px; padding: 10px 12px; border: 1px solid var(--line, #d7decf);
  border-radius: 8px; font-size: 13px;
}
.account-checklist strong { color: var(--forest, #2d543f); font-size: 12px; }
.account-verification { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--line, #d7decf); }
.account-verification h3 { font-size: 15px; margin: 0 0 12px; }
.account-details { display: grid; gap: 0; margin: 18px 0; }
.account-details > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line, #d7decf); }
.account-details dt { color: var(--muted, #586957); font-size: 12px; }
.account-details dd { margin: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.account-feedback { font-size: 13px; line-height: 1.6; color: var(--forest, #2d543f); margin: 14px 0 0; }
.account-feedback:empty { display: none; }
.account-error {
  color: var(--danger, #943e2c); background: var(--danger-surface, #f9e8e1);
  padding: 12px 14px; border: 1px solid var(--danger, #943e2c); border-radius: 9px;
  font-size: 13px; line-height: 1.6; margin: 14px 0 0;
}
.account-footer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-top: 16px; }
.account-footer p { margin: 0; flex: 1 1 220px; }
.account-view [hidden] { display: none !important; }
@media (max-width: 480px) {
  .account-actions button { flex: 1 1 130px; }
  .account-modes button { flex: 1; }
  .account-details > div { grid-template-columns: 90px minmax(0, 1fr); gap: 8px; }
}