/* Account and community pages share the approved B palette and the original app tokens. */
.accountPage { min-width:0; }
.accountPage button,.accountPage a { -webkit-tap-highlight-color:transparent; }
.accountHead,.accountHeading,.accountSectionBar,.accountInlineActions { display:flex; align-items:center; gap:12px; }
.accountHead { justify-content:space-between; margin-bottom:24px; }
.accountHeading { min-width:0; }
.accountHead .pageTitle { margin:0; }
.accountBack { flex-shrink:0; width:44px; height:44px; border-radius:50%; background:var(--panel); border:1px solid var(--line); }
.accountPage .uiIcon { width:20px; height:20px; flex-shrink:0; }
.accountPage .btnGhost,.accountPage .btnPrimary { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.accountPage button:disabled { opacity:.52; }
.accountMuted { color:var(--dim); font-size:12px; line-height:1.6; }
.accountTabs { display:flex; gap:24px; border-bottom:1px solid var(--line); margin-bottom:24px; overflow-x:auto; }
.accountTabs>button { display:inline-flex; align-items:center; gap:7px; flex-shrink:0; min-height:48px; padding:8px 4px 13px; background:none; border:0; border-bottom:2px solid transparent; color:var(--dim); font-size:15px; }
.accountTabs>button.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.accountSectionBar { justify-content:space-between; flex-wrap:wrap; margin-bottom:16px; }
.accountSectionBar h2 { font-size:20px; margin:0; }
.accountPills { display:flex; gap:6px; }
.accountPills button { min-height:44px; padding:9px 15px; border:1px solid transparent; border-radius:24px; color:var(--dim); background:transparent; font-size:14px; }
.accountPills button.active { color:var(--accent); background:var(--accent-soft); border-color:var(--accent-line); }
.accountNotice,.accountError { display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:12px; font-size:14px; line-height:1.6; margin:0 0 18px; }
.accountNotice { color:var(--accent); background:var(--accent-soft); }
.accountError { border:1px solid var(--accent-line); background:var(--panel); color:var(--text); justify-content:space-between; }
.accountError .btnGhost { flex-shrink:0; }
.accountLoading { display:flex; gap:10px; align-items:center; justify-content:center; min-height:250px; color:var(--dim); font-size:14px; }
.accountSpinner { width:19px; height:19px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:accountSpin .85s linear infinite; }
@keyframes accountSpin { to { transform:rotate(360deg); } }
.accountEmpty { display:flex; flex-direction:column; align-items:center; gap:12px; padding:34px 10px; text-align:center; }
.accountEmpty .ipArt { width:205px; }
.accountEmpty h2 { margin:4px 0; font-size:19px; color:var(--dim); font-weight:500; }
.accountCardGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.accountStoryCard { position:relative; display:flex; align-items:center; min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:18px; }
.accountStoryLink { display:flex; align-items:center; gap:16px; min-width:0; width:100%; padding:14px; border:0; background:transparent; text-align:left; color:var(--text); border-radius:18px; }
.accountStoryLink:hover { background:var(--hover); }
.accountStoryLink img { width:76px; height:96px; object-fit:cover; object-position:50% 30%; border-radius:12px; flex-shrink:0; }
.accountStoryInfo { display:flex; flex-direction:column; gap:8px; min-width:0; flex:1; }
.accountStoryInfo>strong { font-family:var(--reading-font); font-size:19px; line-height:1.5; overflow-wrap:anywhere; }
.accountTags { display:flex; flex-wrap:wrap; gap:5px; }
.accountTags>span { background:var(--accent-soft); color:var(--accent); border-radius:5px; padding:2px 6px; font-size:12px; line-height:1.5; }
.accountStoryCard .accountRemove { color:var(--accent); width:44px; height:44px; margin-right:8px; flex-shrink:0; border:0; border-radius:12px; background:var(--accent-soft); }
.accountRemove .uiIcon { fill:var(--accent-soft); }
.accountRecords { display:flex; flex-direction:column; gap:14px; }
.accountPerson { display:flex; align-items:center; gap:12px; padding:16px 20px; background:var(--panel); border:1px solid var(--line); border-radius:17px; }
.accountPersonLink { display:flex; align-items:center; gap:14px; min-width:0; flex:1; border:0; padding:0; background:none; color:var(--text); text-align:left; min-height:48px; }
.accountPersonLink img { width:50px; height:50px; object-fit:cover; border-radius:50%; background:var(--accent-soft); }
.accountPersonLink strong { font-size:16px; font-weight:500; overflow-wrap:anywhere; }
.accountPersonLink>.uiIcon { margin-left:auto; color:var(--dim); width:17px; }
.accountPerson>.btnGhost { flex-shrink:0; min-width:78px; }
.accountAuthor.panel { display:grid; grid-template-columns:76px minmax(0,1fr) auto; gap:16px; align-items:center; margin-bottom:26px; }
.accountAuthorAvatar { width:76px; height:76px; object-fit:cover; border-radius:50%; background:var(--accent-soft); border:3px solid var(--panel2); }
.accountAuthorName h2 { font-size:26px; margin:0 0 6px; overflow-wrap:anywhere; }
.accountFollowing { background:var(--accent-soft); color:var(--accent); }
.accountAuthorStats { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); padding-top:20px; margin-top:4px; border-top:1px solid var(--line); }
.accountAuthorStats>div { display:flex; flex-direction:column; align-items:center; gap:6px; }
.accountAuthorStats>div+div { border-left:1px solid var(--line); }
.accountAuthorStats b { font-size:24px; font-family:var(--reading-font); }
.accountAuthorStats span { font-size:12px; color:var(--dim); }
.accountTarget { margin-bottom:18px; }
.accountTargetLink { display:flex; align-items:center; width:100%; gap:14px; text-align:left; padding:14px 18px; border:1px solid var(--line); border-radius:17px; background:var(--panel); color:var(--text); }
.accountTargetLink img { width:55px; height:66px; border-radius:10px; object-fit:cover; object-position:50% 30%; }
.accountTargetLink>span { display:flex; flex:1; flex-direction:column; gap:5px; min-width:0; }
.accountTargetLink strong { font-size:20px; font-family:var(--reading-font); overflow-wrap:anywhere; }
.accountChargeForm { max-width:650px; margin:0 auto; }
.accountAmountChoices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:24px; }
.accountAmountChoices button { display:flex; flex-direction:column; align-items:center; gap:6px; padding:20px 8px; background:var(--panel2); border:1px solid var(--line); border-radius:14px; color:var(--text); font-size:23px; }
.accountAmountChoices button span { font-size:12px; color:var(--dim); }
.accountAmountChoices button.active { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.accountPage .formRow input,.accountPage .formRow textarea { width:100%; box-sizing:border-box; }
.accountChargeBalance { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--dim); font-size:14px; }
.accountChargeGain { display:flex; align-items:center; gap:7px; margin:-8px 0 18px; color:var(--gold); font-size:14px; line-height:1.6; }
.accountTextButton { min-height:44px; padding:8px 5px; border:0; background:none; color:var(--accent); font-size:14px; cursor:pointer; }
.accountFull { width:100%; margin-top:14px; }
.accountValidation { color:var(--accent); font-size:13px; line-height:1.6; margin:4px 0; }
.accountChargeSuccess { display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }
.accountChargeSuccess .ipArt { width:210px; }
.accountChargeSuccess h2,.accountChargeSuccess p { margin:0; }
.accountChargeSuccess p { color:var(--dim); font-size:14px; }
.accountRecord { display:flex; align-items:center; gap:16px; padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.accountChargeRecord { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px 16px; }
.accountRecordPerson { display:flex; align-items:center; gap:12px; min-width:0; min-height:44px; text-align:left; background:none; color:var(--text); padding:0; border:0; font-size:15px; }
.accountRecordPerson img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.accountRecordPerson span { overflow-wrap:anywhere; }
.accountAmount { color:var(--accent); font-size:20px; font-weight:500; font-variant-numeric:tabular-nums; }
.accountRecordCard { display:flex; align-items:center; justify-self:start; gap:4px; min-height:44px; padding:0; border:0; background:none; color:var(--dim); font-size:13px; text-align:left; overflow-wrap:anywhere; }
.accountRecordCard .uiIcon { width:15px; height:15px; }
.accountChargeRecord>time { text-align:right; }
.accountReview.panel { padding:22px; margin:0; }
.accountReview .accountSectionBar { margin-bottom:8px; gap:8px; }
.accountReview .accountSectionBar>strong { font-size:15px; font-weight:500; }
.accountReviewCard { display:flex; align-items:center; gap:5px; min-height:44px; padding:0; background:none; color:var(--text); border:0; text-align:left; font-family:var(--reading-font); font-size:19px; }
.accountReviewCard .uiIcon { width:16px; color:var(--dim); }
.accountRating { display:flex; align-items:center; gap:3px; color:var(--gold); }
.accountRating .uiIcon { width:15px; height:15px; fill:currentColor; }
.accountRating>span { color:var(--accent); font-size:12px; margin-left:8px; }
.accountReviewContent { font-size:15px; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; margin:15px 0 6px; }
.accountReviewActions { display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top:8px; }
.accountReviewActions>span { font-size:13px; color:var(--dim); }
.accountReviewEditor { margin-bottom:20px; }
.accountStars { display:flex; align-items:center; gap:3px; margin:0 0 16px; }
.accountStars>button { width:44px; height:44px; padding:9px; background:none; color:var(--dim); border:0; border-radius:10px; }
.accountStars .uiIcon { width:25px; height:25px; }
.accountStars>button.active { color:var(--gold); }
.accountStars>button.active .uiIcon { fill:currentColor; }
.accountStars>span { margin-left:10px; color:var(--dim); font-size:13px; }
.accountReviewEditor .accountSectionBar:last-child { margin-bottom:0; }
.accountSrOnly { position:absolute!important; width:1px; height:1px; padding:0!important; margin:-1px!important; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.accountWallet.panel { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:30px; padding:28px 32px; overflow:hidden; }
.accountWallet>div { position:relative; z-index:1; }
.accountWallet strong { display:block; font-size:46px; font-weight:500; font-family:var(--reading-font); line-height:1.4; color:var(--text); margin:8px 0 20px; }
.accountWallet .ipArt { width:185px; margin:-20px 0; }
.accountSectionTitle { font-size:22px!important; margin:25px 0 18px; }
.accountLedger { display:flex; flex-direction:column; gap:12px; }
.accountLedgerIcon { display:flex; align-items:center; justify-content:center; width:42px; height:42px; background:var(--accent-soft); border-radius:13px; color:var(--accent); flex-shrink:0; }
.accountLedgerMain { display:flex; flex-direction:column; gap:6px; min-width:0; flex:1; }
.accountLedgerMain strong { font-size:14px; font-weight:500; overflow-wrap:anywhere; }
.accountLedgerValue { display:flex; flex-direction:column; gap:6px; align-items:flex-end; flex-shrink:0; }
.accountLedgerValue>b { font-size:18px; font-weight:500; font-variant-numeric:tabular-nums; }
.accountPositive { color:var(--accent); }
.accountOrderDetail { margin-bottom:20px; }
.accountOrderDetail dl { margin:20px 0; }
.accountOrderDetail dl>div { display:grid; grid-template-columns:100px minmax(0,1fr); gap:16px; margin-bottom:13px; font-size:14px; line-height:1.6; }
.accountOrderDetail dt { color:var(--dim); }
.accountOrderDetail dd { margin:0; overflow-wrap:anywhere; text-align:right; }
.accountOrderHero { display:flex; align-items:center; gap:16px; justify-content:space-between; }
.accountOrderHero>b { font-size:25px; font-family:var(--reading-font); }
.accountOrderDetail .accountInlineActions { justify-content:flex-end; }
.accountOrder { background:var(--panel); border:1px solid var(--line); border-radius:17px; }
.accountOrderLink { display:flex; align-items:center; gap:14px; width:100%; padding:22px; border:0; background:none; color:var(--text); text-align:left; }
.accountOrderLink>span { display:flex; flex-direction:column; gap:8px; min-width:0; }
.accountOrderLink strong { font-size:21px; font-family:var(--reading-font); }
.accountOrderLink>.uiIcon { color:var(--dim); }
.accountOrderValue { margin-left:auto; align-items:flex-end; flex-shrink:0; }
.accountOrderValue b { font-size:17px; font-weight:500; }
.accountStatus { font-size:12px; line-height:1.6; color:var(--dim); }
.accountStatus.status-paid,.accountStatus.status-completed,.accountStatus.status-succeeded,.accountStatus.status-done,.accountStatus.status-success { color:var(--accent); }
.accountStatus.status-pending { color:var(--gold); }
.accountGallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.accountGallery .accountDrawing { margin:0; padding:18px; }
.accountDrawing>.accountSectionBar:first-child { margin-bottom:14px; }
.accountDrawing>.accountSectionBar:last-child { margin-bottom:0; }
.accountImageGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.accountImageGrid>button { display:block; padding:0; border:0; background:var(--panel2); border-radius:12px; overflow:hidden; aspect-ratio:1; }
.accountImageGrid>button:only-child { grid-column:1/-1; aspect-ratio:4/3; }
.accountImageGrid img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .2s ease; }
.accountImageGrid>button:hover img { transform:scale(1.03); }
.accountDrawingPrompt { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.8; margin:16px 0; }
.accountImagePending { display:flex; flex-direction:column; align-items:center; gap:15px; justify-content:center; min-height:150px; background:var(--panel2); border-radius:13px; color:var(--dim); font-size:14px; }
.accountImagePending .uiIcon { width:35px; height:35px; }
.accountImageDialog { width:min(90vw,980px); max-height:90vh; padding:0; border:1px solid var(--line); border-radius:18px; background:var(--panel); color:var(--text); overflow:auto; }
.accountImageDialog::backdrop { background:rgba(20,14,20,.8); }
.accountImageDialog>img { display:block; width:100%; max-height:70vh; object-fit:contain; background:var(--bg); }
.accountPreviewClose { position:sticky; float:right; top:12px; right:12px; margin:12px 12px -56px 0; z-index:1; width:44px; height:44px; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:50%; }
.accountImageDialog>div { padding:18px 22px; }
.accountImageDialog p { font-size:14px; line-height:1.8; overflow-wrap:anywhere; white-space:pre-wrap; }
.accountImageDialog a { color:var(--accent); text-decoration:none; }
.accountNotification.panel { margin:0; padding:22px; }
.accountNotification .accountSectionBar { margin-bottom:10px; }
.accountNotification .accountSectionBar h2 { font-size:21px; line-height:1.5; }
.accountNotification .accountSectionBar:last-child { margin:0; }
.accountNotification p { font-size:14px; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; margin:0 0 16px; }
.accountNotification.unread { border-color:var(--accent-line); }
.accountUnread { width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.accountPagination { display:flex; align-items:center; justify-content:center; gap:18px; padding:28px 0 0; }
.accountPagination>span { font-size:13px; color:var(--dim); min-width:42px; text-align:center; }
@media (max-width:1100px) { .accountCardGrid { grid-template-columns:1fr; } }
@media (max-width:600px) {
  .accountPage.bPage { padding:22px 18px 34px; }
  .accountHead { gap:8px; margin-bottom:20px; }
  .accountHeading { gap:8px; }
  .accountHead .pageTitle { font-size:27px; }
  .accountHead>.btnGhost { padding:8px 10px; white-space:nowrap; }
  .accountBack { width:44px; }
  .accountTabs { gap:24px; margin-bottom:20px; }
  .accountTabs>button { font-size:14px; }
  .accountPage .panel { padding:20px; }
  .accountStoryLink { padding:12px; gap:12px; }
  .accountStoryLink img { width:68px; height:86px; }
  .accountStoryInfo>strong { font-size:19px; }
  .accountStoryInfo { gap:6px; }
  .accountStoryCard .accountRemove { margin-right:5px; width:44px; }
  .accountPerson { padding:14px; gap:8px; }
  .accountPersonLink { gap:10px; }
  .accountPersonLink img { width:44px; height:44px; }
  .accountPersonLink>.uiIcon { display:none; }
  .accountPerson>.btnGhost { padding:8px 12px; min-width:72px; }
  .accountAuthor.panel { grid-template-columns:62px minmax(0,1fr) auto; gap:12px; }
  .accountAuthorAvatar { width:62px; height:62px; }
  .accountAuthorName h2 { font-size:22px; }
  .accountAuthor>.btnPrimary { padding:9px 14px; }
  .accountAuthorStats { gap:0; }
  .accountAuthorStats b { font-size:22px; }
  .accountTargetLink { padding:12px 14px; }
  .accountTargetLink strong { font-size:19px; }
  .accountAmountChoices { gap:8px; }
  .accountAmountChoices button { padding:18px 5px; font-size:21px; }
  .accountChargeRecord { padding:15px; }
  .accountAmount { font-size:18px; }
  .accountReviewActions { gap:10px; flex-wrap:wrap; }
  .accountReviewActions>span { margin-right:auto; }
  .accountReviewCard { font-size:18px; }
  .accountWallet.panel { padding:24px 20px; gap:0; position:relative; }
  .accountWallet strong { font-size:38px; }
  .accountWallet .ipArt { width:150px; position:absolute; right:-8px; top:5px; opacity:.8; }
  .accountWallet .accountInlineActions { gap:8px; }
  .accountWallet .btnGhost { background:var(--panel); }
  .accountLedger .accountRecord { padding:16px 13px; gap:10px; }
  .accountLedgerIcon { width:36px; height:36px; border-radius:11px; }
  .accountLedgerValue>b { font-size:16px; }
  .accountLedgerValue .accountMuted { font-size:12px; }
  .accountOrderLink { padding:18px 16px; gap:10px; }
  .accountOrderLink strong { font-size:20px; }
  .accountOrderDetail dl>div { grid-template-columns:72px minmax(0,1fr); gap:10px; font-size:13px; }
  .accountGallery { grid-template-columns:1fr; gap:16px; }
  .accountImageDialog { width:94vw; max-height:92vh; }
  .accountPagination { gap:10px; }
  .accountPagination .btnGhost { padding:8px 10px; }
  .accountError { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { .accountSpinner { animation:none; } .accountImageGrid img { transition:none; } }