/* ── Original file unchanged, with new resize-handle styles added at the end ── */
#keycoach-wrapper{position:relative;background:#1e1e1e;padding:20px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.5);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;max-width:100%;margin:0 auto;color:#eee;--active-color:#02667f;--kc-color-chords:#02667f;--kc-color-buttons:#02667f;overflow:visible;}
#kc-preloader{position:absolute;top:0;left:0;width:100%;height:100%;background:#1e1e1e;z-index:2147483647;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 0.5s ease,visibility 0.5s ease;border-radius:12px;overflow:hidden;}#keycoach-wrapper.jo-is-fullscreen #kc-preloader{border-radius:0;position:fixed;}.kc-preloader-svg{width:80%;max-width:350px;height:auto;overflow:visible;margin-bottom:0;}.kc-svg-text{font-family:'Caveat',cursive;font-size:80px;font-weight:700;fill:transparent;stroke:var(--active-color);stroke-width:2px;stroke-dasharray:1000;stroke-dashoffset:1000;animation:kc-draw-text 3s ease forwards,kc-fill-text 1s 2.5s ease forwards;}@keyframes kc-draw-text{to{stroke-dashoffset:0;}}@keyframes kc-fill-text{to{fill:var(--active-color);}}.kc-preloader-sub{color:#888;font-size:1rem;margin-top:15px;animation:kc-pulse-sub 1.5s infinite;}@keyframes kc-pulse-sub{0%,100%{opacity:0.5;}50%{opacity:1;}}
#kc-toast-container{position:fixed !important;top:20px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:2147483647 !important;pointer-events:none;}
.kc-toast{background:rgba(30,30,30,0.95);color:#fff;padding:12px 18px;border-radius:6px;font-size:0.85rem;font-weight:600;box-shadow:0 4px 15px rgba(0,0,0,0.5);border-left:4px solid #4caf50;opacity:0;transform:translateX(20px);transition:all 0.3s ease;}
.kc-toast.show{opacity:1;transform:translateX(0);}
.kc-toast.error{border-left-color:#d63638;}.kc-toast.warning{border-left-color:#ff9800;}.kc-toast.info{border-left-color:#2196f3;}.kc-toast.success{border-left-color:#4caf50;}
.kc-toolbar{margin-bottom:10px;background:#2a2a2a;padding:15px;border-radius:8px;border:1px solid #333;}
#kc-primary-controls-container{display:block;}#kc-primary-controls-container.hidden{display:none !important;}
.kc-row{display:flex;align-items:center;flex-wrap:wrap;gap:15px;margin-bottom:15px;}.kc-row:last-child{margin-bottom:0;}
.kc-group{display:flex;align-items:center;gap:8px;}.kc-group.hidden{display:none;}
.kc-group label{font-weight:600;font-size:0.75rem;color:#aaa;text-transform:uppercase;letter-spacing:0.5px;}
.kc-input-group{align-items:flex-start;}.kc-input-group label{margin-top:8px;}
.kc-input-controls{display:flex;flex-direction:column;gap:6px;}.kc-midi-learn-wrapper{display:flex;gap:6px;}
.kc-select,.kc-select-small{padding:6px 10px;border-radius:4px;border:1px solid #444;background:#333;color:#fff;font-size:0.9rem;}.kc-select-small{width:60px;}
.kc-midi-speed-select{background:#2a2a2a;border-radius:20px;border:1px solid #444;color:#aaa;padding:5px 10px;font-size:0.85rem;cursor:pointer;outline:none;}
.kc-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;z-index:2147483640 !important;opacity:0;visibility:hidden;transition:opacity 0.4s ease;backdrop-filter:blur(5px);}
.kc-modal-overlay.visible{opacity:1;visibility:visible;}.kc-modal-content{background:#2a2a2a;padding:40px;border-radius:16px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.6);border:1px solid #444;transform:translateY(20px);transition:transform 0.4s ease;}
.kc-modal-overlay.visible .kc-modal-content{transform:translateY(0);}.kc-modal-title{margin-top:0;color:#fff;font-size:1.8rem;margin-bottom:10px;font-weight:300;}
.kc-handwriting{font-family:'Caveat',cursive;color:var(--active-color);font-weight:700;font-size:2.2rem;}.kc-modal-options{display:flex;gap:20px;justify-content:center;margin-top:25px;}
.kc-modal-btn{padding:12px 24px;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-size:1rem;transition:all 0.2s;display:flex;align-items:center;gap:8px;}
.kc-modal-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,0.3);}.kc-modal-btn.primary{background:#4caf50;color:white;}.kc-modal-btn.secondary{background:#444;color:#ddd;border:1px solid #555;}
.kc-modal-btn.error:hover{background:#b71c1c !important;}
.kc-shortcuts-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin-top:15px;}.kc-shortcut-row{display:flex;justify-content:space-between;align-items:center;}.kc-shortcut-label{color:#aaa;font-size:0.9rem;font-weight:600;}
.kc-shortcut-input{background:#111;border:1px solid #555;color:var(--active-color);padding:6px 10px;border-radius:4px;width:120px;text-align:center;font-family:monospace;font-size:0.85rem;cursor:pointer;}
.kc-shortcut-input:focus{border-color:var(--active-color);outline:none;box-shadow:0 0 8px rgba(76,175,80,0.4);}
.kc-slider{-webkit-appearance:none;width:80px;height:4px;background:#444;border-radius:2px;outline:none;opacity:0.8;}.kc-slider:hover{opacity:1;}
.kc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#0073aa;cursor:pointer;}
.kc-input-num{background:#333;border:1px solid #444;color:#fff;padding:5px;width:50px;border-radius:4px;font-size:0.9rem;}
.kc-metronome-container{background:rgba(0,0,0,0.2);padding:5px 10px;border-radius:5px;border:1px solid #333;gap:12px;}.kc-metro-controls{display:flex;align-items:center;gap:8px;}
input[type="color"]#kc-custom-color{background:none;border:none;width:30px;height:30px;cursor:pointer;padding:0;}
.kc-toggle-wrapper{margin-left:auto;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;position:relative;gap:8px;}
.kc-toggle-topline{display:flex;align-items:center;gap:8px;}
.kc-tooltip{position:absolute;right:110%;top:50%;transform:translateY(-50%);background:#d63638;color:white;padding:6px 10px;border-radius:4px;font-size:0.85rem;font-weight:bold;white-space:nowrap;opacity:0;transition:opacity 0.3s;pointer-events:none;box-shadow:0 4px 10px rgba(0,0,0,0.3);z-index:10;}
.kc-tooltip::after{content:'';position:absolute;top:50%;right:-6px;margin-top:-6px;border-width:6px 0 6px 6px;border-style:solid;border-color:transparent transparent transparent #d63638;}
.kc-tooltip.visible{opacity:1;animation:kc-shake 0.5s cubic-bezier(.36,.07,.19,.97) both;}
@keyframes kc-shake{10%,90%{transform:translate3d(-1px,-50%,0);}20%,80%{transform:translate3d(2px,-50%,0);}30%,50%,70%{transform:translate3d(-4px,-50%,0);}40%,60%{transform:translate3d(4px,-50%,0);}}
.kc-btn{background:#0073aa;border:none;color:white;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:0.85rem;font-weight:600;}.kc-btn.muted{background:#d63638;}
.kc-btn-secondary{background:#444;color:#ccc;}
.kc-btn-active{background:var(--kc-color-buttons) !important;color:white !important;box-shadow:0 0 10px color-mix(in srgb,var(--kc-color-buttons) 50%,transparent) !important;border-color:var(--kc-color-buttons) !important;}
.kc-btn-side.kc-btn-active{background:var(--kc-color-buttons) !important;color:white !important;border-color:var(--kc-color-buttons) !important;box-shadow:0 0 15px color-mix(in srgb,var(--kc-color-buttons) 60%,transparent) !important;}
.kc-btn-primary{background:#4caf50;color:white;}
.kc-btn-group-bottom{display:flex;gap:5px;}.kc-toggle-wrapper .kc-btn{padding:6px 12px;font-size:0.8rem;}#kc-fullscreen-toggle{font-size:1rem;padding:4px 10px;}#kc-fullscreen-toggle.kc-btn-fs{background:var(--kc-color-buttons) !important;color:#fff !important;border-color:var(--kc-color-buttons) !important;box-shadow:0 0 12px color-mix(in srgb,var(--kc-color-buttons) 55%,transparent) !important;}#kc-fullscreen-toggle.kc-btn-fs.jo-fs-active{background:color-mix(in srgb,var(--kc-color-buttons) 85%,black) !important;box-shadow:0 0 18px color-mix(in srgb,var(--kc-color-buttons) 80%,transparent) !important;}#kc-fullscreen-toggle.kc-btn-fs:hover{background:color-mix(in srgb,var(--kc-color-buttons) 85%,white) !important;border-color:color-mix(in srgb,var(--kc-color-buttons) 85%,white) !important;box-shadow:0 0 16px color-mix(in srgb,var(--kc-color-buttons) 75%,transparent) !important;}
.kc-rec-timer{position:fixed;top:20px;left:calc(50% - 45px);background:rgba(0,0,0,0.85);border:1px solid #d32f2f;color:#fff;padding:8px 16px;border-radius:20px;font-family:monospace;font-size:1.2rem;font-weight:bold;z-index:2147483647;cursor:grab;display:flex;align-items:center;gap:10px;box-shadow:0 4px 15px rgba(0,0,0,0.5);user-select:none;}
.kc-rec-timer.dragging{cursor:grabbing;opacity:0.8;}.kc-rec-timer.hidden{display:none !important;}.kc-rec-timer-dot{color:#d32f2f;animation:kc-pulse-record 1.5s infinite;}
.kc-floating-right{position:absolute;right:-70px;top:20px;z-index:5000;display:flex;flex-direction:column;gap:12px;}
.recording-active{background:#d32f2f !important;color:#fff !important;border-color:#d32f2f !important;animation:kc-pulse-record 1.5s infinite;}
@keyframes kc-pulse-record{0%{box-shadow:0 0 0 rgba(211,47,47,0.7);}50%{box-shadow:0 0 10px rgba(211,47,47,0.7);}100%{box-shadow:0 0 0 rgba(211,47,47,0);}}
.kc-btn-mini{background:#444;border:1px solid #555;color:#fff;border-radius:4px;cursor:pointer;font-size:0.7rem;padding:3px 8px;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;}
.kc-btn-mini:hover{background:#555;}.kc-btn-mini.active{background:#ff9800;color:#000;border-color:#ff9800;animation:kc-pulse-learn 1.5s infinite;}.kc-btn-mini.hidden{display:none !important;}
@keyframes kc-pulse-learn{0%{transform:scale(1);box-shadow:0 0 0 rgba(255,152,0,0.7);}50%{transform:scale(1.05);box-shadow:0 0 8px rgba(255,152,0,0.7);}100%{transform:scale(1);box-shadow:0 0 0 rgba(255,152,0,0);}}
.jo-learn-mode .kc-slider,.jo-learn-mode .kc-input-num,.jo-learn-mode .kc-lcd-voice-select{outline:2px dashed #ffeb3b;outline-offset:2px;cursor:crosshair !important;}.kc-learning-target{outline:2px solid #ff9800 !important;box-shadow:0 0 10px rgba(255,152,0,0.5);}
.kc-title-label{font-family:'Caveat',cursive,sans-serif;font-size:1.6rem;color:var(--active-color);margin:0;transform:none;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,0.5);white-space:nowrap;}
.kc-info-bar{border-top:1px solid #333;padding-top:15px;justify-content:space-between;}.kc-info-bar.hidden{display:none !important;}.kc-chord-box{display:flex;align-items:baseline;gap:10px;}
.kc-label{color:#888;font-size:0.8rem;text-transform:uppercase;}.kc-chord-text{font-size:1.5rem;font-weight:700;color:var(--kc-color-chords);text-shadow:0 0 15px rgba(255,255,255,0.1);}
.kc-status-box{font-size:0.8rem;color:#666;display:flex;gap:10px;align-items:center;transition:color 0.3s ease;}.kc-pill{background:var(--active-color);color:#000;padding:2px 6px;border-radius:3px;font-weight:bold;font-size:0.7rem;}.kc-pill.hidden{display:none;}
#kc-piano-wrapper{width:100%;position:relative;}
.kc-labels-layer{height:25px;width:100%;background:#111;display:flex;position:relative;overflow:hidden;border-left:5px solid #000;border-right:5px solid #000;border-radius:6px 6px 0 0;}
.kc-note-label{position:relative;height:100%;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:bold;color:#fff;opacity:0;transition:opacity 0.05s,color 0.1s;user-select:none;}
.kc-note-label.visible{opacity:1;color:var(--active-color);text-shadow:0 0 5px var(--active-color);}
.kc-piano{position:relative;height:240px;width:100%;overflow:hidden;background:#111;border:2px solid #000;border-radius:0 0 6px 6px;display:flex;user-select:none;}
.kc-piano.kc-locked{opacity:0.5;filter:grayscale(80%);transition:all 0.3s ease;}
.kc-key{position:relative;box-sizing:border-box;z-index:1;cursor:pointer;flex-grow:0;flex-shrink:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;}
.kc-key-octave{color:#555;font-size:0.65rem;font-weight:600;pointer-events:none;}.kc-key.kc-locking-grey{background:#555 !important;border-color:#333 !important;box-shadow:none !important;}
.kc-key-white{height:100%;background:linear-gradient(to bottom,#fff 0%,#eee 100%);border:1px solid #999;border-top:none;border-bottom-left-radius:4px;border-bottom-right-radius:4px;}
.kc-key-white.active{background:var(--active-color);border-bottom:4px solid rgba(0,0,0,0.3);box-shadow:inset 0 -5px 15px rgba(0,0,0,0.3);}.kc-key-white.active .kc-key-octave{color:rgba(0,0,0,0.5);}
.kc-key-black{height:60%;background:linear-gradient(to bottom,#333 0%,#000 100%);border:1px solid #000;border-bottom:1px solid #444;border-bottom-left-radius:3px;border-bottom-right-radius:3px;z-index:2;margin-left:0;margin-right:0;}
.kc-key-black.active{background:var(--active-color);border-color:rgba(0,0,0,0.3);box-shadow:inset 0 -2px 10px rgba(0,0,0,0.5);}
.kc-media-side-panel{position:absolute;left:-70px;top:20px;display:flex;flex-direction:column;gap:12px;z-index:5000;}
#keycoach-wrapper[data-kc-padding-fixed]:not(.jo-is-fullscreen) .kc-media-side-panel{left:8px !important;}
#keycoach-wrapper[data-kc-padding-fixed-right]:not(.jo-is-fullscreen) .kc-floating-right,
#keycoach-wrapper[data-kc-padding-fixed-right]:not(.jo-is-fullscreen) #kc-record-buttons-wrap.kc-floating-right{right:8px !important;}
.kc-btn-side{width:55px;padding:10px 6px;border-radius:8px;background:#2a2a2a;color:#ccc;border:1px solid #444;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:0.75rem;font-weight:600;line-height:0.9;transition:all 0.2s cubic-bezier(0.25,0.8,0.25,1);box-shadow:0 4px 10px rgba(0,0,0,0.3);cursor:pointer;}
.kc-btn-side p{margin:0;padding-top:5px;}
.kc-btn-side[draggable="true"]{cursor:grab;}.kc-btn-side[draggable="true"]:active{cursor:grabbing;}
.kc-btn-side:hover{background:#444;color:#fff;transform:translateX(-3px);}
@media(max-width:900px){.kc-media-side-panel{position:relative;left:0;top:0;flex-direction:row;justify-content:center;margin-bottom:15px;}.kc-btn-side:hover{transform:translateY(-3px);}}
.kc-media-stage{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(1000,1fr);column-gap:2px;row-gap:0;padding:0;background:transparent;border:none;height:200px;transition:all 0.3s ease;margin-bottom:0;position:relative;}.kc-media-stage.hidden,.kc-media-stage.hidden-stage-override{display:none !important;}
.kc-media-stage.jo-hide-media-controls .kc-align-controls,.kc-media-stage.jo-hide-media-controls .kc-fit-controls,.kc-media-stage.jo-hide-media-controls .kc-font-controls,.kc-media-stage.jo-hide-media-controls .kc-drag-handle,.kc-media-stage.jo-hide-media-controls .kc-media-label,.kc-media-stage.jo-hide-media-controls .kc-media-inputs,.kc-media-stage.jo-hide-media-controls #kc-stage-resize-handle{display:none !important;}
/* FIX: clicking the UI-toggle button (kc-btn-toggle-ui) also hides the active pin icon (📌) on every media stage box */
.kc-media-stage.jo-hide-media-controls .kc-media-box.kc-box-pinned::after{display:none !important;}
/* FIX: removed resize:horizontal — native browser grip conflicted with JS custom handles, causing snap on drag start */
.kc-media-box{background:#2a2a2a;border:1px solid #444;border-radius:8px;padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;min-width:200px;min-height:0;box-sizing:border-box;transition:opacity 0.2s,border-color 0.2s;}
/* Grid placement: each box's exact column/row-span is set inline by JS
   (grid-column-start/grid-row-start/grid-row-end — see the column layout
   engine in script.js). grid-template-rows uses 1000 equal, tiny tracks
   instead of a coarse fixed row count, so each column's boxes can be split
   at *any* height (not just fixed fractions) — that's what makes per-box
   vertical resizing continuous. Every column's boxes are explicitly
   assigned spans that sum to exactly those 1000 row-tracks, so grid items
   fill their cell by default (grid's own align/justify default is
   "stretch") — no manual height math needed here, and no way for an
   unassigned "phantom" track to ever appear since nothing is auto-placed. */
.kc-media-box.hidden{display:none;}.kc-media-box.kc-dragging{opacity:0.4;}.kc-media-box.kc-drag-over{border:2px dashed var(--active-color);background:rgba(76,175,80,0.1);}
/* Drop-zone indicators — top/bottom 25% of a target box = vertical stack (new row);
   left/right half of the remaining middle band = horizontal insert before/after. */
.kc-media-box.kc-stack-over-top{box-shadow:inset 0 4px 0 0 var(--active-color);background:rgba(76,175,80,0.06);}
.kc-media-box.kc-stack-over-bottom{box-shadow:inset 0 -4px 0 0 var(--active-color);background:rgba(76,175,80,0.06);}
.kc-media-box.kc-stack-over-left{box-shadow:inset 4px 0 0 0 var(--active-color);background:rgba(76,175,80,0.06);}
.kc-media-box.kc-stack-over-right{box-shadow:inset -4px 0 0 0 var(--active-color);background:rgba(76,175,80,0.06);}
.kc-media-box.kc-stack-over-center{box-shadow:inset 0 0 0 4px var(--active-color);background:rgba(76,175,80,0.12);}
.kc-drag-handle{position:absolute;top:10px;left:10px;right:auto;color:rgba(255,255,255,0.3);cursor:grab;font-size:1.2rem;z-index:25;user-select:none;transition:color 0.2s;}.kc-media-box:hover .kc-drag-handle{color:rgba(255,255,255,0.8);}.kc-drag-handle:active{cursor:grabbing;}
#kc-webcam-video{width:100%;height:100%;object-fit:cover;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,0.5);transition:object-fit 0.3s ease;resize:both;overflow:hidden;max-width:100%;max-height:100%;}
#kc-webcam-video.kc-legacy-cam{width:auto !important;aspect-ratio:1/1;}
.kc-align-controls{position:absolute;top:10px;right:10px;left:auto;display:flex;gap:5px;z-index:10;opacity:0.2;transition:all 0.3s ease;}.kc-media-box:hover .kc-align-controls{opacity:1;}.kc-btn-align{background:rgba(0,0,0,0.6);border:1px solid #555;color:#ccc;border-radius:4px;cursor:pointer;padding:4px 8px;font-size:0.9rem;transition:all 0.2s;}.kc-btn-align:hover,.kc-btn-align.active{background:var(--active-color);color:#fff;border-color:var(--active-color);}
.kc-fit-controls{position:absolute;bottom:10px;left:10px;display:flex;gap:5px;z-index:10;opacity:0.2;transition:all 0.3s ease;}.kc-media-box:hover .kc-fit-controls{opacity:1;}.kc-btn-fit,.kc-btn-player-fit,.kc-btn-banner-fit{background:rgba(0,0,0,0.6);border:1px solid #555;color:#ccc;border-radius:4px;cursor:pointer;padding:4px 8px;font-size:0.8rem;transition:all 0.2s;}.kc-btn-fit:hover,.kc-btn-fit.active,.kc-btn-player-fit:hover,.kc-btn-player-fit.active,.kc-btn-banner-fit:hover,.kc-btn-banner-fit.active{background:var(--active-color);color:#fff;border-color:var(--active-color);}
.kc-font-controls{position:absolute;top:10px;right:10px;left:auto;display:flex;gap:5px;z-index:10;opacity:0.2;transition:all 0.3s ease;}.kc-media-box:hover .kc-font-controls{opacity:1;}.kc-btn-font{background:rgba(0,0,0,0.6);border:1px solid #555;color:#ccc;border-radius:4px;cursor:pointer;padding:4px 8px;font-size:0.8rem;font-weight:bold;transition:all 0.2s;}.kc-btn-font:hover{background:var(--active-color);color:#fff;border-color:var(--active-color);}
.kc-giant-chord{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:4rem;font-weight:bold;color:var(--kc-color-chords);text-shadow:0 0 20px rgba(0,0,0,0.8);text-align:center;padding:20px;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word;word-break:break-all;pointer-events:none;transition:font-size 0.2s ease,font-family 0.2s ease;z-index:1;}
.kc-media-inputs{transition:all 0.3s ease;z-index:20;width:100%;display:flex;justify-content:center;margin-bottom:5px;}.kc-media-inputs.mini-floater{position:absolute;top:10px;right:10px;width:auto;margin:0;opacity:0.3;transform:scale(0.85);transform-origin:top right;}.kc-media-inputs.mini-floater:hover{opacity:1;transform:scale(1);}
.hidden-input{display:none;}
.kc-file-upload-btn{display:inline-block;padding:6px 10px;background:#444;color:#ccc;border:1px solid #555;border-radius:4px;cursor:pointer;font-size:0.75rem;font-weight:600;transition:all 0.2s;}.kc-file-upload-btn:hover{background:#555;color:#fff;}
.kc-media-asset-container{flex:1;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0;}#kc-main-media-player,#kc-banner-image{width:100%;height:100%;max-height:100%;object-fit:contain;border-radius:8px;transition:object-fit 0.3s ease;}#kc-main-media-player{outline:none;}#kc-main-media-player.hidden{display:none !important;}
#kc-midi-player-ui,#kc-audio-ui{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#1e1e1e,#111);border-radius:8px;padding:10px 15px;box-sizing:border-box;}#kc-midi-player-ui.hidden,#kc-audio-ui.hidden{display:none !important;}
#kc-loop-ui.hidden{display:none !important;}
.kc-midi-header{display:flex;align-items:center;gap:12px;margin-bottom:0;width:100%;max-width:450px;}.kc-midi-icon{font-size:1.5rem;background:linear-gradient(135deg,#0073aa,#4caf50);width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,0.4);color:white;flex-shrink:0;}
.kc-midi-title{color:#fff;font-weight:700;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-grow:1;}
#kc-audio-visualizer{width:100%;max-width:450px;height:35px !important;margin:5px 0;border-radius:4px;background:rgba(0,0,0,0.2);flex-shrink:0;}
.kc-midi-progress-container{width:100%;max-width:450px;display:flex;align-items:center;gap:10px;margin:5px 0;}.kc-midi-time-text{color:#888;font-size:0.8rem;font-family:monospace;width:45px;text-align:center;flex-shrink:0;}.kc-midi-slider{flex-grow:1;height:6px;width:auto !important;margin:0;}
.kc-midi-controls{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;flex-wrap:wrap;}.kc-btn-circle{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all 0.2s;box-shadow:0 4px 10px rgba(0,0,0,0.3);}
.kc-btn-circle.kc-btn-primary{background:#4caf50;color:white;}.kc-btn-circle.kc-btn-primary:hover{background:#45a049;transform:scale(1.05);}.kc-btn-circle.kc-btn-secondary{background:#444;color:#ccc;}.kc-btn-circle.kc-btn-secondary:hover{background:#555;color:#fff;transform:scale(1.05);}
.kc-btn-circle.kc-ab-btn-inline{font-size:0.72rem;font-weight:900;letter-spacing:0.04em;width:34px;height:34px;border-radius:50%;transition:all 0.15s;}
.kc-btn-circle.kc-ab-btn-inline.kc-ab-set-a{background:#1565c0;border-color:#1565c0;color:#fff;box-shadow:0 0 8px rgba(21,101,192,0.7);}
.kc-btn-circle.kc-ab-btn-inline.kc-ab-set-b{background:#e65100;border-color:#e65100;color:#fff;box-shadow:0 0 8px rgba(230,81,0,0.7);}
.kc-btn-circle.kc-ab-btn-inline.kc-ab-looping{background:#00897b;border-color:#00897b;color:#fff;box-shadow:0 0 10px rgba(0,137,123,0.8);animation:kcAbPulse 1.4s ease-in-out infinite;}
@keyframes kcAbPulse{0%,100%{box-shadow:0 0 8px rgba(0,137,123,0.6);}50%{box-shadow:0 0 16px rgba(0,137,123,1);}}
.kc-media-label{position:absolute;bottom:8px;right:8px;font-size:10px;font-weight:bold;color:rgba(255,255,255,0.3);background:transparent;padding:3px 6px;border-radius:4px;pointer-events:none;text-transform:uppercase;letter-spacing:1px;z-index:50;transition:all 0.3s ease;}.kc-media-box:hover .kc-media-label{color:#ccc;background:rgba(0,0,0,0.7);}
#kc-notes-overlay,#kc-recordings-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#1a1a1a;z-index:10000000;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;}
#kc-notes-overlay.hidden,#kc-recordings-overlay.hidden{display:none !important;}
.kc-notes-header-bar{display:flex;justify-content:space-between;align-items:center;padding:15px 30px;background:#2a2a2a;border-bottom:1px solid #444;flex-shrink:0;}
.kc-notes-overlay-content{flex-grow:1;overflow-y:auto;padding:20px;background:#111;display:block;height:calc(100vh - 70px);}
#kc-notes-overlay #swpn-app-container{min-height:100%;border:none;border-radius:8px;}
#keycoach-wrapper.jo-is-fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;max-width:none;margin:0;border-radius:0;padding:0;z-index:999999;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;}
#keycoach-wrapper.jo-is-fullscreen .kc-input-group{align-items:center !important;}#keycoach-wrapper.jo-is-fullscreen .kc-input-group label{margin-top:0 !important;}#keycoach-wrapper.jo-is-fullscreen .kc-input-controls{flex-direction:row !important;align-items:center !important;}
#keycoach-wrapper.jo-is-fullscreen .kc-piano{flex-grow:0 !important;flex-shrink:0 !important;height:240px !important;min-height:240px !important;max-height:240px !important;border-radius:0;border-bottom:none;border-left:none;border-right:none;}
#keycoach-wrapper.jo-is-fullscreen .kc-labels-layer{flex-grow:0 !important;flex-shrink:0 !important;height:25px !important;min-height:25px !important;border-radius:0;}
#keycoach-wrapper.jo-is-fullscreen .kc-media-side-panel{position:absolute;left:50%;top:15px;bottom:auto;transform:translateX(-50%);flex-direction:row;z-index:1000000;gap:25px;}
#keycoach-wrapper.jo-is-fullscreen .kc-btn-side:hover{transform:translateY(-3px);}#keycoach-wrapper.jo-is-fullscreen #kc-btn-shortcuts{margin-top:0 !important;}
#keycoach-wrapper.jo-is-fullscreen .kc-toolbar{flex-grow:1;flex-shrink:1;display:flex;flex-direction:column;min-height:0;padding-top:120px;padding-left:20px;padding-right:20px;border-radius:0;margin-bottom:0;}
#keycoach-wrapper.jo-is-fullscreen .kc-row{column-gap:50px;row-gap:25px;margin-bottom:35px;}
#keycoach-wrapper.jo-is-fullscreen .kc-row:last-child{margin-bottom:0;}
#keycoach-wrapper.jo-is-fullscreen .kc-toggle-wrapper{position:absolute !important;top:20px !important;right:20px !important;z-index:1000000;margin-left:auto !important;}
#keycoach-wrapper.jo-is-fullscreen #kc-record-buttons-wrap{display:flex;flex-direction:row;gap:12px;}
#keycoach-wrapper.jo-is-fullscreen .kc-side-morph{width:auto;padding:6px 12px;flex-direction:row;font-size:0.8rem;transform:none;}
#keycoach-wrapper.jo-is-fullscreen .kc-media-stage{flex-grow:1;flex-shrink:1;min-height:0;height:auto;max-height:none;margin-bottom:0;}
#keycoach-wrapper.jo-is-fullscreen #kc-btn-game{display:none !important;}
#keycoach-wrapper.jo-hide-side-panel .kc-media-side-panel{display:none !important;}
#keycoach-wrapper.jo-hide-side-panel #kc-fs-escape-btn{display:block !important;opacity:0.5 !important;font-weight:normal !important;}
#keycoach-wrapper.jo-hide-side-panel.jo-ui-hidden #kc-fs-escape-btn{display:none !important;}
#kc-fs-escape-btn:hover{background:#d63638 !important;border-color:#ff5252 !important;transform:scale(1.1) !important;opacity:1 !important;font-weight:bold !important;color:#000 !important;}
#keycoach-wrapper.jo-is-fullscreen .kc-media-stage{position:absolute !important;top:5px !important;left:5px !important;right:5px !important;bottom:272px !important;z-index:500 !important;background:#111 !important;border-radius:8px !important;box-shadow:0 10px 30px rgba(0,0,0,0.8) !important;border:1px solid #333 !important;padding:5px !important;margin:0 !important;display:grid !important;grid-template-rows:repeat(1000,1fr) !important;column-gap:2px !important;row-gap:0 !important;}
/* Boxes are placed via explicit inline grid-column/grid-row (see script.js) —
   grid's default stretch fills each box's cell automatically, in both
   normal and fullscreen mode, so no per-mode flex override is needed here. */
#keycoach-wrapper.jo-is-fullscreen .kc-media-stage.hidden{display:none !important;}
/* BUGFIX: allow the vertical stage-resize handle to work in fullscreen too. The fullscreen
   stage is anchored with top+bottom (not height), so resizing it means overriding "bottom".
   This rule only takes effect once .kc-stage-custom-height is added by JS (i.e. the user has
   actually dragged the handle), so default fullscreen layout/behavior is unchanged otherwise. */
#keycoach-wrapper.jo-is-fullscreen.kc-stage-custom-height .kc-media-stage{bottom:var(--kc-fs-stage-bottom,272px) !important;}
#kc-vk-toolbar{display:none !important;}
#keycoach-wrapper.jo-vk-active #kc-vk-toolbar{display:flex !important;align-items:center;margin-bottom:10px;width:100%;}
#keycoach-wrapper.jo-vk-active > :not(#kc-piano-wrapper):not(#kc-toast-container):not(#kc-shortcuts-modal):not(#kc-preloader){display:none !important;}
#keycoach-wrapper.jo-vk-active{background:transparent;box-shadow:none;padding:0;}
#keycoach-wrapper.jo-vk-active #kc-piano-wrapper{position:fixed !important;background:#1e1e1e;border-radius:8px;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,0.8);z-index:2147483600 !important;resize:both;overflow:hidden;display:flex;flex-direction:column;min-width:300px;min-height:150px;}
#keycoach-wrapper.jo-vk-active .kc-piano{height:100% !important;flex-grow:1;min-height:50px;border:2px solid #000;border-radius:0 0 6px 6px;}
#keycoach-wrapper.jo-vk-active .kc-labels-layer{border-radius:6px 6px 0 0;}
#kc-game-btn-unload{opacity:0.4;font-weight:normal;transition:all 0.2s;} #kc-game-btn-unload:hover{opacity:1;font-weight:bold;}

/* ═══════════════════════════════════════════════════════════════
   KEYCOACH MASTER PATCH — appended rules
   ═══════════════════════════════════════════════════════════════ */

/* ── Panel opacity transitions ── */
.kc-media-side-panel, #kc-record-buttons-wrap {
    opacity: 1;
    transition: opacity 0.4s ease 0.1s;
}

/* ── Hide panels while studio is loading ── */
.kc-studio-loading .kc-media-side-panel,
.kc-studio-loading #kc-record-buttons-wrap {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
}

/* ── Hide panels when any overlay/modal is open ── */
.kc-overlay-open .kc-media-side-panel,
.kc-overlay-open #kc-record-buttons-wrap {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   TRANSFORM-SCALE MOBILE  (replaces breakpoint approach)
   The JS scales #keycoach-wrapper to fit the viewport width.
   When active, .kc-scaled is added to the wrapper.
   The original media query at max-width:900px repositions
   .kc-media-side-panel to relative — we override that here.
   ═══════════════════════════════════════════════════════════════ */

/* Ensure wrapper scales from top-left corner */
#keycoach-wrapper.kc-scaled {
    transform-origin: top left !important;
    overflow: visible !important;
}

/* Keep left panel inside the wrapper when scaled.
   Overrides the max-width:900px rule that sets position:relative */
#keycoach-wrapper.kc-scaled .kc-media-side-panel {
    position: absolute !important;
    left: 5px !important;
    right: auto !important;
    top: 20px !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin-bottom: 0 !important;
    z-index: 5000;
}

/* Keep right floating panel inside the wrapper when scaled */
#keycoach-wrapper.kc-scaled .kc-floating-right {
    position: absolute !important;
    right: 5px !important;
    left: auto !important;
    top: 20px !important;
    z-index: 5000;
}

/* Touch: remove tap highlight, disable default touch pan on piano */
#keycoach-wrapper.kc-scaled .kc-piano {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
.kc-key {
    -webkit-tap-highlight-color: transparent;
}

/* ══════════════════════════════════════════
   PORTRAIT ORIENTATION WARNING
   ══════════════════════════════════════════ */
#kc-portrait-warn {
    display: none;
    position: fixed;
    inset: 0;
    background: #1a1a1a;
    z-index: 2147483647;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 18px;
    text-align: center;
    padding: 30px;
    box-sizing: border-box;
}
#kc-portrait-warn .kc-pw-icon {
    font-size: 3.5rem;
    animation: kc-pw-spin 2.5s ease-in-out infinite;
}
@keyframes kc-pw-spin {
    0%, 40%, 100% { transform: rotate(0deg); }
    60%, 80%      { transform: rotate(90deg); }
}
#kc-portrait-warn .kc-pw-text {
    color: #ccc;
    font-size: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 270px;
    line-height: 1.5;
    margin: 0;
}
#kc-portrait-warn .kc-pw-hint {
    color: #4caf50;
    font-size: 0.85rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
}
@media screen and (orientation: portrait) and (max-width: 1024px) {
    #kc-portrait-warn { display: flex !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE UI PATCH — Complete Touch-Aware Layout Adjustments
   ═══════════════════════════════════════════════════════════════ */

/* All Touch Devices (Tablets and Mobile Phones) */
@media (hover: none) and (pointer: coarse) {
    #kc-midi-record-btn,
    #kc-record-btn,
    #kc-btn-recordings,
    .kc-metronome-container {
        display: none !important;
    }
    
    /* Resize brand font, but ignore if wrapper is in fullscreen mode */
    #keycoach-wrapper:not(.jo-is-fullscreen) .kc-title-label {
        font-size: 1.05rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
}

/* Tablets ONLY (True touch devices >= 768px) */
@media (hover: none) and (pointer: coarse) and (min-width: 768px) {
    /* Raise the virtual keyboard using margin so we don't alter the 100vh wrapper bounds */
    #keycoach-wrapper.jo-is-fullscreen #kc-piano-wrapper {
        margin-bottom: 55px !important;
    }
    /* Shift the media stage up to safely clear the raised keyboard & labels */
    #keycoach-wrapper.jo-is-fullscreen .kc-media-stage {
        bottom: 335px !important; 
    }
}

/* Mobile Phones ONLY (True touch devices <= 767px) */
@media (hover: none) and (pointer: coarse) and (max-width: 767px) {
    #kc-fullscreen-toggle {
        display: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   THE MASTER PATCH — Layout Restoration, Preloader & PC Fullscreen
   ═══════════════════════════════════════════════════════════════ */

/* 🔥 FIX 1: Prevent height jump on PC/Desktop by forcing absolute positioning 
             ONLY while the preloader exists. Once the loader is gone, this CSS 
             turns off, letting PC Fullscreen work perfectly! */
@media screen and (min-width: 901px) {
    #keycoach-wrapper:has(#kc-preloader) #kc-record-buttons-wrap {
        position: absolute !important;
        right: -70px !important;
        top: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        z-index: 100 !important;
    }
}

/* 🔥 FIX 2: Hide floating buttons globally while the loading screen is active */
#keycoach-wrapper:has(#kc-preloader) .kc-media-side-panel,
#keycoach-wrapper:has(#kc-preloader) .kc-floating-right,
#keycoach-wrapper:has(#kc-preloader) #kc-record-buttons-wrap {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 🔥 FIX 3: Shrink the MIDI dropdown in normal mode to prevent Flexbox wrapping online */
#keycoach-wrapper:not(.jo-is-fullscreen) #kc-midi-device {
    min-width: 0 !important;   /* Overrides the hardcoded 130px */
    width: 90px !important;    /* Saves 40px of horizontal space */
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* 
  Target 1: Standard phones in portrait (< 768px)
  Target 2: Giant phones in landscape (Up to 1000px wide, 600px tall).
*/
@media screen and (max-width: 767px), 
       screen and (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) {
       
    /* FIX (empty dead-space bug): the earlier approach used transform:scale()
       combined with artificially widened boxes (960px design width, 250% toolbar
       width) to visually shrink content. Browsers reserve the PRE-transform box
       size for layout/overflow purposes even though it paints smaller — that
       reserved-but-invisible width is exactly the empty space that was pushing
       the layout. Replaced entirely with plain flexbox sizing below, which has
       no such dead space because it actually resizes the real layout box.
       #keycoach-wrapper becomes a fixed-height flex column: the toolbar (button
       row + LCD) takes whatever height it needs up to the remaining space, and
       the virtual keyboard is pinned to exactly half the visual height, per your
       request. If the toolbar's own content is still taller than the space left
       over, it scrolls internally (never the page), so the keyboard stays fully
       visible and reachable without any page-level scroll. */
    #keycoach-wrapper {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }
    #keycoach-wrapper .kc-toolbar {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        margin-bottom: 4px !important;
        /* FIX (toolbar scrollbar): --kc-tb-scale is computed and updated live by
           JS (kcFitMobileToolbar), which measures the toolbar's actual natural
           content height against the real space left over after the keyboard's
           50%, and dynamically shrinks these values just enough to make it fit —
           instead of a fixed guess that may not fit every device/content state
           (e.g. more instrument rows, longer labels, different font rendering).
           Defaults to 1 (no shrink) until JS runs. */
        padding: calc(6px * var(--kc-tb-scale, 1)) calc(8px * var(--kc-tb-scale, 1)) !important;
        /* Scrollbar hidden visually as a safety net only — the JS fit routine
           is what actually prevents needing it in normal use. */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    #keycoach-wrapper .kc-toolbar::-webkit-scrollbar { display: none !important; }
    #keycoach-wrapper .kc-toolbar .kc-row {
        gap: calc(6px * var(--kc-tb-scale, 1)) !important;
        margin-bottom: calc(5px * var(--kc-tb-scale, 1)) !important;
        row-gap: calc(4px * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-lcd-meta {
        line-height: 1 !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-lcd-num,
    #keycoach-wrapper .kc-toolbar .kc-lcd-select,
    #keycoach-wrapper .kc-toolbar .kc-lcd-select-small,
    #keycoach-wrapper .kc-toolbar .kc-lcd-btn {
        padding: calc(2px * var(--kc-tb-scale, 1)) calc(4px * var(--kc-tb-scale, 1)) !important;
        font-size: calc(0.68rem * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-label {
        font-size: calc(0.62rem * var(--kc-tb-scale, 1)) !important;
    }
    /* FIX (still need to scroll): these elements — the engine/preset dropdowns
       and the whole info bar (chord readout, sustain pill, MIDI status) — were
       not covered by --kc-tb-scale at all, so they stayed full-size (the chord
       readout alone is 1.5rem) no matter how much the fit routine shrank
       everything else, silently defeating the fit calculation. Now included. */
    #keycoach-wrapper .kc-toolbar .kc-select,
    #keycoach-wrapper .kc-toolbar .kc-select-small {
        padding: calc(3px * var(--kc-tb-scale, 1)) calc(6px * var(--kc-tb-scale, 1)) !important;
        font-size: calc(0.7rem * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-info-bar {
        padding-top: calc(6px * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-chord-box {
        gap: calc(6px * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-chord-text {
        font-size: calc(1rem * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-status-box {
        font-size: calc(0.68rem * var(--kc-tb-scale, 1)) !important;
        gap: calc(6px * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-pill {
        padding: calc(1px * var(--kc-tb-scale, 1)) calc(4px * var(--kc-tb-scale, 1)) !important;
        font-size: calc(0.6rem * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper #kc-piano-wrapper {
        flex: 0 0 var(--kc-piano-pct, 50%) !important;
        height: var(--kc-piano-pct, 50%) !important;
        max-height: var(--kc-piano-pct, 50%) !important;
        min-height: 0 !important;
    }
    #keycoach-wrapper #kc-piano-wrapper .kc-piano {
        height: 100% !important;
        max-height: 100% !important;
    }
    /* FIX (floating buttons overlap): restores the coach-mode-driven width
       behavior from the desktop layout — Coach Mode OFF (buttons hidden,
       .kc-coach-mode class present) stretches content full width; Coach Mode ON
       (buttons revealed, class absent) reserves a side gutter on the toolbar and
       keyboard so the floating side panels sit in that empty space instead of
       covering the content. This had been dropped entirely when the mobile
       layout was rebuilt as flexbox — restoring it here, sized for the actual
       ~40px-wide mobile floating buttons plus a small margin. */
    #keycoach-wrapper:not(.kc-coach-mode) .kc-toolbar {
        margin-left: 46px !important;
        margin-right: 46px !important;
    }
    /* FIX (keyboard not shrinking): #kc-piano-wrapper has an explicit width:100%
       set elsewhere in the stylesheet — margins alone don't reduce an explicitly
       set width (that override only works for auto-width boxes), so the toolbar
       shrank correctly but the keyboard kept spilling under the floating
       buttons. Using calc() to explicitly compute the reduced width fixes it. */
    #keycoach-wrapper:not(.kc-coach-mode) #kc-piano-wrapper {
        width: calc(100% - 92px) !important;
        margin-left: 46px !important;
        margin-right: 46px !important;
    }
    /* Keep the floating side panels safely inside the visible wrapper bounds
       (they used to be pushed to left:-60px/right:-60px, or default to -70px,
       off-screen). Note: on true phone widths, existing JS logic embeds the
       right-side buttons inline inside the toolbar itself (no .kc-floating-right
       class in that case) — so we only force absolute positioning here for the
       genuine floating case (the class is present), leaving the inline-embedded
       case exactly as the JS intends it. */
    #keycoach-wrapper .kc-media-side-panel {
        position: absolute !important;
        left: 5px !important;
        top: 8px !important;
    }
    #keycoach-wrapper .kc-floating-right {
        position: absolute !important;
        right: 5px !important;
        top: 8px !important;
    }

    /* Hide Help and Fullscreen UI strictly on mobile */
    #kc-help-btn, .kc-help-btn, .kc-btn-help,
    #kc-fullscreen-btn, .kc-fullscreen-btn, .kc-btn-fullscreen,
    [data-action="fullscreen"], [data-target="help"] {
        display: none !important;
    }

    /* Kill the horizontal scrolling void */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* FIX (mobile scroll): the LCD's added color-category dropdown pushed the
       whole LCD panel taller, which pushed the keyboard below the fold on short
       mobile screens. Shrink it to a ~4-character closed width — the browser's
       native option list still shows the full label when it's opened, so nothing
       is lost, it just doesn't eat horizontal/vertical space while closed. */
    #kc-color-category {
        width: 44px !important;
        min-width: 0 !important;
        padding-left: 4px !important;
        padding-right: 14px !important;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    /* FIX (mobile scroll): the LCD's TEMPO/BPM readout isn't essential on a
       phone-sized screen and its vertical space directly contributes to the
       keyboard being pushed down — hide it on mobile only. */
    #kc-lcd-tempo-group {
        display: none !important;
    }

    /* FIX (button size): 70% of the ORIGINAL desktop size (55px/40px/etc.), not
       70% of the previous half-size mobile pass — that was too small to use. */
    .kc-btn-side {
        width: 39px !important;
        padding: 7px 4px !important;
        font-size: 0.53rem !important;
        line-height: 0.85 !important;
        border-radius: 6px !important;
    }
    .kc-btn-circle {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.77rem !important;
    }
    #kc-record-buttons-wrap .kc-btn,
    #kc-record-buttons-wrap .kc-btn-mini {
        padding: 2px 6px !important;
        font-size: 0.5rem !important;
    }

    /* FIX (LCD section too tall on mobile): the LCD console's own padding,
       gaps and font sizes were fixed values, completely untouched by the
       --kc-tb-scale fit routine above — so no matter how much everything
       else shrank, the LCD kept its full desktop-sized spacing and text,
       staying tall enough to push the Chord/Sustain info row below the
       fold and force a scroll. Wiring every LCD spacing/font value to the
       same --kc-tb-scale variable lets kcFitMobileToolbar's measurement
       actually shrink the LCD like the rest of the toolbar, so the fit
       routine can succeed by compressing the toolbar alone (its intended
       first choice) instead of falling back to shrinking the keyboard —
       and the Chord/Sustain row ends up visible without scrolling. */
    #keycoach-wrapper .kc-toolbar .kc-lcd-unit {
        padding: calc(8px * var(--kc-tb-scale, 1)) !important;
        gap: calc(8px * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-lcd-panel {
        padding: calc(6px * var(--kc-tb-scale, 1)) calc(8px * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-lcd-toprow {
        gap: calc(6px * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-lcd-brand {
        font-size: calc(0.5rem * var(--kc-tb-scale, 1)) !important;
        margin-bottom: calc(2px * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-lcd-voice-select {
        font-size: calc(0.95rem * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-lcd-status,
    #keycoach-wrapper .kc-toolbar .kc-lcd-inline-label {
        font-size: calc(0.58rem * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-lcd-sub-row {
        margin-top: calc(3px * var(--kc-tb-scale, 1)) !important;
        gap: calc(6px * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-lcd-icons {
        font-size: calc(0.62rem * var(--kc-tb-scale, 1)) !important;
        gap: calc(4px * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-lcd-divider {
        margin: calc(4px * var(--kc-tb-scale, 1)) 0 !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-lcd-meta-row {
        gap: calc(4px * var(--kc-tb-scale, 1)) calc(8px * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-lcd-meta .val {
        font-size: calc(0.85rem * var(--kc-tb-scale, 1)) !important;
        gap: calc(4px * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-lcd-meta .lab {
        font-size: calc(0.52rem * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-lcd-side {
        gap: calc(5px * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-lcd-bpm-row {
        gap: calc(3px * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-lcd-bpm-row label {
        font-size: calc(0.6rem * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-lcd-input-group {
        margin-top: calc(1px * var(--kc-tb-scale, 1)) !important;
        gap: calc(5px * var(--kc-tb-scale, 1)) !important;
    }
    #keycoach-wrapper .kc-toolbar .kc-lcd-input-group label {
        font-size: calc(0.6rem * var(--kc-tb-scale, 1)) !important;
    }
}

/* MIDI AB status line */

/* A-B repeat row containers — display controlled by .hidden class only */

/* ── A-B Repeat inline buttons ─────────────────────────────────────── */
.kc-ab-btn-inline{font-size:0.72rem;font-weight:900;letter-spacing:0.04em;width:34px;height:34px;border-radius:50%;transition:all 0.15s;}
.kc-ab-btn-inline.kc-ab-set-a{background:#1565c0;border-color:#1565c0;color:#fff;box-shadow:0 0 8px rgba(21,101,192,0.7);}
.kc-ab-btn-inline.kc-ab-set-b{background:#e65100;border-color:#e65100;color:#fff;box-shadow:0 0 8px rgba(230,81,0,0.7);}
.kc-ab-btn-inline.kc-ab-looping{background:#00897b;border-color:#00897b;color:#fff;box-shadow:0 0 10px rgba(0,137,123,0.8);animation:kcAbPulse 1.4s ease-in-out infinite;}
@keyframes kcAbPulse{0%,100%{box-shadow:0 0 8px rgba(0,137,123,0.6);}50%{box-shadow:0 0 16px rgba(0,137,123,1);}}
/* Video AB overlay — absolute over bottom-left of kc-player-box, zero layout height */
.kc-video-ab-bar{position:absolute;top:38px;left:10px;z-index:20;display:flex;flex-direction:column;align-items:flex-start;gap:4px;pointer-events:none;}
.kc-video-ab-bar.hidden{display:none !important;}
/* Suppress native video controls flash during AB-repeat seek */
#kc-main-media-player.kc-ab-seeking::-webkit-media-controls{display:none !important;}
#kc-main-media-player.kc-ab-seeking{pointer-events:none;}
/* Toggle pill — always visible when overlay is shown, fades like other overlays */
.kc-ab-video-toggle-pill{pointer-events:all;background:rgba(0,0,0,0.55);border:1px solid rgba(255,255,255,0.18);color:#ccc;border-radius:10px;padding:2px 8px;font-size:0.68rem;font-weight:700;letter-spacing:0.05em;cursor:pointer;opacity:0.25;transition:opacity 0.25s,background 0.2s;line-height:1.6;}
#kc-player-box:hover .kc-ab-video-toggle-pill{opacity:1;}
.kc-ab-video-toggle-pill.kc-ab-collapsed{background:rgba(0,0,0,0.4);color:#888;}
/* Buttons panel — pointer-events re-enabled */
.kc-ab-video-btns{pointer-events:all;display:flex;align-items:center;gap:6px;background:rgba(0,0,0,0.52);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:4px 8px;backdrop-filter:blur(4px);opacity:0.25;transition:opacity 0.25s;}
#kc-player-box:hover .kc-ab-video-btns{opacity:1;}
/* UI-hide toggle hides the whole overlay (same pattern as kc-fit-controls etc.) */
.kc-media-stage.jo-hide-media-controls .kc-video-ab-bar{display:none !important;}
.kc-ab-status-text{font-size:0.68rem;font-family:monospace;color:#ccc;letter-spacing:0.04em;min-width:64px;}
/* ── Camera Picker Context Menu ── */
.kc-cam-context-menu{position:fixed;z-index:2147483645;background:#2a2a2a;border:1px solid #555;border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,0.7);min-width:180px;overflow:hidden;animation:kcCtxFadeIn 0.15s ease;}
@keyframes kcCtxFadeIn{from{opacity:0;transform:scale(0.95);}to{opacity:1;transform:scale(1);}}
.kc-cam-context-menu ul{list-style:none;margin:0;padding:6px 0;}
.kc-cam-context-menu ul li{padding:10px 18px;color:#ddd;font-size:0.88rem;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background 0.15s,color 0.15s;}
.kc-cam-context-menu ul li:hover{background:#3a3a3a;color:#fff;}
.kc-cam-context-menu ul li:active{background:#444;}
/* ── Media Box Context Menu (right-click on a media stage box: Pin/Unpin, Remove) ── */
.kc-box-context-menu{position:fixed;z-index:2147483645;background:#2a2a2a;border:1px solid #555;border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,0.7);min-width:170px;overflow:hidden;animation:kcCtxFadeIn 0.15s ease;}
.kc-box-context-menu.hidden{display:none !important;}
.kc-box-context-menu ul{list-style:none;margin:0;padding:6px 0;}
.kc-box-context-menu ul li{padding:10px 18px;color:#ddd;font-size:0.88rem;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background 0.15s,color 0.15s;}
.kc-box-context-menu ul li:hover{background:#3a3a3a;color:#fff;}
.kc-box-context-menu ul li:active{background:#444;}
.kc-box-context-menu ul li[data-action="remove"]:hover{background:#4a2222;color:#ff8080;}
/* Pinned-box indicator — sits beside the existing drag-handle icon so it doesn't
   collide with the align/fit/font controls already anchored in the other corners. */
.kc-media-box.kc-box-pinned::after{content:'📌';position:absolute;top:8px;left:34px;font-size:0.95rem;z-index:26;opacity:0.85;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.6));}
/* Pinned boxes keep their locked size/position — visually and functionally disable the resize handle. */
.kc-media-box.kc-box-pinned .kc-box-resize-handle{opacity:0.2;cursor:not-allowed;pointer-events:none;}
/* ── Webcam Canvas (chroma-key output) ── */
#kc-webcam-canvas{width:100%;height:100%;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,0.5);display:block;object-fit:cover;}
#kc-webcam-canvas.kc-legacy-cam{width:auto !important;aspect-ratio:1/1;}
/* ── Green Screen Controls Panel ── */
.kc-gs-controls{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;z-index:20;background:rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.12);border-radius:20px;padding:4px 10px;backdrop-filter:blur(6px);opacity:0;transition:opacity 0.25s;pointer-events:none;white-space:nowrap;}
#kc-webcam-box:hover .kc-gs-controls{opacity:1;pointer-events:all;}
.kc-gs-controls.kc-gs-active{border-color:rgba(0,200,80,0.5);box-shadow:0 0 10px rgba(0,200,80,0.2);}
.kc-gs-toggle-btn{background:transparent;border:1px solid rgba(255,255,255,0.2);color:#ccc;border-radius:14px;padding:3px 10px;font-size:0.75rem;font-weight:700;cursor:pointer;transition:all 0.18s;letter-spacing:0.03em;}
.kc-gs-toggle-btn:hover{background:rgba(255,255,255,0.12);color:#fff;}
.kc-gs-toggle-btn.active{background:rgba(0,200,80,0.25);border-color:#00c850;color:#00e064;}
.kc-gs-sep{width:1px;height:18px;background:rgba(255,255,255,0.18);margin:0 2px;}
.kc-gs-label{display:flex;align-items:center;gap:4px;color:#bbb;font-size:0.72rem;cursor:pointer;}
.kc-gs-label input[type="color"]{width:22px;height:22px;border:none;border-radius:50%;padding:0;cursor:pointer;background:none;outline:none;}
.kc-gs-slider{-webkit-appearance:none;appearance:none;width:60px;height:4px;border-radius:2px;background:rgba(255,255,255,0.2);outline:none;cursor:pointer;}
.kc-gs-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#4caf50;cursor:pointer;}
.kc-gs-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#4caf50;border:none;cursor:pointer;}
/* ── Green Screen Background Panel ── */
.kc-gs-bg-panel{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:30;background:rgba(18,18,18,0.97);border:1px solid rgba(255,255,255,0.14);border-radius:14px;padding:12px 14px 10px;backdrop-filter:blur(10px);box-shadow:0 8px 32px rgba(0,0,0,0.7);min-width:240px;max-width:320px;width:max-content;}
.kc-gs-bg-panel.hidden{display:none !important;}
.kc-gs-bg-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:#ddd;font-size:0.78rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;}
.kc-gs-bg-close{background:transparent;border:none;color:#888;font-size:1rem;cursor:pointer;line-height:1;padding:0 2px;transition:color 0.15s;}.kc-gs-bg-close:hover{color:#fff;}
.kc-gs-bg-swatches{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px;}
.kc-gs-bg-swatch{width:26px;height:26px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:border-color 0.15s,transform 0.12s;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:0.85rem;}
.kc-gs-bg-swatch:hover{transform:scale(1.15);border-color:rgba(255,255,255,0.5);}
.kc-gs-bg-swatch.active{border-color:#4caf50 !important;box-shadow:0 0 0 2px rgba(76,175,80,0.4);}
.kc-gs-bg-transparent{background:repeating-conic-gradient(#555 0% 25%,#333 0% 50%) 0 0/10px 10px;font-size:0.6rem;}
.kc-gs-bg-custom-color{background:linear-gradient(135deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f);position:relative;overflow:hidden;cursor:pointer;}
.kc-gs-bg-custom-color input[type="color"]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:none;padding:0;}
.kc-gs-bg-image-row{display:flex;gap:8px;margin-bottom:10px;}
.kc-gs-bg-img-btn{flex:1;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.15);color:#ccc;border-radius:8px;padding:5px 8px;font-size:0.75rem;cursor:pointer;text-align:center;transition:background 0.15s,color 0.15s;display:flex;align-items:center;justify-content:center;gap:4px;}
.kc-gs-bg-img-btn:hover{background:rgba(255,255,255,0.15);color:#fff;}
.kc-gs-bg-preview{width:100%;height:50px;border-radius:8px;background:repeating-conic-gradient(#444 0% 25%,#2a2a2a 0% 50%) 0 0/12px 12px;border:1px solid rgba(255,255,255,0.1);overflow:hidden;position:relative;}
.kc-gs-bg-preview-img{width:100%;height:100%;object-fit:cover;display:block;}

/* ── NEW RESIZE HANDLES ────────────────────────────────────────────── */
.kc-box-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    z-index: 40;
    background: transparent;
    border-right: 2px solid rgba(255,255,255,0.25);
    border-bottom: 2px solid rgba(255,255,255,0.25);
    border-radius: 0 0 4px 0;
    pointer-events: all;
    transition: border-color 0.2s, background 0.2s;
}
.kc-media-box:hover .kc-box-resize-handle {
    border-color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.05);
}

#kc-stage-resize-handle {
    position: absolute;
    bottom: -6px;
    left: 5%;
    right: 5%;
    height: 8px;
    cursor: ns-resize;
    z-index: 60;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    transition: background 0.2s, height 0.2s;
}
#kc-stage-resize-handle:hover {
    background: rgba(255,255,255,0.2);
    height: 12px;
    bottom: -8px;
}

/* ═══════════════════════════════════════════════════════════════
   PATCH: Normal-mode stage minimum height = 20vh
   Prevents the resize handle from shrinking the media stage below
   20% of the viewport height in non-fullscreen mode.
   The JS drag clamp is the primary guard; this CSS is a belt-and-
   suspenders fallback that covers any edge case (CSS transitions,
   saved values from older sessions, etc.)
   ═══════════════════════════════════════════════════════════════ */
#keycoach-wrapper:not(.jo-is-fullscreen) .kc-media-stage:not(.hidden):not(.hidden-stage-override) {
    min-height: 20vh !important;
}

/* ═══════════════════════════════════════════════════════════════
   PATCH: Hard overflow guard — media boxes must never escape the
   stage container edge, regardless of how widths are computed.
   NOTE: overflow must stay visible on .kc-media-stage so the
   vertical resize handle (positioned at bottom:-6px, outside the
   stage boundary) remains clickable. The JS width clamps are the
   primary guard. We constrain boxes individually instead.
   ═══════════════════════════════════════════════════════════════ */
.kc-media-stage {
    overflow: visible !important;
}
/* Individual boxes: constrain to their parent's inner width so grid
   items can't force the container wider than its own bounds.
   Each box already has overflow:hidden for its own content. */
.kc-media-stage .kc-media-box {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* FIX: gamebox-only — drag/resize handlers were removed in JS (see script.js),
   so its drag-handle icon is now inert and hidden here; this rule targets
   #kc-game-box exclusively and does not affect any other media box. */
#kc-game-box > .kc-drag-handle{display:none !important;}
/* FIX: gamebox must never stretch beyond the media stage container while toggled on.
   Hard-clamp width/height to the stage's own box regardless of any inline
   width/height a stray script or legacy resize state may try to apply. */
#kc-game-box{max-width:100% !important;max-height:100% !important;box-sizing:border-box !important;}
/* FIX: gamebox-only, belt-and-suspenders — force-hide the corner resize handle
   inside the gamebox at the CSS layer too (JS already never creates it there),
   so it can never be dragged/visible regardless of DOM/timing edge cases. */
#kc-game-box .kc-box-resize-handle{display:none !important;pointer-events:none !important;}

/* ═══════════════════════════════════════════════════════════════
   PATCH: Fullscreen piano – ensure default height is restored when
   no media box is present (all toggled off). Reinforces the JS
   resetFullscreenPianoToDefault() call by anchoring the CSS floor.
   ═══════════════════════════════════════════════════════════════ */
#keycoach-wrapper.jo-is-fullscreen:not(.kc-stage-custom-height) .kc-piano {
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
}

/* ═══════════════════════════════════════════════════════════════
   KEYCOACH LCD CONSOLE — hardware-style Voice/Metronome unit
   Replaces the old plain dropdown-row toolbar for Voice + Metronome.
   All functional element IDs (kc-sampler-preset, kc-engine-select,
   kc-inst-vol, kc-metro-toggle, kc-metro-bpm, kc-metro-vol,
   kc-metro-sig, kc-color-preset, kc-custom-color, kc-key-signature,
   kc-size-select, kc-midi-device, kc-midi-learn-btn, kc-midi-reset-btn)
   are unchanged from the base plugin, so all existing script.js logic
   (engine switching, MIDI learn, metronome scheduler, etc.) keeps
   working exactly as before — this section only restyles them.
   ═══════════════════════════════════════════════════════════════ */

.kc-lcd-row-outer{align-items:stretch;}
.kc-lcd-unit{
  width:100%;box-sizing:border-box;margin-top:0;
  background:linear-gradient(#3d3d3d,#262626);
  border:1px solid #111;border-radius:10px;padding:12px;
  display:flex;gap:14px;align-items:stretch;flex-wrap:wrap;
  box-shadow:inset 0 0 0 1px #4a4a4a,0 6px 14px rgba(0,0,0,.4);
}

/* LCD SCREEN */
.kc-lcd-panel{
  position:relative;flex:2 1 380px;min-width:0;box-sizing:border-box;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px 3px),
    linear-gradient(160deg,#9bbd92,#7fa178);
  border:3px solid #1c1c1c;border-radius:4px;
  padding:10px 14px;
  box-shadow:inset 0 0 12px rgba(0,0,0,.45);
  overflow:hidden;
}
.kc-lcd-panel::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px);pointer-events:none;}
.kc-lcd-toprow{display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:1;gap:8px;}
.kc-lcd-voice-wrap{min-width:0;flex:1;}
.kc-lcd-brand{font-family:'Courier New',monospace;font-size:.55rem;font-weight:700;letter-spacing:2px;color:#12210e;opacity:.6;margin-bottom:3px;}
.kc-lcd-voice-select{
  font-family:'Courier New',monospace;font-weight:900;font-size:1.15rem;letter-spacing:.5px;
  color:#0c1709;background:transparent;border:none;border-bottom:2px solid rgba(12,23,9,.35);
  max-width:100%;padding:0 2px 2px 0;cursor:pointer;
}
.kc-lcd-voice-select:focus{outline:none;border-bottom-color:rgba(12,23,9,.7);}
.kc-lcd-status,.kc-lcd-inline-label{font-family:'Courier New',monospace;font-size:.62rem;font-weight:700;color:#12210e;opacity:.85;margin-left:6px;}
.kc-lcd-sub-row{display:flex;align-items:center;gap:8px;margin-top:6px;}
.kc-lcd-icons{display:flex;gap:8px;font-family:'Courier New',monospace;font-size:.68rem;font-weight:700;color:#12210e;flex-shrink:0;align-items:flex-start;}
.kc-lcd-icons span{opacity:.25;transition:.15s;white-space:nowrap;}
.kc-lcd-icons span.on{opacity:1;text-shadow:0 0 3px rgba(12,23,9,.6);}
.kc-lcd-divider{height:2px;background:rgba(12,23,9,.3);margin:8px 0 7px;}
.kc-lcd-meta-row{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1;font-family:'Courier New',monospace;flex-wrap:wrap;gap:6px 14px;}
.kc-lcd-meta{display:flex;flex-direction:column;line-height:1.15;min-width:0;}
.kc-lcd-meta .val{font-weight:900;font-size:1.05rem;color:#0c1709;display:flex;align-items:center;gap:6px;}
.kc-lcd-meta .lab{font-weight:700;font-size:.58rem;letter-spacing:1px;color:#12210e;opacity:.9;white-space:nowrap;}
.kc-lcd-slider{-webkit-appearance:none;width:80px;height:4px;background:rgba(12,23,9,.3);border-radius:2px;outline:none;}
.kc-lcd-slider::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#0c1709;cursor:pointer;}
.kc-lcd-select{
  font-family:'Courier New',monospace;font-weight:700;font-size:.68rem;
  letter-spacing:.3px;color:#0c1709;background:rgba(12,23,9,.08);
  border:1px solid rgba(12,23,9,.35);border-radius:3px;
  padding:2px 4px;cursor:pointer;max-width:100%;
}
.kc-lcd-select:focus{outline:1px solid rgba(12,23,9,.6);}
input[type=color].kc-lcd-color-swatch{
  width:20px;height:20px;padding:0;border:1px solid rgba(12,23,9,.35);
  border-radius:3px;background:transparent;cursor:pointer;flex-shrink:0;
}
/* metronome dashes echoed on the LCD screen next to the tempo readout */
.kc-metro-dashes{display:inline-flex;gap:3px;align-items:center;margin-left:4px;}
.kc-metro-dash{width:7px;height:4px;background:rgba(12,23,9,.2);transition:background .1s;}
.kc-metro-dash.on{background:#0c1709;box-shadow:0 0 4px rgba(12,23,9,.8);}

/* LCD SIDE PANEL — metronome + MIDI input controls */
.kc-lcd-side{
  flex:1 1 250px;min-width:220px;box-sizing:border-box;
  display:flex;flex-direction:column;gap:8px;justify-content:center;
}
.kc-lcd-btn{
  background:#3a3a3a;border:1px solid #555;color:#ddd;
  border-radius:5px;padding:8px 10px;font-size:.78rem;font-weight:600;
  cursor:pointer;display:flex;align-items:center;
  font-family:-apple-system,sans-serif;
}
.kc-lcd-btn:hover{background:#484848;}
.kc-lcd-metro-btn.kc-btn-active{background:var(--active-color);color:#fff;border-color:var(--active-color);}
.kc-lcd-bpm-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.kc-lcd-bpm-row label{font-size:.68rem;color:#aaa;white-space:nowrap;}
.kc-lcd-num{background:#333;border:1px solid #444;color:#fff;padding:4px;width:46px;border-radius:4px;font-size:.78rem;}
.kc-lcd-select-small{padding:4px 5px;border-radius:4px;border:1px solid #444;background:#333;color:#fff;font-size:.72rem;cursor:pointer;}
.kc-lcd-input-group{display:flex;align-items:center;gap:8px;margin-top:2px;}
.kc-lcd-input-group label{font-weight:600;font-size:.7rem;color:#aaa;text-transform:uppercase;letter-spacing:.5px;}
.kc-lcd-input-group .kc-input-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

@media(max-width:900px){
  .kc-lcd-unit{flex-direction:column;}
  .kc-lcd-side{min-width:0;}
}

/* ── FULLSCREEN: keep the LCD console the same connected, hardware-style
   unit — never a detached/floating block — and let it stretch to fill
   the available toolbar width with no internal scrollbars. ── */
#keycoach-wrapper.jo-is-fullscreen .kc-toolbar{overflow:visible;}
#keycoach-wrapper.jo-is-fullscreen #kc-row-controls{margin-bottom:14px;}
#keycoach-wrapper.jo-is-fullscreen .kc-lcd-row-outer{width:100%;}
#keycoach-wrapper.jo-is-fullscreen .kc-lcd-unit{
  width:100%;flex-wrap:nowrap;margin-top:0;
}
#keycoach-wrapper.jo-is-fullscreen .kc-lcd-panel{flex:3 1 0%;}
#keycoach-wrapper.jo-is-fullscreen .kc-lcd-side{flex:1 1 280px;min-width:240px;}
#keycoach-wrapper.jo-is-fullscreen .kc-lcd-voice-select{font-size:1.3rem;}
@media(max-width:1024px){
  #keycoach-wrapper.jo-is-fullscreen .kc-lcd-unit{flex-wrap:wrap;}
}

/* ═══════════════════════════════════════════════════════════════
   LCD CONSOLE — round 2 refinements
   ═══════════════════════════════════════════════════════════════ */

/* Icon-only Sound toggle, sitting next to the Fullscreen button */
.kc-btn-icon{
  width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center;
  border-radius:6px;
}
.kc-btn-icon::before{content:'🔊';font-size:1.05rem;line-height:1;}
.kc-btn-icon.muted{background:#4a2222;}
.kc-btn-icon.muted::before{content:'🔇';}

/* Ready/Loading status text is often the same green as the LCD screen —
   give it a dark pill background so it stays legible in every state. */
.kc-lcd-status{
  background:rgba(12,23,9,.85);color:#bff2a8 !important;
  padding:1px 5px;border-radius:3px;display:inline-block;
}

/* Vol1 / Vol2 share one physical slot in the meta row (only one shown at a time) */
.kc-lcd-vol-slot{order:2;}

/* Widen the Key Size dropdown so option text never truncates; label sits
   directly beneath it. */
.kc-lcd-size-select{width:84px;}

/* Keep MIDI Learn + Reset on the same row as the Input dropdown — never wrap below */
.kc-lcd-input-group{flex-wrap:nowrap;}
.kc-lcd-input-group .kc-input-controls{flex-wrap:nowrap;flex-direction:row !important;align-items:center;}
.kc-lcd-midi-select{flex:1 1 auto;min-width:0;width:auto;}
.kc-midi-learn-wrapper{display:flex;gap:5px;flex-shrink:0;}
.kc-btn-mini{white-space:nowrap;flex-shrink:0;}

/* ── FULLSCREEN: put the LCD console side-by-side with the MIDI/REC/Sound/
   Fullscreen cluster instead of stacking it full-width underneath. ── */
#keycoach-wrapper.jo-is-fullscreen .kc-toggle-wrapper{
  position:static !important;top:auto !important;right:auto !important;margin-left:0 !important;
  width:100%;display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:10px;
}
#keycoach-wrapper.jo-is-fullscreen #kc-primary-controls-container{
  display:flex;flex-direction:column;gap:10px;
}
#keycoach-wrapper.jo-is-fullscreen #kc-row-controls{
  margin-bottom:0;width:100%;
}
#keycoach-wrapper.jo-is-fullscreen .kc-lcd-row-outer{
  width:100%;margin-bottom:0;
}
#keycoach-wrapper.jo-is-fullscreen .kc-lcd-unit{width:100%;}

/* ═══════════════════════════════════════════════════════════════
   LCD CONSOLE — round 3 refinements
   ═══════════════════════════════════════════════════════════════ */

/* Sound toggle now lives inside the LCD screen's icon strip (both modes).
   .kc-lcd-icons is a COLUMN with two stacked rows: the SND/LRN/MIDI status
   row on top, and the sound-toggle icon underneath it — right-aligned so
   the toggle sits directly below the last status label (MIDI). */
.kc-lcd-icons{flex-direction:column;align-items:flex-end;gap:6px;}
.kc-lcd-icons #kc-sound-toggle-wrapper{margin-top:2px;}
.kc-lcd-icons #kc-sound-toggle{width:26px;height:26px;}
.kc-lcd-icons .kc-btn-icon::before{font-size:.85rem;}

/* SND / LRN / MIDI status text: always one horizontal row, never wraps
   onto separate lines regardless of viewport width or fullscreen mode. */
.kc-lcd-status-row{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:8px;}

/* MIDI input dropdown needs real contrast against the dark side panel —
   the light LCD-screen select styling was unreadable here. */
.kc-lcd-select.kc-lcd-midi-select{background:#333;color:#fff;border:1px solid #555;}
.kc-lcd-select.kc-lcd-midi-select:focus{outline:1px solid #0073aa;}

/* Fullscreen: tighten the gap under the top media-stage buttons */
#keycoach-wrapper.jo-is-fullscreen .kc-toolbar{padding-top:80px;}

/* Fullscreen: REC/MIDI/KEYS row shares the row with the Fullscreen
   toggle, which stays pinned to the outermost right edge; buttons shrunk
   down so the whole cluster stays compact. */
#keycoach-wrapper.jo-is-fullscreen #kc-record-buttons-wrap{
  position:absolute;top:15px;right:20px;z-index:1000000;
}

/* Fullscreen: Factory Reset is intentionally hidden here to keep the
   fullscreen toolbar compact/distraction-free — still available in
   normal (non-fullscreen) and mobile layouts. */
#keycoach-wrapper.jo-is-fullscreen #kc-reset-app-btn{display:none !important;}

/* Normal mode: Fullscreen toggle shares its row with the Metronome button
   inside the LCD side panel, pinned to the outer right edge. */
#kc-lcd-metro-toprow{display:flex;align-items:center;gap:8px;}
#kc-lcd-metro-toprow #kc-metro-toggle{flex:1 1 auto;}
#kc-lcd-metro-toprow #kc-fullscreen-toggle{flex-shrink:0;margin-left:auto;}

/* BPM number field — widen so the value is never clipped */
.kc-lcd-num{width:60px;}

/* ═══════════════════════════════════════════════════════════════
   COACH MODE — one-click hide/reveal of the left & right floating
   side-button clusters (.kc-media-side-panel and #kc-record-buttons-wrap
   ONLY). Everything else — LCD console, piano, toolbar rows — is left
   completely alone; it simply gets to use whatever width the hidden
   panels free up.
   ═══════════════════════════════════════════════════════════════ */
.kc-coach-toggle-btn{flex:1 1 90px;}
.kc-coach-toggle-btn.active{background:var(--kc-color-buttons) !important;color:#fff !important;border-color:var(--kc-color-buttons) !important;animation:none !important;}

#keycoach-wrapper.kc-coach-mode .kc-media-side-panel,
#keycoach-wrapper.kc-coach-mode #kc-record-buttons-wrap{
  display:none !important;
}

/* Normal (embedded) mode: when the plugin sits inside a narrow theme
   container, kcEnsurePanelsInView() reserves extra gutter padding
   (83px) on #keycoach-wrapper so the floating side buttons don't get
   clipped. Those buttons are hidden in Coach Mode, so that reserved
   gutter is released here — the keyboard/toolbar/LCD stretch to fill
   the freed-up width. Reverting Coach Mode simply removes this
   override, restoring the default reserved width automatically. */
#keycoach-wrapper.kc-coach-mode[data-kc-padding-fixed]{padding-left:20px !important;}
#keycoach-wrapper.kc-coach-mode[data-kc-padding-fixed-right]{padding-right:20px !important;}