/* pro_ui.css — professional engineering-suite polish (COMSOL/ANSYS-style)
   Additive layer: refines the Car Studio panel + toolbar without touching the
   app's layout logic. Loaded after the inline styles so it wins on ties. */

/* ---- Car Studio panel: crisp, neutral, consistent ---- */
#carStudio .cs-row { display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px; margin: 3px 0; }
#carStudio .cs-row > label { flex: 0 0 100%; font-size: 10px; font-weight: 700;
  letter-spacing: 1.1px; text-transform: uppercase; color: #6a7382;
  margin: 7px 0 1px; }
#carStudio .cs-btn { display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px; font-size: 11.5px; font-weight: 500;
  color: #2a3342; background: linear-gradient(#ffffff, #f2f4f7);
  border: 1px solid #c6cdd6; border-radius: 4px; cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s; }
#carStudio .cs-btn:hover { border-color: #2461c2; background: #eef4fd;
  box-shadow: 0 0 0 1px rgba(36,97,194,.18); }
#carStudio .cs-btn:active { background: #dfeafc; }
#carStudio .cs-btn svg.pro-ic { width: 12px; height: 12px; flex: 0 0 12px;
  stroke: #4b5769; fill: none; stroke-width: 1.7; stroke-linecap: round;
  stroke-linejoin: round; }
#carStudio .cs-btn:hover svg.pro-ic { stroke: #2461c2; }
#carStudio .cs-cfd { background: linear-gradient(#ffffff, #eef7f0);
  border-color: #a9cdb4; }
#carStudio select, #carStudio input[type="text"], #carStudio textarea {
  border: 1px solid #c6cdd6; border-radius: 4px; font-size: 11.5px;
  padding: 3px 6px; background: #fff; color: #2a3342; }
#carStudio select:focus, #carStudio textarea:focus { outline: none;
  border-color: #2461c2; box-shadow: 0 0 0 2px rgba(36,97,194,.15); }

/* dark theme: keep the panel readable, not washed out */
:root:not(.light) #carStudio .cs-btn { background: linear-gradient(#242a33, #1d222a);
  border-color: #39414d; color: #cfd6e0; }
:root:not(.light) #carStudio .cs-btn:hover { background: #26313f;
  border-color: #3470c8; box-shadow: 0 0 0 1px rgba(52,112,200,.25); }
:root:not(.light) #carStudio .cs-btn svg.pro-ic { stroke: #97a3b4; }
:root:not(.light) #carStudio .cs-btn:hover svg.pro-ic { stroke: #6fa3e8; }
:root:not(.light) #carStudio .cs-cfd { background: linear-gradient(#20301f, #1a271a);
  border-color: #3b5e3b; }
:root:not(.light) #carStudio .cs-row > label { color: #8892a2; }
:root:not(.light) #carStudio select, :root:not(.light) #carStudio input[type="text"],
:root:not(.light) #carStudio textarea { background: #171c23; color: #cfd6e0;
  border-color: #39414d; }

/* ---- toolbar: uniform icon buttons ---- */
#toolbar button svg.pro-ic { width: 14px; height: 14px; flex: 0 0 14px;
  stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round;
  stroke-linejoin: round; opacity: .85; }
#toolbar button { letter-spacing: .1px; }

/* keep the two special-action buttons readable but consistent */
#gestureBtn, #disasmBtn { border-radius: 5px; }