/**
 * Visteras Vector - Studio Companion Theme & Skin
 * Tailored for SVG-Edit 7.4.2 to match Visteras Studio pixel-perfect
 */

/* Clean, non-overlapping bundled static Roboto fonts for vector design & outline view */
@font-face {
  font-family: 'Roboto';
  font-weight: 300;
  font-style: normal;
  src: url('../lib/fonts/roboto-300.woff') format('woff');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: normal;
  src: url('../lib/fonts/roboto-400.woff') format('woff');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: italic;
  src: url('../lib/fonts/roboto-400-italic.woff') format('woff');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 700;
  font-style: normal;
  src: url('../lib/fonts/roboto-700.woff') format('woff');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 700;
  font-style: italic;
  src: url('../lib/fonts/roboto-700-italic.woff') format('woff');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 900;
  font-style: normal;
  src: url('../lib/fonts/roboto-900.woff') format('woff');
}

:root {
  --ui-font: "Segoe UI", "Helvetica Neue", Arial, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  
  /* Visteras Studio Theme Colors */
  --studio-header-bg: #333333;
  --studio-options-bg: #2d2d2d;
  --studio-toolbar-bg: #3c3c3c;
  --studio-panel-bg: #3c3c3c;
  --studio-workspace-bg: #606060;
  --studio-chassis-bg: #535353;
  --studio-border-dark: #1a1a1a;
  --studio-border-med: #2a2a2a;
  --studio-border-light: #505050;
  --studio-blue-active: #2a6bb5;
  --studio-orange: #fa7c1b;
  /* @visteras/ui accent hooks (packages/ui never hardcodes an accent) */
  --visteras-accent: var(--studio-orange);
  --visteras-accent-hover: #ff8f3a;
  --visteras-on-accent: #ffffff;
  /* @visteras/ui token overrides (packages/ui/src/tokens.css defaults otherwise) */
  --vui-tab-close-font-size: 11px;
  --studio-text: #cccccc;
  --studio-text-muted: #888888;
  
  /* SVG-Edit Theme Variable Overrides */
  --main-bg-color: #2d2d2d;
  --text-color: #cccccc;
  --border-color: #1a1a1a;
  --canvas-bg-color: #606060;
  --link-color: #4a9eff;
  --ruler-color: #333333;
  --icon-bg-color: #3c3c3c;
  --icon-bg-color-hover: #505050;
  --input-color: #242424;
  --orange-color: #fa7c1b;
  --top-toolbar-min-height: 45px;
}

/* App reset */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: var(--ui-font);
  background-color: var(--studio-chassis-bg);
  color: var(--studio-text);
  font-size: 11px;
  color-scheme: dark;
}

#visteras_app_container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: var(--studio-chassis-bg);
}

/* ==========================================================================
   1. Main Menu Bar (Top File Menu) - Styled exactly like Studio .main_menu
   ========================================================================== */

#visteras_menu_bar {
  height: var(--vui-menu-bar-height);
  min-height: var(--vui-menu-bar-height);
  background: var(--studio-header-bg);
  border-bottom: 1px solid #222222;
  display: flex;
  align-items: stretch;
  padding: 0 var(--vui-menu-bar-padding-x);
  z-index: 3000;
  box-sizing: border-box;
  user-select: none;
}

.menu_group {
  display: flex;
  align-items: stretch;
}

.menu_entry {
  position: relative;
  height: 100%;
  display: inline-flex;
  align-items: stretch;
}

.menu_entry_title {
  height: 100%;
  line-height: normal;
  padding: var(--vui-menu-title-padding);
  font-size: var(--vui-menu-font-size);
  font-weight: 400;
  font-family: var(--ui-font);
  color: #cccccc;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  display: flex;
  align-items: center;
  border-radius: 0;
  box-sizing: border-box;
}

.menu_entry_title:hover {
  background: #505050;
  color: #ffffff;
}

.menu_entry.open .menu_entry_title {
  background: var(--studio-blue-active);
  color: #ffffff;
}

.menu_dropdown_list {
  display: none;
  position: absolute;
  top: var(--vui-menu-bar-height);
  left: 0;
  background: #3c3c3c;
  border: 1px solid #505050;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  padding: var(--vui-menu-dropdown-padding);
  min-width: 180px;
  z-index: 3001;
}

.menu_entry.open > .menu_dropdown_list {
  display: block;
}

.menu_dropdown_item {
  font-size: var(--vui-menu-font-size);
  color: #cccccc;
  padding: var(--vui-menu-item-padding);
  line-height: var(--vui-menu-item-line-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.menu_dropdown_item:hover:not(.disabled) {
  background: var(--studio-blue-active);
  color: #ffffff;
}

.menu_dropdown_item.disabled {
  color: #666666;
  cursor: default;
}

.menu_dropdown_separator {
  border: none;
  border-top: 1px solid #505050;
  margin: var(--vui-menu-separator-margin);
  height: 0;
}

.menu_dropdown_shortcut {
  color: #888888;
  font-size: var(--vui-menu-shortcut-font-size);
  margin-left: var(--vui-menu-shortcut-gap);
}

.menu_dropdown_item:hover:not(.disabled) .menu_dropdown_shortcut {
  color: #ffffff;
}

.menu_right_controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.visteras_switch_btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  color: #aaaaaa;
  padding: 2px 8px;
  border-radius: 2px;
  background: #242424;
  border: 1px solid #383838;
  transition: all 0.15s;
}

.visteras_switch_btn:hover {
  background: #333333;
  color: #ffffff;
  border-color: #555555;
}

.visteras_switch_btn .visteras_badge {
  color: #CCCCCC;
  font-weight: 800;
}

/* ==========================================================================
   2. SVG-Edit Layout Overrides - Grid & Studio Gutters
   ========================================================================== */

#container {
  flex: 1;
  position: relative;
  overflow: hidden;
  width: 100% !important;
  height: calc(100vh - 28px) !important;
}

.svg_editor {
  display: grid !important;
  /* Row 1: 45px options bar
     Row 2: 16px ruler X
     Row 3: 1fr workspace
     Row 4: 24px status bar */
  grid-template-rows: 45px 16px 1fr 24px !important;
  /* Col 1: 36px left toolbar
     Col 2: 16px ruler Y
     Col 3: 1fr workspace
     Col 4: 36px dock
     Col 5: 240px right panel */
  grid-template-columns: 36px 16px 1fr 36px 240px !important;
  grid-template-areas:
    "top top top top top"
    "left corner rulerX dock side"
    "left rulerY workarea dock side"
    "bottom bottom bottom bottom bottom" !important;
  background: var(--studio-chassis-bg) !important;
  font-family: var(--ui-font) !important;
  color: var(--studio-text) !important;
  width: 100% !important;
  height: 100% !important;
}

/* Options Bar Top - Studio 45px height, #2d2d2d, 1px #1a1a1a border */
#tools_top {
  grid-area: top !important;
  height: 45px !important;
  min-height: 45px !important;
  max-height: 45px !important;
  background-color: var(--studio-options-bg) !important;
  border-bottom: 1px solid var(--studio-border-dark) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  padding: 0 8px 0 0 !important;
  z-index: 500 !important;
}

#tools_top::-webkit-scrollbar {
  display: none !important;
}

#tools_top > * {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  height: 100% !important;
  background-color: transparent !important;
}

/* Hide SVG-Edit default main button (handled cleanly by our top menu bar) */
#main_button {
  display: none !important;
}

/* Contextual tools have moved to #properties_panel in the right sidebar */
#tools_top .selected_panel,
#tools_top .xy_panel,
#tools_top .multiselected_panel,
#tools_top .rect_panel,
#tools_top .image_panel,
#tools_top .circle_panel,
#tools_top .ellipse_panel,
#tools_top .line_panel,
#tools_top .text_panel,
#tools_top .path_node_panel,
#tools_top .container_panel,
#tools_top .g_panel,
#tools_top .use_panel,
#tools_top .a_panel,
#tools_top #cur_context_panel {
  display: none !important;
}

/* #title_panel is hidden by visteras-svgedit-hygiene.css (document tabs own titles).
   Styles kept for any temporary pre-hygiene flash / updateTitle DOM writes. */
#title_panel {
  display: flex;
  align-items: center !important;
  height: 24px !important;
  padding: 0 10px !important;
  margin: 0 4px 0 8px !important;
  background-color: #242424 !important;
  border: 1px solid #383838 !important;
  border-radius: 2px !important;
}

#title_panel p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #a0a0a0 !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
}

/* Visteras Vector Logo in Options Bar */
.visteras_vector_logo_wrap {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 1px 8px;
  margin: 4px;
  font-size: 13px;
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 1px;
  gap: 8px;
  flex-shrink: 0;
  cursor: pointer;
}

.visteras_vector_logo_wrap img {
  height: 28px;
  width: auto;
  vertical-align: middle;
  flex-shrink: 0;
}

.visteras_vector_logo_wrap.logo-omarchy-active img,
.visteras_vector_logo_wrap img.logo-omarchy-active {
  filter: brightness(0) saturate(100%) invert(54%) sepia(74%) saturate(2333%) hue-rotate(345deg) brightness(101%) contrast(97%) !important;
}

.visteras_vector_logo_wrap .logo_text {
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

.visteras_vector_logo_wrap .logo_bold {
  font-weight: 700;
}

.visteras_vector_logo_wrap .logo_light {
  font-weight: 100;
  opacity: 0.6;
}

.visteras_top_divider {
  width: 1px;
  height: 22px;
  background: #3c3c3c;
  margin: 0 6px;
  flex-shrink: 0;
}

/* ==========================================================================
   3. Left Toolbar (Sidebar Left) - Styled like Studio .sidebar_left
   ========================================================================== */

#tools_left {
  grid-area: left !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 100% !important;
  background-color: var(--studio-toolbar-bg) !important;
  border-right: 1px solid var(--studio-border-dark) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 6px 0 !important;
  gap: 2px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  user-select: none !important;
  z-index: 100 !important;
}

/* Tool Buttons */
#tools_left > se-button,
#tools_left > se-flyingbutton,
#tools_left > div > se-button,
#tools_left > div > se-flyingbutton {
  margin: 1px auto !important;
  width: 28px !important;
  height: 28px !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  transition: background-color 0.12s, border-color 0.12s !important;
}

/* Tool button states — hover stays subtle; only pressed/active gets accent */
#tools_left se-button:hover,
#tools_left se-flyingbutton:hover {
  background-color: #505050 !important;
}

#tools_left se-button[pressed],
#tools_left se-flyingbutton[pressed],
#tools_left [pressed] {
  /* Match News/Publish active tool: left accent stroke + orange icon */
  background-color: #242424 !important;
  border: 1px solid #1a1a1a !important;
  border-left: 2px solid var(--studio-orange) !important; /* #fa7c1b */
  box-sizing: border-box !important;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.6) !important;
  border-radius: 2px !important;
}

#tools_left se-button[pressed]:hover,
#tools_left se-flyingbutton[pressed]:hover,
#tools_left [pressed]:hover {
  background-color: #1e1e1e !important;
}

#tools_left se-flyingbutton se-button {
  width: 100% !important;
  height: 28px !important;
  margin: 1px 0 !important;
  padding: 0 !important;
  display: block !important;
}


/* ==========================================================================
   4. Middle Workspace (Canvas & Rulers)
   ========================================================================== */

#workarea {
  grid-area: workarea !important;
  background-color: var(--studio-workspace-bg) !important;
  border: none !important;
  overflow: auto !important;
  position: relative !important;
  scrollbar-width: thin !important;
  scrollbar-color: #4f4f4f #1e1e1e !important;
}

/* Modern Workspace Scrollbars (Vertical & Horizontal) */
#workarea::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

#workarea::-webkit-scrollbar-track {
  background: #1e1e1e !important;
}

#workarea::-webkit-scrollbar-thumb {
  background-color: #4f4f4f !important;
  border-radius: 6px !important;
  border: 2px solid #1e1e1e !important;
  background-clip: padding-box !important;
  min-height: 24px !important;
  min-width: 24px !important;
  transition: background-color 0.15s ease !important;
}

#workarea::-webkit-scrollbar-thumb:hover {
  background-color: #6e6e6e !important;
}

#workarea::-webkit-scrollbar-thumb:active {
  background-color: #8e8e8e !important;
}

#workarea::-webkit-scrollbar-corner {
  background: #181818 !important;
}

#svgcanvas {
  background-color: transparent !important;
  box-shadow: none !important;
}

#canvasBackground rect {
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.5)) !important;
}

/* Outline / Wireframe Mode (Illustrator Parity: non-scaling hairline stroke on white workspace) */
#workarea.wireframe,
#workarea.wireframe #svgcanvas {
  background-color: #ffffff !important;
}

#workarea.wireframe #canvasBackground rect {
  fill: #ffffff !important;
  filter: none !important;
  stroke: #000000 !important;
  stroke-width: 1px !important;
  vector-effect: non-scaling-stroke !important;
}

#workarea.wireframe #svgcontent * {
  fill: none !important;
  stroke: #000000 !important;
  stroke-width: 0.75px !important;
  vector-effect: non-scaling-stroke !important;
  stroke-opacity: 1 !important;
  stroke-dasharray: none !important;
  opacity: 1 !important;
  pointer-events: stroke !important;
  filter: none !important;
}

/* Live text objects remain solid black filled in outline view matching Illustrator */
#workarea.wireframe #svgcontent text,
#workarea.wireframe #svgcontent text *,
#workarea.wireframe #svgcontent tspan {
  fill: #000000 !important;
  stroke: none !important;
  opacity: 1 !important;
}

/* Converted text outlines (shapes from "Create Outlines") render as hairline outlines */
#workarea.wireframe #svgcontent .visteras-text-outlines path,
#workarea.wireframe #svgcontent path.visteras-glyph {
  fill: none !important;
  stroke: #000000 !important;
  stroke-width: 0.75px !important;
  vector-effect: non-scaling-stroke !important;
}

#ruler_corner {
  grid-area: corner !important;
  background: #2b2b2b !important;
  border-right: 1px solid #222222 !important;
  border-bottom: 1px solid #222222 !important;
  width: 16px !important;
  height: 16px !important;
  box-sizing: border-box !important;
}

#ruler_x {
  grid-area: rulerX !important;
  background: #333333 !important;
  border-bottom: 1px solid #222222 !important;
  height: 16px !important;
  box-sizing: border-box !important;
}

#ruler_y {
  grid-area: rulerY !important;
  background: #333333 !important;
  border-right: 1px solid #222222 !important;
  width: 16px !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   5. Right Panel (Layers & Inspector) - Styled like Studio .sidebar_right
   ========================================================================== */

#sidepanels {
  grid-area: side !important;
  width: 240px !important;
  height: 100% !important;
  background-color: var(--studio-panel-bg) !important;
  border-left: 1px solid var(--studio-border-dark) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 50 !important;
}

#sidepanel_handle {
  display: none !important;
}

.svg_editor #sidepanel_content {
  display: block !important;
  padding: 0 !important;
}

/* ==========================================================================
   5a. Properties Panel (Contextual Inspector above Layers)
   ========================================================================== */

#properties_panel {
  width: 100% !important;
  background-color: var(--studio-panel-bg) !important;
  border-bottom: 1px solid var(--studio-border-dark) !important;
  box-sizing: border-box !important;
  user-select: none !important;
}

#properties_panel .sidebar_block_header,
#properties_panel .panel_tabs_header {
  height: 26px !important;
  min-height: 26px !important;
  background-color: #202020 !important;
  border-bottom: 1px solid #1a1a1a !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  cursor: default !important;
}

#properties_panel .panel_tabs {
  display: flex !important;
  align-items: stretch !important;
  height: 100% !important;
}

#properties_panel .panel_tab_btn {
  background: transparent !important;
  border: none !important;
  border-right: 1px solid #1c1c1c !important;
  border-bottom: 2px solid transparent !important;
  color: #8c8c8c !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 0 12px !important;
  cursor: pointer !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

#properties_panel .panel_tab_btn:hover {
  color: #e0e0e0 !important;
  background-color: #2b2b2b !important;
}

#properties_panel .panel_tab_btn.active,
#properties_panel .panel_tab_btn[aria-selected="true"] {
  color: #ffffff !important;
  background-color: #282828 !important;
  border-bottom-color: var(--studio-orange, #fa7c1b) !important;
}

#properties_panel .sidebar_block_arrow {
  display: none !important;
}

#properties_panel.collapsed #properties_content {
  display: none !important;
}

#properties_content {
  padding: 0 !important;
}

.prop_empty_state {
  padding: 20px 12px !important;
  text-align: center !important;
  color: #888888 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.prop_empty_state .prop_empty_icon {
  font-size: 16px !important;
  color: #666666 !important;
  margin-bottom: 6px !important;
}

.prop_empty_state .prop_empty_text {
  font-weight: 600 !important;
  color: #aaaaaa !important;
  margin-bottom: 4px !important;
}

.prop_empty_state .prop_empty_hint {
  font-size: 10px !important;
  color: #777777 !important;
}

.prop_section {
  border-bottom: 1px solid #242424 !important;
}

.prop_section:last-child {
  border-bottom: none !important;
}

.prop_section_header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 8px !important;
  background-color: #282828 !important;
  cursor: pointer !important;
  user-select: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #a8a8a8 !important;
  border-top: 1px solid #1e1e1e !important;
  transition: background-color 0.12s, color 0.12s !important;
}

.prop_section_header:hover {
  background-color: #303030 !important;
  color: #ffffff !important;
}

.prop_section_title {
  order: 1 !important;
}

.prop_section_arrow {
  order: 2 !important;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 0 4px 5px 4px !important;
  border-color: transparent transparent #888888 transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  margin-left: auto !important;
  vertical-align: middle !important;
  transition: border-color 0.15s ease !important;
}

.prop_section.collapsed .prop_section_arrow {
  border-width: 5px 4px 0 4px !important;
  border-color: #888888 transparent transparent transparent !important;
  transform: none !important;
}

.prop_section_body {
  padding: 6px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  background-color: #2b2b2b !important;
  box-sizing: border-box !important;
}

.prop_section.collapsed .prop_section_body {
  display: none !important;
}

.prop_row:not(.vui-icon-group) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.prop_group {
  width: 100% !important;
}

.prop_field_pair {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.prop_grid_6col {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 3px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.prop_grid_2col_btns {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.prop_actions_flow {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.prop_actions_flow se-button:not(.vui-icon-btn) {
  flex: 0 0 calc(25% - 3px) !important;
  min-width: 28px !important;
  height: 24px !important;
}

.prop_btn_pair {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
}

.prop_field_label {
  font-size: 10px !important;
  color: #888888 !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
}

#properties_panel se-spin-input {
  width: 100% !important;
  justify-content: flex-start !important;
}

#properties_panel se-button:not(.vui-icon-btn) {
  background: #333333 !important;
  border: 1px solid #444444 !important;
  border-radius: 2px !important;
  height: 24px !important;
  min-width: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.12s, border-color 0.12s !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

#properties_panel se-button:not(.vui-icon-btn):hover {
  background: #3d3d3d !important;
  border-color: #555555 !important;
}

/* Type-style buttons: Studio-parity styling (dark grey, 1px border, white bottom bar when active) */
#slot_text_styles se-button:not(.vui-icon-btn),
#properties_panel #slot_text_styles se-button:not(.vui-icon-btn) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#slot_text_styles se-button:not(.vui-icon-btn):hover,
#properties_panel #slot_text_styles se-button:not(.vui-icon-btn):hover,
#properties_panel #slot_text_styles se-button:not(.vui-icon-btn)[pressed] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#tool_text_decoration_overline {
  display: none !important;
}

/* Pathfinder Buttons in Properties Panel */
.prop_pathfinder_grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.prop_pathfinder_btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 28px !important;
  background: #333333 !important;
  border: 1px solid #444444 !important;
  border-radius: 2px !important;
  padding: 0 !important;
  cursor: pointer !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: background-color 0.12s, border-color 0.12s, transform 0.08s !important;
}

.prop_pathfinder_btn:hover {
  background: #444444 !important;
  border-color: #666666 !important;
}

.prop_pathfinder_btn:active {
  background: #242424 !important;
  border-color: var(--studio-orange) !important;
  transform: translateY(1px) !important;
}

.prop_pathfinder_btn svg {
  display: block !important;
  pointer-events: none !important;
  width: 18px !important;
  height: 18px !important;
}

.prop_pathfinder_btn:hover svg path,
.prop_pathfinder_btn:hover svg rect {
  stroke: #ffffff !important;
}

/* Floating Tool Panels (e.g. Pathfinder Popup) */
.visteras_floating_panel {
  position: fixed;
  z-index: 10000;
  width: 220px;
  background: var(--studio-options-bg, #2d2d2d);
  border: 1px solid var(--studio-border-light, #505050);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  font-family: var(--ui-font);
  user-select: none;
  overflow: hidden;
}

.floating_panel_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 0 8px 0 10px;
  background: var(--studio-header-bg, #242424);
  border-bottom: 1px solid var(--studio-border-med, #3c3c3c);
  cursor: move;
}

.floating_panel_title {
  font-size: 12px;
  font-weight: 600;
  color: var(--studio-text, #cccccc);
  letter-spacing: 0.02em;
}

.floating_panel_close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  border-radius: 3px;
  color: var(--studio-text-muted, #888888);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color 0.12s, background-color 0.12s;
}

.floating_panel_close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.floating_panel_body {
  padding: 10px;
}

#properties_panel se-select {
  width: 100% !important;
}

#properties_panel se-input {
  width: 100% !important;
}

#properties_panel se-list {
  background: #333333 !important;
  border: 1px solid #444444 !important;
  border-radius: 2px !important;
}

#layerpanel {
  padding: 6px !important;
}

#layersLabel {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #cccccc !important;
  background-color: #333333 !important;
  padding: 5px 8px !important;
  margin: -6px -6px 6px -6px !important;
  border-bottom: 1px solid #222222 !important;
  display: block !important;
}

#layerbuttons {
  width: 100% !important;
  height: auto !important;
  background: #2d2d2d !important;
  border: 1px solid #383838 !important;
  border-radius: 2px !important;
  padding: 3px 6px !important;
  margin-bottom: 6px !important;
  display: flex !important;
  gap: 4px !important;
  box-sizing: border-box !important;
}

#layerlist {
  width: 100% !important;
  border: 1px solid #383838 !important;
  border-radius: 2px !important;
  background: #242424 !important;
  color: #cccccc !important;
}

#layerlist tr.layer {
  background-color: #292929 !important;
  color: #cccccc !important;
  border-bottom: 1px solid #333333 !important;
  transition: background 0.12s;
}

#layerlist tr.layersel {
  background-color: var(--studio-blue-active) !important;
  color: #ffffff !important;
}

#layerlist tr:not(.layer):not(.vector-object-row) {
  display: none !important;
}

.vector-object-eye {
  border: 0;
  background: transparent;
  padding: 4px;
  cursor: pointer;
}
.vector-object-eye img { width: 14px; height: 14px; }
.vector-layer-disclosure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 22px;
  margin-right: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  vertical-align: middle;
  cursor: pointer;
}
.vector-layer-disclosure::before {
  content: '';
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.vector-layer-disclosure[aria-expanded="true"]::before { transform: rotate(90deg); }
.vector-layer-disclosure:focus-visible { outline: 1px solid currentColor; }
.vector-object-eye[aria-pressed="false"] { opacity: .3; }
.vector-object-lock {
  width: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: .75;
}
.vector-object-lock[aria-pressed="true"] { opacity: 1; }
.vector-object-lock[aria-pressed="true"] img { opacity: .72; }
#layerlist tr[data-drop="above"] td { border-top: 2px solid #fa7c1b; }
#layerlist tr[data-drop="below"] td { border-bottom: 2px solid #fa7c1b; }

#layerlist td.layervis {
  width: 24px !important;
  text-align: center !important;
  padding: 4px !important;
}
#layerlist tr.vector-object-row td:first-child {
  display: flex;
  align-items: center;
  gap: 1px;
  width: 52px !important;
}
.vector-object-lock img { width: 14px; height: 14px; display: block; }

#layerlist td.layername {
  padding: 4px 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

#selLayerNames {
  margin-top: 8px !important;
  width: 100% !important;
}

/* ==========================================================================
   6. Bottom Bar (Status Bar) - Styled like Studio .status_bar
   ========================================================================== */

#tools_bottom {
  grid-area: bottom !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  background-color: var(--studio-header-bg) !important;
  border-top: 1px solid var(--studio-border-dark) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  color: #999999 !important;
  z-index: 100 !important;
  box-sizing: border-box !important;
}

#palette {
  margin-left: auto !important;
  margin-right: 8px !important;
}

/* Inputs styling */
input[type="text"], input[type="number"], input:not([type]), textarea, select {
  background: #242424 !important;
  border: 1px solid #444444 !important;
  color: #cccccc !important;
  -webkit-text-fill-color: #cccccc !important;
  caret-color: #cccccc !important;
  border-radius: 2px !important;
  font-family: var(--mono-font) !important;
  font-size: 11px !important;
  padding: 2px 4px !important;
  color-scheme: dark;
}

input::placeholder,
textarea::placeholder {
  color: #888888 !important;
  -webkit-text-fill-color: #888888 !important;
  opacity: 1 !important;
}

se-spin-input {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Modern scrollbars for side panels, layer list, and dialogs */
#sidepanels,
#layerlist,
.dialog_content,
elix-dialog {
  scrollbar-width: thin !important;
  scrollbar-color: #4f4f4f #282828 !important;
}

#sidepanels::-webkit-scrollbar,
#layerlist::-webkit-scrollbar,
.dialog_content::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

#sidepanels::-webkit-scrollbar-track,
#layerlist::-webkit-scrollbar-track,
.dialog_content::-webkit-scrollbar-track {
  background: #282828 !important;
}

#sidepanels::-webkit-scrollbar-thumb,
#layerlist::-webkit-scrollbar-thumb,
.dialog_content::-webkit-scrollbar-thumb {
  background-color: #4a4a4a !important;
  border-radius: 4px !important;
  border: 2px solid #282828 !important;
  background-clip: padding-box !important;
}

#sidepanels::-webkit-scrollbar-thumb:hover,
#layerlist::-webkit-scrollbar-thumb:hover,
.dialog_content::-webkit-scrollbar-thumb:hover {
  background-color: #686868 !important;
}

#sidepanels::-webkit-scrollbar-corner,
#layerlist::-webkit-scrollbar-corner,
.dialog_content::-webkit-scrollbar-corner {
  background: #242424 !important;
}



/* Typography style buttons — icons tinted #cccccc in index.html (Studio adjustment parity). */
#slot_text_styles se-button,
#tools_top .text_panel se-button {
  color: #cccccc;
}

/* ==========================================================================
   Studio-Parity Transform Controls & Selection Styling
   ========================================================================== */

/* Main bounding box outline: single solid 1px #3f8ff7 hairline line (matching Studio's 1px border) */
#selectorParentGroup [id^="selectedBox"],
#selectorGroup0 [id^="selectedBox"],
[id^="selectedBox"] {
  stroke: #3f8ff7 !important;
  stroke-width: 1px !important;
  stroke-dasharray: none !important;
  fill: none !important;
  vector-effect: non-scaling-stroke !important;
}

/* Transform resize handles: square corner & midpoint handles (Studio parity) */
#selectorParentGroup [id^="selectorGrip_resize_"],
#selectorGripsGroup [id^="selectorGrip_resize_"],
[id^="selectorGrip_resize_"] {
  fill: #ffffff !important;
  stroke: #3f8ff7 !important;
  stroke-width: 1px !important;
  vector-effect: non-scaling-stroke !important;
  width: 7px !important;
  height: 7px !important;
  rx: 0px !important;
  ry: 0px !important;
}

/* Rotate handle and stem hidden to match Studio's clean 8-handle transform box */
#selectorParentGroup #selectorGrip_rotateconnector,
#selectorGrip_rotateconnector,
#selectorParentGroup #selectorGrip_rotate,
#selectorGrip_rotate {
  display: none !important;
}

/* Corner rotation hit-zones (Studio parity): outside corner hover rotation */
#selectorParentGroup [id^="selectorGrip_rotate_corner_"],
#selectorGripsGroup [id^="selectorGrip_rotate_corner_"],
[id^="selectorGrip_rotate_corner_"] {
  fill: transparent !important;
  stroke: none !important;
  pointer-events: all !important;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round' d='M 17 5.9 A 8 8 0 1 0 18.9 17.1'/%3E%3Cpath fill='%23ffffff' stroke='%23ffffff' stroke-width='2.8' stroke-linejoin='round' d='M 19 18.5 L 21.6 13.6 L 16 16.1 Z'/%3E%3Cpath fill='none' stroke='%23000000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M 17 5.9 A 8 8 0 1 0 18.9 17.1'/%3E%3Cpath fill='%23000000' stroke='%23000000' stroke-width='0.9' stroke-linejoin='round' d='M 19 18.5 L 21.6 13.6 L 16 16.1 Z'/%3E%3C/svg%3E") 12 12, auto !important;
}

/* In Direct Selection (pathedit) mode: disable and hide bounding boxes, scaling handles, and rotation grips */
.mode-pathedit #selectorGripsGroup,
.mode-pathedit [id^="selectorGrip_"],
.mode-pathedit [id^="selectedBox"],
.mode-pathedit #selectorParentGroup > [id^="selectorGroup"],
[data-mode="pathedit"] #selectorGripsGroup,
[data-mode="pathedit"] [id^="selectorGrip_"],
[data-mode="pathedit"] [id^="selectedBox"],
[data-mode="pathedit"] #selectorParentGroup > [id^="selectorGroup"] {
  display: none !important;
  pointer-events: none !important;
}

#pathpointgrip_container {
  display: inline !important;
  pointer-events: all !important;
}

/* Rubberband drag selection box: #3f8ff7 with translucent blue tint */
#selectorRubberBand {
  stroke: #3f8ff7 !important;
  stroke-width: 1px !important;
  stroke-dasharray: none !important;
  fill: rgba(63, 143, 247, 0.15) !important;
  vector-effect: non-scaling-stroke !important;
}

/* Type on Path attached source path styling & hover state */
.visteras-type-on-path-source {
  stroke-width: 1px !important;
  vector-effect: non-scaling-stroke !important;
}

/* Only show hover outline when NOT currently selected to ensure single bounding box line */
.visteras-type-on-path-source.visteras-top-hovered:not(.visteras-top-selected),
.visteras-type-on-path-source:hover:not(.visteras-top-selected) {
  stroke: #3f8ff7 !important;
  stroke-width: 1px !important;
  fill: none !important;
  vector-effect: non-scaling-stroke !important;
}

.visteras-type-on-path-source.visteras-top-selected {
  stroke: transparent !important;
  stroke-width: 1px !important;
  fill: none !important;
}

/* Type on Path in-place blinking caret on curve */
@keyframes visterasCaretBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.visteras-top-caret {
  animation: visterasCaretBlink 0.85s infinite;
  fill: #3f8ff7 !important;
  font-weight: 300 !important;
}

/* Type on Path Mode: Canvas & Hover Cursor */
.visteras-top-mode-active #workarea,
.visteras-top-mode-active #svgcanvas {
  cursor: crosshair;
}

.visteras-top-mode-active #svgcontent path,
.visteras-top-mode-active #svgcontent rect,
.visteras-top-mode-active #svgcontent circle,
.visteras-top-mode-active #svgcontent ellipse,
.visteras-top-mode-active #svgcontent polygon,
.visteras-top-mode-active #svgcontent polyline,
.visteras-top-mode-active #svgcontent line,
.visteras-top-mode-hover-target,
.visteras-type-on-path-source.visteras-top-mode-hover {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 18 C7 10 13 10 21 18' fill='none' stroke='%233f8ff7' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 4 L12 14 M8 4 L16 4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 4 L12 14 M8 4 L16 4' fill='none' stroke='%23000000' stroke-width='0.75' stroke-linecap='round'/%3E%3C/svg%3E") 12 14, crosshair !important;
}

/* Illustrator-style Flying V Selection and Direct Selection Cursors */
#workarea {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 4 L21 12 L12 12 L12 21 Z' fill='%23ffffff' stroke='%23ffffff' stroke-width='3.5' stroke-linejoin='round'/%3E%3Cpath d='M4 4 L21 12 L12 12 L12 21 Z' fill='%23000000' stroke='%23000000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 4, default;
}

#svgcanvas {
  cursor: inherit;
}

/* Panning (Hand) Mode Cursors */
.mode-ext-panning #workarea,
[data-mode="ext-panning"] #workarea,
.mode-ext-panning #svgcanvas,
[data-mode="ext-panning"] #svgcanvas,
[data-mode="ext-panning"] #svgcontent * {
  cursor: grab !important;
}

body.pan-dragging #workarea,
body.pan-dragging #svgcanvas,
body.pan-dragging #svgcontent *,
[data-mode="ext-panning"].pan-dragging #workarea,
[data-mode="ext-panning"].pan-dragging #svgcanvas,
[data-mode="ext-panning"].pan-dragging #svgcontent * {
  cursor: grabbing !important;
}

/* Direct Selection Base Cursor (Canvas & Empty Space) */
.mode-pathedit #workarea,
[data-mode="pathedit"] #workarea,
.mode-pathedit #svgcanvas,
[data-mode="pathedit"] #svgcanvas {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 4 L21 12 L12 12 L12 21 Z' fill='%23000000' stroke='%23000000' stroke-width='3.5' stroke-linejoin='round'/%3E%3Cpath d='M4 4 L21 12 L12 12 L12 21 Z' fill='%23ffffff' stroke='%23ffffff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 4, default !important;
}

/* Direct Selection Object Body Hover (Shows object move cursor when hovering over path/shape body) */
.mode-pathedit #svgcontent path,
.mode-pathedit #svgcontent rect,
.mode-pathedit #svgcontent circle,
.mode-pathedit #svgcontent ellipse,
.mode-pathedit #svgcontent polygon,
.mode-pathedit #svgcontent polyline,
.mode-pathedit #svgcontent line,
[data-mode="pathedit"] #svgcontent path,
[data-mode="pathedit"] #svgcontent rect,
[data-mode="pathedit"] #svgcontent circle,
[data-mode="pathedit"] #svgcontent ellipse,
[data-mode="pathedit"] #svgcontent polygon,
[data-mode="pathedit"] #svgcontent polyline,
[data-mode="pathedit"] #svgcontent line {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 4 L21 12 L12 12 L12 21 Z' fill='%23000000' stroke='%23000000' stroke-width='3.5' stroke-linejoin='round'/%3E%3Cpath d='M4 4 L21 12 L12 12 L12 21 Z' fill='%23ffffff' stroke='%23ffffff' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M16 11 L16 17 M13 14 L19 14 M16 11 L14.5 12.5 M16 11 L17.5 12.5 M16 17 L14.5 15.5 M16 17 L17.5 15.5 M13 14 L14.5 12.5 M13 14 L14.5 15.5 M19 14 L17.5 12.5 M19 14 L17.5 15.5' fill='none' stroke='%23000000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 4 4, move !important;
}

/* Path edit segment outline: crisp 1px light blue (#3f8ff7) line for the full path */
#pathpointgrip_container [id^="segline_"],
[id^="segline_"] {
  stroke: #3f8ff7 !important;
  stroke-width: 1px !important;
  fill: none !important;
  vector-effect: non-scaling-stroke !important;
  pointer-events: none !important;
}

/* Bezier control handle connector lines */
#pathpointgrip_container [id^="ctrlLine_"],
[id^="ctrlLine_"] {
  stroke: #3f8ff7 !important;
  stroke-width: 1px !important;
  vector-effect: non-scaling-stroke !important;
  pointer-events: none !important;
}

/* Direct Selection Anchor Point & Control Point Hover (Shows single anchor manipulation cursor) */
#pathpointgrip_container circle,
[id^="pathpointgrip_"],
[id^="ctrlpointgrip_"] {
  vector-effect: non-scaling-stroke !important;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 4 L21 12 L12 12 L12 21 Z' fill='%23000000' stroke='%23000000' stroke-width='3.5' stroke-linejoin='round'/%3E%3Cpath d='M4 4 L21 12 L12 12 L12 21 Z' fill='%23ffffff' stroke='%23ffffff' stroke-width='1.5' stroke-linejoin='round'/%3E%3Crect x='13' y='13' width='6.5' height='6.5' fill='%23ffffff' stroke='%23000000' stroke-width='1.5' rx='0.5'/%3E%3C/svg%3E") 4 4, pointer !important;
  transition: r 0.1s ease, stroke-width 0.1s ease;
}

#pathpointgrip_container circle:hover,
[id^="pathpointgrip_"]:hover,
[id^="ctrlpointgrip_"]:hover {
  r: 5px !important;
  stroke: #3f8ff7 !important;
  stroke-width: 2px !important;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 4 L21 12 L12 12 L12 21 Z' fill='%23000000' stroke='%23000000' stroke-width='3.5' stroke-linejoin='round'/%3E%3Cpath d='M4 4 L21 12 L12 12 L12 21 Z' fill='%23ffffff' stroke='%23ffffff' stroke-width='1.5' stroke-linejoin='round'/%3E%3Crect x='13' y='13' width='6.5' height='6.5' fill='%23ffffff' stroke='%23000000' stroke-width='1.5' rx='0.5'/%3E%3C/svg%3E") 4 4, pointer !important;
}

/* ==========================================================================
   Illustrator-style Left Toolbar Color Swatches (Fill & Stroke)
   ========================================================================== */

#tools_swatch_sep {
  width: 20px;
  height: 1px;
  background: #3c3c46;
  margin: 6px auto 4px;
}

.tools-left-swatches {
  position: relative;
  width: 32px;
  height: 40px;
  margin: 4px auto 6px;
  user-select: none;
  box-sizing: border-box;
}

.swatches-cluster {
  position: relative;
  width: 28px;
  height: 28px;
  margin: 5px auto 0;
}

.swatch-box {
  position: absolute;
  width: 19px;
  height: 19px;
  border-radius: 2px;
  cursor: pointer;
  box-sizing: border-box;
  background: #1e1e24;
  border: 1px solid #111111;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  transition: transform 0.1s ease, z-index 0.1s ease;
}

.swatch-fill {
  top: 0px;
  left: 0px;
  z-index: 2;
}

.swatch-stroke {
  bottom: 0px;
  right: 0px;
  z-index: 1;
}

.swatch-box.active {
  z-index: 3 !important;
  box-shadow: 0 0 0 1.5px #ffffff, 0 2px 6px rgba(0, 0, 0, 0.8) !important;
}

.swatch-color-indicator {
  width: 100%;
  height: 100%;
  border-radius: 1px;
  background-color: #cccccc;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.swatch-stroke .swatch-color-indicator {
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swatch-stroke-hole {
  width: 9px;
  height: 9px;
  background-color: var(--studio-panel-bg, #2b2b36);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1px;
}

.swatch-color-indicator.is-none {
  background: linear-gradient(to top right, #ffffff calc(50% - 1.2px), #e62e2e calc(50% - 1.2px), #e62e2e calc(50% + 1.2px), #ffffff calc(50% + 1.2px)) !important;
}

.swatch-swap-btn {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 13px;
  height: 13px;
  background: transparent;
  border: none;
  color: #999999;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: color 0.15s, transform 0.15s;
}

.swatch-swap-btn:hover {
  color: #ffffff;
  transform: scale(1.18);
}

.swatch-default-btn {
  position: absolute;
  bottom: -1px;
  left: -1px;
  width: 13px;
  height: 13px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: transform 0.15s;
}

.swatch-default-btn:hover {
  transform: scale(1.18);
}


/* ==========================================================================
   Reference image tool — keep visible in left toolbar (not clipped/hidden)
   ========================================================================== */

#tools_left #tool_image {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
  order: 50;
}

#tools_left {
  /* Allow scrolling if many tools so Image stays reachable */
  scrollbar-width: thin;
  scrollbar-color: #505050 transparent;
}

.prop_check_row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #cccccc;
  margin: 4px 0;
  cursor: pointer;
  user-select: none;
}

.visteras-snap-point-marker {
  position: fixed;
  width: 8px;
  height: 8px;
  border: 1px solid var(--studio-orange, #fa7c1b);
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  display: none;
}

/* ==========================================================================
   Studio Toast Notifications (Alertify-compatible red toasts & alerts)
   ========================================================================== */
.alertify-notifier {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: 90vw;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.alertify-notifier .ajs-message {
  box-sizing: border-box;
  width: auto;
  min-width: 240px;
  max-width: 480px;
  padding: 12px 20px;
  border-radius: 4px;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  word-break: break-word;
  white-space: pre-line;
}

.alertify-notifier .ajs-message.ajs-visible {
  opacity: 1;
  transform: translateY(0);
}

.alertify-notifier .ajs-message.ajs-error {
  color: #ffffff;
  background: rgba(217, 92, 92, 0.95);
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(180, 50, 50, 0.85);
}

.alertify-notifier .ajs-message.ajs-warning {
  color: #333333;
  background: rgba(252, 248, 215, 0.95);
  border: 1px solid #d4c88e;
}

.alertify-notifier .ajs-message.ajs-success {
  color: #ffffff;
  background: rgba(91, 189, 114, 0.95);
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(70, 160, 90, 0.85);
}

.alertify-notifier .ajs-message.ajs-info {
  color: #ffffff;
  background: rgba(45, 55, 72, 0.96);
  border: 1px solid rgba(74, 85, 104, 0.9);
}

/* ==========================================================================
   Type on Path Alignment Segmented Control
   ========================================================================== */
.top-align-group {
  display: flex !important;
  width: 100% !important;
  height: 26px !important;
  background: #1e1e1e !important;
  border: 1px solid #444444 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.top-align-btn {
  flex: 1 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  border-right: 1px solid #444444 !important;
  color: #999999 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background-color 0.12s, color 0.12s !important;
}

.top-align-btn:last-child {
  border-right: none !important;
}

.top-align-btn:hover {
  background: #333333 !important;
  color: #eeeeee !important;
}

.top-align-btn.active,
.top-align-btn[aria-pressed="true"] {
  background: rgba(250, 124, 27, 0.2) !important;
  color: #fa7c1b !important;
}

.top-align-btn svg {
  display: block !important;
  pointer-events: none !important;
}



/* A type-on-path source is geometry, not a separately painted/selected object.
   Text and group bounds explicitly include this geometry. */
.visteras-type-on-path-source { display: none !important; }

/* Hide legacy SVG-Edit controls replaced by modern UI */
#tool_font_family,
.visteras-font-hidden,
#tool_text_anchor {
  display: none !important;
}

/* Typography: standard text alignment buttons */
#slot_text_align {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}

.visteras_text_align_btn:not(.vui-icon-btn) {
  width: 28px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #2a2a2a !important;
  border: 1px solid #3d3d3d !important;
  border-radius: 3px !important;
  color: #cccccc !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background-color 0.12s, color 0.12s !important;
}

.visteras_text_align_btn:not(.vui-icon-btn):hover {
  background: #383838 !important;
  color: #ffffff !important;
}

.visteras_text_align_btn:not(.vui-icon-btn).active,
.visteras_text_align_btn:not(.vui-icon-btn)[aria-pressed="true"] {
  background: #1e1e1e !important;
  color: #ffffff !important;
  box-shadow: 0 -1px 0 0 #ffffff inset !important;
}

.visteras_text_align_btn svg {
  display: block !important;
  pointer-events: none !important;
}


/* Outline view contains monochrome geometry, including raster/artboard bounds. */
#workarea.wireframe #svgcontent image {
  opacity: 0 !important;
  pointer-events: all !important;
}
#workarea.wireframe #visteras-artboard-backgrounds rect {
  fill: #ffffff !important;
  stroke: #000000 !important;
  stroke-width: 0.75px !important;
  vector-effect: non-scaling-stroke !important;
  filter: none !important;
}
#workarea.wireframe #visteras-artboard-backgrounds text {
  fill: #000000 !important;
}


/* Properties ▸ Typography / Paragraph panel: labels left, fields on one tidy 2-column grid. */
#sec_typography_body .prop_row[style*="flex-direction:column"] { align-items: flex-start !important; }
.prop_row.vpara_row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px 6px !important; align-items: center !important; }
.prop_row.vpara_row > .vpara_field { min-width: 0; }
#sec_typography_body .prop_row:has(> #slot_word_spacing) { justify-content: flex-start !important; }

.vector-layer-name-input { width: 100%; min-width: 0; box-sizing: border-box; color: inherit; background: var(--input-background-color); border: 1px solid var(--visteras-accent); font: inherit; }
.vector-layer-name { cursor: text; }

#layerbuttons > button { width: 20px; height: 20px; padding: 2px; color: inherit; background: transparent; border: 0; cursor: pointer; }
#layerbuttons > button svg, #layerbuttons > button img { width: 16px; height: 16px; }
#layerpanel { position: relative; }
.vector-layer-panel-menu { position: absolute; top: 30px; right: 4px; z-index: 5; min-width: 190px; background: var(--block-background-color, #292929); border: 1px solid var(--visteras-accent); box-shadow: 0 3px 12px #0008; }
.vector-layer-panel-menu[hidden] { display: none; }
.vector-layer-panel-menu button { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 7px 10px; background: transparent; color: inherit; border: 0; text-align: left; font: inherit; }
.vector-layer-panel-menu button:hover { background: color-mix(in srgb, var(--visteras-accent) 25%, transparent); }
.vector-layer-located { outline: 2px solid var(--visteras-accent); outline-offset: -2px; }
.vector-layer-targeted { background: color-mix(in srgb, var(--visteras-accent) 20%, transparent); }
.vector-sublayer-row td:last-child { position: relative; }
.vector-sublayer-row .vector-layer-disclosure { position: absolute; left: 12px; top: 5px; z-index: 1; }