:root{--color-slate-50: #f8fafc;--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-300: #cbd5e1;--color-slate-400: #94a3b8;--color-slate-500: #64748b;--color-slate-600: #475569;--color-slate-700: #334155;--color-slate-800: #1e293b;--color-slate-900: #0f172a;--color-indigo-50: #eef2ff;--color-indigo-100: #e0e7ff;--color-indigo-500: #6366f1;--color-indigo-600: #4f46e5;--color-indigo-700: #4338ca;--color-emerald-50: #ecfdf5;--color-emerald-500: #10b981;--color-emerald-600: #059669;--color-amber-50: #fffbeb;--color-amber-500: #f59e0b;--color-amber-600: #d97706;--color-rose-50: #fff1f2;--color-rose-500: #f43f5e;--color-rose-600: #e11d48;--primary: var(--color-indigo-600);--primary-hover: var(--color-indigo-700);--primary-light: var(--color-indigo-50);--secondary: var(--color-slate-500);--secondary-hover: var(--color-slate-600);--success: var(--color-emerald-500);--success-light: var(--color-emerald-50);--warning: var(--color-amber-500);--warning-light: var(--color-amber-50);--error: var(--color-rose-500);--error-hover: var(--color-rose-600);--error-light: var(--color-rose-50);--bg-base: var(--color-slate-50);--bg-surface: #ffffff;--bg-muted: var(--color-slate-100);--text-primary: var(--color-slate-800);--text-secondary: var(--color-slate-500);--text-muted: var(--color-slate-400);--border-default: var(--color-slate-200);--border-strong: var(--color-slate-300);--shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);--shadow-md: 0 4px 6px -1px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .04);--shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, .08), 0 4px 6px -4px rgba(15, 23, 42, .04);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;--font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;--font-mono: "SF Mono", "Menlo", "Monaco", "Consolas", monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);font-size:15px;line-height:1.6;color:var(--text-primary);background-color:var(--bg-base);padding:var(--space-4);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{max-width:1200px;margin:0 auto}header{text-align:center;padding:var(--space-8) 0;margin-bottom:var(--space-6)}header h1{font-size:2.25rem;font-weight:700;letter-spacing:-.02em;color:var(--primary);margin-bottom:var(--space-2)}header p{font-size:1rem;color:var(--text-secondary);font-weight:400}main{background-color:var(--bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-6)}.btn-primary,.btn-secondary,.btn-danger,.btn-upload,.btn-export{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);font-size:.9375rem;font-weight:500;font-family:inherit;line-height:1;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);white-space:nowrap}.btn-primary,.btn-upload,.btn-export{background-color:var(--primary);color:#fff}.btn-primary:hover:not(:disabled),.btn-upload:hover:not(:disabled),.btn-export:hover:not(:disabled){background-color:var(--primary-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-secondary{background-color:var(--color-slate-100);color:var(--text-primary);border:1px solid var(--border-default)}.btn-secondary:hover:not(:disabled){background-color:var(--color-slate-200);border-color:var(--border-strong)}.btn-danger{background-color:var(--error);color:#fff}.btn-danger:hover:not(:disabled){background-color:var(--error-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-primary:disabled,.btn-secondary:disabled,.btn-danger:disabled,.btn-upload:disabled,.btn-export:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-small{padding:var(--space-2) var(--space-3);font-size:.8125rem}.btn-icon{font-size:1rem}.dropzone{border:2px dashed var(--border-strong);border-radius:var(--radius-lg);padding:var(--space-12) var(--space-6);text-align:center;transition:all var(--transition-normal);background-color:var(--bg-muted)}.dropzone.dragover{border-color:var(--primary);background-color:var(--primary-light)}.dropzone-content p{font-size:1.125rem;color:var(--text-primary);margin-bottom:var(--space-3)}.dropzone-hint{font-size:.875rem;color:var(--text-secondary)}.supported-formats{font-size:.8125rem;color:var(--text-muted);margin-top:var(--space-4)}.budoux{word-break:keep-all;overflow-wrap:anywhere}.dropzone-tip{font-size:.8125rem;color:var(--text-secondary);margin:var(--space-4) auto 0;padding:var(--space-3) var(--space-4);background-color:var(--warning-light);border-radius:var(--radius-sm);border-left:3px solid var(--warning);max-width:400px;text-align:left}.processing{text-align:center;padding:var(--space-12) var(--space-6)}.spinner{width:48px;height:48px;border:3px solid var(--border-default);border-top-color:var(--primary);border-radius:var(--radius-full);animation:spin .8s linear infinite;margin:0 auto var(--space-4)}@keyframes spin{to{transform:rotate(360deg)}}#processing-message{font-size:1rem;color:var(--text-secondary)}.error{text-align:center;padding:var(--space-6);background-color:var(--error-light);border-radius:var(--radius-md);border:1px solid var(--error)}#error-message{color:var(--error);font-size:.9375rem}.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-6);flex-wrap:wrap;gap:var(--space-4)}.results-header h2{font-size:1.5rem;font-weight:600;color:var(--text-primary)}.controls-group{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.export-buttons{display:flex;gap:var(--space-2)}.results-layout{display:grid;grid-template-columns:minmax(320px,400px) 1fr;gap:var(--space-6);align-items:start}.results-sidebar{position:sticky;top:var(--space-4);align-self:start;z-index:1}.sidebar-sticky{display:flex;flex-direction:column;gap:var(--space-4)}.results-main{min-width:0;display:flex;flex-direction:column;gap:var(--space-6);position:relative;z-index:2}.lyrics-preview-sidebar{background-color:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-4)}.lyrics-preview-sidebar h4{font-size:1rem;font-weight:600;margin-bottom:var(--space-3);color:var(--text-primary)}.lyrics-preview-sidebar .preview-controls{margin-bottom:var(--space-3)}.lyrics-preview-sidebar .preview-controls label{display:block;font-size:.8125rem;font-weight:500;margin-bottom:var(--space-2);color:var(--text-primary)}.lyrics-preview-sidebar .preview-controls textarea{width:100%;padding:var(--space-2);font-size:.875rem;font-family:inherit;border:1px solid var(--border-default);border-radius:var(--radius-sm);resize:vertical}.lyrics-preview-sidebar .preview-controls textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #6366f126}.lyrics-preview-sidebar .lyrics-preview-container{border-radius:var(--radius-sm)}.file-info{background-color:var(--bg-muted);padding:var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-6);font-size:.9375rem;line-height:1.8}.file-info p{margin-bottom:var(--space-1)}.file-info p:last-child{margin-bottom:0}.file-info strong{color:var(--text-primary);font-weight:600}.waveform-section{background-color:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-4);box-shadow:var(--shadow-sm)}.waveform-section h4{margin:0 0 var(--space-4) 0;font-size:1rem;font-weight:600;color:var(--text-primary)}.waveform-container{border-radius:var(--radius-md);overflow:hidden;background-color:var(--color-slate-800)}#waveform-canvas{display:block;width:100%;height:200px;cursor:crosshair}.preview-volume-control{background-color:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-4);box-shadow:var(--shadow-sm)}.preview-volume-control h4{margin:0 0 var(--space-4) 0;font-size:1rem;font-weight:600;color:var(--text-primary)}.preview-volume-control label{display:flex;align-items:center;font-size:.875rem;font-weight:500;color:var(--text-secondary);margin-bottom:var(--space-3)}.volume-icon{margin-right:var(--space-2);font-size:1.125rem}.volume-control-wrapper{display:flex;align-items:center;gap:var(--space-4)}.volume-slider{flex:1;height:6px;border-radius:var(--radius-full);background:var(--border-strong);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:var(--radius-full);background:var(--primary);cursor:pointer;transition:transform var(--transition-fast)}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.volume-slider::-moz-range-thumb{width:18px;height:18px;border-radius:var(--radius-full);background:var(--primary);cursor:pointer;border:none;transition:transform var(--transition-fast)}.volume-slider::-moz-range-thumb:hover{transform:scale(1.15)}.volume-value{font-size:.875rem;font-weight:600;color:var(--text-primary);min-width:45px;text-align:right;font-family:var(--font-mono)}.timestamps-container{position:relative;width:100%;overflow-x:auto}.timestamps-actions{display:flex;justify-content:flex-end;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);min-height:36px;flex-wrap:wrap}.timestamps-actions[id=timestamps-actions]{justify-content:flex-start;background-color:var(--warning-light);border:1px solid var(--warning);border-radius:var(--radius-md);padding:var(--space-3)}.timestamps-actions .sort-icon{margin-right:var(--space-1)}.selection-info{display:none;align-items:center;gap:var(--space-2);margin-right:auto}.selection-info.has-selection{display:flex}.selection-info #merge-selection-count{font-size:.8125rem;font-weight:500;color:var(--primary)}.selection-info #merge-segments-btn{padding:var(--space-1) var(--space-2);font-size:.75rem}.bulk-lyrics-form{background-color:var(--bg-muted);border:1px solid var(--primary);border-radius:var(--radius-md);padding:var(--space-5);margin-bottom:var(--space-4)}.bulk-lyrics-form h4{font-size:1.0625rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-2)}.bulk-lyrics-hint{font-size:.875rem;color:var(--text-secondary);margin-bottom:var(--space-4);line-height:1.5}.bulk-lyrics-input{width:100%;padding:var(--space-3);font-size:.9375rem;font-family:inherit;border:1px solid var(--border-default);border-radius:var(--radius-md);background-color:var(--bg-surface);color:var(--text-primary);resize:vertical;line-height:1.6;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.bulk-lyrics-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6366f11a}.bulk-lyrics-input::placeholder{color:var(--text-muted)}.bulk-lyrics-actions{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4);justify-content:flex-end}.bulk-lyrics-count{flex:1;font-size:.875rem;color:var(--text-secondary);font-weight:500}.bulk-lyrics-count.warning{color:var(--warning)}.bulk-lyrics-count.success{color:var(--success)}.timestamps-table-wrapper{max-height:500px;overflow:auto;border:1px solid var(--border-default);border-radius:var(--radius-md);width:100%}#timestamps-table{width:100%;min-width:900px;border-collapse:collapse;font-size:.9375rem}#timestamps-table thead{background-color:var(--bg-muted);position:sticky;top:0;z-index:10}#timestamps-table th{padding:var(--space-3);text-align:left;font-weight:600;font-size:.8125rem;text-transform:uppercase;letter-spacing:.03em;color:var(--text-secondary);border-bottom:1px solid var(--border-default)}#timestamps-table td{padding:var(--space-3);padding-bottom:var(--space-5);border-bottom:1px solid var(--border-default);font-family:var(--font-mono);font-size:.875rem;vertical-align:top}#timestamps-table th.checkbox-column,#timestamps-table td.checkbox-column{width:40px;text-align:center;padding:var(--space-3) var(--space-2)}#timestamps-table th.checkbox-column input[type=checkbox],#timestamps-table td.checkbox-column input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--primary)}#timestamps-table tbody tr{transition:background-color var(--transition-fast)}#timestamps-table tbody tr:hover{background-color:var(--primary-light)}#timestamps-table tbody tr.selected{background-color:#6366f11a}#timestamps-table tbody tr.selected:hover{background-color:#6366f126}#timestamps-table tbody tr.playing{background-color:#6366f11f}#timestamps-table tbody tr.playing .action-btn-play{background-color:var(--success)}#timestamps-table td:nth-child(2),#timestamps-table td:nth-child(3),#timestamps-table td:nth-child(4){white-space:nowrap}#timestamps-table td:nth-child(6){white-space:normal;min-width:180px;font-family:var(--font-sans)}.actions-column{padding:var(--space-2)!important;vertical-align:middle!important}.action-buttons{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.playback-actions{display:flex;gap:var(--space-2)}.action-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);font-family:inherit}.action-icon{font-size:12px;line-height:1;pointer-events:none}.action-btn-play{background-color:var(--primary);color:#fff}.action-btn-play .action-icon{transform:translate(1px)}.action-btn-play:hover:not(:disabled){background-color:var(--primary-hover);transform:scale(1.05)}.action-btn-stop{background-color:var(--color-slate-200);color:var(--text-primary)}.action-btn-stop:hover:not(:disabled){background-color:var(--color-slate-300);transform:scale(1.05)}.action-btn-delete{background-color:transparent;color:var(--error);border:1px solid var(--error)}.action-btn-delete:hover:not(:disabled){background-color:var(--error);color:#fff;transform:scale(1.05)}.action-btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}.lyrics-input{width:100%;min-width:200px;padding:var(--space-2) var(--space-3);font-size:.875rem;font-family:var(--font-sans);border:1px solid var(--border-default);border-radius:var(--radius-sm);background-color:var(--bg-surface);color:var(--text-primary);resize:vertical;line-height:1.5;min-height:60px;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.lyrics-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #6366f126}.lyrics-input::placeholder{color:var(--text-muted)}.lyrics-input.warning{border-color:var(--warning);background-color:var(--warning-light)}.lyrics-input.warning:focus{box-shadow:0 0 0 2px #f59e0b26}.lyrics-input-container{position:relative}.lyrics-warning{font-size:.75rem;color:var(--warning);margin-top:var(--space-1);font-weight:500}.time-input-container{position:relative;display:inline-block;z-index:1}.time-input-group{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}.time-separator{font-family:var(--font-mono);font-size:.875rem;font-weight:600;color:var(--text-primary);-webkit-user-select:none;user-select:none;line-height:1}.time-input{width:90px;padding:var(--space-1) var(--space-2);font-size:.875rem;font-family:var(--font-mono);border:1px solid var(--border-default);border-radius:var(--radius-sm);background-color:var(--bg-surface);color:var(--text-primary);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.time-part-input{width:32px;text-align:center;padding:var(--space-1);font-size:.8125rem}.time-part-input[data-part=milliseconds]{width:42px}.draggable-time-input,.time-part-input{cursor:ns-resize;-webkit-user-select:none;user-select:none}.draggable-time-input:focus,.time-part-input:focus{cursor:text;-webkit-user-select:text;user-select:text}.time-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #6366f126}.time-input.invalid{border-color:var(--error);background-color:var(--error-light)}.time-input.invalid:focus{box-shadow:0 0 0 2px #f43f5e26}.time-input.warning{border-color:var(--warning);background-color:var(--warning-light)}.time-input.warning:focus{box-shadow:0 0 0 2px #f59e0b26}.time-input-error{display:block;font-size:.6875rem;color:var(--error);margin-top:var(--space-1);font-family:var(--font-sans);white-space:nowrap}.time-consistency-warning{position:absolute;left:0;top:100%;font-size:.6875rem;color:var(--warning);margin-top:2px;font-family:var(--font-sans);font-weight:500;white-space:nowrap;z-index:1}.new-entry-form{background-color:var(--bg-muted);border:1px solid var(--primary);border-radius:var(--radius-md);padding:var(--space-5)}.new-entry-form h4{font-size:1.0625rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-2)}.form-mode-indicator{background-color:var(--primary-light);border-left:3px solid var(--primary);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-4);border-radius:var(--radius-sm);font-size:.8125rem;color:var(--text-primary);font-weight:500}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-4)}.form-field{display:flex;flex-direction:column}.form-field-full{grid-column:1 / -1}.form-field label{font-size:.8125rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-2)}.form-field .time-input{width:100%;padding:var(--space-2) var(--space-3);font-size:.9375rem}.form-field .lyrics-input{width:100%;padding:var(--space-2) var(--space-3);font-size:.9375rem;min-height:80px}.form-help-text{font-size:.6875rem;color:var(--text-secondary);margin-top:var(--space-1);min-height:16px;font-weight:500;transition:color var(--transition-fast)}.form-actions{display:flex;gap:var(--space-2);justify-content:flex-end}.lyrics-display-settings{padding:var(--space-5);border:1px solid var(--border-default);border-radius:var(--radius-md);background-color:var(--bg-surface)}.lyrics-display-settings h3{font-size:1.125rem;font-weight:600;margin-bottom:var(--space-5);color:var(--text-primary)}.settings-group{margin-bottom:var(--space-5);padding-bottom:var(--space-5);border-bottom:1px solid var(--border-default)}.settings-group:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.settings-group-title{font-size:.875rem;font-weight:600;color:var(--text-secondary);margin-bottom:var(--space-3);text-transform:uppercase;letter-spacing:.03em}.settings-group-content{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3);background-color:var(--bg-muted);border-radius:var(--radius-sm)}.settings-group-row{flex-direction:row;flex-wrap:wrap}.font-row,.google-font-row{display:flex;flex-direction:column;gap:var(--space-2)}.google-font-row>label{font-size:.8125rem;font-weight:500;color:var(--text-primary)}.font-style-row{display:flex;align-items:center;gap:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border-default)}.style-row-label{font-size:.75rem;font-weight:500;color:var(--text-secondary);white-space:nowrap}.style-controls{display:flex;align-items:center;gap:0;border:1px solid var(--border-default);border-radius:var(--radius-sm);overflow:hidden;background-color:var(--bg-surface)}.style-controls>input[type=number]{width:56px;height:32px;padding:0 var(--space-2);font-size:.8125rem;text-align:center;border:none;border-right:1px solid var(--border-default);background-color:transparent;color:var(--text-primary)}.style-controls>input[type=number]:focus{outline:none;background-color:var(--bg-muted)}.style-controls>input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:32px;height:32px;padding:4px;border:none;border-right:1px solid var(--border-default);cursor:pointer;background:none}.style-controls>input[type=color]::-webkit-color-swatch-wrapper{padding:0;border:none}.style-controls>input[type=color]::-webkit-color-swatch{border:none;border-radius:3px}.style-controls>input[type=color]::-moz-color-swatch{border:none;border-radius:3px}.style-controls>select.weight-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:56px;height:32px;padding:0 var(--space-2);font-size:.8125rem;text-align:center;border:none;border-right:1px solid var(--border-default);background-color:transparent;color:var(--text-primary);cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%236b7280' d='M4 5L0 0h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;padding-right:16px}.style-controls>select.weight-select:focus{outline:none;background-color:var(--bg-muted)}.style-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;cursor:pointer;border-right:1px solid var(--border-default);transition:all var(--transition-fast)}.style-toggle:last-child{border-right:none}.style-toggle input[type=checkbox]{display:none}.style-toggle span{font-size:.8125rem;font-weight:600;color:var(--text-secondary);-webkit-user-select:none;user-select:none}.style-toggle:hover{background-color:var(--bg-muted)}.style-toggle:has(input:checked){background-color:var(--primary)}.style-toggle:has(input:checked) span{color:#fff}.setting-field-compact{display:flex;align-items:center;gap:var(--space-2)}.setting-field-compact label{font-size:.75rem;font-weight:500;color:var(--text-secondary);white-space:nowrap}.setting-field-compact input[type=number]{width:64px;height:32px;padding:0 var(--space-2);font-size:.8125rem;text-align:center}.setting-field-flex{flex:1;min-width:200px}.settings-grid{display:grid;grid-template-columns:1fr 2fr;gap:var(--space-4);align-items:center}.setting-field{display:flex;flex-direction:column;gap:var(--space-2)}.setting-field label{font-size:.8125rem;font-weight:500;color:var(--text-primary)}.setting-field input[type=number],.setting-field select{padding:var(--space-2) var(--space-3);font-size:.9375rem;font-family:inherit;border:1px solid var(--border-default);border-radius:var(--radius-sm);background-color:var(--bg-surface);color:var(--text-primary);transition:border-color var(--transition-fast),background-color var(--transition-fast)}.setting-field input[type=number]{cursor:ns-resize;-webkit-user-select:none;user-select:none}.setting-field input[type=number]:focus{cursor:text;-webkit-user-select:text;user-select:text}.setting-field input[type=number]:hover:not(:focus){background-color:var(--primary-light);border-color:var(--primary)}.setting-field input[type=number]:focus,.setting-field select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #6366f126}.font-select-wrapper{display:flex;gap:var(--space-2);align-items:center}.font-select-wrapper select{flex:1}.font-status{font-size:.75rem;margin-top:var(--space-2)}.font-status.warning{color:var(--warning)}.font-status.success{color:var(--success)}.google-font-section{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--border-default)}.google-font-section>label{display:block;font-size:.8125rem;font-weight:500;color:var(--text-primary);margin-bottom:var(--space-2)}.google-font-row{padding-top:var(--space-3);border-top:1px solid var(--border-default)}.google-font-wrapper{display:flex;gap:var(--space-2);align-items:flex-start}.google-font-input-container{flex:1;position:relative}.google-font-input-container input{width:100%;padding:var(--space-2) var(--space-3);font-size:.875rem;font-family:inherit;border:1px solid var(--border-default);border-radius:var(--radius-sm);background-color:var(--bg-surface);color:var(--text-primary);transition:border-color var(--transition-fast),background-color var(--transition-fast)}.google-font-input-container input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #6366f126}.google-font-input-container input::placeholder{color:var(--text-tertiary)}.font-suggestions{position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background-color:var(--bg-surface);border:1px solid var(--border-default);border-top:none;border-radius:0 0 var(--radius-sm) var(--radius-sm);list-style:none;margin:0;padding:0;z-index:100;box-shadow:var(--shadow-md)}.font-suggestions.hidden{display:none}.font-suggestions li{padding:var(--space-2) var(--space-3);cursor:pointer;font-size:.875rem;color:var(--text-primary);transition:background-color var(--transition-fast)}.font-suggestions li:hover,.font-suggestions li.selected{background-color:var(--primary-light)}.font-suggestions li .font-category{font-size:.75rem;color:var(--text-tertiary);margin-left:var(--space-2)}.font-hint{font-size:.75rem;color:var(--text-tertiary);margin-top:var(--space-1)}.font-hint a{color:var(--primary);text-decoration:none}.font-hint a:hover{text-decoration:underline}.style-detail-settings{grid-column:1 / -1;padding:var(--space-3);background-color:var(--bg-surface);border-radius:var(--radius-sm);border:1px solid var(--border-default)}.style-detail-settings.hidden{display:none}.style-detail-grid{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}.style-detail-field{display:flex;align-items:center;gap:var(--space-2)}.style-detail-field label{font-size:.75rem;font-weight:500;color:var(--text-secondary);white-space:nowrap}.style-detail-field input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:32px;height:32px;padding:0;border:1px solid var(--border-default);border-radius:var(--radius-sm);cursor:pointer;background:none}.style-detail-field input[type=color]::-webkit-color-swatch-wrapper{padding:3px;border:none}.style-detail-field input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}.style-detail-field input[type=color]::-moz-color-swatch{border:none;border-radius:4px}.style-detail-field input[type=number]{width:64px;height:32px;padding:0 var(--space-2);font-size:.8125rem;text-align:center;border:1px solid var(--border-default);border-radius:var(--radius-sm);background-color:var(--bg-surface);color:var(--text-primary)}.setting-field input[type=color]{width:100%;height:40px;padding:var(--space-1);border:1px solid var(--border-default);border-radius:var(--radius-sm);background-color:var(--bg-surface);cursor:pointer}.setting-field input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.setting-field input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}.setting-field-full{grid-column:1 / -1}.preview-section{margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--border-default)}.preview-section h4{font-size:1rem;font-weight:600;margin-bottom:var(--space-4);color:var(--text-primary)}.preview-controls{margin-bottom:var(--space-4)}.preview-controls label{display:block;font-size:.8125rem;font-weight:500;margin-bottom:var(--space-2);color:var(--text-primary)}.preview-controls textarea{width:100%;padding:var(--space-3);font-size:.9375rem;font-family:inherit;border:1px solid var(--border-default);border-radius:var(--radius-sm);resize:vertical}.preview-controls textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #6366f126}.lyrics-preview-container{position:relative;background-color:var(--color-slate-800);border-radius:var(--radius-md);overflow:hidden}#lyrics-preview-canvas{display:block;width:100%;height:auto}.preview-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff6;font-size:.875rem;text-align:center;pointer-events:none;display:none}.lyrics-preview-container:not(.has-image) .preview-hint{display:block}.image-upload-section{padding:var(--space-5);border:1px solid var(--border-default);border-radius:var(--radius-md);background-color:var(--bg-surface)}.image-upload-section .section-header{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4)}.image-upload-section .section-icon{font-size:1.25rem}.image-upload-section h3{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin:0}.image-upload-content{margin-bottom:var(--space-4)}.image-dropzone{border:2px dashed var(--border-strong);border-radius:var(--radius-md);padding:var(--space-8) var(--space-5);text-align:center;transition:all var(--transition-normal);background-color:var(--bg-muted)}.image-dropzone:hover,.image-dropzone.dragover{border-color:var(--primary);background-color:var(--primary-light)}.dropzone-visual{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.upload-icon{font-size:2rem;margin-bottom:var(--space-2)}.upload-title{font-size:1rem;font-weight:500;color:var(--text-primary);margin:0}.upload-hint{font-size:.8125rem;color:var(--text-secondary);margin:0}.image-dropzone .supported-formats{margin-top:var(--space-3)}.image-info{margin-top:var(--space-4);padding:var(--space-2) var(--space-4);background-color:var(--bg-muted);border-radius:var(--radius-sm);border:1px solid var(--border-default);text-align:center;font-size:.875rem;color:var(--text-secondary)}.export-audio-section{margin-top:var(--space-4);padding:var(--space-4);background-color:var(--bg-muted);border:1px solid var(--border-default);border-radius:var(--radius-md)}.export-audio-header{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}.section-subicon{font-size:1rem}.export-audio-header h4{font-size:.9375rem;font-weight:600;color:var(--text-primary);margin:0}.export-audio-description{font-size:.8125rem;color:var(--text-secondary);margin-bottom:var(--space-3);line-height:1.5}.export-audio-dropzone{border:2px dashed var(--border-strong);border-radius:var(--radius-sm);padding:var(--space-4);text-align:center;transition:all var(--transition-normal);background-color:var(--bg-surface)}.export-audio-dropzone:hover,.export-audio-dropzone.dragover{border-color:var(--primary);background-color:var(--primary-light)}.export-audio-dropzone.has-file{display:none}.dropzone-visual-compact{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.upload-icon-small{font-size:1.25rem}.upload-title-small{font-size:.875rem;font-weight:500;color:var(--text-primary);margin:0}.btn-upload-small{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-2) var(--space-3);font-size:.8125rem;font-weight:500;font-family:inherit;background-color:var(--color-slate-100);color:var(--text-primary);border:1px solid var(--border-default);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-normal)}.btn-upload-small:hover{background-color:var(--color-slate-200);border-color:var(--border-strong)}.export-audio-info{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3);background-color:var(--success-light);border:1px solid var(--success);border-radius:var(--radius-sm);font-size:.875rem;color:var(--text-primary)}.export-audio-info .audio-icon{font-size:1rem}.export-audio-info #export-audio-name{flex:1;font-family:var(--font-mono);font-size:.8125rem;word-break:break-all}.btn-clear-audio{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;font-size:.75rem;background-color:transparent;color:var(--text-secondary);border:1px solid var(--border-default);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.btn-clear-audio:hover{background-color:var(--error);color:#fff;border-color:var(--error)}.video-export-controls{margin-top:var(--space-4);display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.export-help-text{padding:var(--space-4);background-color:var(--warning-light);border:1px solid var(--warning);border-radius:var(--radius-md);color:var(--text-primary);font-size:.875rem;line-height:1.6;max-width:600px;width:100%}.export-help-text ul{margin:var(--space-2) 0 0 0;padding-left:20px;text-align:left}.export-help-text li{margin-bottom:var(--space-1)}.export-help-text strong{color:var(--color-amber-600);font-weight:600;display:block;margin-bottom:var(--space-2)}.video-progress-container{margin-top:var(--space-4);padding:var(--space-4);background-color:var(--bg-muted);border-radius:var(--radius-md);border:1px solid var(--border-default)}.progress-bar{width:100%;height:8px;background-color:var(--border-strong);border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-3)}.progress-bar-fill{height:100%;background-color:var(--primary);transition:width var(--transition-slow),background-color var(--transition-normal);width:0%}.progress-bar-fill.complete{background-color:var(--success)}#video-progress-message{font-size:.9375rem;color:var(--text-secondary);text-align:center;margin-bottom:var(--space-2)}#video-progress-message.complete{font-size:1.0625rem;font-weight:600;color:var(--success)}.video-progress-time{font-size:.8125rem;color:var(--text-muted);text-align:center;font-family:var(--font-mono)}.player-controls{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-6);padding:var(--space-4);background-color:var(--bg-muted);border-radius:var(--radius-md)}#playback-time{font-family:var(--font-mono);font-size:1rem;font-weight:500;color:var(--text-primary)}.hidden{display:none!important}.preview-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center}.preview-modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#000000d9;cursor:pointer}.preview-modal-content{position:relative;max-width:90vw;max-height:90vh;display:flex;align-items:center;justify-content:center}.preview-modal-close{position:absolute;top:-40px;right:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-sm);color:#fff;font-size:1rem;cursor:pointer;transition:all var(--transition-fast)}.preview-modal-close:hover{background-color:#fff3;border-color:#ffffff4d}#preview-modal-canvas{display:block;width:auto;height:auto;max-width:90vw;max-height:85vh;border-radius:var(--radius-md);box-shadow:0 25px 50px -12px #00000080}.lyrics-preview-container{cursor:pointer;transition:opacity var(--transition-fast)}.lyrics-preview-container:hover{opacity:.9}.video-preview-section{padding:var(--space-4);background-color:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.video-preview-section h4{margin:0 0 var(--space-2) 0;font-size:1rem;font-weight:600;color:var(--text-primary)}.preview-notice{margin:0 0 var(--space-4) 0;font-size:.8125rem;color:var(--text-secondary);line-height:1.5}.video-preview-container{width:100%;background-color:var(--color-slate-900);border-radius:var(--radius-md);overflow:hidden;aspect-ratio:16 / 9;display:flex;align-items:center;justify-content:center}.video-preview-container canvas{display:block;width:100%;height:100%;object-fit:contain}.video-preview-controls{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4);padding:var(--space-3);background-color:var(--bg-muted);border-radius:var(--radius-md)}.preview-control-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);font-family:inherit;font-size:12px}.preview-control-btn:hover:not(:disabled){transform:scale(1.05)}.preview-control-btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}#preview-play-btn{background-color:var(--primary);color:#fff}#preview-play-btn .action-icon{transform:translate(1px)}#preview-play-btn:hover:not(:disabled){background-color:var(--primary-hover)}#preview-pause-btn{background-color:var(--warning);color:#fff}#preview-pause-btn:hover:not(:disabled){background-color:var(--warning);filter:brightness(.9)}#preview-stop-btn{background-color:var(--color-slate-200);color:var(--text-primary)}#preview-stop-btn:hover:not(:disabled){background-color:var(--color-slate-300)}.preview-time-display{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:.875rem;color:var(--text-secondary);margin-left:auto}.video-preview-seekbar-container{margin-top:var(--space-3)}.video-preview-seekbar{width:100%;height:8px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}.video-preview-seekbar::-webkit-slider-runnable-track{width:100%;height:8px;background:var(--color-slate-300);border-radius:var(--radius-full)}.video-preview-seekbar::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:var(--primary);border-radius:50%;margin-top:-4px;box-shadow:var(--shadow-sm);transition:all var(--transition-fast)}.video-preview-seekbar::-webkit-slider-thumb:hover{background:var(--primary-hover);transform:scale(1.2);box-shadow:var(--shadow-md)}.video-preview-seekbar::-moz-range-track{width:100%;height:8px;background:var(--color-slate-300);border-radius:var(--radius-full)}.video-preview-seekbar::-moz-range-thumb{width:16px;height:16px;background:var(--primary);border:none;border-radius:50%;box-shadow:var(--shadow-sm);transition:all var(--transition-fast)}.video-preview-seekbar::-moz-range-thumb:hover{background:var(--primary-hover);transform:scale(1.2);box-shadow:var(--shadow-md)}.video-preview-seekbar:disabled{opacity:.5;cursor:not-allowed}.video-preview-seekbar:disabled::-webkit-slider-thumb{cursor:not-allowed}.video-preview-seekbar:disabled::-moz-range-thumb{cursor:not-allowed}.video-preview-actions{margin-top:var(--space-4);display:flex;align-items:center;gap:var(--space-3)}.preview-generation-progress{display:flex;align-items:center;gap:var(--space-2);flex:1}.progress-bar-mini{flex:1;height:8px;background-color:var(--color-slate-200);border-radius:var(--radius-full);overflow:hidden}.progress-bar-mini .progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--color-indigo-500));transition:width var(--transition-fast)}#preview-progress-text{font-family:var(--font-mono);font-size:.875rem;color:var(--text-secondary);min-width:40px;text-align:right}@media (max-width: 1200px){.results-layout{grid-template-columns:minmax(280px,350px) 1fr}#timestamps-table{min-width:800px}}@media (max-width: 1024px){.results-layout{grid-template-columns:1fr;gap:var(--space-4)}.results-sidebar{position:static;width:100%}.sidebar-sticky{position:static}.results-main{overflow-x:auto;width:100%;position:static;z-index:auto}.controls-group{flex-direction:column;align-items:stretch}.controls-group button,.export-buttons{width:100%}#timestamps-table{min-width:700px}.google-font-wrapper{flex-direction:column}.google-font-wrapper button{width:100%}}@media (max-width: 768px){body{padding:var(--space-2)}header{padding:var(--space-6) 0}header h1{font-size:1.75rem}main{padding:var(--space-4);overflow-x:hidden}.results-layout{gap:var(--space-3)}.results-header{flex-direction:column;align-items:flex-start}.export-buttons{width:100%;flex-direction:column}.export-buttons button{width:100%}.player-controls{flex-wrap:wrap}.timestamps-container{width:100%;overflow-x:auto}#timestamps-table{font-size:.75rem;min-width:600px}#timestamps-table th,#timestamps-table td{padding:var(--space-2)}.time-input{width:80px;font-size:.75rem;padding:var(--space-1)}.time-part-input{width:28px;font-size:.75rem}.time-part-input[data-part=milliseconds]{width:38px}.settings-grid,.form-grid{grid-template-columns:1fr}.form-actions{flex-direction:column}.form-actions .btn-primary,.form-actions .btn-secondary{width:100%}.action-buttons{flex-direction:column;gap:var(--space-1)}.action-btn{width:28px;height:28px}.action-icon{font-size:10px}.font-select-wrapper{flex-direction:column;align-items:stretch}.font-select-wrapper .btn-small{width:100%}.font-style-row{flex-wrap:wrap}.style-controls{width:100%}.settings-group-row{gap:var(--space-2)}.setting-field-compact{flex:1;min-width:0}.timestamps-actions{flex-wrap:wrap;gap:var(--space-2)}.timestamps-actions button{flex:1;min-width:120px}.selection-info{width:100%;flex-wrap:wrap}.video-preview-controls{flex-wrap:wrap}.preview-time-display{width:100%;justify-content:center;margin-left:0;margin-top:var(--space-2)}}@media (max-width: 480px){header h1{font-size:1.5rem}main{padding:var(--space-3);overflow-x:hidden}.dropzone{padding:var(--space-8) var(--space-4)}.results-layout{gap:var(--space-2)}.timestamps-container{width:100%;overflow-x:auto}#timestamps-table{font-size:.6875rem;min-width:500px}#timestamps-table th,#timestamps-table td{padding:var(--space-1)}.time-input{width:70px;font-size:.6875rem}.time-part-input{width:24px;font-size:.6875rem}.time-part-input[data-part=milliseconds]{width:34px}.action-btn{width:24px;height:24px}.action-icon{font-size:9px}.btn-primary,.btn-secondary,.btn-danger{padding:var(--space-2) var(--space-3);font-size:.875rem}.btn-small{padding:var(--space-1) var(--space-2);font-size:.75rem}#waveform-canvas{height:150px}.lyrics-display-settings,.image-upload-section,.new-entry-form,.bulk-lyrics-form{padding:var(--space-3)}.timestamps-actions button{min-width:100%}}