/* ======================================================================
   Verse Studio V.1 — MODERN EDITOR UI layer
   A full visual refresh of the editor on top of studio.css. All selectors
   here are additive overrides — no layout logic is touched, so every
   existing feature keeps working. Pure CSS.
   ====================================================================== */

:root{
  --gold-soft:rgba(201,154,63,.13);
  --green-soft:rgba(122,154,63,.13);
  --surface-grad:linear-gradient(180deg, rgba(255,255,255,.028), transparent 55%);
  --card-shadow:0 2px 10px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03) inset;
  --glow-gold:0 0 0 3px rgba(201,154,63,.16);
}

/* ---------- global ---------- */
html,body{ scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
*{ scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--gold); border:2px solid transparent; background-clip:content-box; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--focus-ring); outline-offset:1px;
}
button{ transition:background .15s, border-color .15s, color .15s, transform .12s, box-shadow .15s; }
button:active{ transform:translateY(0) scale(.98); }

/* ================= HEADER ================= */
header{
  background:linear-gradient(180deg, rgba(201,154,63,.06), transparent 70%);
  padding:12px 22px;
}
header h1{
  background:linear-gradient(120deg, var(--gold) 10%, #f2d492 50%, var(--green) 95%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing:.02em;
}
.stepper{
  background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:3px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35);
}
.step-btn{ border-radius:18px; padding:6px 14px; transition:all .18s; }
.step-btn .num{ transition:all .18s; }
.step-btn:hover{ background:var(--panel2); color:var(--text); }
.step-btn.active{
  background:linear-gradient(135deg, var(--gold), #dcae4e); color:#241c05;
  box-shadow:0 2px 10px rgba(201,154,63,.35);
}
.step-btn.active .num{ background:rgba(255,255,255,.25); border-color:transparent; color:#241c05; }
.step-btn.done{ color:var(--green); }
.step-btn.done .num{ background:var(--green); border-color:var(--green); color:#0e1206; box-shadow:0 0 8px rgba(122,154,63,.45); }
.step-sep{ width:14px; opacity:.5; }
#homeBtn, #settingsBtn, #driveBtn{
  border-radius:10px; font-weight:600;
  box-shadow:var(--card-shadow);
}
#homeBtn:hover, #settingsBtn:hover, #driveBtn:hover{ transform:translateY(-1px); border-color:var(--gold); }
#driveBtn svg{ display:block; }

/* ================= EDITOR GRID / PANELS ================= */
.ed{ gap:10px; padding:10px 12px 12px; background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.025), transparent 60%), var(--bg); }
.ed-bin, .ed-player, .ed-details{
  border-radius:14px; overflow:hidden;
  background:var(--surface-grad), var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--card-shadow);
}
.ed-player{ display:flex; flex-direction:column; min-width:0; min-height:0; }

/* ---------- media bin ---------- */
.bin-tabs{
  gap:2px; padding:8px 8px 0; background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  border-bottom:1px solid var(--line);
}
.bin-tab{
  position:relative; border-radius:9px 9px 0 0; font-weight:600; font-size:11.5px;
  padding:9px 8px; display:flex; align-items:center; justify-content:center; gap:6px;
}
.bin-tab .ic{ display:inline-flex; align-items:center; }
.bin-tab .ic svg{ display:block; }
.bin-tab:hover{ background:var(--panel2); color:var(--text); }
.bin-tab.active{
  background:linear-gradient(180deg, var(--gold-soft), transparent 85%);
  color:var(--gold);
}
.bin-tab.active::after{
  content:''; position:absolute; left:14px; right:14px; bottom:-1px; height:2px;
  background:linear-gradient(90deg, var(--gold), transparent 85%); border-radius:2px;
}
.ed-bin-head{ background:var(--surface-grad); }
.ed-bin-head h2{ font-weight:800; }
.ed-imp{
  border-radius:9px; box-shadow:0 2px 8px rgba(0,0,0,.3);
  transition:transform .12s, filter .15s;
}
.ed-imp:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.ed-imp.alt{ box-shadow:none; }
.bin-item{
  border-radius:10px; box-shadow:0 1px 0 rgba(0,0,0,.25);
  transition:border-color .15s, transform .13s, box-shadow .15s;
}
.bin-item:hover{
  border-color:var(--gold); transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.4), var(--glow-gold);
}
.bin-item.pinned{ box-shadow:0 0 0 1px var(--gold), 0 2px 10px rgba(0,0,0,.3); }
.bin-thumb{ transition:transform .25s; }
.bin-item:hover .bin-thumb{ transform:scale(1.05); }
.bin-badge{ text-transform:uppercase; letter-spacing:.06em; font-weight:700; backdrop-filter:blur(3px); }
.bin-add{ box-shadow:0 2px 8px rgba(0,0,0,.45); transition:transform .12s, background .15s; }
.bin-add:hover{ transform:scale(1.18); }
.bin-del{ transition:background .15s; }
.bin-del:hover{ background:rgba(200,60,60,.85); color:#fff; }
.bin-wave{ background:linear-gradient(180deg,#0d2c1a,#10361f); }
.folder-crumb{ border-radius:8px; font-size:10.5px; }
.folder-crumb:hover{ border-color:var(--gold); color:var(--gold); }
.ed-search{
  border-radius:9px; transition:border-color .15s, box-shadow .15s;
}
.ed-search:focus{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); outline:none; }

/* ---------- player ---------- */
.ed-player-head{
  padding:9px 16px; font-weight:800; letter-spacing:.1em;
  background:linear-gradient(90deg, var(--gold-soft), transparent 75%);
  display:flex; align-items:center; gap:8px;
}
.ed-stage{
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.05), transparent 70%),
    repeating-conic-gradient(rgba(255,255,255,.02) 0 25%, transparent 0 50%) 0 0/26px 26px,
    #0a0b08;
}
#edCanvas{
  border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06);
}
.ed-transport{
  background:var(--surface-grad);
  border-top:1px solid var(--line);
}
.tp-btn{ border-radius:9px; width:32px; height:32px; transition:all .15s; }
.tp-btn:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-1px); }
.tp-btn.tp-play{
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold), #dcae4e);
  border:none; color:#241c05; font-size:14px;
  box-shadow:0 3px 14px rgba(201,154,63,.4);
}
.tp-btn.tp-play:hover{ transform:scale(1.1); color:#241c05; }
.tp-time{ font-size:12px; }
.tp-time b{ color:var(--gold); font-variant-numeric:tabular-nums; }

/* ---------- timeline ---------- */
.tl-body{
  border-radius:0 0 12px 12px; overflow:hidden;
}
.tl-heads, .tl-scroll{ border-left:1px solid var(--line); border-right:1px solid var(--line); }
.tl-scroll{ border-bottom:1px solid var(--line); }
.tl-ruler{
  background:linear-gradient(180deg, var(--panel2), var(--panel));
  border-bottom:1px solid var(--line);
}
.tl-lane.video{
  background:
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,.03) 39px, rgba(255,255,255,.03) 40px),
    linear-gradient(180deg, rgba(122,154,63,.06), transparent 90%);
}
.tl-lane.audio{
  background:
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,.022) 39px, rgba(255,255,255,.022) 40px),
    linear-gradient(180deg, rgba(201,154,63,.05), transparent 90%);
}
.tl-lane.drop-hot{
  background:rgba(201,154,63,.16) !important;
  box-shadow:inset 0 0 0 1.5px var(--gold);
}
.clip{
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.09);
  transition:border-color .12s, box-shadow .12s, transform .1s;
}
.clip:hover{
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold), 0 4px 14px rgba(0,0,0,.45);
}
.clip.selected{
  border-color:var(--gold);
  box-shadow:0 0 0 1.5px var(--gold), 0 0 18px rgba(201,154,63,.3);
}

.clip-trans{
  border-radius:7px;
  box-shadow:0 0 12px rgba(201,154,63,.35);
}
.clip-xfade{
  background:repeating-linear-gradient(45deg, rgba(201,154,63,.3) 0 6px, rgba(201,154,63,.1) 6px 12px);
}

/* ---------- details / controls ---------- */
.ed-details > h2{
  padding:10px 14px; margin:0; font-size:11px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold);
  background:linear-gradient(90deg, var(--gold-soft), transparent 75%);
  border-bottom:1px solid var(--line);
}
.det-tabs{ padding:8px 10px 0; gap:6px; }
.det-tab{
  border-radius:8px; font-size:11px; padding:6px 12px; font-weight:600;
}
.det-tab.active{ background:var(--gold-soft); color:var(--gold); border-color:var(--gold); }
.det-group{
  border:1px solid var(--line); border-radius:11px; overflow:hidden;
  background:var(--surface-grad), var(--panel);
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.det-group h3{
  background:linear-gradient(90deg, var(--gold-soft), transparent);
  padding:7px 11px; margin:0; font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  border-bottom:1px solid var(--line); color:var(--gold); font-weight:800;
}
.det-btn, .ctl-btn{ border-radius:8px; }
.det-btn:hover, .ctl-btn:hover{ border-color:var(--gold); color:var(--gold); }
.ctl-sec{ border-radius:11px; border:1px solid var(--line); overflow:hidden; background:var(--surface-grad), var(--panel); }
.ctl-sec > h3{ font-size:10px; letter-spacing:.09em; }
input[type=range]{ accent-color:var(--gold); }
input[type=checkbox]{ accent-color:var(--gold); }

/* ---------- drive bin pane ---------- */
.bin-drive-head{ background:var(--surface-grad); }
.bin-drive-head .ed-imp{ border-radius:8px; }
.bin-drive-nav button{ border-radius:7px; font-size:10.5px; }
.bin-drive-nav button.active{
  background:linear-gradient(135deg, var(--gold), #dcae4e);
  color:#241c05; border-color:var(--gold); font-weight:800;
}
.drive-item.bin{
  transition:border-color .15s, transform .12s, box-shadow .15s, background .15s;
}
.drive-item.bin:hover{
  border-color:var(--gold);
  background:linear-gradient(135deg, var(--gold-soft), transparent 70%), var(--panel);
  transform:translateX(2px);
}
.drive-item.bin .drive-thumb{ background:linear-gradient(135deg, var(--panel2), #0a0b08); }
.drive-item.bin .drive-ic{ color:var(--muted); display:flex; }
.drive-item.bin .drive-ic svg{ display:block; }
.drive-qadd{
  border-radius:7px; box-shadow:0 2px 6px rgba(0,0,0,.35);
  transition:transform .12s;
}
.drive-qadd:hover{ transform:scale(1.15); }

/* ---------- home polish ---------- */
.home-primary{
  background:linear-gradient(135deg, var(--gold), #dcae4e) !important;
  box-shadow:0 4px 16px rgba(201,154,63,.35);
}
.home-project-card{
  border-radius:14px; transition:transform .15s, border-color .15s, box-shadow .15s;
}
.home-project-card:hover{ transform:translateY(-3px); border-color:var(--gold); box-shadow:0 8px 26px rgba(0,0,0,.4); }

/* ---------- toast ---------- */



/* ---------- settings / dialogs ---------- */
.set-sec{ border-radius:13px; overflow:hidden; box-shadow:0 1px 5px rgba(0,0,0,.25); }
.set-btn:hover{ border-color:var(--gold); color:var(--gold); }
.q-card{ border-radius:16px; }
.q-preset{ transition:border-color .15s, transform .12s, box-shadow .15s; }
.q-preset:hover{ border-color:var(--gold); transform:translateY(-2px); }
.q-preset.on{
  background:linear-gradient(135deg, var(--gold-soft), transparent);
  border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 4px 14px rgba(201,154,63,.15);
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .ed{ grid-template-columns:210px minmax(0,1fr); grid-template-areas:"bin player" "timeline timeline"; }
  .ed-bin-head .ed-imp-row{ flex-wrap:wrap; }
}

/* ======================================================================
   V.1 — MODERN HEADER
   ====================================================================== */
.app-header{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:12px 22px; position:sticky; top:0; z-index:2000;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.03), 0 6px 24px rgba(0,0,0,.18);
}
.brand{ display:flex; align-items:center; }
.brand h1{
  margin:0; font-size:16px; letter-spacing:.02em; white-space:nowrap;
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(120deg, var(--gold) 10%, #f2d492 55%, var(--green));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.brand-by{
  font-size:12px; font-weight:500; color:var(--muted); letter-spacing:.02em;
  -webkit-text-fill-color:var(--muted);
}
.ver-badge{
  font-size:9px; font-weight:800; letter-spacing:.08em; color:var(--gold);
  border:1px solid var(--line); border-radius:20px; padding:2px 8px;
  background:var(--panel); -webkit-text-fill-color:var(--gold);
  display:inline-flex; align-items:center; gap:5px;
}
.ver-badge .dot{ width:5px; height:5px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); }
.stepper{
  display:flex; align-items:center; margin:0 auto;
  background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:4px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35);
}
.step-btn{
  border-radius:19px; padding:7px 16px; font-size:12px; white-space:nowrap;
}
.step-btn .num{ transition:all .18s; }
.step-btn:hover{ background:var(--panel2); color:var(--text); }
.step-btn.active{
  background:linear-gradient(135deg, var(--gold), #dcae4e); color:#241c05;
  box-shadow:0 2px 10px rgba(201,154,63,.35);
}
.step-btn.active .num{ background:rgba(255,255,255,.28); border-color:transparent; color:#241c05; }
.step-btn.done{ color:var(--green); }
.step-btn.done .num{ background:var(--green); border-color:var(--green); color:#0e1206; box-shadow:0 0 8px rgba(122,154,63,.45); }
.step-sep{ width:12px; opacity:.45; }
.header-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  border-radius:10px; padding:8px 13px; font-size:12.5px; font-weight:600; cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  transition:border-color .15s, transform .12s, box-shadow .15s, background .15s;
}
.icon-btn:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-1px); box-shadow:0 0 0 3px var(--gold-soft); }
.icon-btn svg{ display:block; }
#themeToggleBtn{ padding:8px 11px; }
#themeToggleBtn .ic-sun{ display:none; }
#themeToggleBtn.light .ic-sun{ display:block; }
#themeToggleBtn.light .ic-moon{ display:none; }
#homeBtn span, #driveBtn span, #settingsBtn span{ display:inline; }

/* ======================================================================
   V.1 — CLICKABLE UPLOAD STRIPS (click == drag & drop)
   ====================================================================== */
.drive-upload-strip, .bin-drive-strip{
  width:100%; display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--panel); color:var(--muted); cursor:pointer;
  border:1.5px dashed var(--line); border-radius:12px;
  padding:13px 16px; font-size:12.5px; font-weight:600;
  transition:border-color .15s, color .15s, background .15s, transform .12s;
  font-family:inherit;
}
.drive-upload-strip{ margin-bottom:14px; }
.bin-drive-strip{ margin-bottom:9px; padding:10px 12px; font-size:11.5px; border-radius:10px; }
.drive-upload-strip:hover, .bin-drive-strip:hover{
  border-color:var(--gold); color:var(--gold);
  background:var(--gold-soft); transform:translateY(-1px);
}
.drive-upload-strip svg, .bin-drive-strip svg{ flex-shrink:0; }
.drive-overlay.dragging .drive-upload-strip, #binPaneDrive.dragging .bin-drive-strip{
  border-color:var(--gold); background:var(--gold-soft); color:var(--gold);
}

/* ======================================================================
   V.1 — LIGHT MODE polish
   ====================================================================== */
body.light-mode 
body.light-mode .icon-btn{ box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.light-mode .ed-stage{
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.05), transparent 70%),
    repeating-conic-gradient(rgba(0,0,0,.03) 0 25%, transparent 0 50%) 0 0/26px 26px,
    #101010;
}
body.light-mode .bin-item:hover{ box-shadow:0 6px 18px rgba(0,0,0,.18), var(--glow-gold); }

body.light-mode .drive-menu{ box-shadow:0 14px 40px rgba(0,0,0,.25); }

/* ---------- universal master volume (preview / transport bar) ---------- */
.tp-master{
  display:flex; align-items:center; gap:6px; padding:2px 8px;
  background:var(--panel2); border:1px solid var(--line); border-radius:9px;
  flex-shrink:0;
}
.tp-master input[type=range]{
  width:92px; accent-color:var(--gold); cursor:pointer;
}
.tp-master b{
  font-size:10px; color:var(--muted); min-width:22px; text-align:right;
  font-variant-numeric:tabular-nums;
}
.tp-btn.tp-mute{
  width:24px; height:24px; border-radius:6px; font-size:12px;
}
.tp-btn.tp-mute .ic-muted{ display:none; }
.tp-btn.tp-mute.muted .ic-muted{ display:block; }
.tp-btn.tp-mute.muted .ic-vol{ display:none; }
.tp-btn.tp-mute.muted{ color:var(--danger); border-color:var(--danger); }
.tp-master .vol-wave{ opacity:.65; }
body.light-mode .tp-master{ background:#ffffff; border-color:#ddd8ca; }
body.light-mode .tp-master b{ color:#8a8578; }

/* smaller on mobile */
@media (max-width: 820px){
  .tp-master input[type=range]{ width:64px; }
  .tp-master{ padding:2px 6px; }
}

/* ---------- debug log button (export dialog) ---------- */
.ex-log-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--panel2); border:1px solid var(--line); color:var(--muted);
  border-radius:8px; padding:5px 10px; font-size:10.5px; font-weight:600;
  cursor:pointer; margin-left:auto; transition:border-color .15s, color .15s;
}
.ex-log-btn:hover{ border-color:var(--gold); color:var(--gold); }
.ex-log-btn svg{ display:block; }
body.light-mode .ex-log-btn{ background:#ffffff; border-color:#ddd8ca; }