.app-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; background: hsl(var(--bg)); }
.app-shell[data-collapsed="true"] { grid-template-columns: 72px 1fr; }
.main-wrap { display: flex; flex-direction: column; min-width: 0; }
.main-content { padding: 28px; min-width: 0; flex: 1; }

.nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px; color: hsl(var(--sidebar-fg) / .78); font-size: 13.5px; font-weight: 500; transition: .15s; width: 100%; text-align: left; position: relative; }
.nav-item:hover { background: hsl(0 0% 100% / .05); color: hsl(var(--sidebar-fg)); }
.nav-item.active { background: hsl(0 0% 100% / .08); color: white; }
.nav-item.active::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; background: hsl(var(--b-accent)); border-radius: 0 3px 3px 0; }

.setting-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid hsl(var(--border)); }
.setting-row:last-child { border-bottom: none; }
.setting-row > div > strong { font-size: 13px; display: block; }

.check-box:hover { border-color: hsl(var(--success)); }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; }
}