:root{
  --nav-w:240px; --nav-w-mini:72px; --surface:#fff; --bg:#f6f7fb; --line:#eceef6;
  --shadow:0 10px 30px rgba(34,37,44,.06); --purple:#6f4ef6; --purple-700:#5b3fd9;
  --text:#2b2f3b; --muted:#6d7390; --radius:14px;
}

/* Sidebar container */
.app-nav{
  position:fixed; inset:0 auto 0 0; width:var(--nav-w);
  background:#fff; border-right:1px solid var(--line); box-shadow:var(--shadow);
  z-index:40; display:flex; flex-direction:column;
  transition:width .28s cubic-bezier(.2,.8,.2,1), transform .28s cubic-bezier(.2,.8,.2,1);
  height:100dvh; overflow:auto; -webkit-overflow-scrolling:touch;
  padding-bottom: env(safe-area-inset-bottom);
}
.app-nav[data-collapsed="true"]{ width:var(--nav-w-mini) }

/* Brand */
.brand{ display:flex; align-items:center; gap:10px; padding:12px 14px }
.logo{ width:36px; height:36px; border-radius:50%; object-fit:contain; background:#e6ff3f }
.brand-name{ font-weight:800; white-space:normal }

/* Collapse button */
.btn-collapse{
  position:absolute; top:10px; right:-12px; width:28px; height:28px;
  border-radius:999px; border:1px solid var(--line); background:#fff;
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow)
}
.btn-collapse svg{ width:16px; height:16px; transform:rotate(180deg); transition:transform .28s }
.app-nav[data-collapsed="true"] .btn-collapse svg{ transform:rotate(0deg) }

/* Menu */
.menu{ list-style:none; margin:0; padding:6px; display:grid; gap:6px }
.item{ position:relative }
.link{
  display:flex; align-items:center; gap:12px; height:44px; padding:0 14px;
  border-radius:12px; color:#3f3b77; text-decoration:none; font-weight:700;
  transition:background .2s,color .2s;
}
.link:hover{ background:#f2efff; color:#4b2bb5 }
.link[aria-current="page"]{ background:#f2efff; color:#4b2bb5 }
.link .ico{ width:22px; height:22px; display:grid; place-items:center; color:#5b3fd9 }

.bottom { padding:6px }

/* Subpane (secundário) */
.subpane{
  position:fixed; top:0; left:var(--nav-w); width:268px; bottom:0;
  background:#faf9ff; border-right:1px solid var(--line);
  transform:translateX(-8px); opacity:0; pointer-events:none;
  transition:transform .28s,opacity .28s; z-index:39; display:flex; flex-direction:column;
  overflow:auto; -webkit-overflow-scrolling:touch;
  padding-bottom: env(safe-area-inset-bottom);
}
.subpane[data-open="true"]{ transform:translateX(0); opacity:1; pointer-events:auto }
.app-nav[data-collapsed="true"] ~ .subpane{ left:var(--nav-w-mini) }

.subpane-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line) }
.subpane .back{ border:1px solid var(--line); background:#fff; border-radius:10px; width:32px; height:32px; display:grid; place-items:center; cursor:pointer }
.submenu{ display:grid; gap:6px; padding:8px }
.sub-link{ display:block; padding:10px 12px; border-radius:10px; text-decoration:none; color:#2f2b77; border:1px solid #eceafd; background:#fff }
.sub-link:hover{ background:#f2efff }

/* Scrim (mobile) */
.nav-scrim{ position:fixed; inset:0; background:rgba(17,20,39,.45); z-index:35; backdrop-filter:saturate(140%) blur(2px) }
.nav-scrim[hidden]{ display:none }

/* Responsivo */
@media (max-width:1024px){
  .app-nav{ width:min(86vw,340px); transform:translateX(-110%) }
  .app-nav[aria-hidden="false"][data-open="true"]{ transform:translateX(0) }

  .subpane{
    position:fixed; top:0; bottom:0; left:0; width:min(86vw,340px);
    background:#faf9ff; border-right:1px solid var(--line);
    transform:translateX(-110%); opacity:1; pointer-events:none; z-index:39;
    overflow:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .subpane[data-open="true"]{ transform:translateX(0); pointer-events:auto }
}