/* Hip Hop Drummer — Desktop Studio UI. Copyright (c) 2026 Keith Adler — MIT License */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
:root{--bg-deep:#0d0d12;--bg-surface:#15151c;--bg-raised:#1c1c26;--bg-input:#101018;--border:#28283a;--border-light:#363650;--text-primary:#e0e0ea;--text-secondary:#9090a8;--text-muted:#606078;--text-dim:#404058;--accent-red:#e04848;--accent-blue:#50a0ff;--accent-green:#48cc68;--radius-sm:4px;--radius-md:6px;--mono:'JetBrains Mono',monospace;--sans:'Inter',system-ui,sans-serif}
/* Light theme — applied via .theme-light on body */
body.theme-light{--bg-deep:#f0f0f4;--bg-surface:#ffffff;--bg-raised:#f5f5f8;--bg-input:#eaeaef;--border:#d0d0da;--border-light:#b8b8c8;--text-primary:#1a1a2e;--text-secondary:#4a4a60;--text-muted:#7a7a90;--text-dim:#a0a0b0;--accent-red:#d03030;--accent-blue:#2070e0;--accent-green:#28a048}
body.theme-light .cell.on{color:rgba(255,255,255,.95)}
body.theme-light .cell{color:var(--text-dim)}
body.theme-light .brand span{color:var(--accent-blue)}
body.theme-light .chord-piano-white{background:#e8e8e8;border-color:#bbb}
body.theme-light .chord-piano-black{background:#444;border-color:#333}
body.theme-light .regen-overlay{background:rgba(0,0,0,.4)}
body.theme-light .gen-loading{background:rgba(240,240,244,.8)}
body.theme-light .section-toast{background:rgba(255,255,255,.94);border-color:var(--border)}
body.theme-light .tip-ticker{background:rgba(255,255,255,.94);border-top-color:var(--border)}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-deep);color:var(--text-primary);font-family:var(--sans);font-size:23px;height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#app-wrap{display:flex;flex-direction:column;height:100vh}
.header-bar{display:flex;align-items:center;gap:10px;padding:6px 20px;background:var(--bg-surface);border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}
.brand{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--text-muted);letter-spacing:1.5px;white-space:nowrap;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.brand span{color:#fff}
.brand:hover{color:var(--accent-blue)}
.brand-icon{width:24px;height:24px;border-radius:4px}
.credit{font-family:var(--mono);font-size:13px;color:var(--text-dim);white-space:nowrap;margin-left:auto;letter-spacing:.5px}
.credit-link{color:var(--text-dim);text-decoration:none;transition:color .15s}
.credit-link:hover{color:var(--accent-blue)}
.controls-bar{display:flex;align-items:center;gap:10px;width:100%}
.ctrl-group{display:flex;align-items:center;gap:6px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 10px;height:36px}
.ctrl-label{font-family:var(--mono);font-size:18px;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;font-weight:500}
.ctrl-input{background:transparent;color:var(--accent-blue);border:none;font-family:var(--mono);font-size:19px;font-weight:700;width:36px;text-align:center;outline:none;cursor:pointer}
.ctrl-input-wide{width:auto;max-width:160px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:clip;position:relative}
.ctrl-input-wide .marquee-inner{display:inline-block;animation:marquee-scroll 6s linear infinite;padding-right:2em}
@keyframes marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.btn{background:var(--bg-raised);color:var(--text-secondary);border:1px solid var(--border);padding:0 16px;height:36px;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:1.2px;white-space:nowrap;transition:all .15s ease;display:inline-flex;align-items:center;gap:6px}
.btn:hover{background:var(--border-light);color:#fff;border-color:var(--border-light)}
.btn:active{transform:scale(.97)}
.btn-gen{color:var(--accent-red);border-color:rgba(224,72,72,.3);background:rgba(224,72,72,.06)}
.btn-gen:hover{background:var(--accent-red);color:#fff;border-color:var(--accent-red)}
.btn-play-header{color:#4caf50;border-color:rgba(76,175,80,.3);background:rgba(76,175,80,.06);font-size:14px;padding:0 16px;min-width:90px;letter-spacing:1px}
.btn-play-header:hover{background:#4caf50;color:#fff;border-color:#4caf50}
.btn-play-header.playing{color:var(--accent-red);border-color:rgba(224,72,72,.3);background:rgba(224,72,72,.06)}
.btn-play-header.playing:hover{background:var(--accent-red);color:#fff;border-color:var(--accent-red)}
.btn-play-header:disabled{opacity:0.4;cursor:not-allowed}
.btn:disabled:not(.btn-play-header){opacity:0.25;cursor:not-allowed;pointer-events:none;filter:grayscale(1)}
.btn-export{color:var(--accent-blue);border-color:rgba(80,160,255,.3);background:rgba(80,160,255,.06);margin-left:auto}
.btn-export:hover{background:var(--accent-blue);color:#fff;border-color:var(--accent-blue)}
.btn-prefs{color:var(--text-muted);border-color:var(--border);padding:0 16px;font-size:15px;margin-left:0}
.btn-prefs .prefs-text{display:inline}
.btn-prefs .prefs-icon{display:none}
.btn-prefs:hover{color:#fff;border-color:var(--border-light);background:var(--border)}
.btn-prefs-save{color:var(--accent-green);border-color:rgba(72,204,104,.3);background:rgba(72,204,104,.06)}
.btn-prefs-save:hover{background:var(--accent-green);color:#fff;border-color:var(--accent-green)}
.about-dialog{max-width:520px;max-height:85vh;display:flex;flex-direction:column}
.about-hero{display:flex;align-items:center;gap:16px;padding:20px 20px 12px}
.about-logo{width:64px;height:64px;border-radius:12px}
.about-hero-text{display:flex;flex-direction:column;gap:2px}
.about-app-name{font-family:var(--mono);font-size:22px;font-weight:700;color:#fff;letter-spacing:1px}
.about-app-name span{color:var(--accent-blue)}
.about-version{font-family:var(--mono);font-size:12px;color:var(--text-dim);letter-spacing:1px}
.about-author{font-family:var(--mono);font-size:12px;color:var(--text-muted)}
.about-author a{color:var(--accent-blue);text-decoration:none}
.about-author a:hover{text-decoration:underline}
.about-scroll{flex:1;overflow-y:auto;padding:0 20px 12px;font-size:13px;line-height:1.6;color:var(--text-muted)}
.about-scroll h3{color:#fff;font-size:14px;margin:16px 0 6px;font-family:var(--mono);letter-spacing:0.5px}
.about-scroll p{margin:0 0 10px}
.about-scroll em{color:var(--accent-blue);font-style:normal}
.about-footer{margin-top:16px;padding-top:12px;border-top:1px solid var(--border);font-size:11px;color:var(--text-dim)}
.about-footer a{color:var(--accent-blue);text-decoration:none}
.about-footer a:hover{text-decoration:underline}
.welcome-dialog{max-width:480px}
.welcome-intro{font-family:var(--mono);font-size:13px;color:var(--text-muted);line-height:1.6;padding:0 20px 12px;text-align:center}
.welcome-roles{display:flex;flex-direction:column;gap:8px;padding:0 20px 20px}
.welcome-role{width:100%;justify-content:center;font-size:15px;height:44px;letter-spacing:0.5px}
.welcome-role:hover{background:var(--accent-blue);color:#fff;border-color:var(--accent-blue)}
.role-tips-dialog{max-width:520px;max-height:80vh;display:flex;flex-direction:column}
.prefs-hint{font-family:var(--mono);font-size:11px;color:var(--text-dim);line-height:1.4;padding-top:4px}

.scroll-area{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 16px;overscroll-behavior:none;-webkit-overflow-scrolling:touch}
.section-toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.7);background:rgba(21,21,28,0.94);border:2px solid var(--border-light);border-radius:16px;padding:28px 44px;z-index:200;pointer-events:none;opacity:0;transition:opacity 0.25s ease;backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;gap:14px;min-width:300px;max-height:90vh;overflow-y:auto}
.section-toast.show{opacity:1}
#exportToast.show{pointer-events:auto}
.section-toast.countdown-mode{background:rgba(21,21,28,0.98);border-color:var(--accent-green);min-width:200px;padding:60px;transform:translate(-50%,-50%)}
.countdown-display{font-family:var(--mono);font-size:120px;font-weight:900;color:var(--accent-green);text-shadow:0 0 40px rgba(80,255,160,0.6);animation:countdown-pulse 0.8s ease-out;text-align:center;line-height:1}
@keyframes countdown-pulse{0%{transform:scale(0.5);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.toast-header{font-family:var(--mono);font-size:30px;font-weight:700;color:var(--accent-blue);letter-spacing:3px;text-transform:uppercase;text-shadow:0 0 20px rgba(80,160,255,0.4);white-space:nowrap;text-align:center}
.toast-bars{color:#fff;font-size:16px;font-weight:500;letter-spacing:1px;margin-left:12px;opacity:0.7}
.toast-divider{width:100%;height:1px;background:var(--border-light);margin:6px 0}
.toast-stop-btn{pointer-events:auto;cursor:pointer;font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:1px;color:var(--accent-red);background:rgba(224,72,72,.08);border:1px solid rgba(224,72,72,.3);border-radius:6px;padding:8px 24px;margin-top:10px;transition:all .15s;flex-shrink:0}
.toast-stop-btn:hover{background:var(--accent-red);color:#fff;border-color:var(--accent-red)}
.toast-chords{display:flex;flex-direction:column;gap:10px;width:100%;align-items:center;max-height:60vh;overflow-y:auto}
.chord-toast-item{font-family:var(--mono);font-size:42px;font-weight:600;letter-spacing:1px;color:var(--text-dim);padding:14px 32px;border-radius:12px;border:1px solid transparent;transition:all 0.2s ease;white-space:nowrap;text-align:center;width:100%}
.chord-toast-item.active{color:#fff;background:rgba(80,160,255,0.15);border-color:var(--accent-blue);text-shadow:0 0 12px rgba(80,160,255,0.3)}
.chord-toast-item .chord-fn{font-size:20px;color:var(--text-muted);margin-left:14px;font-weight:400}
.chord-toast-item.active .chord-fn{color:var(--accent-blue)}
.chord-toast-label{display:flex;align-items:baseline;justify-content:center;gap:10px}
.chord-toast-piano{transform:scale(1.0);transform-origin:top center;margin:0;pointer-events:none}
.chord-toast-item:not(.active) .chord-toast-piano{opacity:0.3}
.chord-toast-item:not(.active) .chord-toast-guitar{opacity:0.3}
.toast-tip{font-family:var(--mono);font-size:18px;color:var(--accent-green);text-align:center;padding:4px 8px;font-style:italic;line-height:1.5}
.tip-ticker{position:fixed;bottom:0;left:0;right:0;z-index:201;background:rgba(21,21,28,0.92);border-top:1px solid var(--border-light);padding:8px 16px;backdrop-filter:blur(8px);opacity:0;transform:translateY(100%);transition:opacity 0.3s ease,transform 0.3s ease;pointer-events:none;display:flex;align-items:center;gap:10px;min-height:40px}
.tip-ticker.show{opacity:1;transform:translateY(0)}
.tip-ticker-icon{font-size:16px;flex-shrink:0}
.tip-ticker-text{font-family:var(--mono);font-size:13px;color:var(--accent-green);line-height:1.4;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tip-ticker-text span{display:inline-block;white-space:nowrap;opacity:1;transition:opacity 0.4s ease}
.tip-ticker-text.fade-out span{opacity:0}
.guitar-chord-svg{width:120px;height:110px;margin:0 auto}
.guitar-chord-svg svg{width:100%;height:100%}
.guitar-chord-na{font-size:12px;color:var(--text-dim);font-style:italic}
.chord-toast-guitar{margin:4px 0;pointer-events:none;display:flex;justify-content:center}
.progress-spinner{width:40px;height:40px;border:4px solid var(--border);border-top-color:var(--accent-blue);border-radius:50%;animation:spin 0.8s linear infinite;margin:16px auto 0}
@keyframes spin{to{transform:rotate(360deg)}}
.scroll-area::-webkit-scrollbar{width:5px}
.scroll-area::-webkit-scrollbar-track{background:transparent}
.scroll-area::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.panel{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px;margin-bottom:10px}
.panel-title{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--text-muted);letter-spacing:1.5px;text-transform:uppercase;padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.top-row{display:grid;grid-template-columns:2fr 3fr;gap:10px;margin-bottom:10px}
.top-left{display:flex;flex-direction:column;gap:10px}
.top-left .panel{margin-bottom:0}
.top-left .panel:last-child{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto}
.top-right-wrap{position:relative}
#aboutBeatPanel{margin-bottom:0;display:flex;flex-direction:column;position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}
#aboutBeatPanel .panel-title{flex-shrink:0}
#aboutSummary{flex-shrink:0}
midi-player{--primary-color:var(--accent-red);--background:var(--bg-surface);--foreground:var(--text-primary);--accent-color:var(--accent-blue);display:block;width:100%}
midi-player::part(control-panel){background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 8px}
midi-player::part(play-button){color:var(--accent-green)}
.player-controls{display:flex;align-items:center;gap:8px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px}
.player-btn{background:none;border:none;color:var(--accent-green);font-size:20px;cursor:pointer;padding:2px 6px;line-height:1;transition:color .15s}
.player-btn:hover{color:#fff}
.player-btn-sm{font-size:14px;color:var(--text-muted)}
.player-btn-sm:hover{color:var(--accent-blue)}
/* Velocity editor popup */
.vel-editor,.header-editor{position:fixed;z-index:300;background:var(--bg-raised);border:1px solid var(--accent-blue);border-radius:var(--radius-md);padding:8px 12px;box-shadow:0 4px 20px rgba(0,0,0,.5);display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:var(--text-primary)}
.vel-editor input[type=range]{width:100px;height:4px;-webkit-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none}
.vel-editor input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent-blue);cursor:pointer}
.header-editor input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent-blue);cursor:pointer}
.vel-editor-val{min-width:32px;text-align:center;color:var(--accent-blue);font-weight:700}
.vel-editor-del{background:none;border:none;color:var(--accent-red);font-size:16px;cursor:pointer;padding:2px 4px}
.vel-editor-del:hover{color:#fff}
/* Undo button */
.btn-undo{color:var(--text-muted);border-color:var(--border);font-size:12px;padding:0 8px}
/* Pattern tool buttons */
.pattern-tools{margin-left:auto;display:flex;gap:4px;align-items:center;flex-shrink:0}
.btn-tool{font-size:11px;height:26px;padding:0 8px;color:var(--text-muted);border-color:var(--border);letter-spacing:0.5px}
.btn-tool:hover{color:#fff}
.btn-tool.edit-active{color:var(--accent-red);border-color:rgba(224,72,72,.3)}
.btn-tool.loop-active{color:var(--accent-green);border-color:rgba(72,204,104,.3)}
/* Loading overlay for beat generation */
.gen-loading{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(13,13,18,.7);z-index:400;display:flex;align-items:center;justify-content:center;pointer-events:all}
.gen-loading-inner{font-family:var(--mono);font-size:16px;color:var(--accent-blue);text-align:center;letter-spacing:1px}
.gen-loading-inner .progress-spinner{margin:12px auto 0}
.player-time{font-family:var(--mono);font-size:12px;color:var(--text-muted);white-space:nowrap;min-width:70px}
.player-seek{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none;cursor:pointer}
.player-seek::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent-blue);cursor:pointer}
.player-seek::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent-blue);cursor:pointer;border:none}
.pattern-info{margin-left:auto;font-family:var(--mono);font-size:18px;color:var(--text-dim);font-weight:500;letter-spacing:.5px}
#aboutBeat{font-family:var(--mono);font-size:16px;color:var(--text-secondary);line-height:1.7;flex:1;overflow-y:auto;padding-right:4px;min-height:0}
#aboutBeat::-webkit-scrollbar{width:4px}
#aboutBeat::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.about-summary{font-family:var(--mono);font-size:13px;color:var(--text-secondary);line-height:1.6;padding:0 2px}
.about-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-bottom:8px}
.about-stat{display:flex;flex-direction:column;gap:2px;padding:6px 8px;background:var(--bg-deep);border:1px solid var(--border);border-radius:var(--radius-sm)}
.about-stat-label{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;font-weight:600}
.about-stat-value{font-size:14px;color:var(--text-primary);font-weight:700}
.about-stat-hint{font-size:10px;color:var(--text-muted);line-height:1.3;margin-top:1px}
.about-stat-value .accent-blue{color:var(--accent-blue)}
.about-stat-value .accent-red{color:var(--accent-red)}
.about-stat-value .accent-green{color:var(--accent-green)}

.about-toggle{background:none;border:1px solid var(--border);color:var(--text-muted);font-family:var(--mono);font-size:11px;cursor:pointer;padding:5px 10px;border-radius:var(--radius-sm);letter-spacing:.5px;transition:all .15s;width:100%;text-align:center;margin-bottom:6px;flex-shrink:0}
.about-toggle:hover{color:var(--accent-blue);border-color:rgba(80,160,255,.3)}

/* ── Chord Sheet ── */
.chord-sheet{font-family:var(--mono);font-size:12px;color:var(--text-secondary)}
.chord-sheet-row{margin-bottom:6px}
.chord-sheet-section{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;font-weight:600;margin-bottom:3px}
.chord-sheet-bars{display:flex;gap:6px;flex-wrap:wrap}
.chord-bar{background:var(--bg-deep);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;min-width:100px;flex:1;max-width:200px}
.chord-bar-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.chord-bar-name{font-size:20px;font-weight:700;color:var(--text-primary)}
.chord-bar-function{font-size:11px;color:var(--text-dim);font-weight:600}
.chord-bar.chord-root .chord-bar-name{color:var(--accent-red)}
.chord-bar.chord-four .chord-bar-name{color:var(--accent-blue)}
.chord-bar.chord-five .chord-bar-name{color:var(--accent-green)}
.chord-piano{display:flex;position:relative;height:48px;margin:0 auto}
.chord-piano-white{width:16px;height:48px;background:#d0d0d0;border:1px solid #999;border-radius:0 0 2px 2px;position:relative;z-index:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:2px}
.chord-piano-white.active{background:var(--accent-red);border-color:var(--accent-red)}
.chord-piano-black{width:10px;height:30px;background:#333;border:1px solid #222;border-radius:0 0 2px 2px;position:absolute;z-index:1}
.chord-piano-black.active{background:var(--accent-red);border-color:var(--accent-red)}
.chord-bar.chord-four .chord-piano-white.active{background:var(--accent-blue);border-color:var(--accent-blue)}
.chord-bar.chord-four .chord-piano-black.active{background:var(--accent-blue);border-color:var(--accent-blue)}
.chord-bar.chord-five .chord-piano-white.active{background:var(--accent-green);border-color:var(--accent-green)}
.chord-bar.chord-five .chord-piano-black.active{background:var(--accent-green);border-color:var(--accent-green)}
.chord-piano-label{font-size:8px;color:#fff;font-weight:700;letter-spacing:0}
.chord-piano-white .chord-piano-label{color:#333}
.chord-piano-white.active .chord-piano-label{color:#fff}
.chord-sheet-notes{font-size:11px;color:var(--text-dim);text-align:center;margin-top:3px}
.chord-sheet-hint{font-size:10px;color:var(--text-dim);line-height:1.3;margin-top:4px}
.arr-time{font-family:var(--mono);font-size:16px;color:var(--accent-blue);font-weight:600}
.arr-hint{font-family:var(--mono);font-size:18px;color:var(--text-dim);margin-bottom:8px;line-height:1.5}
/* First-visit pulse on arrangement items to draw attention */
.arr-item.first-visit-pulse{animation:arr-first-pulse 1.2s ease-in-out 3}
@keyframes arr-first-pulse{0%,100%{box-shadow:0 0 0 0 rgba(80,160,255,0)}50%{box-shadow:0 0 10px 2px rgba(80,160,255,.35)}}
.arr-flow{display:flex;flex-wrap:wrap;gap:5px;min-height:180px;padding:6px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-deep);margin-bottom:8px;align-items:flex-start}
.arr-item{background:var(--bg-raised);color:var(--text-secondary);border:1px solid var(--border);padding:5px 12px;border-radius:var(--radius-sm);cursor:grab;font-family:var(--mono);font-size:15px;font-weight:600;user-select:none;display:flex;align-items:center;gap:8px;transition:all .12s ease;letter-spacing:.3px}
.arr-item:hover{border-color:var(--border-light);background:var(--border)}
.arr-item:active{cursor:grabbing}
.arr-item.playing{background:rgba(80,160,255,.08);color:var(--accent-blue);border-color:rgba(80,160,255,.35);animation:arr-pulse 2s ease-in-out infinite}
@keyframes arr-pulse{0%,100%{box-shadow:0 0 0 0 rgba(80,160,255,0)}50%{box-shadow:0 0 12px 2px rgba(80,160,255,.25)}}
.arr-item.drag-over{border-color:var(--accent-red);background:rgba(224,72,72,.06)}
.arr-item .bar-count{font-size:13px;color:var(--text-dim);font-weight:500}
.arr-item .feel-tag{font-size:11px;color:var(--accent-green);background:rgba(72,204,104,.08);border:1px solid rgba(72,204,104,.2);padding:1px 5px;border-radius:2px;font-weight:500;letter-spacing:.3px;text-transform:uppercase}
.arr-item .rm{color:var(--text-dim);cursor:pointer;font-size:16px;line-height:1;margin-left:2px;transition:color .1s}
.arr-item .rm:hover{color:var(--accent-red)}
.arr-instruments{font-size:11px;letter-spacing:1px;opacity:0.7;margin-left:2px}
.arr-move{color:var(--text-dim);cursor:pointer;font-size:11px;line-height:1;padding:2px 4px;border-radius:3px;transition:color .1s;opacity:0.5}
.arr-move:hover{color:var(--accent-blue);opacity:1}
.arr-move:active{color:var(--accent-blue);opacity:1}
.arr-controls{display:flex;gap:4px;flex-wrap:wrap}
.arr-add{background:transparent;color:var(--text-dim);border:1px dashed var(--border);padding:3px 8px;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--mono);font-size:18px;font-weight:500;letter-spacing:.5px;transition:all .12s ease}
.arr-add:hover{color:var(--text-secondary);border-color:var(--border-light)}
.bar-tabs{display:flex;gap:4px;margin-bottom:8px}
.bar-btn{background:var(--bg-raised);color:var(--text-dim);border:1px solid var(--border);padding:4px 12px;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--mono);font-size:18px;font-weight:600;transition:all .12s ease}
.bar-btn:hover{color:var(--text-secondary)}
.bar-btn-active{color:var(--accent-blue);border-color:rgba(80,160,255,.4);background:rgba(80,160,255,.06)}
.vel-legend{font-family:var(--mono);font-size:12px;color:var(--text-dim);margin-bottom:6px;letter-spacing:.3px}
.vel-full{color:var(--accent-red);font-weight:700}
.vel-accent{color:#e8a020;font-weight:600}
.vel-ghost{color:var(--text-muted);font-weight:500}
.ctrl-swing-desc{font-family:var(--mono);font-size:11px;color:var(--text-muted);font-style:italic;margin-left:2px;white-space:nowrap}
.grid-page-label{font-family:var(--mono);font-size:18px;color:var(--text-dim);padding:10px 0 4px 0;letter-spacing:1.5px;font-weight:600;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.grid-page-label::after{content:'';flex:1;height:1px;background:var(--border)}
.grid-page-label:first-child{padding-top:0}
.section-flash{animation:sec-flash 0.4s ease-out;will-change:background}
@keyframes sec-flash{0%{background:rgba(80,160,255,.15)}100%{background:transparent}}
.grid-header{display:flex;align-items:center;margin-bottom:2px;padding-left:90px}
.beat-num{flex:1;text-align:center;min-width:0;font-family:var(--mono);font-size:18px;color:var(--text-dim);font-weight:500;padding:2px 0}
.beat-num.db{color:var(--accent-red);font-weight:700}
.grid-row{display:flex;align-items:center;margin-bottom:1px;contain:layout}
.row-label{width:90px;flex-shrink:0;font-family:var(--mono);font-size:18px;color:var(--text-muted);text-align:right;padding-right:8px;letter-spacing:.3px;display:flex;align-items:center;justify-content:flex-end;gap:4px;font-weight:500;cursor:pointer}
.row-label:hover{color:var(--accent-blue)}
.cell{flex:1;height:28px;margin:1px;border-radius:3px;min-width:0;border:1px solid transparent;background:var(--bg-deep);font-family:var(--mono);font-size:18px;color:rgba(255,255,255,.9);font-weight:700;display:flex;align-items:center;justify-content:center;overflow:hidden;user-select:none;position:relative;contain:layout style}
.cell.on::after{content:'';position:absolute;bottom:0;left:0;right:0;height:var(--vel-h,0%);background:rgba(255,255,255,.15);border-radius:0 0 2px 2px;pointer-events:none;transition:height .1s}
.cell.kick.on{background:#d04040}
.cell.snare.on{background:#e8a020}
.cell.clap.on{background:#d07818}
.cell.rimshot.on{background:#c89040}
.cell.ghostkick.on{background:#884040}
.cell.hat.on{background:#40a0d0}
.cell.openhat.on{background:#50c0e0}
.cell.ride.on{background:#5090b0}
.cell.crash.on{background:#c0b030}
.cell.shaker.on{background:#70b870}
.cell.cowbell.on{background:#c07830}
.cell.tomhi.on{background:#a050c0}
.cell.tommid.on{background:#9060b0}
.cell.tomlo.on{background:#7050a0}
.cell.beat-start{margin-left:3px}
/* Edit mode: cells get a subtle border and pointer cursor to indicate they're clickable */
.grid-edit-mode .cell{cursor:pointer;border-color:rgba(224,72,72,.15)}
.grid-edit-mode .cell:hover{border-color:rgba(224,72,72,.5)}
.cell.playback-cursor{box-shadow:inset 0 0 0 2px var(--accent-green);border-color:var(--accent-green)}
/* FX: Cursor trail — fading ghost on previous steps */
.cell.cursor-trail{box-shadow:inset 0 0 0 1px rgba(80,255,160,.25);border-color:rgba(80,255,160,.15);transition:box-shadow .3s ease-out,border-color .3s ease-out}
.beat-num.cursor-trail{color:rgba(80,255,160,.3);transition:color .3s ease-out}
/* FX: Hit flash — cell brightens when cursor lands on active hit */
/* PERF: Use opacity animation instead of filter:brightness — opacity is GPU-composited, brightness triggers repaint */
.cell.hit-flash{animation:hit-pop .2s ease-out}
@keyframes hit-pop{0%{opacity:.6}100%{opacity:1}}
/* FX: Row glow — row label glows in instrument color on hit */
.row-label.row-glow{transition:color .15s,text-shadow .15s}
.row-label.glow-kick{color:#d04040;text-shadow:0 0 8px rgba(208,64,64,.6)}
.row-label.glow-snare{color:#e8a020;text-shadow:0 0 8px rgba(232,160,32,.6)}
.row-label.glow-clap{color:#d07818;text-shadow:0 0 8px rgba(208,120,24,.6)}
.row-label.glow-rimshot{color:#c89040;text-shadow:0 0 8px rgba(200,144,64,.6)}
.row-label.glow-ghostkick{color:#884040;text-shadow:0 0 8px rgba(136,64,64,.6)}
.row-label.glow-hat{color:#40a0d0;text-shadow:0 0 8px rgba(64,160,208,.6)}
.row-label.glow-openhat{color:#50c0e0;text-shadow:0 0 8px rgba(80,192,224,.6)}
.row-label.glow-ride{color:#5090b0;text-shadow:0 0 8px rgba(80,144,176,.6)}
.row-label.glow-crash{color:#c0b030;text-shadow:0 0 8px rgba(192,176,48,.6)}
.row-label.glow-shaker{color:#70b870;text-shadow:0 0 8px rgba(112,184,112,.6)}
.beat-num.playback-cursor{color:var(--accent-green);font-weight:700}

/* FX: Section color themes — subtle tint per section type */
.grid-page-label.sec-intro{color:#50c0e0}
.grid-page-label.sec-verse{color:var(--text-dim)}
.grid-page-label.sec-chorus{color:#e8a020}
.grid-page-label.sec-breakdown{color:#70b870}
.grid-page-label.sec-outro{color:#d04040}
.grid-page-label.sec-pre{color:#c0b030}
.arr-item.sec-intro{border-left:3px solid #50c0e0}
.arr-item.sec-verse{border-left:3px solid var(--text-dim)}
.arr-item.sec-chorus{border-left:3px solid #e8a020}
.arr-item.sec-breakdown{border-left:3px solid #70b870}
.arr-item.sec-outro{border-left:3px solid #d04040}
.arr-item.sec-pre{border-left:3px solid #c0b030}

/* FX: Arrangement progress bar */
.arr-progress{height:8px;background:var(--border);border-radius:4px;margin-bottom:6px;overflow:hidden;position:relative}
.arr-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-blue),var(--accent-green));border-radius:2px;width:100%;transform:scaleX(0);transform-origin:left;will-change:transform}
.arr-progress-markers{position:absolute;top:0;left:0;right:0;height:100%;pointer-events:none}
.arr-progress-mark{position:absolute;top:0;width:1px;height:100%;background:rgba(255,255,255,.2)}

/* FX: Audio visualizer */
.audio-visualizer{height:96px;background:var(--bg-deep);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius-sm) var(--radius-sm);overflow:hidden}
.audio-visualizer canvas{width:100%;height:100%;display:block}

/* Instrument mute strip */
.instr-mute-strip{display:flex;gap:2px;padding:4px 6px;background:var(--bg-deep);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius-sm) var(--radius-sm);flex-wrap:wrap}
.instr-mute-btn{display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 6px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-size:14px;color:var(--text-muted);opacity:0.35;transition:all .15s;flex:1;min-width:0}
.instr-mute-btn span{font-family:var(--mono);font-size:9px;letter-spacing:0.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.instr-mute-btn.active{opacity:1;color:var(--text-primary);border-color:var(--accent-blue);background:var(--bg-raised)}
.instr-mute-btn.active:hover{border-color:var(--accent-green)}
.instr-mute-btn:not(.active):not(:disabled){opacity:0.55;border-color:var(--text-muted)}
.instr-mute-btn:not(.active):not(:disabled):hover{opacity:0.7}
.instr-mute-btn:disabled{opacity:0.2;cursor:default;border-color:var(--border)}
.instr-mute-btn:disabled:hover{opacity:0.2}

/* FX: Fill countdown — steps glow before a fill */
.cell.fill-countdown-1{border-bottom:2px solid rgba(224,72,72,.7)}
.cell.fill-countdown-2{border-bottom:2px solid rgba(224,72,72,.5)}
.cell.fill-countdown-3{border-bottom:2px solid rgba(224,72,72,.3)}
.cell.fill-countdown-4{border-bottom:2px solid rgba(224,72,72,.15)}

/* FX: Beat drop — radial pulse on section start */
.beat-drop{animation:beat-drop-pulse .5s ease-out}
@keyframes beat-drop-pulse{0%{box-shadow:inset 0 0 60px rgba(80,160,255,.3)}100%{box-shadow:inset 0 0 0 transparent}}

/* FX: BPM breathing — border pulses at tempo */
.bpm-breathe{animation:bpm-glow var(--bpm-period,0.667s) ease-in-out infinite}
@keyframes bpm-glow{0%,100%{border-color:var(--border)}50%{border-color:rgba(80,160,255,.3)}}
.about-section{margin-bottom:3px}
.about-header{cursor:pointer;user-select:none;padding:6px 10px;border-radius:3px;border:1px solid var(--border);background:var(--bg-raised);display:flex;align-items:center;gap:6px;transition:background .12s ease,border-color .12s ease;font-size:16px}
.about-header:hover{background:var(--border);border-color:var(--border-light);color:var(--text-primary)}
.about-arrow{font-size:18px;color:var(--accent-blue);margin-left:auto;flex-shrink:0;font-weight:700;opacity:0.9;padding-left:12px}
.about-body{padding:6px 8px 4px 8px;border:1px solid var(--border);border-top:none;border-radius:0 0 3px 3px;margin-bottom:2px}

/* Tooltip for cell explanations and glossary */
.tooltip{position:fixed;z-index:1000;max-width:340px;padding:10px 14px;background:var(--bg-raised);border:1px solid var(--accent-blue);border-radius:var(--radius-md);font-family:var(--mono);font-size:16px;color:var(--text-primary);line-height:1.6;box-shadow:0 4px 20px rgba(0,0,0,.5);pointer-events:none}
.tooltip b{color:var(--accent-blue)}
.tooltip .tip-label{font-size:18px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;display:block}

/* Glossary term highlights in About panel */
.glossary-term{border-bottom:1px dotted var(--accent-blue);cursor:help}
.loading{display:flex;align-items:center;justify-content:center;height:100%;font-family:var(--mono);font-size:19px;color:var(--text-dim);letter-spacing:1px}
.loading-inner{display:flex;flex-direction:column;align-items:center;gap:12px}
.loading-text{font-family:var(--mono);font-size:14px;color:var(--text-dim);letter-spacing:1px;animation:loading-fade 1.5s ease-in-out infinite}
@keyframes loading-fade{0%,100%{opacity:.4}50%{opacity:1}}
/* Play button ready glow — pulses green when beat is ready to play */
.btn-play-header.ready-glow{animation:play-ready 1.5s ease-in-out 3;border-color:rgba(76,175,80,.6)}
@keyframes play-ready{0%,100%{box-shadow:0 0 0 0 rgba(76,175,80,0)}50%{box-shadow:0 0 14px 3px rgba(76,175,80,.45)}}

/* ── Focus styles for keyboard accessibility ── */
.arr-item:focus{outline:2px solid var(--accent-blue);outline-offset:1px}
.arr-item:focus:not(:focus-visible){outline:none}
.about-header:focus{outline:2px solid var(--accent-blue);outline-offset:1px;border-radius:3px}
.about-header:focus:not(:focus-visible){outline:none}
.cell:focus{outline:2px solid var(--accent-green);outline-offset:-1px;z-index:1;position:relative}
.cell:focus:not(:focus-visible){outline:none}
.glossary-term:focus{outline:2px solid var(--accent-blue);outline-offset:1px;border-radius:2px}
.glossary-term:focus:not(:focus-visible){outline:none}
.arr-item .rm:focus{outline:2px solid var(--accent-red);outline-offset:1px;border-radius:2px}
.arr-item .rm:focus:not(:focus-visible){outline:none}

/* ── New Beat Dialog ── */
.regen-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:500;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.regen-dialog{background:var(--bg-surface);border:1px solid var(--border-light);border-radius:10px;padding:0;width:420px;max-width:92vw;max-height:90vh;box-shadow:0 20px 60px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden}
.regen-dialog>.regen-title,.regen-dialog>.regen-subtitle{padding:28px 32px 0;flex-shrink:0}
.regen-dialog>.regen-subtitle{padding-top:6px;padding-bottom:0}
.regen-dialog-body{flex:1;overflow-y:auto;padding:16px 32px;-webkit-overflow-scrolling:touch}
.regen-dialog>.regen-actions{padding:16px 32px 24px;flex-shrink:0;border-top:1px solid var(--border)}
.regen-title{font-family:var(--mono);font-size:18px;font-weight:700;color:#fff;letter-spacing:1px;margin-bottom:6px}
.regen-subtitle{font-family:var(--mono);font-size:12px;color:var(--text-muted);margin-bottom:22px;line-height:1.5}
.regen-fields{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.regen-field{display:flex;flex-direction:column;gap:5px}
.regen-label{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--text-muted);letter-spacing:1.2px;text-transform:uppercase}
.regen-select{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-light);border-radius:var(--radius-sm);font-family:var(--mono);font-size:14px;padding:8px 10px;height:38px;cursor:pointer;width:100%;outline:none;transition:border-color .15s}
.regen-select:focus{border-color:var(--accent-blue)}
.regen-select option{background:var(--bg-raised);color:var(--text-primary)}
.regen-actions{display:flex;gap:10px;justify-content:flex-end}
.regen-cancel{color:var(--text-muted);min-width:80px}
.regen-go{min-width:120px;justify-content:center;font-size:14px}
.regen-artists{font-family:var(--mono);font-size:11px;color:var(--accent-green);line-height:1.4;min-height:14px;padding-top:4px;letter-spacing:.2px}
.export-dialog{width:480px}
.export-checks{display:flex;flex-direction:column;gap:6px;padding:4px 0}
.export-daws{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.export-check{font-family:var(--mono);font-size:12px;color:var(--text-secondary);display:flex;align-items:baseline;gap:7px;cursor:pointer;user-select:none;flex-wrap:wrap}
.export-check input[type=checkbox]{accent-color:var(--accent-blue);width:14px;height:14px;cursor:pointer;flex-shrink:0;align-self:center}
.export-check:hover{color:var(--text-primary)}
.export-toggle{background:none;border:none;color:var(--text-dim);font-family:var(--mono);font-size:11px;cursor:pointer;padding:4px 0;text-align:left;letter-spacing:.3px}
.export-toggle:hover{color:var(--accent-blue)}
.export-note{font-size:10px;color:var(--text-dim);font-style:italic}
.prefs-dialog .export-note{width:100%;padding-left:21px;margin-top:-2px;line-height:1.4}
.prefs-dialog .export-checks{gap:8px}
.export-presets{display:flex;gap:8px;padding:12px 16px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:4px}
.export-preset-label{font-family:var(--mono);font-size:12px;color:var(--text-muted);letter-spacing:0.5px;width:100%;margin-bottom:2px}
.export-preset{font-size:13px;height:38px;padding:0 16px;letter-spacing:0.3px;flex:1;justify-content:center;min-width:0}
.export-preset:hover{background:var(--accent-blue);color:#fff;border-color:var(--accent-blue)}
.export-preset.active{background:var(--accent-blue);color:#fff;border-color:var(--accent-blue)}
.export-advanced-toggle{background:none;border:none;color:var(--text-dim);font-family:var(--mono);font-size:11px;cursor:pointer;padding:6px 16px;letter-spacing:.3px;width:100%;text-align:center;transition:color .15s}
.export-advanced-toggle:hover{color:var(--accent-blue)}
.grid-row.muted-row{opacity:0.25;pointer-events:none}
.about-quickjump{display:flex;gap:4px;padding:6px 0;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:8px;position:sticky;top:0;background:var(--bg-surface);z-index:5}
.qj-label{font-family:var(--mono);font-size:10px;color:var(--text-dim);letter-spacing:0.5px}
.qj-btn{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px 6px;cursor:pointer;font-size:14px;line-height:1;transition:all .12s}
.qj-btn:hover{border-color:var(--accent-blue);background:rgba(80,160,255,.06)}

/* ── Mobile responsive layout ── */

/* Tablet / landscape phone (601-1024px): 2-row header */
@media (min-width: 601px) and (max-width: 1024px) {
  body{overflow:auto;font-size:17px}
  #app-wrap{height:auto;min-height:100vh}
  .header-bar{position:sticky;top:0;z-index:100;flex-wrap:wrap;height:auto;padding:8px 12px;gap:6px}
  .scroll-area{overflow:visible;padding:8px}
  .top-row{grid-template-columns:1fr;gap:8px}
  #aboutBeatPanel{position:static;max-height:none}
  .brand{font-size:17px}
  .credit{margin-left:auto;font-size:11px;letter-spacing:0}
  /* Controls: single row — everything compact */
  .controls-bar{
    display:flex;
    flex-wrap:nowrap;
    gap:4px;
    align-items:center;
  }
  .btn-play-header{font-size:11px;height:30px;padding:0 10px;min-width:70px}
  .btn-gen{font-size:11px;height:30px;padding:0 8px}
  .ctrl-group{height:28px;padding:2px 5px;gap:3px}
  .ctrl-label{font-size:10px;letter-spacing:0.5px}
  .ctrl-input{font-size:12px;width:auto}
  .ctrl-input-wide{max-width:90px;font-size:11px}
  .btn-export{margin-left:auto;font-size:10px;height:28px;padding:0 7px}
  .btn-history{font-size:10px;height:28px;padding:0 7px}
  .btn-prefs{font-size:10px;height:28px;padding:0 7px}
  .btn-prefs .prefs-text{display:none}
  .btn-prefs .prefs-icon{display:inline}
  .grid-row{overflow-x:hidden}
  .cell{flex:1;min-width:0}
  .row-label{width:70px;font-size:13px;padding-right:4px}
  .grid-header{padding-left:70px}
  .beat-num{flex:1;min-width:0}
  .arr-flow{min-height:60px}
  .panel{padding:8px 10px}
}

/* Phone portrait (≤600px): 2-column grid header */

@media (max-width: 600px) {
  /* Base layout (was shared with tablet in old 1024px query) */
  body{overflow:auto;font-size:17px}
  #app-wrap{height:auto;min-height:100vh}
  .header-bar{position:sticky;top:0;z-index:100;flex-wrap:wrap;height:auto}
  .scroll-area{overflow:visible;padding:8px}
  .top-row{grid-template-columns:1fr;gap:8px}
  #aboutBeatPanel{position:static;max-height:none}
  /* Prevent iOS zoom on input focus */
  input,select,textarea{font-size:16px}
  /* Dialogs: tighter padding, full width on small screens */
  .regen-dialog{padding:0;width:auto;max-width:96vw;max-height:85vh}
  .regen-dialog>.regen-title,.regen-dialog>.regen-subtitle{padding:20px 16px 0}
  .regen-dialog>.regen-subtitle{padding-top:4px}
  .regen-dialog-body{padding:12px 16px}
  .regen-dialog>.regen-actions{padding:12px 16px 16px}
  .export-dialog{width:auto}
  .export-daws{grid-template-columns:1fr;gap:4px}
  .export-checks{gap:8px}
  .regen-title{font-size:16px}
  .regen-actions{flex-wrap:wrap;gap:8px}
  /* Header: stack brand + URL on one line, controls below */
  .header-bar{
    padding:8px 10px;
    gap:6px;
    flex-wrap:wrap;
    align-items:center;
  }
  .brand{font-size:16px;flex-shrink:0;width:auto;text-align:center;order:0;justify-content:center;margin:0 auto}
  .credit{
    width:100%;
    order:3;
    text-align:center;
    font-size:10px;
    letter-spacing:0;
    margin-left:0;
    white-space:nowrap;
    padding-top:2px;
  }
  .controls-bar{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    order:2;
  }
  /* PLAY + NEW BEAT on same line */
  .btn-play-header{
    justify-content:center;
    font-size:13px;
    height:38px;
  }
  .btn-gen{
    justify-content:center;
    font-size:13px;
    height:38px;
  }
  /* EXPORT on left */
  .btn-export{
    justify-content:center;
    font-size:12px;
    height:36px;
    margin-left:0;
  }
  /* HISTORY on left */
  .btn-history{
    justify-content:center;
    font-size:12px;
    height:36px;
  }
  /* Preferences shares row with History */
  .btn-prefs{
    font-size:12px;
    height:36px;
    padding:0 12px;
    justify-content:center;
  }
  .btn-prefs .prefs-icon{display:none}
  .btn-prefs .prefs-text{display:inline}
  /* Style text: scrolls if long */
  .ctrl-input-wide{
    max-width:none;
    font-size:12px;
    width:auto;
    overflow:hidden;
    text-overflow:clip;
    text-align:center;
  }
  /* Style group spans full width on mobile */
  .ctrl-style{grid-column:1 / -1;overflow:hidden}
  .ctrl-group{
    justify-content:center;
    padding:4px 6px;
    height:auto;
    text-align:center;
    flex-wrap:wrap;
  }
  .ctrl-label{font-size:11px;width:100%;text-align:center}
  .ctrl-input{font-size:14px;width:auto;text-align:center}

  /* Grid: tighter but readable */
  .cell{flex:1;min-width:0;height:24px;font-size:9px}
  .beat-num{flex:1;min-width:0;font-size:9px}
  .row-label{width:48px;font-size:9px;padding-right:3px;letter-spacing:0}
  .grid-header{padding-left:48px}

  /* Panels */
  .panel{padding:8px 8px}
  .panel-title{font-size:13px;letter-spacing:.8px;flex-wrap:wrap}
  .pattern-info{font-size:12px;width:100%}
  .pattern-tools{gap:3px;width:100%;justify-content:flex-start;margin-left:0}
  .btn-tool{font-size:9px;height:22px;padding:0 5px}

  /* Arrangement */
  .arr-hint{font-size:12px}
  .arr-item{font-size:12px;padding:4px 8px;gap:5px}
  .arr-item .bar-count{font-size:11px}
  .arr-item .feel-tag{font-size:9px;padding:1px 4px}
  .arr-add{font-size:11px;padding:3px 7px}
  .arr-flow{min-height:50px;gap:4px;padding:5px}
  .audio-visualizer{height:72px}
  .instr-mute-strip{padding:3px 4px;gap:1px}
  .instr-mute-btn{padding:3px 4px;font-size:12px}
  .instr-mute-btn span{font-size:8px}
  .arr-progress{margin-bottom:4px}
  .tip-ticker{padding:6px 12px}
  .tip-ticker-icon{font-size:13px}
  .tip-ticker-text{font-size:11px;white-space:normal;text-overflow:clip}
  .tip-ticker-text span{white-space:normal}

  /* About panel */
  #aboutBeat{font-size:13px;line-height:1.6}
  .about-header{font-size:13px;padding:5px 8px}
  .about-summary-grid{grid-template-columns:1fr 1fr;gap:4px 8px}
  .about-stat{padding:4px 6px}
  .about-stat-label{font-size:9px}
  .about-stat-value{font-size:12px}
  .about-stat-hint{font-size:9px}
  .chord-sheet-section{font-size:9px}
  .chord-bar{padding:6px;min-width:70px;max-width:140px}
  .chord-bar-name{font-size:15px}
  .chord-bar-function{font-size:9px}
  .chord-piano{height:36px}
  .chord-piano-white{width:12px;height:36px}
  .chord-piano-black{width:8px;height:22px}
  .chord-sheet-notes{font-size:9px}
  .chord-sheet-hint{font-size:8px}
  #aboutBeat{font-size:12px;line-height:1.5;max-height:180px;overflow-y:auto}
  #aboutBeat.mobile-expanded{max-height:none}
  .about-arrow{font-size:14px}

  /* Bar tabs */
  .bar-btn{font-size:12px;padding:3px 8px;flex:0 0 calc(25% - 3px)}
  .bar-tabs{gap:3px;flex-wrap:wrap}

  /* MIDI player */
  midi-player::part(control-panel){padding:3px 6px}
}

/* Beat History Dialog */
.history-dialog{max-width:800px;max-height:80vh;display:flex;flex-direction:column}
.history-actions{display:flex;gap:10px;margin-bottom:16px}
.btn-backup,.btn-restore{flex:1;font-size:13px;padding:10px 16px}
.history-slots-container{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;min-height:200px;max-height:500px}
.history-slot{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;transition:all .2s}
.history-slot:hover{border-color:var(--accent-blue);background:var(--bg-raised)}
.history-slot-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.history-slot-number{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--accent-blue);letter-spacing:1px}
.history-slot-date{font-family:var(--mono);font-size:11px;color:var(--text-muted)}
.history-slot-delete{background:transparent;border:none;color:var(--accent-red);font-size:24px;cursor:pointer;padding:0;width:24px;height:24px;line-height:1;transition:transform .2s}
.history-slot-delete:hover{transform:scale(1.2)}
.history-slot-info{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.history-slot-style{font-family:var(--mono);font-size:13px;color:var(--text-primary);font-weight:600}
.history-slot-key,.history-slot-bpm,.history-slot-swing{font-family:var(--mono);font-size:12px;color:var(--text-dim)}
.history-slot-load{width:100%;padding:8px;font-size:13px;background:var(--accent-blue);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--mono);font-weight:600;letter-spacing:1px;transition:all .2s}
.history-slot-load:hover{background:var(--accent-green);transform:translateY(-1px)}
.history-slot-load:disabled{background:var(--bg-input);color:var(--text-muted);cursor:default;transform:none}
.history-slot-active{border-color:var(--accent-green);background:var(--bg-raised)}
.history-slot-current{font-family:var(--mono);font-size:11px;color:var(--accent-green);font-weight:600;letter-spacing:0.5px}
.history-slot-star{background:transparent;border:none;font-size:20px;cursor:pointer;padding:0 4px;color:var(--text-muted);transition:color .2s,transform .2s}
.history-slot-star:hover{transform:scale(1.2);color:var(--accent-blue)}
.history-slot-star.starred{color:#f5c542}
.history-slot-starred{border-color:#f5c542}
.empty-history{text-align:center;padding:40px 20px;color:var(--text-muted);font-family:var(--mono);font-size:14px;font-style:italic}

.btn-history{background:var(--accent-blue);color:#fff;border:1px solid var(--accent-blue)}
.btn-history:hover{background:var(--bg-surface);color:var(--accent-blue)}

/* Mobile-specific history dialog styles */
@media (max-width: 600px) {
  .history-dialog{max-width:95vw;max-height:80vh}
  .history-actions{flex-direction:column;gap:8px}
  .btn-backup,.btn-restore{width:100%;min-height:44px;font-size:14px;touch-action:manipulation}
  .history-slot{padding:12px;touch-action:manipulation}
  .history-slot-header{flex-wrap:wrap;gap:8px}
  .history-slot-info{font-size:11px}
  .history-slot-load{min-height:44px;font-size:14px;touch-action:manipulation}
  .history-slot-delete{min-width:44px;min-height:44px;font-size:28px;touch-action:manipulation}
  .history-slot-star{min-width:44px;min-height:44px;font-size:24px;touch-action:manipulation}
  .slot-replacement-dialog{max-width:95vw}
  .slot-item{padding:10px;touch-action:manipulation;min-height:60px}
  .slot-info{font-size:10px}
  #historyClose{min-height:44px;font-size:14px;touch-action:manipulation}
  .btn-history{min-height:36px;touch-action:manipulation;-webkit-tap-highlight-color:rgba(80,160,255,0.3)}
}

/* ── Tap Tempo Overlay ── */
.tap-tempo-overlay{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.tap-tempo-dialog{background:var(--bg-raised);border:1px solid var(--accent-blue);border-radius:var(--radius-md);padding:32px 40px;text-align:center;min-width:260px;box-shadow:0 8px 40px rgba(0,0,0,.6)}
.tap-tempo-bpm{font-family:var(--mono);font-size:64px;font-weight:700;color:var(--accent-blue);line-height:1.1;margin-bottom:4px;transition:transform .1s}
.tap-tempo-bpm.tap-pulse{animation:tap-pop .15s ease-out}
@keyframes tap-pop{0%{transform:scale(1.15)}100%{transform:scale(1)}}
.tap-tempo-hint{font-family:var(--mono);font-size:14px;color:var(--text-muted);margin-bottom:2px}
.tap-tempo-count{font-family:var(--mono);font-size:12px;color:var(--text-dim);margin-bottom:16px}
.tap-tempo-actions{display:flex;gap:8px;justify-content:center}

/* ── Swing Visualization on Grid ── */
/* Odd-numbered steps (the "and" positions) get a visual offset
   proportional to the swing amount. This makes swing VISIBLE —
   the user can see the timing displacement on the grid itself.
   Uses translateX so it works inside flex layouts (margin-left
   gets absorbed by flex:1). The offset is set via --swing-offset
   applied by renderGrid in ui.js. */
.cell.swing-offset{transform:translateX(var(--swing-offset,0px))}
.beat-num.swing-offset{transform:translateX(var(--swing-offset,0px));color:var(--accent-blue)}

/* ── Keyboard Shortcut Hints ── */
.shortcut-hint{font-size:10px;color:var(--text-dim);font-family:var(--mono);margin-left:4px;opacity:.6}