* { box-sizing: border-box; }
body {
  margin: 0;
  background: #ffffff;
  color: #1a1a1a;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.45;
}
#app {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}
h1 { font-size: 22px; margin: 0 0 20px; }
h2 { font-size: 18px; margin: 0 0 14px; }
.muted { color: #666; font-size: 13px; }
.card {
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; }
button {
  font-size: 15px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #cfcfcf;
  background: #f7f7f7;
  cursor: pointer;
}
button:hover { background: #eee; }
button.primary {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
button.primary:hover { background: #333; }
button.danger { color: #b00020; border-color: #b00020; background: #fff; }
button:disabled { opacity: 0.5; cursor: default; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
table th, table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #eee; }
table th { color: #666; font-weight: 600; font-size: 12px; text-transform: uppercase; }
.timer {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 15px;
  padding: 4px 10px;
  border-radius: 6px;
  background: #f2f2f2;
}
.timer.warn { background: #ffe1e1; color: #b00020; }
.exam-timers { margin-bottom: 14px; }
.exam-timer-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.exam-timer-row strong, .exam-timer-row #question-time-display {
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.progress-bar {
  height: 8px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
  margin: 0 0 10px;
}
.progress-bar.small { height: 5px; }
.progress-bar-fill { height: 100%; width: 100%; background: #1a1a1a; transition: width 0.3s linear, background-color 0.3s; }
.progress-bar-fill.warn { background: #b00020; }
#question-time-display.warn { color: #b00020; font-weight: 600; }
.progress { font-size: 13px; color: #666; margin-bottom: 6px; }
.question-text { font-size: 18px; font-weight: 600; margin: 10px 0 18px; }
.options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
}
.option:hover { border-color: #999; }
.option input { margin-top: 3px; }
.option.correct { border-color: #2e7d32; background: #eef7ee; font-weight: 600; color: #2e7d32; }
.option.incorrect { border-color: #b00020; background: #fdeaea; }
.option-icon { margin-left: auto; padding-left: 10px; font-size: 15px; font-weight: 700; flex-shrink: 0; }
.icon-correct { color: #2e7d32; }
.icon-incorrect { color: #b00020; }
textarea {
  width: 100%;
  min-height: 110px;
  font-size: 15px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-family: inherit;
  resize: vertical;
}
.feedback { margin-top: 14px; padding: 12px 14px; border-radius: 8px; }
.feedback.ok { background: #eef7ee; border: 1px solid #2e7d32; }
.feedback.ko { background: #fdeaea; border: 1px solid #b00020; }
.confidence-badge {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 6px;
  font-weight: 600;
}
.confidence-alta { background: #e3f2e3; color: #2e7d32; }
.confidence-media { background: #fff9c4; color: #8a6d00; }
.confidence-bassa { background: #ffe0b2; color: #a15c00; }
.question-confidence-line { margin: -10px 0 14px; }
.question-lesson-line { margin: -10px 0 14px; font-size: 12px; }
/* toggle globale (icona occhio): nasconde solo pill di confidenza e riga lezione/modulo, non i
   pill di stato (Corretta/Errata/...) */
body.hide-confidence .confidence-badge.confidence-alta,
body.hide-confidence .confidence-badge.confidence-media,
body.hide-confidence .confidence-badge.confidence-bassa,
body.hide-confidence .question-lesson-line {
  display: none;
}
.status-pill-correct { background: #e3f2e3; color: #2e7d32; }
.status-pill-incorrect { background: #fde3e3; color: #b00020; }
.status-pill-neutral { background: #eee; color: #666; }
.status-pill-pending { background: #fff9c4; color: #8a6d00; }
.top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.sticky-header {
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 5;
  padding: 12px 0 10px;
  margin: -12px 0 8px;
  border-bottom: 1px solid #eee;
}
.sticky-header .top-bar { flex-wrap: wrap; gap: 8px; }
.study-header-stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pill-green { background: #e3f2e3; color: #2e7d32; }
.pill-red { background: #fde3e3; color: #b00020; }
.link-btn { background: none; border: none; color: #1a1a1a; text-decoration: underline; padding: 4px 0; }
label { display: block; font-size: 13px; margin-bottom: 4px; color: #444; }
input[type="number"] { padding: 6px 8px; border-radius: 6px; border: 1px solid #ccc; width: 100%; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }