:root { color-scheme: dark; --bg:#0a0b0e; --panel:#13151b; --line:#262b34; --txt:#f3f1ed; --mut:#989da8; --acc:#d7ff64; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--txt); font:14px/1.5 Inter,"Segoe UI",system-ui,sans-serif; }
header.top { display:flex; gap:10px; align-items:center; padding:10px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#0a0b0eee; z-index:5; }
header .brand { font-weight:800; } header .brand i { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--acc); margin-right:8px; }
header .sp { flex:1; } #status { color:var(--mut); font-size:12px; }
button, input, select, textarea { font:inherit; color:inherit; }
button { background:#20232a; border:1px solid var(--line); border-radius:8px; padding:6px 10px; cursor:pointer; }
button.primary { background:var(--acc); color:#15180d; border-color:var(--acc); font-weight:700; }
button.ghost { background:transparent; } button:disabled { opacity:.45; cursor:default; }
input[type=text], input[type=url], input:not([type]), select, textarea { background:#0b0c10; border:1px solid var(--line); border-radius:7px; padding:6px 8px; }
main { max-width:1500px; margin:auto; padding:14px; display:grid; gap:12px; }
.transport, .card { background:linear-gradient(145deg,#14161b,#0f1115); border:1px solid var(--line); border-radius:12px; padding:12px; }
.transport { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.transport audio { flex:1; min-width:220px; }
.work { display:grid; grid-template-columns: minmax(300px,.95fr) minmax(0,1.4fr) minmax(280px,.8fr); gap:12px; align-items:start; }
@media(max-width:1100px){ .work{grid-template-columns:1fr;} }
h2 { font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 8px; color:#cfcdc6; }
.hint { font-size:11px; color:var(--mut); }
textarea.raw { width:100%; min-height:130px; font:11px/1.5 ui-monospace,Consolas,monospace; }
table.lines { width:100%; border-collapse:collapse; font-size:12px; }
table.lines td, table.lines th { border-bottom:1px solid #22262e; padding:5px 4px; vertical-align:middle; }
table.lines input { width:100%; background:#0b0c10; border:1px solid #30323a; border-radius:5px; padding:4px; }
table.lines input.t { width:70px; font:11px ui-monospace,monospace; }
.stage { position:relative; background:#0d0e12; border-radius:10px; overflow:hidden; min-height:360px; }
.stage braccato-lyrics { display:block; height:360px; overflow:auto; --blyrics-font-size:34px; }
#fx { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.timeline .lane { position:relative; height:34px; background:#0b0c10; border:1px solid #22262e; border-radius:6px; margin:4px 0; overflow:hidden; cursor:pointer; }
.timeline .clip { position:absolute; top:3px; bottom:3px; background:#2a3040; border:1px solid #3a4356; border-radius:5px; font-size:10px; padding:2px 5px; overflow:hidden; white-space:nowrap; cursor:grab; }
.timeline .clip.sel { outline:2px solid var(--acc); }
.timeline .clip.lyric { background:#173a45; border-color:#2a6b7d; } .timeline .clip.image { background:#3a2a45; border-color:#7d4a9d; }
.timeline .ph { position:absolute; top:0; bottom:0; width:2px; background:var(--acc); }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .grid2 .wide { grid-column:1/-1; }
label.f { display:grid; gap:4px; font-size:11px; color:#c7c6c1; }
.assets { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:8px; }
.assets figure { margin:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#0b0c10; }
.assets img { width:100%; height:70px; object-fit:cover; display:block; }
.assets figcaption { font-size:10px; padding:4px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kf { font:11px ui-monospace,monospace; color:#c4d5a0; }
footer { color:var(--mut); font-size:11px; padding:16px; text-align:center; }