:root {
      --ink: #111827;
      --muted: #6b7280;
      --softborder: #9ca3af;
      --divider: #d1d5db;
      --pagebg: #f6f7f9;
      --slotbg: #f3f4f6;
      --panelbg: #ffffff;
      --previewbg: #fdfdfe;
      --placeholderbg: #f9fafb;
      --shadow: 0 16px 30px rgba(17, 24, 39, 0.16);
      --topbar-h: clamp(58px, 6.4vh, 70px);
      --timeline-h: clamp(172px, 18.8vh, 212px);
      --gap: clamp(12px, 1.35vw, 24px);
      --pad: clamp(14px, 1.55vw, 30px);
      --filter-handle-w: 42px;
      --filter-panel-w: min(340px, calc(100vw - 64px));
      --right-panel-w: clamp(410px, 27vw, 560px);
    }

    * { box-sizing: border-box; }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      background: var(--pagebg);
      color: var(--ink);
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    button,
    input { font: inherit; color: inherit; }
    button { cursor: pointer; }

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

    .v-text {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      letter-spacing: .02em;
    }

    .app-root {
      width: 100vw;
      height: 100vh;
      display: grid;
      grid-template-rows: var(--topbar-h) minmax(0, 1fr);
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255,255,255,.55), rgba(246,247,249,.2) 38%, rgba(246,247,249,1)),
        var(--pagebg);
    }

    .topbar {
      position: relative;
      z-index: 60;
      display: grid;
      grid-template-columns: minmax(220px, 1.1fr) minmax(220px, .9fr) minmax(250px, 1fr) auto auto;
      align-items: center;
      gap: clamp(8px, 1vw, 16px);
      padding: 0 var(--pad);
      border-bottom: 2px solid var(--ink);
      background: var(--panelbg);
    }

    .topbar-slot {
      min-width: 0;
      height: clamp(34px, 3.8vh, 40px);
      display: flex;
      align-items: center;
      border: 1px solid var(--muted);
      border-radius: 4px;
      background: var(--slotbg);
      padding: 0 clamp(10px, 1vw, 16px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .brand {
      font-size: clamp(16px, 1.06vw, 20px);
      font-weight: 800;
      letter-spacing: .01em;
    }

    .meta {
      font-size: clamp(12px, .8vw, 14px);
      font-weight: 600;
    }

    .mode-btn,
    .panel-btn {
      min-height: clamp(34px, 3.8vh, 40px);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #374151;
      border-radius: 4px;
      background: var(--placeholderbg);
      padding: 0 clamp(12px, 1vw, 18px);
      color: var(--ink);
      font-size: clamp(12px, .82vw, 14px);
      font-weight: 700;
      white-space: nowrap;
    }

    .mode-btn[aria-pressed="true"] {
      border-color: var(--ink);
      background: var(--divider);
      font-weight: 800;
    }

    #stage {
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-rows: minmax(0, 1fr) var(--timeline-h);
      gap: var(--gap);
      padding: var(--pad) calc(var(--pad) + var(--filter-handle-w) + 6px) var(--pad) var(--pad);
      overflow: hidden;
      transition: padding-right 260ms ease-out;
    }

    /* 节点筛选是浮层弹窗：展开时不改变页面布局，只覆盖右侧缓冲区。 */

    .workspace {
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(560px, 1fr) minmax(410px, var(--right-panel-w));
      gap: var(--gap);
      align-items: start;
    }

    .panel {
      min-width: 0;
      min-height: 0;
      border: 2px solid var(--ink);
      background: var(--panelbg);
    }

    #previewViewport {
      position: relative;
      display: grid;
      grid-template-rows: clamp(66px, 7.2vh, 92px) minmax(0, 1fr);
      overflow: hidden;
      background: var(--previewbg);
      aspect-ratio: 16 / 9;
      width: 100%;
      max-height: 100%;
      align-self: start;
      justify-self: start;
    }

    /* 中间主视觉框：在可用区域内尽可能大，但永远保持 16:9，避免窗口变化时被拉伸变形。 */
    @supports (width: calc(100px * 2)) {
      #previewViewport {
        width: min(
          100%,
          calc((100vh - var(--topbar-h) - var(--timeline-h) - var(--gap) - var(--pad) - var(--pad)) * 16 / 9)
        );
      }
    }

    .preview-head {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: clamp(14px, 1.35vw, 22px) clamp(18px, 2.1vw, 38px) 0;
      pointer-events: none;
    }

    .preview-title-box {
      min-width: min(100%, 340px);
      min-height: clamp(42px, 4.8vh, 54px);
      display: flex;
      align-items: center;
      border: 1px solid var(--muted);
      border-radius: 4px;
      background: var(--slotbg);
      padding: 0 clamp(14px, 1.4vw, 22px);
    }

    #previewModeTitle {
      font-size: clamp(18px, 1.32vw, 24px);
      font-weight: 800;
      line-height: 1;
    }

    .preview-hint {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #4b5563;
      font-size: clamp(11px, .72vw, 13px);
      white-space: nowrap;
    }

    .hint-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--ink);
      opacity: .75;
    }

    #previewScroll {
      position: relative;
      min-width: 0;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0 clamp(18px, 2.1vw, 38px) clamp(18px, 2.1vw, 36px);
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    #previewScroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

    #shotGrid {
      min-height: 100%;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 322px), 1fr));
      gap: clamp(14px, 1.45vw, 28px);
      align-content: start;
      padding-bottom: 4px;
    }

    .shot-card {
      position: relative;
      min-width: 0;
      aspect-ratio: 420 / 236;
      min-height: 188px;
      border: 2px solid var(--ink);
      border-radius: 4px;
      background: var(--panelbg);
      overflow: hidden;
    }

    .shot-card.is-active {
      outline: 3px solid var(--ink);
      outline-offset: -7px;
    }

    .shot-tag {
      position: absolute;
      top: clamp(10px, 1vw, 14px);
      min-height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--muted);
      border-radius: 3px;
      background: var(--slotbg);
      padding: 0 8px;
      font-size: 12px;
    }

    .shot-tag.left { left: clamp(12px, 1vw, 16px); }
    .shot-tag.right { right: clamp(12px, 1vw, 16px); }

    .shot-thumb {
      position: absolute;
      left: clamp(15px, 1.15vw, 20px);
      right: clamp(15px, 1.15vw, 20px);
      top: clamp(48px, 4.8vw, 52px);
      bottom: clamp(48px, 4.2vw, 52px);
      border: 1px solid var(--softborder);
      background: var(--placeholderbg);
    }

    .shot-title-bar {
      position: absolute;
      left: clamp(15px, 1.15vw, 20px);
      right: clamp(15px, 1.15vw, 20px);
      bottom: clamp(12px, 1.15vw, 16px);
      height: 28px;
      border: 1px solid var(--softborder);
      background: var(--slotbg);
    }

    .shot-title {
      position: absolute;
      left: clamp(28px, 2vw, 34px);
      right: clamp(28px, 2vw, 34px);
      bottom: clamp(18px, 1.65vw, 22px);
      font-size: clamp(12px, .82vw, 14px);
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #previewScrollbarTrack {
      pointer-events: none;
      position: absolute;
      right: 10px;
      top: clamp(86px, 9vh, 112px);
      bottom: 18px;
      z-index: 3;
      width: 10px;
      border: 1px solid var(--softborder);
      border-radius: 999px;
      background: var(--slotbg);
      opacity: .9;
    }

    #previewScrollThumb {
      position: absolute;
      left: 50%;
      top: 0;
      width: 6px;
      min-height: 28px;
      height: 140px;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: var(--softborder);
      transform: translateX(-50%);
      cursor: ns-resize;
      pointer-events: auto;
    }

    #sourcesDrawerRoot {
      pointer-events: none;
      position: absolute;
      left: 0;
      top: 46%;
      z-index: 30;
      display: flex;
      align-items: center;
      transform: translateY(-50%);
    }

    #sourcesDrawerRoot > * { pointer-events: auto; }

    #sourcesDrawerPanel {
      height: 256px;
      max-width: 0;
      min-width: 0;
      overflow: hidden;
      transition: max-width 280ms ease-out;
      box-shadow: var(--shadow);
    }

    #sourcesDrawerRoot.sources-drawer-open #sourcesDrawerPanel { max-width: min(430px, calc(100vw - 90px)); }
    #sourcesDrawerRoot.sources-drawer-open #sourcesHandleBtn {
      border-left-width: 0;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    #sourcesPopup {
      position: relative;
      width: min(430px, calc(100vw - 90px));
      height: 256px;
      overflow: hidden;
      border: 2px solid var(--ink);
      border-right: 0;
      border-radius: 4px 0 0 4px;
      background: var(--panelbg);
    }

    .drawer-titlebar {
      height: 44px;
      display: flex;
      align-items: center;
      gap: 12px;
      border-bottom: 1px solid var(--ink);
      background: var(--slotbg);
      padding: 0 18px;
    }

    .drawer-titlebar h2 {
      margin: 0;
      font-size: 18px;
      line-height: 1;
    }

    .drawer-titlebar p {
      margin: 0;
      min-width: 0;
      color: #374151;
      font-size: 11px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #sourcesReel {
      position: absolute;
      left: 20px;
      right: 20px;
      top: 56px;
      bottom: 14px;
      border: 1px solid var(--softborder);
      border-radius: 4px;
      background: var(--panelbg);
      overflow: hidden;
    }

    #sourcesReel::before,
    #sourcesReel::after {
      content: "";
      pointer-events: none;
      position: absolute;
      left: 0;
      right: 0;
      z-index: 10;
      height: 26px;
    }

    #sourcesReel::before { top: 0; background: linear-gradient(to bottom, var(--panelbg), transparent); }
    #sourcesReel::after { bottom: 0; background: linear-gradient(to top, var(--panelbg), transparent); }

    #sourcesCylinderViewport {
      position: absolute;
      left: 4px;
      right: 4px;
      top: 14px;
      height: 158px;
      overflow: hidden;
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
      touch-action: none;
      overscroll-behavior: contain;
    }

    #sourcesCylinderViewport:active { cursor: grabbing; }
    #sourcesCylinderTrack {
      position: absolute;
      inset: 0;
      will-change: transform;
    }

    .source-row {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 76px;
      display: flex;
      align-items: center;
      border-radius: 4px;
      padding: 0 10px;
      text-align: left;
      border: 1px solid var(--softborder);
      background: var(--panelbg);
      opacity: .64;
      transform-origin: center center;
      box-shadow: 0 0 0 rgba(17,24,39,0);
      transition:
        transform 300ms cubic-bezier(.2,.8,.2,1),
        opacity 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease,
        background-color 240ms ease;
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
      -webkit-user-drag: none;
    }

    .source-row.is-center {
      z-index: 3;
      border: 2px solid var(--ink);
      opacity: 1;
      box-shadow: 0 4px 14px rgba(17,24,39,.10);
      background: #FFFFFF;
    }

    .source-row.is-side {
      z-index: 1;
    }

    .source-row.is-ghost {
      pointer-events: none;
      opacity: 0;
    }

    .source-row.is-current:not(.is-center) {
      border-color: var(--ink);
    }

    .source-avatar {
      flex: 0 0 auto;
      width: 32px;
      height: 32px;
      border-radius: 999px;
      border: 1px solid var(--softborder);
      background: var(--placeholderbg);
      transition: width 240ms ease, height 240ms ease, border-color 240ms ease;
    }

    .source-row.is-center .source-avatar {
      width: 42px;
      height: 42px;
      border-color: var(--ink);
    }

    .source-name {
      min-width: 0;
      flex: 1;
      margin-left: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--ink);
      font-weight: 800;
      font-size: 14px;
      transition: font-size 240ms ease;
    }

    .source-row:not(.is-center) .source-name { font-size: 11px; }

    .source-platform,
    .source-badge,
    .source-commit {
      flex: 0 0 auto;
      border: 1px solid var(--softborder);
      border-radius: 3px;
      background: var(--slotbg);
      padding: 3px 8px;
      color: var(--ink);
      font-size: 10px;
      line-height: 1;
      white-space: nowrap;
    }

    .source-action {
      flex: 0 0 auto;
      min-width: 58px;
      margin-left: 8px;
      display: flex;
      justify-content: flex-end;
    }

    .source-row:not(.is-center) .source-action { opacity: 0; pointer-events: none; }

    .source-badge,
    .source-commit {
      border-color: var(--ink);
      font-size: 12px;
      font-weight: 800;
      padding: 5px 12px;
    }

    .source-commit { background: var(--placeholderbg); cursor: pointer; }
    .source-commit:hover { background: var(--slotbg); }

    .sources-dragging .source-row {
      transition: none;
      cursor: grabbing;
    }

    @media (prefers-reduced-motion: reduce) {
      .source-row { transition: none; }
    }

    #sourcesHandleBtn {
      width: 36px;
      height: 168px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: space-between;
      border: 2px solid var(--ink);
      border-radius: 0 4px 4px 0;
      background: var(--panelbg);
      padding: 6px 0;
      box-shadow: 0 2px 6px rgba(17,24,39,.12);
      font-weight: 800;
    }

    #sourcesHandleBtn .icon-row,
    #filterHandleBtn .icon-row {
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .wanted-area {
      min-width: 0;
      min-height: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--gap);
      align-self: start;
      overflow: hidden;
    }

    .wanted-card {
      width: 100%;
      display: grid;
      grid-template-rows: auto auto auto auto;
      gap: clamp(12px, 1.15vh, 18px);
      padding: clamp(20px, 1.8vw, 30px);
      align-self: start;
      overflow: hidden;
      background: var(--panelbg);
    }

    .wanted-title-row {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      min-height: 40px;
    }

    .wanted-title-row::before,
    .wanted-title-row::after {
      content: "";
      flex: 1;
      height: 1px;
      min-width: 22px;
      background: var(--ink);
    }

    #wantedCategory {
      max-width: 210px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
      font-size: clamp(24px, 1.7vw, 31px);
      font-weight: 900;
      letter-spacing: .12em;
      line-height: 1;
    }

    .wanted-body {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(128px, 34%) minmax(0, 1fr);
      gap: clamp(12px, 1.1vw, 18px);
      align-items: stretch;
    }

    .wanted-left {
      min-width: 0;
      display: grid;
      grid-template-rows: auto auto;
      gap: clamp(12px, 1.1vw, 16px);
      align-content: start;
    }

    .wanted-image {
      aspect-ratio: 1 / 1;
      border: 2px solid var(--ink);
      border-radius: 4px;
      background: var(--placeholderbg);
    }

    #wantedName {
      min-height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--muted);
      border-radius: 4px;
      background: var(--panelbg);
      padding: 8px;
      text-align: center;
      font-size: clamp(13px, .86vw, 15px);
      font-weight: 800;
      line-height: 1.25;
    }

    #wantedDesc {
      min-height: 172px;
      max-height: min(32vh, 260px);
      margin: 0;
      border: 1px solid var(--muted);
      border-radius: 4px;
      background: var(--placeholderbg);
      padding: clamp(10px, 1vw, 14px);
      color: #374151;
      font-size: clamp(12px, .8vw, 14px);
      line-height: 1.55;
      overflow: auto;
    }

    .wanted-tags {
      min-height: 46px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--muted);
      border-radius: 4px;
      background: var(--panelbg);
      padding: 9px 10px;
    }

    .wanted-tags span {
      min-height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--softborder);
      border-radius: 3px;
      background: var(--slotbg);
      padding: 0 8px;
      font-size: 12px;
      white-space: nowrap;
    }

    #btnOpenVideo { width: 100%; }

    .timeline-area {
      --timeline-track-y: clamp(88px, 9.6vh, 106px);
      --timeline-button: clamp(54px, 4.25vw, 64px);
      --chapter-button: clamp(56px, 4.35vw, 66px);
      --play-left: calc(var(--chapter-button) + 5px);
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-columns: calc(var(--chapter-button) + 5px + var(--timeline-button)) minmax(0, 1fr);
      gap: 5px;
      align-items: start;
      padding: clamp(18px, 2vh, 26px) clamp(18px, 2.1vw, 40px) clamp(16px, 1.55vh, 24px);
      background: var(--panelbg);
    }

    .timeline-controls {
      position: relative;
      width: calc(var(--chapter-button) + 5px + var(--timeline-button));
      height: 132px;
      min-width: 0;
    }

    #episodeHandleBtn {
      position: absolute;
      left: 0;
      top: calc(var(--timeline-track-y) - var(--chapter-button) / 2);
      width: var(--chapter-button);
      height: var(--chapter-button);
      border: 2px solid var(--ink);
      border-radius: 4px;
      background: var(--placeholderbg);
      font-size: clamp(13px, .9vw, 16px);
      font-weight: 800;
    }

    #timelineClockWrap {
      position: absolute;
      left: var(--play-left);
      top: calc(var(--timeline-track-y) - var(--timeline-button) / 2 - 26px);
      width: var(--timeline-button);
      min-height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      padding: 0 6px;
      text-align: center;
      font-size: clamp(14px, .96vw, 17px);
      font-weight: 900;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      transform: translateX(0);
      transition: background-color 140ms ease-out, width 140ms ease-out, left 140ms ease-out;
      z-index: 4;
    }

    #timelineClockWrap:hover {
      width: max-content;
      min-width: var(--timeline-button);
      left: calc(var(--play-left) + var(--timeline-button) / 2);
      transform: translateX(-50%);
      background: rgba(229, 231, 235, .9);
    }

    #btnPlay {
      position: absolute;
      left: var(--play-left);
      top: calc(var(--timeline-track-y) - var(--timeline-button) / 2);
      width: var(--timeline-button);
      height: var(--timeline-button);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--ink);
      border-radius: 999px;
      background: var(--panelbg);
    }

    .timeline-track-wrap {
      --track-y: var(--timeline-track-y);
      position: relative;
      height: 132px;
      min-width: 0;
      overflow: visible;
      padding-right: 2px;
    }

    .timeline-marker-lane {
      --icon-top: clamp(5px, .85vh, 10px);
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: var(--track-y);
      pointer-events: none;
      z-index: 8;
    }

    .timeline-event-tag,
    .timeline-cluster-tag,
    .timeline-cluster-child {
      position: absolute;
      left: 0;
      top: var(--icon-top);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 40px;
      transform: translateX(-50%) scale(var(--dock-scale, .72));
      transform-origin: 50% 100%;
      border: 1px solid var(--softborder);
      border-radius: 4px;
      background: linear-gradient(180deg, #FFFFFF 0%, #F3F4F6 100%);
      color: var(--ink);
      box-shadow: 0 1px 3px rgba(17,24,39,.10);
      opacity: .86;
      cursor: pointer;
      pointer-events: auto;
      transition:
        transform 180ms cubic-bezier(.2,.8,.2,1),
        opacity 160ms ease-out,
        border-color 160ms ease-out,
        box-shadow 160ms ease-out,
        background-color 160ms ease-out;
    }

    .timeline-event-tag.is-important,
    .timeline-cluster-tag.is-important,
    .timeline-cluster-child.is-important {
      border: 2px solid var(--ink);
      background: #FFFFFF;
      opacity: .98;
    }

    .timeline-event-tag.is-active,
    .timeline-cluster-child.is-active {
      --dock-scale: 1.48 !important;
      border: 2px solid var(--ink);
      background: #FFFFFF;
      box-shadow: 0 4px 12px rgba(17,24,39,.22);
      opacity: 1;
      z-index: 40;
    }

    .timeline-cluster-tag {
      width: 34px;
      height: 42px;
      font-size: 12px;
      font-weight: 900;
    }

    .timeline-cluster-tag.is-expanded {
      opacity: .32;
    }

    .timeline-cluster-child {
      top: calc(var(--icon-top) - 10px);
      z-index: 13;
    }

    .timeline-event-tag::before,
    .timeline-cluster-tag::before,
    .timeline-cluster-child::before {
      content: "";
      position: absolute;
      left: 50%;
      top: calc(100% + 2px);
      height: calc(var(--track-y) - var(--icon-top) - 40px - 9px);
      min-height: 12px;
      transform: translateX(-50%);
      border-left: 1px solid var(--softborder);
      pointer-events: none;
    }

    .timeline-event-tag.is-important::before,
    .timeline-cluster-tag.is-important::before,
    .timeline-cluster-child.is-important::before,
    .timeline-event-tag.is-active::before,
    .timeline-cluster-child.is-active::before {
      border-left: 2px solid var(--ink);
    }

    .timeline-tag-symbol {
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      opacity: .72;
      pointer-events: none;
    }

    .timeline-event-tag.is-active .timeline-tag-symbol,
    .timeline-cluster-child.is-active .timeline-tag-symbol {
      opacity: 1;
    }

    .timeline-tag-title {
      position: absolute;
      left: 50%;
      top: -22px;
      max-width: 128px;
      transform: translateX(-50%);
      display: none;
      padding: 2px 6px;
      border: 1px solid rgba(17,24,39,.75);
      border-radius: 3px;
      background: rgba(255,255,255,.96);
      color: var(--ink);
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
      box-shadow: 0 2px 6px rgba(17,24,39,.12);
      pointer-events: none;
    }

    .timeline-event-tag:hover .timeline-tag-title,
    .timeline-event-tag.is-active .timeline-tag-title,
    .timeline-cluster-child:hover .timeline-tag-title,
    .timeline-cluster-child.is-active .timeline-tag-title {
      display: block;
    }

    #timelineNodeLayer,
    #timelineLabelLayer {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    #timelineTrackBg,
    #timelineProgress {
      position: absolute;
      left: 0;
      top: var(--track-y);
      height: 6px;
      width: 100%;
      transform: translateY(-50%);
      background: var(--divider);
      pointer-events: none;
    }

    #timelineProgress {
      width: 28%;
      height: 8px;
      background: var(--ink);
      z-index: 3;
    }

    #timelineScrubHit {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(var(--track-y) - 11px);
      height: 22px;
      z-index: 5;
      cursor: pointer;
      user-select: none;
      touch-action: none;
    }

    #timelineHoverTip {
      position: absolute;
      left: 0;
      top: calc(var(--track-y) + 14px);
      z-index: 9;
      display: none;
      transform: translateX(-50%);
      border: 1px solid rgba(17,24,39,.72);
      border-radius: 3px;
      background: rgba(255,255,255,.96);
      padding: 2px 5px;
      color: var(--ink);
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
      pointer-events: none;
      font-variant-numeric: tabular-nums;
    }

    #timelineHoverTip.is-visible { display: block; }

    #timelinePlayhead {
      position: absolute;
      left: calc(28% - 7px);
      top: var(--track-y);
      z-index: 6;
      width: 14px;
      height: 14px;
      transform: translateY(-50%);
      border: 2px solid var(--panelbg);
      border-radius: 999px;
      background: var(--ink);
      box-shadow: 0 1px 4px rgba(17,24,39,.22);
      pointer-events: none;
    }

    .timeline-node {
      position: absolute;
      top: var(--track-y);
      z-index: 7;
      width: 14px;
      height: 14px;
      transform: translate(-50%, -50%);
      border: 2px solid var(--ink);
      border-radius: 999px;
      background: var(--panelbg);
    }

    .timeline-node.is-active { background: var(--ink); }

    .timeline-label {
      position: absolute;
      top: calc(var(--track-y) + 24px);
      transform: translateX(-50%);
      z-index: 7;
      max-width: 118px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
      font-size: clamp(10px, .72vw, 12px);
      line-height: 1;
      pointer-events: none;
    }

    .timeline-label.is-active { font-weight: 900; }

    #filterDrawerRoot {
      position: fixed;
      right: 0;
      /* 浮层放在右侧缓冲区偏下的位置，不再挤压主布局。 */
      top: calc(var(--topbar-h) + var(--pad) + clamp(270px, 35vh, 380px));
      z-index: 90;
      display: flex;
      align-items: center;
      transform: none;
    }

    #filterDrawerPanel {
      height: min(430px, calc(100vh - var(--topbar-h) - 34px));
      max-width: 0;
      min-width: 0;
      overflow: hidden;
      transition: max-width 280ms ease-out;
      box-shadow: var(--shadow);
    }

    #filterDrawerRoot.filter-drawer-open #filterDrawerPanel { max-width: var(--filter-panel-w); }
    #filterDrawerRoot.filter-drawer-open #filterHandleBtn {
      border-right-width: 0;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    #filterHandleBtn {
      position: relative;
      z-index: 91;
      width: var(--filter-handle-w);
      height: clamp(184px, 22vh, 220px);
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: space-between;
      border: 2px solid var(--ink);
      border-radius: 4px 0 0 4px;
      background: var(--panelbg);
      padding: 8px 0;
      box-shadow: 0 2px 6px rgba(17,24,39,.12);
      font-size: 16px;
      font-weight: 800;
    }

    #filterPopup {
      width: var(--filter-panel-w);
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 2px solid var(--ink);
      border-left: 0;
      border-radius: 0 4px 4px 0;
      background: var(--panelbg);
    }

    .filter-head {
      flex: 0 0 56px;
      display: flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid var(--ink);
      background: var(--slotbg);
      padding: 8px 12px;
    }

    #filterSearch {
      min-width: 0;
      flex: 1;
      height: 36px;
      border: 1px solid var(--muted);
      border-radius: 4px;
      background: var(--panelbg);
      padding: 0 10px;
      outline: none;
      font-size: 14px;
    }

    #valueToggle {
      flex: 0 0 108px;
      height: 36px;
      display: flex;
      align-items: stretch;
      gap: 0;
      border: 1px solid var(--muted);
      border-radius: 999px;
      background: var(--panelbg);
      padding: 2px;
      box-sizing: border-box;
    }

    #valueToggle button {
      flex: 1 1 0;
      min-width: 0;
      height: auto;
      border: 0;
      border-radius: 999px;
      background: transparent;
      padding: 0 6px;
      font-size: 12px;
      text-align: center;
      box-sizing: border-box;
    }

    #valueToggle button.is-active {
      border: 1px solid var(--softborder);
      background: var(--slotbg);
      font-weight: 800;
    }

    #filterTreeViewport {
      min-height: 0;
      flex: 1;
      overflow: hidden;
      padding: 12px;
    }

    .filter-frame {
      height: 100%;
      display: flex;
      min-height: 0;
      overflow: hidden;
      border: 1px solid var(--softborder);
      border-radius: 4px;
      background: var(--panelbg);
    }

    .filter-tree-scroll {
      min-height: 0;
      flex: 1;
      overflow-y: auto;
      padding-bottom: 16px;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .filter-tree-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }

    #filterTree { position: relative; min-height: 260px; }

    #filterScrollRail {
      flex: 0 0 20px;
      min-height: 0;
      border-left: 1px solid var(--softborder);
      background: var(--panelbg);
      padding: 8px 0;
    }

    #filterScrollTrack {
      position: relative;
      width: 100%;
      height: 100%;
    }

    #filterScrollTrack::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 8px;
      bottom: 8px;
      width: 3px;
      transform: translateX(-50%);
      border-radius: 999px;
      background: var(--divider);
    }

    #filterScrollThumb {
      position: absolute;
      left: 50%;
      top: 0;
      z-index: 2;
      width: 11px;
      transform: translateX(-50%);
      border: 1px solid var(--ink);
      border-radius: 2px;
      background: var(--panelbg);
      box-shadow: 0 1px 3px rgba(17,24,39,.2);
      cursor: grab;
      touch-action: none;
    }

    #filterScrollThumb:active { cursor: grabbing; }

    .filter-col-head,
    .filter-sep,
    .filter-row {
      position: absolute;
    }

    .filter-col-head {
      top: 10px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1;
      white-space: nowrap;
    }

    .filter-col-head.solo { left: 32px; transform: translateX(-50%); }
    .filter-col-head.check { left: 55px; transform: translateX(-50%); }
    .filter-col-head.label { left: 84px; transform: translateX(-50%); }
    .filter-col-head.expand { right: 27px; transform: translateX(50%); }

    .filter-tree-header {
      pointer-events: none;
      align-items: center;
    }

    .filter-tree-header .filter-head-cell {
      color: var(--muted);
      font-size: 10px;
      line-height: 1;
      white-space: nowrap;
    }

    .filter-tree-header .filter-head-cell.solo {
      flex: 0 0 8px;
      display: flex;
      justify-content: center;
      overflow: visible;
    }

    .filter-tree-header .filter-head-cell.check {
      flex: 0 0 14px;
      display: flex;
      justify-content: center;
      overflow: visible;
    }

    .filter-tree-header .filter-head-cell.label {
      flex: 1;
      min-width: 0;
      text-align: left;
    }

    .filter-tree-header .filter-head-cell.expand {
      flex: 0 0 14px;
      display: flex;
      justify-content: center;
      overflow: visible;
    }

    .filter-sep {
      left: 12px;
      right: 12px;
      height: 1px;
      background: #e5e7eb;
    }

    .filter-row {
      left: 20px;
      right: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .filter-row.child { left: 36px; }

    .filter-tree-solo {
      width: 8px;
      height: 8px;
      flex: 0 0 8px;
      border: 1px solid var(--ink);
      border-radius: 999px;
      background: var(--panelbg);
      padding: 0;
    }

    .filter-row.child .filter-tree-solo { border-color: var(--softborder); }
    .filter-tree-solo.is-on { background: var(--ink); border-color: var(--ink); }

    .filter-tree-check {
      width: 14px;
      height: 14px;
      flex: 0 0 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--ink);
      border-radius: 2px;
      background: var(--panelbg);
      padding: 0;
      font-size: 10px;
      line-height: 1;
    }

    .filter-row.child .filter-tree-check { border-color: var(--softborder); }

    .filter-label {
      min-width: 0;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
      font-weight: 800;
      line-height: 1;
    }

    .filter-row.child .filter-label { font-size: 13px; font-weight: 500; }

    .filter-tree-arrow {
      flex: 0 0 14px;
      width: 14px;
      height: 16px;
      border: 0;
      background: transparent;
      padding: 0;
      font-size: 14px;
      line-height: 1;
    }

    .popup {
      position: fixed;
      left: var(--pad);
      bottom: calc(var(--pad) + var(--timeline-h) + 10px);
      z-index: 95;
      width: min(460px, calc(100vw - 48px));
      height: 330px;
      display: none;
      border: 2px solid var(--ink);
      border-radius: 4px;
      background: var(--panelbg);
      box-shadow: var(--shadow);
    }

    .popup:not(.hidden) { display: block; }

    #episodePopup {
      --episode-arrow-left: 42px;
      transform-origin: left bottom;
    }

    #episodePopup::after {
      content: "";
      position: absolute;
      left: var(--episode-arrow-left);
      bottom: -11px;
      width: 18px;
      height: 18px;
      transform: translateX(-50%) rotate(45deg);
      border-right: 2px solid var(--ink);
      border-bottom: 2px solid var(--ink);
      background: var(--panelbg);
    }

    .popup-header {
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--ink);
      background: var(--slotbg);
      padding: 0 18px;
    }

    .popup-header h2 {
      margin: 0;
      font-size: 22px;
      line-height: 1;
    }

    .popup-close {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--softborder);
      border-radius: 3px;
      background: var(--panelbg);
      font-weight: 800;
    }

    .episode-current-source {
      margin: 12px 20px 8px;
      height: 34px;
      display: flex;
      align-items: center;
      border: 1px solid var(--divider);
      border-radius: 4px;
      background: var(--placeholderbg);
      padding: 0 14px;
      color: #374151;
      font-size: 13px;
    }

    .episode-list-wrap {
      position: absolute;
      left: 20px;
      right: 20px;
      bottom: 36px;
      top: 106px;
      overflow: hidden;
      border: 1px solid var(--softborder);
      border-radius: 4px;
      background: var(--panelbg);
    }

    #episodeList { position: relative; }

    .episode-row {
      position: absolute;
      left: 10px;
      right: 10px;
      height: 30px;
      display: flex;
      align-items: center;
      border: 1px solid var(--softborder);
      border-radius: 3px;
      background: var(--panelbg);
      padding: 0 8px;
      text-align: left;
      font-size: 13px;
    }

    .episode-row.is-current {
      border: 2px solid var(--ink);
      font-weight: 800;
    }

    .episode-row.is-muted { color: var(--muted); }

    .episode-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--ink);
      margin-right: 8px;
      flex: 0 0 auto;
    }

    .episode-row span.text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .episode-badge {
      border: 1px solid var(--ink);
      border-radius: 3px;
      background: var(--slotbg);
      padding: 3px 8px;
      font-size: 10px;
      line-height: 1;
      font-weight: 800;
    }

    #toast {
      position: fixed;
      left: 50%;
      bottom: clamp(22px, 3vh, 40px);
      z-index: 120;
      transform: translateX(-50%);
      border: 1px solid var(--ink);
      border-radius: 4px;
      background: var(--panelbg);
      color: var(--ink);
      padding: 8px 16px;
      font-size: 14px;
      box-shadow: var(--shadow);
      pointer-events: none;
    }

    #toast.hidden { display: none; }



    /* 视频模式页：中间主框不再显示图文卡片，而是完整视频区域。 */
    body.video-page #previewViewport {
      grid-template-rows: minmax(0, 1fr);
      background: #0f172a;
    }

    .video-surface {
      position: relative;
      display: none;
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 32%),
        #111827;
      color: #f9fafb;
    }

    body.video-page .video-surface { display: block; }
    body.video-page .preview-head,
    body.video-page #previewScroll,
    body.video-page #previewScrollbarTrack,
    body.video-page #previewScrollThumb { display: none !important; }

    .video-surface iframe,
    .video-surface video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      object-fit: contain;
      background: #000;
    }

    .video-placeholder {
      position: absolute;
      inset: clamp(18px, 1.8vw, 34px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 6px;
      background:
        radial-gradient(circle at 50% 42%, rgba(255,255,255,.08), rgba(255,255,255,0) 34%),
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.28);
      padding: clamp(16px, 1.7vw, 30px);
    }

    .video-top-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      color: rgba(249,250,251,.86);
      font-size: clamp(12px, .82vw, 15px);
      font-weight: 700;
      letter-spacing: .02em;
    }

    .video-center-play {
      position: absolute;
      left: 50%;
      top: 50%;
      width: clamp(70px, 7vw, 118px);
      height: clamp(70px, 7vw, 118px);
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid rgba(255,255,255,.78);
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      box-shadow: 0 14px 34px rgba(0,0,0,.34);
    }

    .video-center-play svg {
      width: 38%;
      height: 38%;
      margin-left: 5%;
      fill: rgba(249,250,251,.92);
    }

    .video-bottom-controls {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: clamp(10px, 1.1vw, 18px);
      color: rgba(249,250,251,.92);
      font-size: clamp(12px, .8vw, 14px);
      font-weight: 700;
    }

    .video-mini-track {
      position: relative;
      height: 6px;
      border-radius: 999px;
      background: rgba(255,255,255,.26);
      overflow: hidden;
    }

    .video-mini-track::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 28%;
      background: rgba(249,250,251,.92);
    }

    .video-mode-note {
      color: rgba(249,250,251,.62);
      font-size: clamp(11px, .72vw, 13px);
      font-weight: 600;
      text-align: right;
      white-space: nowrap;
    }

    @media (max-width: 1280px) {
      .topbar { grid-template-columns: minmax(210px, 1fr) minmax(200px, 1fr) auto auto; }
      #episodeTitleText { display: none; }
      .workspace { grid-template-columns: minmax(460px, 1fr) minmax(340px, 36vw); }
    }

    @media (max-width: 980px) {
      html, body { overflow: auto; }
      .app-root { min-height: 100vh; height: auto; grid-template-rows: auto auto; }
      .topbar {
        position: sticky;
        top: 0;
        grid-template-columns: 1fr auto auto;
        min-height: var(--topbar-h);
        padding-top: 10px;
        padding-bottom: 10px;
      }
      .topbar-slot.source-meta { display: none; }
      #stage {
        height: auto;
        overflow: visible;
        grid-template-rows: auto auto;
        padding-right: calc(var(--pad) + var(--filter-handle-w) + 6px);
      }
      #filterDrawerRoot {
        top: auto;
        bottom: calc(var(--pad) + 14px);
      }
      .workspace { grid-template-columns: 1fr; grid-template-rows: auto auto; align-items: start; }
      #previewViewport { width: 100%; max-height: none; justify-self: stretch; }
      .wanted-area { overflow: visible; }
      .wanted-card { overflow: visible; }
      .timeline-area { grid-template-columns: 1fr; gap: 10px; min-height: var(--timeline-h); }
      .timeline-controls { grid-template-columns: auto auto auto; grid-template-rows: auto; }
      #episodeHandleBtn { grid-row: auto; }
      .popup { position: fixed; left: 18px; bottom: 20px; }
    }

    @media (max-width: 680px) {
      .topbar { grid-template-columns: 1fr 1fr; }
      .topbar .brand-wrap { grid-column: 1 / -1; }
      .mode-btn { min-width: 0; padding: 0 10px; }
      .preview-hint { display: none; }
      .wanted-body { grid-template-columns: 1fr; }
      #wantedDesc { max-height: none; }
      #stage { padding-left: 10px; padding-right: 52px; }
      .timeline-label { max-width: 68px; }
    }


    /* === SoulNode 固定比例布局补丁：1920×1080 基准，向 2K/4K 等比放大，低于基准时不再重排，只由浏览器裁切/滚动 === */
    :root {
      --base-w: 1920px;
      --base-h: 1120px;
      --app-scale: 1;
      --topbar-h: 64px;
      --timeline-h: 140px;
      --gap: 18px;
      --pad: 24px;
      --filter-handle-w: 42px;
      --filter-panel-w: 340px;
      --right-panel-w: 360px;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      overflow: auto !important;
      background: var(--pagebg);
    }

    .app-viewport {
      position: relative;
      width: calc(var(--base-w) * var(--app-scale));
      height: calc(var(--base-h) * var(--app-scale));
      min-width: calc(var(--base-w) * var(--app-scale));
      min-height: calc(var(--base-h) * var(--app-scale));
      overflow: visible;
    }

    .app-root {
      width: var(--base-w) !important;
      height: var(--base-h) !important;
      min-width: var(--base-w) !important;
      min-height: var(--base-h) !important;
      display: grid !important;
      grid-template-rows: var(--topbar-h) minmax(0, 1fr) !important;
      overflow: hidden !important;
      transform: scale(var(--app-scale));
      transform-origin: left top;
    }

    .topbar {
      position: relative !important;
      top: auto !important;
      min-height: 0 !important;
      height: var(--topbar-h) !important;
      grid-template-columns: 360px 360px minmax(360px, 1fr) auto auto !important;
      padding: 0 var(--pad) !important;
      gap: 14px !important;
    }

    .topbar-slot,
    .mode-btn,
    .panel-btn {
      height: 38px;
      min-height: 38px;
    }

    .topbar-slot.source-meta,
    #episodeTitleText {
      display: flex !important;
    }

    #stage {
      height: auto !important;
      min-width: 0 !important;
      min-height: 0 !important;
      display: grid !important;
      grid-template-rows: minmax(0, 1fr) var(--timeline-h) !important;
      gap: 12px !important;
      padding: 34px var(--pad) 16px var(--pad) !important;
      overflow: hidden !important;
    }

    .workspace {
      min-width: 0 !important;
      min-height: 0 !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) var(--right-panel-w) !important;
      grid-template-rows: none !important;
      gap: var(--gap) !important;
      align-items: start !important;
    }

    #previewViewport {
      width: 100% !important;
      max-height: none !important;
      align-self: start !important;
      justify-self: start !important;
      aspect-ratio: 16 / 9 !important;
    }

    .video-placeholder {
      inset: 24px !important;
      padding: 26px !important;
    }

    /* 去掉视频占位层内部的假时间进度条，只保留真实底部 SoulNode 时间轴。 */
    .video-bottom-controls {
      display: none !important;
    }

    .video-mode-note {
      position: absolute;
      right: 26px;
      bottom: 22px;
    }

    .wanted-area {
      width: 100% !important;
      min-width: 0 !important;
      overflow: hidden !important;
    }

    .wanted-card {
      padding: 16px !important;
      gap: 12px !important;
    }

    #wantedCategory {
      max-width: 170px !important;
      font-size: 25px !important;
      letter-spacing: .1em !important;
    }

    .wanted-body {
      grid-template-columns: 122px minmax(0, 1fr) !important;
      gap: 12px !important;
    }

    .wanted-image {
      min-height: 122px;
    }

    #wantedName {
      min-height: 48px !important;
      font-size: 13px !important;
    }

    #wantedDesc {
      min-height: 132px !important;
      max-height: 190px !important;
      font-size: 12px !important;
      line-height: 1.48 !important;
    }

    .wanted-tags {
      min-height: 40px !important;
      padding: 7px 8px !important;
      gap: 6px !important;
    }

    .wanted-tags span {
      min-height: 22px !important;
      font-size: 11px !important;
      padding: 0 7px !important;
    }

    .timeline-area {
      --timeline-track-y: 72px;
      --timeline-button: 54px;
      --chapter-button: 54px;
      --play-left: calc(var(--chapter-button) + 5px);
      height: var(--timeline-h) !important;
      min-height: 0 !important;
      display: grid !important;
      grid-template-columns: calc(var(--chapter-button) + 5px + var(--timeline-button)) minmax(0, 1fr) !important;
      grid-template-rows: none !important;
      gap: 5px !important;
      align-items: start !important;
      padding: 8px 34px 10px 34px !important;
      align-self: end !important;
    }

    .timeline-controls,
    .timeline-track-wrap {
      height: 108px !important;
    }

    #episodeHandleBtn,
    #btnPlay {
      width: var(--chapter-button) !important;
      height: var(--chapter-button) !important;
    }

    #btnPlay {
      left: var(--play-left) !important;
    }

    #timelineClockWrap {
      left: var(--play-left) !important;
      top: calc(var(--timeline-track-y) - var(--timeline-button) / 2 - 23px) !important;
    }

    .timeline-marker-lane {
      height: var(--timeline-track-y) !important;
    }

    .timeline-event-tag,
    .timeline-cluster-tag,
    .timeline-cluster-child {
      top: 3px !important;
    }

    .timeline-cluster-child {
      top: -7px !important;
    }

    #timelineTrackBg,
    #timelineProgress {
      top: var(--track-y) !important;
    }

    #timelineScrubHit {
      top: calc(var(--track-y) - 9px) !important;
      height: 18px !important;
    }

    .timeline-label {
      top: calc(var(--track-y) + 20px) !important;
    }

    .popup {
      position: fixed !important;
      left: var(--pad) !important;
      bottom: calc(var(--pad) + var(--timeline-h) + 10px) !important;
      width: 460px !important;
      height: 330px !important;
    }

    #filterDrawerRoot {
      top: 520px !important;
      bottom: auto !important;
      right: 0 !important;
    }

    #sourcesDrawerRoot {
      top: 48% !important;
    }

    /* === v3 小修正：恢复默认贴近布局，只把时间轴内部元素下移；节点筛选绑定浏览器右边缘 === */
    .workspace {
      grid-template-columns: minmax(0, 1fr) var(--right-panel-w) !important;
      gap: var(--gap) !important;
    }

    .wanted-area {
      width: 100% !important;
      justify-self: stretch !important;
    }

    /* 只移动时间轴内部内容，不移动整个 timeline-area 区域本身。 */
    .timeline-controls,
    .timeline-track-wrap {
      transform: translateY(14px);
    }

    /* 章节按钮略微左移，和播放按钮的视觉中心更接近。 */
    #episodeHandleBtn {
      left: -4px !important;
    }

    /* 节点筛选抽屉移出缩放根节点后，直接贴浏览器右边缘；尺寸随页面缩放。 */
    #filterDrawerRoot {
      position: fixed !important;
      right: 0 !important;
      top: var(--filter-fixed-top, 520px) !important;
      bottom: auto !important;
      z-index: 200 !important;
      transform: scale(var(--app-scale));
      transform-origin: top right;
    }

    /* === v4 页面高度修正：页面基准改为 1920×1120，视频仍 16:9；底部时间轴下沉到新高度 === */
    .workspace {
      grid-template-columns: minmax(0, 1fr) var(--right-panel-w) !important;
      gap: var(--gap) !important;
    }

    #previewViewport {
      aspect-ratio: 16 / 9 !important;
    }

    .wanted-area {
      width: 100% !important;
      justify-self: stretch !important;
    }

    #filterDrawerRoot {
      top: var(--filter-fixed-top, 520px) !important;
    }


    /* === v5 布局微调：左右留白一致，节点筛选下移，纵向缩窗时按高度缩放保持底部时间轴完整 === */
    #stage {
      padding-right: var(--pad) !important;
    }

    .wanted-area {
      justify-self: stretch !important;
    }

    #filterDrawerRoot {
      top: var(--filter-fixed-top, 520px) !important;
    }

    /* === v6 修正：页面始终完整显示；节点筛选绑定到布局右边缘，而不是浏览器右边缘 === */
    html,
    body {
      overflow: hidden !important;
    }

    .app-viewport {
      width: calc(var(--base-w) * var(--app-scale)) !important;
      height: calc(var(--base-h) * var(--app-scale)) !important;
      min-width: 0 !important;
      min-height: 0 !important;
      overflow: visible !important;
    }

    .app-root {
      position: relative !important;
      width: var(--base-w) !important;
      height: var(--base-h) !important;
      min-width: var(--base-w) !important;
      min-height: var(--base-h) !important;
      transform: scale(var(--app-scale)) !important;
      transform-origin: left top !important;
      overflow: hidden !important;
    }

    #filterDrawerRoot {
      position: absolute !important;
      right: 0 !important;
      top: 520px !important;
      bottom: auto !important;
      z-index: 90 !important;
      transform: none !important;
      transform-origin: initial !important;
    }

    /* === v7 顶栏独立铺满：顶部栏占满浏览器宽度；主体完整缩放并在空白过多时居中 === */
    :root {
      --content-h: calc(var(--base-h) - var(--topbar-h));
    }

    html,
    body {
      overflow: hidden !important;
    }

    .topbar {
      position: fixed !important;
      left: 0 !important;
      right: 0 !important;
      top: 0 !important;
      width: 100vw !important;
      height: var(--topbar-h) !important;
      min-height: var(--topbar-h) !important;
      z-index: 300 !important;
      display: grid !important;
      grid-template-columns:
        minmax(180px, 360px)
        minmax(180px, 360px)
        minmax(260px, 1fr)
        max-content
        max-content !important;
      padding: 0 var(--pad) !important;
      gap: 14px !important;
      transform: none !important;
      overflow: hidden !important;
    }

    .topbar-slot,
    .mode-btn {
      min-width: 0 !important;
    }

    .app-viewport {
      margin-left: auto !important;
      margin-right: auto !important;
      margin-top: var(--topbar-h) !important;
      width: calc(var(--base-w) * var(--app-scale)) !important;
      height: calc(var(--content-h) * var(--app-scale)) !important;
      min-width: 0 !important;
      min-height: 0 !important;
      overflow: visible !important;
    }

    .app-root {
      width: var(--base-w) !important;
      height: var(--content-h) !important;
      min-width: var(--base-w) !important;
      min-height: var(--content-h) !important;
      grid-template-rows: minmax(0, 1fr) !important;
      transform: scale(var(--app-scale)) !important;
      transform-origin: left top !important;
      overflow: hidden !important;
    }

    #stage {
      height: 100% !important;
      padding-left: var(--pad) !important;
      padding-right: var(--pad) !important;
    }

    #filterDrawerRoot {
      position: absolute !important;
      right: 0 !important;
      top: 520px !important;
      bottom: auto !important;
      transform: none !important;
      z-index: 90 !important;
    }

    /* === v9 节点筛选位置微调：只上移位置，不改变原展开动画和交互结构 === */
    #filterDrawerRoot {
      top: 455px !important;
    }

    /* === v10 抽屉手柄与描边修正：攻略源贴布局左边界，手柄文字垂直居中；节点筛选同样居中；节点筛选弹层描边改为左接右开 === */
    .v-text {
      flex: 1 1 auto !important;
      width: 100% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      line-height: 1.05 !important;
    }

    /* 攻略源：手柄贴在布局左边界，仍然在布局内部，不贴浏览器窗口。 */
    #sourcesDrawerRoot {
      left: 0 !important;
      top: 46% !important;
      transform: translateY(-50%) !important;
      flex-direction: row-reverse !important;
      z-index: 40 !important;
    }

    /* 攻略源展开后，手柄在左、面板在右。 */
    #sourcesDrawerRoot.sources-drawer-open #sourcesHandleBtn {
      border-right-width: 0 !important;
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
      border-left-width: 2px !important;
      border-top-left-radius: 4px !important;
      border-bottom-left-radius: 4px !important;
    }

    #sourcesPopup {
      border-left: 0 !important;
      border-right: 2px solid var(--ink) !important;
      border-radius: 0 4px 4px 0 !important;
    }

    /* 节点筛选：手柄文字居中；弹层描边改成左侧接手柄，右侧外缘敞开。 */
    #filterPopup {
      border-left: 2px solid var(--ink) !important;
      border-right: 0 !important;
      border-radius: 4px 0 0 4px !important;
    }

    #filterDrawerRoot.filter-drawer-open #filterHandleBtn {
      border-right-width: 0 !important;
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
    }

    /* === v11 抽屉边缘与位置修正：攻略源恢复到弹窗右侧并贴布局左边界；节点筛选右侧改回浅线 === */

    /* 让手柄里的竖排文字保持真正居中。 */
    .v-text {
      flex: 1 1 auto !important;
      width: 100% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      line-height: 1.05 !important;
    }

    /* 攻略源：回到“弹窗在左、手柄在右”的原始关系，同时贴页面布局左边界。 */
    #sourcesDrawerRoot {
      left: 0 !important;
      top: 46% !important;
      transform: translateY(-50%) !important;
      flex-direction: row !important;
      z-index: 40 !important;
    }

    #sourcesDrawerRoot.sources-drawer-open #sourcesHandleBtn {
      border-left-width: 0 !important;
      border-right-width: 2px !important;
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
      border-top-right-radius: 4px !important;
      border-bottom-right-radius: 4px !important;
    }

    #sourcesPopup {
      width: min(400px, calc(100vw - 120px)) !important;
      border: 2px solid var(--ink) !important;
      border-right: 0 !important;
      border-radius: 4px 0 0 4px !important;
      overflow: hidden !important;
    }

    #sourcesDrawerRoot.sources-drawer-open #sourcesDrawerPanel {
      max-width: min(400px, calc(100vw - 120px)) !important;
    }

    /* 收一下内部滚轮区，避免里面的小长条视觉上顶出窗口。 */
    #sourcesReel {
      left: 16px !important;
      right: 16px !important;
      top: 54px !important;
      bottom: 12px !important;
      overflow: hidden !important;
    }

    #sourcesCylinderViewport {
      left: 10px !important;
      right: 10px !important;
      top: 12px !important;
      height: 146px !important;
      overflow: hidden !important;
    }

    .source-row {
      padding: 0 8px !important;
    }

    .source-name {
      margin-left: 8px !important;
    }

    .source-action {
      min-width: 52px !important;
      margin-left: 6px !important;
    }

    .source-platform,
    .source-badge,
    .source-commit {
      padding: 4px 10px !important;
    }

    /* 节点筛选：左边和手柄连上保留，右侧外缘改回浅线，不再是深色实线。 */
    #filterPopup {
      border-top: 2px solid var(--ink) !important;
      border-bottom: 2px solid var(--ink) !important;
      border-left: 2px solid var(--ink) !important;
      border-right: 1px solid var(--softborder) !important;
      border-radius: 4px 0 0 4px !important;
      overflow: hidden !important;
    }

    /* === v12 抽屉最终微调：节点筛选连接线变浅；攻略源贴页面布局左边界并修正内部越界 === */

    /* 节点筛选：手柄右侧的第一条分隔线改成浅线，用户更容易看出“标签+内容”是一组。 */
    #filterPopup {
      border-top: 2px solid var(--ink) !important;
      border-right: 2px solid var(--ink) !important;
      border-bottom: 2px solid var(--ink) !important;
      border-left: 1px solid var(--softborder) !important;
      border-radius: 0 4px 4px 0 !important;
      overflow: hidden !important;
    }

    #filterDrawerRoot.filter-drawer-open #filterHandleBtn {
      border-right-width: 0 !important;
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
    }

    /* 攻略源：整体贴到页面布局左边界（不是视频框边界），打开后弹窗在左、手柄在右。 */
    #sourcesDrawerRoot {
      position: absolute !important;
      left: 0 !important;
      top: 360px !important;
      z-index: 95 !important;
      display: flex !important;
      align-items: center !important;
      flex-direction: row !important;
      transform: none !important;
      pointer-events: none !important;
    }

    #sourcesDrawerRoot > * {
      pointer-events: auto !important;
    }

    #sourcesDrawerPanel {
      height: 256px !important;
      max-width: 0 !important;
      min-width: 0 !important;
      overflow: hidden !important;
      transition: max-width 280ms ease-out !important;
      box-shadow: var(--shadow) !important;
    }

    #sourcesDrawerRoot.sources-drawer-open #sourcesDrawerPanel {
      max-width: min(392px, calc(100vw - 120px)) !important;
    }

    #sourcesHandleBtn {
      width: 36px !important;
      height: 168px !important;
      border-radius: 0 4px 4px 0 !important;
    }

    #sourcesDrawerRoot.sources-drawer-open #sourcesHandleBtn {
      border-left-width: 0 !important;
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
      border-right-width: 2px !important;
      border-top-right-radius: 4px !important;
      border-bottom-right-radius: 4px !important;
    }

    #sourcesPopup {
      position: relative !important;
      width: min(392px, calc(100vw - 120px)) !important;
      height: 256px !important;
      overflow: hidden !important;
      border: 2px solid var(--ink) !important;
      border-right: 0 !important;
      border-radius: 4px 0 0 4px !important;
      background: var(--panelbg) !important;
    }

    /* 攻略源内部列表收窄一点，避免小长条看起来顶出窗口。 */
    #sourcesReel {
      position: absolute !important;
      left: 14px !important;
      right: 14px !important;
      top: 54px !important;
      bottom: 12px !important;
      border: 1px solid var(--softborder) !important;
      border-radius: 4px !important;
      background: var(--panelbg) !important;
      overflow: hidden !important;
    }

    #sourcesCylinderViewport {
      position: absolute !important;
      left: 8px !important;
      right: 8px !important;
      top: 12px !important;
      height: 146px !important;
      overflow: hidden !important;
    }

    .source-row {
      padding: 0 8px !important;
    }

    .source-name {
      margin-left: 8px !important;
    }

    .source-platform,
    .source-badge,
    .source-commit {
      padding: 4px 10px !important;
    }

    .source-action {
      min-width: 52px !important;
      margin-left: 6px !important;
    }

    /* === v13 抽屉描边统一方案：上下深描边，左右与标签接口都改为浅描边，增强“标签+内容是一体”的感觉 === */

    /* 我建议的设计逻辑：
       - 上下边：保留黑实线，维持结构感
       - 左右两侧竖边：统一用浅线，避免像两个硬拼起来的盒子
       - 标签与内容接口：不出现黑实线，让标签和面板看起来是一体
    */

    /* 节点筛选：右外侧与左接口都不要黑实线，统一换成浅线；上下保留黑实线。 */
    #filterPopup {
      border-top: 2px solid var(--ink) !important;
      border-bottom: 2px solid var(--ink) !important;
      border-left: 1px solid var(--softborder) !important;
      border-right: 1px solid var(--softborder) !important;
      border-radius: 0 4px 4px 0 !important;
      overflow: hidden !important;
    }

    #filterDrawerRoot.filter-drawer-open #filterHandleBtn {
      border-right-width: 0 !important;
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
    }

    /* 攻略源：左外侧与右接口都不要黑实线，统一浅线；上下保留黑实线。 */
    #sourcesPopup {
      border-top: 2px solid var(--ink) !important;
      border-bottom: 2px solid var(--ink) !important;
      border-left: 1px solid var(--softborder) !important;
      border-right: 1px solid var(--softborder) !important;
      border-radius: 4px 0 0 4px !important;
      overflow: hidden !important;
    }

    #sourcesDrawerRoot.sources-drawer-open #sourcesHandleBtn {
      border-left-width: 0 !important;
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
    }

    /* === v14 节点筛选开合描边逻辑修正：
       - 闭合时：手柄右侧用浅线，不要黑实线
       - 打开时：弹层左侧恢复黑实线，形成完整外轮廓
       - 手柄与内容接口处：打开时去掉手柄右侧黑线，让两者更像一体
    === */
    #filterHandleBtn {
      border-top: 2px solid var(--ink) !important;
      border-bottom: 2px solid var(--ink) !important;
      border-left: 2px solid var(--ink) !important;
      border-right: 1px solid var(--softborder) !important;
      border-radius: 4px 0 0 4px !important;
    }

    #filterPopup {
      border-top: 2px solid var(--ink) !important;
      border-bottom: 2px solid var(--ink) !important;
      border-left: 2px solid var(--ink) !important;
      border-right: 1px solid var(--softborder) !important;
      border-radius: 0 4px 4px 0 !important;
      overflow: hidden !important;
    }

    #filterDrawerRoot.filter-drawer-open #filterHandleBtn {
      border-right: 0 !important;
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
    }

    /* === v15 攻略源闭合描边修正：
       参考“节点筛选”的闭合逻辑：
       - 闭合时，攻略源手柄左侧外边改为浅线，不要黑实线
       - 打开时，仍保持与内容页连接处没有黑实线
    === */
    #sourcesHandleBtn {
      border-top: 2px solid var(--ink) !important;
      border-right: 2px solid var(--ink) !important;
      border-bottom: 2px solid var(--ink) !important;
      border-left: 1px solid var(--softborder) !important;
      border-radius: 0 4px 4px 0 !important;
    }

    #sourcesDrawerRoot.sources-drawer-open #sourcesHandleBtn {
      border-left: 0 !important;
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
    }