* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --bg: #0b0f1a;
  --panel: #0f1629;
  --panel-2: #121a33;
  --text: #e6f1ff;
  --muted: #8aa1c1;
  --accent: #00d4ff;
  --accent-2: #7a37ff;
  --warning: #ffb020;
  --glow: 0 0 22px rgba(0, 212, 255, .35), 0 0 44px rgba(122, 55, 255, .25);
}

html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 20% -20%, #152042, transparent),
              radial-gradient(800px 400px at 120% 20%, #1a2855, transparent),
              var(--bg);
  overflow-x: hidden;
}

.stars {
  position: fixed; inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.5), rgba(255,255,255,0)),
    radial-gradient(1px 1px at 80% 70%, rgba(255,255,255,.3), rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,.4), rgba(255,255,255,0));
  pointer-events: none; opacity: .6;
}

.container { max-width: 920px; margin: 0 auto; padding: 16px; }
@media (min-width: 540px) { .container { padding: 18px; } }
@media (min-width: 920px) { .container { padding: 20px; } }

h1 { margin: 12px 0 8px; letter-spacing: .4px; font-size: 1.25rem; }
@media (min-width: 420px) { h1 { font-size: 1.35rem; } }
@media (min-width: 720px) { h1 { font-size: 1.6rem; } }
p { margin: 0 0 12px; line-height: 1.45; }
.muted { color: var(--muted); }

.progress { height: 12px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); position: sticky; top: 0; z-index: 10; }
#progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: var(--glow); transition: width .25s ease; }

.card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35), var(--glow);
}

.hidden { display: none; }

#questionCard h3 {
  margin: 0 0 12px;
  font-size: 1.05rem;
}
@media (min-width: 420px) { #questionCard h3 { font-size: 1.12rem; } }
@media (min-width: 720px) { #questionCard h3 { font-size: 1.2rem; } }

.badge { display: inline-block; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); font-size: .75rem; color: var(--muted); margin-right: 6px; margin-bottom: 6px; }

/* Opções da escala - mobile-first */
.scale { display: grid; gap: 10px; margin-top: 12px; }
.scale label {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 12px 14px;
  cursor: pointer; user-select: none; touch-action: manipulation;
  min-height: 52px;
  transition: transform .08s ease, border-color .2s ease, box-shadow .2s ease;
}
.scale label:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.18); box-shadow: var(--glow); }
.scale input { margin: 0; width: 18px; height: 18px; }

/* Colunas progressivas */
@media (min-width: 420px) { .scale { grid-template-columns: 1fr; } }
@media (min-width: 520px) { .scale { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px) { .scale { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .scale { grid-template-columns: repeat(5, 1fr); } }

.controls { position: sticky; bottom: calc(env(safe-area-inset-bottom) + 10px); display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0; z-index: 5; }
button {
  border: none; border-radius: 12px; padding: 12px 16px;
  font-weight: 700; cursor: pointer; letter-spacing: .3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #05101c; box-shadow: var(--glow);
}
button.ghost {
  background: rgba(255,255,255,.03); color: var(--muted);
  border: 1px solid rgba(255,255,255,.12); box-shadow: none;
}
button:disabled { opacity: .6; cursor: not-allowed; }

/* Toast */
.toast {
  position: sticky; top: 8px; z-index: 20;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-left: 4px solid var(--warning);
  color: #fff; padding: 10px 12px; border-radius: 12px;
  backdrop-filter: blur(8px);
  margin-bottom: 10px;
}
.toast.warn { border-left-color: var(--warning); }
.toast.hidden { display: none; }

/* Destaque de pergunta não respondida */
.warn-pulse {
  animation: warnPulse 1.2s ease-in-out 2;
  border-color: rgba(255, 176, 32, .6) !important;
  box-shadow: 0 0 0 2px rgba(255, 176, 32, .12), 0 8px 24px rgba(0,0,0,.35), var(--glow);
}
@keyframes warnPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

.grid { display: grid; gap: 14px; }
@media (min-width: 860px) { .grid { grid-template-columns: 1fr 1fr; } }

.results .card h4 { margin: 0 0 8px; }
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.kv .value { font-weight: 800; }
.bar { height: 10px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.bar > div { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: var(--glow); transition: width .4s ease; }

.footer-safe { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }