.pvq-container{ width:100%; margin: 0 0 16px 0; }
.pvq-root{ width:100%; }

.pvq-page{ width:100%; background:#fbfdff; border:1px solid #e5eaf1; border-radius:8px; box-shadow:0 4px 18px rgba(0,0,0,.06); overflow:hidden; display:flex; flex-direction:column }
.pvq-top{ display:flex; align-items:center; justify-content:center; gap:12px; padding:14px 18px; font-size:22px; border-bottom:1px solid #e5eaf1; background:#fbfdff; font-weight:600; color:#2b6cb0 }
.pvq-bottom{ padding:10px 14px 14px; border-top:1px solid #e5eaf1; background:#fbfdff; text-align:center; font-size:16px; color:#5f6b7a }

.pvq-content{ padding:20px; display:flex; flex-direction:column; align-items:center; text-align:center }
.pvq-content h1{ margin:0 0 0; font-size:22px; font-weight:700; line-height:1.35; color:#1c1f24 }
.pvq-content h2{ margin:0 0 0; font-size:18px; font-weight:600; line-height:1.4; color:#1c1f24 }
.pvq-content h3{ margin:10px 0; font-size:17px; font-weight:600; line-height:1.4; color:#1c1f24 }
.pvq-content h4{ margin:8px 0; font-size:16px; font-weight:600; line-height:1.4; color:#1c1f24 }
.pvq-content h5{ margin:6px 0; font-size:15px; font-weight:500; line-height:1.4; color:#5f6b7a }

.pvq-keys{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
.pvq-key{ padding:10px 16px; border-radius:8px; user-select:none; cursor:pointer; }
.pvq-key.correct{ background:#e8fff3 !important; border:1px solid #22c55e !important; color:#14532d !important; }
.pvq-key.wrong{ background:#fff5f5 !important; border:1px solid #f3b8b8 !important; color:#c53030 !important; }

.pvq-key.correct.flash{ animation: pvqFlashBg 0.5s alternate 10; }
@keyframes pvqFlashBg{
  from{ background:#e8fff3; border-color:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,0); }
  to  { background:#bbf7d0; border-color:#16a34a; box-shadow:0 0 0 8px rgba(34,197,94,.25); }
}

.pvq-timer{ height:6px; background:#edf2f7; width:90%; margin-top:16px; position:relative; border-radius:999px; overflow:hidden }
.pvq-timer > i{ display:block; height:100%; width:0%; background:linear-gradient(90deg, #2b6cb0, #3182ce) }
.pvq-seconds{ margin-top:6px; font-size:13px; color:#5f6b7a }

.pvq-progress{ height:6px; background:#edf2f7; border-radius:999px; overflow:hidden; width:90%; margin-top:18px }
.pvq-progress > i{ display:block; height:100%; width:0%; background:#3182ce }

.pvq-screen{ width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center }
.pvq-screen:not(.active){ display:none !important; }

.pvq-start{ position:relative }
.pvq-veil{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.04); z-index:10; cursor:pointer }
.pvq-start-btn{ appearance:none; border:1px solid #e5eaf1; background:#fff; padding:10px 16px; border-radius:15px; font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,.06) }

.pvq-retry{ margin-top:14px; padding:10px 18px; border-radius:10px; font-weight:700; border:1px solid #2b6cb0; color:#2b6cb0; background:#fff }
.pvq-retry:hover{ filter:brightness(0.98) }

@keyframes pvqFadeUp{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
.pvq-fade{ animation: pvqFadeUp .5s ease both }