:root{--font-family:"Open Runde",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--color-bg:#f9fafb;--color-bg-card:#fff;--color-bg-secondary:#f3f4f6;--color-bg-tertiary:#e5e7eb;--color-accent:#ff6b35;--color-accent-hover:#e85a2a;--color-accent-light:#fff4f0;--color-accent-dark:#d44d1a;--color-secondary:#1a1a1a;--color-secondary-hover:#2d2d2d;--color-text:#1a1a1a;--color-text-secondary:#6b7280;--color-text-tertiary:#9ca3af;--color-border:#d1d5db;--color-border-light:#e5e7eb;--color-border-dotted:#d1d5db;--color-success:#10b981;--color-error:#ef4444;--grid-color:#d1d5db80;--grid-size:24px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--radius-sm:12px;--radius-md:16px;--radius-lg:24px;--radius-xl:32px;--radius-full:9999px;--shadow-sm:0 1px 2px #0000000a;--shadow-md:0 4px 12px #0000000f;--shadow-lg:0 8px 24px #00000014;--transition-fast:.15s ease;--transition-normal:.25s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-family);background-color:var(--color-bg);background-image:linear-gradient(var(--grid-color)1px,transparent 1px),linear-gradient(90deg,var(--grid-color)1px,transparent 1px);background-size:var(--grid-size)var(--grid-size);color:var(--color-text);position:relative;line-height:1.5}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input{background:0 0;border:none;font-family:inherit}input:focus,button:focus{outline:none}.app{display:flex;flex-direction:column;min-height:100vh}.app-layout{display:flex;flex:1}.main-content{display:flex;padding:var(--space-xl);flex-direction:column;flex:1;justify-content:center;align-items: center;min-height:100vh}#root{isolation:isolate}.sidebar{border-right:1px dashed var(--color-border-dotted);background:var(--color-bg-card);display:flex;position:sticky;flex-direction:column;width:320px;height:100vh;top:0}.sidebar-header{padding:var(--space-lg);display:flex;align-items: center;gap:var(--space-sm);color:var(--color-text);border-bottom:1px dashed var(--color-border-dotted);font-weight:600}.sidebar-header span{flex:1}.sidebar-close{display:flex;color:var(--color-text-tertiary);border-radius:var(--radius-sm);transition:color var(--transition-fast),background var(--transition-fast);justify-content:center;align-items: center;width:28px;height:28px}.sidebar-close:hover{color:var(--color-text);background:var(--color-bg-secondary)}.sidebar-toggle{position:fixed;top:var(--space-lg);left:var(--space-lg);display:flex;background:var(--color-bg-card);border:1px dashed var(--color-border-dotted);border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:color var(--transition-fast),border-color var(--transition-fast);z-index:10;justify-content:center;align-items: center;width:36px;height:36px}.sidebar-toggle:hover{color:var(--color-text);border-color:var(--color-text-tertiary)}.sidebar-empty{display:flex;padding:var(--space-xl);color:var(--color-text-secondary);text-align:center;flex-direction:column;flex:1;justify-content:center;align-items: center}.sidebar-empty-hint{color:var(--color-text-tertiary);margin-top:var(--space-xs);font-size:.875rem}.sidebar-list{overflow-y:auto;padding:var(--space-sm);flex:1}.sidebar-item{display:flex;border-radius:var(--radius-md);margin-bottom:var(--space-xs);transition:background var(--transition-fast);align-items: center}.sidebar-item:hover{background:var(--color-bg-secondary)}.sidebar-item.selected{background:var(--color-accent-light)}.sidebar-item-content{display:flex;align-items: center;gap:var(--space-sm);padding:var(--space-md);text-align:left;flex:1}.sidebar-item-play{background:var(--color-bg-card);border-radius:var(--radius-sm);display:flex;color:var(--color-accent);box-shadow:var(--shadow-sm);justify-content:center;align-items: center;width:32px;height:32px}.sidebar-item.selected .sidebar-item-play{background:var(--color-accent);color:#fff}.sidebar-item-info{flex:1;min-width:0}.sidebar-item-title{display:block;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.875rem;font-weight:500}.sidebar-item-meta{display:block;color:var(--color-text-secondary);margin-top:2px;font-size:.75rem}.sidebar-item-delete{display:flex;color:var(--color-text-tertiary);border-radius:var(--radius-sm);margin-right:var(--space-sm);opacity:0;transition:opacity var(--transition-fast),color var(--transition-fast);justify-content:center;align-items: center;width:32px;height:32px}.sidebar-item:hover .sidebar-item-delete{opacity:1}.sidebar-item-delete:hover{color:var(--color-error)}.url-input-container{padding:var(--space-xl);width:100%;max-width:600px}.url-input-header{text-align:center;margin-bottom:var(--space-xl)}.url-input-title{color:var(--color-text);margin-bottom:var(--space-sm);font-size:2rem;font-weight:700}.url-input-subtitle{color:var(--color-text-secondary);font-size:1.125rem}.url-input-form{display:flex;gap:var(--space-md);flex-direction:column}.url-input-card{background:var(--color-bg-card);border:1px dashed var(--color-border-dotted);border-radius:var(--radius-lg);padding:var(--space-lg)}.url-input-field-wrapper{display:flex;background:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;margin-bottom:var(--space-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);align-items: center}.url-input-field-wrapper:focus-within{border-color:var(--color-accent);box-shadow:0 0 0 4px var(--color-accent-light)}.url-input-prefix{padding:var(--space-md)var(--space-lg);background:var(--color-bg-secondary);border-right:1px solid var(--color-border);color:var(--color-text-secondary);white-space:nowrap;font-size:.875rem;font-weight:500}.url-input-field{display:flex;padding:var(--space-md)var(--space-lg);align-items: center;gap:var(--space-sm)}.url-input-icon{color:var(--color-text-tertiary);flex-shrink:0}.url-input{color:var(--color-text);padding:var(--space-md);padding-left:var(--space-sm);flex:1;min-width:0;font-size:1rem}.url-input::placeholder{color:var(--color-text-tertiary)}.url-input-paste-btn{display:flex;border-radius:var(--radius-md);color:var(--color-text-secondary);background:var(--color-bg-secondary);transition:background var(--transition-fast),color var(--transition-fast);justify-content:center;align-items: center;width:40px;height:40px}.url-input-paste-btn:hover{background:var(--color-bg-tertiary);color:var(--color-text)}.url-input-options{display:flex;justify-content:space-between;align-items: center;gap:var(--space-md)}.url-input-options-left,.url-input-options-right{display:flex;align-items: center;gap:var(--space-sm)}.url-input-submit{display:flex;justify-content:center;align-items: center;gap:var(--space-sm);padding:var(--space-md)var(--space-xl);background:var(--color-accent);color:#fff;border-radius:var(--radius-md);transition:background var(--transition-fast),transform var(--transition-fast);font-size:1rem;font-weight:600}.url-input-submit:hover:not(:disabled){background:var(--color-accent-hover)}.url-input-submit:disabled{opacity:.5;cursor:not-allowed}.url-input-advanced-toggle{display:flex;align-items: center;gap:var(--space-xs);padding:var(--space-sm)var(--space-md);border:1px dashed var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast),background var(--transition-fast);background:0 0;font-size:.8125rem;font-weight:500}.url-input-advanced-toggle:hover{border-color:var(--color-text-secondary);color:var(--color-text);background:var(--color-bg-secondary)}.url-input-advanced{overflow:hidden;margin-top:var(--space-md);border-top:1px dashed var(--color-border)}.url-input-advanced-content{padding-top:var(--space-md)}.url-input-advanced-label{display:flex;align-items:baseline;gap:var(--space-sm);color:var(--color-text);margin-bottom:var(--space-sm);font-size:.875rem;font-weight:500}.url-input-advanced-hint{color:var(--color-text-tertiary);font-size:.75rem;font-weight:400}.url-input-apikey-wrapper{margin-bottom:0}.url-input-apikey{padding:var(--space-md);font-family:monospace;font-size:.875rem}.voice-select-trigger{display:flex;align-items: center;gap:var(--space-sm);padding:var(--space-md)var(--space-lg);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);transition:border-color var(--transition-fast),background var(--transition-fast);min-width:180px;font-size:.875rem;font-weight:500}.voice-select-trigger:hover{border-color:var(--color-text-secondary)}.voice-select-trigger[data-state=open]{border-color:var(--color-accent)}.voice-select-positioner{z-index:100}.voice-select-popup{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;min-width:220px}.voice-select-viewport{padding:var(--space-sm);overflow-y:auto;max-height:300px}.voice-select-option{display:flex;align-items: center;gap:var(--space-sm);padding:var(--space-sm)var(--space-md);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast)}.voice-select-option:hover,.voice-select-option[data-highlighted]{background:var(--color-bg-secondary)}.voice-select-option[data-selected]{background:var(--color-accent-light)}.voice-select-indicator{display:flex;color:var(--color-accent);justify-content:center;align-items: center;width:20px;height:20px}.voice-name{color:var(--color-text);font-weight:500}.voice-description{color:var(--color-text-secondary);margin-left:var(--space-xs);font-size:.75rem}.voice-select-scroll-arrow{display:flex;color:var(--color-text-tertiary);justify-content:center;align-items: center;height:24px}.processing-container{padding:var(--space-xl);width:100%;max-width:480px}.processing-header{text-align:center;margin-bottom:var(--space-xl)}.processing-title{color:var(--color-text);margin-bottom:var(--space-xs);font-size:1.5rem;font-weight:600}.processing-subtitle{color:var(--color-text-secondary)}.processing-steps{display:flex;gap:var(--space-sm);flex-direction:column}.processing-step{display:flex;align-items: center;gap:var(--space-md);padding:var(--space-md);background:var(--color-bg-card);border:1px solid var(--color-border-light);border-radius:var(--radius-lg)}.processing-step.current{background:var(--color-accent-light);border-color:var(--color-accent)}.processing-step.completed{background:var(--color-bg-secondary)}.processing-step.pending{opacity:.5}.processing-step-icon{display:flex;background:var(--color-bg-card);border-radius:var(--radius-md);color:var(--color-text-secondary);justify-content:center;align-items: center;width:40px;height:40px}.processing-step.current .processing-step-icon{color:var(--color-accent)}.processing-step.completed .processing-step-icon{color:var(--color-success)}.processing-step-content{flex:1}.processing-step-label{color:var(--color-text);font-weight:500}.processing-step.current .processing-step-label{color:var(--color-accent);font-weight:600}.processing-step-skeleton{margin-top:var(--space-sm)}.skeleton-bar{background:linear-gradient(90deg,var(--color-accent-light)0%,var(--color-accent)50%,var(--color-accent-light)100%);border-radius:var(--radius-full);animation:skeleton-pulse 1.5s infinite;background-size:200% 100%;height:6px}@keyframes skeleton-pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.processing-error{margin-top:var(--space-md);padding:var(--space-md);border-radius:var(--radius-md);color:var(--color-error);text-align:center;background:#fef2f2}.audio-player-container{padding:var(--space-xl);width:100%;max-width:600px}.audio-player-title{color:var(--color-text);text-align:center;margin-bottom:var(--space-lg);font-size:1.5rem;font-weight:600}.audio-player{display:flex;align-items: center;gap:var(--space-md);padding:var(--space-lg);background:var(--color-bg-card);border:1px dashed var(--color-border-dotted);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)}.audio-player-play-btn{display:flex;background:var(--color-accent);border-radius:var(--radius-lg);color:#fff;transition:background var(--transition-fast);justify-content:center;align-items: center;width:56px;height:56px}.audio-player-play-btn:hover{background:var(--color-accent-hover)}.audio-player-progress{display:flex;align-items: center;gap:var(--space-sm);flex:1}.audio-player-time{color:var(--color-text-secondary);text-align:center;min-width:40px;font-size:.75rem;font-weight:500}.audio-slider-root,.volume-slider-root{position:relative;display:flex;align-items: center;width:100%}.audio-slider-root{flex:1}.volume-slider-root{width:80px}.audio-slider-control,.volume-slider-control{display:flex;align-items: center;width:100%;height:24px}.audio-slider-track,.volume-slider-track{position:relative;background:var(--color-bg-tertiary);border-radius:var(--radius-full);width:100%;height:6px}.audio-slider-indicator,.volume-slider-indicator{position:absolute;background:var(--color-accent);border-radius:var(--radius-full);height:100%}.audio-slider-thumb,.volume-slider-thumb{position:absolute;background:var(--color-bg-card);border:2px solid var(--color-accent);border-radius:var(--radius-full);cursor:grab;transition:transform var(--transition-fast);width:16px;height:16px}.audio-slider-thumb:hover,.volume-slider-thumb:hover{transform:scale(1.1)}.audio-slider-thumb:active,.volume-slider-thumb:active{cursor:grabbing}.audio-player-volume{display:flex;align-items: center;gap:var(--space-xs)}.audio-player-volume-btn{display:flex;color:var(--color-text-secondary);border-radius:var(--radius-sm);transition:color var(--transition-fast);justify-content:center;align-items: center;width:32px;height:32px}.audio-player-volume-btn:hover{color:var(--color-text)}.audio-player-action-btn{display:flex;color:var(--color-text-secondary);background:var(--color-bg-secondary);border-radius:var(--radius-md);transition:background var(--transition-fast),color var(--transition-fast);justify-content:center;align-items: center;width:40px;height:40px}.audio-player-action-btn:hover{background:var(--color-bg-tertiary);color:var(--color-text)}.audio-player-new-btn{display:flex;justify-content:center;align-items: center;gap:var(--space-sm);padding:var(--space-md);margin-top:var(--space-lg);background:var(--color-secondary);border-radius:var(--radius-lg);color:#fff;transition:background var(--transition-fast);width:100%;font-weight:500}.audio-player-new-btn:hover{background:var(--color-secondary-hover)}.mobile-history-fab{position:fixed;bottom:var(--space-xl);right:var(--space-xl);background:var(--color-secondary);color:#fff;display:flex;z-index:40;border-radius:50%;justify-content:center;align-items: center;width:56px;height:56px;box-shadow:0 4px 12px #00000026}.bottom-sheet-backdrop{position:fixed;z-index:50;background:#0006;inset:0}.bottom-sheet{position:fixed;background:var(--color-bg-card);border-radius:var(--radius-xl)var(--radius-xl)0 0;border-top:1px dashed var(--color-border-dotted);z-index:51;display:flex;flex-direction:column;max-height:80vh;bottom:0;left:0;right:0}.bottom-sheet-handle{background:var(--color-border);border-radius:var(--radius-full);margin:var(--space-sm)auto;width:36px;height:4px}.bottom-sheet-header{display:flex;padding:var(--space-md)var(--space-lg);border-bottom:1px dashed var(--color-border-dotted);justify-content:space-between;align-items: center}.bottom-sheet-title{display:flex;align-items: center;gap:var(--space-sm);color:var(--color-text);font-weight:600}.bottom-sheet-close{display:flex;color:var(--color-text-secondary);border-radius:var(--radius-md);justify-content:center;align-items: center;width:40px;height:40px}.bottom-sheet-content{overflow-y:auto;padding:var(--space-md);flex:1}.bottom-sheet-empty{text-align:center;padding:var(--space-2xl);color:var(--color-text-secondary)}.bottom-sheet-empty-hint{color:var(--color-text-tertiary);margin-top:var(--space-xs);font-size:.875rem}.bottom-sheet-list{display:flex;gap:var(--space-sm);flex-direction:column}.bottom-sheet-item{display:flex;background:var(--color-bg-secondary);border-radius:var(--radius-lg);align-items: center}.bottom-sheet-item.selected{background:var(--color-accent-light)}.bottom-sheet-item-content{display:flex;align-items: center;gap:var(--space-md);padding:var(--space-md);text-align:left;flex:1}.bottom-sheet-item-play{display:flex;background:var(--color-bg-card);border-radius:var(--radius-md);color:var(--color-accent);justify-content:center;align-items: center;width:40px;height:40px}.bottom-sheet-item.selected .bottom-sheet-item-play{background:var(--color-accent);color:#fff}.bottom-sheet-item-info{flex:1;min-width:0}.bottom-sheet-item-title{display:block;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.bottom-sheet-item-meta{display:block;color:var(--color-text-secondary);margin-top:2px;font-size:.75rem}.bottom-sheet-item-delete{display:flex;color:var(--color-text-tertiary);margin-right:var(--space-sm);justify-content:center;align-items: center;width:44px;height:44px}.bottom-sheet-item-delete:active{color:var(--color-error)}.error-container{padding:var(--space-xl);width:100%;max-width:480px}.error-message{text-align:center;padding:var(--space-2xl);background:var(--color-bg-card);border:1px dashed var(--color-border-dotted);border-radius:var(--radius-xl)}.error-message h2{color:var(--color-text);margin-bottom:var(--space-sm);font-size:1.25rem;font-weight:600}.error-message p{color:var(--color-error);margin-bottom:var(--space-lg)}.error-retry-btn{padding:var(--space-md)var(--space-xl);background:var(--color-accent);color:#fff;border-radius:var(--radius-lg);transition:background var(--transition-fast);font-weight:600}.error-retry-btn:hover{background:var(--color-accent-hover)}@media (max-width:768px){.main-content{padding:var(--space-lg);padding-top:var(--space-3xl);justify-content:flex-start;min-height:100dvh}.url-input-container,.processing-container,.audio-player-container{padding:var(--space-md)}.url-input-header{margin-bottom:var(--space-lg)}.url-input-title{font-size:1.5rem}.url-input-subtitle{font-size:1rem}.url-input-card{padding:var(--space-md);border-radius:var(--radius-md)}.url-input-options{flex-direction:column;align-items:stretch}.url-input-options-left,.url-input-options-right,.voice-select-trigger,.url-input-submit{width:100%}.audio-player{flex-wrap:wrap}.audio-player-progress{margin-top:var(--space-sm);order:3;width:100%}.audio-player-volume{display:none}.audio-player-title,.processing-title{font-size:1.25rem}}@media (max-width:480px){.main-content{padding:var(--space-md);padding-top:var(--space-xl)}.url-input-container,.processing-container,.audio-player-container{padding:var(--space-sm)}.url-input-title{font-size:1.25rem}.url-input-subtitle{font-size:.875rem}.url-input-prefix{display:none}.url-input{padding-left:var(--space-md)}.url-input-card{padding:var(--space-sm)}.url-input-field-wrapper{border-radius:var(--radius-sm)}.voice-select-trigger,.url-input-submit{padding:var(--space-sm)var(--space-md);border-radius:var(--radius-sm)}.mobile-history-fab{bottom:var(--space-md);right:var(--space-md);width:48px;height:48px}.audio-player-title{font-size:1.125rem}.audio-player-card,.processing-card{padding:var(--space-md)}}