/* Base */
:root{
  --sidebar-bg:#0B1220;
  --sidebar-hover:#0F1A2B;
  --primary:#1E88E5;
  --primary-hover:#1565C0;
  --text-muted:#B0BEC5;
  --text:#333;
  --white:#fff;
  --gray-50:#F9FAFB;
  --gray-100:#F5F7FA;
  --gray-200:#E5E7EB;
}
*{box-sizing:border-box}
body{margin:0;background:var(--gray-100);color:var(--text);font:14px/1.6,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}

/* Layout */
.layout{display:flex;min-height:100vh}
.sidebar{width:240px;background:var(--sidebar-bg);color:var(--text-muted);display:flex;flex-direction:column}
.brand{padding:16px 20px;color:var(--white);font-weight:600;border-bottom:1px solid rgba(255,255,255,.06)}
.nav{padding:8px 8px 24px 8px;overflow:auto}
.nav-section{padding:10px 12px;color:#8EA0AE;font-size:12px;text-transform:uppercase}
.nav-item{display:block;color:var(--text-muted);padding:10px 12px;border-radius:8px;text-decoration:none;margin:4px 8px}
.nav-item:hover{background:var(--sidebar-hover);color:var(--white)}
.nav-item.active{background:var(--primary-hover);color:var(--white);box-shadow:inset 3px 0 0 var(--primary)}

.main{flex:1;display:flex;flex-direction:column}
.topbar{height:56px;background:var(--gray-100);border-bottom:1px solid var(--gray-200);display:flex;align-items:center;padding:0 20px}
.content{padding:20px}

/* Cards */
.card{background:var(--white);border:1px solid var(--gray-200);border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.card-header{padding:14px 16px;border-bottom:1px solid var(--gray-200);font-weight:600}
.card-body{padding:16px}

/* Inputs & Buttons */
.button{background:var(--primary);color:var(--white);border:none;padding:8px 12px;border-radius:8px;cursor:pointer}
.button:hover{background:var(--primary-hover)}
.input{background:var(--white);border:1px solid var(--gray-200);padding:8px 10px;border-radius:8px}
.input:focus{outline:none;box-shadow:0 0 0 3px rgba(30,136,229,.15);border-color:var(--primary)}

/* Responsive */
@media(max-width: 1024px){
  .sidebar{position:fixed;z-index:10;transform:translateX(0)}
  .main{margin-left:240px}
}