*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#14171c;--bg-deep:#0f1216;--surface:#1c2027;--card:#242a33;--border:rgba(255,255,255,.08);
  --text:#edeff1;--muted:#8b93a1;--accent:#7fa37a;--accent-rgb:127,163,122;--accent-line:rgba(127,163,122,.4);
  --gold:#ffc400;--coral:#b46a5c;--coral-rgb:180,106,92;
  --serif:'Fraunces',serif;--sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;--mono:'IBM Plex Mono','Courier New',monospace;
  --fs:16px;
}
html,body{height:100%;height:100dvh;overflow:hidden;background-color:var(--bg);
  background-image:radial-gradient(1200px 800px at 15% -10%,#1a1f26 0%,var(--bg) 55%);
  background-attachment:fixed;color:var(--text);
  font-family:var(--sans)}
.hidden{display:none!important}
button{cursor:pointer;border:none;background:none;color:inherit;font-family:inherit}
textarea,input{font-family:inherit}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2d333d;border-radius:4px}

/* ── LOGIN ──────────────────────────────────────────── */
.login-screen{
  position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;
  padding:20px;background-color:var(--bg);
  background-image:radial-gradient(1200px 800px at 15% -10%,#1a1f26 0%,var(--bg) 55%)
}
.login-panel{
  width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:32px 28px;box-shadow:0 30px 80px rgba(0,0,0,.45)
}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.login-brand-mark{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#4f6d4c);
  display:flex;align-items:center;justify-content:center;font-size:20px
}
.login-brand-name{font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:.3px}
.login-brand-sub{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px}
.login-title{font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:4px}
.login-sub{font-size:12.5px;color:var(--muted);margin-bottom:18px;line-height:1.5}
.login-error{
  display:none;background:rgba(var(--coral-rgb),.14);border:1px solid rgba(var(--coral-rgb),.4);
  color:#e2a89c;font-size:12px;padding:9px 12px;border-radius:9px;margin-bottom:14px;line-height:1.4
}
.login-error.active{display:block}
.login-field{margin-bottom:14px}
.login-field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:6px}
.login-field input{
  width:100%;background:var(--card);border:1px solid var(--border);border-radius:9px;
  padding:10px 12px;color:var(--text);font-size:14px;outline:none;transition:border-color .15s
}
.login-field input:focus{border-color:var(--accent-line)}
.login-submit-btn{
  width:100%;padding:11px;border-radius:9px;font-size:14px;font-weight:700;margin-top:6px;
  background:var(--accent);color:#0f1410;transition:opacity .15s
}
.login-submit-btn:hover{opacity:.88}
.login-submit-btn:disabled{opacity:.6;cursor:default}

/* ── SHARED UTILS ───────────────────────────────────── */
.pill-btn{
  padding:7px 16px;border-radius:20px;font-size:13px;font-weight:600;
  border:1.5px solid var(--border);color:var(--muted);
  transition:all .18s;white-space:nowrap
}
.pill-btn:hover{border-color:var(--muted);color:var(--text)}
.pill-btn.active{background:var(--accent);color:#0f1410;border-color:var(--accent)}
.back-btn{
  padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;
  background:var(--card);border:1px solid var(--border);flex-shrink:0;
  transition:border-color .15s;white-space:nowrap
}
.back-btn:hover{border-color:var(--muted)}

/* ── UPLOAD ─────────────────────────────────────────── */
#screen-upload{
  position:relative;
  height:100vh;height:calc(var(--vh,1vh)*100);
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 40%,#1a1f26 0%,var(--bg) 70%)
}
#up-back-btn{position:absolute;top:16px;left:16px}
.up-logout-btn{position:absolute;top:16px;right:16px}
.up-wrap{text-align:center;max-width:460px;padding:24px;width:100%}
.up-logo{font-family:var(--serif);font-size:52px;font-weight:600;letter-spacing:5px;
  text-shadow:0 0 60px rgba(var(--accent-rgb),.8);margin-bottom:4px}
.up-sub{color:var(--muted);font-size:12px;letter-spacing:3px;text-transform:uppercase;margin-bottom:36px}
.drop-zone{border:2px dashed var(--border);border-radius:14px;
  padding:44px 28px;transition:border-color .2s,background .2s;position:relative}
.drop-zone.drag-over{border-color:var(--accent);background:rgba(var(--accent-rgb),.09)}
.drop-icon{font-size:38px;margin-bottom:14px;display:block;opacity:.7}
.drop-text{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:18px}
#file-input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop-btn{display:inline-block;background:var(--accent);color:#0f1410;
  padding:11px 32px;border-radius:8px;font-size:14px;font-weight:600;
  position:relative;z-index:1;pointer-events:none}
.up-tip{margin-top:18px;font-size:12px;color:var(--muted);line-height:1.6}
.up-tip b{color:var(--gold)}
#up-err{margin-top:14px;color:var(--coral);font-size:13px;padding:10px 16px;
  background:rgba(var(--coral-rgb),.12);border-radius:8px;display:none}

/* ── LIST ───────────────────────────────────────────── */
#screen-list{
  height:100vh;height:calc(var(--vh,1vh)*100);
  display:flex;flex-direction:column
}
.list-head{
  padding:14px 16px 12px;background:var(--surface);
  border-bottom:1px solid var(--border);flex-shrink:0
}
.list-head-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.list-title{font-family:var(--serif);font-size:19px;font-weight:600;flex:1;letter-spacing:-.2px;min-width:100%}
.search-wrap{position:relative}
.search-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  opacity:.3;font-size:14px;pointer-events:none}
.search-in{width:100%;background:var(--card);border:1px solid var(--border);
  border-radius:10px;padding:9px 12px 9px 36px;color:var(--text);
  font-size:15px;outline:none;transition:border-color .15s}
.search-in:focus{border-color:var(--accent)}
#song-list{flex:1;overflow-y:auto}
.song-item{
  display:flex;align-items:center;padding:15px 16px;
  cursor:pointer;transition:background .1s;
  border-bottom:1px solid var(--border)
}
.song-item:hover{background:rgba(255,255,255,.03)}
.song-info{flex:1;min-width:0}
.song-name{
  font-size:16px;font-weight:500;line-height:1.3;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis
}
.song-name.is-fav{color:var(--gold)}
.song-meta{font-size:11px;color:var(--muted);margin-top:3px}
.fav-btn{font-size:22px;padding:2px 8px;color:var(--muted);
  transition:color .15s,transform .12s;flex-shrink:0}
.fav-btn.active{color:var(--gold)}
.fav-btn:hover{transform:scale(1.2)}
.del-btn{font-size:16px;padding:2px 8px;color:var(--muted);
  transition:color .15s,transform .12s;flex-shrink:0}
.del-btn:hover{color:var(--coral);transform:scale(1.15)}
.list-foot{
  padding:9px 16px;background:var(--surface);
  border-top:1px solid var(--border);font-size:11px;
  color:var(--muted);text-align:center;flex-shrink:0
}
.empty-msg{text-align:center;padding:60px 24px;color:var(--muted);font-size:14px;line-height:2}

/* ── SONG VIEW ──────────────────────────────────────── */
#screen-song{
  height:100vh;height:calc(var(--vh,1vh)*100);
  display:flex;flex-direction:column;overflow:hidden
}
.song-hd{
  padding:10px 12px;background:var(--surface);
  border-bottom:1px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;gap:8px;min-height:50px
}
.song-hd-title{flex:1;font-family:var(--serif);font-size:15px;font-weight:600;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
.hd-edit-btn{font-size:18px;padding:2px 6px;color:var(--muted);
  flex-shrink:0;transition:color .15s}
.hd-edit-btn:hover{color:var(--text)}
.hd-fav-btn{font-size:22px;padding:2px 6px;color:var(--muted);
  flex-shrink:0;transition:color .15s}
.hd-fav-btn.active{color:var(--gold)}
.font-grp{display:flex;align-items:center;gap:3px;flex-shrink:0}
.font-btn{
  width:32px;height:30px;border-radius:6px;font-size:14px;font-weight:700;
  background:var(--card);border:1px solid var(--border);transition:background .12s
}
.font-btn:hover{background:var(--border)}
.fs-lbl{font-size:11px;color:var(--muted);min-width:26px;text-align:center}

/* Legend */
.legend-strip{
  display:flex;flex-wrap:wrap;gap:7px;padding:9px 14px;
  background:var(--surface);border-bottom:1px solid var(--border);
  flex-shrink:0;align-items:center
}
.leg-pill{
  display:flex;align-items:center;gap:6px;
  padding:4px 11px 4px 8px;border-radius:14px;font-size:11px;font-weight:700;
  border:1px solid transparent
}

/* ── SHEET BODY (redesigned) ─────────────────────────
   Modern, dark music notation feel: rounded section
   cards with a colored header (instrument + rhythm)
   and clean lyric typography underneath.
────────────────────────────────────────────────────── */
#song-body{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  background:radial-gradient(ellipse at 50% 0%,#1a1f2680 0%,var(--bg-deep) 55%);
  font-size:var(--fs);padding:6px 12px 40px;
  -webkit-overflow-scrolling:touch
}

/* Song title block — large, elegant */
.sheet-title{
  height:300px;box-sizing:border-box;
  padding:26px 16px 20px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.sheet-title-name{
  font-family:var(--serif);
  font-size:calc(var(--fs) + 8px);font-weight:600;
  letter-spacing:-.4px;line-height:1.2;
  /* color set inline via dominant color */
}
.sheet-title-meta{
  margin-top:8px;font-size:calc(var(--fs) - 5px);
  color:var(--muted);letter-spacing:1px;text-transform:uppercase
}
.sheet-title-div{
  margin:16px auto 0;
  height:3px;border-radius:3px;width:72px;
  /* background set inline */
}

/* Section card: groups one instrument header with its lyric lines */
.sheet-section{
  border-radius:14px;margin-bottom:12px;overflow:hidden;
  background:linear-gradient(180deg,var(--sec-color,var(--accent))0c,var(--card)40%);
  border:1px solid color-mix(in srgb, var(--sec-color,var(--accent)) 25%, var(--border));
  box-shadow:0 4px 18px -8px rgba(0,0,0,.5)
}
.sheet-section-hd{
  display:flex;align-items:baseline;gap:9px;
  padding:9px 14px;
  font-family:var(--mono);
  font-size:var(--fs);font-weight:700;
  line-height:1.5;word-break:break-word;
  border-bottom:1px solid transparent;
  cursor:pointer;transition:box-shadow .15s;
  /* background and border-color set inline */
}
.sheet-section-hd.play-start-marker{box-shadow:inset 0 0 0 2px var(--accent)}
.sheet-section-hd.play-start-marker::before{content:'▶';color:var(--accent);font-size:calc(var(--fs) - 3px)}
.sec-type{font-weight:900;font-size:calc(var(--fs) + 1px)}
.sec-rhythm{font-weight:500;font-size:calc(var(--fs) - 2px);opacity:.85;color:#b9c7b6}
.sheet-section-hd strong{font-weight:900}

/* Lyric rows */
.sheet-section-body{padding:2px 4px}
.sheet-lyric-line{
  padding:7px 14px 7px 18px;
  font-size:var(--fs);font-weight:400;
  line-height:1.75;color:#DDD8CC;
}
.sheet-lyric-line:not(:last-child){border-bottom:1px solid rgba(255,255,255,.04)}
.sheet-lyric-line strong{font-weight:700;color:#fff}

/* "Now playing" line, driven by BPM/compasso/compassos during playback.
   .sheet-section-hd always carries an inline background (its instrument color),
   which beats any class selector — !important is required here or a header
   (the common case for lyric-less rhythm sections) never visibly highlights. */
.sheet-lyric-line.now-playing,.sheet-section-hd.now-playing{
  position:relative;
  background:linear-gradient(90deg,color-mix(in srgb, var(--sec-color,var(--accent)) 30%, transparent),transparent) !important;
  box-shadow:inset 3px 0 0 var(--sec-color,var(--accent))
}
.sheet-lyric-line.now-playing{color:#fff}

/* ── PLAYBAR ─────────────────────────────────────────── */
.playbar{
  background:linear-gradient(180deg,var(--surface),var(--bg-deep));
  border-top:1px solid var(--border);
  padding:12px 14px;
  padding-bottom:max(12px,env(safe-area-inset-bottom));
  flex-shrink:0
}
.scroll-mode-row{display:flex;align-items:center;gap:6px;margin-bottom:9px}
.scroll-mode-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-right:2px}
.pill-btn.small{padding:5px 12px;font-size:11px}
.scroll-bpm-wrap{display:flex;flex-direction:row;align-items:flex-start;gap:8px;flex-shrink:0}
.scroll-cfg-item{display:flex;flex-direction:column;align-items:center;gap:2px}
.dur-in.small{width:52px;font-size:13px;padding:5px 4px}
.pb-row{display:flex;align-items:center;gap:12px}
.pb-stop{
  width:42px;height:42px;border-radius:50%;font-size:15px;
  background:var(--card);border:1px solid var(--border);
  flex-shrink:0;transition:background .12s,border-color .12s
}
.pb-stop:hover{background:var(--border);border-color:var(--muted)}
.pb-play{
  width:54px;height:54px;border-radius:50%;font-size:20px;
  background:radial-gradient(circle at 35% 30%,#9cc296,var(--accent));color:#0f1410;flex-shrink:0;
  font-weight:700;transition:transform .12s,box-shadow .12s;
  box-shadow:0 4px 20px -4px rgba(var(--accent-rgb),.6)
}
.pb-play:hover{transform:scale(1.05)}
.pb-play.beating{animation:pb-beat linear infinite}
@keyframes pb-beat{
  0%{transform:scale(1);box-shadow:0 4px 20px -4px rgba(var(--accent-rgb),.6)}
  15%{transform:scale(1.14);box-shadow:0 4px 28px -2px rgba(var(--accent-rgb),.9)}
  100%{transform:scale(1);box-shadow:0 4px 20px -4px rgba(var(--accent-rgb),.6)}
}
.pb-tick-btn{
  width:34px;height:34px;border-radius:50%;font-size:14px;
  background:var(--card);border:1px solid var(--border);color:var(--muted);
  flex-shrink:0;opacity:.5;transition:background .12s,border-color .12s,opacity .12s,color .12s
}
.pb-tick-btn:hover{border-color:var(--muted);opacity:.8}
.pb-tick-btn.active{background:rgba(var(--accent-rgb),.15);border-color:var(--accent-line);color:var(--accent);opacity:1}
.dur-grp{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0}
.dur-in{
  background:var(--card);border:1px solid var(--border);
  border-radius:6px;padding:5px 7px;color:var(--text);
  font-size:15px;font-weight:700;font-family:var(--mono);
  width:68px;text-align:center;outline:none;transition:border-color .12s
}
.dur-in:focus{border-color:var(--accent)}
.dur-in.auto{border-color:var(--accent-line);color:#bcd6b8;cursor:default}
.dur-lbl{font-size:9px;color:var(--muted);letter-spacing:.8px;text-transform:uppercase}
.prog-grp{flex:1;display:flex;flex-direction:column;gap:6px}
.prog-bar{height:8px;background:var(--border);border-radius:4px;overflow:hidden;cursor:pointer;position:relative}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--accent),#9cc296);width:0%;transition:width .08s linear;border-radius:4px}
.prog-times{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}

/* ── EDITOR ──────────────────────────────────────────── */
#screen-editor{
  height:100vh;height:calc(var(--vh,1vh)*100);
  display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden
}
.ed-hd{
  padding:10px 14px;background:var(--surface);
  border-bottom:1px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;gap:10px;
  position:sticky;top:0;z-index:5
}
.ed-hd-title{font-family:var(--serif);font-size:16px;font-weight:600;flex:1}
.ed-save-btn{
  padding:8px 20px;border-radius:8px;font-size:14px;font-weight:700;
  background:var(--accent);color:#0f1410;transition:opacity .15s
}
.ed-save-btn:hover{opacity:.85}
.ed-meta{
  padding:12px 14px;background:var(--surface);
  border-bottom:1px solid var(--border);flex-shrink:0;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap
}
.ed-meta .ed-name-in{min-width:160px}
.ed-name-in{
  flex:1;background:var(--card);border:1px solid var(--border);
  border-radius:8px;padding:9px 12px;color:var(--text);
  font-size:16px;font-weight:600;outline:none;transition:border-color .15s
}
.ed-name-in:focus{border-color:var(--accent)}
.ed-name-in::placeholder{color:var(--muted)}
.ed-bpm-wrap{
  display:flex;flex-direction:column;align-items:center;
  gap:2px;flex-shrink:0
}
.ed-bpm-in{
  background:var(--card);border:1px solid var(--border);
  border-radius:6px;padding:7px 8px;color:var(--text);
  font-size:15px;font-weight:700;font-family:var(--mono);
  width:64px;text-align:center;outline:none;transition:border-color .12s
}
.ed-bpm-in:focus{border-color:var(--accent)}
.ed-bpm-lbl{font-size:9px;color:var(--muted);letter-spacing:.8px;text-transform:uppercase}
#ed-blocks{padding:10px 14px;display:flex;flex-direction:column}
.ed-block-gap{
  display:flex;align-items:center;justify-content:center;
  height:14px;flex-shrink:0
}
.ed-gap-add-btn{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:var(--accent);color:#0f1410;font-size:13px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s;cursor:pointer
}
.ed-block-gap:hover .ed-gap-add-btn{opacity:1;transform:scale(1)}
.ed-block{
  background:var(--card);border:1px solid var(--border);
  border-radius:12px;overflow:hidden
}
.ed-block-hd{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:8px 10px;border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.02)
}
.ed-block-num{font-size:11px;color:var(--muted);font-weight:700;min-width:18px}
.ed-inst-select{
  flex:1;display:flex;flex-wrap:wrap;gap:4px
}
.ed-inst-btn{
  padding:4px 10px;border-radius:14px;font-size:11px;font-weight:700;
  border:1.5px solid transparent;transition:all .15s;cursor:pointer
}
.ed-inst-btn.sel{opacity:1;border-color:rgba(0,0,0,.3)}
.ed-inst-btn:not(.sel){opacity:.45;background:var(--card)!important;color:var(--muted)!important}
.ed-bars-wrap{display:flex;align-items:center;gap:4px;flex-shrink:0}
.ed-bars-in{
  width:40px;background:var(--card);border:1px solid var(--border);
  border-radius:6px;padding:4px 5px;color:var(--text);text-align:center;
  font-size:12px;font-weight:700;font-family:var(--mono);outline:none;
  transition:border-color .12s
}
.ed-bars-in:focus{border-color:var(--accent)}
.ed-bars-lbl{font-size:10px;color:var(--muted);letter-spacing:.4px;text-transform:uppercase;white-space:nowrap}
.ed-block-actions{display:flex;gap:4px;flex-shrink:0;flex-wrap:wrap}
.ed-act-btn{
  min-width:28px;height:28px;padding:0 6px;border-radius:6px;font-size:13px;
  background:var(--border);transition:background .12s;color:var(--muted)
}
.ed-act-btn:hover{background:#2a2a40;color:var(--text)}
.ed-drum-btn{
  padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;
  background:rgba(var(--accent-rgb),.15);color:var(--accent);border:1px solid rgba(var(--accent-rgb),.3);
  transition:background .15s;white-space:nowrap
}
.ed-drum-btn:hover{background:rgba(var(--accent-rgb),.25)}
.ed-drum-btn.has-pattern{background:rgba(var(--accent-rgb),.3);border-color:var(--accent)}
.ed-rhythm-in{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--border);
  padding:6px 10px;color:#bbb;font-size:12px;font-family:var(--mono);
  outline:none;transition:border-color .15s
}
.ed-rhythm-in:focus{border-color:var(--accent)}
.ed-rhythm-in::placeholder{color:var(--muted);font-size:11px}
.ed-lyrics-ta{
  width:100%;background:transparent;border:none;
  padding:10px 12px;color:var(--text);font-size:15px;
  line-height:1.7;resize:none;outline:none;
  overflow:hidden;
}
.ed-lyrics-ta::placeholder{color:var(--muted)}
.ed-add-wrap{padding:12px 14px 20px;flex-shrink:0;display:flex;flex-direction:column;gap:10px}
.ed-add-btn{
  width:100%;padding:12px;border-radius:10px;font-size:14px;font-weight:700;
  background:var(--card);border:2px dashed var(--border);color:var(--muted);
  transition:all .15s
}
.ed-add-btn:hover{border-color:var(--accent);color:var(--accent)}
.ed-bulk-bars{display:flex;align-items:center;gap:8px;justify-content:center}
.ed-bulk-bars .ed-act-btn{width:auto;padding:0 12px;height:32px}

/* ── DRUM SEQUENCER ──────────────────────────────────── */
#screen-drum{
  height:100vh;height:calc(var(--vh,1vh)*100);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg)
}
.drum-hd{
  padding:10px 14px;background:var(--surface);
  border-bottom:1px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;gap:10px
}
.drum-hd-title{font-family:var(--serif);font-size:15px;font-weight:600;flex:1;text-align:center;color:var(--muted)}
.drum-bpm-wrap{display:flex;align-items:center;gap:6px;flex-shrink:0}
.drum-bpm-in{
  background:var(--card);border:1px solid var(--border);
  border-radius:6px;padding:5px 7px;color:var(--text);
  font-size:14px;font-weight:700;font-family:var(--mono);
  width:56px;text-align:center;outline:none
}
.drum-bpm-lbl{font-size:11px;color:var(--muted);font-weight:600}
.drum-toolbar{
  padding:8px 14px;background:var(--surface);
  border-bottom:1px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap
}
.drum-bars-lbl{font-size:12px;color:var(--muted);font-weight:600}
.drum-beat-tag{
  font-family:var(--mono);font-size:11px;font-weight:600;color:var(--accent);
  background:rgba(var(--accent-rgb),.15);padding:3px 9px;border-radius:20px;margin-right:4px
}
.drum-bar-btn{
  padding:5px 12px;border-radius:16px;font-size:12px;font-weight:700;
  border:1.5px solid var(--border);color:var(--muted);transition:all .15s
}
.drum-bar-btn.active{background:var(--accent);color:#0f1410;border-color:var(--accent)}
.drum-play-btn{
  margin-left:auto;padding:6px 16px;border-radius:16px;font-size:12px;font-weight:700;
  background:var(--accent);color:#0f1410;transition:opacity .12s
}
.drum-play-btn.playing{background:var(--coral);color:#fff}
.drum-play-btn:hover{opacity:.85}
.drum-grid-wrap{flex:1;overflow:auto;padding:12px 0}
.drum-grid{
  display:inline-flex;flex-direction:column;gap:5px;
  padding:0 14px;min-width:100%
}
.drum-row{display:flex;align-items:center;gap:4px}
.drum-label{
  font-size:11px;font-weight:700;min-width:72px;max-width:72px;
  color:var(--muted);text-align:right;padding-right:8px;flex-shrink:0
}
.drum-beat-group{display:flex;gap:2px;margin-right:4px}
.drum-cell{
  width:32px;height:32px;border-radius:5px;border:1px solid var(--border);
  background:var(--card);cursor:pointer;transition:all .1s;
  flex-shrink:0;position:relative
}
.drum-cell:hover{border-color:var(--muted)}
.drum-cell.on{border-color:transparent}
.drum-cell.ghost{border:1px dashed rgba(255,255,255,.5)}
.drum-cell.ghost::after{
  content:'';position:absolute;inset:9px;border-radius:2px;
  background:rgba(255,255,255,.55)
}
.drum-cell.playing-highlight{outline:2px solid #fff;outline-offset:1px}
.drum-beat-sep{width:3px;flex-shrink:0}
.drum-subdiv-select{
  background:var(--card);border:1px solid var(--border);border-radius:8px;
  color:var(--text);font-size:12px;font-family:var(--sans);padding:5px 8px;outline:none
}
.drum-count-row{display:flex;align-items:center;gap:4px;padding:4px 14px 0}
.drum-count-row .drum-label{visibility:hidden}
.drum-count-cell{
  width:32px;flex-shrink:0;text-align:center;
  font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--accent)
}
.drum-preview{
  display:flex;align-items:center;gap:7px;
  padding:5px 14px;border-top:1px solid var(--border);background:var(--surface)
}
.drum-preview-lbl{font-size:10px;color:var(--muted);font-weight:600;flex-shrink:0}
.drum-preview-text{
  font-family:var(--mono);font-size:11px;color:var(--text);
  white-space:nowrap;overflow-x:auto;flex:1;min-width:0;padding-bottom:1px
}
.drum-preview-text::-webkit-scrollbar{height:3px}
.drum-legend-hint{
  display:flex;align-items:center;gap:4px;padding:0 14px 8px;
  font-size:11px;color:var(--muted)
}
.ghost-dot{
  display:inline-block;width:9px;height:9px;border-radius:2px;
  border:1px dashed rgba(255,255,255,.5);background:rgba(255,255,255,.25)
}
.drum-foot{
  padding:10px 14px;
  padding-bottom:max(10px,env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--border);
  flex-shrink:0;display:flex;gap:10px;align-items:center
}
.drum-clear-btn{
  padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;
  background:var(--card);border:1px solid var(--border);color:var(--muted);
  transition:all .15s;flex-shrink:0
}
.drum-clear-btn:hover{border-color:var(--coral);color:var(--coral)}
.drum-done-btn{
  flex:1;padding:10px;border-radius:8px;font-size:14px;font-weight:700;
  background:var(--accent);color:#0f1410;transition:opacity .12s
}
.drum-done-btn:hover{opacity:.85}
.drum-stepcount-info{font-size:11px;color:var(--muted);margin-left:auto}

/* ── TAGS CONFIG ─────────────────────────────────────── */
#screen-tags{height:100vh;height:calc(var(--vh,1vh)*100);display:flex;flex-direction:column;overflow:hidden}
.tags-tabs{display:flex;gap:6px;padding:10px 14px 0;flex-shrink:0}
.tags-tab-btn{
  flex:1;padding:9px;border-radius:8px 8px 0 0;font-size:13px;font-weight:700;
  background:var(--surface);color:var(--muted);border:1px solid var(--border);border-bottom:none
}
.tags-tab-btn.active{background:var(--card);color:var(--text)}
.tags-list{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:8px}
.tag-row{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--border);border-radius:10px;padding:8px 10px
}
.tag-color-in{width:34px;height:34px;border:none;border-radius:8px;background:none;flex-shrink:0;cursor:pointer;padding:0}
.tag-color-wrap{position:relative;flex-shrink:0}
.tag-dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--border);cursor:pointer;flex-shrink:0;display:block}
.tag-color-popover{
  position:absolute;top:calc(100% + 6px);left:0;z-index:20;
  display:flex;flex-wrap:wrap;gap:6px;width:150px;
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:8px;box-shadow:0 6px 18px rgba(0,0,0,.25)
}
.tag-swatch{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;flex-shrink:0}
.tag-swatch.sel{border-color:var(--text);box-shadow:0 0 0 1px var(--card)}
.palette-hex{flex:1 1 100px;font-family:var(--mono);font-size:13px;color:var(--muted)}
.tag-label-in,.tag-keyword-in{
  background:var(--surface);border:1px solid var(--border);border-radius:6px;
  padding:7px 9px;color:var(--text);font-size:13px;outline:none;transition:border-color .15s;
  min-width:0
}
.tag-label-in{flex:1 1 100px;font-weight:600}
.tag-keyword-in{flex:1 1 120px;font-family:var(--mono);color:#bbb}
.tag-label-in:focus,.tag-keyword-in:focus{border-color:var(--accent)}
.tag-del-btn{width:28px;height:28px;border-radius:6px;font-size:13px;background:var(--border);color:var(--muted);flex-shrink:0;transition:background .12s}
.tag-del-btn:hover{background:var(--coral);color:#fff}

/* ── CSV IMPORT DIFF ─────────────────────────────────── */
#screen-csv-diff{height:100vh;height:calc(var(--vh,1vh)*100);display:flex;flex-direction:column;overflow:hidden}
.csv-diff-summary{padding:10px 14px;color:var(--muted);font-size:13px;flex-shrink:0;border-bottom:1px solid var(--border)}
.csv-diff-list{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:10px}
.csv-diff-item{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.csv-diff-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.csv-diff-name{font-weight:700;font-size:14px}
.csv-diff-choice{display:flex;gap:6px}
.csv-choice-btn{padding:6px 12px;border-radius:8px;font-size:12px;font-weight:700;background:var(--surface);border:1px solid var(--border);color:var(--muted)}
.csv-choice-btn.active{background:var(--accent);color:#0f1410;border-color:var(--accent)}
.csv-diff-body{font-family:var(--mono);font-size:12px;line-height:1.6;background:var(--surface);border-radius:8px;padding:8px 10px;max-height:220px;overflow-y:auto}
.csv-diff-line{white-space:pre-wrap;word-break:break-word;padding:1px 4px;border-radius:3px}
.csv-diff-line.add{background:rgba(var(--accent-rgb),.15);color:#9cc296}
.csv-diff-line.del{background:rgba(var(--coral-rgb),.15);color:#d9a89c;text-decoration:line-through;opacity:.8}

/* ── MODAL ───────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:20px
}
.modal-box{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  width:100%;max-width:400px;overflow:hidden
}
.modal-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--border);font-family:var(--serif);font-weight:600;font-size:15px
}
.modal-close-btn{font-size:15px;color:var(--muted);padding:2px 6px}
.modal-close-btn:hover{color:var(--text)}
.modal-body{padding:16px;display:flex;flex-direction:column;gap:14px}
.bpm-modal-row{display:flex;flex-direction:column;gap:6px}
.bpm-modal-field-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.bpm-field-choice{display:flex;gap:8px}
.bpm-choice-btn{flex:1;padding:9px 10px;border-radius:8px;font-size:13px;font-weight:600;
  background:var(--card);border:1px solid var(--border);color:var(--muted);
  text-align:center;transition:all .15s}
.bpm-choice-btn.active{background:var(--accent);color:#0f1410;border-color:var(--accent)}
.bpm-choice-btn.disabled{opacity:.4;cursor:not-allowed}
.bpm-modal-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.bpm-modal-loading,.bpm-modal-error{font-size:13px;color:var(--muted);text-align:center;padding:10px 0}
.bpm-modal-error{color:var(--coral)}
.confirm-modal-text{font-size:14px;color:var(--text);line-height:1.5}
.confirm-modal-actions{display:flex;justify-content:flex-end;gap:8px}

/* ── MOBILE ──────────────────────────────────────────── */
@media (max-width:768px){
  :root{--fs:22px}
  .list-title{font-size:19px}
  .list-head{padding:14px 14px 12px}
  .list-head-row{margin-bottom:12px;gap:8px}
  .pill-btn{padding:9px 16px;font-size:13px}
  .search-in{font-size:17px;padding:11px 14px 11px 38px}
  .song-item{padding:16px 14px;min-height:64px}
  .song-name{font-size:18px}
  .song-meta{font-size:12px;margin-top:4px}
  .fav-btn{font-size:28px;padding:4px 10px}
  .del-btn{font-size:20px;padding:4px 10px}
  .list-foot{font-size:13px;padding:12px}
  .song-hd{padding:10px 12px;gap:8px;min-height:56px}
  .back-btn{font-size:13px;padding:8px 14px}
  .song-hd-title{font-size:14px}
  .hd-fav-btn{font-size:26px}
  .font-btn{width:38px;height:38px;font-size:16px}
  .fs-lbl{font-size:13px;min-width:28px}
  .legend-strip{padding:9px 14px;gap:7px}
  .leg-pill{padding:5px 12px 5px 9px}
  .leg-pill span:last-child{font-size:13px!important}
  .sheet-section-hd{padding:11px 14px}
  .sheet-lyric-line{padding:8px 14px 8px 18px;line-height:1.85}
  .playbar{padding:14px 14px;padding-bottom:max(18px,env(safe-area-inset-bottom))}
  .pb-row{gap:12px}
  .pb-stop{width:52px;height:52px;font-size:18px;border-radius:10px}
  .pb-play{width:64px;height:52px;font-size:24px;border-radius:10px}
  .dur-in{font-size:17px;width:72px;padding:7px 8px}
  .dur-lbl{font-size:10px}
  .prog-bar{height:16px;border-radius:8px}
  .prog-fill{border-radius:8px}
  .prog-times{font-size:12px}
  .drum-cell{width:36px;height:36px;border-radius:6px}
  .drum-label{font-size:12px;min-width:68px;max-width:68px}
  .ed-name-in{font-size:17px}
  .ed-lyrics-ta{font-size:17px}
  .ed-save-btn{padding:9px 22px;font-size:15px}
  .ed-block-actions{gap:6px}
  .ed-act-btn{min-width:34px;min-height:34px;font-size:15px}
  .ed-drum-btn{padding:6px 12px;font-size:13px}
  .ed-inst-btn{padding:6px 12px;font-size:12px}
}