/* ========== 编辑器侧栏 ========== */
.editor-rail {
  position: fixed; top: 0; right: 0; bottom: 0; width: 320px;
  background: #fff; box-shadow: -4px 0 20px rgba(0,0,0,0.08);
  z-index: 200; display: flex; flex-direction: column;
  transition: transform .25s;
}
.editor-rail.hidden { transform: translateX(100%); }
.rail-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid #E5E7EB;
}
.rail-head h3 { font-size: 16px; font-weight: 700; }
.rail-tabs {
  display: flex; border-bottom: 1px solid #E5E7EB;
}
.rail-tab {
  flex: 1; padding: 12px; background: none; border: none;
  font-size: 13px; font-weight: 600; color: #6B7280;
  border-bottom: 2px solid transparent;
}
.rail-tab.active { color: #F07818; border-bottom-color: #F07818; }
.rail-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.rail-pane { display: none; flex-direction: column; gap: 14px; }
.rail-pane.active { display: flex; }
.muted { color: #9CA3AF; font-size: 13px; }
.rail-foot {
  padding: 14px 20px; border-top: 1px solid #E5E7EB;
}
.rail-foot button { width: 100%; }

.palette {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 8px;
}
.palette .swatch {
  width: 100%; aspect-ratio: 1; border-radius: 6px; cursor: pointer;
  border: 2px solid transparent; transition: transform .15s;
}
.palette .swatch:hover { transform: scale(1.1); border-color: #F07818; }