:root {
  --bg: #08111f;
  --bg2: #0f1b2f;
  --card: rgba(15, 23, 42, 0.92);
  --border: rgba(148, 163, 184, 0.18);
  --text: #e5e7eb;
  --muted: #94a3b8;
  --primary: #3b82f6;
  --primary2: #2563eb;
  --good: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(59,130,246,0.22), transparent 30%),
    radial-gradient(circle at top right, rgba(34,197,94,0.12), transparent 28%),
    var(--bg);
  color: var(--text);
}

a { color: inherit; }
.link { text-decoration: none; }
code { color: #bfdbfe; }

.nav {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.brand { font-weight: 900; font-size: 22px; letter-spacing: -0.04em; }
.small { font-size: 12px; }
.muted { color: var(--muted); }
.container { max-width: 1180px; margin: 0 auto; padding: 20px; }
.narrow { max-width: 620px; }
.center-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; }

.hero {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr;
  gap: 28px;
  align-items: center;
  padding: 52px 0 34px;
}
.hero h1 { font-size: clamp(36px, 7vw, 72px); line-height: 0.95; margin: 18px 0; letter-spacing: -0.07em; }
.hero p { color: var(--muted); font-size: 18px; max-width: 620px; line-height: 1.7; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.hero-card { border: 1px solid var(--border); background: linear-gradient(180deg, rgba(59,130,246,0.18), rgba(15,23,42,0.95)); border-radius: 28px; padding: 28px; box-shadow: 0 20px 80px rgba(0,0,0,.35); }
.hero-card .icon { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 24px; background: rgba(59,130,246,.25); font-size: 32px; margin-bottom: 18px; }

.pill { display: inline-flex; border: 1px solid rgba(59,130,246,.45); background: rgba(59,130,246,.12); color: #bfdbfe; padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--primary), var(--primary2)); color: #fff; text-decoration: none; padding: 13px 18px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 28px rgba(37,99,235,.28); }
.btn:hover { filter: brightness(1.08); }
.btn-ghost { background: rgba(148,163,184,.10); box-shadow: none; border: 1px solid var(--border); }
.btn.danger { background: rgba(239,68,68,.18); color: #fecaca; box-shadow: none; border: 1px solid rgba(239,68,68,.35); margin-top: 10px; }
.full { width: 100%; }

.section-head { display: flex; align-items: end; justify-content: space-between; margin: 20px 0; }
.section-head h2 { font-size: 32px; margin: 0 0 6px; letter-spacing: -0.04em; }
.section-head p { margin: 0; color: var(--muted); }
.grid { display: grid; gap: 18px; }
.products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { border: 1px solid var(--border); background: var(--card); border-radius: 24px; padding: 22px; box-shadow: 0 18px 60px rgba(0,0,0,.25); }
.product-card { display: flex; flex-direction: column; min-height: 320px; }
.product-top { display: flex; align-items: center; justify-content: space-between; }
.product-icon { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: rgba(59,130,246,.16); }
.status-dot { font-size: 12px; color: #bbf7d0; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.22); border-radius: 999px; padding: 6px 10px; }
.product-card h3 { margin: 18px 0 8px; }
.product-card p { color: var(--muted); line-height: 1.6; flex: 1; }
.price { font-size: 26px; font-weight: 900; margin: 16px 0; color: #dbeafe; }

.checkout-card h1 { font-size: 36px; letter-spacing: -0.05em; }
.checkout-price { font-size: 34px; font-weight: 900; color: #dbeafe; margin: 12px 0 22px; }
.form { display: flex; flex-direction: column; gap: 10px; }
.form label { font-weight: 800; font-size: 13px; color: #cbd5e1; margin-top: 8px; }
input, textarea, select { width: 100%; border: 1px solid var(--border); background: rgba(2,6,23,.55); color: var(--text); border-radius: 14px; padding: 13px 14px; outline: none; }
textarea { min-height: 96px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: rgba(59,130,246,.75); box-shadow: 0 0 0 4px rgba(59,130,246,.12); }
.alert { padding: 14px 16px; border-radius: 16px; margin: 16px 0; line-height: 1.6; }
.alert.error { background: rgba(239,68,68,.12); color: #fecaca; border: 1px solid rgba(239,68,68,.35); }
.alert.info { background: rgba(59,130,246,.12); color: #dbeafe; border: 1px solid rgba(59,130,246,.35); }
.alert.good { background: rgba(34,197,94,.12); color: #bbf7d0; border: 1px solid rgba(34,197,94,.35); }

.invoice-wrap { max-width: 720px; }
.invoice-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.invoice-head h1 { margin: 14px 0 8px; letter-spacing: -0.04em; }
.badge { display: inline-flex; padding: 7px 11px; border-radius: 999px; font-size: 12px; font-weight: 900; border: 1px solid var(--border); }
.badge.pending { color: #fde68a; background: rgba(245,158,11,.13); border-color: rgba(245,158,11,.34); }
.badge.paid, .badge.processed { color: #bbf7d0; background: rgba(34,197,94,.13); border-color: rgba(34,197,94,.34); }
.badge.expired, .badge.cancelled { color: #fecaca; background: rgba(239,68,68,.13); border-color: rgba(239,68,68,.34); }
.qris-box { margin: 22px auto; width: min(340px, 100%); border-radius: 24px; padding: 14px; background: #fff; }
.qris-box img { width: 100%; display: block; border-radius: 14px; }
.qris-missing { color: #0f172a; text-align: center; padding: 50px 10px; }
.amount-box { text-align: center; padding: 18px; border-radius: 20px; background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.22); margin-bottom: 18px; }
.amount-box span { display: block; color: var(--muted); }
.amount-box strong { display: block; font-size: 36px; color: #dbeafe; margin-top: 4px; }
.info-list { display: grid; gap: 10px; margin: 18px 0; }
.info-list div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.info-list span { color: var(--muted); }
.left div { align-items: start; }
.success-card { text-align: center; width: 100%; }
.success-icon { font-size: 62px; }

.admin-layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.sidebar { background: rgba(2,6,23,.72); border-right: 1px solid var(--border); padding: 24px; position: sticky; top: 0; height: 100vh; }
.sidebar h2 { margin: 0 0 28px; }
.sidebar a { display: block; text-decoration: none; color: #cbd5e1; padding: 13px 14px; border-radius: 14px; margin-bottom: 8px; }
.sidebar a:hover, .sidebar a.active { background: rgba(59,130,246,.14); color: #fff; }
.danger-link { color: #fecaca !important; background: rgba(239,68,68,.10); }
.admin-main { padding: 28px; overflow: hidden; }
.admin-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.admin-head h1 { margin: 0; font-size: 36px; letter-spacing: -0.05em; }
.stats-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat span { display: block; color: var(--muted); font-size: 13px; }
.stat b { display: block; font-size: 24px; margin-top: 8px; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { text-align: left; padding: 14px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: #cbd5e1; font-size: 13px; }
td { color: #e5e7eb; }
.inline-form { display: flex; gap: 8px; align-items: center; }
.mini-btn, .mini-link { border: 1px solid var(--border); background: rgba(59,130,246,.14); color: #dbeafe; border-radius: 10px; padding: 8px 10px; text-decoration: none; cursor: pointer; display: inline-block; margin-top: 6px; }
.form-card { margin-bottom: 18px; }
.admin-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: center; }
.check { display: flex !important; align-items: center; gap: 8px; }
.check input { width: auto; }
.product-admin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.two-col .full { grid-column: 1 / -1; }

@media (max-width: 980px) {
  .hero, .products-grid, .stats-grid, .product-admin-grid, .two-col { grid-template-columns: 1fr; }
  .admin-layout { grid-template-columns: 1fr; }
  .sidebar { height: auto; position: static; }
  .admin-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .nav { padding: 16px; }
  .container { padding: 16px; }
  .hero { padding-top: 24px; }
  .amount-box strong { font-size: 28px; }
  .invoice-head { flex-direction: column; }
}

.nav-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.auth-card { width: 100%; }
.auth-foot { margin-top: 18px; text-align: center; }
.auth-foot a { color: #bfdbfe; font-weight: 800; text-decoration: none; }
.soft-center { min-height: calc(100vh - 110px); }
.compact-hero { padding-top: 28px; }
.no-margin { margin-top: 0; }
.user-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-stats { grid-template-columns: repeat(7, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .user-stats, .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .nav { align-items: flex-start; gap: 14px; }
  .nav-actions { width: 100%; justify-content: flex-start; }
  .user-stats, .admin-stats { grid-template-columns: 1fr; }
}

.single-product-wrap { max-width: 560px; }
.panel-main-card { min-height: auto; }
.feature-list { display: grid; gap: 8px; margin: 14px 0 6px; }
.feature-list span { display: block; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: rgba(148,163,184,.08); color: #dbeafe; font-weight: 700; }
.panel-order-container { max-width: 980px; }
.panel-order-card { display: grid; gap: 18px; }
.ram-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.ram-option { cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--border); border-radius: 18px; background: rgba(2,6,23,.35); transition: .15s ease; }
.ram-option:hover, .ram-option.selected { border-color: rgba(59,130,246,.75); background: rgba(59,130,246,.13); transform: translateY(-1px); }
.ram-option input { display: none; }
.ram-title { font-size: 22px; font-weight: 900; color: #fff; }
.ram-price { font-size: 16px; font-weight: 900; color: #bfdbfe; }
.ram-meta { font-size: 12px; color: var(--muted); line-height: 1.4; }

@media (max-width: 980px) {
  .ram-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .ram-grid { grid-template-columns: 1fr; }
  .single-product-wrap { max-width: 100%; }
}

.main-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1100px; }
.vps-grid .ram-title { font-size: 18px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.full-span { grid-column: 1 / -1; }
.text-left { text-align: left; }
.check-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-weight: 800; color: #cbd5e1; }
.check-row input { width: auto; }

@media (max-width: 980px) {
  .main-products-grid, .settings-grid { grid-template-columns: 1fr; }
}

.upload-script-card { border-color: rgba(34,197,94,.32); background: linear-gradient(180deg, rgba(34,197,94,.10), rgba(17,24,39,.86)); }
.product-admin-card input[type="file"], .upload-script-card input[type="file"] { padding: 11px; }
.main-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1200px; }
@media (max-width: 1100px) { .main-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .main-products-grid { grid-template-columns: 1fr; } }

.hint {
  display: block;
  margin-top: -8px;
  margin-bottom: 12px;
  color: #8b9bb4;
  font-size: 12px;
  line-height: 1.45;
}

.hint b {
  color: #dbeafe;
}

/* ===== Storefront Neon Theme v2 ===== */
.storefront-body {
  --sf-bg: #050912;
  --sf-card: rgba(10, 16, 31, 0.84);
  --sf-line: rgba(255, 255, 255, 0.12);
  --sf-white: #f8fafc;
  --sf-soft: #aeb9ca;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 115, 0, .18), transparent 26%),
    radial-gradient(circle at 90% 7%, rgba(0, 178, 255, .16), transparent 25%),
    radial-gradient(circle at 45% 38%, rgba(161, 52, 255, .14), transparent 24%),
    linear-gradient(180deg, #05070d 0%, #07111f 48%, #050912 100%);
  overflow-x: hidden;
}
.storefront-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at top, black, transparent 68%);
  opacity: .28;
}
.store-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 24px 24px 122px;
  position: relative;
  z-index: 1;
}
.sf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
  position: relative;
}
.sf-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--sf-white);
  font-weight: 950;
  letter-spacing: .04em;
  font-size: clamp(18px, 3.5vw, 29px);
  text-transform: uppercase;
}
.sf-logo {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 1000;
  color: #090b10;
  background: linear-gradient(135deg, #ff4500 0%, #ffb000 52%, #fff06a 100%);
  box-shadow: 0 0 24px rgba(255, 122, 0, .34), inset 0 0 0 1px rgba(255,255,255,.32);
  clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%);
}
.sf-menu {
  width: 76px;
  height: 70px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255,255,255,.18);
  display: grid;
  place-content: center;
  gap: 7px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 18px 45px rgba(0,0,0,.25);
}
.sf-menu span {
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 999px;
  background: #f8fafc;
}
.sf-nav-pop {
  position: absolute;
  right: 0;
  top: 82px;
  min-width: 220px;
  display: none;
  padding: 12px;
  border-radius: 22px;
  background: rgba(12, 18, 34, .96);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 80px rgba(0,0,0,.42);
  z-index: 20;
}
.menu-open .sf-nav-pop { display: grid; gap: 8px; }
.sf-nav-pop a {
  color: #e5e7eb;
  text-decoration: none;
  font-weight: 850;
  padding: 13px 15px;
  border-radius: 15px;
  background: rgba(255,255,255,.05);
}
.sf-nav-pop a:hover { background: rgba(255, 176, 0, .14); color: #fff3b0; }

.sf-hero {
  min-height: 360px;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 24px;
  align-items: center;
  border-radius: 44px;
  overflow: hidden;
  padding: clamp(28px, 5vw, 58px);
  position: relative;
  background:
    linear-gradient(116deg, rgba(15, 22, 74, .95) 0%, rgba(60, 14, 97, .86) 47%, rgba(255, 121, 0, .88) 100%),
    radial-gradient(circle at 80% 10%, rgba(255,255,255,.25), transparent 26%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 32px 105px rgba(0,0,0,.43), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.sf-hero::before,
.sf-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sf-hero::before {
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.18), transparent 4%),
    linear-gradient(110deg, transparent 0 18%, rgba(255,255,255,.12) 18.2%, transparent 18.7% 100%),
    linear-gradient(30deg, transparent 0 62%, rgba(255,255,255,.12) 62.2%, transparent 62.8% 100%);
  opacity: .44;
}
.sf-hero::after {
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.22));
}
.sf-hero-content,
.sf-server-art { position: relative; z-index: 2; }
.sf-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 17px;
  border-radius: 999px;
  color: #fff4cf;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .02em;
  background: rgba(6, 8, 16, .52);
  border: 1px solid rgba(255, 199, 68, .5);
  box-shadow: 0 0 25px rgba(255, 174, 0, .25);
}
.sf-hero h1 {
  margin: 28px 0 18px;
  color: #fff;
  font-weight: 1000;
  letter-spacing: -0.08em;
  line-height: .96;
  font-size: clamp(42px, 8.2vw, 86px);
  text-shadow: 0 18px 35px rgba(0,0,0,.25);
}
.sf-hero h1 span {
  background: linear-gradient(90deg, #ff9a00 0%, #ff4f8b 43%, #9b5cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sf-hero p {
  margin: 0;
  max-width: 590px;
  color: rgba(255,255,255,.78);
  font-size: clamp(16px, 2.3vw, 22px);
  line-height: 1.55;
}
.sf-proof-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 32px;
  padding: 14px;
  border-radius: 28px;
  background: rgba(4, 8, 18, .42);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.sf-proof-row div { padding: 8px 12px; border-right: 1px solid rgba(255,255,255,.12); }
.sf-proof-row div:last-child { border-right: 0; }
.sf-proof-row b { display: block; color: #fff; font-size: 16px; }
.sf-proof-row small { display: block; margin-top: 5px; color: rgba(255,255,255,.64); }
.sf-server-art {
  min-height: 300px;
  display: grid;
  place-items: center;
}
.server-stack {
  width: min(320px, 80%);
  transform: perspective(900px) rotateX(58deg) rotateZ(-35deg);
  filter: drop-shadow(0 28px 34px rgba(0, 0, 0, .42));
}
.server-stack span {
  display: block;
  height: 80px;
  margin: -2px 0;
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(0, 204, 255, .85) 0 9%, transparent 9% 19%, rgba(255, 94, 0, .95) 19% 24%, transparent 24%),
    linear-gradient(135deg, #0b1731, #142a56 55%, #080c19);
  border: 1px solid rgba(105, 190, 255, .24);
  box-shadow: 0 0 26px rgba(0, 170, 255, .28), inset 0 0 20px rgba(255, 160, 0, .12);
}
.shield-art {
  position: absolute;
  right: 5%;
  bottom: 14%;
  width: 118px;
  height: 138px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 64px;
  font-weight: 1000;
  background: linear-gradient(135deg, #ffcc00, #ff6b00 65%, #ff2e00);
  clip-path: polygon(50% 0, 92% 16%, 82% 78%, 50% 100%, 18% 78%, 8% 16%);
  box-shadow: 0 0 38px rgba(255, 150, 0, .62);
}

.sf-cs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 24px 0 34px;
}
.sf-cs-card {
  min-height: 108px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 22px 25px;
  color: #fff;
  text-decoration: none;
  border-radius: 30px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 70px rgba(0,0,0,.32);
}
.sf-cs-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.14), transparent 50%);
  opacity: .38;
}
.sf-cs-card > * { position: relative; z-index: 1; }
.sf-cs-card.whatsapp { background: linear-gradient(135deg, #00a51e, #006d16 62%, #0b3216); box-shadow: 0 18px 70px rgba(0, 205, 36, .27); }
.sf-cs-card.telegram { background: linear-gradient(135deg, #17baff, #006fe8 62%, #0b2e72); box-shadow: 0 18px 70px rgba(0, 140, 255, .26); }
.sf-cs-icon {
  width: 66px;
  height: 66px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.18);
  font-weight: 1000;
  font-size: 29px;
}
.sf-cs-card b { display: block; font-size: clamp(19px, 3vw, 27px); }
.sf-cs-card small { color: rgba(255,255,255,.73); font-size: 16px; }
.sf-cs-card i { font-style: normal; font-size: 52px; opacity: .75; }

.sf-section-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin: 40px 0 22px;
}
.sf-section-title h2,
.sf-why h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(32px, 5.2vw, 46px);
  letter-spacing: -0.05em;
}
.sf-section-title p { margin: 8px 0 0; color: var(--sf-soft); font-size: 17px; }
.sf-section-title a { color: #ffae21; text-decoration: none; font-weight: 950; font-size: 18px; white-space: nowrap; }
.sf-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.sf-product-card {
  min-height: 435px;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: 30px;
  position: relative;
  overflow: hidden;
  color: #fff;
  background: rgba(7, 13, 27, .74);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 80px rgba(0,0,0,.30);
}
.sf-product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  pointer-events: none;
}
.sf-product-card.purple { border-color: rgba(184, 57, 255, .38); }
.sf-product-card.blue { border-color: rgba(0, 145, 255, .38); }
.sf-product-card.orange { border-color: rgba(255, 111, 0, .38); }
.sf-product-card.purple::before { background: radial-gradient(circle at 8% 4%, #b22cff, transparent 42%); }
.sf-product-card.blue::before { background: radial-gradient(circle at 8% 4%, #00a2ff, transparent 42%); }
.sf-product-card.orange::before { background: radial-gradient(circle at 8% 4%, #ff7a00, transparent 42%); }
.sf-product-card > * { position: relative; z-index: 1; }
.sf-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sf-card-top span {
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  color: #fff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
}
.sf-product-icon {
  width: 82px;
  height: 82px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-size: 38px;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 16px 36px rgba(0,0,0,.25);
}
.sf-product-card h3 {
  margin: 27px 0 14px;
  font-size: clamp(24px, 3vw, 31px);
  letter-spacing: -0.04em;
}
.sf-product-card p {
  color: var(--sf-soft);
  line-height: 1.62;
  font-size: 16px;
  min-height: 105px;
}
.sf-card-line {
  height: 1px;
  margin: auto 0 17px;
  background: linear-gradient(90deg, rgba(255,255,255,.18), transparent);
}
.sf-product-card small { color: var(--sf-soft); font-size: 14px; }
.sf-product-card strong {
  display: block;
  margin: 4px 0 18px;
  font-size: clamp(26px, 4.2vw, 38px);
  letter-spacing: .03em;
  font-weight: 1000;
}
.sf-product-card.purple strong { color: #d255ff; }
.sf-product-card.blue strong { color: #23b7ff; }
.sf-product-card.orange strong { color: #ff7b13; }
.sf-order-btn {
  min-height: 62px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  border-radius: 18px;
  font-weight: 950;
  font-size: 17px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.sf-product-card.purple .sf-order-btn { background: linear-gradient(135deg, #cc38ff, #781ce7); }
.sf-product-card.blue .sf-order-btn { background: linear-gradient(135deg, #13c4ff, #006be7); }
.sf-product-card.orange .sf-order-btn { background: linear-gradient(135deg, #ffb000, #ff5400); }
.sf-order-btn b { font-size: 30px; line-height: 1; }
.sf-order-btn.muted-btn { background: linear-gradient(135deg, #334155, #111827) !important; }

.sf-why { margin-top: 50px; }
.sf-why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.sf-why-grid div {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  align-items: center;
  padding: 20px;
  border-radius: 23px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
}
.sf-why-grid span {
  grid-row: span 2;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  font-size: 27px;
  background: linear-gradient(135deg, #b8ff00, #198e00);
  box-shadow: 0 0 28px rgba(111, 255, 0, .22);
}
.sf-why-grid div:nth-child(2) span { background: linear-gradient(135deg, #db55ff, #6000c8); box-shadow: 0 0 28px rgba(183, 64, 255, .22); }
.sf-why-grid div:nth-child(3) span { background: linear-gradient(135deg, #ffd000, #d56b00); box-shadow: 0 0 28px rgba(255, 176, 0, .22); }
.sf-why-grid b { color: #fff; font-size: 18px; }
.sf-why-grid small { color: var(--sf-soft); line-height: 1.45; }

.sf-bottom-nav {
  position: sticky;
  bottom: 14px;
  z-index: 30;
  margin: 28px auto 0;
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border-radius: 30px;
  background: rgba(8, 13, 25, .9);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(16px);
  box-shadow: 0 22px 70px rgba(0,0,0,.42);
}
.sf-bottom-nav a {
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  text-decoration: none;
  font-weight: 850;
  border-radius: 22px;
}
.sf-bottom-nav span { font-size: 28px; line-height: 1; margin-bottom: 5px; }
.sf-bottom-nav a.active {
  color: #ffd275;
  background: linear-gradient(180deg, rgba(255, 174, 0, .24), rgba(255, 111, 0, .12));
  box-shadow: inset 0 0 0 1px rgba(255, 181, 37, .32), 0 0 28px rgba(255, 145, 0, .19);
}

@media (max-width: 920px) {
  .store-shell { padding: 20px 18px 112px; }
  .sf-hero { grid-template-columns: 1fr; }
  .sf-server-art { display: none; }
  .sf-products { grid-template-columns: 1fr; }
  .sf-why-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .sf-cs-grid { grid-template-columns: 1fr; gap: 14px; }
  .sf-hero { border-radius: 32px; }
  .sf-proof-row { grid-template-columns: 1fr; }
  .sf-proof-row div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .sf-proof-row div:last-child { border-bottom: 0; }
  .sf-section-title { align-items: flex-start; flex-direction: column; }
  .sf-bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); border-radius: 24px; padding: 8px; }
  .sf-bottom-nav a { min-height: 62px; font-size: 12px; border-radius: 18px; }
  .sf-bottom-nav span { font-size: 22px; }
}
@media (max-width: 420px) {
  .sf-brand { font-size: 16px; }
  .sf-logo { width: 44px; height: 44px; }
  .sf-menu { width: 62px; height: 58px; border-radius: 20px; }
  .sf-cs-card { padding: 18px; border-radius: 24px; }
  .sf-cs-icon { width: 54px; height: 54px; border-radius: 18px; }
  .sf-product-card { padding: 24px; border-radius: 26px; }
}


/* ===== Compact Storefront Fix: hero, CS, produk buttons ===== */
.store-shell {
  padding-top: 18px;
}
.sf-header {
  margin-bottom: 16px;
}
.sf-menu {
  width: 62px;
  height: 58px;
  border-radius: 20px;
}
.sf-menu span {
  width: 25px;
  height: 2.5px;
}
.sf-logo {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}
.sf-brand {
  gap: 12px;
}

.sf-hero {
  min-height: 265px;
  padding: clamp(20px, 4vw, 34px);
  border-radius: 32px;
  grid-template-columns: 1.25fr .75fr;
}
.sf-pill {
  padding: 8px 13px;
  font-size: 12px;
}
.sf-hero h1 {
  margin: 18px 0 12px;
  font-size: clamp(34px, 6vw, 64px);
  line-height: .98;
}
.sf-hero p {
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.48;
  max-width: 530px;
}
.sf-proof-row {
  margin-top: 20px;
  padding: 10px;
  border-radius: 22px;
  gap: 6px;
}
.sf-proof-row div {
  padding: 6px 9px;
}
.sf-proof-row b {
  font-size: 14px;
}
.sf-proof-row small {
  font-size: 12px;
  margin-top: 3px;
}
.sf-server-art {
  min-height: 210px;
}
.server-stack span {
  height: 58px;
  border-radius: 17px;
}
.shield-art {
  width: 84px;
  height: 98px;
  font-size: 42px;
}

.sf-cs-grid {
  gap: 14px;
  margin: 18px 0 28px;
}
.sf-cs-card {
  min-height: 82px;
  padding: 15px 18px;
  gap: 14px;
  border-radius: 24px;
}
.sf-cs-icon {
  width: 50px;
  height: 50px;
  border-radius: 17px;
  font-size: 22px;
}
.sf-cs-card b {
  font-size: clamp(16px, 2.4vw, 21px);
}
.sf-cs-card small {
  font-size: 13px;
}
.sf-cs-card i {
  font-size: 34px;
}

.sf-section-title {
  margin: 28px 0 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.sf-section-title h2,
.sf-why h2 {
  font-size: clamp(28px, 4.6vw, 38px);
}
.sf-section-title p {
  font-size: 14px;
}
.sf-products {
  gap: 16px;
}
.sf-product-card {
  min-height: 350px;
  padding: 22px;
  border-radius: 24px;
}
.sf-product-icon {
  width: 62px;
  height: 62px;
  border-radius: 19px;
  font-size: 29px;
}
.sf-card-top span {
  padding: 6px 10px;
  font-size: 11px;
}
.sf-product-card h3 {
  margin: 20px 0 10px;
  font-size: clamp(21px, 2.7vw, 26px);
}
.sf-product-card p {
  min-height: 76px;
  font-size: 14px;
  line-height: 1.55;
}
.sf-product-card strong {
  font-size: clamp(23px, 3.4vw, 30px);
  margin-bottom: 13px;
}
.sf-order-btn {
  min-height: 47px;
  border-radius: 15px;
  font-size: 14px;
  gap: 8px;
  padding: 0 14px;
}
.sf-order-btn b {
  font-size: 23px;
}
.sf-why {
  margin-top: 34px;
}
.sf-why-grid div {
  padding: 15px;
  border-radius: 18px;
}
.sf-why-grid span {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  font-size: 22px;
}

@media (max-width: 720px) {
  .store-shell {
    padding: 16px 14px 98px;
  }
  .sf-header {
    margin-bottom: 14px;
  }
  .sf-brand {
    font-size: 17px;
  }
  .sf-logo {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }
  .sf-menu {
    width: 54px;
    height: 52px;
    border-radius: 18px;
  }
  .sf-menu span {
    width: 23px;
    height: 2px;
  }
  .sf-hero {
    min-height: auto;
    padding: 20px;
    border-radius: 25px;
    grid-template-columns: 1fr;
  }
  .sf-hero h1 {
    margin: 16px 0 10px;
    font-size: 38px;
    letter-spacing: -0.065em;
  }
  .sf-hero p {
    font-size: 14px;
    line-height: 1.45;
  }
  .sf-proof-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 16px;
    padding: 8px;
    border-radius: 18px;
  }
  .sf-proof-row div {
    border-right: 1px solid rgba(255,255,255,.10);
    border-bottom: 0;
    padding: 4px 5px;
  }
  .sf-proof-row div:last-child {
    border-right: 0;
  }
  .sf-proof-row b {
    font-size: 12px;
  }
  .sf-proof-row small {
    font-size: 10.5px;
    line-height: 1.25;
  }
  .sf-cs-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 14px 0 24px;
  }
  .sf-cs-card {
    min-height: 72px;
    padding: 12px 14px;
    border-radius: 20px;
    gap: 12px;
  }
  .sf-cs-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    font-size: 20px;
  }
  .sf-cs-card b {
    font-size: 16px;
  }
  .sf-cs-card small {
    font-size: 12px;
  }
  .sf-cs-card i {
    font-size: 28px;
  }
  .sf-section-title {
    margin: 22px 0 14px;
    padding-top: 16px;
  }
  .sf-products {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .sf-product-card {
    min-height: auto;
    padding: 18px;
    border-radius: 21px;
  }
  .sf-product-icon {
    width: 52px;
    height: 52px;
    border-radius: 17px;
    font-size: 24px;
  }
  .sf-product-card h3 {
    margin: 15px 0 8px;
    font-size: 22px;
  }
  .sf-product-card p {
    min-height: auto;
    font-size: 13.5px;
  }
  .sf-card-line {
    margin: 14px 0 12px;
  }
  .sf-product-card strong {
    font-size: 24px;
    margin-bottom: 10px;
  }
  .sf-order-btn {
    min-height: 43px;
    font-size: 13.5px;
    border-radius: 14px;
  }
  .sf-bottom-nav {
    bottom: 10px;
    border-radius: 20px;
    padding: 7px;
  }
  .sf-bottom-nav a {
    min-height: 54px;
    font-size: 11px;
    border-radius: 15px;
  }
  .sf-bottom-nav span {
    font-size: 19px;
  }
}

/* ===== Premium Auth Pages ===== */
.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 169, 0, .24), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(0, 210, 255, .20), transparent 24%),
    radial-gradient(circle at 50% 90%, rgba(255, 105, 0, .16), transparent 30%),
    linear-gradient(180deg, #090b10 0%, #151515 48%, #090b10 100%);
  color: #fff;
  display: grid;
  place-items: center;
  padding: 24px 16px 34px;
}

.auth-shell {
  width: min(520px, 100%);
  position: relative;
}

.auth-shell::before,
.auth-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(42px);
  opacity: .55;
}

.auth-shell::before {
  width: 180px;
  height: 180px;
  background: #ff9f00;
  top: -60px;
  left: -64px;
}

.auth-shell::after {
  width: 170px;
  height: 170px;
  background: #00c8ff;
  bottom: -60px;
  right: -60px;
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  margin: 0 auto 18px;
  color: #fff;
  text-decoration: none;
  font-weight: 950;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}

.auth-logo-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffce00, #ff7100);
  color: #111827;
  font-weight: 950;
  box-shadow: 0 12px 32px rgba(255, 132, 0, .36);
}

.auth-panel {
  position: relative;
  z-index: 2;
  padding: 24px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.055)),
    rgba(39, 39, 42, .88);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 80px rgba(0,0,0,.48);
  backdrop-filter: blur(14px);
}

.auth-head {
  text-align: center;
  margin-bottom: 18px;
}

.auth-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: #ffe9b6;
  background: rgba(255, 150, 0, .12);
  border: 1px solid rgba(255, 174, 0, .28);
}

.auth-head h1 {
  margin: 12px 0 6px;
  font-size: clamp(28px, 8vw, 40px);
  letter-spacing: -0.055em;
  line-height: .95;
}

.auth-head p {
  margin: 0 auto;
  max-width: 420px;
  color: rgba(255,255,255,.68);
  line-height: 1.55;
}

.auth-form {
  display: grid;
  gap: 10px;
}

.auth-form label {
  margin-top: 4px;
  color: rgba(255,255,255,.82);
  font-size: 13px;
  font-weight: 900;
}

.auth-input {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.auth-input span {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .98;
}

.auth-input .icon-wrap {
  width: 26px;
  height: 26px;
}

.auth-input .input-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.20));
}

.auth-input input {
  flex: 1;
  width: auto;
  border: 0;
  outline: 0;
  padding: 0;
  min-height: 50px;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-weight: 800;
  box-shadow: none;
}

.auth-input input::placeholder {
  color: rgba(255,255,255,.55);
}

.auth-input:focus-within {
  border-color: rgba(255, 159, 0, .78);
  box-shadow: 0 0 0 4px rgba(255, 159, 0, .12), inset 0 1px 0 rgba(255,255,255,.10);
}

.captcha-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.captcha-question {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
}

.captcha-question span {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #08210e;
  background: #22c55e;
  font-weight: 950;
  box-shadow: 0 8px 22px rgba(34, 197, 94, .25);
}

.captcha-question b {
  font-size: 18px;
  letter-spacing: .04em;
}

.auth-submit {
  margin-top: 6px;
  width: 100%;
  border: 0;
  min-height: 54px;
  border-radius: 16px;
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  cursor: pointer;
  background: linear-gradient(135deg, #ffd000 0%, #ff9500 45%, #ff5a00 100%);
  box-shadow: 0 18px 42px rgba(255, 119, 0, .35);
}

.auth-submit:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  color: rgba(255,255,255,.64);
  font-size: 13px;
  font-weight: 800;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(255,255,255,.14);
}

.google-btn {
  min-height: 50px;
  width: 100%;
  border-radius: 16px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 900;
}

.google-btn span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #111827;
  font-weight: 950;
}

.auth-foot {
  text-align: center;
  margin: 16px 0 0;
  color: rgba(255,255,255,.70);
}

.auth-foot a {
  color: #ffb000;
  font-weight: 950;
  text-decoration: none;
}

.auth-page .hint {
  margin: -4px 0 4px;
  color: rgba(255,255,255,.58);
}

@media (max-width: 520px) {
  .auth-page {
    place-items: start center;
    padding-top: 18px;
  }
  .auth-panel {
    padding: 20px;
    border-radius: 24px;
  }
  .captcha-wrap {
    grid-template-columns: 1fr;
  }
}


/* ===== Clean Normal Brand Logo ===== */
img.sf-logo,
img.auth-logo-mark {
  object-fit: contain;
  object-position: center;
  background: transparent !important;
  padding: 0;
  color: transparent;
  clip-path: none !important;
  overflow: visible;
  border: 0;
  box-shadow: 0 10px 28px rgba(255, 132, 0, .22);
  flex: 0 0 auto;
}

img.sf-logo {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

img.auth-logo-mark {
  width: 46px;
  height: 46px;
  border-radius: 15px;
}

@media (max-width: 720px) {
  img.sf-logo {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }
  img.auth-logo-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }
}


.captcha-input .input-icon {
  width: 22px;
  height: 22px;
}

.auth-logo img, .sf-brand img {
  image-rendering: auto;
}


/* ===== FINAL: Brand K restored + clean form icons ===== */
.sf-logo,
.auth-logo-mark {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 15px;
  display: inline-grid;
  place-items: center;
  font-weight: 1000;
  font-size: 18px;
  letter-spacing: -0.03em;
  color: #101010;
  background: linear-gradient(135deg, #ff4500 0%, #ffb000 52%, #fff06a 100%) !important;
  box-shadow: 0 0 24px rgba(255, 122, 0, .34), inset 0 0 0 1px rgba(255,255,255,.32) !important;
  overflow: hidden;
  object-fit: initial;
}
.sf-logo {
  clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%);
}
.auth-logo-mark {
  border-radius: 14px;
  clip-path: none !important;
}
.auth-input .icon-wrap {
  color: rgba(255,255,255,.88);
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.auth-input .input-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
  color: rgba(255,255,255,.88);
  filter: drop-shadow(0 0 8px rgba(255,255,255,.16));
}
@media (max-width: 720px) {
  .sf-logo, .auth-logo-mark {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    font-size: 17px;
  }
}


/* ===== Lively User Dashboard ===== */
.user-dashboard-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 4%, rgba(255, 176, 0, .22), transparent 26%),
    radial-gradient(circle at 86% 12%, rgba(0, 183, 255, .22), transparent 24%),
    radial-gradient(circle at 50% 90%, rgba(166, 76, 255, .20), transparent 34%),
    linear-gradient(180deg, #070b14 0%, #08111f 48%, #050812 100%);
  color: #fff;
  padding-bottom: 98px;
}

.user-dash-shell {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 22px;
}

.user-dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.user-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-weight: 950;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.user-header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.user-header-actions a {
  color: rgba(255,255,255,.88);
  text-decoration: none;
  font-weight: 900;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}

.user-header-actions a.danger {
  background: rgba(255, 61, 87, .13);
  color: #ffd5dc;
}

.user-hero-live {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  border-radius: 32px;
  padding: 26px;
  background:
    linear-gradient(135deg, rgba(34, 14, 74, .92), rgba(15, 49, 101, .82) 48%, rgba(255, 132, 0, .70)),
    rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 28px 90px rgba(0,0,0,.45);
}

.user-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 20%, rgba(255, 210, 0, .25), transparent 30%),
    radial-gradient(circle at 22% 30%, rgba(167, 67, 255, .26), transparent 30%),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: auto, auto, 34px 34px, 34px 34px;
  opacity: .9;
}

.user-hero-main,
.user-profile-card {
  position: relative;
  z-index: 1;
}

.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255, 212, 0, .35);
  color: #fff1b8;
  font-weight: 950;
  font-size: 12px;
}

.user-hero-live h1 {
  margin: 16px 0 8px;
  font-size: clamp(32px, 8vw, 60px);
  line-height: .95;
  letter-spacing: -0.07em;
}

.user-hero-live h1 span {
  background: linear-gradient(90deg, #ffd000, #ff6b00, #b36bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.user-hero-live p {
  max-width: 560px;
  color: rgba(255,255,255,.78);
  line-height: 1.6;
  margin: 0;
}

.user-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.user-primary-btn,
.user-soft-btn,
.user-invoice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 16px;
  text-decoration: none;
  font-weight: 950;
  border: 0;
}

.user-primary-btn {
  color: #fff;
  background: linear-gradient(135deg, #ffd000, #ff8a00 48%, #ff4d00);
  box-shadow: 0 16px 36px rgba(255, 116, 0, .35);
}

.user-soft-btn {
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
}

.user-profile-card {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 22px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}

.user-avatar-live {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 950;
  color: #111827;
  background: linear-gradient(135deg, #ffdf35, #ff7a00);
  box-shadow: 0 12px 32px rgba(255, 133, 0, .35);
}

.user-profile-card b,
.user-profile-card small {
  display: block;
}

.user-profile-card b {
  font-size: 17px;
}

.user-profile-card small {
  color: rgba(255,255,255,.66);
  margin-top: 3px;
}

.user-stat-live-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.user-stat-live {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  padding: 16px;
  border-radius: 24px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 46px rgba(0,0,0,.26);
}

.user-stat-live::after {
  content: "";
  position: absolute;
  inset: auto -30px -50px auto;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  filter: blur(8px);
  opacity: .45;
}

.user-stat-live.orange::after { background: #ff8a00; }
.user-stat-live.blue::after { background: #0ea5e9; }
.user-stat-live.green::after { background: #22c55e; }
.user-stat-live.purple::after { background: #a855f7; }

.user-stat-live span,
.user-stat-live small,
.user-stat-live b {
  position: relative;
  z-index: 1;
  display: block;
}

.user-stat-live span {
  font-size: 25px;
  margin-bottom: 14px;
}

.user-stat-live small {
  color: rgba(255,255,255,.62);
  font-weight: 800;
}

.user-stat-live b {
  font-size: 34px;
  line-height: 1;
  margin-top: 8px;
}

.user-section-title-live {
  margin: 28px 0 12px;
}

.user-section-title-live.row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.user-section-title-live h2 {
  margin: 0;
  font-size: clamp(24px, 6vw, 36px);
  letter-spacing: -0.05em;
}

.user-section-title-live p {
  margin: 5px 0 0;
  color: rgba(255,255,255,.62);
}

.user-section-title-live a {
  color: #ffba24;
  text-decoration: none;
  font-weight: 950;
}

.user-action-grid-live {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.user-action-card-live {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  min-height: 92px;
  border-radius: 24px;
  color: #fff;
  text-decoration: none;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 48px rgba(0,0,0,.25);
}

.user-action-card-live > span {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 24px;
}

.user-action-card-live.product > span { background: linear-gradient(135deg, #a855f7, #6d28d9); }
.user-action-card-live.history > span { background: linear-gradient(135deg, #ffb000, #ff5a00); }
.user-action-card-live.telegram > span { background: linear-gradient(135deg, #38bdf8, #2563eb); }
.user-action-card-live.whatsapp > span { background: linear-gradient(135deg, #22c55e, #047857); }

.user-action-card-live b,
.user-action-card-live small {
  display: block;
}

.user-action-card-live b { font-size: 16px; }
.user-action-card-live small {
  color: rgba(255,255,255,.60);
  margin-top: 4px;
  line-height: 1.35;
}
.user-action-card-live i {
  font-style: normal;
  font-size: 28px;
  opacity: .75;
}

.user-order-live-list {
  display: grid;
  gap: 12px;
}

.user-order-live-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 15px;
  border-radius: 24px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
}

.user-order-icon {
  width: 56px;
  height: 56px;
  border-radius: 19px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.10);
  font-size: 25px;
}

.user-order-info b,
.user-order-info small {
  display: block;
}

.user-order-info b { font-size: 16px; }
.user-order-info small {
  margin-top: 4px;
  color: rgba(255,255,255,.58);
}

.user-order-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.user-order-meta > span:first-child {
  font-weight: 950;
  color: #ffcb2e;
}

.user-invoice-btn {
  min-height: 38px;
  padding: 0 13px;
  color: #dbeafe;
  background: rgba(59, 130, 246, .16);
  border: 1px solid rgba(96, 165, 250, .25);
}

.user-empty-live {
  text-align: center;
  padding: 34px 20px;
  border-radius: 28px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
}

.user-empty-live span { font-size: 44px; }
.user-empty-live h3 { margin: 10px 0 4px; }
.user-empty-live p { color: rgba(255,255,255,.62); }

.user-bottom-nav-live {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: min(620px, calc(100% - 28px));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  z-index: 50;
  padding: 8px;
  border-radius: 24px;
  background: rgba(7, 12, 22, .88);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 18px 58px rgba(0,0,0,.45);
  backdrop-filter: blur(14px);
}

.user-bottom-nav-live a {
  min-height: 58px;
  display: grid;
  place-items: center;
  gap: 2px;
  color: rgba(255,255,255,.70);
  text-decoration: none;
  font-weight: 900;
  border-radius: 18px;
}

.user-bottom-nav-live a.active {
  color: #ffd98a;
  background: rgba(255, 166, 0, .14);
  border: 1px solid rgba(255, 183, 0, .22);
}

.user-bottom-nav-live span {
  font-size: 20px;
  line-height: 1;
}

.user-bottom-nav-live small {
  font-size: 11px;
}

@media (max-width: 760px) {
  .user-dash-shell { padding: 18px 16px; }
  .user-dash-header { align-items: flex-start; }
  .user-header-actions a { padding: 10px 12px; font-size: 12px; }
  .user-hero-live { min-height: 238px; padding: 22px; border-radius: 26px; }
  .user-profile-card { width: 100%; }
  .user-stat-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-action-grid-live { grid-template-columns: 1fr; }
  .user-order-live-card { grid-template-columns: 48px 1fr; }
  .user-order-icon { width: 48px; height: 48px; border-radius: 16px; }
  .user-invoice-btn { grid-column: 1 / -1; width: 100%; }
  .user-section-title-live.row { align-items: flex-start; }
}

/* ===== User Dashboard REAL Live Mode ===== */
.user-dashboard-active {
  overflow-x: hidden;
}

.live-header {
  animation: dashFadeDown .45s ease both;
}

.dash-live-hero {
  overflow: hidden;
  min-height: 260px;
  isolation: isolate;
}

.dash-live-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,.09) 45%, transparent 55%);
  transform: translateX(-120%);
  animation: heroShine 5.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.dash-live-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(22px);
  opacity: .55;
  z-index: 0;
  pointer-events: none;
}

.dash-live-orb.orb-one {
  width: 130px;
  height: 130px;
  background: #ff8a00;
  right: 12%;
  top: 10%;
  animation: floatOrb 5s ease-in-out infinite;
}

.dash-live-orb.orb-two {
  width: 110px;
  height: 110px;
  background: #2563eb;
  left: 8%;
  bottom: 8%;
  animation: floatOrb 6.5s ease-in-out infinite reverse;
}

.live-pill {
  gap: 8px;
}

.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.6);
  animation: livePulse 1.5s infinite;
}

.dash-live-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 0;
  max-width: 390px;
}

.dash-live-chip {
  padding: 11px 12px;
  border-radius: 17px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.13);
  backdrop-filter: blur(12px);
}

.dash-live-chip small {
  display: block;
  color: rgba(255,255,255,.64);
  font-size: 11px;
  font-weight: 800;
}

.dash-live-chip b {
  display: block;
  margin-top: 3px;
  font-size: 17px;
  color: #fff;
  letter-spacing: -.02em;
}

.as-button {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.as-button.loading {
  opacity: .72;
  pointer-events: none;
}

.as-button.loading::after {
  content: "...";
}

.live-profile-card {
  animation: cardFloat 4.2s ease-in-out infinite;
}

.dash-progress-card {
  margin-top: 16px;
  padding: 18px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 15% 10%, rgba(168,85,247,.26), transparent 28%),
    radial-gradient(circle at 85% 90%, rgba(14,165,233,.22), transparent 30%),
    rgba(15, 23, 42, .78);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 60px rgba(0,0,0,.30);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  animation: dashFadeUp .55s ease both;
}

.user-pill.mini {
  font-size: 11px;
  padding: 7px 10px;
  display: inline-flex;
}

.dash-progress-card h2 {
  margin: 10px 0 5px;
  font-size: clamp(22px, 6vw, 32px);
  letter-spacing: -.045em;
}

.dash-progress-card p {
  margin: 0;
  color: rgba(255,255,255,.66);
}

.progress-ring {
  --progress: 0;
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, #0b1220 58%, transparent 60%),
    conic-gradient(#22c55e calc(var(--progress) * 1%), rgba(255,255,255,.13) 0);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 0 28px rgba(34,197,94,.18);
  transition: background .35s ease;
}

.progress-ring span {
  font-size: 18px;
  font-weight: 950;
  color: #fff;
}

.dash-stat-grid .user-stat-live {
  position: relative;
  overflow: hidden;
}

.dash-stat-grid .user-stat-live::after {
  content: "";
  position: absolute;
  inset: auto -30% -60% -30%;
  height: 70px;
  background: rgba(255,255,255,.10);
  filter: blur(18px);
  transform: rotate(-8deg);
}

.pulse-card {
  animation: dashFadeUp .58s ease both;
}

.pulse-card:nth-child(2) { animation-delay: .05s; }
.pulse-card:nth-child(3) { animation-delay: .10s; }
.pulse-card:nth-child(4) { animation-delay: .15s; }

.dash-money-card {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, rgba(255,152,0,.18), rgba(168,85,247,.12));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 42px rgba(0,0,0,.24);
}

.dash-money-card small {
  display: block;
  color: rgba(255,255,255,.64);
  font-weight: 800;
}

.dash-money-card b {
  display: block;
  margin-top: 3px;
  font-size: 24px;
  letter-spacing: -.045em;
}

.money-bars {
  height: 46px;
  display: flex;
  align-items: end;
  gap: 5px;
}

.money-bars span {
  width: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd000, #ff6500);
  box-shadow: 0 0 18px rgba(255,128,0,.35);
  animation: moneyWave 1.2s ease-in-out infinite;
}

.money-bars span:nth-child(1) { height: 22px; animation-delay: 0s; }
.money-bars span:nth-child(2) { height: 35px; animation-delay: .1s; }
.money-bars span:nth-child(3) { height: 28px; animation-delay: .2s; }
.money-bars span:nth-child(4) { height: 42px; animation-delay: .3s; }

.dash-action-grid .live-action {
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.dash-action-grid .live-action:hover,
.dash-action-grid .live-action:active {
  transform: translateY(-2px) scale(.995);
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}

.dash-filter-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.dash-filter-tabs button {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.72);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.dash-filter-tabs button.active {
  color: #111827;
  background: linear-gradient(135deg, #ffd000, #ff8a00);
  border-color: rgba(255,204,0,.5);
  box-shadow: 0 10px 24px rgba(255,132,0,.22);
}

.animated-order {
  animation: orderIn .38s ease both;
}

.dash-toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .92);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 20px 52px rgba(0,0,0,.35);
  transition: .25s ease;
}

.dash-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

@keyframes heroShine {
  0%, 40% { transform: translateX(-130%); }
  70%, 100% { transform: translateX(130%); }
}

@keyframes floatOrb {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(0,-14px,0) scale(1.07); }
}

@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes moneyWave {
  0%, 100% { transform: scaleY(.72); opacity: .68; }
  50% { transform: scaleY(1.08); opacity: 1; }
}

@keyframes dashFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dashFadeDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes orderIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 640px) {
  .dash-live-hero {
    min-height: auto;
  }
  .dash-live-row {
    grid-template-columns: 1fr 1fr;
  }
  .dash-progress-card {
    align-items: stretch;
  }
  .progress-ring {
    width: 78px;
    height: 78px;
    flex-basis: 78px;
  }
  .dash-money-card b {
    font-size: 21px;
  }
  .dash-filter-tabs {
    width: 100%;
  }
}

/* ===== Extra Live Dashboard: Statistik & Aksi Cepat ===== */
.user-dashboard-active .dash-stat-grid {
  perspective: 900px;
}

.user-dashboard-active .user-stat-live {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 116px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 20% 0%, var(--live-accent-soft, rgba(255,255,255,.12)), transparent 44%),
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  box-shadow:
    0 14px 42px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.10);
  transform: translateZ(0);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
}

.user-dashboard-active .user-stat-live:nth-child(1) { --live-accent: #ff9f0a; --live-accent-soft: rgba(255,159,10,.28); }
.user-dashboard-active .user-stat-live:nth-child(2) { --live-accent: #38bdf8; --live-accent-soft: rgba(56,189,248,.25); }
.user-dashboard-active .user-stat-live:nth-child(3) { --live-accent: #22c55e; --live-accent-soft: rgba(34,197,94,.25); }
.user-dashboard-active .user-stat-live:nth-child(4) { --live-accent: #a855f7; --live-accent-soft: rgba(168,85,247,.26); }

.user-dashboard-active .user-stat-live::before {
  content: "";
  position: absolute;
  inset: -70% -45%;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.18) 50%, transparent 58%);
  transform: translateX(-62%) rotate(8deg);
  animation: dashShine 4.6s ease-in-out infinite;
  z-index: -1;
}

.user-dashboard-active .user-stat-live::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -34px;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: var(--live-accent, #fff);
  opacity: .13;
  filter: blur(18px);
  animation: orbBreath 3.4s ease-in-out infinite;
  z-index: -1;
}

.user-dashboard-active .user-stat-live:hover,
.user-dashboard-active .user-stat-live.spotlight,
.user-dashboard-active .user-stat-live.stat-updated {
  transform: translateY(-4px) scale(1.018);
  border-color: color-mix(in srgb, var(--live-accent, #fff) 55%, white 15%);
  box-shadow:
    0 20px 56px rgba(0,0,0,.36),
    0 0 28px var(--live-accent-soft, rgba(255,255,255,.18)),
    inset 0 1px 0 rgba(255,255,255,.14);
  filter: saturate(1.12);
}

.user-dashboard-active .user-stat-live > span {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.045));
  box-shadow: 0 0 24px var(--live-accent-soft, rgba(255,255,255,.12));
  animation: floatIcon 3.2s ease-in-out infinite;
}

.user-dashboard-active .user-stat-live:nth-child(2) > span { animation-delay: .18s; }
.user-dashboard-active .user-stat-live:nth-child(3) > span { animation-delay: .36s; }
.user-dashboard-active .user-stat-live:nth-child(4) > span { animation-delay: .54s; }

.user-dashboard-active .user-stat-live small {
  letter-spacing: .02em;
  color: rgba(255,255,255,.70);
}

.user-dashboard-active .user-stat-live b {
  position: relative;
  display: inline-block;
  font-size: 34px;
  line-height: 1;
  text-shadow: 0 0 22px var(--live-accent-soft, rgba(255,255,255,.18));
}

.user-dashboard-active .user-stat-live.stat-updated b {
  animation: numberPop .55s ease;
}

.user-dashboard-active .user-stat-live .mini-meter,
.user-dashboard-active .live-action .mini-meter {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 14px;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}

.user-dashboard-active .user-stat-live .mini-meter::before,
.user-dashboard-active .live-action .mini-meter::before {
  content: "";
  display: block;
  width: 44%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--live-accent, #fff), transparent);
  animation: meterRun 2.4s linear infinite;
}

.user-dashboard-active .dash-action-grid {
  gap: 14px;
}

.user-dashboard-active .live-action {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 8% 12%, var(--action-soft, rgba(255,255,255,.12)), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
  box-shadow:
    0 14px 40px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .20s ease, border-color .20s ease, box-shadow .20s ease, filter .20s ease;
}

.user-dashboard-active .live-action.product { --action: #9b4dff; --action-soft: rgba(155,77,255,.28); }
.user-dashboard-active .live-action.history { --action: #ff8a00; --action-soft: rgba(255,138,0,.23); }
.user-dashboard-active .live-action.telegram { --action: #18a8ff; --action-soft: rgba(24,168,255,.25); }
.user-dashboard-active .live-action.whatsapp { --action: #22c55e; --action-soft: rgba(34,197,94,.25); }

.user-dashboard-active .live-action::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.10) 45%, transparent 58%);
  transform: translateX(-110%);
  animation: actionShine 5s ease-in-out infinite;
  z-index: -1;
}

.user-dashboard-active .live-action::after {
  content: "";
  position: absolute;
  inset: auto 16px 10px 78px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--action, #fff), transparent);
  opacity: .58;
  animation: actionLine 2.8s ease-in-out infinite;
}

.user-dashboard-active .live-action:hover,
.user-dashboard-active .live-action.spotlight {
  transform: translateY(-4px) scale(1.01);
  border-color: color-mix(in srgb, var(--action, #fff) 50%, white 16%);
  box-shadow:
    0 20px 54px rgba(0,0,0,.36),
    0 0 30px var(--action-soft, rgba(255,255,255,.16)),
    inset 0 1px 0 rgba(255,255,255,.14);
  filter: saturate(1.12);
}

.user-dashboard-active .live-action > span {
  position: relative;
  overflow: hidden;
  animation: actionFloat 3.6s ease-in-out infinite;
}

.user-dashboard-active .live-action > span::after {
  content: "";
  position: absolute;
  inset: -18px;
  background: conic-gradient(from 90deg, transparent, rgba(255,255,255,.25), transparent, var(--action-soft, rgba(255,255,255,.10)));
  animation: spinGlow 4.5s linear infinite;
  z-index: -1;
}

.user-dashboard-active .live-action b {
  text-shadow: 0 0 18px var(--action-soft, rgba(255,255,255,.12));
}

.user-dashboard-active .live-action i {
  color: rgba(255,255,255,.78);
  animation: arrowNudge 1.25s ease-in-out infinite;
}

.user-dashboard-active .tap-ripple {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  pointer-events: none;
  background: rgba(255,255,255,.35);
  transform: translate(-50%, -50%) scale(1);
  animation: rippleOut .55s ease-out forwards;
}

@keyframes dashShine {
  0%, 56% { transform: translateX(-62%) rotate(8deg); opacity: 0; }
  68% { opacity: 1; }
  100% { transform: translateX(62%) rotate(8deg); opacity: 0; }
}
@keyframes orbBreath { 0%, 100% { transform: scale(.88); opacity: .10; } 50% { transform: scale(1.18); opacity: .18; } }
@keyframes floatIcon { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-2deg); } }
@keyframes numberPop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes meterRun { 0% { transform: translateX(-120%); } 100% { transform: translateX(260%); } }
@keyframes actionShine { 0%, 62% { transform: translateX(-110%); opacity: 0; } 72% { opacity: 1; } 100% { transform: translateX(110%); opacity: 0; } }
@keyframes actionLine { 0%, 100% { opacity: .25; transform: scaleX(.38); } 50% { opacity: .9; transform: scaleX(1); } }
@keyframes actionFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes spinGlow { to { transform: rotate(360deg); } }
@keyframes arrowNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes rippleOut { to { transform: translate(-50%, -50%) scale(18); opacity: 0; } }

@media (max-width: 540px) {
  .user-dashboard-active .user-stat-live {
    min-height: 106px;
  }
  .user-dashboard-active .user-stat-live > span {
    width: 38px;
    height: 38px;
    border-radius: 13px;
  }
  .user-dashboard-active .user-stat-live b {
    font-size: 31px;
  }
  .user-dashboard-active .live-action::after {
    left: 74px;
    right: 18px;
  }
}


/* ===== Fix Mini Loading Dashboard User ===== */
/* Mini loading di card statistik dihapus supaya angka tidak terlihat punya garis/dash kecil. */
.user-dashboard-active .user-stat-live .mini-meter {
  display: none !important;
}

/* Line hidup di tombol Aksi Cepat dibuat lebih rapi: tipis, menempel bawah, tidak nabrak teks/icon. */
.user-dashboard-active .live-action .mini-meter {
  position: absolute !important;
  left: 88px !important;
  right: 42px !important;
  bottom: 13px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.055) !important;
  overflow: hidden !important;
  opacity: .72;
}

.user-dashboard-active .live-action .mini-meter::before {
  width: 34% !important;
  background: linear-gradient(90deg, transparent, var(--action, #fff), rgba(255,255,255,.42), transparent) !important;
  animation: meterRunClean 3s ease-in-out infinite !important;
}

.user-dashboard-active .live-action::after {
  display: none !important;
}

@keyframes meterRunClean {
  0% { transform: translateX(-145%); opacity: .15; }
  35% { opacity: .85; }
  100% { transform: translateX(330%); opacity: .15; }
}

@media (max-width: 540px) {
  .user-dashboard-active .live-action .mini-meter {
    left: 88px !important;
    right: 40px !important;
    bottom: 12px !important;
  }

  .user-dashboard-active .user-stat-live {
    padding-bottom: 18px;
  }
}

/* ===== Storefront Super Premium Polish ===== */
.storefront-body {
  --sf-neon-orange: #ff9d00;
  --sf-neon-pink: #ff3fae;
  --sf-neon-purple: #9a42ff;
  --sf-neon-blue: #1aa7ff;
  --sf-neon-green: #20e45b;
  background:
    radial-gradient(circle at 8% 4%, rgba(255, 157, 0, .26), transparent 22%),
    radial-gradient(circle at 92% 12%, rgba(0, 210, 255, .20), transparent 24%),
    radial-gradient(circle at 50% 42%, rgba(154, 66, 255, .18), transparent 34%),
    linear-gradient(180deg, #03050a 0%, #07111f 43%, #050812 100%);
}
.storefront-body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.035) 43%, transparent 45% 100%),
    radial-gradient(circle at 45% 20%, rgba(255,255,255,.04), transparent 2px);
  background-size: 100% 100%, 34px 34px;
  opacity: .52;
  mix-blend-mode: screen;
  z-index: 0;
}
.store-shell { max-width: 1000px; }
.sf-header {
  padding: 8px 0 10px;
  margin-bottom: 14px;
  isolation: isolate;
}
.sf-brand {
  text-shadow: 0 0 22px rgba(255,255,255,.10);
}
.sf-logo {
  transform: rotate(-4deg);
  background: linear-gradient(135deg, #ffcb16 0%, #ff8a00 70%, #ff4d00 100%);
  box-shadow:
    0 0 28px rgba(255, 151, 0, .36),
    0 12px 28px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.42);
}
.sf-menu {
  width: 60px;
  height: 58px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.045)),
    rgba(12, 18, 34, .72);
  border-color: rgba(255,255,255,.18);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 32px rgba(180, 74, 255, .18),
    0 18px 45px rgba(0,0,0,.30);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sf-menu:hover,
.menu-open .sf-menu {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 34px rgba(255, 91, 201, .38), 0 18px 45px rgba(0,0,0,.34);
}
.sf-menu span { width: 25px; height: 2.5px; }
.sf-nav-pop {
  top: 70px;
  right: 0;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(16, 21, 41, .98), rgba(6, 9, 20, .96));
  box-shadow: 0 28px 80px rgba(0,0,0,.55), 0 0 42px rgba(154, 66, 255, .18);
}
.sf-nav-pop a { background: rgba(255,255,255,.065); }

.sf-hero {
  grid-template-columns: 1fr;
  min-height: 0;
  padding: clamp(26px, 5vw, 44px);
  border-radius: 30px;
  background:
    radial-gradient(circle at 86% 22%, rgba(255, 154, 0, .52), transparent 25%),
    radial-gradient(circle at 26% 10%, rgba(156, 66, 255, .42), transparent 30%),
    linear-gradient(122deg, rgba(12, 15, 50, .98), rgba(48, 14, 91, .88) 52%, rgba(255, 93, 0, .88));
  border: 1px solid rgba(255,255,255,.15);
  box-shadow:
    0 26px 80px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 50px rgba(255, 112, 0, .16),
    0 0 50px rgba(161, 70, 255, .16);
}
.sf-hero::before {
  background:
    linear-gradient(140deg, transparent 0 30%, rgba(255,255,255,.13) 31%, transparent 32% 100%),
    linear-gradient(18deg, transparent 0 55%, rgba(255,255,255,.10) 56%, transparent 57% 100%),
    radial-gradient(circle at 42% 20%, rgba(255,255,255,.22), transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 80px 80px, 42px 42px, 42px 42px;
  opacity: .55;
  animation: sfGridGlow 7s ease-in-out infinite alternate;
}
.sf-hero::after {
  content: "⚡";
  inset: auto 8% 20% auto;
  width: auto;
  height: auto;
  display: block;
  font-size: clamp(104px, 18vw, 190px);
  line-height: 1;
  font-weight: 1000;
  color: transparent;
  -webkit-text-stroke: 6px rgba(255, 185, 38, .82);
  text-shadow:
    0 0 22px rgba(255, 120, 0, .85),
    0 0 42px rgba(255, 52, 180, .58),
    0 0 62px rgba(148, 54, 255, .45);
  opacity: .72;
  transform: rotate(11deg);
}
.sf-server-art { display: none; }
.sf-hero-content { max-width: 720px; }
.sf-pill {
  padding: 9px 18px;
  background: rgba(4, 6, 16, .60);
  border-color: rgba(255, 190, 46, .70);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 28px rgba(255, 163, 0, .28);
}
.sf-hero h1 {
  margin: 22px 0 14px;
  font-size: clamp(38px, 8.1vw, 72px);
  line-height: .98;
}
.sf-hero p { max-width: 610px; color: rgba(255,255,255,.80); }
.sf-proof-row {
  max-width: 100%;
  background: rgba(2, 5, 13, .54);
  border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 50px rgba(0,0,0,.20);
}
.sf-proof-row b { letter-spacing: -.02em; }
.sf-proof-row small { color: rgba(255,255,255,.68); }

.sf-cs-grid { gap: 14px; }
.sf-cs-card {
  min-height: 94px;
  border-radius: 28px;
  transform: translateZ(0);
  transition: transform .18s ease, filter .18s ease;
}
.sf-cs-card:hover { transform: translateY(-2px); filter: brightness(1.05); }
.sf-cs-card::before {
  background:
    linear-gradient(100deg, rgba(255,255,255,.18), transparent 40%),
    radial-gradient(circle at 75% 50%, rgba(255,255,255,.17), transparent 24%);
}
.sf-cs-card.whatsapp {
  background:
    radial-gradient(circle at 78% 50%, rgba(68,255,102,.34), transparent 24%),
    linear-gradient(135deg, #02a92a, #026b1f 62%, #062712);
  box-shadow: 0 20px 65px rgba(0, 205, 36, .24), inset 0 1px 0 rgba(255,255,255,.15);
}
.sf-cs-card.telegram {
  background:
    radial-gradient(circle at 78% 50%, rgba(42,209,255,.32), transparent 24%),
    linear-gradient(135deg, #18c8ff, #006fe8 58%, #071e58);
  box-shadow: 0 20px 65px rgba(0, 140, 255, .23), inset 0 1px 0 rgba(255,255,255,.15);
}
.sf-cs-icon {
  border-radius: 20px;
  background: rgba(255,255,255,.17);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 15px 34px rgba(0,0,0,.22);
}
.sf-cs-card i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 32px;
  transition: transform .18s ease;
}
.sf-cs-card:hover i { transform: translateX(3px); }

.sf-section-title {
  position: relative;
  align-items: center;
  border-top: 0;
  margin-top: 32px;
}
.sf-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  margin: 0 16px;
  min-width: 40px;
  background: linear-gradient(90deg, rgba(255, 153, 0, .95), rgba(255, 63, 174, .18), transparent);
  box-shadow: 0 0 18px rgba(255, 147, 0, .25);
}
.sf-section-title a { order: 3; text-shadow: 0 0 20px rgba(255, 157, 0, .34); }
.sf-section-title h2 { letter-spacing: -.06em; }

.sf-products { gap: 18px; }
.sf-product-card {
  min-height: 0;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025)),
    rgba(5, 9, 24, .78);
  box-shadow: 0 24px 75px rgba(0,0,0,.34), 0 0 38px rgba(154, 66, 255, .12);
}
.sf-product-card::before { opacity: .27; }
.sf-product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0 32%, rgba(255,255,255,.11) 42%, transparent 54% 100%);
  transform: translateX(-130%);
  animation: sfCardShine 5.8s ease-in-out infinite;
}
.sf-product-card.purple { border-color: rgba(202, 79, 255, .45); box-shadow: 0 24px 75px rgba(0,0,0,.34), 0 0 42px rgba(173, 75, 255, .18); }
.sf-product-card.blue { border-color: rgba(38, 180, 255, .42); }
.sf-product-card.orange { border-color: rgba(255, 136, 0, .44); }
.sf-card-top span {
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(255, 119, 0, .20), rgba(185, 55, 255, .20));
  border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11);
}
.sf-product-icon {
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, rgba(154,66,255,.34), rgba(15, 22, 74, .84));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 44px rgba(0,0,0,.26), 0 0 26px rgba(154, 66, 255, .20), inset 0 1px 0 rgba(255,255,255,.13);
}
.sf-product-card h3 { letter-spacing: -.055em; }
.sf-product-card p { color: rgba(226, 232, 240, .76); }
.sf-card-line { background: linear-gradient(90deg, rgba(255,255,255,.20), rgba(255,255,255,.06), transparent); }
.sf-product-card strong {
  background: linear-gradient(90deg, #ffb21a, #ff4fb8 48%, #ac64ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: 0 0 34px rgba(255, 79, 184, .16);
}
.sf-order-btn {
  position: relative;
  overflow: hidden;
  min-height: 54px;
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(255, 78, 0, .20), 0 0 32px rgba(162, 66, 255, .16);
  transition: transform .18s ease, filter .18s ease;
}
.sf-order-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 35%, rgba(255,255,255,.25) 48%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .55s ease;
}
.sf-order-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.sf-order-btn:hover::after { transform: translateX(130%); }
.sf-order-btn.disabled { opacity: .7; cursor: not-allowed; }
.sf-bottom-nav {
  max-width: 950px;
  border-color: rgba(255,255,255,.13);
  background: linear-gradient(180deg, rgba(18, 20, 42, .84), rgba(5, 7, 16, .86));
  box-shadow: 0 -14px 56px rgba(0,0,0,.36), 0 0 34px rgba(154,66,255,.14), inset 0 1px 0 rgba(255,255,255,.08);
}
.sf-bottom-nav a.active {
  background: linear-gradient(135deg, rgba(255, 148, 0, .24), rgba(255, 65, 174, .12));
  border: 1px solid rgba(255, 174, 0, .30);
  color: #ffd56c;
  box-shadow: 0 0 28px rgba(255, 138, 0, .20), inset 0 1px 0 rgba(255,255,255,.10);
}

@keyframes sfGridGlow {
  0% { opacity: .36; transform: translate3d(0,0,0); }
  100% { opacity: .60; transform: translate3d(8px,-4px,0); }
}
@keyframes sfCardShine {
  0%, 62% { transform: translateX(-135%); opacity: 0; }
  72% { opacity: .55; }
  100% { transform: translateX(135%); opacity: 0; }
}

@media (max-width: 720px) {
  .store-shell { padding: 16px 14px 104px; }
  .sf-header { margin-bottom: 12px; }
  .sf-menu { width: 56px; height: 54px; border-radius: 19px; }
  .sf-hero {
    padding: 22px 20px;
    border-radius: 25px;
  }
  .sf-hero::after {
    right: 4%;
    bottom: 32%;
    font-size: 104px;
    -webkit-text-stroke-width: 4px;
    opacity: .42;
  }
  .sf-hero h1 {
    font-size: 40px;
    margin: 18px 0 11px;
    position: relative;
    z-index: 2;
  }
  .sf-hero p { font-size: 14.5px; max-width: 92%; position: relative; z-index: 2; }
  .sf-proof-row {
    margin-top: 18px;
    gap: 0;
    padding: 8px;
    border-radius: 19px;
  }
  .sf-proof-row div { padding: 5px 7px; }
  .sf-proof-row b { font-size: 12.5px; }
  .sf-proof-row small { font-size: 10.5px; }
  .sf-cs-card { min-height: 78px; border-radius: 22px; padding: 13px 14px; }
  .sf-cs-icon { width: 48px; height: 48px; border-radius: 17px; }
  .sf-cs-card i { width: 34px; height: 34px; font-size: 25px; }
  .sf-section-title {
    margin: 26px 0 15px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .sf-section-title::after { display: none; }
  .sf-section-title h2 { font-size: 30px; }
  .sf-section-title p { font-size: 13.5px; }
  .sf-section-title a { font-size: 16px; }
  .sf-product-card { padding: 20px; border-radius: 24px; }
  .sf-card-top span { font-size: 11px; }
  .sf-product-icon { width: 58px; height: 58px; border-radius: 18px; font-size: 27px; }
  .sf-product-card h3 { font-size: 25px; margin: 18px 0 10px; }
  .sf-product-card p { font-size: 14px; line-height: 1.56; }
  .sf-product-card strong { font-size: 30px; }
  .sf-order-btn { min-height: 50px; font-size: 15px; }
  .sf-bottom-nav { left: 14px; right: 14px; bottom: 10px; border-radius: 24px; }
}


/* ===== HOMEPAGE SUPER LIVE FINAL ===== */
.storefront-body {
  background:
    radial-gradient(circle at 12% -8%, rgba(255, 176, 0, .28), transparent 24%),
    radial-gradient(circle at 90% 8%, rgba(0, 180, 255, .22), transparent 26%),
    radial-gradient(circle at 50% 35%, rgba(184, 52, 255, .22), transparent 27%),
    linear-gradient(180deg, #030611 0%, #07101c 42%, #050711 100%) !important;
}
.sf-bg-live { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.sf-bg-live .orb { position: absolute; width: 260px; height: 260px; border-radius: 999px; filter: blur(48px); opacity: .45; animation: sfFloatOrb 9s ease-in-out infinite; }
.sf-bg-live .orb-a { top: 4%; left: -80px; background: #ff9f00; }
.sf-bg-live .orb-b { top: 18%; right: -90px; background: #a855f7; animation-delay: -3s; }
.sf-bg-live .orb-c { bottom: 14%; left: 18%; background: #00aaff; animation-delay: -5s; opacity: .25; }
.sf-bg-live .grid-glow { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(180deg, black, transparent 80%); animation: sfGridMove 16s linear infinite; opacity: .28; }
.sf-header { padding: 6px 0 10px; position: sticky; top: 0; z-index: 40; backdrop-filter: blur(12px); }
.sf-brand span:last-child { text-shadow: 0 0 18px rgba(255,255,255,.16); }
.sf-logo { animation: sfLogoBounce 4s ease-in-out infinite; box-shadow: 0 0 26px rgba(255, 196, 0, .32), inset 0 0 0 1px rgba(255,255,255,.28) !important; }
.sf-menu { position: relative; overflow: hidden; box-shadow: 0 0 28px rgba(168,85,247,.18), inset 0 0 0 1px rgba(255,255,255,.06) !important; }
.sf-menu::before { content:""; position:absolute; inset:-2px; background: linear-gradient(130deg, transparent, rgba(255,255,255,.22), transparent); transform: translateX(-120%); animation: sfShine 4.2s ease-in-out infinite; }
.sf-menu span { position: relative; z-index: 1; }

.sf-hero-super { isolation: isolate; min-height: 420px !important; grid-template-columns: 1fr .95fr !important; background:
    radial-gradient(circle at 82% 56%, rgba(0, 183, 255, .30), transparent 18%),
    radial-gradient(circle at 78% 18%, rgba(255, 116, 0, .28), transparent 22%),
    linear-gradient(118deg, rgba(9, 12, 36, .97) 0%, rgba(40, 12, 91, .92) 50%, rgba(18, 30, 78, .98) 100%) !important;
  border-color: rgba(198, 92, 255, .42) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 0 52px rgba(168,85,247,.22), 0 24px 110px rgba(0,0,0,.46) !important;
}
.sf-hero-super::before { background: linear-gradient(110deg, transparent 0 16%, rgba(255,255,255,.12) 16.2%, transparent 16.7% 100%), radial-gradient(circle at 30% 24%, rgba(255,255,255,.13), transparent 3%), radial-gradient(circle at 70% 20%, rgba(255,117,0,.26), transparent 4%) !important; animation: sfHeroLight 7s ease-in-out infinite; }
.sf-hero-super::after { background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.28)), radial-gradient(circle at 82% 60%, rgba(255,91,0,.16), transparent 28%) !important; }
.sf-pill { position: relative; overflow: hidden; padding-left: 14px !important; background: rgba(9,10,20,.62) !important; border-color: rgba(255, 74, 122, .55) !important; box-shadow: 0 0 28px rgba(255, 64, 135, .28), inset 0 0 0 1px rgba(255,255,255,.05) !important; }
.sf-pulse-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #ff344d; box-shadow: 0 0 0 0 rgba(255,52,77,.6); animation: sfPulseDot 1.6s infinite; }
.sf-hero h1 { text-shadow: 0 0 24px rgba(255,255,255,.12), 0 24px 50px rgba(0,0,0,.42) !important; }
.sf-hero h1 span { background: linear-gradient(90deg, #ffbf00 0%, #ff547d 45%, #9a5cff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.sf-proof-row { background: rgba(3,7,18,.56) !important; box-shadow: 0 0 32px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.05); }
.sf-proof-row div { border-radius: 16px; transition: .25s ease; }
.sf-proof-row div:hover { background: rgba(255,255,255,.06); transform: translateY(-2px); }
.sf-lightning-art { min-height: 300px; perspective: 900px; }
.sf-neon-platform { position: absolute; width: 270px; height: 84px; border-radius: 50%; bottom: 64px; background: radial-gradient(ellipse at center, rgba(255,115,0,.45), rgba(152,66,255,.16) 45%, transparent 70%); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 0 34px rgba(255,116,0,.32), 0 0 55px rgba(0,166,255,.18); transform: rotateX(66deg); animation: sfPlatform 4s ease-in-out infinite; }
.sf-lightning-bolt { position: relative; z-index: 2; font-size: clamp(116px, 15vw, 210px); line-height: 1; filter: drop-shadow(0 0 16px rgba(255,196,0,.8)) drop-shadow(0 0 40px rgba(181,76,255,.55)); transform: rotate(-8deg); animation: sfBolt 2.8s ease-in-out infinite; }
.sf-spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 18px #fff, 0 0 34px #ff6b00; animation: sfSpark 3s ease-in-out infinite; }
.spark-1 { top: 24%; right: 22%; }
.spark-2 { top: 60%; right: 12%; animation-delay: -1s; }
.spark-3 { top: 34%; left: 20%; animation-delay: -1.8s; }

.sf-live-strip { display: flex; gap: 10px; overflow: hidden; margin: 18px 0 18px; padding: 10px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }
.sf-live-strip span { flex: 0 0 auto; padding: 9px 14px; border-radius: 999px; color: #e5e7eb; font-size: 12px; font-weight: 900; background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.10); animation: sfTicker 13s linear infinite; }

.sf-cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.sf-cs-card { min-height: 118px !important; overflow: hidden; transform: translateZ(0); transition: .28s ease; }
.sf-cs-card:hover { transform: translateY(-3px) scale(1.01); }
.sf-cs-card::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 85% 42%, rgba(255,255,255,.22), transparent 16%), linear-gradient(110deg, transparent 20%, rgba(255,255,255,.18) 46%, transparent 60%); transform: translateX(-130%); animation: sfCardSweep 5s ease-in-out infinite; }
.sf-cs-icon { box-shadow: 0 0 28px rgba(255,255,255,.20), inset 0 0 0 1px rgba(255,255,255,.12); }
.sf-cs-card.whatsapp .sf-cs-icon { background: linear-gradient(135deg, #30ff69, #06a82a); }
.sf-cs-card.telegram .sf-cs-icon { background: linear-gradient(135deg, #42d8ff, #0075ff); }
.sf-cs-card i { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); animation: sfArrowNudge 1.8s ease-in-out infinite; }

.sf-section-title { position: relative; }
.sf-section-title::after { content:""; flex: 1; height: 1px; min-width: 110px; background: linear-gradient(90deg, rgba(255,132,0,.8), transparent); margin: 0 auto 18px; }
.sf-title-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; margin-right: 8px; background: rgba(168,85,247,.14); color: #d946ef; box-shadow: 0 0 22px rgba(168,85,247,.22); vertical-align: middle; }
.sf-title-icon.gem { color: #c084fc; }
.sf-products { grid-template-columns: 1fr !important; gap: 18px !important; }
.sf-product-card { min-height: 0 !important; display: grid !important; grid-template-columns: auto 1fr; column-gap: 22px; padding: 26px !important; border-radius: 28px !important; overflow: hidden; }
.sf-product-card::after { content:""; position:absolute; inset:-2px; background: linear-gradient(120deg, transparent, rgba(255,255,255,.15), transparent); transform: translateX(-125%); animation: sfShine 6s ease-in-out infinite; pointer-events:none; }
.sf-product-card.purple { background: linear-gradient(135deg, rgba(91,28,155,.34), rgba(5,10,24,.82) 58%) !important; border-color: rgba(210,85,255,.46) !important; box-shadow: 0 0 30px rgba(193,58,255,.15), inset 0 0 0 1px rgba(255,255,255,.04); }
.sf-product-card.blue { background: linear-gradient(135deg, rgba(14,118,255,.28), rgba(5,10,24,.82) 58%) !important; }
.sf-product-card.orange { background: linear-gradient(135deg, rgba(255,122,0,.22), rgba(5,10,24,.82) 58%) !important; }
.sf-card-top { grid-row: span 4; display: grid !important; align-content: start; justify-items: start; gap: 12px !important; }
.sf-product-icon { width: 104px !important; height: 104px !important; border-radius: 28px !important; font-size: 46px !important; background: radial-gradient(circle at 35% 18%, rgba(255,255,255,.30), transparent 28%), linear-gradient(135deg, rgba(151, 49, 255, .34), rgba(0, 206, 255, .08)) !important; box-shadow: 0 0 38px rgba(168,85,247,.26), inset 0 0 0 1px rgba(255,255,255,.14) !important; animation: sfIconFloat 4s ease-in-out infinite; }
.sf-card-top span { background: linear-gradient(135deg, #ffe600, #ff9b00) !important; color: #171000 !important; border: 0 !important; box-shadow: 0 0 22px rgba(255, 196, 0, .25); }
.sf-product-card h3 { margin: 4px 0 8px !important; font-size: clamp(25px, 4.4vw, 36px) !important; }
.sf-product-card p { min-height: 0 !important; margin: 0 0 12px; }
.sf-mini-features { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.sf-mini-features span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 999px; color: #dbeafe; font-size: 12px; font-weight: 850; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); }
.sf-card-line { margin: 6px 0 12px !important; background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(168,85,247,.18), transparent) !important; }
.sf-order-btn { position: relative; justify-self: start; min-width: 220px; background: linear-gradient(135deg, #ff8a00, #ff3b8a 45%, #7c3aed) !important; box-shadow: 0 0 34px rgba(236,72,153,.28), 0 16px 38px rgba(0,0,0,.26) !important; overflow: hidden; }
.sf-order-btn::before { content:""; position:absolute; inset:0; background: linear-gradient(110deg, transparent, rgba(255,255,255,.22), transparent); transform: translateX(-120%); animation: sfShine 3.8s ease-in-out infinite; }
.sf-order-btn > * { position: relative; }
.sf-why { padding: 24px; border-radius: 30px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); }
.sf-why-grid div { position: relative; overflow: hidden; transition: .24s ease; }
.sf-why-grid div:hover { transform: translateY(-3px); border-color: rgba(168,85,247,.36); }
.sf-why-grid div::after { content:""; position:absolute; inset:auto 16px 10px 16px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, #a855f7, #22c55e, #0ea5e9); opacity: .55; animation: sfBar 3s linear infinite; }
.sf-bottom-nav { backdrop-filter: blur(22px) !important; background: rgba(5, 9, 20, .82) !important; border-color: rgba(255,255,255,.18) !important; box-shadow: 0 0 42px rgba(168,85,247,.14), 0 28px 70px rgba(0,0,0,.48) !important; }
.sf-bottom-nav a { transition: .24s ease; }
.sf-bottom-nav a:hover { transform: translateY(-2px); color: #fff; }
.sf-bottom-nav a.active { background: linear-gradient(135deg, rgba(130,45,255,.48), rgba(255,132,0,.16)) !important; color: #fff0b8 !important; box-shadow: 0 0 30px rgba(168,85,247,.26), inset 0 0 0 1px rgba(255,213,89,.28) !important; }

@keyframes sfFloatOrb { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(28px,18px,0) scale(1.08); } }
@keyframes sfGridMove { from { background-position: 0 0; } to { background-position: 34px 34px; } }
@keyframes sfLogoBounce { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-2px) rotate(1deg); } }
@keyframes sfShine { 0%,55% { transform: translateX(-125%); } 75%,100% { transform: translateX(125%); } }
@keyframes sfHeroLight { 0%,100% { opacity:.35; } 50% { opacity:.72; } }
@keyframes sfPulseDot { 0% { box-shadow:0 0 0 0 rgba(255,52,77,.7); } 70% { box-shadow:0 0 0 10px rgba(255,52,77,0); } 100% { box-shadow:0 0 0 0 rgba(255,52,77,0); } }
@keyframes sfBolt { 0%,100% { transform: rotate(-8deg) translateY(0) scale(1); } 50% { transform: rotate(-5deg) translateY(-9px) scale(1.04); } }
@keyframes sfPlatform { 0%,100% { transform: rotateX(66deg) scale(1); opacity:.88; } 50% { transform: rotateX(66deg) scale(1.08); opacity:1; } }
@keyframes sfSpark { 0%,100% { opacity:.18; transform: scale(.7); } 50% { opacity:1; transform: scale(1.4); } }
@keyframes sfTicker { 0% { transform: translateX(0); } 100% { transform: translateX(-28px); } }
@keyframes sfCardSweep { 0%,55% { transform: translateX(-130%); } 75%,100% { transform: translateX(130%); } }
@keyframes sfArrowNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes sfIconFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sfBar { from { filter: hue-rotate(0); } to { filter: hue-rotate(360deg); } }

@media (max-width: 920px) {
  .sf-hero-super { grid-template-columns: 1fr !important; min-height: 390px !important; }
  .sf-lightning-art { display: none !important; }
  .sf-cs-grid { grid-template-columns: 1fr !important; }
  .sf-product-card { grid-template-columns: 1fr !important; }
  .sf-card-top { grid-row: auto; display: flex !important; }
}
@media (max-width: 520px) {
  .store-shell { padding-left: 20px; padding-right: 20px; }
  .sf-hero-super { min-height: 388px !important; padding: 27px 26px !important; }
  .sf-hero h1 { font-size: clamp(40px, 10.2vw, 56px) !important; }
  .sf-proof-row { grid-template-columns: repeat(3, minmax(0,1fr)) !important; padding: 10px !important; }
  .sf-proof-row div { border-right: 1px solid rgba(255,255,255,.12) !important; border-bottom: 0 !important; padding: 7px 6px !important; }
  .sf-proof-row div:last-child { border-right: 0 !important; }
  .sf-proof-row b { font-size: 13px !important; }
  .sf-proof-row small { font-size: 11px !important; }
  .sf-live-strip { border-radius: 20px; }
  .sf-live-strip span { animation-duration: 9s; }
  .sf-cs-card { min-height: 96px !important; }
  .sf-section-title::after { display: none; }
  .sf-product-card { padding: 24px !important; }
  .sf-product-icon { width: 82px !important; height: 82px !important; font-size: 36px !important; }
  .sf-order-btn { width: 100%; min-width: 0; }
  .sf-why { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-bg-live *, .sf-logo, .sf-menu::before, .sf-hero-super::before, .sf-pulse-dot, .sf-lightning-bolt, .sf-neon-platform, .sf-spark, .sf-live-strip span, .sf-cs-card::after, .sf-cs-card i, .sf-product-card::after, .sf-product-icon, .sf-order-btn::before, .sf-why-grid div::after { animation: none !important; }
}


/* ============================================================
   REDESIGN v3 — Konsisten, Premium, Tidak Nampak AI
   Design language: dark monochrome + aksen neon amber/cyan
   Font: Syne (display), DM Sans (body) — via Google Fonts
   ============================================================ */

/* --- Base font import --- */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800;900&family=DM+Sans:wght@400;500;700;900&display=swap');

/* --- Shared layout shell untuk halaman non-storefront --- */
.page-shell {
  min-height: 100vh;
  background: #06080e;
  color: #e8ecf2;
  font-family: 'DM Sans', sans-serif;
  padding-bottom: 48px;
}

/* --- Top bar (checkout, orders, invoice, success) --- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(6,8,14,.92);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.topbar-logo {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 16px;
  color: #06080e;
  background: linear-gradient(135deg, #ff4500, #ffb000 60%, #fff06a);
  clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%);
}
.topbar-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.topbar-nav a {
  text-decoration: none;
  color: rgba(255,255,255,.72);
  font-weight: 700;
  font-size: 14px;
  padding: 9px 15px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  transition: .18s;
}
.topbar-nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.topbar-nav a.back-link {
  background: transparent;
  border-color: transparent;
  gap: 6px;
  display: flex;
  align-items: center;
}
.topbar-nav a.back-link::before { content: "←"; }

/* --- Page Content Wrappers --- */
.page-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 38px 28px;
}
.page-content.narrow {
  max-width: 560px;
}
.page-content.wide {
  max-width: 1100px;
}

/* --- Section Label --- */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffd275;
  background: rgba(255,176,0,.10);
  border: 1px solid rgba(255,176,0,.22);
  margin-bottom: 14px;
}

/* --- Glass Card --- */
.glass-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 24px;
  background: linear-gradient(130deg, rgba(255,255,255,.07) 0%, transparent 44%);
}

/* ============================================================
   CHECKOUT — Redesign
   ============================================================ */
.checkout-page { background: #06080e; }

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 28px;
  align-items: start;
}

.checkout-product-info {
  position: sticky;
  top: 88px;
  padding: 30px;
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(255,135,0,.12) 0%, rgba(6,8,14,.92));
  border: 1px solid rgba(255,135,0,.22);
}

.checkout-product-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 34px;
  background: rgba(255,135,0,.14);
  border: 1px solid rgba(255,135,0,.20);
  margin-bottom: 20px;
}

.checkout-product-name {
  font-family: 'Syne', sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.04em;
  margin: 0 0 8px;
}

.checkout-product-desc {
  color: rgba(255,255,255,.58);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 24px;
}

.checkout-price-display {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 18px;
}

.checkout-price-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.5);
  display: block;
  margin-bottom: 4px;
}

.checkout-price-value {
  font-family: 'Syne', sans-serif;
  font-size: 38px;
  font-weight: 900;
  color: #ffd275;
  letter-spacing: -0.04em;
}

.checkout-flow-info {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(0,200,255,.06);
  border: 1px solid rgba(0,200,255,.16);
  font-size: 13px;
  color: rgba(255,255,255,.70);
  line-height: 1.6;
}
.checkout-flow-info b { color: #7df0ff; }

.checkout-buyer-info {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
  color: rgba(255,255,255,.60);
  line-height: 1.7;
}
.checkout-buyer-info b { color: rgba(255,255,255,.88); }

.checkout-form-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 28px;
  padding: 32px;
}

.form-group {
  margin-bottom: 18px;
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin-bottom: 8px;
}

.form-field {
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  outline: none;
  font-family: 'DM Sans', sans-serif;
  transition: border-color .18s, box-shadow .18s;
  box-sizing: border-box;
}

.form-field:focus {
  border-color: rgba(255,180,0,.65);
  box-shadow: 0 0 0 4px rgba(255,180,0,.10);
}

.form-field::placeholder { color: rgba(255,255,255,.35); font-weight: 500; }

select.form-field option { background: #12161f; color: #e8ecf2; }

textarea.form-field {
  resize: vertical;
  min-height: 90px;
}

.form-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.4);
  line-height: 1.45;
}

.form-error {
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.25);
  color: #fca5a5;
  font-size: 14px;
  margin-bottom: 18px;
  line-height: 1.5;
}

.form-error b { color: #fecaca; }

.submit-btn {
  width: 100%;
  min-height: 58px;
  padding: 0 24px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffd000, #ff9500 48%, #ff4500);
  color: #0c0700;
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 16px 40px rgba(255,130,0,.32);
  transition: .18s;
  letter-spacing: -.01em;
  margin-top: 8px;
}

.submit-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 22px 50px rgba(255,130,0,.4);
}

.submit-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@media (max-width: 780px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-product-info { position: static; }
  .page-content { padding: 24px 18px; }
  .glass-card, .checkout-form-card { padding: 22px 18px; }
  .topbar { padding: 14px 18px; }
}

/* ============================================================
   SUCCESS PAGE — Redesign
   ============================================================ */
.success-page {
  background: #06080e;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.success-wrap {
  max-width: 600px;
  margin: 0 auto;
  padding: 38px 24px 56px;
  width: 100%;
}

.success-header-card {
  padding: 36px;
  border-radius: 28px;
  text-align: center;
  margin-bottom: 18px;
  background: linear-gradient(160deg, rgba(34,197,94,.14) 0%, rgba(6,8,14,.92));
  border: 1px solid rgba(34,197,94,.22);
  position: relative;
  overflow: hidden;
}

.success-header-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(34,197,94,.22), transparent 72%);
  pointer-events: none;
}

.success-icon-wrap {
  width: 80px;
  height: 80px;
  margin: 0 auto 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 36px;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  box-shadow: 0 0 48px rgba(34,197,94,.42);
  position: relative;
  z-index: 1;
}

.success-title {
  font-family: 'Syne', sans-serif;
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.05em;
  margin: 0 0 8px;
  position: relative;
  z-index: 1;
}

.success-subtitle {
  color: rgba(255,255,255,.60);
  font-size: 15px;
  margin: 0;
  position: relative;
  z-index: 1;
}

.detail-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  padding: 22px 26px;
  margin-bottom: 14px;
}

.detail-card-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.detail-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 14px;
}

.detail-row:last-child { border-bottom: 0; padding-bottom: 0; }

.detail-key {
  color: rgba(255,255,255,.50);
  white-space: nowrap;
  font-weight: 600;
}

.detail-val {
  color: #e8ecf2;
  font-weight: 700;
  text-align: right;
  word-break: break-all;
}

.detail-val code {
  background: rgba(255,255,255,.08);
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-family: monospace;
}

.provision-success-card {
  padding: 20px 24px;
  border-radius: 20px;
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.24);
  margin-bottom: 14px;
}

.provision-success-card .label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #86efac;
  margin-bottom: 12px;
  display: block;
}

.provision-fail-card {
  padding: 20px 24px;
  border-radius: 20px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.22);
  margin-bottom: 14px;
  font-size: 14px;
  color: #fca5a5;
  line-height: 1.6;
}

.provision-fail-card b { color: #fecaca; display: block; margin-bottom: 6px; }

.provision-info-card {
  padding: 16px 20px;
  border-radius: 18px;
  background: rgba(56,189,248,.07);
  border: 1px solid rgba(56,189,248,.18);
  font-size: 14px;
  color: rgba(255,255,255,.65);
  margin-bottom: 14px;
  line-height: 1.6;
}

.success-actions {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  border-radius: 16px;
  font-weight: 900;
  font-size: 15px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: .18s;
  font-family: 'DM Sans', sans-serif;
}

.action-btn.primary {
  background: linear-gradient(135deg, #ffd000, #ff8a00 50%, #ff4500);
  color: #0c0700;
  box-shadow: 0 14px 36px rgba(255,130,0,.28);
}

.action-btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

.action-btn.secondary {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.80);
}

.action-btn.secondary:hover { background: rgba(255,255,255,.12); color: #fff; }

.action-btn.download {
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #fff;
  box-shadow: 0 14px 36px rgba(99,102,241,.28);
}

/* ============================================================
   USER ORDERS — Redesign
   ============================================================ */
.orders-page { background: #06080e; }

.orders-page-header {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.orders-page-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(30px, 6vw, 44px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.06em;
  margin: 0 0 6px;
}

.orders-page-sub {
  color: rgba(255,255,255,.48);
  font-size: 15px;
  margin: 0;
}

.orders-page-sub b { color: rgba(255,255,255,.72); font-weight: 700; }

/* Filter pills */
.filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.filter-pill {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  transition: .18s;
}

.filter-pill:hover { background: rgba(255,255,255,.12); color: #fff; }
.filter-pill.active {
  background: rgba(255,176,0,.14);
  border-color: rgba(255,176,0,.36);
  color: #ffd275;
}

/* Order list items */
.order-list {
  display: grid;
  gap: 12px;
}

.order-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  transition: .18s;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}

.order-item:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
}

.order-item-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: rgba(255,255,255,.08);
  flex: 0 0 48px;
}

.order-item-main {}

.order-item-name {
  font-weight: 800;
  font-size: 15px;
  color: #e8ecf2;
  margin: 0 0 3px;
}

.order-item-meta {
  font-size: 13px;
  color: rgba(255,255,255,.45);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.order-item-meta code {
  background: rgba(255,255,255,.08);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11px;
}

.order-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: 120px;
}

.order-item-amount {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 900;
  color: #ffd275;
  letter-spacing: -0.02em;
}

.order-item-actions {
  display: flex;
  gap: 6px;
}

.order-action-link {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.75);
  transition: .15s;
}

.order-action-link:hover { background: rgba(255,255,255,.14); color: #fff; }

.order-action-link.download-link {
  background: rgba(99,102,241,.14);
  border-color: rgba(99,102,241,.28);
  color: #c7d2fe;
}

/* Status badges */
.status-tag {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.status-tag.pending { color: #fde68a; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.24); }
.status-tag.paid, .status-tag.processed, .status-tag.berhasil { color: #86efac; background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.22); }
.status-tag.expired, .status-tag.cancelled { color: #fca5a5; background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.20); }

.empty-state {
  text-align: center;
  padding: 64px 24px;
  color: rgba(255,255,255,.38);
}

.empty-state .icon { font-size: 48px; margin-bottom: 12px; }
.empty-state h3 { font-family: 'Syne', sans-serif; font-size: 22px; color: rgba(255,255,255,.55); margin: 0 0 8px; }
.empty-state p { font-size: 15px; margin: 0 0 22px; }

.empty-cta {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffd000, #ff8a00);
  color: #0c0700;
  font-weight: 900;
  text-decoration: none;
}

@media (max-width: 600px) {
  .order-item { grid-template-columns: auto 1fr; gap: 12px; padding: 14px 16px; }
  .order-item-right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; min-width: 0; }
}

/* ============================================================
   INVOICE — Redesign
   ============================================================ */
.invoice-page { background: #06080e; }

.invoice-wrap-v2 {
  max-width: 640px;
  margin: 0 auto;
  padding: 36px 24px 56px;
}

.invoice-head-v2 {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 28px;
}

.invoice-product-name {
  font-family: 'Syne', sans-serif;
  font-size: clamp(26px, 6vw, 36px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.05em;
  margin: 0 0 6px;
}

.invoice-id {
  font-size: 13px;
  color: rgba(255,255,255,.45);
}

.invoice-id code {
  background: rgba(255,255,255,.08);
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 12px;
}

/* Status badge (big, for invoice) */
.invoice-status-badge {
  display: inline-flex;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.invoice-status-badge.pending { color: #fde68a; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.28); }
.invoice-status-badge.paid, .invoice-status-badge.processed { color: #86efac; background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.24); }
.invoice-status-badge.expired, .invoice-status-badge.cancelled { color: #fca5a5; background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.22); }

/* QRIS area */
.qris-container {
  margin: 0 0 20px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.qris-img-frame {
  width: min(280px, 100%);
  background: #fff;
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 0 48px rgba(255,255,255,.06);
}

.qris-img-frame img {
  width: 100%;
  display: block;
  border-radius: 12px;
}

.qris-missing-v2 {
  width: min(280px, 100%);
  height: 200px;
  background: #fff;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: rgba(0,0,0,.4);
  font-size: 14px;
  padding: 20px;
  text-align: center;
}

.qris-amount-box {
  text-align: center;
  padding: 16px 24px;
  border-radius: 16px;
  background: rgba(255,180,0,.08);
  border: 1px solid rgba(255,180,0,.18);
  width: 100%;
}

.qris-amount-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,200,80,.70);
  display: block;
  margin-bottom: 4px;
}

.qris-amount-value {
  font-family: 'Syne', sans-serif;
  font-size: 36px;
  font-weight: 900;
  color: #ffd275;
  letter-spacing: -0.04em;
  display: block;
}

.qris-unique-hint {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  margin-top: 4px;
  display: block;
}

/* Invoice info rows */
.invoice-detail-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 14px;
}

.invoice-detail-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 14px;
}

.invoice-detail-row:last-child { border-bottom: 0; }

.invoice-detail-key { color: rgba(255,255,255,.48); font-weight: 600; white-space: nowrap; }

.invoice-detail-val {
  color: #e8ecf2;
  font-weight: 700;
  text-align: right;
  word-break: break-word;
  max-width: 60%;
}

.invoice-detail-val code {
  background: rgba(255,255,255,.08);
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-family: monospace;
}

/* Payment note */
.payment-note {
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(56,189,248,.07);
  border: 1px solid rgba(56,189,248,.16);
  color: rgba(255,255,255,.65);
  font-size: 13px;
  line-height: 1.65;
  margin-top: 14px;
}

.payment-note b { color: #7df0ff; }

@media (max-width: 520px) {
  .invoice-wrap-v2 { padding: 22px 16px 48px; }
  .invoice-head-v2 { flex-direction: column; }
  .invoice-detail-val { max-width: 55%; }
}



/* ===== PATCH: tombol produk lebih kecil + script hanya produk admin ===== */
.sf-product-card .sf-order-btn {
  width: min(220px, 76%) !important;
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  border-radius: 15px !important;
  font-size: 14px !important;
  justify-self: start !important;
}
.sf-product-card .sf-order-btn b {
  font-size: 22px !important;
}
@media (max-width: 520px) {
  .sf-product-card .sf-order-btn {
    width: min(205px, 74%) !important;
    min-height: 44px !important;
    font-size: 13.5px !important;
  }
}

/* ===== LIST SCRIPT COMPACT V2 - START ===== */
/* Script di homepage jadi 1 card, card dan tombol dibuat lebih kecil khusus produk. */
.sf-products {
  gap: 14px !important;
}

.script-products-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 90px;
}

.script-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 2px 0 8px;
}
.script-meta-row span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(226,232,240,.80);
  font-size: 11px;
  font-weight: 800;
}

.sf-product-card .sf-order-btn {
  width: auto !important;
  min-width: 132px !important;
  max-width: 178px !important;
  min-height: 35px !important;
  padding: 0 13px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  gap: 5px !important;
  justify-self: start !important;
}
.sf-product-card .sf-order-btn b {
  font-size: 16px !important;
  line-height: 1 !important;
}

@media (max-width: 720px) {
  .sf-products { gap: 14px !important; }
  .sf-product-card {
    min-height: 0 !important;
    padding: 16px !important;
    border-radius: 22px !important;
    grid-template-columns: auto 1fr !important;
    column-gap: 13px !important;
    row-gap: 5px !important;
  }
  .sf-card-top {
    grid-row: 1 / span 4 !important;
    display: grid !important;
    align-content: start !important;
    justify-items: start !important;
    gap: 8px !important;
  }
  .sf-product-icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 17px !important;
    font-size: 25px !important;
  }
  .sf-card-top span {
    padding: 5px 8px !important;
    font-size: 9.5px !important;
  }
  .sf-product-card h3 {
    margin: 2px 0 5px !important;
    font-size: 22px !important;
    line-height: 1.08 !important;
  }
  .sf-product-card p {
    min-height: 0 !important;
    margin: 0 0 7px !important;
    font-size: 12.5px !important;
    line-height: 1.42 !important;
  }
  .sf-mini-features {
    gap: 5px !important;
    margin: 1px 0 7px !important;
  }
  .sf-mini-features span {
    padding: 5px 7px !important;
    font-size: 10px !important;
  }
  .sf-card-line {
    margin: 4px 0 8px !important;
  }
  .sf-product-card small {
    font-size: 11.5px !important;
  }
  .sf-product-card strong {
    margin: 1px 0 9px !important;
    font-size: 24px !important;
    line-height: 1.06 !important;
  }
  .sf-product-card .sf-order-btn {
    min-width: 126px !important;
    max-width: 160px !important;
    min-height: 33px !important;
    padding: 0 12px !important;
    border-radius: 11px !important;
    font-size: 11.5px !important;
  }
}

@media (max-width: 420px) {
  .store-shell {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .sf-product-card {
    padding: 14px !important;
    border-radius: 20px !important;
    column-gap: 11px !important;
  }
  .sf-product-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    font-size: 23px !important;
  }
  .sf-product-card h3 { font-size: 20px !important; }
  .sf-product-card p { font-size: 12px !important; }
  .sf-mini-features span { font-size: 9.5px !important; padding: 4px 6px !important; }
  .sf-product-card strong { font-size: 23px !important; }
  .sf-product-card .sf-order-btn {
    min-width: 118px !important;
    max-width: 150px !important;
    min-height: 32px !important;
    font-size: 11px !important;
  }
}
/* ===== LIST SCRIPT COMPACT V2 - END ===== */

/* ===== FIX BOTTOM NAV FIXED START ===== */
/* Menu bawah homepage dibuat fixed: tidak ikut naik/turun saat scroll */
.sf-bottom-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) !important;
  width: min(620px, calc(100vw - 28px)) !important;
  max-width: 620px !important;
  margin: 0 !important;
  z-index: 99999 !important;
}

/* Kasih ruang di bawah supaya konten tidak ketutup menu fixed */
.store-shell,
.storefront-body .store-shell {
  padding-bottom: calc(125px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width: 720px) {
  .sf-bottom-nav {
    left: 50% !important;
    right: auto !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    width: min(626px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
  }
}
/* ===== FIX BOTTOM NAV FIXED END ===== */

/* ===== DARK LITE THEME OVERRIDE START =====
   Request: background dibuat hitam/gelap dan lebih ringan.
   Perubahan ini hanya override tampilan, tidak mengubah alur order/payment/API.
===== */
:root {
  --bg: #05060a;
  --bg2: #090d14;
  --card: rgba(10, 14, 23, 0.94);
  --border: rgba(255, 255, 255, 0.10);
  --text: #f4f7fb;
  --muted: #9aa6b8;
  --primary: #f59e0b;
  --primary2: #f97316;
}
html,
body {
  background: #05060a !important;
  color: var(--text) !important;
}
body {
  background-image: none !important;
}
.card,
.hero-card,
.checkout-card,
.invoice-wrap,
.invoice-wrap-v2,
.success-card,
.form-card,
.table-wrap,
.user-card,
.dash-progress-card,
.user-orders-section,
.panel-order-card,
.upload-script-card,
.admin-layout .card {
  background: rgba(10, 14, 23, 0.92) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 16px 45px rgba(0,0,0,.28) !important;
}
input,
textarea,
select {
  background: rgba(4, 7, 13, .88) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #f8fafc !important;
}
select option {
  background: #090d14 !important;
  color: #f8fafc !important;
}
/* ===== DARK LITE THEME OVERRIDE END ===== */


/* ===== DARK PREMIUM CYAN THEME OVERRIDE START =====
   Versi preview: hitam navy + card gelap + aksen biru/cyan.
   Tetap ringan: tidak menyalakan canvas/aurora/cursor/tilt berat.
===== */
:root {
  --bg: #050713;
  --bg2: #07111f;
  --card: rgba(10, 18, 32, 0.94);
  --card2: rgba(15, 23, 42, 0.96);
  --border: rgba(148, 163, 184, 0.16);
  --text: #f8fafc;
  --muted: #97a6ba;
  --primary: #38bdf8;
  --primary2: #2563eb;
  --accent: #22d3ee;
  --good: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
}
html,
body,
.page-shell,
.storefront-body,
.user-dashboard-page,
.orders-page,
.invoice-page,
.success-page,
.po-page {
  background: #050713 !important;
  color: #f8fafc !important;
}
body {
  background-image:
    radial-gradient(circle at 12% 0%, rgba(37, 99, 235, .20), transparent 28%),
    radial-gradient(circle at 86% 8%, rgba(34, 211, 238, .11), transparent 30%),
    linear-gradient(180deg, #050713 0%, #07101d 48%, #050713 100%) !important;
}
body::before,
.storefront-body::before,
.sf-bg-live,
.sf-bg-live .orb,
.sf-bg-live .grid-glow,
.vfx-aurora,
.vfx-orb,
#vfx-canvas,
#vfx-cursor-dot,
#vfx-cursor-ring {
  display: none !important;
}
.store-shell,
.container,
.page-content,
.admin-main,
.adm-main,
.user-dash-shell {
  position: relative !important;
  z-index: 1 !important;
}
.sf-header,
.sf-nav-pop,
.sf-bottom-nav,
.topbar,
.sidebar,
.adm-sidebar,
.adm-topbar,
.adm-mobile-bar,
.user-dash-header,
.user-bottom-nav-live,
.user-topbar,
.user-bottom-nav {
  background: rgba(5, 10, 22, .90) !important;
  border: 1px solid rgba(148,163,184,.14) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.34) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.sf-brand,
.topbar-brand,
.user-brand,
.adm-brand {
  color: #f8fafc !important;
}
.sf-logo,
.topbar-logo,
.user-avatar-live,
.user-avatar,
.adm-brand-mark,
.adm-login-mark,
.checkout-product-icon,
.sf-product-icon,
.cs-popup-avatar {
  background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 12px 34px rgba(37,99,235,.24) !important;
  clip-path: none !important;
}
.sf-hero,
.hero,
.user-hero-live,
.auth-hero,
.adm-top-card,
.success-header-card,
.checkout-product-info,
.checkout-form-card,
.po-header,
.po-card,
.invoice-wrap-v2,
.checkout-card,
.invoice-wrap,
.success-card {
  background:
    linear-gradient(135deg, rgba(15,23,42,.98), rgba(8,15,29,.96) 58%, rgba(10,24,42,.96)) !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.40) !important;
}
.sf-hero::before,
.sf-hero::after,
.sf-hero-super::before,
.sf-hero-super::after,
.auth-hero::before,
.user-hero-live::before,
.checkout-product-info::before,
.checkout-form-card::before,
.adm-top-card::before {
  opacity: .09 !important;
  animation: none !important;
}
.sf-hero h1,
.sf-hero h1 span,
.hero h1,
.section-head h2,
.sf-section-title h2,
.sf-why h2,
.checkout-product-name,
.checkout-price-value,
.po-title,
.user-section-title-live h2,
.user-hero-live h1,
.orders-page-title,
.invoice-product-name,
.success-title,
.adm-page-title,
.adm-login-title,
.card h1,
.card h2,
.card h3,
.sf-product-card h3 {
  color: #f8fafc !important;
  text-shadow: none !important;
}
.sf-hero h1 span,
.checkout-price-value,
.po-pkg-price,
.qris-amount-value,
.amount-box strong,
.price,
.stat b,
.adm-stat-value,
.user-stat-live b,
.sf-product-card strong {
  color: #7dd3fc !important;
}
.sf-hero p,
.sf-section-title p,
.sf-why small,
.sf-product-card p,
.checkout-product-desc,
.checkout-buyer-info,
.checkout-flow-info,
.form-hint,
.muted,
.small,
.adm-page-sub,
.adm-stat-label,
.user-order-meta,
.orders-page-sub,
.invoice-detail-key,
.detail-key,
.payment-note,
.po-sub,
.po-hint,
.cs-menu-greeting,
.cs-msg-bubble,
.cs-ai-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: #9fb0c5 !important;
}
.sf-product-card,
.card,
.hero-card,
.form-card,
.table-wrap,
.table-card,
.product-admin-card,
.user-profile-card,
.user-stat-live,
.user-action-card-live,
.user-order-live-card,
.user-empty-live,
.dash-progress-card,
.dash-money-card,
.user-orders-section,
.panel-order-card,
.upload-script-card,
.adm-card,
.adm-stat,
.auth-card,
.po-box,
.po-pkg-card,
.ram-option,
.detail-card,
.invoice-detail-card,
.provision-success-card,
.provision-fail-card,
.provision-info-card,
.empty-state,
.order-item,
.cs-panel,
.cs-menu-item,
.cs-msg-bubble,
.cs-ai-input-row {
  background: rgba(10, 18, 32, .92) !important;
  border: 1px solid rgba(148,163,184,.15) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,.30) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.sf-product-card.purple,
.sf-product-card.blue,
.sf-product-card.orange,
.script-item-card,
.script-list-card {
  background: linear-gradient(180deg, rgba(14,24,43,.96), rgba(7,13,25,.96)) !important;
  border-color: rgba(56,189,248,.18) !important;
}
.sf-product-card.purple::before,
.sf-product-card.blue::before,
.sf-product-card.orange::before,
.sf-product-card::before,
.sf-product-card::after,
.sf-cs-card::after,
.sf-logo::after,
.adm-stat-glow,
.vfx-reveal::before {
  opacity: .08 !important;
  filter: none !important;
  animation: none !important;
}
.sf-product-card:hover,
.cs-menu-item:hover,
.ram-option:hover,
.po-pkg-card:hover,
.user-action-card-live:hover,
.sf-why-grid div:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(56,189,248,.32) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.36), 0 0 0 1px rgba(56,189,248,.06) !important;
}
.sf-pill,
.pill,
.sf-live-strip,
.sf-proof-row,
.sf-mini-features span,
.status-dot,
.badge,
.amount-box,
.qris-amount-box,
.alert.info,
.info-list div,
.detail-row,
.invoice-detail-row,
.checkout-flow-info,
.checkout-buyer-info,
.section-eyebrow,
.form-hint,
.po-step-num,
.po-step,
.script-meta-row span,
.dash-live-chip,
.user-pill,
.filter-pill,
.status-tag {
  background: rgba(56,189,248,.075) !important;
  border: 1px solid rgba(56,189,248,.16) !important;
  color: #dbeafe !important;
  box-shadow: none !important;
}
.sf-live-strip span:first-child,
.alert.good,
.badge.paid,
.badge.processed,
.paid-stat,
.green,
.good {
  background: rgba(34,197,94,.10) !important;
  border-color: rgba(34,197,94,.22) !important;
  color: #bbf7d0 !important;
}
.badge.pending,
.pending-stat,
.alert.warn {
  background: rgba(245,158,11,.10) !important;
  border-color: rgba(245,158,11,.22) !important;
  color: #fde68a !important;
}
.badge.expired,
.badge.cancelled,
.alert.error,
.form-error,
.expired-stat,
.danger,
.error {
  background: rgba(239,68,68,.10) !important;
  border-color: rgba(239,68,68,.22) !important;
  color: #fecaca !important;
}
.sf-order-btn,
.btn,
.submit-btn,
.user-primary-btn,
.adm-btn.primary,
.po-submit,
.cs-send-btn,
.action-btn.primary,
.download-link {
  background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 12px 30px rgba(37,99,235,.22) !important;
}
.sf-order-btn:hover,
.btn:hover,
.submit-btn:hover,
.user-primary-btn:hover,
.po-submit:hover,
.cs-send-btn:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
}
.btn-ghost,
.adm-btn.ghost,
.mini-btn,
.mini-link,
.sf-nav-pop a,
.sidebar a,
.adm-nav a,
.user-nav a,
.user-soft-btn,
.back-link,
.topbar-nav a,
.order-action-link,
.empty-cta,
.dash-filter-tabs a,
.filter-row a,
.cs-back-btn,
.cs-close-btn {
  background: rgba(148,163,184,.08) !important;
  border: 1px solid rgba(148,163,184,.14) !important;
  color: #dbeafe !important;
  box-shadow: none !important;
}
.sf-nav-pop a:hover,
.sidebar a:hover,
.sidebar a.active,
.adm-nav a:hover,
.adm-nav a.active,
.user-nav a:hover,
.user-dashboard-active,
.topbar-nav a:hover,
.dash-filter-tabs a.active,
.filter-pill.active {
  background: rgba(56,189,248,.12) !important;
  border-color: rgba(56,189,248,.24) !important;
  color: #ffffff !important;
}
input,
textarea,
select,
.form-field,
.po-field,
.adm-field,
.auth-input,
.cs-ai-input {
  background: rgba(4, 8, 18, .92) !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}
input:focus,
textarea:focus,
select:focus,
.form-field:focus,
.po-field:focus,
.adm-field:focus,
.auth-input:focus,
.cs-ai-input:focus {
  border-color: rgba(56,189,248,.62) !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,.10) !important;
}
select option {
  background: #07101d !important;
  color: #f8fafc !important;
}
.table-wrap,
.adm-table-wrap {
  overflow-x: auto !important;
}
table,
th,
td {
  background-color: transparent !important;
}
th {
  color: #cbd5e1 !important;
}
td {
  color: #e5edf7 !important;
}
tbody tr:hover td {
  background: rgba(56,189,248,.045) !important;
}
.qris-box,
.qris-img-frame,
.qris-container {
  background: #ffffff !important;
  color: #0f172a !important;
}
.qris-missing,
.qris-missing-v2 {
  color: #0f172a !important;
}
.sf-lightning-art,
.sf-server-art,
.sf-neon-platform,
.sf-lightning-bolt,
.sf-spark,
.shield-art,
.sf-pulse-dot,
.server-stack span,
.cs-typing-dots span,
.dash-live-orb,
.money-bars span,
.progress-ring {
  animation: none !important;
  filter: none !important;
}
.vfx-reveal,
.vfx-in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.sf-card-line,
.po-step-sep,
.adm-nav-sep {
  background: rgba(148,163,184,.14) !important;
  border-color: rgba(148,163,184,.14) !important;
}
.cs-fab {
  background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
  box-shadow: 0 16px 42px rgba(37,99,235,.28) !important;
}
.cs-popup-header {
  background: linear-gradient(135deg, #0f172a, #0b1830) !important;
  border-bottom: 1px solid rgba(148,163,184,.15) !important;
}
.cs-msg.bot .cs-msg-bubble,
.cs-msg.ai .cs-msg-bubble {
  background: rgba(15,23,42,.96) !important;
  border-color: rgba(56,189,248,.14) !important;
}
.cs-msg.user .cs-msg-bubble {
  background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
  color: #ffffff !important;
}
@media (max-width: 720px) {
  body {
    background-image:
      radial-gradient(circle at 20% 0%, rgba(37,99,235,.14), transparent 30%),
      linear-gradient(180deg, #050713 0%, #07101d 100%) !important;
  }
  .sf-header,
  .topbar,
  .sf-bottom-nav {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !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;
  }
}
/* ===== DARK PREMIUM CYAN THEME OVERRIDE END ===== */



/* ===== USER MENU NO HOME FIX =====
   Menu user dibuat lebih simpel: Produk, Riwayat, Logout. */
.user-bottom-nav-live.user-nav-no-home {
  grid-template-columns: repeat(3, 1fr) !important;
}
.user-bottom-nav-live.user-nav-no-home a {
  min-height: 58px !important;
}
@media (max-width: 480px) {
  .user-bottom-nav-live.user-nav-no-home {
    width: min(620px, calc(100% - 28px)) !important;
    gap: 8px !important;
  }
}


/* ===== USER HOME BOTTOM NAV FIX =====
   Menu bawah user kembali 4 item: Home -> /dashboard, Produk, Riwayat, Logout.
   Override ini menjaga layout tetap 4 kolom walau cache/class lama masih tersisa. */
.user-bottom-nav-live:not(.sf-bottom-nav) {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 480px) {
  .user-bottom-nav-live:not(.sf-bottom-nav) {
    width: min(620px, calc(100% - 28px));
    gap: 8px;
  }
}




/* product-icons-correct-v3 start */
.brand-product-logo{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:inherit!important;
  box-sizing:border-box!important;
}
.brand-pterodactyl-logo{
  background:#e9e9e9!important;
  padding:3px!important;
}
.brand-do-logo{
  background:#fff!important;
  padding:8px!important;
}
.brand-script-logo{
  background:transparent!important;
  padding:0!important;
}
.pd-product-card.panel .pd-icon-box,
.pd-product-card.vps .pd-icon-box,
.pd-product-card.script .pd-icon-box{
  overflow:hidden!important;
  padding:5px!important;
}
.pd-product-card.panel .pd-icon-box svg,
.pd-product-card.vps .pd-icon-box svg,
.pd-product-card.script .pd-icon-box svg{
  display:none!important;
}
.pd-product-card.panel,
.pd-product-card.vps,
.pd-product-card.script{
  min-height:360px!important;
}
.pd-product-card h2,
.pd-product-card .pd-chip-row,
.pd-product-card .pd-package-strip,
.pd-product-card .pd-script-preview,
.pd-product-card .pd-price-row,
.pd-product-card .pd-order-btn{
  visibility:visible!important;
  opacity:1!important;
}
.brand-mini-logo{
  width:28px!important;
  height:28px!important;
  border-radius:10px!important;
  object-fit:contain!important;
  background:rgba(255,255,255,.96)!important;
  padding:3px!important;
  vertical-align:middle!important;
  margin-right:8px!important;
}
.orange-product-icon{
  overflow:hidden!important;
  padding:4px!important;
  font-size:0!important;
  color:transparent!important;
}
.orange-brand-logo{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:contain!important;
  border-radius:13px!important;
  box-sizing:border-box!important;
}
.orange-pterodactyl-logo{background:#e9e9e9!important;padding:2px!important;}
.orange-do-logo{background:#fff!important;padding:5px!important;}
.orange-script-logo{background:transparent!important;padding:0!important;}
@media(max-width:520px){
  .pd-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;}
  .pd-product-card.panel,
  .pd-product-card.vps,
  .pd-product-card.script{
    min-height:360px!important;
  }
  .brand-product-logo{padding:4px!important;}
  .brand-do-logo{padding:6px!important;}
}
@media(max-width:380px){
  .pd-product-grid{gap:10px!important;}
  .pd-product-card.panel,
  .pd-product-card.vps,
  .pd-product-card.script{min-height:350px!important;}
}
/* product-icons-correct-v3 end */


/* order-brand-fix order-icon-load-fix-v1 */
.po-page .po-header {
  position: relative !important;
}
.po-page .section-eyebrow.order-brand-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 42px !important;
  padding: 7px 13px 7px 8px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, .72) !important;
  border: 1px solid rgba(255, 167, 38, .20) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.05) !important;
  color: rgba(255,255,255,.92) !important;
  letter-spacing: .08em !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}
.order-brand-mark {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 12px !important;
  display: inline-grid !important;
  place-items: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 10px 24px rgba(0,0,0,.28) !important;
}
.order-brand-mark img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  max-width: 100% !important;
  max-height: 100% !important;
}
.order-brand-ptero { background: rgba(255,255,255,.95) !important; padding: 3px !important; }
.order-brand-do { background: rgba(255,255,255,.96) !important; padding: 5px !important; }
.po-page .po-header > img,
.po-page .po-content > img,
.po-page img.brand-mini-logo {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.95) !important;
  padding: 4px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
.po-page .po-header > img:not(.brand-mini-logo) {
  display: none !important;
}
.checkout-product-icon img,
.checkout-product-icon .brand-product-logo {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
}
@media(max-width:640px) {
  .po-page .section-eyebrow.order-brand-eyebrow {
    min-height: 38px !important;
    padding: 6px 11px 6px 7px !important;
    font-size: 11px !important;
  }
  .order-brand-mark {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }
}
/* order-brand-fix end */