:root{--color-primary: #6366f1;--color-primary-dark: #4f46e5;--color-primary-light: #a5b4fc;--color-primary-bg: #eef2ff;--color-accent: #f59e0b;--color-accent-light: #fef3c7;--color-success: #10b981;--color-success-light: #d1fae5;--color-success-dark: #059669;--color-danger: #ef4444;--color-danger-light: #fee2e2;--color-bg: #f8fafc;--color-surface: #ffffff;--color-border: #e2e8f0;--color-text: #1e293b;--color-text-secondary: #64748b;--color-text-muted: #94a3b8;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0,0,0,.05);--shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.04);--font-sans: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--sidebar-width: 280px}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:var(--font-sans);font-size:15px;line-height:1.6;color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased}h1,h2,h3,h4{margin:0 0 var(--space-md);line-height:1.3;font-weight:700}h1{font-size:1.75rem}h2{font-size:1.35rem}h3{font-size:1.1rem}a{color:var(--color-primary);text-decoration:none;transition:color .15s}a:hover{color:var(--color-primary-dark)}button{font:inherit;cursor:pointer;border:none;border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);transition:all .15s}.app-shell{display:flex;min-height:100vh}.app-sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-width);background:var(--color-surface);border-right:1px solid var(--color-border);overflow-y:auto;padding:var(--space-lg) 0;z-index:100;display:flex;flex-direction:column}.app-sidebar__logo{padding:0 var(--space-lg);margin-bottom:var(--space-xl);font-size:1.1rem;font-weight:800;color:var(--color-primary);display:flex;align-items:center;gap:var(--space-sm)}.app-sidebar__logo-icon{font-size:1.5rem}.app-main{margin-left:var(--sidebar-width);flex:1;padding:var(--space-xl) var(--space-2xl);max-width:900px}.app-nav{display:flex;flex-direction:column;gap:var(--space-xs);padding:0 var(--space-sm)}.app-nav a{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);color:var(--color-text-secondary);font-size:.9rem;font-weight:500;transition:all .15s}.app-nav a:hover{background:var(--color-primary-bg);color:var(--color-primary)}.app-nav a[aria-current=page]{background:var(--color-primary-bg);color:var(--color-primary-dark);font-weight:600}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-lg);box-shadow:var(--shadow-sm)}.card--elevated{box-shadow:var(--shadow-md)}.btn{display:inline-flex;align-items:center;gap:var(--space-sm);font-weight:600;font-size:.875rem}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-dark)}.btn-outline{background:transparent;border:1px solid var(--color-border);color:var(--color-text)}.btn-outline:hover{background:var(--color-bg);border-color:var(--color-primary-light)}.btn-success{background:var(--color-success);color:#fff}.btn-success:hover{background:var(--color-success-dark)}.btn-danger{background:var(--color-danger);color:#fff}.button-link{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;text-decoration:none;transition:background .15s}.button-link:hover{background:var(--color-primary-dark);color:#fff}.status-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-full);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em}.status-badge--not-started{background:var(--color-bg);color:var(--color-text-muted);border:1px solid var(--color-border)}.status-badge--in-progress{background:var(--color-accent-light);color:#92400e}.status-badge--completed{background:var(--color-success-light);color:var(--color-success-dark)}.progress-indicator{display:flex;flex-direction:column;gap:var(--space-xs);margin:var(--space-sm) 0 var(--space-md)}.progress-indicator--compact{margin:0;flex-direction:row;align-items:center;gap:var(--space-sm)}.progress-indicator__row{display:flex;align-items:center;gap:var(--space-sm)}.progress-indicator__label,.progress-indicator__percentage{font-size:.85rem;color:var(--color-text-secondary);font-weight:500}.progress-indicator__completed-badge{background:var(--color-success);color:#fff;padding:2px 10px;border-radius:var(--radius-full);font-size:.75rem;font-weight:700}.progress-indicator__bar{width:100%;height:8px;background:var(--color-border);border-radius:var(--radius-full);overflow:hidden}.progress-indicator--compact .progress-indicator__bar{width:60px;height:6px}.progress-indicator__fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-success));border-radius:var(--radius-full);transition:width .3s ease-out}.progress-indicator__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.metronome-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-lg);box-shadow:var(--shadow-sm);margin:var(--space-md) 0}.metronome-panel__bpm-form{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}.metronome-panel__bpm-label{display:inline-flex;align-items:center;gap:var(--space-sm);font-weight:600;color:var(--color-text-secondary)}.metronome-panel__bpm-input{width:5rem;padding:var(--space-sm);font:inherit;font-size:1.1rem;font-weight:700;text-align:center;border:2px solid var(--color-border);border-radius:var(--radius-sm);transition:border-color .15s}.metronome-panel__bpm-input:focus{outline:none;border-color:var(--color-primary)}.metronome-panel__controls{display:flex;gap:var(--space-sm);margin-top:var(--space-sm)}.metronome-panel__controls button{background:var(--color-primary);color:#fff;font-weight:600;padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-sm)}.metronome-panel__controls button:hover{background:var(--color-primary-dark)}.metronome-panel__beat-indicator{width:14px;height:14px;border-radius:50%;background:var(--color-border);margin-top:var(--space-sm);transition:background .1s}.metronome-panel__beat-indicator--running{background:var(--color-accent);box-shadow:0 0 8px var(--color-accent)}.metronome-panel__validation{color:var(--color-danger);font-size:.8rem;margin-top:var(--space-xs)}.metronome-panel__audio-error{color:var(--color-danger);font-size:.85rem}.metronome-panel__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.lesson-view__metronome-row{display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:flex-start}.bpm-recent-display{font-size:.9rem;color:var(--color-text-secondary);padding:var(--space-sm) var(--space-md);background:var(--color-bg);border-radius:var(--radius-sm);border:1px solid var(--color-border)}.goal-checklist{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-lg);margin:var(--space-lg) 0;box-shadow:var(--shadow-sm)}.goal-checklist__heading{margin:0 0 var(--space-md);font-size:1.1rem;display:flex;align-items:center;gap:var(--space-sm)}.goal-checklist__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-sm)}.goal-checklist__item{padding:var(--space-sm);border-radius:var(--radius-sm);transition:background .1s}.goal-checklist__item:hover{background:var(--color-bg)}.goal-checklist__row{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}.goal-checklist__label{display:flex;align-items:center;gap:var(--space-sm);cursor:pointer;flex:1;min-width:0}.goal-checklist__label input[type=checkbox]{width:18px;height:18px;accent-color:var(--color-success);cursor:pointer}.goal-checklist__description{font-size:.9rem}.goal-checklist__bpm-button{flex-shrink:0;padding:4px 12px;font-size:.78rem;font-weight:600;background:var(--color-primary-bg);color:var(--color-primary-dark);border:1px solid var(--color-primary-light);border-radius:var(--radius-full)}.goal-checklist__bpm-button:hover{background:var(--color-primary-light)}.goal-checklist__completed-at{margin-left:26px;font-size:.78rem;color:var(--color-success-dark)}.notation-gallery__pages{display:flex;flex-direction:column;gap:var(--space-lg);margin:var(--space-md) 0}.notation-gallery__page{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-md);box-shadow:var(--shadow-sm)}.notation-gallery__page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}.notation-gallery__page-caption{font-size:.85rem;color:var(--color-text-secondary);font-style:italic}.notation-gallery__zoom-btn{padding:4px 10px;font-size:.78rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.notation-gallery__zoom-btn:hover{background:var(--color-border)}.notation-gallery__lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1200;background:#0f172af2;display:flex;flex-direction:column;align-items:center;padding:var(--space-lg);overflow-y:auto}.notation-gallery__lightbox-toolbar{display:flex;gap:var(--space-md);align-items:center;margin-bottom:var(--space-md)}.notation-gallery__lightbox-toolbar button{color:#fff;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);padding:var(--space-sm) var(--space-md)}.notation-gallery__lightbox-toolbar button:hover{background:#fff3}.notation-gallery__lightbox-toolbar button:disabled{opacity:.3;cursor:not-allowed}.notation-gallery__lightbox-counter{color:#fff;font-size:.85rem}.notation-gallery__lightbox-image{max-width:95vw;max-height:85vh;object-fit:contain;border-radius:var(--radius-sm)}.annotatable-image{margin:var(--space-sm) 0}.annotatable-image__toolbar{display:flex;gap:var(--space-sm);margin-bottom:var(--space-sm);align-items:center;flex-wrap:wrap}.annotatable-image__tool{padding:4px 10px;font-size:.78rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.annotatable-image__tool--active{background:var(--color-primary-bg);border-color:var(--color-primary);color:var(--color-primary-dark);font-weight:600}.annotatable-image__tool:disabled{opacity:.4;cursor:not-allowed}.annotatable-image__count{font-size:.75rem;color:var(--color-text-muted)}.annotatable-image__canvas-container{position:relative;width:100%}.annotatable-image__img{display:block;width:100%;height:auto;border-radius:var(--radius-sm)}.annotatable-image__canvas{position:absolute;top:0;left:0;cursor:crosshair;touch-action:none}.lesson-notes{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-lg);margin:var(--space-lg) 0;box-shadow:var(--shadow-sm)}.lesson-notes__heading{margin:0 0 var(--space-sm);font-size:1.1rem}.lesson-notes__textarea{width:100%;min-height:120px;padding:var(--space-md);font:inherit;font-size:.9rem;line-height:1.6;border:2px solid var(--color-border);border-radius:var(--radius-sm);resize:vertical;box-sizing:border-box;transition:border-color .15s}.lesson-notes__textarea:focus{outline:none;border-color:var(--color-primary)}.lesson-notes__status{margin:var(--space-xs) 0 0;font-size:.75rem;color:var(--color-success-dark)}.lesson-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-sm)}.lesson-list__item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);transition:background .1s;flex-wrap:wrap}.lesson-list__item:hover{background:var(--color-bg)}.lesson-list__item a{font-weight:500}.method-book-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-sm)}.method-book-list__item{padding:var(--space-md) var(--space-lg);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:all .15s}.method-book-list__item:hover{box-shadow:var(--shadow-md);border-color:var(--color-primary-light)}.method-book-list__item a{font-weight:600;font-size:1rem}.most-recent-lesson-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-lg);margin:var(--space-md) 0;box-shadow:var(--shadow-md)}.most-recent-lesson-card__title{margin:0 0 var(--space-sm);font-size:1.2rem}.home-empty-state{display:flex;flex-direction:column;gap:var(--space-md);align-items:flex-start;padding:var(--space-xl);background:var(--color-primary-bg);border-radius:var(--radius-lg);border:1px dashed var(--color-primary-light)}.status-summary,.goals-total-card,.bpm-total-card,.aggregated-bpm-chart,.lesson-link-list{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-lg);margin:var(--space-md) 0;box-shadow:var(--shadow-sm)}.status-summary__heading,.goals-total-card__heading,.bpm-total-card__heading,.lesson-link-list__heading{margin:0 0 var(--space-md);font-size:1rem;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.04em;font-weight:700;font-size:.8rem}.status-summary__list{display:flex;flex-wrap:wrap;gap:var(--space-xl)}.status-summary__row{display:flex;flex-direction:column}.status-summary__count{font-size:2rem;font-weight:800;color:var(--color-text);margin:0}.status-summary__label{font-size:.8rem;color:var(--color-text-secondary);margin:0}.status-summary__total{margin:var(--space-md) 0 0;font-size:.85rem;color:var(--color-text-muted)}.goals-total-card__summary,.bpm-total-card__summary{margin:0 0 var(--space-sm);font-size:.95rem}.goals-total-card__bar{width:100%;height:8px;background:var(--color-border);border-radius:var(--radius-full);overflow:hidden}.goals-total-card__fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-success));transition:width .3s}.lesson-link-list__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-sm)}.lesson-link-list__item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) 0;flex-wrap:wrap}.toaster{position:fixed;bottom:var(--space-lg);right:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm);z-index:2000;max-width:380px}.toaster__toast{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);background:var(--color-text);color:#fff;box-shadow:var(--shadow-lg);animation:slideIn .2s ease-out}.toaster__toast--error{background:var(--color-danger)}.toaster__message{flex:1;font-size:.9rem}.toaster__close{padding:0;font-size:1.2rem;color:inherit;background:transparent;border:0;opacity:.7}.toaster__close:hover{opacity:1}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.loading-screen,.manifest-load-error-screen{max-width:480px;margin:6rem auto;padding:var(--space-xl);text-align:center}.manifest-load-error-screen__detail{margin:var(--space-md) 0;color:var(--color-danger);word-break:break-word;font-size:.85rem}.delete-confirm-dialog__backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a80;display:flex;align-items:center;justify-content:center;z-index:1500}.delete-confirm-dialog{background:var(--color-surface);padding:var(--space-xl);border-radius:var(--radius-lg);max-width:400px;width:calc(100% - 2rem);box-shadow:var(--shadow-lg)}.delete-confirm-dialog__title{margin:0 0 var(--space-sm)}.delete-confirm-dialog__message{margin:0 0 var(--space-lg);color:var(--color-text-secondary)}.delete-confirm-dialog__actions{display:flex;gap:var(--space-sm);justify-content:flex-end}.delete-confirm-dialog__cancel{background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-text)}.delete-confirm-dialog__confirm{background:var(--color-danger);color:#fff}.bpm-record-list{list-style:none;margin:var(--space-md) 0;padding:0}.bpm-record-list__item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-border);flex-wrap:wrap}.bpm-record-list__item:last-child{border-bottom:none}.bpm-record-list__bpm{font-weight:700;font-size:1rem;color:var(--color-primary-dark)}.bpm-record-list__source,.bpm-record-list__duration{font-size:.8rem;color:var(--color-text-muted)}.bpm-record-list__timestamp{font-size:.8rem;color:var(--color-text-secondary)}.bpm-record-list__delete{margin-left:auto;background:transparent;color:var(--color-danger);border:1px solid var(--color-danger-light);font-size:.78rem;padding:2px 8px;border-radius:var(--radius-sm)}.bpm-record-list__delete:hover{background:var(--color-danger-light)}.bpm-history-chart,.aggregated-bpm-chart{margin:var(--space-md) 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.demo-player{margin:var(--space-md) 0}.demo-player__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-md)}.demo-player__title{font-size:.95rem;margin:0 0 var(--space-xs)}.demo-player__error{padding:var(--space-sm);background:var(--color-danger-light);border-radius:var(--radius-sm);font-size:.85rem}.resource-list{margin:var(--space-md) 0}.resource-list__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-sm)}.resource-list__item a{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.9rem;transition:all .15s}.resource-list__item a:hover{border-color:var(--color-primary-light);background:var(--color-primary-bg)}.course-nav{display:flex;flex-direction:column;padding:0 var(--space-sm)}.course-nav__back{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-md);font-size:.85rem;font-weight:600;color:var(--color-primary);border-radius:var(--radius-sm);transition:background .15s}.course-nav__back:hover{background:var(--color-primary-bg)}.course-nav__title{padding:0 var(--space-md);margin:0 0 var(--space-md);font-size:.85rem;font-weight:700;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.03em;line-height:1.4}.course-nav__lessons{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}.course-nav__lesson{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);font-size:.82rem;color:var(--color-text-secondary);text-decoration:none;transition:all .1s;line-height:1.3}.course-nav__lesson:hover{background:var(--color-bg);color:var(--color-text)}.course-nav__lesson--active{background:var(--color-primary-bg);color:var(--color-primary-dark);font-weight:600}.course-nav__lesson-number{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;background:var(--color-border);color:var(--color-text-muted);border-radius:50%}.course-nav__lesson--active .course-nav__lesson-number{background:var(--color-primary);color:#fff}.course-nav__lesson-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.course-nav__lesson-progress{flex-shrink:0;font-size:.7rem;font-weight:600;color:var(--color-primary)}.course-nav__lesson-check{flex-shrink:0;font-size:.75rem;color:var(--color-success);font-weight:700}.app-sidebar__spacer{flex:1}.user-menu{padding:var(--space-md) var(--space-lg);border-top:1px solid var(--color-border);margin-top:var(--space-md)}.user-menu__sign-in{width:100%;padding:var(--space-sm) var(--space-md);background:var(--color-primary);color:#fff;font-weight:600;font-size:.85rem;border-radius:var(--radius-sm);text-align:center}.user-menu__sign-in:hover{background:var(--color-primary-dark)}.user-menu__hint{margin:var(--space-sm) 0 0;font-size:.75rem;color:var(--color-text-muted);line-height:1.4}.user-menu__info{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm)}.user-menu__avatar{width:28px;height:28px;border-radius:50%}.user-menu__name{font-size:.82rem;font-weight:600;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-menu__sync-status{display:block;font-size:.75rem;color:var(--color-success-dark);margin-bottom:var(--space-sm)}.user-menu__sign-out{width:100%;padding:4px var(--space-sm);background:transparent;border:1px solid var(--color-border);color:var(--color-text-secondary);font-size:.78rem;border-radius:var(--radius-sm);text-align:center}.user-menu__sign-out:hover{background:var(--color-bg)}.user-menu__loading{font-size:.8rem;color:var(--color-text-muted)}.home-landing{text-align:center;padding:var(--space-2xl) 0}.home-landing__title{font-size:2.2rem;margin-bottom:var(--space-sm)}.home-landing__subtitle{font-size:1.1rem;color:var(--color-text-secondary);max-width:500px;margin:0 auto var(--space-2xl);line-height:1.6}.home-landing__features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-lg);margin-bottom:var(--space-2xl);text-align:left}.home-landing__feature{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-lg);box-shadow:var(--shadow-sm)}.home-landing__feature h3{margin:var(--space-sm) 0 var(--space-xs);font-size:1rem}.home-landing__feature p{margin:0;font-size:.85rem;color:var(--color-text-secondary);line-height:1.5}.home-landing__feature-icon{font-size:1.5rem}.home-landing__actions{display:flex;gap:var(--space-md);justify-content:center;flex-wrap:wrap}.home-landing__sign-in{padding:var(--space-md) var(--space-xl);font-size:1rem}.auth-gate{text-align:center;padding:var(--space-2xl);max-width:400px;margin:var(--space-2xl) auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.auth-gate h2{margin-bottom:var(--space-md)}.auth-gate p{color:var(--color-text-secondary);margin-bottom:var(--space-lg);line-height:1.5}.auth-gate__guest-hint{margin-top:var(--space-sm);font-size:.78rem;color:var(--color-text-muted)}.adv-metronome{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-lg);margin:var(--space-md) 0;box-shadow:var(--shadow-sm)}.adv-metronome__bpm-section{display:flex;align-items:center;justify-content:center;gap:var(--space-md);margin-bottom:var(--space-lg)}.adv-metronome__bpm-btn{width:40px;height:40px;border-radius:50%;background:var(--color-bg);border:2px solid var(--color-border);font-size:1.3rem;font-weight:700;display:flex;align-items:center;justify-content:center;color:var(--color-text)}.adv-metronome__bpm-form{display:flex;align-items:baseline;gap:var(--space-xs)}.adv-metronome__bpm-input{width:80px;font-size:2rem;font-weight:800;text-align:center;border:none;border-bottom:3px solid var(--color-primary);background:transparent;color:var(--color-text);padding:0}.adv-metronome__bpm-label{font-size:.9rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase}.adv-metronome__pattern{display:flex;gap:var(--space-sm);justify-content:center;flex-wrap:wrap;margin-bottom:var(--space-xs)}.adv-metronome__beat{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;transition:all .1s;border:2px solid transparent}.adv-metronome__beat--accent{background:var(--color-primary);color:#fff;border-color:var(--color-primary-dark)}.adv-metronome__beat--normal{background:var(--color-bg);color:var(--color-text);border-color:var(--color-border)}.adv-metronome__beat--mute{background:transparent;color:var(--color-text-muted);border-color:var(--color-border);border-style:dashed}.adv-metronome__beat--active{transform:scale(1.3);box-shadow:0 0 12px var(--color-accent);border-color:var(--color-accent)!important}.adv-metronome__pattern-hint{text-align:center;font-size:.75rem;color:var(--color-text-muted);margin:var(--space-xs) 0 var(--space-md)}.adv-metronome__muted-text{opacity:.5;text-decoration:line-through}.adv-metronome__row{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm);flex-wrap:wrap}.adv-metronome__row-label{font-size:.8rem;font-weight:600;color:var(--color-text-secondary);min-width:80px}.adv-metronome__chips{display:flex;gap:4px;flex-wrap:wrap}.adv-metronome__chip{padding:4px 10px;font-size:.75rem;font-weight:500;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-secondary)}.adv-metronome__chip:hover{border-color:var(--color-primary-light);color:var(--color-primary)}.adv-metronome__chip--active{background:var(--color-primary-bg);border-color:var(--color-primary);color:var(--color-primary-dark);font-weight:700}.adv-metronome__controls{display:flex;gap:var(--space-md);margin-top:var(--space-lg);justify-content:center}.adv-metronome__start-btn{padding:var(--space-md) var(--space-2xl);font-size:1rem;font-weight:700;background:var(--color-success);color:#fff;border-radius:var(--radius-full)}.adv-metronome__save-btn{padding:var(--space-sm) var(--space-lg);font-size:.85rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary)}.adv-metronome__save-btn:hover{border-color:var(--color-primary-light);color:var(--color-primary)}@media (max-width: 768px){:root{--sidebar-width: 0px}.app-sidebar{position:fixed;top:auto;bottom:0;left:0;right:0;width:100%;height:auto;border-right:none;border-top:1px solid var(--color-border);padding:0;flex-direction:row;overflow:visible;z-index:200;background:var(--color-surface);box-shadow:0 -2px 8px #0000000f}.app-sidebar__logo,.app-sidebar__spacer,.user-menu{display:none}.app-nav{flex-direction:row;justify-content:space-around;padding:var(--space-sm) 0;gap:0;width:100%}.app-nav a{flex-direction:column;align-items:center;gap:2px;padding:var(--space-xs) var(--space-sm);font-size:.7rem;text-align:center}.course-nav{flex-direction:row;align-items:center;padding:var(--space-sm);overflow-x:auto;gap:var(--space-sm)}.course-nav__back{margin-bottom:0;white-space:nowrap;font-size:.75rem;padding:var(--space-xs) var(--space-sm)}.course-nav__title{display:none}.course-nav__lessons{flex-direction:row;overflow-x:auto;gap:var(--space-xs);flex:1}.course-nav__lesson{white-space:nowrap;padding:var(--space-xs) var(--space-sm);font-size:.72rem;min-width:fit-content}.course-nav__lesson-title{max-width:80px}.app-main{margin-left:0;padding:var(--space-md);padding-bottom:80px;max-width:100%}h1{font-size:1.4rem}h2{font-size:1.15rem}.home-landing{padding:var(--space-lg) 0}.home-landing__title{font-size:1.6rem}.home-landing__subtitle{font-size:.95rem}.home-landing__features{grid-template-columns:1fr 1fr;gap:var(--space-md)}.home-landing__feature{padding:var(--space-md)}.home-landing__actions{flex-direction:column;align-items:stretch}.home-landing__sign-in,.adv-metronome{padding:var(--space-md)}.adv-metronome__bpm-input{font-size:1.6rem;width:70px}.adv-metronome__bpm-btn{width:36px;height:36px;font-size:1.1rem}.adv-metronome__pattern{gap:6px}.adv-metronome__beat{width:32px;height:32px;font-size:.75rem}.adv-metronome__row{flex-direction:column;align-items:flex-start;gap:var(--space-xs)}.adv-metronome__row-label{min-width:auto}.adv-metronome__chips{flex-wrap:wrap}.adv-metronome__controls{flex-direction:column;align-items:stretch}.adv-metronome__start-btn,.goal-checklist{padding:var(--space-md)}.goal-checklist__row{flex-direction:column;align-items:flex-start;gap:var(--space-xs)}.goal-checklist__bpm-button{margin-left:26px}.notation-gallery__page{padding:var(--space-sm)}.card{padding:var(--space-md)}.status-summary__list{gap:var(--space-md)}.status-summary__count{font-size:1.5rem}.method-book-list__item{padding:var(--space-md)}.lesson-list__item{padding:var(--space-sm);gap:var(--space-sm)}.bpm-record-list__item{flex-direction:column;align-items:flex-start;gap:var(--space-xs)}.bpm-record-list__delete{margin-left:0}.delete-confirm-dialog{margin:var(--space-md);max-width:calc(100vw - 2rem)}.notation-gallery__lightbox{padding:var(--space-sm)}.notation-gallery__lightbox-toolbar{gap:var(--space-sm);flex-wrap:wrap;justify-content:center}.notation-gallery__lightbox-toolbar button{padding:var(--space-xs) var(--space-sm);font-size:.8rem}.auth-gate{margin:var(--space-lg) auto;padding:var(--space-lg)}.toaster{bottom:70px;right:var(--space-sm);left:var(--space-sm);max-width:none}.lesson-notes{padding:var(--space-md)}.lesson-notes__textarea{min-height:100px}}@media (max-width: 400px){.home-landing__features{grid-template-columns:1fr}.adv-metronome__beat{width:28px;height:28px;font-size:.7rem}.adv-metronome__chip{font-size:.68rem;padding:3px 8px}}.custom-goals{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-lg);margin:var(--space-lg) 0;box-shadow:var(--shadow-sm)}.custom-goals__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}.custom-goals__heading{margin:0;font-size:1rem;display:flex;align-items:center;gap:var(--space-sm)}.custom-goals__count{font-size:.8rem;font-weight:600;color:var(--color-primary);background:var(--color-primary-bg);padding:2px 8px;border-radius:var(--radius-full)}.custom-goals__add-btn{padding:var(--space-xs) var(--space-md);font-size:.8rem;font-weight:600;background:var(--color-primary-bg);color:var(--color-primary-dark);border:1px solid var(--color-primary-light);border-radius:var(--radius-full)}.custom-goals__add-btn:hover{background:var(--color-primary-light)}.custom-goals__form{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-md);padding:var(--space-md);background:var(--color-bg);border-radius:var(--radius-sm)}.custom-goals__input{width:100%;padding:var(--space-sm) var(--space-md);font:inherit;font-size:.9rem;border:2px solid var(--color-border);border-radius:var(--radius-sm);box-sizing:border-box}.custom-goals__input:focus{outline:none;border-color:var(--color-primary)}.custom-goals__bpm-input{width:160px;padding:var(--space-sm) var(--space-md);font:inherit;font-size:.85rem;border:2px solid var(--color-border);border-radius:var(--radius-sm)}.custom-goals__bpm-input:focus{outline:none;border-color:var(--color-primary)}.custom-goals__form-actions{display:flex;gap:var(--space-sm)}.custom-goals__save,.custom-goals__cancel{padding:var(--space-xs) var(--space-md);font-size:.85rem}.custom-goals__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-xs)}.custom-goals__item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm);border-radius:var(--radius-sm);transition:background .1s}.custom-goals__item:hover{background:var(--color-bg)}.custom-goals__item--done .custom-goals__text{text-decoration:line-through;color:var(--color-text-muted)}.custom-goals__label{display:flex;align-items:center;gap:var(--space-sm);cursor:pointer;flex:1;min-width:0}.custom-goals__label input[type=checkbox]{width:18px;height:18px;accent-color:var(--color-success);cursor:pointer;flex-shrink:0}.custom-goals__text{font-size:.9rem}.custom-goals__bpm-badge{flex-shrink:0;font-size:.72rem;font-weight:600;padding:2px 8px;background:var(--color-primary-bg);color:var(--color-primary-dark);border-radius:var(--radius-full)}.custom-goals__delete{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--color-text-muted);background:transparent;border:none;border-radius:50%;padding:0}.custom-goals__delete:hover{color:var(--color-danger);background:var(--color-danger-light)}.custom-goals__empty{font-size:.85rem;color:var(--color-text-muted);margin:0}.practice-timer{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-lg);margin:var(--space-md) 0;box-shadow:var(--shadow-sm);text-align:center}.practice-timer__display{margin-bottom:var(--space-md)}.practice-timer__time{font-size:2.5rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--color-text);letter-spacing:-.02em}.practice-timer__hint{display:block;font-size:.85rem;color:var(--color-text-muted);margin-top:var(--space-xs)}.practice-timer__controls{display:flex;gap:var(--space-sm);justify-content:center;flex-wrap:wrap;margin-bottom:var(--space-md)}.practice-timer__btn{padding:var(--space-sm) var(--space-xl);font-size:.9rem;font-weight:600;border-radius:var(--radius-full)}.practice-timer__btn--start{background:var(--color-success);color:#fff}.practice-timer__btn--start:hover{background:var(--color-success-dark)}.practice-timer__btn--pause{background:var(--color-accent);color:#fff}.practice-timer__btn--pause:hover{background:#d97706}.practice-timer__btn--stop{background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border)}.practice-timer__btn--stop:hover{background:var(--color-border)}.practice-timer__stats{display:flex;justify-content:center;gap:var(--space-xl);padding-top:var(--space-md);border-top:1px solid var(--color-border)}.practice-timer__stat{display:flex;flex-direction:column;align-items:center;gap:2px}.practice-timer__stat-value{font-size:1.2rem;font-weight:700;color:var(--color-text)}.practice-timer__stat-label{font-size:.75rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.03em}@media (max-width: 768px){.practice-timer__time{font-size:2rem}.practice-timer__stats{gap:var(--space-lg)}}.adv-metronome--fixed{position:fixed;top:var(--space-lg);right:var(--space-lg);z-index:150;width:220px;box-shadow:var(--shadow-lg);margin:0}.adv-metronome{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-md);box-shadow:var(--shadow-sm)}.adv-metronome__sticky-bar{display:flex;align-items:center;gap:var(--space-xs);flex-wrap:wrap}.adv-metronome__dots{display:flex;gap:3px;align-items:center;margin:0 var(--space-xs)}.adv-metronome__dot{width:8px;height:8px;border-radius:50%;transition:all .1s}.adv-metronome__dot--accent{background:var(--color-primary)}.adv-metronome__dot--normal{background:var(--color-border)}.adv-metronome__dot--mute{background:transparent;border:1px dashed var(--color-border)}.adv-metronome__dot--active{transform:scale(1.6);box-shadow:0 0 6px var(--color-accent);background:var(--color-accent)!important}.adv-metronome__timer{font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--color-success-dark);background:var(--color-success-light);padding:1px 6px;border-radius:var(--radius-full)}.adv-metronome__toggle{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:.6rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:50%;color:var(--color-text-muted);margin-left:auto;flex-shrink:0}.adv-metronome__toggle:hover{color:var(--color-primary);border-color:var(--color-primary-light)}.adv-metronome__expanded{margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid var(--color-border)}.adv-metronome__bpm-section{display:none}.adv-metronome__bpm-input{width:45px;font-size:1.1rem;font-weight:800;text-align:center;border:none;border-bottom:2px solid var(--color-primary);background:transparent;color:var(--color-text);padding:0}.adv-metronome__bpm-input:focus{outline:none;border-bottom-color:var(--color-primary-dark)}.adv-metronome__bpm-label{font-size:.65rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase}.adv-metronome__bpm-form{display:flex;align-items:baseline;gap:2px}.adv-metronome__bpm-btn{width:26px;height:26px;border-radius:50%;background:var(--color-bg);border:1px solid var(--color-border);font-size:1rem;font-weight:700;display:flex;align-items:center;justify-content:center;color:var(--color-text);padding:0}.adv-metronome__bpm-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.adv-metronome__start-btn{width:30px;height:30px;border-radius:50%;font-size:.8rem;font-weight:700;background:var(--color-success);color:#fff;display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0}.adv-metronome__start-btn:hover{background:var(--color-success-dark)}.adv-metronome__start-btn--running{background:var(--color-danger)}.adv-metronome__start-btn--running:hover{background:#dc2626}@media (max-width: 768px){.adv-metronome--fixed{top:auto;bottom:70px;right:var(--space-sm);width:200px}}