.account-main { container-type: inline-size; }
.subtle-link { font-size: 13px; color: var(--muted); }
.subtle-link:hover { color: var(--accent); }
.account-tabpanel { min-width: 0; }
.account-tabpanel[hidden] { display: none !important; }
.account-module-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.account-module-heading h2 { margin: 0; font-size: 20px; line-height: 1.4; }
.account-benefits { margin-top: 28px; scroll-margin-top: 120px; }
.account-module-description { margin: 0; color: var(--muted); font-size: 14px; }
.account-utility-links { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 13px; color: var(--muted); }
.account-utility-links a:hover { color: var(--accent); }
.identity-card { position: relative; isolation: isolate; display: flex; align-items: center; gap: 24px; overflow: hidden; border: 1px solid #ffffff1c; border-radius: 16px; padding: 28px; background: radial-gradient(ellipse at top left, #ed9a6010, transparent 60%), #1b2021; }
.account-main .avatar-edit { position: relative; flex: 0 0 88px; width: 88px; height: 88px; min-height: 88px; padding: 0; border: 1px solid #ffffff20; border-radius: 50%; overflow: hidden; background: #252e30; }
.avatar-edit img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.avatar-edit span { position: absolute; inset: auto 0 0; padding: 7px; background: #000b; color: white; font-size: 11px; opacity: 0; transition: opacity .16s ease; }
.avatar-edit:hover span, .avatar-edit:focus-visible span { opacity: 1; }
.identity-copy { flex: 1; min-width: 0; }
.identity-copy .eyebrow { margin-bottom: 8px; }
.identity-copy p { margin: 8px 0; color: var(--muted); font-size: 13px; }
.identity-name { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.identity-name h2 { margin: 0; font-size: 24px; line-height: 1.4; overflow-wrap: anywhere; }
.account-main .identity-card:has(.member-pill[data-level=VIP]) { border-color: #d6ad6873; background: radial-gradient(circle at 7% 18%, #f2bd6350 0, #a16d2522 18%, transparent 42%), linear-gradient(118deg, #2d261d 0%, #1a1e20 46%, #20201d 100%); box-shadow: inset 0 1px #ffe8ae28, inset 0 -1px #8f69271f, 0 14px 42px #0005, 0 0 0 1px #d6ad6814; }
.account-main .identity-card:has(.member-pill[data-level=VIP])::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, #f4cf8842 24%, #f4cf88b0 50%, #f4cf8842 76%, transparent) top / 100% 1px no-repeat, radial-gradient(circle at 92% 10%, #f4ca7730, transparent 26%); }
.account-main .identity-card:has(.member-pill[data-level=VIP])::after { content: "VIP"; position: absolute; z-index: -1; right: 34px; bottom: -30px; color: #f7d18d0c; font-size: 112px; font-weight: 800; letter-spacing: .08em; line-height: 1; pointer-events: none; }
.account-main .identity-card:has(.member-pill[data-level=VIP]) .avatar-edit { border-color: #d8b98066; box-shadow: 0 0 0 3px #d8af6312, 0 9px 28px #0007; }
.account-main .identity-card:has(.member-pill[data-level=VIP]) .identity-details { border-left-color: #d3aa6440; }
.account-main .identity-card:has(.member-pill[data-level=VIP]) { border: 1px solid #d3ab6538; background: linear-gradient(110deg, #282827 0%, #202426 48%, #1d2224 100%); box-shadow: 0 12px 32px #0003; }
.account-main .identity-card:has(.member-pill[data-level=VIP])::before { inset: 0; border: 0; border-radius: 0; background: none; }
.account-main .identity-card:has(.member-pill[data-level=VIP])::after { content: ""; top: -130px; right: -80px; bottom: auto; width: 420px; height: 300px; border-radius: 50%; background: none; font-size: 0; }
.account-main .identity-card:has(.member-pill[data-level=VIP]) .identity-copy .eyebrow,
.account-main .identity-card:has(.member-pill[data-level=VIP]) .identity-details>span { color: #c9b58e; }
.account-main .identity-card:has(.member-pill[data-level=VIP]) .identity-name h2 { color: #fff7e5; text-shadow: 0 1px 16px #d7a44120; }
.account-main .identity-card:has(.member-pill[data-level=VIP]) .identity-details { border-left-color: #a3987633; }
.identity-card:hover .member-pill[data-level=VIP]::after, .identity-card:focus-within .member-pill[data-level=VIP]::after { transform: translateX(110%); }
.identity-details { flex: 0 0 32%; min-width: 0; padding-left: 24px; border-left: 1px solid var(--line); }
.identity-details>span { font-size: 11px; color: #97a69f; letter-spacing: .06em; }
.account-main .identity-details dl { grid-template-columns: minmax(64px, auto) minmax(0, 1fr); margin-top: 12px; gap: 8px 12px; font-size: 12px; }
.account-main .text-button { width: auto; min-height: 32px; padding: 4px 0; border: 0; background: transparent; color: #eab78e; font-size: 13px; }
.account-main .text-button:hover { background: transparent; color: #ffd2ab; }
.account-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.metric-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.metric-card>span { color: #a3b0a9; font-size: 12px; letter-spacing: .04em; }
.metric-card strong { font-size: clamp(20px, 2vw, 24px); font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.metric-card:first-child strong { font-size: 17px; }
.metric-card p, .metric-card>a, .metric-card-actions>a { margin: auto 0 0; color: #9aaea4; font-size: 12px; }
.metric-card>a, .metric-card-actions>a { color: #eab78e; }
.metric-card-actions { margin-top: auto; }
.metric-card-actions>p { margin: 0; }
.account-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0 28px; }
.account-actions>a { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px; border: 1px solid #ffffff14; border-radius: 12px; transition: background .16s ease, border-color .16s ease; }
.account-actions>a:hover { background: #e8a4770b; border-color: #b07d5666; }
.account-actions>a>span:not(.action-symbol) { min-width: 0; }
.action-symbol { flex: 0 0 28px; color: #efb587; font-size: 24px; text-align: center; }
.account-actions b { display: block; font-size: 14px; font-weight: 600; }
.account-actions small { display: block; margin-top: 4px; font-size: 12px; color: #93a39b; }
.account-actions i { margin-left: auto; color: #98a79f; font-style: normal; }
.account-main .account-orders, .account-main .account-devices { margin-top: 0; }
.profile-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.profile-dialog header .eyebrow { margin-bottom: 6px; }
.profile-dialog h2 { margin: 0; }
.avatar-picker { display: flex; align-items: center; gap: 18px; margin: 24px 0; }
.avatar-picker>div { min-width: 0; }
.profile-avatar { flex: 0 0 72px; width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--line); border-radius: 50%; }
.account-main .profile-dialog .avatar-file-label { display: inline-flex; width: auto; margin: 0 0 8px; padding: 8px 12px; border: 1px solid #ffffff28; border-radius: 7px; cursor: pointer; font-size: 13px; }
.avatar-picker small { display: block; }
.avatar-picker:focus-within .avatar-file-label { outline: 2px solid var(--accent); outline-offset: 3px; }
.profile-dialog .dialog-actions { padding-top: 18px; border-top: 1px solid var(--line); }
@container (max-width: 950px) {
  .identity-card { gap: 18px; padding: 24px; }
  .identity-details { padding-left: 18px; }
  .account-actions>a { gap: 10px; padding: 16px 14px; }
  .metric-card { padding: 20px; }
}
@container (max-width: 720px) {
  .identity-card { flex-wrap: wrap; gap: 16px; padding: 20px; }
  .account-main .avatar-edit { flex-basis: 64px; width: 64px; height: 64px; min-height: 64px; }
  .identity-name h2 { font-size: 22px; }
  .identity-copy { flex-basis: calc(100% - 80px); }
  .identity-details { flex-basis: 100%; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .account-metrics { grid-template-columns: 1fr; gap: 12px; }
  .metric-card { gap: 8px; padding: 18px 20px; }
  .account-actions { gap: 8px; }
  .account-actions>a { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 10px; }
  .account-actions .action-symbol { flex-basis: auto; font-size: 20px; }
  .account-actions b { font-size: 12px; line-height: 1.6; }
  .account-actions small, .account-actions i { display: none; }
}

/* Keep the profile action aligned with the name despite shared button padding. */
#edit-profile { padding-inline: 0; text-align: left; }

/* A restrained metallic sweep, matching the VIP badge interaction. */
.account-main .identity-card:has(.member-pill[data-level=VIP])::after {
  content: ""; position: absolute; inset: 0; width: auto; height: auto;
  z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 28%, #fff3c30d 43%, #fff3c30d 50%, #fff3c30d 57%, transparent 72%);
  transform: translateX(-110%);
}
.account-main .identity-card:has(.member-pill[data-level=VIP]):is(:hover,:focus-within)::after {
  animation: identity-metal-sweep 1.2s ease-out both;
}
@keyframes identity-metal-sweep { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) {
  .account-main .identity-card:has(.member-pill[data-level=VIP])::after { display: none; animation: none; }
}


/* Account navigation keeps its compact width with centered icon and label groups. */
body.account-workspace-page{--account-sidebar-width:224px;--account-workspace-gutter:24px;--account-workspace-header-height:var(--header-height,68px)}
body.account-workspace-page.account-navigation-collapsed{--account-sidebar-width:72px}
body.account-workspace-page>.site-header{position:sticky;top:0;z-index:50;background:#101314f0;border-bottom:1px solid var(--line)}
body.account-workspace-page main.account-workspace{width:auto;max-width:none;margin:0 0 0 var(--account-sidebar-width);padding:28px var(--account-workspace-gutter) 48px;min-height:calc(100dvh - var(--account-workspace-header-height));container-type:normal;transition:margin-left .18s ease}
.account-workspace-content{min-width:0;max-width:100%;container-type:inline-size}
body.account-workspace-page>footer{width:auto;margin-left:var(--account-sidebar-width);margin-right:0;padding-inline:var(--account-workspace-gutter);transition:margin-left .18s ease}
body.account-workspace-page .account-workspace-sidebar{position:fixed;z-index:40;inset:var(--account-workspace-header-height) auto 0 0;display:flex;flex-direction:column;width:var(--account-sidebar-width);min-width:0;overflow:hidden;border-right:1px solid var(--line);background:#171c20;color:var(--text);transition:width .18s ease,transform .18s ease}
.account-sidebar-brand{display:flex;align-items:center;gap:10px;min-height:72px;padding:14px 16px;flex:none}
.account-sidebar-home{display:flex;align-items:center;gap:10px;min-width:0;flex:1;color:var(--text)}
.account-sidebar-home img{flex:none;border-radius:8px}
.account-sidebar-home strong{font-size:15px;line-height:1.4}
.account-sidebar-home small{display:block;margin-top:3px;font-size:10px;color:#8f9daa;letter-spacing:.08em}
body.account-workspace-page .account-sidebar-toggle{display:grid;place-items:center;flex:none;width:30px;height:30px;min-height:30px;padding:0;margin:0;border:1px solid transparent;border-radius:6px;background:transparent;color:#9aa9b6;cursor:pointer}
body.account-workspace-page .account-sidebar-toggle:hover{border-color:#ffffff14;background:#ffffff08;color:var(--text)}
.account-sidebar-toggle svg{display:block;width:18px;height:18px}
body.account-workspace-page .account-workspace-sidebar .account-subnav{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;gap:4px;margin:0;padding:0 12px 16px;border:0;border-radius:0;background:transparent;scrollbar-width:thin;scrollbar-color:#45515c transparent}
body.account-workspace-page .account-workspace-sidebar .account-subnav>.account-navigation-link{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;flex:none;width:100%;height:42px;min-height:42px;max-width:none;padding:0 38px;margin:0;border:1px solid transparent;border-radius:7px;background:transparent;color:#a5b1bd;font-size:13px;font-weight:500;line-height:1.4;text-align:center;white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:none}
body.account-workspace-page .account-workspace-sidebar .account-subnav>.account-navigation-link:hover{border-color:transparent;background:#ffffff05;color:var(--text)}
body.account-workspace-page .account-workspace-sidebar .account-subnav>.account-navigation-link:is([aria-current=page],[aria-selected=true]){border-color:#eea46d35;background:#eea46d12;color:#ffc393}
.account-navigation-label{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.account-workspace-page:not(.account-navigation-collapsed) .account-workspace-sidebar .account-subnav>.account-navigation-link{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:12px;padding-inline:14px}
body:not(.account-navigation-collapsed) .account-subnav>.account-navigation-link>.account-nav-icon{justify-self:end}
.account-subnav>.account-navigation-link>.account-navigation-label{text-align:center}
html:lang(en) body.account-workspace-page:not(.account-navigation-collapsed) .account-workspace-sidebar .account-subnav>.account-navigation-link{grid-template-columns:18px minmax(0,1fr);justify-content:start;text-align:left}
html:lang(en) body:not(.account-navigation-collapsed) .account-subnav>.account-navigation-link>.account-nav-icon{justify-self:start}
html:lang(en) body:not(.account-navigation-collapsed) .account-subnav>.account-navigation-link>.account-navigation-label{justify-self:start;text-align:left}
body:not(.account-navigation-collapsed) .account-subnav>.account-navigation-link>.hh-inbox-count{position:absolute;right:10px;margin:0}
body:not(.account-navigation-collapsed) .account-sidebar-brand{position:relative;justify-content:center;padding-inline:40px}
body:not(.account-navigation-collapsed) .account-sidebar-home{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:10px;min-height:30px}
body:not(.account-navigation-collapsed) .account-sidebar-home img{justify-self:end}
body:not(.account-navigation-collapsed) .account-sidebar-home>.account-navigation-label{text-align:center}
body:not(.account-navigation-collapsed) .account-sidebar-brand>.account-sidebar-toggle{position:absolute;right:16px}
body:not(.account-navigation-collapsed) .account-sidebar-help{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:10px;text-align:center}
body:not(.account-navigation-collapsed) .account-sidebar-help>.account-nav-icon{justify-self:end}
.account-sidebar-footer>small{text-align:center}
.account-workspace-sidebar .account-nav-icon{display:grid;place-items:center;flex:0 0 18px;width:18px;height:18px}
.account-workspace-sidebar .account-nav-icon svg{display:block;width:18px;height:18px}
.account-sidebar-footer{flex:none;display:grid;gap:12px;margin:0 20px;padding:16px 0;border-top:1px solid var(--line)}
.account-sidebar-help{display:flex;align-items:center;gap:10px;color:#a5b1bd;font-size:12px}
.account-sidebar-help:hover{color:var(--accent)}
.account-sidebar-footer>small{font-size:9px;letter-spacing:.04em;color:#798996}
.account-workspace-toolbar{display:none}
body.account-workspace-page .account-navigation-backdrop{position:fixed;z-index:35;inset:var(--account-workspace-header-height) 0 0;display:block;width:100%;height:calc(100dvh - var(--account-workspace-header-height));padding:0;margin:0;border:0;border-radius:0;background:#0008}
body.account-workspace-page .account-navigation-backdrop[hidden]{display:none}
.account-workspace-skip{position:fixed;z-index:100;top:-80px;left:12px;padding:10px 14px;border-radius:6px;background:var(--accent);color:#21170d}
.account-workspace-skip:focus{top:10px}
.account-navigation-collapsed .account-workspace-sidebar .account-navigation-label{display:none}
.account-navigation-collapsed .account-sidebar-brand{flex-direction:column;gap:10px;padding:16px 0;min-height:98px}
.account-navigation-collapsed .account-sidebar-home{flex:none}
body.account-navigation-collapsed .account-workspace-sidebar .account-subnav{padding:16px 10px}
body.account-navigation-collapsed .account-workspace-sidebar .account-subnav>.account-navigation-link{justify-content:center;padding:0}
.account-navigation-collapsed .account-sidebar-footer{justify-items:center;margin-inline:12px}
.account-navigation-collapsed .hh-inbox-count{position:absolute;top:2px;right:2px;margin:0;min-width:14px;height:14px;font-size:9px;padding:0 3px}
@media(max-width:899px){
 body.account-workspace-page{--account-sidebar-width:224px;--account-workspace-gutter:16px}
 body.account-workspace-page main.account-workspace{margin-left:0;padding:18px var(--account-workspace-gutter) 36px}
 body.account-workspace-page>footer{margin-left:0;padding-inline:var(--account-workspace-gutter)}
 body.account-workspace-page .account-workspace-sidebar{transform:translateX(-100%);visibility:hidden;pointer-events:none}
 body.account-workspace-page.account-navigation-open .account-workspace-sidebar{transform:translateX(0);visibility:visible;pointer-events:auto;box-shadow:20px 0 60px #0006}
 .account-workspace-toolbar{display:flex;align-items:center;gap:12px;min-height:34px;margin:0 0 18px}
 .account-workspace-location{font-size:13px;font-weight:600;color:var(--text)}
}
@media(prefers-reduced-motion:reduce){body.account-workspace-page :is(main.account-workspace,.account-workspace-sidebar),body.account-workspace-page>footer{transition:none}}