@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{
  --bg-deep:#0a0e14;--bg-panel:#111820;--bg-surface:#1a222d;--bg-raised:#232d3a;
  --border:#2a3545;--text-primary:#e2e8f0;--text-secondary:#8892a0;--text-muted:#5a6472;
  --accent-blue:#4a90d9;--accent-green:#4ade80;--accent-amber:#f59e0b;
  --accent-rose:#f472b6;--accent-cyan:#22d3ee;--sequencer-bg:#0d1117;--playhead:#f59e0b;
  --checker-a:#181f28;--checker-b:#1e2733;
}
html.light{
  --bg-deep:#e8ecf0;--bg-panel:#f5f6f8;--bg-surface:#ebedf0;--bg-raised:#dfe2e6;
  --border:#c8cdd4;--text-primary:#1a1e24;--text-secondary:#4a5060;--text-muted:#8892a0;
  --accent-blue:#2b6cb0;--accent-green:#16a34a;--accent-amber:#d97706;
  --accent-rose:#db2777;--accent-cyan:#0891b2;--sequencer-bg:#e0e3e8;--playhead:#d97706;
  --checker-a:#e0e3e8;--checker-b:#d4d8de;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;background:var(--bg-deep);color:var(--text-primary);font-family:'JetBrains Mono',monospace;overflow:hidden;user-select:none}
#app{display:grid;grid-template-rows:36px 1fr 30%;grid-template-columns:240px 1fr 220px;width:100%;height:100%;gap:1px;background:var(--border)}

#toolbar{grid-column:1/-1;background:var(--bg-panel);display:flex;align-items:center;padding:0 10px;gap:6px;border-bottom:1px solid var(--border)}
#toolbar .logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;color:var(--accent-green);letter-spacing:1.5px;text-transform:uppercase}
.sep{width:1px;height:18px;background:var(--border)}
.tb{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-secondary);padding:2px 7px;font-size:10px;font-family:inherit;cursor:pointer;border-radius:3px;transition:all .12s;white-space:nowrap}
.tb:hover{border-color:var(--accent-blue);color:var(--text-primary)}
.tb.on{border-color:var(--accent-green);color:var(--accent-green);background:rgba(74,222,128,.08)}
.bpm-ctl{display:flex;align-items:center;gap:3px;font-size:9px;color:var(--text-secondary)}
.bpm-ctl input{width:38px;background:var(--bg-surface);border:1px solid var(--border);color:var(--accent-amber);text-align:center;padding:2px;font-family:inherit;font-size:9px;border-radius:3px}
.bpm-ctl input:focus{outline:none;border-color:var(--accent-amber)}
.tr-btn{min-width:24px;height:24px;background:var(--bg-surface);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:11px;transition:all .12s;padding:0 4px}
.tr-btn:hover{border-color:var(--accent-blue);color:var(--text-primary)}
.tr-btn.active{border-color:var(--accent-green);color:var(--accent-green);background:rgba(74,222,128,.08)}
.tr-btn.playing{border-color:var(--accent-green);color:var(--accent-green)}

#left-panel{background:var(--bg-panel);display:flex;flex-direction:column;overflow:hidden}
.ph{padding:6px 10px;font-size:9px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.ph button{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:13px;line-height:1}
.ph button:hover{color:var(--accent-green)}
#layer-list{flex:0 0 auto;max-height:180px;overflow-y:auto}
.ly{display:flex;align-items:center;gap:5px;padding:4px 10px;border-bottom:1px solid rgba(42,53,69,.4);cursor:pointer;transition:background .08s;font-size:10px}
.ly:hover{background:var(--bg-surface)}
.ly.sel{background:var(--bg-raised);border-left:2px solid var(--accent-blue)}
.ly-vis{width:12px;height:12px;border:1px solid var(--border);border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:7px;color:var(--accent-green);cursor:pointer;flex-shrink:0}
.ly-vis.off{color:transparent}
.ly-tag{font-size:7px;padding:1px 3px;border-radius:2px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;flex-shrink:0}
.ly-tag.bg{background:rgba(74,144,217,.15);color:var(--accent-blue)}
.ly-tag.active{background:rgba(74,222,128,.15);color:var(--accent-green)}
.ly-del{font-size:9px;color:var(--text-muted);cursor:pointer;opacity:0;transition:opacity .1s;margin-left:auto}
.ly:hover .ly-del{opacity:1}
.ly-del:hover{color:var(--accent-rose)}
.sp-item{display:flex;align-items:center;gap:4px;padding:2px 10px 2px 24px;font-size:9px;color:var(--text-muted);cursor:pointer;border-bottom:1px solid rgba(42,53,69,.2)}
.sp-item:hover{background:var(--bg-surface);color:var(--text-secondary)}
.sp-item.sel{background:rgba(74,222,128,.06);color:var(--accent-green)}
.sp-item .sp-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.sp-item .sp-del{margin-left:auto;opacity:0;font-size:8px;color:var(--text-muted)}
.sp-item:hover .sp-del{opacity:1}
.sp-item .sp-del:hover{color:var(--accent-rose)}

#palette-section{flex:1;overflow:hidden;display:flex;flex-direction:column}
.upload-zone{border:1px dashed var(--border);padding:5px;margin:5px 8px;text-align:center;font-size:9px;color:var(--text-muted);cursor:pointer;border-radius:3px}
.upload-zone:hover{border-color:var(--accent-blue);color:var(--text-secondary)}
#palette-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px}
.ts-group{margin-bottom:6px;border:1px solid var(--border);border-radius:3px;overflow:hidden}
.ts-header{padding:3px 8px;font-size:8px;color:var(--text-muted);background:var(--bg-surface);border-bottom:1px solid var(--border);display:flex;justify-content:space-between}
.ts-grid-wrap canvas{display:block;width:100%;image-rendering:pixelated;cursor:crosshair}
.multi-hint{padding:2px 6px;font-size:7px;color:var(--text-muted);background:var(--bg-surface);text-align:center;border-top:1px solid var(--border)}

#canvas-area{background:var(--bg-deep);position:relative;overflow:hidden}
#canvas-container{position:absolute;inset:0;overflow:hidden}
#grid-canvas,#tile-canvas,#overlay-canvas{position:absolute;top:0;left:0;image-rendering:pixelated}
#overlay-canvas{pointer-events:none}
.c-info{position:absolute;bottom:5px;left:5px;font-size:8px;color:var(--text-muted);background:rgba(10,14,20,.85);padding:2px 5px;border-radius:2px}

#right-panel{background:var(--bg-panel);overflow-y:auto}
.pg{padding:7px 10px;border-bottom:1px solid var(--border)}
.pg h4{font-size:8px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px}
.pr{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;font-size:10px}
.pr label{color:var(--text-secondary);font-size:9px}
.pr input,.pr select{width:64px;background:var(--bg-surface);border:1px solid var(--border);color:var(--text-primary);padding:2px 4px;font-family:inherit;font-size:9px;border-radius:2px}
.pr input:focus,.pr select:focus{outline:none;border-color:var(--accent-blue)}

/* ═══ SEQUENCER — critical alignment fix ═══ */
#sequencer{grid-column:1/-1;background:var(--sequencer-bg);display:grid;grid-template-columns:160px 1fr;border-top:2px solid var(--border);overflow:hidden}
#seq-left{background:var(--bg-panel);display:flex;flex-direction:column;border-right:1px solid var(--border);overflow:hidden}
/* Transport bar: MUST match seq-header height exactly */
#seq-transport{display:flex;align-items:center;gap:3px;padding:2px 4px;height:24px;min-height:24px;max-height:24px;border-bottom:1px solid var(--border);flex-shrink:0}
/* Labels area: scrolls vertically, starts right after transport */
#seq-labels{overflow-y:hidden;flex:1}

#seq-timeline-wrap{position:relative;overflow:auto;display:flex;flex-direction:column}
/* Header: MUST match transport height exactly */
#seq-header-canvas{display:block;flex-shrink:0;cursor:col-resize}
#seq-tracks-wrap{position:relative;flex:1;overflow:hidden}
#seq-tracks-canvas{display:block}
#seq-playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--playhead);pointer-events:none;z-index:20;box-shadow:0 0 6px rgba(245,158,11,.4)}
#seq-cursor{position:absolute;top:-2px;width:10px;height:10px;background:var(--accent-rose);border-radius:50%;z-index:25;cursor:grab;transform:translateX(-4px);box-shadow:0 0 6px rgba(244,114,182,.5)}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal{background:var(--bg-panel);border:1px solid var(--border);border-radius:6px;padding:14px;min-width:250px;position:relative}
.modal h3{font-size:11px;font-weight:600;margin-bottom:10px;font-family:'Space Grotesk',sans-serif;padding-right:20px}
.modal-close{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:15px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:3px}
.modal-close:hover{color:var(--text-primary);background:var(--bg-surface)}
.modal .fld{margin-bottom:7px}
.modal .fld label{display:block;font-size:8px;color:var(--text-secondary);margin-bottom:2px}
.modal .fld input{width:100%;background:var(--bg-surface);border:1px solid var(--border);color:var(--text-primary);padding:4px 6px;font-family:inherit;font-size:10px;border-radius:3px}
.modal .fld input:focus{outline:none;border-color:var(--accent-blue)}
.modal .acts{display:flex;gap:5px;margin-top:10px}
.modal .btn{flex:1;padding:4px;border:1px solid var(--border);background:var(--bg-surface);color:var(--text-primary);font-family:inherit;font-size:9px;cursor:pointer;border-radius:3px}
.modal .btn.pri{background:rgba(74,222,128,.12);border-color:var(--accent-green);color:var(--accent-green)}
.modal .btn:hover{border-color:var(--accent-blue)}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg-deep)}
::-webkit-scrollbar-thumb{background:var(--bg-raised);border-radius:2px}