/* =====================================================
   PrimingToolbox - Experiment Runner Styles
   Version: 1.0
   Styles for running experiments (overlay, trial display, results)
   ===================================================== */

/* Experiment Overlay (fullscreen container) */
.experiment-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.experiment-overlay.active {
  display: flex;
}

.experiment-container {
  width: 100%;
  max-width: 1000px;
  padding: 50px;
  text-align: center;
}

/* Setup Screen */
.experiment-setup {
  background: rgba(17, 24, 39, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 77, 184, 0.3);
  border-radius: 24px;
  padding: 60px 70px;
}

.experiment-setup h2 {
  color: #ffffff;
  font-size: 2.4rem;
  margin-bottom: 15px;
}

.experiment-setup .subtitle {
  color: #9aa6b2;
  font-size: 1.2rem;
  margin-bottom: 50px;
}

/* Language/Option Selectors */
.option-selectors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 40px;
}

.option-select-group {
  text-align: left;
}

.option-select-group label {
  color: #ff4db8;
  font-size: 1.1rem;
  margin-bottom: 12px;
  display: block;
}

.option-select-group select {
  width: 100%;
  padding: 18px;
  font-size: 1.3rem;
}

/* Trial Screen */
.experiment-trial {
  display: none;
}

.experiment-trial.active {
  display: block;
}

/* Fixation cross */
.fixation {
  font-size: 5rem;
  color: #ffffff;
}

/* Stimulus display area */
.stimulus-display {
  font-size: 5rem;
  font-weight: bold;
  padding: 80px;
  border-radius: 24px;
  background: rgba(17, 24, 39, 0.5);
  min-height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* For simultaneous presentation (e.g., Stroop) */
.stimulus-simultaneous {
  /* Prime (word meaning) affects how target (color) is perceived */
}

/* For sequential presentation */
.stimulus-prime {
  font-size: 3rem;
}

.stimulus-target {
  font-size: 4rem;
}

/* Instructions */
.trial-instruction {
  color: #9aa6b2;
  font-size: 1.4rem;
  margin-top: 35px;
}

/* Response keys display */
.response-keys {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-top: 35px;
}

.key-hint {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 20px 40px;
}

.key-hint .key {
  display: block;
  font-size: 2.5rem;
  color: #ff4db8;
  margin-bottom: 8px;
}

.key-hint .label {
  color: #9aa6b2;
  font-size: 1.1rem;
}

/* Progress display */
.experiment-progress {
  margin-bottom: 30px;
}

/* Feedback display */
.feedback {
  font-size: 3rem;
  padding: 40px;
}

.feedback.correct {
  color: #169999;
}

.feedback.incorrect {
  color: #990f23;
}

/* Results Screen */
.experiment-results {
  display: none;
  background: rgba(17, 24, 39, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 77, 184, 0.3);
  border-radius: 24px;
  padding: 60px 70px;
}

.experiment-results.active {
  display: block;
}

.experiment-results h2 {
  color: #ffffff;
  font-size: 2.4rem;
  margin-bottom: 35px;
}

.results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 40px;
}

.result-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 30px;
  text-align: center;
}

.result-card h3 {
  color: #a78bfa;
  font-size: 1.2rem;
  margin-bottom: 18px;
}

.result-value {
  font-size: 3rem;
  color: #ffffff;
  font-weight: bold;
}

.result-unit {
  color: #9aa6b2;
  font-size: 1.1rem;
}

/* Special result highlight */
.result-highlight {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));
  border: 2px solid #667eea;
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 30px;
}

.result-highlight h3 {
  color: #ffffff;
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.result-highlight-value {
  font-size: 2rem;
  color: #ff4db8;
  font-weight: bold;
}

.result-explanation {
  color: #9aa6b2;
  font-size: 0.95rem;
  margin-top: 15px;
  line-height: 1.6;
}

/* Action buttons */
.experiment-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

/* Export section */
.export-section {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.export-section h4 {
  color: #ff4db8;
  margin-bottom: 15px;
  font-size: 1rem;
}

.export-options {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.export-option {
  flex: 1;
  max-width: 250px;
  text-align: center;
}

.export-desc {
  margin-top: 8px;
  font-size: 0.75rem;
  color: #9aa6b2;
  line-height: 1.4;
}

/* =====================================================
   Template Builder Styles
   ===================================================== */

.template-builder-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  overflow-y: auto;
}

.template-builder-overlay.active {
  display: block;
}

.template-builder {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px;
}

.builder-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.builder-header h1 {
  font-size: 1.8rem;
  color: #ffffff;
}

.builder-close {
  background: none;
  border: none;
  color: #9aa6b2;
  font-size: 2rem;
  cursor: pointer;
  padding: 5px 15px;
  transition: color 0.2s;
}

.builder-close:hover {
  color: #ffffff;
}

/* ABCD Framework Section */
.abcd-section {
  background: rgba(17, 24, 39, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 77, 184, 0.3);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
}

.abcd-section h2 {
  color: #ff4db8;
  font-size: 1.2rem;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.abcd-section h2::before {
  content: '';
  width: 4px;
  height: 24px;
  background: linear-gradient(135deg, #667eea, #ff4db8);
  border-radius: 2px;
}

/* Stimulus preview */
.stimulus-combined {
  background: rgba(102, 126, 234, 0.15);
  border: 2px solid rgba(102, 126, 234, 0.4);
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 25px;
  text-align: center;
}

.stimulus-combined h3 {
  color: #a78bfa;
  font-size: 1rem;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stimulus-preview {
  font-size: 3rem;
  font-weight: bold;
  padding: 30px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  margin-bottom: 20px;
}

.stimulus-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  text-align: left;
  margin-top: 20px;
}

.stimulus-part {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 15px 20px;
  border-left: 3px solid;
}

.stimulus-part.prime {
  border-color: #ff4db8;
}

.stimulus-part.target {
  border-color: #667eea;
}

.stimulus-part-label {
  font-size: 0.8rem;
  color: #9aa6b2;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.stimulus-part-value {
  color: #ffffff;
  font-size: 1.1rem;
}

/* Experimenter identity section */
.identity-section {
  background: rgba(22, 153, 153, 0.1);
  border: 1px solid rgba(22, 153, 153, 0.3);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.identity-section h3 {
  color: #169999;
  margin-bottom: 15px;
}

/* External ID section */
.external-id-section {
  background: rgba(153, 15, 35, 0.1);
  border: 1px solid rgba(153, 15, 35, 0.3);
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
}

.external-id-section h3 {
  color: #990f23;
  margin-bottom: 15px;
}

/* Timeline */
.timeline-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding: 10px 30px 16px 30px;
  z-index: 100;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.timeline-title {
  color: #ffffff;
  font-size: 0.8rem;
}

.timeline-total {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
}

.timeline-track {
  position: relative;
  height: 80px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  margin-bottom: 6px;
}

.timeline-axis {
  position: absolute;
  bottom: 30px;
  left: 40px;
  right: 40px;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
}

.timeline-axis::after {
  content: 'ms';
  position: absolute;
  right: -25px;
  top: -8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
}

.timeline-event {
  position: absolute;
  bottom: 30px;
  transform: translateX(-50%);
  cursor: grab;
  user-select: none;
  transition: transform 0.1s ease;
}

.timeline-event:active {
  cursor: grabbing;
}

.timeline-event:hover .event-box {
  border-color: rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
}

.event-box {
  background: rgba(17, 24, 39, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 4px 8px;
  text-align: center;
  min-width: 55px;
  transition: all 0.2s ease;
}

.event-label {
  color: #a78bfa;
  font-size: 0.7rem;
  text-transform: uppercase;
  margin-bottom: 2px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.event-content {
  color: #ffffff;
  font-size: 0.75rem;
}

.event-connector {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 15px;
  background: rgba(255, 255, 255, 0.5);
}

.event-dot {
  position: absolute;
  bottom: -23px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
}

.event-time {
  position: absolute;
  bottom: -45px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  white-space: nowrap;
}

/* =====================================================
   Stroop Language Dominance Styles (from V30)
   ===================================================== */

/* Stroop Modal/Overlay */
.stroop-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.stroop-overlay.active {
  display: flex;
}

.stroop-container {
  width: 100%;
  max-width: 800px;
  padding: 40px;
  text-align: center;
}

/* Setup Screen */
.stroop-setup {
  background: rgba(17, 24, 39, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 77, 184, 0.3);
  border-radius: 20px;
  padding: 50px;
}

.stroop-setup h2 {
  color: #ffffff;
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.stroop-setup .subtitle {
  color: #9aa6b2;
  margin-bottom: 40px;
}

.language-selectors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 40px;
}

.language-select-group {
  text-align: left;
}

.language-select-group label {
  color: #ff4db8;
  font-size: 0.9rem;
  margin-bottom: 10px;
  display: block;
}

.language-select-group select {
  width: 100%;
  padding: 15px;
  font-size: 1.1rem;
  background: rgba(17, 24, 39, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #e5e7eb;
}

/* Trial Screen */
.stroop-trial {
  display: none;
}

.stroop-trial.active {
  display: block;
}

.stroop-fixation {
  font-size: 5rem;
  color: #ffffff;
}

.stroop-stimulus {
  font-size: 4rem;
  font-weight: bold;
  padding: 60px;
  border-radius: 20px;
  background: rgba(17, 24, 39, 0.5);
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stroop-instruction {
  color: #9aa6b2;
  font-size: 1.2rem;
  margin-top: 30px;
}

.stroop-keys {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 30px;
}

/* Progress */
.stroop-progress {
  margin-bottom: 30px;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #ff4db8);
  transition: width 0.3s ease;
}

.progress-text {
  color: #9aa6b2;
  font-size: 0.85rem;
  margin-top: 10px;
}

/* Results Screen */
.stroop-results {
  display: none;
  background: rgba(17, 24, 39, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 77, 184, 0.3);
  border-radius: 20px;
  padding: 50px;
}

.stroop-results.active {
  display: block;
}

.stroop-results h2 {
  color: #ffffff;
  font-size: 1.8rem;
  margin-bottom: 30px;
}

.dominance-result {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));
  border: 2px solid #667eea;
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 30px;
}

.dominance-result h3 {
  color: #ffffff;
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.dominance-language {
  font-size: 2rem;
  color: #ff4db8;
  font-weight: bold;
}

.dominance-explanation {
  color: #9aa6b2;
  font-size: 0.95rem;
  margin-top: 15px;
  line-height: 1.6;
}

.stroop-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

/* =====================================================
   Template Builder Styles (from V30)
   ===================================================== */

/* ABCD Framework Section */
.abcd-section {
  background: rgba(17, 24, 39, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 77, 184, 0.3);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
}

.abcd-section h2 {
  color: #ff4db8;
  font-size: 1.2rem;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.abcd-section h2::before {
  content: '';
  width: 4px;
  height: 24px;
  background: linear-gradient(135deg, #667eea, #ff4db8);
  border-radius: 2px;
}

/* Simultaneous Stimulus Display */
.stimulus-combined {
  background: rgba(102, 126, 234, 0.15);
  border: 2px solid rgba(102, 126, 234, 0.4);
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 25px;
  text-align: center;
}

.stimulus-combined h3 {
  color: #a78bfa;
  font-size: 1rem;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stimulus-preview {
  font-size: 3rem;
  font-weight: bold;
  padding: 30px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  margin-bottom: 20px;
}

.stimulus-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  text-align: left;
  margin-top: 20px;
}

.stimulus-part {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 15px 20px;
  border-left: 3px solid;
}

.stimulus-part.prime {
  border-color: #ff4db8;
}

.stimulus-part.target {
  border-color: #667eea;
}

.stimulus-part-label {
  font-size: 0.8rem;
  color: #9aa6b2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

.stimulus-part-name {
  font-size: 1.1rem;
  color: #ffffff;
  font-weight: 500;
  margin-bottom: 5px;
}

.stimulus-part-desc {
  font-size: 0.85rem;
  color: #9aa6b2;
}

/* Outcomes Row */
.outcomes-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 25px;
}

.outcome-box {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.outcome-box.baseline {
  border: 2px solid rgba(22, 153, 153, 0.5);
}

.outcome-box.measured {
  border: 2px solid rgba(255, 77, 184, 0.5);
}

.outcome-letter {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 8px;
}

.outcome-box.baseline .outcome-letter {
  color: #169999;
}

.outcome-box.measured .outcome-letter {
  color: #ff4db8;
}

.outcome-name {
  color: #ffffff;
  font-size: 0.95rem;
  margin-bottom: 5px;
}

.outcome-condition {
  color: #9aa6b2;
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.outcome-example {
  font-size: 0.8rem;
  color: #a78bfa;
  font-style: italic;
}

.effect-formula {
  color: #ffffff;
  font-size: 1.1rem;
  padding: 15px;
  background: rgba(102, 126, 234, 0.2);
  border-radius: 8px;
}

/* Three Criteria */
.criteria-section {
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.criteria-title {
  color: #a78bfa;
  font-size: 0.9rem;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.criteria-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.criterion {
  background: rgba(22, 153, 153, 0.1);
  border: 1px solid rgba(22, 153, 153, 0.3);
  border-radius: 10px;
  padding: 15px;
  text-align: center;
}

.criterion-check {
  color: #169999;
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.criterion-name {
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 5px;
}

.criterion-desc {
  color: #9aa6b2;
  font-size: 0.75rem;
  line-height: 1.4;
}

/* Parameters Section */
.params-section {
  background: rgba(17, 24, 39, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 77, 184, 0.3);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
}

.params-section h2 {
  color: #ff4db8;
  font-size: 1.2rem;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.params-section h2::before {
  content: '';
  width: 4px;
  height: 24px;
  background: linear-gradient(135deg, #667eea, #ff4db8);
  border-radius: 2px;
}

.params-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

.param-group {
  display: flex;
  flex-direction: column;
}

.param-group label {
  color: #a78bfa;
  font-size: 0.9rem;
  margin-bottom: 10px;
  font-weight: 500;
}

.param-group select,
.param-group input[type="number"],
.param-group input[type="text"],
.param-group input[type="url"] {
  padding: 12px 15px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: #ffffff;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.param-group select:focus,
.param-group input:focus {
  outline: none;
  border-color: rgba(255, 77, 184, 0.5);
}

.param-hint {
  color: #9aa6b2;
  font-size: 0.75rem;
  margin-top: 8px;
  line-height: 1.4;
}

/* Data Collection Section */
.data-collection-section {
  background: rgba(17, 24, 39, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(22, 153, 153, 0.4);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
}

.data-collection-section h2 {
  color: #169999;
  font-size: 1.2rem;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.data-collection-section h2::before {
  content: '';
  width: 4px;
  height: 24px;
  background: linear-gradient(135deg, #169999, #667eea);
  border-radius: 2px;
}

.data-description {
  color: #9aa6b2;
  font-size: 0.9rem;
  margin-bottom: 20px;
  line-height: 1.6;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  background: rgba(22, 153, 153, 0.15);
  border: 1px solid rgba(22, 153, 153, 0.4);
  border-radius: 10px;
  margin-bottom: 20px;
}

.connection-status.error {
  background: rgba(153, 15, 35, 0.15);
  border-color: rgba(153, 15, 35, 0.4);
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #169999;
  animation: pulse-dot 2s ease-in-out infinite;
}

.connection-status.error .status-dot {
  background: #990f23;
  animation: none;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
}

.status-text {
  color: #e5e7eb;
  font-size: 0.95rem;
}

.status-text strong {
  color: #169999;
}

.connection-status.error .status-text strong {
  color: #990f23;
}

.btn-test-connection {
  background: rgba(22, 153, 153, 0.2);
  border: 1px solid rgba(22, 153, 153, 0.5);
  color: #169999;
  padding: 12px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.btn-test-connection:hover {
  background: rgba(22, 153, 153, 0.3);
}

.data-info {
  margin-top: 20px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.data-info summary {
  color: #a78bfa;
  cursor: pointer;
  font-size: 0.9rem;
}

.data-info-content {
  margin-top: 15px;
  color: #9aa6b2;
  font-size: 0.85rem;
  line-height: 1.7;
}

.data-info-content code {
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  color: #ff4db8;
}

/* Action Buttons */
.builder-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 40px;
}

.btn-preview {
  background: rgba(102, 126, 234, 0.2);
  border: 2px solid rgba(102, 126, 234, 0.5);
  color: #667eea;
  padding: 15px 35px;
  border-radius: 12px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-preview:hover {
  background: rgba(102, 126, 234, 0.3);
  transform: translateY(-2px);
}

.btn-generate {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: #ffffff;
  padding: 15px 35px;
  border-radius: 12px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-generate:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

/* Editable Stimulus Table */
.stimulus-editor {
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stimulus-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.stimulus-editor-title {
  color: #a78bfa;
  font-size: 0.95rem;
  font-weight: 500;
}

.btn-add-stimulus {
  background: rgba(22, 153, 153, 0.2);
  border: 1px solid rgba(22, 153, 153, 0.5);
  color: #169999;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.btn-add-stimulus:hover {
  background: rgba(22, 153, 153, 0.3);
}

.stimulus-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  overflow: hidden;
}

.stimulus-table th {
  background: rgba(102, 126, 234, 0.2);
  color: #a78bfa;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stimulus-table td {
  padding: 10px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}

.stimulus-table tr:last-child td {
  border-bottom: none;
}

.stimulus-table input[type="text"] {
  width: 100%;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.9rem;
}

.stimulus-table input[type="text"]:focus {
  outline: none;
  border-color: rgba(255, 77, 184, 0.5);
}

.stimulus-table input[type="color"] {
  width: 40px;
  height: 32px;
  padding: 2px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  cursor: pointer;
}

.color-preview {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-remove-row {
  background: rgba(153, 15, 35, 0.2);
  border: 1px solid rgba(153, 15, 35, 0.4);
  color: #990f23;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  transition: all 0.2s;
}

.btn-remove-row:hover {
  background: rgba(153, 15, 35, 0.4);
}

.btn-remove-row:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.response-key-input {
  width: 50px !important;
  text-align: center;
  text-transform: uppercase;
}

.stimulus-note {
  color: #9aa6b2;
  font-size: 0.8rem;
  margin-top: 12px;
  line-height: 1.5;
}

.stimulus-preview-live {
  transition: all 0.3s ease;
}

/* Try It Yourself CTA */
.try-it-cta {
  background: linear-gradient(135deg, rgba(255, 77, 184, 0.15) 0%, rgba(102, 126, 234, 0.15) 100%);
  border: 2px solid rgba(255, 77, 184, 0.5);
  border-radius: 16px;
  padding: 25px 30px;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  animation: pulse-border 2s ease-in-out infinite;
}

@keyframes pulse-border {
  0%, 100% { border-color: rgba(255, 77, 184, 0.5); box-shadow: 0 0 0 0 rgba(255, 77, 184, 0); }
  50% { border-color: rgba(255, 77, 184, 0.8); box-shadow: 0 0 20px 0 rgba(255, 77, 184, 0.3); }
}

.try-it-content {
  flex: 1;
}

.try-it-title {
  color: #ff4db8;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.try-it-arrow {
  display: inline-block;
  animation: bounce-right 1s ease-in-out infinite;
}

@keyframes bounce-right {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}

.try-it-desc {
  color: #9aa6b2;
  font-size: 0.95rem;
  line-height: 1.5;
}

.btn-try-it {
  background: linear-gradient(135deg, #ff4db8 0%, #667eea 100%);
  border: none;
  color: #ffffff;
  padding: 18px 35px;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-try-it:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(255, 77, 184, 0.4);
}

/* Responsive adjustments for Template Builder */
@media (max-width: 768px) {
  .stimulus-breakdown,
  .params-grid,
  .outcomes-row,
  .criteria-list {
    grid-template-columns: 1fr;
  }

  .outcomes-row {
    gap: 15px;
  }

  .effect-formula {
    order: 3;
  }

  .try-it-cta {
    flex-direction: column;
    text-align: center;
  }

  .stimulus-table {
    font-size: 0.85rem;
  }

  .stimulus-table th,
  .stimulus-table td {
    padding: 8px 10px;
  }

  .builder-actions {
    flex-direction: column;
  }
}

/* =====================================================
   Evaluative conditioning: the rating scale is OFF
   between trials
   =====================================================
   js/evaluative.js has always signalled "stop accepting ratings" with
   classList.remove('active') on #rating-scale-container - but no stylesheet
   defined that class, so it was a dead hook. The buttons stayed fully visible
   and fully clickable between trials, and a stray second click recorded a
   second row: stamped with the NEXT trial's number while carrying the PREVIOUS
   trial's shape. In this paradigm that inverts the effect for that item rather
   than adding noise.
   The lock in recordTestResponse is what guarantees correctness. This makes the
   state visible, and stops the click reaching a button at all. */
.rating-scale-container:not(.active) {
  pointer-events: none;
  opacity: 0.35;
  filter: grayscale(1);
  transition: opacity .18s ease, filter .18s ease;
}
.rating-scale-container.active {
  pointer-events: auto;
  opacity: 1;
  filter: none;
  transition: opacity .18s ease, filter .18s ease;
}