/* ===== BLE 调试工具页面样式 ===== */

/* 电源开关 */
.power-row {
  display: flex; align-items: center; justify-content: space-between;
}
.toggle {
  position: relative; width: 56px; height: 30px;
  background: #d4cfc6; border-radius: 15px; cursor: pointer;
  transition: background 0.3s;
}
.toggle.on { background: var(--success); }
.toggle .knob {
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; transition: left 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.toggle.on .knob { left: 29px; }
/* 颜色选择器 */
.color-picker-area {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.picker-canvas-wrap {
  position: relative; width: 280px; height: 280px;
}
#wheelCanvas {
  width: 280px; height: 280px; border-radius: 50%;
  cursor: crosshair; box-shadow: 0 2px 12px rgba(60, 48, 30, 0.08);
}
#wheelMarker {
  position: absolute; width: 16px; height: 16px;
  border: 2px solid #fff; border-radius: 50%;
  pointer-events: none; transform: translate(-50%, -50%);
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
.brightness-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  max-width: 320px;
}
.brightness-row label { width: 32px; text-align: right; font-size: 0.9em; }
.brightness-row .val { width: 36px; text-align: center; font-size: 0.9em; }
.color-preview {
  width: 60px; height: 60px; border-radius: 50%;
  border: 3px solid var(--card-border); margin-top: 4px;
  box-shadow: var(--shadow);
}
.hsv-info { font-size: 0.85em; color: var(--text-dim); text-align: center; }
/* 灯效网格 */
.fx-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.fx-btn {
  padding: 10px 8px; background: var(--bg-warm); color: var(--text);
  border-radius: 10px; text-align: center; font-size: 0.82em;
  cursor: pointer; transition: all 0.2s; border: 2px solid transparent;
}
.fx-btn:hover { border-color: var(--accent-light); background: #fff; }
.fx-btn.active { border-color: var(--accent); background: var(--accent-light); }
.fx-btn .fx-id { font-size: 0.75em; color: var(--text-dim); }
/* 参数行 */
.param-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.param-row label { width: 60px; font-size: 0.9em; text-align: right; color: var(--text-mid); }
.param-row .val { width: 36px; text-align: center; font-size: 0.9em; }
.param-desc {
  font-size: 0.8em; color: var(--text-dim); margin-top: 4px;
  padding: 8px; background: var(--bg-warm); border-radius: 8px;
  line-height: 1.5;
}
/* 按钮页面样式 */
#btnConnect { background: var(--accent); color: #fff; }
#btnConnect:hover { background: var(--accent-dark); }
#btnDisconnect { background: var(--text-dim); color: #fff; }
/* 时间灯效配置 */
.time-fx-status {
  background: var(--bg-warm); border-radius: 10px; padding: 12px;
  margin-bottom: 12px;
}
.status-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 0.9em; }
.status-row span:last-child { color: var(--accent-dark); font-weight: 600; }
.param-section { margin-bottom: 16px; }
.param-section h3 { font-size: 0.95em; margin-bottom: 10px; color: var(--text-dim); }
.time-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  flex-wrap: wrap;
}
.time-row label { width: 70px; font-size: 0.9em; color: var(--text-mid); }
.time-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }
.time-row .auto-label { font-size: 0.8em; color: var(--text-dim); min-width: 80px; }
.time-row input[type=time] {
  background: var(--bg-warm); border: 1px solid var(--card-border); border-radius: 8px;
  padding: 6px 10px; color: var(--text); font-size: 0.9em;
}
.time-row input[type=time]:disabled { opacity: 0.45; }
.save-btn {
  width: 100%; padding: 12px; background: var(--success); color: #fff;
  border: none; border-radius: 10px; font-size: 1em; font-weight: 600;
  cursor: pointer; margin-top: 8px;
}
.save-btn:hover { background: #6a9a5b; }
.save-btn:active { transform: scale(0.98); }
/* 灯效参数配置 */
.fx-config-desc {
  font-size: 0.85em; color: var(--text-dim); margin: 6px 0 14px; line-height: 1.5;
}
.fx-param-item { margin-bottom: 16px; }
.fx-param-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;
}
.fx-param-header label { font-size: 0.9em; }
.fx-param-val {
  font-size: 0.85em; font-weight: 600; color: var(--accent-dark);
  min-width: 60px; text-align: right;
}
.fx-slider-row {
  display: flex; align-items: center; gap: 8px;
}
.fx-slider-row input[type=range] { flex: 1; }
.range-hint {
  font-size: 0.72em; color: var(--text-dim); white-space: nowrap; min-width: 32px;
}
.range-hint:first-child { text-align: right; }
.range-hint:last-child { text-align: left; }
/* 调色板选择 */
.pal-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px;
}
.pal-swatch {
  cursor: pointer; border-radius: 10px; overflow: hidden;
  border: 2px solid transparent; transition: all 0.2s;
  text-align: center; background: var(--bg-warm);
}
.pal-swatch:hover { border-color: var(--accent-light); }
.pal-swatch.active { border-color: var(--accent); box-shadow: 0 0 8px rgba(201, 169, 110, 0.3); }
.pal-preview { height: 28px; border-radius: 8px 8px 0 0; }
.pal-swatch span {
  display: block; font-size: 0.78em; padding: 4px 0; color: var(--text-dim);
}
.pal-swatch.active span { color: var(--text); font-weight: 600; }
.fx-note {
  font-size: 0.82em; color: var(--text-dim); margin-top: 14px;
  padding: 10px 12px; background: var(--bg-warm); border-radius: 10px;
  border-left: 3px solid var(--accent); line-height: 1.5;
}
@media(max-width: 400px) {
  .picker-canvas-wrap, #wheelCanvas { width: 240px; height: 240px; }
  .pal-grid { grid-template-columns: repeat(2, 1fr); }
}