*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #3949EE;--primary-hover: #2937CC;--secondary-color: #6366F1;--accent-color: #F59E0B;--success-color: #10B981;--warning-color: #F59E0B;--error-color: #EF4444;--gray-50: #F9FAFB;--gray-100: #F3F4F6;--gray-200: #E5E7EB;--gray-300: #D1D5DB;--gray-400: #9CA3AF;--gray-500: #6B7280;--gray-600: #4B5563;--gray-700: #374151;--gray-800: #1F2937;--gray-900: #111827;--font-sans: "Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1)}body{font-family:var(--font-sans);line-height:1.6;color:var(--gray-800);background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:var(--spacing-md)}.header{text-align:center;padding:var(--spacing-2xl) 0;color:#fff}.header h1{font-size:3rem;font-weight:700;margin-bottom:var(--spacing-md);text-shadow:0 2px 4px rgba(0,0,0,.3)}.header .subtitle{font-size:1.25rem;font-weight:500;margin-bottom:var(--spacing-sm);opacity:.9}.header .description{font-size:1rem;opacity:.8;max-width:600px;margin:0 auto}.card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--spacing-xl);margin-bottom:var(--spacing-lg)}.source-selection{margin-bottom:var(--spacing-lg)}.source-tabs{display:flex;background:#fff;border-radius:var(--radius-lg);padding:var(--spacing-xs);box-shadow:var(--shadow-md)}.tab-btn{flex:1;padding:var(--spacing-md) var(--spacing-lg);border:none;background:transparent;border-radius:var(--radius-md);font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease;color:var(--gray-600)}.tab-btn.active{background:var(--primary-color);color:#fff;box-shadow:var(--shadow-sm)}.tab-btn:hover:not(.active){background:var(--gray-100);color:var(--gray-800)}.source-panel{display:none}.source-panel.active{display:block}.input-group{display:flex;flex-direction:column;gap:var(--spacing-md)}.input-group label{font-weight:500;color:var(--gray-700)}.input-group input{padding:var(--spacing-md);border:2px solid var(--gray-200);border-radius:var(--radius-md);font-size:1rem;transition:border-color .2s ease}.input-group input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #3949ee1a}.btn{padding:var(--spacing-md) var(--spacing-lg);border:none;border-radius:var(--radius-md);font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:var(--spacing-sm)}.primary-btn{background:var(--primary-color);color:#fff}.primary-btn:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.secondary-btn{background:var(--gray-100);color:var(--gray-700)}.secondary-btn:hover{background:var(--gray-200)}.spotify-btn{background:#1db954;color:#fff;padding:var(--spacing-lg) var(--spacing-xl);border-radius:var(--radius-lg);font-size:1.1rem;font-weight:600}.spotify-btn:hover{background:#1ed760;transform:translateY(-2px);box-shadow:var(--shadow-lg)}.progress-section{margin:var(--spacing-lg) 0}.progress-container{background:#fff;border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-md)}.progress-bar{width:100%;height:8px;background:var(--gray-200);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:var(--spacing-md)}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color));border-radius:var(--radius-sm);transition:width .3s ease;width:0%}.progress-text{text-align:center;font-weight:500;color:var(--gray-700)}.spotify-player{display:flex;flex-direction:column;gap:var(--spacing-lg)}.search-section{display:flex;gap:var(--spacing-md)}.search-section input{flex:1}.search-results{max-height:400px;overflow-y:auto;border:1px solid var(--gray-200);border-radius:var(--radius-md);background:var(--gray-50)}.track-item{padding:var(--spacing-md);border-bottom:1px solid var(--gray-200);cursor:pointer;transition:background-color .2s ease;display:flex;align-items:center;gap:var(--spacing-md)}.track-item:hover{background:#fff}.track-item.selected{background:var(--primary-color);color:#fff}.track-image{width:50px;height:50px;border-radius:var(--radius-sm);object-fit:cover}.track-info h4{font-weight:500;margin-bottom:var(--spacing-xs)}.track-info p{font-size:.875rem;opacity:.8}.record-controls{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--gray-50);border-radius:var(--radius-md)}.record-controls label{font-weight:500;color:var(--gray-700)}.record-controls select{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--gray-300);border-radius:var(--radius-sm);background:#fff}.recording-status{background:var(--error-color);color:#fff;padding:var(--spacing-lg);border-radius:var(--radius-md);text-align:center}.recording-indicator{font-size:1.25rem;font-weight:600;margin-bottom:var(--spacing-md);animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.recording-progress{display:flex;flex-direction:column;gap:var(--spacing-sm)}.results-section{background:#fff;border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-lg)}.song-info h3{font-size:1.5rem;font-weight:600;color:var(--gray-800);margin-bottom:var(--spacing-lg)}.difficulty-tabs{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.difficulty-tabs .tab-btn{flex:1;padding:var(--spacing-md);border:2px solid var(--gray-200);background:#fff;color:var(--gray-700)}.difficulty-tabs .tab-btn.active{border-color:var(--primary-color);background:var(--primary-color);color:#fff}.player-controls{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);padding:var(--spacing-lg);background:var(--gray-50);border-radius:var(--radius-md)}.control-btn{padding:var(--spacing-md);border:none;border-radius:var(--radius-md);background:var(--primary-color);color:#fff;cursor:pointer;transition:all .2s ease}.control-btn:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px)}.control-btn:disabled{background:var(--gray-300);cursor:not-allowed;transform:none}.speed-control{display:flex;align-items:center;gap:var(--spacing-sm);margin-left:auto}.speed-control input[type=range]{width:100px}.playback-progress{margin-bottom:var(--spacing-lg)}.time-display{display:flex;justify-content:space-between;margin-bottom:var(--spacing-sm);font-size:.875rem;color:var(--gray-600)}.score-display{margin-bottom:var(--spacing-lg);border:1px solid var(--gray-200);border-radius:var(--radius-md);overflow:hidden}.jianpu-container{padding:var(--spacing-lg);background:#fff;min-height:300px;display:flex;align-items:center;justify-content:center;color:var(--gray-500)}.fingering-guide{background:var(--gray-50);border-radius:var(--radius-md);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.fingering-guide h4{font-size:1.125rem;font-weight:600;margin-bottom:var(--spacing-md);color:var(--gray-800)}.fingering-display{background:#fff;border-radius:var(--radius-sm);padding:var(--spacing-md);border:1px solid var(--gray-200)}.fingering-note{font-size:1.25rem;font-weight:600;color:var(--primary-color);margin-bottom:var(--spacing-sm)}.fingering-description{color:var(--gray-600);margin-bottom:var(--spacing-sm)}.fingering-hands{display:flex;gap:var(--spacing-lg);font-size:.875rem}.left-hand,.right-hand{padding:var(--spacing-xs) var(--spacing-sm);background:var(--gray-100);border-radius:var(--radius-sm)}.download-section{border-top:1px solid var(--gray-200);padding-top:var(--spacing-lg)}.download-section h4{font-size:1.125rem;font-weight:600;margin-bottom:var(--spacing-md);color:var(--gray-800)}.download-buttons{display:flex;gap:var(--spacing-md);flex-wrap:wrap}.download-btn{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--gray-300);border-radius:var(--radius-sm);background:#fff;color:var(--gray-700);text-decoration:none;transition:all .2s ease}.download-btn:hover{background:var(--gray-50);border-color:var(--primary-color);color:var(--primary-color)}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;color:#fff}.loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top:4px solid white;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:var(--spacing-md)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.container{padding:var(--spacing-sm)}.header h1{font-size:2rem}.source-tabs,.search-section{flex-direction:column}.player-controls{flex-wrap:wrap}.speed-control{margin-left:0;margin-top:var(--spacing-md)}.download-buttons{flex-direction:column}}.tooltip{position:relative;display:inline-block}.tooltip .tooltiptext{visibility:hidden;width:200px;background-color:var(--gray-800);color:#fff;text-align:center;border-radius:var(--radius-sm);padding:var(--spacing-sm);position:absolute;z-index:1;bottom:125%;left:50%;margin-left:-100px;opacity:0;transition:opacity .3s;font-size:.875rem}.tooltip:hover .tooltiptext{visibility:visible;opacity:1}.alert{padding:var(--spacing-md);border-radius:var(--radius-md);margin-bottom:var(--spacing-md)}.alert-success{background:#d1fae5;border:1px solid #A7F3D0;color:#065f46}.alert-error{background:#fee2e2;border:1px solid #FECACA;color:#991b1b}.alert-warning{background:#fef3c7;border:1px solid #FDE68A;color:#92400e}.fade-in{animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-up{animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}