/* ===== BASIC RESET ===== */
*{
  box-sizing:border-box;
  font-family:Inter, Arial, sans-serif;
}

body{
  margin:0;
  background:#f6f8fc;
}

/* ===== TOP BAR ===== */
.topbar{
  height:56px;
  background:#ffffff;
  display:flex;
  align-items:center;
  padding:0 16px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

/* ===== SIDEBAR ===== */
.sidebar{
  width:240px;
  background:#ffffff;
  height:100vh;
  position:fixed;
  left:0;
  top:0;
  box-shadow:2px 0 10px rgba(0,0,0,.08);
  padding:16px;
}

.sidebar a{
  display:block;
  padding:10px 12px;
  margin-bottom:6px;
  text-decoration:none;
  color:#334155;
  border-radius:6px;
}

.sidebar a:hover,
.sidebar a.active{
  background:#e8f5e9;
  color:#2e7d32;
}

/* ===== CONTENT ===== */
.content{
  margin-left:240px;
  padding:20px;
}

/* ===== CARD ===== */
.card{
  background:#ffffff;
  border-radius:12px;
  padding:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* ===== MOBILE ===== */
@media(max-width:768px){
  .sidebar{
    left:-100%;
  }
  .sidebar.show{
    left:0;
  }
  .content{
    margin-left:0;
  }
}