/* Navigation rules copied unchanged from huolemei frontend/src/styles/pay-navigation.css. */
/* OnePay application frame. Shared account content keeps its legacy styles. */
.pay-sidebar-layout{--pay-sidebar-width:248px;--pay-page-gutter:max(2.5rem,calc(35cqi - 21rem));--pay-nav-surface:#f8f9fa;--pay-nav-border:#e8ebef;--pay-nav-active:#e8ecf1;min-width:0;min-height:calc(100dvh - var(--platform-header-height))}
.pay-sidebar-layout.is-collapsed{--pay-sidebar-width:64px}
.pay-sidebar-layout .pay-app-sidebar{position:fixed;inset:var(--platform-header-height) auto 0 0;z-index:60;width:var(--pay-sidebar-width);display:flex;flex-direction:column;min-height:0;padding:0 12px;background:var(--pay-nav-surface);border-right:1px solid var(--pay-nav-border)}
.onepay .pay-app-icon-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:44px;width:44px;height:44px;padding:0;border:0;border-radius:9px;background:transparent;color:#667080}
.onepay .pay-app-icon-button:hover{background:var(--pay-nav-active)}
.pay-app-home-row{display:flex;flex-direction:row-reverse;align-items:center;gap:4px;min-width:0}
.pay-app-home-row>.pay-app-nav-link{flex:1;min-width:0}
.pay-app-home-row>.pay-app-icon-button:focus-visible{outline-offset:-3px}
.pay-app-sidebar>nav{display:flex;flex-direction:column;gap:4px;margin:10px 0 0;overflow:auto;min-height:0}
.onepay .pay-app-nav-link{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 12px;color:#344054;border-radius:8px;text-decoration:none;font-size:14px;white-space:nowrap}
.onepay .pay-app-nav-link:hover{background:#edf0f3;text-decoration:none}
.onepay .pay-app-nav-link[aria-current=page]{background:var(--pay-nav-active);color:#17243a;font-weight:600}
.onepay .pay-app-nav-link>.pay-icon{width:20px;height:20px}
.is-collapsed .pay-app-sidebar{padding:0 10px}
.is-collapsed .pay-app-nav-label{display:none}
.is-collapsed .pay-app-home-row{flex-direction:column}
.is-collapsed .pay-app-home-row>.pay-app-nav-link{flex:none;width:44px}
.onepay.is-collapsed .pay-app-nav-link,.is-collapsed .onepay .pay-app-nav-link{padding:12px;gap:0}
.pay-app-workspace{margin-left:var(--pay-sidebar-width);min-width:0;min-height:calc(100dvh - var(--platform-header-height));display:flex;flex-direction:column;container-type:inline-size}
@media(max-width:760px){
 .pay-sidebar-layout{--pay-page-gutter:20px}
 .pay-sidebar-layout .pay-app-workspace{margin-left:0}
 .pay-sidebar-layout .pay-app-sidebar{inset:0 auto 0 0;width:min(280px,calc(100vw - 48px));padding:0 12px;transform:translateX(-100%);visibility:hidden;transition:transform .16s ease,visibility .16s;z-index:80;box-shadow:12px 0 36px #17243a18}
 .pay-sidebar-layout.is-mobile-open .pay-app-sidebar{transform:none;visibility:visible}
 .pay-sidebar-layout .pay-app-nav-label{display:inline}
 .pay-sidebar-layout .pay-app-backdrop{position:fixed;inset:0;z-index:70;background:#17243a45;border:0;width:100%;height:100%;padding:0;cursor:default}
 .pay-sidebar-layout .pay-main{padding:24px var(--pay-page-gutter) 40px}
}
@media(prefers-reduced-motion:reduce){.pay-sidebar-layout .pay-app-sidebar{transition:none}}

/* Music compatibility: keep legacy fixed-position dialogs viewport-bound. */
[data-music-workspace]{--platform-header-height:64px}
body.hh-music-workspace-page{height:auto;min-height:100dvh}
#hh-main.hh-music-workspace-host{max-width:none!important;margin:0!important;padding:0!important}
#hh-main:has([data-music-workspace]){max-width:none!important;margin:0!important;padding:0!important}
.music-workspace .pay-app-sidebar{font-family:var(--hh-ui-font);font-size:16px;line-height:1.65;color:#17243a}
.music-workspace .pay-app-workspace{container-type:normal}
.music-workspace-main{min-width:0;width:100%;box-sizing:border-box;padding:28px 24px 56px;flex:1}
.music-workspace .pay-icon{display:block;flex:none}
.music-workspace .pay-app-nav-link[aria-current=page]{font-weight:600}
.music-workspace-mobile-toggle{display:none}
.music-workspace-skip{position:fixed;left:12px;top:-80px;z-index:12030;padding:8px 12px;background:white;color:#17243a}
.music-workspace-skip:focus{top:8px}
@media(max-width:760px){
 .music-workspace-mobile-toggle{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;background:#fff;border:0;color:#344054;font:inherit}
 .music-workspace-main{padding:24px 16px 40px}
 .music-workspace.is-mobile-open .pay-app-sidebar{z-index:12020}
 .music-workspace .pay-app-backdrop{z-index:12010}
}

/* Preserve shell geometry before deferred initialization and across native pages.
   Native navigation retains the eight legacy pages' script/auth lifecycles. */
html.hh-music-workspace-document{scrollbar-gutter:stable}
@media(min-width:761px){
 html[data-music-sidebar-collapsed="true"] .music-workspace{--pay-sidebar-width:64px}
 html[data-music-sidebar-collapsed="true"] .music-workspace .pay-app-sidebar{padding:0 10px}
 html[data-music-sidebar-collapsed="true"] .music-workspace .pay-app-nav-label{display:none}
 html[data-music-sidebar-collapsed="true"] .music-workspace .pay-app-home-row{flex-direction:column}
 html[data-music-sidebar-collapsed="true"] .music-workspace .pay-app-home-row>.pay-app-nav-link{flex:none;width:44px}
 html[data-music-sidebar-collapsed="true"] .music-workspace .pay-app-nav-link{padding:12px;gap:0}
}
html.hh-music-workspace-document #hh-navbar{view-transition-name:music-header}
.music-workspace .pay-app-sidebar{view-transition-name:music-sidebar}
html.hh-music-workspace-document::view-transition-group(*){animation:none}
html.hh-music-workspace-document::view-transition-old(*),
html.hh-music-workspace-document::view-transition-new(*){animation:none;mix-blend-mode:normal}