.song-list{display:flex;flex-direction:column;gap:16px}.song-list-empty{text-align:center;color:var(--color-text-secondary);font-size:15px;padding:32px 0}.song-list-items{list-style:none;display:flex;flex-direction:column;gap:10px}.song-list-item{display:flex;flex-direction:column;gap:6px;padding:16px;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:background-color .15s}.song-list-item:hover{background-color:var(--color-bg)}.song-list-item:active{background-color:var(--color-border)}.song-list-item-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.song-list-item-title{font-size:20px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-list-item-delete{background:none;border:none;font-size:18px;cursor:pointer;opacity:.5;padding:4px;flex-shrink:0;-webkit-tap-highlight-color:transparent;transition:opacity .15s}.song-list-item-delete:hover{opacity:.8}.song-list-item-bottom{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.song-list-item-bpm{font-size:14px;font-weight:600;color:var(--color-text-secondary);flex-shrink:0}.song-list-item-dot,.song-list-item-key,.song-list-item-ts{font-size:14px;color:var(--color-text-secondary)}.song-list-add-btn{width:100%;min-height:80px;padding:20px;background-color:var(--color-primary);color:#fff;border-radius:var(--radius);font-size:22px;font-weight:700;letter-spacing:.5px;transition:opacity .15s;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.song-list-add-btn:hover{opacity:.85}.song-list-add-btn:active{opacity:.7}.song-form{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:24px}.song-form-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.song-form-heading{font-size:20px;font-weight:600}.song-form-tabs{display:flex;gap:0;margin-bottom:20px;border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}.song-form-tab{flex:1;min-height:48px;padding:12px 8px;background-color:var(--color-bg);font-size:14px;font-weight:600;color:var(--color-text-secondary);transition:background-color .15s,color .15s;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.song-form-tab.active{background-color:var(--color-primary);color:#fff}.song-form-coming-soon{text-align:center;color:var(--color-text-secondary);font-size:15px;padding:40px 0}.song-form-input{width:100%;min-height:56px;padding:0 16px;border:1px solid var(--color-border);border-radius:var(--radius);background-color:var(--color-bg);font-size:17px;margin-bottom:12px;-webkit-tap-highlight-color:transparent}.song-form-input:focus{outline:2px solid var(--color-primary);outline-offset:-2px}.song-form-row4{display:flex;gap:8px;margin-bottom:24px}.song-form-cell{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.song-form-cell-label{font-size:12px;font-weight:700;color:var(--color-text-secondary);white-space:nowrap}.song-form-cell-input{width:100%;min-height:48px;padding:0 8px;border:1px solid var(--color-border);border-radius:var(--radius);background-color:var(--color-bg);font-size:15px;font-weight:600;text-align:center;-webkit-tap-highlight-color:transparent;-moz-appearance:textfield}.song-form-cell-input::-webkit-outer-spin-button,.song-form-cell-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}select.song-form-cell-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 5 5-5' stroke='%23777' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;padding-right:20px}.song-form-cell-input:focus{outline:2px solid var(--color-primary);outline-offset:-2px}.song-form-section-heading{font-size:16px;font-weight:700;margin-bottom:12px;border-top:1px solid var(--color-border);padding-top:16px}.song-form-sections{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.sf-section-row-wrap{display:flex;flex-direction:column;gap:6px}.sf-section-row{display:flex;gap:6px;align-items:center}.sf-section-name{flex:2.5;min-height:48px;padding:0 20px 0 6px;border:1px solid var(--color-border);border-radius:var(--radius);background-color:var(--color-bg);font-size:14px;font-weight:600;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 5 5-5' stroke='%23777' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;min-width:0}.sf-section-name:focus{outline:2px solid var(--color-primary);outline-offset:-2px}.sf-section-bars{width:48px;min-height:48px;padding:0 4px;border:1px solid var(--color-border);border-radius:var(--radius);background-color:var(--color-bg);font-size:15px;font-weight:600;text-align:center;flex-shrink:0;-webkit-tap-highlight-color:transparent;-moz-appearance:textfield}.sf-section-bars::-webkit-outer-spin-button,.sf-section-bars::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.sf-section-bars:focus{outline:2px solid var(--color-primary);outline-offset:-2px}.sf-section-bars-label{font-size:13px;font-weight:600;color:var(--color-text-secondary);flex-shrink:0}.sf-section-ts{width:64px;min-height:48px;padding:0 16px 0 4px;border:1px solid var(--color-border);border-radius:var(--radius);background-color:var(--color-bg);font-size:13px;font-weight:600;text-align:center;flex-shrink:0;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 5 5-5' stroke='%23777' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center}.sf-section-ts:focus{outline:2px solid var(--color-primary);outline-offset:-2px}.sf-section-chords{flex:3;min-height:48px;padding:0 8px;border:1px solid var(--color-border);border-radius:var(--radius);background-color:var(--color-bg);font-size:14px;-webkit-tap-highlight-color:transparent;min-width:0}.sf-section-chords:focus{outline:2px solid var(--color-primary);outline-offset:-2px}.sf-section-del{flex-shrink:0;min-height:48px;padding:0 10px;background-color:var(--color-accent);color:#fff;border-radius:var(--radius);font-size:13px;font-weight:600;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:opacity .15s}.sf-section-del:hover{background-color:var(--color-accent-hover)}.sf-section-custom{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--color-border);border-radius:var(--radius);background-color:var(--color-bg);font-size:14px;-webkit-tap-highlight-color:transparent}.sf-section-custom:focus{outline:2px solid var(--color-primary);outline-offset:-2px}.song-form-add-section{width:100%;min-height:56px;padding:14px;background-color:var(--color-bg);color:var(--color-text);border:2px dashed var(--color-border);border-radius:var(--radius);font-size:16px;font-weight:600;margin-bottom:16px;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:background-color .15s}.song-form-add-section:hover{background-color:var(--color-border)}.song-form-add-section:active{background-color:#d0d0d0}.song-form-save{width:100%;min-height:80px;padding:20px;background-color:var(--color-primary);color:#fff;border-radius:var(--radius);font-size:22px;font-weight:700;letter-spacing:.5px;transition:opacity .15s;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.song-form-save:hover:not(:disabled){opacity:.85}.song-form-save:active:not(:disabled){opacity:.7}.song-form-save:disabled{opacity:.35;cursor:default}.song-detail{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:24px}.song-detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.song-detail-title{font-size:24px;font-weight:700;letter-spacing:-.3px}.song-detail-back{font-size:20px;background:none;border:1px solid var(--color-border);border-radius:var(--radius);padding:6px 12px;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:background-color .15s}.song-detail-back:hover{background-color:var(--color-bg)}.song-detail-back:active{background-color:var(--color-border)}.song-detail-info{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px}.song-detail-artist,.song-detail-meta{font-size:14px;color:var(--color-text-secondary)}.countdown-overlay{position:absolute;bottom:calc(100% + 40px);left:50%;transform:translate(-50%);z-index:9999;pointer-events:none}.countdown-number{font-size:120px;font-weight:800;color:red;line-height:1;animation:countdown-pulse .3s ease-in-out}@keyframes countdown-pulse{0%{transform:scale(1.4);opacity:.6}to{transform:scale(1);opacity:1}}.song-detail-metronome{position:relative;margin-bottom:28px}.song-detail-beats{display:flex;justify-content:center;align-items:center;height:60px;gap:16px;margin-bottom:40px}.sd-beat-dot{width:40px;height:40px;border-radius:50%;background-color:var(--color-border);transition:background-color .08s}.sd-beat-dot.active{background-color:var(--color-accent)}.sd-beat-dot.accent{width:48px;height:48px;background-color:var(--color-primary)}.song-detail-play{width:100%;min-height:80px;padding:20px;background-color:var(--color-primary);color:#fff;border-radius:var(--radius);font-size:22px;font-weight:700;letter-spacing:.5px;transition:opacity .15s;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.song-detail-play:hover{opacity:.85}.song-detail-play:active{opacity:.7}.song-detail-play.playing{background-color:var(--color-accent)}.song-detail-play.playing:hover{background-color:var(--color-accent-hover)}.song-detail-sections{margin-bottom:24px}.song-detail-sections-heading{font-size:16px;font-weight:700;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--color-border)}.song-detail-no-sections{font-size:14px;color:var(--color-text-secondary);text-align:center;padding:16px 0}.song-detail-section-list{list-style:none;display:flex;flex-direction:column;gap:6px}.song-detail-section-item{padding:12px;background-color:var(--color-bg);border-radius:var(--radius);border-left:4px solid transparent;transition:background-color .15s,border-color .15s,opacity .15s}.song-detail-section-item.active{background-color:#fef2f0;border-left-color:var(--color-accent)}.song-detail-section-item.next{border-left-color:var(--color-border)}.song-detail-section-item.dimmed{opacity:.45}.sd-sec-top{display:flex;align-items:center;gap:8px}.sd-sec-info{flex:1;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}.sd-sec-name{font-size:15px;font-weight:700;flex-shrink:0}.sd-sec-bars{font-size:14px;color:var(--color-text-secondary);flex-shrink:0}.song-detail-section-item.active .sd-sec-bars{color:var(--color-accent);font-weight:700}.sd-sec-ts{font-size:13px;font-weight:600;color:var(--color-accent);flex-shrink:0}.sd-sec-chords{font-size:14px;color:var(--color-text);word-break:break-word}.sd-flag-btn{flex-shrink:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--radius);font-size:20px;opacity:.4;filter:grayscale(100%);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:opacity .15s,filter .15s,font-size .15s;cursor:pointer}.sd-flag-btn:hover{opacity:.6}.sd-flag-btn.flagged{font-size:24px;opacity:1;filter:none}.sd-progress{margin-top:8px}.sd-progress-track{height:6px;background-color:var(--color-border);border-radius:3px;overflow:hidden}.sd-progress-fill{height:100%;background-color:var(--color-accent);border-radius:3px;transition:width .15s linear}.sd-sec-next-label{display:inline-block;margin-top:4px;font-size:12px;font-weight:700;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.song-detail-actions{display:flex;gap:12px;justify-content:flex-end}.song-detail-edit{width:30%;min-height:64px;padding:16px;background:transparent;color:var(--color-text);border:1px solid #000;border-radius:var(--radius);font-size:18px;font-weight:700;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:opacity .15s}.song-detail-edit:hover{opacity:.85}.app{max-width:480px;margin:0 auto;padding:24px 16px;min-height:100vh}.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;padding-bottom:16px;border-bottom:2px solid var(--color-border)}.app-title{font-size:24px;font-weight:700;letter-spacing:-.5px;cursor:pointer;-webkit-tap-highlight-color:transparent}.lang-dropdown{position:relative}.lang-globe-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:4px;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.lang-dropdown-menu{position:absolute;top:100%;right:0;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:0 4px 12px #0000001a;z-index:100;min-width:120px;overflow:hidden}.lang-dropdown-item{display:block;width:100%;padding:10px 16px;background:none;border:none;font-size:14px;font-weight:500;text-align:left;cursor:pointer;transition:background-color .15s}.lang-dropdown-item:hover{background-color:var(--color-bg)}.app-main{display:flex;flex-direction:column;gap:24px}.back-btn{padding:8px 16px;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);font-size:14px;font-weight:600;margin-bottom:16px;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:background-color .15s}.back-btn:hover{background-color:var(--color-border)}.back-btn:active{background-color:#d0d0d0}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--color-bg: #f5f5f5;--color-surface: #ffffff;--color-primary: #2d2d2d;--color-accent: #e74c3c;--color-accent-hover: #c0392b;--color-text: #2d2d2d;--color-text-secondary: #777777;--color-border: #e0e0e0;--radius: 6px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--color-bg);color:var(--color-text);line-height:1.5;-webkit-font-smoothing:antialiased}button{cursor:pointer;border:none;font-family:inherit;font-size:inherit}select,input{font-family:inherit;font-size:inherit}