/* PULSO PHASE 13 — UNIFIED UI SKIN
   Makes new contextual/pro panels visually match the older Pulso interface.
   This is style-only. No engines, canvas, Hydra, uploads or clips are touched.
*/

:root {
  --pulso-ui-bg: rgba(7, 8, 16, .78);
  --pulso-ui-bg-soft: rgba(255,255,255,.055);
  --pulso-ui-bg-hover: rgba(255,255,255,.105);
  --pulso-ui-border: rgba(255,255,255,.13);
  --pulso-ui-border-strong: rgba(210,180,255,.32);
  --pulso-ui-text: #B388FF;
  --pulso-ui-muted: rgba(245,241,255,.62);
  --pulso-ui-accent: rgba(180, 140, 255, .26);
  --pulso-ui-radius: 18px;
  --pulso-ui-radius-small: 12px;
  --pulso-ui-shadow: 0 18px 80px rgba(0,0,0,.42);
  --pulso-ui-blur: blur(18px);
  --pulso-ui-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* All Pulso floating control panels */
section[id^="pulso-"][id$="-panel"],
#pulso-performance-system,
#pulso-clip-controls-fix-panel {
  background: var(--pulso-ui-bg) !important;
  border: 1px solid var(--pulso-ui-border) !important;
  border-radius: var(--pulso-ui-radius) !important;
  color: var(--pulso-ui-text) !important;
  font-family: var(--pulso-ui-font) !important;
  box-shadow: var(--pulso-ui-shadow) !important;
  backdrop-filter: var(--pulso-ui-blur) !important;
  -webkit-backdrop-filter: var(--pulso-ui-blur) !important;
}

/* Panel titles */
section[id^="pulso-"][id$="-panel"] h3,
#pulso-performance-system h3,
#pulso-clip-controls-fix-panel h3 {
  margin: 0 0 8px !important;
  font-size: 13px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  opacity: .76 !important;
  font-weight: 650 !important;
  color: var(--pulso-ui-text) !important;
}

/* Subtitles */
section[id^="pulso-"][id$="-panel"] h4,
#pulso-performance-system h4,
#pulso-clip-controls-fix-panel h4 {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  opacity: .58 !important;
  margin: 12px 0 6px !important;
}

/* Buttons */
section[id^="pulso-"][id$="-panel"] button,
#pulso-performance-system button,
#pulso-clip-controls-fix-panel button,
#pulso-context-dock button,
#pulso-radial-menu button {
  border: 1px solid var(--pulso-ui-border) !important;
  background: var(--pulso-ui-bg-soft) !important;
  color: var(--pulso-ui-text) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-family: var(--pulso-ui-font) !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
}

section[id^="pulso-"][id$="-panel"] button:hover,
#pulso-performance-system button:hover,
#pulso-clip-controls-fix-panel button:hover,
#pulso-context-dock button:hover,
#pulso-context-dock button.active,
#pulso-radial-menu button:hover {
  background: var(--pulso-ui-accent) !important;
  border-color: var(--pulso-ui-border-strong) !important;
}

/* Inputs */
section[id^="pulso-"][id$="-panel"] input[type="range"],
#pulso-performance-system input[type="range"],
#pulso-clip-controls-fix-panel input[type="range"] {
  accent-color: rgb(190, 155, 255);
  width: 100% !important;
  touch-action: none;
}

section[id^="pulso-"][id$="-panel"] input[type="number"],
#pulso-performance-system input[type="number"],
#pulso-clip-controls-fix-panel input[type="number"],
section[id^="pulso-"][id$="-panel"] select,
#pulso-performance-system select,
#pulso-clip-controls-fix-panel select {
  background: rgba(255,255,255,.07) !important;
  color: var(--pulso-ui-text) !important;
  border: 1px solid var(--pulso-ui-border) !important;
  border-radius: 10px !important;
  padding: 4px 7px !important;
}

/* Rows and text */
section[id^="pulso-"][id$="-panel"] .row,
section[id^="pulso-"][id$="-panel"] .pulso-row,
#pulso-performance-system .row,
#pulso-clip-controls-fix-panel .pulso-row {
  color: var(--pulso-ui-text) !important;
  opacity: .88 !important;
  font-size: 12px !important;
}

section[id^="pulso-"][id$="-panel"] .status,
section[id^="pulso-"][id$="-panel"] .pulso-status,
#pulso-performance-system .status,
#pulso-performance-system .pulso-status,
#pulso-clip-controls-fix-panel .pulso-status {
  color: var(--pulso-ui-muted) !important;
  font-size: 11px !important;
  opacity: .68 !important;
}

/* Context dock unified with old UI */
#pulso-context-dock {
  background: rgba(7, 8, 16, .82) !important;
  border: 1px solid var(--pulso-ui-border) !important;
  border-radius: 999px !important;
  color: var(--pulso-ui-text) !important;
  font-family: var(--pulso-ui-font) !important;
  box-shadow: 0 12px 50px rgba(0,0,0,.38) !important;
  backdrop-filter: var(--pulso-ui-blur) !important;
  -webkit-backdrop-filter: var(--pulso-ui-blur) !important;
}

/* Radial menu same skin */
#pulso-radial-menu button {
  background: rgba(7, 8, 16, .88) !important;
  border-color: var(--pulso-ui-border) !important;
}

/* Make new large panels less visually heavy */
#pulso-spatial-compositor-panel,
#pulso-camera-space-coupling-panel,
#pulso-true-feedback-panel,
#pulso-organic-topology-panel,
#pulso-particle-pro-panel,
#pulso-atmosphere-panel,
#pulso-camera-brain-panel {
  max-width: min(390px, calc(100vw - 36px)) !important;
}

/* Special: compositor can be wide but should still look like same family */
#pulso-spatial-compositor-panel {
  max-width: min(720px, calc(100vw - 36px)) !important;
}

/* Consistent hidden state */
.pulso-ui-hidden {
  display: none !important;
}