@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap);:root{--primary-gradient:linear-gradient(135deg,#232526,#414345);--secondary-gradient:linear-gradient(135deg,#434343,#000);--accent-gradient:linear-gradient(135deg,#232526,#4f4f4f);--success-gradient:linear-gradient(135deg,#43e97b,#1e2a22);--warning-gradient:linear-gradient(135deg,#fa709a,#232526);--premium-gradient:linear-gradient(135deg,gold,#232526);--dark-gradient:linear-gradient(135deg,#232526,#232526);--youtube-gradient:linear-gradient(135deg,red,#232526);--primary-color:#232526;--secondary-color:#434343;--accent-color:#4f4f4f;--success-color:#43e97b;--warning-color:#fa709a;--error-color:#ff6b6b;--premium-color:gold;--youtube-red:red;--text-primary:#e0e0e0;--text-secondary:#b0b0b0;--text-muted:#888;--text-light:#f5f5f5;--text-white:#fff;--text-dark:#232526;--text-premium:gold;--bg-white:#232526;--bg-light:#2c2c2c;--bg-dark:#232526;--bg-darker:#181818;--bg-overlay:#2c2c2cd9;--bg-overlay-dark:#222222d9;--bg-overlay-strong:#222222f2;--bg-glass:#2c2c2cb3;--bg-glass-dark:#222c;--spacing-xs:0.5rem;--spacing-sm:1rem;--spacing-md:1.5rem;--spacing-lg:2rem;--spacing-xl:3rem;--spacing-xxl:4rem;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:30px;--radius-round:50px;--shadow-sm:0 2px 8px #0000001a;--shadow-md:0 4px 15px #00000026;--shadow-lg:0 10px 25px #0003;--shadow-xl:0 20px 40px #00000040;--shadow-premium:0 8px 32px #ffd7004d;--shadow-youtube:0 4px 20px #ff00004d;--shadow-glow:0 0 20px #667eea66;--transition-fast:0.15s cubic-bezier(0.4,0,0.2,1);--transition-normal:0.25s cubic-bezier(0.4,0,0.2,1);--transition-slow:0.35s cubic-bezier(0.4,0,0.2,1);--transition-bounce:0.5s cubic-bezier(0.68,-0.55,0.265,1.55);--font-family:"Inter","Segoe UI","Roboto",sans-serif;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:2rem;--font-size-4xl:2.5rem;--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:1050;--z-popover:1060;--z-tooltip:1070}*{box-sizing:border-box;margin:0;padding:0}body{color:#e0e0e0;color:var(--text-primary);font-family:Inter,Segoe UI,Roboto,sans-serif;font-family:var(--font-family);line-height:1.6}.gradient-text{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#232526,#414345);background:var(--primary-gradient);-webkit-background-clip:text;background-clip:text}.glass-effect{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#2c2c2cd9;background:var(--bg-overlay);border:1px solid #fff3}.gradient-text-premium{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,gold,#232526);background:var(--premium-gradient);-webkit-background-clip:text;background-clip:text}.gradient-text-youtube{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,red,#232526);background:var(--youtube-gradient);-webkit-background-clip:text;background-clip:text}.glass-effect-dark{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#222c;background:var(--bg-glass-dark);border:1px solid #ffffff1a}.glass-effect-strong{-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);background:#222222f2;background:var(--bg-overlay-strong);border:1px solid #ffffff4d}.shadow-glow{box-shadow:0 0 20px #667eea66;box-shadow:var(--shadow-glow)}.shadow-premium{box-shadow:0 8px 32px #ffd7004d;box-shadow:var(--shadow-premium)}.shadow-youtube{box-shadow:0 4px 20px #ff00004d;box-shadow:var(--shadow-youtube)}.profile-picture{border:2px solid #ffffff4d;border-radius:50%;transition:all .25s cubic-bezier(.4,0,.2,1);transition:all var(--transition-normal)}.profile-picture:hover{border-color:#232526;border-color:var(--primary-color);box-shadow:0 0 20px #667eea66;box-shadow:var(--shadow-glow);transform:scale(1.05)}.profile-picture-youtube{border:2px solid red;border:2px solid var(--youtube-red)}.profile-picture-youtube,.youtube-badge{box-shadow:0 4px 20px #ff00004d;box-shadow:var(--shadow-youtube)}.youtube-badge{background:linear-gradient(135deg,red,#232526);background:var(--youtube-gradient);border-radius:50px;border-radius:var(--radius-round);color:#fff;font-size:.75rem;font-size:var(--font-size-xs);font-weight:600;letter-spacing:.5px;padding:2px 8px;text-transform:uppercase}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes glow{0%{box-shadow:0 0 5px #232526;box-shadow:0 0 5px var(--primary-color)}to{box-shadow:0 0 20px #232526,0 0 30px #232526;box-shadow:0 0 20px var(--primary-color),0 0 30px var(--primary-color)}}@keyframes shimmer{0%{left:-100%}to{left:100%}}@keyframes backgroundShift{0%,to{filter:hue-rotate(0deg)}25%{filter:hue-rotate(90deg)}50%{filter:hue-rotate(180deg)}75%{filter:hue-rotate(270deg)}}.animate-fade-in{animation:fadeIn .6s cubic-bezier(.4,0,.2,1) .25s;animation:fadeIn .6s var(--transition-normal)}.animate-slide-up{animation:slideUp .6s cubic-bezier(.4,0,.2,1) .25s;animation:slideUp .6s var(--transition-normal)}.animate-bounce-in{animation:bounceIn .8s cubic-bezier(.68,-.55,.265,1.55) .5s;animation:bounceIn .8s var(--transition-bounce)}.animate-glow{animation:glow 2s ease-in-out infinite alternate}.mobile-hidden{display:block}.mobile-only{display:none}@media (max-width:1200px){:root{--font-size-4xl:2rem;--font-size-3xl:1.75rem;--spacing-xxl:3rem}}@media (max-width:768px){:root{--font-size-4xl:1.75rem;--font-size-3xl:1.5rem;--font-size-2xl:1.25rem;--spacing-xxl:2rem;--spacing-xl:2rem}.mobile-hidden{display:none!important}.mobile-only{display:block!important}}@media (max-width:480px){:root{--font-size-4xl:1.5rem;--spacing-lg:1rem;--spacing-xl:1.5rem}}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.audio-player{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;gap:8px;padding:12px}.audio-error{background:#fee;border:1px solid #fcc;border-radius:4px;color:#c33;font-size:14px;gap:8px;padding:8px 12px}.audio-controls,.audio-error{align-items:center;display:flex}.audio-controls{gap:12px}.play-button{align-items:center;background:#007bff;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:16px;height:40px;justify-content:center;transition:all .2s ease;width:40px}.play-button:hover:not(:disabled){background:#0056b3;transform:scale(1.05)}.play-button:disabled{cursor:not-allowed;opacity:.6;transform:none}.loading-spinner{animation:spin 1s linear infinite;font-size:18px}.progress-container{align-items:center;display:flex;flex:1 1;gap:12px}.progress-bar{background:#e9ecef;border-radius:3px;cursor:pointer;flex:1 1;height:6px;min-width:100px;position:relative}.progress-fill{background:linear-gradient(90deg,#007bff,#0056b3);border-radius:3px;height:100%;transition:width .1s ease}.progress-handle{background:#007bff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px #0003;height:14px;position:absolute;top:50%;transform:translate(-50%,-50%);transition:left .1s ease;width:14px}.progress-bar:hover .progress-handle{height:16px;width:16px}.time-display{font-feature-settings:"tnum";align-items:center;color:#6c757d;display:flex;font-size:12px;font-variant-numeric:tabular-nums;gap:4px;min-width:80px}.time-separator{color:#adb5bd}.volume-control{align-items:center;display:flex;gap:8px}.volume-icon{color:#6c757d;font-size:14px}.volume-slider{appearance:none;background:#e9ecef;border-radius:2px;cursor:pointer;height:4px;outline:none;width:60px}.volume-slider::-webkit-slider-thumb{appearance:none;background:#007bff;border-radius:50%;box-shadow:0 1px 3px #0003;cursor:pointer;height:12px;width:12px}.volume-slider::-moz-range-thumb{background:#007bff;border:none;border-radius:50%;box-shadow:0 1px 3px #0003;cursor:pointer;height:12px;width:12px}.audio-comment-info{background:#fff;border-left:3px solid #007bff;border-radius:4px;margin-top:8px;padding:8px}.comment-preview{color:#495057;font-size:13px;font-style:italic}.audio-player.compact{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#f8f9faf2;padding:8px}.audio-player.compact .audio-controls{gap:8px}.audio-player.compact .play-button{font-size:14px;height:32px;width:32px}.audio-player.compact .progress-container{gap:8px}.audio-player.compact .time-display{font-size:11px;min-width:70px}.audio-player.compact .volume-control{gap:6px}.audio-player.compact .volume-slider{width:50px}.audio-player.dark{background:#343a40;border-color:#495057}.audio-player.dark .progress-bar{background:#495057}.audio-player.dark .time-display,.audio-player.dark .volume-icon{color:#adb5bd}.audio-player.dark .audio-comment-info{background:#495057;border-left-color:#007bff}.audio-player.dark .comment-preview{color:#ced4da}@media (max-width:480px){.audio-player{padding:8px}.audio-controls{gap:8px}.volume-control{display:none}.time-display{font-size:11px;min-width:60px}}.audio-player button:focus,.progress-bar:focus,.volume-slider:focus{outline:2px solid #007bff;outline-offset:2px}.play-button.loading{animation:pulse 1.5s ease-in-out infinite}.tts-controls{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;padding:16px}.tts-actions{gap:12px;margin-bottom:12px}.generate-button,.tts-actions{align-items:center;display:flex}.generate-button{background:linear-gradient(135deg,#007bff,#0056b3);border:none;border-radius:8px;box-shadow:0 2px 4px #007bff33;color:#fff;cursor:pointer;font-size:14px;font-weight:500;gap:8px;padding:10px 16px;transition:all .2s ease}.generate-button:hover:not(:disabled){background:linear-gradient(135deg,#0056b3,#004085);box-shadow:0 4px 8px #007bff4d;transform:translateY(-1px)}.generate-button:disabled{box-shadow:none;cursor:not-allowed;opacity:.6;transform:none}.button-icon{font-size:16px}.button-text{font-size:14px}.generating-status{align-items:center;background:#6c757d;border-radius:8px;color:#fff;display:flex;font-size:14px;gap:8px;padding:10px 16px}.generating-spinner{animation:spin 1s linear infinite;font-size:16px}.generating-text{font-size:14px}.audio-ready{gap:12px}.audio-info,.audio-ready{align-items:center;display:flex;flex:1 1}.audio-info{gap:8px}.audio-icon{color:#28a745;font-size:16px}.audio-meta{color:#6c757d;font-size:13px;font-weight:500}.clear-button,.regenerate-button{align-items:center;border:none;border-radius:6px;cursor:pointer;display:flex;font-size:14px;height:32px;justify-content:center;transition:all .2s ease;width:32px}.regenerate-button{background:#ffc107;color:#212529}.regenerate-button:hover{background:#e0a800;transform:scale(1.05)}.clear-button{background:#dc3545;color:#fff}.clear-button:hover{background:#c82333;transform:scale(1.05)}.tts-error{align-items:center;background:#fee;border:1px solid #fcc;border-radius:6px;color:#c33;display:flex;font-size:14px;gap:8px;margin-bottom:12px;padding:12px}.error-icon{color:#dc3545;font-size:16px}.error-text{flex:1 1;font-size:13px}.retry-button{background:#dc3545;border-radius:4px;font-size:12px;padding:4px 8px}.retry-button:hover{background:#c82333}.tts-player{margin:12px 0;padding:12px}.comment-preview,.tts-player{background:#fff;border:1px solid #dee2e6;border-radius:6px}.comment-preview{display:flex;gap:8px;margin-top:8px;padding:8px 12px}.preview-label{color:#6c757d;flex-shrink:0;font-size:12px;font-weight:600}.preview-text{color:#495057;font-size:12px;font-style:italic;line-height:1.4}.tts-controls.compact{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#f8f9faf2;padding:12px}.tts-controls.compact .tts-actions{gap:8px;margin-bottom:8px}.tts-controls.compact .generate-button,.tts-controls.compact .generating-status{font-size:13px;padding:8px 12px}.tts-controls.compact .audio-meta{font-size:12px}.tts-controls.compact .clear-button,.tts-controls.compact .regenerate-button{font-size:12px;height:28px;width:28px}.tts-controls.compact .comment-preview{margin-top:6px;padding:6px 8px}.tts-controls.compact .preview-label,.tts-controls.compact .preview-text{font-size:11px}.tts-controls.dark{background:#343a40;border-color:#495057}.tts-controls.dark .comment-preview,.tts-controls.dark .tts-player{background:#495057;border-color:#6c757d}.tts-controls.dark .preview-label{color:#adb5bd}.tts-controls.dark .preview-text{color:#ced4da}.tts-controls.dark .audio-meta{color:#adb5bd}@media (max-width:480px){.tts-controls{padding:12px}.audio-ready,.tts-actions{align-items:stretch;flex-direction:column;gap:8px}.audio-info{justify-content:center}.generate-button,.generating-status{justify-content:center;padding:12px}.comment-preview{flex-direction:column;gap:4px}}.audio-ready{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.generating-status{animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 #6c757d66}70%{box-shadow:0 0 0 10px #6c757d00}to{box-shadow:0 0 0 0 #6c757d00}}.clear-button:focus,.generate-button:focus,.regenerate-button:focus,.retry-button:focus{outline:2px solid #007bff;outline-offset:2px}.overlay-container{background:#0000;color:var(--text-light);font-family:var(--font-family);min-height:100vh;padding:var(--spacing-lg);position:relative}.overlay-header{align-items:center;animation:fadeInUp .8s var(--transition-normal);-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);background:var(--bg-glass-dark);border:2px solid #ffd70099;border-radius:var(--radius-lg);box-shadow:var(--shadow-premium);display:flex;justify-content:space-between;margin-bottom:var(--spacing-lg);padding:var(--spacing-md) var(--spacing-lg)}.overlay-tts-controls{align-items:center;display:flex;gap:10px}.tts-toggle{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--bg-glass);border:1px solid #ffffff4d;border-radius:var(--radius-round);color:var(--text-light);cursor:pointer;font-size:var(--font-size-sm);font-weight:600;padding:8px 16px;text-shadow:1px 1px 2px #000c;transition:all var(--transition-normal)}.tts-toggle.active{background:var(--accent-gradient);border-color:var(--accent-color)}.tts-toggle.active,.tts-toggle:hover{box-shadow:var(--shadow-glow);transform:scale(1.05)}.tts-toggle:hover{background:var(--primary-gradient)}.overlay-title{-webkit-text-fill-color:#0000;background:var(--premium-gradient);-webkit-background-clip:text;background-clip:text;font-size:var(--font-size-2xl);font-weight:700;text-shadow:2px 2px 8px #000c}.stats{animation:pulse 2s ease-in-out infinite;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:var(--bg-glass);border:1px solid #ffd70080;border-radius:var(--radius-round);box-shadow:var(--shadow-premium);font-size:var(--font-size-sm);font-weight:600;padding:var(--spacing-sm) var(--spacing-md)}.comments-stream{display:flex;flex-direction:column;gap:20px;max-height:70vh;overflow-y:auto;scrollbar-color:#ffffff4d #0000;scrollbar-width:thin}.comment-card{animation:fadeInUp .6s var(--transition-normal);-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);background:var(--bg-glass-strong);border:2px solid #ffd70099;border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);margin-bottom:var(--spacing-md);overflow:hidden;padding:var(--spacing-lg);position:relative;transition:all var(--transition-normal)}.comment-card:before{background:var(--premium-gradient);content:"";height:2px;left:-100%;position:absolute;top:0;transition:left var(--transition-slow);width:100%}.comment-card:hover:before{left:0}.comment-card:hover{animation:glow 2s ease-in-out infinite alternate;border-color:#ffd700e6;box-shadow:var(--shadow-premium);transform:translateY(-4px)}.comment-header{margin-bottom:15px}.user-info{gap:var(--spacing-md);position:relative}.comment-avatar{border:3px solid #fff6;border-radius:50%;box-shadow:var(--shadow-md);height:50px;object-fit:cover;position:relative;transition:all var(--transition-normal);width:50px}.comment-avatar:hover{border-color:var(--accent-color);box-shadow:var(--shadow-glow);transform:scale(1.1)}.comment-avatar.youtube-verified{border:3px solid var(--youtube-red);box-shadow:var(--shadow-youtube)}.comment-avatar.youtube-verified:after{align-items:center;background:var(--youtube-red);border:2px solid #fff;border-radius:50%;bottom:-2px;color:#fff;content:"✓";display:flex;font-size:10px;font-weight:700;height:18px;justify-content:center;position:absolute;right:-2px;width:18px}.username{-webkit-text-fill-color:#0000;background:var(--primary-gradient);-webkit-background-clip:text;background-clip:text;font-size:var(--font-size-lg);position:relative}.username.youtube-user{-webkit-text-fill-color:#0000;background:var(--youtube-gradient);-webkit-background-clip:text;background-clip:text}.username.youtube-user:after{background:var(--youtube-red);border-radius:var(--radius-sm);color:#fff;content:"YT";font-size:8px;font-weight:600;padding:2px 6px;position:absolute;right:-20px;top:-5px}.comment-meta{align-items:flex-end;display:flex;flex-direction:column;gap:5px}.tip-amount{animation:bounceIn .8s var(--transition-bounce);background:var(--premium-gradient);border-radius:var(--radius-lg);box-shadow:var(--shadow-premium);color:var(--text-dark);font-size:var(--font-size-sm);font-weight:700;padding:var(--spacing-sm) var(--spacing-md);text-shadow:none}.timestamp{color:var(--text-muted);font-size:var(--font-size-xs);font-weight:500;opacity:.7}.tts-indicator{animation:pulse 2s infinite;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;box-shadow:0 2px 8px #667eea4d;color:#fff;font-size:11px;font-weight:600;padding:4px 8px;text-shadow:1px 1px 2px #00000080}.comment-text{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--bg-glass);border:1px solid #ffffff1a;border-left:4px solid var(--premium-color);border-radius:var(--radius-md);font-size:var(--font-size-lg);line-height:1.6;margin-top:var(--spacing-sm);padding:var(--spacing-md)}.comment-card.youtube-comment{background:linear-gradient(135deg,var(--bg-glass-strong) 0,#ff00000d 100%);border-left:4px solid var(--youtube-red)}.comment-card.youtube-comment .comment-text{background:#ff00000d;border-left-color:var(--youtube-red)}.no-comments{animation:pulse 3s ease-in-out infinite;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--bg-glass-dark);border:2px dashed #ffd70066;border-radius:var(--radius-xl);padding:var(--spacing-xxl) var(--spacing-lg)}.no-comments p{-webkit-text-fill-color:#0000;background:var(--premium-gradient);-webkit-background-clip:text;background-clip:text;font-size:var(--font-size-xl);margin:0 0 var(--spacing-sm) 0;text-shadow:2px 2px 4px #000c}.overlay-note{color:var(--premium-color);font-size:var(--font-size-sm)!important;font-style:italic;opacity:.8;text-shadow:1px 1px 2px #0009}.error{animation:bounceIn .6s var(--transition-bounce);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:var(--bg-glass-dark);border:2px solid #ff6b6b99;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);color:var(--error-color);margin-bottom:var(--spacing-lg);padding:var(--spacing-md)}.fade-in{animation:fadeInUp .8s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.comments-stream::-webkit-scrollbar{width:8px}.comments-stream::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}.comments-stream::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.comments-stream::-webkit-scrollbar-thumb:hover{background:#ffffff80}.comment-audio{background:#007bff1a;border:1px solid #007bff4d;border-radius:8px;margin-top:12px;padding:8px}.overlay-audio{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#0000004d!important;border:1px solid #fff3!important}.overlay-audio .audio-controls{gap:8px}.overlay-audio .play-button{background:#007bffcc;box-shadow:0 0 8px #007bff66}.overlay-audio .progress-bar{background:#fff3}.overlay-audio .progress-fill{background:linear-gradient(90deg,#007bffcc,#0056b3cc)}.overlay-audio .time-display{color:#fffc;text-shadow:1px 1px 2px #000c}.overlay-audio .volume-icon{color:#fffc}.comment-tts-controls{margin-top:8px}.overlay-tts{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#0000004d!important;border:1px solid #fff3!important;padding:8px!important}.overlay-tts .generate-button{background:#007bffcc;box-shadow:0 0 8px #007bff66;font-size:12px;padding:6px 10px}.overlay-tts .generating-status{background:#6c757dcc;font-size:12px;padding:6px 10px}.overlay-tts .comment-preview{background:#0000004d;border:1px solid #fff3;margin-top:6px}.overlay-tts .preview-label,.overlay-tts .preview-text{color:#fffc;text-shadow:1px 1px 2px #000c}.tts-note{color:#007bffcc;font-size:.9rem;margin:5px 0;text-shadow:1px 1px 2px #000c}@media (max-width:768px){.overlay-tts-controls{margin-left:10px}.tts-toggle{font-size:11px;padding:4px 8px}.comment-audio{margin-top:8px;padding:6px}.overlay-audio .audio-controls{gap:6px}}.comment-audio{animation:audioFadeIn .3s ease-out}@keyframes audioFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.overlay-audio.playing{animation:audioPulse 2s ease-in-out infinite;box-shadow:0 0 15px #007bff99}@keyframes audioPulse{0%,to{box-shadow:0 0 15px #007bff99}50%{box-shadow:0 0 25px #007bffcc}}@media (max-width:768px){.overlay-container{padding:15px}.overlay-header{flex-direction:column;gap:15px;text-align:center}.overlay-header h2{font-size:1.5rem}.comment-header{align-items:flex-start;flex-direction:column;gap:10px}.comment-meta{align-items:flex-start;flex-direction:row;gap:15px}}.creator-guide{background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;font-family:Arial,sans-serif;min-height:100vh;padding:20px}.guide-container{margin:0 auto;max-width:1000px;padding:40px 20px}.creator-guide h1{font-size:3rem;margin-bottom:10px;text-align:center;text-shadow:2px 2px 4px #0000004d}.subtitle{font-size:1.2rem;margin-bottom:50px;opacity:.9;text-align:center}.section{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:20px;margin-bottom:30px;padding:30px}.section h2{border-bottom:2px solid #3498db4d;color:#3498db;font-size:2rem;margin-bottom:25px;padding-bottom:10px}.steps{display:flex;flex-direction:column;gap:25px}.step{align-items:flex-start;background:#ffffff0d;border-left:4px solid #3498db;border-radius:15px;display:flex;gap:20px;padding:25px}.step-number{align-items:center;background:linear-gradient(45deg,#3498db,#2980b9);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:1.2rem;font-weight:700;height:40px;justify-content:center;width:40px}.step-content h3{color:#ecf0f1;font-size:1.3rem;margin:0 0 10px}.step-content p{line-height:1.6;margin:0 0 15px;opacity:.9}.step-content ul{margin:0;padding-left:20px}.step-content li{line-height:1.5;margin-bottom:8px}.url-section{align-items:center;display:flex;flex-wrap:wrap;gap:15px;margin:15px 0}.url-input{background:#ffffffe6;color:#2c3e50;flex:1 1;font-family:monospace;min-width:300px;padding:12px 15px}.copy-button,.url-input{border:none;border-radius:8px;font-size:1rem}.copy-button{background:linear-gradient(45deg,#27ae60,#2ecc71);color:#fff;cursor:pointer;font-weight:700;padding:12px 20px;transition:all .3s ease;white-space:nowrap}.copy-button:hover{box-shadow:0 4px 15px #27ae604d;transform:translateY(-2px)}.info-cards{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:25px}.info-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:15px;padding:25px;text-align:center;transition:all .3s ease}.info-card:hover{background:#ffffff1a;transform:translateY(-5px)}.card-icon{font-size:3rem;margin-bottom:15px}.info-card h3{color:#3498db;font-size:1.3rem;margin:0 0 15px}.info-card p{line-height:1.6;margin:0;opacity:.9}.advanced-settings{display:flex;flex-direction:column;gap:25px}.setting-group{background:#ffffff0d;border-left:4px solid #e74c3c;border-radius:12px;padding:20px}.setting-group h3{color:#e74c3c;font-size:1.2rem;margin:0 0 15px}.setting-group p{line-height:1.6;margin:0 0 10px;opacity:.9}.setting-group ul{margin:10px 0 0;padding-left:20px}.setting-group li{line-height:1.5;margin-bottom:8px}.test-section{background:#ffffff0d;border:2px dashed #ffffff4d;text-align:center}.test-link{background:linear-gradient(45deg,#9b59b6,#8e44ad);border-radius:25px;color:#fff;display:inline-block;font-size:1.1rem;font-weight:700;margin:15px 0;padding:15px 30px;text-decoration:none;transition:all .3s ease}.test-link:hover{box-shadow:0 6px 20px #9b59b666;transform:translateY(-2px)}.test-note{font-size:.9rem;font-style:italic;margin:15px 0 0;opacity:.8}.support-section{background:#ffffff0d;border-radius:15px;padding:25px;text-align:center}.support-options{display:flex;flex-wrap:wrap;gap:30px;justify-content:center;margin-top:20px}.support-option{background:#ffffff1a;border-radius:10px;font-size:1rem;padding:15px 25px}@media (max-width:768px){.creator-guide h1{font-size:2rem}.guide-container{padding:20px 10px}.section{padding:20px}.step{text-align:center}.step,.url-section{flex-direction:column}.url-input{min-width:auto;width:100%}.info-cards{grid-template-columns:1fr}.support-options{flex-direction:column;gap:15px}}.admin-panel{background:linear-gradient(135deg,#1e3c72,#2a5298);color:#fff;font-family:Arial,sans-serif;min-height:100vh;padding:20px}.admin-header{margin-bottom:30px;text-align:center}.admin-header-content{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1200px}.admin-header h1{font-size:2.5rem;margin-bottom:10px;text-shadow:2px 2px 4px #0000004d}.admin-header p{font-size:1.1rem;opacity:.9}.logout-btn{background:#ff3b3be6;border-radius:25px;font-size:.9rem;padding:10px 20px;transition:all .3s ease}.logout-btn:hover{background:#ff3b3b;box-shadow:0 4px 15px #ff3b3b66}.stat-card{transition:transform .3s ease}.stat-card h3{font-weight:400}.stat-number{color:gold;text-shadow:1px 1px 2px #00000080}.creator-section{align-items:center;background:#ffffff1a;border-radius:10px;display:flex;gap:15px;margin-bottom:20px;padding:20px}.creator-section label{font-size:1.1rem;font-weight:700}.creator-select{background:#fff3;border:1px solid #ffffff4d;border-radius:8px;color:#fff;font-size:1rem;min-width:300px;padding:10px 15px}.creator-select option{background:#2a5298;color:#fff}.session-id{font-size:.8rem;opacity:.6}.revenue-cell{color:gold}.delete-btn{background:#dc3545;border:none;border-radius:6px;cursor:pointer;font-size:.9rem;padding:8px 12px;transition:all .3s ease}.delete-btn:hover{background:#c82333;transform:scale(1.1)}.error{background:#dc354533;border:1px solid #dc354580;text-align:center}.no-comments{opacity:.8}.no-comments p{font-size:1.1rem;margin:10px 0}.quick-links h3{font-size:1.3rem;margin:0 0 20px}.link-card{background:#ffffff26;display:block;padding:20px}.link-card:hover{background:#ffffff40;transform:translateY(-3px)}@media (max-width:768px){.admin-panel{padding:15px}.admin-header h1{font-size:2rem}.stats-grid{gap:15px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.stat-card{padding:20px 15px}.stat-number{font-size:2rem}.creator-section{align-items:stretch;flex-direction:column;gap:10px}.creator-select{min-width:auto}.actions-section{flex-direction:column;gap:10px}.section-header{align-items:stretch;flex-direction:column}.comments-table{font-size:.9rem}.comments-table td,.comments-table th{padding:10px 8px}.comment-cell{max-width:200px}.links-grid{gap:10px;grid-template-columns:1fr}}input[type=checkbox]{accent-color:gold}.admin-tabs{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-radius:15px;display:flex;gap:10px;margin-bottom:30px;padding:5px}.tab-btn{background:#0000;border:none;border-radius:10px;color:#ffffffb3;cursor:pointer;flex:1 1;font-size:16px;font-weight:600;padding:15px 20px;transition:all .3s ease}.tab-btn:hover{background:#ffffff1a;color:#fff}.tab-btn.active{background:linear-gradient(135deg,gold,#ffed4e);box-shadow:0 4px 15px #ffd7004d;color:#1e3c72}.voice-management-section{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:25px}.voice-management-section h2{color:gold;margin-bottom:10px}.voice-management-section p{margin-bottom:25px;opacity:.9}.voice-data{grid-gap:30px;display:grid;gap:30px;grid-template-columns:1fr 2fr}.available-voices h3,.creator-permissions h3{border-bottom:2px solid #ffd7004d;color:gold;margin-bottom:15px;padding-bottom:10px}.voices-grid{grid-gap:15px;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.voice-card{background:#ffffff1a;border:1px solid #fff3;border-radius:10px;padding:15px;transition:all .3s ease}.voice-card:hover{background:#ffffff26;transform:translateY(-2px)}.voice-card h4{color:gold;font-size:1.1rem;margin:0 0 8px}.voice-card p{margin:0 0 8px;opacity:.8}.voice-card small{color:#fff9;font-family:monospace}.creators-list{display:flex;flex-direction:column;gap:20px}.creator-permission-card{background:#ffffff1a;border:1px solid #fff3;border-radius:12px;padding:20px}.creator-info{margin-bottom:15px}.creator-info h4{color:gold;font-size:1.2rem;margin:0 0 5px}.creator-info p{font-size:.9rem;margin:2px 0;opacity:.8}.permission-actions{display:flex;gap:10px}.cancel-btn,.edit-btn,.reset-btn,.save-btn{border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600;padding:8px 15px;transition:all .3s ease}.edit-btn{background:linear-gradient(135deg,#28a745,#20c997);color:#fff}.reset-btn{background:linear-gradient(135deg,#ffc107,#fd7e14);color:#fff}.save-btn{background:linear-gradient(135deg,#007bff,#6610f2);color:#fff}.cancel-btn{background:linear-gradient(135deg,#dc3545,#e83e8c);color:#fff}.cancel-btn:hover,.edit-btn:hover,.reset-btn:hover,.save-btn:hover{box-shadow:0 4px 15px #0003;transform:translateY(-2px)}.edit-permissions{background:#ffffff0d;border-radius:8px;margin-top:10px;padding:15px}.edit-permissions h5{color:gold;margin:0 0 10px}.voice-checkboxes{grid-gap:8px;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:15px}.voice-checkbox{align-items:center;background:#ffffff1a;border-radius:5px;display:flex;gap:8px;padding:5px;transition:background .2s ease}.voice-checkbox:hover{background:#fff3}.voice-checkbox input[type=checkbox]{transform:scale(1.2)}.edit-actions{display:flex;gap:10px;margin-top:15px}.users-management{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#ffffff1a;border:1px solid #fff3;border-radius:20px;padding:30px}.user-controls{align-items:center;display:flex;gap:20px;justify-content:space-between;margin-bottom:25px}.search-box{flex:1 1;max-width:400px}.search-input{background:#ffffffe6;border:none;border-radius:10px;color:#333;font-size:14px;outline:none;padding:12px 16px;transition:all .3s ease;width:100%}.search-input:focus{background:#fff;box-shadow:0 0 10px #ffffff4d}.filter-controls{display:flex;gap:10px}.filter-select{background:#ffffffe6;border:none;border-radius:8px;color:#333;cursor:pointer;font-size:14px;outline:none;padding:10px 15px;transition:all .3s ease}.filter-select:hover{background:#fff}.users-table-container{background:#fffffff2;border-radius:15px;box-shadow:0 10px 30px #0003;overflow:hidden}.users-table{border-collapse:collapse;color:#333;width:100%}.users-table th{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:14px;letter-spacing:.5px;padding:15px 12px;text-align:left;text-transform:uppercase}.users-table td{border-bottom:1px solid #eee;padding:15px 12px;vertical-align:middle}.user-row:hover{background:#667eea1a}.user-row.status-banned{background:#f443361a}.user-row.status-pending{background:#ffc1071a}.username{color:#2c3e50;font-weight:600}.email{color:#7f8c8d;font-size:13px}.role-badge{border-radius:20px;display:inline-block;font-size:12px;font-weight:600;letter-spacing:.5px;padding:4px 12px}.role-badge.role-admin{background:linear-gradient(135deg,#ff6b6b,#ff5722);color:#fff}.role-badge.role-creator{background:linear-gradient(135deg,#4ecdc4,#44a08d);color:#fff}.role-badge.role-commenter{background:linear-gradient(135deg,#a8edea,#fed6e3);color:#333}.status-badge{border-radius:20px;display:inline-block;font-size:12px;font-weight:600;letter-spacing:.5px;padding:4px 12px}.status-badge.status-active{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff}.status-badge.status-pending{background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff}.status-badge.status-banned{background:linear-gradient(135deg,#f44336,#d32f2f);color:#fff}.status-badge.status-rejected{background:linear-gradient(135deg,#9e9e9e,#757575);color:#fff}.created-date{color:#666;font-size:13px}.actions{text-align:center}.action-buttons{align-items:center;gap:5px;justify-content:center}.role-change-select{background:#fff;border:1px solid #ddd;border-radius:5px;color:#333;cursor:pointer;font-size:12px;min-width:90px;padding:5px 8px}.ban-btn,.delete-btn,.unban-btn{border:none;border-radius:5px;cursor:pointer;font-size:11px;font-weight:600;padding:6px 10px;text-decoration:none;transition:all .3s ease;white-space:nowrap}.ban-btn{background:linear-gradient(135deg,#ff6b6b,#ff5722);color:#fff}.ban-btn:hover{background:linear-gradient(135deg,#ff5722,#e91e63);box-shadow:0 4px 8px #ff6b6b4d;transform:translateY(-1px)}.unban-btn{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff}.unban-btn:hover{background:linear-gradient(135deg,#45a049,#388e3c);box-shadow:0 4px 8px #4caf504d;transform:translateY(-1px)}.delete-btn{background:linear-gradient(135deg,#9e9e9e,#757575);color:#fff}.delete-btn:hover{background:linear-gradient(135deg,#757575,#616161);box-shadow:0 4px 8px #9e9e9e4d;transform:translateY(-1px)}.users-summary{background:#667eea1a;color:#666;font-size:14px;font-style:italic;padding:15px 20px;text-align:center}.no-users{color:#ffffffb3;padding:40px;text-align:center}@media (max-width:768px){.user-controls{align-items:stretch;flex-direction:column}.search-box{margin-bottom:10px;max-width:none}.filter-controls{justify-content:center}.users-table-container{overflow-x:auto}.users-table{min-width:800px}.action-buttons{flex-direction:column;gap:3px}.ban-btn,.delete-btn,.role-change-select,.unban-btn{min-width:80px;width:100%}.voice-data{gap:20px}.voice-checkboxes,.voice-data,.voices-grid{grid-template-columns:1fr}.admin-tabs,.edit-actions,.permission-actions{flex-direction:column}}.creator-dashboard{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;min-height:100vh;padding:20px}.dashboard-header{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff1a;border:1px solid #fff3;border-radius:20px;box-shadow:0 8px 32px #0000001a;margin-bottom:30px;padding:30px}.dashboard-header-content{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1200px}.dashboard-title{flex:1 1}.creator-info{gap:20px}.creator-avatar{border:3px solid #ffffff4d}.creator-avatar,.creator-avatar-placeholder{box-shadow:0 4px 20px #0003;height:64px;width:64px}.creator-avatar-placeholder{align-items:center;background:linear-gradient(135deg,#ff6b6b,#ff8e53);border:3px solid #ffffff4d;border-radius:50%;color:#fff;display:flex;font-size:24px;font-weight:700;justify-content:center}.creator-details h1{-webkit-text-fill-color:#0000;background:linear-gradient(45deg,#fff,#f0f8ff);-webkit-background-clip:text;background-clip:text;font-size:2.2rem;font-weight:600;margin:0 0 8px;text-shadow:2px 2px 4px #0000004d}.creator-details p{font-size:1rem;font-weight:400;margin:0;opacity:.9}.logout-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#ff6b6b,#ee5a52);border:1px solid #fff3;border-radius:50px;box-shadow:0 4px 20px #ff6b6b4d;font-size:.95rem;font-weight:600;padding:12px 24px}.logout-btn:hover{background:linear-gradient(135deg,#ff5252,#e53935);box-shadow:0 6px 25px #ff3b3b66;transform:translateY(-2px)}.creator-page-link{background:#ffffff1a;border-radius:12px;margin-top:20px;padding:20px;text-align:left}.creator-page-link h3{font-size:1.3rem;margin:0 0 10px}.creator-page-link p{margin:0 0 15px;opacity:.9}.page-link-container{align-items:center;display:flex;flex-wrap:wrap;gap:10px}.page-link{background:#0003;border-radius:8px;flex:1 1;font-family:Courier New,monospace;min-width:250px}.copy-link-btn,.page-link,.view-page-btn{border:1px solid #ffffff4d;color:#fff;font-size:14px;padding:10px 15px}.copy-link-btn,.view-page-btn{background:#fff3;border-radius:8px;cursor:pointer;transition:all .3s ease;white-space:nowrap}.copy-link-btn:hover,.view-page-btn:hover{background:#ffffff4d;transform:translateY(-2px)}.stats-section{margin-bottom:30px}.stats-grid{grid-gap:20px;gap:20px;margin-bottom:20px}.stat-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border:1px solid #fff3;border-radius:15px;padding:25px;transition:all .3s ease}.stat-card:hover{background:#fff3;box-shadow:0 10px 30px #0003;transform:translateY(-5px)}.stat-card h3{font-size:1rem;letter-spacing:1px;margin:0 0 15px;opacity:.8}.stat-number{color:#fff;font-size:2rem;text-shadow:2px 2px 4px #0000004d}.actions-section{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:30px}.delete-selected-btn,.export-btn,.refresh-btn{border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:700;padding:12px 20px;transition:all .3s ease}.refresh-btn{background:linear-gradient(45deg,#28a745,#20c997);color:#fff}.export-btn{background:linear-gradient(45deg,#007bff,#6610f2);color:#fff}.delete-selected-btn{background:linear-gradient(45deg,#dc3545,#e83e8c);color:#fff}.delete-selected-btn:hover,.export-btn:hover,.refresh-btn:hover{box-shadow:0 4px 15px #0003;transform:translateY(-2px)}.delete-selected-btn:disabled,.export-btn:disabled,.refresh-btn:disabled{background:#6c757d;box-shadow:none;cursor:not-allowed;transform:none}.comment-header{justify-content:space-between;margin-bottom:8px}.comment-type-badge{border-radius:20px;display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.5px;padding:4px 12px;text-transform:uppercase}.comment-type-badge.text{background:linear-gradient(135deg,#28a745,#20c997);color:#fff}.comment-type-badge.tts{background:linear-gradient(135deg,#6f42c1,#e83e8c);color:#fff}.comment-price{background:#28a7451a;border-radius:12px;color:#28a745;font-size:.9rem;font-weight:600;padding:4px 8px}.comments-section{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-radius:15px;margin-bottom:30px;padding:25px}.section-header{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;margin-bottom:20px}.section-header h2{font-size:1.5rem;margin:0}.bulk-actions{align-items:center;gap:15px}.select-all{align-items:center;cursor:pointer;display:flex;font-weight:700;gap:8px}.select-all input[type=checkbox]{transform:scale(1.2)}.comments-table{background:#ffffff0d;border-radius:10px;overflow-x:auto}.comments-table table{border-collapse:collapse;min-width:800px;width:100%}.comments-table th{background:#fff3;border-bottom:2px solid #ffffff4d;font-weight:700;padding:15px 10px;position:sticky;text-align:left;top:0}.comments-table td{border-bottom:1px solid #ffffff1a;padding:15px 10px;vertical-align:top}.comments-table tr:hover{background:#ffffff1a}.comments-table tr.selected{background:#ffd70033}.user-cell{align-items:center;display:flex;gap:10px}.user-avatar{border:2px solid #ffffff4d;border-radius:50%;height:32px;width:32px}.username{font-weight:700}.comment-cell{max-width:300px}.comment-text{word-wrap:break-word;line-height:1.4;margin:0 0 5px}.session-id{color:#fff9;font-family:monospace}.revenue-cell{color:#28a745;font-size:1.1rem;font-weight:700}.action-buttons{display:flex;flex-wrap:wrap;gap:8px}.delete-btn,.play-btn,.save-btn,.stop-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #ffffff1a;border-radius:8px;color:#fff;cursor:pointer;font-size:.85rem;font-weight:600;overflow:hidden;padding:8px 12px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.play-btn{background:linear-gradient(135deg,#28a745,#20c997);box-shadow:0 4px 15px #28a7454d}.stop-btn{background:linear-gradient(135deg,#6c757d,#5a6268);box-shadow:0 4px 15px #6c757d4d}.save-btn{background:linear-gradient(135deg,#007bff,#0056b3);box-shadow:0 4px 15px #007bff4d}.delete-btn{background:linear-gradient(135deg,#dc3545,#c82333);box-shadow:0 4px 15px #dc35454d}.play-btn:hover{background:linear-gradient(135deg,#20c997,#17a2b8);box-shadow:0 6px 20px #28a74566;transform:translateY(-2px)}.stop-btn:hover{background:linear-gradient(135deg,#5a6268,#495057);box-shadow:0 6px 20px #6c757d66;transform:translateY(-2px)}.save-btn:hover{background:linear-gradient(135deg,#0056b3,#004085);box-shadow:0 6px 20px #007bff66;transform:translateY(-2px)}.delete-btn:hover{background:linear-gradient(135deg,#c82333,#bd2130);box-shadow:0 6px 20px #dc354566;transform:translateY(-2px)}.delete-btn:disabled,.play-btn:disabled,.save-btn:disabled,.stop-btn:disabled{background:#6c757d;box-shadow:none;cursor:not-allowed;opacity:.6;transform:none}.loading{font-size:1.2rem;opacity:.8;padding:40px}.error{background:#dc35454d;border-left:4px solid #dc3545;border-radius:8px;color:#fff;margin-bottom:20px}.no-comments p{font-size:1.2rem;margin-bottom:20px;opacity:.8}.getting-started{background:#ffffff1a;border-radius:10px;margin-left:auto;margin-right:auto;margin-top:20px;max-width:600px;padding:20px;text-align:left}.getting-started h3{color:gold;margin-top:0}.getting-started ul{padding-left:20px}.getting-started li{line-height:1.4;margin-bottom:8px}.getting-started code{background:#0000004d;border-radius:4px;color:gold;font-family:monospace;padding:2px 6px}.quick-links{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-radius:15px;padding:25px}.quick-links h3{margin-bottom:20px;margin-top:0;text-align:center}.links-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.link-card{background:#ffffff1a;border:1px solid #fff3;border-radius:10px;cursor:pointer;font-weight:700;padding:15px;text-align:center;transition:all .3s ease}.link-card,.link-card:hover{color:#fff;text-decoration:none}.link-card:hover{background:#fff3;transform:translateY(-2px)}.copy-link{background:#ffc10733;border:1px solid #ffc10780}.copy-link:hover{background:#ffc1074d}.comments-table::-webkit-scrollbar{height:8px}.comments-table::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}.comments-table::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.comments-table::-webkit-scrollbar-thumb:hover{background:#ffffff80}@media (max-width:768px){.creator-dashboard{padding:10px}.dashboard-header h1{font-size:2rem}.actions-section,.section-header{flex-direction:column}.section-header{align-items:flex-start}.stats-grid{grid-template-columns:1fr 1fr}.links-grid{grid-template-columns:1fr}}.test-section{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;margin-bottom:30px;padding:25px}.test-section .section-header h2{align-items:center;color:#fff;display:flex;gap:10px;margin-bottom:10px}.test-section .section-header p{color:#fffc;font-size:.9rem;margin-bottom:20px}.test-form{background:#ffffff0d;border-radius:10px;padding:20px}.test-form-row{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr;margin-bottom:20px}.test-type-selector{display:flex;gap:15px;margin-top:8px}.test-type-option{align-items:center;background:#ffffff1a;border:2px solid #fff3;border-radius:8px;color:#fff;cursor:pointer;display:flex;padding:10px 15px;transition:all .3s ease}.test-type-option:hover{background:#fff3;transform:translateY(-2px)}.test-type-option.selected{background:linear-gradient(135deg,#28a745,#20c997);border-color:#20c997;box-shadow:0 4px 15px #20c9974d}.test-type-option input[type=radio]{display:none}.test-type-option span{font-weight:600}.form-group label{color:#fff;margin-bottom:8px}.voice-selector{background:#ffffff1a;border:2px solid #fff3;border-radius:8px;color:#fff;font-size:14px;padding:10px}.voice-selector option{background:#2c3e50;color:#fff}.test-comment-input{background:#ffffff1a;border:2px solid #fff3;border-radius:8px;color:#fff;font-family:inherit;font-size:14px;min-height:80px;padding:12px;resize:vertical;width:100%}.test-comment-input::placeholder{color:#fff9}.test-comment-input:focus{border-color:#20c997;box-shadow:0 0 0 3px #20c99733;outline:none}.character-count{color:#fff9;font-size:.8rem;margin-top:5px}.send-test-btn{background:linear-gradient(135deg,#ff6b6b,#ee5a24);border:none;border-radius:8px;box-shadow:0 4px 15px #ee5a244d;color:#fff;cursor:pointer;font-size:16px;font-weight:600;margin-top:15px;padding:12px 25px;transition:all .3s ease}.send-test-btn:hover:not(:disabled){background:linear-gradient(135deg,#ee5a24,#d63031);box-shadow:0 6px 20px #ee5a2466;transform:translateY(-2px)}.send-test-btn:disabled{cursor:not-allowed;opacity:.6;transform:none}@media (max-width:768px){.test-form-row{gap:15px;grid-template-columns:1fr}.test-type-selector{flex-direction:column;gap:10px}.test-section{padding:20px}}.login-container{align-items:center;background:var(--primary-gradient);display:flex;justify-content:center;min-height:100vh;overflow:hidden;padding:var(--spacing-lg);position:relative}.login-container:before{background:radial-gradient(circle at 30% 30%,#ffffff1a 0,#0000 50%),radial-gradient(circle at 70% 70%,#764ba24d 0,#0000 50%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.login-card{animation:scaleIn .6s ease-out;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--bg-white);border:1px solid #fff3;border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);max-width:450px;padding:var(--spacing-xxl);position:relative;width:100%;z-index:1}.login-card h2{-webkit-text-fill-color:#0000;background:var(--primary-gradient);-webkit-background-clip:text;background-clip:text;color:var(--text-primary);font-size:var(--font-size-3xl);font-weight:800;margin-bottom:var(--spacing-xl);text-align:center}.form-group{margin-bottom:var(--spacing-lg)}.form-group label{color:var(--text-primary);font-size:var(--font-size-sm);font-weight:600;letter-spacing:.5px;margin-bottom:var(--spacing-xs);text-transform:uppercase}.form-group input,.form-group select{background:var(--bg-white);border:2px solid #e1e8ed;border-radius:var(--radius-md);font-family:var(--font-family);font-size:var(--font-size-base);padding:var(--spacing-md);transition:all var(--transition-normal);width:100%}.form-group input:focus,.form-group select:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px #667eea1a;outline:none;transform:translateY(-1px)}.login-button{background:var(--primary-gradient);border:none;border-radius:var(--radius-round);box-shadow:var(--shadow-md);color:var(--text-white);cursor:pointer;font-size:var(--font-size-lg);font-weight:700;letter-spacing:.5px;margin-top:var(--spacing-lg);min-height:56px;padding:var(--spacing-md);text-transform:uppercase;transition:all var(--transition-normal);width:100%}.login-button:hover:not(:disabled){box-shadow:var(--shadow-lg);transform:translateY(-2px)}.login-button:disabled{opacity:.6;transform:none}.register-link{border-top:1px solid #e1e8ed;margin-top:var(--spacing-xl);padding-top:var(--spacing-lg);text-align:center}.register-link p{color:var(--text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--spacing-sm)}.register-link a{color:var(--primary-color);font-size:var(--font-size-base);font-weight:600;text-decoration:none;transition:all var(--transition-normal)}.register-link a:hover{-webkit-text-fill-color:#0000;background:var(--primary-gradient);-webkit-background-clip:text;background-clip:text;text-decoration:underline}.login-button:disabled{cursor:not-allowed;opacity:.7}.login-links{margin-top:1.5rem;text-align:center}.login-links p{color:#666;margin:.5rem 0}.register-container{align-items:center;background:var(--accent-gradient);display:flex;justify-content:center;min-height:100vh;overflow:hidden;padding:var(--spacing-lg);position:relative}.register-container:before{background:radial-gradient(circle at 25% 25%,#4facfe4d 0,#0000 50%),radial-gradient(circle at 75% 75%,#00f2fe4d 0,#0000 50%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.register-card{animation:scaleIn .6s ease-out;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--bg-white);border:1px solid #fff3;border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);max-width:500px;padding:var(--spacing-xxl);position:relative;width:100%;z-index:1}.register-card h2{-webkit-text-fill-color:#0000;background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;color:var(--text-primary);font-size:var(--font-size-3xl);font-weight:800;margin-bottom:var(--spacing-xl);text-align:center}.form-group{margin-bottom:1rem}.form-group label{color:#555;display:block;font-weight:500;margin-bottom:.5rem}.form-group input,.role-select{border:2px solid #ddd;border-radius:5px;font-size:1rem;padding:.75rem;transition:border-color .3s ease;width:100%}.form-group input:focus,.role-select:focus{border-color:#667eea;outline:none}.role-select{background:#fff;cursor:pointer}.register-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:1rem;font-weight:500;padding:.75rem;transition:transform .2s ease;width:100%}.register-button:hover:not(:disabled){transform:translateY(-2px)}.register-button:disabled{cursor:not-allowed;opacity:.7}.error-message,.success-message{margin-bottom:1rem;padding:.75rem}.success-message{background:#e6ffe6;border-radius:5px;color:#00b894;text-align:center}.register-links{margin-top:1.5rem;text-align:center}.register-links p{color:#666;margin:.5rem 0}.link{color:#667eea;cursor:pointer;text-decoration:underline}.link:hover{color:#764ba2}.google-auth-section{background:#4facfe0d;border:2px dashed #4facfe33}.auth-divider{text-align:center}.auth-divider:after,.auth-divider:before{background:linear-gradient(90deg,#0000,#4facfe4d,#0000)}.google-auth-section{background:#677eea0d;border:2px dashed #677eea33;border-radius:var(--radius-lg);margin:var(--spacing-lg) 0;padding:var(--spacing-lg)}.auth-divider{align-items:center;color:var(--text-secondary);display:flex;font-size:var(--font-size-sm);font-weight:600;margin:var(--spacing-md) 0}.auth-divider:after,.auth-divider:before{background:linear-gradient(90deg,#0000,#677eea4d,#0000);content:"";flex:1 1;height:1px;margin:0 var(--spacing-md)}.google-auth-description{color:var(--text-secondary);font-size:var(--font-size-sm);line-height:1.5;margin:var(--spacing-md) 0;text-align:center}.youtube-login{align-items:center;border-radius:var(--radius-lg);display:flex;font-size:var(--font-size-md);gap:var(--spacing-sm);justify-content:center;padding:var(--spacing-md)}.youtube-login:hover{background:linear-gradient(135deg,#c00,#a00);box-shadow:var(--shadow-lg)}.super-admin-container{background:#f8f9fa;min-height:100vh;padding:0}.admin-header{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 10px #0000001a;color:#fff;display:flex;justify-content:space-between;padding:1.5rem 2rem}.admin-header h1{font-size:1.8rem;margin:0}.admin-controls{align-items:center;display:flex;gap:1rem}.logout-btn{background:#fff3;border:1px solid #ffffff4d;border-radius:5px;color:#fff;padding:.5rem 1rem;transition:background .3s ease}.logout-btn:hover{background:#ffffff4d}.admin-loading{align-items:center;color:#667eea;display:flex;font-size:1.2rem;height:100vh;justify-content:center}.error-message{background:#ffe6e6;border-radius:5px;color:#d63031;margin:1rem 2rem;padding:1rem}.stats-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));padding:2rem}.stat-card{background:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a;padding:1.5rem;text-align:center}.stat-card h3{color:#666;font-size:.9rem;letter-spacing:.5px;margin:0 0 1rem;text-transform:uppercase}.stat-number{color:#667eea;font-size:2.5rem;font-weight:700;margin:0}.admin-section{background:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a;margin:2rem;overflow:hidden}.admin-section h2{background:#f8f9fa;border-bottom:1px solid #dee2e6;color:#333;margin:0;padding:1.5rem 2rem}.pending-creators{padding:1.5rem}.pending-card{align-items:center;border:1px solid #dee2e6;border-radius:8px;display:flex;justify-content:space-between;margin-bottom:1rem;padding:1rem}.pending-info h4{color:#333;margin:0 0 .5rem}.pending-info p{color:#666;font-size:.9rem;margin:.2rem 0}.pending-actions{display:flex;gap:.5rem}.approve-btn,.reject-btn{border:none;border-radius:5px;cursor:pointer;font-weight:500;padding:.5rem 1rem;transition:transform .2s ease}.approve-btn{background:#00b894;color:#fff}.approve-btn:hover{background:#00a085;transform:translateY(-1px)}.reject-btn{background:#e17055;color:#fff}.reject-btn:hover{background:#d63031;transform:translateY(-1px)}.users-table{overflow-x:auto;padding:1.5rem}.users-table table{border-collapse:collapse;width:100%}.users-table td,.users-table th{border-bottom:1px solid #dee2e6;padding:1rem;text-align:left}.users-table th{background:#f8f9fa;color:#495057;font-weight:600}.role-badge{border-radius:15px;font-size:.8rem;font-weight:500;padding:.25rem .5rem;text-transform:uppercase}.role-badge.admin{background:#ff6b6b;color:#fff}.role-badge.creator{background:#4ecdc4;color:#fff}.role-badge.commenter{background:#95a5a6;color:#fff}.status-badge{border-radius:15px;font-size:.8rem;font-weight:500;padding:.25rem .5rem;text-transform:uppercase}.status-badge.active{background:#00b894;color:#fff}.status-badge.pending{background:#fdcb6e;color:#333}.status-badge.inactive{background:#636e72;color:#fff}.role-selector{background:#fff;border:1px solid #ddd;border-radius:4px;cursor:pointer;padding:.4rem}.role-selector:focus{border-color:#667eea;outline:none}.voice-overview{margin-bottom:2rem}.voices-grid{grid-gap:1rem;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin-top:1rem}.voice-card{background:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:1rem}.voice-card h4{color:#333;font-size:1rem;margin:0 0 .5rem}.voice-card p{color:#666;font-size:.9rem;margin:0 0 .5rem}.voice-id{color:#999;font-family:monospace;font-size:.8rem}.creator-voice-assignments{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:1.5rem}.creator-voice-row{align-items:center;border-bottom:1px solid #eee;display:flex;justify-content:space-between;padding:1rem}.creator-voice-row:last-child{border-bottom:none}.creator-info strong{font-size:1rem}.voice-assignment{align-items:center;display:flex;gap:1rem}.voice-selector{border:1px solid #ddd;border-radius:4px;font-size:.9rem;height:100px;min-width:200px;padding:.5rem}.voice-selector:focus{border-color:#667eea}.update-voices-btn{background:#667eea;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.9rem;padding:.5rem 1rem;transition:background .3s ease}.update-voices-btn:hover{background:#5a6fd8}.update-voices-btn:disabled{background:#bbb;cursor:not-allowed}.loading{font-size:1.1rem;padding:2rem;text-align:center}.voice-card audio.voice-preview{margin-top:.5rem;width:100%}.assignment-description{color:#666;font-style:italic;margin-bottom:1.5rem}.creator-permission-panel{background:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin-bottom:1.5rem;overflow:hidden}.creator-header{align-items:center;background:#f8f9fa;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;padding:1rem 1.5rem}.creator-info{gap:.25rem}.creator-info strong{color:#333;font-size:1.1rem}.creator-info span{color:#666;font-size:.9rem}.permission-summary{align-items:center;display:flex;gap:1rem}.voice-count{color:#667eea;font-size:.9rem;font-weight:500}.bulk-actions{display:flex;gap:.5rem}.bulk-btn{background:#fff;border:1px solid #ddd;border-radius:4px;cursor:pointer;font-size:.8rem;padding:.4rem .8rem;transition:all .3s ease}.bulk-btn.select-all{background:#00b894;border-color:#00b894;color:#fff}.bulk-btn.select-all:hover:not(:disabled){background:#00a085}.bulk-btn.deselect-all{background:#e17055;border-color:#e17055;color:#fff}.bulk-btn.deselect-all:hover:not(:disabled){background:#d63031}.bulk-btn:disabled{cursor:not-allowed;opacity:.5}.voice-permissions-grid{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));padding:1.5rem}.voice-permission-item{background:#f8f9fa;border:1px solid #e0e0e0;border-radius:6px;transition:all .3s ease}.voice-permission-item.assigned{background:#f0f9f8;border-color:#00b894}.voice-checkbox-label{align-items:center;cursor:pointer;display:flex;gap:.75rem;padding:.75rem;width:100%}.voice-checkbox{accent-color:#667eea;cursor:pointer;height:18px;width:18px}.voice-details{display:flex;flex:1 1;flex-direction:column;gap:.25rem}.voice-details strong{color:#333;font-size:.95rem}.voice-category{color:#666;font-size:.8rem;text-transform:capitalize}.voice-permission-item:hover{background:#f0f4ff;border-color:#667eea}.voice-permission-item.assigned:hover{background:#e8f5f3;border-color:#00a085}.no-creators{color:#666;font-style:italic;padding:2rem;text-align:center}.creator-page-container{font-family:Inter,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:400;letter-spacing:-.01em;margin:0 auto;max-width:600px;min-height:100vh;overflow:hidden;position:relative}.background-video{height:100%;left:0;object-fit:cover;position:fixed;top:0;width:100%;z-index:-2}.content-overlay{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:#f8fafc4d;min-height:50vh;padding:20px;position:relative;z-index:1}.error-message,.loading{border-radius:12px;margin:20px 0;padding:40px;text-align:center}.loading{background:#fffc;box-shadow:0 4px 12px #00000026;color:#667eea;font-size:1.2em}.error-message,.loading{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.error-message{background:linear-gradient(135deg,#fef2f2,#fee2e2);border-left:4px solid #ef4444;border-radius:12px;box-shadow:0 4px 15px #ef44441a;color:#dc2626;font-family:Inter,sans-serif;font-weight:500;margin:15px 0;padding:16px 20px}.error-message h2{color:#e74c3c;font-size:1.5em;margin-bottom:15px}.home-btn{background:#667eea;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1em;margin-top:15px;padding:12px 24px;transition:background .3s ease}.home-btn:hover{background:#5a6fd8}.creator-header{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#0000;border:1px solid #ffffff4d;border-radius:16px;box-shadow:0 8px 25px #0003;color:green;margin-bottom:30px;padding:40px;text-align:center}.creator-info{align-items:center;display:flex;flex-direction:column;justify-content:center;width:100%}.creator-details{text-align:center;width:100%}.creator-avatar{border:4px solid #ffffff4d;border-radius:50%;height:160px;margin-bottom:15px;object-fit:cover;width:160px}.creator-details h1{display:block;font-family:Poppins,sans-serif;font-size:2.4em;font-weight:700;letter-spacing:-.02em;margin:0 auto;text-align:center;text-shadow:0 2px 4px #0000004d;width:100%}.creator-bio{font-size:1.1em;margin:15px 0 0;max-width:600px;opacity:.9}.comment-section{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffffbf;border:1px solid #fff6;border-radius:16px;box-shadow:0 6px 20px #00000026;margin-bottom:30px}.comment-section h2{color:#1f2937;font-family:Poppins,sans-serif;font-size:1.9em;font-weight:600;letter-spacing:-.01em;margin-bottom:25px;text-align:center;text-shadow:0 1px 2px #fffc}.login-prompt{text-align:center}.login-options-toggle,.login-prompt{margin-bottom:20px}.big-login-btn{background:linear-gradient(135deg,#6366f1,#8b5cf6 50%,#a855f7);border:none;border-radius:16px;box-shadow:0 8px 25px #6366f159,0 3px 10px #6366f133;color:#fff;cursor:pointer;font-family:Inter,sans-serif;font-size:1.2em;font-weight:600;letter-spacing:-.01em;margin-bottom:15px;max-width:400px;overflow:hidden;padding:18px 36px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.big-login-btn:before{background:linear-gradient(90deg,#0000,#fff3,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.big-login-btn:hover:before{left:100%}.big-login-btn:hover{box-shadow:0 12px 35px #6366f166,0 6px 15px #6366f140;transform:translateY(-3px)}.or-divider{color:#666;font-style:italic;margin:15px 0}.anonymous-btn{background:#0000;border:2px solid #e5e7eb;border-radius:12px;color:#6b7280;cursor:pointer;font-family:Inter,sans-serif;font-size:1em;font-weight:500;letter-spacing:-.01em;padding:14px 28px;transition:all .3s cubic-bezier(.4,0,.2,1)}.anonymous-btn:hover{background:#f3f4f6;border-color:#6366f1;color:#6366f1;transform:translateY(-1px)}.login-options{background:#f7fafc;border:1px solid #e2e8f0;border-radius:12px;padding:25px}.email-login-form{display:flex;flex-direction:column;gap:15px;margin:15px 0}.email-login-form input{background:#fff;border:2px solid #e5e7eb;border-radius:12px;font-family:Inter,sans-serif;font-size:1em;padding:14px 18px;transition:all .3s cubic-bezier(.4,0,.2,1)}.email-login-form input:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a;outline:none;transform:translateY(-1px)}.email-login-btn{background:linear-gradient(135deg,#4f46e5,#7c3aed);border:none;border-radius:12px;box-shadow:0 4px 15px #4f46e54d;color:#fff;cursor:pointer;font-family:Inter,sans-serif;font-size:1em;font-weight:600;letter-spacing:-.01em;padding:14px 20px;transition:all .3s cubic-bezier(.4,0,.2,1)}.email-login-btn:hover{background:linear-gradient(135deg,#4338ca,#6d28d9);box-shadow:0 6px 20px #4f46e566;transform:translateY(-1px)}.youtube-login{background:linear-gradient(135deg,red,#c00);border-radius:12px;box-shadow:0 6px 20px #ff00004d;font-family:Inter,sans-serif;font-size:1.1em;font-weight:600;letter-spacing:-.01em;margin-bottom:15px;max-width:400px;overflow:hidden;padding:16px 32px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.youtube-login:before{background:linear-gradient(90deg,#0000,#fff3,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.youtube-login:hover:before{left:100%}.youtube-login:hover{background:linear-gradient(135deg,#c00,#900);box-shadow:0 8px 25px #f006;transform:translateY(-2px)}.comment-form{margin:0 auto;max-width:600px}.comment-type-selection{display:flex;gap:20px;justify-content:center;margin-bottom:20px}.comment-type-option{align-items:center;background:#fff;border:2px solid #e2e8f0;border-radius:10px;cursor:pointer;display:flex;gap:8px;padding:12px 20px;transition:all .3s ease}.comment-type-option:hover{background:#f0f4ff;border-color:#667eea}.comment-type-option input[type=radio]{margin:0}.comment-type-option span{color:#374151!important;font-size:16px;font-weight:500}.comment-type-option input[type=radio]:checked+span{font-weight:600}.comment-type-option input[type=radio]:checked{accent-color:#4f46e5}.comment-type-option:hover span{color:#1f2937!important}.comment-type-option input[type=radio]:checked~*{color:#fff}.comment-type-option input[type=radio]:checked{background:#fff;background-color:#fff}.comment-type-option input[type=radio]:checked+span{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px;color:#fff!important;margin-left:8px;padding:8px 16px}.voice-selection{background:#f0f4ff;border-radius:10px;margin-bottom:20px;padding:15px}.voice-selection label{color:#4f46e5;display:block;font-weight:600;margin-bottom:8px}.voice-selection select{border:1px solid #d1d5db;border-radius:6px;font-size:1em;padding:10px;width:100%}.commenter-info input{border:1px solid #d1d5db;border-radius:8px;font-size:1em;margin-bottom:15px;padding:12px 16px;width:100%}.comment-input textarea{background:#fff;border:2px solid #e5e7eb;border-radius:16px;font-family:Inter,sans-serif;font-size:1.1em;line-height:1.5;margin-bottom:20px;min-height:120px;padding:18px 20px;resize:vertical;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.comment-input textarea:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a;outline:none;transform:translateY(-1px)}.submit-btn{border:none;border-radius:16px;cursor:pointer;font-family:Inter,sans-serif;font-size:1.2em;font-weight:600;letter-spacing:-.01em;margin-bottom:15px;overflow:hidden;padding:18px 24px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.submit-btn:before{background:linear-gradient(90deg,#0000,#fff3,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.submit-btn:hover:before{left:100%}.submit-btn.text{background:linear-gradient(135deg,#10b981,#059669 50%,#047857);box-shadow:0 8px 25px #10b98159,0 3px 10px #10b98133;color:#fff}.submit-btn.text:hover{background:linear-gradient(135deg,#059669,#047857 50%,#065f46);box-shadow:0 12px 35px #10b98166,0 6px 15px #10b98140;transform:translateY(-2px)}.submit-btn.tts{background:linear-gradient(135deg,#f59e0b,#d97706 50%,#b45309);box-shadow:0 8px 25px #f59e0b59,0 3px 10px #f59e0b33;color:#fff}.submit-btn.tts:hover{background:linear-gradient(135deg,#d97706,#b45309 50%,#92400e);box-shadow:0 12px 35px #f59e0b66,0 6px 15px #f59e0b40;transform:translateY(-2px)}.submit-btn:disabled{cursor:not-allowed;opacity:.6;transform:none}.logged-in-as{background:#f0f9ff;border-radius:8px;color:#0369a1;font-size:.9em;padding:12px;text-align:center}.logout-btn{background:none;border:none;border-radius:6px;color:#ef4444;cursor:pointer;font-family:Inter,sans-serif;font-size:.9em;font-weight:500;margin-left:10px;padding:4px 8px;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1)}.logout-btn:hover{background:#fef2f2;color:#dc2626;transform:translateY(-1px)}.recent-comments-section{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffffbf;border:1px solid #fff6;border-radius:16px;box-shadow:0 6px 20px #00000026;padding:30px}.recent-comments-section h3{color:#2d3748;font-size:1.6em;margin-bottom:25px;text-align:center;text-shadow:0 1px 2px #fffc}.recent-comments{grid-gap:20px;display:grid;gap:20px}.comment-item{background:#f8fafc;border-left:4px solid #667eea;border-radius:12px;padding:20px;transition:all .3s ease}.comment-item:hover{background:#f1f5f9;transform:translateX(5px)}.comment-header{align-items:center;display:flex;gap:12px;margin-bottom:12px}.commenter-avatar{border-radius:50%;height:40px;object-fit:cover;width:40px}.comment-meta{flex:1 1}.commenter-name{color:#2d3748;display:block;font-weight:600;margin-bottom:4px}.comment-type-badge{border-radius:12px;font-size:.8em;font-weight:500;padding:4px 8px}.comment-type-badge.text{background:#dcfce7;color:#166534}.comment-type-badge.tts{background:#fef3c7;color:#92400e}.comment-content{color:#4b5563;line-height:1.5;margin-bottom:10px}.comment-time{color:#9ca3af;font-size:.8em;text-align:right}.no-comments{color:#6b7280;padding:40px;text-align:center}.no-comments p{font-size:1.1em;margin:0}@media (max-width:768px){.creator-page-container{padding:15px}.creator-info{flex-direction:column;text-align:center}.creator-details h1{font-size:1.8em}.comment-type-selection{align-items:center;flex-direction:column}.comment-type-option{justify-content:center;max-width:300px;width:100%}}@media (max-width:480px){.creator-header{padding:25px 20px}.comment-section,.recent-comments-section{padding:20px}.creator-details h1{font-size:1.5em}}.voice-selector{background:#fff;border:1px solid #e9ecef;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;padding:20px}.voice-selector.disabled{opacity:.6;pointer-events:none}.voice-selector-title{color:#343a40;font-size:18px;font-weight:600;margin:0 0 16px;text-align:center}.voice-selector.loading{align-items:center;display:flex;justify-content:center;min-height:200px}.loading-spinner{align-items:center;color:#6c757d;display:flex;flex-direction:column;gap:12px}.spinner{animation:spin 1s linear infinite;border:3px solid #e9ecef;border-radius:50%;border-top-color:#007bff;height:32px;width:32px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.voice-selector.error{align-items:center;display:flex;justify-content:center;min-height:200px}.error-message{align-items:center;color:#dc3545;display:flex;flex-direction:column;gap:12px;text-align:center}.error-icon{font-size:24px}.retry-button{background:#007bff;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:14px;padding:8px 16px;transition:background-color .2s ease}.retry-button:hover{background:#0056b3}.voices-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-bottom:20px}.voice-option{background:#f8f9fa;border:2px solid #e9ecef;border-radius:12px;cursor:pointer;padding:16px;position:relative;transition:all .2s ease}.voice-option:hover:not(.disabled){border-color:#007bff;box-shadow:0 4px 12px #007bff26;transform:translateY(-2px)}.voice-option.selected{background:linear-gradient(135deg,#e3f2fd,#f8f9fa);border-color:#007bff;box-shadow:0 2px 8px #007bff33}.voice-option.disabled{cursor:not-allowed;opacity:.5}.voice-header{align-items:flex-start;display:flex;gap:12px;margin-bottom:12px}.voice-icon{align-items:center;background:#fff;border-radius:50%;box-shadow:0 2px 4px #0000001a;display:flex;font-size:24px;height:40px;justify-content:center;width:40px}.voice-info{flex:1 1}.voice-name{color:#343a40;font-size:16px;font-weight:600;margin:0 0 4px}.voice-description{color:#6c757d;font-size:13px;line-height:1.4;margin:0}.voice-preview{border-top:1px solid #e9ecef;margin-top:12px;padding-top:12px}.preview-button{align-items:center;background:#007bff;border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:13px;gap:6px;margin-bottom:8px;padding:8px 12px;transition:all .2s ease}.preview-button:hover:not(:disabled){background:#0056b3;transform:scale(1.02)}.preview-button:disabled{cursor:not-allowed;opacity:.7;transform:none}.preview-button.generating{background:#6c757d}.preview-spinner{animation:spin 1s linear infinite}.preview-icon{font-size:14px}.preview-player{margin-top:8px}.selection-indicator{align-items:center;background:#007bff;border-radius:12px;color:#fff;display:flex;font-size:12px;font-weight:500;gap:4px;padding:4px 8px;position:absolute;right:12px;top:12px}.checkmark{font-size:14px;font-weight:700}.selection-text{font-size:11px}.voice-selector-footer{border-top:1px solid #e9ecef;padding-top:16px;text-align:center}.voice-note{color:#6c757d;font-size:13px;font-style:italic;margin:0}@media (max-width:768px){.voices-grid{gap:12px;grid-template-columns:1fr}.voice-option{padding:12px}.voice-header{gap:10px;margin-bottom:10px}.voice-icon{font-size:20px;height:36px;width:36px}.voice-name{font-size:15px}.voice-description{font-size:12px}}@media (max-width:480px){.voice-selector{padding:16px}.voice-selector-title{font-size:16px;margin-bottom:12px}.voices-grid{gap:10px}.voice-option{padding:10px}.selection-indicator{padding:2px 6px;right:8px;top:8px}.checkmark{font-size:12px}.selection-text{display:none}}.voice-selector.dark{background:#343a40;border-color:#495057}.voice-selector.dark .voice-selector-title{color:#f8f9fa}.voice-selector.dark .voice-option{background:#495057;border-color:#6c757d}.voice-selector.dark .voice-option.selected{background:linear-gradient(135deg,#1e3a5f,#495057)}.voice-selector.dark .voice-name{color:#f8f9fa}.voice-selector.dark .voice-description{color:#adb5bd}.voice-selector.dark .voice-preview{border-top-color:#6c757d}.voice-selector.dark .voice-note{color:#adb5bd}.voice-selector.dark .voice-selector-footer{border-top-color:#6c757d}.voice-option:focus{outline:2px solid #007bff;outline-offset:2px}.preview-button:focus{outline:2px solid #fff;outline-offset:2px}.voice-option.selected{animation:selectPulse .3s ease-out}@keyframes selectPulse{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}.App{animation:backgroundShift 20s ease-in-out infinite;background:var(--primary-gradient);box-shadow:0 0 40px 0 #0009;color:var(--text-primary);font-family:var(--font-family);min-height:100vh;overflow-x:hidden;position:relative;text-align:center}.App:before{animation:pulse 8s ease-in-out infinite;background:radial-gradient(circle at 20% 20%,#2c2c2cb3 0,#0000 60%),radial-gradient(circle at 80% 80%,#222222b3 0,#0000 60%),radial-gradient(circle at 40% 60%,#4f4f4f4d 0,#0000 50%),radial-gradient(circle at 60% 40%,#2223 0,#0000 40%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.App-header{animation:fadeInUp 1s var(--transition-normal);margin:0 auto;max-width:900px;padding:var(--spacing-xxl) var(--spacing-lg);position:relative;z-index:1}.App-header h1{-webkit-text-fill-color:#0000;background:var(--premium-gradient);-webkit-background-clip:text;background-clip:text;font-size:var(--font-size-4xl);font-weight:800;letter-spacing:-.02em;margin-bottom:var(--spacing-md);position:relative;text-shadow:3px 3px 8px #0006}.App-header h1:after{background:var(--premium-gradient);border-radius:2px;bottom:-8px;box-shadow:var(--shadow-premium);content:"";height:4px;left:50%;position:absolute;transform:translateX(-50%);width:100px}.App-header p{font-size:var(--font-size-xl);font-weight:400;line-height:1.6;margin-bottom:var(--spacing-xl);opacity:.95;text-shadow:1px 1px 3px #0000004d}.auth-section{animation:slideInUp .6s ease-out;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--bg-overlay);border:1px solid #2c2c2cb3;border-radius:var(--radius-lg);box-shadow:0 4px 32px #00000080;margin:var(--spacing-xl) 0;padding:var(--spacing-xl)}.auth-button{background:var(--accent-gradient);border:none;border-radius:var(--radius-round);box-shadow:0 2px 12px #0000004d;color:var(--text-light);cursor:pointer;font-size:var(--font-size-lg);font-weight:700;letter-spacing:.5px;min-height:56px;padding:var(--spacing-md) var(--spacing-xl);text-transform:uppercase;transition:all var(--transition-normal)}.auth-button:hover{box-shadow:0 6px 20px #0006;filter:brightness(1.08)}.welcome-text{color:#ffffffe6;font-size:1.4rem;margin-bottom:40px}.welcome-actions{display:flex;flex-wrap:wrap;gap:30px;justify-content:center;margin:40px 0}.welcome-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--bg-glass-dark);border:1px solid #2c2c2cb3;border-radius:20px;box-shadow:0 2px 12px #0000004d;color:var(--text-light);max-width:300px;min-width:250px;padding:30px}.welcome-card h2{font-size:1.5rem;margin-bottom:15px}.welcome-card p{margin-bottom:20px;opacity:.8}.welcome-button{background:var(--accent-gradient);border-radius:25px;box-shadow:0 4px 15px #2c2c2c4d;display:inline-block;font-weight:700;padding:12px 25px;transition:all .3s ease}.welcome-button,.welcome-button:hover{color:var(--text-light);text-decoration:none}.welcome-button:hover{box-shadow:0 6px 20px #2c2c2c66;filter:brightness(1.08)}.auth-links{display:flex;gap:20px;justify-content:center;margin-top:40px}.auth-links a{border:1px solid #ffffff4d;border-radius:15px;color:#fffc;padding:10px 20px;text-decoration:none;transition:all .3s ease}.auth-links a:hover{background:#ffffff1a;color:#fff}.auth-button:hover{box-shadow:0 6px 20px #ff6b6b66;transform:translateY(-2px)}.auth-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.youtube-login{background:linear-gradient(45deg,red,#c00)}.anonymous-login,.youtube-login{border:none;border-radius:25px;color:#fff;cursor:pointer;font-size:1rem;font-weight:700;padding:15px 25px;transition:all .3s ease}.anonymous-login{background:linear-gradient(45deg,#666,#444)}.cancel-button{background:#0000;border:2px solid #ffffff4d;border-radius:20px;color:#fff;cursor:pointer;font-size:.9rem;padding:10px 20px;transition:all .3s ease}.cancel-button:hover{background:#ffffff1a}.comment-section{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border:1px solid #fff3;border-radius:20px;margin:30px 0;padding:30px}.user-info{align-items:center;background:#ffffff1a;border-radius:15px;display:flex;gap:15px;justify-content:center;margin-bottom:25px;padding:15px}.avatar{border:2px solid #ffffff80;border-radius:50%;height:40px;width:40px}.logout-button{background:#fff3;border:1px solid #ffffff4d;border-radius:15px;color:#fff;cursor:pointer;font-size:.9rem;padding:8px 15px;transition:all .3s ease}.logout-button:hover{background:#ffffff4d}.comment-form{display:flex;flex-direction:column;gap:20px}.comment-input::placeholder{color:#666}.pay-button{background:linear-gradient(45deg,gold,#ffed4e);border:none;border-radius:25px;box-shadow:0 4px 15px #ffd7004d;color:#333;cursor:pointer;font-size:1.2rem;font-weight:700;padding:18px 35px;transition:all .3s ease}.pay-button:hover:not(:disabled){box-shadow:0 6px 25px #ffd70066;transform:translateY(-2px)}.pay-button:disabled{background:#ccc;box-shadow:none;color:#999;cursor:not-allowed;transform:none}.overlay-link{display:flex;flex-direction:column;gap:15px;margin-top:40px}.overlay-link a{background:#fff3;border-radius:25px;color:#fff;display:inline-block;font-size:1rem;font-weight:700;padding:15px 25px;text-decoration:none;transition:all .3s ease}.overlay-link a:hover{background:#ffffff4d;transform:translateY(-2px)}.error{background:#ff6b6b1a;border:1px solid #ff6b6b4d;border-radius:10px;color:#ff6b6b;margin:20px 0;padding:15px}@media (max-width:768px){.App-header{padding:20px 15px}.App-header h1{font-size:2rem}.auth-section,.comment-section{margin:20px 10px;padding:20px}.user-info{flex-direction:column;gap:10px}.auth-options{gap:10px}.anonymous-login,.auth-button,.pay-button,.youtube-login{font-size:1rem;padding:12px 20px}}.comment-type-selection{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--bg-glass-dark);border-radius:var(--radius-lg);margin-bottom:var(--spacing-lg);padding:var(--spacing-md)}.comment-type-selection h3{color:var(--text-white);font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--spacing-md)}.type-options{display:flex;flex-wrap:wrap;gap:var(--spacing-md)}.type-option{cursor:pointer;flex:1 1;min-width:200px;position:relative}.type-option input[type=radio]{cursor:pointer;opacity:0;position:absolute}.option-content{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--bg-overlay-dark);border:2px solid var(--accent-color);border-radius:12px;box-shadow:0 2px 8px #0000001f;display:flex;gap:1rem;padding:1.5rem;transition:all .3s ease}.type-option.selected .option-content{background:var(--accent-gradient);border-color:var(--premium-color);box-shadow:0 0 20px #2c2c2c66;transform:translateY(-2px)}.type-option:hover .option-content{box-shadow:0 6px 20px #00000026;filter:brightness(1.08)}.option-icon{font-size:1.5rem;min-width:40px}.option-text{align-items:flex-start;display:flex;flex-direction:column;text-align:left}.option-text strong{background:none;color:var(--text-light);font-size:var(--font-size-md);font-weight:600;margin-bottom:2px;padding:0}.option-text small{background:none;color:var(--text-secondary);font-size:var(--font-size-sm);padding:0}.voice-selection{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-radius:var(--radius-lg);margin-bottom:var(--spacing-lg);padding:var(--spacing-md)}.voice-selection h4{color:var(--text-white);font-size:var(--font-size-md);font-weight:600;margin-bottom:var(--spacing-md)}.voice-selector{border:2px solid var(--accent-color);border-radius:12px;box-shadow:0 2px 8px #00000014;font-size:1rem;font-weight:500;padding:.75rem 1.25rem;width:100%}.voice-selector,.voice-selector optgroup,.voice-selector option{background:var(--bg-light);color:var(--text-light)}.voice-selector:focus{border-color:var(--color-gold);box-shadow:0 0 0 3px #ffd7004d;outline:none}.voice-selector optgroup{color:var(--color-primary);font-weight:600;padding:var(--spacing-xs)}.voice-selector option{color:var(--text-dark);padding:var(--spacing-xs)}.voice-preview{margin-top:var(--spacing-sm)}.voice-preview small{color:#ffffffb3;font-style:italic}.character-count{color:#ffffffb3;font-size:var(--font-size-sm);margin-bottom:var(--spacing-md);margin-top:var(--spacing-xs);text-align:right}.comment-input{background:#fffffff2;border:2px solid #ffffff4d;border-radius:var(--radius-md);color:var(--text-dark);font-family:var(--font-family);font-size:var(--font-size-md);padding:var(--spacing-md);resize:vertical;transition:all var(--transition-normal);width:100%}.comment-input:focus{border-color:var(--color-gold);box-shadow:0 0 0 3px #ffd7004d;outline:none}.pay-button.tts-button{background:linear-gradient(135deg,#ff6b6b,#ee5a52 50%,#d63031);border:2px solid #ff6b6b;overflow:hidden;position:relative}.pay-button.tts-button:before{background:linear-gradient(90deg,#0000,#ffffff4d,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.pay-button.tts-button:hover:before{left:100%}.pay-button.tts-button:hover{background:linear-gradient(135deg,#ff5252,#e53935 50%,#c62828);box-shadow:0 8px 25px #ff6b6b66;transform:translateY(-3px)}@media (max-width:768px){.type-options{flex-direction:column}.type-option{min-width:auto}.option-content,.voice-selection{padding:var(--spacing-sm)}}.title-icon{align-items:center;display:inline-flex;justify-content:center;margin-right:.3em}.title-video{border-radius:8px;display:inline-block;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.3));height:1.2em;object-fit:cover;transition:all .3s ease;vertical-align:middle;width:1.2em}.title-video:hover{filter:drop-shadow(2px 2px 8px rgba(0,0,0,.5));transform:scale(1.1)}.title-fallback{display:inline-block;font-size:1.2em;vertical-align:middle}.animated-icon{animation:bounceGlow 2s ease-in-out infinite;transform-origin:center}@keyframes bounceGlow{0%,to{filter:drop-shadow(2px 2px 4px rgba(255,215,0,.3));transform:scale(1)}50%{filter:drop-shadow(2px 2px 8px rgba(255,215,0,.6));transform:scale(1.1)}}.App-header h1{align-items:center;display:flex;gap:.1em;justify-content:center}
/*# sourceMappingURL=main.64e19c99.css.map*/