.navbar{background:var(--surface);border-bottom:1px solid var(--border);z-index:100;justify-content:space-between;align-items:center;height:64px;padding:0 24px;display:flex;position:sticky;top:0;box-shadow:0 1px 4px #0000000a}.navbar-brand{color:var(--text);align-items:center;gap:10px;text-decoration:none;display:flex}.navbar-logo{font-size:24px}.navbar-title{color:var(--text);letter-spacing:-.5px;font-size:22px;font-weight:700}.navbar-links{align-items:center;gap:8px;display:flex}.navbar-links a,.navbar-links button{color:var(--text-light);border-radius:var(--radius-sm);background:0 0;border:none;padding:8px 16px;font-size:14px;font-weight:500;text-decoration:none;transition:all .2s}.navbar-links a:hover,.navbar-links button:hover{background:var(--background);color:var(--text)}.navbar-links .active{color:var(--primary);background:var(--primary-light)}.navbar-user{align-items:center;gap:12px;display:flex}.navbar-premium-badge{color:#fff;letter-spacing:.5px;text-transform:uppercase;background:linear-gradient(135deg,#f39c12,#e74c3c);border-radius:20px;padding:4px 10px;font-size:11px;font-weight:700}.navbar-avatar{background:var(--primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:14px;font-weight:600;display:flex}.mobile-menu-btn{color:var(--text);background:0 0;border:none;font-size:24px;display:none}@media (width<=768px){.navbar-links{display:none}.mobile-menu-btn{display:block}.navbar-links.open{background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow);flex-direction:column;padding:16px;display:flex;position:absolute;top:64px;left:0;right:0}}.piece-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);color:var(--text);border:2px solid #0000;padding:20px;text-decoration:none;transition:all .2s;display:block}.piece-card:hover{box-shadow:var(--shadow-lg);border-color:var(--primary);transform:translateY(-4px)}.piece-card-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.piece-card-grade{color:#fff;letter-spacing:.5px;text-transform:uppercase;border-radius:20px;padding:4px 10px;font-size:11px;font-weight:700}.piece-card-duration{color:var(--text-light);font-size:13px;font-weight:500}.piece-card-title{margin-bottom:4px;font-size:16px;font-weight:600;line-height:1.3}.piece-card-composer{color:var(--text-light);margin-bottom:12px;font-size:14px}.piece-card-meta{color:var(--text-light);gap:12px;font-size:12px;display:flex}.piece-card-meta span{background:var(--background);border-radius:4px;padding:3px 8px}.difficulty-selector{margin-bottom:24px}.difficulty-label{color:var(--text);margin-bottom:12px;font-size:14px;font-weight:600;display:block}.grade-options{flex-wrap:wrap;gap:8px;display:flex}.grade-btn{border-radius:var(--radius-sm);border:2px solid var(--border);cursor:pointer;background:0 0;flex-direction:column;align-items:center;gap:2px;min-width:100px;padding:12px 16px;transition:all .2s;display:flex}.grade-btn:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.grade-btn.active{box-shadow:0 4px 12px #00000026}.grade-number{font-size:20px;font-weight:700;line-height:1}.grade-name{text-transform:uppercase;letter-spacing:.3px;font-size:11px;font-weight:500}@media (width<=768px){.grade-options{grid-template-columns:repeat(4,1fr);display:grid}.grade-btn{min-width:auto;padding:10px 8px}}.rhythm-btn{border-color:var(--secondary)!important;color:var(--secondary)!important}.rhythm-btn:hover{color:var(--secondary-dark)!important;background:#3498db1a!important}.home{max-width:900px;margin:0 auto}.hero{text-align:center;margin-bottom:32px;padding:40px 0}.hero h1{color:var(--text);margin-bottom:12px;font-size:32px;font-weight:700;line-height:1.2}.hero p{color:var(--text-light);max-width:500px;margin:0 auto;font-size:16px}.home-section-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.home-section-header h2{font-size:20px;font-weight:600}.remaining-views{color:var(--text-light);background:var(--primary-light);border-radius:20px;padding:4px 12px;font-size:13px;font-weight:500}.pieces-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:24px;display:grid}.limit-banner{border:2px solid #f39c12;margin-bottom:24px}.limit-banner-content{text-align:center}.limit-banner h3{color:#e74c3c;margin-bottom:8px;font-size:18px}.limit-banner p{color:var(--text-light);margin-bottom:16px}.coming-soon{text-align:center;margin-top:16px;padding:48px 24px}.coming-soon-icon{margin-bottom:16px;font-size:48px}.coming-soon h3{margin-bottom:8px;font-size:22px;font-weight:700}.coming-soon p{color:var(--text-light);max-width:400px;margin:0 auto}.home-actions{text-align:center;margin-top:16px}@media (width<=768px){.hero h1{font-size:24px}.pieces-grid{grid-template-columns:1fr}}.sheet-music-wrapper{width:100%;min-height:0;position:relative}.sheet-music-container{border-radius:var(--radius);width:100%;min-height:300px;box-shadow:var(--shadow);background:#e8ebef;padding:20px;position:relative;overflow:auto visible}.sheet-music-container[data-score-view=vertical]{flex-direction:column;align-items:center;gap:clamp(16px,2.4vh,28px);display:flex;overflow:auto}.sheet-music-container[data-score-view=horizontal]{align-items:flex-start;gap:clamp(16px,2.2vw,30px);display:flex;overflow:auto}.sheet-music-container svg{z-index:1;width:100%;max-width:none;height:auto;display:block;position:relative}.sheet-music-page{background:#fff;border-radius:0;flex:none;position:relative;overflow:visible;width:min(100%, var(--score-page-width,1180px))!important;height:auto!important}.sheet-music-container[data-score-view=horizontal] .sheet-music-page{width:var(--score-page-width,640px)!important}.melodist-playhead{pointer-events:none;z-index:4;filter:drop-shadow(0 0 2px #ffffffd9);background:#ff3030eb;border-radius:999px;width:4px;min-height:48px;position:absolute;transform:translate(-50%)}@media (width<=768px){.sheet-music-container[data-score-view=horizontal] .sheet-music-page{width:min(calc(100vw - 56px), var(--score-page-width,420px))!important}}.sheet-music-loading{min-height:300px;color:var(--text-light);flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex}.spinner{border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.sheet-music-error{text-align:center;color:#e74c3c;padding:40px}.error-detail{color:var(--text-light);margin-top:8px;font-size:13px}.practice-page{flex-direction:column;flex:1;max-width:100%;height:100%;min-height:0;margin:0;padding:0;display:flex;overflow:hidden}.practice-page:fullscreen{background:#f7f7f8;width:100vw;height:100vh}.practice-topbar{z-index:5;background:#fbfbfc;border-bottom:1px solid #d9dde3;flex-shrink:0;justify-content:center;align-items:center;min-height:54px;padding:7px 16px;display:flex;position:relative;box-shadow:0 1px 2px #1118270a}.topbar-back{color:var(--text-light);border-radius:var(--radius-sm);align-items:center;gap:4px;min-height:36px;padding:6px 10px;font-size:14px;font-weight:500;text-decoration:none;transition:all .2s;display:flex;position:absolute;left:16px}.topbar-back:hover{background:var(--background);color:var(--text)}.topbar-center{justify-content:center;align-items:center;gap:12px;max-width:calc(100% - 180px);display:flex}.topbar-controls{flex:none;align-items:center;gap:4px;display:flex}.topbar-btn{width:36px;height:36px;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:999px;justify-content:center;align-items:center;transition:all .2s;display:flex}.topbar-btn:hover{background:var(--background)}.topbar-btn:disabled{color:#a6adb5;cursor:not-allowed}.topbar-btn:disabled:hover{background:0 0}.topbar-btn-compact{width:32px;height:32px}.topbar-btn-play{background:var(--primary);color:#fff}.topbar-btn-play:hover{background:var(--primary-dark);transform:scale(1.05)}.topbar-tempo{color:#3f4751;flex:none;align-items:center;gap:8px;font-size:13px;font-weight:600;display:inline-flex}.topbar-tempo-label{letter-spacing:.02em}.topbar-tempo-control{background:#fff;border:1px solid #c8ced6;border-radius:6px;align-items:center;height:34px;display:inline-flex;overflow:hidden}.topbar-tempo-btn{color:#3f4751;cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;width:30px;height:32px;padding:0;transition:background .16s,color .16s;display:inline-flex}.topbar-tempo-btn:hover:not(:disabled){background:#f2f4f6}.topbar-tempo-btn:disabled{color:#b0b7c0;cursor:not-allowed}.topbar-tempo-value{color:#313844;text-align:center;font-variant-numeric:tabular-nums;min-width:38px;font-size:14px;font-weight:600}.topbar-zoom{background:#f2f4f6;border:1px solid #dde2e8;border-radius:999px;flex:none;align-items:center;gap:2px;height:34px;padding:1px 4px;display:inline-flex}.topbar-zoom-value{color:#3f4751;text-align:center;background:0 0;border-radius:999px;width:48px;height:28px;font-size:12px;font-weight:700}.topbar-zoom-value:hover{background:#fff}.topbar-btn-next{color:var(--text-light);z-index:2;position:absolute;right:16px}.topbar-btn-fullscreen{color:var(--text-light);z-index:2;position:absolute;right:58px}.topbar-btn-next:hover,.topbar-btn-fullscreen:hover{background:var(--background);color:var(--text)}.practice-page[data-fullscreen=true] .practice-topbar{min-height:44px;padding:4px 14px}.practice-page[data-fullscreen=true] .topbar-btn{width:34px;height:34px}.practice-page[data-fullscreen=true] .topbar-btn-compact{width:30px;height:30px}.practice-page[data-fullscreen=true] .sheet-music-container[data-score-view=horizontal]{padding-top:10px;padding-bottom:20px}.practice-page[data-fullscreen=true] .topbar-btn-next{right:14px}.practice-page[data-fullscreen=true] .topbar-btn-fullscreen{right:54px}.practice-page .sheet-music-wrapper{flex-direction:column;flex:1;height:100%;min-height:0;display:flex;overflow:hidden}.practice-page .sheet-music-container{height:auto;box-shadow:none;border-radius:0;flex:1;min-height:auto;overflow:auto}.practice-page .sheet-music-container[data-score-view=vertical]{background:#f7f7f8;padding:16px 18px 34px}.practice-page .sheet-music-container[data-score-view=horizontal]{background:#f7f7f8;justify-content:flex-start;align-items:flex-start;gap:28px;padding:16px 20px 34px;display:flex}.practice-page .sheet-music-container svg{max-width:none;display:block}.practice-page .sheet-music-page{background:#fff}.limit-banner{text-align:center;border:2px solid #f39c12;max-width:400px;margin:80px auto}.limit-banner h2{margin-bottom:8px;font-size:20px}@media (width<=768px){.practice-page{height:100%}.practice-topbar{align-items:flex-start;min-height:76px;padding:6px 10px 8px}.topbar-back{padding:6px;top:8px;left:8px}.topbar-back span{display:none}.topbar-center{flex-wrap:wrap;gap:6px 8px;max-width:calc(100% - 88px)}.topbar-tempo{gap:5px;font-size:12px}.topbar-tempo-control{height:32px}.topbar-tempo-btn{width:27px;height:30px}.topbar-tempo-value{min-width:34px;font-size:13px}.topbar-btn-next{top:8px;right:8px}.topbar-btn-fullscreen{top:8px;right:48px}.practice-page .sheet-music-container[data-score-view=vertical]{padding:14px 12px 30px}.practice-page .sheet-music-container[data-score-view=horizontal]{gap:18px;padding:16px 14px 30px}}.rhythm-page{max-width:1000px;margin:0 auto}.rhythm-header{flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:16px;display:flex}.rhythm-info h1{font-size:24px;font-weight:700;line-height:1.2}.rhythm-info p{color:var(--text-light);font-size:14px}.rhythm-levels{margin-bottom:24px}.rhythm-levels .difficulty-label{color:var(--text);margin-bottom:12px;font-size:14px;font-weight:600;display:block}.level-options{flex-wrap:wrap;gap:8px;display:flex}.rhythm-sheet{margin-bottom:16px}.rhythm-controls{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);flex-wrap:wrap;align-items:center;gap:20px;padding:16px 24px;display:flex}.rhythm-play-controls{gap:8px;display:flex}.rhythm-tempo{align-items:center;gap:8px;display:flex}.rhythm-tempo label{color:var(--text-light);font-size:13px;font-weight:500}.rhythm-tempo input[type=range]{width:100px;accent-color:var(--secondary)}.bpm-value{color:var(--secondary);min-width:32px;font-size:15px;font-weight:700}.rhythm-new-btn{margin-left:auto}.player-btn{background:var(--secondary);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:18px;transition:all .2s;display:flex}.player-btn:hover:not(:disabled){filter:brightness(1.1);transform:scale(1.05)}.player-btn:disabled{opacity:.5;cursor:not-allowed}.icon-play{border-top:8px solid #0000;border-bottom:8px solid #0000;border-left:14px solid #fff;width:0;height:0;margin-left:3px;display:inline-block}.icon-pause{gap:3px;display:inline-flex}.icon-pause:before,.icon-pause:after{content:"";background:#fff;border-radius:1px;width:4px;height:16px;display:block}.icon-stop{background:#fff;border-radius:2px;width:14px;height:14px;display:inline-block}@media (width<=768px){.rhythm-controls{flex-direction:column;gap:12px}.rhythm-new-btn{width:100%;margin-left:0}}.auth-page{justify-content:center;align-items:center;min-height:calc(100vh - 120px);padding:24px;display:flex}.auth-card{width:100%;max-width:420px;padding:32px}.auth-header{text-align:center;margin-bottom:24px}.auth-logo{margin-bottom:8px;font-size:40px;display:block}.auth-header h1{margin-bottom:4px;font-size:22px;font-weight:700}.auth-header p{color:var(--text-light);font-size:14px}.auth-error{color:#c0392b;border-radius:var(--radius-sm);text-align:center;background:#fdecea;margin-bottom:16px;padding:12px;font-size:14px}.auth-google-btn{justify-content:center;align-items:center;gap:12px;width:100%;margin-bottom:16px;padding:12px;display:flex}.auth-divider{align-items:center;margin:16px 0;display:flex}.auth-divider:before,.auth-divider:after{content:"";background:var(--border);flex:1;height:1px}.auth-divider span{color:var(--text-light);padding:0 12px;font-size:13px}.form-group{margin-bottom:16px}.form-group label{color:var(--text);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.form-group input{border:2px solid var(--border);border-radius:var(--radius-sm);outline:none;width:100%;padding:10px 14px;font-size:14px;transition:border-color .2s}.form-group input:focus{border-color:var(--primary)}.grade-grid{flex-wrap:wrap;gap:6px;display:flex}.grade-select-btn{border:2px solid var(--border);width:42px;height:42px;color:var(--text);cursor:pointer;background:0 0;border-radius:8px;font-size:16px;font-weight:600;transition:all .2s}.grade-select-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}.grade-select-btn:hover:not(.active){border-color:var(--primary)}.auth-submit-btn{width:100%;margin-top:8px;padding:14px;font-size:16px}.auth-footer{text-align:center;color:var(--text-light);margin-top:20px;font-size:14px}.auth-footer a{color:var(--secondary);font-weight:500}.profile-page{max-width:500px;margin:0 auto;padding-top:32px}.profile-card h1{margin-bottom:4px;font-size:24px;font-weight:700}.profile-email{color:var(--text-light);margin-bottom:24px;font-size:14px}.profile-section{border-top:1px solid var(--border);margin-bottom:24px;padding-top:16px}.profile-section h2{margin-bottom:16px;font-size:16px;font-weight:600}.profile-section select{border:2px solid var(--border);border-radius:var(--radius-sm);background:#fff;outline:none;width:100%;padding:10px 14px;font-size:14px}.profile-section select:focus{border-color:var(--primary)}.form-hint{color:var(--text-light);margin-top:4px;font-size:12px;display:block}.premium-badge{color:#fff;background:linear-gradient(135deg,#f39c12,#e74c3c);border-radius:20px;padding:4px 12px;font-size:13px;font-weight:600;display:inline-block}.premium-status p{color:var(--text-light);margin-top:8px}.free-status p{color:var(--text-light)}.premium-page{max-width:700px;margin:0 auto;padding:32px 0}.premium-card{padding:40px 32px}.premium-header{text-align:center;margin-bottom:32px}.premium-star{background:linear-gradient(135deg,#f39c12,#e74c3c);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:48px;display:block}.premium-header h1{margin-top:8px;font-size:28px;font-weight:700}.premium-header p{color:var(--text-light);margin-top:4px}.premium-features{margin-bottom:32px}.premium-feature{border-bottom:1px solid var(--border);align-items:flex-start;gap:16px;padding:16px 0;display:flex}.premium-feature:last-child{border-bottom:none}.feature-icon{text-align:center;min-width:40px;font-size:24px}.premium-feature h3{margin-bottom:2px;font-size:15px;font-weight:600}.premium-feature p{color:var(--text-light);font-size:13px}.premium-plans{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;display:grid}.premium-plan{border:2px solid var(--border);border-radius:var(--radius);text-align:center;padding:24px;position:relative}.premium-plan h3{margin-bottom:8px;font-size:18px;font-weight:600}.plan-price{margin-bottom:4px}.price{font-size:32px;font-weight:700}.period{color:var(--text-light);font-size:14px}.plan-save{color:#27ae60;margin-bottom:12px;font-size:14px;font-weight:600}.premium-plan ul{text-align:left;margin:16px 0;padding:0;list-style:none}.premium-plan ul li{color:var(--text-light);padding:6px 0;font-size:14px}.premium-plan ul li:before{content:"✓";color:var(--primary);margin-right:8px;font-weight:700}.premium-plan-featured{background:#fffdf5;border-color:#f39c12}.plan-badge{color:#fff;background:linear-gradient(135deg,#f39c12,#e74c3c);border-radius:20px;padding:4px 16px;font-size:12px;font-weight:700;position:absolute;top:-12px;left:50%;transform:translate(-50%)}.plan-btn{width:100%}.premium-cta{margin-top:24px}@media (width<=600px){.premium-plans{grid-template-columns:1fr}}*{box-sizing:border-box;margin:0;padding:0}:root{--primary:#2ecc71;--primary-dark:#27ae60;--primary-light:#d5f5e3;--secondary:#3498db;--secondary-dark:#2980b9;--background:#f8f9fa;--surface:#fff;--text:#2c3e50;--text-light:#7f8c8d;--border:#e0e0e0;--shadow:0 2px 8px #00000014;--shadow-lg:0 4px 20px #0000001f;--radius:12px;--radius-sm:8px;--font:"Inter", -apple-system, BlinkMacSystemFont, sans-serif}body{font-family:var(--font);background:var(--background);color:var(--text);min-height:100vh;line-height:1.6}html,body,#root{height:100%}.app{flex-direction:column;height:100%;min-height:100vh;display:flex}.app-error{background:var(--background);place-items:center;min-height:100vh;padding:24px;display:grid}.app-error-card{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);width:min(100%,560px);box-shadow:var(--shadow);padding:28px}.app-error-card h1{margin-bottom:12px;font-size:24px}.app-error-card p{color:var(--text-light);margin-bottom:16px}.app-error-card pre{border-radius:var(--radius-sm);color:#b42318;white-space:pre-wrap;background:#f3f4f6;padding:12px;overflow:auto}.main-content{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:24px}.main-content-fullscreen{flex-direction:column;flex:auto;max-width:100%;height:100%;min-height:0;padding:0;display:flex;overflow:hidden}a{color:var(--secondary);text-decoration:none}a:hover{color:var(--secondary-dark)}button{font-family:var(--font);cursor:pointer;border:none;outline:none}input,select{font-family:var(--font)}.btn{border-radius:var(--radius-sm);justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:15px;font-weight:500;transition:all .2s;display:inline-flex}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 4px 12px #2ecc714d}.btn-secondary{background:var(--secondary);color:#fff}.btn-secondary:hover{background:var(--secondary-dark);transform:translateY(-1px)}.btn-outline{border:2px solid var(--primary);color:var(--primary);background:0 0}.btn-outline:hover{background:var(--primary-light)}.btn-ghost{color:var(--text);background:0 0}.btn-ghost:hover{background:var(--border)}.btn-premium{color:#fff;background:linear-gradient(135deg,#f39c12,#e74c3c)}.btn-premium:hover{transform:translateY(-1px);box-shadow:0 4px 12px #f39c1266}.btn-sm{padding:8px 16px;font-size:13px}.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;transition:all .2s}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.badge{letter-spacing:.5px;border-radius:20px;padding:4px 12px;font-size:12px;font-weight:600;display:inline-block}.text-center{text-align:center}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}@media (width<=768px){.main-content{padding:16px}}