:root{
  --bg:#f6f8fb; --ink:#0f172a; --muted:#64748b; --panel:#ffffff; --ring:#d0d8e4; --blue:#004b8d; --accent:#00a3e0;
  --sidebar-w:280px; --sidebar-w-md:88px;
}
:root[data-theme="dark"]{
  --bg:#0b1220; --ink:#e5e9f4; --muted:#94a3b8; --panel:#0f172a; --ring:#233044; --blue:#1d80d0; --accent:#29b6f6;
}
*{box-sizing:border-box}
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
aside.site-nav{background:#fff;border-right:1px solid var(--ring);padding:16px;display:flex;flex-direction:column;gap:14px;position:sticky;top:0;height:100vh}
aside.site-nav .brand{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:12px}
aside.site-nav .brand img{height:38px}
aside.site-nav .brand strong{font-size:16px}
aside.site-nav nav a{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:10px;color:inherit;text-decoration:none;border:1px solid transparent;white-space:normal;line-height:1.25}
aside.site-nav nav a:hover{background:#f1f5fb;border-color:var(--ring)}
:root[data-theme="dark"] aside.site-nav nav a:hover{background:#162036;border-color:#2a3b52}
aside.site-nav .group{margin-top:6px;margin-bottom:10px;font-weight:700;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:0 4px}
aside.site-nav .icon{width:20px;height:20px;display:inline-grid;place-items:center;flex:0 0 20px}
aside.site-nav .label{flex:1;min-width:0;white-space:normal}
aside.site-nav .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--ring);background:var(--panel);color:inherit;text-decoration:none;font-weight:700;cursor:pointer}
aside.site-nav .btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
aside.site-nav .aside-divider{height:1px;background:var(--ring);margin:6px 0}
aside.site-nav .sidebar-actions{display:flex;flex-direction:column;gap:10px;margin:8px 0 6px}
aside.site-nav .sidebar-lang select{width:100%;padding:10px 12px;border:1px solid var(--ring);border-radius:10px;background:var(--panel);color:inherit}

.mobile-topbar{display:none;position:sticky;top:0;z-index:20;background:var(--panel);border-bottom:1px solid var(--ring);padding:10px 12px;align-items:center;gap:10px}
#menu-btn{border:1px solid var(--ring);background:var(--panel);border-radius:10px;padding:8px 10px;font-weight:700;cursor:pointer}
.backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:19}

@media (max-width: 1199px){
  .app{grid-template-columns:var(--sidebar-w-md) 1fr}
  aside.site-nav{width:var(--sidebar-w-md);padding:12px}
  aside.site-nav .brand strong, aside.site-nav .label{display:none}
}
@media (max-width: 768px){
  .app{grid-template-columns:1fr}
  .mobile-topbar{display:flex}
  aside.site-nav{position:fixed;left:0;top:0;bottom:0;z-index:21;width:var(--sidebar-w);transform:translateX(-100%);transition:transform .2s ease}
  aside.site-nav.open{transform:translateX(0)}
  .backdrop.show{display:block}
}

/* ===== Sticky, self-scrolling sidebar ===== */

/* Keep the left rail pinned; parent layout is a CSS grid (.app) */
aside.site-nav{
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;           /* dynamic viewport height (mobile safe) */
  overflow: hidden;         /* avoid double scrollbars */
  background: var(--panel); /* respects light/dark variables */
}

/* Only the inside scrolls; page scroll remains independent */
aside.site-nav .nav-scroll{
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;      /* don't bubble to page */
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
  scrollbar-gutter: stable both-edges;
  padding-right: 4px;                /* keep text clear of scrollbar */
}

/* Optional: subtle scrollbar styling */
aside.site-nav .nav-scroll::-webkit-scrollbar{ width: 8px; }
aside.site-nav .nav-scroll::-webkit-scrollbar-thumb{
  background: var(--ring);
  border-radius: 8px;
}
:root[data-theme="dark"] aside.site-nav .nav-scroll::-webkit-scrollbar-thumb{
  background: #2a3b52;
}

/* Mobile drawer keeps your existing behavior */
@media (max-width: 768px){
  aside.site-nav{
    position: fixed;
    left: 0; top: 0; bottom: 0;
    height: 100dvh;
    z-index: 21;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  aside.site-nav.open{ transform: translateX(0); }
  aside.site-nav .nav-scroll{ height: 100%; }
}

/* Home icon button inside brand row */
.brand { display: flex; align-items: center; gap: 10px; }
.brand .home-btn{
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--ring);
  background: var(--panel);
  color: inherit;
  border-radius: 12px;
  text-decoration: none;
}
.brand .home-btn:hover{ background: #f1f5fb; border-color: var(--ring); }
[data-theme="dark"] .brand .home-btn:hover{ background: #162036; border-color: #2a3b52; }

/* In compact sidebar mode, keep the home icon visible even if labels hide */
@media (max-width: 1199px){
  .brand strong{ display: none; } /* existing behavior */
  .brand .home-btn{ margin-left: 0; }
}