:root{
  --bg:#141317; --panel:#1c1b21; --panel2:#24232b; --line:#33313b; --text:#ece8df; --mute:#9a95a3;
  --acc:#f2c14e; --acc2:#ff7a59; --ok:#7bd88f; --err:#ff6b6b; --r:12px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:"Space Grotesk",system-ui,sans-serif;font-size:14px}
button,input,select,textarea{font:inherit;color:inherit}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:10px}
.logo{font-family:"Permanent Marker",cursive;font-size:26px;color:var(--acc);letter-spacing:.5px;transform:rotate(-2deg);display:inline-block}
.tag{color:var(--mute);font-size:13px}
.hbtns{display:flex;gap:8px;flex-wrap:wrap}
.btn,button{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:7px 12px;cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap}
.btn:hover,button:hover{border-color:#55525f;background:#2c2b34}
button.primary{background:var(--acc);color:#1a1612;border-color:var(--acc);font-weight:600}
button.primary:hover{background:#ffd36a}
button.danger{border-color:#5a2f33}
button:disabled{opacity:.45;cursor:not-allowed}
main{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:0;height:calc(100% - 57px)}
.stage{display:flex;flex-direction:column;gap:10px;padding:14px;min-width:0;overflow:auto}
.canvasWrap{flex:1;min-height:200px;display:flex;align-items:center;justify-content:center;background:repeating-conic-gradient(#1a191e 0 25%,#17161b 0 50%) 0 0/24px 24px;border-radius:var(--r);border:1px solid var(--line);padding:10px}
#cv{max-width:100%;max-height:calc(100vh - 290px);width:auto;height:auto;display:block;border-radius:6px;box-shadow:0 10px 40px #0008}
.transport{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#play{width:46px;height:40px;font-size:17px;padding:0}
#time{font-variant-numeric:tabular-nums;color:var(--mute);min-width:130px}
.transport label{color:var(--mute);display:flex;align-items:center;gap:6px;font-size:12px}
#tl{width:100%;height:96px;border-radius:10px;border:1px solid var(--line);background:#111014;touch-action:none;cursor:pointer;display:block}
#status{color:var(--mute);font-size:12.5px;min-height:18px}
aside.panel{border-left:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-height:0}
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tabs button{flex:1;border:0;border-radius:0;background:transparent;padding:12px 6px;color:var(--mute);border-bottom:2px solid transparent;font-weight:500}
.tabs button.on{color:var(--text);border-bottom-color:var(--acc)}
.pane{display:none;padding:14px;overflow:auto;flex:1}
.pane.on{display:block}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:12px}
.card h3{margin:0 0 8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}
.card p.hint,.hint{color:var(--mute);font-size:12.5px;margin:6px 0;line-height:1.45}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:7px 0}
.row>label{min-width:96px;color:var(--mute);font-size:12.5px}
.row input[type=range]{flex:1;min-width:100px;accent-color:var(--acc)}
.row .val{min-width:42px;text-align:right;color:var(--mute);font-variant-numeric:tabular-nums;font-size:12px}
input[type=text],input:not([type]),select,textarea{background:#15141a;border:1px solid var(--line);border-radius:8px;padding:7px 9px;outline:none}
input[type=text]:focus,textarea:focus,select:focus{border-color:var(--acc)}
input[type=color]{width:38px;height:30px;border:1px solid var(--line);border-radius:7px;background:none;padding:2px}
select{flex:1}
textarea#lyrics{width:100%;min-height:300px;resize:vertical;line-height:1.5;font-size:14px}
.full{width:100%}
.flex1{flex:1}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{border:0;border-radius:0;background:transparent;padding:6px 12px;color:var(--mute)}
.seg button.on{background:var(--acc);color:#1a1612;font-weight:600}
.toggle{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--text);user-select:none}
.toggle input{accent-color:var(--acc);width:16px;height:16px}
.layouts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.layouts button{text-align:left;padding:9px 10px;white-space:normal;line-height:1.25}
.layouts button b{display:block;font-size:13.5px}
.layouts button span{color:var(--mute);font-size:11.5px}
.layouts button.on{border-color:var(--acc);background:#2e2a20}
.swatches{display:flex;gap:6px;flex-wrap:wrap}
.swatches button{width:auto;padding:5px 9px;font-size:12px;display:flex;align-items:center;gap:6px}
.swatches button i{width:14px;height:14px;border-radius:50%;display:inline-block;border:1px solid #fff3}
.swatches button.on{border-color:var(--acc)}
#tapPad{width:100%;height:110px;font-size:22px;font-family:"Permanent Marker",cursive;background:#2a261d;border:2px dashed var(--acc);color:var(--acc);border-radius:14px;touch-action:manipulation;-webkit-user-select:none;user-select:none}
#tapPad:active{background:#3a3220}
#tapPad .sub{display:block;font-family:"Space Grotesk";font-size:13px;color:var(--text);margin-top:6px;white-space:normal;overflow:hidden;text-overflow:ellipsis}
.kbd{display:inline-block;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px;font-size:11px;color:var(--text);background:#15141a}
table.timings{width:100%;border-collapse:collapse;font-size:12.5px}
table.timings td{padding:3px 3px;border-bottom:1px solid #2b2a32;vertical-align:middle}
table.timings td.txt{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.timings tr.sec td{color:var(--acc);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding-top:9px;border-bottom:0}
table.timings tr.inst td.txt{color:var(--acc2);font-style:italic}
table.timings tr.cur{background:#2e2a20}
table.timings input{width:66px;padding:3px 5px;font-size:12px;font-variant-numeric:tabular-nums}
table.timings button{padding:2px 6px;font-size:11px}
.prog{height:8px;background:#15141a;border-radius:5px;overflow:hidden;border:1px solid var(--line)}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2))}
#outVideo{width:100%;border-radius:8px;margin-top:8px;display:none;background:#000}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);background:#2c2a33;border:1px solid var(--line);padding:10px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:.25s;z-index:20;max-width:90vw}
#toast.on{opacity:1;transform:translateX(-50%)}
.pill{display:inline-block;font-size:11px;padding:1px 7px;border-radius:20px;border:1px solid var(--line);color:var(--mute)}
.pill.ok{color:var(--ok);border-color:#2f5a3a}
.fileName{color:var(--mute);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
@media (max-width:900px){
  main{grid-template-columns:1fr;height:auto}
  aside.panel{border-left:0;border-top:1px solid var(--line)}
  .pane{overflow:visible}
  #cv{max-height:52vh}
  .canvasWrap{flex:none}
}
.modal{position:fixed;inset:0;background:#000a;display:none;align-items:center;justify-content:center;z-index:30;padding:16px}
.modal.on{display:flex}
.modalBox{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;width:min(520px,100%);max-height:80vh;overflow:auto}
#projList{list-style:none;margin:12px 0;padding:0;display:flex;flex-direction:column;gap:6px}
#projList li{display:flex;gap:6px}
#projList button.flex1{text-align:left;display:flex;flex-direction:column;gap:2px;white-space:normal}
#projList button span{color:var(--mute);font-size:12px}
a.btn{text-decoration:none;color:inherit}