:root { --kmp-accent: #2563eb; --kmp-sidebar-w: 260px; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, "Segoe UI", sans-serif; }

.kmp-shell { display: flex; min-height: 100vh; }
.kmp-sidebar {
  width: var(--kmp-sidebar-w); flex: 0 0 var(--kmp-sidebar-w);
  background: var(--bs-body-bg, #fff); border-right: 1px solid rgba(0,0,0,.08);
  transition: margin-left .3s cubic-bezier(.4,0,.2,1); position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.kmp-main { flex: 1 1 auto; min-width: 0; }
.kmp-topbar { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; border-bottom: 1px solid rgba(0,0,0,.08); }
.kmp-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 1040; }

/* desktop collapsed */
.kmp-collapsed .kmp-sidebar { margin-left: calc(-1 * var(--kmp-sidebar-w)); }

/* hamburger */
.kmp-burger { width: 28px; height: 22px; position: relative; cursor: pointer; background: none; border: 0; }
.kmp-burger span { position: absolute; left: 0; height: 2px; width: 100%; background: currentColor; transition: .3s; }
.kmp-burger span:nth-child(1) { top: 0; } .kmp-burger span:nth-child(2) { top: 10px; } .kmp-burger span:nth-child(3) { top: 20px; }
.kmp-drawer-open .kmp-burger span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.kmp-drawer-open .kmp-burger span:nth-child(2) { opacity: 0; }
.kmp-drawer-open .kmp-burger span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

.kmp-navlink { display:flex; align-items:center; gap:.5rem; padding:.5rem .9rem; color:inherit; text-decoration:none; border-left:3px solid transparent; }
.kmp-navlink:hover { background: rgba(0,0,0,.04); }
.kmp-navlink.active { border-left-color: var(--kmp-accent); font-weight:600; color: var(--kmp-accent); }

/* catalog cards + tabstack used in later tasks */
.kmp-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:1rem; }
.kmp-tabstack { display:grid; }
.kmp-tabstack > * { grid-area: 1 / 1; }
.kmp-tab-off { visibility: hidden; }

@media (max-width: 991.98px) {
  .kmp-sidebar { position: fixed; z-index: 1050; height: 100vh; margin-left: calc(-1 * var(--kmp-sidebar-w)); }
  .kmp-drawer-open .kmp-sidebar { margin-left: 0; }
  .kmp-drawer-open .kmp-scrim { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }