.seq-visual-list>* {
      flex-shrink: 0;
    }

    .ux-modal-shell {
      background: var(--surface);
      border: 1px solid #334155;
      padding: 14px 18px;
      border-radius: 12px;
      width: 96vw;
      max-width: 1360px;
      height: 94dvh;
      max-height: 96dvh;
      min-width: 320px;
      min-height: 360px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.78);
      resize: both;
      overflow: hidden;
    }

    .ux-back-btn {
      background: #1e293b;
      color: var(--accent);
      border: 1px solid #475569;
      padding: 6px 11px;
      border-radius: 6px;
      font-size: 0.78rem;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: all 0.15s;
      white-space: nowrap;
    }

    .ux-back-btn:hover {
      background: #334155;
      border-color: var(--accent);
    }

    /* Outer Resizable Containers automatically stretch their inner children */
    #geGroupJsPanel {
      resize: vertical;
      overflow: hidden;
      min-height: 220px;
      height: 360px;
      max-height: 78dvh;
      display: none;
      flex-direction: column;
      gap: 8px;
      background: #090d16;
      border: 1.5px solid #ca8a04;
      border-radius: 8px;
      padding: 10px 12px;
      flex-shrink: 0;
    }

    #geGroupSlidesScroll {
      resize: both;
      overflow: auto;
      flex: 1;
      min-height: 220px;
      max-height: none;
      padding: 10px;
      gap: 14px;
    }

    div[id^="gslide_card_"] {
      resize: vertical;
      overflow: hidden;
      min-height: 240px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: var(--panel);
      border: 1.5px solid #334155;
      border-radius: 10px;
      padding: 12px 14px;
      flex-shrink: 0;
      transition: border-color 0.15s;
    }

    /* Compact state when an individual slide editor is collapsed */
    div[id^="gslide_card_"].collapsed-slide-card {
      min-height: 0 !important;
      height: auto !important;
      resize: none !important;
      padding: 10px 14px !important;
      gap: 0 !important;
    }

    div[id^="gslide_card_"].collapsed-slide-card .slide-card-drag-header {
      border-bottom: none !important;
      padding-bottom: 0 !important;
    }

    div[id^="sbody_"] {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    /* Auto-expanding & shrinking textareas in visual editors */
    textarea.auto-expand-textarea {
      overflow-y: hidden !important;
      resize: none !important;
      min-height: 44px;
      line-height: 1.4;
      transition: border-color 0.15s;
    }

    /* Responsive Editor Grids */
    .inline-code-split {
      flex: 1;
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 12px;
      min-height: 240px;
      height: 100%;
      align-items: stretch;
    }

    .inline-code-split textarea {
      width: 100%;
      height: 100% !important;
      min-height: 220px;
      flex: 1;
      resize: none !important;
    }

    .editor-visual-layout {
      display: grid;
      grid-template-columns: 290px 1fr;
      gap: 14px;
      align-items: stretch;
      flex: 1;
      min-height: 0;
    }

    .editor-term-row {
      display: grid;
      grid-template-columns: 1.1fr 1.8fr 1.3fr auto;
      gap: 8px;
      align-items: start;
      background: #0f172a;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid #334155;
      flex-shrink: 0;
    }

    .editor-seq-row {
      display: grid;
      grid-template-columns: 36px 1fr 1.1fr auto;
      gap: 8px;
      align-items: center;
      background: #0f172a;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid #334155;
      flex-shrink: 0;
    }

    .editor-imgcard-row {
      display: grid;
      grid-template-columns: 80px 1fr 1.1fr auto;
      gap: 8px;
      align-items: center;
      background: #0f172a;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid #334155;
      flex-shrink: 0;
    }

    /* 2-Line Pin Card so Label, Synonyms, and X/Y Coordinates never truncate */
    .editor-pin-card {
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: #0f172a;
      padding: 9px 10px;
      border-radius: 8px;
      border: 1.5px solid #334155;
      flex-shrink: 0;
      transition: border-color 0.15s, background 0.15s;
    }

    .editor-pin-card.active-pin-row {
      background: rgba(56, 189, 248, 0.1);
      border-color: var(--accent);
    }

    .editor-pin-line1 {
      display: grid;
      grid-template-columns: 32px 1fr 1.15fr auto;
      gap: 8px;
      align-items: center;
    }

    .editor-pin-line2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      padding-left: 40px;
      align-items: center;
    }

    .coord-field-wrap {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #131d31;
      border: 1px solid #334155;
      border-radius: 6px;
      padding: 3px 8px;
    }

    .coord-field-wrap span {
      font-size: 0.7rem;
      font-weight: 700;
      color: var(--accent);
      white-space: nowrap;
    }

    .coord-field-wrap input {
      border: none !important;
      background: transparent !important;
      padding: 4px 2px !important;
      width: 100%;
      font-size: 0.78rem;
      color: var(--text);
      outline: none;
    }

    .vsc-workspace-grid {
      flex: 1;
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 12px;
      min-height: 0;
      overflow: hidden;
    }

    /* Minimalist drag-reorder visual indicators */
    .ux-drag-row {
      transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
    }

    .ux-drag-row.dragging {
      opacity: 0.38;
      border-color: var(--accent) !important;
    }

    .ux-drag-row.drag-over-top {
      border-top: 2.5px solid #38bdf8 !important;
    }

    .ux-drag-row.drag-over-bottom {
      border-bottom: 2.5px solid #38bdf8 !important;
    }

    /* Authentic desktop-proportioned draggable label pin */
    .editor-drag-pin {
      position: absolute;
      width: 138px;
      min-height: 38px;
      background: rgba(15, 23, 42, 0.94);
      border: 2px solid #38bdf8;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px 8px;
      font-size: 0.78rem;
      font-weight: 700;
      line-height: 1.25;
      text-align: center;
      color: #f8fafc;
      transform: translate(-50%, -50%) scale(var(--pin-scale, 1));
      transform-origin: center center;
      cursor: grab;
      user-select: none;
      touch-action: none;
      white-space: pre-line;
      word-wrap: break-word;
      overflow-wrap: break-word;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
      z-index: 10;
    }

    .editor-drag-pin.active-pin {
      border-color: #f59e0b;
      background: rgba(30, 41, 59, 0.98);
      color: #fde047;
      box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.45), 0 4px 12px rgba(0, 0, 0, 0.65);
      z-index: 25;
    }

    .editor-drag-pin:active {
      cursor: grabbing;
    }

    .editor-pin-num {
      position: absolute;
      top: -10px;
      left: -6px;
      background: #0f172a;
      color: #38bdf8;
      border: 1px solid #38bdf8;
      border-radius: 4px;
      padding: 0 5px;
      font-size: 0.62rem;
      font-weight: 800;
      line-height: 1.3;
      pointer-events: none;
    }

    .editor-drag-pin.active-pin .editor-pin-num {
      background: #f59e0b;
      color: #090d16;
      border-color: #fff;
    }

    /* Draggable pointer target tip handle (bullseye) on the diagram canvas */
    .editor-drag-tip {
      position: absolute;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: rgba(14, 165, 233, 0.28);
      border: 2px solid #38bdf8;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translate(-50%, -50%) scale(var(--pin-scale, 1));
      transform-origin: center center;
      cursor: crosshair;
      user-select: none;
      touch-action: none;
      box-shadow: 0 0 0 2px rgba(9, 13, 22, 0.85), 0 2px 8px rgba(0, 0, 0, 0.65);
      z-index: 18;
    }

    .editor-drag-tip::after {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #38bdf8;
    }

    .editor-drag-tip.active-pin {
      border-color: #f59e0b;
      background: rgba(245, 158, 11, 0.35);
      box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.45), 0 3px 10px rgba(0, 0, 0, 0.75);
      z-index: 28;
    }

    .editor-drag-tip.active-pin::after {
      background: #fde047;
    }

    .editor-tip-num {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: #090d16;
      color: #38bdf8;
      border: 1px solid #38bdf8;
      border-radius: 4px;
      padding: 0 4px;
      font-size: 0.56rem;
      font-weight: 800;
      line-height: 1.2;
      pointer-events: none;
      white-space: nowrap;
    }

    .editor-drag-tip.active-pin .editor-tip-num {
      background: #f59e0b;
      color: #090d16;
      border-color: #fff;
    }

    /* ===================================================================== */
    /* TABLET & MOBILE RESPONSIVE BREAKPOINTS FOR ALL 3 MANAGERS             */
    /* ===================================================================== */
    @media (max-width: 900px) {
      .ux-modal-shell {
        width: 98vw !important;
        height: 96dvh !important;
        max-height: 98dvh !important;
        min-width: 0 !important;
        padding: 10px 12px !important;
        resize: none !important;
      }

      .editor-visual-layout {
        grid-template-columns: 1fr;
      }

      .inline-code-split,
      .vsc-workspace-grid {
        grid-template-columns: 1fr;
        overflow-y: auto;
      }

      .editor-term-row {
        grid-template-columns: 1fr auto;
      }

      .editor-term-row textarea,
      .editor-term-row input:nth-of-type(2) {
        grid-column: 1 / -1;
      }

      .editor-pin-line1 {
        grid-template-columns: 32px 1fr auto;
      }

      .editor-pin-line1 .pin-syn-input {
        grid-column: 1 / -1;
      }

      .editor-pin-line2 {
        padding-left: 0;
      }
    }

    @media (max-width: 640px) {
      .seq-item-card {
        flex-wrap: wrap;
        gap: 8px;
      }

      .seq-item-controls {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
      }

      .editor-seq-row {
        grid-template-columns: 32px 1fr auto;
      }

      .editor-seq-row .seq-syn-input {
        grid-column: 1 / -1;
      }

      .editor-imgcard-row {
        grid-template-columns: 72px 1fr auto;
      }

      .editor-imgcard-row .card-lbl-input {
        grid-column: 1 / -1;
      }

      .editor-pin-line2 {
        grid-template-columns: 1fr;
      }

      .ux-modal-footer {
        flex-direction: column-reverse;
        align-items: stretch !important;
      }

      .ux-modal-footer>div,
      .ux-modal-footer>button {
        width: 100%;
        justify-content: center;
      }
    }