.account-page { max-width: 920px; }
.account-locale {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-block: 18px 4px;
}
.account-locale label { font-size: .9rem; font-weight: 650; }
.account-locale select {
  background: transparent;
  border: 1px solid rgba(127, 127, 127, .4);
  border-color: color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 999px;
  color: inherit;
  font: inherit;
  min-height: 44px;
  padding-inline: 14px 34px;
}
.account-flash {
  border: 1px solid #789c2e;
  border-color: color-mix(in srgb, var(--accent, #cbf24c) 55%, transparent);
  border-radius: 14px;
  margin-block: 24px;
  padding: 14px 16px;
}
.account-section-head {
  align-items: start;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}
.account-section-head .btn { flex: 0 0 auto; }
.account-facts {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block: 20px;
  overflow: hidden;
}
.account-facts > div {
  background: rgba(127, 127, 127, .08);
  background: color-mix(in srgb, currentColor 5%, transparent);
  min-width: 0;
  padding: 14px 16px;
}
.account-facts dt {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin-block-end: 5px;
  text-transform: uppercase;
}
.account-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.account-sessions {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.account-session {
  align-items: center;
  border: 1px solid rgba(127, 127, 127, .28);
  border-color: color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 14px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  min-width: 0;
  padding: 14px 16px;
}
.account-session__body { min-width: 0; }
.account-session__body strong,
.account-session__body span { display: block; }
.account-session__body span { font-size: .9rem; opacity: .72; }
.account-session__current { color: var(--accent, #9fcf34); font-weight: 700; }
.account-session button { flex: 0 0 auto; min-height: 44px; }
.account-note { font-size: .92rem; opacity: .78; }
.account-delete {
  border: 1px solid rgba(224, 96, 96, .6);
  border-color: color-mix(in srgb, #e06060 55%, transparent);
  border-radius: 16px;
  margin-block-start: 18px;
  padding: 18px;
}
.account-delete label { display: block; font-weight: 600; margin-block: 16px 8px; }
.account-delete input {
  background: transparent;
  border: 1px solid rgba(127, 127, 127, .5);
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 10px;
  color: inherit;
  font: inherit;
  inline-size: min(100%, 22rem);
  min-height: 46px;
  padding-inline: 12px;
}
.account-danger { border-color: #b94b4b !important; border-color: color-mix(in srgb, #e06060 65%, transparent) !important; }
.account-danger:not(:disabled) { color: #d94545; }

@media (max-width: 700px) {
  .account-locale { align-items: stretch; flex-direction: column; }
  .account-locale select { inline-size: 100%; }
  .account-section-head,
  .account-session { align-items: stretch; flex-direction: column; }
  .account-facts { grid-template-columns: 1fr; }
  .account-session button { inline-size: 100%; }
}

@media (forced-colors: active) {
  .account-flash,
  .account-session,
  .account-delete,
  .account-delete input,
  .account-locale select { border: 1px solid CanvasText; }
}