:root {
      --bg:#111317; --panel:#1b1f26; --line:#2b3340; --ink:#dfe7f5; --muted:#91a0b7; --accent:#56a8ff;
      --panel-radius:10px;
      --surface-radius:8px;
      --scroll-track:#0f1825;
      --scroll-thumb:#446488;
      --scroll-thumb-hover:#5a80ad;
    }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--bg); color:var(--ink); font-family:"IBM Plex Sans","Segoe UI",sans-serif; }
    .workspace-menu-popup,
    .project .tab-panel,
    .effectlib .tab-panel,
    .effects .clip-props-tab-panel,
    .effects #clip-props-main .clip-controls-groups,
    .effects #clip-props-main .effect-controls-lanes,
    .timeline-sticky-controls .row,
    .timeline-track-scroll,
    .karaoke-word-dialog-body {
      scrollbar-width:thin;
      scrollbar-color:var(--scroll-thumb) var(--scroll-track);
    }
    .workspace-menu-popup::-webkit-scrollbar,
    .project .tab-panel::-webkit-scrollbar,
    .effectlib .tab-panel::-webkit-scrollbar,
    .effects .clip-props-tab-panel::-webkit-scrollbar,
    .effects #clip-props-main .clip-controls-groups::-webkit-scrollbar,
    .effects #clip-props-main .effect-controls-lanes::-webkit-scrollbar,
    .timeline-sticky-controls .row::-webkit-scrollbar,
    .timeline-track-scroll::-webkit-scrollbar,
    .karaoke-word-dialog-body::-webkit-scrollbar {
      width:10px;
      height:10px;
      background:var(--scroll-track);
    }
    .workspace-menu-popup::-webkit-scrollbar-track,
    .project .tab-panel::-webkit-scrollbar-track,
    .effectlib .tab-panel::-webkit-scrollbar-track,
    .effects .clip-props-tab-panel::-webkit-scrollbar-track,
    .effects #clip-props-main .clip-controls-groups::-webkit-scrollbar-track,
    .effects #clip-props-main .effect-controls-lanes::-webkit-scrollbar-track,
    .timeline-sticky-controls .row::-webkit-scrollbar-track,
    .timeline-track-scroll::-webkit-scrollbar-track,
    .karaoke-word-dialog-body::-webkit-scrollbar-track {
      background:var(--scroll-track);
      border-radius:999px;
    }
    .workspace-menu-popup::-webkit-scrollbar-thumb,
    .project .tab-panel::-webkit-scrollbar-thumb,
    .effectlib .tab-panel::-webkit-scrollbar-thumb,
    .effects .clip-props-tab-panel::-webkit-scrollbar-thumb,
    .effects #clip-props-main .clip-controls-groups::-webkit-scrollbar-thumb,
    .effects #clip-props-main .effect-controls-lanes::-webkit-scrollbar-thumb,
    .timeline-sticky-controls .row::-webkit-scrollbar-thumb,
    .timeline-track-scroll::-webkit-scrollbar-thumb,
    .karaoke-word-dialog-body::-webkit-scrollbar-thumb {
      border-radius:999px;
      border:1px solid #243a55;
      background:linear-gradient(180deg, var(--scroll-thumb), #355170);
    }
    .workspace-menu-popup::-webkit-scrollbar-thumb:hover,
    .project .tab-panel::-webkit-scrollbar-thumb:hover,
    .effectlib .tab-panel::-webkit-scrollbar-thumb:hover,
    .effects .clip-props-tab-panel::-webkit-scrollbar-thumb:hover,
    .effects #clip-props-main .clip-controls-groups::-webkit-scrollbar-thumb:hover,
    .effects #clip-props-main .effect-controls-lanes::-webkit-scrollbar-thumb:hover,
    .timeline-sticky-controls .row::-webkit-scrollbar-thumb:hover,
    .timeline-track-scroll::-webkit-scrollbar-thumb:hover,
    .karaoke-word-dialog-body::-webkit-scrollbar-thumb:hover {
      background:linear-gradient(180deg, var(--scroll-thumb-hover), #476790);
    }
    .workspace-menu-popup::-webkit-scrollbar-corner,
    .project .tab-panel::-webkit-scrollbar-corner,
    .effectlib .tab-panel::-webkit-scrollbar-corner,
    .effects .clip-props-tab-panel::-webkit-scrollbar-corner,
    .effects #clip-props-main .clip-controls-groups::-webkit-scrollbar-corner,
    .effects #clip-props-main .effect-controls-lanes::-webkit-scrollbar-corner,
    .timeline-sticky-controls .row::-webkit-scrollbar-corner,
    .timeline-track-scroll::-webkit-scrollbar-corner,
    .karaoke-word-dialog-body::-webkit-scrollbar-corner {
      background:var(--scroll-track);
    }
    .app { height:100vh; display:grid; grid-template-rows:auto 1fr auto; gap:8px; padding:8px; }
    .app.preview-only { grid-template-rows:1fr; gap:0; padding:0; }
    .app.preview-only .top-stack,
    .app.preview-only .panel.project,
    .app.preview-only .panel.effectlib,
    .app.preview-only .panel.effects,
    .app.preview-only .panel.timeline,
    .app.preview-only .splitter,
    .app.preview-only .status-bar { display:none !important; }
    .app.preview-only .workspace { display:block; min-height:100vh; height:100vh; }
    .app.preview-only .panel.preview {
      border:0; border-radius:0; height:100vh; max-height:100vh; overflow:hidden;
    }
    .app.preview-only .panel.preview .head { display:none; }
    .app.preview-only .panel.preview .content { padding:12px; height:100%; }
    .app.preview-only .canvas-wrap { min-height:0; }
    .top-stack { display:grid; gap:8px; }
    .top-menu-panel {
      border:1px solid var(--line); border-radius:10px; background:#171c24; padding:3px 6px;
      display:flex; align-items:center; gap:8px; width:100%;
    }
    .top {
      display:flex; align-items:center; gap:8px; padding:8px; border:1px solid var(--line); border-radius:10px; background:#171c24;
    }
    .brand-stack { display:grid; gap:2px; }
    .title-main {
      font-family:"Chakra Petch","IBM Plex Sans","Segoe UI",sans-serif;
      letter-spacing:.06em;
      font-size:18px;
      display:flex;
      align-items:baseline;
      gap:8px;
      flex-wrap:wrap;
    }
    .title-project {
      font-size:11px;
      letter-spacing:.03em;
      color:var(--muted);
      font-weight:500;
    }
    .title-sub { color:var(--muted); font-size:12px; margin-top:2px; }
    .menu-stack { display:grid; gap:6px; justify-items:end; }
    .menu { position:relative; display:inline-block; }
    .menu > summary {
      display:inline-block; width:auto;
      list-style:none; cursor:pointer; border:1px solid #3a4658; border-radius:6px; padding:5px 9px; background:#121720; color:var(--ink); font-size:13px;
    }
    .menu > summary::-webkit-details-marker { display:none; }
    .menu-popup {
      position:absolute; top:calc(100% + 6px); left:0; min-width:220px; z-index:20;
      display:grid; gap:2px; padding:6px; border:1px solid #3a4658; border-radius:10px; background:#0f141c;
      box-shadow:0 10px 26px rgba(0,0,0,.35);
    }
    .workspace-menu-popup {
      min-width:280px;
      max-height:min(78vh, 680px);
      overflow:auto;
    }
    .menu-group-label {
      padding:5px 8px 3px;
      font-size:10px;
      text-transform:uppercase;
      letter-spacing:.08em;
      color:#8ca2c3;
      opacity:.9;
    }
    .menu-item {
      width:100%; text-align:left; border:0; border-radius:6px; padding:6px 8px;
      background:transparent; color:var(--ink); font-size:12px; font-weight:500;
    }
    .menu-item:hover { background:#1e2a3a; }
    .menu-item .menu-check {
      display:inline-block;
      width:14px;
      margin-right:7px;
      color:#79c4ff;
      opacity:0;
      transform:translateY(-.5px);
    }
    .menu-item.checked .menu-check { opacity:1; }
    .menu-item.checked {
      background:transparent;
      box-shadow:none;
      color:#e6f1ff;
    }
    .menu-sep { height:1px; background:#2f3f56; margin:4px 2px; }
    .top .spacer { flex:1; }
    .msg { padding:6px 10px; border-radius:8px; border:1px solid var(--line); font-size:12px; }
    .ok { color:#8ce9b6; }
    .err { color:#ff9fad; }
    .status-bar {
      border:1px solid var(--line); border-radius:10px; background:#171c24;
      padding:8px 10px; display:flex; align-items:center; justify-content:space-between;
      gap:10px;
      min-width:0;
    }
    #current-project {
      flex:0 1 34%;
      min-width:0;
      white-space:nowrap;
      overflow:visible;
      text-overflow:ellipsis;
    }
    .status-render {
      display:flex;
      align-items:center;
      gap:8px;
      flex:1 1 auto;
      justify-content:flex-end;
      min-width:0;
      white-space:nowrap;
      overflow:hidden;
    }
    .timeline-status-text,
    .status-render-text {
      min-width:0;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .timeline-status-text { flex:1 1 38%; }
    .status-render-text {
      flex:1 1 62%;
      max-width:clamp(240px, 52vw, 760px);
    }
    .status-log-btn { width:auto; padding:6px 10px; font-size:12px; flex:0 0 auto; }
    .render-stop-btn { width:auto; }
    .workspace {
      --left-w:320px; --fx-w:260px; --right-w:340px; --bottom-h:340px;
      --left-col:var(--left-w);
      --fx-col:var(--fx-w);
      --preview-col:minmax(0,1fr);
      --right-col:var(--right-w);
      --split-vl-col:6px;
      --split-vm-col:6px;
      --split-vr-col:6px;
      --top-row:minmax(220px,1fr);
      --split-h-row:6px;
      --bottom-row:var(--bottom-h);
      display:grid; gap:0; min-height:0; width:100%; max-width:100%; overflow:hidden;
      grid-template-columns:var(--left-col) var(--split-vl-col) var(--fx-col) var(--split-vm-col) var(--preview-col) var(--split-vr-col) var(--right-col);
      grid-template-rows:var(--top-row) var(--split-h-row) var(--bottom-row);
    }
    .panel { border:1px solid var(--line); border-radius:var(--panel-radius); background:var(--panel); min-height:0; min-width:0; overflow:auto; }
    .panel.hidden-by-workspace { display:none !important; }
    .preview.panel { display:flex; flex-direction:column; overflow:hidden; }
    .panel h2 { margin:0; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:#b7c5da; }
    .head {
      position:sticky;
      top:0;
      z-index:2;
      padding:8px 10px;
      border-bottom:1px solid var(--line);
      background:#171c24;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
    }
    .head > h2 { flex:1; }
    .head-actions {
      display:flex;
      align-items:center;
      gap:6px;
      flex:0 0 auto;
      min-width:0;
    }
    .panel-head-btn {
      width:auto;
      min-width:0;
      max-width:none;
      height:24px;
      padding:0 8px;
      border-radius:6px;
      border:1px solid #3a557a;
      background:#12243a;
      color:#d0e5ff;
      font-size:11px;
      line-height:1;
      white-space:nowrap;
    }
    .panel-head-btn:hover {
      border-color:#6aa4df;
      background:#1d3552;
      color:#eef6ff;
    }
    #clip-properties-panel-title {
      text-transform:none;
      letter-spacing:.02em;
      display:flex;
      align-items:center;
      gap:6px;
      min-width:0;
      white-space:nowrap;
      overflow:visible;
      text-overflow:ellipsis;
    }
    #clip-properties-panel-title .clip-title-input,
    #clip-properties-panel-title .clip-props-title-input {
      flex:1 1 auto;
      min-width:0;
      max-width:280px;
      height:24px;
      padding:3px 8px;
      font-size:11px;
    }
    #clip-properties-panel-title .clip-title-btn,
    #clip-properties-panel-title .clip-props-title-btn {
      width:24px;
      min-width:24px;
      max-width:24px;
      height:24px;
      border-radius:6px;
      font-size:12px;
    }
    .panel-close-btn {
      width:24px;
      min-width:24px;
      height:24px;
      padding:0;
      border-radius:6px;
      border:1px solid #32455f;
      background:#121b28;
      color:#a8bddb;
      font-size:15px;
      line-height:1;
    }
    .panel-close-btn:hover {
      background:#20324a;
      color:#d8e8ff;
      border-color:#4a658a;
    }
    .content { padding:10px; display:grid; gap:10px; min-height:0; min-width:0; }
    .project { grid-column:1; grid-row:1; }
    .project.panel { overflow:hidden; display:flex; flex-direction:column; }
    .project.panel .content {
      flex:1 1 auto;
      min-height:0;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      gap:0;
      padding:0;
    }
    .effectlib { grid-column:3; grid-row:1; }
    .effectlib.panel { overflow:hidden; display:flex; flex-direction:column; }
    .effectlib .content {
      flex:1 1 auto;
      min-height:0;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      gap:0;
      padding:0;
    }
    .preview { grid-column:5; grid-row:1; overflow:hidden; }
    .effects { grid-column:7; grid-row:1; }
    .effects.panel { overflow:hidden; display:flex; flex-direction:column; }
    .effects.panel .content {
      flex:1 1 auto;
      min-height:0;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      gap:0;
      padding:0;
    }
    .timeline { grid-column:1 / span 7; grid-row:3; }
    .timeline.panel { overflow:hidden; display:flex; flex-direction:column; }
    .timeline .content { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
    .splitter { background:#2d3645; border:1px solid #3f4f67; border-radius:6px; }
    .splitter.vl { grid-column:2; grid-row:1; cursor:col-resize; }
    .splitter.vm { grid-column:4; grid-row:1; cursor:col-resize; }
    .splitter.vr { grid-column:6; grid-row:1; cursor:col-resize; }
    .splitter.h { grid-column:1 / span 7; grid-row:2; cursor:row-resize; }
    .workspace[data-workspace-preset="effects"] .effects {
      grid-column:7;
      grid-row:1 / span 3;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }
    .workspace[data-workspace-preset="effects"] .effects > .content {
      flex:1 1 auto;
      min-height:0;
      overflow:hidden;
      gap:0;
      padding:0;
    }
    .workspace[data-workspace-preset="effects"] .timeline {
      grid-column:1 / span 5;
      grid-row:3;
    }
    .workspace[data-workspace-preset="effects"] .splitter.h {
      grid-column:1 / span 5;
      grid-row:2;
    }
    .workspace[data-workspace-preset="effects"] .splitter.vr {
      grid-column:6;
      grid-row:1 / span 3;
    }
    .splitter.disabled-splitter { display:none !important; pointer-events:none; }
    .tabs { display:flex; gap:4px; border-bottom:1px solid #334662; padding-bottom:0; }
    .tab-btn {
      width:auto; padding:7px 12px; border-radius:8px 8px 0 0;
      border:1px solid #334662; border-bottom-color:#334662; background:#131b28;
    }
    .tab-btn.active { background:#1f2f45; border-color:#4f77aa; border-bottom-color:#1f2f45; }
    .tab-panel.hidden { display:none; }
    .project .tabs {
      gap:2px;
      border-bottom:none;
      margin:0;
      padding:0;
      position:relative;
      z-index:2;
      overflow:visible;
      flex:0 0 auto;
    }
    .project .tab-btn {
      border-radius:9px 9px 0 0;
      border-color:#34527a;
      background:#122038;
      color:#cadcf6;
      margin-bottom:-1px;
      position:relative;
      z-index:1;
    }
    .project .tab-btn.active {
      background:#163158;
      border-color:#4d79b1;
      color:#e8f3ff;
      z-index:2;
    }
    .project .tab-panel {
      border:1px solid #34527a;
      border-radius:0 var(--panel-radius) var(--panel-radius) var(--panel-radius);
      background:#171c24;
      padding:6px;
      flex:1 1 auto;
      min-height:0;
      min-width:0;
      overflow:auto;
      scrollbar-gutter:stable;
      scrollbar-width:thin;
      overscroll-behavior:contain;
      position:relative;
      z-index:1;
    }
    .effectlib .tabs,
    .effects .clip-props-tabs {
      gap:2px;
      border-bottom:none;
      margin:0;
      padding:0;
      position:relative;
      z-index:2;
      overflow:visible;
      flex:0 0 auto;
    }
    .effectlib .tab-btn {
      border-radius:9px 9px 0 0;
      border-color:#34527a;
      background:#122038;
      color:#cadcf6;
      margin-bottom:-1px;
      position:relative;
      z-index:1;
    }
    .effectlib .tab-btn.active {
      background:#163158;
      border-color:#4d79b1;
      color:#e8f3ff;
      z-index:2;
    }
    .effectlib .tab-panel,
    .effects .clip-props-tab-panel {
      border:1px solid #34527a;
      border-radius:0 var(--panel-radius) var(--panel-radius) var(--panel-radius);
      background:#171c24;
      padding:6px;
      flex:1 1 auto;
      min-height:0;
      min-width:0;
      overflow-y:auto;
      overflow-x:hidden;
      scrollbar-gutter:auto;
      scrollbar-width:thin;
      overscroll-behavior:contain;
      position:relative;
      z-index:1;
    }
    .effects .clip-props-tab-panel:not(.hidden) {
      /* display:grid; */
      gap:10px;
      align-content:start;
    }
    .effects #clip-props-main.clip-props-tab-panel:not(.hidden) {
      grid-template-rows:auto minmax(220px, 1fr);
      align-content:stretch;
    }
    .effects #clip-props-main .clip-controls-groups {
      grid-template-columns:1fr;
      max-height:36vh;
      overflow:auto;
      padding-right:2px;
      align-content:start;
    }
    .effects #clip-props-main .clip-controls-group {
      min-height:0;
    }
    .effects #clip-props-main .clip-controls-list {
      grid-template-columns:1fr;
    }
    .effects #clip-props-main .effect-controls-shell {
      min-height:220px;
      overflow:hidden;
    }
    .effects #clip-props-main .effect-controls-lanes {
      overflow:auto;
    }
    .effects .clip-props-tabs .tab-btn {
      border-radius:9px 9px 0 0;
      border-color:#34527a;
      background:#122038;
      color:#cadcf6;
      margin-bottom:-1px;
      position:relative;
      z-index:0;
    }
    .effects .clip-props-tabs .tab-btn.active {
      background:#163158;
      border-color:#4d79b1;
      color:#e8f3ff;
      z-index:1;
    }
    .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
    label { display:grid; gap:4px; font-size:12px; color:var(--muted); }
    .audio-offline-zone {
      border:1px dashed transparent;
      border-radius:8px;
      padding:4px;
      transition:border-color .12s ease, background .12s ease;
    }
    .audio-offline-zone.audio-drop-active {
      border-color:#5eb8ff;
      background:linear-gradient(180deg, rgba(34,56,84,.42), rgba(22,37,58,.34));
      box-shadow:inset 0 0 0 1px rgba(136,202,255,.18);
    }
    input,select,textarea,button {
      width:100%; padding:8px 10px; border-radius:8px; border:1px solid #3a4658; background:#121720; color:var(--ink);
    }
    select { padding-right:30px; }
    button { cursor:pointer; background:#202a38; }
    .row { display:flex; gap:8px; align-items:center; }
    .row > * { flex:1; }
    .hint { color:var(--muted); font-size:12px; }
    .mono { font-family:ui-monospace,Menlo,monospace; }
    .list { border:1px solid #324055; border-radius:8px; padding:8px; background:#111722; max-height:180px; overflow:auto; }
    .list ul { margin:0; padding-left:16px; }
    .preview .content { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; gap:10px; }
    #style-preview-meta {
      min-height:22px;
      align-self:flex-start;
      padding:2px 0;
      transition:all .18s ease;
    }
    #style-preview-meta.preview-meta-notice {
      color:#ffe2ad;
      background:linear-gradient(180deg, rgba(70,48,18,.78) 0%, rgba(50,34,12,.78) 100%);
      border:1px solid #6c4c1a;
      border-radius:999px;
      padding:4px 10px;
      font-weight:600;
      letter-spacing:.01em;
      box-shadow:inset 0 0 0 1px rgba(255,209,137,.08), 0 4px 12px rgba(0,0,0,.22);
    }
    .canvas-wrap { border:1px solid #2e3b4f; border-radius:8px; overflow:hidden; background:#070b12; width:100%; flex:1 1 auto; min-height:180px; min-width:0; display:flex; align-items:center; justify-content:center; }
    #style-preview-canvas { width:auto; height:auto; max-width:100%; max-height:100%; display:block; }
    .fx-item,.tl-item { border:1px solid #314155; border-radius:8px; padding:8px; background:#121926; display:grid; gap:8px; }
    .effects #effects-list {
      display:grid;
      gap:8px;
      font-size:11px;
      line-height:1.25;
    }
    .effects #effects-list .fx-item {
      font-size:11px;
      gap:6px;
    }
    .effects #effects-list .fx-item .hint {
      font-size:11px;
    }
    .effects #effects-list .fx-item .row > .mono,
    .effects #effects-list .fx-item .row > strong.mono {
      font-size:11px;
    }
    .effects #effects-list .fx-item .row > .hint.mono {
      font-size:10px;
    }
    .clip-title-row > .clip-title-wrap { flex:1 1 auto; min-width:0; }
    .clip-title-row > .clip-title-btn,
    .clip-title-row > .icon-danger { flex:0 0 auto; }
    .clip-title-wrap { min-width:0; }
    .clip-title-text { display:block; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .clip-title-edit {
      display:flex;
      align-items:center;
      gap:6px;
      min-width:0;
    }
    .clip-title-input {
      min-width:0;
      flex:1 1 auto;
      height:28px;
      padding:5px 8px;
      border-radius:7px;
      border:1px solid #3a557a;
      background:#0f1b2c;
      color:#dcecff;
      font-size:12px;
    }
    .clip-title-btn {
      width:28px;
      min-width:28px;
      max-width:28px;
      height:28px;
      padding:0;
      border-radius:7px;
      border:1px solid #3a557a;
      background:#12243a;
      color:#d0e5ff;
      font-size:13px;
      line-height:1;
    }
    .clip-title-btn:hover {
      border-color:#6aa4df;
      background:#1d3552;
      color:#eef6ff;
    }
    .tl-item.selected { box-shadow:inset 0 0 0 1px rgba(86,168,255,.6); }
    .clip-prop-note {
      font-size:11px;
      color:#8ea3c2;
    }
    .clip-prop-sep {
      height:1px;
      background:#243348;
      opacity:.8;
    }
    .effect-controls-shell {
      border:1px solid #324055;
      border-radius:var(--surface-radius);
      background:#111722;
      display:flex;
      flex-direction:column;
      max-height:none;
      overflow-x:hidden;
      overflow-y:visible;
    }
    .effect-controls-topbar {
      position:sticky;
      top:0;
      z-index:4;
      display:grid;
      gap:6px;
      align-items:start;
      justify-items:stretch;
      overflow:visible;
      padding:8px;
      margin:0;
      border-top-left-radius:calc(var(--surface-radius) - 1px);
      border-top-right-radius:calc(var(--surface-radius) - 1px);
      border-bottom:1px solid #253245;
      background:#171f2c;
    }
    .effect-controls-summary {
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
      flex-wrap:wrap;
    }
    .effect-controls-summary .tag {
      padding:2px 7px;
      border-radius:999px;
      border:1px solid #39557b;
      background:#112038;
      color:#9fc3f2;
      font-size:11px;
    }
    .effect-controls-toolbar {
      display:flex;
      align-items:center;
      gap:6px;
      flex-wrap:nowrap;
      overflow-x:auto;
      overflow-y:hidden;
      min-width:0;
    }
    .effect-controls-toolbar .ghost-btn {
      width:auto;
      min-width:0;
      flex:0 0 auto;
      font-size:11px;
      padding:6px 9px;
      border-color:#3a4658;
      background:#131b28;
      color:#d0d9e8;
      white-space:nowrap;
    }
    .effect-controls-toolbar .ghost-btn.checked-toggle {
      border-color:#6aa4df;
      background:#20324a;
      color:#e6f3ff;
      box-shadow:inset 0 0 0 1px rgba(106,164,223,.24);
    }
    .effect-controls-help {
      position:relative;
      width:20px;
      min-width:20px;
      max-width:20px;
      height:20px;
      padding:0;
      border-radius:999px;
      border:1px solid #3d5d84;
      background:#142339;
      color:#bcd7f9;
      font-size:11px;
      font-weight:700;
      line-height:1;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:help;
    }
    .effect-controls-help::before {
      content:"";
      position:absolute;
      left:50%;
      bottom:calc(100% + 2px);
      transform:translateX(-50%) translateY(4px);
      border-width:5px 5px 0 5px;
      border-style:solid;
      border-color:#20344f transparent transparent transparent;
      opacity:0;
      pointer-events:none;
      transition:opacity .12s ease, transform .12s ease;
      z-index:7;
    }
    .effect-controls-help::after {
      content:attr(data-tooltip);
      position:absolute;
      left:50%;
      bottom:calc(100% + 7px);
      transform:translateX(-50%) translateY(4px);
      white-space:nowrap;
      padding:5px 7px;
      border-radius:6px;
      border:1px solid #355073;
      background:#20344f;
      color:#e3f1ff;
      font-size:11px;
      line-height:1.2;
      box-shadow:0 6px 16px rgba(0,0,0,.35);
      opacity:0;
      pointer-events:none;
      transition:opacity .12s ease, transform .12s ease;
      z-index:8;
    }
    .effect-controls-help:hover::before,
    .effect-controls-help:focus-visible::before,
    .effect-controls-help:hover::after,
    .effect-controls-help:focus-visible::after {
      opacity:1;
      transform:translateX(-50%) translateY(0);
    }
    .effect-controls-help:hover,
    .effect-controls-help:focus-visible {
      border-color:#7ebeff;
      background:#1d3552;
      color:#e8f4ff;
    }
    .effect-controls-lanes {
      display:grid;
      gap:8px;
      padding:8px;
      overflow:visible;
      min-height:0;
      position:relative;
      z-index:1;
    }
    .effect-lane {
      border:1px solid #314155;
      border-radius:8px;
      background:#0f1520;
      padding:7px;
      display:grid;
      gap:6px;
    }
    .effect-lane-main {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
    }
    .effect-lane-left {
      display:flex;
      align-items:center;
      gap:6px;
      min-width:0;
    }
    .effect-lane-title {
      font-size:12px;
      color:#d6e8ff;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .effect-lane-value {
      font-size:11px;
      color:#96aed0;
    }
    .effect-lane-actions {
      display:flex;
      gap:6px;
      align-items:center;
      flex-wrap:wrap;
      justify-content:flex-end;
      flex:0 0 auto;
    }
    .effect-lane-base-edit {
      display:inline-flex;
      align-items:center;
      gap:5px;
      font-size:10px;
      color:#aebfd8;
      border:1px solid #314155;
      border-radius:6px;
      padding:2px 5px;
      background:#101722;
    }
    .effect-lane-base-value {
      width:82px;
      min-width:82px;
      height:22px;
      padding:2px 5px;
      border-radius:5px;
      border:1px solid #3a4658;
      background:#121720;
      color:#d4deed;
      font-size:11px;
    }
    .effect-lane-base-value.color {
      width:34px;
      min-width:34px;
      padding:0;
      border-radius:5px;
    }
    .effect-lane-btn {
      width:auto;
      min-width:72px;
      padding:5px 8px;
      border-radius:6px;
      border:1px solid #3a4658;
      background:#131b28;
      color:#ced8e8;
      font-size:11px;
    }
    .effect-lane-btn.off {
      border-color:#3f4f66;
      background:#131d2a;
      color:#8ea7c8;
    }
    .effect-anim-toggle {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:auto;
      border:1px solid #355073;
      border-radius:6px;
      background:#13243a;
      color:#cde3ff;
      padding:4px 8px;
      font-size:11px;
      font-weight:600;
      cursor:pointer;
      user-select:none;
    }
    .effect-anim-toggle.effect-anim-toggle-icon {
      width:30px;
      min-width:30px;
      max-width:30px;
      height:24px;
      padding:0;
      font-size:13px;
      line-height:1;
      font-weight:700;
    }
    .effect-anim-toggle.off {
      border-color:#4b5360;
      background:#171d27;
      color:#7f91ab;
      box-shadow:inset 0 0 0 1px rgba(95,108,129,.16);
    }
    .effect-anim-toggle.on {
      border-color:#7fd2ff;
      background:linear-gradient(180deg,#15466f 0%, #113a5b 100%);
      color:#eefdff;
      box-shadow:inset 0 0 0 1px rgba(127,210,255,.38), 0 0 0 1px rgba(40,96,146,.28);
    }
    .effect-anim-toggle:hover,
    .effect-anim-toggle:focus-visible {
      border-color:#9ed9ff;
      color:#f2fbff;
      outline:none;
    }
    .effect-lane-track {
      height:24px;
      border:1px solid #2f4563;
      border-radius:6px;
      background:linear-gradient(180deg,#0b1320 0%, #0d1727 100%);
      position:relative;
      overflow:hidden;
      cursor:pointer;
    }
    .effect-lane-track.hidden { display:none; }
    .effect-lane-track::before {
      content:"";
      position:absolute;
      inset:0;
      background:repeating-linear-gradient(90deg, rgba(130,165,210,.1) 0 1px, transparent 1px 24px);
      pointer-events:none;
    }
    .effect-lane-playhead {
      position:absolute;
      top:0;
      bottom:0;
      width:2px;
      background:#f7b84b;
      box-shadow:0 0 0 1px rgba(247,184,75,.2);
      pointer-events:none;
      z-index:1;
    }
    .effect-lane-key {
      position:absolute;
      top:50%;
      width:6px;
      height:6px;
      margin-top:-3px;
      margin-left:-3px;
      min-width:0;
      padding:0;
      line-height:0;
      border-radius:1px;
      transform:rotate(45deg);
      border:1px solid #8ec8ff;
      background:#4d8dd1;
      cursor:pointer;
      z-index:2;
      appearance:none;
      -webkit-appearance:none;
      box-sizing:border-box;
    }
    .effect-lane-key.selected {
      background:#99cfff;
      border-color:#e0f2ff;
      box-shadow:0 0 0 1px rgba(160,218,255,.35);
    }
    .effect-lane-key.dragging {
      cursor:grabbing;
      box-shadow:0 0 0 1px rgba(144,198,255,.35), 0 0 8px rgba(128,198,255,.45);
    }
    .effect-lane-key.active {
      background:#f3bd63;
      border-color:#ffd38e;
    }
    .effect-lane-key.hold {
      transform:none;
      border-radius:3px;
      background:#7ca9de;
      border-color:#b7d4f5;
    }
    .effect-lane-curve {
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      pointer-events:none;
      z-index:1;
    }
    .effect-lane-curve polyline {
      fill:none;
      stroke:#87bdf3;
      stroke-width:1.15;
      opacity:.62;
      vector-effect:non-scaling-stroke;
      stroke-linejoin:round;
      stroke-linecap:round;
    }
    .effect-lane-kf-edit {
      display:inline-flex;
      align-items:center;
      gap:5px;
      font-size:10px;
      color:#9fb6d6;
      border:1px dashed #385172;
      border-radius:6px;
      padding:2px 5px;
      background:rgba(15,28,45,.65);
    }
    .effect-lane-kf-value {
      width:74px;
      min-width:74px;
      height:22px;
      padding:2px 5px;
      border-radius:5px;
      border:1px solid #3e5d83;
      background:#0f1b2c;
      color:#d7e8ff;
      font-size:11px;
    }
    .effect-lane-kf-value.color {
      width:34px;
      min-width:34px;
      padding:0;
      border-radius:5px;
    }
    .effect-lane-kf-hint {
      font-size:10px;
      color:#7892b4;
      padding:0 2px;
      white-space:nowrap;
    }
    body.dragging-effect-keyframe,
    body.dragging-effect-keyframe * {
      cursor:grabbing !important;
    }
    .effect-controls-empty {
      border:1px dashed #3c536f;
      border-radius:8px;
      padding:8px;
      color:#98afd0;
      font-size:11px;
      text-align:center;
    }
    .clip-controls-list {
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:5px;
    }
    .clip-controls-groups {
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:10px;
      align-items:stretch;
    }
    .clip-controls-group {
      border:1px solid #324055;
      border-radius:var(--surface-radius);
      background:#111722;
      padding:8px;
      display:grid;
      gap:8px;
      min-height:100%;
    }
    .clip-controls-group > h5 {
      margin:0;
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.05em;
      color:#aebfd8;
      padding:0;
    }
    .fx-controls-list {
      grid-template-columns:1fr;
    }
    .clip-control-row {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      border:1px solid #314155;
      border-radius:8px;
      background:#0f1520;
      padding:7px 8px;
      grid-column:1 / -1;
    }
    .clip-control-label {
      font-size:12px;
      color:#d5e6ff;
    }
    .clip-control-action {
      width:auto;
      min-width:120px;
      font-size:11px;
      padding:5px 9px;
    }
    .clip-control-field {
      display:grid;
      grid-template-columns:1fr;
      gap:4px;
      font-size:10px;
      color:#aebfd8;
      border:0;
      border-radius:0;
      background:transparent;
      padding:0;
      grid-column:1 / -1;
    }
    .clip-control-field > input,
    .clip-control-field > select,
    .clip-control-field > textarea {
      width:100%;
      border-radius:5px;
      border-color:#3a4658;
      background:#121720;
      color:#d4deed;
      font-size:11px;
      line-height:1.1;
    }
    .clip-control-field > input,
    .clip-control-field > select {
      min-height:22px;
      padding:2px 6px;
    }
    .clip-control-field > select {
      -webkit-appearance:none;
      -moz-appearance:none;
      appearance:none;
      padding-right:24px;
      background-image:
        linear-gradient(45deg, transparent 50%, #9eb1c8 50%),
        linear-gradient(135deg, #9eb1c8 50%, transparent 50%);
      background-position:
        calc(100% - 12px) 52%,
        calc(100% - 7px) 52%;
      background-size:5px 5px, 5px 5px;
      background-repeat:no-repeat;
    }
    .clip-control-field > textarea {
      min-height:52px;
      padding:4px 6px;
      resize:vertical;
    }
    .clip-control-field > input[type="color"] {
      min-height:22px;
      padding:0 1px;
    }
    .clip-control-check {
      display:flex;
      align-items:center;
      gap:8px;
      border:0;
      border-radius:0;
      background:transparent;
      padding:0;
      font-size:10px;
      color:#d0d9e8;
      grid-column:1 / -1;
      min-height:24px;
    }
    .clip-control-check > input[type="checkbox"] {
      width:12px;
      min-width:12px;
      height:12px;
      margin:0;
      padding:0;
    }
    .clip-control-field[data-ctrl-key="duration_sec"],
    .clip-control-field[data-ctrl-key="cross_in_sec"],
    .clip-control-field[data-ctrl-key="cross_out_sec"],
    .clip-control-field[data-ctrl-key="start_sec"],
    .clip-control-field[data-ctrl-key="track"],
    .clip-control-field[data-ctrl-key="blend_mode"] {
      grid-column:auto;
    }
    @media (max-width:980px) {
      .clip-controls-groups {
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
      .clip-controls-list {
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width:640px) {
      .clip-controls-groups {
        grid-template-columns:1fr;
      }
      .clip-controls-list {
        grid-template-columns:1fr;
      }
      .clip-control-field[data-ctrl-key="duration_sec"],
      .clip-control-field[data-ctrl-key="cross_in_sec"],
      .clip-control-field[data-ctrl-key="cross_out_sec"],
      .clip-control-field[data-ctrl-key="start_sec"],
      .clip-control-field[data-ctrl-key="track"],
      .clip-control-field[data-ctrl-key="blend_mode"] {
        grid-column:1 / -1;
      }
    }
    .icon-danger {
      width:auto; min-width:30px; max-width:30px; height:28px; padding:0;
      border-color:#3a4658; background:#121720; color:#c7d3e8; font-size:15px; line-height:1;
    }
    .effect-tree { display:grid; gap:8px; }
    .effect-tree details { border:1px solid #30435f; border-radius:8px; background:#0f1622; }
    .effect-tree summary {
      cursor:pointer; list-style:none; padding:8px 10px; border-bottom:1px solid #27384f;
      font-size:12px; color:#b7c8e2; text-transform:uppercase; letter-spacing:.04em;
    }
    .effect-tree details[open] > summary { background:#142034; }
    .effectlib .tree-items { display:grid; gap:6px; padding:0; }
    .tree-item {
      border:1px dashed #3a5f8e; border-radius:8px; padding:7px 8px; background:#15233a; color:#d9e8ff;
      cursor:grab; user-select:none; font-size:12px; display:flex; align-items:center; justify-content:space-between; gap:8px;
    }
    .mode-swatch { width:10px; height:10px; border-radius:2px; border:1px solid rgba(255,255,255,.45); flex:0 0 auto; }
    .mode-clip { background:#2b456b; }
    .mode-intro { background:#2f6a3a; }
    .mode-vis { background:#6b5a2a; }
    .mode-title { background:#5b5b5b; }
    .mode-text { background:#5b5b5b; }
    .mode-solid { background:#1f1f22; }
    .mode-image { background:#2a4f3c; }
    .mode-time { background:#5f6f2a; }
    .mode-gradient { background:#2b5b66; }
    .mode-shapes { background:#6a3f2c; }
    .mode-adjustment { background:#4a2f64; }
    .tree-item:active { cursor:grabbing; }
    .timeline-wrap {
      border:1px solid #314155; border-radius:8px; background:#101722; overflow:hidden;
      display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
    }
    .timeline-sticky-controls {
      position:sticky; top:0; z-index:3;
      margin:-10px -10px 0; padding:10px 10px 8px;
      background:linear-gradient(180deg,#171f2c 0%, rgba(23,31,44,.98) 72%, rgba(23,31,44,.88) 100%);
      border-bottom:1px solid #253245;
    }
    .timeline-sticky-controls .row { flex-wrap:nowrap; gap:10px; overflow-x:auto; overflow-y:hidden; }
    .clip-palette { display:flex; gap:8px; flex-wrap:nowrap; justify-content:flex-start; flex:0 0 auto; }
    .clip-dnd-hint { text-align:left; opacity:.9; white-space:nowrap; flex:0 0 auto; }
    .clip-chip {
      border:1px solid #38527a; border-radius:999px; padding:6px 10px; font-size:12px;
      background:linear-gradient(180deg,#1a2a42,#142236); color:#dce9ff; cursor:grab; user-select:none;
      box-shadow:0 0 0 1px rgba(86,168,255,.08) inset;
    }
    .clip-chip::before { content:"+ "; opacity:.8; }
    .clip-chip:active { cursor:grabbing; }
    .clip-chip[draggable="true"] { border-style:dashed; }
    .fade-chip {
      border-color:#8e7450;
      background:linear-gradient(180deg,#3a2f1d,#302616);
      color:#f5dfbb;
    }
    .timeline-track-scroll.drop-target { box-shadow:none; }
    .timeline-toolbar { display:flex; gap:8px; align-items:center; padding:8px; border-bottom:1px solid #253245; flex:0 0 auto; }
    .timeline-toolbar input[type="range"] {
      -webkit-appearance:none; appearance:none;
      -moz-appearance:none;
      height:18px; padding:0; border:0; background:transparent; cursor:pointer;
    }
    .timeline-toolbar input[type="range"]::-webkit-slider-runnable-track {
      height:6px; border-radius:999px; border:1px solid #314155;
      background:linear-gradient(180deg,#132238,#0f1a2a);
    }
    .timeline-toolbar input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance:none; appearance:none;
      width:14px; height:14px; border-radius:50%;
      margin-top:-5px; border:1px solid #66b2ff;
      background:radial-gradient(circle at 30% 30%, #9ad4ff, #4c8dd0 70%);
      box-shadow:0 0 0 2px rgba(21,31,47,.8);
    }
    .timeline-toolbar input[type="range"]::-moz-range-track {
      height:6px; border-radius:999px; border:1px solid #314155;
      background:linear-gradient(180deg,#132238,#0f1a2a);
    }
    .timeline-toolbar input[type="range"]::-moz-range-thumb {
      -moz-appearance:none; appearance:none;
      width:14px; height:14px; border-radius:50%;
      border:1px solid #66b2ff;
      background:radial-gradient(circle at 30% 30%, #9ad4ff, #4c8dd0 70%);
      box-shadow:0 0 0 2px rgba(21,31,47,.8);
    }
    .timeline-toolbar input[type="range"]:focus-visible {
      outline:2px solid #56a8ff;
      outline-offset:2px;
      border-radius:8px;
    }
    .timeline-ruler { height:26px; overflow:hidden; border-bottom:1px solid #253245; background:#0f151f; flex:0 0 auto; }
    .timeline-ruler-inner { position:relative; height:100%; }
    .timeline-tick { position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,.07); }
    .timeline-tick.major { background:rgba(255,255,255,.18); }
    .timeline-tick-label { position:absolute; top:3px; left:3px; font-size:11px; color:#97a9c5; }
    .timeline-track-scroll {
      flex:1 1 auto;
      min-height:120px;
      overflow-x:auto;
      overflow-y:auto;
      scrollbar-gutter: stable both-edges;
      scrollbar-width: thin;
    }
    .timeline-track {
      position:relative; height:160px; min-width:100%;
      background:repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 24px),#0e141d;
    }
    .timeline-row-label { position:absolute; left:8px; font-size:11px; color:#8ea3c2; pointer-events:none; z-index:2; }
    .timeline-row-divider { position:absolute; left:0; right:0; height:1px; background:#23344a; pointer-events:none; }
    .timeline-audio-wave {
      position:absolute; left:56px; right:6px; top:0; height:28px;
      border:1px solid #6c4e66; border-radius:6px;
      background:linear-gradient(180deg, #2a1623 0%, #1b1320 100%);
      box-shadow: inset 0 0 0 1px rgba(255, 184, 230, .08);
    }
    .timeline-block {
      position:absolute; top:0; height:34px; border-radius:8px; border:1px solid #4e6384; background:#1e2c40;
      padding:6px 10px; display:flex; align-items:center; justify-content:space-between; gap:8px; color:#dbe8ff; cursor:grab; user-select:none;
      z-index:1;
      transform:translateZ(0);
      -webkit-font-smoothing:antialiased;
      transition:box-shadow .12s ease, outline-color .12s ease;
    }
    .timeline-block[data-render="intro_unreal_boot"] { background:#1f3b2a; border-color:#4aa46f; }
    .timeline-block[data-render="visualizer"] { background:#3c331c; border-color:#c6a253; }
    .timeline-block[data-render="title_card"] { background:#2e3136; border-color:#7e8a9c; }
    .timeline-block[data-render="text"] { background:#2e3136; border-color:#7e8a9c; }
    .timeline-block[data-render="solid"] { background:#15181c; border-color:#5a6270; }
    .timeline-block[data-render="image"] { background:#1e3a31; border-color:#58a085; }
    .timeline-block[data-render="adjustment_layer"] { background:#352447; border-color:#a778dd; }
    .timeline-block.selected {
      outline:none;
      border-color:#6f95c1;
      box-shadow:inset 0 0 0 1px rgba(140, 188, 236, .72);
      z-index:3;
    }
    .timeline-block.primary {
      outline:none;
      border-color:#8eb4de;
      box-shadow:inset 0 0 0 2px rgba(214, 235, 255, .72);
      z-index:4;
    }
    .timeline-block.dragging { opacity:1; cursor:grabbing; z-index:20; }
    .timeline-block.resizing { cursor:ew-resize; z-index:20; }
    .timeline-block .label { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .timeline-block .dur { font-size:11px; opacity:.85; }
    .timeline-block.fade-drop-in { box-shadow: inset 0 0 0 2px rgba(102,217,255,.65); }
    .timeline-block.fade-drop-out { box-shadow: inset 0 0 0 2px rgba(255,180,71,.65); }
    .timeline-resize { width:8px; align-self:stretch; cursor:ew-resize; background:repeating-linear-gradient(180deg,rgba(255,255,255,.35) 0 2px,transparent 2px 4px); border-radius:4px; }
    .timeline-resize.hidden { display:none; }
    .timeline-fade {
      position:absolute;
      top:1px;
      bottom:1px;
      min-width:0;
      border-radius:6px;
      pointer-events:none;
      opacity:.55;
      z-index:1;
    }
    .timeline-fade.in { left:1px; background:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.26)); }
    .timeline-fade.out { right:1px; background:linear-gradient(90deg, rgba(255,255,255,.26), rgba(255,255,255,.05)); }
    .timeline-fade-handle {
      position:absolute;
      top:1px;
      bottom:1px;
      width:8px;
      border-radius:5px;
      border:1px solid rgba(210,230,255,.55);
      background:rgba(18,31,49,.8);
      cursor:ew-resize;
      z-index:2;
      pointer-events:auto;
    }
    .timeline-fade-handle.in { left:0; }
    .timeline-fade-handle.out { right:0; }
    .timeline-playhead {
      position:absolute; top:0; bottom:0; width:2px; background:#f7b84b; z-index:28; pointer-events:auto; cursor:ew-resize;
    }
    .timeline-playhead::before {
      content:""; position:absolute; top:0; bottom:0; left:-6px; right:-6px; background:transparent;
    }
    .timeline-playhead::after {
      content:""; position:absolute; top:-1px; left:-4px; width:10px; height:10px; background:#f7b84b; border-radius:2px;
    }
    .timeline-playhead-ruler {
      position:absolute; top:0; bottom:0; width:0; border-left:2px solid #f7b84b; z-index:28; pointer-events:none;
    }
    .timeline-insert-marker { position:absolute; top:0; bottom:0; width:2px; background:#56a8ff; z-index:25; pointer-events:none; }
    .timeline-new-track-preview {
      position:absolute; left:56px; right:6px;
      border:1px dashed rgba(119, 216, 174, .9);
      border-radius:8px;
      background:linear-gradient(180deg, rgba(24, 58, 48, .46), rgba(20, 47, 39, .30));
      box-shadow:inset 0 0 0 1px rgba(149, 247, 205, .18);
      z-index:24; pointer-events:none;
    }
    .timeline-new-track-badge {
      position:absolute; right:8px;
      background:#173c31; border:1px solid #4f9c80; color:#c9ffe8;
      border-radius:6px; padding:2px 8px; font-size:11px; z-index:31; pointer-events:none; white-space:nowrap;
    }
    .timeline-drop-track-highlight {
      position:absolute; left:56px; right:6px;
      border:1px solid rgba(101, 185, 255, .78);
      border-radius:8px;
      background:linear-gradient(180deg, rgba(26, 62, 96, .32), rgba(17, 44, 72, .22));
      box-shadow:inset 0 0 0 1px rgba(157, 221, 255, .14);
      z-index:23; pointer-events:none;
    }
    .timeline-drop-ghost {
      position:absolute; height:34px;
      border:1px dashed rgba(190, 226, 255, .85);
      border-radius:8px;
      background:linear-gradient(180deg, rgba(112, 165, 220, .26), rgba(78, 120, 168, .2));
      color:#d6ebff;
      font-size:11px;
      display:flex;
      align-items:center;
      justify-content:center;
      letter-spacing:.03em;
      z-index:27;
      pointer-events:none;
      text-transform:uppercase;
    }
    .timeline-drop-insert { position:absolute; top:0; bottom:0; width:2px; background:#8ec7ff; z-index:29; pointer-events:none; }
    .timeline-drop-insert::before {
      content:""; position:absolute; top:-1px; left:-5px; width:0; height:0;
      border-left:6px solid transparent; border-right:6px solid transparent; border-top:none; border-bottom:7px solid #8ec7ff;
    }
    .timeline-drop-insert::after {
      content:""; position:absolute; bottom:-1px; left:-5px; width:0; height:0;
      border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:none; border-top:7px solid #8ec7ff;
    }
    .timeline-drop-label {
      position:absolute; top:3px; transform:translateX(-50%); background:#182539; border:1px solid #4f76aa;
      color:#cde6ff; border-radius:6px; padding:2px 6px; font-size:11px; z-index:30; pointer-events:none; white-space:nowrap;
    }
    .timeline-time-tooltip { position:absolute; top:2px; transform:translateX(-50%); background:#151d2a; border:1px solid #3e5578; border-radius:6px; padding:2px 6px; font-size:11px; z-index:26; }
    .clip-menu {
      position:fixed; z-index:70; min-width:210px; padding:6px; border:1px solid #3a4a61; border-radius:10px;
      background:#0f151f; box-shadow:0 10px 28px rgba(0,0,0,.45); display:grid; gap:2px;
    }
    .clip-menu[hidden] { display:none; }
    .clip-menu button {
      width:100%; text-align:left; border:0; border-radius:7px; padding:8px 10px; background:transparent; color:#dfe7f5; font-size:12px;
    }
    .clip-menu button:hover { background:#1f2b3c; }
    .clip-menu .danger { color:#ffb5bf; }
    .clip-menu-sep { height:1px; background:#2c3b52; margin:4px 2px; }
    .clip-menu-subwrap { position:relative; }
    .clip-menu-subtrigger {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .clip-menu-caret {
      color:#8fb5df;
      opacity:.9;
      flex:0 0 auto;
    }
    .clip-menu-submenu {
      position:absolute;
      top:0;
      left:calc(100% + 4px);
      min-width:220px;
      padding:6px;
      border:1px solid #3a4a61;
      border-radius:10px;
      background:#0f151f;
      box-shadow:0 10px 28px rgba(0,0,0,.45);
      display:none;
      gap:2px;
      z-index:72;
    }
    .clip-menu[data-submenu-side="left"] .clip-menu-submenu {
      left:auto;
      right:calc(100% + 4px);
    }
    .clip-menu-subwrap:hover > .clip-menu-submenu,
    .clip-menu-subwrap:focus-within > .clip-menu-submenu {
      display:grid;
    }
    .table-wrap { overflow:auto; border:1px solid #314155; border-radius:8px; }
    table { width:100%; border-collapse:collapse; font-size:12px; }
    th,td { border-bottom:1px solid #273243; padding:6px; text-align:left; }
    .bar { height:12px; border-radius:999px; background:#0b1018; border:1px solid #273243; overflow:hidden; }
    .bar > div { height:100%; width:0%; background:linear-gradient(90deg,#2f70ff,#67d9ff); }
    .thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:6px; }
    .job-strip { max-height:136px; overflow:auto; border:1px solid #314155; border-radius:8px; padding:6px; background:#0f1520; }
    .job-strip img { width:100%; aspect-ratio:16/9; object-fit:cover; border:1px solid #314155; border-radius:6px; }
    .render-layout { display:grid; gap:10px; }
    .render-card {
      border:1px solid #324055; border-radius:10px; background:#111722; padding:10px; display:grid; gap:10px;
    }
    .render-card > h3 {
      margin:0; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:#aebfd8;
    }
    .render-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .render-status-top { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
    .render-status-top .hint { font-size:11px; }
    .render-progress-stack { display:grid; gap:8px; }
    .render-progress-row { display:grid; gap:4px; }
    .render-progress-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .render-progress-head .hint { font-size:11px; }
    #job-progress-render-bar { background:linear-gradient(90deg,#2f70ff,#67d9ff); }
    #job-progress-compress-bar { background:linear-gradient(90deg,#ff8a2f,#ffd267); }
    #job-progress-bar { background:linear-gradient(90deg,#49b65d,#82f3a8); }
    #job-status-text, #job-meta-text {
      padding:2px 0;
      line-height:1.35;
      max-width:100%;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    #job-status-text { flex:1 1 auto; min-width:0; }
    #job-frame-counter { padding:0 0 2px; line-height:1.35; }
    .render-frame { display:grid; gap:8px; }
    .render-frame #job-frame { width:100%; max-height:200px; object-fit:contain; }
    .render-cleanup { display:grid; grid-template-columns:96px 96px 1fr; gap:8px; align-items:end; }
    .render-cleanup button { width:auto; justify-self:start; }
    .jobs-table-wrap { max-height:260px; overflow:auto; border:1px solid #314155; border-radius:8px; }
    .jobs-table-wrap table { min-width:860px; }
    .jobs-table-wrap thead th { position:sticky; top:0; background:#1a2433; z-index:1; }
    .render-videos { max-height:260px; overflow:auto; border:1px solid #314155; border-radius:8px; padding:8px; background:#0f1520; }
    .render-videos-grid { display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
    .render-videos-footer { margin-top:8px; }
    .contact-form { display:grid; gap:10px; }
    .contact-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
    .contact-status.ok { color:#79d8a2; }
    .contact-status.error { color:#ff9aa8; }
    .about-grid {
      margin-top:10px;
      border:1px solid #314155;
      border-radius:8px;
      background:#111822;
      overflow:hidden;
    }
    .about-row {
      display:grid;
      grid-template-columns:160px 1fr;
      gap:8px;
      padding:8px 10px;
      border-bottom:1px solid #253245;
      align-items:center;
    }
    .about-row:last-child { border-bottom:0; }
    .about-row a,
    .about-row a:visited {
      color:#c5d3e8;
      text-decoration:underline;
      text-underline-offset:2px;
      overflow-wrap:anywhere;
    }
    .about-row a:hover { color:#dce9ff; }
    .about-plugins-list {
      margin:0;
      white-space:pre-wrap;
      max-height:180px;
      overflow:auto;
      font-size:12px;
      line-height:1.35;
    }
    #cleanup-videos-btn {
      width:100%;
      white-space:nowrap;
    }
    .render-videos .card {
      display:grid; gap:8px; padding:8px; border:1px solid #324055; border-radius:8px; background:#151d2b;
    }
    .render-videos .card-title {
      font-size:12px; color:#c5d3e8; word-break:break-word;
    }
    .render-videos .card video { width:100%; max-height:120px; border-radius:6px; background:#0a0f18; }
    .render-videos .card-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .render-videos .card-actions a { font-size:12px; color:#8ec7ff; text-decoration:none; }
    .render-videos .card-actions a:hover { text-decoration:underline; }
    .video-del-btn {
      width:30px; min-width:30px; max-width:30px; height:28px; padding:0;
      border:1px solid #3a4658; border-radius:6px; background:#121720; color:#c7d3e8; font-size:14px; line-height:1;
    }
    .video-del-btn:hover { border-color:#4f77aa; background:#1a2331; }
    .render-preloader-backdrop {
      position:fixed;
      inset:0;
      background:radial-gradient(120% 140% at 50% 10%, rgba(23,35,55,.65) 0%, rgba(8,12,19,.82) 56%, rgba(4,6,10,.88) 100%);
      backdrop-filter:blur(3px);
      z-index:95;
      display:none;
      align-items:center;
      justify-content:center;
      padding:20px;
      pointer-events:none;
    }
    .render-preloader-backdrop.open { display:flex; }
    .render-preloader-card {
      width:min(460px, 92vw);
      border:1px solid #3f516e;
      border-radius:14px;
      padding:14px 14px 12px;
      background:linear-gradient(180deg, rgba(20,29,43,.97) 0%, rgba(13,20,31,.97) 100%);
      box-shadow:0 18px 52px rgba(0,0,0,.45), inset 0 0 0 1px rgba(126, 173, 236, .08);
      display:grid;
      gap:10px;
    }
    .render-preloader-head {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
    }
    .render-preloader-title {
      font-size:12px;
      letter-spacing:.07em;
      text-transform:uppercase;
      color:#dbe6f7;
      font-weight:600;
    }
    .render-preloader-bar {
      height:10px;
      border-radius:999px;
      border:1px solid #31435f;
      background:#0a1019;
      overflow:hidden;
    }
    .render-preloader-bar > div {
      height:100%;
      width:0%;
      background:linear-gradient(90deg, #4e8dff 0%, #56d2ff 58%, #8bf3de 100%);
      transition:width .22s ease;
    }
    .splash-screen-backdrop {
      position:fixed;
      inset:0;
      z-index:94;
      display:none;
      align-items:center;
      justify-content:center;
      padding:20px;
      background:
        radial-gradient(130% 140% at 16% -6%, rgba(90,155,255,.24) 0%, rgba(13,19,32,.72) 48%, rgba(4,7,12,.92) 100%),
        linear-gradient(160deg, rgba(9,14,24,.9), rgba(5,8,14,.98));
      backdrop-filter:blur(3px);
    }
    .splash-screen-backdrop.open { display:flex; }
    .splash-screen-card {
      width:min(620px, 95vw);
      border-radius:18px;
      border:1px solid rgba(126, 166, 226, .35);
      background:linear-gradient(180deg, rgba(17,25,37,.96) 0%, rgba(9,14,22,.96) 100%);
      box-shadow:0 24px 70px rgba(0, 0, 0, .54), inset 0 0 0 1px rgba(140, 189, 251, .08);
      padding:26px 24px 22px;
      display:grid;
      gap:14px;
      position:relative;
      overflow:hidden;
    }
    .splash-screen-glow {
      position:absolute;
      top:-84px;
      right:-68px;
      width:210px;
      height:210px;
      border-radius:999px;
      background:radial-gradient(circle, rgba(118,198,255,.42) 0%, rgba(80,152,255,.18) 45%, rgba(80,152,255,0) 72%);
      pointer-events:none;
    }
    .splash-screen-tag {
      font-size:11px;
      letter-spacing:.16em;
      color:#95bbef;
      opacity:.95;
    }
    .splash-screen-card h2 {
      margin:0;
      font-family:"Chakra Petch","IBM Plex Sans","Segoe UI",sans-serif;
      letter-spacing:.05em;
      text-transform:uppercase;
      font-size:34px;
      line-height:1.05;
      color:#eaf4ff;
      text-shadow:0 0 26px rgba(97, 177, 255, .24);
    }
    .splash-screen-lead {
      margin:0;
      color:#cedbed;
      line-height:1.5;
      max-width:54ch;
      font-size:14px;
    }
    .splash-screen-badges {
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .splash-screen-badge {
      font-size:11px;
      letter-spacing:.06em;
      text-transform:uppercase;
      border:1px solid #3b5679;
      background:rgba(24, 39, 60, .8);
      color:#d4e8ff;
      padding:6px 10px;
      border-radius:999px;
    }
    .splash-screen-check {
      width:max-content;
      max-width:100%;
      min-height:34px;
      display:flex;
      align-items:center;
      gap:8px;
      padding:7px 10px;
      border-radius:9px;
      border:1px solid #314963;
      background:rgba(18, 28, 42, .78);
      color:#c0d4ee;
      font-size:12px;
    }
    .splash-screen-check input[type="checkbox"] {
      width:auto;
      margin:0;
    }
    .splash-screen-actions {
      display:flex;
      justify-content:flex-end;
    }
    .splash-screen-actions > button {
      width:auto;
      min-width:154px;
      font-weight:600;
    }
    @media (max-width: 700px) {
      .splash-screen-card { padding:20px 16px 16px; border-radius:14px; }
      .splash-screen-card h2 { font-size:28px; }
      .splash-screen-lead { font-size:13px; }
      .splash-screen-actions > button { width:100%; min-width:0; }
    }
    .modal-backdrop {
      position:fixed; inset:0; background:rgba(0,0,0,.58); z-index:60;
      display:none; align-items:center; justify-content:center; padding:20px;
    }
    .modal-backdrop.open { display:flex; }
    .modal {
      width:min(980px,96vw); max-height:82vh; display:grid; grid-template-rows:auto 1fr;
      border:1px solid #3e4e66; border-radius:10px; background:#121923; overflow:hidden;
    }
    .modal-head {
      display:flex; align-items:center; justify-content:space-between; gap:8px;
      padding:10px; border-bottom:1px solid #2a3649; background:#171f2c;
    }
    .modal-head h3 { margin:0; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:#c4d2e8; }
    .modal-body { padding:10px; overflow:auto; }
    .modal-log { margin:0; min-height:200px; white-space:pre-wrap; }
    .message-modal .modal-body { display:grid; gap:12px; }
    .message-modal-text { margin:0; color:#d7e2f5; line-height:1.45; }
    .message-modal-actions { display:flex; justify-content:flex-end; gap:8px; }
    .message-modal-actions > button { width:auto; min-width:96px; }
    .track-manage-list { display:grid; gap:8px; }
    .track-manage-row {
      display:flex; align-items:center; justify-content:space-between; gap:8px;
      border:1px solid #314155; border-radius:8px; padding:8px 10px; background:#111822;
    }
    .track-manage-row .meta { color:var(--muted); font-size:12px; }
    .track-del-btn {
      width:30px; min-width:30px; max-width:30px; height:28px; padding:0;
      border:1px solid #3a4658; border-radius:6px; background:#121720; color:#c7d3e8; font-size:14px; line-height:1;
    }
    .track-del-btn:hover { border-color:#4f77aa; background:#1a2331; }
    .track-del-btn:disabled { opacity:.45; cursor:not-allowed; }
    .options-grid { display:grid; gap:10px; }
    .options-grid .grid2 { align-items:end; }
    .options-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:6px; }
    .karaoke-form { display:grid; gap:12px; }
    .karaoke-form textarea { resize:vertical; min-height:128px; }
    .karaoke-section {
      display:grid;
      gap:8px;
      padding:10px;
      border:1px solid #2f3f56;
      border-radius:10px;
      background:linear-gradient(180deg, #101824 0%, #0f1621 100%);
    }
    .karaoke-section-title {
      font-size:11px;
      font-weight:600;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:#95b0d3;
    }
    .karaoke-grid { display:grid; gap:8px; }
    .karaoke-grid-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .karaoke-grid-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .karaoke-check-row {
      display:flex;
      align-items:flex-end;
      gap:8px;
      flex-wrap:wrap;
    }
    .karaoke-check {
      width:auto;
      min-height:36px;
      display:flex;
      align-items:center;
      gap:8px;
      padding:7px 10px;
      border:1px solid #354a67;
      border-radius:8px;
      background:#131c2a;
      color:#c6d7ef;
      font-size:12px;
    }
    .karaoke-grid > .karaoke-check { width:100%; }
    .karaoke-check input[type="checkbox"] {
      width:auto;
      margin:0;
    }
    .karaoke-note {
      padding:2px 2px 0 2px;
      color:#8fa7c8;
    }
    .karaoke-word-editor-wrap {
      border:1px solid #30445f;
      border-radius:8px;
      padding:8px;
      background:#0f1723;
      display:grid;
      gap:8px;
    }
    .karaoke-word-editor {
      display:grid;
      gap:8px;
    }
    .karaoke-word-editor-actions {
      display:flex;
      gap:8px;
      justify-content:flex-end;
      flex-wrap:wrap;
    }
    .karaoke-word-editor-actions .ghost-btn {
      width:auto;
      min-width:126px;
    }
    .karaoke-word-editor-nudge {
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:8px;
    }
    .karaoke-word-editor-nudge .ghost-btn {
      width:100%;
      font-size:11px;
      padding:7px 8px;
    }
    .karaoke-word-shift-check {
      width:auto;
      min-height:34px;
      display:flex;
      align-items:center;
      gap:8px;
      padding:7px 10px;
      border:1px solid #324660;
      border-radius:8px;
      background:#141f2e;
      color:#bfd3ef;
      font-size:12px;
    }
    .karaoke-word-shift-check input[type="checkbox"] {
      width:auto;
      margin:0;
    }
    .karaoke-word-dialog-body {
      display:grid;
      gap:10px;
      max-height:min(68vh, 640px);
      overflow:auto;
    }
    .karaoke-word-dialog-actions {
      display:flex;
      justify-content:flex-end;
      gap:8px;
      padding:0 12px 12px;
    }
    .karaoke-word-dialog-actions > button {
      width:auto;
      min-width:120px;
    }
    .karaoke-mode-hint {
      min-height:36px;
      display:flex;
      align-items:center;
      padding:7px 10px;
      border:1px dashed #334760;
      border-radius:8px;
      background:#111a27;
      color:#a9bedb;
    }
    .karaoke-actions {
      display:flex;
      justify-content:flex-end;
      gap:8px;
    }
    .karaoke-actions > button {
      width:auto;
      min-width:140px;
    }
    @media (max-width:760px) {
      .karaoke-grid-3 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
      .karaoke-grid-2 { grid-template-columns:1fr; }
      .karaoke-actions > button { width:100%; }
      .karaoke-word-editor-nudge { grid-template-columns:1fr; }
      .karaoke-word-editor-actions { justify-content:stretch; }
      .karaoke-word-editor-actions .ghost-btn { width:100%; }
    }
    @media (max-width:520px) {
      .karaoke-grid-3 { grid-template-columns:1fr; }
      .karaoke-check-row { align-items:stretch; }
    }
    @media (max-width:1100px) {
      .workspace {
        grid-template-columns:1fr;
        grid-template-rows:auto auto auto auto;
      }
      .project,.effectlib,.preview,.effects,.timeline { grid-column:1; grid-row:auto; }
      .splitter { display:none; }
      .top-menu-panel { width:100%; }
      .menu-stack { justify-items:start; }
      .top { align-items:flex-start; }
      .top .spacer { display:none; }
      .status-bar { flex-direction:row; align-items:center; gap:8px; }
      .render-cleanup { grid-template-columns:1fr; }
      .jobs-table-wrap table { min-width:680px; }
    }
    .effects .clip-props-tab-panel.clip-props-empty {
      border-style:dashed;
      border-color:#3a4a61;
      border-radius:0 var(--panel-radius) var(--panel-radius) var(--panel-radius);
      padding:12px;
      color:var(--muted);
      font-size:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
    }
    .preview-transport {
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:8px;
      row-gap:6px;
      border:1px solid #2e3b4f;
      border-radius:8px;
      padding:8px;
      background:#0d131d;
      min-width:0;
    }
    #preview-time {
      min-width:0;
      flex:1 1 96px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .preview-audio-tools {
      margin-left:auto;
      position:relative;
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:6px;
      min-width:88px;
      max-width:100%;
      flex:1 1 116px;
    }
    .preview-volume-toggle-btn { width:28px; min-width:28px; height:24px; font-size:12px; padding:0; flex:0 0 28px; }
    .preview-audio-viz {
      width:clamp(48px, 24vw, 78px);
      min-width:40px;
      max-width:78px;
      flex:1 1 78px;
      height:12px;
      display:grid;
      grid-template-rows:1fr 1fr;
      gap:2px;
      border:1px solid #305070;
      border-radius:7px;
      background:#101b2a;
      overflow:hidden;
      box-shadow:inset 0 0 0 1px rgba(153,206,255,.06);
    }
    .preview-audio-viz-row {
      width:100%;
      height:100%;
      background:rgba(53,84,117,.26);
    }
    .preview-audio-viz-fill {
      width:0%;
      height:100%;
      background:#74bfff;
      opacity:.82;
      transition:width .09s linear;
    }
    .preview-volume-popover {
      position:absolute;
      top:calc(100% + 8px);
      right:0;
      z-index:45;
      width:min(260px, calc(100vw - 24px));
      border:1px solid #315178;
      border-radius:10px;
      background:linear-gradient(180deg,#16283d 0%,#132033 100%);
      box-shadow:0 10px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(140,188,242,.08);
      padding:8px;
    }
    .preview-volume-popover.up {
      top:auto;
      bottom:calc(100% + 8px);
    }
    .preview-volume-popover[hidden] { display:none; }
    .preview-volume-control {
      display:flex;
      align-items:center;
      gap:8px;
      padding:4px 10px;
      border-radius:999px;
      background:rgba(17,28,44,.7);
      overflow:hidden;
      white-space:nowrap;
    }
    .preview-volume-control > .hint { color:#b9cde8; }
    #preview-volume-range {
      flex:1 1 auto;
      width:auto;
      min-width:72px;
      padding:0;
      border:0;
      background:transparent;
      accent-color:#74bfff;
    }
    #preview-volume-value {
      flex:0 0 48px;
      min-width:48px;
      text-align:right;
      color:#d9e9ff;
      overflow:hidden;
    }
    @media (max-width:900px) {
      .preview-transport { flex-wrap:wrap; }
      #preview-time { flex-basis:100%; }
      .preview-audio-tools { margin-left:0; }
      .preview-audio-viz { width:64px; }
      .preview-volume-popover { right:auto; left:0; }
    }
    .icon-btn { width:40px; min-width:40px; height:34px; padding:0; display:grid; place-items:center; font-size:16px; }