:root {

  --bg: #0f172a;
  --card: #1e293b;
  --text: #ffffff;
  --secondary: #cbd5e1;
  --border: rgba(255,255,255,0.08);

}

body.light {

  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --secondary: #475569;
  --border: rgba(0,0,0,0.08);

}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{

  background: var(--bg);
  color: var(--text);

  font-family: Arial, sans-serif;

  transition: 0.3s;

}

.container{

  width:90%;
  max-width:1300px;

  margin:auto;

  padding:50px 0;

}

.theme-toggle{

  position:fixed;

  top:25px;
  right:25px;

  width:55px;
  height:55px;

  border:none;

  border-radius:50%;

  background:#2563eb;

  color:white;

  font-size:22px;

  cursor:pointer;

  z-index:1000;
}

/* HERO */

.hero{

  text-align:center;

  margin-bottom:70px;

}

.badge{

  display:inline-block;

  padding:10px 18px;

  border-radius:999px;

  background:rgba(59,130,246,0.15);

  color:#60a5fa;

  margin-bottom:24px;

}

.hero h1{

  font-size:72px;

  margin-bottom:20px;

}

.hero p{

  max-width:700px;

  margin:auto;

  line-height:1.8;

  color:var(--secondary);

}

/* STATS */

.stats-grid{

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

  gap:24px;

  margin-bottom:60px;

}

.stat-card{

  background:var(--card);

  padding:30px;

  border-radius:24px;

  border:1px solid var(--border);

}

.stat-card h3{

  margin-bottom:16px;

  color:var(--secondary);

}

.stat-card p{

  font-size:48px;

  font-weight:bold;

}

.easy{
  border-left:6px solid #22c55e;
}

.medium{
  border-left:6px solid #f59e0b;
}

.hard{
  border-left:6px solid #ef4444;
}

.streak{
  border-left:6px solid #3b82f6;
}

/* FORM */

.form-section{

  background:var(--card);

  padding:35px;

  border-radius:24px;

  margin-bottom:60px;

  border:1px solid var(--border);

}

.form-section h2{

  margin-bottom:24px;

}

#problemForm{

  display:flex;

  gap:18px;

  flex-wrap:wrap;

}

#problemForm input,
#problemForm select{

  flex:1;

  min-width:220px;

  padding:16px;

  border:none;

  border-radius:16px;

  background:var(--bg);

  color:var(--text);

}

#problemForm button{

  padding:16px 28px;

  border:none;

  border-radius:16px;

  background:#2563eb;

  color:white;

  cursor:pointer;

  font-weight:bold;

  transition:0.3s;

}

#problemForm button:hover{

  transform:translateY(-3px);

}

/* CHARTS */

.charts-grid{

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:24px;

  margin-bottom:60px;

}

.chart-card{

  background:var(--card);

  padding:30px;

  border-radius:24px;

  border:1px solid var(--border);

}

/* RECENT */

.recent-section{

  background:var(--card);

  padding:30px;

  border-radius:24px;

  border:1px solid var(--border);

}

.recent-header{

  margin-bottom:24px;

}

.problem-list{

  display:flex;

  flex-direction:column;

  gap:16px;

}

.problem-item{

  background:var(--bg);

  padding:20px;

  border-radius:18px;

  display:flex;

  justify-content:space-between;

  align-items:center;

}

.problem-difficulty{

  padding:8px 16px;

  border-radius:999px;

}

.problem-difficulty.easy{
  background:rgba(34,197,94,0.15);
  color:#22c55e;
}

.problem-difficulty.medium{
  background:rgba(245,158,11,0.15);
  color:#f59e0b;
}

.problem-difficulty.hard{
  background:rgba(239,68,68,0.15);
  color:#ef4444;
}

/* RESPONSIVE */

@media(max-width:900px){

  .charts-grid{
    grid-template-columns:1fr;
  }

  .hero h1{
    font-size:52px;
  }

}

@media(max-width:600px){

  .hero h1{
    font-size:40px;
  }

  .problem-item{

    flex-direction:column;

    align-items:flex-start;

    gap:12px;

  }

}