:root{--blue:#165dff;--blue2:#4da5ff;--navy:#173b74;--bg:#f4f8ff;--line:#dce8ff;--card:#fff;--muted:#667b9d;--top:68px;--bottom:0px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:#13233b;min-height:100vh}a{-webkit-tap-highlight-color:transparent}.topbar{height:var(--top);display:flex;align-items:center;gap:18px;padding:0 20px;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100;box-shadow:0 4px 18px rgba(22,93,255,.05)}.brand{display:flex;align-items:center;gap:9px;font-size:23px;font-weight:900;color:var(--blue);text-decoration:none;white-space:nowrap}.play{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:13px;background:linear-gradient(135deg,#1266ff,#65b7ff);color:#fff;box-shadow:0 8px 20px rgba(22,93,255,.25)}.menu-toggle{display:none;border:0;background:#edf4ff;color:var(--navy);width:42px;height:42px;border-radius:13px;font-size:21px;cursor:pointer}.search{flex:1;display:flex;max-width:650px;margin:auto}.search input{min-width:0;flex:1;padding:12px 16px;border:1px solid #bcd4ff;border-right:0;border-radius:999px 0 0 999px;background:#f9fbff;font-size:15px;outline:none}.search input:focus{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}.search button,.btn{padding:12px 18px;border:0;background:var(--blue);color:white;border-radius:0 999px 999px 0;text-decoration:none;font-weight:800;cursor:pointer}.topbar nav{display:flex;gap:9px;align-items:center;white-space:nowrap}.topbar nav a{color:var(--navy);text-decoration:none;font-weight:800;padding:9px 10px;border-radius:12px}.topbar nav a:hover{background:#edf4ff}.sitewrap{display:flex;min-height:calc(100vh - var(--top))}.sidebar{width:235px;flex:0 0 235px;padding:20px 14px;background:#fff;min-height:calc(100vh - var(--top));border-right:1px solid var(--line);position:sticky;top:var(--top);align-self:flex-start;z-index:80}.sidebar a{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:14px;color:var(--navy);text-decoration:none;font-weight:800;margin-bottom:3px}.sidebar a:hover{background:#eaf3ff;color:var(--blue)}.content{flex:1;min-width:0;padding:26px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:20px}.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:0 10px 30px rgba(22,93,255,.07);color:inherit;text-decoration:none;overflow:hidden}.card h3{margin:12px 0 5px;line-height:1.35}.card p{color:var(--muted);margin:5px 0}.thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#dcebff,#fff);border-radius:15px;display:grid;place-items:center;font-size:42px;color:var(--blue);overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover}.hero{background:linear-gradient(135deg,#0d5bff,#64b5ff);color:white;border-radius:26px;padding:34px;margin-bottom:26px;box-shadow:0 18px 40px rgba(13,91,255,.2)}.hero h1{margin-top:0;max-width:760px}.footer{text-align:center;padding:25px;color:#597099;padding-bottom:calc(25px + var(--bottom))}.mobile-bottom{display:none}.mobile-search-button{display:none}.video-player-wrap{width:100%;background:#000;border-radius:18px;overflow:hidden;aspect-ratio:16/9}.video-player-wrap video{width:100%;height:100%;display:block;background:#000}.mobile-drawer-backdrop{display:none}
input,textarea,select,button{font:inherit}input,textarea,select{max-width:100%}
@media(max-width:1100px){.topbar nav a{padding:8px 7px;font-size:14px}.content{padding:20px}.sidebar{width:205px;flex-basis:205px}}
@media(max-width:850px){:root{--top:60px;--bottom:70px}.topbar{height:var(--top);padding:8px 12px;gap:9px}.brand{font-size:20px}.play{width:34px;height:34px}.menu-toggle{display:grid;place-items:center}.topbar .search{display:none}.mobile-search-button{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:12px;background:#edf4ff;color:var(--navy);font-size:18px;margin-left:auto}.topbar nav{display:none}.sitewrap{display:block}.sidebar{position:fixed;left:-280px;top:0;width:270px;height:100dvh;z-index:400;padding:80px 16px 20px;transition:left .22s ease;box-shadow:10px 0 35px rgba(0,0,0,.18);overflow:auto}.sidebar.open{left:0}.mobile-drawer-backdrop{position:fixed;inset:0;background:rgba(4,20,50,.45);z-index:350}.mobile-drawer-backdrop.show{display:block}.content{padding:16px 12px 90px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card{padding:10px;border-radius:16px}.card h3{font-size:15px}.card p{font-size:12px}.thumb{border-radius:12px}.hero{padding:22px 18px;border-radius:20px;margin-bottom:18px}.hero h1{font-size:25px}.mobile-bottom{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;height:var(--bottom);background:rgba(255,255,255,.98);border-top:1px solid var(--line);z-index:300;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -5px 22px rgba(18,65,150,.08)}.mobile-bottom a{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;text-decoration:none;color:#52698d;font-size:10px;font-weight:800}.mobile-bottom a span{font-size:21px;line-height:1}.mobile-bottom a.upload-mobile span{width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,#1266ff,#65b7ff);display:grid;place-items:center;color:white;font-size:24px;margin-top:-13px;box-shadow:0 9px 20px rgba(22,93,255,.28)}.mobile-bottom a:hover,.mobile-bottom a:focus{color:var(--blue)}.mobile-search-panel{display:none;position:fixed;inset:0;background:white;z-index:500;padding:14px}.mobile-search-panel.open{display:block}.mobile-search-panel form{display:flex;gap:8px}.mobile-search-panel input{flex:1;padding:14px;border:1px solid #bcd4ff;border-radius:14px}.mobile-search-panel button{border:0;background:var(--blue);color:#fff;border-radius:14px;padding:0 16px;font-weight:800}.mobile-search-close{margin-top:12px;width:100%;padding:12px;border:0;border-radius:14px;background:#edf4ff;color:var(--navy);font-weight:800}.footer{padding-bottom:calc(20px + var(--bottom))}}
@media(max-width:520px){.brand .brand-word{display:none}.grid{grid-template-columns:1fr}.card{padding:9px}.card h3{font-size:16px}.content{padding-left:8px;padding-right:8px}.hero{margin-left:0;margin-right:0}.video-player-wrap{border-radius:0;margin-left:-8px;width:calc(100% + 16px)}body{overflow-x:hidden}}
@media(min-width:851px){.mobile-search-panel{display:none!important}}


/* =========================================================
   SplashVideo real-device mobile header
   These controls depend on the PHP-generated body class,
   not merely browser width. Shrinking desktop stays desktop.
   ========================================================= */

/* Desktop device: never show phone-only controls, regardless of window width. */
body.sv-desktop-device .menu-toggle,
body.sv-desktop-device .mobile-search-button,
body.sv-desktop-device .mobile-search-panel,
body.sv-desktop-device .mobile-drawer-backdrop,
body.sv-desktop-device .mobile-bottom{display:none!important}

/* Restore the standard desktop header even when its browser window is narrow. */
body.sv-desktop-device .topbar .search{display:flex!important}
body.sv-desktop-device .topbar nav{display:flex!important}
body.sv-desktop-device .sitewrap{display:flex!important}
body.sv-desktop-device .sidebar{
  position:sticky!important;left:auto!important;top:var(--top)!important;
  width:235px!important;height:auto!important;min-height:calc(100vh - var(--top))!important;
  padding:20px 14px!important;box-shadow:none!important;overflow:visible!important;
}
body.sv-desktop-device .content{padding:26px!important}
body.sv-desktop-device .brand .brand-word{display:inline!important}

/* Real phone / app WebView: mobile controls are available independent of viewport width. */
body.sv-mobile-device{--top:60px;--bottom:70px;overflow-x:hidden}
body.sv-mobile-device .topbar{height:var(--top);padding:8px 10px;gap:7px}
body.sv-mobile-device .menu-toggle{display:grid!important;place-items:center;flex:0 0 42px;order:0}
body.sv-mobile-device .brand{order:1;font-size:18px;gap:6px}
body.sv-mobile-device .play{width:32px;height:32px;border-radius:10px}
body.sv-mobile-device .topbar .search{display:none!important}
body.sv-mobile-device .mobile-search-button{display:grid!important;place-items:center;order:2;margin-left:auto;flex:0 0 40px;width:40px;height:40px;border:0;border-radius:12px;background:#edf4ff;color:var(--navy);font-size:18px}
body.sv-mobile-device .topbar nav{display:flex!important;order:3;gap:3px;margin-left:0}
body.sv-mobile-device .topbar nav a{display:none!important}
body.sv-mobile-device .topbar nav a[href="/login.php"],
body.sv-mobile-device .topbar nav a[href="/logout.php"]{display:inline-flex!important;align-items:center;padding:8px 7px;font-size:13px}
body.sv-mobile-device .sitewrap{display:block!important}
body.sv-mobile-device .sidebar{position:fixed!important;left:-280px!important;top:0!important;width:270px!important;height:100dvh!important;z-index:400!important;padding:80px 16px 20px!important;transition:left .22s ease;box-shadow:10px 0 35px rgba(0,0,0,.18)!important;overflow:auto!important}
body.sv-mobile-device .sidebar.open{left:0!important}
body.sv-mobile-device .content{padding:16px 10px 90px!important}
body.sv-mobile-device .mobile-bottom{display:grid!important;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;height:var(--bottom);background:rgba(255,255,255,.98);border-top:1px solid var(--line);z-index:300;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -5px 22px rgba(18,65,150,.08)}
body.sv-mobile-device .mobile-search-panel{position:fixed;inset:0;background:white;z-index:500;padding:14px}
body.sv-mobile-device .mobile-search-panel.open{display:block!important}
body.sv-mobile-device .mobile-drawer-backdrop.show{display:block!important}

@media(max-width:520px){
  body.sv-mobile-device .brand .brand-word{display:inline!important}
  body.sv-mobile-device .grid{grid-template-columns:1fr}
}