@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=DM+Mono:wght@400;500&display=swap');

*{box-sizing:border-box;margin:0;padding:0;}

:root{
  --bg:#0e0d0b;
  --surface:#1a1814;
  --surface2:#242220;
  --surface3:#2e2b28;
  --border:rgba(255,255,255,0.07);
  --border2:rgba(255,255,255,0.13);
  --amber:#c8780a;
  --amber-l:#f0a830;
  --amber-glow:rgba(200,120,10,0.14);
  --text:#e8e0d0;
  --muted:#7a7060;
  --muted2:#a09080;
  --green:#4a9e6a;
  --green-l:#7ddc9a;
  --blue:#3a6ea8;
  --blue-l:#aac8e4;
  --red:#b04040;
  --scale-browser-bg:#2b2b3b;
}

html,body{height:100%;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;line-height:1.6;}

/* ── Layout ── */
#app{display:flex;flex-direction:column;height:100vh;box-sizing:border-box;overflow:hidden;}

.logo-icon{width:48px;height:48px;background:var(--amber-glow);border:1px solid var(--amber);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.logo-icon svg{width:32px;height:32px;display:block;}
.logo-text{font-family:'Big Shoulders Display','Bebas Neue','Arial Narrow',sans-serif;font-weight:700;font-size:2rem;letter-spacing:1.5px;color:var(--amber-l);line-height:1;text-transform:uppercase;white-space:nowrap;}
.logo-dot{color:var(--amber);padding:0 0.05em;}
.logo-sub{font-size:0.65rem;color:var(--muted);letter-spacing:4px;text-transform:uppercase;font-weight:300;}
.header-spacer{flex:1;}
.header-status{font-size:0.75rem;color:var(--muted);font-style:italic;padding:0.2rem 1.25rem;border-bottom:1px solid var(--border);}

/* Legacy workspace (hidden, kept for DOM compat) */
#workspace{display:none;}

/* ── LEFT PANEL: Upload + AI Analysis ── */
#left-panel{
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  overflow-y:auto;
  background:var(--surface);
}

.panel-section{
  padding:1.25rem 1.25rem;
  border-bottom:1px solid var(--border);
}

.section-hdr{
  font-family:'Big Shoulders Display','Bebas Neue','Arial Narrow',sans-serif;
  font-weight:600;letter-spacing:1.5px;font-size:0.8rem;
  color:var(--amber);text-transform:uppercase;
  margin-bottom:0.75rem;
  display:flex;align-items:center;gap:0.5rem;
}
.section-hdr::after{content:'';flex:1;height:1px;background:var(--border);}

/* Upload zone */
.upload-zone{
  border:1.5px dashed var(--border2);
  border-radius:10px;padding:1.75rem 1rem;
  text-align:center;cursor:pointer;
  transition:all 0.2s;background:var(--surface2);
  position:relative;overflow:hidden;
}
.upload-zone::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,var(--amber-glow) 0%,transparent 65%);
  opacity:0;transition:opacity 0.3s;pointer-events:none;
}
.upload-zone:hover::before,.upload-zone.drag-over::before{opacity:1;}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--amber);}
.upload-icon{font-size:2rem;margin-bottom:0.5rem;}
.upload-title{font-size:0.9rem;font-weight:500;margin-bottom:0.25rem;}
.upload-sub{font-size:0.78rem;color:var(--muted);}
.upload-btn{
  display:inline-block;margin-top:0.75rem;
  padding:0.5rem 1.25rem;background:var(--amber);
  color:#0e0d0b;border-radius:6px;font-weight:500;
  font-size:0.85rem;cursor:pointer;border:none;
  font-family:'DM Sans',sans-serif;transition:background 0.2s;
}
.upload-btn:hover{background:var(--amber-l);}
#fileInput{display:none;}

/* Track pill */
.track-pill{
  display:none;background:var(--surface2);border:1px solid var(--border2);
  border-radius:8px;padding:0.75rem 1rem;
  flex-direction:column;gap:0.5rem;margin-top:0.75rem;
}
.track-pill.visible{display:flex;}
.track-pill-top{display:flex;align-items:center;gap:0.75rem;min-width:0;}
.track-pill-btns{display:flex;gap:0.5rem;}
.track-disc{width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(var(--amber) 0deg,#2a2620 120deg,var(--amber) 240deg,#2a2620 360deg);
  animation:spin 3s linear infinite paused;}
.track-disc.playing{animation-play-state:running;}
@keyframes spin{to{transform:rotate(360deg);}}
.track-name{font-size:0.85rem;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.track-size{font-size:0.72rem;color:var(--muted);}

.analyze-btn{
  padding:0.5rem 1rem;background:var(--amber);color:#0e0d0b;
  border:none;border-radius:6px;font-weight:500;font-size:0.82rem;
  cursor:pointer;font-family:'DM Sans',sans-serif;flex-shrink:0;transition:background 0.2s;
}
.analyze-btn:hover{background:var(--amber-l);}
.analyze-btn:disabled{opacity:0.45;cursor:not-allowed;}

/* ── Player overlay ── */
#playerSection{
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:rgba(14,13,11,0.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--border);
  flex-direction:column;
}
#playerSection.visible{display:flex;}
#app{padding-bottom:90px;}
.player-controls{display:flex;align-items:center;gap:0.55rem;padding:0.55rem 1rem 0.35rem;flex-shrink:0;}
.player-btn{width:28px;height:28px;border-radius:50%;background:var(--amber);color:#0e0d0b;
  border:none;cursor:pointer;font-size:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background 0.2s;}
.player-btn:hover{background:var(--amber-l);}
.player-btn-skip{width:24px;height:24px;font-size:11px;background:var(--surface2);color:var(--text);border:1px solid var(--border2);}
.player-btn-skip:hover{background:var(--surface3,var(--surface2));border-color:var(--amber);color:var(--amber);}
.player-time{font-size:0.7rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:2.2rem;}
.player-seekbar{flex:1;accent-color:var(--amber);cursor:pointer;}
.speed-btns{display:flex;gap:0.3rem;align-items:center;flex-shrink:0;}
.speed-btn{padding:0.15rem 0.4rem;font-size:0.66rem;background:var(--surface2);border:1px solid var(--border2);
  border-radius:4px;color:var(--text);cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.15s;}
.speed-btn:hover{border-color:var(--amber);}
.speed-btn.active-speed{background:var(--amber);color:#0e0d0b;border-color:var(--amber);font-weight:600;}

/* Waveform strip */
.waveform-wrap{padding:0 1rem 0;flex-shrink:0;cursor:pointer;position:relative;}
#waveformCanvas{display:block;width:100%;height:66px;border-radius:4px;}
.section-pill{
  padding:0.18rem 0.55rem;border:none;border-radius:12px;
  font-family:'DM Sans',sans-serif;font-size:0.7rem;font-weight:600;
  color:#fff;cursor:pointer;opacity:0.82;transition:opacity 0.15s,transform 0.1s;
  white-space:nowrap;
}
.section-pill:hover{opacity:1;transform:translateY(-1px);}
.section-pill.section-pill-active{opacity:1;outline:2px solid #fff;outline-offset:1px;}

/* Timeline overlay */
.ctl-wrap{overflow-x:auto;padding:0 1rem 0.55rem;flex-shrink:0;}
.ctl-wrap::-webkit-scrollbar{height:3px;}
.ctl-wrap::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
.tl-stack{position:relative;display:flex;flex-direction:column;width:max-content;min-width:100%;}
.chord-tl{
  position:relative;display:flex;
  height:52px;width:max-content;min-width:100%;
  background:var(--surface2);border:1px solid var(--border2);border-radius:6px 6px 0 0;overflow:hidden;
}
.chord-tl.no-bass{border-radius:6px;}
.bass-row{
  position:relative;height:28px;width:100%;min-width:100%;
  background:var(--surface3);border:1px solid var(--border2);border-top:none;
  border-radius:0 0 6px 6px;overflow:hidden;
}
.ctl-cell{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-right:1px solid var(--border2);padding:2px 4px;
  cursor:pointer;transition:background 0.06s;user-select:none;flex-shrink:0;box-sizing:border-box;
}
.ctl-cell:last-child{border-right:none;}
.ctl-cell.bar-start{border-left:2px solid rgba(255,160,0,.4);}
.ctl-cell:hover{background:rgba(255,160,0,.1);}
.ctl-cell.ctl-active{background:rgba(255,160,0,.22);}
.ctl-cell.ctl-past{opacity:0.35;}
.ctl-name{font-size:0.8rem;font-weight:700;line-height:1.2;white-space:nowrap;}
.ctl-time{font-size:0.58rem;color:var(--muted);line-height:1;}
.ctl-tick{position:absolute;top:8px;bottom:8px;width:1px;background:rgba(255,255,255,.1);pointer-events:none;}
.bass-cell{
  position:absolute;top:2px;height:24px;
  background:hsl(150,55%,26%);border:1px solid hsl(150,65%,38%);border-radius:3px;
  font-size:0.58rem;color:var(--text);display:flex;align-items:center;justify-content:center;
  overflow:visible;cursor:pointer;transition:background 0.06s;box-sizing:border-box;
}
.bass-cell.ctl-active{background:hsl(150,65%,36%);border-color:hsl(150,70%,50%);}
.bass-cell.ctl-past{opacity:0.35;}
/* Bass playback: hide all fretboard buttons; show only the playing note */
body.bass-active #horizontal_neck button{display:none!important;}
body.bass-active #horizontal_neck div.bass-playing button{
  display:flex!important;
  background:var(--amber)!important;color:#0e0d0b!important;
  box-shadow:0 0 10px var(--amber)!important;font-weight:700!important;
  border-radius:50%!important;pointer-events:none;
}
/* Timeline zoom selection */
.tl-selection{
  position:absolute;top:0;bottom:0;
  background:rgba(200,120,10,0.18);
  border-left:2px solid var(--amber);border-right:2px solid var(--amber);
  pointer-events:none;z-index:15;
}
.ctl-wrap.selecting{cursor:crosshair;}
.zoom-out-btn{
  padding:0.15rem 0.5rem;font-size:0.66rem;
  background:var(--amber);color:#0e0d0b;border:none;border-radius:4px;
  cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:600;flex-shrink:0;
}
/* ── Spot analysis panel ── */
#spotPanel{
  position:fixed;bottom:136px;right:1rem;z-index:400;
  width:22rem;background:var(--surface);border:1px solid var(--amber);
  border-radius:8px;box-shadow:0 4px 24px rgba(0,0,0,0.5);
  font-family:'DM Sans',sans-serif;overflow:hidden;
}
.spot-hdr{
  display:flex;justify-content:space-between;align-items:center;
  padding:0.5rem 0.75rem;background:rgba(200,120,10,0.12);
  border-bottom:1px solid var(--amber);font-size:0.78rem;font-weight:600;color:var(--amber-l);
}
.spot-hdr button{background:none;border:none;color:var(--muted2);cursor:pointer;font-size:1rem;line-height:1;padding:0;}
.spot-hdr button:hover{color:#fff;}
.spot-body{padding:0.7rem 0.75rem;display:flex;flex-direction:column;gap:0.5rem;}
.spot-row{font-size:0.75rem;color:var(--muted2);}
.spot-row strong{color:var(--fg);}
.spot-sens-row{display:flex;align-items:center;gap:0.4rem;font-size:0.72rem;color:var(--muted);}
.spot-sens-row input{flex:1;}
#spotResults{font-size:0.75rem;color:var(--fg);min-height:1.2rem;line-height:1.5;}
.spot-actions{display:flex;gap:0.4rem;}
.spot-run-btn{
  flex:1;padding:0.3rem 0.5rem;font-size:0.75rem;font-weight:600;cursor:pointer;
  background:var(--amber);color:#0e0d0b;border:none;border-radius:5px;
  font-family:'DM Sans',sans-serif;
}
.spot-run-btn:disabled{opacity:0.5;cursor:not-allowed;}
.spot-apply-btn{
  padding:0.3rem 0.6rem;font-size:0.75rem;font-weight:600;cursor:pointer;
  background:var(--green,#4caf50);color:#fff;border:none;border-radius:5px;
  font-family:'DM Sans',sans-serif;
}
.spot-apply-btn:disabled{opacity:0.5;}
/* JS-injected floating tooltip */
#bassTooltip{
  position:fixed;z-index:9999;
  background:var(--surface);border:1px solid var(--amber);color:var(--amber-l);
  padding:4px 10px;border-radius:5px;font-size:0.75rem;white-space:nowrap;
  font-family:'DM Mono',monospace;pointer-events:none;display:none;
}
.ctl-playhead{
  position:absolute;top:0;bottom:0;width:2px;
  background:var(--amber);z-index:10;pointer-events:none;
  box-shadow:0 0 8px var(--amber);
}
.bass-now-playing{
  font-size:0.7rem;font-weight:700;font-family:'DM Mono',monospace;
  color:var(--amber-l);white-space:nowrap;min-width:3.5rem;flex-shrink:0;
}

/* Loading */
.loading-wrap{display:none;margin-top:0.75rem;}
.loading-wrap.visible{display:block;}
.loading-label{font-size:0.78rem;color:var(--muted);margin-bottom:0.5rem;display:flex;align-items:center;gap:0.4rem;}
.spinner{width:12px;height:12px;border:2px solid var(--border2);border-top-color:var(--amber);border-radius:50%;animation:spin 0.7s linear infinite;display:inline-block;}
.progress-track{height:3px;background:var(--border);border-radius:2px;overflow:hidden;}
.progress-fill{height:100%;background:var(--amber);border-radius:2px;width:0%;transition:width 0.4s ease;}
.analysis-checklist{display:flex;flex-direction:column;gap:0.28rem;padding:0.2rem 0;}
.step-row{display:flex;align-items:center;gap:0.5rem;font-size:0.8rem;transition:color 0.2s;}
.step-ico{width:1rem;text-align:center;flex-shrink:0;font-size:0.72rem;line-height:1;}
.step-pending .step-ico,.step-pending .step-lbl{color:var(--muted2);opacity:0.85;}
.step-active .step-ico{color:var(--amber-l);}
.step-active .step-lbl{color:var(--text);font-weight:500;}
.step-done .step-ico,.step-done .step-lbl{color:var(--green-l);}
.step-detail{font-size:0.68rem;color:var(--muted);margin-top:0.25rem;min-height:0.85rem;}

/* Error */
.error-box{display:none;margin-top:0.75rem;background:rgba(176,64,64,0.12);border:1px solid var(--red);border-radius:8px;padding:0.75rem 1rem;color:#e08080;font-size:0.82rem;}
.error-box.visible{display:block;}

/* Overview cards */
.cards-mini{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin-bottom:0.25rem;}
.card-mini{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:0.6rem 0.75rem;}
.card-mini-label{font-size:0.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:0.2rem;}
.card-mini-value{font-size:1.1rem;font-weight:500;color:var(--amber-l);font-family:'DM Mono',monospace;line-height:1.2;}
.card-mini-sub{font-size:0.72rem;color:var(--muted2);}

/* AI Results tabs */
.ai-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:0;}
.ai-tab-btn{
  padding:0.5rem 0.75rem;background:none;border:none;
  border-bottom:2px solid transparent;color:var(--muted);
  font-family:'DM Sans',sans-serif;font-size:0.78rem;
  cursor:pointer;white-space:nowrap;transition:all 0.2s;margin-bottom:-1px;
}
.ai-tab-btn:hover{color:var(--text);}
.ai-tab-btn.active{color:var(--amber-l);border-bottom-color:var(--amber);}
.ai-panel{display:none;padding:0.75rem 0 0;}
.ai-panel.active{display:block;}

/* Analysis text */
.ai-text{font-size:0.82rem;color:var(--text);line-height:1.75;white-space:pre-wrap;}
.cursor-blink{display:inline-block;width:2px;height:0.9em;background:var(--amber);margin-left:1px;vertical-align:text-bottom;animation:blink 1s step-end infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* Chord chips */
.chord-row{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.6rem;}
.chord-chip{
  background:var(--surface3);border:1px solid var(--border2);
  border-radius:6px;padding:0.3rem 0.65rem;
  font-family:'DM Mono',monospace;font-size:0.88rem;
  font-weight:500;color:var(--amber-l);cursor:pointer;transition:all 0.15s;
}
.chord-chip:hover,.chord-chip.active-chip{background:var(--amber-glow);border-color:var(--amber);}
.strum-beat.active-beat{background:var(--amber);color:#0e0d0b;}

/* Solo note timeline */
.solo-tl-wrap{overflow-x:auto;margin:0.5rem 0;border-radius:6px;border:1px solid var(--border2);}
.solo-tl-wrap::-webkit-scrollbar{height:3px;}
.solo-tl-wrap::-webkit-scrollbar-thumb{background:var(--border2);}
.solo-tl{position:relative;height:48px;width:max-content;min-width:100%;background:var(--surface2);}
.solo-note{
  position:absolute;top:6px;height:36px;
  background:var(--blue);border-radius:3px;border:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  font-size:0.6rem;color:#fff;font-weight:600;cursor:pointer;
  box-sizing:border-box;overflow:hidden;white-space:nowrap;padding:0 2px;
  transition:background 0.06s;
}
.solo-note.note-past{opacity:0.3;}
.solo-note.note-active{background:var(--amber);color:#0e0d0b;box-shadow:0 0 6px var(--amber);}

/* Strum visual */
.strum-row{display:flex;gap:0.3rem;flex-wrap:wrap;margin-top:0.6rem;}
.strum-beat{
  width:34px;height:44px;border:1px solid var(--border2);
  border-radius:5px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;
  font-size:1rem;background:var(--surface2);
}
.strum-beat.down{border-color:var(--amber);background:var(--amber-glow);}
.strum-beat.up{border-color:#5a8aaa;background:rgba(90,138,170,0.1);}
.strum-beat.mute{border-color:var(--border);opacity:0.45;}
.beat-num{font-size:0.6rem;color:var(--muted);font-family:'DM Mono',monospace;}

/* Action row */
.action-row{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.75rem;}
.action-btn{
  padding:0.4rem 0.8rem;border:1px solid var(--border2);
  border-radius:6px;background:transparent;color:var(--muted2);
  font-size:0.75rem;cursor:pointer;font-family:'DM Sans',sans-serif;
  transition:all 0.2s;
}
.action-btn:hover{border-color:var(--amber);color:var(--amber-l);background:var(--amber-glow);}

/* Bass detection tuning panel */
.bass-tune-details{margin-top:0.9rem;}
.bass-tune-summary{
  font-size:0.75rem;color:var(--muted2);cursor:pointer;
  user-select:none;list-style:none;letter-spacing:0.04em;
}
.bass-tune-summary::-webkit-details-marker{display:none;}
.bass-tune-summary:hover{color:var(--amber-l);}
.bass-tune-panel{
  margin-top:0.6rem;padding:0.75rem;
  background:var(--surface2);border:1px solid var(--border);border-radius:8px;
  display:flex;flex-direction:column;gap:0.55rem;
}
.bass-tune-row{display:flex;flex-direction:column;gap:0.2rem;}
.bass-tune-label{font-size:0.72rem;color:var(--muted2);}
.bass-tune-hint{font-size:0.68rem;color:var(--muted);margin-left:0.4rem;}
.bass-tune-ctrl{display:flex;align-items:center;gap:0.5rem;}
.bass-tune-ctrl input[type=range]{flex:1;accent-color:var(--amber);height:4px;}
.bass-tune-val{font-size:0.72rem;color:var(--amber-l);min-width:3rem;text-align:right;font-variant-numeric:tabular-nums;}
/* ── Bass tab diagram ─────────────────────────────────────────────────────── */
.bass-tab-pre{
  background:var(--surface3);border:1px solid var(--border);border-radius:8px;
  padding:1rem 1.25rem;overflow:auto;flex:1;min-height:0;
}
.tab-bar{ margin-bottom:1.8rem;display:inline-block;vertical-align:top; }
.tab-bar-label{
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:0.58rem;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase;
  margin-bottom:0.3rem;padding-left:1.9rem;
}
.tab-table{ border-collapse:collapse;table-layout:fixed; }

/* String name label (left column) */
.tab-str-lbl{
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:0.68rem;font-weight:700;color:var(--muted2);
  text-align:right;padding-right:0.45rem;width:1.5rem;
  vertical-align:middle;white-space:nowrap;
}
/* Bar-end separator column */
.tab-bar-sep{
  width:0.5rem;padding:0;vertical-align:middle;
}
.tab-bar-sep::before{
  content:'';display:block;width:1px;height:100%;
  background:rgba(255,255,255,0.18);margin:0 auto;
}

/* Grid cell — each cell has a string line through its middle */
.tab-cell{
  width:1.75rem;height:2rem;
  text-align:center;vertical-align:middle;
  position:relative;cursor:pointer;
  border-radius:2px;transition:background 0.07s;
}
/* String line */
.tab-cell::before{
  content:'';position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(255,255,255,0.1);transform:translateY(-50%);
  pointer-events:none;z-index:0;
}
/* Beat-marker: subtle left tick every quarter note */
.tab-cell.tab-beat::after{
  content:'';position:absolute;left:0;top:15%;bottom:15%;width:1px;
  background:rgba(255,255,255,0.18);pointer-events:none;
}
/* Note pill — sits on top of the string line, "interrupting" it */
.tab-note{
  position:relative;z-index:1;
  display:inline-block;
  min-width:1.15rem;
  padding:0.06rem 0.22rem;
  background:var(--surface3);       /* same as container → cuts through string line */
  color:var(--amber-l);
  font-family:'DM Mono','Courier New',monospace;
  font-size:0.78rem;font-weight:700;line-height:1.3;
  border:1px solid rgba(200,120,10,0.4);
  border-radius:4px;
}
/* Playhead highlight */
.tab-cell.tab-active{ background:rgba(200,120,10,0.38); }
.tab-cell.tab-active .tab-note{
  background:transparent;border-color:transparent;color:#fff;font-weight:800;
}
.tab-cell.tab-active::before{ background:rgba(200,120,10,0.55); }
/* Loop region */
.tab-cell.tab-loop-col{ background:rgba(78,154,241,0.2) !important;outline:1px solid rgba(78,154,241,0.45); }
.tab-cell{ cursor:pointer; }
#bassTabPre .tab-cell.tab-has-note:hover{ background:rgba(220,60,60,0.22); }
#bassTabPre .tab-cell:not(.tab-has-note):hover{ background:rgba(100,200,100,0.1); }
.tab-spinner{
  width:1.5rem;height:1.5rem;border-radius:50%;
  border:2px solid rgba(200,120,10,0.25);
  border-top-color:var(--amber);
  animation:tab-spin 0.7s linear infinite;
}
@keyframes tab-spin{ to{ transform:rotate(360deg); } }
/* Chord name row above tab strings */
.tab-chord-row td{ height:1.5rem;vertical-align:bottom;padding-bottom:0.1rem; }
.tab-chord-label{
  font-family:'DM Sans',sans-serif;
  font-size:0.6rem;font-weight:700;
  color:var(--amber-l);white-space:nowrap;
  padding-left:2px;
}
.tab-chord-empty{ /* placeholder */ }
/* ── Tab edit popover ── */
#tabEditPopover{
  position:fixed;z-index:600;background:var(--surface);
  border:1px solid var(--amber);border-radius:9px;
  padding:0.7rem 0.85rem 0.75rem;box-shadow:0 6px 28px rgba(0,0,0,0.6);
  font-family:'DM Sans',sans-serif;min-width:15rem;max-width:20rem;
}
.tep-header{
  display:flex;align-items:baseline;gap:0.5rem;margin-bottom:0.65rem;
}
.tep-note-name{
  font-size:1.35rem;font-weight:700;color:var(--amber);font-family:'DM Mono',monospace;
  line-height:1;
}
.tep-position{
  font-size:0.75rem;color:var(--muted);flex:1;
}
.tep-close{
  background:none;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer;
  padding:0 0.1rem;line-height:1;margin-left:auto;
}
.tep-close:hover{ color:var(--fg); }

/* Octave + fret row */
.tep-oct-row{
  display:flex;align-items:center;gap:0.5rem;margin-bottom:0.6rem;
}
.tep-oct-btn{
  padding:0.3rem 0.55rem;background:var(--bg);border:1px solid var(--border);
  color:var(--fg);border-radius:5px;cursor:pointer;font-size:0.75rem;font-weight:600;
  white-space:nowrap;
}
.tep-oct-btn:hover{ border-color:var(--amber);color:var(--amber); }
.tep-oct-btn:disabled{ opacity:0.3;cursor:default; }
.tep-fret-wrap{ display:flex;flex-direction:column;align-items:center;gap:0.15rem;flex:1; }
.tep-fret-label{ font-size:0.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em; }
#tabEditFret, #tabEditFretAdd{
  width:100%;padding:0.3rem 0.4rem;border-radius:5px;text-align:center;
  background:var(--bg);border:1px solid var(--border);color:var(--fg);
  font-size:1rem;font-family:'DM Mono',monospace;font-weight:600;
}

/* Add-mode fret row */
.tep-add-row{ margin-bottom:0.6rem; }
.tep-add-row .tep-fret-label{ font-size:0.7rem;color:var(--muted);display:block;margin-bottom:0.25rem; }
.tep-add-row #tabEditFretAdd{ width:5rem; }

/* Suggest */
.tep-suggest-row{ display:flex;align-items:center;gap:0.5rem;margin:0.5rem 0 0.6rem; }
.tep-suggest-btn{
  padding:0.25rem 0.6rem;background:var(--bg);border:1px solid var(--border);
  color:var(--fg);border-radius:5px;cursor:pointer;font-size:0.75rem;white-space:nowrap;
}
.tep-suggest-btn:hover{ border-color:var(--amber);color:var(--amber); }
.tep-suggest-hint{ font-size:0.68rem;color:var(--muted);font-family:'DM Mono',monospace; }

/* String alternatives */
#tabEditAlts{ margin-bottom:0.65rem; }
.tep-alts-label{ font-size:0.65rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:0.3rem; }
.tep-alt-btns{ display:flex;flex-wrap:wrap;gap:0.3rem; }
.tep-alt-btn{
  padding:0.25rem 0.5rem;background:var(--bg);border:1px solid var(--border);
  color:var(--fg);border-radius:4px;cursor:pointer;font-size:0.75rem;
  font-family:'DM Mono',monospace;
}
.tep-alt-btn:hover{ border-color:var(--amber);color:var(--amber); }

/* Action buttons */
.tep-actions{ display:flex;gap:0.4rem; }
.tep-save{
  flex:1;padding:0.4rem 0;background:var(--amber);color:#0e0d0b;
  border:none;border-radius:5px;font-weight:700;cursor:pointer;font-size:0.82rem;
}
.tep-save:hover{ filter:brightness(1.1); }
.tep-play{
  padding:0.4rem 0.6rem;background:var(--bg);border:1px solid var(--border);
  color:var(--amber);border-radius:5px;font-size:0.82rem;cursor:pointer;
}
.tep-play:hover{ border-color:var(--amber); }
.tep-play:disabled{ opacity:0.35;cursor:default; }
.tep-delete{
  padding:0.4rem 0.7rem;background:#7a1f1f;color:#ffaaaa;
  border:1px solid #9b3333;border-radius:5px;font-weight:700;cursor:pointer;font-size:0.82rem;
}
.tep-delete:hover{ background:#9b2020; }

/* Legacy classes kept for any remaining references */
.tab-edit-btns{ display:flex;gap:0.35rem;margin-top:0.4rem; }
.tab-edit-add{ padding:0.25rem 0.6rem;background:var(--amber);color:#0e0d0b;border:none;border-radius:4px;font-weight:600;cursor:pointer;font-size:0.75rem; }
.tab-edit-cancel{ padding:0.25rem 0.5rem;background:none;border:1px solid var(--border);color:var(--muted);border-radius:4px;cursor:pointer;font-size:0.75rem; }

/* Navigate prompt */
.navigate-prompt{
  background:var(--amber-glow);border:1px solid var(--amber);
  border-radius:8px;padding:0.75rem 1rem;margin-top:0.75rem;
  font-size:0.8rem;color:var(--amber-l);
  display:none;
}
.navigate-prompt.visible{display:block;}
.navigate-prompt strong{display:block;margin-bottom:0.4rem;font-size:0.85rem;}

/* ── RIGHT PANEL: Scale browser ── */
#right-panel{
  overflow:hidden;background:var(--bg);
  display:flex;flex-direction:column;min-height:0;
}
#bassTabWrap > div:first-child,
#bassTabMeta{ flex-shrink:0; }

/* Override scale browser styles to fit dark theme */
#scale-browser-wrap{
  flex:1;
  padding:0;
}

/* Scale browser internal overrides */
#chartinator{
  max-width:100% !important;
  margin:0 !important;
  background:#1e1e2e !important;
  border-radius:0 !important;
  padding:1rem 1.25rem !important;
}

#right-panel-header{
  padding:0.75rem 1.25rem;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:0.75rem;
  background:var(--surface);flex-shrink:0;
}
.right-hdr-label{font-family:'Big Shoulders Display','Bebas Neue','Arial Narrow',sans-serif;letter-spacing:2px;font-size:0.85rem;color:var(--blue-l);}
#ai-set-status{font-size:0.75rem;color:var(--green-l);display:none;}
#ai-set-status.visible{display:inline;}

/* Scale browser body styles */
body{background:#1e1e2e;}

/* Tuner button reposition */
#tuner_btn{
  position:fixed;bottom:8rem;right:1rem;
  padding:0.4rem 0.8rem;background:#1e2e3e;
  color:var(--blue-l);border:1px solid #2a4a6a;
  border-radius:6px;font-size:0.75rem;cursor:pointer;
  z-index:1000;transition:background 0.15s;
  font-family:'DM Sans',sans-serif;
  display:none;
}
#tuner_btn:hover{background:#2a4a6a;}

/* Tuner panel */
#tuner_panel{
  position:fixed;bottom:4rem;right:1.5rem;
  background:#1a2430;border:1px solid #2a4a6a;
  border-radius:10px;padding:1rem;min-width:260px;
  z-index:1001;box-shadow:0 8px 32px rgba(0,0,0,0.6);
}

/* Scale browser dark-theme integration overrides — full CSS is in scales.css */

/* ── Auth section ── */
.auth-sign-in-btn{
  padding:0.3rem 0.9rem;background:var(--amber);color:#0e0d0b;
  border:none;border-radius:6px;font-size:0.8rem;font-weight:600;
  cursor:pointer;font-family:'DM Sans',sans-serif;transition:background 0.15s;
}
.auth-sign-in-btn:hover{background:var(--amber-l);}
#auth-user-section{display:flex;align-items:center;gap:0.5rem;}
.auth-username{font-size:0.78rem;color:var(--amber-l);font-weight:500;}
.auth-lib-btn{
  padding:0.25rem 0.6rem;background:var(--surface2);border:1px solid var(--border2);
  border-radius:5px;color:var(--muted2);font-size:0.78rem;cursor:pointer;
  font-family:'DM Sans',sans-serif;transition:all 0.15s;
}
.auth-lib-btn:hover{border-color:var(--amber);color:var(--amber-l);}
.auth-sign-out-btn{
  padding:0.25rem 0.5rem;background:none;border:1px solid var(--border);
  border-radius:5px;color:var(--muted);font-size:0.72rem;cursor:pointer;
  font-family:'DM Sans',sans-serif;transition:all 0.15s;
}
.auth-sign-out-btn:hover{border-color:var(--red);color:#e08080;}

/* ── Modal overlay ── */
.modal-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,0.72);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
}
.modal-overlay.hidden{display:none;}
.modal-box{
  background:var(--surface);border:1px solid var(--border2);
  border-radius:12px;box-shadow:0 12px 48px rgba(0,0,0,0.7);
  width:360px;max-width:calc(100vw - 2rem);
  padding:1.5rem;font-family:'DM Sans',sans-serif;
}
.modal-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}
.modal-title{font-family:'Big Shoulders Display','Bebas Neue','Arial Narrow',sans-serif;letter-spacing:2px;font-size:1rem;color:var(--amber);}
.modal-close{background:none;border:none;color:var(--muted2);cursor:pointer;font-size:1.1rem;line-height:1;padding:0;}
.modal-close:hover{color:#fff;}
.modal-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:1rem;}
.modal-tab{
  padding:0.4rem 0.9rem;background:none;border:none;border-bottom:2px solid transparent;
  color:var(--muted);font-family:'DM Sans',sans-serif;font-size:0.82rem;
  cursor:pointer;margin-bottom:-1px;transition:all 0.15s;
}
.modal-tab:hover{color:var(--text);}
.modal-tab.active{color:var(--amber-l);border-bottom-color:var(--amber);}
.modal-field{margin-bottom:0.75rem;}
.modal-label{display:block;font-size:0.72rem;color:var(--muted);margin-bottom:0.25rem;}
.modal-input{
  width:100%;padding:0.45rem 0.65rem;
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:6px;color:var(--text);
  font-family:'DM Sans',sans-serif;font-size:0.85rem;
  outline:none;transition:border-color 0.15s;
}
.modal-input:focus{border-color:var(--amber);}
.modal-submit{
  width:100%;padding:0.55rem;background:var(--amber);color:#0e0d0b;
  border:none;border-radius:6px;font-weight:600;font-size:0.9rem;
  cursor:pointer;font-family:'DM Sans',sans-serif;transition:background 0.15s;margin-top:0.25rem;
}
.modal-submit:hover{background:var(--amber-l);}
.modal-submit:disabled{opacity:0.5;cursor:not-allowed;}
.modal-err{font-size:0.78rem;color:#e08080;margin-top:0.5rem;display:none;}
.modal-err.visible{display:block;}

/* ── Library modal ── */
#libraryModal .modal-box{width:480px;}
.lib-empty{font-size:0.85rem;color:var(--muted);text-align:center;padding:2rem 0;}
.lib-song-list{display:flex;flex-direction:column;gap:0.5rem;max-height:60vh;overflow-y:auto;}
.lib-song{
  display:flex;align-items:center;gap:0.75rem;
  padding:0.65rem 0.75rem;background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;cursor:pointer;transition:all 0.15s;
}
.lib-song:hover{border-color:var(--amber);background:var(--amber-glow);}
.lib-song-disc{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(var(--amber) 0deg,#2a2620 120deg,var(--amber) 240deg,#2a2620 360deg);
}
.lib-song-info{flex:1;min-width:0;}
.lib-song-name{font-size:0.85rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lib-song-meta{font-size:0.7rem;color:var(--muted2);}
.lib-song-del{
  background:none;border:none;color:var(--muted);cursor:pointer;font-size:0.8rem;
  padding:0.2rem 0.4rem;border-radius:4px;flex-shrink:0;transition:all 0.12s;
}
.lib-song-del:hover{color:#e08080;background:rgba(176,64,64,0.15);}

/* ── Toast ── */
#toast{
  position:fixed;top:4rem;left:50%;transform:translateX(-50%);
  background:var(--surface2);border:1px solid var(--green);color:var(--green-l);
  padding:0.6rem 1.4rem;border-radius:8px;font-size:0.85rem;font-weight:500;
  box-shadow:0 4px 20px rgba(0,0,0,0.7);z-index:9999;
  opacity:0;transition:opacity 0.3s;pointer-events:none;white-space:nowrap;
}
#toast.show{opacity:1;}

/* ── Top Nav ── */
#topnav{
  padding:0 1.5rem;height:54px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:0.75rem;
  background:linear-gradient(180deg,#13120f 0%,var(--bg) 100%);
  flex-shrink:0;
}
.nav-tabs{display:flex;gap:0.2rem;margin-left:1rem;}
.nav-tab{
  padding:0.3rem 1rem;background:none;
  border:1px solid transparent;border-radius:6px;
  color:var(--muted);font-family:'DM Sans',sans-serif;font-size:0.85rem;
  cursor:pointer;transition:all 0.15s;
}
.nav-tab:hover{color:var(--text);border-color:var(--border);}
.nav-tab.active{background:var(--surface2);border-color:var(--border2);color:var(--amber-l);font-weight:500;}

/* ── View panes ── */
.view-pane{display:none;flex:1;min-height:0;flex-direction:column;overflow:hidden;}
.view-pane.active{display:flex;}

/* ── Workshop upload state (centered) ── */
#ws-upload-state{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:2rem;gap:1rem;
}
#ws-upload-state .upload-zone{max-width:480px;width:100%;}
#ws-upload-state .loading-wrap{max-width:480px;width:100%;}
#ws-upload-state .error-box{max-width:480px;width:100%;}

/* ── Workshop work state top bar ── */
#ws-topbar{
  display:flex;align-items:center;gap:0.75rem;
  padding:0.55rem 1.25rem;
  border-bottom:1px solid var(--border);
  background:var(--surface);flex-shrink:0;
  flex-wrap:wrap;
}
#ws-topbar .track-pill{
  margin:0;border:none;background:none;
  flex-direction:row;align-items:center;gap:0.5rem;
  flex-shrink:0;padding:0;
}
#ws-topbar .track-pill.visible{display:flex;}
#ws-topbar .track-disc{width:28px;height:28px;}

/* ── Instrument pills ── */
.inst-pills{display:flex;gap:0.35rem;}
.inst-pill{
  padding:0.3rem 0.9rem;
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:20px;color:var(--muted2);
  font-family:'DM Sans',sans-serif;font-size:0.82rem;
  cursor:pointer;transition:all 0.15s;
}
.inst-pill:hover{border-color:var(--amber);color:var(--amber-l);}
.inst-pill.active{background:var(--amber);color:#0e0d0b;border-color:var(--amber);font-weight:600;}

/* ── Controls open button ── */
.controls-open-btn{
  padding:0.3rem 0.75rem;
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:6px;color:var(--muted2);
  font-size:0.8rem;cursor:pointer;flex-shrink:0;
  font-family:'DM Sans',sans-serif;transition:all 0.15s;
}
.controls-open-btn:hover{border-color:var(--amber);color:var(--amber-l);}

/* ── Song meta bar ── */
#ws-meta-bar{
  display:flex;gap:1.5rem;align-items:center;
  padding:0.45rem 1.25rem;
  border-bottom:1px solid var(--border);
  background:var(--surface);flex-shrink:0;
  overflow-x:auto;
}
.meta-item{display:flex;flex-direction:column;gap:0.05rem;flex-shrink:0;}
.meta-label{font-size:0.63rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;}
.meta-value{color:var(--amber-l);font-family:'DM Mono',monospace;font-size:0.85rem;font-weight:500;}

/* ── Workshop content ── */
#ws-content{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
#content-bass,#content-guitar{flex:1;flex-direction:column;overflow:hidden;}

/* ── AI insights collapsible ── */
#ws-ai-section{flex-shrink:0;border-top:1px solid var(--border);}
.ai-section-toggle{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.45rem 1.25rem;cursor:pointer;
  background:var(--surface);font-size:0.78rem;color:var(--muted2);
  user-select:none;
}
.ai-section-toggle:hover{color:var(--amber-l);}
#ws-ai-body{
  padding:0.5rem 1.25rem 0.75rem;
  background:var(--surface);
  border-top:1px solid var(--border);
  max-height:50vh;overflow-y:auto;
}

/* ── Controls popup ── */
#controlsPopup{
  position:fixed;top:50%;right:1.5rem;transform:translateY(-50%);
  z-index:500;width:24rem;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,0.6);
  overflow-y:auto;max-height:80vh;
}
.controls-popup-hdr{
  display:flex;justify-content:space-between;align-items:center;
  padding:0.65rem 0.9rem;border-bottom:1px solid var(--border);
  font-family:'Big Shoulders Display','Bebas Neue','Arial Narrow',sans-serif;letter-spacing:2px;
  font-size:0.85rem;color:var(--amber);
  background:var(--amber-glow);
}
.controls-popup-hdr button{background:none;border:none;color:var(--muted2);cursor:pointer;font-size:1.1rem;line-height:1;padding:0;}
.controls-popup-hdr button:hover{color:#fff;}
.controls-popup-body{padding:0.75rem 0.9rem;}
.controls-rt-label{
  font-size:0.68rem;color:var(--green-l);text-transform:uppercase;
  letter-spacing:1px;margin:0.5rem 0 0.3rem;display:flex;align-items:center;gap:0.4rem;
}
.controls-rt-label::after{content:'';flex:1;height:1px;background:var(--border);}
.controls-ra-label{
  font-size:0.68rem;color:var(--amber);text-transform:uppercase;
  letter-spacing:1px;margin:0.75rem 0 0.3rem;display:flex;align-items:center;gap:0.4rem;
}
.controls-ra-label::after{content:'';flex:1;height:1px;background:var(--border);}

/* ── Piano notation ── */
#pianoNotationWrap {
  background: #f5f0e8;
  border-radius: 6px;
  position: relative;
}
#pianoNotationWrap svg {
  display: block;
}
#pianoPlayhead {
  position: absolute;
  top: 0;
  width: 2px;
  background: rgba(200,120,10,0.85);
  pointer-events: none;
  transition: left 0.08s linear;
  z-index: 5;
}