:root{--bg:#0a0f1e;--panel:#141b32;--panel2:#1c2542;--text:#f6f8ff;--muted:#9faad0;--accent:#58f0ff;--accent2:#b76cff;--danger:#ff5d7d;--ok:#65ff9b;}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#202a55,#070a14 64%);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);padding:8px 8px 230px}button{border:0;border-radius:10px;padding:9px 12px;font-weight:900;cursor:pointer;color:#06101d;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.25)}button.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#07101e}button.danger{background:linear-gradient(135deg,var(--danger),#ffb45d);color:#17030a}button.ghost{background:rgba(255,255,255,.1);color:var(--text);border:1px solid rgba(255,255,255,.16)}input,select{background:#070a14;color:var(--text);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:8px;font-size:15px}.topbar{max-width:1100px;margin:0 auto 6px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.topbar h1{font-size:21px;margin:0}.topbar p{font-size:11px;color:var(--muted);margin:2px 0 0}.panel{max-width:1100px;margin:0 auto 7px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:8px;box-shadow:0 14px 36px rgba(0,0,0,.22)}.compact{padding:7px 9px}.status{display:grid;grid-template-columns:1fr 190px;gap:8px}.status div{background:rgba(0,0,0,.2);border-radius:10px;padding:7px}.status span{display:block;font-size:10px;color:var(--muted)}.status strong{display:block;font-size:16px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status div:last-child strong{font-size:20px;color:var(--ok);text-shadow:0 0 14px rgba(101,255,155,.55)}
.grid{max-width:1100px;margin:0 auto 8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.bar{position:relative;border:1px solid rgba(255,255,255,.13);border-radius:12px;padding:6px;min-height:70px;transition:.16s;box-shadow:0 10px 26px rgba(0,0,0,.18)}.bar.group0{background:linear-gradient(180deg,#1c2648,#121a31)}.bar.group1{background:linear-gradient(180deg,#243120,#151f18)}.bar.selected{outline:2px solid var(--ok);box-shadow:0 0 0 2px rgba(101,255,155,.12),0 0 24px rgba(101,255,155,.18)}.bar.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(88,240,255,.22),0 0 30px rgba(88,240,255,.24);transform:translateY(-1px)}.barHead{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px;margin-bottom:3px}.miniMic{width:28px;height:28px;border-radius:50%;padding:0;font-size:13px;background:linear-gradient(135deg,#ffde59,#ff5cb8)}.miniMic.recording,.micBubble.recording button{animation:pulse .55s infinite alternate;background:linear-gradient(135deg,#ff5d7d,#fff06b)}.chordInput{width:100%;height:35px;text-align:center;font-size:22px;font-weight:950;padding:3px 4px;border-radius:9px;background:rgba(5,8,18,.75)}.capoView{height:14px;text-align:center;font-size:10px;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.suggestions{display:flex;gap:3px;overflow-x:auto;margin-top:3px;min-height:20px}.suggestions button{padding:3px 6px;border-radius:999px;font-size:10px;background:rgba(255,255,255,.12);color:var(--text);box-shadow:none;white-space:nowrap}.pasteRow{display:flex;gap:6px}.pasteRow input{flex:1}.pasteBox label{font-size:11px;color:var(--muted)}
.chordPad{position:fixed;z-index:30;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(15,22,45,.97),rgba(5,8,18,.99));border-top:1px solid rgba(255,255,255,.16);box-shadow:0 -18px 45px rgba(0,0,0,.5);padding:7px 8px 8px;backdrop-filter:blur(14px)}.padInner{max-width:1100px;margin:0 auto}.transportBar{display:grid;grid-template-columns:1.1fr 1.1fr .8fr .9fr;gap:6px;margin-bottom:5px}.transportBar button{padding:10px 6px;font-size:13px}.padPreviewLine{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:12px;color:var(--muted)}.padPreviewLine strong{font-size:22px;color:var(--ok);min-width:62px;text-shadow:0 0 16px rgba(101,255,155,.45)}.hintMini{font-size:10px}.padRows{display:grid;gap:5px}.padRow{display:flex;gap:4px;overflow-x:auto;padding-bottom:1px}.padKey{min-width:43px;padding:8px 5px;border-radius:9px;background:rgba(255,255,255,.12);color:var(--text);border:1px solid rgba(255,255,255,.12);box-shadow:none;font-size:13px}.padKey.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#06101d;box-shadow:0 0 18px rgba(88,240,255,.25)}.qualityRow .padKey{min-width:50px;font-size:12px}.settingsBox{margin-top:5px;border-top:1px solid rgba(255,255,255,.1);padding-top:4px}.settingsBox summary{font-size:12px;color:var(--muted);font-weight:900;cursor:pointer}.padSettings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:6px}.padSettings label{display:flex;flex-direction:column;gap:2px;font-size:10px;color:var(--muted)}.padSettings input,.padSettings select{height:34px;font-size:13px;padding:6px;width:100%;min-width:0}.padSettings button{font-size:12px;padding:8px 6px}.micBubble{position:fixed;right:10px;bottom:232px;z-index:24;display:flex;align-items:center;gap:7px;background:rgba(9,13,28,.92);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 10px 5px 5px;box-shadow:0 12px 30px rgba(0,0,0,.4);backdrop-filter:blur(10px)}.micBubble button{width:42px;height:42px;border-radius:50%;padding:0;font-size:19px;background:linear-gradient(135deg,#ffde59,#ff5cb8)}.micBubble span{font-size:11px;font-weight:900}.toast{position:fixed;z-index:50;top:14px;left:50%;transform:translateX(-50%);background:#fff;color:#07101e;border-radius:999px;padding:10px 16px;font-weight:900;box-shadow:0 12px 30px rgba(0,0,0,.3)}@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.08);box-shadow:0 0 28px rgba(255,94,153,.75)}}
@media(max-width:720px){body{padding:6px 6px 228px}.topbar h1{font-size:18px}.topbar p{display:none}.topbar .ghost{padding:8px 10px}.status{grid-template-columns:1fr 128px}.status strong{font-size:13px}.status div:last-child strong{font-size:16px}.grid{gap:5px}.bar{min-height:62px;padding:4px;border-radius:10px}.barHead{font-size:10px;margin-bottom:2px}.miniMic{width:25px;height:25px;font-size:12px}.chordInput{height:31px;font-size:18px}.capoView{font-size:9px;height:12px}.suggestions{display:none}.pasteBox{display:none}.transportBar{grid-template-columns:1fr 1fr .72fr .86fr}.transportBar button{font-size:12px;padding:9px 3px}.padKey{min-width:39px;padding:7px 4px;font-size:12px}.qualityRow .padKey{min-width:46px;font-size:11px}.padPreviewLine strong{font-size:19px;min-width:52px}.padSettings{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.micBubble{bottom:230px;right:7px}.micBubble span{display:none}}
@media(max-width:430px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.bar{min-height:58px}.chordInput{font-size:16px;height:29px}.capoView{display:none}.status{grid-template-columns:1fr 105px}.status div{padding:5px}.topbar{margin-bottom:4px}.panel{margin-bottom:5px}.padPreviewLine{margin-bottom:4px}.transportBar{gap:4px}.transportBar button{font-size:11px}.padRow{gap:3px}.padKey{min-width:35px}.qualityRow .padKey{min-width:42px}.padSettings{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* v5: コード選択は小節タップ時のポップアップへ */
body{padding-bottom:132px}.chordPad{padding:6px 8px}.padRows{display:none}.settingsBox{margin-top:2px}.padPreviewLine{margin-bottom:2px}.micBubble{bottom:140px}.chordInput{cursor:pointer;caret-color:transparent}.bar{cursor:pointer}.bar:active{transform:scale(.985)}
.codeModal[hidden]{display:none}.codeModal{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center}.modalShade{position:absolute;inset:0;background:rgba(0,0,0,.58);backdrop-filter:blur(5px)}.modalCard{position:relative;width:min(680px,100%);margin:0 8px 8px;background:linear-gradient(180deg,rgba(27,36,72,.98),rgba(8,12,27,.99));border:1px solid rgba(255,255,255,.16);border-radius:18px;box-shadow:0 -18px 55px rgba(0,0,0,.55);padding:10px}.modalHead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}.modalHead span{display:block;font-size:11px;color:var(--muted);font-weight:900}.modalHead strong{display:block;font-size:30px;color:var(--ok);line-height:1;text-shadow:0 0 18px rgba(101,255,155,.45)}.modalRows{display:grid;gap:5px}.modalLabel{font-size:11px;color:var(--muted);font-weight:900}.modalCard .padRow{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;overflow:visible;padding:0}.modalCard .padKey{min-width:0;padding:10px 4px;font-size:14px}.modalCard .qualityRow{grid-template-columns:repeat(5,1fr)}.modalCard .qualityRow .padKey{min-width:0;font-size:12px}.modalActions{display:grid;grid-template-columns:1fr 1fr .8fr 1fr;gap:6px;margin-top:10px}.modalActions button,.modalHead button{box-shadow:none}.modalOpen{overflow:hidden}
@media(max-width:720px){body{padding-bottom:126px}.micBubble{bottom:132px}.chordPad{padding-bottom:calc(6px + env(safe-area-inset-bottom))}.padPreviewLine{font-size:11px}.transportBar button{padding:9px 3px}.modalCard{margin:0 6px calc(6px + env(safe-area-inset-bottom));border-radius:16px;padding:9px}.modalHead strong{font-size:27px}.modalCard .padRow{grid-template-columns:repeat(6,1fr);gap:4px}.modalCard .padKey{padding:9px 2px;font-size:13px;border-radius:8px}.modalCard .qualityRow{grid-template-columns:repeat(5,1fr)}.modalCard .qualityRow .padKey{font-size:11px}.modalActions{grid-template-columns:1fr 1fr .75fr 1fr;gap:5px}.modalActions button{font-size:12px;padding:9px 3px}}
@media(max-width:430px){body{padding-bottom:122px}.micBubble{bottom:128px}.transportBar{grid-template-columns:1fr 1fr .7fr .8fr}.padPreviewLine .hintMini{display:none}.settingsBox summary{font-size:11px}.modalCard .padRow{grid-template-columns:repeat(4,1fr)}.modalCard .qualityRow{grid-template-columns:repeat(3,1fr)}.modalActions{grid-template-columns:1fr 1fr;}.modalHead strong{font-size:25px}}
/* v6: 設定もポップアップ化、下部操作を整理 */
body{padding-bottom:138px}.bottomUtilityBar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:5px}.bottomUtilityBar button{font-size:12px;padding:9px 5px}.settingsBtn{background:linear-gradient(135deg,#ff335f,#ff8b3d);color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:0 0 18px rgba(255,69,100,.28)}.settingsBtn:active{transform:scale(.98)}.settingsCard{width:min(760px,100%)}.popupSettings{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:4px}.modalHint{font-size:10px;color:#ffd36b;margin-left:6px;font-weight:700}.chordInput{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modalCard .modalLabel{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.micBubble{bottom:146px}
@media(max-width:720px){body{padding-bottom:142px}.bottomUtilityBar{grid-template-columns:1fr 1fr 1fr}.bottomUtilityBar button{font-size:11px;padding:8px 3px}.popupSettings{grid-template-columns:repeat(2,minmax(0,1fr))}.micBubble{bottom:148px}.modalHint{display:block;width:100%;margin-left:0;margin-top:2px}}
@media(max-width:430px){body{padding-bottom:138px}.bottomUtilityBar{gap:4px}.bottomUtilityBar button{font-size:10px;padding:8px 2px}.popupSettings{grid-template-columns:repeat(2,minmax(0,1fr))}.popupSettings button{font-size:11px}.micBubble{bottom:144px}.modalActions button{font-size:11px}.modalHead strong{font-size:22px}}
/* v7: 設定を上部へ、レコーディングと曲一覧 */
.topActions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.topActions button{padding:9px 12px}.status{grid-template-columns:160px 1fr 180px}.transportBar{grid-template-columns:1fr 1fr .75fr .85fr .85fr}.recordBtn{background:linear-gradient(135deg,#ff255a,#ffce63);color:#17030a}.recordBtn.recording{animation:pulse .55s infinite alternate;background:linear-gradient(135deg,#ff1d3f,#fff06b)}#voicePlayer{width:100%;height:36px;margin-top:4px}.songsCard{width:min(780px,100%)}.songsActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}.songsList{display:grid;gap:7px;max-height:52vh;overflow:auto}.songItem{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:8px}.songItem strong{display:block;font-size:15px}.songItem span{display:block;color:var(--muted);font-size:11px;margin-top:2px}.songItem button{box-shadow:none}.emptySong{text-align:center;color:var(--muted);padding:22px 10px;border:1px dashed rgba(255,255,255,.18);border-radius:12px}.popupSettings label:first-child{grid-column:span 2}.popupSettings label:first-child input{font-size:15px;font-weight:900}.bottomUtilityBar{display:none!important}
@media(max-width:720px){.topbar{align-items:center}.topActions{gap:4px}.topActions button{padding:8px 8px;font-size:12px}.status{grid-template-columns:1fr 1fr}.status div:nth-child(2){grid-column:1/3}.transportBar{grid-template-columns:1fr 1fr .72fr .78fr .78fr}.transportBar button{font-size:11px;padding:8px 2px}.songItem{grid-template-columns:1fr auto}.songItem button[data-del]{grid-column:2}.popupSettings label:first-child{grid-column:span 2}}
@media(max-width:430px){body{padding-bottom:154px}.topbar{gap:4px}.topActions button{font-size:11px;padding:7px 6px}.status{grid-template-columns:1fr 92px}.status div:first-child{grid-column:1/3}.status div:nth-child(2){grid-column:auto}.transportBar{grid-template-columns:1fr 1fr 0.8fr;grid-auto-rows:auto}.transportBar #recordBtn,.transportBar #previewChord{grid-column:span 1}.transportBar button{font-size:10px}.padPreviewLine{flex-wrap:wrap}.songsActions{grid-template-columns:1fr}.songItem{grid-template-columns:1fr;}.songItem button{width:100%}}
/* v9: うたコードを独立画面化。小節端マイクは廃止 */
.utaBtn{background:linear-gradient(135deg,#36f5ff,#8b5cf6);color:#06101d;border:1px solid rgba(255,255,255,.22);font-weight:900;box-shadow:0 0 18px rgba(54,245,255,.22)}
.bar .miniMic,.micBubble{display:none!important}.barHead{justify-content:flex-start}.transportBar{grid-template-columns:1fr 1fr .72fr .82fr .9fr .85fr}.utaCard{width:min(760px,100%)}.utaGuide p{margin:0 0 10px;color:var(--muted);font-size:13px;line-height:1.55}.utaMicButton{width:100%;min-height:84px;border-radius:18px;font-size:24px;font-weight:1000;background:linear-gradient(135deg,#ffde59,#ff5cb8);color:#120611;box-shadow:0 0 28px rgba(255,92,184,.28)}.utaMicButton.recording{animation:pulse .48s infinite alternate;background:linear-gradient(135deg,#ff1748,#fff06b)}.utaStatus{margin:10px 0;padding:10px;border-radius:12px;background:rgba(0,0,0,.25);color:var(--ok);font-weight:900}.utaCandidates{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}.utaCandidate{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:14px 12px;border-radius:14px;background:rgba(255,255,255,.1);color:var(--text);border:1px solid rgba(255,255,255,.14);box-shadow:none}.utaCandidate strong{font-size:24px}.utaCandidate span{font-size:12px;color:var(--muted)}.utaCandidate.selected{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#06101d}.utaCandidate.selected span{color:#06101d}.utaActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.emptyCandidate{grid-column:1/-1;text-align:center;color:var(--muted);padding:18px;border:1px dashed rgba(255,255,255,.18);border-radius:12px}
@media(max-width:720px){.transportBar{grid-template-columns:1fr 1fr 0.75fr;grid-auto-rows:auto}.transportBar button{font-size:11px}.utaCandidates{grid-template-columns:repeat(2,1fr)}.utaCandidate strong{font-size:21px}.utaMicButton{min-height:76px;font-size:22px}.topActions .utaBtn{order:2}.topActions .settingsBtn{order:3}.topActions #saveBtn{order:4}}
@media(max-width:430px){.transportBar{grid-template-columns:1fr 1fr 0.8fr}.utaCandidates{grid-template-columns:1fr 1fr;gap:6px}.utaCandidate{padding:12px 9px}.utaCandidate strong{font-size:19px}.utaGuide p{font-size:12px}.utaActions{grid-template-columns:1fr}.topActions button{font-size:10px;padding:7px 5px}}
/* v17: うたコード候補進行と10秒録音 */
#utaVoicePlayer{width:100%;height:36px;margin:8px 0 2px}.utaProgressions{grid-template-columns:1fr!important}.utaProgCard{display:grid;grid-template-columns:1fr auto auto;gap:7px;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:8px}.utaProgCard.selected{border-color:rgba(90,255,194,.75);box-shadow:0 0 18px rgba(90,255,194,.18);background:rgba(90,255,194,.10)}.utaProgCard label{display:grid;gap:4px;font-size:11px;color:var(--muted);font-weight:900}.utaProgCard input{width:100%;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.22);color:var(--text);font-size:18px;font-weight:900;padding:9px}.utaProgCard button{box-shadow:none;padding:10px 10px}.utaTimer{font-size:18px;color:#ffde59;font-weight:1000;margin-left:6px}.utaSmall{font-size:11px;color:var(--muted);display:block;margin-top:4px}.bar.active .chordInput{box-shadow:0 0 0 2px rgba(90,255,194,.55),0 0 18px rgba(90,255,194,.24)}
@media(max-width:520px){.utaProgCard{grid-template-columns:1fr 1fr;gap:6px}.utaProgCard label{grid-column:1/3}.utaProgCard input{font-size:16px}.utaProgCard button{font-size:12px;padding:9px 5px}}

/* v18: ChordSketch logo header */
.brandBox{display:flex;align-items:center;min-height:54px}
.appLogo{display:block;width:min(340px,52vw);height:auto;max-height:66px;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
.topbar{align-items:center}
@media(max-width:720px){.brandBox{min-height:42px}.appLogo{width:min(230px,52vw);max-height:48px}.topActions button{padding:7px 7px}}
@media(max-width:430px){.appLogo{width:min(190px,48vw);max-height:40px}.topActions{gap:3px}.topActions button{font-size:10px;padding:6px 5px}}

/* v19: 設定を曲名とコードの間へ常時表示 / アルペジオ回数を厳密化 */
.titleStatus{grid-template-columns:1fr 170px;align-items:stretch}
.codeStatus{grid-template-columns:1fr;padding-top:6px;padding-bottom:6px}
.codeStatus div{min-height:42px}.codeStatus strong{font-size:16px;letter-spacing:.04em}
.inlineSettings{padding:7px 9px;margin-bottom:7px;transition:.22s}
.inlineSettings.settingsFocus{outline:2px solid rgba(255,94,124,.85);box-shadow:0 0 0 3px rgba(255,94,124,.12),0 0 28px rgba(255,94,124,.22)}
.settingsTitle{font-size:11px;color:#ffd0d8;font-weight:1000;margin-bottom:4px;letter-spacing:.08em}
.inlinePadSettings{display:grid;grid-template-columns:1.45fr .72fr .72fr .68fr .85fr .9fr .72fr .9fr .85fr auto auto;gap:5px;margin-top:0;align-items:end}
.inlinePadSettings label{font-size:9px;gap:1px;min-width:0;color:var(--muted)}
.inlinePadSettings input,.inlinePadSettings select{height:28px;font-size:12px;padding:4px 5px;border-radius:8px;min-width:0;width:100%}
.inlinePadSettings button{height:28px;min-width:68px;padding:4px 7px;border-radius:8px;font-size:11px;white-space:nowrap;box-shadow:none}
.inlinePadSettings label:first-of-type{grid-column:auto}.inlinePadSettings label:first-of-type input{font-size:12px;font-weight:900}
.settingsCard{display:none!important}
@media(max-width:720px){
  .titleStatus{grid-template-columns:1fr 92px}.titleStatus strong{font-size:13px}.titleStatus div:last-child strong{font-size:16px}
  .codeStatus strong{font-size:13px}
  .inlineSettings{padding:5px 6px}.settingsTitle{font-size:10px;margin-bottom:3px}
  .inlinePadSettings{grid-template-columns:1.25fr .55fr .55fr .55fr .72fr .72fr .58fr .78fr .72fr;gap:3px}
  .inlinePadSettings label{font-size:8px}.inlinePadSettings input,.inlinePadSettings select{height:24px;font-size:10px;padding:2px 3px;border-radius:7px}.inlinePadSettings button{height:24px;min-width:0;font-size:9px;padding:2px 3px;border-radius:7px}
  .inlinePadSettings #add4Bars{grid-column:8}.inlinePadSettings #applySettings{grid-column:9}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:430px){
  .inlinePadSettings{grid-template-columns:1.35fr .55fr .55fr .55fr .72fr .72fr .58fr .72fr .72fr;gap:2px}
  .inlinePadSettings label{font-size:7.5px}.inlinePadSettings input,.inlinePadSettings select{height:23px;font-size:9px;padding:1px 2px}
  .inlinePadSettings button{height:23px;font-size:8.5px;padding:1px 2px}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px}.bar{min-height:58px}.chordInput{height:31px;font-size:18px}
}

/* v21: smartphone layout polish - keep 4 bars per row */
@media(max-width:600px){
  body{padding:5px 5px 132px;background:radial-gradient(circle at top,#202a55,#070a14 58%);overflow-x:hidden;}
  .topbar{max-width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px;margin-bottom:4px;}
  .brandBox{min-height:34px;overflow:hidden;}
  .appLogo{width:min(158px,42vw);max-height:34px;object-fit:contain;object-position:left center;}
  .topActions{display:grid;grid-template-columns:1fr 1fr;gap:3px;min-width:168px;}
  .topActions button{height:30px;font-size:10px;padding:4px 5px;border-radius:8px;box-shadow:none;white-space:nowrap;}
  .panel{max-width:100%;border-radius:12px;margin-bottom:5px;padding:6px;}
  .titleStatus{grid-template-columns:1fr 72px!important;gap:5px;padding:5px 6px;}
  .titleStatus div{padding:5px;border-radius:8px;min-width:0;}
  .titleStatus span{font-size:8px;}
  .titleStatus strong{font-size:12px!important;line-height:1.15;}
  .titleStatus div:last-child strong{font-size:14px!important;}
  .inlineSettings{padding:5px;margin-bottom:5px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .settingsTitle{font-size:9px;margin-bottom:3px;color:#ffd0d8;}
  .inlinePadSettings{display:flex!important;flex-wrap:nowrap;gap:4px;align-items:end;min-width:max-content;}
  .inlinePadSettings label{width:48px;flex:0 0 48px;font-size:7px;line-height:1.1;gap:1px;}
  .inlinePadSettings label:first-child{width:118px;flex-basis:118px;}
  .inlinePadSettings label:nth-child(6){width:68px;flex-basis:68px;}
  .inlinePadSettings label:nth-child(8){width:62px;flex-basis:62px;}
  .inlinePadSettings input,.inlinePadSettings select{height:24px;font-size:10px;padding:2px 3px;border-radius:7px;}
  .inlinePadSettings #songTitle{font-size:11px;font-weight:900;}
  .inlinePadSettings button{height:24px;min-width:48px;font-size:8.5px;padding:2px 4px;border-radius:7px;flex:0 0 auto;}
  .codeStatus{padding:5px 6px;margin-bottom:5px;}
  .codeStatus div{min-height:32px;padding:5px;border-radius:8px;}
  .codeStatus span{font-size:8px;}
  .codeStatus strong{font-size:12px!important;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .grid{width:100%;max-width:100%;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px;margin-bottom:6px;}
  .bar{min-height:54px!important;padding:3px;border-radius:9px;}
  .barHead{font-size:9px;line-height:1;margin-bottom:2px;}
  .miniMic{display:none!important;}
  .chordInput{height:30px!important;font-size:17px!important;border-radius:7px;padding:2px 2px;}
  .capoView,.suggestions{display:none!important;}
  .pasteBox{display:none!important;}
  .chordPad{padding:5px 5px calc(5px + env(safe-area-inset-bottom));}
  .transportBar{grid-template-columns:1fr 1fr 0.75fr!important;gap:4px;margin-bottom:3px;}
  .transportBar button{height:34px;font-size:10px!important;padding:4px 2px;border-radius:9px;}
  .transportBar #recordBtn,.transportBar #utaCodeBottom,.transportBar #previewChord{height:32px;}
  .padPreviewLine{font-size:9px;margin:0;gap:5px;min-height:20px;}
  .padPreviewLine strong{font-size:16px;min-width:42px;}
  .padPreviewLine .hintMini{font-size:9px;max-width:92px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #voicePlayer:not([hidden]){height:30px;width:100%;margin-top:3px;}
  .modalCard{max-height:92vh;overflow:auto;}
}

@media(max-width:380px){
  .appLogo{width:135px;max-height:30px;}
  .topActions{min-width:154px;}
  .topActions button{font-size:9px;height:28px;padding:3px 4px;}
  .titleStatus{grid-template-columns:1fr 62px!important;}
  .inlinePadSettings label{width:44px;flex-basis:44px;}
  .inlinePadSettings label:first-child{width:104px;flex-basis:104px;}
  .inlinePadSettings label:nth-child(6){width:62px;flex-basis:62px;}
  .grid{gap:3px;}
  .bar{min-height:50px!important;padding:2px;}
  .chordInput{height:27px!important;font-size:15px!important;}
  .transportBar button{font-size:9px!important;}
}

/* v22 lyrics / recording / mobile polish */
.codeStatus{display:flex;align-items:center;gap:10px;justify-content:space-between;}
.codeStatus .adoptedLine{min-width:0;flex:1;}
.addBarsQuick{border:0;border-radius:14px;padding:10px 14px;font-weight:900;color:#08111f;background:linear-gradient(135deg,#58f7ff,#b65cff);box-shadow:0 8px 20px rgba(77,234,255,.2);white-space:nowrap;}
#inlineSettings #add4Bars{display:none!important;}
.bar{padding-bottom:8px;}
.bar .chordInput{height:42px!important;margin-bottom:6px;}
.lyricLine{width:100%;min-height:26px;border:1px dashed rgba(255,255,255,.18);border-radius:8px;background:rgba(0,0,0,.18);color:#eaf2ff;font-size:13px;line-height:1.25;padding:5px 7px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lyricLine.empty{color:rgba(255,255,255,.38);font-weight:700;}
.recordPage{position:fixed;inset:0;z-index:80;background:#f7f7f7;color:#111;overflow:auto;padding:24px;}
.recordPageInner{max-width:920px;margin:0 auto;background:#fff;min-height:calc(100vh - 48px);box-shadow:0 20px 60px rgba(0,0,0,.22);padding:30px 36px;border-radius:20px;}
.recordPageHeader{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd;padding-bottom:14px;margin-bottom:22px;gap:12px;}
.recordPageHeader span{display:block;font-size:12px;color:#555;}
.recordPageHeader strong{font-size:28px;}
.recordPageActions{display:flex;gap:8px;}
.leadSheet{font-family:Georgia,'Yu Mincho','Hiragino Mincho ProN',serif;font-weight:700;line-height:1.35;padding-bottom:90px;}
.leadRow{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:0 0 18px;break-inside:avoid;}
.leadCell{min-height:64px;}
.leadChord{font-size:19px;margin-bottom:5px;letter-spacing:.02em;}
.leadLyric{font-size:18px;white-space:pre-wrap;min-height:24px;}
.recordPageBottom{position:sticky;bottom:0;background:rgba(255,255,255,.96);border-top:1px solid #ddd;padding:14px 0;display:flex;align-items:center;gap:10px;}
.recordPageBottom button{min-width:160px;}
#recordPageStatus{font-weight:800;color:#333;}
@media(max-width:700px){
  .codeStatus{gap:6px;padding:8px!important;}
  .addBarsQuick{padding:8px 10px;font-size:12px;border-radius:10px;}
  .bar{padding:6px!important;min-height:74px!important;}
  .bar .chordInput{height:34px!important;font-size:19px!important;margin-bottom:4px;}
  .lyricLine{min-height:21px;font-size:10px;padding:3px 4px;border-radius:6px;}
  .recordPage{padding:8px;}
  .recordPageInner{border-radius:12px;min-height:calc(100vh - 16px);padding:14px 12px;}
  .recordPageHeader strong{font-size:21px;}
  .recordPageActions button{padding:8px 10px;font-size:12px;}
  .leadRow{grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:14px;}
  .leadChord{font-size:14px;}
  .leadLyric{font-size:12px;line-height:1.25;}
  .leadCell{min-height:52px;}
  .recordPageBottom{gap:6px;flex-wrap:wrap;}
  .recordPageBottom button{min-width:calc(50% - 6px);font-size:13px;padding:10px 8px;}
}
@media print{
  body>*:not(#recordPage){display:none!important;}
  #recordPage{display:block!important;position:static;inset:auto;padding:0;background:#fff;color:#000;}
  .recordPageInner{box-shadow:none;border-radius:0;max-width:none;min-height:auto;padding:18mm;}
  .recordPageActions,.recordPageBottom{display:none!important;}
  .recordPageHeader{border-bottom:0;margin-bottom:16px;}
  .leadRow{grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:16px;}
  .leadChord{font-size:14pt;}
  .leadLyric{font-size:12pt;}
}

/* v23: print/close buttons visibility on recording page */
#recordPagePrint,
#recordPageClose{
  border:0!important;
  color:#fff!important;
  font-weight:1000!important;
  opacity:1!important;
  text-shadow:none!important;
  box-shadow:0 8px 22px rgba(0,0,0,.18)!important;
}
#recordPagePrint{background:linear-gradient(135deg,#42d9ff,#815cff)!important;}
#recordPageClose{background:linear-gradient(135deg,#ff4f76,#ffaf55)!important;}
#recordPagePrint:disabled,
#recordPageClose:disabled{opacity:1!important;filter:none!important;}


/* v25: 曲名＋設定を1段にまとめて、全体を3段→2段へ */
.metaSettings{
  display:grid;
  grid-template-columns:230px 1fr;
  grid-template-areas:
    "meta settingsTitle"
    "meta settings";
  column-gap:10px;
  align-items:center;
}
.metaTop{grid-area:meta;display:grid;grid-template-columns:1fr 86px;gap:7px;min-width:0;}
.metaTop>div{background:rgba(0,0,0,.22);border-radius:10px;padding:7px 8px;min-width:0;}
.metaTop span{display:block;font-size:10px;color:var(--muted);}
.metaTop strong{display:block;margin-top:2px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.metaCurrentBox strong{font-size:18px!important;color:var(--ok);text-shadow:0 0 14px rgba(101,255,155,.55);}
.metaSettings .settingsTitle{grid-area:settingsTitle;margin:0 0 3px;color:#ffd0d8;}
.metaSettings .inlinePadSettings{grid-area:settings;}

@media(min-width:721px){
  .metaSettings .inlinePadSettings{
    grid-template-columns:1.35fr .62fr .62fr .58fr .78fr .9fr .58fr .85fr .72fr auto;
  }
  .metaSettings .inlinePadSettings #applySettings{min-width:78px;}
}

@media(max-width:720px){
  .metaSettings{display:block;padding:5px 6px!important;overflow:visible!important;}
  .metaTop{display:grid;grid-template-columns:1fr 64px;gap:4px;margin-bottom:4px;}
  .metaTop>div{padding:4px 5px;border-radius:8px;}
  .metaTop span{font-size:8px;}
  .metaTop strong{font-size:12px!important;line-height:1.15;}
  .metaCurrentBox strong{font-size:14px!important;}
  .metaSettings .settingsTitle{font-size:8px;margin:0 0 2px;}
  .metaSettings .inlinePadSettings{overflow-x:auto;-webkit-overflow-scrolling:touch;display:flex!important;flex-wrap:nowrap;gap:3px;min-width:max-content;}
  .metaSettings .inlinePadSettings label{width:45px;flex:0 0 45px;font-size:7px;}
  .metaSettings .inlinePadSettings label:first-child{width:102px;flex-basis:102px;}
  .metaSettings .inlinePadSettings label:nth-child(6){width:64px;flex-basis:64px;}
  .metaSettings .inlinePadSettings label:nth-child(8){width:58px;flex-basis:58px;}
  .metaSettings .inlinePadSettings input,.metaSettings .inlinePadSettings select{height:22px;font-size:9px;padding:1px 2px;border-radius:6px;}
  .metaSettings .inlinePadSettings button{height:22px;font-size:8px;padding:1px 3px;border-radius:6px;}
  .codeStatus{margin-top:5px;}
}

@media(max-width:380px){
  .metaTop{grid-template-columns:1fr 58px;}
  .metaSettings .inlinePadSettings label{width:41px;flex-basis:41px;}
  .metaSettings .inlinePadSettings label:first-child{width:94px;flex-basis:94px;}
  .metaSettings .inlinePadSettings label:nth-child(6){width:58px;flex-basis:58px;}
}

/* v26: smartphone settings no-overflow layout */
@media(max-width:720px){
  html,body{max-width:100%;overflow-x:hidden;}
  .metaSettings{display:block!important;padding:6px!important;overflow:hidden!important;}
  .metaSettings .inlinePadSettings{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:4px!important;
    min-width:0!important;
    width:100%!important;
    overflow:visible!important;
  }
  .metaSettings .inlinePadSettings label,
  .metaSettings .inlinePadSettings label:first-child,
  .metaSettings .inlinePadSettings label:nth-child(6),
  .metaSettings .inlinePadSettings label:nth-child(8){
    width:auto!important;
    flex:auto!important;
    flex-basis:auto!important;
    min-width:0!important;
    font-size:7px!important;
    gap:1px!important;
  }
  .metaSettings .inlinePadSettings label:first-child{grid-column:span 2;}
  .metaSettings .inlinePadSettings label:nth-child(6){grid-column:span 2;}
  .metaSettings .inlinePadSettings label:nth-child(8){grid-column:span 2;}
  .metaSettings .inlinePadSettings input,
  .metaSettings .inlinePadSettings select{
    width:100%!important;
    min-width:0!important;
    height:24px!important;
    font-size:9px!important;
    padding:1px 2px!important;
    border-radius:6px!important;
  }
  .metaSettings .inlinePadSettings #applySettings{
    grid-column:span 2;
    height:24px!important;
    font-size:9px!important;
    padding:1px 2px!important;
    border-radius:7px!important;
  }
  .metaSettings .inlinePadSettings #add4Bars{display:none!important;}
  .topbar,.panel,.grid,.chordPad{max-width:100%;box-sizing:border-box;}
}
@media(max-width:430px){
  .metaSettings .inlinePadSettings{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:3px!important;
  }
  .metaSettings .settingsTitle{font-size:8px!important;}
  .metaSettings .inlinePadSettings label{font-size:6.5px!important;}
  .metaSettings .inlinePadSettings input,
  .metaSettings .inlinePadSettings select,
  .metaSettings .inlinePadSettings #applySettings{height:23px!important;font-size:8.5px!important;}
}

/* v28 UtaCode analysis UI */
.utaAnalysisMeta{margin:8px 0 10px;padding:8px 10px;border-radius:10px;background:rgba(80,220,255,.12);color:#bff3ff;font-weight:700;font-size:13px;border:1px solid rgba(120,220,255,.22)}
.utaAnalysisMeta.warn{background:rgba(255,170,70,.14);color:#ffd9a0;border-color:rgba(255,170,70,.3)}
.scoreBadge{display:inline-flex;align-items:center;justify-content:center;margin-left:6px;padding:2px 7px;border-radius:999px;background:linear-gradient(135deg,#5ff,#a6f);color:#06101c;font-size:12px;font-weight:900;vertical-align:middle}
.utaProgCard small{display:inline-block;margin-left:6px;color:#a9b8d8;font-size:11px}

/* v31: current chord/lyric highlight */
.bar.active .chordInput,
.bar.active .lyricLine,
.playingText{
  color:#07101e!important;
  background:linear-gradient(135deg,#fff36d,#7cffc3)!important;
  border-color:rgba(255,255,255,.9)!important;
  box-shadow:0 0 0 2px rgba(255,243,109,.18),0 0 22px rgba(124,255,195,.35)!important;
  font-weight:1000!important;
}
.bar.active .lyricLine.empty{color:rgba(7,16,30,.55)!important;}
.leadCell.active{
  background:#fff7b7!important;
  border-color:#ffbd2e!important;
  box-shadow:0 0 0 2px rgba(255,189,46,.2),0 8px 22px rgba(255,189,46,.2)!important;
}
.leadCell.active .leadChord,
.leadCell.active .leadLyric{
  color:#06101d!important;
  font-weight:1000!important;
}
.leadCell.active .leadChord{background:#ffdf4d!important;border-radius:8px;padding:2px 6px;display:inline-block;}
@media(max-width:720px){
  .bar.active .chordInput{font-size:14px!important;}
  .bar.active .lyricLine{font-size:10px!important;}
}

/* v35: smartphone song-list reliability UI */
.songTools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;color:#b8c8ff;font-weight:900;font-size:12px}
.songTools button{box-shadow:none}
@media(max-width:720px){
  .songsCard{max-height:86vh!important;display:flex;flex-direction:column;}
  .songsList{max-height:58vh!important;overflow:auto!important;-webkit-overflow-scrolling:touch;min-height:90px;}
  .emptySong{font-size:13px;line-height:1.55;color:#eaf1ff!important;background:rgba(255,255,255,.06)}
  .songItem strong{font-size:14px}.songItem span{font-size:10px}
}

/* v38 ひらめきボイスメモ */
.ideaBtn{background:linear-gradient(135deg,#ffe66b,#ff7a59);color:#170b00;font-weight:900}
.ideaCard{width:min(760px,96vw);max-height:88vh;overflow:auto}
.ideaCard .modalHead strong{font-size:24px;line-height:1.1}
.ideaGuide{background:rgba(255,255,255,.92);color:#10172a;border-radius:16px;padding:12px;margin-bottom:14px;display:grid;gap:10px}
.ideaRecordBig{border:0;border-radius:16px;padding:18px;font-size:21px;font-weight:1000;background:linear-gradient(135deg,#ff315e,#ffd35c);color:#16030b;box-shadow:0 12px 30px rgba(255,60,100,.28)}
.ideaRecordBig.recording{animation:pulse .55s infinite alternate;background:linear-gradient(135deg,#ff002e,#ffb000)}
.ideaStatus{font-weight:900;color:#22325c}.ideaLabel{display:grid;gap:4px;font-weight:900;color:#334155}.ideaLabel input,.ideaLabel textarea{width:100%;box-sizing:border-box;border:2px solid rgba(15,23,42,.22);border-radius:12px;background:#fff;color:#0f172a;padding:11px 12px;font-weight:900;font-size:16px}.ideaLabel textarea{min-height:70px;resize:vertical;font-weight:700}.ideaActions{display:grid;grid-template-columns:1.2fr 1fr .8fr .9fr;gap:8px}.ideaActions button{box-shadow:none}.ideaListTitle{margin:8px 0 8px;color:#fff;font-size:18px}.ideaList{display:grid;gap:8px;max-height:34vh;overflow:auto}.ideaItem{background:rgba(255,255,255,.95);color:#0f172a;border-radius:14px;padding:10px;border:1px solid rgba(0,0,0,.08);display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start}.ideaItem strong{font-size:17px;display:block}.ideaItem small{display:block;color:#64748b;margin-top:2px}.ideaItem p{grid-column:1/-1;margin:0;color:#334155;white-space:pre-wrap}.ideaItem audio{grid-column:1/-1;width:100%;height:34px}.ideaItem .ideaItemBtns{display:flex;gap:6px;flex-wrap:wrap}.ideaItem .ideaItemBtns button{padding:8px 10px;box-shadow:none;border-radius:10px}.ideaDelete{background:linear-gradient(135deg,#ff4d6d,#ff9e4d)!important;color:#fff!important}
@media(max-width:640px){.ideaCard{width:calc(100vw - 16px);margin:0 8px 8px}.ideaActions{grid-template-columns:1fr 1fr}.ideaCard .modalHead strong{font-size:21px}.ideaRecordBig{font-size:20px;padding:17px}.ideaItem{grid-template-columns:1fr}.topActions{gap:5px}.topActions button{padding:9px 9px;font-size:13px}}


/* v40: リハ＆Rec / コード試聴ページ */
.topActions{gap:8px;}
#settingsOpen{display:none!important;}
.recordPageBottom{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.recordPageBottom button{min-width:170px;}
#recordBtn{font-weight:900;}
.trialPage .trialPageInner{max-width:760px;}
.trialBox{background:rgba(255,255,255,.92);border-radius:22px;padding:18px;box-shadow:0 20px 45px rgba(0,0,0,.12);}
.trialPreviewLabel{font-size:14px;color:#334;opacity:.8;font-weight:800;margin-bottom:5px;}
.trialChordPreview{font-size:46px;font-weight:1000;text-align:center;letter-spacing:.03em;color:#111b35;background:#f5f7ff;border:1px solid #d8def2;border-radius:18px;padding:14px;margin-bottom:16px;}
.trialActions{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin-top:14px;}
.trialHint{font-weight:800;color:#334;margin:14px 4px 0;font-size:14px;}
#trialRootRow,#trialQualityRow{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:12px;}
#trialRootRow .padKey,#trialQualityRow .padKey{min-height:46px;font-size:18px;font-weight:900;}
#trialRootRow .padKey.active,#trialQualityRow .padKey.active{background:linear-gradient(135deg,#5ee7ff,#a66bff);color:#06142b;box-shadow:0 0 0 2px rgba(255,255,255,.55) inset;}
@media(max-width:640px){
  .topActions{grid-template-columns:repeat(2,minmax(0,1fr));}
  .recordPageBottom{display:grid;grid-template-columns:1fr 1fr;}
  .recordPageBottom button{min-width:0;width:100%;}
  .recordPageBottom span{grid-column:1/-1;}
  #trialRootRow,#trialQualityRow{grid-template-columns:repeat(4,1fr);}
  .trialActions{grid-template-columns:1fr;}
  .trialChordPreview{font-size:38px;}
}



/* v41 リハ＆Rec カラオケ風ハイライト */
.recordNowPanel{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:12px;
  align-items:stretch;
  margin:12px 0 16px;
  padding:12px;
  border:1px solid rgba(255,80,100,.22);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,247,247,.9));
  box-shadow:0 12px 32px rgba(255,80,100,.10);
}
.recordNowPanel .nowBox{
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
}
.recordNowPanel .nowBox span{
  display:block;
  color:#777;
  font-size:12px;
  font-weight:900;
  margin-bottom:4px;
}
.recordNowPanel .nowBox strong{
  display:block;
  font-size:24px;
  line-height:1.1;
  color:#e93045;
  font-weight:1000;
}
.recordNowPanel .nowBox em{
  display:block;
  margin-top:4px;
  font-style:normal;
  color:#e93045;
  font-weight:900;
  line-height:1.35;
}
.recordNowPanel .nowBox.next strong,
.recordNowPanel .nowBox.next em{
  color:#39445c;
}
.recordNowPanel .nowPos{
  min-width:110px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  padding:10px 12px;
  font-weight:1000;
  color:#fff;
  background:linear-gradient(135deg,#ff355d,#ff9b45);
  box-shadow:0 10px 24px rgba(255,70,90,.2);
}
.leadCell.leadActive{
  background:linear-gradient(135deg,rgba(255,53,93,.12),rgba(255,155,69,.12));
  border-radius:10px;
  box-shadow:0 0 0 2px rgba(255,53,93,.18),0 8px 22px rgba(255,70,90,.16);
}
.leadCell.leadActive .leadChord,
.leadCell.leadActive .leadLyric{
  color:#e93045 !important;
  font-weight:1000;
  text-shadow:0 0 14px rgba(255,80,100,.18);
}
@media(max-width:700px){
  .recordNowPanel{
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:8px;
    margin:8px 0 12px;
  }
  .recordNowPanel .nowPos{
    grid-column:1/3;
    min-width:0;
    padding:8px;
    font-size:14px;
  }
  .recordNowPanel .nowBox{
    padding:8px;
  }
  .recordNowPanel .nowBox strong{
    font-size:20px;
  }
}

/* v42: リハ＆Rec表示整理 / 自動スクロール / 作詞作曲 */
.recordNowPanel{display:none!important;}
.recordCredit{font-size:15px;color:#333;margin-top:6px;font-weight:700;letter-spacing:.02em;}
.leadCell{scroll-margin-top:110px;}
.bar{scroll-margin-top:118px;}
@media(max-width:700px){
  .leadCell{scroll-margin-top:76px;}
  .bar{scroll-margin-top:72px;}
  .metaSettings .inlinePadSettings{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .metaSettings .inlinePadSettings label{width:auto!important;flex-basis:auto!important;}
  .metaSettings .inlinePadSettings label:first-child{grid-column:span 3;}
}

/* v43: クレジット位置 / PC設定レイアウト / スクロール調整 */
.recordCreditHeader{
  margin-top:8px;
  font-size:15px;
  line-height:1.45;
  color:#333;
  font-weight:800;
  letter-spacing:.02em;
}
.recordPageHeader > div:first-child{
  min-width:0;
}
.recordPageHeader #recordSongTitle{
  display:block;
}
/* v42でコード譜上に出していたクレジットは使わない */
.leadSheet > .recordCredit{display:none!important;}

@media(min-width:721px){
  .metaSettings{
    padding:10px 12px;
  }
  .metaSettings .metaTop{
    grid-template-columns:1.25fr 150px;
    gap:10px;
    margin-bottom:8px;
  }
  .metaSettings .inlinePadSettings{
    display:grid!important;
    grid-template-columns:2.1fr 1.25fr 1.25fr .75fr .75fr .75fr .9fr 1.15fr .8fr 1.15fr .85fr;
    gap:7px;
    align-items:end;
    min-width:0!important;
    overflow:visible!important;
  }
  .metaSettings .inlinePadSettings label{
    min-width:0!important;
    width:auto!important;
    flex:initial!important;
    font-size:10px;
    color:#aeb8de;
  }
  .metaSettings .inlinePadSettings input,
  .metaSettings .inlinePadSettings select{
    width:100%;
    min-width:0;
    height:30px;
    font-size:13px;
    padding:4px 6px;
  }
  .metaSettings .inlinePadSettings #songTitle,
  .metaSettings .inlinePadSettings #lyricist,
  .metaSettings .inlinePadSettings #composer{
    font-weight:900;
  }
  .metaSettings .settingsTitle{
    margin-bottom:5px;
  }
}


/* v44 compact settings: 曲名/現在コード/採用コードを表示から外し、設定と＋4小節を統合 */
.hiddenRuntimeFields{display:none!important;}
.settingsOnly.metaSettings{display:block!important;padding:12px 14px!important;}
.settingsOnly .settingsTitle,.settingsOnly .metaTop{display:none!important;}
.settingsOnly .inlinePadSettings{
  display:grid!important;
  grid-template-columns: minmax(220px,2.2fr) minmax(110px,1fr) minmax(110px,1fr) minmax(82px,.65fr) minmax(88px,.7fr) minmax(86px,.68fr) minmax(100px,.82fr) minmax(118px,1.05fr) minmax(88px,.72fr) minmax(122px,1.1fr);
  grid-template-rows:auto auto;
  gap:7px!important;
  align-items:end;
}
.settingsOnly .inlinePadSettings label{font-size:10px!important;line-height:1.1;min-width:0;color:var(--muted);}
.settingsOnly .inlinePadSettings input,.settingsOnly .inlinePadSettings select{height:34px!important;font-size:14px!important;padding:5px 8px!important;border-radius:9px!important;}
.settingsOnly .inlinePadSettings label:nth-child(1){grid-column:1 / span 3;}
.settingsOnly .inlinePadSettings label:nth-child(2){grid-column:4 / span 2;}
.settingsOnly .inlinePadSettings label:nth-child(3){grid-column:6 / span 2;}
.settingsOnly .inlinePadSettings label:nth-child(4){grid-column:1;grid-row:2;}
.settingsOnly .inlinePadSettings label:nth-child(5){grid-column:2;grid-row:2;}
.settingsOnly .inlinePadSettings label:nth-child(6){grid-column:3;grid-row:2;}
.settingsOnly .inlinePadSettings label:nth-child(7){grid-column:4;grid-row:2;}
.settingsOnly .inlinePadSettings label:nth-child(8){grid-column:5;grid-row:2;}
.settingsOnly .inlinePadSettings label:nth-child(9){grid-column:6;grid-row:2;}
.settingsOnly .inlinePadSettings label:nth-child(10){grid-column:7 / span 2;grid-row:2;}
.settingsOnly .inlinePadSettings label:nth-child(11){grid-column:9;grid-row:2;}
.settingsOnly .inlinePadSettings #add4Bars{
  grid-column:10;
  grid-row:1 / span 2;
  height:100%!important;
  min-height:76px!important;
  border:0!important;
  border-radius:16px!important;
  font-size:22px!important;
  font-weight:1000!important;
  color:#07111e!important;
  background:linear-gradient(135deg,#53f1ff,#b25cff)!important;
  box-shadow:0 12px 28px rgba(89,226,255,.28)!important;
}
.codeStatus{display:none!important;}

@media(max-width:720px){
  .settingsOnly.metaSettings{padding:6px!important;overflow:hidden!important;}
  .settingsOnly .inlinePadSettings{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:auto!important;
    gap:4px!important;
    min-width:0!important;
  }
  .settingsOnly .inlinePadSettings label,
  .settingsOnly .inlinePadSettings label:first-child,
  .settingsOnly .inlinePadSettings label:nth-child(2),
  .settingsOnly .inlinePadSettings label:nth-child(3),
  .settingsOnly .inlinePadSettings label:nth-child(4),
  .settingsOnly .inlinePadSettings label:nth-child(5),
  .settingsOnly .inlinePadSettings label:nth-child(6),
  .settingsOnly .inlinePadSettings label:nth-child(7),
  .settingsOnly .inlinePadSettings label:nth-child(8),
  .settingsOnly .inlinePadSettings label:nth-child(9),
  .settingsOnly .inlinePadSettings label:nth-child(10),
  .settingsOnly .inlinePadSettings label:nth-child(11){
    grid-column:auto!important;grid-row:auto!important;width:auto!important;flex:auto!important;font-size:7.5px!important;min-width:0!important;
  }
  .settingsOnly .inlinePadSettings label:first-child{grid-column:span 2!important;}
  .settingsOnly .inlinePadSettings label:nth-child(8){grid-column:span 2!important;}
  .settingsOnly .inlinePadSettings label:nth-child(10){grid-column:span 2!important;}
  .settingsOnly .inlinePadSettings input,.settingsOnly .inlinePadSettings select{height:24px!important;font-size:10px!important;padding:2px 4px!important;border-radius:7px!important;}
  .settingsOnly .inlinePadSettings #add4Bars{
    grid-column:span 2!important;grid-row:auto!important;min-height:52px!important;height:52px!important;font-size:18px!important;border-radius:12px!important;
  }
}
@media(max-width:430px){
  .settingsOnly .inlinePadSettings{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:3px!important;}
  .settingsOnly .inlinePadSettings label:first-child{grid-column:span 2!important;}
  .settingsOnly .inlinePadSettings label:nth-child(8),.settingsOnly .inlinePadSettings label:nth-child(10){grid-column:span 2!important;}
  .settingsOnly .inlinePadSettings #add4Bars{grid-column:span 1!important;font-size:15px!important;min-height:49px!important;height:49px!important;}
}

/* v45: PC settings layout polish - two even rows + visible big +4 button */
@media(min-width:721px){
  #inlineSettings.settingsOnly{padding:12px 14px!important;}
  #inlineSettings.settingsOnly .inlinePadSettings{
    display:grid!important;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap:8px!important;
    align-items:stretch!important;
    width:100%!important;
  }
  #inlineSettings.settingsOnly .inlinePadSettings label{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    width:auto!important;
    min-width:0!important;
    font-size:10px!important;
    line-height:1.1!important;
    color:var(--muted)!important;
  }
  #inlineSettings.settingsOnly .inlinePadSettings input,
  #inlineSettings.settingsOnly .inlinePadSettings select{
    height:36px!important;
    font-size:14px!important;
    padding:6px 9px!important;
    border-radius:10px!important;
    width:100%!important;
    min-width:0!important;
  }
  #inlineSettings.settingsOnly .inlinePadSettings label:nth-child(1){grid-column:1 / span 5!important;grid-row:1!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:nth-child(2){grid-column:6 / span 2!important;grid-row:1!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:nth-child(3){grid-column:8 / span 3!important;grid-row:1!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:nth-child(4){grid-column:1 / span 2!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:nth-child(5){grid-column:3 / span 1!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:nth-child(6){grid-column:4 / span 1!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:nth-child(7){grid-column:5 / span 1!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:nth-child(8){grid-column:6 / span 1!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:nth-child(9){grid-column:7 / span 1!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:nth-child(10){grid-column:8 / span 2!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:nth-child(11){grid-column:10 / span 1!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings #add4Bars{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    grid-column:11 / span 2!important;
    grid-row:1 / span 2!important;
    height:100%!important;
    min-height:80px!important;
    padding:0 12px!important;
    border:0!important;
    border-radius:18px!important;
    font-size:24px!important;
    line-height:1.1!important;
    font-weight:1000!important;
    color:#07111e!important;
    background:linear-gradient(135deg,#58f7ff,#b65cff)!important;
    box-shadow:0 12px 30px rgba(88,240,255,.28)!important;
    white-space:nowrap!important;
  }
}


/* =========================================================
   v46: top buttons and mobile +4 layout fix
   ========================================================= */
#utaCodeOpen,
#saveBtn{display:none!important;}
.topActions{grid-template-columns:auto auto!important;}
.topActions #songsOpen{order:1!important;}
.topActions #ideaOpen{order:2!important;}

/* スマホで消えていた＋4小節を強制表示 */
#inlineSettings.settingsOnly .inlinePadSettings #add4Bars{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
@media(max-width:720px){
  .topActions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:5px!important;min-width:170px!important;}
  .topActions button{height:34px!important;font-size:12px!important;padding:6px 8px!important;}
  #inlineSettings.settingsOnly .inlinePadSettings{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  #inlineSettings.settingsOnly .inlinePadSettings #add4Bars{
    grid-column:span 2!important;
    grid-row:auto!important;
    min-height:50px!important;
    height:50px!important;
    font-size:17px!important;
    border-radius:12px!important;
    background:linear-gradient(135deg,#58f7ff,#b65cff)!important;
    color:#06101f!important;
    font-weight:1000!important;
  }
}
@media(max-width:430px){
  .topActions{min-width:150px!important;}
  .topActions button{height:31px!important;font-size:11px!important;}
  #inlineSettings.settingsOnly .inlinePadSettings{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  #inlineSettings.settingsOnly .inlinePadSettings #add4Bars{
    grid-column:span 3!important;
    height:46px!important;
    min-height:46px!important;
    font-size:16px!important;
  }
}


/* v47: 設定枠の軽い区別化 / コード試聴の視認性改善 / 印刷不要ラベル非表示 */

/* 設定枠：内容はそのまま、枠だけ少し明るく光らせる */
#inlineSettings.inlineSettings,
.panel.inlineSettings,
.inlineSettings.metaSettings,
.settingsOnly{
  background:linear-gradient(180deg,#28385f 0%,#202d4f 100%)!important;
  border:1px solid rgba(120,180,255,.32)!important;
  box-shadow:
    0 0 0 1px rgba(88,240,255,.06) inset,
    0 0 22px rgba(88,160,255,.12),
    0 14px 36px rgba(0,0,0,.25)!important;
}

/* 設定枠の中の入力欄は少しだけ締めて見やすく */
#inlineSettings input,
#inlineSettings select{
  background:#050914!important;
  border-color:rgba(180,210,255,.20)!important;
}

/* コード試聴ページ：白背景でも選択肢が読みやすいように */
.trialPage .recordPageInner{
  color:#0b1328;
}
.trialPage .recordPageHeader strong{
  color:#07142c;
}
.trialPage .recordPageHeader span{
  color:#33415c;
}
.trialPage .trialBox{
  background:linear-gradient(180deg,#ffffff 0%,#f7f9ff 100%)!important;
  border:1px solid rgba(60,80,130,.12)!important;
}
.trialPage .modalLabel,
.trialPreviewLabel,
.trialHint{
  color:#1d2a44!important;
  opacity:1!important;
}

/* 未選択ボタンが白飛びしないようにする */
#trialRootRow .padKey,
#trialQualityRow .padKey{
  background:#eef3ff!important;
  color:#15203a!important;
  border:1px solid #cfd8ee!important;
  box-shadow:0 6px 14px rgba(25,40,80,.08)!important;
  opacity:1!important;
  text-shadow:none!important;
}
#trialRootRow .padKey:hover,
#trialQualityRow .padKey:hover{
  background:#e2ecff!important;
}
#trialRootRow .padKey.active,
#trialQualityRow .padKey.active{
  background:linear-gradient(135deg,#58dfff,#9f6cff)!important;
  color:#06142b!important;
  border-color:#8abfff!important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.70) inset,
    0 0 18px rgba(88,160,255,.35)!important;
}

/* 試聴ページの閉じる/手動/クリアも白飛び防止 */
#trialClose,
#trialManual,
#trialClear{
  background:#eef3ff!important;
  color:#16213c!important;
  border:1px solid #cbd5ef!important;
  opacity:1!important;
}
#trialPlay{
  color:#06142b!important;
}

/* 印刷時は「リハーサル / レコーディング」ラベルを非表示 */
@media print{
  .recordPageHeader span{display:none!important;}
}


/* =========================================================
   v48: 1〜4小節を紫系に / スマホ設定欄をさらに圧縮
   ========================================================= */
/* 最初の4小節をロゴに合うワイン紫系へ */
.bar.group0{
  background:linear-gradient(180deg,#2a1538 0%,#1b1228 100%)!important;
  border-color:rgba(190,120,255,.20)!important;
}
.bar.group0.selected{
  box-shadow:
    0 0 0 2px rgba(101,255,155,.12),
    0 0 24px rgba(101,255,155,.18),
    inset 0 0 22px rgba(180,90,255,.08)!important;
}

/* スマホでは設定を4列で詰め、回数/演奏を短く見せる */
@media(max-width:720px){
  #inlineSettings.settingsOnly .inlinePadSettings,
  .metaSettings .inlinePadSettings{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:4px!important;
    width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }
  #inlineSettings.settingsOnly .inlinePadSettings label,
  .metaSettings .inlinePadSettings label{
    grid-column:span 1!important;
    width:auto!important;
    min-width:0!important;
    flex:initial!important;
    flex-basis:auto!important;
    font-size:7px!important;
    gap:1px!important;
  }
  #inlineSettings.settingsOnly .inlinePadSettings label:first-child,
  .metaSettings .inlinePadSettings label:first-child{
    grid-column:span 2!important;
  }
  #inlineSettings.settingsOnly .inlinePadSettings input,
  #inlineSettings.settingsOnly .inlinePadSettings select,
  .metaSettings .inlinePadSettings input,
  .metaSettings .inlinePadSettings select{
    height:24px!important;
    font-size:9px!important;
    padding:1px 2px!important;
    border-radius:6px!important;
  }
  #inlineSettings.settingsOnly .inlinePadSettings #add4Bars,
  .metaSettings .inlinePadSettings #add4Bars{
    display:flex!important;
    grid-column:span 4!important;
    height:44px!important;
    min-height:44px!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:16px!important;
    border-radius:12px!important;
    background:linear-gradient(135deg,#58f7ff,#b65cff)!important;
    color:#06101f!important;
    font-weight:1000!important;
  }
}
@media(max-width:430px){
  #inlineSettings.settingsOnly .inlinePadSettings,
  .metaSettings .inlinePadSettings{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:3px!important;
  }
  #inlineSettings.settingsOnly .inlinePadSettings label,
  .metaSettings .inlinePadSettings label{
    font-size:6.5px!important;
  }
  #inlineSettings.settingsOnly .inlinePadSettings input,
  #inlineSettings.settingsOnly .inlinePadSettings select,
  .metaSettings .inlinePadSettings input,
  .metaSettings .inlinePadSettings select{
    height:23px!important;
    font-size:8.5px!important;
  }
  #inlineSettings.settingsOnly .inlinePadSettings #add4Bars,
  .metaSettings .inlinePadSettings #add4Bars{
    grid-column:span 4!important;
    height:42px!important;
    min-height:42px!important;
    font-size:15px!important;
  }
}

/* v55 instrument tone selector */
#instrumentTone{min-width:110px;}
@media(max-width:700px){#instrumentTone{min-width:0;}}

/* v68: PC設定欄 2段整理 / BPM縮小 / 音色復活前提 */
@media (min-width:721px){
  #inlineSettings.settingsOnly .inlinePadSettings{
    grid-template-columns: .62fr .72fr .74fr .74fr .74fr .82fr 1.08fr 1.08fr .72fr .72fr 1.7fr 1.7fr!important;
    grid-template-rows:auto auto!important;
    gap:7px 8px!important;
    align-items:end!important;
  }
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#songTitle){grid-column:1 / span 5!important;grid-row:1!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#lyricist){grid-column:6 / span 2!important;grid-row:1!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#composer){grid-column:8 / span 3!important;grid-row:1!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#bpm){grid-column:1!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#barCount){grid-column:2!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#beatsPerBar){grid-column:3!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#barsPerChord){grid-column:4!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#strumsPerBar){grid-column:5!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#capo){grid-column:6!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#playStyle){grid-column:7 / span 2!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#instrumentTone){grid-column:9!important;grid-row:2!important;display:flex!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#masterVolume){grid-column:10!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings #add4Bars{grid-column:11 / span 2!important;grid-row:1 / span 2!important;min-height:96px!important;height:100%!important;align-self:stretch!important;}
  #inlineSettings.settingsOnly .inlinePadSettings input,
  #inlineSettings.settingsOnly .inlinePadSettings select{min-width:0!important;width:100%!important;}
}


/* v69: 設定欄整理（弾く回数 / 音色→演奏→音量 / 同幅） */
@media (min-width:721px){
  #inlineSettings.settingsOnly .inlinePadSettings{
    grid-template-columns:.48fr .62fr .62fr .72fr .72fr .74fr .9fr .9fr .9fr 1.35fr 1.35fr 1.35fr!important;
    grid-template-rows:auto auto!important;
    gap:7px 8px!important;
    align-items:end!important;
  }
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#songTitle){grid-column:1 / span 5!important;grid-row:1!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#lyricist){grid-column:6 / span 2!important;grid-row:1!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#composer){grid-column:8 / span 2!important;grid-row:1!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#bpm){grid-column:1!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#barCount){grid-column:2!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#beatsPerBar){grid-column:3!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#barsPerChord){grid-column:4!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#strumsPerBar){grid-column:5!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#capo){grid-column:6!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#instrumentTone){grid-column:7!important;grid-row:2!important;display:flex!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#playStyle){grid-column:8!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#masterVolume){grid-column:9!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings #add4Bars{grid-column:10 / span 3!important;grid-row:1 / span 2!important;min-height:96px!important;height:100%!important;align-self:stretch!important;}
  #inlineSettings.settingsOnly .inlinePadSettings input,
  #inlineSettings.settingsOnly .inlinePadSettings select{min-width:0!important;width:100%!important;}
}

/* v70: PC設定欄の全体バランス再調整（BPMを潰さず、＋4小節を控えめに） */
@media (min-width:721px){
  #inlineSettings.settingsOnly .inlinePadSettings{
    grid-template-columns:.85fr .85fr .82fr .92fr .92fr .95fr 1.05fr 1.05fr 1.05fr 1.05fr .85fr .85fr!important;
    grid-template-rows:auto auto!important;
    gap:7px 8px!important;
    align-items:end!important;
  }

  /* 1段目 */
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#songTitle){grid-column:1 / span 5!important;grid-row:1!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#lyricist){grid-column:6 / span 2!important;grid-row:1!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#composer){grid-column:8 / span 3!important;grid-row:1!important;}

  /* 2段目：BPMを潰さない */
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#bpm){grid-column:1!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#barCount){grid-column:2!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#beatsPerBar){grid-column:3!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#barsPerChord){grid-column:4!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#strumsPerBar){grid-column:5!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#capo){grid-column:6!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#instrumentTone){grid-column:7!important;grid-row:2!important;display:flex!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#playStyle){grid-column:8 / span 2!important;grid-row:2!important;}
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#masterVolume){grid-column:10!important;grid-row:2!important;}

  /* ＋4小節は右側2列だけに縮小 */
  #inlineSettings.settingsOnly .inlinePadSettings #add4Bars{
    grid-column:11 / span 2!important;
    grid-row:1 / span 2!important;
    min-height:86px!important;
    height:100%!important;
    align-self:stretch!important;
    font-size:26px!important;
    padding:8px 10px!important;
  }

  #inlineSettings.settingsOnly .inlinePadSettings label{min-width:0!important;}
  #inlineSettings.settingsOnly .inlinePadSettings input,
  #inlineSettings.settingsOnly .inlinePadSettings select{
    min-width:0!important;
    width:100%!important;
    font-size:14px!important;
    padding-left:7px!important;
    padding-right:7px!important;
  }
}


/* v71: 作詞・作曲の幅を完全に揃える（PCのみ） */
@media (min-width:721px){
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#songTitle){
    grid-column:1 / span 6!important;
    grid-row:1!important;
  }
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#lyricist){
    grid-column:7 / span 2!important;
    grid-row:1!important;
  }
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#composer){
    grid-column:9 / span 2!important;
    grid-row:1!important;
  }
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#lyricist) input,
  #inlineSettings.settingsOnly .inlinePadSettings label:has(#composer) input{
    width:100%!important;
    min-width:0!important;
    height:38px!important;
    box-sizing:border-box!important;
  }
}

/* =========================================================
   v85: コードパッド左右レイアウト安定版
   - PC/スマホともにスクロールなし
   - 左：ルート / 右：種類
   - 種類を押しながらルート、またはPC向けに種類クリック後ルート
   ========================================================= */
body.modalOpen{overflow:hidden!important;}
.trialPage{padding:8px!important;overflow:hidden!important;background:#f5f5f5!important;color:#0f172a!important;}
.trialPageInner{width:min(1040px,calc(100vw - 16px))!important;height:calc(100dvh - 16px)!important;min-height:0!important;margin:0 auto!important;padding:14px 18px!important;border-radius:20px!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;}
.trialPage .recordPageHeader{flex:0 0 auto!important;margin:0 0 8px!important;padding-bottom:8px!important;align-items:center!important;}
.trialPage .recordPageHeader span{font-size:13px!important;font-weight:800!important;color:#536179!important;}
.trialPage .recordPageHeader strong{font-size:25px!important;line-height:1.1!important;color:#10203d!important;}
.trialPage .recordPageActions{display:flex!important;gap:8px!important;align-items:center!important;}
.trialPage .recordPageActions button{height:48px!important;min-width:100px!important;padding:8px 14px!important;border-radius:14px!important;font-size:16px!important;box-shadow:0 8px 22px rgba(15,23,42,.10)!important;}
.trialBox{flex:1 1 auto!important;min-height:0!important;padding:14px!important;border-radius:20px!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;background:linear-gradient(180deg,#ffffff,#f7fbff)!important;border:1px solid #d8e2f5!important;}
.trialPreviewLabel{flex:0 0 auto!important;text-align:center!important;margin:0 0 4px!important;color:#0f172a!important;font-weight:900!important;}
.trialChordPreview{flex:0 0 auto!important;height:70px!important;margin:0 0 10px!important;padding:0 12px!important;border-radius:18px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:linear-gradient(180deg,#07152e,#0c1d3b)!important;color:#fff!important;font-size:42px!important;box-shadow:0 10px 22px rgba(5,16,40,.18)!important;}
.codepadStage{flex:1 1 auto!important;min-height:0!important;display:grid!important;grid-template-columns:1.05fr .95fr!important;gap:12px!important;overflow:hidden!important;}
.codepadPane{min-height:0!important;border:1px solid #d9e4f6!important;border-radius:18px!important;background:rgba(239,246,255,.75)!important;padding:10px!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;}
.codepadPaneTitle{font-size:14px!important;font-weight:1000!important;color:#12213c!important;margin:0 0 7px!important;}
#trialRootRow,#trialQualityRow{margin:0!important;display:grid!important;gap:8px!important;min-height:0!important;overflow:hidden!important;}
#trialRootRow{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(6,minmax(0,1fr))!important;flex:1 1 auto!important;}
#trialQualityRow{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(5,minmax(0,1fr))!important;flex:1 1 auto!important;}
#trialRootRow .padKey,#trialQualityRow .padKey{min-height:0!important;height:100%!important;border-radius:13px!important;font-size:clamp(18px,3.2vh,34px)!important;font-weight:1000!important;box-shadow:0 8px 18px rgba(20,35,70,.08)!important;border:1px solid #c9d8f0!important;touch-action:none!important;user-select:none!important;-webkit-user-select:none!important;}
#trialRootRow .padKey{background:linear-gradient(180deg,#fff,#edf5ff)!important;color:#0f1b31!important;}
#trialRootRow .padKey.active{background:linear-gradient(135deg,#52e0ff,#a976ff)!important;color:#06101d!important;box-shadow:0 0 0 3px rgba(82,224,255,.25),0 10px 22px rgba(80,130,255,.22)!important;}
#trialQualityRow .padKey{color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.15)!important;}
#trialQualityRow .padKey[data-q="m"]{background:linear-gradient(135deg,#ff5a7f,#9d2858)!important;}
#trialQualityRow .padKey[data-q="7"]{background:linear-gradient(135deg,#ffb02e,#935100)!important;}
#trialQualityRow .padKey[data-q="m7"]{background:linear-gradient(135deg,#f3e85a,#747600)!important;}
#trialQualityRow .padKey[data-q="maj7"]{background:linear-gradient(135deg,#7df05f,#14642e)!important;}
#trialQualityRow .padKey[data-q="sus4"]{background:linear-gradient(135deg,#46e2d6,#0e6370)!important;}
#trialQualityRow .padKey[data-q="add9"]{background:linear-gradient(135deg,#38bdf8,#063b88)!important;}
#trialQualityRow .padKey[data-q="6"]{background:linear-gradient(135deg,#b86cff,#5c2ca8)!important;}
#trialQualityRow .padKey[data-q="dim"]{background:linear-gradient(135deg,#8b7cf6,#343480)!important;}
#trialQualityRow .padKey[data-q="aug"]{background:linear-gradient(135deg,#ff77c8,#8c236b)!important;}
#trialQualityRow .padKey.active{outline:3px solid rgba(255,255,255,.95)!important;box-shadow:0 0 0 5px rgba(90,220,255,.35),0 12px 24px rgba(0,0,0,.18)!important;filter:brightness(1.08)!important;}
.trialActions{flex:0 0 auto!important;margin:10px 0 0!important;display:grid!important;grid-template-columns:1fr 1fr 1fr!important;gap:10px!important;}
.trialActions button{height:48px!important;border-radius:14px!important;font-size:16px!important;}
.trialHint{flex:0 0 auto!important;margin:7px 2px 0!important;font-size:12px!important;line-height:1.25!important;text-align:center!important;color:#56657d!important;}
#trialManual{display:none!important;}
@media(max-width:640px){
  .trialPage{padding:6px!important;}
  .trialPageInner{width:calc(100vw - 12px)!important;height:calc(100dvh - 12px)!important;padding:10px!important;border-radius:16px!important;}
  .trialPage .recordPageHeader{margin-bottom:6px!important;padding-bottom:6px!important;}
  .trialPage .recordPageHeader strong{font-size:21px!important;}
  .trialPage .recordPageHeader span{font-size:12px!important;}
  .trialPage .recordPageActions button{height:42px!important;min-width:76px!important;font-size:14px!important;padding:6px 9px!important;border-radius:12px!important;}
  .trialBox{padding:10px!important;border-radius:16px!important;}
  .trialChordPreview{height:56px!important;font-size:34px!important;margin-bottom:8px!important;border-radius:15px!important;}
  .codepadStage{grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .codepadPane{padding:7px!important;border-radius:14px!important;}
  .codepadPaneTitle{font-size:12px!important;margin-bottom:5px!important;}
  #trialRootRow,#trialQualityRow{gap:6px!important;}
  #trialRootRow .padKey,#trialQualityRow .padKey{border-radius:11px!important;font-size:clamp(16px,3.4vh,25px)!important;padding:2px!important;}
  #trialQualityRow .padKey small{display:none!important;}
  .trialActions{gap:7px!important;margin-top:8px!important;grid-template-columns:1.15fr .85fr!important;}
  .trialActions button{height:42px!important;font-size:13px!important;padding:5px!important;}
  #trialPlay{grid-column:1/2!important;}
  #trialClear{grid-column:2/3!important;}
  .trialHint{font-size:10px!important;margin-top:5px!important;}
}
@media(max-width:380px),(max-height:650px){
  .trialPageInner{padding:7px!important;}
  .trialPage .recordPageHeader strong{font-size:18px!important;}
  .trialChordPreview{height:46px!important;font-size:28px!important;}
  .trialBox{padding:7px!important;}
  #trialRootRow,#trialQualityRow{gap:5px!important;}
  .trialActions button{height:36px!important;font-size:12px!important;}
  .trialHint{display:none!important;}
}

/* =========================================================
   v86: コードパッド左側のみ再配置
   - 右の種類パネルはv85のまま
   - 主要ルートは大きめ、#系は小さめ
   - よく使うキー順: C G D A / E B F
   ========================================================= */
.codepadRoots{gap:6px!important;}
.rootMajorLabel,.rootSharpLabel{font-size:12px!important;font-weight:900!important;color:#546179!important;margin:0!important;line-height:1.1!important;}
.rootSharpLabel{margin-top:5px!important;}
#trialRootMajorRow{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;gap:8px!important;flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;margin:0!important;}
#trialRootSharpRow{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-template-rows:1fr!important;gap:6px!important;flex:0 0 19%!important;min-height:36px!important;overflow:hidden!important;margin:0!important;}
#trialRootMajorRow .padKey,#trialRootSharpRow .padKey{min-height:0!important;height:100%!important;border-radius:13px!important;font-weight:1000!important;box-shadow:0 8px 18px rgba(20,35,70,.08)!important;border:1px solid #c9d8f0!important;touch-action:none!important;user-select:none!important;-webkit-user-select:none!important;background:linear-gradient(180deg,#fff,#edf5ff)!important;color:#0f1b31!important;}
#trialRootMajorRow .padKey{font-size:clamp(22px,3.9vh,40px)!important;}
#trialRootSharpRow .padKey{font-size:clamp(13px,2.2vh,22px)!important;border-radius:11px!important;background:linear-gradient(180deg,#f8fbff,#e9f2ff)!important;color:#15233b!important;}
#trialRootMajorRow .padKey.active,#trialRootSharpRow .padKey.active{background:linear-gradient(135deg,#52e0ff,#a976ff)!important;color:#06101d!important;box-shadow:0 0 0 3px rgba(82,224,255,.25),0 10px 22px rgba(80,130,255,.22)!important;}
@media(max-width:640px){
  .codepadRoots{gap:5px!important;}
  .rootMajorLabel,.rootSharpLabel{font-size:10px!important;}
  #trialRootMajorRow{gap:5px!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  #trialRootSharpRow{gap:4px!important;flex-basis:18%!important;min-height:30px!important;}
  #trialRootMajorRow .padKey{font-size:clamp(16px,3.1vh,26px)!important;border-radius:10px!important;padding:1px!important;}
  #trialRootSharpRow .padKey{font-size:clamp(10px,1.9vh,16px)!important;border-radius:9px!important;padding:0!important;}
}
@media(max-width:380px),(max-height:650px){
  #trialRootMajorRow{gap:4px!important;}
  #trialRootSharpRow{gap:3px!important;min-height:25px!important;}
  .rootMajorLabel,.rootSharpLabel{display:none!important;}
  #trialRootMajorRow .padKey{font-size:clamp(14px,2.8vh,22px)!important;}
  #trialRootSharpRow .padKey{font-size:clamp(9px,1.7vh,13px)!important;}
}


/* v87 root layout fix */
#trialRootMajorRow{
display:grid!important;
grid-template-columns:repeat(2,1fr)!important;
grid-template-rows:repeat(4,1fr)!important;
gap:10px!important;
}
#trialRootMajorRow .padKey{
font-size:clamp(28px,3vw,42px)!important;
min-height:72px!important;
height:auto!important;
}
#trialRootSharpRow{
display:grid!important;
grid-template-columns:repeat(5,1fr)!important;
gap:6px!important;
margin-top:10px!important;
}
#trialRootSharpRow .padKey{
min-height:48px!important;
height:48px!important;
}

/* v88: コードパッド左ルートのF隠れ対策 */
#trialRootMajorRow{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
  flex:1 1 0!important;
  min-height:0!important;
  overflow:hidden!important;
}
#trialRootMajorRow .padKey{
  min-height:0!important;
  height:100%!important;
  font-size:clamp(22px,3vh,38px)!important;
  border-radius:13px!important;
}
#trialRootSharpRow{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:6px!important;
  flex:0 0 44px!important;
  min-height:0!important;
  margin-top:7px!important;
  overflow:hidden!important;
}
#trialRootSharpRow .padKey{
  min-height:0!important;
  height:44px!important;
  font-size:clamp(11px,1.8vh,18px)!important;
  border-radius:10px!important;
}
@media(max-width:640px){
  #trialRootMajorRow{gap:5px!important;}
  #trialRootMajorRow .padKey{font-size:clamp(16px,3vh,25px)!important;border-radius:10px!important;}
  #trialRootSharpRow{gap:4px!important;flex-basis:32px!important;margin-top:5px!important;}
  #trialRootSharpRow .padKey{height:32px!important;font-size:clamp(9px,1.7vh,14px)!important;border-radius:8px!important;}
}
@media(max-width:380px),(max-height:650px){
  #trialRootMajorRow{gap:4px!important;}
  #trialRootMajorRow .padKey{font-size:clamp(14px,2.7vh,22px)!important;}
  #trialRootSharpRow{flex-basis:27px!important;margin-top:4px!important;}
  #trialRootSharpRow .padKey{height:27px!important;font-size:clamp(8px,1.6vh,12px)!important;}
}


/* v89: コードパッドの説明ラベル削除・ボタン文字のみ表示 */
.codepadPaneTitle,
.rootMajorLabel,
.rootSharpLabel{
  display:none!important;
}
.codepadPane{
  padding-top:12px!important;
}
#trialQualityRow .padKey small{
  display:none!important;
}
#trialQualityRow .padKey span{
  display:block!important;
  line-height:1!important;
  font-size:clamp(22px,3.6vh,36px)!important;
  font-weight:1000!important;
}
#trialQualityRow .padKey{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
#trialRootMajorRow .padKey,
#trialRootSharpRow .padKey{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
@media(max-width:640px){
  .codepadPane{padding-top:8px!important;}
  #trialQualityRow .padKey span{font-size:clamp(17px,3.2vh,26px)!important;}
}

/* v93: コードパッド キーチェンジUI */
.trialPreviewGrid{
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 170px!important;
  gap:10px!important;
  align-items:stretch!important;
  margin:0 0 10px!important;
}
.trialPreviewGrid .trialPreviewLabel{margin:0 0 4px!important;}
.trialPreviewGrid .trialChordPreview{margin:0!important;height:64px!important;}
.codepadKeyChangeBox{
  display:grid!important;
  grid-template-rows:auto 1fr!important;
  gap:4px!important;
  font-weight:1000!important;
  color:#0f172a!important;
  margin:0!important;
}
.codepadKeyChangeBox span{
  text-align:center!important;
  font-size:13px!important;
  line-height:1.1!important;
}
.codepadKeyChangeBox select{
  width:100%!important;
  height:64px!important;
  border-radius:16px!important;
  border:1px solid #c9d8f0!important;
  background:linear-gradient(180deg,#fff,#edf5ff)!important;
  color:#07152e!important;
  font-size:20px!important;
  font-weight:1000!important;
  text-align:center!important;
  padding:0 12px!important;
}
@media(max-width:640px){
  .trialPreviewGrid{grid-template-columns:minmax(0,1fr) 112px!important;gap:7px!important;margin-bottom:8px!important;}
  .trialPreviewGrid .trialChordPreview{height:52px!important;font-size:30px!important;}
  .codepadKeyChangeBox span{font-size:10px!important;}
  .codepadKeyChangeBox select{height:52px!important;font-size:14px!important;border-radius:13px!important;padding:0 6px!important;}
}
@media(max-width:380px),(max-height:650px){
  .trialPreviewGrid{grid-template-columns:minmax(0,1fr) 96px!important;gap:6px!important;}
  .trialPreviewGrid .trialChordPreview{height:44px!important;font-size:26px!important;}
  .codepadKeyChangeBox select{height:44px!important;font-size:12px!important;}
}


/* v94: コードパッド キーチェンジ横配置維持＋メジャールート色分け */
#trialPage .trialPreviewGrid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 150px!important;
  gap:10px!important;
  align-items:end!important;
  width:100%!important;
}
#trialPage .trialPreviewMain{min-width:0!important;}
#trialPage .trialPreviewGrid .trialChordPreview{
  width:100%!important;
  height:58px!important;
  padding:6px 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:clamp(34px,4vh,46px)!important;
}
#trialPage .codepadKeyChangeBox{
  min-width:0!important;
  align-self:stretch!important;
  display:grid!important;
  grid-template-rows:auto 58px!important;
}
#trialPage .codepadKeyChangeBox select{
  height:58px!important;
  min-width:0!important;
}

/* C〜Bだけ大きく・色分け。#系は現状維持 */
#trialRootMajorRow .padKey{
  font-size:clamp(30px,4.3vh,50px)!important;
  font-weight:1000!important;
  text-shadow:0 1px 0 rgba(255,255,255,.65)!important;
}
#trialRootMajorRow .padKey[data-root="C"]{color:#0891b2!important;}
#trialRootMajorRow .padKey[data-root="G"]{color:#16a34a!important;}
#trialRootMajorRow .padKey[data-root="D"]{color:#2563eb!important;}
#trialRootMajorRow .padKey[data-root="A"]{color:#9333ea!important;}
#trialRootMajorRow .padKey[data-root="E"]{color:#ea580c!important;}
#trialRootMajorRow .padKey[data-root="B"]{color:#db2777!important;}
#trialRootMajorRow .padKey[data-root="F"]{color:#dc2626!important;}
#trialRootMajorRow .padKey.active{
  color:#06101d!important;
  text-shadow:none!important;
}

@media(max-width:640px){
  #trialPage .trialPreviewGrid{
    grid-template-columns:minmax(0,1fr) 104px!important;
    gap:6px!important;
    align-items:end!important;
    margin-bottom:7px!important;
  }
  #trialPage .trialPreviewGrid .trialChordPreview{
    height:48px!important;
    font-size:clamp(28px,6.2vw,38px)!important;
    border-radius:14px!important;
  }
  #trialPage .codepadKeyChangeBox{
    grid-template-rows:auto 48px!important;
  }
  #trialPage .codepadKeyChangeBox span{
    font-size:10px!important;
    white-space:nowrap!important;
  }
  #trialPage .codepadKeyChangeBox select{
    height:48px!important;
    font-size:13px!important;
    padding:0 4px!important;
    border-radius:13px!important;
  }
  #trialRootMajorRow .padKey{
    font-size:clamp(24px,7.4vw,36px)!important;
  }
}
@media(max-width:380px),(max-height:650px){
  #trialPage .trialPreviewGrid{
    grid-template-columns:minmax(0,1fr) 92px!important;
    gap:5px!important;
  }
  #trialPage .trialPreviewGrid .trialChordPreview{
    height:42px!important;
    font-size:clamp(24px,6vw,32px)!important;
  }
  #trialPage .codepadKeyChangeBox{
    grid-template-rows:auto 42px!important;
  }
  #trialPage .codepadKeyChangeBox select{
    height:42px!important;
    font-size:12px!important;
  }
  #trialRootMajorRow .padKey{
    font-size:clamp(20px,6.7vw,30px)!important;
  }
}

/* v96: codepad hold button restore */
.codepadHoldToggle{background:linear-gradient(135deg,#ffd45c,#ff7d55)!important;color:#06101d!important;font-weight:1000!important;border:1px solid rgba(255,130,70,.55)!important;}
.codepadHoldToggle.active{background:linear-gradient(135deg,#52e0ff,#a976ff)!important;color:#06101d!important;box-shadow:0 0 0 3px rgba(82,224,255,.20),0 10px 22px rgba(80,130,255,.22)!important;}
@media(max-width:640px){.codepadHoldToggle{min-width:90px!important;font-size:13px!important;}}

/* v102 recording controls */
.recordPageBottom.recV102Controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.recordPageBottom.recV102Controls button{ min-width:160px; }
#recordPageSave:disabled{ opacity:.45; filter:grayscale(.35); cursor:not-allowed; }
@media (max-width:700px){
  .recordPageBottom.recV102Controls{ display:grid; grid-template-columns:1fr 1fr; }
  .recordPageBottom.recV102Controls button{ min-width:0; width:100%; }
  .recordPageBottom.recV102Controls #recordPageStatus{ grid-column:1 / -1; }
}


/* v104: リハ＆Rec内録音プレイヤー */
.recordVoicePlayer{
  display:block;
  width:min(560px,100%);
  height:34px;
  margin:10px 0 2px 0;
}
.recordVoicePlayer[hidden]{display:none!important;}

/* v123: コードパッド上部操作を1行化（現在のコード / BPM / 音色 / 演奏 / キーチェンジ） */
#trialPage .codepadOneLineControls{
  display:grid!important;
  grid-template-columns:minmax(110px,1.4fr) 82px 112px 126px 132px!important;
  gap:8px!important;
  align-items:end!important;
  width:100%!important;
  margin:0 0 10px!important;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch!important;
  padding-bottom:2px!important;
}
#trialPage .codepadOneLineControls .trialPreviewMain,
#trialPage .codepadOneLineControls .codepadMiniControl{
  min-width:0!important;
  margin:0!important;
}
#trialPage .codepadMiniControl{
  display:grid!important;
  grid-template-rows:auto 48px!important;
  gap:4px!important;
  color:#0f172a!important;
  font-weight:1000!important;
}
#trialPage .codepadMiniControl span,
#trialPage .codepadOneLineControls .trialPreviewLabel{
  text-align:center!important;
  font-size:12px!important;
  line-height:1.1!important;
  white-space:nowrap!important;
}
#trialPage .codepadOneLineControls .trialChordPreview{
  height:48px!important;
  min-height:48px!important;
  margin:0!important;
  padding:4px 8px!important;
  font-size:clamp(26px,3.5vh,38px)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#trialPage .codepadMiniControl input,
#trialPage .codepadMiniControl select{
  width:100%!important;
  height:48px!important;
  min-height:48px!important;
  border-radius:14px!important;
  border:1px solid #c9d8f0!important;
  background:linear-gradient(180deg,#fff,#edf5ff)!important;
  color:#07152e!important;
  font-size:15px!important;
  font-weight:1000!important;
  text-align:center!important;
  padding:0 6px!important;
}
#trialPage .codepadBpmBox input{font-size:20px!important;}
@media(max-width:640px){
  #trialPage .codepadOneLineControls{
    grid-template-columns:92px 66px 88px 104px 104px!important;
    gap:5px!important;
    margin-bottom:7px!important;
  }
  #trialPage .codepadMiniControl{grid-template-rows:auto 38px!important;gap:2px!important;}
  #trialPage .codepadMiniControl span,
  #trialPage .codepadOneLineControls .trialPreviewLabel{font-size:9px!important;}
  #trialPage .codepadOneLineControls .trialChordPreview,
  #trialPage .codepadMiniControl input,
  #trialPage .codepadMiniControl select{
    height:38px!important;
    min-height:38px!important;
    border-radius:11px!important;
    font-size:11px!important;
    padding:0 3px!important;
  }
  #trialPage .codepadOneLineControls .trialChordPreview{font-size:22px!important;}
  #trialPage .codepadBpmBox input{font-size:16px!important;}
}


/* v126: スマホでもコードパッド上部操作を必ず1行で表示 */
#trialPage .trialPreviewGrid.codepadOneLineControlsV126,
#trialPage .trialPreviewGrid.codepadOneLineControls{
  display:grid!important;
  grid-template-columns:minmax(86px,1.35fr) 58px 76px 92px 96px!important;
  gap:5px!important;
  align-items:end!important;
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  margin:0 0 8px!important;
  padding:0 0 3px!important;
}
#trialPage .trialPreviewGrid.codepadOneLineControlsV126 .trialPreviewMain,
#trialPage .trialPreviewGrid.codepadOneLineControls .trialPreviewMain,
#trialPage .trialPreviewGrid.codepadOneLineControlsV126 .codepadMiniControl,
#trialPage .trialPreviewGrid.codepadOneLineControls .codepadMiniControl{
  min-width:0!important;
  margin:0!important;
  display:grid!important;
  grid-template-rows:auto 38px!important;
  gap:2px!important;
  align-self:stretch!important;
}
#trialPage .trialPreviewGrid.codepadOneLineControlsV126 .trialPreviewLabel,
#trialPage .trialPreviewGrid.codepadOneLineControls .trialPreviewLabel,
#trialPage .trialPreviewGrid.codepadOneLineControlsV126 .codepadMiniControl span,
#trialPage .trialPreviewGrid.codepadOneLineControls .codepadMiniControl span{
  display:block!important;
  text-align:center!important;
  font-size:9px!important;
  line-height:1.1!important;
  font-weight:1000!important;
  white-space:nowrap!important;
  margin:0!important;
}
#trialPage .trialPreviewGrid.codepadOneLineControlsV126 .trialChordPreview,
#trialPage .trialPreviewGrid.codepadOneLineControls .trialChordPreview,
#trialPage .trialPreviewGrid.codepadOneLineControlsV126 input,
#trialPage .trialPreviewGrid.codepadOneLineControls input,
#trialPage .trialPreviewGrid.codepadOneLineControlsV126 select,
#trialPage .trialPreviewGrid.codepadOneLineControls select{
  width:100%!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  box-sizing:border-box!important;
  margin:0!important;
  border-radius:11px!important;
  padding:0 3px!important;
  font-weight:1000!important;
}
#trialPage .trialPreviewGrid.codepadOneLineControlsV126 .trialChordPreview,
#trialPage .trialPreviewGrid.codepadOneLineControls .trialChordPreview{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:22px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#trialPage .trialPreviewGrid.codepadOneLineControlsV126 input,
#trialPage .trialPreviewGrid.codepadOneLineControls input,
#trialPage .trialPreviewGrid.codepadOneLineControlsV126 select,
#trialPage .trialPreviewGrid.codepadOneLineControls select{
  font-size:11px!important;
  border:1px solid #c9d8f0!important;
  background:linear-gradient(180deg,#fff,#edf5ff)!important;
  color:#07152e!important;
  text-align:center!important;
}
#trialPage .trialPreviewGrid.codepadOneLineControlsV126 .codepadBpmBox input,
#trialPage .trialPreviewGrid.codepadOneLineControls .codepadBpmBox input{font-size:16px!important;}
@media(min-width:641px){
  #trialPage .trialPreviewGrid.codepadOneLineControlsV126,
  #trialPage .trialPreviewGrid.codepadOneLineControls{
    grid-template-columns:minmax(180px,1.4fr) 82px 112px 126px 132px!important;
    gap:8px!important;
  }
  #trialPage .trialPreviewGrid.codepadOneLineControlsV126 .trialPreviewMain,
  #trialPage .trialPreviewGrid.codepadOneLineControls .trialPreviewMain,
  #trialPage .trialPreviewGrid.codepadOneLineControlsV126 .codepadMiniControl,
  #trialPage .trialPreviewGrid.codepadOneLineControls .codepadMiniControl{grid-template-rows:auto 48px!important;gap:4px!important;}
  #trialPage .trialPreviewGrid.codepadOneLineControlsV126 .trialPreviewLabel,
  #trialPage .trialPreviewGrid.codepadOneLineControls .trialPreviewLabel,
  #trialPage .trialPreviewGrid.codepadOneLineControlsV126 .codepadMiniControl span,
  #trialPage .trialPreviewGrid.codepadOneLineControls .codepadMiniControl span{font-size:12px!important;}
  #trialPage .trialPreviewGrid.codepadOneLineControlsV126 .trialChordPreview,
  #trialPage .trialPreviewGrid.codepadOneLineControls .trialChordPreview,
  #trialPage .trialPreviewGrid.codepadOneLineControlsV126 input,
  #trialPage .trialPreviewGrid.codepadOneLineControls input,
  #trialPage .trialPreviewGrid.codepadOneLineControlsV126 select,
  #trialPage .trialPreviewGrid.codepadOneLineControls select{height:48px!important;min-height:48px!important;max-height:48px!important;font-size:15px!important;}
  #trialPage .trialPreviewGrid.codepadOneLineControlsV126 .trialChordPreview,
  #trialPage .trialPreviewGrid.codepadOneLineControls .trialChordPreview{font-size:32px!important;}
}


/* v135 Reha&Rec single large player */
#voicePlayer{display:none!important;}
#recordPagePlayerBox{display:none!important;}
#recordPagePlayerBox135{
  margin-top:14px;
  padding:14px;
  border:1px solid rgba(12,31,60,.10);
  border-radius:16px;
  background:rgba(255,255,255,.88);
  box-shadow:0 10px 28px rgba(0,0,0,.07);
}
#recordPagePlayerBox135[hidden]{display:none!important;}
.recordPagePlayerTitle{font-weight:900;color:#071b3a;font-size:1.05rem;margin-bottom:10px;}
#recordPageVoicePlayer135{width:100%;height:54px;display:block;}
.recordPageDlButtons135{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
.recordPageDlButtons135 button{min-height:50px;border-radius:14px;font-weight:900;font-size:1rem;}
.recordPageDlNote135{font-weight:700;color:#5d6b80;font-size:.86rem;margin-top:9px;line-height:1.45;}
@media(max-width:640px){
  #recordPagePlayerBox135{padding:12px;margin-top:12px;}
  #recordPageVoicePlayer135{height:58px;}
  .recordPageDlButtons135 button{min-height:52px;font-size:.95rem;}
}


/* v137: place Reha&Rec recording DL panel OUTSIDE sticky button grid on every device */
#recordPage .recordPageInner > #recordPagePlayerBox135{
  display:block;
  width:100%;
  box-sizing:border-box;
  margin:14px 0 18px!important;
  padding:14px!important;
  border:1px solid rgba(12,31,60,.12);
  border-radius:16px;
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  position:relative;
  z-index:30;
}
#recordPage .recordPageInner > #recordPagePlayerBox135[hidden]{display:none!important;}
#recordPageVoicePlayer135{width:100%!important;min-height:48px;display:block!important;}
.recordPageDlButtons135{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
.recordPageDlButtons135 button{width:100%!important;min-width:0!important;min-height:50px!important;border-radius:14px;font-weight:900;}
@media(max-width:640px){
  #recordPage .recordPageInner > #recordPagePlayerBox135{margin:12px 0 18px!important;padding:12px!important;}
  .recordPageDlButtons135{grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .recordPageDlButtons135 button{font-size:14px!important;min-height:52px!important;padding:10px 6px!important;}
}





/* v141: single stable recording player/download panel */
#recordPagePlayerBox135{
  display:block;
  margin:14px 0 20px;
}
#recordPagePlayerBox135[hidden]{display:none!important;}
#recordPageVoicePlayer135{width:100%;}
@media(max-width:700px){
  #recordPagePlayerBox135{margin:12px 0 18px!important;padding:12px!important;}
  .recordPageDlButtons135{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .recordPageDlButtons135 button{min-height:52px!important;font-size:14px!important;}
}


/* v142: remove old mobile floating DL docks; keep only the official recording panel */
#mobileRehaDlDock138,
#mobileRecDlWrap139,
#mobileRehaDownloadDock140,
.mobileRehaDlDock138,
.mobileRecDlWrap139,
.mobileRehaDownloadDock140{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
#recordPagePlayerBox135{
  width:100%!important;
  box-sizing:border-box!important;
  margin:14px 0 18px!important;
  padding:14px!important;
  border:1px solid rgba(12,31,60,.12)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.08)!important;
}
#recordPagePlayerBox135[hidden]{display:none!important;}
#recordPageVoicePlayer135{width:100%!important;display:block!important;min-height:48px!important;}
.recordPageDlButtons135{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:12px!important;}
.recordPageDlButtons135 button{width:100%!important;min-width:0!important;min-height:50px!important;border-radius:14px!important;font-weight:900!important;}
@media(max-width:700px){
  #recordPagePlayerBox135{margin:12px 0 16px!important;padding:12px!important;position:relative!important;bottom:auto!important;left:auto!important;right:auto!important;}
  .recordPageDlButtons135{grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .recordPageDlButtons135 button{min-height:52px!important;font-size:14px!important;padding:10px 6px!important;}
}

/* =========================================================
   v143: コードパッドRecメモ
   ========================================================= */
#trialQualityRow #codepadRecBtn{
  grid-column:2!important;
  background:linear-gradient(135deg,#ff255a,#ffce63)!important;
  color:#16030b!important;
  border:0!important;
}
#trialQualityRow #codepadRecBtn span{font-size:clamp(18px,3.2vh,30px)!important;}
#trialQualityRow #codepadRecBtn.recording{
  animation:pulse .55s infinite alternate!important;
  background:linear-gradient(135deg,#ff002e,#fff06b)!important;
}
#trialPage .trialActions{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
#codepadMemoListBtn{font-weight:1000!important;}
.codepadMemoPage{z-index:120!important;background:#f7f7f7!important;color:#111!important;}
.codepadMemoInner{max-width:860px!important;}
.codepadMemoBox{display:grid;gap:14px;}
.codepadMemoLabel{display:grid;gap:6px;font-weight:1000;color:#17223a;}
.codepadMemoLabel input{width:100%;height:46px;border:1px solid #ccd8ea;background:#fff;color:#0f172a;border-radius:14px;padding:10px 12px;font-size:18px;font-weight:900;}
.codepadMemoCodesBox,.codepadMemoPlayerBox{border:1px solid #d9e2f2;background:#fff;border-radius:18px;padding:14px;box-shadow:0 8px 22px rgba(20,35,70,.06);}
.codepadMemoSub{font-weight:1000;color:#334155;margin-bottom:8px;}
.codepadMemoCodes{font-size:22px;font-weight:1000;line-height:1.55;word-break:break-word;color:#0f172a;}
#codepadMemoPlayer{width:100%;height:44px;}
.codepadMemoActions{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px;}
.codepadMemoActions button{min-height:48px;font-size:15px;}
.codepadRecStatus{font-weight:900;color:#ef3358;}
.codepadMemoListArea{display:grid;gap:10px;margin-top:16px;}
.codepadMemoItem{display:grid;gap:8px;background:#fff;border:1px solid #dbe4f4;border-radius:16px;padding:12px;box-shadow:0 8px 22px rgba(20,35,70,.06);}
.codepadMemoItem strong{font-size:18px;color:#0f172a;display:block;}
.codepadMemoItem small{color:#64748b;font-weight:800;}
.codepadMemoItemCodes{font-weight:1000;color:#1e293b;line-height:1.4;}
.codepadMemoItem audio{width:100%;height:36px;}
.codepadMemoItemBtns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.codepadMemoItemBtns button{box-shadow:none!important;}
@media(max-width:700px){
  #trialPage .trialActions{grid-template-columns:1fr 1fr!important;}
  .codepadMemoPage{padding:8px!important;}
  .codepadMemoInner{padding:14px 12px!important;border-radius:14px!important;}
  .codepadMemoActions{grid-template-columns:1fr 1fr!important;gap:8px;}
  .codepadMemoActions button{font-size:13px;min-height:44px;padding:9px 6px;}
  .codepadMemoCodes{font-size:18px;}
  #codepadMemoPlayer{height:40px;}
}


/* =========================================================
   v144: コードパッドメモ ボタン色修正 + スマホ反映用キャッシュ更新
   - 白く見えていた「メモ一覧」「コードパッドへ戻る」「DL」系を明示配色
   - PC/スマホ共通で見える色に固定
   ========================================================= */
#codepadMemoListBtn,
#codepadMemoRetake,
.codepadMemoItemBtns button,
.codepadMemoActions button,
#trialPage .trialActions #codepadMemoListBtn{
  color:#07111e!important;
  font-weight:1000!important;
  border:0!important;
  text-shadow:none!important;
  opacity:1!important;
}
#codepadMemoListBtn,
#trialPage .trialActions #codepadMemoListBtn{
  background:linear-gradient(135deg,#58f7ff,#b65cff)!important;
  box-shadow:0 10px 24px rgba(88,240,255,.22)!important;
}
#codepadMemoRetake{
  background:linear-gradient(135deg,#ffb347,#ff5f7e)!important;
  color:#17030a!important;
  box-shadow:0 10px 24px rgba(255,115,90,.20)!important;
}
#codepadMemoSave,
#codepadMemoDlRaw,
#codepadMemoDlWav,
.codepadMemoItemBtns .primary,
.codepadMemoItemBtns button[data-dl-codepad]{
  background:linear-gradient(135deg,#58f7ff,#b65cff)!important;
  color:#07111e!important;
  box-shadow:0 10px 24px rgba(88,240,255,.20)!important;
}
.codepadMemoItemBtns .danger,
.codepadMemoItemBtns button[data-del-codepad]{
  background:linear-gradient(135deg,#ff4f76,#ffaf55)!important;
  color:#17030a!important;
}
#trialPage .trialActions{
  gap:10px!important;
}
#trialPage .trialActions button{
  min-height:46px!important;
}
@media(max-width:700px){
  #trialPage .trialActions{grid-template-columns:1fr 1fr!important;gap:8px!important;}
  #trialPage .trialActions #codepadMemoListBtn{grid-column:span 2!important;min-height:44px!important;}
  #trialQualityRow #codepadRecBtn{grid-column:auto!important;min-height:58px!important;}
  .codepadMemoActions button{font-size:13px!important;min-height:46px!important;}
}


/* =========================================================
   v149: 文言修正 + ひらめき/コードパッドメモのボタン視認性改善
   - 機能は触らず、見える色だけを固定
   ========================================================= */
#codepadMemoClose{
  background:linear-gradient(135deg,#ff4f76,#ffaf55)!important;
  color:#17030a!important;
  border:0!important;
  font-weight:1000!important;
  opacity:1!important;
  text-shadow:none!important;
  box-shadow:0 10px 24px rgba(255,115,90,.22)!important;
}
#ideaDownload,
#ideaReload{
  background:linear-gradient(135deg,#58f7ff,#b65cff)!important;
  color:#07111e!important;
  border:0!important;
  font-weight:1000!important;
  opacity:1!important;
  text-shadow:none!important;
  box-shadow:0 10px 24px rgba(88,240,255,.22)!important;
}
#ideaClear{
  background:linear-gradient(135deg,#ffb347,#ff5f7e)!important;
  color:#17030a!important;
  border:0!important;
  font-weight:1000!important;
  opacity:1!important;
  text-shadow:none!important;
  box-shadow:0 10px 24px rgba(255,115,90,.20)!important;
}
#ideaDownload:disabled,
#ideaClear:disabled,
#ideaReload:disabled{
  opacity:.72!important;
  filter:saturate(.72)!important;
  cursor:not-allowed!important;
}
@media(max-width:640px){
  #codepadMemoClose,
  #ideaDownload,
  #ideaClear,
  #ideaReload{
    min-height:42px!important;
    font-size:13px!important;
  }
}