/* Native authority a558587a5a92379e4a3a04856b94924fcf7293e3:
   native/App/OmniTheme.swift blob4978b760a68d0029d0ba2f2d15796c7ad5326ddd.
   Paper/charcoal fallbacks match the native standard palette. Existing browser
   Theme variables remain authoritative when supplied by the host.
   OmniSprayCanvas.swift d0c2551e09247d30090ff30bb2430ce071b22369 names
   roles green/cyan/pink/yellow/gray. The sRGB role values below are desktop
   semantic mappings, not a claim of exact SwiftUI adaptive-color reproduction.
   Required via same-origin link, never an inline style/CSP exception. */
.native-spray,
.spray-editor,
.spray-problem-editor,
.spray-canvas-controls {
  --spray-background: var(--background, #131517);
  --spray-surface: var(--surface, #202326);
  --spray-inset: var(--inset, #292c30);
  --spray-selection: var(--selection, #3c424a);
  --spray-board: var(--board, #35332f);
  --spray-secondary: var(--secondary, #adb1b8);
  --spray-text: var(--text, #f0f1f3);
  --spray-start: #34c759;
  --spray-hand: #32ade6;
  --spray-finish: #ff2d55;
  --spray-foot: #ffcc00;
  --spray-excluded: #8e8e93;
  --spray-unconfirmed: #ff9500;
  color: var(--spray-text);
}
:root[data-appearance=light] .native-spray,
:root[data-appearance=light] .spray-editor,
:root[data-appearance=light] .spray-problem-editor,
:root[data-appearance=light] .spray-canvas-controls {
  --spray-background: var(--background, #f4f1eb);
  --spray-surface: var(--surface, #fbf8f3);
  --spray-inset: var(--inset, #ebe7e0);
  --spray-selection: var(--selection, #e1dbd2);
  --spray-board: var(--board, #dad3c8);
  --spray-secondary: var(--secondary, #6b685f);
  --spray-text: var(--text, #37352f);
}
.native-spray { display: grid; gap: 12px; max-width: 850px; margin: auto; }
.native-spray header,
.native-spray nav,
.native-spray .spray-row,
.spray-hold-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.native-spray section,
.native-spray article { display: grid; gap: 10px; padding: 14px; border-radius: 18px; margin: 10px 0; background: var(--spray-surface); }
.native-spray label,
.spray-editor label,
.spray-problem-editor label,
.spray-canvas-controls label { display: grid; gap: 6px; }
.native-spray input:not([type=checkbox]),
.native-spray select,
.native-spray textarea,
.spray-editor input:not([type=checkbox]),
.spray-problem-editor input:not([type=checkbox]),
.spray-canvas-controls input { min-width: 0; padding: 10px; border: 1px solid var(--spray-selection); border-radius: 12px; font: inherit; background: var(--spray-inset); color: var(--spray-text); }
.native-spray button,
.spray-editor button,
.spray-problem-editor button,
.spray-canvas-controls button { min-height: 44px; padding: 8px 14px; border: 0; border-radius: 14px; font: inherit; background: var(--spray-inset); color: var(--spray-text); cursor: pointer; }
.native-spray button:disabled,
.spray-editor button:disabled,
.spray-problem-editor button:disabled { cursor: default; opacity: .45; }
.native-spray button[aria-pressed=true],
.spray-editor button[aria-pressed=true],
.spray-problem-editor button[aria-pressed=true] { background: var(--spray-selection); }
.native-spray :is(button,input,select,textarea):focus-visible,
.spray-editor :is(button,input):focus-visible,
.spray-problem-editor :is(button,input):focus-visible,
.spray-canvas-controls :is(button,input):focus-visible { outline: 2px solid var(--spray-secondary); outline-offset: 3px; }
.native-spray p,
.spray-editor p,
.spray-problem-editor p,
.spray-canvas-controls p { color: var(--spray-secondary); line-height: 1.5; }
.native-spray img { max-width: 100%; max-height: 200px; object-fit: contain; }
.native-spray [role=status] { white-space: pre-wrap; }
.native-spray h2,
.native-spray h3 { margin: 0; }
.spray-canvas { display: block; width: 100%; height: auto; max-width: 780px; touch-action: none; background: var(--spray-board, var(--board, #35332f)); border-radius: 18px; }
.spray-canvas-controls { display: grid; gap: 10px; padding: 12px 0; }
.spray-hold { fill: none; stroke: var(--spray-unconfirmed, #ff9500); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.spray-hold[data-confirmed=true] { stroke: var(--spray-start, #34c759); stroke-opacity: .7; }
.spray-hold[data-editing=true] { fill: var(--spray-hand, #32ade6); fill-opacity: .3; }
.spray-hold[data-selected=true] { fill-opacity: .6; stroke-opacity: 1; }
.spray-hold[data-role=start] { fill: var(--spray-start, #34c759); stroke: var(--spray-start, #34c759); }
.spray-hold[data-role=hand] { fill: var(--spray-hand, #32ade6); stroke: var(--spray-hand, #32ade6); }
.spray-hold[data-role=finish] { fill: var(--spray-finish, #ff2d55); stroke: var(--spray-finish, #ff2d55); }
.spray-hold[data-role=foot] { fill: var(--spray-foot, #ffcc00); stroke: var(--spray-foot, #ffcc00); }
.spray-hold[data-role=excluded] { fill: var(--spray-excluded, #8e8e93); stroke: var(--spray-excluded, #8e8e93); }
.spray-sequence { fill: white; font-size: 24px; text-anchor: middle; }
.spray-outline-point { fill: var(--spray-hand, #32ade6); stroke: white; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.spray-outline-point:focus-visible { stroke: var(--spray-text, #f0f1f3); stroke-width: 3px; }