/* EasyPlay v4: visual-only override. Existing routes, player JS, progress untouched. */
:root{--easy-blue:#0965db;--easy-cyan:#19d9ff;--easy-purple:#853cf5;--easy-yellow:#ffdc51}
body:not(:has(nav)){background:radial-gradient(circle at 95% 10%,#156bd6 0%,transparent 37%),linear-gradient(145deg,#064aaf 0%,#102c88 50%,#08205e 100%)!important;background-attachment:fixed!important;color:#fff}
body:not(:has(nav)) header{background:linear-gradient(100deg,#073b9d,#065cda 55%,#1333a0)!important;box-shadow:0 5px 24px #031f7188!important;border-bottom:2px solid #46e4ff!important}
body:not(:has(nav)) main{max-width:1460px!important}
body:not(:has(nav)) main>h1{font-weight:900!important;color:#fff!important;text-shadow:0 3px 12px #0c2479}
body:not(:has(nav)) main>.muted{color:#d3e9ff!important}
body:not(:has(nav)) .course-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr))!important;gap:24px!important}
body:not(:has(nav)) .course-card{border:3px solid #67e9ff!important;border-radius:24px!important;background:#fff!important;box-shadow:0 7px 0 #0b3e9b,0 18px 36px #00194a88!important}
body:not(:has(nav)) .course-card:hover,body:not(:has(nav)) .course-card:focus-visible{transform:translateY(-4px) scale(1.01)!important;box-shadow:0 10px 0 #0b3e9b,0 22px 40px #00194a99!important}
body:not(:has(nav)) .course-info{background:#fff!important;padding:18px 19px 7px!important}
body:not(:has(nav)) .course-info h2{color:#122558!important;font-weight:900!important;font-size:23px!important}
body:not(:has(nav)) .course-info p{color:#435578!important}
body:not(:has(nav)) .course-mini-thumb{aspect-ratio:16/9!important;background:linear-gradient(135deg,#23bafc,#5853d6)!important}
body:not(:has(nav)) .course-mini-thumb:before{background-size:cover!important}
body:not(:has(nav)) .course-action{background:linear-gradient(100deg,#00c8fa,#7044ee)!important;color:#fff!important;font-size:16px!important;min-height:49px!important;border-radius:999px!important}
body:not(:has(nav)) .course-details .bar{background:#c7d5f0!important}
body:not(:has(nav)) .course-details .bar span{background:linear-gradient(90deg,#08cba1,#3ee8bd)!important}
body:not(:has(nav)) .card:not(.login-card){background:linear-gradient(140deg,#143c9d,#112c77)!important;border:2px solid #3c9cfc!important;box-shadow:0 10px 28px #001d6080!important}
body:not(:has(nav)) .login-card{background:radial-gradient(circle at 78% 30%,#147cf7,#0734a3 65%)!important;border:3px solid #42cfff!important;border-radius:28px!important;box-shadow:0 16px 46px #00165599!important}
body:not(:has(nav)) .login-card h1{text-align:left!important;font-weight:900!important}
body:not(:has(nav)) .login-card input{border-radius:15px!important;box-shadow:inset 0 2px 6px #06245c18!important}
body:not(:has(nav)) .login-card button{background:linear-gradient(110deg,#00caff,#873af1)!important;border-radius:999px!important}
body:not(:has(nav)) .player-shell{gap:20px!important}
body:not(:has(nav)) .player-heading{background:linear-gradient(90deg,#113ea8,#134cb9)!important;border-radius:16px!important;padding:12px 18px!important}
body:not(:has(nav)) .player-main,body:not(:has(nav)) .lesson-sidebar{background:linear-gradient(155deg,#102f88,#10245c)!important;border:2px solid #348bdf!important;border-radius:22px!important;box-shadow:0 14px 36px #00194a77!important}
body:not(:has(nav)) .video-frame{border:3px solid #43c8ff!important;border-radius:21px!important;background:#030c25!important;box-shadow:0 13px 30px #0007!important;overflow:hidden}
body:not(:has(nav)) .video-frame button,body:not(:has(nav)) .playback-nav a{background:linear-gradient(115deg,#00bff5,#7350e9)!important;border:1px solid #6fe8ff!important;border-radius:999px!important;box-shadow:0 4px 12px #042b8e80!important;transition:transform .15s ease,filter .15s ease!important}
body:not(:has(nav)) .video-frame button:hover,body:not(:has(nav)) .video-frame button:focus-visible{transform:scale(1.045)!important;filter:brightness(1.12)!important}
body:not(:has(nav)) .lesson-item{border-radius:13px!important;margin:4px 0!important}
body:not(:has(nav)) .lesson-item.active{background:linear-gradient(90deg,#246ad5,#3241ad)!important}
#tv-controls{background:linear-gradient(90deg,#08246ae8,#1641a6ee)!important;backdrop-filter:blur(10px)!important;border-top:1px solid #6bbdff!important;gap:clamp(5px,1.4vw,14px)!important;padding:clamp(6px,1.2vw,14px)!important;max-width:100vw!important;box-sizing:border-box!important}
#tv-controls button{background:linear-gradient(110deg,#03bff1,#7545f2)!important;border:2px solid #8aefff!important;border-radius:999px!important;box-shadow:inset 0 2px 4px #ffffff55,0 4px 12px #0005!important;min-width:0!important;max-width:25vw!important;white-space:nowrap!important;transition:transform .16s ease!important}
#tv-controls button:focus-visible{outline:4px solid #ffe56d!important;outline-offset:3px!important;transform:scale(1.06)!important}
body:has(#playerShell.mobile-rotated) #tv-controls{position:fixed!important;left:100vw!important;top:0!important;right:auto!important;bottom:auto!important;width:100dvh!important;max-width:100dvh!important;height:auto!important;transform-origin:top left!important;transform:rotate(90deg)!important;z-index:2500!important;display:flex!important;justify-content:center!important}
body:has(#playerShell.mobile-rotated) #tv-controls button{font-size:clamp(10px,2dvh,15px)!important;padding:clamp(5px,1.2dvh,11px)!important;max-width:25%!important}
@media(orientation:landscape){#tv-controls{width:100vw!important}#tv-controls button{font-size:clamp(12px,1.5vw,18px)!important}}
@media(max-width:650px){body:not(:has(nav)) .course-grid{gap:18px!important}body:not(:has(nav)) .login-card{padding:21px!important}#tv-controls{flex-wrap:wrap!important;justify-content:center!important}#tv-controls button{font-size:12px!important;padding:7px 9px!important;max-width:none!important}}
@media(prefers-reduced-motion:reduce){body:not(:has(nav)) .video-frame button,#tv-controls button,body:not(:has(nav)) .course-card{transition:none!important}}
/* Admin dashboard uses the same vivid visual identity, without changing admin controls. */
body:has(nav){background:linear-gradient(145deg,#d8f2ff,#e9edff 50%,#e3e7ff)!important;color:#142b60!important}
body:has(nav) nav{background:linear-gradient(180deg,#0a3a9d,#132d80)!important;border-right:2px solid #4be1ff!important}
body:has(nav) nav strong{color:#fff!important;font-size:23px!important}
body:has(nav) nav a{color:#e5f4ff!important;border-radius:12px!important}
body:has(nav) nav a:hover,body:has(nav) nav a:focus-visible{background:#2472d8!important;color:#fff!important}
body:has(nav) .card{background:#fff!important;border:2px solid #8dd9ff!important;border-radius:20px!important;box-shadow:0 10px 25px #153a851e!important}
body:has(nav) button{background:linear-gradient(105deg,#00b6f2,#7544ea)!important;border-radius:999px!important}
body:has(nav) header h1{color:#123c9a!important;font-weight:900!important}
body:has(nav) .metric{color:#245ce4!important}/* CourseFlow brand v5: illustrated book, play and star */
body:not(:has(nav)) header b:before{content:"";width:54px!important;height:56px!important;flex:0 0 54px!important;background:url("/static/courseflow-brand-v5.svg") center/contain no-repeat!important;border-radius:0!important;filter:drop-shadow(0 2px 6px #5deaff80)}
body:not(:has(nav)) header b{font-size:clamp(18px,2vw,25px)!important;font-weight:900!important;letter-spacing:-.4px!important;text-shadow:0 2px 5px #00144e}
body:not(:has(nav)) header{min-height:68px}
body:has(nav) nav strong:before{content:"";display:block;width:66px;height:70px;margin:0 0 8px;background:url("/static/courseflow-brand-v5.svg") center/contain no-repeat}
@media(max-width:600px){body:not(:has(nav)) header b:before{width:43px!important;height:45px!important;flex-basis:43px!important}body:not(:has(nav)) header b{font-size:17px!important}}
/* Player polish v5: lesson-opening badge and mobile landscape positioning */
body:not(:has(nav)) .lesson-overlay{display:flex!important;align-items:center!important;justify-content:center!important;gap:14px!important;max-width:min(86vw,780px)!important;width:max-content!important;box-sizing:border-box!important;background:linear-gradient(105deg,#0a3a9bec,#2248bded 60%,#592cc4e8)!important;border:2px solid #6ce9ff!important;border-radius:22px!important;padding:14px 23px!important;font-size:clamp(17px,3.3vw,31px)!important;line-height:1.28!important;box-shadow:0 9px 35px #0009,inset 0 1px 4px #ffffff6b!important;text-shadow:0 2px 4px #001b56!important;overflow-wrap:anywhere!important}
body:not(:has(nav)) .lesson-overlay:before{content:"";width:58px;height:58px;flex:0 0 58px;background:url("/static/courseflow-brand-v5.svg") center/contain no-repeat;filter:drop-shadow(0 3px 7px #00185c)}
body:not(:has(nav)) .lesson-overlay.visible{animation:easy-lesson-intro .38s ease-out both}
@keyframes easy-lesson-intro{from{opacity:0;transform:translate(-50%,-46%) scale(.93)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.mobile-rotated .video-frame{position:fixed!important;top:0!important;left:100vw!important;width:100dvh!important;height:100vw!important;max-width:none!important;max-height:none!important;transform-origin:top left!important;transform:rotate(90deg)!important;border-radius:0!important;z-index:2200!important;overflow:hidden!important}
.mobile-rotated .video-frame video{display:block!important;width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important}
.mobile-rotated .video-frame button{position:absolute!important;top:14px!important;right:14px!important;left:auto!important;bottom:auto!important;transform:none!important;z-index:2205!important}
.mobile-rotated .video-frame .lesson-overlay{max-width:75%!important}
.mobile-rotated .video-frame .lesson-overlay:before{width:40px;height:40px;flex-basis:40px}
@media(max-width:600px){body:not(:has(nav)) .lesson-overlay{font-size:16px!important;padding:9px 12px!important;gap:8px!important}body:not(:has(nav)) .lesson-overlay:before{width:37px;height:37px;flex-basis:37px}}
@media(prefers-reduced-motion:reduce){body:not(:has(nav)) .lesson-overlay.visible{animation:none!important}}

/* EasyPlay lightweight mode v6 */
@media (max-width: 900px), (hover: none) {
  body, body:before, body:after, header, nav, main, section, article, .card, .course-card, .course-action, button, a {backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .course-card, .card, .course-action, button {box-shadow:0 2px 7px rgba(0,26,76,.18)!important}
  body:before,body:after {animation:none!important}
  .course-card, .course-action, button, nav a {transition:background-color .12s ease,color .12s ease,border-color .12s ease!important}
  .course-card:hover,.course-action:hover,button:hover {transform:none!important}
  img {content-visibility:auto}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}/* CourseFlow minimal graphics v7 */
body:not(:has(nav)),body:has(nav){background:#102653!important;background-image:none!important;background-attachment:scroll!important}
body:not(:has(nav)) header{background:#174eae!important;box-shadow:none!important}
body:not(:has(nav)) .course-card{border:1px solid #9dbfe8!important;border-radius:12px!important;box-shadow:none!important;transform:none!important;background:#fff!important}
body:not(:has(nav)) .course-card:hover{transform:none!important;box-shadow:none!important}
body:not(:has(nav)) .course-mini-thumb{background:#e2efff!important;aspect-ratio:16/7!important}
body:not(:has(nav)) .course-mini-thumb:before{display:none!important}
body:not(:has(nav)) .course-action,body:not(:has(nav)) button{box-shadow:none!important;border-radius:9px!important;animation:none!important}
body:not(:has(nav)) .login-card,body:not(:has(nav)) .card,body:not(:has(nav)) .lesson-sidebar,body:not(:has(nav)) .player-main{background-image:none!important;box-shadow:none!important;border-radius:12px!important}
body:not(:has(nav)) .video-frame{box-shadow:none!important;border-radius:9px!important}
body:not(:has(nav)) .lesson-overlay{background:#173e84!important;box-shadow:none!important;animation:none!important}
body:not(:has(nav)) .lesson-overlay:before{display:none!important}
body:not(:has(nav)) .course-grid{gap:12px!important}
body:has(nav) nav{box-shadow:none!important}
body:has(nav) .card{box-shadow:none!important;border-radius:10px!important}
#tv-controls{backdrop-filter:none!important;box-shadow:none!important}
#tv-controls button{box-shadow:none!important;animation:none!important}
*,*::before,*::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;text-shadow:none!important}
@media(prefers-reduced-motion:no-preference){.course-card,.course-action,button{transition:none!important}}

/* Compact single-row header and viewport-contained profile menu */
body:not(:has(nav)) > header{box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:nowrap!important;gap:8px!important;min-height:56px!important;padding:6px clamp(10px,2vw,28px)!important;width:100%!important}
body:not(:has(nav)) > header > b{flex:1 1 auto!important;min-width:0!important;gap:7px!important;font-size:clamp(12px,2.3vw,22px)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body:not(:has(nav)) > header > b:before{width:36px!important;height:38px!important;flex:0 0 36px!important}
body:not(:has(nav)) > header > span{flex:0 0 auto!important;min-width:0!important;max-width:32%!important;margin-left:auto!important}
body:not(:has(nav)) > header .account-menu{display:block!important;max-width:100%!important}
body:not(:has(nav)) > header .account-menu summary{box-sizing:border-box!important;display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important;padding:8px!important;font-size:14px!important}
body:not(:has(nav)) > header .account-dropdown{box-sizing:border-box!important;right:0!important;left:auto!important;top:calc(100% + 6px)!important;min-width:0!important;width:220px!important;max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 76px)!important;overflow-y:auto!important;overflow-wrap:anywhere!important;z-index:500!important}
@media(max-width:600px){body:not(:has(nav)) > header{min-height:50px!important;padding:5px 10px!important}body:not(:has(nav)) > header > b:before{width:28px!important;height:30px!important;flex-basis:28px!important}body:not(:has(nav)) > header > b{font-size:clamp(12px,3.7vw,17px)!important}body:not(:has(nav)) > header .account-menu summary{font-size:12px!important;padding:8px 5px!important}}