/* Responsive Fix */
body { margin:0; font-family: Arial, sans-serif; }

.app { display:flex; min-height:100vh; }

.sidebar {
  width:250px;
  background: linear-gradient(180deg,#4c4cff,#6a5cff);
  color:white;
  padding:20px;
  transition: transform .3s ease;
}

.content { flex:1; padding:20px; }

.menu-btn { display:none; font-size:20px; margin-bottom:10px; }
.close-btn { display:none; background:none; border:none; color:white; font-size:20px; }

@media (max-width:1024px){
  .sidebar {
    position:fixed;
    left:0; top:0;
    height:100%;
    transform:translateX(-100%);
    z-index:1000;
  }
  .sidebar.active { transform:translateX(0); }
  .menu-btn { display:block; }
  .close-btn { display:block; margin-bottom:10px; }
}

.dashboard {
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap:15px;
}

.card {
  background:white;
  border-radius:12px;
  padding:20px;
  text-align:center;
}