:root{
    --bg: #f6f7f9;
    --text: #111;
    --muted:#6c6c6c;
    --border:#e5e6ea;
    --hover:#eee;
    --radius:12px;
  }
  
  *{box-sizing:border-box}
  body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
  
  .sidenav{
    width: 320px;
    height: 100vh;
    overflow:auto;
    background: var(--bg);
    border-right: 1px solid var(--border);
    position: sticky; top:0;
  }
  
  .sidenav__brand{
    font-weight: 800; font-size: 12px; padding: 12px 20px 6px;
  }
  .sidenav__brand span{ color:#1266ff }
  
  .sidenav__nav{padding: 0 0}
  .sidenav__section-label{
    font-weight: 800; color: var(--muted); letter-spacing:.04em; text-transform:uppercase;
    padding: 14px 20px 8px;
  }
  .sidenav__divider{height:1px; background:var(--border); margin: 14px 0}
  
  .nav{ list-style:none; margin:0; padding:0 }
  .nav__item{ margin:0 }
  
  .nav__link, .nav__toggle{
    display:block; width:100%; padding:14px 20px; text-align:left; text-decoration:none;
    color:var(--text); background:transparent; border:0; cursor:pointer;
    font-weight:350; font-size:15px; line-height:1.2;
    border-radius: var(--radius);
  }
  
  .nav__link:hover, .nav__toggle:hover { background: var(--hover) }
  .nav__link.active { background:#e9e9e9 }
  
  .nav__item--has-children > .nav__toggle{ position:relative; padding-right:44px }
  .nav__toggle .chev{
    position:absolute; right:16px; transition: transform .18s ease;
  }
  .nav__toggle[aria-expanded="true"] .chev{ transform: rotate(90deg) }
  
  .nav__children{
    list-style:none; margin: 4px 0 8px; padding-left: 16px;
  }
  .nav__children .nav__link, .nav__children .nav__toggle{ padding-left: 36px; font-size: 15px }
  .nav__children .nav__children .nav__link, 
  .nav__children .nav__children .nav__toggle{ padding-left: 52px; font-size: 16px }