.profile-page{--p-bg:var(--bg);--p-panel:var(--surface);--p-line:var(--line);--p-text:var(--text);--p-muted:var(--muted);background:var(--bg);color:var(--text)}
.support-account-page{--support-bg:var(--bg);--support-panel:var(--surface);--support-raised:var(--surface-2);--support-line:var(--line);--support-line-strong:var(--line-strong);--support-text:var(--text);--support-muted:var(--muted);background:var(--bg);color:var(--text)}
html[data-theme=light] .profile-page{--p-bg:var(--bg);--p-panel:var(--surface);--p-line:var(--line);--p-text:var(--text);--p-muted:var(--muted)}
html[data-theme=light] .support-account-page{--support-bg:var(--bg);--support-panel:var(--surface);--support-raised:var(--surface-2);--support-line:var(--line);--support-line-strong:var(--line-strong);--support-text:var(--text);--support-muted:var(--muted)}
.account-workspace{
  --account-bg:var(--bg);
  --account-surface:var(--surface);
  --account-raised:var(--surface-2);
  --account-text:var(--text);
  --account-muted:var(--muted);
  --account-line:var(--line);
  min-height:calc(100svh - 73px);
  display:grid;
  grid-template-columns:240px minmax(0,900px);
  align-items:start;
  gap:clamp(44px,7vw,104px);
  padding-top:clamp(52px,7vw,86px);
  padding-bottom:120px;
}
.account-sidebar{position:sticky;top:104px;align-self:start;min-width:0}
.account-sidebar{view-transition-name:account-sidebar}
.account-sidebar-head{padding:0 10px 26px;border-bottom:1px solid var(--account-line)}
.account-sidebar-head h1{margin:8px 0 9px;font-size:30px;line-height:1;letter-spacing:-.05em}
.account-sidebar-head p{margin:0;color:var(--account-muted);font-size:12px;line-height:1.5}
.account-section-nav{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--account-line)}
.account-section-nav a{min-height:44px;display:flex;align-items:center;gap:11px;padding:0 10px;border-radius:9px;color:var(--account-muted);font-size:12px;transition:background .18s,color .18s,transform .18s}
.account-section-nav a:hover{background:var(--account-raised);color:var(--account-text);transform:translateX(2px)}
.account-section-nav a.is-active{background:var(--account-text);color:var(--account-bg);transform:none}
.account-section-nav img{width:18px;height:18px;opacity:.78;filter:brightness(0) invert(1)}
.account-section-nav a:hover img{opacity:1}.account-section-nav a.is-active img{filter:brightness(0)}
html[data-theme=light] .account-section-nav img{filter:brightness(0)}
html[data-theme=light] .account-section-nav a.is-active img{filter:brightness(0) invert(1)}
.account-content{position:relative;min-width:0;width:100%;max-width:900px}
.account-content{view-transition-name:account-content}
.account-content:after{content:"";position:absolute;z-index:-1;right:-9%;bottom:-96px;width:min(390px,52vw);height:190px;background:url('/hero/marker-mountains-far-v1.png') center bottom/contain no-repeat;filter:brightness(0) invert(1);opacity:.055;pointer-events:none}
html[data-theme=light] .account-content:after{filter:brightness(0);opacity:.065}
.ticket-workspace{margin:0!important;padding:0!important;max-width:900px!important}
@view-transition{navigation:auto}
::view-transition-old(account-sidebar),::view-transition-new(account-sidebar){animation-duration:.18s}
::view-transition-old(account-content){animation:.14s ease both account-content-out}
::view-transition-new(account-content){animation:.2s ease both account-content-in}
@keyframes account-content-out{to{opacity:0;transform:translateY(-5px)}}
@keyframes account-content-in{from{opacity:0;transform:translateY(7px)}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*){animation-duration:.01ms!important}}
@media(max-width:820px){
  .account-workspace{grid-template-columns:1fr;gap:30px;padding-top:38px;padding-bottom:80px}
  .account-sidebar{position:static}
  .account-sidebar-head{padding-inline:0}
  .account-section-nav{display:flex;overflow-x:auto;scrollbar-width:none}
  .account-section-nav a{flex:0 0 auto;white-space:nowrap}
}