.drawing-toolbar {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  min-width: 0;
  padding: 7px 12px 5px;
  border-bottom: 1px solid var(--line, #e2e8f0);
  background: #f8faff;
  color: #334155;
  font-size: 10px;
  font-weight: 600;
}
.drawing-tools, .drawing-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.drawing-toolbar button, .drawing-toolbar select, .drawing-color-label {
  box-sizing: border-box;
  height: 25px;
  min-width: 26px;
  margin: 0;
  padding: 0 6px;
  border: 1px solid #d8e1ee;
  border-radius: 4px;
  background: #fff;
  color: #475569;
  font: inherit;
  cursor: pointer;
}
.drawing-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 15px;
  line-height: 1;
}
.drawing-toolbar button span { font-size: 10px; white-space: nowrap; }
.drawing-toolbar button:hover:enabled, .drawing-toolbar select:hover:enabled { border-color: #88a8f4; background: #eff5ff; }
.drawing-toolbar button.active { color: #1e40af; border-color: #93b4ff; background: #e6efff; }
.drawing-toolbar button:focus-visible, .drawing-toolbar select:focus-visible, .drawing-toolbar input:focus-visible { outline: 2px solid #2962ff; outline-offset: 2px; }
.drawing-toolbar button:disabled, .drawing-toolbar select:disabled, .drawing-toolbar input:disabled { opacity: .4; cursor: default; }
.drawing-toolbar [data-drawing-action="clear"] { font-size: 10px; }
.drawing-color-label { display: flex; align-items: center; width: 29px; padding: 3px; }
.drawing-color-label input { width: 21px; height: 19px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.drawing-color-label input::-webkit-color-swatch-wrapper { padding: 0; }
.drawing-color-label input::-webkit-color-swatch { border: 0; border-radius: 2px; }
#drawingWidth { width: 48px; padding: 0 2px; font-size: 10px; }
.drawing-feedback { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; width: 100%; min-width: 0; line-height: 1.5; }
#drawingHint { min-width: 0; color: #536781; font-size: 10px; overflow-wrap: anywhere; }
.drawing-toolbar #drawingSaveStatus { flex: 0 0 auto; min-width: 0; height: auto; padding: 0; border: 0; background: transparent; color: #64806e; font-size: 9px; line-height: 1.5; white-space: nowrap; }
.drawing-toolbar #drawingSaveStatus[data-state="pending"] { color: #64748b; }
.drawing-toolbar #drawingSaveStatus[data-state="error"] { color: #c33142; text-decoration: underline; text-underline-offset: 2px; }
.drawing-overlay { position: absolute; z-index: 2; top: 0; left: 0; overflow: hidden; pointer-events: none; user-select: none; touch-action: none; }
.drawing-overlay .drawing-hit { pointer-events: stroke; cursor: move; }
.drawing-overlay .drawing-handle { pointer-events: all; cursor: grab; }
.drawing-overlay .locked .drawing-hit, .drawing-overlay .locked .drawing-handle { cursor: pointer; }
.drawing-overlay .draft { pointer-events: none; opacity: .85; }
.drawing-overlay .draft .drawing-handle { pointer-events: none; }
.drawing-overlay .selected .drawing-visible { filter: drop-shadow(0 0 1px rgba(41, 98, 255, .25)); }
.drawing-label { font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.chart-container.drawing-tool-active, .chart-container.drawing-tool-active .drawing-hit { cursor: crosshair; }
.chart-container.drawing-tool-active canvas { cursor: crosshair !important; }
.chart-container.drawing-dragging, .chart-container.drawing-dragging .drawing-hit, .chart-container.drawing-dragging .drawing-handle { cursor: grabbing; }
.chart-container.drawing-dragging canvas { cursor: grabbing !important; }
.chart-container:focus { outline: none; }
@media (max-width: 480px) {
  .drawing-toolbar { padding-right: 7px; padding-left: 7px; gap: 4px; }
  .drawing-tools { width: 100%; gap: 3px; }
  .drawing-tools button { padding: 0 5px; gap: 3px; }
  .drawing-tools button span { font-size: 9px; }
  .drawing-settings { gap: 4px; }
  #drawingHint { font-size: 9px; }
}