/* Figma: Account page — trang phủ lên app, mở từ menu tài khoản (account.js).
   Nav bar trắng (← + tiêu đề) · thân nền surface/secondary, các Section nền
   trắng đệm 16 cách nhau 8. Nằm trên header (20) nhưng dưới nền mờ (30) và
   sheet (40) — sheet Giao diện mở được ngay trên trang này. */
.acc-page{
  position:absolute; inset:0; z-index:25;
  display:flex; flex-direction:column;
  background:var(--color-background-secondary);
}
.acc-page[hidden]{display:none}
.acc-page:focus-visible{outline:none}
@media (prefers-reduced-motion: no-preference){
  .acc-page:not([hidden]){animation:accPageIn var(--motion-base) var(--ease-out)}
}
@keyframes accPageIn{from{transform:translateX(24px); opacity:0}}

/* Nav bar — như Project header: đệm 8 · 12, hàng cao 44, ← 24 + tiêu đề cách 8 */
.nav-bar{
  flex:0 0 auto; display:flex; align-items:center; gap:var(--spacing-8);
  min-height:44px; box-sizing:content-box;
  padding:calc(var(--spacing-8) + env(safe-area-inset-top, 0px)) var(--spacing-12) var(--spacing-8);
  background:var(--color-background-primary);
}
.nav-bar__back{
  position:relative; flex:0 0 auto; width:24px; height:44px; padding:0;
  display:grid; place-items:center; color:var(--color-text-primary);
}
.nav-bar__back::after{content:""; position:absolute; inset:0 -10px}   /* vùng chạm 44 */
.nav-bar__title{
  font:var(--text-headline); letter-spacing:var(--tracking-headline);
  margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--color-text-primary);
}

.acc-page__body{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:var(--spacing-8);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.acc-section{flex:0 0 auto; padding:var(--spacing-16); background:var(--color-surface-primary)}

/* linh vật 160 + Collect Item bar, cách nhau 4 */
.acc-hero{display:flex; flex-direction:column; align-items:center; gap:var(--spacing-4)}
.acc-pet{width:160px; height:160px; padding:0; border-radius:var(--radius-8); -webkit-tap-highlight-color:transparent}
.acc-pet img{display:block; width:100%; height:100%; object-fit:contain; transform:scaleX(-1)}   /* ảnh gốc quay trái, như linh vật trên thanh nhập */
.acc-pet:active img{transform:scaleX(-1) scale(.96); transition:transform .12s ease}
.streak-bar.streak-bar--page{align-self:stretch; height:auto; padding:var(--spacing-16) var(--spacing-16) var(--spacing-16) var(--spacing-12)}

/* danh sách: nền background/tertiary bo 8 (.list-group), dòng cao 52,
   vạch 0.5 thụt 40 (thẳng chữ) */
.acc-list .list-item{border-radius:0}
.acc-list .list-item--action-menu::after{content:""; --sep-left:40px}
.acc-list li:last-child .list-item::after, .acc-list .acc-about::after{display:none}
.acc-list__chev{margin-left:auto}
.acc-list .list-item--action-menu .acc-list__chev{color:var(--color-text-secondary)}
/* About — icon app 40 bo 8, "Mind Money" / "Về chúng tôi", ↗ */
.acc-about{gap:var(--spacing-8); padding:var(--spacing-12)}
@media (hover:hover){.acc-about:hover{background:var(--color-fill-quaternary)}}
.acc-about:active{background:var(--color-fill-tertiary)}
.acc-about__icon{flex:0 0 auto; width:40px; height:40px; border-radius:var(--radius-8); border:1px solid var(--color-border-subtle); object-fit:cover}
.acc-about .list-item__middle b, .acc-about .list-item__middle span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acc-about .list-item__middle b{font:var(--text-headline); letter-spacing:var(--tracking-headline); color:var(--color-text-primary)}
.acc-about .list-item__middle span{font:var(--text-caption); letter-spacing:var(--tracking-caption); color:var(--color-text-secondary)}