/* JakSky V112 — refined UI/UX; scoped visual layer. Does not change any data, playback, checkout or routing. */
:root{--j112-ink:#f5f9ff;--j112-subtle:#aabbd4;--j112-edge:rgba(123,179,240,.24);--j112-surface:#0d1d37;--j112-deep:#061427;--j112-blue:#3c9afe;--j112-blue-soft:#6fc8ff;--j112-pink:#dc54cb}
.j112-svg{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;color:inherit;pointer-events:none;vertical-align:middle;line-height:0}
.j112-svg svg{display:block;width:100%;height:100%;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none;overflow:visible}
/* Keep the original background, banners, cards, thumbnails and video order. */
html body .brandHero{border-radius:0 0 26px 26px!important}
html body .brandSub, html body .brandMini{color:#c4d6ee!important}
html body .userTop{min-width:0!important}
html body #search{box-sizing:border-box!important;width:100%!important;min-height:51px!important;border:1px solid rgba(139,190,246,.32)!important;border-radius:18px!important;background-color:#0c2345!important;color:#f5faff!important;font-size:14px!important;font-weight:500!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;transition:border-color .16s ease,box-shadow .16s ease!important}
html body #search:focus{outline:none!important;border-color:#70b9ff!important;box-shadow:0 0 0 3px rgba(48,143,245,.13)!important}
html body #search::placeholder{color:#a9c4e5!important;opacity:1!important}
html body #filterTabs{display:flex!important;gap:8px!important;align-items:center!important;overflow-x:auto!important;scrollbar-width:none!important;padding:9px 2px!important;scroll-snap-type:x proximity!important;overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important}
html body #filterTabs::-webkit-scrollbar{display:none!important}
html body #filterTabs button{flex:0 0 auto!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-height:41px!important;padding:8px 13px!important;border-radius:13px!important;border:1px solid var(--j112-edge)!important;background:#12294b!important;color:#cbdcf2!important;font-size:12px!important;font-weight:700!important;white-space:nowrap!important;letter-spacing:0!important;box-shadow:none!important;scroll-snap-align:start!important;touch-action:manipulation!important;transform:none!important;transition:background .14s ease,color .14s ease,border-color .14s ease!important}
html body #filterTabs button.active,html body #filterTabs button[aria-pressed="true"]{background:linear-gradient(115deg,#2689e9,#3579da)!important;border-color:#79beff!important;color:white!important;box-shadow:0 3px 12px rgba(12,81,160,.18)!important}
html body #filterTabs .j112-svg{width:16px;height:16px}
html body #freeQuotaBar{border:1px solid rgba(121,172,241,.21)!important;border-radius:18px!important;box-shadow:none!important;overflow:hidden!important}
html body #freeQuotaBar .jakFreeQuotaIcon{font-size:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
html body #freeQuotaBar .jakFreeQuotaIcon::before{content:"";display:block;width:20px;height:20px;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2zm3 0h4V7a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm3 0h4V7a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center/contain no-repeat}
/* Visitor meter: keep all its numbers and click handler. */
html body #jakLiveSummary{padding-block:3px!important}
html body #jakLiveSummary .jakLiveSummaryButton{border-radius:20px!important;border:1px solid rgba(105,165,235,.31)!important;background:linear-gradient(135deg,#0e2850,#10264b)!important;box-shadow:0 4px 18px rgba(4,17,41,.14)!important}
html body #jakLiveSummary .jakLiveMetric{min-width:0!important;gap:5px!important}
html body #jakLiveSummary .jakLiveMetric strong{font-variant-numeric:tabular-nums!important;letter-spacing:-.02em!important}
html body #jakLiveSummary .jakLiveMetric small{color:#aabddc!important}
html body #jakLiveSummary .j112-svg{color:#70b7ff;width:18px;height:18px}
html body #jakLiveSummary .jakLiveChevron{color:#7fbaff!important}
/* Cards: only the shell and metadata, never reorder/recreate thumbnails. */
html body #list .card{border-radius:18px!important;overflow:hidden!important;border:1px solid rgba(112,168,236,.22)!important;background:#0b2040!important;box-shadow:0 5px 19px rgba(0,5,18,.16)!important;transform:none!important;transition:border-color .14s ease!important}
html body #list .card .thumb{overflow:hidden!important}
html body #list .card .thumb img{object-fit:cover!important}
html body #list .card .body{min-width:0!important}
html body #list .card .body>b{font-size:13px!important;letter-spacing:.005em!important}
html body #list .card .meta{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:6px!important}
html body #list .card .meta>span{display:inline-flex!important;align-items:center!important;gap:4px!important;padding:3px 7px!important;background:rgba(14,43,82,.54)!important;border-radius:100px!important;border:1px solid rgba(124,172,234,.12)!important;color:#b9cde8!important;font-variant-numeric:tabular-nums!important}
html body #list .card .meta .j112-svg{width:13px;height:13px;color:#b4d6fd!important}
html body #list .card .meta .j112-meta-rating .j112-svg{color:#f1ca72!important}
html body #list .btnFav{display:inline-flex!important;align-items:center!important;justify-content:center!important;touch-action:manipulation!important;line-height:0!important}
html body #list .btnFav .j112-svg{width:20px;height:20px}
html body #list .btnFav.active .j112-svg{color:#ff75ac!important}
html body #list .badge,html body #list .jakNewBadge{font-size:10px!important;border-radius:10px!important;box-shadow:0 2px 9px rgba(0,0,0,.14)!important}
/* Icon-only floating nav, do not use heavy blur/large shadows. */
html body .bottomNav{isolation:isolate!important;box-sizing:border-box!important;min-height:72px!important;border-radius:23px!important;padding:5px!important;background:linear-gradient(120deg,#071b37,#102446)!important;border:1px solid rgba(116,181,251,.29)!important;box-shadow:0 9px 24px rgba(1,9,24,.33)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;contain:layout style!important}
html body .bottomNav button{display:flex!important;flex:1 1 0!important;min-width:0!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;height:58px!important;border-radius:17px!important;font-size:0!important;color:#aac1df!important;touch-action:manipulation!important;transform:none!important;box-shadow:none!important;transition:background .14s ease,color .14s ease!important}
html body .bottomNav button>.j112-svg{width:23px;height:23px;color:inherit!important}
html body .bottomNav button>span:not(.j112-svg){font-size:10px!important;line-height:1.05!important;margin:0!important;color:inherit!important;font-weight:700!important}
html body .bottomNav button:is(.activeNav,.jakNavActive,.active){background:linear-gradient(135deg,rgba(33,139,246,.29),rgba(26,94,182,.20))!important;color:#eef8ff!important;border-color:rgba(130,197,255,.21)!important}
html body .bottomNav button:is(.activeNav,.jakNavActive,.active)>.j112-svg{color:#77caff!important}
html body .bottomNav button:is(.activeNav,.jakNavActive,.active)::after{height:2px!important;background:#73c7ff!important;box-shadow:none!important}
html body #notifBell{font-size:0!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:16px!important;background:#215ea9!important;box-shadow:0 5px 16px rgba(1,22,62,.25)!important}
html body #notifBell>.j112-svg{width:22px;height:22px;color:#fff!important}
html body #notifBadge{font-size:11px!important}
/* Modals: controls only, preserving form inputs and media players. */
html body #modal .modalBox{border:1px solid rgba(128,170,230,.22)!important;border-radius:23px!important}
html body #modal .btns button,html body #modal .sendBtn{min-height:41px!important;border-radius:12px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;touch-action:manipulation!important}
html body #modal .btns button .j112-svg{width:17px;height:17px}
html body #jakCsLauncher{border-radius:16px!important;box-shadow:0 5px 16px rgba(0,34,76,.26)!important}
/* VIP picker: remove only the large duplicated QRIS. The real checkout QRIS remains available. */
html body #vipShopModal .vipDanaPaymentCard.vipQrisPaymentCard{display:none!important}
html body #vipShopModal .vipShopSheet{border-radius:28px!important;box-shadow:0 22px 65px rgba(5,3,26,.3)!important}
html body #vipShopModal .vipShopHero{align-items:center!important}
html body #vipShopModal .vipShopCrown{font-size:0!important;display:flex!important;align-items:center!important;justify-content:center!important}
html body #vipShopModal .vipShopCrown>.j112-svg{width:30px;height:30px}
html body #vipShopModal .vipPackageCard{border-radius:23px!important;box-shadow:0 5px 18px rgba(23,13,44,.08)!important;overflow:visible!important}
html body #vipShopModal .vipPackageHead h3{display:flex!important;align-items:center!important;gap:7px!important}
html body #vipShopModal .vipPackageHead h3>.j112-svg{width:19px;height:19px;flex:none;color:#2598c5!important}
html body #vipShopModal .vipProCard .vipPackageHead h3>.j112-svg{color:#c45da2!important}
html body #vipShopModal .vipPackageBenefits>span:not(.j111Benefit),html body #vipShopModal .vipPackageBenefits>span.j112-benefit{display:flex!important;align-items:center!important;gap:9px!important;min-height:39px!important;padding:9px 12px!important;line-height:1.4!important;white-space:normal!important;font-size:12px!important}
html body #vipShopModal .vipPackageBenefits>span.j112-benefit::before{content:"✓"!important;display:flex!important;align-items:center!important;justify-content:center!important;width:19px!important;height:19px!important;flex:0 0 19px!important;margin:0!important;padding:0!important;border-radius:50%!important;background:#e6f9ef!important;color:#079c67!important;font:700 13px/1 system-ui!important;box-shadow:none!important;position:static!important;background-image:none!important;-webkit-mask:none!important;mask:none!important}
html body #vipShopModal .vipPackageBenefits>span.j112-benefit::after{content:none!important}
html body #vipShopModal .vipPackageBenefits .j110-icon{display:none!important}
html body #vipShopModal .vipBuyBtn,html body #vipCheckoutModal button{border-radius:14px!important;min-height:43px!important;box-shadow:none!important}
html body #vipCheckoutModal .vipCheckoutBox{border-radius:23px!important}
html body #vipCheckoutModal .vipCheckoutIcon{font-size:0!important}
html body #vipCheckoutModal .vipCheckoutIcon>.j112-svg{width:28px;height:28px}
html body #vipShopModal .myVipOrdersSection{border-radius:21px!important}
html body #jakLivePanel .jakLiveSheet{border-radius:24px 24px 0 0!important}
html body #jakLivePanel .jakLiveTabs button{display:inline-flex!important;align-items:center!important;gap:7px!important}
html body #jakLivePanel .jakLiveTabs .j112-svg{width:17px;height:17px}
@media(max-width:380px){html body #jakLiveSummary .jakLiveMetric strong{font-size:13px!important}html body #jakLiveSummary .jakLiveMetric small{font-size:9px!important}html body #list .card .meta>span{padding:3px 5px!important}}
@media(prefers-reduced-motion:reduce){html body #list .card,html body #filterTabs button,html body .bottomNav button{transition:none!important;animation:none!important}}

/* The support launcher stays in place; only its icon changes to local SVG. */
html body #jakCsLauncher .jakCsLauncherIcon{font-size:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
html body #jakCsLauncher .jakCsLauncherIcon>.j112-svg{width:20px;height:20px;color:inherit!important}
html body .j112-title-icon{display:inline-flex!important;align-items:center!important;gap:9px!important}
html body .j112-title-icon>.j112-svg{width:22px;height:22px;color:#77c9ff!important}