:root{
  --blue-100:#b7d8ff; --blue-200:#9fd0ff; --blue-300:#6ab7ff; --blue-400:#47a6ff;
  --blue-dark:#0b3d91;
  --panel:#0f1b36; --panel-2:#142349; --glass:rgba(18,27,46,.6);
}
.qs-container{
  min-height:100dvh;display:grid;place-items:center;padding:1.25rem;
  background:
    radial-gradient(1200px 800px at 30% 20%, rgba(0,102,255,.25), transparent 70%),
    radial-gradient(1200px 800px at 80% 80%, rgba(0,153,255,.15), transparent 70%),
    linear-gradient(135deg, #0a0f1f, #0b1d3a 50%, #0a0f1f);
}
.qs-card{
  max-width:760px;width:100%;
  background: linear-gradient(135deg, rgba(20,35,73,.75), rgba(15,27,54,.75));
  backdrop-filter: blur(10px);
  border:1px solid rgba(71,166,255,.35);
  box-shadow:0 0 40px rgba(0,150,255,.2);
  border-radius:24px; padding:32px;
}
.qs-title{
  font-size:2rem;font-weight:800;
  background:linear-gradient(90deg,var(--blue-400),#e6f2ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin:0 0 1rem;
  text-align:center;
}
.qs-card:hover .qs-title{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--blue-dark)}
.qs-sub{color:var(--blue-200);}
.qs-row{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;justify-content:center}
.qs-btn{appearance:none;border:0;border-radius:18px;padding:.85rem 1.25rem;font-weight:700;cursor:pointer;transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;}
.qs-btn:disabled{opacity:.4;cursor:not-allowed}
.qs-btn--primary{background:#1f65ff;color:#fff;}
.qs-btn--primary:hover{transform:scale(1.03);background:#2b6dff}
.qs-btn--outline{background:transparent;color:var(--blue-200);border:2px solid var(--blue-200)}
.qs-btn--outline:hover{background:var(--blue-200);color:var(--blue-dark)}
.qs-btn--white{background:#fff;color:#0b1d3a}
.qs-btn--white:hover{transform:scale(1.03);background:#fff}
.qs-meta{color:#c7d7ef}
.qs-panel{margin-top:1rem;padding:1rem;border-radius:16px;background:rgba(71,166,255,.08);border:1px solid rgba(71,166,255,.25);}
.qs-panel p{color:#fff}
.qs-big{font-size:1.75rem;font-weight:800;text-align:center;padding:2rem;background:rgba(20,35,73,.6);border:1px solid rgba(71,166,255,.35);border-radius:24px}
.qs-big{color:#fff}
.qs-tag{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .7rem;border-radius:999px;border:1px solid rgba(71,166,255,.35);background:rgba(255,255,255,.06)}
.qs-icon{width:20px;height:20px;display:inline-block;vertical-align:middle;color:var(--blue-200)}
.qs-card:hover .qs-icon{color:var(--blue-dark)}
.qs-btn:hover .qs-icon{color:var(--blue-dark)}
.qs-feedback-enter{animation:pop .3s ease both}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}

/* Listado del historial */
.qs-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.qs-list li{padding:.5rem .75rem;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(71,166,255,.15)}

/* Estado ocupado: deshabilitar clicks */
.is-busy .qs-btn{pointer-events:none;opacity:.6}
.is-busy .qs-btn[data-act="skipFeedback"]{pointer-events:auto;opacity:1}

/* Barra de progreso resultados */
.qs-progress{position:relative;width:100%;height:16px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(71,166,255,.25);overflow:hidden}
.qs-progress__bar{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--blue-400),#9fd0ff);box-shadow:0 0 12px rgba(71,166,255,.35) inset;transition:width .4s ease}