/* Staging preview: geometry only; existing navigation colors and behavior remain. */
.backend-nav{
 --nav-radius:8px;
 --nav-unit:4px;
 padding:24px 12px;
 scrollbar-gutter:stable both-edges;
 scrollbar-width:thin;
}
.backend-nav nav{display:grid;gap:16px;min-width:0}
.backend-nav nav>details{margin:0;min-width:0}
.backend-nav nav>details>summary{
 box-sizing:border-box;
 min-height:44px;
 padding:12px;
 margin:0 0 4px;
 border-radius:var(--nav-radius);
 font-size:14px;
 line-height:20px;
 letter-spacing:0;
 gap:8px;
 overflow-wrap:anywhere;
}
.backend-nav nav>details>summary .nav-symbol{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 flex:0 0 16px;
 width:16px;
 font-size:12px;
 line-height:16px;
}
.backend-nav nav>details>summary:after{flex:0 0 12px;width:12px;font-size:12px;line-height:16px;text-align:center}
.backend-nav nav>details>button[data-view]{
 box-sizing:border-box;
 min-height:44px;
 width:100%;
 margin:4px 0 0;
 padding:12px 12px 12px 36px;
 border-radius:var(--nav-radius);
 font-size:14px;
 line-height:20px;
 white-space:normal;
 overflow-wrap:anywhere;
 text-align:left;
}
.backend-nav .nav-sliding-highlight{border-radius:var(--nav-radius)}
.backend-nav .sidebar-foot{margin-top:24px;padding:12px;border-radius:var(--nav-radius);line-height:20px}
.backend-nav .brand{padding-bottom:24px}
/* Keep the fixed sidebar below the staging-only environment notice. */
body>div[role="status"]:first-child{height:36px;box-sizing:border-box;font-size:12px;line-height:20px}
.backend-nav{top:36px;bottom:0;height:calc(100dvh - 36px)}
/* Visible, consistent panel outlines using the current palette. */
.backend-nav nav>details{
 border:1px solid color-mix(in srgb,var(--merchant-accent,#62d6bd) 20%,transparent);
 border-radius:var(--nav-radius);
 padding:4px;
 box-sizing:border-box;
}
.backend-nav nav>details>summary{border:1px solid transparent;padding:11px 7px;gap:8px}
.backend-nav nav>details>button[data-view]{border:1px solid transparent;padding:11px 7px 11px 31px}
.backend-nav nav>details>summary:hover,.backend-nav nav>details>button[data-view]:hover{
 border-color:color-mix(in srgb,var(--merchant-accent,#62d6bd) 28%,transparent);
}
.backend-nav .nav-sliding-highlight{
 box-sizing:border-box;
 border:1px solid color-mix(in srgb,var(--merchant-accent,#62d6bd) 48%,transparent);
}
.backend-nav .sidebar-foot{border:1px solid color-mix(in srgb,var(--merchant-accent,#62d6bd) 20%,transparent)}