*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.App,body{min-height:100vh}.App{display:flex;flex-direction:column;margin:0 auto;max-width:900px;padding:20px}.app-header{color:#fff;margin-bottom:40px;padding-top:20px;position:relative;text-align:center}.app-header h1{font-size:3.5em;margin-bottom:10px;text-shadow:2px 2px 4px #0000004d}.app-header p{font-size:1.3em;margin-bottom:15px;opacity:.95}.free-badge{background:#2ecc7133;border:2px solid #2ecc7180;border-radius:20px;display:inline-block;font-size:1em!important;font-weight:600;margin-top:10px;padding:8px 20px}.api-key-toggle{background:#fff3;border:2px solid #ffffff4d;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:10px 20px;transition:all .3s}.api-key-toggle:hover{background:#ffffff4d;transform:translateY(-2px)}.container{background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;flex-grow:1;padding:40px}.input-section{margin-bottom:30px}.prompt-input{border:2px solid #e0e0e0;border-radius:12px;font-size:16px;margin-bottom:20px;padding:18px;transition:border-color .3s,box-shadow .3s;width:100%}.prompt-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.prompt-input:disabled{background-color:#f5f5f5;cursor:not-allowed}.checkbox-label{align-items:center;cursor:pointer;display:flex;margin-bottom:25px;-webkit-user-select:none;user-select:none}.checkbox-label input[type=checkbox]{cursor:pointer;height:18px;margin-right:12px;width:18px}.checkbox-label input[type=checkbox]:disabled{cursor:not-allowed}.checkbox-label span{color:#333;font-size:15px}.download-button,.generate-button{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;color:#fff;cursor:pointer;display:flex;font-size:18px;font-weight:700;gap:10px;justify-content:center;padding:18px;transition:transform .2s,box-shadow .3s;width:100%}.download-button:hover,.generate-button:hover:not(:disabled){box-shadow:0 8px 25px #667eea66;transform:translateY(-2px)}.generate-button:disabled{cursor:not-allowed;opacity:.7;transform:none}.download-button:active,.generate-button:active:not(:disabled){transform:translateY(0)}.spinner{animation:spin .8s linear infinite;border:3px solid #ffffff4d;border-radius:50%;border-top-color:#fff;height:20px;width:20px}@keyframes spin{to{transform:rotate(1turn)}}.error-message{background-color:#fee;border:2px solid #fcc;border-radius:8px;color:#c33;font-weight:500;margin-top:20px;padding:15px}.preview-section{animation:fadeIn .5s ease-in;border-top:2px solid #e0e0e0;margin-top:40px;padding-top:40px}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.preview-section h2{color:#333;font-size:2em;margin-bottom:25px;text-align:center}.video-container{border-radius:12px;box-shadow:0 4px 15px #0000001a;margin-bottom:25px;overflow:hidden}.video-player{background:#000;display:block;max-height:500px;width:100%}.captions-section{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-radius:12px;box-shadow:0 2px 10px #0000000d;margin-bottom:25px;padding:25px}.captions-section h3{color:#333;font-size:1.3em;margin-bottom:15px}.captions-text{color:#444;font-size:16px;font-style:italic;line-height:1.8}.download-section{text-align:center}.download-button{background:linear-gradient(135deg,#2ecc71,#27ae60);font-size:20px;margin:0 auto;max-width:400px;padding:18px 40px}.download-button:hover{box-shadow:0 8px 25px #2ecc7166}.download-hint{color:#666;font-size:14px;margin-top:15px}.api-key-section{background:linear-gradient(135deg,#667eea15,#764ba215);border:2px solid #667eea30;border-radius:12px;margin-bottom:30px;padding:25px}.api-key-section h3{color:#333;margin-bottom:10px}.api-info{color:#666;line-height:1.6;margin-bottom:15px}.api-info a{color:#667eea;font-weight:600;text-decoration:none}.api-info a:hover{text-decoration:underline}.api-info small{color:#27ae60;font-weight:600}.api-key-input-group{display:flex;gap:10px}.api-key-input{border:2px solid #e0e0e0;border-radius:8px;flex:1 1;font-family:monospace;font-size:14px;padding:12px}.api-key-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.save-key-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:12px 24px;transition:transform .2s}.save-key-button:hover{transform:translateY(-2px)}.script-text{background:#fff;border:2px solid #e0e0e0;border-radius:8px;color:#333;line-height:1.8;margin-bottom:20px;padding:20px;white-space:pre-wrap}.audio-controls{display:flex;gap:15px;justify-content:center;margin-bottom:20px}.narration-button{border:none;border-radius:8px;cursor:pointer;font-size:16px;font-weight:600;padding:12px 24px;transition:all .3s}.narration-button.play{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff}.narration-button.stop{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff}.narration-button:hover{box-shadow:0 5px 15px #0003;transform:translateY(-2px)}.video-credit{color:#666;font-size:14px;margin-top:10px;text-align:center}.video-credit a{color:#667eea;text-decoration:none}.video-credit a:hover{text-decoration:underline}.progress-container{background:#f0f0f0;border-radius:20px;box-shadow:inset 0 2px 4px #0000001a;height:40px;margin-top:20px;overflow:hidden;position:relative;width:100%}.progress-bar{animation:shimmer 2s infinite;background:linear-gradient(90deg,#667eea,#764ba2 50%,#667eea);background-size:200% 100%;border-radius:20px;height:100%;transition:width .3s ease}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.progress-text{color:#333;font-weight:700;left:50%;position:absolute;text-shadow:0 0 3px #fff;top:50%;transform:translate(-50%,-50%)}.video-player{border-radius:12px;box-shadow:0 4px 20px #0003}.video-info{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);border-radius:8px;color:#2e7d32;font-weight:600;margin-top:15px;padding:15px;text-align:center}.download-button.secondary{background:linear-gradient(135deg,#95a5a6,#7f8c8d);margin-top:15px}.download-button.secondary:hover{box-shadow:0 5px 15px #7f8c8d66}.background-selector{background:linear-gradient(135deg,#667eea15,#764ba215);border:2px solid #667eea30;border-radius:12px;margin-bottom:20px;padding:20px}.background-selector label{color:#333;display:block;font-size:16px;font-weight:600;margin-bottom:10px}.background-select{background:#fff;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;font-size:16px;padding:15px;transition:border-color .3s;width:100%}.background-select:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.background-select:disabled{background-color:#f5f5f5;cursor:not-allowed}.vertical-video{box-shadow:0 8px 32px #0000004d;display:block;margin:0 auto;max-width:400px}.app-footer{color:#fff;margin-top:40px;opacity:.9;padding:30px 20px;text-align:center}.app-footer p{font-size:14px}@media (max-width:768px){.App{padding:10px}.app-header h1{font-size:2.5em}.app-header p{font-size:1.1em}.container{border-radius:12px;padding:25px}.prompt-input{font-size:14px;padding:15px}.download-button,.generate-button{font-size:16px;padding:15px}.preview-section h2{font-size:1.5em}.captions-section{padding:20px}.captions-section h3{font-size:1.1em}}@media (max-width:480px){.app-header h1{font-size:2em}.container{padding:20px}.generate-button{font-size:14px}.download-button{font-size:16px;padding:15px 20px}}.info-box{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);border:2px solid #4caf5030;border-radius:12px;margin-bottom:25px;padding:20px}.info-box h3{color:#2e7d32;font-size:1.2em;margin-bottom:15px}.info-box p{color:#333;line-height:1.6;margin:8px 0}.story-preview{animation:fadeIn .5s ease-in;background:linear-gradient(135deg,#fff3e0,#ffe0b2);border:2px solid #ff980030;border-radius:12px;margin-top:20px;padding:20px}.story-preview h4{color:#e65100;font-size:1.1em;margin-bottom:15px}.story-subreddit{background:#ff9800;border-radius:15px;color:#fff;display:inline-block;font-size:.9em;font-weight:600;margin-bottom:10px;padding:5px 12px}.story-title{color:#333;font-weight:600;line-height:1.6}.reddit-info{background:linear-gradient(135deg,#fff3e0,#ffe0b2);border:2px solid #ff980030;border-radius:12px;margin-bottom:25px;padding:20px}.reddit-badge{background:#ff9800;border-radius:15px;color:#fff;display:inline-block;font-size:.9em;font-weight:600;margin-bottom:10px;padding:5px 12px}.reddit-info h4{color:#333;font-weight:600;line-height:1.5;margin:10px 0 15px}.reddit-info a{color:#ff6f00;font-weight:600;text-decoration:none;transition:color .3s}.reddit-info a:hover{color:#e65100;text-decoration:underline}