:root{
  --bg:#0b1220;--card:#071122;--muted:#9fb0c4;
  --accent:#4f9dff;--glass:rgba(255,255,255,0.02)
}

*{box-sizing:border-box}
html,body{
  margin:0;height:100%;
  font-family:Inter,system-ui,sans-serif;
  background:linear-gradient(180deg,#031329,#061224);
  color:#e6eef8;
}

.container{max-width:1100px;margin:28px auto;padding:24px}

header{display:flex;gap:16px;align-items:center}
.loogo{
  width:64px;height:64px;border-radius:12px;
  background:linear-gradient(135deg,var(--accent),#7ce0ff);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:22px;color:#061225;
}

.grid{display:grid;grid-template-columns:1fr 360px;gap:20px;margin-top:20px}
main{
  background:var(--glass);backdrop-filter:blur(6px);
  padding:18px;border-radius:12px;
}
aside{
  background:var(--card);padding:18px;border-radius:12px;
}

.card{
  background:linear-gradient(180deg,rgba(83, 19, 19, 0.02),transparent);
  border:1px solid rgba(255,255,255,0.03);
  padding:14px;border-radius:10px;margin-bottom:12px;
}

.roadmap{display:flex;flex-direction:column;gap:12px}
.level{display:flex;gap:12px;align-items:center}

.bubble{
  width:48px;height:48px;border-radius:10px;background:#e163e6;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:18px;
}

.btn{
  padding:8px 12px;border-radius:8px;background:var(--accent);
  color:#061225;cursor:pointer;border:none;
}
.clear{background:#3b4658}

textarea,select,input{
  width:100%;padding:8px;border-radius:8px;
  background:transparent;color:inherit;
  border:1px solid rgba(216, 5, 5, 0.04);
}

.codeBlock{
  background:#dc95eb;padding:12px;border-radius:8px;
  border:1px solid rgba(238, 222, 222, 0.03);
  white-space:pre-wrap;
}
.checklist {
    display: grid;
    gap: 8px;
    margin-top: 10px
}

.check {
    display: flex;
    gap: 10px;
    align-items: center;
    background: rgba(0, 0, 0, 0.02);
    padding: 10px;
    border-radius: 10px
}

.check input {
    width: 18px;
    height: 18px
}

@media(max-width:980px){
  .grid{grid-template-columns:1fr}
  .logo{width:52px;height:52px}
}