@import "https://fonts.googleapis.com/css2?family=Krona+One&display=swap";@import "https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap";@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap";.color-picker-inline{align-items:center;gap:.75rem;display:flex}.color-picker-inline input[type=color]{background-color:#545872;padding-left:.15rem;padding-right:.15rem}.opacity-control{flex:1;align-items:center;gap:.5rem;display:flex}.opacity-control label{color:#999;white-space:nowrap;font-size:.75rem}.opacity-slider{flex:1}.landing-page{justify-content:flex-start;align-items:center;min-height:calc(100vh - 9rem);padding:2rem 0;display:flex}.landing-content{text-align:left;width:100%;max-width:50rem}.landing-content h1{color:#fff;margin-bottom:1rem;font-family:Krona One;font-size:2.5rem}.landing-content>p{color:#ccc;margin-bottom:2rem;font-size:1.125rem}.landing-description{text-align:left;border-radius:.5rem;margin-top:4rem;margin-bottom:4rem}.landing-description p{color:#ccc;margin-bottom:1rem}.landing-description p:last-child{margin-bottom:0}.landing-description ul{grid-template-columns:repeat(2,1fr);gap:.5rem;margin:1rem 0;padding-left:0;list-style:none;display:grid}.landing-description ul li{color:#fff;background:#333;border-radius:.25rem;padding:.5rem}.landing-description ul li:before{content:"•";color:#667eea;margin-right:.5rem}.landing-actions{grid-template-columns:1fr auto 1fr;align-items:start;gap:2rem;margin-top:2rem;display:grid}.landing-action-section{flex-direction:column;gap:1rem;display:flex}.landing-action-section h3{color:#fff;margin-bottom:.5rem;font-size:1.125rem}.landing-action-section .form-group{margin-bottom:0}.landing-action-section .form-group input[type=text]{text-align:left;font-size:.75rem}.landing-divider{color:#ccc;padding-top:3rem;font-size:1rem;font-weight:500}.error-message{color:#ef4444;text-align:center;background:#ef44441a;border:1px solid #ef44444d;border-radius:.5rem;margin-bottom:1.5rem;padding:1rem}@media (width<=768px){.landing-actions{grid-template-columns:1fr;gap:1.5rem}.landing-divider{text-align:center;padding-top:0}}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#fff;background:#05081a;font-family:Inconsolata,sans-serif}.app{max-width:75rem;margin:0 auto;padding:0 1.5rem 1.5rem}.header{z-index:100;background:#05081a;border-bottom:1px solid #545872;justify-content:space-between;align-items:center;gap:1.5rem;margin-bottom:2rem;padding-top:1.5rem;padding-bottom:1rem;display:flex;position:sticky;top:0}.header .header-content{flex:1}.header .header-content h1{color:#fff;margin-bottom:.5rem;font-family:Krona One;font-size:1.5rem}.header .header-content p{color:#999;font-size:1rem}.header .header-buttons{flex-shrink:0;gap:.5rem;display:flex}.header .header-buttons button{white-space:nowrap}.status-bar{border-radius:.5rem;gap:1.5rem;margin-bottom:2rem;display:flex}.status-item{flex:1}.status-item label{color:#999;text-transform:uppercase;margin-bottom:.25rem;font-size:.75rem;display:block}.status-item .value{font-size:1rem;font-weight:600}.status-indicator{border-radius:50%;width:.5rem;height:.5rem;margin-right:.5rem;display:inline-block}.status-indicator.connected{background:#35e165}.status-indicator.disconnected{background:#6b7280}.status-indicator.connecting{background:#fbbf24;animation:1.5s ease-in-out infinite pulse}.status-indicator.error{background:#ef4444}.status-indicator.running{background:#3b82f6}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.section{border-radius:.25rem;margin-bottom:1.5rem}.section h2{color:#fff;margin-bottom:1rem;font-size:1.5rem}.section.url label{text-transform:uppercase;color:#ccc;margin-bottom:.5rem;font-size:.75rem}.section.styling{margin-top:2rem}.section.danger-zone{background:#ef44440d;border:0 solid #ef4444;border-radius:.25rem;margin-top:3rem;padding:1.5rem}.section.danger-zone h2{color:#fff}.section.danger-zone p{color:#ccc;margin-bottom:1rem}.layout-options{border-bottom:1px solid #545872;gap:1rem;margin-bottom:2rem;padding-bottom:1.5rem;display:flex}.layout-options .form-group{flex:1;margin-bottom:0}.styling-container{gap:1.5rem;display:flex}.styling-container.horizontal{flex-direction:column}.styling-container.horizontal .preview-area{width:100%}.styling-container.horizontal .styling-controls{grid-template-columns:repeat(2,1fr);gap:1rem;width:100%;display:grid}.styling-container.vertical{flex-direction:row}.styling-container.vertical .preview-area{flex:1;min-width:0}.styling-container.vertical .styling-controls{flex-direction:column;flex:1;gap:1rem;display:flex}.styling-container h3{color:#fff;margin-bottom:1rem;font-size:1rem}.preview-area .preview-container{border-radius:.5rem;gap:.5rem;padding:1rem;display:flex;position:relative;overflow:hidden}.preview-area .preview-container:before,.preview-area .preview-container:after{z-index:-1;content:"";animation-duration:3s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:0;background-color:#05081a;background-position:50%;background-repeat:no-repeat;background-size:cover;transition:all .15s ease-in-out;position:absolute;inset:0}.preview-area .preview-container:before{background-image:radial-gradient(at 27% 68%,#9ff769 0,#0000 50%),radial-gradient(at 69% 18%,#d348ef 0,#0000 50%),radial-gradient(at 7% 47%,#75faaa 0,#0000 50%),radial-gradient(at 41% 29%,#8fa9fe 0,#0000 50%),radial-gradient(at 22% 25%,#f7f745 0,#0000 50%),radial-gradient(at 83% 75%,#db8ffa 0,#0000 50%),radial-gradient(at 93% 60%,#58dad8 0,#0000 50%);animation-name:animatedgradienbefore}.preview-area .preview-container:after{background-image:radial-gradient(at 64% 3%,#f98a95 0,#0000 50%),radial-gradient(at 94% 67%,#b5dd78 0,#0000 50%),radial-gradient(at 79% 48%,#e5c852 0,#0000 50%),radial-gradient(at 44% 1%,#f7c29c 0,#0000 50%),radial-gradient(at 65% 99%,#90a2f3 0,#0000 50%),radial-gradient(at 59% 85%,#82f3a4 0,#0000 50%),radial-gradient(at 68% 23%,#73e8e2 0,#0000 50%);animation-name:animatedgradientafter}@keyframes animatedgradienbefore{0%{opacity:1}to{opacity:0}}@keyframes animatedgradientafter{0%{opacity:0}to{opacity:1}}.preview-area .preview-container.vertical{min-height:400px}.preview-area .preview-message{border-radius:.375rem;flex-shrink:0;padding:.5rem .75rem}.preview-area .preview-message-header{align-items:center;gap:.375rem;margin-bottom:.25rem;display:flex}.preview-area .preview-message-text{overflow-wrap:anywhere;word-break:break-word;line-height:1.4}.preview-area .preview-username{font-weight:700}.preview-area .preview-message-compact img{vertical-align:middle;margin-right:.375rem;display:inline-block}.preview-area .preview-message-compact .preview-username{margin-right:.25rem;display:inline}.preview-area .preview-message-compact .preview-message-text{display:inline}.preview-area .preview-message.compact .preview-message-header{margin-bottom:0}.styling-controls .control-section h4{text-transform:uppercase;color:#ccc;margin-bottom:1rem;padding-bottom:.5rem;font-size:.875rem;font-weight:600}.styling-controls .control-section:not(:last-child){margin-bottom:2rem}.form-group{margin-bottom:1rem}.form-group label{color:#ccc;margin-bottom:.5rem;font-size:1rem;display:block}.form-group input[type=text],.form-group input[type=number],.form-group select{color:#fff;background:#000;border:1px solid #545872;border-radius:.25rem;width:100%;padding:.5rem;font-size:1rem}.form-group input[type=text]:hover,.form-group input[type=number]:hover,.form-group select:hover{border-color:#fff}.form-group input[type=text]:focus,.form-group input[type=number]:focus,.form-group select:focus{border-color:#fff;outline:none}.form-group select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1rem;padding:.5rem 2.5rem .5rem .5rem}.form-group select:focus{border-color:#fff;outline:none}.form-group input[type=range]{-webkit-appearance:none;-moz-appearance:none;background-color:#545872;border-radius:.5rem;width:100%;height:4px}.form-group input[type=color]{cursor:pointer;background-color:#545872;border:#0000;border-radius:.25rem;width:2.5rem;height:2.5rem;padding-left:.15rem;padding-right:.15rem}.form-group input[type=color]:focus{border-color:#667eea;outline:none}.form-group input[type=checkbox]{margin-right:.5rem}.form-group.options{justify-content:space-between;align-items:center;display:flex}.form-group.options label{margin-bottom:0}.button{color:#fff;cursor:pointer;background:#000;border:1px solid #545872;border-radius:.25rem;padding:.5rem 1rem;font-size:.75rem;font-weight:600;transition:background .2s}.button:hover{color:#000;background:#fff}.button:disabled{cursor:not-allowed;background:#444}.button.secondary{background:0 0;border:none}.button.secondary:hover{color:#fff;text-decoration:underline}.button.danger{background:#ef4444;border:none}.button.danger:hover{background:#dc2626}.button.pending-save{color:#000;background:#35e165;border:1px solid #35e165}.button.pending-save:hover{color:#000;background:#2bc455}.button.primary{color:#000;background-color:#fff}.button.primary:hover{color:#fff;background-color:#000;border-color:#fff}.button:disabled{opacity:.3;background-color:#0000}.button:disabled:hover{color:#fff}.url-display{background:#000;border:1px solid #545872;border-radius:.25rem;align-items:center;gap:.5rem;margin-top:.5rem;padding:.5rem 1rem;display:flex}.url-display code{color:#fff;flex:1;font-family:Courier New,monospace;font-size:.75rem}.grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;display:grid}.grid.channels{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:4rem}.grid.channels .section{margin-bottom:1rem}.platform-section{border-radius:1rem}.platform-section h3{align-items:center;gap:.5rem;margin-bottom:.5rem;font-size:1rem;display:flex}.platform-section h3.platform-header{justify-content:space-between;gap:.75rem}.toggle{appearance:none;cursor:pointer;background:#000;border:none;border-radius:.25rem;width:1.75rem;height:1rem;padding:0;transition:background-color .3s;position:relative}.toggle.on{background:#35e165}.toggle.off{background:#545872}.toggle .toggle-knob{background:#fff;border-radius:.25rem;width:.75rem;height:.75rem;transition:left .3s;position:absolute;top:2px;left:2px;box-shadow:0 0 1px #00000080}.toggle.on .toggle-knob{left:calc(100% - .75rem - 2px)}.toggle:focus-visible{outline-offset:2px;outline:2px solid #667eea}.channels-list{flex-direction:column;gap:.5rem;display:flex}.channel-item{align-items:center;gap:.5rem;display:flex}.channel-item input{flex:1}.icon-button{color:#fff;cursor:pointer;background:#333;border:none;border-radius:.25rem;padding:.5rem;font-size:1rem}.icon-button:hover{background:#444}.footer{color:#999;border-top:1px solid #545872;justify-content:space-between;align-items:center;gap:1rem;margin-top:2rem;padding-top:1.5rem;font-size:.8125rem;display:flex}.footer-links{align-items:center;gap:.75rem;display:flex}.footer-links a{color:#999;text-decoration:none}.footer-links a:hover{color:#fff;text-decoration:underline}.footer-divider{background:#545872;width:1px;height:.75rem}