/* ======================================================================
   Verse Studio V.1 — WHITE / LIGHT MODE ENHANCEMENT
   A dedicated light-mode layer. Every rule here is scoped under
   body.light-mode so dark themes are completely untouched.
   ====================================================================== */

/* ---------- global light surfaces ---------- */
body.light-mode{
  background:linear-gradient(180deg, #f7f5ef, #f2f0e9 40%);
}
body.light-mode .view.active{
  background:transparent;
}
body.light-mode .app-header{
  background:rgba(255,255,255,.86);
  border-bottom:1px solid #e4e0d4;
  box-shadow:0 1px 0 rgba(255,255,255,.9), 0 8px 28px rgba(60,50,20,.08);
}
body.light-mode .stepper{
  background:#f1eee6; border-color:#ddd8ca;
  box-shadow:inset 0 1px 2px rgba(80,70,30,.08);
}
body.light-mode .step-btn.active{
  background:linear-gradient(135deg, #c99a3f, #d8ad55);
  box-shadow:0 2px 10px rgba(169,123,31,.3);
}
body.light-mode .step-btn.done{ color:#5d7d2e; }
body.light-mode .icon-btn{
  background:#ffffff; border-color:#ddd8ca; color:#3a3528;
  box-shadow:0 1px 3px rgba(70,60,20,.07);
}
body.light-mode .icon-btn:hover{
  border-color:#c99a3f; color:#a97b1f;
  box-shadow:0 2px 8px rgba(169,123,31,.15);
}

/* ---------- editor panels ---------- */
body.light-mode .ed{
  background:radial-gradient(ellipse at 50% 0%, rgba(169,123,31,.05), transparent 55%), #f2f0e9;
}
body.light-mode .ed-bin,
body.light-mode .ed-player,
body.light-mode .ed-details{
  background:#ffffff;
  border:1px solid #e2ded2;
  box-shadow:0 1px 2px rgba(70,60,20,.05), 0 6px 22px rgba(70,60,20,.07);
}
body.light-mode .ed-bin-head,
body.light-mode .ed-player-head,
body.light-mode .ed-details > h2{
  background:linear-gradient(90deg, rgba(169,123,31,.08), transparent 70%);
}
body.light-mode .ed-bin-head h2,
body.light-mode .ed-player-head,
body.light-mode .ed-details > h2{ color:#a97b1f; }

/* ---------- media bin ---------- */
body.light-mode .bin-tabs{
  background:linear-gradient(180deg, rgba(169,123,31,.05), transparent);
  border-bottom:1px solid #e8e4d8;
}
body.light-mode .bin-tab{ color:#8a8578; }
body.light-mode .bin-tab:hover{ background:#f4f1e8; color:#3a3528; }
body.light-mode .bin-tab.active{
  background:linear-gradient(180deg, rgba(169,123,31,.1), transparent 85%);
  color:#a97b1f;
}
body.light-mode .bin-item{
  background:#ffffff;
  border:1px solid #e4e0d4;
  box-shadow:0 1px 2px rgba(70,60,20,.05);
}
body.light-mode .bin-item:hover{
  border-color:#c99a3f;
  box-shadow:0 4px 14px rgba(70,60,20,.1), 0 0 0 2px rgba(201,154,63,.12);
}
body.light-mode .bin-item.pinned{ border-color:#c99a3f; }
body.light-mode .bin-thumb{ background:#edeae1; }
body.light-mode .bin-wave{ background:linear-gradient(180deg,#dcecd0,#c8e0b8); }
body.light-mode .bin-badge{
  background:rgba(255,255,255,.88); color:#6a6558;
  box-shadow:0 1px 3px rgba(70,60,20,.15);
}
body.light-mode .bin-dur{ background:rgba(255,255,255,.88); color:#6a6558; }
body.light-mode .bin-del{ background:rgba(220,120,110,.9); color:#fff; }
body.light-mode .ed-search{
  background:#f7f5ef; border-color:#ddd8ca; color:#3a3528;
}
body.light-mode .ed-search:focus{ border-color:#c99a3f; box-shadow:0 0 0 3px rgba(201,154,63,.15); }
body.light-mode .folder-crumb{ background:#f7f5ef; border-color:#ddd8ca; color:#6a6558; }
body.light-mode .folder-crumb.current{ color:#a97b1f; border-color:#c99a3f; }

/* ---------- player ---------- */
body.light-mode .ed-stage{
  background:
    radial-gradient(ellipse at center, rgba(120,105,60,.06), transparent 70%),
    repeating-conic-gradient(rgba(120,105,60,.05) 0 25%, transparent 0 50%) 0 0/26px 26px,
    #e8e5db;
}
body.light-mode #edCanvas{
  box-shadow:0 12px 40px rgba(70,60,20,.28), 0 0 0 1px rgba(70,60,20,.15);
}
body.light-mode .ed-transport{
  background:linear-gradient(180deg, #faf8f2, #f4f1e9);
  border-top:1px solid #e4e0d4;
}
body.light-mode .tp-btn{
  background:#ffffff; border-color:#ddd8ca; color:#4a4538;
}
body.light-mode .tp-btn:hover{ border-color:#c99a3f; color:#a97b1f; }
body.light-mode .tp-btn.tp-play{
  background:linear-gradient(135deg, #c99a3f, #d8ad55);
  box-shadow:0 3px 12px rgba(169,123,31,.35);
}

/* ---------- timeline ---------- */
body.light-mode .tl-ruler{
  background:linear-gradient(180deg, #faf8f2, #f2efe6);
  border-bottom:1px solid #e4e0d4;
}
body.light-mode .tl-heads, body.light-mode .tl-scroll{
  border-left:1px solid #e4e0d4; border-right:1px solid #e4e0d4;
}
body.light-mode .tl-lane{
  border-bottom:1px solid #ece8dc;
}
body.light-mode .tl-lane.video{
  background:
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(120,105,60,.06) 39px, rgba(120,105,60,.06) 40px),
    linear-gradient(180deg, rgba(93,125,46,.05), transparent 90%);
}
body.light-mode .tl-lane.audio{
  background:
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(120,105,60,.05) 39px, rgba(120,105,60,.05) 40px),
    linear-gradient(180deg, rgba(169,123,31,.05), transparent 90%);
}
body.light-mode .clip{
  background:linear-gradient(180deg, #ffffff, #f4f1e9) !important;
  border:1.5px solid #d6d1c2 !important;
  box-shadow:0 2px 5px rgba(70,60,20,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
body.light-mode .clip:hover{
  border-color:#c99a3f !important;
  box-shadow:0 0 0 1px #c99a3f, 0 4px 12px rgba(70,60,20,.14);
}
body.light-mode .clip.selected{
  border-color:#c99a3f !important;
  box-shadow:0 0 0 1.5px #c99a3f, 0 0 14px rgba(201,154,63,.3);
}
/* the old capcut-style base also forces a dark clip background */
body.light-mode .clip-v{ background:linear-gradient(180deg, #eaf2e2, #dce8d2) !important; }
body.light-mode .clip-a{ background:linear-gradient(180deg, #f3ecdc, #e9dfc8) !important; }
body.light-mode .clip-head{ background:rgba(255,255,255,.85) !important; color:#5a5548 !important; }
body.light-mode .clip-v{ background:linear-gradient(180deg, #eaf2e2, #dce8d2); }
body.light-mode .clip-a{ background:linear-gradient(180deg, #f3ecdc, #e9dfc8); }

body.light-mode .clip-xfade{
  background:repeating-linear-gradient(45deg, rgba(201,154,63,.4) 0 6px, rgba(201,154,63,.15) 6px 12px);
}
body.light-mode .clip-trans{
  background:rgba(255,255,255,.92);
  box-shadow:0 0 10px rgba(201,154,63,.35);
}
body.light-mode .tl-btn, body.light-mode .tpl-btn, body.light-mode .rng-btn{
  background:#ffffff; border-color:#ddd8ca; color:#4a4538;
}
body.light-mode .tl-btn:hover, body.light-mode .tpl-btn:hover, body.light-mode .rng-btn:hover{
  border-color:#c99a3f; color:#a97b1f;
}
body.light-mode .tl-toolbar, body.light-mode .tpl-bar{
  background:linear-gradient(180deg, #faf8f2, #f3f0e7);
  border-bottom:1px solid #e4e0d4;
}

/* ---------- details / controls ---------- */
body.light-mode .det-group,
body.light-mode .ctl-sec{
  background:#ffffff;
  border-color:#e2ded2;
  box-shadow:0 1px 3px rgba(70,60,20,.05);
}
body.light-mode .det-group h3,
body.light-mode .ctl-sec > h3{
  background:linear-gradient(90deg, rgba(169,123,31,.08), transparent);
  color:#a97b1f;
  border-bottom:1px solid #e8e4d8;
}
body.light-mode .det-tab{ background:#f4f1e8; border-color:#ddd8ca; color:#6a6558; }
body.light-mode .det-tab.active{ background:rgba(201,154,63,.12); border-color:#c99a3f; color:#a97b1f; }
body.light-mode .det-row{ border-bottom:1px solid #f0ece1; }
body.light-mode input[type=text], body.light-mode input[type=number], body.light-mode select, body.light-mode textarea{
  background:#faf8f3; border-color:#ddd8ca; color:#3a3528;
}
body.light-mode input:focus, body.light-mode select:focus, body.light-mode textarea:focus{
  border-color:#c99a3f; box-shadow:0 0 0 3px rgba(201,154,63,.12);
}

/* ---------- drive (bin + window) ---------- */
body.light-mode .drive-item.bin{
  background:#ffffff; border-color:#e4e0d4;
}
body.light-mode .drive-item.bin:hover{
  background:linear-gradient(135deg, rgba(201,154,63,.08), transparent 70%), #ffffff;
  border-color:#c99a3f;
}
body.light-mode .drive-item.bin .drive-thumb{ background:linear-gradient(135deg, #f1eee5, #e6e2d6); }
body.light-mode .drive-item.bin .drive-ic{ color:#8a8578; }
body.light-mode .drive-upload-strip, body.light-mode .bin-drive-strip{
  background:#ffffff; border-color:#d9d4c6; color:#7c776a;
}
body.light-mode .drive-upload-strip:hover, body.light-mode .bin-drive-strip:hover{
  background:rgba(201,154,63,.06); border-color:#c99a3f; color:#a97b1f;
}
body.light-mode .drive-shell, body.light-mode .bulk-shell, body.light-mode .drive-preview-box{
  background:#ffffff; color:#2b2a22;
  box-shadow:0 30px 90px rgba(70,60,20,.25);
}
body.light-mode .drive-top, body.light-mode .bulk-top{
  background:linear-gradient(180deg, rgba(169,123,31,.05), transparent);
  border-bottom:1px solid #e4e0d4;
}
body.light-mode .drive-item{
  background:#ffffff; border-color:#e4e0d4;
}
body.light-mode .drive-item:hover{ border-color:#c99a3f; box-shadow:0 4px 14px rgba(70,60,20,.09); }
body.light-mode .drive-item .drive-thumb{ background:#f1eee5; }
body.light-mode .drive-item .drive-ic{ color:#8a8578; }
body.light-mode .drive-item .drive-name{ color:#2b2a22; }
body.light-mode .drive-item .drive-meta{ color:#6b665a; }
body.light-mode .drive-nav button, body.light-mode .drive-actions button, body.light-mode .drive-crumb{
  background:#f7f5ef; border-color:#ddd8ca; color:#4a4538;
}
body.light-mode .drive-nav button.active{
  background:linear-gradient(135deg, #c99a3f, #d8ad55);
  border-color:#c99a3f; color:#fff;
}
body.light-mode .drive-menu{ background:#ffffff; border-color:#ddd8ca; box-shadow:0 14px 40px rgba(70,60,20,.18); }
body.light-mode .drive-menu button:hover{ background:#f4f1e8; color:#a97b1f; }
body.light-mode .drive-preview-box header{ background:#faf8f3; border-bottom:1px solid #e4e0d4; }
body.light-mode .dpv-media{ background:#f1eee5; }
body.light-mode .dpv-media pre{ background:#faf8f3; border-color:#ddd8ca; color:#3a3528; }

/* ---------- bulk creator ---------- */
body.light-mode .bulk-rows{
  background:#ffffff; border-color:#ddd8ca; color:#3a3528;
}
body.light-mode .bulk-rows:focus{ border-color:#c99a3f; box-shadow:0 0 0 3px rgba(201,154,63,.12); }
body.light-mode .bulk-opts{ background:#faf8f3; border-color:#e2ded2; }
body.light-mode .bulk-list{ background:#faf8f3; border-color:#e2ded2; }
body.light-mode .bulk-item:hover{ background:#f1eee5; }
body.light-mode .bulk-item.selected{ background:rgba(201,154,63,.1); border-color:#c99a3f; }
body.light-mode .bulk-thumb{ background:#e8e4d8; border-color:#ddd8ca; }
body.light-mode .bulk-preview-wrap{
  background:
    radial-gradient(ellipse at center, rgba(120,105,60,.05), transparent 70%),
    repeating-conic-gradient(rgba(120,105,60,.05) 0 25%, transparent 0 50%) 0 0/22px 22px,
    #e8e5db;
  border-color:#ddd8ca;
}
body.light-mode .bulk-progress, body.light-mode .bulk-prog-bar{ background:#f1eee5; border-color:#ddd8ca; }
body.light-mode .bulk-import-row button, body.light-mode .bulk-actions button{
  background:#ffffff; border-color:#ddd8ca; color:#4a4538;
}
body.light-mode .bulk-import-row button.sample{
  background:rgba(201,154,63,.08); border-color:#c99a3f; color:#a97b1f;
}

/* ---------- settings & dialogs ---------- */
body.light-mode .set-sec{ background:#ffffff; border-color:#e2ded2; box-shadow:0 1px 3px rgba(70,60,20,.05); }
body.light-mode .set-btn{ background:#f7f5ef; border-color:#ddd8ca; color:#4a4538; }
body.light-mode .set-theme{ background:#ffffff; border-color:#e4e0d4; }
body.light-mode .set-theme.on{ border-color:#c99a3f; box-shadow:0 0 0 1px #c99a3f; }
body.light-mode .q-card{
  background:#ffffff;
  box-shadow:0 24px 80px rgba(70,60,20,.3);
}
body.light-mode .q-preset{ background:#f7f5ef; border-color:#ddd8ca; }
body.light-mode .q-preset.on{ background:rgba(201,154,63,.1); border-color:#c99a3f; }

/* ---------- home ---------- */
body.light-mode .home-shell{ background:transparent; }
body.light-mode .home-project-card{
  background:#ffffff; border-color:#e4e0d4;
  box-shadow:0 1px 3px rgba(70,60,20,.06);
}
body.light-mode .home-project-card:hover{
  border-color:#c99a3f; box-shadow:0 10px 28px rgba(70,60,20,.12);
}

/* ---------- misc ---------- */


body.light-mode .drive-empty, body.light-mode .bin-drive-empty, body.light-mode .folder-empty{
  border-color:#ddd8ca; color:#7c776a;
}
body.light-mode .drive-empty b, body.light-mode .bin-drive-empty b{ color:#3a3528; }
body.light-mode .bulk-note, body.light-mode .bulk-hint{ color:#7c776a; }

/* ---------- steps 1 & 2 frames in white mode ---------- */
body.light-mode .canvas-wrap{
  background:#f1eee5;
  border-color:#e2ded2;
  box-shadow:inset 0 1px 4px rgba(70,60,20,.06);
}
body.light-mode .canvas-wrap canvas{
  box-shadow:0 3px 16px rgba(70,60,20,.22), 0 0 0 1px rgba(70,60,20,.08);
}
body.light-mode .fmt-toolbar,
body.light-mode .sp-row{
  background:#faf8f3;
  border-color:#e2ded2;
}
body.light-mode .fmt-btn, body.light-mode .fmt-size{
  background:#ffffff; border-color:#ddd8ca; color:#4a4538;
}
body.light-mode .fmt-btn.on{ background:linear-gradient(135deg,#c99a3f,#d8ad55); border-color:#c99a3f; color:#fff; }


body.light-mode .note{ color:#7c776a; }
body.light-mode .bulk-btn{
  background:#ffffff; border-color:#ddd8ca; color:#4a4538;
}
body.light-mode .bulk-btn:hover{ border-color:#c99a3f; color:#a97b1f; }
body.light-mode .box-width-control, body.light-mode .translation-split-card{
  background:#faf8f3; border-color:#e2ded2;
}

/* ======================================================================
   WHITE TIMELINE — the whole timeline area is white in light mode
   (overrides the hardcoded dark "modern timeline" block in studio.css)
   ====================================================================== */
body.light-mode .ed-timeline{
  background:linear-gradient(180deg, #ffffff, #faf8f2);
}
body.light-mode .tl-body{ background:#ffffff; }
body.light-mode .tl-scroll{
  background:#ffffff;
  box-shadow:inset 0 1px rgba(120,105,60,.05);
}
body.light-mode .tl-scroll.timeline-drag-active{
  background:rgba(122,154,63,.07);
  box-shadow:inset 0 0 0 2px rgba(93,125,46,.5), inset 0 0 45px rgba(93,125,46,.06);
}
body.light-mode .tl-ruler{
  background:#fbfaf6;
  box-shadow:0 2px 8px rgba(70,60,20,.06);
}
body.light-mode .tl-heads{
  width:124px;
  background:#ffffff;
  border-right:1px solid #e4e0d4;
}
body.light-mode .tl-heads-top{
  background:#fbfaf6;
  border-bottom:1px solid #e4e0d4;
}
body.light-mode .tl-head{
  background:linear-gradient(90deg, rgba(120,105,60,.03), transparent);
}
body.light-mode .tl-head .nm{ color:#4a4538; }
body.light-mode .tl-toolbar{
  background:#ffffff;
  border-bottom:1px solid #e8e4d8;
}
body.light-mode .tpl-bar{
  background:linear-gradient(90deg, #ffffff, #fbf7ea);
  border-bottom:1px solid #e8e4d8;
}
body.light-mode .tl-lane{
  background:#ffffff !important;
  border-bottom:1px solid #ede9dd;
  box-shadow:inset 0 1px rgba(255,255,255,.8);
}
body.light-mode .tl-lane:nth-child(odd){ background-color:#faf9f5 !important; }
body.light-mode .tl-lane:hover{ background-color:#fbf6e9 !important; }
body.light-mode .tl-lane.video{
  background:
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(120,105,60,.05) 39px, rgba(120,105,60,.05) 40px),
    linear-gradient(180deg, rgba(93,125,46,.04), transparent 90%),
    #ffffff !important;
}
body.light-mode .tl-lane.audio{
  background:
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(120,105,60,.045) 39px, rgba(120,105,60,.045) 40px),
    linear-gradient(180deg, rgba(169,123,31,.04), transparent 90%),
    #ffffff !important;
}
body.light-mode .tl-lane.drop-hot{
  background:rgba(201,154,63,.1) !important;
  box-shadow:inset 0 0 0 1.5px #c99a3f;
}
body.light-mode .tl-lane.dnd{
  background:rgba(122,154,63,.1) !important;
  box-shadow:inset 0 0 0 1px rgba(93,125,46,.55);
}
body.light-mode .tl-dim{ background:rgba(80,70,30,.18); }
body.light-mode .clip-handle{ opacity:.5; }

/* contrast fixes found by the light/dark audit */
body.light-mode #edTimeNow, body.light-mode .tp-time b{ color:#8a6410; }
body.light-mode .bin-del{ background:#c0463a; color:#fff; }