:root {
  --g:#00ff41; --gd:#00882a; --gx:rgba(0,255,65,.12);
  --bg:#020902; --bg2:#050f05; --bg3:#030b03;
  --am:#ffb000; --cy:#00ffff; --rd:#ff3300; --pu:#cc44ff;
  --wh:#e8ffe8;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; overflow:hidden; background:var(--bg); }
body{
  color:var(--g);
  font-family:'Press Start 2P',monospace;
  font-size:9px;
  display:flex; flex-direction:column;
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background:repeating-linear-gradient(
    0deg,transparent,transparent 2px,rgba(0,0,0,.1) 2px,rgba(0,0,0,.1) 4px
  );
}

/* ══════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════ */
.hdr{
  background:var(--bg2); border-bottom:2px solid #005500;
  padding:7px 14px; display:flex; align-items:center; gap:12px; flex-shrink:0;
  box-shadow:0 2px 16px rgba(0,255,65,.10);
}
.hdr-title{
  font-size:11px; letter-spacing:3px;
  text-shadow:0 0 14px var(--g),0 0 40px rgba(0,255,65,.3);
}
.hdr-sub{ color:var(--gd); font-size:6px; letter-spacing:2px; margin-top:3px; }
.hdr-right{ margin-left:auto; display:flex; gap:5px; align-items:center; }
.hdr-sep{ width:1px; height:20px; background:#003300; margin:0 3px; flex-shrink:0; }
.back-btn{
  color:var(--gd); font-size:7px; text-decoration:none;
  border:1px solid #004400; padding:5px 10px; border-radius:2px;
  font-family:'Press Start 2P',monospace; transition:all .1s;
}
.back-btn:hover{ border-color:var(--g); color:var(--g); }

/* ══════════════════════════════════════════════════════
   TOOLBAR
══════════════════════════════════════════════════════ */
.toolbar{
  background:var(--bg3); border-bottom:1px solid #003300;
  padding:3px 8px; display:flex; align-items:center;
  flex-wrap:nowrap; flex-shrink:0; overflow-x:auto; gap:0;
}
.toolbar::-webkit-scrollbar{ height:3px; }
.toolbar::-webkit-scrollbar-thumb{ background:#003300; }

.tb-row{ gap:0; }
.tb-group{
  display:flex; align-items:center; gap:3px;
  padding:0 5px; flex-shrink:0;
}
.tb-div{
  width:1px; height:24px; background:#003300;
  flex-shrink:0; margin:0 2px;
}
.tb-lbl{ color:#004d00; font-size:6px; letter-spacing:1px; white-space:nowrap; flex-shrink:0; }
.tb-lbl2{ color:#004d00; font-size:5px; letter-spacing:.5px; white-space:nowrap; flex-shrink:0; }

/* sub-agrupador inline label+control */
.grid-sub{
  display:flex; align-items:center; gap:2px;
}

/* ══════════════════════════════════════════════════════
   TRACK CARDS (com M/S)
══════════════════════════════════════════════════════ */
.track-card{
  display:flex; flex-direction:column; align-items:center;
  border:1px solid #003300; border-radius:3px;
  padding:2px 4px; cursor:pointer; transition:all .15s;
  gap:2px; flex-shrink:0; min-width:52px;
}
.track-card:hover{ border-color:#005500; background:rgba(0,255,65,.04); }

.tc-name{
  font-family:'Press Start 2P',monospace; font-size:6px;
  letter-spacing:.5px; padding:1px 2px;
}
.t-melody{ color:var(--g); }
.t-bass  { color:var(--am); }
.t-arp   { color:var(--cy); }
.t-drums { color:var(--rd); }

/* track ativa */
#tc-melody.tc-active, .tc-name.t-melody.act{ text-shadow:0 0 8px var(--g); }
#tc-bass.tc-active   { border-color:#664600; background:rgba(255,176,0,.07); }
#tc-arp.tc-active    { border-color:#006666; background:rgba(0,255,255,.06); }
#tc-drums.tc-active  { border-color:#661400; background:rgba(255,51,0,.07); }
#tc-melody.tc-active { border-color:#005500; background:rgba(0,255,65,.09); }

/* muted */
.tc-muted{ opacity:.4; }

/* M/S row */
.tc-ms{ display:flex; gap:2px; }
.ms-btn{
  font-family:'Press Start 2P',monospace; font-size:5px;
  padding:2px 4px; border-radius:2px; cursor:pointer;
  background:transparent; border:1px solid; transition:all .1s;
  line-height:1;
}
.ms-m{ border-color:#440000; color:#882200; }
.ms-m:hover{ border-color:#ff3300; color:#ff3300; background:rgba(255,51,0,.1); }
.ms-m.ms-active{ background:#ff3300; color:#000; border-color:#ff3300; }

.ms-s{ border-color:#444400; color:#888800; }
.ms-s:hover{ border-color:#ffff00; color:#ffff00; background:rgba(255,255,0,.08); }
.ms-s.ms-s-active{ background:#ffff00; color:#000; border-color:#ffff00; }

/* ══════════════════════════════════════════════════════
   BOTÕES
══════════════════════════════════════════════════════ */
.btn{
  background:transparent; border:1px solid #004400; color:var(--gd);
  font-family:'Press Start 2P',monospace; font-size:7px;
  padding:5px 8px; cursor:pointer; border-radius:2px;
  transition:all .1s; white-space:nowrap;
}
.btn:hover{ border-color:var(--g); color:var(--g); background:var(--gx); }
.btn:active{ transform:scale(.96); }
.btn.act{ border-color:var(--g); color:#000; background:var(--g); }
.btn.act:hover{ background:#00ff80; }

.btn.rd { border-color:#661400; color:#ff5500; }
.btn.rd:hover { border-color:var(--rd); color:var(--rd); background:rgba(255,51,0,.08); }
.btn.am { border-color:#664600; color:var(--am); }
.btn.am:hover { border-color:var(--am); background:rgba(255,176,0,.08); }
.btn.pu { border-color:#550066; color:var(--pu); }
.btn.pu:hover { border-color:var(--pu); background:rgba(204,68,255,.08); }
.btn.cy { border-color:#005555; color:var(--cy); }
.btn.cy:hover { border-color:var(--cy); background:rgba(0,255,255,.07); }
.btn.cy.act{ border-color:var(--cy); color:#000; background:var(--cy); }
.btn.cy.act:hover{ background:#80ffff; }

.btn.tp-all{ border-color:#336600; color:#88ff00; }
.btn.tp-all:hover{ border-color:#88ff00; color:#88ff00; background:rgba(136,255,0,.08); }

.btn:disabled{ opacity:.3; cursor:not-allowed; }

/* ══════════════════════════════════════════════════════
   TRACK TABS (legacy .t-tab fallback)
══════════════════════════════════════════════════════ */
.t-tab{ padding:5px 9px; font-size:7px; cursor:pointer; border:1px solid; border-radius:2px; transition:all .1s; background:transparent; font-family:'Press Start 2P',monospace; }
.t-tab[data-t=melody]{ border-color:#005500; color:var(--g); }
.t-tab[data-t=bass]  { border-color:#664600; color:var(--am); }
.t-tab[data-t=arp]   { border-color:#006666; color:var(--cy); }
.t-tab[data-t=drums] { border-color:#661400; color:var(--rd); }
.t-tab.act[data-t=melody]{ background:rgba(0,255,65,.12); }
.t-tab.act[data-t=bass]  { background:rgba(255,176,0,.09); }
.t-tab.act[data-t=arp]   { background:rgba(0,255,255,.08); }
.t-tab.act[data-t=drums] { background:rgba(255,51,0,.09); }

/* ══════════════════════════════════════════════════════
   FORM CONTROLS
══════════════════════════════════════════════════════ */
.tb-sel{
  background:#001200; border:1px solid #004400; color:var(--g);
  font-family:'Press Start 2P',monospace; font-size:7px;
  padding:4px 5px; border-radius:2px; cursor:pointer;
}
.tb-sel:focus{ outline:none; border-color:var(--g); }

input.tb-num{
  background:#001200; border:1px solid #004400; color:var(--g);
  font-family:'Press Start 2P',monospace; font-size:7px;
  padding:4px 5px; border-radius:2px; width:52px; text-align:center;
  -moz-appearance:textfield;
}
input.tb-num::-webkit-inner-spin-button{ -webkit-appearance:none; }
input.tb-num:focus{ outline:none; border-color:var(--g); }

/* swing compact */
.swing-num{ width:34px !important; }

/* ══════════════════════════════════════════════════════
   CANVAS AREA
══════════════════════════════════════════════════════ */
.ed-main{ flex:1; overflow:hidden; position:relative; display:flex; flex-direction:column; }
#edCanvas{ display:block; flex:1; }

#edStatus{
  position:absolute; bottom:6px; right:10px; pointer-events:none;
  font-size:7px; color:var(--am); text-shadow:0 0 8px var(--am);
  letter-spacing:1px;
}

/* ══════════════════════════════════════════════════════
   TRANSPORT
══════════════════════════════════════════════════════ */
.transport{
  background:var(--bg2); border-top:1px solid #003300;
  padding:6px 10px; display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.led{ width:10px; height:10px; border-radius:50%; background:#0a1a0a; flex-shrink:0; }
.led.on{ background:var(--g); box-shadow:0 0 10px var(--g); }
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.led.on{ animation:blink .5s infinite; }
.beat-disp{ color:var(--am); font-size:9px; text-shadow:0 0 8px var(--am); min-width:112px; }

/* Loop badge no transport */
.loop-badge{
  display:none; align-items:center; padding:3px 7px;
  font-size:6px; letter-spacing:1px;
  border:1px solid #005555; color:var(--cy);
  border-radius:2px; background:rgba(0,255,255,.06);
  flex-shrink:0;
}
.loop-badge-on{ display:flex !important; animation:blink 1s infinite; }

.seek-wrap{ flex:1; display:flex; align-items:center; gap:8px; }
.seek-time{ font-size:7px; color:var(--gd); min-width:38px; text-align:center; }
.seek-track{
  flex:1; height:8px; background:#001500; border:1px solid var(--gd);
  border-radius:2px; position:relative; cursor:pointer; overflow:visible;
}
.seek-track:hover{ border-color:var(--g); box-shadow:0 0 8px rgba(0,255,65,.15); }

/* Loop region highlight dentro do seek */
.seek-loop{
  display:none; position:absolute; top:0; height:100%;
  background:rgba(0,255,255,.18); border-left:1px solid var(--cy); border-right:1px solid var(--cy);
  pointer-events:none;
}

.seek-fill{
  position:absolute; left:0; top:0; height:100%; background:var(--g);
  border-radius:2px 0 0 2px; box-shadow:0 0 5px rgba(0,255,65,.5);
  pointer-events:none; width:0%;
}
.seek-thumb{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:12px; height:12px; background:var(--g); border-radius:50%;
  box-shadow:0 0 8px var(--g); pointer-events:none; left:0%;
}

.info-bar{ display:flex; gap:10px; font-size:6px; color:var(--gd); align-items:center; flex-wrap:nowrap; }
.info-bar span{ color:var(--g); }

/* ══════════════════════════════════════════════════════
   HINT BAR
══════════════════════════════════════════════════════ */
.hint-bar{
  background:#010801; border-top:1px solid #002200;
  padding:3px 10px; font-size:5px; color:#003d00;
  display:flex; gap:14px; flex-shrink:0;
}

/* ══════════════════════════════════════════════════════
   SCROLLBARS
══════════════════════════════════════════════════════ */
::-webkit-scrollbar{ width:5px; height:5px; }
::-webkit-scrollbar-track{ background:#001000; }
::-webkit-scrollbar-thumb{ background:var(--gd); border-radius:3px; }