export const panelRoot: React.CSSProperties = { gridColumn: "1 / -1", display: "flex", flexDirection: "column", gap: 14 };
export const label: React.CSSProperties = { font: "600 12px system-ui, sans-serif", color: "#555", marginBottom: 4 };
export const hint: React.CSSProperties = { font: "12px system-ui, sans-serif", color: "#888", marginTop: 4 };
export const title: React.CSSProperties = { font: "600 15px system-ui, sans-serif", color: "#222" };
export const backBtn: React.CSSProperties = {
  alignSelf: "flex-start",
  border: "none",
  background: "none",
  padding: 0,
  cursor: "pointer",
  font: "13px system-ui, sans-serif",
  color: "#555",
};
export const btn: React.CSSProperties = {
  height: 32,
  padding: "0 12px",
  border: "1px solid #c4c4c4",
  background: "#fff",
  borderRadius: 8,
  cursor: "pointer",
  font: "13px system-ui, sans-serif",
  color: "#222",
};
export const twoCol: React.CSSProperties = { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(96px, 1fr))", gap: 12 };