/* Phase 7 — shared Account Center (desktop workspace + mobile app screen). */
:root {
  --account-bg: #f8fafc;
  --account-surface: #ffffff;
  --account-raised: #f1f5f9;
  --account-border: #dbe4ef;
  --account-text: #0f172a;
  --account-muted: #64748b;
  --account-primary: #059669;
  --account-primary-strong: #0f766e;
}

html.dark {
  --account-bg: #070b14;
  --account-surface: #0f172a;
  --account-raised: #152236;
  --account-border: #2a3b52;
  --account-text: #f8fafc;
  --account-muted: #93a4bb;
  --account-primary: #10b981;
  --account-primary-strong: #0d9488;
}

body.account-center-open { overflow: hidden !important; }
#user-profile-dropdown .profile-identity {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  align-items: center;
  gap: .85rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--account-border);
  font-family: var(--font-sans, 'Prompt', sans-serif);
}
.profile-identity-copy { min-width: 0; }
#user-profile-dropdown #dropdown-user-name {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.025em;
}
#user-profile-dropdown .profile-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .3rem;
  padding: .25rem .65rem;
  border: 1px solid var(--account-border);
  border-radius: 999px;
  background: var(--account-raised);
  color: var(--account-primary-strong);
  font: 700 .65rem/1.5 var(--font-sans, 'Prompt', sans-serif);
  letter-spacing: .07em;
}
.profile-rank-badge,
.checkout-member-rank-badge,
.leaderboard-member-rank,
.account-rank-icon[data-member-rank] {
  --member-rank-icon: url('../assets/icons/rank-member.svg');
}
:is(.profile-rank-badge, .checkout-member-rank-badge, .account-rank-icon, .leaderboard-member-rank)[data-member-rank="GOLD"] {
  --member-rank-icon: url('../assets/icons/rank-gold.svg');
}
:is(.profile-rank-badge, .checkout-member-rank-badge, .account-rank-icon, .leaderboard-member-rank)[data-member-rank="PLATINUM"] {
  --member-rank-icon: url('../assets/icons/rank-platinum.svg');
}
.profile-rank-badge::before,
.checkout-member-rank-badge::before,
.leaderboard-member-rank::before,
.account-rank-icon[data-member-rank]::before {
  content: '';
  display: block;
  width: .9rem;
  height: .9rem;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--member-rank-icon) center / contain no-repeat;
  mask: var(--member-rank-icon) center / contain no-repeat;
}
.account-rank-icon[data-member-rank]::before { width: 1.25rem; height: 1.25rem; }
#header-user-role[data-rank-pending="true"],
#dropdown-user-role-badge[data-rank-pending="true"] { color: var(--account-muted) !important; }
.profile-rank-badge[data-rank-pending="true"]::before { display: none; }
.leaderboard-member-rank {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  border: 1px solid currentColor;
  border-radius: .4rem;
  color: #059669;
  background: rgba(16, 185, 129, .08);
}
.leaderboard-member-rank[data-member-rank="GOLD"] { color: #b45309; background: rgba(245, 158, 11, .1); }
.leaderboard-member-rank[data-member-rank="PLATINUM"] { color: #7c3aed; background: rgba(139, 92, 246, .1); }
html.dark .leaderboard-member-rank { color: #34d399; }
html.dark .leaderboard-member-rank[data-member-rank="GOLD"] { color: #fbbf24; }
html.dark .leaderboard-member-rank[data-member-rank="PLATINUM"] { color: #c4b5fd; }
.profile-membership-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .55rem;
  margin-top: .45rem;
  line-height: 1.65;
}
.profile-membership-meta > div { display: flex; flex-wrap: wrap; gap: 0 .3rem; }
#dropdown-member-since-label { color: var(--account-muted); font-size: .65rem; font-weight: 500; }
#dropdown-member-since { color: var(--account-text); font-size: .65rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.profile-membership-age {
  color: var(--account-muted);
  font-size: .65rem;
  font-weight: 500;
}
#user-security-modal .member-last-login {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1rem;
  padding: .85rem;
  border: 1px solid var(--account-border);
  border-radius: 1rem;
  background: var(--account-bg);
  flex-shrink: 0;
}
.member-last-login-icon { color: var(--account-primary-strong); }
.member-last-login-icon svg { width: 1.2rem; height: 1.2rem; }
.member-last-login > div { display: grid; gap: .2rem; }
.member-last-login > div > span { color: var(--account-muted); font-size: .7rem; }
.member-last-login strong { color: var(--account-text); font-size: .8rem; font-weight: 600; }
body.member-security-open,body.support-modal-open { overflow: hidden !important; }
.member-security-mobile-copy { display: none; }

/* Device management shares the account palette in both themes and layouts. */
#user-security-modal .member-security-panel,
#user-security-modal .member-security-sessions {
  background: var(--account-surface) !important;
  border-color: var(--account-border) !important;
  color: var(--account-text) !important;
}
#user-security-modal #member-sessions-list article {
  background: var(--account-bg) !important;
  border-color: var(--account-border) !important;
}
#user-security-modal :is(h3, h4, #member-sessions-list p:first-child) {
  color: var(--account-text) !important;
}
#user-security-modal :is(.member-security-header p, .member-security-sessions p, #member-sessions-loading) {
  color: var(--account-muted) !important;
}
#user-security-modal #member-sessions-list article > div > span {
  background: var(--account-raised) !important;
  color: var(--account-primary-strong) !important;
}
#user-security-modal #member-sessions-list article > div:last-child > span {
  background: color-mix(in srgb, var(--account-primary) 12%, var(--account-surface)) !important;
  color: var(--account-primary-strong) !important;
}
#user-security-modal :is([data-revoke-session], #member-revoke-other-sessions-btn) {
  color: #e11d48 !important;
  background: var(--account-surface) !important;
}
html.dark #user-security-modal :is([data-revoke-session], #member-revoke-other-sessions-btn) {
  color: #fda4af !important;
}
.account-center-overlay.hidden { display: none !important; }
.account-center-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  padding: 1.25rem;
  place-items: center;
  overflow: hidden;
  background: rgba(2, 6, 23, .72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.account-center-shell {
  display: flex;
  width: min(70rem, 100%);
  height: min(45rem, calc(100dvh - 2.5rem));
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--account-border);
  border-radius: 1.65rem;
  background: var(--account-surface);
  color: var(--account-text);
  box-shadow: 0 30px 90px rgba(2, 6, 23, .38);
}
.account-center-header {
  display: flex;
  min-width: 0;
  min-height: 6.1rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--account-border);
  background: linear-gradient(135deg, color-mix(in srgb, var(--account-primary) 10%, var(--account-surface)), var(--account-surface) 65%);
}
.account-center-identity { display: flex; min-width: 0; align-items: center; gap: .9rem; }
.account-center-avatar {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(52, 211, 153, .45);
  border-radius: 1.15rem;
  background: linear-gradient(145deg, #10b981, #0f766e);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(5, 150, 105, .22);
}
.account-center-identity-copy { min-width: 0; }
.account-center-eyebrow { margin: 0 0 .1rem; color: var(--account-primary); font-size: .65rem; font-weight: 900; letter-spacing: .08em; }
.account-center-identity-copy h2 { overflow: hidden; margin: 0; font-size: 1.2rem; font-weight: 900; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.account-center-identity-copy > p:last-child { overflow: hidden; margin: .2rem 0 0; color: var(--account-muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.account-center-close {
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--account-border);
  border-radius: .9rem;
  background: var(--account-raised);
  color: var(--account-muted);
  transition: .2s ease;
}
.account-center-close:hover { border-color: #fb7185; color: #f43f5e; transform: rotate(4deg); }
.account-center-close svg { width: 1.15rem; height: 1.15rem; }
.account-center-workspace { display: grid; min-width: 0; min-height: 0; flex: 1; grid-template-columns: 13.75rem minmax(0, 1fr); }
.account-center-navigation {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: .4rem;
  padding: 1rem;
  border-right: 1px solid var(--account-border);
  background: color-mix(in srgb, var(--account-raised) 60%, var(--account-surface));
}
.account-center-navigation > button,
.account-center-sidebar-footer button {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 3.05rem;
  align-items: center;
  gap: .7rem;
  padding: .55rem .65rem;
  border: 1px solid transparent;
  border-radius: .9rem;
  background: transparent;
  color: var(--account-muted);
  font-size: .78rem;
  font-weight: 800;
  text-align: left;
  transition: .18s ease;
}
.account-center-navigation > button:hover { background: var(--account-surface); color: var(--account-text); }
.account-center-navigation > button.active { border-color: color-mix(in srgb, var(--account-primary) 35%, transparent); background: color-mix(in srgb, var(--account-primary) 12%, var(--account-surface)); color: var(--account-primary); }
.account-center-nav-icon { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: .65rem; background: var(--account-surface); }
.account-center-nav-icon svg { width: 1rem; height: 1rem; }
.account-center-navigation > button.active .account-center-nav-icon { background: var(--account-primary); color: #fff; }
#account-center-nav-unread { display: grid; min-width: 1.25rem; height: 1.25rem; margin-left: auto; padding: 0 .25rem; place-items: center; border-radius: 999px; background: #f43f5e; color: #fff; font-size: .56rem; }
#account-center-nav-unread.hidden { display: none !important; }
.account-center-sidebar-footer { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--account-border); }
.account-center-sidebar-footer .account-center-logout { color: #f43f5e; }
.account-center-sidebar-footer svg { width: 1rem; }
.account-center-content { min-width: 0; min-height: 0; padding: 1.35rem; overflow-x: hidden; overflow-y: auto; outline: none; background: var(--account-bg); }
.account-panel-heading { display: flex; min-width: 0; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; }
.account-panel-heading > div { min-width: 0; }
.account-panel-heading p { margin: 0 0 .2rem; color: var(--account-primary); font-size: .62rem; font-weight: 900; letter-spacing: .1em; }
.account-panel-heading h3 { margin: 0; color: var(--account-text); font-size: 1.35rem; font-weight: 900; line-height: 1.25; }
.account-panel-heading span { display: block; margin-top: .28rem; color: var(--account-muted); font-size: .74rem; line-height: 1.45; }
.account-heading-action {
  display: inline-flex;
  min-height: 2.35rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  padding: .5rem .7rem;
  border: 1px solid var(--account-border);
  border-radius: .75rem;
  background: var(--account-surface);
  color: var(--account-text);
  font-size: .68rem;
  font-weight: 800;
}
.account-heading-action.primary { border-color: var(--account-primary); background: var(--account-primary); color: #fff; }
.account-heading-action:disabled { opacity: .45; cursor: not-allowed; }
.account-heading-action svg { width: .9rem; }
.account-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.account-stat-card {
  display: grid;
  min-width: 0;
  min-height: 5.3rem;
  grid-template-columns: 2.65rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .8rem;
  border: 1px solid var(--account-border);
  border-radius: 1rem;
  background: var(--account-surface);
  color: var(--account-text);
  text-align: left;
  transition: .18s ease;
}
.account-stat-card:hover { border-color: color-mix(in srgb, var(--account-primary) 55%, var(--account-border)); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15, 23, 42, .08); }
.account-stat-card > svg { width: .95rem; color: var(--account-muted); }
.account-stat-card > span:nth-child(2) { min-width: 0; }
.account-stat-card small { display: block; overflow: hidden; color: var(--account-muted); font-size: .65rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.account-stat-card strong { display: block; margin-top: .18rem; overflow: hidden; font-size: 1rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.account-stat-icon { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border-radius: .85rem; }
.account-stat-icon svg { width: 1.15rem; }
.account-stat-icon.money { background: rgba(16, 185, 129, .12); color: #10b981; }
.account-stat-icon.otp { background: rgba(14, 165, 233, .12); color: #0ea5e9; }
.account-stat-icon.notice { background: rgba(244, 63, 94, .12); color: #f43f5e; }
.account-stat-icon.help { background: rgba(245, 158, 11, .13); color: #f59e0b; }
.account-rank-card {
  --account-rank-accent: #64748b;
  --account-rank-soft: rgba(100, 116, 139, .1);
  display: grid;
  min-width: 0;
  gap: .7rem;
  margin-top: .75rem;
  padding: .82rem;
  border: 1px solid color-mix(in srgb, var(--account-rank-accent) 34%, var(--account-border));
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--account-rank-soft), var(--account-surface) 72%);
  color: var(--account-text);
}
.account-rank-card.account-rank-gold { --account-rank-accent: #d97706; --account-rank-soft: rgba(245, 158, 11, .12); }
.account-rank-card.account-rank-platinum { --account-rank-accent: #7c3aed; --account-rank-soft: rgba(139, 92, 246, .12); }
.account-rank-heading { display: grid; min-width: 0; grid-template-columns: 2.55rem minmax(0, 1fr) auto; align-items: center; gap: .7rem; }
.account-rank-icon { display: grid; width: 2.55rem; height: 2.55rem; flex: 0 0 auto; place-items: center; border-radius: .82rem; background: var(--account-rank-soft); color: var(--account-rank-accent); }
.account-rank-icon svg { width: 1.1rem; height: 1.1rem; }
.account-rank-heading > span:nth-child(2),.account-rank-loading > span:nth-child(2),.account-rank-error > span:nth-child(2),.account-rank-disabled > span:nth-child(2) { min-width: 0; }
.account-rank-card small { display: block; color: var(--account-muted); font-size: .57rem; font-weight: 700; }
.account-rank-card strong { display: block; margin-top: .08rem; overflow: hidden; font-size: .78rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.account-rank-heading > b,.account-rank-disabled > b { padding: .32rem .55rem; border-radius: 999px; background: var(--account-rank-soft); color: var(--account-rank-accent); font-size: .6rem; font-weight: 900; white-space: nowrap; }
.account-rank-progress { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: .35rem .8rem; }
.account-rank-progress > span:first-child strong { color: var(--account-rank-accent); font-size: .88rem; }
.account-rank-progress-copy { min-width: 0; text-align: right; }
.account-rank-progress-copy b { display: block; overflow: hidden; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.account-rank-progress-copy small { margin-top: .12rem; }
.account-rank-progress-copy small,
#dropdown-rank-reset {
  color: var(--account-muted);
  font: 700 .57rem/1.5 var(--font-sans, 'Prompt', sans-serif);
  letter-spacing: normal;
}
.account-rank-progress progress { grid-column: 1 / -1; width: 100%; height: .38rem; overflow: hidden; border: 0; border-radius: 999px; background: var(--account-raised); }
.account-rank-progress progress::-webkit-progress-bar { border-radius: 999px; background: var(--account-raised); }
.account-rank-progress progress::-webkit-progress-value { border-radius: 999px; background: var(--account-rank-accent); }
.account-rank-progress progress::-moz-progress-bar { border-radius: 999px; background: var(--account-rank-accent); }
.account-rank-loading,.account-rank-error,.account-rank-disabled { grid-template-columns: 2.55rem minmax(0, 1fr) auto; align-items: center; }
.account-rank-loading-bar { width: 5.5rem; height: .48rem; border-radius: 999px; background: linear-gradient(90deg, var(--account-raised), var(--account-surface), var(--account-raised)); background-size: 200% 100%; animation: account-shimmer 1.2s infinite linear; }
.account-rank-error { --account-rank-accent: #f43f5e; --account-rank-soft: rgba(244, 63, 94, .1); }
.account-rank-error button { min-height: 2rem; padding: .38rem .6rem; border-radius: .65rem; background: var(--account-rank-accent); color: #fff; font-size: .6rem; font-weight: 850; }
.account-rank-disabled { opacity: .82; }
.account-block { margin-top: 1rem; padding: 1rem; border: 1px solid var(--account-border); border-radius: 1.05rem; background: var(--account-surface); }
.account-block-title { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.account-block-title > div { min-width: 0; }
.account-block-title h4 { margin: 0; font-size: .85rem; font-weight: 900; }
.account-block-title p { margin: .18rem 0 0; color: var(--account-muted); font-size: .64rem; }
.account-block-title > button { flex: 0 0 auto; color: var(--account-primary); font-size: .66rem; font-weight: 800; }
.account-quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.account-quick-actions > button { display: flex; min-width: 0; min-height: 4.15rem; align-items: center; gap: .6rem; padding: .65rem; border: 1px solid var(--account-border); border-radius: .85rem; background: var(--account-bg); color: var(--account-text); text-align: left; }
.account-quick-actions > button > svg { width: 1.1rem; flex: 0 0 auto; color: var(--account-primary); }
.account-quick-actions > button > span { min-width: 0; }
.account-quick-actions strong,.account-quick-actions small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-quick-actions strong { font-size: .68rem; }
.account-quick-actions small { margin-top: .18rem; color: var(--account-muted); font-size: .56rem; }
.account-social-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.account-social-link {
  display: grid;
  min-width: 0;
  min-height: 4.15rem;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  padding: .68rem;
  border: 1px solid var(--account-border);
  border-radius: .9rem;
  color: var(--account-text);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.account-social-link.facebook { border-color: rgba(24, 119, 242, .25); background: color-mix(in srgb, #1877f2 7%, var(--account-bg)); }
.account-social-link.line { border-color: rgba(6, 199, 85, .28); background: color-mix(in srgb, #06c755 7%, var(--account-bg)); }
.account-social-link:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15, 23, 42, .08); }
.account-social-link.facebook:hover { border-color: rgba(24, 119, 242, .6); }
.account-social-link.line:hover { border-color: rgba(6, 199, 85, .62); }
.account-social-brand { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: .78rem; color: #fff; }
.account-social-link.facebook .account-social-brand { background: #1877f2; }
.account-social-link.line .account-social-brand { background: #06c755; }
.account-social-brand svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.account-social-link > span:nth-child(2) { min-width: 0; }
.account-social-link strong,.account-social-link small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-social-link strong { font-size: .7rem; font-weight: 900; }
.account-social-link small { margin-top: .16rem; color: var(--account-muted); font-size: .56rem; }
.account-social-link > svg { width: .9rem; color: var(--account-muted); }
.account-mini-feed,.account-notification-list { display: grid; gap: .55rem; }
.account-notification {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 2.55rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  padding: .72rem;
  border: 1px solid var(--account-border);
  border-radius: .9rem;
  background: var(--account-surface);
  color: var(--account-text);
  text-align: left;
}
.account-notification.is-unread { border-color: color-mix(in srgb, var(--account-primary) 40%, var(--account-border)); background: color-mix(in srgb, var(--account-primary) 6%, var(--account-surface)); }
.account-notification.compact { padding-block: .6rem; }
.account-notification-icon { display: grid; width: 2.55rem; height: 2.55rem; place-items: center; border-radius: .8rem; }
.account-notification-icon svg { width: 1.05rem; }
.account-notification-icon.otp { background: rgba(14, 165, 233, .13); color: #0ea5e9; }
.account-notification-icon.email { background: rgba(139, 92, 246, .13); color: #8b5cf6; }
.account-notification-icon.refund { background: rgba(16, 185, 129, .13); color: #10b981; }
.account-notification-copy { display: block; min-width: 0; }
.account-notification-copy > span { display: flex; min-width: 0; align-items: center; gap: .45rem; }
.account-notification-copy strong { overflow: hidden; font-size: .72rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.account-notification-copy > small { display: block; margin-top: .16rem; overflow: hidden; color: var(--account-muted); font-size: .62rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.account-announcement-detail { margin-top: 16px; padding: 22px; border: 1px solid var(--account-border); border-radius: 18px; background: var(--account-surface); color: var(--account-text); }
.account-announcement-detail h4 { margin: 14px 0 8px; font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
.account-announcement-detail time { font-size: .75rem; color: var(--account-muted); }
.account-announcement-detail p { margin-top: 18px; font-size: .9rem; font-weight: 400; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.account-notification-copy time { display: block; margin-top: .25rem; color: var(--account-muted); font-size: .55rem; }
.account-notification-chevron { width: .9rem; color: var(--account-muted); }
.account-unread-dot { width: .43rem; height: .43rem; flex: 0 0 auto; border-radius: 50%; background: #f43f5e; }
.account-filter-row { display: flex; gap: .45rem; margin-bottom: .8rem; overflow-x: auto; scrollbar-width: none; }
.account-filter-row::-webkit-scrollbar { display: none; }
.account-filter-row button { display: inline-flex; min-height: 2.3rem; flex: 0 0 auto; align-items: center; gap: .35rem; padding: .45rem .7rem; border: 1px solid var(--account-border); border-radius: 999px; background: var(--account-surface); color: var(--account-muted); font-size: .65rem; font-weight: 800; }
.account-filter-row button.active { border-color: var(--account-primary); background: var(--account-primary); color: #fff; }
.account-filter-row b { display: grid; min-width: 1.15rem; height: 1.15rem; padding: 0 .2rem; place-items: center; border-radius: 999px; background: rgba(148, 163, 184, .18); font-size: .55rem; }
.account-form { display: grid; gap: 1rem; padding: 1rem; border: 1px solid var(--account-border); border-radius: 1.05rem; background: var(--account-surface); }
.account-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.account-form label { display: block; min-width: 0; color: var(--account-text); font-size: .72rem; font-weight: 900; }
.account-form label > small { display: block; margin-top: .18rem; color: var(--account-muted); font-size: .58rem; font-weight: 600; }
.account-form input { width: 100%; min-width: 0; min-height: 2.85rem; margin-top: .48rem; padding: .68rem .75rem; border: 1px solid var(--account-border); border-radius: .8rem; outline: none; background: var(--account-bg); color: var(--account-text); font-size: .78rem; }
.account-form input:focus { border-color: var(--account-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--account-primary) 14%, transparent); }
.account-form-readonly { display: flex; align-items: center; gap: .75rem; padding: .8rem; border: 1px solid var(--account-border); border-radius: .9rem; background: var(--account-bg); }
.account-form-readonly > span { display: grid; width: 2.4rem; height: 2.4rem; flex: 0 0 auto; place-items: center; border-radius: .75rem; background: var(--account-surface); color: var(--account-primary); }
.account-form-readonly svg { width: 1rem; }
.account-form-readonly div { min-width: 0; }
.account-form-readonly small,.account-form-readonly strong,.account-form-readonly p { display: block; margin: 0; }
.account-form-readonly small { color: var(--account-muted); font-size: .56rem; }
.account-form-readonly strong { margin-top: .12rem; overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.account-form-readonly p { margin-top: .14rem; color: var(--account-muted); font-size: .55rem; }
.account-form-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .25rem; }
.account-form-actions p { display: flex; align-items: center; gap: .35rem; margin: 0; color: var(--account-muted); font-size: .58rem; }
.account-form-actions p svg { width: .85rem; color: var(--account-primary); }
.account-form-actions button { display: inline-flex; min-height: 2.65rem; flex: 0 0 auto; align-items: center; gap: .4rem; padding: .6rem .9rem; border-radius: .8rem; background: linear-gradient(135deg, var(--account-primary), var(--account-primary-strong)); color: #fff; font-size: .7rem; font-weight: 900; }
.account-form-actions button:disabled { opacity: .6; }
.account-form-actions button svg { width: .9rem; }
.account-security-summary { display: flex; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid rgba(16, 185, 129, .32); border-radius: 1rem; background: rgba(16, 185, 129, .08); }
.account-security-summary > span { display: grid; width: 2.9rem; height: 2.9rem; flex: 0 0 auto; place-items: center; border-radius: .9rem; background: var(--account-primary); color: #fff; }
.account-security-summary svg { width: 1.25rem; }
.account-security-summary h4 { margin: 0; font-size: .8rem; font-weight: 900; }
.account-security-summary p { margin: .22rem 0 0; color: var(--account-muted); font-size: .62rem; line-height: 1.45; }
.account-security-list { display: grid; gap: .65rem; margin-top: .85rem; }
.account-security-list > .account-recovery-email { align-items: start; }
.account-recovery-email > span:nth-child(2) { grid-column: 2 / -1; min-width: 0; overflow-wrap: anywhere; }
.account-recovery-email .account-status-ok { display: inline-block; margin-top: .5rem; }
.account-recovery-body { grid-column: 1 / -1; min-width: 0; }
.account-recovery-body p { margin: .35rem 0 .65rem; color: var(--account-muted); font-size: .7rem; line-height: 1.6; overflow-wrap: anywhere; }
.account-recovery-body .account-recovery-preview { padding: .55rem .65rem; border-radius: .6rem; background: #fffbeb; color: #92400e; }
.account-recovery-body .account-recovery-error { color: #be123c; }
.account-recovery-body form { display: grid; gap: .7rem; }
.account-recovery-body label { display: grid; gap: .35rem; color: var(--account-text); font-size: .72rem; font-weight: 600; }
.account-recovery-body input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--account-border); border-radius: .7rem; padding: .6rem .75rem; background: var(--account-surface); color: var(--account-text); font: inherit; font-size: 16px; }
.account-recovery-body input:focus-visible { outline: 2px solid var(--account-primary); outline-offset: 2px; }
.account-recovery-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.account-recovery-body button { min-height: 44px; }
.account-recovery-actions button { flex: 1 1 8rem; }
.account-recovery-body button.primary { background: var(--account-primary); border-color: var(--account-primary); color: #fff; }
.account-recovery-body button:disabled { opacity: .55; cursor: not-allowed; }
.account-recovery-test-code strong { display: inline; letter-spacing: .14em; font-size: 1rem; font-variant-numeric: tabular-nums; }
.dark .account-recovery-body .account-recovery-preview { background: #352b16; color: #fcd34d; }
.dark .account-recovery-body .account-recovery-error { color: #fda4af; }
.account-security-list > div { display: grid; min-width: 0; grid-template-columns: 2.45rem minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .8rem; border: 1px solid var(--account-border); border-radius: .9rem; background: var(--account-surface); }
.account-security-icon { display: grid; width: 2.45rem; height: 2.45rem; place-items: center; border-radius: .75rem; background: var(--account-raised); color: var(--account-primary); }
.account-security-icon svg { width: 1rem; }
.account-security-list strong,.account-security-list small { display: block; }
.account-security-list strong { font-size: .72rem; }
.account-security-list small { margin-top: .16rem; color: var(--account-muted); font-size: .59rem; line-height: 1.4; }
.account-security-list button { min-height: 2.25rem; padding: .45rem .65rem; border: 1px solid var(--account-border); border-radius: .7rem; background: var(--account-raised); color: var(--account-text); font-size: .62rem; font-weight: 800; }
.account-status-ok,.account-status-muted { padding: .28rem .48rem; border-radius: 999px; font-size: .57rem; white-space: nowrap; }
.account-status-ok { background: rgba(16, 185, 129, .12); color: #10b981; }
.account-status-muted { background: var(--account-raised); color: var(--account-muted); }
.account-security-list > .account-security-two-factor { align-items: start; }
.account-security-two-factor > button { align-self: center; white-space: nowrap; }
.account-two-factor-flow {
  display: block;
  min-width: 0;
  grid-column: 1 / -1;
  padding: .85rem;
  border: 1px solid color-mix(in srgb, var(--account-primary) 28%, var(--account-border));
  border-radius: .85rem;
  background: color-mix(in srgb, var(--account-primary) 6%, var(--account-raised));
}
.account-two-factor-form { display: grid; min-width: 0; gap: .55rem; }
.account-two-factor-form label { color: var(--account-text); font-size: .62rem; font-weight: 900; }
.account-two-factor-form input {
  width: 100%;
  min-width: 0;
  min-height: 2.7rem;
  padding: .65rem .75rem;
  border: 1px solid var(--account-border);
  border-radius: .75rem;
  outline: 0;
  background: var(--account-surface);
  color: var(--account-text);
  font-size: .8rem;
}
.account-two-factor-form input:focus { border-color: var(--account-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--account-primary) 14%, transparent); }
.account-two-factor-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.account-security-list .account-two-factor-actions button { flex: 1 1 9rem; }
.account-security-list .account-two-factor-actions .primary { border-color: transparent; background: linear-gradient(135deg, var(--account-primary), var(--account-primary-strong)); color: #fff; }
.account-security-list .account-two-factor-actions .danger { border-color: rgba(244, 63, 94, .35); background: rgba(244, 63, 94, .1); color: #e11d48; }
.account-two-factor-verify { display: grid; grid-template-columns: 9.25rem minmax(0, 1fr); gap: .8rem; }
.account-two-factor-qr { display: grid; width: 9.25rem; height: 9.25rem; place-items: center; overflow: hidden; border-radius: .75rem; background: #fff; }
.account-two-factor-qr canvas,.account-two-factor-qr img { max-width: 100%; height: auto !important; }
.account-two-factor-verify-copy { min-width: 0; }
.account-two-factor-verify-copy > p,.account-two-factor-disable > p { margin: 0 0 .55rem; color: var(--account-muted); font-size: .6rem; line-height: 1.5; }
.account-two-factor-secret { min-width: 0; margin-bottom: .65rem; padding: .55rem .65rem; border: 1px solid var(--account-border); border-radius: .7rem; background: var(--account-surface); }
.account-two-factor-secret small,.account-two-factor-secret code { display: block; }
.account-two-factor-secret small { margin-bottom: .2rem; color: var(--account-muted); font-size: .52rem; font-weight: 800; }
.account-two-factor-secret code { overflow-wrap: anywhere; color: #d97706; font-size: .68rem; font-weight: 900; letter-spacing: .08em; }
.account-two-factor-secret-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.account-two-factor-secret-heading small { margin-bottom: 0; }
.account-security-list .account-two-factor-secret-copy { display: inline-flex; min-height: 1.8rem; align-items: center; gap: .3rem; padding: .25rem .45rem; color: var(--account-primary); }
.account-two-factor-secret-copy svg { width: .75rem; height: .75rem; }
.account-faq-block { margin-top: 0; }
.account-faq-list { display: grid; gap: .5rem; }
.account-faq-list details { border: 1px solid var(--account-border); border-radius: .85rem; background: var(--account-bg); }
.account-faq-list summary { display: flex; min-height: 2.8rem; cursor: pointer; align-items: center; justify-content: space-between; gap: .6rem; padding: .65rem .75rem; font-size: .68rem; font-weight: 850; list-style: none; }
.account-faq-list summary > span { min-width: 0; flex: 1; }
.account-faq-list summary::-webkit-details-marker { display: none; }
.account-faq-list summary svg { width: .9rem; flex: 0 0 auto; color: var(--account-muted); transition: transform .2s; }
.account-faq-list details[open] summary svg { transform: rotate(180deg); }
.account-faq-list details p { margin: 0; padding: 0 .75rem .75rem; color: var(--account-muted); font-size: .62rem; line-height: 1.55; }
.account-ticket-list { display: grid; gap: .55rem; }
.account-ticket-list article { display: grid; min-width: 0; grid-template-columns: 2.35rem minmax(0, 1fr) auto; align-items: start; gap: .65rem; padding: .7rem; border: 1px solid var(--account-border); border-radius: .85rem; background: var(--account-bg); }
.account-ticket-icon { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .7rem; background: var(--account-surface); color: var(--account-primary); }
.account-ticket-icon svg { width: .95rem; }
.account-ticket-list article > div { min-width: 0; }
.account-ticket-list strong,.account-ticket-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-ticket-list strong { font-size: .68rem; }
.account-ticket-list small { margin-top: .17rem; color: var(--account-muted); font-size: .55rem; }
.account-ticket-list p { margin: .42rem 0 0; padding: .45rem; border-radius: .55rem; background: var(--account-surface); color: var(--account-muted); font-size: .58rem; line-height: 1.45; }
.account-ticket-status { padding: .26rem .45rem; border-radius: 999px; font-size: .53rem; white-space: nowrap; }
.account-ticket-status.pending { background: rgba(244, 63, 94, .1); color: #f43f5e; }
.account-ticket-status.progress { background: rgba(245, 158, 11, .12); color: #f59e0b; }
.account-ticket-status.resolved { background: rgba(16, 185, 129, .12); color: #10b981; }
.account-ticket-status.muted { background: var(--account-raised); color: var(--account-muted); }
.account-inline-empty,.account-center-empty { display: flex; min-height: 5rem; align-items: center; justify-content: center; gap: .55rem; padding: 1rem; border: 1px dashed var(--account-border); border-radius: .9rem; color: var(--account-muted); font-size: .65rem; text-align: center; }
.account-inline-empty svg { width: 1rem; }
.account-center-empty { min-height: 18rem; flex-direction: column; }
.account-center-empty svg { width: 2rem; }
.account-center-empty h3 { margin: .25rem 0 0; color: var(--account-text); font-size: .9rem; }
.account-center-empty p { margin: 0; }
.account-center-empty button { min-height: 2.4rem; padding: .5rem .8rem; border-radius: .7rem; background: var(--account-primary); color: #fff; font-weight: 800; }
.account-center-loading { display: grid; min-height: 18rem; place-items: center; align-content: center; gap: .45rem; color: var(--account-muted); font-size: .68rem; }
.account-center-loading span { width: min(24rem, 80%); height: 3.5rem; border-radius: .9rem; background: linear-gradient(90deg, var(--account-raised), var(--account-surface), var(--account-raised)); background-size: 200% 100%; animation: account-shimmer 1.2s infinite linear; }
.account-center-loading p { margin: .35rem 0 0; }
@keyframes account-shimmer { to { background-position: -200% 0; } }

.account-center-menu-entry { color: var(--account-primary) !important; background: color-mix(in srgb, var(--account-primary) 9%, transparent) !important; border: 1px solid color-mix(in srgb, var(--account-primary) 24%, transparent) !important; }
.account-center-menu-entry small { display: block; margin-top: .1rem; color: var(--account-muted); font-size: .56rem; font-weight: 600; }
#header-user-role[data-member-rank="MEMBER"],
body.mobile-app-page.mobile-ui-v2 #header-user-role[data-member-rank="MEMBER"] { color: #34d399 !important; }
#header-user-role[data-member-rank="GOLD"],
body.mobile-app-page.mobile-ui-v2 #header-user-role[data-member-rank="GOLD"] { color: #fbbf24 !important; }
#header-user-role[data-member-rank="PLATINUM"],
body.mobile-app-page.mobile-ui-v2 #header-user-role[data-member-rank="PLATINUM"] { color: #c4b5fd !important; }
#dropdown-user-role-badge[data-member-rank="MEMBER"] { border-color: rgba(16, 185, 129, .3) !important; background: rgba(16, 185, 129, .14) !important; color: #059669 !important; }
#dropdown-user-role-badge[data-member-rank="GOLD"] { border-color: rgba(245, 158, 11, .36) !important; background: rgba(245, 158, 11, .14) !important; color: #b45309 !important; }
#dropdown-user-role-badge[data-member-rank="PLATINUM"] { border-color: rgba(139, 92, 246, .36) !important; background: rgba(139, 92, 246, .14) !important; color: #7c3aed !important; }
html.dark #dropdown-user-role-badge[data-member-rank="MEMBER"] { color: #34d399 !important; }
html.dark #dropdown-user-role-badge[data-member-rank="GOLD"] { color: #fbbf24 !important; }
html.dark #dropdown-user-role-badge[data-member-rank="PLATINUM"] { color: #c4b5fd !important; }
.member-rank-menu-summary {
  --member-rank-menu-accent: var(--account-primary);
  --member-rank-menu-soft: rgba(16, 185, 129, .1);
  display: grid;
  font-family: var(--font-sans, 'Prompt', sans-serif);
  gap: .45rem;
  padding: .7rem .8rem;
  border: 1px solid color-mix(in srgb, var(--member-rank-menu-accent) 28%, var(--account-border));
  border-radius: .9rem;
  background: linear-gradient(135deg, var(--member-rank-menu-soft), var(--account-surface));
}
.member-rank-menu-summary.hidden { display: none !important; }
.member-rank-menu-benefits { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .25rem .5rem; padding-top: .5rem; border-top: 1px solid var(--account-border); line-height: 1.5; }
.member-rank-menu-benefits strong { color: var(--member-rank-menu-accent); font-size: .8rem; font-weight: 800; }
#dropdown-rank-discount { word-spacing: .15em; }
.member-rank-menu-benefits span { color: var(--account-muted); font-size: .7rem; font-weight: 400; line-height: 1.75; letter-spacing: 0; overflow-wrap: anywhere; }
#dropdown-rank-reset { text-align: right; white-space: nowrap; }
#dropdown-rank-next-discount { grid-column: 1 / -1; }
.member-rank-menu-benefits [hidden] { display: none; }
.member-rank-menu-summary[data-member-rank="GOLD"] { --member-rank-menu-accent: #d97706; --member-rank-menu-soft: rgba(245, 158, 11, .1); }
.member-rank-menu-summary[data-member-rank="PLATINUM"] { --member-rank-menu-accent: #7c3aed; --member-rank-menu-soft: rgba(139, 92, 246, .1); }
.member-rank-menu-copy { display: flex; min-width: 0; align-items: end; justify-content: space-between; gap: .75rem; }
.member-rank-menu-copy > span { min-width: 0; }
.member-rank-menu-copy small { display: block; color: var(--account-muted); font-size: .56rem; font-weight: 700; }
.member-rank-menu-copy strong { display: block; margin-top: .08rem; color: var(--member-rank-menu-accent); font-size: .78rem; font-weight: 900; }
.member-rank-menu-copy > b { min-width: 0; max-width: 58%; color: var(--account-muted); font-size: .65rem; font-weight: 500; line-height: 1.65; letter-spacing: 0; text-align: right; overflow-wrap: anywhere; white-space: normal; font-variant-numeric: tabular-nums; }
.member-rank-menu-summary progress { width: 100%; height: .34rem; overflow: hidden; border: 0; border-radius: 999px; background: var(--account-raised); }
.member-rank-menu-summary progress::-webkit-progress-bar { border-radius: 999px; background: var(--account-raised); }
.member-rank-menu-summary progress::-webkit-progress-value { border-radius: 999px; background: var(--member-rank-menu-accent); }
.member-rank-menu-summary progress::-moz-progress-bar { border-radius: 999px; background: var(--member-rank-menu-accent); }
#account-center-menu-unread,.account-entry-unread,#mobile-account-unread-badge { display: grid; min-width: 1.15rem; height: 1.15rem; padding: 0 .22rem; place-items: center; border-radius: 999px; background: #f43f5e; color: #fff; font-size: .52rem; font-weight: 900; }
#account-center-menu-unread.hidden,.account-entry-unread.hidden,#mobile-account-unread-badge.hidden { display: none !important; }
#user-profile-menu-btn { position: relative; }
.account-entry-unread { position: absolute; top: -.35rem; right: -.35rem; border: 2px solid var(--account-surface); }

body.mobile-app-page.mobile-ui-v2 #mobile-bottom-nav .mobile-v2-history-nav-hidden {
  display: none !important;
}
#mobile-account-unread-badge {
  position: absolute;
  top: -.55rem;
  right: -.72rem;
  border: 2px solid var(--account-surface);
}

@media (max-width: 1440px) {
  :where(html[data-mobile-document="true"]) .member-rank-menu-summary { padding: .62rem .7rem; }
  :where(html[data-mobile-document="true"]) .member-rank-menu-copy { gap: .55rem; }
  :where(html[data-mobile-document="true"]) .member-rank-menu-copy > b { max-width: 58%; }
  :where(html[data-mobile-document="true"]) .account-center-overlay { padding: 0; place-items: stretch; background: var(--account-bg); }
  :where(html[data-mobile-document="true"]) .account-center-shell { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
  :where(html[data-mobile-document="true"]) .account-center-header { min-height: 4.5rem; padding: .65rem .75rem; }
  :where(html[data-mobile-document="true"]) .account-center-avatar { width: 2.75rem; height: 2.75rem; border-radius: .88rem; font-size: 1rem; }
  :where(html[data-mobile-document="true"]) .account-center-identity { gap: .65rem; }
  :where(html[data-mobile-document="true"]) .account-center-eyebrow { font-size: .52rem; }
  :where(html[data-mobile-document="true"]) .account-center-identity-copy h2 { max-width: 12rem; font-size: .95rem; }
  :where(html[data-mobile-document="true"]) .account-center-identity-copy > p:last-child { max-width: 13.5rem; font-size: .58rem; }
  :where(html[data-mobile-document="true"]) .account-center-close { width: 2.45rem; height: 2.45rem; }
  :where(html[data-mobile-document="true"]) .account-center-workspace { display: flex; flex-direction: column; }
  :where(html[data-mobile-document="true"]) .account-center-navigation { display: grid; min-height: auto; flex: 0 0 auto; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .2rem; padding: .42rem .55rem; overflow: visible; border-right: 0; border-bottom: 1px solid var(--account-border); }
  :where(html[data-mobile-document="true"]) .account-center-navigation--mobile-clean { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :where(html[data-mobile-document="true"]) .account-center-navigation > button { min-height: 3.35rem; flex-direction: column; justify-content: center; gap: .16rem; padding: .28rem .08rem; border-radius: .75rem; font-size: .52rem; text-align: center; }
  :where(html[data-mobile-document="true"]) .account-center-navigation > button > span:not(.account-center-nav-icon) { overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; }
  :where(html[data-mobile-document="true"]) .account-center-nav-icon { width: 1.55rem; height: 1.55rem; background: transparent; }
  :where(html[data-mobile-document="true"]) .account-center-nav-icon svg { width: .9rem; }
  :where(html[data-mobile-document="true"]) .account-center-navigation > button.active .account-center-nav-icon { background: transparent; color: currentColor; }
  :where(html[data-mobile-document="true"]) #account-center-nav-unread { position: absolute; top: .2rem; right: .35rem; min-width: 1rem; height: 1rem; font-size: .46rem; }
  :where(html[data-mobile-document="true"]) .account-center-sidebar-footer { display: none; }
  :where(html[data-mobile-document="true"]) .account-center-content { flex: 1; padding: .85rem .75rem calc(6rem + env(safe-area-inset-bottom)); }
  :where(html[data-mobile-document="true"]) .account-panel-heading { align-items: flex-start; margin-bottom: .85rem; }
  :where(html[data-mobile-document="true"]) .account-panel-heading h3 { font-size: 1.08rem; }
  :where(html[data-mobile-document="true"]) .account-panel-heading span { max-width: 15rem; font-size: .62rem; }
  :where(html[data-mobile-document="true"]) .account-heading-action { min-height: 2.25rem; padding-inline: .55rem; font-size: .58rem; }
  :where(html[data-mobile-document="true"]) .account-overview-grid { gap: .55rem; }
  :where(html[data-mobile-document="true"]) .account-stat-card { min-height: 4.7rem; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .55rem; padding: .62rem; }
  :where(html[data-mobile-document="true"]) .account-stat-card > svg { display: none; }
  :where(html[data-mobile-document="true"]) .account-stat-icon { width: 2.25rem; height: 2.25rem; border-radius: .72rem; }
  :where(html[data-mobile-document="true"]) .account-stat-icon svg { width: 1rem; }
  :where(html[data-mobile-document="true"]) .account-stat-card small { font-size: .53rem; }
  :where(html[data-mobile-document="true"]) .account-stat-card strong { font-size: .78rem; }
  :where(html[data-mobile-document="true"]) .account-rank-card { padding: .72rem; }
  :where(html[data-mobile-document="true"]) .account-rank-heading { grid-template-columns: 2.25rem minmax(0, 1fr); gap: .55rem; }
  :where(html[data-mobile-document="true"]) .account-rank-icon { width: 2.25rem; height: 2.25rem; }
  :where(html[data-mobile-document="true"]) .account-rank-heading > b { grid-column: 2; justify-self: start; }
  :where(html[data-mobile-document="true"]) .account-rank-progress { grid-template-columns: 1fr; align-items: start; }
  :where(html[data-mobile-document="true"]) .account-rank-progress-copy { text-align: left; }
  :where(html[data-mobile-document="true"]) .account-rank-progress progress { grid-column: 1; }
  :where(html[data-mobile-document="true"]) .account-rank-loading,:where(html[data-mobile-document="true"]) .account-rank-error,:where(html[data-mobile-document="true"]) .account-rank-disabled { grid-template-columns: 2.25rem minmax(0, 1fr); }
  :where(html[data-mobile-document="true"]) .account-rank-loading-bar,:where(html[data-mobile-document="true"]) .account-rank-error button,:where(html[data-mobile-document="true"]) .account-rank-disabled > b { grid-column: 2; justify-self: start; }
  :where(html[data-mobile-document="true"]) .account-block { margin-top: .75rem; padding: .75rem; }
  :where(html[data-mobile-document="true"]) .account-block-title h4 { font-size: .75rem; }
  :where(html[data-mobile-document="true"]) .account-block-title p { font-size: .55rem; }
  :where(html[data-mobile-document="true"]) .account-quick-actions { grid-template-columns: 1fr; gap: .45rem; }
  :where(html[data-mobile-document="true"]) .account-quick-actions > button { min-height: 3.45rem; }
  :where(html[data-mobile-document="true"]) .account-quick-actions strong { font-size: .66rem; }
  :where(html[data-mobile-document="true"]) .account-quick-actions small { font-size: .54rem; }
  :where(html[data-mobile-document="true"]) .account-form { gap: .8rem; padding: .75rem; }
  :where(html[data-mobile-document="true"]) .account-form-grid { grid-template-columns: 1fr; gap: .8rem; }
  :where(html[data-mobile-document="true"]) .account-form input { min-height: 3rem; font-size: 1rem; }
  :where(html[data-mobile-document="true"]) .account-form-actions { align-items: stretch; flex-direction: column; }
  :where(html[data-mobile-document="true"]) .account-form-actions button { justify-content: center; min-height: 2.85rem; }
  :where(html[data-mobile-document="true"]) .account-security-list > div { grid-template-columns: 2.25rem minmax(0, 1fr); gap: .6rem; padding: .7rem; }
  :where(html[data-mobile-document="true"]) .account-security-list > div > button,:where(html[data-mobile-document="true"]) .account-security-list > div > b { grid-column: 2; justify-self: start; }
  :where(html[data-mobile-document="true"]) .account-security-two-factor > button { align-self: auto; }
  :where(html[data-mobile-document="true"]) .account-two-factor-flow { padding: .7rem; }
  :where(html[data-mobile-document="true"]) .account-two-factor-form input { min-height: 2.8rem; font-size: 1rem; }
  :where(html[data-mobile-document="true"]) .account-two-factor-verify { grid-template-columns: 1fr; }
  :where(html[data-mobile-document="true"]) .account-two-factor-qr { margin-inline: auto; }
  :where(html[data-mobile-document="true"]) .account-security-two-factor > button,
  :where(html[data-mobile-document="true"]) .account-security-list .account-two-factor-actions button,
  :where(html[data-mobile-document="true"]) .account-security-list .account-two-factor-secret-copy { min-height: 2.75rem; }
  :where(html[data-mobile-document="true"]) .account-security-summary { align-items: flex-start; padding: .8rem; }
  :where(html[data-mobile-document="true"]) .account-security-summary > span { width: 2.55rem; height: 2.55rem; }
  :where(html[data-mobile-document="true"]) .account-notification { grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: .55rem; padding: .65rem; }
  :where(html[data-mobile-document="true"]) .account-notification-icon { width: 2.25rem; height: 2.25rem; }
  :where(html[data-mobile-document="true"]) .account-notification-copy strong { font-size: .66rem; }
  :where(html[data-mobile-document="true"]) .account-notification-copy > small { font-size: .56rem; }
  :where(html[data-mobile-document="true"]) .account-ticket-list article { grid-template-columns: 2.1rem minmax(0, 1fr); }
  :where(html[data-mobile-document="true"]) .account-ticket-status { grid-column: 2; justify-self: start; }
  :where(html[data-mobile-document="true"]) .account-ticket-icon { width: 2.1rem; height: 2.1rem; }
}

@media (min-width: 640px) and (max-width: 1440px) {
  :where(html[data-mobile-document="true"]) .account-two-factor-verify { grid-template-columns: 9.25rem minmax(0, 1fr); }
  :where(html[data-mobile-document="true"]) .account-two-factor-qr { margin-inline: 0; }
}

@media (max-width: 370px) {
  .account-center-header { padding-inline: .55rem; }
  .account-center-identity-copy h2 { max-width: 9.5rem; }
  .account-center-identity-copy > p:last-child { max-width: 10rem; }
  .account-center-navigation { padding-inline: .35rem; }
  .account-center-navigation > button { font-size: .48rem; }
  .account-overview-grid { grid-template-columns: 1fr; }
  .account-social-links { grid-template-columns: 1fr; }
  .account-panel-heading { flex-wrap: wrap; }
  .account-heading-action { margin-left: auto; }
}
.checkout-member-rank-badge {
  --checkout-rank-rgb: 16, 185, 129;
  --checkout-rank-ink: #059669;
  display: inline-flex;
  min-height: 1.65rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .28rem .65rem;
  border: 1px solid rgba(var(--checkout-rank-rgb), .36);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(var(--checkout-rank-rgb), .06), rgba(var(--checkout-rank-rgb), .14));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 2px 6px rgba(var(--checkout-rank-rgb), .08);
  color: var(--checkout-rank-ink);
  font-family: var(--font-sans, 'Prompt', sans-serif);
  font-size: .65rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .07em;
  white-space: nowrap;
}
.checkout-member-rank-badge.hidden { display: none; }
.checkout-member-rank-badge[data-member-rank="GOLD"] {
  --checkout-rank-rgb: 245, 158, 11;
  --checkout-rank-ink: #b45309;
}
.checkout-member-rank-badge[data-member-rank="PLATINUM"] {
  --checkout-rank-rgb: 139, 92, 246;
  --checkout-rank-ink: #7c3aed;
}
.dark .checkout-member-rank-badge {
  --checkout-rank-ink: #34d399;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 8px rgba(0, 0, 0, .12);
}
.dark .checkout-member-rank-badge[data-member-rank="GOLD"] { --checkout-rank-ink: #fbbf24; }
.dark .checkout-member-rank-badge[data-member-rank="PLATINUM"] { --checkout-rank-ink: #c4b5fd; }