.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);font-weight:600;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;text-align:center}.btn:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--color-accent);color:var(--color-text-light);border:none}.btn-primary:hover:not(:disabled){background-color:var(--color-accent-light)}.btn-secondary{background-color:transparent;color:var(--color-primary);border:2px solid var(--color-primary)}.btn-secondary:hover:not(:disabled){background-color:var(--color-primary);color:var(--color-text-light)}.btn-danger{background-color:var(--color-error);color:var(--color-text-light);border:none}.btn-danger:hover:not(:disabled){background-color:#c62828}.btn-ghost{background-color:transparent;color:var(--color-text-secondary);border:none}.btn-ghost:hover:not(:disabled){background-color:var(--color-surface);color:var(--color-text)}.btn-small{height:var(--btn-height-sm);padding:0 var(--spacing-md);font-size:var(--font-size-xs)}.btn-medium{height:var(--btn-height-md);padding:0 var(--spacing-lg);font-size:var(--font-size-sm)}.btn-large{height:var(--btn-height-lg);padding:0 var(--spacing-xl);font-size:var(--font-size-md)}.btn-xlarge{height:var(--btn-height-xl);padding:0 var(--spacing-xl);font-size:var(--font-size-lg)}.btn-full{width:100%}.track-card{background-color:var(--color-card);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-md);transition:box-shadow var(--transition-fast)}.track-card:hover{box-shadow:var(--shadow-lg)}.track-card-content{display:flex;gap:var(--spacing-md);cursor:pointer;flex:1}.track-thumbnail{width:80px;height:80px;border-radius:var(--radius-md);overflow:hidden;flex-shrink:0;background-color:var(--color-surface);border:2px solid var(--color-surface);box-shadow:var(--shadow-sm)}.track-thumbnail img{width:100%;height:100%;object-fit:cover;display:block}.track-thumbnail-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:32px}.track-info{display:flex;flex-direction:column;justify-content:center;gap:var(--spacing-xs);min-width:0}.track-title{font-size:var(--font-size-md);font-weight:600;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-time{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.track-actions{display:flex;gap:var(--spacing-sm);align-items:center}.track-actions .btn-primary{flex:1}.track-menu-container{position:relative}.track-menu{position:absolute;bottom:100%;right:0;background-color:var(--color-card);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);overflow:hidden;z-index:100;min-width:120px;animation:scaleIn var(--transition-fast) ease-out}.track-menu-item{display:block;width:100%;padding:var(--spacing-md);text-align:left;font-size:var(--font-size-sm);color:var(--color-text);background:none;border:none;cursor:pointer;transition:background-color var(--transition-fast)}.track-menu-item:hover{background-color:var(--color-surface)}.track-menu-item-danger{color:var(--color-error)}@media(min-width:768px){.track-card{flex-direction:row;align-items:center;padding:var(--spacing-lg)}.track-card-content{flex:1;min-width:0}.track-thumbnail{width:100px;height:100px}.track-actions{flex-shrink:0}.track-actions .btn-primary{flex:none;min-width:140px}}.dialog-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;padding:var(--spacing-md);z-index:1000;animation:fadeIn var(--transition-fast) ease-out}.dialog{background-color:var(--color-card);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--spacing-xl);max-width:400px;width:100%;text-align:center}.dialog-icon{font-size:48px;margin-bottom:var(--spacing-md)}.dialog-title{font-size:var(--font-size-lg);margin-bottom:var(--spacing-md);color:var(--color-text)}.dialog-message{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--spacing-xl);line-height:1.6}.dialog-actions{display:flex;gap:var(--spacing-md)}.dialog-actions button{flex:1}.list-page{min-height:100vh;display:flex;flex-direction:column;padding:var(--spacing-md);max-width:800px;margin:0 auto;width:100%}.list-header{display:flex;justify-content:space-between;align-items:center;padding-top:var(--spacing-md);padding-bottom:var(--spacing-md);position:sticky;top:0;z-index:100;background-color:var(--color-bg)}.list-header h1{color:var(--color-primary);font-size:var(--font-size-xl)}.header-actions{display:flex;gap:var(--spacing-sm);align-items:center}.list-controls{display:flex;flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-md) 0;position:sticky;top:60px;z-index:99;background-color:var(--color-bg)}.search-box input{width:100%;height:var(--btn-height-lg);font-size:var(--font-size-md)}.sort-options{display:flex;align-items:center;gap:var(--spacing-sm)}.sort-label{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.sort-options select{flex:1;max-width:200px;height:var(--btn-height-md);font-size:var(--font-size-sm);padding:0 var(--spacing-md)}.list-main{flex:1;display:flex;flex-direction:column}.add-track-btn{margin-bottom:var(--spacing-lg)}.list-loading{flex:1;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);font-size:var(--font-size-md);padding:var(--spacing-xl)}.list-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--spacing-lg);padding:var(--spacing-xl)}.empty-icon{font-size:64px}.list-empty h2{font-size:var(--font-size-xl);color:var(--color-text)}.list-empty p{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.track-list{display:flex;flex-direction:column;gap:var(--spacing-md)}@media(min-width:768px){.list-page{padding:var(--spacing-xl)}.list-header{padding-top:var(--spacing-lg);padding-bottom:var(--spacing-lg)}.list-header h1{font-size:var(--font-size-2xl)}.list-controls{top:80px;flex-direction:row;align-items:center}.search-box{flex:1}.track-list{gap:var(--spacing-lg)}}.edit-page{min-height:100vh;display:flex;flex-direction:column;padding:var(--spacing-md);max-width:600px;margin:0 auto;width:100%}.edit-header{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);padding-top:var(--spacing-md)}.edit-header h1{font-size:var(--font-size-xl);text-align:center}.edit-steps{display:flex;justify-content:center;gap:var(--spacing-lg);font-size:var(--font-size-sm);color:var(--color-text-secondary)}.edit-steps span{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm)}.edit-steps span.active{color:var(--color-primary);font-weight:600}.edit-error{background-color:#ffebee;color:var(--color-error);padding:var(--spacing-md);border-radius:var(--radius-sm);margin-bottom:var(--spacing-lg);font-size:var(--font-size-sm);animation:fadeIn var(--transition-fast) ease-out}.edit-content{flex:1}.edit-step{display:flex;flex-direction:column;gap:var(--spacing-xl)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.form-label{font-size:var(--font-size-md);font-weight:600;color:var(--color-text)}.form-label .required{color:var(--color-error)}.form-hint{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.form-input{width:100%;height:var(--btn-height-lg);font-size:var(--font-size-md);padding:0 var(--spacing-md)}.file-input{display:none}.file-label{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);height:var(--btn-height-lg);background-color:var(--color-surface);border:2px dashed var(--color-text-secondary);border-radius:var(--radius-md);font-size:var(--font-size-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast)}.file-label:hover{border-color:var(--color-primary);color:var(--color-primary);background-color:#f1f8e9}.image-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md);margin-top:var(--spacing-md)}.image-item{position:relative;aspect-ratio:3 / 4;border-radius:var(--radius-sm);overflow:hidden;background-color:var(--color-surface);cursor:grab}.image-item:active{cursor:grabbing}.image-item img{width:100%;height:100%;object-fit:cover}.image-item.dragging{opacity:.5}.image-order{position:absolute;bottom:var(--spacing-xs);left:var(--spacing-xs);background-color:#000000b3;color:#fff;padding:2px 8px;border-radius:var(--radius-sm);font-size:var(--font-size-xs)}.image-remove{position:absolute;top:var(--spacing-xs);right:var(--spacing-xs);width:28px;height:28px;border-radius:50%;background-color:var(--color-error);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform var(--transition-fast)}.image-remove:hover{transform:scale(1.1)}.audio-preview{background-color:var(--color-surface);border-radius:var(--radius-md);padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md)}.audio-info{display:flex;flex-direction:column;gap:var(--spacing-xs)}.audio-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text)}.audio-duration{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.audio-player{width:100%;height:48px}.edit-actions{padding:var(--spacing-lg) 0}.edit-actions-split{display:flex;gap:var(--spacing-md)}.edit-actions-split button{flex:1}@media(min-width:768px){.edit-page{padding:var(--spacing-xl)}.image-list{grid-template-columns:repeat(3,1fr)}}.practice-page{min-height:100vh;display:flex;flex-direction:column;background-color:var(--color-bg)}.practice-loading,.practice-error{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-lg);color:var(--color-text-secondary);font-size:var(--font-size-md)}.practice-header{display:flex;align-items:center;justify-content:space-between;padding:6px var(--spacing-sm);background-color:var(--color-card);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:100;min-height:48px;max-height:56px}.show-header-btn{position:fixed;top:var(--spacing-sm);right:var(--spacing-sm);z-index:101}.practice-title{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text);text-align:center;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 var(--spacing-xs)}.sheet-container{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;background-color:#f0f0f0;min-height:300px}.sheet-image-wrapper{max-width:100%;max-height:100%;transition:transform var(--transition-normal)}.sheet-image-wrapper img{max-width:100%;max-height:70vh;object-fit:contain;display:block}.page-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;background-color:#ffffffe6;color:var(--color-primary);font-size:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-md);border:none}.page-nav:hover:not(:disabled){background-color:var(--color-primary);color:#fff}.page-nav:disabled{opacity:.3;cursor:not-allowed}.page-prev{left:var(--spacing-md)}.page-next{right:var(--spacing-md)}.page-indicator{position:absolute;bottom:var(--spacing-md);left:50%;transform:translate(-50%);background-color:#000000b3;color:#fff;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-full);font-size:var(--font-size-sm)}.scale-hint{position:absolute;top:var(--spacing-md);right:var(--spacing-md);background-color:#00000080;color:#fff;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:var(--font-size-xs)}.countdown-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;pointer-events:none}.countdown-number{font-size:120px;font-weight:700;color:var(--color-primary);text-shadow:0 4px 20px rgba(0,0,0,.3);animation:countdownPulse 1s ease-in-out infinite}.countdown-text{font-size:var(--font-size-lg);color:var(--color-text);margin-top:var(--spacing-md);background-color:#ffffffe6;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-full);box-shadow:var(--shadow-md)}@keyframes countdownPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}}.no-sheet{text-align:center;color:var(--color-text-secondary);font-size:var(--font-size-md)}.practice-controls{background-color:var(--color-card);padding:var(--spacing-sm) var(--spacing-sm);box-shadow:0 -2px 10px #0000001a}.progress-container{display:flex;align-items:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-sm)}.time-display{font-size:var(--font-size-xs);color:var(--color-text-secondary);min-width:45px;font-variant-numeric:tabular-nums}.progress-slider{flex:1;height:8px;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,var(--color-primary) 0%,var(--color-primary) var(--progress, 0%),var(--color-surface) var(--progress, 0%),var(--color-surface) 100%);border-radius:var(--radius-full);outline:none;transition:background .1s ease}.progress-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 6px #0003;border:3px solid var(--color-primary)}.progress-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;cursor:pointer;border:3px solid var(--color-primary);box-shadow:0 2px 6px #0003}.progress-slider::-moz-range-progress{background:var(--color-primary);height:8px;border-radius:var(--radius-full)}.controls-main{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xl);margin-bottom:var(--spacing-sm)}.control-btn{min-width:48px}.play-btn{width:64px;height:64px;border-radius:50%;font-size:28px}.controls-extra{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);flex-wrap:wrap}.speed-control{display:flex;align-items:center;gap:var(--spacing-xs)}.control-label{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.speed-btn{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:var(--font-size-xs);background-color:var(--color-surface);color:var(--color-text-secondary);border:none;cursor:pointer;transition:all var(--transition-fast);min-width:48px;height:var(--btn-height-sm)}.speed-btn:hover{background-color:var(--color-primary-light);color:#fff}.speed-btn.active{background-color:var(--color-primary);color:#fff}.no-audio-notice{text-align:center;padding:var(--spacing-md);background-color:#fff3e0;color:var(--color-warning);font-size:var(--font-size-sm)}@media(min-width:768px){.sheet-image-wrapper img{max-height:65vh}.page-nav{width:64px;height:64px;font-size:36px}.practice-controls{padding:var(--spacing-xl)}.controls-main{gap:var(--spacing-xl)}.play-btn{width:96px;height:96px;font-size:42px}.controls-extra{justify-content:center}}@media(orientation:landscape)and (max-height:600px){.sheet-image-wrapper img{max-height:55vh}.practice-controls{padding:var(--spacing-md)}.controls-main{margin-bottom:var(--spacing-sm)}}.help-page{min-height:100vh;display:flex;flex-direction:column;padding:var(--spacing-md);max-width:600px;margin:0 auto;width:100%}.help-header{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);padding-top:var(--spacing-md)}.help-header h1{font-size:var(--font-size-xl)}.help-content{display:flex;flex-direction:column;gap:var(--spacing-lg)}.help-section h2{font-size:var(--font-size-lg);color:var(--color-primary);margin-bottom:var(--spacing-md)}.help-card{background-color:var(--color-card);border-radius:var(--radius-md);padding:var(--spacing-lg);box-shadow:var(--shadow-sm)}.help-card h3{font-size:var(--font-size-md);margin-bottom:var(--spacing-md);color:var(--color-text)}.help-card ol,.help-card ul{padding-left:var(--spacing-lg);margin:var(--spacing-md) 0}.help-card li{margin-bottom:var(--spacing-sm);line-height:1.6;color:var(--color-text)}.help-note{margin-top:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background-color:#e8f5e9;border-radius:var(--radius-sm);font-size:var(--font-size-sm);color:var(--color-primary)}.help-desc{margin-top:var(--spacing-md);color:var(--color-text-secondary);line-height:1.6}.storage-info{margin-bottom:var(--spacing-lg)}.storage-bar{height:12px;background-color:var(--color-surface);border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--spacing-sm)}.storage-used{height:100%;background-color:var(--color-primary);border-radius:var(--radius-full);transition:width var(--transition-normal)}.storage-text{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-align:center}.shortcut-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm)}.shortcut-list li{display:flex;align-items:center;gap:var(--spacing-sm)}kbd{display:inline-block;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--color-surface);border:1px solid #ddd;border-radius:var(--radius-sm);font-family:monospace;font-size:var(--font-size-xs);min-width:32px;text-align:center}.clearing-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.clearing-message{background-color:var(--color-card);padding:var(--spacing-xl);border-radius:var(--radius-md);font-size:var(--font-size-md)}@media(min-width:768px){.help-page,.help-card{padding:var(--spacing-xl)}.shortcut-list{grid-template-columns:repeat(3,1fr)}}:root{--color-primary: #1B5E20;--color-primary-light: #4CAF50;--color-primary-dark: #0D3D12;--color-accent: #FF6F00;--color-accent-light: #FFA040;--color-bg: #FAFAFA;--color-card: #FFFFFF;--color-surface: #F5F5F5;--color-text: #212121;--color-text-secondary: #757575;--color-text-light: #FFFFFF;--color-error: #D32F2F;--color-success: #388E3C;--color-warning: #F57C00;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-full: 9999px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);--shadow-md: 0 2px 8px rgba(0, 0, 0, .1);--shadow-lg: 0 4px 16px rgba(0, 0, 0, .15);--font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;--font-size-xs: clamp(14px, 1.5vw, 16px);--font-size-sm: clamp(16px, 2vw, 18px);--font-size-md: clamp(18px, 2.5vw, 20px);--font-size-lg: clamp(20px, 3vw, 24px);--font-size-xl: clamp(24px, 4vw, 28px);--font-size-2xl: clamp(28px, 5vw, 32px);--btn-height-sm: 44px;--btn-height-md: 48px;--btn-height-lg: 56px;--btn-height-xl: 72px;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .35s ease}@media(prefers-color-scheme:dark){:root{--color-bg: #121212;--color-card: #1E1E1E;--color-surface: #2D2D2D;--color-text: #FAFAFA;--color-text-secondary: #BDBDBD}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:var(--font-family);font-size:var(--font-size-sm);line-height:1.6;color:var(--color-text);background-color:var(--color-bg);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3;color:var(--color-text)}h1{font-size:var(--font-size-2xl)}h2{font-size:var(--font-size-xl)}h3{font-size:var(--font-size-lg)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-light)}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;outline:none}button:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}input,textarea,select{font-family:inherit;font-size:inherit;color:var(--color-text);background-color:var(--color-card);border:2px solid #BDBDBD;border-radius:var(--radius-sm);padding:var(--spacing-md);transition:border-color var(--transition-fast)}input:focus,textarea:focus,select:focus{border-color:var(--color-primary);outline:none}input::placeholder,textarea::placeholder{color:var(--color-text-secondary)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-surface)}::-webkit-scrollbar-thumb{background:var(--color-text-secondary);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-fadeIn{animation:fadeIn var(--transition-normal) ease-out}.animate-slideUp{animation:slideUp var(--transition-normal) ease-out}.animate-scaleIn{animation:scaleIn var(--transition-normal) ease-out}@media(max-width:768px){body{-webkit-overflow-scrolling:touch}button,a,input,select,textarea{min-height:var(--btn-height-md)}}@media print{body{background:#fff;color:#000}}