*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}

.hidden{display:none}

/* LANDING */
.landing{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:linear-gradient(135deg,#0f172a,#1e3a8a,#6d28d9);
  color:white;
}
.landing-center{text-align:center}
.logo{font-size:2.5rem}
.subtitle{margin:1rem 0}
.btn-glow{
  padding:.8rem 1.5rem;
  border:none;
  border-radius:12px;
  background:linear-gradient(90deg,#06b6d4,#3b82f6);
  cursor:pointer;
  font-weight:bold;
}

/* TOPBAR */
.topbar{
  display:flex;
  align-items:center;
  padding:.7rem 1rem;
  background:linear-gradient(90deg,#020617,#6d28d9);
  color:white;
}
.search{margin-left:auto;padding:.4rem;border-radius:8px;border:none}

/* SIDEBAR */
.sidebar{
  position:fixed;
  top:48px;
  left:0;
  width:220px;
  height:100%;
  background:#020617;
  padding:1rem;
}
.sidebar a{
  display:block;
  color:white;
  padding:.5rem;
  text-decoration:none;
}
.sidebar a:hover{background:#1e293b}

/* CONTENT */
.content{
  margin-left:240px;
  padding:2rem;
  background:#020617;
  color:white;
  min-height:100vh;
}

/* CARDS */
.card{
  background:linear-gradient(135deg,#020617,#0f172a);
  border-radius:18px;
  padding:1.5rem;
  margin-bottom:1.5rem;
  box-shadow:0 20px 40px rgba(0,0,0,.5);
  transition:.3s;
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 60px rgba(59,130,246,.4);
}
.card-header{
  display:flex;
  align-items:center;
  gap:.6rem;
}
.icon{font-size:1.5rem}
.more-btn{
  margin-top:.8rem;
  background:linear-gradient(90deg,#06b6d4,#6366f1);
  border:none;
  padding:.4rem 1rem;
  border-radius:10px;
  cursor:pointer;
}
.extra{
  display:none;
  margin-top:1rem;
}
pre{
  background:#020617;
  padding:.6rem;
  border-radius:8px;
  margin-top:.5rem;
}

/* TOP BUTTON */
.topBtn{
  position:fixed;
  bottom:1rem;
  right:1rem;
  padding:.5rem .8rem;
  border:none;
  border-radius:10px;
  background:#38bdf8;
  cursor:pointer;
}