/*
 * 必修一模拟页面统一控件样式
 * 仅统一视觉，不设置控件宽度、flex 或页面布局。
 */
:root {
  --b1-control-blue: #0d47a1;
  --b1-control-blue-soft: #e8f0fe;
  --b1-control-text: #475569;
  --b1-control-border: #dbe3ee;
  --b1-control-track: #dfe5ec;
}

button:not(.preset-btn):not(.toggle-btn) {
  min-height: 34px;
  padding: 7px 14px !important;
  border: 1px solid var(--b1-control-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--b1-control-text) !important;
  font: 500 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, transform .1s ease, box-shadow .18s ease;
}

button:not(.preset-btn):not(.toggle-btn):hover {
  border-color: #b8c5d6 !important;
  background: #f8fafc !important;
  color: #1e293b !important;
}

button:not(.preset-btn):not(.toggle-btn):active {
  transform: scale(.98);
}

button.active:not(.preset-btn),
button[aria-pressed="true"]:not(.preset-btn),
.btn.primary,
.btn-ok {
  border-color: #b8cdf6 !important;
  background: var(--b1-control-blue-soft) !important;
  color: var(--b1-control-blue) !important;
}

.btn-danger {
  border-color: #fecaca !important;
  background: #fff7f7 !important;
  color: #b91c1c !important;
}

.btn-warn {
  border-color: #fde68a !important;
  background: #fffbeb !important;
  color: #92400e !important;
}

button:focus-visible,
input[type="range"]:focus-visible {
  outline: 2px solid rgba(13, 71, 161, .32);
  outline-offset: 2px;
}

input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--b1-control-track) !important;
  box-shadow: none !important;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: -5px !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: var(--b1-control-blue) !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .28) !important;
}

input[type="range"]::-moz-range-track {
  height: 6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--b1-control-track) !important;
  box-shadow: none !important;
}

input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(13, 71, 161, .38);
}

input[type="range"]::-moz-range-thumb {
  width: 12px !important;
  height: 12px !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: var(--b1-control-blue) !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .28) !important;
}

input[type="range"]:disabled {
  cursor: not-allowed;
  opacity: .5;
}