@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;

  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);

  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
  background-color: var(--xy-background-color, var(--xy-background-color-default));
  --xy-node-color-default: inherit;
  --xy-node-border-default: 1px solid #1a192b;
  --xy-node-background-color-default: #fff;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
  --xy-node-border-radius-default: 3px;

  --xy-handle-background-color-default: #1a192b;
  --xy-handle-border-color-default: #fff;

  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);

  --xy-controls-button-background-color-default: #fefefe;
  --xy-controls-button-background-color-hover-default: #f4f4f4;
  --xy-controls-button-color-default: inherit;
  --xy-controls-button-color-hover-default: inherit;
  --xy-controls-button-border-color-default: #eee;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #ffffff;
  --xy-edge-label-color-default: inherit;
  --xy-resize-background-color-default: #3367d9;
}
.react-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);

  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #777;
  --xy-background-pattern-lines-color-default: #777;
  --xy-background-pattern-cross-color-default: #777;
  --xy-node-color-default: #f8f8f8;
  --xy-node-border-default: 1px solid #3c3c3c;
  --xy-node-background-color-default: #1e1e1e;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;

  --xy-handle-background-color-default: #bebebe;
  --xy-handle-border-color-default: #1e1e1e;

  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);

  --xy-controls-button-background-color-default: #2b2b2b;
  --xy-controls-button-background-color-hover-default: #3e3e3e;
  --xy-controls-button-color-default: #f8f8f8;
  --xy-controls-button-color-hover-default: #fff;
  --xy-controls-button-border-color-default: #5b5b5b;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #141414;
  --xy-edge-label-color-default: #f8f8f8;
}
.react-flow__background {
  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
  pointer-events: none;
  z-index: -1;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
}
.react-flow__pane.draggable {
    cursor: grab;
  }
.react-flow__pane.dragging {
    cursor: grabbing;
  }
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow__edge-path {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}
.react-flow__connection-path {
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}
.react-flow .react-flow__edges {
  position: absolute;
}
.react-flow .react-flow__edges svg {
    overflow: visible;
    position: absolute;
    pointer-events: none;
  }
.react-flow__edge {
  pointer-events: visibleStroke;
}
.react-flow__edge.selectable {
    cursor: pointer;
  }
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge.selectable:focus .react-flow__edge-path,
  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
/* Arrowhead marker styles - use CSS custom properties as default */
.react-flow__arrowhead polyline {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__arrowhead polyline.arrowclosed {
  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
svg.react-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
}
.react-flow__node.selectable {
    cursor: pointer;
  }
.react-flow__node.draggable {
    cursor: grab;
    pointer-events: all;
  }
.react-flow__node.draggable.dragging {
      cursor: grabbing;
    }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
  border-radius: 100%;
}
.react-flow__handle.connectingfrom {
    pointer-events: all;
  }
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
.react-flow__handle-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__pane.selection .react-flow__panel {
  pointer-events: none;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.top.center, .react-flow__panel.bottom.center {
      left: 50%;
      transform: translateX(-15px) translateX(-50%);
    }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.left.center, .react-flow__panel.right.center {
      top: 50%;
      transform: translateY(-15px) translateY(-50%);
    }
.react-flow__attribution {
  font-size: 10px;
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: 0;
  top: 0;
}
.react-flow__viewport-portal {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__minimap {
  background: var(
    --xy-minimap-background-color-props,
    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
  );
}
.react-flow__minimap-svg {
    display: block;
  }
.react-flow__minimap-mask {
    fill: var(
      --xy-minimap-mask-background-color-props,
      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
    );
    stroke: var(
      --xy-minimap-mask-stroke-color-props,
      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-mask-stroke-width-props,
      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
    );
  }
.react-flow__minimap-node {
    fill: var(
      --xy-minimap-node-background-color-props,
      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
    );
    stroke: var(
      --xy-minimap-node-stroke-color-props,
      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-node-stroke-width-props,
      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
    );
  }
.react-flow__background-pattern.dots {
    fill: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
    );
  }
.react-flow__background-pattern.lines {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
    );
  }
.react-flow__background-pattern.cross {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
    );
  }
.react-flow__controls {
  display: flex;
  flex-direction: column;
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
}
.react-flow__controls.horizontal {
    flex-direction: row;
  }
.react-flow__controls-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    padding: 4px;
    border: none;
    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
    border-bottom: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
    color: var(
      --xy-controls-button-color-props,
      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
    );
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-input,
.react-flow__node-default,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
  width: 150px;
  font-size: 12px;
  color: var(--xy-node-color, var(--xy-node-color-default));
  text-align: center;
  border: var(--xy-node-border, var(--xy-node-border-default));
  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
}
.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
    }
.react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
    }
.react-flow__node-group {
  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls-button:hover {
      background: var(
        --xy-controls-button-background-color-hover-props,
        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
      );
      color: var(
        --xy-controls-button-color-hover-props,
        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
      );
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__controls-button:last-child {
    border-bottom: none;
  }
.react-flow__controls.horizontal .react-flow__controls-button {
    border-bottom: none;
    border-right: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
  }
.react-flow__controls.horizontal .react-flow__controls-button:last-child {
    border-right: none;
  }
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  translate: -50% -50%;
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
.react-flow__edge-textbg {
  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}
.react-flow__edge-text {
  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
}


/* ===== Virtual Staging Studio — Design System v3 · Dark Premium Glass Studio ===== */
:root {
  /* ── Graphite Obsidian Surfaces ── */
  --bg-app: #02070c;                  /* Deep near-black graphite canvas base */
  --bg-shell: #040b11;                /* Obsidian panels/app wrapper container */
  --bg-panel: rgba(7, 18, 27, 0.82);   /* Primary frosted glass backing */
  --bg-panel-strong: rgba(9, 23, 34, 0.94); /* Opaque glass backing for overlays */
  --bg-panel-soft: rgba(10, 28, 40, 0.56);  /* Translucent glass backing */

  /* ── Cyan/Teal Neon Palette ── */
  --cyan: #00e5ff;                    /* Primary glowing accent */
  --cyan-strong: #19f2ff;             /* Vivid cyan for active click borders */
  --cyan-soft: rgba(0, 229, 255, 0.16); /* Translucent cyan tint background */
  --cyan-border: rgba(0, 229, 255, 0.42); /* Semi-transparent cyan border lines */
  --cyan-glow: 0 0 28px rgba(0, 229, 255, 0.32); /* Glow box shadow styling */

  /* ── Accent Colors ── */
  --teal: #00c6b7;                    /* Secondary tech accent */
  --success: #00e69a;                 /* Glowing green for completed actions */
  --warning: #ffb020;                 /* Warning indicator */
  --danger: #ff4d5e;                  /* Danger / error indicator */

  /* ── Typography & Grayscale ── */
  --text-primary: #f5f8fb;            /* Crisp off-white main text */
  --text-secondary: #9ba8b5;          /* Muted graphite body text */
  --text-muted: #5f6d7a;              /* Slate grey description text */
  --text-accent: var(--cyan);

  /* ── Fine Borders ── */
  --border-soft: rgba(141, 220, 255, 0.12);
  --border-strong: rgba(0, 229, 255, 0.38);

  /* ── Corner Radii ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  /* ── Shadows & Depth ── */
  --shadow-panel: 0 18px 60px rgba(0, 0, 0, 0.46);
  --shadow-glow: 0 0 34px rgba(0, 229, 255, 0.24);

  /* ── Motion & Speed ── */
  --transition-fast: 160ms ease;
  --transition-smooth: 260ms ease;

  /* ── Legacy Variables Mapping (to prevent broken references) ── */
  --bg-primary: var(--bg-app);
  --bg-secondary: var(--bg-shell);
  --bg-tertiary: var(--bg-panel-soft);
  --bg-card: var(--bg-panel);
  --bg-glass: var(--bg-panel);
  --bg-hover: rgba(0, 229, 255, 0.08);
  --bg-active: var(--cyan-soft);
  --border: var(--border-soft);
  --border-active: var(--cyan-border);
  --border-hover: rgba(0, 229, 255, 0.25);
  --border-glass: var(--border-soft);
  --text-tertiary: var(--text-muted);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-error: var(--danger);
  --color-info: var(--cyan);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
}
/* ===== Base Classes ===== */
.glass-panel {
  background: linear-gradient(180deg, rgba(13, 29, 41, 0.86), rgba(4, 12, 18, 0.9)) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-panel) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}
.glass-panel.is-active,
.glass-panel:hover {
  border-color: var(--cyan-border) !important;
  box-shadow: var(--shadow-panel), var(--shadow-glow) !important;
}
.glass-panel-strong {
  background: var(--bg-panel-strong) !important;
  border: 1px solid var(--border-strong) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  box-shadow: var(--shadow-panel), var(--shadow-glow) !important;
}
.neon-button {
  border: 1px solid rgba(111, 245, 255, 0.72) !important;
  background: linear-gradient(135deg, #10ddff 0%, #0098a8 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 0 30px rgba(0, 229, 255, 0.36) !important;
  border-radius: 12px !important;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
}
.neon-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 42px rgba(0, 229, 255, 0.52) !important;
}
.neon-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}
.ghost-button {
  border: 1px solid var(--border-soft) !important;
  background: rgba(4, 12, 18, 0.68) !important;
  color: var(--text-secondary) !important;
  border-radius: 12px !important;
  transition: all var(--transition-fast);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
}
.ghost-button:hover {
  color: var(--text-primary) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.ghost-button.is-active {
  color: var(--cyan) !important;
  border-color: var(--cyan-border) !important;
  background: var(--cyan-soft) !important;
  box-shadow: var(--cyan-glow) !important;
}
:focus-visible {
  outline: 2px solid rgba(0, 229, 255, 0.8) !important;
  outline-offset: 2px !important;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #root { height: 100%; width: 100%; font-family: 'Plus Jakarta Sans', sans-serif; background: var(--bg-app); color: var(--text-primary); overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* ── Scrollbars ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; transition: background 0.2s; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }
/* ── Selection ── */
::selection { background: rgba(34, 211, 238,0.35); color: #fff; }
h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 1.1rem; font-weight: 600; }
h3 { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
/* ===== Shell ===== */
.app-shell { display: flex; flex-direction: column; height: 100vh; width: 100vw; }
.app-header {
  height: var(--header-height); display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; background: var(--bg-glass); backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid var(--border-glass); z-index: 100; flex-shrink: 0;
  box-shadow: var(--shadow-inset-t), 0 1px 3px rgba(0,0,0,0.2);
  position: relative;
}
.app-header::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238,0.3) 30%, rgba(20, 184, 166,0.3) 70%, transparent);
}
.app-header .logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: opacity var(--transition-fast); }
.app-header .logo:hover { opacity: 0.85; }
.app-header .logo-icon {
  width: 28px; height: 28px; background: var(--gradient-brand); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; font-size: 0.8rem;
  box-shadow: var(--shadow-glow-sm);
}
.app-header .logo-text span { color: var(--text-accent); }
.header-actions { display: flex; gap: 8px; align-items: center; }
.credit-badge {
  display: flex; align-items: center; gap: 6px; padding: 4px 10px;
  background: rgba(21,27,43,0.8); border: 1px solid var(--border-glass); border-radius: 20px;
  font-size: 0.7rem; color: var(--text-secondary); backdrop-filter: blur(8px);
  transition: all var(--transition-smooth);
}
.credit-badge:hover { border-color: var(--border-hover); background: rgba(21,27,43,0.95); }
.credit-badge .amt { color: var(--color-success); font-weight: 600; }
.user-badge {
  display: inline-flex; align-items: center; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; padding: 4px 9px; border: 1px solid var(--border-glass); border-radius: 999px;
  background: rgba(255,255,255,0.03); color: var(--text-secondary); font-size: 0.66rem;
  transition: all var(--transition-smooth);
}
.user-badge:hover { background: rgba(255,255,255,0.06); border-color: var(--border-hover); }
/* ===== Auth ===== */
.auth-screen {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 10% 20%, rgba(34, 211, 238, 0.12), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(20, 184, 166, 0.08), transparent 50%),
    #05070d;
}
.auth-shell {
  display: flex;
  width: min(920px, 100%);
  min-height: 520px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(10, 16, 26, 0.45);
  border: 1px solid rgba(180, 230, 240, 0.16);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}
.auth-brand-panel {
  flex: 1.2;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(15, 23, 32, 0.7) 0%, rgba(5, 7, 13, 0.95) 100%);
  border-right: 1px solid rgba(180, 230, 240, 0.12);
  position: relative;
  overflow: hidden;
}
.auth-brand-panel::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.1) 0%, transparent 60%);
  pointer-events: none;
}
.auth-brand-panel h1 {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.15;
  margin-top: 16px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #ffffff 40%, #22d3ee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.03em;
}
.auth-brand-panel p {
  color: #8b95a8;
  font-size: 0.95rem;
  line-height: 1.6;
}
.auth-kicker {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #22d3ee;
}
.app-powered {
  font-size: 0.75rem;
  color: #5a6478;
  letter-spacing: 0.05em;
}
.auth-card {
  flex: 1;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(15, 23, 32, 0.55) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 24px;
  background: rgba(4, 8, 16, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}
.auth-tabs button {
  border: 0;
  border-radius: 8px;
  padding: 9px 12px;
  background: transparent;
  color: #8b95a8;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 250ms ease;
}
.auth-tabs button:hover {
  color: #f0f2f5;
}
.auth-tabs button.active {
  background: rgba(34, 211, 238, 0.15);
  color: #22d3ee;
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.16);
}
.auth-error {
  padding: 10px 14px;
  margin: 12px 0;
  border: 1px solid rgba(244, 63, 94, 0.3);
  border-radius: 8px;
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.08);
  font-size: 0.78rem;
}
.auth-info {
  padding: 10px 14px;
  margin: 12px 0;
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
  color: #10b981;
  background: rgba(16, 185, 129, 0.08);
  font-size: 0.78rem;
}
.auth-submit {
  width: 100%;
  margin-top: 16px;
  padding: 10px 18px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.22) !important;
}
.auth-link {
  background: none;
  border: none;
  color: #8b95a8;
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  margin-top: 20px;
  transition: color 150ms ease;
  text-align: center;
}
.auth-link:hover {
  color: #22d3ee;
}
/* ===== Layout ===== */
.app-body { flex: 1; display: flex; overflow: hidden; min-height: 0; }
.sidebar {
  width: var(--sidebar-width); background: var(--bg-glass); border-right: 1px solid var(--border-glass);
  backdrop-filter: blur(28px) saturate(1.6); display: flex; flex-direction: column;
  z-index: 10; overflow: hidden; flex-shrink: 0;
  box-shadow: var(--shadow-inset-t);
}
.right-panel {
  width: var(--right-panel-width); background: var(--bg-glass); border-left: 1px solid var(--border-glass);
  backdrop-filter: blur(28px) saturate(1.6); display: flex; flex-direction: column;
  z-index: 10; overflow: hidden; flex-shrink: 0;
  box-shadow: var(--shadow-inset-t);
}
.main-canvas-area { flex: 1; display: flex; flex-direction: column; position: relative; overflow: hidden; background: #060a14; background-image: radial-gradient(ellipse at 20% 50%, rgba(34, 211, 238,0.04) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(20, 184, 166,0.03) 0%, transparent 60%); min-width: 0; }
/* ===== Tabs ===== */
.tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.tab {
  flex: 1; padding: 8px 4px; text-align: center; font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); cursor: pointer;
  border-bottom: 2px solid transparent; transition: all var(--transition-smooth);
  background: none; border-top: none; border-left: none; border-right: none;
  position: relative;
}
.tab:hover { color: var(--text-secondary); background: var(--bg-surface); }
.tab.active { color: var(--text-accent); border-bottom-color: var(--text-accent); }
.tab.active::after {
  content: ''; position: absolute; bottom: -1px; left: 20%; right: 20%; height: 2px;
  background: var(--gradient-brand); border-radius: 2px; filter: blur(3px); opacity: 0.5;
}
.tab-content { flex: 1; overflow-y: auto; min-height: 0; }
/* ===== Accordion ===== */
.accordion-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--border);
  user-select: none; transition: all var(--transition-smooth);
  position: relative;
}
.accordion-header::before {
  content: ''; position: absolute; left: 0; top: 25%; bottom: 25%; width: 2px;
  background: var(--gradient-brand); border-radius: 2px;
  opacity: 0; transition: opacity var(--transition-smooth);
}
.accordion-header:hover { background: var(--bg-hover); }
.accordion-header.open::before { opacity: 1; }
.accordion-header .title { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); transition: color var(--transition-smooth); }
.accordion-header.open .title { color: var(--text-accent); }
.accordion-header .arrow { font-size: 0.6rem; color: var(--text-tertiary); transition: transform var(--transition-smooth), color var(--transition-smooth); }
.accordion-header.open .arrow { transform: rotate(90deg); color: var(--text-accent); }
.accordion-body { overflow: hidden; transition: max-height 350ms cubic-bezier(0.4, 0, 0.2, 1); }
.accordion-body.collapsed { max-height: 0 !important; }
.accordion-body-inner { padding: 10px 12px; }
/* ===== Panel Section (compact) ===== */
.panel-section { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.panel-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.panel-section-title { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); }
/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 12px; border: 1px solid var(--border-glass); border-radius: var(--radius-sm);
  background: var(--bg-tertiary); color: var(--text-primary); font-family: inherit;
  font-size: 0.75rem; font-weight: 500; cursor: pointer;
  transition: all var(--motion-fast) var(--easing-standard); white-space: nowrap;
  position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: var(--gradient-shine); opacity: 0; transition: opacity var(--transition-smooth);
}
.btn:hover { background: rgba(255,255,255,0.06); border-color: var(--border-hover); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.btn-primary {
  background: var(--gradient-brand); border: none; color: #fff; font-weight: 600;
  box-shadow: var(--shadow-glow-sm);
}
.btn-primary:hover { box-shadow: var(--shadow-glow-sm); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-glow-sm); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-sm { padding: 4px 8px; font-size: 0.68rem; }
.btn-xs { padding: 2px 6px; font-size: 0.6rem; }
.btn-ghost { background: transparent; border: none; color: var(--text-secondary); }
.btn-ghost:hover { color: var(--text-primary); background: var(--bg-hover); }
.btn-danger { border-color: rgba(255,23,68,0.4); color: var(--color-error); }
.btn-danger:hover { background: rgba(255,23,68,0.12); border-color: rgba(255,23,68,0.6); }
/* ===== Inputs ===== */
.input, .select, .textarea {
  width: 100%; padding: 6px 10px; background: rgba(4,8,16,0.6);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-primary); font-family: inherit; font-size: 0.75rem;
  transition: all var(--transition-smooth);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--border-active);
  box-shadow: 0 0 0 3px rgba(34, 211, 238,0.1), 0 0 12px rgba(34, 211, 238,0.06);
  background: rgba(4,8,16,0.8);
}
.select {
  appearance: none; cursor: pointer; padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b95a8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: capitalize;
}
.select option { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; text-transform: capitalize; }
.textarea { resize: vertical; min-height: 50px; }
.form-group { margin-bottom: 8px; }
.form-label { display: block; margin-bottom: 3px; font-size: 0.68rem; font-weight: 500; color: var(--text-secondary); }
/* ===== Toggle ===== */
.toggle-wrap { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.toggle {
  width: 32px; height: 18px; background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: 9px; position: relative; transition: all var(--transition-smooth); flex-shrink: 0;
}
.toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
  background: var(--text-secondary); border-radius: 50%; transition: all var(--transition-smooth);
}
.toggle.active { background: var(--text-accent); border-color: var(--text-accent); box-shadow: 0 0 10px rgba(34, 211, 238,0.3); }
.toggle.active::after { left: 16px; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,0.3); }
/* ===== Badge ===== */
.badge { display: inline-flex; align-items: center; padding: 2px 7px; font-size: 0.6rem; font-weight: 600; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.04em; }
.badge-floor { background: rgba(0,174,239,0.15); color: var(--color-floor); }
.badge-wall { background: rgba(255,138,0,0.15); color: var(--color-wall); }
.badge-custom { background: rgba(20, 184, 166,0.15); color: var(--color-custom); }
.badge-proxy { background: rgba(0,200,83,0.15); color: var(--color-proxy); }
.badge-area { background: rgba(255,214,0,0.15); color: var(--color-area); }
.badge-success { background: rgba(0,200,83,0.15); color: var(--color-success); }
.badge-warning { background: rgba(255,214,0,0.15); color: var(--color-warning); }
.badge-error { background: rgba(255,23,68,0.15); color: var(--color-error); }
.badge-info { background: rgba(0,174,239,0.15); color: var(--color-info); }
/* ===== Toolbar ===== */
.toolbar {
  height: var(--toolbar-height); display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  background: linear-gradient(180deg, rgba(14,20,36,0.97), rgba(7,9,15,0.97));
  border-bottom: 1px solid rgba(34, 211, 238,0.12);
  box-shadow: var(--shadow-inset-t), 0 2px 8px rgba(0,0,0,0.3);
  backdrop-filter: blur(24px) saturate(1.5); flex-shrink: 0; overflow-x: auto; overflow-y: visible;
  position: relative; z-index: 20;
}
.toolbar::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(34, 211, 238,0.2) 30%, rgba(20, 184, 166,0.15) 70%, transparent 95%);
}
.tool-group {
  display: flex; align-items: center; gap: 3px; padding: 3px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 9px; box-shadow: var(--elevation-1), var(--shadow-inset-t);
}
.tool-btn {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 7px; background: transparent;
  color: #a9b4c2; cursor: pointer; font-size: 0.84rem; line-height: 1;
  transition: all var(--transition-smooth);
  position: relative; flex-shrink: 0;
}
/* Text-label variant (primary style) */
.tool-btn.tool-btn-label {
  width: auto; height: 28px; padding: 0 10px; gap: 4px;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.02em;
  border-radius: 20px;
}
.tool-label-text {
  white-space: nowrap;
}
.tool-shortcut {
  font-size: 0.52rem; font-weight: 600; color: rgba(169, 180, 194, 0.5);
  background: rgba(255,255,255,0.04); padding: 1px 4px; border-radius: 3px;
  line-height: 1; margin-left: 2px;
}
.tool-btn:hover {
  background: rgba(34, 211, 238,0.16); color: #fff;
  border-color: rgba(34, 211, 238,0.3); transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 211, 238,0.15);
}
.tool-btn.active {
  background: rgba(34, 211, 238, 0.16) !important;
  color: #22d3ee !important;
  border-color: rgba(34, 211, 238, 0.6) !important;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
.tool-btn.toggle-tool { color: #a9b4c2; }
.tool-icon { display: block; transform: translateY(-0.5px); }
.tool-btn .tooltip {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  padding: 5px 10px; background: rgba(7,9,15,0.95);
  border: 1px solid rgba(34, 211, 238,0.15); backdrop-filter: blur(12px);
  border-radius: 8px; font-size: 0.62rem; color: #bff8ff; white-space: normal;
  width: max-content; max-width: 260px;
  pointer-events: none; opacity: 0;
  transition: all var(--transition-smooth); z-index: 9999;
  box-shadow: var(--elevation-2);
}
.tool-btn:hover .tooltip { opacity: 1; top: calc(100% + 7px); }
/* ─── Toolbar Expand/Collapse Button ─── */
.toolbar-expand-btn {
  background: linear-gradient(135deg, rgba(34, 211, 238,0.12), rgba(20, 184, 166,0.08)) !important;
  border: 1px dashed rgba(34, 211, 238,0.35) !important;
  color: rgba(34, 211, 238,0.8) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.toolbar-expand-btn:hover {
  background: linear-gradient(135deg, rgba(34, 211, 238,0.25), rgba(20, 184, 166,0.18)) !important;
  border-color: rgba(34, 211, 238,0.5) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(34, 211, 238,0.25) !important;
  transform: translateY(-1px) scale(1.05) !important;
}
.toolbar-expand-btn.active {
  background: linear-gradient(135deg, rgba(34, 211, 238,0.2), rgba(20, 184, 166,0.15)) !important;
  border-style: solid !important;
  border-color: rgba(34, 211, 238,0.4) !important;
  color: #bff8ff !important;
}
/* ===== Dashboard ===== */
.dashboard { display: flex; flex-direction: column; flex: 1; }
.dashboard-content { flex: 1; overflow-y: auto; padding: 32px; max-width: 1200px; margin: 0 auto; width: 100%; }
/* Key Visual Hero */
.kv-hero {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  background: #070a18;
  border: 1px solid rgba(34, 211, 238, 0.15);
  margin-bottom: 40px; min-height: 280px;
  display: flex; align-items: flex-end; justify-content: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), inset 0 0 80px rgba(34, 211, 238,0.05), var(--shadow-glow-sm);
}
.kv-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,14,26,0.9) 0%, transparent 60%);
  pointer-events: none; z-index: 1;
}
.kv-hero-content {
  position: relative; z-index: 2; text-align: center; padding: 0 32px 36px;
}
.kv-btn-main {
  position: relative;
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 12px 32px; border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff; cursor: pointer;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.2);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
}
.kv-btn-main::before {
  content: ''; position: absolute; inset: 0;
  background: var(--gradient-brand);
  opacity: 0.25; transition: opacity 0.3s;
  z-index: -1;
}
.kv-btn-main::after {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
  transform: translate(-50%, -50%);
}
.kv-btn-main:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(129, 140, 248, 0.5);
  box-shadow: 0 12px 40px rgba(34, 211, 238,0.35), inset 0 1px 1px rgba(255,255,255,0.3), var(--shadow-glow-brand);
  color: #fff;
}
.kv-btn-main:hover::before { opacity: 0.55; }
.kv-btn-main:hover::after { opacity: 1; animation: rotate 4s linear infinite; }
.kv-btn-main:active { transform: translateY(-1px) scale(0.99); }
.projects-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.projects-header h2 { font-size: 1.3rem; font-weight: 700; background: linear-gradient(to right, #fff, #a9b4c2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
/* Enhanced Project Card */
.project-card { 
  position: relative; 
  background: rgba(12, 17, 30, 0.65); 
  border: 1px solid rgba(255,255,255,0.05); 
  border-radius: var(--radius-xl); 
  overflow: hidden; cursor: pointer; 
  transition: transform var(--motion-medium) var(--easing-standard), box-shadow var(--motion-medium) var(--easing-standard); 
  display: flex; flex-direction: column;
}
.project-card-glass {
  position: absolute; inset: 0; z-index: 0;
  backdrop-filter: blur(16px);
  background: var(--gradient-glass);
  opacity: 0; transition: opacity 0.4s;
  pointer-events: none;
}
.project-card:hover { 
  transform: translateY(-2px); 
  border-color: rgba(34, 211, 238,0.35); 
  box-shadow: var(--elevation-3); 
}
.project-card:hover .project-card-glass { opacity: 1; }
.project-card-image {
  width: 100%; height: 170px; object-fit: cover;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.project-card:hover .project-card-image { transform: scale(1.05); }
.project-card:hover .project-card-image { transform: scale(1.03); }
.project-card-body { padding: 16px; display: flex; flex-direction: column; flex: 1; position: relative; z-index: 2; background: linear-gradient(to top, rgba(10,14,26,0.9) 0%, rgba(10,14,26,0.4) 100%); }
.project-card-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 8px; color: #fff; letter-spacing: -0.01em; line-height: 1.3; }
.project-card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.project-card-title-row .project-card-title { margin-bottom: 0; flex: 1; min-width: 0; }
.btn-rename-project { opacity: 0; padding: 4px 8px; font-size: 0.66rem; }
.project-card:hover .btn-rename-project { opacity: 1; }
.project-title-edit { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; margin-bottom: 8px; }
.project-title-input { height: 30px; min-width: 0; font-size: 0.78rem; }
.btn-delete-project {
  position: absolute; top: 12px; right: 12px; z-index: 10;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer; padding: 6px 7px; border-radius: 8px; opacity: 0; 
  transition: all var(--transition-smooth); color: rgba(255,255,255,0.6); 
  backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center;
  transform: translateY(-4px); font-size: 0.72rem;
}
.project-card:hover .btn-delete-project { opacity: 1; transform: translateY(0); }
.btn-delete-project:hover { background: rgba(239,83,80,0.85); color: #fff; border-color: #ef5350; transform: scale(1.08) !important; box-shadow: 0 4px 12px rgba(239,83,80,0.3); }
.project-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.meta-chip { font-size: 0.65rem; color: var(--text-secondary); background: rgba(255,255,255,0.04); padding: 2px 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); }
.project-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,0.08); }
.project-retention { margin-top: 8px; color: var(--color-warning); font-size: 0.68rem; font-weight: 700; }
.project-date { font-size: 0.68rem; color: var(--text-tertiary); font-weight: 500; }
.project-stats { display: flex; gap: 6px; }
.stat-badge { font-size: 0.65rem; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.stat-ref { background: rgba(0,174,239,0.1); color: #00AEEF; }
.stat-out { background: rgba(0,200,83,0.1); color: #00C853; }
/* Empty Project Card */
.empty-project-card {
  min-height: 290px;
  border: 2px dashed rgba(255,255,255,0.12);
  background: rgba(12, 17, 30, 0.3);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-smooth);
}
.empty-project-card:hover {
  border-color: rgba(34, 211, 238,0.5);
  border-style: solid;
  background: rgba(34, 211, 238,0.06);
  box-shadow: var(--shadow-glow-sm);
}
.empty-state-content {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; color: var(--text-secondary); transition: all 0.3s;
}
.empty-project-card:hover .empty-state-content { color: #fff; transform: translateY(-4px); }
.add-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: all 0.3s;
  box-shadow: 0 0 0 0 rgba(34, 211, 238,0);
}
.empty-project-card:hover .add-icon {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: 0 0 0 8px rgba(34, 211, 238,0.2);
  animation: pulseGlow 2s infinite;
}
.empty-state-content p { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; }
/* Stagger Animation */
.stagger-in {
  opacity: 0;
  animation: staggerFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes staggerFadeUp {
  0% { opacity: 0; transform: translateY(20px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(34, 211, 238,0.4); }
  70% { box-shadow: 0 0 0 12px rgba(34, 211, 238,0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 211, 238,0); }
}
/* ===== Modal ===== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; animation: fadeIn 0.2s ease;
}
.modal {
  background: rgba(15, 20, 35, 0.72);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg); padding: 28px; width: 480px;
  max-width: 90vw; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--elevation-4);
  animation: modalSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-lg { width: 800px; }
.modal h2 { margin-bottom: 16px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
/* ===== Reference Grid ===== */
.ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ref-slot {
  aspect-ratio: 1; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; cursor: pointer; transition: all var(--transition-smooth);
  position: relative; overflow: hidden; font-size: 0.6rem; color: var(--text-tertiary);
}
.ref-slot:hover { border-color: var(--border-active); background: var(--bg-hover); box-shadow: var(--shadow-glow-sm); }
.ref-slot.filled { border-style: solid; }
.ref-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }
.ref-slot .ref-remove { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background: rgba(0,0,0,0.7); border: none; border-radius: 50%; color: #fff; font-size: 0.55rem; cursor: pointer; display: none; align-items: center; justify-content: center; }
.ref-slot:hover .ref-remove { display: flex; }
/* ===== Output Gallery ===== */
.output-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.output-card { position: relative; border: 2px solid var(--border); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: all var(--transition-fast); }
.output-card:hover { border-color: var(--border-hover); }
.output-card.selected { border-color: var(--color-success); box-shadow: 0 0 12px rgba(0,200,83,0.2); }
.output-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.output-card .select-badge { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; background: var(--color-success); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; color: #fff; }
/* ===== Before/After ===== */
.before-after { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--border); cursor: ew-resize; }
.before-after img { display: block; width: 100%; }
.before-after .after-container { position: absolute; inset: 0; }
.before-after .slider-line { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; z-index: 10; box-shadow: 0 0 8px rgba(0,0,0,0.5); }
.before-after .slider-handle { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 11; box-shadow: 0 2px 8px rgba(0,0,0,0.3); font-size: 0.75rem; color: #333; }
.before-after .label { position: absolute; bottom: 10px; padding: 3px 10px; background: rgba(0,0,0,0.7); border-radius: 20px; font-size: 0.65rem; font-weight: 600; color: #fff; z-index: 5; }
.before-after .label-before { left: 10px; }
.before-after .label-after { right: 10px; }
/* ===== Inspector Items ===== */
.inspector-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 4px; cursor: pointer; transition: all var(--transition-smooth);
}
.inspector-item:hover { border-color: var(--border-hover); background: var(--bg-hover); padding-left: 10px; }
.inspector-item.active { border-color: var(--border-active); background: var(--bg-active); box-shadow: var(--shadow-glow-sm); }
.inspector-item .color-dot { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; transition: transform var(--transition-smooth); }
.inspector-item:hover .color-dot { transform: scale(1.3); }
.inspector-item .item-name { flex: 1; font-size: 0.72rem; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ===== Color Picker Inline ===== */
.color-picker-row { display: flex; gap: 4px; flex-wrap: wrap; }
.color-swatch {
  width: 18px; height: 18px; border-radius: 4px; cursor: pointer;
  border: 2px solid transparent; transition: all var(--transition-smooth);
}
.color-swatch:hover { transform: scale(1.2); box-shadow: 0 0 8px rgba(255,255,255,0.15); }
.color-swatch.active { border-color: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.35), 0 0 16px rgba(34, 211, 238,0.2); transform: scale(1.1); }
/* ===== History ===== */
.history-item { display: flex; gap: 10px; padding: 6px; cursor: pointer; border-radius: var(--radius-sm); transition: background var(--transition-fast); }
.history-item:hover { background: var(--bg-hover); }
.history-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.history-info { flex: 1; min-width: 0; }
.history-info .type { font-size: 0.72rem; font-weight: 500; }
.history-info .time { font-size: 0.6rem; color: var(--text-tertiary); }
/* ===== Prompt Editor ===== */
/* ===== Prompt Editor ===== */
.prompt-editor {
  width: 100%; min-height: 180px; padding: 12px;
  background: rgba(4,8,16,0.6); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-family: 'Inter', monospace;
  font-size: 0.72rem; color: var(--text-primary); line-height: 1.6; resize: vertical;
  transition: all var(--transition-smooth);
}
.prompt-editor:focus {
  border-color: var(--border-active);
  box-shadow: 0 0 0 3px rgba(34, 211, 238,0.08), 0 0 20px rgba(34, 211, 238,0.05);
  background: rgba(4,8,16,0.8);
}
.prompt-section-label { color: var(--text-accent); font-weight: 700; }
.prompt-hint {
  font-size: 0.65rem; color: var(--text-tertiary); padding: 6px 8px;
  background: rgba(21,27,43,0.6); border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin-bottom: 8px; line-height: 1.4;
}
/* ===== Progress / Generate ===== */
.progress-bar {
  width: 100%; height: 4px; background: rgba(4,8,16,0.6);
  border-radius: 2px; overflow: hidden; position: relative;
}
.progress-bar-fill {
  height: 100%; background: var(--gradient-brand); border-radius: 2px;
  transition: width 0.3s ease; position: relative;
}
.progress-bar-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--text-accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
.generation-inline-status { margin-left: 10px; padding: 2px 8px; border-radius: 999px; background: rgba(20, 184, 166,0.18); border: 1px solid rgba(20, 184, 166,0.35); color: var(--text-accent); font-size: 0.62rem; font-weight: 700; }
/* ===== Empty State ===== */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; text-align: center; }
.empty-state .icon { font-size: 2rem; margin-bottom: 12px; opacity: 0.3; }
.empty-state p { font-size: 0.78rem; color: var(--text-secondary); max-width: 220px; }
/* ===== Measurement / Axis labels ===== */
.measure-label { font-size: 10px; fill: rgba(255,255,255,0.7); font-family: 'Inter', sans-serif; pointer-events: none; }
.axis-line { stroke-dasharray: 4 3; opacity: 0.4; }
/* ===== Quad Viewport Grid ===== */
.quad-viewport-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; overflow: hidden; background: #000; }
.quad-cell { position: relative; overflow: hidden; background: var(--bg-primary); }
.quad-label { position: absolute; top: 0; left: 0; right: 0; z-index: 10; padding: 3px 10px; background: rgba(0,0,0,0.75); backdrop-filter: blur(6px); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); text-transform: uppercase; }
/* ===== Animations ===== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.animate-in { animation: slideUp 0.3s ease; }
/* ===== Brand Badge Animations ===== */
@keyframes brandGradientShift {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 200% center; }
}
@keyframes brandShineSweep {
  0%, 100% { left: -100%; opacity: 0; }
  40% { opacity: 1; }
  60% { opacity: 1; }
  80% { left: 100%; opacity: 0; }
}
.brand-badge {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.brand-badge:hover {
  border-color: rgba(0, 229, 255, 0.5);
  box-shadow: 0 0 28px rgba(0, 229, 255, 0.15), inset 0 0 28px rgba(0, 229, 255, 0.05);
  transform: translateY(-1px);
}
/* ===== Layer Panel ===== */
.layer-panel {
  position: absolute; bottom: 12px; right: 12px; z-index: 50;
  width: 240px; max-height: 360px;
  background: rgba(7,9,15,0.92); backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--border-glass); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl); overflow: hidden;
  animation: modalSlideUp 0.2s ease;
}
.layer-panel-collapsed {
  position: absolute; bottom: 12px; right: 12px; z-index: 50;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(10,14,26,0.9); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 0.7rem; color: var(--text-secondary);
  transition: var(--transition-fast);
}
.layer-panel-collapsed:hover { background: var(--bg-hover); border-color: var(--border-active); }
.layer-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; border-bottom: 1px solid var(--border);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-secondary);
}
.layer-panel-header .btn-icon { background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; }
.layer-panel-header .btn-icon:hover { background: var(--bg-hover); color: var(--text-primary); }
.layer-panel-body { overflow-y: auto; max-height: 310px; padding: 2px 0; }
.layer-group { margin-bottom: 2px; }
.layer-group-label { padding: 4px 10px; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.layer-tree-node { margin-bottom: 1px; }
.layer-tree-node .layer-children { border-left: 1px solid rgba(255,255,255,0.06); margin-left: 14px; }
.layer-item {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 8px; cursor: pointer; font-size: 0.62rem;
  transition: all var(--transition-smooth); min-height: 24px;
}
.layer-item:hover { background: var(--bg-hover); padding-left: 10px; }
.layer-item.selected { background: var(--bg-active); border-left: 2px solid var(--text-accent); box-shadow: inset 3px 0 8px rgba(34, 211, 238,0.1); }
.layer-item.hidden-layer { opacity: 0.3; }
.layer-item-plane { font-weight: 600; font-size: 0.64rem; }
.layer-item-plane.selected { background: rgba(0,174,239,0.1); border-left: 2px solid #00AEEF; }
.layer-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.layer-icon { font-size: 0.58rem; }
.layer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-badge { font-size: 0.48rem; flex-shrink: 0; opacity: 0.7; }
.layer-count {
  font-size: 0.48rem; background: rgba(255,255,255,0.08); color: var(--text-tertiary);
  padding: 0 4px; border-radius: 6px; min-width: 14px; text-align: center; flex-shrink: 0;
}
.expand-btn {
  background: none; border: none; cursor: pointer; font-size: 0.45rem;
  color: var(--text-tertiary); padding: 0 2px; transition: transform 0.15s ease;
  width: 14px; display: flex; align-items: center; justify-content: center;
}
.expand-btn:hover { color: var(--text-primary); }
.vis-btn {
  background: none; border: none; cursor: pointer; padding: 1px 2px;
  color: var(--text-secondary); transition: opacity 0.15s ease;
  display: flex; align-items: center; justify-content: center;
}
.vis-btn:hover { color: var(--text-primary); }
.drag-handle { user-select: none; }
.btn-icon-sm {
  background: none; border: none; cursor: pointer; color: var(--text-tertiary);
  font-size: 0.7rem; padding: 0 3px; line-height: 1; opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease; flex-shrink: 0;
}
.layer-item:hover .btn-icon-sm,
.inspector-item:hover .btn-icon-sm { opacity: 0.6; }
.btn-icon-sm:hover { opacity: 1 !important; color: var(--color-error); }
/* ===== Canvas Context Menu ===== */
.canvas-ctx-menu {
  background: var(--bg-secondary); border: 1px solid var(--border-hover);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  min-width: 140px; padding: 4px 0; backdrop-filter: blur(12px);
}
.ctx-menu-header {
  padding: 6px 12px; font-size: 0.62rem; font-weight: 600;
  color: var(--text-secondary); border-bottom: 1px solid var(--border);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ctx-menu-item {
  display: block; width: 100%; padding: 6px 12px; border: none;
  background: none; color: var(--text-primary); font-size: 0.7rem;
  text-align: left; cursor: pointer; transition: background var(--transition-fast);
}
.ctx-menu-item:hover { background: var(--bg-active); }
.ctx-menu-danger { color: var(--color-error); }
.ctx-menu-danger:hover { background: rgba(255,23,68,0.12); }
/* ===== Cursor Plane Tooltip ===== */
.cursor-plane-tooltip {
  display: flex; align-items: center; gap: 5px;
  background: rgba(17,24,39,0.88); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px; padding: 3px 8px; font-size: 0.6rem; font-weight: 500;
  color: var(--text-primary); white-space: nowrap; backdrop-filter: blur(6px);
  box-shadow: var(--elevation-1);
}
.cpt-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
/* ===== Video Tab ===== */
.video-tab { display: flex; flex-direction: column; height: 100%; width: 100%; flex: 1; min-width: 0; background: var(--bg-primary); }
.video-header {
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  background: var(--bg-glass); backdrop-filter: blur(12px);
}
.video-body { display: flex; flex: 1; overflow: hidden; }
.video-controls {
  width: 430px; flex-shrink: 0; overflow-y: auto; padding: 12px;
  border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px;
}
.video-section {}
.video-frame-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px; align-items: stretch;
}
.video-frame-section { min-width: 0; }
.video-section .section-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.7rem; font-weight: 600; color: var(--text-secondary);
  margin-bottom: 6px;
}
.upload-zone {
  border: 2px dashed var(--border); border-radius: 8px; padding: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer; transition: all var(--transition-smooth);
  min-height: 120px; position: relative; overflow: hidden;
}
.upload-zone:hover { border-color: var(--text-accent); background: var(--bg-hover); box-shadow: var(--shadow-glow-sm); }
.upload-zone-compact { min-height: 86px; padding: 10px; }
.upload-zone-sm { min-height: 52px; padding: 8px; }
.video-frame-section .upload-zone-sm { min-height: 86px; }
.upload-preview { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; max-height: 120px; }
.upload-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 0.7rem; color: var(--text-secondary);
}
.gallery-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;
  max-height: 116px; overflow-y: auto; padding: 2px;
}
.gallery-thumb {
  position: relative; cursor: pointer; border-radius: 4px; overflow: hidden;
  border: 2px solid transparent; aspect-ratio: 4/3; transition: border-color 0.2s;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.selected { border-color: var(--text-accent); }
.gallery-thumb:hover { border-color: var(--border-hover); }
.gallery-check {
  position: absolute; top: 2px; right: 2px; width: 16px; height: 16px;
  background: var(--text-accent); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 0.5rem;
}
.camera-presets {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.preset-chip {
  padding: 4px 10px; border-radius: 16px; font-size: 0.62rem; font-weight: 500;
  background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-secondary);
  cursor: pointer; transition: all var(--transition-smooth);
}
.preset-chip:hover { border-color: var(--text-accent); color: var(--text-primary); transform: translateY(-1px); }
.preset-chip.active { background: rgba(34, 211, 238,0.15); border-color: var(--text-accent); color: var(--text-accent); box-shadow: var(--shadow-glow-sm); }
.settings-grid {
  display: flex; flex-direction: column; gap: 8px;
}
.setting-item {
  display: flex; align-items: center; gap: 8px; font-size: 0.68rem;
}
.setting-item label { width: 70px; color: var(--text-secondary); flex-shrink: 0; }
.setting-value { font-size: 0.62rem; color: var(--text-accent); min-width: 28px; text-align: center; }
.btn-group { display: flex; gap: 2px; }
.btn-generate-video {
  width: 100%; padding: 10px; font-size: 0.8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 8px; margin-top: 4px;
  background: var(--gradient-brand);
  color: #ffffff;
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.22);
  transition: all var(--transition-normal);
  border: none;
}
.btn-generate-video:hover { transform: translateY(-1px); box-shadow: 0 0 28px rgba(34, 211, 238, 0.35); opacity: 0.95; }
.btn-generate-video:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
/* Video preview area */
.video-preview-area {
  flex: 1; display: flex; flex-direction: column; padding: 16px; overflow-y: auto;
}
.video-player-wrap { display: flex; flex-direction: column; gap: 8px; }
.video-player {
  width: 100%; max-height: 420px; border-radius: 8px;
  background: #000; object-fit: contain;
}
.video-meta {
  display: flex; align-items: center; gap: 12px; font-size: 0.65rem; color: var(--text-secondary);
  padding: 6px 10px; background: var(--bg-tertiary); border-radius: 6px;
}
.video-prompt-preview {
  font-size: 0.62rem; color: var(--text-tertiary); padding: 6px 10px;
  background: var(--bg-secondary); border-radius: 6px; line-height: 1.4;
}
.video-empty-state {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--text-secondary); font-size: 0.78rem;
}
.video-history { margin-top: 12px; }
.video-history-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px;
}
.video-thumb {
  position: relative; cursor: pointer; border-radius: 6px; overflow: hidden;
  border: 2px solid transparent; aspect-ratio: 16/9; transition: border-color 0.2s;
}
.video-thumb:hover { border-color: var(--border-hover); }
.video-thumb.active { border-color: var(--text-accent); }
.video-thumb-label {
  position: absolute; bottom: 2px; right: 2px; font-size: 0.5rem;
  background: rgba(0,0,0,0.7); color: #fff; padding: 1px 4px; border-radius: 3px;
}
/* Tab navigation in editor */
.editor-tabs {
  display: flex; border-bottom: 1px solid var(--border-glass); background: var(--bg-glass);
  backdrop-filter: blur(12px);
}
.editor-tab {
  padding: 8px 16px; font-size: 0.72rem; font-weight: 500; cursor: pointer;
  color: var(--text-secondary); border-bottom: 2px solid transparent;
  transition: all var(--transition-smooth); display: flex; align-items: center; gap: 6px;
  position: relative;
}
.editor-tab:hover { color: var(--text-primary); background: var(--bg-surface); }
.editor-tab.active { color: var(--text-accent); border-bottom-color: var(--text-accent); }
.editor-tab.active::after {
  content: ''; position: absolute; bottom: -1px; left: 20%; right: 20%; height: 2px;
  background: var(--gradient-brand); border-radius: 2px; filter: blur(3px); opacity: 0.5;
}
/* Credit cost badge */
.credit-cost {
  font-size: 0.55rem; font-weight: 500; opacity: 0.7;
  background: rgba(255,214,0,0.12); color: #FFD600;
  padding: 1px 5px; border-radius: 8px; margin-left: 4px;
}
/* Prompt editor textarea (override duplicate) */
.prompt-editor {
  width: 100%; padding: 8px; font-size: 0.72rem; font-family: inherit;
  background: rgba(4,8,16,0.6); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-primary); resize: vertical;
  line-height: 1.5; transition: all var(--transition-smooth);
}
.prompt-editor:focus { border-color: var(--text-accent); outline: none; box-shadow: 0 0 0 3px rgba(34, 211, 238,0.08); }
/* ─── Toolbar status bar ─── */
.toolbar-status {
  display: flex; align-items: center; gap: 6px; padding: 4px 12px;
  background: rgba(14,20,36,0.8); border-bottom: 1px solid var(--border);
  min-height: 24px; font-size: 0.65rem; position: relative; z-index: 5;
  backdrop-filter: blur(8px);
}
/* ─── History Tab ─── */
.history-tab {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-primary); padding: 16px;
}
.history-tab-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.history-filters {
  display: flex; gap: 4px; padding: 10px 0;
}
.filter-btn {
  background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: 16px; padding: 4px 12px; font-size: 0.68rem;
  color: var(--text-secondary); cursor: pointer; transition: all var(--transition-smooth);
}
.filter-btn:hover { background: var(--bg-hover); border-color: var(--border-hover); transform: translateY(-1px); }
.filter-btn.active { background: var(--bg-active); border-color: var(--text-accent); color: var(--text-accent); box-shadow: var(--shadow-glow-sm); }
.history-content {
  flex: 1; display: flex; gap: 16px; overflow: hidden;
}
.history-grid {
  flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; overflow-y: auto; padding: 4px; align-content: start;
}
.history-empty {
  grid-column: 1 / -1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 40px;
  color: var(--text-tertiary); font-size: 0.75rem;
}
.history-card {
  border-radius: 8px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; transition: all 0.2s;
  background: var(--bg-card);
}
.history-card:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.history-card.selected { border-color: var(--text-accent); box-shadow: 0 0 12px rgba(34, 211, 238,0.2); }
.history-thumb {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
}
.video-thumb-container { position: relative; }
.video-thumb-container video { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.video-badge {
  position: absolute; bottom: 4px; right: 4px;
  background: rgba(0,0,0,0.7); color: #fff; padding: 1px 6px;
  border-radius: 8px; font-size: 0.55rem; font-weight: 600;
}
.history-card-info {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px; font-size: 0.6rem;
}
.type-badge { font-size: 0.55rem; }
.type-badge.image { color: var(--color-floor); }
.type-badge.video { color: var(--color-warning); }
.history-time { color: var(--text-tertiary); font-size: 0.55rem; }
.history-detail {
  width: 280px; min-width: 280px; overflow-y: auto;
  background: var(--bg-card); border-radius: 8px; padding: 12px;
  border: 1px solid var(--border);
}
.detail-preview {
  width: 100%; border-radius: 6px; margin-bottom: 10px;
  max-height: 260px; object-fit: contain; background: #000;
}
.detail-meta { display: flex; flex-direction: column; gap: 6px; }
.detail-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.68rem; color: var(--text-secondary);
}
.detail-label { color: var(--text-tertiary); font-size: 0.6rem; font-weight: 600; }
.detail-prompt {
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: 4px; padding: 6px; font-size: 0.6rem;
  color: var(--text-secondary); line-height: 1.4; max-height: 100px;
  overflow-y: auto; margin-top: 2px;
}
/* Generation log in History */
.gen-history-section { padding-top: 8px; }
.gen-history-item {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0; font-size: 0.6rem;
}
.gen-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.gen-info { flex: 1; }
/* ===== Production Auth + Dashboard Overrides ===== */
.auth-screen {
  min-height: 100vh; width: 100vw; padding: 28px;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(135deg, rgba(34, 211, 238,0.14), transparent 34%),
    radial-gradient(circle at 80% 20%, rgba(0,174,239,0.10), transparent 30%),
    #05070d;
}
.auth-shell {
  width: min(980px, 100%); min-height: 610px;
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; overflow: hidden;
  background: rgba(10,15,26,0.94); box-shadow: var(--shadow-xl), 0 0 80px rgba(34, 211, 238,0.06);
}
.auth-brand-panel {
  padding: 42px; display: flex; flex-direction: column; justify-content: space-between; gap: 34px;
  background:
    linear-gradient(160deg, rgba(20,32,55,0.98), rgba(9,14,25,0.98)),
    url('/images/room_after_staged_1777812601341.png') center/cover;
  background-blend-mode: multiply; border-right: 1px solid rgba(255,255,255,0.08);
}
.auth-kicker { display: block; margin-bottom: 9px; color: #8fb1ff; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
.auth-brand-panel h1 { font-size: 2.35rem; margin-bottom: 12px; letter-spacing: 0; }
.auth-brand-panel p { max-width: 460px; color: #c1cadc; font-size: 0.9rem; line-height: 1.6; }
.app-powered { color: rgba(220,230,255,0.62); font-size: 0.72rem; font-weight: 700; letter-spacing: 0; }
.auth-card {
  width: 100%; padding: 46px; align-self: center;
  background: rgba(10,15,26,0.78); border: 0; border-radius: 0; box-shadow: none;
}
.auth-card h2 { margin-bottom: 20px; color: #fff; font-size: 1.45rem; letter-spacing: 0; }
.auth-tabs { margin-bottom: 18px; padding: 4px; background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); border-radius: 8px; }
.auth-tabs button { min-height: 34px; border-radius: 6px; font-weight: 700; }
.auth-tabs button.active { background: rgba(34, 211, 238,0.2); color: #bff8ff; box-shadow: inset 0 0 0 1px rgba(34, 211, 238,0.28); }
.auth-input { min-height: 40px; background: rgba(4,8,16,0.72); border-color: rgba(255,255,255,0.1); }
.auth-submit { min-height: 42px; margin-top: 14px; border-radius: 8px; font-weight: 800; }
.auth-link { width: 100%; margin-top: 12px; border: 0; background: transparent; color: var(--text-accent); cursor: pointer; font: inherit; font-size: 0.74rem; }
.auth-link:hover { color: #fff; }
.dashboard { display: flex; flex-direction: column; flex: 1; min-height: 0; background: #05070d; }
.dashboard-content { flex: 1; overflow-y: auto; padding: 28px; max-width: 1320px; margin: 0 auto; width: 100%; }
.dashboard-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 18px; padding: 14px 16px;
  border: 1px solid var(--border-glass); border-radius: 10px;
  background: rgba(12,16,28,0.72); backdrop-filter: blur(12px);
}
.dashboard-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dashboard-brand strong { display: block; color: var(--text-primary); font-size: 0.82rem; }
.dashboard-brand span:last-child { display: block; margin-top: 2px; color: var(--text-tertiary); font-size: 0.64rem; }
.dashboard-account { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dashboard-tabs { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,0.03); }
.dashboard-tabs button { min-width: 92px; height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: 0.7rem; font-weight: 800; }
.dashboard-tabs button.active { background: rgba(34, 211, 238,0.2); color: var(--text-primary); box-shadow: inset 0 0 0 1px rgba(34, 211, 238,0.28); }
.dashboard-tabs button:hover { color: var(--text-primary); }
.dashboard-credit-pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid rgba(0,200,83,0.25); border-radius: 999px; background: rgba(0,200,83,0.08); color: var(--color-success); cursor: pointer; font: inherit; }
.dashboard-credit-pill span { color: rgba(210,230,220,0.72); font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.dashboard-credit-pill strong { color: var(--color-success); font-size: 0.78rem; }
.dashboard-credit-pill:hover { border-color: rgba(0,200,83,0.48); background: rgba(0,200,83,0.13); }
.dashboard-credit-pill.has-error { border-color: rgba(255,23,68,0.36); background: rgba(255,23,68,0.09); color: var(--color-error); }
.dashboard-credit-pill.has-error strong { color: var(--color-error); }
.dashboard-security-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 10px 12px; border: 1px solid rgba(255,214,0,0.28); border-radius: 8px; background: rgba(255,214,0,0.08); color: var(--color-warning); font-size: 0.74rem; }
.dashboard-command, .dashboard-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  min-height: 148px; padding: 28px; margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(20,28,48,0.95), rgba(7,9,15,0.98));
  border: 1px solid var(--border-glass); border-radius: 10px;
  box-shadow: var(--shadow-lg);
}
.dashboard-kicker { display: block; margin-bottom: 8px; color: var(--text-accent); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.dashboard-command h1, .dashboard-hero h1 { margin-bottom: 8px; font-size: 2.15rem; letter-spacing: 0; }
.dashboard-command p, .dashboard-hero p { max-width: 660px; color: var(--text-secondary); font-size: 0.86rem; line-height: 1.55; }
.dashboard-retention-note { margin-top: 12px; max-width: 720px; color: var(--color-warning); font-size: 0.74rem; line-height: 1.4; }
.dashboard-command-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dashboard-primary-action { height: 42px; padding: 0 24px; flex-shrink: 0; border-radius: 8px; }
.dashboard-user-grid { display: none; }
.user-panel { min-height: 132px; padding: 15px; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; background: rgba(26,34,54,0.78); }
.user-profile-panel { display: flex; align-items: center; gap: 13px; }
.user-avatar { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--gradient-brand); color: #fff; font-weight: 900; }
.user-profile-copy { min-width: 0; }
.panel-label { display: block; margin-bottom: 7px; color: var(--text-tertiary); font-size: 0.62rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; }
.user-panel strong { display: block; color: var(--text-primary); font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-panel p, .user-profile-copy span:last-child { margin-top: 7px; color: var(--text-secondary); font-size: 0.68rem; line-height: 1.45; }
.security-panel { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.security-panel.is-warning { border-color: rgba(255,214,0,0.28); background: rgba(255,214,0,0.07); }
.security-panel.is-ok { border-color: rgba(0,200,83,0.22); }
.panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.metric-tile {
  padding: 14px 16px; background: rgba(15,20,35,0.65);
  border: 1px solid var(--border-glass); border-radius: 10px;
  transition: all var(--transition-smooth);
}
.metric-tile:hover { border-color: var(--border-hover); background: rgba(15,20,35,0.8); box-shadow: var(--shadow-glow-sm); }
.metric-tile span { display: block; color: var(--text-tertiary); font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.metric-tile strong { display: block; margin-top: 8px; color: var(--text-primary); font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.metric-wide { grid-column: span 2; }
.dashboard-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.dashboard-toolbar p { margin-top: 4px; color: var(--text-tertiary); font-size: 0.7rem; }
.dashboard-controls { display: flex; align-items: center; gap: 8px; min-width: min(520px, 52vw); }
.dashboard-search { min-width: 260px; }
.dashboard-sort { width: 140px; }
.dashboard-state { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-secondary); border: 1px dashed var(--border); border-radius: 8px; background: rgba(255,255,255,0.02); }
.dashboard-empty p { margin: 2px 0 8px; font-size: 0.78rem; }
.projects-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.project-card { min-height: 272px; border-radius: var(--radius-md); background: rgba(15,20,35,0.82); transform: none; box-shadow: none; border-color: var(--border-glass); }
.project-card:hover { transform: translateY(-2px); box-shadow: var(--elevation-3); }
.project-card-image { height: 156px; }
.project-card-placeholder { display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.project-card-body { background: rgba(10,14,26,0.94); }
.project-card-title { min-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-counts { display: flex; align-items: center; gap: 7px; color: var(--text-secondary); }
.project-create-card { align-items: center; justify-content: center; gap: 10px; border-style: dashed; color: var(--text-secondary); font: inherit; }
.project-create-card span { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 8px; background: var(--bg-active); color: var(--text-accent); font-size: 1.5rem; }
.delete-modal { max-width: 360px; }
.delete-modal p { color: var(--text-secondary); font-size: 0.78rem; }
.dashboard-powered { margin-top: 22px; padding: 14px 0 4px; text-align: center; color: var(--text-tertiary); }
.account-modal { width: 560px; }
.account-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.account-modal-head h2 { margin: 0; }
.account-settings-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.account-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; padding: 12px 14px; background: rgba(255,255,255,0.025); border-bottom: 1px solid var(--border); }
.account-setting-row:last-child { border-bottom: 0; }
.account-setting-row span { color: var(--text-secondary); font-size: 0.72rem; font-weight: 700; }
.account-setting-row strong { color: var(--text-primary); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-error-row strong { color: var(--color-error); white-space: normal; text-align: right; }
.account-row-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.status-ok { color: var(--color-success) !important; }
.status-warn { color: var(--color-warning) !important; }
@media (max-width: 820px) {
  .auth-shell { grid-template-columns: 1fr; min-height: auto; }
  .auth-brand-panel { padding: 28px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .auth-card { padding: 28px; }
  .dashboard-command, .dashboard-hero, .dashboard-toolbar { align-items: stretch; flex-direction: column; }
  .dashboard-topbar, .dashboard-account { align-items: stretch; flex-direction: column; }
  .dashboard-security-banner { align-items: stretch; flex-direction: column; }
  .dashboard-command-actions { align-items: stretch; flex-direction: column; }
  .account-modal { width: min(560px, 92vw); }
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-wide { grid-column: span 2; }
  .dashboard-controls { min-width: 0; width: 100%; flex-direction: column; }
  .dashboard-search, .dashboard-sort { width: 100%; min-width: 0; }
  .stagger-in { animation: none; opacity: 1; }
}
/* ===== Utility Classes ===== */
.glass-effect {
  background: var(--bg-glass); backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--border-glass);
}
.gradient-text {
  background: linear-gradient(135deg, #e0e7ff, #a5b4fc); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
}
.hover-lift { transition: transform var(--transition-smooth); }
.hover-lift:hover { transform: translateY(-2px); }
.glow-border { box-shadow: var(--shadow-glow); }
/* ═══════════════════════════════════════════════════════════
   TEMPLATE SYSTEM STYLES
   ═══════════════════════════════════════════════════════════ */
/* ─── Template Selector Modal ─── */
.template-selector-modal {
  max-width: 720px; width: 92vw; max-height: 85vh;
  display: flex; flex-direction: column;
}
.template-selector-header { text-align: center; margin-bottom: 16px; }
.template-selector-header h2 {
  font-size: 1.25rem; font-weight: 700;
  background: linear-gradient(135deg, #e0e7ff, #a5b4fc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.template-selector-subtitle { color: var(--text-tertiary); font-size: 0.72rem; margin-top: 4px; }
.template-selector-filters {
  display: flex; justify-content: center; gap: 6px; margin-bottom: 16px;
}
.template-filter-btn {
  padding: 4px 12px !important; border-radius: 20px !important;
  font-size: 0.65rem !important; transition: all var(--transition-smooth);
}
.template-filter-btn.active {
  background: var(--gradient-brand) !important; color: #fff !important;
}
/* ─── Template Cards Grid ─── */
.template-selector-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px; overflow-y: auto; flex: 1; padding: 4px 2px;
  max-height: 50vh;
}
.template-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 14px 12px; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative; text-align: left; width: 100%;
  color: inherit; font: inherit;
}
.template-card:hover {
  background: rgba(34, 211, 238,0.1); border-color: rgba(34, 211, 238,0.3);
  transform: translateY(-2px); box-shadow: 0 6px 20px rgba(34, 211, 238,0.15);
}
.template-card-body { display: flex; flex-direction: column; gap: 2px; }
.template-card-label {
  font-size: 0.78rem; font-weight: 600; color: var(--text-primary);
}
.template-card-desc {
  font-size: 0.62rem; color: var(--text-tertiary); line-height: 1.4;
}
.template-skill-badge {
  position: absolute; top: 8px; right: 8px;
  font-size: 0.5rem; font-weight: 700; color: #fff;
  padding: 2px 8px; border-radius: 10px; text-transform: uppercase;
  letter-spacing: 0.5px;
}
.template-selector-footer {
  display: flex; justify-content: space-between; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06); margin-top: 8px;
}
/* ─── Template Status Panel (LeftSidebar) ─── */
.template-status-panel {
  padding: 10px; margin: 8px 0; border-radius: 12px;
  background: rgba(34, 211, 238,0.06);
  border: 1px solid rgba(34, 211, 238,0.12);
}
.template-status-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.template-status-label {
  font-size: 0.72rem; font-weight: 600; color: var(--text-primary);
}
.template-status-change {
  margin-left: auto; font-size: 0.55rem; color: var(--brand);
  cursor: pointer; opacity: 0.7;
}
.template-status-change:hover { opacity: 1; }
.template-checklist {
  display: flex; flex-direction: column; gap: 4px;
}
.template-check-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.62rem; color: var(--text-secondary);
}
.template-check-item.fulfilled { color: var(--success, #34d399); }
.template-check-item.missing { color: var(--text-tertiary); opacity: 0.7; }
.template-check-item .check-mark {
  width: 14px; height: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.5rem; flex-shrink: 0;
}
.template-check-item.fulfilled .check-mark {
  background: rgba(52,211,153,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.3);
}
.template-check-item.missing .check-mark {
  background: rgba(255,255,255,0.04); color: var(--text-tertiary);
  border: 1px solid rgba(255,255,255,0.08);
}
/* ─── Template Dashboard Tab ─── */
.template-dashboard {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px;
  background: var(--bg-primary);
}
.template-dashboard-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  background: rgba(15, 23, 32, 0.72);
}
.template-dashboard-header h2 {
  margin: 0 0 6px;
  font-size: 1.35rem;
  letter-spacing: 0;
}
.template-dashboard-header p {
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.5;
}
.template-active-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  padding: 10px 12px;
  border: 1px solid rgba(34, 211, 238,0.22);
  border-radius: 8px;
  background: rgba(34, 211, 238,0.08);
}
.template-active-summary > span {
  font-size: 1.35rem;
}
.template-active-summary strong,
.template-active-summary small {
  display: block;
}
.template-active-summary small {
  margin-top: 3px;
  color: var(--text-tertiary);
  font-size: 0.62rem;
}
.template-requirements {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.template-requirement {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-tertiary);
  background: rgba(255,255,255,0.025);
  font-size: 0.68rem;
}
.template-requirement.is-done {
  color: var(--color-success);
  border-color: rgba(0,200,83,0.28);
  background: rgba(0,200,83,0.08);
}
.template-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.template-dashboard-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 180px;
  padding: 15px;
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  background: rgba(15,20,35,0.65);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-smooth);
}
.template-dashboard-card:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 211, 238,0.34);
  background: rgba(34, 211, 238,0.08);
}
.template-dashboard-card.selected {
  border-color: rgba(34, 211, 238,0.52);
  box-shadow: 0 0 0 1px rgba(34, 211, 238,0.18), var(--shadow-glow-sm);
}
.template-dashboard-card-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.template-dashboard-card strong {
  color: var(--text-primary);
  font-size: 0.86rem;
}
.template-dashboard-card p {
  margin-top: 7px;
  color: var(--text-secondary);
  font-size: 0.68rem;
  line-height: 1.45;
}
.template-card-action {
  margin-top: auto;
  padding-top: 14px;
  color: var(--text-accent);
  font-size: 0.66rem;
  font-weight: 800;
}
/* ─── Batch Panel ─── */
.batch-panel {
  padding: 12px; border-radius: 14px;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(34, 211, 238,0.1);
  margin-top: 8px;
}
.batch-panel-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.batch-panel-title {
  font-size: 0.75rem; font-weight: 600; color: var(--text-primary);
}
.batch-styles-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;
  margin-bottom: 10px; max-height: 180px; overflow-y: auto;
}
.batch-style-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
  transition: all var(--transition-smooth); font-size: 0.6rem;
}
.batch-style-item:hover { background: rgba(34, 211, 238,0.08); }
.batch-style-item.selected {
  border-color: rgba(34, 211, 238,0.3);
  background: rgba(34, 211, 238,0.08);
}
.batch-style-item input[type="checkbox"] {
  width: 13px; height: 13px; accent-color: var(--brand);
}
.batch-style-label { flex: 1; color: var(--text-secondary); text-transform: capitalize; }
.batch-summary { margin-bottom: 10px; }
.batch-cost-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.6rem; color: var(--text-secondary); padding: 2px 0;
}
.batch-progress { margin-bottom: 10px; }
.batch-progress-bar {
  height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.06); overflow: hidden;
}
.batch-progress-fill {
  height: 100%; border-radius: 2px;
  background: var(--gradient-brand);
  transition: width 0.4s ease;
}
.batch-progress-text { font-size: 0.55rem; color: var(--text-tertiary); margin-top: 4px; display: block; }
.batch-generate-btn { width: 100%; margin-top: 6px; }
/* ─── Glassmorphism System Specs ─── */
.glass-panel {
  background: rgba(15, 23, 32, 0.72);
  border: 1px solid rgba(180, 230, 240, 0.16);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.glass-panel-strong {
  background: rgba(18, 27, 38, 0.88);
  border: 1px solid rgba(180, 230, 240, 0.22);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow:
    0 32px 100px rgba(0, 0, 0, 0.54),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.active-cyan {
  border-color: rgba(34, 211, 238, 0.7) !important;
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.22),
    0 0 32px rgba(34, 211, 238, 0.26) !important;
}
.hover-lift {
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  border-color: rgba(34, 211, 238, 0.42);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.48),
    0 0 28px rgba(34, 211, 238, 0.16);
}
/* ─── Redesigned Input / Textarea ─── */
.input-field {
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(180, 230, 240, 0.14);
  color: var(--text-primary);
  padding: 0 14px;
  font-family: inherit;
  font-size: 0.85rem;
  transition: all 0.2s;
}
.input-field:focus {
  outline: none;
  border-color: rgba(34, 211, 238, 0.58);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
}
.textarea-field {
  min-height: 120px;
  resize: vertical;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(180, 230, 240, 0.14);
  color: var(--text-primary);
  padding: 14px;
  line-height: 1.5;
  font-family: inherit;
  font-size: 0.85rem;
  transition: all 0.2s;
}
.textarea-field:focus {
  outline: none;
  border-color: rgba(34, 211, 238, 0.58);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
}
/* ─── Drawer System Specs ─── */
.image-to-video-drawer {
  position: absolute;
  top: 48px; /* top-nav height */
  right: 0;
  bottom: 0;
  width: 400px;
  z-index: 100;
  background: rgba(15, 23, 32, 0.88);
  border-left: 1px solid rgba(180, 230, 240, 0.18);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  box-shadow: -28px 0 90px rgba(0, 0, 0, 0.48);
  display: flex;
  flex-direction: column;
}
.drawer-header {
  padding: 20px;
  border-bottom: 1px solid rgba(180, 230, 240, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.drawer-title-area {
  flex: 1;
}
.drawer-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.drawer-subtitle {
  margin-top: 6px;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.drawer-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(180, 230, 240, 0.12);
  display: flex;
  gap: 10px;
}
/* ===== Language Toggle & Modal Customizations ===== */
.language-toggle {
  display: flex;
  background: rgba(4, 8, 16, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.language-toggle .btn {
  border: none !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  transition: all var(--transition-fast) !important;
  box-shadow: none !important;
}
.language-toggle .btn-primary {
  background: rgba(34, 211, 238, 0.15) !important;
  color: #22d3ee !important;
  border: 1px solid rgba(34, 211, 238, 0.3) !important;
}
.language-toggle .btn-ghost {
  color: #8b95a8 !important;
  background: transparent !important;
}
.language-toggle .btn-ghost:hover {
  color: #f0f2f5 !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
/* Modals glassmorphic override */
.modal {
  background: rgba(15, 23, 32, 0.88) !important;
  border: 1px solid rgba(180, 230, 240, 0.2) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  border-radius: 20px !important;
}
.modal-overlay {
  background: rgba(3, 5, 10, 0.72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
/* ===== Image to Video Drawer ===== */
.image-to-video-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  background: rgba(10, 16, 26, 0.88);
  border-left: 1px solid rgba(180, 230, 240, 0.16);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  z-index: 150;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  animation: slideInRight 320ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.drawer-header {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(180, 230, 240, 0.1);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.drawer-header h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.drawer-subtitle {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.35;
}
.drawer-close-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  transition: color var(--transition-fast);
}
.drawer-close-btn:hover {
  color: #fff;
}
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.drawer-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.section-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-accent);
}
.source-preview-container {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  border: 1px solid rgba(180, 230, 240, 0.12);
  background: rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.source-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.source-preview-empty {
  font-size: 0.8rem;
  color: var(--text-tertiary);
}
.drawer-textarea {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(180, 230, 240, 0.12);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  color: #fff;
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.4;
  resize: none;
  outline: none;
  transition: all var(--transition-fast);
}
.drawer-textarea:focus {
  border-color: rgba(34, 211, 238, 0.5);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.15);
}
.drawer-select {
  background: rgba(15, 23, 32, 0.8);
  border: 1px solid rgba(180, 230, 240, 0.12);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  color: #fff;
  font-size: 0.82rem;
  outline: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.drawer-select:focus {
  border-color: rgba(34, 211, 238, 0.5);
}
.segmented-control {
  display: flex;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(180, 230, 240, 0.08);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.segment-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 6px 0;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.segment-btn:hover:not(:disabled) {
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
}
.segment-btn.active {
  background: rgba(34, 211, 238, 0.14);
  color: var(--text-accent);
  border: 1px solid rgba(34, 211, 238, 0.2);
}
.segment-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.drawer-progress-container {
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(180, 230, 240, 0.06);
}
.drawer-progress-bar {
  height: 4px;
  background: var(--gradient-brand);
  border-radius: 2px;
  transition: width 300ms ease;
}
.drawer-progress-text {
  font-size: 0.7rem;
  color: var(--text-accent);
  font-weight: 600;
}
.drawer-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(180, 230, 240, 0.1);
  display: flex;
  gap: 10px;
  background: rgba(7, 11, 18, 0.6);
}
.generate-video-btn {
  height: 38px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(220, 255, 255, 0.2);
  background: linear-gradient(135deg, #22d3ee 0%, #14b8a6 100%);
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 14px rgba(34, 211, 238, 0.2);
}
.generate-video-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(34, 211, 238, 0.35);
  border-color: rgba(220, 255, 255, 0.35);
}
.generate-video-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
/* ===== Image to Video Button inside TopNav ===== */
.image-to-video-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;

  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(180, 230, 240, 0.14);
  color: #dbe7f3;
  cursor: pointer;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}
.image-to-video-btn:hover:not(:disabled) {
  border-color: rgba(34, 211, 238, 0.34);
  background: rgba(34, 211, 238, 0.08);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.14);
  transform: translateY(-1px);
  color: #fff;
}
.image-to-video-btn.active {
  border-color: rgba(34, 211, 238, 0.56);
  background: rgba(34, 211, 238, 0.12);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.18),
    0 0 24px rgba(34, 211, 238, 0.16);
  color: var(--text-accent);
}
.image-to-video-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.control-range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 34px;
  background: transparent;
  cursor: pointer;
  touch-action: pan-x;
}
.control-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), rgba(255,255,255,0.38));
}
.control-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -9px;
  border-radius: 999px;
  background: var(--cyan);
  border: 2px solid rgba(255,255,255,0.86);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.55);
  cursor: grab;
}
.control-range:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.08);
}
.control-range::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), rgba(255,255,255,0.38));
}
.control-range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--cyan);
  border: 2px solid rgba(255,255,255,0.86);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.55);
  cursor: grab;
}
/* ===== React Flow Canvas ===== */
.xy-flow-shell {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr) 348px;
  background: #05070b;
  color: #f8fafc;
  overflow: hidden;
}
.xy-flow-library,
.xy-flow-inspector {
  min-width: 0;
  background: rgba(5, 10, 15, 0.96);
  border-color: rgba(34, 211, 238, 0.16);
  border-style: solid;
  overflow: hidden;
}
.xy-flow-library {
  border-width: 0 1px 0 0;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.xy-flow-inspector {
  border-width: 0 0 0 1px;
  padding: 14px;
  overflow-y: auto;
}
.xy-flow-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  background:
    radial-gradient(circle at 55% 8%, rgba(0, 229, 255, 0.11), transparent 30%),
    #070b11;
}
.xy-flow-back,
.xy-flow-lib-item,
.xy-flow-menu button,
.xy-flow-actions button,
.xy-flow-inspector header button,
.xy-kie-node footer button {
  border: 1px solid rgba(34, 211, 238, 0.26);
  background: rgba(3, 10, 16, 0.82);
  color: #eafcff;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 850;
}
.xy-flow-back {
  height: 36px;
}
.xy-flow-title {
  color: #00e5ff;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.xy-flow-lib-item,
.xy-flow-menu button {
  min-height: 58px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  text-align: left;
}
.xy-flow-lib-item strong,
.xy-flow-menu button strong {
  color: #fff;
  font-size: 0.74rem;
}
.xy-flow-lib-item span,
.xy-flow-menu button span {
  color: #9fb4c7;
  font-size: 0.62rem;
}
.xy-flow-topbar,
.xy-flow-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(34, 211, 238, 0.18);
  border-radius: 14px;
  background: rgba(2, 7, 12, 0.84);
  backdrop-filter: blur(10px);
}
.xy-flow-topbar input {
  width: 300px;
  height: 34px;
  border: 1px solid rgba(34, 211, 238, 0.18);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  padding: 0 12px;
  font-weight: 850;
}
.xy-flow-topbar span,
.xy-flow-actions span {
  color: #bcd6e8;
  font-size: 0.68rem;
  font-weight: 850;
}
.xy-flow-actions button {
  min-height: 34px;
  padding: 0 12px;
}
.xy-flow-actions .primary,
.xy-flow-inspector header button {
  background: linear-gradient(135deg, #22e8ff, #0697a8);
  border-color: rgba(103, 232, 249, 0.55);
  color: #fff;
}
.xy-kie-node {
  width: 282px;
  min-height: 218px;
  background: rgba(7, 12, 19, 0.96);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
  overflow: visible;
}
.xy-kie-node.selected,
.xy-kie-node.state-generating,
.xy-kie-node.state-success {
  border-color: rgba(34, 211, 238, 0.75);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.28), 0 0 28px rgba(0, 229, 255, 0.12);
}
.xy-kie-node-head {
  min-height: 50px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.xy-kie-node-head strong {
  display: block;
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.1;
}
.xy-kie-node-head span,
.xy-kie-node-head small {
  color: #9fb4c7;
  font-size: 0.58rem;
  font-weight: 850;
}
.xy-kie-node-head small {
  height: 20px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.13);
  text-transform: uppercase;
}
.xy-kie-node-preview {
  height: 104px;
  display: grid;
  place-items: center;
  padding: 10px;
  color: #86dfff;
  text-align: center;
  font-size: 0.7rem;
}
.xy-kie-node-preview img,
.xy-kie-node-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
}
.xy-kie-node-preview b {
  display: block;
  color: #00e5ff;
  margin-bottom: 6px;
}
.xy-kie-node-preview span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #bcd6e8;
}
.xy-kie-node-ports {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px 8px;
}
.xy-kie-node-ports > div {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.xy-kie-node-ports span {
  max-width: 98px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.08);
  color: #d9f7ff;
  font-size: 0.54rem;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xy-kie-node footer {
  min-height: 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.xy-kie-node footer span {
  color: #b7d8e8;
  font-size: 0.62rem;
  font-weight: 850;
}
.xy-kie-node footer button {
  height: 30px;
  padding: 0 12px;
}
.xy-flow-handle {
  width: 12px !important;
  height: 12px !important;
  border: 2px solid #07131d !important;
  background: #00e5ff !important;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.8);
}
.xy-flow-handle.target {
  left: -7px !important;
}
.xy-flow-handle.source {
  right: -7px !important;
}
.xy-flow-menu {
  position: fixed;
  z-index: 1000;
  width: 236px;
  max-height: 460px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid rgba(34, 211, 238, 0.28);
  border-radius: 14px;
  background: rgba(3, 8, 13, 0.98);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.xy-flow-inspector header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.xy-flow-inspector header span {
  color: #00e5ff;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}
.xy-flow-inspector header h2 {
  margin: 3px 0 0;
  color: #fff;
  font-size: 1.25rem;
}
.xy-flow-inspector header button {
  height: 36px;
  padding: 0 14px;
  white-space: nowrap;
}
.xy-flow-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.xy-flow-fields label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.xy-flow-fields label > span,
.xy-flow-check {
  color: #9fb4c7;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.xy-flow-fields textarea,
.xy-flow-fields input[type="number"],
.xy-flow-fields select {
  width: 100%;
  border: 1px solid rgba(34, 211, 238, 0.18);
  border-radius: 10px;
  background: rgba(2, 7, 12, 0.78);
  color: #fff;
  padding: 10px;
  outline: none;
}
.xy-flow-fields textarea {
  min-height: 82px;
  resize: vertical;
}
.xy-flow-fields .is-prompt textarea {
  min-height: 136px;
}
.xy-upload-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px dashed rgba(34, 211, 238, 0.24);
  border-radius: 10px;
  background: rgba(2, 7, 12, 0.58);
}
.xy-upload-field input::file-selector-button {
  height: 30px;
  margin-right: 10px;
  border: 1px solid rgba(34, 211, 238, 0.32);
  border-radius: 8px;
  background: rgba(0, 229, 255, 0.1);
  color: #eafcff;
  font-weight: 850;
}
.xy-upload-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.xy-upload-list small {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 8px;
  color: #bcd6e8;
}
.xy-upload-list img,
.xy-upload-list video {
  width: 34px;
  height: 28px;
  object-fit: cover;
  border-radius: 6px;
}
.xy-upload-list button {
  border: 0;
  background: transparent;
  color: #ff6b7d;
  cursor: pointer;
  font-size: 0.58rem;
  font-weight: 850;
}
.xy-flow-error {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid rgba(255, 77, 94, 0.28);
  border-radius: 10px;
  background: rgba(255, 77, 94, 0.08);
  color: #ff8390;
  font-size: 0.72rem;
  font-weight: 800;
}
.xy-flow-output {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(34, 211, 238, 0.18);
  border-radius: 12px;
  background: rgba(2, 7, 12, 0.54);
}
.xy-flow-output h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 0.8rem;
  text-transform: uppercase;
}
.xy-flow-output a,
.xy-flow-output span {
  display: block;
  color: #9fdfff;
  font-size: 0.68rem;
  word-break: break-all;
  margin-bottom: 6px;
}
.react-flow__edge-path {
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.25));
}
/* ===== Auth + Dashboard Redesign ===== */
.auth-redesign {
  padding: 0;
  justify-content: stretch;
  position: relative;
  overflow: hidden;
  background: #02070c;
}
.auth-redesign::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/images/auth-studio-bg.png') center center / cover no-repeat;
  filter: none !important;
  transform: none;
}
.auth-redesign::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2,7,12,.035) 0%, rgba(2,7,12,0) 42%, rgba(2,7,12,.16) 100%),
    linear-gradient(180deg, rgba(2,7,12,.025), rgba(2,7,12,0) 45%, rgba(2,7,12,.12));
  pointer-events: none;
}
.auth-redesign > * {
  position: relative;
  z-index: 1;
}
.auth-redesign-shell {
  width: 100vw;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(520px, 48vw) minmax(440px, 52vw);
  align-items: center;
  justify-items: center;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  box-shadow: none;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.auth-redesign-visual {
  min-width: 0;
  height: 100vh;
  width: 100%;
  padding: 0 0 0 clamp(72px, 5.2vw, 104px);
  border: 0;
  background: transparent !important;
  justify-content: center;
  align-items: flex-start;
  overflow: visible !important;
}
.auth-visual-copy {
  max-width: 820px;
  transform: translateY(2px);
  text-shadow: none;
  perspective: 900px;
  overflow: visible;
}
.auth-logo-mark, .auth-card-logo, .dashboard-logo span {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 12px; border: 1px solid var(--cyan-border); background: rgba(0,229,255,0.1);
  color: var(--cyan); font-weight: 900; box-shadow: var(--cyan-glow);
}
.auth-visual-copy h1 {
  position: relative;
  width: auto;
  max-width: min(820px, 100%);
  margin: 0;
  padding: 0 0 .24em;
  overflow: visible;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  font-size: clamp(3.68rem, 4.32vw, 5.12rem);
  line-height: 1.14;
  letter-spacing: -0.04em;
  font-weight: 900;
  word-spacing: .02em;
}
.auth-title-line {
  display: flex;
  gap: 0;
  white-space: nowrap;
  overflow: visible;
  align-items: flex-start;
}
.auth-title-cyan {
  display: flex;
  gap: 0;
  width: max-content;
  max-width: 100%;
  padding-bottom: .18em;
  overflow: visible;
  white-space: nowrap;
  background: none;
  color: inherit;
  -webkit-text-fill-color: initial;
  filter: none;
}
.auth-letter {
  display: inline-block;
  padding-bottom: .16em;
  line-height: 1.08;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  animation: authLetterIn .56s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: calc(var(--i) * 42ms);
  backface-visibility: hidden;
  will-change: opacity, transform;
}
.auth-letter-white {
  color: rgba(255,255,255,.95);
  -webkit-text-fill-color: rgba(255,255,255,.95);
  text-shadow: 0 8px 28px rgba(0,0,0,.68);
}
.auth-letter-staging {
  background: linear-gradient(180deg, #ffffff 0%, #dff8fb 28%, #66f4ff 64%, #0fc7d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: none;
}
.auth-letter-cyan {
  background: linear-gradient(180deg, #e8fdff 0%, #80fbff 35%, #12dff0 70%, #009bb3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: none;
}
.auth-visual-copy p {
  margin-top: 26px;
  max-width: 660px;
  color: rgba(245,248,251,.88);
  font-size: clamp(1.08rem,1.16vw,1.22rem);
  line-height: 1.48;
  text-shadow: 0 8px 24px rgba(0,0,0,.7);
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  animation: authSubtitleIntro .6s cubic-bezier(.16,1,.3,1) .95s forwards;
}
.auth-redesign-card {
  align-self: center;
  justify-self: center;
  width: min(570px, calc(100vw - 48px));
  min-height: min(786px, calc(100vh - 86px));
  margin: 0;
  padding: 60px 50px 40px;
  border: 1px solid rgba(150,245,255,.85) !important;
  border-radius: 32px !important;
  position: relative;
  overflow: hidden;
  transform: scale(.69);
  transform-origin: center center;
  background:
    radial-gradient(circle at 90% 0%, rgba(118,241,255,.25), transparent 31%),
    radial-gradient(circle at 4% 100%, rgba(0,229,255,.16), transparent 38%),
    linear-gradient(180deg, rgba(18,29,34,.72), rgba(8,18,24,.82) 42%, rgba(4,14,22,.9)) !important;
  box-shadow:
    0 40px 118px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 0 0 1px rgba(0,229,255,.56),
    0 0 34px rgba(150,245,255,.48),
    0 0 92px rgba(0,229,255,.22) !important;
  backdrop-filter: blur(18px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.16) !important;
}
@keyframes authLetterIn {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes authSubtitleIntro {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.auth-redesign-card::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 31px;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.2), transparent 18%, transparent 76%, rgba(0,229,255,.16)),
    radial-gradient(circle at 94% 4%, rgba(180,250,255,.34), transparent 18%);
  mix-blend-mode: screen;
  opacity: .7;
}
.auth-redesign-card::after {
  content: '';
  position: absolute;
  inset: auto 22px 0 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(151,246,255,.82), transparent);
  box-shadow: 0 0 26px rgba(0,229,255,.66);
  pointer-events: none;
}
.auth-redesign-card > * {
  position: relative;
  z-index: 1;
}
.auth-card-head { display: flex; justify-content: center; align-items: center; margin-bottom: 38px; }
.auth-card-head strong { color: #fff; font-size: clamp(2.55rem, 2.45vw, 2.95rem); letter-spacing: -0.045em; text-align: center; text-shadow: 0 12px 34px rgba(0,0,0,.7); }
.auth-redesign-card h2 { margin: 6px 0 20px; color: #fff; font-size: 2rem; letter-spacing: -0.03em; }
.auth-redesign-card .form-group { margin-bottom: 22px; }
.auth-redesign-card .form-label { display: block; margin-bottom: 10px; color: rgba(255,255,255,.72); font-size: 15px; font-weight: 800; }
.auth-redesign-card .auth-input {
  width: 100%;
  min-height: 62px !important;
  padding: 0 52px 0 20px;
  border: 1px solid rgba(255,255,255,.21) !important;
  border-radius: 12px !important;
  background: rgba(5,14,20,.68) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 24px rgba(0,0,0,.18);
  font-size: 1rem;
  font-weight: 700;
}
.auth-redesign-card .auth-input:-webkit-autofill,
.auth-redesign-card .auth-input:-webkit-autofill:hover,
.auth-redesign-card .auth-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  box-shadow: 0 0 0 1000px rgba(7,17,23,.92) inset !important;
  border-color: rgba(255,255,255,.18) !important;
  transition: background-color 9999s ease-in-out 0s;
}
.auth-redesign-card .auth-input::placeholder { color: rgba(245,248,251,.42); }
.auth-eye { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 31px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(2,7,12,.7);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.auth-tabs button { min-height: 56px; border: 0; border-radius: 999px; background: transparent; color: rgba(245,248,251,.62); cursor: pointer; font-weight: 800; font-size: 1.05rem; }
.auth-tabs button.active {
  background: linear-gradient(180deg, rgba(57,238,255,.95), rgba(0,151,178,.68));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(170,250,255,.5), 0 0 0 4px rgba(0,229,255,.18), 0 16px 36px rgba(0,229,255,.36);
}
.auth-redesign-card .auth-submit, .auth-google { width: 100%; min-height: 58px; margin-top: 18px; border-radius: 12px; }
.auth-redesign-card .auth-submit {
  font-size: 1.05rem;
  min-height: 64px !important;
  margin-top: 40px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #22e8ff 0%, #059caf 100%) !important;
  box-shadow: 0 18px 42px rgba(0,229,255,.32), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.auth-redesign-card .auth-google {
  min-height: 60px;
  margin-top: 0;
  background: rgba(2,8,12,.72) !important;
  border-color: rgba(255,255,255,.13) !important;
  color: rgba(245,248,251,.76) !important;
  font-size: .95rem;
  font-weight: 700;
}
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 30px 0 28px; color: rgba(245,248,251,.42); font-size: .72rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); }
.auth-link { width: 100%; margin-top: 16px; border: 0; background: transparent; color: var(--cyan); cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; }
.auth-switch, .auth-powered { display: flex; justify-content: center; gap: 8px; margin-top: 24px; color: var(--text-secondary); font-size: .95rem; }
.auth-switch button { border: 0; background: transparent; color: var(--cyan); cursor: pointer; font: inherit; font-weight: 800; }
.auth-powered { margin-top: 30px; color: rgba(139,149,168,.7); }
.dashboard-redesign { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 100vh; background: radial-gradient(circle at 78% 6%, rgba(0,229,255,.11), transparent 34%), #02070c; }
.dashboard-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; padding: 21px 15px; border-right: 1px solid var(--border-soft); background: linear-gradient(180deg, rgba(5,14,22,.96), rgba(2,7,12,.98)); }
.dashboard-logo { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.dashboard-logo strong { color: #fff; font-size: 1rem; }
.dashboard-nav { display: grid; gap: 8px; }
.dashboard-nav button, .dashboard-side-account {
  width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  background: rgba(2,7,12,0.34);
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: .75rem;
  font-weight: 800;
}
.dashboard-nav button.active, .dashboard-nav button:hover, .dashboard-side-account:hover { border-color: var(--cyan-border); background: rgba(0,229,255,.08); color: #fff; }
.dashboard-side-account { margin-top: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-side-controls { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.dashboard-side-controls .dashboard-credit-pill { width: 100%; justify-content: space-between; min-height: 32px; font-size: .62rem; }
.dashboard-side-controls .dashboard-lang { justify-content: center; height: 32px; }
.dashboard-main { min-width: 0; width: 100%; margin: 0; padding: 22px clamp(18px, 2.4vw, 34px) 36px 42px; overflow-y: auto; }
.dashboard-main-top { display: flex; justify-content: flex-end; align-items: center; gap: 12px; min-height: 54px; }
.dashboard-lang { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--border-soft); border-radius: 999px; background: rgba(2,7,12,.58); }
.dashboard-lang button { min-width: 29px; height: 22px; border: 0; border-radius: 999px; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: .68rem; font-weight: 800; }
.dashboard-lang button.active { background: var(--cyan-soft); color: var(--cyan); }
.dashboard-hero-panel { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin: 10px 0 12px; padding: 24px 22px; min-height: 104px; border: 1px solid var(--border-soft); border-radius: 12px; background: linear-gradient(135deg, rgba(10,28,40,.75), rgba(4,12,18,.9)); box-shadow: var(--shadow-panel); }
.dashboard-hero-panel h1 { color: #fff; font-size: clamp(1.5rem,2.55vw,2.44rem); letter-spacing: -0.045em; }
.dashboard-hero-panel p { margin-top: 6px; color: var(--text-secondary); font-size: .78rem; }
.dashboard-hero-actions, .dashboard-toolbar.clean { display: flex; align-items: center; gap: 10px; }
.dashboard-toolbar.clean { justify-content: flex-start; margin: 0 0 12px; }
.dashboard-toolbar.clean .dashboard-search { width: min(315px,34vw); min-height: 32px; font-size: .72rem; }
.dashboard-toolbar.clean .dashboard-sort { min-height: 32px; width: 104px; font-size: .72rem; }
.dashboard-project-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; gap: 14px !important; align-items: start !important; justify-content: stretch !important; max-width: none; }
.dashboard-project-card { min-height: 230px !important; overflow: hidden; border-radius: 11px !important; border: 1px solid var(--border-soft) !important; background: rgba(7,18,27,.86) !important; box-shadow: none !important; }
.dashboard-project-image { position: relative; height: 129px; overflow: hidden; }
.dashboard-project-image .project-card-image { width: 100%; height: 100%; object-fit: cover; }
.project-status { position: absolute; left: 9px; top: 9px; padding: 3px 7px; border: 1px solid var(--cyan-border); border-radius: 999px; background: rgba(2,7,12,.76); color: var(--cyan); font-size: .5rem; font-weight: 900; }
.status-completed { color: var(--success); border-color: rgba(0,230,154,.35); }
.status-failed { color: var(--danger); border-color: rgba(255,77,94,.35); }
.project-menu-button { position: absolute; top: 8px; right: 8px; width: 26px; height: 23px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(2,7,12,.78); color: #fff; cursor: pointer; font-size: .65rem; font-weight: 900; }
.project-menu { position: absolute; top: 46px; right: 10px; z-index: 20; min-width: 118px; padding: 6px; border: 1px solid var(--border-soft); border-radius: 10px; background: rgba(4,12,18,.96); box-shadow: var(--shadow-panel); }
.project-menu button { width: 100%; min-height: 32px; border: 0; border-radius: 8px; background: transparent; color: #fff; text-align: left; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 800; }
.project-menu button:hover { background: rgba(255,255,255,.07); }
.project-menu button.danger, .ghost-button.danger { color: var(--danger) !important; }
.dashboard-project-card .project-card-body { padding: 12px; background: linear-gradient(180deg, rgba(7,18,27,.96), rgba(4,12,18,.98)); }
.dashboard-project-card h2 { color: #fff; font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-project-card .project-card-meta, .dashboard-project-card .project-card-footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; color: var(--text-secondary); font-size: .54rem; }
.dashboard-project-card .project-card-footer { justify-content: space-between; padding-top: 9px; border-top: 1px solid var(--border-soft); }
.project-title-edit { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; }
.project-title-edit button { min-height: 36px; padding: 0 10px; font-size: .72rem; }
.dashboard-new-card, .dashboard-empty-panel { min-height: 230px; border: 1px dashed var(--cyan-border); border-radius: 11px; background: rgba(0,229,255,.04); color: #fff; cursor: pointer; }
.dashboard-new-card { display: grid; place-items: center; align-content: center; gap: 9px; font-size: .75rem; }
.dashboard-new-card span { display: grid; place-items: center; width: 41px; height: 41px; border: 1px solid var(--cyan-border); border-radius: 999px; color: var(--cyan); font-size: 1.5rem; }
.dashboard-empty-panel { display: grid; place-items: center; align-content: center; gap: 10px; }
.dashboard-empty-panel p { color: var(--text-secondary); }
.account-settings-list { display: grid; gap: 14px; margin: 20px 0; }
.account-setting-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); color: var(--text-secondary); }
.account-setting-row strong { color: #fff; }
.ghost-button.mini { margin-left: 8px; min-height: 28px; padding: 0 10px; font-size: .68rem; }
.account-error-row { padding: 10px; border: 1px solid rgba(255,77,94,.24); border-radius: 10px; color: var(--danger); background: rgba(255,77,94,.08); }
.flow-canvas-shell {
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 360px;
  background: #070b12;
  color: #fff;
}
.flow-canvas-library,
.flow-inspector {
  min-width: 0;
  border-color: rgba(0,229,255,.12);
  background: linear-gradient(180deg, rgba(5,14,21,.98), rgba(2,7,12,.98));
}
.flow-canvas-library {
  border-right: 1px solid rgba(0,229,255,.12);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.flow-inspector {
  border-left: 1px solid rgba(0,229,255,.12);
  padding: 14px;
  overflow-y: auto;
}
.flow-icon-button,
.flow-library-item,
.flow-context-menu button,
.flow-run-button,
.flow-inspector-head button,
.flow-node footer button,
.flow-zoom-bar button,
.flow-pill {
  border: 1px solid rgba(0,229,255,.22);
  border-radius: 10px;
  background: rgba(3,13,20,.78);
  color: #dffaff;
  font: inherit;
  font-size: .72rem;
  font-weight: 850;
  cursor: pointer;
}
.flow-icon-button { height: 36px; text-align: left; padding: 0 12px; }
.flow-library-title {
  color: var(--cyan);
  font-size: .64rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 8px 0 2px;
}
.flow-library-item,
.flow-context-menu button {
  min-height: 52px;
  padding: 8px 10px;
  display: grid;
  gap: 3px;
  text-align: left;
}
.flow-library-item small,
.flow-context-menu small,
.flow-title-group span,
.flow-node header small,
.flow-node footer span,
.flow-inspector-head span,
.flow-output-panel span {
  color: var(--text-secondary);
  font-size: .62rem;
  font-weight: 750;
}
.flow-library-item:hover,
.flow-context-menu button:hover,
.flow-icon-button:hover,
.flow-pill:hover {
  border-color: var(--cyan-border);
  background: rgba(0,229,255,.08);
}
.flow-canvas-stage {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 24%, rgba(0,229,255,.08), transparent 28%),
    radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: auto, 18px 18px;
}
.flow-canvas-topbar {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 10px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.flow-title-group,
.flow-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.flow-title-group input,
.flow-field input,
.flow-field select,
.flow-field textarea {
  border: 1px solid rgba(0,229,255,.16);
  border-radius: 10px;
  background: rgba(2,7,12,.78);
  color: #fff;
  font: inherit;
  font-size: .74rem;
  font-weight: 760;
}
.flow-title-group input {
  width: 310px;
  height: 38px;
  padding: 0 12px;
}
.flow-pill {
  min-height: 34px;
  padding: 0 12px;
}
.flow-pill.muted { color: var(--text-secondary); }
.flow-run-button {
  height: 36px;
  padding: 0 16px;
  background: linear-gradient(135deg, #22d3ee, #0f9aaa);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0,229,255,.16);
}
.flow-edge-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.flow-edge-layer path {
  stroke: #23d8c6;
  stroke-width: 2;
  fill: none;
  filter: drop-shadow(0 0 8px rgba(0,229,255,.25));
}
.flow-node-layer {
  position: absolute;
  inset: 64px 0 0 56px;
  z-index: 2;
  transform-origin: 0 0;
}
.flow-node {
  position: absolute;
  border: 1px solid rgba(0,229,255,.18);
  border-radius: 14px;
  background: rgba(9,16,24,.94);
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
  overflow: hidden;
}
.flow-node.is-selected {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(0,229,255,.18), 0 20px 60px rgba(0,229,255,.12);
}
.flow-node header {
  height: 50px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: grab;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.flow-node header strong {
  display: block;
  font-size: .8rem;
  line-height: 1.15;
}
.flow-status {
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--text-secondary);
  background: rgba(255,255,255,.06);
  font-size: .55rem;
  font-weight: 900;
  text-transform: uppercase;
}
.flow-status.success { color: var(--success); }
.flow-status.fail { color: var(--danger); }
.flow-status.queued,
.flow-status.generating { color: var(--cyan); }
.flow-node-preview {
  height: 108px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.18);
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 850;
}
.flow-node-preview img,
.flow-node-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flow-node-ports {
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.flow-node-ports div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.flow-node-ports button {
  min-height: 24px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(2,7,12,.5);
  color: var(--text-secondary);
  font-size: .54rem;
  font-weight: 850;
  cursor: pointer;
}
.flow-node-ports button.active {
  color: var(--cyan);
  border-color: var(--cyan-border);
}
.flow-node footer {
  height: 42px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.07);
}
.flow-node footer button {
  height: 28px;
  padding: 0 12px;
}
.flow-context-menu {
  position: fixed;
  z-index: 30;
  width: 250px;
  max-height: 440px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid rgba(0,229,255,.22);
  border-radius: 13px;
  background: rgba(8,14,22,.98);
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
.flow-context-menu button {
  width: 100%;
  border-color: transparent;
  background: transparent;
}
.flow-zoom-bar {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 10;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(0,229,255,.18);
  border-radius: 13px;
  background: rgba(2,7,12,.82);
}
.flow-zoom-bar button {
  width: 32px;
  height: 30px;
}
.flow-zoom-bar strong {
  min-width: 46px;
  text-align: center;
  font-size: .72rem;
}
.flow-inspector-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  margin-bottom: 14px;
}
.flow-inspector-head h2 {
  margin: 4px 0 0;
  color: #fff;
  font-size: 1.05rem;
}
.flow-inspector-head button {
  height: 34px;
  padding: 0 12px;
}
.flow-field-list {
  display: grid;
  gap: 10px;
}
.flow-field {
  display: grid;
  gap: 6px;
}
.flow-field span {
  color: var(--text-secondary);
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
}
.flow-field input,
.flow-field select {
  height: 36px;
  padding: 0 10px;
}
.flow-field textarea {
  min-height: 74px;
  resize: vertical;
  padding: 10px;
}
.flow-node-error {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid rgba(255,77,94,.25);
  border-radius: 10px;
  color: var(--danger);
  background: rgba(255,77,94,.08);
  font-size: .72rem;
}
.flow-compare-toggle {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
  color: var(--text-secondary);
  font-size: .72rem;
  font-weight: 800;
}
.flow-output-panel {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(0,229,255,.14);
  border-radius: 12px;
  background: rgba(2,7,12,.46);
}
.flow-output-panel h3 {
  margin: 0 0 9px;
  color: #fff;
  font-size: .78rem;
}
.flow-output-panel a {
  display: block;
  color: var(--cyan);
  font-size: .66rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.flow-compare-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: .7rem;
}
.flow-empty-state {
  color: var(--text-secondary);
  font-size: .78rem;
  line-height: 1.5;
}
.dashboard-side-controls {
  grid-template-columns: minmax(96px, 1fr) 58px;
  gap: 6px;
  width: 100%;
}
.dashboard-side-controls .dashboard-credit-pill {
  min-width: 0;
  height: 34px;
  min-height: 34px;
  padding: 0 9px;
  gap: 6px;
  border-radius: 999px;
  justify-content: space-between;
  overflow: hidden;
}
.dashboard-side-controls .dashboard-credit-pill span {
  flex: 0 0 auto;
  font-size: .56rem;
  letter-spacing: .045em;
  line-height: 1;
}
.dashboard-side-controls .dashboard-credit-pill strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .68rem;
  line-height: 1;
}
.dashboard-side-controls .dashboard-lang {
  width: 58px;
  height: 34px;
  padding: 3px;
  gap: 2px;
  flex: 0 0 58px;
  overflow: hidden;
}
.dashboard-side-controls .dashboard-lang button {
  min-width: 0;
  width: 25px;
  height: 26px;
  font-size: .58rem;
  line-height: 1;
  padding: 0;
}
.flow-canvas-stage {
  cursor: grab;
}
.flow-canvas-stage:active {
  cursor: grabbing;
}
.flow-canvas-stage.is-connecting {
  cursor: crosshair;
}
.flow-node-layer {
  inset: 0;
  pointer-events: none;
}
.flow-node {
  min-height: 218px;
  overflow: visible;
  pointer-events: auto;
}
.flow-node header,
.flow-node-preview,
.flow-node footer {
  overflow: hidden;
}
.flow-node header {
  border-radius: 14px 14px 0 0;
  background: rgba(9,16,24,.96);
}
.flow-node-preview {
  height: 116px;
}
.flow-node-prompt-preview {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
}
.flow-node-prompt-preview strong {
  color: var(--cyan);
  font-size: .72rem;
}
.flow-node-prompt-preview span {
  max-width: 210px;
  color: var(--text-secondary);
  font-size: .66rem;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.flow-node-ports.compact {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  pointer-events: none;
}
.flow-node-ports.compact > div {
  display: block;
}
.flow-port {
  position: absolute;
  z-index: 3;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
  border: 1px solid rgba(0,229,255,.22);
  border-radius: 999px;
  background: rgba(2,7,12,.94);
  color: #dffaff;
  font-size: .52rem;
  font-weight: 900;
  pointer-events: auto;
}
.flow-port i {
  width: 9px;
  height: 9px;
  border: 1px solid var(--cyan);
  border-radius: 999px;
  background: #061018;
  box-shadow: 0 0 10px rgba(0,229,255,.35);
}
.flow-port.input {
  left: -8px;
  transform: translateX(-100%);
}
.flow-port.output {
  right: -8px;
  transform: translateX(100%);
}
.flow-port.output i {
  background: var(--cyan);
}
.flow-port.active,
.flow-port:hover {
  border-color: var(--cyan);
  color: #fff;
  box-shadow: 0 0 18px rgba(0,229,255,.22);
}
.flow-connect-hint {
  color: var(--cyan) !important;
  border: 1px solid var(--cyan-border);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(0,229,255,.08);
}
.flow-field.is-prompt textarea {
  min-height: 112px;
  font-size: .78rem;
  line-height: 1.45;
}
.mention-menu {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(100% + 6px);
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--cyan-border);
  border-radius: 10px;
  background: rgba(2, 7, 12, 0.98);
  box-shadow: 0 18px 44px rgba(0,0,0,0.55), 0 0 22px rgba(0,229,255,0.14);
}
.mention-item {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.mention-item:hover,
.mention-item.used {
  border-color: var(--cyan-border);
  background: rgba(0,229,255,0.08);
}
.mention-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.mention-main {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.66rem;
  font-weight: 900;
}
.mention-type {
  color: var(--text-muted);
  font-size: 0.52rem;
  font-weight: 900;
  text-transform: uppercase;
}
@media (max-width: 980px) {
  .auth-redesign-shell { display: grid; }
  .auth-redesign-visual { min-height: 38vh; padding: 32px; justify-content: flex-end; }
  .auth-redesign-card { margin: 0 auto 28px; }
  .dashboard-redesign { grid-template-columns: 1fr; }
  .dashboard-side { position: relative; height: auto; flex-direction: row; align-items: center; }
  .dashboard-nav { display: flex; }
  .dashboard-side-account { margin-left: auto; margin-top: 0; width: auto; max-width: 240px; }
  .dashboard-side-controls { margin-left: auto; margin-top: 0; display: flex; align-items: center; }
  .dashboard-hero-panel { align-items: stretch; flex-direction: column; }
  .dashboard-toolbar.clean { justify-content: stretch; flex-direction: column; }
  .dashboard-toolbar.clean .dashboard-search { width: 100%; }
}
@media (max-width: 640px) {
  .dashboard-side { flex-wrap: wrap; padding: 16px; }
  .dashboard-nav { width: 100%; }
  .dashboard-nav button { flex: 1; text-align: center; }
  .dashboard-main { padding: 14px; }
  .dashboard-main-top { justify-content: space-between; }
  .dashboard-hero-panel { padding: 22px; }
  .auth-visual-copy h1 { font-size: 2.8rem; }
  .auth-redesign-card { padding: 32px 24px; }
  .dashboard-side-controls { width: 100%; }
}