:root{--bg-color: #121212;--surface-color: #1e1e1e;--surface-hover: #2a2a2a;--primary-color: #3b82f6;--primary-hover: #2563eb;--secondary-color: #10b981;--text-color: #e5e5e5;--text-muted: #a3a3a3;--text-super-muted: #cccccc;--border-color: #333;--accent-color: #f59e0b;--font-family: "Inter", system-ui, -apple-system, sans-serif;--font-size-xs: clamp(10px, 1.8vw, 11px);--font-size-sm: clamp(11px, 2vw, 13px);--font-size-base: clamp(13px, 2.2vw, 14px);--font-size-md: clamp(14px, 2.5vw, 16px);--font-size-lg: clamp(16px, 3vw, 18px);--font-size-xl: clamp(18px, 3.5vw, 20px);--spacing-xs: clamp(4px, 1vw, 6px);--spacing-sm: clamp(6px, 1.5vw, 8px);--spacing-md: clamp(8px, 2vw, 12px);--spacing-lg: clamp(12px, 2.5vw, 16px);--spacing-xl: clamp(16px, 3vw, 20px)}html{scrollbar-gutter:stable}body{margin:0;font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-color);min-height:100vh;display:flex;flex-direction:column}*{box-sizing:border-box}button{font-family:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-color)}::-webkit-scrollbar-thumb{background:#444;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.video-container{position:relative;width:100%;padding-bottom:56.25%;height:0;background-color:#000;border-radius:8px;overflow:hidden;box-shadow:0 4px 6px #0000004d}.youtube-player{position:absolute;top:0;left:0;width:100%;height:100%}.subtitle-overlay-wrapper{position:absolute;left:0;right:0;text-align:center;pointer-events:none;z-index:10}.subtitle-overlay{position:relative;display:inline-block;padding:8px 16px;border-radius:4px;font-size:20px;text-align:center;line-height:1.4;word-wrap:break-word}.subtitle-background{position:absolute;inset:0;border-radius:4px}.subtitle-content{position:relative;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.58),-2px -2px 0 rgba(0,0,0,.58),2px -2px 0 rgba(0,0,0,.58),-2px 2px 0 rgba(0,0,0,.58),0 2px 0 rgba(0,0,0,.58),0 -2px 0 rgba(0,0,0,.58),2px 0 0 rgba(0,0,0,.58),-2px 0 0 rgba(0,0,0,.58)}@container video-container (max-width: 400px){.subtitle-overlay{font-size:calc(var(--font-size-base) * .75);padding:4px 8px}}@container video-container (min-width: 401px) and (max-width: 600px){.subtitle-overlay{font-size:calc(var(--font-size-base) * .9);padding:6px 12px}}@container video-container (min-width: 601px) and (max-width: 900px){.subtitle-overlay{font-size:calc(var(--font-size-base) * 1.1);padding:8px 14px}}@supports not (container-type: inline-size){@media(max-width:480px){.subtitle-overlay{font-size:calc(var(--font-size-base) * .75);padding:4px 8px}}@media(min-width:481px)and (max-width:768px){.subtitle-overlay{font-size:calc(var(--font-size-base) * .9);padding:6px 12px}}@media(min-width:769px)and (max-width:1024px){.subtitle-overlay{font-size:calc(var(--font-size-base) * 1.1);padding:8px 14px}}}.controls-container{display:flex;flex-direction:column;gap:16px;width:100%;max-width:100%;margin:0;padding:0;background-color:transparent;border-radius:0;box-shadow:none;box-sizing:border-box;min-height:fit-content}.controls-content{display:flex;flex-direction:column;gap:16px;width:100%;max-height:65vh;overflow-y:auto;padding:2px 4px;scrollbar-width:thin;scrollbar-color:var(--text-muted) transparent}.controls-content::-webkit-scrollbar{width:8px}.controls-content::-webkit-scrollbar-track{background:transparent;border-radius:4px}.controls-content::-webkit-scrollbar-thumb{background-color:#80808080;border-radius:4px;border:2px solid var(--surface-color)}.controls-content::-webkit-scrollbar-thumb:hover{background-color:#808080cc}.control-group{display:flex;flex-direction:column;gap:8px;width:100%;max-width:100%;box-sizing:border-box}.input-wrapper{display:flex;align-items:center;gap:10px;background-color:var(--bg-color);padding:8px 12px;border-radius:6px;border:1px solid var(--border-color)}.input-icon{color:var(--text-muted)}.control-input{flex:1;background:transparent;border:none;color:var(--text-color);font-size:var(--font-size-md);outline:none;min-width:0}.control-input::placeholder{color:var(--text-muted)}.control-button{display:flex;align-items:center;justify-content:center;padding:8px 16px;border-radius:6px;font-weight:500;cursor:pointer;transition:all .2s;border:none;white-space:nowrap}.control-button.primary{background-color:var(--primary-color);color:#fff}.control-button.primary:hover{background-color:var(--primary-hover)}.control-button.secondary{background-color:var(--secondary-color);color:#fff}.control-button.secondary:hover{filter:brightness(1.1)}.control-button.outline{background-color:transparent;border:1px solid var(--primary-color);color:var(--primary-color)}.control-button.outline:hover{background-color:#3b82f61a}.control-button.secondary-outline{background-color:transparent;border:1px solid var(--secondary-color);color:var(--secondary-color);width:100%}.control-button.secondary-outline:hover{background-color:#10b9811a}.file-status{flex:1;color:var(--text-color);font-size:var(--font-size-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.centered{align-items:center}.embedded-url-section{margin-top:10px;background-color:var(--bg-color);padding:12px;border-radius:6px;border:1px solid var(--border-color)}.embedded-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;color:var(--text-muted);font-size:var(--font-size-base);font-weight:600}.embedded-textarea{width:100%;background-color:var(--surface-color);color:var(--text-muted);border:1px solid var(--border-color);border-radius:4px;padding:8px;font-family:monospace;font-size:var(--font-size-sm);resize:none;outline:none}.copy-button{background-color:var(--surface-color);border:1px solid var(--border-color);color:var(--text-color);padding:4px 8px;border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:4px;font-size:var(--font-size-sm);transition:all .2s}.copy-button:hover:not(:disabled){background-color:var(--surface-hover)}.copy-button.copied{background-color:var(--secondary-color);color:#fff;border-color:var(--secondary-color)}.label-text{color:var(--text-color);font-size:var(--font-size-base);min-width:60px}.font-size-slider{flex:1;cursor:pointer;accent-color:var(--primary-color)}.direct-text-wrapper{flex-direction:column;align-items:stretch}.direct-text-controls{display:flex;flex-direction:column;gap:12px;width:100%}.format-selector{display:flex;align-items:center;gap:8px}.format-selector label{color:var(--text-color);font-size:var(--font-size-base);font-weight:500}.format-select{padding:6px 10px;border-radius:4px;border:1px solid var(--border-color);background-color:var(--surface-color);color:var(--text-color);font-size:var(--font-size-base);cursor:pointer;outline:none}.format-select:hover{border-color:var(--primary-color)}.direct-text-input{width:100%;padding:10px;border-radius:6px;border:1px solid var(--border-color);background-color:var(--surface-color);color:var(--text-color);font-family:Inter,monospace;font-size:var(--font-size-base);resize:vertical;outline:none;min-height:120px}.direct-text-input::placeholder{color:var(--text-muted)}.direct-text-input:focus{border-color:var(--primary-color)}.control-button-icon{display:flex;align-items:center;justify-content:center;padding:8px;border-radius:6px;cursor:pointer;transition:all .2s;border:none;background-color:transparent;color:var(--text-muted)}.control-button-icon:hover{background-color:var(--surface-hover);color:var(--text-color)}.font-select{flex:1;padding:6px 10px;border-radius:4px;border:1px solid var(--border-color);background-color:var(--surface-color);color:var(--text-color);font-size:var(--font-size-base);cursor:pointer;outline:none;transition:border-color .2s}.font-select:hover{border-color:var(--primary-color)}.font-select:focus{border-color:var(--primary-color)}.qr-code-section{margin-top:16px;padding-top:16px;border-top:1px solid var(--border-color)}.qr-code-header{color:var(--text-muted);font-size:var(--font-size-base);font-weight:600;margin-bottom:12px}.qr-code-container{display:flex;justify-content:center;align-items:center;padding:16px;background-color:#fff;border-radius:8px;margin-bottom:12px}.qr-code-image{max-width:100%;height:auto;display:block;border-radius:4px}.qr-code-actions{display:flex;gap:8px;justify-content:center}.qr-code-actions .control-button{flex:1;max-width:150px}.qr-code-actions .control-button.copied{background-color:var(--secondary-color);color:#fff}.user-guide-panel{width:100%;max-width:100%;margin:0;min-height:fit-content}.user-guide summary{padding:16px 20px;font-size:16px;font-weight:600;cursor:pointer;list-style:none;background-color:var(--surface-hover);color:var(--text-color);transition:background-color .2s}.user-guide summary:hover{background-color:#333}.user-guide summary::-webkit-details-marker{display:none}.user-guide summary:before{content:"► ";margin-right:8px;font-size:12px;color:var(--text-muted)}.user-guide[open] summary:before{content:"▼ "}.guide-content{padding:8px;color:var(--text-color);line-height:1.6;max-height:70vh;overflow-y:auto}.guide-content h2{margin-top:0;font-size:20px;color:var(--primary-color)}.guide-content h3{font-size:16px;font-weight:400;margin:10px 0}.guide-section{margin-top:20px}.guide-section strong{display:block;margin-bottom:8px;color:var(--accent-color)}.guide-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background-color:var(--bg-color);border-radius:4px;margin-bottom:8px;border:1px solid var(--border-color)}.guide-item span{flex:1;font-family:monospace;font-size:13px;color:var(--text-muted);word-break:break-all}.guide-copy-button{background-color:var(--surface-hover);border:1px solid var(--border-color);color:var(--text-color);padding:6px 8px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.guide-copy-button:hover:not(.copied){background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.guide-copy-button.copied{background-color:var(--secondary-color);color:#fff;border-color:var(--secondary-color)}.guide-content pre{background-color:var(--bg-color);padding:12px;border-radius:6px;overflow-x:auto;font-family:monospace;font-size:13px;color:var(--text-muted);border:1px solid var(--border-color)}.feature-block{margin-bottom:20px;background:var(--surface-hover);padding:15px;border-radius:8px;border:1px solid var(--border-color)}.feature-block h3{color:var(--primary-color);margin-top:0;margin-bottom:10px;font-weight:600;font-size:16px}.feature-block p{margin-bottom:12px;color:var(--text-color);font-size:14px}.feature-list{padding-left:20px;margin:0}.feature-list li{margin-bottom:8px;color:var(--text-muted);font-size:14px}.feature-list li strong{color:var(--text-color);display:inline;margin-right:5px}.guide-header{position:sticky;top:0;background:var(--background-color-light);padding:8px;display:flex;justify-content:flex-end;align-items:center;z-index:1;border-bottom:1px solid var(--border-color)}.copy-all-text{margin-right:10px;font-size:14px;color:var(--text-muted);display:flex;align-items:center}.guide-url,.url-example-box a{color:var(--primary-color);text-decoration:none}.guide-url:hover,.url-example-box a:hover{text-decoration:underline}.editor-container{width:100%;max-width:100%;margin:0;background-color:transparent;border-radius:0;box-shadow:none;overflow-x:hidden;box-sizing:border-box;min-height:fit-content}.editor-toolbar{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;background-color:var(--surface-hover);border-bottom:1px solid var(--border-color);gap:8px;flex-wrap:wrap;min-height:42px;width:100%;box-sizing:border-box}.editor-toolbar.collapsed{justify-content:flex-end;padding:2px 12px;min-height:28px}.toolbar-actions{display:flex;gap:4px;align-items:center;flex-shrink:0}.toolbar-offsets{display:flex;gap:12px;align-items:center;flex-shrink:1}.offset-item{display:flex;align-items:center;gap:4px;color:var(--text-muted)}.offset-icon{color:var(--text-muted);flex-shrink:0}.offset-input{width:50px;padding:2px 6px;background-color:var(--surface-color);border:1px solid var(--border-color);color:var(--text-color);border-radius:4px;font-size:var(--font-size-sm)}.toolbar-toggle-button{background:none;border:none;color:var(--text-muted);padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;margin-left:auto}.toolbar-toggle-button:hover{background-color:#ffffff1a;color:var(--text-color)}.title-editor-row{border-bottom:1px solid var(--border-color);display:flex;align-items:flex-start;gap:12px;background-color:var(--bg-color)}.title-icon-wrapper{color:var(--text-muted);display:flex;align-items:center}.subtitle-text{flex:1;background-color:var(--surface-color);border:1px solid var(--border-color);color:var(--text-color);padding:8px 12px;border-radius:4px;font-family:inherit;font-size:var(--font-size-base);resize:vertical;min-height:38px}.subtitle-text:focus,.offset-input:focus{outline:none;border-color:var(--primary-color)}.editor-content{display:flex;flex-direction:column}.subtitle-list{max-height:400px;overflow-y:auto;padding:0}.subtitle-item{display:flex;align-items:flex-start;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border-color);transition:background-color .2s;width:100%;box-sizing:border-box}.subtitle-item:hover{background-color:#ffffff05}.time-inputs{display:flex;flex-direction:column;gap:4px;width:110px;flex-shrink:0}.time-inputs.txt-format{width:75px}.time-input{background-color:var(--bg-color);border:1px solid var(--border-color);color:var(--text-color);padding:4px 8px;border-radius:4px;font-size:var(--font-size-sm);font-family:monospace;width:100%}.duration-text{font-size:var(--font-size-xs);color:var(--text-muted);text-align:center;margin-top:-2px}.arrow{text-align:center;color:var(--text-muted);font-size:var(--font-size-sm);line-height:1}.subtitle-text{flex:1;background-color:var(--bg-color);border:1px solid var(--border-color);color:var(--text-color);padding:8px;border-radius:4px;font-family:inherit;font-size:var(--font-size-base);resize:vertical;min-height:60px;min-width:0}.play-clip-button{background-color:var(--surface-hover);border:1px solid var(--border-color);color:var(--primary-color);padding:8px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;margin-top:4px}.play-clip-button:hover{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.action-button{display:flex;align-items:center;justify-content:center;padding:8px;border-radius:4px;cursor:pointer;border:none;transition:all .2s}.action-button:disabled{opacity:.5;cursor:not-allowed}.add-button{background-color:transparent;color:var(--primary-color)}.add-button:hover:not(:disabled){background-color:var(--primary-hover);color:#fff}.duplicate-button{background-color:transparent;color:var(--secondary-color)}.duplicate-button:hover:not(:disabled){background-color:var(--secondary-color);filter:brightness(1.1);color:#fff}.delete-button{background-color:transparent;color:#dc2626}.delete-button:hover:not(:disabled){background-color:#b91c1c;color:#fff}.download-button{background-color:transparent;color:var(--secondary-color)}.download-button:hover:not(:disabled){background-color:var(--secondary-color);color:#fff}.subtitle-item{cursor:pointer}.subtitle-item.selected{background-color:#3b82f61a;border-left:3px solid var(--primary-color);padding-left:17px}.title-editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.title-editor-header label{margin-bottom:0}.title-toggle-button{display:flex;align-items:center;justify-content:center;padding:8px;border-radius:4px;cursor:pointer;border:none;transition:all .2s;background-color:transparent;color:var(--text-muted)}.title-toggle-button:hover{background-color:var(--surface-hover);color:var(--text-color)}.search-button{background-color:transparent;color:var(--text-muted)}.search-button:hover:not(:disabled){background-color:#64b5f633;color:var(--primary-color)}.search-button.active{background-color:#64b5f64d;color:var(--primary-color)}.subtitle-text.highlighted{flex:1;background-color:var(--bg-color);border:1px solid var(--border-color);color:var(--text-color);padding:8px;border-radius:4px;font-family:inherit;font-size:var(--font-size-base);min-height:60px;min-width:0;cursor:text;white-space:pre-wrap;word-wrap:break-word;line-height:1.5}.subtitle-text.highlighted:hover{border-color:var(--primary-color)}.title-input-field.highlighted{flex:1;background-color:var(--surface-color);border:1px solid var(--border-color);color:var(--text-color);padding:8px 12px;border-radius:4px;font-family:inherit;font-size:var(--font-size-base);min-height:38px;cursor:text;white-space:pre-wrap;word-wrap:break-word}.title-input-field.highlighted:hover{border-color:var(--primary-color)}.find-replace-panel{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:12px;margin-bottom:12px;animation:slideDown .2s ease-in-out}@keyframes slideDown{0%{opacity:0;max-height:0;padding:0 12px}to{opacity:1;max-height:300px;padding:12px}}.find-replace-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}.find-replace-row:last-child{margin-bottom:0}.search-input-wrapper{flex:1;position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:10px;color:#ffffff80;pointer-events:none}.search-input{width:100%;padding:8px 32px 8px 36px;background:#0000004d;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:14px;transition:all .15s ease}.search-input:focus{outline:none;border-color:#64b5f699;background:#0006;box-shadow:0 0 0 2px #64b5f633}.search-input.no-matches{border-color:#f4433699}.search-input.no-matches:focus{box-shadow:0 0 0 2px #f4433633}.search-input::placeholder{color:#fff6}.clear-button{position:absolute;right:8px;background:transparent;border:none;color:#ffffff80;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .15s ease}.clear-button:hover{background:#ffffff1a;color:#fffc}.case-sensitive-button{padding:8px 12px;background:#0000004d;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff9;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s ease;font-family:monospace}.case-sensitive-button:hover{background:#0006;border-color:#ffffff4d;color:#fffc}.case-sensitive-button.active{background:#64b5f64d;border-color:#64b5f699;color:#64b5f6}.close-panel-button{padding:8px;background:#0000004d;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff9;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.close-panel-button:hover{background:#f443364d;border-color:#f4433699;color:#fff}.find-replace-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.navigation-buttons{display:flex;gap:4px}.nav-button{padding:6px 10px;background:#0000004d;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fffc;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.nav-button:hover:not(:disabled){background:#64b5f64d;border-color:#64b5f699;color:#fff}.nav-button:disabled{opacity:.3;cursor:not-allowed}.toggle-replace-button{padding:6px 12px;background:#0000004d;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fffc;font-size:13px;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;gap:4px}.toggle-replace-button:hover{background:#0006;border-color:#ffffff4d;color:#fff}.replace-buttons{display:flex;gap:4px}.replace-button,.replace-all-button{padding:6px 12px;background:#0000004d;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fffc;font-size:13px;cursor:pointer;transition:all .15s ease}.replace-button:hover:not(:disabled){background:#ff98004d;border-color:#ff980099;color:#fff}.replace-all-button:hover:not(:disabled){background:#4caf504d;border-color:#4caf5099;color:#fff}.replace-button:disabled,.replace-all-button:disabled{opacity:.3;cursor:not-allowed}.match-counter{margin-left:auto;padding:6px 12px;background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#ffffffb3;font-size:12px;font-weight:500;white-space:nowrap}.subtitle-text mark{background:#ffeb3b66;color:inherit;padding:2px 0;border-radius:2px}.subtitle-text mark.current-match{background:#ff980099;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{background:#ff980099}50%{background:#ff9800cc}}@media(max-width:768px){.find-replace-controls{flex-direction:column;align-items:stretch}.navigation-buttons{width:100%}.nav-button{flex:1}.toggle-replace-button{width:100%;justify-content:center}.replace-buttons{width:100%}.replace-button,.replace-all-button{flex:1}.match-counter{margin-left:0;text-align:center}}@media(max-width:480px){.find-replace-panel{padding:8px}.find-replace-row{flex-wrap:wrap}.search-input-wrapper{width:100%;order:1}.case-sensitive-button{order:2}.close-panel-button{order:3}.search-input{font-size:16px}}.app-container{display:flex;flex-direction:column;min-height:100vh;background-color:var(--bg-color)}.app-header{padding:2px;background-color:var(--surface-color);border-bottom:1px solid var(--border-color);text-align:center}.app-header h1{margin:0;font-size:var(--font-size-xs);color:#ffffff26;font-weight:700;letter-spacing:-.5px}.main-content{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:var(--spacing-xl);display:grid;grid-template-columns:1fr;gap:24px}@media(min-width:1024px){.app-header{text-align:right}.main-content{grid-template-columns:2fr 1fr;align-items:start}}.sidebar-controls{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px}.controls-section,.editor-section,.guide-section-wrapper{width:100%;min-height:fit-content}.video-section{position:relative;width:100%;min-width:0;container-type:inline-size;container-name:video-container}.video-placeholder{width:100%;padding-bottom:56.25%;background-color:#000;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);box-shadow:0 4px 6px #0000004d}.video-placeholder p{position:absolute;top:50%;transform:translateY(-50%)}.video-title-overlay{position:absolute;top:0;left:0;right:0;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:10;pointer-events:none;color:#fff}.video-title{font-weight:700;text-align:center;margin:0;line-height:1.2;display:inline-block;padding:8px 16px;border-radius:4px}.invert-colors .video-title{color:#000;background-color:rgba(255,255,255,var(--title-bg-alpha, .75));text-shadow:1px 1px 0 rgba(255,255,255,.58),-1px -1px 0 rgba(255,255,255,.58),1px -1px 0 rgba(255,255,255,.58),-1px 1px 0 rgba(255,255,255,.58),0 1px 0 rgba(255,255,255,.58),0 -1px 0 rgba(255,255,255,.58),1px 0 0 rgba(255,255,255,.58),-1px 0 0 rgba(255,255,255,.58)}.app-footer{padding:20px;text-align:center;color:var(--text-muted);font-size:var(--font-size-base);border-top:1px solid var(--border-color);margin-top:auto;font-family:Noto Sans TC,sans-serif}.tab-header{display:flex;gap:2px;margin-bottom:0;padding:0 4px}.tab-button{flex:1;min-width:0;padding:10px 4px;background-color:var(--bg-color);border:1px solid var(--border-color);border-bottom:none;border-radius:8px 8px 0 0;cursor:pointer;font-weight:500;color:var(--text-muted);transition:all .2s ease;position:relative;top:1px;z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--font-size-sm)}.tab-button:hover{background-color:var(--surface-color);color:var(--text-color)}.tab-button.active{background-color:var(--surface-color);color:var(--primary-color);border-bottom:1px solid var(--surface-color);z-index:3;font-weight:600}.tab-content{background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:4px;padding:0;min-height:300px;position:relative;z-index:2;box-shadow:0 2px 4px #0000000d;overflow:visible;box-sizing:border-box}.controls-section,.editor-section,.guide-section-wrapper{width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}.controls-section,.guide-section-wrapper{width:100%;padding:8px}.empty-state-message{display:flex;align-items:center;justify-content:center;height:200px;color:var(--text-muted);font-style:italic;text-align:center}.user-guide-panel{padding:0}.user-guide-panel h2{margin-top:0;font-size:var(--font-size-lg);color:var(--primary-color);margin-bottom:16px}.user-guide-panel h3{font-size:var(--font-size-md);color:var(--text-color);margin:20px 0 12px;border-bottom:1px solid var(--border-color);padding-bottom:8px}.guide-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.guide-step-item{display:flex;gap:12px}.step-number{background-color:var(--surface-hover);color:var(--primary-color);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--font-size-sm);flex-shrink:0;margin-top:2px}.step-text strong{display:block;color:var(--text-color);font-size:var(--font-size-base);margin-bottom:2px}.step-text p{margin:0;color:var(--text-muted);font-size:var(--font-size-sm);line-height:1.4}.guide-item{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}.guide-label{font-size:var(--font-size-sm);font-weight:500;color:var(--text-muted)}.guide-value-row{display:flex;align-items:center;gap:8px;background-color:var(--bg-color);padding:6px 10px;border-radius:4px;border:1px solid var(--border-color)}.guide-url{font-family:monospace;font-size:var(--font-size-sm);color:var(--text-color);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.format-example{margin-bottom:16px}.format-example strong{display:block;font-size:var(--font-size-sm);margin-bottom:6px;color:var(--text-muted)}.format-example pre{background-color:var(--bg-color);padding:12px;border-radius:4px;border:1px solid var(--border-color);font-size:var(--font-size-xs);margin:0;overflow-x:auto;color:var(--text-color)}.guide-desc{font-size:var(--font-size-sm);color:var(--text-muted);line-height:1.5;margin:0 0 16px}.embedded-url-content{display:flex;flex-direction:column;gap:16px;margin-top:12px}.embedded-url-how strong,.embedded-url-format strong{display:block;font-size:var(--font-size-sm);margin-bottom:8px;color:var(--text-color)}.embedded-url-steps{margin:0;padding-left:20px;color:var(--text-muted);font-size:var(--font-size-sm);line-height:1.6}.embedded-url-steps li{margin-bottom:6px}.url-example-box{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:4px;padding:12px;overflow-x:auto}.url-example-box code{font-family:monospace;font-size:var(--font-size-xs);color:var(--primary-color);word-break:break-all;white-space:pre-wrap}