/* =========================================================
   JAKSKY UI REFINE V18
   CSS-only visual overlay. Does NOT touch grid generation,
   API, database, video logic, roles, quota, comments logic,
   expiry logic, thumbnail logic, or post ordering.
   ========================================================= */

:root{
  --j18-bg:#fff7fb;
  --j18-bg-soft:#fff0f7;
  --j18-card:#ffffff;
  --j18-card-soft:#fffafd;
  --j18-text:#2d2028;
  --j18-muted:#8a7180;
  --j18-line:rgba(137,67,104,.11);
  --j18-line-strong:rgba(137,67,104,.18);
  --j18-accent:#f33d9b;
  --j18-accent-2:#b95cff;
  --j18-accent-soft:rgba(243,61,155,.09);
  --j18-shadow-sm:0 8px 20px rgba(93,43,69,.07);
  --j18-shadow:0 14px 34px rgba(93,43,69,.10);
  --j18-shadow-lg:0 24px 56px rgba(93,43,69,.16);
  --j18-radius:22px;
}

html[data-jak-theme="dark"]{
  --j18-bg:#120d12;
  --j18-bg-soft:#1a1119;
  --j18-card:#221721;
  --j18-card-soft:#281b27;
  --j18-text:#fff6fa;
  --j18-muted:#c9adbc;
  --j18-line:rgba(255,220,238,.09);
  --j18-line-strong:rgba(255,190,224,.15);
  --j18-accent:#ff5baa;
  --j18-accent-2:#c46aff;
  --j18-accent-soft:rgba(255,91,170,.11);
  --j18-shadow-sm:0 8px 22px rgba(0,0,0,.22);
  --j18-shadow:0 16px 38px rgba(0,0,0,.29);
  --j18-shadow-lg:0 28px 66px rgba(0,0,0,.42);
}

/* ---------- Base ---------- */
html, body{
  background:
    radial-gradient(circle at 10% 0%, rgba(255,115,184,.08), transparent 25%),
    linear-gradient(180deg,var(--j18-bg),var(--j18-bg-soft)) !important;
  color:var(--j18-text) !important;
}

body.jakPageHome.jakUiRefreshV10{
  background:
    radial-gradient(circle at 12% 0%,rgba(255,121,187,.09),transparent 24%),
    radial-gradient(circle at 88% 8%,rgba(187,92,255,.05),transparent 22%),
    linear-gradient(180deg,var(--j18-bg),var(--j18-bg-soft)) !important;
}

body.jakPageHome.jakUiRefreshV10 *{
  -webkit-tap-highlight-color:transparent;
}

/* ---------- Hero / header ---------- */
body.jakPageHome.jakUiRefreshV10 .brandHero{
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(255,246,251,.96)) !important;
  border:1px solid var(--j18-line) !important;
  box-shadow:var(--j18-shadow) !important;
}

html[data-jak-theme="dark"] body.jakPageHome.jakUiRefreshV10 .brandHero{
  background:linear-gradient(145deg,#2b1b28,#21151f) !important;
}

body.jakPageHome.jakUiRefreshV10 .brandSub{
  color:var(--j18-muted) !important;
  letter-spacing:.01em;
}

body.jakPageHome.jakUiRefreshV10 .brandMini{
  background:var(--j18-card-soft) !important;
  color:var(--j18-accent) !important;
  border:1px solid var(--j18-line) !important;
  box-shadow:none !important;
}

/* ---------- Live summary ---------- */
body.jakPageHome.jakUiRefreshV10 .jakLiveSummary{
  background:rgba(255,255,255,.90) !important;
  border:1px solid var(--j18-line) !important;
  box-shadow:var(--j18-shadow-sm) !important;
}

html[data-jak-theme="dark"] body.jakPageHome.jakUiRefreshV10 .jakLiveSummary{
  background:rgba(34,23,33,.94) !important;
}

body.jakPageHome.jakUiRefreshV10 .jakLiveMetric strong{
  color:var(--j18-text) !important;
}
body.jakPageHome.jakUiRefreshV10 .jakLiveMetric small{
  color:var(--j18-muted) !important;
}
body.jakPageHome.jakUiRefreshV10 .jakLiveDivider{
  opacity:.45 !important;
}

/* ---------- Promo banner ---------- */
body.jakPageHome.jakUiRefreshV10 .jakPromoViewport{
  border:1px solid var(--j18-line) !important;
  box-shadow:var(--j18-shadow) !important;
}

body.jakPageHome.jakUiRefreshV10 .jakPromoArrow{
  background:rgba(255,255,255,.84) !important;
  border:1px solid rgba(255,255,255,.60) !important;
  box-shadow:0 7px 18px rgba(54,24,41,.10) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

html[data-jak-theme="dark"] body.jakPageHome.jakUiRefreshV10 .jakPromoArrow{
  background:rgba(34,23,33,.88) !important;
  border-color:var(--j18-line) !important;
  color:#fff !important;
}

body.jakPageHome.jakUiRefreshV10 .jakPromoDot{
  background:rgba(178,117,149,.28) !important;
}
body.jakPageHome.jakUiRefreshV10 .jakPromoDot.is-active{
  background:linear-gradient(90deg,var(--j18-accent),var(--j18-accent-2)) !important;
}

/* ---------- Sticky search / tabs ---------- */
body.jakPageHome.jakUiRefreshV10 .userTop{
  background:rgba(255,247,251,.90) !important;
  border-bottom:1px solid var(--j18-line) !important;
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
}
html[data-jak-theme="dark"] body.jakPageHome.jakUiRefreshV10 .userTop{
  background:rgba(18,13,18,.90) !important;
}

body.jakPageHome.jakUiRefreshV10 #search{
  background:var(--j18-card) !important;
  color:var(--j18-text) !important;
  border:1px solid var(--j18-line-strong) !important;
  box-shadow:var(--j18-shadow-sm) !important;
  font-weight:700 !important;
}
body.jakPageHome.jakUiRefreshV10 #search::placeholder{
  color:#a28c98 !important;
  font-weight:650 !important;
}
body.jakPageHome.jakUiRefreshV10 #search:focus{
  border-color:rgba(243,61,155,.35) !important;
  box-shadow:0 0 0 4px rgba(243,61,155,.06),var(--j18-shadow-sm) !important;
}

body.jakPageHome.jakUiRefreshV10 #filterTabs button{
  background:var(--j18-card) !important;
  color:#765f6c !important;
  border:1px solid var(--j18-line) !important;
  box-shadow:0 5px 14px rgba(85,38,62,.045) !important;
  font-weight:800 !important;
}
html[data-jak-theme="dark"] body.jakPageHome.jakUiRefreshV10 #filterTabs button{
  background:var(--j18-card) !important;
  color:#d3b8c6 !important;
}
body.jakPageHome.jakUiRefreshV10 #filterTabs button.active{
  color:#fff !important;
  background:linear-gradient(135deg,var(--j18-accent),var(--j18-accent-2)) !important;
  border-color:transparent !important;
  box-shadow:0 9px 22px rgba(243,61,155,.20) !important;
}

/* ---------- Grid / cards ----------
   Intentionally does NOT change grid columns, card height,
   thumbnail height, item order, or card width. */
body.jakPageHome.jakUiRefreshV10 #list{
  background:transparent !important;
}

body.jakPageHome.jakUiRefreshV10 #list > .card{
  background:var(--j18-card) !important;
  border:1px solid var(--j18-line) !important;
  box-shadow:var(--j18-shadow-sm) !important;
  color:var(--j18-text) !important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

body.jakPageHome.jakUiRefreshV10 #list > .card:active{
  transform:scale(.985) !important;
  box-shadow:0 7px 18px rgba(93,43,69,.08) !important;
}

body.jakPageHome.jakUiRefreshV10 #list > .card .thumb{
  background:linear-gradient(145deg,#fff0f7,#f7eaf3) !important;
}
html[data-jak-theme="dark"] body.jakPageHome.jakUiRefreshV10 #list > .card .thumb{
  background:#2a1b27 !important;
}

body.jakPageHome.jakUiRefreshV10 #list > .card .body{
  background:var(--j18-card) !important;
  color:var(--j18-text) !important;
}

body.jakPageHome.jakUiRefreshV10 #list > .card .body b{
  color:var(--j18-text) !important;
  font-weight:850 !important;
  letter-spacing:-.01em;
}

body.jakPageHome.jakUiRefreshV10 #list > .card .meta{
  align-items:center !important;
}

body.jakPageHome.jakUiRefreshV10 #list > .card .meta span,
body.jakPageHome.jakUiRefreshV10 #list > .card .stats span{
  background:var(--j18-card-soft) !important;
  color:#7d6874 !important;
  border:1px solid var(--j18-line) !important;
  box-shadow:none !important;
  font-weight:800 !important;
}
html[data-jak-theme="dark"] body.jakPageHome.jakUiRefreshV10 #list > .card .meta span,
html[data-jak-theme="dark"] body.jakPageHome.jakUiRefreshV10 #list > .card .stats span{
  color:#d8bfcc !important;
}

/* Original expiry countdown: compact chip only; logic untouched */
body.jakPageHome.jakUiRefreshV10 #list > .card .expText{
  width:auto !important;
  max-width:100% !important;
  display:inline-flex !important;
  align-items:center !important;
  background:#fff4f8 !important;
  color:#d54a8e !important;
  border:1px solid rgba(213,74,142,.12) !important;
  border-radius:999px !important;
  box-shadow:none !important;
}
html[data-jak-theme="dark"] body.jakPageHome.jakUiRefreshV10 #list > .card .expText{
  background:#34202e !important;
  color:#ff8fc4 !important;
  border-color:rgba(255,143,196,.13) !important;
}

body.jakPageHome.jakUiRefreshV10 #list > .card .badge{
  background:linear-gradient(135deg,var(--j18-accent),var(--j18-accent-2)) !important;
  box-shadow:0 8px 20px rgba(243,61,155,.20) !important;
}

body.jakPageHome.jakUiRefreshV10 #list > .card .expiredBadge{
  background:linear-gradient(180deg,rgba(16,9,13,.24),rgba(16,9,13,.64)) !important;
  text-shadow:0 2px 10px rgba(0,0,0,.35) !important;
}

body.jakPageHome.jakUiRefreshV10 .btnFav{
  background:rgba(255,255,255,.86) !important;
  color:#a39a9f !important;
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow:0 8px 20px rgba(42,22,33,.12) !important;
}
html[data-jak-theme="dark"] body.jakPageHome.jakUiRefreshV10 .btnFav{
  background:rgba(38,26,36,.87) !important;
  color:#cabcc3 !important;
  border-color:var(--j18-line) !important;
}
body.jakPageHome.jakUiRefreshV10 .btnFav.active{
  background:linear-gradient(135deg,var(--j18-accent),#ff75bc) !important;
  color:#fff !important;
}

/* ---------- Free/staff quota ---------- */
body.jakPageHome.jakUiRefreshV10 .jakFreeQuotaBar{
  background:var(--j18-card) !important;
  border:1px solid var(--j18-line) !important;
  box-shadow:var(--j18-shadow-sm) !important;
  color:var(--j18-text) !important;
}

/* ---------- Bottom navigation ---------- */
body.jakPageHome.jakUiRefreshV10 .bottomNav{
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(207,135,172,.18) !important;
  box-shadow:0 18px 42px rgba(76,32,55,.15) !important;
  backdrop-filter:blur(20px) saturate(125%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(125%) !important;
}
html[data-jak-theme="dark"] body.jakPageHome.jakUiRefreshV10 .bottomNav{
  background:rgba(33,22,31,.94) !important;
  border-color:var(--j18-line) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.34) !important;
}

body.jakPageHome.jakUiRefreshV10 .bottomNav button{
  color:#9a8290 !important;
}
html[data-jak-theme="dark"] body.jakPageHome.jakUiRefreshV10 .bottomNav button{
  color:#bea5b3 !important;
}
body.jakPageHome.jakUiRefreshV10 .bottomNav button:is(.jakNavActive,.activeNav,.active){
  color:var(--j18-accent) !important;
  background:linear-gradient(145deg,rgba(243,61,155,.10),rgba(185,92,255,.07)) !important;
  border-color:rgba(243,61,155,.11) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45) !important;
}
body.jakPageHome.jakUiRefreshV10 .bottomNav button:is(.jakNavActive,.activeNav,.active) span{
  color:var(--j18-accent) !important;
}

/* ---------- Customer service floating button ---------- */
body.jakPageHome.jakUiRefreshV10 #jakCsLauncher{
  background:linear-gradient(135deg,#f3389a,#cf45db) !important;
  border:1px solid rgba(255,255,255,.32) !important;
  box-shadow:0 14px 30px rgba(104,35,75,.22) !important;
}

/* ---------- Video modal ---------- */
body.jakPageHome.jakUiRefreshV10 #modal{
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
body.jakPageHome.jakUiRefreshV10 #modal .modalBox{
  background:linear-gradient(180deg,var(--j18-card),var(--j18-card-soft)) !important;
  color:var(--j18-text) !important;
  border:1px solid var(--j18-line) !important;
  box-shadow:var(--j18-shadow-lg) !important;
}
body.jakPageHome.jakUiRefreshV10 #modal :is(#mtitle,h3,b,strong){
  color:var(--j18-text) !important;
}
body.jakPageHome.jakUiRefreshV10 #modal :is(#mdesc,p,small){
  color:var(--j18-muted) !important;
}
body.jakPageHome.jakUiRefreshV10 #modal :is(#tabs button,.btns button,.rate button,.sendBtn){
  border:1px solid var(--j18-line) !important;
  box-shadow:none !important;
}
body.jakPageHome.jakUiRefreshV10 #modal .closeBtn{
  background:linear-gradient(135deg,var(--j18-accent),var(--j18-accent-2)) !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(243,61,155,.19) !important;
}

/* ---------- Comments ---------- */
body.jakPageHome.jakUiRefreshV10 .comment{
  background:var(--j18-card-soft) !important;
  color:var(--j18-text) !important;
  border:1px solid var(--j18-line) !important;
  box-shadow:none !important;
}
body.jakPageHome.jakUiRefreshV10 .replyComment{
  background:var(--j18-card) !important;
}
body.jakPageHome.jakUiRefreshV10 .replyContext{
  background:var(--j18-accent-soft) !important;
  border:1px solid rgba(243,61,155,.10) !important;
}
body.jakPageHome.jakUiRefreshV10 :is(.replyContextQuote,.replyBodyText){
  color:var(--j18-muted) !important;
}
body.jakPageHome.jakUiRefreshV10 :is(.commentInput,#ctext){
  background:var(--j18-card) !important;
  color:var(--j18-text) !important;
  border:1px solid var(--j18-line-strong) !important;
}

/* ---------- Notifications ---------- */
body.jakUiRefreshV10 #notifModal{
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
body.jakUiRefreshV10 #notifModal .jakNotifPanel{
  background:linear-gradient(180deg,var(--j18-card),var(--j18-card-soft)) !important;
  color:var(--j18-text) !important;
  border:1px solid var(--j18-line) !important;
  box-shadow:var(--j18-shadow-lg) !important;
}
body.jakUiRefreshV10 #notifModal .notifItem{
  background:var(--j18-card-soft) !important;
  color:var(--j18-text) !important;
  border:1px solid var(--j18-line) !important;
  box-shadow:none !important;
}
body.jakUiRefreshV10 #notifModal .notifItem p,
body.jakUiRefreshV10 #notifModal .notifItem small{
  color:var(--j18-muted) !important;
}

/* ---------- Live activity sheet ---------- */
body.jakPageHome.jakUiRefreshV10 .jakLiveSheet{
  background:linear-gradient(180deg,var(--j18-card),var(--j18-card-soft)) !important;
  color:var(--j18-text) !important;
  border:1px solid var(--j18-line) !important;
  box-shadow:var(--j18-shadow-lg) !important;
}
body.jakPageHome.jakUiRefreshV10 .jakLiveSheet p,
body.jakPageHome.jakUiRefreshV10 .jakLiveSheet span{
  color:var(--j18-muted) !important;
}

/* ---------- Profile / VIP surfaces ---------- */
body.jakPageHome.jakUiRefreshV10 :is(.profileModal,.publicProfileBox,.jakDialogBox,.vipModalContent,.vipCheckoutCard,.vipDanaPaymentCard){
  background:linear-gradient(180deg,var(--j18-card),var(--j18-card-soft)) !important;
  color:var(--j18-text) !important;
  border:1px solid var(--j18-line) !important;
  box-shadow:var(--j18-shadow-lg) !important;
}

/* ---------- Generic inputs inside UI ---------- */
body.jakUiRefreshV10 :is(input,textarea,select){
  color:var(--j18-text) !important;
  border-color:var(--j18-line-strong) !important;
}

/* ---------- Admin / owner / staff pages ---------- */
body.jakUiRefreshV10 :is(.box,.card,.stat,.item,.acc,.adminMultiSummary,.adminMultiRow,.adminActivityRow){
  border-color:var(--j18-line) !important;
  box-shadow:var(--j18-shadow-sm) !important;
}
body.jakUiRefreshV10 :is(.box,.card){
  background:var(--j18-card) !important;
  color:var(--j18-text) !important;
}
body.jakUiRefreshV10 :is(.stat,.item,.acc,.adminMultiSummary,.adminMultiRow,.adminActivityRow){
  background:var(--j18-card-soft) !important;
  color:var(--j18-text) !important;
}

/* Small screens: only cosmetic refinements, no grid changes */
@media (max-width:640px){
  body.jakPageHome.jakUiRefreshV10 #filterTabs button{
    box-shadow:0 4px 12px rgba(85,38,62,.04) !important;
  }
  body.jakPageHome.jakUiRefreshV10 #list > .card{
    box-shadow:0 9px 23px rgba(93,43,69,.08) !important;
  }
}