@import url("https://fonts.googleapis.com/css2?family=Anton&family=Bangers&family=Bebas+Neue&family=Inter:wght@400;600;700&family=Montserrat:wght@400;600;700&family=Oswald:wght@400;600;700&family=Permanent+Marker&family=Poppins:wght@400;600;700&family=Roboto:wght@400;700&family=Russo+One&family=Archivo+Black&family=Raleway:wght@400;600;700&family=Open+Sans:wght@400;600;700&family=Lato:wght@400;700&family=Nunito:wght@400;600;700&family=Quicksand:wght@400;600;700&display=swap");.configs-container{padding:0;flex-direction:column}.configs-container,.configs-header{display:flex;background:var(--bg-app)}.configs-header{justify-content:space-between;align-items:center;padding:2rem 3rem;flex-shrink:0}.configs-header h1{font-size:2rem;font-weight:700;margin:0 0 .5rem;color:var(--text-main)}.configs-header p{color:var(--text-muted);font-size:1rem;margin:0}.create-config-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background:var(--primary);border:none;border-radius:8px;color:white;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px rgba(6,182,212,.3)}.create-config-btn:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 6px 16px rgba(6,182,212,.4)}.configs-grid-view{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem;padding:1rem 3rem 3rem}.config-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:all .2s;display:flex;flex-direction:column;cursor:pointer;position:relative;z-index:1}.config-card:hover{box-shadow:0 8px 20px rgba(0,0,0,.25);border-color:var(--primary)}.config-card.new-card{border:2px dashed var(--border);background:transparent;align-items:center;justify-content:center;gap:1rem;min-height:320px;color:var(--text-muted)}.config-card.new-card:hover{border-color:var(--primary);color:var(--primary);background:rgba(6,182,212,.05)}.new-card-icon{width:64px;height:64px;border-radius:50%;background:var(--bg-input);display:flex;align-items:center;justify-content:center;transition:all .2s}.config-card.new-card:hover .new-card-icon{background:var(--primary);color:white}.config-card-preview{height:280px;background:#0a0a0a;position:relative;overflow:hidden}.config-card-preview,.config-card-scaler{display:flex;align-items:center;justify-content:center}.config-card-scaler{pointer-events:none}.iphone-frame-mini{position:relative;width:380px;height:780px;margin:0 auto}.iphone-mockup-mini{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;z-index:10;pointer-events:none}.iphone-screen-mini{position:absolute;top:1.5%;left:4.2%;width:91.5%;height:96%;background:#000;border-radius:12%/5%;overflow:hidden;z-index:1}.iphone-screen-mini video{width:100%;height:100%;object-fit:contain}.iphone-screen-mini canvas{position:absolute;top:0;left:0;width:100%;height:100%}.mini-phone{width:90px;height:160px;background:#000;border-radius:12px;border:2px solid #333;position:relative;overflow:hidden;box-shadow:0 10px 20px rgba(0,0,0,.5)}.mini-screen{width:100%;height:100%;background:#222;position:relative}.mini-filter{position:absolute;inset:0}.mini-filter.warm{background:rgba(255,180,100,.2);mix-blend-mode:overlay}.mini-filter.cold{background:rgba(100,150,255,.2);mix-blend-mode:overlay}.mini-filter.vintage{background:rgba(180,140,100,.2)}.mini-filter.cinematic{background:linear-gradient(180deg,rgba(0,0,0,.3),transparent 30%,transparent 70%,rgba(0,0,0,.3))}.mini-filter.bw{backdrop-filter:grayscale(1)}.mini-filter.sepia{background:rgba(180,140,80,.3)}.mini-filter.teal-orange{background:linear-gradient(135deg,rgba(0,128,128,.2),rgba(255,140,0,.2))}.mini-filter.high-contrast{backdrop-filter:contrast(1.3)}.mini-filter.matte{background:rgba(40,40,50,.2)}.mini-filter.vibrant{backdrop-filter:saturate(1.4)}.mini-filter.faded{background:rgba(255,255,255,.2)}.mini-subtitle{position:absolute;bottom:20%;left:50%;transform:translateX(-50%);color:white;font-weight:700;font-size:10px;text-shadow:0 1px 2px black}.config-preview-phone{width:100px;height:178px;background:#000;border-radius:14px;border:2px solid #333;position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.6)}.config-preview-screen{width:100%;height:100%;position:relative;overflow:hidden;border-radius:12px}.config-preview-bg{width:100%;height:100%;object-fit:cover;display:block}.config-preview-frame{z-index:10}.config-preview-subtitle{position:absolute;left:50%;transform:translateX(-50%);padding:2px 6px;border-radius:2px;text-align:center;white-space:nowrap;z-index:20;letter-spacing:.5px}.config-card-info{padding:1.25rem;display:flex;flex-direction:column;gap:.75rem;flex:1}.config-card-header{display:flex;justify-content:space-between;align-items:flex-start}.config-card-header h3{margin:0;font-size:1.1rem;font-weight:600;color:var(--text-main)}.config-card-menu{color:var(--text-muted);padding:.25rem;border-radius:4px;cursor:pointer}.config-card-menu:hover{background:var(--bg-hover);color:var(--text-main)}.config-card-meta{display:flex;gap:.5rem;flex-wrap:wrap}.tag{font-size:.7rem;padding:.2rem .5rem;border-radius:4px;color:var(--text-muted)}.config-edit-btn,.tag{background:var(--bg-input);font-weight:500}.config-edit-btn{margin-top:auto;width:100%;padding:.6rem;border:1px solid transparent;border-radius:6px;color:var(--text-main);cursor:pointer;transition:all .2s}.config-edit-btn:hover{background:var(--primary);color:white}.config-editor-container{display:flex;flex-direction:column;height:100%;background:var(--bg-app);overflow:visible}.editor-top-bar{justify-content:space-between;padding:1rem 2rem;border-bottom:1px solid var(--border);background:var(--bg-panel);z-index:100;position:sticky;top:0}.back-to-configs-btn,.editor-top-bar{display:flex;align-items:center;flex-shrink:0}.back-to-configs-btn{background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);width:40px;height:40px;justify-content:center;border-radius:50%;cursor:pointer;transition:all .2s;padding:0}.back-to-configs-btn:hover{color:white;border-color:var(--text-muted);background:var(--bg-hover);transform:translateX(-2px)}.editor-title{flex:1;display:flex;justify-content:center;min-width:0;margin:0 1rem}.config-name-input-small{background:transparent;border:none;font-size:1.1rem;font-weight:600;color:var(--text-main);text-align:center;outline:none;width:100%;max-width:400px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width:600px){.config-editor-container{display:block;overflow:visible;height:auto;min-height:100vh;padding-top:0}.editor-top-bar{top:0;left:0;right:0;z-index:1000;padding:.75rem 1rem;gap:.5rem;flex-wrap:nowrap;height:70px;align-items:center}.editor-top-bar,.mobile-tab-switcher{position:sticky;width:100%;box-sizing:border-box;background:var(--bg-panel);border-bottom:1px solid var(--border)}.mobile-tab-switcher{top:70px;z-index:900;margin-top:0;box-shadow:0 4px 12px rgba(0,0,0,.1)}.editor-content-split{display:block;box-sizing:border-box}.editor-content-split,.editor-settings-panel{width:100%;height:auto!important;overflow:visible!important}.editor-settings-panel{max-width:none!important;padding:0 1rem 80px}.back-to-configs-btn{order:1;width:36px;height:36px;min-height:36px;max-height:36px;font-size:1rem;flex-shrink:0;align-self:center}.editor-title{order:2;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;align-self:center;height:auto;margin:0 .5rem}.config-name-input-small{text-align:center;background:var(--bg-input);border:1px solid var(--border);padding:0 .75rem;height:36px;min-height:36px;max-height:36px;line-height:34px;border-radius:8px;font-size:.9rem;width:100%;max-width:100%;box-sizing:border-box;display:block;color:var(--text-main);outline:none;margin:0;appearance:none;-webkit-appearance:none}.editor-actions{order:3;flex-shrink:0;display:flex;align-items:center;align-self:center;height:auto}.config-save-btn.primary{height:36px;min-height:36px;max-height:36px;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:0 1rem;font-size:.9rem;white-space:nowrap;border-radius:8px;margin:0;box-sizing:border-box}}.config-name-input-small:focus{border-bottom:1px solid var(--primary)}@media (max-width:600px){.config-name-input-small:focus{border-bottom:none;border:1px solid var(--primary);outline:none;background:var(--bg-card)}}.editor-actions{display:flex;gap:1rem;flex-shrink:0}.config-save-btn.primary{border:none}.editor-content-split{display:flex;flex:1;overflow:hidden;min-height:0}.editor-settings-panel{width:400px;background:var(--bg-panel);border-right:1px solid var(--border);overflow-y:auto;height:100%;padding:2rem}.editor-preview-panel{flex:1;background:#0a0a0a;display:flex;align-items:center;justify-content:center;position:relative;background-image:radial-gradient(#333 1px,transparent 0);background-size:20px 20px}.iphone-mockup.large{width:360px;height:720px;transform:none}.preview-subtitle-box{position:absolute;border:2px dashed rgba(255,255,255,.3);cursor:move;user-select:none;display:flex;align-items:center;justify-content:center;transition:border-color .2s;box-sizing:border-box;overflow:visible;z-index:100;background:transparent}.preview-subtitle-box.dragging,.preview-subtitle-box.resizing,.preview-subtitle-box:hover{border-color:var(--primary);background:rgba(6,182,212,.1)}.subtitle-text-content{width:100%;height:100%;display:flex;align-items:center;pointer-events:none;white-space:nowrap;overflow:hidden;text-transform:uppercase;padding:0 8px;box-sizing:border-box}.subtitle-text-content .preview-two-lines{display:flex;flex-direction:column;line-height:1.2;width:100%}.subtitle-text-content.mode-line{text-transform:lowercase}@keyframes subtitleWordPop{0%{opacity:0;transform:scale(.5)}2%{opacity:1;transform:scale(1.2)}8%{opacity:1;transform:scale(1)}11%,to{opacity:0;transform:scale(.8)}}@keyframes subtitleWordFade{0%{opacity:0}2%{opacity:1}8%{opacity:1}11%,to{opacity:0}}@keyframes subtitleWordSlide{0%{opacity:0;transform:translateY(10px)}2%{opacity:1;transform:translateY(0)}8%{opacity:1;transform:translateY(0)}11%,to{opacity:0;transform:translateY(-10px)}}@keyframes subtitleHighlightJump{0%,10%{color:inherit;transform:scale(1);filter:brightness(1)}20%,30%{color:var(--highlight-color,#00D4FF);transform:scale(1.1);filter:brightness(1.3)}40%,to{color:inherit;transform:scale(1);filter:brightness(1)}}@keyframes subtitleHighlightGrow{0%,10%{color:inherit;transform:scale(1)}20%{color:var(--highlight-color,#00D4FF);transform:scale(1.3)}35%,to{color:inherit;transform:scale(1)}}@keyframes subtitleKaraoke{0%,15%{color:inherit;filter:brightness(.7)}25%,to{color:var(--highlight-color,#00D4FF);filter:brightness(1)}}@keyframes subtitleLineReveal{0%{clip-path:inset(0 100% 0 0)}50%,to{clip-path:inset(0 0 0 0)}}@keyframes subtitleBounceIn{0%{opacity:0;transform:translateY(10px) scale(.8)}20%{opacity:1;transform:translateY(-3px) scale(1.05)}35%,to{opacity:1;transform:translateY(0) scale(1)}}@keyframes subtitleStackUp{0%{opacity:0;transform:translateY(15px)}25%,to{opacity:1;transform:translateY(0)}}.subtitle-text-content .anim-word{display:inline-block;margin-right:.2em;--highlight-color:var(--highlight,#00D4FF)}.subtitle-text-content .anim-word:last-child{margin-right:0}.subtitle-text-content.phone-anim-word-fade,.subtitle-text-content.phone-anim-word-pop,.subtitle-text-content.phone-anim-word-slide{position:relative;min-height:1.2em}.subtitle-text-content.phone-anim-word-fade .anim-word,.subtitle-text-content.phone-anim-word-pop .anim-word,.subtitle-text-content.phone-anim-word-slide .anim-word{position:absolute;left:50%;transform:translateX(-50%);opacity:0}.subtitle-text-content.phone-anim-word-pop .anim-word{animation:subtitleWordPop 4.8s ease-out infinite}.subtitle-text-content.phone-anim-word-pop .anim-word.w2{animation-delay:.6s}.subtitle-text-content.phone-anim-word-pop .anim-word.w3{animation-delay:1.2s}.subtitle-text-content.phone-anim-word-pop .anim-word.w4{animation-delay:1.8s}.subtitle-text-content.phone-anim-word-pop .anim-word.w5{animation-delay:2.4s}.subtitle-text-content.phone-anim-word-pop .anim-word.w6{animation-delay:3s}.subtitle-text-content.phone-anim-word-fade .anim-word{animation:subtitleWordFade 4.8s ease-in-out infinite}.subtitle-text-content.phone-anim-word-fade .anim-word.w2{animation-delay:.6s}.subtitle-text-content.phone-anim-word-fade .anim-word.w3{animation-delay:1.2s}.subtitle-text-content.phone-anim-word-fade .anim-word.w4{animation-delay:1.8s}.subtitle-text-content.phone-anim-word-fade .anim-word.w5{animation-delay:2.4s}.subtitle-text-content.phone-anim-word-fade .anim-word.w6{animation-delay:3s}.subtitle-text-content.phone-anim-word-slide .anim-word{animation:subtitleWordSlide 4.8s ease-out infinite}.subtitle-text-content.phone-anim-word-slide .anim-word.w2{animation-delay:.6s}.subtitle-text-content.phone-anim-word-slide .anim-word.w3{animation-delay:1.2s}.subtitle-text-content.phone-anim-word-slide .anim-word.w4{animation-delay:1.8s}.subtitle-text-content.phone-anim-word-slide .anim-word.w5{animation-delay:2.4s}.subtitle-text-content.phone-anim-word-slide .anim-word.w6{animation-delay:3s}.subtitle-text-content.phone-anim-highlight-jump .anim-word{animation:subtitleHighlightJump 4.8s ease-in-out infinite}.subtitle-text-content.phone-anim-highlight-jump .anim-word.w2{animation-delay:.6s}.subtitle-text-content.phone-anim-highlight-jump .anim-word.w3{animation-delay:1.2s}.subtitle-text-content.phone-anim-highlight-jump .anim-word.w4{animation-delay:1.8s}.subtitle-text-content.phone-anim-highlight-jump .anim-word.w5{animation-delay:2.4s}.subtitle-text-content.phone-anim-highlight-jump .anim-word.w6{animation-delay:3s}.subtitle-text-content.phone-anim-highlight-grow .anim-word{animation:subtitleHighlightGrow 4.8s ease-in-out infinite}.subtitle-text-content.phone-anim-highlight-grow .anim-word.w2{animation-delay:.6s}.subtitle-text-content.phone-anim-highlight-grow .anim-word.w3{animation-delay:1.2s}.subtitle-text-content.phone-anim-highlight-grow .anim-word.w4{animation-delay:1.8s}.subtitle-text-content.phone-anim-highlight-grow .anim-word.w5{animation-delay:2.4s}.subtitle-text-content.phone-anim-highlight-grow .anim-word.w6{animation-delay:3s}.subtitle-text-content.phone-anim-karaoke .anim-word{animation:subtitleKaraoke 4.2s ease-in-out infinite}.subtitle-text-content.phone-anim-karaoke .anim-word.w2{animation-delay:.5s}.subtitle-text-content.phone-anim-karaoke .anim-word.w3{animation-delay:1s}.subtitle-text-content.phone-anim-karaoke .anim-word.w4{animation-delay:1.5s}.subtitle-text-content.phone-anim-karaoke .anim-word.w5{animation-delay:2s}.subtitle-text-content.phone-anim-karaoke .anim-word.w6{animation-delay:2.5s}.subtitle-text-content.phone-anim-line-reveal{animation:subtitleLineReveal 3.5s ease-out infinite;overflow:hidden}.subtitle-text-content.phone-anim-bounce-in .anim-word{animation:subtitleBounceIn 4.2s ease-out infinite;opacity:0}.subtitle-text-content.phone-anim-bounce-in .anim-word.w2{animation-delay:.35s}.subtitle-text-content.phone-anim-bounce-in .anim-word.w3{animation-delay:.7s}.subtitle-text-content.phone-anim-bounce-in .anim-word.w4{animation-delay:1.05s}.subtitle-text-content.phone-anim-bounce-in .anim-word.w5{animation-delay:1.4s}.subtitle-text-content.phone-anim-bounce-in .anim-word.w6{animation-delay:1.75s}.subtitle-text-content.phone-anim-stack-up .anim-word{animation:subtitleStackUp 4.2s ease-out infinite;opacity:0}.subtitle-text-content.phone-anim-stack-up .anim-word.w2{animation-delay:.4s}.subtitle-text-content.phone-anim-stack-up .anim-word.w3{animation-delay:.8s}.subtitle-text-content.phone-anim-stack-up .anim-word.w4{animation-delay:1.2s}.subtitle-text-content.phone-anim-stack-up .anim-word.w5{animation-delay:1.6s}.subtitle-text-content.phone-anim-stack-up .anim-word.w6{animation-delay:2s}.resize-handle{position:absolute;width:10px;height:10px;background:var(--primary);border-radius:50%;border:2px solid white;z-index:20;opacity:0;transition:opacity .2s}.preview-subtitle-box.dragging .resize-handle,.preview-subtitle-box.resizing .resize-handle,.preview-subtitle-box:hover .resize-handle{opacity:1}.resize-handle.nw{top:-5px;left:-5px;cursor:nw-resize}.resize-handle.ne{top:-5px;right:-5px;cursor:ne-resize}.resize-handle.sw{bottom:-5px;left:-5px;cursor:sw-resize}.resize-handle.se{bottom:-5px;right:-5px;cursor:se-resize}.resize-handle.n{top:-5px;cursor:n-resize}.resize-handle.n,.resize-handle.s{left:50%;transform:translateX(-50%);width:20px;height:8px;border-radius:4px}.resize-handle.s{bottom:-5px;cursor:s-resize}.resize-handle.e{right:-5px;cursor:e-resize}.resize-handle.e,.resize-handle.w{top:50%;transform:translateY(-50%);width:8px;height:20px;border-radius:4px}.resize-handle.w{left:-5px;cursor:w-resize}.rotate-handle{position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);width:28px;height:28px;background:var(--primary);border:2px solid white;border-radius:50%;cursor:grab;display:flex;align-items:center;justify-content:center;color:white;opacity:0;transition:opacity .2s;z-index:25;box-shadow:0 2px 8px rgba(0,0,0,.3)}.rotate-handle:active{cursor:grabbing;background:#0891b2}.preview-subtitle-box.rotating .rotate-handle,.preview-subtitle-box:hover .rotate-handle{opacity:1}.preview-subtitle-box.rotating{border-color:#f59e0b}.rotate-handle:before{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:2px;height:10px;background:var(--primary)}.rotation-label{position:absolute;bottom:-42px;left:calc(50% + 24px);background:rgba(0,0,0,.8);color:white;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}.preview-subtitle-box.rotating .rotation-label{opacity:1}.config-sections{display:flex;flex-direction:column;gap:0}.config-section{background:transparent;border:none;border-radius:0;overflow:visible;border-bottom:1px solid var(--border);padding-bottom:1.5rem;margin-bottom:1rem}.config-section:last-child{border-bottom:none;margin-bottom:0}.config-section-header{padding:0 0 1rem;display:flex;justify-content:space-between;align-items:center;background:transparent;border-bottom:none}.config-section-title{display:flex;align-items:center;gap:.75rem;font-weight:600;font-size:1rem;color:var(--text-main)}.config-section-content{padding:0;display:flex;flex-direction:column;gap:1rem}.config-row{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.config-row label{font-size:.9rem;color:var(--text-muted);font-weight:500;min-width:110px;width:110px;flex-shrink:0}.config-row select{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;padding:.6rem;color:var(--text-main);font-size:.9rem;outline:none;cursor:pointer}.config-row select:focus{border-color:var(--primary)}.range-input{flex:1;display:flex;align-items:center;gap:1rem}.range-input input[type=range]{flex:1;height:4px;background:var(--bg-input);border-radius:2px;appearance:none}.range-input input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;background:var(--primary);border-radius:50%;cursor:pointer;box-shadow:0 0 0 2px var(--bg-card)}.range-input span{font-family:monospace;font-size:.85rem;color:var(--text-muted);background:var(--bg-input);padding:.2rem .5rem;border-radius:4px;min-width:40px;text-align:center}.align-buttons{display:flex;gap:.25rem;background:var(--bg-input);padding:.25rem;border-radius:8px}.align-btn{display:flex;align-items:center;justify-content:center;width:36px;height:32px;background:transparent;border:none;border-radius:6px;cursor:pointer;color:var(--text-muted);transition:all .15s}.align-btn:hover{background:var(--bg-hover);color:var(--text-main)}.align-btn.active{background:var(--primary);color:#000}.color-input{flex:1;display:flex;align-items:center;gap:.75rem}.color-input input[type=color]{width:40px;height:40px;border:none;background:none;cursor:pointer;border-radius:8px;overflow:hidden}.color-input span{font-family:monospace;color:var(--text-muted);font-size:.9rem}.glow-controls{flex:1;display:flex;align-items:center;gap:.5rem}.glow-controls input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--primary)}.glow-controls input[type=color]{width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:6px;overflow:hidden}.button-group{flex:1;display:flex;background:var(--bg-input);padding:.25rem;border-radius:8px}.button-group button{flex:1;padding:.4rem;background:transparent;border:none;border-radius:6px}.animation-section{margin-top:.5rem}.animation-section .section-label{font-size:.9rem;color:var(--text-muted);font-weight:500;margin-bottom:.5rem}.animation-grid{gap:.4rem}.animation-preview-box{height:40px;font-size:9px;overflow:hidden;text-transform:uppercase}.animation-preview-box .static-text{color:#888}.animation-preview-box .w{margin:0 1px}.anim-word-demo{position:relative;display:flex;justify-content:center}.anim-word-demo .w{position:absolute;opacity:0}.anim-word-demo .w1{opacity:1}.anim-words2-demo{display:flex;gap:2px}.anim-words2-demo .w1{color:#00D4FF}.anim-line-demo{display:flex;gap:2px;text-transform:lowercase}.anim-line-demo .w3{color:#00D4FF}.anim-lines2-demo{display:flex;flex-direction:column;align-items:center;line-height:1.1;font-size:8px}.anim-lines2-demo .l2{color:#00D4FF}.animation-name{padding:.2rem;font-size:.55rem}.animation-card:hover .anim-type-word-pop .anim-word-demo .w{animation:subtitleWordPop 2.4s ease-out infinite}.animation-card:hover .anim-type-word-pop .w1{animation-delay:0s}.animation-card:hover .anim-type-word-pop .w2{animation-delay:.8s}.animation-card:hover .anim-type-word-pop .w3{animation-delay:1.6s}.animation-card:hover .anim-type-word-fade .anim-word-demo .w{animation:subtitleWordFade 2.4s ease-in-out infinite}.animation-card:hover .anim-type-word-fade .w1{animation-delay:0s}.animation-card:hover .anim-type-word-fade .w2{animation-delay:.8s}.animation-card:hover .anim-type-word-fade .w3{animation-delay:1.6s}.animation-card:hover .anim-type-word-slide .anim-word-demo .w{animation:subtitleWordSlide 2.4s ease-out infinite}.animation-card:hover .anim-type-word-slide .w1{animation-delay:0s}.animation-card:hover .anim-type-word-slide .w2{animation-delay:.8s}.animation-card:hover .anim-type-word-slide .w3{animation-delay:1.6s}.animation-card:hover .anim-type-highlight-jump .anim-words2-demo .w{animation:subtitleHighlightJump 2.4s ease-in-out infinite;--highlight-color:#00D4FF}.animation-card:hover .anim-type-highlight-jump .w1{animation-delay:0s}.animation-card:hover .anim-type-highlight-jump .w2{animation-delay:.8s}.animation-card:hover .anim-type-highlight-jump .w3{animation-delay:1.6s}.animation-card:hover .anim-type-highlight-grow .anim-words2-demo .w{animation:subtitleHighlightGrow 2.4s ease-in-out infinite;--highlight-color:#00D4FF}.animation-card:hover .anim-type-highlight-grow .w1{animation-delay:0s}.animation-card:hover .anim-type-highlight-grow .w2{animation-delay:.8s}.animation-card:hover .anim-type-highlight-grow .w3{animation-delay:1.6s}.animation-card:hover .anim-type-karaoke .anim-line-demo .w{animation:subtitleKaraoke 2.4s ease-in-out infinite;--highlight-color:#00D4FF}.animation-card:hover .anim-type-karaoke .w1{animation-delay:0s}.animation-card:hover .anim-type-karaoke .w2{animation-delay:.6s}.animation-card:hover .anim-type-karaoke .w3{animation-delay:1.2s}.animation-card:hover .anim-type-line-reveal .anim-line-demo{animation:subtitleLineReveal 2s ease-out infinite;overflow:hidden}.animation-card:hover .anim-type-bounce-in .anim-lines2-demo .line{animation:subtitleBounceIn 2.4s ease-out infinite;opacity:0}.animation-card:hover .anim-type-bounce-in .l1{animation-delay:0s}.animation-card:hover .anim-type-bounce-in .l2{animation-delay:.4s}.animation-card:hover .anim-type-stack-up .anim-lines2-demo .line{animation:subtitleStackUp 2.4s ease-out infinite;opacity:0}.animation-card:hover .anim-type-stack-up .l1{animation-delay:0s}.animation-card:hover .anim-type-stack-up .l2{animation-delay:.5s}.button-group button{color:var(--text-muted);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s}.button-group button.active{background:var(--bg-card);color:var(--text-main);box-shadow:0 1px 3px rgba(0,0,0,.2)}.position-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;flex:1;max-width:200px}.position-grid button{padding:.5rem;background:var(--bg-input);border:1px solid transparent;border-radius:6px;color:var(--text-muted);font-size:.75rem;cursor:pointer}.position-grid button.active{background:rgba(6,182,212,.15);border-color:var(--primary);color:var(--primary)}.upload-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;background:var(--bg-input);border:1px dashed var(--border);border-radius:8px;color:var(--text-muted);cursor:pointer;transition:all .2s}.upload-btn:hover{border-color:var(--primary);color:var(--primary);background:rgba(6,182,212,.05)}.logo-upload-wrapper{display:flex;align-items:center;gap:.75rem;flex:1}.logo-upload-wrapper .upload-btn{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:180px}.logo-mini-preview{width:36px;height:36px;object-fit:contain;border-radius:6px;background:var(--bg-input);border:1px solid var(--border)}.chroma-color-picker{display:flex;gap:.5rem;align-items:center;flex:1}.chroma-btn{padding:.4rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .15s ease;border:2px solid transparent}.chroma-btn.green{background:#00FF00;color:#000}.chroma-btn.blue{background:#0000FF;color:#fff}.chroma-btn:hover{transform:scale(1.05)}.chroma-btn.active{border-color:var(--primary);box-shadow:0 0 8px var(--primary)}.chroma-color-picker input[type=color]{width:32px;height:32px;padding:0;border:2px solid var(--border);border-radius:6px;cursor:pointer;background:transparent}.chroma-color-picker input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.chroma-color-picker input[type=color]::-webkit-color-swatch{border-radius:4px;border:none}.input-with-suffix{display:flex;align-items:center;gap:.5rem;flex:1}.input-with-suffix input[type=number]{width:70px;padding:.5rem .75rem;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.875rem}.input-with-suffix input[type=number]:focus{outline:none;border-color:var(--primary)}.input-with-suffix span{color:var(--text-muted);font-size:.8rem;white-space:nowrap}.config-hint{font-size:.75rem;color:var(--text-muted);opacity:.7;margin-top:.5rem;text-align:center}.preview-logo{transition:opacity .15s ease-out}.preview-logo:hover{outline:2px dashed var(--primary);outline-offset:4px}.preview-logo img{filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}.filter-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}.filter-preset{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.5rem;background:var(--bg-input);border:1px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s}.filter-preset:hover{background:var(--bg-hover)}.filter-preset.active{border-color:var(--primary);background:rgba(6,182,212,.1)}.filter-preset span{font-size:.7rem;color:var(--text-secondary);text-align:center}.filter-preset.active span{color:var(--primary)}.frame-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-bottom:1rem}.frame-preset{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.5rem;background:var(--bg-input);border:1px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s}.frame-preset:hover{background:var(--bg-hover)}.frame-preset.active{border-color:var(--primary);background:rgba(6,182,212,.1)}.frame-preset .frame-icon{font-size:1.5rem;line-height:1}.frame-preset span:last-child{font-size:.65rem;color:var(--text-secondary);text-align:center}.frame-preset.active span:last-child{color:var(--primary)}.filter-preview{width:100%;aspect-ratio:4/3;border-radius:6px;background:#333;overflow:hidden;position:relative}.filter-preview img{width:100%;height:100%;object-fit:cover;object-position:center 20%}.filter-preview.none img{filter:none}.filter-preview.warm img{filter:sepia(.2) saturate(1.3) brightness(1.05) hue-rotate(-10deg)}.filter-preview.cold img{filter:saturate(.9) brightness(1.05) hue-rotate(10deg) contrast(1.05)}.filter-preview.cold:after{content:"";position:absolute;inset:0;background:rgba(100,150,255,.15);pointer-events:none}.filter-preview.vintage img{filter:sepia(.4) contrast(.9) brightness(.95) saturate(.8)}.filter-preview.cinematic img{filter:contrast(1.2) saturate(.85) brightness(.95)}.filter-preview.cinematic:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),transparent 20%,transparent 80%,rgba(0,0,0,.2));pointer-events:none}.filter-preview.bw img{filter:grayscale(1) contrast(1.1)}.filter-preview.sepia img{filter:sepia(.8) saturate(.9) contrast(1.05)}.filter-preview.teal-orange img{filter:contrast(1.1) saturate(1.2)}.filter-preview.teal-orange:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,128,128,.2),rgba(255,140,0,.15));mix-blend-mode:overlay;pointer-events:none}.filter-preview.high-contrast img{filter:contrast(1.4) saturate(1.1) brightness(.95)}.filter-preview.matte img{filter:contrast(.9) brightness(1.05) saturate(.85)}.filter-preview.matte:after{content:"";position:absolute;inset:0;background:rgba(40,40,50,.15);pointer-events:none}.filter-preview.vibrant img{filter:saturate(1.5) contrast(1.1) brightness(1.05)}.filter-preview.faded img{filter:contrast(.85) brightness(1.1) saturate(.7)}.filter-preview.faded:after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.1);pointer-events:none}.preview-filter{z-index:50}.preview-filter.warm{background:rgba(255,140,50,.25)}.preview-filter.cold{background:rgba(80,130,255,.2)}.preview-filter.vintage{background:rgba(180,140,100,.25)}.preview-filter.cinematic{background:linear-gradient(180deg,rgba(0,0,0,.4),transparent 20%,transparent 80%,rgba(0,0,0,.4))}.preview-filter.bw{backdrop-filter:grayscale(1) contrast(1.1)}.preview-filter.sepia{backdrop-filter:sepia(.7)}.preview-filter.teal-orange{background:linear-gradient(135deg,rgba(0,180,180,.25),transparent 50%,rgba(255,120,0,.2))}.preview-filter.high-contrast{backdrop-filter:contrast(1.4) saturate(1.1)}.preview-filter.matte{background:rgba(50,50,60,.25)}.preview-filter.vibrant{backdrop-filter:saturate(1.5) contrast(1.1)}.preview-filter.faded{background:rgba(255,255,255,.2);backdrop-filter:contrast(.9)}.config-delete-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;background:transparent;border:1px solid var(--danger);color:var(--danger);border-radius:8px;cursor:pointer;font-weight:500;transition:all .2s;margin-top:1rem}.config-delete-btn:hover{background:rgba(239,68,68,.1)}.toggle-switch{position:relative;display:inline-block;width:44px!important;min-width:44px!important;max-width:44px!important;height:24px;flex-shrink:0;flex-grow:0}.toggle-switch input{opacity:0;width:0;height:0;position:absolute}.toggle-slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#3a3a4a;border:1px solid #4a4a5a;border-radius:24px}.toggle-slider,.toggle-slider:before{position:absolute;transition:all .3s ease}.toggle-slider:before{content:"";height:18px;width:18px;left:3px;top:50%;transform:translateY(-50%);background-color:#888;border-radius:50%}.toggle-switch input:checked+.toggle-slider{background-color:var(--primary);border-color:var(--primary)}.toggle-switch input:checked+.toggle-slider:before{left:calc(100% - 21px);background-color:white}.section-label{display:block;font-size:.85rem;color:var(--text-muted);margin-bottom:.75rem;font-weight:500}.subtitle-templates-section{margin-bottom:.5rem}.templates-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.templates-count{background:var(--bg-input);padding:.15rem .5rem;border-radius:10px;font-size:.75rem;color:var(--text-muted)}.subtitle-templates-grid-capcut{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:1rem;max-height:240px;overflow-y:auto;padding-right:.25rem;padding-bottom:.5rem}.subtitle-templates-grid-capcut::-webkit-scrollbar{width:4px}.subtitle-templates-grid-capcut::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.template-card{display:flex;flex-direction:column;background:#1a1a1a;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .15s;overflow:hidden;aspect-ratio:1}.template-card:hover{border-color:var(--border);transform:scale(1.02)}.template-card.active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}.template-card-preview{flex:1;display:flex;align-items:center;justify-content:center;background:#0a0a0a;padding:.25rem;min-height:0;border-radius:4px;margin:1px}.template-none-icon{color:var(--text-muted);opacity:.5}.preset-preview-content{display:flex;align-items:center;width:100%;height:100%;font-weight:700}.preset-preview-content .line-container,.preset-preview-content .word-container,.preset-preview-content .words-container{display:flex;align-items:center;width:100%;gap:.3em;flex-wrap:nowrap;padding:0 8px;box-sizing:border-box}.preset-preview-content .word{display:inline-block;white-space:nowrap}.preset-preview-content .lines-container{display:flex;flex-direction:column;gap:.2em;padding:0 8px;box-sizing:border-box;width:100%}.preset-preview-content .lines-container .line{display:block}.template-card-preview .preset-preview-content{font-size:10px}.template-card-preview .preset-preview-content.mode-word{font-size:12px}.template-card-preview .preset-preview-content.mode-line{font-size:9px;text-transform:lowercase}.template-card-preview .preset-preview-content.mode-lines2{font-size:8px}.phone-subtitle-preview{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden}.phone-subtitle-preview .preset-preview-content .words-container{gap:.5em}.phone-subtitle-preview .preset-preview-content{font-size:inherit;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preview-long{display:none!important}.preview-short{display:flex;width:100%;justify-content:center;gap:.3em}.template-card .line,.template-card .pair,.template-card .word,.template-card [class*=l],.template-card [class*=p],.template-card [class*=w],.template-card:hover .line,.template-card:hover .pair,.template-card:hover .word,.template-card:hover [class*=l],.template-card:hover [class*=p],.template-card:hover [class*=w]{animation:none!important;opacity:1!important;transform:none!important;position:relative!important;left:auto!important;top:auto!important}.template-card .preset-preview-content,.template-card:hover .preset-preview-content{transform:none!important}.template-card .word-container,.template-card:hover .word-container{position:relative!important}.template-card-preview .preset-preview-content.mode-word .word-container{position:relative;justify-content:center;min-height:1.5em;overflow:hidden}.template-card-preview .preset-preview-content.mode-word .word{position:absolute;left:50%;transform:translateX(-50%);opacity:0}.template-card-preview .preset-preview-content.mode-word .word.w1{position:relative;left:auto;transform:none;opacity:1}.template-card-preview .preset-preview-content.anim-word-pair .pair{position:absolute;opacity:0;white-space:nowrap}.template-card-preview .preset-preview-content.anim-word-pair .pair.p1{position:relative;opacity:1}.template-card:hover .preset-preview-content.mode-word .word,.template-card:hover .preset-preview-content.mode-word .word.w1{position:absolute;left:50%;transform:translateX(-50%)}.template-card:hover .preset-preview-content.anim-fade .word,.template-card:hover .preset-preview-content.anim-pop .word,.template-card:hover .preset-preview-content.anim-slide .word{animation:presetWordPop 4.8s ease-out infinite}.template-card:hover .preset-preview-content .word.w1{animation-delay:0s}.template-card:hover .preset-preview-content .word.w2{animation-delay:.6s}.template-card:hover .preset-preview-content .word.w3{animation-delay:1.2s}.template-card:hover .preset-preview-content .word.w4{animation-delay:1.8s}.template-card:hover .preset-preview-content .word.w5{animation-delay:2.4s}.template-card:hover .preset-preview-content .word.w6{animation-delay:3s}@keyframes presetWordPop{0%{opacity:0;transform:translateX(-50%) scale(.5)}2%{opacity:1;transform:translateX(-50%) scale(1.2)}8%{opacity:1;transform:translateX(-50%) scale(1)}11%,to{opacity:0;transform:translateX(-50%) scale(.8)}}.template-card:hover .preset-preview-content.anim-highlight-jump .word{animation:presetHighlightJump 4.8s ease-in-out infinite}@keyframes presetHighlightJump{0%,8%{filter:brightness(.7);transform:scale(1)}15%,25%{filter:brightness(1.5);transform:scale(1.15);color:var(--highlight-color,#00D4FF)}30%,to{filter:brightness(.7);transform:scale(1)}}.template-card:hover .preset-preview-content.anim-highlight-grow .word{animation:presetHighlightGrow 4.8s ease-in-out infinite}@keyframes presetHighlightGrow{0%,8%{transform:scale(1);color:inherit}15%,25%{transform:scale(1.2);color:var(--highlight-color,#00D4FF)}30%,to{transform:scale(1);color:inherit}}.template-card:hover .preset-preview-content.anim-karaoke .word{animation:presetKaraoke 2.4s ease-in-out infinite}.template-card:hover .preset-preview-content.anim-karaoke .word.w1{animation-delay:0s}.template-card:hover .preset-preview-content.anim-karaoke .word.w2{animation-delay:.6s}.template-card:hover .preset-preview-content.anim-karaoke .word.w3{animation-delay:1.2s}@keyframes presetKaraoke{0%,5%{filter:brightness(.5);color:inherit}10%,20%{filter:brightness(1);color:var(--highlight-color,#FFD700)}25%,to{filter:brightness(.7);color:inherit}}.template-card:hover .preset-preview-content.anim-reveal .line-container{animation:presetReveal 2s ease-out infinite;overflow:hidden}@keyframes presetReveal{0%{clip-path:inset(0 100% 0 0)}40%,to{clip-path:inset(0 0 0 0)}}.template-card:hover .preset-preview-content.anim-bounce .line{animation:presetBounceIn 2.4s ease-out infinite;opacity:0}.template-card:hover .preset-preview-content .line.l1{animation-delay:0s}.template-card:hover .preset-preview-content .line.l2{animation-delay:.4s}@keyframes presetBounceIn{0%{opacity:0;transform:translateY(10px)}20%{opacity:1;transform:translateY(-3px)}30%,to{opacity:1;transform:translateY(0)}}.template-card:hover .preset-preview-content.anim-stack .line{animation:presetStackUp 2.4s ease-out infinite;opacity:0}@keyframes presetStackUp{0%{opacity:0;transform:translateY(15px)}25%,to{opacity:1;transform:translateY(0)}}.phone-subtitle-preview .preset-preview-content.mode-word .word-container{position:relative;min-height:1.2em;width:100%;display:flex;justify-content:center}.phone-subtitle-preview .preset-preview-content.mode-word .word{position:absolute;left:50%;transform:translateX(-50%);opacity:0}.phone-subtitle-preview .preset-preview-content.anim-fade .word,.phone-subtitle-preview .preset-preview-content.anim-pop .word,.phone-subtitle-preview .preset-preview-content.anim-slide .word{animation:presetWordPop 4.8s ease-out infinite}.phone-subtitle-preview .preset-preview-content .word.w1{animation-delay:0s}.phone-subtitle-preview .preset-preview-content .word.w2{animation-delay:.6s}.phone-subtitle-preview .preset-preview-content .word.w3{animation-delay:1.2s}.phone-subtitle-preview .preset-preview-content .word.w4{animation-delay:1.8s}.phone-subtitle-preview .preset-preview-content .word.w5{animation-delay:2.4s}.phone-subtitle-preview .preset-preview-content .word.w6{animation-delay:3s}.phone-subtitle-preview .preset-preview-content.anim-highlight-jump .word{animation:presetHighlightJump 4.8s ease-in-out infinite}.phone-subtitle-preview .preset-preview-content.anim-highlight-grow .word{animation:presetHighlightGrow 4.8s ease-in-out infinite}.phone-subtitle-preview .preset-preview-content.anim-karaoke .word{animation:presetKaraoke 4.2s ease-in-out infinite}.phone-subtitle-preview .preset-preview-content.anim-karaoke .word.w1{animation-delay:0s}.phone-subtitle-preview .preset-preview-content.anim-karaoke .word.w2{animation-delay:.5s}.phone-subtitle-preview .preset-preview-content.anim-karaoke .word.w3{animation-delay:1s}.phone-subtitle-preview .preset-preview-content.anim-karaoke .word.w4{animation-delay:1.5s}.phone-subtitle-preview .preset-preview-content.anim-karaoke .word.w5{animation-delay:2s}.phone-subtitle-preview .preset-preview-content.anim-karaoke .word.w6{animation-delay:2.5s}.preset-preview-content.anim-word-single .word-container{position:relative;min-height:1.4em;display:flex;justify-content:center;align-items:center}.preset-preview-content.anim-word-single .word{position:absolute;left:50%;transform:translateX(-50%);opacity:0}.preset-preview-content.anim-word-single .word.w1{opacity:1}.phone-subtitle-preview .preset-preview-content.anim-word-single .word,.template-card:hover .preset-preview-content.anim-word-single .word{animation:wordSinglePop 4.8s ease-out infinite}.preset-preview-content.anim-word-single .word.w1{animation-delay:0s}.preset-preview-content.anim-word-single .word.w2{animation-delay:.8s}.preset-preview-content.anim-word-single .word.w3{animation-delay:1.6s}.preset-preview-content.anim-word-single .word.w4{animation-delay:2.4s}.preset-preview-content.anim-word-single .word.w5{animation-delay:3.2s}.preset-preview-content.anim-word-single .word.w6{animation-delay:4s}@keyframes wordSinglePop{0%,1%{opacity:0;transform:translateX(-50%) scale(.9)}2%{opacity:1;transform:translateX(-50%) scale(1.05)}16%,4%{opacity:1;transform:translateX(-50%) scale(1)}16.5%,to{opacity:0;transform:translateX(-50%) scale(1)}}.preset-preview-content.anim-word-pair .word-container{position:relative;min-height:1.4em;width:100%;display:flex;justify-content:center;align-items:center}.preset-preview-content.anim-word-pair .pair{position:absolute;opacity:0;white-space:nowrap}.preset-preview-content.anim-word-pair .pair.p1{opacity:1;position:relative}.phone-subtitle-preview .preset-preview-content.anim-word-pair .pair,.template-card:hover .preset-preview-content.anim-word-pair .pair{position:absolute;animation:wordPairFade 4.5s ease-out infinite}.preset-preview-content.anim-word-pair .pair.p1{animation-delay:0s}.preset-preview-content.anim-word-pair .pair.p2{animation-delay:1.5s}.preset-preview-content.anim-word-pair .pair.p3{animation-delay:3s}@keyframes wordPairFade{0%,1%{opacity:0}2%{opacity:1;transform:scale(1.02)}32%,5%{opacity:1;transform:scale(1)}33%,to{opacity:0}}.preset-preview-content.anim-word-reveal .line-container{display:flex;flex-wrap:wrap;justify-content:center;gap:.25em}.preset-preview-content.anim-word-reveal .word{opacity:0}.preset-preview-content.anim-word-reveal .word.w1{opacity:1}.phone-subtitle-preview .preset-preview-content.anim-word-reveal .word,.template-card:hover .preset-preview-content.anim-word-reveal .word{animation:wordRevealIn 5s ease-out infinite}.preset-preview-content.anim-word-reveal .word.w1{animation-delay:0s}.preset-preview-content.anim-word-reveal .word.w2{animation-delay:.5s}.preset-preview-content.anim-word-reveal .word.w3{animation-delay:1s}.preset-preview-content.anim-word-reveal .word.w4{animation-delay:1.5s}.preset-preview-content.anim-word-reveal .word.w5{animation-delay:2s}.preset-preview-content.anim-word-reveal .word.w6{animation-delay:2.5s}@keyframes wordRevealIn{0%{opacity:0;transform:translateY(3px)}8%{opacity:1;transform:translateY(0)}85%{opacity:1;transform:translateY(0)}90%,to{opacity:0;transform:translateY(0)}}.phone-subtitle-preview .preset-preview-content.anim-bounce .line{animation:presetBounceIn 3s ease-out infinite;opacity:0}.phone-subtitle-preview .preset-preview-content.anim-stack .line{animation:presetStackUp 3s ease-out infinite;opacity:0}.phone-subtitle-preview .preset-preview-content .line.l1{animation-delay:0s}.phone-subtitle-preview .preset-preview-content .line.l2{animation-delay:.5s}.template-text-preview{font-size:18px;letter-spacing:.5px;line-height:1}.template-text-capcut,.template-text-preview{display:flex;align-items:center;justify-content:center;font-weight:700}.template-text-capcut{flex-direction:row;text-align:center;font-size:10px;line-height:1.2;text-transform:uppercase;width:100%;height:100%;white-space:nowrap}.template-text-capcut.mode-word{font-size:12px}.template-text-capcut.mode-line{text-transform:lowercase;font-size:9px}.template-text-capcut.mode-lines2{flex-direction:column;font-size:9px;gap:0}.template-preview-anim{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:10px;font-weight:700;text-transform:uppercase;position:relative}.template-preview-anim .static-text{display:flex;gap:3px}.template-preview-anim .static-text.two-lines{flex-direction:column;align-items:center;line-height:1.1}.template-preview-anim .anim-container{position:absolute;display:flex;gap:3px;align-items:center;opacity:0;pointer-events:none}.template-preview-anim .anim-container .w{display:inline-block}.template-card:hover .template-preview-anim .static-text{opacity:0}.template-card:hover .template-preview-anim .anim-container{opacity:1}.anim-container.word-pop{justify-content:center}.anim-container.word-pop .w{position:absolute;opacity:0;transform:scale(.5);color:var(--highlight)}.template-card:hover .anim-container.word-pop .w{animation:wordReplace 2.4s ease-out infinite}.template-card:hover .anim-container.word-pop .w:first-child{animation-delay:0s}.template-card:hover .anim-container.word-pop .w:nth-child(2){animation-delay:.8s}.template-card:hover .anim-container.word-pop .w:nth-child(3){animation-delay:1.6s}@keyframes wordReplace{0%{opacity:0;transform:scale(.5)}8%{opacity:1;transform:scale(1.15)}15%,30%{opacity:1;transform:scale(1)}38%{opacity:0;transform:scale(.9)}to{opacity:0}}.anim-container.highlight-jump .w{opacity:1;color:var(--color)}.template-card:hover .anim-container.highlight-jump .w{animation:jumpHighlight 2.4s ease-in-out infinite}.template-card:hover .anim-container.highlight-jump .w:first-child{animation-delay:0s}.template-card:hover .anim-container.highlight-jump .w:nth-child(2){animation-delay:.8s}.template-card:hover .anim-container.highlight-jump .w:nth-child(3){animation-delay:1.6s}@keyframes jumpHighlight{0%,5%{color:var(--color);transform:scale(1)}12%{color:var(--highlight);transform:scale(1.15)}30%{color:var(--highlight);transform:scale(1.05)}38%,to{color:var(--color);transform:scale(1)}}.anim-container.line-sweep .w{opacity:1;color:var(--color)}.template-card:hover .anim-container.line-sweep .w{animation:sweepHighlight 2.4s ease-in-out infinite}.template-card:hover .anim-container.line-sweep .w:first-child{animation-delay:0s}.template-card:hover .anim-container.line-sweep .w:nth-child(2){animation-delay:.6s}.template-card:hover .anim-container.line-sweep .w:nth-child(3){animation-delay:1.2s}@keyframes sweepHighlight{0%,8%{color:var(--color)}15%,30%{color:var(--highlight);transform:scale(1.1)}40%,to{color:var(--color);transform:scale(1)}}.anim-container.lines-pop{flex-direction:column;align-items:center;gap:1px}.anim-container.lines-pop .line-row{display:flex;gap:3px;opacity:0}.template-card:hover .anim-container.lines-pop .line-row{animation:lineAppear 2.4s ease-out infinite}.template-card:hover .anim-container.lines-pop .line-row:first-child{animation-delay:0s}.template-card:hover .anim-container.lines-pop .line-row:nth-child(2){animation-delay:.6s}@keyframes lineAppear{0%{opacity:0;transform:translateY(5px)}15%{opacity:1;transform:translateY(0)}85%{opacity:1}to{opacity:1}}.template-card-name{padding:.2rem .15rem;font-size:.6rem;color:var(--text-muted);text-align:center;background:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.template-card.active .template-card-name{color:var(--primary)}.subtitle-templates-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.subtitle-template-btn{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.6rem .4rem;background:var(--bg-input);border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s}.subtitle-template-btn:hover{background:var(--bg-hover);border-color:var(--border)}.subtitle-template-btn.active{border-color:var(--primary);background:rgba(6,182,212,.1)}.template-preview{width:100%;height:32px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;border-radius:4px;padding:0 4px}.template-name{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.position-info{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:rgba(6,182,212,.1);border-radius:8px;border:1px dashed var(--primary)}.position-hint{font-size:.8rem;color:var(--text-muted)}.position-coords{font-family:monospace;font-size:.8rem;color:var(--primary);background:var(--bg-input);padding:.25rem .5rem;border-radius:4px}.video-preview-container{width:360px;aspect-ratio:9/16;position:relative;margin:0 auto;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 20px 50px rgba(0,0,0,.6);border:3px solid rgba(255,255,255,.1)}.video-preview-frame{position:absolute;top:0;left:0;width:100%;height:100%}.video-preview-container-mini{width:360px;aspect-ratio:9/16;position:relative;overflow:hidden;background:#000;border-radius:16px}.iphone-mockup-svg-wrapper{width:380px;height:auto;position:relative;margin:0 auto;filter:drop-shadow(0 20px 50px rgba(0,0,0,.6))}.iphone-svg-image{width:100%;height:auto;display:block;pointer-events:none;user-select:none;position:relative;z-index:10}.iphone-screen{position:absolute;top:1.5%;left:4.2%;width:91.5%;height:96%;background:#000;border-radius:40px;overflow:hidden;z-index:1;cursor:default}.preview-video-placeholder,.video-preview-frame{width:100%;height:100%;position:relative;background:#000;overflow:hidden}.preview-video-bg{width:100%;height:100%;background:linear-gradient(45deg,#222,#333);opacity:.5}.preview-video-bg-video{object-fit:cover}.preview-video-bg-video,.video-subtitle-preview{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit}.video-subtitle-preview{overflow:hidden}.video-subtitle-preview .video-container{position:relative;width:100%;height:100%}.video-subtitle-preview video{width:100%;height:100%;object-fit:contain}.video-subtitle-preview canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.video-preview-error{bottom:10px;left:10px;right:10px;background:rgba(255,0,0,.8);padding:8px;font-size:12px}.preview-watermark,.video-preview-error{position:absolute;color:white;border-radius:4px}.preview-watermark{padding:8px 12px;background:rgba(0,0,0,.5);font-weight:700;pointer-events:none;z-index:5}.preview-watermark.top-left{top:40px;left:20px}.preview-watermark.top-right{top:40px;right:20px}.preview-watermark.bottom-left{bottom:40px;left:20px}.preview-watermark.bottom-right{bottom:40px;right:20px}.preview-filter{position:absolute;inset:0;pointer-events:none;z-index:2}.preview-filter.warm{background:rgba(245,158,11,.15);mix-blend-mode:overlay}.preview-filter.cold{background:rgba(59,130,246,.15);mix-blend-mode:overlay}.preview-filter.vintage{background:rgba(167,139,250,.15);mix-blend-mode:overlay}.preview-filter.cinematic{background:linear-gradient(180deg,rgba(0,0,0,.3),transparent);mix-blend-mode:multiply}.config-save-btn{display:flex;align-items:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s;border:none}.config-save-btn.primary{background:var(--primary);color:white;box-shadow:0 4px 12px rgba(6,182,212,.3)}.config-save-btn.primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 6px 16px rgba(6,182,212,.4)}.config-card-menu-dropdown{position:fixed;background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:.25rem;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.4);min-width:140px}.config-card-menu-dropdown .menu-item{display:flex;align-items:center;gap:.5rem;padding:.6rem .75rem;border-radius:6px;color:var(--text-main);font-size:.85rem;cursor:pointer;transition:all .15s;background:transparent;border:none;width:100%;text-align:left}.config-card-menu-dropdown .menu-item:hover{background:var(--bg-hover)}.config-card-menu-dropdown .menu-item.delete{color:var(--danger)}.config-card-menu-dropdown .menu-item.delete:hover{background:rgba(239,68,68,.1)}.config-card-menu-dropdown .menu-divider{height:1px;background:var(--border);margin:.25rem 0}.font-row{position:relative}.font-dropdown-container{flex:1;position:relative}.font-dropdown-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:.6rem .75rem;background:var(--bg-input);border:1px solid var(--border);border-radius:8px;color:var(--text-main);font-size:.95rem;cursor:pointer;transition:all .2s}.font-dropdown-trigger:hover{border-color:var(--primary)}.font-dropdown-trigger svg{color:var(--text-muted);transition:transform .2s}.font-dropdown-trigger:hover svg{color:var(--primary)}.font-preview-text{font-weight:500}.font-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;padding:.5rem;z-index:1000;max-height:300px;max-height:50vh;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.4);overscroll-behavior:contain}.font-option{display:flex;align-items:center;gap:.75rem;width:100%;padding:.6rem .75rem;background:transparent;border:none;border-radius:6px;color:var(--text-main);cursor:pointer;transition:all .15s;text-align:left}.font-option:hover{background:var(--bg-hover)}.font-option.active{background:rgba(6,182,212,.15)}.font-option-preview{font-size:1.5rem;font-weight:700;min-width:40px;color:var(--text-main)}.font-option-name{flex:1;font-size:.9rem;color:var(--text-muted);font-family:Inter,sans-serif!important}.font-check{color:var(--primary);flex-shrink:0}.font-dropdown-menu::-webkit-scrollbar{width:6px}.font-dropdown-menu::-webkit-scrollbar-track{background:transparent}.font-dropdown-menu::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.font-dropdown-menu::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.alignment-guide{position:absolute;background:#ff3366;z-index:50;opacity:0;transition:opacity .15s ease-out;pointer-events:none}.alignment-guide.visible{opacity:1}.alignment-guide.vertical{left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);box-shadow:0 0 8px rgba(255,51,102,.6)}.alignment-guide.horizontal{top:50%;left:0;right:0;height:2px;transform:translateY(-50%);box-shadow:0 0 8px rgba(255,51,102,.6)}.alignment-guide.horizontal:before,.alignment-guide.vertical:before{content:"";position:absolute;width:8px;height:8px;background:#ff3366;border-radius:50%;box-shadow:0 0 6px rgba(255,51,102,.8)}.alignment-guide.horizontal:before,.alignment-guide.vertical:before{top:50%;left:50%;transform:translate(-50%,-50%)}.animation-section{margin-top:1rem}.animation-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-top:.5rem}.animation-card{display:flex;flex-direction:column;background:#1a1a1a;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .15s;overflow:hidden;padding:0}.animation-card:hover{border-color:var(--border)}.animation-card.active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}.animation-preview-box{display:flex;align-items:center;justify-content:center;background:#0a0a0a;padding:.5rem;min-height:40px;font-size:8px;font-weight:700;color:#fff;gap:.2em;position:relative}.animation-preview-box .w{display:inline-block}.animation-preview-box .line-demo{display:flex;flex-direction:column;align-items:center;font-size:7px;gap:2px}.animation-preview-box .l2{color:var(--primary)}.animation-name{padding:.25rem;font-size:.6rem;color:var(--text-muted);text-align:center;background:#1a1a1a}.animation-card.active .animation-name{color:var(--primary)}.animation-card:hover .anim-demo-fade .w,.animation-card:hover .anim-demo-pop .w,.animation-card:hover .anim-demo-slide .w{position:absolute;animation:animDemoPop 2.4s ease-out infinite}.animation-card:hover .anim-demo-fade .w.w1,.animation-card:hover .anim-demo-pop .w.w1,.animation-card:hover .anim-demo-slide .w.w1{animation-delay:0s}.animation-card:hover .anim-demo-fade .w.w2,.animation-card:hover .anim-demo-pop .w.w2,.animation-card:hover .anim-demo-slide .w.w2{animation-delay:.8s}.animation-card:hover .anim-demo-fade .w.w3,.animation-card:hover .anim-demo-pop .w.w3,.animation-card:hover .anim-demo-slide .w.w3{animation-delay:1.6s}@keyframes animDemoPop{0%{opacity:0;transform:scale(.5)}10%{opacity:1;transform:scale(1.2)}20%,30%{opacity:1;transform:scale(1)}40%,to{opacity:0}}.animation-card:hover .anim-demo-highlight-grow .w,.animation-card:hover .anim-demo-highlight-jump .w{animation:animDemoHighlight 2.4s ease-in-out infinite}.animation-card:hover .anim-demo-highlight-grow .w.w1,.animation-card:hover .anim-demo-highlight-jump .w.w1{animation-delay:0s}.animation-card:hover .anim-demo-highlight-grow .w.w2,.animation-card:hover .anim-demo-highlight-jump .w.w2{animation-delay:.8s}.animation-card:hover .anim-demo-highlight-grow .w.w3,.animation-card:hover .anim-demo-highlight-jump .w.w3{animation-delay:1.6s}@keyframes animDemoHighlight{0%,10%{color:#fff;transform:scale(1)}20%,30%{color:var(--primary);transform:scale(1.15)}40%,to{color:#fff;transform:scale(1)}}.animation-card:hover .anim-demo-karaoke .w{animation:animDemoKaraoke 2.4s ease-in-out infinite}.animation-card:hover .anim-demo-karaoke .w.w1{animation-delay:0s}.animation-card:hover .anim-demo-karaoke .w.w2{animation-delay:.6s}.animation-card:hover .anim-demo-karaoke .w.w3{animation-delay:1.2s}@keyframes animDemoKaraoke{0%,15%{color:#fff}25%,to{color:var(--primary)}}.animation-card:hover .anim-demo-reveal{animation:animDemoReveal 2s ease-out infinite;overflow:hidden}@keyframes animDemoReveal{0%{clip-path:inset(0 100% 0 0)}40%,to{clip-path:inset(0 0 0 0)}}.animation-card:hover .anim-demo-bounce .l,.animation-card:hover .anim-demo-stack .l{animation:animDemoBounce 2.4s ease-out infinite;opacity:0}.animation-card:hover .anim-demo-bounce .l.l1,.animation-card:hover .anim-demo-stack .l.l1{animation-delay:0s}.animation-card:hover .anim-demo-bounce .l.l2,.animation-card:hover .anim-demo-stack .l.l2{animation-delay:.4s}@keyframes animDemoBounce{0%{opacity:0;transform:translateY(8px)}20%{opacity:1;transform:translateY(-2px)}30%,to{opacity:1;transform:translateY(0)}}.animation-card .anim-demo-word-single{position:relative;display:flex;justify-content:center;align-items:center}.animation-card .anim-demo-word-single .w{position:absolute;opacity:0}.animation-card .anim-demo-word-single .w.w1{opacity:1}.animation-card:hover .anim-demo-word-single .w{animation:animDemoWordSingle 2.4s ease-out infinite}.animation-card:hover .anim-demo-word-single .w.w1{animation-delay:0s}.animation-card:hover .anim-demo-word-single .w.w2{animation-delay:.8s}.animation-card:hover .anim-demo-word-single .w.w3{animation-delay:1.6s}@keyframes animDemoWordSingle{0%{opacity:0;transform:scale(.7)}10%{opacity:1;transform:scale(1.1)}25%{opacity:1;transform:scale(1)}35%,to{opacity:0;transform:scale(.9)}}.animation-card .anim-demo-word-pair{position:relative;display:flex;justify-content:center;align-items:center}.animation-card .anim-demo-word-pair .w{position:absolute;opacity:0;white-space:nowrap}.animation-card .anim-demo-word-pair .w.w1{opacity:1;position:relative}.animation-card .anim-demo-word-pair .w.w2,.animation-card .anim-demo-word-pair .w.w3,.animation-card .anim-demo-word-pair .w.w4{display:none}.animation-card:hover .anim-demo-word-pair .w{display:inline;position:absolute;animation:animDemoWordPair 2.4s ease-out infinite}.animation-card:hover .anim-demo-word-pair .w.w1{animation-delay:0s}.animation-card:hover .anim-demo-word-pair .w.w2{animation-delay:.8s}.animation-card:hover .anim-demo-word-pair .w.w3{animation-delay:1.6s}@keyframes animDemoWordPair{0%{opacity:0}10%{opacity:1}30%{opacity:1}40%,to{opacity:0}}.animation-card .anim-demo-word-reveal{display:flex;justify-content:center;align-items:center;gap:3px}.animation-card .anim-demo-word-reveal .w{opacity:0}.animation-card .anim-demo-word-reveal .w.w1{opacity:1}.animation-card:hover .anim-demo-word-reveal .w{animation:animDemoWordReveal 3s ease-out infinite}.animation-card:hover .anim-demo-word-reveal .w.w1{animation-delay:0s}.animation-card:hover .anim-demo-word-reveal .w.w2{animation-delay:.5s}.animation-card:hover .anim-demo-word-reveal .w.w3{animation-delay:1s}@keyframes animDemoWordReveal{0%{opacity:0;transform:scale(.8)}15%{opacity:1;transform:scale(1)}70%{opacity:1;transform:scale(1)}85%,to{opacity:0}}.animation-card .anim-demo-highlight{display:flex;justify-content:center;align-items:center;gap:3px}.animation-card .anim-demo-highlight .w{color:#fff}.animation-card .anim-demo-highlight .w.active{color:var(--primary)}.animation-card:hover .anim-demo-highlight .w{animation:animDemoHighlightWord 2.4s ease-in-out infinite}.animation-card:hover .anim-demo-highlight .w.w1{animation-delay:0s}.animation-card:hover .anim-demo-highlight .w.w2{animation-delay:.8s}.animation-card:hover .anim-demo-highlight .w.w3{animation-delay:1.6s}@keyframes animDemoHighlightWord{0%,10%{color:#fff}20%,40%{color:var(--primary)}50%,to{color:#fff}}.animation-card .anim-demo-box-highlight{display:flex;justify-content:center;align-items:center;gap:3px}.animation-card .anim-demo-box-highlight .w{color:#fff;padding:1px 3px;border-radius:2px}.animation-card .anim-demo-box-highlight .w.boxed{background:var(--primary);color:#000}.animation-card:hover .anim-demo-box-highlight .w{animation:animDemoBoxHighlight 2.4s ease-in-out infinite}.animation-card:hover .anim-demo-box-highlight .w.w1{animation-delay:0s}.animation-card:hover .anim-demo-box-highlight .w.w2{animation-delay:.8s}.animation-card:hover .anim-demo-box-highlight .w.w3{animation-delay:1.6s}@keyframes animDemoBoxHighlight{0%,10%{background:transparent;color:#fff}20%,40%{background:var(--primary);color:#000}50%,to{background:transparent;color:#fff}}@media (max-width:1000px){.configs-grid-view{padding:1rem;gap:1rem}.configs-header{padding:1.5rem 1rem;flex-direction:column;align-items:flex-start;gap:1rem}.create-config-btn{width:100%;justify-content:center}.config-editor-container{height:auto;min-height:100vh;overflow-y:visible}.editor-content-split{flex-direction:column;display:block;width:100%;box-sizing:border-box}.editor-settings-panel{width:100%!important;max-width:none!important;border-right:none;padding:1rem 1rem 80px;background:var(--bg-app);box-sizing:border-box}.editor-preview-panel{width:100%!important;max-height:calc(100vh - 150px);min-height:50vh;padding:2rem 0;overflow-y:auto;background:#000;-webkit-overflow-scrolling:touch}.config-section{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1rem;margin-bottom:1rem;width:100%;box-sizing:border-box}.subtitle-templates-grid-capcut{grid-template-columns:repeat(3,1fr);gap:.75rem;max-height:none;overflow-y:visible}.template-card{min-width:0}.template-card-label{font-size:.65rem}.mobile-tab-switcher{display:flex;background:var(--bg-panel);padding:.75rem 1rem;gap:.75rem;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;width:100%;box-sizing:border-box}.mobile-tab-btn{flex:1;padding:.75rem;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.03);color:var(--text-muted);font-weight:600;display:flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;transition:all .2s}.mobile-tab-btn.active{background:var(--bg-input);color:white;border-color:var(--primary);box-shadow:0 0 10px rgba(6,182,212,.2)}.back-to-configs-btn span{display:none}.iphone-frame-mini,.iphone-mockup-mini{transform:scale(.7);transform-origin:center top;margin-bottom:-230px;left:0}.editor-preview-panel{overflow:hidden}}