:root{font-family:Inter,system-ui,Arial,sans-serif;color:#111;background:#f4f6f8}*{box-sizing:border-box}body{margin:0}.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#111;color:#fff;gap:12px;flex-wrap:wrap}.brand{font-size:20px;font-weight:800}.muted{color:#6b7280}.container{max-width:1400px;margin:0 auto;padding:20px}.grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px}.card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px;box-shadow:0 4px 16px rgba(0,0,0,.04);margin-bottom:16px}h1,h2,h3{margin-top:0}input,select,button,textarea{font:inherit}input,select,textarea{width:100%;padding:10px 12px;border:1px solid #cfd5dd;border-radius:9px;background:#fff}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row>*{flex:1}.btn{border:0;border-radius:9px;padding:10px 14px;cursor:pointer;background:#e5e7eb;color:#111;font-weight:700}.btn.primary{background:#111;color:#fff}.btn.success{background:#d1fae5}.btn.danger{background:#fee2e2}.btn:disabled{opacity:.5;cursor:not-allowed}.hidden{display:none!important}.pill{display:inline-block;padding:5px 9px;border-radius:999px;background:#eef2ff;font-size:12px;font-weight:700}.paper-stage{position:relative;background:#d9dde3;min-height:420px;overflow:auto;border-radius:12px;padding:14px}.page-wrap{position:relative;width:max-content;margin:0 auto 16px}.page-wrap canvas,.page-wrap img{display:block;max-width:none}.mask{position:absolute;border:3px solid #111;background:rgba(255,255,255,.14);cursor:pointer}.mask::after{content:attr(data-label);position:absolute;left:0;top:-28px;background:#111;color:#fff;padding:4px 7px;border-radius:5px;font-size:12px}.leader-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #eee}.rank{font-weight:800;min-width:28px}.score{font-weight:800}.question-img{max-width:100%;max-height:65vh;display:block;margin:0 auto;border:1px solid #ddd}.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.option-btn{padding:16px;border:2px solid #d1d5db;background:#fff;border-radius:12px;font-weight:800;cursor:pointer}.option-btn:hover{border-color:#111}.answer-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answer-box{border:1px solid #ddd;border-radius:10px;padding:10px;min-height:100px}.answer-name{display:flex;justify-content:space-between;color:#000;padding:5px 0;border-bottom:1px dashed #ddd}.thumb{border:1px solid #ddd;border-radius:10px;padding:10px;margin-bottom:10px}.thumb img{width:100%;max-height:150px;object-fit:contain;background:#f8fafc}.copybox{display:flex;gap:8px}.copybox input{flex:1}.status-dot{width:10px;height:10px;border-radius:50%;background:#9ca3af;display:inline-block}.status-dot.live{background:#16a34a}@media(max-width:900px){.grid{grid-template-columns:1fr}.option-grid{grid-template-columns:1fr}}
.master-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}.stat-card{background:#111;color:#fff;border-radius:12px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.stat-card span{font-size:13px}.stat-card b{font-size:26px}.answered-tag{font-size:11px;color:#111}.option-btn.option-correct{background:#dcfce7;border-color:#16a34a;color:#14532d}.option-btn.option-wrong{background:#fee2e2;border-color:#dc2626;color:#7f1d1d}.result-popup{position:fixed;left:50%;top:18%;transform:translateX(-50%);z-index:50;min-width:190px;padding:18px 22px;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.25);text-align:center;color:#fff;display:flex;flex-direction:column;gap:4px;font-size:17px}.result-popup b{font-size:28px}.result-popup.right{background:#15803d}.result-popup.wrong{background:#b91c1c}.chat-toggle{position:fixed;right:18px;bottom:18px;z-index:40;border:0;border-radius:999px;padding:12px 18px;background:#111;color:#fff;font-weight:800;cursor:pointer}.chat-panel{position:fixed;right:18px;bottom:72px;z-index:41;width:min(340px,calc(100vw - 28px));background:#fff;border:1px solid #d1d5db;border-radius:14px;box-shadow:0 16px 50px rgba(0,0,0,.2);overflow:hidden}.chat-head{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;background:#111;color:#fff}.chat-head button{border:0;background:transparent;color:#fff;font-size:24px;cursor:pointer}.chat-messages{height:220px;overflow:auto;padding:10px;background:#f8fafc}.chat-message{padding:7px 8px;margin-bottom:7px;background:#fff;border:1px solid #e5e7eb;border-radius:9px}.chat-message.master{border-color:#111}.chat-message b{display:block;font-size:11px}.chat-message span{font-size:13px;word-break:break-word}.chat-form{display:flex;gap:7px;padding:9px}.chat-form input{min-width:0}.chat-form .btn{flex:0}@media(max-width:600px){.master-stats{grid-template-columns:1fr}.result-popup{top:12%}}

.attempted-tag{font-size:.78em;font-weight:700;opacity:.78;white-space:nowrap}


/* Participant question-first layout */
#quizArea .grid{grid-template-columns:minmax(0,1fr) 300px}
#quizArea main>.card{padding:14px}
.question-viewer{position:relative;cursor:zoom-in;border:1px solid #e5e7eb;border-radius:12px;background:#fff;padding:12px;min-height:260px;display:flex;flex-direction:column;justify-content:center;outline:none}
.question-viewer:focus-visible{box-shadow:0 0 0 3px rgba(17,24,39,.18)}
.question-viewer #prompt{margin:0 0 10px;font-size:clamp(20px,2.2vw,32px);line-height:1.3}
.question-viewer .question-img{width:100%;max-width:100%;max-height:58vh;object-fit:contain}
.question-zoom-hint{position:absolute;right:10px;top:10px;z-index:2;font-size:11px;font-weight:800;color:#374151;background:rgba(255,255,255,.92);border:1px solid #d1d5db;border-radius:999px;padding:5px 9px}
#quizArea .option-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:10px}
#quizArea .option-btn{padding:11px 12px;min-height:48px;font-size:15px}
#quizArea.question-expanded .grid{display:block}
#quizArea.question-expanded aside,#quizArea.question-expanded #qCounter,#quizArea.question-expanded #options,#quizArea.question-expanded #resultMsg{display:none!important}
#quizArea.question-expanded main>.card{position:fixed;inset:0;z-index:45;margin:0;padding:12px;border:0;border-radius:0;background:#fff;overflow:auto}
#quizArea.question-expanded main>.card>.row,#quizArea.question-expanded #waiting,#quizArea.question-expanded #finished{display:none!important}
#quizArea.question-expanded #question{height:100%}
#quizArea.question-expanded .question-viewer{min-height:calc(100vh - 24px);height:calc(100vh - 24px);border:0;padding:18px;cursor:zoom-out}
#quizArea.question-expanded .question-viewer #prompt{font-size:clamp(24px,3vw,44px);text-align:center;margin:0 0 14px}
#quizArea.question-expanded .question-viewer .question-img{flex:1;width:100%;max-height:calc(100vh - 110px);object-fit:contain}
#quizArea.question-expanded .question-zoom-hint{position:fixed;right:18px;top:18px;font-size:12px}
@media(max-width:900px){#quizArea .grid{grid-template-columns:1fr}#quizArea .question-viewer{min-height:220px}#quizArea .question-viewer .question-img{max-height:52vh}}
@media(max-width:600px){#quizArea .option-grid{grid-template-columns:1fr 1fr}#quizArea .option-btn{padding:10px 8px;font-size:14px}.question-zoom-hint{font-size:10px}}


/* More aggressive use of vertical space for quiz questions */
/* #quizArea .question-viewer{
  padding:4px 6px;
  min-height:340px;
}
#quizArea .question-viewer #prompt{
  margin:0 0 2px;
  line-height:1.12;
}
#quizArea .question-viewer .question-img{
  max-height:72vh;
  width:100%;
  object-fit:contain;
} */
/* Responsive participant question area */
#quizArea .question-viewer{
  padding:4px 6px;
  min-height:0;
  height:auto;
  justify-content:flex-start;
}

#quizArea .question-viewer #prompt{
  margin:0 0 2px;
  line-height:1.12;
}

#quizArea .question-viewer .question-img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:65vh;
  object-fit:contain;
  margin:0 auto;
}
/* Enlarged question view: use nearly all available height */
#quizArea.question-expanded main>.card{
  padding:2px;
}
#quizArea.question-expanded .question-viewer{
  min-height:calc(100vh - 4px);
  height:calc(100vh - 4px);
  padding:2px 4px;
}
#quizArea.question-expanded .question-viewer #prompt{
  margin:0 0 2px;
  line-height:1.06;
}
#quizArea.question-expanded .question-viewer .question-img{
  max-height:calc(100vh - 34px);
  width:100%;
  object-fit:contain;
}
#quizArea.question-expanded .question-zoom-hint{
  top:5px;
  right:5px;
}
@media(max-width:900px){
  #quizArea .question-viewer .question-img{max-height:66vh}
}

.paste-zone{margin-top:10px;border:2px dashed #9ca3af;border-radius:10px;padding:14px;text-align:center;color:#4b5563;background:#f9fafb;cursor:text}.paste-zone:focus{border-color:#111;outline:2px solid #e5e7eb}.explanation-list{margin-top:10px;display:grid;gap:8px}.explanation-item{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #e5e7eb;border-radius:10px;padding:8px 10px}.explanation-item span{min-width:0;word-break:break-word}.explanation-item .btn{flex:0}.explanation-downloads{margin-top:18px;padding-top:14px;border-top:1px solid #e5e7eb}.explanation-downloads h3{margin-bottom:6px}.explanation-download-btn{display:block;text-align:center;text-decoration:none;margin:8px 0;background:#111;color:#fff}.explanation-download-btn:hover{opacity:.9}

/* Landscape-style question expansion */
#quizArea.question-expanded .question-viewer{
  width:100%;
  max-width:none;
  justify-content:center;
  align-items:center;
}
#quizArea.question-expanded .question-viewer .question-img{
  width:100%;
  height:calc(100vh - 36px);
  max-height:calc(100vh - 36px);
  object-fit:contain;
}
#quizArea.question-expanded .question-viewer #prompt{
  width:100%;
  max-width:1600px;
}
@media (orientation:landscape){
  #quizArea.question-expanded .question-viewer .question-img{
    height:calc(100vh - 24px);
    max-height:calc(100vh - 24px);
  }
}

.mask-tools{gap:8px;flex-wrap:wrap;margin-top:8px}
.mask-tools .btn{flex:0 0 auto}

.master-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.auto-mode-card .auto-controls label{flex:0 1 220px;font-weight:700}
.auto-mode-card .auto-controls .btn{flex:0 0 auto}
.auto-switch{display:flex;align-items:center;gap:8px;font-weight:800;flex:0!important;white-space:nowrap}
.auto-switch input{width:auto}
.question-meta-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
.countdown-badge{min-width:64px;text-align:center;padding:7px 11px;border-radius:999px;background:#111;color:#fff;font-size:20px;font-weight:900;line-height:1}
.countdown-badge.urgent{background:#b91c1c}
.timer-stat b{font-variant-numeric:tabular-nums}
@media(max-width:760px){.master-stats{grid-template-columns:1fr}.countdown-badge{font-size:18px}}

/* Floating mask controls, always available like chat */
.floating-mask-tools{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:60;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  max-width:calc(100vw - 110px);
}
.floating-mask-tools .btn{
  flex:0 0 auto;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  background:#fff;
}
.floating-mask-tools .btn.primary{background:#111;color:#fff}

/* Quiz Master live play panel */
.master-play-result{font-weight:900;margin-top:10px}
.master-tag{
  font-size:10px;
  padding:2px 6px;
  border-radius:999px;
  background:#111;
  color:#fff;
  margin-left:4px;
}
@media(max-width:650px){
  .floating-mask-tools{left:8px;bottom:8px;max-width:calc(100vw - 86px);gap:5px}
  .floating-mask-tools .btn{font-size:12px;padding:8px 9px}
}

.question-changed-alert{
  position:fixed;
  left:50%;
  top:18%;
  transform:translate(-50%,-12px) scale(.96);
  z-index:90;
  padding:16px 24px;
  border-radius:14px;
  background:#111;
  color:#fff;
  font-weight:900;
  font-size:clamp(22px,3vw,38px);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
  text-align:center;
  max-width:90vw;
}
.question-changed-alert.show{
  opacity:1;
  transform:translate(-50%,0) scale(1);
}
.new-question-flash{
  animation:newQuestionFlash .9s ease;
}
@keyframes newQuestionFlash{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.0)}
  20%{box-shadow:0 0 0 6px rgba(34,197,94,.55)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
@media(prefers-reduced-motion:reduce){
  .question-changed-alert{transition:none}
  .new-question-flash{animation:none;box-shadow:0 0 0 4px rgba(34,197,94,.4)}
}

#masterSetupArea.hidden{
  display:none!important;
}
@media(max-width:700px){
}

.answer-key-box{margin-bottom:14px;padding:12px;border:1px solid #d1d5db;border-radius:12px;background:#f9fafb}
.answer-key-box input{margin-top:6px;font-size:22px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.answer-key-box .muted{margin-top:6px;font-weight:700}


/* Home / saved quizzes */
.home-container{max-width:980px}
.saved-quizzes-head>div{min-width:0}
.saved-quizzes-head .btn{flex:0 0 auto}
.saved-quiz-list{display:grid;gap:12px;margin-top:12px}
.saved-quiz-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:14px;
  background:#fafafa;
}
.saved-quiz-main{min-width:0}
.saved-quiz-title{font-size:18px;font-weight:900;margin-bottom:6px}
.saved-quiz-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:#4b5563;margin-bottom:9px}
.saved-quiz-link input{font-size:13px;background:#fff}
.saved-quiz-actions{display:flex;flex-direction:column;gap:8px;min-width:165px}
.saved-quiz-actions .btn{white-space:nowrap}
@media(max-width:720px){
  .saved-quiz-row{grid-template-columns:1fr}
  .saved-quiz-actions{flex-direction:row;flex-wrap:wrap;min-width:0}
  .saved-quiz-actions .btn{flex:1 1 150px}
}


/* Auto-repeat intermission */
.repeat-status{
  margin-top:12px;
  padding:12px 14px;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#f8fafc;
  font-size:16px;
}
.repeat-status b{font-size:18px}
#masterRepeatCountdown,#participantRepeatCountdown{
  font-variant-numeric:tabular-nums;
  font-size:22px;
}
.auto-controls .btn.danger{
  background:#fee2e2;
  color:#7f1d1d;
}


/* =========================================================
   Quiz Master UI redesign
   ========================================================= */
.master-page{
  --master-bg:#eef2f7;
  --master-panel:#ffffff;
  --master-border:#dbe3ec;
  --master-text:#0f172a;
  --master-muted:#64748b;
  --master-accent:#111827;
  --master-green:#15803d;
  --master-blue:#1d4ed8;
  background:var(--master-bg);
  color:var(--master-text);
}
.master-page .master-topbar{
  position:sticky;
  top:0;
  z-index:55;
  padding:12px 20px;
  background:rgba(15,23,42,.97);
  box-shadow:0 8px 28px rgba(15,23,42,.18);
  backdrop-filter:blur(10px);
}
.master-brand-block{min-width:220px}
.master-roomline{margin-top:3px;color:#cbd5e1;font-size:13px}
.dot-sep{padding:0 5px;opacity:.7}
.master-top-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.master-top-actions .btn{box-shadow:none}
.btn-soft{background:#334155!important;color:#fff!important}
.btn-start{background:#16a34a!important;color:#fff!important}
.btn-next{background:#2563eb!important;color:#fff!important}
.master-page .btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(.98)}
.master-page .btn{transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}
.master-container{max-width:1500px;padding-top:18px}
.master-grid{grid-template-columns:minmax(0,1fr) 360px;gap:20px}
.master-page .card{
  border:1px solid var(--master-border);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(15,23,42,.055);
}
.master-page h2{font-size:20px;letter-spacing:-.02em}
.master-page h3{letter-spacing:-.01em}
.master-stats{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.master-page .stat-card{
  min-height:88px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg,#111827,#1f2937);
  box-shadow:0 8px 20px rgba(15,23,42,.12);
}
.master-page .stat-card span{
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;
  color:#cbd5e1;
}
.master-page .stat-card b{font-size:30px}
.master-control-card{
  border-left:5px solid #2563eb!important;
  background:linear-gradient(180deg,#fff,#f8fbff)!important;
}
.master-control-card h2{margin-bottom:4px}
.master-control-card .auto-controls{
  align-items:end;
  margin-top:12px;
}
.master-control-card input[type="number"]{
  background:#fff;
  font-size:18px;
  font-weight:800;
  text-align:center;
}
.master-control-card .auto-switch{
  padding:8px 11px;
  border:1px solid #cbd5e1;
  border-radius:999px;
  background:#fff;
}
.repeat-status{
  background:#eff6ff!important;
  border-color:#bfdbfe!important;
  color:#1e3a8a;
}
.master-setup-area{
  position:relative;
}
.setup-card{
  position:relative;
  padding:20px!important;
  overflow:hidden;
}
.setup-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:#cbd5e1;
}
.step-kicker{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 9px;
  margin-bottom:8px;
  border-radius:999px;
  background:#e2e8f0;
  color:#334155;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
}
.setup-card:nth-of-type(1) .step-kicker{background:#dbeafe;color:#1e40af}
.copybox{
  padding:7px;
  border:1px solid #dbe3ec;
  border-radius:12px;
  background:#f8fafc;
}
.copybox input{
  border:0;
  background:transparent;
  font-weight:700;
}
.master-page input:focus,.master-page select:focus,.master-page textarea:focus{
  outline:none;
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(59,130,246,.12);
}
.mask-card .paper-stage{
  border:1px solid #cbd5e1;
  box-shadow:inset 0 1px 4px rgba(15,23,42,.08);
}
.master-sidebar{
  position:sticky;
  top:92px;
  align-self:start;
  max-height:calc(100vh - 110px);
  overflow:auto;
  padding-right:2px;
}
.sidebar-card h3{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.leaderboard-card h3::before{
  content:"";
  width:10px;height:10px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.12);
}
.answers-card h3::before{
  content:"";
  width:10px;height:10px;border-radius:50%;background:#3b82f6;
  box-shadow:0 0 0 4px rgba(59,130,246,.12);
}
.master-page .leader-row{
  padding:10px 0;
}
.master-page .leader-row:first-child{
  font-size:1.04em;
  font-weight:800;
}
.answer-box{
  background:#f8fafc;
  border-color:#e2e8f0;
}
.floating-mask-tools{
  left:18px;
  bottom:18px;
  background:rgba(255,255,255,.94);
  border:1px solid #dbe3ec;
  border-radius:14px;
  padding:8px;
  box-shadow:0 12px 34px rgba(15,23,42,.16);
  backdrop-filter:blur(8px);
}
.floating-mask-tools .btn{
  box-shadow:none!important;
  border:1px solid #e2e8f0;
}
.master-page.is-live .master-topbar{
  background:rgba(9,25,47,.98);
}
.master-page.is-live .master-grid{
  grid-template-columns:minmax(0,1fr) 380px;
}
.master-page.is-live .floating-mask-tools{display:none!important}
.master-page.is-live .master-control-card{
  position:sticky;
  top:82px;
  z-index:8;
}
.master-page.is-finished .master-control-card{
  border-left-color:#7c3aed!important;
  background:linear-gradient(180deg,#fff,#faf5ff)!important;
}
@media(max-width:1050px){
  .master-grid,.master-page.is-live .master-grid{grid-template-columns:1fr}
  .master-sidebar{position:static;max-height:none;overflow:visible}
}
@media(max-width:720px){
  .master-top-actions{width:100%}
  .master-top-actions .btn{flex:1 1 120px}
  .master-stats{grid-template-columns:1fr 1fr}
  .master-stats .stat-card:last-child{grid-column:1/-1}
  .master-page .container{padding:12px}
  .setup-card{padding:15px!important}
}
@media(max-width:480px){
  .master-stats{grid-template-columns:1fr}
  .master-stats .stat-card:last-child{grid-column:auto}
}


/* Quiz Master accounts / public saved quiz directory */
.home-grid{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:18px;align-items:start}
.auth-card label,.registration-card label{font-weight:800;font-size:13px}
.password-input-wrap{position:relative}
.password-input-wrap #loginPassword{padding-right:54px}
.password-visibility-toggle{position:absolute;top:50%;right:4px;transform:translateY(-50%);width:40px;height:38px;display:grid;place-items:center;border:0;border-radius:7px;background:transparent;color:#475569;cursor:pointer;touch-action:manipulation}
.password-visibility-toggle:hover{background:#f1f5f9;color:#111827}
.password-visibility-toggle:focus-visible{outline:2px solid #2563eb;outline-offset:1px}
.password-visibility-toggle svg{display:block;width:22px;height:22px}
.password-visibility-toggle[aria-pressed="true"]::after{content:"";position:absolute;width:27px;height:2px;border-radius:2px;background:currentColor;transform:rotate(-43deg);box-shadow:0 0 0 1px white}
.auth-page-container{max-width:560px;padding-top:42px}
.registration-card{padding:24px}
.modal-backdrop{position:fixed;inset:0;z-index:120;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(4px)}
.modal-card{width:min(440px,100%);background:#fff;border-radius:16px;padding:20px;box-shadow:0 24px 70px rgba(15,23,42,.3)}
.error-text{min-height:20px;margin-top:8px;color:#b91c1c;font-weight:700;font-size:13px}
.saved-quiz-actions .danger{background:#fee2e2;color:#991b1b}
.saved-quiz-actions .danger:hover{background:#fecaca}
@media(max-width:900px){.home-grid{grid-template-columns:1fr}}


/* Refined Quiz Master controls */
.master-top-actions{
  display:flex!important;
  flex-direction:row!important;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  overflow-x:auto;
  max-width:100%;
}
.master-top-actions .btn{
  flex:0 0 auto!important;
  white-space:nowrap;
}
.master-grid{
  grid-template-columns:minmax(0,1fr) 360px!important;
  align-items:start;
}
.master-sidebar{
  grid-column:2;
  position:sticky!important;
  top:88px;
  align-self:start;
  max-height:calc(100vh - 105px);
  overflow:auto;
}
.master-page.is-live .master-grid{
  grid-template-columns:minmax(0,1fr) 380px!important;
}
@media(max-width:1050px){
  .master-grid,.master-page.is-live .master-grid{grid-template-columns:1fr!important}
  .master-sidebar{grid-column:1;position:static!important;max-height:none;overflow:visible}
}
@media(max-width:760px){
  .master-top-actions{width:100%;padding-bottom:2px}
}


/* Administration page */
.admin-container{max-width:1250px}
.admin-login-card{max-width:460px;margin:36px auto}
.admin-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.admin-heading .btn{flex:0}
.admin-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}
.admin-table-wrap{overflow:auto}
.admin-table{width:100%;border-collapse:collapse;min-width:720px}
.admin-table th,.admin-table td{padding:11px 10px;text-align:left;border-bottom:1px solid #e5e7eb;vertical-align:middle}
.admin-table th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#64748b;background:#f8fafc}
.admin-table tr:hover td{background:#fafafa}
.admin-table .btn{white-space:nowrap}
.admin-table a{font-weight:700}
@media(max-width:650px){.admin-stats{grid-template-columns:1fr}}


/* Quiz topper celebration */
.topper-banner{
  position:fixed;
  inset:0;
  z-index:150;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
}
.topper-banner.show{opacity:1}
.topper-banner-card{
  width:min(620px,94vw);
  padding:28px 24px 30px;
  text-align:center;
  border-radius:24px;
  background:#fff;
  box-shadow:0 30px 90px rgba(15,23,42,.35);
  transform:translateY(18px) scale(.94);
  transition:transform .32s cubic-bezier(.2,.8,.2,1);
  border:3px solid #f59e0b;
}
.topper-banner.show .topper-banner-card{transform:translateY(0) scale(1)}
.topper-crown{
  width:68px;height:68px;margin:0 auto 10px;
  display:grid;place-items:center;
  border-radius:50%;
  font-size:40px;
  background:#fef3c7;
  color:#b45309;
}
.topper-label{
  font-size:15px;
  font-weight:900;
  letter-spacing:.16em;
  color:#92400e;
}
.topper-name{
  margin-top:8px;
  font-size:clamp(30px,5vw,54px);
  line-height:1.05;
  font-weight:1000;
  letter-spacing:-.03em;
  color:#111827;
}
.topper-score{
  margin-top:12px;
  font-size:20px;
  font-weight:800;
  color:#475569;
}
@media(prefers-reduced-motion:reduce){
  .topper-banner,.topper-banner-card{transition:none}
}

/* Large files are compressed client-side before upload when over 7 MB. */


/* Unread chat red badge */
.chat-toggle.has-unread-chat::after{
  content:attr(data-unread);
  position:absolute;
  top:-8px;
  right:-8px;
  min-width:22px;
  height:22px;
  padding:0 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#dc2626;
  color:#fff;
  font-size:11px;
  font-weight:900;
  line-height:1;
  border:2px solid #fff;
  box-shadow:0 4px 10px rgba(220,38,38,.35);
}
.chat-toggle.has-unread-chat{
  box-shadow:0 0 0 3px rgba(220,38,38,.14);
}

.answer-key-head,.answer-key-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.answer-key-head .btn,.answer-key-actions .btn{flex:0 0 auto}
#answerKeyInput[readonly]{
  background:#f1f5f9;
  cursor:not-allowed;
}
#answerKeyInput.editing{
  background:#fff;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.answer-key-actions{margin-top:8px}

/* Reusable Question Paper Library */
.paper-source-actions{align-items:center;gap:8px;flex-wrap:wrap}
.paper-upload-label{cursor:pointer;flex:0 0 auto}
.paper-library-panel{margin-top:12px;padding:12px;border:1px solid #dbe3ec;border-radius:14px;background:#f8fafc}
.paper-library-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.paper-library-list{display:grid;gap:8px}
.paper-library-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px;border:1px solid #e2e8f0;border-radius:11px;background:#fff}
.paper-library-info{min-width:0}
.paper-library-info b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paper-library-buttons{display:flex;gap:7px;flex:0 0 auto}
@media(max-width:700px){.paper-library-row{align-items:flex-start;flex-direction:column}.paper-library-buttons{width:100%;flex-wrap:wrap}}


/* HARD FIX: dedicated scroll viewport for Mask Questions */
.mask-scroll-viewport{
  height:68vh !important;
  min-height:420px;
  max-height:68vh !important;
  overflow-y:scroll !important;
  overflow-x:auto !important;
  position:relative !important;
  display:block !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable both-edges;
  border:1px solid #cbd5e1;
  border-radius:12px;
  background:#eef2f7;
}
.mask-scroll-viewport > .paper-stage{
  height:auto !important;
  min-height:100% !important;
  max-height:none !important;
  overflow:visible !important;
  position:relative !important;
  display:block !important;
  padding:12px;
}
.mask-scroll-viewport .page-wrap{
  position:relative !important;
  display:block !important;
  width:max-content;
  max-width:none;
  margin:0 auto 16px auto !important;
}
.mask-scroll-viewport canvas,
.mask-scroll-viewport img{
  display:block !important;
}
@media(max-width:900px){
  .mask-scroll-viewport{
    height:62vh !important;
    max-height:62vh !important;
    min-height:360px;
  }
}

/* Requested Quiz Master simplification */
.mask{
  border-color:#dc2626 !important;
  background:rgba(220,38,38,.10) !important;
}
.mask::after{
  background:#dc2626 !important;
  color:#fff !important;
}
.master-grid,
.master-page.is-live .master-grid{
  grid-template-columns:minmax(0,1fr) !important;
}
.master-identity-line{
  color:#cbd5e1;
  font-size:13px;
  margin-top:3px;
}
#quizTitleHeader{
  color:#fff;
  font-size:15px;
}
.paper-note-row{
  display:grid;
  grid-template-columns:minmax(160px,1fr) auto auto;
  gap:6px;
  align-items:center;
  margin-top:8px;
}
.paper-note-row .paperNoteInput{
  padding:7px 9px;
  font-size:12px;
}
.paper-note-row .btn{
  padding:7px 9px;
  font-size:12px;
  white-space:nowrap;
}
.paper-note-row .paperNoteStatus{
  font-size:11px;
  min-width:36px;
}
@media(max-width:700px){
  .paper-note-row{grid-template-columns:1fr auto}
  .paper-note-row .paperNoteStatus{grid-column:1/-1}
}



.click-mask-panel{
  display:grid;
  gap:8px;
  min-width:min(100%,560px);
}
.click-mask-size-fields{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:end;
}
.click-mask-size-fields label{
  display:grid;
  gap:4px;
  font-size:12px;
  font-weight:800;
  color:#475569;
}
.click-mask-size-fields input{
  width:120px;
  padding:7px 9px;
}
.click-mask-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.click-mask-help{
  font-size:11px;
  line-height:1.35;
}
.mask.pending-mask{
  border:3px solid #dc2626 !important;
  background:rgba(220,38,38,.08) !important;
  cursor:default;
  z-index:30;
}
.mask.pending-mask::after{
  background:#dc2626 !important;
  color:#fff !important;
}
.mask-resize-handle{
  position:absolute;
  width:18px;
  height:18px;
  right:-8px;
  bottom:-8px;
  border-radius:4px;
  background:#dc2626;
  border:2px solid #fff;
  box-shadow:0 1px 5px rgba(0,0,0,.28);
  cursor:nwse-resize;
  z-index:35;
}

.floating-mask-tools #confirmPendingMaskBtn{
  background:#dc2626;
  color:#fff;
  border-color:#dc2626;
  font-weight:900;
}
.floating-mask-tools #confirmPendingMaskBtn:disabled{
  opacity:.5;
}

.saved-dashboard-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
#startStopAllSavedBtn{white-space:nowrap}
@media(max-width:650px){
  .saved-dashboard-actions{width:100%;justify-content:stretch}
  .saved-dashboard-actions .btn{flex:1 1 auto}
}

.start-all-settings{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  padding:6px 8px;
  border:1px solid #dbe3ec;
  border-radius:10px;
  background:#f8fafc;
}
.start-all-settings label{
  display:flex;
  gap:6px;
  align-items:center;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.start-all-settings input[type="number"]{
  width:76px;
  padding:6px 7px;
}
.start-all-settings input[type="checkbox"]{
  width:auto;
}
@media(max-width:650px){
  .start-all-settings{width:100%}
}


/* =========================================================
   Pleasant attendance-style visual refresh
   UI only — quiz logic remains unchanged
   ========================================================= */
:root{
  --ui-navy:#0f2740;
  --ui-navy-2:#173b5f;
  --ui-teal:#0f766e;
  --ui-teal-2:#0d9488;
  --ui-green:#16a34a;
  --ui-green-soft:#dcfce7;
  --ui-blue:#2563eb;
  --ui-red:#dc2626;
  --ui-bg:#eef6f7;
  --ui-panel:#ffffff;
  --ui-panel-soft:#f7fbfb;
  --ui-line:#d8e7e9;
  --ui-text:#163047;
  --ui-muted:#64748b;
  --ui-shadow:0 10px 30px rgba(15,39,64,.08);
  --ui-shadow-hover:0 14px 34px rgba(15,39,64,.13);
}

html{background:var(--ui-bg)}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 10% 0%,rgba(13,148,136,.08),transparent 28rem),
    radial-gradient(circle at 100% 10%,rgba(37,99,235,.06),transparent 30rem),
    var(--ui-bg);
  color:var(--ui-text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.topbar{
  position:sticky;
  top:0;
  z-index:70;
  padding:13px 22px;
  background:linear-gradient(125deg,var(--ui-navy),var(--ui-navy-2));
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 24px rgba(15,39,64,.18);
}
.brand{
  letter-spacing:.055em;
  font-size:19px;
  font-weight:900;
}
.master-identity-line{
  color:#cce2ec!important;
}
#quizTitleHeader{color:#fff!important}

.container{
  padding:24px;
}

.card{
  background:rgba(255,255,255,.96);
  border:1px solid var(--ui-line);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--ui-shadow);
  transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;
}
.card:hover{
  border-color:#c4dcdf;
  box-shadow:var(--ui-shadow-hover);
}

h1,h2,h3{
  color:var(--ui-navy);
  letter-spacing:-.015em;
}
h1{font-size:clamp(25px,3vw,34px)}
h2{font-size:clamp(19px,2vw,24px)}
h3{font-size:17px}
.muted{color:var(--ui-muted)}

label{
  color:#38556d;
  font-weight:700;
  font-size:13px;
}
input,select,textarea{
  color:var(--ui-text);
  background:#fff;
  border:1px solid #c8dadd;
  border-radius:11px;
  min-height:42px;
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--ui-teal-2);
  box-shadow:0 0 0 3px rgba(13,148,136,.13);
}
input[readonly]{
  background:#f2f7f8;
  color:#486278;
}

.btn{
  border:1px solid #d2e1e3;
  border-radius:11px;
  padding:9px 14px;
  background:#f8fbfb;
  color:#29465d;
  font-weight:800;
  box-shadow:0 2px 6px rgba(15,39,64,.04);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease;
}
.btn:hover:not(:disabled){
  transform:translateY(-1px);
  background:#eef7f7;
  border-color:#bfd8da;
  box-shadow:0 5px 14px rgba(15,39,64,.09);
}
.btn:active:not(:disabled){transform:translateY(0)}
.btn.primary{
  background:linear-gradient(135deg,var(--ui-teal),var(--ui-teal-2));
  border-color:transparent;
  color:#fff;
}
.btn.primary:hover:not(:disabled){
  background:linear-gradient(135deg,#0b655e,#0b8278);
}
.btn.success{
  background:linear-gradient(135deg,#15803d,var(--ui-green));
  border-color:transparent;
  color:#fff;
}
.btn.danger{
  background:#fff1f2;
  color:#b42318;
  border-color:#fecdd3;
}
.btn.danger:hover:not(:disabled){background:#ffe4e6}

.topbar .btn{
  background:rgba(255,255,255,.10);
  color:#fff;
  border-color:rgba(255,255,255,.16);
  box-shadow:none;
}
.topbar .btn:hover:not(:disabled){
  background:rgba(255,255,255,.17);
  border-color:rgba(255,255,255,.26);
}
.topbar .btn.primary{
  background:linear-gradient(135deg,#15a394,#14b8a6);
}
.topbar .btn.success{
  background:linear-gradient(135deg,#22c55e,#16a34a);
}

.pill{
  background:#e7f7f5;
  color:#0f6c65;
  border:1px solid #c6ebe7;
  border-radius:999px;
}

.home-container{
  max-width:1480px;
}
.home-grid{
  gap:22px!important;
}
.auth-card{
  border-top:4px solid var(--ui-teal);
}
#createCard{
  border-top:4px solid var(--ui-blue);
}
.saved-quizzes-card{
  border-top:4px solid #14b8a6;
}
.saved-quizzes-head{
  padding-bottom:12px;
  border-bottom:1px solid #e4eeee;
  margin-bottom:12px;
}
.saved-quiz-row{
  background:#fbfefe!important;
  border:1px solid #dbeaec!important;
  border-radius:14px!important;
  padding:14px!important;
  margin-bottom:10px;
  box-shadow:0 3px 10px rgba(15,39,64,.04);
}
.saved-quiz-row:hover{
  border-color:#bcdcdf!important;
  box-shadow:0 8px 18px rgba(15,39,64,.08);
}
.saved-quiz-title{
  color:var(--ui-navy)!important;
  font-size:16px!important;
  font-weight:900!important;
}
.saved-dashboard-actions{
  background:#f4fafa;
  padding:7px;
  border-radius:13px;
  border:1px solid #dcebed;
}
.start-all-settings{
  border-color:#cde5e4!important;
  background:#f3fbfa!important;
}

.master-container{
  max-width:1580px;
}
.master-grid{
  gap:20px;
}
.master-stats{
  gap:12px!important;
}
.stat-card{
  min-height:102px;
  border:1px solid #d8e8e9!important;
  border-radius:17px!important;
  background:linear-gradient(145deg,#ffffff,#f3fafa)!important;
  box-shadow:0 8px 22px rgba(15,39,64,.06)!important;
  position:relative;
  overflow:hidden;
}
.stat-card::before{
  content:"";
  position:absolute;
  width:6px;
  top:0;
  bottom:0;
  left:0;
  background:var(--ui-teal-2);
}
.stat-card:nth-child(2)::before{background:var(--ui-blue)}
.stat-card:nth-child(3)::before{background:#f59e0b}
.stat-card span{
  color:#64798b!important;
  font-weight:800;
}
.stat-card b{
  color:var(--ui-navy)!important;
  font-size:30px!important;
}

.master-control-card{
  border-left:5px solid var(--ui-teal);
}
.auto-mode-card{
  background:linear-gradient(145deg,#fff,#f5fbfb)!important;
}
.auto-switch{
  background:#e9f7f5!important;
  color:#0e6b64!important;
  border:1px solid #c7e9e5;
  border-radius:999px!important;
  padding:9px 13px!important;
}

.setup-card{
  border-left:4px solid #cbe4e5;
}
.step-kicker{
  color:var(--ui-teal)!important;
  background:#e8f7f5!important;
  border:1px solid #c8e9e5!important;
  border-radius:999px!important;
  padding:5px 9px!important;
  width:max-content;
  font-weight:900!important;
  letter-spacing:.07em!important;
}

.paper-source-actions,.paper-library-buttons,.answer-key-actions,.click-mask-actions{
  gap:8px!important;
}
.paper-library-panel{
  background:#f5fafb!important;
  border-color:#d7e7e9!important;
}
.paper-library-row{
  border-color:#dce9eb!important;
  border-radius:14px!important;
  box-shadow:0 3px 10px rgba(15,39,64,.035);
}
.paper-library-row:hover{
  border-color:#bddbde!important;
}

.mask-scroll-viewport{
  background:#ddecef!important;
  border:1px solid #bfd4d8!important;
  border-radius:16px!important;
  box-shadow:inset 0 2px 8px rgba(15,39,64,.05);
}
.paper-stage{
  background:#e3edef!important;
}

.mask{
  border-color:#ef4444!important;
  background:rgba(239,68,68,.08)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.8);
}
.mask::after{
  background:#ef4444!important;
  color:#fff!important;
  font-weight:900;
}
.mask-resize-handle{background:#ef4444!important}

.floating-mask-tools{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border:1px solid #d5e5e7;
  border-radius:14px;
  padding:7px;
  box-shadow:0 14px 34px rgba(15,39,64,.14);
}
.floating-mask-tools .btn{
  box-shadow:none!important;
}
.floating-mask-tools #confirmPendingMaskBtn{
  background:linear-gradient(135deg,#ef4444,#dc2626)!important;
}

.chat-toggle{
  background:linear-gradient(135deg,var(--ui-navy-2),var(--ui-teal))!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 12px 30px rgba(15,39,64,.22)!important;
}
.chat-panel{
  border:1px solid #d5e4e6!important;
  border-radius:17px!important;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(15,39,64,.18)!important;
}
.chat-head{
  background:linear-gradient(135deg,var(--ui-navy),var(--ui-navy-2))!important;
  color:#fff!important;
}

.answer-key-box{
  background:#f6fbfb!important;
  border:1px solid #d7e9e8!important;
  border-radius:14px!important;
  padding:14px!important;
}

.question-viewer{
  background:#f7fbfb!important;
  border-color:#d7e5e7!important;
  border-radius:17px!important;
}
.option-btn{
  border:1px solid #cfe0e2!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#25455d!important;
  box-shadow:0 4px 12px rgba(15,39,64,.05);
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;
}
.option-btn:hover:not(:disabled){
  transform:translateY(-1px);
  border-color:#78c7c0!important;
  box-shadow:0 8px 18px rgba(15,39,64,.09);
}
.option-btn.correct,
.option-btn.correct-answer{
  background:#dcfce7!important;
  border-color:#22c55e!important;
  color:#166534!important;
}

.countdown-badge{
  background:linear-gradient(135deg,#fff7ed,#ffedd5)!important;
  border:1px solid #fed7aa!important;
  color:#c2410c!important;
  border-radius:999px!important;
  box-shadow:none!important;
}
.repeat-status{
  border:1px solid #bae6fd!important;
  background:#eff8ff!important;
  color:#075985!important;
  border-radius:14px!important;
}

.leader-row{
  border-bottom:1px solid #e6eeee!important;
  padding:10px 4px!important;
}
.leader-row:first-child{
  background:#f0fdfa;
  border-radius:10px;
}
.rank,.score{color:var(--ui-navy)}

.result-popup{
  border-radius:16px!important;
  box-shadow:0 16px 36px rgba(15,39,64,.18)!important;
}
.topper-banner-card{
  border-radius:22px!important;
  box-shadow:0 24px 70px rgba(15,39,64,.28)!important;
}

.modal-backdrop{
  backdrop-filter:blur(7px);
  background:rgba(15,39,64,.55)!important;
}
.modal-card{
  border:1px solid #d9e8e9!important;
  border-radius:20px!important;
  box-shadow:0 24px 70px rgba(15,39,64,.26)!important;
}

.error-text{color:#b42318!important}

@media(max-width:900px){
  .container{padding:16px}
  .topbar{padding:12px 14px}
  .card{border-radius:15px;padding:15px}
  .master-stats{grid-template-columns:1fr 1fr!important}
  .master-stats .stat-card:last-child{grid-column:1/-1}
}
@media(max-width:600px){
  .container{padding:11px}
  .topbar{
    position:relative;
    padding:12px;
  }
  .brand{font-size:17px}
  .master-stats{grid-template-columns:1fr!important}
  .master-stats .stat-card:last-child{grid-column:auto}
  .card{padding:13px;border-radius:14px}
  .btn{padding:9px 11px}
  .option-grid{grid-template-columns:1fr!important}
  .floating-mask-tools{
    max-width:calc(100vw - 20px)!important;
    left:10px!important;
    bottom:10px!important;
  }
}


/* Restore persistent participant answer feedback after visual refresh.
   These rules intentionally come last so they override the general option theme. */
.option-btn.option-correct,
.option-btn.correct,
.option-btn.correct-answer,
.option-btn.option-correct:disabled{
  background:#dcfce7 !important;
  border:2px solid #16a34a !important;
  color:#14532d !important;
  opacity:1 !important;
  box-shadow:0 0 0 3px rgba(22,163,74,.12),0 7px 18px rgba(22,163,74,.12) !important;
}
.option-btn.option-wrong,
.option-btn.option-wrong:disabled{
  background:#fee2e2 !important;
  border:2px solid #dc2626 !important;
  color:#7f1d1d !important;
  opacity:1 !important;
  box-shadow:0 0 0 3px rgba(220,38,38,.10),0 7px 18px rgba(220,38,38,.10) !important;
}
.option-btn:disabled{
  cursor:not-allowed;
}


/* Expanded question: keep the live countdown visible as an overlay. */
#quizArea.question-expanded .question-meta-row{
  position:fixed !important;
  top:12px !important;
  left:12px !important;
  z-index:95 !important;
  margin:0 !important;
  width:auto !important;
  display:block !important;
  pointer-events:none;
}
#quizArea.question-expanded #participantCountdown:not(.hidden){
  display:block !important;
  min-width:58px;
  padding:7px 10px;
  font-size:19px;
  background:rgba(15,39,64,.92) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.28) !important;
  box-shadow:0 7px 20px rgba(15,39,64,.22) !important;
  backdrop-filter:blur(6px);
}
#quizArea.question-expanded #participantCountdown.urgent:not(.hidden){
  background:#b91c1c !important;
  color:#fff !important;
  border-color:#fecaca !important;
}

/* Compact mobile answer choices: retain the earlier two-column layout. */
@media(max-width:600px){
  #quizArea .option-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
    margin-top:7px !important;
  }
  #quizArea .option-btn{
    min-height:38px !important;
    padding:7px 6px !important;
    border-radius:10px !important;
    font-size:13px !important;
    line-height:1.15 !important;
  }
  #quizArea.question-expanded .question-meta-row{
    top:7px !important;
    left:7px !important;
  }
  #quizArea.question-expanded #participantCountdown:not(.hidden){
    min-width:50px;
    padding:6px 8px;
    font-size:16px;
  }
}


/* Robust participant expanded-question mode */
body.participant-question-expanded{
  overflow:hidden !important;
  background:#fff !important;
}
body.participant-question-expanded > .topbar{
  display:none !important;
}
body.participant-question-expanded .container{
  padding:0 !important;
  max-width:none !important;
  margin:0 !important;
}
#quizArea.question-expanded{
  position:fixed !important;
  inset:0 !important;
  z-index:200 !important;
  background:#fff !important;
}
#quizArea.question-expanded main>.card{
  position:absolute !important;
  inset:0 !important;
  z-index:201 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
  background:#fff !important;
}
#quizArea.question-expanded #question{
  position:relative !important;
  height:100vh !important;
  min-height:100vh !important;
  display:block !important;
}
#quizArea.question-expanded .question-viewer{
  position:absolute !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  min-height:100vh !important;
  max-height:none !important;
  padding:4px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:#fff !important;
  z-index:202 !important;
  overflow:hidden !important;
}
#quizArea.question-expanded .question-viewer .question-img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
}
#quizArea.question-expanded .question-viewer #prompt{
  max-width:calc(100vw - 20px) !important;
}

/* Timer must sit above the full-screen question viewer */
#quizArea.question-expanded .question-meta-row{
  display:block !important;
  position:fixed !important;
  top:10px !important;
  left:10px !important;
  z-index:230 !important;
  width:auto !important;
  margin:0 !important;
  pointer-events:none !important;
}
#quizArea.question-expanded #participantCountdown:not(.hidden){
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  z-index:231 !important;
  min-width:58px !important;
  padding:8px 11px !important;
  border-radius:999px !important;
  background:rgba(15,39,64,.94) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.45) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.22) !important;
  font-size:20px !important;
  font-weight:900 !important;
  line-height:1 !important;
}
#quizArea.question-expanded #participantCountdown.urgent:not(.hidden){
  background:#b91c1c !important;
}

/* Always show restore hint above the image */
#quizArea.question-expanded .question-zoom-hint{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:fixed !important;
  top:10px !important;
  right:10px !important;
  z-index:232 !important;
  padding:8px 12px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.95) !important;
  color:#17324a !important;
  border:1px solid #cadcdf !important;
  box-shadow:0 8px 20px rgba(15,39,64,.16) !important;
  font-size:12px !important;
  font-weight:900 !important;
  pointer-events:none !important;
}

/* Hide everything else in expanded view */
#quizArea.question-expanded aside,
#quizArea.question-expanded #options,
#quizArea.question-expanded #resultMsg,
#quizArea.question-expanded #qCounter,
#quizArea.question-expanded #waiting,
#quizArea.question-expanded #finished,
#quizArea.question-expanded main>.card>.row{
  display:none !important;
}

@media(max-width:600px){
  #quizArea.question-expanded #participantCountdown:not(.hidden){
    min-width:50px !important;
    padding:7px 9px !important;
    font-size:17px !important;
  }
  #quizArea.question-expanded .question-zoom-hint{
    top:8px !important;
    right:8px !important;
    padding:7px 9px !important;
    font-size:11px !important;
  }
}


.saved-quiz-actions .stopSavedBtn{
  background:#fff7ed;
  color:#c2410c;
  border-color:#fed7aa;
}
.saved-quiz-actions .stopSavedBtn:hover:not(:disabled){
  background:#ffedd5;
}

.start-all-settings.bulk-running{
  opacity:.55;
}
#startStopAllSavedBtn.danger{
  background:#fff1f2;
  color:#b42318;
  border-color:#fecdd3;
}
#startStopAllSavedBtn.danger:hover:not(:disabled){
  background:#ffe4e6;
}


/* Pending mask can be repositioned by dragging its body. */
.mask.pending-mask{
  cursor:move !important;
  touch-action:none;
}
.mask.pending-mask.mask-moving{
  cursor:grabbing !important;
  box-shadow:0 0 0 3px rgba(220,38,38,.16),0 10px 24px rgba(15,39,64,.16) !important;
}
.mask.pending-mask .mask-resize-handle{
  cursor:nwse-resize !important;
}

.intro-study-card{
  border-left:4px solid #2563eb;
}
.intro-study-actions{
  align-items:center;
  justify-content:flex-start;
}
.intro-current{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid #cfe0e2;
  border-radius:12px;
  background:#f7fbfb;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.intro-study-join{
  margin-top:16px;
  padding:14px;
  border:1px solid #bfdbfe;
  border-radius:15px;
  background:linear-gradient(135deg,#eff6ff,#f0fdfa);
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
}
.intro-study-join p{margin:4px 0 0}
.intro-study-btn{
  background:linear-gradient(135deg,#2563eb,#0d9488)!important;
  color:#fff!important;
  border-color:transparent!important;
  white-space:nowrap;
}
@media(max-width:600px){
  .intro-study-join{
    align-items:stretch;
    flex-direction:column;
  }
  .intro-study-btn{
    width:100%;
    text-align:center;
  }
}

.quiz-subscribe-card{
 display: none !important;
  /* display:flex; */
  justify-content:space-between;
  align-items:center;
  gap:18px;
  background:linear-gradient(135deg,#f0fdfa,#eff6ff);
  border:1px solid #bfdbfe;
}
.quiz-subscribe-card h2,.quiz-subscribe-card p{margin-top:0}
.quiz-subscribe-card p{margin-bottom:0}
.quiz-subscribe-actions{
  min-width:250px;
  display:flex;
  flex-direction:column;
  gap:7px;
  align-items:stretch;
}
.quiz-subscribe-card.compact{margin-bottom:14px}
@media(max-width:700px){
  .quiz-subscribe-card{flex-direction:column;align-items:stretch}
  .quiz-subscribe-actions{min-width:0}
  #subscribeQuizBtn{width:100%}
}

.donation-card{
  max-width:490px;
  margin:22px auto;
  padding:24px;
  border:2px solid #ffad61;
  border-radius:22px;
  background:#fff4e5;
  text-align:center;
  box-sizing:border-box;
}
.donation-card h2{margin:0 0 16px;color:#9a3412;font-size:24px}
.donation-card>p{color:#555;font-size:17px;margin:0 18px 28px;line-height:1.35}
.donation-card input{
  display:block;width:100%;box-sizing:border-box;margin:0 0 12px;padding:16px 18px;
  border:1px solid #cbd5e1;border-radius:16px;background:#fff;font-size:18px;
}
.donation-card select{
  display:block;margin:14px auto 28px;padding:12px 18px;border:2px solid #168bd2;
  border-radius:14px;background:#fff;font-size:17px;
}
.donation-button{
  display:block;width:100%;border:0;border-radius:15px;padding:17px 20px;
  background:#2f66e8;color:#fff;font-weight:800;font-size:21px;cursor:pointer;
}
.donation-button:disabled{opacity:.65;cursor:wait}
.donation-msg{min-height:20px;margin-top:10px;font-size:14px}
.donation-msg.error{color:#b91c1c}

.donation-thanks-body{
  margin:0;min-height:100vh;display:grid;place-items:center;background:#fff;
  font-family:Arial,sans-serif;color:#555;
}
.donation-thanks-card{max-width:620px;padding:32px;text-align:center}
.donation-heart{font-size:86px;line-height:1.1;margin-bottom:12px}
.donation-thanks-card h1{font-size:32px;margin:8px 0 24px}
.donation-thanks-card h1.success{color:#16a34a}
.donation-thanks-card h1.pending{color:#b45309}
.donation-thanks-card p{font-size:20px;line-height:1.75;margin:16px 0}
.donation-continue{
  display:inline-block;margin-top:32px;padding:14px 36px;border-radius:13px;
  background:#18a957;color:#fff;text-decoration:none;font-size:17px;font-weight:800;
}
@media(max-width:600px){
  .donation-card{margin:16px 10px;padding:20px 16px}
  .donation-card h2{font-size:21px}
  .donation-card>p{margin-left:0;margin-right:0}
  .donation-thanks-card{padding:24px 18px}
  .donation-heart{font-size:70px}
}

.status-paid{color:#15803d}

.master-status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:.04em}
.master-status.active{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.master-status.blocked{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.blocked-master-row{background:#fff7f7}
.admin-action-cell{display:flex;gap:7px;flex-wrap:wrap}

.master-block-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-weight:800}
.master-block-toggle input{position:absolute;opacity:0;pointer-events:none}
.master-toggle-track{width:46px;height:25px;border-radius:999px;background:#22c55e;position:relative;display:inline-block;transition:.2s}
.master-toggle-knob{position:absolute;width:19px;height:19px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:.2s}
.master-block-toggle input:checked + .master-toggle-track{background:#ef4444}
.master-block-toggle input:checked + .master-toggle-track .master-toggle-knob{transform:translateX(21px)}
.master-block-toggle input:focus-visible + .master-toggle-track{outline:3px solid rgba(59,130,246,.28);outline-offset:2px}
.master-block-toggle input:disabled + .master-toggle-track{opacity:.55;cursor:wait}
.master-toggle-text{min-width:54px;font-size:12px}

.donor-list-card{
  margin:18px 0 0;padding:18px;border:1px solid #fed7aa;border-radius:18px;background:#fff;
}
.donor-list-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.donor-list-heading h2{margin:0 0 5px;color:#9a3412;font-size:20px}
.donor-list-heading p{margin:0;color:#64748b;font-size:14px}
.donor-total{white-space:nowrap;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800}
.donor-list{max-height:300px;overflow:auto;border-top:1px solid #f1f5f9}
.donor-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;padding:11px 4px;border-bottom:1px solid #f1f5f9}
.donor-rank{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#fff7ed;color:#9a3412;font-size:12px;font-weight:900}
.donor-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:#334155}
.donor-amount{font-weight:900;color:#15803d}
.donor-empty{text-align:center;padding:15px 0;margin:0}
@media(max-width:520px){
  .donor-list-heading{display:block}
  .donor-total{display:inline-block;margin-top:10px}
}

.admin-setting-row{display:flex;justify-content:space-between;gap:18px;align-items:center}
.admin-setting-row h2{margin-bottom:5px}
.registration-toggle input:not(:checked)+.master-toggle-track{background:#ef4444}
.registration-toggle input:checked+.master-toggle-track{background:#22c55e}
.registration-toggle input:not(:checked)+.master-toggle-track .master-toggle-knob{transform:translateX(0)}
.registration-toggle input:checked+.master-toggle-track .master-toggle-knob{transform:translateX(21px)}
@media(max-width:650px){.admin-setting-row{align-items:flex-start;flex-direction:column}}

.join-action-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.join-enter-hint{font-size:12px;font-weight:600}
.other-quizzes-panel{margin-top:14px;padding:14px;border:1px solid #cbd5e1;border-radius:14px;background:#f8fafc}
.other-quizzes-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}
.other-quizzes-head p{margin:4px 0 0}
.other-quizzes-list{display:flex;flex-direction:column;gap:8px;max-height:330px;overflow:auto}
.other-quiz-link{display:flex;justify-content:space-between;align-items:center;gap:12px;text-decoration:none;color:inherit;padding:12px;border:1px solid #dbe4ee;border-radius:12px;background:#fff;transition:.15s}
.other-quiz-link:hover{border-color:#60a5fa;box-shadow:0 3px 12px rgba(15,23,42,.08);transform:translateY(-1px)}
.other-quiz-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.other-quiz-main b{color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.other-quiz-main small{color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.other-quiz-open{flex:0 0 auto;background:#2563eb;color:#fff;padding:6px 10px;border-radius:9px;font-size:12px;font-weight:800}
.other-quizzes-empty{text-align:center;padding:14px 0;margin:0}
@media(max-width:560px){.join-action-row .btn{flex:1}.other-quizzes-head{align-items:stretch}.other-quiz-link{align-items:flex-start}.other-quiz-main small{white-space:normal}.other-quiz-open{margin-top:2px}}


/* Saved Quiz actions: horizontal on Quiz Master dashboard */
.saved-quiz-row{
  grid-template-columns:1fr !important;
}
.saved-quiz-actions{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:center;
  gap:8px !important;
  min-width:0 !important;
  width:100%;
}
.saved-quiz-actions .btn{
  flex:1 1 150px;
  width:auto !important;
  min-width:130px;
  margin:0 !important;
  white-space:nowrap;
  text-align:center;
}
@media(min-width:1000px){
  .saved-quiz-actions{
    flex-wrap:nowrap !important;
  }
  .saved-quiz-actions .btn{
    flex:1 1 0;
    min-width:0;
  }
}
@media(max-width:520px){
  .saved-quiz-actions .btn{
    flex:1 1 calc(50% - 8px);
    min-width:125px;
  }
}

.save-quiz-wait-overlay{position:fixed;inset:0;z-index:10050;background:rgba(15,23,42,.58);display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px)}
.save-quiz-wait-overlay.hidden{display:none!important}
.save-quiz-wait-box{width:min(390px,92vw);background:#fff;border-radius:20px;padding:28px 24px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.28)}
.save-quiz-wait-box h3{margin:12px 0 7px;font-size:23px}
.save-quiz-wait-box p{margin:0;color:#64748b;line-height:1.5}
.save-quiz-spinner{width:42px;height:42px;margin:0 auto;border:4px solid #e2e8f0;border-top-color:#15988d;border-radius:50%;animation:saveQuizSpin .8s linear infinite}
@keyframes saveQuizSpin{to{transform:rotate(360deg)}}

.join-message.join-error{
  color:#dc2626 !important;
  background:#fef2f2;
  border:1px solid #fecaca;
  border-radius:10px;
  padding:9px 11px;
  font-weight:700;
}


/* Join errors: intentionally placed above Join Quiz button */
#joinCard #joinMsg.join-message{
  display:none;
  margin:0 0 10px 0;
  padding:0;
  color:#d00000 !important;
  background:transparent !important;
  border:0 !important;
  font-weight:800 !important;
  line-height:1.4;
}
#joinCard #joinMsg.join-message.join-error{
  display:block !important;
  color:#d00000 !important;
  -webkit-text-fill-color:#d00000 !important;
}

#joinMsg.join-error{
  display:block !important;
  color:#d00000 !important;
  -webkit-text-fill-color:#d00000 !important;
  font-weight:800 !important;
}

/* Join page: room code remains available internally but is not shown to participants. */
.join-room-code-hidden{display:none !important;}
#joinCard .join-details-row{grid-template-columns:1fr !important;}
#joinQuizTitle{margin-top:0;}


/* Participant quiz header: compact donation appeal instead of repeating quiz title */
.participant-quiz-head{
  align-items:center;
  gap:12px;
}
.participant-donation-line{
  flex:1 1 260px;
  font-size:13px;
  line-height:1.35;
  font-weight:700;
  color:#475569;
}
@media(max-width:650px){
  .participant-donation-line{
    font-size:12px;
  }
}
/********* in last added later */
/* FINAL: responsive question height */
#quizArea:not(.question-expanded) .question-viewer{
  min-height:0 !important;
  height:auto !important;
  justify-content:flex-start;
}

#quizArea:not(.question-expanded) .question-viewer .question-img{
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:65vh !important;
  object-fit:contain;
  margin:0 auto;
}

@media(max-width:900px){
  #quizArea:not(.question-expanded) .question-viewer{
    min-height:0 !important;
  }

  #quizArea:not(.question-expanded) .question-viewer .question-img{
    max-height:60vh !important;
  }
}

/* Keep "Click question to enlarge" outside the question image */
#quizArea:not(.question-expanded) .question-zoom-hint{
  position:static !important;
  align-self:flex-end;
  margin:0 0 6px 0;
  font-size:11px;
  font-weight:800;
  color:#475569;
  background:#f8fafc;
  border:1px solid #d1d5db;
  border-radius:999px;
  padding:4px 8px;
}
/* Independent participant question navigation */
.participant-next-row{display:flex;justify-content:flex-end;margin-top:10px}.participant-next-row .btn{flex:0 0 auto;min-width:140px}
@media(max-width:650px){.participant-next-row .btn{width:100%}}


/* Participant: copy current question image with permanent visible tag */
.participant-question-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
}
.copy-question-btn{
  flex:0 0 auto!important;
  white-space:nowrap;
  padding:7px 10px;
  font-size:12px;
}
.copy-question-msg{
  min-height:18px;
  margin:2px 0 5px;
  text-align:right;
  font-size:12px;
  font-weight:800;
  color:#475569;
}
.copy-question-msg.success{color:#15803d}
.copy-question-msg.error{color:#b91c1c}
@media(max-width:600px){
  .question-meta-row{align-items:flex-start}
  .participant-question-actions{gap:6px}
  .copy-question-btn{padding:6px 8px;font-size:11px}
  .copy-question-msg{text-align:left}
}
/* FINAL: keep participant Copy / Share controls inside the screen */
.question-meta-row{
  min-width:0;
  flex-wrap:wrap;
}

.participant-question-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:6px;
  min-width:0;
  max-width:100%;
}

.participant-question-actions .btn,
.participant-question-actions .copy-question-btn,
.participant-question-actions .share-question-btn{
  flex:0 1 auto !important;
  min-width:0;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:center;
}

@media(max-width:650px){
  .question-meta-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px;
    align-items:center;
  }

  .participant-question-actions{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    gap:7px;
  }

  .participant-question-actions .btn,
  .participant-question-actions .copy-question-btn,
  .participant-question-actions .share-question-btn{
    width:100%;
    min-width:0;
    padding:8px 6px;
    font-size:11px;
    line-height:1.2;
  }

  .countdown-badge{
    min-width:58px;
    max-width:100%;
  }
}

@media(max-width:360px){
  .participant-question-actions{
    grid-template-columns:1fr;
  }
}

/* FINAL: Copy + Share + countdown stay on one compact line */
.question-meta-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between;
  flex-wrap:nowrap !important;
  gap:6px;
  min-width:0;
}

.participant-question-actions{
  display:flex !important;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap !important;
  gap:4px;
  min-width:0;
  max-width:100%;
  margin-left:auto;
}

.participant-question-actions .copy-question-btn,
.participant-question-actions .share-question-btn{
  flex:0 1 auto !important;
  width:auto !important;
  min-width:0;
  padding:6px 8px;
  font-size:11px;
  line-height:1.15;
  white-space:nowrap;
}

.participant-question-actions .countdown-badge,
.question-meta-row .countdown-badge{
  flex:0 0 auto !important;
  min-width:52px;
  padding:6px 8px;
  font-size:16px;
  white-space:nowrap;
}

@media(max-width:650px){
  .question-meta-row{
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap !important;
    gap:4px;
  }

  .participant-question-actions{
    grid-column:auto !important;
    display:flex !important;
    width:auto !important;
    flex:0 1 auto;
    flex-wrap:nowrap !important;
    gap:3px;
  }

  .participant-question-actions .copy-question-btn,
  .participant-question-actions .share-question-btn{
    width:auto !important;
    padding:6px 5px;
    font-size:10px;
  }

  .participant-question-actions .countdown-badge,
  .question-meta-row .countdown-badge{
    min-width:48px;
    padding:6px 6px;
    font-size:15px;
  }
}

@media(max-width:380px){
  .participant-question-actions .copy-question-btn,
  .participant-question-actions .share-question-btn{
    padding:5px 4px;
    font-size:9px;
  }

  .participant-question-actions .countdown-badge,
  .question-meta-row .countdown-badge{
    min-width:44px;
    padding:5px 4px;
    font-size:14px;
  }
}

/* Early-finisher rejoin controls */
.early-finish-rejoin{margin:12px 0;padding:12px;border:1px solid #dbe3ee;border-radius:12px;text-align:center}
.early-finish-rejoin #mainQuizTimeLeft{margin-bottom:8px;font-weight:700}
.early-finish-rejoin .btn{min-width:150px}

/* Expanded question: hide Copy/Share controls, keep only countdown visible */
#quizArea.question-expanded .participant-question-actions .copy-question-btn,
#quizArea.question-expanded .participant-question-actions .share-question-btn{
  display:none !important;
}

/* Admin dashboard: keep long Donation Payments and All Quizzes lists compact and scrollable. */
#donationList.admin-table-wrap,
#quizList.admin-table-wrap{
  max-height:420px;
  overflow-y:auto;
  overflow-x:auto;
  overscroll-behavior:contain;
}

/* Keep table headings visible while scrolling long admin lists. */
#donationList table thead th,
#quizList table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#fff;
}

/* Participant donor acknowledgement: gentle pulse, never blocks quiz controls. */
.participant-donor-ticker{
  flex:1 1 100%;
  margin:4px 0 2px;
  padding:7px 12px;
  border:1px solid #fed7aa;
  border-radius:999px;
  background:#fff7ed;
  color:#9a3412;
  font-size:12px;
  font-weight:800;
  text-align:center;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.participant-donor-ticker.donor-ticker-pulse{
  animation:donorTickerPulse 1.25s ease-out 1;
}
@keyframes donorTickerPulse{
  0%{opacity:.45;transform:scale(.985)}
  45%{opacity:1;transform:scale(1.012)}
  100%{opacity:1;transform:scale(1)}
}

/* Top 10 supporters get a premium acknowledgement while keeping the quiz unobtrusive. */
.participant-donor-ticker.top-supporter{
  border-color:#fbbf24;
  background:linear-gradient(90deg,#fffbeb,#fef3c7,#fffbeb);
  color:#92400e;
  box-shadow:0 0 0 1px rgba(245,158,11,.10),0 3px 12px rgba(245,158,11,.16);
  font-weight:900;
}
.participant-donor-ticker.top-supporter-1{
  border-color:#f59e0b;
  box-shadow:0 0 0 1px rgba(245,158,11,.18),0 4px 16px rgba(245,158,11,.24);
}
.participant-donor-ticker.top-supporter-2{
  border-color:#cbd5e1;
  background:linear-gradient(90deg,#f8fafc,#e2e8f0,#f8fafc);
  color:#475569;
}
.participant-donor-ticker.top-supporter-3{
  border-color:#d97706;
  background:linear-gradient(90deg,#fff7ed,#fed7aa,#fff7ed);
  color:#9a3412;
}

@media(max-width:520px){
  .participant-donor-ticker{font-size:11px;padding:6px 9px}
}
@media(prefers-reduced-motion:reduce){
  .participant-donor-ticker.donor-ticker-pulse{animation:none}
}

/* FIX: donor ticker must never widen or disturb the participant quiz layout. */
.participant-quiz-head{
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
.participant-donation-line{
  min-width:0;
  max-width:100%;
}
.participant-donor-ticker{
  flex:1 1 100% !important;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  display:block;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.participant-quiz-head .pill{
  min-width:0;
  max-width:100%;
}
@media(max-width:520px){
  .participant-donor-ticker{
    width:100%;
    max-width:100%;
    padding-left:8px;
    padding-right:8px;
  }
}

/* WRAP FIX: long supporter names stay inside the quiz area instead of widening it. */
.participant-donor-ticker{
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  text-overflow:clip !important;
  overflow:hidden !important;
  height:auto !important;
  min-height:0;
  max-width:100% !important;
  line-height:1.3;
}
/* Do not scale the ticker during name changes; scaling can briefly cross the viewport edge. */
@keyframes donorTickerPulse{
  0%{opacity:.45}
  45%{opacity:1}
  100%{opacity:1}
}

/* STABLE TWO-LINE DONOR TICKER: reserve the same space for short and long names. */
.participant-donor-ticker{
  height:46px !important;
  min-height:46px !important;
  max-height:46px !important;
  box-sizing:border-box !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  overflow:hidden !important;
  line-height:1.3 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
@media(max-width:520px){
  .participant-donor-ticker{
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
  }
}

/* Participant Back / Pause / Next controls */
.participant-nav-row{display:flex!important;justify-content:flex-end!important;align-items:center;gap:8px;flex-wrap:wrap}
.participant-nav-row .btn{width:auto!important;min-width:120px;flex:0 0 auto}
@media(max-width:650px){.participant-nav-row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.participant-nav-row .btn{width:100%!important;min-width:0!important;padding:9px 5px;font-size:12px}}


/* Finished quiz: participant answer review */
.answer-review{margin-top:16px;text-align:left}
.answer-review h3{margin:0 0 8px}
.answer-review-summary{font-weight:800;margin:0 0 10px;text-align:center}
.answer-review-card{border:1px solid #d9d9d9;border-radius:10px;padding:10px;margin:10px 0;overflow:hidden}
.answer-review-head{font-weight:900;margin-bottom:7px}
.answer-review-prompt{font-weight:700;margin-bottom:7px;overflow-wrap:anywhere}
.answer-review-image{display:block;max-width:100%;max-height:360px;width:auto;height:auto;object-fit:contain;margin:8px auto;border-radius:6px}
.answer-review-answer,.answer-review-correct-answer{padding:5px 7px;margin-top:5px;border-radius:6px;overflow-wrap:anywhere;word-break:break-word}
.answer-review-correct-answer{font-weight:800;background:rgba(30,160,70,.10)}
.review-correct{border-left:5px solid #219653}
.review-wrong{border-left:5px solid #d93025}
.review-unanswered{border-left:5px solid #777}
@media(max-width:650px){.answer-review-card{padding:8px}.answer-review-image{max-height:280px}}

/* Two Point Mask: keep all three mask-mode buttons visible */
.click-mask-actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
.click-mask-actions .btn{flex:0 1 auto!important;white-space:nowrap}
@media(max-width:600px){.click-mask-actions .btn{flex:1 1 145px!important;min-width:0!important}}

/* Participant A/B/C/D — compact size (final override) */
#quizArea #options.option-grid > button.option-btn{
  min-height:18px !important;
  height:auto !important;
  padding:6px 9px !important;
  font-size:13px !important;
  line-height:1.1 !important;
  border-radius:9px !important;
}
@media(max-width:600px){
  #quizArea #options.option-grid{
    gap:5px !important;
    margin-top:6px !important;
  }
  #quizArea #options.option-grid > button.option-btn{
    min-height:12px !important;
    padding:4px 6px !important;
    font-size:12px !important;
    line-height:1.05 !important;
    border-radius:8px !important;
  }
}


/* Live participant result summary below Next Question */
.participant-live-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-top:7px;
}
.participant-live-stats>div{
  text-align:center;
  padding:5px 7px;
  border:1px solid #d9e2ec;
  border-radius:9px;
  background:#f8fafc;
}
.participant-live-stats span{
  display:block;
  font-size:11px;
  line-height:1.1;
  color:#64748b;
}
.participant-live-stats b{
  display:block;
  margin-top:2px;
  font-size:15px;
  line-height:1.15;
}
.participant-live-stats b span{
  display:inline;
  font-size:inherit;
  color:inherit;
}
@media(max-width:600px){
  .participant-live-stats{gap:4px;margin-top:5px}
  .participant-live-stats>div{padding:4px 5px;border-radius:8px}
  .participant-live-stats span{font-size:10px}
  .participant-live-stats b{font-size:14px}
}


/* Compact participant top bar */
body:not(.master-page) > .topbar{
  padding:7px 18px !important;
  min-height:4px !important;
  gap:8px !important;
}
body:not(.master-page) > .topbar .brand{
  font-size:10px !important;
  line-height:1.15 !important;
  letter-spacing:.045em !important;
}
@media(max-width:900px){
  body:not(.master-page) > .topbar{
    padding:6px 12px !important;
    min-height:6px !important;
  }
}
@media(max-width:600px){
  body:not(.master-page) > .topbar{
    position:relative;
    padding:3px 8px !important;
    min-height:10px !important;
  }
  body:not(.master-page) > .topbar .brand{
    font-size:8px !important;
    line-height:1.1 !important;
  }
}


/* Automatic PDF question detection */
.auto-pdf-mask-panel{
  margin:10px 0 12px;
  padding:12px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  background:#f8fafc;
}
.auto-pdf-mask-head{margin-bottom:9px}
.auto-pdf-mask-controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-end;
}
.auto-pdf-mask-controls label{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
  font-weight:700;
}
.auto-pdf-mask-controls input{
  width:105px;
  min-height:34px;
  padding:5px 7px;
}
.auto-pdf-detect-status{margin-top:8px}
.mask.auto-detected-mask{
  background:rgba(245,158,11,.12)!important;
  border:2px dashed #f59e0b!important;
  pointer-events:auto!important;
  cursor:move!important;
}
.mask.auto-detected-mask .mask-resize-handle{
  pointer-events:auto!important;
  cursor:nwse-resize!important;
}
@media(max-width:600px){
  .auto-pdf-mask-controls label{flex:1 1 100px}
  .auto-pdf-mask-controls input{width:100%}
  .auto-pdf-mask-controls .btn{flex:1 1 150px}
}
/* Save Quiz progress inside Please Wait popup */
.save-quiz-progress-track{
  width:min(360px,78vw);
  height:12px;
  margin:12px auto 5px;
  overflow:hidden;
  border-radius:999px;
  background:#e2e8f0;
}
.save-quiz-progress-bar{
  width:0;
  height:100%;
  border-radius:inherit;
  background:currentColor;
  transition:width .18s ease;
}
.save-quiz-progress-percent{
  font-size:14px;
  font-weight:800;
  text-align:center;
  margin-top:4px;
}
.save-quiz-progress-note{margin-top:8px!important;font-size:12px;opacity:.8}
/* Admin general-message composer */
.admin-general-message-card textarea{width:100%;resize:vertical;min-height:90px;margin-top:6px}
.general-message-admin-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.admin-current-message{margin-top:12px;padding:12px;border:1px solid #cbd5e1;border-radius:10px;background:#f8fafc;white-space:pre-wrap;word-break:break-word}
.admin-current-message b{display:block;margin-bottom:5px}

/* Participant one-time general message popup */
.general-message-popup{position:fixed;inset:0;z-index:12000;background:rgba(15,23,42,.62);display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(3px)}
.general-message-popup.hidden{display:none!important}
.general-message-popup-card{width:min(480px,100%);max-height:80vh;overflow:auto;background:#fff;border-radius:18px;padding:22px;box-shadow:0 25px 80px rgba(0,0,0,.32);text-align:center}
.general-message-popup-icon{font-size:36px;line-height:1;margin-bottom:8px}
.general-message-popup-card h2{margin:4px 0 12px}
.general-message-popup-body{white-space:pre-wrap;word-break:break-word;text-align:left;font-size:16px;line-height:1.55;padding:12px;background:#f8fafc;border-radius:10px;margin-bottom:16px}
.general-message-popup-card .btn{min-width:120px}
.quiz-price-card select{min-width:130px}.quiz-payment-card{margin:14px 0;padding:16px;border:2px solid #f59e0b;border-radius:14px;background:#fffbeb}.quiz-payment-card.hidden{display:none!important}.quiz-payment-card input{width:100%;margin:5px 0}.quiz-payment-card .btn{width:100%;margin-top:8px;font-weight:800}
.freehand-live{position:absolute;left:0;top:0;z-index:25;pointer-events:none;overflow:visible}.freehand-live path{fill:rgba(239,68,68,.12);stroke:#ef4444;stroke-width:2;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}

.freehand-saved-mask{position:absolute;left:0;top:0;z-index:19;pointer-events:none;overflow:visible}
.freehand-saved-mask path{fill:rgba(239,68,68,.10);stroke:#ef4444;stroke-width:2;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}

.freehand-saved-mask .freehand-question-label rect{fill:#ef4444;stroke:none}
.freehand-saved-mask .freehand-question-label text{fill:#fff;font-size:12px;font-weight:800;font-family:Arial,sans-serif}

/* A true freehand question must not visually regain a rectangular frame. */
.question-img.freehand-question-image{
  border:0 !important;
  background:transparent !important;
}

/* Mobile safety control: shown only while a live quiz is not in the intended
   fullscreen-landscape viewing state. */
.restore-fullscreen-landscape-btn{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:10020;
  min-width:min(86vw,320px);
  padding:15px 20px;
  border:2px solid #fff;
  border-radius:14px;
  box-shadow:0 10px 35px rgba(0,0,0,.35);
  background:#0b7285;
  color:#fff;
  font-size:16px;
  font-weight:800;
  line-height:1.2;
  text-align:center;
  cursor:pointer;
}
.restore-fullscreen-landscape-btn.hidden{display:none!important}
.restore-fullscreen-landscape-btn:disabled{opacity:.7;cursor:wait}
@media (min-width:901px) and (pointer:fine){
  .restore-fullscreen-landscape-btn{display:none!important}
}


/* Gentle breathing attention effect for the fullscreen-landscape recovery button. */
.restore-fullscreen-landscape-btn:not(.hidden):not(:disabled){
  animation:fullscreenLandscapeBreathe 1.8s ease-in-out infinite;
  transform-origin:center center;
}
@keyframes fullscreenLandscapeBreathe{
  0%,100%{
    transform:translate(-50%,-50%) scale(1);
    box-shadow:0 10px 35px rgba(0,0,0,.35);
  }
  50%{
    transform:translate(-50%,-50%) scale(1.04);
    box-shadow:0 13px 42px rgba(0,0,0,.45);
  }
}
@media (prefers-reduced-motion:reduce){
  .restore-fullscreen-landscape-btn:not(.hidden):not(:disabled){
    animation:none;
  }
}


.free-access-controls{align-items:flex-end}.free-access-controls input{min-width:min(100%,280px)}
.free-access-list{display:grid;gap:8px;margin-top:10px;max-height:180px;overflow:auto}
.free-access-user{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border:1px solid var(--border,#d8dee9);border-radius:10px}
.free-access-user .btn{flex:0 0 auto;padding:6px 10px}

/* Optional, question-specific explanations: authoring panel and player popup */
.question-explanation-editor {margin-top:14px;border:1px solid #cbd5e1;border-radius:12px;background:rgba(148,163,184,.07);overflow:hidden}
.question-explanation-editor summary {cursor:pointer;font-weight:700;padding:12px 14px;list-style-position:inside}
.question-explanation-edit-body {padding:0 14px 14px;display:grid;gap:10px}
.question-explanation-edit-body label {display:grid;gap:7px;font-weight:600}
.question-explanation-edit-body textarea {display:block;width:100%;box-sizing:border-box;min-height:105px;resize:vertical;padding:12px;border:1px solid #94a3b8;border-radius:10px;background:var(--card, #fff);color:inherit;font:inherit}
.question-explanation-edit-controls {display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.question-explanation-file-label {cursor:pointer;display:inline-flex!important;align-items:center;justify-content:center}
.question-explanation-paste {cursor:text;display:flex;align-items:center;min-height:45px;padding:8px 11px;border:2px dashed #94a3b8;border-radius:10px;font-size:.9rem;flex:1 1 230px}
.question-explanation-paste:focus {outline:3px solid #4f46e5;outline-offset:2px}
.question-explanation-attached {display:flex;gap:9px;align-items:center;flex-wrap:wrap;overflow-wrap:anywhere}
.question-explanation-attached:empty {display:none}
.question-explanation-status {font-size:.85rem;min-height:1em}
.question-explanation-open {display:block;max-width:max-content;margin:12px 0;}
.question-explanation-review-btn {margin-top:12px}
.question-explanation-popup {position:fixed;inset:0;z-index:30050;background:rgba(10,15,28,.77);display:flex;justify-content:center;align-items:center;padding:15px;box-sizing:border-box}
.question-explanation-popup.hidden {display:none!important}
.question-explanation-popup-card {width:min(900px,100%);max-height:90vh;display:flex;flex-direction:column;background:#fff;color:#172337;border-radius:18px;box-shadow:0 18px 75px rgba(0,0,0,.35);overflow:hidden}
.question-explanation-popup-header {display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #e2e8f0}
.question-explanation-popup-header h2 {margin:0;font-size:1.2rem;color:#152337}
.question-explanation-popup-content {padding:18px;overflow:auto;overscroll-behavior:contain;display:grid;gap:15px;min-height:0}
.question-explanation-text {white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65;font-size:1.05rem}
.question-explanation-file-preview img {display:block;max-width:100%;height:auto;margin:auto;border-radius:8px}
.question-explanation-file-preview iframe {display:block;width:100%;height:min(60vh,630px);border:1px solid #cbd5e1;border-radius:9px;background:white}
.question-explanation-download {width:max-content;max-width:100%;overflow-wrap:anywhere;text-decoration:none}
@media(max-width:600px) {.question-explanation-popup{padding:8px}.question-explanation-popup-card{max-height:94vh}.question-explanation-popup-header{padding:11px}.question-explanation-popup-content{padding:12px}.question-explanation-file-preview iframe{height:52vh}}

/* Multiple per-question explanation attachments */
.question-explanation-attached {display:grid;gap:8px}
.question-explanation-attached-item {display:flex;align-items:center;gap:10px;justify-content:space-between;padding:8px 10px;border:1px solid #cbd5e1;border-radius:9px;overflow-wrap:anywhere}
.question-explanation-attached-item span {min-width:0;flex:1}
.question-explanation-compress-btn {white-space:nowrap;font-size:.86rem}
@media(max-width:600px) {.question-explanation-attached-item {flex-wrap:wrap}.question-explanation-attached-item span {flex-basis:100%}}
.question-explanation-count {font-size:.88rem}
.question-explanation-files-count {font-weight:700;margin-top:4px}
.question-explanation-file-item {display:grid;gap:12px;min-width:0;padding:15px;border:1px solid #d8e2ec;border-radius:12px}
.question-explanation-file-item h3 {margin:0;font-size:1rem;overflow-wrap:anywhere}

/* Question navigation: keep Explanation on the Back / Next Question line. */
.participant-next-row > .question-explanation-open {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  max-width:none;
}
.participant-next-row.participant-nav-row {
  display:flex !important;
  justify-content:space-between !important;
  align-items:stretch;
  flex-wrap:nowrap !important;
  gap:6px;
  width:100%;
}
.participant-nav-row > .btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:1 1 0 !important;
  min-width:0 !important;
  width:auto !important;
  margin:0;
  padding:10px 6px;
  text-align:center;
  white-space:normal;
  line-height:1.25;
}
@media (max-width:650px) {
  .participant-next-row.participant-nav-row { display:flex !important; }
  .participant-nav-row > .btn {
    width:auto !important;
    min-width:0 !important;
    padding:9px 3px;
    font-size:clamp(10px,2.7vw,12px);
  }
  .participant-next-row:not(.participant-nav-row) { gap:7px; flex-wrap:nowrap; }
  .participant-next-row:not(.participant-nav-row) > .btn { width:auto; min-width:0; }
}

/* Quiz Master editing only: jump to any saved question without navigating the live quiz. */
.question-list-edit-card{overflow:visible!important}
.question-edit-jump-row{
  position:sticky;top:90px;z-index:18;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:10px 12px;margin:12px 0 16px;
  border:1px solid #cbd5e1;border-radius:11px;
  background:rgba(248,250,252,.98);box-shadow:0 4px 14px rgba(15,23,42,.06);
}
.question-edit-jump-row .btn{flex:0 0 auto}
.question-edit-target--active{
  border-color:#2563eb!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.18),0 10px 28px rgba(37,99,235,.11)!important;
}
#questionList .thumb{scroll-margin-top:170px}
.question-jump-dialog{width:min(630px,100%);max-height:90dvh;overflow:auto}
.question-jump-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.question-jump-header h2{margin-bottom:0}
.question-jump-header .btn{flex:none;padding:8px 12px}
.question-jump-form{display:block;margin:16px 0}
.question-jump-form label{display:block;font-weight:700;margin-bottom:6px}
.question-jump-input-row{display:flex;gap:8px}
.question-jump-input-row input{min-width:0;flex:1}
.question-jump-input-row .btn{flex:0 0 auto}
.question-jump-grid-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.question-jump-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:7px;
  max-height:240px;overflow-y:auto;padding:8px;
  border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc;
}
.question-jump-grid .btn{padding:9px 4px;border:1px solid #d4deeb;background:#fff}
.question-jump-grid .btn.is-active{background:#1d4ed8;color:#fff;border-color:#1d4ed8}
.question-jump-status{min-height:18px;margin-top:8px}
@media(max-width:600px){
  .question-edit-jump-row{top:130px}
  .question-jump-input-row{flex-wrap:wrap}
  .question-jump-input-row .btn{width:100%}
  #questionList .thumb{scroll-margin-top:210px}
}


/* Participant-only Night / Day mode: the button sits beside the quiz name.
   All styles are scoped to join.html so Quiz Master editing remains unchanged. */
.quiz-player-page .participant-topbar{flex-wrap:nowrap!important;gap:10px;min-width:0}
.quiz-player-page .participant-topbar #joinTopbarTitle{
  flex:1 1 auto;min-width:0;overflow-wrap:anywhere;
}
.quiz-player-page .participant-theme-toggle{
  flex:0 0 auto;white-space:nowrap!important;
  padding:7px 11px!important;font-size:12px!important;line-height:1.15!important;
  border:1px solid rgba(255,255,255,.36)!important;border-radius:9px!important;
  background:rgba(255,255,255,.13)!important;color:#fff!important;
  cursor:pointer;
}
.quiz-player-page .participant-theme-toggle:hover:not(:disabled),
.quiz-player-page .participant-theme-toggle:focus-visible{
  background:rgba(255,255,255,.25)!important;
  outline:2px solid rgba(255,255,255,.9);outline-offset:2px;
}
@media(max-width:600px){
  .quiz-player-page .participant-topbar{position:sticky!important;top:0!important;padding:6px 9px!important}
  .quiz-player-page .participant-topbar .brand{font-size:clamp(10px,2.8vw,14px)!important;line-height:1.15!important}
  .quiz-player-page .participant-theme-toggle{font-size:11px!important;padding:6px 8px!important}
}

html.player-night{background:#0b1220;color-scheme:dark}
html.player-night body.quiz-player-page{
  --ui-bg:#0b1220;--ui-navy:#e5eefb;--ui-navy-2:#132b43;
  --ui-text:#e8effa;--ui-muted:#a9b8ca;
  --ui-line:#334358;--ui-panel:#172336;--ui-panel-soft:#1d2d43;
  --ui-shadow:0 10px 32px rgba(0,0,0,.25);
  --ui-shadow-hover:0 12px 36px rgba(0,0,0,.34);
  background:#0b1220!important;color:#e8effa!important;
}
html.player-night .quiz-player-page .participant-topbar{
  background:linear-gradient(120deg,#0e1a2c,#182e48)!important;
  border-color:#30435c!important;
}
html.player-night .quiz-player-page .card,
html.player-night .quiz-player-page .answer-review-card,
html.player-night .quiz-player-page .other-quizzes-panel,
html.player-night .quiz-player-page .question-explanation-popup-card,
html.player-night .quiz-player-page .general-message-popup-card,
html.player-night .quiz-player-page .chat-panel{
  background:#162335!important;color:#e8effa!important;
  border-color:#34465d!important;
}
html.player-night .quiz-player-page .card:hover{border-color:#45617d!important}
html.player-night .quiz-player-page h1,
html.player-night .quiz-player-page h2,
html.player-night .quiz-player-page h3,
html.player-night .quiz-player-page label,
html.player-night .quiz-player-page .brand{
  color:#eff5fe!important;
}
html.player-night .quiz-player-page .muted,
html.player-night .quiz-player-page .participant-donation-line,
html.player-night .quiz-player-page .copy-question-msg,
html.player-night .quiz-player-page .participant-live-stats span,
html.player-night .quiz-player-page .question-zoom-hint{
  color:#b4c3d6!important;
}
html.player-night .quiz-player-page input,
html.player-night .quiz-player-page select,
html.player-night .quiz-player-page textarea,
html.player-night .quiz-player-page .question-viewer,
html.player-night .quiz-player-page .general-message-popup-body,
html.player-night .quiz-player-page .question-explanation-file-item,
html.player-night .quiz-player-page .participant-live-stats > div{
  background:#1d2e44!important;color:#f1f6ff!important;
  border-color:#3c536d!important;
}
html.player-night .quiz-player-page input::placeholder,
html.player-night .quiz-player-page textarea::placeholder{color:#b0bdce!important}
html.player-night .quiz-player-page .option-btn:not(.option-correct):not(.correct):not(.correct-answer):not(.option-wrong){
  background:#1e3047!important;color:#f0f6ff!important;
  border-color:#425a75!important;
}
html.player-night .quiz-player-page .option-btn:hover:not(:disabled):not(.option-correct):not(.option-wrong){
  background:#2a405b!important;border-color:#73a5d4!important;
}
html.player-night .quiz-player-page .btn:not(.primary):not(.success):not(.danger):not(.participant-theme-toggle),
html.player-night .quiz-player-page .question-explanation-download,
html.player-night .quiz-player-page .explanation-download-btn{
  background:#293d56!important;color:#f1f7ff!important;
  border-color:#4b6480!important;
}
html.player-night .quiz-player-page .btn.primary{
  background:linear-gradient(135deg,#0c817c,#087b9b)!important;
  color:#fff!important;border-color:#259b9e!important;
}
html.player-night .quiz-player-page .pill,
html.player-night .quiz-player-page .participant-live-stats > div,
html.player-night .quiz-player-page .repeat-status,
html.player-night .quiz-player-page .answer-review-correct-answer{
  background:#183b43!important;color:#ddfff7!important;
  border-color:#326d71!important;
}
html.player-night .quiz-player-page .leader-row{border-color:#354a60!important}
html.player-night .quiz-player-page .leader-row:first-child{background:#19394a!important}
html.player-night .quiz-player-page .rank,
html.player-night .quiz-player-page .score{color:#e6f5ff!important}
html.player-night .quiz-player-page .question-explanation-popup-header{
  border-color:#40546c!important;
}
html.player-night .quiz-player-page .question-explanation-popup-header h2{
  color:#f1f7ff!important;
}
html.player-night .quiz-player-page .question-explanation-file-preview iframe{
  /* PDFs and DOCX conversions keep their own native page colours for readability. */
  background:#fff!important;border-color:#52647b!important;
}
html.player-night .quiz-player-page .result-popup,
html.player-night .quiz-player-page .quiz-payment-card,
html.player-night .quiz-player-page .quiz-subscribe-card,
html.player-night .quiz-player-page .intro-study-join,
html.player-night .quiz-player-page .donation-card,
html.player-night .quiz-player-page .donor-list-card{
  background:#1c2d43!important;color:#e8effa!important;
  border-color:#40566e!important;
}
html.player-night .quiz-player-page .donation-card p,
html.player-night .quiz-player-page .donor-list-card p,
html.player-night .quiz-player-page .quiz-subscribe-card p,
html.player-night .quiz-player-page .intro-study-join p{
  color:#bed0e2!important;
}
html.player-night .quiz-player-page a:not(.btn):not(.other-quiz-link){color:#8bd4ff}
html.player-night .quiz-player-page .other-quiz-link{
  background:#1c3048!important;color:#e8effa!important;border-color:#3c536d!important;
}
html.player-night .quiz-player-page .chat-head{background:#102940!important;color:#fff!important}
html.player-night .quiz-player-page .chat-messages,
html.player-night .quiz-player-page .question-explanation-popup-content{color:#e8effa!important}


/* Expanded question: bottom-right restore hint and live countdown (participant view).
   Keep the existing live timer and question click/keyboard restore behavior. */
#quizArea.question-expanded .question-meta-row{
  top:auto !important;
  left:auto !important;
  right:calc(12px + env(safe-area-inset-right, 0px)) !important;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  z-index:230 !important;
  width:auto !important;
  margin:0 !important;
  pointer-events:none !important;
}
#quizArea.question-expanded .question-zoom-hint{
  top:auto !important;
  right:calc(88px + env(safe-area-inset-right, 0px)) !important;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  left:auto !important;
  z-index:232 !important;
  white-space:nowrap !important;
  max-width:calc(100vw - 110px) !important;
  padding:8px 12px !important;
  line-height:1.15 !important;
  pointer-events:none !important; /* Clicking the pill restores via #questionViewer. */
}
#quizArea.question-expanded #participantCountdown:not(.hidden){
  min-width:64px !important;
  text-align:center !important;
  padding:8px 11px !important;
  line-height:1.15 !important;
}
@media (max-width:600px){
  #quizArea.question-expanded .question-meta-row{
    top:auto !important;
    left:auto !important;
    right:calc(8px + env(safe-area-inset-right, 0px)) !important;
    bottom:calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #quizArea.question-expanded .question-zoom-hint{
    top:auto !important;
    right:calc(78px + env(safe-area-inset-right, 0px)) !important;
    bottom:calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    max-width:calc(100vw - 96px) !important;
    padding:8px 10px !important;
  }
  #quizArea.question-expanded #participantCountdown:not(.hidden){
    min-width:56px !important;
    padding:7px 9px !important;
  }
}

/* Preserve high-contrast restore control when the participant is in Night mode. */
html.player-night .quiz-player-page #quizArea.question-expanded .question-zoom-hint{
  background:rgba(29,46,68,.97) !important;
  color:#f1f6ff !important;
  border-color:#8098b3 !important;
}