*{box-sizing:border-box;font-family:Inter,sans-serif}
body{margin:0;background:#121212;color:#fff}

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

.nav{
  width:220px;
  background:#1e1e1e;
  padding:20px;
}
.nav button{
  width:100%;
  margin:8px 0;
  padding:10px;
  background:#2a2a2a;
  border:0;
  color:#fff;
  border-radius:8px;
  cursor:pointer;
}

main{flex:1;padding:24px;overflow:auto}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,200px);
  gap:20px;
}

.card{
  background:#1f1f1f;
  border-radius:16px;
  padding:12px;
  text-align:center;
  cursor:pointer;
  transition:.2s;
}
.card:hover{transform:scale(1.05)}

.card img{
  width:100%;
  border-radius:12px;
}

.form input, .form button{
  width:100%;
  margin:8px 0;
  padding:10px;
  border-radius:8px;
  border:0;
}

.form button{
  background:#6200ee;
  color:#fff;
  cursor:pointer;
}

.tile{
  background:#1f1f1f;
  border-radius:16px;
  padding:16px;
}
.tile h3{
  margin:0 0 10px 0;
}

.bar{
  background:#2a2a2a;
  border-radius:10px;
  height:10px;
  overflow:hidden;
}
.bar-fill{
  height:100%;
  background:linear-gradient(90deg,#03dac6,#bb86fc);
}

.knob{
  width:90px;
  height:90px;
  border-radius:50%;
  background:#1c1c1c;
  position:relative;
  box-shadow: inset 0 0 8px #000;
}
.knob::after{
  content:'';
  width:4px;
  height:40%;
  background:#bb86fc;
  position:absolute;
  top:10%;
  left:50%;
  transform:translateX(-50%);
  border-radius:2px;
}
.knob-label{
  text-align:center;
  margin-top:6px;
  font-size:12px;
  color:#aaa;
}

.profile-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:20px;
}
.header{
  display:flex;
  gap:20px;
  align-items:center;
}
.avatar{
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
}
.knob-row{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.badge{
  background:#03dac6;
  color:#000;
  padding:4px 10px;
  border-radius:8px;
}
.eq{
  width:100%;
  height:180px;
  background:#141414;
  border-radius:12px;
}

.eq-mid{
  stroke:#2a2a2a;
  stroke-width:1;
}

.eq-curve{
  fill:none;
  stroke:#bb86fc;
  stroke-width:3;
}