:root{--mvp-bg: var(--ion-background-color, #fff);--mvp-text: var(--ion-text-color, #1a1a1a);--mvp-accent: #e94560;--mvp-accent-hover: #ff6b81;--mvp-accent-soft: rgba(233, 69, 96, .1);--mvp-border: var(--ion-border-color, #d0d0d8);--mvp-section-header: #c87900;--mvp-surface: #f2f2f7;--mvp-text-secondary: #6e6e80}.hidden{display:none!important}#viewer-content{--overflow: hidden}.tab-panel{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch}#panel-practice{display:flex;flex-direction:column;overflow:hidden}.tab-panel.hidden{display:none!important}#welcome-screen{display:flex;align-items:center;justify-content:center;height:100vh;height:100dvh;background:var(--ion-color-light, #f4f5f8)}.welcome-container{text-align:center;max-width:420px;padding:2rem}.welcome-logo{font-size:5rem;color:var(--mvp-accent);margin-bottom:1rem}.welcome-container h1{font-size:1.8rem;font-weight:700;margin:.5rem 0}.welcome-subtitle{color:var(--ion-color-medium);font-size:1rem;margin-bottom:2rem}.welcome-actions,.welcome-sources{margin-top:1.5rem}.welcome-sources p{color:var(--ion-color-medium);font-size:.85rem;margin-bottom:.5rem}.source-chips{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}.lock-toggle{margin-top:2rem;--background: transparent}#lock-screen{display:flex;align-items:center;justify-content:center;height:100vh;height:100dvh;background:var(--ion-color-dark, #1a1a1a);color:#fff}.lock-container{text-align:center}.lock-icon{font-size:4rem;color:var(--ion-color-primary);margin-bottom:1rem}.lock-container h2{margin:.5rem 0}.lock-container p{color:#fff9;margin-bottom:1.5rem}ion-split-pane{--side-width: 320px;--side-max-width: 360px}ion-menu #search-bar{padding-top:4px;padding-bottom:8px}.genre-filter{padding-bottom:0}.genre-chips{display:flex;flex-wrap:wrap;gap:4px;padding-bottom:8px}.genre-chips ion-chip{flex-shrink:0;--background: transparent;--color: var(--ion-color-medium);font-size:.8rem;height:28px}.genre-chips ion-chip[color=primary]{--background: var(--mvp-accent-soft);--color: var(--mvp-accent);font-weight:600}.sidebar-thumb{--size: 40px;--border-radius: 6px}.sidebar-thumb-placeholder{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--mvp-surface);border-radius:6px;font-size:1.2rem}.storage-bar{display:flex;align-items:center;justify-content:space-between;padding:0;font-size:.75rem;color:var(--ion-color-medium)}#sheets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;padding:16px}.sheet-card{cursor:pointer;border-radius:8px;overflow:hidden;background:var(--mvp-surface, #f2f2f7);border:1px solid var(--mvp-border, transparent);padding:1rem;transition:transform .15s,box-shadow .15s}.sheet-card:active{transform:scale(.97)}.sheet-thumb{width:100%;aspect-ratio:1;background-color:#1a1a2e;background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center;border-radius:6px;overflow:hidden;margin-bottom:.75rem}.sheet-thumb ion-icon{font-size:3rem;color:var(--ion-color-medium)}.thumb-placeholder{font-size:3rem}.sheet-info{padding:0}.sheet-title{font-size:.9rem;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ion-text-color, #1a1a1a)}.sheet-artist{font-size:.8rem;color:var(--mvp-text-secondary, #666680);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#library-empty,#empty-state{margin-top:3rem}.empty-icon{font-size:4rem;color:var(--ion-color-medium);margin-bottom:1rem}#empty-state h2{color:var(--ion-color-dark);font-weight:600}#empty-state p{color:var(--ion-color-medium);margin-bottom:1.5rem}.pdf-viewer{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative}#pdf-pages{display:flex;flex-direction:column;align-items:center;padding:8px;gap:8px}.pdf-page{max-width:100%;box-shadow:0 1px 4px #0000001f;border-radius:2px}.pdf-viewer.marking-mode{cursor:crosshair}.line-marker{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed rgba(79,195,247,.45);pointer-events:auto;cursor:pointer;z-index:5}.line-marker:hover{border-top-color:#e94560}.practice-layout{display:flex;flex:1;min-height:0;overflow:hidden}#practice-bar{display:flex;align-items:center;gap:4px;padding:4px 8px;height:44px;min-height:44px;border-top:1px solid var(--mvp-border);border-bottom:1px solid var(--mvp-border);background:var(--ion-toolbar-background, var(--ion-background-color, #fff));z-index:10;cursor:pointer}#practice-bar .bar-btn{--padding-start: 6px;--padding-end: 6px;margin:0;min-width:36px;height:36px}#practice-bar .bar-speed{flex:1;min-width:80px;max-width:200px;--bar-height: 4px;--knob-size: 18px;margin:0 4px}#practice-bar .bar-speed-label{font-size:.75rem;color:var(--ion-color-medium);min-width:20px;text-align:center}#practice-bar .bar-mode{display:flex;align-items:center;gap:2px;font-size:.7rem;--padding-start: 6px;--padding-end: 8px}#practice-bar .bar-mode #bar-mode-label{font-size:.7rem;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#practice-bar .bar-expand{margin-left:auto}.practice-controls{max-height:0;overflow:hidden;transition:max-height .3s ease;background:var(--ion-background-color, #fff);border-bottom:1px solid var(--mvp-border)}.practice-controls.open{max-height:60vh;overflow-y:auto;-webkit-overflow-scrolling:touch}.drawer-handle{display:flex;justify-content:center;padding:6px 0 2px;cursor:pointer}.drawer-handle:after{content:"";width:36px;height:4px;background:var(--ion-color-medium-shade, #999);border-radius:2px;opacity:.4}.drawer-row{display:flex;align-items:center;gap:6px;padding:4px 12px;flex-wrap:wrap}.drawer-label{font-size:.7rem;font-weight:600;color:var(--ion-color-medium);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}.drawer-select{font-size:.8rem;padding:4px 8px;border:1px solid var(--mvp-border, #ccc);border-radius:6px;background:var(--ion-background-color, #fff);color:var(--ion-text-color, #1a1a1a);min-width:80px;appearance:auto}.drawer-range{flex:1;min-width:60px;max-width:140px;height:20px;accent-color:var(--mvp-accent, #e94560)}.drawer-range-sm{max-width:90px}.drawer-val{font-size:.75rem;color:var(--ion-color-medium);min-width:20px;text-align:center}.drawer-num{width:56px;padding:3px 6px;font-size:.8rem;border:1px solid var(--mvp-border, #ccc);border-radius:6px;background:var(--ion-background-color, #fff);color:var(--ion-text-color, #1a1a1a);text-align:center}.drawer-btn{padding:4px 10px;font-size:.75rem;border:1px solid var(--mvp-border, #ccc);border-radius:6px;background:var(--ion-background-color, #fff);color:var(--ion-text-color, #1a1a1a);cursor:pointer;white-space:nowrap}.drawer-btn:active{opacity:.7}.drawer-btn-danger{color:var(--ion-color-danger, #e94560);border-color:var(--ion-color-danger, #e94560)}.drawer-transcript{max-height:60px;overflow-y:auto;font-size:.75rem;background:var(--ion-color-light, #f4f5f8);border-radius:6px;padding:6px 10px;margin:4px 12px;line-height:1.3}.control-group h4{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ion-color-medium);margin-bottom:6px}.control-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}.control-row label{font-size:.8rem;color:var(--ion-color-medium);min-width:48px}.control-row ion-input,.control-row ion-select{flex:1}.marker-actions{display:flex;gap:6px;flex-wrap:wrap}.marker-actions ion-button{--padding-start: 8px;--padding-end: 8px;font-size:.8rem}#marker-count{font-size:.75rem;color:var(--ion-color-medium)}#tempo-info,#section-info{font-size:.75rem;color:var(--ion-color-medium);padding:4px 0}#transcript-output{max-height:100px;overflow-y:auto;font-size:.8rem;background:var(--ion-color-light);border-radius:8px;padding:8px;line-height:1.4}#focus-strip-wrapper{position:relative;width:100%;height:160px;min-height:80px;max-height:50vh;border-top:1px solid var(--mvp-accent, #e94560);background:#0f0f0f;display:flex;flex-direction:column}.focus-resize-handle{height:18px;cursor:ns-resize;display:flex;align-items:center;justify-content:center;gap:8px;background:#ffffff0a;touch-action:none;position:relative;user-select:none}.focus-label{font-size:.65rem;font-weight:600;color:#ffffff8c;text-transform:uppercase;letter-spacing:.08em;pointer-events:none}.focus-grip{width:32px;height:3px;background:#fff3;border-radius:2px;pointer-events:none}.focus-close-btn{position:absolute;right:2px;top:50%;transform:translateY(-50%);--padding-start: 4px;--padding-end: 4px;height:18px;min-height:18px;font-size:.7rem;opacity:.4}.focus-close-btn:hover{opacity:.8}#focus-canvas{flex:1;width:100%;display:block}.coming-soon-btn{opacity:.35!important}.coming-soon-badge{font-size:9px;vertical-align:middle;margin-left:4px}.coming-soon-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;inset:0;z-index:10;padding:32px}#account-avatar{width:36px;height:36px;border-radius:50%}#listener-panel{padding:16px}.audio-canvas-wrapper{width:100%;height:120px;background:#0f0f0f;border-radius:10px;overflow:hidden;margin-bottom:16px}.audio-canvas-wrapper canvas{width:100%;height:100%;display:block}.tuning-indicator{position:relative;height:32px;background:var(--ion-color-light-shade);border-radius:16px;overflow:hidden;margin-bottom:16px}.tuning-bar{position:absolute;top:4px;bottom:4px;width:6px;background:var(--ion-color-primary);border-radius:3px;left:50%;transform:translate(-50%);transition:left .1s}.tuning-center{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--ion-color-success);transform:translate(-50%)}.pitch-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}.pitch-card{text-align:center;padding:12px 8px;background:var(--ion-color-light);border-radius:10px}.pitch-card .value{font-size:1.5rem;font-weight:700;color:var(--ion-text-color)}.pitch-card .label{font-size:.7rem;color:var(--ion-color-medium);text-transform:uppercase;margin-top:2px}.listen-actions{display:flex;gap:10px;justify-content:center}.upgrade-hero{padding:2rem 0 1.5rem}.upgrade-icon{font-size:4rem;color:var(--ion-color-primary);margin-bottom:.5rem}.upgrade-hero h2{margin:.5rem 0 .25rem}.upgrade-hero p{color:var(--ion-color-medium)}#mobile-viewer-bar{--background: var(--ion-toolbar-background, var(--ion-background-color))}#mobile-viewer-bar ion-title{font-size:.9rem}#quick-action-bar{display:flex;justify-content:space-around;padding:6px 0;background:var(--ion-toolbar-background, var(--ion-background-color));border-top:1px solid var(--mvp-border);box-sizing:border-box}#quick-action-bar ion-button{--padding-start: 12px;--padding-end: 12px;font-size:.7rem}#mobile-tools-overlay{position:fixed;bottom:0;left:0;right:0;z-index:100;pointer-events:none}#mobile-tools-overlay:not(.hidden){pointer-events:auto}.tools-backdrop{position:fixed;inset:0;background:#0006;z-index:99}.tools-sheet{position:relative;z-index:101;background:var(--ion-background-color);border-radius:14px 14px 0 0;padding:12px 16px env(safe-area-inset-bottom);max-height:50vh;overflow-y:auto}.tools-sheet h4{font-size:.9rem;font-weight:600;margin-bottom:10px}body.practice-viewing ion-split-pane{--side-width: 0px}body.practice-viewing #tab-segment{display:none}body.dark{--ion-background-color: #0f0f0f;--ion-text-color: #b0b0c0;--ion-toolbar-background: #1a1a2e;--ion-color-light: #16213e;--ion-color-light-shade: #16213e;--ion-color-medium: #808098;--ion-item-background: transparent;--mvp-border: #2a2a4a;--mvp-surface: #16213e;--mvp-text-secondary: #808098;--mvp-section-header: #666680}body.dark #welcome-screen{background:#0a0a1a}body.dark .pdf-page{box-shadow:0 2px 12px #0006}body.dark .sheet-card{background:#16213e;border:1px solid #2a2a4a;box-shadow:none}body.dark .sheet-card:active{border-color:#e94560}body.dark .sheet-thumb{background-color:#1a1a2e}body.dark .pitch-card,body.dark #transcript-output{background:#16213e}body.dark .tuning-indicator{background:#1a1a2e}body.dark .drawer-select,body.dark .drawer-num,body.dark .drawer-btn{background:#1a1a2e;color:#b0b0c0;border-color:#2a2a4a}body.dark .drawer-transcript{background:#1a1a2e}body.dark .storage-bar{color:#666680}body.dark ion-split-pane{--border: .55px solid #2a2a4a}body.dark ion-menu ion-content{--background: #0a0a1a}body.dark ion-menu ion-toolbar{--background: #0a0a1a;--color: #c0c0d0;color:#c0c0d0}body.dark ion-menu ion-item{--background: transparent;--color: #a0a0b0}body.dark ion-footer{--ion-border-color: #2a2a4a}body.dark ion-footer ion-toolbar{--background: #0a0a1a;--border-color: #2a2a4a;border-top:.55px solid #2a2a4a}body.dark ion-menu ion-searchbar{--background: #1a1a2e;--color: #a0a0b0;--placeholder-color: #555570}body.dark #practice-bar{background:#1a1a2e;border-color:#2a2a4a}body.dark .practice-controls{background:#0f0f0f;border-color:#2a2a4a}body.dark ion-header ion-toolbar{--background: #1a1a2e;--color: #c0c0d0;--border-color: #2a2a4a;--border-width: 0}body.dark ion-header:after{background:#2a2a4a!important;height:.55px!important}body.dark ion-header{--ion-toolbar-border-color: #2a2a4a;--ion-border-color: #2a2a4a}body.dark .sheet-title{color:#c8c8d8}body.dark .sheet-artist{color:#666680}body.dark .focus-resize-handle{background:#e9456026;border-top-color:#e945604d}body.dark .focus-label{color:var(--mvp-accent)}body.dark #focus-strip-wrapper{background:#16213e;border-top-color:var(--mvp-accent)}body.dark #focus-canvas,body.dark .pdf-viewer{background:#16213e}body.dark .control-group{background:#16213e;border-color:#2a2a4a}body.dark #viewer-content{--background: #0f0f0f}body.dark #panel-library,body.dark .practice-layout{background:#0f0f0f}body.dark ion-segment{--background: transparent}body.dark #source-segment{--background: transparent}body.dark ::-webkit-scrollbar-track{background:#0f0f0f}body.dark ::-webkit-scrollbar-thumb{background:#2a2a4a}body.dark ::-webkit-scrollbar-thumb:hover{background:#666680}.wizard-card{border:1px solid var(--mvp-border, #ccc);border-radius:10px;padding:12px;margin-bottom:12px;background:var(--ion-color-light, #f4f5f8)}.wizard-filename{font-size:.7rem;color:var(--ion-color-medium);margin-bottom:8px;word-break:break-all}.wizard-fields{display:flex;gap:8px;flex-wrap:wrap}.wizard-field{flex:1;min-width:120px}.wizard-field label{display:block;font-size:.7rem;font-weight:600;text-transform:uppercase;color:var(--ion-color-medium);margin-bottom:3px}.wizard-field input{width:100%;padding:6px 10px;font-size:.9rem;border:1px solid var(--mvp-border, #ccc);border-radius:8px;background:var(--ion-background-color, #fff);color:var(--ion-text-color, #1a1a1a);box-sizing:border-box}.wizard-preview{margin-top:6px;font-size:.75rem;color:var(--ion-color-primary)}.wizard-search-btn{display:block;width:100%;margin-top:8px;padding:7px 12px;font-size:.8rem;font-weight:600;border:1px solid var(--mvp-accent, #e94560);border-radius:8px;background:transparent;color:var(--mvp-accent, #e94560);cursor:pointer;transition:background .15s,color .15s}.wizard-search-btn:hover{background:var(--mvp-accent, #e94560);color:#fff}.wizard-search-btn:disabled{opacity:.5;cursor:default}.wizard-match-header{font-size:.75rem;font-weight:600;color:var(--ion-color-medium);text-transform:uppercase;letter-spacing:.03em;margin:10px 0 6px}.wizard-match-list{max-height:220px;overflow-y:auto;margin-bottom:4px}.wizard-match-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .15s;border:2px solid transparent}.wizard-match-row:hover{background:#0000000a}.wizard-match-row.selected{background:#e9456014;border-color:var(--mvp-accent, #e94560)}.wizard-match-thumb{width:44px;height:44px;border-radius:6px;object-fit:cover;flex-shrink:0}.wizard-match-info{min-width:0}.wizard-match-track{font-size:.85rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wizard-match-artist{font-size:.72rem;color:var(--ion-color-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wizard-artwork-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin-top:10px}.wizard-art-option{display:flex;flex-direction:column;align-items:center;cursor:pointer;border:2px solid transparent;border-radius:8px;padding:4px;transition:border-color .15s,transform .15s}.wizard-art-option:hover{transform:scale(1.04)}.wizard-art-option.selected{border-color:var(--mvp-accent, #e94560)}.wizard-art-option img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;background:#1a1a2e}.wizard-art-none{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;border-radius:6px;background:var(--mvp-surface, #f2f2f7);font-size:2rem}.wizard-art-label{font-size:.65rem;color:var(--ion-color-medium);margin-top:3px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.wizard-art-loading,.wizard-art-empty{grid-column:1 / -1;text-align:center;font-size:.8rem;color:var(--ion-color-medium);padding:12px 0}body.dark .wizard-card{background:#16213e;border-color:#2a2a4a}body.dark .wizard-field input{background:#0f0f0f;color:#eaeaea;border-color:#2a2a4a}body.dark .wizard-art-none{background:#1a1a2e}body.dark .wizard-art-option img{background:#0f0f0f}body.dark .wizard-match-row:hover{background:#ffffff0d}body.dark .wizard-match-row.selected{background:#e9456026}.drive-breadcrumb{padding-bottom:4px}.drive-progress{font-size:.8rem;color:var(--ion-color-medium)}body.dark #drive-modal ion-toolbar{--background: #1a1a2e;--color: #c0c0d0}body.dark #drive-modal ion-content{--background: #0a0a1a;--ion-background-color: #0a0a1a}body.dark #drive-modal ion-item{--background: transparent;--color: #c0c0d0}body.dark #drive-modal ion-footer ion-toolbar{--background: #1a1a2e}body.dark #drive-modal ion-button{--color: #fff;color:#fff}@media(max-width:767px){.welcome-container{padding:1.5rem}.welcome-logo{font-size:3.5rem}.welcome-container h1{font-size:1.5rem}ion-split-pane{--side-width: 100%}.practice-layout{flex-direction:column}#practice-bar .bar-speed{max-width:120px}#practice-bar .bar-mode #bar-mode-label{display:none}#sheets-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;padding:12px}.pitch-cards{grid-template-columns:repeat(3,1fr);gap:6px}#desktop-viewer-title{display:none}}@media(min-width:768px){#mobile-viewer-bar,#quick-action-bar,#mobile-tools-overlay{display:none!important}#sheets-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}}#main-tabs ion-segment-button{--color: var(--mvp-text-secondary, #6e6e80);--color-checked: var(--mvp-accent);--indicator-color: transparent;--indicator-height: 3px;font-weight:500;letter-spacing:.01em;padding-top:8px;padding-bottom:4px}#main-tabs ion-segment-button::part(indicator){background:var(--mvp-accent);height:3px;border-radius:2px}#history-section ion-list-header{--color: var(--mvp-section-header);font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}ion-menu ion-item[aria-selected=true]{--background: var(--mvp-accent-soft);--color: var(--mvp-accent);font-weight:600}#practice-bar .bar-btn{--color: var(--mvp-text-secondary, #6e6e80)}#practice-bar #btn-auto-scroll{--color: var(--mvp-accent)}#practice-bar #btn-auto-scroll.scrolling{--color: var(--ion-color-success, #2dd36f)}#practice-bar .bar-speed{--bar-background: var(--ion-color-light-shade, #e0e0e0);--bar-background-active: var(--mvp-accent);--knob-background: var(--mvp-accent)}ion-badge[color=medium]{--background: var(--mvp-accent-soft);--color: var(--mvp-accent)}.focus-resize-handle{border-top:1px solid rgba(233,69,96,.25)}.focus-grip{background:#e9456059}@media(min-width:1024px){ion-split-pane{--side-width: 350px}#pdf-pages{padding:16px;max-width:900px;margin:0 auto}#sheets-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;padding:20px}}@supports (padding: env(safe-area-inset-bottom)){#quick-action-bar{padding-bottom:calc(6px + env(safe-area-inset-bottom))}.tools-sheet{padding-bottom:calc(12px + env(safe-area-inset-bottom))}}