:root{--bg:#06120f;--bg2:#0d3e35;--card:rgba(255,255,255,.08);--card2:rgba(0,0,0,.35);--line:rgba(255,255,255,.13);--primary:#33d2aa;--accent:#ffcc00;--button-from:#88ffe6;--button-to:#33d2aa;--danger:#ff4777;--text:#effffb;--muted:rgba(239,255,251,.72);--logo-height:46px}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(circle at top,var(--bg2) 0,var(--bg) 45%,#020604 100%);color:var(--text);min-height:100vh}a{color:inherit}.container{width:min(1120px,94%);margin:auto}.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 0}.brand{font-weight:900;color:var(--primary);font-size:22px;text-decoration:none}.nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:10px 16px;cursor:pointer;text-decoration:none;font-weight:800;color:#051310;background:linear-gradient(180deg,var(--button-from),var(--button-to));box-shadow:0 10px 28px rgba(0,0,0,.3);transition:.2s}.btn:hover{transform:translateY(-1px)}.btn.secondary{background:rgba(255,255,255,.1);color:var(--text);border:1px solid var(--line)}.btn.danger{background:linear-gradient(180deg,#ff85a6,#ff4777);color:#fff}.btn.locked,.btn:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.3)}.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:22px;align-items:start;padding:16px 0 34px}.panel{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 80px rgba(0,0,0,.35);backdrop-filter:blur(12px);padding:18px}.wheel-area{text-align:center}.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}.stat{background:var(--card2);border:1px solid var(--line);border-radius:16px;padding:12px}.stat b{display:block;font-size:22px;color:var(--accent)}.wheel-wrap{position:relative;width:min(440px,100%);aspect-ratio:1;margin:10px auto}.wheel-pointer{position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-top:34px solid var(--accent);z-index:3;filter:drop-shadow(0 5px 4px #000)}#spinWheel{width:100%;height:100%;border-radius:50%;filter:drop-shadow(0 20px 40px rgba(0,0,0,.45));transition:transform 5s cubic-bezier(.12,.86,.2,1)}.spin-center{position:absolute;inset:50%;transform:translate(-50%,-50%);width:95px;height:95px;border-radius:50%;background:linear-gradient(180deg,#fff,#ffcc00);display:flex;align-items:center;justify-content:center;color:#06120f;font-weight:900;border:8px solid rgba(0,0,0,.3);box-shadow:0 0 0 8px rgba(255,255,255,.08)}.spin-btn{font-size:18px;min-width:170px;margin-top:8px}.form-row{display:flex;gap:8px}.input,select,textarea{width:100%;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.32);color:var(--text);outline:none}.input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(51,210,170,.15)}.section-title{margin:26px 0 12px;font-size:24px;color:var(--accent)}.rewards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:35px}.reward-card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;padding:12px}.reward-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:#071b17}.reward-card h3{margin:10px 0 5px;font-size:16px}.reward-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-bottom:10px}.winner-list{display:flex;flex-direction:column;gap:10px}.winner{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:14px;padding:10px}.winner img{width:44px;height:44px;border-radius:10px;object-fit:cover}.winner small{color:var(--muted)}.alert{padding:10px 12px;border-radius:12px;margin:10px 0;border:1px solid var(--line)}.alert-success{background:rgba(51,210,170,.14)}.alert-danger{background:rgba(255,71,119,.14)}.alert-info{background:rgba(255,204,0,.12)}.modal{position:fixed;inset:0;background:rgba(0,0,0,.68);display:flex;align-items:center;justify-content:center;padding:15px;z-index:50;opacity:0;visibility:hidden;transition:.25s}.modal.show{opacity:1;visibility:visible}.modal-box{width:min(420px,95vw);background:#071b17;border:1px solid var(--primary);border-radius:22px;padding:22px;text-align:center;box-shadow:0 20px 70px rgba(0,0,0,.65);transform:translateY(18px) scale(.96);transition:.25s}.modal.show .modal-box{transform:translateY(0) scale(1)}.login-box{width:min(440px,94%);margin:70px auto}.table-wrap{overflow:auto}.admin-layout{display:grid;grid-template-columns:250px 1fr;min-height:100vh}.sidebar{background:#04100d;border-right:1px solid var(--line);padding:16px;position:sticky;top:0;height:100vh;overflow:auto}.sidebar a{display:block;text-decoration:none;padding:10px 12px;border-radius:12px;margin-bottom:5px;color:var(--muted)}.sidebar a:hover,.sidebar a.active{background:rgba(51,210,170,.12);color:#fff}.main{padding:18px}.admin-card{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:16px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:10px;border-bottom:1px solid var(--line);text-align:left}th{color:var(--accent)}.badge{display:inline-flex;padding:4px 8px;border-radius:999px;background:rgba(51,210,170,.16);font-size:12px}.admin-img{width:58px;height:42px;object-fit:cover;border-radius:8px}.muted{color:var(--muted)}@media(max-width:820px){.hero{grid-template-columns:1fr}.rewards-grid{grid-template-columns:1fr 1fr}.admin-layout{grid-template-columns:1fr}.sidebar{height:auto;position:relative}.grid-4{grid-template-columns:1fr 1fr}.form-row{flex-direction:column}}@media(max-width:520px){.rewards-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.topbar{align-items:flex-start;gap:12px;flex-direction:column}.grid-4{grid-template-columns:1fr}}

.brand{display:inline-flex;align-items:center;gap:10px}.brand-logo{height:var(--logo-height);width:auto;max-width:190px;object-fit:contain;display:block}.brand-text{font-weight:900;color:var(--primary);font-size:22px}.hero-title{font-size:clamp(28px,4vw,46px);line-height:1.05;margin:6px 0 8px;color:var(--accent);text-align:center}.hero-subtitle{max-width:760px;margin:0 auto 16px;text-align:center;color:var(--muted);font-size:16px}.floating-help{position:fixed;right:18px;bottom:18px;z-index:40}.floating-help .btn{box-shadow:0 12px 35px rgba(0,0,0,.45)}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.settings-preview{min-height:180px;border-radius:20px;border:1px solid var(--line);padding:18px;background:var(--card2)}@media(max-width:820px){.settings-grid{grid-template-columns:1fr}.brand-logo{max-width:150px}}

/* v6 frontend polish */
.hero-copy{position:relative;z-index:2}.decorated-panel{position:relative;overflow:visible}.home-decor{position:fixed;z-index:0;pointer-events:none;max-width:min(22vw,260px);opacity:.9;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}.decor-left{left:0;bottom:80px}.decor-right{right:0;top:130px}.panel-decor{position:absolute;pointer-events:none;z-index:0;max-width:150px;max-height:150px;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(0,0,0,.45))}.wheel-panel-decor{right:-16px;top:-24px}.winner-panel-decor{right:-12px;top:-22px}.rewards-panel-decor{right:12px;top:-28px}.wheel-area>*:not(.panel-decor),.decorated-panel>*:not(.panel-decor){position:relative;z-index:1}.wheel-pointer-img{position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:64px;height:64px;object-fit:contain;z-index:4;filter:drop-shadow(0 5px 6px rgba(0,0,0,.75))}.spin-center img{width:100%;height:100%;object-fit:contain;border-radius:50%}.rewards-section{margin-bottom:36px;padding:16px;border-radius:22px;background:rgba(255,255,255,.045);border:1px solid var(--line)}.reward-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}.reward-tab{display:inline-flex;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);text-decoration:none;color:var(--text);font-weight:800;font-size:13px}.reward-category{margin:18px 0 24px}.reward-category-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.reward-category-head h3{margin:0;color:var(--primary);text-transform:uppercase;letter-spacing:.08em}.reward-category-head span{color:var(--muted);font-size:13px}.compact-rewards{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:8px}.reward-card.compact{padding:8px;border-radius:14px}.reward-card.compact img{aspect-ratio:1/1;border-radius:10px}.reward-card.compact h3{font-size:13px;line-height:1.2;min-height:32px;margin:8px 0 5px}.reward-card.compact .reward-meta{font-size:11px;gap:4px;flex-direction:column;margin-bottom:8px}.reward-card.compact .btn{width:100%;padding:7px 10px;font-size:12px}.reward-card[data-page][hidden]{display:none!important}.reward-pages{display:flex;justify-content:center;gap:7px;margin-top:10px}.reward-page-btn{width:32px;height:32px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.08);color:var(--text);cursor:pointer;font-weight:900}.reward-page-btn.active{background:linear-gradient(180deg,var(--button-from),var(--button-to));color:#06120f}.floating-icons{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:45}.floating-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,var(--button-from),var(--button-to));box-shadow:0 14px 35px rgba(0,0,0,.48);border:1px solid rgba(255,255,255,.28);overflow:hidden;text-decoration:none;color:#06120f;font-weight:900}.floating-icon img{width:100%;height:100%;object-fit:cover}.floating-icon span{font-size:21px}.btn.mini{padding:6px 9px;font-size:12px}.code-copy-wrap{display:flex;gap:8px;align-items:center;white-space:nowrap}.action-cell{min-width:280px}.edit-point-form{margin-bottom:8px}.inline-form{display:inline-block;margin:4px 4px 0 0}.settings-grid label{display:block;margin-top:10px;margin-bottom:5px;color:var(--muted);font-size:13px}
@media(max-width:820px){.compact-rewards{grid-template-columns:repeat(3,minmax(0,1fr))}.home-decor{display:none}.action-cell{min-width:220px}.code-copy-wrap{flex-direction:column;align-items:flex-start}}
@media(max-width:560px){.compact-rewards{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.reward-card.compact{padding:6px}.reward-card.compact h3{font-size:11px;min-height:28px}.reward-card.compact .reward-meta{font-size:10px}.reward-card.compact .btn{font-size:11px;padding:6px}.floating-icons{right:10px;bottom:10px}.floating-icon{width:46px;height:46px}}
.floating-icons.right{right:18px;left:auto}.floating-icons.left{left:18px;right:auto}
@media(max-width:560px){.floating-icons.right{right:10px}.floating-icons.left{left:10px}}

/* v7 asset UI improvements */
.asset-note{margin:4px 0 7px;color:var(--muted);font-size:12px;line-height:1.35}.asset-field{padding:10px 0;border-bottom:1px solid var(--line)}.asset-field .input{margin-bottom:6px}.check-line{display:flex!important;align-items:center;gap:8px;color:var(--muted)}.asset-size-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.asset-size-grid div{background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:12px;padding:10px}.asset-size-grid b{display:block;color:var(--accent);margin-bottom:4px}.asset-size-grid span{color:var(--muted);font-size:12px}.wheel-wrap{isolation:isolate;overflow:visible}.wheel-wrap canvas{position:relative;z-index:3}.wheel-frame-img{position:absolute;left:50%;top:50%;width:124%;height:124%;transform:translate(-50%,-50%);object-fit:contain;pointer-events:none;z-index:0;filter:drop-shadow(0 18px 35px rgba(0,0,0,.48))}.wheel-panel-decor{position:absolute;left:50%;top:50%;width:114%;height:114%;max-width:none;max-height:none;transform:translate(-50%,-50%);object-fit:contain;pointer-events:none;z-index:1;opacity:.98;filter:drop-shadow(0 14px 28px rgba(0,0,0,.42))}.wheel-arrow-decor{position:absolute;right:-18%;top:12%;width:min(38%,190px);height:auto;object-fit:contain;pointer-events:none;z-index:6;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}.wheel-pointer,.wheel-pointer-img{z-index:8!important}.spin-center{z-index:7}.collection-decor{display:block;max-width:min(900px,100%);width:100%;height:auto;object-fit:contain;margin:-8px auto 12px;filter:drop-shadow(0 16px 30px rgba(0,0,0,.38));pointer-events:none}.admin-card table .input{min-width:115px}.admin-card table input[type=file]{min-width:180px}.admin-card table input[placeholder*="URL"]{min-width:210px}@media(max-width:900px){.asset-size-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wheel-arrow-decor{right:-8%;width:32%}}@media(max-width:560px){.asset-size-grid{grid-template-columns:1fr}.wheel-frame-img{width:118%;height:118%}.wheel-panel-decor{width:108%;height:108%}.wheel-arrow-decor{display:none}}

/* === V8 FIX: bounded wheel assets so frame/decor cannot hit text/layout === */
.wheel-area {
  overflow: hidden;
}
.wheel-wrap {
  width: min(440px, 92vw) !important;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 18px auto 12px;
  position: relative;
  isolation: isolate;
  overflow: visible;
  display: block;
}
.wheel-safe-layer {
  position: absolute;
  inset: -2%;
  border-radius: 28px;
  overflow: hidden;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.wheel-back-layer {
  z-index: 1;
}
.wheel-front-layer {
  z-index: 6;
}
.wheel-safe-layer img {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: var(--asset-scale, 96%) !important;
  height: var(--asset-scale, 96%) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transform: translate(calc(-50% + var(--asset-x, 0px)), calc(-50% + var(--asset-y, 0px))) !important;
  pointer-events: none;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.42));
}
.wheel-safe-layer .wheel-panel-decor,
.wheel-safe-layer .wheel-frame-img {
  max-width: 100% !important;
  max-height: 100% !important;
  z-index: auto !important;
  opacity: .98;
}
#spinWheel {
  position: relative !important;
  z-index: 3 !important;
  display: block;
}
.wheel-pointer,
.wheel-pointer-img {
  z-index: 10 !important;
}
.spin-center {
  z-index: 9 !important;
}
.wheel-arrow-decor {
  z-index: 8 !important;
  max-width: 160px;
  max-height: 120px;
  object-fit: contain;
}
@media(max-width:560px){
  .wheel-wrap {
    width: min(360px, 90vw) !important;
  }
  .wheel-safe-layer {
    inset: -1%;
    border-radius: 22px;
  }
  .wheel-arrow-decor {
    max-width: 110px;
    max-height: 85px;
  }
}
.asset-tuning{
  margin:8px 0 14px;
  padding:12px;
  border:1px dashed rgba(255,255,255,.16);
  border-radius:14px;
  background:rgba(0,0,0,.20);
}
.asset-tuning h3{
  margin:0 0 6px;
  color:var(--accent);
  font-size:15px;
}
.asset-tuning .form-row{
  align-items:flex-start;
}
.asset-tuning .form-row>div{
  flex:1;
}

/* === V9 FIX: safer spin ornament stage ===
   Tujuan: ornamen/frame tidak menabrak teks, tetapi tetap terlihat.
   Wheel canvas diperkecil di dalam stage agar area ornamen punya ruang sendiri. */
.wheel-area {
  overflow: visible !important;
}
.wheel-wrap {
  width: min(560px, 100%) !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  margin: 10px auto 14px !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  display: block !important;
}
.wheel-wrap::before {
  content: "";
  position: absolute;
  inset: 7.5%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.045), rgba(0,0,0,.18) 62%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.wheel-safe-layer {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  pointer-events: none !important;
  display: grid !important;
  place-items: center !important;
}
.wheel-back-layer {
  z-index: 2 !important;
}
.wheel-front-layer {
  z-index: 7 !important;
}
.wheel-safe-layer img,
.wheel-safe-layer .wheel-panel-decor,
.wheel-safe-layer .wheel-frame-img {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: var(--asset-scale, 104%) !important;
  height: var(--asset-scale, 104%) !important;
  max-width: 116% !important;
  max-height: 116% !important;
  object-fit: contain !important;
  transform: translate(calc(-50% + var(--asset-x, 0px)), calc(-50% + var(--asset-y, 0px))) !important;
  pointer-events: none !important;
  opacity: .98;
}
.wheel-safe-layer .wheel-panel-decor {
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.42));
}
.wheel-safe-layer .wheel-frame-img {
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.50));
}
#spinWheel {
  width: 78% !important;
  height: 78% !important;
  margin: 11% auto 0 !important;
  position: relative !important;
  z-index: 4 !important;
  display: block !important;
  border-radius: 50% !important;
  transform-origin: center center !important;
}
.wheel-pointer,
.wheel-pointer-img {
  top: 7% !important;
  z-index: 12 !important;
}
.spin-center {
  inset: 50% !important;
  z-index: 11 !important;
}
.wheel-arrow-decor {
  right: 3% !important;
  top: 16% !important;
  width: min(27%, 150px) !important;
  max-width: 150px !important;
  max-height: 110px !important;
  z-index: 10 !important;
}
@media(max-width:560px){
  .wheel-wrap {
    width: min(430px, 96vw) !important;
  }
  #spinWheel {
    width: 80% !important;
    height: 80% !important;
    margin-top: 10% !important;
  }
  .wheel-safe-layer {
    border-radius: 24px !important;
  }
  .wheel-arrow-decor {
    display: none !important;
  }
}


/* === V10 FIX: gunakan gambar frame merah 650x650 sebagai Ornamen Area Spin Wheel ===
   Cocok untuk asset seperti SPIN BACKGROUND.png: ring/bingkai dengan tengah transparan.
   Layer ornamen dipindah ke depan canvas agar ring tidak tertutup roda spin. */
.wheel-wrap {
  width: min(650px, 100%) !important;
  aspect-ratio: 1 / 1 !important;
  overflow: visible !important;
}
.wheel-safe-layer {
  inset: 0 !important;
  overflow: visible !important;
  border-radius: 50% !important;
}
.wheel-back-layer {
  z-index: 9 !important;
}
.wheel-front-layer {
  z-index: 10 !important;
}
.wheel-safe-layer .wheel-panel-decor {
  width: var(--asset-scale, 100%) !important;
  height: var(--asset-scale, 100%) !important;
  max-width: 126% !important;
  max-height: 126% !important;
  opacity: 1 !important;
  z-index: 9 !important;
}
.wheel-safe-layer .wheel-frame-img {
  width: var(--asset-scale, 100%) !important;
  height: var(--asset-scale, 100%) !important;
  max-width: 126% !important;
  max-height: 126% !important;
  opacity: 1 !important;
  z-index: 10 !important;
}
#spinWheel {
  width: 76% !important;
  height: 76% !important;
  margin: 12% auto 0 !important;
  z-index: 4 !important;
}
.spin-center {
  z-index: 12 !important;
}
.wheel-pointer,
.wheel-pointer-img {
  z-index: 13 !important;
}
@media(max-width:560px){
  .wheel-wrap { width: min(520px, 96vw) !important; }
  #spinWheel { width: 76% !important; height: 76% !important; margin-top: 12% !important; }
}

/* === V11 FINAL WHEEL FRAME FIX ===
   Stabil untuk gambar frame seperti SPIN BACKGROUND.png.
   Frame dikunci di dalam stage bulat, canvas selalu berada tepat di tengah,
   dan asset tidak lagi menabrak teks/form/panel lain. */
.wheel-area{
  overflow:hidden!important;
  padding-bottom:22px!important;
}
.wheel-area .stats,
.wheel-area .alert,
.wheel-area .form-row,
.wheel-area .spin-btn{
  position:relative!important;
  z-index:20!important;
}
.wheel-wrap{
  position:relative!important;
  width:min(520px,100%)!important;
  max-width:100%!important;
  aspect-ratio:1/1!important;
  margin:16px auto 16px!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border-radius:50%!important;
  display:block!important;
  background:transparent!important;
}
.wheel-wrap::before{
  display:none!important;
  content:none!important;
}
.wheel-wrap .wheel-safe-layer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  border-radius:50%!important;
  overflow:hidden!important;
  pointer-events:none!important;
  display:block!important;
  transform:none!important;
}
.wheel-wrap .wheel-back-layer{
  z-index:7!important;
}
.wheel-wrap .wheel-front-layer{
  z-index:8!important;
}
.wheel-wrap .wheel-panel-decor,
.wheel-wrap .wheel-frame-img{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:var(--asset-scale,100%)!important;
  height:var(--asset-scale,100%)!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  transform:translate(calc(-50% + var(--asset-x,0px)),calc(-50% + var(--asset-y,0px)))!important;
  pointer-events:none!important;
  opacity:1!important;
  z-index:auto!important;
  filter:drop-shadow(0 16px 32px rgba(0,0,0,.45))!important;
}
#spinWheel{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  width:72%!important;
  height:72%!important;
  margin:auto!important;
  display:block!important;
  border-radius:50%!important;
  z-index:3!important;
  transform-origin:center center!important;
  transition:transform 5s cubic-bezier(.12,.86,.2,1)!important;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.40))!important;
}
.wheel-wrap .spin-center{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  inset:auto!important;
  transform:translate(-50%,-50%)!important;
  width:86px!important;
  height:86px!important;
  z-index:10!important;
}
.wheel-wrap .wheel-pointer,
.wheel-wrap .wheel-pointer-img{
  position:absolute!important;
  left:50%!important;
  top:4%!important;
  transform:translateX(-50%)!important;
  z-index:11!important;
}
.wheel-wrap .wheel-pointer-img{
  width:62px!important;
  height:62px!important;
  object-fit:contain!important;
}
.wheel-wrap .wheel-arrow-decor{
  position:absolute!important;
  right:4%!important;
  top:18%!important;
  width:min(25%,140px)!important;
  height:auto!important;
  max-width:140px!important;
  max-height:110px!important;
  object-fit:contain!important;
  z-index:12!important;
  pointer-events:none!important;
}
@media(max-width:560px){
  .wheel-wrap{
    width:min(430px,96vw)!important;
  }
  #spinWheel{
    width:72%!important;
    height:72%!important;
  }
  .wheel-wrap .spin-center{
    width:72px!important;
    height:72px!important;
  }
  .wheel-wrap .wheel-pointer-img{
    width:52px!important;
    height:52px!important;
  }
  .wheel-wrap .wheel-arrow-decor{
    display:none!important;
  }
}


/* === V12 FINAL CLEAN WHEEL LAYOUT ===
   Fix utama:
   1) Frame SPIN BACKGROUND.png tidak kecil lagi.
   2) Canvas roda selalu pas di tengah lubang frame.
   3) Layer lama v8-v11 ditimpa total agar tidak saling tabrak.
   4) Setting scale dari panel admin dipakai langsung via --asset-scale. */
.wheel-area{
  overflow:visible!important;
  padding-bottom:24px!important;
}
.wheel-area .stats,
.wheel-area .alert,
.wheel-area .form-row,
.wheel-area .spin-btn{
  position:relative!important;
  z-index:30!important;
}
.wheel-wrap{
  position:relative!important;
  width:min(650px,100%)!important;
  max-width:100%!important;
  aspect-ratio:1/1!important;
  margin:14px auto 16px!important;
  isolation:isolate!important;
  overflow:visible!important;
  border-radius:0!important;
  display:grid!important;
  place-items:center!important;
  background:transparent!important;
}
.wheel-wrap::before{
  display:none!important;
  content:none!important;
}
.wheel-wrap .wheel-safe-layer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  border-radius:0!important;
  overflow:visible!important;
  pointer-events:none!important;
  display:block!important;
  transform:none!important;
}
.wheel-wrap .wheel-back-layer{z-index:8!important;}
.wheel-wrap .wheel-front-layer{z-index:9!important;}
.wheel-wrap .wheel-panel-decor,
.wheel-wrap .wheel-frame-img{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:var(--asset-scale,116%)!important;
  height:var(--asset-scale,116%)!important;
  max-width:none!important;
  max-height:none!important;
  min-width:0!important;
  min-height:0!important;
  object-fit:contain!important;
  transform:translate(calc(-50% + var(--asset-x,0px)),calc(-50% + var(--asset-y,0px)))!important;
  pointer-events:none!important;
  opacity:1!important;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.48))!important;
}
#spinWheel{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:67%!important;
  height:67%!important;
  margin:0!important;
  display:block!important;
  border-radius:50%!important;
  z-index:4!important;
  transform-origin:center center!important;
  transform:translate(-50%,-50%) rotate(0deg);
  transition:transform 5s cubic-bezier(.12,.86,.2,1)!important;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.38))!important;
}
.wheel-wrap .spin-center{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  inset:auto!important;
  transform:translate(-50%,-50%)!important;
  width:82px!important;
  height:82px!important;
  z-index:12!important;
}
.wheel-wrap .wheel-pointer,
.wheel-wrap .wheel-pointer-img{
  position:absolute!important;
  left:50%!important;
  top:7%!important;
  transform:translateX(-50%)!important;
  z-index:13!important;
}
.wheel-wrap .wheel-pointer-img{
  width:62px!important;
  height:62px!important;
  object-fit:contain!important;
}
.wheel-wrap .wheel-arrow-decor{
  position:absolute!important;
  right:5%!important;
  top:18%!important;
  width:min(24%,145px)!important;
  height:auto!important;
  max-width:145px!important;
  max-height:115px!important;
  object-fit:contain!important;
  z-index:14!important;
  pointer-events:none!important;
}
@media(max-width:560px){
  .wheel-wrap{width:min(520px,96vw)!important;}
  #spinWheel{width:67%!important;height:67%!important;}
  .wheel-wrap .spin-center{width:70px!important;height:70px!important;}
  .wheel-wrap .wheel-pointer-img{width:52px!important;height:52px!important;}
  .wheel-wrap .wheel-arrow-decor{display:none!important;}
}

/* === V13 FINAL WHEEL COMPOSITION ===
   - Frame utama berada DI BELAKANG roda spin.
   - Canvas roda dan tombol tengah selalu sejajar di center stage.
   - Tombol spin tengah tidak bergeser saat canvas diputar oleh JS.
   - Field Bingkai Tambahan tetap bisa dipakai sebagai layer depan opsional.
*/
.wheel-area{
  overflow:visible!important;
  padding-bottom:26px!important;
}
.wheel-area .stats,
.wheel-area .alert,
.wheel-area .form-row,
.wheel-area .spin-btn{
  position:relative!important;
  z-index:40!important;
}
.wheel-wrap{
  --stage-size:min(650px,100%);
  --wheel-size:68%;
  position:relative!important;
  width:var(--stage-size)!important;
  max-width:100%!important;
  aspect-ratio:1/1!important;
  margin:16px auto 18px!important;
  isolation:isolate!important;
  overflow:visible!important;
  border-radius:0!important;
  display:block!important;
  background:transparent!important;
}
.wheel-wrap::before{display:none!important;content:none!important;}
.wheel-wrap .wheel-safe-layer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  border-radius:0!important;
  overflow:visible!important;
  pointer-events:none!important;
  display:block!important;
  transform:none!important;
}
/* Frame Utama / Ornamen Area Spin Wheel: di belakang canvas */
.wheel-wrap .wheel-back-layer{z-index:1!important;}
/* Bingkai tambahan opsional: di depan canvas */
.wheel-wrap .wheel-front-layer{z-index:12!important;}
.wheel-wrap .wheel-panel-decor,
.wheel-wrap .wheel-frame-img{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:var(--asset-scale,116%)!important;
  height:var(--asset-scale,116%)!important;
  max-width:none!important;
  max-height:none!important;
  min-width:0!important;
  min-height:0!important;
  object-fit:contain!important;
  transform:translate(calc(-50% + var(--asset-x,0px)),calc(-50% + var(--asset-y,0px)))!important;
  pointer-events:none!important;
  opacity:1!important;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.48))!important;
}
#spinWheel{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:var(--wheel-size)!important;
  height:var(--wheel-size)!important;
  margin:0!important;
  display:block!important;
  border-radius:50%!important;
  z-index:6!important;
  transform-origin:center center!important;
  transform:translate(-50%,-50%) rotate(0deg);
  transition:transform 5s cubic-bezier(.12,.86,.2,1)!important;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.38))!important;
}
.wheel-wrap .spin-center{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  inset:auto!important;
  transform:translate(-50%,-50%)!important;
  width:84px!important;
  height:84px!important;
  z-index:20!important;
  margin:0!important;
}
.wheel-wrap .wheel-pointer,
.wheel-wrap .wheel-pointer-img{
  position:absolute!important;
  left:50%!important;
  top:6.5%!important;
  transform:translateX(-50%)!important;
  z-index:21!important;
}
.wheel-wrap .wheel-pointer-img{
  width:62px!important;
  height:62px!important;
  object-fit:contain!important;
}
.wheel-wrap .wheel-arrow-decor{
  position:absolute!important;
  right:5%!important;
  top:18%!important;
  width:min(24%,145px)!important;
  height:auto!important;
  max-width:145px!important;
  max-height:115px!important;
  object-fit:contain!important;
  z-index:22!important;
  pointer-events:none!important;
}
@media(max-width:560px){
  .wheel-wrap{--stage-size:min(520px,96vw);--wheel-size:68%;}
  .wheel-wrap .spin-center{width:70px!important;height:70px!important;}
  .wheel-wrap .wheel-pointer-img{width:52px!important;height:52px!important;}
  .wheel-wrap .wheel-arrow-decor{display:none!important;}
}
.date-stack{display:flex;flex-direction:column;gap:3px;margin-top:6px;color:var(--muted)}.date-stack small{font-size:11px;line-height:1.25}.check-inline{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-weight:700;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:12px;padding:10px 12px}.check-inline input{width:auto;margin:0}.admin-card .muted code{color:var(--primary)}

/* === V15 FINAL ADMIN UI + WHEEL CENTER FIX === */
.panel-brand{margin-bottom:14px;padding:12px;border-radius:18px;background:linear-gradient(180deg,rgba(51,210,170,.10),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.10)}
.panel-brand h2{color:var(--primary);margin:0 0 10px;font-size:24px;letter-spacing:.02em}
.admin-greeting{display:flex;flex-direction:column;gap:7px}
.admin-greeting .hello{font-weight:900;color:#fff;line-height:1.2}
.role-pill{display:inline-flex;align-items:center;width:max-content;padding:5px 10px;border-radius:999px;background:linear-gradient(180deg,var(--button-from),var(--button-to));color:#04100d;font-size:12px;font-weight:900;box-shadow:0 6px 16px rgba(0,0,0,.22)}
.admin-time{font-size:12px;color:var(--muted);line-height:1.35}
.admin-menu{display:flex;flex-direction:column;gap:5px}
.sidebar .admin-menu a{display:flex;align-items:center;gap:10px;position:relative;text-decoration:none;padding:11px 12px;border-radius:14px;margin:0;color:var(--muted);border:1px solid transparent;transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease}
.sidebar .admin-menu a .menu-icon{width:23px;height:23px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.06);font-size:14px;flex:0 0 23px}
.sidebar .admin-menu a:hover{background:rgba(51,210,170,.10);color:#fff;transform:translateX(2px);border-color:rgba(51,210,170,.18)}
.sidebar .admin-menu a.active{background:linear-gradient(90deg,rgba(51,210,170,.28),rgba(51,210,170,.08));color:#fff;border-color:rgba(51,210,170,.45);box-shadow:inset 4px 0 0 var(--primary),0 10px 24px rgba(0,0,0,.20)}
.sidebar .admin-menu a.active .menu-icon{background:var(--primary);color:#04100d}
.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:6px 0 12px;min-width:560px}
.permission-card{display:flex;gap:9px;align-items:flex-start;padding:10px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid var(--line);cursor:pointer;transition:.2s}
.permission-card:hover{border-color:rgba(51,210,170,.55);background:rgba(51,210,170,.08)}
.permission-card input{margin-top:3px;flex:0 0 auto}
.permission-card b{display:block;font-size:13px;color:#fff;line-height:1.2}
.permission-card small{display:block;margin-top:3px;font-size:11px;color:var(--muted);line-height:1.35}
.status-active{background:rgba(51,210,170,.18);color:#cffff4}.status-expired{background:rgba(255,204,0,.15);color:#ffdf6e}.status-used,.status-redeemed{background:rgba(138,92,255,.18);color:#d7c9ff}.status-cancelled,.status-disabled{background:rgba(255,71,119,.18);color:#ffabc0}

/* Wheel center fix: keep center button locked to the exact center of the wheel stage */
.wheel-wrap{--stage-size:min(650px,100%);--wheel-size:68%;position:relative!important;width:var(--stage-size)!important;aspect-ratio:1/1!important;margin:16px auto 18px!important;isolation:isolate!important;overflow:visible!important;}
#spinWheel{position:absolute!important;left:50%!important;top:50%!important;width:var(--wheel-size)!important;height:var(--wheel-size)!important;margin:0!important;display:block!important;border-radius:50%!important;z-index:6!important;transform-origin:center center!important;transform:translate3d(-50%,-50%,0) rotate(0deg);transition:transform 5s cubic-bezier(.12,.86,.2,1)!important;}
.wheel-wrap>.spin-center{position:absolute!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;inset:auto!important;transform:translate3d(-50%,-50%,0)!important;width:84px!important;height:84px!important;margin:0!important;z-index:30!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;line-height:1!important;}
.wheel-wrap>.spin-center img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;border-radius:50%!important;margin:0!important;padding:0!important;}
.wheel-wrap>.wheel-safe-layer{position:absolute!important;inset:0!important;pointer-events:none!important;transform:none!important;}
.wheel-wrap>.wheel-back-layer{z-index:1!important}.wheel-wrap>.wheel-front-layer{z-index:12!important}
.wheel-wrap .wheel-pointer,.wheel-wrap .wheel-pointer-img{position:absolute!important;left:50%!important;top:6.5%!important;transform:translateX(-50%)!important;z-index:31!important}
@media(max-width:760px){.permission-grid{grid-template-columns:1fr;min-width:0}.wheel-wrap{--stage-size:min(560px,96vw)}}
@media(max-width:560px){.wheel-wrap{--stage-size:min(520px,96vw);--wheel-size:68%}.wheel-wrap>.spin-center{width:70px!important;height:70px!important}}


/* === V16 FINAL WHEEL LAYOUT FIX ===
   Tombol Tengah Spin Wheel sebelumnya bisa naik karena canvas dan tombol memakai sistem center berbeda.
   V16 membuat canvas + tombol tengah berada dalam satu core yang sama, sehingga keduanya selalu sejajar.
*/
.wheel-wrap{
  --stage-size:min(650px,100%)!important;
  --wheel-size:72%!important;
  position:relative!important;
  width:var(--stage-size)!important;
  max-width:100%!important;
  aspect-ratio:1/1!important;
  margin:16px auto 18px!important;
  isolation:isolate!important;
  overflow:visible!important;
  display:block!important;
  background:transparent!important;
}
.wheel-wrap .wheel-core-v16{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:var(--wheel-size)!important;
  height:var(--wheel-size)!important;
  transform:translate3d(-50%,-50%,0)!important;
  transform-origin:center center!important;
  z-index:10!important;
  display:block!important;
  pointer-events:auto!important;
}
.wheel-wrap .wheel-core-v16 #spinWheel,
.wheel-core-v16 #spinWheel,
#spinWheel{
  position:absolute!important;
  inset:0!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  display:block!important;
  border-radius:50%!important;
  transform:rotate(0deg);
  transform-origin:50% 50%!important;
  transition:transform 5s cubic-bezier(.12,.86,.2,1)!important;
  z-index:1!important;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.38))!important;
}
.wheel-wrap .wheel-core-v16 .spin-center,
.wheel-core-v16 .spin-center{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  inset:auto!important;
  transform:translate3d(-50%,-50%,0)!important;
  width:86px!important;
  height:86px!important;
  min-width:86px!important;
  min-height:86px!important;
  max-width:86px!important;
  max-height:86px!important;
  margin:0!important;
  z-index:5!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1!important;
  border-radius:50%!important;
  pointer-events:none!important;
}
.wheel-wrap .wheel-core-v16 .spin-center img,
.wheel-core-v16 .spin-center img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:50%!important;
  margin:0!important;
  padding:0!important;
}
.wheel-wrap>.wheel-safe-layer{
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  transform:none!important;
  display:block!important;
}
.wheel-wrap>.wheel-back-layer{z-index:1!important;}
.wheel-wrap>.wheel-front-layer{z-index:18!important;}
.wheel-wrap .wheel-panel-decor,
.wheel-wrap .wheel-frame-img{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:var(--asset-scale,116%)!important;
  height:var(--asset-scale,116%)!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  transform:translate(calc(-50% + var(--asset-x,0px)), calc(-50% + var(--asset-y,0px)))!important;
  pointer-events:none!important;
}
.wheel-wrap .wheel-pointer,
.wheel-wrap .wheel-pointer-img{
  position:absolute!important;
  left:50%!important;
  top:9%!important;
  transform:translateX(-50%)!important;
  z-index:30!important;
}
.wheel-wrap .wheel-pointer-img{
  width:62px!important;
  height:62px!important;
  object-fit:contain!important;
}
@media(max-width:560px){
  .wheel-wrap{--stage-size:min(520px,96vw)!important;--wheel-size:72%!important;}
  .wheel-wrap .wheel-core-v16 .spin-center{width:70px!important;height:70px!important;min-width:70px!important;min-height:70px!important;}
  .wheel-wrap .wheel-pointer-img{width:52px!important;height:52px!important;}
}

/* === V17 FINAL CENTER BUTTON FIX ===
   This block uses new class names so old wheel CSS from previous versions cannot pull the center button out of place.
   The center button is now inside .spin-core-v17, the same coordinate system as the canvas.
*/
.spin-stage-v17{
  --stage-size:min(650px,100%)!important;
  --core-size:72%!important;
  position:relative!important;
  width:var(--stage-size)!important;
  max-width:100%!important;
  aspect-ratio:1/1!important;
  margin:16px auto 18px!important;
  isolation:isolate!important;
  overflow:visible!important;
  display:block!important;
  text-align:initial!important;
}
.spin-stage-v17 .spin-core-v17{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:var(--core-size)!important;
  height:var(--core-size)!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:50% 50%!important;
  z-index:10!important;
  display:block!important;
  pointer-events:auto!important;
  margin:0!important;
  padding:0!important;
}
.spin-stage-v17 #spinWheel{
  position:absolute!important;
  inset:0!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  border-radius:50%!important;
  transform:rotate(0deg);
  transform-origin:50% 50%!important;
  transition:transform 5s cubic-bezier(.12,.86,.2,1)!important;
  z-index:1!important;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.38))!important;
}
.spin-stage-v17 .spin-center-v17{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  inset:auto!important;
  transform:translate(-50%,-50%)!important;
  width:86px!important;
  height:86px!important;
  min-width:86px!important;
  min-height:86px!important;
  max-width:86px!important;
  max-height:86px!important;
  margin:0!important;
  padding:0!important;
  z-index:20!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1!important;
  border-radius:50%!important;
  pointer-events:none!important;
  overflow:visible!important;
}
.spin-stage-v17 .spin-center-v17 img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:50%!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
}
.spin-stage-v17 .wheel-safe-layer{
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  transform:none!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
}
.spin-stage-v17 .wheel-back-layer{z-index:1!important;}
.spin-stage-v17 .wheel-front-layer{z-index:18!important;}
.spin-stage-v17 .wheel-panel-decor,
.spin-stage-v17 .wheel-frame-img{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:var(--asset-scale,116%)!important;
  height:var(--asset-scale,116%)!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:translate(calc(-50% + var(--asset-x,0px)), calc(-50% + var(--asset-y,0px)))!important;
  pointer-events:none!important;
  margin:0!important;
  padding:0!important;
}
.spin-stage-v17 .wheel-pointer,
.spin-stage-v17 .wheel-pointer-img{
  position:absolute!important;
  left:50%!important;
  top:9%!important;
  transform:translateX(-50%)!important;
  z-index:30!important;
  margin:0!important;
}
.spin-stage-v17 .wheel-pointer-img{
  width:62px!important;
  height:62px!important;
  object-fit:contain!important;
  object-position:center center!important;
}
@media(max-width:560px){
  .spin-stage-v17{--stage-size:min(520px,96vw)!important;--core-size:72%!important;}
  .spin-stage-v17 .spin-center-v17{width:70px!important;height:70px!important;min-width:70px!important;min-height:70px!important;}
  .spin-stage-v17 .wheel-pointer-img{width:52px!important;height:52px!important;}
}

/* === V18 TRUE CENTER BUTTON FIX ===
   Fix final: asset Tombol Tengah Spin Wheel dipaksa berada di tengah .spin-core-v18.
   Blok ini sengaja berada di paling bawah agar menang dari CSS lama v8-v17.
*/
.spin-stage-v18{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
}
.spin-stage-v18 .spin-core-v18,
.spin-stage-v18 .spin-core-v17{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:var(--core-size,72%)!important;
  height:var(--core-size,72%)!important;
  transform:translate3d(-50%,-50%,0)!important;
  transform-origin:50% 50%!important;
  z-index:10!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  display:block!important;
  overflow:visible!important;
}
.spin-stage-v18 .spin-core-v18 #spinWheel,
.spin-stage-v18 .spin-core-v17 #spinWheel{
  position:absolute!important;
  left:0!important;
  top:0!important;
  right:auto!important;
  bottom:auto!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  z-index:1!important;
  transform-origin:50% 50%!important;
}
.spin-stage-v18 .spin-center-fixed-v18,
.spin-stage-v18 .spin-center-v17,
.spin-stage-v18 .spin-core-v18 .spin-center,
.spin-stage-v18 .spin-core-v17 .spin-center{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  inset:auto!important;
  width:88px!important;
  height:88px!important;
  min-width:88px!important;
  min-height:88px!important;
  max-width:88px!important;
  max-height:88px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  transform:translate3d(-50%,-50%,0)!important;
  transform-origin:50% 50%!important;
  z-index:95!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  pointer-events:none!important;
  background:transparent!important;
  box-shadow:none!important;
  line-height:1!important;
  overflow:visible!important;
}
.spin-stage-v18 .spin-center-fixed-v18 img,
.spin-stage-v18 .spin-center-v17 img,
.spin-stage-v18 .spin-core-v18 .spin-center img,
.spin-stage-v18 .spin-core-v17 .spin-center img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:none!important;
}
/* Jika browser masih membaca markup lama dan gambar Spin masih menjadi anak langsung stage, tetap paksa ke tengah. */
.spin-stage-v18 > img[alt="Spin"],
.wheel-wrap.spin-stage-v18 > img[alt="Spin"]{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:88px!important;
  height:88px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  transform:translate3d(-50%,-50%,0)!important;
  z-index:96!important;
  object-fit:contain!important;
  object-position:center center!important;
  pointer-events:none!important;
  background:transparent!important;
  box-shadow:none!important;
}
@media(max-width:560px){
  .spin-stage-v18 .spin-center-fixed-v18,
  .spin-stage-v18 .spin-center-v17,
  .spin-stage-v18 .spin-core-v18 .spin-center,
  .spin-stage-v18 .spin-core-v17 .spin-center,
  .spin-stage-v18 > img[alt="Spin"]{
    width:72px!important;
    height:72px!important;
    min-width:72px!important;
    min-height:72px!important;
    max-width:72px!important;
    max-height:72px!important;
  }
}


/* =========================================================
   V19 TRUE CENTER BUTTON FIX
   Tujuan: asset/tulisan Tombol Tengah Spin Wheel WAJIB berada
   di tengah roda, bukan di kiri/atas panel. Rules ini dibuat
   sangat spesifik dan memakai !important agar menimpa CSS lama.
   ========================================================= */
.wheel-wrap.spin-stage-v18,
.wheel-wrap.spin-stage-v17,
.wheel-wrap{
  position:relative!important;
  display:block!important;
  margin:10px auto!important;
  width:min(440px,100%)!important;
  aspect-ratio:1 / 1!important;
  overflow:visible!important;
  isolation:isolate!important;
  contain:layout paint!important;
}
.wheel-wrap .spin-core-v19,
.wheel-wrap .spin-core-v18,
.wheel-wrap .spin-core-v17{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:72%!important;
  height:72%!important;
  transform:translate3d(-50%,-50%,0)!important;
  transform-origin:50% 50%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  display:block!important;
  overflow:visible!important;
  z-index:20!important;
}
.wheel-wrap .spin-core-v19 #spinWheel,
.wheel-wrap .spin-core-v18 #spinWheel,
.wheel-wrap .spin-core-v17 #spinWheel,
.wheel-wrap #spinWheel{
  position:absolute!important;
  left:0!important;
  top:0!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  z-index:1!important;
  transform-origin:50% 50%!important;
}
.wheel-wrap #spinCenterButton,
.wheel-wrap .spin-center-v19,
.wheel-wrap .spin-core-v19 > .spin-center-v19,
.wheel-wrap .spin-core-v18 > .spin-center-fixed-v18,
.wheel-wrap .spin-core-v17 > .spin-center-v17{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  inset:auto!important;
  width:88px!important;
  height:88px!important;
  min-width:88px!important;
  min-height:88px!important;
  max-width:88px!important;
  max-height:88px!important;
  transform:translate3d(-50%,-50%,0)!important;
  transform-origin:50% 50%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  pointer-events:none!important;
  z-index:999!important;
  color:#fff!important;
  font-weight:900!important;
}
.wheel-wrap #spinCenterButton img,
.wheel-wrap .spin-center-v19 img,
.wheel-wrap .spin-core-v19 > .spin-center-v19 img,
.wheel-wrap .spin-core-v18 > .spin-center-fixed-v18 img,
.wheel-wrap .spin-core-v17 > .spin-center-v17 img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  transform:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:50%!important;
}
.wheel-wrap #spinCenterButton span,
.wheel-wrap .spin-center-v19 span{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  border-radius:50%!important;
  margin:0!important;
}
/* Jika masih ada elemen lama yang telanjur menjadi anak langsung stage, sembunyikan agar tidak muncul kotak SPIN liar di kiri atas. */
.wheel-wrap > .spin-center:not(#spinCenterButton),
.wheel-wrap > .spin-center-v17:not(#spinCenterButton),
.wheel-wrap > .spin-center-fixed-v18:not(#spinCenterButton){
  display:none!important;
}
@media(max-width:560px){
  .wheel-wrap #spinCenterButton,
  .wheel-wrap .spin-center-v19,
  .wheel-wrap .spin-core-v19 > .spin-center-v19,
  .wheel-wrap .spin-core-v18 > .spin-center-fixed-v18,
  .wheel-wrap .spin-core-v17 > .spin-center-v17{
    width:72px!important;
    height:72px!important;
    min-width:72px!important;
    min-height:72px!important;
    max-width:72px!important;
    max-height:72px!important;
  }
}

/* =========================================================
   V20 FINAL: Tombol Tengah Spin Wheel via pseudo-element.
   Tidak memakai elemen .spin-center lagi, agar tidak bisa kabur ke kiri/atas.
   Posisi tombol selalu mengikuti titik tengah .wheel-wrap / roda.
   ========================================================= */
.wheel-wrap.spin-stage-v20{
  --stage-size:min(440px,100%)!important;
  --core-size:72%!important;
  position:relative!important;
  display:block!important;
  width:var(--stage-size)!important;
  max-width:100%!important;
  aspect-ratio:1 / 1!important;
  margin:10px auto 18px!important;
  overflow:visible!important;
  isolation:isolate!important;
  contain:none!important;
}
.wheel-wrap.spin-stage-v20 .spin-core-v20,
.wheel-wrap.spin-stage-v20 .spin-core-v19,
.wheel-wrap.spin-stage-v20 .spin-core-v18,
.wheel-wrap.spin-stage-v20 .spin-core-v17{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:var(--core-size)!important;
  height:var(--core-size)!important;
  transform:translate3d(-50%,-50%,0)!important;
  transform-origin:50% 50%!important;
  margin:0!important;
  padding:0!important;
  z-index:20!important;
  display:block!important;
  overflow:visible!important;
}
.wheel-wrap.spin-stage-v20 #spinWheel{
  position:absolute!important;
  inset:0!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  border-radius:50%!important;
  transform-origin:50% 50%!important;
  z-index:1!important;
}
/* Sembunyikan elemen center lama dari patch sebelumnya. Center baru memakai ::after. */
.wheel-wrap.spin-stage-v20 #spinCenterButton,
.wheel-wrap.spin-stage-v20 .spin-center,
.wheel-wrap.spin-stage-v20 .spin-center-v17,
.wheel-wrap.spin-stage-v20 .spin-center-fixed-v18,
.wheel-wrap.spin-stage-v20 .spin-center-v19{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.wheel-wrap.spin-stage-v20::after{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:clamp(72px,18%,96px)!important;
  height:clamp(72px,18%,96px)!important;
  transform:translate3d(-50%,-50%,0)!important;
  transform-origin:50% 50%!important;
  z-index:999!important;
  pointer-events:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  font-size:14px!important;
  color:#fff!important;
  text-align:center!important;
  line-height:1!important;
}
.wheel-wrap.spin-stage-v20[data-center-has-image="1"]::after{
  content:""!important;
  background-image:var(--spin-center-img)!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:contain!important;
  border:0!important;
  border-radius:50%!important;
  box-shadow:none!important;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.55))!important;
}
.wheel-wrap.spin-stage-v20[data-center-has-image="0"]::after,
.wheel-wrap.spin-stage-v20:not([data-center-has-image])::after{
  content:attr(data-center-text)!important;
  border:2px solid rgba(255,255,255,.9)!important;
  border-radius:50%!important;
  background:rgba(0,0,0,.28)!important;
  box-shadow:0 10px 18px rgba(0,0,0,.30), inset 0 0 22px rgba(255,255,255,.08)!important;
}
.wheel-wrap.spin-stage-v20 .wheel-pointer,
.wheel-wrap.spin-stage-v20 .wheel-pointer-img{
  position:absolute!important;
  left:50%!important;
  top:9%!important;
  transform:translateX(-50%)!important;
  z-index:1000!important;
}
@media(max-width:560px){
  .wheel-wrap.spin-stage-v20{--stage-size:min(440px,96vw)!important;--core-size:72%!important;}
  .wheel-wrap.spin-stage-v20::after{width:70px!important;height:70px!important;font-size:12px!important;}
}

/* =========================================================
   V21 FINAL: Reward image fit, winner ticker, info panel,
   terms popup, and idle wheel animation.
   ========================================================= */
.right-stack{display:flex;flex-direction:column;gap:18px;min-width:0}.winner-panel{overflow:hidden!important}.auto-scroll-winners{height:360px;overflow:hidden;position:relative}.winner-track{display:flex;flex-direction:column;gap:10px;will-change:transform;animation:winnerAutoScroll 24s linear infinite}.auto-scroll-winners:hover .winner-track{animation-play-state:paused}.winner-point-icon{width:58px;height:58px;min-width:58px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 25%,#fff7a2 0,#ffd900 28%,#b77800 70%,#4b2800 100%);box-shadow:0 0 0 2px rgba(255,255,255,.08),0 10px 18px rgba(0,0,0,.45),inset 0 0 12px rgba(255,255,255,.4);color:#1f1200;text-align:center}.winner-point-icon b{font-size:15px;line-height:1;font-weight:1000}.winner-point-icon span{font-size:8px;font-weight:900;letter-spacing:.08em;margin-top:3px}.winner{min-height:72px}.winner span{font-weight:700}.winner small{font-size:12px}@keyframes winnerAutoScroll{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}

.info-panel{overflow:hidden}.info-panel h2{margin:0 0 8px;color:var(--accent)}.info-card-list{display:grid;gap:12px;margin-top:14px}.info-card{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.24)}.info-card img{width:88px;height:88px;border-radius:14px;object-fit:cover;background:rgba(0,0,0,.35)}.info-card h3{margin:0 0 5px;font-size:15px;color:#fff}.info-card p{margin:0 0 8px;color:var(--muted);font-size:13px;line-height:1.45}.btn.mini{padding:7px 12px;font-size:12px}

.rewards-section{max-width:980px;margin:24px auto 42px!important}.compact-rewards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}.reward-card.compact{display:flex;flex-direction:column;padding:8px!important;min-height:auto!important}.reward-image-wrap{width:100%;height:150px;border-radius:12px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;overflow:hidden}.reward-card.compact .reward-image-wrap img,.reward-card.compact>img{width:100%!important;height:100%!important;max-height:150px!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center center!important;border-radius:10px!important;background:transparent!important;padding:8px!important;display:block!important}.reward-card.compact h3{min-height:auto!important;font-size:12px!important;line-height:1.25!important;margin:8px 0 6px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reward-card.compact .reward-meta{font-size:11px!important;line-height:1.25!important}.reward-card.compact .btn{margin-top:auto!important}.reward-category-head h3{font-size:15px!important}.reward-category-head span{font-size:12px!important}.reward-tabs .reward-tab{font-size:12px;padding:6px 10px}

.terms-popup{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:18px;z-index:9999;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease}.terms-popup.show{opacity:1;visibility:visible}.terms-box{width:min(560px,94vw);max-height:86vh;overflow:auto;background:linear-gradient(180deg,rgba(18,28,32,.96),rgba(6,14,15,.98));border:1px solid rgba(255,255,255,.16);border-radius:24px;padding:22px;text-align:left;box-shadow:0 28px 90px rgba(0,0,0,.72),0 0 0 1px rgba(51,210,170,.18);transform:translateY(18px) scale(.96);transition:.28s ease}.terms-popup.show .terms-box{transform:translateY(0) scale(1)}.terms-box h2{margin:0 0 12px;color:var(--accent);font-size:24px}.terms-content{color:var(--text);line-height:1.65;font-size:14px;background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:16px}.terms-box .btn{width:100%;padding:12px 18px}

.wheel-wrap.idle-wheel:not(.is-spinning) #spinWheel{animation:wheelIdleBreath 3.8s ease-in-out infinite}.wheel-wrap.idle-wheel:not(.is-spinning) .wheel-pointer,.wheel-wrap.idle-wheel:not(.is-spinning) .wheel-pointer-img{animation:pointerBounce 1.8s ease-in-out infinite}.wheel-wrap.idle-wheel:not(.is-spinning)::after{animation:centerPulse 2.4s ease-in-out infinite}@keyframes wheelIdleBreath{0%,100%{filter:drop-shadow(0 20px 40px rgba(0,0,0,.45)) brightness(1);transform:rotate(-1.2deg)}50%{filter:drop-shadow(0 24px 48px rgba(255,204,0,.20)) brightness(1.06);transform:rotate(1.2deg)}}@keyframes pointerBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}@keyframes centerPulse{0%,100%{filter:drop-shadow(0 8px 10px rgba(0,0,0,.55)) brightness(1)}50%{filter:drop-shadow(0 0 16px rgba(255,204,0,.52)) brightness(1.12)}}

@media(max-width:900px){.hero{grid-template-columns:1fr!important}.right-stack{width:100%}.rewards-section{max-width:100%}.auto-scroll-winners{height:310px}.reward-image-wrap{height:130px}}@media(max-width:640px){.compact-rewards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}.reward-image-wrap{height:96px}.reward-card.compact .reward-image-wrap img,.reward-card.compact>img{max-height:96px!important;padding:5px!important}.reward-card.compact h3{font-size:10px!important}.reward-card.compact .reward-meta{font-size:9px!important}.reward-card.compact .btn{font-size:10px!important;padding:6px 8px!important}.info-card{grid-template-columns:64px 1fr}.info-card img{width:64px;height:64px}.winner-point-icon{width:48px;height:48px;min-width:48px}.winner-point-icon b{font-size:12px}.winner-point-icon span{font-size:7px}.auto-scroll-winners{height:290px}}

/* === V22 FINAL: mobile responsive, tidy info, reward image fit, terms asset, GIF friendly === */
html, body { max-width: 100%; overflow-x: hidden; }
.hero { grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr) !important; gap: 22px !important; }
.left-stack, .right-stack { min-width: 0; width: 100%; display: flex; flex-direction: column; gap: 18px; }
.wheel-area { overflow: hidden; }
.info-panel-under-wheel { text-align: left; margin: 0 !important; }
.info-panel-under-wheel h2,
.info-panel-right h2 { margin: 0 0 8px !important; color: var(--accent); }
.info-card-list { display: flex; flex-direction: column; gap: 12px; }
.info-card { width: 100%; min-width: 0; overflow: hidden; }
.info-card-wide { grid-template-columns: 150px minmax(0, 1fr) !important; align-items: stretch !important; min-height: 145px; }
.info-card-wide img { width: 150px !important; height: 100% !important; min-height: 130px; object-fit: cover !important; }
.info-card p { word-break: break-word; }

/* Winner ticker */
.winner-panel { overflow: hidden; }
.auto-scroll-winners { height: 310px; overflow: hidden; position: relative; }
.winner-track { display: flex; flex-direction: column; gap: 10px; animation: svWinnerScroll 22s linear infinite; }
.auto-scroll-winners:hover .winner-track { animation-play-state: paused; }
.winner { min-height: 82px; flex: 0 0 auto; }
.winner-point-icon { width: 58px; height: 58px; min-width: 58px; border-radius: 16px; background: radial-gradient(circle at 28% 20%, #fff7a0 0, #ffd900 45%, #a97800 100%); color: #111; display: grid; place-items: center; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 16px rgba(0,0,0,.45); }
.winner-point-icon b { display: block; font-size: 15px; line-height: 1; }
.winner-point-icon span { display: block; font-size: 7px; line-height: 1; font-weight: 900; }
@keyframes svWinnerScroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }

/* Reward cards: native fit/contain so images stay light and tidy */
.rewards-section { max-width: 980px; margin: 24px auto 42px !important; padding: 16px !important; }
.compact-rewards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
.reward-card.compact { padding: 8px !important; border-radius: 14px !important; min-height: 0 !important; }
.reward-image-wrap { width: 100%; height: 108px !important; border-radius: 11px !important; background: rgba(4, 24, 20, .86); border: 1px solid rgba(255,255,255,.09); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.reward-card.compact .reward-image-wrap img, .reward-card.compact > img { width: 100% !important; height: 100% !important; max-height: 108px !important; object-fit: contain !important; object-position: center !important; aspect-ratio: auto !important; padding: 6px !important; background: transparent !important; }
.reward-card.compact h3 { font-size: 12px !important; line-height: 1.25 !important; margin: 8px 0 5px !important; min-height: 30px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reward-card.compact .reward-meta { display: grid !important; gap: 2px !important; font-size: 11px !important; margin-bottom: 8px !important; }
.reward-card.compact .btn { width: 100%; padding: 7px 10px !important; font-size: 11px !important; }
.reward-category + .reward-category { margin-top: 22px; }
.reward-pages { margin-top: 10px; }
.reward-page-btn { min-width: 30px; height: 30px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0,0,0,.35); color: var(--text); font-weight: 800; cursor: pointer; }
.reward-page-btn.active { background: linear-gradient(180deg,var(--button-from),var(--button-to)); color: #051310; }

/* Terms popup with editable asset */
.terms-popup { padding: 14px !important; }
.terms-box { width: min(620px, 94vw) !important; padding: 0 !important; overflow: hidden !important; }
.terms-asset { width: 100%; max-height: 260px; background: rgba(0,0,0,.30); overflow: hidden; border-radius: 24px 24px 0 0; }
.terms-asset img { width: 100%; height: 100%; max-height: 260px; object-fit: cover; display: block; }
.terms-box h2 { padding: 20px 22px 0; }
.terms-content { margin: 14px 22px 16px !important; max-height: 280px; overflow: auto; }
.terms-box .btn { width: calc(100% - 44px) !important; margin: 0 22px 22px; }

/* Idle animation: elegant and safe */
.wheel-wrap.idle-wheel:not(.is-spinning) #spinWheel { animation: wheelIdleBreath 3.8s ease-in-out infinite; }
.wheel-wrap.idle-wheel:not(.is-spinning) .wheel-pointer,
.wheel-wrap.idle-wheel:not(.is-spinning) .wheel-pointer-img { animation: pointerBounce 1.8s ease-in-out infinite; }
.wheel-wrap.idle-wheel:not(.is-spinning)::after { animation: centerPulse 2.4s ease-in-out infinite; }

/* Tablet */
@media (max-width: 1024px) {
  .container { width: min(100% - 28px, 900px) !important; }
  .hero { grid-template-columns: 1fr !important; gap: 16px !important; }
  .right-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .wheel-wrap { width: min(440px, 92vw) !important; }
  .auto-scroll-winners { height: 285px; }
}

/* Mobile */
@media (max-width: 720px) {
  body { background-attachment: scroll !important; }
  .container { width: 100% !important; padding: 0 12px !important; }
  .topbar { padding: 12px 0 !important; gap: 10px; flex-direction: column; align-items: stretch !important; }
  .brand { justify-content: center; text-align: center; display: flex; }
  .nav { justify-content: center; }
  .hero-copy { padding: 4px 0 0; }
  .hero-title { font-size: 24px !important; line-height: 1.1; }
  .hero-subtitle { font-size: 13px !important; }
  .panel { border-radius: 18px !important; padding: 12px !important; }
  .stats { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .stat { padding: 10px 8px !important; }
  .form-row { flex-direction: column; }
  .wheel-wrap { width: min(390px, 100%) !important; margin-top: 6px !important; }
  .spin-btn { min-width: 0 !important; width: min(240px, 90%) !important; font-size: 14px !important; }
  .right-stack { display: flex; flex-direction: column; gap: 14px; }
  .auto-scroll-winners { height: 248px; }
  .winner { min-height: 74px; padding: 8px !important; }
  .winner-point-icon { width: 50px; height: 50px; min-width: 50px; }
  .winner-point-icon b { font-size: 13px; }
  .info-card, .info-card-wide { grid-template-columns: 70px minmax(0,1fr) !important; min-height: 0; }
  .info-card img, .info-card-wide img { width: 70px !important; height: 70px !important; min-height: 70px !important; border-radius: 12px; }
  .info-card h3 { font-size: 13px !important; }
  .info-card p { font-size: 12px !important; line-height: 1.35 !important; }
  .rewards-section { padding: 12px !important; margin-top: 16px !important; }
  .compact-rewards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .reward-image-wrap { height: 86px !important; }
  .reward-card.compact .reward-image-wrap img, .reward-card.compact > img { max-height: 86px !important; padding: 5px !important; }
  .reward-card.compact h3 { font-size: 11px !important; min-height: 28px; }
  .reward-card.compact .reward-meta { font-size: 10px !important; }
  .section-title { font-size: 19px !important; }
  .reward-tabs { overflow-x: auto; padding-bottom: 4px; }
  .terms-box { width: min(96vw, 520px) !important; max-height: 90vh !important; }
  .terms-asset, .terms-asset img { max-height: 180px; }
  .terms-box h2 { font-size: 20px !important; padding: 16px 16px 0; }
  .terms-content { margin: 12px 16px 14px !important; max-height: 260px; font-size: 13px; }
  .terms-box .btn { width: calc(100% - 32px) !important; margin: 0 16px 16px; }
}

@media (max-width: 380px) {
  .compact-rewards { grid-template-columns: 1fr !important; }
  .reward-image-wrap { height: 104px !important; }
  .wheel-wrap { width: min(330px, 100%) !important; }
  .stats { grid-template-columns: 1fr !important; }
}

/* =========================================================
   V23 FINAL: Mobile tidy winner + information layout
   - Right column becomes single-column earlier (fix mobile/desktop-mode phones)
   - Winner ticker cards are compact and never overflow horizontally
   - Information panels are full width and readable on mobile
   ========================================================= */
@media (max-width: 1100px) {
  .container {
    width: 100% !important;
    max-width: 920px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .hero {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    align-items: stretch !important;
  }
  .left-stack,
  .right-stack {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .right-stack {
    gap: 14px !important;
  }
  .winner-panel,
  .info-panel,
  .info-panel-right,
  .info-panel-under-wheel,
  .rewards-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Winner newest: cleaner ticker cards */
.winner-panel {
  position: relative !important;
}
.winner-panel h2 {
  line-height: 1.15 !important;
}
.auto-scroll-winners {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.winner-track {
  width: 100% !important;
  max-width: 100% !important;
  padding: 6px 0 !important;
}
.winner {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.winner > div:last-child {
  min-width: 0 !important;
  overflow: hidden !important;
}
.winner > div:last-child b,
.winner > div:last-child span,
.winner > div:last-child small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.winner > div:last-child b,
.winner > div:last-child span {
  white-space: nowrap !important;
}
.winner > div:last-child small {
  color: var(--muted) !important;
}

/* Information panels: prevent narrow cards and ugly word wrapping */
.info-panel,
.info-panel * {
  min-width: 0 !important;
}
.info-card,
.info-card-wide {
  width: 100% !important;
  max-width: 100% !important;
}
.info-card p,
.info-card h3 {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
.info-card p {
  line-height: 1.5 !important;
}

@media (max-width: 720px) {
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .hero {
    padding-top: 8px !important;
  }
  .panel {
    width: 100% !important;
    max-width: 100% !important;
  }
  .winner-panel {
    padding: 14px !important;
  }
  .winner-panel h2,
  .info-panel h2,
  .section-title {
    font-size: 22px !important;
  }
  .auto-scroll-winners {
    height: 260px !important;
  }
  .winner-track {
    gap: 9px !important;
    animation-duration: 26s !important;
  }
  .winner {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    min-height: 72px !important;
    padding: 9px !important;
    border-radius: 14px !important;
  }
  .winner-point-icon {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: 14px !important;
  }
  .winner-point-icon b {
    font-size: 13px !important;
  }
  .winner-point-icon span {
    font-size: 7px !important;
  }
  .winner > div:last-child b {
    font-size: 14px !important;
  }
  .winner > div:last-child span {
    font-size: 13px !important;
    font-weight: 800 !important;
  }
  .winner > div:last-child small {
    font-size: 12px !important;
  }

  .info-panel-right,
  .info-panel-under-wheel {
    padding: 14px !important;
  }
  .info-card-list {
    gap: 10px !important;
  }
  .info-card,
  .info-card-wide {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 11px !important;
    border-radius: 15px !important;
  }
  .info-card:not(:has(img)),
  .info-card-wide:not(:has(img)) {
    grid-template-columns: 1fr !important;
  }
  .info-card img,
  .info-card-wide img {
    width: 72px !important;
    height: 72px !important;
    min-height: 72px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
  }
  .info-card h3 {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }
  .info-card p {
    font-size: 13px !important;
    line-height: 1.42 !important;
    margin-bottom: 8px !important;
  }

  .rewards-section {
    margin-top: 18px !important;
  }
}

@media (max-width: 420px) {
  .auto-scroll-winners {
    height: 245px !important;
  }
  .winner {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    gap: 9px !important;
  }
  .winner-point-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
  }
  .info-card,
  .info-card-wide {
    grid-template-columns: 1fr !important;
  }
  .info-card img,
  .info-card-wide img {
    width: 100% !important;
    height: 120px !important;
    min-height: 120px !important;
  }
}

/* =========================================================
   V24 FINAL: Info desktop fix + reward category tabs/paging
   ========================================================= */
.info-card > div:only-child,
.info-card-wide > div:only-child {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
}
.info-card:not(:has(img)),
.info-card-wide:not(:has(img)) {
  grid-template-columns: 1fr !important;
}
.info-card p,
.info-card-wide p {
  max-width: none !important;
}
.reward-tabs {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 0 0 16px !important;
}
.reward-tab {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  color: var(--text) !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: .2s ease;
}
.reward-tab:hover,
.reward-tab.active {
  background: linear-gradient(180deg,var(--button-from),var(--button-to)) !important;
  color: #06120f !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.28) !important;
}
.reward-category:not(.active) {
  display: none !important;
}
.reward-category.active {
  display: block !important;
}
.reward-pages:empty {
  display: none !important;
}
.reward-pages {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-top: 12px !important;
}
.reward-page-btn {
  display: inline-grid !important;
  place-items: center !important;
}
@media (max-width: 720px) {
  .rewards-section .compact-rewards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .reward-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 6px !important;
  }
  .reward-tab {
    flex: 0 0 auto !important;
  }
}
@media (max-width: 380px) {
  .rewards-section .compact-rewards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Admin v24: simpler admin reset form + reward groups */
.admin-reset-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr);
  gap: 8px;
  min-width: 220px;
}
.mini-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.reward-admin-group {
  margin: 14px 0 22px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(0,0,0,.16);
}
.reward-admin-group h3 {
  margin: 0 0 12px;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.reward-admin-group table {
  min-width: 980px;
}

/* =========================================================
   V25 FINAL: Login popup, user/admin login separation, password eye
   ========================================================= */
.login-popup-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
  padding: 18px;
}
.login-popup-modal.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.login-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.login-popup-card {
  position: relative;
  width: min(420px, 94vw);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(16,35,31,.96), rgba(8,13,24,.94));
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
  padding: 24px;
  transform: translateY(18px) scale(.96);
  transition: transform .32s cubic-bezier(.16,1,.3,1);
}
.login-popup-modal.show .login-popup-card {
  transform: translateY(0) scale(1);
}
.login-popup-card h2 {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 26px;
}
.login-popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.login-popup-note {
  margin: 14px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
.modern-login-card {
  width: min(440px, 92vw);
  margin: 8vh auto;
  padding: 24px;
}
.password-field {
  position: relative;
  display: block;
  width: 100%;
}
.form-row .password-field {
  min-width: 180px;
  flex: 1 1 180px;
}
.password-field > input.input,
.password-field > input[type="password"],
.password-field > input[type="text"] {
  padding-right: 48px !important;
}
.password-toggle {
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: .2s ease;
}
.password-toggle:hover {
  background: rgba(255,255,255,.16);
}
@media (max-width: 520px) {
  .login-popup-card {
    padding: 20px;
    border-radius: 20px;
  }
  .login-popup-card h2 {
    font-size: 23px;
  }
}

/* =========================================================
   V26 FINAL: password eye di dalam input + admin form responsive
   ========================================================= */
.password-field {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.password-field > input.input,
.password-field > input[type="password"],
.password-field > input[type="text"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding-right: 46px !important;
  line-height: 1.35 !important;
}
.password-toggle {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #fff900 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  z-index: 4 !important;
  line-height: 1 !important;
}
.password-toggle:hover,
.password-toggle:focus-visible,
.password-toggle.is-visible {
  background: rgba(255,255,255,.09) !important;
  color: #fff900 !important;
  outline: none !important;
}
.pw-eye-icon {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  pointer-events: none !important;
}
.login-popup-card .password-field,
.modern-login-card .password-field,
.profile-card .password-field {
  margin: 0 !important;
}

/* Form admin yang berisi password tidak lagi melebar/menabrak di desktop maupun mobile */
.admin-layout .admin-card > form.form-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 10px !important;
  align-items: center !important;
}
.admin-layout .admin-card > form.form-row .btn {
  width: auto !important;
  min-height: 42px !important;
  white-space: nowrap !important;
}
.admin-layout .admin-card > form.form-row label {
  min-width: 0 !important;
}
.admin-layout .admin-card table .input,
.admin-layout .admin-card table select,
.admin-layout .admin-card table textarea {
  max-width: 100% !important;
  min-width: 0 !important;
}
.admin-reset-form {
  min-width: 210px !important;
  width: min(260px, 100%) !important;
}
.admin-reset-form .password-field {
  width: 100% !important;
}
.admin-reset-form .btn {
  width: 100% !important;
  justify-content: center !important;
}
.table-wrap td,
.table-wrap th {
  vertical-align: top !important;
}
@media (max-width: 900px) {
  .admin-layout .admin-card > form.form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 560px) {
  .admin-layout .admin-card > form.form-row {
    grid-template-columns: 1fr !important;
  }
  .admin-reset-form {
    width: 100% !important;
    min-width: 0 !important;
  }
}