:root{
  --qp-green:#3CA55C;
  --qp-amber:#ffb300;
  --qp-blue:#2d8cf0;
  --qp-red:#d9534f;
  --qp-bg:#f9f5ef;
}
.qp-wrap{
  max-width:1000px;
  margin:0 auto;
  padding:1rem;
}
.qp-grid{
  display:grid;
  gap:1rem;
}
.qp-form{
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  padding:1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.qp-form label{
  display:flex;
  flex-direction:column;
  font-size:.95rem;
  gap:.35rem;
}
.qp-form select,
.qp-form input,
.qp-form button{
  border-radius:10px;
  border:1px solid rgba(0,0,0,.15);
  padding:.55rem .7rem;
  font-size:1rem;
}
.qp-form button{
  background:var(--qp-blue);
  border:0;
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:opacity .2s ease, transform .1s ease;
}
.qp-form button:disabled{
  opacity:.6;
  cursor:wait;
}
.qp-results{
  display:grid;
  gap:1rem;
}
.qp-card{
  border-radius:16px;
  padding:1rem;
  color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.qp-card ul{margin:.4rem 0 0; padding-left:1.2rem; color:#fff;}
.qp-card.green{ background:var(--qp-green); }
.qp-card.amber{ background:var(--qp-amber); }
.qp-card.blue{ background:var(--qp-blue); }
.qp-card.red{ background:var(--qp-red); }
.qp-empty{
  border:1px dashed rgba(0,0,0,.2);
  border-radius:16px;
  padding:1rem;
  text-align:center;
  color:#6b5d4b;
}
.qp-error{
  color:var(--qp-red);
  font-weight:600;
  margin-top:.5rem;
}
@media(min-width:720px){
  .qp-grid{
    grid-template-columns:1fr 1fr;
    align-items:start;
  }
}