/* PhoenixCMS 公网会员弹窗与交互 */
.auth-modal-open {
  overflow: hidden;
}

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.auth-modal[hidden] {
  display: none !important;
}

.auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}

.auth-modal-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
  padding: 24px;
}

.auth-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.auth-modal-close:hover {
  background: #e5e7eb;
  color: #111827;
}

.auth-modal-title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  color: #111827;
}

.auth-modal-desc {
  margin: 0 0 16px;
  font-size: 0.875rem;
  color: #6b7280;
}

.auth-modal-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.auth-modal-tab {
  flex: 1;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #374151;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.875rem;
  cursor: pointer;
}

.auth-modal-tab.is-active {
  border-color: var(--primary, #409eff);
  background: #ecf5ff;
  color: var(--primary, #409eff);
  font-weight: 600;
}

.auth-modal-pane[hidden] {
  display: none !important;
}

.auth-modal .form-field {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 0.875rem;
}

.auth-modal .form-field input,
.auth-modal .form-field textarea {
  width: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
}

.auth-modal .form-field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}

.comment-modal .auth-modal-panel {
  max-width: 480px;
}

.comment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

.comment-login-tip {
  margin: 0;
  color: #6b7280;
  font-size: 0.875rem;
}

.comment-actions .btn-outline-dark {
  border: 1px solid #dcdfe6;
  background: #fff;
  color: #374151;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
}

.comment-actions .btn-outline-dark:hover {
  border-color: var(--primary, #409eff);
  color: var(--primary, #409eff);
}

.password-input-wrap {
  position: relative;
  display: block;
}

.password-input-wrap input {
  padding-right: 44px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  border-radius: 6px;
}

.password-toggle-icon {
  display: block;
  flex-shrink: 0;
}

.password-toggle:hover,
.password-toggle.is-visible {
  color: var(--primary, #409eff);
}

.auth-modal .form-error {
  color: #dc2626;
  background: #fef2f2;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 0.875rem;
}

.auth-modal .btn-block {
  width: 100%;
  margin-top: 4px;
  border: none;
  cursor: pointer;
}

.auth-modal-switch {
  margin-top: 14px;
  text-align: center;
  font-size: 0.875rem;
  color: #6b7280;
}

.auth-modal-switch button {
  border: none;
  background: none;
  color: var(--primary, #409eff);
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.auth-modal-switch button:hover {
  text-decoration: underline;
}

[data-auth-open] {
  cursor: pointer;
}

/* VIP 徽章（导航 / 昵称旁） */
.vip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  vertical-align: middle;
  color: #fff;
  background: linear-gradient(135deg, #d4af37, #b8860b);
  box-shadow: 0 1px 4px rgba(184, 134, 11, 0.35);
}

.vip-badge--lg {
  min-width: 42px;
  height: 22px;
  padding: 0 8px;
  font-size: 11px;
  border-radius: 5px;
}

.vip-badge--svip {
  background: linear-gradient(135deg, #5c2e0b, #1a1208);
  box-shadow: 0 1px 4px rgba(26, 18, 8, 0.35);
}

.member-nav-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 个人中心 / 会员中心（全主题共用） */
.account-hub { display: flex; flex-direction: column; gap: 12px; margin: 0 0 28px; max-width: 100%; }
.account-page-shell { --account-radius: 16px; width: 100%; max-width: 960px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; overflow-x: clip; }
body:has(.account-page-shell) { background: #edf1f7; }
.account-hero { position: relative; overflow: hidden; border-radius: var(--account-radius); color: #fff; padding: 24px 20px 20px; background: linear-gradient(145deg, var(--primary, #409eff) 0%, #5b6fd8 48%, #7c5cbf 100%); box-shadow: 0 12px 32px rgba(64, 158, 255, 0.18); }
.account-hero-bg { position: absolute; inset: 0; background: radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.22), transparent 36%), radial-gradient(circle at 8% 88%, rgba(253, 230, 138, 0.18), transparent 42%); pointer-events: none; }
.account-hero-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.account-hero-profile { display: flex; align-items: flex-start; gap: 16px; flex: 1 1 280px; min-width: 0; }
.account-hero-avatar { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; color: #fff; background: rgba(255, 255, 255, 0.18); border: 2px solid rgba(255, 255, 255, 0.42); flex-shrink: 0; }
.account-hero-meta { flex: 1; min-width: 0; }
.account-hero-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.25rem; margin-bottom: 6px; line-height: 1.3; }
.account-hero-name strong { font-weight: 700; word-break: break-word; }
.account-hero-sub { margin: 0; font-size: 0.875rem; opacity: 0.9; line-height: 1.5; word-break: break-all; }
.account-hero-vip-line { margin: 8px 0 0; font-size: 0.8125rem; color: #fde68a; display: inline-block; max-width: 100%; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.14); }
.account-hero-progress { margin-top: 12px; max-width: 100%; }
.account-hero-progress-bar { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); overflow: hidden; margin-bottom: 6px; }
.account-hero-progress-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fde68a, #fff); }
.account-hero-progress-text { font-size: 0.75rem; opacity: 0.85; display: block; }
.account-hero-vip-entry { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; padding: 12px 14px; border-radius: 14px; text-decoration: none; color: #5c3d00; background: linear-gradient(180deg, #fff7d6 0%, #f5d565 100%); font-weight: 700; font-size: 0.8125rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); }
.account-hero-vip-entry:hover { text-decoration: none; color: #5c3d00; }
.account-hero-vip-icon { width: 20px; height: 20px; max-width: 20px; max-height: 20px; flex: 0 0 auto; display: block; }
.account-hero-vip-entry svg { width: 20px; height: 20px; max-width: 20px; max-height: 20px; flex: 0 0 auto; display: block; }
.account-stats { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: rgba(255, 255, 255, 0.14); border-radius: 12px; overflow: hidden; }
.account-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px 8px; text-align: center; color: #fff; text-decoration: none; border-right: 1px solid rgba(255, 255, 255, 0.12); min-width: 0; }
.account-stat:last-child { border-right: none; }
a.account-stat:hover { background: rgba(255, 255, 255, 0.08); text-decoration: none; color: #fff; }
.account-stat strong { font-size: 1.25rem; color: #fff; line-height: 1.2; font-weight: 700; }
.account-stat span { font-size: 0.75rem; color: rgba(255, 255, 255, 0.82); }
.account-main { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.account-panel { background: #fff; border-radius: var(--account-radius); padding: 18px 20px; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06); border: 1px solid #ebeef5; width: 100%; min-width: 0; box-sizing: border-box; }
.account-panel--flush { padding-bottom: 8px; }
.account-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.account-panel-head h2 { margin: 0; font-size: 1rem; font-weight: 700; color: #1f2937; }
.account-panel-more { font-size: 0.8125rem; color: #909399; text-decoration: none; white-space: nowrap; }
.account-panel-more:hover { color: var(--primary, #409eff); text-decoration: none; }
.account-shortcuts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 4px; width: 100%; }
.account-shortcut { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 4px; border-radius: 12px; text-decoration: none; color: #334155; min-width: 0; }
.account-shortcut:hover { background: #f5f7fa; text-decoration: none; color: var(--primary, #409eff); }
.account-shortcut--vip .account-shortcut-icon { color: #a16207; background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%); }
.account-shortcut-icon { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--primary, #409eff); background: #ecf5ff; flex-shrink: 0; overflow: hidden; }
.account-shortcut-icon svg { width: 20px; height: 20px; max-width: 20px; max-height: 20px; flex: 0 0 auto; display: block; }
.account-shortcut-label { font-size: 0.75rem; font-weight: 600; color: #606266; text-align: center; line-height: 1.35; word-break: keep-all; }
.account-shortcut:hover .account-shortcut-label { color: var(--primary, #409eff); }
.account-order-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #ebeef5; width: 100%; }
.account-order-status-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 10px; text-decoration: none; color: #334155; min-width: 0; }
.account-order-status-item:hover { background: #f5f7fa; text-decoration: none; color: var(--primary, #409eff); }
.account-order-status-icon { position: relative; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary, #409eff); background: #ecf5ff; flex-shrink: 0; overflow: hidden; }
.account-order-status-icon svg { width: 18px; height: 18px; max-width: 18px; max-height: 18px; flex: 0 0 auto; display: block; }
.account-order-status-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #f56c6c; color: #fff; font-size: 0.625rem; line-height: 16px; text-align: center; font-weight: 700; }
.account-order-status-badge.is-zero { display: none; }
.account-order-status-label { font-size: 0.75rem; color: #606266; text-align: center; }
.account-order-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.account-order-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: #f5f7fa; text-decoration: none; color: inherit; width: 100%; min-width: 0; box-sizing: border-box; }
.account-order-row:hover { background: #ecf5ff; text-decoration: none; }
.account-order-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.account-order-row-main strong { font-size: 0.875rem; color: #303133; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-order-row-main span { font-size: 0.75rem; color: #909399; }
.account-order-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.account-order-amount { color: #f56c6c; font-size: 0.9375rem; font-weight: 700; white-space: nowrap; }
.account-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.account-asset-list { list-style: none; margin: 0; padding: 0; width: 100%; }
.account-asset-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #ebeef5; min-width: 0; }
.account-asset-item:last-child { border-bottom: none; }
.account-asset-link { font-size: 0.875rem; color: #303133; text-decoration: none; font-weight: 500; line-height: 1.45; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.account-asset-link:hover { color: var(--primary, #409eff); text-decoration: none; }
.account-asset-meta { font-size: 0.6875rem; color: #909399; flex-shrink: 0; padding: 2px 8px; border-radius: 999px; background: #f5f7fa; }
.account-info-grid { display: grid; gap: 0; width: 100%; }
.account-info-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 12px 0; border-bottom: 1px solid #ebeef5; font-size: 0.875rem; }
.account-info-item:last-child { border-bottom: none; }
.account-info-label { color: #909399; flex-shrink: 0; }
.account-info-value { color: #303133; text-align: right; word-break: break-word; font-weight: 500; }
.account-empty { margin: 0; padding: 10px 0; color: #909399; font-size: 0.875rem; line-height: 1.6; list-style: none; }
.account-empty a { color: var(--primary, #409eff); font-weight: 600; text-decoration: none; }
.account-logout { display: flex; justify-content: center; padding: 4px 0 8px; }
.account-logout-btn { border: 1px solid #dcdfe6; background: #fff; color: #606266; border-radius: 999px; padding: 10px 28px; font: inherit; font-size: 0.875rem; cursor: pointer; }
.account-logout-btn:hover { border-color: #f56c6c; color: #f56c6c; }
.account-skeleton { border-radius: 8px; background: linear-gradient(90deg, #f1f5f9 25%, #e8edf4 50%, #f1f5f9 75%); background-size: 200% 100%; animation: account-shimmer 1.2s ease-in-out infinite; }
.account-skeleton--hero { width: 100%; max-width: 280px; height: 64px; }
.account-skeleton--row { height: 52px; }
.account-skeleton--line { height: 16px; margin: 8px 0; }
@keyframes account-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.vip-page { margin: 0 auto; max-width: 960px; padding: 0 16px; box-sizing: border-box; }
body:has(.vip-page) { background: #edf1f7; }
.vip-hero { margin: 0 0 12px; border-radius: 16px; overflow: hidden; background: linear-gradient(145deg, #1a1208 0%, #3d2b14 38%, #6b4e1f 100%); color: #fff; box-shadow: 0 12px 32px rgba(26, 18, 8, 0.18); }
.vip-hero-inner { padding: 28px 28px 0; }
.vip-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.vip-hero-kicker { margin: 0 0 8px; font-size: 0.75rem; letter-spacing: 0.14em; opacity: 0.72; }
.vip-hero h1 { margin: 0 0 8px; font-size: clamp(1.75rem, 4vw, 2.25rem); }
.vip-hero-desc { margin: 0; opacity: 0.88; max-width: 560px; line-height: 1.7; }
.vip-hero-link { border-color: rgba(255,255,255,0.35) !important; color: #fff !important; background: rgba(255,255,255,0.08) !important; }
.vip-member-card { display: flex; justify-content: space-between; align-items: stretch; gap: 20px; flex-wrap: wrap; padding: 22px 24px 26px; background: linear-gradient(135deg, rgba(255,247,224,0.96) 0%, rgba(255,236,179,0.92) 100%); color: #4a3412; border-radius: 18px 18px 0 0; min-height: 120px; }
.vip-member-card-left { display: flex; align-items: center; gap: 16px; }
.vip-member-avatar { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #c8960c, #8b5a00); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35); }
.vip-member-name { font-size: 1.125rem; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vip-member-expiry { margin: 6px 0 0; font-size: 0.875rem; color: #7a5a1d; }
.vip-member-card-right { flex: 1; min-width: 220px; max-width: 360px; display: flex; align-items: center; }
.vip-growth { width: 100%; }
.vip-growth-head { display: flex; justify-content: space-between; gap: 12px; font-size: 0.8125rem; color: #7a5a1d; margin-bottom: 8px; }
.vip-growth-bar { height: 8px; border-radius: 999px; background: rgba(139, 90, 0, 0.15); overflow: hidden; }
.vip-growth-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d4af37, #f7e08a); }
.vip-body { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.vip-section { padding: 22px; border-radius: 20px; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05); border: 1px solid rgba(255, 255, 255, 0.8); background: #fff; }
.vip-section-title { margin: 0 0 16px; font-size: 1.125rem; color: #303133; }
.vip-section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vip-privilege-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.vip-privilege-card { padding: 18px 16px; border: 1px solid #f0e6cc; border-radius: 12px; background: linear-gradient(180deg, #fffdf7 0%, #fff 100%); }
.vip-privilege-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #8b5a00; background: linear-gradient(135deg, #fff3c4, #ffe08a); margin-bottom: 10px; }
.vip-privilege-card h3 { margin: 0 0 6px; font-size: 0.9375rem; }
.vip-privilege-card p { margin: 0; font-size: 0.8125rem; color: #909399; line-height: 1.6; }
.vip-compare-wrap { overflow-x: auto; }
.vip-compare-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 560px; }
.vip-compare-table th, .vip-compare-table td { border: 1px solid #ebeef5; padding: 12px 14px; text-align: center; }
.vip-compare-table th:first-child, .vip-compare-table td:first-child { text-align: left; }
.vip-compare-table th { background: #fafafa; }
.vip-compare-highlight { color: #b8860b; font-weight: 600; }
.vip-compare-svip { color: #8b4513; font-weight: 700; }
.vip-plans-section { padding: 0; background: transparent; border: none; box-shadow: none; }
.vip-plans-head { margin-bottom: 12px; }
.vip-plans-tip { margin: 0; color: #909399; font-size: 0.875rem; }
.vip-plan-tabs { display: flex; gap: 10px; margin-bottom: 16px; }
.vip-plan-tab { border: 1px solid #dcdfe6; background: #fff; color: #606266; border-radius: 999px; padding: 10px 20px; font: inherit; cursor: pointer; }
.vip-plan-tab.is-active { border-color: #c8960c; color: #8b5a00; background: #fff9e8; font-weight: 700; }
.vip-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.vip-plan-card { position: relative; padding: 22px 20px; border: 1px solid #eadcb8; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(212, 175, 55, 0.08); }
.vip-plan-card--svip { border-color: #d4b896; background: linear-gradient(180deg, #fffaf3 0%, #fff 100%); }
.vip-plan-tag { position: absolute; top: 14px; right: 14px; font-size: 0.75rem; padding: 4px 10px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #f56c6c, #e6a23c); }
.vip-plan-badge { margin: 0 0 8px; font-size: 0.8125rem; color: #b8860b; font-weight: 600; }
.vip-plan-card h3 { margin: 0 0 10px; font-size: 1.0625rem; }
.vip-plan-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.vip-plan-price strong { font-size: 2rem; color: #f56c6c; line-height: 1; }
.vip-plan-original { color: #c0c4cc; font-size: 0.9375rem; }
.vip-plan-benefits { margin: 0 0 18px; padding-left: 1.1rem; color: #606266; font-size: 0.875rem; line-height: 1.8; }
.vip-plan-buy { width: 100%; background: linear-gradient(135deg, #d4af37, #b8860b) !important; border: none !important; }
.vip-plan-card--svip .vip-plan-buy { background: linear-gradient(135deg, #8b4513, #5c2e0b) !important; }
.vip-order-list { display: grid; gap: 12px; }
.vip-order-card { border: 1px solid #ebeef5; border-radius: 10px; padding: 16px; }
.vip-order-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.vip-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 0.875rem; color: #909399; }
.vip-breadcrumb a { color: #606266; text-decoration: none; }
.vip-breadcrumb-sep { color: #dcdfe6; }
.vip-order-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.vip-nav-link { color: #d4af37; font-weight: 600; text-decoration: none; }
.vip-nav-link:hover { color: #f7e08a; }

@media (max-width: 768px) {
  .account-page-shell,
  .vip-page { padding: 0 12px; }
  .account-hero { padding: 18px 16px 16px; }
  .account-hero-avatar { width: 56px; height: 56px; font-size: 1.25rem; }
  .account-hero-name { font-size: 1.125rem; }
  .account-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-stat:nth-child(2) { border-right: none; }
  .account-stat:nth-child(1), .account-stat:nth-child(2) { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .account-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .account-order-status { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .account-order-status-label { font-size: 0.6875rem; }
  .account-grid-2 { grid-template-columns: 1fr; }
  .account-hero-top { flex-direction: column; }
  .account-hero-vip-entry { flex-direction: row; align-self: auto; width: auto; max-width: 100%; justify-content: center; }
  .account-panel { padding: 16px; }
  .vip-hero-inner { padding: 20px 18px 0; }
  .vip-member-card { border-radius: 14px 14px 0 0; padding: 18px; }
  .vip-member-card-right { max-width: none; }
}