/* 2026-10-16：会员、额度卡和优惠码在统一账户弹窗中完成。 */
.has-workspace-dialog { overflow: hidden; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: var(--ws-space-6); background: var(--ws-overlay); backdrop-filter: blur(var(--ws-space-1)); }
.dialog { width: 100%; max-width: var(--ws-dialog); max-height: calc(100dvh - 2 * var(--ws-space-6)); display: flex; flex-direction: column; background: var(--ws-surface); border: var(--ws-border-width) solid var(--ws-border); border-radius: var(--ws-radius-lg); box-shadow: var(--ws-dialog-shadow); overflow: hidden; outline: none; }
.dialog-header { display: flex; justify-content: space-between; align-items: center; gap: var(--ws-space-3); padding: var(--ws-space-4) var(--ws-space-5); border-bottom: var(--ws-border-width) solid var(--ws-border); }
.dialog-header h2 { font-size: var(--ws-subtitle); font-weight: 600; }
.dialog-body { padding: var(--ws-space-5); overflow-y: auto; }
.dialog-footer { display: flex; justify-content: flex-end; gap: var(--ws-space-3); padding: var(--ws-space-3) var(--ws-space-5); border-top: var(--ws-border-width) solid var(--ws-border); }
.dialog-error { margin: 0 var(--ws-space-7) var(--ws-space-6); color: var(--ws-error); background: var(--ws-error-surface); border-radius: var(--ws-radius-sm); padding: var(--ws-space-3) var(--ws-space-4); overflow-wrap: anywhere; }
.dialog-status { margin: var(--ws-space-4) var(--ws-space-7) 0; color: var(--ws-accent); background: var(--ws-selected); border-radius: var(--ws-radius-sm); padding: var(--ws-space-3) var(--ws-space-4); overflow-wrap: anywhere; }
.question-dialog { max-width: var(--ws-question-dialog); }
.question-dialog .question-content { padding-bottom: var(--ws-space-4); }
.account-tabs { display: flex; flex-shrink: 0; gap: var(--ws-space-1); padding: var(--ws-space-4) var(--ws-space-5) 0; overflow-x: auto; }
.account-tabs button { flex: 1; min-width: max-content; border: 0; padding: var(--ws-space-3); border-radius: var(--ws-radius-sm); background: transparent; color: var(--ws-secondary); }
.account-tabs button:hover { background: var(--ws-hover); }
.account-tabs button.is-active { background: var(--ws-accent-soft); color: var(--ws-accent); font-weight: 600; }
.account-form { display: flex; flex-direction: column; gap: var(--ws-space-3); }
.account-form label { color: var(--ws-secondary); }
.account-form input, .account-form select { width: 100%; min-height: var(--ws-control); padding: var(--ws-space-3) var(--ws-space-4); border: var(--ws-border-width) solid var(--ws-border); border-radius: var(--ws-radius); background: var(--ws-surface); }
.account-form input:focus { border-color: var(--ws-border-strong); }
.account-form label:not(:first-child) { margin-top: var(--ws-space-3); }
.account-form > .button { margin-top: var(--ws-space-5); width: 100%; }
.auth-code-field { display: flex; align-items: stretch; gap: var(--ws-space-3); }
.auth-code-field input { flex: 1; min-width: 0; }
.auth-code-field button { flex-shrink: 0; }
.auth-mode-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--ws-space-4); margin-top: var(--ws-space-4); }
.account-form .auth-agreement { display: flex; align-items: flex-start; gap: var(--ws-space-3); color: var(--ws-secondary); margin-top: var(--ws-space-4); }
.account-form .auth-agreement input { flex: 0 0 var(--ws-icon); width: var(--ws-icon); min-height: var(--ws-icon); padding: 0; margin-top: var(--ws-space-1); }
.account-summary { display: flex; flex-direction: column; align-items: center; gap: var(--ws-space-5); padding: var(--ws-space-5) 0; }
.account-avatar { width: var(--ws-space-11); height: var(--ws-space-11); border-radius: 50%; display: grid; place-items: center; color: var(--ws-accent); background: var(--ws-accent-soft); }
.account-avatar .icon { width: var(--ws-space-8); height: var(--ws-space-8); }
.account-summary h3 { font-size: var(--ws-subtitle); font-weight: 600; }
.membership-plans { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--ws-space-4); }
.membership-plan { display: flex; flex-direction: column; gap: var(--ws-space-4); padding: var(--ws-space-6) var(--ws-space-5); border: var(--ws-border-width) solid var(--ws-border); border-radius: var(--ws-radius-lg); }
.plan-mark { display: grid; place-items: center; width: var(--ws-space-9); height: var(--ws-space-9); background: var(--ws-gold-soft); color: var(--ws-gold); border-radius: var(--ws-radius); }
.plan-mark .icon { width: var(--ws-space-6); height: var(--ws-space-6); }
.membership-plan h3 { font-size: var(--ws-subtitle); font-weight: 600; }
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ws-space-1); }
.plan-price strong { font-size: var(--ws-plan-price); font-weight: 600; letter-spacing: -.04em; }
.plan-price > span { color: var(--ws-muted); }
.membership-plan .button { margin-top: var(--ws-space-3); padding: var(--ws-space-3); }
.panel-empty { grid-column: 1/-1; color: var(--ws-muted); text-align: center; padding: var(--ws-space-8); }
.payment-view { display: flex; flex-direction: column; align-items: center; gap: var(--ws-space-4); text-align: center; }
.payment-view h3 { font-size: var(--ws-subtitle); font-weight: 600; }
.payment-price { font-size: var(--ws-plan-price); font-weight: 600; }
.payment-qr { display: block; width: var(--ws-qr); height: var(--ws-qr); max-width: 100%; object-fit: contain; border: var(--ws-border-width) solid var(--ws-border); border-radius: var(--ws-radius); padding: var(--ws-space-3); }
.payment-qr canvas, .payment-qr img, .payment-qr svg { width: 100%; height: 100%; }
.payment-success { display: grid; place-items: center; width: var(--ws-space-11); height: var(--ws-space-11); background: var(--ws-selected); color: var(--ws-success); border-radius: 50%; }
.payment-success .icon { width: var(--ws-space-8); height: var(--ws-space-8); }
.order-number { color: var(--ws-muted); overflow-wrap: anywhere; }
.quota-balance, .binding-summary { padding: var(--ws-space-5); margin-bottom: var(--ws-space-4); border: var(--ws-border-width) solid var(--ws-border); border-radius: var(--ws-radius); display: flex; justify-content: space-between; align-items: center; gap: var(--ws-space-4); }
.quota-balance > span, .binding-summary > span { color: var(--ws-secondary); }
.quota-balance strong { font-size: var(--ws-subtitle); font-weight: 600; }
.cloud-storage-usage { width: 100%; margin: 0; padding: 0; text-align: left; }
.cloud-storage-summary, .cloud-storage-empty { display: flex; align-items: center; justify-content: space-between; gap: var(--ws-space-3); }
.cloud-storage-amount { min-width: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cloud-storage-amount > strong { font-weight: 600; }
.cloud-storage-amount > span, .cloud-storage-empty { color: var(--ws-secondary); }
.cloud-storage-refresh { color: var(--ws-muted); }
.cloud-storage-usage progress { display: block; width: 100%; height: var(--ws-space-1); margin-top: var(--ws-space-2); border: 0; border-radius: var(--ws-radius-pill); overflow: hidden; accent-color: var(--ws-gold); }
.cloud-storage-usage progress::-webkit-progress-bar { background: var(--ws-subtle); border-radius: var(--ws-radius-pill); }
.cloud-storage-usage progress::-webkit-progress-value { background: var(--ws-gold); border-radius: var(--ws-radius-pill); }
.cloud-storage-usage progress::-moz-progress-bar { background: var(--ws-gold); border-radius: var(--ws-radius-pill); }
.cloud-storage-usage .cloud-storage-limit { color: var(--ws-error); font-size: var(--ws-small); margin-top: var(--ws-space-2); }
.cloud-storage-empty { width: 100%; margin: 0; }
.binding-summary strong { overflow-wrap: anywhere; }
.sync-panel { display: flex; flex-direction: column; align-items: stretch; gap: var(--ws-space-4); }
.sync-panel h3 { font-size: var(--ws-subtitle); font-weight: 600; }
.sync-panel p { color: var(--ws-secondary); }
.sync-illustration { display: grid; place-items: center; width: var(--ws-space-10); height: var(--ws-space-10); border-radius: var(--ws-radius-lg); background: var(--ws-accent-soft); color: var(--ws-accent); }
.sync-illustration .icon { width: var(--ws-space-7); height: var(--ws-space-7); }
.cloud-storage-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ws-space-3); }
.consent-control { display: flex; align-items: center; gap: var(--ws-space-2); cursor: pointer; min-height: var(--ws-control); }
.sync-panel a { display: inline-flex; align-items: center; gap: var(--ws-space-1); font-size: var(--ws-small); }
@media (max-width: 760px) {
  .modal-backdrop { padding: var(--ws-space-3); }
  .dialog { max-height: calc(100dvh - 2 * var(--ws-space-3)); }
  .dialog-header, .dialog-body, .dialog-footer { padding: var(--ws-space-4); }
  .account-form :is(input, select) { font-size: var(--ws-mobile-input-font); }
  .account-tabs { padding: var(--ws-space-3) var(--ws-space-3) 0; }
  .account-tabs button { padding: var(--ws-space-3) var(--ws-space-2); }
  .dialog-error { margin: 0 var(--ws-space-5) var(--ws-space-5); }
  .dialog-status { margin: var(--ws-space-4) var(--ws-space-5) 0; }
  .membership-plans { grid-template-columns: 1fr; }
  .membership-plan { padding: var(--ws-space-5); }
}