.faw { padding: 4px 0; }

.faw-question { font-size: 1.1em; font-weight: 600; margin-bottom: 12px; }
.faw-instructions { font-size: 0.9em; color: var(--muted-foreground); margin-bottom: 12px; }

.faw-btn {
  padding: 10px 20px; border: none; border-radius: var(--radius);
  font: inherit; font-weight: 600; cursor: pointer;
}
.faw-btn-primary { background: var(--primary); color: var(--primary-foreground); }
.faw-btn-primary:hover:not(:disabled) { opacity: 0.9; }
.faw-btn-secondary { background: var(--secondary); color: var(--secondary-foreground); border: 1px solid var(--border); }
.faw-btn-secondary:hover:not(:disabled) { opacity: 0.85; }
.faw-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.faw-feedback { font-weight: 600; margin-top: 12px; }
.faw-correct { color: #28a745; }
.faw-incorrect { color: var(--destructive); }

.faw-options { margin-bottom: 12px; }
.faw-option {
  padding: 10px; margin: 6px 0;
  border: 2px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: background .2s, border-color .2s;
}
.faw-option:hover:not(.faw-answered) { background: var(--accent); border-color: var(--primary); }
.faw-option.faw-answered { cursor: not-allowed; }
.faw-option.faw-correct { background: #d4edda; border-color: #28a745; }
.faw-option.faw-incorrect { background: #f8d7da; border-color: var(--destructive); }
.faw-option.faw-faded { opacity: .5; }
.faw-explanation {
  padding: 10px; margin-top: 10px;
  background: var(--muted); border-left: 4px solid var(--primary); border-radius: var(--radius);
}

.faw-matching-three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.faw-column { display: flex; flex-direction: column; gap: 10px; }
.faw-item-fixed {
  padding: 10px; background: var(--accent); border: 2px solid var(--primary);
  border-radius: var(--radius); font-weight: 500;
}
.faw-item-fixed.faw-correct { background: #d4edda; border-color: #28a745; }
.faw-item-fixed.faw-incorrect { background: #f8d7da; border-color: var(--destructive); }
.faw-drop-zone {
  padding: 10px; min-height: 40px; background: var(--muted);
  border: 2px dashed var(--border); border-radius: var(--radius);
  text-align: center; color: var(--muted-foreground); font-style: italic;
  cursor: pointer; transition: all .2s;
}
.faw-drop-zone.faw-filled { background: var(--secondary); border-style: solid; color: inherit; font-style: normal; font-weight: 500; }
.faw-drop-zone.faw-drop-target, .faw-label-drop-zone.faw-drop-target { background: #fff9c4; border-color: #fbc02d; }
.faw-drop-zone.faw-correct { background: #d4edda; border-color: #28a745; }
.faw-drop-zone.faw-incorrect { background: #f8d7da; border-color: var(--destructive); }
.faw-item-draggable {
  padding: 10px; background: #fff3e0; border: 2px solid #ff9800;
  border-radius: var(--radius); font-weight: 500;
}

.faw-ordering-items { margin-bottom: 16px; }
.faw-ordering-item {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px; padding: 10px;
  border: 2px solid var(--border); border-radius: var(--radius);
}
.faw-ordering-item.faw-drop-target { background: #fff9c4; border-style: dashed; }
.faw-ordering-item.faw-correct { background: #d4edda; border-color: #28a745; }
.faw-ordering-item.faw-incorrect { background: #f8d7da; border-color: var(--destructive); }
.faw-ordering-text { flex: 1; }

.faw-ordering-item, .faw-item-draggable, .faw-label-num, .faw-label-badge { cursor: grab; }
.faw-ordering-item:active, .faw-item-draggable:active, .faw-label-num:active, .faw-label-badge:active { cursor: grabbing; }
.faw-ordering-item.faw-dragging, .faw-item-draggable.faw-dragging, .faw-label-num.faw-dragging, .faw-label-badge.faw-dragging { opacity: .5; }

.faw-position, .faw-label-num {
  min-width: 30px; height: 30px; background: var(--primary); color: var(--primary-foreground);
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 600; flex-shrink: 0;
}
.faw-label-badge {
  min-width: 24px; height: 24px; background: var(--primary); color: var(--primary-foreground);
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 0.8em; font-weight: 600; flex-shrink: 0;
}
.faw-label-badge.faw-correct { background: #28a745; color: white; }
.faw-label-badge.faw-incorrect { background: var(--destructive); color: white; }

.faw-labeling-area { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; margin-bottom: 16px; }
.faw-labeling-labels, .faw-labeling-text { display: flex; flex-direction: column; gap: 10px; }
.faw-labeling-title { font-weight: 600; color: var(--muted-foreground); margin-bottom: 6px; }
.faw-label-item { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: var(--radius); }
.faw-text-lines { display: flex; flex-direction: column; gap: 8px; }
.faw-text-line { display: flex; align-items: flex-start; gap: 8px; }
.faw-label-drop-zone {
  min-width: 60px; min-height: 30px; padding: 4px;
  background: var(--muted); border: 2px dashed var(--border); border-radius: var(--radius);
  display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; flex-shrink: 0;
}
.faw-text-content { flex: 1; padding: 4px 0; line-height: 1.5; }

.faw-card {
  min-height: 140px; padding: 32px 20px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2em; text-align: center; margin-bottom: 12px; transition: all .3s;
}
.faw-card-front { background: var(--accent); border: 2px solid var(--primary); }
.faw-card-back  { background: var(--muted); border: 2px solid var(--border); }
.faw-rating-btns { display: flex; gap: 8px; margin-bottom: 12px; }
.faw-progress { height: 6px; background: var(--muted); border-radius: 4px; margin-bottom: 10px; }
.faw-progress-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width .3s; }

.faw-cm-workspace {
  position: relative; height: 360px;
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 12px; overflow: hidden; background: var(--muted);
}
.faw-cm-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
.faw-cm-node {
  position: absolute; transform: translate(-50%, -50%);
  padding: 8px 14px; background: var(--card); border: 2px solid var(--primary);
  border-radius: var(--radius); cursor: move; user-select: none;
  font-weight: 500; z-index: 1; white-space: nowrap;
}
.faw-cm-node.faw-cm-pending { box-shadow: 0 0 0 3px var(--primary); background: var(--accent); }
.faw-cm-terms { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.faw-cm-term {
  padding: 5px 14px; border: 2px solid var(--border); border-radius: 20px;
  background: var(--muted); cursor: pointer; font: inherit; font-size: 0.9em; transition: all .15s;
}
.faw-cm-term:hover:not(:disabled) { border-color: var(--primary); background: var(--accent); }
.faw-cm-term.faw-cm-term-selected { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.faw-cm-term:disabled { opacity: 0.45; cursor: not-allowed; }
.faw-cm-edge-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.faw-cm-edge-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; background: var(--muted); border-radius: var(--radius); font-size: 0.9em;
}
.faw-cm-edge-label { padding: 2px 8px; background: var(--accent); border-radius: 10px; font-size: 0.85em; font-weight: 500; }
.faw-cm-edge-remove { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--muted-foreground); padding: 2px 4px; border-radius: 4px; }
.faw-cm-edge-remove:hover { color: #dc3545; background: #f8d7da; }
