:root{--bg-primary: #0a0a0f;--bg-secondary: #101018;--bg-card: #16161f;--bg-card-hover: #1d1d29;--border: #262633;--border-strong: #33334a;--text-primary: #f2f2f7;--text-secondary: #9a9ab0;--text-muted: #5c5c74;--accent: #ff0055;--accent-glow: rgba(255, 0, 85, .28);--gold: #ffd700;--gold-dim: rgba(255, 215, 0, .13);--gradient-btn: linear-gradient(135deg, #ff0055, #ff6a00);--gradient-btn-hover: linear-gradient(135deg, #ff1a66, #ff7a1a);--radius-sm: 10px;--radius-md: 16px;--radius-lg: 22px;--font-display: "Syne", sans-serif;--font-mono: "DM Mono", monospace;--shadow-card: 0 8px 40px rgba(0, 0, 0, .45)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-display);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}button{font-family:var(--font-display)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.bg-noise{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:256px 256px;pointer-events:none}.app{max-width:760px;margin:0 auto;padding:20px 16px 56px;min-height:100vh;display:flex;flex-direction:column}.header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 28px}.logo{display:flex;align-items:center;gap:12px;min-width:0}.logo-icon{font-size:15px;width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--gradient-btn);border-radius:var(--radius-sm);color:#fff;box-shadow:0 0 24px var(--accent-glow)}.logo-text h1{font-size:22px;font-weight:800;letter-spacing:-.5px;background:linear-gradient(135deg,#fff 30%,var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1;white-space:nowrap}.logo-sub{display:block;font-size:9.5px;color:var(--text-secondary);font-weight:600;letter-spacing:1.6px;text-transform:uppercase;white-space:nowrap}.locale-bar{display:flex;gap:2px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:3px;flex-shrink:0}.locale-btn{padding:6px 12px;border:none;border-radius:7px;background:transparent;color:var(--text-secondary);font-size:12px;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:all .2s ease}.locale-btn:hover{color:var(--text-primary)}.locale-btn.active{background:var(--gradient-btn);color:#fff;box-shadow:0 0 14px var(--accent-glow)}.main{flex:1;display:flex;flex-direction:column;gap:26px}.step{display:flex;flex-direction:column;gap:12px;animation:fadeIn .4s ease}.step-head{display:flex;align-items:center;gap:10px}.step-num{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);font-size:12px;font-weight:700}.step-title{font-size:13px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1.8px}.step-num.result-num{background:var(--gold-dim);border-color:var(--gold);color:var(--gold)}.ff-pill{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text-secondary);padding:5px 10px;background:var(--bg-card);border:1px solid var(--border);border-radius:20px}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:blink 1.2s ease-in-out infinite}.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}@media(max-width:560px){.type-grid{grid-template-columns:1fr}}.type-card{position:relative;display:flex;align-items:center;gap:12px;padding:16px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;text-align:left;transition:border-color .25s ease,background .25s ease,transform .25s ease;overflow:hidden}.type-card:hover{border-color:var(--border-strong);background:var(--bg-card-hover);transform:translateY(-1px)}.type-card.selected{border-color:var(--accent);background:linear-gradient(135deg,#ff00551a,#ff005508);box-shadow:0 0 24px var(--accent-glow)}.type-icon{font-size:28px;line-height:1;flex-shrink:0}.type-info{display:flex;flex-direction:column;gap:3px;min-width:0}.type-label{font-size:15px;font-weight:700;color:var(--text-primary)}.type-desc{font-size:11px;color:var(--text-secondary);line-height:1.35}.type-badge{position:absolute;top:8px;right:8px;font-size:8.5px;font-weight:700;padding:2px 7px;border-radius:20px;background:var(--gold-dim);color:var(--gold);letter-spacing:.5px;text-transform:uppercase}@media(min-width:561px){.type-card{flex-direction:column;align-items:flex-start;padding:18px 16px}.type-icon{font-size:30px}}.caption-card{display:flex;flex-direction:column;gap:18px;padding:18px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}.caption-preview{position:relative;width:100%;height:132px;border-radius:var(--radius-md);background:linear-gradient(180deg,#1d1d2b,#0c0c13);border:1px solid var(--border);overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:0 12px 26px}.caption-preview-text{display:inline-block;max-width:100%;text-align:center;white-space:nowrap;font-family:Arial,Helvetica,sans-serif;font-weight:700;overflow:hidden;text-overflow:ellipsis}.ctrl-group{display:flex;flex-direction:column;gap:6px;min-width:0}.ctrl-row{display:grid;grid-template-columns:3fr 2fr;gap:14px;align-items:start}@media(max-width:420px){.ctrl-row{grid-template-columns:1fr;gap:12px}}.ctrl-label{font-size:11px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1.4px}.segmented{display:flex;gap:5px}.seg-btn{flex:1;padding:7px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:.3px;white-space:nowrap}.seg-btn:hover:not(:disabled){border-color:var(--border-strong);color:var(--text-primary)}.seg-btn.active{border-color:var(--accent);color:#fff;background:#ff005524;box-shadow:0 0 16px #ff005524}.seg-btn:disabled{opacity:.5;cursor:not-allowed}.style-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}@media(max-width:560px){.style-grid{grid-template-columns:repeat(2,1fr)}}.style-chip{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all .2s ease;min-width:0}.style-chip:hover{border-color:var(--border-strong);color:var(--text-primary)}.style-chip.active{border-color:var(--accent);background:#ff005514;box-shadow:0 0 16px #ff00551f;color:var(--text-primary)}.style-swatch{display:inline-block;font-family:Arial,Helvetica,sans-serif;font-weight:700;line-height:1.2;text-align:center}.style-name{font-size:10px;font-weight:600;text-align:center;line-height:1.2}.size-row{display:flex;align-items:baseline;justify-content:space-between}.size-readout{font-family:var(--font-mono);font-size:13px;color:var(--text-secondary);font-variant-numeric:tabular-nums}.size-slider{width:100%;accent-color:var(--accent);cursor:pointer}.size-slider:disabled{opacity:.5;cursor:not-allowed}.caption-hint{font-size:13px;color:var(--text-secondary);padding:12px 16px;background:var(--bg-card);border:1px dashed var(--border-strong);border-radius:var(--radius-md);animation:fadeIn .3s ease}.caption-hint strong{color:var(--accent)}.generate-card{display:flex;flex-direction:column;gap:14px;padding:18px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}.speed-row{display:flex}.speed-seg{width:100%}.section-hint{font-size:12px;color:var(--text-secondary);line-height:1.45}.end-toggle{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color .25s ease,background .25s ease}.end-toggle:hover{border-color:var(--border-strong);background:var(--bg-card-hover)}.end-toggle.disabled{opacity:.6;cursor:not-allowed}.end-toggle input{position:absolute;opacity:0;width:0;height:0}.end-toggle-box{flex-shrink:0;width:20px;height:20px;border-radius:6px;border:2px solid var(--border-strong);background:var(--bg-card);display:flex;align-items:center;justify-content:center;transition:all .2s ease}.end-toggle input:checked+.end-toggle-box{background:var(--gradient-btn);border-color:transparent;box-shadow:0 0 12px var(--accent-glow)}.end-toggle input:checked+.end-toggle-box:after{content:"";width:9px;height:5px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}.end-toggle input:focus-visible+.end-toggle-box{outline:2px solid var(--accent);outline-offset:2px}.end-toggle-text{font-size:13px;color:var(--text-primary);line-height:1.4}.generate-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px 32px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-secondary);color:var(--text-muted);font-size:17px;font-weight:700;cursor:not-allowed;transition:all .3s ease;letter-spacing:.4px}.generate-btn.ready{background:var(--gradient-btn);color:#fff;border-color:transparent;cursor:pointer;box-shadow:0 4px 24px var(--accent-glow)}.generate-btn.ready:hover{background:var(--gradient-btn-hover);transform:translateY(-2px);box-shadow:0 8px 36px var(--accent-glow)}.generate-btn.ready:active{transform:translateY(0)}.generate-btn.generating{background:var(--bg-secondary);color:var(--accent);border-color:var(--accent);cursor:wait}.btn-icon{font-size:19px}@media(max-width:640px){.generate-btn{position:sticky;bottom:12px;z-index:5}}.spinner{width:18px;height:18px;border:2px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.progress-wrap{display:flex;align-items:center;gap:12px}.progress-bar{flex:1;height:6px;background:var(--bg-secondary);border-radius:10px;overflow:hidden;border:1px solid var(--border)}.progress-fill{height:100%;background:var(--gradient-btn);border-radius:10px;transition:width .3s ease;box-shadow:0 0 12px var(--accent-glow)}.progress-label{font-family:var(--font-mono);font-size:13px;color:var(--text-secondary);min-width:40px;text-align:right;font-variant-numeric:tabular-nums}.error-msg{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#ff00551a;border:1px solid rgba(255,0,85,.3);border-radius:var(--radius-sm);color:#f48;font-size:13px;animation:fadeIn .3s ease}.result-section{animation:slideUp .5s ease}.result-card{display:flex;flex-direction:column;gap:14px;padding:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}.video-wrapper{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);box-shadow:0 8px 32px #00000080;background:#000}.video-player{width:100%;display:block;max-height:70vh}.result-actions{display:flex;gap:10px}@media(max-width:400px){.result-actions{flex-direction:column}}.action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.action-btn.download{background:var(--gradient-btn);color:#fff;box-shadow:0 4px 18px var(--accent-glow)}.action-btn.download:hover{background:var(--gradient-btn-hover);transform:translateY(-1px)}.action-btn.share{background:var(--gold-dim);color:var(--gold);border:1px solid rgba(255,215,0,.3)}.action-btn.share:hover{background:#ffd70038;transform:translateY(-1px)}.result-tip{text-align:center;font-size:12px;color:var(--text-muted)}.share-socials{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:10px}.share-socials-label{font-size:12px;color:var(--text-muted)}.share-socials-row{display:flex;gap:8px}.social-btn{width:38px;height:38px;border-radius:50%;border:none;font-size:11px;font-weight:700;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;color:#fff}.social-btn:hover{transform:translateY(-2px);filter:brightness(1.15)}.social-btn.whatsapp{background:#25d366}.social-btn.instagram{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}.social-btn.tiktok{background:#010101}.social-btn.facebook{background:#1877f2}.social-btn.x{background:#000}.tips{display:flex;flex-direction:column;gap:8px;padding:16px 18px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);font-size:12.5px;color:var(--text-secondary);line-height:1.6}.tips strong{color:var(--accent)}.footer{margin-top:40px;padding-top:20px;border-top:1px solid var(--border);text-align:center}.footer p{font-size:11px;color:var(--text-muted)}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes blink{0%,to{opacity:.3}50%{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}