#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:#4caf50;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:20px;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:column;align-items:flex-end;position:relative;gap:5px;}
.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:#28a745 !important;color:white !important;box-shadow:0 0 10px rgba(40,167,69,0.5) !important;border-color:#28a745 !important;}
.kc-btn-side.kc-btn-active{background:#02667f !important;color:white !important;border-color:#02667f !important;box-shadow:0 0 15px rgba(2,102,127,0.6) !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:#02667f !important;color:#fff !important;border-color:#02667f !important;box-shadow:0 0 12px rgba(2,102,127,0.55) !important;}#kc-fullscreen-toggle.kc-btn-fs.jo-fs-active{background:#015a6e !important;box-shadow:0 0 18px rgba(2,102,127,0.8) !important;}#kc-fullscreen-toggle.kc-btn-fs:hover{background:#017a96 !important;border-color:#017a96 !important;box-shadow:0 0 16px rgba(2,102,127,0.75) !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{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(--active-color);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:8px 4px;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:1.2;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[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:flex;gap:15px;padding:0;background:transparent;border:none;height:200px;transition:all 0.3s ease;margin-bottom:0;}.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{display:none !important;}
.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;flex:1 1 auto;width:auto;min-width:200px;height:100%;box-sizing:border-box;transition:opacity 0.2s,border-color 0.2s;resize:horizontal;}.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);}
.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(--active-color);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);}

/* A-B repeat toggle button */
.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:flex !important;gap:5px !important;}
#keycoach-wrapper.jo-is-fullscreen .kc-media-stage .kc-media-box:not(.hidden){flex:1 1 100% !important;height:100% !important;width:100% !important;max-width:none !important;margin:0 !important;}
/* STATE-DRIVEN UI: Force Media Stage to hide in Fullscreen if no boxes are active */
#keycoach-wrapper.jo-is-fullscreen .kc-media-stage.hidden{display:none !important;}
/* VK MODE SPECIFIC STYLES - STRETCH FIX */
#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 so absolutely-positioned children aren't clipped */
    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) {
       
    /* Forcefully override the JS inline style. */
    #keycoach-wrapper.kc-scaled {
        transform: none !important;
        width: 100% !important;
        height: auto !important; /* Stops the dark container from shrinking */
        margin-bottom: 0 !important;
    }

    /* Clear out the absolute pins so buttons don't overlap keys */
    #keycoach-wrapper.kc-scaled .kc-media-side-panel {
        left: -60px !important;
    }
    
    #keycoach-wrapper.kc-scaled .kc-floating-right,
    #keycoach-wrapper.kc-scaled #kc-record-buttons-wrap {
        right: -60px !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;
    }
}

/* 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;}