/* Account-only density, using the site's existing theme and paper surfaces. */
#account { --account-gap:16px; font-size:14px; line-height:1.6; }
#account .section-heading { margin-bottom:16px; }
#account .section-heading h2 { font-size:25px; }
#account .panel:not(.admin-management) { padding:20px 22px; border-radius:18px; }
#account .account-columns { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr); gap:var(--account-gap); margin-top:var(--account-gap); align-items:start; }
#account .account-settings, #account .account-activity { display:grid; gap:var(--account-gap); min-width:0; }
#account .account-columns .panel { margin:0; min-width:0; }
#account .account-settings:has(>#accountProfile[hidden]):has(>#accountSecurity[hidden]) { display:none; }
#account .account-columns:has(>.account-settings> #accountProfile[hidden]) { grid-template-columns:1fr; }
#account .account-overview { grid-template-columns:minmax(0,.85fr) minmax(460px,1.15fr); gap:24px; margin:0; min-height:0; }
#account .account-identity .eyebrow { margin:0 0 6px; }
#account .account-name { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
#account .account-name h3 { margin:0; font-size:23px; overflow-wrap:anywhere; }
#account .account-balance { display:flex; align-items:baseline; gap:8px; margin:10px 0 0; }
#account .account-balance strong { font-size:24px; line-height:1.3; }
#account .account-balance span { color:var(--brand-muted); font-size:12px; }
#account .account-status { display:flex; align-items:center; gap:16px; padding:12px 16px; text-align:left; border-radius:13px; min-width:0; }
#account .account-emblem { flex:0 0 136px; text-align:center; }
#account .account-orb { width:86px; margin:0 auto; }
#account .account-orb-caption { font-size:9px; letter-spacing:0; margin:4px 0 0; white-space:nowrap; }
#account #accountMembershipStatus { min-width:0; }
#account .account-access-label { font-size:12px; padding:4px 9px; }
#account .account-expiry, #account #accountMembershipStatus .small { font-size:11px; line-height:1.6; margin:7px 0 0; }
#account .account-recent-works { margin-top:14px; border-top:1px solid var(--brand-line); padding-top:10px; }
#account .account-recent-works>summary { min-height:28px; font-size:13px; }
#account .saved-work { padding:12px 0; }
#account .saved-work p { margin:4px 0; }
#account .primary:not(.admin-management *), #account .secondary:not(.admin-management *) { min-height:38px; padding:7px 13px; border-radius:9px; font-size:12px; }
#account input:not([type=checkbox]):not(.admin-management *), #account select:not(.admin-management *) { min-height:40px; padding:8px 11px; border-radius:9px; font-size:14px; line-height:1.5; }
#account label:not(.admin-management *) { font-size:12px; line-height:1.5; }
#account h3:not(.admin-management *) { font-size:18px; }
#account h4:not(.admin-management *) { font-size:14px; }
#account .eyebrow { font-size:10px; }
#account .account-security { max-width:none; }
#account .account-security>summary { padding:0; font-size:14px; }
#account .account-security[open]>summary { margin-bottom:12px; }
#account .account-security form { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#account .account-security form>p { grid-column:1/-1; margin:0; }
#account .account-security form>button { grid-column:1/-1; }
#account .account-security form>label { min-width:0; }
#account #membershipPanel:not(.admin-management) .membership-heading { gap:10px; }
#account #membershipPanel:not(.admin-management) .membership-heading .eyebrow { margin:0 0 4px; }
#account #membershipPanel:not(.admin-management) .membership-heading h3 { font-size:16px; }
#account #membershipPanel:not(.admin-management)>p { margin:12px 0; font-size:12px; }
#account .membership-plans { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:16px 0 12px; }
#account .membership-plan { display:flex; flex-direction:column; padding:12px; border-radius:12px; min-width:0; gap:0; }
#account .membership-plan h4 { font-size:14px; }
#account .membership-plan .membership-price { font-size:25px; margin:10px 0 4px; line-height:1.2; }
#account .membership-price span { font-size:13px; margin-right:2px; }
#account .membership-plan>p:not(.membership-price) { font-size:11px; margin:0 0 8px; }
#account .membership-plan button { margin-top:auto; padding-inline:5px; font-size:11px; }
#account .membership-order { margin-top:14px; padding:16px; border-radius:12px; }
#account .membership-qr { width:230px; margin:16px auto; }
#account .membership-steps { font-size:12px; line-height:1.7; }
#account .membership-order-list { padding:10px 0; gap:6px; }
#account .feedback-heading { margin-bottom:8px; }
#account .feedback-history h3 { font-size:16px; margin:0; }
#account .feedback-history details { margin:12px 0 0; }
#account .feedback-history [data-error]:empty { display:none; }
#account>p.muted { margin:16px 0 8px; font-size:11px; }
#account a, #account a:hover, #account a:focus, #account a:active { text-decoration:none; }
#account .account-columns:has(.admin-management) { grid-template-columns:1fr; }
/* Preserve the established dense management console. */
#account .admin-management { font-size:14px; }
@media(max-width:1050px) {
 #account .account-columns { grid-template-columns:1fr; }
 #account .account-status { gap:10px; }
}
@media(max-width:650px) {
 #account { --account-gap:12px; }
 #account .panel:not(.admin-management) { padding:16px; border-radius:15px; }
 #account .account-overview { grid-template-columns:1fr; gap:14px; }
 #account .account-name h3 { font-size:21px; }
 #account .account-status { padding:10px 12px; }
 #account .account-emblem { flex-basis:100px; }
 #account .account-orb { width:64px; }
 #account .account-orb-caption { font-size:8px; white-space:normal; }
 #account .account-security form { grid-template-columns:1fr; }
 #account .primary:not(.admin-management *), #account .secondary:not(.admin-management *) { min-height:42px; }
 #account .membership-plan { padding:10px 8px; }
 #account .membership-plan .membership-price { font-size:22px; }
}

/* ===== 个人中心：状态优先 + 会员暗色卡 + 点击展开 ===== */
#account .account-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
#account .account-action{display:flex;align-items:center;gap:10px;text-align:left;background:var(--brand-surface,#fff);border:1px solid var(--brand-line,#cfe3d8);border-radius:14px;padding:13px 14px;color:var(--brand-text,#17211a);cursor:pointer;transition:border-color .16s ease,transform .16s ease}
#account .account-action:hover{border-color:var(--brand-primary,#1d6d46);transform:translateY(-1px)}
#account .account-action-icon{width:30px;height:30px;flex:0 0 auto;border-radius:9px;background:var(--brand-tint,#eef5f0);color:var(--brand-primary,#1d6d46);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}
#account .account-action strong{display:block;font-size:12px;line-height:1.3;color:var(--brand-text,#17211a)}
#account .account-action small{display:block;font-size:10px;color:var(--brand-muted,#68756b);margin-top:2px;line-height:1.3}
#account .account-action-arrow{margin-left:auto;color:var(--brand-muted,#68756b);font-size:12px}
#account .account-drawer{margin-top:16px;border:1px solid var(--brand-line,#cfe3d8);border-radius:18px;background:var(--brand-surface,#fff);padding:20px 22px;scroll-margin-top:18px}
#account .account-drawer[hidden]{display:none}
#account .account-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--brand-line,#cfe3d8);margin-bottom:16px}
#account .account-drawer-head .eyebrow{margin:0 0 4px}
#account .account-drawer-head h3{font-size:21px;margin:0;color:var(--brand-text,#17211a)}
#account .account-drawer-body .panel{border:0;padding:0;background:transparent;box-shadow:none}
#account .account-drawer-body .account-security{max-width:none}
#account.account-detail-open #accountSummary,#account.account-detail-open .account-actions{display:none}
#account .account-pass{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;overflow:hidden;gap:0;min-height:238px;padding:18px 20px 16px;border-radius:18px;border:1px solid var(--plan-line,rgba(255,255,255,.16))!important;background-color:transparent!important;background-image:linear-gradient(148deg,var(--plan-bg1,#1D6D46),var(--plan-bg2,#0D3A25))!important;color:var(--plan-ink,#F2FBF5)!important;text-align:left;box-shadow:0 22px 44px -34px rgba(20,30,22,.55)}
#account .account-pass-orb{position:absolute;right:-48px;top:-54px;width:230px;height:230px;opacity:.2;color:var(--plan-accent,#BFE6D0);z-index:0;margin:0}
#account .account-pass-orb svg{display:block;width:100%;height:100%}
#account .account-pass-head{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:1}
#account .account-pass-brand{font-size:9px;letter-spacing:2.2px;color:var(--plan-accent,#BFE6D0);font-weight:700}
#account .account-pass-chip{font-size:8px;letter-spacing:1px;border:1px solid color-mix(in srgb,var(--plan-accent,#BFE6D0) 45%,transparent);color:var(--plan-accent,#BFE6D0);border-radius:999px;padding:2px 7px}
#account .account-pass-name{font-size:21px;line-height:1.25;margin:10px 0 0;color:var(--plan-ink,#F2FBF5);font-weight:600;letter-spacing:.2px;position:relative;z-index:1}
#account .account-pass-rule{height:1px;margin:10px 0 9px;background:linear-gradient(90deg,color-mix(in srgb,var(--plan-accent,#BFE6D0) 55%,transparent),transparent);position:relative;z-index:1}
#account .account-pass-body{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;position:relative;z-index:1;padding-right:50px;min-height:47px}
#account .account-pass #accountMembershipStatus{min-width:0}
#account .account-pass .account-access-label{display:inline-block;background:var(--plan-accent,#BFE6D0);color:var(--plan-bg2,#0D3A25);font-size:10px;padding:3px 8px;border-radius:999px;line-height:1.4}
#account .account-pass .account-expiry{color:var(--plan-ink,#F2FBF5);font-size:10px;margin:5px 0 0;line-height:1.5}
#account .account-pass #accountMembershipStatus .muted,#account .account-pass #accountMembershipStatus .small{color:var(--plan-muted,#C6E4D3);font-size:10px;line-height:1.5;margin:4px 0 0}
#account .account-pass-logo{position:absolute;right:0;bottom:0;width:38px;height:38px;border-radius:10px;display:block;box-shadow:0 8px 18px -12px rgba(0,0,0,.8)}
#account .account-pass-cta{margin-top:10px;align-self:flex-start;border:1px solid color-mix(in srgb,var(--plan-accent,#BFE6D0) 55%,transparent);background:transparent;color:var(--plan-accent,#BFE6D0);border-radius:9px;padding:6px 10px;font-size:10px;font-weight:700;position:relative;z-index:1;min-height:0}
#account .account-pass-cta:hover{background:rgba(255,255,255,.08);color:var(--plan-ink,#F2FBF5)}
#account .account-pass-caption{position:static;margin:7px 0 0;padding-right:50px;color:color-mix(in srgb,var(--plan-muted,#C6E4D3) 72%,transparent);font-size:8px;letter-spacing:.2px;z-index:1}
@media(max-width:1050px){#account .account-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){#account .account-actions{gap:8px}#account .account-action{padding:11px 12px;gap:8px}#account .account-action-icon{width:26px;height:26px;border-radius:8px;font-size:12px}#account .account-pass{min-height:224px;padding:16px 16px 14px}#account .account-pass-name{font-size:20px}#account .account-pass-caption{margin-top:6px}}
#account .account-sections{display:flex;flex-direction:column;gap:16px;margin-top:16px}
#account .account-sections > .panel{margin:0;min-width:0}
#account .account-sections > .account-security{margin:0}
#account .account-pass{min-height:190px}
#account .account-pass-caption{padding-right:50px}
#account .account-actions,#account .account-drawer{display:none!important}
#account .account-pass.is-free{background-image:none!important;background-color:#fff!important;color:var(--brand-text,#17211a)!important;border:1px solid var(--brand-line,#cfe3d8)!important;box-shadow:0 2px 14px rgba(23,33,26,.035)}
#account .account-pass.is-free .account-pass-orb{display:none}
#account .account-pass.is-free .account-pass-brand,#account .account-pass.is-free .account-pass-chip{color:var(--brand-muted,#68756b);border-color:var(--brand-line,#cfe3d8)}
#account .account-pass.is-free .account-pass-name{color:var(--brand-text,#17211a)}
#account .account-pass.is-free .account-pass-rule{background:var(--brand-line,#cfe3d8)}
#account .account-pass.is-free .account-expiry{color:var(--brand-muted,#68756b)!important}
#account .account-pass.is-free .account-pass-logo{box-shadow:0 6px 14px -10px rgba(0,0,0,.25)}
#account .account-pass.is-free .account-pass-chip{display:none}
/* ===== 生效会员：更有价值的会员卡质感（免费版不受影响） ===== */
#account .account-pass:not(.is-free){min-height:232px;padding:20px 22px 18px;border-color:color-mix(in srgb,var(--plan-accent,#F0D9A8) 48%,transparent)!important;background-color:transparent!important;background-image:radial-gradient(560px 260px at 98% -18%,color-mix(in srgb,var(--plan-accent,#F0D9A8) 24%,transparent) 0%,transparent 62%),linear-gradient(145deg,color-mix(in srgb,var(--plan-bg1,#8A5A1C) 90%,#1A1208),var(--plan-bg2,#3F2A0E))!important;box-shadow:0 30px 56px -40px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.14)}
#account .account-pass:not(.is-free):before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.075) 44%,transparent 57%),repeating-linear-gradient(90deg,transparent 0 10px,rgba(255,255,255,.012) 10px 11px);pointer-events:none;z-index:0}
#account .account-pass:not(.is-free):after{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--plan-accent,#F0D9A8) 80%,transparent),transparent);z-index:1}
#account .account-pass:not(.is-free) .account-pass-head,#account .account-pass:not(.is-free) .account-pass-name,#account .account-pass:not(.is-free) .account-pass-rule,#account .account-pass:not(.is-free) .account-pass-body,#account .account-pass:not(.is-free) .account-pass-orb{z-index:2}
#account .account-pass:not(.is-free) .account-pass-brand{letter-spacing:2.6px;color:color-mix(in srgb,var(--plan-accent,#F0D9A8) 90%,#fff)}
#account .account-pass:not(.is-free) .account-pass-chip{border-color:color-mix(in srgb,var(--plan-accent,#F0D9A8) 60%,transparent);color:color-mix(in srgb,var(--plan-accent,#F0D9A8) 90%,#fff);background:rgba(255,255,255,.06);letter-spacing:1.4px}
#account .account-pass:not(.is-free) .account-pass-name{margin:22px 0 0;font-size:24px;letter-spacing:.6px;color:#FFF9EC;font-weight:600;text-shadow:0 1px 0 rgba(0,0,0,.2);display:flex;align-items:center;gap:9px}
#account .account-pass:not(.is-free) .account-pass-name:before{content:"";width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:var(--plan-accent,#F0D9A8);box-shadow:0 0 12px color-mix(in srgb,var(--plan-accent,#F0D9A8) 70%,transparent)}
#account .account-pass:not(.is-free) .account-pass-rule{background:linear-gradient(90deg,color-mix(in srgb,var(--plan-accent,#F0D9A8) 70%,transparent),rgba(255,255,255,.05));margin:14px 0 10px}
#account .account-pass:not(.is-free) .account-pass-body{margin-top:auto;padding-right:60px;min-height:46px}
#account .account-pass:not(.is-free) .account-expiry{display:inline-flex;align-items:center;gap:6px;margin:0;padding:6px 11px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.075);color:#F8EEDC!important;font-size:11px;line-height:1.4;backdrop-filter:blur(5px)}
#account .account-pass:not(.is-free) .account-expiry:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--plan-accent,#F0D9A8);display:block;flex:0 0 auto;box-shadow:0 0 8px var(--plan-accent,#F0D9A8)}
#account .account-pass:not(.is-free) .account-pass-logo{width:42px;height:42px;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 0 0 4px rgba(255,255,255,.05),0 12px 24px -14px rgba(0,0,0,.9)}
#account .account-pass:not(.is-free) .account-pass-orb{opacity:.28;color:color-mix(in srgb,var(--plan-accent,#F0D9A8) 65%,transparent)}
/* 生效会员卡复刻年卡的金属扫光/金色光晕 */
#account .account-pass:not(.is-free){border-color:color-mix(in srgb,var(--plan-accent,#F0D9A8) 64%,#fff)!important;box-shadow:0 34px 66px -36px rgba(0,0,0,.65),0 0 0 1px color-mix(in srgb,var(--plan-accent,#F0D9A8) 24%,transparent),inset 0 1px 0 rgba(255,255,255,.22)!important}
#account .account-pass:not(.is-free):after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.2) 46%,transparent 58%);background-size:230% 100%;animation:mbPassShine 5.8s ease-in-out infinite;pointer-events:none;z-index:1;mix-blend-mode:screen}
#account .account-pass:not(.is-free) .account-pass-head,#account .account-pass:not(.is-free) .account-pass-name,#account .account-pass:not(.is-free) .account-pass-rule,#account .account-pass:not(.is-free) .account-pass-body,#account .account-pass:not(.is-free) .account-pass-orb{z-index:2}
#account .account-pass:not(.is-free) .account-pass-chip{border-color:color-mix(in srgb,var(--plan-accent,#F0D9A8) 62%,transparent);background:linear-gradient(135deg,rgba(255,241,207,.2),color-mix(in srgb,var(--plan-accent,#F0D9A8) 16%,transparent));color:#FFF1CF}
@keyframes mbPassShine{0%,58%{background-position:180% 0}78%,100%{background-position:-80% 0}}
@media(prefers-reduced-motion:reduce){#account .account-pass:not(.is-free):after{animation:none}}
/* 账号安全：右侧开关，默认关闭 */
#account .account-security>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;list-style:none;cursor:pointer;padding:0;font-size:14px;font-weight:600;color:var(--brand-text,#17211a);min-height:42px}
#account .account-security>summary::-webkit-details-marker{display:none}
#account .account-security>summary::marker{content:""}
#account .account-security-switch{position:relative;width:40px;height:23px;flex:0 0 auto;border-radius:999px;background:#dfe7e1;border:1px solid #d3ded6;transition:background .18s ease,border-color .18s ease;box-shadow:inset 0 1px 2px rgba(0,0,0,.05)}
#account .account-security-switch:after{content:"";position:absolute;left:2px;top:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .18s ease}
#account .account-security[open]>summary{margin-bottom:12px}
#account .account-security[open] .account-security-switch{background:var(--brand-primary,#1d6d46);border-color:var(--brand-primary,#1d6d46)}
#account .account-security[open] .account-security-switch:after{transform:translateX(16px)}
#account .account-security>summary:focus-visible{outline:2px solid var(--brand-primary,#1d6d46);outline-offset:4px;border-radius:8px}

/* The account density rules above must not compress all three plans on phones. */
@media (max-width:680px){
  #account #membershipPanel .membership-plans.plan-cards{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:12px}
  #account #membershipPanel .membership-plan-card{height:auto;padding:20px 18px 16px}
}