/* Distinct submenu surfaces; preserve the native details/mobile layout. */
.app-body .six-navigation{
 --submenu-bg:linear-gradient(145deg,#123c43,#102b37);--submenu-line:#52bdb8;--submenu-tile:#81d8d0;
 --submenu-tile-line:#a9ebe5;--submenu-text:#10373d;--submenu-heading:#c5f7f0;--submenu-icon:#09545a;
 --submenu-icon-bg:#b5eee7;--submenu-hover:#a2e8df;--submenu-active:#81d8d0;
 --submenu-accent:#81d8d0;--submenu-shadow:0 8px 22px #00000024;
}
body[data-ui-theme="fresh_light"] .six-navigation{
 --submenu-bg:linear-gradient(145deg,#e0e5eb,#f0f2f5);--submenu-line:#9daebb;--submenu-tile:linear-gradient(145deg,#ffffff,#e5eaf0);
 --submenu-tile-line:#aebdc9;--submenu-text:#253442;--submenu-heading:#354b60;--submenu-icon:#405b72;
 --submenu-icon-bg:#d5dfe9;--submenu-hover:#ffffff;--submenu-active:#cbd9e6;
 --submenu-accent:#607d98;--submenu-shadow:0 6px 18px #25394c18;
}
.app-body .six-navigation .six-native[open]>.six-panel{
 background:var(--submenu-bg);border:1px solid var(--submenu-line);
 border-top:3px solid var(--submenu-accent);border-radius:14px;
 padding:12px;gap:9px;color:var(--submenu-text);box-shadow:var(--submenu-shadow);
}
.app-body .six-navigation .six-panel::before{
 content:attr(aria-label);grid-column:1/-1;display:block;text-align:left;
 color:var(--submenu-heading);font-size:13px;font-weight:700;line-height:1.5;
 padding:0 3px 7px;border-bottom:1px solid var(--submenu-line);margin-bottom:2px;
}
.app-body .six-navigation .six-panel>:is(a,button,form){
 background:var(--submenu-tile);border:1px solid var(--submenu-tile-line);
 color:var(--submenu-text);box-shadow:none;border-radius:10px;min-height:76px;
 font-size:13px;font-weight:600;line-height:1.45;text-decoration:none;
 transition:background-color .15s,border-color .15s;
}
.app-body .six-navigation .six-panel .nav-icon{
 display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
 width:30px;height:30px;border-radius:9px;font-size:19px;line-height:1;
 color:var(--submenu-icon);background:var(--submenu-icon-bg);text-shadow:none;
}
.app-body .six-navigation .six-panel>:is(a,button):hover{
 background:var(--submenu-hover);border-color:var(--submenu-accent);color:var(--submenu-text);
}
.app-body .six-navigation .six-panel>a.active,
.app-body .six-navigation .six-native[open]>summary{
 background:var(--submenu-active);border:2px solid var(--submenu-accent);
 color:var(--submenu-text);box-shadow:inset 0 -3px 0 var(--submenu-accent);
}
.app-body .six-navigation .six-panel :is(a,button,select):focus-visible{
 outline:3px solid var(--submenu-accent);outline-offset:3px;
}
.app-body .six-navigation .six-panel select{
 color:var(--submenu-text);background:var(--submenu-tile);border-color:var(--submenu-tile-line);
}
@media(max-width:760px){
 .app-body .six-navigation .six-native[open]>.six-panel{padding:10px;gap:8px}
 .app-body .six-navigation .six-panel>:is(a,button,form){padding:8px 4px;min-height:76px}
}
@media(prefers-reduced-motion:reduce){.app-body .six-navigation .six-panel>*{transition:none}}

.app-body .six-navigation .six-native[open]>summary i{color:var(--submenu-icon)}