.art { max-width: 760px; margin: 0 auto; font-family: Georgia, serif; font-size: 18px; line-height: 1.8; color: #1c1c1c; }
.art h2 { font-size: 24px; font-weight: 700; margin: 48px 0 16px; padding-top: 16px; border-top: 1px solid #e2e2e2; line-height: 1.3; }
.art p { margin-bottom: 20px; }
.art .nota { background: #fff8e6; border: 1px solid #f0d070; border-radius: 6px; padding: 16px 20px; font-family: -apple-system, sans-serif; font-size: 15px; line-height: 1.6; margin: 24px 0; }
.art .nota strong { color: #a07800; }
.art .recap { background: #1a6b4a; color: white; border-radius: 10px; padding: 24px 28px; margin: 48px 0 32px; }
.art .recap h3 { color: white; font-size: 17px; margin-bottom: 12px; margin-top: 0; font-family: -apple-system, sans-serif; }
.art .recap ul { margin: 0; padding-left: 20px; }
.art .recap li { font-family: -apple-system, sans-serif; font-size: 15px; opacity: 0.92; line-height: 1.6; margin-bottom: 6px; }

/* Quiz UI */
.qz { font-family: -apple-system, sans-serif; margin: 32px 0; }
.qz-top { background: #1a6b4a; color: white; border-radius: 10px 10px 0 0; padding: 16px 22px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.qz-top h3 { font-size: 15px; font-weight: 600; margin: 0; color: white; }
.qz-stat { font-size: 13px; opacity: .85; }
.qz-bar-wrap { width: 100%; height: 5px; background: rgba(255,255,255,.25); border-radius: 3px; margin-top: 8px; }
.qz-bar { height: 5px; background: white; border-radius: 3px; transition: width .4s; }

.qz-body { border: 1px solid #e2e2e2; border-top: none; border-radius: 0 0 10px 10px; padding: 24px; min-height: 280px; }

/* categoria tabs */
.cat-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.cat-tab { padding: 5px 14px; border-radius: 20px; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid #e2e2e2; background: white; color: #5a5a5a; transition: all .15s; }
.cat-tab.active { background: #1a6b4a; color: white; border-color: #1a6b4a; }
.diff-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.diff-tab { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid #e2e2e2; background: white; color: #5a5a5a; transition: all .15s; }
.diff-tab.active { background: #378ADD; color: white; border-color: #378ADD; }

/* loading */
.qz-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 0; gap: 14px; color: #5a5a5a; }
.spinner { width: 32px; height: 32px; border: 3px solid #e2e2e2; border-top-color: #1a6b4a; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.qz-loading p { font-size: 14px; margin: 0; }

/* domanda */
.q-num { display: inline-block; background: #e8f5f0; color: #1a6b4a; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 20px; margin-bottom: 10px; letter-spacing: .05em; }
.q-text { font-size: 16px; font-weight: 600; color: #1c1c1c; margin-bottom: 18px; line-height: 1.5; }
.opts { display: flex; flex-direction: column; gap: 10px; }
.opt { text-align: left; padding: 12px 16px; border: 1px solid #e2e2e2; border-radius: 6px; background: white; font-size: 15px; color: #1c1c1c; cursor: pointer; transition: all .15s; line-height: 1.5; }
.opt:hover:not(:disabled) { border-color: #1a6b4a; background: #e8f5f0; }
.opt.correct { border-color: #1D9E75; background: #e8f5f0; color: #0f5a3a; font-weight: 600; }
.opt.wrong { border-color: #e24b4a; background: #fcebeb; color: #791f1f; }
.opt.show-correct { border-color: #1D9E75; background: #e8f5f0; color: #0f5a3a; }
.opt:disabled { cursor: default; }

.exp { margin-top: 14px; padding: 12px 16px; background: #f8f8f6; border-left: 3px solid #1a6b4a; border-radius: 0 6px 6px 0; font-size: 14px; color: #3a3a3a; line-height: 1.6; display: none; }
.exp.show { display: block; }

.btn-next { margin-top: 18px; padding: 10px 24px; background: #1a6b4a; color: white; border: none; border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; display: none; }
.btn-next.show { display: inline-block; }
.btn-next:hover { background: #2d9068; }

/* risultato */
.qz-result { text-align: center; padding: 32px 16px; }
.res-score { font-size: 52px; font-weight: 700; color: #1a6b4a; line-height: 1; }
.res-label { font-size: 15px; color: #5a5a5a; margin: 8px 0 16px; }
.res-msg { font-size: 15px; color: #1c1c1c; margin-bottom: 24px; }
.btn-restart { padding: 11px 26px; background: #1a6b4a; color: white; border: none; border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; margin: 4px; }
.btn-restart:hover { background: #2d9068; }
.btn-restart.secondary { background: white; color: #1a6b4a; border: 1px solid #1a6b4a; }
.btn-restart.secondary:hover { background: #e8f5f0; }

/* errore */
.qz-error { text-align: center; padding: 32px 16px; color: #791f1f; }
.qz-error p { font-size: 15px; }
.btn-retry { padding: 10px 22px; background: #1a6b4a; color: white; border: none; border-radius: 6px; font-size: 14px; cursor: pointer; margin-top: 12px; }

.score-badge { display: inline-flex; align-items: center; gap: 6px; background: #e8f5f0; color: #1a6b4a; font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 20px; margin-top: 8px; }

@media (max-width: 600px) {
  .art { font-size: 16px; }
  .q-text { font-size: 15px; }
  .opt { font-size: 14px; padding: 10px 14px; }
  .cat-tab, .diff-tab { font-size: 12px; }
}