/* Der Reset liegt in einem Cascade-Layer, damit die Tailwind-Utilities der
       React-Shell ihre Abstände behalten. Unlayered Vanilla-Regeln bleiben stärker. */
body.ark-col-resize-active {
  cursor: col-resize;
  user-select: none;
}

body.ark-crosshair-cursor {
  cursor: crosshair;
}
    :root {
      --right-rail-width: 0px;
      --user-note-panel-width: 0px;
      --job-panel-width: 0px;
      --chat-panel-width: min(420px, 38vw);
      --sequence-timeline-offset: 0px;
      --graph-tooling-dock-offset: 0px;
      --chat-fab-gap: 1.35rem;
      --chat-fab-size: 3.35rem;
      --detail-rails-width: calc(var(--user-note-panel-width) + var(--job-panel-width));
      --graph-edge-right: calc(var(--right-rail-width) + var(--detail-rails-width));
      --chat-fab-right: calc(var(--graph-edge-right) + 1.35rem);
      --graph-hud-left: 12px;
      --graph-hud-bottom: 96px;
      --graph-hud-block-height: calc(16px + 11px * 1.4 + 2px);
      --graph-2d-minimap-gap: 0.5rem;
      --graph-2d-minimap-width: 220px;
      --graph-2d-minimap-height: 156px;
      --stage-edge-transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
      --graph-stage-width: calc(100vw - var(--right-rail-width) - var(--user-note-panel-width) - var(--job-panel-width));
    }
    html, body {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background: var(--studio-bg, oklch(0.985 0.002 264));
      font-family: system-ui, -apple-system, Segoe UI, sans-serif;
      color: var(--studio-text, oklch(0.21 0.016 264));
    }
    #graph-2d {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      right: auto;
      overflow: hidden;
      transition: none;
      z-index: 2;
      display: block;
      pointer-events: auto;
      background: var(--graph-scene-bg, oklch(0.967 0.003 264));
    }
    #graph-split {
      --split-col-primary: 55%;
      --split-col-detail: 28%;
      --split-col-chat: 17%;
      --split-col-editor: 42%;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      /* Volle Viewport-Höhe: Detail + Chat bis unten; Dock-Platz nur in der Graph-Spalte */
      bottom: 0;
      z-index: 2;
      display: none;
      grid-template-columns:
        minmax(0, var(--split-col-primary))
        6px
        minmax(0, var(--split-col-detail))
        6px
        minmax(0, var(--split-col-chat));
      background: var(--studio-bg, oklch(0.985 0.002 264));
      overflow: hidden;
    }
    body.graph-detail-active #graph-split {
      display: grid;
    }
    #graph-split[hidden] {
      display: none !important;
    }
    /* Graph-Spalte lässt unten Platz für das Tooling-Dock; Formular/Chat füllen die volle Höhe */
    #graph-canvas-host.graph-split-col-primary {
      padding-bottom: var(--graph-tooling-dock-offset, 0px);
    }
    /* Untere Tooling-Leiste nur so breit wie die Graph-Spalte (Detail/Chat begrenzen rechts) */
    body.graph-chrome-ready.graph-chrome-on #top-controls,
    body.graph-chrome-ready.graph-chrome-on #graph-header-stack {
      display: none !important;
    }
    body.graph-chrome-ready.graph-chrome-on #graph-chrome-root {
      display: block !important;
    }
    /* Shell statt Overlay: Graph, Detail und Chat beginnen unter der Kopfleiste */
    body.graph-chrome-ready.graph-chrome-on #graph-split {
      top: var(--graph-chrome-height, 3rem);
    }
    body.graph-detail-active #sequence-timeline {
      right: var(--graph-edge-right);
    }
    #graph-tooling-dock {
      position: fixed;
      left: 0;
      right: var(--graph-edge-right, 0px);
      bottom: 0;
      z-index: 99990;
      display: flex;
      align-items: stretch;
      justify-content: center;
      gap: 0.75rem;
      padding: 0.65rem 1rem;
      background: var(--studio-surface, var(--neu-bg));
      border-top: 1px solid var(--studio-border, rgba(255, 255, 255, 0.06));
      box-shadow: none;
      pointer-events: auto;
      transition: var(--stage-edge-transition);
    }
    #graph-tooling-dock[hidden] { display: none !important; }
    .graph-tooling-tile {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.15rem;
      min-width: 0;
      max-width: none;
      flex: 1 1 0;
      padding: 0.35rem 0.75rem;
      text-align: left;
      border: none;
      border-right: 1px solid var(--studio-border, rgba(120, 160, 220, 0.18));
      border-radius: 0;
      background: transparent;
      color: var(--studio-text, var(--neu-text));
      cursor: pointer;
    }
    .graph-tooling-tile:last-child {
      border-right: none;
    }
    .graph-tooling-tile:hover {
      border-color: var(--studio-primary, #5b8def);
    }
    .graph-tooling-tile:focus-visible {
      outline: 2px solid var(--studio-primary, #5b8def);
      outline-offset: 2px;
    }
    .graph-tooling-tile-title {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--studio-primary, #5b8def);
    }
    .graph-tooling-tile-body {
      font-size: 0.85rem;
      color: var(--studio-text, var(--neu-text));
      line-height: 1.3;
    }
    .graph-tooling-tile-meta {
      font-size: 0.75rem;
      color: var(--studio-text-muted, var(--neu-text-muted));
    }
    #graph-2d canvas {
      width: 100% !important;
      height: 100% !important;
      display: block;
    }
    .graph-2d-stage-empty-hint {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 6;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0.75rem;
      max-width: min(420px, calc(100% - 2rem));
      padding: 1rem 1.1rem;
      border-radius: var(--studio-radius-lg, 12px);
      border: 1px solid var(--studio-border, rgba(120, 160, 220, 0.22));
      background: var(--studio-surface-elevated, rgba(12, 18, 32, 0.94));
      box-shadow: var(--studio-shadow-sm, 0 4px 14px rgba(0, 0, 0, 0.28));
      color: var(--studio-text, #e8edf7);
      text-align: center;
      pointer-events: auto;
    }
    .graph-2d-stage-empty-hint.is-dismissible {
      cursor: pointer;
    }
    .graph-2d-stage-empty-hint.is-dismissible:focus-visible {
      outline: 2px solid var(--studio-primary, #5b8def);
      outline-offset: 2px;
    }
    .graph-2d-stage-empty-hint[hidden] {
      display: none !important;
    }
    .graph-2d-stage-empty-hint-row {
      display: flex;
      align-items: flex-start;
      gap: 0.625rem;
      width: 100%;
      text-align: left;
    }
    .graph-2d-stage-empty-hint p {
      margin: 0;
      flex: 1;
      font-size: 0.875rem;
      line-height: 1.45;
      color: var(--studio-text-muted, #9aa8bc);
    }
    .graph-2d-stage-empty-hint-dismiss {
      flex-shrink: 0;
    }
    body.view-mode-2d #graph-2d {
      display: block;
      pointer-events: auto;
      width: 100%;
    }
    body.graph-detail-active.view-mode-2d #graph-2d {
      width: 100%;
    }
    body.ark-graph-2d-measure #graph-2d {
      display: block !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
    .graph-2d-minimap {
      position: absolute;
      left: var(--graph-hud-left);
      right: auto;
      bottom: calc(
        var(--graph-hud-bottom)
        + var(--graph-hud-block-height)
        + var(--graph-2d-minimap-gap)
      );
      z-index: 100008;
      width: var(--graph-2d-minimap-width);
      height: var(--graph-2d-minimap-height);
      border-radius: var(--studio-radius-lg);
      border: 1px solid var(--studio-border);
      background: var(--studio-surface-elevated);
      box-shadow: var(--studio-shadow-sm);
      overflow: hidden;
      pointer-events: auto;
      touch-action: none;
      user-select: none;
    }
    .graph-2d-minimap__canvas {
      display: block;
      width: 100%;
      height: 100%;
    }
    .graph-2d-minimap__viewport {
      position: absolute;
      box-sizing: border-box;
      border: 1.5px solid var(--studio-primary);
      background: color-mix(in srgb, var(--studio-primary) 18%, transparent);
      cursor: grab;
      pointer-events: none;
    }
    .graph-2d-minimap.is-dragging .graph-2d-minimap__viewport {
      cursor: grabbing;
    }
    .graph-2d-minimap[hidden] {
      display: none !important;
    }
    /* Flächen, Farben, Radius und Schatten kommen aus studio-design.css
       (`.flow-node-type-picker*`), das nach diesem <style> geladen wird.
       Hier bleibt nur Geometrie. */
    .flow-node-type-picker {
      position: fixed;
      z-index: 10050;
      min-width: 196px;
      max-height: min(420px, 70vh);
      overflow-y: auto;
    }
    .flow-node-type-picker-title {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .flow-node-type-picker-item {
      display: block;
      width: 100%;
      border: none;
      background: transparent;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }
    .flow-node-type-picker-item:hover,
    .flow-node-type-picker-item:focus-visible {
      outline: none;
    }
    .flow-node-type-picker-item[data-preferred="1"] {
      font-weight: 600;
    }
    .graph-job-done-zone {
      position: absolute;
      left: 50%;
      bottom: 12px;
      transform: translateX(-50%);
      min-width: 220px;
      padding: 10px 18px;
      border: 1px dashed var(--studio-border);
      border-radius: var(--studio-radius);
      background: var(--studio-surface);
      color: var(--studio-text-muted);
      text-align: center;
      font-size: 0.85rem;
      pointer-events: none;
      z-index: 6;
      transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    }
    .graph-job-done-zone.is-active {
      border-color: var(--studio-primary);
      color: var(--studio-text);
      background: var(--studio-surface-elevated);
    }
    .job-completion-presets {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }
    .job-completion-presets .studio-btn.active {
      border-color: var(--studio-primary);
      color: var(--studio-primary);
    }
    .jobs-view-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 0;
    }
    .jobs-analytics-panel {
      display: grid;
      gap: 16px;
    }
    .jobs-analytics-chart {
      background: var(--studio-surface);
      border: 1px solid var(--studio-border);
      border-radius: var(--studio-radius-lg);
      padding: 12px;
    }
    .jobs-analytics-chart h3 {
      margin: 0 0 8px;
      font-size: 0.95rem;
    }
    .jobs-analytics-chart canvas {
      width: 100%;
      height: 180px;
      display: block;
    }
    #hud {
      position: fixed;
      left: var(--graph-hud-left);
      bottom: var(--graph-hud-bottom);
      z-index: 10;
      color: #8a9bb8;
      font-size: 11px;
      line-height: 1.4;
      pointer-events: none;
      background: rgba(14, 18, 36, 0.72);
      backdrop-filter: blur(8px);
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid rgba(120, 160, 220, 0.14);
    }
    #sequence-timeline {
      position: fixed;
      left: 0;
      right: var(--graph-edge-right);
      bottom: 0;
      z-index: 99990;
      padding: 12px 18px 14px;
      background: var(--neu-bg);
      border-top: 1px solid rgba(255, 255, 255, 0.04);
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35);
      pointer-events: auto;
      transition: var(--stage-edge-transition);
    }
    #sequence-timeline[hidden] { display: none; }
    #sequence-timeline.collapsed {
      padding: 10px 18px;
    }
    #sequence-timeline.collapsed .timeline-range-widget {
      display: none;
    }
    #sequence-timeline.collapsed .timeline-header {
      margin-bottom: 0;
    }
    .timeline-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      cursor: pointer;
      user-select: none;
    }
    .timeline-header-main {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px 16px;
      flex: 1;
      min-width: 0;
    }
    .timeline-toggle-btn {
      flex-shrink: 0;
      border: none;
      background: var(--neu-bg);
      color: var(--neu-text-muted);
      cursor: pointer;
      font-size: 13px;
      line-height: 1;
      padding: 0.35rem 0.55rem;
      min-width: 44px;
      min-height: 44px;
      border-radius: var(--neu-radius-sm);
      box-shadow: var(--neu-extrude-shadow);
      transition: box-shadow 160ms ease, color 160ms ease;
    }
    .timeline-toggle-btn:hover {
      color: var(--neu-text);
    }
    .timeline-toggle-btn:active {
      box-shadow: var(--neu-inset-shadow);
    }
    .timeline-toggle-btn:focus-visible {
      outline: none;
      box-shadow: var(--neu-extrude-shadow), var(--neu-focus-ring);
    }
    .timeline-title {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--neu-text-muted);
    }
    .timeline-range-display {
      font-size: 13px;
      font-weight: 500;
      color: var(--neu-text);
      font-variant-numeric: tabular-nums;
    }
    .timeline-range-widget {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .timeline-histogram {
      height: 56px;
      width: 100%;
      position: relative;
    }
    .timeline-histogram svg {
      display: block;
      width: 100%;
      height: 100%;
    }
    .timeline-bound-labels {
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      color: var(--neu-text-muted);
      padding: 0 2px;
      margin-top: -2px;
    }
    .timeline-track-wrap {
      position: relative;
      height: 28px;
      margin: 0 6px;
    }
    .timeline-track {
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 8px;
      background: var(--neu-bg);
      border-radius: 999px;
      box-shadow: var(--neu-inset-shadow);
    }
    .timeline-track-selected {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      height: 4px;
      background: var(--neu-accent);
      border-radius: 999px;
      left: 0;
      width: 100%;
      pointer-events: none;
    }
    .timeline-handle {
      position: absolute;
      left: 0;
      width: 100%;
      top: 0;
      height: 28px;
      margin: 0;
      padding: 0;
      background: transparent;
      pointer-events: none;
      -webkit-appearance: none;
      appearance: none;
    }
    .timeline-handle::-webkit-slider-runnable-track {
      height: 4px;
      background: transparent;
      border: none;
    }
    .timeline-handle::-moz-range-track {
      height: 4px;
      background: transparent;
      border: none;
    }
    .timeline-handle::-webkit-slider-thumb {
      pointer-events: auto;
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      margin-top: -8px;
      border-radius: 50%;
      background: var(--neu-bg);
      border: none;
      box-shadow: var(--neu-extrude-shadow);
      cursor: grab;
      transition: box-shadow 160ms ease;
    }
    .timeline-handle::-moz-range-thumb {
      pointer-events: auto;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--neu-bg);
      border: none;
      box-shadow: var(--neu-extrude-shadow);
      cursor: grab;
      transition: box-shadow 160ms ease;
    }
    .timeline-handle:active::-webkit-slider-thumb,
    .timeline-handle:active::-moz-range-thumb {
      cursor: grabbing;
      box-shadow: var(--neu-inset-shadow);
    }
    .timeline-handle:focus-visible::-webkit-slider-thumb,
    .timeline-handle:focus-visible::-moz-range-thumb {
      box-shadow: var(--neu-extrude-shadow), var(--neu-focus-ring);
    }
    .timeline-handle-start { z-index: 1; }
    .timeline-handle-end { z-index: 2; }
    .timeline-handle-labels {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      font-size: 11px;
      color: var(--neu-text-muted);
      font-variant-numeric: tabular-nums;
      padding: 0 4px;
    }
    .timeline-handle-labels span {
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #top-controls {
      position: fixed;
      top: 16px;
      left: 16px;
      right: calc(var(--graph-edge-right, 0px) + 16px);
      z-index: 100001;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      max-width: none;
      pointer-events: none;
    }
    #top-controls > * {
      pointer-events: auto;
    }
    /* Bis der Boot entschieden hat, welche Schale gilt, bleibt die Vanilla-
       Kopfsteuerung unsichtbar. Sonst schwebt sie über dem Ladebildschirm
       (#loading liegt tiefer) und blitzt bei jedem Reload auf. */
    body.app-booting #top-controls,
    body.app-booting #graph-header-stack {
      display: none !important;
    }
    .graph-header-stack {
      position: fixed;
      top: var(--graph-header-top, 16px);
      left: var(--graph-header-center-x, calc((100vw - var(--graph-edge-right)) / 2));
      transform: translateX(-50%);
      width: min(
        50vw,
        var(--graph-header-max-width, calc(100vw - var(--graph-edge-right) - 2rem)),
        720px
      );
      z-index: 100000;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      pointer-events: none;
      transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s cubic-bezier(0.4, 0, 0.2, 1), top 0.2s ease;
    }
    .graph-header-stack > * {
      pointer-events: auto;
    }
    body.stage-active .graph-header-stack {
      gap: 0.65rem;
    }
    .search-center-container {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      width: 100%;
      --search-ui-font-size: 0.8125rem;
      --search-ui-line-height: 1.35;
      --search-ui-padding-y: 0.55rem;
      --search-ui-padding-x: 0.85rem;
      --search-ui-min-height: 38px;
    }
    .search-center-container input[type="search"],
    .search-filters select,
    .search-filters input[type="text"] {
      width: 100%;
      min-width: 0;
      padding: var(--search-ui-padding-y) var(--search-ui-padding-x);
      min-height: var(--search-ui-min-height);
      font: inherit;
      font-size: var(--search-ui-font-size);
      line-height: var(--search-ui-line-height);
      border-radius: var(--neu-radius-sm);
      background: var(--neu-bg);
      border: none;
      color: var(--neu-text);
      outline: none;
      box-shadow: var(--neu-inset-shadow);
      transition: box-shadow 160ms ease, color 160ms ease;
    }
    .search-center-container input[type="search"] {
      transition: box-shadow 180ms ease, color 180ms ease;
    }
    .search-center-container input[type="search"]::placeholder,
    .search-filters input[type="text"]::placeholder {
      color: var(--neu-text-muted);
    }
    .search-filters select {
      cursor: pointer;
      appearance: none;
      background-image:
        linear-gradient(45deg, transparent 50%, var(--neu-text-muted) 50%),
        linear-gradient(135deg, var(--neu-text-muted) 50%, transparent 50%);
      background-position:
        calc(100% - 0.95rem) calc(50% + 0.12rem),
        calc(100% - 0.7rem) calc(50% + 0.12rem);
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
      padding-right: 1.65rem;
    }
    .search-ui-btn {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: var(--search-ui-min-height);
      padding: var(--search-ui-padding-y) var(--search-ui-padding-x);
      font: inherit;
      font-size: var(--search-ui-font-size);
      line-height: var(--search-ui-line-height);
      font-weight: 400;
      border: none;
      border-radius: var(--neu-radius-sm);
      background: var(--neu-bg);
      color: var(--neu-text-muted);
      cursor: pointer;
      white-space: nowrap;
      box-shadow: var(--neu-extrude-shadow);
      transition: box-shadow 160ms ease, color 160ms ease;
    }
    .search-ui-btn:hover {
      color: var(--neu-text);
    }
    .search-ui-btn:active,
    .search-ui-btn[aria-expanded="true"] {
      box-shadow: var(--neu-inset-shadow);
      color: var(--neu-text);
    }
    .search-ui-btn:focus-visible,
    .search-center-container input[type="search"]:focus-visible,
    .search-filters select:focus-visible,
    .search-filters input[type="text"]:focus-visible {
      outline: none;
      box-shadow: var(--neu-inset-shadow), var(--neu-focus-ring);
    }
    .search-center-container input[type="search"]:focus {
      outline: none;
      box-shadow: var(--neu-inset-shadow), var(--neu-focus-ring);
    }
    .search-toolbar {
      display: flex;
      gap: 0.85rem;
      align-items: stretch;
      width: 100%;
    }
    .search-toolbar input[type="search"] {
      flex: 1 1 auto;
      min-width: 0;
    }
    .search-center-container.search-proximate:not(.search-expanded) input[type="search"] {
      box-shadow: var(--neu-inset-shadow), 0 0 0 1px rgba(120, 160, 220, 0.22);
      color: #f0f4fc;
    }
    #search-filter-toggle {
      min-width: 5.25rem;
    }
    #search-filter-toggle.has-active-filters {
      color: var(--neu-accent);
    }
    .search-filters {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
      gap: 0.65rem 0.75rem;
      align-items: center;
      padding: 0.8rem 0.95rem;
      border-radius: var(--neu-radius-sm);
      background: var(--neu-bg);
      border: none;
      box-shadow: var(--neu-float-shadow);
    }
    .search-filters[hidden] {
      display: none;
    }
    #sf-reset {
      align-self: stretch;
    }
    .search-filter-hint {
      font-size: var(--search-ui-font-size);
      color: var(--neu-text-muted);
      line-height: var(--search-ui-line-height);
      padding: 0.15rem 0.35rem 0;
    }
    .trending-terms-container {
      display: none;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 0.6rem;
      width: 100%;
      padding-top: 0.1rem;
    }
    .search-center-container.search-expanded .trending-terms-container {
      display: flex;
    }
    .trending-term-badge {
      font-size: var(--search-ui-font-size);
      line-height: var(--search-ui-line-height);
      padding: 0.4rem 0.75rem;
      min-height: var(--search-ui-min-height);
      border-radius: 999px;
      background: var(--neu-bg);
      color: var(--neu-text-muted);
      cursor: pointer;
      transition: box-shadow 160ms ease, color 160ms ease, background 160ms ease;
      border: none;
      box-shadow: var(--neu-inset-shadow);
    }
    .trending-term-badge:hover {
      color: var(--neu-text);
      background: rgba(255, 255, 255, 0.03);
    }
    .trending-term-badge:active {
      box-shadow: var(--neu-inset-shadow);
    }
    .trending-term-badge:focus-visible {
      outline: none;
      box-shadow: var(--neu-inset-shadow), var(--neu-focus-ring);
    }
    .trending-term-badge.ontology-badge {
      color: var(--neu-text);
      box-shadow: var(--neu-extrude-shadow);
    }
    .trending-term-badge.ontology-badge:hover {
      color: var(--neu-accent);
    }
    #search-results {
      display: none;
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      z-index: 100002;
      margin-top: 0;
      max-height: 260px;
      overflow-y: auto;
      background: rgba(14, 18, 36, 0.97);
      border: 1px solid rgba(120, 160, 220, 0.22);
      border-radius: 8px;
      padding: 0.25rem 0.35rem;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    }
    #search-results.open {
      display: block;
    }
    .search-result-item {
      display: block;
      width: 100%;
      text-align: left;
      background: transparent;
      border: none;
      border-radius: 6px;
      color: #e8edf7;
      padding: 0.45rem 0.5rem;
      font-size: 12px;
      line-height: 1.35;
    }
    .search-result-main {
      display: block;
      width: 100%;
      text-align: left;
      background: transparent;
      border: none;
      border-radius: 6px;
      color: inherit;
      padding: 0;
      font: inherit;
      line-height: inherit;
      cursor: pointer;
    }
    .search-result-main:hover,
    .search-result-main:focus {
      outline: none;
    }
    .search-result-item:hover,
    .search-result-item:focus-within {
      background: rgba(0, 120, 200, 0.22);
      outline: none;
    }
    .search-result-item .sr-type {
      display: block;
      font-size: 10px;
      color: #8a9bb8;
      margin-bottom: 0.1rem;
    }
    .search-result-item .sr-meta {
      display: block;
      font-size: 10px;
      color: #7a8ca8;
      margin-top: 0.12rem;
    }
    .search-result-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
      margin-top: 0.35rem;
    }
    .search-result-tag {
      font-size: 10px;
      line-height: 1.2;
      padding: 0.15rem 0.45rem;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.08);
      color: #a8b8d0;
      border: 1px solid rgba(120, 160, 220, 0.18);
      cursor: pointer;
    }
    .search-result-tag:hover,
    .search-result-tag:focus {
      background: rgba(0, 120, 200, 0.28);
      color: #fff;
      border-color: rgba(180, 220, 255, 0.35);
      outline: none;
    }
    .search-result-empty {
      font-size: 12px;
      color: #8a9bb8;
      padding: 0.35rem 0.5rem;
    }
    .panel-btn {
      pointer-events: auto;
      border: 1px solid rgba(120, 160, 220, 0.25);
      background: rgba(14, 18, 36, 0.88);
      backdrop-filter: blur(12px);
      color: #e8edf7;
      border-radius: 8px;
      padding: 0.55rem 0.85rem;
      font-size: 13px;
      cursor: pointer;
    }
    .panel-btn:hover { border-color: rgba(120, 160, 220, 0.45); }
    #stats-chip {
      font-size: 12px;
      color: #8a9bb8;
      background: rgba(14, 18, 36, 0.75);
      padding: 0.45rem 0.65rem;
      border-radius: 8px;
      border: 1px solid rgba(120, 160, 220, 0.15);
    }
    #toast {
      position: fixed;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100020;
      background: rgba(14, 18, 36, 0.95);
      border: 1px solid rgba(120, 160, 220, 0.25);
      padding: 0.6rem 1rem;
      border-radius: 8px;
      font-size: 13px;
      opacity: 0;
      transition: opacity 0.2s;
      pointer-events: none;
    }
    #toast.show { opacity: 1; }
    #toast.error { border-color: rgba(255, 80, 90, 0.5); color: #ffb4b8; }
    #document-editor-page {
      /* page chrome in arkenstone-design.css */
    }
    #document-editor-page .konzept-header-main {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem 0.75rem;
      flex: 1;
      min-width: 0;
    }
    #document-editor-page .konzept-kind-field {
      margin: 0;
      flex: 0 0 auto;
    }
    #document-editor-page .konzept-kind-field .studio-select {
      min-width: 9rem;
    }
    #document-editor-page .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    #document-editor-page .konzept-label-input {
      flex: 1 1 220px;
      min-width: 0;
      width: auto;
      font-size: 1.05rem;
      font-weight: 600;
    }
    #document-editor-page .konzept-save-status {
      font-size: 0.78rem;
    }
    #document-editor-page .konzept-save-status.saving { color: var(--studio-warning, #ffd54f); }
    #document-editor-page .konzept-save-status.error { color: var(--studio-danger, #ff8a9a); }
    #document-editor-page .konzept-save-status.saved { color: var(--studio-success, #81c784); }
    #konzept-editor-mount {
      flex: 1;
      min-height: 0;
      border-radius: var(--studio-radius, 8px);
      overflow: hidden;
      border: 1px solid var(--studio-border, rgba(255, 255, 255, 0.08));
      background: var(--studio-bg, #1a1f2e);
    }
    #konzept-editor-mount .konzept-editor-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.65rem;
      height: 100%;
      min-height: 320px;
      color: #b8c8e4;
      font-size: 0.92rem;
    }
    #konzept-editor-mount .konzept-editor-loading-spinner {
      width: 1.1rem;
      height: 1.1rem;
      border: 2px solid rgba(186, 104, 200, 0.25);
      border-top-color: #ce8cdc;
      border-radius: 50%;
      animation: konzept-editor-spin 0.75s linear infinite;
    }
    @keyframes konzept-editor-spin {
      to { transform: rotate(360deg); }
    }
    #konzept-editor-mount .toastui-editor-defaultUI {
      border: none;
      height: 100%;
      background: rgba(8, 12, 28, 0.9);
    }
    #konzept-editor-mount .toastui-editor-defaultUI-toolbar,
    #konzept-editor-mount .toastui-editor-toolbar,
    #konzept-editor-mount .toastui-editor-toolbar-divider {
      background-color: rgba(12, 16, 32, 0.98) !important;
      border-color: rgba(186, 104, 200, 0.2) !important;
    }
    #konzept-editor-mount .toastui-editor-toolbar-icons {
      border-color: rgba(186, 104, 200, 0.2);
    }
    #konzept-editor-mount .toastui-editor-toolbar-icons:not(:disabled):hover {
      background-color: rgba(186, 104, 200, 0.18);
      border-color: rgba(206, 140, 220, 0.35);
    }
    #konzept-editor-mount .toastui-editor-toolbar-icons.active {
      background-color: rgba(186, 104, 200, 0.28);
      border-color: rgba(206, 140, 220, 0.45);
    }
    #konzept-editor-mount .toastui-editor-defaultUI,
    #konzept-editor-mount .toastui-editor-md-container,
    #konzept-editor-mount .toastui-editor-ww-container,
    #konzept-editor-mount .toastui-editor-contents,
    #konzept-editor-mount .ProseMirror,
    #konzept-editor-mount .toastui-editor-md-preview,
    #konzept-editor-mount .toastui-editor-md-splitter,
    #konzept-editor-mount .toastui-editor-ww-scroll,
    #konzept-editor-mount .toastui-editor-md-tab-container,
    #konzept-editor-mount .toastui-editor-mode-switch {
      background-color: rgba(8, 12, 28, 0.9);
      color: #e8edf7;
    }
    #konzept-editor-mount .ProseMirror,
    #konzept-editor-mount .toastui-editor-contents,
    #konzept-editor-mount .toastui-editor-md-preview {
      color: #e8edf7 !important;
    }
    #konzept-editor-mount .ProseMirror h1,
    #konzept-editor-mount .ProseMirror h2,
    #konzept-editor-mount .ProseMirror h3,
    #konzept-editor-mount .ProseMirror h4,
    #konzept-editor-mount .ProseMirror h5,
    #konzept-editor-mount .ProseMirror h6,
    #konzept-editor-mount .toastui-editor-md-preview h1,
    #konzept-editor-mount .toastui-editor-md-preview h2,
    #konzept-editor-mount .toastui-editor-md-preview h3,
    #konzept-editor-mount .toastui-editor-md-preview h4,
    #konzept-editor-mount .toastui-editor-md-preview h5,
    #konzept-editor-mount .toastui-editor-md-preview h6 {
      color: #f4f7ff !important;
    }
    #konzept-editor-mount .ProseMirror p,
    #konzept-editor-mount .ProseMirror li,
    #konzept-editor-mount .ProseMirror td,
    #konzept-editor-mount .ProseMirror th,
    #konzept-editor-mount .toastui-editor-md-preview p,
    #konzept-editor-mount .toastui-editor-md-preview li {
      color: #dce4f5 !important;
    }
    #konzept-editor-mount .ProseMirror a,
    #konzept-editor-mount .toastui-editor-md-preview a {
      color: #9ec5ff;
    }
    #konzept-editor-mount .ProseMirror blockquote,
    #konzept-editor-mount .toastui-editor-md-preview blockquote {
      border-left-color: rgba(186, 104, 200, 0.55);
      color: #c8d4ea !important;
    }
    #konzept-editor-mount .ProseMirror code,
    #konzept-editor-mount .toastui-editor-md-preview code {
      background: rgba(186, 104, 200, 0.14);
      color: #f0d4ff;
    }
    #konzept-editor-mount .ProseMirror pre,
    #konzept-editor-mount .toastui-editor-md-preview pre {
      background: rgba(4, 8, 20, 0.95);
      color: #e8edf7;
    }
    #konzept-editor-mount .toastui-editor-md-container .toastui-editor,
    #konzept-editor-mount .toastui-editor-md-container .CodeMirror,
    #konzept-editor-mount .toastui-editor-md-container .CodeMirror-gutters {
      background-color: rgba(8, 12, 28, 0.95);
      color: #e8edf7;
    }
    #konzept-editor-mount .CodeMirror-cursor {
      border-left-color: #e8edf7;
    }
    #konzept-editor-mount .CodeMirror-selected {
      background: rgba(186, 104, 200, 0.28) !important;
    }
    #konzept-editor-mount .konzept-editor-fallback {
      width: 100%;
      height: 100%;
      min-height: 400px;
      resize: none;
      background: rgba(8, 12, 28, 0.9);
      color: #e8edf7;
      border: none;
      padding: 0.75rem;
      font-family: ui-monospace, monospace;
      font-size: 0.9rem;
      line-height: 1.5;
    }
    .node-label-konzept {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      margin-bottom: 0.15rem;
      max-width: 100%;
    }
    .node-label-konzept .node-label-excerpt {
      font-size: 0.72rem;
      color: #b8a0c8;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 180px;
    }
    .node-label-files {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      margin-bottom: 4px;
      max-width: 180px;
    }
    .node-label-icon {
      font-size: 11px;
      line-height: 1;
    }
    .node-label-file {
      font-size: 10px;
      color: #b8e0d8;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 170px;
    }
    .node-pin-label .more-btn {
      font-size: 10px;
      padding: 1px 6px;
      border: 1px solid rgba(0, 137, 123, 0.5);
      border-radius: 4px;
      background: rgba(0, 137, 123, 0.15);
      color: #80cbc4;
      cursor: pointer;
    }
    #wissenspool-files-section {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    #wissenspool-files-section h4 {
      margin: 0 0 8px;
      font-size: 13px;
      color: #80cbc4;
    }
    .wissenspool-meta-row {
      font-size: 12px;
      color: #a8b4cc;
      margin-bottom: 8px;
    }
    #wissenspool-dropzone {
      margin-top: 8px;
      border: 2px dashed rgba(0, 137, 123, 0.35);
      border-radius: 8px;
      padding: 1rem;
      text-align: center;
      color: #a8b4cc;
      cursor: pointer;
      font-size: 12px;
    }
    #wissenspool-dropzone.dragover {
      border-color: rgba(0, 137, 123, 0.75);
      background: rgba(0, 137, 123, 0.1);
    }
    .wissenspool-file-row {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 8px;
      align-items: center;
      padding: 6px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 12px;
    }
    .wissenspool-file-link {
      color: #80cbc4;
      text-decoration: none;
    }
    .wissenspool-file-link:hover {
      text-decoration: underline;
    }
    .wissenspool-file-meta {
      color: #8899aa;
      white-space: nowrap;
    }
    .wissenspool-file-delete {
      border: none;
      background: transparent;
      color: #ff8a80;
      cursor: pointer;
      padding: 2px 6px;
    }
    .wissenspool-empty {
      font-size: 12px;
      color: #8899aa;
      margin: 0;
    }
    #in-graph-editor {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      max-height: min(78vh, 720px);
      overflow-y: auto;
      padding: 0.25rem 0;
    }
    #in-graph-editor h2 {
      font-size: 1.05rem;
      margin-bottom: 0.35rem;
    }
    #in-graph-editor .mode {
      font-size: 12px;
      color: var(--neu-text-muted);
      margin-bottom: 0.85rem;
    }
    #focus-radar-panel {
      margin-bottom: 0.9rem;
      padding: 0.65rem 0.7rem;
      border-radius: 8px;
      border: 1px solid var(--studio-border);
      background: var(--studio-surface);
    }
    #focus-radar-panel[hidden] {
      display: none !important;
    }
    #focus-radar-panel h3 {
      font-size: 0.82rem;
      font-weight: 600;
      margin-bottom: 0.35rem;
      color: var(--studio-text);
    }
    #focus-radar-status {
      font-size: 11px;
      color: var(--studio-text-muted);
      margin-bottom: 0.55rem;
      line-height: 1.35;
    }
    #focus-radar-panel .field {
      margin-bottom: 0.55rem;
    }
    #focus-radar-actions {
      display: flex;
      gap: 8px;
      margin-top: 0.35rem;
    }
    #focus-radar-actions .panel-btn {
      flex: 1;
      font-size: 12px;
      padding: 0.45rem 0.6rem;
    }
    #neighborhood-section {
      margin-bottom: 0.9rem;
      padding: 0.55rem 0.65rem;
      border-radius: 8px;
      border: 1px solid var(--studio-border);
      background: var(--studio-surface);
    }
    #neighborhood-section[hidden] {
      display: none !important;
    }
    #neighborhood-section summary {
      cursor: pointer;
      font-size: 0.82rem;
      color: var(--studio-text);
      margin-bottom: 0.45rem;
      user-select: none;
    }
    #neighborhood-section summary::-webkit-details-marker {
      color: var(--studio-text-muted);
    }
    .neighbor-group {
      margin-top: 0.55rem;
    }
    .neighbor-group h4 {
      font-size: 11px;
      font-weight: 600;
      color: var(--studio-text-muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 0.3rem;
    }
    .neighbor-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
    .neighbor-row {
      display: flex;
      align-items: stretch;
      gap: 0.25rem;
    }
    .neighbor-row .neighbor-item {
      flex: 1;
      min-width: 0;
    }
    .neighbor-delete-btn {
      flex-shrink: 0;
      width: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--studio-bg);
      border: 1px solid var(--studio-border);
      border-radius: 6px;
      color: var(--studio-danger);
      cursor: pointer;
      font-size: 12px;
      padding: 0;
    }
    .neighbor-delete-btn:hover {
      color: var(--studio-danger-hover);
      border-color: var(--studio-danger);
      background: var(--studio-surface-elevated);
    }
    .neighbor-item {
      width: 100%;
      text-align: left;
      background: var(--studio-bg);
      border: 1px solid var(--studio-border);
      border-radius: 6px;
      padding: 0.4rem 0.5rem;
      font-size: 12px;
      line-height: 1.35;
      cursor: pointer;
      color: var(--studio-text);
    }
    .neighbor-item:hover {
      border-color: var(--studio-primary);
      background: var(--studio-primary-soft);
    }
    .neighbor-rel {
      font-size: 10px;
      font-weight: 700;
      opacity: 0.92;
      margin-right: 0.25rem;
    }
    .neighbor-type {
      display: block;
      font-size: 10px;
      opacity: 0.72;
      margin-top: 0.1rem;
    }
    .neighbor-empty {
      font-size: 12px;
      color: var(--studio-text-muted);
      padding: 0.25rem 0.15rem;
    }
    .field { margin-bottom: 0.75rem; }
    .field label {
      display: block;
      font-size: 12px;
      color: var(--studio-text-muted);
      margin-bottom: 0.25rem;
    }
    .field input,
    .field select,
    .field textarea {
      width: 100%;
      background: var(--studio-bg);
      border: 1px solid var(--studio-border);
      border-radius: 6px;
      color: var(--studio-text);
      padding: 0.45rem 0.55rem;
      font-size: 13px;
    }
    .field textarea { resize: vertical; min-height: 72px; }
    .field input[type="range"] { padding: 0; }
    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 0.85rem;
    }
    .actions .primary {
      background: var(--studio-primary);
      border-color: var(--studio-primary);
      color: #fff;
    }
    .actions .danger {
      background: var(--studio-danger);
      border-color: var(--studio-danger);
      color: #fff;
    }
    #loading {
      position: fixed;
      top: 0;
      left: 0;
      right: var(--graph-edge-right);
      bottom: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--studio-bg);
      font-size: 14px;
      color: var(--studio-text-muted);
    }
    #loading.hidden { display: none; }
    .node-detail-header {
      flex-shrink: 0;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      padding: 0 0 0.55rem;
      border-bottom: 1px solid var(--studio-border);
      margin-bottom: 0.55rem;
    }
    .node-detail-header .meta-title {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--studio-text);
      line-height: 1.35;
    }
    .node-detail-header .meta-subtitle {
      font-size: 11px;
      color: var(--studio-text-muted);
      margin-top: 0.2rem;
    }
    .node-detail-header-actions {
      display: flex;
      gap: 2px;
      flex-shrink: 0;
    }
    .meta-header-btn {
      border: none;
      background: transparent;
      color: #8a9bb8;
      cursor: pointer;
      font-size: 15px;
      line-height: 1;
      padding: 0.2rem 0.35rem;
      border-radius: 6px;
    }
    .meta-header-btn:hover {
      color: #e8edf7;
      background: rgba(120, 160, 220, 0.12);
    }
    .node-detail-body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 0.55rem 1rem 0.75rem;
      overscroll-behavior: contain;
    }
    .node-detail-footer {
      flex-shrink: 0;
      padding: 0.65rem 1rem 0.85rem;
      border-top: 1px solid rgba(120, 160, 220, 0.18);
      background: rgba(8, 12, 24, 0.55);
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }
    .node-tags-list {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .node-tag-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid rgba(120, 160, 220, 0.45);
      background: rgba(0, 80, 120, 0.18);
      color: #b8c8e8;
      font-size: 10px;
      line-height: 1.4;
      cursor: pointer;
      user-select: none;
    }
    .node-tag-badge:hover {
      border-color: rgba(0, 180, 255, 0.55);
      color: #e8edf7;
      background: rgba(0, 100, 160, 0.28);
    }
    .meta-row {
      display: grid;
      grid-template-columns: 92px 1fr;
      gap: 0.35rem 0.5rem;
      align-items: start;
      padding: 0.35rem 0.4rem;
      border-radius: 6px;
      margin-bottom: 0.2rem;
      font-size: 11px;
    }
    .meta-row.readonly { opacity: 0.88; }
    .meta-row.editable {
      cursor: pointer;
      border: 1px solid transparent;
    }
    .meta-row.editable:hover {
      background: rgba(0, 80, 120, 0.14);
      border-color: rgba(0, 180, 255, 0.2);
    }
    .meta-row.editing {
      background: rgba(0, 80, 120, 0.18);
      border-color: rgba(0, 180, 255, 0.35);
    }
    .meta-key {
      color: #8a9bb8;
      font-weight: 600;
    }
    .meta-value {
      color: #e8edf7;
      word-break: break-word;
      white-space: pre-wrap;
    }
    .meta-row input,
    .meta-row select,
    .meta-row textarea {
      width: 100%;
      background: rgba(8, 12, 24, 0.9);
      border: 1px solid rgba(120, 160, 220, 0.35);
      border-radius: 4px;
      color: #e8edf7;
      font-size: 11px;
      padding: 0.25rem 0.35rem;
    }
    .meta-row textarea { min-height: 48px; resize: vertical; }
    .meta-hint {
      font-size: 10px;
      color: #7a8ca8;
      margin: 0;
      padding: 0.35rem 1rem 0.45rem;
      line-height: 1.35;
      flex-shrink: 0;
      border-bottom: 1px solid rgba(120, 160, 220, 0.08);
    }
    .meta-expand-section {
      margin-top: 0.55rem;
      border: 1px solid rgba(120, 160, 220, 0.16);
      border-radius: 8px;
      background: rgba(8, 12, 24, 0.45);
      overflow: hidden;
    }
    .meta-expand-section summary {
      cursor: pointer;
      font-size: 11px;
      font-weight: 600;
      color: #b8c8e8;
      padding: 0.45rem 0.55rem;
      user-select: none;
      list-style: none;
    }
    .meta-expand-section summary::-webkit-details-marker { display: none; }
    .meta-expand-section summary::before {
      content: "▸ ";
      color: #6b9fff;
      font-size: 10px;
    }
    .meta-expand-section[open] summary::before { content: "▾ "; }
    .meta-expand-content {
      max-height: min(240px, 32vh);
      overflow-y: auto;
      padding: 0.45rem 0.55rem 0.55rem;
      font-size: 11px;
      line-height: 1.45;
      color: #e8edf7;
      white-space: pre-wrap;
      word-break: break-word;
      border-top: 1px solid rgba(120, 160, 220, 0.1);
      overscroll-behavior: contain;
    }
    .meta-expand-content.empty {
      color: #7a8ca8;
      font-style: italic;
    }
    .meta-expand-content.editable {
      cursor: pointer;
    }
    .meta-expand-content.editable:hover {
      background: rgba(0, 80, 120, 0.1);
    }
    .meta-expand-content.editing {
      background: rgba(0, 80, 120, 0.14);
      padding: 0.35rem 0.45rem;
    }
    .meta-expand-content textarea {
      width: 100%;
      min-height: 120px;
      resize: vertical;
      background: rgba(8, 12, 24, 0.9);
      border: 1px solid rgba(120, 160, 220, 0.35);
      border-radius: 4px;
      color: #e8edf7;
      font-size: 11px;
      padding: 0.35rem 0.45rem;
      line-height: 1.45;
    }
    .theme-folded-preview {
      margin-top: 0.55rem;
      min-height: 132px;
      border: 1px solid rgba(120, 160, 220, 0.16);
      border-radius: 10px;
      background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(8,12,24,0.35));
      position: relative;
      overflow: hidden;
    }
    .theme-folded-preview-inner {
      position: relative;
      width: 100%;
      height: 132px;
    }
    .theme-fold-card {
      position: absolute;
      border-radius: 8px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.22);
      padding: 8px 10px;
      width: 74px;
      height: 66px;
      box-sizing: border-box;
    }
    .theme-fold-card .fold-line {
      display: block;
      height: 4px;
      border-radius: 2px;
      margin-bottom: 6px;
      opacity: 0.38;
      background: currentColor;
    }
    .theme-fold-card .fold-line:last-child {
      width: 62%;
    }
    .theme-fold-meta {
      position: absolute;
      left: 10px;
      bottom: 8px;
      font-size: 10px;
      color: #b8c8e8;
      font-weight: 600;
    }
    .theme-fold-toggle-btn {
      width: 100%;
      margin-top: 0.45rem;
      font-size: 11px;
      padding: 0.45rem 0.6rem;
    }
    #stage-breadcrumb {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.35rem;
      width: 100%;
      padding: 0;
      border-radius: 0;
      border: none;
      background: transparent;
      color: var(--studio-text, #e8edf7);
      font-size: 12px;
      box-shadow: none;
      box-sizing: border-box;
    }
    #stage-breadcrumb[hidden] {
      display: none !important;
    }
    .stage-breadcrumb-segment {
      border: 1px solid transparent;
      background: transparent;
      color: var(--studio-primary, #5b8def);
      cursor: pointer;
      font-size: 12px;
      padding: 0.15rem 0.45rem;
      border-radius: var(--studio-radius, 8px);
      font-weight: 500;
    }
    .stage-breadcrumb-segment:hover {
      background: rgba(91, 141, 239, 0.12);
    }
    .stage-breadcrumb-segment.is-active {
      color: #fff;
      background: var(--studio-primary, #5b8def);
      border-color: transparent;
      font-weight: 600;
      cursor: pointer;
    }
    .stage-breadcrumb-sep {
      color: var(--studio-text-muted, #9aa8c4);
      user-select: none;
    }
    #stage-breadcrumb-add {
      margin-left: auto;
      flex-shrink: 0;
    }
    #stage-breadcrumb-settings {
      flex-shrink: 0;
    }
    #stage-members-list .neighbor-list,
    #stage-themes-list .neighbor-list {
      margin: 0;
      padding: 0;
    }
    .stage-delete-warning {
      color: var(--studio-danger, #e57373);
      margin-top: 0.65rem;
    }
    .stage-delete-modal-content .studio-modal-footer {
      flex-wrap: wrap;
      gap: 0.5rem;
      justify-content: flex-end;
    }
    #theme-members-list .neighbor-list {
      margin: 0;
      padding: 0;
    }
    #meta-open-editor,
    #btn-decompose-node,
    #startLinkingBtn,
    #btnSequenceMapping {
      width: 100%;
      margin-top: 0;
      font-size: 11px;
      padding: 0.45rem 0.6rem;
    }
    #btn-decompose-node {
      border-color: rgba(255, 193, 7, 0.45);
      background: rgba(255, 193, 7, 0.1);
      color: #ffe082;
    }
    #btn-decompose-node:hover:not(:disabled) {
      border-color: rgba(255, 193, 7, 0.65);
      background: rgba(255, 193, 7, 0.18);
    }
    #btn-decompose-node:disabled {
      opacity: 0.65;
      cursor: wait;
    }
    #btnSequenceMapping.active {
      border-color: rgba(107, 159, 255, 0.85);
      background: rgba(60, 100, 180, 0.35);
      color: #edf4ff;
    }
    .sequence-hop-controls {
      margin-top: 0.45rem;
      padding: 0.55rem 0.6rem;
      border-radius: 8px;
      border: 1px solid rgba(120, 160, 220, 0.18);
      background: rgba(10, 14, 28, 0.55);
    }
    .sequence-hop-title {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #7d8fad;
      margin-bottom: 0.45rem;
    }
    .sequence-hop-controls label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      color: #a8b8d4;
      margin-bottom: 0.2rem;
    }
    .sequence-hop-controls input[type="range"] {
      width: 100%;
      margin-bottom: 0.45rem;
      accent-color: #6b9fff;
    }
    body.linking-mode-active #graph-2d {
      cursor: crosshair;
    }
    @media (max-width: 1100px) {
      :root {
        --neu-distance: 4px;
        --neu-blur: 8px;
      }
      .graph-header-stack {
        top: var(--graph-header-top, 4.5rem);
      }
    }
    @media (max-width: 768px) {
      :root {
        --neu-distance: 3px;
        --neu-blur: 7px;
      }
      .graph-header-stack {
        width: calc(100vw - 2rem);
        top: var(--graph-header-top, 4.25rem);
      }
      #top-controls {
        left: 8px;
        right: 8px;
      }
      #settings-menu {
        flex-shrink: 0;
      }
      .search-center-container {
        --search-ui-font-size: 0.8125rem;
        --search-ui-padding-y: 0.5rem;
        --search-ui-padding-x: 0.75rem;
      }
      .search-filters {
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem 0.7rem;
        padding: 0.75rem 0.85rem;
      }
      #sf-reset {
        grid-column: 1 / -1;
      }
    }