.button,button,input[type=button],input[type=submit]{background-color:var(--gray-200);color:var(--gray-800);border:1px solid var(--gray-300);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm);cursor:pointer;font-size:.9rem;font-weight:500;transition:var(--transition);display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);text-decoration:none;line-height:1.5}.button:hover,button:hover,input[type=button]:hover,input[type=submit]:hover{background-color:var(--gray-300);border-color:var(--gray-400)}.button:active,button:active,input[type=button]:active,input[type=submit]:active{transform:translateY(1px)}.button:disabled,button:disabled,input[type=button]:disabled,input[type=submit]:disabled{background-color:var(--gray-100);color:var(--gray-500);border-color:var(--gray-300);cursor:not-allowed;opacity:.7}.btn-primary{background-color:var(--primary);color:#fff;border-color:var(--primary-dark)}.btn-primary:hover:not(:disabled){background-color:var(--primary-dark);border-color:var(--primary-dark)}.btn-success{background-color:var(--success);color:#fff;border-color:var(--success)}.btn-success:hover:not(:disabled){background-color:#05b386;border-color:#05b386}.btn-danger{background-color:var(--danger);color:#fff;border-color:var(--danger)}.btn-danger:hover:not(:disabled){background-color:#d63e60;border-color:#d63e60}.btn-warning{background-color:var(--warning);color:var(--gray-800);border-color:var(--warning)}.btn-warning:hover:not(:disabled){background-color:#e6bc5c;border-color:#e6bc5c}.btn-secondary{background-color:var(--secondary);color:#fff;border-color:var(--secondary)}.btn-secondary:hover:not(:disabled){background-color:#43b4d8;border-color:#43b4d8}#record-toggle-btn{background-color:var(--primary);color:#fff}#record-toggle-btn:hover:not(:disabled){background-color:var(--primary-dark)}#record-toggle-btn.recording{background-color:var(--danger);color:#fff}#record-toggle-btn.recording:hover:not(:disabled){background-color:#d63e60}#pause-record-btn{background-color:var(--primary);color:#fff}#pause-record-btn:hover:not(:disabled){background-color:var(--primary-dark)}#pause-record-btn.paused{background-color:var(--success);color:#fff}#pause-record-btn.paused:hover:not(:disabled){background-color:#05b386}#mute-mic-btn{background-color:var(--danger);color:#fff;border-color:var(--danger)}#mute-mic-btn:hover:not(:disabled){background-color:#c73059;border-color:#c73059}#mute-mic-btn.muted{background-color:var(--success);color:#fff;border-color:var(--success)}#mute-mic-btn.muted:hover:not(:disabled){background-color:#05b386;border-color:#05b386}.link-button{background:0 0;border:none;color:var(--primary);padding:0;font:inherit;cursor:pointer;text-decoration:underline}.link-button:hover{color:var(--primary-dark);text-decoration:none}input[type=range]{-webkit-appearance:none;appearance:none;background:0 0;cursor:pointer;width:100%}input[type=range].vertical-slider{writing-mode:bt-lr;-webkit-appearance:slider-vertical;width:20px;height:120px;padding:0;margin:0 5px}input[type=range]::-webkit-slider-runnable-track{background:var(--slider-track-color);height:8px;border-radius:4px}input[type=range].vertical-slider::-webkit-slider-runnable-track{width:8px;height:100%;background:var(--slider-track-color);border-radius:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-4px;background-color:var(--slider-thumb-color);height:16px;width:16px;border-radius:50%;border:1px solid var(--slider-thumb-border-color);box-shadow:0 1px 3px rgba(0,0,0,.1)}input[type=range].vertical-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-left:0;background-color:var(--slider-thumb-color);height:16px;width:16px;border-radius:50%;border:1px solid var(--slider-thumb-border-color);box-shadow:0 1px 3px rgba(0,0,0,.1)}input[type=range]::-moz-range-track{background:var(--slider-track-color);height:8px;border-radius:4px;border:none}input[type=range].vertical-slider::-moz-range-track{width:8px;height:100%;background:var(--slider-track-color);border-radius:4px;border:none}input[type=range]::-moz-range-thumb{background-color:var(--slider-thumb-color);height:14px;width:14px;border-radius:50%;border:1px solid var(--slider-thumb-border-color);box-shadow:0 1px 3px rgba(0,0,0,.1)}input[type=range].vertical-slider::-moz-range-thumb{background-color:var(--slider-thumb-color);height:14px;width:14px;border-radius:50%;border:1px solid var(--slider-thumb-border-color);box-shadow:0 1px 3px rgba(0,0,0,.1)}select{background-color:var(--input-bg-color);color:var(--text-color);border:1px solid var(--input-border-color);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm);font-size:.9rem;min-width:150px;transition:var(--transition);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-right:30px}select:focus{border-color:var(--primary);outline:0;box-shadow:0 0 0 2px rgba(67,97,238,.25)}select:disabled{background-color:var(--input-disabled-bg-color);color:var(--input-disabled-text-color);opacity:.7}input[type=email],input[type=text],textarea{background-color:var(--input-bg-color);color:var(--text-color);border:1px solid var(--input-border-color);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm);font-size:.9rem;width:100%;box-sizing:border-box;transition:var(--transition)}input[type=email]:focus,input[type=text]:focus,textarea:focus{border-color:var(--primary);outline:0;box-shadow:0 0 0 2px rgba(67,97,238,.25)}input[type=email]:disabled,input[type=text]:disabled,textarea:disabled{background-color:var(--input-disabled-bg-color);color:var(--input-disabled-text-color);opacity:.7}input[type=checkbox]{margin-right:var(--spacing-xs);vertical-align:middle;width:16px;height:16px;accent-color:var(--primary)}input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}input[type=checkbox]+label{vertical-align:middle;cursor:pointer}.slider-with-vu canvas{background-color:var(--vu-meter-bg-color);border:1px solid var(--vu-meter-border-color);border-radius:var(--border-radius-sm);display:block;margin-right:var(--spacing-xs);width:70px;height:20px}.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}.change-file-label{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:30px;height:30px;padding:0;border:1px solid var(--gray-400);border-radius:var(--border-radius-sm);background-color:var(--gray-100);color:var(--gray-600);transition:var(--transition);flex-shrink:0}.change-file-label:hover{background-color:var(--gray-200);border-color:var(--gray-500);color:var(--gray-700)}.sound-control-btn{display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:1em;min-width:auto;width:30px;height:30px;text-align:center;flex-shrink:0;border-radius:var(--border-radius-sm);line-height:1;border:none;color:#fff;cursor:pointer}.sound-control-btn:disabled{background-color:var(--gray-400)!important;opacity:.6;cursor:default;box-shadow:none}.sound-control-btn i{font-size:.9em;margin:0;vertical-align:middle}.play-sound-btn{background-color:var(--success)}.play-sound-btn:hover:not(:disabled){background-color:#05b386}.play-sound-btn.playing{opacity:.7;box-shadow:inset 0 0 5px rgba(0,0,0,.3)}.stop-sound-btn{background-color:var(--danger)}.stop-sound-btn:hover:not(:disabled){background-color:#d63e60}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow-y:auto;background-color:rgba(0,0,0,.5);opacity:0;transition:opacity .3s ease;padding:24px;box-sizing:border-box}.modal.modal--active{display:flex;opacity:1}.modal-content{background-color:var(--card-bg);margin:auto;padding:var(--spacing-lg);border:1px solid var(--border-color);border-radius:var(--border-radius);width:100%;max-width:700px;box-shadow:var(--box-shadow);position:relative;transform:translateY(-20px);transition:transform .3s ease;max-height:calc(100vh - 48px);overflow-y:auto}.modal.modal--active .modal-content{transform:translateY(0)}.modal-content h2{margin-top:0;color:var(--gray-800);border-bottom:1px solid var(--gray-200);padding-bottom:var(--spacing-sm)}.modal-content ul{padding-left:var(--spacing-md)}.modal-content ul li{margin-bottom:var(--spacing-sm)}.close-btn{color:var(--gray-500);float:right;font-size:28px;font-weight:700;position:absolute;top:var(--spacing-sm);right:var(--spacing-md);transition:var(--transition)}.close-btn:focus,.close-btn:hover{color:var(--gray-800);text-decoration:none;cursor:pointer}.form-group{margin-bottom:var(--spacing-md)}.form-group:last-child{margin-bottom:0}.form-group label{display:block;margin-bottom:var(--spacing-xs);font-weight:500;color:var(--gray-700)}.form-group input,.form-group textarea{width:100%}.feedback-form-section{margin-bottom:0}.toggle-collapse-btn{background:0 0;border:none;color:var(--gray-600);cursor:pointer;padding:0 var(--spacing-xs);font-size:1em;float:right;margin-left:var(--spacing-sm);transition:var(--transition)}.toggle-collapse-btn:hover{color:var(--gray-800)}.toggle-collapse-btn i.fas{transition:transform .3s ease-in-out}.toggle-collapse-btn[aria-expanded=false] i.fas{transform:rotate(-90deg)}.toggle-collapse-btn[aria-expanded=true] i.fas{transform:rotate(0)}#waveform-output{border:1px solid var(--border-color);border-radius:6px;background-color:#fdf4f0;margin-bottom:10px}body.dark-theme #waveform-output{background-color:#1a1210;border-color:#3a2a24}.preview-scrubber-row{display:flex;align-items:center;gap:var(--spacing-sm,8px);margin-bottom:var(--spacing-sm,8px)}.preview-scrubber-row input[type=range]{flex:1;height:4px;accent-color:var(--primary,#E84B00);cursor:pointer}.preview-scrubber-row input[type=range]:disabled{opacity:.35;cursor:not-allowed}.preview-time{font-family:monospace;font-size:.82rem;color:var(--text-secondary,#555);white-space:nowrap;min-width:42px}.preview-time:first-child{text-align:right}.preview-controls{display:flex;align-items:center;gap:var(--spacing-sm,8px)}.preview-vol-group{display:flex;align-items:center;gap:6px;margin-left:auto}.preview-vol-icon{color:var(--text-secondary,#666);font-size:.9rem;flex-shrink:0}#preview-volume-slider{width:120px}#waveform-preview-container .preview-controls button i{margin-right:0}.volume-controls-container{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:20px;padding:10px 0;flex-wrap:nowrap;width:100%}.volume-control-group{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:75px;flex:1}.volume-control-group .volume-label,.volume-control-group .volume-value-label{font-size:.8rem;margin-bottom:5px;color:var(--text-color-muted,#adb5bd);white-space:nowrap}.slider-with-vu{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;margin-top:5px}.slider-with-vu input[type=range]{flex:1;margin-left:var(--spacing-xs);min-width:80px}.welcome-modal-content{max-width:680px;max-height:calc(100vh - 48px);padding:0;overflow:hidden;display:flex;flex-direction:column}.welcome-header{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg);background:linear-gradient(135deg,var(--primary) 0,var(--secondary) 100%);border-radius:var(--border-radius) var(--border-radius) 0 0}.welcome-logo{width:72px;height:72px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}.welcome-header-text h2{margin:0 0 4px;color:#fff;border-bottom:none;padding-bottom:0;font-size:1.5rem}.welcome-subtitle{margin:0;color:rgba(255,255,255,.85);font-size:.9rem}.welcome-body{display:flex;flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-lg);flex:1 1 auto;min-height:0;overflow-y:auto}.welcome-section{background-color:var(--gray-100);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);padding:var(--spacing-md)}.welcome-section h3{color:var(--primary);font-size:.9rem;font-weight:600;margin:0 0 var(--spacing-sm);display:flex;align-items:center;gap:7px;text-transform:uppercase;letter-spacing:.04em}.welcome-section h3 i{font-size:.85em}.welcome-section ol,.welcome-section ul{padding-left:20px;margin:0}.welcome-section li{margin-bottom:6px;font-size:.875rem;line-height:1.55;color:var(--gray-700)}.welcome-section li:last-child{margin-bottom:0}.welcome-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);border-top:1px solid var(--border-color);background-color:var(--card-bg);border-radius:0 0 var(--border-radius) var(--border-radius);gap:var(--spacing-md)}.welcome-dont-show{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-muted);cursor:pointer;user-select:none}.welcome-dont-show input[type=checkbox]{margin:0;flex-shrink:0;width:15px;height:15px}#welcome-get-started-btn{padding:var(--spacing-sm) var(--spacing-lg);font-size:1rem;font-weight:600;flex-shrink:0}body.dark-theme .welcome-section{background-color:var(--card-bg);border-color:var(--border-color)}body.dark-theme .welcome-section li{color:var(--text-color)}body.dark-theme .welcome-footer{background-color:var(--card-bg);border-top-color:var(--border-color)}.countdown-overlay{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}.countdown-inner{display:flex;flex-direction:column;align-items:center;gap:1.25rem}.countdown-label{font-size:1.1rem;font-weight:500;color:rgba(255,255,255,.8);letter-spacing:.04em;text-transform:uppercase}.countdown-number{font-size:9rem;font-weight:800;line-height:1;color:#fff;text-shadow:0 0 40px rgba(232,75,0,.9),0 4px 20px rgba(0,0,0,.5);animation:countdown-pop 1s ease-out forwards}.countdown-skip{font-size:.9rem;padding:.5rem 1.5rem;border-radius:999px;opacity:.85}.countdown-skip:hover{opacity:1}@keyframes countdown-pop{0%{transform:scale(1.4);opacity:.3}30%{transform:scale(1);opacity:1}85%{transform:scale(1);opacity:1}100%{transform:scale(.8);opacity:0}}.realtime-mp3-control{border:1px solid var(--border-color);border-radius:var(--radius);padding:var(--spacing-sm) var(--spacing-md);background:var(--surface-alt,var(--surface))}.checkbox-label{display:flex;align-items:center;gap:.5rem;font-weight:500;cursor:pointer}.badge-beta{display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:.04em;padding:2px 6px;border-radius:999px;background:var(--amber,#ff7b00);color:#fff;text-transform:uppercase;vertical-align:middle}.badge-browser{display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:.04em;padding:2px 6px;border-radius:999px;background:#2563eb;color:#fff;text-transform:uppercase;vertical-align:middle}.unsupported-feature{opacity:.45;cursor:not-allowed}.setting-help-text{margin:.4rem 0 0;font-size:.8rem;color:var(--text-muted,#666);line-height:1.4}.mp3-progress-bar{display:block;width:100%;height:8px;margin-top:.5rem;border:none;border-radius:999px;overflow:hidden;appearance:none;-webkit-appearance:none;background:var(--gray-200)}.mp3-progress-bar::-webkit-progress-bar{background:var(--gray-200);border-radius:999px}.mp3-progress-bar::-webkit-progress-value{background:var(--primary);border-radius:999px;transition:width .15s ease}.mp3-progress-bar::-moz-progress-bar{background:var(--primary);border-radius:999px}.log-container{padding:var(--spacing-md);max-width:900px}.log-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.log-header h2{margin:0}.log-actions{display:flex;gap:var(--spacing-sm)}.log-help-text{font-size:.85rem;color:var(--text-muted,#666);margin-bottom:var(--spacing-md)}.log-help-text kbd{display:inline-block;padding:1px 6px;border:1px solid var(--border-color);border-radius:4px;background:var(--surface-alt,#f4f4f4);font-family:monospace;font-size:.8rem}.log-table-wrapper{border:1px solid var(--border-color);border-radius:var(--border-radius-sm);overflow:auto;max-height:calc(100vh - 260px)}.log-table{width:100%;border-collapse:collapse;font-size:.88rem}.log-table thead th{background:var(--surface-alt,#f4f4f4);padding:var(--spacing-sm) var(--spacing-md);text-align:left;font-weight:600;border-bottom:2px solid var(--border-color);position:sticky;top:0;z-index:1}.log-table td{padding:var(--spacing-sm) var(--spacing-md);border-bottom:1px solid var(--border-color);vertical-align:middle;outline:0}.log-table td.log-col-time,.log-table th.log-col-time{width:72px;min-width:72px;white-space:nowrap;font-family:monospace;font-size:.82rem;color:var(--text-secondary,#666);text-align:right}.log-table td:nth-child(2){white-space:pre;font-family:monospace;font-size:.82rem;min-width:220px}.log-table td:last-child{width:100%;min-width:200px}.log-table td[contenteditable=true]:focus{background:var(--focus-bg,#fffbe6);box-shadow:inset 0 0 0 2px var(--primary,#e84b00)}.log-table td[contenteditable=true]:empty::before{content:attr(data-placeholder);color:var(--text-muted,#aaa);pointer-events:none}.log-row-start td:nth-child(2){color:var(--primary,#e84b00);font-weight:600}.log-row-end td:nth-child(2){color:var(--gray-600,#555);font-weight:600}.log-row-track td:nth-child(2){color:#2563eb}.log-row-effect td:nth-child(2){color:#7c3aed}.log-row-mark td:nth-child(2){color:#059669;font-weight:600}.log-empty-row td{color:var(--text-muted,#888);font-style:italic;text-align:center;padding:var(--spacing-lg)}