body,html{margin:0;padding:0;font-family:sans-serif;height:100%;overflow-x:hidden}.site-header{position:fixed;top:0;left:0;width:100%;height:90px;z-index:1000;box-shadow:0 2px 12px #2c2c5412;background:#181834;padding:0 1.7rem;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-bottom:1px solid #313244;transform:none!important;box-sizing:border-box}.logo-container{display:flex;align-items:center;gap:.85rem;text-decoration:none;flex-shrink:0;height:100%}.logo-image{height:46px;width:auto;aspect-ratio:552 / 464}.logo-text{font-size:1.7rem;font-weight:700;color:#eac0f2;line-height:1}.header-link{color:#cdd6f4;text-decoration:none;font-weight:500;line-height:1;font-size:1.05rem}.header-link:hover{color:#eac0f2}.header-button{padding:.7rem 1.4rem;border-radius:9px;border:none;background-color:#daa520;color:#1e1e2e;font-weight:700;cursor:pointer;text-decoration:none;transition:background-color .2s ease;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;line-height:1;font-size:1.05rem}.header-button:hover{background-color:#b8860b}.header-button-small{padding:.6rem 1.15rem;border-radius:7px;border:1px solid #89b4fa;background-color:transparent;color:#89b4fa;cursor:pointer;transition:background-color .2s ease,color .2s ease;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap;line-height:1;font-size:1.05rem}.header-button-small:hover{background-color:#89b4fa;color:#1e1e2e}.header-center-section{display:flex;justify-content:center;align-items:center;min-width:0;height:100%}.setup-header{display:flex;justify-content:center;align-items:center}.setup-header-content{display:flex;align-items:center;color:#cdd6f4;font-weight:500;font-size:1.1rem}.setup-text{white-space:nowrap}@media (max-width: 480px){.setup-header-content{font-size:1rem}@media (orientation: landscape){.setup-header-content{font-size:.9rem}}}@media (max-width: 320px){.setup-header-content{font-size:.9rem}}.stream-status-header{background:#ff00001a;border:1px solid rgba(255,0,0,.3);border-radius:23px;padding:.6rem 1.15rem;display:flex;align-items:center;gap:.6rem;line-height:1}.live-indicator-header{display:flex;align-items:center;gap:.6rem;color:#ff6b6b;font-weight:700;font-size:1rem;line-height:1}.live-dot-header{width:9px;height:9px;background:red;border-radius:50%;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.watching-stream-header{background:#0096ff1a;border:1px solid rgba(0,150,255,.3);border-radius:23px;padding:.6rem 1.15rem;display:flex;align-items:center;gap:.6rem;line-height:1}.watching-indicator{display:flex;align-items:center;gap:.6rem;color:#4fc3f7;font-weight:700;font-size:1rem;line-height:1}.watching-dot{width:9px;height:9px;background:#4fc3f7;border-radius:50%;animation:watching-pulse 2s infinite}@keyframes watching-pulse{0%,to{opacity:1}50%{opacity:.5}}.header-right-section{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:1.15rem;height:100%}.menu-toggle-button{background:#313244;border:none;color:#cdd6f4;width:46px;height:46px;padding:0;border-radius:50%;font-size:1.35rem;font-weight:700;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:background-color .2s ease;flex-shrink:0;aspect-ratio:1 / 1;box-sizing:border-box}.menu-toggle-button:hover{background-color:#45475a}.dropdown-menu{position:absolute;top:calc(100% + 10px);right:0;background-color:#1e1e2e;border:1px solid #313244;max-width:80dvw;min-width:15dvw;max-height:85dvh;overflow-x:hidden;border-radius:8px;padding:.5rem;display:flex;flex-direction:column;gap:.25rem;z-index:1001;box-shadow:0 4px 20px #00000040}.dropdown-item{width:100%;text-align:left;padding:.75rem 1rem;background:none;border:none;color:#cdd6f4;cursor:pointer;border-radius:6px;text-decoration:none;display:block;font-size:1rem;transition:background-color .2s ease}.dropdown-item:hover{background-color:#313244}.dropdown-user-info{padding:.75rem 1rem;border-bottom:1px solid #313244;margin-bottom:.5rem;color:#cdd6f4}.dropdown-user-info strong{color:#fff}.dropdown-user-info small{color:#a6adc8}.desktop-header-items{display:none;align-items:center;gap:1.15rem;height:100%}.mobile-header-items{display:flex;align-items:center;gap:.85rem;height:100%}.user-balance{color:#cdd6f4;font-size:1.1rem;margin-right:1.15rem;white-space:nowrap;display:flex;align-items:center;line-height:1}.creator-balance{color:#f9e2af;font-weight:600;background:#daa5201a;padding:.4rem .8rem;border-radius:6px;border:1px solid rgba(218,165,32,.3)}.mobile-balance{font-size:.9rem;padding:.3rem .6rem;margin-right:.5rem}@media (min-width: 480px) and (max-width: 767px){.site-header{grid-template-columns:auto 1fr auto;padding:0 1.15rem;height:70px}@media (orientation: landscape){.site-header{height:60px!important;padding:0 1rem!important}.logo-image{height:35px!important;aspect-ratio:552 / 464}.logo-text{font-size:1.4rem!important}.header-button{padding:.5rem 1rem!important;font-size:.9rem!important}.header-button-small{padding:.4rem .8rem!important;font-size:.85rem!important}.stream-status-header{padding:.3rem .7rem!important;font-size:.8rem!important}.live-indicator-header{font-size:.8rem!important;gap:.25rem!important}.live-dot-header{width:6px!important;height:6px!important}.menu-toggle-button{width:35px!important;height:35px!important;font-size:1.1rem!important}.pill-avatar{width:30px!important;height:30px!important}.pill-avatar-fallback{width:30px!important;height:30px!important;font-size:1rem!important}.user-balance{font-size:.9rem!important;margin-right:.8rem!important}}.header-right-section{gap:.85rem}.stream-status-header{padding:.45rem .9rem;font-size:.9rem}.live-indicator-header{font-size:.9rem;gap:.35rem}.live-dot-header{width:7px;height:7px}.watching-stream-header{display:none}@media (max-width: 400px){.stream-status-header{padding:.25rem .5rem}.live-dot-header{width:5px;height:5px}}}@media (min-width: 768px){.desktop-header-items{display:flex}.mobile-header-items{display:none}.header-right-section{gap:1.45rem}.desktop-menu-toggle{margin-left:.5rem}}body,#root{padding-top:0!important}.profile-pill{display:flex;align-items:center;gap:.85rem;background-color:#e2e8f0;border:none;border-radius:9999px;padding:7px 18px;cursor:pointer;transition:background-color .2s ease;color:inherit;text-decoration:none}.profile-pill:hover{background-color:#cdd6f4}.pill-info{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}.pill-balance{font-size:.8rem;color:#f0b024;font-weight:600;background:#f5ce6b6d;padding:.2rem .4rem;border-radius:4px;border:1px solid rgba(218,165,32,.741)}.pill-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;flex-shrink:0}.pill-username{font-weight:600;color:#181834;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1;font-size:1rem}@media (max-width: 479px){.site-header{height:60px;padding:0 1rem}.logo-image{height:40px;aspect-ratio:552 / 464}.logo-text{font-size:1.5rem}.profile-pill{padding:5px 14px;gap:.45rem;max-width:140px}.pill-avatar{width:37px;height:37px}.pill-avatar-fallback{width:37px;height:37px;font-size:1.15rem}.pill-username{display:none}.header-button{padding:.6rem 1.15rem;font-size:1rem}.header-button-small{padding:.45rem .9rem;font-size:.95rem}.menu-toggle-button{width:40px;height:40px;font-size:1.2rem}.user-balance{font-size:1rem;margin-right:.8rem}.stream-status-header{padding:.35rem .7rem;font-size:.8rem}.live-indicator-header{font-size:.8rem;gap:.25rem}.header-icon-btn .edit-icon,.edit-icon{width:22px;height:22px}.header-icon-btn{padding:0;margin:0 2px}@media (orientation: portrait){.live-indicator-header .live-text{display:none}}.live-dot-header{width:6px;height:6px}@media (orientation: portrait){.site-header{height:60px!important;padding:0 .5rem!important}.logo-image{height:32px!important;aspect-ratio:552 / 464}.logo-text{font-size:1.2rem!important}.header-button{padding:.4rem .8rem!important;font-size:.85rem!important}.header-button-small{padding:.3rem .6rem!important;font-size:.8rem!important}.menu-toggle-button{width:32px!important;height:32px!important;font-size:1rem!important}.pill-avatar{width:28px!important;height:28px!important}.pill-avatar-fallback{width:28px!important;height:28px!important;font-size:.9rem!important}.user-balance{font-size:.8rem!important;margin-right:.5rem!important}.stream-status-header{padding:.25rem .5rem!important;font-size:.7rem!important}.live-indicator-header{font-size:.7rem!important;gap:.2rem!important}.live-dot-header{width:5px!important;height:5px!important}}@media (orientation: landscape){.live-indicator-header .live-text{display:inline}.site-header{height:60px!important;padding:0 .8rem!important}.logo-image{height:30px!important;aspect-ratio:552 / 464}.logo-text{font-size:1.2rem!important}.header-button{padding:.4rem .8rem!important;font-size:.8rem!important}.header-button-small{padding:.3rem .6rem!important;font-size:.75rem!important}.stream-status-header{padding:.25rem .6rem!important;font-size:.75rem!important}.live-indicator-header{font-size:.75rem!important;gap:.2rem!important}.live-dot-header{width:5px!important;height:5px!important}.menu-toggle-button{width:30px!important;height:30px!important;font-size:1rem!important}.pill-avatar{width:25px!important;height:25px!important}.pill-avatar-fallback{width:25px!important;height:25px!important;font-size:.9rem!important}.user-balance{font-size:.8rem!important;margin-right:.6rem!important}}}@media (max-width: 320px){.site-header{height:60px!important;padding:0 .2rem!important}.logo-image{height:24px!important;aspect-ratio:552 / 464}.logo-text{font-size:.9rem!important}.header-button{padding:.25rem .5rem!important;font-size:.7rem!important}.header-button-small{padding:.2rem .4rem!important;font-size:.65rem!important}.menu-toggle-button{width:24px!important;height:24px!important;font-size:.8rem!important}.pill-avatar{width:20px!important;height:20px!important}.pill-avatar-fallback{width:20px!important;height:20px!important;font-size:.7rem!important}.user-balance{font-size:.6rem!important;margin-right:.2rem!important}.stream-status-header{padding:.15rem .3rem!important;font-size:.6rem!important}.live-indicator-header{font-size:.6rem!important;gap:.1rem!important}.live-dot-header{width:3px!important;height:3px!important}}@media (max-width: 360px){.site-header{height:60px!important;padding:0 .3rem!important}.logo-image{height:28px!important;aspect-ratio:552 / 464}.logo-text{font-size:1rem!important}.header-button{padding:.3rem .6rem!important;font-size:.75rem!important}.header-button-small{padding:.25rem .5rem!important;font-size:.7rem!important}.menu-toggle-button{width:28px!important;height:28px!important;font-size:.9rem!important}.pill-avatar{width:24px!important;height:24px!important}.pill-avatar-fallback{width:24px!important;height:24px!important;font-size:.8rem!important}.user-balance{font-size:.7rem!important;margin-right:.3rem!important}.stream-status-header{padding:.2rem .4rem!important;font-size:.65rem!important}.live-indicator-header{font-size:.65rem!important;gap:.15rem!important}.live-dot-header{width:4px!important;height:4px!important}}.pill-avatar-fallback{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;color:#fff;font-size:1.4rem;font-weight:700;background:#8a2be2;flex-shrink:0;line-height:1}.header-icon-btn{background:none;border:none;padding:7px;border-radius:50%;cursor:pointer;display:flex;align-items:center;transition:background .2s}.header-icon-btn:hover{background:#f3e8ff}.edit-icon{width:32px;height:32px;color:#8a2be2;display:block}.mobile-user-controls{display:flex;align-items:center;gap:.6rem;height:100%}.header-button.save{background-color:#a6e3a1;color:#1e1e2e}.header-button.save:hover{background-color:#94e2d5}.header-button.start-stream{background-color:#f38ba8;color:#1e1e2e}.header-button.start-stream:hover{background-color:#eba0ac}.stream-icon{width:23px;height:23px;stroke:currentColor}.language-selector{padding:0!important;margin:0;border-top:1px solid #313244;max-width:100%}.language-label{padding:.75rem 1rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;user-select:none;font-size:1rem;white-space:nowrap;overflow:hidden}.language-label span{overflow:hidden;text-overflow:ellipsis;max-width:100%}.language-label:hover{background-color:#313244}.language-options{background-color:#313244;border-top:1px solid #45475a;max-width:100%}.language-option{width:90%;padding:.5rem 1rem;text-align:left;background:none;border:none;color:#cdd6f4;cursor:pointer;transition:all .2s ease;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.language-option span{overflow:hidden;text-overflow:ellipsis;max-width:100%}.language-option:hover{background-color:#45475a;color:#eac0f2}.language-option.active{color:#eac0f2;font-weight:600}.language-option span,.language-label span{display:inline-flex;align-items:center;gap:.5rem;flex:1;min-width:0}.language-option svg,.language-label svg{flex-shrink:0}.site-footer{background:linear-gradient(135deg,#1a1a2e,#16213e);color:#a0a0a0;padding:50px 20px 30px;margin-top:auto}.footer-container{max-width:1200px;margin:0 auto}.footer-main{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}.footer-brand{max-width:280px}.footer-logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin-bottom:15px}.footer-logo-img{width:40px;height:40px;border-radius:10px}.footer-logo span{font-size:1.5em;font-weight:700;background:linear-gradient(135deg,#e91e63,#9c27b0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.footer-tagline{color:#888;font-size:.95em;line-height:1.6}.footer-links{display:flex;flex-direction:column;gap:12px}.footer-links h4{color:#fff;font-size:1.05em;font-weight:600;margin-bottom:5px}.footer-links a{color:#888;text-decoration:none;font-size:.95em;transition:color .2s ease}.footer-links a:hover{color:#e91e63}.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding-top:25px}.footer-copyright{color:#666;font-size:.9em;margin:0}.footer-age-notice{display:flex;align-items:center;gap:10px;color:#666;font-size:.85em;margin:0}.age-badge{background:#e91e63;color:#fff;padding:4px 10px;border-radius:4px;font-weight:700;font-size:.9em}@media (max-width: 900px){.footer-main{grid-template-columns:1fr 1fr;gap:30px}.footer-brand{grid-column:1 / -1;max-width:100%;text-align:center}.footer-logo{justify-content:center}}@media (max-width: 600px){.site-footer{padding:40px 15px 25px}.footer-main{grid-template-columns:1fr;text-align:center;gap:25px}.footer-links{align-items:center}.footer-bottom{flex-direction:column;text-align:center}.footer-age-notice{flex-direction:column;gap:8px}}.app-loader{display:flex;justify-content:center;align-items:center;height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e)}.app-loader:after{content:"";width:50px;height:50px;border:3px solid rgba(255,255,255,.1);border-top-color:#e91e63;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.App{display:flex;flex-direction:column;align-items:center;width:100%}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}main,.main-content{padding-top:90px}.app-layout-admin{padding-top:90px;display:flex;width:100%;position:relative}.app-layout-normal{width:100%}.main-content-admin{width:70%;margin-left:30%;padding-top:0;height:calc(100vh - 90px);box-sizing:border-box}@media (max-width: 767px){main,.main-content{padding-top:60px}.app-layout-admin{margin-top:60px;flex-direction:column}.main-content-admin{width:100%;margin-left:0;min-height:calc(100vh - 60px)}}@media (max-width: 480px){main,.main-content{padding-top:60px}}@supports (-webkit-touch-callout: none){main,.main-content{padding-top:90px}@media (max-width: 767px){main,.main-content{padding-top:60px}}@media (max-width: 480px){main,.main-content{padding-top:60px}}}.home-page{display:flex;flex-direction:column;align-items:center;width:100%;padding-top:20px;padding-bottom:50px;position:relative}.main-content-admin .home-page{padding:20px 15px 30px;max-width:100%;box-sizing:border-box;width:100%}.main-content-admin .hero-section{max-width:100%;width:100%;padding:40px 25px;margin-bottom:30px}.main-content-admin .hero-section h1{font-size:2.5em}.main-content-admin .hero-section p{font-size:1.05em}.main-content-admin .creators-section{max-width:100%;width:100%;padding:0 .5rem}.main-content-admin .creators-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;padding:1px}@media (max-width: 767px){.main-content-admin .home-page{padding-left:10px;padding-right:10px}.main-content-admin .hero-section{padding:30px 15px}.main-content-admin .hero-section h1{font-size:1.8em}.main-content-admin .creators-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}.hero-section{background:linear-gradient(45deg,#e1bee7,#f3e5f5);padding:60px 30px;border-radius:25px;margin-bottom:50px;box-shadow:0 10px 40px #0000001a;max-width:1000px;width:100%;box-sizing:border-box;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.hero-section:before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="2" fill="%23FFFFFF" opacity="0.1"/><circle cx="50" cy="60" r="2" fill="%23FFFFFF" opacity="0.1"/><circle cx="90" cy="20" r="2" fill="%23FFFFFF" opacity="0.1"/></svg>');background-size:150px;opacity:.5;z-index:0;pointer-events:none}.hero-section>*{position:relative;z-index:1}.hero-section h1{font-size:3.2em;color:#4a148c;margin-bottom:20px;line-height:1.2}.hero-section p{font-size:1.2em;color:#6a5acd;line-height:1.7;max-width:700px;margin:0 auto 30px}.main-action-btn{margin:.7em 1em;padding:15px 30px;font-size:1.15em}.creators-section{width:100%;max-width:1200px;margin:0 auto 2rem;padding:0 1rem}.creators-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.creators-header h2{margin:0;color:var(--text-color);font-size:1.8rem}.creators-controls{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.loading-message{text-align:center;padding:2rem;background:var(--bg-card);border-radius:15px;border:1px solid var(--border-color)}.loading-message .loading-spinner{width:40px;height:40px;border:4px solid var(--border-color);border-top:4px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}.no-creators-message{text-align:center;padding:2rem;background:var(--bg-card);border-radius:15px;border:1px solid var(--border-color)}.no-creators-message h3{margin-bottom:1rem;color:var(--text-color);font-size:1.4rem}.no-creators-message p{color:var(--text-secondary);margin-bottom:1.5rem}.creators-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,320px));gap:1px;width:100%;max-width:1200px;margin:0 auto;padding:1px;justify-content:center}@media (max-width: 768px){.hero-section{padding:40px 20px}.hero-section h1{font-size:2.2em}.hero-section p{font-size:1em}.main-action-btn{width:100%;margin:.5em 0}.creators-header{flex-direction:column;align-items:flex-start;gap:1rem}.creators-controls{width:100%;justify-content:space-between}.last-update-info{font-size:.8rem;padding:.3rem .6rem}.refresh-btn{font-size:.8rem;padding:.4rem .8rem}.creators-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;padding:1px}.creator-media-wrapper{aspect-ratio:16/9;border-radius:15px 15px 0 0}.creator-media{object-fit:cover;object-position:center}}@media (min-width: 1025px){.creators-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;padding:1px}.creator-media-wrapper{aspect-ratio:16/9;border-radius:20px 20px 0 0}.creator-media{object-fit:cover;object-position:center}}@media (max-width: 480px){.creators-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;padding:1px}.creator-media-wrapper{aspect-ratio:16/9;border-radius:12px 12px 0 0}.creator-media{object-fit:cover;object-position:center}.hero-section{padding:30px 15px}.hero-section h1{font-size:1.8em}.hero-section p{font-size:.9em}}.load-more-trigger{width:100%;min-height:60px;display:flex;justify-content:center;align-items:center;padding:20px 0}.loading-more{display:flex;align-items:center;gap:10px;color:var(--text-secondary, #888);font-size:.9rem}.loading-more .loading-spinner{width:24px;height:24px;border-width:3px}.loading-spinner.small{width:24px;height:24px;border:3px solid var(--border-color, #333);border-top:3px solid var(--primary-color, #e91e63);border-radius:50%;animation:spin 1s linear infinite}.creators-count{text-align:center;color:var(--text-secondary, #888);font-size:.85rem;padding:10px 0 20px;opacity:.7}.creator-list-page{text-align:center;padding:30px 20px;width:100%}.creator-list-page h2{font-size:2.8em;color:#4a148c;margin-bottom:15px}.creator-list-page p{font-size:1.2em;color:#6a5acd;margin-bottom:40px}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;color:#8e24aa;font-size:1.3em}.error-message,.no-creators-message{font-size:1.2em;padding:30px;border-radius:15px;background-color:#fffffff2;box-shadow:0 4px 15px #00000014;max-width:600px;margin:40px auto}.error-message{color:#d32f2f}.no-creators-message{color:#7b1fa2}.creators-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;width:100%;max-width:1200px;margin:0 auto;padding:1px}.creator-card{background-color:#fffffff2;border-radius:20px;box-shadow:0 8px 30px #0000001a;text-align:left;display:flex;flex-direction:column;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;border:1px solid #F3E5F5}.creator-card:hover{transform:translateY(-8px);box-shadow:0 12px 40px #00000026}.creator-card.unavailable{opacity:.8;filter:grayscale(80%);cursor:not-allowed}.creator-media-wrapper{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;background-color:#eee;display:flex;align-items:center;justify-content:center;border-radius:20px 20px 0 0}.creator-media{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.unavailable-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000080;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.8em;font-weight:700;z-index:10}.online-badge{position:absolute;top:15px;right:15px;background-color:#4caf50;color:#fff;padding:8px 15px;border-radius:20px;font-size:.9em;font-weight:600;z-index:5;box-shadow:0 2px 8px #0003}.creator-details{padding:25px;display:flex;flex-direction:column;flex-grow:1}.creator-details h3{font-size:2em;color:#4a148c;margin-bottom:10px}.creator-details .description{font-size:1.05em;color:#6a5acd;line-height:1.7;margin-bottom:20px;flex-grow:1}.creator-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;font-weight:600;font-size:1.1em;color:#8e24aa}.creator-card .connect-btn{width:100%;margin-top:auto;padding:15px}@media (max-width: 768px){.creator-list-page h2{font-size:2.2em}.creator-list-page p{font-size:1em}.creators-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;padding:1px}.creator-card{max-width:none;margin:0}.creator-media-wrapper{aspect-ratio:16/9;border-radius:15px 15px 0 0}.creator-media{object-fit:cover;object-position:center}.creator-details{padding:15px}.creator-details h3{font-size:1.4em}.creator-details .description{font-size:.9em;line-height:1.4}.creator-info{font-size:.9em;margin-bottom:15px}.online-badge{font-size:.8em;padding:6px 12px}}@media (min-width: 1025px){.creators-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;padding:1px}.creator-media-wrapper{aspect-ratio:16/9}.creator-media{object-fit:cover;object-position:center}}@media (min-width: 769px) and (max-width: 1024px){.creators-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;padding:1px}.creator-media-wrapper{aspect-ratio:16/9;border-radius:18px 18px 0 0}.creator-media{object-fit:cover;object-position:center}}@media (max-width: 480px){.creators-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;padding:1px}.creator-media-wrapper{aspect-ratio:16/9;border-radius:12px 12px 0 0}.creator-media{object-fit:cover;object-position:center}.creator-details{padding:10px}.creator-details h3{font-size:1.2em;margin-bottom:5px}.creator-details .description{font-size:.8em;line-height:1.3;margin-bottom:10px}.creator-info{font-size:.8em;margin-bottom:10px}.online-badge{font-size:.7em;padding:4px 8px;top:8px;right:8px}}.creator-video-card{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#1a1a1a,#2d2d2d);box-shadow:0 8px 24px #0006;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;aspect-ratio:16/10;width:150px;max-width:100%}.creator-video-card:hover,.creator-video-card.hovered{transform:translateY(-4px) scale(1.01);box-shadow:0 12px 32px #00000080}.video-preview{position:relative;width:100%;height:175px;overflow:hidden;background:#000}.preview-image{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;background:#000;border-radius:0}.preview-image[src^="data:image/svg"]{object-fit:contain;background:linear-gradient(135deg,#2c2c2c,#404040)}.preview-image[src^="blob:"],.preview-image[src^="data:image/jpeg"],.preview-image[src^="data:image/png"]{object-fit:cover}.creator-video-card:hover .preview-image{transform:scale(1.05)}.video-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}.video-overlay>*{pointer-events:auto}.status-indicators{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:8px;z-index:3}.status-dot{width:10px;height:10px;border-radius:50%;background:currentColor;animation:pulse 2s infinite}.status-dot.online{color:#4caf50}.status-dot.offline{color:#888}.live-indicator{display:flex;align-items:center;gap:4px;padding:4px 8px;background:#f44336e6;backdrop-filter:blur(10px);border-radius:12px;font-size:11px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.5px;animation:livePulse 2s infinite}.live-dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.5s infinite}@keyframes livePulse{0%,to{background:#f44336e6;transform:scale(1)}50%{background:#f44336;transform:scale(1.02)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.hover-controls{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(-10px);transition:all .3s ease}.creator-video-card:hover .hover-controls{opacity:1;transform:translateY(0)}.hover-controls button{width:36px;height:36px;border-radius:50%;background:#000c;backdrop-filter:blur(10px);border:none;color:#fff;font-size:16px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.hover-controls button:hover{background:#000000e6;transform:scale(1.1)}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(45deg,#000c,#0009);backdrop-filter:blur(5px);z-index:4}.loading-text{color:#fff;font-size:12px;margin-top:8px;text-align:center;font-weight:500}.error-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(45deg,#f44336e6,#f44336b3);backdrop-filter:blur(5px);z-index:4;padding:16px}.error-text{color:#fff;font-size:12px;text-align:center;font-weight:500;margin-bottom:12px}.retry-btn{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff;padding:6px 12px;border-radius:6px;font-size:11px;cursor:pointer;transition:all .3s ease}.retry-btn:hover{background:#ffffff4d;transform:scale(1.05)}.creator-avatar{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#333,#555);gap:12px;position:relative}.avatar-placeholder{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#666,#999);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5);border:3px solid rgba(255,255,255,.2)}.frame-error{position:absolute;bottom:8px;left:8px;right:8px;padding:8px 12px;background:linear-gradient(45deg,#f44336e6,#e91e63e6);border-radius:20px;color:#fff;font-size:11px;font-weight:500;text-align:center;display:flex;align-items:center;justify-content:space-between;gap:8px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.frame-error .refresh-btn{background:#fff3;border:none;border-radius:50%;width:24px;height:24px;color:#fff;cursor:pointer;font-size:12px;transition:all .3s ease;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px)}.frame-error .refresh-btn:hover{background:#ffffff4d;transform:scale(1.1)}.creator-info{padding:16px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.8));position:absolute;bottom:0;left:0;right:0;z-index:2}.creator-name{font-size:16px;font-weight:700;color:#fff;margin:0 0 8px;text-shadow:0 2px 4px rgba(0,0,0,.5)}.creator-stats{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:#fffc}.creator-stats .status{display:flex;align-items:center;gap:4px;font-weight:700}.creator-stats .status.online{color:#4caf50}.creator-stats .status.offline{color:#888}.last-update{font-size:11px;color:#fff9}.creator-description{font-size:13px;color:#ffffffb3;margin:8px 0 0;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis}@media (max-width: 768px){.creator-video-card{width:100%;max-width:320px}.video-preview{aspect-ratio:16/9}.status-indicators{top:8px;left:8px;gap:6px}.live-indicator{font-size:10px;padding:3px 6px}.hover-controls{top:8px;right:8px}.hover-controls button{width:32px;height:32px;font-size:14px}.creator-info{padding:12px}.creator-name{font-size:14px}.creator-stats{font-size:11px}.creator-description{font-size:12px}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.loading-spinner{width:32px;height:32px;border:3px solid rgba(255,255,255,.1);border-top:3px solid #4CAF50;border-radius:50%;animation:spin 1s linear infinite}.loading-spinner.small{width:20px;height:20px;border-width:2px}.creator-video-card [style*=debug]{background:#00000080;padding:2px 6px;border-radius:4px;font-family:monospace;user-select:none}.creator-nickname-overlay{position:absolute;left:0;right:0;bottom:0;padding:12px 0 10px;background:linear-gradient(180deg,#0000,#000000b3);color:#fff;font-size:1.15rem;font-weight:600;text-align:center;z-index:3;border-bottom-left-radius:16px;border-bottom-right-radius:16px;text-shadow:0 2px 8px rgba(0,0,0,.7);pointer-events:none}.creator-card{width:320px;max-width:100%;border-radius:16px;box-shadow:0 4px 24px #0000001f;overflow:hidden;background:#fff;display:flex;flex-direction:column;align-items:center;margin:0 auto 1px}.creator-preview-img{width:100%;max-width:320px;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid #eee;background:#f3f3f3}.creator-card.clickable-card{position:relative;cursor:pointer;transition:box-shadow .2s,transform .2s;outline:none}.creator-card.clickable-card:hover,.creator-card.clickable-card:focus{box-shadow:0 8px 32px #667eea2e,0 2px 8px #0000001a;transform:translateY(-2px) scale(1.01)}.creator-card .creator-info,.creator-card .creator-name,.creator-card .creator-stats{display:none!important;background:none!important;color:inherit!important;position:static!important;padding:0!important;margin:0!important}.creator-card button{display:none!important}.creator-card.hovering{border:2px solid #4CAF50;box-shadow:0 0 20px #4caf504d}.hover-indicator{margin-left:8px;font-size:14px;color:#4caf50;animation:hoverPulse 1.5s infinite}@keyframes hoverPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}.video-preview-indicator{position:absolute;top:8px;right:8px;background:#f00c;color:#fff;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:700;z-index:15;animation:pulse 2s infinite}.video-preview-indicator span{font-size:9px;letter-spacing:.5px}.video-preview-container{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;border-radius:16px;overflow:hidden;z-index:10;opacity:0;transform:scale(.95);transition:all .3s cubic-bezier(.4,0,.2,1)}.video-preview-container.visible{opacity:1;transform:scale(1)}.video-preview-element{width:100%;height:100%;object-fit:cover;background:#000;border-radius:16px}.video-preview-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;color:#fff;z-index:11}.video-preview-loading .loading-spinner{width:24px;height:24px;border:2px solid rgba(255,255,255,.3);border-top:2px solid #fff;border-radius:50%;animation:spin 1s linear infinite}.video-preview-loading span{font-size:12px;font-weight:500;opacity:.8}.video-preview-error{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:#ff6b6b;z-index:11;text-align:center;max-width:80%}.video-preview-error span{font-size:11px;font-weight:500;opacity:.9;line-height:1.3}@media (max-width: 768px){.video-preview-container{display:none}}@media (min-width: 769px){.video-preview-container{image-rendering:optimizeSpeed;image-rendering:-moz-crisp-edges;image-rendering:-webkit-crisp-edges;image-rendering:pixelated}.video-preview-element{will-change:transform;backface-visibility:hidden}}.creator-card:hover .video-preview-container{opacity:1;transform:scale(1)}.creator-card .video-preview-container{transition-delay:.1s}.creator-card:hover .video-preview-container{transition-delay:0s}*,*:before,*:after{box-sizing:border-box}:root{font-family:Poppins,sans-serif;line-height:1.6;font-weight:400;color-scheme:light;color:#333;background-color:#f8f9fa;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{height:100%}body{margin:0;display:flex;flex-direction:column;min-height:100vh;background:linear-gradient(135deg,#e0f7fa,#f3e5f5);overflow-x:hidden;width:100%;max-width:100vw}#root{margin:0 auto;text-align:center;flex-grow:1;display:flex;flex-direction:column;width:100%;max-width:100vw;overflow-x:hidden;min-height:100vh}h1,h2,h3{color:#4a148c;font-weight:700}p{color:#4527a0}button,.btn{border-radius:30px;border:none;padding:.9em 2em;font-size:1.05em;font-weight:600;font-family:inherit;cursor:pointer;transition:all .3s ease;margin:.7em;box-shadow:0 4px 12px #0000001a;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}button.btn-primary,.btn.btn-primary{background-color:#d84315;color:#fff}button.btn-primary:hover,.btn.btn-primary:hover{background-color:#bf360c;transform:translateY(-2px);box-shadow:0 6px 16px #00000026}button.btn-secondary,.btn.btn-secondary{background-color:#9c27b0;color:#fff}button.btn-secondary:hover,.btn.btn-secondary:hover{background-color:#7b1fa2;transform:translateY(-2px);box-shadow:0 6px 16px #00000026}button.btn-tertiary,.btn.btn-tertiary{background-color:#eceff1;color:#4a148c;box-shadow:none}button.btn-tertiary:hover,.btn.btn-tertiary:hover{background-color:#cfd8dc;transform:none;box-shadow:none}.card{background-color:#fffffff2;border-radius:20px;box-shadow:0 8px 30px #00000014;padding:30px;margin-bottom:30px;backdrop-filter:blur(5px)}form{display:flex;flex-direction:column;gap:1.8em;margin:0 auto;padding:35px;background-color:#fffffff2;border-radius:20px;box-shadow:0 8px 30px #00000014;text-align:left;backdrop-filter:blur(5px)}label{display:block;margin-bottom:.7em;font-weight:600;color:#4a148c}input[type=text],input[type=email],input[type=password],input[type=number],textarea{width:calc(100% - 24px);padding:14px 12px;border:1px solid #D1C4E9;border-radius:10px;font-size:1em;box-sizing:border-box;transition:border-color .3s ease,box-shadow .3s ease;background-color:#f8f9fa;color:#333}input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=number]:focus,textarea:focus{border-color:#8e24aa;box-shadow:0 0 0 3px #8e24aa33;outline:none}textarea{resize:vertical;min-height:100px}.text-center{text-align:center}.margin-top-large{margin-top:40px}.spinner{border:6px solid #f3f3f3;border-top:6px solid #8E24AA;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite;margin-bottom:15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 480px){body{font-size:14px}button,.btn{padding:.8em 1.5em;font-size:1em}input[type=text],input[type=email],input[type=password],textarea{font-size:16px}}@media (max-width: 360px){body{font-size:13px}button,.btn{padding:.7em 1.2em;font-size:.9em}}html[data-text-dir=rtl] :is(p,span,h1,h2,h3,h4,h5,h6,label,small,strong,em,a,li,blockquote,figcaption,th,td){direction:rtl;unicode-bidi:plaintext}html[data-text-dir=rtl] input,html[data-text-dir=rtl] textarea{direction:rtl}