:root{
--bg-1: #06061a;
--bg-2: #0f0b1a;
--accent-1: #7b5cff; /* purple */
--accent-2: #24d1ff; /* cyan */
--galaxy-glow: linear-gradient(45deg, rgba(123,92,255,0.35), rgba(36,209,255,0.25));
--focus-shadow: 0 0 40px 8px rgba(123,92,255,0.22), 0 0 90px 18px rgba(36,209,255,0.08);
}


/* reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Segoe UI, Roboto, Arial, sans-serif;background:radial-gradient(ellipse at 10% 10%, rgba(36,209,255,0.02), transparent 10%), radial-gradient(ellipse at 90% 90%, rgba(123,92,255,0.02), transparent 10%), var(--bg-1);color:#fff}


.tv-app{display:flex;height:100vh;overflow:hidden}


/* Sidebar */
.tv-sidebar{width:260px;background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.75));padding:28px 18px;display:flex;flex-direction:column;gap:24px}
.logo img{width:160px;display:block;margin:0 auto}
.tv-menu{display:flex;flex-direction:column;gap:14px}
.tv-menu-item{background:transparent;border:none;color:#bbc0ff;padding:12px 16px;text-align:left;font-size:22px;border-radius:8px;cursor:pointer;outline:none}
.tv-menu-item.focused{color:#fff;background:transparent;box-shadow:var(--focus-shadow);transform:translateX(4px)}


/* Main area */
.tv-main{flex:1;padding:34px 48px 48px 48px;overflow:auto}
.tv-header{margin-bottom:18px}
.title{font-size:34px;letter-spacing:1px;color:#fff;margin:0;text-shadow:0 2px 12px rgba(0,0,0,0.7)}


.categories{display:flex;flex-direction:column;gap:42px}
.category{display:flex;flex-direction:column;gap:12px}
.category h2{font-size:28px;margin:0 0 6px 0}


/* Carousel row */
.row{position:relative}
.movie-grid{display:flex;gap:18px;overflow-x:auto;padding:12px 6px;scroll-behavior:smooth}
.movie-grid::-webkit-scrollbar{display:none}


/* Movie card */
.movie-card{width:260px;flex:0 0 260px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.25));backdrop-filter: blur(6px);cursor:pointer;display:flex;flex-direction:column;align-items:center;transition:transform .18s ease, box-shadow .18s ease;border:2px solid rgba(255,255,255,0.02);}
.movie-card img{width:100%;height:380px;object-fit:cover;border-radius:10px}
.movie-card h3{padding:12px;font-size:18px;text-align:center;color:#fff}


/* Focused state (galaxy glow) */
.movie-card.focused{transform:translateY(-10px) scale(1.06);box-shadow:var(--focus-shadow);border-color:rgba(123,92,255,0.6)}


/* Sidebar arrows and nav helpers for TVs with pointer */
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);font-size:40px;padding:6px;border-radius:8px;border:none;background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.45));color:#fff}
.carousel-arrow.left{left:6px}
.carousel-arrow.right{right:6px}


/* Watchlist button */
.watchlist-btn{position:fixed;right:28px;bottom:24px;padding:14px 22px;border-radius:40px;border:none;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:white;font-size:16px;box-shadow:0 6px 20px rgba(0,0,0,0.5)}


/* Responsive adjustments for some TVs */
@media (max-height:700px){.movie-card{width:210px}.movie-card img{height:320px}}


/* Accessibility focus for keyboard users */
:focus{outline:none}