/* MUJA PRIME LiquidGlass Upgrade
   Layer ini hanya menyentuh tampilan. Tidak mengubah fungsi/order/payment/Firebase. */
:root {
  --lg-bg-0: #070711;
  --lg-bg-1: #0c1020;
  --lg-ink: #f8fbff;
  --lg-muted: rgba(235,242,255,.68);
  --lg-hot: #ff6b2b;
  --lg-gold: #f7d46a;
  --lg-cyan: #40e9ff;
  --lg-violet: #8b5cf6;
  --lg-green: #34e5b4;
  --lg-glass: rgba(255,255,255,.085);
  --lg-glass-strong: rgba(255,255,255,.14);
  --lg-stroke: rgba(255,255,255,.16);
  --lg-stroke-hot: rgba(255,107,43,.36);
  --lg-shadow: 0 24px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.15);
  --lg-blur: 22px;
  --lg-radius: 24px;
  --lg-fast: 220ms cubic-bezier(.2,.8,.2,1);
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 10% -10%, rgba(255,107,43,.22), transparent 36rem),
    radial-gradient(circle at 92% 8%, rgba(64,233,255,.16), transparent 32rem),
    radial-gradient(circle at 20% 92%, rgba(139,92,246,.16), transparent 34rem),
    linear-gradient(145deg, var(--lg-bg-0), var(--lg-bg-1) 55%, #080812) !important;
  color: var(--lg-ink);
  isolation: isolate;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 44%, rgba(255,255,255,.05) 48%, transparent 54%),
    radial-gradient(circle at 50% 0, rgba(255,255,255,.08), transparent 30rem),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
  opacity: .46;
}

body.light-mode {
  --lg-ink: #121520;
  --lg-muted: rgba(22,25,38,.68);
  --lg-glass: rgba(255,255,255,.64);
  --lg-glass-strong: rgba(255,255,255,.78);
  --lg-stroke: rgba(20,24,40,.12);
  --lg-shadow: 0 18px 55px rgba(30,35,70,.14), inset 0 1px 0 rgba(255,255,255,.7);
  background:
    radial-gradient(circle at 8% 0%, rgba(255,107,43,.16), transparent 34rem),
    radial-gradient(circle at 90% 10%, rgba(64,233,255,.16), transparent 30rem),
    linear-gradient(145deg, #f7f7ff, #eef3ff 58%, #fff8ef) !important;
}
body.light-mode::after { mix-blend-mode: normal; opacity: .28; }

:where(.container,.main-content,.page-wrap,.app,.admin-container,.admin-layout,.content,.content-wrap,.dashboard,.payment-container,.products-container,.profile-container) {
  position: relative;
  z-index: 1;
}

/* Liquid glass surfaces */
:where(
  .muja-header,.mobile-nav,.bottom-nav,.sidebar-content,.cart-sidebar,.cart-header,
  .hero-banner,.hero-card,.card,.stat-card,.info-card,.product-card,.collection-card,.price-card,.detail-card,
  .payment-card,.payment-box,.payment-detail,.upload-area,.summary-card,.method-card,.modal-box,.registration-dialog,
  .form-card,.saved-item,.info-row,.leader-card,.rank-card,.contact-card,.about-card,.feature-card,.toast-notif,
  .ai-chat-popup,.ai-chat-widget button,.login-wrap,.admin-card,.table-wrap,.section-card,.search-wrap,.empty-state,
  .qr-card,.card-header,.product-item,.order-card,.glass,.glass-card
) {
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.045)) !important;
  border: 1px solid var(--lg-stroke) !important;
  box-shadow: var(--lg-shadow) !important;
  backdrop-filter: blur(var(--lg-blur)) saturate(150%) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(150%) !important;
}

:where(.muja-header,.mobile-nav,.bottom-nav) {
  background: linear-gradient(135deg, rgba(9,10,18,.82), rgba(17,18,34,.56)) !important;
  border-color: rgba(255,255,255,.18) !important;
}
body.light-mode :where(.muja-header,.mobile-nav,.bottom-nav) {
  background: linear-gradient(135deg, rgb(168 168 168 / 82%), rgb(187 187 187 / 58%)) !important;
}

:where(.card,.product-card,.collection-card,.price-card,.payment-card,.admin-card,.stat-card,.info-card,.method-card,.saved-item,.leader-card,.rank-card) {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}
:where(.card,.product-card,.collection-card,.price-card,.payment-card,.admin-card,.stat-card,.info-card,.method-card,.saved-item,.leader-card,.rank-card)::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), transparent 26%),
    radial-gradient(circle at 18% 0%, rgba(255,107,43,.16), transparent 30%),
    radial-gradient(circle at 92% 18%, rgba(64,233,255,.12), transparent 28%);
  opacity: .78;
}
:where(.product-card,.collection-card,.saved-item,.method-card,.mobile-nav-item,.nav-item,.btn,.btn-primary,.submit-btn,.m-btn,.checkout-btn,.product-add-cart,.theme-toggle,.menu-toggle,.hamburger-btn) {
  transition: transform var(--lg-fast), box-shadow var(--lg-fast), border-color var(--lg-fast), background var(--lg-fast), color var(--lg-fast), opacity var(--lg-fast);
}
:where(.product-card,.collection-card,.saved-item,.method-card,.btn,.btn-primary,.submit-btn,.m-btn,.checkout-btn,.product-add-cart,.theme-toggle,.menu-toggle,.hamburger-btn):hover {
  transform: translateY(-3px) scale(1.01);
  border-color: var(--lg-stroke-hot) !important;
  box-shadow: 0 18px 56px rgba(255,107,43,.18), var(--lg-shadow) !important;
}

/* Premium buttons */
:where(button,.btn,.btn-primary,.submit-btn,.m-btn-primary,.checkout-btn,.pay-btn,.action-btn,.install-btn,.product-add-cart,.theme-toggle,.menu-toggle,.hamburger-btn) {

}
:where(.btn-primary,.submit-btn,.m-btn-primary,.checkout-btn,.pay-btn,.install-btn,.product-add-cart) {
  background: linear-gradient(135deg, var(--lg-hot), #ff935f 42%, var(--lg-gold)) !important;
  color: #120c08 !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 12px 36px rgba(255,107,43,.26), inset 0 1px 0 rgba(255,255,255,.34) !important;
}

/* Inputs */
:where(input,textarea,select) {
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
:where(input,textarea,select):focus {
  border-color: rgba(64,233,255,.48) !important;
  box-shadow: 0 0 0 4px rgba(64,233,255,.10), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* Text glow */
:where(.site-title,h1,h2,.hero-title,.price-main,.section-title) {
  text-shadow: 0 0 36px rgba(255,107,43,.18);
}
:where(.site-title,.brand-text,.logo-text) {
  background: linear-gradient(120deg, #fff, var(--lg-gold), var(--lg-hot), var(--lg-cyan)) !important;
  background-size: 220% 220% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: mujaGradientFlow 7s ease-in-out infinite;
}
@keyframes mujaGradientFlow { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* Full SVG icon look */
.liquid-icon-holder,.liquid-icon-chip {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  line-height: 1;
  vertical-align: -.16em;
  color: currentColor;
}
.liquid-svg-icon,
:where(a,button,.mobile-nav-item,.nav-item,.theme-toggle,.menu-toggle,.badge-item,.form-label,.note,.pill,.input-wrap) > svg {
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
  flex: 0 0 auto;
  color: currentColor;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(255,107,43,.22));
}
.liquid-icon-holder,.liquid-icon-chip svg[fill-mode="solid"], .liquid-svg-solid { fill: currentColor; stroke: none; }
:where(.mobile-nav-item,.nav-item):hover .liquid-svg-icon,
:where(.mobile-nav-item,.nav-item).active .liquid-svg-icon,
:where(button,.btn,.submit-btn,.m-btn,.product-add-cart):hover .liquid-svg-icon {
  filter: drop-shadow(0 0 14px rgba(64,233,255,.42));
}
:where(.mobile-nav-item,.nav-item) {
  border: 1px solid transparent;
}
:where(.mobile-nav-item,.nav-item).active,
:where(.mobile-nav-item,.nav-item):hover {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* Product image shine */
:where(.product-image,.image-wrap,.main-image,.logo-wrap,.site-logo,img) {
  image-rendering: auto;
}
:where(.product-image,.main-image,.image-wrap,.logo-wrap) {
  border-radius: inherit;
}

/* Tables/admin panels */
:where(table) { border-collapse: separate; border-spacing: 0; }
:where(th,td) { border-color: rgba(255,255,255,.08) !important; }
:where(tr:hover) { background: rgba(255,255,255,.045) !important; }

@media (max-width: 640px) {
  :root { --lg-blur: 18px; --lg-radius: 20px; }
  :where(.mobile-nav,.bottom-nav) { padding-bottom: max(7px, env(safe-area-inset-bottom)); }
  :where(.product-card,.collection-card,.card,.payment-card,.admin-card) { border-radius: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}

/* =========================================================
   MUJA PRIME LiquidGlass V2 - Bright Premium + Full Motion
   Aman: hanya override tampilan, tidak mengubah fungsi lama.
   ========================================================= */
:root {
  --lg-bg-0: #071126;
  --lg-bg-1: #101a3f;
  --lg-bg-2: #1a0b3f;
  --lg-ink: #ffffff;
  --lg-muted: rgba(244,248,255,.78);
  --lg-hot: #ff4d8d;
  --lg-orange: #ff7a2f;
  --lg-gold: #ffd86b;
  --lg-cyan: #2ff3ff;
  --lg-blue: #5b8cff;
  --lg-violet: #b86cff;
  --lg-green: #38f7c2;
  --lg-glass: rgba(255,255,255,.16);
  --lg-glass-strong: rgba(255,255,255,.24);
  --lg-stroke: rgba(255,255,255,.25);
  --lg-stroke-hot: rgba(255,216,107,.54);
  --lg-shadow: 0 24px 90px rgba(21, 28, 74, .44), 0 12px 42px rgba(255, 77, 141, .16), inset 0 1px 0 rgba(255,255,255,.26);
  --lg-radius: 28px;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 9% 8%, rgba(255, 216, 107, .32), transparent 28rem),
    radial-gradient(circle at 88% 5%, rgba(47, 243, 255, .28), transparent 34rem),
    radial-gradient(circle at 82% 86%, rgba(255, 77, 141, .28), transparent 32rem),
    radial-gradient(circle at 15% 92%, rgba(184, 108, 255, .28), transparent 34rem),
    linear-gradient(135deg, var(--lg-bg-0), var(--lg-bg-1) 44%, var(--lg-bg-2)) !important;
}

html::before {
  content: '';
  position: fixed;
  inset: -22%;
  z-index: 0;
  pointer-events: none;
  background:
    conic-gradient(from 90deg at 50% 50%, rgba(47,243,255,.10), rgba(255,216,107,.12), rgba(255,77,141,.12), rgba(184,108,255,.12), rgba(47,243,255,.10));
  filter: blur(54px) saturate(150%);
  opacity: .86;
  animation: mujaAuroraSpin 22s linear infinite;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
  opacity: .45;
  animation: mujaGridMove 18s linear infinite;
}

body.light-mode {
  --lg-ink: #101426;
  --lg-muted: rgba(24,31,58,.74);
  --lg-glass: rgba(255,255,255,.72);
  --lg-glass-strong: rgba(255,255,255,.88);
  --lg-stroke: rgba(96, 119, 190, .20);
  --lg-shadow: 0 24px 80px rgba(80, 95, 160, .18), 0 12px 35px rgba(255, 122, 47, .14), inset 0 1px 0 rgba(255,255,255,.82);
  background:
    radial-gradient(circle at 10% 4%, rgba(255, 216, 107, .38), transparent 27rem),
    radial-gradient(circle at 90% 8%, rgba(47, 243, 255, .28), transparent 30rem),
    radial-gradient(circle at 86% 88%, rgba(255, 77, 141, .22), transparent 31rem),
    linear-gradient(135deg, #fff8df, #edf7ff 46%, #fff3fb) !important;
}

/* Premium glass: lebih cerah dan glossy */
:where(
  .muja-header,.mobile-nav,.bottom-nav,.sidebar-content,.cart-sidebar,.cart-header,
  .hero-banner,.hero-card,.card,.info-card,.product-card,.collection-card,.price-card,.detail-card,
  .payment-card,.payment-box,.payment-detail,.upload-area,.summary-card,.method-card,.modal-box,.registration-dialog,
  .form-card,.saved-item,.info-row,.leader-card,.rank-card,.contact-card,.about-card,.feature-card,.toast-notif,
  .ai-chat-popup,.ai-chat-widget button,.login-wrap,.admin-card,.table-wrap,.section-card,.search-wrap,.empty-state,
  .qr-card,.card-header,.product-item,.order-card,.glass,.glass-card,.table-container,.table-responsive
) {
  background:
    linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,.08) 48%, rgba(255,255,255,.16)),
    radial-gradient(circle at 0 0, rgba(255,216,107,.16), transparent 35%),
    radial-gradient(circle at 100% 0, rgba(47,243,255,.14), transparent 34%) !important;
  border-color: rgba(255,255,255,.29) !important;
  border-radius: var(--lg-radius) !important;
  box-shadow: var(--lg-shadow) !important;
}

:where(.product-card,.collection-card,.saved-item,.method-card,.card,.payment-card,.admin-card,.stat-card,.info-card,.leader-card,.rank-card,.order-card,.product-item,.contact-card,.about-card,.feature-card) {
  animation: mujaGlassRise .72s cubic-bezier(.2,.9,.2,1) both, mujaFloatSoft 6.8s ease-in-out infinite;
  will-change: transform, box-shadow;
}

:where(.product-card,.collection-card,.saved-item,.method-card,.card,.payment-card,.admin-card,.stat-card,.info-card,.leader-card,.rank-card,.order-card,.product-item,.contact-card,.about-card,.feature-card):nth-child(2n) {
  animation-delay: .06s, .7s;
}
:where(.product-card,.collection-card,.saved-item,.method-card,.card,.payment-card,.admin-card,.stat-card,.info-card,.leader-card,.rank-card,.order-card,.product-item,.contact-card,.about-card,.feature-card):nth-child(3n) {
  animation-delay: .12s, 1.3s;
}

:where(.product-card,.collection-card,.saved-item,.method-card,.card,.payment-card,.admin-card,.stat-card,.info-card,.leader-card,.rank-card,.order-card,.product-item,.contact-card,.about-card,.feature-card):hover {
  transform: translateY(-7px) scale(1.015) !important;
  border-color: rgba(255,216,107,.58) !important;
  box-shadow: 0 28px 90px rgba(255,77,141,.22), 0 16px 56px rgba(47,243,255,.16), var(--lg-shadow) !important;
}

/* Tombol lebih cerah, premium, dan hidup */
:where(.btn-primary,.submit-btn,.m-btn-primary,.checkout-btn,.pay-btn,.install-btn,.product-add-cart,.action-btn.primary,button[type="submit"]) {
  background: linear-gradient(120deg, var(--lg-hot), var(--lg-orange), var(--lg-gold), var(--lg-cyan), var(--lg-blue)) !important;
  background-size: 260% 260% !important;
  color: #111321 !important;
  border-color: rgba(255,255,255,.48) !important;
  box-shadow: 0 14px 42px rgba(255, 122, 47, .28), 0 7px 28px rgba(47, 243, 255, .18), inset 0 1px 0 rgba(255,255,255,.55) !important;
  animation: mujaGradientFlow 5.5s ease-in-out infinite, mujaButtonPulse 2.8s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
:where(.btn-primary,.submit-btn,.m-btn-primary,.checkout-btn,.pay-btn,.install-btn,.product-add-cart,.action-btn.primary,button[type="submit"]):hover {
  filter: brightness(1.08) saturate(1.18);
  transform: translateY(-4px) scale(1.025) !important;
}

:where(a,button,.btn,.btn-primary,.submit-btn,.m-btn,.checkout-btn,.pay-btn,.action-btn,.product-add-cart,.nav-item,.mobile-nav-item,.theme-toggle,.menu-toggle,.hamburger-btn) {
  position: relative;
  overflow: hidden;
}
:where(a,button,.btn,.btn-primary,.submit-btn,.m-btn,.checkout-btn,.pay-btn,.action-btn,.product-add-cart,.nav-item,.mobile-nav-item,.theme-toggle,.menu-toggle,.hamburger-btn)::after {
  content: '';
  position: absolute;
  inset: -45%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.42) 48%, transparent 64%);
  transform: translateX(-130%) rotate(10deg);
  opacity: 0;
  transition: opacity .25s ease;
}
:where(a,button,.btn,.btn-primary,.submit-btn,.m-btn,.checkout-btn,.pay-btn,.action-btn,.product-add-cart,.nav-item,.mobile-nav-item,.theme-toggle,.menu-toggle,.hamburger-btn):hover::after {
  opacity: 1;
  animation: mujaShineSweep 950ms ease forwards;
}

/* Semua tabel: radius, glass, hover, dan animasi premium */
:where(.table-wrap,.table-container,.table-responsive,.admin-table-wrapper,.data-table-wrapper) {
  border-radius: 30px !important;
  padding: 1px !important;
  overflow: auto !important;
  background:
    linear-gradient(135deg, rgba(255,216,107,.44), rgba(47,243,255,.32), rgba(255,77,141,.34)) border-box !important;
  box-shadow: 0 24px 70px rgba(21,28,74,.28), inset 0 1px 0 rgba(255,255,255,.32) !important;
  animation: mujaTableAura 4.8s ease-in-out infinite;
}

:where(table,.admin-table,.data-table,.product-table,.orders-table,.users-table,.history-table,.payment-table) {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.07)),
    radial-gradient(circle at 0 0, rgba(255,216,107,.15), transparent 45%),
    radial-gradient(circle at 100% 0, rgba(47,243,255,.15), transparent 42%) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  box-shadow: 0 18px 56px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.22) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  animation: mujaGlassRise .65s cubic-bezier(.2,.9,.2,1) both;
}

:where(thead, table > tr:first-child) {
  overflow: hidden;
}
:where(th) {
  background: linear-gradient(120deg, rgb(0 0 0 / 92%), rgb(157 157 157 / 88%), rgb
(0 0 0 / 86%), rgb(255 255 255 / 82%)) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: .025em;
  text-transform: uppercase;
  border-color: rgba(255,255,255,.26) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.46) !important;
  animation: mujaGradientFlow 7s ease-in-out infinite;
}

:where(td) {
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(255,255,255,.10) !important;
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
:where(tbody tr) {
  transition: background .25s ease, filter .25s ease, transform .25s ease;
}
:where(tbody tr:hover) {
  background: linear-gradient(90deg, rgba(255,216,107,.13), rgba(47,243,255,.10), rgba(255,77,141,.10)) !important;
  filter: brightness(1.08) saturate(1.1);
}
:where(tbody tr:hover td) {
  background: rgba(255,255,255,.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(255,255,255,.06) !important;
}
:where(table tr:first-child th:first-child, thead tr:first-child th:first-child) { border-top-left-radius: 24px !important; }
:where(table tr:first-child th:last-child, thead tr:first-child th:last-child) { border-top-right-radius: 24px !important; }
:where(tbody tr:last-child td:first-child) { border-bottom-left-radius: 24px !important; }
:where(tbody tr:last-child td:last-child) { border-bottom-right-radius: 24px !important; }

/* Form input premium */
:where(input,textarea,select) {
  background: rgba(255,255,255,.13) !important;
  border-color: rgba(255,255,255,.26) !important;
  color: inherit;
  border-radius: 18px !important;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease, background .25s ease;
}
:where(input,textarea,select):focus {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(47,243,255,.74) !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px rgba(47,243,255,.15), 0 10px 28px rgba(47,243,255,.13), inset 0 1px 0 rgba(255,255,255,.24) !important;
}

/* Icon glow lebih jelas */
.liquid-svg-icon,
:where(a,button,.mobile-nav-item,.nav-item,.theme-toggle,.menu-toggle,.badge-item,.form-label,.note,.pill,.input-wrap) > svg {
  filter: drop-shadow(0 0 9px rgba(255,216,107,.36)) drop-shadow(0 0 14px rgba(47,243,255,.18));
  transition: transform .26s ease, filter .26s ease;
}
:where(a,button,.mobile-nav-item,.nav-item,.theme-toggle,.menu-toggle):hover .liquid-svg-icon,
:where(a,button,.mobile-nav-item,.nav-item,.theme-toggle,.menu-toggle):hover > svg {
  transform: translateY(-1px) rotate(-4deg) scale(1.08);
  filter: drop-shadow(0 0 13px rgba(255,216,107,.55)) drop-shadow(0 0 20px rgba(47,243,255,.40));
}

/* Scroll-reveal helper dari liquid-icons.js */
.liquid-motion-ready :where(.product-card,.collection-card,.saved-item,.method-card,.card,.payment-card,.admin-card,.stat-card,.info-card,.leader-card,.rank-card,.order-card,.product-item,.contact-card,.about-card,.feature-card,.table-wrap,.table-container,.table-responsive,table).liquid-observe {
  opacity: 0;
  transform: translateY(18px) scale(.985);
}
.liquid-motion-ready :where(.product-card,.collection-card,.saved-item,.method-card,.card,.payment-card,.admin-card,.stat-card,.info-card,.leader-card,.rank-card,.order-card,.product-item,.contact-card,.about-card,.feature-card,.table-wrap,.table-container,.table-responsive,table).liquid-observe.liquid-in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.9,.2,1), box-shadow .3s ease, border-color .3s ease;
}

@keyframes mujaAuroraSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.06); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes mujaGridMove {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 42px 42px, 42px 42px; }
}
@keyframes mujaGlassRise {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mujaFloatSoft {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}
@keyframes mujaButtonPulse {
  0%,100% { box-shadow: 0 14px 42px rgba(255, 122, 47, .28), 0 7px 28px rgba(47, 243, 255, .18), inset 0 1px 0 rgba(255,255,255,.55); }
  50% { box-shadow: 0 18px 54px rgba(255, 77, 141, .34), 0 10px 34px rgba(47, 243, 255, .28), inset 0 1px 0 rgba(255,255,255,.66); }
}
@keyframes mujaShineSweep {
  0% { transform: translateX(-130%) rotate(10deg); }
  100% { transform: translateX(130%) rotate(10deg); }
}
@keyframes mujaTableAura {
  0%,100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.12) brightness(1.04); }
}

@media (max-width: 640px) {
  :root { --lg-radius: 22px; }
  :where(table,.admin-table,.data-table,.product-table,.orders-table,.users-table,.history-table,.payment-table) { border-radius: 20px !important; }
  :where(th,td) { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  html::before, body::before { animation: none !important; }
  .liquid-motion-ready :where(.product-card,.collection-card,.saved-item,.method-card,.card,.payment-card,.admin-card,.stat-card,.info-card,.leader-card,.rank-card,.order-card,.product-item,.contact-card,.about-card,.feature-card,.table-wrap,.table-container,.table-responsive,table).liquid-observe {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* =========================================================
   LiquidGlass V3 - Aurora Bright, SVG Clean, Rounded Rows
   Request patch: no muja icon wrapper/add classes, more radius,
   premium animation, and fast visual layer only.
   ========================================================= */
:root {
  --liquid-row-radius: 12px;
  --liquid-row-bg: rgba(255,255,255,.105);
  --liquid-row-bg-hover: rgba(255,255,255,.17);
  --liquid-row-border: var(--border-1, rgba(255,255,255,.18));
  --liquid-neon-cyan: rgba(47,243,255,.34);
  --liquid-neon-pink: rgba(255,77,141,.34);
  --liquid-neon-gold: rgba(255,216,107,.42);
}

html::after {
  content: '';
  position: fixed;
  inset: -32% -22%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(47,243,255,.32), transparent 34%),
    radial-gradient(ellipse at 76% 16%, rgba(255,216,107,.31), transparent 31%),
    radial-gradient(ellipse at 85% 78%, rgba(255,77,141,.30), transparent 34%),
    radial-gradient(ellipse at 22% 86%, rgba(184,108,255,.30), transparent 36%);
  filter: blur(58px) saturate(170%);
  opacity: .92;
  transform: translate3d(0,0,0);
  animation: liquidAuroraDrift 18s ease-in-out infinite alternate;
}

body::after {
  background:
    linear-gradient(115deg, transparent 0 40%, rgba(255,255,255,.095) 48%, transparent 56%),
    radial-gradient(circle at 50% 0, rgba(255,255,255,.11), transparent 32rem),
    radial-gradient(circle at 6% 88%, rgba(47,243,255,.13), transparent 28rem),
    radial-gradient(circle at 96% 72%, rgba(255,77,141,.12), transparent 30rem),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E") !important;
  opacity: .56;
  animation: liquidAuroraSheen 11s ease-in-out infinite alternate;
}

/* Clean SVG icons: no old wrapper classes, no emoji rendering in UI */
.liquid-icon-holder,
.liquid-icon-chip {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 1.12em;
  height: 1.12em;
  min-width: 1.12em;
  line-height: 1;
  vertical-align: -.16em;
  color: currentColor;
}
.liquid-icon-chip {
  margin-inline: .16em;
  border-radius: 999px;
  transform: translateY(.08em);
}
.liquid-svg-icon,
.liquid-action-icon,
:where(a,button,.mobile-nav-item,.nav-item,.theme-toggle,.menu-toggle,.badge-item,.form-label,.note,.pill,.input-wrap) > svg {
  width: 2.12em;
  height: 19px;
  display: inline-block;
  flex: 0 0 auto;
  color: var(--text-primary);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 9px var(--liquid-neon-gold)) drop-shadow(0 0 15px var(--liquid-neon-cyan));
  transition: transform .24s ease, filter .24s ease;
}
.liquid-action-icon { margin-right: .42em; display: none;}
.liquid-svg-icon[fill-mode="solid"], .liquid-svg-solid { fill: currentColor; stroke: none; }
i.liquid-icon-holder::before,
span.liquid-icon-holder::before { content: none !important; display: none !important; }
:where(a,button,.mobile-nav-item,.nav-item,.theme-toggle,.menu-toggle):hover .liquid-svg-icon,
:where(a,button,.mobile-nav-item,.nav-item,.theme-toggle,.menu-toggle):hover > svg {
  transform: translateY(-1px) rotate(-4deg) scale(1.09);
  filter: drop-shadow(0 0 14px rgba(255,216,107,.60)) drop-shadow(0 0 22px rgba(47,243,255,.45));
}

/* Rounded premium rows, including info-row requested by user */
.info-row {
  margin-bottom: 2px !important;
  border-radius: 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 7px !important;
  border-bottom: 1px solid var(--border-1, rgba(255,255,255,.18)) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.055)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 24px rgba(0,0,0,.08) !important;
  overflow: hidden;
  transition: transform .24s ease, background .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.info-row:last-child { margin-bottom: 0 !important; }
.info-row:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(255,255,255,.19), rgba(47,243,255,.105), rgba(255,216,107,.09)) !important;
  border-color: rgba(255,216,107,.42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 32px rgba(47,243,255,.12) !important;
}

:where(.product-info-row,.modal-info-row,.pay-row,.cart-item,.user-row,.check-row,.actions-row,.product-row,.loading-row,.data-info,.badge-item,.saved-item,.item-card,.info-box,.alert-info,.contact-card,.feature-card,.about-card,.order-card,.leaderboard-card,.podium-card,.cta-card) {
  border-radius: var(--liquid-row-radius) !important;
  border: 1px solid var(--liquid-row-border) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.045)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 9px 26px rgba(0,0,0,.08) !important;
  overflow: hidden;
  transition: transform .24s ease, background .24s ease, border-color .24s ease, box-shadow .24s ease, filter .24s ease;
}
:where(.product-info-row,.modal-info-row,.pay-row,.user-row,.check-row,.actions-row,.product-row,.loading-row,.data-info) {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 9px !important;
}
:where(.product-info-row,.modal-info-row,.pay-row,.cart-item,.user-row,.check-row,.actions-row,.product-row,.loading-row,.data-info,.badge-item,.saved-item,.item-card,.info-box,.alert-info,.contact-card,.feature-card,.about-card,.order-card,.leaderboard-card,.podium-card,.cta-card):hover {
  transform: translateY(-2px);
  border-color: rgba(47,243,255,.36) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,216,107,.09), rgba(47,243,255,.075)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 12px 34px rgba(47,243,255,.105), 0 8px 24px rgba(255,77,141,.08) !important;
  filter: saturate(1.06);
}

/* More complete table rounding, especially admin table-wrapper/table-scroll */
:where(.table-wrap,.table-wrapper,.table-container,.table-responsive,.table-scroll,.admin-table-wrapper,.data-table-wrapper) {
  border-radius: 30px !important;
  padding: 1px !important;
  overflow: auto !important;
  background: linear-gradient(135deg, rgb(0 0 0), rgb(0 0 0), rgb(1 11 49 / 38%)) border-box !important;
  box-shadow: 0 24px 70px rgba(21,28,74,.28), inset 0 1px 0 rgba(255,255,255,.35) !important;
  animation: mujaTableAura 4.8s ease-in-out infinite;
}
:where(table,.admin-table,.data-table,.product-table,.orders-table,.users-table,.history-table,.payment-table) {
  border-radius: 26px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 26px);
}
:where(th:first-child) { border-top-left-radius: 24px !important; }
:where(th:last-child) { border-top-right-radius: 24px !important; }
:where(tbody tr:last-child td:first-child) { border-bottom-left-radius: 24px !important; }
:where(tbody tr:last-child td:last-child) { border-bottom-right-radius: 24px !important; }

/* Smooth premium entrance without making the site heavy */
.liquid-motion-ready :where(.product-card,.collection-card,.saved-item,.method-card,.card,.payment-card,.admin-card,.stat-card,.info-card,.leader-card,.rank-card,.order-card,.product-item,.contact-card,.about-card,.feature-card,.table-wrap,.table-wrapper,.table-container,.table-responsive,.table-scroll,table,.info-row,.product-info-row,.modal-info-row,.pay-row,.cart-item,.item-card,.user-row,.check-row).liquid-observe {
  opacity: 0;
  transform: translate3d(0,14px,0) scale(.988);
}
.liquid-motion-ready :where(.product-card,.collection-card,.saved-item,.method-card,.card,.payment-card,.admin-card,.stat-card,.info-card,.leader-card,.rank-card,.order-card,.product-item,.contact-card,.about-card,.feature-card,.table-wrap,.table-wrapper,.table-container,.table-responsive,.table-scroll,table,.info-row,.product-info-row,.modal-info-row,.pay-row,.cart-item,.item-card,.user-row,.check-row).liquid-observe.liquid-in-view {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.9,.2,1), box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

@keyframes liquidAuroraDrift {
  0% { transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(2%, 1%, 0) rotate(8deg) scale(1.04); }
  100% { transform: translate3d(1%, -2%, 0) rotate(-6deg) scale(1.02); }
}
@keyframes liquidAuroraSheen {
  0% { opacity: .44; filter: saturate(1.15); }
  100% { opacity: .62; filter: saturate(1.35); }
}

@media (max-width: 640px) {
  :root { --liquid-row-radius: 11px; }
  .info-row { padding: 9px 7px !important; gap: 9px !important; }
  :where(.product-info-row,.modal-info-row,.pay-row,.user-row,.check-row,.actions-row,.product-row,.loading-row,.data-info) { padding: 9px 8px !important; gap: 9px !important; }
  html::after { filter: blur(48px) saturate(155%); opacity: .78; }
}
@media (prefers-reduced-motion: reduce) {
  html::after, body::after, .liquid-motion-ready * { animation: none !important; }
  .liquid-motion-ready :where(.product-card,.collection-card,.saved-item,.method-card,.card,.payment-card,.admin-card,.stat-card,.info-card,.leader-card,.rank-card,.order-card,.product-item,.contact-card,.about-card,.feature-card,.table-wrap,.table-wrapper,.table-container,.table-responsive,.table-scroll,table,.info-row,.product-info-row,.modal-info-row,.pay-row,.cart-item,.item-card,.user-row,.check-row).liquid-observe {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   MUJA MOBILE PERFORMANCE PATCH v4
   Tujuan: menghilangkan lag/ngeframe di HP tanpa mengubah fungsi.
   Efek berat tetap ada di desktop, tetapi dipangkas di layar kecil.
   ========================================================= */
@media (max-width: 768px) {
  :root {
    --lg-blur: 7px;
    --lg-shadow: 0 8px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
    --lg-fast: 140ms ease;
    --liquid-row-radius: 11px;
  }

  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    scroll-behavior: auto !important;
  }

  body {
    background:
      radial-gradient(circle at 12% 0%, rgba(255, 216, 107, .18), transparent 18rem), radial-gradient(circle at 90% 8%, rgba(47, 243, 255, .14), #00000000 18rem), linear-gradient(135deg, #606887, var(--lg-bg-1) 48%, #e1e6ff) !important;
  }

  html::before,
  html::after,
  body::before,
  body::after {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    opacity: .18 !important;
    will-change: auto !important;
  }

  :where(.container,.header-container,.main-content,.page-wrap,.content,.content-wrap,.dashboard,.payment-container,.products-container,.profile-container) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip;
  }

  :where(.muja-header,.mobile-nav,.bottom-nav,.sidebar-content,.cart-sidebar,.cart-header,
    .hero-banner,.hero-card,.card,.stat-card,.info-card,.product-card,.collection-card,.price-card,.detail-card,
    .payment-card,.payment-box,.payment-detail,.upload-area,.summary-card,.method-card,.modal-box,.registration-dialog,
    .form-card,.saved-item,.info-row,.leader-card,.rank-card,.contact-card,.about-card,.feature-card,.toast-notif,
    .ai-chat-popup,.ai-chat-widget button,.login-wrap,.admin-card,.table-wrap,.section-card,.search-wrap,.empty-state,
    .qr-card,.card-header,.product-item,.order-card,.glass,.glass-card) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10) !important;
  }

  :where(.muja-header,.mobile-nav,.bottom-nav) {
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
    box-shadow: 0 6px 18px rgb(0 0 0 / 72%) !important;
  }

  :where(.card,.product-card,.collection-card,.price-card,.payment-card,.admin-card,.stat-card,.info-card,.method-card,.saved-item,.leader-card,.rank-card)::before,
  :where(.product-card,.collection-card,.saved-item,.method-card,.card,.payment-card,.admin-card,.stat-card,.info-card,.leader-card,.rank-card,.order-card,.product-item,.contact-card,.about-card,.feature-card)::after {
    opacity: .28 !important;
    animation: none !important;
  }

  :where(.product-card,.collection-card,.saved-item,.method-card,.btn,.btn-primary,.submit-btn,.m-btn,.checkout-btn,.product-add-cart,.theme-toggle,.menu-toggle,.hamburger-btn):hover,
  :where(.product-info-row,.modal-info-row,.pay-row,.cart-item,.user-row,.check-row,.actions-row,.product-row,.loading-row,.data-info,.badge-item,.saved-item,.item-card,.info-box,.alert-info,.contact-card,.feature-card,.about-card,.order-card,.leaderboard-card,.podium-card,.cta-card):hover,
  .info-row:hover {
    transform: none !important;
    filter: none !important;
  }

  :where(.product-image,.main-image,.image-wrap img,.product-img-wrap img) {
    transition: none !important;
  }

  :where(.product-card:hover .product-image,.product-card:hover:not(.locked) .product-img-wrap img) {
    transform: none !important;
  }

  :where(.liquid-svg-icon,.liquid-action-icon,
    a > svg,button > svg,.mobile-nav-item > svg,.nav-item > svg,.theme-toggle > svg,.menu-toggle > svg) {
    filter: none !important;
    transition: none !important;
  }

  :where(a,button,.mobile-nav-item,.nav-item,.theme-toggle,.menu-toggle):hover .liquid-svg-icon,
  :where(a,button,.mobile-nav-item,.nav-item,.theme-toggle,.menu-toggle):hover > svg {
    transform: none !important;
    filter: none !important;
  }

  :where(table,.admin-table,.data-table,.product-table,.orders-table,.users-table,.history-table,.payment-table),
  :where(th) {
    animation: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  :where(.table-wrap,.table-wrapper,.table-container,.table-responsive,.table-scroll,.admin-table-wrapper,.data-table-wrapper) {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    animation: none !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.20) !important;
  }

  .liquid-motion-ready :where(.product-card,.collection-card,.saved-item,.method-card,.card,.payment-card,.admin-card,.stat-card,.info-card,.leader-card,.rank-card,.order-card,.product-item,.contact-card,.about-card,.feature-card,.table-wrap,.table-wrapper,.table-container,.table-responsive,.table-scroll,table,.info-row,.product-info-row,.modal-info-row,.pay-row,.cart-item,.item-card,.user-row,.check-row).liquid-observe {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  :where(*),
  :where(*::before),
  :where(*::after) {
    will-change: auto !important;
  }
}

@media (max-width: 480px) {
  .container,
  .header-container,
  .muja-header .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .product-grid {
    gap: 8px !important;
  }

  .hero-slider,
  .hero-banner,
  .card,
  .product-card,
  .payment-card,
  .modal-box,
  .registration-dialog {
    border-radius: 18px !important;
  }

  .mobile-nav,
  .bottom-nav {
    padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
  }
}