:root{
  --bg:#0b0e14;
  --panel:#121722;
  --panel-2:#0f1420;
  --stroke:#20283a;
  --gold:#d4af37;
  --gold-2:#b9922f;
  --text:#eaf4ff;
  --muted:#8aa1b4;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,Segoe UI,Roboto,Ubuntu,Arial}

#app{display:grid;grid-template-columns:280px 1fr 300px;grid-template-rows:auto 1fr;gap:0;height:100vh}

/* Left */
.sidebar{
  grid-row:1/3; grid-column:1;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border-right:1px solid var(--stroke);
  padding:14px 12px 10px;
  overflow:auto;
}
.logo{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;font-weight:900;letter-spacing:.6px;
  background:radial-gradient(120% 120% at 30% 20%, #1a2030 0 40%, #0f1420 60% 100%);
  border:1px solid #223049;color:var(--gold);
  text-shadow:0 0 18px rgba(212,175,55,.6);
  box-shadow:0 0 18px rgba(212,175,55,.18), inset 0 0 14px rgba(212,175,55,.12);
  margin-bottom:10px;
}
.side-title{margin:8px 0 10px;font-weight:800;color:#fff}
.mt{margin-top:18px}

.uploader{display:grid;gap:8px;margin-bottom:12px}
.hint{color:var(--muted);font-size:12px}
.btn{
  background:#1a2232;border:1px solid var(--stroke);color:#fff;
  padding:8px 10px;border-radius:10px;cursor:pointer;transition:.15s;
}
.btn:hover{border-color:#2f3b57;background:#202a3e}
.btn-gold{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#111;border:0;font-weight:800}
.btn.danger{background:#3a1e24;border:1px solid #7a2a38}
.spacer{flex:1}

.assets{display:grid;gap:8px}
.asset{
  display:grid;grid-template-columns:56px 1fr;gap:8px;align-items:center;
  border:1px solid var(--stroke);border-radius:10px;padding:6px 8px;background:#0f1420;
}
.asset .thumb{width:56px;height:36px;background:#1f2636;border-radius:6px;overflow:hidden;display:grid;place-items:center;color:#9fb5cc;font-size:11px}
.asset .name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asset .meta{color:var(--muted);font-size:12px}

/* Center */
.preview{grid-column:2;display:grid;grid-template-rows:52px 1fr 240px;border-right:1px solid var(--stroke)}
.topbar{display:flex;align-items:center;padding:8px 10px;border-bottom:1px solid var(--stroke);background:#0e1420}
.brand{display:flex;align-items:center;gap:8px}
.pro{margin-left:8px;background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#111;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:900}
.preview-wrap{display:grid;place-items:center;background:#000;position:relative}
.pv{max-width:100%;max-height:100%;background:#000;border:1px solid var(--stroke);border-radius:8px}
.controls{
  position:absolute;left:16px;right:16px;bottom:16px;
  display:flex;align-items:center;gap:8px;
  background:rgba(10,14,22,.6);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px 10px;
}
.zoomlabel{color:#c7d7e9;font-size:12px}
.time{font-variant-numeric:tabular-nums;color:#d7e8ff}

/* Timeline */
.timeline{position:relative;background:#0c111b;border-top:1px solid var(--stroke)}
.ruler{height:28px;border-bottom:1px solid var(--stroke);position:relative;background:#121827}
.ruler .tick{position:absolute;top:0;height:100%;width:1px;background:#273149}
.ruler .label{position:absolute;top:6px;transform:translateX(-50%);font-size:11px;color:#9fb5cc}

.tracks{position:relative;height:212px;overflow:auto}
.track-row{position:relative;border-bottom:1px solid #1a2236;height:52px}
.track-label{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-size:11px;color:#9fb5cc}

.clips{position:absolute;left:60px;right:8px;top:4px;bottom:4px}
.clip{
  position:absolute;height:42px;border-radius:8px;
  background:linear-gradient(180deg,#1e273b,#192338);
  border:1px solid #2a3550;color:#dbe8ff;display:flex;align-items:center;gap:8px;
  padding:0 8px;cursor:grab;user-select:none;
}
.clip.video{background:linear-gradient(180deg,#1f2b3e,#1b2436)}
.clip.audio{background:linear-gradient(180deg,#1e2a22,#17251b)}
.clip.image{background:linear-gradient(180deg,#2a2330,#211b28)}
.clip.selected{outline:2px solid var(--gold);z-index:3}
.handle{width:6px;height:100%;background:#2c3753;border-right:1px solid #3a4a72;border-radius:8px 0 0 8px}
.thumb{width:54px;height:32px;background:#101521;border-radius:6px;overflow:hidden;display:grid;place-items:center;font-size:10px;color:#94a9c6}
.title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}

.playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--gold);left:60px;pointer-events:none}

/* Right */
.props{
  grid-row:1/3; grid-column:3;
  border-left:1px solid var(--stroke);
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  padding:14px 12px;
  overflow:auto;
}
.prop-content .grid{
  display:grid;grid-template-columns:110px 1fr;gap:8px;align-items:center;margin:8px 0 10px;
}
.prop-content input[type="number"], .prop-content input[type="range"]{
  width:100%;background:#111a2a;border:1px solid #24304a;border-radius:8px;color:#cfe5ff;padding:6px 8px
}
.row{display:flex;gap:8px}
.muted{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:6px 10px;border-radius:999px;border:1px solid #314264;background:#0f1626;color:#dbe8ff;font-size:12px;cursor:pointer}
.chip:hover{border-color:var(--gold);color:#fff}
