/* ── Simulator Layout ── */
.sim-layout {
  max-width: 900px; margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
}
.sim-header { margin-bottom: var(--space-2xl); text-align: center; }
.sim-header h1 { font-size: var(--text-3xl); margin-bottom: var(--space-sm); }
.sim-header p { color: var(--color-text-muted); max-width: 600px; margin: 0 auto; }
.sim-back {
  display: inline-block; margin-bottom: var(--space-lg);
  color: var(--color-primary); font-size: var(--text-sm);
}

/* ── Steps ── */
.sim-steps { display: flex; flex-direction: column; gap: var(--space-xl); }
.sim-step {
  background: var(--color-surface); border-radius: var(--radius-lg);
  padding: var(--space-xl); box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}
.sim-step.active { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.sim-step h2 {
  font-size: var(--text-xl); margin-bottom: var(--space-md);
  display: flex; align-items: center; gap: var(--space-sm);
}
.sim-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-full);
  background: var(--color-primary); color: var(--color-white);
  font-size: var(--text-sm); font-weight: 600; flex-shrink: 0;
}
.sim-step p { color: var(--color-text-muted); margin-bottom: var(--space-md); }

/* ── Form Elements ── */
.sim-textarea {
  width: 100%; min-height: 100px; padding: var(--space-md);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6;
  resize: vertical;
}
.sim-textarea:focus { outline: none; border-color: var(--color-primary); }
.sim-select {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-size: var(--text-base); background: var(--color-white);
}
.sim-btn {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-primary); color: var(--color-white);
  border-radius: var(--radius-full); font-weight: 500;
  transition: all var(--transition-base);
}
.sim-btn:hover { background: #3367d6; transform: translateY(-1px); }
.sim-btn--secondary {
  background: var(--color-gray-100); color: var(--color-text);
}
.sim-btn--secondary:hover { background: var(--color-gray-300); }

/* ── Tags / Chips ── */
.sim-tags { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.sim-tag {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-gray-100); border-radius: var(--radius-full);
  font-size: var(--text-sm); color: var(--color-text);
}
.sim-tag--blue { background: #e8f0fe; color: #1967d2; }
.sim-tag--green { background: #e6f4ea; color: #137333; }
.sim-tag--yellow { background: #fef7e0; color: #ea8600; }
.sim-tag--red { background: #fce8e6; color: #c5221f; }

/* ── Result / Output ── */
.sim-result {
  background: var(--color-gray-50); border-radius: var(--radius-md);
  padding: var(--space-lg); margin-top: var(--space-lg);
  border: 1px solid var(--color-border);
}
.sim-result h3 { font-size: var(--text-lg); margin-bottom: var(--space-md); color: var(--color-primary); }

/* ── Meter / Progress ── */
.sim-meter-track {
  height: 8px; background: var(--color-gray-100);
  border-radius: var(--radius-full); overflow: hidden; margin: var(--space-sm) 0;
}
.sim-meter-fill {
  height: 100%; border-radius: var(--radius-full);
  background: var(--color-primary);
  transition: width var(--transition-slow);
}
.sim-meter-label {
  display: flex; justify-content: space-between;
  font-size: var(--text-sm); color: var(--color-text-muted);
}

/* ── Grid for simulator content ── */
.sim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-md);
}
.sim-grid-item {
  padding: var(--space-md); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}
.sim-grid-item:hover { border-color: var(--color-primary); }
.sim-grid-item h4 { font-size: var(--text-base); margin-bottom: var(--space-xs); }
.sim-grid-item p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ── Responsive ── */
@media (max-width: 640px) {
  .sim-layout { padding: var(--space-lg) var(--space-md); }
  .sim-grid { grid-template-columns: 1fr; }
}