/* Desktop navigation plus paint-only mobile styling; Vue owns layout/actions. */
@media (min-width:768px) {
.landing-page, .sidebar-panel {
  --cex-nav-face:linear-gradient(180deg,#fff 0%,#f0f6f5 100%);
  --cex-nav-edge:#d7e5e2;
  --cex-nav-ink:#385455;
  --cex-nav-shadow:0 2px 0 rgba(35,79,72,.08),inset 0 1px 0 rgba(255,255,255,.9);
  --cex-nav-hover-face:linear-gradient(180deg,#effcf8 0%,#e3f6ef 100%);
  --cex-nav-hover-edge:#80c9b5;
  --cex-nav-selected-face:linear-gradient(135deg,#dcf9ee 0%,#c9eee3 100%);
  --cex-nav-selected-ink:#087b68;
}
html[theme="dark"] .landing-page, html[theme="dark"] .sidebar-panel {
  --cex-nav-face:linear-gradient(180deg,#142733 0%,#0e1d28 100%);
  --cex-nav-edge:#28404d;
  --cex-nav-ink:#c0d2dc;
  --cex-nav-shadow:0 3px 0 rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035);
  --cex-nav-hover-face:linear-gradient(180deg,#1b3941 0%,#142e36 100%);
  --cex-nav-hover-edge:#418c82;
  --cex-nav-selected-face:linear-gradient(135deg,#1b4848 0%,#12333b 100%);
  --cex-nav-selected-ink:#79ead1;
}
}
@media (min-width:1181px) {
.landing-page { --cex-home-nav-bg:rgba(255,255,255,.88); --cex-home-nav-line:rgba(70,100,105,.13); --cex-home-nav-hover:rgba(21,186,165,.07); }
html[theme="dark"] .landing-page { --cex-home-nav-bg:rgba(17,30,40,.88); --cex-home-nav-line:rgba(177,204,215,.14); --cex-home-nav-hover:rgba(76,220,195,.09); }
.landing-page .lp-nav-menu {
  gap:0; padding:3px 5px; border:1px solid var(--cex-home-nav-line); border-radius:5px;
  background:var(--cex-home-nav-bg); box-shadow:none;
}
.landing-page .lp-nav-menu li { position:relative; }
.landing-page .lp-nav-menu li + li::before {
  content:""; position:absolute; left:0; top:50%; width:1px; height:13px; background:var(--cex-home-nav-line); transform:translateY(-50%);
}
.landing-page .lp-nav-menu li > a,
.landing-page .lp-nav-actions .btn-login,
.landing-page .lp-nav-actions .btn-signup {
  box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:38px; padding:9px 12px; border:0; border-radius:3px;
  background:transparent; color:var(--cex-nav-ink); box-shadow:none;
  font-size:13px; font-weight:500; line-height:1.3; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background .18s,color .18s;
  -webkit-tap-highlight-color:transparent;
}
.landing-page .lp-nav-actions { gap:8px; }
.landing-page .lp-nav-actions .btn-signup { border:1px solid var(--cex-home-nav-line); }
.landing-page .lp-nav-menu li > a:hover,
.landing-page .lp-nav-menu li > a[aria-current="page"],
.landing-page .lp-nav-actions button:hover {
  background:var(--cex-home-nav-hover); color:var(--cex-nav-selected-ink);
}
.landing-page .lp-nav-menu li > a:active,
.landing-page .lp-nav-actions button:active { background:var(--cex-home-nav-hover); color:var(--cex-nav-selected-ink); }
.landing-page .lp-nav-menu li > a:focus-visible,
.landing-page .lp-nav-actions button:focus-visible,
.landing-page .lp-hamburger:focus-visible { outline:2px solid var(--cex-nav-hover-edge); outline-offset:3px; }
.landing-page .lp-hamburger {
  box-sizing:border-box; width:42px; height:42px; flex:0 0 42px; align-items:center; justify-content:center;
  border:0; border-radius:3px; background:transparent; box-shadow:none;
}
  .landing-page .lp-nav { border-bottom-color:var(--cex-home-nav-line); }
  .landing-page .lp-nav-menu { align-self:end; border-bottom:0; border-radius:5px 5px 0 0; }
}
@media (min-width:1181px) and (max-width:1400px) {
  .landing-page .lp-nav-inner { gap:10px; padding-inline:18px; }
  .landing-page .lp-nav-menu { gap:0; }
  .landing-page .lp-nav-menu li > a { padding-inline:10px; font-size:12px; }
}
@media (min-width:1401px) {
  .landing-page .lp-nav-menu li > a { padding-inline:clamp(20px,1.4vw,28px); }
}
/* Both desktop console templates; never style the mobile drawer. */
@media (min-width:768px) {
html body .dashboard-page .sidebar-panel .menu .n-menu-item {
  height:auto!important; margin-top:8px!important; transform:none!important;
}
html body .dashboard-page .sidebar-panel .menu .n-menu-item-content {
  box-sizing:border-box; min-height:46px; height:auto; padding-block:11px!important; border:1px solid var(--cex-nav-edge);
  border-radius:12px; background:var(--cex-nav-face); box-shadow:var(--cex-nav-shadow); color:var(--cex-nav-ink);
  transition:background .18s,border-color .18s,box-shadow .18s,transform .18s; -webkit-tap-highlight-color:transparent;
}
html body .dashboard-page .sidebar-panel .menu .n-menu-item-content::before { background:transparent!important; }
html body .dashboard-page .sidebar-panel .menu .n-menu-item-content-header {
  color:var(--cex-nav-ink)!important; font-weight:600; line-height:1.45; white-space:normal; overflow-wrap:anywhere;
}
html body .dashboard-page .sidebar-panel .menu .n-menu-item-content__icon { color:inherit!important; }
html body .dashboard-page .sidebar-panel .menu .n-menu-item-content:hover {
  background:var(--cex-nav-hover-face); border-color:var(--cex-nav-hover-edge); transform:translateY(-1px);
}
html body .dashboard-page .sidebar-panel .menu .n-menu-item-content--selected {
  background:var(--cex-nav-selected-face); border-color:var(--cex-nav-hover-edge); color:var(--cex-nav-selected-ink);
  box-shadow:inset 3px 0 0 var(--cex-nav-selected-ink),var(--cex-nav-shadow);
}
html body .dashboard-page .sidebar-panel .menu .n-menu-item-content--selected .n-menu-item-content-header { color:var(--cex-nav-selected-ink)!important; }
html body .dashboard-page .sidebar-panel .menu .n-menu-item-content:active { transform:translateY(1px); box-shadow:inset 0 2px 5px rgba(0,0,0,.14); }
html body .dashboard-page .sidebar-panel .menu .n-menu-item-content:focus-visible { outline:2px solid var(--cex-nav-hover-edge); outline-offset:2px; }
}
@media (min-width:1181px) and (prefers-reduced-motion:reduce) {
  .landing-page .lp-nav-menu li > a, .landing-page .lp-nav-actions button { transition:none; }
}
@media (min-width:768px) and (prefers-reduced-motion:reduce) {
  html body .dashboard-page .sidebar-panel .menu .n-menu-item-content { transition:none; }
}
/* Mobile: only paint properties. Keep native sizing, spacing, text and flow. */
@media (max-width:767px) {
  .landing-page, :is(.dashboard-page,.mobile-sidebar-drawer) .sidebar-panel {
    --cex-mobile-nav-panel:linear-gradient(180deg,#ffffff,#f3f8f7);
    --cex-mobile-nav-face:linear-gradient(135deg,#ffffff,#edf5f3);
    --cex-mobile-nav-edge:rgba(43,105,92,.14);
    --cex-mobile-nav-depth:rgba(30,70,64,.06);
    --cex-mobile-nav-ink:#395951;
    --cex-mobile-nav-selected:linear-gradient(110deg,#d7f5eb,#ecfaf5);
    --cex-mobile-nav-accent:#087c65;
  }
  html[theme="dark"] .landing-page,
  html[theme="dark"] :is(.dashboard-page,.mobile-sidebar-drawer) .sidebar-panel {
    --cex-mobile-nav-panel:linear-gradient(180deg,#101e28,#0b1721);
    --cex-mobile-nav-face:linear-gradient(135deg,#192f3a,#12232e);
    --cex-mobile-nav-edge:rgba(139,186,196,.18);
    --cex-mobile-nav-depth:rgba(0,0,0,.16);
    --cex-mobile-nav-ink:#c2d7df;
    --cex-mobile-nav-selected:linear-gradient(110deg,#19463f,#152f35);
    --cex-mobile-nav-accent:#79ead1;
  }
  .landing-page .lp-nav,
  .landing-page .lp-nav-menu.active,
  :is(.dashboard-page,.mobile-sidebar-drawer) .sidebar-panel {
    background:var(--cex-mobile-nav-panel);
  }
  .landing-page .lp-nav-menu.active { box-shadow:0 8px 20px var(--cex-mobile-nav-depth); }
  /* Expand the painted/clickable surface into existing gaps, not the flow. */
  .landing-page .lp-nav-menu.active li { position:relative; isolation:isolate; }
  .landing-page .lp-nav-menu.active li > a { color:var(--cex-mobile-nav-ink); cursor:pointer; }
  .landing-page .lp-nav-menu.active li > a::before {
    content:""; position:absolute; inset:-6px -10px; z-index:-1; border-radius:7px;
    background:var(--cex-mobile-nav-face); pointer-events:auto;
    box-shadow:inset 0 0 0 1px var(--cex-mobile-nav-edge),0 2px 5px var(--cex-mobile-nav-depth);
    transition:background .15s,box-shadow .15s,transform .15s;
  }
  .landing-page .lp-nav-menu.active li::after {
    content:""; position:absolute; right:2px; top:50%; width:6px; height:6px;
    border-top:1.5px solid var(--cex-mobile-nav-ink); border-right:1.5px solid var(--cex-mobile-nav-ink);
    transform:translateY(-50%) rotate(45deg); opacity:.65; pointer-events:none;
  }
  .landing-page .lp-nav-menu.active li:hover > a::before,
  .landing-page .lp-nav-menu.active li > a[aria-current="page"]::before { background:var(--cex-mobile-nav-selected); }
  .landing-page .lp-nav-menu.active li:active > a::before {
    background:var(--cex-mobile-nav-selected); transform:translateY(1px);
    box-shadow:inset 0 0 0 1px var(--cex-mobile-nav-accent),inset 0 2px 5px var(--cex-mobile-nav-depth);
  }
  .landing-page .lp-nav-menu.active li > a:focus-visible::before { outline:2px solid var(--cex-mobile-nav-accent); outline-offset:2px; }
  .landing-page .lp-nav-menu.active li > a:hover,
  .landing-page .lp-nav-menu.active li > a:focus-visible,
  .landing-page .lp-nav-menu.active li > a:active,
  .landing-page .lp-nav-menu.active li > a[aria-current="page"] { color:var(--cex-mobile-nav-accent); }
  html body :is(.dashboard-page,.mobile-sidebar-drawer) .sidebar-panel .menu .n-menu-item-content {
    background:var(--cex-mobile-nav-face); border-radius:10px;
    box-shadow:inset 0 0 0 1px var(--cex-mobile-nav-edge),0 2px 5px var(--cex-mobile-nav-depth);
    color:var(--cex-mobile-nav-ink);
  }
  html body :is(.dashboard-page,.mobile-sidebar-drawer) .sidebar-panel .menu .n-menu-item-content::before { background:transparent!important; }
  html body :is(.dashboard-page,.mobile-sidebar-drawer) .sidebar-panel .menu .n-menu-item-content-header,
  html body :is(.dashboard-page,.mobile-sidebar-drawer) .sidebar-panel .menu .n-menu-item-content__icon { color:var(--cex-mobile-nav-ink)!important; }
  html body :is(.dashboard-page,.mobile-sidebar-drawer) .sidebar-panel .menu .n-menu-item-content--selected {
    background:var(--cex-mobile-nav-selected); color:var(--cex-mobile-nav-accent);
    box-shadow:inset 3px 0 0 var(--cex-mobile-nav-accent),inset 0 0 0 1px var(--cex-mobile-nav-edge),0 2px 5px var(--cex-mobile-nav-depth);
  }
  html body :is(.dashboard-page,.mobile-sidebar-drawer) .sidebar-panel .menu .n-menu-item-content--selected .n-menu-item-content-header,
  html body :is(.dashboard-page,.mobile-sidebar-drawer) .sidebar-panel .menu .n-menu-item-content--selected .n-menu-item-content__icon { color:var(--cex-mobile-nav-accent)!important; }
}
@media (max-width:767px) and (prefers-reduced-motion:reduce) {
  .landing-page .lp-nav-menu.active li > a::before { transition:none; }
}
/* Purple is a distinct system palette, not the recovered blue/teal dark one.
 * Override paint tokens for both console templates and the body-mounted mobile
 * drawer only; keep home navigation and native menu layout/actions untouched. */
html[data-cex-color-theme="dark-purple"] :is(.dashboard-page,.mobile-sidebar-drawer) .sidebar-panel {
  --cex-nav-face:linear-gradient(180deg,#241d34 0%,#191525 100%);
  --cex-nav-edge:#40364f;
  --cex-nav-ink:#d5cbe4;
  --cex-nav-shadow:0 3px 0 rgba(10,5,20,.18),inset 0 1px 0 rgba(224,201,255,.035);
  --cex-nav-hover-face:linear-gradient(180deg,#332744 0%,#261d36 100%);
  --cex-nav-hover-edge:#8863b3;
  --cex-nav-selected-face:linear-gradient(135deg,#4a326a 0%,#30203f 100%);
  --cex-nav-selected-ink:#dec4ff;
  --cex-mobile-nav-panel:linear-gradient(180deg,#1b162b,#15101f);
  --cex-mobile-nav-face:linear-gradient(135deg,#292038,#1e182c);
  --cex-mobile-nav-edge:rgba(181,138,255,.25);
  --cex-mobile-nav-depth:rgba(10,5,20,.18);
  --cex-mobile-nav-ink:#ded2ef;
  --cex-mobile-nav-selected:linear-gradient(110deg,#493163,#30213f);
  --cex-mobile-nav-accent:#d8b7ff;
}