/* 账户页沿用站点的石灰背景；冷灰绿仅用于地址编辑卡片，避免改变页面外层的品牌氛围。 */
.account-address-card { --address-ink: #26332f; --address-muted: #5c6a65; --address-line: #c3d0ca; --address-accent: #2f655b; }
.account-main { padding-top: 12px; padding-bottom: 28px; }.account-paper { width: min(100%,1080px); margin: 0 auto; padding: 16px clamp(24px,3vw,40px) 24px; border-radius: 14px; background: #fff; box-shadow: 8px 16px 32px #26332f18; }
/* 返回仍保留完整点击区，仅收紧它与账户标题之间的空白，不影响其他页面。 */
.account-paper .page-return-row { margin-bottom: 6px; }
.account-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.account-head h1 { margin-top: 0; font: 400 clamp(32px,3vw,42px)/1.1 Georgia,serif; letter-spacing: -.045em; }
.account-identity { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.account-signout { flex: 0 0 auto; min-height: 44px; border: 0; padding: 10px 0; background: none; color: var(--ink); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.account-signout:hover { color: var(--accent); }

.account-body { display: grid; grid-template-columns: 140px minmax(0,760px); gap: clamp(24px,4vw,48px); align-items: start; padding-top: 16px; }
.account-tabs { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.account-tabs button { min-width: 92px; min-height: 44px; border: 0; border-bottom: 2px solid transparent; padding: 10px 12px; background: transparent; color: var(--muted); font: 500 12px/1.5 Manrope,sans-serif; text-align: left; }
.account-tabs button[aria-selected="true"] { border-bottom-color: var(--ink); background: #eef4f1; color: var(--ink); font-weight: 600; }
.account-tabs button:hover,.account-tabs button:focus-visible { border-bottom-color: var(--accent); color: var(--ink); }
.account-content { min-width: 0; max-width: 760px; }
.account-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.account-section-head h2 { font: 400 26px/1.15 Georgia,serif; letter-spacing: -.03em; }
.account-section-head p { max-width: 30ch; font-size: 12px; line-height: 1.7; color: var(--muted); text-align: right; }
.account-loading,.account-error,.account-empty { padding: 34px 0 26px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.8; color: var(--muted); }
.orders-list { margin-top: 24px; }
.orders-refresh { margin-top: 20px; font-size: 13px; line-height: 1.7; }
.orders-refresh button { min-height: 44px; margin-top: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink); font: inherit; }
.orders-refresh button:disabled { opacity: .65; cursor: wait; }
.order-refresh-status { padding: 12px 28px 0; font-size: 13px; line-height: 1.6; }
.order-refresh-status:empty { display: none; }
.order-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px 32px; align-items: center; padding: 20px 0; border-top: 1px solid var(--line); }
.order-row:first-child { border-top: 0; }
.order-row-main { min-width: 0; }
.order-number { font: 500 13px/1.5 Manrope,sans-serif; color: var(--ink); }
.order-meta { margin-top: 5px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.order-receipt { margin-top: 4px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.order-row-side { display: flex; align-items: center; gap: clamp(18px,3vw,40px); }
.order-status { font-size: 9px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
.order-total { min-width: 72px; font: 400 20px/1 Georgia,serif; text-align: right; color: var(--ink); }
.order-view { min-height: 44px; border: 1px solid var(--ink); padding: 11px 14px; background: transparent; color: var(--ink); font: 500 11px/1 Manrope,sans-serif; white-space: nowrap; }
.order-view:hover { background: var(--ink); color: #fffefa; }
.account-empty a,.account-empty button { border: 0; padding: 0; background: none; color: var(--ink); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.account-empty a:hover,.account-empty button:hover { color: var(--accent); }

.account-address-card { max-width: 760px; margin-top: 12px; padding: 16px 20px; border: 1px solid var(--address-line); border-radius: 12px; background: #f0f5f2; }
.address-form { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(92px,1.4fr) minmax(100px,1fr); gap: 10px 16px; }
.address-form .field { gap: 4px; }
.address-form .address-field-wide { grid-column: 1 / -1; }
.address-name-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.address-form .field { min-width: 0; }
.address-help { font: 12px/1.6 Manrope,sans-serif; color: var(--address-muted); }
.address-country { font: 12px/1.4 Manrope,sans-serif; color: var(--address-muted); }
.address-country strong { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--address-ink); }
.address-form input[aria-invalid="true"],.address-form select[aria-invalid="true"] { border-color: #8a3f2b; }
.address-form label { font-size: 12px; line-height: 1.4; color: var(--address-ink); }
.address-optional { color: var(--address-muted); }
.address-form input,.address-form select { width: 100%; min-height: 44px; border: 1px solid var(--address-line); border-radius: 8px; background: #fff; padding: 10px 12px; color: var(--address-ink); font: 13px/1.4 Manrope,sans-serif; }
.address-form select { appearance: auto; padding-right: 10px; }
.address-form input:focus,.address-form select:focus { outline: 2px solid var(--address-accent); outline-offset: 1px; border-color: var(--address-accent); }
.address-save { grid-column: 1 / -1; justify-self: start; min-height: 44px; margin-top: 2px; border: 1px solid var(--address-ink); border-radius: 8px; padding: 11px 16px; background: var(--address-ink); color: #fffefa; font: 600 12px/1 Manrope,sans-serif; }
.address-save:hover,.address-save:focus-visible { background: #1f5148; }
.address-save:disabled { cursor: wait; opacity: .72; }
.address-form-status { grid-column: 1 / -1; min-height: 1.7em; font-size: 12px; line-height: 1.7; color: var(--address-accent); }
.address-form-status:empty { display: none; }
/* 街道、公寓和电话保持整行填写；提交操作独立靠右，不与任何输入框挤在同一行。 */
.address-form > .address-save[type="submit"] { justify-self: end; }
.verification-note { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding: 18px; background: #f7f6f1; border: 1px solid var(--line); }
.verification-title { font: 400 19px/1.2 Georgia,serif; }
.verification-copy { max-width: 42ch; margin-top: 6px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.verification-form { margin-top: 12px; }
.verification-form > label { display: block; margin-bottom: 5px; font-size: 12px; color: var(--ink); }
.verification-code-row { position: relative; max-width: 260px; }
.verification-form input { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 0; background: #fff; padding: 8px 112px 8px 10px; color: var(--ink); font: 500 15px/1 Manrope,sans-serif; letter-spacing: .12em; }
.verification-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.verification-resend { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); min-height: 32px; border: 0; padding: 6px 7px; background: transparent; color: var(--ink); font: 500 11px/1.2 Manrope,sans-serif; white-space: nowrap; }
.verification-resend:hover,.verification-resend:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.verification-resend:disabled { color: var(--muted); cursor: wait; text-decoration: none; }
.verification-submit { margin-top: 8px; min-height: 38px; border: 1px solid var(--ink); padding: 0 13px; background: transparent; color: var(--ink); font: 500 11px/1 Manrope,sans-serif; }
.verification-submit:hover { background: var(--ink); color: #fffefa; }
.account-status { margin-top: 18px; font-size: 12px; line-height: 1.7; color: var(--accent); }
.account-status:empty { display: none; }

.order-dialog { width: min(660px,calc(100% - 32px)); max-height: min(82svh,760px); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--ink); box-shadow: 16px 24px 60px #302a2330; }
.order-dialog::backdrop { background: #302a2373; }
.order-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 28px 18px; border-bottom: 1px solid var(--line); }
.order-dialog-head h2 { margin-top: 8px; font: 400 28px/1.1 Georgia,serif; letter-spacing: -.03em; }
.order-dialog-close { border: 0; padding: 0; background: none; color: var(--ink); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.order-dialog-body { overflow: auto; max-height: calc(82svh - 100px); padding: 0 28px 28px; }
.order-dialog .order-meta { margin-top: 10px; }
.order-items { margin-top: 18px; border-top: 1px solid var(--line); }
.order-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.order-item-name { font-size: 13px; line-height: 1.5; }
.order-item-meta { margin-top: 4px; font-size: 12px; color: var(--muted); }
.order-item-price { font-size: 13px; text-align: right; }
.order-totals { margin-top: 18px; }
.order-totals div { display: flex; justify-content: space-between; gap: 20px; padding: 4px 0; font-size: 12px; color: var(--muted); }
.order-totals .order-total-line { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink); }
.order-address { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.8; color: var(--muted); }
.order-address strong { display: block; margin-bottom: 3px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.order-dialog-actions { display: flex; justify-content: flex-end; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.order-cancel { min-height: 40px; border: 1px solid #9b4e36; border-radius: 8px; padding: 10px 14px; background: transparent; color: #8a3f2b; font: 600 12px/1 Manrope,sans-serif; }
.order-cancel:hover,.order-cancel:focus-visible { background: #fff4ef; }
.order-cancel:disabled { cursor: wait; opacity: .6; }

/* 登录表单复用品牌白色面板，错误和密码可见性控件不改变原有业务流程。 */
.login-form-column .field > label { font-size: 12px; line-height: 1.4; color: var(--ink); }
.password-field { position: relative; display: flex; }
.password-field input { padding-right: 66px; }
.password-toggle { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); border: 0; padding: 7px 4px; background: transparent; color: var(--muted); font: 500 10px/1 Manrope,sans-serif; }
.password-toggle:hover,.password-toggle:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.field input[aria-invalid="true"] { border-color: #9b4e36; }
.login-terms { margin: -2px 0 2px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.login-terms a { color: var(--ink); text-underline-offset: 3px; }
.login-note { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.7; color: var(--muted); }
.form-status[data-tone="error"] { color: #8a3f2b; }
.form-status[data-tone="success"] { color: #4e603f; }
.info-button[disabled] { cursor: wait; opacity: .72; }
.login-token-note { margin-top: 2px; padding: 12px 14px; border: 1px solid var(--line); background: #f7f6f1; font-size: 12px; line-height: 1.7; color: var(--muted); }

@media (max-width: 760px) {
  .account-paper { padding: 12px 20px 20px; }
  /* 手机把退出操作放在身份区右侧，减少无效纵向留白；长邮箱允许换行。 */
  .account-head { flex-direction: row; gap: 12px; }
  .account-head > div { min-width: 0; }
  .account-head h1 { font-size: 32px; line-height: 1.12; }
  .account-identity { overflow-wrap: anywhere; }
  .account-body { grid-template-columns: 1fr; gap: 12px; }
  .account-tabs { flex-direction: row; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
  .account-tabs button { flex: 1; text-align: center; }
  .account-section-head { flex-direction: column; gap: 8px; }
  .account-section-head p { text-align: left; }
  .order-row { grid-template-columns: 1fr; gap: 12px; }
  .order-row-side { justify-content: space-between; }
  .verification-note { align-items: flex-start; flex-direction: column; }
  .verification-code-row { max-width: 100%; }
  .verification-submit { min-height: 40px; }
  .account-address-card { max-width: none; padding: 18px 14px; }
  .address-form { grid-template-columns: 1fr; }
  .address-name-row { grid-template-columns: 1fr; }
  .address-form input,.address-form select { font-size: 16px; }
  .address-form .address-field-wide,.address-save,.address-form-status { grid-column: auto; }
  .order-dialog-head { padding: 20px 20px 16px; }
  .order-dialog-body { padding: 0 20px 22px; }
  .order-dialog { overflow-wrap: anywhere; }
  .order-dialog-head > div { min-width: 0; }
  .order-dialog-close { min-height: 44px; min-width: 44px; flex-shrink: 0; }
  .order-row-side { flex-wrap: wrap; gap: 12px; }
  .order-number,.order-meta,.order-receipt { overflow-wrap: anywhere; }
  .order-status { font-size: 11px; }
  .address-save { width: 100%; }
}

@media (max-width: 420px) {
  .account-paper { padding-inline: 16px; }
  .account-head h1 { font-size: 30px; }
  .address-form input { min-width: 0; }
}