/* 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;
}

/* A .toggle-btn used as a sub-heading inside a popout-grid itself (e.g.
   "Recording"/"Runsheet" in settings.ejs, "Helpers" in light.ejs), rather
   than a whole section's own top-level header sitting outside the grid -
   needs to span both of the grid's columns (grid-template-columns: 114px
   1fr, above) instead of only landing in the narrow label column like a
   single-column single-cell child normally would. Scoped to direct
   children only, so this never touches the real section headers (Project,
   Light & Shadow, Devices), which sit outside .popout-grid entirely. */
.popout-grid > .toggle-btn {
    grid-column: 1 / -1;
}

/* 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;
}

/* Closes the editor (see setNodeEditorMode() in designer.js) - sits right
   after #editor-path above, which already claims the rest of the bar via
   margin-left:auto, so this lands at the bar's far right edge. */
#close-node-editor-mode {
    margin-left: 8px;
    color:       #888;
}
#close-node-editor-mode:hover {
    color: #ccc;
}

/* No overflow:hidden here either - same reasoning as #editor-path above. */
#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:   15px;
    color:       #888;
}

/* Back-to-parent control, left of the object picker - only shown while
   drilled into a custom node (toggled in NodeEditor.setTitle()), since
   there's nowhere to go back to otherwise. */
.editor-path-back {
    display:          none;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    width:            16px;
    margin-right:     2px;
    font-size:        13px;
    color:            #888;
    cursor:           pointer;
}
.editor-path-back:hover {
    color: #ddd;
}

/* position:fixed + JS-computed left/top (updateEditorPathSelect(),
   designer.js) rather than the base .dropdown-menu's position:absolute
   top/right offsets - this is now a DOM sibling of #editor-popup, not a
   descendant of #editor-path-wrapper, so there's nothing left for those
   relative offsets to anchor against (see the hoist-out comment on this
   element in nodeeditor.ejs). right:auto overrides the base rule's
   right:0, which would otherwise fight with the JS-set left to stretch
   the box's auto width between the two.
   Right-aligned to the trigger (rather than left-aligned) for the same
   reason the old CSS-relative version was - #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 instead
   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 {
    position:  fixed;
    right:     auto;
    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;
}

/* Same treatment for the node editor's own Properties button, lit up while
   propertiesModalOverlay is open (see syncPropertiesModalButton(),
   designer.js) - mirrors the canvas toolbar's Settings/Objects buttons. */
#open-properties-modal.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. */
/* Establishes this bar's own width as a query container (see the
   .layout-controls container query below) rather than relying on the
   window's viewport width - this bar's actual available width shrinks in
   side-by-side mode independently of how wide the window is. */
.canvas-controls {
    container-type: inline-size;
    container-name: canvas-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 primary actions. Settings and
   Objects sit in this same group but opt out of the muted look (no rule
   for them here) - they fall through to the light, filled
   .canvas-controls button.icon-button default instead, matching each
   other. 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;
}

/* Below this width the bar can't fit these four buttons without wrapping
   (as on mobile, or once side-by-side's docked pane is dragged narrow
   enough - see .canvas-controls' container-type below) - hide the whole
   group rather than let it wrap, since all four are also reachable from
   the burger menu (see nodeeditor.ejs). A container query rather than a
   @media (max-width) one, since side-by-side mode can make this toolbar's
   own width much narrower than the window itself - a viewport-based media
   query never fires in that case, since the *window* stays plenty wide.
   460px is this bar's actual measured content width right before it would
   wrap (burger + file actions + these four buttons + user-status, all at
   their normal sizes) - 520px leaves a ~60px buffer for a longer username/
   filename, not the much larger margin an earlier, more arbitrary 700px
   threshold left, which hid the buttons well before they needed to. */
@container canvas-toolbar (max-width: 520px) {
    .layout-controls {
	display: none;
    }
}

/* 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) / the Objects popup being open (see syncObjectsModalButton()
   in designer.js) - a special case only for this bar button, not the
   burger menu's own "Objects..." row, since that one just opens the popup
   like Settings/Camera Animation's own rows do, not toggle it closed. */
#toggleRunsheetFromBar.active,
#toggleSideBySideEditor.active,
#toggleOverlayEditor.active,
#open-objects-modal-bar.active,
#open-settings-modal-bar.active {
    background:   #1abc9c18;
    border-color: #1abc9c88;
    color:        #1abc9c;
}

/* Pulsing glow - distinct from .active above (which just marks the
   runsheet panel/editor as open, a static state) - this instead reflects
   actual playback: the runsheet running (setRunning(), designer.js) or a
   camera animation running (toggleCamera(), designer.js). Same teal accent
   as .active, animated, rather than a different color, since it is the
   same underlying "this is currently doing something" signal - just a
   live one instead of a static one. Applies to both the toolbar button and
   its burger-menu row equivalent (#toggleRunsheetFromMenu,
   #open-cameraanimation-modal - nodeeditor.ejs) so either is visible
   regardless of which one is currently reachable in the layout. */
@keyframes running-pulse {
    /* inset, not an outward spread - an outward glow on a full-width
       burger-menu row bled past the dropdown's own edge (and the toolbar
       button's past the bar's), since box-shadow paints outside the
       element's border box by default regardless of any parent's
       overflow. inset keeps it entirely within each element's own
       bounds no matter how wide that element is. */
    0%, 100% { box-shadow: inset 0 0 3px 0 rgba(26, 188, 156, 0.35); }
    50%      { box-shadow: inset 0 0 9px 2px rgba(26, 188, 156, 0.9); }
}
#toggleRunsheetFromBar.running,
#toggleRunsheetFromMenu.running,
#open-cameraanimation-modal.running {
    animation: running-pulse 1.4s ease-in-out infinite;
}

/* 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. A single person-icon button rather than
   a name/text button, to keep this corner of the bar from eating space for
   a long email/display name - filled (fa-solid) once signed in, outlined
   (fa-regular) before that (see #canvasLoginButton/#canvasUserName in
   nodeeditor.ejs), with the actual name/"Sign In / Join" carried as a
   tooltip (data-tooltip) instead of visible text. Same light-filled
   .icon-button look as Settings/Objects above it, since like those two
   this is a persistent state readout rather than a one-off action.
   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;
    box-sizing: border-box; /* width:100% + padding, below, would otherwise
                                add the padding on top of the 100% (default
                                content-box) and push the row past the
                                dropdown's own padded edge */
    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%;
    box-sizing:    border-box; /* width:100% + padding, below, would otherwise
                                   add the padding on top of the 100% (default
                                   content-box) and push the row - and its
                                   .running glow - past the dropdown's own
                                   padded edge */
    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;
}


#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;
}


[data-tooltip] {
  cursor: pointer;
}

/* Generalized hover-popup component (tooltip.js) - a single shared #app-
   tooltip element, repositioned/reused for every anchor rather than a
   per-element ::before/::after pair. Replaces this file's old pure-CSS
   [data-tooltip] popup (centered above, no viewport awareness at all) and
   the node editor's own #editorTooltip (designer-css.ejs used to own that
   one) with one component that keeps itself fully on-screen regardless of
   where its anchor sits - see position() in tooltip.js. */
.app-tooltip {
  position:       fixed;
  left: 0; top: 0;
  max-width:      280px;
  padding:        7px 11px;
  background:     #1c1c1c;
  color:          #eee;
  font-size:      12px;
  font-family:    -apple-system, BlinkMacSystemFont, sans-serif;
  line-height:    1.4;
  border:         1px solid #333;
  border-radius:  6px;
  box-shadow:     0 4px 14px rgba(0,0,0,0.45);
  z-index:        10050;
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.08s ease-out;
  white-space:    normal;
}
.app-tooltip.visible {
  opacity: 1;
}
/* Plain tooltips stay click-through even while visible/mid-fade, same as
   the native title= they replace - only a popup that actually has
   something to interact with (e.g. the project-attribution popup's
   creator link) needs to catch pointer events at all. */
.app-tooltip.interactive.visible {
  pointer-events: auto;
}
.app-tooltip a {
  color: #6cb4ff;
}
.app-tooltip a:hover {
  text-decoration: underline;
}

/* Small arrow pointing at the anchor's own horizontal center - kept
   aligned to the anchor even when the box itself is clamped sideways to
   stay on-screen, via the --tt-arrow-x custom property (position() in
   tooltip.js). arrow-bottom = box sits above the anchor, arrow points down;
   arrow-top = flipped below the anchor instead, arrow points up. */
.app-tooltip.arrow-top::before,
.app-tooltip.arrow-bottom::before {
  content: '';
  position: absolute;
  left: var(--tt-arrow-x, 50%);
  width: 8px; height: 8px;
  background: #1c1c1c;
  transform: translateX(-50%) rotate(45deg);
}
.app-tooltip.arrow-bottom::before {
  bottom: -5px;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}
.app-tooltip.arrow-top::before {
  top: -5px;
  border-left: 1px solid #333;
  border-top: 1px solid #333;
}



/* 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: #1c1c1c;
  /* Rapid/shift-clicking through node buttons was leaving text selected
     (the browser's native shift-click-to-extend-selection gesture) - inputs
     (.node-search-input) are exempt from an ancestor's user-select:none,
     so search still works normally. */
  user-select: none;
  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: #242424;
    border-bottom: 2px solid #333;
}

/* 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 #444;
    border-radius: 5px;
    color: #e0e0e0;
    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: #1abc9c88; color: #1abc9c; }
.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;
}

/* Storage Directory / document properties - dark theme, matching the rest
   of the app's popups (.rs-inspector, RunsheetTimeline.ejs; .dropdown-menu,
   node-editor.ejs) rather than the light Bootstrap-ish look this whole
   file-system block started out with. Same #1abc9c teal used everywhere
   else in the app as the "accent" color, in place of the old #007bff blue. */

/* 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: #1c1c1c;
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    overflow: hidden;
    animation: modalFadeIn 0.3s ease;
    display: flex;
    flex-direction: column; /* Add this */
    color: #eee;
}

.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: 15px 20px; /* 75% of the original 20px vertical padding - was
                            noticeably taller than the app's other title
                            bars (e.g. .rs-inspector-header's 10px). */
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1c1c1c;
    flex-shrink: 0; /* Prevent header from shrinking */
}

.file-manager .toolbar {
    padding: 15px 20px;
    border-bottom: 1px solid #333;
    display: flex;
    gap: 10px;
    background: #1c1c1c;
    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;
}



/* Same small square icon-button look as the node editor's own close button
   (#close-node-editor-mode/.editor-controls button.icon-button,
   node-editor.ejs) rather than the old solid red circle - just kept
   absolutely positioned in the corner instead of sitting in a toolbar row. */
.file-manager-close {
    position: absolute;
    top: 15px;
    right: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid #333;
    background: none;
    color: #888;
    cursor: pointer;
    z-index: 1001;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.file-manager-close:hover {
    color: #ccc;
    border-color: #555;
    background: rgba(255,255,255,0.04);
}

.file-manager-close:active {
    background: rgba(255,255,255,0.08);
}

#fileManagerBack { cursor: pointer; }

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

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

.toolbar { padding: 15px 20px; background: #202020; border-bottom: 1px solid #333; display: flex; gap: 10px; }
.toolbar button { padding: 8px 16px; border: 1px solid #333; background: #242424; color: #eee; border-radius: 4px; cursor: pointer; }
.toolbar button:hover { background: #2e2e2e; }
.toolbar select { padding: 8px 16px; border: 1px solid #333; background: #242424; color: #eee; border-radius: 4px; cursor: pointer; }
.toolbar input[type="text"] { padding: 8px; border: 1px solid #333; border-radius: 4px; background: #141414; color: #eee; }

.content { padding: 20px; }

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

.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;
}

/* #assetUsage reuses .file-grid inside the (much narrower) Edit Properties
   modal rather than the full-width Storage Directory - 150px only fits 2
   columns there, borderline against 3; 130px comfortably fits 3 (100px
   thumbnail + .file-item's 15px×2 padding = 130px minimum anyway). */
.asset-usage-group.file-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}


/* 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: #242424;
    border: 1px solid #333;
    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 */
    color: #eee;
}

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

.file-item.folder {
    background: #0d2e27;
    border-color: #1abc9c55;
}

.file-item.not-owner {
    background: #1a1a1a;
    border-color: #333;
}

.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: #999;
    margin-bottom: 5px;
}

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

    margin-top:15px;
    font-size: 9px;
    color: #aaa;
    font-style: italic;
    max-height: 60px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #333;
    border-radius: 3px;
    background: #1a1a1a;
    line-height: 1.3;

    /* Plain escaped text now (files.js), not rendered markdown - preserve
       the description's own line feeds instead of collapsing them like
       normal HTML text would. */
    white-space: pre-wrap;

    /* 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: #1c1c1c;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    color: #eee;
}

.modal h3 {
    color: #eee;
    margin-top: 0;
}

.modal p {
    color: #ccc;
}




/* Fix for input sizing */
.modal .form-group {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    background: #202020;
    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 #333;
    border-radius: 4px;
    font-size: 10px;
    background: #141414;
    color: #eee;
    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: #ccc;
}

/* 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 #333;
    border-radius: 6px;
    background: #181818;
    cursor: pointer;
    transition: border-color 0.2s;
}

.modal .radio-label:hover {
    border-color: #1abc9c;
}

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

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

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

/* 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: #0d2e2a;
    border: 1px solid #1abc9c55;
    border-radius: 4px;
    font-size: 9x;
    color: #8fd9c7;
}

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

.modal .share-input-group button {
    padding: 10px 16px;
    white-space: nowrap;
    background: #3a3a3a;
    color: #eee;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.modal .share-input-group button:hover {
    background: #484848;
}

.modal .shared-users-list {
    border: 1px solid #333;
    border-radius: 4px;
    padding: 10px;
    background: #181818;
    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: #242424;
    color: #eee;
    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;
    background: #3a3a3a;
    color: #eee;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.modal .move-folder-group button:hover {
    background: #484848;
}

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

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

.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: #3a3a3a;
    color: #eee;
}

.modal #confirmeditmodal.primary {
    background: #1abc9c;
    color: #0b0b0b;
}

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

.modal #canceleditmodal:hover {
    background: #484848;
}

.modal #confirmeditmodal.primary:hover {
    background: #17a589;
}

/* Remaining plain Cancel/Create buttons (folder/upload/delete modals) that
   have no .primary/.delete-btn class of their own - same secondary-gray/
   teal split as #canceleditmodal/#confirmeditmodal.primary above, just
   addressed by id since these modals don't share a common class for them. */
.modal #closefoldermodal,
.modal #closeuploadmodal,
.modal #canceldeletemodal {
    background: #3a3a3a;
    color: #eee;
}

.modal #closefoldermodal:hover,
.modal #closeuploadmodal:hover,
.modal #canceldeletemodal:hover {
    background: #484848;
}

.modal #confirmfoldercreate {
    background: #1abc9c;
    color: #0b0b0b;
}

.modal #confirmfoldercreate:hover {
    background: #17a589;
}

/* 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: #3a3a3a;
    color: #eee;
    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: #999; }
.error { background: #3a1212; color: #ff6b6b; border: 1px solid #5a1f1f; padding: 10px; border-radius: 4px; margin: 10px 0; }

.primary {
    background: #1abc9c;
    color: #0b0b0b;
    border: none;
}

.primary:hover {
    background: #17a589;
}

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

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

.folder-list {
    padding: 10px;
}

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

.folder-item:hover {
    background: #0d2e27;
    border-color: #1abc9c55;
}

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

.folder-item.selected {
    background: #1abc9c;
    color: #0b0b0b;
    border-color: #17a589;
}

.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: #3a3a3a;
    color: #eee;
}

.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 #1abc9c;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    background: #181818;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: 20px;
}

.drop-zone:hover {
    background: #0d2e27;
    border-color: #17a589;
}

.drop-zone.drag-over {
    background: #0d2e27;
    border-color: #17a589;
    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: #eee;
    margin-bottom: 5px;
}

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

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

.browse-button:hover {
    background: #17a589;
}

/* .browse-button is a <label> (filesystem.ejs) - .modal label's own
   color:#ccc rule (element+class) otherwise outranks the plain single-class
   .browse-button selector above and wins the color; .modal .browse-button
   (two classes) is needed to actually win. */
.modal .browse-button {
    color: #0b0b0b;
}

.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 #333;
    border-radius: 6px;
    padding: 10px;
}

.no-files {
    text-align: center;
    color: #999;
    padding: 10px;
}

.selected-file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #242424;
    color: #eee;
    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: #999;
}

.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: #2a2a2a;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

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

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

.progress-percent {
    font-weight: 600;
    color: #1abc9c;
}

/* Upload button states */
#confirmfileupload:disabled {
    background: #3a3a3a;
    color: #888;
    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;
}


/* .je-modal/.je-modal-content/etc below are shared with #loginModalOverlay
   (loginmodal.js) - do not remove even though the json-editor that
   originally introduced this ".je-" naming is gone. */

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

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

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

.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-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-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;
}

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

/* Settings/Objects/Properties/User Profile (settingsmodal.ejs/
   objectsmodal.ejs/propertiesmodal.ejs/the #userProfileModalOverlay block
   in designer.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()/
   initUserProfileModal(), 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;
}

/* Builder guided-forms panel (builderformsmodal.ejs/builderformspanel.js) -
   section heading + the new curve-editor widget (curveeditor.js), the first
   thing in this codebase that edits a control-point list visually rather
   than as raw JSON. */
.rs-inspector-section-title {
    font-size:      11px;
    font-weight:    600;
    color:          #888;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin:         4px 0 2px;
}

.curve-editor-label { margin-top: 4px; }

.curve-editor-field { margin: 4px 0 8px; }

.curve-editor {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.curve-editor-canvas {
    background:    #141414;
    border:        1px solid #2e2e2e;
    border-radius: 4px;
    cursor:        pointer;
    max-width:     100%;
}

.curve-editor-toolbar {
    display: flex;
    gap: 6px;
}

.curve-editor-toolbar button {
    background:    #141414;
    border:        1px solid #2e2e2e;
    border-radius: 4px;
    color:         #bbb;
    font-size:     11px;
    padding:       5px 8px;
    cursor:        pointer;
}

.curve-editor-toolbar button:hover  { border-color: #555; color: #ddd; }
.curve-editor-toolbar button:disabled { opacity: .4; cursor: default; }

.curve-editor-fields {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* The Edit Profile modal's always-visible "Advanced (JSON)" section
   (builderformspanel.js's buildAdvancedJSONSection(), last section in the
   modal) - matches .modal textarea's dark styling (line ~1660 above) for
   visual consistency with the rest of the app's popups/modals. */
#builderJSON {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #333;
    border-radius: 4px;
    background: #141414;
    color: #eee;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    resize: vertical;
}

/* Outline Modifiers section (builderformspanel.js) - each entry in the
   repeatable outlines list gets its own bordered block, matching how
   .curve-editor-canvas already uses a subtle border+radius for a self-
   contained sub-widget within the panel body. */
.outline-entry {
    border:        1px solid #2a2a2a;
    border-radius: 6px;
    padding:       8px;
    margin:        8px 0;
    display:       flex;
    flex-direction: column;
    gap: 6px;
}

.outline-entry-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}

.outline-entry-title {
    font-size:   11px;
    font-weight: 600;
    color:       #888;
}

.outline-entry-header button {
    background:    #141414;
    border:        1px solid #2e2e2e;
    border-radius: 4px;
    color:         #bbb;
    font-size:     11px;
    padding:       3px 8px;
    cursor:        pointer;
}

.outline-entry-header button:hover { border-color: #a33; color: #f88; }

.outline-entry-active {
    display:     flex;
    align-items: center;
    gap:         4px;
    font-size:   11px;
    color:       #888;
    cursor:      pointer;
    user-select: none;
}

.outline-entry-active input { margin: 0; accent-color: #1abc9c; }

/* Edit with AI section (builderformspanel.js, top of Edit Profile) - the
   prompt textarea and its Apply-status readout, dark-themed to match
   the rest of the modal instead of the old AI popup's light/white styling. */
.ai-generator-prompt {
    width: 100%;
    box-sizing: border-box;
    min-height: 80px;
    padding: 8px;
    border: 1px solid #333;
    border-radius: 4px;
    background: #141414;
    color: #eee;
    font-family: inherit;
    font-size: 11px;
    resize: vertical;
}

.ai-generator-status {
    font-size: 11px;
    color: #888;
}

.ai-generator-status--error { color: #f88; }
.ai-generator-status--success { color: #1abc9c; }

/* Dims everything but the header (title/Active checkbox/Delete stay fully
   legible) so a disabled outline still reads clearly in the list rather
   than looking identical to an active one until you scroll through its
   fields - the whole point of Active is a fast, obvious toggle. */
.outline-entry--disabled > *:not(.outline-entry-header) { opacity: 0.4; }

.outline-shape-fields {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid #2a2a2a;
    padding-top: 6px;
}

/* A branch's own recursive Shape Profile/Outline Modifiers/Twist & Bend/
   Spiral/Branches sections (builderformspanel.js:buildBranchEntry()) -
   indented and left-bordered so recursion depth stays visually legible
   without needing full nested .outline-entry boxes at every level, which
   would compound width loss fast in an already-narrow side panel. */
.branch-nested {
    margin-left:  10px;
    padding-left: 10px;
    border-left:  2px solid #2a2a2a;
}
.branch-nested:empty { margin: 0; padding: 0; border: none; }

.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;
}

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

.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 Profile 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;
}