/* ============================================================
   ORBIT CURVE LAB — Flow-style bezier editor, Orbit theme
   ============================================================ */

#app #panel-pro .curve-lab-card {
  --curve-accent: #22ff6f;
  --curve-accent-soft: rgba(34, 255, 111, 0.16);
  --curve-line: rgba(255, 255, 255, 0.1);
  --curve-line-strong: rgba(255, 255, 255, 0.2);
  --curve-bg: #0e1014;
  --curve-bg2: #14161c;
  --curve-text: #f3f4f6;
  --curve-dim: #848a98;
}

#app #panel-pro .curve-editor-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

#app #panel-pro .curve-canvas-wrapper {
  position: relative !important;
  width: 100% !important;
  height: 212px !important;
  /* A near-flat bed. The old wide radial glow washed the whole card green
     and fought the curve for attention; the graph should be the only
     bright thing in here. */
  background: linear-gradient(180deg, #0c1014 0%, #080b0f 100%) !important;
  border: 1px solid rgba(34, 255, 111, 0.14) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  /* The canvases repaint on every drag frame — keep that work off the
     rest of the panel's layout and paint. */
  contain: paint !important;
}

#app #panel-pro #flowCurveCanvas,
#app #panel-pro #flowCurveCanvasLast {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
}

#app #panel-pro #flowCurveCanvasLast { z-index: 1 !important; }
#app #panel-pro #flowCurveCanvas { z-index: 2 !important; }

/* The grips are drawn on the canvas; these are the drag targets that sit
   on top of them. Their left/top are written inline on every redraw, so
   they must NOT be declared here — an !important rule in the stylesheet
   beats an inline style and pins both handles to the top-left corner,
   which is exactly what stopped them being draggable. */
#app #panel-pro .curve-control-point {
  position: absolute !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: grab !important;
  z-index: 10 !important;
  touch-action: none !important;
}

/* A halo on hover so it is obvious the point can be grabbed. */
#app #panel-pro .curve-control-point:hover {
  background: radial-gradient(circle, rgba(91, 255, 160, 0.3), transparent 62%) !important;
}

#app #panel-pro .curve-control-point.is-dragging,
#app #panel-pro .curve-control-point:active {
  cursor: grabbing !important;
  background: radial-gradient(circle, rgba(91, 255, 160, 0.45), transparent 62%) !important;
}

/* While a handle is held, the canvas must not steal the pointer. */
#app #panel-pro .curve-canvas-wrapper.is-dragging { cursor: grabbing !important; }
#app #panel-pro .curve-canvas-wrapper.is-over-grip { cursor: grab !important; }

#app #panel-pro .curve-preview-dot {
  position: absolute !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 0 6px rgba(34, 255, 111, 0.65) !important;
  z-index: 11 !important;
  pointer-events: none !important;
}

#app #panel-pro .curve-controls {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#app #panel-pro .curve-values {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
}

#app #panel-pro .curve-value-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

#app #panel-pro .curve-value-row span {
  font: 600 8px/1 "Segoe UI", sans-serif !important;
  letter-spacing: 0.05em !important;
  color: var(--curve-dim) !important;
  text-transform: uppercase !important;
}

#app #panel-pro .curve-value-row input {
  width: 100% !important;
  height: 28px !important;
  padding: 0 6px !important;
  border: 1px solid var(--curve-line) !important;
  border-radius: 5px !important;
  background: var(--curve-bg2) !important;
  color: var(--curve-text) !important;
  font: 600 9px/1 "Segoe UI", sans-serif !important;
  text-align: center !important;
}

#app #panel-pro .curve-value-row input:focus {
  border-color: var(--curve-accent) !important;
  outline: none !important;
}

#app #panel-pro .curve-bezier-chip {
  width: 100% !important;
  height: 28px !important;
  border: 1px solid var(--curve-line) !important;
  border-radius: 5px !important;
  background: var(--curve-bg2) !important;
  color: var(--curve-text) !important;
  font: 700 9px/1 "Segoe UI", sans-serif !important;
  letter-spacing: 0.03em !important;
  cursor: pointer !important;
}

#app #panel-pro .curve-bezier-chip:hover {
  border-color: var(--curve-accent) !important;
  color: var(--curve-accent) !important;
}

#app #panel-pro .curve-direction-row {
  display: flex !important;
  gap: 4px !important;
  background: var(--curve-bg2) !important;
  border: 1px solid var(--curve-line) !important;
  border-radius: 6px !important;
  padding: 3px !important;
}

#app #panel-pro .curve-radio {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 4px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}

#app #panel-pro .curve-radio input { display: none !important; }

#app #panel-pro .curve-radio span {
  font: 700 8px/1 "Segoe UI", sans-serif !important;
  letter-spacing: 0.06em !important;
  color: var(--curve-dim) !important;
  text-transform: uppercase !important;
}

#app #panel-pro .curve-radio:has(input:checked) {
  background: var(--curve-accent-soft) !important;
}

#app #panel-pro .curve-radio:has(input:checked) span {
  color: var(--curve-accent) !important;
}

#app #panel-pro .curve-actions {
  display: flex !important;
  gap: 8px !important;
}

#app #panel-pro .curve-actions .tool-btn {
  flex: 1 1 auto !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

#app #panel-pro .curve-actions .tool-btn svg {
  width: 14px !important;
  height: 14px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.6 !important;
}

#app #panel-pro .curve-lab-card .tool-btn.wide {
  width: 100% !important;
  min-height: 36px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  background: linear-gradient(135deg, #22ff6f, #00e8b8) !important;
  color: #06120d !important;
  border: none !important;
}

#app #panel-pro .curve-preset-section {
  margin-top: 8px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--curve-line) !important;
}

#app #panel-pro .curve-preset-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}

#app #panel-pro .curve-preset-header select {
  flex: 1 1 auto !important;
  height: 28px !important;
  padding: 0 8px !important;
  border: 1px solid var(--curve-line) !important;
  border-radius: 5px !important;
  background: var(--curve-bg2) !important;
  color: var(--curve-text) !important;
  font: 600 8px/1 "Segoe UI", sans-serif !important;
}

#app #panel-pro .curve-lib-btn {
  width: 28px !important;
  height: 28px !important;
  border: 1px solid var(--curve-line) !important;
  border-radius: 5px !important;
  background: var(--curve-bg2) !important;
  color: var(--curve-text) !important;
  font: 700 14px/1 "Segoe UI", sans-serif !important;
  cursor: pointer !important;
}

#app #panel-pro .curve-lib-btn:hover {
  border-color: var(--curve-accent) !important;
  color: var(--curve-accent) !important;
}

#app #panel-pro .curve-preset-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
  gap: 6px !important;
  max-height: 220px !important;
  overflow-y: auto !important;
}

#app #panel-pro .curve-preset-item {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 4px 7px !important;
  border: 1px solid var(--curve-line) !important;
  border-radius: 6px !important;
  background: var(--curve-bg2) !important;
  color: var(--curve-dim) !important;
  cursor: pointer !important;
}

#app #panel-pro .curve-preset-mini {
  width: 100% !important;
  height: 22px !important;
  overflow: visible !important;
}

#app #panel-pro .curve-preset-mini path {
  fill: none !important;
  stroke: #9aa3b5 !important;
  stroke-width: 1.6 !important;
  stroke-linecap: round !important;
}

#app #panel-pro .curve-preset-item span {
  font: 600 7.5px/1.1 "Segoe UI", sans-serif !important;
  text-align: center !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app #panel-pro .curve-preset-item:hover,
#app #panel-pro .curve-preset-item.active {
  border-color: var(--curve-accent) !important;
  background: var(--curve-accent-soft) !important;
  color: var(--curve-text) !important;
}

#app #panel-pro .curve-preset-item:hover .curve-preset-mini path,
#app #panel-pro .curve-preset-item.active .curve-preset-mini path {
  stroke: var(--curve-accent) !important;
}

#app #panel-pro .curve-preset-del {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  width: 16px !important;
  height: 16px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #2a2f3a !important;
  color: #c5cad6 !important;
  font-size: 11px !important;
  display: none !important;
  cursor: pointer !important;
}

#app #panel-pro .curve-preset-item:hover .curve-preset-del { display: block !important; }

#app #panel-pro .curve-lib-empty {
  grid-column: 1 / -1 !important;
  padding: 12px 8px !important;
  text-align: center !important;
  color: var(--curve-dim) !important;
  font: 500 8px/1.4 "Segoe UI", sans-serif !important;
}

#app #panel-pro .curve-status {
  margin-top: 10px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--curve-line) !important;
  border-radius: 6px !important;
  background: var(--curve-bg2) !important;
  font: 500 8px/1.4 "Segoe UI", sans-serif !important;
  color: var(--curve-dim) !important;
  text-align: center !important;
}

#app #panel-pro .curve-status.is-error {
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
}

#app #panel-pro .curve-status.is-success {
  border-color: var(--curve-accent) !important;
  color: #bbf7d0 !important;
}

@media (max-width: 400px) {
  #app #panel-pro .curve-values {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ---- smoothness pass -------------------------------------------------
   The curve card repaints constantly while a handle is dragged. These keep
   that repaint local and stop the browser re-laying-out the preset grid
   and the status bar underneath it. */
#app #panel-pro .curve-lab-card { contain: layout style !important; }
#app #panel-pro .curve-preset-grid {
  contain: layout paint !important;
  scrollbar-width: thin !important;
}
#app #panel-pro .curve-preset-grid::-webkit-scrollbar { width: 7px !important; }
#app #panel-pro .curve-preset-grid::-webkit-scrollbar-track { background: #070a08 !important; }
#app #panel-pro .curve-preset-grid::-webkit-scrollbar-thumb {
  border: 2px solid #070a08 !important;
  border-radius: 8px !important;
  background: #29352d !important;
}
#app #panel-pro .curve-preset-item { transition: border-color 0.12s ease, background 0.12s ease !important; }

/* No transitions at all while dragging — they queue up behind every frame. */
#app #panel-pro .curve-canvas-wrapper.is-dragging ~ * { transition: none !important; }