/* 左侧参数面板：配色控件、主题按钮、字号与间距分组 */

.panel {
  width: 260px;
  background: #fff;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 16px;
  flex-shrink: 0;
}
.panel h3 { font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; margin: 16px 0 8px; }
.panel h3:first-child { margin-top: 0; }

.param-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.param-label { font-size: 12px; color: #475569; }
.param-color { width: 32px; height: 24px; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; padding: 0; }
.param-range { width: 80px; height: 4px; accent-color: var(--primary); }
.param-value { font-size: 11px; color: #94a3b8; min-width: 28px; text-align: right; }
.param-select { font-size: 12px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px; }

/* 字号与间距分组：可手动填写数字 + 统一“确定”生效 */
.typo-group { border: 1px solid var(--border); border-radius: 8px; padding: 10px 10px 12px; background: #f8fafc; }
.typo-row { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.typo-row .param-label { flex-shrink: 0; width: 84px; }
.typo-row .typo-range { flex: 1; min-width: 0; width: auto; }
.param-number { width: 48px; font-size: 12px; padding: 2px 4px; border: 1px solid var(--border); border-radius: 4px; text-align: right; }
.param-unit { font-size: 11px; color: #94a3b8; width: 16px; flex-shrink: 0; }
.typo-confirm-row { margin-top: 4px; display: flex; gap: 8px; }
.typo-confirm-btn { flex: 1; padding: 7px 0; }
.typo-reset-btn { flex: 0 0 auto; padding: 7px 12px; }
.typo-dirty-hint { font-size: 11px; color: #f59e0b; margin: -4px 0 8px; display: none; }
.typo-dirty-hint.show { display: block; }

/* 主题选择 */
.theme-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.theme-btn { padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border); background: #fff; font-size: 11px; cursor: pointer; transition: all 0.2s; }
.theme-btn:hover { border-color: var(--primary); }
.theme-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }