/* Glass is reserved for the control layer; plots stay solid and quiet. */
.workspace-colors {
  position: fixed; z-index: 10000; width: min(376px, calc(100vw - 24px));
  display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
  color: var(--workspace-ink); font: 13px/1.5 Inter, system-ui, sans-serif;
  background: var(--workspace-glass); border: 0;
  border-radius: 22px; backdrop-filter: blur(32px) saturate(135%); -webkit-backdrop-filter: blur(28px) saturate(135%);
  box-shadow: 0 18px 52px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.48), inset 0 -1px 0 rgba(255,255,255,.12);
  isolation: isolate;
}
.workspace-colors *, .workspace-colors *::before, .workspace-colors *::after {box-sizing: border-box;}
.workspace-colors button, .workspace-colors input { font: inherit; color: inherit; }
.workspace-colors button {cursor: pointer;}
.workspace-colors button:focus-visible, .workspace-colors input:focus-visible {outline: 0; background-color: var(--surface-active);}
.workspace-colors-head {display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 14px; flex-shrink: 0; background: transparent; height: auto; border: 0;}
.workspace-colors h2 {font-size: 17px; font-weight: 600; margin: 0; letter-spacing: -.3px;}
.workspace-colors h3 {font-size: 13px; font-weight: 600; margin: 0 0 12px;}
.workspace-colors-head p {font-size: 12px; margin: 3px 0 0; opacity: .8;}
.workspace-colors-head button {display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent;}
.workspace-colors-head button:hover {background: var(--surface-hover);}
.workspace-colors-head button:focus-visible {background: var(--surface-active);}
.workspace-colors-head svg {width: 18px; height: 18px;}
.workspace-colors-scroll {padding: 4px 20px 18px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; scrollbar-width: none;}
.workspace-colors-scroll::-webkit-scrollbar {display: none;}
.workspace-palettes {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.workspace-palettes button {position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px; border: 0; border-radius: 11px; background: transparent; text-align: left;}
.workspace-palettes button:hover {background: var(--surface-hover);}
.workspace-palettes button[aria-pressed="true"] {background: var(--surface-active);}
.workspace-pair {display: inline-flex; align-items: center; flex-shrink: 0; width: 49px; height: 34px;}
.workspace-pair i {display: block; width: 30px; height: 30px; border: 0; border-radius: 50%; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,.12);}
.workspace-pair i + i {margin-left: -11px;}
.workspace-palettes button {padding: 9px 8px;}
.workspace-colors::before {content: ""; position: absolute; pointer-events: none; inset: 0; z-index: -1; background: linear-gradient(130deg, rgba(255,255,255,.09), transparent 42%); border-radius: inherit;}
.workspace-palettes button > span:last-child {font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.workspace-palettes button[aria-pressed="true"] > span:last-child {font-weight: 600;}
.workspace-palettes button:focus-visible > span:last-child {text-decoration: underline; text-underline-offset: 3px;}
.workspace-editor {margin-top: 22px; padding-top: 18px;}
.workspace-fields {display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px;}
.workspace-fields label {display: block; min-width: 0;}
.workspace-fields label > span {display: block; font-size: 11px; margin-bottom: 5px;}
.workspace-color-field {display: flex; gap: 7px; align-items: center; height: 36px; border: 0; border-radius: 8px; padding: 4px 7px; background: var(--surface-hover);}
.workspace-color-field:focus-within {background: var(--surface-active);}
.workspace-color-field input[type="color"] {width: 24px; height: 24px; flex-shrink: 0; padding: 0; border: 0; background: transparent; cursor: pointer;}
.workspace-color-field input[type="color"]::-webkit-color-swatch-wrapper {padding: 2px;}
.workspace-color-field input[type="color"]::-webkit-color-swatch {border: 0; border-radius: 5px;}
.workspace-color-field input[type="text"] {min-width: 0; width: 100%; border: 0; padding: 0; outline: 0; background: transparent; font-size: 11px; letter-spacing: .25px;}
.workspace-finishes {border: 0; padding: 0; margin: 18px 0; display: flex; gap: 4px;}
.workspace-finishes legend {padding: 0; margin-bottom: 7px; font-size: 11px;}
.workspace-finishes button {flex: 1; border: 0; background: transparent; border-radius: 7px; padding: 6px 4px; font-size: 12px;}
.workspace-finishes button:hover {background: var(--surface-hover);}
.workspace-finishes button[aria-pressed="true"] {background: var(--surface-active); font-weight: 600;}
.workspace-finishes button:focus-visible {background: var(--surface-active); text-decoration: underline; text-underline-offset: 3px;}
.workspace-save {display: flex; gap: 8px;}
.workspace-save input {min-width: 0; flex: 1; border: 0; padding: 7px 10px; border-radius: 8px; background: var(--surface-hover); font-size: 12px;}
.workspace-save input::placeholder {color: inherit; opacity: .65;}
.workspace-save button {border: 0; border-radius: 8px; background: var(--workspace-ink); color: var(--workspace-surface); padding: 7px 12px; font-size: 12px;}
.workspace-save button:focus-visible {text-decoration: underline; text-underline-offset: 3px;}
.workspace-editor-actions {display: flex; justify-content: space-between; gap: 8px; margin-top: 12px;}
.workspace-editor-actions button {border: 0; background: transparent; font-size: 11px; padding: 2px 0; text-decoration: underline; text-underline-offset: 3px;}
.workspace-editor-actions button:focus-visible {background: var(--surface-active); border-radius: 3px;}
.workspace-editor-actions [hidden] {display: none;}
.workspace-colors footer {margin: 0; padding: 11px 20px; border: 0; font-size: 11px; background: var(--workspace-glass-strong); flex-shrink: 0;}
/* Widget finishes sit below chart canvases and text; chrome stays solid. */
html[data-workspace-palette] .top-header {color: var(--workspace-chrome-ink); --text-primary: var(--workspace-chrome-ink); --text-secondary: var(--workspace-chrome-ink); --text-tertiary: var(--workspace-chrome-ink);}
html[data-workspace-palette] .sidebar-shell {
  background-color: var(--workspace-chrome); color: var(--workspace-chrome-ink);
  --text-primary: var(--workspace-chrome-ink); --text-secondary: var(--workspace-chrome-ink); --text-tertiary: var(--workspace-chrome-ink);
}
html[data-workspace-finish] :is(.dk-host, #chart, .sub-canvas, .comparison-view) {background-color: var(--workspace-surface); background-image: var(--workspace-finish-image);}
html[data-workspace-finish] [data-workspace-widget] {background-image: var(--workspace-finish-image) !important;}
.workspace-candle-colors {margin-top: 15px;}
.workspace-candle-colors summary {font-size: 12px; cursor: pointer; padding: 3px 0; border-radius: 4px;}
.workspace-candle-colors summary:focus-visible {outline: 0; background: var(--surface-active);}
.workspace-candle-colors[open] summary {margin-bottom: 9px;}
@supports not (backdrop-filter: blur(1px)) {.workspace-colors {background: var(--workspace-surface);}}
@media (prefers-reduced-transparency: reduce) {.workspace-colors {backdrop-filter: none; background: var(--workspace-surface);}}
@media (max-width: 440px) {.workspace-colors-head {padding-top: 16px;} .workspace-pair {width: 43px;} .workspace-pair i {width: 27px; height: 27px;} .workspace-palettes button {gap: 7px;}}

html[data-workspace-palette] body > header {
  background-color: var(--workspace-chrome); color: var(--workspace-chrome-ink);
  --foreground: var(--workspace-chrome-ink); --muted-foreground: var(--workspace-chrome-ink);
}
html[data-workspace-palette] :is(.rail, .dk-head, .widget-head) {background-color: var(--workspace-surface);}

/* Floating menus read against their own surface, including mixed custom pairs. */
html[data-workspace-palette] .glass-menu {color: var(--workspace-ink); --text-primary: var(--workspace-ink); --text-secondary: var(--workspace-ink); --text-tertiary: var(--workspace-ink);}
html[data-workspace-palette] #acctMenu {color: var(--workspace-ink); --foreground: var(--workspace-ink); --muted-foreground: var(--workspace-ink);}