:root{ --kfm-sidebar-w:260px; --kfm-topbar-h:64px; }
html,body{ height:100%; } body{ margin:0; background:#f6f7fb; }

/* Sidebar */
.kfm-sidebar{ position:fixed; inset:0 auto 0 0; width:var(--kfm-sidebar-w);
  background:#121826; color:#dbe2f1; display:flex; flex-direction:column; z-index:1030;
  transition:transform .25s ease; }
.kfm-brand{ padding:18px 18px 10px; display:flex; align-items:center; gap:10px; }
.kfm-logo{ width:36px; height:36px; border-radius:10px; background:#2563eb; display:grid; place-items:center; color:#fff; font-weight:700; }
.kfm-brand-text{ font-weight:600; line-height:1.1; }
.kfm-nav{ padding:10px 8px; display:flex; flex-direction:column; gap:4px; }
.kfm-nav-link{ display:block; padding:10px 12px; border-radius:10px; color:#dbe2f1; text-decoration:none; }
.kfm-nav-link:hover{ background:#1e293b; color:#fff; }
.kfm-nav-link.active{ background:#0f172a; color:#fff; }
.kfm-nav-divider{ height:1px; background:#2b364a; margin:10px 8px; }
.kfm-sidebar-footer{ margin-top:auto; }

/* Main */
.kfm-main{ margin-left:var(--kfm-sidebar-w); min-height:100vh; display:flex; flex-direction:column; }
.kfm-topbar{ position:sticky; top:0; z-index:1020; height:var(--kfm-topbar-h); background:#fff;
  border-bottom:1px solid #e9edf3; display:flex; align-items:center; padding:0 16px; }
.kfm-content-wrap{ padding:24px; display:flex; justify-content:center; }
.kfm-content{ width:100%; max-width:980px; border-radius:14px; }

/* Mobile sidebar slide-in */
@media (max-width: 991.98px){
  .kfm-sidebar{ transform:translateX(-100%); }
  .kfm-sidebar.open{ transform:translateX(0); }
  .kfm-main{ margin-left:0; }
}