/* ============================================================================
   PRACTICE MODE — 5-Tab Full-Screen Overlay
   Chart · Know · Memory · Harmony · Record
   ============================================================================ */

#rmOverlay { display:none; position:fixed; inset:0; z-index:2000; background:#0a0f1e; flex-direction:column; overflow:hidden; }
#rmOverlay.rm-visible { display:flex; }

/* Header */
.rm-header { display:flex; align-items:center; gap:12px; padding:10px 14px; background:linear-gradient(135deg,#1a2340,#0f172a); border-bottom:1px solid rgba(255,255,255,0.08); flex-shrink:0; min-height:56px; }
.rm-close { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); color:#94a3b8; width:36px; height:36px; border-radius:8px; font-size:1em; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.rm-close:hover { background:rgba(255,255,255,0.15); color:white; }
.rm-title-block { flex:1; min-width:0; }
.rm-song-title { font-size:1.05em; font-weight:800; color:#f1f5f9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rm-song-meta { font-size:0.78em; color:#64748b; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rm-nav-block { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.rm-nav-btn { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:#94a3b8; width:34px; height:34px; border-radius:8px; font-size:1.3em; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.rm-nav-btn:hover { background:rgba(255,255,255,0.12); color:white; }
.rm-position { font-size:0.78em; color:#64748b; min-width:36px; text-align:center; }

/* Tab bar */
.rm-tabs { display:flex; gap:2px; padding:8px 12px; background:rgba(0,0,0,0.25); flex-shrink:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.rm-tab { flex:1; min-width:0; padding:9px 6px; border:none; border-radius:8px; font-weight:700; font-size:0.78em; cursor:pointer; background:rgba(255,255,255,0.04); color:#64748b; transition:all 0.2s; white-space:nowrap; }
.rm-tab.active { background:linear-gradient(135deg,#667eea,#764ba2); color:white; box-shadow:0 2px 12px rgba(102,126,234,0.35); }
.rm-tab:not(.active):hover { background:rgba(255,255,255,0.08); color:#94a3b8; }

/* Tab panels */
.rm-body { flex:1; overflow:hidden; position:relative; }
.rm-panel { display:none; position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px; padding-top:0; }
.rm-panel.active { display:block; }
.rm-scroll-content { padding-bottom:80px; }

/* Chart tab */
.rm-chart-controls { display:flex; gap:6px; margin-bottom:12px; position:sticky; top:0; z-index:2; padding:4px 0; background:#0a0f1e; }
.rm-font-btn { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:#94a3b8; padding:6px 12px; border-radius:6px; cursor:pointer; font-size:0.82em; font-weight:600; transition:all 0.15s; }
.rm-font-btn:hover { background:rgba(255,255,255,0.12); color:white; }
.rm-edit-btn { margin-left:auto; }

/* Unified sticky toolbar */
.rm-sticky-bar { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:4px; padding:6px 10px; background:var(--bg-card,#1e293b); border-bottom:1px solid rgba(255,255,255,0.08); flex-wrap:wrap; justify-content:center; }

.rm-tb { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:#94a3b8; padding:5px 8px; border-radius:6px; cursor:pointer; font-size:0.78em; font-weight:700; white-space:nowrap; transition:all 0.15s; flex-shrink:0; }
.rm-tb:hover { background:rgba(255,255,255,0.12); color:white; }
.rm-tb-val { color:#e2e8f0; font-weight:700; font-size:0.8em; min-width:20px; text-align:center; flex-shrink:0; padding:0 2px; }
.rm-tb-sep { width:1px; height:18px; background:rgba(255,255,255,0.1); flex-shrink:0; margin:0 2px; }
.rm-brain-ctrl.hidden { display:none; }
.rm-sticky-bar .hidden { display:none; }
.rm-monkey-float { position:fixed; top:auto; bottom:80px; right:12px; z-index:10001; background:rgba(30,41,59,0.9); border:1px solid rgba(255,255,255,0.15); color:#94a3b8; padding:4px 7px; border-radius:6px; cursor:pointer; font-size:0.9em; transition:all 0.15s; }
.rm-monkey-float:hover { background:rgba(255,255,255,0.12); color:white; }
.rm-chart-text { font-family:'SF Mono','Fira Code','Consolas',monospace; font-size:16px; line-height:1.55; color:#e2e8f0; white-space:pre-wrap; word-wrap:break-word; margin:0; padding:0 0 80px 0; tab-size:4; }
.rm-no-chart { text-align:center; padding:60px 20px; }
.rm-no-chart.hidden { display:none; }
.rm-no-chart-icon { font-size:3em; margin-bottom:16px; }
.rm-no-chart-msg { color:#94a3b8; font-size:1em; margin-bottom:8px; }
.rm-no-chart-sub { color:#64748b; font-size:0.85em; }

/* Edit panel */
.rm-edit-panel { padding-top:4px; }
.rm-edit-panel.hidden { display:none; }
.rm-edit-label { font-size:0.82em; color:#94a3b8; margin-bottom:8px; }
.rm-edit-textarea { width:100%; box-sizing:border-box; min-height:200px; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.12); border-radius:8px; color:#e2e8f0; font-family:'SF Mono','Fira Code','Consolas',monospace; font-size:14px; line-height:1.5; padding:12px; resize:vertical; }
.rm-edit-textarea:focus { outline:none; border-color:#667eea; }
.rm-edit-actions { display:flex; gap:8px; margin-top:10px; }
.rm-save-btn { flex:1; background:linear-gradient(135deg,#667eea,#764ba2); color:white; border:none; padding:10px; border-radius:8px; font-weight:700; cursor:pointer; font-size:0.9em; }
.rm-cancel-btn { padding:10px 16px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:#94a3b8; border-radius:8px; cursor:pointer; font-size:0.9em; }

/* Loading */
.rm-loading { text-align:center; padding:40px 20px; color:#94a3b8; font-size:0.9em; }

/* Footer */
.rm-footer { display:flex; gap:4px; padding:10px 12px; background:rgba(0,0,0,0.4); border-top:1px solid rgba(255,255,255,0.06); flex-shrink:0; }
.rm-action-btn { flex:1; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); color:#94a3b8; padding:8px 4px; border-radius:8px; font-size:0.72em; font-weight:600; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.rm-action-btn:hover { background:rgba(255,255,255,0.1); color:white; }

/* Bottom sheets */
.rm-sheet { position:fixed; inset:0; z-index:2010; background:rgba(0,0,0,0.7); display:flex; align-items:flex-end; justify-content:center; }
.rm-sheet.hidden { display:none; }
.rm-sheet-inner { background:#1a2340; border-radius:16px 16px 0 0; padding:20px; width:100%; max-width:500px; max-height:60vh; overflow-y:auto; }
.rm-sheet-title { color:white; font-weight:700; font-size:1em; margin-bottom:12px; }
.rm-queue-select { width:100%; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.12); color:#e2e8f0; padding:10px 12px; border-radius:8px; font-size:0.9em; margin-bottom:10px; }

/* Responsive */
@media (max-width:500px) {
    .rm-tab { font-size:0.7em; padding:8px 4px; }
    .rm-header { padding:8px 10px; gap:8px; }
    .rm-song-title { font-size:0.95em; }
    .rm-panel { padding:12px; }
    .rm-footer { padding:8px 8px; }
    .rm-action-btn { font-size:0.68em; padding:7px 2px; }
}
@media (min-width:768px) {
    .rm-panel { padding:24px 32px; }
    .rm-chart-text { font-size:18px; }
    .rm-tabs { gap:4px; padding:10px 20px; }
    .rm-tab { font-size:0.85em; padding:10px 8px; }
}