/* ============ SHARED STYLES ============ */

/* 响应式根字号：仅根据视口宽度平滑缩放文字大小（最小 15px / 最大 17px）。
   字体族、字重等其它样式在各设备保持一致，不随设备变化。
   Tailwind 的 text-* 类基于 rem，会随根字号等比缩放，从而在每个手机上都有合适的显示效果。 */
html {
  font-size: clamp(15px, 4.1vw, 17px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.fade-in {
  animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.slide-in {
  animation: slideIn 0.4s ease-out;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.option-btn {
  transition: all 0.2s ease;
}
.option-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
}
.option-btn:active {
  transform: translateY(0);
}
.gradient-bg {
  background: linear-gradient(180deg, #fdf4ff 0%, #f5f3ff 30%, #eef2ff 70%, #e0e7ff 100%);
}
.start-btn {
  background: linear-gradient(135deg, #f9a8d4 0%, #c084fc 50%, #818cf8 100%);
  box-shadow: 0 10px 40px rgba(192, 132, 252, 0.4);
  transition: all 0.3s ease;
}
.start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 50px rgba(192, 132, 252, 0.5);
}
.start-btn:active {
  transform: translateY(0);
}
.progress-bar {
  transition: width 0.4s ease;
}
.dimension-bar {
  transition: width 0.8s ease-out;
}
.scroll-container::-webkit-scrollbar {
  display: none;
}
.scroll-container {
  scrollbar-width: none;
}
@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.7; }
  50% { transform: scale(1.05); opacity: 0.3; }
  100% { transform: scale(0.95); opacity: 0.7; }
}
.pulse-ring {
  animation: pulse-ring 2s ease-in-out infinite;
}
.lazy-option, .eager-option {
  transition: all 0.25s ease;
}
.lazy-option:hover, .eager-option:hover {
  transform: translateY(-1px);
}
.likert-circle {
  transition: all 0.25s ease;
  cursor: pointer;
}
.likert-circle:hover {
  transform: scale(1.05);
}
.likert-circle:active {
  transform: scale(0.95);
}
.likert-label {
  font-size: 0.625rem;
  text-align: center;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.progress-text {
  animation: fadeIn 0.3s ease;
}
#questionContent, #questionContent h2 {
  transition: opacity 0.15s ease;
}