/* Dr. Dresch's Fret Lab — Songwriter Edition
   Unified dark theme · iOS-safe · Professional polish */

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

:root{
  /* Surfaces */
  --bg:#16181d;
  --surface:#20232a;
  --surface2:#262932;
  --surface3:#2b2f38;

  /* Borders */
  --border:#323643;
  --border-light:#3c4250;

  /* Text */
  --text:#f3f4f6;
  --text-dim:#a5adba;
  --text-muted:#7a8190;

  /* Accent */
  --accent:#3fa9f5;
  --accent-dim:#2976b8;
	


  /* Transport */
  --rec:#ff4d4f;
  --stop:#d39a1f;
  --play:#20c768;
  --clr:#555;
  --metro:#a78bfa;

  /* Tracks */
  --track1:#ef4444;--track2:#3b82f6;--track3:#22c55e;--track4:#a78bfa;

  /* Scale / highlight */
  --root-color:#ef4444;--scale-color:#22c55e;--highlight-color:#3b82f6;

  /* Fretboard */
  --fret-bg:#22242c;
  --fret-line:#3b3f4b;
  --nut-color:#9a9fad;
  --string-color:rgba(200, 205, 220, 0.18);

  /* Notes */
  --note-bg:#3a404b;
  --note-hover:#3a342c;
  --note-text:#f2f4f8;
}

html{font-size:14px}

body{
  background:
    radial-gradient(circle at top center, rgba(57,208,195,.04), transparent 30%),
    linear-gradient(to bottom, #0b0c0f, #090a0d 40%, #07080b 100%);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  min-height:100vh;
  -webkit-tap-highlight-color:transparent;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:var(--accent);text-decoration:none}

/* ═══ HEADER ═══ */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:.65rem 1rem;
  background:rgba(18,20,25,.92);
  border-bottom:1px solid rgba(255,255,255,.05);
  box-shadow:0 2px 12px rgba(0,0,0,.2);
}
header h1{font-size:1.1rem;font-weight:700;letter-spacing:.03em;color:#f3f5f8}
.icon-btn{
  background:linear-gradient(to bottom, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--border);border-radius:10px;padding:5px;
  color:var(--text-dim);cursor:pointer;transition:.15s;
}
.icon-btn:hover,.icon-btn.active{color:var(--accent);border-color:rgba(57,208,195,.45)}

/* ═══ CONTROLS ═══ */
#controls{
  padding:.5rem .75rem;
  border-bottom:1px solid rgba(255,255,255,.04);
  background:rgba(18,20,25,.82);
}
.control-row{display:flex;gap:.4rem;align-items:end;flex-wrap:wrap}
.control-group{display:flex;flex-direction:column;gap:1px}
.control-group label,.small-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);font-weight:600}

select,input[type="number"]{
  background:linear-gradient(to bottom, #1d2129, #181b22);
  color:var(--text);
  border:1px solid var(--border);border-radius:8px;
  padding:5px 8px;font-size:.78rem;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
select:hover,input[type="number"]:hover{border-color:var(--border-light)}
select:focus,input:focus{outline:none;border-color:rgba(57,208,195,.55);box-shadow:0 0 0 3px rgba(57,208,195,.1)}

.action-btn{
  background:linear-gradient(to bottom, #222731, #1a1e26);
  color:var(--text);border:1px solid var(--border);border-radius:8px;
  padding:4px 10px;font-size:.7rem;font-weight:600;
  cursor:pointer;transition:.15s;white-space:nowrap;
}
.action-btn:hover{border-color:rgba(57,208,195,.42);color:#fff}

/* ═══ FRETBOARD ═══ */
#fretboard-container{
  padding:6px 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:linear-gradient(to bottom, rgba(255,255,255,.015), rgba(255,255,255,0)), var(--bg);
  border-top:1px solid rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.05);
}
#fretboard{display:grid;gap:0;min-width:fit-content}
.fret-number{text-align:center;font-size:.55rem;color:var(--text-muted);padding:2px 0;min-width:40px;font-weight:600}

.fret-cell{
  position:relative;min-width:40px;height:30px;
  background:linear-gradient(to bottom, #231d16, var(--fret-bg));
  border-right:2px solid var(--fret-line);
  border-bottom:1px solid var(--string-color);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .08s;
}

/* Nut — right edge of open string column */
.fret-cell.nut {
  border-right: 4px solid var(--nut-color);
  background: linear-gradient(to bottom, #1f1a14, #17120e);
}


.fret-cell:hover{background:var(--note-hover)}

.note-label{
  font-size:.58rem;font-weight:600;
  color:var(--note-text);
  background:linear-gradient(to bottom, #434955, #343943);
  border:1px solid rgba(255,255,255,.04);
  border-radius:50%;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  transition:.12s;user-select:none;-webkit-user-select:none;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 1px 3px rgba(0,0,0,.25);
}

.fret-cell.highlighted .note-label{
  background:linear-gradient(to bottom, #5a9dff, #3e79d8);
  color:#fff;border-color:transparent;
  box-shadow:0 0 12px rgba(76,141,255,.2);transform:scale(1.12);
}
.fret-cell.root .note-label{
  background:linear-gradient(to bottom, #ff6b6d, #d84a4d);
  color:#fff;border-color:transparent;
  box-shadow:0 0 12px rgba(255,92,95,.2);transform:scale(1.12);
}
.fret-cell.scale .note-label{
  background:linear-gradient(to bottom, #49df82, #2dbb62);
  color:#08120d;border-color:transparent;
}
.fret-cell.playing .note-label{
  background:linear-gradient(to bottom, #6af3e7, #39d0c3);
  color:#041210;border-color:transparent;
  transform:scale(1.3);box-shadow:0 0 16px rgba(57,208,195,.28);
}

.fret-marker{
  position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;background:var(--text-muted);border-radius:50%;opacity:.25;pointer-events:none;
}

/* ═══ CHORD DISPLAY ═══ */
#chord-display{
  padding:6px .75rem;display:flex;align-items:center;gap:.5rem;
  border-bottom:1px solid rgba(255,255,255,.04);min-height:32px;
  background:linear-gradient(to bottom, rgba(255,255,255,.015), rgba(255,255,255,0));
}
.chord-info{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.chord-badge{
  background:linear-gradient(to bottom, #252a33, #1c2028);
  border:1px solid var(--border);border-radius:8px;
  padding:2px 10px;font-size:.85rem;font-weight:700;color:var(--accent);
  min-width:36px;text-align:center;
}
.chord-notes-label{font-size:.65rem;color:var(--text-dim)}

/* Chord diagram */
.chord-diagram{flex-shrink:0;transition:opacity .15s;min-height:0}
.chord-diagram:empty{display:none}
.chord-diagram svg{display:block}

/* ═══ COLLAPSIBLE PANELS ═══ */
.panel-collapsible{border-bottom:1px solid rgba(255,255,255,.04)}
.panel-collapsible summary{
  padding:.55rem .75rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-dim);cursor:pointer;font-weight:700;
  user-select:none;-webkit-user-select:none;list-style:none;
  display:flex;align-items:center;gap:6px;
  background:linear-gradient(to right, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.panel-collapsible[open] summary{color:#edf1f7}
.panel-collapsible summary::before{content:'▸';font-size:.65rem;transition:transform .15s}
.panel-collapsible[open] summary::before{transform:rotate(90deg)}
.panel-collapsible > :not(summary){padding:.5rem .75rem}

/* ═══ TUNER ═══ */
.tuner-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:.35rem;
}
.tuner-btn{
  min-width:0;width:100%;
  background:linear-gradient(to bottom, #222731, #191d25);
  border:1px solid var(--border);border-radius:10px;
  color:var(--text);padding:8px 0;text-align:center;
  cursor:pointer;transition:.15s;font-size:.72rem;font-weight:700;
}
.tuner-btn:hover{border-color:rgba(57,208,195,.35)}
.tuner-btn.active{
  background:linear-gradient(to bottom, #217f76, #185f59);
  border-color:rgba(57,208,195,.65);color:#fff;
}
.tuner-btn .sub{display:block;font-size:.46rem;color:var(--text-dim);font-weight:400;margin-top:1px;line-height:1.15}
.tuner-btn.active .sub{color:rgba(255,255,255,.65)}

/* ═══ METRONOME ═══ */
.metro-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.bpm-btn{
  background:var(--surface2);border:1px solid var(--border);border-radius:8px;
  color:var(--text);width:34px;height:34px;font-size:1rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;
}
.bpm-btn:hover{border-color:var(--metro);color:var(--metro)}
.bpm-input{width:62px;text-align:center;font-weight:700;font-size:.9rem;font-variant-numeric:tabular-nums}
.beat-dots{display:flex;gap:4px;margin-left:6px}
.beat-dot{width:10px;height:10px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);transition:background .06s,transform .06s}
.beat-dot.tick{background:var(--metro);transform:scale(1.4);box-shadow:0 0 6px var(--metro)}
.beat-dot.accent{background:#e879f9;box-shadow:0 0 8px #e879f9}
.metro-sub-row{margin-top:.4rem;display:flex;align-items:center;gap:.4rem}

/* ═══ LOOPER TRANSPORT ═══ */
.looper-transport{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.loop-btn{
  border:none;border-radius:10px;padding:9px 16px;
  font-size:.78rem;font-weight:800;cursor:pointer;transition:.15s;
  text-transform:uppercase;letter-spacing:.04em;
}
.loop-btn:disabled{opacity:.3;cursor:not-allowed}
.loop-btn.rec{background:linear-gradient(to bottom, #ff5d5f, #e14245);color:#fff}
.loop-btn.rec.recording{animation:pulse-rec .8s infinite}
.loop-btn.rec.dubbing{background:linear-gradient(to bottom, #ff8c3a, #f97316);animation:pulse-rec 1.2s infinite}
.loop-btn.stop{background:linear-gradient(to bottom, #b9841c, #91670f);color:#161006}
.loop-btn.play{background:linear-gradient(to bottom, #2bcb71, #1fa95a);color:#07150d}
.loop-btn.clr{background:var(--clr);color:#fff}
.loop-btn.metro{
  background:linear-gradient(to bottom, #222731, #191d25);
  color:var(--text);border:1px solid var(--border);
}
.loop-btn.metro.on{background:var(--metro);color:#000;border-color:var(--metro)}
@keyframes pulse-rec{0%,100%{opacity:1}50%{opacity:.5}}
.loop-ring-wrap{flex-shrink:0}
.loop-status-text{font-size:.7rem;color:var(--text-dim);white-space:nowrap}

/* ═══ TRACK STRIPS ═══ */
#tracks{display:flex;flex-direction:column;gap:3px;margin-top:.4rem}
.track-strip{
  display:flex;align-items:center;gap:4px;
  background:linear-gradient(to bottom, rgba(255,255,255,.025), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.04);
  border-radius:10px;padding:4px 6px;font-size:.65rem;
}
.track-strip[data-track="0"]{box-shadow:inset 3px 0 0 #ef4444}
.track-strip[data-track="1"]{box-shadow:inset 3px 0 0 #3b82f6}
.track-strip[data-track="2"]{box-shadow:inset 3px 0 0 #22c55e}
.track-strip[data-track="3"]{box-shadow:inset 3px 0 0 #a78bfa}

/* Selected (recording-to) track highlight */
.track-strip.selected{background:linear-gradient(to bottom, rgba(255,255,255,.05), rgba(255,255,255,.02));border-color:rgba(255,255,255,.12)}
.track-strip[data-track="0"].selected{box-shadow:inset 3px 0 0 #ef4444, 0 0 0 1px rgba(239,68,68,.3)}
.track-strip[data-track="1"].selected{box-shadow:inset 3px 0 0 #3b82f6, 0 0 0 1px rgba(59,130,246,.3)}
.track-strip[data-track="2"].selected{box-shadow:inset 3px 0 0 #22c55e, 0 0 0 1px rgba(34,197,94,.3)}
.track-strip[data-track="3"].selected{box-shadow:inset 3px 0 0 #a78bfa, 0 0 0 1px rgba(167,139,250,.3)}
.track-color{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.track-label{width:48px;font-weight:600;flex-shrink:0;font-size:.6rem}
.track-vol{width:60px;accent-color:var(--accent);height:14px;cursor:pointer}
.track-strip button{
  background:var(--surface3);border:1px solid var(--border);border-radius:6px;
  color:var(--text-dim);padding:2px 6px;font-size:.6rem;font-weight:600;
  min-width:28px;min-height:28px;
  cursor:pointer;transition:.12s;
}
.track-strip button:hover{border-color:var(--accent);color:var(--accent)}
.track-strip button.active{background:var(--accent-dim);border-color:var(--accent);color:#fff}
.track-mute.muted{background:#ef4444;border-color:#ef4444;color:#fff}
.track-solo.soloed{background:var(--stop);border-color:var(--stop);color:#000}
.track-waveform{flex:1;min-width:60px;height:28px;border-radius:4px;background:var(--surface)}

/* Active track selector */
.active-track-row{display:flex;align-items:center;gap:.3rem;margin-top:.4rem}
.track-select{
  background:var(--surface2);border:2px solid var(--border);border-radius:8px;
  width:32px;height:32px;font-size:.75rem;font-weight:700;cursor:pointer;transition:.15s;
}
.track-select.active{background:var(--surface3);border-width:2px}

/* ═══ DRUM MACHINE ═══ */
.drum-toolbar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.6rem}
.drum-toolbar select{font-size:.7rem;padding:4px 6px;border-radius:8px}
.drum-vol-wrap,.drum-swing-wrap{display:flex;align-items:center;gap:4px}
.drum-vol-slider{width:70px;accent-color:var(--accent);height:14px;cursor:pointer}
.swing-val{font-size:.6rem;color:var(--text-dim);width:24px;text-align:right;font-variant-numeric:tabular-nums}

.drum-transport{display:flex;align-items:center;gap:.35rem;margin-bottom:.6rem}
.drum-step-display{font-size:.7rem;color:var(--text-dim);margin-left:6px;font-variant-numeric:tabular-nums}

.drum-grid-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
.drum-grid{display:flex;flex-direction:column;gap:2px;min-width:fit-content}

.drum-beat-markers{display:flex;gap:2px}
.drum-beat-marker{width:26px;height:14px;text-align:center;font-size:.5rem;color:var(--text-muted);font-weight:700;flex-shrink:0}
.drum-beat-marker.downbeat{color:#c2c9d4}

.drum-row{display:flex;align-items:center;gap:0}
.drum-row-label{width:52px;flex-shrink:0;font-size:.6rem;font-weight:700;color:#b4bcc9;text-align:right;padding-right:6px;white-space:nowrap}
.drum-row-steps{display:flex;gap:2px}

.drum-step{
  width:26px;height:26px;border-radius:6px;
  border:1px solid rgba(255,255,255,.05);
  background:linear-gradient(to bottom, #242832, #1a1e26);
  cursor:pointer;transition:background .08s,border-color .08s,transform .08s;
  flex-shrink:0;padding:0;
}
.drum-step:hover{border-color:rgba(255,255,255,.12);background:var(--surface3)}
.drum-step.on{border-color:var(--step-color, var(--accent));background:var(--step-color, var(--accent));opacity:.9}
.drum-step.on:hover{opacity:1}
.drum-step.current{box-shadow:0 0 0 2px rgba(57,208,195,.65);transform:scale(1.06)}
.drum-step.beat-1{border-left:2px solid var(--border-light)}

/* Row divider: groups of 4 */
.drum-row-steps .drum-step:nth-child(4n+1):not(:first-child){margin-left:4px}

/* Preview button per row */
.drum-preview{
  width:22px;height:22px;border:1px solid var(--border);border-radius:4px;
  background:var(--surface2);cursor:pointer;font-size:.55rem;color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:3px;transition:.12s;
}
.drum-preview:hover{border-color:var(--accent);color:var(--accent)}

/* ═══ SONG SECTIONS ═══ */
.section-controls{display:flex;gap:.4rem;align-items:center}
.section-list{margin-top:.4rem;display:flex;flex-direction:column;gap:3px;max-height:200px;overflow-y:auto}
.section-item{display:flex;align-items:center;gap:6px;background:var(--surface2);border-radius:6px;padding:5px 8px;font-size:.7rem;cursor:pointer;transition:.12s}
.section-item:hover{background:var(--surface3)}
.section-item .section-badge{background:var(--accent-dim);color:#fff;border-radius:4px;padding:1px 6px;font-weight:600;font-size:.6rem;text-transform:uppercase}
.section-item .section-info{flex:1;color:var(--text-dim);font-size:.6rem}
.section-item .section-play{background:var(--play);color:#000;border:none;border-radius:4px;padding:2px 8px;font-size:.6rem;font-weight:600;cursor:pointer}
.section-item .section-delete{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.75rem;padding:2px}
.section-item .section-delete:hover{color:var(--rec)}
.section-export-row{display:flex;gap:.4rem;margin-top:.5rem}
.save-btn{
  display:flex;align-items:center;gap:4px;
  background:var(--surface2);border:1px solid var(--border);border-radius:10px;
  color:var(--text);padding:5px 10px;font-size:.65rem;font-weight:600;
  cursor:pointer;transition:.15s;
}
.save-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.save-btn:disabled{opacity:.3;cursor:not-allowed}

/* ═══ FOOTER ═══ */
footer{padding:.75rem;text-align:center;border-top:1px solid var(--border);margin-top:.5rem}
footer a{font-size:.6rem;color:var(--text-muted)}
footer a:hover{color:var(--accent)}

/* ═══ MOBILE ═══ */
@media(max-width:600px){
  header{padding:.45rem .6rem}
  header h1{font-size:.95rem}
  #controls{padding:.4rem .6rem}
  select{font-size:.72rem;padding:4px 6px}
  .fret-cell{min-width:34px;height:27px}
  .note-label{width:19px;height:19px;font-size:.5rem}
  .panel-collapsible > :not(summary){padding:.4rem .6rem}
  .track-vol{width:45px}
  .track-label{width:38px;font-size:.55rem}
  .track-waveform{min-width:40px}
}

/* iPhone-specific */
@media(max-width:430px){
  .tuner-grid{gap:.3rem}
  .tuner-btn{padding:8px 0 7px;font-size:.68rem}
  .tuner-btn .sub{font-size:.42rem}
  .drum-vol-slider{width:64px}
}