/* Editor refinement v2. Shared by production and preview.
 * Surface/typography only: retain geometry, motion, accent tokens and states.
 */


/* Fixed editor chrome: quiet surfaces, without changing panel sizing. */
html body .studio,
html body .body-grid,
html body .right-panel {
  background: var(--ds-studio-editor-shell) !important;
}
html body .topbar {
  background: var(--ds-studio-editor-panel) !important;
  border-color: var(--ds-studio-editor-edge) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .20) !important;
}
html body .top-function-nav {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
html body :is(.layers-panel, .properties-panel, .ai-panel, .timeline, .left-drawer) {
  background: var(--ds-studio-editor-panel) !important;
  border-color: var(--ds-studio-editor-edge) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
html body :is(.section-head, .prop-head, .ai-head, .drawer-head, .timeline-toolbar, .layer-toolbar, .subsection) {
  border-color: var(--ds-studio-editor-divider) !important;
}
html body :is(.track-area, .track-canvas, .track-labels, .track-ruler) {
  border-color: var(--ds-studio-editor-divider) !important;
}

/* Floating glass is retained, with a restrained edge and a single soft shadow. */
html body :is(.view-controls, .display-modes, .viewport-toolbox, .north-compass) {
  background: rgba(17, 19, 21, .88) !important;
  border-color: rgba(224, 232, 240, .14) !important;
  box-shadow: var(--ds-studio-editor-shadow) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
html body :is(.view-controls, .display-modes, .viewport-toolbox) {
  border-radius: 9px !important;
}
html body :is(.account-menu, .floating-palette, .preview-simple-card),
html body > .hud-menu.hud-portal-open {
  background: var(--ds-studio-editor-panel) !important;
  border-color: rgba(224, 232, 240, .14) !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

/* Idle surfaces only. Hover, pressed, focused, selected and open visuals
 * continue to come from the existing stylesheet, including all yellow effects.
 */
html body :is(
  .drawer-item, .drawer-card, .drawer-pill, .asset-tab, .asset-library-card,
  .cloud-asset-card, .character-preset, .project-card, .mode-btn, .small-chip,
  .quality-btn, .viewport-tool, .ai-mode, .ai-chips button, .quick-actions button,
  .timeline-actions button, .head-actions button, .layer-toolbar button,
  .export-tools button, .transform-actions button, .shot-card, .shot-add,
  .top-actions .top-quiet, .account-menu button
):not(:is(.active, .creation-active, .camera-shot-add, [aria-pressed="true"], [aria-selected="true"], :hover, :active, :focus-within)) {
  background: rgba(255, 255, 255, .028) !important;
  border-color: var(--ds-studio-editor-edge) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
  color: var(--ds-studio-editor-text) !important;
}
/* Match the specificity of the historic ID-scoped property/creation rules. */
#propertiesPanel .quick-actions button:not(:is(.active, [aria-pressed="true"], [aria-selected="true"], :hover, :active, :focus-within)),
#createWorldBtn:not(:is(.creation-active, .active, :hover, :active, :focus-within)),
#createCharacterBtn:not(:is(.creation-active, .active, :hover, :active, :focus-within)),
#createCameraBtn:not(:is(.creation-active, .active, :hover, :active, :focus-within)) {
  background: rgba(255, 255, 255, .028) !important;
  border-color: var(--ds-studio-editor-edge) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
  color: var(--ds-studio-editor-text) !important;
}
html body .hud-dropdown:not(.open) > .hud-trigger:not(:is(:hover, :active, :focus-within)) {
  background: rgba(17, 19, 21, .92) !important;
  border-color: rgba(224, 232, 240, .14) !important;
  box-shadow: var(--ds-studio-editor-shadow) !important;
}
html body :is(.drawer-item, .drawer-card, .drawer-pill, .asset-tab, .character-preset,
  .mode-btn, .small-chip, .quality-btn, .viewport-tool, .hud-trigger,
  .quick-actions button, .timeline-actions button, .layer-toolbar button,
  .top-actions .top-quiet, .export-tools button) {
  border-radius: 7px !important;
}
html body :is(.asset-library-card, .cloud-asset-card, .project-card, .shot-card) {
  border-radius: 9px !important;
}

/* Inset fields are distinct from clickable cards. Keep original focus glow. */
html body .drawer-search:not(:focus-within),
html body .prop-row :is(input, select):not(:focus),
#propertiesPanel .axis-input:not(:focus-within) {
  background: var(--ds-studio-editor-field) !important;
  border-color: var(--ds-studio-editor-edge) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .10) !important;
  border-radius: 6px !important;
}
html body :is(.selection-summary, .rig-note) {
  background: rgba(255, 255, 255, .018) !important;
  border-color: var(--ds-studio-editor-divider) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}

/* Consistent type hierarchy, using the existing platform font and dimensions. */
html body :is(.drawer-head h2, .section-head h2, .prop-head h2, .ai-head h2),
#layersPanel #layerSectionTitle,
#propertiesPanel #propertyTitle {
  color: var(--ds-studio-editor-text) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  text-shadow: none !important;
}
html body :is(.drawer-head small, .section-head small, .prop-head small, .ai-head small) {
  color: var(--ds-studio-editor-muted) !important;
  text-shadow: none !important;
}
html body :is(.drawer-note, .rig-note span, .prop-empty, .drawer-item small,
  .drawer-card small, .asset-library-card small, .cloud-asset-card small) {
  font-size: 11px !important;
  line-height: 1.5 !important;
}
html body :is(.drawer-note, .rig-note span, .prop-empty) {
  color: var(--ds-studio-editor-secondary) !important;
}
html body :is(.prop-row > span, .prop-slider > span, .sub-title) {
  font-size: 12px !important;
  color: var(--ds-studio-editor-secondary) !important;
}
#propertiesPanel .sub-title { color: var(--ds-studio-editor-secondary) !important; }
html body :is(.prop-row input, .prop-slider output, .axis-input input) {
  font-variant-numeric: tabular-nums;
}
html body :is(.layer-row, .layer-folder-row):not(.active) > b {
  color: #cbd1d9 !important;
}
html body .ui-icon-tooltip {
  background: var(--ds-studio-editor-panel) !important;
  border-color: var(--ds-studio-editor-edge) !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22) !important;
}

/* Match the transparent 3D canvas backing to all editor panels/dialogs.
 * Only the backing changes: grid shader, scene lighting and shadows are intact.
 */
html, html body { background: var(--ds-studio-editor-shell) !important; }
html body :is(.main-workspace, .viewport, .viewport-scene) {
  background: var(--ds-studio-editor-panel) !important;
}
html body .viewport {
  border-color: var(--ds-studio-editor-edge) !important;
}