/* Extracted from inline <style> blocks and style= attributes: the site CSP (style-src 'self') blocks inline styles. */
body.premade-loading-active #setupView,
    body.premade-loading-active #quizView,
    body.premade-loading-active #resultsView { display: none !important; }
    body[data-page="quiz"] #setupView { display: none !important; }
    .premade-loading {
      position: fixed;
      inset: 0;
      z-index: 5000;
      display: grid;
      place-items: center;
      padding: 20px;
      background: var(--bg, var(--bg));
      color: var(--text, var(--text));
    }
    .premade-loading-card {
      width: min(100%, 460px);
      display: grid;
      gap: 10px;
      padding: 24px;
      border: 1px solid var(--soft-border, var(--border));
      border-radius: var(--radius-card);
      background: var(--card, var(--bg));
      box-shadow: none;
      text-align: center;
    }
    .premade-loading-card strong { font-size: 1.15rem; }
    .premade-loading-card span { color: var(--muted, var(--text-muted)); overflow-wrap: anywhere; }
    .premade-loading-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 8px;
    }
    .premade-loading-card a,
    .premade-loading-card button {
      justify-self: center;
      border: 0;
      border-radius:999px;
      padding: 10px 16px;
      color: var(--text);
      background: var(--accent, var(--surface-hover));
      text-decoration: none;
      font-weight:600;
      font: inherit;
      cursor: pointer;
    }
    .premade-loading-card a {
      color: var(--text, var(--text));
      background: var(--soft-bg, var(--surface-hover));
      border: 1px solid var(--soft-border, var(--border));
    }
    .premade-about {
      position: relative;
      z-index: 1;
      margin: -6px 0 18px;
      border: 1px solid var(--soft-border);
      border-radius: var(--radius-input);
      background: var(--soft-bg);
      color: var(--muted);
    }
    .premade-about summary {
      padding: 10px 12px;
      color: var(--text);
      cursor: pointer;
      font-size: .84rem;
      font-weight:600;
    }
    .premade-about p {
      margin: 0;
      padding: 0 12px 12px;
      font-size: .88rem;
      line-height: 1.55;
    }

/* Keep long desktop questions and explanations reachable. */
    @media (min-width: 981px) {
      #quizView .question-area {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
      }
    }

#focusExit { color: var(--danger); }
.pt-swatch[data-color="#ef4444"] { background: color-mix(in srgb, var(--danger) 12%, var(--bg)); }
.pt-swatch[data-color="#3b82f6"] { background: var(--surface-hover); }
.pt-swatch[data-color="#515151"] { background: var(--surface-hover); }
.pt-swatch[data-color="#ffd580"] { background: var(--surface-hover); }
.input-card.mb-0 { margin-bottom: 0; }
html.no-text-select #quizView, html.no-text-select #quizView *, html.no-text-select #resultsView .review-item, html.no-text-select #resultsView .review-item * { -webkit-user-select: none !important; user-select: none !important; }

/* ---- Round 13: quieter top bar and calmer spacing on the quiz page ---- */
/* The big "dr-muneeb.com/quiz-world" link took a third of the bar; the logo-sized Home button already goes there. */
.quiz-header .quiz-brand-chip, .app-topbar .quiz-brand-chip { display: none !important; }
.quiz-header .back-to-quizzes { white-space: nowrap; }
.quiz-header .header-left, .quiz-header .header-right { gap: 8px; flex-wrap: nowrap; }
.quiz-header .quiz-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 24ch; }
/* The identity strip inside the question card becomes a quiet credit line. */
.quiz-identity-strip { outline: 0 !important; border: 0 !important; background: none !important; padding: 0 !important; margin: 0 0 10px !important; font-size: .74rem !important; font-weight:600; color: var(--muted); }
.quiz-identity-strip * { font-size: inherit !important; color: inherit !important; }
#quizView .question-area { padding-top: 22px; }
#quizView .question-card { padding: 26px 28px; }
#quizView .option-item { margin-bottom: 10px; }
@media (max-width: 680px) { #quizView .question-card { padding: 18px 16px; } }
.player-toast { position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 14px); max-width: min(92vw, 460px); padding: 12px 18px; border-radius: var(--radius-input); background: var(--surface-hover); color: var(--text); font-weight:600; font-size: .9rem; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 9999; text-align: center; }
.player-toast.show { opacity: 1; transform: translate(-50%, 0); }