/* RG3 Premium PC/VIDAA: lightweight compositing, compact navigation, content-first surfaces. */
:root{--bg:#080b10;--s:#10151c;--panel:#141b24;--border:#29313c;--text:#f3f5f7;--muted:#9daab7;--gold:#8ac8df;--aqua:#8ac8df}
html,body{background:#080b10;color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
body .shell{background:radial-gradient(ellipse at 80% -15%,#182b3a 0%,#0b1017 47%,#080b10 100%)!important}
body .sidebar{width:174px!important;min-width:174px!important;padding:20px 9px!important;background:#0c1118f5!important;border-right:1px solid #ffffff0c!important;transition:width .16s ease,min-width .16s ease!important}
body .sidebar:focus-within{width:192px!important;min-width:192px!important}
body .logo{font-size:22px!important;letter-spacing:.4px!important;padding:7px 11px 22px!important}
body .logo span{font-size:10px!important;color:#8395a4!important}
body .logo b,body .logo small{color:#8ac8df!important}
body .nav{font-size:13px!important;min-height:39px!important;padding:8px 10px!important;margin-bottom:3px!important;border:0!important;border-radius:8px!important;gap:10px!important;font-weight:500!important}
body .nav span{font-size:19px!important;width:22px!important;flex:0 0 22px!important;color:#8d9caa!important}
body .nav.active{background:#ffffff12!important;border:0!important;color:#fff!important}
body .nav:focus{background:#1b3444!important}
body .sidebar-footer{font-size:10px!important;padding:8px!important}
body .app-area{padding:20px 26px 10px!important;background:transparent!important}
body .topbar{padding:0 0 14px!important;margin:0 0 10px!important;border-bottom:1px solid #ffffff0b!important}
body .topbar h1{font-size:24px!important;font-weight:620!important;letter-spacing:-.45px!important}
body .eyebrow{font-size:9px!important;letter-spacing:1.1px!important;color:#8e9daa!important}
body .status-pill{font-size:10px!important;font-weight:500!important;padding:6px 10px!important;background:#ffffff0a!important;color:#aebbc6!important;border:1px solid #ffffff13!important}
body #screen{padding:8px 3px 28px!important}
body .hero{min-height:0!important;padding:21px 24px!important;margin:0 0 20px!important;border:0!important;border-radius:12px!important;background:linear-gradient(110deg,#1b3040,#141c28 65%,#101720)!important;box-shadow:inset 0 1px #ffffff0b!important}
body .hero h2{font-size:23px!important;letter-spacing:-.5px!important;margin-bottom:5px!important}
body .hero p{font-size:13px!important;line-height:1.45!important;margin:4px 0 15px!important;max-width:600px!important}
body button{border:1px solid transparent!important;border-radius:8px!important;background:#ffffff0c!important;color:#eaf0f5!important;transition:background-color .12s ease,border-color .12s ease!important}
body button:hover{background:#ffffff16!important}
body button:focus,body .tile:focus,body .tv-category:focus,body .channel-row:focus{outline:2px solid #8ac8df!important;outline-offset:1px!important;box-shadow:0 0 0 3px #8ac8df26!important;transform:none!important}
body .cta{background:#d9e8f0!important;color:#101821!important;font-size:13px!important;font-weight:650!important;min-height:35px!important;padding:8px 14px!important}
body .secondary,body .chip{font-size:12px!important;min-height:34px!important;padding:7px 11px!important}
body .section-head{margin:12px 0 11px!important}
body .section-head h2{font-size:17px!important;font-weight:630!important}
body .grid,body .tv-layout .grid{grid-template-columns:repeat(auto-fill,minmax(134px,1fr))!important;gap:12px!important}
body .tile{background:#121923!important;border:1px solid #ffffff0a!important;border-radius:9px!important;overflow:hidden!important;min-height:0!important}
body .tile .art{aspect-ratio:2/3!important;height:auto!important;background:linear-gradient(145deg,#263443,#101720)!important}
body .tile-text{padding:9px 10px!important;min-height:53px!important}
body .tile-text strong{font-size:12px!important;font-weight:600!important}
body .tile-text small{font-size:10px!important}
body .badged{font-size:9px!important;padding:4px 6px!important;background:#0c121bcd!important;color:#dce7ef!important}
body .panel{padding:17px!important;border:1px solid #ffffff0d!important;border-radius:11px!important;background:#141b24!important}
body .empty{padding:20px!important;border:1px solid #ffffff0d!important;background:#111923!important;border-radius:9px!important;font-size:13px!important}
body .text-input{font-size:14px!important;padding:10px 12px!important;border:1px solid #3b4b59!important;border-radius:7px!important;background:#0d151f!important}
body .field label{font-size:12px!important}
body .tv-layout{grid-template-columns:minmax(0,1fr) 245px!important;column-gap:12px!important}
body .tv-category-rail{background:transparent!important;border:0!important;padding:2px 0 8px!important;max-height:70px!important;margin-bottom:3px!important}
body .tv-category-scroll{height:43px!important;max-height:43px!important;gap:6px!important}
body .tv-category{min-width:85px!important;height:35px!important;padding:7px 10px!important;font-size:12px!important}
body .tv-content{background:transparent!important;border:0!important;padding:0!important}
body .tv-content-head{min-height:46px!important}
body .tv-content-head h2{font-size:18px!important}
body .tv-preview{background:#121a23!important;border:1px solid #ffffff12!important;border-radius:10px!important;padding:10px!important;box-shadow:none!important}
body .tv-layout .channel-list{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))!important;gap:10px!important}
body .tv-layout .channel-row{background:#141c26!important;border:1px solid #ffffff0c!important;border-radius:9px!important;padding:9px!important;min-height:0!important}
body .tv-layout .channel-label{font-size:12px!important}
body .video-bottom{background:#0a1019df!important;border:1px solid #ffffff1a!important}
body .pill{font-size:12px!important;min-height:35px!important;padding:7px 10px!important}
body .toast{left:200px!important;background:#192533!important;border:1px solid #ffffff20!important;font-size:12px!important;padding:10px 13px!important}
@media(max-width:1100px){body .sidebar{width:145px!important;min-width:145px!important}body .sidebar:focus-within{width:160px!important;min-width:160px!important}body .app-area{padding:15px!important}body .tv-layout{grid-template-columns:minmax(0,1fr) 205px!important}body .grid,body .tv-layout .grid{grid-template-columns:repeat(auto-fill,minmax(115px,1fr))!important}}
@media(max-width:760px){body .sidebar{width:66px!important;min-width:66px!important}body .sidebar:focus-within{width:150px!important;min-width:150px!important}body .logo{font-size:16px!important;padding:6px 5px 15px!important}body .nav{font-size:12px!important}body .app-area{padding:12px!important}body .tv-layout{display:block!important}body .tv-preview{margin-top:12px!important}body .topbar h1{font-size:20px!important}body .status-pill{display:none!important}body .toast{left:75px!important}}
@media(prefers-reduced-motion:reduce){body .sidebar,body button{transition:none!important}}

/* In-player TV guide: video remains mounted and keeps playing behind the overlay. */
.rg3-guide{display:none;position:absolute;top:10%;bottom:10%;left:18px;width:min(380px,38vw);z-index:5;background:#0a121cf2;border:1px solid #ffffff22;border-radius:12px;padding:12px;overflow:hidden;box-shadow:0 16px 36px #0008}
.rg3-guide.open{display:flex;flex-direction:column}
.rg3-guide-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:15px;padding:4px 4px 10px}
.rg3-guide-head button{font-size:12px;padding:7px}
.rg3-guide-hint{font-size:11px;color:#aab9c5;line-height:1.4;margin:0 4px 10px}
.rg3-guide-list{display:flex;flex-direction:column;gap:3px;min-height:0;overflow-y:auto}
.rg3-guide-list button{text-align:left;min-height:40px;flex:0 0 40px;padding:8px 10px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:transparent!important}
.rg3-guide-list button.playing{color:#8ac8df!important}
.rg3-guide-list button[aria-selected=true]{background:#264255!important}
@media(max-width:760px){.rg3-guide{width:min(340px,78vw);left:8px;top:6%;bottom:6%}}

/* RG3 Poster Motion 1.1: focus and hover share the same compositor-only motion.
   Never change layout dimensions; mouse-out and blur reverse independently. */
body #screen .grid{padding:80px 90px 100px!important;overflow:visible!important;isolation:isolate}
body #screen .grid .tile{position:relative!important;z-index:0!important;transform:scale(1);transform-origin:center center!important;overflow:visible!important;transition:transform 220ms cubic-bezier(.22,1,.36,1),box-shadow 220ms ease,filter 220ms ease!important;backface-visibility:hidden}
body #screen .grid .tile .art{overflow:hidden!important;border-radius:9px 9px 0 0!important}
body #screen .grid .tile:is(:hover,:focus,:focus-visible){z-index:100!important;transform:scale(2)!important;transition-duration:240ms,220ms,220ms!important;box-shadow:0 18px 38px #000a,0 5px 12px #0007!important;filter:brightness(1.07)!important}
body #screen .grid .tile:focus{outline:2px solid #8ac8df!important;outline-offset:2px!important}
body #screen .grid .tile:not(:hover):not(:focus){z-index:0!important}
body #screen .grid .tile .tile-text{background:#121923!important;border-radius:0 0 9px 9px!important}
body #screen .grid .tile:is(:hover,:focus) .tile-text{background:#1c2937!important}
body #screen .grid .tile img{pointer-events:none}
@media(hover:none){body #screen .grid .tile:hover:not(:focus){transform:scale(1)!important;box-shadow:none!important;filter:none!important}}
@media(prefers-reduced-motion:reduce){body #screen .grid .tile{transition:none!important}body #screen .grid .tile:is(:hover,:focus){transform:scale(1.035)!important;filter:none!important;box-shadow:none!important}}
/* Optional low-power mode for VIDAA: keep focus obvious without heavy shadows. */
body.rg3-low-motion #screen .grid .tile{transition:none!important}
body.rg3-low-motion #screen .grid .tile:is(:hover,:focus){transform:scale(1.045)!important;filter:none!important;box-shadow:none!important}

/* Shared RG3 card motion: same hover/focus curve for posters and live TV tiles.
   Channel logos remain contained, and animation never changes playback state. */
body #screen .tv-layout .channel-list{padding:65px 90px 90px!important;overflow:visible!important;isolation:isolate}
body #screen .tv-layout .channel-row{position:relative!important;z-index:0!important;transform:scale(1)!important;transform-origin:center center!important;overflow:visible!important;transition:transform 220ms cubic-bezier(.22,1,.36,1),box-shadow 220ms ease,filter 220ms ease!important;backface-visibility:hidden}
body #screen .tv-layout .channel-row:is(:hover,:focus,:focus-visible){z-index:100!important;transform:scale(2)!important;transition-duration:240ms,220ms,220ms!important;box-shadow:0 18px 38px #000a,0 5px 12px #0007!important;filter:brightness(1.07)!important}
body #screen .tv-layout .channel-row:not(:hover):not(:focus){z-index:0!important}
body #screen .tv-layout .channel-row .channel-icon{overflow:hidden!important;min-width:0!important}
body #screen .tv-layout .channel-row .channel-icon img{object-fit:contain!important;max-width:90%!important;max-height:100%!important;pointer-events:none}
@media(hover:none){body #screen .tv-layout .channel-row:hover:not(:focus){transform:scale(1)!important;box-shadow:none!important;filter:none!important}}
@media(prefers-reduced-motion:reduce){body #screen .tv-layout .channel-row{transition:none!important}body #screen .tv-layout .channel-row:is(:hover,:focus){transform:scale(1.035)!important;filter:none!important;box-shadow:none!important}}
body.rg3-low-motion #screen .tv-layout .channel-row{transition:none!important}
body.rg3-low-motion #screen .tv-layout .channel-row:is(:hover,:focus){transform:scale(1.045)!important;filter:none!important;box-shadow:none!important}

/* RG3 TV Motion 2.0: 2x focus and hover on compact category/channel buttons. */
body #screen .tv-layout .channel-row:is(:hover,:focus,:focus-visible){transform:scale(2)!important;transition-duration:280ms,220ms,220ms!important;z-index:100!important}
body #screen .tv-category-scroll{padding:40px 80px 55px!important;overflow:visible!important;isolation:isolate}
body #screen .tv-category-scroll .tv-category{position:relative!important;z-index:0!important;transform:scale(1)!important;transform-origin:center!important;transition:transform 220ms cubic-bezier(.22,1,.36,1),box-shadow 220ms ease!important}
body #screen .tv-category-scroll .tv-category:is(:hover,:focus,:focus-visible){z-index:100!important;transform:scale(2)!important;transition-duration:260ms,220ms!important;box-shadow:0 14px 28px #0009!important}
body #screen .tv-layout .channel-list{padding:30px 28px 35px!important;gap:18px!important}
body #screen .tv-layout{isolation:isolate}
body #screen .tv-preview{position:relative!important;z-index:2!important;transform:scale(1)!important;transform-origin:right center!important;transition:transform 260ms cubic-bezier(.22,1,.36,1),box-shadow 220ms ease!important;backface-visibility:hidden}
body #screen .tv-preview.rg3-preview-zoom{z-index:70!important;transform:scale(var(--rg3-preview-scale,1.5))!important;box-shadow:0 25px 55px #000b!important}
body #screen .tv-preview .tv-preview-poster img{object-fit:contain!important;max-width:100%!important;max-height:100%!important}
@media(prefers-reduced-motion:reduce){body #screen .tv-layout .channel-row,body #screen .tv-category-scroll .tv-category,body #screen .tv-preview{transition:none!important}body #screen .tv-layout .channel-row:is(:hover,:focus),body #screen .tv-category-scroll .tv-category:is(:hover,:focus){transform:scale(1.04)!important}body #screen .tv-preview.rg3-preview-zoom{transform:scale(1.04)!important;box-shadow:none!important}}
body.rg3-low-motion #screen .tv-layout .channel-row:is(:hover,:focus),body.rg3-low-motion #screen .tv-category-scroll .tv-category:is(:hover,:focus){transform:scale(1.05)!important}
body.rg3-low-motion #screen .tv-preview.rg3-preview-zoom{transform:scale(1.05)!important;box-shadow:none!important}