.option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 15px;
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
}
.option:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.option:disabled { cursor: default; }
.option.correct {
  background: #dcfce7;
  border-color: #22c55e;
  color: #14532d;
}
.option.wrong {
  background: #fee2e2;
  border-color: #ef4444;
  color: #7f1d1d;
}
.option .letter {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  background: #e2e8f0;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  margin-right: 8px;
}
.option.correct .letter { background: #22c55e; color: #ffffff; }
.option.wrong .letter   { background: #ef4444; color: #ffffff; }
.tab-btn { transition: all 0.15s; }

/* Dark mode overrides */
.dark .option {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}
.dark .option:hover:not(:disabled) {
  background: #334155;
  border-color: #475569;
}
.dark .option.correct {
  background: #064e3b;
  border-color: #10b981;
  color: #a7f3d0;
}
.dark .option.wrong {
  background: #7f1d1d;
  border-color: #ef4444;
  color: #fecaca;
}
.dark .option .letter { background: #475569; color: #f1f5f9; }
.dark .option.correct .letter { background: #10b981; color: #052e1a; }
.dark .option.wrong .letter { background: #ef4444; color: #450a0a; }