.quiz-shell {
      --quiz-blue: var(--blue, #00209F);
      --quiz-blue-soft: #e9eeff;
      --quiz-border: #dde4f1;
      --quiz-text-soft: #64748b;
      --quiz-bg: #f8fafc;
      max-width: 860px;
      margin: 0 auto;
    }
    .quiz-version-note {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      margin: 0 auto .9rem;
      padding: .4rem .8rem;
      border-radius: 999px;
      background: #e0ecff;
      color: #1e3a8a;
      font-size: .74rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      border: 1px solid #bfdbfe;
    }
    .quiz-card {
      background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
      border: 1px solid var(--quiz-border);
      border-radius: 20px;
      padding: 2rem;
      box-shadow: 0 12px 35px rgba(2, 6, 23, .08);
    }
    .quiz-intro {
      text-align: center;
      margin-bottom: 1.2rem;
    }
    .quiz-intro__title {
      margin: 0 0 .6rem;
      color: var(--quiz-blue);
      font-size: clamp(1.35rem, 2.4vw, 1.8rem);
      font-weight: 900;
      letter-spacing: -.02em;
    }
    .quiz-intro__text {
      margin: 0 auto 1.35rem;
      max-width: 62ch;
      color: #4b5563;
      line-height: 1.7;
      font-size: 1rem;
    }

    .quiz-start-btn,
    .quiz-submit-btn,
    .quiz-next-btn,
    .quiz-restart-btn {
      border: none;
      border-radius: 12px;
      font-weight: 800;
      cursor: pointer;
      transition: transform .12s ease, box-shadow .25s ease, background .25s ease;
    }
    .quiz-start-btn {
      background: var(--quiz-blue);
      color: #fff;
      padding: .95rem 2rem;
      font-size: 1rem;
      box-shadow: 0 10px 24px rgba(0, 32, 159, .26);
    }
    .quiz-start-btn:hover {
      transform: translateY(-2px);
      background: #001a80;
    }

    .quiz-progress-wrap {
      margin-bottom: 1rem;
    }
    .quiz-progress-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: .55rem;
      font-size: .84rem;
      font-weight: 800;
      letter-spacing: .03em;
      color: #334155;
      text-transform: uppercase;
    }
    .quiz-progress-track {
      background: #dbe5f8;
      border-radius: 999px;
      height: 11px;
      overflow: hidden;
    }
    .quiz-progress-bar {
      width: 0;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #1d4ed8 0%, #2563eb 35%, #3b82f6 100%);
      transition: width .42s cubic-bezier(.22, 1, .36, 1);
      box-shadow: 0 0 0 1px rgba(255,255,255,.22) inset;
    }

    .quiz-meta {
      display: flex;
      gap: .65rem;
      flex-wrap: wrap;
      margin-bottom: 1.15rem;
    }
    .quiz-score-badge,
    .quiz-points-badge,
    .quiz-streak-badge {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: .34rem .82rem;
      font-size: .8rem;
      font-weight: 800;
      letter-spacing: .02em;
    }
    .quiz-score-badge {
      background: var(--quiz-blue-soft);
      color: #1e3a8a;
    }
    .quiz-points-badge {
      background: #fff3c8;
      color: #7c4a03;
    }
    .quiz-streak-badge {
      background: #ffedd5;
      color: #9a3412;
    }

    .quiz-card--question {
      transition: opacity .26s ease, transform .26s ease;
    }
    .quiz-card--question.is-transitioning {
      opacity: .2;
      transform: translateY(8px);
    }

    .quiz-category {
      display: inline-block;
      margin-bottom: .9rem;
      border-radius: 999px;
      padding: .35rem .82rem;
      background: #eff3ff;
      color: #1e3a8a;
      font-size: .73rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .quiz-question {
      margin: 0 0 1.35rem;
      font-size: clamp(1.08rem, 1.9vw, 1.28rem);
      line-height: 1.5;
      color: #0f172a;
      font-weight: 800;
      letter-spacing: -.01em;
    }

    .quiz-choices {
      list-style: none;
      padding: 0;
      margin: 0 0 1.15rem;
      display: flex;
      flex-direction: column;
      gap: .72rem;
    }
    .quiz-choice-btn {
      width: 100%;
      border-radius: 12px;
      border: 2px solid var(--quiz-border);
      background: var(--quiz-bg);
      color: #0f172a;
      text-align: left;
      line-height: 1.42;
      font-size: .98rem;
      font-weight: 600;
      padding: .78rem 1rem;
      cursor: pointer;
      transition: transform .12s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .quiz-choice-btn:hover:not(:disabled) {
      border-color: #93c5fd;
      transform: translateX(3px);
      box-shadow: 0 7px 20px rgba(30, 64, 175, .09);
      background: #f2f7ff;
    }
    .quiz-choice-btn:focus-visible {
      outline: 3px solid rgba(37, 99, 235, .35);
      outline-offset: 2px;
    }
    .quiz-choice-btn.selected {
      border-color: #2563eb;
      background: #e6efff;
      color: #1d4ed8;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
    }
    .quiz-choice-btn.correct {
      border-color: #059669;
      background: #dcfce7;
      color: #14532d;
      box-shadow: 0 0 0 2px rgba(5, 150, 105, .12);
    }
    .quiz-choice-btn.wrong {
      border-color: #ef4444;
      background: #fee2e2;
      color: #991b1b;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, .12);
    }
    .quiz-choice-btn:disabled {
      cursor: default;
    }
    .quiz-selection-hint {
      min-height: 1.2rem;
      margin: -.2rem 0 .75rem;
      color: #475569;
      font-size: .84rem;
      font-weight: 600;
    }

    .quiz-feedback {
      display: none;
      margin-bottom: .85rem;
      border-radius: 10px;
      padding: .58rem .8rem;
      font-size: .82rem;
      font-weight: 800;
      letter-spacing: .02em;
      animation: quizPop .18s ease-out;
    }
    .quiz-feedback.visible {
      display: block;
    }
    .quiz-feedback--ok {
      background: #dcfce7;
      color: #166534;
    }
    .quiz-feedback--ko {
      background: #fee2e2;
      color: #991b1b;
    }

    .quiz-explanation {
      display: none;
      margin-bottom: 1.1rem;
      background: #eff6ff;
      border-left: 4px solid #2563eb;
      color: #1e3a8a;
      border-radius: 0 10px 10px 0;
      padding: .85rem .95rem;
      font-size: .92rem;
      line-height: 1.65;
    }
    .quiz-explanation.wrong-explain {
      background: #fff7ed;
      border-color: #f97316;
      color: #7c2d12;
    }
    .quiz-explanation.visible {
      display: block;
      animation: quizFadeIn .25s ease-out;
    }

    .quiz-actions {
      display: flex;
      gap: .65rem;
      flex-wrap: wrap;
    }
    .quiz-submit-btn,
    .quiz-next-btn,
    .quiz-restart-btn {
      padding: .76rem 1.25rem;
      font-size: .95rem;
    }
    .quiz-submit-btn {
      background: var(--quiz-blue);
      color: #fff;
      box-shadow: 0 10px 20px rgba(0, 32, 159, .2);
    }
    .quiz-submit-btn:hover:not(:disabled) {
      transform: translateY(-1px);
      background: #001a80;
    }
    .quiz-next-btn {
      display: none;
      background: #eef2ff;
      color: #1e3a8a;
      border: 1px solid #c7d2fe;
    }
    .quiz-next-btn.visible {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .35rem;
    }
    .quiz-next-btn:hover:not(:disabled) {
      transform: translateY(-1px);
      background: #e0e7ff;
    }
    .quiz-submit-btn:focus-visible,
    .quiz-next-btn:focus-visible,
    .quiz-restart-btn:focus-visible,
    .quiz-start-btn:focus-visible {
      outline: 3px solid rgba(37, 99, 235, .35);
      outline-offset: 2px;
    }
    .quiz-submit-btn:disabled,
    .quiz-next-btn:disabled {
      opacity: .45;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .quiz-results {
      display: none;
      text-align: center;
      padding: 2.2rem 1.7rem;
    }
    .quiz-results.visible {
      display: block;
      animation: quizFadeIn .3s ease-out;
    }
    .quiz-results__score-ring {
      width: 150px;
      height: 150px;
      border-radius: 999px;
      margin: 0 auto 1.25rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      background: radial-gradient(circle at top, #60a5fa 0%, #1d4ed8 65%, #1e3a8a 100%);
      box-shadow: 0 18px 34px rgba(30, 64, 175, .3);
    }
    .quiz-results__score-ring .big {
      line-height: 1;
      font-size: 2.55rem;
      font-weight: 900;
    }
    .quiz-results__score-ring .small {
      font-size: .96rem;
      opacity: .88;
      font-weight: 700;
    }
    .quiz-results__percent {
      margin: -.55rem 0 .95rem;
      font-size: 1rem;
      font-weight: 800;
      color: #0f172a;
    }
    .quiz-results__msg {
      margin: 0 0 .55rem;
      color: var(--quiz-blue);
      font-size: 1.15rem;
      font-weight: 900;
      letter-spacing: -.01em;
    }
    .quiz-results__sub {
      margin: 0 auto 1.2rem;
      max-width: 60ch;
      color: #475569;
      font-size: .96rem;
      line-height: 1.72;
    }
    .quiz-results__stats {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: .58rem;
      margin-bottom: 1rem;
    }
    .quiz-pill {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      border-radius: 999px;
      padding: .35rem .8rem;
      font-size: .8rem;
      font-weight: 800;
    }
    .quiz-pill--ok {
      background: #dcfce7;
      color: #166534;
    }
    .quiz-pill--ko {
      background: #fee2e2;
      color: #991b1b;
    }
    .quiz-pill--streak {
      background: #ffedd5;
      color: #9a3412;
    }
    .quiz-restart-btn {
      margin-top: .6rem;
      background: var(--red, #D21034);
      color: #fff;
      padding: .85rem 2rem;
      box-shadow: 0 10px 20px rgba(210, 16, 52, .22);
    }
    .quiz-restart-btn:hover {
      transform: translateY(-2px);
      background: #a80d28;
    }

    .quiz-breakdown {
      margin: 1.35rem auto 0;
      max-width: 520px;
      text-align: left;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: .8rem .95rem;
      background: #f8fafc;
    }
    .quiz-breakdown h4 {
      margin: 0 0 .65rem;
      text-align: center;
      font-size: .78rem;
      color: var(--quiz-text-soft);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
    }
    .quiz-breakdown-row {
      border-radius: 10px;
      padding: .55rem .45rem;
      margin-bottom: .28rem;
      transition: background .2s ease;
    }
    .quiz-breakdown-row:last-child {
      margin-bottom: 0;
    }
    .quiz-breakdown-row:hover {
      background: #eef2ff;
    }
    .quiz-breakdown-row .row-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: .35rem;
    }
    .quiz-breakdown-row .cat-label {
      font-weight: 700;
      color: #1e293b;
      font-size: .9rem;
    }
    .quiz-breakdown-row .cat-score {
      font-size: .83rem;
      font-weight: 800;
      color: var(--quiz-blue);
    }
    .cat-track {
      width: 100%;
      height: 8px;
      border-radius: 999px;
      background: #dbe5f8;
      overflow: hidden;
    }
    .cat-fill {
      width: 0;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #60a5fa 0%, #2563eb 100%);
      transition: width .35s ease;
    }

    @keyframes quizFadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes quizPop {
      from { transform: scale(.98); opacity: .8; }
      to { transform: scale(1); opacity: 1; }
    }

    @media (max-width: 720px) {
      .quiz-card {
        padding: 1.35rem 1.05rem;
      }
      .quiz-actions {
        flex-direction: column;
      }
      .quiz-submit-btn,
      .quiz-next-btn,
      .quiz-restart-btn {
        width: 100%;
      }
      .quiz-meta {
        gap: .5rem;
      }
    }