:root {
    --spp-text: #1c1c1e; --spp-text-muted: #55575c; --spp-text-faint: #8a8d94;
    --spp-accent: #7A1F3A; --spp-card-bg: #fff; --spp-border: #e3e5ea;
    --spp-border-input: #d3d6dc; --spp-input-bg: #fafbfc; --spp-surface: #eef1f6;
    --spp-surface-2: #f5f7fb; --spp-explanation-text: #3a3d42; --spp-footer-text: #b0b3ba;
    --spp-correct-bg: #e6f4ec; --spp-wrong-bg: #fdecea; --spp-page-bg: transparent;
    color-scheme: light;
  }
  :root[data-theme="dark"] {
    --spp-text: #EAEAEC; --spp-text-muted: #A2A7B1; --spp-text-faint: #8890a0;
    --spp-accent: #F0A8BC; --spp-card-bg: #20242C; --spp-border: #383D49;
    --spp-border-input: #454b59; --spp-input-bg: #262b34; --spp-surface: #2a2f3a;
    --spp-surface-2: #262b34; --spp-explanation-text: #cfd2d8; --spp-footer-text: #6b7180;
    --spp-correct-bg: rgba(31,122,77,0.22); --spp-wrong-bg: rgba(179,38,30,0.22); --spp-page-bg: #0D0F13;
    color-scheme: dark;
  }
  #spp-root, #spp-root * { box-sizing: border-box; }
  #spp-root {
    font-family: inherit;
    color: var(--spp-text);
    max-width: 780px;
    margin: 0 auto;
    padding: 0;
    scroll-margin-top: 90px;
  }
    #spp-root h2 { font-size: 20px; margin: 0 0 4px; color: var(--spp-accent); }
  #spp-root p.spp-sub { margin: 0 0 20px; color: var(--spp-text-muted); font-size: 14px; }
  #spp-root .spp-back-link {
    background: none; border: none; color: var(--spp-accent); font-size: 13.5px; font-weight: 600;
    cursor: pointer; padding: 4px 0; margin-bottom: 14px; text-decoration: underline;
  }
  #spp-root .spp-cta-top {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px;
  }
  #spp-root .spp-cta-top[hidden] { display: none; }
  #spp-root .spp-timer { font-size: 15px; font-weight: 800; color: var(--spp-accent); font-variant-numeric: tabular-nums; }
  #spp-root .spp-timer[hidden] { display: none; }
  #spp-root .spp-timer.spp-timer-alerta { color: #b3261e; }
  #spp-root .spp-alt-btn.spp-alt-selected { background: var(--spp-surface); border-color: var(--spp-accent); }
  #spp-root .spp-alt-btn.spp-alt-selected .spp-alt-letter { background: var(--spp-accent); color: var(--spp-card-bg); }
  #spp-root .spp-cta-link {
    display: inline-block; background: #C9A227; color: #0B2038; font-weight: 700; font-size: 13.5px;
    padding: 10px 18px; border-radius: 999px; text-decoration: none; transition: background .15s;
  }
  #spp-root .spp-cta-link:hover { background: #9C7C1B; }
  #spp-root .spp-cta-link.spp-cta-secondary { background: var(--spp-surface); color: var(--spp-accent); }
  #spp-root .spp-cta-link.spp-cta-secondary:hover { filter: brightness(0.95); }

  /* ---- grids de matéria / capítulo ---- */
  #spp-root .spp-subject-grid, #spp-root .spp-chapter-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
  }
  #spp-root .spp-card-btn {
    display: block; width: 100%; text-align: left; background: var(--spp-card-bg); cursor: pointer;
    border: 1px solid var(--spp-border); border-left: 5px solid var(--spp-accent); border-radius: 12px;
    padding: 16px 18px; font-family: inherit; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow .15s, transform .15s;
  }
  #spp-root .spp-card-btn:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.08); transform: translateY(-1px); }
  #spp-root .spp-card-title { font-size: 15.5px; font-weight: 700; color: var(--spp-text); margin-bottom: 3px; }
  #spp-root .spp-card-sub { font-size: 12.5px; color: var(--spp-text-faint); }
  #spp-root .spp-card-btn.spp-card-all { border-left-color: var(--spp-accent); background: var(--spp-surface-2); }

  /* ---- progresso salvo no navegador (tela de matérias) ---- */
  #spp-root .spp-card-progress { margin-top: 10px; }
  #spp-root .spp-mini-bar-bg {
    display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--spp-surface);
  }
  #spp-root .spp-mini-bar-hits { background: #1f7a4d; }
  #spp-root .spp-mini-bar-miss { background: #b3261e; flex: 1; }
  #spp-root .spp-card-progress-text { font-size: 11.5px; color: var(--spp-text-faint); margin-top: 5px; }
  #spp-root .spp-card-progress-text .spp-score-hits,
  #spp-root .spp-card-progress-text .spp-score-miss { font-weight: 700; }
  #spp-root .spp-progress-reset-link {
    display: block; margin: 18px auto 0; background: none; border: none; color: var(--spp-text-faint);
    font-size: 12px; text-decoration: underline; cursor: pointer; font-family: inherit;
  }

  /* ---- quiz ---- */
  #spp-root .spp-quiz-top {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 6px;
  }
  #spp-root .spp-progress-text { font-size: 13.5px; font-weight: 700; color: var(--spp-accent); }
  #spp-root .spp-score-text { font-size: 13px; color: var(--spp-text-muted); }
  #spp-root .spp-score-text .spp-score-hits { color: #1f7a4d; font-weight: 700; }
  #spp-root .spp-score-text .spp-score-miss { color: #b3261e; font-weight: 700; }
  #spp-root .spp-progress-bar-bg { background: var(--spp-surface); border-radius: 999px; height: 8px; overflow: hidden; margin-bottom: 18px; }
  #spp-root .spp-progress-bar-fill { background: var(--spp-accent); height: 100%; width: 0%; transition: width .3s; }

  #spp-root .spp-quiz-card {
    background: var(--spp-card-bg); border: 1px solid var(--spp-border); border-radius: 14px;
    padding: 22px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  #spp-root .spp-quiz-meta { font-size: 12px; color: var(--spp-text-faint); font-weight: 600; letter-spacing: .2px; margin-bottom: 10px; }
  #spp-root .spp-question-text { font-size: 17px; line-height: 1.5; font-weight: 600; margin-bottom: 20px; }

  #spp-root .spp-alternatives { display: flex; flex-direction: column; gap: 10px; }
  #spp-root .spp-alt-btn {
    display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
    background: var(--spp-input-bg); border: 1.5px solid var(--spp-border-input); border-radius: 10px;
    padding: 12px 14px; font-family: inherit; font-size: 14.5px; color: var(--spp-text); cursor: pointer;
    transition: background-color .15s, border-color .15s;
  }
  #spp-root .spp-alt-btn:hover:not(:disabled) { background: var(--spp-surface); border-color: var(--spp-accent); }
  #spp-root .spp-alt-btn:disabled { cursor: default; }
  #spp-root .spp-alt-letter {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--spp-surface); color: var(--spp-accent);
    font-weight: 700; font-size: 12.5px; display: flex; align-items: center; justify-content: center;
  }
  #spp-root .spp-alt-btn.spp-alt-correct { background: var(--spp-correct-bg); border-color: #1f7a4d; }
  #spp-root .spp-alt-btn.spp-alt-correct .spp-alt-letter { background: #1f7a4d; color: #fff; }
  #spp-root .spp-alt-btn.spp-alt-wrong { background: var(--spp-wrong-bg); border-color: #b3261e; }
  #spp-root .spp-alt-btn.spp-alt-wrong .spp-alt-letter { background: #b3261e; color: #fff; }

  #spp-root .spp-feedback { font-size: 15px; font-weight: 700; margin-top: 18px; }
  #spp-root .spp-feedback.spp-feedback-correct { color: #1f7a4d; }
  #spp-root .spp-feedback.spp-feedback-wrong { color: #b3261e; }
  #spp-root .spp-explanation {
    background: var(--spp-surface-2); border-radius: 10px; padding: 12px 14px; margin-top: 10px;
    font-size: 13.5px; line-height: 1.55; color: var(--spp-explanation-text);
  }
  #spp-root .spp-explanation strong { color: var(--spp-text); }
  #spp-root .spp-pagina-resumo { font-size: 12px; color: var(--spp-text-faint); margin-top: 6px; font-style: italic; }

  #spp-root button.spp-btn {
    display: inline-block; border: none; border-radius: 10px; padding: 13px 20px;
    font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 20px; font-family: inherit;
  }
  #spp-root button.spp-btn-primary { background: #7A1F3A; color: #fff; width: 100%; }
  #spp-root button.spp-btn-primary:hover { background: #591629; }
  #spp-root button.spp-btn-secondary { background: var(--spp-surface); color: var(--spp-accent); }
  #spp-root .spp-actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
  #spp-root .spp-actions-row button { margin-top: 0; flex: 1; min-width: 160px; }

  /* ---- resultado ---- */
  #spp-root .spp-result-card {
    background: var(--spp-card-bg); border: 1px solid var(--spp-border); border-radius: 14px;
    padding: 26px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); text-align: center;
  }
  #spp-root .spp-result-main { font-size: 16px; margin: 10px 0 18px; }
  #spp-root .spp-result-stats {
    display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-bottom: 6px;
  }
  #spp-root .spp-stat-block { min-width: 90px; }
  #spp-root .spp-stat-value { font-size: 24px; font-weight: 800; }
  #spp-root .spp-stat-value.spp-stat-hits { color: #1f7a4d; }
  #spp-root .spp-stat-value.spp-stat-miss { color: #b3261e; }
  #spp-root .spp-stat-value.spp-stat-pct { color: var(--spp-accent); }
  #spp-root .spp-stat-label { font-size: 12px; color: var(--spp-text-faint); margin-top: 2px; }

  #spp-root footer.spp-footer { text-align: center; font-size: 11.5px; color: var(--spp-footer-text); margin-top: 26px; }

  @media (max-width: 480px) {
    #spp-root .spp-quiz-card, #spp-root .spp-result-card { padding: 16px; }
    #spp-root .spp-subject-grid, #spp-root .spp-chapter-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    #spp-root .spp-card-btn { padding: 10px 10px; border-radius: 10px; border-left-width: 4px; }
    #spp-root .spp-card-title { font-size: 13.5px; line-height: 1.3; }
    #spp-root .spp-card-sub { font-size: 11px; }
    #spp-root .spp-card-progress-text { font-size: 10.5px; }
  }
  /* ---- tela de resultado: mensagem, itens para rever e chamadas para acao ---- */
  #spp-root .spp-result-msg { font-size: 14.5px; color: var(--spp-text-muted); margin: 0 0 18px; line-height: 1.5; }
  #spp-root .spp-review { text-align: left; background: var(--spp-surface-2); border-radius: 12px; padding: 14px 16px; margin: 0 0 18px; }
  #spp-root .spp-review h3 { font-size: 14px; margin: 0 0 8px; color: var(--spp-accent); }
  #spp-root .spp-review ul { list-style: none; margin: 0; padding: 0; }
  #spp-root .spp-review li { font-size: 13.5px; line-height: 1.45; color: var(--spp-explanation-text); padding: 6px 0; border-top: 1px solid var(--spp-border); }
  #spp-root .spp-review li:first-child { border-top: 0; }
  #spp-root .spp-review li strong { color: var(--spp-text); }
  #spp-root .spp-result-cta { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--spp-border); }
  #spp-root .spp-result-cta p { margin: 0 0 12px; font-size: 14px; color: var(--spp-text-muted); }
  #spp-root .spp-result-cta .spp-cta-top { margin-bottom: 0; }