:root {
      --bg: #070b11;
      --shell: #0c111a;
      --panel: #111822;
      --panel-2: #0f1621;
      --act: #101d2d;
      --sequence: #132235;
      --sequence-soft: #101a29;
      --scene: #1a2636;
      --scene-border: #30445e;
      --text: #e6edf7;
      --muted: #8b98a8;
      --line: #273447;
      --accent: #3b82f6;
      --accent-soft: rgba(59, 130, 246, 0.18);
      --good: #22c55e;
      --warn: #eab308;
      --pink: #ec4899;
      --cyan: #06b6d4;
      --bench: #64748b;
      --danger: #ef4444;
      --radius: 6px;
      --scene-w: 132px;
      --scene-h: 74px;
      --loose-scene-w: 92px;
      --loose-scene-h: 52px;
    }

:root[data-theme="light"] {
      --accent: var(--m2p-accent);
      --danger: #a5483d;
    }

    * { box-sizing: border-box; }

    .tabs {
      display: flex;
      padding: 14px 14px 0;
      gap: 8px;
      border-bottom: 1px solid var(--line);
    }

    .tab {
      flex: 1;
      border: 0;
      background: transparent;
      color: var(--muted);
      padding: 10px;
      border-bottom: 2px solid transparent;
      font-weight: 700;
      cursor: pointer;
    }

    .tab.is-active {
      color: var(--text);
      border-color: var(--accent);
    }

    .source-list {
      overflow: auto;
      padding: 12px 14px 20px;
      display: grid;
      gap: 10px;
      align-content: start;
    }

    .mini-search {
      border: 1px solid var(--line);
      background: #0d141e;
      border-radius: 4px;
      padding: 9px 10px;
      color: var(--muted);
      font-size: 13px;
      margin-bottom: 4px;
    }

    .idea-card {
      border: 1px solid #263548;
      background: linear-gradient(180deg, #121c2a, #0e1622);
      border-radius: 5px;
      padding: 10px;
      min-height: 76px;
      cursor: grab;
      position: relative;
      transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
    }

    .idea-card:active { cursor: grabbing; }

    .idea-card:hover {
      border-color: #3c526f;
      transform: translateY(-1px);
    }

    .idea-card[data-kind="theme"] { border-left: 3px solid #22c55e; }
    .idea-card[data-kind="conflict"] { border-left: 3px solid #ef4444; }
    .idea-card[data-kind="premise"] { border-left: 3px solid #eab308; }
    .idea-card[data-kind="joke"] { border-left: 3px solid #a855f7; }

    .idea-type {
      display: inline-block;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.04em;
      color: #a6b7cc;
      padding: 2px 6px;
      border-radius: 6px;
      border: 1px solid #34475e;
      margin-bottom: 6px;
    }

    .idea-title {
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 4px;
    }

    .idea-desc {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.25;
    }

    .bench-zone {
      border: 1px dashed #39485d;
      background: rgba(100, 116, 139, 0.08);
      border-radius: 6px;
      padding: 14px;
      min-height: 100px;
      transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
    }

    .bench-zone.is-targeted {
      border-color: var(--bench);
      background: rgba(100, 116, 139, 0.22);
      transform: scale(1.01);
    }

    .canvas-shell {
      min-width: 0;
      overflow: auto;
      padding: 8px 16px 36px;
      background: linear-gradient(180deg, rgba(10, 15, 22, 0.98), rgba(7, 11, 17, 0.98));
      position: relative;
    }

    .episode-header {
      border: 1px solid transparent;
      border-bottom-color: var(--line);
      padding: 0 0 14px;
      margin-bottom: 12px;
      cursor: pointer;
    }

    .episode-title {
      font-size: 22px;
      font-weight: 850;
    }

    .episode-meta {
      color: var(--muted);
      margin-top: 4px;
      font-size: 13px;
    }

    .episode-header.is-targeted {
      border-color: var(--cyan);
      background: rgba(6, 182, 212, 0.12);
      border-radius: 6px;
      padding: 10px;
    }

    .section-label {
      color: #a8b3c4;
      font-weight: 800;
      letter-spacing: 0.06em;
      font-size: 12px;
      margin: 12px 0 8px;
      text-transform: uppercase;
    }

    .unassigned-zone {
      border: 1px dashed #324156;
      background: rgba(15, 23, 42, 0.45);
      border-radius: 6px;
      padding: 10px;
      margin-bottom: 14px;
      min-height: 70px;
    }

    .sequence-unassigned {
      min-height: 52px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .unassigned-scenes-row,
    .loose-scenes-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      column-gap: 10px;
      row-gap: 10px;
      min-height: 62px;
      padding: 0;
      transition:
        background 120ms ease,
        box-shadow 120ms ease,
        outline-color 120ms ease;
      border-radius: 5px;
    }

    body.dragging-scene .unassigned-scenes-row.is-targeted,
    body.dragging-scene .loose-scenes-row.is-targeted,
    body.dragging-idea .unassigned-scenes-row.is-targeted,
    body.dragging-idea .loose-scenes-row.is-targeted {
      column-gap: 18px;
      row-gap: 10px;
      padding: 0;
      background: rgba(59, 130, 246, 0.10);
      box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.28), 0 0 0 1px rgba(59, 130, 246, 0.16);
    }

    body.dragging-scene .unassigned-scenes-row > .scene,
    body.dragging-scene .loose-scenes-row > .scene {
      transform: scale(0.97) translateY(1px);
    }

    body.dragging-scene .unassigned-scenes-row.is-targeted > .scene,
    body.dragging-scene .loose-scenes-row.is-targeted > .scene {
      transform: scale(0.955) translateY(1px);
    }

    .act {
      position: relative;
      border: 1px solid #34629b;
      background: rgba(16, 29, 45, 0.42);
      border-radius: 4px;
      padding: 12px 12px 14px 32px;
      margin: 14px 0;
    }

    .act::before {
      content: "";
      position: absolute;
      left: 10px;
      top: 44px;
      bottom: 16px;
      width: 12px;
      border-radius: 4px;
      background: #1f3452;
    }

    .act-header {
      font-size: 13px;
      color: #d9e6f8;
      font-weight: 800;
      letter-spacing: 0.02em;
      margin-bottom: 12px;
      padding: 4px 8px;
      border-radius: 4px;
    }

    .act-header.is-targeted {
      outline: 1px solid var(--cyan);
      background: rgba(6, 182, 212, 0.12);
    }

    .sequence {
      position: relative;
      width: 100%;
      border: 1px solid #263b57;
      background: linear-gradient(180deg, rgba(19, 34, 53, 0.88), rgba(15, 26, 41, 0.88));
      border-radius: 5px;
      margin: 12px 0;
      padding: 10px;
      transition: transform 150ms ease, border-color 120ms ease, background 120ms ease, margin 150ms ease;
    }

    .sequence.is-targeted {
      border-color: var(--pink);
      background: rgba(236, 72, 153, 0.12);
    }

    body.dragging-sequence .storyboard-dnd-root {
      --scene-w: 78px;
      --scene-h: 32px;
      --loose-scene-w: 58px;
      --loose-scene-h: 26px;
    }

    body.dragging-sequence .storyboard-dnd-root .sequence {
      margin: 6px 0;
      padding: 6px 8px;
    }

    body.dragging-sequence .storyboard-dnd-root .act {
      margin: 8px 0;
      padding: 8px 8px 10px 24px;
    }

    body.dragging-sequence .storyboard-dnd-root .act::before {
      top: 34px;
      bottom: 10px;
      width: 8px;
    }

    body.dragging-sequence .storyboard-dnd-root .act-header {
      margin-bottom: 6px;
      padding: 3px 6px;
      font-size: 11px;
    }

    body.dragging-sequence .storyboard-dnd-root .section-label {
      margin: 8px 0 5px;
      font-size: 10px;
    }

    body.dragging-sequence .storyboard-dnd-root .unassigned-zone {
      min-height: 42px;
      margin-bottom: 8px;
      padding: 6px;
    }

    body.dragging-sequence .storyboard-dnd-root .unassigned-scenes-row,
    body.dragging-sequence .storyboard-dnd-root .loose-scenes-row {
      column-gap: 5px;
      row-gap: 5px;
      min-height: 38px;
    }

    body.dragging-sequence .storyboard-dnd-root .sequence-header {
      margin-bottom: 4px;
      font-size: 11px;
      line-height: 1.15;
    }

    body.dragging-sequence .storyboard-dnd-root .sequence-meta {
      font-size: 10px;
    }

    body.dragging-sequence .storyboard-dnd-root .scene-list {
      gap: 5px;
      min-height: 42px;
    }

    body.dragging-sequence .storyboard-dnd-root .scene-name {
      padding: 3px 5px 4px;
      font-size: 10px;
    }

    body.dragging-sequence .storyboard-dnd-root .add-inline {
      min-height: 40px;
      min-width: 84px;
      font-size: 10px;
    }

    .sequence-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      font-weight: 800;
      font-size: 13px;
    }

    .sequence-meta {
      color: var(--muted);
      font-weight: 650;
      font-size: 12px;
    }

    .scene-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: flex-start;
      min-height: calc(var(--scene-h) + 34px);
      padding: 0;
      transition: background 120ms ease, box-shadow 120ms ease, outline-color 120ms ease;
      border-radius: 5px;
    }

    .scene-list.is-targeted {
      background: rgba(59, 130, 246, 0.10);
      box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.26);
    }

    .scene {
      width: var(--scene-w);
      flex: 0 0 var(--scene-w);
      border: 1px solid var(--scene-border);
      background: linear-gradient(180deg, #243248, #121a29);
      border-radius: 4px;
      overflow: hidden;
      cursor: grab;
      transition: transform 160ms ease, opacity 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
    }

    .scene:hover {
      border-color: #5d7aa3;
      transform: translateY(-1px);
    }

    .scene.is-targeted {
      border-color: var(--warn);
      box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.55), 0 0 18px rgba(234, 179, 8, 0.16);
      background: linear-gradient(180deg, rgba(234, 179, 8, 0.16), #121a29);
    }

    .scene-thumb {
      height: var(--scene-h);
      background:
        linear-gradient(135deg, rgba(255,255,255,0.12), rgba(0,0,0,0.08)),
        repeating-linear-gradient(45deg, #29384f 0 8px, #213048 8px 16px);
      display: grid;
      place-items: center;
      color: #8fa0b7;
      font-weight: 800;
      font-size: 12px;
    }

    .scene-name {
      padding: 6px 7px 7px;
      font-size: 12px;
      font-weight: 750;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .scene-small {
      width: var(--loose-scene-w);
      flex-basis: var(--loose-scene-w);
      opacity: 0.78;
    }

    .scene-small .scene-thumb {
      height: var(--loose-scene-h);
      font-size: 10px;
    }

    .scene-small .scene-name {
      font-size: 10px;
      padding: 4px 5px 5px;
    }

    .add-inline {
      display: grid;
      place-items: center;
      align-self: stretch;
      min-height: 70px;
      min-width: 130px;
      border: 1px dashed #3c4d63;
      border-radius: 4px;
      color: #b8c3d2;
      font-size: 12px;
      background: rgba(15, 23, 42, 0.20);
    }

    .add-sequence {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #9ca9b9;
      font-size: 12px;
      margin: 10px 0 4px;
    }

    .add-sequence::before,
    .add-sequence::after {
      content: "";
      height: 1px;
      background: #263447;
      flex: 1;
    }

    .add-sequence span {
      border: 1px dashed #3c4d63;
      border-radius: 6px;
      padding: 6px 12px;
    }

    .fake-field {
      border: 1px solid #27364a;
      background: #0a1018;
      border-radius: 4px;
      padding: 9px 10px;
      color: #b6c3d4;
      margin: 8px 0;
      font-size: 12px;
    }

    .dnd-ghost {
      position: fixed;
      z-index: 9999;
      pointer-events: none;
      opacity: 0.88;
      transform: translate(-50%, -50%) rotate(1deg);
      filter: drop-shadow(0 18px 28px rgba(0,0,0,0.45));
    }

    .dnd-source-hidden {
      opacity: 0.18 !important;
    }

    .dnd-placeholder {
      border: 1px solid var(--accent);
      background:
        linear-gradient(180deg, rgba(96, 165, 250, 0.20), rgba(59, 130, 246, 0.10)),
        var(--accent-soft);
      border-radius: 4px;
      box-shadow: inset 0 0 0 1px rgba(191, 219, 254, 0.16), 0 0 18px rgba(59, 130, 246, 0.16);
      transition: opacity 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
      flex: 0 0 var(--scene-w);
      width: var(--scene-w);
      max-width: var(--scene-w);
      min-width: var(--scene-w);
      height: calc(var(--scene-h) + 31px);
      max-height: calc(var(--scene-h) + 31px);
      margin: 0;
      overflow: hidden;
    }

    .dnd-placeholder.sequence-placeholder {
      height: 94px;
      width: 100%;
      max-width: none;
      min-width: 0;
      flex: 0 0 auto;
      margin: 12px 0;
      border-radius: 5px;
    }

    .dnd-placeholder.small-placeholder {
      width: var(--loose-scene-w);
      max-width: var(--loose-scene-w);
      min-width: var(--loose-scene-w);
      flex-basis: var(--loose-scene-w);
      height: calc(var(--loose-scene-h) + 24px);
      max-height: calc(var(--loose-scene-h) + 24px);
    }

    .dnd-intent-label {
      position: fixed;
      z-index: 10000;
      pointer-events: none;
      padding: 6px 9px;
      background: #0b1220;
      border: 1px solid #3a4f6c;
      border-radius: 6px;
      color: #dbeafe;
      font-size: 12px;
      font-weight: 750;
      box-shadow: 0 8px 18px rgba(0,0,0,0.35);
      transform: translate(12px, 12px);
    }

    .dragging-active .drop-dim {
      opacity: 0.48;
    }

    .hint {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
      padding: 10px 14px 0;
    }

    /* Keep scene drop feedback visual-only during scene drags to avoid scroll drift. */
    body.dragging-scene .act > .sequence > .scene-list {
      display: flex !important;
      flex-wrap: wrap !important;
      column-gap: 10px !important;
      row-gap: 10px !important;
      padding: 0 !important;
      transition:
        background 120ms ease,
        box-shadow 120ms ease,
        outline-color 120ms ease !important;
    }

    body.dragging-scene .act > .sequence > .scene-list.is-targeted {
      column-gap: 22px !important;
      row-gap: 10px !important;
      padding: 0 !important;
      background: rgba(59, 130, 246, 0.12);
      box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.30), 0 0 0 1px rgba(59, 130, 246, 0.14);
    }

    body.dragging-scene .act > .sequence > .scene-list .dnd-placeholder,
    body.dragging-idea .act > .sequence > .scene-list .dnd-placeholder {
      flex: 0 0 var(--scene-w) !important;
      width: var(--scene-w) !important;
      max-width: var(--scene-w) !important;
      min-width: var(--scene-w) !important;
      height: calc(var(--scene-h) + 31px) !important;
      max-height: calc(var(--scene-h) + 31px) !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    body.dragging-idea .storyboard-dnd-root {
      --scene-drag-gap: 46px;
      --insert-bar-width: 20px;
      --insert-bar-overlap: -33px;
      --insert-bar-overlap: calc((var(--scene-drag-gap) + var(--insert-bar-width)) / -2);
    }

    body.dragging-idea .act > .sequence > .scene-list {
      display: flex !important;
      flex-wrap: wrap !important;
      column-gap: var(--scene-drag-gap) !important;
      row-gap: 10px !important;
      padding: 4px !important;
      transition:
        column-gap 170ms cubic-bezier(.2, .8, .2, 1),
        padding 170ms cubic-bezier(.2, .8, .2, 1),
        background 120ms ease,
        box-shadow 120ms ease !important;
    }

    body.dragging-idea .act > .sequence > .scene-list.is-targeted {
      column-gap: var(--scene-drag-gap) !important;
      row-gap: 10px !important;
      padding: 4px !important;
      background: rgba(59, 130, 246, 0.12);
      box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.30), 0 0 0 1px rgba(59, 130, 246, 0.14);
    }

    body.dragging-idea .unassigned-scenes-row,
    body.dragging-idea .loose-scenes-row {
      column-gap: var(--scene-drag-gap) !important;
      row-gap: 10px !important;
      padding: 0 !important;
    }

    body.dragging-idea .unassigned-scenes-row.is-targeted,
    body.dragging-idea .loose-scenes-row.is-targeted {
      column-gap: var(--scene-drag-gap) !important;
      row-gap: 10px !important;
      padding: 0 !important;
    }

    body.dragging-idea .act > .sequence > .scene-list .dnd-placeholder,
    body.dragging-idea .unassigned-scenes-row .dnd-placeholder,
    body.dragging-idea .loose-scenes-row .dnd-placeholder {
      flex: 0 0 var(--insert-bar-width) !important;
      width: var(--insert-bar-width) !important;
      max-width: var(--insert-bar-width) !important;
      min-width: var(--insert-bar-width) !important;
      height: calc(var(--scene-h) + 31px) !important;
      max-height: calc(var(--scene-h) + 31px) !important;
      margin-left: var(--insert-bar-overlap) !important;
      margin-right: var(--insert-bar-overlap) !important;
      border-color: rgba(96, 165, 250, 0.95) !important;
      background: linear-gradient(180deg, rgba(96, 165, 250, 0.92), rgba(37, 99, 235, 0.86)) !important;
      box-shadow: 0 0 0 1px rgba(191, 219, 254, 0.28), 0 0 18px rgba(59, 130, 246, 0.34) !important;
    }

    body.dragging-idea .unassigned-scenes-row .dnd-placeholder.small-placeholder,
    body.dragging-idea .loose-scenes-row .dnd-placeholder.small-placeholder {
      flex-basis: var(--insert-bar-width) !important;
      width: var(--insert-bar-width) !important;
      max-width: var(--insert-bar-width) !important;
      min-width: var(--insert-bar-width) !important;
      height: calc(var(--loose-scene-h) + 24px) !important;
      max-height: calc(var(--loose-scene-h) + 24px) !important;
      margin-left: var(--insert-bar-overlap) !important;
      margin-right: var(--insert-bar-overlap) !important;
    }

    body.dragging-active .unassigned-scenes-row .dnd-placeholder,
    body.dragging-active .loose-scenes-row .dnd-placeholder {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    body.dragging-active .unassigned-scenes-row .dnd-placeholder.small-placeholder,
    body.dragging-active .loose-scenes-row .dnd-placeholder.small-placeholder {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    body.dragging-idea .unassigned-scenes-row .dnd-placeholder,
    body.dragging-idea .loose-scenes-row .dnd-placeholder,
    body.dragging-idea .unassigned-scenes-row .dnd-placeholder.small-placeholder,
    body.dragging-idea .loose-scenes-row .dnd-placeholder.small-placeholder {
      margin-left: var(--insert-bar-overlap) !important;
      margin-right: var(--insert-bar-overlap) !important;
    }


    .sequence-drop-gap {
      height: 20px;
      min-height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 2px 0;
      border-radius: 4px;
      position: relative;
      transition:
        background 160ms ease,
        box-shadow 160ms ease;
      color: transparent;
      font-size: 12px;
      font-weight: 700;
      overflow: hidden;
    }

    .sequence-drop-gap::before {
      content: "";
      display: block;
      width: 100%;
      height: 1px;
      background: rgba(60, 77, 99, 0.55);
      transition: background 160ms ease, height 160ms ease, opacity 160ms ease;
    }

    body.dragging-active .sequence-drop-gap {
      background: rgba(59, 130, 246, 0.045);
    }

    body.dragging-active .sequence-drop-gap.is-targeted {
      height: 20px;
      min-height: 20px;
      background: rgba(59, 130, 246, 0.13);
      box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.28), 0 0 18px rgba(59, 130, 246, 0.22);
      color: #dbeafe;
    }

    body.dragging-active .sequence-drop-gap.is-targeted::before {
      opacity: 1;
      height: 3px;
      background: rgba(96, 165, 250, 0.95);
    }

    body.dragging-active .add-sequence {
      min-height: 28px;
      margin: 4px 0;
      border-radius: 4px;
      background: rgba(59, 130, 246, 0.045);
      transition:
        background 160ms ease,
        box-shadow 160ms ease;
    }

    body.dragging-active .add-sequence.is-targeted {
      min-height: 28px;
      background: rgba(59, 130, 246, 0.13);
      box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.28), 0 0 18px rgba(59, 130, 246, 0.18);
    }

    body.dragging-active .add-sequence.is-targeted::before,
    body.dragging-active .add-sequence.is-targeted::after {
      background: rgba(59, 130, 246, 0.9);
    }


    body.dragging-active .sequence-drop-gap.is-sequence-noop-gap {
      height: 0 !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      opacity: 0 !important;
      pointer-events: none !important;
      overflow: hidden !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    body.dragging-active .sequence-drop-gap.is-sequence-noop-gap::before {
      opacity: 0 !important;
    }


    /* Sequence drag ghost: thin one-row filmstrip instead of full sequence clone.
       The real sequence remains full-width in the map; only the floating ghost is simplified. */
    .dnd-ghost[data-dnd-type="sequence"] {
      width: auto !important;
      min-width: 260px !important;
      max-width: 680px !important;
      height: 74px !important;
      padding: 8px 10px !important;
      opacity: 0.86;
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      overflow: hidden !important;
    }

    .dnd-ghost[data-dnd-type="sequence"] .sequence-header {
      flex: 0 0 150px !important;
      margin: 0 !important;
      display: block !important;
      font-size: 12px !important;
      line-height: 1.15 !important;
      overflow: hidden !important;
    }

    .dnd-ghost[data-dnd-type="sequence"] .sequence-header span:first-child {
      display: block !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      margin-bottom: 4px !important;
    }

    .dnd-ghost[data-dnd-type="sequence"] .sequence-meta {
      display: block !important;
      font-size: 10px !important;
      opacity: 0.75 !important;
      white-space: nowrap !important;
    }

    .dnd-ghost[data-dnd-type="sequence"] .scene-list {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      height: 50px !important;
      max-height: 50px !important;
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: 6px !important;
      padding: 0 !important;
      overflow: hidden !important;
      background: transparent !important;
    }

    .dnd-ghost[data-dnd-type="sequence"] .scene {
      width: 62px !important;
      flex: 0 0 62px !important;
      height: 48px !important;
      border-radius: 3px !important;
      opacity: 0.92 !important;
    }

    .dnd-ghost[data-dnd-type="sequence"] .scene-thumb {
      height: 36px !important;
      font-size: 9px !important;
    }

    .dnd-ghost[data-dnd-type="sequence"] .scene-name {
      height: 12px !important;
      font-size: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

    .dnd-ghost[data-dnd-type="sequence"] .add-inline {
      display: none !important;
    }

    body.app-shell-body {
      overflow: auto;
      user-select: auto;
      background: var(--shell-bg);
    }

    body.app-shell-body.dragging-active {
      user-select: none;
    }

    .storyboard-dnd-root {
      min-width: 0;
      min-height: 0;
      user-select: none;
    }

    .storyboard-dnd-root .explorer-shell {
      min-height: calc(100vh - var(--shell-header-height));
    }

    .storyboard-source-panel {
      display: grid;
      min-width: 0;
      gap: 10px;
    }

    .storyboard-source-panel .source-list {
      max-height: calc(100vh - var(--shell-header-height) - 104px);
      padding: 0;
    }

    .storyboard-dnd-root .canvas-shell {
      height: calc(100vh - var(--shell-header-height) - 20px);
      min-height: 0;
    }

    .storyboard-inspector {
      display: grid;
      gap: 14px;
    }

    .storyboard-inspector__header,
    .storyboard-inspector__section {
      display: grid;
      gap: 8px;
    }

    .storyboard-inspector__section {
      padding-top: 12px;
      border-top: 1px solid var(--shell-line);
    }

:root[data-theme="light"] .storyboard-dnd-root {
      --bg: var(--m2p-bg-app);
      --shell: var(--m2p-bg-surface);
      --panel: var(--m2p-bg-surface);
      --panel-2: var(--m2p-bg-surface-muted);
      --act: var(--m2p-bg-surface);
      --sequence: var(--m2p-bg-surface);
      --sequence-soft: var(--m2p-bg-surface-muted);
      --scene: var(--m2p-bg-surface);
      --scene-border: var(--m2p-border-subtle);
      --text: var(--m2p-text-primary);
      --muted: var(--m2p-text-muted);
      --line: var(--m2p-border-subtle);
      --accent: var(--m2p-accent);
      --accent-soft: var(--m2p-accent-soft);
      --bench: var(--m2p-text-muted);
      --danger: var(--danger);
    }

:root[data-theme="light"] .storyboard-dnd-root .mini-search,
:root[data-theme="light"] .storyboard-dnd-root .fake-field,
:root[data-theme="light"] .storyboard-dnd-root .dnd-intent-label {
      border-color: var(--m2p-border-subtle);
      background: var(--m2p-bg-surface);
      color: var(--m2p-text-secondary);
    }

:root[data-theme="light"] .storyboard-dnd-root .idea-card,
:root[data-theme="light"] .storyboard-dnd-root .scene,
:root[data-theme="light"] .storyboard-dnd-root .sequence {
      border-color: var(--m2p-border-subtle);
      background: var(--m2p-bg-surface);
      color: var(--m2p-text-primary);
    }

:root[data-theme="light"] .storyboard-dnd-root .idea-card:hover,
:root[data-theme="light"] .storyboard-dnd-root .scene:hover {
      border-color: var(--m2p-border-strong);
      background: var(--m2p-bg-surface-hover);
    }

:root[data-theme="light"] .storyboard-dnd-root .idea-type,
:root[data-theme="light"] .storyboard-dnd-root .section-label,
:root[data-theme="light"] .storyboard-dnd-root .scene-name,
:root[data-theme="light"] .storyboard-dnd-root .hint {
      color: var(--m2p-text-muted);
    }

:root[data-theme="light"] .storyboard-dnd-root .bench-zone,
:root[data-theme="light"] .storyboard-dnd-root .unassigned-zone,
:root[data-theme="light"] .storyboard-dnd-root .unassigned-scenes-row,
:root[data-theme="light"] .storyboard-dnd-root .loose-scenes-row,
:root[data-theme="light"] .storyboard-dnd-root .scene-list,
:root[data-theme="light"] .storyboard-dnd-root .add-sequence {
      border-color: var(--m2p-border-subtle);
      background: var(--m2p-bg-surface-muted);
    }

:root[data-theme="light"] .storyboard-dnd-root .canvas-shell,
:root[data-theme="light"] .storyboard-dnd-root .act {
      border-color: var(--m2p-border-subtle);
      background: var(--m2p-bg-app);
    }

:root[data-theme="light"] .storyboard-dnd-root .episode-header,
:root[data-theme="light"] .storyboard-dnd-root .act-header,
:root[data-theme="light"] .storyboard-dnd-root .sequence-header,
:root[data-theme="light"] .storyboard-dnd-root .scene-thumb {
      border-color: var(--m2p-border-subtle);
      background: var(--m2p-bg-surface-muted);
      color: var(--m2p-text-primary);
    }

:root[data-theme="light"] .storyboard-dnd-root .scene-list.is-targeted,
:root[data-theme="light"] .storyboard-dnd-root .bench-zone.is-targeted,
:root[data-theme="light"] .storyboard-dnd-root .episode-header.is-targeted,
:root[data-theme="light"] .storyboard-dnd-root .act-header.is-targeted,
:root[data-theme="light"] .storyboard-dnd-root .sequence.is-targeted,
:root[data-theme="light"] .storyboard-dnd-root .scene.is-targeted {
      border-color: var(--m2p-selected-border);
      background: var(--m2p-selected-bg);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m2p-selected-border) 38%, transparent);
    }

:root[data-theme="light"] .storyboard-dnd-root .dnd-placeholder,
:root[data-theme="light"] .storyboard-dnd-root .sequence-drop-gap {
      border-color: var(--m2p-accent-border);
      background: var(--m2p-accent-soft);
      color: var(--m2p-accent-hover);
    }