.personal-center-layout { margin-block: 18px; }

.personal-center-card {
  width: min(1100px, 100%);
  margin-inline: auto;
  padding: 0;
  color: var(--cream);
  background: #151613;
}

.personal-center-footer {
  display: flex;
  margin-top: 0;
  padding: 18px 24px;
  gap: 24px;
  justify-content: flex-end;
  border-top: 0;
}

.personal-center-footer button {
  padding: 0;
  color: rgb(252 252 251 / 68%);
  border: 0;
  background: transparent;
  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);
  cursor: pointer;
}

.personal-dialog-primary {
  min-height: 44px;
  padding: 8px 14px;
  color: var(--ink);
  border: var(--container-border);
  border-radius: 10px;
  background: var(--acid);
  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);
  cursor: pointer;
}

.personal-center-status:empty { display: none; }
.personal-center-status { margin: 16px 24px; color: var(--acid); }

.personal-center-dialog {
  width: min(520px, calc(100% - 28px));
  max-height: calc(100dvh - 28px);
  overflow: auto;
  padding: 0;
  color: var(--ink);
  border: var(--container-border);
  border-radius: 14px;
  background: var(--cream);
}

.personal-center-dialog::backdrop {
  background: rgb(0 0 0 / 72%);
  backdrop-filter: blur(10px);
}

.personal-center-dialog-form {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.personal-center-dialog-form > header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
}

.personal-center-dialog-form :is(h2, p) { margin: 0; }
.personal-center-dialog-form 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); }
.personal-center-dialog-form :is(p, label, input, button, output, strong, small) { 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); }
.personal-center-dialog-form label { display: block; margin-bottom: 6px; }

.personal-center-dialog-form input {
  width: 100%;
  min-height: 46px;
  padding: 9px 12px;
  color: var(--ink);
  border: 1px solid rgb(8 8 8 / 28%);
  border-radius: 10px;
  background: #fff;
}

.personal-dialog-close {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  color: var(--ink);
  border: 1px solid rgb(8 8 8 / 28%);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.personal-dialog-status { min-height: 1.5em; color: #536019; }
.personal-wechat-dialog img { width: min(300px, 100%); height: auto; margin-inline: auto; }
.personal-wechat-dialog output { padding: 12px; text-align: center; border-radius: 10px; background: rgb(117 127 74 / 15%); font-size: var(--type-t2-size); font-weight: var(--type-t2-weight); line-height: var(--type-t2-line-height); letter-spacing: .18em; }

.personal-center-dialog :is(button, input):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.personal-center-dialog button:active { filter: brightness(.82); }

.personal-center-dialog button:disabled { cursor: wait; opacity: .6; }

@media (hover: hover) and (pointer: fine) {
  .personal-center-dialog button:hover { filter: brightness(.92); }
}

@media (max-width: 743px) {
  .personal-center-card { padding: 0; }

  .personal-center-footer { justify-content: flex-start; }
  .personal-center-dialog-form { padding: 16px; }
}