*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:#06111f;color:#fff}
button,input,select{font:inherit}
button{cursor:pointer}
img{display:block}
h1,h2,h3,p{margin:0}

.antario-clean-body{overflow:hidden;background:#06111f}

.antario-phone{
  position:relative;
  width:100vw;
  max-width:437px;
  height:100svh;
  max-height:757px;
  margin:0 auto;
  overflow:hidden;
  background:#07111f;
}

.antario-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:url('../backgrounds/bg_antario_city_night.webp') center center/cover no-repeat;
}

.antario-dim{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(circle at 50% 30%, rgba(60,145,255,.10), transparent 34%),
    linear-gradient(to bottom, rgba(3,10,22,.12) 0%, rgba(3,10,22,.04) 31%, rgba(3,10,22,.22) 53%, rgba(3,10,22,.76) 80%, rgba(3,10,22,.98) 100%);
  pointer-events:none;
}

.antario-phone>*:not(.antario-bg):not(.antario-dim){position:relative;z-index:2}

.clean-card,.clean-panel{
  background:rgba(4,13,28,.80);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 18px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

/* ===== TOTAL SMALL DASHBOARD: 437 x 757 fixed layout ===== */
.clean-header{
  position:absolute!important;
  left:0;right:0;top:0;
  height:78px;
  padding:7px 8px 0;
  display:grid;
  grid-template-columns:44% 31% 21%;
  gap:7px;
  align-items:start;
  z-index:50!important;
}

.clean-profile{
  height:66px;
  border-radius:18px;
  padding:5px 7px;
  display:flex;
  align-items:center;
  gap:6px;
}

.clean-avatar{
  width:50px;
  height:50px;
  flex:0 0 50px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(#99ff44,#1f641e);
  box-shadow:0 0 13px rgba(120,255,70,.26);
}

.clean-avatar img{
  width:44px;
  height:44px;
  object-fit:cover;
  border-radius:50%;
}

.clean-profile-text{min-width:0;flex:1}
.clean-name{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:1000;line-height:1.05}
.clean-name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clean-name img{width:13px;height:13px;object-fit:contain}
.clean-level{font-size:10px;font-weight:1000;color:#b4ff43;margin-top:2px}
.clean-xp-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:5px}
.clean-xp-bar span{display:block;height:100%;background:linear-gradient(90deg,#a5ff3e,#4fc316);border-radius:99px}
.clean-xp-text{text-align:right;font-size:8px;font-weight:800;color:#f0f7ff;margin-top:2px}

.clean-currency{
  height:66px;
  border-radius:18px;
  padding:6px 7px;
  display:grid;
  gap:4px;
}

.clean-currency div{
  display:grid;
  grid-template-columns:19px 1fr 17px;
  align-items:center;
  gap:5px;
}

.clean-currency div>img{width:19px;height:19px;object-fit:contain}
.clean-currency b{font-size:13px;font-weight:1000}
.clean-currency button{width:17px;height:17px;padding:0;border:0;background:transparent}
.clean-currency button img{width:17px;height:17px}

.clean-actions{
  display:flex;
  justify-content:flex-end;
  gap:5px;
  padding-top:4px;
}

.clean-actions button{
  position:relative;
  width:33px;
  height:33px;
  min-width:33px;
  min-height:33px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(4,13,28,.80);
  box-shadow:0 7px 15px rgba(0,0,0,.32);
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.clean-actions button>img{width:16px;height:16px;object-fit:contain}
.clean-actions i{
  position:absolute;
  right:-2px;
  top:-3px;
  min-width:15px;
  height:15px;
  border-radius:50%;
  background:#ff4040;
  border:1px solid #07111f;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-style:normal;
  font-weight:1000;
}

/* LOGO */
.clean-logo{
  position:absolute!important;
  top:84px;
  left:0;
  right:0;
  height:43px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:30!important;
}

.clean-logo img{
  width:38%;
  max-width:170px;
  object-fit:contain;
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.58));
}

/* MENU KIRI/KANAN */
.clean-side{
  position:absolute!important;
  top:129px;
  display:flex;
  flex-direction:column;
  gap:9px;
  z-index:70!important;
}

.clean-side-left{left:10px}
.clean-side-right{right:10px}

.clean-side button{
  width:56px;
  height:68px;
  border-radius:18px;
  border:1px solid rgba(139,255,65,.50);
  background:rgba(4,13,28,.76);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:4px 2px;
  box-shadow:0 8px 17px rgba(0,0,0,.33), inset 0 1px 0 rgba(255,255,255,.06);
}

.clean-side button.is-active{
  border-color:rgba(146,255,68,.85);
  box-shadow:0 0 14px rgba(146,255,68,.20),0 8px 17px rgba(0,0,0,.33);
}

.clean-side img{width:25px;height:25px;object-fit:contain}
.clean-side span{font-size:7.5px;font-weight:1000;line-height:1;text-align:center}

/* ROOT */
.clean-stage{position:static!important;height:auto!important}

/* KENDARAAN */
.clean-vehicle-area{
  position:absolute!important;
  left:76px;
  right:76px;
  top:134px;
  height:213px;
  z-index:8!important;
  pointer-events:none;
}

.clean-vehicle-img{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:100%;
  height:213px;
  max-width:285px;
  object-fit:contain;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.55));
}

.clean-walk-box{
  position:absolute;
  left:50%;
  top:52px;
  transform:translateX(-50%);
  width:96px;
  height:96px;
  border-radius:22px;
  background:rgba(4,13,28,.42);
  border:1px solid rgba(255,255,255,.12);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
}

.clean-walk-box img{width:42px;height:42px;object-fit:contain}
.clean-walk-box b{font-size:11px}

/* DURABILITY / BENSIN */
.clean-vehicle-stats{
  position:absolute!important;
  left:50%;
  top:368px;
  transform:translateX(-50%);
  width:62%;
  height:58px;
  border-radius:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  z-index:45!important;
}

.clean-vehicle-stats>div{
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 9px;
}

.clean-vehicle-stats>div+div{border-left:1px solid rgba(255,255,255,.13)}
.clean-vehicle-stats img{width:22px;height:22px;object-fit:contain}
.clean-vehicle-stats small,.clean-status small{
  display:block;
  font-size:7.5px;
  font-weight:900;
  color:#e8f3ff;
}
.clean-vehicle-stats b,.clean-status b{
  display:block;
  font-size:11px;
  font-weight:1000;
  margin:1px 0 3px;
}
.clean-vehicle-stats em,.clean-status em{
  display:block;
  width:100%;
  min-width:42px;
  height:6px;
  border-radius:99px;
  overflow:hidden;
  background:rgba(255,255,255,.10);
}
.clean-vehicle-stats em span,.clean-status em span{display:block;height:100%;border-radius:99px}
.bar-green span{background:linear-gradient(90deg,#9cff40,#54c617)}
.bar-yellow span{background:linear-gradient(90deg,#ffd75e,#e9aa0b)}
.bar-red span{background:linear-gradient(90deg,#ff7070,#e53e3e)}

/* PEKERJAAN AKTIF */
.clean-active-job{
  position:absolute!important;
  left:14px;
  right:14px;
  top:440px;
  height:143px;
  border-radius:18px;
  padding:9px 11px;
  background:linear-gradient(135deg,rgba(6,60,24,.91),rgba(3,13,28,.88));
  border-color:rgba(137,255,68,.28);
  z-index:40!important;
}

.clean-active-job h2{
  color:#aaff43;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.3px;
  margin-bottom:5px;
}

.clean-active-grid{
  display:grid;
  grid-template-columns:48px 1fr 86px;
  gap:7px;
  align-items:center;
}

.clean-job-icon{display:flex;align-items:center;justify-content:center}
.clean-job-icon img{width:46px;height:46px;object-fit:contain}

.clean-job-copy{min-width:0}
.clean-job-copy h3{
  font-size:13px;
  line-height:1.05;
  font-weight:1000;
  margin:0 0 3px;
}

.clean-job-copy p{
  display:flex;
  align-items:center;
  gap:4px;
  color:#eaf5ff;
  font-size:8px;
  margin:1px 0;
}

.clean-job-copy p img{width:9px;height:9px;object-fit:contain}

.clean-time-box{
  border-radius:13px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(2,9,21,.32);
  padding:6px 7px;
}

.clean-time-box small{
  display:block;
  text-align:center;
  font-size:7px;
  font-weight:900;
}

.clean-time-box>b{
  display:block;
  color:#95ff36;
  font-size:21px;
  line-height:1;
  font-weight:1000;
  text-align:center;
  margin:2px 0 4px;
}

.clean-time-box span{
  display:block;
  font-size:7px;
  color:#e9f4ff;
  margin-bottom:1px;
}

.clean-time-box p{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:3px;
  font-size:7.5px;
  font-weight:900;
}

.clean-time-box p img{width:10px;height:10px;object-fit:contain}

.clean-wide-btn{
  position:absolute;
  left:12px;
  right:12px;
  bottom:8px;
  height:30px;
  border:0;
  border-radius:12px;
  background:linear-gradient(180deg,#82e13c,#4eb618);
  color:#fff;
  font-size:11px;
  font-weight:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  box-shadow:inset 0 1px rgba(255,255,255,.25),0 6px 13px rgba(0,0,0,.22);
}

.clean-wide-btn:disabled{opacity:.7}
.clean-wide-btn img{width:12px;height:12px;object-fit:contain}

/* STATUS */
.clean-status{
  position:absolute!important;
  left:14px;
  right:14px;
  top:596px;
  height:55px;
  border-radius:18px;
  padding:6px 7px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  z-index:40!important;
}

.clean-status>div{
  display:flex;
  gap:4px;
  align-items:flex-start;
  padding:3px 4px;
  border-right:1px solid rgba(255,255,255,.11);
}

.clean-status>div:last-child{border-right:0}
.clean-status img{width:19px;height:19px;object-fit:contain}
.clean-status strong{display:block;color:#ffc72d;font-size:8px;letter-spacing:0;white-space:nowrap}

/* PEKERJAAN TERSEDIA */
.clean-available{
  position:absolute!important;
  left:14px;
  right:14px;
  top:660px;
  height:74px;
  border-radius:18px;
  padding:7px 9px;
  z-index:40!important;
}

.clean-available header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:4px;
}

.clean-available header b{
  color:#aaff43;
  font-size:11px;
  font-weight:1000;
}

.clean-available header span{
  display:flex;
  align-items:center;
  gap:3px;
  font-size:8px;
}

.clean-available header img{width:11px;height:11px;object-fit:contain}

.clean-available-row{
  display:grid;
  grid-template-columns:36px 1fr 78px 58px;
  gap:5px;
  align-items:center;
  padding:5px;
  border-radius:12px;
  border:1px solid rgba(136,255,67,.18);
  background:linear-gradient(180deg,rgba(11,48,25,.80),rgba(5,24,15,.82));
}

.clean-avail-img{width:34px;height:34px;object-fit:contain}
.clean-avail-copy{min-width:0}
.clean-avail-copy h3{
  font-size:10px;
  line-height:1.05;
  font-weight:1000;
  margin:0 0 2px;
}

.clean-avail-copy p{
  display:flex;
  align-items:center;
  gap:3px;
  flex-wrap:wrap;
  font-size:7px;
}

.clean-avail-copy img{width:8px;height:8px;object-fit:contain}
.clean-avail-reward small{display:block;font-size:6.5px;color:#eaf5ff;margin-bottom:1px}
.clean-avail-reward p{
  display:flex;
  align-items:center;
  gap:3px;
  font-size:7px;
  font-weight:900;
  flex-wrap:wrap;
}

.clean-avail-reward img{width:9px;height:9px;object-fit:contain}

.clean-ambil{
  height:27px;
  border:0;
  border-radius:10px;
  background:linear-gradient(180deg,#8be13d,#5bb51f);
  color:#fff;
  font-size:10px;
  font-weight:1000;
  box-shadow:inset 0 1px rgba(255,255,255,.25),0 5px 10px rgba(0,0,0,.20);
}

.clean-ambil:disabled{opacity:.55}
.clean-empty{text-align:center;padding:10px;color:#dce8f5}

/* BOTTOM */
.clean-bottom{
  position:absolute!important;
  left:10px;
  right:10px;
  bottom:6px;
  height:58px;
  border-radius:18px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:4px;
  padding:5px 4px;
  z-index:80!important;
}

.clean-bottom button{
  position:relative;
  border:0;
  border-radius:14px;
  background:transparent;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:3px;
  font-weight:1000;
}

.clean-bottom button.is-active{
  background:linear-gradient(180deg,rgba(125,255,55,.25),rgba(125,255,55,.08));
  border:1px solid rgba(134,255,65,.35);
}

.clean-bottom img{width:18px;height:18px;object-fit:contain}
.clean-bottom span{font-size:7px;line-height:1}
.clean-bottom i{
  position:absolute;
  top:6px;
  right:13px;
  width:7px;
  height:7px;
  min-width:7px;
  min-height:7px;
  border-radius:50%;
  background:#ff3535;
}

/* DRAWER */
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:.2s ease;z-index:90}
.drawer-backdrop.show{opacity:1;pointer-events:auto}
.drawer-sheet{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translate(-50%,105%);
  width:100vw;
  max-width:437px;
  max-height:74svh;
  overflow:auto;
  background:rgba(5,14,28,.97);
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px 22px 0 0;
  padding:14px 14px 20px;
  box-shadow:0 -10px 40px rgba(0,0,0,.45);
  z-index:100;
  transition:.24s ease;
}
.drawer-sheet.open{transform:translate(-50%,0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.drawer-head h2{margin:0;color:#a6ff42;font-size:20px;text-transform:uppercase}
.drawer-close{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-size:28px;line-height:1}
body.drawer-open{overflow:hidden}

.panel-card{background:rgba(4,13,28,.82);border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:12px;margin-bottom:12px}
.panel-card h2{margin:0 0 10px;color:#aaff43;font-size:17px}
.job-list,.vehicle-list,.market-list{display:grid;gap:10px}
.job-card,.vehicle-card,.market-list article{
  display:grid;
  grid-template-columns:62px 1fr auto;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:16px;
  background:rgba(7,44,30,.70);
  border:1px solid rgba(141,255,70,.20);
}
.vehicle-card{grid-template-columns:68px 1fr auto auto;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}
.job-card > img,.vehicle-card > img{width:60px;height:60px;object-fit:contain}
.vehicle-card img{width:66px;height:66px}
.job-card h3,.vehicle-card h3{margin:0 0 4px;font-size:16px}
.job-card p,.vehicle-card p,.job-card small,.vehicle-card small,.hint,.history{color:#dce8f5;font-size:12px}
.btn{border:0;border-radius:14px;background:linear-gradient(#77d32f,#319108);color:#fff;font-weight:900;text-transform:uppercase;padding:11px 14px}
.btn.primary{width:100%;margin-top:6px}
.btn.secondary{background:linear-gradient(#475569,#1f2937)}
.btn.small{padding:8px 11px;font-size:12px}
.btn:disabled{opacity:.55;cursor:not-allowed}
input,select{width:100%;border:1px solid rgba(255,255,255,.20);background:rgba(0,0,0,.28);color:#fff;border-radius:14px;padding:12px 13px;margin-bottom:8px;outline:none}
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}

@media (min-width: 438px){
  .antario-phone{
    transform-origin:top center;
  }
}

/* ===== FIT SCREEN CLEAN CONFLICT FIX ===== */
/* Tidak ubah layout. Hanya hilangkan konflik agar fit_screen_only bisa kerja. */
@media (pointer: coarse), (max-width: 900px){
  html,
  body{
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#06111f !important;
  }

  .antario-clean-body,
  body.login-body,
  body.auth-body{
    display:block !important;
    justify-content:initial !important;
    align-items:initial !important;
    overflow:hidden !important;
  }

  .antario-phone,
  .login-screen,
  .auth-screen,
  .game{
    transform-origin:top left !important;
    margin:0 !important;
  }

  .clean-bottom{
    bottom:6px !important;
    z-index:80 !important;
  }
}


/* ===== BOTTOM ANCHORED DASHBOARD LAYOUT ===== */
/*
  Patokan layout sekarang dari bawah:
  - bottom menu tetap di bawah
  - pekerjaan tersedia dekat bottom menu
  - status dekat pekerjaan tersedia
  - pekerjaan aktif dekat status
  - durability/bensin dekat pekerjaan aktif
  - kalau HP tinggi, ruang kosong bertambah di area kendaraan saja
*/
.clean-bottom{
  top:auto !important;
  bottom:6px !important;
  height:58px !important;
}

.clean-available{
  top:auto !important;
  bottom:72px !important;
  height:74px !important;
}

.clean-status{
  top:auto !important;
  bottom:154px !important;
  height:55px !important;
}

.clean-active-job{
  top:auto !important;
  bottom:217px !important;
  height:143px !important;
}

.clean-vehicle-stats{
  top:auto !important;
  bottom:368px !important;
  height:58px !important;
}

/* Pastikan kalau canvas jadi lebih tinggi di HP tertentu, stack bawah tetap ikut bawah */
@media (pointer: coarse), (max-width: 900px){
  .clean-bottom{
    top:auto !important;
    bottom:6px !important;
    height:58px !important;
  }

  .clean-available{
    top:auto !important;
    bottom:72px !important;
    height:74px !important;
  }

  .clean-status{
    top:auto !important;
    bottom:154px !important;
    height:55px !important;
  }

  .clean-active-job{
    top:auto !important;
    bottom:217px !important;
    height:143px !important;
  }

  .clean-vehicle-stats{
    top:auto !important;
    bottom:368px !important;
    height:58px !important;
  }
}


/* ===== VEHICLE CARD REMOVED + BIGGER VEHICLE ===== */
/* Hapus card kendaraan tengah, fokus ke gambar kendaraan yang lebih besar */
.clean-vehicle-area{
  left:52px !important;
  right:52px !important;
  top:126px !important;
  height:242px !important;
  z-index:8 !important;
  overflow:visible !important;
}

.clean-vehicle-img{
  left:50% !important;
  top:2px !important;
  transform:translateX(-50%) !important;
  width:100% !important;
  height:255px !important;
  max-width:360px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 22px 24px rgba(0,0,0,.58)) !important;
}

.clean-walk-box{
  width:100% !important;
  height:242px !important;
  top:0 !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  display:block !important;
  padding:0 !important;
  overflow:visible !important;
}

.clean-walk-box img{
  position:absolute !important;
  left:50% !important;
  bottom:4px !important;
  transform:translateX(-50%) !important;
  width:207px !important;
  height:207px !important;
  max-width:none !important;
  object-fit:contain !important;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.45)) !important;
}

.clean-walk-box b{
  margin-top:2px !important;
  font-size:18px !important;
  line-height:1.05 !important;
  text-shadow:0 2px 6px rgba(0,0,0,.85) !important;
}

/* kalau kendaraan utama ada, beri ruang tampil lebih besar */
.clean-stage .clean-vehicle-img + .clean-walk-box{
  padding-top:18px !important;
}

@media (pointer: coarse), (max-width:900px){
  .clean-vehicle-area{
    left:52px !important;
    right:52px !important;
    top:126px !important;
    height:242px !important;
    overflow:visible !important;
  }

  .clean-vehicle-img{
    height:255px !important;
    max-width:360px !important;
  }

  .clean-walk-box{
    height:242px !important;
    padding:0 !important;
    overflow:visible !important;
  }

  .clean-walk-box img{
    position:absolute !important;
    left:50% !important;
    bottom:4px !important;
    transform:translateX(-50%) !important;
    width:207px !important;
    height:207px !important;
  }

  .clean-walk-box b{
    font-size:18px !important;
  }
}

/* ===== GARAGE MODAL FULLSCREEN OWNED ONLY ===== */
/* Follow reference image: centered title, stage, big stats card, clear readability. */
#drawer-garasi.garage-screen{position:fixed !important;inset:0 !important;width:100vw !important;height:100dvh !important;max-width:none !important;max-height:none !important;padding:0 !important;overflow:hidden !important;border-radius:0 !important;background:rgba(1,9,20,.82) !important;border:0 !important;box-shadow:none !important;transform:translateY(18px) scale(.985) !important;opacity:0 !important;pointer-events:none !important;transition:transform .28s cubic-bezier(.18,.9,.22,1),opacity .22s ease !important;z-index:2147482000 !important;}
#drawer-garasi.garage-screen.open{transform:translateY(0) scale(1) !important;opacity:1 !important;pointer-events:auto !important;}
#drawer-garasi.garage-screen.closing{transform:translateY(20px) scale(.985) !important;opacity:0 !important;pointer-events:none !important;}
#drawer-garasi .garage-bg{position:absolute;inset:28px 22px;background:linear-gradient(180deg, rgba(1,8,18,.18), rgba(1,8,18,.66)), url('../backgrounds/bg_garage_showroom.png') center center/cover no-repeat;border-radius:34px;border:2px solid rgba(151,255,63,.38);box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 28px 50px rgba(0,0,0,.38);}
#drawer-garasi .garage-overlay{position:absolute;inset:28px 22px;border-radius:34px;background:linear-gradient(180deg, rgba(3,15,30,.18), rgba(3,15,30,.34));pointer-events:none;z-index:1;}
#drawer-garasi .garage-head{position:relative;z-index:3;padding:52px 48px 10px;display:flex;justify-content:center;align-items:flex-start;}
#drawer-garasi .garage-head-centered .garage-head-copy{width:100%;text-align:center;}
#drawer-garasi .garage-head-centered h2{margin:0;font-size:58px;line-height:1;font-weight:1000;letter-spacing:.02em;text-transform:uppercase;color:#b8ff57;text-shadow:0 4px 0 rgba(0,0,0,.28),0 12px 24px rgba(0,0,0,.45);}
#drawer-garasi .garage-head-centered p{margin:14px 0 0;display:flex;align-items:center;justify-content:center;gap:14px;color:#f1f6ff;font-size:20px;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.6);}
#drawer-garasi .garage-head-centered p span{display:block;width:64px;height:4px;border-radius:99px;background:linear-gradient(90deg,rgba(143,255,66,.0),rgba(143,255,66,.95),rgba(143,255,66,.0));}
#drawer-garasi .garage-close{position:absolute;right:40px;top:44px;width:88px !important;height:88px !important;border-radius:50% !important;border:2px solid rgba(151,255,63,.38) !important;background:rgba(4,14,30,.66) !important;color:#b8ff57 !important;font-size:60px !important;line-height:1 !important;box-shadow:0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06) !important;}
#drawer-garasi .garage-slider-wrap{position:relative;z-index:3;padding:0 34px 34px;height:calc(100dvh - 160px);} 
#drawer-garasi .garage-slider{height:100%;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
#drawer-garasi .garage-slider::-webkit-scrollbar{display:none}
#drawer-garasi .garage-slide{flex:0 0 100%;min-width:100%;height:100%;scroll-snap-align:center;display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:0 6px 0;}
#drawer-garasi .garage-stage{position:relative;display:flex;align-items:flex-end;justify-content:center;height:31%;min-height:290px;padding-top:10px;}
#drawer-garasi .garage-stage-floor{position:absolute;left:12%;right:12%;bottom:4px;height:42px;border-radius:999px;background:radial-gradient(ellipse, rgba(144,255,67,.22) 0%, rgba(144,255,67,.18) 42%, rgba(10,25,40,.16) 54%, rgba(0,0,0,0) 72%);} 
#drawer-garasi .garage-stage::after{content:'';position:absolute;left:14%;right:14%;bottom:0;height:34px;border-radius:999px;border:4px solid rgba(153,255,67,.72);box-shadow:0 0 22px rgba(153,255,67,.26), inset 0 0 14px rgba(153,255,67,.16);}
#drawer-garasi .garage-vehicle{position:relative;z-index:2;max-width:66%;max-height:95%;object-fit:contain;filter:drop-shadow(0 30px 26px rgba(0,0,0,.48));}
#drawer-garasi .garage-equipped{position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:4;padding:12px 24px;border-radius:999px;background:linear-gradient(180deg,#b8ff57,#63c721);color:#113200;font-size:18px;font-weight:1000;box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.45);} 
#drawer-garasi .garage-nav{position:absolute;top:34%;transform:translateY(-50%);z-index:5;width:72px;height:72px;border-radius:50%;border:2px solid rgba(151,255,63,.38);background:rgba(4,14,30,.62);color:#aaff43;font-size:60px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 24px rgba(0,0,0,.28);} 
#drawer-garasi .garage-nav.prev{left:30px;} 
#drawer-garasi .garage-nav.next{right:30px;} 
#drawer-garasi .garage-namebar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:0 32px;color:#fff;}
#drawer-garasi .garage-name-left{display:flex;align-items:center;gap:16px;min-width:0;}
#drawer-garasi .garage-name-left img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));}
#drawer-garasi .garage-name-left h3{margin:0;font-size:28px;line-height:1.1;font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 8px rgba(0,0,0,.5);}
#drawer-garasi .garage-tier{flex:0 0 auto;display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:16px;background:rgba(140,255,66,.18);border:1px solid rgba(151,255,63,.34);color:#b8ff57;font-size:18px;font-weight:1000;}
#drawer-garasi .garage-stats-card{margin:0 18px;padding:22px 22px 18px;border-radius:28px;background:linear-gradient(180deg, rgba(2,15,34,.92), rgba(1,12,28,.95));border:2px solid rgba(151,255,63,.34);box-shadow:0 16px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);}
#drawer-garasi .grid-two{display:grid;grid-template-columns:1fr 1fr;gap:0;}
#drawer-garasi .garage-main-box{padding:0 10px 16px;}
#drawer-garasi .garage-main-box:first-child{border-right:1px solid rgba(255,255,255,.08);}
#drawer-garasi .garage-main-label{display:flex;align-items:center;gap:12px;color:#f5fbff;font-size:20px;font-weight:900;letter-spacing:.01em;}
#drawer-garasi .garage-main-icon{font-size:30px;line-height:1;}
#drawer-garasi .garage-main-value{margin:12px 0 14px;font-size:34px;line-height:1;color:#aaff43;font-weight:1000;}
#drawer-garasi .garage-main-box em{display:block;width:100%;height:18px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.12);} 
#drawer-garasi .garage-main-box em i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#74dd2b,#aaff43);} 
#drawer-garasi .garage-mini-stats{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);} 
#drawer-garasi .garage-mini-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:18px 12px;border-bottom:1px solid rgba(255,255,255,.06);} 
#drawer-garasi .garage-mini-item:nth-last-child(-n+2){border-bottom:none;} 
#drawer-garasi .garage-mini-item:nth-child(odd){border-right:1px solid rgba(255,255,255,.06);} 
#drawer-garasi .garage-mini-item span{font-size:15px;color:#f2f8ff;font-weight:900;} 
#drawer-garasi .garage-mini-item strong{font-size:20px;color:#aaff43;font-weight:1000;text-align:right;} 
#drawer-garasi .garage-job-card.wide{margin:0 18px;padding:18px 24px;border-radius:24px;background:linear-gradient(180deg, rgba(2,15,34,.92), rgba(1,12,28,.95));border:2px solid rgba(255,255,255,.12);box-shadow:0 10px 24px rgba(0,0,0,.24);} 
#drawer-garasi .garage-job-card span{display:block;color:#eaf4ff;font-size:18px;font-weight:900;margin-bottom:8px;} 
#drawer-garasi .garage-job-card strong{display:block;color:#aaff43;font-size:26px;line-height:1.25;font-weight:1000;} 
#drawer-garasi .garage-dots-block{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 18px;}
#drawer-garasi .garage-hint{position:static;text-align:center;} 
#drawer-garasi .garage-hint span{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 14px;border-radius:999px;color:#d7ebff;font-size:15px;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.8);} 
#drawer-garasi .garage-dots{display:flex;align-items:center;justify-content:center;gap:16px;} 
#drawer-garasi .garage-dot{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.38);border:0;box-shadow:none;padding:0;} 
#drawer-garasi .garage-dot.active{background:#aaff43;} 
#drawer-garasi .garage-actions.hero-actions{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;padding:0 18px 10px;margin-top:auto;} 
#drawer-garasi .garage-actions .btn{height:94px;border-radius:24px;padding:0 22px;font-size:24px;font-weight:1000;text-transform:uppercase;} 
#drawer-garasi .garage-actions .btn.primary{background:linear-gradient(180deg,#9cff44,#6ace20);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 24px rgba(0,0,0,.24);} 
#drawer-garasi .garage-actions .btn.secondary{background:linear-gradient(180deg,#1d2c40,#0d192b);border:2px solid rgba(255,255,255,.16);color:#f3f8ff;} 
#drawer-garasi .garage-empty-full{position:relative;z-index:4;margin:170px 38px 0;min-height:300px;border-radius:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;background:rgba(4,13,28,.86);border:2px solid rgba(145,255,70,.24);box-shadow:0 14px 30px rgba(0,0,0,.38);} 
#drawer-garasi .garage-empty-full img{width:110px;height:110px;object-fit:contain;margin-bottom:12px;} 
#drawer-garasi .garage-empty-full h3{font-size:30px;color:#aaff43;margin-bottom:10px;} 
#drawer-garasi .garage-empty-full p{font-size:18px;color:#e6f2ff;} 
@media (max-width:900px){
  #drawer-garasi .garage-bg,#drawer-garasi .garage-overlay{inset:12px; border-radius:24px;}
  #drawer-garasi .garage-head{padding:28px 18px 8px;}
  #drawer-garasi .garage-head-centered h2{font-size:32px;}
  #drawer-garasi .garage-head-centered p{margin-top:8px;font-size:14px;gap:8px;}
  #drawer-garasi .garage-head-centered p span{width:34px;height:3px;}
  #drawer-garasi .garage-close{right:18px;top:22px;width:54px !important;height:54px !important;font-size:34px !important;}
  #drawer-garasi .garage-slider-wrap{padding:0 10px 12px;height:calc(100dvh - 106px);} 
  #drawer-garasi .garage-slide{gap:10px;padding:0;}
  #drawer-garasi .garage-stage{height:30%;min-height:200px;}
  #drawer-garasi .garage-stage::after{left:14%;right:14%;height:20px;border-width:2px;}
  #drawer-garasi .garage-stage-floor{height:28px;left:12%;right:12%;}
  #drawer-garasi .garage-vehicle{max-width:72%;max-height:90%;}
  #drawer-garasi .garage-equipped{font-size:12px;padding:8px 16px;top:0;}
  #drawer-garasi .garage-nav{width:44px;height:44px;font-size:36px;top:34%;}
  #drawer-garasi .garage-nav.prev{left:4px;}#drawer-garasi .garage-nav.next{right:4px;}
  #drawer-garasi .garage-namebar{padding:0 8px;gap:10px;}
  #drawer-garasi .garage-name-left{gap:8px;}
  #drawer-garasi .garage-name-left img{width:28px;height:28px;}
  #drawer-garasi .garage-name-left h3{font-size:18px;}
  #drawer-garasi .garage-tier{height:30px;padding:0 10px;border-radius:10px;font-size:13px;}
  #drawer-garasi .garage-stats-card{margin:0 4px;padding:14px 14px 10px;border-radius:18px;}
  #drawer-garasi .garage-main-box{padding:0 8px 10px;}
  #drawer-garasi .garage-main-label{gap:8px;font-size:12px;}
  #drawer-garasi .garage-main-icon{font-size:19px;}
  #drawer-garasi .garage-main-value{margin:8px 0 10px;font-size:22px;}
  #drawer-garasi .garage-main-box em{height:10px;}
  #drawer-garasi .garage-mini-stats{margin-top:10px;padding-top:10px;}
  #drawer-garasi .garage-mini-item{padding:10px 6px;}
  #drawer-garasi .garage-mini-item span{font-size:10px;}
  #drawer-garasi .garage-mini-item strong{font-size:14px;}
  #drawer-garasi .garage-job-card.wide{margin:0 4px;padding:12px 14px;border-radius:16px;}
  #drawer-garasi .garage-job-card span{font-size:12px;margin-bottom:5px;}
  #drawer-garasi .garage-job-card strong{font-size:18px;}
  #drawer-garasi .garage-dots-block{gap:6px;padding:0 4px;}
  #drawer-garasi .garage-hint span{padding:0 6px;font-size:11px;min-height:20px;}
  #drawer-garasi .garage-dots{gap:10px;}
  #drawer-garasi .garage-dot{width:10px;height:10px;}
  #drawer-garasi .garage-actions.hero-actions{gap:10px;padding:0 4px 2px;}
  #drawer-garasi .garage-actions .btn{height:56px;border-radius:16px;padding:0 8px;font-size:17px;}
  #drawer-garasi .garage-empty-full{margin:120px 18px 0;min-height:220px;padding:18px;border-radius:18px;}
  #drawer-garasi .garage-empty-full img{width:72px;height:72px;}#drawer-garasi .garage-empty-full h3{font-size:22px;}#drawer-garasi .garage-empty-full p{font-size:14px;}
}
@supports not (height:100dvh){#drawer-garasi.garage-screen{height:100vh !important;}#drawer-garasi .garage-slider-wrap{height:calc(100vh - 160px);} }


/* ===== GARAGE MATCH GAME CANVAS SIZE FIX ===== */
/*
  Modal Garasi harus sama ukuran dengan game canvas.
  Jangan pakai full viewport murni, karena dashboard di-scale dari base 437px.
*/
#drawer-garasi.garage-screen{
  width:437px !important;
  max-width:none !important;
  border-radius:0 !important;
  overflow:hidden !important;
  transform-origin:top left !important;
}

@media (pointer:coarse), (max-width:900px){
  #drawer-garasi.garage-screen{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    right:auto !important;
    bottom:auto !important;
    width:437px !important;
    max-width:none !important;
    max-height:none !important;
    transform-origin:top left !important;
  }

  #drawer-garasi .garage-bg,
  #drawer-garasi .garage-overlay{
    inset:12px !important;
  }

  #drawer-garasi .garage-slider-wrap{
    height:auto !important;
  }

  #drawer-garasi .garage-slider{
    height:100% !important;
  }
}


/* ===== GARAGE CONTENT SMALLER FIX ===== */
/* Modal/background tetap. Isi Garasi saja yang dikecilkan agar muat dan enak di HP. */
#drawer-garasi .garage-head{
  padding:22px 18px 6px !important;
  height:78px !important;
}

#drawer-garasi .garage-head-centered h2{
  font-size:28px !important;
  line-height:1 !important;
}

#drawer-garasi .garage-head-centered p{
  margin-top:6px !important;
  font-size:12px !important;
  gap:7px !important;
}

#drawer-garasi .garage-head-centered p span{
  width:30px !important;
  height:2px !important;
}

#drawer-garasi .garage-close{
  right:16px !important;
  top:18px !important;
  width:46px !important;
  height:46px !important;
  font-size:30px !important;
}

#drawer-garasi .garage-slider-wrap{
  height:calc(100% - 86px) !important;
  padding:0 10px 10px !important;
}

#drawer-garasi .garage-slide{
  gap:7px !important;
  padding:0 !important;
}

#drawer-garasi .garage-stage{
  height:26% !important;
  min-height:160px !important;
  padding-bottom:4px !important;
}

#drawer-garasi .garage-vehicle{
  max-width:58% !important;
  max-height:86% !important;
}

#drawer-garasi .garage-stage::after{
  left:20% !important;
  right:20% !important;
  height:16px !important;
  border-width:2px !important;
}

#drawer-garasi .garage-stage-floor{
  left:19% !important;
  right:19% !important;
  bottom:5px !important;
  height:22px !important;
}

#drawer-garasi .garage-equipped{
  top:0 !important;
  font-size:10px !important;
  padding:6px 13px !important;
}

#drawer-garasi .garage-nav{
  width:38px !important;
  height:38px !important;
  font-size:30px !important;
  top:30% !important;
}

#drawer-garasi .garage-nav.prev{left:6px !important;}
#drawer-garasi .garage-nav.next{right:6px !important;}

#drawer-garasi .garage-namebar{
  padding:0 8px !important;
  gap:8px !important;
}

#drawer-garasi .garage-name-left{
  gap:7px !important;
}

#drawer-garasi .garage-name-left img{
  width:24px !important;
  height:24px !important;
}

#drawer-garasi .garage-name-left h3{
  font-size:15px !important;
}

#drawer-garasi .garage-tier{
  height:25px !important;
  padding:0 8px !important;
  border-radius:9px !important;
  font-size:10px !important;
}

#drawer-garasi .garage-stats-card{
  margin:0 4px !important;
  padding:11px 11px 8px !important;
  border-radius:16px !important;
  border-width:1px !important;
}

#drawer-garasi .garage-main-box{
  padding:0 7px 8px !important;
}

#drawer-garasi .garage-main-label{
  gap:6px !important;
  font-size:10px !important;
}

#drawer-garasi .garage-main-icon{
  font-size:16px !important;
}

#drawer-garasi .garage-main-value{
  margin:6px 0 8px !important;
  font-size:18px !important;
}

#drawer-garasi .garage-main-box em{
  height:8px !important;
}

#drawer-garasi .garage-mini-stats{
  margin-top:8px !important;
  padding-top:8px !important;
}

#drawer-garasi .garage-mini-item{
  padding:7px 5px !important;
}

#drawer-garasi .garage-mini-item span{
  font-size:8.5px !important;
}

#drawer-garasi .garage-mini-item strong{
  font-size:11px !important;
}

#drawer-garasi .garage-job-card.wide{
  margin:0 4px !important;
  padding:9px 11px !important;
  border-radius:14px !important;
  border-width:1px !important;
}

#drawer-garasi .garage-job-card span{
  font-size:10px !important;
  margin-bottom:4px !important;
}

#drawer-garasi .garage-job-card strong{
  font-size:14px !important;
  line-height:1.2 !important;
}

#drawer-garasi .garage-dots-block{
  gap:4px !important;
  padding:0 4px !important;
}

#drawer-garasi .garage-hint span{
  min-height:18px !important;
  padding:0 6px !important;
  font-size:9px !important;
}

#drawer-garasi .garage-dots{
  gap:8px !important;
}

#drawer-garasi .garage-dot{
  width:8px !important;
  height:8px !important;
}

#drawer-garasi .garage-actions.hero-actions{
  gap:8px !important;
  padding:0 4px 0 !important;
}

#drawer-garasi .garage-actions .btn{
  height:46px !important;
  border-radius:14px !important;
  padding:0 8px !important;
  font-size:13px !important;
}

/* HP pendek: lebih dipadatkan lagi sedikit */
@media (max-height:760px){
  #drawer-garasi .garage-stage{
    height:24% !important;
    min-height:145px !important;
  }

  #drawer-garasi .garage-vehicle{
    max-width:54% !important;
    max-height:84% !important;
  }

  #drawer-garasi .garage-stats-card{
    padding:9px 10px 7px !important;
  }

  #drawer-garasi .garage-mini-item{
    padding:6px 5px !important;
  }

  #drawer-garasi .garage-actions .btn{
    height:42px !important;
    font-size:12px !important;
  }
}


/* ===== GARAGE CONTENT PUSHED DOWN ===== */
/*
  Judul GARASI SAYA + subtitle tetap.
  Semua isi setelah header diturunkan ke bawah.
*/
#drawer-garasi .garage-slider-wrap{
  padding-top:58px !important;
  height:calc(100% - 86px) !important;
}

#drawer-garasi .garage-slide{
  gap:8px !important;
}

#drawer-garasi .garage-stage{
  height:22% !important;
  min-height:128px !important;
  padding-bottom:0 !important;
}

#drawer-garasi .garage-vehicle{
  max-width:54% !important;
  max-height:92% !important;
}

#drawer-garasi .garage-equipped{
  top:-8px !important;
}

#drawer-garasi .garage-nav{
  top:39% !important;
}

#drawer-garasi .garage-namebar{
  margin-top:2px !important;
}

#drawer-garasi .garage-stats-card{
  margin-top:2px !important;
}

#drawer-garasi .garage-job-card.wide{
  margin-top:2px !important;
}

#drawer-garasi .garage-dots-block{
  margin-top:4px !important;
}

#drawer-garasi .garage-actions.hero-actions{
  margin-top:auto !important;
  padding-bottom:10px !important;
}

/* HP pendek: tetap turun, tapi tidak sampai kepotong */
@media (max-height:760px){
  #drawer-garasi .garage-slider-wrap{
    padding-top:50px !important;
  }

  #drawer-garasi .garage-stage{
    height:20% !important;
    min-height:116px !important;
  }

  #drawer-garasi .garage-vehicle{
    max-width:50% !important;
    max-height:88% !important;
  }

  #drawer-garasi .garage-actions.hero-actions{
    padding-bottom:8px !important;
  }
}


/* ===== GARAGE CONTENT DOWN HARD FORCE ===== */
/*
  Paksa seluruh isi setelah header turun.
  Header GARASI SAYA + subtitle tidak ikut turun.
*/
#drawer-garasi .garage-slider-wrap{
  padding-top:0 !important;
  height:calc(100% - 86px) !important;
}

#drawer-garasi .garage-slider{
  height:100% !important;
}

#drawer-garasi .garage-slide{
  position:relative !important;
  gap:6px !important;
  padding-top:92px !important;
  padding-bottom:6px !important;
}

/* kendaraan + panggung turun */
#drawer-garasi .garage-stage{
  height:118px !important;
  min-height:118px !important;
  max-height:118px !important;
  padding:0 !important;
  margin:0 !important;
  align-items:center !important;
}

#drawer-garasi .garage-vehicle{
  max-width:45% !important;
  max-height:108px !important;
}

#drawer-garasi .garage-equipped{
  top:-18px !important;
}

/* arrow ikut turun sejajar area kendaraan */
#drawer-garasi .garage-nav{
  top:43% !important;
}

/* nama kendaraan turun rapat setelah kendaraan */
#drawer-garasi .garage-namebar{
  margin-top:2px !important;
}

/* stats turun mengikuti flow */
#drawer-garasi .garage-stats-card{
  margin-top:4px !important;
  padding:9px 10px 7px !important;
}

#drawer-garasi .garage-main-box{
  padding-bottom:7px !important;
}

#drawer-garasi .garage-main-value{
  margin:5px 0 6px !important;
}

#drawer-garasi .garage-mini-stats{
  margin-top:7px !important;
  padding-top:7px !important;
}

#drawer-garasi .garage-mini-item{
  padding:5px 5px !important;
}

/* bisa untuk ikut turun */
#drawer-garasi .garage-job-card.wide{
  margin-top:3px !important;
  padding:8px 10px !important;
}

/* hint dan dots ikut turun tapi tetap tidak ganggu tombol */
#drawer-garasi .garage-dots-block{
  margin-top:4px !important;
  gap:3px !important;
}

/* tombol tetap di bawah, jangan naik */
#drawer-garasi .garage-actions.hero-actions{
  margin-top:auto !important;
  padding-bottom:6px !important;
}

/* HP pendek tetap dipaksa turun, tapi dikompres sedikit */
@media (max-height:760px){
  #drawer-garasi .garage-slide{
    padding-top:78px !important;
    gap:5px !important;
  }

  #drawer-garasi .garage-stage{
    height:105px !important;
    min-height:105px !important;
    max-height:105px !important;
  }

  #drawer-garasi .garage-vehicle{
    max-width:42% !important;
    max-height:96px !important;
  }

  #drawer-garasi .garage-stats-card{
    padding:8px 9px 6px !important;
  }

  #drawer-garasi .garage-mini-item{
    padding:4px 5px !important;
  }

  #drawer-garasi .garage-job-card.wide{
    padding:7px 10px !important;
  }

  #drawer-garasi .garage-actions .btn{
    height:40px !important;
  }
}


/* ===== GARAGE BOTTOM STACK REBUILD ===== */
/* Rebuild: semua card ada di bawah, kendaraan di area atas, tanpa tambalan posisi kecil-kecil. */
#drawer-garasi .garage-slider-wrap.garage-bottom-rebuild{padding:0 10px 10px !important;height:calc(100% - 86px) !important;}
#drawer-garasi .garage-slider-wrap.garage-bottom-rebuild .garage-slider{height:100% !important;}
#drawer-garasi .garage-slide-rebuilt{height:100%;display:flex;flex-direction:column;gap:8px;padding:0 !important;}
#drawer-garasi .garage-stage-rebuilt{flex:0 0 24%;min-height:150px;display:flex;align-items:flex-end;justify-content:center;padding:0 0 4px;position:relative;}
#drawer-garasi .garage-bottom-stack{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:0 4px 4px;min-height:0;}
#drawer-garasi .garage-nav{top:34% !important;}
#drawer-garasi .garage-vehicle{max-width:48% !important;max-height:130px !important;}
#drawer-garasi .garage-stage-floor{left:18% !important;right:18% !important;bottom:6px !important;height:20px !important;}
#drawer-garasi .garage-stage::after{left:18% !important;right:18% !important;bottom:2px !important;height:16px !important;border-width:2px !important;}
#drawer-garasi .garage-equipped{top:0 !important;}
#drawer-garasi .garage-namebar{margin:0 !important;padding:0 6px !important;}
#drawer-garasi .garage-name-left h3{font-size:15px !important;}
#drawer-garasi .garage-tier{height:24px !important;padding:0 8px !important;font-size:10px !important;}
#drawer-garasi .garage-stats-card{margin:0 !important;padding:9px 10px 8px !important;border-radius:16px !important;}
#drawer-garasi .garage-main-value{font-size:18px !important;margin:5px 0 7px !important;}
#drawer-garasi .garage-main-box em{height:8px !important;}
#drawer-garasi .garage-mini-item{padding:5px 5px !important;}
#drawer-garasi .garage-mini-item span{font-size:8.5px !important;}
#drawer-garasi .garage-mini-item strong{font-size:11px !important;}
#drawer-garasi .garage-job-card.wide{margin:0 !important;padding:9px 10px !important;border-radius:14px !important;}
#drawer-garasi .garage-job-card span{font-size:10px !important;}
#drawer-garasi .garage-job-card strong{font-size:14px !important;line-height:1.2 !important;}
#drawer-garasi .garage-dots-block{margin:0 !important;gap:3px !important;padding:0 !important;}
#drawer-garasi .garage-hint span{font-size:9px !important;min-height:18px !important;padding:0 6px !important;}
#drawer-garasi .garage-dot{width:8px !important;height:8px !important;}
#drawer-garasi .garage-actions.hero-actions{margin:0 !important;padding:0 !important;display:grid;grid-template-columns:1fr .82fr;gap:8px;}
#drawer-garasi .garage-actions .btn{height:44px !important;border-radius:14px !important;padding:0 8px !important;font-size:13px !important;}

@media (max-height:760px){
  #drawer-garasi .garage-stage-rebuilt{flex-basis:22%;min-height:132px;}
  #drawer-garasi .garage-vehicle{max-height:112px !important;max-width:45% !important;}
  #drawer-garasi .garage-bottom-stack{gap:6px;}
  #drawer-garasi .garage-stats-card{padding:8px 9px 7px !important;}
  #drawer-garasi .garage-main-value{font-size:17px !important;}
  #drawer-garasi .garage-mini-item{padding:4px 4px !important;}
  #drawer-garasi .garage-actions .btn{height:41px !important;font-size:12px !important;}
}


/* ===== GARAGE ALL CONTENT DOWN NO PLATFORM ===== */
/*
  Semua isi Garasi turun, termasuk kendaraan.
  Bantalan/neon CSS kendaraan dihapus karena background sudah punya area lantai/platform.
*/
#drawer-garasi .garage-slider-wrap.garage-bottom-rebuild{
  padding:72px 10px 10px !important;
  height:calc(100% - 86px) !important;
}

#drawer-garasi .garage-slide-rebuilt{
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  padding:0 !important;
}

#drawer-garasi .garage-stage-rebuilt{
  flex:0 0 26% !important;
  min-height:150px !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  padding:0 0 2px !important;
  margin:0 !important;
  position:relative !important;
}

/* HAPUS bantalan/neon/platform CSS kendaraan */
#drawer-garasi .garage-stage-floor,
#drawer-garasi .garage-stage::after,
#drawer-garasi .garage-light{
  display:none !important;
  content:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

#drawer-garasi .garage-vehicle{
  max-width:52% !important;
  max-height:145px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 22px 22px rgba(0,0,0,.55)) !important;
}

#drawer-garasi .garage-equipped{
  top:0 !important;
}

/* tombol panah ikut turun sesuai kendaraan */
#drawer-garasi .garage-nav{
  top:43% !important;
}

/* card tetap di bawah, tidak naik ke atas */
#drawer-garasi .garage-bottom-stack{
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  gap:8px !important;
  padding:0 4px 4px !important;
  min-height:0 !important;
}

#drawer-garasi .garage-namebar,
#drawer-garasi .garage-stats-card,
#drawer-garasi .garage-job-card.wide,
#drawer-garasi .garage-dots-block,
#drawer-garasi .garage-actions.hero-actions{
  transform:none !important;
}

/* HP pendek tetap turun, tapi dikompres supaya tidak kepotong */
@media (max-height:760px){
  #drawer-garasi .garage-slider-wrap.garage-bottom-rebuild{
    padding-top:58px !important;
  }

  #drawer-garasi .garage-stage-rebuilt{
    flex-basis:23% !important;
    min-height:125px !important;
  }

  #drawer-garasi .garage-vehicle{
    max-width:46% !important;
    max-height:118px !important;
  }

  #drawer-garasi .garage-bottom-stack{
    gap:6px !important;
  }
}


/* ===== GARAGE VEHICLE LOWER CLOSER TO CARDS ===== */
/* Kendaraan diturunkan lebih bawah supaya lebih dekat ke card-card bawah. */
#drawer-garasi .garage-slider-wrap.garage-bottom-rebuild{
  padding:60px 10px 10px !important;
}
#drawer-garasi .garage-slide-rebuilt{
  gap:6px !important;
}
#drawer-garasi .garage-stage-rebuilt{
  flex:0 0 34% !important;
  min-height:190px !important;
  max-height:none !important;
  align-items:flex-end !important;
  justify-content:center !important;
  padding:0 0 0 !important;
}
#drawer-garasi .garage-vehicle{
  max-width:54% !important;
  max-height:172px !important;
}
#drawer-garasi .garage-nav{top:46% !important;}
#drawer-garasi .garage-bottom-stack{
  gap:6px !important;
  padding:0 4px 2px !important;
}
#drawer-garasi .garage-namebar{margin-top:-2px !important;}
#drawer-garasi .garage-stats-card{padding:8px 10px 7px !important;}
#drawer-garasi .garage-job-card.wide{padding:8px 10px !important;}
#drawer-garasi .garage-dots-block{gap:2px !important;}
#drawer-garasi .garage-actions.hero-actions{padding:0 !important;}

@media (max-height:760px){
  #drawer-garasi .garage-slider-wrap.garage-bottom-rebuild{padding-top:50px !important;}
  #drawer-garasi .garage-stage-rebuilt{
    flex-basis:31% !important;
    min-height:155px !important;
  }
  #drawer-garasi .garage-vehicle{
    max-width:50% !important;
    max-height:138px !important;
  }
  #drawer-garasi .garage-nav{top:44% !important;}
}

/* ===== MEMBERSHIP FULLSCREEN DB PLANS ===== */
#drawer-membership.membership-screen{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:0 !important;
  background:#06111f !important;
  border:0 !important;
  box-shadow:none !important;
  transform:translateY(18px) scale(.985) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:transform .28s cubic-bezier(.18,.9,.22,1),opacity .22s ease !important;
  z-index:2147482000 !important;
}
#drawer-membership.membership-screen.open{
  transform:translateY(0) scale(1) !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
#drawer-membership .membership-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(180deg,rgba(1,8,18,.10),rgba(1,8,18,.92)),
    url('assets/shop/shop_city_buildings.webp') center center/cover no-repeat;
}
#drawer-membership .membership-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(circle at 50% 18%,rgba(150,255,70,.18),transparent 28%),
    linear-gradient(180deg,rgba(1,8,18,.18),rgba(1,8,18,.86));
  pointer-events:none;
}
#drawer-membership .membership-head{
  position:relative;
  z-index:3;
  height:104px;
  padding:24px 20px 8px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  text-align:center;
}
#drawer-membership .membership-head h2{
  margin:0;
  font-size:40px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.03em;
  color:#f5fbff;
  text-shadow:0 4px 0 rgba(0,0,0,.28),0 0 18px rgba(145,255,70,.45);
}
#drawer-membership .membership-head p{
  margin:10px 0 0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  color:#f1f6ff;
  font-size:14px;
  font-weight:800;
}
#drawer-membership .membership-head p span{
  display:block;
  width:34px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#aaff43,transparent);
}
#drawer-membership .membership-close{
  position:absolute;
  right:18px;
  top:20px;
  width:54px !important;
  height:54px !important;
  border-radius:50% !important;
  border:2px solid rgba(151,255,63,.38) !important;
  background:rgba(4,14,30,.72) !important;
  color:#aaff43 !important;
  font-size:36px !important;
  line-height:1 !important;
}
#drawer-membership .membership-content{
  position:relative;
  z-index:3;
  height:calc(100dvh - 104px);
  overflow:auto;
  padding:0 14px 22px;
}
#drawer-membership .membership-status-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(5,42,24,.88),rgba(3,15,29,.92));
  border:1px solid rgba(142,255,65,.28);
  box-shadow:0 12px 24px rgba(0,0,0,.28);
  margin-bottom:12px;
}
#drawer-membership .membership-status-card small{
  display:block;
  color:#aaff43;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.12em;
}
#drawer-membership .membership-status-card strong{
  display:block;
  margin:4px 0 2px;
  color:#fff;
  font-size:22px;
  font-weight:1000;
}
#drawer-membership .membership-status-card p{
  margin:0;
  color:#dcecff;
  font-size:12px;
  line-height:1.3;
  font-weight:700;
}
#drawer-membership .membership-status-card>b{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:linear-gradient(180deg,#9cff44,#50ba16);
  color:#fff;
  font-size:28px;
  font-weight:1000;
}
#drawer-membership .membership-benefits{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  margin-bottom:12px;
}
#drawer-membership .membership-benefits div{
  min-height:72px;
  padding:10px 8px;
  border-radius:18px;
  background:rgba(3,15,29,.84);
  border:1px solid rgba(255,255,255,.08);
  text-align:center;
}
#drawer-membership .membership-benefits b{
  display:block;
  color:#aaff43;
  font-size:20px;
  line-height:1;
  font-weight:1000;
}
#drawer-membership .membership-benefits span{
  display:block;
  margin-top:5px;
  color:#eef6ff;
  font-size:10px;
  line-height:1.2;
  font-weight:800;
}
#drawer-membership .membership-plan-list{
  display:grid;
  gap:12px;
  padding-bottom:18px;
}
#drawer-membership .membership-plan-card{
  padding:14px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(6,22,16,.94),rgba(3,11,23,.96));
  border:1px solid rgba(145,255,70,.28);
  box-shadow:0 12px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
#drawer-membership .membership-plan-card.has-discount{
  border-color:rgba(255,210,64,.48);
}
#drawer-membership .membership-plan-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:10px;
}
#drawer-membership .membership-plan-top small{
  color:#aaff43;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.10em;
  text-transform:uppercase;
}
#drawer-membership .membership-plan-top h3{
  margin:4px 0 3px;
  color:#fff;
  font-size:24px;
  line-height:1;
  font-weight:1000;
}
#drawer-membership .membership-plan-top p{
  margin:0;
  color:#dcecff;
  font-size:12px;
  font-weight:800;
}
#drawer-membership .membership-discount-badge{
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  color:#1d2600;
  background:linear-gradient(180deg,#ffe27b,#aaff43);
  font-size:10px;
  font-weight:1000;
  text-transform:uppercase;
}
#drawer-membership .membership-price-row{
  display:flex;
  align-items:flex-end;
  gap:10px;
  margin-bottom:10px;
}
#drawer-membership .membership-price-row strong{
  color:#aaff43;
  font-size:20px;
  line-height:1;
  font-weight:1000;
}
#drawer-membership .membership-price-row del{
  color:#a7b3bf;
  font-size:12px;
  font-weight:800;
}
#drawer-membership .membership-plan-card ul{
  margin:0 0 12px;
  padding:0;
  display:grid;
  gap:6px;
}
#drawer-membership .membership-plan-card li{
  list-style:none;
  color:#edf6ff;
  font-size:12px;
  line-height:1.24;
  font-weight:800;
}
#drawer-membership .membership-plan-card li::before{
  content:'✓';
  color:#aaff43;
  margin-right:7px;
  font-weight:1000;
}
#drawer-membership .membership-buy-btn{
  width:100%;
  height:48px;
  border:0;
  border-radius:16px;
  background:linear-gradient(180deg,#9cff44,#50ba16);
  color:#fff;
  font-size:15px;
  font-weight:1000;
  text-transform:uppercase;
  box-shadow:inset 0 1px rgba(255,255,255,.35),0 10px 18px rgba(0,0,0,.28);
}
#drawer-membership .membership-empty{
  text-align:center;
  padding:26px 18px;
  border-radius:22px;
  background:rgba(3,15,29,.84);
  border:1px solid rgba(145,255,70,.24);
}
#drawer-membership .membership-empty h3{
  margin:0 0 8px;
  color:#aaff43;
  font-size:22px;
}
#drawer-membership .membership-empty p{
  margin:0;
  color:#eaf4ff;
  font-size:13px;
}
#drawer-membership .membership-confirm,
#drawer-membership .membership-success{
  position:absolute;
  inset:0;
  z-index:20;
  background:rgba(0,0,0,.64);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
#drawer-membership .membership-confirm.show,
#drawer-membership .membership-success.show{
  display:flex;
  animation:membershipFade .18s ease both;
}
@keyframes membershipFade{from{opacity:0}to{opacity:1}}
#drawer-membership .membership-confirm-box,
#drawer-membership .membership-success-box{
  width:100%;
  max-width:360px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(6,22,16,.98),rgba(3,11,23,.98));
  border:1px solid rgba(145,255,70,.28);
  box-shadow:0 24px 60px rgba(0,0,0,.52);
  padding:20px;
  text-align:center;
}
#drawer-membership .membership-confirm-box h3,
#drawer-membership .membership-success-box h3{
  margin:0 0 10px;
  color:#aaff43;
  font-size:22px;
  font-weight:1000;
  text-transform:uppercase;
}
#drawer-membership .membership-confirm-box p,
#drawer-membership .membership-success-box p{
  margin:0;
  color:#eef6ff;
  font-size:14px;
  font-weight:800;
  line-height:1.35;
}
#drawer-membership .membership-confirm-box p span{
  display:block;
  margin-top:6px;
  color:#aaff43;
  font-size:13px;
}
#drawer-membership .membership-confirm-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:18px;
}
#drawer-membership .membership-confirm-actions button{
  height:44px;
  border-radius:14px;
  font-size:13px;
  font-weight:1000;
  text-transform:uppercase;
}
#drawer-membership .membership-confirm-cancel{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:#fff;
}
#drawer-membership .membership-confirm-ok{
  border:0;
  background:linear-gradient(180deg,#9cff44,#50ba16);
  color:#fff;
}
#drawer-membership .membership-success-box b{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 10px;
  width:58px;
  height:58px;
  border-radius:50%;
  background:linear-gradient(180deg,#9cff44,#50ba16);
  color:#fff;
  font-size:38px;
}
@supports not (height:100dvh){
  #drawer-membership.membership-screen{height:100vh !important;}
  #drawer-membership .membership-content{height:calc(100vh - 104px);}
}


/* ===== MEMBERSHIP SLIM CARDS BENEFIT GLOBAL ===== */
/* Benefit yang sama tidak diulang di setiap card agar card membership lebih ramping. */
#drawer-membership .membership-plan-card{
  padding:14px 14px 13px !important;
}

#drawer-membership .membership-plan-card ul{
  display:none !important;
}

#drawer-membership .membership-plan-top{
  margin-bottom:8px !important;
}

#drawer-membership .membership-price-row{
  margin-bottom:12px !important;
}

#drawer-membership .membership-buy-btn{
  margin-top:0 !important;
}

#drawer-membership .membership-global-info{
  margin-top:12px;
  padding:14px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(3,15,29,.86),rgba(2,10,22,.92));
  border:1px solid rgba(145,255,70,.22);
  box-shadow:0 10px 22px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
}

#drawer-membership .membership-global-info h3{
  margin:0 0 10px;
  color:#aaff43;
  font-size:18px;
  line-height:1;
  font-weight:1000;
  text-transform:uppercase;
}

#drawer-membership .membership-benefit-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

#drawer-membership .membership-benefit-list div{
  min-height:58px;
  padding:9px 10px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}

#drawer-membership .membership-benefit-list b{
  display:block;
  color:#aaff43;
  font-size:20px;
  line-height:1;
  font-weight:1000;
}

#drawer-membership .membership-benefit-list span{
  display:block;
  margin-top:5px;
  color:#edf6ff;
  font-size:11px;
  line-height:1.2;
  font-weight:800;
}

@media (max-width:390px){
  #drawer-membership .membership-benefit-list div{
    min-height:52px;
    padding:8px;
  }

  #drawer-membership .membership-benefit-list b{
    font-size:18px;
  }

  #drawer-membership .membership-benefit-list span{
    font-size:10px;
  }
}


/* ===== MEMBERSHIP PORTRAIT MODAL LIKE SHOP GARAGE ===== */
/*
  Samakan Membership dengan gaya modal portrait game:
  - Desktop tidak full layar lebar.
  - Ukuran mengikuti frame game 437x757.
  - Mobile tetap fullscreen portrait.
  - List member scroll di dalam modal, bukan melebar.
*/
#drawer-membership.membership-screen{
  width:437px !important;
  height:757px !important;
  max-width:437px !important;
  max-height:757px !important;
  left:50% !important;
  top:0 !important;
  right:auto !important;
  bottom:auto !important;
  transform:translateX(-50%) translateY(18px) scale(.985) !important;
  border-radius:0 !important;
  overflow:hidden !important;
}

#drawer-membership.membership-screen.open{
  transform:translateX(-50%) translateY(0) scale(1) !important;
}

#drawer-membership .membership-bg,
#drawer-membership .membership-overlay{
  inset:0 !important;
  width:437px !important;
  height:757px !important;
}

#drawer-membership .membership-head{
  height:96px !important;
  padding:22px 18px 8px !important;
}

#drawer-membership .membership-head h2{
  font-size:34px !important;
}

#drawer-membership .membership-head p{
  margin-top:8px !important;
  font-size:12px !important;
}

#drawer-membership .membership-close{
  right:14px !important;
  top:16px !important;
  width:46px !important;
  height:46px !important;
  font-size:30px !important;
}

#drawer-membership .membership-content{
  height:661px !important;
  max-height:661px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:0 14px 18px !important;
  scrollbar-width:none;
}

#drawer-membership .membership-content::-webkit-scrollbar{
  display:none;
}

#drawer-membership .membership-status-card{
  margin-bottom:10px !important;
  padding:12px !important;
  border-radius:20px !important;
}

#drawer-membership .membership-status-card strong{
  font-size:20px !important;
}

#drawer-membership .membership-benefits{
  gap:7px !important;
  margin-bottom:10px !important;
}

#drawer-membership .membership-benefits div{
  min-height:62px !important;
  padding:8px 6px !important;
  border-radius:16px !important;
}

#drawer-membership .membership-benefits b{
  font-size:18px !important;
}

#drawer-membership .membership-benefits span{
  font-size:9px !important;
}

#drawer-membership .membership-plan-list{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  padding-bottom:10px !important;
}

#drawer-membership .membership-plan-card{
  padding:12px !important;
  border-radius:20px !important;
  min-height:auto !important;
}

#drawer-membership .membership-plan-top{
  margin-bottom:8px !important;
}

#drawer-membership .membership-plan-top h3{
  font-size:21px !important;
}

#drawer-membership .membership-plan-top p{
  font-size:11px !important;
}

#drawer-membership .membership-discount-badge{
  padding:6px 8px !important;
  font-size:9px !important;
}

#drawer-membership .membership-price-row{
  margin-bottom:10px !important;
}

#drawer-membership .membership-price-row strong{
  font-size:17px !important;
}

#drawer-membership .membership-buy-btn{
  height:43px !important;
  border-radius:14px !important;
  font-size:13px !important;
}

#drawer-membership .membership-global-info{
  margin-top:10px !important;
  padding:12px !important;
  border-radius:20px !important;
}

#drawer-membership .membership-global-info h3{
  font-size:15px !important;
  margin-bottom:9px !important;
}

#drawer-membership .membership-benefit-list{
  gap:7px !important;
}

#drawer-membership .membership-benefit-list div{
  min-height:50px !important;
  padding:8px !important;
  border-radius:14px !important;
}

#drawer-membership .membership-benefit-list b{
  font-size:17px !important;
}

#drawer-membership .membership-benefit-list span{
  font-size:9.5px !important;
}

/* Mobile asli: kalau game/canvas sudah diskalakan, modal tetap terasa penuh HP portrait */
@media (pointer:coarse), (max-width:900px){
  #drawer-membership.membership-screen{
    left:0 !important;
    top:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
    transform:translateY(18px) scale(.985) !important;
  }

  #drawer-membership.membership-screen.open{
    transform:translateY(0) scale(1) !important;
  }

  #drawer-membership .membership-bg,
  #drawer-membership .membership-overlay{
    width:100vw !important;
    height:100dvh !important;
  }

  #drawer-membership .membership-content{
    height:calc(100dvh - 96px) !important;
    max-height:calc(100dvh - 96px) !important;
  }
}

/* PC: paksa tetap portrait seperti game, tidak melebar */
@media (min-width:901px){
  #drawer-membership.membership-screen{
    position:fixed !important;
    width:437px !important;
    height:757px !important;
    max-width:437px !important;
    max-height:757px !important;
    left:50% !important;
    top:0 !important;
  }

  #drawer-membership.membership-screen.open{
    transform:translateX(-50%) translateY(0) scale(1) !important;
  }
}


/* ===== MEMBERSHIP MATCH GAME CANVAS MOBILE FIX ===== */
/* Samakan perilaku Membership dengan modal game lain di HP: fullscreen pas semua HP, desktop tetap portrait. */
#drawer-membership.membership-screen{
  overflow:hidden !important;
  transform-origin: top left !important;
}
#drawer-membership .membership-content{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-width:none;
}
#drawer-membership .membership-content::-webkit-scrollbar{ display:none; }
@media (pointer:coarse), (max-width:900px){
  #drawer-membership.membership-screen{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    width:437px !important;
    max-width:none !important;
    max-height:none !important;
    border-radius:0 !important;
    transform-origin:top left !important;
  }
  #drawer-membership .membership-bg,
  #drawer-membership .membership-overlay{
    inset:0 !important;
    width:100% !important;
    height:100% !important;
  }
  #drawer-membership .membership-head{
    height:96px !important;
    padding:22px 18px 8px !important;
  }
  #drawer-membership .membership-content{
    padding:0 14px 18px !important;
  }
}
@media (min-width:901px){
  #drawer-membership.membership-screen{
    width:437px !important;
    height:757px !important;
    max-width:437px !important;
    max-height:757px !important;
    left:50% !important;
    top:0 !important;
  }
  #drawer-membership .membership-bg,
  #drawer-membership .membership-overlay{
    width:437px !important;
    height:757px !important;
  }
}


/* ===== MARKETPLACE MENU REPLACE WITHDRAW ===== */
#drawer-marketplace .marketplace-tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:12px;
}

#drawer-marketplace .marketplace-tabs button{
  height:38px;
  border:1px solid rgba(145,255,70,.24);
  border-radius:14px;
  background:rgba(255,255,255,.07);
  color:#edf6ff;
  font-size:12px;
  font-weight:1000;
}

#drawer-marketplace .marketplace-tabs button.is-active{
  background:linear-gradient(180deg,#9cff44,#50ba16);
  color:#fff;
}

#drawer-marketplace .marketplace-empty{
  text-align:center;
}

#drawer-marketplace .marketplace-empty img{
  width:82px;
  height:82px;
  object-fit:contain;
  margin:4px auto 10px;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));
}

#drawer-marketplace .marketplace-empty h3{
  margin:0 0 8px;
  color:#aaff43;
  font-size:21px;
  font-weight:1000;
}

#drawer-marketplace .marketplace-empty p{
  margin:0;
  color:#dcecff;
  font-size:13px;
  line-height:1.35;
  font-weight:800;
}

#drawer-marketplace .marketplace-fee-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}

#drawer-marketplace .marketplace-fee-info div{
  padding:12px 10px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

#drawer-marketplace .marketplace-fee-info b{
  display:block;
  color:#aaff43;
  font-size:22px;
  line-height:1;
  font-weight:1000;
}

#drawer-marketplace .marketplace-fee-info span{
  display:block;
  margin-top:5px;
  color:#edf6ff;
  font-size:11px;
  font-weight:900;
}


/* ===== JOB MODAL ONLY FULLSCREEN FIX ===== */
/*
  Fix khusus modal menu Kerja saja.
  Tidak ubah dashboard, tidak ubah Garasi, tidak ubah Shop.
  Modal Kerja dibuat fullscreen portrait seperti modal lain.
*/
#drawer-kerja.job-screen{
  position:fixed !important;
  inset:0 !important;
  left:0 !important;
  top:0 !important;
  width:100vw !important;
  height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  padding:0 14px 20px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  border-radius:0 !important;
  border:0 !important;
  background:#06111f !important;
  box-shadow:none !important;
  transform:translateY(18px) scale(.985) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:transform .26s cubic-bezier(.18,.9,.22,1),opacity .22s ease !important;
  z-index:2147481500 !important;
  scrollbar-width:none;
}

#drawer-kerja.job-screen::-webkit-scrollbar{
  display:none;
}

#drawer-kerja.job-screen.open{
  transform:translateY(0) scale(1) !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* Background fullscreen seperti modal Shop */
#drawer-kerja.job-screen::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  background:
    linear-gradient(180deg,rgba(2,8,20,.18),rgba(2,8,20,.86)),
    url('../backgrounds/bg_antario_city_night.webp') center center/cover no-repeat;
  pointer-events:none;
}

#drawer-kerja.job-screen::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:1;
  background:
    radial-gradient(circle at 50% 18%,rgba(136,255,66,.16),transparent 28%),
    linear-gradient(to bottom,rgba(0,0,0,.06),rgba(0,0,0,.46));
  pointer-events:none;
}

#drawer-kerja.job-screen > *{
  position:relative;
  z-index:3;
}

/* Header Kerja */
#drawer-kerja.job-screen .drawer-head{
  position:sticky !important;
  top:0 !important;
  z-index:10 !important;
  min-height:84px !important;
  margin:0 -14px 14px !important;
  padding:28px 18px 10px !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  background:linear-gradient(180deg,rgba(3,12,25,.94),rgba(3,12,25,.42)) !important;
  border:0 !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

#drawer-kerja.job-screen .drawer-head h2{
  margin:0 !important;
  color:#f7fbff !important;
  font-size:40px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.03em !important;
  text-shadow:0 4px 0 rgba(0,0,0,.34),0 12px 24px rgba(0,0,0,.45) !important;
}

#drawer-kerja.job-screen .drawer-close{
  width:52px !important;
  height:52px !important;
  border-radius:50% !important;
  border:2px solid rgba(145,255,66,.36) !important;
  background:rgba(3,12,25,.72) !important;
  color:#aaff43 !important;
  font-size:36px !important;
  line-height:1 !important;
  box-shadow:0 10px 24px rgba(0,0,0,.34) !important;
}

/* Card pekerjaan biar besar dan kebaca */
#drawer-kerja.job-screen .panel-card{
  margin-bottom:14px !important;
  padding:14px !important;
  border-radius:22px !important;
  background:linear-gradient(180deg,rgba(5,42,24,.88),rgba(3,15,29,.92)) !important;
  border:1px solid rgba(145,255,70,.28) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#drawer-kerja.job-screen .panel-card h2{
  font-size:22px !important;
  line-height:1.05 !important;
  margin:0 0 12px !important;
  color:#aaff43 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
}

#drawer-kerja.job-screen .job-list{
  display:grid !important;
  gap:12px !important;
}

#drawer-kerja.job-screen .job-card{
  min-height:96px !important;
  display:grid !important;
  grid-template-columns:72px 1fr 82px !important;
  gap:12px !important;
  align-items:center !important;
  padding:12px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,rgba(4,28,19,.86),rgba(3,12,24,.90)) !important;
  border:1px solid rgba(145,255,70,.22) !important;
}

#drawer-kerja.job-screen .job-card > img{
  width:68px !important;
  height:68px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.35)) !important;
}

#drawer-kerja.job-screen .job-card h3{
  margin:0 0 5px !important;
  color:#fff !important;
  font-size:17px !important;
  line-height:1.1 !important;
  font-weight:1000 !important;
  text-shadow:0 2px 5px rgba(0,0,0,.65) !important;
}

#drawer-kerja.job-screen .job-card p{
  margin:0 0 4px !important;
  color:#edf6ff !important;
  font-size:12px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
}

#drawer-kerja.job-screen .job-card small{
  display:block !important;
  color:#aaff43 !important;
  font-size:11px !important;
  line-height:1.25 !important;
  font-weight:900 !important;
}

#drawer-kerja.job-screen .btn,
#drawer-kerja.job-screen .job-card .btn{
  min-height:42px !important;
  border-radius:14px !important;
  padding:0 12px !important;
  font-size:13px !important;
  font-weight:1000 !important;
}

#drawer-kerja.job-screen .job-row.big{
  display:grid !important;
  grid-template-columns:72px 1fr auto !important;
  gap:12px !important;
  align-items:center !important;
}

#drawer-kerja.job-screen .job-row.big img{
  width:68px !important;
  height:68px !important;
  object-fit:contain !important;
}

#drawer-kerja.job-screen .timer{
  min-width:58px !important;
  min-height:40px !important;
  border-radius:14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(0,0,0,.28) !important;
  color:#aaff43 !important;
  font-size:14px !important;
  font-weight:1000 !important;
}

/* HP kecil: tetap fullscreen, card tidak melebar keluar */
@media (max-width:480px){
  #drawer-kerja.job-screen .drawer-head{
    min-height:76px !important;
    padding:24px 16px 8px !important;
  }

  #drawer-kerja.job-screen .drawer-head h2{
    font-size:34px !important;
  }

  #drawer-kerja.job-screen .drawer-close{
    width:46px !important;
    height:46px !important;
    font-size:30px !important;
  }

  #drawer-kerja.job-screen .job-card{
    grid-template-columns:62px 1fr 72px !important;
    min-height:86px !important;
    gap:10px !important;
    padding:10px !important;
  }

  #drawer-kerja.job-screen .job-card > img{
    width:58px !important;
    height:58px !important;
  }

  #drawer-kerja.job-screen .job-card h3{
    font-size:15px !important;
  }

  #drawer-kerja.job-screen .job-card p{
    font-size:11px !important;
  }

  #drawer-kerja.job-screen .job-card small{
    font-size:10px !important;
  }

  #drawer-kerja.job-screen .btn,
  #drawer-kerja.job-screen .job-card .btn{
    min-height:38px !important;
    font-size:12px !important;
    padding:0 9px !important;
  }
}

@supports not (height:100dvh){
  #drawer-kerja.job-screen{
    height:100vh !important;
  }
}


/* ===== JOB MODAL PC PORTRAIT LOCK FINAL ===== */
/*
  FINAL khusus menu Kerja:
  - PC/tablet non-touch: wajib portrait game 437x757, center.
  - HP/touch: fullscreen 100vw/100dvh seperti Shop.
  - Ini override paling akhir agar tidak ketimpa rule sebelumnya.
*/

/* Base: HP/touch tetap fullscreen */
#drawer-kerja.job-screen{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:auto !important;
  bottom:auto !important;
  width:100vw !important;
  height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  border-radius:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  transform-origin:top left !important;
}

/* Open/close HP */
#drawer-kerja.job-screen{
  transform:translateY(18px) scale(.985) !important;
}
#drawer-kerja.job-screen.open{
  transform:translateY(0) scale(1) !important;
}

/* PC: jangan full layar. Ikuti ukuran game portrait. */
@media (min-width:901px) and (pointer:fine){
  #drawer-kerja.job-screen{
    position:fixed !important;
    top:0 !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    width:437px !important;
    height:757px !important;
    max-width:437px !important;
    max-height:757px !important;
    min-width:437px !important;
    min-height:757px !important;
    margin:0 !important;
    padding:0 14px 20px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    transform-origin:top left !important;
    transform:translateX(-50%) translateY(18px) scale(.985) !important;
    border-radius:0 !important;
  }

  #drawer-kerja.job-screen.open{
    transform:translateX(-50%) translateY(0) scale(1) !important;
  }

  #drawer-kerja.job-screen::before,
  #drawer-kerja.job-screen::after{
    position:absolute !important;
    width:437px !important;
    height:757px !important;
    inset:0 !important;
  }

  #drawer-kerja.job-screen .drawer-head{
    margin:0 -14px 14px !important;
  }
}

/* Devtools mobile di PC biasanya pointer coarse/width kecil: tetap fullscreen seperti HP */
@media (max-width:900px), (pointer:coarse){
  #drawer-kerja.job-screen{
    left:0 !important;
    top:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
    min-width:0 !important;
    min-height:0 !important;
    transform:translateY(18px) scale(.985) !important;
  }

  #drawer-kerja.job-screen.open{
    transform:translateY(0) scale(1) !important;
  }

  #drawer-kerja.job-screen::before,
  #drawer-kerja.job-screen::after{
    position:fixed !important;
    width:100vw !important;
    height:100dvh !important;
    inset:0 !important;
  }
}


/* ===== RIGHT SIDE MENU RAISE 10 PERCENT ===== */
/* Naikkan semua menu kanan sekitar setengah kotak / ±10%. */
.clean-side-right{
  top:94px !important;
}


/* ===== PROFILE FULLSCREEN TABS MODAL ===== */
#drawer-profile.profile-screen{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:0 !important;
  border:0 !important;
  background:#06111f !important;
  transform:translateY(18px) scale(.985) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:transform .26s cubic-bezier(.18,.9,.22,1),opacity .22s ease !important;
  z-index:2147481800 !important;
}
#drawer-profile.profile-screen.open{
  transform:translateY(0) scale(1) !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
#drawer-profile .profile-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(180deg,rgba(2,8,20,.10),rgba(2,8,20,.88)),
    url('../backgrounds/bg_antario_city_night.webp') center center/cover no-repeat;
}
#drawer-profile .profile-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 18%,rgba(136,255,66,.16),transparent 28%),
    linear-gradient(to bottom,rgba(0,0,0,.06),rgba(0,0,0,.46));
}
#drawer-profile .profile-head{
  position:relative;
  z-index:3;
  height:104px;
  padding:28px 20px 8px;
  text-align:center;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
#drawer-profile .profile-head h2{
  margin:0;
  color:#f7fbff;
  font-size:44px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.03em;
  text-shadow:0 4px 0 rgba(0,0,0,.34),0 12px 24px rgba(0,0,0,.45);
}
#drawer-profile .profile-head p{
  margin:9px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:#f4f8ff;
  font-size:13px;
  font-weight:800;
}
#drawer-profile .profile-head p span{
  display:block;
  width:34px;
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,rgba(145,255,66,0),rgba(145,255,66,.96),rgba(145,255,66,0));
}
#drawer-profile .profile-close{
  position:absolute;
  right:18px;
  top:24px;
  width:52px;
  height:52px;
  border-radius:50%;
  border:2px solid rgba(145,255,66,.36);
  background:rgba(3,12,25,.72);
  color:#aaff43;
  font-size:36px;
  line-height:1;
  box-shadow:0 10px 24px rgba(0,0,0,.34);
}
#drawer-profile .profile-content{
  position:relative;
  z-index:3;
  height:calc(100dvh - 104px);
  overflow-y:auto;
  overflow-x:hidden;
  padding:0 14px 22px;
  scrollbar-width:none;
}
#drawer-profile .profile-content::-webkit-scrollbar{display:none}
#drawer-profile .profile-tabs{
  position:sticky;
  top:0;
  z-index:6;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  padding:0 0 12px;
}
#drawer-profile .profile-tabs button{
  height:42px;
  border:1px solid rgba(145,255,66,.26);
  border-radius:15px;
  background:rgba(3,12,25,.72);
  color:#edf6ff;
  font-size:12px;
  font-weight:1000;
}
#drawer-profile .profile-tabs button.active{
  background:linear-gradient(180deg,#9cff44,#50ba16);
  color:#fff;
}
#drawer-profile .profile-panel{display:none;}
#drawer-profile .profile-panel.active{
  display:block;
  animation:profilePanelIn .18s ease both;
}
@keyframes profilePanelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
#drawer-profile .profile-card{
  margin-bottom:12px;
  padding:14px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(5,42,24,.88),rgba(3,15,29,.92));
  border:1px solid rgba(145,255,70,.28);
  box-shadow:0 10px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
#drawer-profile .profile-main-card{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:13px;
  align-items:center;
}
#drawer-profile .profile-avatar-big{
  width:72px;
  height:72px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#9cff44,#50ba16);
  box-shadow:0 10px 18px rgba(0,0,0,.28);
}
#drawer-profile .profile-avatar-big img{
  width:62px;
  height:62px;
  border-radius:50%;
  object-fit:cover;
}
#drawer-profile .profile-main-copy small,
#drawer-profile .profile-card small{
  color:#aaff43;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.12em;
}
#drawer-profile .profile-main-copy h3{
  margin:4px 0 2px;
  color:#fff;
  font-size:24px;
  line-height:1;
  font-weight:1000;
}
#drawer-profile .profile-main-copy p,
#drawer-profile .profile-hint,
#drawer-profile .profile-line{
  margin:0;
  color:#dcecff;
  font-size:12px;
  line-height:1.35;
  font-weight:800;
}
#drawer-profile .profile-info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:12px;
}
#drawer-profile .profile-info-grid div{
  padding:12px 10px;
  border-radius:18px;
  background:rgba(3,15,29,.84);
  border:1px solid rgba(255,255,255,.08);
}
#drawer-profile .profile-info-grid span,
#drawer-profile .locked-payout span{
  display:block;
  color:#edf6ff;
  font-size:10px;
  font-weight:900;
}
#drawer-profile .profile-info-grid b,
#drawer-profile .locked-payout b{
  display:block;
  margin-top:5px;
  color:#aaff43;
  font-size:17px;
  line-height:1;
  font-weight:1000;
}
#drawer-profile .profile-card h3{
  margin:0 0 10px;
  color:#aaff43;
  font-size:19px;
  line-height:1;
  font-weight:1000;
  text-transform:uppercase;
}
#drawer-profile .copy-row{
  display:grid;
  grid-template-columns:1fr 82px;
  gap:8px;
  margin-bottom:8px;
}
#drawer-profile .copy-row input,
#drawer-profile .profile-payout-form input,
#drawer-profile .profile-withdraw-form input,
#drawer-profile .profile-withdraw-form select{
  width:100%;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.28);
  color:#fff;
  padding:0 12px;
  font-size:13px;
  font-weight:900;
}
#drawer-profile .copy-row button,
#drawer-profile .profile-payout-form button,
#drawer-profile .profile-withdraw-form button{
  height:44px;
  border:0;
  border-radius:14px;
  background:linear-gradient(180deg,#9cff44,#50ba16);
  color:#fff;
  font-size:13px;
  font-weight:1000;
  text-transform:uppercase;
}
#drawer-profile .profile-payout-form label{
  display:block;
  margin:10px 0 6px;
  color:#edf6ff;
  font-size:11px;
  font-weight:1000;
  text-transform:uppercase;
}
#drawer-profile .profile-payout-form button,
#drawer-profile .profile-withdraw-form button{
  width:100%;
  margin-top:10px;
}
#drawer-profile .profile-withdraw-form{
  display:grid;
  gap:8px;
  margin-top:10px;
}
#drawer-profile .profile-withdraw-form button:disabled{
  opacity:.55;
  filter:grayscale(.4);
}
#drawer-profile .locked-payout{
  display:grid;
  gap:8px;
}
#drawer-profile .locked-payout div{
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

#drawer-profile .profile-logout-form{
  display:block;
  width:100%;
  margin:4px 0 10px;
}
#drawer-profile .profile-logout-btn{
  appearance:none;
  -webkit-appearance:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:46px;
  padding:0 16px;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,#ff5858 0%,#d92d2d 52%,#981717 100%);
  color:#fff;
  font-family:inherit;
  font-size:13px;
  line-height:1;
  font-weight:1000;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:0 12px 24px rgba(120,0,0,.32), inset 0 1px 0 rgba(255,255,255,.26);
}
#drawer-profile .profile-logout-icon{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  font-size:14px;
  line-height:1;
}
#drawer-profile .profile-logout-btn:active{
  transform:translateY(1px);
  filter:brightness(.94);
}

#drawer-profile .profile-hint.locked{color:#aaff43;margin-top:10px;}
#drawer-profile .profile-hint.danger{color:#ffb1b1;margin-top:10px;}
#drawer-profile .profile-toast{
  position:absolute;
  left:50%;
  bottom:24px;
  z-index:20;
  transform:translateX(-50%) translateY(20px);
  opacity:0;
  pointer-events:none;
  padding:10px 14px;
  border-radius:999px;
  color:#fff;
  background:rgba(3,12,25,.86);
  border:1px solid rgba(145,255,70,.28);
  font-size:12px;
  font-weight:1000;
  transition:.18s ease;
}
#drawer-profile .profile-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* PC tetap portrait seperti game */
@media (min-width:901px) and (pointer:fine){
  #drawer-profile.profile-screen{
    width:437px !important;
    height:757px !important;
    max-width:437px !important;
    max-height:757px !important;
    left:50% !important;
    top:0 !important;
    transform:translateX(-50%) translateY(18px) scale(.985) !important;
  }
  #drawer-profile.profile-screen.open{
    transform:translateX(-50%) translateY(0) scale(1) !important;
  }
  #drawer-profile .profile-content{
    height:653px !important;
  }
}

/* HP fullscreen */
@media (max-width:900px), (pointer:coarse){
  #drawer-profile.profile-screen{
    width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
    left:0 !important;
    top:0 !important;
    transform:translateY(18px) scale(.985) !important;
  }
  #drawer-profile.profile-screen.open{
    transform:translateY(0) scale(1) !important;
  }
  #drawer-profile .profile-content{
    height:calc(100dvh - 104px) !important;
  }
}


/* ===== PROFILE SIMPLIFY WITHDRAW REMOVE REFERRAL TAB ===== */
/* Profil hanya pakai 2 tab: Profil dan Withdraw. Referral sudah ada di tab Profil. */
#drawer-profile .profile-tabs{
  grid-template-columns:1fr 1fr !important;
}

#drawer-profile [data-profile-panel="referral"]{
  display:none !important;
}

#drawer-profile .profile-withdraw-form{
  grid-template-columns:1fr !important;
}

#drawer-profile .profile-withdraw-form input[type="hidden"]{
  display:none !important;
}


/* ===== PROFILE WITHDRAW NO INPUT ===== */
/* Withdraw tidak pakai input nominal. Tombol aktif hanya jika saldo database >= Rp50.000. */
#drawer-profile .profile-withdraw-form{
  display:block !important;
}

#drawer-profile .profile-withdraw-form button{
  width:100% !important;
  height:48px !important;
  font-size:14px !important;
}

#drawer-profile .profile-withdraw-form button:disabled{
  opacity:.52 !important;
  filter:grayscale(.45) !important;
}


/* ===== PROFILE WD BUTTON HARD DISABLE ===== */
#drawer-profile .profile-withdraw-form .profile-wd-disabled,
#drawer-profile .profile-withdraw-form button:disabled{
  opacity:.45 !important;
  filter:grayscale(.75) !important;
  cursor:not-allowed !important;
  pointer-events:none !important;
  background:linear-gradient(180deg,#56616b,#2b3440) !important;
  color:#cbd4dd !important;
  box-shadow:none !important;
}

#drawer-profile .profile-withdraw-form .profile-wd-active{
  opacity:1 !important;
  filter:none !important;
  cursor:pointer !important;
}


/* ===== PROFILE TABS SIZE FIX ONLY ===== */
/*
  Perbaikan hanya ukuran Profil/Withdraw.
  Tab tetap ada. Struktur tidak dirombak.
*/
#drawer-profile .profile-content{
  padding:0 14px 16px !important;
}

#drawer-profile .profile-tabs{
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  padding-bottom:14px !important;
}

#drawer-profile .profile-tabs button{
  height:50px !important;
  border-radius:17px !important;
  font-size:15px !important;
}

#drawer-profile .profile-card{
  padding:16px !important;
  border-radius:23px !important;
  margin-bottom:14px !important;
}

#drawer-profile .profile-main-card{
  grid-template-columns:82px 1fr !important;
  gap:15px !important;
  min-height:96px !important;
}

#drawer-profile .profile-avatar-big{
  width:82px !important;
  height:82px !important;
}

#drawer-profile .profile-avatar-big img{
  width:72px !important;
  height:72px !important;
}

#drawer-profile .profile-main-copy small{
  font-size:12px !important;
}

#drawer-profile .profile-main-copy h3{
  font-size:28px !important;
}

#drawer-profile .profile-main-copy p{
  font-size:15px !important;
}

#drawer-profile .profile-info-grid{
  gap:10px !important;
  margin-bottom:14px !important;
}

#drawer-profile .profile-info-grid div{
  min-height:76px !important;
  padding:14px 12px !important;
  border-radius:20px !important;
}

#drawer-profile .profile-info-grid span{
  font-size:12px !important;
}

#drawer-profile .profile-info-grid b{
  font-size:20px !important;
  margin-top:7px !important;
}

#drawer-profile .profile-card h3{
  font-size:22px !important;
  margin-bottom:12px !important;
}

#drawer-profile .copy-row{
  grid-template-columns:1fr 92px !important;
  gap:10px !important;
}

#drawer-profile .copy-row input,
#drawer-profile .copy-row button,
#drawer-profile .profile-payout-form input,
#drawer-profile .profile-withdraw-form input,
#drawer-profile .profile-withdraw-form select{
  height:52px !important;
  border-radius:16px !important;
  font-size:15px !important;
}

#drawer-profile .copy-row button,
#drawer-profile .profile-payout-form button,
#drawer-profile .profile-withdraw-form button{
  height:52px !important;
  border-radius:16px !important;
  font-size:15px !important;
}

#drawer-profile .profile-hint,
#drawer-profile .profile-line{
  font-size:14px !important;
  line-height:1.35 !important;
}

#drawer-profile .profile-payout-form label{
  font-size:13px !important;
  margin:12px 0 7px !important;
}

#drawer-profile .locked-payout{
  gap:10px !important;
}

#drawer-profile .locked-payout div{
  padding:14px !important;
  border-radius:18px !important;
}

#drawer-profile .locked-payout span{
  font-size:12px !important;
}

#drawer-profile .locked-payout b{
  font-size:17px !important;
  margin-top:6px !important;
}

/* Withdraw tab: dibuat lebih penuh dan kebaca */
#drawer-profile [data-profile-panel="withdraw"] .profile-card{
  padding:18px !important;
}

#drawer-profile [data-profile-panel="withdraw"] .profile-line{
  font-size:16px !important;
  margin-bottom:8px !important;
}

#drawer-profile [data-profile-panel="withdraw"] .profile-line b{
  color:#aaff43 !important;
  font-size:18px !important;
}

#drawer-profile .profile-withdraw-form button{
  width:100% !important;
  min-height:58px !important;
  font-size:17px !important;
  margin-top:12px !important;
}

/* HP kecil: jangan jadi terlalu kecil, tetap nyaman dibaca */
@media (max-width:390px), (max-height:760px){
  #drawer-profile .profile-head{
    height:96px !important;
    padding-top:24px !important;
  }

  #drawer-profile .profile-head h2{
    font-size:36px !important;
  }

  #drawer-profile .profile-head p{
    font-size:12px !important;
  }

  #drawer-profile .profile-content{
    height:calc(100dvh - 96px) !important;
    padding:0 12px 14px !important;
  }

  #drawer-profile .profile-tabs button{
    height:46px !important;
    font-size:14px !important;
  }

  #drawer-profile .profile-card{
    padding:13px !important;
    border-radius:20px !important;
    margin-bottom:11px !important;
  }

  #drawer-profile .profile-main-card{
    grid-template-columns:68px 1fr !important;
    min-height:82px !important;
  }

  #drawer-profile .profile-avatar-big{
    width:68px !important;
    height:68px !important;
  }

  #drawer-profile .profile-avatar-big img{
    width:60px !important;
    height:60px !important;
  }

  #drawer-profile .profile-main-copy h3{
    font-size:23px !important;
  }

  #drawer-profile .profile-main-copy p{
    font-size:13px !important;
  }

  #drawer-profile .profile-info-grid div{
    min-height:64px !important;
    padding:11px 9px !important;
  }

  #drawer-profile .profile-info-grid span{
    font-size:10px !important;
  }

  #drawer-profile .profile-info-grid b{
    font-size:15px !important;
  }

  #drawer-profile .profile-card h3{
    font-size:18px !important;
  }

  #drawer-profile .copy-row{
    grid-template-columns:1fr 78px !important;
  }

  #drawer-profile .copy-row input,
  #drawer-profile .copy-row button,
  #drawer-profile .profile-payout-form input,
  #drawer-profile .profile-payout-form button,
  #drawer-profile .profile-withdraw-form button{
    height:46px !important;
    font-size:13px !important;
  }

  #drawer-profile .profile-hint,
  #drawer-profile .profile-line{
    font-size:12px !important;
  }
}


/* ===== PROFILE REAL HP BIGGER TEXT FIX ===== */
/*
  Khusus HP asli/touch device:
  PC mode HP sering terlihat besar, tapi HP asli mengecil.
  Jadi rule ini membesarkan isi Profil/Withdraw di perangkat touch.
*/
@media (pointer:coarse){
  #drawer-profile .profile-head{
    height:112px !important;
    padding:28px 18px 10px !important;
  }

  #drawer-profile .profile-head h2{
    font-size:48px !important;
    line-height:1 !important;
  }

  #drawer-profile .profile-head p{
    font-size:15px !important;
    margin-top:10px !important;
  }

  #drawer-profile .profile-close{
    width:58px !important;
    height:58px !important;
    font-size:40px !important;
    right:14px !important;
    top:22px !important;
  }

  #drawer-profile .profile-content{
    height:calc(100dvh - 112px) !important;
    padding:0 14px 18px !important;
  }

  #drawer-profile .profile-tabs{
    gap:10px !important;
    padding-bottom:16px !important;
  }

  #drawer-profile .profile-tabs button{
    height:58px !important;
    border-radius:18px !important;
    font-size:17px !important;
  }

  #drawer-profile .profile-card{
    padding:18px !important;
    border-radius:24px !important;
    margin-bottom:16px !important;
  }

  #drawer-profile .profile-main-card{
    grid-template-columns:92px 1fr !important;
    gap:16px !important;
    min-height:108px !important;
  }

  #drawer-profile .profile-avatar-big{
    width:92px !important;
    height:92px !important;
  }

  #drawer-profile .profile-avatar-big img{
    width:82px !important;
    height:82px !important;
  }

  #drawer-profile .profile-main-copy small{
    font-size:13px !important;
  }

  #drawer-profile .profile-main-copy h3{
    font-size:31px !important;
    line-height:1.03 !important;
  }

  #drawer-profile .profile-main-copy p{
    font-size:17px !important;
  }

  #drawer-profile .profile-info-grid{
    gap:12px !important;
    margin-bottom:16px !important;
  }

  #drawer-profile .profile-info-grid div{
    min-height:88px !important;
    padding:16px 13px !important;
    border-radius:22px !important;
  }

  #drawer-profile .profile-info-grid span{
    font-size:14px !important;
  }

  #drawer-profile .profile-info-grid b{
    font-size:24px !important;
    margin-top:8px !important;
  }

  #drawer-profile .profile-card h3{
    font-size:25px !important;
    margin-bottom:14px !important;
  }

  #drawer-profile .copy-row{
    grid-template-columns:1fr 104px !important;
    gap:10px !important;
  }

  #drawer-profile .copy-row input,
  #drawer-profile .copy-row button{
    height:58px !important;
    border-radius:18px !important;
    font-size:17px !important;
  }

  #drawer-profile .copy-row input{
    padding:0 16px !important;
  }

  #drawer-profile .profile-hint,
  #drawer-profile .profile-line{
    font-size:16px !important;
    line-height:1.4 !important;
  }

  #drawer-profile .locked-payout div{
    padding:16px !important;
    border-radius:20px !important;
  }

  #drawer-profile .locked-payout span{
    font-size:14px !important;
  }

  #drawer-profile .locked-payout b{
    font-size:20px !important;
  }

  #drawer-profile .profile-payout-form label{
    font-size:15px !important;
  }

  #drawer-profile .profile-payout-form input,
  #drawer-profile .profile-payout-form button{
    height:58px !important;
    border-radius:18px !important;
    font-size:17px !important;
  }

  #drawer-profile [data-profile-panel="withdraw"] .profile-line{
    font-size:18px !important;
    margin-bottom:10px !important;
  }

  #drawer-profile [data-profile-panel="withdraw"] .profile-line b{
    font-size:22px !important;
  }

  #drawer-profile .profile-withdraw-form button{
    min-height:64px !important;
    border-radius:20px !important;
    font-size:19px !important;
  }
}

/* HP pendek tetap lebih besar dari sebelumnya, tapi sedikit dipadatkan agar tidak hancur */
@media (pointer:coarse) and (max-height:760px){
  #drawer-profile .profile-head{
    height:104px !important;
    padding-top:24px !important;
  }

  #drawer-profile .profile-head h2{
    font-size:42px !important;
  }

  #drawer-profile .profile-content{
    height:calc(100dvh - 104px) !important;
  }

  #drawer-profile .profile-tabs button{
    height:52px !important;
    font-size:16px !important;
  }

  #drawer-profile .profile-card{
    padding:15px !important;
    margin-bottom:13px !important;
  }

  #drawer-profile .profile-main-card{
    grid-template-columns:80px 1fr !important;
    min-height:96px !important;
  }

  #drawer-profile .profile-avatar-big{
    width:80px !important;
    height:80px !important;
  }

  #drawer-profile .profile-avatar-big img{
    width:72px !important;
    height:72px !important;
  }

  #drawer-profile .profile-main-copy h3{
    font-size:27px !important;
  }

  #drawer-profile .profile-main-copy p{
    font-size:15px !important;
  }

  #drawer-profile .profile-info-grid div{
    min-height:76px !important;
    padding:13px 11px !important;
  }

  #drawer-profile .profile-info-grid span{
    font-size:12px !important;
  }

  #drawer-profile .profile-info-grid b{
    font-size:19px !important;
  }

  #drawer-profile .profile-card h3{
    font-size:21px !important;
  }

  #drawer-profile .copy-row input,
  #drawer-profile .copy-row button,
  #drawer-profile .profile-payout-form input,
  #drawer-profile .profile-payout-form button{
    height:52px !important;
    font-size:15px !important;
  }

  #drawer-profile .profile-hint,
  #drawer-profile .profile-line{
    font-size:14px !important;
  }

  #drawer-profile .profile-withdraw-form button{
    min-height:56px !important;
    font-size:17px !important;
  }
}


/* ===== PROFILE REAL HP 3X BIGGER ===== */
/*
  Besarkan isi Profil/Withdraw lebih agresif untuk HP asli.
  Fokus: text, card, tombol, input, angka saldo agar kebaca.
*/
@media (pointer:coarse){
  #drawer-profile .profile-head{
    height:128px !important;
    padding:30px 18px 10px !important;
  }

  #drawer-profile .profile-head h2{
    font-size:58px !important;
    line-height:.95 !important;
  }

  #drawer-profile .profile-head p{
    font-size:18px !important;
    margin-top:12px !important;
  }

  #drawer-profile .profile-head p span{
    width:44px !important;
    height:4px !important;
  }

  #drawer-profile .profile-close{
    width:66px !important;
    height:66px !important;
    font-size:46px !important;
    right:12px !important;
    top:24px !important;
  }

  #drawer-profile .profile-content{
    height:calc(100dvh - 128px) !important;
    padding:0 16px 20px !important;
  }

  #drawer-profile .profile-tabs{
    gap:12px !important;
    padding-bottom:18px !important;
  }

  #drawer-profile .profile-tabs button{
    height:68px !important;
    border-radius:22px !important;
    font-size:21px !important;
  }

  #drawer-profile .profile-card{
    padding:22px !important;
    border-radius:28px !important;
    margin-bottom:20px !important;
  }

  #drawer-profile .profile-main-card{
    grid-template-columns:112px 1fr !important;
    gap:20px !important;
    min-height:132px !important;
  }

  #drawer-profile .profile-avatar-big{
    width:112px !important;
    height:112px !important;
  }

  #drawer-profile .profile-avatar-big img{
    width:100px !important;
    height:100px !important;
  }

  #drawer-profile .profile-main-copy small{
    font-size:16px !important;
  }

  #drawer-profile .profile-main-copy h3{
    font-size:40px !important;
    line-height:1 !important;
  }

  #drawer-profile .profile-main-copy p{
    font-size:21px !important;
  }

  #drawer-profile .profile-info-grid{
    gap:14px !important;
    margin-bottom:20px !important;
  }

  #drawer-profile .profile-info-grid div{
    min-height:112px !important;
    padding:20px 16px !important;
    border-radius:26px !important;
  }

  #drawer-profile .profile-info-grid span{
    font-size:17px !important;
  }

  #drawer-profile .profile-info-grid b{
    font-size:31px !important;
    margin-top:10px !important;
  }

  #drawer-profile .profile-card h3{
    font-size:32px !important;
    margin-bottom:18px !important;
  }

  #drawer-profile .copy-row{
    grid-template-columns:1fr 128px !important;
    gap:12px !important;
  }

  #drawer-profile .copy-row input,
  #drawer-profile .copy-row button{
    height:72px !important;
    border-radius:22px !important;
    font-size:22px !important;
  }

  #drawer-profile .copy-row input{
    padding:0 20px !important;
  }

  #drawer-profile .profile-hint,
  #drawer-profile .profile-line{
    font-size:20px !important;
    line-height:1.45 !important;
  }

  #drawer-profile .locked-payout{
    gap:14px !important;
  }

  #drawer-profile .locked-payout div{
    padding:20px !important;
    border-radius:24px !important;
  }

  #drawer-profile .locked-payout span{
    font-size:17px !important;
  }

  #drawer-profile .locked-payout b{
    font-size:26px !important;
  }

  #drawer-profile .profile-payout-form label{
    font-size:19px !important;
  }

  #drawer-profile .profile-payout-form input,
  #drawer-profile .profile-payout-form button{
    height:72px !important;
    border-radius:22px !important;
    font-size:22px !important;
  }

  #drawer-profile [data-profile-panel="withdraw"] .profile-line{
    font-size:22px !important;
    margin-bottom:14px !important;
  }

  #drawer-profile [data-profile-panel="withdraw"] .profile-line b{
    font-size:28px !important;
  }

  #drawer-profile .profile-withdraw-form button{
    min-height:78px !important;
    border-radius:24px !important;
    font-size:24px !important;
  }
}

/* HP pendek: tetap besar, tapi sedikit dikecilkan supaya tidak hancur total */
@media (pointer:coarse) and (max-height:760px){
  #drawer-profile .profile-head{
    height:112px !important;
    padding-top:25px !important;
  }

  #drawer-profile .profile-head h2{
    font-size:48px !important;
  }

  #drawer-profile .profile-head p{
    font-size:15px !important;
  }

  #drawer-profile .profile-content{
    height:calc(100dvh - 112px) !important;
    padding:0 14px 18px !important;
  }

  #drawer-profile .profile-tabs button{
    height:58px !important;
    font-size:18px !important;
  }

  #drawer-profile .profile-card{
    padding:18px !important;
    margin-bottom:15px !important;
    border-radius:24px !important;
  }

  #drawer-profile .profile-main-card{
    grid-template-columns:92px 1fr !important;
    min-height:112px !important;
  }

  #drawer-profile .profile-avatar-big{
    width:92px !important;
    height:92px !important;
  }

  #drawer-profile .profile-avatar-big img{
    width:82px !important;
    height:82px !important;
  }

  #drawer-profile .profile-main-copy h3{
    font-size:32px !important;
  }

  #drawer-profile .profile-main-copy p{
    font-size:17px !important;
  }

  #drawer-profile .profile-info-grid div{
    min-height:92px !important;
    padding:16px 13px !important;
  }

  #drawer-profile .profile-info-grid span{
    font-size:14px !important;
  }

  #drawer-profile .profile-info-grid b{
    font-size:23px !important;
  }

  #drawer-profile .profile-card h3{
    font-size:26px !important;
  }

  #drawer-profile .copy-row{
    grid-template-columns:1fr 108px !important;
  }

  #drawer-profile .copy-row input,
  #drawer-profile .copy-row button,
  #drawer-profile .profile-payout-form input,
  #drawer-profile .profile-payout-form button{
    height:62px !important;
    font-size:18px !important;
  }

  #drawer-profile .profile-hint,
  #drawer-profile .profile-line{
    font-size:16px !important;
  }

  #drawer-profile .profile-withdraw-form button{
    min-height:66px !important;
    font-size:20px !important;
  }
}


/* ===== PROFILE REAL HP 2X MORE FROM 3X ===== */
/*
  Khusus HP asli/touch device.
  Perbesar lagi dari versi 3x sebelumnya.
  Tab tetap ada, struktur tidak dirombak.
*/
@media (pointer:coarse){
  #drawer-profile .profile-head{
    height:150px !important;
    padding:34px 18px 12px !important;
  }

  #drawer-profile .profile-head h2{
    font-size:72px !important;
    line-height:.92 !important;
  }

  #drawer-profile .profile-head p{
    font-size:22px !important;
    margin-top:14px !important;
  }

  #drawer-profile .profile-head p span{
    width:54px !important;
    height:5px !important;
  }

  #drawer-profile .profile-close{
    width:78px !important;
    height:78px !important;
    font-size:56px !important;
    right:10px !important;
    top:26px !important;
  }

  #drawer-profile .profile-content{
    height:calc(100dvh - 150px) !important;
    padding:0 18px 22px !important;
  }

  #drawer-profile .profile-tabs{
    gap:14px !important;
    padding-bottom:22px !important;
  }

  #drawer-profile .profile-tabs button{
    height:82px !important;
    border-radius:26px !important;
    font-size:27px !important;
  }

  #drawer-profile .profile-card{
    padding:28px !important;
    border-radius:34px !important;
    margin-bottom:26px !important;
  }

  #drawer-profile .profile-main-card{
    grid-template-columns:140px 1fr !important;
    gap:26px !important;
    min-height:166px !important;
  }

  #drawer-profile .profile-avatar-big{
    width:140px !important;
    height:140px !important;
  }

  #drawer-profile .profile-avatar-big img{
    width:126px !important;
    height:126px !important;
  }

  #drawer-profile .profile-main-copy small{
    font-size:20px !important;
    letter-spacing:.10em !important;
  }

  #drawer-profile .profile-main-copy h3{
    font-size:52px !important;
    line-height:.98 !important;
  }

  #drawer-profile .profile-main-copy p{
    font-size:27px !important;
    line-height:1.2 !important;
  }

  #drawer-profile .profile-info-grid{
    gap:18px !important;
    margin-bottom:26px !important;
  }

  #drawer-profile .profile-info-grid div{
    min-height:142px !important;
    padding:26px 20px !important;
    border-radius:32px !important;
  }

  #drawer-profile .profile-info-grid span{
    font-size:22px !important;
  }

  #drawer-profile .profile-info-grid b{
    font-size:40px !important;
    margin-top:12px !important;
  }

  #drawer-profile .profile-card h3{
    font-size:42px !important;
    margin-bottom:22px !important;
  }

  #drawer-profile .copy-row{
    grid-template-columns:1fr 156px !important;
    gap:16px !important;
  }

  #drawer-profile .copy-row input,
  #drawer-profile .copy-row button{
    height:90px !important;
    border-radius:28px !important;
    font-size:29px !important;
  }

  #drawer-profile .copy-row input{
    padding:0 26px !important;
  }

  #drawer-profile .profile-hint,
  #drawer-profile .profile-line{
    font-size:26px !important;
    line-height:1.45 !important;
  }

  #drawer-profile .locked-payout{
    gap:18px !important;
  }

  #drawer-profile .locked-payout div{
    padding:26px !important;
    border-radius:30px !important;
  }

  #drawer-profile .locked-payout span{
    font-size:22px !important;
  }

  #drawer-profile .locked-payout b{
    font-size:34px !important;
  }

  #drawer-profile .profile-payout-form label{
    font-size:24px !important;
    margin:16px 0 10px !important;
  }

  #drawer-profile .profile-payout-form input,
  #drawer-profile .profile-payout-form button{
    height:90px !important;
    border-radius:28px !important;
    font-size:29px !important;
  }

  #drawer-profile [data-profile-panel="withdraw"] .profile-line{
    font-size:28px !important;
    margin-bottom:18px !important;
  }

  #drawer-profile [data-profile-panel="withdraw"] .profile-line b{
    font-size:36px !important;
  }

  #drawer-profile .profile-withdraw-form button{
    min-height:96px !important;
    border-radius:30px !important;
    font-size:31px !important;
  }
}

/* HP pendek tetap dibesarkan, tapi lebih aman dari jebol parah */
@media (pointer:coarse) and (max-height:760px){
  #drawer-profile .profile-head{
    height:128px !important;
    padding-top:28px !important;
  }

  #drawer-profile .profile-head h2{
    font-size:58px !important;
  }

  #drawer-profile .profile-head p{
    font-size:18px !important;
  }

  #drawer-profile .profile-content{
    height:calc(100dvh - 128px) !important;
    padding:0 16px 20px !important;
  }

  #drawer-profile .profile-tabs button{
    height:70px !important;
    font-size:23px !important;
  }

  #drawer-profile .profile-card{
    padding:22px !important;
    margin-bottom:20px !important;
    border-radius:28px !important;
  }

  #drawer-profile .profile-main-card{
    grid-template-columns:112px 1fr !important;
    min-height:136px !important;
    gap:20px !important;
  }

  #drawer-profile .profile-avatar-big{
    width:112px !important;
    height:112px !important;
  }

  #drawer-profile .profile-avatar-big img{
    width:100px !important;
    height:100px !important;
  }

  #drawer-profile .profile-main-copy small{
    font-size:17px !important;
  }

  #drawer-profile .profile-main-copy h3{
    font-size:40px !important;
  }

  #drawer-profile .profile-main-copy p{
    font-size:22px !important;
  }

  #drawer-profile .profile-info-grid{
    gap:14px !important;
    margin-bottom:20px !important;
  }

  #drawer-profile .profile-info-grid div{
    min-height:112px !important;
    padding:20px 16px !important;
  }

  #drawer-profile .profile-info-grid span{
    font-size:17px !important;
  }

  #drawer-profile .profile-info-grid b{
    font-size:30px !important;
  }

  #drawer-profile .profile-card h3{
    font-size:34px !important;
  }

  #drawer-profile .copy-row{
    grid-template-columns:1fr 132px !important;
  }

  #drawer-profile .copy-row input,
  #drawer-profile .copy-row button,
  #drawer-profile .profile-payout-form input,
  #drawer-profile .profile-payout-form button{
    height:74px !important;
    font-size:23px !important;
    border-radius:24px !important;
  }

  #drawer-profile .profile-hint,
  #drawer-profile .profile-line{
    font-size:20px !important;
  }

  #drawer-profile .profile-withdraw-form button{
    min-height:78px !important;
    font-size:25px !important;
  }
}


/* ===== FREE MODAL REBUILD TOTAL ===== */
/* Modal FREE dibuat ulang total dan dipisahkan dari ukuran drawer lama. */
.clean-side-right .free-menu-button img,
.clean-side-right [data-open="reward-chest"] img{
  width:40px !important;
  height:40px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.55)) !important;
}

#drawer-reward-chest.free-screen,
html body #drawer-reward-chest.free-screen{
  position:fixed !important;
  inset:0 !important;
  left:0 !important;
  top:0 !important;
  right:auto !important;
  bottom:auto !important;
  width:100vw !important;
  height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background:#06111f !important;
  box-shadow:none !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateY(14px) !important;
  transition:transform .20s ease, opacity .18s ease !important;
  z-index:2147481800 !important;
}

#drawer-reward-chest.free-screen.open,
html body #drawer-reward-chest.free-screen.open{
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
}

#drawer-reward-chest .free-screen-bg{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:
    radial-gradient(circle at 50% 16%, rgba(145,255,70,.16), transparent 30%),
    linear-gradient(180deg, #071425 0%, #06111f 52%, #020813 100%) !important;
}

#drawer-reward-chest .free-screen-head{
  position:relative !important;
  z-index:3 !important;
  height:112px !important;
  padding:28px 20px 8px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
  text-align:center !important;
}

#drawer-reward-chest .free-screen-head h2{
  margin:0 !important;
  color:#f7fbff !important;
  font-size:56px !important;
  line-height:.95 !important;
  font-weight:1000 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  text-shadow:0 4px 0 rgba(0,0,0,.34),0 10px 20px rgba(0,0,0,.40) !important;
}

#drawer-reward-chest .free-screen-head p{
  margin:8px 0 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  color:#f4f8ff !important;
  font-size:16px !important;
  font-weight:900 !important;
}

#drawer-reward-chest .free-screen-head p span{
  display:block !important;
  width:38px !important;
  height:4px !important;
  border-radius:99px !important;
  background:linear-gradient(90deg,rgba(145,255,66,0),rgba(145,255,66,.96),rgba(145,255,66,0)) !important;
}

#drawer-reward-chest .free-screen-close{
  position:absolute !important;
  right:16px !important;
  top:24px !important;
  width:56px !important;
  height:56px !important;
  border-radius:50% !important;
  border:2px solid rgba(145,255,66,.36) !important;
  background:rgba(3,12,25,.72) !important;
  color:#aaff43 !important;
  font-size:38px !important;
  line-height:1 !important;
  box-shadow:0 8px 18px rgba(0,0,0,.28) !important;
}

#drawer-reward-chest .free-screen-body{
  position:relative !important;
  z-index:3 !important;
  height:calc(100dvh - 112px) !important;
  padding:0 18px 18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

#drawer-reward-chest .free-reward-card{
  width:100% !important;
  max-width:380px !important;
  padding:20px 18px !important;
  border-radius:30px !important;
  background:rgba(4,28,22,.92) !important;
  border:1px solid rgba(145,255,70,.32) !important;
  box-shadow:0 8px 16px rgba(0,0,0,.25) !important;
  text-align:center !important;
}

#drawer-reward-chest .free-reward-icon{
  width:170px !important;
  height:170px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.42)) !important;
}

#drawer-reward-chest .free-status-card{
  width:100% !important;
  margin:12px auto 14px !important;
  padding:16px 18px !important;
  border-radius:26px !important;
  background:rgba(3,15,29,.98) !important;
  border:2px solid rgba(145,255,70,.62) !important;
  box-shadow:0 8px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

#drawer-reward-chest .free-status-card small{
  display:block !important;
  color:#edf6ff !important;
  font-size:15px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
}

#drawer-reward-chest .free-status-card strong{
  display:block !important;
  margin-top:10px !important;
  color:#aaff43 !important;
  font-size:60px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.06em !important;
  text-shadow:0 0 16px rgba(145,255,70,.42) !important;
}

#drawer-reward-chest .free-coin-amount{
  color:#aaff43 !important;
  font-size:32px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  margin-bottom:14px !important;
}

#drawer-reward-chest .free-watch-btn{
  width:100% !important;
  height:64px !important;
  border:0 !important;
  border-radius:22px !important;
  background:linear-gradient(180deg,#9cff44,#50ba16) !important;
  color:#fff !important;
  font-size:20px !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
}

#drawer-reward-chest .free-watch-btn.is-cooldown,
#drawer-reward-chest .free-watch-btn:disabled{
  background:linear-gradient(180deg,#56616b,#2b3440) !important;
  color:#cbd4dd !important;
  opacity:.78 !important;
}

#drawer-reward-chest .free-note{
  margin:12px 0 0 !important;
  color:#dcecff !important;
  font-size:14px !important;
  line-height:1.35 !important;
  font-weight:800 !important;
}

#drawer-reward-chest .free-toast{
  position:absolute !important;
  left:50% !important;
  bottom:24px !important;
  z-index:20 !important;
  transform:translateX(-50%) translateY(20px) !important;
  opacity:0 !important;
  pointer-events:none !important;
  padding:10px 14px !important;
  border-radius:999px !important;
  color:#fff !important;
  background:rgba(3,12,25,.86) !important;
  border:1px solid rgba(145,255,70,.28) !important;
  font-size:12px !important;
  font-weight:1000 !important;
  transition:.18s ease !important;
}

#drawer-reward-chest .free-toast.show{
  opacity:1 !important;
  transform:translateX(-50%) translateY(0) !important;
}

/* PC: ukuran modal FREE mengikuti frame game, bukan kotak kecil drawer lama. */
@media (min-width:901px) and (pointer:fine){
  #drawer-reward-chest.free-screen,
  html body #drawer-reward-chest.free-screen{
    width:437px !important;
    height:757px !important;
    max-width:437px !important;
    max-height:757px !important;
    left:50% !important;
    top:0 !important;
    transform:translateX(-50%) translateY(14px) !important;
  }

  #drawer-reward-chest.free-screen.open,
  html body #drawer-reward-chest.free-screen.open{
    transform:translateX(-50%) translateY(0) !important;
  }

  #drawer-reward-chest .free-screen-body{
    height:645px !important;
  }
}

@media (pointer:coarse) and (max-height:760px){
  #drawer-reward-chest .free-screen-head{
    height:100px !important;
    padding-top:23px !important;
  }
  #drawer-reward-chest .free-screen-head h2{
    font-size:46px !important;
  }
  #drawer-reward-chest .free-screen-head p{
    font-size:13px !important;
  }
  #drawer-reward-chest .free-screen-body{
    height:calc(100dvh - 100px) !important;
    padding:0 16px 16px !important;
  }
  #drawer-reward-chest .free-reward-card{
    padding:16px !important;
  }
  #drawer-reward-chest .free-reward-icon{
    width:145px !important;
    height:145px !important;
  }
  #drawer-reward-chest .free-status-card strong{
    font-size:50px !important;
  }
  #drawer-reward-chest .free-coin-amount{
    font-size:27px !important;
  }
  #drawer-reward-chest .free-watch-btn{
    height:58px !important;
    font-size:18px !important;
  }
}

/* ===== JOB REWARD GROSS NET CONFIRM ===== */
.job-reward-lines{
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
  margin:0 !important;
  line-height:1.05 !important;
}

.job-reward-lines span{
  display:block !important;
  color:#eef6ff !important;
  font-size:10px !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}

.clean-avail-reward .job-reward-lines span:nth-child(2){
  color:#aaff43 !important;
}

.job-claim-confirm{
  position:fixed !important;
  inset:0 !important;
  z-index:2147482500 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  padding:22px !important;
  background:rgba(0,0,0,.68) !important;
}

.job-claim-confirm.show{
  display:flex !important;
}

.job-claim-confirm-box{
  width:100% !important;
  max-width:360px !important;
  padding:22px !important;
  border-radius:26px !important;
  background:linear-gradient(180deg,rgba(6,34,20,.98),rgba(3,11,23,.98)) !important;
  border:1px solid rgba(145,255,70,.32) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.52) !important;
  text-align:center !important;
}

.job-claim-confirm-box h3{
  margin:0 0 14px !important;
  color:#aaff43 !important;
  font-size:24px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
}

.job-claim-confirm-box p{
  margin:0 !important;
  color:#eef6ff !important;
  font-size:15px !important;
  line-height:1.4 !important;
  font-weight:800 !important;
}

.job-claim-confirm-box p span{
  display:block !important;
  margin:6px 0 !important;
}

.job-claim-confirm-box p b{
  color:#aaff43 !important;
}

.job-claim-confirm-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  margin-top:20px !important;
}

.job-claim-confirm-actions button{
  height:48px !important;
  border-radius:16px !important;
  font-size:14px !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
}

#jobClaimCancelBtn{
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
}

#jobClaimConfirmBtn{
  border:0 !important;
  background:linear-gradient(180deg,#9cff44,#50ba16) !important;
  color:#fff !important;
}

@media (pointer:coarse){
  .job-reward-lines span{
    font-size:11px !important;
  }

  .job-claim-confirm-box h3{
    font-size:28px !important;
  }

  .job-claim-confirm-box p{
    font-size:18px !important;
  }

  .job-claim-confirm-actions button{
    height:56px !important;
    font-size:16px !important;
  }
}


/* ===== JOB GROSS ONLY DISPLAY ===== */
/* Di card pekerjaan tampilkan angka reward kotor saja. Detail kotor/bersih muncul di popup Ambil Hasil. */
.job-card small img,
.active-job small img{
  width:14px !important;
  height:14px !important;
  vertical-align:-2px !important;
  margin-right:3px !important;
}

.clean-avail-reward p{
  white-space:nowrap !important;
}

.job-claim-confirm-box p span{
  text-align:left !important;
}

.job-claim-confirm-box p span:first-child b{
  color:#ffd35c !important;
}

.job-claim-confirm-box p span:nth-child(3) b{
  color:#aaff43 !important;
}


/* ===== JOB CLAIM REWARD 0 FIX ===== */
.clean-wide-btn.job-claim-open{
  text-align:center !important;
}

.job-claim-confirm-box p span:nth-child(1) b{
  color:#ffd35c !important;
}

.job-claim-confirm-box p span:nth-child(3) b{
  color:#aaff43 !important;
}


/* ===== JOB START CONFIRM MODAL ===== */
.job-start-confirm{
  position:fixed !important;
  inset:0 !important;
  z-index:2147482500 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  padding:22px !important;
  background:rgba(0,0,0,.70) !important;
}

.job-start-confirm.show{
  display:flex !important;
}

.job-start-confirm-box{
  width:100% !important;
  max-width:390px !important;
  padding:22px !important;
  border-radius:28px !important;
  background:linear-gradient(180deg,rgba(6,34,20,.98),rgba(3,11,23,.98)) !important;
  border:1px solid rgba(145,255,70,.32) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.52) !important;
  text-align:center !important;
}

.job-start-confirm-box h3{
  margin:0 0 8px !important;
  color:#aaff43 !important;
  font-size:25px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
}

.job-start-title{
  margin:0 0 14px !important;
  color:#eef6ff !important;
  font-size:17px !important;
  line-height:1.25 !important;
  font-weight:1000 !important;
}

.job-start-detail{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:9px !important;
  margin:12px 0 !important;
}

.job-start-detail div{
  padding:10px !important;
  border-radius:16px !important;
  background:rgba(3,15,29,.88) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  text-align:left !important;
}

.job-start-detail span{
  display:block !important;
  color:#dcecff !important;
  font-size:11px !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
}

.job-start-detail b{
  display:block !important;
  margin-top:5px !important;
  color:#aaff43 !important;
  font-size:16px !important;
  line-height:1.1 !important;
  font-weight:1000 !important;
}

.job-start-detail div:nth-child(3) b{
  color:#ffd35c !important;
}

.job-start-cost{
  display:flex !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:7px !important;
  margin:12px 0 !important;
}

.job-start-cost span{
  padding:7px 9px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.08) !important;
  color:#eef6ff !important;
  font-size:12px !important;
  font-weight:900 !important;
}

.job-start-note{
  margin:10px 0 0 !important;
  color:#dcecff !important;
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:800 !important;
}

.job-start-confirm-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  margin-top:18px !important;
}

.job-start-confirm-actions button{
  height:50px !important;
  border-radius:16px !important;
  font-size:14px !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
}

#jobStartCancelBtn{
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
}

#jobStartConfirmBtn{
  border:0 !important;
  background:linear-gradient(180deg,#9cff44,#50ba16) !important;
  color:#fff !important;
}

@media (pointer:coarse){
  .job-start-confirm-box h3{
    font-size:29px !important;
  }

  .job-start-title{
    font-size:19px !important;
  }

  .job-start-detail span{
    font-size:12px !important;
  }

  .job-start-detail b{
    font-size:18px !important;
  }

  .job-start-note{
    font-size:13px !important;
  }

  .job-start-confirm-actions button{
    height:56px !important;
    font-size:16px !important;
  }
}

/* ===== SHOP FULLSCREEN CITY MODAL ===== */
#drawer-shop.shop-screen{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:0 !important;
  border:0 !important;
  background:#06111f !important;
  transform:translateY(18px) scale(.985) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:transform .26s cubic-bezier(.18,.9,.22,1),opacity .22s ease !important;
  z-index:2147481000 !important;
}
#drawer-shop.shop-screen.open{transform:translateY(0) scale(1) !important;opacity:1 !important;pointer-events:auto !important;}
#drawer-shop .shop-bg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,8,20,.12),rgba(2,8,20,.82)),url('../shop/shop_city_buildings.webp') center center/cover no-repeat;z-index:0;}
#drawer-shop .shop-overlay{position:absolute;inset:0;background:radial-gradient(circle at 50% 20%,rgba(136,255,66,.16),transparent 26%),linear-gradient(to bottom,rgba(0,0,0,.06),rgba(0,0,0,.45));z-index:1;pointer-events:none;}
#drawer-shop .shop-head{position:relative;z-index:3;padding:30px 20px 8px;text-align:center;display:flex;justify-content:center;align-items:flex-start;}
#drawer-shop .shop-head h2{margin:0;color:#f7fbff;font-size:48px;line-height:1;font-weight:1000;letter-spacing:.03em;text-shadow:0 4px 0 rgba(0,0,0,.34),0 12px 24px rgba(0,0,0,.45);}
#drawer-shop .shop-head p{margin:10px 0 0;display:flex;align-items:center;justify-content:center;gap:10px;color:#f4f8ff;font-size:15px;font-weight:800;text-shadow:0 2px 6px rgba(0,0,0,.6);}
#drawer-shop .shop-head p span{display:block;width:36px;height:3px;border-radius:99px;background:linear-gradient(90deg,rgba(145,255,66,0),rgba(145,255,66,.96),rgba(145,255,66,0));}
#drawer-shop .shop-close{position:absolute;right:18px;top:24px;width:52px;height:52px;border-radius:50%;border:2px solid rgba(145,255,66,.36);background:rgba(3,12,25,.72);color:#aaff43;font-size:36px;line-height:1;box-shadow:0 10px 24px rgba(0,0,0,.34);}
#drawer-shop .shop-home{position:relative;z-index:3;height:calc(100dvh - 118px);padding:0 18px 18px;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;}
#drawer-shop .shop-category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end;}
#drawer-shop .shop-category-card{border:0;background:transparent;padding:0;border-radius:18px;filter:drop-shadow(0 13px 18px rgba(0,0,0,.38));transition:transform .16s ease;position:relative;z-index:5;cursor:pointer;touch-action:manipulation;pointer-events:auto;}
#drawer-shop .shop-category-card img{pointer-events:none;}
#drawer-shop .shop-category-card:active{transform:scale(.97)}
#drawer-shop .shop-category-card img{width:100%;height:auto;object-fit:contain;}
#drawer-shop .shop-helper{display:grid;grid-template-columns:1fr 20px 1fr 20px 1fr;align-items:center;gap:4px;padding:12px;border-radius:18px;background:rgba(3,12,25,.72);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(7px);}
#drawer-shop .shop-helper div{display:flex;align-items:center;gap:7px;min-width:0;}
#drawer-shop .shop-helper b{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(138,255,66,.18);border:1px solid rgba(138,255,66,.34);color:#aaff43;font-size:12px;}
#drawer-shop .shop-helper span{font-size:10px;color:#eef6ff;font-weight:800;line-height:1.15;}
#drawer-shop .shop-helper i{height:2px;background:linear-gradient(90deg,rgba(138,255,66,0),rgba(138,255,66,.8));border-radius:99px;}
#drawer-shop .shop-sub{display:none;position:relative;z-index:4;height:calc(100dvh - 104px);padding:0 16px 18px;overflow:auto;}
#drawer-shop .shop-sub.active{display:block;animation:shopSubIn .22s ease both;}
@keyframes shopSubIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
#drawer-shop .shop-back{height:34px;border:1px solid rgba(145,255,66,.28);background:rgba(3,12,25,.70);color:#aaff43;border-radius:999px;padding:0 14px;font-size:12px;font-weight:900;margin-bottom:10px;}
#drawer-shop .shop-sub h3{margin:0;color:#aaff43;font-size:24px;font-weight:1000;text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.6);}
#drawer-shop .shop-subtitle{margin:4px 0 12px;color:#edf6ff;font-size:12px;font-weight:700;}
#drawer-shop .shop-item-list{display:grid;gap:10px;padding-bottom:18px;}
#drawer-shop .shop-item-card{display:grid;grid-template-columns:54px 1fr 70px;gap:10px;align-items:center;padding:10px;border-radius:18px;background:linear-gradient(135deg,rgba(5,44,24,.88),rgba(4,13,28,.90));border:1px solid rgba(145,255,70,.26);box-shadow:0 10px 22px rgba(0,0,0,.28);}
#drawer-shop .shop-item-card>img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.35));}
#drawer-shop .shop-item-card h4{margin:0 0 3px;color:#fff;font-size:14px;line-height:1.1;font-weight:1000;}
#drawer-shop .shop-item-card p{margin:0 0 3px;color:#edf6ff;font-size:10px;font-weight:700;line-height:1.2;}
#drawer-shop .shop-item-card span{display:block;color:#aaff43;font-size:9.5px;font-weight:900;line-height:1.2;}
#drawer-shop .shop-buy-btn{height:40px;border:0;border-radius:13px;background:linear-gradient(180deg,#9cff44,#50ba16);color:#fff;font-size:12px;font-weight:1000;text-transform:uppercase;box-shadow:inset 0 1px rgba(255,255,255,.33),0 8px 14px rgba(0,0,0,.26);}
#drawer-shop .shop-buy-btn:disabled{opacity:.48;filter:grayscale(.45);}
#drawer-shop .vehicle-sale-card{grid-template-columns:62px 1fr 78px;}
#drawer-shop .vehicle-sale-card>img{width:62px;height:62px;}
#drawer-shop .fuel-card{grid-template-columns:58px 1fr 72px;}
#drawer-shop .shop-confirm,#drawer-shop .shop-success{position:absolute;inset:0;z-index:20;background:rgba(0,0,0,.62);display:none;align-items:center;justify-content:center;padding:24px;}
#drawer-shop .shop-confirm.show,#drawer-shop .shop-success.show{display:flex;animation:shopFade .18s ease both;}
@keyframes shopFade{from{opacity:0}to{opacity:1}}
#drawer-shop .shop-confirm-box,#drawer-shop .shop-success-box{width:100%;max-width:360px;border-radius:24px;background:linear-gradient(180deg,rgba(6,22,16,.98),rgba(3,11,23,.98));border:1px solid rgba(145,255,70,.28);box-shadow:0 24px 60px rgba(0,0,0,.52);padding:20px;text-align:center;}
#drawer-shop .shop-confirm-box h3,#drawer-shop .shop-success-box h3{margin:0 0 10px;color:#aaff43;font-size:22px;font-weight:1000;text-transform:uppercase;}
#drawer-shop .shop-confirm-box p,#drawer-shop .shop-success-box p{margin:0;color:#eef6ff;font-size:14px;font-weight:800;line-height:1.35;}
#drawer-shop .shop-confirm-box p span{display:block;margin-top:6px;color:#aaff43;font-size:13px;}
#drawer-shop .shop-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;}
#drawer-shop .shop-confirm-actions button{height:44px;border-radius:14px;font-size:13px;font-weight:1000;text-transform:uppercase;}
#drawer-shop .shop-confirm-cancel{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;}
#drawer-shop .shop-confirm-ok{border:0;background:linear-gradient(180deg,#9cff44,#50ba16);color:#fff;}
#drawer-shop .shop-success-box b{display:flex;align-items:center;justify-content:center;margin:0 auto 10px;width:58px;height:58px;border-radius:50%;background:linear-gradient(180deg,#9cff44,#50ba16);color:#fff;font-size:38px;}
@media (max-height:760px){
  #drawer-shop .shop-head{padding-top:22px;}
  #drawer-shop .shop-head h2{font-size:40px;}
  #drawer-shop .shop-home{height:calc(100dvh - 98px);gap:10px;}
  #drawer-shop .shop-category-grid{gap:9px;}
  #drawer-shop .shop-helper{padding:9px;}
  #drawer-shop .shop-sub{height:calc(100dvh - 92px);}
  #drawer-shop .shop-item-card{padding:8px;grid-template-columns:48px 1fr 64px;}
  #drawer-shop .shop-item-card>img{width:48px;height:48px;}
  #drawer-shop .shop-buy-btn{height:36px;font-size:11px;}
}

/* ===== SHOP ITEM LIST BIGGER FIX ===== */
/* Yang dibesarkan: list item yang dijual di dalam panel shop. */
#drawer-shop .shop-items,
#drawer-shop .shop-list,
#drawer-shop .shop-product-list,
#drawer-shop .shop-category-items,
#drawer-shop .shop-grid-items{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
}

#drawer-shop .shop-item,
#drawer-shop .shop-product,
#drawer-shop .shop-item-card,
#drawer-shop .product-card,
#drawer-shop .shop-buy-card{
  min-height:92px !important;
  padding:12px 13px !important;
  border-radius:18px !important;
  display:grid !important;
  grid-template-columns:72px 1fr auto !important;
  gap:12px !important;
  align-items:center !important;
  background:linear-gradient(180deg,rgba(5,42,24,.88),rgba(3,15,29,.92)) !important;
  border:1px solid rgba(142,255,65,.28) !important;
  box-shadow:0 10px 20px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#drawer-shop .shop-item img,
#drawer-shop .shop-product img,
#drawer-shop .shop-item-card img,
#drawer-shop .product-card img,
#drawer-shop .shop-buy-card img,
#drawer-shop .shop-item-icon,
#drawer-shop .product-icon{
  width:68px !important;
  height:68px !important;
  max-width:68px !important;
  max-height:68px !important;
  object-fit:contain !important;
}

#drawer-shop .shop-item h3,
#drawer-shop .shop-product h3,
#drawer-shop .shop-item-card h3,
#drawer-shop .product-card h3,
#drawer-shop .shop-buy-card h3,
#drawer-shop .shop-item-title,
#drawer-shop .product-title{
  font-size:17px !important;
  line-height:1.12 !important;
  font-weight:1000 !important;
  margin:0 0 4px !important;
  color:#fff !important;
  text-shadow:0 2px 5px rgba(0,0,0,.65) !important;
}

#drawer-shop .shop-item p,
#drawer-shop .shop-product p,
#drawer-shop .shop-item-card p,
#drawer-shop .product-card p,
#drawer-shop .shop-buy-card p,
#drawer-shop .shop-item-desc,
#drawer-shop .product-desc{
  font-size:12px !important;
  line-height:1.25 !important;
  color:#dcecff !important;
  margin:0 !important;
}

#drawer-shop .shop-price,
#drawer-shop .product-price,
#drawer-shop .item-price,
#drawer-shop .price{
  font-size:15px !important;
  font-weight:1000 !important;
  color:#aaff43 !important;
  white-space:nowrap !important;
}

#drawer-shop .shop-item .btn,
#drawer-shop .shop-product .btn,
#drawer-shop .shop-item-card .btn,
#drawer-shop .product-card .btn,
#drawer-shop .shop-buy-card .btn,
#drawer-shop .buy-btn,
#drawer-shop button[data-buy],
#drawer-shop button[data-action]{
  min-width:78px !important;
  height:42px !important;
  border-radius:14px !important;
  padding:0 12px !important;
  font-size:13px !important;
  font-weight:1000 !important;
}

#drawer-shop .shop-panel,
#drawer-shop .shop-store-panel,
#drawer-shop .shop-category-panel,
#drawer-shop .shop-content-panel{
  padding:14px !important;
}

#drawer-shop .shop-panel h2,
#drawer-shop .shop-store-panel h2,
#drawer-shop .shop-category-panel h2,
#drawer-shop .shop-content-panel h2{
  font-size:23px !important;
  line-height:1.05 !important;
}

#drawer-shop .shop-panel-header,
#drawer-shop .shop-store-header,
#drawer-shop .shop-category-header{
  margin-bottom:12px !important;
}

@media (max-width:480px){
  #drawer-shop .shop-item,
  #drawer-shop .shop-product,
  #drawer-shop .shop-item-card,
  #drawer-shop .product-card,
  #drawer-shop .shop-buy-card{
    grid-template-columns:62px 1fr auto !important;
    min-height:84px !important;
    padding:10px 11px !important;
    gap:10px !important;
  }

  #drawer-shop .shop-item img,
  #drawer-shop .shop-product img,
  #drawer-shop .shop-item-card img,
  #drawer-shop .product-card img,
  #drawer-shop .shop-buy-card img,
  #drawer-shop .shop-item-icon,
  #drawer-shop .product-icon{
    width:58px !important;
    height:58px !important;
    max-width:58px !important;
    max-height:58px !important;
  }

  #drawer-shop .shop-item h3,
  #drawer-shop .shop-product h3,
  #drawer-shop .shop-item-card h3,
  #drawer-shop .product-card h3,
  #drawer-shop .shop-buy-card h3,
  #drawer-shop .shop-item-title,
  #drawer-shop .product-title{
    font-size:15px !important;
  }

  #drawer-shop .shop-item p,
  #drawer-shop .shop-product p,
  #drawer-shop .shop-item-card p,
  #drawer-shop .product-card p,
  #drawer-shop .shop-buy-card p,
  #drawer-shop .shop-item-desc,
  #drawer-shop .product-desc{
    font-size:11px !important;
  }

  #drawer-shop .shop-price,
  #drawer-shop .product-price,
  #drawer-shop .item-price,
  #drawer-shop .price{
    font-size:13px !important;
  }

  #drawer-shop .shop-item .btn,
  #drawer-shop .shop-product .btn,
  #drawer-shop .shop-item-card .btn,
  #drawer-shop .product-card .btn,
  #drawer-shop .shop-buy-card .btn,
  #drawer-shop .buy-btn,
  #drawer-shop button[data-buy],
  #drawer-shop button[data-action]{
    min-width:68px !important;
    height:38px !important;
    font-size:12px !important;
    padding:0 9px !important;
  }
}

/* ===== SHOP ITEM LIST 4X BIGGER ===== */
/* Fokus: BESARKAN list item yang dijual di panel makanan, kendaraan, dan bensin. */
#drawer-shop .shop-sub{
  padding: 0 14px 20px !important;
}
#drawer-shop .shop-sub h3{
  font-size: 28px !important;
}
#drawer-shop .shop-subtitle{
  font-size: 15px !important;
  margin: 6px 0 16px !important;
}
#drawer-shop .shop-item-list{
  gap: 18px !important;
  padding-bottom: 28px !important;
}
#drawer-shop .shop-item-card,
#drawer-shop .vehicle-sale-card,
#drawer-shop .fuel-card{
  min-height: 148px !important;
  grid-template-columns: 110px 1fr 118px !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 16px !important;
  border-radius: 24px !important;
}
#drawer-shop .shop-item-card > img,
#drawer-shop .vehicle-sale-card > img,
#drawer-shop .fuel-card > img{
  width: 104px !important;
  height: 104px !important;
  max-width: 104px !important;
  max-height: 104px !important;
}
#drawer-shop .shop-item-card h4,
#drawer-shop .vehicle-sale-card h4,
#drawer-shop .fuel-card h4{
  margin: 0 0 8px !important;
  font-size: 23px !important;
  line-height: 1.08 !important;
  font-weight: 1000 !important;
}
#drawer-shop .shop-item-card p,
#drawer-shop .vehicle-sale-card p,
#drawer-shop .fuel-card p{
  margin: 0 0 7px !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}
#drawer-shop .shop-item-card span,
#drawer-shop .vehicle-sale-card span,
#drawer-shop .fuel-card span{
  display: block !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 1000 !important;
}
#drawer-shop .shop-buy-btn{
  width: 100% !important;
  min-width: 108px !important;
  height: 56px !important;
  padding: 0 12px !important;
  border-radius: 18px !important;
  font-size: 18px !important;
  font-weight: 1000 !important;
}

@media (max-width: 480px){
  #drawer-shop .shop-sub{
    padding: 0 12px 18px !important;
  }
  #drawer-shop .shop-sub h3{
    font-size: 24px !important;
  }
  #drawer-shop .shop-subtitle{
    font-size: 13px !important;
    margin: 4px 0 14px !important;
  }
  #drawer-shop .shop-item-list{
    gap: 14px !important;
  }
  #drawer-shop .shop-item-card,
  #drawer-shop .vehicle-sale-card,
  #drawer-shop .fuel-card{
    min-height: 122px !important;
    grid-template-columns: 82px 1fr 88px !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 20px !important;
  }
  #drawer-shop .shop-item-card > img,
  #drawer-shop .vehicle-sale-card > img,
  #drawer-shop .fuel-card > img{
    width: 76px !important;
    height: 76px !important;
    max-width: 76px !important;
    max-height: 76px !important;
  }
  #drawer-shop .shop-item-card h4,
  #drawer-shop .vehicle-sale-card h4,
  #drawer-shop .fuel-card h4{
    margin-bottom: 6px !important;
    font-size: 18px !important;
  }
  #drawer-shop .shop-item-card p,
  #drawer-shop .vehicle-sale-card p,
  #drawer-shop .fuel-card p{
    margin-bottom: 5px !important;
    font-size: 13px !important;
  }
  #drawer-shop .shop-item-card span,
  #drawer-shop .vehicle-sale-card span,
  #drawer-shop .fuel-card span{
    font-size: 12.5px !important;
  }
  #drawer-shop .shop-buy-btn{
    min-width: 82px !important;
    height: 48px !important;
    font-size: 15px !important;
    border-radius: 15px !important;
  }
}

/* ===== SHOP ITEM LIST 2X MORE + RESET ON CLOSE ===== */
/* Perbesar lagi list item jualan dari versi 4x. */
#drawer-shop .shop-item-list{
  gap:24px !important;
}

#drawer-shop .shop-item-card,
#drawer-shop .vehicle-sale-card,
#drawer-shop .fuel-card{
  min-height:190px !important;
  grid-template-columns:138px 1fr 136px !important;
  gap:20px !important;
  padding:20px !important;
  border-radius:28px !important;
}

#drawer-shop .shop-item-card > img,
#drawer-shop .vehicle-sale-card > img,
#drawer-shop .fuel-card > img{
  width:128px !important;
  height:128px !important;
  max-width:128px !important;
  max-height:128px !important;
}

#drawer-shop .shop-item-card h4,
#drawer-shop .vehicle-sale-card h4,
#drawer-shop .fuel-card h4{
  font-size:28px !important;
  line-height:1.05 !important;
  margin-bottom:10px !important;
}

#drawer-shop .shop-item-card p,
#drawer-shop .vehicle-sale-card p,
#drawer-shop .fuel-card p{
  font-size:18px !important;
  line-height:1.28 !important;
  margin-bottom:8px !important;
}

#drawer-shop .shop-item-card span,
#drawer-shop .vehicle-sale-card span,
#drawer-shop .fuel-card span{
  font-size:17px !important;
  line-height:1.28 !important;
}

#drawer-shop .shop-buy-btn{
  min-width:128px !important;
  height:68px !important;
  border-radius:22px !important;
  font-size:22px !important;
}

/* HP portrait: tetap besar, tapi masih muat lebar. */
@media (max-width:480px){
  #drawer-shop .shop-item-list{
    gap:18px !important;
  }

  #drawer-shop .shop-item-card,
  #drawer-shop .vehicle-sale-card,
  #drawer-shop .fuel-card{
    min-height:150px !important;
    grid-template-columns:98px 1fr 98px !important;
    gap:13px !important;
    padding:14px !important;
    border-radius:22px !important;
  }

  #drawer-shop .shop-item-card > img,
  #drawer-shop .vehicle-sale-card > img,
  #drawer-shop .fuel-card > img{
    width:92px !important;
    height:92px !important;
    max-width:92px !important;
    max-height:92px !important;
  }

  #drawer-shop .shop-item-card h4,
  #drawer-shop .vehicle-sale-card h4,
  #drawer-shop .fuel-card h4{
    font-size:22px !important;
    margin-bottom:7px !important;
  }

  #drawer-shop .shop-item-card p,
  #drawer-shop .vehicle-sale-card p,
  #drawer-shop .fuel-card p{
    font-size:15px !important;
    margin-bottom:6px !important;
  }

  #drawer-shop .shop-item-card span,
  #drawer-shop .vehicle-sale-card span,
  #drawer-shop .fuel-card span{
    font-size:14px !important;
  }

  #drawer-shop .shop-buy-btn{
    min-width:92px !important;
    height:56px !important;
    font-size:18px !important;
    border-radius:18px !important;
  }
}

/* HP sangat sempit: button tetap tidak keluar layar. */
@media (max-width:390px){
  #drawer-shop .shop-item-card,
  #drawer-shop .vehicle-sale-card,
  #drawer-shop .fuel-card{
    grid-template-columns:86px 1fr 84px !important;
    gap:10px !important;
    min-height:138px !important;
    padding:12px !important;
  }

  #drawer-shop .shop-item-card > img,
  #drawer-shop .vehicle-sale-card > img,
  #drawer-shop .fuel-card > img{
    width:80px !important;
    height:80px !important;
    max-width:80px !important;
    max-height:80px !important;
  }

  #drawer-shop .shop-item-card h4,
  #drawer-shop .vehicle-sale-card h4,
  #drawer-shop .fuel-card h4{
    font-size:19px !important;
  }

  #drawer-shop .shop-item-card p,
  #drawer-shop .vehicle-sale-card p,
  #drawer-shop .fuel-card p{
    font-size:13px !important;
  }

  #drawer-shop .shop-item-card span,
  #drawer-shop .vehicle-sale-card span,
  #drawer-shop .fuel-card span{
    font-size:12px !important;
  }

  #drawer-shop .shop-buy-btn{
    min-width:78px !important;
    height:50px !important;
    font-size:16px !important;
  }
}


/* ===== PC ONLY: SHOP ITEM LIST CONTENT SMALLER ===== */
/* Hanya list item shop di PC. Tab/menu 3 pilihan dan tampilan HP tidak disentuh. */
@media (min-width:481px){
  #drawer-shop .shop-sub{
    padding:0 14px 18px !important;
  }

  #drawer-shop .shop-sub h3{
    font-size:24px !important;
  }

  #drawer-shop .shop-subtitle{
    font-size:13px !important;
    margin:5px 0 12px !important;
  }

  #drawer-shop .shop-item-list{
    gap:16px !important;
    padding-bottom:22px !important;
  }

  #drawer-shop .shop-item-card,
  #drawer-shop .vehicle-sale-card,
  #drawer-shop .fuel-card{
    min-height:142px !important;
    grid-template-columns:98px 1fr 104px !important;
    gap:14px !important;
    padding:14px !important;
    border-radius:22px !important;
  }

  #drawer-shop .shop-item-card > img,
  #drawer-shop .vehicle-sale-card > img,
  #drawer-shop .fuel-card > img{
    width:92px !important;
    height:92px !important;
    max-width:92px !important;
    max-height:92px !important;
  }

  #drawer-shop .shop-item-card h4,
  #drawer-shop .vehicle-sale-card h4,
  #drawer-shop .fuel-card h4{
    font-size:21px !important;
    line-height:1.08 !important;
    margin:0 0 6px !important;
  }

  #drawer-shop .shop-item-card p,
  #drawer-shop .vehicle-sale-card p,
  #drawer-shop .fuel-card p{
    font-size:14px !important;
    line-height:1.22 !important;
    margin:0 0 5px !important;
  }

  #drawer-shop .shop-item-card span,
  #drawer-shop .vehicle-sale-card span,
  #drawer-shop .fuel-card span{
    font-size:13px !important;
    line-height:1.22 !important;
  }

  #drawer-shop .shop-buy-btn{
    min-width:96px !important;
    height:50px !important;
    padding:0 10px !important;
    border-radius:16px !important;
    font-size:16px !important;
  }
}

/* ===== TOPUP FULLSCREEN PORTRAIT MODAL ===== */
#drawer-topup.topup-modal-screen{
  position:fixed !important; inset:0 !important; width:100vw !important; height:100dvh !important;
  max-width:none !important; max-height:none !important; padding:0 !important; overflow:hidden !important;
  border:0 !important; border-radius:0 !important; background:#06111f !important;
  opacity:0 !important; pointer-events:none !important; transform:translateY(18px) scale(.985) !important;
  transition:transform .26s ease, opacity .22s ease !important; z-index:2147481800 !important;
}
#drawer-topup.topup-modal-screen.open{opacity:1 !important; pointer-events:auto !important; transform:translateY(0) scale(1) !important;}
#drawer-topup .topup-modal-bg{position:absolute !important; inset:0 !important; z-index:0 !important; background:linear-gradient(180deg,rgba(2,8,20,.10),rgba(2,8,20,.90)),url('../backgrounds/bg_antario_city_night.webp') center center/cover no-repeat !important;}
#drawer-topup .topup-modal-overlay{position:absolute !important; inset:0 !important; z-index:1 !important; pointer-events:none !important; background:radial-gradient(circle at 50% 18%,rgba(145,255,70,.18),transparent 30%) !important;}
#drawer-topup .topup-modal-head{position:relative !important; z-index:3 !important; height:104px !important; padding:28px 20px 8px !important; display:flex !important; justify-content:center !important; align-items:flex-start !important; text-align:center !important;}
#drawer-topup .topup-modal-head h2{margin:0 !important; color:#f7fbff !important; font-size:44px !important; line-height:1 !important; font-weight:1000 !important; letter-spacing:.03em !important; text-shadow:0 4px 0 rgba(0,0,0,.34),0 12px 24px rgba(0,0,0,.45) !important;}
#drawer-topup .topup-modal-head p{margin:9px 0 0 !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:9px !important; color:#f4f8ff !important; font-size:13px !important; font-weight:800 !important;}
#drawer-topup .topup-modal-head p span{display:block !important; width:34px !important; height:3px !important; border-radius:99px !important; background:linear-gradient(90deg,rgba(145,255,66,0),rgba(145,255,66,.96),rgba(145,255,66,0)) !important;}
#drawer-topup .topup-modal-close{position:absolute !important; right:18px !important; top:24px !important; width:52px !important; height:52px !important; border-radius:50% !important; border:2px solid rgba(145,255,66,.36) !important; background:rgba(3,12,25,.72) !important; color:#aaff43 !important; font-size:36px !important; line-height:1 !important; box-shadow:0 10px 24px rgba(0,0,0,.34) !important;}
#drawer-topup .topup-modal-content{position:relative !important; z-index:3 !important; height:calc(100dvh - 104px) !important; padding:0 14px 18px !important; overflow-y:auto !important; overflow-x:hidden !important; scrollbar-width:none !important;}
#drawer-topup .topup-modal-content::-webkit-scrollbar{display:none !important;}
#drawer-topup .topup-balance-card{display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; padding:14px !important; margin-bottom:12px !important; border-radius:22px !important; background:linear-gradient(180deg,rgba(5,42,24,.90),rgba(3,15,29,.95)) !important; border:1px solid rgba(145,255,70,.30) !important; box-shadow:0 12px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;}
#drawer-topup .topup-balance-card small{display:block !important; color:#edf6ff !important; font-size:11px !important; font-weight:1000 !important; text-transform:uppercase !important;}
#drawer-topup .topup-balance-card strong{display:block !important; margin-top:5px !important; color:#aaff43 !important; font-size:28px !important; line-height:1 !important; font-weight:1000 !important;}
#drawer-topup .topup-balance-card img{width:62px !important; height:62px !important; object-fit:contain !important;}
#drawer-topup .topup-grid{display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important;}
#drawer-topup .topup-amount-card{min-height:96px !important; padding:12px 10px !important; border-radius:22px !important; border:1px solid rgba(145,255,70,.28) !important; background:linear-gradient(180deg,rgba(5,42,24,.88),rgba(3,15,29,.94)) !important; box-shadow:0 10px 20px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06) !important; text-align:left !important;}
#drawer-topup .topup-amount-card span{display:block !important; color:#edf6ff !important; font-size:10px !important; font-weight:1000 !important; text-transform:uppercase !important;}
#drawer-topup .topup-amount-card strong{display:block !important; margin-top:7px !important; color:#aaff43 !important; font-size:23px !important; line-height:1 !important; font-weight:1000 !important;}
#drawer-topup .topup-amount-card small{display:block !important; margin-top:8px !important; color:#dcecff !important; font-size:11px !important; font-weight:800 !important;}
#drawer-topup .topup-custom-card{margin-top:12px !important; padding:14px !important; border-radius:22px !important; background:linear-gradient(180deg,rgba(3,15,29,.88),rgba(2,10,22,.95)) !important; border:1px solid rgba(145,255,70,.22) !important;}
#drawer-topup .topup-custom-card h3{margin:0 0 10px !important; color:#aaff43 !important; font-size:18px !important; font-weight:1000 !important; text-transform:uppercase !important;}
#drawer-topup .topup-custom-row{display:grid !important; grid-template-columns:1fr 84px !important; gap:8px !important;}
#drawer-topup .topup-custom-row input{height:46px !important; border-radius:15px !important; border:1px solid rgba(255,255,255,.16) !important; background:rgba(0,0,0,.28) !important; color:#fff !important; padding:0 12px !important; font-size:14px !important; font-weight:900 !important;}
#drawer-topup .topup-custom-row button{height:46px !important; border:0 !important; border-radius:15px !important; background:linear-gradient(180deg,#9cff44,#50ba16) !important; color:#fff !important; font-size:13px !important; font-weight:1000 !important; text-transform:uppercase !important;}
#drawer-topup .topup-custom-card p{margin:9px 0 0 !important; color:#dcecff !important; font-size:12px !important; line-height:1.35 !important; font-weight:800 !important;}
#drawer-topup .topup-confirm{position:absolute !important; inset:0 !important; z-index:20 !important; display:none !important; align-items:center !important; justify-content:center !important; padding:22px !important; background:rgba(0,0,0,.64) !important;}
#drawer-topup .topup-confirm.show{display:flex !important;}
#drawer-topup .topup-confirm-box{width:100% !important; max-width:360px !important; padding:20px !important; border-radius:24px !important; background:linear-gradient(180deg,rgba(6,22,16,.98),rgba(3,11,23,.98)) !important; border:1px solid rgba(145,255,70,.30) !important; box-shadow:0 24px 60px rgba(0,0,0,.52) !important; text-align:center !important;}
#drawer-topup .topup-confirm-box h3{margin:0 0 10px !important; color:#aaff43 !important; font-size:22px !important; font-weight:1000 !important; text-transform:uppercase !important;}
#drawer-topup .topup-confirm-box p{margin:0 !important; color:#eef6ff !important; font-size:15px !important; font-weight:800 !important; line-height:1.35 !important;}
#drawer-topup .topup-confirm-actions{display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; margin-top:18px !important;}
#drawer-topup .topup-confirm-actions button{height:46px !important; border-radius:15px !important; font-size:13px !important; font-weight:1000 !important; text-transform:uppercase !important;}
#drawer-topup #topupCancelBtn{border:1px solid rgba(255,255,255,.16) !important; background:rgba(255,255,255,.08) !important; color:#fff !important;}
#drawer-topup #topupPayBtn{border:0 !important; background:linear-gradient(180deg,#9cff44,#50ba16) !important; color:#fff !important;}
@media (min-width:901px) and (pointer:fine){
  #drawer-topup.topup-modal-screen{width:437px !important; height:757px !important; max-width:437px !important; max-height:757px !important; left:50% !important; top:0 !important; transform:translateX(-50%) translateY(18px) scale(.985) !important;}
  #drawer-topup.topup-modal-screen.open{transform:translateX(-50%) translateY(0) scale(1) !important;}
  #drawer-topup .topup-modal-content{height:653px !important;}
}
@media (pointer:coarse){
  #drawer-topup .topup-modal-head h2{font-size:48px !important;}
  #drawer-topup .topup-amount-card{min-height:104px !important;}
  #drawer-topup .topup-amount-card strong{font-size:25px !important;}
}

/* ===== TOPUP LIGHT POPUP PERFORMANCE FIX ===== */
/* Ringankan popup Topup khusus HP: kurangi background image, shadow berat, dan scale animation. */
#drawer-topup.topup-modal-screen{
  will-change:opacity, transform !important;
  transform:translateY(14px) !important;
  transition:transform .18s ease, opacity .16s ease !important;
}

#drawer-topup.topup-modal-screen.open{
  transform:translateY(0) !important;
}

/* Background image fullscreen sering bikin modal berat di HP, jadi diganti gradient ringan. */
#drawer-topup .topup-modal-bg{
  background:
    radial-gradient(circle at 50% 12%, rgba(145,255,70,.16), transparent 30%),
    linear-gradient(180deg, #071425 0%, #06111f 52%, #020813 100%) !important;
}

#drawer-topup .topup-modal-overlay{
  background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.24)) !important;
}

/* Kurangi shadow besar di card agar scroll lebih ringan. */
#drawer-topup .topup-balance-card,
#drawer-topup .topup-amount-card,
#drawer-topup .topup-custom-card,
#drawer-topup .topup-confirm-box{
  box-shadow:0 5px 10px rgba(0,0,0,.20) !important;
}

#drawer-topup .topup-amount-card{
  background:rgba(4,28,22,.88) !important;
}

#drawer-topup .topup-balance-card,
#drawer-topup .topup-custom-card{
  background:rgba(3,18,28,.90) !important;
}

/* Pastikan scroll modal ringan di mobile. */
#drawer-topup .topup-modal-content{
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  contain:layout paint !important;
}

/* Hindari animasi hover/tap berat pada banyak card. */
#drawer-topup .topup-amount-card,
#drawer-topup .topup-custom-row button,
#drawer-topup #topupPayBtn,
#drawer-topup #topupCancelBtn{
  transition:none !important;
}

/* PC tetap portrait center, tapi tanpa scale berat juga. */
@media (min-width:901px) and (pointer:fine){
  #drawer-topup.topup-modal-screen{
    transform:translateX(-50%) translateY(14px) !important;
  }

  #drawer-topup.topup-modal-screen.open{
    transform:translateX(-50%) translateY(0) !important;
  }
}

/* HP asli: ukuran tetap sama, efek dipangkas agar tidak patah-patah. */
@media (pointer:coarse){
  #drawer-topup.topup-modal-screen{
    transform:translateY(10px) !important;
  }

  #drawer-topup.topup-modal-screen.open{
    transform:translateY(0) !important;
  }

  #drawer-topup .topup-modal-head h2{
    text-shadow:0 3px 0 rgba(0,0,0,.25) !important;
  }
}

/* ===== TOPUP TEXT 2X BIGGER ===== */
/* Besarkan semua text Topup agar kebaca di HP asli. */
#drawer-topup .topup-modal-head{
  height:122px !important;
  padding-top:30px !important;
}

#drawer-topup .topup-modal-head h2{
  font-size:62px !important;
  line-height:.95 !important;
}

#drawer-topup .topup-modal-head p{
  font-size:24px !important;
  margin-top:12px !important;
}

#drawer-topup .topup-modal-head p span{
  width:46px !important;
  height:5px !important;
}

#drawer-topup .topup-modal-content{
  height:calc(100dvh - 122px) !important;
  padding:0 16px 20px !important;
}

#drawer-topup .topup-balance-card{
  padding:18px !important;
  border-radius:26px !important;
  margin-bottom:16px !important;
}

#drawer-topup .topup-balance-card small{
  font-size:20px !important;
}

#drawer-topup .topup-balance-card strong{
  font-size:44px !important;
  margin-top:9px !important;
}

#drawer-topup .topup-balance-card img{
  width:84px !important;
  height:84px !important;
}

#drawer-topup .topup-grid{
  gap:14px !important;
}

#drawer-topup .topup-amount-card{
  min-height:150px !important;
  padding:18px 16px !important;
  border-radius:28px !important;
}

#drawer-topup .topup-amount-card span{
  font-size:20px !important;
}

#drawer-topup .topup-amount-card strong{
  font-size:38px !important;
  margin-top:12px !important;
  line-height:1.02 !important;
}

#drawer-topup .topup-amount-card small{
  font-size:20px !important;
  margin-top:12px !important;
}

#drawer-topup .topup-custom-card{
  margin-top:16px !important;
  padding:18px !important;
  border-radius:26px !important;
}

#drawer-topup .topup-custom-card h3{
  font-size:32px !important;
  margin-bottom:14px !important;
}

#drawer-topup .topup-custom-row{
  grid-template-columns:1fr 112px !important;
  gap:12px !important;
}

#drawer-topup .topup-custom-row input{
  height:64px !important;
  border-radius:20px !important;
  font-size:22px !important;
  padding:0 18px !important;
}

#drawer-topup .topup-custom-row button{
  height:64px !important;
  border-radius:20px !important;
  font-size:20px !important;
}

#drawer-topup .topup-custom-card p{
  font-size:20px !important;
  line-height:1.35 !important;
  margin-top:14px !important;
}

#drawer-topup .topup-confirm-box{
  max-width:390px !important;
  padding:26px !important;
  border-radius:30px !important;
}

#drawer-topup .topup-confirm-box h3{
  font-size:34px !important;
  margin-bottom:16px !important;
}

#drawer-topup .topup-confirm-box p{
  font-size:24px !important;
}

#drawer-topup .topup-confirm-actions{
  gap:14px !important;
  margin-top:24px !important;
}

#drawer-topup .topup-confirm-actions button{
  height:62px !important;
  border-radius:20px !important;
  font-size:20px !important;
}

@media (min-width:901px) and (pointer:fine){
  #drawer-topup .topup-modal-content{
    height:635px !important;
  }
}

/* HP pendek: tetap besar, tapi sedikit dipadatkan supaya tidak terlalu jebol */
@media (pointer:coarse) and (max-height:760px){
  #drawer-topup .topup-modal-head{
    height:108px !important;
    padding-top:24px !important;
  }

  #drawer-topup .topup-modal-head h2{
    font-size:52px !important;
  }

  #drawer-topup .topup-modal-head p{
    font-size:19px !important;
    margin-top:8px !important;
  }

  #drawer-topup .topup-modal-content{
    height:calc(100dvh - 108px) !important;
    padding:0 14px 18px !important;
  }

  #drawer-topup .topup-balance-card{
    padding:15px !important;
    margin-bottom:12px !important;
  }

  #drawer-topup .topup-balance-card small{
    font-size:16px !important;
  }

  #drawer-topup .topup-balance-card strong{
    font-size:34px !important;
  }

  #drawer-topup .topup-balance-card img{
    width:68px !important;
    height:68px !important;
  }

  #drawer-topup .topup-grid{
    gap:10px !important;
  }

  #drawer-topup .topup-amount-card{
    min-height:118px !important;
    padding:14px 12px !important;
    border-radius:24px !important;
  }

  #drawer-topup .topup-amount-card span{
    font-size:15px !important;
  }

  #drawer-topup .topup-amount-card strong{
    font-size:28px !important;
    margin-top:9px !important;
  }

  #drawer-topup .topup-amount-card small{
    font-size:15px !important;
    margin-top:9px !important;
  }

  #drawer-topup .topup-custom-card h3{
    font-size:24px !important;
  }

  #drawer-topup .topup-custom-row input,
  #drawer-topup .topup-custom-row button{
    height:54px !important;
    font-size:17px !important;
  }

  #drawer-topup .topup-custom-card p{
    font-size:16px !important;
  }
}

/* ===== TOPUP DIAMOND RATE 5000 ===== */
#drawer-topup .topup-custom-card p br{
  display:block !important;
  margin-top:4px !important;
}

#drawer-topup .topup-amount-card small{
  color:#f3f7ff !important;
}


/* ===== JOB START CONFIRM 3X BIGGER ONLY ===== */
/* KHUSUS modal popup saat AMBIL kerjaan. Tidak menyentuh Shop/Topup/Garasi/Free. */
#jobStartConfirm.job-start-confirm{
  padding:18px !important;
}

#jobStartConfirm .job-start-confirm-box{
  width:100% !important;
  max-width:min(96vw, 420px) !important;
  padding:26px !important;
  border-radius:34px !important;
}

#jobStartConfirm .job-start-confirm-box h3{
  font-size:38px !important;
  line-height:.95 !important;
  margin-bottom:14px !important;
}

#jobStartConfirm .job-start-title{
  font-size:26px !important;
  line-height:1.15 !important;
  margin-bottom:18px !important;
}

#jobStartConfirm .job-start-detail{
  gap:12px !important;
  margin:16px 0 !important;
}

#jobStartConfirm .job-start-detail div{
  padding:16px !important;
  border-radius:22px !important;
}

#jobStartConfirm .job-start-detail span{
  font-size:17px !important;
  line-height:1 !important;
}

#jobStartConfirm .job-start-detail b{
  font-size:25px !important;
  line-height:1.05 !important;
  margin-top:9px !important;
}

#jobStartConfirm .job-start-cost{
  gap:10px !important;
  margin:16px 0 !important;
}

#jobStartConfirm .job-start-cost span{
  padding:11px 14px !important;
  font-size:18px !important;
  line-height:1 !important;
}

#jobStartConfirm .job-start-note{
  font-size:18px !important;
  line-height:1.35 !important;
  margin-top:16px !important;
}

#jobStartConfirm .job-start-confirm-actions{
  gap:14px !important;
  margin-top:24px !important;
}

#jobStartConfirm .job-start-confirm-actions button{
  height:68px !important;
  border-radius:22px !important;
  font-size:22px !important;
}

/* HP kecil/pendek: tetap besar tapi tidak jebol layar */
@media (pointer:coarse) and (max-height:760px){
  #jobStartConfirm .job-start-confirm-box{
    max-width:min(96vw, 410px) !important;
    padding:20px !important;
    border-radius:28px !important;
  }

  #jobStartConfirm .job-start-confirm-box h3{
    font-size:30px !important;
    margin-bottom:10px !important;
  }

  #jobStartConfirm .job-start-title{
    font-size:21px !important;
    margin-bottom:12px !important;
  }

  #jobStartConfirm .job-start-detail{
    gap:9px !important;
    margin:12px 0 !important;
  }

  #jobStartConfirm .job-start-detail div{
    padding:12px !important;
    border-radius:18px !important;
  }

  #jobStartConfirm .job-start-detail span{
    font-size:14px !important;
  }

  #jobStartConfirm .job-start-detail b{
    font-size:20px !important;
    margin-top:6px !important;
  }

  #jobStartConfirm .job-start-cost span{
    font-size:15px !important;
    padding:9px 11px !important;
  }

  #jobStartConfirm .job-start-note{
    font-size:15px !important;
    margin-top:10px !important;
  }

  #jobStartConfirm .job-start-confirm-actions{
    margin-top:16px !important;
  }

  #jobStartConfirm .job-start-confirm-actions button{
    height:58px !important;
    font-size:18px !important;
  }
}


/* ===== REMOVE DASHBOARD BRAND TEXT AND VEHICLE NAME ===== */
/* Hapus text/logo CSS DriverGas di dashboard. Asset gambar tidak dihapus. */
.clean-logo,
.dashboard-logo,
.game-logo,
.brand-logo,
.brand-title,
.drivergas-title,
.drivergas-logo-text,
.hero-logo,
.clean-dashboard-logo,
.main-logo,
.logo-wrap{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Kalau dashboard pakai image logo langsung, sembunyikan hanya di area dashboard, bukan login. */
.clean-dashboard img[src*="logo_antario_online"],
.dashboard img[src*="logo_antario_online"],
.game-shell img[src*="logo_antario_online"],
.home-screen img[src*="logo_antario_online"]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
}

/* Hapus nama kendaraan termasuk Jalan Kaki. */
.vehicle-name,
.current-vehicle-name,
.equipped-vehicle-name,
.active-vehicle-name,
.garage-vehicle-name,
.clean-vehicle-name,
.vehicle-title,
.rider-vehicle-name,
[class*="vehicle-name"],
[class*="vehicle-title"]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
}

/* Kalau nama kendaraan tampil sebagai teks kecil di kartu kendaraan/dashboard, sembunyikan blok labelnya. */
.clean-vehicle-card h3,
.clean-vehicle-card strong,
.vehicle-card h3,
.vehicle-card strong,
.active-vehicle h3,
.active-vehicle strong,
.current-vehicle h3,
.current-vehicle strong{
  display:none !important;
}


/* ===== SHOP TOPUP PC FORCE LIKE HP PORTRAIT ONLY ===== */
/*
  KHUSUS PC SAJA.
  HP TIDAK DISENTUH.

  Tujuan:
  - Shop dan Topup di PC dipaksa portrait seperti tampilan HP.
  - Bukan fullscreen monitor.
  - Bukan terlalu kecil.
  - Ukuran mengikuti frame game portrait.
*/

@media (min-width:901px) and (pointer:fine){
  html body #drawer-shop,
  html body #drawer-shop.drawer-sheet,
  html body #drawer-shop.shop-screen,
  html body #drawer-topup,
  html body #drawer-topup.drawer-sheet,
  html body #drawer-topup.topup-modal-screen{
    position:fixed !important;
    left:50% !important;
    top:0 !important;
    right:auto !important;
    bottom:auto !important;

    width:437px !important;
    height:757px !important;
    max-width:437px !important;
    max-height:757px !important;
    min-width:0 !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;

    opacity:0 !important;
    pointer-events:none !important;
    transform:translateX(-50%) translateY(12px) !important;
    z-index:2147481800 !important;
  }

  html body #drawer-shop.open,
  html body #drawer-shop.drawer-sheet.open,
  html body #drawer-shop.shop-screen.open,
  html body #drawer-topup.open,
  html body #drawer-topup.drawer-sheet.open,
  html body #drawer-topup.topup-modal-screen.open{
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translateX(-50%) translateY(0) !important;
  }

  html body #drawer-shop.closing,
  html body #drawer-shop.drawer-sheet.closing,
  html body #drawer-shop.shop-screen.closing,
  html body #drawer-topup.closing,
  html body #drawer-topup.drawer-sheet.closing,
  html body #drawer-topup.topup-modal-screen.closing{
    opacity:0 !important;
    pointer-events:none !important;
    transform:translateX(-50%) translateY(12px) !important;
  }

  /* Header mengikuti versi HP/portrait, bukan layout lebar PC */
  html body #drawer-shop .shop-head,
  html body #drawer-topup .topup-modal-head{
    width:100% !important;
    height:132px !important;
    padding:30px 56px 10px 20px !important;
    box-sizing:border-box !important;
  }

  html body #drawer-shop .shop-head h2,
  html body #drawer-topup .topup-modal-head h2{
    font-size:54px !important;
    line-height:.95 !important;
  }

  html body #drawer-shop .shop-head p,
  html body #drawer-topup .topup-modal-head p{
    font-size:18px !important;
    line-height:1.05 !important;
    margin-top:10px !important;
    white-space:normal !important;
  }

  /* Isi mengikuti tinggi frame portrait */
  html body #drawer-shop .shop-home,
  html body #drawer-shop .shop-list,
  html body #drawer-shop .shop-content,
  html body #drawer-shop .shop-body,
  html body #drawer-topup .topup-modal-content{
    width:100% !important;
    height:calc(757px - 132px) !important;
    max-height:calc(757px - 132px) !important;
    min-height:0 !important;
    padding:0 14px 18px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }

  /* Grid tetap seperti HP */
  html body #drawer-shop .shop-grid,
  html body #drawer-shop .shop-list-grid,
  html body #drawer-shop .shop-items,
  html body #drawer-shop .shop-category-grid,
  html body #drawer-shop .shop-menu-grid,
  html body #drawer-topup .topup-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:12px !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }

  html body #drawer-shop .shop-card,
  html body #drawer-shop .shop-item-card,
  html body #drawer-shop .shop-menu-card,
  html body #drawer-shop .shop-category-card,
  html body #drawer-shop [class*="shop-card"],
  html body #drawer-shop [class*="shop-item"],
  html body #drawer-topup .topup-amount-card{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  /* Konfirmasi topup tetap di dalam frame portrait */
  html body #drawer-topup .topup-confirm{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
  }
}

/* PC layar rendah: tetap portrait, tapi mengecil proporsional agar tidak keluar layar */
@media (min-width:901px) and (pointer:fine) and (max-height:780px){
  html body #drawer-shop,
  html body #drawer-shop.drawer-sheet,
  html body #drawer-shop.shop-screen,
  html body #drawer-topup,
  html body #drawer-topup.drawer-sheet,
  html body #drawer-topup.topup-modal-screen{
    width:calc(437px * .88) !important;
    height:calc(757px * .88) !important;
    max-width:calc(437px * .88) !important;
    max-height:calc(757px * .88) !important;
  }

  html body #drawer-shop .shop-head,
  html body #drawer-topup .topup-modal-head{
    height:116px !important;
    padding:24px 52px 8px 18px !important;
  }

  html body #drawer-shop .shop-head h2,
  html body #drawer-topup .topup-modal-head h2{
    font-size:46px !important;
  }

  html body #drawer-shop .shop-head p,
  html body #drawer-topup .topup-modal-head p{
    font-size:15px !important;
    margin-top:7px !important;
  }

  html body #drawer-shop .shop-home,
  html body #drawer-shop .shop-list,
  html body #drawer-shop .shop-content,
  html body #drawer-shop .shop-body,
  html body #drawer-topup .topup-modal-content{
    height:calc((757px * .88) - 116px) !important;
    max-height:calc((757px * .88) - 116px) !important;
  }
}


/* ===== PC SHOP TOPUP CONTENT SMALLER ONLY ===== */
/*
  KHUSUS PC SAJA.
  Modal Shop/Topup tetap frame portrait 437x757.
  Yang dikecilkan hanya isi/card/text di dalamnya.
  HP tidak disentuh.
*/
@media (min-width:901px) and (pointer:fine){
  /* Pastikan modal PC balik ke ukuran portrait, bukan modal kecil */
  html body #drawer-shop,
  html body #drawer-shop.drawer-sheet,
  html body #drawer-shop.shop-screen,
  html body #drawer-topup,
  html body #drawer-topup.drawer-sheet,
  html body #drawer-topup.topup-modal-screen{
    width:437px !important;
    height:757px !important;
    max-width:437px !important;
    max-height:757px !important;
    left:50% !important;
    top:0 !important;
    transform:translateX(-50%) translateY(12px) !important;
  }

  html body #drawer-shop.open,
  html body #drawer-shop.drawer-sheet.open,
  html body #drawer-shop.shop-screen.open,
  html body #drawer-topup.open,
  html body #drawer-topup.drawer-sheet.open,
  html body #drawer-topup.topup-modal-screen.open{
    transform:translateX(-50%) translateY(0) !important;
  }

  /* Isi/header diperkecil */
  html body #drawer-shop .shop-head,
  html body #drawer-topup .topup-modal-head{
    height:104px !important;
    padding:22px 48px 6px 16px !important;
    box-sizing:border-box !important;
  }

  html body #drawer-shop .shop-head h2,
  html body #drawer-topup .topup-modal-head h2{
    font-size:38px !important;
    line-height:.95 !important;
  }

  html body #drawer-shop .shop-head p,
  html body #drawer-topup .topup-modal-head p{
    font-size:12px !important;
    line-height:1.05 !important;
    margin-top:6px !important;
  }

  html body #drawer-shop .shop-close,
  html body #drawer-shop .drawer-close,
  html body #drawer-topup .topup-modal-close,
  html body #drawer-topup .drawer-close{
    right:12px !important;
    top:18px !important;
    width:42px !important;
    height:42px !important;
    font-size:28px !important;
  }

  html body #drawer-shop .shop-home,
  html body #drawer-shop .shop-list,
  html body #drawer-shop .shop-content,
  html body #drawer-shop .shop-body,
  html body #drawer-topup .topup-modal-content{
    height:calc(757px - 104px) !important;
    max-height:calc(757px - 104px) !important;
    padding:0 12px 14px !important;
    box-sizing:border-box !important;
  }

  /* Grid/card diperkecil */
  html body #drawer-shop .shop-grid,
  html body #drawer-shop .shop-list-grid,
  html body #drawer-shop .shop-items,
  html body #drawer-shop .shop-category-grid,
  html body #drawer-shop .shop-menu-grid,
  html body #drawer-topup .topup-grid{
    gap:9px !important;
  }

  html body #drawer-shop .shop-card,
  html body #drawer-shop .shop-item-card,
  html body #drawer-shop .shop-menu-card,
  html body #drawer-shop .shop-category-card{
    padding:10px !important;
    border-radius:18px !important;
  }

  html body #drawer-shop .shop-card img,
  html body #drawer-shop .shop-item-card img,
  html body #drawer-shop .shop-menu-card img,
  html body #drawer-shop .shop-category-card img{
    max-width:76px !important;
    max-height:76px !important;
    object-fit:contain !important;
  }

  html body #drawer-shop .shop-card h3,
  html body #drawer-shop .shop-card strong,
  html body #drawer-shop .shop-item-card h3,
  html body #drawer-shop .shop-item-card strong,
  html body #drawer-shop .shop-menu-card h3,
  html body #drawer-shop .shop-menu-card strong,
  html body #drawer-shop .shop-category-card h3,
  html body #drawer-shop .shop-category-card strong{
    font-size:15px !important;
    line-height:1.05 !important;
  }

  html body #drawer-shop .shop-card p,
  html body #drawer-shop .shop-card small,
  html body #drawer-shop .shop-item-card p,
  html body #drawer-shop .shop-item-card small,
  html body #drawer-shop .shop-menu-card p,
  html body #drawer-shop .shop-menu-card small,
  html body #drawer-shop .shop-category-card p,
  html body #drawer-shop .shop-category-card small{
    font-size:11px !important;
    line-height:1.15 !important;
  }

  html body #drawer-shop button,
  html body #drawer-topup button{
    font-size:13px !important;
  }

  /* Topup isi/card diperkecil, modal tetap besar */
  html body #drawer-topup .topup-balance-card{
    padding:12px !important;
    border-radius:20px !important;
    margin-bottom:10px !important;
  }

  html body #drawer-topup .topup-balance-card small{
    font-size:13px !important;
  }

  html body #drawer-topup .topup-balance-card strong{
    font-size:28px !important;
  }

  html body #drawer-topup .topup-balance-card img{
    width:56px !important;
    height:56px !important;
  }

  html body #drawer-topup .topup-amount-card{
    min-height:92px !important;
    padding:10px 8px !important;
    border-radius:18px !important;
  }

  html body #drawer-topup .topup-amount-card span{
    font-size:12px !important;
  }

  html body #drawer-topup .topup-amount-card strong{
    font-size:22px !important;
    line-height:1 !important;
    letter-spacing:-.04em !important;
  }

  html body #drawer-topup .topup-amount-card small{
    font-size:12px !important;
  }

  html body #drawer-topup .topup-custom-card{
    padding:12px !important;
    border-radius:20px !important;
    margin-top:10px !important;
  }

  html body #drawer-topup .topup-custom-card h3{
    font-size:20px !important;
    margin-bottom:8px !important;
  }

  html body #drawer-topup .topup-custom-row{
    grid-template-columns:minmax(0,1fr) 78px !important;
    gap:7px !important;
  }

  html body #drawer-topup .topup-custom-row input,
  html body #drawer-topup .topup-custom-row button{
    height:42px !important;
    font-size:13px !important;
    border-radius:14px !important;
  }

  html body #drawer-topup .topup-custom-card p{
    font-size:12px !important;
    line-height:1.25 !important;
  }
}


/* ===== PC SHOP FROM REFERENCE ONLY ===== */
/*
  KHUSUS SHOP TAMPILAN PC SAJA.
  Topup tidak disentuh.
  HP tidak disentuh.
  Tujuan: 3 pilihan Shop tampil di bawah, berbaris rapi, pas di frame portrait.
*/

@media (min-width:901px) and (pointer:fine){
  /* Modal tetap ukuran game portrait */
  html body #drawer-shop,
  html body #drawer-shop.drawer-sheet,
  html body #drawer-shop.shop-screen{
    position:fixed !important;
    left:50% !important;
    top:0 !important;
    right:auto !important;
    bottom:auto !important;
    width:437px !important;
    height:757px !important;
    max-width:437px !important;
    max-height:757px !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    opacity:0 !important;
    pointer-events:none !important;
    transform:translateX(-50%) translateY(12px) !important;
    z-index:2147481800 !important;
  }

  html body #drawer-shop.open,
  html body #drawer-shop.drawer-sheet.open,
  html body #drawer-shop.shop-screen.open{
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translateX(-50%) translateY(0) !important;
  }

  html body #drawer-shop.closing,
  html body #drawer-shop.drawer-sheet.closing,
  html body #drawer-shop.shop-screen.closing{
    opacity:0 !important;
    pointer-events:none !important;
    transform:translateX(-50%) translateY(12px) !important;
  }

  /* Header seperti referensi, tidak terlalu makan ruang */
  html body #drawer-shop .shop-head{
    height:112px !important;
    padding:26px 54px 8px 18px !important;
    box-sizing:border-box !important;
  }

  html body #drawer-shop .shop-head h2{
    font-size:46px !important;
    line-height:.95 !important;
    margin:0 !important;
  }

  html body #drawer-shop .shop-head p{
    font-size:15px !important;
    line-height:1.06 !important;
    margin-top:7px !important;
  }

  html body #drawer-shop .shop-close,
  html body #drawer-shop .drawer-close{
    right:13px !important;
    top:20px !important;
    width:48px !important;
    height:48px !important;
    font-size:32px !important;
  }

  /* Halaman awal shop: isi diturunkan ke bawah seperti referensi HP */
  html body #drawer-shop .shop-home{
    position:relative !important;
    width:100% !important;
    height:calc(757px - 112px) !important;
    max-height:calc(757px - 112px) !important;
    min-height:0 !important;
    padding:0 14px 22px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
  }

  html body #drawer-shop .shop-home-inner{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    margin:0 !important;
  }

  /* 3 pilihan utama Shop harus di bawah dan berbaris 3 kolom */
  html body #drawer-shop .shop-grid,
  html body #drawer-shop .shop-category-grid,
  html body #drawer-shop .shop-menu-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:10px !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    overflow:visible !important;
    align-items:end !important;
  }

  html body #drawer-shop .shop-card,
  html body #drawer-shop .shop-menu-card,
  html body #drawer-shop .shop-category-card,
  html body #drawer-shop [data-shop-category]{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:156px !important;
    min-height:156px !important;
    max-height:156px !important;
    padding:10px 8px !important;
    border-radius:22px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  html body #drawer-shop .shop-card img,
  html body #drawer-shop .shop-menu-card img,
  html body #drawer-shop .shop-category-card img,
  html body #drawer-shop [data-shop-category] img{
    width:82px !important;
    height:82px !important;
    max-width:82px !important;
    max-height:82px !important;
    object-fit:contain !important;
    margin:0 auto 8px !important;
    flex:0 0 auto !important;
  }

  html body #drawer-shop .shop-card h3,
  html body #drawer-shop .shop-card strong,
  html body #drawer-shop .shop-menu-card h3,
  html body #drawer-shop .shop-menu-card strong,
  html body #drawer-shop .shop-category-card h3,
  html body #drawer-shop .shop-category-card strong,
  html body #drawer-shop [data-shop-category] h3,
  html body #drawer-shop [data-shop-category] strong{
    font-size:15px !important;
    line-height:1.05 !important;
    margin:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  html body #drawer-shop .shop-card p,
  html body #drawer-shop .shop-card small,
  html body #drawer-shop .shop-menu-card p,
  html body #drawer-shop .shop-menu-card small,
  html body #drawer-shop .shop-category-card p,
  html body #drawer-shop .shop-category-card small,
  html body #drawer-shop [data-shop-category] p,
  html body #drawer-shop [data-shop-category] small{
    font-size:10px !important;
    line-height:1.12 !important;
    margin:5px 0 0 !important;
    max-height:24px !important;
    overflow:hidden !important;
  }

  /* Saat masuk list item, tetap rapi dalam modal portrait */
  html body #drawer-shop .shop-list,
  html body #drawer-shop .shop-content,
  html body #drawer-shop .shop-body{
    width:100% !important;
    height:calc(757px - 112px) !important;
    max-height:calc(757px - 112px) !important;
    padding:0 14px 18px !important;
    box-sizing:border-box !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }

  html body #drawer-shop .shop-list-grid,
  html body #drawer-shop .shop-items{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }

  html body #drawer-shop .shop-item-card{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    padding:10px !important;
    border-radius:18px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  html body #drawer-shop .shop-item-card img{
    max-width:76px !important;
    max-height:76px !important;
    object-fit:contain !important;
  }

  html body #drawer-shop .shop-item-card h3,
  html body #drawer-shop .shop-item-card strong{
    font-size:15px !important;
    line-height:1.05 !important;
  }

  html body #drawer-shop .shop-item-card p,
  html body #drawer-shop .shop-item-card small{
    font-size:11px !important;
    line-height:1.15 !important;
  }

  html body #drawer-shop button{
    font-size:13px !important;
  }
}


/* ===== PC SHOP CARDS BOTTOM BIGGER ONLY ===== */
/*
  KHUSUS SHOP PC SAJA.
  Topup tidak disentuh.
  HP tidak disentuh.

  Target:
  - 3 pilihan toko turun ke bawah.
  - 3 pilihan toko lebih besar.
  - Tetap berbaris 3 kolom di frame portrait.
*/
@media (min-width:901px) and (pointer:fine){
  /* Area shop awal dibuat seperti panggung: kartu nempel bawah */
  html body #drawer-shop .shop-home{
    position:relative !important;
    width:100% !important;
    height:calc(757px - 112px) !important;
    max-height:calc(757px - 112px) !important;
    padding:0 12px 18px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    align-items:stretch !important;
  }

  html body #drawer-shop .shop-home-inner{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    transform:translateY(86px) !important;
  }

  /* 3 kartu utama: lebih besar, rapat, dan di bawah */
  html body #drawer-shop .shop-grid,
  html body #drawer-shop .shop-category-grid,
  html body #drawer-shop .shop-menu-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:5px !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    align-items:end !important;
    justify-content:center !important;
  }

  html body #drawer-shop .shop-card,
  html body #drawer-shop .shop-menu-card,
  html body #drawer-shop .shop-category-card,
  html body #drawer-shop [data-shop-category]{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:192px !important;
    min-height:192px !important;
    max-height:192px !important;
    padding:12px 6px !important;
    border-radius:22px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  html body #drawer-shop .shop-card img,
  html body #drawer-shop .shop-menu-card img,
  html body #drawer-shop .shop-category-card img,
  html body #drawer-shop [data-shop-category] img{
    width:104px !important;
    height:104px !important;
    max-width:104px !important;
    max-height:104px !important;
    object-fit:contain !important;
    margin:0 auto 10px !important;
    flex:0 0 auto !important;
  }

  html body #drawer-shop .shop-card h3,
  html body #drawer-shop .shop-card strong,
  html body #drawer-shop .shop-menu-card h3,
  html body #drawer-shop .shop-menu-card strong,
  html body #drawer-shop .shop-category-card h3,
  html body #drawer-shop .shop-category-card strong,
  html body #drawer-shop [data-shop-category] h3,
  html body #drawer-shop [data-shop-category] strong{
    font-size:17px !important;
    line-height:1.05 !important;
    margin:0 !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow:hidden !important;
  }

  html body #drawer-shop .shop-card p,
  html body #drawer-shop .shop-card small,
  html body #drawer-shop .shop-menu-card p,
  html body #drawer-shop .shop-menu-card small,
  html body #drawer-shop .shop-category-card p,
  html body #drawer-shop .shop-category-card small,
  html body #drawer-shop [data-shop-category] p,
  html body #drawer-shop [data-shop-category] small{
    font-size:11px !important;
    line-height:1.1 !important;
    margin:5px 0 0 !important;
    max-height:26px !important;
    overflow:hidden !important;
  }

  /* Step bar ikut lebih bawah, dekat bawah kartu */
  html body #drawer-shop .shop-steps,
  html body #drawer-shop .shop-stepper,
  html body #drawer-shop [class*="shop-step"]{
    margin-top:14px !important;
  }
}


/* ===== PC SHOP MATCH HP CARD SCALE ===== */
/* HANYA SHOP di tampilan PC. Jangan sentuh topup / HP / modal lain. */
@media (min-width:901px) and (pointer:fine){
  html body #drawer-shop .shop-home{
    height:calc(757px - 112px) !important;
    max-height:calc(757px - 112px) !important;
    padding:0 16px 10px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    align-items:stretch !important;
    gap:8px !important;
    overflow:hidden !important;
  }

  html body #drawer-shop .shop-category-grid{
    margin-top:auto !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
    align-items:end !important;
    width:100% !important;
  }

  /* karena ini asset kartu utuh, jangan dikecilkan jadi icon */
  html body #drawer-shop .shop-category-card,
  html body #drawer-shop [data-shop-category]{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 !important;
    border:0 !important;
    border-radius:22px !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  html body #drawer-shop .shop-category-card img,
  html body #drawer-shop [data-shop-category] img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
    margin:0 !important;
    object-fit:contain !important;
  }

  html body #drawer-shop .shop-helper{
    margin-top:2px !important;
    padding:11px 12px !important;
  }
}


/* ===== MOBILE TOPUP FIT 25 PERCENT SMALLER ONLY ===== */
/*
  KHUSUS TOPUP DI HP SAJA.
  Shop / PC / modal lain tidak disentuh.
  Target: isi Topup dikecilkan ±25% agar semua text/card masuk layar.
*/
@media (max-width:900px), (pointer:coarse){
  html body #drawer-topup .topup-modal-head{
    height:96px !important;
    padding:22px 48px 6px 16px !important;
    box-sizing:border-box !important;
  }

  html body #drawer-topup .topup-modal-head h2{
    font-size:40px !important;
    line-height:.95 !important;
    margin:0 !important;
  }

  html body #drawer-topup .topup-modal-head p{
    font-size:13px !important;
    line-height:1.05 !important;
    margin-top:6px !important;
    white-space:normal !important;
  }

  html body #drawer-topup .topup-modal-close,
  html body #drawer-topup .drawer-close{
    right:12px !important;
    top:17px !important;
    width:42px !important;
    height:42px !important;
    font-size:28px !important;
  }

  html body #drawer-topup .topup-modal-content{
    height:calc(100dvh - 96px) !important;
    max-height:calc(100dvh - 96px) !important;
    padding:0 12px 12px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
    -webkit-overflow-scrolling:touch !important;
  }

  html body #drawer-topup .topup-balance-card{
    min-height:74px !important;
    padding:12px 14px !important;
    border-radius:20px !important;
    margin-bottom:10px !important;
  }

  html body #drawer-topup .topup-balance-card small{
    font-size:13px !important;
    line-height:1 !important;
  }

  html body #drawer-topup .topup-balance-card strong{
    font-size:30px !important;
    line-height:1 !important;
  }

  html body #drawer-topup .topup-balance-card img{
    width:56px !important;
    height:56px !important;
  }

  html body #drawer-topup .topup-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:9px !important;
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  html body #drawer-topup .topup-amount-card{
    min-height:92px !important;
    padding:10px 8px !important;
    border-radius:18px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  html body #drawer-topup .topup-amount-card span{
    font-size:12px !important;
    line-height:1.05 !important;
  }

  html body #drawer-topup .topup-amount-card strong{
    font-size:clamp(20px, 6vw, 28px) !important;
    line-height:1 !important;
    letter-spacing:-.045em !important;
    white-space:nowrap !important;
  }

  html body #drawer-topup .topup-amount-card small{
    font-size:12px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
  }

  html body #drawer-topup .topup-custom-card{
    padding:12px !important;
    border-radius:20px !important;
    margin-top:10px !important;
  }

  html body #drawer-topup .topup-custom-card h3{
    font-size:20px !important;
    line-height:1 !important;
    margin:0 0 8px !important;
  }

  html body #drawer-topup .topup-custom-row{
    grid-template-columns:minmax(0,1fr) 78px !important;
    gap:7px !important;
  }

  html body #drawer-topup .topup-custom-row input,
  html body #drawer-topup .topup-custom-row button{
    height:42px !important;
    font-size:13px !important;
    border-radius:14px !important;
  }

  html body #drawer-topup .topup-custom-card p,
  html body #drawer-topup .topup-rate-note,
  html body #drawer-topup .topup-note{
    font-size:11px !important;
    line-height:1.2 !important;
    margin-top:7px !important;
  }

  html body #drawer-topup .topup-confirm-box{
    transform:scale(.88) !important;
    transform-origin:center center !important;
  }
}

/* HP pendek: dipadatkan lagi supaya tidak keluar layar */
@media (max-width:900px) and (max-height:760px), (pointer:coarse) and (max-height:760px){
  html body #drawer-topup .topup-modal-head{
    height:84px !important;
    padding-top:18px !important;
  }

  html body #drawer-topup .topup-modal-head h2{
    font-size:34px !important;
  }

  html body #drawer-topup .topup-modal-head p{
    font-size:11px !important;
    margin-top:5px !important;
  }

  html body #drawer-topup .topup-modal-content{
    height:calc(100dvh - 84px) !important;
    max-height:calc(100dvh - 84px) !important;
    padding-bottom:10px !important;
  }

  html body #drawer-topup .topup-balance-card{
    min-height:64px !important;
    padding:10px 12px !important;
  }

  html body #drawer-topup .topup-balance-card strong{
    font-size:25px !important;
  }

  html body #drawer-topup .topup-balance-card img{
    width:48px !important;
    height:48px !important;
  }

  html body #drawer-topup .topup-amount-card{
    min-height:78px !important;
    padding:8px 7px !important;
  }

  html body #drawer-topup .topup-amount-card strong{
    font-size:clamp(18px, 5.6vw, 24px) !important;
  }

  html body #drawer-topup .topup-amount-card span,
  html body #drawer-topup .topup-amount-card small{
    font-size:10.5px !important;
  }
}


/* ===== DASHBOARD VEHICLE AREA DOWN FIXED ONLY ===== */
/*
  KHUSUS kendaraan dashboard.
  Target benar: wrapper .clean-vehicle-area.
  Bukan gambar langsung, supaya posisi turun benar dan tidak bentrok.
*/
.clean-vehicle-area{
  top:164px !important; /* sebelumnya sekitar 126px, turun ±38px / 1 cm */
}

/* Pastikan image kendaraan tetap mengikuti posisi wrapper, tidak digeser dobel. */
.clean-vehicle-img{
  top:2px !important;
}

/* ===== PROFILE/WITHDRAW MOBILE FIT SCREEN FINAL OVERRIDE ===== */
/* Kecilkan isi Profil + Withdraw agar muat 1 layar HP tanpa scroll panjang. */
@media (max-width:900px), (pointer:coarse){
  #drawer-profile.profile-screen{
    overflow:hidden !important;
  }

  #drawer-profile .profile-head{
    height:58px !important;
    padding:10px 44px 4px !important;
    align-items:center !important;
  }

  #drawer-profile .profile-head h2{
    font-size:25px !important;
    line-height:.95 !important;
    letter-spacing:.02em !important;
    text-shadow:0 2px 0 rgba(0,0,0,.28),0 7px 14px rgba(0,0,0,.35) !important;
  }

  #drawer-profile .profile-head p{
    margin-top:3px !important;
    gap:5px !important;
    font-size:8px !important;
    line-height:1 !important;
  }

  #drawer-profile .profile-head p span{
    width:18px !important;
    height:2px !important;
  }

  #drawer-profile .profile-close{
    width:34px !important;
    height:34px !important;
    right:9px !important;
    top:10px !important;
    font-size:25px !important;
    border-width:1px !important;
  }

  #drawer-profile .profile-content{
    height:calc(100dvh - 58px) !important;
    padding:0 9px 8px !important;
    overflow-y:hidden !important;
  }

  #drawer-profile .profile-tabs{
    gap:6px !important;
    padding:0 0 7px !important;
    position:relative !important;
    top:auto !important;
  }

  #drawer-profile .profile-tabs button{
    height:31px !important;
    border-radius:11px !important;
    font-size:11px !important;
    letter-spacing:.02em !important;
  }

  #drawer-profile .profile-panel.active{
    animation:none !important;
  }

  #drawer-profile .profile-card{
    padding:8px !important;
    border-radius:15px !important;
    margin-bottom:7px !important;
  }

  #drawer-profile .profile-main-card{
    grid-template-columns:48px 1fr !important;
    gap:8px !important;
    min-height:56px !important;
  }

  #drawer-profile .profile-avatar-big{
    width:48px !important;
    height:48px !important;
  }

  #drawer-profile .profile-avatar-big img{
    width:42px !important;
    height:42px !important;
  }

  #drawer-profile .profile-main-copy small,
  #drawer-profile .profile-card small{
    font-size:8px !important;
    letter-spacing:.08em !important;
  }

  #drawer-profile .profile-main-copy h3{
    margin:2px 0 1px !important;
    font-size:17px !important;
    line-height:1 !important;
  }

  #drawer-profile .profile-main-copy p{
    font-size:10px !important;
    line-height:1.15 !important;
  }

  #drawer-profile .profile-info-grid{
    gap:5px !important;
    margin-bottom:7px !important;
  }

  #drawer-profile .profile-info-grid div{
    min-height:41px !important;
    padding:7px 6px !important;
    border-radius:12px !important;
  }

  #drawer-profile .profile-info-grid span,
  #drawer-profile .locked-payout span{
    font-size:8px !important;
    line-height:1 !important;
  }

  #drawer-profile .profile-info-grid b,
  #drawer-profile .locked-payout b{
    margin-top:3px !important;
    font-size:12px !important;
    line-height:1 !important;
  }

  #drawer-profile .profile-card h3{
    margin:0 0 6px !important;
    font-size:14px !important;
    line-height:1 !important;
  }

  #drawer-profile .copy-row{
    grid-template-columns:1fr 58px !important;
    gap:5px !important;
    margin-bottom:5px !important;
  }

  #drawer-profile .copy-row input,
  #drawer-profile .copy-row button,
  #drawer-profile .profile-payout-form input,
  #drawer-profile .profile-payout-form button,
  #drawer-profile .profile-withdraw-form input,
  #drawer-profile .profile-withdraw-form select,
  #drawer-profile .profile-withdraw-form button{
    height:32px !important;
    min-height:32px !important;
    border-radius:11px !important;
    font-size:10.5px !important;
    padding:0 8px !important;
  }

  #drawer-profile .copy-row button,
  #drawer-profile .profile-payout-form button,
  #drawer-profile .profile-withdraw-form button{
    font-size:10px !important;
    padding:0 6px !important;
  }

  #drawer-profile .profile-hint,
  #drawer-profile .profile-line{
    font-size:10px !important;
    line-height:1.22 !important;
    margin:0 !important;
  }

  #drawer-profile .profile-hint.locked,
  #drawer-profile .profile-hint.danger{
    margin-top:5px !important;
  }

  #drawer-profile .profile-payout-form label{
    margin:6px 0 3px !important;
    font-size:9px !important;
    line-height:1 !important;
  }

  #drawer-profile .profile-payout-form button,
  #drawer-profile .profile-withdraw-form button{
    margin-top:6px !important;
    width:100% !important;
  }

  #drawer-profile .locked-payout{
    gap:5px !important;
  }

  #drawer-profile .locked-payout div{
    padding:7px !important;
    border-radius:12px !important;
  }

  #drawer-profile [data-profile-panel="withdraw"] .profile-card{
    padding:9px !important;
  }

  #drawer-profile [data-profile-panel="withdraw"] .profile-line{
    font-size:10.5px !important;
    line-height:1.22 !important;
    margin-bottom:3px !important;
  }

  #drawer-profile [data-profile-panel="withdraw"] .profile-line b{
    font-size:11.5px !important;
  }

  #drawer-profile .profile-withdraw-form{
    margin-top:5px !important;
  }

  #drawer-profile .profile-withdraw-form button{
    height:36px !important;
    min-height:36px !important;
    font-size:11px !important;
  }
}

/* HP sangat pendek: dipadatkan lagi supaya Profil/Withdraw tetap masuk layar. */
@media (max-width:900px) and (max-height:670px), (pointer:coarse) and (max-height:670px){
  #drawer-profile .profile-head{
    height:48px !important;
    padding-top:7px !important;
  }
  #drawer-profile .profile-head h2{
    font-size:21px !important;
  }
  #drawer-profile .profile-head p{
    display:none !important;
  }
  #drawer-profile .profile-close{
    width:30px !important;
    height:30px !important;
    top:8px !important;
    font-size:22px !important;
  }
  #drawer-profile .profile-content{
    height:calc(100dvh - 48px) !important;
    padding:0 8px 6px !important;
  }
  #drawer-profile .profile-tabs{
    padding-bottom:5px !important;
  }
  #drawer-profile .profile-tabs button{
    height:28px !important;
    font-size:10px !important;
    border-radius:10px !important;
  }
  #drawer-profile .profile-card{
    padding:7px !important;
    margin-bottom:5px !important;
    border-radius:13px !important;
  }
  #drawer-profile .profile-main-card{
    grid-template-columns:42px 1fr !important;
    min-height:48px !important;
    gap:7px !important;
  }
  #drawer-profile .profile-avatar-big{
    width:42px !important;
    height:42px !important;
  }
  #drawer-profile .profile-avatar-big img{
    width:36px !important;
    height:36px !important;
  }
  #drawer-profile .profile-main-copy h3{
    font-size:15px !important;
  }
  #drawer-profile .profile-main-copy p,
  #drawer-profile .profile-hint,
  #drawer-profile .profile-line{
    font-size:9px !important;
  }
  #drawer-profile .profile-info-grid{
    gap:4px !important;
    margin-bottom:5px !important;
  }
  #drawer-profile .profile-info-grid div{
    min-height:35px !important;
    padding:5px !important;
    border-radius:10px !important;
  }
  #drawer-profile .profile-info-grid span,
  #drawer-profile .locked-payout span{
    font-size:7px !important;
  }
  #drawer-profile .profile-info-grid b,
  #drawer-profile .locked-payout b{
    font-size:10.5px !important;
    margin-top:2px !important;
  }
  #drawer-profile .profile-card h3{
    font-size:12px !important;
    margin-bottom:4px !important;
  }
  #drawer-profile .copy-row input,
  #drawer-profile .copy-row button,
  #drawer-profile .profile-payout-form input,
  #drawer-profile .profile-payout-form button,
  #drawer-profile .profile-withdraw-form button{
    height:28px !important;
    min-height:28px !important;
    font-size:9px !important;
    border-radius:9px !important;
  }
  #drawer-profile .profile-payout-form label{
    margin:4px 0 2px !important;
    font-size:8px !important;
  }
  #drawer-profile .locked-payout{
    gap:4px !important;
  }
  #drawer-profile .locked-payout div{
    padding:5px !important;
    border-radius:10px !important;
  }
  #drawer-profile [data-profile-panel="withdraw"] .profile-card{
    padding:7px !important;
  }
  #drawer-profile [data-profile-panel="withdraw"] .profile-line,
  #drawer-profile [data-profile-panel="withdraw"] .profile-line b{
    font-size:9px !important;
    margin-bottom:2px !important;
  }
  #drawer-profile .profile-withdraw-form button{
    height:31px !important;
    min-height:31px !important;
    font-size:9.5px !important;
  }
}

/* ===== PROFILE HP FORCE SAME COMPACT FINAL ===== */
/* Override terakhir khusus HP asli/webview: Profil + Withdraw dipaksa compact agar tidak kebesaran. */
@media screen and (max-width:900px), screen and (pointer:coarse){
  html body #drawer-profile.profile-screen{
    width:100vw !important;
    height:100svh !important;
    max-height:100svh !important;
    overflow:hidden !important;
  }

  html body #drawer-profile .profile-head{
    height:52px !important;
    min-height:52px !important;
    padding:7px 42px 4px 42px !important;
    align-items:center !important;
  }

  html body #drawer-profile .profile-head h2{
    font-size:23px !important;
    line-height:1 !important;
    letter-spacing:.02em !important;
  }

  html body #drawer-profile .profile-head p{
    display:none !important;
  }

  html body #drawer-profile .profile-close{
    width:30px !important;
    height:30px !important;
    right:8px !important;
    top:10px !important;
    font-size:22px !important;
    border-width:1px !important;
  }

  html body #drawer-profile .profile-content{
    height:calc(100svh - 52px) !important;
    max-height:calc(100svh - 52px) !important;
    padding:0 8px 6px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  html body #drawer-profile .profile-tabs{
    position:relative !important;
    top:auto !important;
    gap:5px !important;
    padding:0 0 5px !important;
  }

  html body #drawer-profile .profile-tabs button{
    height:28px !important;
    min-height:28px !important;
    border-radius:10px !important;
    font-size:10px !important;
    line-height:1 !important;
    padding:0 6px !important;
  }

  html body #drawer-profile .profile-card{
    padding:7px !important;
    border-radius:12px !important;
    margin-bottom:5px !important;
  }

  html body #drawer-profile .profile-main-card{
    grid-template-columns:42px 1fr !important;
    gap:7px !important;
    min-height:48px !important;
  }

  html body #drawer-profile .profile-avatar-big{
    width:42px !important;
    height:42px !important;
  }

  html body #drawer-profile .profile-avatar-big img{
    width:36px !important;
    height:36px !important;
  }

  html body #drawer-profile .profile-main-copy small,
  html body #drawer-profile .profile-card small{
    font-size:7.5px !important;
    line-height:1 !important;
    letter-spacing:.06em !important;
  }

  html body #drawer-profile .profile-main-copy h3{
    margin:1px 0 0 !important;
    font-size:15px !important;
    line-height:1 !important;
  }

  html body #drawer-profile .profile-main-copy p,
  html body #drawer-profile .profile-hint,
  html body #drawer-profile .profile-line{
    font-size:9px !important;
    line-height:1.18 !important;
    margin:0 !important;
  }

  html body #drawer-profile .profile-info-grid{
    gap:4px !important;
    margin-bottom:5px !important;
  }

  html body #drawer-profile .profile-info-grid div{
    min-height:34px !important;
    padding:5px !important;
    border-radius:10px !important;
  }

  html body #drawer-profile .profile-info-grid span,
  html body #drawer-profile .locked-payout span{
    font-size:7px !important;
    line-height:1 !important;
  }

  html body #drawer-profile .profile-info-grid b,
  html body #drawer-profile .locked-payout b{
    margin-top:2px !important;
    font-size:10px !important;
    line-height:1 !important;
  }

  html body #drawer-profile .profile-card h3{
    margin:0 0 4px !important;
    font-size:12px !important;
    line-height:1 !important;
  }

  html body #drawer-profile .copy-row{
    grid-template-columns:1fr 54px !important;
    gap:4px !important;
    margin-bottom:4px !important;
  }

  html body #drawer-profile .copy-row input,
  html body #drawer-profile .copy-row button,
  html body #drawer-profile .profile-payout-form input,
  html body #drawer-profile .profile-payout-form button,
  html body #drawer-profile .profile-withdraw-form input,
  html body #drawer-profile .profile-withdraw-form select,
  html body #drawer-profile .profile-withdraw-form button{
    height:28px !important;
    min-height:28px !important;
    border-radius:9px !important;
    font-size:9px !important;
    padding:0 6px !important;
  }

  html body #drawer-profile .copy-row button,
  html body #drawer-profile .profile-payout-form button,
  html body #drawer-profile .profile-withdraw-form button{
    font-size:8.5px !important;
    padding:0 5px !important;
  }

  html body #drawer-profile .profile-payout-form label{
    margin:4px 0 2px !important;
    font-size:7.5px !important;
    line-height:1 !important;
  }

  html body #drawer-profile .profile-hint.locked,
  html body #drawer-profile .profile-hint.danger{
    margin-top:4px !important;
  }

  html body #drawer-profile .locked-payout{
    gap:4px !important;
  }

  html body #drawer-profile .locked-payout div{
    padding:5px !important;
    border-radius:10px !important;
  }

  html body #drawer-profile [data-profile-panel="withdraw"] .profile-card{
    padding:7px !important;
    margin-bottom:5px !important;
  }

  html body #drawer-profile [data-profile-panel="withdraw"] .profile-line,
  html body #drawer-profile [data-profile-panel="withdraw"] .profile-line b{
    font-size:9px !important;
    line-height:1.18 !important;
    margin-bottom:2px !important;
  }

  html body #drawer-profile .profile-withdraw-form{
    margin-top:4px !important;
  }

  html body #drawer-profile .profile-withdraw-form button{
    width:100% !important;
    height:31px !important;
    min-height:31px !important;
    font-size:9.5px !important;
  }
}

@media screen and (max-width:900px) and (min-height:760px), screen and (pointer:coarse) and (min-height:760px){
  html body #drawer-profile .profile-head{
    height:58px !important;
    min-height:58px !important;
  }
  html body #drawer-profile .profile-content{
    height:calc(100svh - 58px) !important;
    max-height:calc(100svh - 58px) !important;
  }
  html body #drawer-profile .profile-tabs button{
    height:31px !important;
    min-height:31px !important;
    font-size:11px !important;
  }
  html body #drawer-profile .profile-card{
    padding:8px !important;
    margin-bottom:6px !important;
  }
  html body #drawer-profile .profile-main-card{
    grid-template-columns:46px 1fr !important;
    min-height:52px !important;
  }
  html body #drawer-profile .profile-avatar-big{
    width:46px !important;
    height:46px !important;
  }
  html body #drawer-profile .profile-avatar-big img{
    width:40px !important;
    height:40px !important;
  }
}

/* ===== DYNAMIC JOB DURATION OPTIONS ===== */
#drawer-kerja.job-screen .job-card.job-card-dynamic{
  grid-template-columns:62px 1fr !important;
  align-items:center !important;
}
#drawer-kerja.job-screen .job-card-main{
  min-width:0 !important;
}
#drawer-kerja.job-screen .job-duration-options{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin-top:8px !important;
}
#drawer-kerja.job-screen .job-duration-options .btn.small{
  min-height:30px !important;
  height:30px !important;
  padding:0 9px !important;
  border-radius:999px !important;
  font-size:11px !important;
  line-height:1 !important;
}
@media (pointer:coarse), (max-width:900px){
  #drawer-kerja.job-screen .job-card.job-card-dynamic{
    grid-template-columns:54px 1fr !important;
    gap:8px !important;
    min-height:82px !important;
    padding:8px !important;
  }
  #drawer-kerja.job-screen .job-card.job-card-dynamic > img{
    width:52px !important;
    height:52px !important;
  }
  #drawer-kerja.job-screen .job-duration-options{
    gap:5px !important;
    margin-top:6px !important;
  }
  #drawer-kerja.job-screen .job-duration-options .btn.small{
    min-height:28px !important;
    height:28px !important;
    padding:0 8px !important;
    font-size:10px !important;
  }
}


/* Final logout button polish - profile drawer */
#drawer-profile .profile-logout-form{
  width:100% !important;
  margin:8px 0 4px !important;
}
#drawer-profile .profile-logout-btn{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:100% !important;
  min-height:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  border:0 !important;
  border-radius:14px !important;
  padding:12px 16px !important;
  background:linear-gradient(180deg,#ff4d4d 0%,#dc2626 56%,#991b1b 100%) !important;
  color:#fff !important;
  font-family:inherit !important;
  font-size:13px !important;
  font-weight:900 !important;
  letter-spacing:.03em !important;
  line-height:1 !important;
  text-align:center !important;
  text-transform:none !important;
  text-decoration:none !important;
  cursor:pointer !important;
  box-shadow:0 10px 20px rgba(127,29,29,.34), inset 0 1px 0 rgba(255,255,255,.24) !important;
}
#drawer-profile .profile-logout-btn::before{
  content:"";
  width:18px;
  height:18px;
  flex:0 0 18px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v10'/%3E%3Cpath d='M18.4 6.6a9 9 0 1 1-12.8 0'/%3E%3C/svg%3E");
}
#drawer-profile .profile-logout-icon{display:none !important;}
#drawer-profile .profile-logout-btn span:last-child{display:inline-block !important;}
#drawer-profile .profile-logout-btn:active{
  transform:translateY(1px) !important;
  filter:brightness(.96) !important;
}

/* Safe popup tap optimization - no layout/transform override */
[data-open],
.drawer-close,
.drawer-backdrop,
.btn,
button{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* Safe popup performance patch - no transform/layout design override */
#drawer-kerja.job-screen:not(.open),
#drawer-garasi.garage-screen:not(.open),
#drawer-shop.shop-screen:not(.open){
  content-visibility:hidden;
  contain:layout paint style;
}

#drawer-kerja.job-screen.open,
#drawer-garasi.garage-screen.open,
#drawer-shop.shop-screen.open{
  content-visibility:visible;
}

#drawer-kerja.job-screen,
#drawer-garasi.garage-screen,
#drawer-shop.shop-screen{
  will-change:opacity;
}

/* ===== POPUP SPEED + COMPACT JOB CONTENT PATCH v3 ===== */
/* Meniru rasa menu kanan yang cepat: durasi transisi dipendekkan, tanpa mengubah posisi/layout dasar. */
#drawer-kerja.job-screen,
#drawer-garasi.garage-screen,
#drawer-shop.shop-screen{
  transition-duration:.16s,.12s !important;
}

#drawer-kerja.job-screen:not(.open),
#drawer-garasi.garage-screen:not(.open),
#drawer-shop.shop-screen:not(.open){
  content-visibility:hidden !important;
  contain:layout paint style !important;
}

/* Isi menu kerja dipadatkan agar tidak terasa kebesaran di HP. */
#drawer-kerja.job-screen{
  padding-left:10px !important;
  padding-right:10px !important;
}
#drawer-kerja.job-screen .drawer-head{
  padding:18px 48px 8px 10px !important;
  min-height:58px !important;
}
#drawer-kerja.job-screen .drawer-head h2{
  font-size:28px !important;
  line-height:1 !important;
}
#drawer-kerja.job-screen .panel-card{
  padding:10px !important;
  margin-bottom:9px !important;
  border-radius:16px !important;
}
#drawer-kerja.job-screen .panel-card h2{
  font-size:16px !important;
  margin-bottom:8px !important;
}
#drawer-kerja.job-screen .job-list{
  gap:8px !important;
}
#drawer-kerja.job-screen .job-card,
#drawer-kerja.job-screen .job-card.job-card-dynamic{
  min-height:70px !important;
  grid-template-columns:48px 1fr !important;
  gap:8px !important;
  padding:8px !important;
  border-radius:14px !important;
}
#drawer-kerja.job-screen .job-card > img,
#drawer-kerja.job-screen .job-card.job-card-dynamic > img{
  width:46px !important;
  height:46px !important;
  align-self:center !important;
}
#drawer-kerja.job-screen .job-card h3{
  font-size:14px !important;
  line-height:1.08 !important;
  margin-bottom:3px !important;
}
#drawer-kerja.job-screen .job-card p{
  font-size:10.5px !important;
  line-height:1.15 !important;
  margin-bottom:3px !important;
}
#drawer-kerja.job-screen .job-card small{
  font-size:10px !important;
  line-height:1.15 !important;
}
#drawer-kerja.job-screen .job-card small img,
#drawer-kerja.job-screen .job-card p img,
#drawer-kerja.job-screen .job-row small img,
#drawer-kerja.job-screen .job-row p img{
  width:8px !important;
  height:8px !important;
  min-width:8px !important;
  max-width:8px !important;
  max-height:8px !important;
  vertical-align:-2px !important;
  object-fit:contain !important;
  margin-right:3px !important;
  filter:none !important;
}
#drawer-kerja.job-screen .job-duration-options{
  gap:4px !important;
  margin-top:5px !important;
}
#drawer-kerja.job-screen .job-duration-options .btn.small{
  min-height:24px !important;
  height:24px !important;
  padding:0 7px !important;
  border-radius:999px !important;
  font-size:9.5px !important;
}
#drawer-kerja.job-screen .job-row.big{
  grid-template-columns:52px 1fr auto !important;
  gap:8px !important;
}
#drawer-kerja.job-screen .job-row.big img{
  width:48px !important;
  height:48px !important;
}
#drawer-kerja.job-screen .timer{
  font-size:13px !important;
}

@media (pointer:coarse), (max-width:900px){
  #drawer-kerja.job-screen .drawer-close{
    width:42px !important;
    height:42px !important;
    font-size:30px !important;
    top:14px !important;
    right:10px !important;
  }
  #drawer-kerja.job-screen .job-card,
  #drawer-kerja.job-screen .job-card.job-card-dynamic{
    min-height:66px !important;
    grid-template-columns:44px 1fr !important;
    padding:7px !important;
  }
  #drawer-kerja.job-screen .job-card > img,
  #drawer-kerja.job-screen .job-card.job-card-dynamic > img{
    width:42px !important;
    height:42px !important;
  }
}

/* Duitku sandbox payment method selector */
#drawer-topup .duitku-method-wrap{
  margin-top:14px !important;
  text-align:left !important;
}
#drawer-topup .duitku-method-title{
  color:#aaff43 !important;
  font-size:12px !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.3px !important;
  margin:0 0 8px !important;
}
#drawer-topup .duitku-method-list{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  max-height:220px !important;
  overflow:auto !important;
  padding-right:2px !important;
}
#drawer-topup .duitku-method-card{
  min-height:54px !important;
  display:grid !important;
  grid-template-columns:32px 1fr !important;
  align-items:center !important;
  gap:8px !important;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  padding:8px !important;
  text-align:left !important;
  cursor:pointer !important;
}
#drawer-topup .duitku-method-card.selected{
  border-color:rgba(170,255,67,.85) !important;
  background:linear-gradient(180deg,rgba(134,255,54,.24),rgba(55,171,23,.16)) !important;
  box-shadow:0 0 0 1px rgba(170,255,67,.18), 0 12px 24px rgba(0,0,0,.22) !important;
}
#drawer-topup .duitku-method-card img{
  width:30px !important;
  height:30px !important;
  object-fit:contain !important;
  border-radius:8px !important;
  background:#fff !important;
  padding:3px !important;
}
#drawer-topup .duitku-method-badge{
  width:30px !important;
  height:30px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:8px !important;
  background:rgba(170,255,67,.18) !important;
  color:#aaff43 !important;
  font-size:10px !important;
  font-weight:1000 !important;
}
#drawer-topup .duitku-method-card b{
  display:block !important;
  font-size:11px !important;
  line-height:1.15 !important;
  font-weight:1000 !important;
}
#drawer-topup .duitku-method-card small{
  display:block !important;
  margin-top:2px !important;
  color:#dcecff !important;
  font-size:9px !important;
  line-height:1.1 !important;
  font-weight:800 !important;
}
#drawer-topup .duitku-method-loading{
  grid-column:1/-1 !important;
  min-height:54px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:14px !important;
  border:1px dashed rgba(255,255,255,.18) !important;
  color:#dcecff !important;
  font-size:12px !important;
  line-height:1.35 !important;
  padding:10px !important;
  text-align:center !important;
}
#drawer-topup .duitku-method-error{
  color:#ffd2d2 !important;
}
#drawer-topup #topupPayBtn:disabled{
  opacity:.55 !important;
  filter:grayscale(.3) !important;
  cursor:not-allowed !important;
}
@media (max-height:720px){
  #drawer-topup .duitku-method-list{max-height:170px !important;}
  #drawer-topup .duitku-method-card{min-height:48px !important; padding:7px !important;}
}


/* ===== WALK WEB UP HP KEEP V5 ===== */
.clean-vehicle-area{
  top:126px !important;
  height:242px !important;
  overflow:visible !important;
}

.clean-walk-box{
  width:100% !important;
  height:242px !important;
  top:0 !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  display:block !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.clean-walk-box img{
  position:absolute !important;
  left:50% !important;
  bottom:34px !important;
  transform:translateX(-50%) !important;
  width:207px !important;
  height:207px !important;
  max-width:none !important;
  object-fit:contain !important;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.45)) !important;
}

/* HP / WebView tetap posisi yang sudah pas */
@media (pointer: coarse), (max-width:900px){
  .clean-vehicle-area{
    top:126px !important;
    height:242px !important;
    overflow:visible !important;
  }

  .clean-walk-box{
    height:242px !important;
    padding:0 !important;
    overflow:visible !important;
  }

  .clean-walk-box img{
    position:absolute !important;
    left:50% !important;
    bottom:4px !important;
    transform:translateX(-50%) !important;
    width:207px !important;
    height:207px !important;
  }
}