/* open-sans-300 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('/open-sans-fonts/open-sans-v43-latin_latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-300italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('/open-sans-fonts/open-sans-v43-latin_latin-ext-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/open-sans-fonts/open-sans-v43-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('/open-sans-fonts/open-sans-v43-latin_latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-500 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('/open-sans-fonts/open-sans-v43-latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-500italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 500;
  src: url('/open-sans-fonts/open-sans-v43-latin_latin-ext-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-600 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('/open-sans-fonts/open-sans-v43-latin_latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-600italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('/open-sans-fonts/open-sans-v43-latin_latin-ext-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('/open-sans-fonts/open-sans-v43-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-700italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('/open-sans-fonts/open-sans-v43-latin_latin-ext-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-800 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('/open-sans-fonts/open-sans-v43-latin_latin-ext-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-800italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  src: url('/open-sans-fonts/open-sans-v43-latin_latin-ext-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.popout-grid {
    display: grid;
    /* Matches the runsheet attribute editor's row layout (.rs-inspector-field/
       .rs-inspector-fields, RunsheetTimeline.ejs) - fixed label column instead
       of a percentage split, same row/column gaps. Wider than
       .rs-inspector-label's own 76px min-width (1.5x) since this panel's
       labels run longer ("Highlight Selected", "Camera Near/Far") and were
       wrapping to two lines at the runsheet's own width. */
    grid-template-columns: 114px 1fr;
    column-gap: 10px;
    row-gap: 8px;
    align-items: center;
}

.full-width {
    grid-column: span 2;  /* Spans 2 columns */
}

/* Safe to apply broadly - only matters (constrains padding/border inside an
   explicit width instead of adding to it) for the select/input/button
   elements below that actually get width:100% set; a no-op for ones left
   at their natural/auto width (e.g. the Shaders row's icon button + select
   pair, or the AI/Undo/Edit/Copy button group). */
.popout-grid select,
.popout-grid input[type="text"],
.popout-grid button {
    box-sizing: border-box;
    margin: 0;
}

/* 25% longer than the sitewide input[type="range"] default (110px) - the
   Properties/Camera Animation popups' sliders (Scale, Speed, Rotate, Orbit
   Speed, etc.) read as short in the now-wider popout-grid column. Scoped
   here rather than changing the base rule, which also drives the node
   editor toolbar's transparency slider and the text-texture modal's
   sliders - different contexts, not what was asked. */
.popout-grid input[type="range"] {
    width: 138px;
}

/* Plain read-only value text (Type) - was left at the old 9px baseline
   (font-size never followed the labels/inputs' bump to 11px) and flush
   against the cell's left edge with no padding, so its text sat both
   smaller and further left than the input/select boxes' own text in the
   very same column right below it. 7px matches .rs-inspector select's
   inset (1px border + 6px padding) - selects outnumber text inputs in
   these popups (Geometry/Copy from/Material Sides/Orbit Around vs. just
   Label), so that's the more common neighbor to line up with; 2px off
   from input's 9px inset, not perceptible at this size. */
#shapeType {
    display: inline-block;
    font-size: 11px;
    padding-left: 7px;
    box-sizing: border-box;
}

.camera-grid {
    display: grid;
    grid-template-columns: 60% 20% 20%;  /* First column 30%, second 70% */
    gap: 0px;  /* Space between cells */
}

body { margin: 0; }
textarea { font-size: 9px; }
div { font-size: 9px; }
select { font-size: 9px; }
input { font-size: 9px; }
button { font-size: 9px; }

.experimental {
    display: none;
}

.smallDisplay { font-size: 9px; }

/* Upload/Download row (.popout-grid, settings.ejs) - same .FieldButton
   look (dark bluish tint, see the comment above that class) as the other
   buttons in this same modal (Pick Color, BG Equirectangular, Execute
   Run's START) rather than the old flat-white .smallButton style, split
   50/50 into an icon-only pair instead of .FieldButton's normal
   width:100% single full-row button. */
.upload-download-row {
    display: flex;
    gap: 6px;
}

.upload-download-row .FieldButton {
    width: auto;
    flex: 1 1 0;
    display: flex;
    justify-content: center;
}

.smallButton {
    width: 30px;
    height: 20px;
    
    /* Reset Safari defaults */
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    border: none;
    background: #fff; /* Default off state */
    padding: 0;
    margin: 2px 1px 0 0;
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
}

.smallButtonOLD {
    width:30px;
    height:20px;
}

:root {
    --timeline-height: 0px;
}

body {
    margin: 0;
    font-family: "Open Sans", sans-serif;
}

a:link,
a:visited,
a:hover,
a:active {
  color: inherit; /* Makes link use the parent text color */
  text-decoration: none; /* Optional: removes underline */
}

.spinnerMessage {
    font-size:16px;
    color:white;
    text-transform: uppercase;
}

/* loading spinner */

.loading-spinner-dots {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    background: transparent; /* Transparent background */
}


.loading-spinner-dots div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff; /* White dots */
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.loading-spinner-dots div:nth-child(1) {
    left: 8px;
    animation: dots1 0.6s infinite;
}

.loading-spinner-dots div:nth-child(2) {
    left: 8px;
    animation: dots2 0.6s infinite;
}

.loading-spinner-dots div:nth-child(3) {
    left: 32px;
    animation: dots2 0.6s infinite;
}

.loading-spinner-dots div:nth-child(4) {
    left: 56px;
    animation: dots3 0.6s infinite;
}

/* Animations */
@keyframes dots1 {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

@keyframes dots3 {
    0% { transform: scale(1); }
    100% { transform: scale(0); }
}

@keyframes dots2 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(24px, 0); }
}

/* Loading overlay with transparent background */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent dark overlay */ 
    backdrop-filter: blur(3px); /* Optional: adds blur effect */
    display: flex;
    justify-content: center;
    flex-direction: column;     
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.loading-overlay.show {
    opacity: 1;
    visibility: visible;
}

.message-spinner-dots {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 30px;
    background: transparent; /* Transparent background */
}


.message-spinner-dots div {
    position: absolute;
    top: 13px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff; /* White dots */
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.message-spinner-dots div:nth-child(1) {
    left: 4px;
    animation: dots1m 0.6s infinite;
}

.message-spinner-dots div:nth-child(2) {
    left: 4px;
    animation: dots2m 0.6s infinite;
}

.message-spinner-dots div:nth-child(3) {
    left: 16px;
    animation: dots2m 0.6s infinite;
}

.message-spinner-dots div:nth-child(4) {
    left: 28px;
    animation: dots3m 0.6s infinite;
}

/* Animations */
@keyframes dots1m {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

@keyframes dots3m {
    0% { transform: scale(1); }
    100% { transform: scale(0); }
}

@keyframes dots2m {
    0% { transform: translate(0, 0); }
    100% { transform: translate(12px, 0); }
}

.message-dots {
    background: #fffacd;/*28a745; /* rgba(150, 150, 150, 0.5); */
    backdrop-filter: blur(3px); /* Optional: adds blur effect */
    border-radius: 12px; /* Smooth rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    min-width: 200px;     /* Won’t shrink below 200px */
    width: auto;
    /* width:300px;*/
    /*height:50px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.messageText {
    margin: 5px 50px 5px 50px;
    font-size:10px;
    color:#030303;/*white;*/
    text-align:center;
    cursor:pointer;
    pointer-events:auto;
}

/* Loading overlay with transparent background */
.message-overlay {
    position: fixed;
    /* Shifted down by the same amount #panelContainer was (see
       popout-panel2.ejs), so it clears the canvas-controls bar too. */
    top: calc(10px + var(--canvas-controls-height, 0px) + 23px);
    left: 0;
    width: 100%;
    pointer-events: none;    
    /*height: 100%;*/
    /*background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent dark overlay */ 
    display: flex;
    justify-content: center;
    flex-direction: column;     
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.message-overlay.show {
    opacity: 1;
    visibility: visible;
}


/* Container with unified shadow */
#panelContainer {
    position: fixed;
    /* Starts below the canvas-controls bar (Save/Save As/Open/New), plus a
       little breathing room so it doesn't sit flush against it — see
       syncCanvasControlsHeight() in designer.js. */
    top: calc(var(--canvas-controls-height, 0px) + 13px);
    /* Left edge, not right: this panel is global/project settings, not
       something that belongs to whatever's docked on the right (the node
       editor in side-by-side mode) - anchoring opposite it means the two
       never visually compete regardless of layout mode. */
    left: -280px; /* Width of panel only (260px + its 10px l/r padding) — the slim tab stays fully visible */
    XXXheight: 100vh;
    height: calc(100vh - var(--timeline-height) - 69px - var(--canvas-controls-height, 0px) - 13px);
    display: flex;
    align-items: center; /* vertically center the tab button so it can't land on a toolbar */
    z-index: 4200;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Single shadow for entire component - falls toward the canvas (now to
       the right, since the panel docks left) */
    filter: drop-shadow(6px 0 20px rgba(0, 0, 0, 0.3));
}

/* Tab button - comes first in the DOM, but ordered last (canvas-facing
   side) now that the panel docks left instead of right; see #slidePanel's
   own order below. */
#sliderPanelBtn {
    order: 2;
    width: 20px;
    min-width: 20px;
    height: 56px;
    background: rgba(30, 30, 30, 0.55);
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 0 6px 6px 0;
    transition: all 0.3s ease;
    user-select: none;
    position: relative;
}

#sliderPanelBtn::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 24px;
    background: #6e8efb;
    border-radius: 2px 0 0 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#sliderPanelBtn:hover::after {
    opacity: 1;
}

#sliderPanelBtn:hover {
    background: rgba(45, 45, 45, 0.9);
    color: rgba(255, 255, 255, 1);
    transform: translateX(2px);
}

/* Icon animation */
#sliderPanelBtn i,
#sliderPanelBtn::before {
    transition: transform 0.3s ease;
    display: block;
}

#panelContainer.open #sliderPanelBtn i,
#panelContainer.open #sliderPanelBtn::before {
    transform: rotate(180deg);
}

/* Panel itself - ordered first (screen-edge side) now that the container
   docks left instead of right. */
#slidePanel {
    order: 1;
    width: 260px;
    XXXheight: 100vh;
    height: 100%;
    background: #222;
    color: white;
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 0 8px 8px 0;
}

/* Open state */
#panelContainer.open {
    left: 0;
}

/* Custom scrollbar for panel */
#slidePanel::-webkit-scrollbar {
    width: 8px;
}

#slidePanel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

#slidePanel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

#slidePanel::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}


.slider-container {
    margin-top: 2px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 9px;
    color: white;
}

/* Base slider styling */
input[type="range"] {
    width: 110px;
    height: 3px;
    appearance: none;
    background: #555;
    border-radius: 2px;
    outline: none;
}

/* Chrome / Safari / Edge Thumb */
input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    height: 8px;
    width: 8px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 1px rgba(0,0,0,0.2);
    margin-top: 0px; /* vertically center on track */
}

/* Firefox Thumb */
input[type="range"]::-moz-range-thumb {
    height: 8px;
    width: 8px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* Firefox Track */
input[type="range"]::-moz-range-track {
    background: #555;
    height: 3px;
    border-radius: 2px;
}

.small-checkbox {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

/* Hide default checkbox */
.small-checkbox input[type="checkbox"] {
    appearance: none;
    width: 12px;
    height: 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: white;
    cursor: pointer;
    display: inline-block;
    position: relative;
}

#editorSpeedSlider {width: 40px}
#transparencySlider {width: 40px}
#rotateXSlider {width: 40px}
#rotateYSlider {width: 40px}
#zoomSlider {width: 40px}

/* Checkmark (using pseudo-element) */
.small-checkbox input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 1px;
    width: 5px;
    height: 8px;
    border: solid #333;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

#currentItem {
    font-size:10px;
    margin:2px;
    text-align: center;
}

.fa-toggle-button {
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background-color: #444;
    color: white;
    transition: background 0.3s ease;
    align-items: center;
    gap: 8px;
    height:16px;
}

.fa-toggle-button {
    background-color: #f005; /* red when OFF */
}

.fa-toggle-button.on {
    background-color: #28a745; /* green when ON */
}

.SelectedItem {width:100%; margin-top:5px; }
.SelectedItem.NotSelected {display:none; width:100%; margin-top:5px; }

.ItemSelect {cursor:pointer;}

.collapsible {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

/* These sections no longer actually collapse (see the settings/properties/
   objects/camera-animation popups - all their .toggle-btn headers now lack
   a data-target, so nothing ever removes "expanded"), so the height cap +
   scrollbar this carried over from the old accordion is dead weight -
   worse, a second scroll region nested inside the popup's own
   .settings-properties-body scroll. Let content size naturally instead. */
.collapsible.expanded {
    padding-top: 5px;
    /* Override .collapsible's max-height:0/overflow:hidden explicitly -
       omitting them here would just let those base values win (CSS cascades
       per-property, not per-rule), which is what caused this to stay
       clipped/scrollable even with "expanded" applied. */
    max-height: none;
    overflow: visible;
}

/* Section headers (Project, Light & Shadow, Object Properties, etc.) in the
   settings/properties/objects/camera-animation popups - sized/formatted like
   the field labels they sit above (.rs-inspector-label: 11px, same font
   stack) but white rather than label-dim, and with room above instead of
   the <hr> rule that used to separate sections. No top margin by default -
   a title that's the first thing in a popup (Project when Devices is
   hidden, Object Properties, 3D Objects, Camera Animation) shouldn't get
   extra space on top of the popup body's own padding. */
.toggle-btn {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    cursor: pointer;
    background: none;
    border: none;
    color: #fff;
    font-size: 11px;
    padding:2px;
    margin: 0 0 5px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ...unless it follows another (always-expanded) section, in which case it
   needs the gap a removed <hr> used to provide. Adjacent-sibling match, so
   it naturally skips the first section in each popup regardless of whether
   a hidden section (e.g. #devicesSection) happens to precede it in the DOM -
   display:none siblings are still siblings, but they're never themselves a
   .collapsible.expanded, so this still only fires between two real,
   visible sections. */
.collapsible.expanded + .toggle-btn {
    margin-top: 20px;
}

.toggle-symbol {
    display: inline-block;
    transition: transform 0.3s ease;
}

.toggle-btn.open .toggle-symbol {
    transform: rotate(90deg); /* ► becomes ▼ */
}

#objectList {
    border-collapse: collapse; /* removes spacing between cells */
    border-spacing: 0;         /* for good measure */
    width:100%;
}
#objectList td {
    padding:0px 3px 0px 3px;
}

.MaterialsTop {width:100%;}

.tableHeader {
    font-weight: bold;
    padding-top: 5px;
    padding-bottom: 5px;
}

.tight-table {
    border-collapse: collapse; /* removes spacing between cells */
    border-spacing: 0;         /* for good measure */
    margin: 0;
    padding: 0px;
    width:100%;
}

.tight-table td,
.tight-table th {
    padding: 2px 0px 2px 0px;
    margin: 0;
    border: none;
}

/*
.color-popup {
    position: absolute;
    display: none;
    z-index: 9999;
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.color-picker {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

#colorPreviewOLD {
    width: 40px;
    height: 40px;
    border: 1px solid #999;
    margin-top: 8px;
}

*/

input.colorTarget {display:none;}
input.toggleButton {display:none;}



.EditButton {background-color:white; cursor: pointer;}
.EditButton.Active {background-color:#009080;}

.toggleOn {
    background:#009080;
}

/* Matches the runsheet attributes editor's checkboxes (.rs-inspector-check
   input, RunsheetTimeline.ejs) instead of the oversized ON/OFF buttons this
   panel used to use for the same true/false values. */
.CheckboxCustom {
    margin:      0;
    accent-color: #00bcd4;
}

#designer-layout {
    display: flex;
    width: 100%;
    height: 100vh;
}

#canvasContainer {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    position: relative;
}

/* Everything but the canvas-controls bar shares this box: mainCanvas and
   compositeCanvas absolute-position against it, not against
   #canvasContainer directly, so they fill the space left after the bar.
   The black background is the letterboxing matte around a canvas smaller
   than the available space (a fixed resolution not matching this aspect
   ratio) — without it the gap showed through to the page's default white,
   which also made the canvas outline below nearly invisible against it. */
#canvasStage {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    background: #000;
}

/* top/left/width/height are all set explicitly, in pixels, by
   getCanvasResolution() in designer.js — centering has to account for the
   runsheet timeline, a position:fixed overlay that covers the bottom slice
   of #canvasStage without shrinking its box, so plain CSS percentage
   centering can't get it right on its own. */
#mainCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
}

/* Marks exactly what's actually recorded — only meaningful once a fixed
   resolution is letterboxed smaller than the available space (toggled in
   getCanvasResolution()); at 'screen' resolution the canvas always fills
   the available space exactly, so there's nothing to outline. Outline
   rather than border, since border sits inside the box and got drawn over
   by whatever's rendered right up to the canvas edge; outline draws just
   outside it, against canvasStage's own background, so it stays visible
   regardless of the rendered content. */
#mainCanvas.letterboxed {
    outline: 2px solid rgba(255, 255, 255, 0.5);
}

#compositeCanvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    display:none;
    pointer-events: none; /* pass it on to main canvas */
}

/* While recRunsheet is on, compositeCanvas (not mainCanvas) is what
   actually shows - and records - the full frame, since it composites the
   renderer's own (intentionally shrunk) content back with the runsheet
   strip below it. getCanvasResolution() moves the .letterboxed class here
   instead of mainCanvas in that case, so the outline wraps the whole
   frame rather than just the 3D content above the strip. */
#compositeCanvas.letterboxed {
    outline: 2px solid rgba(255, 255, 255, 0.5);
}

.popout-hidden {
  display: none !important;
}

/* Viewer mode (?viewer=) - both toolbars are flex-flow siblings of the
   canvas/editor area they sit above, so hiding them lets that area grow
   to fill the reclaimed space with no extra sizing logic needed. Scoped to
   #editor-popup specifically since the canvas bar also carries the plain
   .editor-controls class (it's ".editor-controls.canvas-controls") and
   would otherwise be matched twice. */
#designer-layout.viewer-mode .canvas-controls,
#designer-layout.viewer-mode #editor-popup .editor-controls {
  display: none !important;
}

/* ── Side-by-side docked mode (data.nodeEditorLayout === 'sidebyside') ────── */

#editor-splitter {
    display: none;
    position: relative;
    /* #editor-popup (to the right) sits at z-index: 2000, and comes later
       in DOM order, so without this the widened ::before hit area below
       is only reachable from the canvasContainer side - any overlap with
       the popup's own canvas loses the stacking fight and the drag never
       starts. */
    z-index: 2001;
    flex: 0 0 6px;
    cursor: ew-resize;
    background: #1c1c1c;
    border-left: 1px solid #2a2a2a;
    border-right: 1px solid #2a2a2a;
    touch-action: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
/* Widen the touch hit area well past the visible 6px line - see the
   matching comment on .rs-resize-handle in RunsheetTimeline.ejs. */
#editor-splitter::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -12px;
    right: -12px;
}

#editor-splitter:hover,
#editor-splitter.dragging {
    background: #2e2e2e;
}

#designer-layout.sidebyside #editor-splitter.visible {
    display: block;
}

#designer-layout.sidebyside #editor-popup {
    position: relative;
    inset: auto;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    flex: 0 0 var(--editor-width, 38%);
    height: calc(100% - var(--timeline-height));
    max-height: none;
    /* The 2px border pushed .editor-controls down relative to the
       canvas-controls bar, which has no border — drop it so both
       toolbars line up. */
    border: none;
}

#editor-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 90vw;
    height: calc(90vh - var(--timeline-height));
    max-height: calc(100vh - var(--timeline-height) - 20px);
    transform: translate(-50%, -50%) translateY(calc(var(--timeline-height) / -2));
    background: #00000090;
    border: 2px solid #333;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    display: none;
    flex-direction: column;
    z-index: 2000;
    padding: 0px;
}

#editor-container {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    margin:0;

}
#editor-canvas {
    width: 100%;
    height: 100%;
    position:absolute;
    margin:0;
    z-index: 3000;
    /* Without this, the browser claims single/two-finger touch gestures
       here for its own scroll/pinch-zoom before node-editor.js's pointer
       handlers (pan/drag/pinch-to-zoom) ever see them. */
    touch-action: none;
}
#previewContainer {
    width: 100%;
    height: 100%;
    position:absolute;
    z-index: 2500;
    margin:0;
}

#previewCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

/******/

.editor-controls {
    display:       flex;
    align-items:   center;
    gap:           6px;
    padding:       6px 10px;
    background:    #141414;
    border-bottom: 1px solid #222;
    font-size:     12px;
    font-family:   -apple-system, BlinkMacSystemFont, sans-serif;
    flex-wrap:     wrap;
}

/* One group wraps as a whole unit rather than letting individual buttons
   break onto a second row ahead of others in the same group. */
.control-group {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex:        0 0 auto;
}

.editor-controls button {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    box-sizing:    border-box;
    height:        22px;
    min-width:     90px;
    padding:       0 10px;
    font-size:     12px;
    font-family:   inherit;
    font-weight:   500;
    border-radius: 4px;
    border:        1px solid #333;
    background:    none;
    color:         #888;
    cursor:        pointer;
    white-space:   nowrap;
    appearance:        none;
    -webkit-appearance: none;
    -moz-appearance:    none;
    transition:    color 0.15s, border-color 0.15s, background 0.15s;
}

.editor-controls button:hover {
    color:        #ccc;
    border-color: #555;
    background:   rgba(255,255,255,0.04);
}

.editor-controls button:active {
    background: rgba(255,255,255,0.08);
}

#delete-selected {
    color:        #e05555;
    border-color: #e0555544;
}
#delete-selected:hover {
    background:   #e0555518;
    border-color: #e0555588;
}

/* Divider between groups */
.editor-controls .separator {
    width:       1px;
    height:      16px;
    background:  #2a2a2a;
    flex-shrink: 0;
}

/* Background slider label + control */
.editor-controls .slider-container {
    display:     flex;
    align-items: center;
    gap:         6px;
}

/* In 'sidebyside' layout the docked editor never overlaps the output
   canvas, so there's nothing behind it for the transparency slider to
   reveal. */
#designer-layout.sidebyside .editor-controls .slider-container {
    display: none;
}

.editor-controls input[type="range"] {
    width:        80px;
    accent-color: #555;
}

.smallDisplay {
    font-size: 10px;
    color:     #666;
    min-width: 24px;
}

/* Shape/path title — leads the toolbar, so it reads like a window title.
   #editor-path-trigger/#editor-path-menu double as an object picker (see
   updateEditorPathSelect() in designer.js) rather than plain text, so
   switching which object's node graph is open doesn't need the popout's
   object list - #editor-path-crumb is the read-only continuation into
   whatever custom node/sub-graph is currently drilled into, if any.
   A custom dropdown (same #canvas-menu-dropdown pattern as the canvas
   toolbar's burger menu) rather than a native <select>, since a native
   option list's color styling reaches the DOM but most browsers render
   the open popup with their own OS chrome and ignore it - no reliable way
   to actually gray out the hidden entries otherwise. */
/* No overflow:hidden here - #editor-path-current and #editor-path-crumb
   each truncate their own text with ellipsis already, and clipping this
   container would also clip the dropdown menu below it, which needs to
   render outside this row's own (small) height. */
#editor-path {
    display:     flex;
    align-items: center;
    margin-left: auto;
    max-width:   40%;
    padding:     0 2px 0 8px;
}

/* No overflow:hidden here either - same reasoning as #editor-path above;
   this is the dropdown-menu's own positioning parent. */
#editor-path-wrapper {
    min-width: 0;
}

#editor-path-trigger {
    display:     flex;
    align-items: center;
    gap:         4px;
    max-width:   100%;
    height:      auto;
    min-width:   0;
    padding:     0;
    border:      none;
    background:  none;
    font-size:     13px;
    font-weight:   600;
    font-family:   inherit;
    color:         #ddd;
    cursor:        pointer;
}

#editor-path-current {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.editor-path-caret {
    flex-shrink: 0;
    font-size:   10px;
    color:       #888;
}

/* Opens leftward (right-aligned to the trigger, the base .dropdown-menu
   default) rather than rightward - #editor-path-trigger's width tracks
   the currently-selected object's name, which can be much shorter than
   other objects' names in the list below it. Anchoring left:0 (as tried
   before) let the menu grow rightward off the trigger's narrow edge,
   pushing it past the screen/panel edge since #editor-path already sits
   near the right end of the toolbar. max-width caps how wide a single
   very long object name can push it, so #editor-path-menu > span's own
   ellipsis truncation actually has something to truncate against. */
#editor-path-menu {
    min-width: 160px;
    max-width: 320px;
}

#editor-path-menu > span {
    display:       block;
    padding:       6px 8px;
    border-radius: 4px;
    color:         #ccc;
    cursor:        pointer;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    font-size:     13px; /* matches #canvas-menu-dropdown/.dropdown-menu button,
                             rather than inheriting .editor-controls' 12px */
}
#editor-path-menu > span:hover {
    background: rgba(255,255,255,0.08);
}
#editor-path-menu > span.option-hidden-shape {
    color: #777;
}

#editor-path-crumb {
    font-size:     13px;
    font-weight:   600;
    color:         #ddd;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

/* Small square icon-style buttons — the close button and the "more
   actions" dropdown trigger share this footprint. Selector is scoped to
   ".editor-controls button" (not just ".icon-button") so it actually
   outweighs that base rule's min-width/padding instead of losing to it
   on specificity. */
.editor-controls button.icon-button {
    min-width: 0;
    width:     22px;
    padding:   0;
}

/* Menu/add controls get the same light, filled look as the canvas
   toolbar's burger button and Save/Open group (.canvas-controls
   button.icon-button) rather than this bar's default muted square -
   they're the primary actions here the same way those are there.
   Scale to Fit and Snap to Grid stay muted/bordered (the default look),
   separated from the menu/add controls by a gap the same way the canvas
   toolbar's file-action group is separated from its layout-toggle group
   (.layout-controls). */
#more-actions-trigger,
#open-properties-modal,
#menu-trigger {
    background:   #aaa;
    border-color: #ddd;
    color:        #111;
}
#more-actions-trigger:hover,
#open-properties-modal:hover,
#menu-trigger:hover {
    background:   #fff;
    border-color: #fff;
    color:        #000;
}

#scale-to-fit {
    margin-left: 24px;
}

/* Same active-state treatment as the canvas toolbar's layout toggles
   (#toggleRunsheetFromBar.active etc. below) - a class rather than a
   one-off inline background (see NodeEditor.snapToGrid(), node-editor.js). */
#snap-to-grid.active {
    background:   #1abc9c18;
    border-color: #1abc9c88;
    color:        #1abc9c;
}

/* Redundant now that the canvas toolbar's two layout buttons
   (#toggleSideBySideEditor / #toggleOverlayEditor) are the open/close
   controls (see setNodeEditorMode() in designer.js) - kept in the DOM
   rather than removed, since NodeEditor's constructor (node-editor.js)
   wires a click listener onto it unconditionally and isn't null-guarded. */
#close-editor {
    display: none;
}

/* Canvas-controls icons (Save/Save As/Open/New) are primary actions, so
   they get a light, filled look, inverted (light background, dark icon)
   to stand out against the dark toolbar. */
.canvas-controls button.icon-button {
    background:   #aaa;
    border-color: #ddd;
    color:        #111;
}
.canvas-controls button.icon-button:hover {
    background:   #fff;
    border-color: #fff;
    color:        #000;
}

/* Runsheet/layout-mode toggles — grouped together since both change the
   overall screen layout, and kept in the toolbar's default muted style
   rather than the light fill reserved for those primary actions. Anchored
   left, right after the file-action buttons, rather than pushed to the far
   right of the bar — the bar's own width changes when side-by-side opens
   (the canvas pane narrows to make room for the docked node editor), which
   moved these buttons and made them hard to find right when you'd want to
   use them again. */
.layout-controls {
    margin-left: 24px;
}

#toggleRunsheetFromBar,
#toggleSideBySideEditor,
#toggleOverlayEditor {
    background:   none;
    border-color: #333;
    color:        #888;
}
#toggleRunsheetFromBar:hover,
#toggleSideBySideEditor:hover,
#toggleOverlayEditor:hover {
    background:   rgba(255, 255, 255, 0.04);
    border-color: #555;
    color:        #ccc;
}

/* Active state — each layout button lights up only while the editor is
   open *and* data.nodeEditorLayout matches its own mode (see
   syncNodeEditorToggleButton() in designer.js), so exactly one of the two
   is ever active at a time / data.runsheetOpen (see syncRunsheetState() in
   designer.js) */
#toggleRunsheetFromBar.active,
#toggleSideBySideEditor.active,
#toggleOverlayEditor.active {
    background:   #1abc9c18;
    border-color: #1abc9c88;
    color:        #1abc9c;
}

/* Sign-in status/action, pushed to the far right of the bar - unlike
   .layout-controls above, there's nothing to "find again" here (it's a
   status readout once signed in, or a one-off action button before that),
   so the bar reflowing under it isn't a problem the way it was for the
   runsheet/side-by-side toggles. Both #canvasLoginButton and
   #canvasUserName need no styling of their own - they're plain
   .editor-controls buttons, same muted look as the layout toggles above
   (rather than #canvasUserName standing out as bold colored text, one
   more font size among several on a bar that already has too many).
   Toggled between the two by updateUserStatusButton() in designer.js,
   called whenever userProfile is (re)loaded.
   The project name lives in this same group now (see .canvas-filename
   below) rather than centered over the bar, so the two wrap onto their
   own line together on narrow widths instead of the centered name
   overlapping the button row. */
.user-status {
    margin-left: auto;
}

.user-status-separator {
    color: #444;
}

/* Project name - grouped with the sign-in status (see .user-status above)
   rather than centered over the bar, which used to overlap the button
   row on narrow widths since it stayed centered regardless of how much
   room the buttons actually needed. Clickable like #fileName at the top
   of the popout menu (see designer-css.ejs), which it mirrors. */
.canvas-filename {
    max-width:     40vw;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    font-size:     13px;
    font-weight:   600;
    color:         #ddd;
    cursor:        pointer;
}

.canvas-filename.edited {
    color: #f99;
}

/* "More actions" dropdown (Undo / Delete Selected / Create Custom) */
.dropdown-wrapper {
    position: relative;
}

.dropdown-menu {
    display:        none;
    flex-direction: column;
    gap:            4px;
    position:       absolute;
    top:            calc(100% + 4px);
    right:          0; /* opens leftward from the trigger, since the
                          trigger sits near the right edge of the toolbar */
    padding:        6px;
    min-width:      140px;
    background:     #1c1c1c;
    border:         1px solid #333;
    border-radius:  6px;
    box-shadow:     0 4px 14px rgba(0,0,0,0.4);
    z-index:        4000;
}

.dropdown-menu.open {
    display: flex;
}

/* #more-actions-trigger is now the toolbar's first button (see
   nodeeditor.ejs) rather than sitting near the right edge, so its menu
   should open aligned to the trigger's left edge instead of the base
   rule's right-aligned default above. */
#more-actions-menu {
    left:  0;
    right: auto;
}

/* Plain rows, not buttons-that-look-like-buttons - same look as
   #canvas-menu-dropdown's span rows below (no border, transparent until
   hovered), overriding the bordered/height-22px look .editor-controls
   button gives every other button in this file. */
.dropdown-menu button {
    width:      100%;
    min-width:  0;
    height:     auto;
    justify-content: flex-start;
    text-align: left;
    gap:        8px;
    padding:    6px 8px;
    border:     none;
    background: none;
    color:      #ccc;
    font-size:  13px;
}

.dropdown-menu button:hover {
    background:   rgba(255,255,255,0.08);
    border-color: transparent;
    color:        #ccc;
}

.dropdown-menu button i {
    width:      14px;
    text-align: center;
}

/* Edit-mode canvas toolbar: burger menu (Pause + device toggles +
   fullscreen + share) and a merged run/stop icon, replacing the
   attribution bar entirely while editing (see nodeeditor.ejs's `viewer`/
   `!viewer` branches - same element ids either way, rendered server-side
   into exactly one of the two locations per request, so all of
   designer.js's existing click-handler wiring for them keeps working
   completely unchanged regardless of which branch rendered). */
#canvas-menu-dropdown {
    left:      0;
    right:     auto;
    min-width: 200px;
}

#canvas-menu-dropdown > span {
    display:       flex;
    align-items:   center;
    gap:           8px;
    width:         100%;
    padding:       6px 8px;
    border-radius: 4px;
    color:         #ccc;
    cursor:        pointer;
    white-space:   nowrap;
    font-size:     13px;
}
#canvas-menu-dropdown > span:hover {
    background: rgba(255,255,255,0.08);
}
#canvas-menu-dropdown > span.hidden {
    display: none;
}
#canvas-menu-dropdown > span i {
    width:      14px;
    text-align: center;
}

.canvas-run-stop {
    display: inline-flex;
}
.canvas-run-stop .toolbar-icon-btn {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    height:         22px;
    width:          22px;
    border-radius:  4px;
    border:         1px solid #ddd;
    background:     #aaa;
    color:          #111;
    cursor:         pointer;
    font-size:      12px;
}
.canvas-run-stop .toolbar-icon-btn:hover {
    background:   #fff;
    border-color: #fff;
    color:        #000;
}
/* start-animation-button toggles a `pressable` class on play/pause/stop
   (see designer.js) to indicate whether it's the enabled/relevant action -
   reuse that same signal here to hide it while animation is already
   running (Stop now lives in the burger menu, not this toolbar). */
.canvas-run-stop #start-animation-button:not(.pressable) {
    display: none;
}

.editor-controls button:disabled,
.editor-controls button:disabled:hover {
    color:          #3a3a3a !important;
    border-color:   #252525 !important;
    background:     none   !important;
    cursor:         not-allowed;
    pointer-events: none;
}

/****

.editor-controls {
    display: flex;
    gap: 10px;
    padding: 10px 5px;
    align-items: center;
    color:white;
    background:#141414;
    font-size:8pt;
}
.editor-controls button {
    padding: 5px 10px;
}
.editor-controls select {
    height:20px;
}

****/

.nodeFormButtons {
    width:100%;
    text-align:center;
}

.nodeFormButton {
    cursor: pointer;
    width:50px;
    margin:4px;
}

.nodeNote {
    background-color: #fffacd; /* Lemon chiffon */
}

.NodesTable input {width:150px;font-size: 10px;}



/* Overlay Container */
#nodeForm {
    position:       fixed;
    display:        none;
    pointer-events: auto;
    z-index:        9000;
    animation:      popupSlideIn 0.15s ease;
}

@keyframes popupSlideIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* Popup Form */
.popup-form {
    background:     #1a1a1a;
    border:         1px solid #2e2e2e;
    border-radius:  8px;
    box-shadow:     0 0 0 1px rgba(0,0,0,0.4), 0 20px 50px rgba(0,0,0,0.5);
    width:          300px;
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    font-family:    -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:      12px;
    color:          #ccc;
}

/* Header */
.popup-header {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       8px 10px;
    background:    #141414;
    border-bottom: 1px solid #2a2a2a;
    cursor:        move;
    user-select:   none;
}

.popup-header-icon {
    width:           28px;
    height:          28px;
    background:      #222;
    border:          1px solid #2e2e2e;
    border-radius:   5px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    color:           #666;
}

.popup-header-text {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}

.popup-title {
    font-size:     11px;
    font-weight:   600;
    color:         #ddd;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.popup-subtitle {
    font-size: 9px;
    color:     #555;
}

.popup-doc-link {
    align-self: flex-start;
    font-size: 9px;
    color:     #555;
    cursor:    pointer;
    transition: color 0.15s;
}

.popup-doc-link:hover {
    color: #888;
}

.popup-close {
    width:           24px;
    height:          24px;
    border:          none;
    background:      none;
    color:           #555;
    font-size:       12px;
    line-height:     1;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
    border-radius:   4px;
    transition:      color 0.15s, background 0.15s;
    flex-shrink:     0;
}

.popup-close:hover {
    color:      #aaa;
    background: rgba(255,255,255,0.06);
}

/* Body */
.popup-body {
    padding:        4px 0;
    max-height:     400px;
    overflow-y:     auto;
    display:        flex;
    flex-direction: column;
}

/* Scrollbar */
.popup-body::-webkit-scrollbar         { width: 6px; }
.popup-body::-webkit-scrollbar-track   { background: #111; }
.popup-body::-webkit-scrollbar-thumb   { background: #2e2e2e; border-radius: 3px; }
.popup-body::-webkit-scrollbar-thumb:hover { background: #444; }

/* Field rows */
.form-field {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     3px 10px;
    min-height:  26px;
    margin:      0;
}

.form-field:hover {
    background: rgba(255,255,255,0.02);
}

.form-field:last-child {
    margin-bottom: 0;
}

/* Label */
.form-label {
    font-size:   10px;
    font-weight: 400;
    color:       #555;
    min-width:   82px;
    max-width:   82px;   /* ← pin the label width so it never grows */
    flex-shrink: 0;
    white-space: nowrap;
    margin:      0;
    display:     block;
    transition:  color 0.15s;
}

/* Input */
.form-input {
    flex:      0 0 auto;   /* ← don't grow or shrink */
    background:    #111;
    border:        1px solid #2a2a2a;
    border-radius: 3px;
    color:         #ccc;
    font-size:     11px;
    font-family:   'Monaco', 'Menlo', 'Courier New', monospace;
    padding:       3px 6px;
    width:         180px;      /* ← fixed width regardless of label length */
    min-width:     0;
    outline:       none;
    box-sizing:    border-box;
    transition:    border-color 0.15s, color 0.15s;
}

.form-input:hover:not(:focus) {
    border-color: #333;
}

.form-input:focus {
    border-color: #444;
    color:        #eee;
    background:   #141414;
    box-shadow:   none;
}

/* Textarea */
.form-textarea {
    min-height:  52px;
    resize:      vertical;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.5;
    align-self:  stretch;
}

/* Note field — subtle warm tint */
.nodeNote {
    background-color: #1e1c10;
    color:            #ccc;
    border-color:     #2e2a18;
}

.nodeNote:focus {
    background-color: #211e10;
    border-color:     #4a4020;
}

/* Footer */
.popup-footer {
    display:    flex;
    gap:        6px;
    padding:    8px 10px;
    background: #141414;
    border-top: 1px solid #2a2a2a;
}

/* Buttons */
.btn-primary,
.btn-secondary {
    flex:            1;
    padding:         5px 12px;
    font-size:       11px;
    font-weight:     500;
    font-family:     inherit;
    border-radius:   4px;
    cursor:          pointer;
    transition:      color 0.15s, border-color 0.15s, background 0.15s;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             5px;
    background:      none;
}

.btn-primary {
    color:        #1abc9c;
    border:       1px solid #1abc9c44;
}

.btn-primary:hover {
    background:   #1abc9c18;
    border-color: #1abc9c88;
}

.btn-primary:active {
    background: #1abc9c28;
}

.btn-secondary {
    color:        #666;
    border:       1px solid #2e2e2e;
}

.btn-secondary:hover {
    color:        #999;
    border-color: #444;
}

.btn-secondary:active {
    background: rgba(255,255,255,0.04);
}

/* Color picker */
.colorTargetInput {
    display: none;
}

/* Color field row — same flex layout as all other fields */
.form-field.color-field {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     3px 10px;
    min-height:  26px;
}

.form-field.color-field .form-label {
    min-width:   72px;
    flex-shrink: 0;
}

button.colorPatch {
    flex:      0 0 auto;   /* ← don't grow or shrink */
    height:        22px;
    min-width:     0;
    width:         180px;      /* ← fixed width regardless of label length */
    border:        1px solid #2a2a2a;
    border-radius: 3px;
    cursor:        pointer;
    transition:    border-color 0.15s;
    position:      relative;
    overflow:      hidden;
    font-size:     10px;
    color:         #888;
    background:    #111;
    padding:       0 6px;
    box-sizing:    border-box;
}

button.colorPatch:hover {
    border-color: #444;
}

/* Editable labels */
.form-label {
    transition: all 0.15s;
}

.form-label[contenteditable="true"] {
    cursor:        text;
    border-radius: 3px;
    padding:       2px 4px;
    margin:        -2px -4px;
}

.form-label[contenteditable="true"]:hover {
    background: rgba(255,255,255,0.04);
    outline:    1px dashed #333;
}

.form-label.editing,
.form-label:focus {
    background: rgba(255,255,255,0.06);
    outline:    1px solid #444;
    color:      #aaa;
    cursor:     text;
}


#editorTooltip {
    position: absolute;
    display: none;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    z-index: 5000;
}

#fileName {
    margin-top:2px;
    margin-bottom:2px;
    cursor: pointer;
}

#fileName.edited {
    color:#f99;
}

#frameRate {
    margin-top:6px;
}

.knob-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: "Open Sans", sans-serif;
}

.knob {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #333;
    position: relative;
    cursor: grab;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.knob::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    width: 8px;
    height: 20px;
    background: #fff;
    border-radius: 4px;
    transform: translateX(-50%);
}

#mainButtons {margin-top:5px;}

.logout-container {
    position: relative;
    display: inline-block;
    text-align:right;
    padding-left:10px;
}

.logout-popup {
    display: none;
    position: absolute;
    right: 0;
    background-color: rgb(45, 55, 65);
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 8px;
    z-index: 1;
    border-radius: 4px;
    text-align:center;
    font-size:12px;
}

.logout-container:hover .logout-popup {
    display: block;
}

.logout-link {
    color: #eee;
    text-decoration: none;
    display: block;
    padding: 4px;
}

.logout-link:hover {
    background-color: #000;
}


/* Base Styles */
.menu-triggerxx {
    padding: 12px 20px;
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.menu-triggerXX:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Section styling */
.nav-section {
  margin-bottom: 30px;
}

.nav-section:last-of-type {
  margin-bottom: 25px;
}

.nav-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-section-title svg {
  color: #6e8efb;
}

/* Keyboard shortcuts grid */
.nav-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .nav-shortcuts-grid {
    grid-template-columns: 1fr;
  }
}

.nav-shortcut-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-shortcut-item:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(3px);
}

.nav-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 3px solid rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.nav-shortcut-item span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

/* Make overlay scrollable if content is too tall */
.nav-overlay-content {
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(110, 142, 251, 0.5) transparent;
}

.nav-overlay-content::-webkit-scrollbar {
  width: 6px;
}

.nav-overlay-content::-webkit-scrollbar-track {
  background: transparent;
}

.nav-overlay-content::-webkit-scrollbar-thumb {
  background: rgba(110, 142, 251, 0.5);
  border-radius: 3px;
}

.nav-overlay-content::-webkit-scrollbar-thumb:hover {
  background: rgba(110, 142, 251, 0.7);
}

/* Navigation Overlay */
.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.nav-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.nav-overlay-content {
  background: linear-gradient(135deg, #2e3842 0%, #1a2127 100%);
  border-radius: 20px;
  padding: 40px;
  max-width: 600px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideIn 0.5s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-overlay-header {
  text-align: center;
  margin-bottom: 30px;
}

.nav-overlay-header h2 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.nav-overlay-header p {
  margin: 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}

.nav-controls-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .nav-controls-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .nav-overlay-content {
    padding: 30px 20px;
    margin: 20px;
  }
}

.nav-control-item {
  text-align: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-control-item:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.nav-icon {
  color: #6e8efb;
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
}

.nav-control-item h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.nav-control-item p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.nav-start-btn {
  width: 100%;
  padding: 16px 32px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 15px rgba(110, 142, 251, 0.4);
}

.nav-start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(110, 142, 251, 0.6);
}

.nav-start-btn:active {
  transform: translateY(0);
}

.nav-start-btn svg {
  transition: transform 0.3s ease;
}

.nav-start-btn:hover svg {
  transform: translateX(5px);
}

.nav-overlay-footer {
  margin-top: 20px;
  text-align: center;
}

.nav-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.nav-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.nav-checkbox:hover {
  color: rgba(255, 255, 255, 0.9);
}


.nav-section-toggle {
  cursor: pointer;
  user-select: none;
  justify-content: space-between;
}

.nav-section-toggle:hover {
  color: #fff;
}

.nav-toggle-icon {
  transition: transform 0.3s ease;
  margin-left: auto;
}

.nav-section-toggle.collapsed .nav-toggle-icon {
  transform: rotate(-90deg);
}

.nav-collapsible {
  max-height: 500px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 1;
}

.nav-collapsible.collapsed {
  max-height: 0;
  opacity: 0;
}

.help-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(110, 142, 251, 0.9);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  z-index: 1000;
}

.help-button:hover {
  transform: scale(1.1);
  background: rgba(110, 142, 251, 1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.verklabs-attribution {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.separator {
  color: rgba(255, 255, 255, 0.5);
  margin-left: 10px;
  margin-right: 10px;
}


.info-overlay {
    position: fixed;
    bottom: var(--timeline-height);  /* replaces bottom: 0 */
    left: 0;
    right: 0;
    /* Opaque, not translucent — in side-by-side this bar spans both the
       light 3D viewport and the dark editor pane, and any transparency
       makes the two halves read as different colors. */
    background: #111;
    padding: 20px;
    z-index: 4250;
    transform: translateY(0);
    transition: transform 0.5s ease-in-out, bottom 0.25s ease;
}

.info-overlay.hidden {
    transform: translateY(100%);
}


/* ------------------------------------------------------------ */

.info-content {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /*max-width: 1200px;*/
  width:100%;
  margin: 0 auto;
  gap: 20px;
}

.info-content .pressable {
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.info-center {
    margin-left:50px;
    margin-right:50px;
    color: rgba(255, 255, 255, 0.1);
}

.info-left {
  justify-self: start; /* Left align */
  font-size: 14px;
}

.info-center {
  justify-self: center; /* Center align */
  display: flex;
  gap: 10px;
  font-size: 14px;
}

.info-right {
  display: flex;           /* Important - enables flexbox */
  justify-content: flex-end; /* Right align */
  align-items: center;     /* Vertically center */
  gap: 10px;              /* Space between items if multiple */
  font-size: 14px;
}

@media (max-width: 768px) {
  .info-content {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .info-center {
    order: 1; /* Show first */
  }
  
  .info-left {
    order: 2; /* Show second */
  }
  
  .info-right {
    order: 3; /* Show third */
  }
  
  .info-left,
  .info-center,
  .info-right {
    justify-self: center;
    justify-content: center;
  }
}


/***

.info-content {
  font-size:10pt;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}***/

.verklabs-attribution .hidden {
    display: none;
}



.verklabs-attribution a,
.verklabs-attribution .owner-credit-link {
  color: #6e8efb;
  text-decoration: none;
  transition: color 0.2s;
}

.verklabs-attribution .owner-credit-link {
  cursor: pointer;
}

.verklabs-attribution a:hover,
.verklabs-attribution .owner-credit-link:hover {
  color: #8fa9ff;
  text-decoration: underline;
}

/* For multi-line version */
.verklabs-attribution .artwork-copyright,
.verklabs-attribution .tool-attribution {
  text-align: center;
  line-height: 1.4;
}

.verklabs-attribution .tool-attribution {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
}

/* Pause Overlay */
.pause-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none; /* Allow clicks to pass through */
}

.pause-overlay.hidden {
    display:none;
    pointer-events: none;
}

.pause-content {
  text-align: center;
  animation: pausePopIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes pausePopIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.play-button-circle {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(110, 142, 251, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  pointer-events: auto; /* Make clickable */
}

.play-button-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 40px rgba(110, 142, 251, 0.7);
}

.play-button-circle:active {
  transform: scale(1.05);
}

.play-icon {
  margin-left: 4px; /* Center the triangle visually */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.pause-text {
  font-size: 32px;
  font-weight: 700;
  color: white;
  margin-bottom: 12px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.pause-hint {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pause-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 32px;
  padding: 0 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 3px solid rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Pulse animation for the play button */
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 8px 32px rgba(110, 142, 251, 0.5);
  }
  50% {
    box-shadow: 0 8px 32px rgba(110, 142, 251, 0.8);
  }
}

.pause-overlay:not(.hidden) .play-button-circle {
  animation: pulse 2s ease-in-out infinite;
}

.termsdiv {
    color:white;
    font-size:9pt;
    text-align:center;
}


/* Tooltip container */
[data-tooltip] {
  position: relative;
  cursor: pointer;
}

/* Tooltip */
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  font-size: 13px;
  white-space: nowrap;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 10000;
}

/* Tooltip arrow */
[data-tooltip]::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 10000;
}

/* Show on hover */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-8px);
}

[data-tooltip]:hover::after {
  transform: translateX(-50%) translateY(-2px);
}



/* position:fixed (viewport-relative) rather than absolute (relative to
   #editor-popup, its parent) so this covers the whole window regardless
   of how big #editor-popup itself is - notably in "sidebyside" mode,
   where #editor-popup is just a ~38%-wide docked pane, not the full
   overlay. Centered on the viewport the same way #editor-popup centers
   itself in overlay mode. */
.popup-menu {
  height: 90vh;
  max-height: 90vh;
  width: 95vw;
  box-sizing: border-box;
  display: none;
  padding: 0;
  background-color: #aaaaaa;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9000;
  border-radius: 16px;
  overflow-y: auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.05);
}

.menu-scroll-container {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #6e8efb #f5f5ff;
  
  /* Use flexbox for horizontal layout */
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

/* Custom scrollbar for Webkit browsers */
.menu-scroll-container::-webkit-scrollbar {
  width: 8px;
}

.menu-scroll-container::-webkit-scrollbar-track {
  background: #f5f5ff;
  border-radius: 0 12px 12px 0;
}

.menu-scroll-container::-webkit-scrollbar-thumb {
  background: #6e8efb;
  border-radius: 4px;
}

.menu-group-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
}

/* Major area sections */
.menu-area {
  padding: 15px 25px 15px 15px; /* top right bottom left */
  border-radius: 12px;
  border: 2px solid rgba(0, 0, 0, 0.08);
  animation: fadeIn 0.3s ease;
  display: inline-flex;
  flex-direction: column;
}

/* Area title (large headers) */
.area-title {
  font-size: 18px;
  font-weight: 700;
  color: #222;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.15);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  white-space: nowrap;
}

/* Container for columns within an area */
.area-columns {
  display: flex;
  gap: 20px;
}

/* Individual column within an area */
.area-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 120px;
}

/* Subsections within areas */
.menu-group {
  margin-bottom: 10px;
}

.menu-group h3 {
  color: #222222;
  padding-top: 0px;
  margin-top: 0px;
}

/* Section titles (subsection headers) */
.section-title {
  color: #030303;
  text-align: center;
  width: 100%;
  padding: 3px;
  padding-top: 0px;
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 6px;
}

.menu-section {
  margin-bottom: 8px;
}

/* Node selector buttons */
.nodeSelector {
  color: #ddd;
  padding: 3px;
  background: #040404;
  border: 2px solid #ccc;
  border-radius: 8px;
  width: 100%;
  text-align: center;
  transition: all 0.3s ease;
  cursor: default;
  margin-bottom: 3px;
  font-size:8pt;
}

.nodeSelector:hover {
  background: #09090a;
  border-color: #6e8efb;
  box-shadow: 0 0 10px rgba(110, 142, 251, 0.5);
  cursor: pointer;
  transform: scale(1.02);
}

@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(10px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@media (max-width: 768px) {
  .popup-menu {
    width: 90vw;
  }

  .menu-scroll-container {
    width: 90vw;
  }
  
  .menu-group-container {
    flex-direction: column;
  }
  
  .area-columns {
    flex-direction: column;
  }
  
  .area-column {
    width: 100%;
  }
  
  .area-title {
    font-size: 16px;
  }
}


.popup-doc-link {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
    letter-spacing: 0.3px;
}

.popup-doc-link:hover {
    color: white;
    text-decoration: underline;
}

/* Search Container */
.node-search-container {
    position: relative;
    padding: 16px;
    background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
    border-bottom: 2px solid #0a2540;
}

/* Search Input */
.node-search-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    transition: all 0.2s;
    box-sizing: border-box;
}

.node-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.node-search-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

/* Search Results Dropdown */
.node-search-results {
    position: absolute;
    top: calc(100% - 8px);
    left: 16px;
    right: 16px;
    max-height: 300px;
    overflow-y: auto;
    background: #2a2a3e;
    border: 2px solid #0f3460;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

.node-search-results.hidden {
    display: none;
}

/* Search Result Item */
.search-result-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover,
.search-result-item.selected {
    background: rgba(15, 52, 96, 0.5);
}

/* Result Content */
.search-result-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-name {
    color: white;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}

.search-result-description {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-category {
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    flex-shrink: 0;
}

/* Highlight matched text */
.search-highlight {
    background: rgba(255, 206, 0, 0.3);
    color: #ffd700;
    font-weight: bold;
}

/* Empty State */
.search-empty {
    padding: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

/* Custom Scrollbar */
.node-search-results::-webkit-scrollbar {
    width: 8px;
}

.node-search-results::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.node-search-results::-webkit-scrollbar-thumb {
    background: #0f3460;
    border-radius: 4px;
}

.node-search-results::-webkit-scrollbar-thumb:hover {
    background: #16213e;
}



#runsheet-timeline {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4600;
    transform: translateY(100%);
    transition: transform 0.25s ease;
}

#runsheet-timeline.visible {
    transform: translateY(0);
}

#runsheet-timeline.collapsed {
    transform: translateY(calc(100% - 65px));
}

/* Scope box-sizing so borders never throw off label/canvas alignment */
.rs-panel,
.rs-panel * {
    box-sizing: border-box;
}

/* ── Panel ───────────────────────────────────────────────────────── */

.rs-panel {
    background: #141414;
    border-radius: 8px;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    user-select: none;
}

/* ── Header ──────────────────────────────────────────────────────── */

.rs-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    height: 42px;
    background: #1c1c1c;
    border-bottom: 1px solid #252525;
    flex-shrink: 0;
}

.rs-clock {
    font-size: 12px;
    color: #999;
    font-family: monospace;
    min-width: 104px;
    letter-spacing: .02em;
}

.rs-frame-count {
    font-size: 11px;
    color: #666;
    font-family: monospace;
    min-width: 72px;
    margin-left: 8px;
}

.rs-spacer { flex: 1; }

.rs-sel-info {
    font-size: 11px;
    color: #666;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rs-fps-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #555;
}

.rs-fps-wrap select {
    background: #1c1c1c;
    border: 1px solid #2e2e2e;
    border-radius: 4px;
    color: #777;
    font-size: 11px;
    padding: 2px 4px;
    cursor: pointer;
}

.rs-btn {
    background: none;
    border: 1px solid #2e2e2e;
    border-radius: 5px;
    color: #666;
    cursor: pointer;
    padding: 5px 9px;
    font-size: 14px;
    display: flex;
    align-items: center;
    transition: border-color .15s, color .15s;
}

.rs-btn:hover { border-color: #444; color: #bbb; }

.rs-btn--text {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    padding: 5px 10px;
    min-width: 80px;
    justify-content: center;
}

/* ── Body ────────────────────────────────────────────────────────── */

.rs-body { display: flex; }

/* ── Label column ────────────────────────────────────────────────── */

.rs-labels {
    width: 90px;
    flex-shrink: 0;
    border-right: 1px solid #1e1e1e;
    display: flex;
    flex-direction: column;
}

/* Ruler spacer — exact same height as canvas ruler (22px, border included) */
.rs-label--ruler {
    height: 22px;
    flex-shrink: 0;
    border-bottom: 1px solid #252525;
    background: #1c1c1c;
}

/* Scroll area clips to MAX_VISIBLE track rows */
.rs-labels-scroll-area {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

/* All track rows stacked; translateY scrolls them */
.rs-labels-inner {
    transition: transform 0.15s ease;
}

/* Individual track label row — height MUST match _TRACK_H (30px, border included) */
.rs-label {
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 4px 0 8px;
    border-bottom: 1px solid #1a1a1a;
    overflow: hidden;
}

.rs-label-text {
    font-size: 10px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: .85;
}

/* Instance suffix e.g. "(2)" shown in muted style */
.rs-label-inst {
    font-size: 9px;
    opacity: .45;
    margin-left: 2px;
    flex-shrink: 0;
}

/* [+] per-track add-event button, revealed on hover */
.rs-label-add {
    background: none;
    border: none;
    color: #444;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 3px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .15s, color .15s;
}

.rs-label:hover .rs-label-add { opacity: 1; }
.rs-label-add:hover { color: #aaa; }

/* Scroll fade indicators at top/bottom of scroll area */
.rs-scroll-indicator {
    position: absolute;
    left: 0;
    right: 0;
    height: 22px;
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    z-index: 2;
    font-size: 11px;
    color: #666;
    transition: color .15s;
}

.rs-scroll-indicator:hover { color: #aaa; }

.rs-scroll-indicator--up {
    top: 0;
    background: linear-gradient(to bottom, #141414 40%, transparent);
}

.rs-scroll-indicator--down {
    bottom: 0;
    background: linear-gradient(to top, #141414 40%, transparent);
}

/* Add Track row */
.rs-add-track-row {
    border-top: 1px solid #1e1e1e;
    padding: 5px 6px;
    flex-shrink: 0;
}

.rs-add-track-btn {
    width: 100%;
    background: none;
    border: 1px dashed #2e2e2e;
    border-radius: 5px;
    color: #555;
    cursor: pointer;
    font-size: 10px;
    padding: 5px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: border-color .15s, color .15s;
}

.rs-add-track-btn:hover { border-color: #444; color: #aaa; }
.rs-add-track-btn:disabled { opacity: .3; cursor: default; }

/* ── Canvas ──────────────────────────────────────────────────────── */

.rs-canvas-wrap { flex: 1; position: relative; overflow: hidden; }
/* touch-action: none - dragging events/markers/scrubbing is driven by
   pointerdown/pointermove/pointerup (RunsheetTimeline.js's _bindEvents())
   so touch can do the same drags a mouse can; without this the browser
   claims a touch-drag on the canvas for page panning/scrolling instead of
   ever delivering pointermove. touch-action alone doesn't stop Safari's
   own text-selection/callout gesture on a press-and-drag though (yes,
   even over a <canvas> with nothing to select) - user-select/
   -webkit-touch-callout: none suppress that separately. */
.rs-canvas {
    display: block;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* ── Inspector ───────────────────────────────────────────────────── */

.rs-inspector {
    position: fixed;
    z-index: 4800;
    min-width: 240px;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.rs-inspector-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #252525;
    border-bottom: 1px solid #2a2a2a;
}

.rs-inspector-track-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rs-inspector-title {
    font-size: 12px;
    font-weight: 500;
    color: #aaa;
    flex: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rs-inspector-close {
    background:  none;
    border:      none;
    color:       #555;
    font-size:   13px;
    cursor:      pointer;
    padding:     2px 4px;
    border-radius: 3px;
    display:     flex;
    align-items: center;
    line-height: 1;
    transition:  color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.rs-inspector-close:hover {
    color:      #aaa;
    background: rgba(255,255,255,0.06);
}

.rs-inspector-fields {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rs-inspector-field { display: flex; align-items: center; gap: 10px; }

.rs-inspector-label {
    font-size: 11px;
    color: #666;
    min-width: 76px;
    flex-shrink: 0;
}

.rs-inspector input[type="text"],
.rs-inspector input[type="number"] {
    flex: 1;
    background: #141414;
    border: 1px solid #2e2e2e;
    border-radius: 4px;
    color: #bbb;
    font-size: 11px;
    font-family: monospace;
    padding: 5px 8px;
    outline: none;
    transition: border-color .15s, color .15s;
    min-width: 0;
}

.rs-inspector input[type="text"]:focus,
.rs-inspector input[type="number"]:focus { border-color: #555; color: #ddd; }

.rs-inspector input[type="color"] {
    width: 36px;
    height: 26px;
    border: 1px solid #2e2e2e;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    padding: 1px 2px;
}

.rs-inspector select {
    flex: 1;
    background: #141414;
    border: 1px solid #2e2e2e;
    border-radius: 4px;
    color: #bbb;
    font-size: 11px;
    padding: 5px 6px;
    outline: none;
    cursor: pointer;
}

.rs-inspector select:focus { border-color: #555; }

.rs-inspector-divider { height: 1px; background: #2a2a2a; margin: 2px 0; }

/* Read-only counterpart to the text/number inputs above - same text
   color/size/font, no input chrome, for fields that only display a value
   (e.g. the user-profile modal's ID/Member/Storage rows, designer.ejs). */
.rs-inspector-value {
    flex: 1;
    color: #bbb;
    font-size: 11px;
    font-family: monospace;
}

/* ── Context menu + Track picker ─────────────────────────────────── */

.rs-context-menu {
    position: fixed;
    z-index: 4801;
    min-width: 190px;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 8px 28px rgba(0,0,0,.6);
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.rs-context-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px 4px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #555;
}

.rs-context-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rs-context-divider { height: 1px; background: #2a2a2a; margin: 3px 0; }

.rs-context-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    font-size: 12px;
    color: #999;
    cursor: pointer;
    border-radius: 5px;
    transition: background .1s, color .1s;
}

.rs-context-item:hover { background: #2a2a2a; color: #ddd; }
.rs-context-item i { font-size: 13px; color: #555; flex-shrink: 0; }
.rs-context-item:hover i { color: #aaa; }

.rs-context-frame {
    margin-left: auto;
    font-size: 10px;
    font-family: monospace;
    color: #444;
}

.rs-context-item--danger { color: #c0392b !important; }
.rs-context-item--danger i { color: #8b2020 !important; }
.rs-context-item--danger:hover { color: #e05050 !important; }


.rs-resize-handle {
    position: relative;
    height: 6px;
    cursor: ns-resize;
    background: transparent;
    border-top: 2px solid #252525;
    flex-shrink: 0;
    transition: border-color 0.15s;
    touch-action: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.rs-resize-handle:hover {
    border-top-color: #444;
}
/* Widen the touch hit area well past the visible 6px line - a fingertip
   can't reliably land on a strip that thin, and a miss falls through to
   the browser's default select/scroll behavior instead of the drag. */
.rs-resize-handle::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    bottom: -12px;
}

.rs-scrollbar-track {
    width: 8px;
    background: #111;
    position: relative;
    flex-shrink: 0;
    border-left: 1px solid #1a1a1a;
    transition: opacity 0.2s;
}

.rs-scrollbar-thumb {
    position: absolute;
    left: 1px;
    right: 1px;
    background: #333;
    border-radius: 4px;
    cursor: grab;
    min-height: 24px;
    transition: background 0.15s;
    touch-action: none;
}
.rs-scrollbar-thumb:hover  { background: #484848; }
.rs-scrollbar-thumb:active { background: #555; cursor: grabbing; }

.rs-inspector-picker {
    flex: 0 0 auto;
    width: 180px;
    height: 22px;
    padding: 0 8px;
    background: #141414;
    border: 1px solid #2e2e2e;
    border-radius: 4px;
    color: #1abc9c;                 /* filename in the accent colour */
    font: inherit;
    font-size: 11px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;        /* long names truncate with … */
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.rs-inspector-picker:hover  { border-color: #1abc9c; background: #181818; }
.rs-inspector-picker:active { background: #111; }
.rs-inspector-picker--empty { color: #555; font-style: italic; }   /* placeholder state */

.rs-inspector-field--checklist { flex-direction: column; align-items: flex-start; gap: 4px; }

.rs-inspector-checklist {
  display: flex; flex-direction: column; gap: 3px;
  width: 100%;
  max-height: 160px; overflow-y: auto;          /* scrolls if the list is long */
}
.rs-inspector-check {
  display: flex; align-items: center; gap: 6px;
  font: 11px -apple-system, sans-serif;
  color: #bbb; cursor: pointer; user-select: none;
}
.rs-inspector-check input { margin: 0; accent-color: #00bcd4; }
.rs-inspector-check:hover { color: #fff; }

.rs-inspector-checklist-empty { font: 11px -apple-system, sans-serif; color: #555; padding: 2px 0; }


.rs-bpm {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 6px;
}

.rs-bpm-label {
    font-size: 10px;
    opacity: 0.6;
    color: white;
}

.rs-bpm-input {
    width: 44px;
    padding: 1px 4px;
    background: #222;
    color: #ddd;
    border: 1px solid #333;
    border-radius: 3px;
    font-size: 11px;
    text-align: right;
    -moz-appearance: textfield;   /* Firefox: remove spinner */
}

.rs-bpm-input::-webkit-inner-spin-button,
.rs-bpm-input::-webkit-outer-spin-button {
    -webkit-appearance: none;     /* Chrome/Safari: remove spinner */
    margin: 0;
}

/** storage manager css **/

.dialog-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.dialog-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 800px;
  max-height: 80vh;
  overflow: auto;
}

.tab-buttons {
  display: flex;
  margin-bottom: 15px;
}

.tab-buttons button {
  padding: 8px 16px;
  background: #f0f0f0;
  border: none;
  cursor: pointer;
}

.tab-buttons button.active {
  background: #4285f4;
  color: white;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.search-controls {
  margin-bottom: 15px;
  display: flex;
  gap: 10px;
}

.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
}

.asset-card {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
}

.asset-card:hover {
  border-color: #4285f4;
}

.asset-card.selected {
  border-color: #4285f4;
  background: #e8f0fe;
}

.asset-card img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.drop-zone {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
  margin-bottom: 15px;
  border-radius: 4px;
}

.drop-zone.active {
  border-color: #4285f4;
  background: #e8f0fe;
}

.file-input-label {
  display: inline-block;
  padding: 8px 16px;
  background: #4285f4;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.upload-meta {
  margin-bottom: 15px;
}

.upload-meta input, .upload-meta textarea, .upload-meta select {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.upload-queue {
  margin-bottom: 15px;
}

.queued-file {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  border-bottom: 1px solid #eee;
}

.close-btn {
  margin-top: 15px;
  padding: 8px 16px;
  background: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.close-btn:hover {
  background: #ddd;
}

.dialog-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    z-index:9500;
}

/* -------------------------------------------------- */

.info-tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 12px;
  font-style: italic;
}

.tooltip-text {
  white-space: pre-wrap; /* Also preserves spaces and tabs */
  width: 200px;
  background: #999;
  color: #111;
  text-align: left;
  border-radius: 4px;
  padding: 8px;
  position: absolute;
  z-index: 100;
  bottom: 125%;
  left: 50%;
  visibility: hidden;
  transform: translateX(-50%);
  opacity: 0;
}

/*
.info-tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}*/

/* TEXT TEXTURE POPUP ---------------------------------------------------------------------- */

:root {
    --border: 1px solid #bbb;
    --border-color: #bbb;
    --field-bg: #aaa;
}

/* Isolated styling with prefix to avoid conflicts */
.text-texture-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(0, 0, 0, 0.4);*/
    /*backdrop-filter: blur(5px);*/
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: "Open Sans", sans-serif; /*-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;*/
}

.text-texture-popup {
    background: rgb(45,55,65,0.8);
    border-radius: 4px;
    border: var(--border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    color: #aaa;
    position: relative;
}

.text-texture-popup-header {
    padding: 4px 8px;
    border-bottom: 2px solid #aaa;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px 4px 0 0;
}

.text-texture-popup h2 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: #aaa;
    /*text-shadow: 0 2px 10px rgba(233, 69, 96, 0.3);*/
}

.text-texture-popup-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 12px;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.text-texture-popup-close:hover {
    background: rgba(233, 69, 96, 0.2);
    transform: scale(1.1);
}

.text-texture-popup-content {
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 8px;
}

.text-texture-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.text-texture-control-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.text-texture-control-group label {
    /*font-weight: 600;*/
    color: #aaa;
    font-size: 12px;
    /*text-transform: uppercase;*/
    letter-spacing: 0.5px;
}

.text-texture-control-group input,
.text-texture-control-group select,
.text-texture-control-group textarea {
    padding: 2px 4px;
    border: var(--border);
    border-radius: 4px;
    background: rgba(125, 125, 125, 0.3);
    color: #ddd;
    font-size: 12px;
    transition: all 0.3s ease;
    outline: none;
}

.text-texture-control-group input:focus,
.text-texture-control-group select:focus,
.text-texture-control-group textarea:focus {
    border-color: var(--border-color);
    box-shadow: 0 0 2px rgba(35, 45, 55, 0.2);
    transform: translateY(-2px);
}

.text-texture-control-group textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.text-texture-color-input {
    width: 100%;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;
}

.text-texture-preview {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.text-texture-preview h3 {
    margin: 0;
    color: var(--border-color);
    font-size: 12px;
    font-weight: 600;
}

.text-texture-canvas {
    border: var(--border);
    border-radius: 4px;
    background: #000;
    max-width: 256px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.text-texture-buttons {
    grid-column: 1 / -1;
    display: flex;
    gap: 2px;
    justify-content: flex-end;
    padding-top: 20px;
}

.text-texture-btn {
    padding: 6px 24px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.text-texture-btn-cancel {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: var(--border);
}

.text-texture-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.text-texture-btn-apply {
    background: #888
    color: white;
    /*box-shadow: 0 5px 20px #bbb;*/
}

.text-texture-btn-apply:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(200,200,200, 0.4);
}

.text-texture-range-container {
    display: flex;
    align-items: center;
    gap: 2px;
}

.text-texture-range {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: rgba(125, 125, 125, 0.5);
    outline: none;
}

.text-texture-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e94560, #f27121);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(233, 69, 96, 0.3);
}

.text-texture-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e94560, #f27121);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 10px rgba(233, 69, 96, 0.3);
}

.text-texture-range-value {
    min-width: 40px;
    text-align: center;
    font-weight: 600;
    color: #aaa;
}

@media (max-width: 768px) {
    .text-texture-popup-content {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    
    .text-texture-preview {
        order: -1;
    }
}

/* file system styles */

/* { box-sizing: border-box; margin: 0; padding: 0; } */
/* body { font-family: Arial, sans-serif; background: #f5f5f5; } */

/*.file-manager { max-width: 1200px; margin: 20px auto; background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } */

.file-type {
    padding:2px;
    font-weight:600;
    color: #999;
}

/* File Manager Modal Container */
.file-manager-modal {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 5000;
    overflow: auto;
}

/* File Manager Content */
.file-managerOLD {
    position: relative;
    max-width: 1200px;
    height: 90vh;
    margin: 40px auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    overflow: hidden;
    animation: modalFadeIn 0.3s ease;
}

.file-manager {
    position: relative;
    max-width: 1200px;
    height: 90vh; /* Change to fixed height instead of max-height */
    margin: 40px auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    overflow: hidden;
    animation: modalFadeIn 0.3s ease;
    display: flex;
    flex-direction: column; /* Add this */
}

.asset-usage.file-manager {
    margin: 0px;
    height: 200px;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.file-manager .header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    flex-shrink: 0; /* Prevent header from shrinking */
}

.file-manager .toolbar {
    padding: 15px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    display: flex;
    gap: 10px;
    background: white;
    flex-shrink: 0; /* Prevent toolbar from shrinking */
}

/* Ensure content within file manager is properly styled */
.file-managerOLD .header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
}

.file-managerOLD .toolbar {
    padding: 15px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    display: flex;
    gap: 10px;
    background: white;
}



.file-manager-close {
    position: absolute; 
    top: 15px;
    right: 15px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 16px;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-manager-close:hover {
    background: #c82333;
}

#fileManagerBack { cursor: pointer; }

.header { padding: 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.breadcrumb { display: flex; align-items: center; gap: 5px; font-size: 14px; color: #666; }
.breadcrumb span { cursor: pointer; }
.breadcrumb span:hover { color: #007bff; }
.breadcrumb .separator { margin: 0 5px; color: #999; }

.owner-name-link { cursor: pointer; font-weight: 600; color: #007bff; }
.owner-name-link:hover { text-decoration: underline; }

.toolbar { padding: 15px 20px; background: #f8f9fa; border-bottom: 1px solid #eee; display: flex; gap: 10px; }
.toolbar button { padding: 8px 16px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer; }
.toolbar button:hover { background: #f0f0f0; }
.toolbar select { padding: 8px 16px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer; }

.content { padding: 20px; }

.file-manager .content {
    flex: 1; /* Take remaining space */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    background: white;
}

.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    padding-bottom: 20px; /* Reduce this padding */
    min-height: min-content;
}


/* style="height:100px;width:100px;object-fit:cover;margin-bottom:10px;" */

.file-thumbnail {
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-bottom: 10px;
  border-radius: 4px; /* Optional: adds rounded corners */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Optional: adds subtle shadow */
}

/* File Item Styles with Actions */
.file-item {
    position: relative;
    background: white;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 15px;
    cursor: pointer;
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;    /* Centers horizontally */
    justify-content: top; /* Centers vertically */
}

.file-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.file-item.folder {
    background: #e3f2fd;
    border-color: #bbdefb;
}

.file-item.not-owner {
    background: #eee;
    border-color: #bbdefb;
}

.file-item .icon {
    font-size: 4em;
    text-align: center;
    padding-top: 20px;
    height:80px;
    width:100px;
    margin-bottom:10px
}

.file-item .file-name {
    font-size: 10px;
    font-weight: 600;
    word-break: break-word;
    margin-bottom: 5px;
}

.file-item .size {
    font-size: 10px;
    color: #666;
    margin-bottom: 5px;
}

.file-item .description {
    padding: 5px;

    margin-top:15px;
    font-size: 9px;
    color: #777;
    font-style: italic;
    max-height: 60px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #eee;
    border-radius: 3px;
    background: #fafafa;
    line-height: 1.3;
    
    /* Gentler word breaking */
    word-wrap: break-word;
    word-break: break-word; /* Less aggressive than break-all */
    overflow-wrap: anywhere;
    
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0; /* Important for flex containers */
}

.file-item .description p,
.file-item .description div,
.file-item .description span {
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit;
}

.file-item .OLDdescription {
    font-size: 10px;
    color: #888;
    font-style: italic;
    margin-bottom: 10px;
    max-height: 2.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Action Buttons */
.file-actions {
    position: absolute;
    top: 5px;
    right: 5px;
    display: none;
    gap: 5px;
}

.file-item:hover .file-actions {
    display: flex;
}

/***
.file-item { background: white; border: 1px solid #eee; border-radius: 6px; padding: 15px; text-align: center; cursor: pointer; transition: transform 0.2s; }
.file-item:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.file-item.folder { background: #e3f2fd; border-color: #bbdefb; }
.file-item .icon { font-size: 2em; margin-bottom: 8px; }
.file-item .name { font-size: 12px; word-break: break-word; }
.file-item .size { font-size: 11px; color: #666; margin-top: 5px; }
***/

/* NEW ---------------------------------------------------------------------- */



/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Edit Modal - Simplified without pseudo-elements */
.modal * {
    font-size:9pt;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 5500;
}

.modal .modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    background: white;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}




/* Fix for input sizing */
.modal .form-group {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fafafa;
    box-sizing: border-box; /* ← Add this */
}

.modal input[type="text"],
.modal input[type="email"],
.modal textarea,
.modal select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 10px;
    background: white;
    margin-bottom: 8px;
    box-sizing: border-box; /* ← CRITICAL: Add this */
}

/* Specific fix for textarea */
.modal textarea {
    resize: vertical;
    min-height: 80px;
    box-sizing: border-box; /* ← Ensure textarea also has this */
}

/* Fix for flex container inputs */
.modal .share-input-group,
.modal .move-folder-group {
    display: flex;
    gap: 10px;
    box-sizing: border-box; /* ← Add this */
}

.modal .share-input-group input,
.modal .move-folder-group select {
    flex: 1;
    margin: 0;
    box-sizing: border-box; /* ← Add this */
}

/* Ensure all elements use border-box */
.modal *,
.modal *::before,
.modal *::after {
    box-sizing: border-box;
}












/* Basic form styles */

.modal label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

/* Radio buttons - simplified */
.modal .radio-group {
    display: flex;
    gap: 15px;
    margin-top: 8px;
}

.modal .radio-label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 2px solid #ddd;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    transition: border-color 0.2s;
}

.modal .radio-label:hover {
    border-color: #007bff;
}

.modal .radio-label input[type="radio"] {
    margin: 0;
}

.modal .radio-label input[type="radio"]:checked {
    accent-color: #007bff;
}

.modal .radio-text {
    font-size: 10px;
}

/* Remove permissions list styles since it's gone */
.modal .permissions-list {
    display: none; /* Hide the entire permissions section */
}

/* Style for the permission note */
.modal .permission-note {
    margin-top: 10px;
    padding: 8px;
    background: #e8f4ff;
    border: 1px solid #b8daff;
    border-radius: 4px;
    font-size: 9x;
    color: #004085;
}

.modal .permission-note small {
    font-size: 9px;
    line-height: 1.4;
}

.modal .share-input-group button {
    padding: 10px 16px;
    white-space: nowrap;
}

.modal .shared-users-list {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    background: white;
    max-height: 120px;
    overflow-y: auto;
}

.user-info {
    padding-right:50px;
}

.modal .shared-user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    margin-bottom: 5px;
    background: #f8f9fa;
    border-radius: 3px;
}

.modal .shared-user-item:last-child {
    margin-bottom: 0;
}

.modal .remove-user-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 9px;
}

/* Move folder group */
.modal .move-folder-group button {
    padding: 10px 16px;
    white-space: nowrap;
}

/* Current location */
.modal .current-location {
    padding: 10px;
    background: #f0f0f0;
    border-radius: 4px;
    font-size: 10px;
    color: #666;
    border: 1px solid #ddd;
}

/* Modal buttons */
.modal .modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.modal .modal-buttons button {
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    min-width: 100px;
}

.modal #canceleditmodal {
    background: #6c757d;
    color: white;
}

.modal #confirmeditmodal.primary {
    background: #007bff;
    color: white;
}

/* Hover effects */
.modal button:hover {
    opacity: 0.9;
}

.modal #canceleditmodal:hover {
    background: #5a6268;
}

.modal #confirmeditmodal.primary:hover {
    background: #0056b3;
}

/* Responsive */
@media (max-width: 768px) {
    .modal .modal-content {
        width: 95%;
        padding: 16px;
    }
    
    .modal .radio-group,
    .modal .permissions-list {
        flex-direction: column;
        gap: 10px;
    }
    
    .modal .move-folder-group {
        flex-direction: column;
    }
    
    .modal .modal-buttons {
        flex-direction: column;
    }
    
    .modal .modal-buttons button {
        width: 100%;
    }
}

// Add CSS for the access badge
.modal .access-badge {
    background: #6c757d;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    margin-right: 8px;
}

/* ---------------------------------------------------------------------- */

.delete-btn {
    background: #dc3545;
    color: white;
    border: none;
}

.delete-btn:hover {
    background: #c82333;
}

/* Loading state for actions */
.action-btn.loading {
    opacity: 0.6;
    pointer-events: none;
}

.action-btn.loading::after {
    content: '...';
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0%, 33% { content: '.'; }
    34%, 66% { content: '..'; }
    67%, 100% { content: '...'; }
}


/*.modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 8px; min-width: 300px; }*/
/*
.modal input, .modal select { width: 100%; padding: 8px; margin: 8px 0; border: 1px solid #ddd; border-radius: 4px; }
.modal-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; }
*/

.loading { text-align: center; padding: 40px; color: #666; }
.error { background: #ffe6e6; color: #d32f2f; padding: 10px; border-radius: 4px; margin: 10px 0; }

.primary {
    background: #007bff;
    color: white;
    border: none;
}

.primary:hover {
    background: #0056b3;
}

/* Folder Browser Styles */
.folder-browser {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 10px 0;
}

.folder-path {
    padding: 10px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    font-size: 12pt;
}

.folder-list {
    padding: 10px;
}

.folder-item {
    padding: 8px;
    margin: 5px 0;
    background: white;
    border: 1px solid #eee;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.folder-item:hover {
    background: #e3f2fd;
    border-color: #bbdefb;
}

.folder-item .icon {
    margin-right: 8px;
    font-size: 12pt;
}

.folder-item.selected {
    background: #007bff;
    color: white;
    border-color: #0056b3;
}

.action-btn {
    height: 25px;
    padding: 5px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.action-btn:hover {
    opacity: 1;
}

.edit-btn {
    background: #333;
    color: white;
}

.delete-btn {
    background: #dc3545;
    color: white;
}

.action-btn:hover {
    transform: scale(1.1);
}

/* Responsive actions for mobile */
@media (max-width: 768px) {
    .file-actions {
        display: flex !important; /* Always show on mobile */
        opacity: 0.8;
    }
    
    .action-btn {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }
}

/* Drag & Drop Styles */
.drop-zone {
    border: 2px dashed #007bff;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    background: #f8f9fa;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: 20px;
}

.drop-zone:hover {
    background: #e8f4ff;
    border-color: #0056b3;
}

.drop-zone.drag-over {
    background: #d1ecff;
    border-color: #0056b3;
    transform: scale(1.02);
}

.drop-content {
    pointer-events: none;
}

.drop-icon {
    font-size: 3em;
    margin-bottom: 15px;
}

.drop-text {
    font-size: 1.2em;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.drop-subtext {
    color: #666;
    margin-bottom: 15px;
}

.browse-button {
    display: inline-block;
    padding: 10px 20px;
    background: #007bff;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    z-index:9999;
    pointer-events: auto;
}

.browse-button:hover {
    background: #0056b3;
}

.file-input-hidden {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important; /* ← Add this */
}


/* File List Styles */
.file-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 20px;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 10px;
}

.selected-file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
    margin-bottom: 5px;
}

.selected-file-item:last-child {
    margin-bottom: 0;
}

.file-info {
    flex: 1;
}

.file-name {
    font-weight: 600;
    margin-bottom: 2px;
}

.file-size {
    font-size: 0.9em;
    color: #666;
}

.remove-file {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 0.9em;
}

.remove-file:hover {
    background: #c82333;
}

/* Progress Bar Styles */
.upload-progress {
    margin-bottom: 20px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill {
    height: 100%;
    background: #007bff;
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s ease;
}

.progress-text {
    text-align: center;
    font-size: 0.9em;
    color: #666;
}

.progress-percent {
    font-weight: 600;
    color: #007bff;
}

/* Upload button states */
#confirmfileupload:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

#confirmfileupload:disabled:hover {
    background: #6c757d;
}

/* new color picker ------------------------------------------------------------ */

.color-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9900;
}

.color-picker-dialog {
    background: #aaaaaa;/*rgba(200,200,200,1);*/
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    width: 400px; /* Increased from 320px to 400px */
    font-family: Arial, sans-serif;
}

.color-preview {
    width: 100%;
    height: 60px;
    border-radius: 4px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.picker-area {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.hue-alpha-container {
    width: 60px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.gradient-slider {
    width: 30px;
    height: 200px; /* Increased to match taller color canvas */
    border-radius: 4px;
    border: 1px solid #ccc;
    cursor: pointer;
    position: relative;
}

.slider-thumb {
    width: 24px;
    height: 8px;
    border: 2px solid white;
    border-radius: 2px;
    position: absolute;
    left: -2px;
    pointer-events: none;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    /*transform: translateY(-50%); /* Center vertically */
}

.color-canvas {
    width: 280px; /* Increased width for rectangular shape */
    height: 200px; /* Increased height */
    border-radius: 4px;
    border: 1px solid #ccc;
    cursor: crosshair;
    position: relative;
}

.color-canvas-thumb {
    width: 12px;
    height: 12px;
    border: 2px solid white;
    border-radius: 50%;
    position: absolute;
    pointer-events: none;
    box-shadow: 0 0 2px rgba(0,0,0,0.8);
    transform: translate(-50%, -50%); /* This centers the thumb */
}

.input-modes {
    display: flex;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.mode-tab {
    padding: 8px 16px;
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
}

.mode-tab.active {
    border-bottom-color: #007bff;
    color: #007bff;
}

.input-group {
    display: none;
    margin-bottom: 10px;
}

.input-group.active {
    display: block;
}

/* Updated input rows to prevent wrapping */
.input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: nowrap; /* Prevent wrapping */
}

.input-row label {
    font-size: 12px;
    color: #666;
    flex-shrink: 0;
    text-align: right;
}

.input-row input {
    width: 60px; /* Slightly wider */
    padding: 4px 6px; /* Better padding */
    margin: 2px 2px;
    border: 1px solid #ccc;
    border-radius: 3px;
    text-align: center;
    flex-shrink: 0;
}

.hex-input {
    width: 100px !important; /* Wider for hex */
}

.alpha-input {
    width: 50px !important; /* Wider for alpha */
}

.input-row span {
    flex-shrink: 0;
    font-size: 12px;
    color: #666;
}

/* Specific layout for RGB inputs to fit in one row */
#rgbGroup .input-row:first-child {
    justify-content: space-between;
    gap: 5px;
}

#rgbGroup .input-row:first-child label {
    width: 15px;
}

#rgbGroup .input-row:first-child input {
    width: 55px;
}

#hslGroup .input-row:first-child {
    justify-content: space-between;
    gap: 5px;
}

#hslGroup .input-row:first-child label {
    width: 15px;
}

#hslGroup .input-row:first-child input {
    width: 55px;
}

.picker-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;
}

.picker-actions button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.cancel-btn {
    background: #f8f9fa;
    border: 1px solid #ccc !important;
}

.confirm-btn {
    background: #007bff;
    color: white;
}

/* natural language popup */

.nl-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.nl-popup-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 500px;
    max-width: 90vw;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.nl-popup-title {
    margin: 0 0 15px 0;
    font-size: 18px;
    color: #333;
}

.nl-text-area {
    width: 100%;
    height: 150px;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
}

.nl-button-group {
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
    gap: 10px;
}

.nl-button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    flex: 1;
}

.nl-run-button {
    background: #007bff;
    color: white;
}

.nl-run-button:hover:not(:disabled) {
    background: #0056b3;
}

.nl-run-button:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

.nl-close-button {
    background: #6c757d;
    color: white;
}

.nl-close-button:hover {
    background: #545b62;
}

.nl-status-area {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
    min-height: 40px;
    font-size: 14px;
    line-height: 1.4;
}

.nl-status-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.nl-status-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.nl-status-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.nl-status-warning {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.nl-hidden {
    display: none;
}

.nl-open-button {
    margin: 20px;
    padding: 10px 20px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.nl-open-button:hover {
    background: #218838;
}

/* JSON editor */



/* Reset for the modal and its direct children */
.je-editor-modal,
.je-editor-modal > *,
.je-editor-content,
.je-editor-header,
.je-editor-body,
.je-json-viewer,
.je-json-item,
.je-json-key,
.je-json-line {
    font-family: 'Courier New', monospace !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #d4d4d4 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
    list-style: none !important;
}

/* Restore padding to modal elements */
.je-editor-body {
    padding: 20px !important;
}

.je-editor-header {
    padding: 12px 20px !important;
}

.je-container {
    padding: 20px !important;
}

.je-modal-content {
    padding: 30px !important;
}

.je-editor-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: 80% !important;
    max-width: 500px !important;
    height: 80vh !important;
    background: #252526 !important; /* Set background only on the modal itself */
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 1000 !important;
}

/* Reset for buttons specifically */
.je-editor-modal button,
.je-btn-open-editor {
    font-family: 'Courier New', monospace !important;
    font-size: 14px !important;
    background: #0e639c !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
}

/* Reset for textareas */
.je-editor-modal textarea {
    font-family: 'Courier New', monospace !important;
    font-size: 14px !important;
    background: #1e1e1e !important;
    color: #d4d4d4 !important;
    border: 1px solid #3e3e42 !important;
}

/* Add these after your reset */
.je-json-item {
    margin-left: 20px !important;
}

.je-json-children {
    margin-left: 10px !important;
}

.je-json-line {
    display: block !important;
    margin-bottom: 2px !important;
}

.je-btn-open-editor {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #0e639c;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    z-index: 999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.je-btn-open-editor:hover {
    background: #1177bb;
}

.je-editor-modal.je-hidden {
    display: none !important;
}

.je-modal.je-active {
    display: flex !important;
}

.je-modal {
    display: none !important;
}

.je-editor-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.je-editor-header {
    font-family: 'Courier New', monospace;

    background: #1e1e1e;
    padding: 12px 20px;
    border-radius: 8px 8px 0 0;
    cursor: move;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #9cdcfe;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #3e3e42;
}

.je-editor-header:active {
    cursor: grabbing;
}

.je-btn-close {
    background: transparent;
    border: none;
    color: #d4d4d4;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}

.je-btn-close:hover {
    background: #f48771;
    color: white;
}

.je-editor-body {
    flex: 1;
    overflow: auto;
    padding: 20px;
}

.je-container {
    max-width: 1200px;
    margin: 0 auto;
    background: #252526;
    border-radius: 8px;
    padding: 20px;
}

.je-json-viewer {
    font-size: 14px;
    line-height: 1.6;
}

.je-json-item {
    margin-left: 20px;
}

.je-json-key {
    color: #9cdcfe;
    cursor: pointer;
}

.je-json-string {
    color: #ce9178;
}

.je-json-number {
    color: #b5cea8;
}

.je-json-boolean {
    color: #569cd6;
}

.je-json-null {
    color: #569cd6;
}

.je-expand-icon {
    display: inline-block;
    width: 12px;
    cursor: pointer;
    user-select: none;
    color: #858585;
    font-weight: bold;
}

.je-collapsed > .je-json-children {
    display: none;
}

.je-btn-add {
    background: #0e639c;
    color: white;
    border: none;
    padding: 2px 8px;
    margin-left: 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
}

.je-btn-add:hover {
    background: #1177bb;
}

.je-json-line {
    position: relative;
    display: inline-block;
}

.je-btn-delete {
    background: #c93a3a;
    color: white;
    border: none;
    padding: 1px 6px;
    margin-left: 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    font-family: inherit;
    opacity: 0;
    transition: opacity 0.2s;
}

.je-json-line:hover > .je-btn-delete {
    opacity: 1;
}

.je-btn-delete:hover {
    background: #e74c3c;
}

.je-btn-edit {
    background: #0e7490;
    color: white;
    border: none;
    padding: 1px 6px;
    margin-left: 4px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    font-family: inherit;
    opacity: 0;
    transition: opacity 0.2s;
}

.je-json-line:hover > .je-btn-edit {
    opacity: 1;
}

.je-btn-edit:hover {
    background: #0891b2;
}

.je-btn-edit-all {
    background: #6b5b95;
    color: white;
    border: none;
    padding: 2px 8px;
    margin-left: 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
}

.je-btn-edit-all:hover {
    background: #8b7bb5;
}

.je-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.je-modal-content {
    background: #252526;
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.je-modal-header {
    font-size: 18px;
    margin-bottom: 15px;
    color: #9cdcfe;
}

.je-modal-subheader {
    font-size: 12px;
    color: #858585;
    margin-bottom: 15px;
}

.je-modal-body {
    flex: 1;
    overflow: auto;
}

.je-textarea {
    width: 100%;
    min-height: 300px;
    background: #1e1e1e;
    color: #d4d4d4;
    border: 1px solid #3e3e42;
    border-radius: 4px;
    padding: 10px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box !important; 
}

.je-modal-footer {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.je-btn {
    display: inline-block;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
}

.je-btn-primary {
    background: #0e639c;
    color: white;
}

.je-btn-primary:hover {
    background: #1177bb;
}

.je-btn-secondary {
    background: #3e3e42;
    color: #d4d4d4;
}

.je-btn-secondary:hover {
    background: #505050;
}

.je-btn-logout {
    margin-right: auto;
}

.je-error {
    color: #f48771;
    font-size: 12px;
    margin-top: 8px;
}

.je-error:empty {
    margin-top: 0;
}

.je-input {
    width: 100%;
    background: #1e1e1e;
    color: #d4d4d4;
    border: 1px solid #3e3e42;
    border-radius: 4px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
    margin-bottom: 12px;
}

.je-input:focus {
    outline: none;
    border-color: #0e639c;
}

/* Above every other overlay in the app - the highest z-index anywhere else
   here is 10001 (see the file-manager/help/node-menu overlays). This one
   has to win regardless of what's open underneath it (the runsheet's
   attribute editor, the node editor in split-screen, etc.), since signing
   in must never be blocked behind something else. */
#loginModalOverlay {
    z-index: 999999;
}

.login-modal-content {
    max-width: 420px;
}

/* Narrower than the shared .je-modal-content default (600px) - a handful
   of short label/value rows doesn't need that much width, and left the
   right half of the card empty. */
#userProfileModalOverlay .je-modal-content {
    max-width: 360px;
}

/* Same reasoning as #loginModalOverlay above - has to win over whatever's
   already open underneath it (the node editor docked in side-by-side
   mode in particular), not just the shared .je-modal default (1000). */
#userProfileModalOverlay {
    z-index: 999999;
}

.login-modal-hidden {
    display: none !important;
}

/* Settings/Properties (settingsmodal.ejs/propertiesmodal.ejs) - floating,
   draggable popups reusing the runsheet's own attribute-editor look
   (.rs-inspector-*, RunsheetTimeline.ejs) rather than the centered
   .je-modal overlay above, so they can be moved out of the way instead of
   blocking the screen, and sit on top of the canvas/editor/dividers (same
   4800 z-index as that inspector, well above #editor-popup/#editor-splitter's
   2000/2001) rather than fighting them for stacking order. Dragging
   (initSettingsModal()/initPropertiesModal(), designer.js) mirrors
   RunsheetTimeline.js's _bindInspectorDrag() exactly. */
.settings-properties-popup {
    display:        none;
    flex-direction: column;
    /* Narrower than the original 480px - with full-width buttons/selects/
       inputs (.popout-grid's 1fr control column), 480px made those controls
       stretch further than they needed to for this popup's field lengths. */
    width:          360px;
    max-width:      90vw;
    max-height:     80vh;
}

.settings-properties-popup.open {
    display: flex;
}

.settings-properties-body {
    overflow-y: auto;
    padding:    12px;
    /* This content (settings.ejs/light.ejs/etc.) used to sit inside
       #slidePanel (popoutmenu.ejs, retired), which set color:white on
       itself for all these plain, colorless label/value <divs> to inherit -
       moving it here without an equivalent dropped that inheritance,
       leaving default (black) text on this popup's dark background.
       #bbb matches the runsheet inspector's own value/input text color
       (.rs-inspector-value etc., RunsheetTimeline.ejs) for consistency. */
    color: #bbb;
}

.login-modal-terms {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: #b0b0b0;
    cursor: pointer;
    margin-bottom: 4px;
}

.login-modal-terms input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}

.login-modal-terms a {
    color: #9cdcfe;
}

.login-modal-hint {
    font-size: 13px;
    color: #b0b0b0;
    margin: 0 0 12px;
}

.login-modal-code {
    letter-spacing: 6px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.je-bracket {
    color: #858585;
}

.je-h1 {
    color: #9cdcfe;
    margin-bottom: 20px;
    font-size: 24px;
}

/* Draggable functionality */
.je-dragging {
    opacity: 0.8;
}

.versionnumber {
    padding:10px;
    font-size:6pt;
}

.system-off {
    position: relative;
    cursor: pointer;
}

/* Invisible full-screen click-catcher - not a visual treatment of its own
   (see .canvas-controls red tint and the 'stopped' showMessage() in
   toggleAnimation(), designer.js, for the actual "you're off" signal).
   Still needed as a real element even though it's transparent: it's what
   lets a click anywhere resume the app without also triggering whatever
   button happens to be underneath it (.system-off * below blocks pointer
   events on everything except this layer and #toggleBtn). */
.system-off::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    background: transparent;
    z-index: 9998;
    cursor: pointer;
}

.system-off * {
    pointer-events: none !important;
}

.system-off #toggleBtn {
    pointer-events: auto !important;
    opacity: 0.5;
}

/* Persistent "you're off" signal on both toolbars - the canvas one
   (.editor-controls.canvas-controls) and the node editor's own
   (.editor-controls alone) - so it's still obvious at a glance even after
   the 'stopped' message has scrolled out of view or been dismissed.
   Targeting the shared .editor-controls class catches both in one rule.
   Overrides .editor-controls' own #141414 background (node-editor.ejs). */
.system-off .editor-controls {
    background: #a30000;
}

.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: #fffacd;/*#4ade80;*/
  color: #030303;
  padding: 12px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
  z-index: 10001;
  pointer-events: none;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}





.help-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.help-overlay-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
}

.help-overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
    border-radius: 16px;
    box-shadow: 
        0 30px 90px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(0, 0, 0, 0.1) inset;
    max-width: 900px;
    max-height: 85vh;
    width: 90%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translate(-50%, -45%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

/* Styled Header */
.help-overlay-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px 40px;
    background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
    color: white;
    border-bottom: 3px solid #0a2540;
}

.help-header-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: bold;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.help-header-text h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.help-header-text p {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

/* Better Close Button */
.help-overlay-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: white;
    transition: all 0.2s;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-overlay-close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: rotate(90deg);
}

/* Body with Better Styling */
.help-overlay-body {
    padding: 40px;
    overflow-y: auto;
    flex: 1;
    background: white;
}

/* Custom Scrollbar */
.help-overlay-body::-webkit-scrollbar {
    width: 10px;
}

.help-overlay-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.help-overlay-body::-webkit-scrollbar-thumb {
    background: #0f3460;
    border-radius: 10px;
}

.help-overlay-body::-webkit-scrollbar-thumb:hover {
    background: #16213e;
}

/* Footer */
.help-overlay-footer {
    padding: 20px 40px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    text-align: center;
}

.help-overlay-footer a {
    color: #0f3460;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.2s;
}

.help-overlay-footer a:hover {
    background: #e8eef5;
}

/* Typography Improvements */
.help-overlay-body h1 {
    margin: 0 0 24px 0;
    color: #1a1a2e;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.help-overlay-body h2 {
    margin: 40px 0 20px 0;
    color: #0f3460;
    font-size: 22px;
    font-weight: 600;
    padding-bottom: 12px;
    border-bottom: 2px solid #e8eef5;
}

.help-overlay-body h3 {
    margin: 30px 0 15px 0;
    color: #16213e;
    font-size: 18px;
    font-weight: 600;
}

.help-overlay-body p {
    margin: 0 0 16px 0;
    line-height: 1.7;
    color: #333;
    font-size: 15px;
}

/* Better Lists */
.help-overlay-body ul,
.help-overlay-body ol {
    margin: 20px 0;
    padding-left: 28px;
}

.help-overlay-body li {
    margin: 12px 0;
    line-height: 1.7;
    color: #333;
}

/* Styled Code Blocks */
.help-overlay-body code {
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    font-size: 13px;
    color: #0f3460;
    border: 1px solid #e2e8f0;
}

.help-overlay-body pre {
    background: #1e293b;
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 20px 0;
    border: 1px solid #334155;
}

.help-overlay-body pre code {
    background: none;
    padding: 0;
    border: none;
    color: #e2e8f0;
    font-size: 14px;
}

/* Info Boxes */
.help-overlay-body .info-box {
    background: #e8f4fd;
    border-left: 4px solid #0f3460;
    padding: 16px 20px;
    margin: 24px 0;
    border-radius: 4px;
}

.help-overlay-body .info-box p {
    margin: 0;
    color: #1a1a2e;
}

.help-overlay-body .warning-box {
    background: #fff3cd;
    border-left: 4px solid #f59e0b;
    padding: 16px 20px;
    margin: 24px 0;
    border-radius: 4px;
}

/* Better Images */
.help-overlay-body img {
    display: block;
    margin: 30px auto;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
}

.help-overlay-body figure {
    margin: 40px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
}

.help-overlay-body figcaption {
    text-align: center;
    font-style: italic;
    color: #666;
    font-size: 14px;
    margin-top: 16px;
    line-height: 1.6;
}

.banner-logo {
    border-bottom: solid 2px #fff;
    border-top: solid 2px #fff;
    padding:10px;
    font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 3.5em;
    font-weight: 700;
    color:#fff;
    letter-spacing: 0.225em;
    text-transform: uppercase;
}

:root {
    /* Sophisticated Color Palette */
    --color-ivory: #fefefe;
    --color-parchment: #f9f7f3;
    --color-charcoal: #1a1a1a;
    --color-ink: #2a2a2a;
    --color-graphite: #444;
    --color-slate: #666;
    --color-smoke: #888;
    --color-accent: #2c5282;
    --color-accent-dark: #1a365d;
    --color-accent-light: #4299e1;
    --color-gold: #b38b4d;
    --color-border: #e2e8f0;
    --color-highlight: #f7fafc;
    
    /* Typography */
    --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: Georgia, "Times New Roman", Times, serif;
    --font-mono: "SF Mono", Monaco, "Cascadia Code", Consolas, monospace;
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    
    /* Layout */
    --content-width: 800px;
    --toc-width: 260px;
    --gutter: 2rem;
    
    /* Effects */
    --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.08);
    --transition: all 0.2s ease;
}

/* Professional Markdown Styling */
.professional-md {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-ink);
}

.professional-md figcaption p {
    margin: 0.1rem;
    padding: 0;
    text-align:center;
    hyphens: none;
}


/* Headings with professional hierarchy */
.professional-md h1 {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin: var(--space-sm) 0 var(--space-xl);
    color: var(--color-charcoal);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--color-border);
    letter-spacing: -0.01em;
}

.professional-md h2 {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.3;
    margin: var(--space-xl) 0 var(--space-lg);
    color: var(--color-charcoal);
    padding-top: var(--space-lg);
    /* border-top: 1px solid var(--color-border); */
}

.professional-md h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: var(--space-lg) 0 var(--space-md);
    color: var(--color-graphite);
}

.professional-md h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: var(--space-md) 0 var(--space-sm);
    color: var(--color-slate);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.95rem;
}

.professional-md h5 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: var(--space-md) 0 var(--space-sm);
    color: var(--color-smoke);
}

.professional-md h6 {
    font-size: 1rem;
    font-weight: 600;
    margin: var(--space-md) 0 var(--space-sm);
    color: var(--color-smoke);
    font-style: italic;
}

/* Paragraphs */
.professional-md p {
    margin: var(--space-md) 0;
    text-align: justify;
    hyphens: auto;
}

/* Links */
.professional-md a {
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: var(--transition);
    padding-bottom: 1px;
}

.professional-md a:hover {
    border-bottom-color: var(--color-accent);
}

/* Lists */
.professional-md ul,
.professional-md ol {
    margin: var(--space-md) 0 var(--space-md) var(--space-xl);
    padding-left: var(--space-md);
    list-style: none;  /* Remove default bullets/numbers */
}

.professional-md li {
    margin: var(--space-sm) 0;
    position: relative;
    list-style: none;  /* Ensure no default styling */
}

/* Custom bullet for unordered lists */
.professional-md ul li::before {
    content: "•";
    color: var(--color-accent);
    position: absolute;
    left: -1.25rem;
    font-weight: bold;
}

/* Custom numbering for ordered lists */
.professional-md ol {
    counter-reset: item;
    list-style: none;  /* Remove default numbers */
}

.professional-md ol li {
    counter-increment: item;
    list-style: none;
}

.professional-md ol li::before {
    content: counter(item) ".";
    color: var(--color-accent);
    position: absolute;
    left: -1.75rem;
    font-weight: 600;
}

/* Blockquotes */
.professional-md blockquote {
    margin: var(--space-lg) 0;
    padding: var(--space-lg) var(--space-xl);
    background: linear-gradient(to right, 
        rgba(248, 250, 252, 0.8) 0%,
        rgba(241, 245, 249, 0.9) 100%
    );
    border-left: 4px solid var(--color-accent);
    border-radius: 0 4px 4px 0;
    font-style: italic;
    color: var(--color-graphite);
    position: relative;
}

.professional-md blockquote::before {
    content: "❝";
    position: absolute;
    top: -0.5rem;
    left: var(--space-md);
    font-size: 2rem;
    color: var(--color-accent);
    opacity: 0.3;
}

.professional-md blockquote p {
    margin: 0;
}

.professional-md blockquote p:not(:last-child) {
    margin-bottom: var(--space-sm);
}

/* Code */
.professional-md code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0.2em 0.4em;
    background: var(--color-highlight);
    color: var(--color-ink);
    border-radius: 3px;
    border: 1px solid var(--color-border);
}

.professional-md pre {
    margin: var(--space-lg) 0;
    padding: var(--space-lg);
    background: var(--color-highlight);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow-x: auto;
    position: relative;
}

.professional-md pre::before {
    content: "↴";
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    color: var(--color-smoke);
    font-size: 0.8rem;
    opacity: 0.5;
}

.professional-md pre code {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.95em;
    line-height: 1.5;
}

/* Tables */
.professional-md table {
    width: 100%;
    margin: var(--space-lg) 0;
    border-collapse: collapse;
    border: 1px solid var(--color-border);
    font-size: 0.95rem;
}

.professional-md thead {
    background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
}

.professional-md th {
    padding: var(--space-md) var(--space-lg);
    text-align: left;
    font-weight: 600;
    color: var(--color-charcoal);
    border-bottom: 2px solid var(--color-border);
}

.professional-md td {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.professional-md tbody tr:hover {
    background: rgba(66, 153, 225, 0.03);
}

/* Images */
.professional-md img {
    margin: var(--space-lg) auto;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: var(--shadow-subtle);
    display: block;
}

.professional-md figure {
    margin: var(--space-lg) 0;
    text-align: center;
}

.professional-md figcaption {
    margin-top: var(--space-sm);
    font-size: 0.9rem;
    color: var(--color-slate);
    font-style: italic;
}

/* Horizontal Rules */
.professional-md hr {
    margin: var(--space-2xl) auto;
    border: none;
    height: 1px;
    background: linear-gradient(to right, 
        transparent, 
        var(--color-border), 
        transparent
    );
    max-width: 50%;
}

.array-editor-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    /*backdrop-filter: blur(4px);*/
}

.array-editor-popup {
    background: #2a2a3e;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    width: 400px;
    max-width: 90vw;
}

.array-editor-header {
    padding: 20px;
    background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.array-editor-header h3 {
    margin: 0;
    color: white;
    font-size: 16px;
    font-weight: 600;
}

.array-editor-body {
    padding: 24px;
}

.array-editor-field {
    margin-bottom: 16px;
}

.array-editor-field:last-child {
    margin-bottom: 0;
}

.array-editor-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 6px;
}

.array-editor-input {
    width: 90%;
    padding: 10px 12px;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: white;
    font-family: 'Monaco', 'Courier New', monospace;
    transition: all 0.2s;
}

.array-editor-input:focus {
    outline: none;
    border-color: #0f3460;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(15, 52, 96, 0.2);
}

.array-editor-footer {
    padding: 16px 24px;
    display: flex;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.array-editor-footer button {
    flex: 1;
}

/* Full width again (back from a brief 50% - the popup itself is narrower
   now, see .settings-properties-popup, so 100% no longer reads as
   stretched) but keeps the real button padding (was 0px 5px, so thin it
   barely read as clickable) - revives the design this block's own
   commented-out alternate version below already sketched out, at the
   popup's usual 11px/1px-border weight instead of that version's 13px/2px. */
.array-edit-button {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    font-size: 11px;
    background: rgba(15, 52, 96, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    margin: 0;
}

.simple-edit-input {
    width: 80%;
    padding: 0px 5px;
}

.array-edit-button:hover {
    background: rgba(15, 52, 96, 0.3);
    color: #fff;
    border-color: #0f3460;
}

/* Same treatment as .array-edit-button above, for the other field-value
   buttons in these popups (Position Editor, Pick Color, START, etc.) that
   don't share that class - kept separate since .EditButton (their other
   shared class) is also used for the small inline AI/Undo/Edit/Copy button
   group in the Build Recipe row, which must stay at its natural size. */
.FieldButton {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    font-size: 11px;
    background: rgba(15, 52, 96, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    margin: 0;
}

.FieldButton:hover {
    background: rgba(15, 52, 96, 0.3);
    color: #fff;
    border-color: #0f3460;
}

/* Position/Orbit Plane/Rotation Axis/Camera Path Editor buttons toggle an
   in-canvas edit gizmo - editStarting()/editEnding() (designer.js) already
   add/remove an "Active" class on the button while its gizmo is open, same
   mechanism the old .EditButton.Active (background:#009080) used before
   these became .FieldButton. Uses the canvas toolbar's own active-state
   green instead (#toggleRunsheetFromBar.active etc., node-editor.ejs),
   per request, rather than reviving the old color. */
.FieldButton.Active {
    background: #1abc9c18;
    border-color: #1abc9c88;
    color: #1abc9c;
}