/* ============================================================
   DAUNGROUP v5 — 8 Sites, animated, fully responsive
   ============================================================ */
:root {
  --stroke: rgba(111,212,255,.13);
  --stroke-hi: rgba(54,227,255,.28);
  --text: #eef5ff;
  --muted: #7a90b0;
  --cyan: #36e3ff;
  --pink: #ff4bdd;
  --purple: #a245ff;
  --bg-card: linear-gradient(155deg, rgba(14,20,38,.90), rgba(7,10,22,.95));
  --shadow: 0 8px 30px rgba(0,0,0,.38);
  --shadow-glow: 0 0 24px rgba(54,227,255,.12);
  --nav-bg: linear-gradient(170deg,rgba(5,8,18,.98),rgba(3,4,10,.99));
  --nav-border: rgba(54,227,255,.18);
  --btn-bg: linear-gradient(135deg,rgba(54,227,255,.14),rgba(162,69,255,.18));
  --btn-border: rgba(54,227,255,.26);
  --btn-active: linear-gradient(135deg,rgba(54,227,255,.26),rgba(162,69,255,.30));
  --r-xl: 18px;
  --r-lg: 13px;
  --r-md: 9px;
  --r-sm: 6px;
  --gap: 10px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden;scroll-behavior:smooth}
body{
  min-width:320px;
  font-family:"Poppins",system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(ellipse 70% 45% at 8% 0%,  rgba(54,227,255,.07) 0%,transparent 55%),
    radial-gradient(ellipse 55% 38% at 92% 3%, rgba(162,69,255,.08) 0%,transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 80%,rgba(255,75,221,.04) 0%,transparent 50%),
    linear-gradient(180deg,#030508 0%,#06090f 50%,#030508 100%);
}
body.lock-scroll{overflow:hidden!important}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

/* ── Shell ── */
.site-shell{
  width:min(1160px,calc(100% - 16px));
  margin:8px auto 28px;
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}
.glass{
  background:var(--bg-card);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}

/* ── Section head ── */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.section-head.compact{margin-bottom:8px}
.section-head :is(h1,h2){margin:0;font-size:11px;font-family:"Orbitron",sans-serif;letter-spacing:.14em;text-transform:uppercase}
.section-head p{margin:3px 0 0;color:var(--muted);font-size:10px}
.badge-tag{
  font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:99px;
  background:linear-gradient(90deg,rgba(54,227,255,.15),rgba(255,75,221,.15));
  border:1px solid rgba(54,227,255,.20);color:var(--cyan);
}
.slide-counter{font-size:9px;color:var(--muted);letter-spacing:.06em;font-family:"Orbitron",sans-serif}

/* ── Ticker ── */
.running-text{
  overflow:hidden;
  border-radius:var(--r-md);
  padding:6px 0;
  /* fit-to-content width, centered — JS sets --marquee-fit-width */
  width: var(--marquee-fit-width, 100%);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* no border, no background box — dissolve edges via mask */
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.15) 3%,rgba(0,0,0,.6) 8%,black 16%,black 84%,rgba(0,0,0,.6) 92%,rgba(0,0,0,.15) 97%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.15) 3%,rgba(0,0,0,.6) 8%,black 16%,black 84%,rgba(0,0,0,.6) 92%,rgba(0,0,0,.15) 97%,transparent 100%);
  transition: width .3s ease;
}
.marquee{display:flex;gap:36px;white-space:nowrap;width:max-content;animation:marquee 18s linear infinite}
.marquee span{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(210,235,255,.92);text-shadow:0 0 12px rgba(160,210,255,.35),0 0 1px rgba(255,255,255,.4)}

/* ── Header Banner 10:1 ── */
.top-banner{
  display:block;width:100%;border-radius:var(--r-lg);
  overflow:hidden;aspect-ratio:10/1;
  border:1px solid var(--stroke);
  transition:box-shadow .3s;
}
.top-banner:hover{box-shadow:var(--shadow-glow)}
.top-banner img{width:100%;height:100%;object-fit:cover;object-position:center}

/* ===== Unified subpage home button — consistent across all menu pages ===== */
.subpage-topbar{
  display:flex;
  align-items:center;
  padding:0 0 4px;
}
.subpage-home-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px 7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  color:#dbeafe;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  transition:background .18s, border-color .18s, transform .15s;
  letter-spacing:.01em;
}
.subpage-home-link:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
  transform:translateX(-2px);
}
@media (max-width: 768px){
  .subpage-home-link{
    font-size:11px;
    padding:6px 12px 6px 9px;
  }
}

/* ── Site header bar ── */
.site-header-bar{
  display:flex;align-items:center;gap:14px;
  padding:10px 16px;border-radius:var(--r-xl);
}
.brand-block{display:flex;align-items:center;gap:11px;flex-shrink:0}
a.brand-block{text-decoration:none;color:inherit;cursor:pointer}
a.brand-block:hover{opacity:.88}
.main-logo{
  width:48px;height:48px;object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(54,227,255,.40));
  animation:logoPulse 4s ease-in-out infinite;
}
@keyframes logoPulse{
  0%,100%{filter:drop-shadow(0 0 10px rgba(54,227,255,.40))}
  50%    {filter:drop-shadow(0 0 18px rgba(54,227,255,.70))}
}
.brand-text{text-align:left}
.brand-text :is(h1,.brand-site-title){
  margin:0;font-family:"Orbitron",sans-serif;
  font-size:clamp(12px,1.8vw,19px);letter-spacing:.10em;line-height:1.1;white-space:nowrap;
}
.brand-text p{
  margin:2px 0 0;color:var(--muted);
  font-size:clamp(6.5px,.9vw,9px);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
}
.top-nav{
  display:flex;align-items:center;gap:4px;flex-wrap:nowrap;flex:1;justify-content:flex-end;
}
.nav-btn{
  white-space:nowrap;padding:7px 10px;border-radius:var(--r-sm);
  font-size:9px;font-weight:700;letter-spacing:.04em;
  color:var(--muted);background:transparent;border:1px solid transparent;
  transition:color .18s,background .18s,border-color .18s,transform .15s;
}
.nav-btn:hover{color:var(--text);background:rgba(255,255,255,.06);border-color:var(--stroke);transform:translateY(-1px)}
.nav-btn.active{color:var(--cyan);background:rgba(54,227,255,.10);border-color:rgba(54,227,255,.22)}


/* ── Site tabs : Spotlight carousel redesign ── */
.site-tabs-wrap{
  border-radius:28px;
  padding:14px 16px;
  overflow:visible;
  position:relative;
  isolation:isolate;
}
.site-tabs-wrap::before,
.site-tabs-wrap::after{
  content:'';
  position:absolute;
  inset:auto;
  pointer-events:none;
  z-index:0;
}
.site-tabs-wrap::before{
  width:260px;height:260px;left:50%;top:50%;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:radial-gradient(circle, rgba(54,227,255,.20) 0%, rgba(162,69,255,.12) 42%, rgba(0,0,0,0) 72%);
  filter:blur(22px);
  animation:spotlightBreath 5s ease-in-out infinite;
}
.site-tabs-wrap::after{
  left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  opacity:.7;
}
.site-tabs{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:10px;
  position:relative;
  z-index:1;
}
.site-tab{
  flex:0 0 104px;
  min-width:104px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 8px 11px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  position:relative;
  overflow:visible;
  cursor:pointer;
  backdrop-filter:blur(10px);
  opacity:.58;
  transform:scale(.9) translateY(2px);
  filter:saturate(.85);
  transition:
    transform .34s cubic-bezier(.2,.8,.2,1),
    opacity .34s ease,
    box-shadow .34s ease,
    border-color .34s ease,
    filter .34s ease,
    background .34s ease;
}
.site-tab::before{
  content:'';
  position:absolute;
  inset:-35% -60%;
  background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.20) 50%, transparent 65%);
  transform:translateX(-72%) rotate(8deg);
  transition:transform .8s ease;
  pointer-events:none;
  opacity:.45;
}
.site-tab::after{
  content:'';
  position:absolute;
  left:16px; right:16px; bottom:8px; height:10px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(54,227,255,.44), rgba(162,69,255,.18) 52%, rgba(0,0,0,0) 76%);
  filter:blur(10px);
  opacity:0;
  transform:scale(.72);
  transition:opacity .34s ease, transform .34s ease;
  pointer-events:none;
}
.site-tab img{
  width:34px;height:34px;object-fit:contain;flex-shrink:0;
  transform:translateZ(0) scale(.96);
  transition:transform .34s cubic-bezier(.2,.8,.2,1), filter .34s ease;
  filter:drop-shadow(0 0 0 rgba(54,227,255,0));
}
.site-tab span{
  font-size:9px;
  font-weight:800;
  letter-spacing:.11em;
  color:#90a9cb;
  text-align:center;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  transition:color .34s ease, letter-spacing .34s ease, transform .34s ease;
}
.site-tab:hover,
.site-tab.active{
  opacity:1;
  transform:scale(1.04) translateY(-5px);
  border-color:rgba(54,227,255,.28);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(54,227,255,.08) 56%, rgba(162,69,255,.07));
  box-shadow:
    0 18px 34px rgba(2,8,20,.46),
    0 0 0 1px rgba(54,227,255,.12) inset,
    0 0 26px rgba(54,227,255,.15);
  filter:saturate(1.1);
}
.site-tab:hover::before,
.site-tab.active::before{transform:translateX(72%) rotate(8deg)}
.site-tab:hover::after,
.site-tab.active::after{opacity:1;transform:scale(1.1)}
.site-tab:hover img,
.site-tab.active img{
  transform:scale(1.12) translateY(-1px);
  filter:drop-shadow(0 0 12px rgba(54,227,255,.42));
}
.site-tab:hover span,
.site-tab.active span{
  color:#eaf9ff;
  letter-spacing:.13em;
  transform:translateY(1px);
}
.site-tab:focus-visible{
  outline:none;
  border-color:rgba(54,227,255,.42);
  box-shadow:0 0 0 3px rgba(54,227,255,.16), 0 18px 34px rgba(2,8,20,.46);
  opacity:1;
}
.site-tab.active{z-index:2}

@keyframes spotlightBreath{
  0%,100%{transform:translate(-50%,-50%) scale(.94); opacity:.65}
  50%{transform:translate(-50%,-50%) scale(1.08); opacity:1}
}

@media (max-width: 860px){
  .site-tabs-wrap{
    padding:12px 0 14px;
    border-radius:24px;
  }
  .site-tabs{
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:2px 18px 10px;
    gap:12px;
  }
  .site-tabs::-webkit-scrollbar{display:none}
  .site-tab{
    scroll-snap-align:center;
    flex:0 0 112px;
    min-width:112px;
    opacity:.82;
    transform:scale(.95);
  }
  .site-tab.active{
    transform:scale(1.02) translateY(-3px);
  }
}


/* ── Main layout ── */
.main-layout{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:var(--gap);align-items:start}
.content-col{display:flex;flex-direction:column;gap:var(--gap);min-width:0}

/* ── Featured Promotion 12:5 ── */
.featured-section{border-radius:var(--r-xl);padding:10px 12px}
.slides{
  position:relative;width:100%;
  aspect-ratio:12/5;max-height:370px;
  border-radius:var(--r-lg);overflow:hidden;background:#050810;
  cursor:grab;user-select:none;
}
.slides:active{cursor:grabbing;}
/* ── Featured Promo: Distortion Fade transition (600ms) — no zoom ── */
.slides{
  overflow:hidden;
}
.slide{
  position:absolute;inset:0;
  pointer-events:none;
  opacity:0;
  z-index:1;
}
.slide.active{
  pointer-events:auto;
  z-index:2;
  animation:distortIn 600ms cubic-bezier(.22,1,.36,1) forwards;
}
.slide.is-leaving{
  pointer-events:none;
  z-index:3;
  animation:distortOut 600ms cubic-bezier(.55,0,1,.45) forwards;
}
@keyframes distortIn{
  0%  { opacity:0; filter:blur(18px) brightness(1.6) saturate(2.5); transform:skewX(-6deg) scaleX(1.04); }
  40% { opacity:1; filter:blur(4px)  brightness(1.1) saturate(1.4); transform:skewX(1.5deg) scaleX(1.01); }
  70% {            filter:blur(1px)  brightness(1.0) saturate(1.1); transform:skewX(-0.5deg) scaleX(1.0); }
  100%{ opacity:1; filter:none; transform:none; }
}
@keyframes distortOut{
  0%  { opacity:1; filter:none; transform:none; }
  40% { opacity:.6; filter:blur(6px) brightness(1.3) saturate(1.8); transform:skewX(3deg) scaleX(1.02); }
  100%{ opacity:0;  filter:blur(22px) brightness(2) saturate(3);    transform:skewX(-8deg) scaleX(.96); }
}
.slide img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform:none;
}

.single-dot{justify-content:center}
.dots{display:flex;gap:6px;margin-top:9px}
.dot{
  width:7px;height:7px;border-radius:999px;border:none;padding:0;
  background:rgba(255,255,255,.18);cursor:pointer;transition:width .3s,background .3s;
}
.dot.active{background:linear-gradient(90deg,var(--cyan),var(--pink));width:22px;box-shadow:0 0 8px rgba(54,227,255,.45)}

/* ── Hero Slider Manual Arrows ── */
.hero-slider-wrap{position:relative;width:100%}
.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  background:rgba(5,12,28,.65);backdrop-filter:blur(8px);
  color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s,opacity .2s;
  line-height:1;padding:0;
}
.hero-arrow:hover{background:rgba(54,227,255,.18);border-color:rgba(54,227,255,.5)}
.hero-prev{left:10px}
.hero-next{right:10px}
@media(max-width:480px){.hero-arrow{width:28px;height:28px;font-size:12px}.hero-prev{left:6px}.hero-next{right:6px}}

/* ── Mini Slider Wrap + Manual Arrows ── */
.mini-slider-wrap{position:relative;width:100%}
.mini-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.15);
  background:rgba(5,12,28,.7);backdrop-filter:blur(6px);
  color:#fff;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s,opacity .2s;opacity:0;
  line-height:1;padding:0;
}
.site-promo-card:hover .mini-arrow{opacity:1}
.mini-arrow:hover{background:rgba(54,227,255,.2);border-color:rgba(54,227,255,.4)}
.mini-prev{left:5px}
.mini-next{right:5px}

/* ── Network Activity ── */
.content-panel{border-radius:var(--r-xl);padding:10px 12px}
.network-carousel-panel{overflow:hidden}
.network-slider-wrap{display:flex;align-items:center;gap:7px;position:relative}
.network-arrow{
  width:28px;height:28px;flex:0 0 28px;
  border:1px solid var(--stroke);border-radius:50%;
  background:rgba(6,9,18,.85);color:rgba(180,220,255,.7);font-size:11px;
  display:grid;place-items:center;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .15s;
}
.network-arrow:hover{
  background:rgba(54,227,255,.15);border-color:var(--stroke-hi);
  color:var(--cyan);transform:scale(1.1);
}
.network-viewport{overflow:hidden;width:100%;border-radius:var(--r-lg)}
.site-slides-track{display:flex;gap:10px;transition:transform .45s cubic-bezier(.22,.61,.36,1);will-change:transform}
.network-slide{flex:0 0 calc(33.333% - 6.7px);max-width:calc(33.333% - 6.7px);scroll-snap-align:start}
.network-dots{display:flex;justify-content:center;gap:7px;margin-top:10px}
.network-dots .dot{width:8px;height:8px}

/* Card */
.site-promo-card.inner{
  border-radius:var(--r-lg);padding:10px;min-width:0;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  border:1px solid var(--stroke);
}
.site-promo-card.inner:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 32px rgba(0,0,0,.4),0 0 0 1px rgba(54,227,255,.12);
  border-color:rgba(54,227,255,.20);
}
.card-header{display:flex;align-items:center;gap:8px;margin-bottom:9px;position:relative}
.site-badge{
  width:38px;height:38px;object-fit:contain;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.04);padding:3px;
  border:1px solid var(--stroke);
  transition:transform .22s,box-shadow .22s;
}
.site-promo-card.inner:hover .site-badge{
  transform:scale(1.1);
  box-shadow:0 0 12px rgba(54,227,255,.35);
}
.card-header h3{margin:0;font-size:10.5px;font-family:"Orbitron",sans-serif;letter-spacing:.04em;flex:1;min-width:0}
.card-header span{color:var(--muted);font-size:8.5px;display:block}
/* Corner arrow link */
.card-corner-link{
  width:24px;height:24px;border-radius:6px;flex-shrink:0;
  display:grid;place-items:center;font-size:13px;
  background:rgba(54,227,255,.08);border:1px solid rgba(54,227,255,.15);
  color:var(--cyan);transition:background .18s,transform .18s;
}
.card-corner-link:hover{background:rgba(54,227,255,.20);transform:translate(1px,-1px)}
/* Network Activity image 1:1 */
.mini-slider{
  position:relative;width:100%;aspect-ratio:16/9;
  border-radius:var(--r-md);overflow:hidden;background:#050810;
}
.mini-slider > a{position:absolute;inset:0;display:block}
.mini-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;background:#050810;opacity:0;pointer-events:none;
  transition:opacity .45s ease,transform .4s ease;
}
.mini-slide.active{opacity:1;pointer-events:auto}
.site-promo-card.inner:hover .mini-slide{transform:scale(1.03)}
.mini-meta{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-top:8px;font-size:9px;color:var(--muted);flex-wrap:wrap;
}
.view-link{
  padding:5px 10px;border-radius:var(--r-sm);
  background:linear-gradient(135deg,rgba(54,227,255,.14),rgba(162,69,255,.16));
  border:1px solid rgba(54,227,255,.16);
  color:var(--cyan);font-weight:700;font-size:9px;white-space:nowrap;
  transition:background .18s,transform .15s,box-shadow .18s;
}
.view-link:hover{
  background:linear-gradient(135deg,rgba(54,227,255,.26),rgba(162,69,255,.28));
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(54,227,255,.20);
}

/* ── Sidebar ── */
.sidebar{display:flex;flex-direction:column;gap:var(--gap)}
.sidebar-card{border-radius:var(--r-xl);padding:10px 12px}
.about-box{display:flex;flex-direction:column;gap:8px;align-items:center}
.about-logo{
  width:60px;
  animation:logoPulse 5s ease-in-out infinite;
}
.about-box p{margin:0;font-size:10.5px;line-height:1.65;color:#b8cce8}
.sidebar-promo{display:block;border-radius:var(--r-md);overflow:hidden}
.sidebar-promo img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  transition:transform .4s ease;
}
.sidebar-promo:hover img,.sidebar-promo:hover video{transform:scale(1.04)}

/* ── Footer ── */
.footer{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;border-radius:var(--r-xl);padding:12px 16px;
}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-brand img{width:36px;height:36px;object-fit:contain}
.footer-brand strong{display:block;font-family:"Orbitron",sans-serif;font-size:10.5px;letter-spacing:.10em}
.footer-brand span{color:var(--muted);font-size:9px}
.footer-links{display:flex;gap:8px 14px;flex-wrap:wrap;font-size:9.5px;color:#8090b0}
.footer-links a{transition:color .18s}
.footer-links a:hover{color:var(--cyan)}

/* ── Animations ── */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tabsAura{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(18px,12px,0) scale(1.08)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes tabFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes tabIconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* ============================================================
   SUBPAGE shared styles
   ============================================================ */
.subpage-wrap{
  background:var(--bg-card);border:1px solid var(--stroke);
  border-radius:var(--r-xl);padding:20px 24px;
  box-shadow:var(--shadow);
}
.subpage-hero{
  width:100%;aspect-ratio:12/5;max-height:320px;
  border-radius:var(--r-lg);overflow:hidden;background:#050810;
  margin-bottom:16px;
}
.subpage-hero img{width:100%;height:100%;object-fit:cover}
.subpage-site-header{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:var(--r-xl);margin-bottom:var(--gap);
}
.subpage-logo{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(54,227,255,.35))}
.subpage-title{margin:0;font-family:"Orbitron",sans-serif;font-size:clamp(14px,2.5vw,22px);letter-spacing:.10em}
.subpage-sub{color:var(--muted);font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin:3px 0 0}
.back-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:var(--r-md);
  background:rgba(54,227,255,.10);border:1px solid rgba(54,227,255,.20);
  color:var(--cyan);font-size:10px;font-weight:700;letter-spacing:.04em;
  transition:background .18s,transform .15s;
}
.back-btn:hover{background:rgba(54,227,255,.20);transform:translateX(-2px)}
.placeholder-note{
  margin:16px 0 0;padding:14px 16px;border-radius:var(--r-lg);
  background:rgba(54,227,255,.05);border:1px solid rgba(54,227,255,.12);
  color:#a0bcd8;font-size:11px;line-height:1.65;
}

/* ============================================================
   ≤ 980px  Tablet
   ============================================================ */
@media(max-width:980px){
  .main-layout{grid-template-columns:1fr}
  .sidebar{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
  .network-slide{flex:0 0 calc(50% - 5px);max-width:calc(50% - 5px)}
  /* Site tabs scroll */
  .site-tabs{overflow-x:auto;justify-content:flex-start;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .site-tabs::-webkit-scrollbar{display:none}
  .site-tab{flex:0 0 auto;min-width:80px}
}
@media(max-width:680px){
  .sidebar{grid-template-columns:1fr}
}

/* ============================================================
   ≤ 720px  Mobile
   ============================================================ */
@media(max-width:720px){
  .site-shell{width:calc(100% - 12px);gap:8px;margin:6px auto 16px}
  /* Ticker */
  .running-text{padding:5px 0;border-radius:var(--r-sm)}
  .marquee{gap:20px;animation-duration:22s}
  .marquee span{font-size:7.5px}
  /* Banner */
  .top-banner{border-radius:var(--r-md)}
  /* Header bar */
  .site-header-bar{padding:10px 48px 10px 12px;border-radius:var(--r-lg);gap:8px;position:relative;justify-content:center;min-height:60px;z-index:10000}
  .brand-block{margin:0 auto;justify-content:center;max-width:calc(100% - 56px)}
  .main-logo{width:38px;height:38px}
  .brand-text{display:flex;flex-direction:column;justify-content:center;min-width:0}
  .brand-text :is(h1,.brand-site-title){font-size:13px}
  .brand-text p{font-size:7px}
  /* Hamburger removed — mobile navigation is the fixed bottom nav (footer.php) */
  /* Drawer */
  .top-nav{
    position:fixed;top:0;right:0;left:auto;bottom:0;height:100dvh;
    width:min(78vw,280px);max-width:280px;
    background:var(--nav-bg,linear-gradient(170deg,rgba(8,12,24,.99),rgba(4,6,14,.99)));
    border-left:1px solid var(--nav-border,var(--stroke-hi));
    box-shadow:-8px 0 40px rgba(0,0,0,.6);
    z-index:10030;transform:translate3d(110%,0,0);transition:transform .26s ease;
    flex-direction:column;justify-content:flex-start;align-items:stretch;
    gap:4px;padding:14px 10px 20px;overflow-y:auto;
    visibility:hidden;pointer-events:none;
  }
  .top-nav.open{transform:translate3d(0,0,0);visibility:visible;pointer-events:auto}
  .nav-btn{
    width:100%;text-align:left;padding:10px 12px;
    border-radius:var(--r-md);font-size:10.5px;
    color:var(--text);border:1px solid var(--stroke);background:rgba(255,255,255,.03);
  }
  .nav-btn.active,.nav-btn:hover{color:var(--cyan);background:rgba(54,227,255,.10);border-color:rgba(54,227,255,.22)}

  .site-tabs-wrap,.main-layout,.footer{position:static;z-index:0}
  /* Site tabs */
  .site-tabs-wrap{padding:7px 8px;border-radius:var(--r-lg)}
  .site-tabs{overflow-x:auto;justify-content:flex-start;gap:5px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding-bottom:2px}
  .site-tabs::-webkit-scrollbar{display:none}
  .site-tab{flex:0 0 auto;min-width:68px;padding:7px 8px;gap:4px;border-radius:var(--r-md);scroll-snap-align:start}
  .site-tab img{width:22px;height:22px}
  .site-tab span{font-size:7.5px}
  /* Featured */
  .featured-section{border-radius:var(--r-lg);padding:8px}
  .slides{max-height:none;border-radius:var(--r-md)}
  /* Network */
  .content-panel{border-radius:var(--r-lg);padding:8px}
  .network-slider-wrap{gap:5px}
  .network-arrow{width:24px;height:24px;flex:0 0 24px;font-size:11px}
  .site-slides-track{gap:0}
  .network-slide{flex:0 0 100%;max-width:100%}
  .site-promo-card.inner{padding:8px}
  .site-badge{width:32px;height:32px}
  .card-header h3{font-size:10px}
  .card-header span{font-size:8px}
  .card-corner-link{width:22px;height:22px;font-size:12px}
  .mini-meta{font-size:8.5px;margin-top:7px}
  .view-link{padding:4px 9px;font-size:8.5px}
  /* Sidebar */
  .sidebar-card{border-radius:var(--r-lg);padding:8px}
  .about-logo{width:50px}
  .about-box p{font-size:10px}
  /* Footer */
  .footer{flex-direction:column;align-items:flex-start;padding:10px 12px}
  .footer-links{gap:6px 10px;font-size:9px}
  /* Subpage */
  .subpage-wrap{padding:14px}
  .subpage-site-header{padding:10px 12px}
  .subpage-logo{width:44px;height:44px}
  .subpage-title{font-size:14px}
}

/* ============================================================
   ≤ 420px  Small phones
   ============================================================ */
@media(max-width:420px){
  .site-shell{width:calc(100% - 8px)}
  .site-header-bar{padding:9px 46px 9px 10px;min-height:56px}
  .brand-block{max-width:calc(100% - 50px);gap:8px}
  .main-logo{width:34px;height:34px}
  .brand-text :is(h1,.brand-site-title){font-size:12px}
  .brand-text p{font-size:6.5px}
  .network-arrow{width:22px;height:22px;flex-basis:22px}
  .site-tab{min-width:60px}
  .site-tab img{width:18px;height:18px}
  .site-tab span{font-size:7px}
}

@media (prefers-reduced-motion: reduce){
  .site-tabs-wrap::before,.site-tabs-wrap::after,.site-tab,.site-tab img,.main-logo,.about-logo,.marquee{animation:none!important}
  .site-tab,.site-tab::before,.site-tab::after,.site-tab img,.site-tab span{transition:none!important}
}


/* ===== Floating Brand Dock redesign: Site tab strip only ===== */
.site-tabs-wrap{
  margin-top: 2px;
  padding: 12px 14px;
  border-radius: 26px;
  overflow: visible;
  background: linear-gradient(180deg, rgba(13,18,34,.82), rgba(8,12,24,.72));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 18px 42px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(54,227,255,.05);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.site-tabs-wrap::before,
.site-tabs-wrap::after{
  opacity: .4;
  filter: blur(42px);
}
.site-tabs{
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.site-tab{
  flex: 1 1 0;
  min-width: 0;
  min-height: 76px;
  padding: 12px 8px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.12), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(255,255,255,.02),
    0 10px 24px rgba(3,8,20,.18);
  transform: translateY(0);
  animation: dockFloat 5.8s ease-in-out infinite;
  animation-delay: calc(var(--dock-i, 0) * .16s);
  transition:
    transform .32s cubic-bezier(.22,.7,.28,1),
    border-color .32s ease,
    box-shadow .32s ease,
    background .32s ease,
    filter .32s ease;
}
.site-tab:nth-child(1){--dock-i:0}
.site-tab:nth-child(2){--dock-i:1}
.site-tab:nth-child(3){--dock-i:2}
.site-tab:nth-child(4){--dock-i:3}
.site-tab:nth-child(5){--dock-i:4}
.site-tab:nth-child(6){--dock-i:5}
.site-tab:nth-child(7){--dock-i:6}
.site-tab:nth-child(8){--dock-i:7}
.site-tab::before{
  content:'';
  position:absolute;
  inset:-35% auto auto -40%;
  width:70%;
  height:180%;
  background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.14) 48%, transparent 72%);
  transform: rotate(14deg) translateX(-140%);
  opacity:.75;
  transition: transform .75s ease;
}
.site-tab::after{
  top: auto;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48%;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, rgba(54,227,255,.92), rgba(162,69,255,.88));
  box-shadow: 0 0 16px rgba(54,227,255,.34);
  opacity: .38;
  transition: width .32s ease, opacity .32s ease, box-shadow .32s ease;
}
.site-tab img{
  width: 32px;
  height: 32px;
  animation: dockLogoPulse 4.6s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.18));
}
.site-tab span{
  font-size: 8px;
  letter-spacing: .08em;
  color: #d5e6ff;
  opacity: .92;
}
.site-tab:hover,
.site-tab.active{
  transform: translateY(-8px) scale(1.045);
  border-color: rgba(54,227,255,.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(54,227,255,.18), rgba(54,227,255,0) 42%),
    linear-gradient(180deg, rgba(54,227,255,.11), rgba(162,69,255,.07));
  box-shadow:
    0 18px 34px rgba(2,9,22,.34),
    0 0 0 1px rgba(54,227,255,.08),
    0 0 24px rgba(54,227,255,.16),
    inset 0 1px 0 rgba(255,255,255,.10);
  filter: saturate(1.08);
}
.site-tab:hover::before,
.site-tab.active::before{transform: rotate(14deg) translateX(230%)}
.site-tab:hover::after,
.site-tab.active::after{
  width: 70%;
  opacity: 1;
  box-shadow: 0 0 22px rgba(54,227,255,.55);
}
.site-tab:hover img,
.site-tab.active img{
  transform: translateY(-1px) scale(1.14) rotate(-3deg);
  filter: drop-shadow(0 0 12px rgba(54,227,255,.30));
}
.site-tab:hover span,
.site-tab.active span{
  color: #f4fbff;
  letter-spacing: .1em;
}
@keyframes dockFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}
@keyframes dockLogoPulse{
  0%,100%{ transform: scale(1) rotate(0deg); }
  50%{ transform: scale(1.07) rotate(-2deg); }
}
@media (max-width: 900px){
  .site-tabs-wrap{
    padding: 10px 10px;
    border-radius: 22px;
  }
  .site-tabs{
    gap: 8px;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
  }
  .site-tab{
    flex: 0 0 86px;
    min-width: 86px;
    min-height: 72px;
    scroll-snap-align: center;
  }
}
@media (max-width: 520px){
  .site-tabs-wrap{
    padding: 9px 8px;
  }
  .site-tabs{
    gap: 7px;
  }
  .site-tab{
    flex-basis: 82px;
    min-width: 82px;
    min-height: 70px;
    border-radius: 18px;
    padding: 11px 7px 9px;
  }
  .site-tab img{ width: 30px; height: 30px; }
}


/* ===== STRONG SITE TAB ENERGY BAR OVERRIDE ===== */
.site-tabs-wrap{
  overflow:visible;
}
.site-tabs{
  gap:12px;
}
.site-tab{
  overflow:visible;
  transition:transform .32s cubic-bezier(.22,.68,.18,1),
             border-color .32s ease,
             background .32s ease,
             box-shadow .32s ease,
             opacity .32s ease;
}
.site-tab::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(115deg, rgba(255,255,255,.06), rgba(255,255,255,0) 28%, rgba(0,255,170,.08) 56%, rgba(0,255,220,0) 80%);
  transform:translateX(-130%) skewX(-16deg);
  opacity:.55;
  pointer-events:none;
  animation:siteTabSweep 4.4s linear infinite;
}
.site-tab::after{
  left:12%;
  right:12%;
  bottom:6px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent 0%, rgba(0,255,170,.72) 20%, rgba(90,255,225,1) 50%, rgba(0,255,170,.72) 80%, transparent 100%);
  background-size:220% 100%;
  filter:blur(.2px);
  opacity:.32;
  transform:none;
  box-shadow:0 0 10px rgba(0,255,170,.16), 0 0 18px rgba(0,255,170,.08);
  animation:energyLineFlow 2.6s linear infinite;
}
.site-tab img{
  transition:transform .34s cubic-bezier(.22,.68,.18,1), filter .34s ease;
}
.site-tab span{
  transition:color .32s ease, letter-spacing .32s ease, transform .32s ease, opacity .32s ease;
}
.site-tab:hover{
  transform:translateY(-4px) scale(1.02);
}
.site-tab.active{
  transform:translateY(-5px) scale(1.04);
  border-color:rgba(72,255,218,.42);
  background:linear-gradient(180deg, rgba(17,32,58,.96), rgba(10,24,46,.97));
  box-shadow:
    0 16px 32px rgba(2,8,20,.44),
    0 0 0 1px rgba(58,238,255,.18) inset,
    0 0 22px rgba(0,255,170,.18),
    0 10px 22px rgba(0,255,170,.12);
}
.site-tab.active::after{
  height:5px;
  opacity:1;
  background:linear-gradient(90deg,
    rgba(0,255,170,0) 0%,
    rgba(0,255,170,.95) 16%,
    rgba(125,255,233,1) 34%,
    rgba(255,255,255,.98) 50%,
    rgba(125,255,233,1) 66%,
    rgba(0,255,170,.95) 84%,
    rgba(0,255,170,0) 100%);
  background-size:220% 100%;
  box-shadow:
    0 0 10px rgba(0,255,170,.60),
    0 0 22px rgba(0,255,170,.42),
    0 0 36px rgba(0,255,170,.22);
  animation:energyLineFlow 1.55s linear infinite, energyBarPulse 2.15s ease-in-out infinite;
}
.site-tab.active::before{
  opacity:.95;
  animation:siteTabSweep 2.8s linear infinite;
}
.site-tab.active img{
  transform:scale(1.1) translateY(-1px);
  filter:drop-shadow(0 0 10px rgba(0,255,170,.38));
}
.site-tab.active span{
  color:#f2fffc;
  letter-spacing:.12em;
}
.site-tab:not(.active){
  opacity:.92;
}
.site-tab:not(.active):hover::after{
  opacity:.65;
}
.site-tab.active > *{
  position:relative;
  z-index:1;
}
.site-tab.active{
  z-index:2;
}
.site-tabs-wrap::before{
  width:420px;
  height:140px;
  left:50%;
  top:auto;
  bottom:-36px;
  transform:translateX(-50%);
  border-radius:999px;
  background:radial-gradient(circle, rgba(0,255,170,.24) 0%, rgba(0,255,170,.16) 30%, rgba(85,180,255,.10) 52%, rgba(0,0,0,0) 74%);
  filter:blur(18px);
  animation:tabsAura 3.8s ease-in-out infinite;
}
@keyframes energyLineFlow{
  0%{background-position:200% 0}
  100%{background-position:-20% 0}
}
@keyframes energyBarPulse{
  0%,100%{opacity:1; box-shadow:0 0 10px rgba(0,255,170,.58), 0 0 22px rgba(0,255,170,.40), 0 0 36px rgba(0,255,170,.20)}
  50%{opacity:1; box-shadow:0 0 14px rgba(0,255,170,.72), 0 0 28px rgba(0,255,170,.54), 0 0 44px rgba(0,255,170,.28)}
}
@keyframes siteTabSweep{
  0%{transform:translateX(-130%) skewX(-16deg)}
  100%{transform:translateX(185%) skewX(-16deg)}
}
@keyframes tabsAura{
  0%,100%{opacity:.72; transform:translateX(-50%) scale(.96)}
  50%{opacity:1; transform:translateX(-50%) scale(1.06)}
}
@media (max-width: 860px){
  .site-tabs{
    gap:10px;
    justify-content:flex-start;
    overflow-x:auto;
    padding-bottom:8px;
    scroll-snap-type:x proximity;
  }
  .site-tab{
    scroll-snap-align:center;
  }
  .site-tab::after{
    bottom:5px;
  }
}


/* ===== FINAL UI PATCH: site directory + button reliability ===== */
.site-shortcuts.compact-chips{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:8px !important;
}
.site-chip.compact{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  min-height:0 !important;
  padding:8px 10px !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.07) !important;
  transition:background .18s ease, border-color .18s ease, transform .15s ease !important;
}
.site-chip.compact:hover{
  background:rgba(54,227,255,.10) !important;
  border-color:rgba(54,227,255,.22) !important;
  transform:translateY(-1px) !important;
}
.site-chip.compact img{
  width:24px !important;
  height:24px !important;
  object-fit:contain !important;
  flex:0 0 24px !important;
}
.site-chip.compact span{
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
  color:#dcecff !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.site-tabs-wrap{
  margin-top:0 !important;
  padding:10px 12px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg, rgba(13,18,34,.86), rgba(8,12,24,.82)) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.site-tabs-wrap::before,
.site-tabs-wrap::after{
  display:none !important;
}
.site-tabs{
  gap:8px !important;
  justify-content:center !important;
}
.site-tab{
  animation:none !important;
  flex:1 1 0 !important;
  min-width:0 !important;
  min-height:72px !important;
  padding:10px 8px !important;
  border-radius:16px !important;
  opacity:1 !important;
  transform:none !important;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  box-shadow:none !important;
}
.site-tab::before,
.site-tab::after{
  display:none !important;
}
.site-tab img{
  width:28px !important;
  height:28px !important;
  animation:none !important;
  transform:none !important;
  filter:none !important;
}
.site-tab span{
  font-size:8px !important;
  letter-spacing:.06em !important;
  color:#d7e7ff !important;
}
.site-tab:hover,
.site-tab.active{
  transform:translateY(-2px) !important;
  border-color:rgba(54,227,255,.24) !important;
  background:linear-gradient(180deg, rgba(54,227,255,.12), rgba(162,69,255,.08)) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.24) !important;
}
.site-tab:hover img,
.site-tab.active img{
  transform:none !important;
  filter:none !important;
}
.site-tab:hover span,
.site-tab.active span{
  color:#ffffff !important;
}

.nav-btn,
.network-arrow,
.card-corner-link,
.view-link,
.site-chip.compact,
.site-tab,
.sidebar-promo,
.footer-links a{
  position:relative;
  z-index:2;
}
.card-corner-link,
.view-link,
.network-arrow,
.nav-btn,

@media (max-width:980px){
  .sidebar{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:720px){
  .site-tabs-wrap{
    padding:8px !important;
    border-radius:14px !important;
  }
  .site-tabs{
    justify-content:flex-start !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-snap-type:x proximity !important;
    gap:6px !important;
  }
  .site-tab{
    flex:0 0 76px !important;
    min-width:76px !important;
    min-height:64px !important;
    padding:8px 6px !important;
    scroll-snap-align:start !important;
  }
  .site-tab img{
    width:22px !important;
    height:22px !important;
  }
  .site-tab span{
    font-size:7px !important;
  }
  .site-shortcuts.compact-chips{
    gap:6px !important;
  }
  .site-chip.compact{
    padding:7px 8px !important;
    border-radius:9px !important;
  }
  .site-chip.compact img{
    width:20px !important;
    height:20px !important;
    flex-basis:20px !important;
  }
  .site-chip.compact span{
    font-size:9px !important;
  }
  .network-arrow{
    width:26px !important;
    height:26px !important;
    flex-basis:26px !important;
  }
}

@media(max-width:720px){
  .network-viewport{scroll-snap-type:x mandatory}
}


body.popup-lock{overflow:hidden}
.homepage-popup-overlay{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(4,8,18,.76);backdrop-filter:blur(10px);overflow-y:auto}
.homepage-popup-overlay.hidden,.homepage-popup-overlay.is-hidden{display:none!important}
.homepage-popup{position:relative;width:min(430px,calc(100vw - 32px));max-height:calc(100dvh - 32px);display:flex;flex-direction:column;overflow:hidden;border-radius:24px;border:1px solid rgba(95,210,255,.28);background:rgba(6,11,24,.96);box-shadow:0 28px 80px rgba(0,0,0,.48),0 0 34px rgba(67,197,255,.08)}
.homepage-popup-media{width:100%;background:#050913;display:flex;align-items:center;justify-content:center;overflow:hidden}
.homepage-popup-media img{width:100%;height:auto;max-height:min(72dvh,620px);display:block;object-fit:contain}
.homepage-popup-body{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 14px 14px;background:rgba(7,12,27,.98)}
.homepage-popup-body h2{margin:0;text-align:center;font-size:20px;line-height:1.18}
.homepage-popup-body p{margin:0;text-align:center;color:var(--muted);line-height:1.55;font-size:13px}
.homepage-popup-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;width:100%;margin-top:0}
.popup-primary-btn,.popup-secondary-btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 14px;border-radius:12px;text-decoration:none;font-size:12px;font-weight:800;line-height:1;border:1px solid rgba(255,255,255,.1);cursor:pointer;white-space:nowrap}
.popup-primary-btn{color:#06111f;background:linear-gradient(90deg,var(--cyan),var(--pink));box-shadow:0 10px 22px rgba(62,204,255,.18)}
.popup-secondary-btn{color:#fff;background:rgba(255,255,255,.075)}
.homepage-popup-close{position:absolute;top:10px;right:10px;width:34px;height:34px;border:none;border-radius:999px;background:rgba(0,0,0,.62);color:#fff;font-size:22px;line-height:1;cursor:pointer;z-index:6;pointer-events:auto;box-shadow:0 8px 18px rgba(0,0,0,.25)}
@media (min-width: 861px){.homepage-popup{width:min(430px,88vw)}.homepage-popup-actions{justify-content:center}}
@media (max-width: 520px){.homepage-popup-overlay{align-items:center;padding:12px}.homepage-popup{width:calc(100vw - 24px);border-radius:22px;max-height:calc(100dvh - 24px)}.homepage-popup-media img{max-height:74dvh}.homepage-popup-body{padding:12px}.popup-primary-btn,.popup-secondary-btn{min-height:34px;padding:8px 13px;font-size:12px}.homepage-popup-close{top:8px;right:8px;width:32px;height:32px;font-size:21px}}

/* ===== SITE PAGE REBUILD: Enhanced mobile-first compact layout ===== */
.site-page-clean{
  max-width: 920px;
  margin: 0 auto;
  padding: 10px 8px 18px;
}
.compact-header{margin-bottom:8px}
.compact-site-main{display:grid;gap:10px}

/* Enhanced Featured Banner with animations */
.hero-featured-slider{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  min-height:150px;
  padding:0;
  transition: box-shadow 0.3s;
}
.hero-featured-slider::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, 
    rgba(54,227,255,0.3), 
    rgba(162,69,255,0.3),
    rgba(255,75,221,0.3));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, 
                linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 3;
}
.hero-featured-slider:hover::before {
  opacity: 1;
}
.hero-featured-track{position:relative;min-height:150px}
.hero-featured-slide{position:absolute;inset:0;opacity:0;transition:opacity .28s ease}
.hero-featured-slide.active{opacity:1;z-index:1}
.hero-featured-slide img{width:100%;height:100%;min-height:150px;object-fit:cover;display:block}
.hero-featured-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(5,10,20,.04) 0%, rgba(5,10,20,.18) 48%, rgba(5,10,20,.38) 100%);pointer-events:none;z-index:2}
.hero-dots{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;gap:5px;z-index:3}
.hero-dots .dot{width:7px;height:7px;border:0;border-radius:50%;background:rgba(255,255,255,.42);cursor:pointer;transition:all 0.3s}
.hero-dots .dot.active{background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.15)}
.hero-dots .dot:hover{transform:scale(1.2)}
.site-brand-strip,.site-info-panel,.network-blog-panel,.site-cta-strip{padding:11px;border-radius:14px}

/* Enhanced Site Brand Strip */
.site-brand-strip{
  background: linear-gradient(155deg, rgba(14,20,38,0.92), rgba(7,10,22,0.96)),
              radial-gradient(circle at 20% 50%, rgba(54,227,255,0.08), transparent 70%);
  position: relative;
  overflow: hidden;
}
.site-brand-strip::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
  height: 100%;
  background: radial-gradient(circle at center, rgba(162,69,255,0.06), transparent 70%);
  pointer-events: none;
}
.site-brand-container{
  display:grid;
  gap:16px;
}
@media (min-width: 768px) {
  .site-brand-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .site-brand-id {
    flex: 1;
    min-width: 0;
  }
  .site-brand-actions {
    flex-shrink: 0;
    width: auto !important;
    min-width: 280px;
  }
}
.site-brand-id{display:flex;align-items:center;gap:10px;min-width:0;position:relative;z-index:1}

/* Enhanced Logo */
.site-brand-logo{
  width:46px;
  height:46px;
  object-fit:contain;
  border-radius:12px;
  flex:0 0 46px;
  background:linear-gradient(135deg, rgba(54,227,255,0.25), rgba(162,69,255,0.30));
  padding:6px;
  border:2px solid rgba(54,227,255,0.50);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4), inset 0 2px 0 rgba(255,255,255,0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-brand-logo:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 10px 30px rgba(54,227,255,0.50), inset 0 2px 0 rgba(255,255,255,0.25);
  border-color: rgba(54,227,255,0.80);
}

/* Enhanced Typography */
.site-brand-copy h2{
  margin:0 0 3px;
  font-size:17px;
  line-height:1.08;
  background: linear-gradient(135deg, #fff, #c8e1ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.site-brand-copy p{margin:0;color:#9db4d8;font-size:11px;line-height:1.45;max-width:660px}
.site-desc-wrapper{position:relative}
.site-desc-short, .site-desc-full{margin:0;color:#9db4d8;font-size:11px;line-height:1.45}
.site-desc-toggle{
  background:none;
  border:none;
  color:#36e3ff;
  font-size:10px;
  font-weight:600;
  cursor:pointer;
  padding:4px 0 0;
  text-decoration:underline;
  transition:color 0.2s;
}
.site-desc-toggle:hover{color:#7bffd5}
.site-brand-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;position:relative;z-index:1}

/* Enhanced CTA Buttons */
.site-main-cta,.site-ghost-cta,.cta-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:34px;
  padding:0 10px;
  border-radius:10px;
  font-size:11px;
  font-weight:700;
  text-decoration:none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.site-main-cta,.cta-chip.primary{
  color:#061220;
  background:linear-gradient(135deg,#9be9ff 0%,#7bffd5 100%);
  border:none;
  box-shadow: 0 4px 14px rgba(155,233,255,0.25), inset 0 1px 0 rgba(255,255,255,0.4);
  letter-spacing: 0.02em;
}
.site-main-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #b5f2ff 0%, #95ffe0 100%);
  opacity: 0;
  transition: opacity 0.25s;
}
.site-main-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(155,233,255,0.50), inset 0 1px 0 rgba(255,255,255,0.7);
}
.site-main-cta:hover::before {
  opacity: 1;
}
.site-main-cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(155,233,255,0.2), inset 0 2px 4px rgba(0,0,0,0.1);
}
.site-ghost-cta,.cta-chip{
  color:#d4e4ff;
  background:rgba(255,255,255,.04);
  border:1.5px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}
.site-ghost-cta:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(54,227,255,0.60);
  color: #fff;
  box-shadow: 0 0 25px rgba(54,227,255,0.35);
  transform: translateY(-2px);
}
.clean-head{margin-bottom:8px;padding-bottom:0;border-bottom:0}
.clean-head h2{font-size:13px;letter-spacing:.05em;margin:0}
.hero-empty-state,.network-empty-state{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:16px;color:#c9d7eb}
.hero-empty-state strong{font-size:14px;color:#f6fbff}
.hero-empty-state span,.network-empty-state{font-size:11px;line-height:1.5}

/* Enhanced Site Info Panel */
.site-info-panel {
  background: linear-gradient(155deg, rgba(14,20,38,0.95), rgba(7,10,22,0.98)),
              radial-gradient(circle at 80% 20%, rgba(162,69,255,0.08), transparent 60%);
  border:1px solid rgba(54,227,255,0.12);
  box-shadow:0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}
.site-info-list{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.site-info-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:10px 0;
  border:0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: all 0.2s;
}
.site-info-item:last-child {
  border-bottom: none;
}
.site-info-item:hover {
  padding-left: 4px;
  background: rgba(54,227,255,0.02);
  border-radius: 8px;
}

/* Animated Bullet */
.site-info-bullet{
  width:8px;
  height:8px;
  border-radius:50%;
  background: linear-gradient(135deg, #7bffd5, #9be9ff);
  margin-top:6px;
  flex:0 0 8px;
  box-shadow: 0 0 0 4px rgba(155,233,255,0.12), 0 0 12px rgba(123,255,213,0.3);
  position: relative;
}
.site-info-bullet::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(155,233,255,0.3);
  animation: bulletPulse 2s ease-in-out infinite;
}
@keyframes bulletPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0; }
}

.site-info-copy{display:grid;gap:2px;min-width:0}
.site-info-label{
  display:block;
  font-size:10px;
  color:#7a95c0;
  line-height:1.25;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight: 600;
  margin-bottom: 2px;
}
.site-info-value{
  font-size:11px;
  line-height:1.4;
  color:#f8fcff;
  font-weight:600;
  letter-spacing: 0.01em;
}
/* Enhanced Network Blog Cards */
.network-blog-list{display:grid;gap:10px}
.network-blog-item{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:10px;
  padding:12px;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Hover glow effect */
.network-blog-item::before {
  content: '';
  position: absolute;
  inset: -100%;
  background: radial-gradient(circle, rgba(54,227,255,0.15), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.network-blog-item:hover::before {
  opacity: 1;
}
.network-blog-item:hover {
  transform: translateY(-3px);
  border-color: rgba(54,227,255,0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 24px rgba(54,227,255,0.1);
}

/* Enhanced Thumbnail */
.network-blog-thumb{
  display:block;
  border-radius:10px;
  overflow:hidden;
  min-height:70px;
  position: relative;
  background: rgba(0,0,0,0.3);
  cursor: pointer;
}
.network-blog-thumb::after {
  content: '🔍';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  border-radius: 50%;
  font-size: 14px;
  backdrop-filter: blur(4px);
  transition: transform 0.3s;
  pointer-events: none;
}
.network-blog-thumb:hover::after {
  transform: translate(-50%, -50%) scale(1);
}
.network-blog-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  min-height:70px;
  transition: transform 0.4s, filter 0.3s;
}
.network-blog-thumb:hover img {
  transform: scale(1.08);
  filter: brightness(1.1);
}

.network-blog-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.network-blog-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:9px;color:#98afd3;text-transform:uppercase;letter-spacing:.05em}
.network-blog-badge{display:inline-flex;align-items:center;min-height:18px;padding:0 7px;border-radius:999px;background:rgba(86,222,255,.12);color:#a9efff;border:1px solid rgba(86,222,255,.18)}
.network-blog-copy h3{margin:0;font-size:13px;line-height:1.35;color:#f6fbff}
.network-blog-copy p{margin:0;color:#b6c6e2;font-size:11px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.network-blog-link{display:inline-flex;align-items:center;margin-top:1px;color:#9fe5ff;font-weight:700;text-decoration:none;font-size:11px}
.site-cta-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}

@media (min-width: 641px){
  .site-page-clean{padding:14px 12px 24px;max-width:980px}
  .compact-header{margin-bottom:10px}
  .compact-site-main{gap:12px}
  .hero-featured-slider,.hero-featured-track,.hero-featured-slide img,.hero-empty-state{min-height:190px;border-radius:18px}
  .site-brand-strip,.site-info-panel,.network-blog-panel,.site-cta-strip{padding:14px;border-radius:18px}
  .site-brand-strip{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .site-brand-id{gap:12px}
  .site-brand-logo{width:58px;height:58px;flex-basis:58px;border-radius:14px;padding:7px}
  .site-brand-copy h2{font-size:22px}
  .site-brand-copy p{font-size:12px;line-height:1.55}
  .site-brand-actions{display:flex;gap:10px;width:auto}
  .site-main-cta,.site-ghost-cta,.cta-chip{min-height:40px;padding:0 14px;border-radius:12px;font-size:12px}
  .clean-head h2{font-size:15px}
  .hero-empty-state strong{font-size:17px}
  .hero-empty-state span,.network-empty-state{font-size:12px}
  .site-info-list{gap:10px}
  .site-info-item{padding:12px 0}
  .site-info-label{font-size:11px}
  .site-info-value{font-size:14px}
  .network-blog-item{grid-template-columns:120px minmax(0,1fr);gap:12px;padding:14px;border-radius:16px}
  .network-blog-thumb,.network-blog-thumb img{min-height:90px}
  .network-blog-thumb::after {width: 40px; height: 40px; font-size: 18px;}
  .network-blog-copy h3{font-size:16px}
  .network-blog-copy p{font-size:12px;line-height:1.6}
  .network-blog-meta{font-size:10px}
}

@media (min-width: 960px){
  .site-page-clean{max-width:1040px}
  .hero-featured-slider,.hero-featured-track,.hero-featured-slide img,.hero-empty-state{min-height:230px}
  .network-blog-item{grid-template-columns:150px minmax(0,1fr)}
  .network-blog-thumb,.network-blog-thumb img{min-height:104px}
}

/* Mobile-specific optimizations */
@media (max-width: 640px) {
  /* Stack brand section vertically */
  .site-brand-strip {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .site-brand-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  /* Full-width CTAs on mobile */
  .site-main-cta,
  .site-ghost-cta {
    width: 100%;
  }
  
  /* Larger touch targets */
  .network-detail-toggle,
  .network-blog-thumb {
    min-height: 44px;
  }
  
  /* Simplified animations on mobile for performance */
  .network-blog-item:active {
    transform: scale(0.98);
    transition: transform 0.1s;
  }
  
  .site-info-item:hover {
    padding-left: 0;
    background: transparent;
  }
}

/* Accessibility: Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero-featured-slider::before,
  .network-blog-item::before,
  .network-blog-thumb::after,
  .site-info-bullet::after,
  .network-blog-thumb img,
  .site-social-inline-icon {
    animation: none !important;
    transition: none !important;
  }
}

.network-empty-state{min-height:auto;padding:4px 0 0;align-items:flex-start;text-align:left;}

.top-banner-empty,.empty-state-box,.mini-empty-state{display:flex;align-items:center;justify-content:center;text-align:center;color:#c8d1de;background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.14);border-radius:18px;min-height:120px;padding:16px}.top-banner-empty{min-height:72px;margin-bottom:14px}.empty-state-box.small{min-height:80px;font-size:12px}.site-tab-fallback,.site-chip-fallback,.site-badge-fallback,.site-brand-logo-fallback{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1E2A44,#2E3A59);color:#fff;border-radius:999px;font-weight:700}.site-tab-fallback{width:42px;height:42px}.site-chip-fallback{width:28px;height:28px;font-size:11px}.site-badge-fallback{width:42px;height:42px;font-size:12px}.site-brand-logo-fallback{width:48px;height:48px;font-size:14px}.site-brand-logo-fallback{border-radius:14px}.mini-empty-state{min-height:140px}.top-banner-empty{display:block}


.hidden-field{display:none;}
.toggle-list{display:flex;flex-direction:column;gap:12px;}
.toggle-item{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:10px;}
.network-blog-thumb.toggle-trigger{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;}
.network-blog-thumb.toggle-trigger img{width:100%;display:block;border-radius:12px;height:auto;max-height:none;object-fit:contain;}
.network-blog-summary{padding-top:8px;}
.network-blog-details{padding-top:4px;font-size:10px;line-height:1.45;color:#cfd5e2;}
.network-blog-link{display:inline-flex;margin-top:8px;font-size:12px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.06);}
.featured-badge{background:rgba(250,204,21,0.16);color:#facc15;}
@media (max-width: 768px){
  .network-blog-thumb.toggle-trigger img{max-height:none;height:auto;}
  .toggle-item{padding:8px;}
}


/* ===== Network activity card refinement ===== */
.network-blog-list{display:grid;gap:12px;}
.network-blog-item{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);}
.network-blog-meta{display:block;font-size:10px;color:#8fa6c7;letter-spacing:.03em;text-transform:none;}
.network-blog-item h3{margin:0;font-size:14px;line-height:1.4;color:#f6fbff;}
.network-blog-thumb.toggle-trigger{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;border-radius:12px;overflow:hidden;}
.network-blog-thumb.toggle-trigger img{width:100%;display:block;border-radius:0;height:auto;max-height:none;object-fit:contain;}
.network-detail-toggle{
  align-self:flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(54,227,255,0.08);
  border: 1px solid rgba(54,227,255,0.15);
  color: #9fe5ff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
}
.network-detail-toggle::after {
  content: '▼';
  font-size: 9px;
  transition: transform 0.3s;
}
.network-detail-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}
.network-detail-toggle:hover {
  background: rgba(54,227,255,0.15);
  border-color: rgba(54,227,255,0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(54,227,255,0.2);
}

/* Animated details reveal */
.network-blog-details{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: all 0.3s ease-out;
  margin-top: 0;
  padding-top: 0;
  font-size: 11px;
  line-height: 1.6;
  color: #cfd5e2;
}
.network-blog-details:not([hidden]) {
  max-height: 500px;
  opacity: 1;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.network-blog-link{display:inline;color:#9fe5ff;font-weight:700;text-decoration:underline;text-underline-offset:2px;background:none;padding:0;margin-top:6px;}
@media (min-width: 768px){
  .network-blog-item{padding:14px;gap:10px;}
  .network-blog-meta{font-size:11px;}
  .network-blog-item h3{font-size:16px;}
  .network-detail-toggle{font-size:12px;padding:7px 14px;}
  .network-blog-details{font-size:12px;}
  .network-blog-link{font-size:12px;}
}


.network-page-note{font-size:10px;color:#90a9cb;letter-spacing:.08em;text-transform:uppercase}
.site-pagination{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.pagination-link{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;background:rgba(54,227,255,.10);border:1px solid rgba(54,227,255,.18);font-size:11px;font-weight:700;color:#eaf9ff}
.pagination-status{font-size:11px;color:#b8cce8}
@media(max-width:700px){.site-pagination{gap:8px}.pagination-link{padding:7px 10px;font-size:10px}.pagination-status{font-size:10px}}


/* ===== Promo spot picture-in-picture ===== */
.promo-pip{
  --promo-aspect:1.7778;
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:10015;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:4px;
  border-radius:14px;
  width:320px;
  max-width:calc(100vw - 20px);
  box-shadow:0 16px 40px rgba(0,0,0,.46);
  overflow:hidden;
}
.promo-pip.is-hidden{display:none!important}
.promo-pip.is-collapsed{width:auto!important;max-width:none;padding:4px 6px}
.promo-pip-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;height:22px}
.promo-pip-toggle,.promo-pip-close{width:18px;height:18px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:11px;line-height:1;padding:0}
.promo-pip.is-collapsed .promo-pip-media,.promo-pip.is-collapsed .promo-pip-resize{display:none}
.promo-pip-media{display:block;border-radius:10px;overflow:hidden;line-height:0;background:#000;aspect-ratio:var(--promo-aspect);width:100%}
.promo-pip-media img,.promo-pip-media video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.promo-pip-resize{position:absolute;left:4px;top:4px;width:14px;height:14px;border:0;background:transparent;cursor:nesw-resize;padding:0;z-index:3}
.promo-pip-resize::before{content:"";position:absolute;left:1px;top:1px;width:10px;height:10px;border-left:2px solid rgba(255,255,255,.78);border-top:2px solid rgba(255,255,255,.78);opacity:.9}
@media(max-width:720px){
  .site-shell{width:calc(100% - 10px);margin:5px auto 14px;gap:8px}
  .top-banner{aspect-ratio:5/1}
  .site-header-bar{padding:9px 46px 9px 10px}
  .brand-block{max-width:calc(100% - 52px)}
  .brand-text :is(h1,.brand-site-title){font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .brand-text p{font-size:6.5px;letter-spacing:.12em;white-space:normal}
  .site-tabs-wrap{padding:6px 6px}
  .site-tab{min-width:64px;padding:6px 6px;border-radius:14px}
  .site-tab span{font-size:7px;line-height:1.2;text-align:center}
  .main-layout{gap:8px}
  .content-col{gap:8px}
  .featured-section,.content-panel,.sidebar-card{padding:7px}
  .section-head :is(h1,h2){font-size:10px;letter-spacing:.08em}
  .section-head p,.slide-counter{font-size:8px}
  .about-box p{font-size:9px;line-height:1.5}
  .promo-pip{right:8px;bottom:8px;width:min(60vw,220px);max-width:calc(100vw - 16px);padding:4px;border-radius:12px}
  .promo-pip.is-collapsed{width:auto!important;padding:4px 6px}
  .promo-pip-actions{height:20px;gap:4px}
  .promo-pip-toggle,.promo-pip-close{width:17px;height:17px;font-size:10px}
  .promo-pip-resize{width:13px;height:13px}
}

.managed-page-layout{max-width:1100px;margin:20px auto;padding:0 14px}.managed-page-panel{padding:18px}.managed-page-panel.bukti-coverflow-panel{padding:0!important;background:transparent!important;border:none!important;box-shadow:none!important;backdrop-filter:none!important}.managed-page-content{font-size:14px;line-height:1.7;color:#dbe4ff}.top-nav.always-inline{display:flex;flex-wrap:wrap;gap:10px}.page-shell{padding:14px;}

/* RTP page */
.rtp-page-main{display:grid;gap:12px;padding:12px 0 22px}.rtp-page-topbar{display:flex;justify-content:flex-start}.rtp-home-link{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;text-decoration:none;color:#dbeafe;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}.rtp-hero,.rtp-provider-section,.rtp-games-section,.rtp-pattern-section{padding:12px;border-radius:18px}.rtp-banner-link,.rtp-banner-image{display:block;width:100%}.rtp-banner-image{border-radius:14px;max-height:180px;object-fit:cover}.rtp-banner-copy{padding-top:8px;display:grid;gap:5px}.rtp-banner-copy h2{margin:0;font-size:18px;line-height:1.15}.rtp-full-cta-wrap{display:flex;justify-content:center;margin-top:-2px}.rtp-full-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;border-radius:999px;font-size:13px;font-weight:800;line-height:1;text-decoration:none;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#b8860b 0%,#ffd700 35%,#ffec6e 55%,#ffd700 70%,#b8860b 100%);border:none;box-shadow:0 0 0 1.5px rgba(255,215,0,.35),0 4px 16px rgba(184,134,11,.45),0 8px 32px rgba(184,134,11,.25),inset 0 1px 0 rgba(255,255,255,.35);position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;filter:drop-shadow(0 2px 8px rgba(255,210,0,.3))}.rtp-full-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);background-size:200% 100%;background-position:200% 0;transition:background-position .55s ease;border-radius:inherit}.rtp-full-cta:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 0 0 1.5px rgba(255,215,0,.6),0 6px 24px rgba(184,134,11,.6),0 12px 40px rgba(184,134,11,.35),inset 0 1px 0 rgba(255,255,255,.4);filter:drop-shadow(0 4px 14px rgba(255,210,0,.55))}.rtp-full-cta:hover::before{background-position:-200% 0}.rtp-full-cta:active{transform:translateY(0) scale(.98);box-shadow:0 0 0 1.5px rgba(255,215,0,.3),0 2px 10px rgba(184,134,11,.4),inset 0 2px 4px rgba(0,0,0,.15)}.rtp-badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;font-size:10px;letter-spacing:.06em;background:rgba(61,181,255,.14);border:1px solid rgba(61,181,255,.24);color:#9be0ff;width:max-content}.rtp-hero-percentage,.rtp-game-percent{font-size:17px;font-weight:800;color:#8fe9ff;line-height:1}.rtp-percent-row{display:flex;align-items:center;justify-content:space-between;gap:6px}.rtp-max-note{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:rgba(229,231,235,.6)}.rtp-percent-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.rtp-percent-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg, rgba(61,181,255,.55), rgba(143,233,255,.95));transition:width .8s ease}.rtp-provider-marquee{overflow:hidden}.rtp-provider-track{display:flex;gap:10px;width:max-content;animation:rtpMarquee 24s linear infinite}.rtp-provider-chip{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.04);min-width:128px}.rtp-provider-chip img{width:24px;height:24px;object-fit:contain}.rtp-games-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.rtp-game-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden}.rtp-game-image-wrap{position:relative}.rtp-game-image{display:block;width:100%;aspect-ratio:5/6;object-fit:cover}.rtp-provider-logo-badge{position:absolute;top:6px;left:6px;width:26px;height:26px;object-fit:contain;padding:3px;border-radius:10px;background:rgba(7,14,29,.82);border:1px solid rgba(255,255,255,.1)}.rtp-game-meta{padding:8px 8px 10px;display:grid;gap:5px}.rtp-game-meta h3{font-size:12px;line-height:1.25;margin:0}.rtp-pattern-carousel{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}.rtp-pattern-card{
  scroll-snap-align:start;
  padding:0;border-radius:18px;display:grid;gap:0;overflow:visible;
  background:linear-gradient(150deg,rgba(12,22,48,.97),rgba(7,14,30,.99));
  border:1px solid rgba(54,227,255,.2);
  box-shadow:0 0 0 1px rgba(54,227,255,.06),0 6px 32px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);
  position:relative;min-width:220px;
  transition:transform .3s ease;
}
.rtp-pattern-card:hover{transform:translateY(-6px) scale(1.02);z-index:4;}
.rtp-pattern-card::before{content:none;}
.rtp-pattern-card::after{content:none;}
.rtp-pattern-card-body{padding:14px 14px 12px;position:relative;z-index:1}
.rtp-pattern-card h3{
  margin:0 0 8px;font-size:14px;font-weight:700;letter-spacing:.03em;
  background:linear-gradient(90deg,#fff,#9ec6ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.rtp-pattern-text{
  font-size:11.5px;line-height:1.35;white-space:pre-line;
  color:rgba(220,238,255,.85);
  display:-webkit-box;-webkit-line-clamp:15;-webkit-box-orient:vertical;overflow:hidden;
}@keyframes rtpMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (min-width:768px){.rtp-page-main{gap:14px;padding:14px 0 24px}.rtp-banner-image{max-height:230px}.rtp-banner-copy h2{font-size:22px}.rtp-hero,.rtp-provider-section,.rtp-games-section,.rtp-pattern-section{padding:14px;border-radius:20px}.rtp-games-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.rtp-pattern-carousel{grid-auto-columns:46%}.rtp-full-cta{font-size:14px;padding:14px 36px}}
@media (min-width:1100px){.rtp-banner-image{max-height:250px}.rtp-games-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.rtp-pattern-carousel{grid-auto-columns:31%}}


.rtp-banner-percent-row {
  margin-top: 8px;
}
.rtp-banner-percent-bar {
  max-width: 280px;
  margin-top: 8px;
}
.rtp-banner-copy[data-max-percentage] .rtp-percent-fill {
  box-shadow: 0 0 12px rgba(34,197,94,0.28);
}

/* Jadwal Result Pasaran */
.jadwal-panel { padding: 14px; }
/* jadwal-table-wrap: see luxury override below */
.jadwal-table-wrap{
  overflow-x:auto;margin-top:10px;
  border-radius:16px;
  border:1px solid rgba(54,227,255,.14);
  background:linear-gradient(155deg,rgba(8,16,36,.96),rgba(5,11,24,.98));
  box-shadow:0 0 0 1px rgba(54,227,255,.05),0 4px 28px rgba(0,0,0,.5);
}
.jadwal-table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.jadwal-table thead tr{
  background:linear-gradient(90deg,rgba(54,227,255,.08),rgba(162,69,255,.06));
}
.jadwal-table thead th {
  text-align: left;
  padding: 13px 16px;
  color: rgba(54,227,255,.9);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(54,227,255,.15);
}
.jadwal-table thead th:first-child{ border-radius:16px 0 0 0; }
.jadwal-table thead th:last-child{ border-radius:0 16px 0 0; }
.jadwal-table tbody tr{
  transition:background .18s;
}
.jadwal-table tbody tr:nth-child(odd){
  background:rgba(255,255,255,.025);
}
.jadwal-table tbody tr:nth-child(even){
  background:transparent;
}
.jadwal-table tbody tr:hover {
  background:rgba(54,227,255,.06);
}
.jadwal-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: rgba(220,238,255,0.9);
  vertical-align: middle;
}
.jadwal-table tbody tr:last-child td{ border-bottom:none; }
.jadwal-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(90deg,rgba(54,227,255,.12),rgba(162,69,255,.1));
  color: #c8e8ff;
  border: 1px solid rgba(54,227,255,.22);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 0 8px rgba(54,227,255,.08);
}
.jadwal-time {
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  font-size: 13px;
  text-shadow: 0 0 10px rgba(54,227,255,.3);
}
@media (max-width: 700px) {
  .jadwal-panel { padding: 10px; }
  .jadwal-table { min-width: 560px; font-size: 12px; }
  .jadwal-table thead th, .jadwal-table tbody td { padding: 9px 10px; }
  .jadwal-badge { padding: 4px 8px; font-size: 10px; }
}


.room-result-shell { max-width: 860px; margin: 0 auto; padding: 20px 14px 40px; }
.room-result-main { display: grid; gap: 14px; }
.room-result-copy p { margin: 0; font-size: 14px; line-height: 1.6; }
.room-result-button-list { display: grid; gap: 10px; }
.room-result-telegram-btn { display: block; text-align: center; text-decoration: none; padding: 12px 14px; border-radius: 12px; background: linear-gradient(135deg,#1e2a44,#2e3a59); color: #fff; font-weight: 700; letter-spacing: .02em; }
@media (max-width: 767px) { .room-result-shell { padding: 14px 10px 30px; } .room-result-copy p { font-size: 13px; } .room-result-telegram-btn { padding: 10px 12px; font-size: 13px; } }


/* ============================================================
   UI alignment cleanup — homepage & responsive polish
   ============================================================ */
.site-shell{
  width:min(1220px, calc(100% - 24px));
  margin:10px auto 30px;
  gap:12px;
}
.running-text{
  padding:7px 0;
  border-radius:14px;
}
.top-banner,
.top-banner-empty{
  border-radius:20px;
}
.top-banner-empty,
.empty-state-box,
.mini-empty-state{
  display:flex;
  align-items:center;
  justify-content:center;
}
.top-banner-empty{
  min-height:88px;
  margin-bottom:0;
  font-size:16px;
}
.site-header-bar{
  justify-content:space-between;
  padding:14px 18px;
  min-height:78px;
}
.brand-block{
  flex:1 1 auto;
  min-width:0;
}
.brand-text :is(h1,.brand-site-title){
  font-size:clamp(15px, 2vw, 22px);
}
.brand-text p{
  font-size:clamp(7px, .9vw, 10px);
}
.top-nav{
  flex:0 0 auto;
  gap:6px;
}
.nav-btn{
  padding:8px 11px;
  font-size:9.5px;
}
.main-layout{
  grid-template-columns:minmax(0, 1fr) 300px;
  gap:12px;
  align-items:start;
}
.content-col,
.sidebar{
  gap:12px;
}
.featured-section,
.content-panel,
.sidebar-card,
.footer{
  border-radius:20px;
  padding:14px;
}
.section-head{margin-bottom:12px}
.section-head :is(h1,h2){font-size:11.5px}
.section-head p{font-size:10px}
.slides{
  border-radius:16px;
  max-height:340px;
}
.empty-state-box{
  min-height:180px;
  border-radius:16px;
  font-size:18px;
}
.network-carousel-panel{
  overflow:visible;
}
.network-slider-wrap{
  position:relative;
  gap:0;
}
.network-viewport{
  width:100%;
}
.site-slides-track{
  gap:12px;
}
.network-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:4;
  width:34px;
  height:34px;
  flex:0 0 34px;
  background:rgba(5,9,18,.92);
  box-shadow:0 10px 24px rgba(0,0,0,.34);
}
.network-arrow:hover{transform:translateY(-50%) scale(1.06)}
.network-prev{left:-10px}
.network-next{right:-10px}
.network-slide{
  flex:0 0 calc(33.333% - 8px);
  max-width:calc(33.333% - 8px);
}
.site-promo-card.inner{
  padding:12px;
  min-height:100%;
}
.card-header{
  gap:10px;
  margin-bottom:10px;
}
.card-header h3{font-size:12px}
.card-header span{font-size:9px}
.site-badge,.site-badge-fallback{
  width:42px;
  height:42px;
}
.card-corner-link{
  width:26px;
  height:26px;
}
.mini-slider,
.mini-empty-state{
  border-radius:16px;
}
.mini-meta{
  margin-top:10px;
  gap:6px;
  font-size:9.5px;
}
.about-box{
  align-items:flex-start;
  text-align:left;
}
.about-box p{font-size:12px; line-height:1.65}
.footer{
  align-items:center;
}

@media (max-width: 980px){
  .site-shell{
    width:min(100%, calc(100% - 18px));
    margin:8px auto 20px;
    gap:10px;
  }
  .main-layout{
    grid-template-columns:1fr;
  }
  .sidebar{
    grid-template-columns:1fr;
  }
  .network-slide{
    flex:0 0 calc(50% - 6px);
    max-width:calc(50% - 6px);
  }
  .network-prev{left:-6px}
  .network-next{right:-6px}
}

@media (max-width: 720px){
  .site-shell{
    width:calc(100% - 10px);
    margin:5px auto 16px;
    gap:8px;
  }
  .running-text{
    padding:5px 0;
    border-radius:12px;
  }
  .top-banner,
  .top-banner-empty{
    border-radius:16px;
  }
  .top-banner-empty{
    min-height:74px;
    font-size:14px;
    padding:14px;
  }
  .site-header-bar{
    min-height:68px;
    padding:12px 54px 12px 12px;
    justify-content:flex-start;
    align-items:center;
    border-radius:16px;
  }
  .brand-block{
    width:100%;
    justify-content:flex-start;
    margin:0;
    max-width:none;
    padding-right:8px;
  }
  .main-logo{
    width:42px;
    height:42px;
  }
  .brand-text :is(h1,.brand-site-title){
    font-size:14px;
    line-height:1.05;
  }
  .brand-text p{
    font-size:7px;
    letter-spacing:.16em;
  }
  .top-nav{
    width:min(84vw, 300px);
    padding:12px 10px 18px;
    gap:6px;
  }
  .nav-btn{
    font-size:11px;
    padding:11px 12px;
  }
  .featured-section,
  .content-panel,
  .sidebar-card,
  .footer{
    border-radius:16px;
    padding:10px;
  }
  .section-head{
    margin-bottom:9px;
  }
  .section-head :is(h1,h2){font-size:10.5px}
  .section-head p{font-size:9px}
  .slides{
    aspect-ratio: 12 / 6.4;
    max-height:none;
    border-radius:14px;
  }
  .empty-state-box{
    min-height:138px;
    font-size:15px;
    border-radius:14px;
    padding:14px;
  }
  .network-slider-wrap{
    padding:0 24px;
  }
  .network-arrow{
    width:28px;
    height:28px;
    font-size:11px;
  }
  .network-prev{left:0}
  .network-next{right:0}
  .site-slides-track{gap:0}
  .network-slide{
    flex:0 0 100%;
    max-width:100%;
  }
  .site-promo-card.inner{
    padding:10px;
  }
  .card-header h3{font-size:11px}
  .card-header span{font-size:8px}
  .mini-slider{
    aspect-ratio: 16 / 9;
    min-height:0;
    border-radius:14px;
  }
  .mini-empty-state{
    aspect-ratio: 16 / 9;
    min-height:100px;
    border-radius:14px;
  }
  .mini-meta{
    font-size:8.5px;
    margin-top:8px;
  }
  .about-box p{
    font-size:11px;
  }
  .footer{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .footer-links{
    gap:8px 10px;
    font-size:9px;
  }
}

@media (max-width: 420px){
  .site-header-bar{
    padding:10px 50px 10px 10px;
    min-height:62px;
  }
  .brand-block{gap:8px}
  .main-logo{width:38px;height:38px}
  .brand-text :is(h1,.brand-site-title){font-size:13px}
  .brand-text p{font-size:6.6px}
  .network-slider-wrap{padding:0 22px}
  .network-arrow{width:26px;height:26px}
  .top-nav{width:min(86vw, 290px)}
}


/* ===== Real layout fixes: missing logo fallback + stable mobile nav ===== */
.main-logo-fallback,
.about-logo-fallback,
.footer-logo-fallback{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  font-family:"Orbitron",sans-serif;font-weight:700;letter-spacing:.08em;
  color:#eaf9ff;
  background:radial-gradient(circle at 30% 30%, rgba(54,227,255,.28), rgba(16,28,54,.96) 70%);
  border:1px solid rgba(54,227,255,.28);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.32);
}
.main-logo-fallback{width:48px;height:48px;font-size:15px;flex:0 0 48px}
.about-logo-fallback{width:44px;height:44px;font-size:13px;flex:0 0 44px}
.footer-logo-fallback{width:32px;height:32px;font-size:11px;flex:0 0 32px}

.site-header-bar{position:relative;overflow:visible}
.top-nav{z-index:10030}

@media (max-width: 720px){
  .site-shell{width:min(100%, calc(100% - 10px));}
  .site-header-bar{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:8px;
    min-height:64px;
    padding:10px 56px 10px 12px;
    border-radius:16px;
    z-index:10020;
    isolation:isolate;
  }
  .brand-block{
    min-width:0;
    width:auto;
    max-width:100%;
    justify-content:flex-start;
    gap:10px;
    padding-right:0;
  }
  .brand-text{min-width:0;overflow:hidden}
  .brand-text :is(h1,.brand-site-title),.brand-text p{overflow:hidden;text-overflow:ellipsis}
  .main-logo,.main-logo-fallback{width:40px;height:40px;flex:0 0 40px}
  .main-logo-fallback{font-size:13px}
 /* hamburger removed — bottom nav handles mobile navigation */
  .top-nav{
    position:fixed !important;
    top:0;
    right:0;
    left:auto !important;
    bottom:0;
    width:min(82vw, 320px);
    max-width:320px;
    height:100dvh;
    margin:0;
    padding:14px 12px 20px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:6px;
    background:linear-gradient(180deg, rgba(7,11,22,.99), rgba(3,5,12,.995));
    border-left:1px solid rgba(54,227,255,.22);
    box-shadow:-12px 0 36px rgba(0,0,0,.56);
    transform:translateX(108%);
    visibility:hidden;
    pointer-events:none;
    transition:transform .24s ease, visibility .24s ease;
  }
  .top-nav.open{transform:translateX(0);visibility:visible;pointer-events:auto}
  .nav-btn{
    width:100%;
    text-align:left;
    font-size:11px;
    padding:11px 12px;
    border-radius:12px;
  }
  .footer-brand img,.footer-logo-fallback{width:30px;height:30px}
}

@media (max-width: 420px){
  .site-header-bar{padding:10px 52px 10px 10px;min-height:60px}
  .main-logo,.main-logo-fallback{width:36px;height:36px;flex-basis:36px}
  .main-logo-fallback{font-size:12px}
  .brand-text :is(h1,.brand-site-title){font-size:13px}
  .brand-text p{font-size:6.3px}
  .top-nav{width:min(86vw, 300px)}
}


/* ===== Homepage site strip restored + mobile nav close reliability ===== */
.site-tab-fallback{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:10px;font-weight:700;letter-spacing:.08em;margin:0 auto;background:radial-gradient(circle at 30% 30%, rgba(54,227,255,.16), rgba(16,28,54,.96) 70%);}

@media (max-width: 720px){
  .site-tabs-wrap{display:block !important;margin-top:2px;padding:8px 8px 10px;}
  .site-tabs{display:flex !important;overflow-x:auto;justify-content:flex-start;padding-bottom:4px;}
  .site-tab{min-width:88px;flex:0 0 88px;}
  .site-tab img,.site-tab-fallback{width:28px;height:28px;}
}


/* ===== Fix: single mobile nav control state + remove site CTA strip ===== */
@media (max-width: 720px){
  .top-nav{padding-top:14px}
}
.site-cta-strip{display:none !important}

.page-banner-panel{padding:10px;overflow:hidden;width:100%}
.page-banner-panel .banner-aspect-box{position:relative;width:100%;aspect-ratio:16/6;border-radius:18px;overflow:hidden;background:#050810}
.page-header-banner{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:0}
.room-result-main .page-banner-panel,.managed-page-layout .page-banner-panel{margin-bottom:14px}
/* prediksi banner match 16:6 */
.prediksi-banner-image{display:block;width:100%;aspect-ratio:16/6;object-fit:cover;object-position:center top;border-radius:18px}
@media (max-width:768px){
  .page-banner-panel{padding:8px}
  .page-banner-panel .banner-aspect-box{border-radius:14px;aspect-ratio:16/6}
  .prediksi-banner-image{border-radius:14px;aspect-ratio:16/6}
}

/* ── Universal banner-aspect-box: 16:6 on all pages ── */
.banner-aspect-box{
  display:block;position:relative;width:100%;aspect-ratio:16/6;
  border-radius:18px;overflow:hidden;background:#050810;
}
.banner-aspect-box img,.banner-aspect-box .rtp-banner-image{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;border-radius:0;
  display:block;
}
a.banner-aspect-box{text-decoration:none}
.rtp-banner-link.banner-aspect-box{display:block}
/* Override per-page banner images that had their own sizing */
.shio-banner-wrap .banner-aspect-box,
.paito-banner-wrap .banner-aspect-box,
.jadwal-banner-wrap .banner-aspect-box{border-radius:18px}
.shio-banner-wrap,.paito-banner-wrap{display:block;width:100%}
@media(max-width:768px){
  .banner-aspect-box{border-radius:14px}
}

/* Prediksi banner unify with other menu pages */
.prediksi-banner-image{width:100%;height:auto;max-height:none;object-fit:contain;object-position:center top;display:block;margin-inline:auto;border-radius:18px}
@media (max-width:768px){.prediksi-banner-image{aspect-ratio:16/6;border-radius:14px}}
@media (min-width:821px){.prediksi-banner-image{width:100%;height:auto;max-height:none;aspect-ratio:16/5;object-fit:contain;object-position:center top;border-radius:18px}}



/* Jadwal Pasaran layout refinement */
.jadwal-top-actions{display:flex;justify-content:flex-start;margin-bottom:10px}
.jadwal-home-link{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);text-decoration:none;color:#dff3ff;font-weight:700;font-size:12px}
.jadwal-head{align-items:flex-start}
.jadwal-head h2{margin:0}
.jadwal-table-wrap{overflow:visible}
.jadwal-table{width:100%;min-width:0;border-collapse:separate;border-spacing:0 8px}
.jadwal-table thead th{font-size:12px;white-space:nowrap}
.jadwal-table tbody td{vertical-align:middle}
.jadwal-table tbody tr{background:rgba(255,255,255,.025)}
.jadwal-table tbody td:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
.jadwal-table tbody td:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}
@media (max-width: 720px){
  .jadwal-panel{padding:10px}
  .jadwal-top-actions{margin-bottom:8px}
  .jadwal-table thead{display:none}
  .jadwal-table,.jadwal-table tbody,.jadwal-table tr{display:block;width:100%}
  .jadwal-table tbody{display:grid;gap:8px}
  .jadwal-table tr{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 72px;gap:8px;align-items:stretch;padding:8px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));box-shadow:0 10px 24px rgba(0,0,0,.16)}
  .jadwal-table tbody td{display:flex;align-items:center;min-height:100%;padding:8px 10px;border:none;background:rgba(255,255,255,.03);border-radius:10px;font-size:11px;line-height:1.35;word-break:break-word}
  .jadwal-table tbody td::before{content:attr(data-label);display:block;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7ccfe7;margin-bottom:4px}
  .jadwal-table tbody td{flex-direction:column;align-items:flex-start;justify-content:center}
  .jadwal-table tbody td.jadwal-time{align-items:center;justify-content:center;text-align:center;font-weight:800;font-size:13px;color:#ffffff;background:rgba(75,181,255,.08)}
  .jadwal-table tbody td.jadwal-time::before{margin-bottom:3px}
}
@media (min-width:721px){
  .jadwal-table tbody td::before{display:none}
}


.jadwal-pasaran-wrap{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.jadwal-pasaran-name{font-weight:700;color:#f3fbff;line-height:1.3}
.jadwal-mini-link{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;border-radius:999px;border:1px solid rgba(124,207,231,.35);background:rgba(34,185,255,.08);color:#9fe9ff;text-decoration:none;font-size:10px;font-weight:800;letter-spacing:.03em;white-space:nowrap}
.jadwal-mini-link:hover{background:rgba(34,185,255,.15)}
@media (max-width: 760px){
  .jadwal-table tr{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 68px;gap:6px;padding:8px}
  .jadwal-table tbody td{padding:8px;border-radius:10px;font-size:11px;line-height:1.3}
  .jadwal-pasaran-wrap{align-items:flex-start;gap:6px}
  .jadwal-pasaran-name{font-size:11px}
  .jadwal-mini-link{padding:3px 7px;font-size:9px}
  .jadwal-table tbody td.jadwal-time{font-size:12px;padding:8px 6px}
}


.jadwal-mobile-header{display:none}
@media (max-width: 760px){
  .jadwal-mobile-header{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 68px;gap:6px;margin-bottom:8px}
  .jadwal-mobile-header span{display:flex;align-items:center;justify-content:flex-start;padding:8px 8px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:10px;font-weight:800;letter-spacing:.06em;color:#9fe9ff;text-transform:uppercase}
  .jadwal-mobile-header span:last-child{justify-content:center}
}


/* Jadwal Result refreshed layout */
.jadwal-panel-sticky-layout{padding:0;display:flex;flex-direction:column;max-height:calc(100vh - 28px);overflow:hidden}
.jadwal-sticky-stack{position:sticky;top:0;z-index:35;flex:0 0 auto;background:linear-gradient(180deg,#0f1726 0%,rgba(15,23,38,.99) 76%,rgba(15,23,38,.95) 100%);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08);border-top-left-radius:18px;border-top-right-radius:18px;overflow:hidden}
.jadwal-banner-wrap{padding:0 0 10px}
.jadwal-page-banner{display:block;width:100%;height:auto;max-height:none;object-fit:contain;object-position:center top;border-radius:18px}
.jadwal-title-wrap{padding:12px 14px 10px}
.jadwal-top-actions{display:flex;justify-content:flex-start;margin:0 0 8px}
.jadwal-home-link{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);text-decoration:none;color:#dff3ff;font-weight:700;font-size:12px}
.jadwal-head{align-items:flex-start;margin-bottom:6px}
.jadwal-head h2{margin:0;font-size:clamp(18px,2vw,24px)}
.jadwal-live-meta{display:flex;flex-direction:column;gap:2px;color:#c9edf8;font-size:12px;line-height:1.35}
.jadwal-live-meta #jadwalLiveClock{font-size:20px;font-weight:800;color:#ffffff;letter-spacing:.04em}
.jadwal-grid-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 88px;gap:8px;padding:0 14px 12px}
.jadwal-grid-head span{display:flex;align-items:center;justify-content:flex-start;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:11px;font-weight:800;letter-spacing:.08em;color:#9fe9ff;text-transform:uppercase}
.jadwal-grid-head span:last-child{justify-content:center}
.jadwal-grid-list{padding:14px;display:grid;gap:8px;overflow:auto;flex:1 1 auto;min-height:0;scroll-padding-top:12px}
.jadwal-grid-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 88px;gap:8px;align-items:stretch;padding:0;background:transparent}
.jadwal-grid-cell{display:flex;align-items:center;min-height:100%;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);font-size:12px;line-height:1.4;color:#eaf8ff;word-break:break-word}
.jadwal-grid-pasaran{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px}
.jadwal-pasaran-name{font-weight:800;color:#f3fbff;line-height:1.3}
.jadwal-mini-link{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;border-radius:999px;border:1px solid rgba(124,207,231,.35);background:rgba(34,185,255,.08);color:#9fe9ff;text-decoration:none;font-size:10px;font-weight:800;letter-spacing:.03em;white-space:nowrap}
.jadwal-mini-link:hover{background:rgba(34,185,255,.15)}
.jadwal-grid-jam{justify-content:center;text-align:center;font-weight:900;font-size:13px;color:#ffffff;background:rgba(75,181,255,.08)}
.jadwal-grid-row.is-off .jadwal-grid-cell{background:#7f1d1d!important;border-color:#ef4444!important;color:#fff!important}
.jadwal-grid-row.is-off .jadwal-grid-jam{background:#991b1b!important;color:#fff!important;border-color:#ef4444!important}
.jadwal-grid-row.is-off .jadwal-pasaran-name{color:#fff!important}
.jadwal-grid-row.is-off .jadwal-mini-link{border-color:rgba(255,180,180,.50)!important;background:rgba(140,20,20,.60)!important;color:#ffe4e6!important}
.jadwal-grid-list::-webkit-scrollbar{width:8px}
.jadwal-grid-list::-webkit-scrollbar-thumb{background:rgba(159,233,255,.18);border-radius:999px}
.jadwal-grid-list::-webkit-scrollbar-track{background:transparent}
@media (max-width: 767px){
  .jadwal-panel-sticky-layout{max-height:calc(100vh - 14px)}
  .jadwal-page-banner{max-height:none}
  .jadwal-title-wrap{padding:10px 10px 8px}
  .jadwal-live-meta{font-size:11px}
  .jadwal-live-meta #jadwalLiveClock{font-size:18px}
  .jadwal-grid-head{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) 68px;gap:6px;padding:0 10px 10px}
  .jadwal-grid-head span{padding:8px 8px;border-radius:10px;font-size:10px}
  .jadwal-grid-list{padding:10px;gap:7px}
  .jadwal-grid-row{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) 68px;gap:6px}
  .jadwal-grid-cell{padding:8px 9px;border-radius:10px;font-size:11px;line-height:1.35}
  .jadwal-grid-jam{font-size:12px;padding:8px 6px}
  .jadwal-pasaran-name{font-size:11px}
  .jadwal-mini-link{padding:3px 7px;font-size:9px}
}


.featured-site-tag{position:absolute;left:12px;bottom:12px;background:rgba(11,18,32,.8);color:#fff;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:600;z-index:3}.hero-featured-track.single-banner .hero-featured-slide{opacity:1;position:relative}.hero-featured-track.single-banner{position:relative}.single-type-badge{display:inline-flex;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-weight:600;color:#e5e7eb}.field-stack{display:flex;flex-direction:column;gap:12px}


/* Homepage strip: clean logo carousel, no box behind logo, label below */
body .site-tabs-wrap{
  padding:10px 8px 12px;
  overflow:visible;
}
body .site-tabs{
  display:flex;
  gap:14px;
  overflow-x:auto;
  justify-content:flex-start;
  align-items:flex-start;
  padding:0 4px 2px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
body .site-tabs::-webkit-scrollbar{display:none;}
body .site-tab{
  display:flex !important;
  flex:0 0 auto;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  min-width:104px;
  width:104px;
  padding:0 !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  text-decoration:none;
  scroll-snap-align:start;
  overflow:visible;
}
body .site-tab::before,
body .site-tab::after{display:none !important;content:none !important;}
body .site-tab-card{
  display:flex;
  align-items:center;
  justify-content:center;
  width:104px;
  height:78px;
  padding:0;
  border-radius:0;
  background:transparent;
  border:0;
  box-shadow:none;
  overflow:visible;
}
body .site-tab img{
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:contain;
  object-position:center;
  margin:0;
  filter:none;
  transform:scale(1.12);
  transform-origin:center;
}
body .site-tab-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  width:72px;
  height:72px;
  border-radius:50%;
  font-size:22px;
  font-weight:800;
  letter-spacing:.02em;
  background:linear-gradient(180deg,rgba(73,141,255,.16),rgba(8,22,48,.85));
  color:#eef5ff;
}
body .site-tab-label{
  display:-webkit-box;
  max-width:104px;
  font-size:10.5px !important;
  line-height:1.2;
  font-weight:700;
  letter-spacing:0;
  text-align:center;
  color:#eef3ff;
  text-transform:none;
  white-space:normal;
  overflow:hidden;
  text-overflow:unset;
  overflow-wrap:anywhere;
  word-break:break-word;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  min-height:calc(1.2em * 2);
}
body .site-tab:hover,
body .site-tab.active{
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}
body .site-tab:hover img,
body .site-tab.active img{
  transform:scale(1.18);
  filter:none;
}
@media (max-width: 767px){
  body .site-tabs-wrap{padding:8px 8px 10px;}
  body .site-tabs{gap:12px;}
  body .site-tab{min-width:96px;width:96px;gap:5px;}
  body .site-tab-card{width:96px;height:72px;}
  body .site-tab img{transform:scale(1.14);}
  body .site-tab-fallback{width:66px;height:66px;font-size:20px;}
  body .site-tab-label{max-width:96px;font-size:10px !important;}
}
@media (max-width: 420px){
  body .site-tabs{gap:10px;}
  body .site-tab{min-width:92px;width:92px;}
  body .site-tab-card{width:92px;height:68px;}
  body .site-tab img{transform:scale(1.12);}
  body .site-tab-label{max-width:92px;font-size:9.6px !important;}
}

/* ===== FINAL LOGO CLEANUP PATCH ===== */
/* Network activity logos + page logos: remove box behind logo and make image larger */
body .card-header{
  align-items:center;
  gap:10px;
}
body .site-badge{
  width:56px !important;
  height:56px !important;
  flex:0 0 56px !important;
  object-fit:contain !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
}
body .site-promo-card.inner:hover .site-badge{
  transform:scale(1.08) !important;
  box-shadow:none !important;
}
body .site-brand-id{
  align-items:center;
  gap:12px;
}
body .site-brand-logo{
  width:80px !important;
  height:80px !important;
  flex:0 0 80px !important;
  object-fit:contain !important;
  /* Keep enhanced styles - don't override these */
  background:linear-gradient(135deg, rgba(54,227,255,0.25), rgba(162,69,255,0.30)) !important;
  border:2px solid rgba(54,227,255,0.50) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4), inset 0 2px 0 rgba(255,255,255,0.2) !important;
  padding:10px !important;
  border-radius:18px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body .site-brand-logo:hover {
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 10px 30px rgba(54,227,255,0.50), inset 0 2px 0 rgba(255,255,255,0.25) !important;
  border-color: rgba(54,227,255,0.80) !important;
}
body .site-brand-logo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}
body .site-brand-copy h2{
  line-height:1.15;
  background: linear-gradient(135deg, #fff, #c8e1ff) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
body .site-brand-copy p{
  max-width:none;
  color:#9db4d8 !important;
}
body .site-brand-logo + .site-brand-copy,
body .site-badge + div{
  min-width:0;
}
/* Keep fallback badges only when there is no uploaded logo */
body .site-badge-fallback{
  width:56px !important;
  height:56px !important;
}
body .site-brand-logo-fallback{
  width:72px !important;
  height:72px !important;
  border-radius:22px !important;
  background:linear-gradient(135deg, rgba(54,227,255,0.08), rgba(162,69,255,0.10)) !important;
  border:1.5px solid rgba(54,227,255,0.18) !important;
}
@media (max-width: 767px){
  body .site-badge{
    width:50px !important;
    height:50px !important;
    flex-basis:50px !important;
  }
  body .site-badge-fallback{
    width:50px !important;
    height:50px !important;
  }
  body .site-brand-logo{
    width:60px !important;
    height:60px !important;
    flex-basis:60px !important;
    padding:6px !important;
    border-radius:14px !important;
  }
  body .site-brand-logo-fallback{
    width:60px !important;
    height:60px !important;
    border-radius:18px !important;
  }
  body .card-header h3{
    font-size:11px !important;
    line-height:1.25 !important;
  }
  body .card-header span{
    font-size:8.5px !important;
    line-height:1.2 !important;
  }
}
@media (max-width: 420px){
  body .card-header{
    gap:8px;
  }
  body .site-badge{
    width:46px !important;
    height:46px !important;
    flex-basis:46px !important;
  }
  body .site-badge-fallback{
    width:46px !important;
    height:46px !important;
  }
  body .site-brand-logo{
    width:56px !important;
    height:56px !important;
    flex-basis:56px !important;
    padding:5px !important;
    border-radius:12px !important;
  }
  body .site-brand-logo-fallback{
    width:56px !important;
    height:56px !important;
  }
}

/* SHIO PAGE */
.shio-page-panel{
  background: radial-gradient(circle at top, rgba(255,79,0,.18), rgba(11,16,26,.98) 58%), linear-gradient(180deg,#180707 0%,#0f1622 100%);
  border: 1px solid rgba(255,214,102,.2);
}
.shio-banner-wrap{margin-bottom:18px}
.shio-banner{border-radius:24px; max-height:none; height:auto; object-fit:contain; object-position:center top; width:100%; display:block; border:1px solid rgba(255,210,110,.24)}
.shio-page-head{display:grid; gap:14px; margin-bottom:16px}
.shio-home-link{justify-self:start}
.shio-section-head{align-items:flex-start}
.shio-section-head h2{color:#fff; text-transform:uppercase; letter-spacing:.06em}
.shio-section-head span{color:#ffd36f; font-weight:700}
.shio-page-description{text-align:center; color:var(--color-muted,rgba(255,255,255,.7)); font-size:.97rem; line-height:1.6; margin:0; padding:2px 0 4px}
.shio-card{
  background:
    radial-gradient(circle at top left, rgba(255,178,55,.28), transparent 28%),
    radial-gradient(circle at top right, rgba(255,43,43,.22), transparent 26%),
    linear-gradient(180deg, #711111 0%, #451010 26%, #1f1010 100%);
  border-radius:28px;
  padding:18px;
  border:2px solid rgba(255,211,111,.4);
  box-shadow:0 24px 60px rgba(0,0,0,.34);
}
.shio-card-top{display:grid; gap:10px; margin-bottom:16px; text-align:center}
.shio-card-title{
  font-size:clamp(1.8rem,5vw,3rem);
  font-weight:900;
  letter-spacing:.08em;
  color:#fff;
  text-shadow:0 3px 0 rgba(132,0,0,.8),0 0 22px rgba(255,60,60,.4);
}
.shio-card-period{font-size:clamp(1rem,2vw,1.3rem); font-weight:800; color:#ffd56d; text-transform:uppercase}
.shio-table-list{display:grid; gap:12px}
.shio-row{
  display:grid;
  grid-template-columns:minmax(170px,240px) 1fr;
  gap:12px;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  background:linear-gradient(180deg,#282125 0%,#18161a 100%);
  border:2px solid #f11d1d;
  box-shadow:0 0 0 2px rgba(200,255,73,.75) inset, 0 12px 20px rgba(0,0,0,.18);
}
.shio-animal{display:flex; align-items:center; gap:10px; padding:0 10px 0 14px}
.shio-name{font-size:clamp(1rem,2.2vw,1.35rem); font-weight:900; letter-spacing:.05em; color:#f0c766}
.shio-emoji{display:none}
.shio-numbers{display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:10px}
.shio-number{display:flex; align-items:center; justify-content:center; min-height:46px; border-radius:16px; color:#f4d06c; font-weight:900; font-size:clamp(1rem,2vw,1.45rem); letter-spacing:.06em}
@media (max-width: 980px){
  .shio-row{grid-template-columns:1fr; border-radius:26px; padding:14px}
  .shio-animal{padding:0 4px}
  .shio-numbers{grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px}
  .shio-number{min-height:38px; border-radius:12px}
}
@media (max-width: 560px){
  .shio-card{padding:14px 10px}
  .shio-card-title{font-size:1.55rem}
  .shio-card-period{font-size:.92rem}
  .shio-row{gap:8px; border-radius:22px}
  .shio-name{font-size:1.04rem}
  .shio-numbers{grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px}
  .shio-number{font-size:1rem; min-height:34px}
}

.room-live-feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;align-items:stretch}
.room-result-card-public{background:#10263d;border-radius:12px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.22);color:#fff;position:relative;display:flex;flex-direction:column;height:auto}
.room-result-card-head{background:#13273f;color:#f3ad2a;font-weight:800;letter-spacing:.04em;padding:7px 10px;font-size:10px}
.room-result-card-image-wrap{background:#0f2238;height:240px;display:flex;align-items:center;justify-content:center;padding:8px;overflow:hidden;border-radius:12px}
.room-result-card-image{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:8px}
.room-result-card-body{padding:8px 10px 6px;line-height:1.4;font-size:11px;display:flex;flex-direction:column;flex:1 1 auto}
.room-result-line{margin:0 0 1px 0;white-space:pre-line;font-size:11px}
.room-result-special-block{margin:10px 0 8px;display:grid;gap:3px;font-size:11px}
.room-result-footer-copy{margin-top:6px;font-size:10px}
.room-result-card-meta{display:flex;justify-content:flex-end;gap:6px;color:#7f95ab;font-size:10px;padding:0 10px 8px;margin-top:auto}
.room-result-post-card .post-thumb-inline img{width:100%;max-height:220px;object-fit:cover;border-radius:14px;margin-bottom:12px}
.small-preview img{max-width:220px;border-radius:12px}
@media (max-width: 640px){.room-live-feed{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}


/* PAITO */
.paito-page-panel{display:flex;flex-direction:column;gap:18px}.paito-page-copy{color:#d8e7ff}.paito-tabs,.paito-admin-tabs{display:flex;flex-wrap:wrap;gap:10px}.paito-tab-btn,.paito-admin-tab{background:linear-gradient(180deg,#13284a,#0c1730);border:1px solid rgba(130,190,255,.25);color:#eaf5ff;border-radius:999px;padding:10px 16px;font-weight:800;cursor:pointer}.paito-tab-btn.active,.paito-admin-tab.active{background:linear-gradient(180deg,#ffcc35,#ff8b1a);color:#07111f;border-color:transparent}.paito-market-panel{display:none}.paito-market-panel.active{display:block}.paito-table-wrap{overflow:auto;background:rgba(4,10,21,.7);border:1px solid rgba(114,167,255,.18);border-radius:20px;padding:14px}.paito-grid-table{border-collapse:collapse;margin:0 auto;min-width:100%}.paito-grid-table th{background:#eef1f4;color:#111;padding:10px 4px;border:1px solid #cfd5db;font-size:15px}.paito-grid-table td{width:34px;height:34px;text-align:center;border:1px solid #d8dce1;background:#f9fbfd;color:#1c2739;font-weight:800;font-size:20px}.paito-grid-table td.tail-cell{color:#bcc2ca}.paito-grid-table td.match-cell{outline:2px solid #ff6b00;background:#ffe3c5!important;color:#121212}.paito-grid-table td.dim-cell{opacity:.42}.paito-finder{display:flex;flex-wrap:wrap;gap:12px}.paito-finder label{display:flex;flex-direction:column;gap:6px;color:#e5f2ff;font-weight:700}.paito-finder input{width:76px;background:#07111f;border:1px solid rgba(120,170,255,.2);border-radius:14px;padding:10px 12px;color:#fff;font-size:18px;font-weight:800}.paito-banner-wrap img{width:100%;display:block;border-radius:18px}.public-finder{margin-top:-4px}@media(max-width:820px){.paito-grid-table td{width:26px;height:26px;font-size:16px}.paito-grid-table th{font-size:13px;padding:8px 2px}.paito-finder input{width:64px}}


/* ==== Paito rebuild ==== */
.paito-page-panel{gap:22px}.paito-user-tools{display:grid;gap:12px}.paito-user-note{padding:12px 14px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.08);color:#dbe7ff}.paito-tabs,.paito-admin-tabs{display:flex;flex-wrap:wrap;gap:10px}.paito-tab-btn,.paito-admin-tab{background:linear-gradient(180deg,#13284a,#0c1730);border:1px solid rgba(130,190,255,.25);color:#eaf5ff;border-radius:999px;padding:11px 16px;font-weight:800;cursor:pointer}.paito-tab-btn.active,.paito-admin-tab.active{background:linear-gradient(180deg,#ffd866,#ff9b25);color:#07111f;border-color:transparent}.paito-table-wrap{overflow:auto;background:#03070d;border:1px solid rgba(255,255,255,.09);border-radius:24px;padding:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 20px 38px rgba(0,0,0,.22)}.paito-grid-table{border-collapse:collapse;margin:0 auto;min-width:max-content}.paito-grid-table th{position:sticky;top:0;z-index:2;background:#edf0f4;color:#0e141b;padding:10px 4px;border:1px solid #cfd5db;font-size:15px;font-weight:900}.paito-grid-table td{width:32px;height:34px;text-align:center;border:1px solid #d9dde3;background:#fff;color:#131a22;font-weight:900;font-size:20px;padding:0}.paito-grid-table td.tail-cell{background:#f4f4f4;color:#c3c7ce}.paito-grid-table td.match-cell,.paito-grid-table td.rule-hit{color:#0c1015;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}.paito-grid-table td.dim-cell{opacity:.36}.paito-finder .finder-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.paito-finder label{display:flex;flex-direction:column;gap:6px;color:#edf6ff;font-weight:800;font-size:12px}.paito-finder input{width:100%;min-width:0;background:#091423;border:1px solid rgba(120,170,255,.2);border-radius:14px;padding:12px;color:#fff;font-size:24px;font-weight:900;text-align:center}@media(max-width:820px){.paito-grid-table td{width:25px;height:27px;font-size:16px}.paito-grid-table th{font-size:12px;padding:8px 2px}.paito-finder .finder-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.paito-finder input{font-size:20px}}


/* mobile-friendly paito user updates */
.paito-mobile-hint{padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#dbe7ff;font-size:13px;font-weight:700}
.paito-tabs{overflow:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch}.paito-tabs::-webkit-scrollbar{height:6px}.paito-tab-btn{white-space:nowrap;flex:0 0 auto}.paito-table-wrap{overflow:auto;-webkit-overflow-scrolling:touch}.paito-grid-table td.rule-hit{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
@media(max-width:820px){.paito-main{padding-inline:10px}.paito-page-panel{gap:14px}.paito-banner-wrap img{border-radius:14px}.paito-mobile-hint{font-size:12px;padding:8px 10px}.paito-table-wrap{padding:8px;border-radius:16px}.paito-grid-table td{width:22px;height:24px;font-size:14px}.paito-grid-table th{font-size:11px;padding:7px 2px}.paito-tab-btn{padding:9px 12px;font-size:12px}}


/* refined public paito view */
.paito-page-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.paito-page-copy{margin:0}
.paito-market-panel{display:none}.paito-market-panel.active{display:block}
.paito-tab-btn{box-shadow:0 8px 20px rgba(0,0,0,.18)}
.paito-grid-table{background:#e8ebef;border-radius:14px;overflow:visible}
.paito-grid-table th{letter-spacing:0;font-size:14px}
.paito-grid-table td{font-variant-numeric:tabular-nums}
.paito-grid-table td.rule-hit{outline:2px solid rgba(255,255,255,.75);outline-offset:-2px}
.paito-grid-table td.digit-cell{background:#fff}
.paito-grid-table tbody tr:nth-child(odd) td.digit-cell{background:#fcfcfd}
@media(max-width:820px){.paito-page-head{align-items:flex-start}.paito-grid-table{border-radius:10px}.paito-grid-table td{width:24px;height:26px;font-size:15px}.paito-grid-table th{font-size:11px;padding:6px 2px}.subpage-back-link{padding:8px 12px}}


/* Paito user page refresh */
.paito-market-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:20px}
.paito-market-link-card{display:flex;gap:14px;align-items:center;padding:16px;text-decoration:none;color:inherit;border-radius:18px}
.paito-market-link-card img{width:110px;height:66px;object-fit:cover;border-radius:12px}
.paito-market-link-card strong{display:block;font-size:1rem;margin-bottom:6px}
.paito-market-link-card span{display:block;font-size:.9rem;opacity:.82;line-height:1.45}
.paito-market-nav{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px}
.paito-market-nav-link{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.08);text-decoration:none;color:#fff;font-size:.92rem}
.paito-market-nav-link.active{background:linear-gradient(135deg,#ffb347,#ff7b72);color:#151515}
.paito-market-single-panel{position:relative;padding-bottom:120px}
.paito-scroll-actions{display:flex;gap:10px;justify-content:flex-end;margin:14px 0}
.paito-table-wrap{max-height:68vh;overflow:auto;position:relative}
.paito-user-toolbox{position:fixed;right:18px;bottom:18px;z-index:40;width:min(340px,calc(100vw - 24px));padding:14px;border-radius:18px;background:rgba(19,20,28,.94);backdrop-filter:blur(14px);box-shadow:0 18px 42px rgba(0,0,0,.28)}
.paito-user-toolbox-title{font-weight:700;margin-bottom:10px}
.paito-user-inputs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
.paito-user-inputs input{width:100%;padding:10px 8px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;text-align:center;font-weight:700}
.paito-user-inputs input::placeholder{color:rgba(255,255,255,.58);font-weight:600}
.paito-user-swatches{display:grid;grid-template-columns:repeat(9,1fr);gap:8px;margin-bottom:10px}
.paito-user-swatches .color-swatch{width:100%;height:28px;border-radius:999px;border:2px solid transparent;background:linear-gradient(135deg,#ff5252,#4d7cff);cursor:pointer}
.paito-user-swatches .color-swatch.active{border-color:#fff;transform:scale(1.05)}
.toolbox-clear{width:100%}
.paito-user-hit{box-shadow:0 0 0 2px rgba(255,255,255,.6) inset}
@media (max-width: 768px){
  .paito-user-toolbox{left:12px;right:12px;bottom:12px;width:auto}
  .paito-table-wrap{max-height:58vh}
  .paito-market-link-card{align-items:flex-start}
  .paito-market-link-card img{width:88px;height:60px}
}


/* --- Paito compact user UI fix --- */
.paito-market-single-panel{padding-bottom:22px !important}
.paito-scroll-actions{margin:10px 0 !important}
.paito-table-wrap{max-height:68vh;overflow:auto;position:relative}
.paito-user-toolbox{
  position:static !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  z-index:auto !important;
  width:100% !important;
  max-width:none !important;
  margin-top:12px !important;
  padding:10px !important;
  border-radius:14px !important;
  background:rgba(19,20,28,.72) !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
}
.paito-user-toolbox-title{display:none !important}
.paito-user-inputs{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:6px !important;
  margin-bottom:8px !important;
}
.paito-user-inputs input{
  padding:7px 6px !important;
  min-height:34px !important;
  font-size:12px !important;
  border-radius:8px !important;
}
.paito-user-swatches{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin-bottom:8px !important;
}
.paito-user-swatches .color-swatch{
  width:26px !important;
  height:26px !important;
  flex:0 0 26px !important;
  border-radius:999px !important;
}
.toolbox-clear{
  padding:6px 12px !important;
  min-height:32px !important;
  font-size:12px !important;
}
@media(max-width:820px){
  .paito-user-toolbox{
    margin-top:10px !important;
    padding:8px !important;
  }
  .paito-user-inputs{
    gap:5px !important;
  }
  .paito-user-inputs input{
    padding:6px 4px !important;
    min-height:30px !important;
    font-size:11px !important;
  }
  .paito-user-swatches .color-swatch{
    width:24px !important;
    height:24px !important;
    flex-basis:24px !important;
  }
}


/* --- Paito layout follow table width --- */
.paito-main{
  display:flex !important;
  justify-content:center !important;
}
.paito-page-panel.paito-market-single-panel{
  width:fit-content !important;
  max-width:min(100%, 1320px) !important;
  margin-inline:auto !important;
  align-self:center !important;
  gap:10px !important;
}
.paito-page-head,
.paito-page-copy,
.paito-market-nav,
.paito-scroll-actions,
.paito-market-panel,
.paito-user-toolbox{
  width:fit-content !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.paito-page-head{
  min-width:min(100%, 980px) !important;
}
.paito-page-copy{
  max-width:980px !important;
}
.paito-market-nav{
  justify-content:center !important;
}
.paito-scroll-actions{
  justify-content:flex-end !important;
}
.paito-market-panel{
  display:block !important;
}
.paito-table-wrap{
  display:inline-block !important;
  width:auto !important;
  max-width:100% !important;
  margin-inline:auto !important;
}
.paito-grid-table{
  min-width:0 !important;
  width:max-content !important;
  margin-inline:auto !important;
}
.paito-user-toolbox{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  width:max-content !important;
  padding:6px 8px !important;
}
@media (min-width: 821px){
  .paito-banner-wrap,
  .paito-banner-wrap img{
    width:min(100%, 980px) !important;
    margin-inline:auto !important;
  }
}
@media (max-width: 820px){
  .paito-page-panel.paito-market-single-panel{
    width:100% !important;
    max-width:100% !important;
  }
  .paito-page-head,
  .paito-page-copy,
  .paito-market-nav,
  .paito-scroll-actions,
  .paito-market-panel,
  .paito-user-toolbox,
  .paito-banner-wrap,
  .paito-banner-wrap img{
    width:100% !important;
    max-width:100% !important;
  }
  .paito-table-wrap{
    display:block !important;
    width:100% !important;
  }
}


/* Toolbar moved above table */
.paito-scroll-actions{margin:6px 0 4px!important}
.paito-user-toolbox{
  margin:0 0 6px!important;
}
.paito-market-panel.active{
  margin-top:0!important;
}



/* === CLEAN LAYOUT OVERRIDES 2026-04-17 === */
html,body{overflow-x:hidden}
.site-header-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap}
.brand-block{min-width:0}
.top-nav{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.top-nav.always-inline{display:flex}
/* nav-btn min-height only applies inside mobile drawer, not on desktop */
.site-tabs-wrap,.site-tabs,.main-layout,.footer,.content-col,.subpage-main,.rtp-page-main{min-width:0}
img{max-width:100%;height:auto}
.page-shell,.subpage-shell,.site-shell{width:min(100%,1400px);margin-inline:auto}
.content-col,.managed-page-layout,.rtp-page-main,.subpage-main{min-width:0}
.paito-table-wrap,.admin-paito-wrap,.jadwal-grid-list,.rtp-games-grid,.rtp-pattern-carousel,.network-blog-list{min-width:0}
.paito-market-nav{display:flex;flex-wrap:wrap;gap:8px}
.paito-market-nav-link{min-width:0}
.site-tabs{max-width:100%}
.site-tab{min-width:0}
.network-slider-wrap,.network-viewport,.site-slides-track{min-width:0}
.footer-links{display:flex;flex-wrap:wrap;gap:10px 14px}
.section-head,.panel-head,.card-header,.brand-box,.admin-topbar{min-width:0}

@media (max-width: 720px){
  .site-header-bar{align-items:center;gap:12px}
  .top-nav{
    position:fixed;
    top:0;
    right:0;
    width:min(320px,88vw);
    height:100dvh;
    padding:74px 16px 18px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:10px;
    background:rgba(8,14,28,.98);
    border-left:1px solid rgba(255,255,255,.08);
    box-shadow:-18px 0 40px rgba(0,0,0,.35);
    transform:translateX(105%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    overflow:auto;
    z-index:10030;
    transition:transform .24s ease, opacity .24s ease, visibility .24s ease;
  }
  .top-nav.open{
    transform:translateX(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .top-nav.always-inline{display:flex}
  .top-nav .nav-btn{
    width:100%;
    justify-content:flex-start;
    min-height:42px;
  }
  .site-header-bar .brand-text p{max-width:100%}
  .footer,.content-panel,.managed-page-panel,.rtp-hero,.rtp-provider-section,.rtp-games-section,.rtp-pattern-section{min-width:0}
  .page-shell,.subpage-shell,.site-shell{width:calc(100% - 14px)}
  .site-header-bar,.content-panel,.footer{padding-left:12px;padding-right:12px}
  .brand-text :is(h1,.brand-site-title),.brand-text p{word-break:break-word}
  .footer-brand{min-width:0}
}
@media (min-width: 721px){
}


/* ===== Network activity images — full image shown, no cropping ===== */
/* mini-slider keeps position:relative + aspect-ratio for JS crossfade */
.mini-slider{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  background:#050810;
}
.mini-slider > a{
  position:absolute;
  inset:0;
  display:block;
}
/* mini-slide images: object-fit:contain so full image shows, no crop */
.mini-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#050810;
  opacity:0;
  pointer-events:none;
  transition:opacity .45s ease;
}
.mini-slide.active{
  opacity:1;
  pointer-events:auto;
}
/* network-blog-thumb on homepage sidebar: same natural flow */
.network-blog-thumb,
.network-blog-thumb.toggle-trigger{
  display:block;
  width:100%;
  min-height:0;
  background:#050810;
  border-radius:12px;
  overflow:hidden;
  line-height:0;
}
.network-blog-thumb img,
.network-blog-thumb.toggle-trigger img{
  display:block;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  aspect-ratio:auto;
  object-fit:contain;
  background:#050810;
}

/* ===== FINAL SITE PAGE LAYOUT FIX 2026-04-17 ===== */
.site-page-clean{
  max-width:1120px;
  padding:12px 10px 24px;
}
.site-page-clean .compact-site-main{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
}
.site-page-clean .hero-featured-slider,
.site-page-clean .hero-featured-track,
.site-page-clean .hero-featured-slide,
.site-page-clean .hero-empty-state{
  border-radius:18px;
}
.site-page-clean .hero-featured-slider{
  overflow:visible;
}
.site-page-clean .hero-featured-track,
.site-page-clean .hero-featured-slide,
.site-page-clean .hero-empty-state{
  min-height:0;
  aspect-ratio:auto;
  height:auto;
}
.site-page-clean .hero-featured-track.single-banner,
.site-page-clean .hero-featured-track.single-banner .hero-featured-slide{
  position:relative;
}
.site-page-clean .hero-featured-track.single-banner .hero-featured-slide img{
  position:relative;
}
.site-page-clean .hero-featured-slide img{
  display:block;
  width:100%;
  height:auto;
  max-height:220px;
  object-fit:contain;
  object-position:center;
  background:#050810;
  border-radius:18px;
}
.site-page-clean .site-brand-strip,
.site-page-clean .site-info-panel,
.site-page-clean .network-blog-panel{
  padding:12px;
  border-radius:18px;
}
.site-page-clean .site-brand-strip{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:20px;
}
.site-page-clean .site-brand-id{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:16px;
}
.site-page-clean .site-brand-copy,
.site-page-clean .site-info-copy,
.site-page-clean .network-blog-item,
.site-page-clean .network-blog-item h3{
  min-width:0;
}
.site-page-clean .site-brand-copy h2{
  margin:0 0 8px;
  font-size:24px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:-0.01em;
  word-break:break-word;
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
  background: linear-gradient(135deg, #fff, #c8e1ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.site-page-clean .site-brand-copy p{
  margin:0;
  font-size:12px;
  line-height:1.7;
  color:#b8c9e4;
  word-break:break-word;
  font-weight:400;
}
.site-page-clean .site-brand-actions{
  display:flex;
  flex-direction:row;
  gap:10px;
  width:100%;
  margin-top:4px;
}
}
.site-page-clean .site-main-cta,
.site-page-clean .site-ghost-cta{
  flex:1;
  min-height:48px;
  padding:14px 20px;
  font-size:14px;
  font-weight:700;
  border-radius:12px;
}
.site-page-clean .clean-head{
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.site-page-clean .clean-head h2{
  font-size:13px;
  line-height:1.2;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:#36e3ff;
}
.site-page-clean .site-info-list{
  gap:10px;
}
.site-page-clean .site-info-item{
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.site-page-clean .site-info-item:last-child{
  border-bottom:none;
}
.site-page-clean .site-info-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-weight:600;
  color:#7a90b0;
}
.site-page-clean .site-info-value{
  font-size:16px;
  line-height:1.4;
  font-weight:700;
  word-break:break-word;
  color:#f0f6ff;
}
.site-page-clean .network-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.site-page-clean .network-page-note{
  font-size:11px;
}
.site-page-clean .network-blog-list{
  display:flex;
  flex-direction:column;
  gap:20px;
}
/* Each post: full-width card, image on top, text below */
.site-page-clean .network-blog-item{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.site-page-clean .network-blog-item::before {
  content: '';
  position: absolute;
  inset: -100%;
  background: radial-gradient(circle, rgba(54,227,255,0.12), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 0;
}
.site-page-clean .network-blog-item:hover {
  transform: translateY(-4px);
  border-color: rgba(54,227,255,0.25);
  box-shadow: 0 12px 36px rgba(0,0,0,0.3), 0 0 28px rgba(54,227,255,0.12);
}
.site-page-clean .network-blog-item:hover::before {
  opacity: 1;
}
/* Image fills full width, natural aspect ratio, never cropped */
.site-page-clean .network-blog-thumb,
.site-page-clean .network-blog-thumb.toggle-trigger{
  display:block;
  width:100%;
  background:#050810;
  border-radius:0;
  overflow:hidden;
  cursor:pointer;
  border:0;
  padding:0;
  text-align:left;
  line-height:0;
}
.site-page-clean .network-blog-thumb img,
.site-page-clean .network-blog-thumb.toggle-trigger img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  min-height:0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s;
}
.site-page-clean .network-blog-item:hover .network-blog-thumb img,
.site-page-clean .network-blog-item:hover .network-blog-thumb.toggle-trigger img{
  transform: scale(1.05);
  filter: brightness(1.1);
}
/* Text content below image */
.site-page-clean .network-blog-meta{
  order:-1;
  font-size:11px;
  color:#8fa6c7;
  letter-spacing:.02em;
  padding:12px 16px 0;
}
.site-page-clean .network-blog-item h3{
  margin:6px 0 0;
  font-size:17px;
  font-weight:700;
  line-height:1.4;
  color:#f6fbff;
  word-break:break-word;
  padding:0 16px;
}
.site-page-clean .network-detail-toggle{
  align-self:flex-start;
  margin:10px 16px 12px;
  font-size:12px;
  font-weight:700;
  color:#9fe5ff;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.site-page-clean .network-blog-details{
  padding:0 16px 14px;
  font-size:12px;
  line-height:1.7;
  color:#d5dff0;
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:2px;
  padding-top:12px;
}
.site-page-clean .network-blog-details p,
.site-page-clean .network-blog-details ul,
.site-page-clean .network-blog-details ol{
  margin-top:0;
}
.site-page-clean .network-blog-link{
  display:inline-flex;
  align-items:center;
  margin-top:10px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(54,227,255,.12);
  border:1px solid rgba(54,227,255,.22);
  color:#9fe5ff;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
}
.site-page-clean .site-pagination{
  margin-top:16px;
}

@media (min-width: 860px){
  .site-page-clean .compact-site-main{
    grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
    align-items:start;
  }
  .site-page-clean .hero-featured-slider,
  .site-page-clean .network-blog-panel{
    grid-column:1 / -1;
  }
  .site-page-clean .hero-featured-slide img{
    max-height:200px;
  }
  /* 2-col post grid on desktop */
  .site-page-clean .network-blog-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
    align-items:start;
  }
  .site-page-clean .site-brand-strip,
  .site-page-clean .site-info-panel{
    height:100%;
  }
  .site-page-clean .site-brand-actions{
    grid-template-columns:repeat(2,minmax(0,220px));
    width:auto;
    justify-content:start;
  }
}

@media (max-width: 700px){
  .site-page-clean{
    padding:8px 6px 16px;
  }
  .site-page-clean .site-brand-strip,
  .site-page-clean .site-info-panel,
  .site-page-clean .network-blog-panel{
    padding:10px;
    border-radius:14px;
  }
  .site-page-clean .hero-featured-slide img{
    max-height:128px;
    border-radius:16px;
  }
  .site-page-clean .site-brand-id{
    gap:10px;
  }
  .site-page-clean .site-brand-copy h2{
    font-size:17px;
  }
  .site-page-clean .site-brand-copy p,
  .site-page-clean .site-info-value,
  .site-page-clean .network-blog-details{
    font-size:11px;
  }
  .site-page-clean .site-brand-actions{
    grid-template-columns:1fr 1fr;
  }
  .site-page-clean .site-main-cta,
  .site-page-clean .site-ghost-cta{
    min-height:34px;
    font-size:11px;
    padding:7px 10px;
  }
  .site-page-clean .network-blog-item{
    border-radius:14px;
  }
  .site-page-clean .network-blog-item h3{
    font-size:15px;
    padding:0 12px;
  }
  .site-page-clean .network-blog-meta{
    padding:10px 12px 0;
  }
  .site-page-clean .network-detail-toggle{
    margin:8px 12px 10px;
  }
  .site-page-clean .network-blog-details{
    padding:10px 12px 12px;
  }
}


/* ===== Site page banner uses same simple flow as Paito banner ===== */
.site-banner-panel{padding:10px;overflow:hidden}
.site-banner-wrap{position:static;min-height:0;width:100%}
.site-banner-wrap .site-featured-banner-image{position:static;inset:auto;width:100%;height:auto;max-height:260px;display:block;object-fit:cover;border-radius:18px;margin:0 auto}
.hero-featured-slider.site-banner-panel,.hero-featured-slider.site-banner-panel .site-banner-wrap{min-height:0}
.hero-featured-slider.site-banner-panel .hero-featured-overlay,.hero-featured-slider.site-banner-panel .hero-dots,.hero-featured-slider.site-banner-panel .hero-featured-slide{display:none!important}
@media (min-width:821px){.site-banner-wrap,.site-banner-wrap .site-featured-banner-image{width:min(100%,980px);margin-inline:auto}.site-banner-wrap .site-featured-banner-image{max-height:none;object-fit:contain;object-position:center top;background:transparent}}
@media (max-width:768px){.site-banner-panel{padding:8px}.site-banner-wrap .site-featured-banner-image{max-height:160px;border-radius:14px}}

/* ===== Homepage featured banner uses same natural image flow as Paito ===== */
#featured .slides{
  position:relative;
  width:min(100%,980px);
  margin-inline:auto;
  aspect-ratio:16/6;
  max-height:420px;
  background:#060c1a;
  overflow:hidden;
  border-radius:18px;
}
/* DO NOT override .slide position/display — let glitch animation run */
#featured .slide a:not(.fp-pill){
  display:block;
  width:100%;height:100%;
}
#featured .slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:0;
}
@media (max-width:768px){
  #featured .slides{
    width:100%;
    aspect-ratio:16/7;
    border-radius:14px;
  }
}


/* ===== Unified full-fit banner setup for RTP / Jadwal / Room Result / Shio / Paito ===== */
@media (min-width:821px){
  .rtp-hero,
  .jadwal-banner-wrap,
  .prediksi-banner-panel,
  .room-result-main .page-banner-panel,
  .shio-banner-wrap,
  .paito-banner-wrap{
    width:min(100%,980px) !important;
    margin-inline:auto !important;
  }

  .rtp-banner-link,
  .rtp-banner-image,
  .jadwal-page-banner,
  .room-result-main .page-banner-panel .page-header-banner,
  .prediksi-banner-image,
  .shio-banner,
  .paito-banner-wrap img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center top !important;
    margin-inline:auto !important;
  }

  .room-result-main .page-banner-panel,
  .page-banner-panel{
    padding:10px !important;
    overflow:hidden !important;
  }
}

@media (max-width:820px){
  .rtp-banner-link,
  .rtp-banner-image,
  .jadwal-banner-wrap,
  .jadwal-page-banner,
  .room-result-main .page-banner-panel,
  .prediksi-banner-panel,
  .room-result-main .page-banner-panel .page-header-banner,
  .shio-banner-wrap,
  .shio-banner,
  .paito-banner-wrap,
  .paito-banner-wrap img{
    width:100% !important;
    max-width:100% !important;
  }

  .rtp-banner-image,
  .jadwal-page-banner,
  .room-result-main .page-banner-panel .page-header-banner,
  .prediksi-banner-image,
  .shio-banner,
  .paito-banner-wrap img{
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center top !important;
  }
}


/* === GLOBAL UI / LAYOUT CLEANUP 2026-04-18 === */
.about-copy{color:#d9e6ff;font-size:13px;line-height:1.7;word-break:break-word}
.about-copy > *:first-child{margin-top:0}.about-copy > *:last-child{margin-bottom:0}
.site-page-main{display:grid;gap:12px;min-width:0}
.site-content-grid{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
}
@media (min-width: 768px) {
  .site-content-grid {
    grid-template-columns: minmax(0,1fr) 280px;
    gap: 14px;
    align-items: start;
  }
  .site-page-clean .site-info-panel {
    position: sticky;
    top: 16px;
  }
}
.compact-footer{padding:12px 14px}
.empty-info-item{opacity:.88}
.post-detail-text{color:#dbe7ff;line-height:1.7;word-break:break-word}
.post-detail-text > *:first-child{margin-top:0}.post-detail-text > *:last-child{margin-bottom:0}
.site-footer{display:flex;justify-content:center;align-items:center;padding:18px 12px 26px;color:#a9bbd8;text-align:center}
.site-footer p{margin:0;font-size:12px;line-height:1.6}
.subpage-header,.compact-subpage-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:18px;background:var(--bg-card);border:1px solid var(--stroke);box-shadow:var(--shadow)}
.subpage-header h1,.compact-subpage-header h1{margin:0;font-family:"Orbitron",sans-serif;font-size:16px;letter-spacing:.08em;line-height:1.25}
.room-result-links-panel{padding:18px}
.market-head{align-items:flex-start}
.paito-shell,.paito-ui-shell{padding-bottom:24px}
.paito-cell{transition:background-color .15s ease, box-shadow .15s ease, transform .12s ease}
.paito-cell.paito-user-hit{box-shadow:inset 0 0 0 2px rgba(255,255,255,.78)}

@media (max-width:980px){
  .site-header-bar,.subpage-header,.compact-subpage-header,.footer,.content-panel,.managed-page-panel,.rtp-hero,.rtp-provider-section,.rtp-games-section,.rtp-pattern-section{min-width:0}
}
@media (max-width:720px){
  .subpage-header,.compact-subpage-header{padding:10px 12px;align-items:flex-start;flex-direction:column}
  .subpage-header h1,.compact-subpage-header h1{font-size:14px}
  .room-result-shell,.managed-page-layout,.subpage-main,.paito-main{min-width:0}
  .paito-page-head{gap:10px}
  .paito-market-nav{gap:8px}
  .site-page-main{gap:10px}
  .compact-footer{padding:10px 12px}
}


/* === NAVBAR STABILITY OVERRIDE 2026-04-18 === */
.site-header-bar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:nowrap;
}
.site-header-bar .brand-block{min-width:0;flex:0 1 auto}
.site-header-bar .brand-text{min-width:0}
.site-header-bar .brand-text :is(h1,.brand-site-title),
.site-header-bar .brand-text p{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.top-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:1 1 auto;
  min-width:0;
}
.top-nav .nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.room-result-topbar{display:flex;justify-content:flex-start;margin:4px 0 10px}
.room-result-home-link{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);text-decoration:none;color:#dff3ff;font-weight:700;font-size:12px}
.room-result-copy-panel{margin-bottom:14px}

@media (min-width: 721px){
  .top-nav{
    position:static !important;
    inset:auto !important;
    width:auto !important;
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    overflow:visible !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }
  .top-nav .nav-btn{width:auto !important;text-align:center !important}
}

@media (max-width: 720px){
  .site-header-bar{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    padding:10px 56px 10px 12px !important;
    min-height:64px;
  }
  .site-header-bar .brand-block{
    width:100%;
    max-width:100%;
    justify-content:flex-start;
    gap:10px;
    padding-right:0;
  }
  .top-nav{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    left:auto !important;
    bottom:0 !important;
    width:min(82vw, 320px) !important;
    max-width:320px !important;
    height:100dvh !important;
    margin:0 !important;
    padding:14px 12px 20px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:6px !important;
    background:linear-gradient(180deg, rgba(7,11,22,.99), rgba(3,5,12,.995)) !important;
    border-left:1px solid rgba(54,227,255,.22) !important;
    box-shadow:-12px 0 36px rgba(0,0,0,.56) !important;
    transform:translateX(108%) !important;
    opacity:1 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    overflow-y:auto !important;
    flex-wrap:nowrap !important;
    z-index:10030 !important;
  }
  .top-nav.open{
    transform:translateX(0) !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  .top-nav .nav-btn{width:100% !important;justify-content:flex-start !important;text-align:left !important}
}


/* === PAITO TITLE/DESCRIPTION ALIGN FIX 2026-04-18 === */
.paito-page-head.market-head{
  width:min(100%,980px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  margin-inline:auto !important;
}
.paito-title-block{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  flex:1 1 auto !important;
  text-align:center !important;
}
.paito-title-block :is(h1,h2),
.paito-title-block span,
.paito-page-copy,
.paito-page-copy *{
  text-align:center;
}
.paito-title-block span{
  margin:0;
  color:var(--muted);
  font-size:10px;
  line-height:1.4;
}
.paito-page-copy{
  width:min(100%,980px) !important;
  max-width:980px !important;
  margin-inline:auto !important;
}
@media (max-width:820px){
  .paito-page-head.market-head{
    width:100% !important;
    gap:10px !important;
  }
}

/* === PAITO MARKET NAV MOBILE STACK 2026-04-18 === */
.paito-market-nav{
  width:min(100%,980px);
  margin:14px auto 16px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.paito-market-nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 18px;
  text-align:center;
  white-space:nowrap;
}
@media (max-width:820px){
  .paito-market-nav{
    display:grid !important;
    grid-template-columns:1fr;
    gap:10px !important;
    width:min(100%,280px) !important;
    margin:10px auto 14px !important;
  }
  .paito-market-nav-link{
    width:100%;
    min-height:44px;
    padding:11px 14px;
    white-space:normal;
  }
}

/* === PAGE CONTAINER CONSISTENCY FIX 2026-04-18 === */
:root{
  --inner-page-max: 1180px;
}

.page-shell,
.subpage-shell{
  width:min(100%, 1440px);
  margin-inline:auto;
  padding:14px;
}

.managed-page-layout,
.rtp-page-main,
.room-result-main,
.paito-main{
  width:min(100%, var(--inner-page-max));
  margin-inline:auto;
  padding-inline:0;
}

.managed-page-panel,
.rtp-hero,
.rtp-provider-section,
.rtp-games-section,
.rtp-pattern-section,
.room-result-copy-panel,
.room-result-links-panel,
.paito-page-panel,
.shio-page-panel,
.jadwal-panel{
  width:100%;
  max-width:var(--inner-page-max);
  margin-inline:auto;
}

.room-result-shell{
  max-width:none;
  margin-inline:auto;
  padding:14px;
}

.room-live-feed{
  width:100%;
  max-width:var(--inner-page-max);
  margin-inline:auto;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
}

.jadwal-panel-sticky-layout{
  width:100%;
  max-width:var(--inner-page-max);
  margin-inline:auto;
}

.paito-page-panel.paito-market-single-panel{
  width:100% !important;
  max-width:var(--inner-page-max) !important;
  align-self:stretch !important;
}

.paito-page-head,
.paito-page-copy,
.paito-market-nav,
.paito-scroll-actions,
.paito-market-panel,
.paito-user-toolbox,
.paito-banner-wrap,
.paito-banner-wrap img{
  width:100% !important;
  max-width:100% !important;
}

.paito-page-head{
  min-width:0 !important;
}

.paito-table-wrap{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin-inline:auto !important;
}

.paito-grid-table{
  width:max-content !important;
  min-width:100% !important;
}

.paito-user-toolbox{
  justify-content:space-between !important;
}

.shio-page-panel,
.managed-page-panel{
  padding:18px;
}

@media (max-width: 980px){
  :root{--inner-page-max: 100%;}

  .page-shell,
  .subpage-shell{
    padding:12px;
  }

  .managed-page-layout,
  .rtp-page-main,
  .room-result-main,
  .paito-main{
    width:100%;
  }

  .paito-user-toolbox{
    justify-content:center !important;
  }
}

@media (max-width: 720px){
  .page-shell,
  .subpage-shell{
    width:calc(100% - 14px);
    padding:10px;
  }

  .managed-page-layout,
  .rtp-page-main,
  .room-result-main,
  .paito-main{
    gap:10px;
  }

  .managed-page-panel,
  .rtp-hero,
  .rtp-provider-section,
  .rtp-games-section,
  .rtp-pattern-section,
  .room-result-copy-panel,
  .room-result-links-panel,
  .paito-page-panel,
  .shio-page-panel,
  .jadwal-panel{
    padding-left:12px;
    padding-right:12px;
  }

  .room-live-feed{
    gap:14px;
  }
}

/* ============================================================
   STRICT INNER PAGE LAYOUT SYSTEM — consistency pass
   Applies to: Bukti JP, RTP, Prediksi, Jadwal Pasaran,
   Room Result, Shio, Paito
   ============================================================ */
:root{
  --page-shell-max: 1280px;
  --page-inner-max: 1180px;
  --page-shell-gap: 12px;
  --page-edge-pad: 16px;
  --page-edge-pad-mobile: 10px;
}

.page-shell,
.subpage-shell,
.room-result-shell,
.rtp-shell{
  width:min(calc(100% - 24px), var(--page-shell-max)) !important;
  margin:10px auto 28px !important;
  padding:0 !important;
  display:flex;
  flex-direction:column;
  gap:var(--page-shell-gap);
}

.managed-page-layout,
.rtp-page-main,
.room-result-main,
.paito-main{
  width:100% !important;
  max-width:var(--page-inner-max) !important;
  margin:0 auto !important;
  padding:0 !important;
  min-width:0 !important;
  display:grid;
  gap:12px;
}

.managed-page-panel,
.rtp-hero,
.rtp-provider-section,
.rtp-games-section,
.rtp-pattern-section,
.room-result-copy-panel,
.room-result-links-panel,
.room-live-feed,
.shio-page-panel,
.jadwal-panel,
.paito-page-panel,
.paito-page-panel.paito-market-single-panel{
  width:100% !important;
  max-width:100% !important;
  margin-inline:auto !important;
  align-self:stretch !important;
}

.room-result-topbar,
.rtp-page-topbar,
.paito-page-head,
.paito-page-copy,
.paito-market-nav,
.paito-scroll-actions,
.paito-market-panel,
.paito-user-toolbox,
.paito-banner-wrap,
.paito-banner-wrap img,
.jadwal-banner-wrap,
.shio-banner-wrap,
.shio-banner,
.page-banner-panel,
.page-header-banner{
  width:100% !important;
  max-width:100% !important;
  margin-inline:auto !important;
}

.paito-main{
  justify-content:initial !important;
}

.paito-page-panel.paito-market-single-panel,
.paito-page-head,
.paito-page-copy,
.paito-market-nav,
.paito-scroll-actions,
.paito-market-panel,
.paito-user-toolbox{
  width:100% !important;
  min-width:0 !important;
}

.paito-table-wrap{
  width:100% !important;
  max-width:100% !important;
  margin-inline:auto !important;
}

.paito-grid-table{
  min-width:max-content !important;
}

.room-live-feed{
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
}

.footer{
  width:100%;
}

@media (max-width: 980px){
  .page-shell,
  .subpage-shell,
  .room-result-shell,
  .rtp-shell{
    width:min(calc(100% - 18px), var(--page-shell-max)) !important;
  }

  .managed-page-layout,
  .rtp-page-main,
  .room-result-main,
  .paito-main{
    gap:10px;
  }
}

@media (max-width: 720px){
  .page-shell,
  .subpage-shell,
  .room-result-shell,
  .rtp-shell{
    width:calc(100% - 14px) !important;
    margin:8px auto 22px !important;
    gap:10px;
  }

  .managed-page-panel,
  .rtp-hero,
  .rtp-provider-section,
  .rtp-games-section,
  .rtp-pattern-section,
  .room-result-copy-panel,
  .room-result-links-panel,
  .shio-page-panel,
  .jadwal-panel,
  .paito-page-panel,
  .paito-page-panel.paito-market-single-panel{
    padding-left:12px !important;
    padding-right:12px !important;
  }
}


/* ============================================================
   TYPOGRAPHY + ALIGNMENT CONSISTENCY PASS
   Follows homepage font system and keeps page titles/content aligned
   ============================================================ */
button,input,select,textarea{font:inherit}

.managed-page-panel,
.rtp-hero,
.rtp-provider-section,
.rtp-games-section,
.rtp-pattern-section,
.room-result-copy-panel,
.room-result-links-panel,
.shio-page-panel,
.jadwal-panel,
.paito-page-panel{
  text-align:left;
}

.managed-page-panel .section-head,
.rtp-page-main .section-head,
.room-result-main .section-head,
.shio-page-panel .section-head,
.jadwal-panel .section-head,
.paito-page-panel .section-head{
  align-items:flex-start;
  gap:14px;
}

.managed-page-panel .section-head :is(h1,h2),
.rtp-page-main .section-head :is(h1,h2),
.room-result-main .section-head :is(h1,h2),
.shio-page-panel .section-head :is(h1,h2),
.jadwal-panel .section-head :is(h1,h2),
.paito-page-panel .section-head :is(h1,h2){
  font-family:"Orbitron",sans-serif;
  font-size:clamp(18px,2vw,28px);
  line-height:1.18;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.managed-page-panel .section-head > span,
.rtp-page-main .section-head > span,
.room-result-main .section-head > span,
.shio-page-panel .section-head > span,
.jadwal-panel .section-head > span,
.paito-page-panel .section-head > span{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  min-height:28px;
  margin-left:auto;
  color:#c8d7f0;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  white-space:nowrap;
  text-align:right;
}

.managed-page-content,
.paito-page-copy,
.room-result-copy,
.hero-empty-state,
.empty-state-box{
  font-family:"Poppins",system-ui,sans-serif;
  font-size:14px;
  line-height:1.8;
  color:#dbe6fb;
  text-align:left;
}
.rtp-pattern-text{
  font-family:"Poppins",system-ui,sans-serif;
  font-size:14px;
  line-height:1.8;
  color:#dbe6fb;
  text-align:left;
}

.managed-page-content p,
.paito-page-copy p,
.room-result-copy p{
  margin:0 0 12px;
}
.rtp-pattern-text p{
  margin:0 0 4px;
}

.managed-page-content p:last-child,
.paito-page-copy p:last-child,
.room-result-copy p:last-child,
.rtp-pattern-text p:last-child{
  margin-bottom:0;
}

.managed-page-content h1,
.managed-page-content h2,
.managed-page-content h3,
.paito-page-copy h1,
.paito-page-copy h2,
.paito-page-copy h3,
.room-result-copy h1,
.room-result-copy h2,
.room-result-copy h3,
.rtp-pattern-text h1,
.rtp-pattern-text h2,
.rtp-pattern-text h3{
  margin:0 0 12px;
  color:#f3f8ff;
  line-height:1.3;
}

.managed-page-content ul,
.managed-page-content ol,
.paito-page-copy ul,
.paito-page-copy ol,
.room-result-copy ul,
.room-result-copy ol,
.rtp-pattern-text ul,
.rtp-pattern-text ol{
  margin:0 0 14px 20px;
  padding:0;
}

.managed-page-content li,
.paito-page-copy li,
.room-result-copy li,
.rtp-pattern-text li{
  margin-bottom:6px;
}

.room-result-copy,
.paito-page-copy,
.managed-page-content{
  max-width:none;
}

.room-result-copy-panel .room-result-copy{
  padding:2px 0;
}

.shio-card-title,
.jadwal-live-meta #jadwalLiveClock,
.room-result-card-head{
  font-family:"Orbitron",sans-serif;
}

.footer-links a,
.nav-btn,
.subpage-back-link,
.rtp-home-link,
.room-result-home-link{
  font-family:"Poppins",system-ui,sans-serif;
}

@media (max-width: 720px){
  .managed-page-panel .section-head,
  .rtp-page-main .section-head,
  .room-result-main .section-head,
  .shio-page-panel .section-head,
  .jadwal-panel .section-head,
  .paito-page-panel .section-head{
    gap:8px;
  }

  .managed-page-panel .section-head :is(h1,h2),
  .rtp-page-main .section-head :is(h1,h2),
  .room-result-main .section-head :is(h1,h2),
  .shio-page-panel .section-head :is(h1,h2),
  .jadwal-panel .section-head :is(h1,h2),
  .paito-page-panel .section-head :is(h1,h2){
    font-size:clamp(16px,4.8vw,22px);
    letter-spacing:.1em;
  }

  .managed-page-panel .section-head > span,
  .rtp-page-main .section-head > span,
  .room-result-main .section-head > span,
  .shio-page-panel .section-head > span,
  .jadwal-panel .section-head > span,
  .paito-page-panel .section-head > span{
    min-height:auto;
    font-size:11px;
  }

  .managed-page-content,
  .paito-page-copy,
  .room-result-copy,
  .rtp-pattern-text,
  .hero-empty-state,
  .empty-state-box{
    font-size:13px;
    line-height:1.72;
  }
}


/* Bukti JP page */
.bukti-jp-layout{gap:14px}
.bukti-jp-shell .content-panel{margin-bottom:0}
.bukti-jp-banner-image{width:100%;height:auto;max-height:none;display:block;object-fit:contain;object-position:center top;border-radius:18px}
.bukti-jp-head :is(h1,h2){margin:0}
.bukti-jp-subtitle{margin:4px auto 0;color:#d9e5ff;font-size:14px;line-height:1.65;text-align:center!important;width:100%;display:block}
.bukti-jp-stats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);gap:4px;margin-top:6px;min-width:0}
.bukti-stat{min-width:0;padding:4px 5px 3px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));display:grid;gap:2px;align-content:start}
.bukti-stat span{font-size:7px;line-height:1.05;letter-spacing:.05em;text-transform:uppercase;color:#91a8d6;word-break:normal}.bukti-stat strong{font-size:11px;line-height:1;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bukti-stat small{font-size:7px;line-height:1;color:#7c91bb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bukti-stat-max strong{font-size:10px}.bukti-stat-max span{font-size:6px}.bukti-stat-max small{font-size:6px}
.bukti-featured-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.bukti-card{border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.03)}
.bukti-media-wrap{background:#091121}.bukti-media{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.bukti-card-copy{padding:12px 12px 14px;display:grid;gap:8px}.bukti-card-copy p{margin:0;color:#d8e4ff;line-height:1.6}.bukti-card-site{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8cdfff}.bukti-card-nominal{font-weight:700;color:#ffffff}
.bukti-card-topline{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.bukti-card-topline strong{font-size:14px}
.bukti-social-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bukti-social-card{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.03)}
.bukti-social-card p{margin:4px 0 0;color:#d8e4ff;font-size:13px;line-height:1.55}.bukti-link-btn.disabled{opacity:.65;pointer-events:none}
@media (max-width:768px){.bukti-jp-stats{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,.92fr) minmax(0,1.16fr);gap:4px;overflow:hidden}.bukti-stat{padding:5px 4px 4px;border-radius:8px;gap:1px}.bukti-stat span{font-size:5.5px;letter-spacing:0;line-height:1}.bukti-stat strong{font-size:9px}.bukti-stat small{font-size:5.2px}.bukti-stat-max strong{font-size:7px}.bukti-stat-max span{font-size:4.8px}.bukti-stat-max small{font-size:4.8px}.bukti-featured-grid,.bukti-social-grid{grid-template-columns:1fr}.bukti-social-card{align-items:flex-start;flex-direction:column}.bukti-jp-banner-image{aspect-ratio:16/6}}


.bukti-stat strong{display:block;transition:transform .24s ease,opacity .24s ease;will-change:transform,opacity}.bukti-stat strong.counter-pulse{animation:buktiCounterPulse .38s ease}.bukti-stat small{display:none}@keyframes buktiCounterPulse{0%{transform:translateY(1px) scale(.98);opacity:.72}55%{transform:translateY(0) scale(1.05);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
@media (max-width:768px){.bukti-jp-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}.bukti-stat{padding:6px 4px 5px;border-radius:9px;min-width:0}.bukti-stat span{font-size:5.6px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bukti-stat strong{font-size:9.4px;line-height:1.05}.bukti-stat-max span{font-size:4.9px}.bukti-stat-max strong{font-size:7.1px;line-height:1.05}}


/* Bukti JP withdraw ticker */
.bukti-wd-panel{padding:0;background:transparent!important;border:none!important;box-shadow:none!important}
.bukti-wd-ticker{position:relative;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0 12px}
.bukti-wd-fade{position:absolute;top:0;bottom:0;width:42px;z-index:2;pointer-events:none}
.bukti-wd-fade-left{left:0;background:linear-gradient(90deg,rgba(3,8,18,1) 0%,rgba(3,8,18,.92) 32%,rgba(3,8,18,0) 100%)}
.bukti-wd-fade-right{right:0;background:linear-gradient(270deg,rgba(3,8,18,1) 0%,rgba(3,8,18,.92) 32%,rgba(3,8,18,0) 100%)}
.bukti-wd-item{--wd-accent:linear-gradient(135deg,#8ff7d8 0%,#58c5ff 100%);--wd-glow:rgba(88,197,255,.34);--wd-text:#07111f;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:3px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.04);background:rgba(7,12,24,.16);box-shadow:none;white-space:nowrap;overflow:hidden;position:relative;transition:opacity .42s ease,filter .42s ease,transform .42s ease,border-color .3s ease,background .3s ease;max-width:min(100%,760px);margin:0 auto}
.bukti-wd-item::before{content:"";position:absolute;inset:-2px;border-radius:inherit;opacity:0;pointer-events:none;z-index:0}
.bukti-wd-item::after{content:"";position:absolute;inset:-1px;opacity:0;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,transparent 8%,rgba(255,255,255,.18) 20%,rgba(255,210,80,.38) 38%,rgba(255,110,28,.34) 48%,rgba(100,220,255,.34) 64%,rgba(255,255,255,.14) 76%,transparent 92%);transform:translateX(-135%);z-index:0}
.bukti-wd-item.is-leave{opacity:0;transform:translateY(-8px) scale(.985);filter:none}
.bukti-wd-item.is-enter{animation:buktiWdIn .42s ease}
.bukti-wd-item.is-big-win{border-color:rgba(255,188,78,.78);background:linear-gradient(180deg,rgba(62,22,4,.52),rgba(16,10,14,.24));box-shadow:0 0 0 1px rgba(255,220,120,.18),0 0 24px rgba(255,130,40,.42),0 0 46px rgba(255,70,10,.28),0 0 72px rgba(80,220,255,.22)}
.bukti-wd-item.is-big-win::before{opacity:1;background:conic-gradient(from 180deg,rgba(255,120,28,.0) 0deg,rgba(255,120,28,.92) 40deg,rgba(255,225,110,.98) 78deg,rgba(80,220,255,.88) 132deg,rgba(255,75,20,.92) 220deg,rgba(255,180,40,.88) 300deg,rgba(255,120,28,.0) 360deg);filter:blur(12px) saturate(1.35);animation:buktiWdFireHalo 1s ease-in-out infinite,buktiWdElectricPulse .52s steps(2) infinite}.bukti-wd-item.is-big-win::after{opacity:1;animation:buktiWdLightning 1.05s ease 1,buktiWdShine 1.25s ease 1}
.bukti-wd-item.is-big-win .bukti-wd-brand{border-color:rgba(255,182,72,.54);box-shadow:0 0 18px rgba(255,138,44,.22),0 0 28px rgba(90,200,255,.12)}
.bukti-wd-item.is-big-win .bukti-wd-amount{color:#ffe88c;text-shadow:0 0 10px rgba(255,228,120,.55),0 0 20px rgba(255,120,40,.42),0 0 34px rgba(80,220,255,.18)}
.bukti-wd-item.is-big-win .bukti-wd-logo{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 0 1px rgba(255,160,70,.18) inset,0 0 18px rgba(255,120,40,.34),0 0 34px rgba(90,200,255,.2)}
.bukti-wd-item > *{position:relative;z-index:1}
.bukti-wd-brand{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:2px 7px 2px 2px;border-radius:999px;background:rgba(6,12,24,.62);border:1px solid rgba(105,205,255,.14);box-shadow:none}
.bukti-wd-brand::after{content:"";width:1px;height:14px;margin-left:1px;background:linear-gradient(180deg,rgba(54,227,255,.04),rgba(54,227,255,.22),rgba(162,69,255,.08));flex:0 0 auto}
.bukti-wd-logo{width:24px;min-width:24px;height:24px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;letter-spacing:.06em;color:var(--wd-text);background:linear-gradient(180deg,rgba(2,8,18,.96),rgba(5,11,21,.92));box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 0 1px rgba(82,198,255,.1) inset;overflow:hidden}
.bukti-wd-logo img{width:100%;height:100%;object-fit:cover;display:block}
.bukti-wd-site{max-width:112px;padding:0;border-radius:0;font-size:10px;font-weight:800;letter-spacing:.08em;color:#d9f3ff;background:transparent;box-shadow:none;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis}
.bukti-wd-copy{min-width:0;flex:0 1 auto;display:flex;align-items:center;justify-content:center;gap:5px;overflow:hidden;color:#eaf2ff;font-size:12px;font-weight:700;letter-spacing:.01em;text-align:center}.bukti-wd-user,.bukti-wd-action,.bukti-wd-amount{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bukti-wd-user{font-weight:800;color:#ffffff}.bukti-wd-action{min-width:0;flex:0 1 auto;color:rgba(234,242,255,.86);font-weight:600}.bukti-wd-amount{font-weight:900;color:#ffe089}
.bukti-wd-flash{display:none!important}
@keyframes buktiWdIn{0%{opacity:0;transform:translateY(8px) scale(.985)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes buktiWdShine{0%{transform:translateX(-135%);opacity:0}20%{opacity:1}100%{transform:translateX(135%);opacity:0}}
@keyframes buktiWdLightning{0%,100%{filter:brightness(1)}10%{filter:brightness(1.65)}16%{filter:brightness(.88)}24%{filter:brightness(1.8)}34%{filter:brightness(1.05)}48%{filter:brightness(1.55)}62%{filter:brightness(.94)}76%{filter:brightness(1.42)}}
@keyframes buktiWdFireHalo{0%,100%{filter:blur(12px) saturate(1.2);opacity:.82}50%{filter:blur(18px) saturate(1.6);opacity:1}}
@keyframes buktiWdElectricPulse{0%,100%{box-shadow:0 0 0 1px rgba(255,220,120,.18),0 0 24px rgba(255,130,40,.42),0 0 46px rgba(255,70,10,.28),0 0 72px rgba(80,220,255,.22)}50%{box-shadow:0 0 0 1px rgba(255,240,160,.28),0 0 34px rgba(255,150,30,.52),0 0 64px rgba(255,80,18,.36),0 0 94px rgba(80,220,255,.34)}}
@media (max-width:768px){.bukti-wd-ticker{padding:0 10px}.bukti-wd-fade{width:28px}.bukti-wd-item{gap:5px;min-height:28px;padding:2px 7px;border-radius:9px;max-width:min(100%,100%)}.bukti-wd-brand{gap:5px;padding:2px 6px 2px 2px}.bukti-wd-brand::after{height:12px}.bukti-wd-logo{width:20px;min-width:20px;height:20px;font-size:8px}.bukti-wd-site{max-width:70px;font-size:7.8px;letter-spacing:.07em}.bukti-wd-copy{gap:4px;font-size:8.8px}.bukti-wd-action{font-size:8.2px;flex:0 1 auto}.bukti-wd-amount{flex:0 0 auto;max-width:88px}}
/* Home withdraw ticker wrapper */
.home-wd-wrap{padding:4px 12px;margin-top:-10px;margin-bottom:-10px;display:flex;align-items:center;min-height:0;line-height:1;position:relative;z-index:1}


/* Prediksi Page */
.prediksi-layout{gap:18px}
.prediksi-site-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:2px}
.site-tab-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;text-decoration:none;color:#eaf6ff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);white-space:nowrap;flex:0 0 auto;font-size:12px;font-weight:700}
.site-tab-chip.active{background:linear-gradient(135deg,rgba(104,214,255,.2),rgba(107,255,196,.18));border-color:rgba(104,214,255,.45);box-shadow:0 12px 24px rgba(0,0,0,.18)}
.site-tab-chip img,.site-tab-fallback{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);object-fit:cover}
.site-tab-fallback{font-size:10px;font-weight:800}
.prediksi-section .section-head{margin-bottom:14px}
.prediksi-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.prediksi-card{
  padding:0;border-radius:22px;overflow:hidden;
  border:1px solid rgba(54,227,255,.18);
  background:linear-gradient(155deg,rgba(10,20,46,.96),rgba(6,13,30,.98));
  box-shadow:0 0 0 1px rgba(54,227,255,.06),0 4px 28px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;
}
.prediksi-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(54,227,255,.06) 0%,transparent 50%,rgba(162,69,255,.04) 100%);
}
.prediksi-card-inner{padding:16px;position:relative;z-index:1}
.prediksi-card-head{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(54,227,255,.1)}
.prediksi-card-head h3{margin:0;font-size:15px;line-height:1.25;color:#fff;font-weight:700;letter-spacing:.04em;
  background:linear-gradient(90deg,#fff 60%,#9ec6ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.prediksi-meta-line{display:flex;justify-content:space-between;font-size:11px;color:rgba(180,210,255,.7);margin-bottom:10px}
.prediksi-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.prediksi-meta-grid div,.prediksi-invest-box{
  padding:9px 11px;border-radius:12px;
  background:rgba(54,227,255,.04);
  border:1px solid rgba(54,227,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.prediksi-meta-grid span,.prediksi-invest-box span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:rgba(54,227,255,.75);margin-bottom:3px}
.prediksi-stat-line{display:flex;align-items:center;justify-content:space-between;padding:7px 11px;border-radius:10px;
  background:rgba(162,69,255,.06);border:1px solid rgba(162,69,255,.14);margin-bottom:6px}
.prediksi-label{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:rgba(162,69,255,.85);font-weight:700}
.prediksi-dual-line{display:flex;justify-content:space-between;gap:6px;margin-bottom:6px}
.prediksi-dual-line span{flex:1;display:flex;align-items:center;gap:5px;padding:7px 10px;border-radius:10px;
  background:rgba(54,227,255,.04);border:1px solid rgba(54,227,255,.1);font-size:13px;font-weight:700;color:#e8f5ff}
.prediksi-invest-label{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,200,80,.8);font-weight:700;margin:8px 0 5px}
.prediksi-invest{background:rgba(255,180,40,.05);border:1px solid rgba(255,180,40,.14);border-radius:12px;padding:8px 11px;
  font-size:13px;color:#fff;line-height:1.7;font-weight:600;letter-spacing:.02em}
.prediksi-meta-grid strong,.prediksi-invest-box p{display:block;margin:0;color:#fff;font-size:14px;line-height:1.5;word-break:break-word;font-weight:700}
.prediksi-invest-box{margin-top:8px}
@media (max-width: 860px){.prediksi-card-grid{grid-template-columns:1fr}}
@media (max-width: 640px){.site-tab-chip{padding:7px 10px;font-size:11px}.site-tab-chip img,.site-tab-fallback{width:22px;height:22px}.prediksi-card{padding:14px;border-radius:18px}.prediksi-card-head h3{font-size:16px}.prediksi-meta-grid{gap:8px}.prediksi-meta-grid strong,.prediksi-invest-box p{font-size:13px}}


/* Prediksi admin compact */
.prediksi-admin-compact-grid{align-items:start}
.prediksi-compact-form .field textarea{min-height:auto;resize:vertical}
.prediksi-mini-status .stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.prediksi-edit-list{display:flex;flex-direction:column;gap:12px}
.prediksi-mini-card{padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:10px}
.prediksi-mini-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.prediksi-mini-card-grid input{min-width:0}
@media (max-width: 900px){.prediksi-mini-card-grid{grid-template-columns:1fr}.prediksi-mini-status .stats-grid{grid-template-columns:1fr}}


/* Prediksi merged latest */
.prediksi-main{gap:14px}.prediksi-banner-panel{margin-bottom:0}.prediksi-section{padding:12px 14px;border-radius:18px}.prediksi-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.prediksi-section-head h2{margin:0;font-size:15px;letter-spacing:.04em}.prediksi-section-head span{font-size:11px;opacity:.7}.prediksi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.prediksi-card{background:rgba(9,16,32,.78);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px 11px;display:grid;gap:7px;box-shadow:0 6px 16px rgba(0,0,0,.14)}.prediksi-card h3{margin:0;font-size:13px;line-height:1.25;font-weight:700;letter-spacing:.03em}.prediksi-meta-line,.prediksi-dual-line,.prediksi-stat-line{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;line-height:1.25}.prediksi-label{opacity:.72;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.prediksi-stat-line strong,.prediksi-dual-line span,.prediksi-meta-line span{font-size:11px}.prediksi-invest{display:grid;gap:3px;font-size:11px;line-height:1.3;font-weight:600;letter-spacing:.06em}.prediksi-empty-box{padding:16px 12px;border:1px dashed rgba(255,255,255,.16);border-radius:14px;font-size:12px;opacity:.76}.prediksi-site-slider{position:relative;overflow:hidden}.prediksi-site-slide{display:none;animation:prediksiFade .35s ease}.prediksi-site-slide.is-active{display:block}.prediksi-site-title{font-size:13px;font-weight:700;letter-spacing:.06em;margin-bottom:8px;color:#f4d36a}.prediksi-site-dots{display:flex;justify-content:center;gap:7px;margin-top:10px}.prediksi-dot{width:7px;height:7px;border-radius:999px;border:0;background:rgba(255,255,255,.22);padding:0}.prediksi-dot.is-active{background:#f4d36a;transform:scale(1.15)}.prediksi-disclaimer{padding:10px 14px;text-align:center}.prediksi-disclaimer p{margin:2px 0;font-size:11px;letter-spacing:.06em;font-weight:700}.prediksi-page-shell .footer{margin-top:2px}@keyframes prediksiFade{from{opacity:.18;transform:translateX(10px)}to{opacity:1;transform:none}}
@media (max-width: 860px){.prediksi-grid{grid-template-columns:1fr}.prediksi-section{padding:11px 12px}.prediksi-card{padding:9px 10px}.prediksi-card h3{font-size:12px}.prediksi-meta-line,.prediksi-dual-line,.prediksi-stat-line,.prediksi-invest,.prediksi-section-head span,.prediksi-disclaimer p{font-size:10.5px}.prediksi-section-head h2{font-size:13px}}


/* Prediksi frontend compact rebuild */
.prediksi-section--tight{padding:14px 14px 16px}.prediksi-section-head.compact{margin-bottom:10px}.prediksi-section-head.compact h2{font-size:16px;margin:0}
.prediksi-slider-wrap{position:relative;padding:0 40px}.prediksi-pair-slider-window,.prediksi-site-window{position:relative;min-height:1px}
.prediksi-pair-slide,.prediksi-site-slide{display:none}.prediksi-pair-slide.is-active,.prediksi-site-slide.is-active{display:block}
.prediksi-grid--compact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.prediksi-card--compact{padding:10px 11px;border-radius:14px;border:1px solid rgba(120,170,255,.12);background:linear-gradient(180deg,rgba(8,20,39,.92),rgba(6,14,28,.94));box-shadow:none;min-width:0}
.prediksi-card--compact h3{margin:0 0 6px;font-size:13px;line-height:1.25;color:#fff;letter-spacing:.02em}
.prediksi-card--compact .prediksi-meta-line,.prediksi-card--compact .prediksi-dual-line,.prediksi-card--compact .prediksi-stat-line{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:11.5px;line-height:1.35;margin-bottom:5px;color:#d5e5ff}
.prediksi-card--compact .prediksi-stat-line strong,.prediksi-card--compact .prediksi-dual-line span,.prediksi-card--compact .prediksi-invest div{font-size:11.5px}
.prediksi-card--compact .prediksi-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#7fa7ff}
.prediksi-card--compact .prediksi-invest{margin-top:6px;padding-top:6px;border-top:1px solid rgba(120,170,255,.1);display:grid;gap:3px}.prediksi-card--compact .prediksi-invest div{color:#eff5ff;word-spacing:3px;line-height:1.35}
.prediksi-site-title{margin:0 0 10px;font-size:14px;font-weight:700;color:#fff}.prediksi-info-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;color:#8fb7ff;text-decoration:none}.prediksi-info-link:hover{color:#d6e5ff}
.prediksi-nav{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:999px;border:1px solid rgba(120,170,255,.2);background:rgba(6,15,31,.88);color:#eef4ff;display:flex;align-items:center;justify-content:center;z-index:2;cursor:pointer}.prediksi-nav--prev{left:0}.prediksi-nav--next{right:0}.prediksi-site-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}.prediksi-dot{width:7px;height:7px;border-radius:999px;border:0;background:rgba(140,170,225,.32);padding:0}.prediksi-dot.is-active{background:#8fb7ff}
@media (max-width: 768px){.prediksi-slider-wrap{padding:0 34px}.prediksi-grid--compact{grid-template-columns:1fr}.prediksi-card--compact{padding:9px 10px}.prediksi-card--compact h3{font-size:12.5px}.prediksi-card--compact .prediksi-meta-line,.prediksi-card--compact .prediksi-dual-line,.prediksi-card--compact .prediksi-stat-line,.prediksi-card--compact .prediksi-invest div{font-size:11px}}


/* Prediksi compact polish */
.prediksi-updated-time{font-size:11px;line-height:1.25;color:rgba(255,255,255,.62);margin-top:3px}
.prediksi-site-title-wrap{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.prediksi-card--compact{padding:10px 11px;border-radius:14px}
.prediksi-card--compact h3{font-size:13px;line-height:1.2;margin:0 0 6px;font-weight:700;letter-spacing:.02em}
.prediksi-meta-line,.prediksi-dual-line,.prediksi-stat-line{font-size:11.5px;line-height:1.3}
.prediksi-meta-line{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px;color:rgba(255,255,255,.72)}
.prediksi-stat-line,.prediksi-dual-line{display:flex;justify-content:space-between;gap:8px;margin-bottom:5px}
.prediksi-label{color:rgba(255,255,255,.62);font-weight:600}
.prediksi-invest-label{font-size:11.5px;color:rgba(255,255,255,.72);margin-top:4px;margin-bottom:4px}
.prediksi-invest{display:grid;gap:3px;font-size:11.5px;line-height:1.28;color:#fff}
.prediksi-grid--compact{gap:10px}
.prediksi-slider-wrap{padding-inline:34px}
.prediksi-nav{width:28px;height:28px;top:42%;font-size:13px}
.prediksi-empty-box{font-size:12px;padding:12px}
.prediksi-pair-slide,.prediksi-site-slide{transition:opacity .45s ease, transform .45s ease}
@media (max-width: 768px){
  .prediksi-slider-wrap{padding-inline:28px}
  .prediksi-card--compact{padding:9px 10px}
  .prediksi-card--compact h3{font-size:12.5px}
  .prediksi-meta-line,.prediksi-dual-line,.prediksi-stat-line,.prediksi-invest,.prediksi-invest-label,.prediksi-updated-time{font-size:11px}
}


.prediksi-grid--single{grid-template-columns:1fr}
@media (max-width: 768px){
  .prediksi-grid--compact{grid-template-columns:1fr}
  .prediksi-slider-wrap{padding-inline:30px}
  .prediksi-site-dots{margin-top:8px}
}


/* === HOMEPAGE ABOUT SOCIAL BUTTONS === */
.about-box{gap:10px}
.about-social-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.about-social-btn{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:6px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#e8f1ff;text-decoration:none;font-size:11px;line-height:1.1;font-weight:700;letter-spacing:.02em;transition:transform .15s ease,background-color .15s ease,border-color .15s ease}
.about-social-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.26)}
.compact-social-admin-row{align-items:end}
.compact-social-admin-row .compact-toggle{min-height:42px;justify-content:space-between;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.compact-social-admin-row .compact-toggle span{font-size:12px}
@media (max-width:720px){
  .about-social-links{gap:7px;margin-top:9px}
  .about-social-btn{padding:6px 10px;min-height:28px;font-size:10.5px}
  .compact-social-admin-row{grid-template-columns:1fr}
}


/* === HOMEPAGE HEADER SOCIAL SECTION === */
.header-social-section{display:none}
.header-social-inline{display:none}
.hsi-btn{display:none}

/* ── Social divider — bare icons between header and ticker ── */
.social-divider-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:4px 0;
}
.sdr-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  min-height:unset;
  padding:0;
  border-radius:6px;
  border:none;
  background:transparent;
  color:rgba(255,255,255,.35);
  text-decoration:none;
  transition:color .15s,transform .15s,opacity .15s;
  opacity:.5;
}
.sdr-btn:hover{
  opacity:1;
  color:var(--cyan);
  transform:translateY(-1px);
}
.sdr-btn::before{display:inline-block !important;width:13px;height:13px;flex:0 0 13px;opacity:1}
.sdr-btn:hover::before{filter:brightness(0) saturate(100%) invert(80%) sepia(60%) saturate(400%) hue-rotate(155deg)}
.header-social-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:30px;
  padding:6px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:#e8f1ff;
  text-decoration:none;
  font-size:11px;
  line-height:1.1;
  font-weight:700;
  letter-spacing:.02em;
  transition:transform .15s ease,background-color .15s ease,border-color .15s ease;
}
.header-social-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.26);
}
.header-social-btn .social-btn-icon{
  width:15px;
  height:15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 15px;
}
.header-social-btn .social-btn-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.header-social-btn:has(.social-btn-icon)::before{
  display:none !important;
}
/* Social icons via SVG inline data-uri — mapped by data-social attribute */
.header-social-btn::before{
  content:'';
  display:none;
  width:15px;
  height:15px;
  flex:0 0 15px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  filter:brightness(0) invert(1);
  opacity:.85;
}
.header-social-btn[data-social="facebook"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E")}
.header-social-btn[data-social="telegram"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.198 2.433a2.242 2.242 0 0 0-1.022.215l-16.5 6.875a2.25 2.25 0 0 0 .126 4.17l3.918 1.26 1.48 4.795c.163.53.636.9 1.19.935.554.033 1.07-.277 1.297-.782L13 17.5l4.5 3.5c.386.3.9.386 1.366.224.466-.163.806-.563.896-1.054l2.997-16.5a2.25 2.25 0 0 0-1.561-2.237z'/%3E%3C/svg%3E")}
.header-social-btn[data-social="whatsapp"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/%3E%3C/svg%3E")}
.header-social-btn[data-social="instagram"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z' fill='%23070e1d'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5' stroke='%23070e1d' stroke-width='2'/%3E%3C/svg%3E")}
.header-social-btn[data-social="tiktok"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 0 0-.79-.05 6.34 6.34 0 0 0-6.34 6.34 6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.33-6.34V8.69a8.18 8.18 0 0 0 4.78 1.52V6.76a4.85 4.85 0 0 1-1.01-.07z'/%3E%3C/svg%3E")}
/* YouTube, Twitter/X, Line fallback icons */
.header-social-btn[data-social="youtube"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46a2.78 2.78 0 0 0-1.95 1.96A29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58A2.78 2.78 0 0 0 3.41 19.6C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.95A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z'/%3E%3Cpolygon points='9.75 15.02 15.5 12 9.75 8.98 9.75 15.02' fill='%23070e1d'/%3E%3C/svg%3E")}
.header-social-btn[data-social="twitter"]::before,.header-social-btn[data-social="x"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.741l7.73-8.835L2.25 2.25h6.94l4.262 5.632 5.792-5.632zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E")}
.header-social-btn[data-social="line"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.281.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314'/%3E%3C/svg%3E")}
@media (max-width: 768px){
  .header-social-section{
    margin-top:8px;
    padding:8px 10px;
  }
  .header-social-links{
    gap:6px;
    flex-wrap:nowrap;
    justify-content:center;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .header-social-links::-webkit-scrollbar{display:none}
  .header-social-btn{
    min-height:34px;
    min-width:34px;
    width:34px;
    padding:0;
    flex:0 0 34px;
    border-radius:50%;
  }
  /* Hide text label on mobile */
  .header-social-btn .social-btn-label{
    display:none;
  }
  .header-social-btn .social-btn-icon{
    width:16px;
    height:16px;
  }
  /* Show icon on mobile */
  .header-social-btn::before{
    display:block;
  }
}


/* Prediksi aligned to managed page shell */
.prediksi-layout{display:grid;gap:14px}
.prediksi-layout .page-banner-panel{margin-bottom:0}
.prediksi-layout .prediksi-section{padding:14px 14px 16px}
.prediksi-layout .prediksi-disclaimer{padding:10px 14px;text-align:center}


/* ============================================================
   LAYOUT FIX v5 — Global balance, consistent buttons/containers,
   improved site page network posts & post detail styling
   ============================================================ */

/* ── 1. GLOBAL BUTTON / CTA SYSTEM ── */
/* Unify all primary and ghost CTAs to a consistent sizing system */
.site-main-cta,
.site-ghost-cta,
.cta-chip,
.pagination-link,
.popup-primary-btn,
.popup-secondary-btn,
.back-btn,
.nav-btn {
  box-sizing: border-box;
}

/* Consistent CTA button sizing */
.site-main-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: #07111f;
  background: linear-gradient(135deg, #9be9ff 0%, #7bffd5 100%);
  border: none;
  letter-spacing: .01em;
  transition: opacity .15s, transform .15s;
}
.site-main-cta:hover { opacity: .88; transform: translateY(-1px); }

.site-ghost-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: #e6f1ff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  letter-spacing: .01em;
  transition: background .15s, transform .15s;
}
.site-ghost-cta:hover { background: rgba(255,255,255,.11); transform: translateY(-1px); }

/* Pagination link consistent with ghost CTA style */
.pagination-link {
  min-height: 40px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #eaf9ff;
  background: rgba(54,227,255,.10);
  border: 1px solid rgba(54,227,255,.22);
  transition: background .15s, transform .15s;
  text-decoration: none;
}
.pagination-link:hover { background: rgba(54,227,255,.18); transform: translateY(-1px); }
.pagination-status { font-size: 12px; color: #b8cce8; }

/* ── 2. SITE PAGE — Brand strip layout balance ── */
.site-page-clean .site-brand-strip {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-radius: 18px;
}
@media (min-width: 640px) {
  .site-page-clean .site-brand-strip {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.site-page-clean .site-brand-id {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.site-page-clean .site-brand-copy h2 {
  font-size: 20px;
  margin: 0 0 4px;
  line-height: 1.25;
}
.site-page-clean .site-brand-copy p {
  margin: 0;
  font-size: 13px;
  color: #c0d0ea;
  line-height: 1.6;
}
.site-page-clean .site-brand-actions {
  display: flex;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.site-page-clean .site-main-cta,
.site-page-clean .site-ghost-cta {
  min-width: 130px;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .site-page-clean .site-brand-actions {
    flex-direction: column;
    width: 100%;
  }
  .site-page-clean .site-main-cta,
  .site-page-clean .site-ghost-cta {
    width: 100%;
    min-width: 0;
  }
}

/* ── 3. SECTION HEADS — consistent sizing across site page ── */
.site-page-clean .clean-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.site-page-clean .clean-head h2 {
  margin: 0;
  font-size: 13px;
  font-family: "Orbitron", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #e8f5ff;
}
.site-page-clean .network-page-note {
  font-size: 11px;
  color: #7a94b8;
  letter-spacing: .04em;
}

/* ── 4. NETWORK BLOG PANEL — full redesign for site page ── */
.site-page-clean .network-blog-panel {
  padding: 18px;
  border-radius: 18px;
}

.site-page-clean .network-blog-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 720px) {
  .site-page-clean .network-blog-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── 5. POST CARD — clean card layout ── */
.site-page-clean .network-blog-item {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(10,18,38,.60);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 6px 24px rgba(0,0,0,.22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.site-page-clean .network-blog-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.34), 0 0 0 1px rgba(54,227,255,.12);
}

/* Post image — full width thumbnail button */
.site-page-clean .network-blog-thumb,
.site-page-clean .network-blog-thumb.toggle-trigger {
  display: block;
  width: 100%;
  background: #050810;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  padding: 0;
  text-align: left;
  line-height: 0;
  position: relative;
}
.site-page-clean .network-blog-thumb::after,
.site-page-clean .network-blog-thumb.toggle-trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(5,10,24,.55) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.site-page-clean .network-blog-thumb:hover::after,
.site-page-clean .network-blog-thumb.toggle-trigger:hover::after {
  opacity: 1;
}
.site-page-clean .network-blog-thumb img,
.site-page-clean .network-blog-thumb.toggle-trigger img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
  background: #050810;
  border-radius: 0;
  transition: transform .22s ease;
}
.site-page-clean .network-blog-thumb:hover img,
.site-page-clean .network-blog-thumb.toggle-trigger:hover img {
  transform: scale(1.03);
}

/* Post body — text area below image */
.site-page-clean .network-blog-body {
  display: flex;
  flex-direction: column;
  padding: 14px 16px 0;
  flex: 1;
}

/* Meta / date badge */
.site-page-clean .network-blog-meta {
  order: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  color: #7a9ac0;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 0;
  margin-bottom: 6px;
}

/* Post title — prominent, readable */
.site-page-clean .network-blog-item h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  color: #f0f8ff;
  word-break: break-word;
  padding: 0;
}

@media (min-width: 640px) {
  .site-page-clean .network-blog-item h3 {
    font-size: 16px;
  }
  .site-page-clean .network-blog-thumb img,
  .site-page-clean .network-blog-thumb.toggle-trigger img {
    height: 220px;
  }
}

/* "Detail" toggle button — pill style */
.site-page-clean .network-detail-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  margin: 0 0 14px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(54,227,255,.25);
  background: rgba(54,227,255,.08);
  color: #9fe5ff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: .03em;
  transition: background .15s, border-color .15s, transform .15s;
}
.site-page-clean .network-detail-toggle::before {
  content: "▶";
  font-size: 8px;
  transition: transform .15s;
}
.site-page-clean .network-detail-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}
.site-page-clean .network-detail-toggle:hover {
  background: rgba(54,227,255,.15);
  border-color: rgba(54,227,255,.4);
  transform: translateY(-1px);
}

/* Detail panel */
.site-page-clean .network-blog-details {
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 0;
  font-size: 13px;
  line-height: 1.75;
  color: #cdd9f0;
}
.site-page-clean .network-blog-details p,
.site-page-clean .network-blog-details ul,
.site-page-clean .network-blog-details ol {
  margin: 0 0 10px;
}
.site-page-clean .network-blog-details p:last-child,
.site-page-clean .network-blog-details ul:last-child,
.site-page-clean .network-blog-details ol:last-child {
  margin-bottom: 0;
}

/* post-detail-text inside detail panel */
.site-page-clean .post-detail-text {
  font-size: 13px;
  line-height: 1.8;
  color: #cdd9f0;
  word-break: break-word;
}
.site-page-clean .post-detail-text > *:first-child { margin-top: 0; }
.site-page-clean .post-detail-text > *:last-child { margin-bottom: 0; }
.site-page-clean .post-detail-text img {
  max-width: 100%;
  border-radius: 10px;
  margin: 10px 0;
}

/* "Open site" link inside detail */
.site-page-clean .network-blog-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 9px 18px;
  border-radius: 10px;
  background: rgba(54,227,255,.10);
  border: 1px solid rgba(54,227,255,.22);
  color: #9fe5ff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .02em;
  transition: background .15s, transform .15s;
}
.site-page-clean .network-blog-link:hover {
  background: rgba(54,227,255,.18);
  transform: translateY(-1px);
}
.site-page-clean .network-blog-link::after {
  content: "↗";
  font-size: 13px;
}

/* ── 6. PAGINATION — consistent with above ── */
.site-page-clean .site-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

/* ── 7. SITE INFO PANEL ── */
.site-page-clean .site-info-panel {
  padding: 18px;
  border-radius: 18px;
}
.site-page-clean .site-info-list {
  gap: 12px;
}
.site-page-clean .site-info-item {
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.site-page-clean .site-info-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.site-page-clean .site-info-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #7a94b8;
}
.site-page-clean .site-info-value {
  font-size: 13px;
  font-weight: 600;
  color: #f0f8ff;
  line-height: 1.5;
  word-break: break-word;
}

/* ── 8. COMPACT MAIN LAYOUT — responsive 2-col on desktop ── */
@media (min-width: 860px) {
  .site-page-clean .compact-site-main {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    align-items: start;
    gap: 16px;
  }
  .site-page-clean .hero-featured-slider,
  .site-page-clean .network-blog-panel {
    grid-column: 1 / -1;
  }
}

/* ── 9. RESPONSIVE MOBILE POLISH ── */
@media (max-width: 640px) {
  .site-page-clean .network-blog-panel,
  .site-page-clean .site-brand-strip,
  .site-page-clean .site-info-panel {
    padding: 14px 12px;
    border-radius: 14px;
  }
  .site-page-clean .network-blog-item h3 {
    font-size: 14px;
  }
  .site-page-clean .network-blog-thumb img,
  .site-page-clean .network-blog-thumb.toggle-trigger img {
    height: 170px;
  }
  .site-page-clean .network-blog-details {
    font-size: 12px;
    padding: 12px 12px 14px;
  }
  .site-page-clean .post-detail-text {
    font-size: 12px;
  }
  .site-page-clean .clean-head h2 {
    font-size: 11px;
  }
}


/* ============================================================
   FIX v5.1 — 1:1 network activity images + consistent home btn
   ============================================================ */

/* ── 1. HOMEPAGE network card images → 1:1 square ── */
.mini-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #050810;
}
.mini-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #050810;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease, transform .4s ease;
}
.mini-slide.active { opacity: 1; pointer-events: auto; }
.site-promo-card.inner:hover .mini-slide { transform: scale(1.03); }

/* ── 2. SITE PAGE network post images → 1:1 square ── */
.site-page-clean .network-blog-thumb img,
.site-page-clean .network-blog-thumb.toggle-trigger img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  background: #050810;
  border-radius: 0;
  transition: transform .22s ease;
}

/* ── 3. PAITO home button — identical to all other subpage pages ── */
/* Ensure .subpage-topbar and .subpage-home-link are fully consistent
   across paito, prediksi, rtp, bukti-jp, shio, room-result, jadwal */
.subpage-topbar {
  display: flex;
  align-items: center;
  padding: 0 0 6px;
  margin-bottom: 2px;
}
.subpage-home-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  color: #dbeafe;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  transition: background .18s, border-color .18s, transform .15s;
  letter-spacing: .01em;
  white-space: nowrap;
}
.subpage-home-link:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
  transform: translateX(-2px);
}
@media (max-width: 768px) {
  .subpage-home-link {
    font-size: 11px;
    padding: 6px 12px 6px 9px;
  }
}


/* FIX v5.2 removed — paito.php now uses page-shell + managed-page-layout
   matching all other menu pages, so no special overrides needed. */


/* ============================================================
   DAUNGROUP THEME v6 — Brand colors from main logo
   Cyan #00eeff · Blue #0055ff · Magenta #ee00ff · Lavender #cc88ff
   Only touches color, glow, gradient, effects — zero layout change
   ============================================================ */

/* ── 1. ROOT TOKENS — richer brand palette ── */
:root {
  --brand-cyan:    #00eeff;
  --brand-blue:    #2255ff;
  --brand-magenta: #ee00ff;
  --brand-lavender:#bb77ff;
  --brand-teal:    #00ccdd;

  /* override existing tokens to match brand */
  --cyan:          #00eeff;
  --pink:          #ee00ff;
  --purple:        #bb77ff;
  --stroke:        rgba(0,200,255,.16);
  --stroke-hi:     rgba(0,238,255,.32);
  --shadow-glow:   0 0 28px rgba(0,180,255,.16);

  /* card background — slightly warmer deep blue tint */
  --bg-card: linear-gradient(155deg, rgba(8,16,40,.92), rgba(4,8,22,.96));
}

/* ── 2. BODY BACKGROUND — keep dark, enrich with brand glow ── */
body {
  background:
    radial-gradient(ellipse 60% 40% at 10% 0%,   rgba(0,180,255,.10)  0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 90% 5%,   rgba(180,0,255,.12)  0%, transparent 50%),
    radial-gradient(ellipse 40% 28% at 50% 95%,  rgba(0,238,255,.07)  0%, transparent 55%),
    radial-gradient(ellipse 30% 20% at 80% 55%,  rgba(238,0,255,.06)  0%, transparent 50%),
    linear-gradient(180deg, #020408 0%, #040810 50%, #020408 100%);
}

/* ── 3. GLASS CARDS — brand-tinted borders + richer depth ── */
.glass {
  background: var(--bg-card);
  border: 1px solid rgba(0,200,255,.14);
  box-shadow: 0 8px 30px rgba(0,0,0,.42), 0 0 0 0.5px rgba(0,180,255,.06) inset;
  backdrop-filter: blur(16px);
}

/* ── 4. RUNNING TEXT — cyan brand color ── */
.marquee span {
  color: rgba(0,220,255,.65);
  letter-spacing: .14em;
}

/* ── 5. HEADER BAR — subtle cyan-to-magenta top border ── */
.site-header-bar {
  border-top: 1.5px solid transparent;
  background-image:
    linear-gradient(var(--bg-card), var(--bg-card)),
    linear-gradient(90deg, rgba(0,238,255,.5), rgba(238,0,255,.5));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-color: transparent;
}

/* ── 6. BRAND TEXT in header ── */
.brand-text :is(h1,.brand-site-title) {
  background: linear-gradient(90deg, #00eeff 0%, #bb77ff 60%, #ee00ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 7. NAV BUTTONS ── */
.nav-btn {
  color: rgba(200,235,255,.80);
  background: rgba(0,180,255,.05);
  border: 1px solid rgba(0,180,255,.12);
}
.nav-btn:hover {
  color: #fff;
  background: rgba(0,200,255,.10);
  border-color: rgba(0,238,255,.28);
  box-shadow: 0 0 12px rgba(0,200,255,.14);
}
.nav-btn.active {
  color: #00eeff;
  background: rgba(0,238,255,.12);
  border-color: rgba(0,238,255,.30);
  box-shadow: 0 0 16px rgba(0,238,255,.18);
}

/* ── 8. SITE TABS STRIP ── */
.site-tabs-wrap {
  border-top: 1px solid rgba(0,200,255,.10);
  border-bottom: 1px solid rgba(180,0,255,.10);
}

/* ── 9. SITE TAB LABELS ── */
.site-tab-label,
body .site-tab-label {
  color: rgba(200,240,255,.88) !important;
  text-shadow: 0 0 8px rgba(0,200,255,.25);
}

/* ── 10. SITE TAB CARDS — logo glow effect for dark/black logos ── */
body .site-tab-card {
  position: relative;
}
body .site-tab-card::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  background: radial-gradient(ellipse at center, rgba(0,180,255,.18) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
body .site-tab:hover .site-tab-card::after,
body .site-tab.active .site-tab-card::after {
  opacity: 1;
}

/* Logo images: luminosity-based brightening for dark logos.
   Uses drop-shadow + brightness so even black logos glow cyan */
body .site-tab img {
  filter:
    drop-shadow(0 0 6px rgba(0,200,255,.45))
    drop-shadow(0 0 2px rgba(180,80,255,.25))
    brightness(1.08)
    contrast(1.04) !important;
  transition: filter .2s, transform .2s !important;
}
body .site-tab:hover img,
body .site-tab.active img {
  filter:
    drop-shadow(0 0 10px rgba(0,220,255,.65))
    drop-shadow(0 0 4px rgba(200,60,255,.35))
    brightness(1.14)
    contrast(1.06) !important;
  transform: scale(1.16) !important;
}

/* ── 11. NETWORK ACTIVITY CARD logos (site-badge) ── */
body .site-badge {
  filter:
    drop-shadow(0 0 5px rgba(0,200,255,.40))
    drop-shadow(0 0 2px rgba(180,60,255,.20))
    brightness(1.06) !important;
  transition: filter .2s !important;
  background: transparent !important;
  border: none !important;
}
body .site-promo-card.inner:hover .site-badge {
  filter:
    drop-shadow(0 0 10px rgba(0,220,255,.60))
    drop-shadow(0 0 4px rgba(200,60,255,.30))
    brightness(1.12) !important;
}

/* ── 12. SITE BRAND LOGO on site page ── */
body .site-brand-logo {
  filter:
    drop-shadow(0 0 8px rgba(0,200,255,.45))
    drop-shadow(0 0 3px rgba(180,60,255,.25))
    brightness(1.08) !important;
  background: transparent !important;
  border: none !important;
}

/* ── 13. MAIN LOGO in header ── */
.main-logo,
.about-logo {
  filter:
    drop-shadow(0 0 10px rgba(0,200,255,.40))
    drop-shadow(0 0 4px rgba(180,60,255,.22));
}

/* ── 14. SECTION HEADS ── */
.section-head :is(h1,h2) {
  background: linear-gradient(90deg, #00eeff 0%, #cc99ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 15. BADGE TAG ── */
.badge-tag {
  background: linear-gradient(90deg, rgba(0,238,255,.18), rgba(238,0,255,.18));
  color: rgba(180,240,255,.90);
  border: 1px solid rgba(0,200,255,.20);
}

/* ── 16. SITE MAIN CTA ── */
.site-main-cta {
  background: linear-gradient(135deg, #00eeff 0%, #55aaff 50%, #bb77ff 100%);
  color: #020810;
  box-shadow: 0 4px 18px rgba(0,180,255,.28);
}
.site-main-cta:hover {
  box-shadow: 0 6px 24px rgba(0,200,255,.40);
}

/* ── 17. PAGINATION LINKS ── */
.pagination-link {
  background: rgba(0,200,255,.10);
  border-color: rgba(0,220,255,.24);
  color: #aaeeff;
}
.pagination-link:hover {
  background: rgba(0,220,255,.18);
}

/* ── 18. NETWORK DETAIL TOGGLE ── */
.site-page-clean .network-detail-toggle {
  background: rgba(0,200,255,.09);
  border-color: rgba(0,220,255,.26);
  color: #88ddff;
}
.site-page-clean .network-detail-toggle:hover {
  background: rgba(0,220,255,.16);
  border-color: rgba(0,238,255,.42);
}

/* ── 19. NETWORK BLOG LINK ── */
.site-page-clean .network-blog-link {
  background: rgba(0,200,255,.10);
  border-color: rgba(0,220,255,.24);
  color: #88ddff;
}
.site-page-clean .network-blog-link:hover {
  background: rgba(0,220,255,.18);
}

/* ── 20. CARD CORNER LINK ── */
.card-corner-link {
  background: rgba(0,200,255,.10);
  border-color: rgba(0,220,255,.18);
  color: #00eeff;
}
.card-corner-link:hover {
  background: rgba(0,220,255,.22);
}

/* ── 21. SITE INFO BULLET ── */
.site-info-bullet {
  background: #00eeff;
  box-shadow: 0 0 0 3px rgba(0,238,255,.12);
}

/* ── 22. SITE INFO LABEL ── */
.site-page-clean .site-info-label {
  color: #5abbe8;
}
.site-page-clean .site-info-value {
  color: #e8f8ff;
}

/* ── 23. FOOTER ── */
.footer {
  border-top: 1px solid rgba(0,180,255,.12);
}
.footer-links a {
  color: rgba(180,230,255,.70);
}
.footer-links a:hover {
  color: #00eeff;
}

/* ── 24. SUBPAGE HOME LINK ── */
.subpage-home-link {
  background: rgba(0,180,255,.07);
  border-color: rgba(0,200,255,.18);
  color: #aaddff;
}
.subpage-home-link:hover {
  background: rgba(0,200,255,.13);
  border-color: rgba(0,220,255,.30);
}

/* ── 25. HEADER SOCIAL BUTTONS ── */
.header-social-btn {
  background: rgba(0,180,255,.07);
  border-color: rgba(0,200,255,.18);
  color: #cceeff;
}
.header-social-btn:hover {
  background: rgba(0,200,255,.14);
  border-color: rgba(0,230,255,.32);
}

/* ── 26. ABOUT SOCIAL BUTTONS ── */
.about-social-btn {
  background: rgba(0,180,255,.06);
  border-color: rgba(0,200,255,.16);
  color: #cceeff;
}
.about-social-btn:hover {
  background: rgba(0,200,255,.12);
  border-color: rgba(0,230,255,.28);
}

/* ── 27. BACK BUTTON ── */
.back-btn {
  background: rgba(0,180,255,.08);
  border: 1px solid rgba(0,200,255,.18);
  color: #aaddff;
}
.back-btn:hover {
  background: rgba(0,200,255,.18);
}

/* ── 28. EMPTY STATE BOXES — visible on dark bg ── */
.empty-state-box,
.top-banner-empty,
.mini-empty-state {
  color: #8bbcce;
  background: rgba(0,180,255,.04);
  border-color: rgba(0,200,255,.18);
}

/* ── 29. MARKET NAV LINKS (paito) ── */
.paito-market-nav-link {
  border-color: rgba(0,180,255,.22) !important;
  color: #b0dff5 !important;
}
.paito-market-nav-link.active,
.paito-market-nav-link:hover {
  background: linear-gradient(135deg, rgba(0,180,255,.20), rgba(120,60,255,.20)) !important;
  border-color: rgba(0,220,255,.38) !important;
  color: #00eeff !important;
}

/* ── 30. SECONDARY BUTTON (UP/BOTTOM etc) ── */
.secondary-btn {
  background: rgba(0,180,255,.10) !important;
  border: 1px solid rgba(0,200,255,.22) !important;
  color: #b0e8ff !important;
}
.secondary-btn:hover {
  background: rgba(0,200,255,.18) !important;
}

/* ── 31. FEATURED SECTION DOTS ── */
#heroDots .dot,
.dots .dot {
  background: rgba(0,220,255,.35);
}
#heroDots .dot.active,
.dots .dot.active {
  background: #00eeff;
  box-shadow: 0 0 0 2px rgba(0,238,255,.22);
}

/* ── 32. NETWORK CAROUSEL DOTS ── */
.network-dot {
  background: rgba(0,180,255,.28) !important;
}
.network-dot.active {
  background: #00eeff !important;
  box-shadow: 0 0 6px rgba(0,238,255,.40) !important;
}

/* ── 33. NETWORK ARROW BUTTONS ── */
.network-arrow {
  background: rgba(0,180,255,.10) !important;
  border: 1px solid rgba(0,200,255,.22) !important;
  color: #00eeff !important;
}
.network-arrow:hover {
  background: rgba(0,220,255,.20) !important;
}

/* ── 34. SLIDE COUNTER ── */
.slide-counter {
  color: rgba(0,220,255,.65);
}

/* ── 35. SITE TAB FALLBACK BADGES (no logo) ── */
.site-tab-fallback,
body .site-tab-fallback {
  background: linear-gradient(135deg, rgba(0,160,255,.22), rgba(100,0,200,.30)) !important;
  color: #aaeeff !important;
  border: 1px solid rgba(0,200,255,.20) !important;
  box-shadow: 0 0 10px rgba(0,180,255,.18) !important;
}

/* ── 36. SITE BADGE FALLBACK ── */
.site-badge-fallback,
body .site-badge-fallback {
  background: linear-gradient(135deg, rgba(0,160,255,.22), rgba(100,0,200,.30)) !important;
  color: #aaeeff !important;
  border: 1px solid rgba(0,200,255,.20) !important;
  box-shadow: 0 0 8px rgba(0,180,255,.15) !important;
}

/* ── 37. ABOUT BOX ── */
.about-copy {
  color: #cce5f8;
}

/* ── 38. POST DETAIL TEXT ── */
.post-detail-text,
.site-page-clean .post-detail-text {
  color: #c8dcf2;
}

/* ── 39. SITE BRAND COPY description ── */
.site-page-clean .site-brand-copy p {
  color: #a8c8e8;
}

/* ── 40. NETWORK BLOG META (date) ── */
.site-page-clean .network-blog-meta time {
  color: #5abbe8;
}


/* ============================================================
   FIX v6.1 — Unclip site-tab logos (overflow:visible everywhere)
   ============================================================ */

/* Blast every overflow:hidden on the tab chain with !important.
   Also add vertical padding to the wrap so scaled/hovered tabs
   are never clipped by the container edge. */

.site-tabs-wrap,
body .site-tabs-wrap {
  overflow: visible !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.site-tabs,
body .site-tabs {
  overflow: visible !important;
  padding: 8px 4px !important;
}

.site-tab,
body .site-tab {
  overflow: visible !important;
}

body .site-tab-card {
  overflow: visible !important;
}

/* Prevent the ::before shimmer from creating a clip context */
.site-tab::before,
.site-tab::after,
body .site-tab::before,
body .site-tab::after {
  overflow: visible !important;
}


/* ============================================================
   SITE TICKER STRIP — infinite auto-scroll, drag/touch enabled
   Replaces .site-tabs-wrap / .site-tabs / .site-tab
   ============================================================ */

/* ── Outer wrap ── */
/* ══════════════════════════════════════════════════════
   SITE LOGO STRIP  –  fit-to-content, centered, auto-scroll
   ══════════════════════════════════════════════════════ */

/* Outer wrapper: JS sets --ticker-fit-width; shrinks to one set of logos, centered */
.site-ticker-wrap {
  position: relative;
  width: var(--ticker-fit-width, 100%);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* no border, no background, no box-shadow — strip is borderless */
  overflow: hidden;
  /* CSS mask: logos dissolve into nothing at both edges */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,.15) 4%,
    rgba(0,0,0,.55) 9%,
    black 18%,
    black 82%,
    rgba(0,0,0,.55) 91%,
    rgba(0,0,0,.15) 96%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,.15) 4%,
    rgba(0,0,0,.55) 9%,
    black 18%,
    black 82%,
    rgba(0,0,0,.55) 91%,
    rgba(0,0,0,.15) 96%,
    transparent 100%
  );
  transition: width .3s ease;
}

/* ── Scrolling track ── */
.site-ticker-track {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 16px;
  width: max-content;
  will-change: transform;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.site-ticker-track:active { cursor: grabbing; }

/* ── Each item ── */
.site-ticker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-width: 80px;
  padding: 10px 12px 11px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  text-decoration: none;
  color: inherit;
  transition: border-color .22s, background .22s, box-shadow .22s, transform .22s;
  position: relative;
  overflow: visible;
  /* entrance: fade + slide up, staggered per item via JS --item-i */
  animation: siteItemIn .55s cubic-bezier(.22,.68,0,1.2) both;
  animation-delay: calc(var(--item-i, 0) * 60ms);
}
@keyframes siteItemIn {
  from { opacity: 0; transform: translateY(18px) scale(.88); }
  to   { opacity: 1; transform: translateY(0)   scale(1);   }
}

.site-ticker-item:hover {
  border-color: rgba(0,220,255,.38);
  background: linear-gradient(180deg, rgba(0,180,255,.14), rgba(80,0,200,.12));
  box-shadow: 0 0 22px rgba(0,180,255,.22), 0 8px 24px rgba(0,0,0,.32);
  transform: translateY(-4px) scale(1.04);
  z-index: 2;
}

/* ── Logo card ── */
.site-ticker-card {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
}

/* ── Logo image ── */
.site-ticker-card img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  display: block;
  overflow: visible;
  filter:
    drop-shadow(0 0 6px rgba(0,200,255,.45))
    drop-shadow(0 0 2px rgba(180,80,255,.25))
    brightness(1.08);
  transition: filter .22s, transform .22s;
}
.site-ticker-item:hover .site-ticker-card img {
  filter:
    drop-shadow(0 0 14px rgba(0,220,255,.80))
    drop-shadow(0 0 6px rgba(200,60,255,.45))
    brightness(1.18);
  transform: scale(1.12);
}

/* ── Fallback badge ── */
.site-ticker-fallback {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .04em;
  background: linear-gradient(135deg, rgba(0,160,255,.22), rgba(100,0,200,.30));
  color: #aaeeff;
  border: 1px solid rgba(0,200,255,.24);
  box-shadow: 0 0 10px rgba(0,180,255,.18);
  transition: box-shadow .22s, transform .22s;
}
.site-ticker-item:hover .site-ticker-fallback {
  box-shadow: 0 0 20px rgba(0,200,255,.45);
  transform: scale(1.10);
}

/* ── Label ── */
.site-ticker-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(180,225,255,.72);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .22s;
}
.site-ticker-item:hover .site-ticker-label {
  color: #00eeff;
  text-shadow: 0 0 8px rgba(0,238,255,.5);
}

/* fade-left / fade-right divs removed — dissolve handled by CSS mask-image on wrapper */
.site-ticker-fade-left,
.site-ticker-fade-right { display: none; }

/* ── Mobile ── */
@media (max-width: 640px) {
  .site-ticker-track { gap: 12px; padding: 10px 10px; }
  .site-ticker-item { min-width: 68px; padding: 8px 8px 9px; border-radius: 13px; gap: 6px; }
  .site-ticker-card, .site-ticker-card img { width: 52px; height: 52px; }
  .site-ticker-fallback { width: 46px; height: 46px; font-size: 13px; }
  .site-ticker-label { font-size: 8px; max-width: 68px; }
  .site-ticker-fade-left, .site-ticker-fade-right { width: 28px; }
}

/* Brand-block as homepage link */
a.brand-block {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.brand-block:hover {
  opacity: 0.88;
}
a.brand-block .brand-text :is(h1,.brand-site-title),
a.brand-block .brand-text p {
  color: inherit;
}


/* ═══════════════════════════════════════════════════════
   PREDIKSI LUXURY REDESIGN
   ═══════════════════════════════════════════════════════ */

/* Unified panel */
.prediksi-unified-panel{padding:0;overflow:hidden;border-radius:var(--r-xl)}

/* ── Tab bar ── */
.prediksi-tab-bar{
  display:grid;grid-template-columns:1fr 1fr;
  border-bottom:1px solid rgba(54,227,255,.12);
}
.prediksi-tab{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:14px 10px 12px;
  background:transparent;border:none;cursor:pointer;
  border-bottom:2px solid transparent;
  transition:background .2s,border-color .2s;
  color:#7a9dbf;
}
.prediksi-tab.is-active{
  color:#fff;
  border-bottom-color:var(--cyan);
  background:linear-gradient(180deg,rgba(54,227,255,.06),transparent);
}
.prediksi-tab:hover:not(.is-active){background:rgba(255,255,255,.03);color:#b0cce0}
.prediksi-tab-label{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.prediksi-tab.is-active .prediksi-tab-label{
  background:linear-gradient(90deg,#36e3ff,#b06aff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.prediksi-tab-time{font-size:10px;opacity:.65;font-weight:400}

/* ── Tab panels ── */
.prediksi-tab-panel{display:none;padding:16px 14px 18px}
.prediksi-tab-panel.is-active{display:block}

/* ── Luxury Slider wrapper ── */
.prediksi-luxury-slider{position:relative;user-select:none}
.plux-window{
  overflow:hidden;border-radius:16px;
  cursor:grab;
}
.plux-window:active{cursor:grabbing}
.plux-track{position:relative;min-height:200px}

/* ── Single card slide ── */
.plux-card{
  display:none;
  animation:pluxFadeIn .35s ease;
  padding:16px;border-radius:20px;
  background:linear-gradient(150deg,rgba(10,20,46,.97),rgba(6,13,30,.99));
  border:1px solid rgba(54,227,255,.2);
  box-shadow:0 0 0 1px rgba(54,227,255,.05),0 4px 28px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);
  position:relative;overflow:hidden;
}
.plux-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#36e3ff,#a245ff,#ff4bdd);
}
.plux-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(54,227,255,.04) 0%,transparent 55%);
}
.plux-card.is-active{display:block}
@keyframes pluxFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── Arrow buttons ── */
.plux-arrow{
  display:none; /* hidden — drag/swipe only; dots + counter used instead */
}

/* ── Counter ── */
.plux-counter{
  text-align:center;font-size:11px;color:rgba(180,210,255,.5);
  margin-top:10px;letter-spacing:.06em;
  padding:4px 12px;display:inline-block;
  background:rgba(54,227,255,.04);border:1px solid rgba(54,227,255,.1);
  border-radius:99px;margin-inline:auto;
}

/* ── Dots ── */
.plux-dots{display:flex;justify-content:center;gap:5px;margin-top:8px;flex-wrap:wrap}
.plux-dot{
  width:6px;height:6px;border-radius:999px;border:none;padding:0;
  background:rgba(255,255,255,.18);cursor:pointer;
  transition:width .25s,background .25s;
}
.plux-dot.is-active{
  background:linear-gradient(90deg,var(--cyan),var(--pink));
  width:20px;box-shadow:0 0 6px rgba(54,227,255,.4);
}

/* ════════════════════════════
   LUXURY PREDIKSI CARD (pcard)
   ════════════════════════════ */
.pcard-header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  margin-bottom:12px;padding-bottom:10px;
  border-bottom:1px solid rgba(54,227,255,.12);
}
.pcard-market-name{
  font-size:15px;font-weight:700;letter-spacing:.05em;color:#fff;
  text-transform:uppercase;
  background:linear-gradient(90deg,#fff 60%,#7ad8ff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.pcard-badges{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.pcard-badge{
  font-size:10px;font-weight:600;letter-spacing:.05em;
  padding:3px 8px;border-radius:99px;
}
.pcard-badge--closed{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  color:#a0b8d0;
}
.pcard-badge--result{
  background:linear-gradient(90deg,rgba(54,227,255,.15),rgba(176,106,255,.15));
  border:1px solid rgba(54,227,255,.25);
  color:#7adcff;
}

.pcard-body{display:flex;flex-direction:column;gap:8px}

/* BBFS row */
.pcard-bbfs{
  background:linear-gradient(135deg,rgba(54,227,255,.08),rgba(176,106,255,.06));
  border:1px solid rgba(54,227,255,.18);
  border-radius:12px;padding:10px 14px;
  display:flex;align-items:center;justify-content:space-between;
}
.pcard-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pcard-lbl{
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(140,190,255,.7);
}
.pcard-val{color:#e8f4ff;font-size:13.5px;font-weight:700;letter-spacing:.04em}
.pcard-val--bbfs{
  font-size:15px;
  background:linear-gradient(90deg,#36e3ff,#b06aff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  letter-spacing:.08em;
}

/* AI + CB split row */
.pcard-row-split{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;overflow:hidden;
}
.pcard-half{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:9px 8px;
}
.pcard-half .pcard-lbl{font-size:10px}
.pcard-half .pcard-val{font-size:14px}
.pcard-divider{width:1px;height:36px;background:rgba(255,255,255,.1)}

/* Twin row */
.pcard-twin{
  background:rgba(255,200,60,.06);
  border:1px solid rgba(255,200,60,.16);
  border-radius:12px;padding:9px 14px;
}
.pcard-val--twin{
  color:#ffe587;font-size:14px;letter-spacing:.06em;
}

/* Invest block */
.pcard-invest-block{
  background:linear-gradient(135deg,rgba(8,16,36,.8),rgba(12,22,44,.8));
  border:1px solid rgba(120,170,255,.14);
  border-radius:12px;padding:10px 14px;
}
.pcard-invest-label{
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(140,190,255,.6);margin-bottom:6px;
}
.pcard-invest-lines{
  display:flex;flex-wrap:wrap;gap:4px 8px;
}
.pcard-invest-lines span{
  font-size:12.5px;color:#c8e0ff;font-weight:600;letter-spacing:.04em;
  background:rgba(54,227,255,.07);
  border:1px solid rgba(54,227,255,.12);
  border-radius:6px;padding:2px 7px;
}

/* Prediksi info link */
.prediksi-info-link{
  display:block;text-align:center;margin-top:12px;
  padding:10px 20px;border-radius:99px;
  background:linear-gradient(90deg,rgba(54,227,255,.12),rgba(176,106,255,.12));
  border:1px solid rgba(54,227,255,.25);
  color:#7adcff;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-decoration:none;transition:background .2s,box-shadow .2s;
}
.prediksi-info-link:hover{
  background:linear-gradient(90deg,rgba(54,227,255,.22),rgba(176,106,255,.2));
  box-shadow:0 0 16px rgba(54,227,255,.2);
}

@media(max-width:480px){
  .pcard-market-name{font-size:13px}
  .pcard-val--bbfs{font-size:13px}
  .pcard-val{font-size:12.5px}
  .prediksi-tab-label{font-size:10px;letter-spacing:.07em}
}


/* ── Luxury Pola Slot section header — overridden in rtp.php inline style ── */
.rtp-pattern-section{
  border:1px solid rgba(54,227,255,.12);
  background:linear-gradient(155deg,rgba(7,14,32,.96),rgba(5,10,24,.98));
}
.rtp-pattern-carousel{
  scrollbar-width:thin;
  scrollbar-color:rgba(54,227,255,.25) transparent;
}
.rtp-pattern-carousel::-webkit-scrollbar{height:4px}
.rtp-pattern-carousel::-webkit-scrollbar-track{background:transparent}
.rtp-pattern-carousel::-webkit-scrollbar-thumb{background:rgba(54,227,255,.25);border-radius:99px}

/* ── Luxury Jadwal section ── */
.jadwal-panel{
  border:1px solid rgba(54,227,255,.1);
  background:linear-gradient(155deg,rgba(7,14,32,.96),rgba(5,10,24,.98));
}

/* ── Prediksi page luxury tab container ── */
.prediksi-tab-btns{
  background:rgba(5,12,28,.6);
  border:1px solid rgba(54,227,255,.14);
  border-radius:14px;padding:4px;
}
.prediksi-tab-btn{
  border-radius:10px;font-weight:700;letter-spacing:.05em;font-size:12px;
  transition:all .2s;
}
.prediksi-tab-btn.is-active{
  background:linear-gradient(90deg,rgba(54,227,255,.18),rgba(162,69,255,.18));
  border:1px solid rgba(54,227,255,.3);
  color:#36e3ff;
  box-shadow:0 0 12px rgba(54,227,255,.15);
}


/* ===== Buku Mimpi ===== */
.buku-mimpi-page-panel{display:flex;flex-direction:column;gap:18px}
.buku-mimpi-copy{color:#dbe7ff;line-height:1.75;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px 18px}
.buku-mimpi-table-shell{display:flex;flex-direction:column;gap:14px}
.buku-mimpi-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.buku-mimpi-search-card{display:grid;gap:8px;flex:1 1 420px}
.buku-mimpi-search-card label{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#8fd2ff}
.buku-mimpi-search-input-wrap{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:18px;background:linear-gradient(180deg,rgba(8,17,33,.96),rgba(9,20,40,.94));border:1px solid rgba(137,191,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 34px rgba(0,0,0,.18)}
.buku-mimpi-search-icon{font-size:18px;line-height:1;color:#9fdcff;flex:0 0 auto}
.buku-mimpi-search-input{flex:1 1 auto;min-width:0;background:transparent;border:none;outline:none;color:#f3f8ff;font-size:14px;font-weight:600}
.buku-mimpi-search-input::placeholder{color:#88a9cb}
.buku-mimpi-clear-search{flex:0 0 auto;border:none;border-radius:999px;padding:8px 13px;background:linear-gradient(180deg,#ffd76d,#ff9d28);color:#07101b;font-weight:900;cursor:pointer}
.buku-mimpi-search-meta{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);color:#e8f2ff;font-weight:800;white-space:nowrap}
.buku-mimpi-table-wrap{overflow:auto;max-height:70vh;position:relative;background:linear-gradient(180deg,#09111f 0%,#0b1426 48%,#0a1322 100%);border:1px solid rgba(120,170,255,.16);border-radius:24px;padding:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 24px 46px rgba(0,0,0,.2);-webkit-overflow-scrolling:touch}
.buku-mimpi-table{width:100%;min-width:880px;border-collapse:separate;border-spacing:0;background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,.01));border-radius:18px;overflow:hidden}
.buku-mimpi-table thead th{position:sticky;top:0;z-index:3;padding:15px 16px;background:linear-gradient(180deg,#172945,#0f1e35);box-shadow:inset 0 -1px 0 rgba(255,255,255,.06),0 10px 24px rgba(0,0,0,.22);color:#f4f8ff;font-size:12px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;text-align:left;border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px)}
.buku-mimpi-table thead th:first-child{border-top-left-radius:14px}
.buku-mimpi-table thead th:last-child{border-top-right-radius:14px}
.buku-mimpi-table tbody tr{transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease}
.buku-mimpi-table tbody tr:nth-child(odd){background:rgba(255,255,255,.022)}
.buku-mimpi-table tbody tr:nth-child(even){background:rgba(94,140,210,.05)}
.buku-mimpi-table tbody tr:hover{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(155,210,255,.08)}
.buku-mimpi-table tbody td{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06);color:#edf5ff;vertical-align:top;font-size:13px;line-height:1.58}
.buku-mimpi-table tbody tr:last-child td{border-bottom:none}
.buku-mimpi-table tbody td:first-child{width:84px;font-weight:900;color:#ffe08a;font-variant-numeric:tabular-nums}
.buku-mimpi-table tbody td:nth-child(2){min-width:340px}
.buku-mimpi-table tbody td:nth-child(3){width:120px;font-weight:900;color:#9bd2ff;white-space:nowrap}
.buku-mimpi-table tbody td:last-child{min-width:220px;font-weight:800;color:#fff3c2;font-variant-numeric:tabular-nums}
.buku-mimpi-empty{display:flex;align-items:center;justify-content:center;padding:24px 18px;margin-top:12px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px dashed rgba(143,210,255,.24);color:#d9ebff;font-weight:700}
.buku-mimpi-admin-wrap{display:grid;gap:10px}
.buku-mimpi-admin-grid{display:grid;grid-template-columns:90px minmax(280px,1.8fr) 140px minmax(180px,1fr) 90px;gap:10px;align-items:start}
.buku-mimpi-admin-head{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#8dc7ff;padding:0 2px}
.buku-mimpi-admin-row input,.buku-mimpi-admin-row textarea{width:100%}
.buku-mimpi-admin-row textarea{min-height:72px;resize:vertical}
.buku-mimpi-admin-row{padding:10px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02))}
.buku-mimpi-admin-actions{display:flex;justify-content:flex-end}
.buku-mimpi-mini-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
@media(max-width:900px){
  .buku-mimpi-admin-grid{grid-template-columns:1fr}
  .buku-mimpi-admin-head{display:none}
  .buku-mimpi-admin-row{gap:8px}
  .buku-mimpi-admin-actions{justify-content:flex-start}
}
@media(max-width:820px){
  .buku-mimpi-copy{padding:14px 15px;border-radius:14px;font-size:13px}
  .buku-mimpi-toolbar{align-items:stretch}
  .buku-mimpi-search-card{flex-basis:100%}
  .buku-mimpi-search-input-wrap{padding:10px 12px;gap:8px;border-radius:16px}
  .buku-mimpi-search-input{font-size:13px}
  .buku-mimpi-clear-search{padding:7px 12px;font-size:11px}
  .buku-mimpi-search-meta{min-height:42px;padding:0 12px;font-size:12px}
  .buku-mimpi-table-wrap{padding:8px;border-radius:18px;max-height:64vh}
  .buku-mimpi-table{min-width:720px}
  .buku-mimpi-table thead th{padding:12px 12px;font-size:10px}
  .buku-mimpi-table tbody td{padding:11px 12px;font-size:12px;line-height:1.5}
  .buku-mimpi-table tbody td:first-child{width:68px}
  .buku-mimpi-table tbody td:nth-child(2){min-width:260px}
  .buku-mimpi-table tbody td:nth-child(3){width:96px}
  .buku-mimpi-table tbody td:last-child{min-width:170px}
}

/* Buku Mimpi stability patch */
.buku-mimpi-table-wrap{padding:0;overflow:auto;max-height:68vh;background:linear-gradient(180deg,#08111f 0%,#0a1322 100%)}
.buku-mimpi-table{min-width:860px;border-spacing:0;table-layout:fixed}
.buku-mimpi-table colgroup col:nth-child(1){width:96px}
.buku-mimpi-table colgroup col:nth-child(2){width:auto}
.buku-mimpi-table colgroup col:nth-child(3){width:130px}
.buku-mimpi-table colgroup col:nth-child(4){width:240px}
.buku-mimpi-table thead th{top:0;position:sticky;z-index:5;background:#15263f;background-image:linear-gradient(180deg,#182b48,#101d31);box-shadow:0 1px 0 rgba(255,255,255,.08),0 12px 24px rgba(0,0,0,.28)}
.buku-mimpi-table tbody td{background:transparent;word-break:break-word;overflow-wrap:anywhere}
.buku-mimpi-table tbody tr{isolation:isolate}
.buku-mimpi-table tbody td:first-child,.buku-mimpi-table tbody td:nth-child(3),.buku-mimpi-table tbody td:last-child{white-space:normal}
.buku-mimpi-table tbody td:nth-child(2){white-space:normal}
@media (max-width: 768px){.buku-mimpi-table-wrap{max-height:62vh}.buku-mimpi-table{min-width:760px}.buku-mimpi-toolbar{gap:10px}.buku-mimpi-search-input-wrap{flex-wrap:nowrap}}


/* ===== Buku Mimpi user performance pagination ===== */
.buku-mimpi-search-card{margin:0}
.buku-mimpi-search-card[method="get"]{display:grid;gap:8px}
.buku-mimpi-search-submit,.buku-mimpi-clear-link{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:999px;padding:8px 14px;font-weight:900;text-decoration:none;cursor:pointer}
.buku-mimpi-search-submit{background:linear-gradient(180deg,#73d8ff,#3798ff);color:#07101b}
.buku-mimpi-clear-link{background:linear-gradient(180deg,#ffd76d,#ff9d28);color:#07101b}
.buku-mimpi-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.buku-mimpi-page-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:14px;background:linear-gradient(180deg,#162842,#0f1d31);border:1px solid rgba(137,191,255,.16);color:#f4f8ff;font-weight:800;text-decoration:none;box-shadow:0 12px 24px rgba(0,0,0,.16)}
.buku-mimpi-page-btn.is-disabled{opacity:.45;pointer-events:none}
.buku-mimpi-page-info{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);color:#e8f2ff;font-weight:800}
@media (max-width:768px){
  .buku-mimpi-search-input-wrap{flex-wrap:wrap}
  .buku-mimpi-search-input{width:100%;flex:1 1 100%}
  .buku-mimpi-search-submit,.buku-mimpi-clear-link{min-height:38px;padding:0 13px;font-size:12px}
  .buku-mimpi-pagination{justify-content:center}
}


/* Buku Mimpi UI refinement */
.buku-mimpi-page-panel{gap:16px}
.buku-mimpi-copy{padding:16px 18px;border-radius:18px}
.buku-mimpi-toolbar{align-items:stretch;justify-content:flex-start}
.buku-mimpi-search-card{max-width:860px;flex:1 1 620px;margin:0;display:grid;gap:8px}
.buku-mimpi-search-card label{margin:0 0 4px 2px;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#8fd2ff}
.buku-mimpi-search-input-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 12px;border-radius:16px;background:linear-gradient(180deg,rgba(8,17,33,.94),rgba(9,20,40,.9));border:1px solid rgba(137,191,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.buku-mimpi-search-input{display:block;width:100%;min-width:0;min-height:42px;padding:0 14px;border-radius:12px;border:1px solid rgba(137,191,255,.14);background:#091426;color:#f3f8ff;font-size:14px;font-weight:600;outline:none;-webkit-appearance:none;appearance:none}
.buku-mimpi-search-input:focus{border-color:rgba(115,216,255,.85);box-shadow:0 0 0 3px rgba(55,152,255,.14)}
.buku-mimpi-search-input::placeholder{color:#89a9cb;font-weight:500}
.buku-mimpi-search-icon{display:none}
.buku-mimpi-search-submit,.buku-mimpi-clear-link{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border:none;border-radius:12px;font-size:12px;line-height:1;font-weight:900;white-space:nowrap;text-decoration:none;cursor:pointer}
.buku-mimpi-search-submit{background:linear-gradient(180deg,#73d8ff,#3798ff);color:#07101b}
.buku-mimpi-clear-link{background:linear-gradient(180deg,#1d2f4f,#14233a);border:1px solid rgba(137,191,255,.16);color:#f4f8ff}
.buku-mimpi-table-wrap{padding:10px 10px 0;border-radius:20px;max-height:68vh;background:linear-gradient(180deg,#08111f 0%,#0a1322 100%);border:1px solid rgba(120,170,255,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 18px 36px rgba(0,0,0,.16)}
.buku-mimpi-table{width:100%;min-width:780px;table-layout:fixed;border-collapse:separate;border-spacing:0;background:transparent}
.buku-mimpi-table col.buku-mimpi-col-no{width:56px}
.buku-mimpi-table col.buku-mimpi-col-keterangan{width:auto}
.buku-mimpi-table col.buku-mimpi-col-jenis{width:116px}
.buku-mimpi-table col.buku-mimpi-col-nomor{width:170px}
.buku-mimpi-table thead th{position:sticky;top:0;z-index:5;padding:13px 14px;background:linear-gradient(180deg,#172945,#101d31);color:#f4f8ff;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;text-align:left;border-bottom:1px solid rgba(255,255,255,.08)}
.buku-mimpi-table thead th:first-child{border-top-left-radius:14px;text-align:center;padding-left:8px;padding-right:8px}
.buku-mimpi-table thead th:last-child{border-top-right-radius:14px}
.buku-mimpi-table tbody tr:nth-child(odd){background:rgba(255,255,255,.018)}
.buku-mimpi-table tbody tr:nth-child(even){background:rgba(94,140,210,.04)}
.buku-mimpi-table tbody tr:hover{background:rgba(255,255,255,.05)}
.buku-mimpi-table tbody td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06);color:#edf5ff;vertical-align:top;font-size:13px;line-height:1.55;word-break:break-word;overflow-wrap:anywhere}
.buku-mimpi-table tbody td:first-child{width:56px;max-width:56px;text-align:center;padding-left:8px;padding-right:8px;font-size:12px;font-weight:900;color:#ffe08a;font-variant-numeric:tabular-nums;white-space:nowrap}
.buku-mimpi-table tbody td:nth-child(2){padding-left:12px;padding-right:12px}
.buku-mimpi-table tbody td:nth-child(3){font-weight:800;color:#9bd2ff;white-space:nowrap}
.buku-mimpi-table tbody td:last-child{font-weight:800;color:#fff3c2;font-variant-numeric:tabular-nums}
.buku-mimpi-empty{display:flex;align-items:center;justify-content:center;padding:24px 18px;margin-top:12px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px dashed rgba(143,210,255,.24);color:#d9ebff;font-weight:700}
.buku-mimpi-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.buku-mimpi-page-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:14px;background:linear-gradient(180deg,#162842,#0f1d31);border:1px solid rgba(137,191,255,.16);color:#f4f8ff;font-weight:800;text-decoration:none;box-shadow:0 12px 24px rgba(0,0,0,.16)}
.buku-mimpi-page-btn.is-disabled{opacity:.45;pointer-events:none}
.buku-mimpi-page-info{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);color:#e8f2ff;font-weight:800}
@media (max-width: 768px){
  .buku-mimpi-page-panel{gap:14px}
  .buku-mimpi-copy{padding:14px 15px;border-radius:16px;font-size:13px;line-height:1.7}
  .buku-mimpi-toolbar{gap:8px}
  .buku-mimpi-search-card{max-width:none;flex:1 1 100%}
  .buku-mimpi-search-card label{font-size:11px;letter-spacing:.07em;margin-bottom:2px}
  .buku-mimpi-search-input-wrap{grid-template-columns:1fr auto;gap:8px;padding:10px;border-radius:14px}
  .buku-mimpi-search-input{grid-column:1 / -1;min-height:40px;font-size:13px;padding:0 12px}
  .buku-mimpi-search-submit,.buku-mimpi-clear-link{min-height:38px;padding:0 14px;font-size:12px;border-radius:11px}
  .buku-mimpi-table-wrap{padding:8px 8px 0;border-radius:18px;max-height:62vh}
  .buku-mimpi-table{min-width:620px}
  .buku-mimpi-table col.buku-mimpi-col-no{width:44px}
  .buku-mimpi-table col.buku-mimpi-col-jenis{width:82px}
  .buku-mimpi-table col.buku-mimpi-col-nomor{width:118px}
  .buku-mimpi-table thead th{padding:11px 10px;font-size:10px}
  .buku-mimpi-table thead th:first-child,.buku-mimpi-table tbody td:first-child{width:44px;max-width:44px;padding-left:6px;padding-right:6px}
  .buku-mimpi-table tbody td{padding:10px 10px;font-size:12px;line-height:1.45}
  .buku-mimpi-table tbody td:nth-child(2){padding-left:10px;padding-right:10px}
  .buku-mimpi-pagination{justify-content:center}
}

/* ============================================================
   UNIFIED LAYOUT & BANNER CONSISTENCY — ALL MENU PAGES
   Deep-fix: container size, banner aspect-ratio, object-fit
   Applies to: buku-mimpi, shio, paito, jadwal-pasaran,
   prediksi, rtp, room-result, bukti-jp, page
   ============================================================ */

/* ── 1. Universal page-shell sizing ── */
.page-shell,
.subpage-shell,
.room-result-shell,
.rtp-shell {
  width: min(calc(100% - 24px), 1280px) !important;
  margin: 10px auto 28px !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── 2. Inner layout containers — same max-width on every page ── */
.managed-page-layout,
.rtp-page-main,
.room-result-main,
.paito-main,
.subpage-main {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  min-width: 0 !important;
  display: grid;
  gap: 12px;
}

/* ── 3. All panel widths full — no rogue centering overrides ── */
.managed-page-panel,
.content-panel.glass,
.rtp-hero,
.rtp-provider-section,
.rtp-games-section,
.rtp-pattern-section,
.room-result-copy-panel,
.room-result-links-panel,
.room-live-feed,
.shio-page-panel,
.jadwal-panel,
.paito-page-panel,
.paito-page-panel.paito-market-single-panel,
.prediksi-unified-panel,
.prediksi-banner-panel,
.bukti-jp-shell .content-panel,
.buku-mimpi-page-panel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

/* ── 4. Universal banner wrapper ── */
.banner-aspect-box,
.buku-mimpi-banner-wrap .banner-aspect-box,
.shio-banner-wrap .banner-aspect-box,
.paito-banner-wrap .banner-aspect-box,
.jadwal-banner-wrap .banner-aspect-box,
.rtp-banner-link.banner-aspect-box,
.rtp-hero > .banner-aspect-box {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 6 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #050810 !important;
}

/* ── 5. Universal banner image — every page same fit ── */
.page-header-banner,
.banner-aspect-box img,
.banner-aspect-box .rtp-banner-image,
.prediksi-banner-image,
.shio-banner,
.jadwal-page-banner,
.bukti-jp-banner-image,
.buku-mimpi-banner,
.rtp-banner-image {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* ── 6. Prediksi banner — fix its standalone img (not inside .banner-aspect-box) ── */
.prediksi-banner-panel .banner-aspect-box .prediksi-banner-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 0 !important;
}

/* ── 7. Shio / Paito / Jadwal banner wrappers full-width ── */
.shio-banner-wrap,
.paito-banner-wrap,
.jadwal-banner-wrap,
.buku-mimpi-banner-wrap {
  display: block !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}

/* ── 8. RTP banner — force same aspect as others ── */
.rtp-hero > .banner-aspect-box,
.rtp-banner-link.banner-aspect-box {
  max-height: none !important;
}
.rtp-banner-image {
  max-height: none !important;
}

/* ── 9. Bukti JP banner panel align with others ── */
.bukti-jp-banner-panel {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.bukti-jp-banner-panel .banner-aspect-box {
  aspect-ratio: 16 / 6 !important;
}
.bukti-jp-banner-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: unset !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 0 !important;
}

/* ── 10. Room-result banner section match ── */
.room-result-main .page-banner-panel {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

/* ── 11. Subpage topbar consistent on all pages ── */
.subpage-topbar {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

/* ── Responsive: tablet ── */
@media (max-width: 900px) {
  .page-shell,
  .subpage-shell,
  .room-result-shell,
  .rtp-shell {
    width: calc(100% - 20px) !important;
    margin: 8px auto 22px !important;
  }
  .banner-aspect-box,
  .buku-mimpi-banner-wrap .banner-aspect-box,
  .shio-banner-wrap .banner-aspect-box,
  .paito-banner-wrap .banner-aspect-box,
  .jadwal-banner-wrap .banner-aspect-box,
  .rtp-banner-link.banner-aspect-box {
    aspect-ratio: 16 / 6 !important;
    border-radius: 14px !important;
  }
}

/* ── Responsive: mobile ── */
@media (max-width: 600px) {
  .page-shell,
  .subpage-shell,
  .room-result-shell,
  .rtp-shell {
    width: calc(100% - 14px) !important;
    margin: 6px auto 18px !important;
    gap: 10px;
  }
  .managed-page-layout,
  .rtp-page-main,
  .room-result-main,
  .paito-main,
  .subpage-main {
    gap: 10px !important;
  }
  .managed-page-panel,
  .rtp-hero,
  .rtp-provider-section,
  .rtp-games-section,
  .rtp-pattern-section,
  .room-result-copy-panel,
  .room-result-links-panel,
  .shio-page-panel,
  .jadwal-panel,
  .paito-page-panel,
  .prediksi-unified-panel,
  .buku-mimpi-page-panel {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .banner-aspect-box,
  .buku-mimpi-banner-wrap .banner-aspect-box,
  .shio-banner-wrap .banner-aspect-box,
  .paito-banner-wrap .banner-aspect-box,
  .jadwal-banner-wrap .banner-aspect-box,
  .rtp-banner-link.banner-aspect-box {
    aspect-ratio: 16 / 6 !important;
    border-radius: 12px !important;
  }
}
/* ── END UNIFIED LAYOUT & BANNER CONSISTENCY ── */

/* ============================================================
   LIVE STREAM SECTION — homepage + admin
   ============================================================ */

/* ── Section wrapper ── */
.live-stream-section {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Header row ── */
.live-stream-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.live-stream-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.live-stream-title-row h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #f0f6ff;
}

/* ── Live pulsing dot ── */
.live-badge-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 0 0 rgba(255,59,59,.6);
  animation: livePulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,59,59,.7); }
  60%  { box-shadow: 0 0 0 8px rgba(255,59,59,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,59,0); }
}

/* ── External link CTA ── */
.live-stream-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  color: #f0f8ff;
  background: linear-gradient(135deg, #1a2e50, #22406e);
  border: 1px solid rgba(100,180,255,.22);
  transition: background .18s, border-color .18s;
  white-space: nowrap;
}
.live-stream-cta:hover {
  background: linear-gradient(135deg, #22406e, #2e5490);
  border-color: rgba(100,180,255,.45);
}

/* ── Layout: player only or player + chat ── */
.live-stream-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.live-stream-layout.has-chat {
  grid-template-columns: 1fr 300px;
  align-items: stretch;
}

/* ── Player aspect box 16:9 ── */
.live-stream-player-wrap {
  min-width: 0;
}
.live-stream-aspect {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #030810;
}
.live-stream-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ── Chat panel ── */
.live-stream-chat-wrap {
  min-width: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #050d1a;
  border: 1px solid rgba(255,255,255,.07);
  min-height: 320px;
}
.live-stream-chat-iframe {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: none;
  display: block;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .live-stream-layout.has-chat {
    grid-template-columns: 1fr;
  }
  .live-stream-chat-wrap {
    min-height: 280px;
  }
  .live-stream-chat-iframe {
    min-height: 280px;
  }
}
@media (max-width: 600px) {
  .live-stream-section {
    padding: 12px;
    gap: 10px;
  }
  .live-stream-aspect {
    border-radius: 10px;
  }
}

/* ── Admin panel ── */
.live-stream-panel .field-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: rgba(200,220,255,.5);
}
.live-stream-sidebar-link.status-on .status-pill {
  background: rgba(74,222,128,.18);
  color: #4ade80;
  border: 1px solid rgba(74,222,128,.3);
}
/* ── END LIVE STREAM ── */

/* ── Live Stream: viewer count badge + stream title ── */
.live-viewer-count {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,59,59,.15);
  border: 1px solid rgba(255,59,59,.3);
  color: #ffaaaa;
  letter-spacing: .04em;
}
.live-stream-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.live-stream-title-text {
  font-size: 12px;
  color: rgba(200,220,255,.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}
/* Hide section while JS is checking — prevent flash */
.live-stream-section.is-checking { display: none !important; }

/* ── Admin: live status check ── */
.live-status-check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.small-btn {
  padding: 5px 12px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}
.live-status-result {
  font-size: 13px;
  font-weight: 600;
}
.live-status-result.is-live   { color: #4ade80; }
.live-status-result.is-offline { color: rgba(200,220,255,.5); }
.live-status-result.checking  { color: #fbbf24; }
.live-status-result.error     { color: #f87171; }
/* ── END additions ── */
.page-banner-panel,
.buku-mimpi-banner-wrap,
.shio-banner-wrap,
.paito-banner-wrap,
.jadwal-banner-wrap,
.prediksi-banner-panel,
.site-banner-panel,
.rtp-hero {
  width: 100%;
  min-width: 0;
}

.page-banner-panel,
.prediksi-banner-panel,
.site-banner-panel {
  padding: 10px;
  overflow: hidden;
}

.page-banner-panel .banner-aspect-box,
.buku-mimpi-banner-wrap .banner-aspect-box,
.shio-banner-wrap .banner-aspect-box,
.paito-banner-wrap .banner-aspect-box,
.jadwal-banner-wrap .banner-aspect-box,
.prediksi-banner-panel .banner-aspect-box,
.site-banner-wrap .banner-aspect-box,
.rtp-banner-link.banner-aspect-box,
.rtp-hero > .banner-aspect-box {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 6;
  min-width: 0;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(7, 12, 24, .92), rgba(5, 9, 18, .98));
  padding: 10px;
}

.page-header-banner,
.banner-aspect-box img,
.banner-aspect-box .rtp-banner-image,
.prediksi-banner-image,
.bukti-jp-banner-image,
.buku-mimpi-banner,
.shio-banner,
.jadwal-page-banner,
.site-featured-banner-image,
.rtp-banner-image,
.paito-banner-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: contain;
  object-position: center center;
  border-radius: inherit;
}

.bukti-jp-banner-panel .banner-aspect-box,
.room-result-main .page-banner-panel .banner-aspect-box {
  aspect-ratio: 16 / 6;
}

.rtp-banner-link,
.rtp-banner-link.banner-aspect-box {
  display: block;
  width: 100%;
  text-decoration: none;
}

.site-banner-panel .site-banner-wrap,
.paito-banner-wrap,
.jadwal-banner-wrap,
.shio-banner-wrap,
.buku-mimpi-banner-wrap {
  width: 100%;
  min-width: 0;
}

@media (max-width: 820px) {
  .page-banner-panel,
  .prediksi-banner-panel,
  .site-banner-panel {
    padding: 8px;
  }

  .page-banner-panel .banner-aspect-box,
  .buku-mimpi-banner-wrap .banner-aspect-box,
  .shio-banner-wrap .banner-aspect-box,
  .paito-banner-wrap .banner-aspect-box,
  .jadwal-banner-wrap .banner-aspect-box,
  .prediksi-banner-panel .banner-aspect-box,
  .site-banner-wrap .banner-aspect-box,
  .rtp-banner-link.banner-aspect-box,
  .rtp-hero > .banner-aspect-box {
    aspect-ratio: 16 / 7;
    border-radius: 14px;
    padding: 8px;
  }
}

@media (max-width: 560px) {
  .page-banner-panel .banner-aspect-box,
  .buku-mimpi-banner-wrap .banner-aspect-box,
  .shio-banner-wrap .banner-aspect-box,
  .paito-banner-wrap .banner-aspect-box,
  .jadwal-banner-wrap .banner-aspect-box,
  .prediksi-banner-panel .banner-aspect-box,
  .site-banner-wrap .banner-aspect-box,
  .rtp-banner-link.banner-aspect-box,
  .rtp-hero > .banner-aspect-box {
    aspect-ratio: 16 / 8;
    border-radius: 12px;
    padding: 6px;
  }
}

/* ===== V7 DIRECT BUKTI-JP BANNER ADOPTION ===== */
.buku-mimpi-banner-wrap.bukti-jp-banner-panel,
.shio-banner-wrap.bukti-jp-banner-panel,
.paito-banner-wrap.bukti-jp-banner-panel,
.jadwal-banner-wrap.bukti-jp-banner-panel {
  display: block !important;
  width: 100% !important;
  padding: 10px !important;
  overflow: hidden !important;
}

.buku-mimpi-banner-wrap.bukti-jp-banner-panel .banner-aspect-box,
.shio-banner-wrap.bukti-jp-banner-panel .banner-aspect-box,
.paito-banner-wrap.bukti-jp-banner-panel .banner-aspect-box,
.jadwal-banner-wrap.bukti-jp-banner-panel .banner-aspect-box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  aspect-ratio: 16 / 6 !important;
  padding: 10px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(7, 12, 24, .92), rgba(5, 9, 18, .98)) !important;
}

.buku-mimpi-banner-wrap.bukti-jp-banner-panel .bukti-jp-banner-image,
.shio-banner-wrap.bukti-jp-banner-panel .bukti-jp-banner-image,
.paito-banner-wrap.bukti-jp-banner-panel .bukti-jp-banner-image,
.jadwal-banner-wrap.bukti-jp-banner-panel .bukti-jp-banner-image {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 18px !important;
}

@media (max-width: 820px) {
  .buku-mimpi-banner-wrap.bukti-jp-banner-panel,
  .shio-banner-wrap.bukti-jp-banner-panel,
  .paito-banner-wrap.bukti-jp-banner-panel,
  .jadwal-banner-wrap.bukti-jp-banner-panel {
    padding: 8px !important;
  }

  .buku-mimpi-banner-wrap.bukti-jp-banner-panel .banner-aspect-box,
  .shio-banner-wrap.bukti-jp-banner-panel .banner-aspect-box,
  .paito-banner-wrap.bukti-jp-banner-panel .banner-aspect-box,
  .jadwal-banner-wrap.bukti-jp-banner-panel .banner-aspect-box {
    aspect-ratio: 16 / 7 !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 560px) {
  .buku-mimpi-banner-wrap.bukti-jp-banner-panel,
  .shio-banner-wrap.bukti-jp-banner-panel,
  .paito-banner-wrap.bukti-jp-banner-panel,
  .jadwal-banner-wrap.bukti-jp-banner-panel {
    padding: 6px !important;
  }

  .buku-mimpi-banner-wrap.bukti-jp-banner-panel .banner-aspect-box,
  .shio-banner-wrap.bukti-jp-banner-panel .banner-aspect-box,
  .paito-banner-wrap.bukti-jp-banner-panel .banner-aspect-box,
  .jadwal-banner-wrap.bukti-jp-banner-panel .banner-aspect-box {
    aspect-ratio: 16 / 8 !important;
    padding: 6px !important;
    border-radius: 12px !important;
  }
}


/* ============================================================
   SITE THEME SYSTEM — set by admin, applied server-side
   <html data-theme="themename"> on every page
   ============================================================ */

/* ── cosmic (default) ── */
:root,
[data-theme="cosmic"] {
  --stroke:      rgba(111,212,255,.16);
  --stroke-hi:   rgba(54,227,255,.38);
  --text:        #eef5ff;
  --muted:       #7a90b0;
  --cyan:        #36e3ff;
  --pink:        #ff4bdd;
  --purple:      #a245ff;
  --accent:      #36e3ff;
  --btn-bg:      linear-gradient(135deg,rgba(54,227,255,.18),rgba(162,69,255,.22));
  --btn-border:  rgba(54,227,255,.32);
  --btn-active:  linear-gradient(135deg,rgba(54,227,255,.30),rgba(162,69,255,.35));
  --nav-bg:      linear-gradient(170deg,rgba(5,8,18,.98),rgba(3,4,10,.99));
  --nav-border:  rgba(54,227,255,.18);
  --bg-card:     linear-gradient(155deg,rgba(14,20,38,.92),rgba(7,10,22,.97));
  --shadow:      0 8px 32px rgba(0,0,0,.45), 0 1px 0 rgba(54,227,255,.06) inset;
  --shadow-glow: 0 0 32px rgba(54,227,255,.14);
  --body-bg:
    radial-gradient(ellipse 70% 45% at 8% 0%,  rgba(54,227,255,.09) 0%,transparent 55%),
    radial-gradient(ellipse 55% 38% at 92% 3%, rgba(162,69,255,.10) 0%,transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 80%,rgba(255,75,221,.05) 0%,transparent 50%),
    linear-gradient(180deg,#020407 0%,#04070e 50%,#020407 100%);
}

/* Star field layer 1 — dense multi-colour stars */
[data-theme="cosmic"] body::before {
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle 1px   at 8%  12%,  rgba(54,227,255,.70) 100%,transparent 100%),
    radial-gradient(circle 1px   at 22% 35%,  rgba(255,255,255,.50) 100%,transparent 100%),
    radial-gradient(circle 1.5px at 40% 6%,   rgba(162,69,255,.75) 100%,transparent 100%),
    radial-gradient(circle 1px   at 58% 28%,  rgba(255,75,221,.55) 100%,transparent 100%),
    radial-gradient(circle 1px   at 74% 9%,   rgba(54,227,255,.60) 100%,transparent 100%),
    radial-gradient(circle 1.5px at 90% 22%,  rgba(255,255,255,.65) 100%,transparent 100%),
    radial-gradient(circle 1px   at 14% 55%,  rgba(162,69,255,.50) 100%,transparent 100%),
    radial-gradient(circle 1px   at 32% 70%,  rgba(54,227,255,.45) 100%,transparent 100%),
    radial-gradient(circle 1.5px at 65% 60%,  rgba(255,75,221,.60) 100%,transparent 100%),
    radial-gradient(circle 1px   at 83% 75%,  rgba(255,255,255,.45) 100%,transparent 100%),
    radial-gradient(circle 1px   at 5%  85%,  rgba(54,227,255,.55) 100%,transparent 100%),
    radial-gradient(circle 1.5px at 50% 90%,  rgba(162,69,255,.65) 100%,transparent 100%),
    radial-gradient(circle 1px   at 78% 92%,  rgba(255,75,221,.45) 100%,transparent 100%),
    radial-gradient(circle 1px   at 30% 18%,  rgba(255,255,255,.40) 100%,transparent 100%),
    radial-gradient(circle 2px   at 18% 78%,  rgba(54,227,255,.35) 100%,transparent 100%),
    radial-gradient(circle 1px   at 62% 44%,  rgba(162,69,255,.40) 100%,transparent 100%),
    radial-gradient(circle 1.5px at 46% 52%,  rgba(255,255,255,.30) 100%,transparent 100%),
    radial-gradient(circle 1px   at 95% 48%,  rgba(54,227,255,.50) 100%,transparent 100%),
    radial-gradient(circle 1px   at 3%  30%,  rgba(255,75,221,.35) 100%,transparent 100%),
    radial-gradient(circle 2px   at 85% 60%,  rgba(162,69,255,.45) 100%,transparent 100%);
  animation: cosmicStarPulse 6s ease-in-out infinite alternate;
}
@keyframes cosmicStarPulse { 0%{opacity:.45} 100%{opacity:1} }

/* Nebula / aurora overlay layer 2 */
[data-theme="cosmic"] body::after {
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(ellipse 280px 160px at 15% 25%,  rgba(54,227,255,.06)  0%,transparent 70%),
    radial-gradient(ellipse 220px 140px at 80% 20%,  rgba(162,69,255,.07)  0%,transparent 70%),
    radial-gradient(ellipse 200px 120px at 50% 65%,  rgba(255,75,221,.05)  0%,transparent 70%),
    radial-gradient(ellipse 160px 100px at 5%  60%,  rgba(54,227,255,.04)  0%,transparent 70%),
    radial-gradient(ellipse 240px 130px at 92% 75%,  rgba(162,69,255,.05)  0%,transparent 70%);
  animation: cosmicNebulaShift 14s ease-in-out infinite alternate;
}
@keyframes cosmicNebulaShift {
  0%   { opacity:.6; transform:scale(1)   translateY(0); }
  50%  { opacity:1;  transform:scale(1.04) translateY(-8px); }
  100% { opacity:.7; transform:scale(.98) translateY(6px); }
}

[data-theme="cosmic"] .glass {
  background: var(--bg-card) !important;
  border-color: var(--stroke) !important;
  box-shadow: var(--shadow), 0 0 0 1px rgba(54,227,255,.05) inset, 0 0 28px rgba(54,227,255,.04) !important;
  transition: box-shadow .3s, border-color .3s;
}
[data-theme="cosmic"] .glass:hover {
  border-color: rgba(54,227,255,.24) !important;
  box-shadow: var(--shadow), 0 0 0 1px rgba(54,227,255,.08) inset, 0 0 40px rgba(54,227,255,.08) !important;
}
[data-theme="cosmic"] .nav-btn {
  background: var(--btn-bg);
  border-color: var(--btn-border);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 0 0 1px rgba(54,227,255,.06) inset;
  transition: all .2s;
}
[data-theme="cosmic"] .nav-btn:hover {
  background: var(--btn-active);
  border-color: var(--stroke-hi);
  box-shadow: 0 4px 18px rgba(54,227,255,.25), 0 0 0 1px rgba(54,227,255,.14) inset, 0 0 12px rgba(54,227,255,.10);
  transform: translateY(-2px);
}
[data-theme="cosmic"] .nav-btn.active {
  color: #fff !important;
  background: linear-gradient(135deg,rgba(54,227,255,.40),rgba(162,69,255,.45)) !important;
  border-color: var(--stroke-hi) !important;
  box-shadow: 0 4px 22px rgba(54,227,255,.32), 0 0 14px rgba(54,227,255,.18) inset, 0 0 6px rgba(162,69,255,.20) !important;
}
@media (max-width: 720px) {
[data-theme="cosmic"] .top-nav {
  background: var(--nav-bg) !important;
  border-color: var(--nav-border) !important;
  box-shadow: -8px 0 48px rgba(0,0,0,.7), 0 0 40px rgba(54,227,255,.08), 0 0 80px rgba(54,227,255,.03) !important;
}
}
[data-theme="cosmic"] .marquee span { color: rgba(54,227,255,.72); text-shadow: 0 0 8px rgba(54,227,255,.30); }

[data-theme="cosmic"] .section-head :is(h1,h2) {
  background: linear-gradient(90deg,#36e3ff,#a245ff,#ff4bdd,#36e3ff);
  background-size: 300% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: cosmicHueShift 8s linear infinite;
  filter: drop-shadow(0 0 6px rgba(54,227,255,.20));
}
@keyframes cosmicHueShift { 0%{background-position:0% 50%} 100%{background-position:300% 50%} }
[data-theme="cosmic"] .badge-tag {
  background: linear-gradient(90deg,rgba(54,227,255,.20),rgba(162,69,255,.20));
  border-color: rgba(54,227,255,.35);
  color: #36e3ff;
  box-shadow: 0 0 10px rgba(54,227,255,.12), 0 0 4px rgba(162,69,255,.10) inset;
}
[data-theme="cosmic"] .popup-primary-btn {
  background: linear-gradient(90deg,#36e3ff,#a245ff);
  box-shadow: 0 4px 22px rgba(54,227,255,.40), 0 0 14px rgba(162,69,255,.20) inset;
}
[data-theme="cosmic"] .rtp-percent-fill {
  background: linear-gradient(90deg,rgba(54,227,255,.65),rgba(162,69,255,.98));
  box-shadow: 0 0 8px rgba(54,227,255,.30);
}
[data-theme="cosmic"] .paito-tab-btn.active {
  background: linear-gradient(135deg,#36e3ff,#a245ff);
  color: #030508;
  box-shadow: 0 4px 22px rgba(54,227,255,.40), 0 0 8px rgba(162,69,255,.20) inset;
  text-shadow: none;
}




















/* ══════════════════════════════════════════════════════════════
   🎄 CHRISTMAS THEME
   ══════════════════════════════════════════════════════════════ */
[data-theme="christmas"] {
  --stroke:      rgba(255,60,60,.20);
  --stroke-hi:   rgba(255,100,100,.40);
  --text:        #fff5f5;
  --muted:       #c09090;
  --cyan:        #ff3c3c;
  --pink:        #ffd700;
  --purple:      #22aa44;
  --accent:      #ff3c3c;
  --btn-bg:      linear-gradient(135deg,rgba(180,20,20,.32),rgba(20,120,40,.26));
  --btn-border:  rgba(220,60,60,.40);
  --btn-active:  linear-gradient(135deg,rgba(220,40,40,.48),rgba(20,140,50,.40));
  --nav-bg:      linear-gradient(170deg,rgba(10,4,4,.98),rgba(4,10,4,.99));
  --nav-border:  rgba(200,40,40,.30);
  --bg-card:     linear-gradient(155deg,rgba(22,6,6,.93),rgba(8,16,6,.96));
  --shadow:      0 8px 32px rgba(0,0,0,.52), 0 1px 0 rgba(200,40,40,.10) inset;
  --shadow-glow: 0 0 36px rgba(220,40,40,.20);
  --body-bg:
    radial-gradient(ellipse 65% 40% at 10% 0%,  rgba(180,20,20,.18) 0%,transparent 55%),
    radial-gradient(ellipse 50% 35% at 90% 5%,  rgba(30,140,50,.14) 0%,transparent 50%),
    radial-gradient(ellipse 40% 28% at 50% 85%, rgba(255,200,0,.08) 0%,transparent 50%),
    linear-gradient(180deg,#080e04 0%,#0c0604 50%,#080e04 100%);
}

/* Falling snow + subtle pine pattern overlay */
[data-theme="christmas"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle 1.5px at 10% 15%, rgba(255,255,255,.75) 100%, transparent 100%),
    radial-gradient(circle 1px   at 25% 40%, rgba(255,255,255,.55) 100%, transparent 100%),
    radial-gradient(circle 2px   at 42% 8%,  rgba(255,255,255,.80) 100%, transparent 100%),
    radial-gradient(circle 1px   at 60% 30%, rgba(255,255,255,.50) 100%, transparent 100%),
    radial-gradient(circle 1.5px at 75% 12%, rgba(255,255,255,.70) 100%, transparent 100%),
    radial-gradient(circle 1px   at 88% 50%, rgba(255,255,255,.45) 100%, transparent 100%),
    radial-gradient(circle 2px   at 5%  65%, rgba(255,255,255,.65) 100%, transparent 100%),
    radial-gradient(circle 1px   at 33% 72%, rgba(255,255,255,.50) 100%, transparent 100%),
    radial-gradient(circle 1.5px at 55% 58%, rgba(255,255,255,.60) 100%, transparent 100%),
    radial-gradient(circle 1px   at 78% 80%, rgba(255,255,255,.40) 100%, transparent 100%),
    radial-gradient(circle 2px   at 92% 20%, rgba(255,255,255,.75) 100%, transparent 100%),
    radial-gradient(circle 1px   at 18% 90%, rgba(255,255,255,.45) 100%, transparent 100%),
    radial-gradient(circle 1.5px at 48% 85%, rgba(255,255,255,.55) 100%, transparent 100%),
    radial-gradient(circle 1px   at 67% 95%, rgba(255,255,255,.35) 100%, transparent 100%),
    radial-gradient(circle 2px   at 3%  35%, rgba(255,255,255,.70) 100%, transparent 100%);
  background-size: 100% 100%;
  animation: xmasSnowDrift 18s linear infinite;
}

/* Snowflake layer 2 */
[data-theme="christmas"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle 1px   at 15% 22%, rgba(255,255,255,.45) 100%, transparent 100%),
    radial-gradient(circle 1.5px at 38% 55%, rgba(255,255,255,.60) 100%, transparent 100%),
    radial-gradient(circle 1px   at 63% 18%, rgba(255,255,255,.40) 100%, transparent 100%),
    radial-gradient(circle 2px   at 82% 70%, rgba(255,255,255,.65) 100%, transparent 100%),
    radial-gradient(circle 1px   at 50% 45%, rgba(255,255,255,.35) 100%, transparent 100%),
    radial-gradient(circle 1.5px at 22% 78%, rgba(255,255,255,.55) 100%, transparent 100%),
    radial-gradient(circle 1px   at 95% 38%, rgba(255,255,255,.45) 100%, transparent 100%),
    radial-gradient(circle 2px   at 8%  88%, rgba(255,255,255,.70) 100%, transparent 100%);
  background-size: 100% 100%;
  animation: xmasSnowDrift 26s linear infinite reverse;
}

@keyframes xmasSnowDrift {
  0%   { background-position: 0 -100vh; opacity:.85; }
  100% { background-position: 15px 100vh; opacity:.85; }
}

/* Red glow on glass cards */
[data-theme="christmas"] .glass {
  background: var(--bg-card) !important;
  border-color: rgba(200,30,30,.28) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.52), 0 0 0 1px rgba(200,40,40,.10) inset, 0 0 24px rgba(200,30,30,.08), 0 0 2px rgba(255,215,0,.06) inset !important;
  transition: box-shadow .3s, border-color .3s;
}
[data-theme="christmas"] .glass:hover {
  border-color: rgba(220,50,50,.36) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(220,50,50,.14) inset, 0 0 32px rgba(200,30,30,.12) !important;
}
[data-theme="christmas"] .nav-btn {
  background: var(--btn-bg);
  border-color: var(--btn-border);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,.30), 0 0 0 1px rgba(200,40,40,.08) inset;
}
[data-theme="christmas"] .nav-btn:hover {
  background: var(--btn-active);
  border-color: var(--stroke-hi);
  box-shadow: 0 4px 18px rgba(220,40,40,.28), 0 0 10px rgba(220,40,40,.14) inset;
  transform: translateY(-2px);
}
[data-theme="christmas"] .nav-btn.active {
  color: #ffd700 !important;
  background: linear-gradient(135deg,rgba(200,30,30,.44),rgba(20,130,50,.38)) !important;
  border-color: rgba(255,215,0,.50) !important;
  box-shadow: 0 4px 20px rgba(200,30,30,.34), 0 0 12px rgba(255,215,0,.16) inset !important;
}
@media (max-width: 720px) {
[data-theme="christmas"] .top-nav {
  background: var(--nav-bg) !important;
  border-color: var(--nav-border) !important;
  box-shadow: -8px 0 48px rgba(0,0,0,.78), 0 0 30px rgba(180,20,20,.10), 0 0 60px rgba(20,120,40,.04) !important;
}
}
[data-theme="christmas"] .marquee span { color: rgba(255,150,150,.72); text-shadow: 0 0 8px rgba(255,60,60,.25); }

[data-theme="christmas"] .badge-tag {
  background: linear-gradient(90deg,rgba(200,30,30,.22),rgba(30,140,50,.20));
  border-color: rgba(255,120,120,.40);
  color: #ffaaaa;
  box-shadow: 0 0 10px rgba(200,30,30,.10), 0 0 4px rgba(255,215,0,.08) inset;
}
[data-theme="christmas"] .popup-primary-btn {
  background: linear-gradient(90deg,#ff3c3c,#22aa44);
  box-shadow: 0 4px 22px rgba(220,40,40,.40), 0 0 10px rgba(255,215,0,.15) inset;
}
[data-theme="christmas"] .rtp-percent-fill {
  background: linear-gradient(90deg,rgba(255,60,60,.75),rgba(255,215,0,.92));
  box-shadow: 0 0 8px rgba(255,60,60,.25);
}
[data-theme="christmas"] .paito-tab-btn.active {
  background: linear-gradient(135deg,#cc2222,#1a7a1a);
  color: #fff;
  box-shadow: 0 4px 20px rgba(180,20,20,.44), 0 0 8px rgba(255,215,0,.16) inset;
}

/* Section heads get a tinsel shimmer with gold bell glow */
[data-theme="christmas"] .section-head :is(h1,h2) {
  background: linear-gradient(90deg, #ff5555, #ffd700, #22aa44, #ffd700, #ff5555);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: xmasTinsel 3.5s linear infinite;
  filter: drop-shadow(0 0 5px rgba(220,40,40,.20));
}
@keyframes xmasTinsel {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ══════════════════════════════════════════════════════════════
   🧧 CHINESE NEW YEAR THEME
   ══════════════════════════════════════════════════════════════ */
[data-theme="cny"] {
  --stroke:      rgba(255,180,0,.22);
  --stroke-hi:   rgba(255,215,0,.45);
  --text:        #fff8e8;
  --muted:       #c09040;
  --cyan:        #ffd700;
  --pink:        #ff2200;
  --purple:      #ff8800;
  --accent:      #ffd700;
  --btn-bg:      linear-gradient(135deg,rgba(200,30,0,.30),rgba(200,140,0,.25));
  --btn-border:  rgba(220,150,0,.40);
  --btn-active:  linear-gradient(135deg,rgba(220,40,0,.45),rgba(220,160,0,.40));
  --nav-bg:      linear-gradient(170deg,rgba(20,3,0,.98),rgba(12,2,0,.99));
  --nav-border:  rgba(200,120,0,.28);
  --bg-card:     linear-gradient(155deg,rgba(32,8,0,.94),rgba(18,4,0,.97));
  --shadow:      0 8px 32px rgba(0,0,0,.55), 0 1px 0 rgba(200,120,0,.08) inset;
  --shadow-glow: 0 0 36px rgba(220,140,0,.20);
  --body-bg:
    radial-gradient(ellipse 65% 40% at 15% 0%,  rgba(220,40,0,.15) 0%,transparent 55%),
    radial-gradient(ellipse 50% 35% at 85% 5%,  rgba(255,160,0,.12) 0%,transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 90%, rgba(200,20,0,.10) 0%,transparent 50%),
    linear-gradient(180deg,#120200 0%,#180400 50%,#120200 100%);
}

/* Dragon scale / coin pattern overlay */
[data-theme="cny"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .045;
  background-image:
    radial-gradient(circle 18px at 0 0, transparent 15px, rgba(255,200,0,.9) 15px, rgba(255,200,0,.9) 17px, transparent 17px),
    radial-gradient(circle 18px at 28px 0, transparent 15px, rgba(255,200,0,.9) 15px, rgba(255,200,0,.9) 17px, transparent 17px);
  background-size: 28px 24px;
  background-position: 0 0, 14px 12px;
  animation: cnyScale 30s linear infinite;
}

/* Floating lantern glow orbs */
[data-theme="cny"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle 60px at 8%  10%, rgba(255,60,0,.18) 0%, transparent 70%),
    radial-gradient(circle 40px at 92% 8%,  rgba(255,180,0,.14) 0%, transparent 70%),
    radial-gradient(circle 50px at 5%  50%, rgba(220,30,0,.12) 0%, transparent 70%),
    radial-gradient(circle 35px at 95% 55%, rgba(255,140,0,.10) 0%, transparent 70%),
    radial-gradient(circle 45px at 50% 95%, rgba(255,60,0,.14) 0%, transparent 70%);
  animation: cnyLanternFloat 8s ease-in-out infinite alternate;
}

@keyframes cnyScale { 0% { background-position: 0 0, 14px 12px; } 100% { background-position: 0 240px, 14px 252px; } }
@keyframes cnyLanternFloat {
  0%   { opacity: .7; transform: translateY(0); }
  100% { opacity: 1;  transform: translateY(-12px); }
}

[data-theme="cny"] .glass {
  background: var(--bg-card) !important;
  border-color: rgba(200,120,0,.32) !important;
  box-shadow: 0 8px 34px rgba(0,0,0,.58), 0 0 0 1px rgba(220,140,0,.12) inset, 0 0 28px rgba(180,60,0,.10) !important;
  transition: box-shadow .3s, border-color .3s;
}
[data-theme="cny"] .glass:hover {
  border-color: rgba(220,140,0,.42) !important;
  box-shadow: 0 8px 42px rgba(0,0,0,.62), 0 0 0 1px rgba(255,180,0,.16) inset, 0 0 40px rgba(200,80,0,.14) !important;
}
[data-theme="cny"] .nav-btn {
  background: var(--btn-bg);
  border-color: var(--btn-border);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,.35), 0 0 0 1px rgba(200,120,0,.08) inset;
}
[data-theme="cny"] .nav-btn:hover {
  background: var(--btn-active);
  border-color: var(--stroke-hi);
  box-shadow: 0 4px 20px rgba(220,140,0,.32), 0 0 10px rgba(220,140,0,.16) inset;
  transform: translateY(-2px);
}
[data-theme="cny"] .nav-btn.active {
  color: #ffd700 !important;
  background: linear-gradient(135deg,rgba(200,40,0,.46),rgba(200,140,0,.42)) !important;
  border-color: rgba(255,215,0,.55) !important;
  box-shadow: 0 4px 22px rgba(200,120,0,.40), 0 0 14px rgba(255,215,0,.18) inset !important;
}
@media (max-width: 720px) {
[data-theme="cny"] .top-nav {
  background: var(--nav-bg) !important;
  border-color: var(--nav-border) !important;
  box-shadow: -8px 0 48px rgba(0,0,0,.84), 0 0 44px rgba(180,60,0,.14) !important;
}
}
[data-theme="cny"] .marquee span { color: rgba(255,200,0,.78); text-shadow: 0 0 10px rgba(255,160,0,.30); }

[data-theme="cny"] .badge-tag {
  background: linear-gradient(90deg,rgba(200,30,0,.24),rgba(200,140,0,.24));
  border-color: rgba(255,200,0,.50);
  color: #ffd755;
  box-shadow: 0 0 12px rgba(200,100,0,.14), 0 0 5px rgba(255,215,0,.10) inset;
}
[data-theme="cny"] .popup-primary-btn {
  background: linear-gradient(90deg,#ff2200,#ffd700);
  box-shadow: 0 4px 24px rgba(200,120,0,.46), 0 0 12px rgba(255,215,0,.18) inset;
}
[data-theme="cny"] .rtp-percent-fill {
  background: linear-gradient(90deg,rgba(255,60,0,.70),rgba(255,215,0,.98));
  box-shadow: 0 0 10px rgba(220,140,0,.30);
}
[data-theme="cny"] .paito-tab-btn.active {
  background: linear-gradient(135deg,#cc2200,#ffaa00);
  color: #07111f;
  box-shadow: 0 4px 22px rgba(200,100,0,.50), 0 0 8px rgba(255,215,0,.20) inset;
}

[data-theme="cny"] .section-head :is(h1,h2) {
  background: linear-gradient(90deg, #ff5500, #ffd700, #ff9900, #ffd700, #ff5500);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: cnyGold 3s linear infinite;
  filter: drop-shadow(0 0 6px rgba(200,120,0,.22));
}
@keyframes cnyGold {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ══════════════════════════════════════════════════════════════
   🎆 NEW YEAR THEME
   ══════════════════════════════════════════════════════════════ */
[data-theme="newyear"] {
  --stroke:      rgba(200,180,255,.18);
  --stroke-hi:   rgba(230,215,255,.38);
  --text:        #f8f6ff;
  --muted:       #9080c0;
  --cyan:        #ffe066;
  --pink:        #ff66cc;
  --purple:      #aa88ff;
  --accent:      #ffe066;
  --btn-bg:      linear-gradient(135deg,rgba(100,60,255,.22),rgba(255,200,50,.16));
  --btn-border:  rgba(180,140,255,.32);
  --btn-active:  linear-gradient(135deg,rgba(120,80,255,.35),rgba(255,200,50,.28));
  --nav-bg:      linear-gradient(170deg,rgba(4,3,16,.98),rgba(2,1,10,.99));
  --nav-border:  rgba(160,130,255,.22);
  --bg-card:     linear-gradient(155deg,rgba(10,8,24,.94),rgba(5,4,16,.97));
  --shadow:      0 8px 32px rgba(0,0,0,.58), 0 1px 0 rgba(160,130,255,.06) inset;
  --shadow-glow: 0 0 36px rgba(180,150,255,.16);
  --body-bg:
    radial-gradient(ellipse 65% 40% at 10% 0%,  rgba(100,60,255,.14) 0%,transparent 55%),
    radial-gradient(ellipse 50% 35% at 90% 5%,  rgba(255,200,50,.10) 0%,transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 90%, rgba(180,100,255,.09) 0%,transparent 50%),
    linear-gradient(180deg,#00000e 0%,#01010e 50%,#00000e 100%);
}

/* Star field */
[data-theme="newyear"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle 1px   at 12% 8%,  rgba(255,255,200,.90) 100%, transparent 100%),
    radial-gradient(circle 1.5px at 28% 22%, rgba(255,255,180,.75) 100%, transparent 100%),
    radial-gradient(circle 1px   at 45% 5%,  rgba(255,255,255,.85) 100%, transparent 100%),
    radial-gradient(circle 2px   at 60% 18%, rgba(255,240,120,.80) 100%, transparent 100%),
    radial-gradient(circle 1px   at 73% 10%, rgba(255,255,200,.70) 100%, transparent 100%),
    radial-gradient(circle 1.5px at 88% 25%, rgba(255,255,255,.85) 100%, transparent 100%),
    radial-gradient(circle 1px   at 5%  35%, rgba(255,255,180,.65) 100%, transparent 100%),
    radial-gradient(circle 2px   at 20% 48%, rgba(200,180,255,.80) 100%, transparent 100%),
    radial-gradient(circle 1px   at 38% 38%, rgba(255,255,255,.60) 100%, transparent 100%),
    radial-gradient(circle 1.5px at 55% 42%, rgba(255,220,100,.75) 100%, transparent 100%),
    radial-gradient(circle 1px   at 70% 55%, rgba(255,255,200,.55) 100%, transparent 100%),
    radial-gradient(circle 2px   at 85% 45%, rgba(200,160,255,.80) 100%, transparent 100%),
    radial-gradient(circle 1px   at 15% 68%, rgba(255,255,180,.60) 100%, transparent 100%),
    radial-gradient(circle 1.5px at 35% 75%, rgba(255,255,255,.70) 100%, transparent 100%),
    radial-gradient(circle 1px   at 52% 82%, rgba(255,220,80,.55)  100%, transparent 100%),
    radial-gradient(circle 2px   at 68% 70%, rgba(180,140,255,.75) 100%, transparent 100%),
    radial-gradient(circle 1px   at 82% 88%, rgba(255,255,200,.60) 100%, transparent 100%),
    radial-gradient(circle 1.5px at 95% 62%, rgba(255,255,255,.80) 100%, transparent 100%),
    radial-gradient(circle 1px   at 8%  92%, rgba(255,220,100,.50) 100%, transparent 100%),
    radial-gradient(circle 2px   at 42% 95%, rgba(200,170,255,.70) 100%, transparent 100%);
  animation: nyStarTwinkle 4s ease-in-out infinite alternate;
}

/* Firework burst glows */
[data-theme="newyear"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle 80px  at 20% 20%, rgba(255,220,50,.12)  0%, transparent 70%),
    radial-gradient(circle 60px  at 78% 15%, rgba(200,100,255,.14) 0%, transparent 70%),
    radial-gradient(circle 70px  at 50% 30%, rgba(50,200,255,.10)  0%, transparent 70%),
    radial-gradient(circle 55px  at 88% 50%, rgba(255,100,150,.12) 0%, transparent 70%),
    radial-gradient(circle 90px  at 10% 70%, rgba(180,140,255,.10) 0%, transparent 70%),
    radial-gradient(circle 65px  at 60% 80%, rgba(255,200,50,.12)  0%, transparent 70%);
  animation: nyFireworks 3s ease-in-out infinite alternate;
}

@keyframes nyStarTwinkle {
  0%   { opacity: .6; }
  100% { opacity: 1; }
}
@keyframes nyFireworks {
  0%   { opacity: .5; transform: scale(1); }
  50%  { opacity: 1;  transform: scale(1.05); }
  100% { opacity: .7; transform: scale(.97); }
}

[data-theme="newyear"] .glass {
  background: var(--bg-card) !important;
  border-color: rgba(160,130,255,.24) !important;
  box-shadow: 0 8px 34px rgba(0,0,0,.60), 0 0 0 1px rgba(200,170,255,.10) inset, 0 0 28px rgba(120,80,220,.09) !important;
  transition: box-shadow .3s, border-color .3s;
}
[data-theme="newyear"] .glass:hover {
  border-color: rgba(200,170,255,.34) !important;
  box-shadow: 0 8px 44px rgba(0,0,0,.65), 0 0 0 1px rgba(220,190,255,.14) inset, 0 0 40px rgba(140,100,255,.12) !important;
}
[data-theme="newyear"] .nav-btn {
  background: var(--btn-bg);
  border-color: var(--btn-border);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,.38), 0 0 0 1px rgba(160,130,255,.08) inset;
}
[data-theme="newyear"] .nav-btn:hover {
  background: var(--btn-active);
  border-color: var(--stroke-hi);
  box-shadow: 0 4px 20px rgba(160,130,255,.30), 0 0 10px rgba(160,130,255,.14) inset;
  transform: translateY(-2px);
}
[data-theme="newyear"] .nav-btn.active {
  color: #ffe066 !important;
  background: linear-gradient(135deg,rgba(120,80,255,.44),rgba(255,200,50,.33)) !important;
  border-color: rgba(255,220,80,.50) !important;
  box-shadow: 0 4px 22px rgba(160,130,255,.35), 0 0 14px rgba(255,220,80,.18) inset !important;
}
@media (max-width: 720px) {
[data-theme="newyear"] .top-nav {
  background: var(--nav-bg) !important;
  border-color: var(--nav-border) !important;
  box-shadow: -8px 0 48px rgba(0,0,0,.84), 0 0 44px rgba(120,80,255,.10), 0 0 20px rgba(255,200,50,.04) !important;
}
}
[data-theme="newyear"] .marquee span { color: rgba(210,180,255,.75); text-shadow: 0 0 8px rgba(180,140,255,.28); }

[data-theme="newyear"] .badge-tag {
  background: linear-gradient(90deg,rgba(120,80,255,.22),rgba(255,180,50,.20));
  border-color: rgba(210,180,255,.44);
  color: #d4aaff;
  box-shadow: 0 0 12px rgba(160,130,255,.14), 0 0 5px rgba(255,220,80,.08) inset;
}
[data-theme="newyear"] .popup-primary-btn {
  background: linear-gradient(90deg,#aa88ff,#ffe066);
  box-shadow: 0 4px 24px rgba(160,130,255,.44), 0 0 12px rgba(255,220,80,.16) inset;
}
[data-theme="newyear"] .rtp-percent-fill {
  background: linear-gradient(90deg,rgba(120,80,255,.70),rgba(255,200,50,.98));
  box-shadow: 0 0 10px rgba(160,130,255,.28);
}
[data-theme="newyear"] .paito-tab-btn.active {
  background: linear-gradient(135deg,#8855ff,#ffe066);
  color: #05030e;
  box-shadow: 0 4px 22px rgba(140,100,255,.48), 0 0 8px rgba(255,220,80,.18) inset;
}

[data-theme="newyear"] .section-head :is(h1,h2) {
  background: linear-gradient(90deg, #ffe066, #cc88ff, #66eeff, #ffaacc, #ffe066);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: nyRainbow 3.5s linear infinite;
  filter: drop-shadow(0 0 6px rgba(160,130,255,.22));
}
@keyframes nyRainbow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ══════════════════════════════════════════════════════════════
   🎃 HALLOWEEN THEME
   ══════════════════════════════════════════════════════════════ */
[data-theme="halloween"] {
  --stroke:      rgba(180,80,0,.22);
  --stroke-hi:   rgba(255,120,0,.40);
  --text:        #fff0e0;
  --muted:       #906030;
  --cyan:        #ff8c00;
  --pink:        #cc00ff;
  --purple:      #8b00ff;
  --accent:      #ff8c00;
  --btn-bg:      linear-gradient(135deg,rgba(180,50,0,.28),rgba(120,0,200,.22));
  --btn-border:  rgba(200,80,0,.36);
  --btn-active:  linear-gradient(135deg,rgba(200,60,0,.42),rgba(140,0,220,.35));
  --nav-bg:      linear-gradient(170deg,rgba(10,2,14,.98),rgba(6,1,8,.99));
  --nav-border:  rgba(180,60,0,.26);
  --bg-card:     linear-gradient(155deg,rgba(16,4,22,.94),rgba(8,2,14,.97));
  --shadow:      0 8px 32px rgba(0,0,0,.58), 0 1px 0 rgba(180,50,0,.07) inset;
  --shadow-glow: 0 0 32px rgba(200,80,0,.18);
  --body-bg:
    radial-gradient(ellipse 65% 40% at 10% 0%,  rgba(180,50,0,.14) 0%,transparent 55%),
    radial-gradient(ellipse 50% 35% at 90% 5%,  rgba(120,0,200,.12) 0%,transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 90%, rgba(160,40,0,.10) 0%,transparent 50%),
    linear-gradient(180deg,#06000c 0%,#0a0210 50%,#06000c 100%);
}

/* Spooky cobweb / dot pattern */
[data-theme="halloween"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .06;
  background-image:
    radial-gradient(circle 1px at 0   0,   rgba(200,120,0,1) 100%, transparent 100%),
    radial-gradient(circle 1px at 100% 0,  rgba(200,120,0,1) 100%, transparent 100%),
    radial-gradient(circle 1px at 0   100%,rgba(200,120,0,1) 100%, transparent 100%),
    radial-gradient(circle 1px at 100% 100%,rgba(200,120,0,1) 100%, transparent 100%),
    linear-gradient(rgba(150,60,0,.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,60,0,.3) 1px, transparent 1px),
    radial-gradient(circle 40px at 0 0, transparent 38px, rgba(180,80,0,.4) 38px, rgba(180,80,0,.4) 40px, transparent 40px),
    radial-gradient(circle 40px at 100% 0, transparent 38px, rgba(180,80,0,.4) 38px, rgba(180,80,0,.4) 40px, transparent 40px);
  background-size: 60px 60px, 60px 60px, 60px 60px, 60px 60px, 60px 60px, 60px 60px, 100% 100%, 100% 100%;
}

/* Floating bat silhouettes (CSS shapes) + orange glow orbs */
[data-theme="halloween"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle 70px  at 15% 15%, rgba(200,60,0,.16)  0%, transparent 70%),
    radial-gradient(circle 50px  at 85% 10%, rgba(130,0,200,.14) 0%, transparent 70%),
    radial-gradient(circle 60px  at 5%  60%, rgba(180,50,0,.12)  0%, transparent 70%),
    radial-gradient(circle 45px  at 92% 65%, rgba(100,0,180,.12) 0%, transparent 70%),
    radial-gradient(circle 80px  at 50% 90%, rgba(160,40,0,.10)  0%, transparent 70%);
  animation: hwFlicker 2.5s ease-in-out infinite alternate;
}

@keyframes hwFlicker {
  0%   { opacity: .65; }
  30%  { opacity: 1;   }
  60%  { opacity: .80; }
  100% { opacity: .90; }
}

[data-theme="halloween"] .glass {
  background: var(--bg-card) !important;
  border-color: rgba(180,60,0,.28) !important;
  box-shadow: 0 8px 34px rgba(0,0,0,.60), 0 0 0 1px rgba(200,80,0,.10) inset, 0 0 26px rgba(140,30,0,.10) !important;
  transition: box-shadow .3s, border-color .3s;
}
[data-theme="halloween"] .glass:hover {
  border-color: rgba(220,90,0,.38) !important;
  box-shadow: 0 8px 44px rgba(0,0,0,.65), 0 0 0 1px rgba(230,100,0,.14) inset, 0 0 38px rgba(160,40,0,.14) !important;
}
[data-theme="halloween"] .nav-btn {
  background: var(--btn-bg);
  border-color: var(--btn-border);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,.38), 0 0 0 1px rgba(180,50,0,.08) inset;
}
[data-theme="halloween"] .nav-btn:hover {
  background: var(--btn-active);
  border-color: var(--stroke-hi);
  box-shadow: 0 4px 20px rgba(200,70,0,.30), 0 0 10px rgba(200,70,0,.15) inset;
  transform: translateY(-2px);
}
[data-theme="halloween"] .nav-btn.active {
  color: #ff9c20 !important;
  background: linear-gradient(135deg,rgba(200,60,0,.46),rgba(140,0,220,.42)) !important;
  border-color: rgba(255,150,0,.50) !important;
  box-shadow: 0 4px 22px rgba(200,70,0,.38), 0 0 14px rgba(255,130,0,.18) inset !important;
}
@media (max-width: 720px) {
[data-theme="halloween"] .top-nav {
  background: var(--nav-bg) !important;
  border-color: var(--nav-border) !important;
  box-shadow: -8px 0 48px rgba(0,0,0,.86), 0 0 44px rgba(160,40,0,.12), 0 0 20px rgba(100,0,160,.06) !important;
}
}
[data-theme="halloween"] .marquee span { color: rgba(255,150,0,.70); text-shadow: 0 0 8px rgba(255,100,0,.28); }

[data-theme="halloween"] .badge-tag {
  background: linear-gradient(90deg,rgba(200,60,0,.24),rgba(130,0,200,.24));
  border-color: rgba(240,110,0,.42);
  color: #ffaa55;
  box-shadow: 0 0 12px rgba(200,70,0,.14), 0 0 5px rgba(180,0,200,.08) inset;
}
[data-theme="halloween"] .popup-primary-btn {
  background: linear-gradient(90deg,#ff6600,#8b00ff);
  box-shadow: 0 4px 24px rgba(200,70,0,.44), 0 0 12px rgba(160,0,220,.18) inset;
}
[data-theme="halloween"] .rtp-percent-fill {
  background: linear-gradient(90deg,rgba(200,60,0,.70),rgba(150,0,230,.94));
  box-shadow: 0 0 10px rgba(200,80,0,.28);
}
[data-theme="halloween"] .paito-tab-btn.active {
  background: linear-gradient(135deg,#cc4400,#7700cc);
  color: #fff;
  box-shadow: 0 4px 22px rgba(180,50,0,.48), 0 0 8px rgba(180,0,220,.18) inset;
}

[data-theme="halloween"] .section-head :is(h1,h2) {
  background: linear-gradient(90deg, #ff7700, #cc00ff, #ff9900, #9900cc, #ff7700);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: hwGlow 2.8s linear infinite;
  filter: drop-shadow(0 0 6px rgba(200,70,0,.22));
}
@keyframes hwGlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ══════════════════════════════════════════════════════════════
   🌸 SAKURA THEME  (Cherry Blossom Spring)
   ══════════════════════════════════════════════════════════════ */
[data-theme="sakura"] {
  --stroke:      rgba(255,160,200,.20);
  --stroke-hi:   rgba(255,190,220,.42);
  --text:        #fff0f6;
  --muted:       #c090b0;
  --cyan:        #ff80bb;
  --pink:        #ffb3d4;
  --purple:      #d966a0;
  --accent:      #ff80bb;
  --btn-bg:      linear-gradient(135deg,rgba(210,80,140,.26),rgba(255,160,200,.18));
  --btn-border:  rgba(240,130,180,.36);
  --btn-active:  linear-gradient(135deg,rgba(230,90,155,.40),rgba(255,180,215,.28));
  --nav-bg:      linear-gradient(170deg,rgba(18,4,10,.98),rgba(10,2,7,.99));
  --nav-border:  rgba(220,120,170,.24);
  --bg-card:     linear-gradient(155deg,rgba(28,8,18,.93),rgba(14,4,10,.97));
  --shadow:      0 8px 32px rgba(0,0,0,.50), 0 1px 0 rgba(220,100,160,.08) inset;
  --shadow-glow: 0 0 36px rgba(240,130,185,.18);
  --body-bg:
    radial-gradient(ellipse 65% 40% at 12% 0%,  rgba(220,80,150,.13) 0%,transparent 55%),
    radial-gradient(ellipse 50% 35% at 88% 5%,  rgba(255,160,200,.10) 0%,transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 88%, rgba(180,60,120,.09) 0%,transparent 50%),
    linear-gradient(180deg,#0e0208 0%,#160410 50%,#0e0208 100%);
}

/* Falling cherry blossom petals — layer 1 */
[data-theme="sakura"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(ellipse 4px 3px at 8%  10%, rgba(255,170,210,.80) 100%, transparent 100%),
    radial-gradient(ellipse 3px 4px at 23% 30%, rgba(255,190,220,.65) 100%, transparent 100%),
    radial-gradient(ellipse 5px 3px at 40% 8%,  rgba(255,150,200,.75) 100%, transparent 100%),
    radial-gradient(ellipse 3px 5px at 55% 22%, rgba(255,200,230,.60) 100%, transparent 100%),
    radial-gradient(ellipse 4px 3px at 70% 5%,  rgba(255,170,215,.70) 100%, transparent 100%),
    radial-gradient(ellipse 3px 4px at 85% 35%, rgba(255,180,220,.55) 100%, transparent 100%),
    radial-gradient(ellipse 5px 3px at 12% 55%, rgba(255,160,205,.65) 100%, transparent 100%),
    radial-gradient(ellipse 3px 5px at 32% 68%, rgba(255,190,225,.55) 100%, transparent 100%),
    radial-gradient(ellipse 4px 3px at 58% 52%, rgba(255,170,210,.70) 100%, transparent 100%),
    radial-gradient(ellipse 3px 4px at 78% 72%, rgba(255,200,230,.50) 100%, transparent 100%),
    radial-gradient(ellipse 5px 3px at 5%  82%, rgba(255,155,200,.60) 100%, transparent 100%),
    radial-gradient(ellipse 3px 5px at 48% 88%, rgba(255,185,220,.65) 100%, transparent 100%),
    radial-gradient(ellipse 4px 3px at 90% 80%, rgba(255,170,210,.55) 100%, transparent 100%),
    radial-gradient(ellipse 3px 4px at 65% 92%, rgba(255,200,228,.50) 100%, transparent 100%),
    radial-gradient(ellipse 5px 3px at 20% 95%, rgba(255,160,205,.55) 100%, transparent 100%);
  animation: sakuraPetals 18s ease-in-out infinite alternate;
}

/* Soft bloom glow layer 2 */
[data-theme="sakura"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle 90px  at 10% 15%, rgba(220,80,150,.14)  0%, transparent 70%),
    radial-gradient(circle 70px  at 85% 10%, rgba(255,160,200,.12) 0%, transparent 70%),
    radial-gradient(circle 80px  at 50% 35%, rgba(200,70,140,.10)  0%, transparent 70%),
    radial-gradient(circle 60px  at 92% 60%, rgba(255,130,185,.12) 0%, transparent 70%),
    radial-gradient(circle 100px at 8%  70%, rgba(210,80,150,.10)  0%, transparent 70%),
    radial-gradient(circle 75px  at 55% 88%, rgba(255,160,200,.12) 0%, transparent 70%);
  animation: sakuraBloomFloat 10s ease-in-out infinite alternate;
}

@keyframes sakuraPetals {
  0%   { opacity: .55; transform: translateY(0)   rotate(0deg); }
  33%  { opacity: .85; transform: translateY(-14px) rotate(2deg); }
  66%  { opacity: .70; transform: translateY(8px)  rotate(-1deg); }
  100% { opacity: .90; transform: translateY(-6px) rotate(1.5deg); }
}
@keyframes sakuraBloomFloat {
  0%   { opacity: .60; transform: scale(1) translateY(0); }
  50%  { opacity: 1;   transform: scale(1.06) translateY(-10px); }
  100% { opacity: .75; transform: scale(.96) translateY(8px); }
}

[data-theme="sakura"] .glass {
  background: var(--bg-card) !important;
  border-color: rgba(210,100,160,.26) !important;
  box-shadow: 0 8px 34px rgba(0,0,0,.52), 0 0 0 1px rgba(240,140,190,.10) inset, 0 0 28px rgba(200,70,140,.09) !important;
  transition: box-shadow .3s, border-color .3s;
}
[data-theme="sakura"] .glass:hover {
  border-color: rgba(240,140,190,.36) !important;
  box-shadow: 0 8px 44px rgba(0,0,0,.58), 0 0 0 1px rgba(255,170,215,.14) inset, 0 0 40px rgba(220,90,160,.14) !important;
}
[data-theme="sakura"] .nav-btn {
  background: var(--btn-bg);
  border-color: var(--btn-border);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,.32), 0 0 0 1px rgba(220,110,170,.07) inset;
}
[data-theme="sakura"] .nav-btn:hover {
  background: var(--btn-active);
  border-color: var(--stroke-hi);
  box-shadow: 0 4px 18px rgba(230,100,165,.28), 0 0 10px rgba(230,120,175,.13) inset;
  transform: translateY(-2px);
}
[data-theme="sakura"] .nav-btn.active {
  color: #ffcce8 !important;
  background: linear-gradient(135deg,rgba(220,80,150,.42),rgba(255,170,210,.28)) !important;
  border-color: rgba(255,190,225,.50) !important;
  box-shadow: 0 4px 22px rgba(220,90,160,.36), 0 0 14px rgba(255,180,220,.18) inset !important;
}
@media (max-width: 720px) {
[data-theme="sakura"] .top-nav {
  background: var(--nav-bg) !important;
  border-color: var(--nav-border) !important;
  box-shadow: -8px 0 48px rgba(0,0,0,.82), 0 0 44px rgba(200,70,140,.10), 0 0 20px rgba(255,160,200,.04) !important;
}
}
[data-theme="sakura"] .marquee span { color: rgba(255,175,215,.75); text-shadow: 0 0 8px rgba(240,120,180,.28); }

[data-theme="sakura"] .badge-tag {
  background: linear-gradient(90deg,rgba(220,80,150,.22),rgba(255,170,210,.20));
  border-color: rgba(255,190,225,.44);
  color: #ffb0d8;
  box-shadow: 0 0 12px rgba(220,90,160,.14), 0 0 5px rgba(255,200,230,.09) inset;
}
[data-theme="sakura"] .popup-primary-btn {
  background: linear-gradient(90deg,#e05090,#ffb3d4);
  box-shadow: 0 4px 24px rgba(220,80,150,.44), 0 0 12px rgba(255,190,220,.18) inset;
}
[data-theme="sakura"] .rtp-percent-fill {
  background: linear-gradient(90deg,rgba(210,70,140,.70),rgba(255,170,210,.96));
  box-shadow: 0 0 10px rgba(230,100,165,.28);
}
[data-theme="sakura"] .paito-tab-btn.active {
  background: linear-gradient(135deg,#c0407a,#ff99cc);
  color: #1a0010;
  box-shadow: 0 4px 22px rgba(200,70,140,.48), 0 0 8px rgba(255,190,220,.20) inset;
}
[data-theme="sakura"] .section-head :is(h1,h2) {
  background: linear-gradient(90deg, #ff80bb, #ffcce8, #e060a0, #ffb3d4, #ff80bb);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: sakuraPetalShift 4s linear infinite;
  filter: drop-shadow(0 0 6px rgba(230,100,170,.22));
}
@keyframes sakuraPetalShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ── SAKURA: pink blossom pulse on RTP bars ── */
[data-theme="sakura"] .rtp-percent-bar.is-loading {
  animation: rtpBarPulseSakura 1.1s ease-in-out infinite;
}
[data-theme="sakura"] .rtp-percent-bar.is-loading .rtp-percent-fill::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255,180,220,.70) 50%, transparent 100%);
  background-size: 200% 100%;
}
[data-theme="sakura"] .rtp-game-card .js-rtp-percent {
  animation: rtpNumGlowSakura 2s ease-in-out infinite;
}
@keyframes rtpBarPulseSakura {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230,100,170,0); background: rgba(255,255,255,.08); }
  50%       { box-shadow: 0 0 6px 1px rgba(230,100,170,.26); background: rgba(230,100,170,.10); }
}
@keyframes rtpNumGlowSakura {
  0%, 100% { text-shadow: none; color: #ffaacc; }
  50%       { text-shadow: 0 0 10px rgba(240,120,180,.65); color: #ff80bb; }
}


/* ── apply body-bg + glass for all themes ── */
[data-theme] body { background: var(--body-bg) !important; }
[data-theme] .glass {
  background: var(--bg-card) !important;
  border-color: var(--stroke) !important;
  box-shadow: var(--shadow) !important;
}
[data-theme] .nav-btn.active {
  color: var(--cyan) !important;
  border-color: var(--stroke-hi) !important;
}
[data-theme] .badge-tag { border-color: var(--stroke-hi); color: var(--cyan); }



/* ══════════════════════════════════════════════════════════════
   THEME-AWARE TABLE / COMPONENT OVERRIDES
   Targets: Paito, Shio, Buku Mimpi, Jadwal Pasaran
   ══════════════════════════════════════════════════════════════ */

/* ── Shared: jadwal sticky header uses body-bg tint ── */
[data-theme] .jadwal-sticky-stack {
  background: linear-gradient(180deg,
    var(--jadwal-sticky-bg, rgba(5,8,18,.99)) 0%,
    var(--jadwal-sticky-bg, rgba(5,8,18,.98)) 76%,
    var(--jadwal-sticky-bg, rgba(5,8,18,.95)) 100%) !important;
  border-bottom-color: var(--stroke) !important;
}
[data-theme] .jadwal-grid-head span {
  background: rgba(255,255,255,.05) !important;
  border-color: var(--stroke) !important;
  color: var(--cyan) !important;
}
[data-theme] .jadwal-grid-cell {
  background: rgba(255,255,255,.03) !important;
  border-color: var(--stroke) !important;
  color: var(--text) !important;
}
[data-theme] .jadwal-grid-jam {
  background: rgba(255,255,255,.07) !important;
  color: var(--cyan) !important;
}
[data-theme] .jadwal-pasaran-name { color: var(--text) !important; }
[data-theme] .jadwal-mini-link {
  border-color: var(--stroke-hi) !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--cyan) !important;
}
[data-theme] .jadwal-mini-link:hover { background: rgba(255,255,255,.12) !important; }
/* OFF rows keep their own red — intentional status indicator, don't override */

/* ── Shared: paito tab btn inactive ── */
[data-theme] .paito-tab-btn,
[data-theme] .paito-admin-tab {
  background: var(--bg-card) !important;
  border-color: var(--stroke) !important;
  color: var(--text) !important;
}
/* paito-table-wrap */
[data-theme] .paito-table-wrap {
  background: rgba(0,0,0,.35) !important;
  border-color: var(--stroke) !important;
}
/* paito grid table — give it a dark theme-tinted look */
[data-theme] .paito-grid-table th {
  background: var(--paito-th-bg, rgba(20,30,50,.95)) !important;
  color: var(--cyan) !important;
  border-color: var(--stroke) !important;
}
[data-theme] .paito-grid-table td:not(.paito-user-hit) {
  background: var(--paito-td-bg, rgba(10,16,30,.85)) !important;
  color: var(--text) !important;
  border-color: var(--stroke) !important;
}
[data-theme] .paito-grid-table td.tail-cell:not(.paito-user-hit) {
  background: rgba(0,0,0,.3) !important;
  color: var(--muted) !important;
}
[data-theme] .paito-grid-table td.digit-cell:not(.paito-user-hit) {
  background: var(--paito-td-bg, rgba(10,16,30,.85)) !important;
}
[data-theme] .paito-grid-table tbody tr:nth-child(odd) td.digit-cell:not(.paito-user-hit) {
  background: var(--paito-td-odd, rgba(14,22,40,.90)) !important;
}
[data-theme] .paito-grid-table {
  background: transparent !important;
}
[data-theme] .paito-grid-table td.match-cell:not(.paito-user-hit) {
  background: rgba(255,255,255,.15) !important;
  color: var(--cyan) !important;
  outline-color: var(--cyan) !important;
}
/* paito finder */
[data-theme] .paito-finder label,
[data-theme] .paito-page-copy { color: var(--text) !important; }
[data-theme] .paito-finder input {
  background: rgba(0,0,0,.35) !important;
  border-color: var(--stroke) !important;
  color: var(--text) !important;
}
[data-theme] .paito-user-note {
  background: var(--bg-card) !important;
  border-color: var(--stroke) !important;
  color: var(--text) !important;
}

/* ── Shared: shio card / row ── */
[data-theme] .shio-card {
  background: var(--shio-card-bg, var(--bg-card)) !important;
  border-color: var(--stroke-hi) !important;
  box-shadow: var(--shadow) !important;
}
[data-theme] .shio-card-title { color: var(--text) !important; }
[data-theme] .shio-card-period { color: var(--cyan) !important; }
[data-theme] .shio-row {
  background: var(--bg-card) !important;
  border-color: var(--stroke-hi) !important;
  box-shadow: 0 0 0 1px var(--stroke) inset, 0 12px 20px rgba(0,0,0,.22) !important;
}
[data-theme] .shio-name { color: var(--cyan) !important; }
[data-theme] .shio-number { color: var(--text) !important; }

/* ── Shared: buku mimpi ── */
[data-theme] .buku-mimpi-table-wrap {
  background: rgba(0,0,0,.4) !important;
  border-color: var(--stroke) !important;
}
[data-theme] .buku-mimpi-table {
  background: transparent !important;
}
[data-theme] .buku-mimpi-table thead th {
  background: var(--bg-card) !important;
  color: var(--cyan) !important;
  border-bottom-color: var(--stroke) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
}
[data-theme] .buku-mimpi-table tbody tr:nth-child(odd) {
  background: rgba(255,255,255,.02) !important;
}
[data-theme] .buku-mimpi-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,.04) !important;
}
[data-theme] .buku-mimpi-table tbody tr:hover {
  background: rgba(255,255,255,.06) !important;
  box-shadow: inset 0 0 0 1px var(--stroke) !important;
}
[data-theme] .buku-mimpi-table tbody td {
  color: var(--text) !important;
  border-bottom-color: var(--stroke) !important;
}
[data-theme] .buku-mimpi-table tbody td:first-child { color: var(--cyan) !important; }
[data-theme] .buku-mimpi-table tbody td:nth-child(3) { color: var(--purple) !important; }
[data-theme] .buku-mimpi-table tbody td:last-child { color: var(--pink) !important; }
[data-theme] .buku-mimpi-search-input-wrap {
  background: rgba(0,0,0,.35) !important;
  border-color: var(--stroke) !important;
}
[data-theme] .buku-mimpi-search-icon { color: var(--cyan) !important; }
[data-theme] .buku-mimpi-search-input { color: var(--text) !important; }
[data-theme] .buku-mimpi-search-input::placeholder { color: var(--muted) !important; }
[data-theme] .buku-mimpi-clear-search {
  background: linear-gradient(180deg,var(--cyan),var(--pink)) !important;
  color: #06111f !important;
}
[data-theme] .buku-mimpi-search-meta {
  background: var(--bg-card) !important;
  border-color: var(--stroke) !important;
  color: var(--text) !important;
}
[data-theme] .buku-mimpi-copy {
  background: var(--bg-card) !important;
  border-color: var(--stroke) !important;
  color: var(--text) !important;
}
[data-theme] .buku-mimpi-empty {
  background: var(--bg-card) !important;
  border-color: var(--stroke) !important;
  color: var(--muted) !important;
}

/* ══════════════════════════════════════════════════════════════
   PER-THEME REFINEMENTS — custom vars and unique colors
   ══════════════════════════════════════════════════════════════ */

/* ── COSMIC ── */
[data-theme="cosmic"] {
  --jadwal-sticky-bg:  rgba(3,5,10,.99);
  --paito-th-bg:       rgba(10,18,38,.97);
  --paito-td-bg:       rgba(6,10,22,.88);
  --paito-td-odd:      rgba(9,14,28,.92);
  --shio-card-bg:
    radial-gradient(circle at top left, rgba(54,227,255,.12), transparent 30%),
    radial-gradient(circle at top right, rgba(162,69,255,.10), transparent 28%),
    linear-gradient(180deg,rgba(14,20,44,.97) 0%,rgba(7,10,22,.99) 100%);
}
[data-theme="cosmic"] .jadwal-sticky-stack {
  background: linear-gradient(180deg,rgba(3,5,10,.99),rgba(3,5,10,.98),rgba(3,5,10,.95)) !important;
}
[data-theme="cosmic"] .buku-mimpi-table thead th {
  background: linear-gradient(180deg,rgba(14,20,44,.98),rgba(7,10,22,.99)) !important;
}

/* ── CHRISTMAS ── */
[data-theme="christmas"] {
  --jadwal-sticky-bg:  rgba(8,4,4,.99);
  --paito-th-bg:       rgba(40,8,8,.97);
  --paito-td-bg:       rgba(18,4,4,.88);
  --paito-td-odd:      rgba(24,6,6,.92);
  --shio-card-bg:
    radial-gradient(circle at top left, rgba(255,50,50,.15), transparent 28%),
    radial-gradient(circle at top right, rgba(30,140,50,.12), transparent 26%),
    linear-gradient(180deg,rgba(40,8,8,.97) 0%,rgba(16,6,4,.99) 100%);
}
[data-theme="christmas"] .jadwal-sticky-stack {
  background: linear-gradient(180deg,rgba(8,4,4,.99),rgba(8,4,4,.98),rgba(8,4,4,.95)) !important;
}
[data-theme="christmas"] .buku-mimpi-table thead th {
  background: linear-gradient(180deg,rgba(40,8,8,.98),rgba(20,6,6,.99)) !important;
}
[data-theme="christmas"] .shio-card-title {
  text-shadow: 0 3px 0 rgba(180,0,0,.8), 0 0 22px rgba(255,60,60,.4) !important;
}
[data-theme="christmas"] .paito-tab-btn.active {
  background: linear-gradient(135deg,#cc2222,#1a7a1a) !important;
  color: #fff !important;
}

/* ── CNY ── */
[data-theme="cny"] {
  --jadwal-sticky-bg:  rgba(12,2,0,.99);
  --paito-th-bg:       rgba(50,10,0,.97);
  --paito-td-bg:       rgba(22,4,0,.88);
  --paito-td-odd:      rgba(28,6,0,.92);
  --shio-card-bg:
    radial-gradient(circle at top left, rgba(255,180,0,.18), transparent 28%),
    radial-gradient(circle at top right, rgba(255,40,0,.15), transparent 26%),
    linear-gradient(180deg,rgba(50,10,0,.97) 0%,rgba(20,4,0,.99) 100%);
}
[data-theme="cny"] .jadwal-sticky-stack {
  background: linear-gradient(180deg,rgba(12,2,0,.99),rgba(12,2,0,.98),rgba(12,2,0,.95)) !important;
}
[data-theme="cny"] .buku-mimpi-table thead th {
  background: linear-gradient(180deg,rgba(48,10,0,.98),rgba(22,5,0,.99)) !important;
}
[data-theme="cny"] .shio-card-title {
  text-shadow: 0 3px 0 rgba(180,80,0,.8), 0 0 22px rgba(255,180,0,.4) !important;
}
[data-theme="cny"] .paito-tab-btn.active {
  background: linear-gradient(135deg,#cc2200,#ffaa00) !important;
  color: #07111f !important;
}

/* ── NEW YEAR ── */
[data-theme="newyear"] {
  --jadwal-sticky-bg:  rgba(2,1,10,.99);
  --paito-th-bg:       rgba(14,10,36,.97);
  --paito-td-bg:       rgba(6,4,18,.88);
  --paito-td-odd:      rgba(10,7,24,.92);
  --shio-card-bg:
    radial-gradient(circle at top left, rgba(200,170,255,.12), transparent 28%),
    radial-gradient(circle at top right, rgba(255,200,50,.10), transparent 26%),
    linear-gradient(180deg,rgba(14,10,36,.97) 0%,rgba(6,4,18,.99) 100%);
}
[data-theme="newyear"] .jadwal-sticky-stack {
  background: linear-gradient(180deg,rgba(2,1,10,.99),rgba(2,1,10,.98),rgba(2,1,10,.95)) !important;
}
[data-theme="newyear"] .buku-mimpi-table thead th {
  background: linear-gradient(180deg,rgba(14,10,36,.98),rgba(6,4,18,.99)) !important;
}
[data-theme="newyear"] .shio-card-title {
  text-shadow: 0 3px 0 rgba(80,40,180,.8), 0 0 22px rgba(200,170,255,.4) !important;
}
[data-theme="newyear"] .paito-tab-btn.active {
  background: linear-gradient(135deg,#8855ff,#ffe066) !important;
  color: #05030e !important;
}

/* ── HALLOWEEN ── */
[data-theme="halloween"] {
  --jadwal-sticky-bg:  rgba(6,1,8,.99);
  --paito-th-bg:       rgba(28,6,20,.97);
  --paito-td-bg:       rgba(12,2,10,.88);
  --paito-td-odd:      rgba(18,4,14,.92);
  --shio-card-bg:
    radial-gradient(circle at top left, rgba(255,100,0,.14), transparent 28%),
    radial-gradient(circle at top right, rgba(140,0,200,.12), transparent 26%),
    linear-gradient(180deg,rgba(28,6,20,.97) 0%,rgba(12,2,10,.99) 100%);
}
[data-theme="halloween"] .jadwal-sticky-stack {
  background: linear-gradient(180deg,rgba(6,1,8,.99),rgba(6,1,8,.98),rgba(6,1,8,.95)) !important;
}
[data-theme="halloween"] .buku-mimpi-table thead th {
  background: linear-gradient(180deg,rgba(28,6,20,.98),rgba(14,4,12,.99)) !important;
}
[data-theme="halloween"] .shio-card-title {
  text-shadow: 0 3px 0 rgba(140,30,0,.8), 0 0 22px rgba(255,100,0,.4) !important;
}
[data-theme="halloween"] .paito-tab-btn.active {
  background: linear-gradient(135deg,#cc4400,#7700cc) !important;
  color: #fff !important;
}

/* Conservative result limiting — preserves existing image/card sizing */
.room-result-card-public.is-hidden-by-limit { display: none; }
.room-result-loadmore-panel { display:flex; justify-content:center; }
.room-result-loadmore-btn {
  appearance:none; border:1px solid rgba(255,255,255,.18); cursor:pointer;
  border-radius:999px; padding:12px 18px; font:inherit; font-weight:700;
  color:var(--text-primary); background:rgba(255,255,255,.06);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.room-result-loadmore-btn:hover { transform:translateY(-1px); }
.room-result-loadmore-btn:active { transform:translateY(0); }

/* Center menu page title + description */
.managed-page-layout .section-head.compact,
.managed-page-layout .bukti-jp-head,
.managed-page-layout .jadwal-head,
.managed-page-layout .shio-section-head,
.managed-page-layout .buku-mimpi-section-head,
.managed-page-layout .paito-title-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.managed-page-layout .section-head.compact h2,
.managed-page-layout .section-head.compact span,
.managed-page-layout .managed-page-content,
.managed-page-layout .managed-page-content *,
.managed-page-layout .paito-page-copy,
.managed-page-layout .paito-page-copy * {
  text-align: center !important;
}
.managed-page-layout .managed-page-content,
.managed-page-layout .paito-page-copy {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Paito luxury cyber neon theme */
.paito-page-panel{
  background:
    radial-gradient(circle at top center, rgba(0,255,234,.10), transparent 38%),
    radial-gradient(circle at bottom left, rgba(163,78,255,.10), transparent 32%),
    linear-gradient(180deg, rgba(4,10,22,.96), rgba(2,6,14,.98)) !important;
  border:1px solid rgba(0,255,234,.18) !important;
  box-shadow: 0 0 0 1px rgba(163,78,255,.12) inset, 0 18px 46px rgba(0,0,0,.42), 0 0 28px rgba(0,255,234,.08) !important;
}
.paito-title-block :is(h1,h2){
  background: linear-gradient(90deg, #39f3ff 0%, #67ff9a 35%, #ffd84d 70%, #a45cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: 0 0 16px rgba(57,243,255,.12);
  letter-spacing: .08em;
}
.paito-page-copy,
.paito-page-copy p{
  color:#dff8ff !important;
  opacity:.96;
}
.paito-market-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
.paito-market-nav-link{
  background: linear-gradient(180deg, rgba(20,31,54,.96), rgba(12,18,35,.96)) !important;
  border:1px solid rgba(0,255,234,.14) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset, 0 10px 24px rgba(0,0,0,.25);
  color:#dff8ff !important;
}
.paito-market-nav-link.active{
  background: linear-gradient(90deg, rgba(0,198,255,.22), rgba(140,82,255,.24)) !important;
  border-color: rgba(57,243,255,.42) !important;
  color:#7ff9ff !important;
  box-shadow: 0 0 20px rgba(0,255,234,.14), 0 0 0 1px rgba(57,243,255,.18) inset;
}
.paito-table-wrap{
  background:
    linear-gradient(180deg, rgba(8,16,31,.96), rgba(4,9,19,.98)) !important;
  border:1px solid rgba(0,255,234,.18) !important;
  border-radius: 22px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 0 28px rgba(0,255,234,.06), 0 24px 48px rgba(0,0,0,.34) !important;
}
.paito-grid-table{
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.paito-grid-table th{
  background: linear-gradient(180deg, #151f35 0%, #0d1527 100%) !important;
  color:#7ff9ff !important;
  border:1px solid rgba(57,243,255,.16) !important;
  text-shadow: 0 0 10px rgba(57,243,255,.18);
  letter-spacing:.06em;
}
.paito-grid-table td{
  background: linear-gradient(180deg, #f5f8fb 0%, #edf2f7 100%) !important;
  border:1px solid rgba(145,159,180,.36) !important;
  color:#121926 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.paito-grid-table td:hover{
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 0 0 1px rgba(57,243,255,.42), 0 0 14px rgba(57,243,255,.14);
  filter: brightness(1.02);
}
.paito-grid-table td.tail-cell{
  background: linear-gradient(180deg, #eef0ff 0%, #e4e7fb 100%) !important;
  color:#8f96b8 !important;
}
.paito-grid-table td.paito-user-hit{
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: -2px;
  box-shadow: 0 0 18px rgba(57,243,255,.18) !important;
}
.paito-scroll-actions .secondary-btn,
#clearUserPaitoMix.toolbox-clear{
  background: linear-gradient(180deg, rgba(18,31,51,.95), rgba(8,15,28,.98)) !important;
  border:1px solid rgba(0,255,234,.2) !important;
  color:#7ff9ff !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset;
}
.paito-user-toolbox{
  background: linear-gradient(180deg, rgba(8,16,31,.96), rgba(4,10,20,.98)) !important;
  border:1px solid rgba(0,255,234,.16) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 16px 40px rgba(0,0,0,.34), 0 0 24px rgba(163,78,255,.08) !important;
}
.paito-user-inputs input{
  background: rgba(7,17,31,.95) !important;
  border:1px solid rgba(57,243,255,.16) !important;
  color:#fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 0 0 1px rgba(0,0,0,.22);
}
.paito-user-swatches .color-swatch{
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 4px 10px rgba(0,0,0,.18);
}
.paito-user-swatches .color-swatch.active{
  box-shadow: 0 0 0 2px rgba(255,255,255,.92), 0 0 16px rgba(57,243,255,.22);
}


/* Promo spot simplified floating sticky ad */
.promo-pip{
  position:fixed !important;
  right:14px !important;
  bottom:14px !important;
  z-index:10015 !important;
  width:min(300px, calc(100vw - 20px)) !important;
  max-width:calc(100vw - 20px) !important;
  padding:8px !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:0 18px 44px rgba(0,0,0,.42) !important;
}
.promo-pip-actions,
.promo-pip-toggle,
.promo-pip-resize,
.promo-pip.is-collapsed .promo-pip-media,
.promo-pip.is-collapsed .promo-pip-resize{display:none !important}
.promo-pip-close{
  position:absolute !important;
  top:6px !important;
  right:6px !important;
  width:20px !important;
  height:20px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(5,10,18,.82) !important;
  color:#fff !important;
  cursor:pointer !important;
  display:grid !important;
  place-items:center !important;
  font-size:12px !important;
  line-height:1 !important;
  padding:0 !important;
  z-index:2 !important;
}
.promo-pip-media{display:block !important;border-radius:12px !important;overflow:hidden !important;line-height:0 !important;background:#000 !important;aspect-ratio:var(--promo-aspect) !important;width:100% !important}
.promo-pip-media img,.promo-pip-media video{display:block !important;width:100% !important;height:100% !important;object-fit:contain !important;background:#000 !important}
@media(max-width:720px){
  .promo-pip{right:8px !important;bottom:8px !important;width:min(44vw,170px) !important;max-width:calc(100vw - 16px) !important;padding:6px !important;border-radius:12px !important}
  .promo-pip-close{top:4px !important;right:4px !important;width:18px !important;height:18px !important;font-size:11px !important}
}


/* Promo spot no-frame transparent mode */
.promo-pip{
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.promo-pip-media{
  background:transparent !important;
  border-radius:0 !important;
  overflow:visible !important;
  aspect-ratio:auto !important;
}
.promo-pip-media img,
.promo-pip-media video{
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  background:transparent !important;
  box-shadow:none !important;
}
.promo-pip-close{
  background:rgba(0,0,0,.72) !important;
}

/* ============================================================
   ROOM RESULT — carousel card redesign
   ============================================================ */
.room-live-feed-carousel{
  position:relative;
  display:grid;
  gap:14px;
  overflow:hidden;
  padding:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    radial-gradient(circle at top left, rgba(162,69,255,.16), transparent 42%),
    radial-gradient(circle at top right, rgba(255,75,221,.12), transparent 34%),
    radial-gradient(circle at bottom, rgba(54,227,255,.08), transparent 44%),
    var(--bg-card);
}

.room-result-carousel-head{
  align-items:center;
  gap:12px;
  margin-bottom:0;
}

.room-result-carousel-head p{
  max-width:640px;
}

.room-live-feed-controls{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
  flex-shrink:0;
}

.room-feed-arrow{
  appearance:none;
  width:42px;
  height:42px;
  border:none;
  border-radius:999px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  color:#f7fbff;
  background:linear-gradient(135deg, rgba(255,75,221,.18), rgba(54,227,255,.18));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  transition:transform .18s ease, opacity .18s ease, background .18s ease;
}

.room-feed-arrow:hover:not(:disabled){
  transform:translateY(-1px) scale(1.03);
  background:linear-gradient(135deg, rgba(255,75,221,.28), rgba(54,227,255,.26));
}

.room-feed-arrow:disabled{
  opacity:.38;
  cursor:not-allowed;
}

.room-live-feed{
  display:flex !important;
  gap:16px;
  align-items:flex-start;
  overflow-x:auto;
  overflow-y:hidden;
  padding:4px 2px 8px;
  scroll-snap-type:x mandatory;
  scroll-padding-left:2px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab;
  touch-action:pan-y pinch-zoom;
}

.room-live-feed::-webkit-scrollbar{
  display:none;
}

.room-live-feed.is-dragging{
  cursor:grabbing;
  scroll-snap-type:none;
}

.room-result-card-public,
.room-live-feed .room-result-card-public{
  position:relative;
  flex:0 0 calc((100% - 32px) / 3);
  min-width:260px;
  max-width:360px;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  height:auto;
  padding:12px;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)),
    linear-gradient(160deg, rgba(20,28,54,.94), rgba(10,12,26,.96));
  box-shadow:0 16px 36px rgba(0,0,0,.28);
  isolation:isolate;
}

/* NOTE: content-visibility:auto was REMOVED from carousel cards on purpose.
   Inside a horizontal scroller, skipped→unskipped card subtrees do not
   reliably repaint their async-decoded <img> in Chromium — images randomly
   stayed blank until a full page refresh. Do not re-add it here.
   DOM cost is already capped by the JS chunk loader (8 cards per batch). */

/* Perf: paito tables can have 700+ rows (15k cells) — render only the rows
   on screen; scrollbar stays stable via the intrinsic row height. */
.paito-grid-table tbody tr{
  content-visibility:auto;
  contain-intrinsic-size:auto 28px;
}

.room-result-card-glow{
  position:absolute;
  inset:-30% auto auto -14%;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,200,224,.20), rgba(0,200,224,0) 68%);
  pointer-events:none;
  z-index:0;
}

.room-result-card-public::after{
  content:'';
  position:absolute;
  inset:auto -8% -34% auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(123,63,191,.18), rgba(123,63,191,0) 68%);
  pointer-events:none;
  z-index:0;
}

.room-result-card-image-wrap{
  position:relative;
  z-index:1;
  height:220px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.07);
}

.room-result-card-image{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:10px;
}

.room-result-card-image-placeholder{
  width:100%;
  height:100%;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Orbitron",sans-serif;
  font-size:22px;
  letter-spacing:.16em;
  color:rgba(255,255,255,.76);
  background:linear-gradient(135deg, rgba(0,200,224,.18), rgba(123,63,191,.18));
}

.room-result-card-body{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 2px 2px;
  flex:0 0 auto;
}

/* ── Header: Market Title + Date ── */
.rrc-header{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.rrc-header-title-row{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.rrc-badge-new{
  display:inline-flex;
  align-items:center;
  padding:2px 9px;
  border-radius:999px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(135deg, #00C8E0, #7B3FBF);
  flex-shrink:0;
}
.rrc-market-title{
  font-size:16px;
  font-weight:900;
  letter-spacing:.02em;
  line-height:1.15;
  color:#fff;
}
.rrc-market-meta{
  font-size:10px;
  color:rgba(180,220,255,.60);
  letter-spacing:.05em;
}
.rrc-date{
  font-size:11px;
  color:rgba(200,225,255,.55);
  letter-spacing:.04em;
}

/* ── Result Number — hero ── */
.rrc-number-block{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.rrc-number-label{
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(0,200,224,.75);
}
.rrc-number-display{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px 12px;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(0,200,224,.10) 0%,rgba(123,63,191,.14) 100%);
  border:1px solid rgba(0,200,224,.22);
  box-shadow:
    0 0 0 1px rgba(123,63,191,.12) inset,
    0 4px 24px rgba(0,200,224,.08);
  position:relative;
  overflow:hidden;
}
.rrc-number-display::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,
    transparent 30%,
    rgba(0,200,224,.08) 48%,
    rgba(255,255,255,.06) 52%,
    transparent 70%);
  background-size:200% 100%;
  background-position:200% 0;
  animation:rrcShimmer 4s ease-in-out infinite;
}
@keyframes rrcShimmer{
  0%{background-position:200% 0}
  60%,100%{background-position:-200% 0}
}
.rrc-number{
  font-family:"Orbitron",sans-serif;
  font-size:clamp(32px,4.5vw,44px);
  font-weight:900;
  line-height:1;
  letter-spacing:.14em;
  color:#fff;
  text-shadow:
    0 0 8px rgba(0,200,224,.80),
    0 0 20px rgba(0,200,224,.45),
    0 0 40px rgba(123,63,191,.30);
  position:relative;
  z-index:1;
}

/* ── Shio row ── */
.rrc-shio-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
}
.rrc-shio-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(200,225,255,.55);
}
.rrc-shio-value{
  font-size:14px;
  font-weight:800;
  color:#fff;
  letter-spacing:.04em;
}

/* ── Keep special block ── */
.room-result-special-block{
  display:grid;
  gap:6px;
  padding:10px 12px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
}
.room-result-special-block div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:#e7f2ff;
}
.room-result-special-block span{
  font-weight:700;
  letter-spacing:.08em;
  color:rgba(225,238,255,.60);
}
.room-result-special-block strong{
  font-family:"Orbitron",sans-serif;
  letter-spacing:.08em;
}

.room-result-footer-copy{
  margin-top:6px;
  padding:7px 10px 5px;
  font-size:11px;
  font-weight:600;
  line-height:1.5;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(90deg,
    #a8edff 0%,
    #c9b8ff 25%,
    #ffb8e0 50%,
    #ffe089 75%,
    #a8edff 100%
  );
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:footerShimmer 4s linear infinite;
}

@media (max-width: 1080px){
  .room-result-card-public,
  .room-live-feed .room-result-card-public{
    flex-basis:calc((100% - 16px) / 2);
    max-width:none;
  }
}

@media (max-width: 767px){
  .room-live-feed-carousel{
    padding:14px;
    gap:12px;
  }
  .room-result-carousel-head{
    align-items:flex-start;
  }
  .room-live-feed-controls{
    display:none;
  }
  .room-live-feed{
    gap:12px;
    padding-bottom:4px;
  }
  .room-result-card-public,
  .room-live-feed .room-result-card-public{
    flex-basis:84%;
    min-width:min(84%, 292px);
  }
  .room-result-card-image-wrap{
    height:190px;
    padding:6px;
  }
  .rrc-number{
    font-size:30px;
  }
  .rrc-market-title{
    font-size:14px;
  }
}

@media (max-width: 520px){
  .room-result-card-public,
  .room-live-feed .room-result-card-public{
    flex-basis:88%;
    min-width:88%;
  }
  .rrc-number{
    font-size:28px;
    letter-spacing:.10em;
  }
}

.room-result-carousel-copy{
  display:grid;
  gap:6px;
}



.room-result-carousel-description,
.room-result-carousel-description p,
.room-result-carousel-description ul,
.room-result-carousel-description ol{
  margin:0;
  color:rgba(228,239,255,.72);
  font-size:12px;
  line-height:1.6;
}

.room-result-carousel-description a{
  color:var(--cyan);
}

/* ============================================================
   PREDIKSI — dual swipe card panels
   ============================================================ */
.prediksi-dual-panel{
  padding:16px;
  overflow:hidden;
}

.prediksi-split-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.prediksi-split-column{
  display:grid;
  gap:14px;
  padding:14px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(155deg, rgba(8,16,36,.96), rgba(6,12,26,.98));
  box-shadow:0 16px 34px rgba(0,0,0,.22);
}

.prediksi-split-column--ngamen{
  background:
    radial-gradient(circle at top left, rgba(54,227,255,.12), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(155deg, rgba(8,16,36,.96), rgba(6,12,26,.98));
}

.prediksi-split-column--harian{
  background:
    radial-gradient(circle at top right, rgba(162,69,255,.14), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(155deg, rgba(8,16,36,.96), rgba(6,12,26,.98));
}

.prediksi-split-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.prediksi-split-head h2{
  margin:0;
  font-size:15px;
  line-height:1.2;
  letter-spacing:.12em;
  font-family:"Orbitron",sans-serif;
  text-transform:uppercase;
  color:#f5fbff;
}

.prediksi-split-head p{
  margin:6px 0 0;
  font-size:11px;
  color:rgba(220,235,255,.68);
}

.prediksi-split-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:6px 12px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#eef7ff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  white-space:nowrap;
}

.prediksi-luxury-slider{
  display:grid;
  gap:10px;
}

.plux-window{
  overflow:hidden;
  border-radius:20px;
  cursor:grab;
}

.plux-track{
  position:relative;
  min-height:304px;
}

.plux-card{
  padding:16px;
  border-radius:20px;
  min-height:304px;
}

.plux-arrow{
  display:flex;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:999px;
  cursor:pointer;
  color:#f4fbff;
  background:rgba(6,15,31,.88);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 22px rgba(0,0,0,.26);
  transition:transform .18s ease, background .18s ease, opacity .18s ease;
}

.plux-prev{ left:10px; }
.plux-next{ right:10px; }

.plux-arrow:hover{
  transform:translateY(-50%) scale(1.04);
  background:rgba(16,28,52,.96);
}

.plux-footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.plux-counter{
  margin-top:0;
}

.plux-dots{
  margin-top:0;
}

.prediksi-info-link{
  margin-top:0;
}

@media (max-width: 980px){
  .prediksi-split-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .prediksi-dual-panel{
    padding:14px;
  }

  .prediksi-split-column{
    padding:12px;
    border-radius:20px;
  }

  .prediksi-split-head{
    align-items:flex-start;
  }

  .prediksi-split-head h2{
    font-size:13px;
  }

  .prediksi-split-head p,
  .prediksi-split-count{
    font-size:10px;
  }

  .plux-track,
  .plux-card{
    min-height:286px;
  }

  .plux-card{
    padding:14px;
  }

  .plux-arrow{
    width:32px;
    height:32px;
  }

  .plux-prev{ left:8px; }
  .plux-next{ right:8px; }
}

/* ============================================================
   PREDIKSI — premium swipe cards final layout
   ============================================================ */
.prediksi-dual-panel{
  padding:16px;
  overflow:hidden;
}

.prediksi-split-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.prediksi-split-column{
  display:grid;
  gap:14px;
  padding:16px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(155deg, rgba(7,13,28,.98), rgba(9,16,36,.98));
  box-shadow:0 18px 40px rgba(0,0,0,.24);
  overflow:hidden;
}

.prediksi-split-column--ngamen{
  background:
    radial-gradient(circle at top left, rgba(54,227,255,.14), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(155deg, rgba(7,13,28,.98), rgba(9,16,36,.98));
}

.prediksi-split-column--harian{
  background:
    radial-gradient(circle at top right, rgba(162,69,255,.16), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(155deg, rgba(7,13,28,.98), rgba(9,16,36,.98));
}

.prediksi-split-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.prediksi-split-head h2{
  margin:0;
  font-family:"Orbitron",sans-serif;
  font-size:15px;
  letter-spacing:.12em;
  line-height:1.2;
  text-transform:uppercase;
  color:#f6fbff;
}

.prediksi-split-head p{
  margin:7px 0 0;
  font-size:11px;
  line-height:1.55;
  color:rgba(225,238,255,.7);
}

.prediksi-split-head-side{
  display:grid;
  gap:10px;
  justify-items:end;
  flex-shrink:0;
}

.prediksi-split-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:6px 12px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#eef7ff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  white-space:nowrap;
}

.prediksi-split-arrows{
  display:flex;
  align-items:center;
  gap:8px;
}

.prediksi-split-arrow{
  appearance:none;
  width:40px;
  height:40px;
  border:none;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:18px;
  color:#f7fbff;
  background:linear-gradient(135deg, rgba(255,75,221,.18), rgba(54,227,255,.18));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
  transition:transform .18s ease, opacity .18s ease, background .18s ease;
}

.prediksi-split-arrow:hover:not(:disabled){
  transform:translateY(-1px) scale(1.03);
  background:linear-gradient(135deg, rgba(255,75,221,.28), rgba(54,227,255,.26));
}

.prediksi-split-arrow:disabled{
  opacity:.4;
  cursor:not-allowed;
}

.prediksi-premium-track{
  display:flex;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:4px 2px 8px;
  scroll-snap-type:x mandatory;
  scroll-padding-left:2px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab;
  touch-action:pan-y pinch-zoom;
}

.prediksi-premium-track::-webkit-scrollbar{
  display:none;
}

.prediksi-premium-track.is-dragging{
  cursor:grabbing;
  scroll-snap-type:none;
}

.prediksi-premium-card{
  position:relative;
  flex:0 0 84%;
  min-width:260px;
  max-width:360px;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:16px;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)),
    linear-gradient(160deg, rgba(20,28,54,.94), rgba(10,12,26,.96));
  box-shadow:0 16px 36px rgba(0,0,0,.28);
  isolation:isolate;
}

.prediksi-premium-card::before{
  content:'';
  position:absolute;
  inset:-18% auto auto -12%;
  width:160px;
  height:160px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,75,221,.22), rgba(255,75,221,0) 68%);
  pointer-events:none;
  z-index:0;
}

.prediksi-premium-card::after{
  content:'';
  position:absolute;
  inset:auto -10% -28% auto;
  width:170px;
  height:170px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(54,227,255,.16), rgba(54,227,255,0) 68%);
  pointer-events:none;
  z-index:0;
}

.prediksi-premium-card .pcard-header,
.prediksi-premium-card .pcard-body{
  position:relative;
  z-index:1;
}

.prediksi-premium-card .pcard-header{
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.prediksi-premium-card .pcard-market-name{
  font-size:15px;
  letter-spacing:.08em;
}

.prediksi-premium-card .pcard-badges{
  gap:6px;
}

.prediksi-premium-card .pcard-badge{
  font-size:10px;
  padding:4px 8px;
}

.prediksi-premium-card .pcard-body{
  gap:10px;
}

.prediksi-premium-card .pcard-bbfs,
.prediksi-premium-card .pcard-row-split,
.prediksi-premium-card .pcard-twin,
.prediksi-premium-card .pcard-invest-block{
  border-radius:16px;
}

.prediksi-premium-card .pcard-bbfs{
  padding:12px 14px;
}

.prediksi-premium-card .pcard-val--bbfs{
  font-size:16px;
}

.prediksi-premium-card .pcard-half{
  padding:12px 8px;
}

.prediksi-premium-card .pcard-half .pcard-val,
.prediksi-premium-card .pcard-val--twin,
.prediksi-premium-card .pcard-invest-lines span,
.prediksi-premium-card .pcard-val{
  font-size:13px;
}

.prediksi-premium-card .pcard-invest-lines{
  gap:6px 8px;
}

.prediksi-premium-card .pcard-invest-lines span{
  border-radius:999px;
  padding:4px 9px;
}

.prediksi-empty-box{
  padding:18px 14px;
  border-radius:18px;
  border:1px dashed rgba(255,255,255,.16);
  font-size:12px;
  color:rgba(225,238,255,.72);
  background:rgba(255,255,255,.03);
}

.prediksi-info-link{
  margin-top:0;
}

@media (max-width: 980px){
  .prediksi-split-grid{
    grid-template-columns:1fr;
  }

  .prediksi-premium-card{
    max-width:400px;
  }
}

@media (max-width: 640px){
  .prediksi-dual-panel{
    padding:14px;
  }

  .prediksi-split-column{
    padding:13px;
    border-radius:22px;
  }

  .prediksi-split-head{
    flex-direction:column;
    gap:10px;
  }

  .prediksi-split-head-side{
    width:100%;
    grid-template-columns:1fr auto;
    align-items:center;
    justify-items:stretch;
  }

  .prediksi-split-count{
    justify-self:start;
  }

  .prediksi-split-arrow{
    width:36px;
    height:36px;
    font-size:16px;
  }

  .prediksi-premium-track{
    gap:12px;
  }

  .prediksi-premium-card{
    flex-basis:88%;
    min-width:88%;
    max-width:none;
    padding:14px;
  }

  .prediksi-premium-card .pcard-market-name{
    font-size:14px;
  }

  .prediksi-premium-card .pcard-val--bbfs{
    font-size:15px;
  }
}

/* ══════════════════════════════════════════════════════════════
   PAITO TOOLBOX + TABLE-HEADER CENTERING FIX
   ══════════════════════════════════════════════════════════════ */

/* table header cells center-aligned */
.paito-grid-table th {
  text-align: center !important;
  vertical-align: middle !important;
}

/* toolbox inner layout: stack items centered */
.paito-user-toolbox {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

/* AS / KOP / KEPALA / EKOR row — centered, fixed width, not stretched */
.paito-user-inputs {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  margin-bottom: 0 !important;
}
.paito-user-inputs input {
  width: 56px !important;
  flex: 0 0 56px !important;
  text-align: center !important;
}

/* color swatches row — centered, wraps neatly */
.paito-user-swatches {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  margin-bottom: 0 !important;
}

/* clear button — centered, auto width */
.toolbox-clear {
  width: auto !important;
  min-width: 80px !important;
  align-self: center !important;
}

/* mobile: keep centered */
@media (max-width: 820px) {
  .paito-user-inputs {
    justify-content: center !important;
    gap: 6px !important;
  }
  .paito-user-inputs input {
    width: 48px !important;
    flex: 0 0 48px !important;
  }
  .paito-user-swatches {
    justify-content: center !important;
  }
}

/* ── Paito: JS highlight cells must always win over theme ── */
.paito-user-hit {
  background: var(--paito-user-bg) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.55) inset, 0 0 8px rgba(255,255,255,.20) !important;
  color: #fff !important;
  font-weight: 900 !important;
}
/* colour-swatch active ring */
.paito-user-swatches .color-swatch {
  border: 2px solid transparent !important;
  outline: none !important;
  cursor: pointer !important;
  transition: transform .15s, border-color .15s !important;
}
.paito-user-swatches .color-swatch.active {
  border-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.35) !important;
  transform: scale(1.12) !important;
}
/* auto-swatch (empty bg) visual */
.paito-user-swatches .color-swatch[data-user-color=""] {
  background: linear-gradient(135deg,#ff5252 25%,#ffb020 50%,#37d67a 75%,#4d7cff 100%) !important;
}

/* ══════════════════════════════════════════════════════════════════
   RTP CEK FULL BUTTON — Theme Variants
   ══════════════════════════════════════════════════════════════════ */

/* ── COSMIC: cyan/purple/pink plasma ── */
[data-theme="cosmic"] .rtp-full-cta {
  background: linear-gradient(135deg, #0a1a3a 0%, #1a0a3a 30%, #0a2040 60%, #1a0a3a 100%);
  color: #fff;
  border: 1.5px solid rgba(54,227,255,.45);
  box-shadow:
    0 0 0 1px rgba(162,69,255,.3),
    0 0 18px rgba(54,227,255,.35),
    0 0 40px rgba(162,69,255,.2),
    inset 0 1px 0 rgba(54,227,255,.25);
  filter: drop-shadow(0 2px 10px rgba(54,227,255,.3));
  animation: cosmicCtaPulse 3s ease-in-out infinite;
}
[data-theme="cosmic"] .rtp-full-cta::before {
  background: linear-gradient(105deg, transparent 30%, rgba(54,227,255,.45) 50%, rgba(162,69,255,.3) 60%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% 0;
}
[data-theme="cosmic"] .rtp-full-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(54,227,255,.15) 0%, rgba(162,69,255,.15) 50%, rgba(255,75,221,.15) 100%);
  background-size: 300% 300%;
  animation: cosmicCtaShift 4s linear infinite;
}
@keyframes cosmicCtaShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes cosmicCtaPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(162,69,255,.3), 0 0 18px rgba(54,227,255,.35), 0 0 40px rgba(162,69,255,.2), inset 0 1px 0 rgba(54,227,255,.25); }
  50%       { box-shadow: 0 0 0 1px rgba(162,69,255,.5), 0 0 28px rgba(54,227,255,.55), 0 0 60px rgba(162,69,255,.35), inset 0 1px 0 rgba(54,227,255,.35); }
}
[data-theme="cosmic"] .rtp-full-cta span,
[data-theme="cosmic"] .rtp-full-cta {
  background-clip: unset;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  color: #fff;
}
[data-theme="cosmic"] .rtp-full-cta:hover {
  transform: translateY(-3px) scale(1.04);
  filter: drop-shadow(0 5px 18px rgba(54,227,255,.55));
}
[data-theme="cosmic"] .rtp-full-cta:hover::before { background-position: -200% 0; }

/* ── CHRISTMAS: red/gold/green festive ── */
[data-theme="christmas"] .rtp-full-cta {
  background: linear-gradient(135deg, #8b0000 0%, #cc0000 30%, #006400 60%, #cc0000 80%, #8b0000 100%);
  color: #fff;
  border: 1.5px solid rgba(255,215,0,.55);
  box-shadow:
    0 0 0 1px rgba(255,100,100,.3),
    0 4px 16px rgba(180,20,20,.55),
    0 8px 32px rgba(0,80,0,.3),
    inset 0 1px 0 rgba(255,215,0,.4);
  filter: drop-shadow(0 2px 10px rgba(255,60,60,.35));
  animation: xmasCtaBlink 2.5s ease-in-out infinite;
}
[data-theme="christmas"] .rtp-full-cta::before {
  background: linear-gradient(105deg, transparent 30%, rgba(255,215,0,.6) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% 0;
}
[data-theme="christmas"] .rtp-full-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,60,60,.12) 0px, rgba(255,60,60,.12) 12px,
    rgba(0,120,0,.12) 12px, rgba(0,120,0,.12) 24px
  );
  opacity: .5;
}
@keyframes xmasCtaBlink {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,100,100,.3), 0 4px 16px rgba(180,20,20,.55), 0 8px 32px rgba(0,80,0,.3), inset 0 1px 0 rgba(255,215,0,.4); }
  50%       { box-shadow: 0 0 0 2px rgba(255,215,0,.55), 0 4px 22px rgba(220,40,40,.7), 0 10px 40px rgba(0,100,0,.4), inset 0 1px 0 rgba(255,215,0,.6); }
}
[data-theme="christmas"] .rtp-full-cta:hover {
  transform: translateY(-2px) scale(1.04);
  filter: drop-shadow(0 4px 16px rgba(255,60,60,.5));
}
[data-theme="christmas"] .rtp-full-cta:hover::before { background-position: -200% 0; }

/* ── CNY: gold/red dragon fire ── */
[data-theme="cny"] .rtp-full-cta {
  background: linear-gradient(135deg, #7a0000 0%, #cc2200 20%, #b8860b 45%, #ffd700 55%, #b8860b 70%, #cc2200 85%, #7a0000 100%);
  color: #fff8e1;
  border: 1.5px solid rgba(255,215,0,.6);
  box-shadow:
    0 0 0 1.5px rgba(255,180,0,.4),
    0 4px 18px rgba(200,50,0,.55),
    0 8px 36px rgba(184,134,11,.35),
    inset 0 1px 0 rgba(255,240,100,.5);
  filter: drop-shadow(0 2px 12px rgba(255,160,0,.4));
  text-shadow: 0 1px 4px rgba(120,30,0,.6);
  animation: cnyCtaGlow 2s ease-in-out infinite;
}
[data-theme="cny"] .rtp-full-cta::before {
  background: linear-gradient(105deg, transparent 30%, rgba(255,240,120,.7) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% 0;
}
[data-theme="cny"] .rtp-full-cta::after {
  content: "🐉";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 1;
  opacity: .75;
  pointer-events: none;
}
@keyframes cnyCtaGlow {
  0%, 100% { filter: drop-shadow(0 2px 10px rgba(255,160,0,.4)); }
  50%       { filter: drop-shadow(0 3px 20px rgba(255,200,0,.75)); }
}
[data-theme="cny"] .rtp-full-cta:hover {
  transform: translateY(-2px) scale(1.04);
  filter: drop-shadow(0 5px 20px rgba(255,180,0,.65));
}
[data-theme="cny"] .rtp-full-cta:hover::before { background-position: -200% 0; }

/* ── NEWYEAR: gold/purple/pink fireworks ── */
[data-theme="newyear"] .rtp-full-cta {
  background: linear-gradient(135deg, #1a0a40 0%, #3a1a80 25%, #6040c0 45%, #ffe066 55%, #ff66cc 75%, #3a1a80 90%, #1a0a40 100%);
  color: #fff;
  border: 1.5px solid rgba(255,224,102,.45);
  box-shadow:
    0 0 0 1px rgba(170,136,255,.35),
    0 4px 18px rgba(100,60,200,.45),
    0 8px 36px rgba(255,102,204,.2),
    inset 0 1px 0 rgba(255,224,102,.35);
  filter: drop-shadow(0 2px 10px rgba(180,140,255,.35));
  animation: nyCtaSparkle 2.2s ease-in-out infinite;
}
[data-theme="newyear"] .rtp-full-cta::before {
  background: linear-gradient(105deg, transparent 25%, rgba(255,224,102,.55) 45%, rgba(255,102,204,.4) 55%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% 0;
}
[data-theme="newyear"] .rtp-full-cta::after {
  content: "✨";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
  animation: nyStarSpin 3s linear infinite;
}
@keyframes nyCtaSparkle {
  0%, 100% { box-shadow: 0 0 0 1px rgba(170,136,255,.35), 0 4px 18px rgba(100,60,200,.45), 0 8px 36px rgba(255,102,204,.2), inset 0 1px 0 rgba(255,224,102,.35); }
  50%       { box-shadow: 0 0 0 2px rgba(255,224,102,.55), 0 4px 24px rgba(130,80,240,.6), 0 10px 48px rgba(255,102,204,.35), inset 0 1px 0 rgba(255,224,102,.5); }
}
@keyframes nyStarSpin {
  0%   { transform: translateY(-50%) rotate(0deg); }
  100% { transform: translateY(-50%) rotate(360deg); }
}
[data-theme="newyear"] .rtp-full-cta:hover {
  transform: translateY(-3px) scale(1.04);
  filter: drop-shadow(0 5px 18px rgba(180,140,255,.55));
}
[data-theme="newyear"] .rtp-full-cta:hover::before { background-position: -200% 0; }

/* ── HALLOWEEN: orange/purple spooky ── */
[data-theme="halloween"] .rtp-full-cta {
  background: linear-gradient(135deg, #1a0028 0%, #4a0080 25%, #200010 45%, #cc4400 60%, #ff8c00 70%, #4a0080 85%, #1a0028 100%);
  color: #ffe0b0;
  border: 1.5px solid rgba(255,140,0,.45);
  box-shadow:
    0 0 0 1px rgba(139,0,255,.35),
    0 4px 18px rgba(200,60,0,.5),
    0 8px 36px rgba(100,0,200,.25),
    inset 0 1px 0 rgba(255,140,0,.3);
  filter: drop-shadow(0 2px 10px rgba(200,80,0,.4));
  text-shadow: 0 0 8px rgba(255,120,0,.5);
  animation: hwCtaFlicker 1.8s ease-in-out infinite;
}
[data-theme="halloween"] .rtp-full-cta::before {
  background: linear-gradient(105deg, transparent 30%, rgba(255,140,0,.5) 50%, rgba(200,0,255,.3) 60%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% 0;
}
[data-theme="halloween"] .rtp-full-cta::after {
  content: "🎃";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 1;
  opacity: .8;
  pointer-events: none;
}
@keyframes hwCtaFlicker {
  0%, 90%, 100% { opacity: 1; filter: drop-shadow(0 2px 10px rgba(200,80,0,.4)); }
  92%            { opacity: .85; filter: drop-shadow(0 2px 4px rgba(200,80,0,.2)); }
  94%            { opacity: 1; filter: drop-shadow(0 2px 14px rgba(200,80,0,.6)); }
  96%            { opacity: .9; filter: drop-shadow(0 1px 6px rgba(200,80,0,.3)); }
}
[data-theme="halloween"] .rtp-full-cta:hover {
  transform: translateY(-2px) scale(1.04);
  filter: drop-shadow(0 5px 18px rgba(255,120,0,.55));
}
[data-theme="halloween"] .rtp-full-cta:hover::before { background-position: -200% 0; }

/* shared z-index so ::after emoji sits above ::before shimmer */
[data-theme="cny"] .rtp-full-cta::before,
[data-theme="newyear"] .rtp-full-cta::before,
[data-theme="halloween"] .rtp-full-cta::before { z-index: 1; }
[data-theme="cny"] .rtp-full-cta::after,
[data-theme="newyear"] .rtp-full-cta::after,
[data-theme="halloween"] .rtp-full-cta::after { z-index: 2; }

/* ══════════════════════════════════════════════════════════════════
   PREDIKSI PREMIUM CARD + ROOM RESULT CARD — Theme Variants
   Overrides the hardcoded cosmic pink/cyan glow orbs and card
   border/background to match each active theme.
   ══════════════════════════════════════════════════════════════════ */

/* ── COSMIC (default, already matches — just explicit for clarity) ── */
[data-theme="cosmic"] .prediksi-premium-card,
[data-theme="cosmic"] .room-result-card-public {
  border-color: rgba(54,227,255,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
    linear-gradient(160deg, rgba(14,20,48,.95), rgba(7,10,24,.97));
  box-shadow: 0 16px 36px rgba(0,0,0,.30), 0 0 0 1px rgba(54,227,255,.06) inset;
}
[data-theme="cosmic"] .prediksi-premium-card::before,
[data-theme="cosmic"] .room-result-card-glow {
  background: radial-gradient(circle, rgba(255,75,221,.28), rgba(255,75,221,0) 68%);
}
[data-theme="cosmic"] .prediksi-premium-card::after,
[data-theme="cosmic"] .room-result-card-public::after {
  background: radial-gradient(circle, rgba(54,227,255,.20), rgba(54,227,255,0) 68%);
}
[data-theme="cosmic"] .room-result-card-number {
  color: #f7fbff;
  text-shadow: 0 0 18px rgba(54,227,255,.22);
}
[data-theme="cosmic"] .room-result-chip-accent {
  background: linear-gradient(135deg, #36e3ff, #a245ff);
  color: #fff;
}
[data-theme="cosmic"] .prediksi-split-column--ngamen {
  border-color: rgba(162,69,255,.2);
}
[data-theme="cosmic"] .prediksi-split-column--harian {
  border-color: rgba(54,227,255,.18);
}

/* ── CHRISTMAS: dark green/red glow, gold accent ── */
[data-theme="christmas"] .prediksi-premium-card,
[data-theme="christmas"] .room-result-card-public {
  border-color: rgba(220,60,60,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    linear-gradient(160deg, rgba(22,6,6,.95), rgba(8,16,6,.97));
  box-shadow: 0 16px 36px rgba(0,0,0,.38), 0 0 0 1px rgba(200,40,40,.08) inset;
}
[data-theme="christmas"] .prediksi-premium-card::before,
[data-theme="christmas"] .room-result-card-glow {
  background: radial-gradient(circle, rgba(200,20,20,.32), rgba(200,20,20,0) 68%);
}
[data-theme="christmas"] .prediksi-premium-card::after,
[data-theme="christmas"] .room-result-card-public::after {
  background: radial-gradient(circle, rgba(20,140,40,.26), rgba(20,140,40,0) 68%);
}
[data-theme="christmas"] .room-result-card-number {
  color: #fff5f5;
  text-shadow: 0 0 18px rgba(255,80,80,.3);
}
[data-theme="christmas"] .room-result-chip-accent {
  background: linear-gradient(135deg, #ffd700, #ff3c3c);
  color: #1a0000;
}
[data-theme="christmas"] .room-result-stat {
  background: rgba(180,20,20,.12);
  border-color: rgba(200,60,60,.14);
}
[data-theme="christmas"] .prediksi-split-column--ngamen {
  border-color: rgba(200,40,40,.22);
}
[data-theme="christmas"] .prediksi-split-column--harian {
  border-color: rgba(20,140,40,.2);
}
[data-theme="christmas"] .prediksi-premium-card .pcard-header,
[data-theme="christmas"] .prediksi-premium-card .pcard-body > * {
  border-color: rgba(200,60,60,.14);
}
[data-theme="christmas"] .room-result-special-block {
  background: linear-gradient(180deg, rgba(200,20,20,.1), rgba(20,100,20,.08));
  border-color: rgba(200,60,60,.16);
}

/* ── CNY: gold/red dragon glow ── */
[data-theme="cny"] .prediksi-premium-card,
[data-theme="cny"] .room-result-card-public {
  border-color: rgba(220,150,0,.28);
  background:
    linear-gradient(180deg, rgba(255,200,50,.08), rgba(255,200,50,.02)),
    linear-gradient(160deg, rgba(32,8,0,.95), rgba(18,4,0,.97));
  box-shadow: 0 16px 36px rgba(0,0,0,.42), 0 0 0 1px rgba(200,120,0,.10) inset;
}
[data-theme="cny"] .prediksi-premium-card::before,
[data-theme="cny"] .room-result-card-glow {
  background: radial-gradient(circle, rgba(255,60,0,.32), rgba(255,60,0,0) 68%);
}
[data-theme="cny"] .prediksi-premium-card::after,
[data-theme="cny"] .room-result-card-public::after {
  background: radial-gradient(circle, rgba(255,200,0,.26), rgba(255,200,0,0) 68%);
}
[data-theme="cny"] .room-result-card-number {
  color: #fff8e0;
  text-shadow: 0 0 20px rgba(255,180,0,.35);
}
[data-theme="cny"] .room-result-chip-accent {
  background: linear-gradient(135deg, #ffd700, #ff4400);
  color: #1a0800;
}
[data-theme="cny"] .room-result-stat {
  background: rgba(200,80,0,.10);
  border-color: rgba(220,140,0,.16);
}
[data-theme="cny"] .prediksi-split-column--ngamen {
  border-color: rgba(220,60,0,.22);
}
[data-theme="cny"] .prediksi-split-column--harian {
  border-color: rgba(200,140,0,.22);
}
[data-theme="cny"] .room-result-special-block {
  background: linear-gradient(180deg, rgba(200,100,0,.12), rgba(180,60,0,.06));
  border-color: rgba(220,140,0,.18);
}

/* ── NEWYEAR: purple/gold/pink fireworks glow ── */
[data-theme="newyear"] .prediksi-premium-card,
[data-theme="newyear"] .room-result-card-public {
  border-color: rgba(180,140,255,.20);
  background:
    linear-gradient(180deg, rgba(180,140,255,.08), rgba(180,140,255,.02)),
    linear-gradient(160deg, rgba(10,8,28,.95), rgba(5,4,18,.97));
  box-shadow: 0 16px 36px rgba(0,0,0,.40), 0 0 0 1px rgba(160,120,255,.07) inset;
}
[data-theme="newyear"] .prediksi-premium-card::before,
[data-theme="newyear"] .room-result-card-glow {
  background: radial-gradient(circle, rgba(255,102,204,.28), rgba(255,102,204,0) 68%);
}
[data-theme="newyear"] .prediksi-premium-card::after,
[data-theme="newyear"] .room-result-card-public::after {
  background: radial-gradient(circle, rgba(255,224,102,.22), rgba(170,136,255,.16) 50%, rgba(255,224,102,0) 68%);
}
[data-theme="newyear"] .room-result-card-number {
  color: #f8f6ff;
  text-shadow: 0 0 18px rgba(200,160,255,.30);
}
[data-theme="newyear"] .room-result-chip-accent {
  background: linear-gradient(135deg, #ffe066, #ff66cc);
  color: #1a0a30;
}
[data-theme="newyear"] .room-result-stat {
  background: rgba(120,80,200,.10);
  border-color: rgba(180,140,255,.14);
}
[data-theme="newyear"] .prediksi-split-column--ngamen {
  border-color: rgba(255,102,204,.18);
}
[data-theme="newyear"] .prediksi-split-column--harian {
  border-color: rgba(170,136,255,.20);
}
[data-theme="newyear"] .room-result-special-block {
  background: linear-gradient(180deg, rgba(120,80,200,.10), rgba(255,224,102,.06));
  border-color: rgba(180,140,255,.16);
}

/* ── HALLOWEEN: orange/purple spooky glow ── */
[data-theme="halloween"] .prediksi-premium-card,
[data-theme="halloween"] .room-result-card-public {
  border-color: rgba(200,80,0,.26);
  background:
    linear-gradient(180deg, rgba(200,80,0,.07), rgba(100,0,180,.04)),
    linear-gradient(160deg, rgba(18,4,24,.96), rgba(8,2,14,.97));
  box-shadow: 0 16px 36px rgba(0,0,0,.44), 0 0 0 1px rgba(180,50,0,.07) inset;
}
[data-theme="halloween"] .prediksi-premium-card::before,
[data-theme="halloween"] .room-result-card-glow {
  background: radial-gradient(circle, rgba(255,100,0,.32), rgba(255,100,0,0) 68%);
}
[data-theme="halloween"] .prediksi-premium-card::after,
[data-theme="halloween"] .room-result-card-public::after {
  background: radial-gradient(circle, rgba(139,0,255,.26), rgba(139,0,255,0) 68%);
}
[data-theme="halloween"] .room-result-card-number {
  color: #fff0e0;
  text-shadow: 0 0 18px rgba(255,120,0,.30);
}
[data-theme="halloween"] .room-result-chip-accent {
  background: linear-gradient(135deg, #ff8c00, #8b00ff);
  color: #fff0e0;
}
[data-theme="halloween"] .room-result-stat {
  background: rgba(180,50,0,.10);
  border-color: rgba(200,80,0,.16);
}
[data-theme="halloween"] .prediksi-split-column--ngamen {
  border-color: rgba(200,80,0,.22);
}
[data-theme="halloween"] .prediksi-split-column--harian {
  border-color: rgba(120,0,200,.20);
}
[data-theme="halloween"] .room-result-special-block {
  background: linear-gradient(180deg, rgba(180,50,0,.10), rgba(100,0,160,.08));
  border-color: rgba(200,80,0,.16);
}

/* ══════════════════════════════════════════════════════════════════
   POLA SLOT — rtp-pattern-card + rtp-pattern-section Theme Variants
   ══════════════════════════════════════════════════════════════════ */

/* ── COSMIC (explicit, matches default) ── */
[data-theme="cosmic"] .rtp-pattern-section {
  border-color: rgba(54,227,255,.14);
  background: linear-gradient(155deg, rgba(7,14,32,.96), rgba(5,10,24,.98));
}
[data-theme="cosmic"] .rtp-pattern-card {
  background: linear-gradient(150deg, rgba(12,22,48,.97), rgba(7,14,30,.99));
  border-color: rgba(54,227,255,.14);
}
[data-theme="cosmic"] .rtp-pattern-card h3 {
  background: linear-gradient(90deg, #fff, #9ec6ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="cosmic"] .rtp-pattern-carousel {
  scrollbar-color: rgba(54,227,255,.25) transparent;
}
[data-theme="cosmic"] .rtp-pattern-carousel::-webkit-scrollbar-thumb {
  background: rgba(54,227,255,.25);
}

/* ── CHRISTMAS: red/green/gold ── */
[data-theme="christmas"] .rtp-pattern-section {
  border-color: rgba(200,40,40,.18);
  background: linear-gradient(155deg, rgba(18,5,5,.97), rgba(6,14,6,.98));
}
[data-theme="christmas"] .rtp-pattern-card {
  background: linear-gradient(150deg, rgba(22,5,5,.97), rgba(6,16,6,.99));
  border-color: rgba(200,50,50,.18);
}
[data-theme="christmas"] .rtp-pattern-card h3 {
  background: linear-gradient(90deg, #fff5f5, #ffd700);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="christmas"] .rtp-pattern-carousel {
  scrollbar-color: rgba(200,50,50,.30) transparent;
}
[data-theme="christmas"] .rtp-pattern-carousel::-webkit-scrollbar-thumb {
  background: rgba(200,50,50,.30);
}

/* ── CNY: gold/red dragon ── */
[data-theme="cny"] .rtp-pattern-section {
  border-color: rgba(220,140,0,.20);
  background: linear-gradient(155deg, rgba(24,5,0,.97), rgba(14,3,0,.98));
}
[data-theme="cny"] .rtp-pattern-card {
  background: linear-gradient(150deg, rgba(32,7,0,.97), rgba(18,3,0,.99));
  border-color: rgba(200,120,0,.20);
}
[data-theme="cny"] .rtp-pattern-card h3 {
  background: linear-gradient(90deg, #fff8e0, #ffd700);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="cny"] .rtp-pattern-carousel {
  scrollbar-color: rgba(200,140,0,.30) transparent;
}
[data-theme="cny"] .rtp-pattern-carousel::-webkit-scrollbar-thumb {
  background: rgba(200,140,0,.30);
}

/* ── NEWYEAR: gold/purple/pink ── */
[data-theme="newyear"] .rtp-pattern-section {
  border-color: rgba(170,136,255,.18);
  background: linear-gradient(155deg, rgba(8,6,22,.97), rgba(4,3,14,.98));
}
[data-theme="newyear"] .rtp-pattern-card {
  background: linear-gradient(150deg, rgba(10,8,28,.97), rgba(5,4,18,.99));
  border-color: rgba(160,120,255,.16);
}
[data-theme="newyear"] .rtp-pattern-card h3 {
  background: linear-gradient(90deg, #f8f6ff, #ffe066);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="newyear"] .rtp-pattern-carousel {
  scrollbar-color: rgba(170,136,255,.28) transparent;
}
[data-theme="newyear"] .rtp-pattern-carousel::-webkit-scrollbar-thumb {
  background: rgba(170,136,255,.28);
}

/* ── HALLOWEEN: orange/purple ── */
[data-theme="halloween"] .rtp-pattern-section {
  border-color: rgba(180,60,0,.20);
  background: linear-gradient(155deg, rgba(14,3,20,.97), rgba(7,1,12,.98));
}
[data-theme="halloween"] .rtp-pattern-card {
  background: linear-gradient(150deg, rgba(18,4,26,.97), rgba(8,2,14,.99));
  border-color: rgba(180,60,0,.18);
}
[data-theme="halloween"] .rtp-pattern-card h3 {
  background: linear-gradient(90deg, #fff0e0, #ff8c00);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="halloween"] .rtp-pattern-carousel {
  scrollbar-color: rgba(200,80,0,.28) transparent;
}
[data-theme="halloween"] .rtp-pattern-carousel::-webkit-scrollbar-thumb {
  background: rgba(200,80,0,.28);
}

/* ══════════════════════════════════════════════════════════════════
   RTP PERCENTAGE — Loading / Count-up Animations (per theme)
   .is-loading is added to .rtp-percent-bar while JS animates,
   removed when count-up finishes.
   ══════════════════════════════════════════════════════════════════ */

/* Base: number text transitions smoothly */
.js-rtp-percent {
  transition: none; /* JS updates directly — no CSS transition needed */
  font-variant-numeric: tabular-nums;
}

/* Bar track pulses while loading */
.rtp-percent-bar.is-loading {
  animation: rtpBarTrackPulse 1.1s ease-in-out infinite;
}

/* Fill shimmer sweep during loading */
.rtp-percent-bar.is-loading .rtp-percent-fill {
  position: relative;
  overflow: hidden;
}
.rtp-percent-bar.is-loading .rtp-percent-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: rtpShimmerSweep 1s linear infinite;
  border-radius: inherit;
}

@keyframes rtpShimmerSweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── COSMIC: cyan pulse + shimmer ── */
[data-theme="cosmic"] .rtp-percent-bar.is-loading {
  animation: rtpBarPulseCosmic 1.1s ease-in-out infinite;
}
[data-theme="cosmic"] .rtp-percent-bar.is-loading .rtp-percent-fill::after {
  background: linear-gradient(90deg, transparent 0%, rgba(54,227,255,.7) 50%, transparent 100%);
  background-size: 200% 100%;
}
[data-theme="cosmic"] .rtp-game-card .js-rtp-percent {
  animation: rtpNumGlowCosmic 2s ease-in-out infinite;
}
@keyframes rtpBarPulseCosmic {
  0%, 100% { box-shadow: 0 0 0 0 rgba(54,227,255,0); background: rgba(255,255,255,.08); }
  50%       { box-shadow: 0 0 6px 1px rgba(54,227,255,.25); background: rgba(54,227,255,.12); }
}
@keyframes rtpNumGlowCosmic {
  0%, 100% { text-shadow: none; color: #8fe9ff; }
  50%       { text-shadow: 0 0 10px rgba(54,227,255,.7); color: #36e3ff; }
}

/* ── CHRISTMAS: red/gold pulse ── */
[data-theme="christmas"] .rtp-percent-bar.is-loading {
  animation: rtpBarPulseXmas 1.1s ease-in-out infinite;
}
[data-theme="christmas"] .rtp-percent-bar.is-loading .rtp-percent-fill::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255,215,0,.65) 50%, transparent 100%);
  background-size: 200% 100%;
}
[data-theme="christmas"] .rtp-game-card .js-rtp-percent {
  animation: rtpNumGlowXmas 2s ease-in-out infinite;
}
@keyframes rtpBarPulseXmas {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,60,60,0); background: rgba(255,255,255,.08); }
  50%       { box-shadow: 0 0 6px 1px rgba(255,60,60,.28); background: rgba(255,60,60,.10); }
}
@keyframes rtpNumGlowXmas {
  0%, 100% { text-shadow: none; color: #ffb0b0; }
  50%       { text-shadow: 0 0 10px rgba(255,80,80,.65); color: #ff6060; }
}

/* ── CNY: gold fire pulse ── */
[data-theme="cny"] .rtp-percent-bar.is-loading {
  animation: rtpBarPulseCny 1.1s ease-in-out infinite;
}
[data-theme="cny"] .rtp-percent-bar.is-loading .rtp-percent-fill::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255,220,0,.70) 50%, transparent 100%);
  background-size: 200% 100%;
}
[data-theme="cny"] .rtp-game-card .js-rtp-percent {
  animation: rtpNumGlowCny 2s ease-in-out infinite;
}
@keyframes rtpBarPulseCny {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,180,0,0); background: rgba(255,255,255,.08); }
  50%       { box-shadow: 0 0 6px 1px rgba(255,180,0,.30); background: rgba(255,180,0,.10); }
}
@keyframes rtpNumGlowCny {
  0%, 100% { text-shadow: none; color: #ffd080; }
  50%       { text-shadow: 0 0 10px rgba(255,200,0,.70); color: #ffd700; }
}

/* ── NEWYEAR: purple/gold sparkle pulse ── */
[data-theme="newyear"] .rtp-percent-bar.is-loading {
  animation: rtpBarPulseNy 1.1s ease-in-out infinite;
}
[data-theme="newyear"] .rtp-percent-bar.is-loading .rtp-percent-fill::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255,224,102,.65) 40%, rgba(170,136,255,.55) 60%, transparent 100%);
  background-size: 200% 100%;
}
[data-theme="newyear"] .rtp-game-card .js-rtp-percent {
  animation: rtpNumGlowNy 2s ease-in-out infinite;
}
@keyframes rtpBarPulseNy {
  0%, 100% { box-shadow: 0 0 0 0 rgba(170,136,255,0); background: rgba(255,255,255,.08); }
  50%       { box-shadow: 0 0 6px 1px rgba(170,136,255,.28); background: rgba(170,136,255,.10); }
}
@keyframes rtpNumGlowNy {
  0%, 100% { text-shadow: none; color: #d4b8ff; }
  50%       { text-shadow: 0 0 10px rgba(200,160,255,.65); color: #ffe066; }
}

/* ── HALLOWEEN: orange/purple flicker ── */
[data-theme="halloween"] .rtp-percent-bar.is-loading {
  animation: rtpBarPulseHw 1s ease-in-out infinite;
}
[data-theme="halloween"] .rtp-percent-bar.is-loading .rtp-percent-fill::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255,140,0,.65) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: rtpShimmerSweep .75s linear infinite; /* faster flicker for halloween */
}
[data-theme="halloween"] .rtp-game-card .js-rtp-percent {
  animation: rtpNumGlowHw 1.6s ease-in-out infinite;
}
@keyframes rtpBarPulseHw {
  0%, 88%, 100% { box-shadow: 0 0 0 0 rgba(200,80,0,0); background: rgba(255,255,255,.08); }
  44%            { box-shadow: 0 0 6px 1px rgba(200,80,0,.30); background: rgba(200,80,0,.10); }
  90%            { box-shadow: 0 0 2px 0 rgba(200,80,0,.10); background: rgba(255,255,255,.05); }
  92%            { box-shadow: 0 0 8px 2px rgba(255,120,0,.35); background: rgba(200,80,0,.12); }
}
@keyframes rtpNumGlowHw {
  0%, 100% { text-shadow: none; color: #ffb060; }
  50%       { text-shadow: 0 0 10px rgba(255,120,0,.70); color: #ff8c00; }
}

/* Fallback for themes not listed (safety net) */
@keyframes rtpBarTrackPulse {
  0%, 100% { background: rgba(255,255,255,.08); }
  50%       { background: rgba(255,255,255,.14); }
}

/* ═══════════════════════════════════════════════════════════════════
   SITE.PHP POST CARD EFFECTS — applied to all themes
   Adds: lift on hover, glow border, shimmer overlay, fade-in entry
   Does NOT touch image setup
   ═══════════════════════════════════════════════════════════════════ */

/* --- Base card transition & lift --- */
.site-page-clean .network-blog-item {
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    box-shadow .28s cubic-bezier(.2,.8,.2,1),
    border-color .28s ease;
  will-change: transform;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Shimmer sweep overlay (pseudo-element, never touches the img) */
.site-page-clean .network-blog-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255,255,255,.06) 50%,
    transparent 70%
  );
  background-size: 250% 100%;
  background-position: 200% 0;
  transition: background-position .5s ease;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}

.site-page-clean .network-blog-item:hover::before {
  background-position: -50% 0;
}

/* Top accent line (colour set per-theme below) */
.site-page-clean .network-blog-item::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  opacity: 0;
  transition: opacity .28s ease;
  border-radius: 18px 18px 0 0;
  z-index: 2;
}

.site-page-clean .network-blog-item:hover::after {
  opacity: 1;
}

/* Lift + shadow on hover */
.site-page-clean .network-blog-item:hover {
  transform: translateY(-5px) scale(1.012);
}

/* Fade-in stagger for post cards on page load */
@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.site-page-clean .network-blog-item {
  animation: cardFadeUp .55s cubic-bezier(.2,.8,.2,1) both;
}
.site-page-clean .network-blog-item:nth-child(1) { animation-delay: .05s; }
.site-page-clean .network-blog-item:nth-child(2) { animation-delay: .13s; }
.site-page-clean .network-blog-item:nth-child(3) { animation-delay: .21s; }
.site-page-clean .network-blog-item:nth-child(4) { animation-delay: .29s; }
.site-page-clean .network-blog-item:nth-child(5) { animation-delay: .37s; }

/* Body text / title subtle brightness on hover */
.site-page-clean .network-blog-item:hover h3 {
  color: #ffffff;
  transition: color .2s ease;
}

/* Detail toggle highlight on hover */
.site-page-clean .network-blog-item:hover .network-detail-toggle {
  opacity: 1;
  transition: opacity .2s ease;
}

/* ── cosmic ── cyan/blue glow */
[data-theme="cosmic"] .site-page-clean .network-blog-item:hover {
  border-color: rgba(54,227,255,.38);
  box-shadow:
    0 12px 36px rgba(0,0,0,.35),
    0 0 0 1px rgba(54,227,255,.20),
    0 0 18px rgba(54,227,255,.15);
}
[data-theme="cosmic"] .site-page-clean .network-blog-item::after {
  background: linear-gradient(90deg, transparent, rgba(54,227,255,.7), transparent);
}

/* ── christmas ── red/gold glow */
[data-theme="christmas"] .site-page-clean .network-blog-item:hover {
  border-color: rgba(255,80,80,.38);
  box-shadow:
    0 12px 36px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,80,80,.20),
    0 0 18px rgba(255,80,80,.15);
}
[data-theme="christmas"] .site-page-clean .network-blog-item::after {
  background: linear-gradient(90deg, transparent, rgba(255,80,80,.7), transparent);
}
[data-theme="christmas"] .site-page-clean .network-blog-item:hover h3 {
  color: #fff5f5;
}

/* ── cny ── gold/red glow */
[data-theme="cny"] .site-page-clean .network-blog-item:hover {
  border-color: rgba(255,200,40,.40);
  box-shadow:
    0 12px 36px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,200,40,.22),
    0 0 20px rgba(255,160,0,.18);
}
[data-theme="cny"] .site-page-clean .network-blog-item::after {
  background: linear-gradient(90deg, transparent, rgba(255,200,40,.80), transparent);
}
[data-theme="cny"] .site-page-clean .network-blog-item:hover h3 {
  color: #fff8e1;
}

/* ── halloween ── orange/purple glow */
[data-theme="halloween"] .site-page-clean .network-blog-item:hover {
  border-color: rgba(255,120,0,.38);
  box-shadow:
    0 12px 36px rgba(0,0,0,.40),
    0 0 0 1px rgba(255,120,0,.22),
    0 0 18px rgba(180,0,255,.18);
}
[data-theme="halloween"] .site-page-clean .network-blog-item::after {
  background: linear-gradient(90deg, transparent, rgba(255,120,0,.75), rgba(180,0,255,.5), transparent);
}

/* ── newyear ── gold/white glow */
[data-theme="newyear"] .site-page-clean .network-blog-item:hover {
  border-color: rgba(255,215,80,.40);
  box-shadow:
    0 12px 36px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,215,80,.24),
    0 0 20px rgba(255,200,60,.18);
}
[data-theme="newyear"] .site-page-clean .network-blog-item::after {
  background: linear-gradient(90deg, transparent, rgba(255,215,80,.80), transparent);
}
[data-theme="newyear"] .site-page-clean .network-blog-item:hover h3 {
  color: #fffbe6;
}

/* ── sakura ── pink/rose glow */
[data-theme="sakura"] .site-page-clean .network-blog-item:hover {
  border-color: rgba(255,140,180,.40);
  box-shadow:
    0 12px 36px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,140,180,.22),
    0 0 18px rgba(255,100,160,.18);
}
[data-theme="sakura"] .site-page-clean .network-blog-item::after {
  background: linear-gradient(90deg, transparent, rgba(255,140,180,.80), transparent);
}
[data-theme="sakura"] .site-page-clean .network-blog-item:hover h3 {
  color: #fff0f5;
}

/* --- Reduce motion: skip animation for accessibility --- */
@media (prefers-reduced-motion: reduce) {
  .site-page-clean .network-blog-item {
    animation: none;
    transition: box-shadow .2s ease, border-color .2s ease;
  }
  .site-page-clean .network-blog-item:hover {
    transform: none;
  }
  .site-page-clean .network-blog-item::before {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   NEW FOOTER — site-footer-new
   Desktop: logo+desc left | social icons right | copyright bottom left
   Mobile:  left-aligned — logo+title+desc in one row, socials below
   ═══════════════════════════════════════════════════════════════════ */

.site-footer-new {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px 14px;
  border-radius: var(--r-xl);
  margin-top: 8px;
}

/* Legacy — kept for compat */
.footer-main-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
}

/* Brand column — logo always inline with text */
.footer-brand-col {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}

.footer-logo-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 5px;
  margin-top: 1px;
}

.footer-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.footer-brand-text strong {
  display: block;
  font-family: "Orbitron", sans-serif;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text, #f0f6ff);
  line-height: 1.2;
}

.footer-brand-text p {
  margin: 0;
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--muted, #7a8faa);
  max-width: 320px;
}

/* Social icons column */
.footer-social-col {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: flex-start;
  flex-shrink: 0;
}

/* Footer social buttons — smaller than header */
.footer-social-btn.header-social-btn {
  min-height: 24px;
  padding: 3px 9px;
  font-size: 9.5px;
  border-radius: 999px;
}

.footer-social-btn.header-social-btn::before {
  width: 12px;
  height: 12px;
}

.footer-social-btn .footer-social-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Copyright row — handled inline by footer.php */
.footer-copy-row {
  width: 100%;
  box-sizing: border-box;
  font-size: 9px;
  color: var(--muted, #6a7d98);
  letter-spacing: .03em;
}

/* Mobile — left-aligned, logo inline with title+desc */
@media (max-width: 600px) {
  .site-footer-new {
    padding: 0 13px 12px;
    gap: 0;
  }
  .footer-main-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
  }
  .footer-brand-col {
    /* keep row layout: logo left, text right */
    flex-direction: row;
    align-items: flex-start;
    flex: unset;
    width: 100%;
  }
  .footer-brand-text p {
    max-width: 100%;
  }
  .footer-social-col {
    justify-content: flex-start;
  }
  .footer-copy-row {
    text-align: left;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER LEGAL LINKS ROW
   ═══════════════════════════════════════════════════════════════════ */

.footer-legal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 0 5px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.footer-legal-link {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted, #7a8faa);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  text-decoration: none;
  transition: color .16s, background .16s, border-color .16s;
  white-space: nowrap;
}

.footer-legal-link:hover {
  color: var(--cyan, #36e3ff);
  background: rgba(54,227,255,.08);
  border-color: rgba(54,227,255,.22);
}

.footer-legal-link.active {
  color: var(--cyan, #36e3ff);
  background: rgba(54,227,255,.12);
  border-color: rgba(54,227,255,.3);
}

/* ═══════════════════════════════════════════════════════════════════
   LEGAL PAGE — tabs + content
   ═══════════════════════════════════════════════════════════════════ */

.legal-page-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
}

.legal-tab-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted, #7a8faa);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  transition: color .16s, background .16s, border-color .16s;
}

.legal-tab-btn:hover {
  color: #dff3ff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

.legal-tab-btn.active {
  color: var(--cyan, #36e3ff);
  background: rgba(54,227,255,.12);
  border-color: rgba(54,227,255,.35);
}

.legal-content-panel {
  min-height: 220px;
}

.legal-page-content {
  font-size: 13.5px;
  line-height: 1.75;
  color: #cdd8f0;
}

.legal-page-content h1,
.legal-page-content h2,
.legal-page-content h3 {
  color: #f0f6ff;
  margin: 1.4em 0 .5em;
  font-family: "Orbitron", sans-serif;
  letter-spacing: .06em;
}

.legal-page-content h1 { font-size: 17px; }
.legal-page-content h2 { font-size: 14px; }
.legal-page-content h3 { font-size: 12px; }

.legal-page-content p  { margin: 0 0 .9em; }
.legal-page-content ul,
.legal-page-content ol { margin: 0 0 .9em; padding-left: 1.5em; }
.legal-page-content li { margin-bottom: .35em; }

.legal-page-content a {
  color: var(--cyan, #36e3ff);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-empty-notice {
  opacity: .55;
  font-style: italic;
  font-size: 12px;
}

@media (max-width: 600px) {
  .footer-legal-row { gap: 4px 5px; }
  .footer-legal-link { font-size: 9px; padding: 3px 8px; }
  .legal-page-tabs { gap: 5px; }
  .legal-tab-btn { font-size: 10px; padding: 6px 11px; }
}

/* ═══════════════════════════════════════════════════════════════════
   SITE SOCIAL STRIP — below brand strip on site.php
   Matches header-social-btn style, small, responsive
   ═══════════════════════════════════════════════════════════════════ */

.site-social-strip {
  padding: 10px 14px;
  border-radius: 14px;
}

.site-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.site-social-btn.header-social-btn {
  min-height: 28px;
  padding: 4px 11px;
  font-size: 10.5px;
}

/* site-page-clean overrides to keep strip tight */
.site-page-clean .site-social-strip {
  padding: 8px 12px;
}

@media (max-width: 480px) {
  .site-social-strip {
    padding: 8px 10px;
  }
  .site-social-links {
    gap: 6px;
  }
  .site-social-btn.header-social-btn {
    min-height: 26px;
    padding: 4px 9px;
    font-size: 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN — site social rows inside site edit form
   ═══════════════════════════════════════════════════════════════════ */

#siteSocialRows .site-social-row {
  margin-bottom: 4px;
}

/* ── Site Social Inline Row (below site-info, above aktivitas) ── */
.site-social-inline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 12px 0 0;
  background: transparent;
  border-radius: 0;
  border: none;
  margin-top: 12px;
  margin-bottom: 0;
}
.site-social-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  color: #d4e4ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.site-social-inline-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
  border: 1px solid rgba(255,255,255,.08);
  color: #d4e4ff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.site-social-inline-btn:hover {
  transform: translateY(-2px);
}
.site-social-inline-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
  transition: transform 0.3s;
}
.site-social-inline-btn:hover .site-social-inline-icon {
  transform: scale(1.15) rotate(5deg);
}

/* Platform-specific enhanced colors */
.site-social-inline-btn[data-social*="telegram"] { 
  border-color: rgba(42,171,238,.25); 
}
.site-social-inline-btn[data-social*="telegram"]:hover { 
  background: rgba(42,171,238,.15);
  border-color: rgba(42,171,238,.3);
  color: #64C8FF;
  box-shadow: 0 4px 16px rgba(42,171,238,.15);
}

.site-social-inline-btn[data-social*="whatsapp"] { 
  border-color: rgba(37,211,102,.25); 
}
.site-social-inline-btn[data-social*="whatsapp"]:hover { 
  background: rgba(37,211,102,.15);
  border-color: rgba(37,211,102,.3);
  color: #75F94C;
  box-shadow: 0 4px 16px rgba(37,211,102,.15);
}

.site-social-inline-btn[data-social*="instagram"] { 
  border-color: rgba(225,48,108,.25); 
}
.site-social-inline-btn[data-social*="instagram"]:hover { 
  background: linear-gradient(135deg, rgba(131,58,180,0.15), rgba(253,29,29,0.15));
  border-color: rgba(225,48,108,.3);
  color: #FF6EC7;
  box-shadow: 0 4px 16px rgba(225,48,108,.15);
}

.site-social-inline-btn[data-social*="tiktok"] { 
  border-color: rgba(105,201,208,.25); 
}
.site-social-inline-btn[data-social*="tiktok"]:hover { 
  background: rgba(105,201,208,.15);
  border-color: rgba(105,201,208,.3);
  color: #69D0D0;
  box-shadow: 0 4px 16px rgba(105,201,208,.15);
}

@media (max-width: 480px) {
  .site-social-inline-row { gap: 6px; padding: 10px; }
  .site-social-inline-btn { font-size: 11px; padding: 8px 12px; }
  .site-social-inline-icon { width: 18px; height: 18px; }
}

/* ── Paito toolbox: moved to bottom of table ── */
.paito-market-panel .paito-user-toolbox {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 14px !important;
  margin-bottom: 0 !important;
  border-radius: 14px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 10px 14px !important;
}
.paito-market-panel .paito-user-inputs {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 0 !important;
  width: auto !important;
}
.paito-market-panel .paito-user-swatches {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 0 !important;
}
.paito-market-panel .toolbox-clear {
  flex-shrink: 0 !important;
  align-self: center !important;
}
@media (max-width: 600px) {
  .paito-market-panel .paito-user-toolbox {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px !important;
    gap: 8px !important;
  }
  .paito-market-panel .paito-user-inputs {
    width: 100% !important;
    justify-content: stretch !important;
  }
  .paito-market-panel .paito-user-inputs input {
    flex: 1 !important;
  }
  .paito-market-panel .paito-user-swatches {
    justify-content: center !important;
  }
  .paito-market-panel .toolbox-clear {
    width: 100% !important;
  }
}

/* ── Room Result: compact shio/time stats ── */
.room-result-card-stats--compact .room-result-stat{
  padding:6px 8px;
  gap:3px;
  border-radius:10px;
}
.room-result-card-stats--compact .room-result-stat-label{
  font-size:9.5px;
}
.room-result-card-stats--compact .room-result-stat-value{
  font-size:13px;
}

/* ── Winner ticker wrap ── */
.room-result-winner-ticker-wrap{
  margin:0;
  flex-shrink:0;
}
.room-result-winner-ticker{
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow:hidden;
  padding:8px 0;
}
.room-result-winner-list{
  display:flex;
  flex-direction:column;
  gap:0;
}
.room-result-winner-item{
  display:flex;
  align-items:center;
  gap:4px;
  padding:5px 8px;
  font-size:10.5px;
  color:rgba(220,235,255,.82);
  border-bottom:1px solid rgba(255,255,255,.04);
  overflow:hidden;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
  flex-wrap:nowrap;
  position:relative;
  isolation:isolate;
}
.room-result-winner-item:last-child{border-bottom:none;}
.room-result-winner-item.rw-enter{
  animation:rwSlideIn .35s ease;
}
@keyframes rwSlideIn{
  from{opacity:0;transform:translateY(-8px);}
  to{opacity:1;transform:translateY(0);}
}
.rw-user{
  font-weight:800;
  color:#fff;
  flex-shrink:0;
  white-space:nowrap;
  position:relative;
  z-index:1;
}
.rw-action{
  color:rgba(210,228,255,.75);
  font-weight:500;
  flex-shrink:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  position:relative;
  z-index:1;
}
.rw-amount{
  margin-left:auto;
  flex-shrink:0;
  white-space:nowrap;
  position:relative;
  z-index:1;
}
.rw-amount strong{
  font-weight:900;
  color:#ffe089;
}
.room-result-winner-item::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:12px;
  opacity:0;
  pointer-events:none;
  z-index:0;
}
.room-result-winner-item::after{
  content:"";
  position:absolute;
  inset:-1px;
  opacity:0;
  pointer-events:none;
  border-radius:12px;
  background:linear-gradient(115deg,transparent 8%,rgba(255,255,255,.18) 20%,rgba(255,210,80,.38) 38%,rgba(255,110,28,.34) 48%,rgba(100,220,255,.34) 64%,rgba(255,255,255,.14) 76%,transparent 92%);
  transform:translateX(-135%);
  z-index:0;
}
.room-result-winner-item.is-big-win{
  border-bottom-color:rgba(255,188,78,.32);
  background:linear-gradient(180deg,rgba(62,22,4,.52),rgba(16,10,14,.24));
  box-shadow:0 0 0 1px rgba(255,220,120,.18),0 0 24px rgba(255,130,40,.42),0 0 46px rgba(255,70,10,.28),0 0 72px rgba(80,220,255,.22);
}
.room-result-winner-item.is-big-win::before{
  opacity:1;
  background:conic-gradient(from 180deg,rgba(255,120,28,.0) 0deg,rgba(255,120,28,.92) 40deg,rgba(255,225,110,.98) 78deg,rgba(80,220,255,.88) 132deg,rgba(255,75,20,.92) 220deg,rgba(255,180,40,.88) 300deg,rgba(255,120,28,.0) 360deg);
  filter:blur(12px) saturate(1.35);
  animation:buktiWdFireHalo 1s ease-in-out infinite,buktiWdElectricPulse .52s steps(2) infinite;
}
.room-result-winner-item.is-big-win::after{
  opacity:1;
  animation:buktiWdLightning 1.05s ease 1,buktiWdShine 1.25s ease 1;
}
.room-result-winner-item.is-big-win .rw-brand{
  border-color:rgba(255,182,72,.54);
  box-shadow:0 0 18px rgba(255,138,44,.22),0 0 28px rgba(90,200,255,.12);
}
.room-result-winner-item.is-big-win .rw-amount strong{
  color:#ffe88c;
  text-shadow:0 0 10px rgba(255,228,120,.55),0 0 20px rgba(255,120,40,.42),0 0 34px rgba(80,220,255,.18);
}
.room-result-winner-item.is-big-win .rw-user{
  color:#ffffff;
  text-shadow:0 0 10px rgba(255,228,120,.3),0 0 16px rgba(255,120,40,.22);
}
.room-result-winner-item.is-big-win .rw-site-badge{
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 0 1px rgba(255,160,70,.18) inset,0 0 18px rgba(255,120,40,.34),0 0 34px rgba(90,200,255,.2);
}

/* ── Winner ticker: site badge + label ── */
.rw-brand{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
  padding:2px 7px 2px 2px;
  border-radius:999px;
  background:rgba(6,12,24,.62);
  border:1px solid rgba(105,205,255,.14);
  box-shadow:none;
  position:relative;
  z-index:1;
  flex-shrink:0;
}
.rw-brand::after{
  content:"";
  width:1px;
  height:14px;
  margin-left:1px;
  background:linear-gradient(180deg,rgba(54,227,255,.04),rgba(54,227,255,.22),rgba(162,69,255,.08));
  flex:0 0 auto;
}
.rw-site-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  min-width:20px;
  height:20px;
  border-radius:999px;
  overflow:hidden;
  flex-shrink:0;
  background:linear-gradient(180deg,rgba(2,8,18,.96),rgba(5,11,21,.92));
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 0 1px rgba(82,198,255,.1) inset;
}
.rw-site-badge img{width:100%;height:100%;object-fit:cover;display:block}
.rw-site-label{
  display:inline-flex;
  align-items:center;
  padding:0;
  border-radius:0;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  flex-shrink:0;
  max-width:72px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#d9f3ff;
  background:transparent;
  box-shadow:none;
}

/* ── Winner ticker title ── */
.rw-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:7px 10px 6px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.rw-title-text{
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#ffe089;
  text-shadow:0 0 10px rgba(255,220,100,.45);
}
.rw-title-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#ffe089;
  box-shadow:0 0 6px rgba(255,220,100,.7);
  animation:rwDotPulse 1.4s ease-in-out infinite;
  flex-shrink:0;
}
.rw-title-dot:last-child{
  animation-delay:.7s;
}
@keyframes rwDotPulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.35;transform:scale(.65);}
}

/* ── Winner ticker: loading / sync state ── */
.room-result-winner-item.rw-loading-state{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 12px;
  border-bottom:none;
  background:rgba(10,24,48,.38);
  border-radius:8px;
  animation:none;
}
.rw-loading-spinner{
  flex-shrink:0;
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid rgba(80,190,255,.18);
  border-top-color:rgba(80,190,255,.9);
  animation:rwSpinAnim .8s linear infinite;
}
@keyframes rwSpinAnim{
  to{transform:rotate(360deg);}
}
.rw-loading-text{
  font-size:10.5px;
  font-weight:500;
  color:rgba(140,210,255,.72);
  letter-spacing:.02em;
  line-height:1.4;
  opacity:1;
  animation:rwLoadingFade 4s ease-in-out infinite;
}
@keyframes rwLoadingFade{
  0%,100%{opacity:.72;}
  50%{opacity:.38;}
}

/* ── Winner ticker: live site counter ── */
.rw-site-counter{
  display:none;
}
.rw-site-counter-pulse{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#4dff91;
  box-shadow:0 0 7px rgba(77,255,145,.8);
  flex-shrink:0;
  animation:rwLivePulse 1.2s ease-in-out infinite;
}
@keyframes rwLivePulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.4;transform:scale(.6);}
}
.rw-site-counter-text{
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(180,255,210,.85);
}
.rw-site-count-num{
  font-weight:900;
  color:#4dff91;
  text-shadow:0 0 8px rgba(77,255,145,.5);
}

/* ═══════════════════════════════════════════════
   RTP PAGE ENHANCEMENTS v2
   Provider swipe, fire cards, live bars
═══════════════════════════════════════════════ */

/* Provider section overrides */
.rtp-provider-swipe-wrap {
  overflow: hidden;
  position: relative;
}
.rtp-provider-swipe-track {
  display: flex;
  gap: 8px;
  will-change: transform;
  transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Games section head with live badge */
.rtp-games-section .section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Scrollbar hidden for games grid */
.rtp-games-grid { scrollbar-width: none; }
.rtp-games-grid::-webkit-scrollbar { display: none; }

/* Fire card — keep overflow visible for pseudo-elements */
.rtp-game-card { overflow: visible !important; }
.rtp-game-card-inner { border-radius: 14px; overflow: hidden; }

/* Provider dots container */
.rtp-provider-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.rtp-provider-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: all 0.3s ease;
  cursor: pointer;
  flex-shrink: 0;
}
.rtp-provider-dot.active {
  width: 16px;
  border-radius: 3px;
  background: rgba(54,227,255,0.8);
  box-shadow: 0 0 8px rgba(54,227,255,0.4);
}

/* ── DG Pulse Image Loader ───────────────────────────────────────────────── */
.dg-img-wrap{position:relative;display:block;overflow:hidden}
.dg-img-wrap img,.dg-img-wrap video{display:block;width:100%;height:100%;object-fit:inherit;object-position:inherit}
.dg-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none;z-index:4;transition:opacity .35s ease}
.dg-loader-ring{position:relative;width:46px;height:46px;flex-shrink:0}
.dg-loader-ring svg{position:absolute;inset:0;width:100%;height:100%;animation:dg-spin 2.2s linear infinite}
.dg-loader-inner{position:absolute;inset:0;margin:auto;width:32px;height:32px;border-radius:50%;background:rgba(0,200,224,.1);border:1.5px solid rgba(0,200,224,.3);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#00C8E0;letter-spacing:.03em}
.dg-loader-dots{display:flex;gap:5px;align-items:center}
.dg-loader-dot{width:6px;height:6px;border-radius:50%;animation:dg-bounce 1.2s ease-in-out infinite}
.dg-loader-dot:nth-child(odd){background:#00C8E0}
.dg-loader-dot:nth-child(even){background:#7B3FBF}
.dg-loader-dot:nth-child(1){animation-delay:0s}
.dg-loader-dot:nth-child(2){animation-delay:.12s}
.dg-loader-dot:nth-child(3){animation-delay:.24s}
.dg-loader-dot:nth-child(4){animation-delay:.36s}
.dg-loader-dot:nth-child(5){animation-delay:.48s}
.dg-img-wrap.dg-loaded .dg-loader{opacity:0;pointer-events:none}
.dg-img-wrap img{opacity:0;transition:opacity .4s ease}
.dg-img-wrap.dg-loaded img{opacity:1}
@keyframes dg-spin{to{transform:rotate(360deg)}}
@keyframes dg-bounce{0%,100%{opacity:.15;transform:scaleY(.6) translateY(2px)}50%{opacity:1;transform:scaleY(1) translateY(0)}}


/* ===================================================================
   RUNNING LOGO AUTO COLOR GLOW
   Scope: homepage running logo strip only.
   Visual-only upgrade: each logo uses its sampled/detected color.
=================================================================== */

.site-ticker-item{
  --logo-glow-rgb: 54, 227, 255;
  --logo-glow-soft: rgba(var(--logo-glow-rgb), .14);
  --logo-glow-mid: rgba(var(--logo-glow-rgb), .32);
  --logo-glow-strong: rgba(var(--logo-glow-rgb), .58);

  background:
    radial-gradient(circle at 50% 18%, rgba(var(--logo-glow-rgb), .13), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)) !important;
  border-color:rgba(var(--logo-glow-rgb), .18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 8px 20px rgba(0,0,0,.24),
    0 0 14px rgba(var(--logo-glow-rgb), .06) !important;
}

.site-ticker-card{
  width:68px !important;
  height:68px !important;
  border-radius:50% !important;
  overflow:hidden !important;
  isolation:isolate !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;

  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.10), transparent 32%),
    radial-gradient(circle at 50% 50%, rgba(var(--logo-glow-rgb), .24), transparent 62%),
    linear-gradient(145deg, rgba(8,22,42,.98), rgba(20,12,48,.98)) !important;

  border:2px solid rgba(var(--logo-glow-rgb), .40) !important;
  box-shadow:
    0 0 0 3px rgba(var(--logo-glow-rgb), .06),
    0 0 18px rgba(var(--logo-glow-rgb), .34),
    0 0 28px rgba(162,69,255,.14),
    inset 0 0 20px rgba(0,0,0,.35),
    inset 0 0 14px rgba(var(--logo-glow-rgb), .18) !important;

  animation: dgLogoColorBreath 4.6s ease-in-out infinite !important;
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease !important;
}

/* staggered breathing timing */
.site-ticker-item:nth-child(8n+1) .site-ticker-card{ animation-delay:0s !important; }
.site-ticker-item:nth-child(8n+2) .site-ticker-card{ animation-delay:.35s !important; }
.site-ticker-item:nth-child(8n+3) .site-ticker-card{ animation-delay:.70s !important; }
.site-ticker-item:nth-child(8n+4) .site-ticker-card{ animation-delay:1.05s !important; }
.site-ticker-item:nth-child(8n+5) .site-ticker-card{ animation-delay:1.40s !important; }
.site-ticker-item:nth-child(8n+6) .site-ticker-card{ animation-delay:1.75s !important; }
.site-ticker-item:nth-child(8n+7) .site-ticker-card{ animation-delay:2.10s !important; }
.site-ticker-item:nth-child(8n+8) .site-ticker-card{ animation-delay:2.45s !important; }

@keyframes dgLogoColorBreath{
  0%,100%{
    box-shadow:
      0 0 0 3px rgba(var(--logo-glow-rgb), .045),
      0 0 14px rgba(var(--logo-glow-rgb), .24),
      0 0 22px rgba(var(--logo-glow-rgb), .10),
      inset 0 0 18px rgba(0,0,0,.35),
      inset 0 0 10px rgba(var(--logo-glow-rgb), .10);
  }
  50%{
    box-shadow:
      0 0 0 4px rgba(var(--logo-glow-rgb), .070),
      0 0 24px rgba(var(--logo-glow-rgb), .48),
      0 0 38px rgba(var(--logo-glow-rgb), .24),
      inset 0 0 20px rgba(0,0,0,.30),
      inset 0 0 18px rgba(var(--logo-glow-rgb), .18);
  }
}

/* auto-color neon ring */
.site-ticker-card::after{
  content:"" !important;
  position:absolute !important;
  inset:-3px !important;
  border-radius:50% !important;
  pointer-events:none !important;
  z-index:4 !important;
  border:1px solid rgba(var(--logo-glow-rgb), .58) !important;
  box-shadow:
    0 0 10px rgba(var(--logo-glow-rgb), .62),
    0 0 20px rgba(var(--logo-glow-rgb), .34),
    0 0 28px rgba(162,69,255,.18),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  animation: dgLogoPulseRingColor 2.4s ease-in-out infinite !important;
}

.site-ticker-item:nth-child(8n+1) .site-ticker-card::after{ animation-delay:0s !important; }
.site-ticker-item:nth-child(8n+2) .site-ticker-card::after{ animation-delay:.25s !important; }
.site-ticker-item:nth-child(8n+3) .site-ticker-card::after{ animation-delay:.50s !important; }
.site-ticker-item:nth-child(8n+4) .site-ticker-card::after{ animation-delay:.75s !important; }
.site-ticker-item:nth-child(8n+5) .site-ticker-card::after{ animation-delay:1.00s !important; }
.site-ticker-item:nth-child(8n+6) .site-ticker-card::after{ animation-delay:1.25s !important; }
.site-ticker-item:nth-child(8n+7) .site-ticker-card::after{ animation-delay:1.50s !important; }
.site-ticker-item:nth-child(8n+8) .site-ticker-card::after{ animation-delay:1.75s !important; }

/* visible rotating shine follows each logo color */
.site-ticker-card::before{
  content:"" !important;
  position:absolute !important;
  inset:-20% !important;
  border-radius:50% !important;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 65deg,
      rgba(255,255,255,.28) 82deg,
      rgba(var(--logo-glow-rgb), .26) 96deg,
      transparent 122deg,
      transparent 360deg
    ) !important;
  opacity:.62 !important;
  pointer-events:none !important;
  z-index:2 !important;
  animation: dgLogoOrbitShineColor 3.6s linear infinite !important;
  mix-blend-mode:screen !important;
}

.site-ticker-item:nth-child(8n+1) .site-ticker-card::before{ animation-delay:0s !important; }
.site-ticker-item:nth-child(8n+2) .site-ticker-card::before{ animation-delay:.40s !important; }
.site-ticker-item:nth-child(8n+3) .site-ticker-card::before{ animation-delay:.80s !important; }
.site-ticker-item:nth-child(8n+4) .site-ticker-card::before{ animation-delay:1.20s !important; }
.site-ticker-item:nth-child(8n+5) .site-ticker-card::before{ animation-delay:1.60s !important; }
.site-ticker-item:nth-child(8n+6) .site-ticker-card::before{ animation-delay:2.00s !important; }
.site-ticker-item:nth-child(8n+7) .site-ticker-card::before{ animation-delay:2.40s !important; }
.site-ticker-item:nth-child(8n+8) .site-ticker-card::before{ animation-delay:2.80s !important; }

@keyframes dgLogoOrbitShineColor{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

@keyframes dgLogoPulseRingColor{
  0%,100%{ opacity:.74; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.035); }
}

/* circular image mask removes square/block background */
.site-ticker-card img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
  border-radius:50% !important;
  background:transparent !important;
  transform:scale(1.075) !important;
  filter:
    drop-shadow(0 0 8px rgba(var(--logo-glow-rgb), .44))
    brightness(1.12)
    contrast(1.08)
    saturate(1.10) !important;
  transition:
    filter .22s ease,
    transform .22s ease !important;
  position:relative !important;
  z-index:1 !important;
}

.site-ticker-item:hover{
  border-color:rgba(var(--logo-glow-rgb), .42) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(var(--logo-glow-rgb), .22), transparent 42%),
    linear-gradient(180deg, rgba(var(--logo-glow-rgb), .12), rgba(162,69,255,.075)) !important;
  box-shadow:
    0 0 18px rgba(var(--logo-glow-rgb), .20),
    0 10px 24px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.075) !important;
}

.site-ticker-item:hover .site-ticker-card{
  transform:translateY(-2px) scale(1.08) !important;
  border-color:rgba(var(--logo-glow-rgb), .80) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.14), transparent 32%),
    radial-gradient(circle at 50% 50%, rgba(var(--logo-glow-rgb), .34), transparent 64%),
    linear-gradient(145deg, rgba(8,30,55,.99), rgba(30,15,66,.99)) !important;
  box-shadow:
    0 0 0 4px rgba(var(--logo-glow-rgb), .10),
    0 0 24px rgba(var(--logo-glow-rgb), .54),
    0 0 38px rgba(var(--logo-glow-rgb), .30),
    0 12px 28px rgba(0,0,0,.36),
    inset 0 0 18px rgba(0,0,0,.28),
    inset 0 0 16px rgba(var(--logo-glow-rgb), .26) !important;
}

.site-ticker-item:hover .site-ticker-card img{
  transform:scale(1.16) !important;
  filter:
    drop-shadow(0 0 14px rgba(var(--logo-glow-rgb), .76))
    brightness(1.20)
    contrast(1.10)
    saturate(1.16) !important;
}

.site-ticker-item:hover .site-ticker-label{
  color:#f0fdff !important;
  text-shadow:
    0 0 8px rgba(var(--logo-glow-rgb), .58),
    0 0 14px rgba(var(--logo-glow-rgb), .28) !important;
}

/* fallback colors while JS is sampling */
.site-ticker-item:nth-child(8n+1){ --logo-glow-rgb: 80, 210, 255; }
.site-ticker-item:nth-child(8n+2){ --logo-glow-rgb: 40, 245, 130; }
.site-ticker-item:nth-child(8n+3){ --logo-glow-rgb: 255, 205, 55; }
.site-ticker-item:nth-child(8n+4){ --logo-glow-rgb: 255, 70, 70; }
.site-ticker-item:nth-child(8n+5){ --logo-glow-rgb: 255, 160, 35; }
.site-ticker-item:nth-child(8n+6){ --logo-glow-rgb: 55, 230, 110; }
.site-ticker-item:nth-child(8n+7){ --logo-glow-rgb: 180, 100, 255; }
.site-ticker-item:nth-child(8n+8){ --logo-glow-rgb: 55, 215, 255; }

@media (max-width:640px){
  .site-ticker-card{
    width:58px !important;
    height:58px !important;
    border-width:2px !important;
  }

  .site-ticker-card img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    border-radius:50% !important;
    transform:scale(1.075) !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .site-ticker-card,
  .site-ticker-card::before,
  .site-ticker-card::after{
    animation:none !important;
  }
}

/* ============================================================
   PREDIKSI REAL REDESIGN — strong title, one-card swipe, animated data
   Scope: pages/prediksi.php only via .prediksi-animated-panel
   ============================================================ */
.prediksi-animated-panel{--harian-accent:#22e7ff;--harian-accent-2:#7c5cff;--ngamen-accent:#ff4fe1;--ngamen-accent-2:#35e9ff;padding:14px!important;background:radial-gradient(circle at 9% 0%,rgba(34,231,255,.10),transparent 32%),radial-gradient(circle at 94% 4%,rgba(255,79,225,.10),transparent 34%),linear-gradient(180deg,rgba(9,14,31,.88),rgba(4,9,20,.96))!important}
.prediksi-animated-panel .prediksi-split-grid{gap:14px!important}
.prediksi-animated-panel .prediksi-split-column{--prediksi-accent:var(--harian-accent);--prediksi-accent-2:var(--harian-accent-2);position:relative;gap:10px!important;padding:14px!important;border-radius:22px!important;border:1px solid color-mix(in srgb,var(--prediksi-accent) 34%,transparent)!important;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),linear-gradient(155deg,rgba(8,14,31,.98),rgba(4,8,18,.99))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 34px rgba(0,0,0,.30),0 0 26px color-mix(in srgb,var(--prediksi-accent) 10%,transparent)!important;overflow:hidden}
.prediksi-animated-panel .prediksi-split-column::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,var(--prediksi-accent),var(--prediksi-accent-2),transparent);background-size:220% 100%;animation:prediksiTopEnergy 3.2s linear infinite;opacity:.9}
.prediksi-animated-panel .prediksi-split-column--ngamen{--prediksi-accent:var(--ngamen-accent);--prediksi-accent-2:var(--ngamen-accent-2)}
.prediksi-animated-panel .prediksi-split-head{position:relative;align-items:flex-start!important;gap:10px!important;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.07)}
.prediksi-animated-panel .prediksi-split-head h2{position:relative;display:inline-block;margin:0!important;font-size:18px!important;line-height:1.1!important;letter-spacing:.075em!important;font-weight:800!important;color:transparent!important;background:linear-gradient(90deg,#eafdff 0%,var(--prediksi-accent) 32%,var(--prediksi-accent-2) 66%,#fff 100%);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;text-shadow:0 0 16px color-mix(in srgb,var(--prediksi-accent) 36%,transparent);animation:prediksiTitleFlow 4.4s ease-in-out infinite}
.prediksi-animated-panel .prediksi-split-head h2::after{content:"";position:absolute;left:0;right:-8px;bottom:-8px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--prediksi-accent),var(--prediksi-accent-2),transparent);transform-origin:left;animation:prediksiUnderlinePulse 2.8s ease-in-out infinite}
.prediksi-animated-panel .prediksi-split-head p{margin:7px 0 0!important;font-size:11px!important;color:#aebdd8!important}.prediksi-animated-panel .prediksi-split-count{display:none!important}
.prediksi-animated-panel .prediksi-split-head-side{display:flex!important;align-items:center!important;justify-content:flex-end!important;width:auto!important}.prediksi-animated-panel .prediksi-split-arrows{display:flex;gap:8px}
.prediksi-animated-panel .prediksi-split-arrow{width:34px!important;height:34px!important;font-size:15px!important;color:#eafcff!important;background:rgba(5,12,28,.76)!important;border:1px solid color-mix(in srgb,var(--prediksi-accent) 38%,rgba(255,255,255,.12))!important;box-shadow:0 0 0 1px rgba(255,255,255,.03),0 8px 20px rgba(0,0,0,.28),0 0 16px color-mix(in srgb,var(--prediksi-accent) 16%,transparent)!important}
.prediksi-animated-panel .prediksi-split-arrow:hover:not(:disabled){transform:translateY(-1px) scale(1.06)!important;box-shadow:0 0 0 1px rgba(255,255,255,.04),0 10px 24px rgba(0,0,0,.32),0 0 24px color-mix(in srgb,var(--prediksi-accent) 28%,transparent)!important}
.prediksi-animated-panel .prediksi-premium-track{gap:0!important;padding:0!important;scroll-padding-left:0!important;scroll-snap-type:x mandatory!important}
.prediksi-animated-panel .prediksi-premium-card{--card-accent:var(--prediksi-accent);--card-accent-2:var(--prediksi-accent-2);flex:0 0 100%!important;min-width:100%!important;max-width:none!important;padding:0!important;border-radius:18px!important;border:1px solid color-mix(in srgb,var(--card-accent) 42%,rgba(255,255,255,.08))!important;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)),linear-gradient(155deg,rgba(7,17,37,.98),rgba(4,8,18,.99))!important;box-shadow:0 14px 28px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.05)!important;opacity:.72;transform:scale(.985);transition:opacity .28s ease,transform .28s cubic-bezier(.2,.9,.2,1),border-color .28s ease,box-shadow .28s ease}
.prediksi-animated-panel .prediksi-premium-card.is-active,.prediksi-animated-panel .prediksi-premium-card:first-child{opacity:1;transform:scale(1);box-shadow:0 16px 34px rgba(0,0,0,.34),0 0 28px color-mix(in srgb,var(--card-accent) 16%,transparent),inset 0 1px 0 rgba(255,255,255,.06)!important}
.prediksi-animated-panel .prediksi-premium-card::before{content:""!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;border-radius:inherit!important;background:radial-gradient(circle at 0% 0%,color-mix(in srgb,var(--card-accent) 24%,transparent),transparent 33%),radial-gradient(circle at 100% 100%,color-mix(in srgb,var(--card-accent-2) 17%,transparent),transparent 36%)!important;opacity:.78;animation:prediksiCardAura 7s ease-in-out infinite alternate;z-index:0}
.prediksi-animated-panel .prediksi-premium-card::after{content:""!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;border-radius:inherit!important;background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.10) 44%,transparent 58%)!important;transform:translateX(-130%);animation:prediksiCardSweep 5.6s ease-in-out infinite;z-index:0;pointer-events:none}
.prediksi-animated-panel .prediksi-premium-card .pcard-header,.prediksi-animated-panel .prediksi-premium-card .pcard-body{position:relative;z-index:1}
.prediksi-animated-panel .prediksi-premium-card .pcard-header{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px!important;margin:0!important;padding:14px 14px 10px!important;border-bottom:1px solid color-mix(in srgb,var(--card-accent) 25%,rgba(255,255,255,.08))!important}
.prediksi-animated-panel .prediksi-premium-card .pcard-market-name{position:relative;max-width:62%;padding-left:12px;font-size:15px!important;line-height:1.25!important;font-weight:900!important;letter-spacing:.075em!important;color:#fff!important;text-shadow:0 0 16px color-mix(in srgb,var(--card-accent) 44%,transparent);animation:prediksiMarketPop .7s cubic-bezier(.2,.9,.2,1) both,prediksiMarketPulse 3.8s ease-in-out infinite .8s}
.prediksi-animated-panel .prediksi-premium-card .pcard-market-name::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:3px;border-radius:999px;background:linear-gradient(180deg,var(--card-accent),var(--card-accent-2));box-shadow:0 0 14px var(--card-accent);animation:prediksiEnergyBar 1.9s ease-in-out infinite}
.prediksi-animated-panel .pcard-badges{display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:5px!important;flex-shrink:0}.prediksi-animated-panel .pcard-badge{padding:4px 9px!important;border-radius:999px!important;font-size:9px!important;line-height:1.05!important;font-weight:800!important;letter-spacing:.025em!important;color:#eaffff!important;background:rgba(255,255,255,.075)!important;border:1px solid rgba(255,255,255,.12)!important}
.prediksi-animated-panel .pcard-badge--result{color:#02101a!important;background:linear-gradient(135deg,var(--card-accent),var(--card-accent-2))!important;border-color:transparent!important;box-shadow:0 0 16px color-mix(in srgb,var(--card-accent) 24%,transparent)!important}
.prediksi-animated-panel .pcard-body{display:flex!important;flex-direction:column!important;gap:8px!important;padding:10px 12px 12px!important}
.prediksi-animated-panel .pcard-bbfs{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:10px 11px!important;border-radius:12px!important;background:linear-gradient(90deg,color-mix(in srgb,var(--card-accent) 20%,transparent),rgba(255,255,255,.035))!important;border:1px solid color-mix(in srgb,var(--card-accent) 30%,rgba(255,255,255,.08))!important;animation:prediksiBlockIn .52s ease both .06s}
.prediksi-animated-panel .pcard-lbl{font-size:10px!important;letter-spacing:.105em!important;font-weight:900!important;color:#9eb3d0!important}.prediksi-animated-panel .pcard-val{color:#fff!important;font-size:13px!important;font-weight:900!important;letter-spacing:.055em!important}
.prediksi-animated-panel .pcard-val--bbfs{font-size:16px!important;color:transparent!important;background:linear-gradient(90deg,#fff,var(--card-accent),var(--card-accent-2),#fff);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;animation:prediksiNumberShimmer 2.8s linear infinite;text-shadow:none!important}
.prediksi-animated-panel .pcard-row-split{display:grid!important;grid-template-columns:1fr 1px 1fr!important;align-items:stretch!important;border-radius:12px!important;overflow:hidden;background:rgba(255,255,255,.052)!important;border:1px solid rgba(255,255,255,.08)!important;animation:prediksiBlockIn .52s ease both .14s}
.prediksi-animated-panel .pcard-half{min-height:44px;padding:8px 10px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important}.prediksi-animated-panel .pcard-divider{width:1px!important;height:auto!important;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--card-accent) 55%,rgba(255,255,255,.16)),transparent)!important;animation:prediksiDividerGlow 2.2s ease-in-out infinite}
.prediksi-animated-panel .pcard-twin{padding:8px 11px!important;border-radius:12px!important;background:linear-gradient(90deg,rgba(255,207,66,.135),rgba(255,255,255,.035))!important;border:1px solid rgba(255,207,66,.25)!important;animation:prediksiTwinGlow 3s ease-in-out infinite,prediksiBlockIn .52s ease both .22s}.prediksi-animated-panel .pcard-val--twin{color:#ffe56a!important;text-shadow:0 0 14px rgba(255,213,66,.38)!important}
.prediksi-animated-panel .pcard-invest-block{padding:10px 11px!important;border-radius:14px!important;background:rgba(2,10,24,.62)!important;border:1px solid color-mix(in srgb,var(--card-accent) 20%,rgba(255,255,255,.07))!important;animation:prediksiBlockIn .52s ease both .30s}.prediksi-animated-panel .pcard-invest-label{margin-bottom:7px!important;font-size:10px!important;font-weight:900!important;letter-spacing:.11em!important;color:#9eb3d0!important;text-transform:uppercase}
.prediksi-animated-panel .pcard-invest-lines{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px!important}.prediksi-animated-panel .pcard-invest-lines span{display:flex!important;align-items:center!important;justify-content:center!important;min-height:28px;padding:5px 8px!important;border-radius:9px!important;font-size:11px!important;font-weight:900!important;letter-spacing:.035em!important;color:#eef8ff!important;background:linear-gradient(180deg,color-mix(in srgb,var(--card-accent) 14%,rgba(255,255,255,.035)),rgba(255,255,255,.025))!important;border:1px solid color-mix(in srgb,var(--card-accent) 26%,rgba(255,255,255,.08))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);animation:prediksiPillIn .46s cubic-bezier(.2,.9,.2,1) both}
.prediksi-animated-panel .pcard-invest-lines span:nth-child(1){animation-delay:.38s}.prediksi-animated-panel .pcard-invest-lines span:nth-child(2){animation-delay:.46s}.prediksi-animated-panel .pcard-invest-lines span:nth-child(3){animation-delay:.54s}.prediksi-animated-panel .pcard-invest-lines span:nth-child(4){animation-delay:.62s}
@media (min-width:981px){.prediksi-animated-panel .prediksi-split-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:640px){.prediksi-animated-panel{padding:10px!important}.prediksi-animated-panel .prediksi-split-grid{gap:10px!important}.prediksi-animated-panel .prediksi-split-column{padding:10px!important;border-radius:18px!important;gap:9px!important}.prediksi-animated-panel .prediksi-split-head{flex-direction:row!important;align-items:flex-start!important;padding-bottom:9px}.prediksi-animated-panel .prediksi-split-head h2{font-size:15px!important;letter-spacing:.06em!important}.prediksi-animated-panel .prediksi-split-head p{font-size:10px!important;margin-top:6px!important}.prediksi-animated-panel .prediksi-split-arrow{width:31px!important;height:31px!important;font-size:13px!important}.prediksi-animated-panel .prediksi-premium-card{border-radius:16px!important}.prediksi-animated-panel .prediksi-premium-card .pcard-header{padding:12px 12px 9px!important}.prediksi-animated-panel .prediksi-premium-card .pcard-market-name{font-size:13px!important;max-width:58%}.prediksi-animated-panel .pcard-badge{font-size:8.5px!important;padding:4px 7px!important}.prediksi-animated-panel .pcard-body{padding:9px 10px 10px!important;gap:7px!important}.prediksi-animated-panel .pcard-bbfs{padding:8px 9px!important}.prediksi-animated-panel .pcard-val--bbfs{font-size:14px!important}.prediksi-animated-panel .pcard-half{min-height:40px;padding:7px 8px!important}.prediksi-animated-panel .pcard-twin{padding:7px 9px!important}.prediksi-animated-panel .pcard-invest-block{padding:8px 9px!important}.prediksi-animated-panel .pcard-invest-lines{grid-template-columns:1fr 1fr;gap:6px!important}.prediksi-animated-panel .pcard-invest-lines span{min-height:26px;font-size:10.5px!important;padding:4px 6px!important}}
@media (prefers-reduced-motion:reduce){.prediksi-animated-panel *,.prediksi-animated-panel *::before,.prediksi-animated-panel *::after{animation:none!important;transition:none!important}}
@keyframes prediksiTitleFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes prediksiUnderlinePulse{0%,100%{transform:scaleX(.56);opacity:.65}50%{transform:scaleX(1);opacity:1}}@keyframes prediksiTopEnergy{0%{background-position:0 0}100%{background-position:220% 0}}@keyframes prediksiCardAura{0%{opacity:.58;filter:hue-rotate(0deg)}100%{opacity:.9;filter:hue-rotate(14deg)}}@keyframes prediksiCardSweep{0%,58%{transform:translateX(-130%);opacity:0}68%{opacity:.65}88%,100%{transform:translateX(130%);opacity:0}}@keyframes prediksiMarketPop{0%{opacity:0;transform:translateX(-8px);letter-spacing:.14em}100%{opacity:1;transform:none}}@keyframes prediksiMarketPulse{0%,100%{text-shadow:0 0 12px color-mix(in srgb,var(--card-accent) 30%,transparent)}50%{text-shadow:0 0 22px color-mix(in srgb,var(--card-accent) 58%,transparent)}}@keyframes prediksiEnergyBar{0%,100%{transform:scaleY(.6);opacity:.65}50%{transform:scaleY(1);opacity:1}}@keyframes prediksiBlockIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}@keyframes prediksiNumberShimmer{0%{background-position:0% 50%}100%{background-position:240% 50%}}@keyframes prediksiDividerGlow{0%,100%{opacity:.45}50%{opacity:1;box-shadow:0 0 12px var(--card-accent)}}@keyframes prediksiTwinGlow{0%,100%{box-shadow:inset 0 0 0 rgba(255,211,66,0),0 0 0 rgba(255,211,66,0)}50%{box-shadow:inset 0 0 18px rgba(255,211,66,.06),0 0 16px rgba(255,211,66,.08)}}@keyframes prediksiPillIn{0%{opacity:0;transform:translateY(7px) scale(.96)}100%{opacity:1;transform:none}}

/* ============================================================
   PREDIKSI PATCH — per-slide accent only
   Source: "this one good for predict card design.zip"
   Purpose: keep current good card design, add different color/animation feel per slide.
   No layout / structure / sizing changes.
   ============================================================ */
.prediksi-animated-panel .prediksi-premium-card:nth-child(10n+1){--card-accent:#22e7ff;--card-accent-2:#7c5cff;}
.prediksi-animated-panel .prediksi-premium-card:nth-child(10n+2){--card-accent:#ff4fe1;--card-accent-2:#35e9ff;}
.prediksi-animated-panel .prediksi-premium-card:nth-child(10n+3){--card-accent:#ffb84d;--card-accent-2:#ff4f7b;}
.prediksi-animated-panel .prediksi-premium-card:nth-child(10n+4){--card-accent:#31f7a7;--card-accent-2:#22e7ff;}
.prediksi-animated-panel .prediksi-premium-card:nth-child(10n+5){--card-accent:#a78bfa;--card-accent-2:#f472b6;}
.prediksi-animated-panel .prediksi-premium-card:nth-child(10n+6){--card-accent:#facc15;--card-accent-2:#fb7185;}
.prediksi-animated-panel .prediksi-premium-card:nth-child(10n+7){--card-accent:#38bdf8;--card-accent-2:#34d399;}
.prediksi-animated-panel .prediksi-premium-card:nth-child(10n+8){--card-accent:#fb7185;--card-accent-2:#f97316;}
.prediksi-animated-panel .prediksi-premium-card:nth-child(10n+9){--card-accent:#60a5fa;--card-accent-2:#c084fc;}
.prediksi-animated-panel .prediksi-premium-card:nth-child(10n+10){--card-accent:#2dd4bf;--card-accent-2:#facc15;}

/* keep the original style, only make each slide's existing animation feel slightly unique */
.prediksi-animated-panel .prediksi-premium-card:nth-child(3n+1)::after{animation-duration:5.2s!important;}
.prediksi-animated-panel .prediksi-premium-card:nth-child(3n+2)::after{animation-duration:6.2s!important;animation-delay:.35s!important;}
.prediksi-animated-panel .prediksi-premium-card:nth-child(3n+3)::after{animation-duration:7s!important;animation-delay:.7s!important;}
.prediksi-animated-panel .prediksi-premium-card:nth-child(4n+1) .pcard-market-name{animation-delay:0s,.8s!important;}
.prediksi-animated-panel .prediksi-premium-card:nth-child(4n+2) .pcard-market-name{animation-delay:.05s,.9s!important;}
.prediksi-animated-panel .prediksi-premium-card:nth-child(4n+3) .pcard-market-name{animation-delay:.1s,1s!important;}
.prediksi-animated-panel .prediksi-premium-card:nth-child(4n+4) .pcard-market-name{animation-delay:.15s,1.1s!important;}

/* stronger but still controlled active slide identity */
.prediksi-animated-panel .prediksi-premium-card.is-active,
.prediksi-animated-panel .prediksi-premium-card:first-child{
  border-color:color-mix(in srgb,var(--card-accent) 54%,rgba(255,255,255,.10))!important;
  box-shadow:0 16px 34px rgba(0,0,0,.34),0 0 30px color-mix(in srgb,var(--card-accent) 20%,transparent),inset 0 1px 0 rgba(255,255,255,.06)!important;
}

/* ============================================================
   PREDIKSI TEXT EFFECT PATCH — exact good design version
   Task: add animation/effects to market title + text inside cards only.
   No layout, spacing, structure, or backend logic changes.
   ============================================================ */
.prediksi-animated-panel .prediksi-premium-card{
  --textfx-speed:.46s;
  --textfx-ease:cubic-bezier(.18,.9,.22,1);
}

/* Market title: clean reveal + sweep, not redesign */
.prediksi-animated-panel .pcard-market-name{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  max-width:100%!important;
  overflow:hidden!important;
  color:#f7fbff!important;
  text-shadow:0 0 10px color-mix(in srgb,var(--card-accent) 22%,transparent)!important;
  animation:
    prediksiMarketTextReveal .54s var(--textfx-ease) both,
    prediksiMarketTextBreath 4.2s ease-in-out infinite .85s!important;
}
.prediksi-animated-panel .pcard-market-name::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:auto!important;
  bottom:-4px!important;
  width:100%!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,transparent,var(--card-accent),var(--card-accent-2),transparent)!important;
  transform:scaleX(0)!important;
  transform-origin:left center!important;
  opacity:.9!important;
  animation:prediksiMarketUnderlineSweep .82s var(--textfx-ease) .12s forwards!important;
}
.prediksi-animated-panel .pcard-header::before{
  animation:prediksiEnergyBar 2.4s ease-in-out infinite, prediksiBarSpark 3.6s linear infinite!important;
}

/* Badges: small pop so closed/result is alive */
.prediksi-animated-panel .pcard-badge{
  animation:prediksiBadgePop .42s var(--textfx-ease) both!important;
}
.prediksi-animated-panel .pcard-badge:nth-child(1){animation-delay:.08s!important}
.prediksi-animated-panel .pcard-badge:nth-child(2){animation-delay:.16s!important}

/* Labels: subtle tracking reveal for all labels inside card */
.prediksi-animated-panel .pcard-lbl,
.prediksi-animated-panel .pcard-invest-label{
  position:relative!important;
  display:inline-block!important;
  animation:prediksiLabelReveal .44s var(--textfx-ease) both!important;
}
.prediksi-animated-panel .pcard-lbl::after,
.prediksi-animated-panel .pcard-invest-label::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  bottom:-2px!important;
  width:100%!important;
  height:1px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,var(--card-accent),transparent)!important;
  opacity:.28!important;
  transform:scaleX(0)!important;
  transform-origin:left!important;
  animation:prediksiTinyLine .65s ease .18s forwards!important;
}

/* Values: readable text movement, no layout change */
.prediksi-animated-panel .pcard-val{
  display:inline-block!important;
  animation:prediksiValueIn .46s var(--textfx-ease) both!important;
}
.prediksi-animated-panel .pcard-val--bbfs{
  animation:
    prediksiValueIn .46s var(--textfx-ease) both,
    prediksiNumberShimmer 2.8s linear infinite!important;
}

/* Block stagger: each content zone enters in order */
.prediksi-animated-panel .pcard-bbfs{animation:prediksiContentBlockIn .48s var(--textfx-ease) .06s both!important}
.prediksi-animated-panel .pcard-row-split{animation:prediksiContentBlockIn .48s var(--textfx-ease) .14s both!important}
.prediksi-animated-panel .pcard-twin{animation:prediksiContentBlockIn .48s var(--textfx-ease) .22s both, prediksiTwinGlow 3s ease-in-out infinite .8s!important}
.prediksi-animated-panel .pcard-invest-block{animation:prediksiContentBlockIn .48s var(--textfx-ease) .30s both!important}

/* AI / CB text stagger */
.prediksi-animated-panel .pcard-half:nth-child(1) .pcard-lbl{animation-delay:.18s!important}
.prediksi-animated-panel .pcard-half:nth-child(1) .pcard-val{animation-delay:.24s!important}
.prediksi-animated-panel .pcard-half:nth-child(3) .pcard-lbl{animation-delay:.28s!important}
.prediksi-animated-panel .pcard-half:nth-child(3) .pcard-val{animation-delay:.34s!important}

/* Twin: stronger text focus without changing design */
.prediksi-animated-panel .pcard-val--twin{
  position:relative!important;
  animation:prediksiTwinTextPulse 3.2s ease-in-out infinite .7s!important;
}
.prediksi-animated-panel .pcard-val--twin::after{
  content:""!important;
  position:absolute!important;
  inset:-2px -6px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,transparent,rgba(255,231,95,.18),transparent)!important;
  transform:translateX(-120%)!important;
  animation:prediksiTwinShine 4.2s ease-in-out infinite 1s!important;
  pointer-events:none!important;
}

/* Invest lines: one by one reveal + tiny shine */
.prediksi-animated-panel .pcard-invest-lines span{
  position:relative!important;
  overflow:hidden!important;
  animation:prediksiPillTextIn .42s var(--textfx-ease) both!important;
}
.prediksi-animated-panel .pcard-invest-lines span::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.16) 45%,transparent 70%)!important;
  transform:translateX(-120%)!important;
  animation:prediksiPillShine 5s ease-in-out infinite!important;
  pointer-events:none!important;
}
.prediksi-animated-panel .pcard-invest-lines span:nth-child(1){animation-delay:.38s!important}.prediksi-animated-panel .pcard-invest-lines span:nth-child(1)::after{animation-delay:1.3s!important}
.prediksi-animated-panel .pcard-invest-lines span:nth-child(2){animation-delay:.46s!important}.prediksi-animated-panel .pcard-invest-lines span:nth-child(2)::after{animation-delay:1.6s!important}
.prediksi-animated-panel .pcard-invest-lines span:nth-child(3){animation-delay:.54s!important}.prediksi-animated-panel .pcard-invest-lines span:nth-child(3)::after{animation-delay:1.9s!important}
.prediksi-animated-panel .pcard-invest-lines span:nth-child(4){animation-delay:.62s!important}.prediksi-animated-panel .pcard-invest-lines span:nth-child(4)::after{animation-delay:2.2s!important}

/* Different timing per slide so they don't animate identically */
.prediksi-animated-panel .prediksi-premium-card:nth-child(3n+1) .pcard-market-name{animation-duration:.50s,4.0s!important}
.prediksi-animated-panel .prediksi-premium-card:nth-child(3n+2) .pcard-market-name{animation-duration:.58s,4.6s!important}
.prediksi-animated-panel .prediksi-premium-card:nth-child(3n+3) .pcard-market-name{animation-duration:.64s,5.2s!important}
.prediksi-animated-panel .prediksi-premium-card:nth-child(2n) .pcard-val--bbfs{animation-duration:.46s,3.3s!important}

@keyframes prediksiMarketTextReveal{
  0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-10px);letter-spacing:.16em;filter:blur(2px)}
  65%{opacity:1;clip-path:inset(0 0 0 0);transform:translateX(1px);filter:blur(0)}
  100%{opacity:1;clip-path:inset(0 0 0 0);transform:translateX(0);filter:blur(0)}
}
@keyframes prediksiMarketTextBreath{
  0%,100%{text-shadow:0 0 9px color-mix(in srgb,var(--card-accent) 22%,transparent);filter:brightness(1)}
  50%{text-shadow:0 0 16px color-mix(in srgb,var(--card-accent) 36%,transparent);filter:brightness(1.08)}
}
@keyframes prediksiMarketUnderlineSweep{0%{transform:scaleX(0);opacity:0}35%{opacity:1}100%{transform:scaleX(1);opacity:.82}}
@keyframes prediksiBarSpark{0%,100%{box-shadow:0 0 8px var(--card-accent)}50%{box-shadow:0 0 16px var(--card-accent),0 0 28px color-mix(in srgb,var(--card-accent-2) 42%,transparent)}}
@keyframes prediksiBadgePop{0%{opacity:0;transform:translateY(-3px) scale(.94)}100%{opacity:1;transform:none}}
@keyframes prediksiLabelReveal{0%{opacity:0;transform:translateY(5px);letter-spacing:.16em}100%{opacity:1;transform:none}}
@keyframes prediksiTinyLine{to{transform:scaleX(1)}}
@keyframes prediksiValueIn{0%{opacity:0;transform:translateY(7px) scale(.98);filter:blur(1px)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes prediksiContentBlockIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
@keyframes prediksiTwinTextPulse{0%,100%{filter:brightness(1);text-shadow:0 0 11px rgba(255,213,66,.32)}50%{filter:brightness(1.18);text-shadow:0 0 18px rgba(255,213,66,.52)}}
@keyframes prediksiTwinShine{0%,72%{transform:translateX(-120%);opacity:0}82%{opacity:1}100%{transform:translateX(120%);opacity:0}}
@keyframes prediksiPillTextIn{0%{opacity:0;transform:translateY(7px) scale(.97);filter:blur(.8px)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes prediksiPillShine{0%,68%{transform:translateX(-120%);opacity:0}78%{opacity:.75}100%{transform:translateX(120%);opacity:0}}

@media (max-width:640px){
  .prediksi-animated-panel .pcard-market-name{animation-duration:.48s,4.4s!important}
  .prediksi-animated-panel .pcard-lbl,
  .prediksi-animated-panel .pcard-invest-label{animation-duration:.36s!important}
  .prediksi-animated-panel .pcard-val{animation-duration:.38s!important}
}
@media (prefers-reduced-motion:reduce){
  .prediksi-animated-panel .pcard-market-name,
  .prediksi-animated-panel .pcard-market-name::after,
  .prediksi-animated-panel .pcard-header::before,
  .prediksi-animated-panel .pcard-badge,
  .prediksi-animated-panel .pcard-lbl,
  .prediksi-animated-panel .pcard-lbl::after,
  .prediksi-animated-panel .pcard-invest-label,
  .prediksi-animated-panel .pcard-invest-label::after,
  .prediksi-animated-panel .pcard-val,
  .prediksi-animated-panel .pcard-val--bbfs,
  .prediksi-animated-panel .pcard-bbfs,
  .prediksi-animated-panel .pcard-row-split,
  .prediksi-animated-panel .pcard-twin,
  .prediksi-animated-panel .pcard-invest-block,
  .prediksi-animated-panel .pcard-val--twin,
  .prediksi-animated-panel .pcard-val--twin::after,
  .prediksi-animated-panel .pcard-invest-lines span,
  .prediksi-animated-panel .pcard-invest-lines span::after{animation:none!important;transition:none!important;filter:none!important;clip-path:none!important;transform:none!important;opacity:1!important}
}

/* === Bukti JP 10-card smooth coverflow + true fullscreen smooth zoom === */

/* === Safe PC drag + proper outside-image close support === */
.bukti-coverflow{user-select:none;cursor:grab}
.bukti-coverflow.is-dragging{cursor:grabbing}
.bukti-cover-card,.bukti-cover-img{-webkit-user-drag:none;user-select:none}
.bukti-proof-modal{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(3,6,14,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .22s ease}
.bukti-proof-modal.is-open{display:flex;opacity:1}
.bukti-proof-zoom{pointer-events:none;position:relative;max-width:min(94vw,900px);max-height:88vh;display:flex;align-items:center;justify-content:center}
.bukti-proof-zoom-media{pointer-events:auto;max-width:100%;max-height:88vh;width:auto;height:auto;display:block;border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.6);object-fit:contain}

/* Bukti JP premium info overlay + per-site glow update */
.bukti-cover-card{border-color:color-mix(in srgb, var(--site-accent, #73e6ff) 28%, rgba(255,255,255,.12));box-shadow:0 28px 70px rgba(0,0,0,.46),0 0 0 1px color-mix(in srgb, var(--site-accent, #73e6ff) 18%, transparent) inset;}
.bukti-cover-card.is-active{border-color:color-mix(in srgb, var(--site-accent, #73e6ff) 72%, #ffffff 8%);box-shadow:0 30px 86px rgba(0,0,0,.56),0 0 42px var(--site-glow, rgba(83,211,255,.25)),0 0 0 1px rgba(255,255,255,.10) inset;}
.bukti-cover-card.is-active::after{content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,transparent 12%,color-mix(in srgb, var(--site-accent, #73e6ff) 36%, transparent),transparent 58%);opacity:.34;filter:blur(13px);z-index:2;animation:buktiSiteGlowBreath 3.8s ease-in-out infinite;}
@keyframes buktiSiteGlowBreath{0%,100%{opacity:.20;transform:scale(.99)}50%{opacity:.46;transform:scale(1.012)}}
.bukti-cover-copy{left:12px!important;right:12px!important;bottom:12px!important;padding:9px 10px 10px!important;border-radius:16px!important;background:linear-gradient(180deg,rgba(5,10,20,.18),rgba(5,10,20,.66) 62%,rgba(4,8,16,.82))!important;border:1px solid color-mix(in srgb, var(--site-accent, #73e6ff) 24%, rgba(255,255,255,.10))!important;box-shadow:0 14px 34px rgba(0,0,0,.30),0 0 18px color-mix(in srgb, var(--site-accent, #73e6ff) 16%, transparent)!important;backdrop-filter:blur(14px) saturate(1.16)!important;}
.bukti-cover-site{display:inline-flex!important;align-items:center!important;gap:5px!important;margin-bottom:3px!important;padding:0!important;border:0!important;background:transparent!important;font-size:8px!important;line-height:1!important;font-weight:800!important;letter-spacing:.13em!important;color:rgba(235,248,255,.70)!important;text-shadow:0 0 10px var(--site-glow, rgba(104,222,255,.28))!important;}
.bukti-site-dot{width:5px;height:5px;border-radius:50%;background:var(--site-accent,#73e6ff);box-shadow:0 0 10px var(--site-glow,rgba(115,230,255,.38));flex:0 0 auto;}
.bukti-cover-copy strong{font-size:10.5px!important;line-height:1.15!important;font-weight:700!important;letter-spacing:.035em!important;text-transform:uppercase!important;color:rgba(255,255,255,.92)!important;text-shadow:0 2px 10px rgba(0,0,0,.48)!important;}
.bukti-cover-copy p,.bukti-cover-amount{margin:4px 0 0!important;font-size:12px!important;line-height:1!important;font-weight:900!important;letter-spacing:.035em!important;color:#ffe28a!important;text-shadow:0 0 9px rgba(255,210,80,.48),0 0 18px color-mix(in srgb, var(--site-accent,#73e6ff) 22%, transparent)!important;transition:transform .45s cubic-bezier(.16,.86,.22,1),text-shadow .45s ease!important;}
.bukti-cover-card.is-active .bukti-cover-amount{animation:buktiAmountPulse 2.7s ease-in-out infinite;}
@keyframes buktiAmountPulse{0%,100%{transform:translateY(0) scale(1);filter:brightness(1)}50%{transform:translateY(-1px) scale(1.045);filter:brightness(1.12)}}
.bukti-cover-link{font-size:8.5px!important;margin-top:6px!important;opacity:.72!important;color:color-mix(in srgb, var(--site-accent, #9feaff) 78%, #ffffff)!important;}
@media (max-width:560px){.bukti-cover-copy{left:9px!important;right:9px!important;bottom:9px!important;padding:8px 9px!important}.bukti-cover-site{font-size:7.4px!important}.bukti-cover-copy strong{font-size:9.7px!important}.bukti-cover-copy p,.bukti-cover-amount{font-size:11px!important}}

/* === Bukti JP compact premium info panel update === */
.bukti-cover-copy{left:10px!important;right:10px!important;bottom:10px!important;padding:7px 9px 8px!important;border-radius:13px!important;background:linear-gradient(180deg,rgba(4,8,16,.10),rgba(4,8,16,.52) 58%,rgba(3,7,14,.76))!important;border:1px solid color-mix(in srgb,var(--site-accent,#73e6ff) 18%,rgba(255,255,255,.08))!important;box-shadow:0 10px 24px rgba(0,0,0,.26),0 0 16px color-mix(in srgb,var(--site-accent,#73e6ff) 12%,transparent)!important;backdrop-filter:blur(10px) saturate(1.18)!important}
.bukti-cover-site{display:block!important;margin:0 0 3px!important;padding:0!important;border:0!important;background:transparent!important;font-size:8.2px!important;line-height:1!important;font-weight:900!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:color-mix(in srgb,var(--site-accent,#73e6ff) 58%,#ffffff 42%)!important;text-shadow:0 0 8px var(--site-glow,rgba(115,230,255,.35)),0 1px 8px rgba(0,0,0,.65)!important}
.bukti-site-dot{display:none!important}
.bukti-cover-copy strong{font-size:10px!important;line-height:1.1!important;font-weight:750!important;letter-spacing:.045em!important;text-transform:uppercase!important;color:rgba(255,255,255,.94)!important;text-shadow:0 2px 9px rgba(0,0,0,.62)!important}
.bukti-cover-copy p,.bukti-cover-amount{margin:3px 0 0!important;font-size:13px!important;line-height:1!important;font-weight:950!important;letter-spacing:.045em!important;color:#fff3a6!important;text-shadow:0 0 7px rgba(255,232,130,.72),0 0 15px var(--site-glow,rgba(115,230,255,.35)),0 0 26px color-mix(in srgb,var(--site-accent,#73e6ff) 24%,transparent)!important;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--site-accent,#73e6ff) 22%,transparent));animation:buktiAmountStrongGlow 2.45s ease-in-out infinite}
.bukti-cover-card.is-active .bukti-cover-amount{animation:buktiAmountStrongGlow 2.2s ease-in-out infinite,buktiAmountMicroPop 4.2s ease-in-out infinite}
@keyframes buktiAmountStrongGlow{0%,100%{text-shadow:0 0 7px rgba(255,232,130,.66),0 0 15px var(--site-glow,rgba(115,230,255,.35)),0 0 24px color-mix(in srgb,var(--site-accent,#73e6ff) 18%,transparent)}50%{text-shadow:0 0 11px rgba(255,238,156,.92),0 0 22px var(--site-glow,rgba(115,230,255,.48)),0 0 36px color-mix(in srgb,var(--site-accent,#73e6ff) 32%,transparent)}}
@keyframes buktiAmountMicroPop{0%,88%,100%{transform:scale(1)}92%{transform:scale(1.035)}}
@media (max-width:560px){.bukti-cover-copy{left:8px!important;right:8px!important;bottom:8px!important;padding:6px 8px 7px!important;border-radius:12px!important}.bukti-cover-site{font-size:7.3px!important;letter-spacing:.14em!important}.bukti-cover-copy strong{font-size:9.2px!important}.bukti-cover-copy p,.bukti-cover-amount{font-size:11.4px!important}}

/* === Bukti JP readable info overlay sharpness fix ===
   Removes card-level blur from text, keeps compact modern overlay, and makes
   site/title/amount sharper on transformed carousel cards. */
.bukti-cover-card{
  filter: none!important;
  -webkit-font-smoothing: antialiased!important;
  text-rendering: geometricPrecision!important;
}
.bukti-cover-copy{
  left: 10px!important;
  right: 10px!important;
  bottom: 10px!important;
  padding: 7px 9px 8px!important;
  border-radius: 12px!important;
  background: linear-gradient(180deg, rgba(3,7,15,.18), rgba(3,7,15,.74))!important;
  border: 1px solid color-mix(in srgb, var(--site-accent,#73e6ff) 26%, rgba(255,255,255,.10))!important;
  box-shadow: 0 8px 20px rgba(0,0,0,.34), 0 0 14px color-mix(in srgb, var(--site-accent,#73e6ff) 14%, transparent)!important;
  backdrop-filter: none!important;
  -webkit-backdrop-filter: none!important;
  transform: translateZ(80px)!important;
  backface-visibility: hidden!important;
  -webkit-font-smoothing: antialiased!important;
  text-rendering: geometricPrecision!important;
}
.bukti-cover-site{
  display:block!important;
  margin:0 0 3px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  font-size:8px!important;
  line-height:1.05!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  color:color-mix(in srgb, var(--site-accent,#73e6ff) 68%, #ffffff 32%)!important;
  text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 8px var(--site-glow,rgba(115,230,255,.36))!important;
  filter:none!important;
}
.bukti-cover-copy strong{
  display:block!important;
  margin:0!important;
  font-size:10px!important;
  line-height:1.08!important;
  font-weight:850!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  color:#fff!important;
  text-shadow:0 1px 3px rgba(0,0,0,.95)!important;
  filter:none!important;
}
.bukti-cover-copy p,
.bukti-cover-amount{
  margin:3px 0 0!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.035em!important;
  color:#ffe680!important;
  text-shadow:0 1px 2px rgba(0,0,0,.92), 0 0 8px rgba(255,220,95,.58), 0 0 16px var(--site-glow,rgba(115,230,255,.30))!important;
  filter:none!important;
  transform:translateZ(0)!important;
  animation:buktiSharpAmountGlow 2.6s ease-in-out infinite!important;
}
.bukti-cover-card.is-active .bukti-cover-amount{
  animation:buktiSharpAmountGlow 2.25s ease-in-out infinite,buktiAmountMicroPop 4.2s ease-in-out infinite!important;
}
@keyframes buktiSharpAmountGlow{
  0%,100%{text-shadow:0 1px 2px rgba(0,0,0,.92),0 0 7px rgba(255,220,95,.52),0 0 14px var(--site-glow,rgba(115,230,255,.25))}
  50%{text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 11px rgba(255,232,130,.82),0 0 22px var(--site-glow,rgba(115,230,255,.42))}
}
@media (max-width:560px){
  .bukti-cover-copy{left:8px!important;right:8px!important;bottom:8px!important;padding:6px 8px 7px!important;border-radius:11px!important;transform:translateZ(60px)!important}
  .bukti-cover-site{font-size:7.2px!important;letter-spacing:.13em!important}
  .bukti-cover-copy strong{font-size:9.1px!important}
  .bukti-cover-copy p,.bukti-cover-amount{font-size:11.4px!important}
}

/* === Bukti JP true per-site logo color fix ===
   Final override: site name, amount, card border and glow now use --site-accent directly.
   This removes the old yellow/cyan bias so each card follows its selected site color. */
.bukti-cover-card{
  border-color: color-mix(in srgb, var(--site-accent,#73e6ff) 42%, rgba(255,255,255,.10))!important;
  box-shadow: 0 28px 70px rgba(0,0,0,.46), 0 0 0 1px color-mix(in srgb, var(--site-accent,#73e6ff) 28%, transparent) inset!important;
}
.bukti-cover-card.is-active{
  border-color: color-mix(in srgb, var(--site-accent,#73e6ff) 82%, #ffffff 8%)!important;
  box-shadow: 0 30px 86px rgba(0,0,0,.56), 0 0 46px var(--site-glow,rgba(115,230,255,.46)), 0 0 0 1px rgba(255,255,255,.10) inset!important;
}
.bukti-cover-copy{
  border-color: color-mix(in srgb, var(--site-accent,#73e6ff) 36%, rgba(255,255,255,.10))!important;
  box-shadow: 0 8px 20px rgba(0,0,0,.34), 0 0 16px color-mix(in srgb, var(--site-accent,#73e6ff) 26%, transparent)!important;
}
.bukti-cover-site{
  color: var(--site-accent,#73e6ff)!important;
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 9px var(--site-glow,rgba(115,230,255,.42)), 0 0 16px color-mix(in srgb, var(--site-accent,#73e6ff) 38%, transparent)!important;
}
.bukti-cover-amount,
.bukti-cover-copy p{
  color: color-mix(in srgb, var(--site-accent,#73e6ff) 82%, #ffffff 18%)!important;
  text-shadow: 0 1px 2px rgba(0,0,0,.96), 0 0 8px var(--site-glow,rgba(115,230,255,.42)), 0 0 18px color-mix(in srgb, var(--site-accent,#73e6ff) 58%, transparent)!important;
}
.bukti-cover-card.is-active .bukti-cover-amount{
  animation: buktiLogoColorAmountGlow 2.35s ease-in-out infinite, buktiAmountMicroPop 4.2s ease-in-out infinite!important;
}
@keyframes buktiLogoColorAmountGlow{
  0%,100%{text-shadow:0 1px 2px rgba(0,0,0,.96),0 0 7px var(--site-glow,rgba(115,230,255,.38)),0 0 16px color-mix(in srgb,var(--site-accent,#73e6ff) 42%,transparent)}
  50%{text-shadow:0 1px 2px rgba(0,0,0,.98),0 0 13px var(--site-glow,rgba(115,230,255,.58)),0 0 28px color-mix(in srgb,var(--site-accent,#73e6ff) 68%,transparent)}
}

/* === Bukti JP Riwayat: horizontal 2-row opposite-direction marquee === */
.bukti-reel-panel{
  position:relative;
  overflow:hidden;
  padding:18px 18px 22px;
}
/* .bukti-marquee-wrap removed — replaced by vault */
/* ── Image Vault ── */
.bukti-vault-wrap{padding:12px 0 4px}
.bukti-vault-search-wrap{position:relative;margin-bottom:10px}
.bukti-vault-search-wrap::before{
  content:"";
  position:absolute;
  left:10px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(190,210,255,.55)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat center/contain;
  pointer-events:none;
}
.bukti-vault-search{
  width:100%;
  padding:8px 12px 8px 32px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.11);
  border-radius:8px;
  color:#e0eaff;
  font-size:12px;
  outline:none;
  transition:border-color .18s,background .18s;
  box-sizing:border-box;
}
.bukti-vault-search:focus{border-color:rgba(99,179,255,.45);background:rgba(255,255,255,.10)}
.bukti-vault-search::placeholder{color:rgba(190,210,255,.38)}
.bukti-vault-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:6px;
}
/* Search state: show all items (overrides is-hidden), hide non-matches */
.bukti-vault-wrap.is-searching .bukti-vault-item.is-hidden{display:block}
.bukti-vault-wrap.is-searching .bukti-vault-item.search-hidden{display:none!important}
.bukti-vault-no-result{
  grid-column:1/-1;
  text-align:center;
  padding:20px 0;
  color:rgba(190,210,255,.45);
  font-size:13px;
}
.bukti-vault-item{
  cursor:pointer;
  border-radius:8px;
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.bukti-vault-item:hover{transform:scale(1.05);box-shadow:0 4px 14px rgba(0,0,0,.4)}
.bukti-vault-item.is-hidden{display:none}
.bukti-vault-thumb{
  aspect-ratio:1;
  overflow:hidden;
  border-radius:8px;
  background:rgba(4,8,17,.6);
}
.bukti-vault-thumb img,.bukti-vault-thumb video{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .22s ease;
}
.bukti-vault-item:hover .bukti-vault-thumb img,
.bukti-vault-item:hover .bukti-vault-thumb video{transform:scale(1.06)}
.bukti-vault-label{
  margin:5px 2px 0;
  font-size:11px;
  line-height:1.3;
  color:rgba(255,255,255,.72);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* ── Modal info overlay ── */
.bukti-proof-close{
  position:fixed;
  top:16px;right:16px;
  width:38px;height:38px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.15);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  z-index:10;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s;
}
.bukti-proof-close:hover{background:rgba(255,255,255,.28)}
.bukti-proof-info{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:5;
  display:flex;
  justify-content:center;
  padding:0 20px 24px;
  background:linear-gradient(180deg,transparent 0%,rgba(1,4,10,.35) 30%,rgba(1,4,10,.82) 62%,rgba(1,4,10,.94) 100%);
  text-align:center;
  pointer-events:none;
}
.bukti-proof-info-inner{
  pointer-events:all;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:420px;
  margin-top:auto;
  padding:16px 22px 18px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(12,18,32,.68), rgba(6,10,20,.90));
  border:1px solid color-mix(in srgb, var(--site-accent,#73e6ff) 34%, rgba(255,255,255,.12));
  box-shadow:0 18px 46px rgba(0,0,0,.55), 0 0 32px color-mix(in srgb, var(--site-accent,#73e6ff) 22%, transparent);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
}
.bukti-proof-logo-wrap{
  width:52px;height:52px;
  flex:0 0 auto;
  border-radius:50%;
  overflow:hidden;
  margin-bottom:10px;
  background:rgba(255,255,255,.07);
  border:1px solid color-mix(in srgb, var(--site-accent,#73e6ff) 46%, rgba(255,255,255,.16));
  box-shadow:0 0 18px color-mix(in srgb, var(--site-accent,#73e6ff) 30%, transparent);
  display:flex;align-items:center;justify-content:center;
}
.bukti-proof-logo{
  width:100%;height:100%;
  object-fit:contain;
  padding:6px;
  box-sizing:border-box;
  display:block;
}
.bukti-proof-info-link{pointer-events:all;display:inline-flex;margin-top:10px}
.bukti-proof-info-site{
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--site-accent,#73e6ff) 70%, #ffffff 30%);
  text-shadow:0 0 10px color-mix(in srgb, var(--site-accent,#73e6ff) 32%, transparent);
  margin-bottom:4px;
}
.bukti-proof-info-title{
  display:block;
  font-size:15px;
  font-weight:700;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
  margin-bottom:4px;
}
.bukti-proof-info-nominal{
  font-size:18px;
  font-weight:800;
  color:rgba(255,230,140,.95);
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  margin:0 0 8px;
}
@media (max-width:560px){
  .bukti-proof-info-inner{padding:14px 18px 16px;border-radius:16px}
  .bukti-proof-logo-wrap{width:44px;height:44px;margin-bottom:8px}
}
.bukti-vault-loadmore{
  display:block;
  width:100%;
  margin-top:14px;
  padding:10px 16px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.85);
  font-size:13px;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.bukti-vault-loadmore:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28)}
@media(max-width:480px){
  .bukti-vault-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:6px}
}

/* Bukti JP safe polish: centered info + smart social platform glow */
.bukti-info-panel .managed-page-content,
.bukti-info-panel .managed-page-content p{text-align:center}
.bukti-social-panel .section-head.compact{justify-content:center;text-align:center}
.bukti-social-panel .section-head.compact h2{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:7px 14px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:linear-gradient(135deg,rgba(115,230,255,.13),rgba(255,255,255,.035));box-shadow:0 0 22px rgba(115,230,255,.13)}
.bukti-social-card{position:relative;overflow:hidden;isolation:isolate;border-color:var(--platform-accent,#73e6ff);background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.018));box-shadow:0 0 0 1px rgba(255,255,255,.025),0 12px 28px rgba(0,0,0,.22),0 0 24px var(--platform-glow,rgba(115,230,255,.18));transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.bukti-social-card::before{content:attr(data-platform-icon);width:38px;height:38px;flex:0 0 38px;display:inline-flex;align-items:center;justify-content:center;border-radius:13px;font-family:Orbitron,Poppins,sans-serif;font-size:11px;font-weight:800;letter-spacing:.7px;color:#08111d;background:linear-gradient(135deg,var(--platform-accent,#73e6ff),#ffffff);box-shadow:0 0 18px var(--platform-glow,rgba(115,230,255,.35))}
.bukti-social-card::after{content:"";position:absolute;inset:-45% -25% auto auto;width:130px;height:130px;border-radius:999px;background:radial-gradient(circle,var(--platform-glow,rgba(115,230,255,.30)),transparent 68%);opacity:.9;z-index:-1;animation:buktiPlatformPulse 3.6s ease-in-out infinite}
.bukti-social-card:hover{transform:translateY(-2px);border-color:var(--platform-accent,#73e6ff);box-shadow:0 16px 34px rgba(0,0,0,.28),0 0 34px var(--platform-glow,rgba(115,230,255,.30))}
.bukti-social-copy{min-width:0;flex:1}.bukti-social-card strong{color:#fff;text-shadow:0 0 12px var(--platform-glow,rgba(115,230,255,.30))}.bukti-social-card p{max-width:42rem}
@keyframes buktiPlatformPulse{0%,100%{transform:scale(.92);opacity:.45}50%{transform:scale(1.12);opacity:.95}}
@media (max-width:768px){.bukti-social-card{flex-direction:row;align-items:center}.bukti-social-card .bukti-link-btn{align-self:center}.bukti-social-card::before{width:34px;height:34px;flex-basis:34px;border-radius:11px;font-size:10px}}

/* ===== Bukti JP counter: premium centered slot-machine digits ===== */
.bukti-jp-hero-card{
  text-align:center;
  position:relative;
  overflow:hidden;
}
.bukti-jp-hero-card.managed-page-panel{padding:10px 14px}
.bukti-jp-hero-card::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-90px;
  width:min(520px,86vw);
  height:180px;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(91,217,255,.18),transparent 68%);
  pointer-events:none;
}
.bukti-jp-hero-card .bukti-jp-head,
.bukti-jp-hero-card .section-head,
.bukti-jp-subtitle{
  text-align:center;
  justify-content:center;
  margin-left:auto;
  margin-right:auto;
}
.bukti-jp-stats{
  width:min(100%,980px);
  margin:16px auto 0!important;
  justify-content:center;
  align-items:stretch;
  gap:10px!important;
}
.bukti-stat{
  min-height:76px;
  text-align:center;
  justify-items:center;
  align-content:center;
  position:relative;
  overflow:hidden;
  padding:12px 14px 13px!important;
  border-radius:18px!important;
  border:1px solid rgba(132,205,255,.28)!important;
  background:
    linear-gradient(180deg,rgba(26,35,61,.92),rgba(6,11,24,.94)),
    radial-gradient(circle at 50% -20%,rgba(114,226,255,.24),transparent 46%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -18px 42px rgba(0,0,0,.24),
    0 14px 30px rgba(0,0,0,.25),
    0 0 24px rgba(92,201,255,.08)!important;
}
.bukti-stat::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent),
    linear-gradient(180deg,rgba(255,255,255,.08),transparent 34%,rgba(0,0,0,.20) 100%);
  opacity:.72;
}
.bukti-stat::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(122,211,255,.34),transparent);
  opacity:.55;
  pointer-events:none;
}
.bukti-stat span,
.bukti-stat strong{position:relative;z-index:1;}
.bukti-stat span{
  display:block;
  margin-bottom:7px;
  font-family:"Orbitron",Poppins,sans-serif;
  font-size:9px!important;
  line-height:1.1!important;
  letter-spacing:.12em!important;
  color:#a8c6ff!important;
  text-shadow:0 0 12px rgba(116,190,255,.36);
}
.bukti-stat strong{
  color:#ecf7ff!important;
  text-shadow:0 0 14px rgba(104,214,255,.45),0 0 28px rgba(56,115,255,.18);
}
.bukti-stat-max{
  border-color:rgba(255,215,125,.34)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -18px 42px rgba(0,0,0,.24),0 14px 30px rgba(0,0,0,.25),0 0 26px rgba(255,199,85,.10)!important;
}
.bukti-stat-max span{color:#ffe2a1!important;text-shadow:0 0 14px rgba(255,188,77,.32);}
.bukti-slot-number{
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:2px;
  width:100%;
  font-family:"Orbitron",sans-serif;
  font-variant-numeric:tabular-nums;
  letter-spacing:.03em;
  overflow:visible!important;
  text-overflow:clip!important;
}
.bukti-slot-number .slot-digit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:.72em;
  height:1.22em;
  overflow:hidden;
  border-radius:7px;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(13,22,43,.34) 48%,rgba(0,0,0,.26));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.38),0 0 10px rgba(101,205,255,.09);
}
.bukti-slot-number .slot-digit>span{display:block;transform:translateY(0);}
.bukti-slot-number .slot-digit.is-spinning>span{animation:buktiSlotDigitSpin .68s cubic-bezier(.18,.92,.22,1.04) var(--slot-delay,0ms) both;}
.bukti-slot-number .slot-separator{display:inline-flex;align-items:center;justify-content:center;min-width:.25em;opacity:.88;}
.bukti-slot-number .slot-digit.is-scrambling{
  background:linear-gradient(180deg,rgba(255,226,141,.22),rgba(40,28,10,.24));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 15px rgba(255,203,86,.30);
}
.bukti-slot-number .slot-digit.is-scrambling>span{animation:buktiDigitMicroScramble .092s steps(2,end) infinite;}
.bukti-slot-number .slot-digit.is-locking>span{animation:buktiDigitLock .38s cubic-bezier(.2,.9,.25,1.2) both;}
@keyframes buktiSlotDigitSpin{0%{transform:translateY(-135%) scaleY(1.08);filter:blur(1.2px);opacity:.18}44%{transform:translateY(22%) scaleY(.92);filter:blur(.35px);opacity:1}72%{transform:translateY(-9%) scaleY(1.02)}100%{transform:translateY(0);filter:blur(0);opacity:1}}
@keyframes buktiDigitMicroScramble{0%{transform:translate(-.8px,-.6px) rotate(-1deg);filter:blur(.35px)}50%{transform:translate(.8px,.5px) rotate(1deg);filter:blur(.15px)}100%{transform:translate(-.2px,.8px) rotate(0deg);filter:blur(.45px)}}
@keyframes buktiDigitLock{0%{transform:translateY(-28%) scale(1.08);filter:blur(.5px)}55%{transform:translateY(7%) scale(.97);filter:blur(0)}100%{transform:translateY(0) scale(1)}}
@media (max-width:768px){
  .bukti-jp-stats{width:100%;margin-top:12px!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;}
  .bukti-stat{min-height:58px;padding:8px 5px 7px!important;border-radius:12px!important;}
  .bukti-stat span{font-size:5.7px!important;letter-spacing:.03em!important;margin-bottom:5px;white-space:nowrap;}
  .bukti-stat strong{font-size:9.6px!important;line-height:1.05!important;}
  .bukti-stat-max span{font-size:4.8px!important;}
  .bukti-stat-max strong{font-size:7.2px!important;}
  .bukti-slot-number{gap:0;letter-spacing:0;}
  .bukti-slot-number .slot-digit{border-radius:4px;min-width:.58em;height:1.12em;}
}

/* === Bukti JP counter — count-up card style === */
.bukti-jp-hero-card .bukti-jp-stats{
  width:min(100%,480px)!important;
  margin:8px auto 0!important;
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:8px!important;
  background:none!important;
  border:none!important;
  box-shadow:none!important;
}
.bukti-jp-hero-card .bukti-stat{
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:10px!important;
  padding:10px 10px 8px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  text-align:center!important;
  box-shadow:0 3px 10px rgba(0,0,0,.25)!important;
}
.bukti-jp-hero-card .bukti-stat::before{display:none!important;}
.bukti-jp-hero-card .bukti-stat::after{display:none!important;}
.bukti-jp-hero-card .bukti-stat strong{
  order:0!important;
  display:block!important;
  font-family:"Orbitron",sans-serif!important;
  font-size:20px!important;
  font-weight:700!important;
  line-height:1.1!important;
  color:#ffffff!important;
  text-shadow:0 0 12px rgba(104,214,255,.30)!important;
  letter-spacing:.02em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  width:100%!important;
}
.bukti-jp-hero-card .bukti-stat span{
  order:1!important;
  display:block!important;
  font-family:Poppins,sans-serif!important;
  font-size:10px!important;
  font-weight:600!important;
  line-height:1.3!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  color:rgba(190,215,255,.80)!important;
  text-shadow:none!important;
  white-space:normal!important;
  margin:0!important;
}
.bukti-jp-hero-card .bukti-stat-max{
  border-color:rgba(255,200,60,.25)!important;
  background:rgba(255,185,30,.05)!important;
  box-shadow:0 3px 10px rgba(0,0,0,.25),0 0 14px rgba(255,199,85,.08)!important;
}
.bukti-jp-hero-card .bukti-stat-max strong{
  font-size:14px!important;
  color:#ffd166!important;
  text-shadow:0 0 10px rgba(255,190,60,.30)!important;
  white-space:normal!important;
  word-break:break-word!important;
}
.bukti-jp-hero-card .bukti-stat-max span{
  color:rgba(255,200,80,.80)!important;
}
/* Mobile: compact 3-column */
@media (max-width:640px){
  .bukti-jp-hero-card .bukti-jp-stats{
    width:100%!important;
    gap:6px!important;
  }
  .bukti-jp-hero-card .bukti-stat{
    padding:8px 6px 6px!important;
    gap:3px!important;
    border-radius:8px!important;
  }
  .bukti-jp-hero-card .bukti-stat span{
    font-size:9px!important;
    letter-spacing:.04em!important;
    color:rgba(190,215,255,.80)!important;
  }
  .bukti-jp-hero-card .bukti-stat strong{
    font-size:16px!important;
  }
  .bukti-jp-hero-card .bukti-stat-max strong{
    font-size:12px!important;
    white-space:normal!important;
    word-break:break-word!important;
  }
}

@media (max-width:768px){
  .bukti-jp-hero-card{padding:12px 10px 14px!important;}
  .bukti-jp-hero-card .bukti-jp-head :is(h1,h2),.bukti-jp-hero-card .section-head :is(h1,h2){font-size:18px!important;margin-bottom:4px!important;}
  .bukti-jp-page-info{font-size:12px!important;margin-top:4px!important;}
}
/* Strip dark card background from hero card — prevents dark band above the counters */
.bukti-jp-hero-card{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  padding-left:4px!important;
  padding-right:4px!important;
  padding-bottom:6px!important;
}
.bukti-jp-hero-card .bukti-jp-stats{
  margin-top:8px!important;
}

/* === Riwayat Bukti JP toggle button === */
.bukti-reel-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin:12px auto 4px;
  padding:0;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  color:rgba(190,210,255,.9);
  cursor:pointer;
  transition:background .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s;
  animation:buktiReelPulse 2.2s ease-in-out infinite;
}
.bukti-reel-toggle:hover{
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.32);
  color:#fff;
  transform:scale(1.1);
  box-shadow:0 0 18px rgba(130,175,255,.4);
  animation-play-state:paused;
}
.bukti-reel-toggle:active{
  transform:scale(.92);
}
.bukti-reel-icon{
  width:20px;
  height:20px;
  display:block;
  transition:transform .3s ease;
}
.bukti-reel-icon path{
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.bukti-reel-icon path:first-child{
  opacity:.5;
}
.bukti-reel-toggle.is-open .bukti-reel-icon{
  transform:rotate(180deg);
}
@keyframes buktiReelPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(130,175,255,.3); }
  50%{ box-shadow:0 0 0 8px rgba(130,175,255,0); }
}
/* === Bukti JP: info moved below title, no separate info container === */
.bukti-jp-page-info{
  width:min(100%,780px);
  margin:8px auto 0!important;
  text-align:center!important;
  color:#dbe9ff;
  font-size:14px;
  line-height:1.65;
  font-weight:600;
  text-shadow:0 0 12px rgba(90,180,255,.22);
}
.bukti-info-panel{display:none!important;}
@media (max-width:768px){
  .bukti-jp-page-info{font-size:12px;line-height:1.55;margin-top:6px!important;}
}
/* === Carousel card: info box + button — final clean === */
.bukti-cover-copy{
  position:absolute!important;
  left:10px!important;right:10px!important;bottom:10px!important;
  padding:8px 10px 9px 12px!important;
  border-radius:12px!important;
  background:linear-gradient(160deg,rgba(2,5,12,.80),rgba(2,5,12,.96))!important;
  border:1px solid color-mix(in srgb,var(--site-accent,#73e6ff) 32%,rgba(255,255,255,.08))!important;
  border-left:3px solid var(--site-accent,#73e6ff)!important;
  box-shadow:0 6px 16px rgba(0,0,0,.55),0 0 14px color-mix(in srgb,var(--site-accent,#73e6ff) 16%,transparent)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  transform:translateZ(80px)!important;
  -webkit-font-smoothing:antialiased!important;
}
.bukti-cover-site{
  display:inline-block!important;
  margin:0 0 4px!important;
  padding:2px 8px!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--site-accent,#73e6ff) 18%,rgba(0,0,0,.5))!important;
  border:1px solid color-mix(in srgb,var(--site-accent,#73e6ff) 48%,transparent)!important;
  font-size:8px!important;font-weight:900!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;
  color:var(--site-accent,#73e6ff)!important;
  text-shadow:0 0 7px var(--site-glow,rgba(115,230,255,.5))!important;
}
.bukti-cover-copy strong{
  display:block!important;margin:0!important;
  font-size:10px!important;line-height:1.15!important;font-weight:600!important;
  letter-spacing:.04em!important;text-transform:uppercase!important;
  color:rgba(190,215,255,.72)!important;
  text-shadow:0 1px 3px rgba(0,0,0,.9)!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
.bukti-cover-copy p,
.bukti-cover-amount{
  margin:3px 0 0!important;
  font-size:16px!important;line-height:1!important;font-weight:900!important;
  color:#fff!important;
  text-shadow:0 2px 0 rgba(0,0,0,1),0 0 10px var(--site-glow,rgba(115,230,255,.6)),0 0 20px color-mix(in srgb,var(--site-accent,#73e6ff) 65%,transparent)!important;
  animation:buktiAmountHeroPulse 2.2s ease-in-out infinite!important;
}
.bukti-cover-card.is-active .bukti-cover-amount{
  animation:buktiAmountHeroPulse 2.0s ease-in-out infinite,buktiAmountMicroPop 4.2s ease-in-out infinite!important;
}
@keyframes buktiAmountHeroPulse{
  0%,100%{text-shadow:0 2px 0 rgba(0,0,0,1),0 0 8px var(--site-glow,rgba(115,230,255,.5)),0 0 18px color-mix(in srgb,var(--site-accent,#73e6ff) 55%,transparent)}
  50%{text-shadow:0 2px 0 rgba(0,0,0,1),0 0 14px var(--site-glow,rgba(115,230,255,.8)),0 0 28px color-mix(in srgb,var(--site-accent,#73e6ff) 85%,transparent)}
}

/* Cek Sekarang button */
.bukti-cek-btn{
  display:inline-flex!important;
  margin-top:6px!important;
  text-decoration:none!important;
  position:relative!important;overflow:hidden!important;
}
.bukti-cek-btn-inner{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px 5px 10px;
  border-radius:999px;
  background:color-mix(in srgb,var(--site-accent,#73e6ff) 22%,rgba(0,0,0,.65));
  border:1px solid color-mix(in srgb,var(--site-accent,#73e6ff) 60%,transparent);
  box-shadow:0 0 8px color-mix(in srgb,var(--site-accent,#73e6ff) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  position:relative;z-index:1;
}
.bukti-cek-btn-icon{
  font-size:9px;color:var(--site-accent,#73e6ff);line-height:1;
  filter:drop-shadow(0 0 3px var(--site-glow,rgba(115,230,255,.6)));
  transition:transform .25s ease;display:inline-block;
}
.bukti-cek-btn-text{
  font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.8),0 0 6px var(--site-glow,rgba(115,230,255,.4));
  white-space:nowrap;
}
.bukti-cek-btn-shine{
  position:absolute;inset:0;border-radius:999px;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.20) 50%,transparent 70%);
  transform:translateX(-120%);pointer-events:none;z-index:2;
  animation:buktiCekShine 3.4s ease-in-out infinite;
}
@keyframes buktiCekShine{0%,55%,100%{transform:translateX(-120%)}70%{transform:translateX(120%)}}
.bukti-cover-card.is-active .bukti-cek-btn-inner{
  animation:buktiCekPulse 2.4s ease-in-out infinite;
}
@keyframes buktiCekPulse{
  0%,100%{box-shadow:0 0 8px color-mix(in srgb,var(--site-accent,#73e6ff) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.10)}
  50%{box-shadow:0 0 16px color-mix(in srgb,var(--site-accent,#73e6ff) 55%,transparent),0 0 28px color-mix(in srgb,var(--site-accent,#73e6ff) 20%,transparent),inset 0 1px 0 rgba(255,255,255,.16)}
}
.bukti-cek-btn:hover .bukti-cek-btn-inner{
  transform:scale(1.05) translateY(-1px);
  background:color-mix(in srgb,var(--site-accent,#73e6ff) 36%,rgba(0,0,0,.5));
  box-shadow:0 0 18px color-mix(in srgb,var(--site-accent,#73e6ff) 50%,transparent),0 4px 14px rgba(0,0,0,.4);
}
.bukti-cek-btn:hover .bukti-cek-btn-icon{transform:translateX(3px);}
.bukti-cek-btn:active .bukti-cek-btn-inner{transform:scale(.96);}

@media (max-width:560px){
  .bukti-cover-copy{left:8px!important;right:8px!important;bottom:8px!important;padding:6px 8px 7px 10px!important;border-radius:10px!important;}
  .bukti-cover-site{font-size:7px!important;padding:2px 6px!important;margin-bottom:3px!important;}
  .bukti-cover-copy strong{font-size:8.5px!important;}
  .bukti-cover-copy p,.bukti-cover-amount{font-size:13px!important;}
  .bukti-cek-btn-text{font-size:8px!important;letter-spacing:.09em!important;}
  .bukti-cek-btn-inner{padding:4px 10px 4px 8px!important;gap:4px!important;}
  .bukti-cek-btn-icon{font-size:8px!important;}
}

/* === Bukti JP — Compact Info Overlay (size reduction fix) ===
   Scales down the .bukti-cover-copy container and all its children
   for a cleaner, less-dominant overlay on the carousel cards. */

/* --- Container --- */
.bukti-cover-copy {
  left: 8px!important;
  right: 8px!important;
  bottom: 8px!important;
  padding: 6px 8px 7px!important;
  border-radius: 10px!important;
  gap: 0!important;
}

/* --- Site name label --- */
.bukti-cover-site {
  font-size: 7px!important;
  letter-spacing: .13em!important;
  margin-bottom: 2px!important;
}

/* --- Title (strong) --- */
.bukti-cover-copy strong {
  font-size: 9px!important;
  line-height: 1.12!important;
  letter-spacing: .03em!important;
}

/* --- Amount --- */
.bukti-cover-copy p,
.bukti-cover-amount {
  font-size: 12px!important;
  margin: 2px 0 0!important;
  font-weight: 850!important;
}

/* --- Cek Sekarang button --- */
.bukti-cek-btn {
  margin-top: 5px!important;
}
.bukti-cek-btn-inner {
  padding: 4px 9px 4px 8px!important;
  gap: 4px!important;
}
.bukti-cek-btn-text {
  font-size: 7.5px!important;
  letter-spacing: .10em!important;
}
.bukti-cek-btn-icon {
  font-size: 7.5px!important;
}

/* --- Mobile adjustments --- */
@media (max-width: 560px) {
  .bukti-cover-copy {
    left: 6px!important;
    right: 6px!important;
    bottom: 6px!important;
    padding: 5px 7px 6px!important;
    border-radius: 9px!important;
  }
  .bukti-cover-site   { font-size: 6.5px!important; }
  .bukti-cover-copy strong { font-size: 8px!important; }
  .bukti-cover-copy p,
  .bukti-cover-amount { font-size: 10.5px!important; }
  .bukti-cek-btn-text { font-size: 7px!important; }
  .bukti-cek-btn-inner{ padding: 3px 8px 3px 7px!important; }
}

/* === Bukti JP — Floating Text Overlay (no black container) ===
   Removes the heavy dark box entirely. Text floats over a soft bottom
   gradient on the card itself. Nothing blocks the proof image. */

/* Remove the container box completely */
.bukti-cover-copy {
  left: 0!important;
  right: 0!important;
  bottom: 0!important;
  padding: 32px 12px 10px!important;
  border-radius: 0 0 inherit inherit!important;
  background: linear-gradient(to top,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.55) 40%,
    rgba(0,0,0,.0) 100%
  )!important;
  border: none!important;
  box-shadow: none!important;
  backdrop-filter: none!important;
  -webkit-backdrop-filter: none!important;
  transform: none!important;
}

/* Site name — small glowing label, no badge */
.bukti-cover-site {
  display: block!important;
  font-size: 7.5px!important;
  font-weight: 900!important;
  letter-spacing: .18em!important;
  text-transform: uppercase!important;
  color: var(--site-accent, #73e6ff)!important;
  text-shadow:
    0 0 8px var(--site-glow, rgba(115,230,255,.6)),
    0 1px 4px rgba(0,0,0,.95)!important;
  margin-bottom: 2px!important;
  padding: 0!important;
  border: none!important;
  background: transparent!important;
}

/* Title */
.bukti-cover-copy strong {
  display: block!important;
  font-size: 9.5px!important;
  line-height: 1.1!important;
  font-weight: 700!important;
  letter-spacing: .04em!important;
  text-transform: uppercase!important;
  color: rgba(255,255,255,.93)!important;
  text-shadow: 0 1px 0 rgba(0,0,0,1), 0 2px 8px rgba(0,0,0,.9)!important;
  margin: 0!important;
}

/* Amount */
.bukti-cover-copy p,
.bukti-cover-amount {
  font-size: 13px!important;
  font-weight: 900!important;
  margin: 2px 0 0!important;
  line-height: 1!important;
  color: #fff!important;
  text-shadow:
    0 1px 0 rgba(0,0,0,1),
    0 0 10px var(--site-glow, rgba(115,230,255,.55)),
    0 0 20px color-mix(in srgb, var(--site-accent,#73e6ff) 60%, transparent)!important;
}

/* Cek Sekarang — slim transparent pill */
.bukti-cek-btn {
  margin-top: 6px!important;
}
.bukti-cek-btn-inner {
  padding: 4px 10px 4px 8px!important;
  gap: 4px!important;
  background: rgba(0,0,0,.38)!important;
  border: 1px solid color-mix(in srgb, var(--site-accent,#73e6ff) 55%, transparent)!important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--site-accent,#73e6ff) 22%, transparent)!important;
  backdrop-filter: blur(4px)!important;
}
.bukti-cek-btn-text {
  font-size: 8px!important;
  letter-spacing: .11em!important;
}
.bukti-cek-btn-icon {
  font-size: 8px!important;
}

/* Mobile */
@media (max-width: 560px) {
  .bukti-cover-copy {
    padding: 28px 10px 8px!important;
  }
  .bukti-cover-site   { font-size: 6.8px!important; }
  .bukti-cover-copy strong { font-size: 8.5px!important; }
  .bukti-cover-copy p,
  .bukti-cover-amount { font-size: 11.5px!important; }
}


/* ============================================================
   JADWAL PASARAN — ALIVE ANIMATIONS v2
   Append to bottom of style.css. Touch nothing else.
   ============================================================ */

/* ── STICKY HEADER: aurora background that actually moves ── */
.jadwal-sticky-stack {
  position: relative;
  overflow: hidden;
}
.jadwal-sticky-stack::before {
  content: '';
  position: absolute;
  inset: -60% -40%;
  background:
    radial-gradient(ellipse 55% 40% at 20% 50%, rgba(54,227,255,.13) 0%, transparent 65%),
    radial-gradient(ellipse 45% 35% at 80% 40%, rgba(162,69,255,.11) 0%, transparent 60%),
    radial-gradient(ellipse 35% 30% at 55% 80%, rgba(255,75,221,.09) 0%, transparent 55%);
  animation: jadwalAuroraShift 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes jadwalAuroraShift {
  0%   { transform: translate(0%,    0%)   scale(1);    filter: hue-rotate(0deg);   }
  33%  { transform: translate(6%,   -4%)   scale(1.08); filter: hue-rotate(18deg);  }
  66%  { transform: translate(-5%,   6%)   scale(0.95); filter: hue-rotate(-12deg); }
  100% { transform: translate(4%,    3%)   scale(1.05); filter: hue-rotate(30deg);  }
}

/* everything inside sticky stays above aurora */
.jadwal-title-wrap,
.jadwal-grid-head {
  position: relative;
  z-index: 1;
}

/* ── SCAN LINE: fast diagonal sweep ── */
.jadwal-sticky-stack::after {
  content: '';
  position: absolute;
  top: -10%; left: -80%;
  width: 50%; height: 120%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(54,227,255,.04) 30%,
    rgba(54,227,255,.13) 50%,
    rgba(162,69,255,.08) 55%,
    transparent 80%
  );
  animation: jadwalDiagSweep 4s cubic-bezier(.4,0,.6,1) infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes jadwalDiagSweep {
  0%   { left: -80%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 160%; opacity: 0; }
}

/* ── TITLE: gradient text that flows + slight vertical float ── */
.jadwal-head h2 {
  background: linear-gradient(
    90deg,
    var(--cyan)   0%,
    var(--pink)   30%,
    var(--purple) 55%,
    var(--cyan)   80%,
    var(--pink)   100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation:
    jadwalTitleFlow  4s linear infinite,
    jadwalTitleFloat 3s ease-in-out infinite;
  display: inline-block;
}
@keyframes jadwalTitleFlow {
  0%   { background-position: 0%   center; }
  100% { background-position: 300% center; }
}
@keyframes jadwalTitleFloat {
  0%,100% { transform: translateY(0px);   }
  50%     { transform: translateY(-3px);  }
}

/* ── CLOCK: big, ticking, neon ── */
.jadwal-live-meta #jadwalLiveClock {
  font-size: 28px;
  letter-spacing: .06em;
  animation: jadwalClockFlicker 1s steps(1) infinite;
  display: inline-block;
}
@keyframes jadwalClockFlicker {
  0%,49% {
    text-shadow:
      0 0 10px var(--cyan),
      0 0 24px rgba(54,227,255,.45),
      0 0 48px rgba(54,227,255,.20);
    color: #fff;
  }
  50%,100% {
    text-shadow:
      0 0  6px var(--cyan),
      0 0 14px rgba(54,227,255,.25);
    color: rgba(255,255,255,.88);
  }
}

/* ── DATE LINE: slow slide left-right ── */
.jadwal-live-meta #jadwalLiveDate {
  animation: jadwalDateDrift 6s ease-in-out infinite;
  display: inline-block;
}
@keyframes jadwalDateDrift {
  0%,100% { transform: translateX(0px);  color: var(--muted); }
  50%     { transform: translateX(4px);  color: var(--cyan);  }
}

/* ── COLUMN HEADERS: wave motion, one by one ── */
.jadwal-grid-head span {
  position: relative;
  overflow: hidden;
  animation: jadwalHeadWave 3.5s ease-in-out infinite;
}
.jadwal-grid-head span:nth-child(1) { animation-delay: 0s; }
.jadwal-grid-head span:nth-child(2) { animation-delay: .6s; }
.jadwal-grid-head span:nth-child(3) { animation-delay: 1.2s; }
@keyframes jadwalHeadWave {
  0%,100% {
    transform: translateY(0px);
    background: rgba(255,255,255,.06);
    border-color: var(--stroke);
    color: var(--cyan);
  }
  40% {
    transform: translateY(-3px);
    background: rgba(54,227,255,.12);
    border-color: var(--stroke-hi);
    color: #fff;
    box-shadow: 0 6px 18px rgba(54,227,255,.20), 0 0 0 1px var(--stroke-hi);
  }
  60% {
    transform: translateY(-3px);
  }
}
/* shimmer sweep inside each header pill */
.jadwal-grid-head span::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: jadwalPillShimmer 3.5s ease-in-out infinite;
}
.jadwal-grid-head span:nth-child(1)::after { animation-delay: 0s; }
.jadwal-grid-head span:nth-child(2)::after { animation-delay: .6s; }
.jadwal-grid-head span:nth-child(3)::after { animation-delay: 1.2s; }
@keyframes jadwalPillShimmer {
  0%   { left: -100%; }
  40%,100% { left: 160%; }
}

/* ── ROWS: staggered cascade in on load ── */
.jadwal-grid-row {
  opacity: 0;
  transform: translateX(-12px);
  animation: jadwalRowSlideIn .5s cubic-bezier(.22,1,.36,1) forwards;
}
.jadwal-grid-row:nth-child(1)  { animation-delay: .04s; }
.jadwal-grid-row:nth-child(2)  { animation-delay: .10s; }
.jadwal-grid-row:nth-child(3)  { animation-delay: .16s; }
.jadwal-grid-row:nth-child(4)  { animation-delay: .22s; }
.jadwal-grid-row:nth-child(5)  { animation-delay: .28s; }
.jadwal-grid-row:nth-child(6)  { animation-delay: .34s; }
.jadwal-grid-row:nth-child(7)  { animation-delay: .40s; }
.jadwal-grid-row:nth-child(8)  { animation-delay: .46s; }
.jadwal-grid-row:nth-child(9)  { animation-delay: .52s; }
.jadwal-grid-row:nth-child(10) { animation-delay: .58s; }
.jadwal-grid-row:nth-child(11) { animation-delay: .64s; }
.jadwal-grid-row:nth-child(12) { animation-delay: .70s; }
@keyframes jadwalRowSlideIn {
  to { opacity: 1; transform: translateX(0); }
}

/* ── CELLS: rolling border glow wave across all 3 columns ── */
.jadwal-grid-cell {
  position: relative;
  overflow: hidden;
  transition: border-color .4s, box-shadow .4s;
  animation: jadwalBorderRoll 6s ease-in-out infinite;
}
.jadwal-grid-pasaran    { animation-delay: 0s;   }
.jadwal-grid-keterangan { animation-delay: 2s;   }
.jadwal-grid-jam        { animation-delay: 4s;   }
@keyframes jadwalBorderRoll {
  0%,100% { border-color: rgba(255,255,255,.06); box-shadow: none; }
  50%     {
    border-color: var(--stroke-hi);
    box-shadow: 0 0 10px rgba(54,227,255,.10);
  }
}

/* light streak inside each cell */
.jadwal-grid-cell::before {
  content: '';
  position: absolute;
  top: 0; left: -120%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: jadwalCellStreak 7s linear infinite;
}
.jadwal-grid-pasaran::before    { animation-delay: 0s;    }
.jadwal-grid-keterangan::before { animation-delay: 2.3s;  }
.jadwal-grid-jam::before        { animation-delay: 4.6s;  }
@keyframes jadwalCellStreak {
  0%       { left: -120%; }
  30%,100% { left: 180%;  }
}

/* ── PASARAN NAME: char-by-char color shimmer via background ── */
.jadwal-pasaran-name {
  background: linear-gradient(
    90deg,
    #f3fbff 0%,
    var(--cyan)   40%,
    var(--pink)   60%,
    #f3fbff 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: jadwalNameShimmer 5s ease-in-out infinite;
}
@keyframes jadwalNameShimmer {
  0%,100% { background-position: 100% center; }
  50%     { background-position:   0% center; }
}

/* ── MINI LINK: orbit-like pulse + float ── */
.jadwal-mini-link {
  animation: jadwalLinkFloat 2.8s ease-in-out infinite;
}
@keyframes jadwalLinkFloat {
  0%,100% {
    transform: translateY(0px) scale(1);
    box-shadow: none;
    border-color: rgba(124,207,231,.35);
  }
  50% {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 6px 16px rgba(54,227,255,.22);
    border-color: var(--stroke-hi);
  }
}

/* ── JAM COLUMN: neon countdown feel ── */
.jadwal-grid-jam {
  font-family: 'Orbitron', 'Courier New', monospace;
  letter-spacing: .05em;
  animation:
    jadwalBorderRoll 6s ease-in-out 4s infinite,
    jadwalJamNeon    2s ease-in-out infinite;
}
@keyframes jadwalJamNeon {
  0%,100% {
    color: #fff;
    text-shadow: 0 0  6px rgba(54,227,255,.30);
    background: rgba(75,181,255,.08);
  }
  50% {
    color: var(--cyan);
    text-shadow: 0 0 12px rgba(54,227,255,.70), 0 0 28px rgba(54,227,255,.30);
    background: rgba(54,227,255,.13);
  }
}

/* ── IS-OFF: urgent red throb with expanding ring ── */
.jadwal-grid-row.is-off .jadwal-grid-cell {
  animation: jadwalOffThrob 1.8s ease-in-out infinite !important;
}
.jadwal-grid-row.is-off .jadwal-grid-jam {
  animation: jadwalOffThrobJam 1.8s ease-in-out .4s infinite !important;
  font-family: 'Orbitron','Courier New',monospace;
}
.jadwal-grid-row.is-off .jadwal-pasaran-name {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  animation: none !important;
  background: none !important;
  background-clip: unset !important;
}
@keyframes jadwalOffThrob {
  0%,100% {
    background: #7f1d1d !important;
    border-color: #ef4444 !important;
    box-shadow: none;
  }
  50% {
    background: #991b1b !important;
    border-color: #f87171 !important;
    box-shadow: 0 0 18px rgba(239,68,68,.35), inset 0 0 12px rgba(239,68,68,.15);
  }
}
@keyframes jadwalOffThrobJam {
  0%,100% {
    background: #991b1b !important;
    border-color: #ef4444 !important;
    color: #fff !important;
    text-shadow: none;
  }
  50% {
    background: #b91c1c !important;
    border-color: #f87171 !important;
    color: #fca5a5 !important;
    text-shadow: 0 0 10px rgba(239,68,68,.60);
    box-shadow: 0 0 20px rgba(239,68,68,.40);
  }
}

/* ── reduce-motion ── */
@media (prefers-reduced-motion: reduce) {
  .jadwal-sticky-stack::before,
  .jadwal-sticky-stack::after,
  .jadwal-grid-head span::after,
  .jadwal-grid-cell::before { display: none; }
  .jadwal-head h2,
  .jadwal-live-meta #jadwalLiveClock,
  .jadwal-live-meta #jadwalLiveDate,
  .jadwal-grid-head span,
  .jadwal-grid-row,
  .jadwal-grid-cell,
  .jadwal-grid-jam,
  .jadwal-pasaran-name,
  .jadwal-mini-link { animation: none !important; opacity: 1 !important; transform: none !important; -webkit-text-fill-color: unset !important; }
}

/* ============================================================
   Buku Mimpi REAL FINAL SAFE FIX
   Visual only: no logic/data/search changed.
   ============================================================ */
.buku-mimpi-section-head{justify-content:center!important;text-align:center!important}
.buku-mimpi-section-head span{display:none!important}
.buku-mimpi-copy{text-align:center!important;max-width:860px!important;margin:0 auto!important}
.buku-mimpi-toolbar{justify-content:center!important;align-items:center!important}
.buku-mimpi-search-card{width:min(100%,760px)!important;max-width:760px!important;flex:0 1 760px!important;margin:0 auto!important}
.buku-mimpi-search-input-wrap{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;align-items:center!important;gap:8px!important;padding:8px!important;border-radius:16px!important;background:linear-gradient(180deg,rgba(7,18,34,.98),rgba(7,16,31,.98))!important;border:1px solid rgba(99,181,255,.28)!important;box-shadow:0 0 0 1px rgba(67,190,255,.08),0 0 18px rgba(51,169,255,.10),inset 0 1px 0 rgba(255,255,255,.05)!important}
.buku-mimpi-search-input{height:38px!important;min-height:38px!important;padding:0 12px!important;border-radius:11px!important;line-height:38px!important}
.buku-mimpi-search-submit,.buku-mimpi-clear-link{height:38px!important;min-height:38px!important;padding:0 14px!important;border-radius:12px!important;font-size:12px!important;line-height:1!important}
/* old per-button overrides removed — unified block below handles all three */
.buku-mimpi-table-wrap{position:relative!important;overflow:auto!important;max-height:68vh!important;padding:0!important;border-radius:20px!important;background:#07111f!important;border:1px solid rgba(120,170,255,.18)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 18px 36px rgba(0,0,0,.18)!important;-webkit-overflow-scrolling:touch!important}
.buku-mimpi-table{width:100%!important;min-width:780px!important;table-layout:fixed!important;border-collapse:separate!important;border-spacing:0!important;background:#07111f!important;border-radius:0!important;overflow:visible!important}
.buku-mimpi-table thead{position:relative!important;z-index:20!important}
.buku-mimpi-table thead th{position:sticky!important;top:0!important;z-index:30!important;background:#173052!important;background-image:linear-gradient(180deg,#224d7d 0%,#17375f 48%,#10243d 100%)!important;color:#f7fbff!important;border-bottom:1px solid rgba(122,213,255,.24)!important;box-shadow:0 1px 0 rgba(255,255,255,.08),0 8px 18px rgba(0,0,0,.35)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;animation:bukuMimpiHeaderAlive 3.4s ease-in-out infinite!important}
.buku-mimpi-table tbody{position:relative!important;z-index:1!important;background:#07111f!important}
.buku-mimpi-table tbody tr{position:relative!important;z-index:1!important}
.buku-mimpi-table tbody td{background-clip:padding-box!important}
@keyframes bukuMimpiHeaderAlive{0%,100%{box-shadow:0 1px 0 rgba(255,255,255,.08),0 8px 18px rgba(0,0,0,.35),inset 0 0 0 rgba(57,212,255,0)}50%{box-shadow:0 1px 0 rgba(255,255,255,.1),0 8px 20px rgba(0,0,0,.38),inset 0 0 18px rgba(57,212,255,.18)}}
/* bukuMimpiButtonAlive + bukuMimpiButtonShine removed — replaced by bukuMimpiUnifiedBtnAlive + bukuMimpiUnifiedBtnShine */
@media (max-width:768px){.buku-mimpi-search-card{width:100%!important;max-width:none!important;flex:1 1 100%!important}.buku-mimpi-search-input-wrap{grid-template-columns:minmax(0,1fr) auto!important;padding:8px!important;gap:8px!important}.buku-mimpi-search-input{grid-column:auto!important;height:38px!important;min-height:38px!important}.buku-mimpi-clear-link{grid-column:1 / -1!important;width:100%!important}.buku-mimpi-table-wrap{max-height:62vh!important;border-radius:18px!important}.buku-mimpi-table{min-width:620px!important}}

/* ============================================================
   Buku Mimpi mobile fit fix
   Visual only: makes all 4 columns fit inside mobile width.
   No PHP/data/search logic changed.
   ============================================================ */
@media (max-width: 768px) {
  .buku-mimpi-table-wrap {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: 62vh !important;
    padding: 0 !important;
  }

  .buku-mimpi-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  .buku-mimpi-table col.buku-mimpi-col-no { width: 38px !important; }
  .buku-mimpi-table col.buku-mimpi-col-keterangan { width: auto !important; }
  .buku-mimpi-table col.buku-mimpi-col-jenis { width: 58px !important; }
  .buku-mimpi-table col.buku-mimpi-col-nomor { width: 92px !important; }

  .buku-mimpi-table thead th {
    padding: 10px 5px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    letter-spacing: .04em !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .buku-mimpi-table tbody td {
    padding: 10px 5px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }

  .buku-mimpi-table thead th:first-child,
  .buku-mimpi-table tbody td:first-child {
    width: 38px !important;
    max-width: 38px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    text-align: center !important;
  }

  .buku-mimpi-table tbody td:nth-child(2) {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .buku-mimpi-table tbody td:nth-child(3) {
    width: 58px !important;
    max-width: 58px !important;
    text-align: center !important;
    font-size: 10px !important;
  }

  .buku-mimpi-table tbody td:last-child {
    width: 92px !important;
    max-width: 92px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 390px) {
  .buku-mimpi-table col.buku-mimpi-col-no { width: 34px !important; }
  .buku-mimpi-table col.buku-mimpi-col-jenis { width: 50px !important; }
  .buku-mimpi-table col.buku-mimpi-col-nomor { width: 82px !important; }

  .buku-mimpi-table thead th {
    padding: 9px 3px !important;
    font-size: 8px !important;
  }

  .buku-mimpi-table tbody td {
    padding: 9px 4px !important;
    font-size: 10.5px !important;
  }

  .buku-mimpi-table tbody td:nth-child(3),
  .buku-mimpi-table tbody td:last-child {
    font-size: 9.5px !important;
  }
}

/* ============================================================
   Buku Mimpi button upgrade + alive UI — SAFE CSS ONLY
   Targets only: Cari, Reset, Prev, Next + search wrap + pagination.
   No table/layout/PHP/data logic changed.
   ============================================================ */

/* --- Search wrapper alive glow --- */
.buku-mimpi-search-input-wrap{
  animation:bukuMimpiSearchWrapAlive 4s ease-in-out infinite!important;
}
@keyframes bukuMimpiSearchWrapAlive{
  0%,100%{border-color:rgba(99,181,255,.28)!important;box-shadow:0 0 0 1px rgba(67,190,255,.06),0 0 14px rgba(51,169,255,.08),inset 0 1px 0 rgba(255,255,255,.05)!important}
  50%{border-color:rgba(115,220,255,.60)!important;box-shadow:0 0 0 1px rgba(67,210,255,.14),0 0 28px rgba(90,180,255,.22),inset 0 1px 0 rgba(255,255,255,.08)!important}
}

/* --- Pagination nav floating pulse --- */
.buku-mimpi-pagination{
  animation:bukuMimpiPagAlive 4.5s ease-in-out infinite!important;
}
@keyframes bukuMimpiPagAlive{
  0%,100%{filter:drop-shadow(0 0 0px rgba(73,198,255,0))}
  50%{filter:drop-shadow(0 0 8px rgba(73,198,255,.28))}
}

/* --- Page info text gentle shimmer --- */
.buku-mimpi-page-info{
  animation:bukuMimpiPageInfoAlive 3.8s ease-in-out infinite!important;
}
@keyframes bukuMimpiPageInfoAlive{
  0%,100%{color:#c0d8f8}
  50%{color:#8fd8ff;text-shadow:0 0 10px rgba(73,198,255,.38)}
}
.buku-mimpi-search-submit,
.buku-mimpi-clear-link,
.buku-mimpi-page-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  min-height:38px!important;
  padding:0 16px!important;
  border:1px solid rgba(126,224,255,.42)!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#74e8ff 0%,#5da8ff 48%,#8a6dff 100%)!important;
  color:#07111f!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  position:relative!important;
  overflow:hidden!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 8px 18px rgba(0,0,0,.20),0 0 14px rgba(73,198,255,.20)!important;
  transform:translateZ(0)!important;
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease!important;
  animation:bukuMimpiUnifiedBtnAlive 3s ease-in-out infinite!important;
}
.buku-mimpi-search-submit:hover,
.buku-mimpi-clear-link:hover,
.buku-mimpi-page-btn:hover{
  transform:translateY(-2px) scale(1.025)!important;
  filter:saturate(1.12) brightness(1.05)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.13) inset,0 12px 24px rgba(0,0,0,.24),0 0 22px rgba(103,218,255,.45)!important;
}
.buku-mimpi-search-submit:active,
.buku-mimpi-clear-link:active,
.buku-mimpi-page-btn:active{
  transform:translateY(0) scale(.96)!important;
}
.buku-mimpi-search-submit::before,
.buku-mimpi-clear-link::before,
.buku-mimpi-page-btn::before{
  content:""!important;
  position:absolute!important;
  top:-55%!important;
  bottom:-55%!important;
  left:-55%!important;
  width:34px!important;
  transform:rotate(24deg)!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),transparent)!important;
  opacity:0!important;
  animation:bukuMimpiUnifiedBtnShine 3.4s ease-in-out infinite!important;
  pointer-events:none!important;
}
.buku-mimpi-page-btn.is-disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
  filter:grayscale(.25)!important;
  animation:none!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 6px 14px rgba(0,0,0,.18)!important;
}
.buku-mimpi-page-btn.is-disabled::before{display:none!important}
@keyframes bukuMimpiUnifiedBtnAlive{
  0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 8px 18px rgba(0,0,0,.20),0 0 10px rgba(73,198,255,.18)}
  50%{box-shadow:0 0 0 1px rgba(255,255,255,.13) inset,0 10px 22px rgba(0,0,0,.24),0 0 22px rgba(123,108,255,.52)}
}
@keyframes bukuMimpiUnifiedBtnShine{
  0%,46%{left:-55%;opacity:0}
  55%{opacity:.9}
  76%,100%{left:135%;opacity:0}
}
@media (max-width:768px){
  .buku-mimpi-search-submit,
  .buku-mimpi-clear-link,
  .buku-mimpi-page-btn{
    min-height:36px!important;
    padding:0 13px!important;
    font-size:11px!important;
  }
  .buku-mimpi-pagination{
    gap:8px!important;
  }
}

/* ===== BUKU MIMPI SLOT ORACLE INTERACTION — scoped only ===== */
.buku-title{
  position:relative;
  display:inline-block;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#f7fbff;
  text-shadow:0 0 10px rgba(54,227,255,.28), 0 0 22px rgba(162,69,255,.16);
  will-change:contents;
}
.buku-title::before{
  content:attr(data-text);
  position:absolute;
  inset:0;
  pointer-events:none;
  color:rgba(54,227,255,.18);
  filter:blur(8px);
  transform:translateY(1px);
}
.buku-live-counter{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  margin:0 0 9px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(54,227,255,.16);
  background:rgba(54,227,255,.055);
  color:#b8d8ee;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  font-family:"Orbitron",sans-serif;
}
.buku-live-counter span{
  min-width:28px;
  color:#fff;
  text-align:center;
  text-shadow:0 0 10px rgba(54,227,255,.45);
}
.buku-live-counter span.is-spinning{
  animation:bukuCounterSpin .32s steps(4,end) infinite;
}
.buku-mimpi-search-card{
  position:relative;
  overflow:hidden;
}
.buku-mimpi-search-card::after{
  content:'';
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(100deg, transparent 0%, rgba(54,227,255,.14) 38%, rgba(255,255,255,.20) 50%, rgba(255,75,221,.12) 62%, transparent 100%);
  transform:translateX(-120%);
}
.buku-mimpi-search-card.is-predicting::after{
  opacity:1;
  animation:bukuPredictiveSweep 1.15s linear infinite;
}
.buku-mimpi-table tbody tr{
  transition:opacity .22s ease, background .18s ease, box-shadow .18s ease, transform .16s ease;
}
.buku-mimpi-table tbody tr.match{
  background:rgba(54,227,255,.075);
  box-shadow:inset 0 0 0 1px rgba(54,227,255,.22);
  animation:bukuRowLock .36s ease;
}
.buku-mimpi-table tbody tr.is-dimmed{
  opacity:.24;
}
.buku-mimpi-table tbody tr:hover{
  transform:translateX(2px);
  background:rgba(255,255,255,.045);
  box-shadow:inset 3px 0 0 rgba(54,227,255,.38);
}
.buku-match-text{
  display:inline-block;
  padding:0 .12em;
  border-radius:4px;
  color:#041018;
  background:linear-gradient(90deg, #36e3ff, #ffffff, #ff4bdd);
  box-shadow:0 0 10px rgba(54,227,255,.38);
  animation:bukuPartialLock .45s ease both;
}
@keyframes bukuCounterSpin{
  0%{transform:translateY(0); filter:blur(0)}
  50%{transform:translateY(-1px); filter:blur(.6px)}
  100%{transform:translateY(0); filter:blur(0)}
}
@keyframes bukuPredictiveSweep{
  from{transform:translateX(-120%)}
  to{transform:translateX(120%)}
}
@keyframes bukuRowLock{
  0%{background:rgba(255,75,221,.18)}
  65%{background:rgba(54,227,255,.12)}
  100%{background:rgba(54,227,255,.075)}
}
@keyframes bukuPartialLock{
  0%{transform:translateY(-1px) scale(1.08); filter:brightness(1.45)}
  100%{transform:translateY(0) scale(1); filter:brightness(1)}
}
@media (prefers-reduced-motion: reduce){
  .buku-live-counter span.is-spinning,
  .buku-mimpi-search-card.is-predicting::after,
  .buku-mimpi-table tbody tr.match,
  .buku-match-text{animation:none!important}
}
/* ADD THESE AT BOTTOM OF YOUR style.css */

/* ===== LIQUID NEON EDGE ===== */
.buku-mimpi-page-panel{
  position:relative;
  overflow:hidden;
}
.buku-mimpi-page-panel::before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:linear-gradient(120deg,transparent 20%,rgba(54,227,255,.4),rgba(162,69,255,.4),transparent 80%);
  background-size:200% 200%;
  animation:liquidBorder 6s linear infinite;
  z-index:0;
  pointer-events:none;
  opacity:.6;
  filter:blur(6px);
}
.buku-mimpi-page-panel > *{
  position:relative;
  z-index:1;
}
@keyframes liquidBorder{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ===== BUKU MIMPI: SCROLL-REACTIVE TABLE HEADER SCAN (FIXED) ===== */
.buku-mimpi-table thead th{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.buku-mimpi-table thead th::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:-140%;
  width:70%;
  pointer-events:none;
  opacity:0;
  z-index:2;
  background:linear-gradient(90deg, transparent 0%, rgba(54,227,255,.08) 22%, rgba(255,255,255,.34) 50%, rgba(255,75,221,.10) 72%, transparent 100%);
  transform:skewX(-18deg);
  filter:drop-shadow(0 0 8px rgba(54,227,255,.28));
}
body.buku-scroll-active .buku-mimpi-table thead th::after{
  animation:bukuHeaderScanOnScroll .92s cubic-bezier(.18,.7,.22,1) both;
}
body.buku-scroll-active .buku-mimpi-table thead th:nth-child(2)::after{animation-delay:.045s}
body.buku-scroll-active .buku-mimpi-table thead th:nth-child(3)::after{animation-delay:.09s}
body.buku-scroll-active .buku-mimpi-table thead th:nth-child(4)::after{animation-delay:.135s}
body.buku-scroll-active .buku-mimpi-table thead th{
  box-shadow:inset 0 -1px 0 rgba(54,227,255,.34), 0 0 14px rgba(54,227,255,.08);
}
@keyframes bukuHeaderScanOnScroll{
  0%{left:-140%;opacity:0}
  16%{opacity:1}
  78%{opacity:1}
  100%{left:155%;opacity:0}
}
@media (prefers-reduced-motion: reduce){
  body.buku-scroll-active .buku-mimpi-table thead th::after{animation:none!important;opacity:0!important}
}

/* === Paito table header functional fix ===
   Keeps the header solid above table data while scrolling.
   Styling-only: no data, PHP logic, or JS behavior changed. */
.paito-table-wrap{
  isolation:isolate;
}
.paito-grid-table{
  border-collapse:separate !important;
  border-spacing:0 !important;
  overflow:visible !important;
}
.paito-grid-table thead{
  position:sticky;
  top:0;
  z-index:30;
}
.paito-grid-table thead tr{
  position:relative;
  z-index:31;
}
.paito-grid-table thead th{
  position:sticky !important;
  top:0 !important;
  z-index:32 !important;
  background:linear-gradient(180deg,#172945 0%,#0f1e35 100%) !important;
  background-clip:padding-box !important;
  color:#f4f8ff !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.08),0 10px 22px rgba(0,0,0,.34) !important;
}
.paito-grid-table tbody td{
  position:relative;
  z-index:1;
}

/* === PAITO STICKY HEADER BLEED FIX v2 (functional only) ===
   Purpose: make paito header act like a solid mask while scrolling,
   so table numbers cannot show through/above/below the header. */
.paito-table-wrap{
  position:relative !important;
  isolation:isolate !important;
  background:#03070d !important;
}
.paito-grid-table{
  border-collapse:separate !important;
  border-spacing:0 !important;
  position:relative !important;
  z-index:1 !important;
}
.paito-grid-table thead{
  position:sticky !important;
  top:0 !important;
  z-index:100 !important;
  background:#03070d !important;
  opacity:1 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.paito-grid-table thead tr{
  position:sticky !important;
  top:0 !important;
  z-index:101 !important;
  background:#03070d !important;
  opacity:1 !important;
}
.paito-grid-table thead th{
  position:sticky !important;
  top:0 !important;
  z-index:102 !important;
  background:#081326 !important;
  color:#36e3ff !important;
  opacity:1 !important;
  background-clip:border-box !important;
  border-color:rgba(54,227,255,.18) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  /* solid mask around sticky header to hide scrolled cells behind it */
  box-shadow:
    0 -20px 0 20px #03070d,
    0 8px 0 0 #03070d,
    inset 0 -1px 0 rgba(54,227,255,.35) !important;
}
.paito-grid-table tbody,
.paito-grid-table tbody tr,
.paito-grid-table tbody td{
  position:relative !important;
  z-index:1 !important;
}

/* === PAITO TOP POSITION COMPACT FIX 2026-04-26 ===
   Layout only: updated time top-right, centered title/description,
   compact market buttons in one row. No data/function logic changed. */
.paito-page-panel{
  position:relative !important;
}
.paito-page-head.market-head{
  position:relative !important;
  width:min(100%, 980px) !important;
  margin:0 auto !important;
  padding:0 170px 0 170px !important;
  min-height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.paito-title-block{
  width:100% !important;
  flex:0 1 auto !important;
  margin:0 auto !important;
  align-items:center !important;
  text-align:center !important;
}
.paito-title-block :is(h1,h2){
  margin:0 !important;
  line-height:1.15 !important;
}
.paito-updated-corner{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  max-width:165px !important;
  color:rgba(224,236,255,.86) !important;
  font-size:11px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:.03em !important;
  white-space:nowrap !important;
  text-align:right !important;
  opacity:.95 !important;
}
.paito-page-copy{
  width:min(100%, 980px) !important;
  margin:8px auto 0 !important;
  text-align:center !important;
}
.paito-page-copy,
.paito-page-copy *{
  text-align:center !important;
}
.paito-market-nav{
  width:min(100%, 980px) !important;
  margin:14px auto 18px !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap:8px !important;
}
.paito-market-nav-link{
  width:auto !important;
  min-width:0 !important;
  min-height:32px !important;
  height:32px !important;
  padding:6px 12px !important;
  border-radius:999px !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  letter-spacing:.01em !important;
}
@media (max-width:820px){
  .paito-page-head.market-head{
    width:100% !important;
    padding:22px 0 0 !important;
    min-height:auto !important;
  }
  .paito-updated-corner{
    top:0 !important;
    right:0 !important;
    max-width:100% !important;
    font-size:10px !important;
  }
  .paito-title-block :is(h1,h2){
    font-size:clamp(20px, 6vw, 30px) !important;
  }
  .paito-page-copy{
    margin-top:8px !important;
  }
  .paito-market-nav{
    width:100% !important;
    flex-wrap:nowrap !important;
    justify-content:center !important;
    gap:6px !important;
    margin:12px auto 16px !important;
  }
  .paito-market-nav-link{
    height:30px !important;
    min-height:30px !important;
    padding:5px 8px !important;
    font-size:10px !important;
    flex:0 1 auto !important;
  }
}
@media (max-width:420px){
  .paito-market-nav{
    gap:5px !important;
  }
  .paito-market-nav-link{
    padding-inline:6px !important;
    font-size:9.5px !important;
  }
}

/* === PAITO FLOATING TABLE SCROLL BUTTONS 2026-04-26 ===
   Visual/position only: keeps existing data-paito-scroll logic intact. */
.paito-table-wrap{
  position:relative !important;
}
.paito-scroll-floating{
  position:sticky !important;
  top:50% !important;
  z-index:1200 !important;
  width:38px !important;
  height:0 !important;
  min-height:0 !important;
  overflow:visible !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 10px 0 auto !important;
  transform:translateY(-50%) !important;
  pointer-events:none !important;
}
.paito-scroll-floating .paito-scroll-btn{
  pointer-events:auto !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  padding:0 !important;
  border-radius:12px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:15px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
  background:rgba(7,14,30,.94) !important;
  border:1px solid rgba(39,222,255,.45) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.35), 0 0 14px rgba(39,222,255,.18) !important;
  color:#52f3ff !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.paito-scroll-floating .paito-scroll-btn:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(39,222,255,.72) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.42), 0 0 18px rgba(39,222,255,.30) !important;
}
@media (max-width:720px){
  .paito-scroll-floating{
    width:32px !important;
    height:0 !important;
    min-height:0 !important;
    overflow:visible !important;
    gap:6px !important;
    margin:0 6px 0 auto !important;
  }
  .paito-scroll-floating .paito-scroll-btn{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
    border-radius:10px !important;
    font-size:13px !important;
  }
}

/* === PAITO TABLE COMPACT NUMBER SIZE ===
   Visual only: reduce cell size/padding, lighter readable number weight. */
.paito-table-wrap{
  padding:6px !important;
}
.paito-grid-table{
  font-family:"Inter","Segoe UI",Arial,sans-serif !important;
}
.paito-grid-table th{
  padding:7px 2px !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.03em !important;
  line-height:1.1 !important;
}
.paito-grid-table td{
  width:25px !important;
  min-width:25px !important;
  height:26px !important;
  padding:0 !important;
  font-size:17px !important;
  line-height:1 !important;
  font-weight:650 !important;
  letter-spacing:.01em !important;
  font-variant-numeric:tabular-nums !important;
  box-shadow:none !important;
}
.paito-grid-table td:hover{
  transform:none !important;
}
@media (max-width:820px){
  .paito-table-wrap{
    padding:4px !important;
    border-radius:14px !important;
  }
  .paito-grid-table th{
    padding:6px 1px !important;
    font-size:11px !important;
    font-weight:700 !important;
    letter-spacing:.02em !important;
  }
  .paito-grid-table td{
    width:18px !important;
    min-width:18px !important;
    height:21px !important;
    font-size:13px !important;
    font-weight:650 !important;
  }
}
@media (max-width:480px){
  .paito-table-wrap{
    padding:3px !important;
  }
  .paito-grid-table th{
    padding:5px 1px !important;
    font-size:10px !important;
  }
  .paito-grid-table td{
    width:15px !important;
    min-width:15px !important;
    height:19px !important;
    font-size:12px !important;
    font-weight:650 !important;
  }
}

/* === PAITO AUTO-FIT DENSITY SYSTEM ===
   Keep all 7 day groups visible on small screens. */
.paito-table-wrap{
  --paito-density-cell: clamp(9px, calc((100vw - 34px) / 42), 24px);
  --paito-density-font: clamp(8px, calc(var(--paito-density-cell) * .72), 15px);
  --paito-density-head: clamp(9px, calc(var(--paito-density-cell) * .62), 13px);
  --paito-density-border: rgba(72, 110, 160, .42);
  overflow-x:auto !important;
}
.paito-grid-table{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  table-layout:fixed !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
}
.paito-grid-table th,
.paito-grid-table td{
  box-sizing:border-box !important;
}
.paito-grid-table td{
  width:var(--paito-density-cell) !important;
  min-width:0 !important;
  height:clamp(18px, calc(var(--paito-density-cell) * 1.15), 27px) !important;
  padding:0 !important;
  font-size:var(--paito-density-font) !important;
  line-height:1 !important;
  font-weight:500 !important;
  letter-spacing:-.02em !important;
  border-color:var(--paito-density-border) !important;
}
.paito-grid-table th{
  min-width:0 !important;
  padding:clamp(4px, calc(var(--paito-density-cell) * .28), 7px) 1px !important;
  font-size:var(--paito-density-head) !important;
  line-height:1.05 !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  border-color:var(--paito-density-border) !important;
}
@media (max-width:520px){
  .paito-table-wrap{
    --paito-density-cell: clamp(8px, calc((100vw - 22px) / 42), 14px);
    padding:4px !important;
    border-radius:12px !important;
  }
  .paito-grid-table td{ letter-spacing:-.04em !important; }
  .paito-grid-table th{ letter-spacing:-.03em !important; }
}
@media (max-width:390px){
  .paito-table-wrap{
    --paito-density-cell: clamp(7px, calc((100vw - 18px) / 42), 12px);
    padding:3px !important;
  }
  .paito-grid-table td{ font-weight:500 !important; }
  .paito-grid-table th{ font-size:8px !important; }
}

/* === PAITO MOBILE HEADER ALIGN + COPY AUTOSIZE ===
   Centers day headers, scales description text on mobile. */
.paito-grid-table thead th{
  text-align:center !important;
  vertical-align:middle !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  letter-spacing:.01em !important;
}
.paito-grid-table thead tr:first-child th{
  height:clamp(18px, calc(var(--paito-density-cell, 14px) * 1.45), 34px) !important;
  padding:0 2px !important;
  line-height:1 !important;
}
.paito-page-copy,
.paito-page-copy p{
  font-size:clamp(12px, 2.8vw, 16px) !important;
  line-height:clamp(1.45, 1.7, 1.72) !important;
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
@media (max-width:520px){
  .paito-page-copy,
  .paito-page-copy p{
    font-size:clamp(12px, 3.15vw, 14px) !important;
    line-height:1.55 !important;
    max-width:92% !important;
  }
  .paito-grid-table thead th{
    text-align:center !important;
    letter-spacing:0 !important;
  }
  .paito-grid-table thead tr:first-child th{
    font-size:clamp(8px, calc(var(--paito-density-cell, 10px) * .82), 10px) !important;
    padding:0 1px !important;
  }
}
@media (max-width:390px){
  .paito-page-copy,
  .paito-page-copy p{
    font-size:11.5px !important;
    line-height:1.5 !important;
  }
  .paito-grid-table thead tr:first-child th{
    font-size:7.5px !important;
  }
}

/* === PAITO MOBILE SHORT DAYS + COMPACT HEIGHT === */
.paito-head-short{display:none !important;}
.paito-head-full{display:inline !important;}
.paito-table-wrap{max-height:clamp(320px,58vh,620px) !important;}
@media (max-width:820px){
  .paito-head-full{display:none !important;}
  .paito-head-short{display:inline !important;}
  .paito-table-wrap{max-height:clamp(260px,43vh,390px) !important;}
  .paito-grid-table thead th{font-size:clamp(8px,2.25vw,10px) !important;line-height:1 !important;padding:4px 1px !important;min-width:0 !important;}
  .paito-grid-table td{height:clamp(12px,3.05vw,16px) !important;width:clamp(9px,2.45vw,12px) !important;min-width:0 !important;font-size:clamp(8px,2.15vw,10px) !important;line-height:1 !important;padding:0 !important;font-weight:500 !important;}
  .paito-user-toolbox{margin-top:8px !important;}
}
@media (max-width:480px){
  .paito-table-wrap{max-height:clamp(230px,40vh,340px) !important;}
}

/* === PAITO STICKY HEADER FINAL ===
   Scroll wrap: overflow:auto (not hidden — hidden kills sticky).
   Sticky th with solid opaque background so rows can't bleed through. */
.paito-table-wrap{
  position:relative !important;
  overflow-x:auto !important;
  overflow-y:auto !important;
  isolation:isolate !important;
}
.paito-grid-table{
  border-collapse:separate !important;
  border-spacing:0 !important;
}
.paito-grid-table thead th{
  position:sticky !important;
  top:0 !important;
  z-index:10 !important;
  background:#081326 !important;
  background-image:linear-gradient(180deg,#0d1f3c 0%,#081326 100%) !important;
  color:#36e3ff !important;
  opacity:1 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transform:translateZ(0) !important;
  box-shadow:0 2px 0 #081326, 0 3px 0 rgba(54,227,255,.3) !important;
}
/* Desktop: full day names, consistent sizing */
@media (min-width:821px){
  .paito-head-full{display:inline !important;}
  .paito-head-short{display:none !important;}
  .paito-grid-table thead th{
    height:34px !important;
    padding:7px 2px !important;
    font-size:13px !important;
  }
}


/* === PAITO HEADER TOP BLEED COVER ===
   The sticky th sits at top:0 of the scroll container but 1 row bleeds
   above it visually. Fix: use a large upward box-shadow on the th that
   acts as an opaque mask covering anything scrolled above the header.
   Also set top:-1px so the th overlaps the container edge by 1px. */
.paito-grid-table thead th {
  top: -1px !important;
  box-shadow:
    0 -40px 0 40px #081326,
    0 2px 0 #081326,
    0 3px 0 rgba(54,227,255,.3) !important;
}

/* === PAITO MOBILE HEADER TEXT FINAL FIX ===
   Fixes missing mobile day text caused by the old wide sticky-header
   shadow mask covering previous header labels. Visual CSS only. */
.paito-grid-table thead,
.paito-grid-table thead tr,
.paito-grid-table thead th{
  background:#081326 !important;
  opacity:1 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.paito-grid-table thead th{
  position:sticky !important;
  top:0 !important;
  z-index:999 !important;
  color:#36e3ff !important;
  text-align:center !important;
  vertical-align:middle !important;
  overflow:visible !important;
  white-space:nowrap !important;
  background:#081326 !important;
  background-image:linear-gradient(180deg,#0d1f3c 0%,#081326 100%) !important;
  /* Important: no spread shadow. Spread shadow covered Sen/Sel/Rab/etc. */
  box-shadow:inset 0 -1px 0 rgba(54,227,255,.36), 0 2px 0 #081326 !important;
}

.paito-head-full,
.paito-head-short{
  position:relative !important;
  z-index:1001 !important;
  width:100% !important;
  text-align:center !important;
  line-height:1 !important;
  color:#36e3ff !important;
  text-shadow:0 0 8px rgba(54,227,255,.22) !important;
}

.paito-head-full{display:inline-block !important;}
.paito-head-short{display:none !important;}

@media (max-width:820px){
  .paito-head-full{display:none !important;}
  .paito-head-short{display:inline-block !important;}
  .paito-grid-table thead th{
    font-size:clamp(7px,2.15vw,10px) !important;
    padding:4px 1px !important;
    line-height:1 !important;
    min-width:0 !important;
    letter-spacing:0 !important;
  }
}

@media (min-width:821px){
  .paito-head-full{display:inline-block !important;}
  .paito-head-short{display:none !important;}
}


/* === PAITO TITLE + DESCRIPTION RESPONSIVE AUTOSIZE 2026-04-26 === */
.paito-page-panel .section-head :is(h1,h2),
.paito-title-block :is(h1,h2) {
  font-size: clamp(14px, 2.2vw, 26px) !important;
  letter-spacing: clamp(.06em, .12em, .14em) !important;
  line-height: 1.2 !important;
}
@media (max-width: 820px) {
  .paito-page-panel .section-head :is(h1,h2),
  .paito-title-block :is(h1,h2) {
    font-size: clamp(13px, 3.8vw, 20px) !important;
    letter-spacing: .07em !important;
  }
  .paito-page-copy,
  .paito-page-copy p {
    font-size: clamp(11.5px, 2.6vw, 14px) !important;
    line-height: 1.6 !important;
  }
}
@media (max-width: 520px) {
  .paito-page-panel .section-head :is(h1,h2),
  .paito-title-block :is(h1,h2) {
    font-size: clamp(12px, 4vw, 16px) !important;
    letter-spacing: .05em !important;
    line-height: 1.2 !important;
  }
  .paito-page-copy,
  .paito-page-copy p {
    font-size: clamp(11px, 2.9vw, 13px) !important;
    line-height: 1.55 !important;
  }
  .paito-page-head.market-head { gap: 6px !important; }
  .paito-page-panel { gap: 12px !important; }
}
@media (max-width: 390px) {
  .paito-page-panel .section-head :is(h1,h2),
  .paito-title-block :is(h1,h2) {
    font-size: clamp(11px, 4.2vw, 14px) !important;
    letter-spacing: .04em !important;
  }
  .paito-page-copy,
  .paito-page-copy p {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }
  .paito-page-panel { gap: 10px !important; }
}


/* === PAITO MARKET NAV — tighter vertical spacing 2026-04-26 === */
.paito-market-nav {
  margin: 6px auto 8px !important;
  gap: 8px !important;
}
@media (max-width: 820px) {
  .paito-market-nav {
    margin: 4px auto 6px !important;
    gap: 6px !important;
  }
}


/* === PAITO TOOLBOX — more compact 2026-04-26 === */
.paito-user-toolbox {
  padding: 7px 10px !important;
  gap: 5px !important;
}
.paito-user-inputs {
  gap: 5px !important;
  margin-bottom: 0 !important;
}
.paito-user-inputs input {
  padding: 4px 4px !important;
  min-height: 26px !important;
  height: 26px !important;
  font-size: 11px !important;
  width: 48px !important;
  flex: 0 0 48px !important;
  border-radius: 6px !important;
}
.paito-user-swatches {
  gap: 4px !important;
  margin-bottom: 0 !important;
}
.paito-user-swatches .color-swatch {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
}
.toolbox-clear,
#clearUserPaitoMix.toolbox-clear {
  padding: 4px 14px !important;
  min-height: 24px !important;
  height: 24px !important;
  font-size: 11px !important;
}
@media (max-width: 820px) {
  .paito-user-toolbox { padding: 6px 8px !important; gap: 4px !important; }
  .paito-user-inputs input {
    width: 42px !important; flex: 0 0 42px !important;
    min-height: 24px !important; height: 24px !important; font-size: 10px !important;
  }
  .paito-user-swatches .color-swatch { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; }
  .toolbox-clear, #clearUserPaitoMix.toolbox-clear { min-height: 22px !important; height: 22px !important; font-size: 10px !important; }
}


/* === PAITO PAGE VISUAL UPGRADE + BUTTON ANIMATIONS 2026-04-26 === */
@keyframes paitoNavPulse {
  0%,100% { box-shadow: 0 0 8px rgba(57,243,255,.18), 0 4px 14px rgba(0,0,0,.30); }
  50%      { box-shadow: 0 0 18px rgba(57,243,255,.38), 0 4px 18px rgba(0,0,0,.34); }
}
@keyframes paitoNavActiveShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
@keyframes paitoScrollBounceUp {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes paitoScrollBounceDown {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
@keyframes paitoScrollGlow {
  0%,100% { box-shadow: 0 0 10px rgba(57,243,255,.22), 0 6px 18px rgba(0,0,0,.38); }
  50%      { box-shadow: 0 0 22px rgba(57,243,255,.50), 0 6px 22px rgba(0,0,0,.42); }
}
@keyframes panelEdgeGlow {
  0%,100% { border-color: rgba(39,222,255,.18); }
  50%      { border-color: rgba(39,222,255,.34); }
}

.paito-page-panel.paito-market-single-panel {
  animation: panelEdgeGlow 5s ease-in-out infinite;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 40px rgba(39,222,255,.05),
    0 28px 56px rgba(0,0,0,.40) !important;
}

.paito-market-nav-link {
  background: linear-gradient(145deg, rgba(14,26,50,.97), rgba(8,15,32,.98)) !important;
  border: 1px solid rgba(39,222,255,.22) !important;
  color: #b8eaff !important;
  box-shadow: 0 0 8px rgba(57,243,255,.14), 0 4px 14px rgba(0,0,0,.28) !important;
  transition: background .22s ease, border-color .22s ease, color .18s ease, box-shadow .22s ease, transform .18s ease !important;
  animation: paitoNavPulse 4s ease-in-out infinite;
}
.paito-market-nav-link:nth-child(2) { animation-delay: 1.3s; }
.paito-market-nav-link:nth-child(3) { animation-delay: 2.6s; }
.paito-market-nav-link:hover {
  background: linear-gradient(145deg, rgba(22,44,80,.98), rgba(12,24,50,.99)) !important;
  border-color: rgba(57,243,255,.55) !important;
  color: #7ff9ff !important;
  box-shadow: 0 0 22px rgba(57,243,255,.34), 0 6px 20px rgba(0,0,0,.36), inset 0 0 0 1px rgba(57,243,255,.12) !important;
  transform: translateY(-2px) !important;
}
.paito-market-nav-link.active {
  background: linear-gradient(90deg, rgba(0,198,255,.28) 0%, rgba(82,243,255,.18) 40%, rgba(140,82,255,.28) 100%) !important;
  background-size: 300% auto !important;
  border-color: rgba(57,243,255,.60) !important;
  color: #7ff9ff !important;
  box-shadow: 0 0 24px rgba(57,243,255,.30), 0 0 48px rgba(57,243,255,.10), inset 0 0 0 1px rgba(57,243,255,.20), 0 6px 20px rgba(0,0,0,.32) !important;
  text-shadow: 0 0 10px rgba(82,243,255,.60) !important;
  animation: paitoNavActiveShimmer 3s linear infinite, paitoNavPulse 3s ease-in-out infinite !important;
}

.paito-scroll-floating .paito-scroll-btn {
  background: linear-gradient(180deg, rgba(12,26,52,.97), rgba(6,14,30,.99)) !important;
  border: 1.5px solid rgba(57,243,255,.55) !important;
  color: #52f3ff !important;
  text-shadow: 0 0 8px rgba(82,243,255,.70) !important;
  box-shadow: 0 0 14px rgba(57,243,255,.28), 0 6px 18px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.06) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
.paito-scroll-floating .paito-scroll-btn[data-paito-scroll="top"] {
  animation: paitoScrollBounceUp 1.8s ease-in-out infinite, paitoScrollGlow 2.4s ease-in-out infinite;
}
.paito-scroll-floating .paito-scroll-btn[data-paito-scroll="bottom"] {
  animation: paitoScrollBounceDown 1.8s ease-in-out infinite, paitoScrollGlow 2.4s ease-in-out infinite;
  animation-delay: 0s, .6s;
}
.paito-scroll-floating .paito-scroll-btn:hover {
  animation: none !important;
  border-color: rgba(82,243,255,.88) !important;
  color: #fff !important;
  text-shadow: 0 0 12px rgba(82,243,255,.90) !important;
  box-shadow: 0 0 28px rgba(57,243,255,.52), 0 8px 24px rgba(0,0,0,.46), inset 0 0 0 1px rgba(82,243,255,.30) !important;
  transform: scale(1.08) !important;
}
.paito-scroll-floating .paito-scroll-btn:active {
  transform: scale(.95) !important;
  box-shadow: 0 0 12px rgba(57,243,255,.30), 0 2px 8px rgba(0,0,0,.40) !important;
}


/* === PAITO SWATCH ANIMATIONS 2026-04-26 === */
@keyframes swatchGlowAuto {
  0%,100% { box-shadow: 0 0 5px 1px rgba(255,82,82,.30), 0 0 5px 1px rgba(77,124,255,.30); }
  33%      { box-shadow: 0 0 9px 2px rgba(255,82,82,.55), 0 0 9px 2px rgba(77,200,255,.40); }
  66%      { box-shadow: 0 0 9px 2px rgba(55,214,122,.50), 0 0 9px 2px rgba(162,69,255,.40); }
}
@keyframes swatchGlowRed {
  0%,100% { box-shadow: 0 0 5px 1px rgba(255,80,80,.25); }
  50%      { box-shadow: 0 0 12px 3px rgba(255,80,80,.65), 0 0 20px 4px rgba(255,80,80,.20); }
}
@keyframes swatchGlowPink {
  0%,100% { box-shadow: 0 0 5px 1px rgba(255,153,204,.25); }
  50%      { box-shadow: 0 0 12px 3px rgba(255,153,204,.65), 0 0 20px 4px rgba(255,153,204,.20); }
}
@keyframes swatchGlowGreen {
  0%,100% { box-shadow: 0 0 5px 1px rgba(169,208,142,.25); }
  50%      { box-shadow: 0 0 12px 3px rgba(169,208,142,.65), 0 0 20px 4px rgba(169,208,142,.20); }
}
@keyframes swatchGlowPurple {
  0%,100% { box-shadow: 0 0 5px 1px rgba(153,102,255,.25); }
  50%      { box-shadow: 0 0 12px 3px rgba(153,102,255,.65), 0 0 20px 4px rgba(153,102,255,.20); }
}
@keyframes swatchGlowCyan {
  0%,100% { box-shadow: 0 0 5px 1px rgba(102,255,204,.25); }
  50%      { box-shadow: 0 0 12px 3px rgba(102,255,204,.65), 0 0 20px 4px rgba(102,255,204,.20); }
}
@keyframes swatchGlowBlue {
  0%,100% { box-shadow: 0 0 5px 1px rgba(155,194,230,.25); }
  50%      { box-shadow: 0 0 12px 3px rgba(155,194,230,.65), 0 0 20px 4px rgba(155,194,230,.20); }
}
@keyframes swatchGlowGray {
  0%,100% { box-shadow: 0 0 4px 1px rgba(178,178,178,.20); }
  50%      { box-shadow: 0 0 10px 2px rgba(178,178,178,.50), 0 0 18px 3px rgba(178,178,178,.15); }
}
@keyframes swatchGlowOrange {
  0%,100% { box-shadow: 0 0 5px 1px rgba(244,176,132,.25); }
  50%      { box-shadow: 0 0 12px 3px rgba(244,176,132,.65), 0 0 20px 4px rgba(244,176,132,.20); }
}

.paito-user-swatches .color-swatch {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.paito-user-swatches .color-swatch[data-user-color=""]      { animation: swatchGlowAuto   2.8s ease-in-out infinite !important; }
.paito-user-swatches .color-swatch[data-user-color="#ff5050"] { animation: swatchGlowRed  2.4s ease-in-out infinite !important; animation-delay: .2s !important; }
.paito-user-swatches .color-swatch[data-user-color="#ff99cc"] { animation: swatchGlowPink 2.6s ease-in-out infinite !important; animation-delay: .5s !important; }
.paito-user-swatches .color-swatch[data-user-color="#a9d08e"] { animation: swatchGlowGreen 2.2s ease-in-out infinite !important; animation-delay: .8s !important; }
.paito-user-swatches .color-swatch[data-user-color="#9966ff"] { animation: swatchGlowPurple 2.7s ease-in-out infinite !important; animation-delay: .3s !important; }
.paito-user-swatches .color-swatch[data-user-color="#66ffcc"] { animation: swatchGlowCyan  2.3s ease-in-out infinite !important; animation-delay: 1.0s !important; }
.paito-user-swatches .color-swatch[data-user-color="#9bc2e6"] { animation: swatchGlowBlue  2.5s ease-in-out infinite !important; animation-delay: .6s !important; }
.paito-user-swatches .color-swatch[data-user-color="#b2b2b2"] { animation: swatchGlowGray  3.0s ease-in-out infinite !important; animation-delay: .9s !important; }
.paito-user-swatches .color-swatch[data-user-color="#f4b084"] { animation: swatchGlowOrange 2.4s ease-in-out infinite !important; animation-delay: .4s !important; }

.paito-user-swatches .color-swatch:hover { transform: scale(1.18) !important; }
.paito-user-swatches .color-swatch[data-user-color="#ff5050"]:hover { box-shadow: 0 0 18px 5px rgba(255,80,80,.75) !important; }
.paito-user-swatches .color-swatch[data-user-color="#ff99cc"]:hover { box-shadow: 0 0 18px 5px rgba(255,153,204,.75) !important; }
.paito-user-swatches .color-swatch[data-user-color="#a9d08e"]:hover { box-shadow: 0 0 18px 5px rgba(169,208,142,.75) !important; }
.paito-user-swatches .color-swatch[data-user-color="#9966ff"]:hover { box-shadow: 0 0 18px 5px rgba(153,102,255,.75) !important; }
.paito-user-swatches .color-swatch[data-user-color="#66ffcc"]:hover { box-shadow: 0 0 18px 5px rgba(102,255,204,.75) !important; }
.paito-user-swatches .color-swatch[data-user-color="#9bc2e6"]:hover { box-shadow: 0 0 18px 5px rgba(155,194,230,.75) !important; }
.paito-user-swatches .color-swatch[data-user-color="#b2b2b2"]:hover { box-shadow: 0 0 16px 4px rgba(178,178,178,.65) !important; }
.paito-user-swatches .color-swatch[data-user-color="#f4b084"]:hover { box-shadow: 0 0 18px 5px rgba(244,176,132,.75) !important; }
.paito-user-swatches .color-swatch[data-user-color=""]:hover        { box-shadow: 0 0 18px 5px rgba(255,82,82,.50), 0 0 18px 5px rgba(77,200,255,.40) !important; }

.paito-user-swatches .color-swatch.active { transform: scale(1.14) !important; border-color: #fff !important; }
.paito-user-swatches .color-swatch[data-user-color="#ff5050"].active { box-shadow: 0 0 0 2px #fff, 0 0 22px 6px rgba(255,80,80,.80) !important; }
.paito-user-swatches .color-swatch[data-user-color="#ff99cc"].active { box-shadow: 0 0 0 2px #fff, 0 0 22px 6px rgba(255,153,204,.80) !important; }
.paito-user-swatches .color-swatch[data-user-color="#a9d08e"].active { box-shadow: 0 0 0 2px #fff, 0 0 22px 6px rgba(169,208,142,.80) !important; }
.paito-user-swatches .color-swatch[data-user-color="#9966ff"].active { box-shadow: 0 0 0 2px #fff, 0 0 22px 6px rgba(153,102,255,.80) !important; }
.paito-user-swatches .color-swatch[data-user-color="#66ffcc"].active { box-shadow: 0 0 0 2px #fff, 0 0 22px 6px rgba(102,255,204,.80) !important; }
.paito-user-swatches .color-swatch[data-user-color="#9bc2e6"].active { box-shadow: 0 0 0 2px #fff, 0 0 22px 6px rgba(155,194,230,.80) !important; }
.paito-user-swatches .color-swatch[data-user-color="#b2b2b2"].active { box-shadow: 0 0 0 2px #fff, 0 0 18px 5px rgba(178,178,178,.70) !important; }
.paito-user-swatches .color-swatch[data-user-color="#f4b084"].active { box-shadow: 0 0 0 2px #fff, 0 0 22px 6px rgba(244,176,132,.80) !important; }
.paito-user-swatches .color-swatch[data-user-color=""].active        { box-shadow: 0 0 0 2px #fff, 0 0 20px 5px rgba(255,82,82,.55), 0 0 20px 5px rgba(77,200,255,.45) !important; }


/* === PAITO EMPTY COPY BLOCK COLLAPSE 2026-04-26 === */
.paito-page-copy:empty { display: none !important; }
.paito-page-copy p:only-child:empty { display: none !important; }
.paito-page-copy:has(p:only-child:empty) { display: none !important; }
.paito-page-copy:empty + .paito-market-nav { margin-top: 0 !important; }



/* === PAITO TIMESTAMP COMPACT 2026-04-26 === */
.paito-market-timestamp {
  display: flex !important;
  justify-content: flex-end !important;
  margin-bottom: 2px !important;
}
.paito-updated-corner {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: rgba(82,243,255,.55) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  animation: timestampPulse 3s ease-in-out infinite !important;
}
.paito-updated-corner::before {
  content: '●' !important;
  font-size: 5px !important;
  color: rgba(82,243,255,.50) !important;
}



/* ============================================================
   PAITO DESCRIPTION TEXT ALIVE 2026-04-27
   ============================================================ */

/* Base state for word spans */
.paito-desc-word {
  display: inline-block !important;
  color: rgba(180, 225, 255, .80) !important;
  font-weight: 600 !important;
  transition: color .35s ease, text-shadow .35s ease, transform .25s ease !important;
  cursor: default !important;
}

/* Scanline overlay — sweeps top to bottom over description */
.paito-desc-scanline {
  position: absolute !important;
  left: 0 !important; right: 0 !important;
  top: -20% !important;
  height: 40% !important;
  pointer-events: none !important;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(54, 227, 255, .07) 40%,
    rgba(255, 255, 255, .05) 50%,
    rgba(54, 227, 255, .07) 60%,
    transparent 100%
  ) !important;
  animation: paitoDescScanMove 2s linear infinite !important;
  z-index: 2 !important;
}
@keyframes paitoDescScanMove {
  0%   { top: -40%; }
  100% { top: 120%; }
}

/* Word hover — user can interact too */
.paito-desc-word:hover {
  color: #36e3ff !important;
  text-shadow: 0 0 8px #36e3ff, 0 0 20px rgba(54,227,255,.60) !important;
  transform: scale(1.10) translateY(-1px) !important;
  transition: color .08s, text-shadow .08s, transform .08s !important;
}


/* ============================================================
   PAITO AGGRESSIVE v4 — STACKED ON TOP 2026-04-27
   All previous effects kept. Zero table touches.
   ============================================================ */

@keyframes paitoGlitch {
  0%,94%,100% { clip-path:none; transform:translate(0); }
  95%  { clip-path:polygon(0 10%,100% 10%,100% 35%,0 35%); transform:translate(-4px,1px);  filter:hue-rotate(90deg) brightness(1.6); }
  96%  { clip-path:polygon(0 55%,100% 55%,100% 75%,0 75%); transform:translate(5px,-2px);  filter:hue-rotate(200deg) brightness(2); }
  97%  { clip-path:polygon(0 20%,100% 20%,100% 55%,0 55%); transform:translate(-3px,0);    filter:hue-rotate(320deg) brightness(1.4); }
  98%  { clip-path:none; transform:translate(2px,1px); filter:none; }
  99%  { clip-path:polygon(0 0,100% 0,100% 30%,0 30%); transform:translate(-6px,0); filter:hue-rotate(180deg) brightness(3); }
}
@keyframes paitoGlitchShadow {
  0%,94%,100% { clip-path:none; transform:translate(0); opacity:0; }
  95%  { clip-path:polygon(0 40%,100% 40%,100% 60%,0 60%); transform:translate(6px,-1px);  opacity:.8; color:#ff4bdd; }
  96%  { clip-path:polygon(0 0,100% 0,100% 20%,0 20%);     transform:translate(-5px,2px);  opacity:.9; color:#36e3ff; }
  97%  { clip-path:polygon(0 70%,100% 70%,100% 90%,0 90%); transform:translate(4px,0);     opacity:.7; color:#a245ff; }
  98%,99% { clip-path:none; transform:translate(0); opacity:0; }
}
@keyframes paitoArc {
  0%,88%,100% { border-color:rgba(54,227,255,.20); box-shadow:none; outline:none; }
  89% { border-color:#fff;    box-shadow:0 0 0 2px #36e3ff,0 0 40px #36e3ff,0 0 80px rgba(54,227,255,.50); outline:1px solid rgba(255,255,255,.60); }
  90% { border-color:#ff4bdd; box-shadow:0 0 0 2px #ff4bdd,0 0 50px #ff4bdd,0 0 100px rgba(255,75,221,.40); outline:1px solid #ff4bdd; }
  91% { border-color:#a245ff; box-shadow:0 0 0 1px #a245ff,0 0 30px #a245ff; outline:none; }
  92% { border-color:#fff;    box-shadow:0 0 0 3px #fff,0 0 60px #fff,0 0 120px rgba(255,255,255,.30); outline:2px solid rgba(255,255,255,.80); }
  93%,94% { border-color:rgba(54,227,255,.60); box-shadow:0 0 20px rgba(54,227,255,.30); outline:none; }
}
@keyframes paitoStrobe {
  0%,100% { border-color:rgba(54,227,255,.25);  box-shadow:0 0 20px rgba(54,227,255,.12); }
  16%     { border-color:rgba(162,69,255,.55);   box-shadow:0 0 35px rgba(162,69,255,.28); }
  33%     { border-color:rgba(255,75,221,.50);   box-shadow:0 0 30px rgba(255,75,221,.24); }
  50%     { border-color:rgba(54,227,255,.70);   box-shadow:0 0 45px rgba(54,227,255,.38),inset 0 0 16px rgba(54,227,255,.06); }
  66%     { border-color:rgba(255,255,255,.35);  box-shadow:0 0 50px rgba(255,255,255,.20); }
  83%     { border-color:rgba(162,69,255,.50);   box-shadow:0 0 32px rgba(162,69,255,.24); }
}
@keyframes paitoNavSnap {
  0%,24%   { border-color:rgba(54,227,255,.70);  box-shadow:0 0 20px rgba(54,227,255,.55),0 0 40px rgba(54,227,255,.20);  color:#7ff9ff; }
  25%,49%  { border-color:rgba(162,69,255,.70);  box-shadow:0 0 20px rgba(162,69,255,.55),0 0 40px rgba(162,69,255,.20);  color:#d29fff; }
  50%,74%  { border-color:rgba(255,75,221,.70);  box-shadow:0 0 20px rgba(255,75,221,.55),0 0 40px rgba(255,75,221,.20);  color:#ff9deb; }
  75%,100% { border-color:rgba(54,227,255,.70);  box-shadow:0 0 20px rgba(54,227,255,.55),0 0 40px rgba(54,227,255,.20);  color:#7ff9ff; }
}
@keyframes paitoNavActiveFlash {
  0%,85%,100% { box-shadow:0 0 22px rgba(54,227,255,.70),0 0 50px rgba(54,227,255,.30),inset 0 0 12px rgba(54,227,255,.15); color:#7ff9ff; text-shadow:0 0 12px rgba(54,227,255,1); background:linear-gradient(135deg,rgba(54,227,255,.30),rgba(162,69,255,.25)) !important; }
  90%         { box-shadow:0 0 0 2px #fff,0 0 40px #fff,0 0 80px rgba(255,255,255,.30); color:#fff; text-shadow:0 0 20px #fff,0 0 40px rgba(54,227,255,1); background:rgba(255,255,255,.15) !important; }
  92%,94%     { box-shadow:0 0 30px rgba(162,69,255,.80),0 0 60px rgba(162,69,255,.35),inset 0 0 16px rgba(162,69,255,.20); color:#e0b0ff; text-shadow:0 0 14px rgba(162,69,255,1); background:linear-gradient(135deg,rgba(162,69,255,.35),rgba(255,75,221,.25)) !important; }
}
@keyframes paitoNeonSign {
  0%,8%,10%,14%,100% { opacity:1; color:#36e3ff; text-shadow:0 0 4px #36e3ff,0 0 12px #36e3ff,0 0 28px rgba(54,227,255,.80),0 0 56px rgba(54,227,255,.40); }
  9%,13%  { opacity:.08; color:rgba(54,227,255,.15); text-shadow:none; }
  40%,42% { opacity:.5;  color:#a245ff; text-shadow:0 0 8px #a245ff; }
  41%     { opacity:0; }
  70%     { opacity:1;  color:#ff4bdd; text-shadow:0 0 14px #ff4bdd,0 0 30px rgba(255,75,221,.60); }
  71%     { opacity:.3; }
  72%     { opacity:1;  color:#36e3ff; text-shadow:0 0 10px #36e3ff,0 0 24px rgba(54,227,255,.70); }
}
@keyframes paitoMachineBlink {
  0%,49%  { opacity:1; color:#36e3ff; transform:scale(1.8); filter:drop-shadow(0 0 5px #36e3ff); }
  50%,99% { opacity:0; transform:scale(.6); }
}
@keyframes paitoToolboxShock {
  0%,78%,100% { border-color:rgba(54,227,255,.18); box-shadow:0 18px 42px rgba(0,0,0,.40); }
  80% { border-color:#fff;    box-shadow:0 0 0 2px #36e3ff,0 0 30px #36e3ff,0 20px 50px rgba(0,0,0,.50); }
  82% { border-color:#ff4bdd; box-shadow:0 0 0 2px #ff4bdd,0 0 24px #ff4bdd,0 20px 50px rgba(0,0,0,.50); }
  84%,86% { border-color:rgba(54,227,255,.70); box-shadow:0 0 18px rgba(54,227,255,.40),0 20px 48px rgba(0,0,0,.46); }
  85% { border-color:rgba(255,255,255,.60); box-shadow:0 0 40px rgba(255,255,255,.20); }
}
@keyframes paitoScrollShock {
  0%,100% { transform:translateY(0) scale(1);   box-shadow:0 0 8px rgba(54,227,255,.30); }
  20%     { transform:translateY(-7px) scale(1.12); box-shadow:0 0 30px rgba(54,227,255,.80),0 0 60px rgba(54,227,255,.30); }
  30%     { transform:translateY(3px)  scale(.92);  box-shadow:0 0 14px rgba(54,227,255,.40); }
  40%     { transform:translateY(-4px) scale(1.06); box-shadow:0 0 22px rgba(162,69,255,.70); }
  50%     { transform:translateY(0)   scale(1); }
}
@keyframes paitoScrollShockDown {
  0%,100% { transform:translateY(0) scale(1);   box-shadow:0 0 8px rgba(54,227,255,.30); }
  20%     { transform:translateY(7px)  scale(1.12); box-shadow:0 0 30px rgba(54,227,255,.80),0 0 60px rgba(54,227,255,.30); }
  30%     { transform:translateY(-3px) scale(.92);  box-shadow:0 0 14px rgba(54,227,255,.40); }
  40%     { transform:translateY(4px)  scale(1.06); box-shadow:0 0 22px rgba(162,69,255,.70); }
  50%     { transform:translateY(0)    scale(1); }
}
@keyframes paitoClearAlarm {
  0%,60%,100% { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.70); box-shadow:none; }
  65% { background:rgba(255,30,30,.28); border-color:#ff3030; color:#fff; box-shadow:0 0 20px rgba(255,30,30,.65),0 0 50px rgba(255,30,30,.25); text-shadow:0 0 8px rgba(255,80,80,1); }
  70% { background:rgba(255,30,30,.10); border-color:rgba(255,80,80,.40); }
  72% { background:rgba(255,30,30,.35); border-color:#ff3030; color:#fff; box-shadow:0 0 28px rgba(255,30,30,.80); text-shadow:0 0 10px #fff; }
  75% { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.70); box-shadow:none; text-shadow:none; }
}

/* Title glitch */
.paito-title-block :is(h1,h2) {
  position: relative !important;
  background: linear-gradient(90deg,#36e3ff,#a245ff,#ff4bdd,#36e3ff,#a245ff) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: paitoGlitch 3.5s steps(1) infinite !important;
  font-family: 'Orbitron', sans-serif !important;
  letter-spacing: .06em !important;
}
.paito-title-block :is(h1,h2)::before {
  content: attr(data-text) !important;
  position: absolute !important; inset: 0 !important;
  background: inherit !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: paitoGlitchShadow 3.5s steps(1) infinite !important;
  pointer-events: none !important;
}

/* Panel arc */
.paito-page-panel.paito-market-single-panel {
  animation: paitoArc 4s steps(1) infinite !important;
}

/* Table wrap strobe */
.paito-table-wrap {
  animation: paitoStrobe 2s steps(1) infinite !important;
}

/* Nav snap */
.paito-market-nav-link {
  animation: paitoNavSnap 2s steps(1) infinite !important;
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}
.paito-market-nav-link:nth-child(2) { animation-delay:.66s !important; }
.paito-market-nav-link:nth-child(3) { animation-delay:1.33s !important; }
.paito-market-nav-link.active {
  animation: paitoNavActiveFlash 2.5s steps(1) infinite !important;
}

/* Timestamp neon sign */
.paito-updated-corner {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 10px !important;
  animation: paitoNeonSign 4.5s linear infinite !important;
}
.paito-updated-corner::before {
  animation: paitoMachineBlink .8s step-end infinite !important;
  font-size: 7px !important;
}

/* Toolbox shock */
.paito-user-toolbox {
  animation: paitoToolboxShock 3.5s steps(1) infinite !important;
}

/* Scroll buttons */
.paito-scroll-floating .paito-scroll-btn[data-paito-scroll="top"] {
  animation: paitoScrollShock 1.6s ease-in-out infinite !important;
  color: #36e3ff !important; border-color: rgba(54,227,255,.70) !important; text-shadow: 0 0 8px #36e3ff !important;
}
.paito-scroll-floating .paito-scroll-btn[data-paito-scroll="bottom"] {
  animation: paitoScrollShockDown 1.6s ease-in-out infinite !important;
  animation-delay: .4s !important;
  color: #36e3ff !important; border-color: rgba(54,227,255,.70) !important; text-shadow: 0 0 8px #36e3ff !important;
}
.paito-scroll-floating .paito-scroll-btn:hover { animation: none !important; }

/* Clear alarm */
.toolbox-clear {
  animation: paitoClearAlarm 2.8s steps(1) infinite !important;
  font-weight: 800 !important; letter-spacing: .06em !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .paito-title-block :is(h1,h2), .paito-title-block :is(h1,h2)::before,
  .paito-page-copy::after, .paito-page-copy, .paito-page-copy p,
  .paito-updated-corner, .paito-updated-corner::before,
  .paito-page-panel.paito-market-single-panel,
  .paito-table-wrap, .paito-market-nav-link,
  .paito-user-toolbox, .paito-scroll-floating .paito-scroll-btn,
  .toolbox-clear { animation: none !important; }
}

/* ============================================================

/* ============================================================
   SITE PAGE - CLEAN REWRITE
   One block. No overrides fighting each other.
   ============================================================ */

/* --- CSS Variables (adaptive theme via JS) --- */
:root {
  --t-rgb: 54,227,255;
  --card-bg: rgba(14,20,40,0.95);
  --panel-bg: rgba(10,14,28,0.98);
  --border: rgba(255,255,255,0.08);
  --text: #f0f6ff;
  --muted: #7a90b0;
  --body-bg: #060912;
}
/* Default theme color on body - overridden by inline style when logo color is extracted */
body {
  --t: #36e3ff;
  --t-soft: rgba(54,227,255,0.12);
  --t-mid: rgba(54,227,255,0.35);
  --t-glow: rgba(54,227,255,0.18);
}

/* --- Page --- */
.site-page-clean {
  padding: 10px 12px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 1040px;
  margin: 0 auto;
  background: none;
}

/* --- Banner --- */
.site-page-clean .hero-featured-slider {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.site-page-clean .hero-featured-slide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* --- Brand Strip --- */
.site-page-clean .site-brand-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}
.site-page-clean .site-brand-strip::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--t-mid), transparent);
  pointer-events: none;
}
.site-page-clean .site-brand-id {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 0;
  min-width: 0;
}
.site-page-clean .site-brand-logo {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 12px;
  padding: 6px;
  background: linear-gradient(135deg, rgba(var(--t-rgb),0.18), rgba(162,69,255,0.2));
  border: 1.5px solid var(--t-mid);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 20px var(--t-soft);
  transition: transform 0.3s, box-shadow 0.3s;
}
.site-page-clean .site-brand-logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 32px var(--t-glow);
}
.site-page-clean .site-brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.site-page-clean .site-brand-copy {
  flex: 1 1 0;
  min-width: 0;
}
.site-page-clean .site-brand-copy h2 {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 3px;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #fff 0%, #c8deff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-desc-preview-clamp {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.site-desc-preview-clamp p { margin: 0; display: inline; }
.site-desc-short {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
.site-desc-readmore {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--t);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 0 0;
  letter-spacing: 0.02em;
  transition: color 0.2s, transform 0.2s;
}
.site-desc-readmore:hover { color: #7bffd5; transform: translateX(2px); }
.site-page-clean .site-brand-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.site-page-clean .site-main-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(var(--t-rgb),0.9) 0%, #7bffd5 100%);
  color: #051624;
  border: none;
  box-shadow: 0 4px 16px var(--t-glow), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  animation: ctaBreathe 3s ease-in-out infinite;
}
@keyframes ctaBreathe {
  0%,100% { box-shadow: 0 4px 16px var(--t-glow), inset 0 1px 0 rgba(255,255,255,0.5); }
  50% { box-shadow: 0 6px 24px var(--t-mid), 0 0 30px var(--t-soft), inset 0 1px 0 rgba(255,255,255,0.6); }
}
.site-page-clean .site-main-cta:hover {
  transform: translateY(-2px);
  animation: none;
  box-shadow: 0 8px 28px var(--t-mid), inset 0 1px 0 rgba(255,255,255,0.7);
}
.site-page-clean .site-ghost-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  transition: all 0.25s;
  white-space: nowrap;
}
.site-page-clean .site-ghost-cta:hover {
  background: var(--t-soft);
  border-color: var(--t-mid);
  color: var(--t);
}

/* --- Stats Row --- */
.site-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.site-stat-card {
  padding: 10px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.site-stat-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--t), rgba(162,69,255,0.7));
  border-radius: 2px 0 0 2px;
}
.site-stat-card:hover {
  border-color: var(--t-mid);
  box-shadow: 0 4px 20px rgba(0,0,0,0.35), 0 0 20px var(--t-soft);
  transform: translateY(-2px);
}
.site-stat-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.site-stat-label::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5fff8e;
  box-shadow: 0 0 6px #5fff8e;
  animation: livePulse 2s ease-out infinite;
  flex-shrink: 0;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(95,255,142,0.7); }
  70% { box-shadow: 0 0 0 6px rgba(95,255,142,0); }
  100% { box-shadow: 0 0 0 0 rgba(95,255,142,0); }
}
.site-stat-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  word-break: break-word;
}

/* --- Social Row --- */
.site-social-inline-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  background: none;
  border: none;
  margin: 0;
}
.site-social-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: #c4d4ee;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.22s;
}
.site-social-inline-btn:hover { transform: translateY(-2px); }
.site-social-inline-btn[data-social*="whatsapp"]:hover { background: rgba(37,211,102,0.14); border-color: rgba(37,211,102,0.45); color: #5fff8e; box-shadow: 0 4px 14px rgba(37,211,102,0.2); }
.site-social-inline-btn[data-social*="telegram"]:hover { background: rgba(42,171,238,0.14); border-color: rgba(42,171,238,0.45); color: #64c8ff; box-shadow: 0 4px 14px rgba(42,171,238,0.2); }
.site-social-inline-btn[data-social*="instagram"]:hover { background: rgba(225,48,108,0.12); border-color: rgba(225,48,108,0.4); color: #ff7eb3; box-shadow: 0 4px 14px rgba(225,48,108,0.2); }
.site-social-inline-btn[data-social*="facebook"]:hover { background: rgba(24,119,242,0.14); border-color: rgba(24,119,242,0.4); color: #6ba6ff; box-shadow: 0 4px 14px rgba(24,119,242,0.2); }
.site-social-inline-btn[data-social*="twitter"]:hover,
.site-social-inline-btn[data-social*="^x$"]:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.35); color: #fff; }
.site-social-inline-icon { width: 14px; height: 14px; object-fit: contain; }

/* --- Activities Panel --- */
.site-page-clean .network-blog-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.site-page-clean .network-blog-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--t-mid), rgba(162,69,255,0.5), transparent);
}
.site-page-clean .network-blog-panel::after {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(var(--t-rgb),0.04), transparent 60%);
  pointer-events: none;
}

/* Section heading */
.site-page-clean .clean-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative;
}
.site-page-clean .clean-head h2 {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--t);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-page-clean .clean-head::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 40px; height: 2px;
  background: linear-gradient(90deg, var(--t), transparent);
  border-radius: 2px;
  animation: headAccent 3s ease-in-out infinite;
}
@keyframes headAccent {
  0%,100% { width: 40px; opacity: 0.8; }
  50% { width: 60px; opacity: 1; }
}
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  background: var(--t-soft);
  border: 1px solid var(--t-mid);
  border-radius: 20px;
  color: var(--t);
  font-size: 10px;
  font-weight: 800;
}

/* --- Bento Grid --- */
.site-page-clean .network-blog-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
/* Featured: first card spans 2×2 */
.site-page-clean .network-blog-list .network-blog-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.site-page-clean .network-blog-item {
  display: flex;
  flex-direction: column;
  background: rgba(10,15,30,0.7);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  position: relative;
}
.site-page-clean .network-blog-item:hover {
  transform: translateY(-4px);
  border-color: var(--t-mid);
  box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 28px var(--t-soft);
}
.site-page-clean .network-blog-thumb,
.site-page-clean .network-blog-thumb.toggle-trigger {
  display: block;
  width: 100%;
  background: rgba(0,0,0,0.4);
  cursor: pointer;
  border: none;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.site-page-clean .network-blog-thumb img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.site-page-clean .network-blog-item:hover .network-blog-thumb img {
  transform: scale(1.04);
}
/* UNGGULAN badge on featured */
.site-page-clean .network-blog-list .network-blog-item:first-child .network-blog-thumb::after {
  content: 'UNGGULAN';
  position: absolute;
  top: 10px; left: 10px;
  padding: 4px 9px;
  background: linear-gradient(135deg, rgba(var(--t-rgb),0.95), #7bffd5);
  color: #051624;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  border-radius: 6px;
  box-shadow: 0 3px 12px rgba(var(--t-rgb),0.4);
  pointer-events: none;
  z-index: 3;
}
.site-page-clean .network-blog-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 10px 12px 12px;
  gap: 5px;
}
.site-page-clean .network-blog-meta time {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t);
}
.site-page-clean .network-blog-body h3 {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #edf3ff;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.site-page-clean .network-blog-list .network-blog-item:first-child .network-blog-body h3 {
  font-size: 15px;
  -webkit-line-clamp: 3;
}
.site-page-clean .network-blog-item:hover .network-blog-body h3 {
  background: linear-gradient(135deg, #fff, var(--t));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.site-page-clean .network-detail-toggle,
.site-page-clean .network-blog-body button.post-modal-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding: 5px 13px;
  border-radius: 20px;
  background: var(--t-soft);
  border: 1px solid var(--t-mid);
  color: var(--t);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  align-self: flex-start;
}
.site-page-clean .network-detail-toggle:hover,
.site-page-clean .network-blog-body button.post-modal-trigger:hover {
  background: var(--t-mid);
  color: #051624;
}

/* --- Pagination --- */
.site-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.site-pagination .pagination-link {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 8px;
  background: var(--t-soft);
  border: 1px solid var(--t-mid);
  color: var(--t);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
}
.site-pagination .pagination-link:hover {
  background: var(--t-mid);
  color: #051624;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--t-glow);
}
.site-pagination .pagination-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}

/* --- Description Modal --- */
.site-desc-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}
.site-desc-modal.is-open { pointer-events: all; opacity: 1; }
.site-desc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
}
.site-desc-modal-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  max-height: 80vh;
  background: linear-gradient(155deg, rgba(14,22,42,0.99), rgba(7,10,22,1));
  border: 1px solid var(--t-mid);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 40px var(--t-soft);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(16px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.site-desc-modal.is-open .site-desc-modal-box { transform: none; }
.site-desc-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.site-desc-modal-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.site-desc-modal-close {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #a0b4cc;
  width: 30px; height: 30px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.site-desc-modal-close:hover { background: var(--t-soft); color: var(--t); transform: rotate(90deg); }
.site-desc-modal-body {
  padding: 18px 20px 22px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.75;
  color: #b8c9e4;
}
.site-desc-modal-body p { margin: 0 0 10px; }
.site-desc-modal-body p:last-child { margin-bottom: 0; }

/* --- Post Detail Modal --- */
.post-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.post-modal.is-open { pointer-events: all; opacity: 1; }
.post-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px);
}
.post-modal-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  background: linear-gradient(155deg, rgba(14,22,42,0.99), rgba(7,10,22,1));
  border: 1px solid var(--t-mid);
  border-radius: 20px;
  box-shadow: 0 28px 80px rgba(0,0,0,0.7), 0 0 50px var(--t-soft);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.post-modal.is-open .post-modal-box { transform: none; }
.post-modal-close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 5;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  width: 34px; height: 34px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  backdrop-filter: blur(6px);
}
.post-modal-close:hover { background: var(--t-soft); border-color: var(--t-mid); color: var(--t); transform: rotate(90deg); }
.post-modal-image-wrap {
  width: 100%;
  background: rgba(0,0,0,0.4);
  flex-shrink: 0;
  max-height: 300px;
  overflow: hidden;
}
.post-modal-image-wrap img {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: contain;
  display: block;
}
.post-modal-content {
  padding: 16px 20px 20px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.post-modal-meta {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t);
  margin-bottom: 6px;
}
.post-modal-title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 12px;
  color: #fff;
}
.post-modal-body {
  font-size: 13px;
  line-height: 1.75;
  color: #b8c9e4;
}
.post-modal-body p { margin: 0 0 10px; }
.post-modal-body p:last-child { margin-bottom: 0; }
.post-modal-content::-webkit-scrollbar { width: 5px; }
.post-modal-content::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
.post-modal-content::-webkit-scrollbar-thumb { background: var(--t-mid); border-radius: 3px; }

/* --- Adaptive Theme Colors (from JS) --- */
.has-theme-color {
  --t: var(--theme-accent, #36e3ff);
  --t-rgb: var(--theme-accent-rgb, 54,227,255);
  --t-soft: var(--theme-accent-soft, rgba(54,227,255,0.12));
  --t-mid: var(--theme-accent-mid, rgba(54,227,255,0.35));
  --t-glow: var(--theme-accent-glow, rgba(54,227,255,0.18));
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .site-page-clean .network-blog-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .site-page-clean .network-blog-list .network-blog-item:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }
}
@media (max-width: 640px) {
  .site-page-clean .site-brand-strip {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
  }
  .site-page-clean .site-brand-id {
    flex: 1 1 100%;
  }
  .site-page-clean .site-brand-logo {
    width: 46px; height: 46px; flex: 0 0 46px;
  }
  .site-page-clean .site-brand-copy h2 {
    font-size: 16px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .site-page-clean .site-desc-preview-clamp { -webkit-line-clamp: 2; }
  .site-page-clean .site-brand-actions {
    flex: 1 1 100%;
    width: 100%;
  }
  .site-page-clean .site-main-cta { flex: 1; }
  .site-page-clean .site-ghost-cta { padding: 0 12px; }
  .site-stats-row { grid-template-columns: 1fr 1fr; }
  .site-stat-card:last-child:nth-child(odd) { grid-column: span 2; }
  .site-page-clean .network-blog-list { grid-template-columns: 1fr 1fr; gap: 10px; }
  .site-page-clean .network-blog-list .network-blog-item:first-child { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 400px) {
  .site-stats-row { grid-template-columns: 1fr; }
  .site-stat-card:last-child:nth-child(odd) { grid-column: auto; }
  .site-page-clean .network-blog-list { grid-template-columns: 1fr; }
  .site-page-clean .network-blog-list .network-blog-item:first-child { grid-column: auto; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .site-page-clean * { animation: none !important; transition-duration: 0.01ms !important; }
}


/* ============================================================
   LOGO-ADAPTIVE SITE PAGE THEME SYSTEM
   All colors driven by --t, --t-rgb, --t-soft, --t-mid, --t-glow.
   Defaults = cyan; overridden per-site by PHP (site_colors.json)
   or JS canvas sampling at runtime.
   ============================================================ */

/* ── Default accent tokens (cyan brand) ── */
:root {
  --t:        #00eeff;
  --t-rgb:    0, 238, 255;
  --t-soft:   rgba(0, 238, 255, 0.12);
  --t-mid:    rgba(0, 238, 255, 0.38);
  --t-glow:   rgba(0, 238, 255, 0.20);
  --t-strong: rgba(0, 238, 255, 0.58);
}

/* ── When logo color is injected by PHP or JS ── */
.has-theme-color {
  --t:        var(--theme-accent,        #00eeff);
  --t-rgb:    var(--theme-accent-rgb,    0, 238, 255);
  --t-soft:   var(--theme-accent-soft,   rgba(0,238,255,.12));
  --t-mid:    var(--theme-accent-mid,    rgba(0,238,255,.38));
  --t-glow:   var(--theme-accent-glow,   rgba(0,238,255,.20));
  --t-strong: var(--theme-accent-strong, rgba(0,238,255,.58));
}

/* ── Page background: radial glow behind hero uses logo color ── */
.site-page-clean {
  position: relative;
  padding: 10px 12px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 1040px;
  margin: 0 auto;
}
.site-page-clean::before {
  content: '';
  position: fixed;
  top: -10vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 120vw);
  height: 55vh;
  border-radius: 50%;
  background: radial-gradient(ellipse,
    rgba(var(--t-rgb), 0.13) 0%,
    rgba(var(--t-rgb), 0.04) 45%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
  transition: background 0.8s ease;
  filter: blur(24px);
}

/* ── Brand strip: logo + name + CTAs ── */
.site-brand-strip {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 20px !important;
  background: linear-gradient(155deg, rgba(8,14,30,.98), rgba(5,9,20,1)) !important;
  border: 1px solid rgba(var(--t-rgb), 0.20) !important;
  border-top-width: 2px !important;
  border-radius: 18px !important;
  box-shadow:
    0 0 0 1px rgba(var(--t-rgb), 0.06) inset,
    0 16px 40px rgba(0,0,0,.42),
    0 0 60px rgba(var(--t-rgb), 0.06) !important;
  position: relative !important;
  overflow: hidden !important;
}
.site-brand-strip::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(var(--t-rgb), 0.55), rgba(var(--t-rgb), 0.30), transparent) !important;
  pointer-events: none !important;
}
.site-brand-id {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}
.site-brand-actions {
  display: flex !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  align-items: center !important;
}

/* ── Primary CTA: vivid, logo-colored ── */
.site-main-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 0 22px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: #041218 !important;
  background: var(--t, #00eeff) !important;
  border: none !important;
  box-shadow:
    0 6px 20px rgba(var(--t-rgb), 0.35),
    0 0 0 1px rgba(var(--t-rgb), 0.40),
    inset 0 1px 0 rgba(255,255,255, 0.50) !important;
  transition: all .22s ease !important;
  white-space: nowrap !important;
  position: relative !important;
  overflow: hidden !important;
  animation: ctaBreatheAdaptive 3s ease-in-out infinite !important;
}
@keyframes ctaBreatheAdaptive {
  0%,100% { box-shadow: 0 6px 20px rgba(var(--t-rgb),.32), 0 0 0 1px rgba(var(--t-rgb),.38), inset 0 1px 0 rgba(255,255,255,.5); }
  50%      { box-shadow: 0 8px 28px rgba(var(--t-rgb),.52), 0 0 0 1px rgba(var(--t-rgb),.58), inset 0 1px 0 rgba(255,255,255,.6); }
}
.site-main-cta::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.32) 50%, transparent 75%) !important;
  transform: translateX(-120%) !important;
  animation: ctaSweepAdaptive 3.4s ease infinite !important;
}
@keyframes ctaSweepAdaptive {
  0%,55%,100% { transform: translateX(-120%); }
  72% { transform: translateX(120%); }
}
.site-main-cta:hover {
  transform: translateY(-2px) !important;
  animation: none !important;
  box-shadow:
    0 10px 32px rgba(var(--t-rgb), 0.50),
    0 0 0 1px rgba(var(--t-rgb), 0.60),
    inset 0 1px 0 rgba(255,255,255, 0.65) !important;
}

/* ── Secondary CTA: ghost, adapts to logo color ── */
.site-ghost-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  color: rgba(var(--t-rgb), 0.72) !important;
  background: rgba(var(--t-rgb), 0.05) !important;
  border: 1px solid rgba(var(--t-rgb), 0.20) !important;
  transition: all .2s ease !important;
  white-space: nowrap !important;
}
.site-ghost-cta:hover {
  background: rgba(var(--t-rgb), 0.12) !important;
  border-color: rgba(var(--t-rgb), 0.40) !important;
  color: var(--t, #00eeff) !important;
}

/* ── Site logo: glows with its own color ── */
.site-brand-logo {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  border-radius: 14px !important;
  padding: 8px !important;
  background: rgba(var(--t-rgb), 0.10) !important;
  border: 1.5px solid rgba(var(--t-rgb), 0.40) !important;
  box-shadow:
    0 4px 18px rgba(0,0,0,.40),
    0 0 22px rgba(var(--t-rgb), 0.22),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
  transition: all 0.3s ease !important;
  animation: logoBreathe 4s ease-in-out infinite !important;
}
@keyframes logoBreathe {
  0%,100% { box-shadow: 0 4px 18px rgba(0,0,0,.40), 0 0 16px rgba(var(--t-rgb),.18), inset 0 1px 0 rgba(255,255,255,.15); }
  50%      { box-shadow: 0 4px 22px rgba(0,0,0,.44), 0 0 30px rgba(var(--t-rgb),.35), inset 0 1px 0 rgba(255,255,255,.20); }
}
.site-brand-logo:hover {
  transform: translateY(-2px) scale(1.04) !important;
  animation: none !important;
  box-shadow:
    0 8px 26px rgba(0,0,0,.50),
    0 0 38px rgba(var(--t-rgb), 0.48),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* ── Site name: gradient text using logo color ── */
.site-brand-copy h2 {
  margin: 0 0 3px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  background: linear-gradient(135deg, #fff 0%, rgba(var(--t-rgb), 1) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── Info panel: data cards with logo-colored accents ── */
.site-info-panel {
  background: linear-gradient(155deg, rgba(8,14,30,.98), rgba(5,9,20,.99)) !important;
  border: 1px solid rgba(var(--t-rgb), 0.16) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.38), 0 0 40px rgba(var(--t-rgb), 0.06) !important;
  position: relative !important;
  overflow: hidden !important;
}
.site-info-panel::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(var(--t-rgb), 0.50), transparent) !important;
}
.site-info-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.site-info-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 11px 13px !important;
  border-radius: 12px !important;
  background: rgba(var(--t-rgb), 0.04) !important;
  border: 1px solid rgba(var(--t-rgb), 0.10) !important;
  border-left: 3px solid rgba(var(--t-rgb), 0.55) !important;
  transition: all .2s ease !important;
  position: relative !important;
}
.site-info-item:hover {
  background: rgba(var(--t-rgb), 0.08) !important;
  border-color: rgba(var(--t-rgb), 0.22) !important;
  border-left-color: var(--t, #00eeff) !important;
}
.site-info-bullet { display: none !important; }
.site-info-label {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: rgba(var(--t-rgb), 0.65) !important;
  display: block !important;
}
.site-info-value {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #f0f8ff !important;
  line-height: 1.4 !important;
  word-break: break-word !important;
}
.site-info-list > .site-info-item:last-child:nth-child(odd) {
  grid-column: 1 / -1 !important;
}

/* ── Stat cards: count-up numbers ── */
.site-stats-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: 8px !important;
}
.site-stat-card {
  padding: 12px 14px !important;
  background: linear-gradient(155deg, rgba(8,14,30,.98), rgba(5,9,20,.99)) !important;
  border: 1px solid rgba(var(--t-rgb), 0.14) !important;
  border-left: 3px solid rgba(var(--t-rgb), 0.50) !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.28) !important;
  transition: all .25s ease !important;
  animation: statCardIn 0.5s ease calc(var(--stat-delay, 0s)) both !important;
}
@keyframes statCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.site-stat-card:hover {
  border-color: rgba(var(--t-rgb), 0.30) !important;
  border-left-color: var(--t, #00eeff) !important;
  box-shadow: 0 6px 22px rgba(0,0,0,.36), 0 0 20px rgba(var(--t-rgb), 0.12) !important;
  transform: translateY(-2px) !important;
}
.site-stat-label {
  font-size: 9px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .10em !important;
  color: rgba(var(--t-rgb), 0.65) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.site-stat-label::after {
  content: '' !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--t, #00eeff) !important;
  box-shadow: 0 0 7px rgba(var(--t-rgb), 0.80) !important;
  animation: statDotPulse 2s ease-out infinite !important;
  flex-shrink: 0 !important;
}
@keyframes statDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--t-rgb), 0.7); }
  70%  { box-shadow: 0 0 0 7px rgba(var(--t-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--t-rgb), 0); }
}
.site-stat-value {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #f0f8ff !important;
  line-height: 1.2 !important;
}

/* ── Network/activity panel ── */
.network-blog-panel {
  background: linear-gradient(155deg, rgba(8,14,30,.98), rgba(5,9,20,.99)) !important;
  border: 1px solid rgba(var(--t-rgb), 0.14) !important;
  border-radius: 18px !important;
  padding: 18px !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.36), 0 0 40px rgba(var(--t-rgb), 0.05) !important;
  position: relative !important;
  overflow: hidden !important;
}
.network-blog-panel::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(var(--t-rgb), 0.45), rgba(var(--t-rgb), 0.25), transparent) !important;
}

/* Section heading */
.site-page-clean .clean-head h2,
.site-page-clean .section-head :is(h1,h2) {
  color: var(--t, #00eeff) !important;
  -webkit-text-fill-color: unset !important;
  background: none !important;
}

/* ── Post cards: banner images ── */
.site-page-clean .network-blog-item {
  border-color: rgba(255,255,255,.07) !important;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease !important;
}
.site-page-clean .network-blog-item:hover {
  border-color: rgba(var(--t-rgb), 0.30) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.45), 0 0 28px rgba(var(--t-rgb), 0.12) !important;
  transform: translateY(-4px) !important;
}
/* Top accent on hover */
.site-page-clean .network-blog-item::after {
  background: linear-gradient(90deg, transparent, rgba(var(--t-rgb), 0.80), transparent) !important;
}

/* ── Meta date: logo color ── */
.site-page-clean .network-blog-meta time {
  color: var(--t, #00eeff) !important;
}

/* ── Detail toggle button ── */
.site-page-clean .network-detail-toggle {
  background: rgba(var(--t-rgb), 0.08) !important;
  border-color: rgba(var(--t-rgb), 0.24) !important;
  color: var(--t, #00eeff) !important;
}
.site-page-clean .network-detail-toggle:hover {
  background: rgba(var(--t-rgb), 0.16) !important;
  border-color: rgba(var(--t-rgb), 0.45) !important;
  color: #051624 !important;
  background: var(--t, #00eeff) !important;
}

/* ── Pagination ── */
.site-page-clean .pagination-link {
  background: rgba(var(--t-rgb), 0.09) !important;
  border-color: rgba(var(--t-rgb), 0.25) !important;
  color: var(--t, #00eeff) !important;
}
.site-page-clean .pagination-link:hover {
  background: var(--t, #00eeff) !important;
  color: #041218 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(var(--t-rgb), 0.35) !important;
}

/* ── Count badge: logo color ── */
.count-badge {
  background: rgba(var(--t-rgb), 0.14) !important;
  border-color: rgba(var(--t-rgb), 0.30) !important;
  color: var(--t, #00eeff) !important;
}

/* ── Social buttons: hover tints ── */
.site-social-inline-btn:hover {
  background: rgba(var(--t-rgb), 0.12) !important;
  border-color: rgba(var(--t-rgb), 0.38) !important;
  color: var(--t, #00eeff) !important;
}

/* ── Featured banner panel ── */
.site-page-clean .hero-featured-slider {
  border: 1px solid rgba(var(--t-rgb), 0.15) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.40), 0 0 30px rgba(var(--t-rgb), 0.07) !important;
}

/* ── Description "read more" button ── */
.site-desc-readmore {
  color: var(--t, #00eeff) !important;
}
.site-desc-readmore:hover { opacity: 0.82 !important; }

/* ── Modal: top border uses logo color ── */
.site-desc-modal-box,
.post-modal-box {
  border-color: rgba(var(--t-rgb), 0.35) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.60), 0 0 50px rgba(var(--t-rgb), 0.14) !important;
}
.post-modal-close:hover,
.site-desc-modal-close:hover {
  background: rgba(var(--t-rgb), 0.12) !important;
  border-color: rgba(var(--t-rgb), 0.35) !important;
  color: var(--t, #00eeff) !important;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .site-brand-strip {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }
  .site-brand-actions { width: 100% !important; }
  .site-main-cta { flex: 1 !important; }
  .site-info-list { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .site-info-item { padding: 9px 11px !important; }
  .site-stats-row { grid-template-columns: 1fr 1fr !important; }
  .site-page-clean .network-blog-list { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 400px) {
  .site-stats-row { grid-template-columns: 1fr !important; }
  .site-page-clean .network-blog-list { grid-template-columns: 1fr !important; }
}
/* ── END LOGO-ADAPTIVE THEME ── */

/* ============================================================
   FIX PASS: hover white-flash, card sizes, color visibility
   ============================================================ */

/* --- Fix: suppress old ::before white-flash on CTA inside site-page-clean --- */
.site-page-clean .site-main-cta::before {
  display: none !important;
}
/* Make hover on main CTA smooth — darken slightly instead of flash-to-white */
.site-page-clean .site-main-cta:hover {
  filter: brightness(1.12) saturate(1.1);
  transform: translateY(-2px);
  animation: none !important;
}

/* --- Fix: h3 gradient text on hover — was dropping text-fill-color to transparent causing flash --- */
.site-page-clean .network-blog-item:hover .network-blog-body h3 {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #fff !important;
  background-clip: unset !important;
  color: #fff !important;
}

/* --- Fix: Aktivitas Terbaru — enforce consistent image height via aspect-ratio --- */
/* All thumbs: 16:9 box, image fills it with cover so no stretch/height mismatch */
.site-page-clean .network-blog-thumb,
.site-page-clean .network-blog-thumb.toggle-trigger {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}
.site-page-clean .network-blog-thumb img,
.site-page-clean .network-blog-thumb.toggle-trigger img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}
/* Featured card (first child) gets a taller ratio since it spans 2 rows */
.site-page-clean .network-blog-list .network-blog-item:first-child .network-blog-thumb,
.site-page-clean .network-blog-list .network-blog-item:first-child .network-blog-thumb.toggle-trigger {
  aspect-ratio: 16 / 10 !important;
}
/* Ensure all cards stretch to fill their grid cell */
.site-page-clean .network-blog-list {
  align-items: stretch !important;
}
.site-page-clean .network-blog-item {
  height: 100% !important;
}

/* --- Fix: make theme accent color more visible --- */
/* Boost mid and glow opacity so accent color actually shows */
.site-page-clean .site-brand-logo {
  border-color: rgba(var(--t-rgb), 0.55) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 24px rgba(var(--t-rgb), 0.30) !important;
}
.site-page-clean .site-brand-strip::after {
  background: linear-gradient(90deg, transparent, rgba(var(--t-rgb), 0.55), transparent) !important;
}
.site-page-clean .network-blog-panel::before {
  background: linear-gradient(90deg, transparent, rgba(var(--t-rgb), 0.55), rgba(162,69,255,0.4), transparent) !important;
}
.site-page-clean .site-stat-card::before {
  width: 3px !important;
  background: linear-gradient(180deg, var(--t), rgba(162,69,255,0.9)) !important;
}
.site-page-clean .site-stat-card:hover {
  border-color: rgba(var(--t-rgb), 0.50) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35), 0 0 28px rgba(var(--t-rgb), 0.22) !important;
}
.site-page-clean .network-blog-item:hover {
  border-color: rgba(var(--t-rgb), 0.45) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 32px rgba(var(--t-rgb), 0.18) !important;
}
.site-page-clean .clean-head::after {
  background: linear-gradient(90deg, var(--t), rgba(var(--t-rgb), 0.3)) !important;
  height: 2px !important;
}
.site-page-clean .network-detail-toggle,
.site-page-clean .network-blog-body button.post-modal-trigger {
  background: rgba(var(--t-rgb), 0.16) !important;
  border-color: rgba(var(--t-rgb), 0.45) !important;
}
.site-page-clean .network-detail-toggle:hover,
.site-page-clean .network-blog-body button.post-modal-trigger:hover {
  background: rgba(var(--t-rgb), 0.40) !important;
  border-color: rgba(var(--t-rgb), 0.70) !important;
  color: #fff !important;
}

/* --- END FIX PASS --- */

/* ============================================================
   FIX PASS 2: 1:1 images, color matching, visibility boost
   ============================================================ */

/* --- 1:1 aspect ratio for ALL activity cards (no cropping) --- */
.site-page-clean .network-blog-thumb,
.site-page-clean .network-blog-thumb.toggle-trigger {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  display: block !important;
}
/* Featured card same ratio */
.site-page-clean .network-blog-list .network-blog-item:first-child .network-blog-thumb,
.site-page-clean .network-blog-list .network-blog-item:first-child .network-blog-thumb.toggle-trigger {
  aspect-ratio: 1 / 1 !important;
}
.site-page-clean .network-blog-thumb img,
.site-page-clean .network-blog-thumb.toggle-trigger img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

/* --- CTA button: drop hardcoded mint (#7bffd5), use theme color throughout --- */
.site-page-clean .site-main-cta {
  background: linear-gradient(135deg,
    rgba(var(--t-rgb), 1) 0%,
    rgba(var(--t-rgb), 0.72) 100%) !important;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;
  box-shadow:
    0 4px 18px rgba(var(--t-rgb), 0.45),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
.site-page-clean .site-main-cta:hover {
  filter: brightness(1.18) !important;
  box-shadow:
    0 8px 28px rgba(var(--t-rgb), 0.60),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
@keyframes ctaBreathe {
  0%,100% { box-shadow: 0 4px 18px rgba(var(--t-rgb),0.40), inset 0 1px 0 rgba(255,255,255,0.22); }
  50%      { box-shadow: 0 6px 28px rgba(var(--t-rgb),0.60), inset 0 1px 0 rgba(255,255,255,0.30); }
}

/* --- Font & accent color: force all key text to use --t not hardcoded cyan --- */
/* Section heading */
.site-page-clean .clean-head h2,
.site-page-clean .network-head h2 {
  color: var(--t) !important;
}
/* Date / meta */
.site-page-clean .network-blog-meta time {
  color: var(--t) !important;
  opacity: 0.85;
}
/* Detail button */
.site-page-clean .network-detail-toggle,
.site-page-clean .network-blog-body button.post-modal-trigger {
  color: var(--t) !important;
  background: rgba(var(--t-rgb), 0.14) !important;
  border: 1px solid rgba(var(--t-rgb), 0.42) !important;
}
.site-page-clean .network-detail-toggle:hover,
.site-page-clean .network-blog-body button.post-modal-trigger:hover {
  background: rgba(var(--t-rgb), 0.35) !important;
  border-color: rgba(var(--t-rgb), 0.65) !important;
  color: #fff !important;
}
/* Count badge */
.count-badge {
  background: rgba(var(--t-rgb), 0.16) !important;
  border-color: rgba(var(--t-rgb), 0.45) !important;
  color: var(--t) !important;
}
/* Pagination links */
.site-pagination .pagination-link {
  background: rgba(var(--t-rgb), 0.14) !important;
  border-color: rgba(var(--t-rgb), 0.42) !important;
  color: var(--t) !important;
}
.site-pagination .pagination-link:hover {
  background: rgba(var(--t-rgb), 0.35) !important;
  color: #fff !important;
}
/* Ghost CTA border → theme color */
.site-page-clean .site-ghost-cta {
  border-color: rgba(var(--t-rgb), 0.28) !important;
  color: rgba(var(--t-rgb), 0.85) !important;
}
.site-page-clean .site-ghost-cta:hover {
  background: rgba(var(--t-rgb), 0.12) !important;
  border-color: rgba(var(--t-rgb), 0.55) !important;
  color: var(--t) !important;
}

/* --- Stronger card and panel borders/glows --- */
.site-page-clean .network-blog-item {
  border-color: rgba(var(--t-rgb), 0.18) !important;
}
.site-page-clean .network-blog-item:hover {
  border-color: rgba(var(--t-rgb), 0.52) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 32px rgba(var(--t-rgb), 0.22) !important;
}
.site-page-clean .site-brand-strip {
  border-color: rgba(var(--t-rgb), 0.22) !important;
}
.site-page-clean .network-blog-panel {
  border-color: rgba(var(--t-rgb), 0.22) !important;
}
/* Stat card left bar */
.site-stat-card::before {
  background: linear-gradient(180deg, var(--t), rgba(var(--t-rgb), 0.3)) !important;
  width: 3px !important;
}
/* Clean head underline animation */
.site-page-clean .clean-head::after {
  background: var(--t) !important;
  opacity: 0.7 !important;
}

/* --- END FIX PASS 2 --- */

/* ============================================================
   FIX PASS 3: Mobile layout — compact, smaller, structured
   ============================================================ */

@media (max-width: 640px) {

  /* Page padding */
  .site-page-clean {
    padding: 6px 8px 20px !important;
    gap: 8px !important;
  }

  /* ── Brand strip: compact single row ── */
  .site-page-clean .site-brand-strip {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .site-page-clean .site-brand-id {
    flex: 1 1 auto !important;
    gap: 8px !important;
    align-items: center !important;
    min-width: 0 !important;
  }
  /* Smaller logo */
  .site-page-clean .site-brand-logo {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    padding: 4px !important;
    border-radius: 8px !important;
  }
  /* Smaller site name */
  .site-page-clean .site-brand-copy h2 {
    font-size: 13px !important;
    margin-bottom: 1px !important;
  }
  .site-desc-preview-clamp,
  .site-desc-short {
    font-size: 10px !important;
    -webkit-line-clamp: 1 !important;
  }
  .site-desc-readmore {
    font-size: 9px !important;
  }
  /* Buttons row: side by side, compact */
  .site-page-clean .site-brand-actions {
    flex: 0 0 auto !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: auto !important;
  }
  .site-page-clean .site-main-cta {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 12px !important;
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
    border-radius: 7px !important;
    flex: unset !important;
    width: auto !important;
  }
  .site-page-clean .site-ghost-cta {
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
  }

  /* ── Stat cards: compact 2-col ── */
  .site-stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .site-stat-card {
    padding: 7px 10px !important;
    border-radius: 9px !important;
    gap: 2px !important;
  }
  .site-stat-label {
    font-size: 8px !important;
    letter-spacing: 0.06em !important;
  }
  .site-stat-value {
    font-size: 13px !important;
  }

  /* ── Social buttons: compact ── */
  .site-social-inline-row {
    gap: 5px !important;
  }
  .site-social-inline-btn {
    padding: 5px 10px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
    gap: 4px !important;
  }
  .site-social-inline-icon {
    width: 12px !important;
    height: 12px !important;
  }

  /* ── Activity panel: compact ── */
  .site-page-clean .network-blog-panel {
    padding: 12px !important;
    border-radius: 12px !important;
  }
  .site-page-clean .clean-head {
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
  }
  .site-page-clean .clean-head h2 {
    font-size: 10px !important;
  }

  /* ── Activity cards: 2-col grid on mobile ── */
  .site-page-clean .network-blog-list {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* Featured card: same size as others on mobile (no span) */
  .site-page-clean .network-blog-list .network-blog-item:first-child {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
  .site-page-clean .network-blog-item {
    border-radius: 10px !important;
  }
  .site-page-clean .network-blog-body {
    padding: 7px 8px 8px !important;
    gap: 3px !important;
  }
  .site-page-clean .network-blog-meta time {
    font-size: 8px !important;
  }
  .site-page-clean .network-blog-body h3 {
    font-size: 10px !important;
    -webkit-line-clamp: 2 !important;
  }
  .site-page-clean .network-detail-toggle,
  .site-page-clean .network-blog-body button.post-modal-trigger {
    font-size: 9px !important;
    padding: 4px 9px !important;
    margin-top: 3px !important;
  }

  /* ── Banner: smaller on mobile ── */
  .site-banner-wrap .site-featured-banner-image {
    max-height: 120px !important;
    border-radius: 10px !important;
  }
}

/* ── Very small screens (< 380px) ── */
@media (max-width: 380px) {
  .site-page-clean .site-brand-actions {
    flex-direction: row !important;
    flex: 1 1 100% !important;
  }
  .site-page-clean .site-main-cta,
  .site-page-clean .site-ghost-cta {
    flex: 1 !important;
    justify-content: center !important;
  }
  .site-stats-row {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── END MOBILE FIX PASS 3 ── */

/* ============================================================
   FIX PASS 4: Detail button position & size alignment
   ============================================================ */

/* Body: don't stretch to fill card height — let content size naturally */
.site-page-clean .network-blog-body {
  flex: 0 0 auto !important;
}

/* Button: sit directly below title, not floating at card bottom */
.site-page-clean .network-detail-toggle,
.site-page-clean .network-blog-body button.post-modal-trigger {
  margin-top: 6px !important;
  align-self: flex-start !important;
  /* Consistent sizing across all cards */
  font-size: 10px !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  min-height: 26px !important;
}

/* Featured card (first child): slightly larger button to match bigger text */
.site-page-clean .network-blog-list .network-blog-item:first-child .network-detail-toggle,
.site-page-clean .network-blog-list .network-blog-item:first-child button.post-modal-trigger {
  font-size: 11px !important;
  padding: 6px 16px !important;
  min-height: 30px !important;
  margin-top: 10px !important;
}

/* Mobile: keep button small and tight */
@media (max-width: 640px) {
  .site-page-clean .network-detail-toggle,
  .site-page-clean .network-blog-body button.post-modal-trigger {
    font-size: 9px !important;
    padding: 4px 10px !important;
    min-height: 22px !important;
    margin-top: 4px !important;
    border-radius: 14px !important;
  }
  /* On mobile all cards are equal — no featured override needed */
  .site-page-clean .network-blog-list .network-blog-item:first-child .network-detail-toggle,
  .site-page-clean .network-blog-list .network-blog-item:first-child button.post-modal-trigger {
    font-size: 9px !important;
    padding: 4px 10px !important;
    min-height: 22px !important;
    margin-top: 4px !important;
  }
}

/* --- END FIX PASS 4 --- */

/* ============================================================
   FIX PASS 5: Color clarity — readable on all themes
   ============================================================ */

/* ── Section heading: bigger, glow, always legible ── */
.site-page-clean .clean-head h2 {
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  color: var(--t) !important;
  text-shadow: 0 0 16px rgba(var(--t-rgb), 0.55), 0 0 32px rgba(var(--t-rgb), 0.25) !important;
}

/* ── Section underline: brighter, taller ── */
.site-page-clean .clean-head::after {
  height: 3px !important;
  background: linear-gradient(90deg, var(--t), rgba(var(--t-rgb), 0.2)) !important;
  opacity: 1 !important;
  width: 48px !important;
  border-radius: 3px !important;
}

/* ── Count badge: solid, clearly themed ── */
.count-badge {
  background: rgba(var(--t-rgb), 0.22) !important;
  border: 1.5px solid rgba(var(--t-rgb), 0.65) !important;
  color: var(--t) !important;
  font-weight: 900 !important;
  text-shadow: 0 0 8px rgba(var(--t-rgb), 0.6) !important;
  min-width: 22px !important;
  height: 20px !important;
}

/* ── Date/meta text: more visible ── */
.site-page-clean .network-blog-meta time {
  color: var(--t) !important;
  opacity: 1 !important;
  text-shadow: 0 0 10px rgba(var(--t-rgb), 0.40) !important;
}

/* ── Panel top-border accent: clearly visible ── */
.site-page-clean .network-blog-panel::before {
  height: 2px !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--t-rgb), 0.80),
    rgba(var(--t-rgb), 0.50),
    transparent) !important;
}
.site-page-clean .site-brand-strip::after {
  height: 2px !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--t-rgb), 0.75),
    transparent) !important;
}

/* ── Card default border: slightly more visible ── */
.site-page-clean .network-blog-item {
  border-color: rgba(var(--t-rgb), 0.22) !important;
}

/* ── Detail button: always clear regardless of hue ── */
.site-page-clean .network-detail-toggle,
.site-page-clean .network-blog-body button.post-modal-trigger {
  background: rgba(var(--t-rgb), 0.18) !important;
  border: 1.5px solid rgba(var(--t-rgb), 0.55) !important;
  color: var(--t) !important;
  text-shadow: 0 0 8px rgba(var(--t-rgb), 0.35) !important;
  font-weight: 800 !important;
}
.site-page-clean .network-detail-toggle:hover,
.site-page-clean .network-blog-body button.post-modal-trigger:hover {
  background: rgba(var(--t-rgb), 0.38) !important;
  border-color: rgba(var(--t-rgb), 0.80) !important;
  color: #fff !important;
  text-shadow: none !important;
  box-shadow: 0 0 14px rgba(var(--t-rgb), 0.40) !important;
}

/* ── Logo box: clearly accented ── */
.site-page-clean .site-brand-logo {
  border: 2px solid rgba(var(--t-rgb), 0.65) !important;
  box-shadow: 0 0 0 3px rgba(var(--t-rgb), 0.12),
              0 4px 16px rgba(0,0,0,0.4),
              0 0 20px rgba(var(--t-rgb), 0.30) !important;
}

/* ── KUNJUNGI SITUS CTA: always readable, color-matched ── */
.site-page-clean .site-main-cta {
  background: linear-gradient(135deg,
    rgba(var(--t-rgb), 1) 0%,
    rgba(var(--t-rgb), 0.75) 100%) !important;
  color: #fff !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
  box-shadow:
    0 4px 20px rgba(var(--t-rgb), 0.50),
    0 0 0 1px rgba(var(--t-rgb), 0.35),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}
/* Ghost / Kembali button: clearly themed */
.site-page-clean .site-ghost-cta {
  color: var(--t) !important;
  border: 1.5px solid rgba(var(--t-rgb), 0.42) !important;
  text-shadow: 0 0 8px rgba(var(--t-rgb), 0.30) !important;
}
.site-page-clean .site-ghost-cta:hover {
  background: rgba(var(--t-rgb), 0.15) !important;
  border-color: rgba(var(--t-rgb), 0.70) !important;
  color: #fff !important;
  text-shadow: none !important;
}

/* ── Stat card accent bar ── */
.site-stat-card::before {
  background: linear-gradient(180deg, var(--t) 0%, rgba(var(--t-rgb), 0.25) 100%) !important;
  width: 3px !important;
}

/* ── END FIX PASS 5 ── */

/* ============================================================
   FIX PASS 6: Base-state visibility (not just hover)
   ============================================================ */

/* ── Heading: bright glow in base state ── */
.site-page-clean .clean-head h2 {
  color: var(--t) !important;
  text-shadow:
    0 0 12px rgba(var(--t-rgb), 0.70),
    0 0 28px rgba(var(--t-rgb), 0.35) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

/* ── Count badge: solid visible by default ── */
.count-badge {
  background: rgba(var(--t-rgb), 0.28) !important;
  border: 1.5px solid rgba(var(--t-rgb), 0.75) !important;
  color: var(--t) !important;
  font-weight: 900 !important;
  box-shadow: 0 0 8px rgba(var(--t-rgb), 0.40) !important;
}

/* ── Detail button: visible base, not just on hover ── */
.site-page-clean .network-detail-toggle,
.site-page-clean .network-blog-body button.post-modal-trigger {
  background: rgba(var(--t-rgb), 0.22) !important;
  border: 1.5px solid rgba(var(--t-rgb), 0.65) !important;
  color: var(--t) !important;
  box-shadow: 0 0 10px rgba(var(--t-rgb), 0.20) !important;
  font-weight: 800 !important;
}

/* ── Panel top lines: visible in base state ── */
.site-page-clean .network-blog-panel::before {
  opacity: 1 !important;
  height: 2px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--t-rgb), 0.85) 40%,
    rgba(var(--t-rgb), 0.55) 70%,
    transparent 100%) !important;
}
.site-page-clean .site-brand-strip::after {
  opacity: 1 !important;
  height: 2px !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--t-rgb), 0.80),
    transparent) !important;
}

/* ── Card borders visible in base state ── */
.site-page-clean .network-blog-item {
  border: 1px solid rgba(var(--t-rgb), 0.28) !important;
}

/* ── Stat card bar: bright in base state ── */
.site-page-clean .site-stat-card::before {
  background: var(--t) !important;
  width: 3px !important;
  box-shadow: 0 0 8px rgba(var(--t-rgb), 0.60) !important;
}

/* ── Logo glow in base state ── */
.site-page-clean .site-brand-logo {
  border: 2px solid rgba(var(--t-rgb), 0.70) !important;
  box-shadow:
    0 0 0 3px rgba(var(--t-rgb), 0.15),
    0 0 20px rgba(var(--t-rgb), 0.35),
    0 4px 16px rgba(0,0,0,0.40) !important;
}

/* ── Ghost CTA: visible text & border in base state ── */
.site-page-clean .site-ghost-cta {
  color: var(--t) !important;
  border: 1.5px solid rgba(var(--t-rgb), 0.55) !important;
  box-shadow: 0 0 10px rgba(var(--t-rgb), 0.15) !important;
}

/* ── Date text: always clearly themed ── */
.site-page-clean .network-blog-meta time {
  color: var(--t) !important;
  font-weight: 800 !important;
  text-shadow: 0 0 8px rgba(var(--t-rgb), 0.45) !important;
}

/* ── Underline bar below heading ── */
.site-page-clean .clean-head::after {
  opacity: 1 !important;
  height: 3px !important;
  width: 52px !important;
  background: var(--t) !important;
  box-shadow: 0 0 8px rgba(var(--t-rgb), 0.70) !important;
  border-radius: 3px !important;
}

/* ── END FIX PASS 6 ── */

/* ============================================================
   FIX PASS 7: Force perceptual brightness on themed elements
   Elements that show --t as color get brightness boost so
   dark hues (purple, navy) always look vivid, not muddy.
   ============================================================ */

/* ── Heading text: always pop, any hue ── */
.site-page-clean .clean-head h2 {
  filter: brightness(1.35) saturate(1.2) !important;
}

/* ── Date text ── */
.site-page-clean .network-blog-meta time {
  filter: brightness(1.30) saturate(1.1) !important;
}

/* ── Count badge ── */
.count-badge {
  filter: brightness(1.30) saturate(1.15) !important;
}

/* ── Detail button text & border ── */
.site-page-clean .network-detail-toggle,
.site-page-clean .network-blog-body button.post-modal-trigger {
  filter: brightness(1.25) saturate(1.1) !important;
}
.site-page-clean .network-detail-toggle:hover,
.site-page-clean .network-blog-body button.post-modal-trigger:hover {
  filter: brightness(1.10) saturate(1.05) !important;
}

/* ── Ghost CTA ── */
.site-page-clean .site-ghost-cta {
  filter: brightness(1.25) saturate(1.1) !important;
}

/* ── Underline bar ── */
.site-page-clean .clean-head::after {
  filter: brightness(1.40) saturate(1.2) !important;
}

/* ── Stat card left bar ── */
.site-page-clean .site-stat-card::before {
  filter: brightness(1.35) saturate(1.15) !important;
}

/* ── Logo glow (the ring only, not the image) ── */
.site-page-clean .site-brand-logo {
  filter: brightness(1.1) !important;
}

/* ── Panel top border lines ── */
.site-page-clean .network-blog-panel::before,
.site-page-clean .site-brand-strip::after {
  filter: brightness(1.35) !important;
}

/* ── END FIX PASS 7 ── */

/* ============================================================
   LIVE ANIMATION SYSTEM
   ============================================================ */

/* ── Sparkle canvas: fixed full-viewport, behind everything ── */
#sparkleCanvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

/* ── Card entrance: slide up + fade in ── */
.site-page-clean .network-blog-item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1),
              transform 0.55s cubic-bezier(0.22,1,0.36,1),
              border-color 0.3s, box-shadow 0.3s !important;
}
.site-page-clean .network-blog-item.anim-in {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--card-i, 0) * 0.08s) !important;
}

/* ── CTA button: shimmer sweep ── */
.site-page-clean .site-main-cta {
  overflow: hidden;
  position: relative;
}
.site-page-clean .site-main-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255,255,255,0.30) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  animation: ctaShimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaShimmer {
  0%,60%  { transform: translateX(-120%); }
  100%    { transform: translateX(220%); }
}

/* ── CTA click ripple ── */
.site-main-cta { position: relative; overflow: hidden; }
.cta-ripple {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  transform: translate(-50%,-50%) scale(0);
  animation: rippleOut 0.6s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleOut {
  to { transform: translate(-50%,-50%) scale(28); opacity: 0; }
}

/* ── Heading: animated shimmer text ── */
.site-page-clean .clean-head h2 {
  background: linear-gradient(
    90deg,
    var(--t) 0%,
    rgba(255,255,255,0.95) 45%,
    var(--t) 55%,
    var(--t) 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: headingShimmer 4s ease-in-out infinite;
  filter: none !important;
}
@keyframes headingShimmer {
  0%, 100% { background-position: 100% 0; }
  50%       { background-position:   0% 0; }
}

/* ── Count badge: bounce-in on load ── */
.count-badge {
  animation: badgePop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.4s both;
}
@keyframes badgePop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ── Logo: continuous soft pulse glow ── */
.site-page-clean .site-brand-logo {
  animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(var(--t-rgb),0.15), 0 0 18px rgba(var(--t-rgb),0.32), 0 4px 16px rgba(0,0,0,0.4); }
  50%     { box-shadow: 0 0 0 5px rgba(var(--t-rgb),0.28), 0 0 34px rgba(var(--t-rgb),0.55), 0 4px 20px rgba(0,0,0,0.5); }
}

/* ── Underline bar: breathing width ── */
.site-page-clean .clean-head::after {
  animation: barBreath 3s ease-in-out infinite !important;
}
@keyframes barBreath {
  0%,100% { width: 48px; opacity: 0.85; }
  50%     { width: 72px; opacity: 1; }
}

/* ── Detail button: subtle float on hover ── */
.site-page-clean .network-detail-toggle:hover,
.site-page-clean .network-blog-body button.post-modal-trigger:hover {
  transform: translateY(-1px);
}

/* ── Card image: zoom on hover (already set, reinforce) ── */
.site-page-clean .network-blog-item:hover .network-blog-thumb img {
  transform: scale(1.06);
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}

/* ── Ghost CTA: shimmer border pulse ── */
.site-page-clean .site-ghost-cta {
  animation: ghostPulse 3.5s ease-in-out infinite;
}
@keyframes ghostPulse {
  0%,100% { border-color: rgba(var(--t-rgb),0.42); }
  50%     { border-color: rgba(var(--t-rgb),0.80); box-shadow: 0 0 14px rgba(var(--t-rgb),0.25); }
}

/* ── Stat card: stagger glow on the left bar ── */
.site-stat-card:nth-child(1)::before { animation-delay: 0s; }
.site-stat-card:nth-child(2)::before { animation-delay: 0.3s; }
.site-stat-card:nth-child(3)::before { animation-delay: 0.6s; }
.site-stat-card:nth-child(4)::before { animation-delay: 0.9s; }
.site-stat-card::before {
  animation: barGlow 2.5s ease-in-out infinite;
}
@keyframes barGlow {
  0%,100% { opacity: 0.75; box-shadow: 0 0 6px rgba(var(--t-rgb),0.40); }
  50%     { opacity: 1;    box-shadow: 0 0 14px rgba(var(--t-rgb),0.80); }
}

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .site-page-clean *,
  .site-page-clean *::before,
  .site-page-clean *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .site-page-clean .network-blog-item {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── END ANIMATION SYSTEM ── */

/* ── Ensure page content renders above sparkle canvas ── */
/* NOTE: NO z-index on .site-shell or footer — that would trap position:fixed modals */
.site-header-bar,
.site-page-main {
  position: relative;
  z-index: 1;
}
/* Modals must always be on top of everything */
.post-modal,
.site-desc-modal {
  z-index: 99999 !important;
}
/* ── END Z-INDEX FIX ── */

/* ── Remove glow & animation from main site header logo ── */
.main-logo {
  filter: none !important;
  animation: none !important;
}
/* ── END LOGO FIX ── */

/* ── Remove glow from about-logo on homepage ── */
.about-logo {
  filter: none !important;
  animation: none !important;
}
/* ── END ABOUT LOGO FIX ── */

/* ============================================================
   ABSOLUTE NAVBAR Z-INDEX OVERRIDE - FORCES NAV ABOVE TICKERS
   This MUST be the last z-index rule in the file to take effect.
============================================================ */

/* Force withdraw ticker BELOW navbar on ALL pages */
.home-wd-wrap,
.home-wd-wrap *,
.bukti-wd-ticker,
.bukti-wd-item {
  z-index: 1 !important;
}

/* Force navbar ABOVE everything on mobile */
@media (max-width: 1024px) {
  .site-header-bar,
  header.site-header-bar {
    z-index: 99990 !important;
    isolation: auto !important;
  }
  
  .top-nav,
  #topNav,
  #topNav.top-nav,
  .site-header-bar #topNav.top-nav,
  nav.top-nav {
    z-index: 99999 !important;
  }
  
  /* Ensure withdraw ticker stays in its place, low z-index */
  .home-wd-wrap {
    position: relative !important;
    z-index: 1 !important;
    isolation: auto !important;
  }
  
  /* Main layout must not create a stacking context above ticker level */
  .main-layout,
  .site-tabs-wrap,
  .footer {
  }
}



/* ============================================================
   SITE DETAIL PAGE (/site?site=...) -- TARGETED LAYOUT FIXES (v2)
   Scoped strictly to .site-page-clean so nothing else (homepage,
   admin, other templates) is affected. Placed last to win the
   cascade over earlier passes without using broad selectors.
============================================================ */

/* Fix 1: header brand name ("DAUNGROUP") getting truncated to
   "DAUNGRO..." and nav buttons being squeezed.
   Root cause: .site-header-bar .brand-block has
   "flex:0 1 auto;min-width:0" and .brand-text :is(h1,.brand-site-title)/p have
   "overflow:hidden;text-overflow:ellipsis" (line ~3795-3798), so
   the brand block shrinks and ellipsis-truncates on the slightest
   overflow -- even though brand (242px) + nav (722px) fit
   comfortably in the available row width. Other pages on this
   site ("fixed menu" pages) keep the header on a single row at
   this width, so the fix here is to match that: stop the brand
   block from shrinking and let the nav compact slightly so both
   sit on ONE row, exactly like the rest of the site.
   Gated to >720px so the existing mobile hamburger-drawer layout
   (max-width:720px) is left untouched. */
@media (min-width: 721px) {
  .site-page-clean .site-header-bar {
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }
  .site-page-clean .site-header-bar .brand-block {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    gap: 8px !important;
  }
  .site-page-clean .site-header-bar .brand-text :is(h1,.brand-site-title) {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: 18px !important;
  }
  .site-page-clean .site-header-bar .brand-text p {
    white-space: nowrap !important;
  }
  .site-page-clean .site-header-bar .top-nav {
    flex: 0 1 auto !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  .site-page-clean .site-header-bar .top-nav .nav-btn {
    padding: 7px 9px !important;
    font-size: 9px !important;
  }
}

/* Fix 2: "Kunjungi Situs" / "Kembali" button placement and the
   site description being squeezed into a sliver of space.
   Root cause: a later CSS pass styled .site-brand-strip as a
   2-column grid expecting .site-brand-id and .site-brand-actions
   to be siblings, but the actual markup nests .site-brand-actions
   INSIDE .site-brand-id. Let .site-brand-id wrap: logo +
   description share row 1 with room to breathe, and the action
   buttons drop to their own full-width row underneath. */
.site-page-clean .site-brand-id {
  flex-wrap: wrap !important;
  row-gap: 12px !important;
}
.site-page-clean .site-brand-copy {
  flex: 1 1 240px !important;
  min-width: 0 !important;
}
.site-page-clean .site-brand-actions {
  flex: 1 1 100% !important;
  justify-content: flex-start !important;
}

/* Fix 3 (revised per owner request): site description getting cut
   off / requiring a "Baca selengkapnya" click.
   The owner asked to drop the read-more affordance entirely so the
   full description always shows on the page. That branch was
   removed at the source in includes/site-page-template.php (the
   template now always renders the plain ".site-desc-short" element,
   which has no line-clamp/overflow rules -- font-size, line-height,
   color, margin only -- so the text wraps and displays in full with
   nothing visually cut). The length is instead capped where it's
   authored, via a max-length on the site description field in the
   admin panel, sized to fit this layout without overflowing. No CSS
   clamp override is needed here any more. */

/* NOTE: the v1 "Fix 3" that forced .site-stats-row to
   grid-column:1/-1 has been REMOVED -- it pulled "Info Tambahan"
   out of its correct position in the 2-column grid (brand strip /
   side panel) and left a large blank gap beside the description.
   The original 2x2 stat-card grid in the side column is correct
   as-is and needs no override. */

/* Fix 4: "Aktivitas Terbaru" bento grid leaving a big empty gap.
   The grid is 4 columns wide with the first post spanning 2x2 --
   that pattern only tiles without leftover gaps when the post
   count is 5 (1 featured 2x2 + 4 regular = exact fit). The feed
   was fetching 6 posts per page, leaving one leftover item that
   created a large blank area. Fixed at the source by requesting
   5 posts per page in includes/site-page-template.php.
   (No CSS change needed/possible here -- see that file.) */
/* Fix 5: blank rectangular gap appearing beside the social links
   row (Twitter/Facebook) in the two-column layout.
   Root cause: .compact-site-main is a 2-column grid; brand-strip,
   stats-row and the social-links row are three separate
   single-column items with uneven heights, so auto-placement
   leaves one grid cell empty next to whichever item ends up
   shorter in its row. Giving the social-links row the same
   full-width treatment as the banner and activity panel removes
   the awkward leftover cell -- it now sits on its own full-width
   row beneath both columns, with nothing left dangling. */
@media (min-width: 860px) {
  .site-page-clean .site-social-inline-row {
    grid-column: 1 / -1 !important;
  }
}

/* ============================================================
   Fix 6: "Make it feel alive" -- visual liveliness pass requested
   by the owner across 6 specific elements. Each gets its own
   distinctive, continuous motion (not a copy-paste glow/hover),
   scoped to .site-page-clean only -- nothing else is touched.
============================================================ */

/* 6a. GADUN GAMING title: faster multi-colour shimmer SWEEP (cyan ->
   pink -> purple -> cyan) across the gradient-clipped text, with an
   integrated glow-pulse baked into the SAME keyframes (so it can't
   fight the sweep for the "filter" property) -- a lot louder and more
   colourful than a plain white/cyan pass. */
.site-page-clean .site-brand-copy h2 {
  background: linear-gradient(110deg, #ffffff 6%, rgb(var(--t-rgb)) 26%, #ff4bdd 50%, #a245ff 66%, rgb(var(--t-rgb)) 84%, #ffffff 96%) !important;
  background-size: 320% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: gadunTitleShine 2.1s linear infinite !important;
}
@keyframes gadunTitleShine {
  0%   { background-position: 320% center; filter: drop-shadow(0 0 3px rgba(var(--t-rgb), .35)); }
  50%  { filter: drop-shadow(0 0 15px rgba(var(--t-rgb), .9)); }
  100% { background-position: -60% center; filter: drop-shadow(0 0 3px rgba(var(--t-rgb), .35)); }
}

/* 6b. Description: justified alignment so both edges line up. */
.site-page-clean .site-desc-short {
  text-align: justify;
}

/* 6c. Info Tambahan: clearer label/value hierarchy + balanced card
   sizing -- previously both read as washed-out "white on white".
   Labels get the theme colour + a much bigger/brighter pulsing dot
   bullet that flares outward like a radar blip; values get a
   continuously-animated multi-colour gradient sweep (not a static
   fill) so the whole row reads as alive, not just re-coloured; cards
   get a consistent min-height so the row reads as one balanced set
   regardless of how many stats are configured. */
.site-page-clean .site-stat-card {
  min-height: 62px;
  justify-content: center;
}
.site-page-clean .site-stat-label {
  color: rgba(var(--t-rgb), 0.95) !important;
  text-shadow: 0 0 10px rgba(var(--t-rgb), 0.35);
}
.site-page-clean .site-stat-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--t-rgb));
  flex-shrink: 0;
  animation: statDotPulse 1.3s ease-in-out infinite;
}
@keyframes statDotPulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 6px 0px rgba(var(--t-rgb), .8);  opacity: .75; }
  50%      { transform: scale(1.9); box-shadow: 0 0 14px 5px rgba(var(--t-rgb), .55); opacity: 1; }
}
.site-page-clean .site-stat-value {
  background: linear-gradient(100deg, #ffffff 8%, rgb(var(--t-rgb)) 38%, #ff4bdd 58%, rgb(var(--t-rgb)) 84%) !important;
  background-size: 280% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: statValueShine 2.8s linear infinite;
}
@keyframes statValueShine {
  0%   { background-position: 280% center; }
  100% { background-position: -50% center; }
}

/* 6d. "Kunjungi Situs": existing shimmer/breathe read as too subtle
   ("looks dead"). The ::after shimmer sweep and the element's own
   "breathe" animation stay completely untouched (so nothing already
   working is disturbed); the ::before on this button was previously
   force-hidden (display:none !important at an earlier pass) -- re-
   purpose it into a bigger, brighter, FASTER outward radar "ping"
   ring -- a clearly separate and much more noticeable continuous
   motion layered on top. Source order makes this win over the
   earlier display:none without touching that rule (it may affect
   other buttons elsewhere using the same class outside
   .site-page-clean). */
.site-page-clean .site-main-cta::before {
  display: block !important;
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: inherit;
  border: 2.5px solid rgba(var(--t-rgb), 0.8);
  box-shadow: 0 0 12px rgba(var(--t-rgb), .55);
  opacity: 0;
  animation: ctaPingRing 1.6s cubic-bezier(0,.55,.45,1) infinite;
  pointer-events: none;
}
@keyframes ctaPingRing {
  0%   { transform: scale(1);    opacity: .9; }
  75%  { transform: scale(1.5);  opacity: 0; }
  100% { transform: scale(1.5);  opacity: 0; }
}

/* 6e. Social links (Twitter/Facebook etc.): flat, especially on
   touch/mobile where :hover never fires. Give the icons a much
   bigger, bouncier, continuous float + spin + glow-trail so the row
   reads as alive without depending on hover -- not a tiny 2px wobble
   -- and swap the flat single-tone background for an animated
   gradient sheen that drifts on its own. */
.site-page-clean .site-social-inline-btn {
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
  background-size: 220% 220% !important;
  animation: socialBtnSheen 4s ease-in-out infinite;
}
.site-page-clean .site-social-inline-btn:nth-child(2) { animation-delay: .5s; }
.site-page-clean .site-social-inline-btn:nth-child(3) { animation-delay: 1s; }
.site-page-clean .site-social-inline-btn:nth-child(4) { animation-delay: 1.5s; }
@keyframes socialBtnSheen {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.site-page-clean .site-social-inline-icon {
  animation: socialIconFloat 1.9s ease-in-out infinite;
  filter: drop-shadow(0 0 0 rgba(var(--t-rgb), 0));
}
.site-page-clean .site-social-inline-btn:nth-child(2) .site-social-inline-icon { animation-delay: .3s; }
.site-page-clean .site-social-inline-btn:nth-child(3) .site-social-inline-icon { animation-delay: .6s; }
.site-page-clean .site-social-inline-btn:nth-child(4) .site-social-inline-icon { animation-delay: .9s; }
@keyframes socialIconFloat {
  0%, 100% { transform: translateY(0)    rotate(0deg)   scale(1);   filter: drop-shadow(0 0 0 rgba(var(--t-rgb), 0)); }
  50%      { transform: translateY(-5px) rotate(-16deg) scale(1.18); filter: drop-shadow(0 0 6px rgba(var(--t-rgb), .85)); }
}

/* 6f. Aktivitas Terbaru: owner wants real continuous movement, not
   hover-only zoom or static glow. Brighter, faster, multi-colour
   diagonal light-sweep band drifting across each thumbnail on a
   loop, PLUS a continuously pulsing glow frame around the card --
   two layered motions, genuine movement -- via ::before (free on
   .network-blog-thumb) and box-shadow (on the thumb itself, which
   has no existing animation on that property) so neither touches
   .network-blog-thumb img's transform and the existing working
   hover-zoom stays completely intact. The UNGGULAN badge (z-index:3)
   sits above the sweep (z-index:1). */
.site-page-clean .network-blog-thumb {
  animation: thumbFramePulse 2.6s ease-in-out infinite;
}
@keyframes thumbFramePulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(var(--t-rgb), .25), 0 0 0 rgba(var(--t-rgb), 0); }
  50%      { box-shadow: inset 0 0 0 1.5px rgba(var(--t-rgb), .65), 0 0 16px rgba(var(--t-rgb), .45); }
}
.site-page-clean .network-blog-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.28) 48%, rgba(var(--t-rgb), 0.35) 52%, transparent 62%);
  transform: translateX(-130%);
  animation: thumbLightSweep 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes thumbLightSweep {
  0%, 25% { transform: translateX(-130%); }
  100%    { transform: translateX(130%); }
}

@media (prefers-reduced-motion: reduce) {
  .site-page-clean .site-brand-copy h2,
  .site-page-clean .site-stat-label::before,
  .site-page-clean .site-stat-value,
  .site-page-clean .site-main-cta::before,
  .site-page-clean .site-social-inline-btn,
  .site-page-clean .site-social-inline-icon,
  .site-page-clean .network-blog-thumb,
  .site-page-clean .network-blog-thumb::before {
    animation: none !important;
  }
}
/* -- END SITE DETAIL PAGE FIXES (v2) -- */

/* ═══════════════════════════════════════════════════════════
   FEATURED PROMOTIONS — new visual layer (keeps original JS)
   ═══════════════════════════════════════════════════════════ */

/* HOT PROMO angled badge */
.fp-badge-star {
  position:absolute;
  top:0;left:0;
  z-index:12;
  padding:8px 26px 8px 14px;
  background:#ffb020;
  color:#3a2400;
  font-size:10px;
  font-weight:900;
  letter-spacing:.6px;
  white-space:nowrap;
  clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%);
  animation:fpGlow 1.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes fpGlow{
  0%,100%{filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));}
  50%{filter:drop-shadow(0 2px 5px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(255,176,32,.9));}
}
@media(prefers-reduced-motion:reduce){.fp-badge-star{animation:none;}}

/* Gradient shade overlay per slide (pointer-events:none so clicks pass through) */
.fp-shade{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,0) 46%);
  pointer-events:none;
  z-index:2;
}

/* Site name badge — bottom-left angled pill */
/* fp-pill: same style as pg-pill, sits top-left of featured slide */
.fp-pill{
  position:absolute;bottom:10px;left:10px;
  max-width:calc(100% - 20px);
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(8,16,26,.72);
  border:0.5px solid rgba(255,255,255,.14);
  border-radius:20px;
  padding:3px 10px 3px 3px;
  z-index:4;
  text-decoration:none;
  transition:background .18s;
}
.fp-pill:hover{background:rgba(8,16,26,.92);}
.fp-pill>span{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0;color:#f0f4f8;font-size:11px;font-weight:500;
}
#featured .slide .fp-pill img{
  width:18px!important;height:18px!important;
  border-radius:50%!important;object-fit:contain!important;
  flex-shrink:0;
}

/* Move dots INSIDE hero-slider-wrap (now absolutely overlaid, bottom-right) */
.hero-slider-wrap{position:relative;}
.hero-slider-wrap .dots{
  position:absolute;
  bottom:14px;right:14px;
  z-index:10;
  display:flex;align-items:flex-end;gap:5px;
  margin:0;
  pointer-events:auto;
}
/* Tick-bar style indicators (override standard pill dots) */
.hero-slider-wrap .dot{
  width:3px!important;
  height:14px!important;
  border-radius:2px!important;
  background:rgba(255,255,255,.30)!important;
  box-shadow:none!important;
  padding:0;border:none;
  cursor:pointer;
  transition:background .2s,height .2s;
}
.hero-slider-wrap .dot.active{
  background:var(--cyan)!important;
  height:20px!important;
}

/* Hero arrows: hidden by default, fade in on hover (desktop); always visible on touch */
.hero-slider-wrap .hero-arrow{opacity:0;transition:opacity .2s,background .2s,border-color .2s;}
@media(hover:hover) and (pointer:fine){
  .hero-slider-wrap:hover .hero-arrow{opacity:1;}
}
@media(max-width:900px){
  .hero-slider-wrap .hero-arrow{opacity:.55;}
}

/* ═══════════════════════════════════════════════════════════
   AKTIVITAS TERBARU — restyle cards to match new design lang
   ═══════════════════════════════════════════════════════════ */

/* Square 1:1 image area (was 16:9) */
.mini-slider{
  aspect-ratio:1/1!important;
}
/* Fill the square with cover (was contain) */
.mini-slide{
  object-fit:cover!important;
  object-position:center top!important;
}
/* Gradient shade at bottom of image */
.mini-slider::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,8,18,.75) 0%,rgba(4,8,18,0) 55%);
  pointer-events:none;z-index:3;
  border-radius:inherit;
}
/* Mini arrows sit above the shade */
.mini-arrow{z-index:5!important;}

/* Card: darker background matching mockup palette */
.site-promo-card.inner{
  background:rgba(10,18,36,.92)!important;
  border-color:rgba(28,56,88,.85)!important;
}
.site-promo-card.inner:hover{
  border-color:rgba(54,227,255,.22)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.45),0 0 0 1px rgba(54,227,255,.12)!important;
}

/* card-header: compact pill row */
.card-header{
  background:rgba(255,255,255,.035);
  border-radius:8px;
  padding:6px 8px!important;
  margin-bottom:8px!important;
  border:1px solid rgba(255,255,255,.06);
}
.site-badge{
  width:28px!important;height:28px!important;
}
.card-header h3{
  font-size:10px!important;
}

/* Mini-meta: tighten and style to match mockup title overlay feel */
.mini-meta{
  margin-top:6px!important;
  font-size:10px!important;
  color:rgba(200,220,240,.75)!important;
}
.mini-meta span:first-child{
  font-weight:600;
  color:rgba(220,235,255,.88)!important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.35;
}

/* ═══════════════════════════════════════════════════════════
   FEATURED PROMOTIONS — swap distort anim for mockup skew+fade
   ═══════════════════════════════════════════════════════════ */
#featured .slide{
  animation:none!important;
  opacity:0;
  transform:translateX(4%) skewX(4deg) scale(1.02);
  transition:opacity .45s cubic-bezier(.4,0,.2,1),transform .45s cubic-bezier(.4,0,.2,1)!important;
  filter:none!important;
}
#featured .slide.active{
  animation:none!important;
  opacity:1;
  transform:none;
  filter:none!important;
}
#featured .slide.is-leaving{
  animation:none!important;
  opacity:0;
  transform:translateX(-4%) skewX(-4deg) scale(1.02);
  filter:none!important;
}

/* ═══════════════════════════════════════════════════════════
   AKTIVITAS TERBARU — pg-outer continuous ticker
   ═══════════════════════════════════════════════════════════ */
.pg-outer{
  --per-page:3;
  position:relative;
  overflow:hidden;
  border-radius:10px;
  touch-action:pan-y;
  cursor:grab;
  contain:content;
}
.pg-outer.dragging{cursor:grabbing;user-select:none;}

.pg-track{
  display:flex;
  gap:10px;
  will-change:transform;
}

.pg-card{
  flex:0 0 calc((100% - (var(--per-page) - 1)*10px) / var(--per-page));
  min-width:0;
  background:#0f1f30;
  border-radius:10px;
  border:0.5px solid #1e3a52;
  overflow:hidden;
  cursor:pointer;
  outline:none;
  position:relative;
}

.pg-card:focus-visible{outline:2px solid rgba(54,227,255,.6);outline-offset:-2px;}

.pg-img{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#080e1c;
}

/* slides */
.pg-slide{
  position:absolute;inset:0;
  opacity:0;
  pointer-events:none;
  transform:translateX(20px) scale(1.04);
  transition:transform .55s cubic-bezier(.22,.68,.36,1),opacity .45s ease;
  z-index:1;
}
.pg-slide.active{opacity:1;transform:none;pointer-events:auto;}
.pg-slide.out{
  opacity:0;
  transform:translateX(-20px) scale(.97);
  transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .35s ease;
}
@media(prefers-reduced-motion:reduce){
  .pg-slide,.pg-slide.active,.pg-slide.out{transition:none;transform:none;}
}

/* image link inside slide */
.pg-slide>a{
  position:absolute;inset:0;display:block;z-index:1;
}
.pg-slide>a>img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
}
/* title text overlay */
.pg-slide>span{
  position:absolute;bottom:0;left:0;right:0;
  z-index:2;
  padding:28px 10px 10px;
  background:linear-gradient(to top,rgba(0,0,0,.78) 0%,transparent 100%);
  color:#f0f4f8;
  font-size:clamp(11px,2.8vw,13px);
  font-weight:500;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  pointer-events:none;
}
/* empty card label */
.pg-empty-label{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.35);font-size:11px;
  pointer-events:none;
}

/* pill — top-left site logo+name */
.pg-pill{
  position:absolute;top:8px;left:8px;
  max-width:calc(100% - 16px);
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(8,16,26,.72);
  border:0.5px solid rgba(255,255,255,.14);
  border-radius:20px;
  padding:3px 10px 3px 3px;
  z-index:3;
  text-decoration:none;
  transition:background .18s;
}
.pg-pill:hover{background:rgba(8,16,26,.92);}
.pg-pill>span{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0;color:#f0f4f8;font-size:11px;font-weight:500;
}
.pg-pill-ini{
  width:18px;height:18px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:8px;font-weight:700;color:#0a1420;
}

/* nav arrows */
.pg-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;
  background:rgba(10,20,32,.85);border:0.5px solid rgba(44,88,120,.8);
  color:rgba(207,227,242,.9);font-size:12px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:6;opacity:0;
  transition:opacity .2s,background .2s;
  line-height:1;padding:0;
}
.pg-outer:hover .pg-nav{opacity:1;}
.pg-outer.touch .pg-nav{opacity:.55;width:38px;height:38px;}
.pg-nav:hover{background:rgba(27,75,107,.9);}
.pg-prev{left:6px;}
.pg-next{right:6px;}

/* responsive */
@media(max-width:640px){
  .pg-outer{--per-page:2;}
  .pg-outer.touch .pg-nav{opacity:.6;}
}
@media(max-width:380px){
  .pg-outer{--per-page:1;}
}

/* ═══════════════════════════════════════════════════════════
   ROOM RESULT — sidebar card slider (zoom-dissolve transition)
   ═══════════════════════════════════════════════════════════ */
.rr-home-section .section-head{display:flex;align-items:center;justify-content:space-between;}
.rr-view-all{
  font-size:10px;font-weight:700;letter-spacing:.05em;
  color:var(--cyan);text-decoration:none;
  padding:3px 8px;border-radius:6px;
  border:1px solid rgba(54,227,255,.2);
  background:rgba(54,227,255,.06);
  transition:background .18s,border-color .18s;
  white-space:nowrap;
}
.rr-view-all:hover{background:rgba(54,227,255,.14);border-color:rgba(54,227,255,.4);}

/* Slider: grid-stack so all cards overlap; height = tallest card */
.rr-home-slider{
  display:grid;
  border-radius:10px;
  overflow:hidden;
  margin-top:10px;
}
.rr-home-card{
  grid-area:1/1;
  opacity:0;
  transform:scale(1.06);
  transition:opacity .6s ease,transform .65s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
  border-radius:10px;
  overflow:hidden;
  background:rgba(8,16,30,.7);
  border:0.5px solid rgba(255,255,255,.07);
}
.rr-home-card.active{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}
/* out state: zoom + fade away */
.rr-home-card.rr-out{
  opacity:0;
  transform:scale(.94);
  transition:opacity .5s ease,transform .55s cubic-bezier(.4,0,.2,1);
}

/* Card image */
.rr-home-img{
  width:100%;overflow:hidden;
  border-radius:10px 10px 0 0;
  background:#080e1c;
  max-height:160px;
}
.rr-home-img img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  display:block;max-height:160px;
}

/* Card body */
.rr-home-body{
  padding:10px 12px 12px;
  display:flex;flex-direction:column;gap:6px;
}
.rr-home-market{
  font-size:13px;font-weight:800;letter-spacing:.06em;
  color:#fff;text-transform:uppercase;
  font-family:'Orbitron',sans-serif;
  line-height:1.2;
}
.rr-home-date{
  font-size:9px;color:rgba(255,255,255,.45);letter-spacing:.04em;
  text-transform:uppercase;
}

/* Result number block */
.rr-home-num-block{
  display:flex;flex-direction:column;gap:2px;
  background:rgba(54,227,255,.05);
  border:1px solid rgba(54,227,255,.12);
  border-radius:8px;
  padding:8px 10px;
  margin-top:2px;
}
.rr-home-num-label{
  font-size:8px;font-weight:700;letter-spacing:.1em;
  color:var(--cyan);text-transform:uppercase;
}
.rr-home-num{
  font-family:'Orbitron',sans-serif;
  font-size:clamp(22px,6vw,28px);
  font-weight:900;
  letter-spacing:.12em;
  color:#fff;
  line-height:1.1;
  text-shadow:0 0 18px rgba(54,227,255,.45);
}

/* Shio row */
.rr-home-shio-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
}
.rr-home-shio-label{
  font-size:9px;font-weight:700;letter-spacing:.08em;
  color:rgba(255,255,255,.4);text-transform:uppercase;
}
.rr-home-shio-val{
  font-size:12px;font-weight:700;
  color:#fff;letter-spacing:.04em;
  text-transform:capitalize;
}

/* Dot indicators */
.rr-home-dots{
  display:flex;justify-content:center;gap:5px;
  margin-top:8px;
}
.rr-dot{
  width:5px;height:5px;border-radius:50%;border:none;padding:0;
  background:rgba(255,255,255,.2);cursor:pointer;
  transition:background .2s,transform .2s;
}
.rr-dot.active{
  background:var(--cyan);
  transform:scale(1.3);
  box-shadow:0 0 6px rgba(54,227,255,.5);
}

/* ═══════════════════════════════════════════════════════════
   FIX: "Semua" → arrow icon button (matches card-corner-link)
   ═══════════════════════════════════════════════════════════ */
.rr-view-all{
  width:24px!important;height:24px!important;
  border-radius:6px!important;flex-shrink:0!important;
  display:grid!important;place-items:center!important;
  font-size:14px!important;
  background:rgba(54,227,255,.08)!important;
  border:1px solid rgba(54,227,255,.15)!important;
  color:var(--cyan)!important;
  transition:background .18s,transform .18s!important;
  text-decoration:none!important;
  padding:0!important;
  font-weight:700!important;
}
.rr-view-all:hover{background:rgba(54,227,255,.20)!important;transform:translate(1px,-1px)!important;}

/* container-size block removed */

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — all new homepage sections
   ═══════════════════════════════════════════════════════════ */

/* ── 980px: sidebar goes 2-col (existing), restore flex for mobile ── */
@media(max-width:980px){.pg-outer{--per-page:2;}}

/* ── 680px: sidebar 1-col ── */
@media(max-width:680px){
  .sidebar{grid-template-columns:1fr!important;}
}

/* ── 720px: mobile phones ── */
@media(max-width:720px){
  /* Featured Promotions — taller aspect on mobile */
  #featured .slides{aspect-ratio:4/3!important;max-height:none!important;}
  /* HOT PROMO badge smaller */
  .fp-badge-star{font-size:9px!important;padding:7px 20px 7px 12px!important;}
  /* Site badge smaller */
  .fp-pill{padding:2px 8px 2px 2px!important;}
  .fp-pill>span{font-size:10px!important;}
  /* Tick dots size */
  .hero-slider-wrap .dots{bottom:10px!important;right:10px!important;}

  /* pg-outer ticker — 1 card on small phones, 2 on mid */
  .pg-outer{--per-page:2;}
  .network-carousel-panel .section-head{padding-bottom:8px;}

  /* Room Result mobile */
  .rr-home-img{max-height:130px!important;}
  .rr-home-img img{max-height:130px!important;}
  .rr-home-market{font-size:11px!important;}
  .rr-home-num{font-size:20px!important;}
  .rr-home-body{padding:8px 10px 10px!important;gap:5px!important;}
}

/* ── 480px: very small ── */
@media(max-width:480px){
  #featured .slides{aspect-ratio:1/1!important;}
  .pg-outer{--per-page:1!important;}
  .fp-badge-star{font-size:8px!important;padding:6px 18px 6px 10px!important;}
  .rr-home-num{font-size:18px!important;}
}

/* 680 flex block removed */

/* ═══════════════════════════════════════════════════════════
   ROOM RESULT — 2-market-per-slide compact design (no image)
   ═══════════════════════════════════════════════════════════ */

/* Remove old image styles — no-op override */
.rr-home-img{display:none!important;}

/* Card: just padding, no fixed height */
.rr-home-card{
  padding:10px!important;
  gap:8px!important;
  display:none;
  flex-direction:column;
}
.rr-home-card.active{
  display:flex!important;
}
.rr-home-card.rr-out{
  display:none!important;
}

/* Slider: not grid — just block, height = active card */
.rr-home-slider{
  display:block!important;
  min-height:unset!important;
  flex:unset!important;
  border-radius:0!important;
  overflow:visible!important;
  margin-top:10px;
  position:relative;
}

/* Each market row — one result */
.rr-market-row{
  padding:9px 10px;
  border-radius:8px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;gap:6px;
}
.rr-market-row+.rr-market-row{margin-top:8px;}

.rr-market-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:6px;
}
.rr-market-name{
  font-size:11px;font-weight:800;letter-spacing:.05em;
  color:#fff;font-family:'Orbitron',sans-serif;text-transform:uppercase;
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rr-market-date{
  font-size:8px;color:rgba(255,255,255,.38);white-space:nowrap;flex-shrink:0;
}

.rr-market-result{
  display:flex;align-items:stretch;gap:6px;
}
.rr-market-num-wrap{
  flex:1;
  background:rgba(54,227,255,.06);
  border:1px solid rgba(54,227,255,.14);
  border-radius:6px;padding:5px 8px;
  display:flex;flex-direction:column;gap:1px;
}
.rr-market-num-label{
  font-size:7px;font-weight:700;letter-spacing:.1em;
  color:var(--cyan);text-transform:uppercase;
}
.rr-market-num{
  font-family:'Orbitron',sans-serif;
  font-size:22px;font-weight:900;letter-spacing:.1em;
  color:#fff;line-height:1.1;
  text-shadow:0 0 14px rgba(54,227,255,.4);
}
.rr-market-shio-wrap{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:6px;padding:5px 8px;
  display:flex;flex-direction:column;gap:1px;
  min-width:56px;text-align:center;justify-content:center;
}
.rr-market-shio-label{
  font-size:7px;font-weight:700;letter-spacing:.08em;
  color:rgba(255,255,255,.38);text-transform:uppercase;
}
.rr-market-shio-val{
  font-size:11px;font-weight:700;color:#fff;text-transform:capitalize;
}

/* Dissolve transition for 2-per-slide — use CSS animation via JS classes */
/* active = visible, rr-out = fading out (handled by display:none now — instant) */

/* ── Correct card display: keep grid-area stacking + opacity dissolve ── */
.rr-home-slider{
  display:grid!important;
  position:relative!important;
  overflow:hidden!important;
  border-radius:10px!important;
  margin-top:10px;
}
.rr-home-card{
  grid-area:1/1!important;
  display:flex!important;
  flex-direction:column!important;
  padding:10px!important;
  gap:8px!important;
  opacity:0!important;
  transform:scale(1.05)!important;
  pointer-events:none!important;
  transition:opacity .55s ease,transform .6s cubic-bezier(.22,1,.36,1)!important;
  background:transparent!important;
  border:none!important;
}
.rr-home-card.active{
  opacity:1!important;
  transform:scale(1)!important;
  pointer-events:auto!important;
}
.rr-home-card.rr-out{
  opacity:0!important;
  transform:scale(.95)!important;
  transition:opacity .45s ease,transform .5s cubic-bezier(.4,0,.2,1)!important;
}

/* ══════════════════════════════════════════════════════════════
   ROOM RESULT — stretch to match Aktivitas Terbaru height
   ══════════════════════════════════════════════════════════════ */

/* Grid: stretch both columns to equal height (tallest wins = Aktivitas Terbaru) */
.main-layout{align-items:stretch!important;}

/* Sidebar fills grid cell, stacks About + Room Result */
.sidebar{height:100%!important;box-sizing:border-box!important;}

/* Room Result card expands to fill remaining sidebar space */
.rr-home-section{
  flex:1!important;
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
}

/* Slider fills Room Result card */
.rr-home-slider{
  flex:1!important;
  min-height:0!important;
}

/* Each stacked card fills the slider grid cell */
.rr-home-card{
  height:100%!important;
  box-sizing:border-box!important;
}

/* Mobile: revert stretch (single column, no height matching needed) */
@media(max-width:980px){
  .main-layout{align-items:start!important;}
  .sidebar{height:auto!important;}
  .rr-home-section{flex:unset!important;}
  .rr-home-slider{flex:unset!important;}
  .rr-home-card{height:auto!important;}
}

/* ══════════════════════════════════════════════════════════════
   ROOM RESULT — center content within stretched slider (v11 fix)
   ══════════════════════════════════════════════════════════════ */

/* Slider stretches, centers the stacked cards vertically */
.rr-home-slider{
  align-content:center!important;
  align-items:center!important;
}

/* Card: natural content height, centered in slider cell */
.rr-home-card{
  height:auto!important;
  width:100%!important;
  align-self:center!important;
}

/* ══════════════════════════════════════════════════════════════
   AKTIVITAS TERBARU — text weight + slide overlay (v14)
   ══════════════════════════════════════════════════════════════ */

/* Gradient overlay at bottom of each slide */
.pg-slide::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:55%;
  background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 60%, transparent 100%);
  pointer-events:none;
  z-index:2;
}

/* Thicker, more readable description text */
.pg-slide span{
  font-weight:700!important;
  font-size:10px!important;
  letter-spacing:.02em!important;
  text-shadow:0 1px 4px rgba(0,0,0,.9), 0 0 12px rgba(0,0,0,.7)!important;
  line-height:1.35!important;
  z-index:3;
  position:relative;
}

/* Card cursor pointer since it's now clickable */
.pg-card{cursor:pointer;user-select:none;-webkit-user-select:none;}
.pg-card .pg-img img{-webkit-user-drag:none;user-drag:none;pointer-events:none;}
/* Image as direct child of pg-slide (no <a> wrapper) */
.pg-slide>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;
}

/* ══ v14 CORRECTION: restore span position, remove bad override ══ */
.pg-slide::after{ display:none!important; } /* remove redundant overlay — span already has gradient */
.pg-slide span, .pg-slide>span{
  position:absolute!important;
  bottom:0!important; left:0!important; right:0!important;
  font-weight:700!important;
  font-size:clamp(11px,2.8vw,13px)!important;
  text-shadow:0 1px 6px rgba(0,0,0,.95)!important;
  z-index:3!important;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — full pass (v16)
   ══════════════════════════════════════════════════════════════ */

/* ── 980px: tablet — main-layout stacks, sidebar 2-col ── */
@media(max-width:980px){
  /* pg-outer: 3 cards still (now full-width main col) */
  .pg-outer{--per-page:3;}

  /* Room Result in 2-col sidebar grid: compact but readable */
  .rr-market-name{font-size:10px!important;}
  .rr-market-num{font-size:18px!important;letter-spacing:.06em!important;}
  .rr-market-shio-val{font-size:10px!important;}
  .rr-market-result{gap:4px!important;}
  .rr-market-num-wrap,.rr-market-shio-wrap{padding:4px 6px!important;}
  .rr-market-row{padding:7px 8px!important;gap:5px!important;}
}

/* ── 768px: smaller tablets ── */
@media(max-width:768px){
  .pg-outer{--per-page:2;}

  /* Featured Promotions */
  #featured .slides{aspect-ratio:16/9!important;max-height:260px!important;}

  /* Room Result: ensure content stacks cleanly */
  .rr-market-head{flex-wrap:wrap;gap:2px!important;}
  .rr-market-date{font-size:7px!important;}
}

/* ── 680px: sidebar goes 1-col ── */
@media(max-width:680px){
  /* Room Result full-width — restore comfortable sizing */
  .rr-market-name{font-size:12px!important;}
  .rr-market-num{font-size:22px!important;letter-spacing:.1em!important;}
  .rr-market-shio-val{font-size:12px!important;}
  .rr-market-num-wrap,.rr-market-shio-wrap{padding:6px 10px!important;}
  .rr-market-row{padding:10px 12px!important;gap:7px!important;}
  .rr-market-result{gap:8px!important;}

  /* Stack Room Result slider vertically if needed */
  .rr-home-section{min-height:0!important;}

  /* pg-outer: 2 cards */
  .pg-outer{--per-page:2;}

  /* Featured: taller on portrait phone */
  #featured .slides{aspect-ratio:4/3!important;max-height:none!important;}
  .fp-badge-star{font-size:9px!important;padding:7px 18px 7px 10px!important;}
}

/* ── 480px: small phones ── */
@media(max-width:480px){
  /* pg-outer: 1 card */
  .pg-outer{--per-page:1!important;}

  /* Featured: square */
  #featured .slides{aspect-ratio:1/1!important;}
  .fp-badge-star{font-size:8px!important;padding:6px 16px 6px 9px!important;}

  /* Room Result: large, easy to read */
  .rr-market-name{font-size:13px!important;}
  .rr-market-num{
    font-size:26px!important;
    letter-spacing:.12em!important;
    text-shadow:0 0 18px rgba(54,227,255,.55)!important;
  }
  .rr-market-num-label,.rr-market-shio-label{font-size:8px!important;}
  .rr-market-shio-val{font-size:13px!important;font-weight:800!important;}
  .rr-market-shio-wrap{min-width:64px!important;}
  .rr-market-row{padding:11px 12px!important;gap:8px!important;border-radius:10px!important;}
  .rr-home-section .section-head :is(h1,h2){font-size:13px!important;}

  /* Dots */
  .rr-home-dots{margin-top:10px!important;}
  .rr-dot{width:6px!important;height:6px!important;}
}

/* ── 380px: very small ── */
@media(max-width:380px){
  .rr-market-num{font-size:22px!important;}
  .pg-outer{--per-page:1!important;}
  .rr-market-result{flex-direction:column!important;gap:5px!important;}
  .rr-market-shio-wrap{min-width:unset!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;}
}

/* ══════════════════════════════════════════════════════════════
   MOBILE FINAL OVERRIDE — v17 (single authoritative block)
   ══════════════════════════════════════════════════════════════ */

/* ── Tablet 980px: main stacks, sidebar 2-col ── */
@media(max-width:980px){
  /* Room Result first in sidebar (more useful than About on mobile) */
  .rr-home-section{order:-1!important;}
  /* pg-outer 2 cards (full-width column now) */
  .pg-outer{--per-page:2!important;}
  /* Cap Aktivitas card image height */
  .pg-img{max-height:220px!important;}
}

/* ── 720px: mid phones ── */
@media(max-width:720px){
  /* Featured: 16:9 capped — never square */
  #featured .slides{aspect-ratio:16/9!important;max-height:230px!important;}
  /* Aktivitas: 2 cards, shorter images */
  .pg-outer{--per-page:2!important;}
  .pg-img{max-height:190px!important;}
}

/* ── 480px: small phones ── */
@media(max-width:480px){
  /* Featured: 16:9 still — no square */
  #featured .slides{aspect-ratio:16/9!important;max-height:210px!important;}
  /* Aktivitas: 1 card, reasonable height */
  .pg-outer{--per-page:1!important;}
  .pg-img{max-height:260px!important;}
  /* fp badge smaller */
  .fp-badge-star{font-size:8px!important;padding:6px 16px 6px 9px!important;}
}

/* ── 380px: very small ── */
@media(max-width:380px){
  #featured .slides{max-height:185px!important;}
  .pg-img{max-height:220px!important;}
  .rr-market-result{flex-direction:column!important;gap:5px!important;}
  .rr-market-shio-wrap{flex-direction:row!important;align-items:center!important;justify-content:space-between!important;min-width:unset!important;}
}

/* ══════════════════════════════════════════════════════════════
   MOBILE TARGETED FIXES — v18
   ══════════════════════════════════════════════════════════════ */

@media(max-width:768px){

  /* ① Featured Promotions — slightly smaller, image never cut */
  #featured .slides{
    aspect-ratio:16/9!important;
    max-height:200px!important;
  }

  /* ② Aktivitas Terbaru — strip section padding so carousel fills edge-to-edge,
        remove the visible right gap next to the arrow */
  .network-carousel-panel{padding-left:0!important;padding-right:0!important;}
  .network-carousel-panel .section-head{padding-left:12px!important;padding-right:12px!important;}
  .pg-outer{border-radius:0!important;}
  /* Hide pg-nav arrows on touch (swipe works) */
  .pg-outer .pg-nav{display:none!important;}

  /* ③ Room Result — remove vertical gap between header and first row */
  .rr-home-slider{
    margin-top:4px!important;
    align-content:start!important;
    align-items:start!important;
  }
  .rr-home-section{padding-top:8px!important;padding-bottom:8px!important;}
}

@media(max-width:480px){
  #featured .slides{max-height:180px!important;}
}

/* ══════════════════════════════════════════════════════════════
   AKTIVITAS TERBARU — v19: JS controls per-page, CSS just layout
   ══════════════════════════════════════════════════════════════ */

/* Show nav arrows on mobile (no auto-scroll at 1-card, user needs buttons) */
@media(max-width:768px){
  .pg-outer .pg-nav{display:flex!important;}
  .pg-outer .pg-nav{opacity:.7!important;}
}

/* ══ v20: revert bad padding removal from v18 ══ */
@media(max-width:768px){
  .network-carousel-panel{padding-left:unset!important;padding-right:unset!important;}
  .network-carousel-panel .section-head{padding-left:unset!important;padding-right:unset!important;}
  .pg-outer{border-radius:10px!important;}
}

/* ══ Fix leftover container: restore section padding + constrain pg-outer ══ */
@media(max-width:600px){
  /* Restore section horizontal padding (v18 zeroed it, v20 unset failed) */
  .network-carousel-panel{padding-left:12px!important;padding-right:12px!important;}
  /* Extra margin so pg-outer stays <380px on all phone sizes → computePerPage()=1 */
  .pg-outer{margin-left:8px!important;margin-right:8px!important;}
}

/* Remove bad max-height on pg-img — aspect-ratio:1/1 + max-height constrains width too, leaving right-side gap */
.pg-img{max-height:none!important;}

/* ══ Room Result — compact on mobile ══ */
@media(max-width:980px){
  .rr-market-row{padding:6px 8px!important;gap:4px!important;}
  .rr-market-row+.rr-market-row{margin-top:5px!important;}
  .rr-market-num{font-size:16px!important;letter-spacing:.06em!important;}
  .rr-market-name{font-size:10px!important;}
  .rr-market-date{font-size:7px!important;}
  .rr-market-num-wrap{padding:4px 6px!important;}
  .rr-market-shio-wrap{padding:4px 6px!important;min-width:48px!important;}
  .rr-market-shio-val{font-size:10px!important;}
  .rr-home-slider{margin-top:6px!important;}
}

/* Result Terbaru heading as clickable link */
.rr-title-link{color:inherit;text-decoration:none;}
.rr-title-link:hover{color:var(--cyan);}

/* ══════════════════════════════════════════════════════════════
   MOBILE PERFORMANCE — reduce backdrop-filter blur on old devices
   ══════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  /* Reduce glass blur — from 16px to 4px. Saves huge GPU cost on old phones.
     Background color already provides contrast so appearance stays similar. */
  .glass{
    backdrop-filter:blur(4px) !important;
    -webkit-backdrop-filter:blur(4px) !important;
  }
  /* pg-outer track: GPU layer for smooth swipe */
  .pg-track{
    will-change:transform;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
}

/* ═══════════════════════════════════════════════════════════
   Bukti JP – Transform Slider
═══════════════════════════════════════════════════════════ */
/* .bukti-coverflow-panel legacy rule removed */
/* ── Layout wrapper: main slider (left) + thumbnail rail (right) ── */
.bukti-slider-layout{
  display:block;
  width:100%;
}
@media(min-width:992px){
  .bukti-slider-layout{
    display:flex;
    align-items:stretch;
    gap:10px;
  }
}
.bukti-slider{
  position:relative;
  width:100%;
  border-radius:18px;
  overflow:hidden;
  background:transparent;
  aspect-ratio:1/1;
  transition:opacity .6s ease, transform .3s ease;
}
.bukti-slider.loading{
  opacity:0;
  visibility:hidden;
}
@media(min-width:992px){
  .bukti-slider{
    flex:1 1 78%;
    width:auto;
    aspect-ratio:auto;
    height:min(70vh, 620px);
  }
}
/* Thumbnail rail — shown everywhere now. On phones/tablets it's a horizontal
   scroll strip under the main slide (there's no room beside it); from 992px
   up it becomes the vertical side rail, matching the reference two-panel
   layout. */
.bukti-slider-thumbs{
  display:flex;
  flex-direction:row;
  gap:8px;
  margin-top:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:4px 4px 7px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  transition:opacity .6s ease;
}
.bukti-slider-thumbs.loading{
  opacity:0;
  visibility:hidden;
}
.bukti-slider-thumbs::-webkit-scrollbar{height:5px}
.bukti-slider-thumbs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:999px}
@media(min-width:992px){
  .bukti-slider-thumbs{
    flex-direction:column;
    flex:0 0 20%;
    gap:8px;
    height:min(70vh, 620px);
    margin-top:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:6px 6px 6px 2px;
  }
  .bukti-slider-thumbs::-webkit-scrollbar{width:5px;height:auto}
}
.bukti-slider-thumb{
  position:relative;
  flex:0 0 132px;
  width:132px;
  height:100px;
  border:1px solid color-mix(in srgb, var(--site-accent,#73e6ff) 26%, rgba(255,255,255,.08));
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  padding:0;
  opacity:.42;
  transition:opacity .3s ease, box-shadow .3s ease, border-color .3s ease, transform .2s ease;
  background:rgba(255,255,255,.04);
  box-sizing:border-box;
}
@media(min-width:992px){
  .bukti-slider-thumb{
    flex:1 0 auto;
    width:auto;
    height:auto;
    min-height:96px;
  }
}
.bukti-slider-thumb:hover{opacity:.72}
.bukti-slider-thumb.is-active{
  opacity:1;
  border-color:color-mix(in srgb, var(--site-accent,#73e6ff) 78%, #ffffff 8%);
  box-shadow:0 0 0 2px var(--site-accent,#73e6ff), 0 0 18px var(--site-glow, rgba(115,230,255,.45));
}
.bukti-slider-thumb-imgwrap{
  position:absolute;
  inset:0;
}
.bukti-slider-thumb-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;
}
.bukti-slider-thumb-label{
  position:absolute;
  left:5px;
  bottom:5px;
  right:auto;
  max-width:calc(100% - 10px);
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px 2px 2px;
  border-radius:999px;
  background:rgba(6,8,16,.74);
  border:1px solid color-mix(in srgb, var(--site-accent,#73e6ff) 42%, rgba(255,255,255,.12));
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.bukti-slider-thumb-logo{
  width:16px;height:16px;
  flex:0 0 auto;
  border-radius:50%;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
}
.bukti-slider-thumb-logo img{
  width:100%;height:100%;
  object-fit:contain;
  padding:1.5px;
  box-sizing:border-box;
  display:block;
}
.bukti-slider-thumb-name{
  font-size:10px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--site-accent,#ffffff) 82%, #ffffff 18%);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(min-width:769px) and (max-width:991px){
  .bukti-slider{
    width:min(100%, 540px);
    margin:0 auto;
  }
}
.bukti-slider-track{
  display:flex;
  height:100%;
  transform:translateX(0);
  transition:transform 350ms cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.bukti-slider-track.dragging{transition:none}
.bukti-slide{
  flex:0 0 100%;
  min-width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  background:transparent;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:inherit;
  box-sizing:border-box;
}
.bukti-slide-media{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:scale(1);
  transition:transform 6s ease;
}
/* Ken Burns drift — echoes the interleave-parallax feel of the reference
   slider, without needing Swiper's progress API since our track already
   translates the whole slide. Slow zoom kicks in only on the active slide. */
.bukti-slide.is-active .bukti-slide-media{
  transform:scale(1.06);
}
.bukti-slide-overlay{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:14px 14px 16px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.30) 30%, rgba(0,0,0,.72) 62%, rgba(0,0,0,.86) 100%);
  color:#fff;
}
.bukti-slide-overlay-inner{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  max-width:100%;
  padding:11px 15px 13px;
  border-radius:15px;
  background:linear-gradient(180deg, rgba(10,16,28,.52), rgba(4,8,16,.84));
  border:1px solid color-mix(in srgb, var(--site-accent,#73e6ff) 32%, rgba(255,255,255,.12));
  box-shadow:0 14px 32px rgba(0,0,0,.42), 0 0 24px color-mix(in srgb, var(--site-accent,#73e6ff) 18%, transparent);
  backdrop-filter:blur(12px) saturate(1.15);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);
}
.bukti-slide-brand{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:5px;
}
.bukti-slide-logo{
  width:26px;height:26px;
  flex:0 0 auto;
  border-radius:50%;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  border:1px solid color-mix(in srgb, var(--site-accent,#73e6ff) 46%, rgba(255,255,255,.16));
  box-shadow:0 0 10px color-mix(in srgb, var(--site-accent,#73e6ff) 30%, transparent);
  display:flex;align-items:center;justify-content:center;
}
.bukti-slide-logo img{
  width:100%;height:100%;
  object-fit:contain;
  padding:3px;
  box-sizing:border-box;
  display:block;
}
.bukti-slide-site{
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--site-accent,rgba(190,215,255,.85));
  text-shadow:0 0 8px color-mix(in srgb, var(--site-accent,#73e6ff) 28%, transparent);
  margin-bottom:0;
}
.bukti-slide-title{
  display:block;
  font-size:15px;
  font-weight:700;
  line-height:1.3;
  margin-bottom:4px;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.bukti-slide-amount{
  font-size:13px;
  font-weight:600;
  color:rgba(255,230,140,.95);
  text-shadow:0 1px 3px rgba(0,0,0,.5), 0 0 10px var(--site-glow, rgba(115,230,255,.30));
  margin:0 0 8px;
}
/* Overlay entrance — reference slider's caption slide-up-and-fade, restaged
   on our real site/title/amount/CTA and triggered by .is-active instead of
   Swiper's slideChangeTransitionEnd. */
.bukti-slide-brand,
.bukti-slide-title,
.bukti-slide-amount,
.bukti-slide-overlay .bukti-cek-btn{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .3s ease, transform .5s ease;
}
.bukti-slide-title{transition-delay:.05s}
.bukti-slide-amount{transition-delay:.1s}
.bukti-slide-overlay .bukti-cek-btn{transition-delay:.15s}
.bukti-slide.is-active .bukti-slide-brand,
.bukti-slide.is-active .bukti-slide-title,
.bukti-slide.is-active .bukti-slide-amount,
.bukti-slide.is-active .bukti-slide-overlay .bukti-cek-btn{
  opacity:1;
  transform:translateY(0);
}
@media (max-width:560px){
  .bukti-slide-overlay-inner{padding:9px 12px 11px;border-radius:13px}
  .bukti-slide-logo{width:22px;height:22px}
  .bukti-slide-title{font-size:13.5px}
  .bukti-slide-amount{font-size:12px}
}
/* Arrows */
.bukti-slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;height:40px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,.42);
  color:#fff;
  font-size:24px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:4;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s;
}
.bukti-slider-arrow:hover{background:rgba(0,0,0,.65)}
.bukti-slider-prev{left:10px}
.bukti-slider-next{right:10px}
@media (hover:none) and (pointer:coarse){.bukti-slider-arrow{display:none}}
/* Hover-reveal — arrows stay tucked away until the slider is hovered,
   sliding/fading in like the reference slider's nav buttons. Desktop only;
   touch devices keep the display:none rule above untouched. */
@media (hover:hover){
  .bukti-slider-arrow{
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease, transform .3s ease, background .18s;
  }
  .bukti-slider-prev{transform:translateY(-50%) translateX(-14px)}
  .bukti-slider-next{transform:translateY(-50%) translateX(14px)}
  .bukti-slider:hover .bukti-slider-arrow{
    opacity:1;
    visibility:visible;
  }
  .bukti-slider:hover .bukti-slider-prev,
  .bukti-slider:hover .bukti-slider-next{
    transform:translateY(-50%) translateX(0);
  }
}
/* Dots */
.bukti-slider-dots{
  position:absolute;
  bottom:10px;
  left:0;right:0;
  display:flex;
  justify-content:center;
  gap:6px;
  z-index:4;
  pointer-events:none;
}
.bukti-slider-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.44);
  border:none;
  padding:0;
  cursor:pointer;
  pointer-events:auto;
  transition:background .2s,transform .2s;
}
.bukti-slider-dot.is-active{
  background:#fff;
  transform:scale(1.35);
}
/* Counter: reduce top/bottom space */
.bukti-jp-hero-card{
  padding-top:8px!important;
  padding-bottom:4px!important;
}
.bukti-jp-hero-card .bukti-stat{
  min-height:0!important;
}
@media (max-width:640px){
  .bukti-jp-hero-card{padding-top:4px!important;padding-bottom:2px!important;}
.bukti-jp-hero-card .bukti-jp-stats{margin-top:5px!important}
}

/* === Bukti JP — "Kunjungi Situs" button clarity fix ===
   Inside our new blurred backdrop panels (slide overlay + zoom-modal info),
   the shared .bukti-cek-btn's faint 22%-tint background blended into the
   panel behind it and the icon (colored in the accent) lost contrast against
   an accent-tinted fill. Scoped (not global) so the homepage cards keep their
   existing look — only the button inside these two panels gets a solid,
   higher-contrast treatment. */
.bukti-slide-overlay .bukti-cek-btn-inner,
.bukti-proof-info .bukti-cek-btn-inner{
  padding:7px 14px 7px 12px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--site-accent,#73e6ff) 60%, rgba(6,10,20,.96)), color-mix(in srgb, var(--site-accent,#73e6ff) 34%, rgba(6,10,20,.96)));
  border-color:color-mix(in srgb, var(--site-accent,#73e6ff) 78%, #ffffff 10%);
  box-shadow:0 0 14px color-mix(in srgb, var(--site-accent,#73e6ff) 44%, transparent), inset 0 1px 0 rgba(255,255,255,.18);
}
.bukti-slide-overlay .bukti-cek-btn-icon,
.bukti-proof-info .bukti-cek-btn-icon{
  color:#fff;
  filter:drop-shadow(0 0 4px var(--site-glow, rgba(115,230,255,.6)));
}
.bukti-slide-overlay .bukti-cek-btn-text,
.bukti-proof-info .bukti-cek-btn-text{
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.95);
}
.bukti-slide-overlay .bukti-cek-btn:hover .bukti-cek-btn-inner,
.bukti-proof-info .bukti-cek-btn:hover .bukti-cek-btn-inner{
  background:linear-gradient(135deg, color-mix(in srgb, var(--site-accent,#73e6ff) 74%, rgba(6,10,20,.9)), color-mix(in srgb, var(--site-accent,#73e6ff) 46%, rgba(6,10,20,.9)));
  box-shadow:0 0 22px color-mix(in srgb, var(--site-accent,#73e6ff) 58%, transparent), 0 4px 14px rgba(0,0,0,.4);
}
@media (max-width:560px){
  .bukti-slide-overlay .bukti-cek-btn-inner,
  .bukti-proof-info .bukti-cek-btn-inner{
    padding:6px 12px 6px 10px;
  }
}

/* ── Buku Mimpi perf: the infinite "alive" glow/shine loops animated
      box-shadows and filters nonstop — expensive repaints on mobile.
      Elements keep their styled resting state, just without the loops. ── */
.buku-mimpi-search-input-wrap,
.buku-mimpi-pagination,
.buku-mimpi-page-info,
.buku-mimpi-table thead th{animation:none!important}
.buku-mimpi-search-submit,.buku-mimpi-clear-link,.buku-mimpi-page-btn{animation:none!important}
.buku-mimpi-search-submit::after,.buku-mimpi-clear-link::after,.buku-mimpi-page-btn::after{animation:none!important;opacity:0!important}