.account-dialog {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 24px);
  max-width: none;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--ink);
  border: 0;
  background: var(--cream);
}

.account-dialog::backdrop {
  background: rgb(5 5 5 / 78%);
  backdrop-filter: blur(8px);
}

.account-dialog-panel { padding: 24px; }

.account-dialog header {
  display: flex;
  margin-bottom: 24px;
  align-items: flex-start;
  justify-content: space-between;
}

.account-dialog header span,
.account-dialog-status,
.account-dialog-hint {
  color: rgb(5 5 5 / 60%);
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.account-dialog h2 {
  margin: 0;
  font-size: var(--type-t1-size);
  font-weight: var(--type-t1-weight);
  line-height: var(--type-t1-line-height);
  letter-spacing: var(--type-t1-letter-spacing);
}

.account-dialog button {
  color: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.account-dialog [data-account-close],
.account-dialog .export-dialog-close {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
}

.account-dialog form { display: grid; gap: 14px; }

.account-dialog label {
  display: grid;
  gap: 6px;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.account-dialog input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding-inline: 12px;
  color: var(--ink);
  border: 1px solid rgb(5 5 5 / 42%);
  border-radius: var(--container-radius);
  outline: 0;
  background: #fff;
}

.account-dialog input:focus {
  border-color: var(--ink);
  outline: 3px solid rgb(203 213 114 / 58%);
}

.account-dialog input::placeholder { color: rgb(5 5 5 / 38%); }

.account-dialog .account-dialog-consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.account-dialog .account-dialog-consent input {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  flex: 0 0 auto;
  accent-color: #7a8549;
}

.account-dialog-consent button {
  padding: 0;
  color: #7a8549;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.account-dialog .account-dialog-primary {
  height: 44px;
  color: var(--ink);
  border-radius: var(--container-radius);
  background: var(--acid);
}

.account-dialog-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.account-dialog-code button { padding-inline: 12px; border: var(--container-border); border-radius: var(--container-radius); }
.account-dialog-code button { color: var(--cream); border-color: var(--ink); background: var(--ink); }

.account-dialog-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.account-dialog-actions button {
  color: #7a8549;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.account-dialog-status { min-height: 1.6em; margin: 14px 0 0; }

.account-dialog-divider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  margin-block: 16px;
  align-items: center;
  color: rgb(5 5 5 / 48%);
}

.account-dialog-divider::before,
.account-dialog-divider::after {
  height: 1px;
  content: "";
  background: rgb(5 5 5 / 18%);
}

.account-dialog-providers { display: grid; gap: 10px; }

.account-dialog .account-dialog-providers button {
  min-height: 44px;
  color: var(--cream);
  border: 1px solid #7a8549;
  border-radius: var(--container-radius);
  background: #7a8549;
}

.account-dialog .account-dialog-providers button:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--acid);
}

.account-dialog-qr {
  display: grid;
  width: min(260px, 70vw);
  aspect-ratio: 1;
  margin-inline: auto;
  place-items: center;
  border: 1px solid rgb(5 5 5 / 28%);
  border-radius: var(--container-radius);
  background: #fff;
  overflow: hidden;
}

.account-dialog-qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.account-dialog-hint { margin: 16px 0 0; text-align: center; }

.account-dialog-wechat-code {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  text-align: center;
}

.account-dialog-wechat-code[hidden] { display: none; }

.account-dialog-wechat-code span {
  color: rgb(5 5 5 / 60%);
  font-size: var(--type-t3-size);
}

.account-dialog-wechat-code strong {
  font-size: 30px;
  letter-spacing: .18em;
}

.account-dialog-refresh { width: 100%; margin-top: 8px; }

.export-decision-dialog p {
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.export-decision-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.export-decision-actions button {
  min-height: 44px;
  font-family: inherit;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
  border: 1px solid var(--ink);
  border-radius: var(--container-radius);
}

.export-decision-actions button:active,
.account-dialog .export-dialog-close:active { filter: brightness(.9); }

.export-decision-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.export-decision-actions button:focus-visible,
.account-dialog .export-dialog-close:focus-visible {
  outline: 3px solid rgb(122 133 73 / 58%);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .account-dialog .account-dialog-providers button:hover,
  .export-decision-actions button:hover {
    color: var(--ink);
    border-color: var(--ink);
    background: rgb(203 213 114 / 58%);
  }

  .account-dialog :is([data-account-close], .export-dialog-close):hover { color: #7a8549; }
}

@media (max-width: 743px) {
  .account-dialog-panel { padding: 18px; }
}

/* Checkout address form shared with the personal center. */
.checkout-dialog { --checkout-muted:#aaa9a2; --checkout-surface:#151613; --checkout-error:#ffb5aa; box-sizing:border-box; overflow:auto; font-size: var(--type-t3-size); font-weight: var(--type-t3-weight); line-height: var(--type-t3-line-height); letter-spacing: var(--type-t3-letter-spacing); width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 28px; color: var(--cream); border: var(--container-border); border-radius: var(--container-radius); background: var(--checkout-surface); }
.checkout-dialog h2 { font-size: var(--type-t2-size); font-weight: var(--type-t2-weight); line-height: var(--type-t2-line-height); letter-spacing: var(--type-t2-letter-spacing); }
.checkout-dialog :is(h2, p) { margin: 0; }
.checkout-dialog .checkout-contact-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.checkout-dialog .checkout-field { display: grid; gap: 4px; min-width: 0; }
.checkout-dialog .checkout-field :is(input, textarea) { width: 100%; box-sizing: border-box; }
.checkout-dialog .checkout-field input[readonly] { color: var(--checkout-muted); }
.checkout-dialog .checkout-field [aria-invalid="true"] { border-color: var(--checkout-error); }
.checkout-dialog .checkout-address-fields { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--container-radius); }
.checkout-dialog .checkout-address-fields legend { padding-inline: 6px; }
.checkout-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.checkout-dialog button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--container-radius); color: var(--cream); background: transparent; font: inherit; cursor: pointer; transition: background 160ms ease, border-color 160ms ease; }
.checkout-dialog button:hover { border-color: var(--acid); background: rgb(203 213 114 / 10%); }
.checkout-dialog :is(button, input, select, textarea, a):focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }
.checkout-dialog button:disabled { opacity: .4; cursor: not-allowed; }
.checkout-dialog :is(input, select, textarea) { min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--container-radius); color: var(--cream); background: var(--ink); font: inherit; }
.checkout-dialog .checkout-primary { color: var(--ink); background: var(--acid); border-color: var(--acid); }
.checkout-dialog .checkout-primary:hover { color: var(--ink); background: var(--cream); }
.checkout-dialog::backdrop { background: rgb(0 0 0 / 65%); backdrop-filter: blur(8px); }
.checkout-dialog form { display: grid; gap: 12px; }
#checkoutAddressDialog { padding: 16px; }
#checkoutAddressForm { gap: 8px; }
.checkout-dialog header { margin-bottom: 8px; }
.checkout-dialog header button { width: 44px; padding: 0; flex-shrink: 0; }
.checkout-dialog label { margin-top: 6px; }
#checkoutAddressForm label { margin-top: 0; }
.checkout-dialog button[type=submit] { margin-top: 6px; }
@media(max-width:743px) { .checkout-dialog { padding: 20px; } .checkout-dialog :is(input,select,textarea) { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { .checkout-dialog button { transition: none; } }
.checkout-dialog .checkout-error { color:var(--checkout-error); }
.checkout-dialog [hidden] { display:none; }

/* Shared personal-center and administrator profile content. */
.account-profile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto repeat(4,minmax(52px,auto)); column-gap:32px; padding:24px; }
.account-profile-grid-admin { grid-template-rows:auto repeat(5,minmax(52px,auto)); }
.account-profile-grid .account-profile-section { display:grid; grid-template-rows:subgrid; grid-row:span 5; padding:0; border:0; }
.account-profile-grid-admin .account-profile-section { grid-row:span 6; }
.account-profile-grid h2 { padding-bottom:12px; }
.account-profile-section { min-width:0; padding:24px; border:0; }
.account-profile-section > header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.account-profile-section h2 { margin:0; font-size:var(--type-t2-size); font-weight:var(--type-t2-weight); line-height:var(--type-t2-line-height); letter-spacing:var(--type-t2-letter-spacing); }
.account-profile-fields { display:contents; }
.account-profile-fields > div { display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; align-items:center; min-height:52px; box-sizing:border-box; padding:4px 0; border:0; }
.account-profile-fields dt { color:rgb(252 252 251 / 62%); }
.account-profile-fields dd { margin:0; overflow-wrap:anywhere; }
.account-profile-fields :is(dt,dd), .account-profile-section, .account-profile-header p { font-size:var(--type-t3-size); font-weight:var(--type-t3-weight); line-height:var(--type-t3-line-height); letter-spacing:var(--type-t3-letter-spacing); }
.account-profile-fields .personal-center-field-action { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.account-profile-fields button { min-height:44px; padding:0 8px; color:var(--acid); background:transparent; border:0; text-decoration:underline; text-underline-offset:4px; font:inherit; cursor:pointer; }
.account-profile-header { padding:16px 24px; border-bottom:1px solid rgb(252 252 251 / 12%); }
.account-profile-header :is(h1,p) { margin:0; }
.account-profile-header p { color:rgb(252 252 251 / 62%); margin-bottom:8px; }
.account-profile-header h1 { font-size:var(--type-t1-size); font-weight:var(--type-t1-weight); line-height:var(--type-t1-line-height); letter-spacing:var(--type-t1-letter-spacing); }
.profile-address-list { display:grid; gap:12px; margin-top:16px; }
.profile-address-card { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px; background:var(--ink); border:1px solid var(--line); border-radius:var(--container-radius); overflow-wrap:anywhere; }
.profile-address-card p { margin:4px 0 0; color:rgb(252 252 251 / 62%); white-space:pre-line; }
.profile-address-card > div { min-width:0; }
.profile-address-card a { color:var(--acid); flex-shrink:0; }
.profile-address-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.profile-default-address { display:inline-flex; align-items:center; gap:8px; min-height:44px; white-space:nowrap; cursor:pointer; }
.profile-default-address input { width:18px; height:18px; margin:0; accent-color:var(--acid); }
.profile-outline-button { min-height:44px; padding:8px 12px; color:var(--cream); background:transparent; border:1px solid var(--line); border-radius:var(--container-radius); font:inherit; cursor:pointer; }
.profile-outline-button:hover { border-color:var(--acid); }
.profile-resource-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.profile-resource-grid a { display:grid; gap:10px; padding:20px; border:1px solid var(--line); border-radius:var(--container-radius); background:var(--ink); color:var(--cream); text-decoration:none; }
.profile-resource-grid strong { color:var(--acid); font-size:var(--type-t1-size); font-weight:var(--type-t1-weight); line-height:var(--type-t1-line-height); letter-spacing:var(--type-t1-letter-spacing); }
.profile-address-dialog { width:min(640px,calc(100% - 32px)); max-height:calc(100dvh - 48px); padding:24px; overflow:auto; color:var(--cream); background:#151613; border:1px solid var(--line); border-radius:var(--container-radius); font-size:var(--type-t3-size); font-weight:var(--type-t3-weight); line-height:var(--type-t3-line-height); letter-spacing:var(--type-t3-letter-spacing); }
.profile-address-dialog::backdrop { background:rgb(0 0 0 / 72%); backdrop-filter:blur(8px); }
.profile-address-dialog header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.profile-address-dialog h2 { margin:0; font-size:var(--type-t2-size); font-weight:var(--type-t2-weight); line-height:var(--type-t2-line-height); letter-spacing:var(--type-t2-letter-spacing); }
.profile-address-dialog header button { width:44px; height:44px; color:var(--cream); background:transparent; border:1px solid var(--line); border-radius:var(--container-radius); font:inherit; cursor:pointer; }
.profile-address-dialog footer { display:flex; justify-content:flex-end; margin-top:20px; }
.profile-address-dialog :is(button,a):focus-visible { outline:2px solid var(--acid); outline-offset:3px; }
.profile-address-dialog [role=status]:empty { display:none; }
:is(.account-profile-section,.account-profile-header) :is(button,a):focus-visible { outline:2px solid var(--acid); outline-offset:3px; }
@media(max-width:743px) {
 .account-profile-grid { grid-template-columns:minmax(0,1fr); gap:24px; padding:16px; grid-template-rows:none; }
 .account-profile-grid .account-profile-section { grid-row:auto; grid-template-rows:auto; row-gap:0; }
 .account-profile-section { padding:16px; }
 .account-profile-fields > div { grid-template-columns:100px minmax(0,1fr); }
 .profile-address-card { align-items:flex-start; flex-direction:column; }
}