*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:#0e0e10;color:#efeff1;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{min-height:100vh;display:flex;flex-direction:column}.nav{background-color:#18181b;border-bottom:1px solid #2e2e35;padding:1rem 1.5rem}.nav-container{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.nav-logo{font-size:1.5rem;font-weight:700;color:#9147ff;margin:0}.nav-links{display:flex;gap:1.5rem}.nav-link{color:#adadb8;text-decoration:none;font-weight:500;transition:color .25s ease}.nav-link:hover{color:#efeff1}.nav-link.active{color:#9147ff}.main-content{flex:1;max-width:1280px;width:100%;margin:0 auto;padding:3rem 1.5rem}.home h1{font-size:2rem;margin-bottom:.5rem}.home p{color:#adadb8;margin-bottom:3rem}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-bottom:3rem}.feature-card{background-color:#18181b;border:1px solid #2e2e35;border-radius:8px;padding:1.5rem;transition:transform .25s ease,border-color .25s ease}.feature-card:hover{transform:translateY(-2px);border-color:#9147ff}.feature-card h2{font-size:1.125rem;margin-bottom:.5rem}.feature-card p{color:#adadb8;margin-bottom:0}.getting-started{background-color:#18181b;border:1px solid #2e2e35;border-radius:8px;padding:1.5rem}.getting-started h3{margin-bottom:1rem}.getting-started ol{margin-left:1.5rem;color:#adadb8}.getting-started ol li{margin-bottom:.5rem}.watch-page h1,.dashboard-page h1{margin-bottom:1.5rem}.watch-page h1{margin-bottom:.5rem}.watch-page .stream-description{color:#adadb8;margin-bottom:2rem}.watch-page .stream-info{margin-top:3rem;background-color:#18181b;border:1px solid #2e2e35;border-radius:8px;padding:1.5rem}.watch-page .stream-info h2{margin-bottom:1rem}.watch-page .stream-info ol{margin-left:1.5rem;color:#adadb8}.watch-page .stream-info ol li{margin-bottom:1rem}.watch-page .stream-info ol li ul{margin-top:.5rem;margin-left:1rem;list-style-type:disc}.watch-page .stream-info ol li strong{color:#efeff1}.video-player{width:100%;max-width:1280px;margin:0 auto}.video-container{position:relative;width:100%;padding-top:56.25%;background-color:#000;border-radius:8px;overflow:hidden}.video-container .video-element{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}.video-container .stream-status{position:absolute;top:1rem;left:1rem;padding:.25rem 1rem;border-radius:4px;font-size:.875rem;font-weight:700;text-transform:uppercase;background-color:#000000b3;color:#adadb8;display:flex;align-items:center;justify-content:center;gap:.25rem}.video-container .stream-status.live{background-color:#eb0400;color:#fff}.video-container .stream-status.live .live-dot{width:8px;height:8px;border-radius:50%;background-color:#fff;animation:pulse 2s ease-in-out infinite}.video-container .stream-status.offline{background-color:#000c;color:#adadb8}.video-container .stream-status.unknown{background-color:#000000b3;color:#adadb8}.video-container .quality-selector{position:absolute;bottom:1rem;right:1rem}.video-container .quality-selector select{padding:.25rem .5rem;background-color:#000000b3;color:#efeff1;border:1px solid #2e2e35;border-radius:4px;font-size:.875rem;cursor:pointer;transition:background-color .25s ease}.video-container .quality-selector select:hover{background-color:#000000e6}.video-container .quality-selector select:focus{outline:2px solid #9147ff;outline-offset:2px}.player-controls{position:absolute;bottom:1rem;left:1rem;display:flex;gap:.5rem}.player-controls button{padding:.5rem 1rem;background-color:#000000b3;color:#efeff1;border:1px solid #2e2e35;border-radius:4px;cursor:pointer;font-size:.875rem;transition:background-color .25s ease}.player-controls button:hover{background-color:#000000e6}.player-info{display:flex;gap:1.5rem;margin-top:1rem;padding:1rem;background-color:#18181b;border:1px solid #2e2e35;border-radius:8px}.player-info .info-item{display:flex;gap:.5rem}.player-info .info-item .label{color:#adadb8;font-size:.875rem}.player-info .info-item .value{color:#efeff1;font-size:.875rem;font-weight:500}.player-error{margin-top:1rem;padding:1rem;background-color:#f047471a;border:1px solid #f04747;border-radius:8px;color:#f04747}.player-error strong{font-weight:700}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}